/* Sale del catalogo e schede RareKeepers: la stessa notte verde della casa, letta da casa.css (colori, caratteri, bottoni, testata, piede).
   Il sigillato sta nella sua teca sotto il faretto, col cartellino accanto; le carte singole si inclinano; la condizione ha sempre il suo metro. */

.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tenue { color: var(--tenue); }
.vuoto { padding: 48px 0; color: var(--tenue); font-size: var(--t-lead); }

/* ---------- capo della sala ---------- */
.capo-sala {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(48px, 5vw, 88px);
}
.capo-sala h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.025em; }
.capo-sala .sopra { justify-self: end; }

/* La prossima uscita del gioco, con i giorni che mancano */
.prossima {
  grid-column: 1 / -1; margin-top: clamp(16px, 2vw, 32px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 32px;
  padding: 20px 28px; border-radius: var(--r); background: var(--velluto);
}
.prossima:hover { background: var(--velluto-2); }
.js .prossima.dentro:active, .prossima:active { transform: scale(.98); transition-duration: 100ms; } /* la riga entra con .dentro, che azzera il transform: qui serve la regola più forte */
.prossima-quando { display: flex; align-items: baseline; gap: 8px; }
.prossima .giorno { font-size: 2.25rem; }
.prossima strong { font-weight: 600; color: var(--testa); }

/* ---------- vetrina ---------- */
.vetrina { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--stacco); }
.vetrina-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.vetrina-testa h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; letter-spacing: -.015em; }

/* Filtri: pulsanti a pillola, quello scelto in crema */
.filtri { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.filtro { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--velluto); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.filtro button {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--tenue);
  font-size: var(--t-small); font-weight: 500; cursor: pointer; transition: background var(--veloce), color var(--veloce), transform 100ms ease-out;
}
.filtro button:hover { color: var(--crema); }
.filtro button:active { transform: scale(.96); }
.filtro button[aria-pressed="true"] { background: var(--crema); color: var(--inchiostro); }
html:not(.js) .filtro { display: none; }

/* Il sigillato: nicchia col faretto a sinistra, cartellino a destra */
/* Il cuore sta fuori dal link della teca e della carta, nell'angolo: in alto sulla teca, sulla riga della disponibilità sotto la carta */
.teche > li, .carte > li { position: relative; }
.carte > li { align-self: start; } /* il cuore resta sulla riga della disponibilità anche se la carta accanto è più alta */
.teche > li > .cuore { position: absolute; top: 12px; right: 12px; }
.teca-prodotto .tipo { padding-right: 36px; }
.carte > li > .cuore { position: absolute; right: -11px; bottom: -10px; }
.nota-desideri { max-width: 30em; font-size: var(--t-small); color: var(--tenue); }
.nota-desideri a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.teche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.teca-prodotto {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); height: 100%; border-radius: var(--r); overflow: hidden;
  background: var(--velluto);
}
.teca-prodotto:hover { background: var(--velluto-2); }
.nicchia {
  --pad: 13%; position: relative; display: block; min-height: clamp(240px, 22vw, 320px);
  background: radial-gradient(62% 52% at 50% 34%, #24453A 0%, rgba(16, 35, 29, 0) 72%), var(--notte-2); /* taste-skill-ignore: il faretto nella nicchia */
}
.nicchia::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 11%; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .6); filter: blur(12px); }
.nicchia img {
  position: absolute; z-index: 1; left: var(--pad); top: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); /* taste-skill-ignore: il prodotto si stacca dal velluto, la teca è cliccabile */
  transition: transform 600ms var(--molla);
}
.teca-prodotto:hover .nicchia img { transform: translateY(-8px) scale(1.03); }
.cartellino { display: grid; align-content: space-between; gap: 20px; padding: clamp(22px, 2.4vw, 36px); }
.tipo, .contenuto, .dove { font-size: 1rem; color: var(--tenue); }
.teca-prodotto .nome { margin-top: 10px; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.teca-prodotto .contenuto { display: grid; gap: 2px; margin-top: 14px; }
.teca-prodotto .contenuto li { position: relative; padding-left: .9em; } /* a capo, il testo resta allineato al testo */
.teca-prodotto .contenuto li::before { content: '·'; position: absolute; left: .1em; color: var(--oro-corsivo); }
.cartellino-basso { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.prezzo { font: 400 1.5rem/1 'Titoli', Georgia, serif; color: var(--testa); font-variant-numeric: tabular-nums; }
.vedi { font-weight: 600; color: var(--oro-corsivo); }

/* Le carte singole: la carta in alto, il cartellino sotto */
.carte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 56px) clamp(16px, 2.2vw, 36px); }
.tessera-carta { display: grid; gap: 20px; perspective: 1000px; }
.tessera-carta .carta { width: 100%; box-shadow: 0 24px 48px rgba(0, 0, 0, .5); /* taste-skill-ignore: la carta è cliccabile e si inclina: l'ombra la stacca dal fondo */ }
.tessera-carta .cartellino { padding: 0; gap: 6px; align-content: start; }
.tessera-carta .nome { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.005em; }
.tessera-carta .riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.tessera-carta .prezzo { font-size: 1.375rem; }
.tessera-carta:hover .nome { color: var(--oro-corsivo); }

/* La condizione: un pallino del suo colore prima del nome del grado */
.cond { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.cond::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cond-NM { color: #8BE9C9; }
.cond-EX { color: var(--oro-corsivo); }
.cond-GD { color: var(--tenue); }

/* L'ultima tessera porta a tutte le carte singole */
.tessera-tutte {
  display: grid; align-content: space-between; aspect-ratio: 600 / 838; padding: 28px; border-radius: 4.6% / 3.3%;
  background: var(--velluto); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .16); /* taste-skill-ignore: il bordo della tessera vuota, non un'ombra */
}
.tessera-tutte:hover { background: var(--velluto-2); }
.tutte-dentro { display: grid; gap: 8px; color: var(--tenue); }
.tutte-numero { font: 400 clamp(3.5rem, 2.5rem + 3vw, 6rem)/.9 'Titoli', Georgia, serif; color: var(--testa); }

/* ---------- scheda ---------- */
.dettaglio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(16px, 2vw, 32px) var(--gutter) var(--stacco);
}
.dettaglio > .indietro { grid-column: 1 / -1; margin-bottom: calc(-1 * clamp(16px, 3vw, 72px)); }
.dettaglio-figura {
  position: sticky; top: 96px; display: grid; justify-items: center; gap: 24px; padding: clamp(40px, 5vw, 80px) 24px; border-radius: var(--r);
  background: radial-gradient(60% 50% at 50% 40%, #1E3D33 0%, rgba(16, 35, 29, 0) 70%), var(--notte-2); /* taste-skill-ignore: il faretto sulla scheda */
}
.dettaglio-figura .nicchia-grande { --pad: 6%; width: 100%; max-width: 520px; min-height: 0; aspect-ratio: 1; background: none; }
.dettaglio-testo { display: grid; gap: 20px; padding-top: clamp(8px, 3vw, 48px); }
.indietro { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; color: var(--tenue); font-weight: 500; transition: color var(--veloce); }
.indietro:hover { color: var(--crema); }
.indietro .icona { width: 18px; height: 18px; transition: transform var(--veloce) var(--molla); }
.indietro:hover .icona { transform: translateX(-3px); }
.dettaglio h1 { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em; }
.dettaglio-prezzo { margin-top: 8px; font: 400 clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem)/1 'Titoli', Georgia, serif; color: var(--testa); font-variant-numeric: tabular-nums; }
.dettaglio-prezzo span { display: block; margin-top: 10px; font: 400 var(--t-small)/1.4 'Testo', system-ui, sans-serif; color: var(--tenue); }
/* Disponibile, esaurito o in arrivo: sotto ogni carta e accanto al prezzo */
.disp { font-size: var(--t-small); font-weight: 600; color: var(--tenue); }
.disp-disponibile { color: #8BE9C9; }
.disp-arrivo { color: var(--oro-corsivo); }
.dettaglio .disp { margin-top: 12px; }
.dettaglio .bottoni .btn, .dettaglio .bottoni .contatore { min-width: min(100%, 320px); }
.dettaglio .scheda { margin-top: 24px; }
.dettaglio .scheda a { text-decoration: underline; text-decoration-color: rgba(243, 237, 225, .35); text-underline-offset: 4px; transition: text-decoration-color var(--veloce); }
.dettaglio .scheda a:hover { text-decoration-color: currentColor; }
.contiene-titolo { margin-top: 12px; font: 600 1.1875rem/1.3 'Testo', system-ui, sans-serif; color: var(--testa); }
.contiene { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; color: var(--crema); }
.contiene li::marker { color: var(--oro-corsivo); }
.garanzie { display: grid; gap: 14px; margin-top: 16px; padding: 24px 28px; border-radius: var(--r); background: var(--velluto); }
.garanzie li { display: flex; align-items: center; gap: 14px; color: var(--crema); }
.garanzie .icona { color: var(--oro-corsivo); }

/* La carta grande: si inclina e si gira per mostrare il retro */
.vista { width: min(76%, 440px); }
.carta-grande { width: 100%; overflow: visible; box-shadow: none; }
.facce { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: perspective(1600px) rotateY(0); transition: transform 900ms var(--molla); }
.faccia { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4.6% / 3.3%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); /* taste-skill-ignore: la carta si solleva dal velluto */ }
.retro {
  display: grid; place-items: center; padding: 18%; transform: rotateY(180deg); text-align: center; color: var(--tenue);
  background: var(--velluto-2); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .2), 0 40px 80px rgba(0, 0, 0, .6); /* taste-skill-ignore: bordo e ombra del retro, come il fronte */
}
.vista[data-lato="retro"] .facce { transform: perspective(1600px) rotateY(180deg); }
html:not(.js) .lati { display: none; }

/* ---------- condizione: sala chiara ---------- */
.condizione {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start;
  padding: var(--stacco) max(var(--gutter), calc((100% - var(--max)) / 2));
  background: var(--carta); color: var(--inchiostro);
}
.condizione + .vetrina { padding-top: var(--stacco); }
/* Il titolo resta fermo sotto la testata mentre il contenuto accanto scorre */
.condizione-testo, .racconto-capo > h2 { position: sticky; top: 104px; }
.condizione h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; color: var(--inchiostro); }
.condizione h2 em { color: var(--verde); }
.condizione .sopra { margin-top: 20px; color: var(--inchiostro-tenue); }
.condizione mark.dd { background: #FFE38A; }
/* La sua storia: titolo e racconto affiancati, sotto i fatti in colonne divise da un filo, come il cartellino di una teca */
.racconto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: clamp(56px, 6vw, 96px); }
/* Titolo e racconto in un blocco loro: il titolo fermo sotto la testata si ferma all'ultima riga del racconto e poi sale, senza coprire i fatti */
.racconto-capo { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 24px; align-items: start; }
.racconto-testo { font-size: var(--t-lead); line-height: 1.6; color: var(--inchiostro); max-width: 36em; }
.racconto .fatti { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; border-top: 1px solid rgba(11, 31, 26, .16); gap: 0; padding: 0; border-radius: 0; background: none; } /* annulla i fatti della pagina Chi siamo, quando servizi.css è caricato */
.racconto + .condizione { padding-top: clamp(32px, 4vw, 64px); } /* due sale chiare di seguito: un solo stacco */
.racconto .fatti div { display: grid; gap: 12px; align-content: start; padding: 32px 32px 0 0; }
.racconto .fatti div + div { padding-left: 32px; border-left: 1px solid rgba(11, 31, 26, .16); }
.racconto .fatti dt { font-size: var(--t-small); font-weight: 600; color: var(--inchiostro-tenue); }
.racconto .fatti dd { font: 400 clamp(1.375rem, 1.1rem + .8vw, 1.875rem)/1.2 'Titoli', Georgia, serif; color: var(--inchiostro); text-wrap: balance; }
.scala { display: grid; gap: 12px; }
.scala li { display: grid; gap: 6px; padding: 26px 28px; border-radius: var(--r); background: var(--carta-2); color: var(--inchiostro-tenue); }
.scala h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-terzo); line-height: 1.2; color: var(--inchiostro); }
.scala li[aria-current] { background: var(--inchiostro); color: #C9D3CE; }
.scala li[aria-current] h3 { color: var(--carta); }
.questa { font: 600 13px/1 'Testo', system-ui, sans-serif; letter-spacing: .02em; color: var(--oro-ink); background: var(--oro); border-radius: 999px; padding: 6px 10px; }

/* ---------- tablet ---------- */
@media (max-width: 1068px) {
  .capo-sala { grid-template-columns: minmax(0, 1fr); }
  .capo-sala .sopra { justify-self: start; }
  .teche { grid-template-columns: minmax(0, 1fr); }
  .teca-prodotto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .dettaglio, .condizione { grid-template-columns: minmax(0, 1fr); }
  .condizione-testo, .racconto-capo > h2 { position: static; }
  .racconto { row-gap: 24px; }
  .racconto .fatti { margin-top: 24px; }
  .dettaglio-figura { position: static; }
  .vista { width: min(56%, 340px); }
  .dettaglio-figura .nicchia-grande { max-width: 360px; }
}
@media (max-width: 900px) {
  .carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- telefono ---------- */
@media (max-width: 734px) {
  .capo-sala h1 { font-size: 2.5rem; }
  .prossima { grid-template-columns: auto minmax(0, 1fr); padding: 18px 20px; gap: 6px 18px; }
  .prossima-quando { grid-row: span 3; flex-direction: column; gap: 0; }
  .prossima .mancano, .prossima .azione { grid-column: 2; }
  .teca-prodotto { grid-template-columns: minmax(0, 1fr); }
  .nicchia { --pad: 10%; min-height: 0; height: 240px; }
  .carte { gap: 32px 14px; }
  .tessera-carta { gap: 14px; }
  .tessera-carta .nome { font-size: 1.125rem; }
  .tessera-carta .riga { flex-direction: column; align-items: start; gap: 6px; }
  .tessera-carta .prezzo { font-size: 1.25rem; }
  .tessera-tutte { padding: 18px; }
  .filtri { flex-direction: column; align-items: stretch; }
  .filtro { align-self: start; flex-wrap: wrap; border-radius: 26px; }
  .filtro button { padding: 0 14px; }
  .dettaglio-figura { padding: 28px 16px; }
  .vista { width: 56%; }
  .dettaglio-figura .nicchia-grande { max-width: 260px; }
  .garanzie { padding: 20px; }
  .racconto .fatti { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .racconto .fatti div, .racconto .fatti div + div { padding: 20px 0; border-left: 0; }
  .racconto .fatti div + div { border-top: 1px solid rgba(11, 31, 26, .16); }
  .scala li { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .facce, .nicchia img, .indietro .icona { transition-duration: 1ms; }
}