/* Token propri del tema — Dawn Town Games
   Tutto quello che WordPress genera da theme.json (colori, famiglie, corpi, passi
   di spaziatura) NON si ripete qui: sarebbe una seconda verita' da tenere allineata.
   Restano i valori che theme.json non sa esprimere: rampe per gioco, ombre, raggi,
   la molla del movimento e i tre colori di testo leggibili su panna. */
:root{
  /* le fioriture dietro la testa del personaggio: velo chiaro, una per gioco */
  --dtg-arancio-fioritura:rgba(255,214,128,.85);
  --dtg-verde-fioritura:rgba(198,236,140,.85);
  --dtg-ghiaccio-fioritura:rgba(178,229,250,.85);

  /* Gli stessi colori dei giochi, ma buoni per il TESTO su panna. I pieni qui non si
     possono usare: l'arancio del marchio sta a 1,78:1, il verde e il ghiaccio a 2,8.
     Questi tre stanno tutti sopra 4,5:1 e restano riconoscibili come lo stesso colore. */
  --dtg-testo-yatai:#9A5B00;     /* 4,88:1 */
  --dtg-testo-verrix:#3E7A18;    /* 4,72:1 */
  --dtg-testo-sub-zero:#1C6FA6;  /* 4,87:1 */

  /* Testo derivato dal fondo, mai grigio neutro */
  --dtg-testo:var(--wp--preset--color--inchiostro);
  --dtg-testo-secondario:#5C5344;          /* 6,4:1 su panna */
  --dtg-testo-su-notte:#F3EFE2;
  --dtg-testo-su-notte-secondario:#B9B2A0; /* 6,9:1 su notte */

  /* Il claim ruota fra cinque testi di lunghezza diversa e prende le righe che gli
     servono: il blocco di apertura si accorcia con lui. */
  --dtg-claim-interlinea:1.16;

  /* Geometria: raggi ampi, come i pannelli del mondo scelto */
  --dtg-raggio-s:10px;
  --dtg-raggio-m:16px;
  --dtg-raggio-l:26px;
  --dtg-bordo:2px;

  /* Profondita': sempre offset + sfocatura, mai alone piatto */
  --dtg-ombra-oggetto:0 26px 30px -12px rgba(20,18,16,.34);
  --dtg-ombra-pannello:0 18px 40px -18px rgba(20,18,16,.45);
  --dtg-ombra-tessera:0 10px 22px -12px rgba(20,18,16,.5);

  --dtg-contenuto:1320px;
  --dtg-molla:cubic-bezier(.16,1,.3,1);
}

/* Dawn Town Games — hero, motto e catalogo
   Mondo: fondo panna, crinale sfaccettato nel colore del gioco caricato che chiude
   l'apertura e apre un terreno sfumato verso il bianco, striscia verticale scavalcata,
   pannello scuro arrotondato. Composizione A approvata il 2026-08-06. */

*,*::before,*::after{box-sizing:border-box}
/* le fasce a piena finestra sono larghe 100vw, che include la barra di scorrimento:
   senza il taglio qui la pagina scorre di lato di quanto è larga la barra. Va su html,
   non su body: da body l'overflow viene propagato al viewport e lo scorrimento resta. */
/* saltando a un'ancora la fettuccia ancorata coprirebbe la prima riga di quello che
   si è appena chiesto di vedere: la pagina si ferma un po' più su */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:90px}
body{
  margin:0;
  background:var(--wp--preset--color--panna);
  color:var(--dtg-testo);
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--corpo);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--wp--preset--font-family--display);margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.salta{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--wp--preset--color--inchiostro);color:var(--dtg-testo-su-notte);
  padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-radius:0 0 var(--dtg-raggio-s) 0;font-weight:500;text-decoration:none;
}
.salta:focus{left:0}

:where(a,button):focus-visible{
  outline:3px solid var(--wp--preset--color--inchiostro);
  outline-offset:3px;border-radius:4px;
}

/* ---------- Testata ---------- */
/* La fettuccia nera parte dal logo, si stringe all'altezza delle scritte e si riapre
   quando incontra la striscia: una sola forma, disegnata con una maschera SVG. */
.testata{
  position:relative;z-index:6;
  max-width:var(--dtg-contenuto);margin:0 auto;
  /* l'imbottitura verticale e' anche l'altezza della fascia nera: la fettuccia e'
     la testata meno questa misura sopra e sotto. Una variabile, non due numeri. */
  --dtg-testata-imbottitura:var(--wp--preset--spacing--30);
  padding:var(--dtg-testata-imbottitura) var(--wp--preset--spacing--40);
  /* niente gap: lo spazio lo distribuiscono i margini automatici del menù,
     un gap da un lato solo lo sposterebbe di mezza sua misura */
  display:flex;align-items:center;gap:0;
  /* La fettuccia arriva al bordo del contenuto su OGNI pagina, home compresa: prima
     si fermava sul bordo della striscia verticale dell'apertura, e quel tratto corto
     non bastava a tenere quattro voci e tre strumenti — le voci finivano sotto le
     icone gia' senza carrello. Adesso e' la striscia a partire da sotto la fascia
     nera invece che a passarle di fianco, e la testata e' la stessa dappertutto. */
  --dtg-banda-fine:var(--wp--preset--spacing--40);
  --dtg-logo-larghezza:150px;
}
/* La fettuccia parte dal BORDO DESTRO del logo, non da sotto: così la strozzatura
   non viene mai tagliata dal blocco nero del marchio, con cui invece si salda. */
.testata::before{
  content:"";position:absolute;z-index:-1;
  left:calc(var(--wp--preset--spacing--40) + var(--dtg-logo-larghezza));
  right:var(--dtg-banda-fine);
  top:var(--wp--preset--spacing--30);bottom:var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--inchiostro);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L36,0 C106,0 106,26 176,26 L824,26 C894,26 894,0 964,0 L1000,0 L1000,100 L964,100 C894,100 894,74 824,74 L176,74 C106,74 106,100 36,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L36,0 C106,0 106,26 176,26 L824,26 C894,26 894,0 964,0 L1000,0 L1000,100 L964,100 C894,100 894,74 824,74 L176,74 C106,74 106,100 36,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.testata__marchio{flex:none;display:block;position:relative}
.testata__marchio img{width:var(--dtg-logo-larghezza);height:auto;display:block}
/* Il menù occupa esattamente lo stesso tratto della fettuccia (stessi left/right,
   stesso blocco contenitore) e si centra dentro: così cade al centro della
   strozzatura a qualunque larghezza. Con padding e percentuali non funzionava,
   perché le % del padding si misurano sul body e quelle della fettuccia sulla testata. */
.testata__nav{
  position:absolute;
  left:calc(var(--wp--preset--spacing--40) + var(--dtg-logo-larghezza));
  right:var(--dtg-banda-fine);
  display:flex;justify-content:center;gap:var(--wp--preset--spacing--30);
  /* il riquadro del menù copre tutta la fettuccia e ruberebbe i clic al selettore di
     lingua che ci sta sopra: passano solo le voci, non lo spazio vuoto fra loro */
  pointer-events:none;
}
.testata__nav a{pointer-events:auto}
.testata__nav a{
  color:var(--dtg-testo-su-notte);text-decoration:none;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.testata__nav a:hover{border-bottom-color:var(--dtg-accento,var(--wp--preset--color--arancio))}

/* ---------- La fettuccia ancorata ----------
   Quando la testata è uscita dalla pagina, la stessa fettuccia rientra dall'alto più
   piccola e ci resta: il menù e le lingue si raggiungono da qualunque punto senza
   tornare in cima. Non è una barra nuova, è la stessa forma rimpicciolita — cambiano
   il passo del logo, l'imbottitura e la strozzatura, che a questa altezza sarebbe
   troppo stretta per starci dentro con le scritte.
   Il guscio tiene l'altezza al posto suo: senza, la pagina salterebbe di 127px nel
   momento in cui la testata lascia il flusso. */
.testata-guscio{min-height:var(--dtg-testata-h,auto)}
body.testata-e-ancorata .testata{
  position:fixed;top:0;left:0;right:0;z-index:20;
  margin-inline:auto;
  --dtg-testata-imbottitura:var(--wp--preset--spacing--10);
  padding-top:var(--dtg-testata-imbottitura);
  padding-bottom:var(--dtg-testata-imbottitura);
  --dtg-logo-larghezza:104px;
  /* qui sotto non c'è nessuna striscia da rispettare: la fettuccia arriva al bordo
     del contenuto. Menù e lingue si spostano da sé, leggono la stessa variabile. */
  --dtg-banda-fine:var(--wp--preset--spacing--40);
}
/* Ancorata la fettuccia non si strozza: altezza uguale da un capo all'altro. La
   strozzatura serve a far respirare le voci dentro una fascia alta 83px; a 58 la
   differenza fra il tratto largo e quello stretto diventa un gradino che si nota
   invece di una forma, e la barra si legge meglio da sola. */
body.testata-e-ancorata .testata::before{
  -webkit-mask-image:none;mask-image:none;
  border-radius:0 var(--dtg-raggio-s) var(--dtg-raggio-s) 0;
}
/* l'ombra segue la sagoma della fettuccia, non il suo rettangolo: sotto scorre la
   pagina, e un rettangolo d'ombra racconterebbe una forma che non c'è */
body.testata-e-ancorata .testata::before,
body.testata-e-ancorata .testata__marchio{
  filter:drop-shadow(0 12px 20px rgba(20,18,16,.34));
}

/* ---------- Scelta della lingua ----------
   Sta sulla testa destra della fettuccia, dove il nero è largo: è un interruttore, non
   una voce di menù, e il tondo della bandiera lo distingue dalle scritte. Aperto con
   <details>, quindi funziona da tastiera e senza JavaScript. */
.bandiere-sorgente{display:none}
/* le bandiere sono disegnate e ritagliate in cerchio: nessuna emoji, nessuna immagine */
.bandiera{
  width:22px;height:22px;flex:none;
  border-radius:50%;
  clip-path:circle(50%);
  box-shadow:0 0 0 1px rgba(20,18,16,.25);
}
.lingue{
  position:absolute;right:var(--dtg-banda-fine);top:50%;
  translate:0 -50%;z-index:2;
  /* rientra di un passo: appoggiato al bordo della fettuccia toccherebbe la rastremazione */
  margin-right:var(--wp--preset--spacing--10);
}
.lingue summary{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .5rem;border-radius:var(--dtg-raggio-s);
  color:var(--dtg-testo-su-notte);cursor:pointer;list-style:none;
  transition:background-color .18s ease;
}
.lingue summary::-webkit-details-marker{display:none}
.lingue__sigla{
  font-size:var(--wp--preset--font-size--didascalia);font-weight:500;letter-spacing:.04em;
}
/* la freccetta è disegnata con due bordi, non un glifo: ruota all'apertura */
.lingue summary::after{
  content:"";width:.42rem;height:.42rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -2px;
  transition:rotate .2s var(--dtg-molla);
}
.lingue[open] summary::after{rotate:225deg;translate:0 1px}
.lingue summary:hover{background:rgba(243,239,226,.12)}
.lingue summary:focus-visible{outline:3px solid var(--dtg-testo-su-notte);outline-offset:2px}
/* Chiuso, il pannello deve sparire, e non basta lasciarlo fare al browser: il
   contenuto di un <details> chiuso oggi si nasconde con `content-visibility:hidden`
   su ::details-content, e un figlio posizionato in assoluto sfugge a quel salto —
   restava a schermo un elenco di otto lingue appeso sotto la testata, sempre aperto.
   Lo si dichiara qui, e vale su qualunque browser. */
.lingue:not([open]) .lingue__pannello{display:none}
.lingue__pannello{
  position:absolute;right:0;top:calc(100% + .6rem);z-index:8;
  min-width:14rem;
  background:var(--wp--preset--color--notte);
  color:var(--dtg-testo-su-notte);
  border-radius:var(--dtg-raggio-m);
  padding:var(--wp--preset--spacing--20);
  box-shadow:var(--dtg-ombra-pannello);
}
.lingue__pannello a{
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem .55rem;
  border-radius:var(--dtg-raggio-xs);
  color:var(--dtg-testo-su-notte);text-decoration:none;
}
.lingue__pannello a:hover{background:rgba(243,239,226,.1)}
.lingue__pannello a[aria-current]{color:var(--dtg-accento);font-weight:500}

/* ---------- Bottoni: la targhetta a punta ----------
   Angoli morbidi a sinistra, punta a destra: la forma dice "di qua si va avanti".
   Il pieno è la rampa del gioco caricato, la stessa della striscia. */
.bottone{
  --dtg-punta:20px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;
  padding:0 calc(var(--wp--preset--spacing--30) + var(--dtg-punta)) 0 var(--wp--preset--spacing--30);
  border:0;border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s);
  background:linear-gradient(180deg,
    var(--dtg-accento-alto) 0%,
    var(--dtg-accento) 55%,
    var(--dtg-accento-basso) 100%);
  color:var(--wp--preset--color--inchiostro);
  font-family:var(--wp--preset--font-family--testo);
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  box-shadow:var(--dtg-ombra-tessera);
  transition:transform .22s var(--dtg-molla),filter .18s ease;
}
.bottone:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.04)}
.bottone:active{transform:translateY(0)}
/* la punta mangia il clip: il focus non può essere un outline, diventa un anello dentro */
.bottone:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--wp--preset--color--inchiostro)}

/* Versione a filo: stessa sagoma, il pieno resta solo come bordo */
.bottone--fantasma{
  background:var(--dtg-accento);
  color:var(--wp--preset--color--inchiostro);
  box-shadow:none;
}
.bottone--fantasma::before{
  content:"";position:absolute;inset:var(--dtg-bordo);z-index:-1;
  background:var(--wp--preset--color--panna);
  border-radius:calc(var(--dtg-raggio-s) - 1px) 0 0 calc(var(--dtg-raggio-s) - 1px);
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
}
.bottone--fantasma:hover{filter:none;background:var(--dtg-accento)}
.bottone--fantasma:hover::before{background:transparent}

/* la variante piccola cambia altezza e imbottitura, non corpo: un passo in meno da mantenere */
.bottone--piccolo{min-height:48px;padding:0 calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) 0 var(--wp--preset--spacing--20)}
.bottone[disabled]{
  background:rgba(243,239,226,.16);color:var(--dtg-testo-su-notte-secondario);
  box-shadow:none;cursor:not-allowed;transform:none;filter:none;
}

/* ---------- Un colore per gioco ----------
   Il documento porta un attributo data-gioco. Da lì scendono l'accento del claim,
   la rampa della striscia, l'azione in testata e la proporzione del personaggio
   (i tre PNG hanno formati diversi: il fattore li porta alla stessa altezza). */
body{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
  --dtg-accento-fioritura:var(--dtg-arancio-fioritura);
  --dtg-personaggio-k:1;
}
/* La classe `gioco-<slug>` la scrive il server sulla scheda di un prodotto, l'attributo
   `data-gioco` lo scrive lo script: due strade allo stesso colore, e servono tutte e due.
   L'attributo perche' e' quello che il JavaScript legge e che il pescaggio muove sulle
   pagine dove il gioco si sorteggia; la classe perche' su una scheda prodotto il colore
   e' tassonomia — dice quale prodotto stai guardando — e una cosa del genere non puo'
   aspettare che parta uno script, ne' sparire se lo script non parte. */
body[data-gioco="verrix"],
body.gioco-verrix{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
  --dtg-accento-fioritura:var(--dtg-verde-fioritura);
  --dtg-personaggio-k:.928;
}
body[data-gioco="sub-zero"],
body.gioco-sub-zero{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
  --dtg-accento-fioritura:var(--dtg-ghiaccio-fioritura);
  --dtg-personaggio-k:1.06;
}
/* il colore più chiaro del crinale, quello della falda di fondo: da qui parte lo
   sfondo di tutto quello che viene dopo l'apertura */
body{
  /* Mescolato alla PANNA, non al bianco. Sul bianco puro il verde di Verrix diventa una
     tinta fredda che, accostata alla panna calda dell'apertura, l'occhio legge azzurra:
     è contrasto simultaneo, non un errore di colore. Partendo dalla carta resta caldo. */
  --dtg-terreno:color-mix(in srgb,var(--dtg-accento) 8%,var(--wp--preset--color--panna));
  /* dichiarata qui e non sul crinale: anche la scena la usa, per sapere di quanto
     la striscia deve scendere sotto la linea delle creste */
  --dtg-crinale-h:clamp(84px,10vw,150px);
}

.apertura{
  /* z-index sopra il crinale: il personaggio sta davanti alle creste, non dentro */
  position:relative;z-index:1;
  max-width:var(--dtg-contenuto);margin:0 auto;
  /* il piede dell'apertura era largo quanto il passo piu' grande della scala e la
     sezione teneva quasi otto decimi di schermo: fra le azioni e le creste restavano
     245px di niente. Un passo in meno sotto e un'altezza minima piu' corta li tolgono
     senza toccare la scena, che dentro ci sta comunque. */
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  min-height:min(68vh,660px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);align-items:center;gap:var(--wp--preset--spacing--40);
}
/* Il testo si appoggia in alto invece di centrarsi: il claim parte subito sotto la
   testata e il vuoto avanza tutto in basso, verso il crinale. La scena resta centrata
   sul suo asse — striscia e personaggio non seguono il testo. */
.apertura__testo{position:relative;z-index:3;grid-column:1;grid-row:1;min-width:0;max-width:62ch;align-self:start}
.apertura h1{
  font-size:var(--wp--preset--font-size--h-1);
  font-weight:700;line-height:var(--dtg-claim-interlinea);letter-spacing:-.03em;
  margin-bottom:var(--wp--preset--spacing--40);
  /* Nessuna altezza riservata: il claim occupa le righe che gli servono e il blocco
     si accorcia con lui. L'apertura resta ferma comunque, perché la sua min-height
     e l'allineamento centrato del testo assorbono la differenza. */
}
.apertura h1 em{
  font-style:normal;display:block;
  color:var(--dtg-accento);
  -webkit-text-stroke:2px var(--wp--preset--color--inchiostro);
  paint-order:stroke fill;
}
.lede{
  font-size:var(--wp--preset--font-size--lede);
  color:var(--dtg-testo-secondario);
  max-width:46ch;margin-bottom:var(--wp--preset--spacing--40);
}
/* Il lede segue il gioco che colora l'apertura: se ne vede uno solo, quello del
   mondo caricato. Nessun JS — è lo stesso data-gioco che muove striscia e accento. */
.apertura__testo .lede{display:none}
body[data-gioco="yatai"] .lede--yatai,
body[data-gioco="verrix"] .lede--verrix,
body[data-gioco="sub-zero"] .lede--sub-zero{display:block}
/* i nomi dei giochi portano il loro colore anche dentro il testo corrente:
   è la stessa tassonomia della striscia, alla scala della lettura */
.gioco{font-weight:500}
.gioco--yatai{color:var(--dtg-testo-yatai)}
.gioco--verrix{color:var(--dtg-testo-verrix)}
.gioco--sub-zero{color:var(--dtg-testo-sub-zero)}

.azioni{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--40)}

/* La scena: striscia verticale sfumata + personaggio grande che ci sta sopra e la
   scavalca da entrambi i lati. Striscia e personaggio sono centrati sullo stesso asse. */
.apertura__scena{
  position:relative;z-index:2;grid-column:2;grid-row:1;align-self:stretch;
  width:100%;min-width:0;min-height:560px;
  /* Geometria della striscia, dichiarata una volta sola. È ancorata al FONDO
     (--dtg-striscia-base): allungarla verso l'alto non le sposta la base, e il
     personaggio ci resta appoggiato con lo stesso valore. */
  /* Quanto sale sopra la scena. Sono DUE misure, non una, perche' la fettuccia non ha
     un bordo basso solo: e' strozzata, e in mezzo il nero finisce piu' in alto che
     sulle teste. Misurato a schermo il 2026-08-10 a 1440: nel tratto strozzato il nero
     arriva a y=82, sulla testa destra a y=104.

     - LA STRISCIA sale fino al bordo strozzato, cioe' al punto piu' ALTO in cui il
       nero finisce lungo la sua larghezza. Dove la fettuccia si riallarga le passa
       sopra e la copre: cosi' non resta un filo di carta da nessuna parte, e la
       striscia sembra uscire dalla fettuccia invece che cominciare poco sotto.
     - IL PERSONAGGIO si ferma piu' giu', al bordo della fettuccia larga: se salisse
       come la striscia la testa toccherebbe il nero, e sopra la testa deve restare un
       po' di striscia — e' lei il fondo su cui la figura sta.

     Tutte e due in passi della scala, non in numeri trovati a mano. Il pixel in piu'
     sulla striscia copre l'ultima riga di antialiasing dell'ombra della fettuccia:
     senza, a certi ingrandimenti resta un filo chiaro. */
  --dtg-striscia-alta:calc(var(--wp--preset--spacing--30) * 3 + 1px);
  --dtg-figura-alta:calc(var(--wp--preset--spacing--30) * 2);
  --dtg-striscia-base:16%;      /* dove si ferma, misurato dal fondo della scena */
}
.apertura__striscia{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(-1 * var(--dtg-striscia-alta));
  bottom:var(--dtg-striscia-base);
  width:min(240px,62%);
  border-radius:0 0 var(--dtg-raggio-m) var(--dtg-raggio-m);
  /* il colore non è piatto: una fioritura chiara dietro la figura, poi il pieno che
     si scalda verso il basso — lo stesso trattamento della banda di riferimento */
  background:
    radial-gradient(58% 34% at 50% 26%, var(--dtg-accento-fioritura) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--dtg-accento-alto) 0%,
      var(--dtg-accento) 46%,
      var(--dtg-accento-basso) 100%);
}
/* il baricentro visivo della figura non è al centro del PNG (il braccio sinistro
   lascia molto vuoto): lo scarto la riporta sull'asse della striscia */
/* i piedi della figura cadono esattamente sul bordo basso della striscia; in larghezza
   e in alto la sborda, che è il gesto: il personaggio non sta dentro il riquadro */
/* La misura parte dall'ALTEZZA, non dalla larghezza: dalla base della striscia alla
   sua cima, che adesso e' il bordo basso della fascia nera. Cosi' il limite superiore
   della figura e' quel bordo per tutti e tre i personaggi, qualunque proporzione
   abbiano — sizzandoli in larghezza il piu' slanciato risaliva di settantacinque pixel
   e finiva DIETRO la fascia, con la testa mangiata. E' la stessa regola che il sistema
   applicava gia' sotto i 1080, portata a tutte le larghezze ora che la fascia non si
   ferma piu' prima della striscia.
   La larghezza viene dietro e resta piu' larga della striscia: il ritaglio scavalca
   ancora, di lato invece che in alto. Il fattore per gioco non serve piu' — serviva a
   pareggiare tre altezze diverse ricavate da una larghezza sola. */
.apertura__personaggio{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:var(--dtg-striscia-base);
  height:calc(100% + var(--dtg-figura-alta) - var(--dtg-striscia-base));
  width:auto;max-width:min(360px,92%);
  filter:drop-shadow(0 26px 30px rgba(20,18,16,.28));
}

/* ---------- La nota a mano ----------
   Vive nella fascia vuota fra il testo e la scena e collega le due cose: dice che
   quella figura viene dal gioco appena nominato. È inchiostro, non accento — l'accento
   resta alle azioni. Coordinate e percorso li calcola il JS sulle misure vere. */
.nota{
  position:absolute;inset:0;z-index:4;
  pointer-events:none;color:var(--wp--preset--color--inchiostro);
}
.nota[hidden]{display:none}
.nota__testo{
  position:absolute;margin:0;
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  font-size:clamp(1.3rem,1rem + .7vw,1.75rem);line-height:1.06;
  text-wrap:balance;
  /* il perno è l'angolo in basso a sinistra: la prima lettera resta ferma dove il JS
     l'ha appoggiata e la frase sale a destra. Dove la nota corre accanto alla propria
     freccia, il JS scrive qui l'inclinazione della freccia; altrove vale la mano fissa. */
  transform-origin:0 100%;rotate:var(--dtg-nota-giro,-7deg);
}
.nota__freccia{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ---------- Il crinale ----------
   Creste sfaccettate tinte dal gioco caricato: sotto l'apertura fanno da terreno,
   in fondo alla pagina separano dal footer. Vanno tenute quasi invisibili — sono un
   fondo, non un'illustrazione. Se si notano prima del contenuto, sono sbagliate. */
/* Tutto il crinale sta DIETRO l'apertura: la striscia e il personaggio gli passano sopra,
   le creste gli finiscono dietro. Basta lasciare lo z-index automatico — l'apertura ha
   z-index 1 e si dipinge dopo. */
.crinale{position:relative;line-height:0}
.crinale svg{display:block;width:100%;height:var(--dtg-crinale-h)}
/* Il crinale alto chiude l'apertura al posto della vecchia fascia. Sale dentro la hero
   fino alla base della striscia e le finisce dietro: la striscia e il personaggio stanno
   davanti alle montagne, appoggiati sul crinale. Il suo stesso fondo passa dalla panna al
   terreno, così alla base delle creste non c'è nessuna riga di stacco. */
.crinale--alto{
  /* Sale dentro la hero fin sopra i piedi del personaggio, ma il margine basso restituisce
     al flusso quello che il margine alto ha preso: il catalogo resta dov'era. Alzare la
     salita senza restituire il margine trascinerebbe su tutta la pagina. */
  --dtg-crinale-salita:calc(var(--dtg-crinale-h) * 1.9);
  /* quanto del margine preso in alto viene restituito al flusso: non tutto, o fra il
     crinale e la sezione che segue resta una pianura di carta vuota */
  --dtg-crinale-resa:calc(var(--dtg-crinale-salita) - var(--dtg-crinale-h) * 1.6);
  margin-top:calc(-1 * var(--dtg-crinale-salita));
  margin-bottom:var(--dtg-crinale-resa);
  background:linear-gradient(180deg,var(--wp--preset--color--panna) 0 58%,var(--dtg-terreno) 92%);
}
/* Il terreno prosegue sotto le creste per tutto il margine restituito: senza, fra la fine
   del crinale e l'inizio del terreno resterebbe una riga di panna. Sta dietro come tutto
   il resto del crinale — la striscia e il personaggio ci passano sopra. */
.crinale--alto::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);
  height:calc(var(--dtg-crinale-resa) + 1px);
  background:var(--dtg-terreno);
}
/* Da lì in giù la pagina sfuma dal colore più chiaro del crinale al bianco, e ci resta
   fino al crinale che chiude. */
.terreno{background:linear-gradient(180deg,var(--dtg-terreno) 0%,var(--wp--preset--color--bianco) 58%)}
.crinale--basso{background:var(--wp--preset--color--bianco)}
/* Stesso profilo ribaltato in orizzontale: stesso linguaggio, ritmo di creste diverso.
   Qui il fondo passa dal bianco alla notte del footer, con lo stacco sulla linea delle
   creste: così il piede della pagina non comincia con una riga dritta. */
.crinale--basso{
  background:linear-gradient(180deg,
    var(--wp--preset--color--bianco) 0 56%,
    var(--wp--preset--color--notte) 90%);
}
.crinale--basso svg{scale:-1 1}
/* Riempimenti PIENI, non velature: le creste devono coprire la striscia, non lasciarla
   trasparire. Sono lo stesso colore che darebbe una velatura sul fondo su cui stanno —
   il crinale alto poggia sulla panna, quello basso sul bianco, e il fronte è già terreno. */
.crinale__fondo{fill:color-mix(in srgb,var(--dtg-accento) 7%,var(--wp--preset--color--panna))}
.crinale__faccia{fill:color-mix(in srgb,var(--dtg-accento) 14%,var(--wp--preset--color--panna))}
.crinale__fronte{fill:var(--dtg-terreno)}
/* le creste che scendono nel footer sono scure con dentro un soffio del colore del
   gioco: sagome contro il bianco sopra, terreno continuo con la notte sotto */
.crinale--basso .crinale__fondo{fill:color-mix(in srgb,var(--dtg-accento) 16%,var(--wp--preset--color--notte))}
.crinale--basso .crinale__faccia{fill:color-mix(in srgb,var(--dtg-accento) 26%,var(--wp--preset--color--notte))}
.crinale--basso .crinale__fronte{fill:var(--wp--preset--color--notte)}
.crinale--basso .crinale__spigolo{stroke:color-mix(in srgb,var(--dtg-accento) 42%,transparent)}
.crinale__spigolo{
  fill:none;stroke:color-mix(in srgb,var(--dtg-accento) 26%,transparent);
  stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}

/* ---------- Il motto ----------
   Ludite Securi è dell'editore, non di un gioco: è l'unico punto del sito dove i tre
   colori stanno insieme. Il pannello li fonde e li affonda nell'inchiostro, così il
   testo chiaro ci si legge sopra; i tre personaggi lo sbordano, uno per titolo. */
.motto{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
/* L'introduzione sta fuori dal pannello, sulla carta: dice chi siamo e perché prima dei
   giochi viene un patto. Il pannello poi è il patto. */
.motto__intro{
  max-width:58ch;margin:0 auto var(--wp--preset--spacing--50);text-align:center;
}
.motto__intro h2{
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  margin-bottom:var(--wp--preset--spacing--20);
}
/* stessa misura del testo corrente ovunque: un attacco centrato lungo il doppio si
   legge peggio proprio dove serve che si legga */
.motto__intro p{color:var(--dtg-testo-secondario);max-width:46ch;margin-inline:auto}
.motto__scena{position:relative}
.motto__pannello{
  position:relative;z-index:1;
  border-radius:var(--dtg-raggio-l);
  /* più imbottitura sotto: lì ci va la nota a mano, che deve stare sotto il bottone
     e non addosso all'ultimo paragrafo */
  padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--40)
          calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--50));
  color:var(--wp--preset--color--inchiostro);
  /* Tre bande piene con il taglio in diagonale, non una sfumatura: mescolando verde e
     arancio il centro diventava fango, e affondandoli nell'inchiostro il pannello
     diventava cupo. Qui i colori restano quelli veri del marchio, e il testo va in
     inchiostro — che su tutte e tre le bande sta sopra 5,9:1. */
  background:
    radial-gradient(84% 118% at 50% -12%, rgba(255,255,255,.32) 0%, transparent 58%),
    linear-gradient(180deg, transparent 52%, rgba(20,18,16,.12) 100%),
    linear-gradient(100deg,
      var(--wp--preset--color--verde) 0 32%,
      var(--wp--preset--color--arancio) 32% 68%,
      var(--wp--preset--color--ghiaccio-vivo) 68% 100%);
  box-shadow:var(--dtg-ombra-pannello);
}
.motto__testo{
  position:relative;z-index:3;
  max-width:52ch;margin:0 auto;text-align:center;
}
.motto__insegna{
  font-size:var(--wp--preset--font-size--h-1);font-weight:700;letter-spacing:-.03em;
  margin-bottom:var(--wp--preset--spacing--10);
}
/* Sul pannello colorato niente testo attenuato: qualunque grigio scende sotto soglia su
   una delle tre bande. La gerarchia la fanno corpo e spaziatura, non la tinta. */
.motto__traduzione{
  font-size:var(--wp--preset--font-size--lede);
  margin-bottom:var(--wp--preset--spacing--30);
}
.motto__testo p{margin-bottom:var(--wp--preset--spacing--30)}
/* l'iscrizione è un'incisione, non una citazione: maiuscoletto spaziato fra due filetti */
.motto__iscrizione{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  padding:var(--wp--preset--spacing--20) 0;
  border-top:1px solid rgba(20,18,16,.28);
  border-bottom:1px solid rgba(20,18,16,.28);
}
.motto__glossa{
  font-size:var(--wp--preset--font-size--didascalia);
  margin:var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.motto__azione{margin-top:var(--wp--preset--spacing--40)}
/* Qui l'azione non è di nessuno dei tre giochi, e sul pannello vivace un bottone chiaro
   si confonderebbe con la banda arancione: prende l'inchiostro, l'unico che stacca su
   tutte e tre le bande. È il bottone pieno già dichiarato nel sistema. */
.bottone--inchiostro{
  background:var(--wp--preset--color--inchiostro);
  color:var(--dtg-testo-su-notte);
}
.bottone--inchiostro:hover{filter:none;background:var(--wp--preset--color--notte)}

.motto__figura{position:absolute;height:auto;filter:drop-shadow(0 22px 26px rgba(20,18,16,.32))}
/* Dietro il pannello, che le taglia la vita: è il gesto del ritaglio che scavalca.
   Sta a sinistra e non al centro perché sopra il pannello c'è l'introduzione: al centro
   le finirebbe addosso. */
.motto__figura--sopra{z-index:0;left:7%;top:-215px;width:200px}
/* Davanti, a sbordare i fianchi. La volpe guarda a destra e il razziatore a sinistra:
   messi così guardano tutti e due il bottone in mezzo. Invertirli li fa guardare fuori. */
.motto__figura--sinistra{z-index:2;left:-70px;bottom:-46px;width:300px}
.motto__figura--destra{z-index:2;right:-84px;bottom:-38px;width:340px}


/* ---------- Il catalogo ---------- */
.giochi{
  position:relative;z-index:4;
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
/* La soglia: solo la linea di cresta, senza massa. È il crinale ridotto a un segno —
   serve a dire "qui comincia un'altra cosa" senza costruire un'altra montagna. */
/* La soglia serve in tre posti — fra il motto e il catalogo, fra il titolo di una
   pagina interna e il suo testo, e fra chi siamo e come lavoriamo — e i valori stanno
   scritti una volta. */
.giochi__soglia,
.editore__soglia,
.atto__soglia,
.rivenditori__soglia,
.pagina__soglia{line-height:0;margin-bottom:var(--wp--preset--spacing--50)}
.giochi__soglia svg,
.editore__soglia svg,
.atto__soglia svg,
.rivenditori__soglia svg,
.pagina__soglia svg{display:block;width:100%;height:26px}
.giochi__soglia path,
.editore__soglia path,
.atto__soglia path,
.rivenditori__soglia path,
.pagina__soglia path{
  fill:none;stroke:color-mix(in srgb,var(--dtg-accento) 34%,transparent);
  stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.giochi__intro{
  max-width:58ch;margin:0 auto var(--wp--preset--spacing--50);text-align:center;
}
.giochi__intro h2{
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  margin-bottom:var(--wp--preset--spacing--20);
}
.giochi__intro p{color:var(--dtg-testo-secondario);max-width:46ch;margin-inline:auto}

.giochi__griglia{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wp--preset--spacing--30);
}
/* Ogni scheda ridichiara l'accento per sé: così la targhetta a punta dentro prende il
   colore del proprio gioco senza una sola regola in più sui bottoni. */
.scheda--verrix{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
  --dtg-gioco-testo:var(--dtg-testo-verrix);
}
.scheda--yatai{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
  --dtg-gioco-testo:var(--dtg-testo-yatai);
}
.scheda--sub-zero{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
  --dtg-gioco-testo:var(--dtg-testo-sub-zero);
}
/* La scheda si chiama così e non "gioco": .gioco è già il nome del gioco dentro il
   testo corrente, e riusarlo qui tingeva di marrone tutta la scheda di Yatai. */
.scheda{
  position:relative;overflow:hidden;
  border-radius:var(--dtg-raggio-l);
  box-shadow:var(--dtg-ombra-pannello);
  min-height:520px;
  display:flex;align-items:flex-end;justify-content:center;
  padding:var(--wp--preset--spacing--30);
}
/* Il ritaglio non è al centro per tutte: ogni immagine ha il suo punto buono, e
   ritagliando al centro Sub-Zero mostrava il sottobosco invece della montagna. */
.scheda__sfondo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.scheda--verrix .scheda__sfondo{object-position:50% 40%}
.scheda--yatai .scheda__sfondo{object-position:50% 45%}
/* la scena composta ha i due personaggi a sinistra e a mezz'altezza: il ritaglio li
   tiene dentro sia quando la scheda è stretta sia quando è larga col pannello a destra */
.scheda--sub-zero .scheda__sfondo{object-position:25% 40%}
.scheda__pannello{
  /* relative anche per la nota a mano, che ci sta dentro e si misura su di lui */
  position:relative;z-index:1;
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-m);
  padding:var(--wp--preset--spacing--30);
  box-shadow:var(--dtg-ombra-tessera);
  max-width:46ch;
}
/* la scheda larga: il pannello si sposta di lato e sale a mezza altezza, come nel mondo
   di riferimento, e l'immagine ha spazio per respirare */
.scheda--larga{
  grid-column:1 / -1;order:-1;
  /* più alta di quanto chiederebbe il pannello: sopra di lui deve restarci la scatola,
     che scavalca il bordo e verrebbe tagliata dalla scheda */
  min-height:560px;
  align-items:center;justify-content:flex-end;
  padding:var(--wp--preset--spacing--40);
}
/* solo la scheda larga porta la nota a mano, e il pannello si allunga sotto per ospitarla */
.scheda--larga .scheda__pannello{
  max-width:38ch;
  padding-bottom:calc(var(--wp--preset--spacing--30) + 4.5rem);
}

/* La scatola scavalca il pannello. È il gesto del sito applicato alla cosa che si
   vende: un negozio di tre oggetti fisici deve mostrarli, e nella comp erano loro il
   soggetto del catalogo. Ancorata per il basso e non per l'alto — i tre render hanno
   proporzioni diverse, Sub-Zero è sdraiato — così tutte e tre scavalcano della stessa
   misura invece che di una misura ciascuna. Sovrapposizione 48px su 132 di larghezza:
   più di un terzo, come vuole la regola del ritaglio. */
/* La larghezza del render, che serve al rientro del titolo: cambia col formato della
   scatola, perche' le tre stanno tutte alla stessa ALTEZZA e non alla stessa larghezza. */
.scheda{--dtg-scatola:132px}
.scheda--sub-zero{--dtg-scatola:88px}
.scheda__scatola{
  position:absolute;z-index:2;
  right:var(--wp--preset--spacing--20);
  /* Appoggiata al bordo alto del pannello e poi spinta dentro per la maggior parte
     della PROPRIA altezza: lo scavalco e' una proporzione, non un numero, cosi' ogni
     render si sistema da se' qualunque forma abbia. Sta dentro piu' che fuori perche'
     deve leggersi come un oggetto appoggiato sulla carta, non come un adesivo incollato
     sopra la foto: se resta per due terzi sull'immagine, la carta non la regge piu' e
     galleggia. Meta' e meta' e' anche la soglia oltre la quale arriverebbe sulla riga
     dei dati: cosi' si ferma sopra, e nessuna riga deve rientrare per lasciarle posto. Il translate e' l'unica misura che si calcola sull'elemento invece che
     sul contenitore. */
  bottom:100%;
  translate:0 50%;
  /* Tutte e tre alla stessa altezza, come scatole in fila su uno scaffale: e' l'altezza
     a dire che sono oggetti della stessa famiglia, non la larghezza. I tre render hanno
     formati diversi — due quadrati, uno verticale — e imporre la stessa larghezza
     farebbe stare quella verticale una testa sopra le altre. */
  height:132px;width:auto;
  filter:drop-shadow(0 18px 22px rgba(20,18,16,.34));
  pointer-events:none;
}

.scheda h3{
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  color:var(--dtg-gioco-testo);
  margin-bottom:var(--wp--preset--spacing--10);
  /* il titolo sta sulla stessa riga del pezzo di scatola che entra nel pannello */
  padding-right:calc(var(--dtg-scatola) + var(--wp--preset--spacing--20));
}

.scheda__dati{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-bottom:var(--wp--preset--spacing--20);
}
.scheda__nota{font-size:.9375rem;margin-bottom:var(--wp--preset--spacing--30)}
.scheda__piede{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);
  padding-top:var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--panna-scura);
}
.prezzo{font-family:var(--wp--preset--font-family--display);font-size:1.375rem;font-weight:600;margin-right:auto}
/* Sub-Zero non ha un prezzo da mostrare finché la campagna è in corso: al suo posto
   la data, che occupa lo stesso ruolo senza promettere un acquisto */
.scheda__quando{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);margin-right:auto;max-width:18ch;
}

/* ---------- Il piede ----------
   L'unica zona scura del sito. Il crinale che lo precede ci scende dentro col proprio
   fondo, quindi qui non serve nessun bordo: la separazione l'ha già fatta il terreno. */
.piede{
  background:var(--wp--preset--color--notte);
  color:var(--dtg-testo-su-notte);
  padding:var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}
.piede__corpo{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:0 var(--wp--preset--spacing--40);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.piede__marchio img{width:150px;height:auto;margin-bottom:var(--wp--preset--spacing--20)}
.piede__motto{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-4);font-weight:600;letter-spacing:-.01em;
  margin-bottom:var(--wp--preset--spacing--20);
}
.piede__nota{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-su-notte-secondario);max-width:34ch;
}
.piede__colonna h2{
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dtg-testo-su-notte-secondario);
  margin-bottom:var(--wp--preset--spacing--20);
}
.piede__colonna li + li{margin-top:.55rem}
.piede__colonna a{
  color:var(--dtg-testo-su-notte);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.piede__colonna a:hover{border-bottom-color:var(--dtg-accento)}
.piede__legale{
  max-width:var(--dtg-contenuto);
  margin:var(--wp--preset--spacing--50) auto 0;
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0;
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-su-notte-secondario);
}
/* il filetto sta dentro l'imbottitura, non sul bordo dello schermo */
.piede__legale::before{
  content:"";position:absolute;left:0;right:0;
  border-top:1px solid rgba(243,239,226,.14);
  translate:0 calc(-1 * var(--wp--preset--spacing--30));
}
.piede__legale{position:relative}

/* ---------- Movimento: un solo momento, orchestrato ---------- */
@media (prefers-reduced-motion:no-preference){
  /* La fettuccia rientra dall'alto quando la testata è uscita: non è un terzo tempo,
     è la risposta a un gesto: senza movimento comparirebbe di scatto sopra il testo
     che si sta leggendo. Con reduced-motion è già lì, e va bene così. */
  body.testata-e-ancorata .testata{animation:testata-rientro .34s var(--dtg-molla) both}

  .apertura__striscia{animation:cala .9s var(--dtg-molla) both}
  .apertura__personaggio{animation:sale 1s var(--dtg-molla) .16s both}
  /* per classe e non per posizione: i tre lede stanno tutti nel markup e solo uno
     è visibile, quindi contare i figli darebbe ritardi sbagliati */
  .apertura__testo > *{animation:emerge .8s var(--dtg-molla) both}
  .apertura h1{animation-delay:.05s}
  .apertura__testo .lede{animation-delay:.15s}
  .apertura .azioni{animation-delay:.25s}
  /* Passandoci sopra si muove la scena, non la carta: l'immagine si avvicina appena e
     la scheda si solleva dei soliti pochi pixel dei bottoni. Il pannello resta fermo —
     è un foglio appoggiato sopra, non una parte del quadro. Vale anche col fuoco da
     tastiera, o chi non usa il mouse non avrebbe nessun ritorno. */
  /* Il sollevamento va su transform e non su translate: translate è già impegnato
     dall'animazione d'ingresso, e un'animazione con fill batte una dichiarazione
     normale nella cascata. Le due proprietà si compongono, quindi convivono. */
  .scheda{transition:transform .32s var(--dtg-molla)}
  .scheda__sfondo{transition:scale .5s var(--dtg-molla)}
  .scheda:hover,.scheda:focus-within{transform:translateY(-3px)}
  .scheda:hover .scheda__sfondo,.scheda:focus-within .scheda__sfondo{scale:1.045}

  .giochi.e-visibile .giochi__intro > *{animation:emerge .7s var(--dtg-molla) both}
  .giochi.e-visibile .giochi__intro p{animation-delay:.08s}
  .giochi.e-visibile .scheda{animation:emerge .7s var(--dtg-molla) both}
  .giochi.e-visibile .scheda:nth-child(2){animation-delay:.08s}
  .giochi.e-visibile .scheda:nth-child(3){animation-delay:.16s}
  /* La nota si scrive: prima corre la freccia, poi la punta, poi la frase compare
     da sinistra come sotto un pennarello. Con reduced-motion il blocco non si applica
     e la nota arriva già finita — cambia il modo, non il contenuto. */
  .nota.e-scritta .nota__tratto{animation:traccia .62s cubic-bezier(.16,1,.3,1) both}
  .nota.e-scritta .nota__punta{animation:traccia .2s cubic-bezier(.16,1,.3,1) .54s both}
  .nota.e-scritta .nota__testo{animation:scrivi .5s cubic-bezier(.16,1,.3,1) .62s both}

  /* L'ingresso del motto: prima arriva il pannello, poi il testo a scaglioni, poi i due
     personaggi che corrono dentro dai fianchi, e per ultima lei che spunta da dietro con
     un rimbalzo. È lo stesso tempo dell'arrivo, non un terzo momento. */
  .motto__intro > *{animation:emerge .7s var(--dtg-molla) both}
  .motto__intro h2{animation-delay:.04s}
  .motto__intro p{animation-delay:.14s}
  .motto__pannello{animation:entra-pannello .62s var(--dtg-molla) both}
  .motto__testo > *{animation:emerge .6s var(--dtg-molla) both}
  .motto__testo > *:nth-child(1){animation-delay:.16s}
  .motto__testo > *:nth-child(2){animation-delay:.22s}
  .motto__testo > *:nth-child(3){animation-delay:.28s}
  .motto__testo > *:nth-child(4){animation-delay:.34s}
  .motto__testo > *:nth-child(5){animation-delay:.40s}
  .motto__testo > *:nth-child(6){animation-delay:.46s}
  .motto__testo > *:nth-child(7){animation-delay:.52s}
  .motto__figura--sinistra{animation:corri-da-sinistra .74s cubic-bezier(.2,.9,.3,1) .05s both}
  .motto__figura--destra{animation:corri-da-destra .74s cubic-bezier(.2,.9,.3,1) .13s both}
  .motto__figura--sopra{animation:spunta .78s cubic-bezier(.3,.8,.4,1) .5s both}
  /* Tre inneschi, non uno: ogni gruppo parte quando si arriva al suo pezzo di pagina.
     L'introduzione aspetta sé stessa; il pannello, il suo testo e la cuoca aspettano il
     pannello; i due che corrono aspettano il fondo, dove stanno. Con un innesco solo la
     corsa finiva prima di essere in vista. */
  .con-js .motto:not(.e-intro) .motto__intro > *,
  .con-js .motto:not(.e-entrata) .motto__pannello,
  .con-js .motto:not(.e-entrata) .motto__testo > *,
  .con-js .motto:not(.e-entrata) .motto__figura--sopra,
  .con-js .motto:not(.e-corsa) .motto__figura--sinistra,
  .con-js .motto:not(.e-corsa) .motto__figura--destra{animation-play-state:paused}
}
/* Le animazioni usano scale/translate/rotate come proprietà indipendenti, non transform:
   la striscia e il personaggio sono centrati con transform, e un keyframe che finisce
   su transform:none glielo cancellerebbe. */
@keyframes testata-rientro{from{translate:0 -100%;opacity:0}to{translate:0 0;opacity:1}}
@keyframes cala{from{scale:1 .72;opacity:0}to{scale:1 1;opacity:1}}
@keyframes sale{from{translate:0 26px;rotate:-3deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
@keyframes emerge{from{translate:0 14px;opacity:0}to{translate:0 0;opacity:1}}
/* --dtg-tratto è la lunghezza del percorso, misurata dal JS su ogni path */
@keyframes traccia{from{stroke-dasharray:var(--dtg-tratto);stroke-dashoffset:var(--dtg-tratto)}to{stroke-dasharray:var(--dtg-tratto);stroke-dashoffset:0}}
@keyframes scrivi{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -8% 0 0)}}
@keyframes entra-pannello{from{opacity:0;scale:.965;translate:0 26px}to{opacity:1;scale:1;translate:0 0}}
/* i due di fianco entrano di corsa da fuori pagina */
@keyframes corri-da-sinistra{from{opacity:0;translate:-170% 0}to{opacity:1;translate:0 0}}
@keyframes corri-da-destra{from{opacity:0;translate:170% 0}to{opacity:1;translate:0 0}}
/* lei parte nascosta dietro il pannello, sale oltre il segno e si riassesta */
@keyframes spunta{0%{translate:0 106%}62%{translate:0 -7%}82%{translate:0 3%}100%{translate:0 0}}

/* ---------- Adattamento ---------- */
@media (max-width:1080px){
  /* le figure si stringono prima del testo: il pannello deve restare leggibile */
  .motto__figura--sinistra{width:220px;left:-48px}
  .motto__figura--destra{width:250px;right:-60px}
  .motto__figura--sopra{width:168px;top:-180px;left:5%}
  .scheda{min-height:440px}
  /* qui il pannello va a capo di più e cresce: la scheda cresce con lui, o la scatola
     che gli sta sopra finisce tagliata dal bordo */
  .scheda--larga{min-height:580px}
}
@media (max-width:860px){
  .testata{
    flex-wrap:wrap;gap:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);
  }
  .testata__marchio img{width:120px}
  /* sotto gli 860 la fettuccia non c'è: il menù torna nel flusso e va a capo */
  .testata::before{display:none}
  .testata__nav{
    position:static;left:auto;right:auto;
    order:3;width:100%;justify-content:flex-start;
    overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch;
  }
  /* col dito la voce va presa, non centrata: 44px è la misura minima di un bersaglio */
  .testata__nav a{white-space:nowrap;color:var(--dtg-testo);display:flex;align-items:center;min-height:44px}
  /* senza fettuccia il selettore torna nel flusso, accanto al logo, e va scritto in
     inchiostro perché qui il fondo è carta */
  .lingue{position:static;translate:none;margin:0 0 0 auto}
  .lingue summary{color:var(--dtg-testo)}
  .lingue summary:hover{background:rgba(20,18,16,.08)}
  .lingue summary:focus-visible{outline-color:var(--wp--preset--color--inchiostro)}
  /* Ancorata senza fettuccia: le voci sono in inchiostro su carta, quindi la carta se
     la porta dietro la testata stessa, o si leggerebbero sopra il contenuto. E qui
     torna su una riga sola: due righe fisse in cima a uno schermo da telefono sono
     un sesto della pagina tolto al contenuto. Il menù scorre di lato, come già fa. */
  body.testata-e-ancorata .testata{
    background:var(--wp--preset--color--panna);
    box-shadow:var(--dtg-ombra-tessera);
    --dtg-logo-larghezza:76px;
    flex-wrap:nowrap;gap:var(--wp--preset--spacing--20);
  }
  body.testata-e-ancorata .testata__marchio{filter:none}
  body.testata-e-ancorata .testata__marchio img{width:var(--dtg-logo-larghezza)}
  body.testata-e-ancorata .testata__nav{
    order:0;width:auto;flex:1 1 auto;min-width:0;
    gap:var(--wp--preset--spacing--20);padding-bottom:0;
  }
  .apertura{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
  .apertura{
    grid-template-columns:1fr;min-height:0;
    padding-top:var(--wp--preset--spacing--40);
    padding-bottom:var(--wp--preset--spacing--50);
  }
  .apertura__testo{grid-column:1;grid-row:1;max-width:none}
  .apertura__scena{
    grid-column:1;grid-row:2;min-height:460px;margin-top:var(--wp--preset--spacing--40);
    --dtg-striscia-alta:0rem;--dtg-striscia-base:14%;
  }
  .apertura__striscia{width:min(190px,44%)}
  .apertura__personaggio{width:min(300px,72%)}
  /* in colonna il testo sta sopra e la scena sotto: la fascia vuota di fianco non
     esiste più, e una freccia che punta in giù direbbe un'altra cosa. La nota salta. */
  .nota{display:none}
  /* i fianchi del pannello non bastano più per due figure grandi: scendono in fondo,
     piccole, e il pannello si allunga sotto per non farsele salire sull'azione */
  .motto{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
  .motto__pannello{
    padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) 200px;
  }
  /* in colonna la cuoca non ha un fianco libero dove stare: si mette al centro e
     l'introduzione le lascia sopra tutto lo spazio che le serve */
  .motto__intro{margin-bottom:calc(var(--wp--preset--spacing--60) * 2)}
  /* centrata con left e non con translate: il translate serve all'animazione d'ingresso */
  .motto__figura--sopra{width:132px;top:-140px;left:calc(50% - 66px)}
  /* I due personaggi entrano correndo da fuori: al primo fotogramma stanno a 170% di
     se' stessi, cioe' 269px oltre il bordo dello schermo, e finche' la sezione non e'
     in vista il telefono si fa trascinare di lato su due strisce vuote. Qui la sezione
     taglia: solo in orizzontale, perche' il taglio verticale sforerebbe la cuoca che
     deve spuntare sopra il pannello, e `clip` invece di `hidden` perche' non deve
     nascere un contenitore di scorrimento, solo un limite.
     Sul desktop non si taglia: li' la sezione e' larga 1320 dentro una finestra piu'
     larga, e tagliare mangerebbe la volpe e il razziatore che devono sbordare. */
  .motto{overflow-x:clip}

  /* Le figure sbordano il pannello, non la pagina: il pannello dista 22px dal bordo
     dello schermo, quindi oltre quella misura escono dal viewport e il telefono si fa
     scorrere di lato mostrando due strisce vuote. Il ritaglio che scavalca resta, ma
     scavalca solo quello che deve. */
  .motto__figura--sinistra{width:148px;left:-18px;bottom:-28px}
  .motto__figura--destra{width:168px;right:-18px;bottom:-24px}
}
@media (max-width:640px){
  .giochi{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
  /* in colonna la scheda larga non ha più un fianco dove mettere il pannello: torna
     una scheda come le altre, col pannello in basso */
  .giochi__griglia{grid-template-columns:1fr}
  /* più alta che sul desktop: il pannello occupa quasi tutta la larghezza, quindi
     l'immagine ha bisogno di aria sopra per farsi vedere */
  .scheda,.scheda--larga{
    min-height:540px;align-items:flex-end;justify-content:center;
    padding:var(--wp--preset--spacing--20);
  }
  .scheda__pannello{padding:var(--wp--preset--spacing--20)}
  .scheda__pannello,.scheda--larga .scheda__pannello{max-width:none}
  /* A tutta riga, al testo del bottone resta la larghezza tolte imbottitura e punta: a 360
     pixel «Sub-Zero, dal 15 settembre» andava a capo, e le traduzioni sono più lunghe
     (15/09). L'imbottitura del bottone piccolo gli ridà 16 pixel senza cambiarne l'altezza. */
  .azioni .bottone{width:100%;padding:0 calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) 0 var(--wp--preset--spacing--20)}
  .apertura h1{letter-spacing:-.025em}
  /* il piede va in colonna: prima il marchio, poi i tre elenchi uno sotto l'altro */
  .piede__corpo{
    grid-template-columns:1fr;
    gap:var(--wp--preset--spacing--40);
    padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);
  }
  .piede__legale{
    padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);
  }
}

/* ============================================================
   Adattamenti al markup dei blocchi
   Il prototipo era HTML scritto a mano; WordPress ci mette intorno i suoi
   contenitori. Qui si riconcilia la differenza, senza toccare le regole di
   sopra: quelle restano la verita' del sistema.
   ============================================================ */

/* Il contenuto della pagina non deve aggiungere niente fra una fascia e l'altra:
   il passaggio fra le sezioni lo fa il crinale, non un margine. */
.wp-site-blocks > *,
.wp-block-post-content > *{margin-block-start:0;margin-block-end:0}
.wp-block-post-content{max-width:none}

/* Il menù è un core/navigation, così i soci lo cambiano dalla bacheca. Fuori esce
   <nav><ul><li><a>: la fila la fa la lista, non il <nav>, che deve restare largo
   quanto la fettuccia per centrarcisi dentro. */
.testata__nav > ul{
  display:flex;align-items:center;justify-content:center;
  gap:var(--wp--preset--spacing--30);
  margin:0;padding:0;list-style:none;
}
.testata__nav li{margin:0}
.testata__nav .wp-block-navigation-item__content{
  color:var(--dtg-testo-su-notte);text-decoration:none;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.testata__nav .wp-block-navigation-item__content:hover{
  border-bottom-color:var(--dtg-accento,var(--wp--preset--color--arancio));
}
/* il menù a tendina del blocco non serve e romperebbe la fettuccia */
.testata__nav .wp-block-navigation__responsive-container-open,
.testata__nav .wp-block-navigation__responsive-container-close{display:none}

@media (max-width:860px){
  .testata__nav > ul{
    justify-content:flex-start;
    gap:var(--wp--preset--spacing--20);
    flex-wrap:nowrap;
  }
  .testata__nav .wp-block-navigation-item__content{
    white-space:nowrap;color:var(--dtg-testo);
    display:flex;align-items:center;min-height:44px;
  }
  body.testata-e-ancorata .testata__nav > ul{gap:var(--wp--preset--spacing--20)}
}

/* Le colonne del piede sono liste di blocchi: la lista dentro non deve portarsi
   dietro i pallini né i margini del core. */
.piede__colonna ul{list-style:none;margin:0;padding:0}
.piede__colonna li{margin:0}

/* L'editor mostra i pattern dentro il suo telaio: senza questo, nell'editor la
   pagina si vede stretta e le fasce a tutta larghezza sembrano rotte. */
.editor-styles-wrapper .wp-block-post-content{max-width:none}

/* Le nostre sezioni portano i propri margini, e sono tutti margin-bottom: il blockGap
   del core aggiunge margin-block-start ai fratelli e raddoppierebbe ogni distanza. */
/* anche la testata: al gruppo degli strumenti il blockGap dava 22px di margine sopra,
   e nella riga li portava sotto il centro della fettuccia */
.testata > *,
.apertura > *,
.apertura__testo > *,
.motto > *,
.motto__testo > *,
.giochi > *,
.giochi__intro > *,
.piede__corpo > *,
.piede__colonna > *,
/* La pagina dei giochi: dentro WordPress questi sono blocchi gruppo, e gli stili
   globali infilerebbero un margine fra un figlio e l'altro — che qui vuol dire fra le
   righe del pannello e fra i pezzi del quadro, dove lo spazio lo decidono le regole
   del blocco e non il flusso. */
.cappello__testo > *,
.cappello__note > *,
.mondo > *,
.mondo__quadro > *,
.mondo__pannello > *{margin-block-start:0}

/* ---------- Pagine interne ----------
   Una pagina interna non e' la home: non c'e' niente da pescare e niente da guardare,
   c'e' da leggere. La larghezza serve a due cose sole — una colonna di lettura vera e
   un indice che dica dove si e' — e non a lasciare mezza pagina bianca a destra, che
   e' quello che faceva la versione segnaposto: contenitore da 1320 e paragrafi da 46ch
   ancorati a sinistra, cioe' una striscia di testo con un deserto di fianco.

   La misura non e' una preferenza: sopra i 75 caratteri per riga l'occhio perde la riga
   di ritorno su un testo lungo, e in Rubik 58ch stanno intorno a 72. L'indice occupa il
   posto che avanza invece di lasciarlo vuoto, e la coppia sta al centro della pagina,
   non a filo sinistro. */
.pagina{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);

  --dtg-pagina-indice:16rem;
  --dtg-pagina-testo:58ch;
  /* la larghezza del blocco intero: titolo, soglia e corpo la condividono, cosi' sono
     tutti allineati sullo stesso bordo sinistro senza tre numeri da tenere d'accordo */
  --dtg-pagina-larghezza:calc(var(--dtg-pagina-indice) + var(--wp--preset--spacing--60) + var(--dtg-pagina-testo));
  /* quanto scendere per non finire sotto la fettuccia ancorata, che sta a top:0 */
  --dtg-pagina-scarto:104px;
}

/* Niente occhiello sopra il titolo: e' una regola del sistema, il titolo si regge da
   solo. La misura corta gli impedisce di correre per tutta la larghezza. */
.pagina__testata{
  max-width:var(--dtg-pagina-larghezza);margin:0 auto var(--wp--preset--spacing--30);
}
.pagina__testata .wp-block-post-title{margin:0;max-width:26ch}

/* La soglia dice "qui comincia il testo". E' lo stesso segno del catalogo — la sola
   linea di cresta nel colore del gioco caricato — perche' fra due zone di una pagina
   questo sito non mette mai una riga dritta. */
.pagina__soglia{max-width:var(--dtg-pagina-larghezza);margin-inline:auto}

/* ---------- Corpo: indice a sinistra, testo a destra ---------- */
.pagina__corpo{
  display:grid;
  grid-template-columns:minmax(0,var(--dtg-pagina-indice)) minmax(0,var(--dtg-pagina-testo));
  gap:var(--wp--preset--spacing--60);
  /* le due colonne non si allargano per riempire: la coppia si centra */
  justify-content:center;
  align-items:start;
}

/* L'indice resta fermo mentre il testo scorre: e' l'unica cosa che, in una pagina di
   legge, dice a che punto si e'. */
.pagina__indice{
  position:sticky;top:var(--dtg-pagina-scarto);
  font-size:.9375rem;line-height:1.45;
}
.pagina__indice > summary{
  cursor:pointer;list-style:none;
  font-family:var(--wp--preset--font-family--display);
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dtg-testo-secondario);
  margin-bottom:var(--wp--preset--spacing--20);
}
.pagina__indice > summary::-webkit-details-marker{display:none}
.pagina__indice > summary::marker{content:""}

/* Il filetto verticale e' la stessa idea della soglia messa in piedi: neutro dove non
   sei, nel colore del gioco dove sei. Non e' il bordo colorato di una scheda — non c'e'
   nessuna scheda — e' un righello di posizione. */
.pagina__indice a{
  display:block;padding:.3rem 0 .3rem var(--wp--preset--spacing--20);
  border-left:2px solid var(--wp--preset--color--panna-scura);
  color:var(--dtg-testo-secondario);text-decoration:none;
  transition:color .16s ease,border-color .16s ease;
}
.pagina__indice a:hover{color:var(--dtg-testo);border-left-color:var(--dtg-testo-secondario)}
.pagina__indice a.e-corrente{
  color:var(--dtg-testo);font-weight:500;
  border-left-color:var(--dtg-accento);
}

/* ---------- Il testo ---------- */
.pagina__testo{
  /* i testi migrati contengono URL scritti per esteso: senza questo escono dalla colonna */
  overflow-wrap:anywhere;
}
.pagina__testo p,
.pagina__testo ul,
.pagina__testo ol{margin:0 0 var(--wp--preset--spacing--30)}
.pagina__testo h2{
  font-size:var(--wp--preset--font-size--h-3);
  margin:var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
  /* saltando qui dall'indice, il titolo non deve finire incollato in cima */
  scroll-margin-top:var(--dtg-pagina-scarto);
}
.pagina__testo h3{margin:var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--10)}
.pagina__testo > *:first-child{margin-top:0}
.pagina__testo ul{list-style:disc;padding-left:1.35rem}
.pagina__testo ol{list-style:decimal;padding-left:1.35rem}
.pagina__testo li{margin-bottom:var(--wp--preset--spacing--10)}
.pagina__testo li::marker{color:var(--dtg-testo-secondario)}
.pagina__testo a{text-decoration:underline;text-underline-offset:2px}
/* Nei testi migrati ci sono paragrafi interi in grassetto. Restano enfasi, ma a 700
   una pagina intera urla: 600 la fa sentire senza alzare la voce. */
.pagina__testo strong{font-weight:600}

/* Il frontespizio del documento originale — titolo e riferimenti di legge — non e' il
   corpo del testo: sta sopra, centrato e in secondo piano, come su una copertina. */
.pagina__frontespizio{
  text-align:center;color:var(--dtg-testo-secondario);font-size:.9375rem;
  margin-bottom:var(--wp--preset--spacing--10) !important;
}
.pagina__frontespizio + :not(.pagina__frontespizio){margin-top:var(--wp--preset--spacing--50)}

/* La data di revisione chiude il documento: un filetto e via, non e' un paragrafo. */
.pagina__aggiornato{
  margin-top:var(--wp--preset--spacing--50);
  padding-top:var(--wp--preset--spacing--30);
  border-top:1px solid var(--wp--preset--color--panna-scura);
  color:var(--dtg-testo-secondario);font-size:.9375rem;
}

/* Sotto i 1080 le due colonne non ci stanno: l'indice torna sopra il testo e si
   richiude (lo chiude il JavaScript, vedi pagina.js), col suo bottone a vista. */
@media (max-width:1080px){
  .pagina__corpo{grid-template-columns:minmax(0,1fr);gap:var(--wp--preset--spacing--40)}
  .pagina__testata,
  .pagina__soglia,
  .pagina__corpo{max-width:var(--dtg-pagina-testo)}
  .pagina__indice{
    position:static;
    border:var(--dtg-bordo) solid var(--wp--preset--color--panna-scura);
    border-radius:var(--dtg-raggio-m);
    padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  }
  .pagina__indice > summary{
    margin-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  }
  .pagina__indice[open] > summary{margin-bottom:var(--wp--preset--spacing--20)}
  /* la freccia e' disegnata con due bordi, come quella del selettore di lingua */
  .pagina__indice > summary::after{
    content:"";flex:none;width:.5rem;height:.5rem;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    rotate:45deg;translate:0 -2px;transition:rotate .18s var(--dtg-molla);
  }
  .pagina__indice[open] > summary::after{rotate:225deg;translate:0 2px}
}
@media (max-width:860px){
  .pagina{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
}

/* Il core/navigation manda la lista a capo per conto suo: dentro la fettuccia le voci
   stanno su una riga sola, e la riga la tiene larga il <nav>, non il contenuto. */
.testata__nav > ul{flex-wrap:nowrap;width:100%}
@media (max-width:860px){
  .testata__nav > ul{width:auto}
}

/* Il core/navigation stampa la nostra classe DUE volte: sul <nav> e sulla <ul> che
   ci sta dentro. Le regole di posizione della fettuccia valgono solo per il primo —
   applicate anche alla lista, la staccano dal flusso e la testata si azzera. */
ul.testata__nav{
  position:static;left:auto;right:auto;
  width:100%;
}
/* Il colore delle voci del menu' non cede a nessun selettore: verificato a schermo,
   una regola con la stessa forma ma senza !important non passa, mentre la stessa
   regola con !important passa — e la dichiarazione che vince non e' rintracciabile
   fra quelle servite (il core la genera per il blocco navigazione). Dove il fondo e'
   nero le voci devono essere panna e dove e' carta devono essere inchiostro: sono
   due righe, e questa e' la via onesta per averle. */
.testata nav.testata__nav a,
.testata ul.testata__nav a{color:var(--dtg-testo-su-notte) !important}
@media (max-width:860px){
  /* senza fettuccia il fondo e' carta */
  .testata nav.testata__nav a,
  .testata ul.testata__nav a{color:var(--dtg-testo) !important}
  ul.testata__nav{width:auto}
}

/* ---------- Gli strumenti sulla testa destra della fettuccia ----------
   Lingua e account stanno insieme, dove il nero e' largo. Prima la lingua era da sola
   e si posizionava da se': ora il posto lo tiene il gruppo, e lei ci sta dentro. */
/* Nella riga, non sopra: la testata e' un flex con align-items:center, quindi il
   centro verticale lo da' lei e non c'e' niente da calcolare. Il margine destro porta
   il gruppo dove finisce la fettuccia, che e' la stessa misura che usa la fascia nera
   meno l'imbottitura laterale della testata. */
.testata__strumenti{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:.35rem;
  margin-left:auto;
  margin-right:calc(var(--dtg-banda-fine) - var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}
.testata__strumenti .lingue{position:relative;right:auto;top:auto;translate:none;margin:0}
.testata .wp-block-woocommerce-customer-account{margin:0;font-size:0}
.testata .wc-block-customer-account__link{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--dtg-raggio-s);
  color:var(--dtg-testo-su-notte);
  transition:background-color .18s ease;
}
.testata .wc-block-customer-account__link:hover{background:rgba(243,239,226,.12)}
.testata .wc-block-customer-account__account-icon{width:21px;height:21px;fill:currentColor}
@media (max-width:860px){
  /* senza fettuccia gli strumenti tornano nel flusso, accanto al logo, in inchiostro */
  .testata__strumenti{margin:0 0 0 auto}
  .testata .wc-block-customer-account__link{color:var(--dtg-testo)}
  .testata .wc-block-customer-account__link:hover{background:rgba(20,18,16,.08)}
}

/* ---------- Centratura dentro la fettuccia ----------
   Menu' e strumenti erano posizionati per "posizione statica" e per translate: nel
   prototipo cadevano al centro perche' erano figli diretti del flex, dentro WordPress
   il markup del blocco cambia la loro posizione di partenza e cadono 11 e 22 pixel
   piu' in basso. Qui la centratura non si eredita piu': la scatola assoluta prende
   tutta l'altezza della testata e centra il contenuto per conto suo. */
/* Menu' e strumenti sono figli assoluti di un contenitore flex, e per la specifica
   del flexbox i loro scarti si misurano sul CONTENT box del contenitore — che qui e'
   gia' esattamente la fettuccia, perche' la fascia nera e' l'imbottitura della testata
   tolta da sopra e da sotto. Quindi zero, non l'altezza dell'imbottitura: cosi' la
   scatola coincide con il nero e centrarci dentro vuol dire centrare nel nero, a
   testata intera come ancorata, senza una seconda misura da tenere allineata. */
/* Il menu' resta sopra la riga perche' deve cadere al centro della FETTUCCIA, non a
   meta' fra logo e strumenti. La sua scatola si definisce dal basso e con un'altezza,
   senza toccare `top`: su questo elemento `top` non passa — verificato a schermo, la
   stessa regola muove `bottom` e lascia `top` fermo alla posizione statica. Il blocco
   contenitore parte dal bordo del contenuto e finisce a quello dell'imbottitura,
   quindi togliendo l'imbottitura dalla sua altezza resta esattamente la fascia nera,
   a testata intera come ancorata. */
.testata__nav{
  bottom:var(--dtg-testata-imbottitura);
  /* il 100% si misura sul padding box, quindi l'imbottitura va tolta due volte:
     quello che resta e' la fascia nera, sopra e sotto */
  height:calc(100% - var(--dtg-testata-imbottitura) * 2);
  align-items:center;
}
@media (max-width:860px){
  /* nel flusso non c'e' niente da centrare: comanda la riga */
  .testata__nav{bottom:auto;height:auto}
  .testata__strumenti{margin-right:0}
}

/* ---------- La barra di amministrazione ----------
   Da loggati WordPress mette la sua barra sopra tutto, alta 32px (46 sotto i 782).
   La fettuccia ancorata a top:0 ci finisce sotto e sembra sparita: si abbassa di
   quanto serve. Da sloggati la classe non c'e' e la regola non si applica. */
body.admin-bar.testata-e-ancorata .testata{top:32px}
@media (max-width:782px){
  body.admin-bar.testata-e-ancorata .testata{top:46px}
}

/* ---------- Pagine legali ----------
   Prendono la misura di lettura e il ritmo di .pagina: qui solo le due voci che
   servono a un testo di legge e non servono altrove. */

/* la riga che dice da dove viene il testo, sopra l'estratto */
.pagina__avviso{
  color:var(--dtg-testo-secondario);
  font-size:.9375rem;
  margin-bottom:var(--wp--preset--spacing--40);
}

/* Un segnaposto va visto per quello che e', anche da chi arriva sulla pagina: il
   tratteggio dice "questo non e' finito" senza bisogno di leggerlo. Niente filetto
   colorato di fianco — e' il vezzo che il sistema rifiuta. */
.pagina__segnaposto{
  max-width:56ch;
  background:var(--wp--preset--color--panna);
  border:2px dashed var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-m);
  padding:var(--wp--preset--spacing--30);
}

/* Fuori dalla home non c'e' nessuna striscia sotto la testata: la fettuccia si ferma
   a meta' pagina senza motivo. Fuori dalla home arriva al bordo del contenuto, come
   fa gia' quando e' ancorata. */

/* Il crinale che chiude porta il passaggio nel proprio fondo: sulla home parte dal
   bianco, perche' sopra c'e' il terreno che ci sfuma dentro. Nelle pagine interne
   sopra c'e' la panna, e partire dal bianco lascia una riga netta dove le due tinte
   si toccano — la stessa riga dritta che il crinale esiste per non avere. */
body:not(.home) .crinale--basso{
  background:linear-gradient(180deg,
    var(--wp--preset--color--panna) 0 56%,
    var(--wp--preset--color--notte) 90%);
}

/* ---------- Il menu' sotto gli 860 ----------
   In riga le quattro voci non ci stanno: quella riga scorreva di lato, ma il contenitore
   del menu' non riceve eventi di puntatore (serve sul desktop, dove copre la fettuccia
   e ruberebbe i clic al selettore di lingua) e quindi con un dito non si scorreva e non
   si prendeva niente. Al loro posto un bottone tondo che apre il menu' sotto di se',
   con lo stesso pannello notte del selettore di lingua. */
.menu-tondo{display:none}
/* la parola per chi legge con lo schermo: il bottone e' solo una freccia */
.salta-lettura{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:860px){
  .menu-tondo{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;
    border:0;border-radius:50%;
    background:transparent;color:var(--dtg-testo);
    cursor:pointer;
    transition:background-color .18s ease;
  }
  .menu-tondo:hover{background:rgba(20,18,16,.08)}
  .menu-tondo:focus-visible{outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:2px}
  /* la freccia e' due bordi che ruotano, come quella della lingua */
  .menu-tondo__freccia{
    width:.5rem;height:.5rem;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    rotate:45deg;translate:0 -2px;
    transition:rotate .2s var(--dtg-molla);
  }
  .menu-tondo[aria-expanded="true"] .menu-tondo__freccia{rotate:225deg;translate:0 1px}

  /* Il menu' diventa un pannello sotto la testata, chiuso finche' non lo si apre.
     Il selettore passa dal <nav> e dalla testata perche' il display di questo elemento
     lo decide una regola generata dal core: con la sola classe non passa, come gia'
     visto per il colore delle voci e per il `top`. */
  .testata nav.testata__nav{
    position:absolute;top:100%;right:var(--wp--preset--spacing--30);left:auto;
    z-index:8;min-width:13rem;width:auto;
    margin-top:var(--wp--preset--spacing--10);
    padding:var(--wp--preset--spacing--20);
    background:var(--wp--preset--color--notte);
    border-radius:var(--dtg-raggio-m);
    box-shadow:var(--dtg-ombra-pannello);
    display:none;
    overflow:visible;
    pointer-events:auto;
  }
  .testata.menu-aperto nav.testata__nav{display:block}
  .testata__nav > ul{
    flex-direction:column;align-items:stretch;
    width:auto;gap:0;
  }
  /* dentro il pannello il fondo e' notte, quindi le voci tornano panna */
  .testata nav.testata__nav a,
  .testata ul.testata__nav a{
    color:var(--dtg-testo-su-notte) !important;
    padding:.45rem .55rem;border-bottom:0;
    border-radius:var(--dtg-raggio-xs);
    min-height:44px;
  }
  .testata nav.testata__nav a:hover{background:rgba(243,239,226,.1)}
}

/* ============================================================
   La testata sul telefono — la fettuccia c'e' anche qui
   Prima sotto gli 860 la fascia nera spariva e restava una riga di testo su carta:
   il logo, che e' un blocco nero, rimaneva l'unica cosa scura e sembrava incollato.
   Adesso la fettuccia parte dal logo come sul desktop, alta uguale per tutta la
   lunghezza (a questa misura la strozzatura sarebbe un gradino), e le quattro voci
   scendono da una freccia messa a cavallo del suo bordo basso.
   ============================================================ */
@media (max-width:860px){
  .testata{
    flex-wrap:nowrap;
    gap:0;
    --dtg-testata-imbottitura:var(--wp--preset--spacing--20);
    --dtg-logo-larghezza:120px;
    /* niente striscia sotto: la fascia arriva al bordo del contenuto */
    --dtg-banda-fine:var(--wp--preset--spacing--30);
    padding:var(--dtg-testata-imbottitura) var(--wp--preset--spacing--30);
  }
  /* la fascia torna, e senza strozzatura: a 67px di altezza il tratto stretto
     sarebbe piu' basso delle icone che deve contenere. Parte dal bordo destro del
     logo — l'imbottitura laterale qui e' piu' stretta che sul desktop, e con quella
     del desktop la fascia si staccava dal blocco nero del marchio. */
  .testata::before{
    display:block;
    left:calc(var(--wp--preset--spacing--30) + var(--dtg-logo-larghezza));
    -webkit-mask-image:none;mask-image:none;
    border-radius:0 var(--dtg-raggio-s) var(--dtg-raggio-s) 0;
  }
  /* il gruppo degli strumenti non deve fare da riferimento alla freccia, che va
     centrata sulla testata intera */
  .testata__strumenti{position:static}
  .testata__marchio img{width:var(--dtg-logo-larghezza)}

  /* sul nero gli strumenti tornano chiari */
  .testata__strumenti{margin-left:auto;margin-right:0}
  .testata .wc-block-customer-account__link{color:var(--dtg-testo-su-notte)}
  .testata .wc-block-customer-account__link:hover{background:rgba(243,239,226,.12)}
  .lingue summary{color:var(--dtg-testo-su-notte)}
  .lingue summary:hover{background:rgba(243,239,226,.12)}
  .lingue summary:focus-visible{outline-color:var(--dtg-testo-su-notte)}

  /* La freccia sta a cavallo del bordo basso della fascia: due terzi dentro il nero e
     uno fuori, che e' il gesto del ritaglio che scavalca applicato a un comando.

     L'anello panna non e' un vezzo: senza, la parte dentro la fascia e' nera su nera e
     sparisce — il cerchio sembra appeso sotto invece che seduto sul bordo. L'anello lo
     si vede solo dove c'e' il nero: sotto si confonde con la carta, ed e' giusto cosi'.

     Lo scarto e' legato all'imbottitura della testata, che e' anche l'altezza tolta
     alla fascia: quando la fettuccia si stringe, il bordo si alza e la freccia con lui,
     senza una seconda misura da tenere allineata. */
  .menu-tondo{
    /* Al centro dell'orizzontale e a cavallo del bordo basso della fascia: e' il suo
       posto, ed e' quello che la fa leggere come il comando della testata invece che
       come il quarto di una fila di strumenti. A non finirle sotto ci pensano gli
       strumenti, che si stringono quel tanto che basta a stare tutti alla sua destra. */
    position:absolute;left:50%;translate:-50% 0;
    bottom:calc(var(--dtg-testata-imbottitura) - 10px);
    z-index:3;
    width:30px;height:30px;
    background:var(--wp--preset--color--inchiostro);
    color:var(--dtg-testo-su-notte);
    box-shadow:
      0 0 0 2px var(--wp--preset--color--panna),
      0 6px 12px -6px rgba(20,18,16,.6);
  }
  .menu-tondo:hover{background:var(--wp--preset--color--notte-2)}
  .menu-tondo:focus-visible{outline-color:var(--wp--preset--color--inchiostro);outline-offset:3px}

  /* Le quattro voci in riga sotto la fascia, stesso nero: e' la fettuccia che si
     allunga in giu', non un pannello che arriva da un'altra parte. */
  .testata nav.testata__nav{
    top:100%;left:var(--wp--preset--spacing--30);right:var(--wp--preset--spacing--30);
    margin-top:0;
    min-width:0;
    padding:0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
    background:var(--wp--preset--color--inchiostro);
    border-radius:0 0 var(--dtg-raggio-m) var(--dtg-raggio-m);
    box-shadow:0 14px 24px -14px rgba(20,18,16,.55);
  }
  .testata__nav > ul{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:var(--wp--preset--spacing--10);
    width:100%;
  }
  .testata nav.testata__nav a,
  .testata ul.testata__nav a{
    color:var(--dtg-testo-su-notte) !important;
    font-size:var(--wp--preset--font-size--didascalia);
    white-space:nowrap;
    padding:0 .2rem;min-height:44px;
    border-radius:var(--dtg-raggio-xs);
  }

  /* ancorata: la fascia si stringe e basta, senza carta dietro — sotto ci scorre la
     pagina, come sul desktop */
  body.testata-e-ancorata .testata{
    background:transparent;box-shadow:none;
    --dtg-logo-larghezza:96px;
  }
  body.testata-e-ancorata .testata::before{
    filter:drop-shadow(0 10px 16px rgba(20,18,16,.38));
  }
}

/* ---------- Quattro correzioni sul telefono ---------- */
@media (max-width:860px){
  /* 1. Ancorata, la fascia era alta quanto il logo e basta: due pixel in piu' di logo
        le danno il respiro che le mancava, e il blocco nero del marchio resta saldato
        perche' la fascia si misura su di lui. */
  body.testata-e-ancorata .testata{
    --dtg-logo-larghezza:100px;
    /* ancorata, la regola del desktop portava la fine della fascia a un passo piu'
       largo: sul telefono la fascia si accorciava proprio dove stanno gli strumenti,
       e la freccetta della lingua tornava a sbattere sul bordo */
    --dtg-banda-fine:var(--wp--preset--spacing--30);
  }

  /* 2. Gli strumenti stavano appoggiati al bordo destro della fascia, e la freccetta
        della lingua ci finiva sopra: rientrano di un passo. */
  .testata__strumenti{margin-right:var(--wp--preset--spacing--20)}

  /* 3. Il personaggio non deve mai salire sopra i bottoni.
        Prima la sua altezza veniva dalla larghezza, e con tre ritagli di proporzioni
        diverse chi era piu' slanciato risaliva di 160px e finiva dietro le azioni, che
        gli stanno davanti: si vedeva la meta' di sotto e basta. Adesso la misura parte
        dall'altezza — dalla base della striscia alla cima della scena — quindi il suo
        limite superiore e' la scena, per tutti e tre, qualunque forma abbiano. La
        larghezza viene dietro, e resta piu' larga della striscia: il ritaglio scavalca
        ancora, di lato invece che in alto. */
  .apertura__scena{min-height:520px}
  .apertura__personaggio{
    width:auto;max-width:78%;
    height:calc(100% - var(--dtg-striscia-base));
  }

  /* 4. Sul telefono la nota a mano non c'e', e il pannello della scheda larga teneva
        lo spazio per una freccia e una frase che non arrivano mai: torna al piede
        delle altre due. */
  .scheda--larga .scheda__pannello{padding-bottom:var(--wp--preset--spacing--30)}
}
@media (max-width:640px){
  .scheda--larga .scheda__pannello{padding-bottom:var(--wp--preset--spacing--20)}
}

/* La firma di chi ha fatto il sito: ultima della riga legale, spinta a destra dove
   c'e' spazio suo. In colonna torna in fila con le altre. */
.piede__firma{margin-left:auto}
.piede__legale a{
  color:var(--dtg-testo-su-notte-secondario);
  text-decoration:none;
  border-bottom:1px solid rgba(243,239,226,.28);
  transition:color .18s ease,border-color .18s ease;
}
.piede__legale a:hover{
  color:var(--dtg-testo-su-notte);
  border-bottom-color:var(--dtg-testo-su-notte);
}
@media (max-width:860px){
  .piede__firma{margin-left:0}
}

/* ============================================================
   L'EDITORE — la catena delle mani
   ============================================================
   Un editore non e' una storia, e' una catena: fra l'idea e il tavolo ci sono sei
   passaggi, e questa pagina li mostra tutti invece di raccontare una missione sopra
   una foto di gruppo. La prova non e' il talento — che nessuno puo' verificare — e'
   il tempo speso, che si conta.

   La pagina si legge in tre tempi, e li dice: all'inizio, in mezzo, alla fine.

   In mezzo, ogni passaggio prende una schermata intera: se ne vede uno per volta, con
   il suo personaggio che arriva da fuori e il suo nome scritto a mano. Il filo li
   tiene insieme e si allunga scendendo. Non sono schede: non hanno riquadro, non hanno
   fondo, non hanno icona. Hanno un numero, perche' qui l'ordine e' l'informazione —
   un gioco non si prova prima di averlo prototipato.

   I personaggi vengono da tutti e tre i mondi, non solo da quello pescato: questa e'
   la pagina dell'editore, ed e' l'unico posto insieme al pannello del motto dove i tre
   giochi stanno nella stessa stanza. */

/* ---------- L'insegna ----------
   Come l'apertura della home, la pagina si presenta col gioco pescato: la scena e' del
   titolo che sta colorando tutto il resto, e il suo personaggio la scavalca.

   Sta dentro il contenitore come tutto il resto del sito: qui non c'e' una sola fascia
   a piena finestra, e una di sole qui direbbe che questa pagina e' di un altro sito.
   Quindi non e' una zona ma un oggetto — pannello arrotondato con la sua ombra, la
   stessa grammatica del pannello del motto. Attaccata alla fettuccia, senza carta in
   mezzo: la testata e' nera e l'insegna comincia dove finisce lei. */
.insegna{
  position:relative;
  min-height:clamp(230px,27vw,360px);
  display:flex;align-items:flex-end;
  background:var(--dtg-insegna) center 40%/cover no-repeat var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-l);
  /* Il contenuto sta dentro: quello che serve e' che il personaggio si veda tutto, e
     un ritaglio che sborda sopra finirebbe sotto la fettuccia, che qui passa davanti. */
  overflow:hidden;
  box-shadow:var(--dtg-ombra-pannello);
  margin-bottom:var(--wp--preset--spacing--50);
}
body[data-gioco="yatai"] .insegna{
  --dtg-insegna:url("../img/giochi/yatai-chiosco.webp");
  --dtg-insegna-figura:url("../img/personaggi/yatai-woman-2.webp");
}
body[data-gioco="verrix"] .insegna{
  --dtg-insegna:url("../img/giochi/verrix-tavolo.webp");
  --dtg-insegna-figura:url("../img/personaggi/verrix-artisan-leader.webp");
}
body[data-gioco="sub-zero"] .insegna{
  --dtg-insegna:url("../img/giochi/sub-zero-scena.webp");
  --dtg-insegna-figura:url("../img/personaggi/sub-zero-oca.webp");
}
/* Il velo serve solo a tenere il titolo sopra 4,5:1 su tre fotografie diverse, e non a
   fare atmosfera: e' un'insegna allegra, non una copertina cupa. Sta basso e stretto,
   dietro le due righe del titolo, e lascia la scena in chiaro dappertutto altrove. */
.insegna::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(to top,rgba(20,18,16,.74),rgba(20,18,16,.22) 34%,transparent 62%);
}
/* Il personaggio del gioco pescato sta in piedi dentro l'insegna, a destra, dove il
   titolo non arriva. Arriva salendo da sotto il bordo, come chi entra in scena: e' il
   primo movimento della pagina e non aspetta nessuno, perche' e' gia' in vista. */
.insegna::after{
  content:"";position:absolute;
  right:clamp(12px,4vw,72px);bottom:0;
  width:clamp(150px,20vw,270px);
  height:92%;
  background:var(--dtg-insegna-figura) center bottom/contain no-repeat;
  filter:drop-shadow(0 14px 18px rgba(20,18,16,.42));
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .insegna::after{animation:entra-in-scena .8s var(--dtg-molla) .2s both}
}
@keyframes entra-in-scena{
  from{opacity:0;translate:0 34%}
  to{opacity:1;translate:0 0}
}
.insegna h1{
  position:relative;
  width:100%;
  padding:var(--wp--preset--spacing--40);
  /* il titolo si tiene largo quanto gli serve: a destra c'e' il personaggio */
  max-width:min(60%,20ch);
  color:var(--dtg-testo-su-notte);
  font-size:var(--wp--preset--font-size--h-1);
  font-weight:700;line-height:var(--dtg-claim-interlinea);letter-spacing:-.03em;
}

/* La pagina comincia sotto la testata, non sotto il suo bordo: la fettuccia ha
   z-index 6 e le passa davanti, quindi l'insegna le entra sotto e fra le due non
   resta un filo di carta.

   Quanto in su lo dice la forma della fascia, non il gusto. La fettuccia e' strozzata
   all'altezza delle voci: la sua maschera alza il bordo basso del 26% nel tratto
   centrale, e appoggiarsi al bordo basso della testata lascia scoperta proprio quella
   rientranza — una striscia di carta sotto il menu', che e' l'unico posto dove si
   vede. Quindi si sale dell'imbottitura bassa (dove finisce la fascia) piu' la
   profondita' della strozzatura, con un paio di pixel di margine perche' la curva
   della maschera non e' un gradino.

   Il margine sta sul blocco della pagina, e il selettore e' scritto due volte perche'
   deve battere questa, che il core stampa negli stili globali:

       :root :where(.is-layout-flow) > :first-child{margin-block-start:0}

   Dentro WordPress il contenuto della pagina e' un contenitore a flusso e il nostro
   blocco e' il suo primo figlio, quindi quella regola lo prende in pieno. Pesa due
   classi (`:root` piu' `:first-child`, perche' il `:where` non pesa niente): una
   classe sola non basta, e nemmeno una classe con un discendente. Due classi pareggia,
   e a parita' vince chi arriva dopo — il nostro foglio si carica dopo gli stili
   globali. La seconda riga e' la stessa cosa per il prototipo, dove sopra c'e' il main
   e non il contenuto della pagina. */
.editore{
  max-width:var(--dtg-contenuto);margin-inline:auto;
  padding:0 var(--wp--preset--spacing--40);
}
.wp-block-post-content > .editore,
main > .editore{
  margin-top:calc((var(--wp--preset--spacing--30) + 26px) * -1);
  margin-bottom:0;
}

/* ---------- I tre tempi ----------
   All'inizio, in mezzo, alla fine. Sono la stessa voce che torna tre volte, quindi
   sono lo stesso oggetto tipografico, e la seconda riga prende l'accento come il claim
   della home — l'unico posto dove il testo porta il colore. */
.tempo{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-2);
  font-weight:600;line-height:1.14;letter-spacing:-.02em;
  margin-bottom:var(--wp--preset--spacing--30);
}
.tempo em{
  font-style:normal;display:block;
  color:var(--dtg-accento);
  -webkit-text-stroke:2px var(--wp--preset--color--inchiostro);
  paint-order:stroke fill;
}

/* ---------- L'inizio: la tesi e i tre in faccia ---------- */
.editore__apertura{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--wp--preset--spacing--60);
  align-items:center;
  margin-bottom:var(--wp--preset--spacing--60);
}
.editore__tesi{max-width:24ch}
/* Il tempo di mezzo annuncia la catena: sta al centro, come l'attacco del catalogo. */
.editore__mezzo{
  max-width:24ch;margin-inline:auto;text-align:center;
  margin-bottom:var(--wp--preset--spacing--50);
}
.editore__lede{
  font-size:var(--wp--preset--font-size--lede);
  color:var(--dtg-testo-secondario);
  max-width:46ch;
}

/* ---------- I tre: tre lastre calate come tre carte ----------
   Sono calate come carte da un mazzo, non allineate: e' un editore di giochi da
   tavolo, e tre rettangoli in fila sarebbero la pagina di chiunque altro. Sotto solo
   il nome: chi fa cosa si legge piu' giu', dove c'e' il posto per dirlo davvero. */
.editore__tre{
  display:flex;justify-content:flex-end;
  padding-top:var(--wp--preset--spacing--40);
}
.editore__socio{
  width:clamp(158px,16vw,214px);
  /* si sovrappongono per un dito, non per mezza faccia: devono leggersi come tre
     carte calate una sull'altra, e restare tre facce riconoscibili */
  margin-left:calc(var(--wp--preset--spacing--20) * -1);
  text-align:center;
  transition:rotate .28s var(--dtg-molla),translate .28s var(--dtg-molla);
}
.editore__socio:first-child{margin-left:0}
.editore__socio:nth-child(1){rotate:-4deg;translate:0 10px}
.editore__socio:nth-child(2){rotate:1deg;z-index:1}
.editore__socio:nth-child(3){rotate:5deg;translate:0 14px;z-index:2}
/* Passandoci sopra la carta si raddrizza e sale: e' il gesto di sfilarla dal mazzo
   per guardarla meglio, ed e' l'unica cosa che si puo' fare qui. */
.editore__socio:hover,
.editore__socio:focus-within{rotate:0deg;translate:0 -6px;z-index:3}
.editore__socio img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--dtg-raggio-m);
  background:var(--wp--preset--color--panna-scura);
  box-shadow:var(--dtg-ombra-oggetto);
}
.editore__socio figcaption{
  /* la didascalia sta dritta anche se la carta e' inclinata: un nome storto si legge
     come un vezzo, e questi sono nomi di persone */
  display:block;
  margin-top:var(--wp--preset--spacing--20);
}
.editore__nome{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;line-height:1.3;
  text-wrap:balance;
}

/* ---------- La catena ----------
   Il filo e' la stessa linea di cresta della soglia, messa in piedi: una spezzata di
   tratto, non un tubo pieno e non una riga dritta. Il disegno arriva da una maschera,
   non da un colore stampato dentro l'SVG: cosi' il filo prende l'accento del gioco
   pescato come tutto il resto della pagina, senza tre copie dello stesso file.

   Si costruisce scendendo. L'altezza del tratto la scrive il JavaScript in
   --dtg-catena-tratto man mano che la lettura avanza; senza JavaScript il valore
   resta 100% e la catena c'e' tutta, che e' comunque giusto. */
.catena{
  --dtg-filo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='48' viewBox='0 0 18 48'%3E%3Cpath d='M9 0 L17 12 L1 36 L9 48' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='square'/%3E%3C/svg%3E");
  --dtg-filo-scarto:var(--wp--preset--spacing--50);
  position:relative;
  max-width:1180px;margin:0 auto;
}
.catena::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:18px;height:var(--dtg-catena-tratto,100%);
  background:color-mix(in srgb,var(--dtg-accento) 70%,transparent);
  -webkit-mask:var(--dtg-filo) 0 0/18px 48px repeat-y;
  mask:var(--dtg-filo) 0 0/18px 48px repeat-y;
  pointer-events:none;
}

/* Il testo su un lato, il personaggio sull'altro, il filo che passa fra i due. Si
   alternano: chi legge non deve trovare due volte la stessa pagina.

   L'altezza la fa il contenuto, non la finestra: una schermata intera per passaggio
   lasciava mezzo schermo di carta vuota fra una cosa e l'altra, e sei volte di fila
   e' una pagina che si fa aspettare invece di farsi leggere. */
.catena__anello{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--dtg-filo-scarto) * 2);
  align-items:center;
  padding-bottom:var(--wp--preset--spacing--60);
}
.catena__anello:last-child{padding-bottom:var(--wp--preset--spacing--50)}
.catena__anello:nth-child(even) > .catena__testo{order:2}
.catena__testo{max-width:46ch}
.catena__anello:nth-child(even) > .catena__testo{justify-self:end}
/* Il nodo: un quadrato ruotato, riempito dell'accento del gioco caricato. Sta sul
   filo, all'altezza del titolo del passaggio, che e' dove il passaggio comincia. */
.catena__anello::before{
  content:"";position:absolute;top:3.2rem;left:50%;
  width:14px;height:14px;
  translate:-50% -50%;rotate:45deg;
  background:var(--dtg-accento);
}
/* Il numero non e' un vezzo: la catena e' un ordine, e un gioco non si prova prima di
   averlo prototipato. Sta in linea col titolo, non sopra — un occhiello non lo mette
   nessuna pagina di questo sito — ed e' grande, perche' e' l'insegna del passaggio:
   scendendo si vede prima quello del titolo. */
.catena__titolo{
  display:flex;align-items:baseline;gap:var(--wp--preset--spacing--20);
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  margin-bottom:var(--wp--preset--spacing--30);
}
.catena__numero{
  flex:none;
  font-size:var(--wp--preset--font-size--h-1);
  font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--dtg-accento);
  -webkit-text-stroke:2px var(--wp--preset--color--inchiostro);
  paint-order:stroke fill;
  font-variant-numeric:tabular-nums;
}
.catena__anello p{max-width:46ch;margin-bottom:var(--wp--preset--spacing--20)}
.catena__anello p:last-child{margin-bottom:0}

/* La nota a mano che chiude ogni passaggio. E' la stessa voce fuori campo della home
   — Caveat, inchiostro, mai accento — e vale la stessa regola: dice una cosa che il
   passaggio non ha gia' detto, o non si scrive. Si scrive da sola quando il suo
   passaggio arriva, da sinistra a destra, come la nota della hero. */
.catena__dato{
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  /* la stessa misura della nota della hero: e' la stessa mano, non una seconda */
  font-size:clamp(1.3rem,1rem + .7vw,1.75rem);line-height:1.06;
  color:var(--dtg-testo);
  /* il blocco si stringe sulla riga piu' lunga: il tratto che lo sottolinea e' largo
     quanto lui, e se il blocco restasse largo 26ch il segno finirebbe nel vuoto */
  width:fit-content;max-width:26ch;
  margin-top:var(--wp--preset--spacing--30);
}
/* Il segno sotto la nota: un tratto tirato a mano, non un filetto — ha lo spessore
   disuguale e non e' dritto, perche' e' la stessa penna che ha appena scritto. Parte
   quando la frase e' finita, non insieme: prima si scrive, poi si sottolinea. */
.catena__dato::after{
  content:"";display:block;
  height:9px;margin-top:.35rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='9' viewBox='0 0 240 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6.4 C 46 3.1, 92 7.4, 138 4.2 S 214 5.6, 238 2.8' fill='none' stroke='%23141210' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center/100% 100% no-repeat;
}

/* ---------- Il personaggio del passaggio ----------
   Uno per passaggio, dai tre mondi, e sotto il suo nome scritto a mano: chi e' e da
   che gioco arriva. Senza quel cartellino sarebbe decorazione; con quello e' la
   didascalia di un oggetto vero, ed e' il motivo per cui la figura sta li'. */
.catena__figura{
  position:relative;
  margin:0;
  display:flex;flex-direction:column;align-items:center;
  justify-self:center;
}
.catena__figura img{
  width:auto;max-width:100%;
  /* grande quanto la schermata glielo concede: un passaggio per volta vuol dire che
     la figura e' il soggetto, non una spilletta accanto al testo */
  height:clamp(280px,48vh,540px);
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(20,18,16,.34));
}
.catena__cartellino{
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  /* la mano piccola: e' una didascalia, non un commento, e non deve competere con la
     nota che chiude il passaggio. E' il secondo e ultimo passo di Caveat del sistema. */
  font-size:clamp(1.05rem,.9rem + .45vw,1.35rem);line-height:1.06;
  color:var(--dtg-testo-secondario);
  margin-top:var(--wp--preset--spacing--20);
  text-align:center;
}
/* il gioco da cui arriva prende il colore leggibile del proprio mondo, come i nomi
   dei giochi dentro il testo corrente della home */
.catena__cartellino .gioco{color:var(--dtg-testo-gioco,inherit)}
.catena__figura[data-mondo="yatai"]{--dtg-testo-gioco:var(--dtg-testo-yatai)}
.catena__figura[data-mondo="verrix"]{--dtg-testo-gioco:var(--dtg-testo-verrix)}
.catena__figura[data-mondo="sub-zero"]{--dtg-testo-gioco:var(--dtg-testo-sub-zero)}

/* ---------- La voce di fuori ----------
   L'unica cosa della pagina che non dicono loro, ed e' per questo che vale. E' una
   citazione, quindi la scrive la stessa mano che annota i passaggi: le virgolette a
   caporale dentro un carattere scritto sono due segni per dire la stessa cosa. */
.voce{
  position:relative;
  max-width:26ch;
  margin:var(--wp--preset--spacing--60) auto;
  text-align:center;
}
.voce blockquote{
  margin:0;
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  /* la stessa misura delle note dei passaggi: e' la stessa mano. Qui pesa per dove
     sta — sola, al centro, in una fascia vuota — non perche' e' piu' grande. */
  font-size:clamp(1.3rem,1rem + .7vw,1.75rem);line-height:1.06;
  color:var(--dtg-testo);
  text-wrap:balance;
}
.voce figcaption{
  margin-top:var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  max-width:44ch;margin-inline:auto;
}

/* ---------- I tre, per esteso ----------
   Qui la faccia non e' piu' una carta: e' una persona con un mestiere. Si alterna di
   lato perche' tre blocchi identici in colonna sarebbero le schede che questo sistema
   rifiuta. */
.soci{
  max-width:960px;margin:0 auto var(--wp--preset--spacing--60);
}
.soci > h2{
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  text-align:center;margin-bottom:var(--wp--preset--spacing--50);
}
.socio{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:var(--wp--preset--spacing--40);
  align-items:center;
  margin-bottom:var(--wp--preset--spacing--50);
}
.socio:last-child{margin-bottom:0}
/* Il secondo si specchia. Si contano gli articoli, non i figli: sopra c'e' un titolo,
   e con nth-child sarebbe lui il primo. E la colonna stretta si sposta insieme al
   ritratto — spostare solo l'ordine lascerebbe la foto nella colonna larga. */
.socio:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,240px)}
.socio:nth-of-type(even) > .socio__ritratto{order:2}
.socio__ritratto{
  margin:0;
  border-radius:var(--dtg-raggio-m);
  overflow:hidden;
  box-shadow:var(--dtg-ombra-oggetto);
}
.socio__ritratto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.socio__nome{
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  margin-bottom:.15rem;
}
/* Il mestiere e' un dato, non un grado: maiuscoletto spaziato, come le incisioni. */
.socio__mestiere{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dtg-testo-secondario);
  margin-bottom:var(--wp--preset--spacing--20);
}
.socio p{max-width:52ch;margin-bottom:var(--wp--preset--spacing--20)}
/* La sua frase, detta da lui. Niente filetto colorato di fianco — e' il vezzo che il
   sistema rifiuta: la citazione si riconosce dal corsivo, dalle virgolette e dal
   rientro, che sono i tre modi in cui la carta stampata lo ha sempre fatto. */
.socio blockquote{
  margin:var(--wp--preset--spacing--20) 0 0 var(--wp--preset--spacing--30);
  font-style:italic;
  color:var(--dtg-testo-secondario);
  max-width:48ch;
  text-indent:calc(var(--wp--preset--spacing--20) * -1);
}

/* ---------- Il tavolo: dove finisce la catena ----------
   L'ultimo tempo non e' un passaggio, e' l'uscita. Le tre scatole scavalcano il bordo
   alto del pannello di carta, come nel catalogo: e' il gesto del sito applicato alla
   cosa che si vende, ed e' l'ultima immagine prima del piede. */
.tavolo{
  position:relative;
  max-width:var(--dtg-contenuto);
  margin:0 auto var(--wp--preset--spacing--60);
  padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) 0;
}
.tavolo__pannello{
  position:relative;
  max-width:840px;margin:0 auto;
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  box-shadow:var(--dtg-ombra-pannello);
  /* l'imbottitura alta lascia il posto alle scatole che sbordano dal bordo */
  padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  text-align:center;
}
.tavolo__scatole{
  position:absolute;top:0;left:50%;translate:-50% -52%;
  display:flex;align-items:flex-end;justify-content:center;
  gap:var(--wp--preset--spacing--30);
  width:100%;
  pointer-events:none;
}
/* Stessa altezza, non stessa larghezza: sono oggetti della stessa famiglia messi in
   fila su uno scaffale, e su uno scaffale e' l'altezza a dirlo. */
.tavolo__scatole img{
  height:clamp(96px,11vw,150px);width:auto;max-width:none;
  filter:drop-shadow(0 18px 20px rgba(20,18,16,.34));
}
.tavolo .tempo{margin-bottom:var(--wp--preset--spacing--20)}
.tavolo p{
  color:var(--dtg-testo-secondario);
  max-width:46ch;margin:0 auto var(--wp--preset--spacing--40);
}

/* ---------- Adattamento ----------
   Sotto i 1080 il passaggio non ha due lati: il filo va a sinistra, il personaggio
   sopra il testo, e la schermata intera lascia il posto all'altezza che serve — una
   pagina di telefono e' gia' una cosa per volta. */
@media (max-width:1080px){
  .editore__apertura{grid-template-columns:minmax(0,1fr);gap:var(--wp--preset--spacing--40)}
  .editore__tre{justify-content:flex-start;padding-top:0}
  .editore__socio{width:clamp(140px,22vw,190px)}

  .catena{--dtg-filo-scarto:var(--wp--preset--spacing--40)}
  .catena::before{left:6px;translate:none}
  .catena__anello{
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    gap:var(--wp--preset--spacing--40);
    /* Fra un passaggio e l'altro si sommavano due passi da 3,5rem: 112px di carta fra
       un personaggio e il numero del passaggio dopo, che su una colonna sola e' un buco
       e non un respiro. Adesso sono 50 — un passo e mezzo — e la catena si legge come
       una sequenza invece che come sei blocchi lontani. */
    padding:var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  }
  /* In colonna il TESTO viene prima e il personaggio dopo. Decisione di Gianluca
     dell'11/08, e ribalta quello che c'era: il personaggio annunciava il passaggio, ma
     su uno schermo alto e stretto annunciare vuol dire far scorrere — si arrivava a una
     figura senza sapere di che passaggio fosse, e il numero col titolo stavano sotto.
     Il numero e il titolo aprono il passaggio, la figura lo chiude entrando. */
  .catena__anello > .catena__figura{order:0}
  .catena__anello:nth-child(even) > .catena__testo{order:0;justify-self:stretch}
  .catena__anello::before{
    top:var(--wp--preset--spacing--40);left:0;translate:-50% 0;
  }
  /* Il personaggio arriva al CENTRO della colonna, non appoggiato a sinistra: in fila
     verticale e' un oggetto su una riga sua, e appoggiato a un lato sembra un rientro
     sbagliato invece di una scelta. L'ingresso non cambia — la corsa finisce comunque a
     `translate:0`, quindi si ferma dove il layout lo mette. */
  .catena__figura{justify-self:center}
  .catena__figura img{height:clamp(200px,30vh,300px)}
}
@media (max-width:860px){
  .editore{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
  .insegna h1{padding:var(--wp--preset--spacing--30);max-width:none}
  /* sul telefono il personaggio dell'insegna ruberebbe le due righe del titolo */
  .insegna::after{width:clamp(112px,32vw,150px);right:8px}
  .insegna::before{background:linear-gradient(to top,rgba(20,18,16,.8),rgba(20,18,16,.3) 46%,rgba(20,18,16,.06))}
  .tavolo{padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30)}
  .editore__tesi{max-width:none}
  /* il mazzo si stringe ma resta un mazzo: sono tre e devono starci in riga */
  .editore__socio{width:clamp(112px,30vw,150px);margin-left:calc(var(--wp--preset--spacing--20) * -1)}
  /* la scheda del socio va in colonna, e il ritratto torna sempre sopra: alternare
     l'ordine su una colonna sola non alterna niente, sposta solo la foto in fondo */
  .socio,
  .socio:nth-of-type(even){grid-template-columns:minmax(0,1fr)}
  .socio:nth-of-type(even) > .socio__ritratto{order:0}
  /* Il ritratto sta al centro della colonna, non appoggiato a sinistra: da solo su una
     riga sua e' un oggetto, e un oggetto piu' stretto della colonna appoggiato a un lato
     sembra un rientro sbagliato. Con lui vanno al centro il nome e il mestiere, che sono
     la sua didascalia — il testo del socio resta a bandiera, che si legge. */
  .socio__ritratto{max-width:240px;margin-inline:auto}
  .socio__nome,
  .socio__mestiere{text-align:center}
  .tavolo__pannello{padding-top:var(--wp--preset--spacing--50)}
  .tavolo__scatole{translate:-50% -46%}
}

/* Il movimento e' quello del resto del sito: le cose stanno ferme al primo fotogramma
   e partono quando si arriva dove vivono. Non e' un terzo tempo, e' l'arrivo. */
@media (prefers-reduced-motion:no-preference){
  .editore__socio{animation:emerge .7s var(--dtg-molla) both}
  .editore__socio:nth-child(1){animation-delay:.06s}
  .editore__socio:nth-child(2){animation-delay:.14s}
  .editore__socio:nth-child(3){animation-delay:.22s}

  /* l'inizio si compone come l'apertura della home: prima la voce, poi la frase */
  .editore__dire > *{animation:emerge .7s var(--dtg-molla) both}
  .editore__dire > *:nth-child(1){animation-delay:.04s}
  .editore__dire > *:nth-child(2){animation-delay:.14s}

  /* Il passaggio si compone in ordine di lettura, non tutto insieme: prima il titolo
     col suo numero, poi il testo, poi il personaggio col suo cartellino. Ogni cosa
     aspetta la precedente perche' e' cosi' che la si legge. */
  .catena__testo > *{animation:emerge .6s var(--dtg-molla) both}
  .catena__testo > *:nth-child(1){animation-delay:.04s}
  .catena__testo > *:nth-child(2){animation-delay:.20s}
  .catena__testo > *:nth-child(3){animation-delay:.34s}
  .catena__testo > *:nth-child(4){animation-delay:.48s}
  /* Il numero arriva grande e si mette al suo posto rimpicciolendosi: e' l'insegna del
     passaggio, e per un istante occupa piu' spazio di quello che gli spetta. */
  .catena__numero{animation:arriva-grande .62s var(--dtg-molla) both}
  /* La nota non fa parte della composizione: arriva quando il passaggio e' stato
     letto. Due secondi e mezzo non sono un'attesa, sono il tempo di leggere il
     paragrafo — e a quel punto la frase scritta a mano non ripete quello che c'e'
     scritto, lo commenta. Poi, finita la frase, parte il tratto che la sottolinea. */
  .catena__dato{animation:scrivi 1s ease-out 2.5s both}
  .catena__dato::after{animation:scrivi .5s ease-out 3.6s both}
  /* Il personaggio entra di corsa dal proprio lato come i due del pannello del motto,
     e si assesta: arriva storto e si raddrizza, che e' come si appoggia una pedina.

     I tempi stanno in proprieta' separate e le due regole di lato cambiano solo il
     nome: con la scorciatoia `animation` la regola piu' specifica rimetteva in marcia
     il fermo di .con-js, e il personaggio faceva la sua corsa mentre era ancora fuori
     schermo — arrivavi e lo trovavi gia' seduto. */
  .catena__figura img{
    animation-duration:.78s;
    animation-timing-function:var(--dtg-molla);
    animation-delay:.62s;
    animation-fill-mode:both;
  }
  .catena__anello:nth-child(odd) .catena__figura img{animation-name:entra-da-destra}
  .catena__anello:nth-child(even) .catena__figura img{animation-name:entra-da-sinistra}
  /* il cartellino si scrive quando il personaggio si e' fermato, non mentre corre */
  .catena__cartellino{animation:scrivi .7s ease-out 1.34s both}

  .voce blockquote{animation:scrivi 1.1s ease-out both}
  .voce figcaption{animation:emerge .6s var(--dtg-molla) .5s both}

  /* I tre tempi arrivano come i numeri: grandi, e poi al loro posto. Sono la stessa
     voce che torna, quindi si muovono nello stesso modo.

     Qui pero' l'animazione non si mette in pausa, si aggiunge: ferma al primo
     fotogramma la scritta resterebbe larga tre volte e mezzo il suo posto, e su un
     telefono da 390 sono 877 pixel di ingombro invisibile che sfondano la pagina di
     lato. Prima dell'arrivo e' solo trasparente, delle sue misure. */
  .con-js .tempo{opacity:0}
  .con-js .tempo.e-arrivato{opacity:1;animation:arriva-grande .68s var(--dtg-molla) both}
  html:not(.con-js) .tempo{animation:arriva-grande .68s var(--dtg-molla) both}

  .socio{animation:emerge .6s var(--dtg-molla) both}

  /* Lo `*` non prende gli pseudo-elementi: il tratto sotto la nota va fermato per
     nome, o partirebbe al caricamento mentre il suo passaggio e' ancora sotto la
     piega — e chi arriva lo troverebbe gia' tirato. */
  .con-js .catena__anello *,
  .con-js .catena__dato::after,
  .con-js .socio,
  .con-js .voce blockquote,
  .con-js .voce figcaption{animation-play-state:paused}
  .con-js .catena__anello.e-arrivato *,
  .con-js .catena__anello.e-arrivato .catena__dato::after,
  .con-js .socio.e-arrivato,
  .con-js .voce.e-arrivato blockquote,
  .con-js .voce.e-arrivato figcaption{animation-play-state:running}
}

/* Arriva grande e si mette al suo posto: parte al triplo dal proprio centro e ci
   ricasca dentro. Non e' un ingrandimento — e' una cosa che si posa, e la molla del
   sistema le da' l'ultimo mezzo passo. Scala e opacita', niente altro: si dipinge
   sulla scheda grafica e non fa muovere una riga di testo attorno. */
@keyframes arriva-grande{
  from{scale:3.2;opacity:0}
  to{scale:1;opacity:1}
}
/* Entra di corsa dal proprio lato e si raddrizza, come una pedina appoggiata storta e
   poi rimessa dritta. Rotate e translate sono proprieta' indipendenti, non transform:
   cosi' non litigano con altre trasformazioni sullo stesso elemento. */
@keyframes entra-da-destra{
  from{opacity:0;translate:38% 0;rotate:6deg}
  60%{opacity:1}
  to{opacity:1;translate:0 0;rotate:0deg}
}
@keyframes entra-da-sinistra{
  from{opacity:0;translate:-38% 0;rotate:-6deg}
  60%{opacity:1}
  to{opacity:1;translate:0 0;rotate:0deg}
}

/* ============================================================
   La pagina dei giochi — /giochi/
   Un bivio: tre mondi, una schermata per uno, e una barra che compra quello che stai
   guardando. Il cappello sta sulla carta dell'editore; da lì in giù ogni sezione
   ridichiara il proprio accento e se lo porta dietro su crinale, terreno, filetto e
   targhetta — le stesse variabili che usano le schede del catalogo in home.
   ============================================================ */

:root{
  /* Altezza della barra d'acquisto. Serve in tre posti — l'imbottitura bassa delle
     sezioni, lo scroll-padding e la barra stessa — e vale una variabile sola. */
  --dtg-barra-h:78px;
}

/* Saltando a un'ancora la fettuccia ancorata coprirebbe la prima riga; in fondo la
   barra coprirebbe l'ultima. La pagina si ferma prima da tutte e due le parti. */
.giochi-pagina{scroll-padding-top:96px;scroll-padding-bottom:calc(var(--dtg-barra-h) + 1rem)}

/* ---------- L'insegna e il cappello ----------
   L'involucro fa quello che fa `.editore` sulla pagina dell'editore: tiene la coppia
   dentro il contenitore del sito e la fa salire sotto la fettuccia, che le passa
   davanti — cosi' fra la fascia e l'insegna non resta un filo di carta. Il selettore e'
   scritto due volte perche' deve battere `:root :where(.is-layout-flow) > :first-child`
   degli stili globali, che pesa due classi: una sola non basta. */
.giochi__testa{
  max-width:var(--dtg-contenuto);margin-inline:auto;
  padding:0 var(--wp--preset--spacing--40);
}
.wp-block-post-content > .giochi__testa,
main > .giochi__testa{
  margin-top:calc((var(--wp--preset--spacing--30) + 26px) * -1);
  margin-bottom:0;
}
.cappello{
  position:relative;z-index:1;
  padding:var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
}
.cappello__testo{max-width:62ch}
/* Sopra i 1080 il secondo e il terzo paragrafo si mettono di fianco al primo invece che
   sotto: sono due note che spiegano il titolo, e in colonna unica lasciavano mezza
   pagina bianca a destra — lo stesso difetto che le pagine interne hanno già corretto. */
@media (min-width:1081px){
  .cappello__testo{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    column-gap:var(--wp--preset--spacing--50);
    align-items:start;
  }
  .cappello .tempo{grid-column:1 / -1;max-width:30ch}
  .cappello__lede{margin-bottom:0}
  /* Le due note stanno in un blocco solo, o la griglia le separerebbe in due righe
     alte quanto il sommario di fianco e fra loro resterebbe una voragine. */
  .cappello__note{grid-column:2}
  .cappello__patto,
  .cappello__scarto{max-width:44ch}
  .cappello__scarto{margin-bottom:0}
}
.cappello__lede{
  font-size:var(--wp--preset--font-size--lede);
  max-width:52ch;margin-bottom:var(--wp--preset--spacing--30);
}
.cappello__patto,
.cappello__scarto{
  color:var(--dtg-testo-secondario);max-width:56ch;
  margin-bottom:var(--wp--preset--spacing--20);
}
/* L'iscrizione latina è un'incisione, non una citazione: maiuscoletto spaziato. */
.cappello__latino{
  font-variant-caps:all-small-caps;letter-spacing:.14em;font-weight:500;
  color:var(--dtg-testo);
}

/* Le tre voci: chi sa già cosa cerca salta lì. Il filetto sopra è il righello di
   posizione del sistema messo in orizzontale — non è il bordo colorato di una scheda,
   perché qui non c'è nessuna scheda: solo un nome, una riga e un colore. */
.cappello__indice{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--wp--preset--spacing--30);
  margin-top:var(--wp--preset--spacing--50);
}
.cappello__indice a{
  position:relative;display:block;text-decoration:none;
  padding-top:var(--wp--preset--spacing--20);
  transition:transform .22s var(--dtg-molla);
}
/* Il filetto è un elemento suo e non un bordo: solo così può essere tirato da sinistra
   quando la pagina arriva, invece di essere già lì. */
.cappello__indice a::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--dtg-accento-voce);
  transform-origin:left center;
}
.cappello__indice a:hover{transform:translateY(-2px)}
.cappello__indice a[data-mondo="verrix"]{--dtg-accento-voce:var(--wp--preset--color--verde);--dtg-testo-voce:var(--dtg-testo-verrix)}
.cappello__indice a[data-mondo="yatai"]{--dtg-accento-voce:var(--wp--preset--color--arancio);--dtg-testo-voce:var(--dtg-testo-yatai)}
.cappello__indice a[data-mondo="sub-zero"]{--dtg-accento-voce:var(--wp--preset--color--ghiaccio-vivo);--dtg-testo-voce:var(--dtg-testo-sub-zero)}
.cappello__nome{
  display:block;font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  color:var(--dtg-testo-voce);
}
.cappello__come{display:block;color:var(--dtg-testo-secondario);font-size:var(--wp--preset--font-size--didascalia)}

/* ---------- Una schermata per gioco ---------- */
.mondo{
  --dtg-prima:var(--wp--preset--color--bianco);
  /* Il terreno si RICALCOLA qui. Sta scritto sul body, dove usa l'accento del gioco
     pescato: ridichiarare solo l'accento sulla sezione non lo tocca, perche' una
     proprieta' personalizzata sostituisce i suoi `var()` dove e' dichiarata, non dove
     e' letta. Senza questa riga il fondo di Verrix prendeva la tinta del gioco pescato
     invece della propria — a otto per cento non si grida, ma e' sbagliato, e su una
     pagina il cui argomento e' che i tre mondi hanno colori diversi e' il difetto che
     conta di piu'. */
  --dtg-terreno:color-mix(in srgb,var(--dtg-accento) 8%,var(--wp--preset--color--panna));
  position:relative;
  display:flex;flex-direction:column;
  min-height:100svh;
  margin:0;
  background:linear-gradient(180deg,var(--dtg-terreno) 0%,var(--wp--preset--color--bianco) 46%);
}
/* Il primo crinale arriva dalla carta del cappello, non dal bianco: sopra di lui c'è la
   panna dell'editore. Gli altri due arrivano dal bianco in cui sfuma il mondo
   precedente, che è esattamente come funziona già la home. */
.crinale--primo{--dtg-prima:var(--wp--preset--color--panna)}
.mondo--verrix{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
  --dtg-testo-mondo:var(--dtg-testo-verrix);
}
.mondo--yatai{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
  --dtg-testo-mondo:var(--dtg-testo-yatai);
}
.mondo--sub-zero{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
  --dtg-testo-mondo:var(--dtg-testo-sub-zero);
}
/* Stesso crinale della home senza la salita dentro la hero: qui non deve passare dietro
   nessuna striscia, deve solo portare il fondo da un mondo all'altro dentro il proprio
   riempimento. Fra due zone di questa pagina non c'è mai una riga dritta. */
.crinale--mondo{
  flex:none;
  background:linear-gradient(180deg,var(--dtg-prima) 0 58%,var(--dtg-terreno) 92%);
}

.mondo__quadro{
  flex:1;position:relative;
  /* Il contenuto sta nello stesso contenitore di tutto il resto del sito e non esce mai
     dai suoi margini: una fascia più larga delle altre pagine racconterebbe che questa
     è di un altro sito. La schermata resta piena — è la sezione a essere alta una
     finestra, non il quadro a essere largo quanto lo schermo. */
  max-width:var(--dtg-contenuto);
  margin-inline:auto;
  padding-inline:var(--wp--preset--spacing--40);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-content:center;
  /* L'imbottitura bassa fa due mestieri con una misura sola: tiene la targhetta della
     sezione fuori da sotto la barra, e sposta la composizione sopra la metà dello
     schermo — che è dove il personaggio deve trovarsi quando comincia a salire. */
  padding-block:var(--wp--preset--spacing--40) calc(var(--dtg-barra-h) + var(--wp--preset--spacing--50));
}

/* La scena è l'immagine del gioco: è la scheda del catalogo ingrandita, con la carta
   sopra invece che accanto. Arrotondata su tutti e quattro gli angoli, perché adesso è
   un quadro appoggiato dentro la pagina e non una fascia che ne esce. */
.mondo__scena{
  grid-row:1;grid-column:2;
  margin:0;position:relative;
  border-radius:var(--dtg-raggio-l);
  overflow:hidden;
  box-shadow:var(--dtg-ombra-pannello);
}
.mondo--rovescio .mondo__scena{grid-column:1}
/* La scena si allunga fino all'altezza del pannello e l'immagine la riempie: senza,
   sotto la foto restava una striscia bianca dentro il riquadro arrotondato ogni volta
   che la carta era più alta di lei. L'altezza dichiarata resta come minimo, così è la
   foto a dare la misura quando il testo è poco. */
.mondo__scena{align-self:stretch}
.mondo__scena img{
  width:100%;height:100%;
  min-height:var(--dtg-scena-h,clamp(280px,50svh,520px));
  object-fit:cover;
}
.mondo--verrix .mondo__scena img{object-position:50% 40%}
/* La foto di Yatai ha una cuoca in primissimo piano a sinistra: al taglio largo si
   mangiava mezza scena, e accanto allo chef ritagliato erano due cuochi vicini. Il
   ritaglio si sposta sul chiosco, che è quello che il gioco vende. */
.mondo--yatai .mondo__scena img{object-position:70% 45%}
.mondo--sub-zero .mondo__scena img{object-position:30% 40%}

/* Il pannello di carta scavalca il bordo della scena: è lo stesso gesto delle schede in
   home, dove la carta sta sopra l'immagine e non di fianco. */
.mondo__pannello{
  /* La gola: il tratto di carta che il ritaglio si prende scavalcando il bordo. Il
     pannello se la riserva dal lato da cui arriva la figura, o le righe le finirebbero
     sotto — e una figura che copre il prezzo non è un ritaglio che scavalca, è un
     errore di impaginazione. */
  --dtg-gola:6rem;
  grid-row:1;grid-column:1;z-index:2;
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  padding:var(--wp--preset--spacing--40);
  padding-right:calc(var(--wp--preset--spacing--40) + var(--dtg-gola));
  margin-right:calc(-1 * var(--wp--preset--spacing--50));
  box-shadow:var(--dtg-ombra-pannello);
}
.mondo--rovescio .mondo__pannello{
  grid-column:2;
  margin-right:0;margin-left:calc(-1 * var(--wp--preset--spacing--50));
  padding-right:var(--wp--preset--spacing--40);
  padding-left:calc(var(--wp--preset--spacing--40) + var(--dtg-gola));
}
.mondo__pannello h2{
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  color:var(--dtg-testo-mondo);
  margin-bottom:var(--wp--preset--spacing--20);
}
/* L'anno sta in linea col nome, non sopra: un occhiello sopra un titolo qui non esiste. */
.mondo__anno{
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--didascalia);font-weight:500;
  letter-spacing:.08em;color:var(--dtg-testo-secondario);
  vertical-align:.55em;margin-left:.5rem;
}
.mondo__frase{max-width:46ch;margin-bottom:var(--wp--preset--spacing--30)}
.mondo__dati{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.4rem var(--wp--preset--spacing--20);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-bottom:var(--wp--preset--spacing--20);
}
/* Separatori tinti dal fondo, mai grigio neutro. */
.mondo__dati li + li{padding-left:var(--wp--preset--spacing--20);border-left:1px solid var(--wp--preset--color--panna-scura)}
/* Il prezzo resta in fila con gli altri dati, col suo filetto: spinto a destra finiva
   sotto la figura, ed è l'unico numero che non deve mai coprirsi. Lo distingue il
   corpo, che è quello del display, non la posizione. */
.mondo__dati .prezzo{color:var(--dtg-testo);border-left:0;padding-left:0}
/* Dove il prezzo non c'è ancora, al suo posto va la data: occupa lo stesso ruolo senza
   promettere un acquisto, ed è la stessa regola della scheda in campagna sulla home.
   Non prende il corpo del display — un prezzo si scandaglia, una data si legge. */
.mondo__dati .mondo__quando-dato{
  color:var(--dtg-testo);font-weight:500;
  border-left:0;padding-left:0;
}
.mondo__lingue,
.mondo__quando{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);max-width:46ch;
  margin-bottom:var(--wp--preset--spacing--20);
}
.mondo__quando strong{color:var(--dtg-testo);font-weight:500}
.mondo__azione{margin:var(--wp--preset--spacing--30) 0}
.mondo__crediti{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  padding-top:var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--panna-scura);
}

/* Il ritaglio che scavalca. Sta sulla cucitura fra la carta e la scena e la taglia:
   l'ombra segue la sagoma, non il rettangolo. Cade in fondo alla riga, così i piedi
   appoggiano sul bordo basso della scena invece di galleggiare. */
.mondo__figura{
  grid-row:1;z-index:3;
  align-self:end;justify-self:start;
  width:auto;height:clamp(240px,46svh,520px);
  pointer-events:none;
  filter:drop-shadow(0 24px 26px rgba(20,18,16,.34));
}
/* Lo scostamento è tarato sulla gola, non a occhio: la figura deve entrare nella carta
   meno di quanto la carta le ha lasciato libero, o la lancia finisce sul testo. */
.mondo--verrix .mondo__figura{grid-column:2;translate:-32% 6%}
.mondo--sub-zero .mondo__figura{grid-column:2;translate:-30% 4%}
.mondo--rovescio .mondo__figura{
  grid-column:1;justify-self:end;translate:32% 4%;
}

/* ---------- La barra d'acquisto ---------- */
/* È la fettuccia della testata rovesciata in fondo: stesso inchiostro, stessa ombra
   sulla sagoma, e sopra il filetto col colore del gioco attivo. Non è un secondo fondo
   scuro inventato — è la stessa fascia, dall'altro capo dello schermo. */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--wp--preset--color--inchiostro);
  color:var(--dtg-testo-su-notte);
  border-top:4px solid var(--dtg-accento,var(--wp--preset--color--arancio));
  filter:drop-shadow(0 -10px 22px rgba(20,18,16,.34));
}
.barra[hidden]{display:none}
/* La barra sta fuori dalle sezioni, quindi l'accento non le arriva per cascata: se lo
   prende dall'attributo che le mette il JS. Sono le stesse tre terne di sempre — il
   filetto in alto, il prezzo e la targhetta cambiano insieme, o non cambia niente. */
.barra[data-mondo="verrix"]{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
}
.barra[data-mondo="yatai"]{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
}
.barra[data-mondo="sub-zero"]{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
}
/* Il colore non salta da una terna all'altra di scatto: ci mette lo stesso tempo del
   testo, e il passaggio fra due mondi si legge come un cambio di stato. */
/* Il colore non salta da una terna all'altra di scatto: filetto e prezzo ci mettono lo
   stesso tempo del testo, e il passaggio fra due mondi si legge come un cambio di stato
   invece che come un lampeggio. La rampa della targhetta e' un gradiente e non si puo'
   interpolare: quella cambia in un fotogramma, ed e' un cambio piccolo. */
@media (prefers-reduced-motion:no-preference){
  .barra{transition:border-color .26s ease,translate .34s var(--dtg-molla),visibility 0s linear 0s}
  .barra--via{transition:border-color .26s ease,translate .34s var(--dtg-molla),visibility 0s linear .34s}
  .barra__prezzo{transition:color .26s ease}
}
/* Via dallo schermo: scende sotto il bordo e smette di esistere per la tastiera —
   l'attributo inert lo mette il JS, così non resta un bottone invisibile da tabbare. */
.barra--via{translate:0 100%;visibility:hidden}
.barra__corpo{
  max-width:var(--dtg-contenuto);margin:0 auto;
  min-height:var(--dtg-barra-h);
  padding:var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
  display:flex;align-items:center;gap:var(--wp--preset--spacing--30);
}
.barra__chi{
  display:flex;align-items:baseline;gap:var(--wp--preset--spacing--20);
  min-width:0;
}
.barra__nome{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-4);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;
}
.barra__prezzo{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.375rem;font-weight:600;color:var(--dtg-accento-alto);
  white-space:nowrap;
}
/* In campagna quel posto lo occupa la data, non un numero: stesso ruolo, senza
   promettere un acquisto. Torna al carattere del testo, perché una data si legge. */
.barra--in-campagna .barra__prezzo{
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--corpo);font-weight:500;
}
/* Le due edizioni di Verrix: senza sceglierne una WooCommerce non aggiunge niente. Sono
   due interruttori, non due bottoni — il bottone della barra resta uno solo. */
.barra__edizione{border:0;margin:0;padding:0;display:flex;gap:.35rem}
.barra__edizione[hidden]{display:none}
.barra__edizione label{position:relative;display:block}
.barra__edizione input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.barra__edizione span{
  display:block;padding:.5rem .8rem;border-radius:var(--dtg-raggio-s);
  border:2px solid rgba(243,239,226,.34);
  font-size:var(--wp--preset--font-size--didascalia);font-weight:500;letter-spacing:.06em;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.barra__edizione input:checked + span{
  background:var(--dtg-accento);border-color:var(--dtg-accento);
  color:var(--wp--preset--color--inchiostro);
}
.barra__edizione input:focus-visible + span{outline:3px solid var(--dtg-testo-su-notte);outline-offset:2px}

/* L'esito sta PRIMA del bottone anche se nel markup viene dopo: si legge accanto al
   gioco a cui si riferisce, non in coda all'azione che l'ha prodotto. Nel documento
   resta in fondo perché è una regione di stato, e va annunciata dopo il comando. */
.barra__esito{order:2}
.barra__compra,
.barra__campagna{order:3;margin-left:auto;flex:none}
.barra__compra[hidden],
.barra__campagna[hidden]{display:none}
.barra .bottone[disabled]{background:rgba(243,239,226,.16);color:var(--dtg-testo-su-notte-secondario)}

/* L'esito dell'aggiunta. Non è un avviso che scompare da solo senza dire niente: resta
   finché non si cambia gioco, e in errore dice il problema e la via d'uscita. */
.barra__esito{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-su-notte-secondario);
  max-width:26ch;
}
.barra__esito:empty{display:none}
/* Fatto ed errore prendono tutti e due il testo pieno, non due tinte diverse: il
   sistema non ha un colore d'errore, e inventarne uno qui vorrebbe dire affidare a una
   sfumatura di arancio un'informazione che deve arrivare comunque. A dire quale dei due
   è ci pensano le parole e il bottone, che in errore resta spento. */
.barra__esito[data-stato="fatto"],
.barra__esito[data-stato="errore"]{color:var(--dtg-testo-su-notte)}
.barra__esito a{color:inherit}

/* Il menù si riserva il posto degli strumenti, invece di sperare che ci stia.
   Il menù è centrato dentro il tratto della fettuccia, e gli strumenti (account,
   carrello, lingue) stanno appoggiati alla sua testa destra: sopra i 1200 avanza
   spazio e non si toccano, sotto no — misurato il 2026-08-10 sulla home, dove
   «Contattaci» finiva sotto l'icona dell'account già di suo (30px a 1024, 76px a 900,
   e il carrello lo peggiorava). Da 1200 in giù il tratto del menù si accorcia di
   quanto sono larghi gli strumenti e il centro si sposta con lui.
   Sopra i 1200 non cambia niente: le pagine già approvate restano identiche. */
@media (min-width:861px) and (max-width:1200px){
  .testata__nav{right:calc(var(--dtg-banda-fine) + 220px)}
}

/* ---------- Il contatore del carrello, in testata ---------- */
/* Senza di lui l'aggiunta in pagina non ha nessuna conferma fuori dalla barra. Sta
   sulla testa destra della fettuccia, accanto alla lingua, dov'è il nero largo. */
.carrello{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .5rem;border-radius:var(--dtg-raggio-s);
  color:var(--dtg-testo-su-notte);text-decoration:none;
  transition:background-color .18s ease;
}
.carrello:hover{background:rgba(243,239,226,.12)}
.carrello__icona{width:22px;height:22px;flex:none;display:block}
/* Un tondo, non una tessera: il raggio non è un passo della scala delle superfici, è
   la forma stessa del segno. Larghezza e altezza uguali, e il numero dentro sta al
   passo della didascalia — sopra le 99 copie in un carrello non ci arriva nessuno. */
.carrello__conteggio{
  width:1.45rem;height:1.45rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  /* Il tondo prende il colore del gioco caricato, non l'arancio fisso del marchio: la
     testata sta sopra una pagina gia' tinta da quel gioco, e un accento che non la segue
     e' l'unico pezzo di un altro mondo. Il testo resta inchiostro, che su tutte e tre le
     rampe sta sopra 5,9:1. */
  background:var(--dtg-accento);color:var(--wp--preset--color--inchiostro);
  font-size:var(--wp--preset--font-size--didascalia);font-weight:700;line-height:1;
}
.carrello__conteggio[data-conteggio="0"]{
  background:transparent;color:var(--dtg-testo-su-notte-secondario);
  box-shadow:inset 0 0 0 1px rgba(243,239,226,.28);
}
/* ⚠️ Qui c'era il contrario: sotto gli 860 il carrello si tingeva d'inchiostro, perche'
   la regola era stata scritta quando a quella misura la fettuccia non c'era e la testata
   stava sulla carta. Da quando la fascia nera arriva al bordo del contenuto su OGNI
   pagina e a ogni misura, quella tinta voleva dire inchiostro su nero: l'icona del
   carrello spariva e restava solo il tondo del numero, che si vedeva per via del proprio
   anello. Il carrello sta sul nero come l'omino di fianco, e prende il suo stesso colore
   — che e' quello che eredita dalla testata, quindi non serve dichiararlo. */

/* ---------- Movimento ----------
   Due tempi, come dice il sistema, e non di più.

   IL PRIMO TEMPO È L'ARRIVO, e su questa pagina è tutto legato allo scorrimento: ogni
   mondo si compone quando lo si raggiunge. La cresta si tira, la scena si avvicina, la
   carta sale, le righe si scoprono una dietro l'altra e il personaggio scavalca il
   bordo. Non sono cinque effetti sparsi: è un gesto solo, la stessa mano che appoggia
   un mondo sul tavolo, e succede tre volte con lo stesso ordine.

   La strada buona è la linea di scorrimento del CSS: ogni pezzo è legato a quanto è
   entrato nella finestra, quindi il movimento segue il dito invece di partire da solo,
   e non c'è un fotogramma di JavaScript. Dove `animation-timeline` non esiste, ci
   pensa lo stesso osservatore che governa la barra — un innesco solo, più tardi.

   IL SECONDO TEMPO È LA RISPOSTA A UN GESTO: la barra che entra, il gioco che cambia,
   il tondo del carrello che salta. Non è un terzo tempo — è la stessa deroga della
   fettuccia ancorata.

   Il cappello fa eccezione e arriva al caricamento: è la prima cosa che si vede, e
   legarla allo scorrimento vorrebbe dire mostrarla già finita.

   Con `reduce` non si applica niente di tutto questo: la pagina è già composta. */
@media (prefers-reduced-motion:no-preference){

  /* --- il cappello si compone appena arriva ---
     Senza JavaScript la classe `con-js` non c'è e non si ferma niente: il contenuto
     resta visibile, che è la regola del mondo. */
  .con-js .cappello .tempo,
  .con-js .cappello__lede,
  .con-js .cappello__note > *{animation:sale-carta .72s var(--dtg-molla) both}
  .con-js .cappello__lede{animation-delay:.09s}
  .con-js .cappello__note > *:first-child{animation-delay:.17s}
  .con-js .cappello__note > * + *{animation-delay:.25s}

  /* Le tre voci arrivano in fila e ognuna si tira il proprio filetto: tre segni
     scritti uno dopo l'altro, che è quello che la pagina sta per fare. */
  .con-js .cappello__indice a{animation:sale-carta .62s var(--dtg-molla) both}
  .con-js .cappello__indice a::before{animation:tira-filetto .5s var(--dtg-molla) both}
  .con-js .cappello__indice a:nth-child(1),
  .con-js .cappello__indice a:nth-child(1)::before{animation-delay:.34s}
  .con-js .cappello__indice a:nth-child(2),
  .con-js .cappello__indice a:nth-child(2)::before{animation-delay:.43s}
  .con-js .cappello__indice a:nth-child(3),
  .con-js .cappello__indice a:nth-child(3)::before{animation-delay:.52s}

  /* Scegliendo una voce non si salta: ci si va. Il salto secco fa perdere di quanto ci
     si è spostati, e su una pagina che è tre schermate in fila conta.
     Va dichiarato sull'elemento che scorre davvero, che è `html` e non il corpo: sul
     corpo la riga non ha nessun effetto. La si tiene però legata a questa pagina, o
     varrebbe su tutto il sito senza che nessuno l'abbia deciso. */
  :root:has(.giochi-pagina){scroll-behavior:smooth}

  @supports (animation-timeline:view()){
    /* La cresta si tira mentre il mondo comincia: è la soglia del sistema, disegnata
       invece che trovata già lì. */
    .crinale--mondo .crinale__spigolo{
      /* il tratteggio lungo quanto tutto il percorso: senza, lo scostamento non ha
         niente da spostare e la cresta è già scritta */
      stroke-dasharray:1;
      animation:tira-cresta linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 26%;
    }
    /* La scena si avvicina appena, come le schede del catalogo sotto il puntatore.
       La linea di scorrimento va dichiarata sulla CORNICE e chiamata per nome, non
       presa con `view()` dall'immagine: la cornice ritaglia con `overflow:hidden`, e
       questo la rende un contenitore di scorrimento a tutti gli effetti — l'immagine
       dentro misurerebbe sé stessa contro di lei, dove è sempre tutta visibile, e
       resterebbe ferma a corsa finita senza muoversi mai. */
    .mondo__scena{view-timeline-name:--dtg-scena;view-timeline-axis:block}
    .mondo__scena img{
      animation:avvicina linear both;
      animation-timeline:--dtg-scena;
      animation-range:entry 0% cover 42%;
    }
    /* La carta si appoggia. Non sfuma: la sfumatura la fanno le righe che porta, o
       l'opacità si moltiplicherebbe due volte sullo stesso testo. */
    .mondo__pannello{
      animation:appoggia-carta linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 36%;
    }
    /* Ogni riga guarda sé stessa: sono a quaranta pixel l'una dall'altra, quindi la
       scala si scopre da sola, in ordine, senza un solo ritardo scritto a mano. */
    .mondo__pannello > *{
      animation:scopri-riga linear both;
      animation-timeline:view();
      animation-range:entry 20% entry 95%;
    }
    .mondo__figura{
      animation:figura-scavalca linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 46%;
    }
  }
  /* Dove le linee di scorrimento non ci sono, l'innesco è lo stesso osservatore della
     barra: il mondo si compone quando la sua sezione entra nella fascia centrale. Un
     innesco solo per tutta la sezione, quindi qui i ritardi si scrivono a mano — ed è
     l'unico posto della pagina dove servono. Dura più a lungo apposta: a quel punto la
     scena sta ancora salendo dal fondo, e una corsa breve finirebbe prima di essere
     vista. */
  @supports not (animation-timeline:view()){
    /* Il fermo vale SOLO da `con-js` in poi: senza JavaScript non c'è chi lo tolga, e
       una riga di testo ferma a opacità zero non tornerebbe mai. È la stessa regola
       della home — le animazioni stanno ferme al primo fotogramma, il JS toglie il
       fermo, e senza JS il contenuto è semplicemente già lì. */
    .con-js .mondo__pannello > *,
    .con-js .mondo__figura{opacity:0}
    .crinale--mondo .crinale__spigolo{stroke-dasharray:1}
    .mondo.e-vista .crinale__spigolo{animation:tira-cresta .9s var(--dtg-molla) both}
    .mondo.e-vista .mondo__scena img{animation:avvicina 1.1s var(--dtg-molla) both}
    .mondo.e-vista .mondo__pannello{animation:appoggia-carta .8s var(--dtg-molla) both}
    .mondo.e-vista .mondo__pannello > *{animation:scopri-riga .62s var(--dtg-molla) both}
    .mondo.e-vista .mondo__pannello > *:nth-child(1){animation-delay:.10s}
    .mondo.e-vista .mondo__pannello > *:nth-child(2){animation-delay:.17s}
    .mondo.e-vista .mondo__pannello > *:nth-child(3){animation-delay:.24s}
    .mondo.e-vista .mondo__pannello > *:nth-child(4){animation-delay:.31s}
    .mondo.e-vista .mondo__pannello > *:nth-child(5){animation-delay:.38s}
    .mondo.e-vista .mondo__pannello > *:nth-child(6){animation-delay:.45s}
    .mondo.e-vista .mondo__pannello > *:nth-child(7){animation-delay:.52s}
    .mondo.e-vista .mondo__figura{animation:figura-scavalca 1.1s var(--dtg-molla) both}
  }

  /* Il gioco non cambia di scatto sotto gli occhi: il nome e il prezzo scendono, si
     scambiano fuori vista e risalgono. È un cambio di stato che si legge, non un
     lampeggio — e il colore del filetto ci mette lo stesso tempo. */
  .barra__chi{transition:opacity .17s ease,translate .17s var(--dtg-molla)}
  .barra.e-cambia .barra__chi{opacity:0;translate:0 10px}

  /* Il tondo del carrello fa un salto quando il numero cambia: è la risposta a un
     gesto, come il rientro della fettuccia, non un terzo tempo del movimento. */
  .carrello__conteggio.e-mosso{animation:conta-salta .42s var(--dtg-molla)}
}
@keyframes conta-salta{
  0%{scale:1}
  38%{scale:1.38}
  100%{scale:1}
}

/* Sale da sotto il bordo del pannello e si raddrizza: è il ritaglio che scavalca, fatto
   arrivare invece che trovato già lì. Il movimento sta su `transform` e non su
   `translate`, che è già impegnato a tenere la figura sulla cucitura. */
@keyframes figura-scavalca{
  from{opacity:0;transform:translateY(26%) rotate(-3.5deg)}
  40%{opacity:1}
  to{opacity:1;transform:translateY(0) rotate(0deg)}
}
/* La cresta si scrive da sinistra: il tratto è normalizzato a 1 con `pathLength`, così
   la lunghezza vera del percorso non c'entra e il disegno può cambiare senza toccare
   questi numeri. */
@keyframes tira-cresta{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
/* Il filetto delle tre voci, tirato da sinistra. */
@keyframes tira-filetto{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* La scena si avvicina dentro la propria cornice: si muove il quadro, non la carta. */
@keyframes avvicina{
  from{scale:1.075}
  to{scale:1}
}
/* La carta si appoggia sul mondo: sale e basta, la sfumatura la fanno le sue righe. */
@keyframes appoggia-carta{
  from{transform:translateY(30px)}
  to{transform:translateY(0)}
}
@keyframes scopri-riga{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}
/* Il testo che si compone all'arrivo del cappello: un passo solo, ripetuto. */
@keyframes sale-carta{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Misure ---------- */
@media (max-width:1080px){
  .mondo__quadro{padding-inline:var(--wp--preset--spacing--30)}
  .mondo__pannello{--dtg-gola:4.5rem;padding:var(--wp--preset--spacing--30)}
  .mondo__pannello{padding-right:calc(var(--wp--preset--spacing--30) + var(--dtg-gola))}
  .mondo--rovescio .mondo__pannello{
    padding-right:var(--wp--preset--spacing--30);
    padding-left:calc(var(--wp--preset--spacing--30) + var(--dtg-gola));
  }
  .mondo__figura{height:clamp(210px,36svh,400px)}
  .mondo{--dtg-scena-h:clamp(250px,44svh,460px)}
}

@media (max-width:860px){
  /* In colonna la scena sta sopra e la carta le si appoggia sotto scavalcandone il
     bordo: lo stesso rapporto di prima, girato di novanta gradi. */
  .mondo{min-height:0;--dtg-scena-h:clamp(190px,30svh,300px)}
  .mondo__quadro{
    display:block;
    padding-inline:var(--wp--preset--spacing--30);
    padding-block:var(--wp--preset--spacing--30) calc(var(--dtg-barra-h) + var(--wp--preset--spacing--40));
  }
  /* In colonna la scena non ha più un pannello di fianco a cui allungarsi: torna alta
     quanto dice la propria misura. */
  .mondo__scena img{height:var(--dtg-scena-h);min-height:0}
  .mondo__pannello,
  .mondo--rovescio .mondo__pannello{
    position:relative;
    margin:calc(-1 * var(--wp--preset--spacing--40)) 0 0;
    border-radius:var(--dtg-raggio-l);
    padding:var(--wp--preset--spacing--30);
    /* la gola serve in alto, non di fianco: la figura arriva da sopra */
    padding-top:calc(var(--wp--preset--spacing--30) + 2.25rem);
  }
  /* In colonna non c'è una cucitura verticale da scavalcare: la figura si appoggia al
     bordo alto del pannello e ne esce di sopra, che è lo stesso gesto girato. Il punto
     d'appoggio è l'altezza della scena meno la risalita del pannello: sono le due
     misure che decidono dov'è quel bordo, e sono già variabili.

     I selettori ripetono la classe del mondo apposta: le regole di sopra sono scritte
     su due classi (`.mondo--verrix .mondo__figura`), e una media query non aggiunge un
     grammo di specificità — con una classe sola lo scostamento del desktop vincerebbe
     anche sul telefono, e la figura resterebbe appoggiata sul titolo.

     Sul telefono la figura sta SEMPRE a destra, anche nelle sezioni rovesciate: il
     testo è allineato a sinistra su tutte e tre, e il lato libero è uno solo. Scende
     dentro la carta solo per un sesto di sé — quanto basta a tagliarne il bordo senza
     arrivare sulla riga del titolo, che la gola in cima al pannello tiene libera. */
  .mondo--verrix .mondo__figura,
  .mondo--yatai .mondo__figura,
  .mondo--sub-zero .mondo__figura{
    position:absolute;
    top:calc(var(--wp--preset--spacing--30) + var(--dtg-scena-h) - var(--wp--preset--spacing--40));
    right:var(--wp--preset--spacing--40);left:auto;
    justify-self:auto;align-self:auto;
    height:clamp(150px,22svh,215px);
    translate:0 -84%;
  }
  .cappello{padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40)}
  .cappello__indice{grid-template-columns:1fr;gap:var(--wp--preset--spacing--20)}

  /* La barra scende a due righe: il gioco sopra, l'azione a tutta larghezza sotto. Più
     di questo non prende — sotto ci deve restare pagina da leggere. */
  .barra__corpo{
    flex-wrap:wrap;gap:.5rem var(--wp--preset--spacing--20);
    padding:.6rem var(--wp--preset--spacing--30) .7rem;
  }
  .barra__chi{flex:1 1 auto}
  .barra__edizione{order:2}
  .barra__compra,
  .barra__campagna{order:3;flex:1 0 100%;margin-left:0;min-height:48px}
  .barra__esito{order:4;flex:1 0 100%;max-width:none}
}

@media (max-width:640px){
  .mondo__quadro{padding-inline:var(--wp--preset--spacing--20)}
  .mondo__pannello,
  .mondo--rovescio .mondo__pannello{
    padding:calc(var(--wp--preset--spacing--30) + 2.25rem) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  }
  .barra__nome{font-size:var(--wp--preset--font-size--corpo)}
  .barra__prezzo{font-size:var(--wp--preset--font-size--h-4)}
}

/* ============================================================
   LA PAGINA DI UN GIOCO — /product/<gioco>/
   ============================================================
   Una scheda prodotto non e' un elenco di specifiche con un bottone in fondo: e' un
   tavolo a cui qualcuno ti fa sedere. Ogni sezione la presenta chi in quel mondo se ne
   occupa — l'artigiana i componenti, la mistica il colore che manca, la razziatrice
   l'acquisto — e chi parla entra da un lato e se ne va quando ha finito.

   IL COLORE QUI NON SI PESCA. Sulla home e sul catalogo il gioco si sorteggia a ogni
   caricamento; qui il gioco e' il prodotto, e l'accento e' tassonomia. Lo dice
   `data-gioco` sul corpo, e `data-gioco-fisso` tiene fermo il pescaggio di hero.js.
   Cambiando quell'attributo cambiano accento, scena, scatola, personaggi e testi:
   la pagina e' una sola, parametrica, come sara' il template di prodotto.
   ============================================================ */

/* La barra d'acquisto e' la stessa di /giochi/, quindi la stessa misura e le stesse
   due attenzioni: l'ancora non finisce sotto la fettuccia, l'ultima riga non finisce
   sotto la barra. */
.gioco-pagina{scroll-padding-top:96px;scroll-padding-bottom:calc(var(--dtg-barra-h) + 1rem)}

/* Un solo gioco per volta. I tre blocchi stanno tutti nel markup e li sceglie il CSS,
   come il sommario dell'apertura in home: nessun JavaScript, e senza JS se ne vede
   comunque uno vero. Nel tema il blocco lo stampa il template — questo e' lo specchio. */
.per-gioco{display:none}
body[data-gioco="verrix"]   .per-gioco[data-per="verrix"],
body[data-gioco="yatai"]    .per-gioco[data-per="yatai"],
body[data-gioco="sub-zero"] .per-gioco[data-per="sub-zero"]{display:block}

/* ---------- 1. L'apertura ----------
   L'unico punto della pagina dove il quadro esce dal contenitore. C'e' una ragione: qui
   il soggetto e' un gioco solo, e la prima cosa da far vedere e' il tavolo — non un
   pannello che ne parla. Da qui in giu' tutto torna dentro i 1320. */
.apertura-gioco{
  /* Sopra il crinale che segue, non sotto: la scatola scavalca il bordo basso e finisce
     dentro l'area delle creste. Col crinale piu' alto nello stacco, quel ritaglio ci
     spariva dietro — e un ritaglio che scavalca coperto da quello che dovrebbe
     scavalcare non e' un gesto, e' un errore. */
  position:relative;z-index:3;
  min-height:min(82svh,760px);
  display:flex;align-items:flex-end;
  padding-block:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  /* la scatola scavalca il bordo basso e finisce sul crinale: niente ritaglio */
  overflow:visible;
  color:var(--dtg-testo-su-notte);
}
/* La scena sta in un elemento suo e non nel fondo della sezione: cosi' puo' salire
   sotto la fettuccia e restare ritagliata mentre la scatola, che le sta sopra, no. */
.apertura-gioco__scena{
  position:absolute;inset:0;z-index:0;
  margin-top:calc((var(--wp--preset--spacing--30) + 26px) * -1);
  background:var(--dtg-scena-gioco) center 42%/cover no-repeat var(--wp--preset--color--panna-scura);
}
body[data-gioco="verrix"]   .apertura-gioco,
body.gioco-verrix   .apertura-gioco{--dtg-scena-gioco:url("../img/giochi/verrix-tavolo.webp")}
body[data-gioco="yatai"]    .apertura-gioco,
body.gioco-yatai    .apertura-gioco{--dtg-scena-gioco:url("../img/giochi/yatai-chiosco.webp")}
body[data-gioco="sub-zero"] .apertura-gioco,
body.gioco-sub-zero .apertura-gioco{--dtg-scena-gioco:url("../img/giochi/sub-zero-scena.webp")}
/* Il velo serve a tenere il testo sopra 4,5:1 su tre fotografie diverse, non a fare
   atmosfera. Sono DUE veli, non uno, perche' il testo non sta in basso: sta a sinistra.
   Uno sale da sotto e regge la riga delle azioni; l'altro entra da sinistra e regge la
   colonna del titolo, del claim e del sommario, poi si spegne prima della meta' — a
   destra la scena resta in chiaro, ed e' li' che sta la scatola.
   Con un velo solo dal basso il titolo cadeva sulla parte piu' luminosa della foto (il
   tavolo bianco) e stava sotto 3:1: misurato, non temuto. */
.apertura-gioco__scena::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,
      rgba(20,18,16,.84) 0%,
      rgba(20,18,16,.72) 26%,
      rgba(20,18,16,.34) 48%,
      rgba(20,18,16,.06) 64%,
      transparent 74%),
    linear-gradient(to top,rgba(20,18,16,.7),rgba(20,18,16,.42) 34%,rgba(20,18,16,.12) 64%,transparent 84%);
}
.apertura-gioco__corpo{
  position:relative;z-index:2;
  width:100%;max-width:var(--dtg-contenuto);margin-inline:auto;
  padding-inline:var(--wp--preset--spacing--40);
}
.apertura-gioco__titolo{
  font-size:clamp(2.6rem,1.4rem + 4.4vw,5rem);
  font-weight:700;line-height:1.04;letter-spacing:-.035em;
  margin-bottom:var(--wp--preset--spacing--20);
}
/* L'anno sta in linea col nome, non sopra: un occhiello sopra un titolo qui non esiste. */
.apertura-gioco__anno{
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--didascalia);font-weight:500;
  letter-spacing:.1em;color:var(--dtg-testo-su-notte-secondario);
  vertical-align:.9em;margin-left:.6rem;
}
/* Stessa forma del claim della home: parte piana, e l'ultima riga nell'accento
   contornato d'inchiostro. E' l'unico posto della pagina dove il testo prende colore. */
.apertura-gioco__claim{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-2);
  font-weight:600;line-height:1.12;letter-spacing:-.02em;
  max-width:22ch;margin-bottom:var(--wp--preset--spacing--30);
}
.apertura-gioco__claim em{
  font-style:normal;display:block;
  color:var(--dtg-accento);
  -webkit-text-stroke:2px var(--wp--preset--color--inchiostro);
  paint-order:stroke fill;
}
.apertura-gioco__lede{
  font-size:var(--wp--preset--font-size--lede);
  color:var(--dtg-testo-su-notte);
  max-width:52ch;margin-bottom:var(--wp--preset--spacing--40);
}
.apertura-gioco__azioni{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20)}
/* Sul fondo scuro la variante a filo non puo' riempirsi di panna: il riquadro interno
   prende il colore su cui sta, che qui e' la fotografia velata. */
.apertura-gioco__azioni .bottone--fantasma::before{background:rgba(20,18,16,.72)}
.apertura-gioco__azioni .bottone--fantasma{color:var(--dtg-testo-su-notte)}
.apertura-gioco__azioni .bottone--fantasma:hover{color:var(--wp--preset--color--inchiostro)}

/* Il ritaglio che scavalca, applicato alla cosa che si vende: la scatola esce dal bordo
   basso dell'apertura e finisce sul crinale. L'ombra segue la sagoma, non il rettangolo. */
.apertura-gioco__scatola{
  position:absolute;z-index:3;
  right:clamp(16px,6vw,110px);
  bottom:calc(-1 * clamp(24px,4vw,64px));
  width:clamp(140px,19vw,290px);height:auto;
  filter:drop-shadow(0 26px 30px rgba(20,18,16,.44));
}

/* Il crinale chiude l'apertura e porta il fondo dalla scena al terreno del gioco: lo
   stacco e' sulla linea delle creste, e fra le due zone non c'e' nessuna riga dritta. */
.crinale--gioco{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(20,18,16,.86) 0 30%,var(--dtg-terreno) 88%);
}
.crinale--gioco .crinale__fondo{fill:color-mix(in srgb,var(--dtg-accento) 26%,var(--wp--preset--color--panna))}
.crinale--gioco .crinale__faccia{fill:color-mix(in srgb,var(--dtg-accento) 18%,var(--wp--preset--color--panna))}

/* ---------- Gli atti ----------
   Da qui in giu' la pagina sfuma dal terreno del gioco al bianco e ci resta fino al
   crinale che chiude, come ovunque nel sito. */
.atti{
  background:linear-gradient(180deg,var(--dtg-terreno) 0%,var(--wp--preset--color--bianco) 34%);
  padding-bottom:calc(var(--dtg-barra-h) + var(--wp--preset--spacing--50));
}
.atto{
  max-width:var(--dtg-contenuto);margin-inline:auto;
  padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.atto__soglia{max-width:var(--dtg-contenuto);margin-inline:auto;padding-inline:var(--wp--preset--spacing--40)}
.atto__titolo{
  font-size:var(--wp--preset--font-size--h-2);font-weight:600;letter-spacing:-.02em;
  color:var(--dtg-testo-mondo,var(--dtg-testo));
  margin-bottom:var(--wp--preset--spacing--20);
}
body[data-gioco="verrix"]   .atto,
body.gioco-verrix   .atto{--dtg-testo-mondo:var(--dtg-testo-verrix)}
body[data-gioco="yatai"]    .atto,
body.gioco-yatai    .atto{--dtg-testo-mondo:var(--dtg-testo-yatai)}
body[data-gioco="sub-zero"] .atto,
body.gioco-sub-zero .atto{--dtg-testo-mondo:var(--dtg-testo-sub-zero)}
.atto__testo p{max-width:62ch;margin-bottom:var(--wp--preset--spacing--30)}
.atto__testo p:last-child{margin-bottom:0}
/* L'ambientazione e' il racconto lungo della pagina e prende tutta la larghezza del
   contenitore: e' l'unico testo che non sta in colonna di lettura, perche' e' anche
   l'unico che si legge una volta sola e per intero. */
.atto__testo--largo p{max-width:none}
.atto__coda{
  max-width:56ch;color:var(--dtg-testo-secondario);
  font-size:var(--wp--preset--font-size--didascalia);
  margin-top:var(--wp--preset--spacing--30);
}

/* ---------- La regia dei personaggi ----------
   Ogni atto lo presenta qualcuno di quel mondo, in prima persona, e chi parla ENTRA e
   SE NE VA: e' una transizione e non un'animazione, perche' deve saper tornare indietro
   quando si risale la pagina. Il ritaglio scavalca il bordo del pannello di carta —
   lo stesso gesto delle schede in home, alla scala di una persona che si affaccia.

   Il cartellino sotto e' la mano del sistema (Caveat, passo piccolo): dice chi e' e da
   che gioco arriva. Senza quello la figura sarebbe decorazione, ed e' la stessa regola
   dei personaggi della catena in Chi siamo. */
.presenta{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,clamp(160px,19vw,280px)) minmax(0,1fr);
  align-items:end;
  column-gap:0;
  margin-bottom:var(--wp--preset--spacing--50);
}
.presenta--destra{grid-template-columns:minmax(0,1fr) minmax(0,clamp(160px,19vw,280px))}
/* La figura si appoggia alla CUCITURA, non al centro della propria colonna: e' il lato
   che tocca la carta quello che deve mordere il pannello. Centrata, restava a fianco —
   e un ritaglio che sta accanto al bordo invece di tagliarlo non e' il gesto del sito. */
.presenta__figura{
  grid-row:1;grid-column:1;z-index:2;
  align-self:end;justify-self:end;
  width:auto;height:clamp(200px,30svh,360px);max-width:100%;
  pointer-events:none;
  filter:drop-shadow(0 24px 26px rgba(20,18,16,.3));
}
.presenta--destra .presenta__figura{grid-column:2;justify-self:start}
/* Il pannello di carta si riserva la gola dal lato da cui arriva la figura: senza,
   la spalla del personaggio finirebbe sulla prima riga. */
.presenta__voce{
  --dtg-gola:3.5rem;
  grid-row:1;grid-column:2;z-index:1;
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  padding:var(--wp--preset--spacing--40);
  padding-left:calc(var(--wp--preset--spacing--40) + var(--dtg-gola));
  margin-left:calc(-1 * var(--dtg-gola));
  box-shadow:var(--dtg-ombra-pannello);
}
.presenta--destra .presenta__voce{
  grid-column:1;
  padding-left:var(--wp--preset--spacing--40);
  padding-right:calc(var(--wp--preset--spacing--40) + var(--dtg-gola));
  margin-left:0;margin-right:calc(-1 * var(--dtg-gola));
}
/* Il titolo dentro il banner e' la voce del personaggio, non il titolo della sezione:
   quello sta sopra, sulla carta della pagina. Prende il colore del mondo come tutti i
   titoli, un passo sotto — e' un sottotitolo parlato, non un secondo capo. */
.presenta__titolo{
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  color:var(--dtg-testo-mondo,var(--dtg-testo));
  margin-bottom:.5rem;
}
/* La battuta e' parlato, non annotazione: prende il corpo della lettura, un passo piu'
   grande. La mano (Caveat) resta al cartellino, dov'e' il suo mestiere. */
.presenta__battuta{
  font-size:var(--wp--preset--font-size--lede);
  max-width:52ch;
  margin-bottom:var(--wp--preset--spacing--20);
}
.presenta__cartellino{
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  font-size:clamp(1.05rem,.9rem + .45vw,1.35rem);line-height:1.06;
  color:var(--dtg-testo-secondario);
}

/* ---------- 2. Colpo d'occhio ----------
   Tre dati, leggibili in un secondo, e stanno in cima alla sezione: chi apre la scheda
   di un gioco cerca quelli prima di ogni racconto. Non sono tre schede con l'icona: sono
   tre voci in fila, separate dal filetto del sistema, incolonnate sul proprio asse —
   icona, numero e parola stanno uno sotto l'altro e tutti e tre centrati, cosi' la riga
   si legge come tre segni e non come tre paragrafi che cominciano a sinistra. */
.dati-colpo{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:48rem;
  margin-bottom:var(--wp--preset--spacing--50);
}
.dati-colpo li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  padding-inline:var(--wp--preset--spacing--30);
}
.dati-colpo li + li{border-left:1px solid var(--wp--preset--color--panna-scura)}
.dati-colpo__icona{
  width:32px;height:32px;
  color:var(--dtg-accento-basso);
  margin-bottom:.2rem;
}
.dati-colpo__dato{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.8rem,1.2rem + 1.9vw,2.7rem);
  font-weight:700;line-height:1;letter-spacing:-.03em;
}
.dati-colpo__che{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
/* Il dato che manca non e' una casella vuota: e' scritto, in tondo e in secondo piano,
   col tratteggio del segnaposto, perche' si veda che manca invece di sembrare un
   valore breve. */
/* IL DATO INVENTATO. Il sistema non ha un colore d'errore e non ne vuole uno: questo
   rosso non e' un token del mondo, e' un segno di cantiere. Sta qui per farsi notare da
   chi costruisce la pagina — un numero plausibile scritto in rosso si vede subito e non
   arriva in produzione per distrazione, mentre un riquadro tratteggiato in fondo alla
   sezione si legge solo se lo si cerca. Quando il dato vero arriva, spariscono la classe
   e questa regola: se una di queste due cose resta in pagina, e' un difetto. */
.dato-finto{
  color:#A8271B;                        /* 6,1:1 su panna */
  border-bottom:2px dashed currentColor;
  padding-bottom:.1rem;
}
.dato-finto__che{color:#A8271B}
.dati-colpo__dato--manca{
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--corpo);font-weight:400;
  color:var(--dtg-testo-secondario);
  border-bottom:2px dashed var(--wp--preset--color--panna-scura);
  padding-bottom:.1rem;
}

/* ---------- 4. La galleria ----------
   Una foto grande davanti e le altre in fila sotto: non una griglia di miniature uguali,
   che di un gioco non fa vedere niente. */
.galleria__grande{margin:0 0 var(--wp--preset--spacing--20)}
.galleria__grande img{
  width:100%;height:clamp(240px,44svh,520px);object-fit:cover;
  border-radius:var(--dtg-raggio-l);
  box-shadow:var(--dtg-ombra-pannello);
}
.galleria__fila{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--wp--preset--spacing--20);
}
.galleria__fila figure{margin:0}
.galleria__fila img{
  width:100%;height:clamp(120px,15svh,190px);object-fit:cover;
  border-radius:var(--dtg-raggio-m);
  box-shadow:var(--dtg-ombra-tessera);
}
.galleria__fila figcaption{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-top:.4rem;
}
.galleria__credito{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-top:var(--wp--preset--spacing--20);
}

/* ---------- 5. Come si gioca ----------
   Sei passaggi su due colonne. Non sono riquadri e non hanno il numero grande: l'ordine
   qui e' il ritmo del turno, non una classifica. Ognuno porta il nodo a rombo del
   sistema — lo stesso anello della catena in Chi siamo — e niente altro: nessuna
   cornice, nessun fondo, nessuna icona, e nessun filetto colorato di fianco. */
.regole{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  align-items:start;
  /* E' un <ol> perche' l'ordine dei passaggi e' quello del turno e va detto agli ausili,
     ma i numerini del browser qui non li vuole nessuno: il segno dell'ordine e' il rombo,
     e "1." in corpo minuscolo davanti a un titolo sembra un refuso. Il reset di base
     copre solo gli <ul>. */
  list-style:none;margin:0;padding:0;
}
.regole > li{position:relative;padding-left:1.7rem}
/* Il nodo: un rombo appoggiato alla riga del titolo, non sopra. */
.regole > li::before{
  content:"";position:absolute;
  left:0;top:.6em;
  width:11px;height:11px;rotate:45deg;
  background:var(--dtg-accento);
}
.regole h3{
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  margin-bottom:.35rem;
}
.regole p{max-width:52ch}

/* ---------- 6. Cosa c'e' nella scatola ----------
   Il render della scatola a sinistra e l'elenco a destra: e' una lista della spesa, e
   una lista si legge in colonna stretta. I numeri stanno in una colonna loro, allineati,
   perche' li si scandaglia. */
.scatola{
  display:grid;
  grid-template-columns:minmax(0,clamp(170px,22vw,300px)) minmax(0,1fr);
  gap:var(--wp--preset--spacing--40);
  align-items:start;
}
.scatola__render{
  width:100%;height:auto;
  filter:drop-shadow(0 26px 30px rgba(20,18,16,.34));
}
.scatola__lista{
  columns:2;column-gap:var(--wp--preset--spacing--40);
}
.scatola__lista li{
  break-inside:avoid;
  display:flex;gap:.6rem;
  padding:.42rem 0;
  border-bottom:1px solid var(--wp--preset--color--panna-scura);
}
.scatola__quanti{
  flex:none;min-width:2.2rem;
  font-family:var(--wp--preset--font-family--display);
  font-weight:600;
  color:var(--dtg-testo-mondo);
  font-variant-numeric:tabular-nums;
}
.scatola__nota{
  grid-column:2;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  max-width:56ch;
}

/* ---------- 7. Le note di colore: la giostra ----------
   Le scelte che non si vedono giocando ma si sentono. Non una barra che scorre — una
   giostra: la scheda al centro sta dritta e si legge, le altre girano di taglio,
   arretrano nella profondita' e si spengono. Si muove col mouse (trascinando, o
   cliccando una laterale), col dito, con la rotella e con le frecce della tastiera; la
   pagina non si sposta mai di lato, perche' non c'e' niente che scorre davvero.

   Le variabili le scrive il JavaScript su ogni scheda:
     --off  scostamento CON SEGNO dal centro, in schede (−2, −1, 0, 1…), frazionario
            mentre si trascina, cosi' il movimento segue il dito invece di scattare
     --abs  il suo valore assoluto, limitato a 3: comanda profondita', scala e velo

   SENZA JAVASCRIPT non c'e' nessuna giostra e le schede stanno in griglia, tutte
   leggibili: e' la regola del mondo, il contenuto non dipende dal movimento. */
.giostra{position:relative}
.giostra__palco{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:var(--wp--preset--spacing--30);
}
.giostra__palco:focus-visible{
  outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:6px;
  border-radius:var(--dtg-raggio-m);
}
.nota-colore{
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  padding:var(--wp--preset--spacing--30);
  box-shadow:var(--dtg-ombra-pannello);
  /* Nessun filetto colorato: ne' di lato (il vezzo che il sistema rifiuta) ne' in cima,
     dove una barra dritta e spessa litiga con gli angoli tondi del pannello. Il colore
     del mondo la scheda ce l'ha gia' addosso, ed e' il titolo. */
}
.nota-colore h3{
  font-size:var(--wp--preset--font-size--h-4);font-weight:600;
  color:var(--dtg-testo-mondo);
  margin-bottom:.5rem;
}
.nota-colore p{font-size:var(--wp--preset--font-size--didascalia);line-height:1.62}

/* Da qui in giu' vale solo col JavaScript acceso: e' lui che scrive --off e --abs, e
   senza di lui una scheda ruotata di taglio resterebbe cosi' per sempre. */
.con-js .giostra__palco{
  display:block;position:relative;
  height:clamp(300px,40svh,400px);
  perspective:1500px;
  /* verticale al dito, orizzontale alla giostra: sul telefono la pagina scorre lo stesso */
  touch-action:pan-y;
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.con-js .giostra__palco.e-trascina{cursor:grabbing}
.con-js .giostra .nota-colore{
  position:absolute;left:50%;top:50%;
  width:var(--dtg-carta,min(23rem,74vw));
  margin-left:calc(var(--dtg-carta,min(23rem,74vw)) / -2);
  transform:
    translateY(-50%)
    translateX(calc(var(--off,0) * 56%))
    translateZ(calc(var(--abs,0) * -180px))
    rotateY(calc(var(--off,0) * -32deg))
    scale(calc(1 - var(--abs,0) * .05));
  /* le lontane si spengono invece di sparire di colpo: a tre schede di distanza sono
     gia' fuori, e non ricevono piu' i clic */
  opacity:calc(1 - var(--abs,0) * .3);
  z-index:calc(100 - var(--abs,0) * 10);
}
.con-js .giostra .nota-colore[data-fuori]{opacity:0;pointer-events:none}
/* La scheda al centro e' l'unica che si legge davvero: le altre alzano il grigio e
   restano un'ombra di se stesse, o si finirebbe a leggere tre testi ruotati insieme. */
.con-js .giostra .nota-colore:not([data-attiva]){cursor:pointer}
.con-js .giostra .nota-colore:not([data-attiva]) p{color:var(--dtg-testo-secondario)}
@media (prefers-reduced-motion:no-preference){
  .con-js .giostra .nota-colore{
    transition:transform .52s var(--dtg-molla),opacity .52s ease;
  }
  /* mentre si trascina il movimento segue il dito: nessuna corsa da aspettare */
  .con-js .giostra__palco.e-trascina .nota-colore{transition:none}
}

/* Il righello della giostra: un trattino per scheda, quello attivo nel colore del
   gioco. Non sono bottoni tondi — e' la soglia del sistema ridotta a sei segni. */
.giostra__righello{display:none}
.con-js .giostra__righello{
  display:flex;justify-content:center;gap:.4rem;
  margin-top:var(--wp--preset--spacing--30);
}
.giostra__tacca{
  width:26px;height:4px;padding:0;border:0;
  background:var(--wp--preset--color--panna-scura);cursor:pointer;
  transition:background-color .22s ease,transform .22s var(--dtg-molla);
}
.giostra__tacca[aria-current="true"]{background:var(--dtg-accento);transform:scaleY(1.6)}
.giostra__tacca:focus-visible{outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:3px}

/* Con `reduce` la giostra non gira affatto: torna la griglia, tutto leggibile e fermo.
   Non e' un ripiego, e' la stessa pagina senza il movimento. */
@media (prefers-reduced-motion:reduce){
  .con-js .giostra__palco{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
    gap:var(--wp--preset--spacing--30);
    height:auto;perspective:none;cursor:auto;
  }
  .con-js .giostra .nota-colore{
    position:static;transform:none;opacity:1;
    width:auto;margin-left:0;cursor:auto;
  }
  .con-js .giostra .nota-colore:not([data-attiva]) p{color:var(--dtg-testo)}
  .con-js .giostra__righello{display:none}
}

/* ---------- Il regolamento ----------
   La riga delle edizioni prende tutta la colonna: e' l'informazione che decide cosa si
   compra — due scatole diverse, non due manuali nella stessa — e stringerla a misura di
   lettura la farebbe sembrare una nota a margine. */
.regolamento__riga{max-width:none;margin-bottom:var(--wp--preset--spacing--30)}
.regolamento__scarica{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20)}

/* ---------- La campagna ----------
   La sezione che prende il posto dell'acquisto quando il gioco non si compra ancora.
   Nel mirror esiste solo per Sub-Zero: sul sito e' il campo che la accende, qui e' questa
   riga — un `.atto` senza il proprio blocco resterebbe un riquadro vuoto.

   Le tappe sono date in fila su un filo verticale, marcate col rombo del sistema: e' lo
   stesso segno delle risposte del quiz, e dice "questo e' un passo" senza inventare un
   secondo vocabolario per tre righe. Il filo parte e finisce sui rombi estremi invece di
   correre da bordo a bordo, o si vedrebbe spuntare sopra la prima data e sotto l'ultima. */
.campagna__tappe{
  list-style:none;margin:var(--wp--preset--spacing--40) 0 0;
  padding-left:var(--wp--preset--spacing--40);
  position:relative;max-width:46rem;
}
.campagna__tappe::before{
  content:"";position:absolute;
  left:5px;top:.75em;bottom:.75em;width:2px;
  background:var(--wp--preset--color--panna-scura);
}
.campagna__tappe li{position:relative;padding-bottom:var(--wp--preset--spacing--30)}
.campagna__tappe li:last-child{padding-bottom:0}
.campagna__tappe li::before{
  content:"";position:absolute;
  left:calc(-1 * var(--wp--preset--spacing--40) + 1px);top:.55em;
  width:11px;height:11px;rotate:45deg;
  background:var(--dtg-accento);
}
/* L'ultima tappa non e' ancora successa: il rombo resta vuoto, come una casella da
   spuntare. Il colore e' lo stesso, cambia solo che dentro non c'e' niente. */
.campagna__tappe li:last-child::before{background:var(--wp--preset--color--panna);border:2px solid var(--dtg-accento)}
.campagna__quando{
  display:block;
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  letter-spacing:-.01em;color:var(--dtg-testo-mondo);
}
.campagna__cosa{display:block;color:var(--dtg-testo)}
.campagna__nota{
  margin-top:var(--wp--preset--spacing--40);
  padding-top:var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--panna-scura);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  max-width:62ch;
}

/* ---------- 10. Le tribu', e il quiz ----------
   La pagina non chiude con "compralo": chiude sull'unica cosa che si sceglie prima di
   comprare, cioe' da che parte del tavolo si sta. Il quiz e' l'asimmetria del gioco resa
   giocabile — una domanda per volta, mai un modulo con tre domande in fila, perche' un
   modulo si compila e una domanda si risponde. */
.quiz{
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  padding:var(--wp--preset--spacing--40);
  box-shadow:var(--dtg-ombra-pannello);
  /* Centrato nella pagina e staccato da quello che lo precede: e' un oggetto a se',
     non la coda del testo che sta sopra — e un passo in piu' di aria lo dice prima
     ancora che si legga cosa c'e' dentro. */
  max-width:52rem;
  margin:var(--wp--preset--spacing--60) auto 0;
}
.quiz[hidden]{display:none}
.quiz__titolo{
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  color:var(--dtg-testo-mondo);
  margin-bottom:.35rem;
}
/* La regola del gioco sta SOTTO il titolo, scritta a mano. Sopra era un occhiello, e un
   occhiello sopra un titolo il sistema non ce l'ha in nessuna pagina: il titolo si regge
   da solo, e quante domande sono e' una frase, non un'etichetta. */
.quiz__intro{
  font-family:var(--wp--preset--font-family--nota);font-weight:700;
  font-size:clamp(1.05rem,.9rem + .45vw,1.35rem);line-height:1.06;
  color:var(--dtg-testo-secondario);
  margin-bottom:var(--wp--preset--spacing--30);
}
/* Le domande stanno tutte nel documento e ne vive una per volta: il JavaScript scopre la
   successiva quando arriva la risposta. Cosi' l'ordine e' nel markup e non in un array.
   E' un <ol> perche' l'ordine conta per chi legge con un ausilio, ma il numerino del
   browser no: se ne vede una alla volta, e "1." davanti all'unica domanda a schermo
   non dice niente a nessuno. */
/* A che punto si e'. Sta sopra la domanda perche' e' una condizione della domanda, non
   un commento: chi legge lo trova prima di rispondere, e chi ascolta se lo sente
   annunciare a ogni passo. Sparisce col verdetto — a quel punto non c'e' piu' un punto. */
.quiz__conta{
  font-size:var(--wp--preset--font-size--didascalia);
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  color:var(--dtg-testo-secondario);
  margin-bottom:.6rem;
}
.quiz__conta:empty{display:none}
.quiz__domande{list-style:none;margin:0;padding:0}
.quiz__domanda[hidden]{display:none}
.quiz__chiede{
  font-size:var(--wp--preset--font-size--lede);
  max-width:46ch;margin-bottom:var(--wp--preset--spacing--30);
}
.quiz__scelte{display:flex;flex-direction:column;gap:.6rem;max-width:40rem}
/* Le risposte non sono targhette a punta: la punta dice "di qua si va avanti" ed e' del
   comando che porta da qualche parte. Qui si sceglie, non si procede — quindi sono
   tessere piene larghe quanto la colonna, con il rombo del sistema come segno. */
.quiz__scelta{
  position:relative;
  display:block;width:100%;text-align:left;
  padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  padding-left:calc(var(--wp--preset--spacing--30) + 1.4rem);
  border:2px solid var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-m);
  background:var(--wp--preset--color--bianco);
  color:var(--dtg-testo);
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--corpo);line-height:1.5;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,transform .22s var(--dtg-molla);
}
.quiz__scelta::before{
  content:"";position:absolute;
  left:var(--wp--preset--spacing--30);top:1.15em;
  width:9px;height:9px;rotate:45deg;
  background:var(--wp--preset--color--panna-scura);
  transition:background-color .18s ease;
}
.quiz__scelta:hover{border-color:var(--dtg-accento);transform:translateY(-2px)}
.quiz__scelta:hover::before{background:var(--dtg-accento)}
.quiz__scelta:focus-visible{outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:3px}

.quiz__esito[hidden]{display:none}
.quiz__verdetto{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
  margin-bottom:var(--wp--preset--spacing--20);
}
.quiz__tribu{color:var(--dtg-testo-mondo);font-weight:700}
.quiz__perche{max-width:52ch;margin-bottom:var(--wp--preset--spacing--30)}
.quiz__azione{
  display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);
  margin-bottom:var(--wp--preset--spacing--20);
}
.quiz__nota{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);max-width:52ch;
  margin-bottom:var(--wp--preset--spacing--20);
}
@media (prefers-reduced-motion:no-preference){
  /* La domanda che arriva sale come tutto il resto della pagina: un passo solo, lo
     stesso di sempre. Non e' un terzo tempo — e' la risposta a un gesto. */
  .quiz__domanda,
  .quiz__esito{animation:sale-carta .5s var(--dtg-molla) both}
}

/* In pagina non c'e' nessun secondo bottone d'acquisto: l'azione e' una sola e sta nella
   barra fissa. Quello che resta qui e' la firma del gioco, che chiude la pagina sotto un
   filetto — l'ultima cosa che si legge, e non appartiene a nessuna sezione. */
.atto__crediti{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-top:var(--wp--preset--spacing--40);
  padding-top:var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--panna-scura);
}

/* ---------- Movimento ----------
   Due tempi, come dice il sistema. L'arrivo e' uno solo e appartiene a chi parla: il
   personaggio entra dal proprio lato e la sua carta sale sotto di lui. Ed e' una
   TRANSIZIONE, non un'animazione, perche' deve saper tornare indietro: risalendo la
   pagina chi ha finito di parlare se ne va da dove era arrivato.
   Il contenuto non dipende mai dal movimento: senza JavaScript la classe `con-js` non
   c'e', il fermo non si applica e la pagina e' gia' composta. */
@media (prefers-reduced-motion:no-preference){
  .con-js .presenta__figura,
  .con-js .presenta__voce{
    transition:opacity .62s var(--dtg-molla),transform .62s var(--dtg-molla);
  }
  /* la carta arriva appena dopo la figura: prima entra chi parla, poi quello che dice */
  .con-js .presenta__voce{transition-delay:.1s}
  .con-js .presenta__figura{opacity:0;transform:translateX(-16%) translateY(8%)}
  .con-js .presenta--destra .presenta__figura{transform:translateX(16%) translateY(8%)}
  .con-js .presenta__voce{opacity:0;transform:translateY(24px)}
  .con-js .presenta.e-in-scena .presenta__figura,
  .con-js .presenta.e-in-scena .presenta__voce{opacity:1;transform:none}

  /* L'apertura si compone al caricamento: e' la prima cosa che si vede, e legarla allo
     scorrimento vorrebbe dire mostrarla gia' finita. Un passo solo, ripetuto. */
  .con-js .apertura-gioco__titolo,
  .con-js .apertura-gioco__claim,
  .con-js .apertura-gioco__lede,
  .con-js .apertura-gioco__azioni{animation:sale-carta .74s var(--dtg-molla) both}
  .con-js .apertura-gioco__claim{animation-delay:.08s}
  .con-js .apertura-gioco__lede{animation-delay:.16s}
  .con-js .apertura-gioco__azioni{animation-delay:.24s}
  .con-js .apertura-gioco__scatola{animation:entra-in-scena .9s var(--dtg-molla) .18s both}

  @supports (animation-timeline:view()){
    /* La cresta si tira mentre il crinale arriva: la soglia disegnata invece che
       trovata gia' li'. Stesso gesto della pagina dei giochi. */
    .crinale--gioco .crinale__spigolo{
      stroke-dasharray:1;
      animation:tira-cresta linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* ---------- Misure ---------- */
@media (max-width:1080px){
  .atto{padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--30)}
  .atto__soglia{padding-inline:var(--wp--preset--spacing--30)}
  .apertura-gioco__corpo{padding-inline:var(--wp--preset--spacing--30)}
  .presenta__voce{--dtg-gola:2.6rem;padding:var(--wp--preset--spacing--30)}
  .presenta__voce{padding-left:calc(var(--wp--preset--spacing--30) + var(--dtg-gola))}
  .presenta--destra .presenta__voce{
    padding-left:var(--wp--preset--spacing--30);
    padding-right:calc(var(--wp--preset--spacing--30) + var(--dtg-gola));
  }
  .galleria__fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scatola{grid-template-columns:minmax(0,clamp(140px,20vw,220px)) minmax(0,1fr)}
  .scatola__lista{columns:1}
}

@media (max-width:860px){
  /* In colonna la figura non ha piu' un fianco da scavalcare: si appoggia al bordo alto
     della carta e ne esce di sopra, che e' lo stesso gesto girato di novanta gradi.
     Sta SEMPRE a destra, anche negli atti rovesciati: il testo e' allineato a sinistra
     dappertutto, e il lato libero e' uno solo. */
  .presenta,
  .presenta--destra{
    display:block;
    padding-top:clamp(110px,20svh,180px);
    margin-bottom:var(--wp--preset--spacing--40);
  }
  /* ⚠️ DUE classi, non una. WooCommerce stampa `.woocommerce img{height:auto}`, che
     pesa (0,1,1): `.presenta__figura` da sola pesa (0,1,0) e perdeva, mentre
     `.presenta--destra .presenta__figura` vinceva perche' ne ha due. Risultato: sul
     telefono i personaggi di destra erano alti 198px e quelli di sinistra 616 — la
     larghezza intera della colonna — e coprivano il pannello del testo sotto. Le figure
     sono tutte della stessa misura perche' sono tutte la stessa cosa: chi presenta
     l'atto. Terza volta oggi che un selettore a classe sola perde contro il core o
     contro un plugin. */
  .presenta .presenta__figura,
  .presenta--destra .presenta__figura{
    position:absolute;bottom:auto;top:0;
    /* Al centro della colonna: in fila verticale non c'e' un fianco da scavalcare, e il
       lato libero non e' piu' uno solo. */
    left:50%;right:auto;translate:-50% 0;
    width:auto;height:clamp(140px,22svh,210px);
    justify-self:auto;align-self:auto;
  }
  .presenta__voce,
  .presenta--destra .presenta__voce{
    padding:var(--wp--preset--spacing--30);
    /* la gola serve in alto: la figura arriva da sopra */
    padding-top:calc(var(--wp--preset--spacing--30) + 1.4rem);
    margin:0;
  }
  .con-js .presenta .presenta__figura,
  .con-js .presenta--destra .presenta__figura{transform:translateY(18%)}

  .apertura-gioco{min-height:min(76svh,620px);padding-block:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40)}
  .apertura-gioco__lede{margin-bottom:var(--wp--preset--spacing--30)}
  .apertura-gioco__scatola{width:clamp(104px,26vw,150px);bottom:-18px;right:var(--wp--preset--spacing--30)}
  /* La targhetta scende in colonna e prende la riga, MENO il posto della scatola: a 375
     il ritaglio arriva fin sopra l'azione, e un'immagine appoggiata su un bottone non e'
     un ritaglio che scavalca, e' un bersaglio che non si riesce a premere. Lo spazio
     riservato e' la stessa misura con cui la scatola e' larga, non un numero a occhio. */
  .apertura-gioco__azioni{
    flex-direction:column;align-items:stretch;
    max-width:none;
    padding-right:calc(clamp(104px,26vw,150px) + var(--wp--preset--spacing--20));
  }

  .dati-colpo li{padding-inline:var(--wp--preset--spacing--20)}
  .galleria__grande img{height:clamp(190px,32svh,300px)}
  .galleria__fila img{height:clamp(100px,16svh,150px)}
  .scatola{display:block}
  .scatola__render{width:clamp(120px,34vw,190px);margin-bottom:var(--wp--preset--spacing--30)}
  .scatola__nota{margin-top:var(--wp--preset--spacing--20)}
  /* i sei passaggi tornano in colonna: a questa larghezza due colonne fanno righe da
     venticinque caratteri, che non e' un testo, e' una lista della spesa */
  .regole{grid-template-columns:1fr;gap:var(--wp--preset--spacing--30)}
  .quiz{padding:var(--wp--preset--spacing--30)}
  .quiz__azione .bottone{width:100%}
  /* la giostra si stringe con lo schermo: le laterali restano visibili di taglio, che
     e' quello che dice che ce ne sono altre */
  .con-js .giostra__palco{height:clamp(280px,54svh,380px)}
  .con-js .giostra .nota-colore{--dtg-carta:min(20rem,82vw)}
}

@media (max-width:640px){
  .galleria__fila{grid-template-columns:1fr}
  /* tre dati su una riga sola non ci stanno piu': due sopra e uno sotto starebbero
     storti, quindi si mettono in colonna col loro filetto orizzontale */
  .dati-colpo{grid-template-columns:1fr}
  .dati-colpo li{
    flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;
    gap:.8rem;padding:.7rem 0;
  }
  .dati-colpo li + li{border-left:0;border-top:1px solid var(--wp--preset--color--panna-scura)}
  .dati-colpo__icona{width:26px;height:26px;margin-bottom:0}
  .dati-colpo__dato{font-size:1.7rem;min-width:5.2rem}
}


/* ---------- La griglia delle azioni ----------
   L'equivalente del test delle fazioni per i giochi che asimmetrici non sono. In Yatai
   la domanda non e' "chi sei" ma "cosa lasci agli altri": una tessera che entra ne
   spinge fuori un'altra, e quella finisce in mano al prossimo. E' una cosa che si
   capisce provandola, quindi si prova.

   Il pannello e' lo stesso oggetto del quiz — carta panna, angoli larghi, centrato,
   staccato di un passo pieno da quello che ha sopra: due sezioni che chiedono di fare
   qualcosa devono somigliarsi, o sembrano due pezzi di due siti.

   Senza JavaScript in pagina resta la sola legenda, che e' l'informazione vera: quali
   azioni esistono e cosa fanno. */
.griglia{
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  padding:var(--wp--preset--spacing--40);
  box-shadow:var(--dtg-ombra-pannello);
  max-width:52rem;
  margin:var(--wp--preset--spacing--60) auto 0;
}

/* Il tavolo: le tre frecce sopra, le due di fianco, e la griglia 2x3 in mezzo. La
   casella vuota in alto a sinistra e' l'angolo dove le due file di frecce si
   incontrerebbero, e resta vuota apposta: da li' non si infila niente. */
.griglia__tavolo{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem;
  margin-bottom:var(--wp--preset--spacing--30);
}
.griglia__frecce{display:grid;gap:.5rem}
.griglia__frecce--sopra{grid-column:2;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr))}
.griglia__frecce--lato{grid-column:1;grid-row:2;grid-template-rows:repeat(2,minmax(0,1fr))}
/* La scacchiera. Le tessere ci stanno dentro in assoluto e si muovono con una
   transizione: e' il solo modo perche' lo scorrimento si veda davvero invece di
   apparire gia' avvenuto. Ritaglia, cosi' quella che entra sbuca dal bordo e quella
   che esce se ne va oltre il capo opposto. */
.griglia__scacchiera{
  grid-column:2;grid-row:2;
  position:relative;overflow:hidden;
  border-radius:var(--dtg-raggio-s);
}
.griglia__scacchiera .griglia__tessera{
  position:absolute;top:0;left:0;
  width:var(--dtg-cella-l);height:var(--dtg-cella-a);
  padding:0;overflow:hidden;
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .griglia__scacchiera .griglia__tessera{transition:transform .38s var(--dtg-molla)}
  /* la tessera in arrivo non deve scivolare fino al bordo: ci viene messa e basta,
     poi parte insieme alle altre */
  .griglia__scacchiera .griglia__tessera.e-entra{transition:none}
}
.griglia__scacchiera .griglia__tessera.e-esce{z-index:0}

/* La freccia e' quella disegnata a due bordi del resto del sito, girata dove serve:
   in giu' per le colonne, a destra per le righe. Non un glifo. */
/* La freccia e' larga quanto la colonna perche' quello e' il bersaglio da premere, ma
   deve LEGGERSI come una fessura in cui si infila qualcosa e non come una casella vuota:
   bassa, tratteggiata, col colore del gioco appena accennato dentro. */
.griglia__freccia{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;min-width:28px;
  border:2px dashed color-mix(in srgb,var(--dtg-accento) 46%,transparent);
  border-radius:var(--dtg-raggio-s);
  background:color-mix(in srgb,var(--dtg-accento) 7%,transparent);
  color:var(--dtg-accento-basso);cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .22s var(--dtg-molla);
}
.griglia__freccia span{
  width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
}
.griglia__freccia--colonna span{rotate:45deg;translate:0 -2px}
.griglia__freccia--riga span{rotate:-45deg;translate:-2px 0}
.griglia__freccia:hover{background:var(--dtg-accento);border-style:solid;border-color:var(--dtg-accento);color:var(--wp--preset--color--inchiostro);transform:translateY(-2px)}
.griglia__freccia--riga:hover{transform:translateX(2px)}
.griglia__freccia:focus-visible{outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:3px}

/* Le tessere. Quelle sulla plancia sono ferme, quelle fuori sono bottoni: la
   differenza si vede prima di provare a premerle. */
/* La tessera. Dove c'e' la grafica vera del cartoncino la si mostra e il nome scende
   sotto come didascalia: l'immagine dice quale azione e', la parola la conferma — e a
   chi legge con un ausilio arriva comunque la parola, perche' l'immagine e' decorativa
   e non porta informazione che il testo non abbia gia'. */
.griglia__tessera{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;text-align:center;
  min-height:64px;padding:.5rem .6rem;
  border-radius:var(--dtg-raggio-s);
  background:var(--wp--preset--color--bianco);
  border:2px solid var(--wp--preset--color--panna-scura);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:500;line-height:1.25;
  color:var(--dtg-testo);
}
.griglia__tessera--mano{
  width:100%;cursor:pointer;
  font-family:var(--wp--preset--font-family--testo);
  transition:border-color .18s ease,background-color .18s ease,transform .22s var(--dtg-molla);
}
.griglia__tessera--mano:hover{transform:translateY(-2px);border-color:var(--dtg-accento)}
.griglia__tessera--mano[aria-pressed="true"]{
  background:var(--dtg-accento);border-color:var(--dtg-accento);
  color:var(--wp--preset--color--inchiostro);
}
.griglia__tessera--mano:focus-visible{outline:3px solid var(--wp--preset--color--inchiostro);outline-offset:3px}

/* La faccia della tessera: ritaglio orizzontale sul centro, dove sta il disegno
   dell'azione. Le tessere vere sono verticali e a questa misura entrerebbero storte
   nella griglia, quindi si guarda il centro e si lascia fuori il legno in eccesso. */
.griglia__faccia{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:calc(var(--dtg-raggio-s) - 3px);
  display:block;
}
.griglia__nome{display:block;line-height:1.2}

/* Dove la tessera porta la grafica del cartoncino il filetto crema sparisce: su un'arte
   chiara si legge come un alone bianco intorno al disegno, e una tessera vera non ha una
   cornice. Al suo posto un'ombra corta, che dice "e' un cartoncino appoggiato" senza
   disegnare un bordo. La selezione allora non puo' piu' essere un bordo colorato: e' un
   anello fuori dalla sagoma, che si vede su qualunque disegno. */
.griglia__tessera.e-illustrata{
  border-color:transparent;
  background:transparent;
  box-shadow:0 2px 7px -3px rgba(20,18,16,.42);
}
.griglia__tessera--mano.e-illustrata[aria-pressed="true"]{
  background:transparent;
  outline:3px solid var(--dtg-accento);
  outline-offset:2px;
}
.griglia__tessera--mano.e-illustrata:hover{border-color:transparent;box-shadow:0 6px 14px -6px rgba(20,18,16,.5)}

.griglia__mano{margin-bottom:var(--wp--preset--spacing--30)}
.griglia__mano-titolo{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-bottom:.5rem;
}
.griglia__mano ul{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;list-style:none;margin:0;padding:0;
}
.griglia__tessera--mano{aspect-ratio:1.46;min-height:0;padding:0;overflow:hidden}

/* L'esito sta SOPRA il tavolo, non sotto: e' la cosa per cui la sezione esiste — le due
   cose che la stessa mossa ha fatto — e leggerla dopo aver gia' distolto lo sguardo
   varrebbe meno. Vuoto non occupa spazio. */
.griglia__esito{
  order:-1;
  background:var(--wp--preset--color--bianco);
  border-radius:var(--dtg-raggio-s);
  padding:var(--wp--preset--spacing--20);
  margin-bottom:var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--didascalia);
  line-height:1.6;
}
.griglia__esito:empty{display:none}

.griglia__legenda{
  list-style:none;margin:0;padding:var(--wp--preset--spacing--20) 0 0;
  border-top:1px solid var(--wp--preset--color--panna-scura);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.4rem var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.griglia__legenda strong{color:var(--dtg-testo-mondo);font-weight:600}
.griglia__nota{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-top:var(--wp--preset--spacing--20);
}

@media (prefers-reduced-motion:no-preference){
  /* La tessera appena infilata arriva da fuori dal proprio lato: e' il solo movimento
     della sezione, e dice quale delle sei e' cambiata. */
  .griglia__tessera.e-entra{animation:tessera-entra .42s var(--dtg-molla) both}
}
@keyframes tessera-entra{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}

@media (max-width:640px){
  .griglia{padding:var(--wp--preset--spacing--30)}
  .griglia__mano ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .griglia__tessera{min-height:56px;font-size:.8125rem}
}

/* ============================================================
   La pagina «Scrivici»
   ============================================================
   Scrivere a un editore piccolo e' un atto al buio: non sai chi legge, in che lingua ti
   risponde, ne' quanto aspetti. La pagina risponde a quelle tre cose PRIMA di chiedere
   il messaggio, e mette il motivo prima del modulo — perche' due motivi su cinque hanno
   una strada che la mail la evita del tutto.

   Tutto funziona senza JavaScript: i motivi sono `radio` veri, e a scoprire il biglietto
   e il campo in piu' e' `:has()`. Dove `:has()` non c'e' si vede tutto: piu' lungo, mai
   rotto. */

.scrivici{
  max-width:var(--dtg-contenuto);margin-inline:auto;
  padding:0 var(--wp--preset--spacing--40);

  display:grid;
  grid-template-columns:minmax(0,58ch) minmax(0,1fr);
  column-gap:var(--wp--preset--spacing--60);
  align-items:start;
}
/* Quello che attraversa tutte e due le colonne. */
.scrivici > .insegna,
.scrivici > .scrivici__apertura,
.scrivici > .scrivici__soglia,
.scrivici .banco,
.scrivici__guasto,
.scrivici__fatto{grid-column:1 / -1}
/* La form sparisce come SCATOLA e resta nel documento: il banco attraversa le due
   colonne, il modulo sta nella prima. I campi continuano ad appartenerle, quindi
   l'invio non cambia di una virgola — collaudato con un POST vero. */
.scrivici__banco{display:contents}
.scrivici .modulo{grid-column:1}
/* La colonna di destra e' UN elemento, non due celle: lo scontrino e gli indirizzi sono
   fratelli dentro lo stesso gruppo, quindi si toccano. Tenendoli come due righe della
   griglia il browser distribuiva su entrambe l'avanzo del modulo, che e' molto piu'
   alto, e fra il foglietto e gli indirizzi restavano 179px di carta. */
.scrivici__colonna{grid-column:2}
/* Sale sotto la fettuccia come le altre pagine interne: due classi per battere
   `:root :where(.is-layout-flow) > :first-child{margin-block-start:0}` del core. */
.wp-block-post-content > .scrivici,
main > .scrivici{
  margin-top:calc((var(--wp--preset--spacing--30) + 26px) * -1);
  margin-bottom:0;
}

/* ---------- L'apertura: chi legge, e cosa non sappiamo ancora ---------- */
/* Due colonne, e la seconda e' una pila: il perche' e sotto l'impegno, attaccati.
   Lasciandoli piazzare da soli l'impegno finiva in una seconda riga alta quanto la
   tesi, cioe' 200px sotto la fine del testo a cui appartiene. La tesi occupa
   entrambe le righe della prima colonna, cosi' l'altezza della riga la decide il
   testo di fianco e non lei. */
.scrivici__apertura{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  align-items:start;
  margin-bottom:var(--wp--preset--spacing--50);
}
.scrivici__apertura .tempo{grid-column:1;grid-row:1 / span 2}
.scrivici__lede{grid-column:2;grid-row:1}
.scrivici__lede{
  /* A distanziare i blocchi qui e' il `gap` della griglia, non i margini. Il core
     stampa `:root :where(.is-layout-flow) > * {margin-block-start:...}` e quei 22px si
     SOMMANO al gap: la tesi finiva 78px sopra la propria spiegazione mentre la
     spiegazione ne stava 56 dal riquadro dopo. Il segnaposto lo azzerava gia'. */
  margin-block-start:0;
  max-width:52ch;
  /* Lo stesso passo del lede di «Chi siamo»: e' lo stesso oggetto, e un corpo suo
     sarebbe un gradino in piu' nella scala per niente. */
  font-size:var(--wp--preset--font-size--lede);
  color:var(--dtg-testo-secondario);
}
/* L'attesa dichiarata. Sta in alto e in vista, non in fondo: e' la domanda che chi
   scrive si fa per prima, e in fondo alla pagina se ne dimentica.

   Il numero prende il passo del `dato`, che e' il gradino dei numeri che si scandagliano
   invece di leggerli — lo stesso dei dati di prodotto. NON prende l'accento: in questa
   schermata l'arancio e' gia' sulla seconda riga della tesi, e uno solo per volta. Il
   filetto sopra e' quello del sistema: lega l'impegno alla pagina senza inscatolarlo. */
.scrivici__attesa{
  grid-column:2;grid-row:2;align-self:start;margin:0;
  padding-top:var(--wp--preset--spacing--20);
  border-top:2px solid var(--wp--preset--color--panna-scura);
}
.scrivici__entro{
  margin:0;
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.8rem,1.2rem + 1.9vw,2.7rem);
  font-weight:700;line-height:1;letter-spacing:-.03em;
}
.scrivici__entro-che{
  margin:.35rem 0 0;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}

@media (max-width:1080px){
  .scrivici__apertura{grid-template-columns:minmax(0,1fr)}
  /* A una colonna sola la seconda va tolta esplicitamente: `grid-column:2` su una
     griglia da una colonna non finisce a capo, se ne CREA una implicita — e le due si
     accavallano, perche' la larghezza dichiarata resta quella di una sola. */
  .scrivici__apertura .tempo,
  .scrivici__lede,
  .scrivici__attesa{grid-column:auto;grid-row:auto}
  /* A una colonna il gap di riga si somma al margine della tesi, e la tesi finisce
     piu' lontana dalla propria spiegazione di quanto lo sia il riquadro dopo. */
  .scrivici__apertura .tempo{margin-bottom:0}
}

/* La soglia: la sola linea di cresta, lo stesso segno che separa le zone ovunque. */
.scrivici__soglia{margin:0 0 var(--wp--preset--spacing--50)}
.scrivici__soglia svg{display:block;width:100%;height:26px}
.scrivici__soglia path{
  fill:none;stroke:var(--wp--preset--color--panna-scura);stroke-width:2;
}

/* ---------- Il banco dei motivi ---------- */
.scrivici__banco{margin:0 0 var(--wp--preset--spacing--60)}
.banco{border:0;padding:0;margin:0 0 var(--wp--preset--spacing--50)}
.banco__domanda{
  padding:0;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-2);
  font-weight:600;line-height:1.14;letter-spacing:-.02em;
  margin-bottom:var(--wp--preset--spacing--30);
}
/* Cinque in fila e non "quelli che ci stanno": con `auto-fit` l'ultimo restava solo
   su una seconda riga, e un biglietto orfano sembra una voce di un altro elenco. */
.banco__biglietti{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--wp--preset--spacing--20);
}

/* Il biglietto ha la sagoma della targhetta — angoli morbidi a sinistra, punta a
   destra — perche' dice la stessa cosa che dice un bottone: di qua si va avanti. E'
   carta finche' non lo scegli; scelto diventa inchiostro. L'accento NON entra qui: in
   questa schermata l'unica azione e' mandare il messaggio, e l'arancio e' suo. */
.biglietto{position:relative}
/* Il radio resta un radio: non si toglie dal documento, si toglie di vista. Chi naviga
   da tastiera lo raggiunge, chi usa un lettore lo sente come gruppo di scelte. */
.biglietto input{
  position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;
}
.biglietto label{
  --dtg-punta:18px;
  display:flex;flex-direction:column;gap:.25rem;
  height:100%;
  padding:var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
  /* Carta piu' scura del fondo: su panna il biglietto non scelto non si vedeva, e
     sembrava una colonna di testo invece di una cosa da prendere. Un contorno non si
     puo' mettere — il clip della punta lo taglierebbe — quindi a dargli un corpo e' il
     pieno. */
  background:var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s);
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  cursor:pointer;
  transition:transform .22s var(--dtg-molla),background-color .18s ease,color .18s ease;
}
.biglietto__titolo{
  font-family:var(--wp--preset--font-family--testo);
  font-size:1rem;font-weight:600;line-height:1.25;
}
.biglietto__sommario{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.biglietto input:checked + label{
  background:linear-gradient(180deg,
    var(--dtg-accento-alto) 0%,
    var(--dtg-accento) 55%,
    var(--dtg-accento-basso) 100%);
  color:var(--wp--preset--color--inchiostro);
  box-shadow:var(--dtg-ombra-tessera);
}
/* Sul pieno del gioco il testo attenuato non regge: il secondario e' sotto soglia su
   tutte e tre le rampe. La gerarchia la tiene il corpo, non il colore. */
.biglietto input:checked + label .biglietto__sommario{color:var(--wp--preset--color--inchiostro)}
/* Il clip mangia qualunque contorno: il fuoco diventa un anello disegnato dentro,
   come sui bottoni. */
.biglietto input:focus-visible + label{
  box-shadow:inset 0 0 0 3px var(--wp--preset--color--inchiostro);
}
.biglietto input:checked:focus-visible + label{
  box-shadow:inset 0 0 0 3px var(--wp--preset--color--inchiostro);
}

/* ---------- Lo scontrino ----------
   Il foglietto che il banco stacca quando scegli: dice cosa succede a quello che
   scrivi, e dove esiste una strada piu' corta la offre. Il bordo alto e' tagliato col
   linguaggio del sito — spezzata, angoli, nessuna curva — invece che con la
   dentellatura tonda di uno scontrino vero, che qui sarebbe un travestimento. */
.scontrino{
  display:none;
  /* Panna su panna non si vedeva: il taglio a spezzata c'era e non lo leggeva nessuno.
     La carta piu' scura e' la stessa dei filetti, quindi lo scontrino resta un foglio
     e non diventa un pannello nuovo nel sistema. */
  margin-top:0;
  padding:calc(var(--wp--preset--spacing--30) + 14px) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--panna-scura);
  clip-path:polygon(
    0 14px, 8% 0, 16% 12px, 24% 2px, 32% 13px, 40% 1px, 48% 12px, 56% 2px,
    64% 13px, 72% 1px, 80% 12px, 88% 3px, 96% 13px, 100% 6px,
    100% 100%, 0 100%);
}
.scontrino__testo{
  margin:0;
  max-width:62ch;
  color:var(--dtg-testo-secondario);
}
.scontrino__strada{margin:var(--wp--preset--spacing--20) 0 0}
@media (prefers-reduced-motion:no-preference){
  /* Il banco stacca il foglietto: arriva dall'alto invece di comparire. E' il solo
     movimento della pagina, e dice quale dei cinque hai preso. */
  .scontrino{animation:scontrino-staccato .34s var(--dtg-molla) both}
  /* Il sollevamento del biglietto si ferma per chi ha chiesto meno movimento: il
     cambio di pieno resta e basta a dire quale e' scelto. */
  .biglietto label:hover{transform:translateY(-2px)}
}
@keyframes scontrino-staccato{
  from{opacity:0;translate:0 -10px}
  to{opacity:1;translate:0 0}
}
.scontrino__strada a{
  font-weight:600;
  color:var(--dtg-testo);
  text-decoration-thickness:2px;text-underline-offset:.22em;
}

/* Il campo in piu' del motivo: c'e' sempre nel documento, si vede solo col suo motivo. */
.modulo__extra{display:none}

/* Quello che il banco scopre: per ogni motivo, il suo scontrino e il suo campo. */
.scrivici:has(#motivo-ordine:checked) .scontrino--ordine,
.scrivici:has(#motivo-ordine:checked) .modulo__extra--ordine,
.scrivici:has(#motivo-rivenditori:checked) .scontrino--rivenditori,
.scrivici:has(#motivo-rivenditori:checked) .modulo__extra--rivenditori,
.scrivici:has(#motivo-stampa:checked) .scontrino--stampa,
.scrivici:has(#motivo-stampa:checked) .modulo__extra--stampa,
.scrivici:has(#motivo-regole:checked) .scontrino--regole,
.scrivici:has(#motivo-regole:checked) .modulo__extra--regole,
.scrivici:has(#motivo-altro:checked) .scontrino--altro,
/* Finche' non hai scelto niente parla lui: senza, la colonna resta vuota dal banco al
   bottone proprio nella schermata che vede chi arriva. Sparisce al primo biglietto. */
.scrivici:not(:has(input[name="motivo"]:checked)) .scontrino--vuoto{
  display:block;
}
/* Dove `:has()` non c'e' — browser vecchi — si mostra tutto invece di niente: la pagina
   diventa piu' lunga e resta completa, che e' la regola del sito. */
@supports not (selector(:has(*))){
  .scontrino,.modulo__extra{display:block}
  /* Tranne il neutro: accanto a tutti gli altri direbbe una cosa falsa. */
  .scontrino--vuoto{display:none}
}

/* ---------- Il tavolo: il modulo e lo scontrino di fianco ----------
   Sotto il banco restava mezza pagina bianca a destra, ed e' lo stesso difetto delle
   pagine di legge prima che avessero un disegno: una striscia di testo appoggiata a
   sinistra di un contenitore largo. Lo scontrino va li', dove si vede mentre si scrive
   invece che prima di cominciare. Nel documento viene prima del modulo — spiega cosa
   succede a quello che mandi — e a spostarlo e' la griglia. */
/* Il modulo e' piu' alto dello scontrino: senza appiccicarlo, scrivendo il messaggio si
   e' gia' perso di vista quello che il banco aveva detto. */
.scrivici__colonna{position:sticky;top:var(--wp--preset--spacing--60)}

@media (max-width:1080px){
  /* A una colonna la pagina torna una fila sola, ma NON quella del documento.
     Due ragioni, e la seconda e' quella che conta.

     La prima: nel documento la colonna di destra sta dopo il modulo, e sul telefono
     vorrebbe dire compilare senza aver visto lo scontrino — cioe' senza la scorciatoia
     che per due motivi su cinque evita di scrivere del tutto.

     La seconda: **lo scontrino deve stare sotto il motivo che hai scelto**, non in fondo
     a tutti e cinque. In colonna i biglietti sono uno sotto l'altro: chi tocca il primo
     e trova la risposta cinque schermate piu' giu' non la collega alla propria domanda,
     e spesso non la vede nemmeno. Quindi qui si scioglie tutto in una fila sola — le
     scatole diventano trasparenti e biglietti e foglietti sono fratelli — e si dichiara
     l'ordine coppia per coppia. Solo lo scontrino del motivo scelto e' visibile, quindi
     a schermo compare esattamente sotto il suo biglietto. */
  .scrivici{
    display:flex;flex-direction:column;
    /* La regola del desktop dice `align-items:start` — li' serve, perche' lo scontrino
       non deve allungarsi fino in fondo alla colonna. In fila verticale invece vuol dire
       "ognuno largo quanto il proprio contenuto", ed e' quello che teneva l'insegna a
       274px su 346 e i biglietti a 256: il banner sembrava schiacciato a sinistra e le
       targhette non arrivavano al bordo. Qui si torna a stendere. */
    align-items:stretch;
  }
  .scrivici__colonna{display:contents;position:static}
  .scrivici .banco,
  .scrivici .banco__biglietti,
  .scrivici__scontrini{display:contents}

  .scrivici > .insegna{order:1}
  .scrivici > .scrivici__apertura{order:2}
  .scrivici > .scrivici__soglia{order:3}
  .scrivici__guasto{order:4}
  .scrivici__fatto,
  .banco__domanda{order:5}

  /* Le cinque coppie: biglietto, e subito sotto il suo foglietto. */
  .biglietto--ordine{order:20}
  .scontrino--ordine{order:21}
  .biglietto--rivenditori{order:22}
  .scontrino--rivenditori{order:23}
  .biglietto--stampa{order:24}
  .scontrino--stampa{order:25}
  .biglietto--regole{order:26}
  .scontrino--regole{order:27}
  .biglietto--altro{order:28}
  .scontrino--altro{order:29}
  /* Il neutro non appartiene a nessun biglietto: sta dopo tutti, dove sta la domanda
     che non hai ancora fatto. */
  .scontrino--vuoto{order:30}

  .scrivici .modulo{order:35}
  .scrivici__recapiti{order:40}

  /* Le scatole sparite non possono piu' portare i propri margini: li portano i pezzi. */
  .banco__domanda{margin-bottom:var(--wp--preset--spacing--30)}
  .biglietto{margin-bottom:var(--wp--preset--spacing--20)}
  .scontrino{margin-bottom:var(--wp--preset--spacing--40)}
  .scrivici .modulo{margin-top:var(--wp--preset--spacing--20)}
}

/* ---------- Sul telefono la pagina si mette in asse ----------
   In colonna stretta il testo bandiera a sinistra lascia il bordo destro frastagliato e
   la pagina sembra appoggiata a un lato. Le voci del sistema che non sono ne' una scelta
   ne' una spiegazione si centrano; **i biglietti e gli scontrini no**: quelli sono la
   domanda e la sua risposta, si leggono in colonna e restano allineati a sinistra come
   qualunque testo che si scorre. */
@media (max-width:860px){
  /* L'insegna: il titolo si centra nello spazio che il personaggio gli lascia, non
     nella fascia intera, o finirebbe sotto la figura. */
  .insegna h1{
    max-width:none;
    text-align:center;
    padding-right:calc(clamp(112px,32vw,150px) + var(--wp--preset--spacing--20));
  }
  /* La tesi delle pagine: vale su tutte, e' lo stesso oggetto tipografico. */
  .tempo{text-align:center}
  /* E con lei la spiegazione che le sta sotto: sono una coppia, e una tesi centrata
     sopra un paragrafo a bandiera legge peggio di tutte e due allineate allo stesso
     modo. Se non convince, sono queste tre righe. */
  .scrivici__lede,
  .rivenditori__lede,
  .editore__lede{text-align:center;margin-inline:auto}
}

@media (max-width:860px){
  .scrivici__lede,
  .scrivici__attesa,
  .banco__domanda,
  .scrivici__recapiti{text-align:center}
  /* Una `legend` si stringe al proprio testo per regola del browser: centrata dentro
     305px su una colonna da 346 sembra centrata male invece che centrata. */
  .banco__domanda{width:100%}
  /* Il filetto sopra l'impegno smette di essere un bordo di colonna e diventa un
     separatore centrato, largo quanto il testo. */
  .scrivici__recapiti p{margin-inline:auto}
}

/* ---------- Il modulo ---------- */
.modulo{max-width:58ch}
.modulo__campo{display:flex;flex-direction:column;margin:0 0 var(--wp--preset--spacing--30)}
.modulo__campo label{
  font-family:var(--wp--preset--font-family--testo);
  font-size:1rem;font-weight:600;
  margin-bottom:.35rem;
}
.modulo__facoltativo{
  font-weight:400;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.modulo__aiuto{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  margin-bottom:.45rem;
}
.modulo input[type=text],
.modulo input[type=email],
.modulo textarea{
  font-family:var(--wp--preset--font-family--testo);
  font-size:1.0625rem;line-height:1.5;
  padding:.75rem .9rem;
  background:#fff;
  color:var(--dtg-testo);
  /* Il bordo di un controllo e' informazione, non decorazione: sotto 3:1 il campo
     non si distingue dal fondo. `panna-scura` su bianco faceva 1,32:1. */
  border:1px solid var(--dtg-testo-secondario);
  border-radius:var(--dtg-raggio-s);
}
.modulo textarea{resize:vertical;min-height:9rem}
.modulo input:focus-visible,
.modulo textarea:focus-visible{
  outline:3px solid var(--wp--preset--color--inchiostro);
  outline-offset:2px;
  border-color:var(--wp--preset--color--inchiostro);
}
/* Il sistema non ha ancora un colore d'errore, e uno non si improvvisa qui: il campo
   sbagliato lo dicono il bordo pieno e la riga che spiega cosa manca. */
.modulo__campo--errore input,
.modulo__campo--errore textarea{border:2px solid var(--wp--preset--color--inchiostro)}
.modulo__errore{
  display:block;
  font-size:var(--wp--preset--font-size--didascalia);
  margin-bottom:.45rem;
}
.modulo__consenso{
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;
  align-items:start;
  margin:0 0 var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--didascalia);
}
.modulo__consenso input{margin-top:.15rem;width:1.15rem;height:1.15rem;accent-color:var(--wp--preset--color--inchiostro)}
/* Il controllo contro i programmi (ALTCHA, `inc/antibot.php`). Veste da campo del modulo: stesso
   bordo, stesso raggio, spunta in inchiostro come quella del consenso. Il verde del widget per
   «controllato» e il suo rosso per il guasto qui non esistono: il sistema non ha colori di stato. */
.modulo__controllo{margin:var(--wp--preset--spacing--30) 0 0}
.modulo__controllo altcha-widget{
  --altcha-max-width:22rem;
  --altcha-padding:.65rem .9rem;
  --altcha-color-base:#fff;
  --altcha-color-base-content:var(--dtg-testo);
  --altcha-color-neutral:var(--dtg-testo-secondario);
  --altcha-color-neutral-content:var(--dtg-testo-secondario);
  --altcha-border-color:var(--dtg-testo-secondario);
  --altcha-border-radius:var(--dtg-raggio-s);
  --altcha-checkbox-border-color:var(--dtg-testo-secondario);
  --altcha-color-primary:var(--wp--preset--color--inchiostro);
  --altcha-color-success:var(--wp--preset--color--inchiostro);
  --altcha-color-error:var(--wp--preset--color--inchiostro);
  --altcha-spinner-color:var(--dtg-testo);
  display:block;
  font-size:1rem;
}
.modulo__senza-js{
  max-width:58ch;
  margin:0;
  font-size:var(--wp--preset--font-size--didascalia);
}
.modulo__azione{margin:var(--wp--preset--spacing--40) 0 0}
/* L'informativa sta sotto il bottone perche' si legge nel momento in cui si manda, e non e'
   una spunta: per rispondere a chi scrive basta la sua richiesta. */
.modulo__informativa{
  margin:.75rem 0 0;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
/* L'esca: fuori dallo schermo e fuori dal tabulatore, non `display:none` — quello i
   programmi accorti lo saltano. */
.modulo__esca{
  position:absolute;left:-9999px;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- Gli esiti ---------- */
.scrivici__guasto{
  max-width:58ch;
  margin:0 0 var(--wp--preset--spacing--40);
  padding:var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--inchiostro);
  color:var(--dtg-testo-su-notte);
  border-radius:var(--dtg-raggio-m);
}
.scrivici__guasto p{margin:.4rem 0 0;color:var(--dtg-testo-su-notte-secondario)}
.scrivici__fatto{
  max-width:58ch;
  margin:0 0 var(--wp--preset--spacing--60);
  padding:var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--panna);
  border-radius:var(--dtg-raggio-l);
  box-shadow:var(--dtg-ombra-pannello);
}
.scrivici__fatto h2{margin-top:0}
.scrivici__fatto-nota{
  font-family:var(--wp--preset--font-family--nota),cursive;
  font-size:1.35rem;
  color:var(--dtg-testo);
  margin-bottom:0;
  rotate:-1.2deg;
}

/* ---------- I recapiti ---------- */
.scrivici__recapiti{
  margin-top:var(--wp--preset--spacing--40);
  padding-top:var(--wp--preset--spacing--30);
  border-top:1px solid var(--wp--preset--color--panna-scura);
  padding-bottom:var(--wp--preset--spacing--60);
}
/* In colonna il titolo di sezione non ha bisogno del corpo di un titolo di pagina:
   scende al passo piu' piccolo del display, che e' quello del motto nel piede. */
.scrivici__recapiti h2{
  font-size:var(--wp--preset--font-size--h-4);
  margin:0 0 var(--wp--preset--spacing--20);
}
.scrivici__recapiti p{
  color:var(--dtg-testo-secondario);
  font-size:var(--wp--preset--font-size--didascalia);
  margin:0 0 var(--wp--preset--spacing--20);
}
.scrivici__recapiti p:last-child{margin-bottom:0}
.scrivici__recapiti strong{color:var(--dtg-testo)}

@media (max-width:1080px){
  .banco__biglietti{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .scrivici{padding:0 var(--wp--preset--spacing--30)}
  .banco__biglietti{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   La pagina «Rivenditori»
   ============================================================
   Un negozio non decide su una promessa di partnership: decide su una scatola — quanto
   scaffale occupa, quante referenze sono, quanto ci mette ad arrivare. Quindi la pagina
   argomenta dall'oggetto, e lo scaffale e' la mensola del catalogo della home vista dal
   lato di chi la riempie: le tre scatole in fila che appoggiano sulla stessa riga, e
   sotto i dati che un buyer legge davvero.

   Dove il dato commerciale non esiste ancora c'e' il riquadro tratteggiato, che si vede
   anche da fuori: su questa pagina i buchi sono quattro numeri, e nasconderli
   significherebbe far scrivere un negozio per sapere lo sconto. */

.rivenditori{
  max-width:var(--dtg-contenuto);margin-inline:auto;
  padding:0 var(--wp--preset--spacing--40);
  /* La misura di lettura del sistema. Il token e' dichiarato dentro `.pagina`, che qui
     non c'e' — questa e' una pagina a piena larghezza — quindi si ridichiara sul
     contenitore invece di scrivere un numero staccato dal sistema. */
  --dtg-pagina-testo:58ch;
}
.wp-block-post-content > .rivenditori,
main > .rivenditori{
  margin-top:calc((var(--wp--preset--spacing--30) + 26px) * -1);
  margin-bottom:0;
}

/* Il contenuto scritto tiene la misura di lettura; lo scaffale no, e' largo quanto la
   pagina perche' e' una fila di oggetti. */
.rivenditori > h2,
.rivenditori > p{
  /* La misura di lettura e' quella del sistema (`--dtg-pagina-testo`), non una sua: a
     62ch la riga sfonda il tetto dei 75 caratteri. */
  max-width:var(--dtg-pagina-testo);
}
.rivenditori > h2{margin-top:var(--wp--preset--spacing--60)}
.rivenditori > .pagina__segnaposto{margin-bottom:var(--wp--preset--spacing--30)}

/* ---------- L'apertura ---------- */
.rivenditori__apertura{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  align-items:start;
  margin-bottom:var(--wp--preset--spacing--50);
}
.rivenditori__lede{
  /* Come sulle altre pagine: qui a distanziare e' il gap della griglia, e il
     `margin-block-start` che il core mette ai figli di un contenitore a flusso ci si
     sommerebbe. */
  margin-block-start:0;
  max-width:56ch;
  font-size:var(--wp--preset--font-size--lede);
  color:var(--dtg-testo-secondario);
}
@media (max-width:1080px){
  .rivenditori__apertura{grid-template-columns:minmax(0,1fr)}
  .rivenditori__apertura .tempo{margin-bottom:0}
}

/* La soglia e' il componente condiviso, dichiarato in testa al foglio insieme alle
   altre: qui era una quarta copia della stessa regola, e staccava di un passo diverso. */

/* ---------- Lo scaffale ----------
   Tre colonne, e le scatole appoggiano tutte sulla stessa riga: e' quella riga a dire
   che sono oggetti della stessa famiglia messi in fila, come sulla mensola della home.
   L'altezza del ripiano e' dichiarata una volta, cosi' i tre render — che hanno formati
   diversi, uno verticale — stanno alla stessa ALTEZZA e non alla stessa larghezza. */
.scaffale{
  --dtg-ripiano:210px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* Le righe sono dichiarate e condivise: e' quello che tiene allineate le tabelle. Il
     `row-gap` resta a zero perche' fra un pezzo e l'altro decidono i margini, che sono
     diversi riga per riga. */
  grid-template-rows:auto auto auto auto auto auto;
  column-gap:var(--wp--preset--spacing--50);
  align-items:start;
  margin-bottom:var(--wp--preset--spacing--50);
}
.referenza{display:contents}
/* Ogni pezzo sta nella riga che gli spetta, uguale per tutte e tre: cosi' la riga di
   stato che esiste su una sola colonna apre lo stesso spazio anche sulle altre due, e
   le tabelle ripartono tutte dalla stessa quota. */
.referenza__scatola{grid-row:1}
.referenza__nome{grid-row:2}
.referenza__riga{grid-row:3}
.referenza__stato{grid-row:4}
.referenza__dati{grid-row:5}
.referenza__nota{grid-row:6}
.referenza__azione{grid-row:7}
.referenza--verrix > *{grid-column:1}
.referenza--yatai > *{grid-column:2}
.referenza--sub-zero > *{grid-column:3}
/* Ogni referenza ridichiara l'accento per se', come le schede del catalogo: da li' il
   nome del gioco prende il proprio colore senza una regola in piu'. */
/* ⚠️ La rampa va ridichiarata TUTTA, non solo il gradino di mezzo. Il bottone la
   compone con tre `var()` — alto, accento, basso — e una proprieta' personalizzata
   sostituisce i suoi `var()` dove e' DICHIARATA, non dove e' letta: ridichiarando il
   solo `--dtg-accento` gli altri due restavano quelli del gioco pescato sul body, e i
   tre bottoni uscivano con le teste e le code tutte dello stesso colore. E' la stessa
   trappola di `--dtg-terreno` del 10/08, e si ripresenta ogni volta che un pezzo del
   sito prende il colore di un gioco che non e' quello della pagina. */
.referenza--verrix{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
  --dtg-testo-gioco:var(--dtg-testo-verrix);
}
.referenza--yatai{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
  --dtg-testo-gioco:var(--dtg-testo-yatai);
}
.referenza--sub-zero{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
  --dtg-testo-gioco:var(--dtg-testo-sub-zero);
}

/* La riga su cui appoggiano, e ne basta UNA: messa sul bordo basso di ogni scatola si
   spezzava a ogni gap, e tre segmenti non sono una mensola, sono tre sottolineature.
   Sta dietro le tre colonne e le attraversa tutte, all'altezza dove finisce il ripiano. */
.scaffale::before{
  content:"";position:absolute;left:0;right:0;
  top:var(--dtg-ripiano);height:2px;
  background:var(--wp--preset--color--panna-scura);
}
.referenza__scatola{
  height:var(--dtg-ripiano);
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:var(--wp--preset--spacing--30);
}
.referenza__scatola img{
  max-height:100%;width:auto;
  /* L'ombra segue la sagoma del render, non il suo rettangolo. */
  filter:drop-shadow(0 18px 20px rgba(20,18,16,.32));
}
.referenza__nome{
  font-size:1.56rem;
  color:var(--dtg-testo-gioco);
  margin:0 0 .2rem;
}
.referenza__riga{
  margin:0 0 var(--wp--preset--spacing--20);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}

/* I dati: due colonne, etichetta e valore, con il filetto che separa le righe. Non e'
   una scheda con l'icona e il titolo — e' l'elenco che un buyer scorre col dito. */
.referenza__dati{margin:0}
.referenza__dati > div{
  display:grid;
  grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:var(--wp--preset--spacing--20);
  padding:.45rem 0;
  border-top:1px solid var(--wp--preset--color--panna-scura);
}
.referenza__dati dt{
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.referenza__dati dd{margin:0;font-weight:500}
.referenza__dati dd strong{font-weight:700}
/* Il dato che non si sa ancora si scrive in tondo e in secondo piano: e' diverso da un
   dato nascosto, ed e' la stessa distinzione che vale sulle schede dei giochi. */
.referenza__ignoto{
  font-weight:400;font-style:italic;
  color:var(--dtg-testo-secondario);
}
/* La riga di stato: quando un titolo non si puo' ordinare lo si dice PRIMA dei dati,
   non dopo. In fondo alla colonna chi scorre le tre referenze legge l'eccezione per
   ultima, e nel frattempo ha gia' letto un prezzo e una durata. */
.referenza__stato{
  /* Si stringe a quello che dice invece di attraversare la colonna: e' l'unico pieno
     della pagina, e a tutta larghezza pesava piu' delle due referenze ordinabili. */
  justify-self:start;
  margin:0 0 var(--wp--preset--spacing--20);
  padding:.5rem .7rem;
  background:var(--wp--preset--color--inchiostro);
  color:var(--dtg-testo-su-notte);
  border-radius:var(--dtg-raggio-s);
  font-size:var(--wp--preset--font-size--didascalia);
}
.referenza__stato strong{color:var(--dtg-testo-su-notte)}
/* Il bottone di ogni referenza prende la rampa del PROPRIO gioco: l'accento sta gia'
   ridichiarato sulla referenza, quindi qui non serve una riga in piu'. E' la stessa
   regola delle schede del catalogo in home — tre accenti in una schermata sono la
   deroga dichiarata dal sistema, perche' li' il colore identifica invece di gridare.

   Sta in fondo alla colonna, sotto la nota, e in una riga sua della griglia condivisa:
   cosi' i tre bottoni sono allineati fra loro anche se le note sono di lunghezza
   diversa — allineati come le scatole sul ripiano, che e' l'argomento della pagina. */
.referenza__azione{
  margin:var(--wp--preset--spacing--30) 0 0;
  align-self:end;
}
/* Largo quanto la colonna del proprio gioco: cosi' i tre bottoni hanno la stessa
   misura anche se i nomi sono di lunghezza diversa, e il ripiano ha una seconda riga
   di oggetti allineati sotto quella delle scatole. Stretti al testo sembravano tre
   etichette di misure diverse appese in fondo a tre colonne. */
.referenza__azione .bottone{width:100%}
.referenza__nota{
  margin:var(--wp--preset--spacing--20) 0 0;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.referenza__nota strong{color:var(--dtg-testo)}

/* I due buchi dichiarati stanno affiancati e riempiono la larghezza dello scaffale
   sopra di loro: sono la sezione per cui un negozio e' arrivato, e una colonna sola
   lasciava vuota meta' pagina proprio li'. */
/* Rimasta una cosa sola, la griglia a due non serve piu': il pannello si prende la
   larghezza dello scaffale e a tenere corta la riga sono le due colonne del testo,
   come in «Da dove parte». */
.condizioni{margin-bottom:var(--wp--preset--spacing--40)}
.condizioni .pagina__segnaposto,
.condizioni__nostra{max-width:none;margin:0}

/* La condizione che c'e' — «non abbiamo un listino, le facciamo caso per caso» — non e'
   un buco: e' una scelta, ed e' quella su cui un negozio piccolo decide. Quindi e' carta
   piena di fianco al tratteggio, non un secondo riquadro in attesa: si vede a colpo
   d'occhio quale delle due cose e' decisa e quale no. */
.condizioni__nostra{
  padding:var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-m);
  columns:2;
  column-gap:var(--wp--preset--spacing--60);
}
.condizioni__nostra p{
  margin:0 0 var(--wp--preset--spacing--30);
  break-inside:avoid;
}
.condizioni__nostra p:last-child{margin-bottom:0}
/* Il titolo sta sopra tutte e due le colonne: e' la frase che regge il blocco, e
   incolonnata a sinistra sembrerebbe l'inizio del solo testo di sinistra. */
.condizioni__titolo{
  column-span:all;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-3);
  font-weight:600;line-height:1.2;letter-spacing:-.01em;
  margin-bottom:var(--wp--preset--spacing--30);
}

@media (max-width:1080px){
  .scaffale{--dtg-ripiano:170px;gap:var(--wp--preset--spacing--40)}
}
@media (max-width:860px){
  /* A una colonna le scatole sono una sotto l'altra: una riga sola che le attraversa
     tutte non direbbe piu' niente, il ripiano torna a essere la base di ognuna, e le
     righe condivise non hanno piu' nessuno con cui allinearsi. */
  .scaffale{
    display:flex;flex-direction:column;
    gap:var(--wp--preset--spacing--50);
    --dtg-ripiano:200px;
  }
  .scaffale::before{display:none}
  .referenza{display:flex;flex-direction:column;max-width:56ch}
  .referenza__scatola{border-bottom:2px solid var(--wp--preset--color--panna-scura)}
  .referenza > *{grid-row:auto;grid-column:auto}
  .referenza__azione{align-self:auto}
}

/* ---------- La chiusura ----------
   I tre capoversi si dividono la larghezza dello scaffale invece di stare in una
   striscia a sinistra: la riga resta corta come dev'essere, e sotto le tre scatole non
   resta mezza pagina bianca. `columns` e non una griglia perche' sono tre e non due —
   il testo si distribuisce da solo, e non c'e' un terzo capoverso da collocare a mano. */
.rivenditori__partenza{
  columns:2;
  column-gap:var(--wp--preset--spacing--60);
  margin-bottom:var(--wp--preset--spacing--40);
}
.rivenditori__partenza p{
  margin:0 0 var(--wp--preset--spacing--30);
  /* un capoverso spezzato a meta' fra due colonne si legge due volte per capirlo */
  break-inside:avoid;
}
.rivenditori__partenza p:last-child{margin-bottom:0}

.rivenditori__azione{margin:var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60)}

@media (max-width:640px){
  .rivenditori{padding:0 var(--wp--preset--spacing--30)}
}

/* ---------- I bottoni sul telefono ----------
   Larghi quanto la colonna: il bersaglio cresce dove si tocca col pollice, e la
   targhetta smette di galleggiare a sinistra di una pagina che sotto gli 860 e' tutta
   in asse. La punta resta al suo posto, sul bordo destro.

   Restano fuori i bottoni della barra d'acquisto — che sta su una riga sua, col prezzo
   di fianco — e la variante piccola, che e' compatta di proposito. */
@media (max-width:860px){
  .bottone:not(.bottone--piccolo):not(.barra__compra):not(.barra__campagna){
    width:100%;
  }
}

/* ---------- Il piede sul telefono ----------
   Decisione di Gianluca: sotto gli 860 le tre liste stanno su due colonne invece che
   una sotto l'altra — meta' dello scorrimento in meno alla fine di ogni pagina — e il
   marchio si prende una riga sua, centrato. Da li' in giu' e' tutto in asse, come il
   resto della pagina a questa misura. */
@media (max-width:860px){
  .piede__corpo{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
    text-align:center;
  }
  /* Il marchio non e' una delle colonne: e' l'insegna del piede, e sta per conto suo. */
  .piede__marchio{grid-column:1 / -1}
  .piede__marchio img{margin-inline:auto}
  .piede__nota{max-width:38ch;margin-inline:auto}
  /* Tre liste in due colonne fanno 2 + 1: l'ultima si stende su tutte e due invece di
     restare appesa a sinistra, dove sembrerebbe che ne manchi una. */
  .piede__colonna:last-child{grid-column:1 / -1}
  .piede__colonna ul{display:inline-block;text-align:center}
  .piede__legale{
    justify-content:center;text-align:center;
    gap:.4rem 1rem;
  }
  .piede__firma{width:100%}
}

/* ---------- Il carrello che WooCommerce mette da solo ----------
   Nella testata di un tema a blocchi WooCommerce infila il blocco «Mini Cart»: un
   secondo carrello di fianco al logo, col suo numero. Due numeri che dicono la stessa
   cosa in due posti sono due cose da tenere d'accordo, e la prima volta che non lo sono
   il visitatore crede a quello sbagliato. Qui il carrello e' uno solo, ed e' il tondo
   sulla testa destra della fettuccia.

   Il bottone si nasconde ma NON si toglie: il suo cassetto laterale e' quello buono, e
   il tondo glielo apre passandogli il tocco (vedi assets/js/carrello.js). Il cassetto
   vive appeso al <body> e non qui dentro, quindi nasconderlo non lo tocca. */
.wc-block-mini-cart{display:none}

/* ---------- Gli strumenti della testata sul telefono ----------
   Decisione di Gianluca: l'omino sta a destra, accanto al numero degli articoli, dove
   la freccia del menu' non puo' passargli sopra. L'ordine diventa freccia, carrello,
   omino, lingua — l'account e' l'ultima cosa che si tocca delle quattro, e sta bene in
   fondo insieme alla lingua.

   Con la freccia rientrata in fila i quattro devono starci davvero: il marchio arriva a
   142 e il contenuto finisce a 353, quindi ci sono ~200px per quattro comandi. Le
   distanze si stringono, e sotto i 400 la sigla della lingua si toglie: la bandiera dice
   gia' quale lingua e', e la sigla e' una ripetizione che costa 24px. */
@media (max-width:860px){
  /* Gli strumenti si stringono per lasciare la corsia alla freccia, che sta al centro
     della testata (172-202, piu' 2px di anello). Senza, il primo della fila le finisce
     sotto: prima era l'omino, e spostando solo lui sarebbe toccato al carrello.

     Si toglie imbottitura, non misura: le icone restano quelle e il tondo del numero
     pure. Cosi' i tre comandi stanno tutti a destra di 204 e nessuno la incontra. */
  .testata__strumenti{gap:.25rem;margin-right:4px}
  .carrello{padding:4.8px 4px;gap:4px}
  .lingue summary{padding:4.8px 4px;gap:5px}
  /* Il tondo del numero scende di un paio di pixel: e' l'ultimo posto dove prendere
     spazio senza toccare nessuna icona, e a 20px il numero ci sta comodo lo stesso. */
  .carrello__conteggio{width:1.25rem;height:1.25rem}
  .carrello{order:1}
  .wp-block-woocommerce-customer-account,
  .wc-block-customer-account{order:2}
  .lingue{order:3}
}
@media (max-width:400px){
  .lingue__sigla{display:none}
}

/* A colonna stretta le due colonne di «Da dove parte» diventerebbero due strisce da
   diciannove caratteri: si torna a una. Sta in fondo al foglio e non nella media query
   di sopra perche' la regola base arriva dopo di quella — stessa specificita', vince
   l'ultima, e l'override spariva senza dire niente. */
@media (max-width:860px){
  .rivenditori__partenza{columns:1}
}

/* A colonna stretta anche il pannello delle condizioni torna a una colonna sola. */
@media (max-width:860px){
  .condizioni__nostra{columns:1;padding:var(--wp--preset--spacing--30)}
}

/* ---------- «Rivenditori» sul telefono: anche le sezioni si mettono in asse ----------
   La pagina a colonna stretta era gia' centrata in apertura; da qui in giu' seguono i
   titoli delle tre sezioni e la testa di ogni referenza. Restano a sinistra le tabelle
   dei dati e le note: sono elenchi che si scorrono col dito, e la colonna su cui l'occhio
   ritorna deve restare dritta. */
@media (max-width:860px){
  .rivenditori > h2{text-align:center}
  .referenza__nome,
  .referenza__riga{text-align:center}
}

/* ---------- La scheda di un gioco sul telefono: la colonna ha un asse solo ----------
   Decisione di Gianluca dell'11/08, stessa linea delle altre pagine: si centra quello
   che PRESENTA — titoli, claim, l'introduzione di un atto, chi parla — e resta a
   bandiera quello che si LEGGE, cioe' il testo corrente di ogni atto. */
@media (max-width:860px){
  /* 1. Il titolo del gioco e, sotto, l'anno: era una spilletta di fianco al nome, e in
        colonna una riga da due pezzi di peso diverso non si centra, si sbilancia. */
  .apertura-gioco__titolo{text-align:center}
  .apertura-gioco__anno{display:block;margin:.3rem 0 0}

  /* 2. Il claim — con la sua riga nell'accento — e la descrizione breve. */
  .apertura-gioco__claim,
  .apertura-gioco__lede{text-align:center;margin-inline:auto}

  /* 3 e 5. Il titolo di ogni atto e la voce di chi lo presenta. Il blocco dei dati non
        si tocca: le sue voci sono gia' incolonnate e centrate una per una. */
  .atto__titolo{text-align:center}
  .presenta__titolo,
  .presenta__battuta,
  .presenta__cartellino{text-align:center}
}

/* ---------- La giostra non deve far scorrere la PAGINA ----------
   Le schede della giostra sono posizionate in assoluto e spinte di lato da `--off`:
   quelle piu' lontane finiscono oltre il bordo del contenitore e, senza un ritaglio,
   allargano il documento. Misurato sulla scheda di Verrix: 1681px di larghezza di
   scorrimento su una finestra da 1441, e 925 su un telefono da 375 — la pagina si
   trascinava di lato in tutte e due le misure.

   `clip` e non `hidden`: `hidden` farebbe della giostra un contenitore di scorrimento e
   si porterebbe dietro una barra verticale sua; `clip` taglia e basta. Non cambia
   niente di quello che si vede — a tre schede di distanza sono gia' marcate `data-fuori`
   e spente — toglie solo il trascinamento della pagina. */
.giostra{overflow-x:clip}

/* ==========================================================================
   Negozio, carrello, cassa e account
   --------------------------------------------------------------------------
   WooCommerce porta le proprie quattro pagine gia' funzionanti e vestite di
   niente: campi grigi, bottoni rettangolari, riquadri di servizio. In mezzo a
   un sito disegnato si vedeva il salto — al primo clic sul carrello si usciva
   dal sito, e alla cassa il sito spariva del tutto.

   Qui non si riscrive il funzionamento: si riveste. Le regole sono quasi tutte
   ridichiarazioni degli stessi tre oggetti che il sito usa gia' altrove — la
   TARGHETTA A PUNTA per le azioni, la CARTA per i raggruppamenti, la SOGLIA per
   gli stacchi — applicate ai selettori di WooCommerce. Dove serve un valore
   nuovo si passa da una variabile, mai da un colore scritto a mano.

   Un solo principio in tutte le pagine: alla cassa il sito non deve sparire, ma
   nemmeno mettersi in mezzo. Chi paga vuole vedere il marchio, sapere dove sono
   le condizioni e avere UNA strada indietro. Il resto e' rumore.
   ========================================================================== */

/* Il negozio ha il fondo delle pagine interne, non quello dell'apertura: sotto
   la testata non c'e' nessun crinale da raccordare. */
:root{
  --dtg-carta:#FFFDF7;                 /* la carta: panna schiarita, mai bianco puro */
  --dtg-filetto:rgba(20,18,16,.14);    /* il filetto di separazione, sempre lo stesso */
  --dtg-filetto-forte:rgba(20,18,16,.28);
}

/* ---------- Negozio ---------- */

.negozio__attacco{
  max-width:62ch;margin:0 auto var(--wp--preset--spacing--40);
  text-align:center;color:var(--dtg-testo-secondario);
}

/* La barra sopra lo scaffale: conteggio a sinistra, ordinamento a destra. Con tre
   prodotti non serve a niente, ma il giorno che ne arrivano dieci c'e' gia'. */
.negozio__barra{
  max-width:var(--dtg-contenuto);margin:0 auto var(--wp--preset--spacing--30);
  padding:0 var(--wp--preset--spacing--40);
  align-items:center;gap:var(--wp--preset--spacing--20);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.negozio__barra .wc-block-product-results-count,
.negozio__barra .wc-block-catalog-sorting{margin:0}
/* Il menu a tendina di serie e' quello del sistema operativo: qui prende la carta,
   il filetto e la freccia disegnata come quella della lingua in testata. */
.negozio__barra select,
.wc-block-catalog-sorting select{
  appearance:none;-webkit-appearance:none;
  padding:.55rem 2.2rem .55rem .8rem;
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto-forte);border-radius:var(--dtg-raggio-s);
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%,calc(100% - .78rem) 55%;
  background-size:.36rem .36rem,.36rem .36rem;
  background-repeat:no-repeat;
}
.negozio__barra select:focus-visible,
.wc-block-catalog-sorting select:focus-visible{
  outline:none;border-color:var(--dtg-accento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dtg-accento) 40%,transparent);
}

/* Lo scaffale. La griglia la impone il tema e non il blocco: WooCommerce ragiona a
   colonne fisse, qui le colonne si contano da sole in base allo spazio, cosi' due
   scatole non restano orfane in fondo. */
.negozio__scaffale{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:0 var(--wp--preset--spacing--40);
}
.negozio__scaffale .wc-block-product-template{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--wp--preset--spacing--30);
  margin:0;padding:0;list-style:none;
}
.negozio__scaffale .wc-block-product-template::before,
.negozio__scaffale .wc-block-product-template::after{content:none}

/* Ogni scatola sta nel proprio mondo: la carta prende una velatura dell'accento del
   gioco, e la targhetta dentro eredita lo stesso colore senza una regola in piu'.
   La classe `gioco-<slug>` sulla card la scrive `dtg_classe_gioco_prodotto()`. */
.negozio__scaffale li.gioco-verrix{
  --dtg-accento:var(--wp--preset--color--verde);
  --dtg-accento-alto:var(--wp--preset--color--verde-alto);
  --dtg-accento-basso:var(--wp--preset--color--verde-basso);
  --dtg-accento-fioritura:var(--dtg-verde-fioritura);
  --dtg-gioco-testo:var(--dtg-testo-verrix);
}
.negozio__scaffale li.gioco-yatai{
  --dtg-accento:var(--wp--preset--color--arancio);
  --dtg-accento-alto:var(--wp--preset--color--arancio-alto);
  --dtg-accento-basso:var(--wp--preset--color--arancio-basso);
  --dtg-accento-fioritura:var(--dtg-arancio-fioritura);
  --dtg-gioco-testo:var(--dtg-testo-yatai);
}
.negozio__scaffale li.gioco-sub-zero{
  --dtg-accento:var(--wp--preset--color--ghiaccio-vivo);
  --dtg-accento-alto:var(--wp--preset--color--ghiaccio-alto);
  --dtg-accento-basso:var(--wp--preset--color--ghiaccio-basso);
  --dtg-accento-fioritura:var(--dtg-ghiaccio-fioritura);
  --dtg-gioco-testo:var(--dtg-testo-sub-zero);
}

.negozio__scaffale li.wc-block-product{
  display:flex;flex-direction:column;align-items:center;
  margin:0;padding:0 0 var(--wp--preset--spacing--30);
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  border-radius:var(--dtg-raggio-l);
  box-shadow:var(--dtg-ombra-tessera);
  overflow:hidden;
  transition:transform .22s var(--dtg-molla),box-shadow .22s var(--dtg-molla);
}
.negozio__scaffale li.wc-block-product:hover{
  transform:translateY(-3px);box-shadow:var(--dtg-ombra-pannello);
}
/* Il ripiano su cui posa la scatola: la fioritura del gioco, la stessa velatura che
   sulla home sta dietro la testa del personaggio. La scatola e' un render su fondo
   trasparente, quindi il colore le passa dietro e non le fa da cornice. */
.negozio__scaffale .wc-block-components-product-image{
  width:100%;margin:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--dtg-accento-fioritura) 70%,transparent) 0%,
    transparent 100%);
  border-bottom:1px solid var(--dtg-filetto);
}
.negozio__scaffale .wc-block-components-product-image a{display:block}
.negozio__scaffale .wc-block-components-product-image img{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:contain;
  padding:var(--wp--preset--spacing--20);
  background:transparent;
}
.negozio__scaffale .wp-block-post-title{
  margin:var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
  font-size:var(--wp--preset--font-size--h-3);
}
.negozio__scaffale .wp-block-post-title a{text-decoration:none}
.negozio__scaffale .wp-block-post-title a:hover{color:var(--dtg-gioco-testo,var(--dtg-accento-basso))}
.negozio__scaffale .wc-block-components-product-price{
  margin:var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--h-4);font-weight:700;
}
/* Il prezzo pieno accanto a quello scontato non deve gridare quanto il prezzo vero */
.negozio__scaffale .wc-block-components-product-price del{
  color:var(--dtg-testo-secondario);font-weight:400;font-size:.9em;
}
.negozio__scaffale .wc-block-components-product-button{margin:auto 0 0}

.negozio__patti{
  max-width:var(--dtg-contenuto);
  margin:var(--wp--preset--spacing--50) auto 0;
  padding:var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
  border-top:1px solid var(--dtg-filetto);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--wp--preset--spacing--30);
  list-style:none;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.negozio__patti strong{display:block;color:var(--dtg-testo)}

/* ---------- Le azioni: la targhetta a punta ----------
   Tutti i bottoni pieni di WooCommerce — "aggiungi al carrello", "procedi al
   pagamento", "effettua ordine", "accedi" — prendono la stessa sagoma dei bottoni
   del sito. La forma e' dichiarata qui una volta sola invece che sui singoli
   selettori: quando WooCommerce aggiunge un bottone nuovo, nasce gia' vestito. */
.wc-block-components-button:not(.is-link),
.woocommerce-button,
.woocommerce-Button,
.wc-block-components-product-button .wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce input[type="submit"].button{
  --dtg-punta:20px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;
  padding:0 calc(var(--wp--preset--spacing--30) + var(--dtg-punta)) 0 var(--wp--preset--spacing--30);
  border:0;border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s);
  background:linear-gradient(180deg,
    var(--dtg-accento-alto) 0%,
    var(--dtg-accento) 55%,
    var(--dtg-accento-basso) 100%);
  color:var(--wp--preset--color--inchiostro);
  font-family:var(--wp--preset--font-family--testo);
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  box-shadow:var(--dtg-ombra-tessera);
  transition:transform .22s var(--dtg-molla),filter .18s ease;
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce-Button:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.04)}
.wc-block-components-button:not(.is-link):active,
.woocommerce button.button:active{transform:translateY(0)}
/* la punta mangia il contorno: il focus non puo' essere un outline, entra dentro */
.wc-block-components-button:not(.is-link):focus-visible,
.woocommerce-Button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible{
  outline:none;box-shadow:inset 0 0 0 3px var(--wp--preset--color--inchiostro);
}
.wc-block-components-button:not(.is-link)[disabled],
.wc-block-components-button:not(.is-link).is-loading{
  filter:grayscale(.4);opacity:.6;cursor:not-allowed;transform:none;
}
/* Il testo dentro il bottone di WooCommerce e' un altro elemento: senza questo
   resterebbe con l'interlinea del blocco e la punta gli passerebbe sopra. */
.wc-block-components-button__text{line-height:1;display:inline-flex;align-items:center;gap:.5rem}

/* I bottoni "secondari" — quelli che tornano indietro o aprono un dettaglio — non
   sono azioni di acquisto e non devono avere lo stesso peso: filetto, nessun pieno.

   ⚠️ WooCommerce chiama questo stile in DUE modi, e i due nomi non arrivano dallo
   stesso posto. Nell'editor il bottone porta `outlined`, che è il nome della variante
   del componente React. In pagina no: il render lato server aggiunge `is-style-outline`
   e basta — `MiniCartCartButtonBlock::render()`, «Default style class is not added by
   default, so it needs to be added manually». Chi legge solo l'editor vede `outlined`
   e scrive la regola su quello: e' esattamente quello che era successo qui, e il
   bottone «Visualizza il mio carrello» del cassetto non veniva agganciato da nessuno.

   Il difetto che ne usciva non era che restava di serie: prendeva la targhetta a punta
   della regola generale qui sopra e insieme lo `background:transparent` di WooCommerce,
   che vince di specificita'. Cioe' una punta senza colore, invisibile sul panna — e
   riappariva al passaggio del mouse, quando WooCommerce riempie di scuro e la sagoma
   torna a vedersi. Restava visibile solo la scheggia di filetto sulla punta, perche'
   il contorno viene ritagliato dal `clip-path`.

   Il `body` davanti non e' un vezzo: le regole di WooCommerce qui valgono
   `.wc-block-components-button:not(.is-link).is-style-outline`, e senza un peso in piu'
   si vincerebbe solo per ordine di caricamento — che con gli stili dei blocchi, montati
   quando il blocco compare, non e' garantito. */
body .wc-block-components-button:not(.is-link).outlined,
body .wc-block-components-button:not(.is-link).is-style-outline,
.wc-block-cart__submit-container .wc-block-components-button.outlined{
  background:transparent;color:var(--dtg-testo);
  box-shadow:inset 0 0 0 2px var(--dtg-filetto-forte);
  clip-path:none;border-radius:var(--dtg-raggio-s);
  padding-inline:var(--wp--preset--spacing--30);
}
/* Al passaggio del mouse WooCommerce riempie di `#1e1e1e`, che e' il suo grigio e non
   l'inchiostro del sito: dentro un cassetto vestito di panna si vedrebbe il salto. */
body .wc-block-components-button:not(.is-link).outlined:hover,
body .wc-block-components-button:not(.is-link).is-style-outline:hover,
body .wc-block-components-button:not(.is-link).outlined:focus,
body .wc-block-components-button:not(.is-link).is-style-outline:focus{
  background-color:var(--wp--preset--color--inchiostro);
  color:var(--dtg-testo-su-notte);
}
/* I link travestiti da bottone restano link: cambiarli in targhette moltiplicherebbe
   le azioni forti in pagina e nessuna sarebbe piu' la principale. */
.wc-block-components-button.is-link{
  background:none;box-shadow:none;clip-path:none;padding:0;min-height:0;
  color:var(--dtg-testo);text-transform:none;letter-spacing:0;font-weight:400;
  text-decoration:underline;text-underline-offset:.2em;
}
.wc-block-components-button.is-link:hover{color:var(--dtg-accento-basso)}

/* ---------- I campi ----------
   Un campo di WooCommerce e' un riquadro bianco con un filo grigio. Qui prende la
   carta, il filetto del sito e un anello di fuoco nel colore del gioco caricato. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select,
.wc-block-components-combobox-control input,
.woocommerce form .input-text,
.woocommerce-page form .input-text,
.woocommerce form select,
.woocommerce-page form select{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto-forte);
  border-radius:var(--dtg-raggio-s);
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--corpo);
  color:var(--dtg-testo);
}
.woocommerce form .input-text,
.woocommerce-page form .input-text,
.woocommerce form select{padding:.85rem 1rem;width:100%}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus{
  outline:none;border-color:var(--dtg-accento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dtg-accento) 38%,transparent);
}
/* La casella di spunta di serie e' quella del sistema: qui prende il quadrato del
   sito e la spunta nel colore del gioco. */
.wc-block-components-checkbox__input[type="checkbox"],
.woocommerce input[type="checkbox"]{
  accent-color:var(--dtg-accento);
}
.wc-block-components-checkbox__mark{fill:var(--wp--preset--color--inchiostro)}

/* ---------- La carta: riepiloghi, opzioni, riquadri ----------
   Tutto quello che WooCommerce raggruppa in un riquadro grigio diventa una carta:
   fondo chiaro, filetto sottile, raggio ampio, ombra tessera. */
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-shipping-rates-control,
.wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-MyAccount-content,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-overview{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  border-radius:var(--dtg-raggio-m);
  box-shadow:var(--dtg-ombra-tessera);
}
.wp-block-woocommerce-checkout-order-summary-block{padding:var(--wp--preset--spacing--30)}

/* ---------- Carrello ---------- */

.carrello-pagina .wp-block-woocommerce-cart{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.carrello-pagina .wc-block-cart__main{padding-right:var(--wp--preset--spacing--40)}
/* L'intestazione della tabella e' un'insegna, non un titolo: maiuscoletto spaziato
   fra due filetti, come l'iscrizione sul pannello del motto. */
.carrello-pagina .wc-block-cart-items__header{
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dtg-testo-secondario);
  border-bottom:1px solid var(--dtg-filetto-forte);
}
.carrello-pagina .wc-block-cart-items__row{border-bottom:1px solid var(--dtg-filetto)}
.carrello-pagina .wc-block-cart-item__image img{
  border-radius:var(--dtg-raggio-s);
  background:color-mix(in srgb,var(--dtg-accento-fioritura) 45%,transparent);
}
.carrello-pagina .wc-block-components-product-name{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-4);font-weight:600;
  text-decoration:none;
}
.carrello-pagina .wc-block-components-product-name:hover{color:var(--dtg-accento-basso)}
/* Il selettore di quantita': tre pezzi di una cosa sola, quindi un filetto solo
   intorno e non tre bottoni sciolti. */
.carrello-pagina .wc-block-components-quantity-selector{
  border:1px solid var(--dtg-filetto-forte);border-radius:var(--dtg-raggio-s);
  background:var(--dtg-carta);
}
.carrello-pagina .wc-block-components-quantity-selector__button{
  color:var(--dtg-testo);
}
.carrello-pagina .wc-block-components-quantity-selector__button:hover{
  background:color-mix(in srgb,var(--dtg-accento) 18%,transparent);
}

/* La colonna dei totali e' una carta appiccicata in alto: scorrendo un carrello
   lungo il totale non deve andarsene fuori schermo. */
.carrello-pagina .wc-block-cart__sidebar .wc-block-components-sidebar{
  position:sticky;top:var(--wp--preset--spacing--40);
}
.carrello-pagina .wp-block-woocommerce-cart-order-summary-block{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  border-radius:var(--dtg-raggio-m);
  box-shadow:var(--dtg-ombra-tessera);
  padding:var(--wp--preset--spacing--30);
}
.wc-block-components-totals-item__label{color:var(--dtg-testo-secondario)}
.wc-block-components-totals-footer-item{
  border-top:1px solid var(--dtg-filetto-forte);
  padding-top:var(--wp--preset--spacing--20);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-4);font-weight:700;
  color:var(--dtg-testo);
}
/* Il bottone che porta alla cassa e' l'azione della pagina: largo quanto la carta,
   con la punta a destra come tutte le azioni che mandano avanti. */
.wc-block-cart__submit-button{width:100%}

/* Il carrello vuoto di serie e' una riga di testo in mezzo al niente. Qui almeno
   riporta in vetrina invece di lasciare un vicolo cieco. */
.wp-block-woocommerce-empty-cart-block{
  max-width:62ch;margin:0 auto;text-align:center;
  padding-bottom:var(--wp--preset--spacing--60);
}

/* L'ultima riga di una griglia di prodotti sta a sinistra, e con una riga sola vuol
   dire che tutta la vetrina e' storta rispetto al titolo che le sta sopra — che qui
   e' centrato. Succede appena il numero di giochi non e' un multiplo delle colonne:
   le colonne restano quelle dichiarate e quella che avanza resta vuota a destra.

   La griglia di WooCommerce e' una `flex` a capo: `center` distribuisce il vuoto ai
   due lati invece di ammucchiarlo in fondo. Vale per qualunque conto — tre giochi su
   quattro colonne oggi, un quarto gioco che va a capo da solo domani — quindi il
   catalogo puo' crescere senza che nessuno si ricordi di rimettere a posto un numero.

   Solo dentro il carrello vuoto: nel negozio la griglia e' piena e allineare a
   sinistra e' giusto, perche' la riga incompleta deve stare sotto quella sopra. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products{justify-content:center}

/* ---------- Cassa ---------- */

.testata-guscio--cassa{background:var(--wp--preset--color--panna)}
/* Niente strozzatura: la fettuccia della cassa non deve far respirare nessun menu',
   quindi resta della stessa altezza da un capo all'altro. */
.testata--cassa{
  display:flex;align-items:center;gap:var(--wp--preset--spacing--30);
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--inchiostro);
  border-radius:0 0 var(--dtg-raggio-m) var(--dtg-raggio-m);
}
.testata--cassa .testata__marchio{display:block;flex:0 0 auto}
.testata--cassa .testata__marchio img{display:block;width:110px;height:auto}
/* Il passo in cui si e': non e' decorazione, e' la sola indicazione di dove sei
   dentro un percorso che ti ha tolto il menu'. */
.testata--cassa .testata__passo{
  margin:0 auto 0 0;
  font-family:var(--wp--preset--font-family--testo);
  font-size:var(--wp--preset--font-size--didascalia);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dtg-testo-su-notte-secondario);
}
.testata--cassa .testata__indietro{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--dtg-testo-su-notte);text-decoration:none;
  font-size:var(--wp--preset--font-size--didascalia);
  padding:.5rem .85rem;border-radius:var(--dtg-raggio-s);
  transition:background .18s ease;
}
.testata--cassa .testata__indietro:hover{
  background:rgba(243,239,226,.12);color:var(--dtg-testo-su-notte);
}
.testata--cassa .testata__indietro svg{width:20px;height:20px;flex:0 0 auto}

.cassa-pagina{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.cassa-pagina .wc-block-checkout__form{padding-right:var(--wp--preset--spacing--40)}
.cassa-pagina .wc-block-components-checkout-step__title,
.cassa-pagina .wc-block-components-title{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h-3);font-weight:600;letter-spacing:-.01em;
}
/* Il numero del passo: WooCommerce li nasconde, ma alla cassa dire "sei al terzo di
   cinque" vale piu' di un titolo in piu'. Il pallino porta il colore del gioco. */
.cassa-pagina .wc-block-components-checkout-step{
  border-bottom:1px solid var(--dtg-filetto);
  padding-bottom:var(--wp--preset--spacing--30);
  margin-bottom:var(--wp--preset--spacing--30);
}
.cassa-pagina .wc-block-components-checkout-step:last-of-type{border-bottom:0}
.cassa-pagina .wc-block-components-radio-control-accordion-option{
  margin-bottom:var(--wp--preset--spacing--10);
}
.cassa-pagina .wc-block-components-radio-control__option{padding:1rem 1rem 1rem 3rem}
.cassa-pagina .wc-block-components-radio-control__input{accent-color:var(--dtg-accento)}
/* L'opzione scelta si vede dal filetto, non solo dal pallino: su un elenco di tre
   spedizioni il pallino da solo si perde. */
.cassa-pagina .wc-block-components-radio-control-accordion-option:has(:checked),
.cassa-pagina .wc-block-components-radio-control__option:has(:checked){
  border-color:var(--dtg-accento);
  box-shadow:inset 0 0 0 1px var(--dtg-accento);
}
.cassa-pagina .wc-block-components-sidebar{position:sticky;top:var(--wp--preset--spacing--40)}
.cassa-pagina .wc-block-checkout__actions_row{
  border-top:1px solid var(--dtg-filetto-forte);
  padding-top:var(--wp--preset--spacing--30);
  gap:var(--wp--preset--spacing--30);
}
.cassa-pagina .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button{
  flex:1 1 auto;
}
/* La frase sulle email ai clienti sta sopra l'email, dove l'indirizzo si lascia: stesso corpo
   dell'informativa di «Scrivici», non un avviso. */
.cassa-email{
  max-width:62ch;
  margin:0 0 var(--wp--preset--spacing--30);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}

.piede-cassa{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-top:1px solid var(--dtg-filetto);
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
  text-align:center;
}
.piede-cassa__chi{margin:0 0 var(--wp--preset--spacing--20)}
.piede-cassa__voci{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}
.piede-cassa__voci a{color:var(--dtg-testo-secondario)}
.piede-cassa__voci a:hover{color:var(--dtg-accento-basso)}

/* ---------- Account ----------
   Il modulo di accesso e' rimasto quello classico di WooCommerce (uno shortcode,
   non un blocco): stessa carta, stessi campi, stessa targhetta degli altri. */

.woocommerce-account .pagina .woocommerce{
  max-width:var(--dtg-contenuto);margin:0 auto;
  padding:0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword{
  max-width:34rem;margin-inline:auto;
  padding:var(--wp--preset--spacing--40);
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button{margin-right:var(--wp--preset--spacing--30)}
.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .woocommerce-form__label-for-checkbox{font-size:var(--wp--preset--font-size--didascalia)}
.woocommerce form .form-row label{
  display:block;margin-bottom:.4rem;
  font-size:var(--wp--preset--font-size--didascalia);
  color:var(--dtg-testo-secondario);
}
.woocommerce form .form-row{margin-bottom:var(--wp--preset--spacing--30)}
.woocommerce .required{color:var(--dtg-testo-verrix);text-decoration:none}

/* Dentro l'account il menu' laterale e' la mappa: schede vere, non un elenco puntato */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:.7rem 1rem;
  border-radius:var(--dtg-raggio-s);
  text-decoration:none;color:var(--dtg-testo);
}
.woocommerce-MyAccount-navigation li.is-active a{
  background:color-mix(in srgb,var(--dtg-accento) 22%,transparent);
  font-weight:700;
}
.woocommerce-MyAccount-navigation li a:hover{
  background:color-mix(in srgb,var(--dtg-accento) 12%,transparent);
}
.woocommerce-MyAccount-content{padding:var(--wp--preset--spacing--40)}

/* ---------- Conferma d'ordine ---------- */

.conferma-pagina > *{max-width:var(--dtg-contenuto);margin-inline:auto}
.conferma-pagina .wp-block-woocommerce-order-confirmation-status,
.conferma-pagina .wp-block-woocommerce-order-confirmation-summary,
.conferma-pagina .wp-block-woocommerce-order-confirmation-totals-wrapper,
.conferma-pagina .wp-block-woocommerce-order-confirmation-additional-information,
.conferma-pagina__recapiti,
.conferma-pagina__coda{padding-inline:var(--wp--preset--spacing--40)}
.conferma-pagina__recapiti{gap:var(--wp--preset--spacing--40)}
.conferma-pagina__recapiti > *{flex:1 1 18rem}
.conferma-pagina__coda{
  margin-top:var(--wp--preset--spacing--50);
  padding-bottom:var(--wp--preset--spacing--60);
  color:var(--dtg-testo-secondario);
}

/* ---------- Avvisi ----------
   Gli avvisi di WooCommerce (aggiunto al carrello, errore in un campo) arrivano
   con i loro verdi e rossi di serie, che su panna sono due corpi estranei. */
.wc-block-components-notice-banner{
  border-radius:var(--dtg-raggio-m);
  border-width:1px;
  font-family:var(--wp--preset--font-family--testo);
}
.wc-block-components-notice-banner.is-success{
  background:color-mix(in srgb,var(--wp--preset--color--verde-alto) 22%,var(--dtg-carta));
  border-color:var(--dtg-testo-verrix);color:var(--dtg-testo);
}
.wc-block-components-notice-banner.is-error{
  background:color-mix(in srgb,#C0392B 12%,var(--dtg-carta));
  border-color:#A5342A;color:var(--dtg-testo);
}
.wc-block-components-notice-banner.is-info{
  background:color-mix(in srgb,var(--wp--preset--color--ghiaccio-alto) 22%,var(--dtg-carta));
  border-color:var(--dtg-testo-sub-zero);color:var(--dtg-testo);
}
.wc-block-components-validation-error{color:#A5342A}

/* ---------- Sotto i 900 ----------
   Le due colonne di carrello e cassa diventano una: il riepilogo va sopra alla
   cassa (e' li' che si controlla cosa si sta pagando) e sotto al carrello (dove
   prima si guardano le righe). */
@media (max-width:900px){
  .carrello-pagina .wc-block-cart__main,
  .cassa-pagina .wc-block-checkout__form{padding-right:0}
  .carrello-pagina .wc-block-cart__sidebar .wc-block-components-sidebar,
  .cassa-pagina .wc-block-components-sidebar{position:static}
  .negozio__barra{gap:var(--wp--preset--spacing--10)}
}
@media (max-width:600px){
  .testata--cassa{padding-inline:var(--wp--preset--spacing--30);gap:var(--wp--preset--spacing--20)}
  .testata--cassa .testata__marchio img{width:88px}
  .testata--cassa .testata__indietro span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
  .negozio__scaffale,
  .negozio__barra,
  .carrello-pagina .wp-block-woocommerce-cart,
  .cassa-pagina{padding-inline:var(--wp--preset--spacing--30)}
}

/* --- Rifiniture del 11/08, dopo il primo giro sulle quattro pagine --- */

/* WooCommerce dichiara il nome del prodotto dentro la riga del carrello, che e' un
   selettore piu' specifico del nostro: senza la riga qui il titolo restava a 13px,
   cioe' piu' piccolo del prezzo che gli sta sotto. */
.carrello-pagina .wc-block-cart-item__product .wc-block-components-product-name{
  font-size:var(--wp--preset--font-size--h-4);
  line-height:1.25;
}
/* La miniatura non prende il colore del gioco pescato: nel carrello ci possono essere
   scatole di giochi diversi, e tingerle tutte dello stesso accento direbbe una cosa
   falsa. Fondo neutro, e la scatola ci si appoggia sopra. */
.carrello-pagina .wc-block-cart-item__image img{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  padding:.35rem;
}

/* Il bottone della cassa era un oggetto sciolto sotto la carta dei totali: sono la
   stessa cosa — quanto paghi e vai a pagare — e devono stare nello stesso foglio. */
.carrello-pagina .wp-block-woocommerce-cart-order-summary-block{
  border-radius:var(--dtg-raggio-m) var(--dtg-raggio-m) 0 0;
  border-bottom:0;
  box-shadow:none;
  margin-bottom:0;
}
.carrello-pagina .wc-block-cart__submit{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  border-top:0;
  border-radius:0 0 var(--dtg-raggio-m) var(--dtg-raggio-m);
  box-shadow:var(--dtg-ombra-tessera);
  padding:0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  margin-top:0;
}
.carrello-pagina .wc-block-cart__submit-container{padding:0}
/* Con un solo prodotto la pagina restava mezza vuota: il piede sale piu' su. */
.carrello-pagina .wp-block-woocommerce-cart{padding-bottom:var(--wp--preset--spacing--50)}

/* Il modulo di accesso e' l'unica cosa in pagina: sta al centro, non appoggiato al
   bordo sinistro di un contenitore largo 1320. Vale anche per il titolo che lo
   annuncia, o il titolo starebbe da una parte e il modulo dall'altra. */
.woocommerce-account .woocommerce{max-width:34rem;margin-inline:auto}
.woocommerce-account .woocommerce > h2{text-align:center}
/* "Ricordami" e' un'opzione dell'accesso, non un'azione: va sotto i campi, non di
   fianco alla targhetta, dove sembrava un secondo bottone smarrito. */
.woocommerce-account .woocommerce-form-login .form-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--wp--preset--spacing--20)}
.woocommerce-account .woocommerce-form-login__rememberme{order:-1;margin:0;display:flex;align-items:center;gap:.5rem}
.woocommerce-account .woocommerce-form-login__rememberme input{margin:0}
.woocommerce-account .woocommerce-LostPassword{margin-top:var(--wp--preset--spacing--20)}

/* WooCommerce dichiara la misura del nome dentro `table.wc-block-cart-items .wc-block-cart-items__row`,
   che pesa piu' del nostro selettore: la riga sopra non bastava e il titolo restava
   a 13px. Qui si pareggia il conto invece di ricorrere a !important, che poi toglie
   la possibilita' di correggere il caso particolare. */
.carrello-pagina table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
  font-size:var(--wp--preset--font-size--h-4);
  line-height:1.25;
}

/* Il modulo di accesso, per davvero.
   WooCommerce dichiara i margini su `.woocommerce form.login`, che vale piu' della
   classe da sola: il `margin-inline:auto` scritto prima veniva scavalcato e la carta
   restava appoggiata a sinistra sotto un titolo centrato. Stessa storia per il campo
   password, che Woo avvolge in `.password-input` — un contenitore senza larghezza,
   quindi il campo veniva meta' dell'altro. */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword{
  max-width:34rem;
  margin-left:auto;margin-right:auto;
}
.woocommerce-account .woocommerce-form-login .password-input,
.woocommerce-account .woocommerce-form-register .password-input{
  display:block;width:100%;position:relative;
}
/* Il titolo sta sopra la carta e va allineato a lei, non al contenitore largo */
.woocommerce-account .woocommerce > h2{max-width:34rem;margin-inline:auto}
/* Fra un campo e l'altro c'era un salto da pagina di legge: qui sono due campi */
.woocommerce-account .woocommerce-form-login .form-row{margin-bottom:var(--wp--preset--spacing--20)}
.woocommerce-account .woocommerce-form-login .form-row-wide + .form-row-wide{margin-top:0}
/* La casella "ricordami" e' un'opzione, non un bottone: quadrato disegnato come le
   altre caselle del sito, allineata alla propria etichetta. */
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--dtg-accento);
}

/* --- Conferma d'ordine --- */

/* Il blocco `status` apre con un titolo identico a quello della pagina. Sparisce a
   schermo ma resta nel documento: e' l'unica intestazione che il blocco dichiara,
   e a un lettore di schermo serve per sapere dove comincia il resoconto. */
.conferma-pagina .wc-block-order-confirmation-status > h1:first-child,
.conferma-pagina .wc-block-order-confirmation-status > h2:first-child{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
.conferma-pagina h2{
  font-size:var(--wp--preset--font-size--h-3);
  margin-top:var(--wp--preset--spacing--50);
  margin-bottom:var(--wp--preset--spacing--20);
}
/* Il riepilogo dell'ordine e' una tabella di numeri: filetti sottili, niente griglia */
.conferma-pagina .wc-block-order-confirmation-totals table{
  width:100%;border-collapse:collapse;
}
.conferma-pagina .wc-block-order-confirmation-totals th,
.conferma-pagina .wc-block-order-confirmation-totals td{
  border-bottom:1px solid var(--dtg-filetto);
  padding:var(--wp--preset--spacing--20) 0;
  text-align:left;
}
.conferma-pagina .wc-block-order-confirmation-totals td:last-child,
.conferma-pagina .wc-block-order-confirmation-totals th:last-child{text-align:right}
/* Le coordinate bancarie sono la cosa piu' importante della pagina quando si paga
   con bonifico: stanno in una carta, non in una colonna di righe qualsiasi. */
.conferma-pagina .wc-block-order-confirmation-additional-information{
  background:var(--dtg-carta);
  border:1px solid var(--dtg-filetto);
  border-radius:var(--dtg-raggio-m);
  box-shadow:var(--dtg-ombra-tessera);
  padding:var(--wp--preset--spacing--40);
  margin-top:var(--wp--preset--spacing--50);
}
.conferma-pagina .wc-block-order-confirmation-additional-information h2,
.conferma-pagina .wc-block-order-confirmation-additional-information h3{
  margin-top:0;font-size:var(--wp--preset--font-size--h-4);
}
/* I dati dell'ordine in testa (numero, data, totale, pagamento) sono una riga di
   etichette: piccoli, spaziati, con il valore in evidenza sotto l'etichetta. */
.conferma-pagina .wc-block-order-confirmation-summary{
  border-top:1px solid var(--dtg-filetto);
  border-bottom:1px solid var(--dtg-filetto);
  padding-block:var(--wp--preset--spacing--30);
  margin-top:var(--wp--preset--spacing--30);
}

/* Alla cassa, su telefono, fra la fettuccia e il riepilogo c'era un campo di grano */
@media (max-width:600px){
  .cassa-pagina{padding-top:var(--wp--preset--spacing--30)}
}

/* ==========================================================================
   Finish review dell'11/08 — chi siamo, giochi, schede prodotto
   ========================================================================== */

/* La barra d'acquisto e' fissa in fondo alla finestra e non si scorre via: sull'ultima
   schermata copriva la riga legale del piede — ragione sociale, sede, partita IVA e la
   firma di chi ha fatto il sito. 46 px mangiati sul desktop, 97 sul telefono, cioe'
   tutta la riga. Non e' una questione di estetica: quei dati devono essere raggiungibili.

   Il piede si tira su solo dove la barra c'e' davvero — le schede prodotto e la pagina
   dei giochi — invece di lasciare un vuoto in fondo a tutto il sito. La misura e'
   generosa di proposito: la barra cresce se il nome del gioco va a capo, e un piede
   che si scopre per due centimetri e' meno grave di una riga legale che sparisce. */
body:has(.barra) .piede{padding-bottom:6rem}
@media (max-width:700px){
  body:has(.barra) .piede{padding-bottom:10rem}
}
/* Dove `:has()` non c'e', il piede si alza lo stesso sulle due pagine che hanno la
   barra: sono note, e vale la riga in piu' pur di non lasciare la partita IVA sotto
   un pannello fisso. */
.single-product .piede,
.page-id-247 .piede{padding-bottom:6rem}
@media (max-width:700px){
  .single-product .piede,
  .page-id-247 .piede{padding-bottom:10rem}
}

/* Il nome di una referenza era scritto a 1.56rem: e' esattamente il passo H3 della
   scala, ma scritto a mano. Ora passa dal token, cosi' se la scala cambia cambia
   anche lui invece di restare indietro da solo. */
.referenza__nome{font-size:var(--wp--preset--font-size--h-3)}

/* `img{display:block}`, dichiarato in cima al foglio, batte il `[hidden]{display:none}`
   che mette il browser: qualunque immagine che qualcun altro vuole nascosta resta
   visibile. Si vede nel cassetto del carrello, dove WooCommerce stampa DUE immagini
   per riga — una per il prodotto in catalogo, una per il prodotto nascosto — e ne
   spegne una con `hidden`: senza questa riga la scatola compare due volte.

   Vale per tutte le immagini, non solo per quelle del carrello: `hidden` e' un modo
   normale di nascondere un elemento e il tema non deve annullarlo. */
img[hidden],
[hidden]{display:none}

/* ---------- La pagina dentro il pannello di iubenda (?ifr=true) ----------
   «Visualizza Cookie Policy completa» apre /cookie/ in un iframe del pannello delle
   preferenze. Lì resta solo il documento: via testata e piede (i template part figli
   di .wp-site-blocks), via l'indice, una colonna sola. Banner e GTM non vengono
   nemmeno stampati (dtg_in_iubenda() in inc/tracciamento.php). */
body.dtg-in-iubenda .wp-site-blocks > .wp-block-template-part,
body.dtg-in-iubenda .pagina__indice,
body.dtg-in-iubenda .pagina__soglia{display:none!important}
body.dtg-in-iubenda{background:var(--wp--preset--color--bianco)}
body.dtg-in-iubenda .wp-site-blocks{padding-top:0!important}
body.dtg-in-iubenda .pagina{padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30)!important;margin:0!important}
body.dtg-in-iubenda .pagina__testata{margin:0 0 var(--wp--preset--spacing--20)!important;padding:0!important}
body.dtg-in-iubenda .pagina__testata h1{font-size:var(--wp--preset--font-size--h-3)!important}
body.dtg-in-iubenda .pagina__corpo{display:block!important;max-width:none!important}

/* ---------- Privacy e cookie: il documento iubenda nella pagina ----------
   Il testo arriva dall'API di iubenda senza impaginazione (inc/tracciamento.php) e si
   veste con la tipografia di ogni altra pagina lunga: `.pagina__testo` fa già h2, h3,
   elenchi e link, l'indice si costruisce dagli h2. Qui solo quello che è di iubenda:
   le schede dei servizi, le etichette, il pulsante delle preferenze. */
.iub-documento header p:first-child{
  font-size:var(--wp--preset--font-size--lede);line-height:1.5;
  color:var(--dtg-testo-secondario);
}
.iub-documento header p + p{font-size:var(--wp--preset--font-size--didascalia);color:var(--dtg-testo-secondario)}
.iub-documento header{margin-bottom:var(--wp--preset--spacing--40)}
.iub-documento h3{font-size:var(--wp--preset--font-size--h-4)}
.iub-documento h4{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.0625rem;font-weight:600;margin:0;
}
/* le etichette («Dati personali trattati», «Luogo del trattamento»): piccole e ferme */
.iub-documento h5{
  font-family:var(--wp--preset--font-family--testo);
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dtg-testo-secondario);
  margin:var(--wp--preset--spacing--20) 0 .35rem;
}
.iub-documento .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.iub-documento p:empty{display:none}

/* un servizio = una scheda: chiusa mostra chi è, aperta tutto il resto */
.iub-documento details{
  margin:0 0 var(--wp--preset--spacing--20);
  border:var(--dtg-bordo) solid var(--wp--preset--color--panna-scura);
  border-radius:var(--dtg-raggio-m);
  background:var(--wp--preset--color--bianco);
}
.iub-documento details[open]{border-color:var(--dtg-testo-secondario)}
.iub-documento summary{
  display:flex;align-items:center;gap:var(--wp--preset--spacing--20);
  padding:.9rem var(--wp--preset--spacing--20);
  cursor:pointer;list-style:none;
}
.iub-documento summary::-webkit-details-marker{display:none}
.iub-documento summary::marker{content:""}
.iub-documento summary::after{
  content:"";flex:none;margin-left:auto;width:.55rem;height:.55rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .18s var(--dtg-molla);
}
.iub-documento details[open] > summary::after{rotate:225deg;translate:0 2px}
.iub-documento summary figure{
  flex:none;margin:0;width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--dtg-raggio-s);background:var(--wp--preset--color--panna);
}
.iub-documento summary figure img{width:22px;height:22px;object-fit:contain}
.iub-documento summary > div{min-width:0}
.iub-documento summary p{
  margin:.15rem 0 0;font-size:.8125rem;line-height:1.4;color:var(--dtg-testo-secondario);
}
.iub-documento details > div{
  padding:0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--panna-scura);
  font-size:.9375rem;
}
/* gli elenchi dei dati trattati sono etichette, non punti: stanno su una riga */
.iub-documento details ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:.35rem;
}
.iub-documento details li{
  margin:0;padding:.15rem .55rem;
  border-radius:999px;background:var(--wp--preset--color--panna);
  font-size:.8125rem;
}

/* il pulsante per rivedere le preferenze: la targhetta del sito */
.iub-documento .btn,
.iub-documento .iub-manage-preferences-btn{
  --dtg-punta:16px;
  display:inline-flex;align-items:center;min-height:48px;
  padding:0 calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) 0 var(--wp--preset--spacing--20);
  border:0;border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s);
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  background:var(--wp--preset--color--inchiostro);color:var(--dtg-testo-su-notte);
  font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
}
.iub-documento .btn:hover,
.iub-documento .iub-manage-preferences-btn:hover{background:var(--wp--preset--color--notte)}

/* ---------- Il banner del consenso (iubenda) ----------
   Il banner lo stampa iubenda col suo foglio di stile, pensato per stare su qualunque
   sito: una fascia nera in cima alla pagina. Qui lo si veste da DTG — la carta panna
   dei pannelli, il marchio, le targhette a punta dei bottoni.

   Tutto porta `!important` e parte da `html body #iubenda-cs-banner#iubenda-cs-banner`: il foglio di
   iubenda arriva dopo il nostro e usa a sua volta `!important`, quindi vince solo chi
   è più specifico. Non si tocca il TESTO del banner, che è quello legale di iubenda.

   ⚠️ «Rifiuta tutto» e «Accetta tutto» restano due bottoni pieni della stessa misura:
   il Garante chiede che rifiutare costi quanto accettare. Cambiano colore, non peso. */
html body #iubenda-cs-banner#iubenda-cs-banner{
  top:auto!important;bottom:0!important;left:0!important;right:auto!important;
  width:100%!important;max-width:34rem!important;height:auto!important;
  padding:var(--wp--preset--spacing--20)!important;
  background:transparent!important;
  font-family:var(--wp--preset--font-family--testo)!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container{
  width:100%!important;max-width:none!important;
  background:var(--wp--preset--color--panna)!important;
  color:var(--dtg-testo)!important;
  border:var(--dtg-bordo) solid var(--wp--preset--color--inchiostro)!important;
  border-radius:var(--dtg-raggio-l)!important;
  box-shadow:var(--dtg-ombra-pannello)!important;
  overflow:hidden!important;
}
/* una carta sola: iubenda, nella versione flottante, disegna il contenuto come una seconda
   card dentro il contenitore — 16px di margine, angoli suoi, un'ombra — e la cornice che ne
   esce sembra un secondo colore. Qui il contenuto riempie il contenitore e basta. */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content{
  background:transparent!important;color:inherit!important;
  font-family:inherit!important;
  margin:0!important;
  border-radius:calc(var(--dtg-raggio-l) - var(--dtg-bordo))!important;
  box-shadow:none!important;
  padding:var(--wp--preset--spacing--30)!important;
}
/* ⚠️ I COLORI del banner stanno nel pannello iubenda (Tema → Personalizzato: sfondo
   #F7F3E3, testo #141210, link #9A5B00, Accetta #FEA500, Rifiuta #141210): lo script
   li scrive nell'attributo `style` degli elementi, con `!important`, e da qui non si
   battono. Se cambiano là, si cambiano là — questo foglio dà forma, font e misure. */
html body #iubenda-cs-banner#iubenda-cs-banner .iub-toggle-checkbox.granular-control-checkbox span,
html body #iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-title{background:transparent!important}
/* il marchio in testa: è il primo segno che il riquadro appartiene al sito */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale::before{
  content:"";display:block;
  width:108px;height:60px;margin:0 0 var(--wp--preset--spacing--20);
  /* il positivo con i bianchi portati a panna: lettere nere, nessun riquadro bianco
     sulla carta del banner. Il logo della testata ha le lettere bianche e qui
     resterebbe solo il sole */
  background:url(../img/logo-dtg-positivo-panna.svg) left center/contain no-repeat;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale{max-width:none!important;margin:0!important}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content,
html body #iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph,
html body #iubenda-cs-banner#iubenda-cs-banner .iub-p{
  color:var(--dtg-testo)!important;
  font-family:inherit!important;
  font-size:.875rem!important;line-height:1.5!important;
  margin:0!important;padding:0!important;
  max-height:none!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iub-p + .iub-p{margin-top:.6em!important}
html body #iubenda-cs-banner#iubenda-cs-banner .iub-p:empty{display:none!important}
html body #iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph strong{font-weight:600!important;color:inherit!important}
html body #iubenda-cs-banner#iubenda-cs-banner a{
  color:var(--dtg-testo-yatai)!important;
  text-decoration:underline!important;text-underline-offset:.18em;
}
/* la crocetta: il banner non si chiude senza scegliere, quindi non la si mostra */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-close-btn{display:none!important}

/* gli interruttori per finalità: pastiglie panna scura, accese in arancio */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-granular-controls-container{
  display:flex!important;flex-wrap:wrap!important;gap:.5rem 1.25rem!important;
  margin:var(--wp--preset--spacing--20) 0 0!important;padding:0!important;
  border:0!important;background:transparent!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox label,
html body #iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox span{
  color:var(--dtg-testo)!important;font-family:inherit!important;
  font-size:.875rem!important;font-weight:500!important;
}
/* iubenda li chiude in riquadri neri col titolo sopra: qui sono una riga, nome e interruttore */
html body #iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox{
  display:inline-flex!important;flex-direction:row-reverse!important;align-items:center!important;gap:.5rem!important;
  width:auto!important;min-height:0!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox label{
  margin:0!important;padding:0!important;background:transparent!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iub-toggle-checkbox input.style1{
  background-color:var(--wp--preset--color--panna-scura)!important;
  border-color:var(--wp--preset--color--panna-scura)!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iub-toggle-checkbox input.style1:checked{
  background-color:var(--wp--preset--color--arancio)!important;
  border-color:var(--wp--preset--color--arancio)!important;
}

/* i bottoni: la targhetta a punta di `.bottone`, rifatta qui perché il markup è di iubenda */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:space-between!important;gap:.75rem!important;
  margin:var(--wp--preset--spacing--30) 0 0!important;padding:0!important;
  background:transparent!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent{
  display:flex!important;flex-wrap:wrap!important;gap:.6rem!important;margin:0!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button{
  margin:0!important;
  font-family:var(--wp--preset--font-family--testo)!important;
  text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:700!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-accept-btn,
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn{
  --dtg-punta:16px;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:48px!important;
  padding:0 calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) 0 var(--wp--preset--spacing--20)!important;
  border:0!important;border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s)!important;
  font-size:.8125rem!important;
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  box-shadow:none!important;opacity:1!important;
  transition:transform .22s var(--dtg-molla),filter .18s ease;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-accept-btn{
  background:linear-gradient(180deg,
    var(--wp--preset--color--arancio-alto) 0%,
    var(--wp--preset--color--arancio) 55%,
    var(--wp--preset--color--arancio-basso) 100%)!important;
  color:var(--wp--preset--color--inchiostro)!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn{
  background:var(--wp--preset--color--inchiostro)!important;
  color:var(--dtg-testo-su-notte)!important;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-accept-btn:hover,
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn:hover{transform:translateY(-2px)}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn:hover{background:var(--wp--preset--color--notte)!important}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-accept-btn:focus-visible,
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn:focus-visible{
  outline:none!important;box-shadow:inset 0 0 0 3px var(--wp--preset--color--arancio-basso)!important;
}
/* «Scopri di più»: un collegamento, non un terzo bottone che compete con le due scelte */
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-customize-btn{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:.4rem 0!important;min-height:0!important;
  color:var(--dtg-testo)!important;
  font-size:.75rem!important;
  text-decoration:underline!important;text-underline-offset:.25em;
}
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge-text,
html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge-text a{
  color:var(--dtg-testo-secondario)!important;font-size:.6875rem!important;
}

/* Il pulsante per rivedere le preferenze, quello che resta dopo la scelta. Deve restarci:
   revocare il consenso dev'essere possibile in ogni momento. I COLORI stanno nel pannello
   iubenda (Widget privacy → Colore: sfondo #141210, testo #FEA500); qui solo la forma —
   staccato dall'angolo, gli angoli morbidi delle targhette, l'anello del focus. */
html body .iubenda-tp-btn.iubenda-tp-btn[data-tp-float]{
  bottom:var(--wp--preset--spacing--20)!important;right:var(--wp--preset--spacing--20)!important;
  width:44px!important;height:44px!important;
  border-radius:var(--dtg-raggio-s)!important;
  box-shadow:var(--dtg-ombra-tessera)!important;
  transition:transform .22s var(--dtg-molla)!important;
  /* la serratura è un'immagine col verde di iubenda scritto dentro: il colore «testo»
     del pannello non la tocca. Stesso tracciato, in arancio, centrato sui 44px */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23FEA500' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E")!important;
  background-size:36px 36px!important;background-position:center!important;background-repeat:no-repeat!important;
}
html body .iubenda-tp-btn.iubenda-tp-btn[data-tp-float]:hover{transform:translateY(-2px)}
html body .iubenda-tp-btn.iubenda-tp-btn[data-tp-float]:focus-visible{
  outline:3px solid var(--wp--preset--color--arancio)!important;outline-offset:2px!important;
}

/* ---------- Il pannello delle preferenze (iubenda) ----------
   Si apre da «Scopri di più» e dalla serratura. Come il banner, sta nella pagina e si
   veste da qui; i due fondi bianchi sono scritti in linea da iubenda con `!important`
   e restano bianchi — il bianco delle schede del sito. Bordo, font e bottoni sono DTG.
   ⚠️ Come nel banner, «Rifiuta tutto» e «Accetta tutto» restano della stessa misura. */
html body #iubenda-iframe#iubenda-iframe #iubenda-iframe-popup{
  border:var(--dtg-bordo) solid var(--wp--preset--color--inchiostro)!important;
  border-radius:var(--dtg-raggio-l)!important;
  box-shadow:var(--dtg-ombra-pannello)!important;
  overflow:hidden!important;
}
html body #iubenda-iframe#iubenda-iframe,
html body #iubenda-iframe#iubenda-iframe *{
  font-family:var(--wp--preset--font-family--testo)!important;
}
html body #iubenda-iframe#iubenda-iframe .purposes-header-title,
html body #iubenda-iframe#iubenda-iframe .purposes-section-header-title{
  font-family:var(--wp--preset--font-family--display)!important;
  color:var(--dtg-testo)!important;letter-spacing:-.01em!important;
}
html body #iubenda-iframe#iubenda-iframe .purposes-header-title{font-size:var(--wp--preset--font-size--h-3)!important;line-height:1.15!important}
html body #iubenda-iframe#iubenda-iframe .purposes-section-header-title{font-size:var(--wp--preset--font-size--h-4)!important}
html body #iubenda-iframe#iubenda-iframe .purposes-header-text,
html body #iubenda-iframe#iubenda-iframe .purposes-item-body,
html body #iubenda-iframe#iubenda-iframe .purposes-section-header-text{
  color:var(--dtg-testo-secondario)!important;font-size:.9375rem!important;line-height:1.55!important;
}
html body #iubenda-iframe#iubenda-iframe a{color:var(--dtg-testo-yatai)!important}
html body #iubenda-iframe#iubenda-iframe .purposes-item-title,
html body #iubenda-iframe#iubenda-iframe .purposes-item-title *{
  font-family:var(--wp--preset--font-family--display)!important;font-weight:600!important;color:var(--dtg-testo)!important;
}
html body #iubenda-iframe#iubenda-iframe .purposes-item{
  border-color:var(--wp--preset--color--panna-scura)!important;
}
/* la serratura in testata ripete il pulsante in fondo alla pagina: qui non serve */
html body #iubenda-iframe#iubenda-iframe .iub-iframe-brand-button{display:none!important}

/* i bottoni: le targhette del sito. Rifiuta inchiostro, Accetta e Salva arancio */
html body #iubenda-iframe#iubenda-iframe .iub-btn-consent,
html body #iubenda-iframe#iubenda-iframe #iubFooterBtn{
  --dtg-punta:14px;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:44px!important;
  padding:0 calc(var(--wp--preset--spacing--20) + var(--dtg-punta)) 0 var(--wp--preset--spacing--20)!important;
  border:0!important;border-radius:var(--dtg-raggio-s) 0 0 var(--dtg-raggio-s)!important;
  clip-path:polygon(0 0, calc(100% - var(--dtg-punta)) 0, 100% 50%, calc(100% - var(--dtg-punta)) 100%, 0 100%);
  box-shadow:none!important;
  font-size:.8125rem!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;
}
/* le spunte e le crocette di iubenda dentro i bottoni: la targhetta basta */
html body #iubenda-iframe#iubenda-iframe .iub-btn-consent::before,
html body #iubenda-iframe#iubenda-iframe .iub-btn-consent::after{display:none!important}
html body #iubenda-iframe#iubenda-iframe .iub-btn-reject{
  background:var(--wp--preset--color--inchiostro)!important;color:var(--dtg-testo-su-notte)!important;
}
html body #iubenda-iframe#iubenda-iframe .iub-btn-accept,
html body #iubenda-iframe#iubenda-iframe #iubFooterBtn{
  background:linear-gradient(180deg,
    var(--wp--preset--color--arancio-alto) 0%,
    var(--wp--preset--color--arancio) 55%,
    var(--wp--preset--color--arancio-basso) 100%)!important;
  color:var(--wp--preset--color--inchiostro)!important;
}
/* «indietro» e «cookie policy completa»: collegamenti, non bottoni che competono */
html body #iubenda-iframe#iubenda-iframe .iub-btn-back,
html body #iubenda-iframe#iubenda-iframe .purposes-btn-cp{
  background:transparent!important;box-shadow:none!important;
  border:var(--dtg-bordo) solid var(--wp--preset--color--panna-scura)!important;
  border-radius:var(--dtg-raggio-s)!important;
  color:var(--dtg-testo)!important;
}
/* il focus: iubenda lo mette sul primo bottone all'apertura, con un anello blu suo */
html body #iubenda-iframe#iubenda-iframe button:focus-visible,
html body #iubenda-iframe#iubenda-iframe a:focus-visible{
  outline:3px solid var(--wp--preset--color--arancio)!important;outline-offset:2px!important;
  box-shadow:none!important;
}
html body #iubenda-iframe#iubenda-iframe button:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
html body #iubenda-iframe#iubenda-iframe .iub-toggle-checkbox input.style1{
  background-color:var(--wp--preset--color--panna-scura)!important;border-color:var(--wp--preset--color--panna-scura)!important;
}
html body #iubenda-iframe#iubenda-iframe .iub-toggle-checkbox input.style1:checked{
  background-color:var(--wp--preset--color--arancio)!important;border-color:var(--wp--preset--color--arancio)!important;
}

/* sul telefono diventa un foglio a tutta larghezza in fondo allo schermo */
@media (max-width:640px){
  html body #iubenda-cs-banner#iubenda-cs-banner{max-width:none!important;padding:.5rem!important}
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content{padding:var(--wp--preset--spacing--20)!important}
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale::before{width:104px;height:58px}
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group,
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent{flex-direction:column-reverse!important;align-items:stretch!important;width:100%!important}
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-accept-btn,
  html body #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-reject-btn{width:100%!important}
}