/* -------------------------------------------------------------------------
   DeckRoom -- il vestito del sito.

   Tema CHIARO, come i negozi di carte che funzionano (federicstore, nerdmatic):
   pagina bianca, prodotti che risaltano sul bianco, una barra di navigazione
   colorata che tiene insieme tutto. Il nero della prima versione faceva sembrare
   il negozio una console per addetti ai lavori.

   L'identita' resta quella dei distributori -- viola, giallo, magenta, il fulmine --
   ma qui viola e giallo sono ACCENTI su fondo bianco, non il fondo.
   ------------------------------------------------------------------------- */
:root{
  --viola:#4A1E8C;
  --viola-scuro:#38156b;
  --viola-chiaro:#6b31c4;
  --giallo:#FFC81A;
  --giallo-scuro:#e0ac00;
  --magenta:#F5308C;
  --nero:#191225;

  --pagina:#f4f5f9;
  --carta:#ffffff;
  --testo:#1d1a26;
  --testo-soft:#6b6880;
  --bordo:#e4e3ee;
  --raggio:14px;
  --ombra:0 2px 10px rgba(30,20,60,.07);
  --ombra-alta:0 10px 28px rgba(30,20,60,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--pagina);
  color:var(--testo);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}

.titolo{font-family:"Archivo Black","Arial Black",sans-serif;font-style:italic;
  letter-spacing:-.02em;text-transform:uppercase;line-height:.95}

/* --------------------------------------------------------------- barra annuncio */
.annuncio{background:var(--nero);color:#fff;text-align:center;font-weight:600;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px}
.annuncio b{color:var(--giallo)}

/* ------------------------------------------------------------------ testata */
.testata{background:var(--carta);border-bottom:1px solid var(--bordo)}
/* Tre colonne, non tre pezzi in fila: le due laterali prendono lo stesso spazio (1fr)
   e la ricerca sta esattamente in mezzo alla pagina. Con il flex la barra si limitava a
   stare FRA marchio e carrello, e siccome il marchio e' piu' largo del pulsante finiva
   spostata a destra. */
.testata .riga{max-width:1200px;margin:0 auto;padding:14px 18px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
/* ------------------------------------------------------------------ marchio
   Una parola sola, DeckRoom, nel carattere di casa. Niente saetta, niente due righe:
   il nome deve leggersi in un colpo, anche piccolo, anche stampato in grigio. */
@font-face{font-family:"Geist Pixel";src:url("/statico/font/geist-pixel.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
.marchio{display:inline-flex;align-items:center;align-self:center;flex:0 0 auto;
  position:relative;z-index:45;text-decoration:none;line-height:1;
  font-family:"Geist Pixel","Unbounded",monospace;font-weight:400;
  font-size:45px;letter-spacing:0;color:var(--nero);
  transition:transform .22s cubic-bezier(.22,.9,.3,1)}
.marchio:hover{transform:translateY(-2px)}
.marchio .parola{display:block}
@media (prefers-reduced-motion:reduce){ .marchio:hover{transform:none} }

/* Sui fondi scuri: bianco. */
.marchio.chiaro{color:#fff}

/* Nel piede: piu' piccolo e senza sollevamento. */
.marchio.piccolo{font-size:32px;z-index:auto}
.marchio.piccolo:hover{transform:none}

@media (max-width:900px){ .marchio{font-size:37px} }
@media (max-width:560px){ .marchio{font-size:30px} }
.cerca{position:relative;width:560px;max-width:100%;justify-self:center}
.cerca input{width:100%;background:var(--pagina);border:1.5px solid var(--bordo);
  border-radius:999px;padding:11px 18px 11px 42px;outline:none;color:var(--testo)}
.cerca input::placeholder{color:var(--testo-soft)}
.cerca input:focus{border-color:var(--viola-chiaro);background:#fff}
.cerca .lente{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--testo-soft);font-size:17px}
.azioni{display:flex;align-items:center;gap:8px;justify-self:end}
.bottone-carrello{position:relative;background:var(--giallo);color:var(--nero);
  border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;
  box-shadow:var(--ombra)}
.bottone-carrello:hover{background:var(--giallo-scuro)}
.bottone-carrello .conta{background:var(--magenta);color:#fff;border-radius:999px;
  padding:1px 7px;margin-left:6px;font-size:12px}

/* la barra dei giochi: e' la spina dorsale della navigazione, sempre a portata */
.menu-giochi{background:var(--viola);position:sticky;top:0;z-index:40;
  box-shadow:0 2px 10px rgba(30,20,60,.15)}
/* NIENTE overflow qui: ritagliava le tendine, che sono in posizione assoluta e devono
   poter uscire dalla barra. Le voci sono poche, se non entrano vanno a capo. */
.menu-giochi .dentro{max-width:1200px;margin:0 auto;padding:0 12px;
  display:flex;gap:2px;flex-wrap:wrap}
.menu-giochi a{padding:12px 16px;font-weight:600;font-size:14.5px;color:#e8dcff;
  white-space:nowrap;border-bottom:3px solid transparent}
.menu-giochi a:hover{color:#fff;background:rgba(255,255,255,.10)}
.menu-giochi a.attivo{color:#fff;border-bottom-color:var(--giallo);background:rgba(0,0,0,.14)}

/* ----------------------------------------------------------------- struttura */
.contenuto{max-width:1280px;margin:0 auto;padding:18px 22px 80px}
.sezione-titolo{display:flex;align-items:center;gap:12px;margin:34px 0 20px}
.sezione-titolo h2{font-size:25px;margin:0;color:var(--nero)}
.sezione-titolo span{color:var(--testo-soft);font-size:14px}
/* Titolo centrato: si usa quando sotto c'e' una cosa sola e centrata (l'accesso). Il
   titolo e la sua spiegazione vanno IN COLONNA, non affiancati -- messi in riga il blocco
   risulta centrato ma il titolo no, ed e' quello che si guarda. */
.sezione-titolo.centrata{flex-direction:column;align-items:center;gap:6px;text-align:center}

/* --------------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;border-radius:18px;background:var(--viola);
  padding:34px 40px;margin-top:14px;box-shadow:var(--ombra-alta);color:#fff;
  display:flex;align-items:center;gap:26px;min-height:350px}
/* Lo sfondo dell'hero e' la grafica vera del wrap. Il velo viola sopra serve a far
   leggere il testo: senza, il giallo delle schegge mangia le lettere bianche. */
.hero .schegge{position:absolute;inset:0;pointer-events:none;
  background:url("/statico/immagini/schegge.jpg") center/cover no-repeat}
/* Il velo tiene leggibile il testo a sinistra e lascia respirare le schegge a destra,
   dove ci sono le carte. Prima copriva tutto e la grafica del wrap non si vedeva. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(45,14,90,.96) 26%,rgba(45,14,90,.72) 48%,rgba(45,14,90,.10) 78%)}
.hero-testo{position:relative;z-index:2;max-width:560px;flex:1 1 460px}
.hero h1{font-size:clamp(30px,4.4vw,50px);margin:0 0 10px;
  text-shadow:0 3px 18px rgba(0,0,0,.35)}
.hero h1 em{color:var(--giallo);font-style:italic}
.hero p{color:#e9e0ff;font-size:15.5px;margin:0 0 16px;max-width:440px}
.pulsanti{display:flex;gap:10px;flex-wrap:wrap}
.pulsante{background:var(--giallo);color:var(--nero);border:0;border-radius:999px;
  padding:10px 20px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.pulsante:hover{background:var(--giallo-scuro)}
.pulsante.vuoto{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.pulsante.vuoto:hover{background:rgba(255,255,255,.12)}
.pulsante:disabled{opacity:.45;cursor:not-allowed}
.contenuto .pulsante.vuoto{color:var(--viola);border-color:var(--viola)}
.contenuto .pulsante.vuoto:hover{background:rgba(74,30,140,.08)}
.hero .pulsante.vuoto{color:#fff;border-color:rgba(255,255,255,.55)}

/* ------------------------------------------------------ i tre motivi per comprare */
/* Tre motivi, leggeri: fondo bianco e icona in un tondo giallo. In viola pieno pesavano
   quanto l'insegna e le rubavano l'occhio. */
.vantaggi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.vantaggio{background:var(--carta);color:var(--testo);border:1px solid var(--bordo);
  border-radius:14px;padding:14px 16px;display:flex;gap:13px;align-items:center;
  box-shadow:var(--ombra)}
.vantaggio .icona{font-size:20px;line-height:1;background:var(--giallo);border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
/* Il marchio del corriere non e' una nostra icona: niente pastiglia gialla dietro, sfondo
   bianco come sulla carta intestata loro, e il logo dentro per intero senza deformarsi. */
.vantaggio .icona.marchio-corriere{background:#fff;border:1px solid var(--bordo);
  border-radius:10px;width:auto;min-width:52px;padding:5px 8px}
.vantaggio .icona.marchio-corriere img{height:22px;width:auto;display:block;
  object-fit:contain}
.vantaggio b{display:block;font-size:14.5px;color:var(--nero)}
.vantaggio span{font-size:12.5px;color:var(--testo-soft)}

/* ------------------------------------------------------------------ prodotti */
/* Niente riquadro attorno alla carta: la carta E' il prodotto, e un bordo che la incornicia
   la fa sembrare piu' piccola di quello che e'. Sfondo della pagina, immagine grande,
   ombra morbida sotto l'immagine e basta -- come si guardano le carte vere sul tavolo. */
/* Sei carte per riga su uno schermo da scrivania: con la colonna minima a 200px ne
   entravano cinque e restava un vuoto a destra. */
.griglia{display:grid;gap:24px 18px;grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.carta{display:flex;flex-direction:column;background:none;border:0;border-radius:0;
  overflow:visible;transition:transform .14s}
.carta:hover{transform:translateY(-4px)}
/* min-height:0 -- dentro una colonna flessibile l'altezza minima predefinita e' quella
   del contenuto, quindi un'immagine piu' alta della cornice la faceva crescere e quella
   scheda diventava piu' alta delle altre. Con 0 comanda l'aspect-ratio e l'immagine si
   adatta. */
.carta .foto{aspect-ratio:63/88;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative;padding:0;background:none;border-radius:10px}
/* max-height invece di height: con "height:100%" l'altezza dell'immagine si calcola
   sull'altezza del contenitore, che a sua volta dipende dal contenuto -- un giro chiuso.
   Il browser allora lasciava crescere la cornice, e una bustina (alta il doppio della sua
   larghezza) sfondava il riquadro rendendo quella scheda piu' alta delle altre.
   Con max-* l'altezza la decide l'aspect-ratio della cornice e l'immagine ci sta dentro. */
.carta .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(30,20,60,.22))}
.carta:hover .foto img{filter:drop-shadow(0 10px 22px rgba(30,20,60,.30))}
.carta .foto .vuota{color:#cfc9df;font-size:44px}
.etichetta{position:absolute;top:8px;left:8px;background:var(--magenta);color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;
  z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.etichetta.box{background:var(--giallo);color:var(--nero)}
.etichetta.esaurito{background:#7d788d;color:#fff}
.etichetta.sconto{background:var(--magenta);color:#fff}
/* Il pre-ordine si stacca dagli altri bolli: sta in alto a DESTRA, dove non copre
   l'illustrazione, ed e' l'unico in magenta cosi' si legge a colpo d'occhio. */
.etichetta.pre{position:absolute;top:8px;right:8px;left:auto;
  background:var(--magenta);color:#fff;letter-spacing:.06em;box-shadow:var(--ombra)}
/* La lingua: due lettere in alto a destra. Con giapponesi e cinesi a catalogo e' la
   differenza fra la carta giusta e un reso. */
.bandiera{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94);
  border:1px solid var(--bordo);color:var(--testo-soft);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;padding:2px 7px;border-radius:6px;z-index:2}
.carta.spenta .foto img{filter:grayscale(1) opacity(.55)}

.carta .corpo{padding:10px 2px 0;display:flex;flex-direction:column;gap:3px;flex:1;
  border:0;text-align:center;align-items:center}
.carta .nome{font-weight:700;font-size:13.5px;line-height:1.28;color:var(--nero)}
.carta .nome:hover{color:var(--viola)}
.carta .sotto{color:var(--testo-soft);font-size:12.5px}
.carta .fondo{display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:auto;padding-top:8px;width:100%}
.prezzo{font-family:"Archivo Black",sans-serif;font-size:17.5px;color:var(--viola);
  white-space:nowrap}
.prezzo s{color:var(--testo-soft);font-size:13px;font-family:"Instrument Sans",sans-serif;
  margin-left:5px;font-weight:400}
.carta.spenta .prezzo{color:var(--testo-soft)}
.mini{background:var(--viola);color:#fff;border:0;border-radius:9px;padding:8px 12px;
  font-weight:700;cursor:pointer;font-size:13px;white-space:nowrap;width:100%;max-width:170px}
.mini:hover{background:var(--viola-chiaro)}
.mini:disabled{background:#cbc7d8;cursor:not-allowed}
.scorta{font-size:11.5px;color:var(--testo-soft)}
.scorta.poche{color:var(--magenta);font-weight:600}
/* il segnaposto delle carte senza foto prende la stessa forma di una carta */
.senza-foto{border-radius:10px}

/* ------------------------------------------------------------------ dettaglio */
.dettaglio{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:36px;margin-top:20px}
/* position:relative serve al bollo del pre-ordine: senza, si ancorerebbe al primo
   antenato posizionato e finirebbe in un angolo della pagina invece che sulla foto. */
.dettaglio .grande{position:relative;background:var(--carta);border:1px solid var(--bordo);
  border-radius:18px;padding:20px;display:flex;align-items:center;justify-content:center;
  min-height:400px;box-shadow:var(--ombra)}
/* Qui il riquadro e' grande: il bollo cresce con lui, altrimenti si perde. */
.dettaglio .grande .etichetta.pre{top:14px;right:14px;font-size:13px;padding:5px 13px}
.dettaglio h1{font-size:31px;margin:0 0 6px;color:var(--nero)}
.dati{list-style:none;padding:0;margin:18px 0;border-top:1px solid var(--bordo)}
.dati li{display:flex;justify-content:space-between;gap:20px;padding:9px 0;
  border-bottom:1px solid var(--bordo);font-size:14px}
.dati b{font-weight:600;color:var(--testo-soft)}
.prezzo-grande{font-family:"Archivo Black",sans-serif;font-size:38px;color:var(--viola);
  font-style:italic;margin:14px 0}
.prezzo-grande s{font-size:20px;color:var(--testo-soft);margin-left:10px;
  font-family:"Instrument Sans",sans-serif;font-style:normal}

/* ------------------------------------------------------------------ carrello */
.pannello{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px;box-shadow:var(--ombra)}
.riga-carrello{display:flex;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--bordo)}
.riga-carrello img{width:58px;height:78px;object-fit:contain;background:#fff;
  border:1px solid var(--bordo);border-radius:8px}
.riga-carrello .info{flex:1;min-width:0}
.riga-carrello .prezzo-riga{width:80px;text-align:right;font-weight:700}
.riga-carrello .togli{background:transparent;color:var(--testo-soft);flex:0 0 auto}
.qta{display:flex;align-items:center;gap:6px}
.qta button{width:30px;height:30px;border-radius:8px;border:1px solid var(--bordo);
  background:var(--pagina);cursor:pointer;font-weight:700}
.qta button:hover{background:#eceaf5}
.totali{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:15px}
.totali .riga{display:flex;justify-content:space-between;gap:12px}
.totali .gran-totale{font-size:21px;font-weight:700;border-top:2px solid var(--bordo);
  padding-top:10px;color:var(--viola)}
.avviso{background:#fff0f7;border:1px solid var(--magenta);color:#8c1350;
  border-radius:10px;padding:11px 14px;font-size:13.5px;margin:10px 0}
.avviso.ok{background:#fff8e2;border-color:var(--giallo);color:#7a5c00}

/* -------------------------------------------------------------------- modulo */
.modulo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modulo label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--testo-soft)}
.modulo label.largo{grid-column:1/-1}
.modulo input,.modulo textarea{background:#fff;border:1.5px solid var(--bordo);
  border-radius:10px;padding:11px 13px;outline:none;color:var(--testo)}
.modulo input:focus,.modulo textarea:focus{border-color:var(--viola-chiaro)}
.due-colonne{display:grid;grid-template-columns:1fr 370px;gap:22px;align-items:start;margin-top:20px}

/* --------------------------------------------------------------------- piede */
.piede{border-top:1px solid var(--bordo);background:var(--carta);margin-top:56px}
.piede .riga{max-width:1200px;margin:0 auto;padding:30px 18px;display:flex;
  gap:36px;flex-wrap:wrap;color:var(--testo-soft);font-size:13.5px}
.piede b{color:var(--nero);display:block;margin-bottom:6px}

.vuoto-stato{text-align:center;padding:60px 20px;color:var(--testo-soft)}
.caricamento{text-align:center;padding:40px;color:var(--testo-soft)}
select{background:#fff;border:1.5px solid var(--bordo);border-radius:10px;padding:9px 12px}

@media (max-width:820px){
  .dettaglio,.due-colonne{grid-template-columns:1fr}
  .vantaggi{grid-template-columns:1fr;gap:8px}
  .vantaggio{padding:9px 12px}
  .carta .nome{font-size:13.5px}
  .modulo{grid-template-columns:1fr}
  /* Stretto: due colonne (marchio e carrello) e la ricerca sotto, larga tutta. */
  /* Su telefono la barra dei giochi va a capo e occupa tre righe: appiccicata in alto si
     mangiava 150px di schermo su 812, e le pagine sembravano rotte. Qui NON si puo' usare
     overflow per farla scorrere -- ritaglierebbe le tendine, che escono dalla barra --
     quindi si rimpicciolisce e si lascia scorrere via con la pagina. */
  .menu-giochi{position:static}
  .menu-giochi .dentro{padding:0 8px}
  .testata .riga{grid-template-columns:1fr auto}
  .cerca{order:3;width:auto;grid-column:1 / -1}
  .hero{padding:30px 22px}
}

/* --------------------------------------------------------- menu a tendina */
/* Gioco -> lingua -> famiglia. Le lingue e le famiglie sono quelle che esistono
   davvero a magazzino: la tendina la costruisce il server, non e' scritta a mano. */
.voce-menu{position:relative}
.voce-menu > a,
.voce-menu > button{display:block;padding:12px 16px;font-weight:600;font-size:14.5px;
  color:#e8dcff;white-space:nowrap;border:0;border-bottom:3px solid transparent;
  background:transparent;cursor:pointer;font-family:inherit}
.voce-menu:hover > a,.voce-menu:hover > button{color:#fff;background:rgba(255,255,255,.10)}
.voce-menu.attiva > a,.voce-menu.attiva > button{color:#fff;border-bottom-color:var(--giallo);
  background:rgba(0,0,0,.14)}
.voce-menu.aperta > button{color:#fff;background:rgba(0,0,0,.2)}
.voce-menu.aperta > button span{display:inline-block;transform:rotate(180deg)}
.tendina{display:none;position:absolute;top:100%;left:0;z-index:50;background:#fff;
  border:1px solid var(--bordo);border-radius:0 0 12px 12px;box-shadow:var(--ombra-alta);
  padding:10px;min-width:230px}
.voce-menu:hover .tendina,
.voce-menu.aperta .tendina{display:flex;gap:6px}
.tendina .lingua{min-width:190px}
.tendina .cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--testo-soft);padding:6px 10px;font-weight:700}
.tendina .cap i{font-style:normal;opacity:.7}
.tendina a{display:flex;justify-content:space-between;gap:14px;padding:8px 10px;
  border-radius:8px;font-size:14px;color:var(--testo)}
.tendina a:hover{background:var(--pagina);color:var(--viola)}
.tendina a i{font-style:normal;color:var(--testo-soft);font-size:12px}

/* ------------------------------------------------------------- scelta del set */
/* Come per le carte: niente riquadro. Il logo del set e' il soggetto e deve essere
   grande, il resto sta sotto in testo semplice. */
.fascia-serie{background:var(--viola);color:#fff;text-align:center;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:9px;
  border-radius:10px;margin:30px 0 20px}
/* Flex e non griglia: con la griglia l'ultima riga incompleta resta appesa a sinistra
   (un set solo sotto a cinque), mentre cosi' ogni riga sta al centro. */
.griglia-set{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 26px}
.griglia-set .set{width:200px;flex:0 0 auto}
.set{background:none;border:0;border-radius:0;padding:0;text-align:center;
  transition:transform .14s}
.set:hover{transform:translateY(-4px)}
.set .logo{height:118px;display:flex;align-items:center;justify-content:center;padding:4px}
.set .logo img{max-height:118px;max-width:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(30,20,60,.18))}
.set:hover .logo img{filter:drop-shadow(0 6px 14px rgba(30,20,60,.28))}
.set .logo b{font-size:17px;color:var(--nero);line-height:1.2}
.set .conta{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--nero);
  background:none;border-radius:0;padding:0}
.set .data{margin-top:2px;font-size:12.5px;color:var(--testo-soft)}

/* --------------------------------------------------- intestazione di un set */
.testa-set{display:flex;align-items:center;gap:18px;margin:24px 0 18px}
.testa-set img{max-height:70px;width:auto}
.testa-set h2{margin:0;font-size:24px}
.testa-set span{color:var(--testo-soft);font-size:14px}

/* il numero di catalogo sopra il nome, come su una checklist */
.numero-carta{font-size:11.5px;font-weight:700;color:var(--testo-soft);letter-spacing:.04em}


/* --------------------------------------------------- carte senza foto ufficiale
   Dinosaurs e set cinesi non hanno immagini su TCGdex. Invece del riquadro vuoto,
   una targhetta che dice numero, nome e variante: si capisce comunque quale carta e'. */
.senza-foto{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:14px;border-radius:10px;
  background:linear-gradient(150deg,#f7f5ff,#efeaff);border:1px dashed #cfc6e6}
.senza-foto .n{font-family:"Archivo Black",sans-serif;font-size:22px;color:#b9aee0}
.senza-foto .t{font-weight:700;font-size:13.5px;color:var(--nero);line-height:1.25}
.senza-foto .v{font-size:11.5px;color:var(--testo-soft)}


/* ------------------------------------------------------- pagine informative */
.piede .riga a:hover{color:var(--viola)}
.piede-legale{border-top:1px solid var(--bordo);font-size:12px;color:var(--testo-soft);
  padding-top:16px !important;display:block !important}
.testo-lungo{max-width:760px;line-height:1.65}
.testo-lungo p{margin:0 0 14px}
.testo-lungo .dati{margin:16px 0}


/* il marchio in fondo pagina, sui fondi scuri */
.marchio-piede{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.marchio-piede img{height:52px;width:auto}
.marchio-piede .bulldog{height:46px;opacity:.85}

/* -------------------------------------------------------------------- filtri
   Sopra la griglia: cerca dentro il risultato, versione, rarita', prezzo massimo,
   solo disponibili, ordinamento. I valori li calcola il server su quello che si sta
   guardando, quindi qui non c'e' mai una voce che porta a zero carte. */
.filtri{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;
  padding:12px 14px;background:var(--carta);border:1px solid var(--bordo);border-radius:12px}
.filtri select,.filtri input[type=number]{background:#fff;border:1.5px solid var(--bordo);
  border-radius:9px;padding:8px 11px;font-size:13.5px;color:var(--testo)}
.filtri .cerca-dentro{flex:1;min-width:190px}
.filtri .cerca-dentro input{width:100%;background:var(--pagina);border:1.5px solid var(--bordo);
  border-radius:999px;padding:9px 15px;outline:none;font-size:13.5px}
.filtri .cerca-dentro input:focus{border-color:var(--viola-chiaro);background:#fff}
.filtri .fascia{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--testo-soft)}
.filtri .fascia input{width:84px}
.filtri .spunta{display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.filtri .azzera{background:none;border:0;color:var(--magenta);font-weight:600;
  font-size:13px;cursor:pointer;text-decoration:underline}
.filtri .conta-filtri{margin-left:auto;color:var(--testo-soft);font-size:13px;white-space:nowrap}
@media (max-width:820px){
  .filtri{gap:8px;padding:10px}
  .filtri .conta-filtri{margin-left:0;width:100%}
}

/* ------------------------------------------------------- sezioni della home
   Un titolo grande e centrato per ogni sezione, come nei negozi che funzionano: si capisce
   dove si e' finiti anche scorrendo in fretta. */
.titolo-sezione{text-align:center;margin:46px 0 22px}
.titolo-sezione h2{font-size:clamp(24px,3.4vw,36px);margin:0 0 4px;color:var(--nero)}
.titolo-sezione span{color:var(--testo-soft);font-size:14px}
.in-fondo{text-align:center;margin-top:24px}

/* la ricerca dentro l'insegna: e' la prima cosa che fa chi cerca una carta precisa */
.cerca-hero{display:flex;gap:8px;max-width:520px;margin-top:6px}
.cerca-hero input{flex:1;min-width:0;border:0;border-radius:999px;padding:13px 20px;
  font-size:15px;outline:none;color:var(--testo);background:#fff}
.cerca-hero input::placeholder{color:#9a94ad}
.cerca-hero .pulsante{flex:0 0 auto}
@media (max-width:600px){ .cerca-hero{flex-direction:column} }


/* ------------------------------------------------------- il ventaglio di carte
   Cinque carte vere del magazzino, aperte a ventaglio come si tengono in mano. Sono le
   piu' preziose che abbiamo: chi arriva capisce in un secondo che roba c'e' qui dentro.
   Le posizioni sono scritte una per una (niente calcoli con abs(), che non tutti i
   browser digeriscono) e l'apertura e' abbastanza larga da far vedere ogni carta. */
.ventaglio{position:relative;z-index:2;flex:0 1 500px;height:300px;display:none}
@media (min-width:1000px){ .ventaglio{display:block} }
.carta-vent{position:absolute;top:50%;left:50%;width:152px;margin-left:-76px;margin-top:-110px;
  transform-origin:bottom center;transition:transform .2s ease}
.carta-vent img{width:100%;border-radius:8px;display:block;
  box-shadow:0 14px 30px rgba(0,0,0,.5)}
/* L'ordine di sovrapposizione va dichiarato per TUTTE, non solo per quella al centro:
   senza, vince l'ordine di scrittura e l'ultima carta -- quella all'estrema destra --
   finiva davanti a tutte invece che dietro. Il ventaglio si chiude verso i due bordi. */
.carta-vent:nth-child(1){transform:translateX(-168px) translateY(26px) rotate(-16deg);z-index:1}
.carta-vent:nth-child(2){transform:translateX(-86px)  translateY(6px)  rotate(-8deg);z-index:3}
.carta-vent:nth-child(3){transform:translateX(0)      translateY(0)    rotate(0deg);z-index:5}
.carta-vent:nth-child(4){transform:translateX(86px)   translateY(6px)  rotate(8deg);z-index:2}
.carta-vent:nth-child(5){transform:translateX(168px)  translateY(26px) rotate(16deg);z-index:0}
.carta-vent:hover{z-index:9}
.carta-vent:nth-child(1):hover{transform:translateX(-168px) translateY(6px) rotate(-16deg) scale(1.08)}
.carta-vent:nth-child(2):hover{transform:translateX(-86px)  translateY(-14px) rotate(-8deg) scale(1.08)}
.carta-vent:nth-child(3):hover{transform:translateX(0)      translateY(-20px) rotate(0deg) scale(1.08)}
.carta-vent:nth-child(4):hover{transform:translateX(86px)   translateY(-14px) rotate(8deg) scale(1.08)}
.carta-vent:nth-child(5):hover{transform:translateX(168px)  translateY(6px) rotate(16deg) scale(1.08)}

/* --------------------------------------------------- titoli di sezione col fulmine */
.titolo-sezione h2::after{content:"";display:block;width:64px;height:4px;margin:10px auto 0;
  border-radius:4px;background:linear-gradient(90deg,var(--giallo),var(--magenta))}

/* le carte si sollevano con un alone viola: si capisce che sono cliccabili */
.carta:hover .foto img{filter:drop-shadow(0 12px 26px rgba(74,30,140,.38))}


/* ----------------------------------------------------------- strisce scorrevoli
   Una riga sola di cinque prodotti, con le frecce ai lati. Nella striscia si mostrano
   solo nome e prezzo: il resto (condizione, disponibilita') si legge aprendo la carta,
   qui allungherebbe soltanto la fascia. */
.striscia{margin:30px 0}
/* Nessun riquadro attorno alla striscia: la carta al centro e' ingrandita e sborda in
   alto, e un riquadro con lo sfondo la tagliava a meta'. */
.striscia.scura{background:none;padding:0;box-shadow:none}
.testa-striscia{padding:0 46px 12px}
.testa-striscia h2{font-size:clamp(20px,2.4vw,26px);margin:0;color:var(--nero)}
.testa-striscia span{color:var(--testo-soft);font-size:13px}
.striscia.scura .testa-striscia h2{color:#fff}
.striscia.scura .testa-striscia span{color:#a79fc4}

/* La striscia si chiude in un livello suo: qualunque numero prendano le carte dentro,
   restano confinate qui sotto e non possono piu' scavalcare il menu. E' la rete di
   sicurezza, oltre ai numeri bassi assegnati dal JS. */
.striscia{position:relative;z-index:1}
.rotaia{position:relative;padding:0 46px}
.freccia{position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--bordo);
  background:var(--carta);color:var(--viola);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--ombra);
  transition:background .12s,color .12s}
.freccia.sx{left:2px}
.freccia.dx{right:2px}
.freccia:hover{background:var(--viola);color:#fff;border-color:var(--viola)}
.striscia.scura .freccia{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.25)}
.striscia.scura .freccia:hover{background:var(--giallo);color:var(--nero)}

/* Un contenitore che scorre in orizzontale taglia SEMPRE quello che esce in verticale:
   la carta al centro e' ingrandita e sbordava sopra, e le si vedeva mezza slab. Lo spazio
   in alto e in basso le lascia il posto per crescere. */
/* Un contenitore che scorre in orizzontale TAGLIA sempre quello che esce in verticale:
   `overflow-y:clip` con margine di ritaglio non serve a niente, il browser lo riporta a
   `hidden` appena l'altro asse scorre (verificato: la slab restava tagliata a meta').
   L'unica strada e' non far sbordare nessuno: lo spazio sopra e sotto deve bastare
   all'ingrandimento della carta al centro. */
/* NIENTE `scroll-behavior:smooth`: lo scorrimento lo anima il sito, fotogramma per
   fotogramma. Con lo smooth attivo il browser animava a sua volta OGNI passo della nostra
   animazione -- due animazioni annidate -- e dal clic passavano quasi tre decimi di
   secondo prima che la fila si muovesse. */
/* Niente aggancio del browser sul ventaglio: le carte si sovrappongono con margini
   negativi e i punti di aggancio non cadono dove serve. Li' l'allineamento lo fa il JS
   (vedi `allinea`), che si puo' misurare. Sulla striscia piana invece lo snap funziona
   ed e' dichiarato con la striscia stessa. */
/* position:relative NON e' decorativo: senza, la posizione delle carte (offsetLeft) e'
   misurata rispetto alla ROTAIA, che ha 46px di padding per le frecce, mentre lo
   scorrimento e' misurato rispetto al binario. Due righelli diversi: la carta "al centro"
   risultava spostata di una quarantina di pixel, e a volte veniva scelta quella sbagliata.
   Cosi' il binario diventa il riferimento e i due numeri parlano la stessa lingua. */
.binario{position:relative;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  padding:56px 0 24px;
  scrollbar-width:none;-ms-overflow-style:none}
.binario::-webkit-scrollbar{display:none}
/* Fila corta (i prodotti ci stanno tutti): si centra, le carte non si sovrappongono
   piu' -- con due o tre pezzi la sovrapposizione sembrava un errore -- e le frecce
   spariscono perche' non c'e' niente da scorrere. */
/* Fila corta: tolta la sovrapposizione serve uno SPAZIO al suo posto, altrimenti le
   carte restano attaccate -- la striscia ha gap:0 perche' di norma devono sovrapporsi. */
.binario.corta{justify-content:center;overflow-x:hidden;gap:30px}
.binario.corta .vagone{margin-right:0;flex-basis:220px}
.rotaia:has(.binario.corta) .freccia{display:none}
/* Cinque per volta, SOVRAPPOSTE: ogni carta entra sotto quella accanto, come un mazzo
   aperto a ventaglio. Chi sta piu' vicino al centro sta sopra -- l'ordine di
   sovrapposizione lo decide il JS insieme alla scala. La larghezza tiene conto della
   sovrapposizione, cosi' se ne vedono sempre cinque. */
.vagone{flex:0 0 calc((100% + 4 * 74px) / 5);margin-right:-74px}
@media (max-width:900px){ .vagone{flex:0 0 calc((100% + 2 * 60px) / 3);margin-right:-60px} }
/* Su telefono UNA carta per volta, senza sovrapposizione: con due non esiste una carta
   "al centro" -- il centro cade fra le due -- e la striscia sembrava storta. */
@media (max-width:560px){ .vagone{flex:0 0 100%;margin-right:0} }

/* dentro la striscia la scheda e' bassa: foto, nome, prezzo, pulsante */
.striscia .carta .corpo{padding:8px 2px 0;gap:2px}
.striscia .carta .nome{font-size:12.5px;line-height:1.25}
.striscia .carta .fondo{padding-top:6px;gap:5px}
.striscia .prezzo{font-size:16px}
.striscia .mini{padding:6px 10px;font-size:12.5px;max-width:150px}

/* i colori delle carte dentro la striscia scura */
.striscia.scura .carta .nome{color:#fff}
.striscia.scura .carta .nome:hover{color:var(--giallo)}
.striscia.scura .prezzo{color:var(--giallo)}
.striscia.scura .bandiera{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);color:#e6e0f5}
.striscia.scura .mini{background:var(--giallo);color:var(--nero)}
.striscia.scura .mini:hover{background:#fff}

/* La profondita' la calcola il JS a ogni fotogramma: qui serve solo una transizione
   CORTA, per i movimenti che il JS non anima (il primo disegno, il ridimensionamento
   della finestra). Se e' lunga rincorre lo scorrimento e il movimento diventa gommoso.
   Durante l'animazione nostra viene tolta del tutto. */
.vagone{transition:transform .14s ease-out, filter .14s ease-out;
  transform-origin:center center;will-change:transform,filter;
  backface-visibility:hidden}
.binario.in-movimento .vagone{transition:none}


/* --------------------------------------------- solo la carta al centro e' "in mano"
   Le laterali stanno sotto, quindi il loro testo si accavallerebbe: si mostra solo
   quello della carta al centro, e le altre invitano al clic per venire avanti. */
.vagone .corpo{opacity:0;transition:opacity .18s ease;pointer-events:none}
.vagone.al-centro .corpo{opacity:1;pointer-events:auto}
.vagone:not(.al-centro){cursor:pointer}
.vagone:not(.al-centro) .foto{pointer-events:none}


/* il prezzo non ancora deciso: una lineetta, non uno zero */
.prezzo.da-prezzare,.prezzo-grande.da-prezzare{color:var(--testo-soft);letter-spacing:.12em}
.striscia.scura .prezzo.da-prezzare{color:#8f88a8}


/* la riga che dice che il catalogo cresce: piu' piccola, non ruba spazio al titolo */
.hero .cresce{display:inline-block;margin-top:6px;font-size:13.5px;color:#cfc0f5}

/* ------------------------------------------------------------------ pre-ordini
   Un riquadro a se': sono le uscite da bloccare e devono staccare dal catalogo.
   Fondo scuro col giallo del marchio, come un annuncio in vetrina. */
.preordini{background:linear-gradient(120deg,var(--nero) 42%,#2f1d5c);border-radius:18px;
  padding:22px 24px 26px;margin:30px 0;box-shadow:var(--ombra-alta)}
.testa-pre{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.testa-pre h2{margin:0;font-size:clamp(21px,2.6vw,30px);color:#fff}
.testa-pre span{color:#b9b0d8;font-size:13.5px}
.preordini .pulsante.vuoto{color:var(--giallo);border-color:var(--giallo)}
.preordini .pulsante.vuoto:hover{background:rgba(255,200,26,.14)}
.preordini .carta .nome{color:#fff}
.preordini .carta .nome:hover{color:var(--giallo)}
.preordini .carta .sotto,.preordini .scorta{color:#b9b0d8}
.preordini .prezzo{color:var(--giallo)}
.preordini .prezzo.da-prezzare{color:#8f88a8}
.preordini .bandiera{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);
  color:#e6e0f5}
.preordini .senza-foto{background:linear-gradient(150deg,#2b2044,#1d1631);
  border-color:#453a66}
.preordini .senza-foto .t{color:#fff}
.preordini .senza-foto .n{color:#6f668f}
.uscita{font-size:11.5px;font-weight:700;color:var(--giallo);letter-spacing:.02em}
.mini.pre{background:var(--giallo);color:var(--nero)}
.mini.pre:hover{background:#fff}

/* ------------------------------------------------------- annuncio dei pre-ordini
   Non una griglia di prodotti ma un cartello: scatola scontornata che galleggia,
   scritte accese, una cosa sola da fare. */
/* Lo sfondo dell'annuncio: tre sfumature sovrapposte invece di una sola, cosi' il colore
   cambia lungo tutto il riquadro e non sembra una tinta piatta. Il viola si accende verso
   la scatola, il nero tiene il testo leggibile a sinistra. */
.annuncio-pre{position:relative;display:flex;align-items:center;gap:30px;
  /* Le tinte sono variabili: il viola e' il colore di casa, ma un prodotto puo' portarsi
     dietro il suo (il verde del box Gem Pack Vol.6) senza un CSS a parte per ogni cartello. */
  --tinta:139,61,255; --tinta2:245,48,140; --fondo-fine:#3a2470;
  background:
    radial-gradient(90% 120% at 72% 30%, rgba(var(--tinta),.55) 0%, rgba(var(--tinta),0) 60%),
    radial-gradient(70% 100% at 96% 85%, rgba(var(--tinta2),.35) 0%, rgba(var(--tinta2),0) 55%),
    linear-gradient(115deg, #150f28 0%, #251a49 45%, var(--fondo-fine) 100%);
  border-radius:20px;padding:38px 42px;margin:30px 0;box-shadow:var(--ombra-alta)}

/* La pagina di fumetto sullo sfondo: inclinata, sfumata a sinistra e appena visibile,
   cosi' fa da texture senza rubare leggibilita' al testo.
   Il ritaglio sta QUI e non sul pannello: se lo facesse il pannello, taglierebbe anche la
   scatola, che invece deve poterne uscire quando ci passi sopra col mouse. */
.velo-fumetto{position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:20px;overflow:hidden}
/* Il disegno e' un PNG col tratto opaco e la carta trasparente: non serve nessuna fusione
   con lo sfondo, quindi si puo' ruotare e ritagliare senza sorprese. */
.velo-fumetto::before{content:"";position:absolute;inset:-18% -10%;
  /* Lo sfondo lo decide il singolo annuncio (--velo). Il fumetto resta come ripiego per
     chi non ne ha uno suo. */
  /* Nessuna riserva scritta qui: lo sfondo lo decide il prodotto. Con un ripiego fisso
     un annuncio senza sfondo suo si prendeva in silenzio quello di un altro gioco. */
  background:var(--velo, none) center/cover no-repeat;
  transform:rotate(-6deg) scale(1.15);opacity:.13;
  mask-image:linear-gradient(100deg, transparent 4%, rgba(0,0,0,.35) 34%, #000 62%);
  -webkit-mask-image:linear-gradient(100deg, transparent 4%, rgba(0,0,0,.35) 34%, #000 62%)}
.testo-pre{flex:1 1 380px;position:relative;z-index:2}
.testo-pre .occhiello{display:inline-block;background:var(--magenta);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;margin-bottom:12px}
.testo-pre h2{font-size:clamp(28px,4.2vw,46px);margin:0 0 10px;color:var(--giallo);
  text-shadow:0 3px 20px rgba(255,200,26,.25)}
.testo-pre p{color:#e4dcff;font-size:16px;margin:0 0 16px;line-height:1.45}
.testo-pre p b{color:#fff}
.prezzo-pre{font-family:"Archivo Black",sans-serif;font-style:italic;
  font-size:clamp(33px,4.4vw,48px);color:#fff;margin-bottom:16px}
.annuncio-pre .pulsante.vuoto{color:var(--giallo);border-color:var(--giallo)}
.annuncio-pre .pulsante.vuoto:hover{background:rgba(255,200,26,.14)}

/* la scatola: galleggia piano, come sospesa in vetrina */
.scatola-pre{flex:0 0 490px;display:flex;justify-content:center;position:relative;z-index:3;
  /* L'ingrandimento sta sul contenitore, non sull'immagine: l'immagine ha gia' la sua
     animazione sul transform, e una seconda regola sullo stesso transform la sostituirebbe
     -- la scatola smetterebbe di galleggiare proprio mentre la guardi. */
  transition:transform .28s cubic-bezier(.22,.9,.3,1)}
/* 1,20 e non meno: fra la scatola e il bordo del pannello ci sono 38 px per lato, quindi
   sotto 1,16 l'ingrandimento resterebbe tutto dentro la cornice e non si vedrebbe uscire. */
.scatola-pre:hover{transform:scale(1.20)}
.scatola-pre img{max-height:calc(490px * var(--scatola, 1));width:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
  transition:filter .28s ease;
  animation:galleggia 5s ease-in-out infinite}
.scatola-pre:hover img{filter:drop-shadow(0 34px 44px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){ .scatola-pre:hover{transform:none} }
@keyframes galleggia{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-16px) rotate(2deg)}
}
/* chi ha chiesto meno animazioni non le riceve */
@media (prefers-reduced-motion:reduce){ .scatola-pre img{animation:none} }
@media (max-width:820px){
  /* justify-content: la griglia rende tutte le schermate alte quanto la piu' alta, e
     senza questo il contenuto della piu' corta restava incollato in alto con un vuoto
     sotto. */
  .annuncio-pre{flex-direction:column-reverse;text-align:center;padding:26px 20px;gap:16px;
    justify-content:center}
  /* In riga quel 380px e' una LARGHEZZA; qui il pannello e' in colonna e lo stesso valore
     diventa un'altezza minima, che gonfiava il riquadro con un vuoto sotto i pulsanti.
     In colonna le due parti devono prendere l'altezza del loro contenuto e basta. */
  .testo-pre{flex:0 0 auto}
  .scatola-pre{flex:0 0 auto}
  .scatola-pre{flex-basis:auto}
  .scatola-pre img{max-height:calc(320px * var(--scatola, 1))}
  .annuncio-pre .pulsanti{justify-content:center}
}

/* La bandierina accanto al titolo dell'annuncio: alta come le lettere, con un filo di
   bordo perche' quella giapponese e' bianca e sul viola sparirebbe. */
.bandierina{height:.72em;width:auto;margin-left:.32em;vertical-align:baseline;
  border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35)}

/* --------------------------------------------------------------- account cliente */
.bottone-conto{background:none;border:1.5px solid var(--bordo);border-radius:999px;
  padding:10px 16px;font-weight:600;color:var(--testo);cursor:pointer;
  transition:border-color .12s,color .12s}
.bottone-conto:hover{border-color:var(--viola);color:var(--viola)}
.bottone-conto.dentro{border-color:var(--viola);color:var(--viola)}
/* L'elenco degli ordini nell'area cliente: una riga per ordine, leggibile a colpo d'occhio. */
.ordine-riga{display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--bordo);font-size:14px}
.ordine-riga:last-child{border-bottom:0}
.ordine-riga .stato{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 10px;border-radius:999px;
  background:var(--pagina);color:var(--testo-soft)}
.ordine-riga .stato.pagato{background:#e6f7ec;color:#1a7f47}
.ordine-riga .stato.spedito{background:#e8f0ff;color:#2b5bd7}
.ordine-riga .stato.attesa{background:#fff4e0;color:#9a6100}


/* ------------------------------------------------------- il riquadro dell'accesso */
/* Stretto e centrato: qui si fa UNA cosa sola, e la pagina non deve dare altro da
   guardare. */
/* Tutto dentro questo riquadro sta sulla stessa colonna: pulsante Google, separatore,
   campo e pulsante giallo partono e finiscono agli stessi due margini. E' quello che fa
   sembrare la cosa fatta bene. */
.riquadro-accesso{width:100%;max-width:400px;margin:0 auto;background:var(--carta);
  border:1px solid var(--bordo);border-radius:16px;padding:28px;
  box-shadow:var(--ombra);box-sizing:border-box}
.riquadro-accesso form{margin:0}
.riquadro-accesso .pulsante{width:100%;box-sizing:border-box;min-height:46px}
/* NIENTE scala qui: ingrandire con transform allargava il pulsante oltre i bordi del
   riquadro, e da li' in giu' non si allineava piu' niente. Il pulsante prende la larghezza
   del contenuto, come tutti gli altri elementi. */
.riga-google{display:flex;justify-content:center;min-height:44px}
.riquadro-accesso #esito-google:not(:empty){margin-top:12px}

/* "o accedi con l'e-mail" con una riga da una parte e dall'altra: divide le due strade
   senza aggiungere un titolo. */
.separatore{display:flex;align-items:center;gap:12px;margin:20px 0 10px;
  color:var(--testo-soft);font-size:13px}
.separatore::before,.separatore::after{content:"";flex:1;height:1px;background:var(--bordo)}

/* Campi con la sola riga sotto: in un riquadro gia' bordato, un secondo bordo per ogni
   campo fa gabbia. */
.campo-filo{display:block;padding:4px 0 0;box-sizing:border-box}
.campo-filo span{display:block;font-size:12.5px;color:var(--testo-soft);margin-bottom:2px}
.campo-filo input{width:100%;border:0;border-bottom:1.5px solid var(--bordo);
  background:none;padding:8px 2px;font-size:15px;color:var(--testo);outline:none;
  transition:border-color .14s}
.campo-filo input:focus{border-bottom-color:var(--viola)}
.nota-accesso{font-size:12.5px;color:var(--testo-soft);text-align:center;margin:12px 0 0}


/* ------------------------------------------------- la giostra degli annunci (box) */
/* I cartelli stanno impilati, NON in fila dentro una finestra ritagliata: un ritaglio
   taglierebbe anche la scatola quando si solleva col mouse. Quello che si vede scorrere
   e' ogni cartello che entra ed esce per conto suo. */
/* overflow-x da solo: la schermata in attesa sta spostata 46px a destra, pronta a
   entrare, e sporgendo faceva scorrere tutta la pagina in orizzontale -- su telefono si
   vedevano i margini bianchi. Si ritaglia SOLO l'orizzontale: il verticale resta libero,
   altrimenti si ritaglia anche la scatola quando si solleva col mouse.
   ("clip" e non "hidden": hidden creerebbe un contenitore di scorrimento.) */
.giostra-annunci{position:relative;z-index:1;margin:30px 0;
  overflow-x:clip;overflow-y:visible}
/* Le schermate stanno tutte nella STESSA cella di griglia: si sovrappongono senza uscire
   dal flusso, quindi l'altezza del riquadro la decide da sola la piu' alta. Prima la
   calcolavo con JavaScript e la riscrivevo a ogni ridimensionamento: bastava che restasse
   indietro di poco e le frecce, ancorate a meta' del contenitore, finivano in alto. */
.pila-annunci{position:relative;display:grid}
.pila-annunci > .annuncio-pre{grid-area:1 / 1;margin:0;
  opacity:0;transform:translateX(46px) scale(.985);pointer-events:none;
  transition:opacity .34s ease, transform .42s cubic-bezier(.22,.9,.3,1)}
.pila-annunci > .annuncio-pre.attivo{opacity:1;transform:none;pointer-events:auto;z-index:2}
.pila-annunci > .annuncio-pre.esce-sx{opacity:0;transform:translateX(-46px) scale(.985)}
.pila-annunci > .annuncio-pre.esce-dx{opacity:0;transform:translateX(46px) scale(.985)}

/* Ancorate alla PILA, non alla giostra: la giostra comprende anche i pallini sotto, e
   meta' di quella non e' meta' del pannello -- e' per questo che finivano in alto. */
.freccia-annuncio{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(20,14,40,.55);color:#fff;font-size:34px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);
  transition:background .14s,border-color .14s,transform .14s}
.freccia-annuncio:hover{transform:translateY(-50%) scale(1.08)}
.freccia-annuncio:hover{background:var(--giallo);color:var(--nero);border-color:var(--giallo)}
.freccia-annuncio.sx{left:-20px}
.freccia-annuncio.dx{right:-20px}

.pallini{display:flex;justify-content:center;gap:8px;padding-top:14px}
.pallino{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--bordo);transition:background .16s,width .16s}
.pallino.acceso{background:var(--viola);width:24px;border-radius:999px}

/* "Disponibile subito" invece di "Pre-ordine dal Giappone": stesso posto, altro colore,
   cosi' si capisce a colpo d'occhio se il pezzo c'e' gia'. */
.testo-pre .occhiello.ora{background:var(--giallo);color:var(--nero)}

@media (max-width:900px){
  .freccia-annuncio{width:46px;height:46px;font-size:28px}
  .freccia-annuncio.sx{left:6px}
  .freccia-annuncio.dx{right:6px}
}


/* -------------------------------------------------- la barra dei giochi su telefono */
/* Sta in fondo al foglio apposta: le voci sono `.voce-menu > a/button`, definite piu'
   sopra e piu' specifiche di `.menu-giochi a`. Una regola scritta prima, per quanto
   dentro una media query, perdeva il confronto e non cambiava niente. */
@media (max-width:900px){
  .voce-menu > a,
  .voce-menu > button{padding:9px 11px;font-size:13.5px}
  .menu-giochi .dentro{gap:0}
}


/* ---------------------------------------------------- il carrello su telefono */
/* In una riga sola non ci sta niente: foto, titolo, quantita', totale e la X su 375px
   lasciavano al titolo una manciata di pixel, e andava a capo una parola per volta con i
   comandi sopra al testo. Qui la riga diventa una griglia su due piani: sopra la foto col
   nome e la X, sotto la quantita' e il totale. */
@media (max-width:560px){
  .riga-carrello{display:grid;align-items:center;
    grid-template-columns:56px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto  info   chiudi"
      "foto  qta    totale";
    column-gap:12px;row-gap:10px;padding:14px 0}
  .riga-carrello img,
  .riga-carrello > div:first-child{grid-area:foto;align-self:start}
  .riga-carrello .info{grid-area:info}
  .riga-carrello .qta{grid-area:qta;justify-self:start}
  .riga-carrello .prezzo-riga{grid-area:totale;width:auto;justify-self:end}
  .riga-carrello .togli{grid-area:chiudi;justify-self:end;padding:4px 6px}
  /* Il nome puo' andare a capo, ma per parole intere: senza questo un titolo lungo senza
     spazi allargherebbe la colonna e rimetterebbe fuori squadra tutta la riga. */
  .riga-carrello .info > div:first-child{overflow-wrap:anywhere;line-height:1.3}
  .riga-carrello .info .sotto{margin-top:2px}
}


/* ------------------------------------------------- le miniature nella scheda prodotto */
/* Sotto la foto grande, una fila di riquadri: si vede subito che di quel prodotto
   esistono piu' immagini, cosa che con una foto sola non si sospetta nemmeno. */
.miniature{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.miniatura{width:72px;height:72px;padding:4px;border-radius:10px;cursor:pointer;
  background:var(--carta);border:1.5px solid var(--bordo);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .14s,transform .14s}
.miniatura img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.miniatura:hover{transform:translateY(-2px)}
.miniatura.scelta{border-color:var(--viola);box-shadow:0 0 0 2px rgba(139,61,255,.18)}


/* ------------------------------------------- l'insegna su telefono: carte al posto del titolo */
/* Su uno schermo stretto il titolo occupava tre righe altissime e le carte non si vedevano
   affatto: si arrivava in fondo all'insegna senza aver visto una sola carta, cioe' senza
   sapere cosa vendiamo. Qui il titolo sparisce e al suo posto entra il ventaglio: sono
   carte VERE del magazzino, dicono in un colpo d'occhio quello che il titolo diceva in
   tre righe. Il titolo resta nel codice per chi legge la pagina con uno screen reader. */
@media (max-width:900px){
  .hero{flex-direction:column;gap:6px;min-height:0;padding:20px 20px 26px}
  .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;margin:0}
  .hero-testo{flex:1 1 auto;order:2}
  .ventaglio{display:block;order:1;flex:0 0 auto;width:100%;height:225px;margin-bottom:4px}
  /* Le distanze sono in percentuale della CARTA e la carta in percentuale del VENTAGLIO:
     tutto scala insieme. Misurarle in unita' di finestra (vw) era sbagliato -- il
     ventaglio e' piu' stretto della finestra per via dei margini dell'insegna, e le due
     carte esterne finivano tagliate.
     Lo scarto massimo e' 55% della carta: oltre, la carta ruotata di 16 gradi esce dal
     riquadro (ruotando, l'ingombro cresce di circa un terzo). */
  .carta-vent{width:34%;max-width:150px;margin-left:-17%;margin-top:0;top:50%}
  .carta-vent:nth-child(1){transform:translate(-42%, calc(-50% + 20px)) rotate(-16deg)}
  .carta-vent:nth-child(2){transform:translate(-21%, calc(-50% + 5px))  rotate(-8deg)}
  .carta-vent:nth-child(3){transform:translate(0,    -50%)              rotate(0deg)}
  .carta-vent:nth-child(4){transform:translate(21%,  calc(-50% + 5px))  rotate(8deg)}
  .carta-vent:nth-child(5){transform:translate(42%,  calc(-50% + 20px)) rotate(16deg)}
}
@media (max-width:560px){
  .ventaglio{height:215px}
}


/* -------------------------------------------------- i sigillati nella griglia */
/* Una carta e' alta e stretta e lascia spazio ai lati da sola; una scatola e' larga e
   bassa, riempie la cella fino ai bordi e due vicine sembrano attaccate. Si stringe
   l'immagine e si allarga il passo della griglia. */
.carta.sealed .foto{padding:0 12%}
.griglia:has(.carta.sealed){gap:30px 34px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}


/* Il collegamento che toglie il filtro: si legge nella riga del conteggio, dove uno
   guarda quando si chiede se sta vedendo tutto. */
.togli-filtro{color:var(--viola);font-weight:600;margin-left:8px;
  border-bottom:1px solid rgba(139,61,255,.35)}
.togli-filtro:hover{border-bottom-color:var(--viola)}


/* ------------------------------------------------------- striscia PIANA (i box) */
/* Cinque prodotti affiancati con uno spazio vero fra loro, invece del ventaglio: niente
   sovrapposizione, niente sfocatura, tutti cliccabili. Le scatole sono merce da guardare
   tutta insieme, non pezzi da collezione da sfogliare uno alla volta. */
/* Aggancio ai bordi: senza, lo scorrimento (col dito o con le frecce) puo' fermarsi a
   meta' prodotto e se ne vedono quattro e mezzo invece di cinque. Con lo snap la fila si
   assesta sempre sull'inizio di una scheda. */
.binario.piana{gap:22px;padding:14px 0 20px;scroll-snap-type:x mandatory}
.binario.piana .vagone{scroll-snap-align:start}
.binario.piana .vagone{flex:0 0 calc((100% - 4 * 22px) / 5);margin-right:0}
.binario.piana .vagone .corpo{opacity:1;pointer-events:auto}
.binario.piana .vagone{cursor:default}
.binario.piana .vagone .foto{pointer-events:auto}
@media (max-width:900px){
  .binario.piana .vagone{flex:0 0 calc((100% - 2 * 22px) / 3)}
}
@media (max-width:560px){
  .binario.piana{gap:16px}
  .binario.piana .vagone{flex:0 0 calc((100% - 16px) / 2)}
}


/* Nelle strisce le schede sono alte uguali (le impone il flex), ma i nomi vanno a capo su
   due o tre righe e i pulsanti finivano ad altezze diverse. La scheda occupa tutta
   l'altezza e il fondo -- prezzo e pulsante -- viene spinto in basso: cosi' i pulsanti
   stanno sulla stessa riga qualunque sia la lunghezza del nome. */
.binario .vagone .carta{height:100%}
.binario .vagone .carta .corpo{flex:1;display:flex;flex-direction:column}
.binario .vagone .carta .fondo{margin-top:auto}

/* ------------------------------------------------------------------ pagamenti nel piede
   Una riga di targhette, sopra i dati legali. Sono disegnate in CSS, non immagini: restano
   nitide, pesano zero e si stampano bene anche in grigio. */
.piede-pagamenti{border-top:1px solid var(--bordo);display:flex;align-items:center;
  flex-wrap:wrap;gap:10px;padding:16px 18px!important;font-size:12.5px;color:var(--testo-soft)}
.piede-pagamenti .pag-titolo{color:var(--nero);font-weight:700;margin-right:6px}
.piede-pagamenti .pag-nota{flex-basis:100%;font-size:12px}
@media (min-width:900px){.piede-pagamenti .pag-nota{flex-basis:auto;margin-left:auto}}
.badge-pag{display:inline-flex;align-items:center;justify-content:center;gap:3px;
  height:28px;min-width:46px;padding:0 9px;border-radius:6px;background:#fff;
  border:1px solid var(--bordo);font-family:"Instrument Sans",system-ui,sans-serif;
  font-weight:700;font-size:13px;color:var(--nero);letter-spacing:-.01em}
.badge-pag i{font-style:normal}
.badge-pag.visa i{color:#1a1f71;font-style:italic;font-weight:900;letter-spacing:.02em}
.badge-pag.amex{background:#016fd0;border-color:#016fd0}
.badge-pag.amex i{color:#fff;font-size:11px;letter-spacing:.06em}
.badge-pag.mastercard{gap:0;padding:0 10px}
.badge-pag.mastercard b{display:block;width:15px;height:15px;border-radius:50%}
.badge-pag.mastercard .c1{background:#eb001b}
.badge-pag.mastercard .c2{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply}
.badge-pag.apple svg{width:13px;height:13px;fill:var(--nero)}
.badge-pag.google .g{font-weight:900;color:#4285f4;margin-right:1px}

/* ------------------------------------------------------------------ avviso temporaneo
   Striscia gialla sotto il menu, finche' il negozio e' chiuso agli acquisti. */
.avviso-temporaneo{background:var(--giallo);color:var(--nero);text-align:center;
  font-size:14px;padding:10px 18px;line-height:1.4}
.avviso-temporaneo b{font-weight:700}