/*
 * LA LANDING DEL GIOCO (giro «la landing», 20 ottobre 2026; «la landing, seconda mano», 21 ottobre; «la landing, terza
 * mano», 22 ottobre): la pagina su /, per chi arriva; il gioco e' su /play. Il gioco visto da fuori, con le tre creature
 * con cui si nasce: TROGLO nell'apertura (la carta in cui si entra: la sua grotta allagata, verso la luce), nella
 * Limited viva e nella maggiore eta', INDICA nella stampa, ATTHIS nella finale; e il campo, dove le carte si muovono. La luce fredda che scende dall'alto (il mondo, il
 * gioco), l'oro di cio' che e' tuo (la Limited). Una colonna di luce guida la pagina dall'ospite alla finale. Un
 * carattere solo, quello del gioco (Archivo, variabile): largo e pesante per dire, stretto per contare.
 * Tutto da qui: niente in linea (la CSP del gioco), i colori come variabili, il movimento solo se chi guarda lo vuole.
 */

@font-face {
  font-family: 'Archivo GAMBIT';
  src: url('../brand/carattere.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Seriale GAMBIT';
  src: url('../brand/seriale.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  /* la notte del gioco, la grotta, la luce che scende; l'oro di cio' che e' tuo; l'arancio solo dove c'e' Bitcoin */
  --notte: #07040d;
  --grotta: #071628;
  --luce: #cfe6ff;
  --luce-tenue: rgba(207, 230, 255, .14);
  --oro: #e8c173;
  --oro-chiaro: #f8e2a6;
  --oro-scuro: #a97a33;
  --viola: #b397f0;
  --magenta: #cf5cff;
  --testo: #f0e9fb;
  --tenue: #a99dbf;
  --spento: #5f5675;
  --linea: rgba(176, 138, 255, .18);
  --pannello: rgba(30, 18, 48, .55);
  --bitcoin: #f7931a;

  --carattere: 'Archivo GAMBIT', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --seriale: 'Seriale GAMBIT', 'Archivo GAMBIT', system-ui, sans-serif;

  /* la scala: quarta giusta da 18 px */
  --t-piccolo: .875rem;
  --t-corpo: 1.0625rem;
  --t-medio: 1.375rem;
  --t-titolo: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --t-grande: clamp(2.2rem, .6rem + 7.2vw, 7.25rem);

  --gola: max(16px, env(safe-area-inset-left, 0px));
  --gola-destra: max(16px, env(safe-area-inset-right, 0px));
  --raggio-carta: 3.07% / 2.19%;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --t-corpo: 1.125rem; } }

*, *::before, *::after { box-sizing: border-box; }
/* lo scorrimento della pagina: di colpo, come di base (fino al giro «la landing, terza mano» era morbido, smooth: col link
   del piede, Tab fin li' e Invio subito, lo scorrimento verso il link e quello verso la riga delle mance si contendevano
   la pagina, e 14 volte su 48 si finiva in fondo; di colpo, 48 su 48: sonda-piede-corsa del giro) */
html { background: var(--notte); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: var(--t-corpo);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--notte);
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; line-height: 1.05; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--oro-chiaro); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- i bottoni, come nel gioco */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .7em 1.4em;
  border-radius: 12px; border: 1px solid var(--linea);
  background: var(--pannello); color: var(--testo);
  font: 700 .875rem/1 var(--carattere); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bottone:hover { background: rgba(60, 38, 92, .7); }
.bottone.oro {
  border-color: rgba(248, 226, 166, .6);
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 55%, #d29f4f);
  color: #2a1606;
  box-shadow: 0 10px 34px -10px rgba(232, 193, 115, .7), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.bottone.oro:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(232, 193, 115, .85), inset 0 1px 0 rgba(255, 255, 255, .55); }
.bottone.grande { min-height: 58px; padding: .95em 2em; font-size: 1rem; }
.bottone.piccolo { min-height: 38px; padding: .55em 1.1em; font-size: .78rem; }

/* ---------------------------------------------------------------- la barra in alto: il nome e «Gioca», sempre */
.barra {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px; padding-left: var(--gola); padding-right: var(--gola-destra);
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.barra.scura { background: rgba(7, 4, 13, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--linea); }
.azioni { display: inline-flex; align-items: center; gap: 10px; }
/* il tasto che ferma il movimento: un'icona sola, la pausa o il via (aria-pressed dice com'e') */
.bottone.piccolo.tasto-pausa { width: 38px; padding: 0; letter-spacing: 0; }
.tasto-pausa[hidden] { display: none; }
.tasto-pausa svg { fill: currentColor; }
.tasto-pausa .icona-via, .tasto-pausa[aria-pressed="true"] .icona-pausa { display: none; }
.tasto-pausa[aria-pressed="true"] .icona-via { display: block; }
/* fermato: le animazioni del foglio di stile si fermano dove sono (la luce, la carta e il video li ferma landing.js) */
.in-pausa *, .in-pausa *::before, .in-pausa *::after { animation-play-state: paused !important; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; }
/* la lingua, nella barra (giro «la landing, seconda mano»): la sua etichetta e il suo elenco, che si apre (details: anche
   senza JavaScript); al telefono la sigla al posto del nome (il nome resta, per chi legge con la voce: il nome del bottone
   contiene sempre quello che si vede) */
.scegli-lingua { position: relative; }
.scegli-lingua summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px 0 11px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--pannello); color: var(--testo);
  font: 700 .78rem/1 var(--carattere); font-stretch: 112%; letter-spacing: .06em;
}
.scegli-lingua summary::-webkit-details-marker { display: none; }
.scegli-lingua summary:hover { background: rgba(60, 38, 92, .7); }
.scegli-lingua svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scegli-lingua .freccia { width: 14px; height: 14px; color: var(--tenue); transition: transform .2s ease; }
.scegli-lingua[open] .freccia { transform: rotate(180deg); }
.scegli-lingua .sigla { display: none; }
.solo-voce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 599px) {
  .scegli-lingua .nome-lingua { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scegli-lingua .sigla { display: inline; }
  /* l'elenco aperto, al telefono: dal bordo destro della barra (non del bottone, che sta a meta': a 320 pixel l'elenco
     usciva a sinistra dallo schermo, e i nomi perdevano la prima lettera), e mai piu' largo dello schermo */
  .scegli-lingua { position: static; }
  .elenco-lingue.in-barra { right: var(--gola-destra); top: calc(100% - 4px); max-width: calc(100vw - var(--gola) - var(--gola-destra)); }
}
/* al telefono la barra e' stretta: il nome, la lingua, la pausa e «Gioca» ci stanno senza toccarsi fino a 320 pixel
   (sonda-lingua-e-campo, «la barra»): via l'icona della lingua, gli spazi piu' stretti */
@media (max-width: 440px) {
  .barra { gap: 8px; }
  .azioni { gap: 6px; }
  .scegli-lingua .icona-lingua { display: none; }
  .scegli-lingua summary { padding: 0 8px 0 10px; gap: 4px; }
}
/* sotto i 370 pixel (i telefoni piu' stretti, 320 e 360) il nome resta per chi legge con la voce, e si vede la gemma */
@media (max-width: 369px) {
  .marchio span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) {
  .marchio { gap: 7px; }
  .marchio img { width: 24px; height: 24px; }
  .marchio span { letter-spacing: .1em; font-size: .92rem; }
  .bottone.piccolo { padding-inline: .8em; }
}
.elenco-lingue.in-barra {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; margin: 0; padding: 6px; min-width: 190px;
  display: grid; gap: 2px; border-radius: 14px; border: 1px solid var(--linea);
  background: #0e0918; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.elenco-lingue.in-barra li { font-size: 1rem; font-weight: 600; font-stretch: 100%; }
.elenco-lingue.in-barra a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; border-bottom: 0; color: var(--testo); }
.elenco-lingue.in-barra a:hover, .elenco-lingue.in-barra a:focus-visible { background: rgba(176, 138, 255, .16); }
.elenco-lingue.in-barra a[aria-current] { color: var(--oro-chiaro); }
.marchio span { font-weight: 800; font-stretch: 125%; letter-spacing: .2em; font-size: 1rem; }
/* il nome del gioco e' quello dei custodi (GAMBIT_NOME, fino a 20 caratteri; giro «la landing, terza mano»): la barra
   resta su una riga e alta uguale con ogni nome, e quello che non ci sta finisce coi puntini (la verifica separata: un
   nome lungo la allargava fino a 124 pixel, sopra la carta dell'apertura e sopra la riga delle mance). Prima cedono il
   nome, mai la lingua, la pausa e «Gioca» */
.marchio { min-width: 0; }
.marchio img, .azioni { flex: none; }
.marchio span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* il logo del gioco al posto della gemma e del nome (giro «il nome»: src/marchio.ts), alto quanto la gemma con la sua
   luce; al telefono piu' basso, perche' la barra ci stia fino a 320 pixel col nome, la lingua, la pausa e «Gioca» */
.marchio .logo, .marchio .logo img { display: block; height: 30px; width: auto; }
.marchio .logo { flex: none; }
@media (max-width: 380px) { .marchio .logo, .marchio .logo img { height: 24px; } }
@media (max-width: 340px) { .marchio .logo, .marchio .logo img { height: 21px; } }

/* ---------------------------------------------------------------- l'apertura */
.apertura { position: relative; background: radial-gradient(120% 80% at 70% 0%, var(--grotta), var(--notte) 70%); }
.palco {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center; gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "carta" "conto" "testo";
  align-content: center; gap: 16px;
  padding-block: calc(72px + env(safe-area-inset-top, 0px)) 20px;
  padding-left: var(--gola); padding-right: var(--gola-destra);
}
@media (min-width: 900px) {
  .palco {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: "testo carta" "conto carta";
    grid-template-rows: 1fr auto;
    column-gap: clamp(24px, 4vw, 72px);
    padding-left: max(var(--gola), calc((100vw - 1240px) / 2));
    padding-right: max(var(--gola-destra), calc((100vw - 1240px) / 2));
    padding-block: 96px 40px;
  }
}
/* scorrendo si entra nella carta: il palco si ferma quando il suo fondo tocca quello dello schermo (anche se e' piu' alto
   dello schermo, come su un telefono basso), e la pagina e' piu' alta di quanto dura l'entrata (landing.js lo misura) */
.apertura.cinema { height: calc(var(--alto-palco, 100svh) + 130svh); }
.apertura.cinema .palco { position: sticky; top: min(0px, calc(100svh - var(--alto-palco, 100svh))); }
/* (giro «la landing, seconda mano») gia' prima che landing.js arrivi (porta.js mette .js prima che la pagina si
   disegni): la pagina ha subito l'altezza dell'entrata, e quello che sta piu' giu' resta lontano. Fino al giro, al
   telefono lento, finche' landing.js non arrivava il campo stava subito sotto la prima schermata, e il browser ne
   scaricava il tappeto e le pedine (loading=lazy guarda la distanza) insieme al fondo dell'apertura (sonda-dorso.mts) */
@media (prefers-reduced-motion: no-preference) {
  .js .apertura { height: calc(var(--alto-palco, 100svh) + 130svh); }
  .js .apertura .palco { position: sticky; top: min(0px, calc(100svh - var(--alto-palco, 100svh))); }
}

.raggi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cono {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -20% -10% auto auto; width: 90%; height: 120%;
  background: radial-gradient(42% 60% at 62% 0%, rgba(207, 230, 255, .2), rgba(207, 230, 255, .05) 55%, transparent 75%);
}

.testo-apertura { grid-area: testo; position: relative; z-index: 3; display: grid; gap: 14px; max-width: 680px; }
@media (min-width: 900px) { .testo-apertura { gap: 22px; } }
.testo-apertura h1 {
  font-size: var(--t-grande); font-weight: 850; font-stretch: 125%; letter-spacing: -.025em; line-height: .96;
}
/* il titolo in tre righe: cos'e' (piccolo), la mossa (grande), e che e' gratis davvero (l'oro) */
.testo-apertura h1 > span { display: block; }
.testo-apertura h1 .sopra {
  margin-bottom: .7rem; color: var(--luce); font-size: clamp(.82rem, .62rem + .7vw, 1.2rem); font-weight: 700; font-stretch: 112%;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}
/* (al massimo 6,2rem: la riga piu' lunga che non va a capo, «de ajedrez.», sta nella colonna del testo (al piu'
   680 pixel); a 6,4 ne usciva di un pixel e mezzo. Misurato in sei lingue e undici larghezze) */
.testo-apertura h1 .grande { font-size: clamp(2.2rem, .6rem + 6.4vw, 6.2rem); }
.testo-apertura h1 .oro > span { display: inline-block; }
.testo-apertura h1 .oro {
  margin-top: .9rem; color: var(--oro-chiaro); font-size: clamp(1.15rem, .75rem + 1.7vw, 2.6rem); font-weight: 700; font-stretch: 112%;
  letter-spacing: -.01em; line-height: 1.12;
}
.testo-apertura .sotto { color: #d9d0ea; font-size: var(--t-corpo); max-width: 56ch; }
.invito { display: grid; justify-items: start; gap: 10px; margin-top: 4px; }
.nota { color: var(--tenue); font-size: var(--t-piccolo); }

.scena-carta { grid-area: carta; position: relative; z-index: 1; margin: 0; display: grid; place-items: center; perspective: 1400px; }
.carta-strati {
  --tx: 0px; --ty: 0px; --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --gx: 50%; --gy: 30%;
  --zoom: 1; --zf: 1; --zc: 1; --zk: 1; --oc: 1; --ok: 1; --og: 1;
  --ombra: 1; --raggio: 1; --fx: 0%; --fy: 0%;
  position: relative; width: min(62vw, 25vh, 420px); width: min(62vw, 25svh, 420px); aspect-ratio: 750 / 1050;
  border-radius: calc(3.07% * var(--raggio)) / calc(2.19% * var(--raggio)); overflow: hidden; container-type: inline-size;
  transform: translate(var(--tx), var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, calc(.9 * var(--ombra))), 0 0 0 1px rgba(207, 230, 255, calc(.14 * var(--ombra))), 0 0 80px -10px rgba(120, 180, 255, calc(.25 * var(--ombra)));
  will-change: transform; background: rgba(2, 6, 12, var(--ombra));
}
/* dentro la carta (landing.js, da un terzo dell'entrata): i bordi degli strati si sfumano nel loro mondo intorno, a poco
   a poco (--fx, --fy da 0). La carta resta chiusa (overflow: hidden): fino al giro aprirla a un certo punto (overflow:
   visible) faceva comparire in un pixel di scorrimento i bordi del fondo e della creatura fuori dalla carta, uno scatto
   (la verifica separata del codice, misurato con sonda-salti.mts) */
.finestra { position: absolute; inset: 0; }
.carta-strati.sfuma .finestra {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent), linear-gradient(180deg, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent), linear-gradient(180deg, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  mask-composite: intersect;
}
/* il mondo della carta, sfocato, intorno: si accende entrando (--intorno, sul palco) */
.intorno { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: var(--intorno, 0); pointer-events: none; }
@media (min-width: 900px) { .carta-strati { width: min(30vw, 62svh, 440px); } }
.strato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strato.fondo { transform: translate(calc(var(--px) * -2.6%), calc(var(--py) * -2.6%)) scale(calc(1.08 * var(--zf))); filter: blur(var(--sf, 0px)); }
.strato.creatura { transform: translate(calc(var(--px) * 1.6%), calc(var(--py) * 1.6%)) scale(calc(1.04 * var(--zc))); opacity: var(--oc); filter: blur(var(--sc, 0px)); }
.strato.cornice { transform: scale(var(--zk)); opacity: var(--ok); }
.carta-strati .seriale { opacity: var(--ok); }

.seriale {
  position: absolute; left: 0; right: 0; top: 97.8%; transform: translateY(-50%);
  font: 800 8cqw/.74 var(--seriale); letter-spacing: .06em; text-align: center; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 .05em #000, 0 0 .1em rgba(0, 0, 0, .55), .03em .03em 0 rgba(0, 0, 0, .55), -.03em -.03em 0 rgba(0, 0, 0, .55);
  pointer-events: none;
}
.riflesso {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--og);
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 30%, transparent 55%);
  mix-blend-mode: soft-light;
}

.contatore-apertura {
  grid-area: conto; position: relative; z-index: 3;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
}
@media (min-width: 900px) { .contatore-apertura { justify-content: flex-start; gap: 6px 14px; padding-top: 18px; border-top: 1px solid var(--luce-tenue); } }
.contatore-apertura .numero { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem); font-weight: 800; font-stretch: 62%; line-height: 1; color: var(--oro-chiaro); font-variant-numeric: tabular-nums; }
.contatore-apertura .cosa { color: var(--tenue); font-size: var(--t-piccolo); }
.buio { position: absolute; inset: 0; z-index: 3; background: var(--notte); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- le fasce */
.fascia { position: relative; padding-block: clamp(80px, 11vw, 168px); overflow-x: clip; }
.dentro { position: relative; max-width: 1180px; margin-inline: auto; padding-left: var(--gola); padding-right: var(--gola-destra); }
.fascia h2 { font-size: var(--t-titolo); font-stretch: 118%; letter-spacing: -.015em; }

/* ---------------------------------------------------------------- il campo: la board del tavolo, clonata
   (giro «la landing, quarta mano», 22 ottobre 2026; fino a quel giro una scena di dodici secondi disegnata qui). La board
   e' la copia di quella del gioco (landing/campo.css e landing/campo.js, che la landing carica quando il campo si
   avvicina): tre colonne e quattro righe, la riga di sopra e' la casa dell'avversario, quella di sotto la tua; ci si
   gioca la partita del copione del fondatore, tre turni, mossa per mossa come al tavolo. Qui solo la scatola, che c'e'
   anche prima: la foto della board all'inizio della partita (landing/campo-fermo.webp, nella lingua), che resta per chi
   non vuole movimento e per chi non ha JavaScript (non avrebbe il tasto per fermarla, WCAG 2.2.2). Mentre la scena
   gioca, uno dei tre punti accanto si accende (data-mossa sulla sezione: uno per turno di chi guarda, 1, 2, 3, e col giro
   della scena da capo; giro «la landing, quinta mano»). */
.campo { background: radial-gradient(60% 70% at 78% 50%, rgba(123, 79, 216, .16), transparent 70%), var(--notte); }
.campo .dentro { display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .campo .dentro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
/* sul telefono il campo sta fra l'introduzione e le mosse: mentre gioca, le mosse che racconta sono subito sotto */
@media (max-width: 899px) {
  .campo .dentro { gap: 0; }
  .parole-campo { display: contents; }
  .campo h2 { order: 1; }
  .campo .intro { order: 2; }
  .scacchiera { order: 3; margin-top: 36px; }
  .mosse { order: 4; }
}
.campo h2 { max-width: 17ch; }
.campo .intro { margin-top: 18px; color: #d4cbe4; max-width: 52ch; }
.mosse { list-style: none; counter-reset: mossa; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.mossa { counter-increment: mossa; position: relative; padding-left: 54px; transition: opacity 320ms ease; }
.mossa::before {
  content: counter(mossa); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-stretch: 80%; color: var(--oro-chiaro); border: 1px solid rgba(248, 226, 166, .5);
  background: transparent; transition: background-color 320ms ease, color 320ms ease;
}
.mossa h3 { font-size: var(--t-medio); font-stretch: 108%; margin-bottom: 6px; }
.mossa p { color: var(--tenue); max-width: 48ch; }
/* la mossa che la scena racconta: il suo numero si accende d'oro, e le altre restano leggibili (all'80%: le parole a 5:1
   sul fondo, anche dove il campo e' piu' viola; al 42%, fino al giro «la landing, seconda mano», erano a 2,2:1, sotto il
   4,5 che serve, WCAG 1.4.3) */
.campo[data-mossa] .mossa { opacity: .8; }
.campo[data-mossa="1"] .mossa.prima, .campo[data-mossa="2"] .mossa.seconda, .campo[data-mossa="3"] .mossa.terza { opacity: 1; }
.campo[data-mossa="1"] .mossa.prima::before, .campo[data-mossa="2"] .mossa.seconda::before,
.campo[data-mossa="3"] .mossa.terza::before { background-color: var(--oro); color: var(--notte); }

.scacchiera { margin: 0; justify-self: center; width: min(100%, 420px); display: grid; gap: 12px; }
@media (max-width: 899px) { .scacchiera { width: min(100%, 360px); } }
.lato-casa { text-align: center; font-size: .75rem; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase;
  transition: color 240ms ease, text-shadow 240ms ease; }
.lato-casa.loro { color: #ec8d86; }
.lato-casa.tua { color: var(--luce); }
/* il colpo diretto: la scena accende la casa dell'avversario (al tavolo si accende la sua fascia) */
.lato-casa.loro.colpita { color: var(--oro-chiaro); text-shadow: 0 0 14px rgba(248, 226, 166, .8); }
/* la scatola della board (al tavolo #campo: gli angoli, il nero intorno), e la foto finche' la copia non arriva. Il
   tappeto lo mette la copia (campo.css), quando arriva: fino ad allora c'e' nella foto, che e' un'immagine loading=lazy
   (il campo non deve scaricare niente insieme all'apertura: sonda-dorso, giro «la landing, seconda mano») */
.campo-vero {
  /* la griglia dentro e' 3:4 come quella del tavolo (#griglia: --grigliaW = 3/4 di --grigliaH), con un bordo del 3,5%
     della larghezza per parte: 0,93 di larghezza, 1,24 di altezza, 1,31 in tutto */
  position: relative; aspect-ratio: 100 / 131; padding: 3.5%; border-radius: 12px; overflow: hidden;
  background: #010001;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px var(--linea);
}
.campo-fermo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.parole-del-campo { display: none; }

/* niente da comprare */
.niente h2 { max-width: 18ch; }
.tre { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tre li {
  --gx: -999px; --gy: -999px;
  position: relative; padding: 28px 26px 30px; border-radius: 18px; background: rgba(21, 12, 35, .6);
  display: grid; align-content: start; gap: 10px;
}
.tre li::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(248, 226, 166, .95), rgba(207, 92, 255, .45) 40%, transparent 70%), var(--linea);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tre h3 { font-size: var(--t-medio); font-stretch: 105%; }
.tre p { color: var(--tenue); }
/* la riga delle mance (giro «la landing, terza mano»): un indirizzo con #mance la mostra sotto la barra fissa, non
   dietro, e accesa. Dal giro «la pagina delle donazioni» ha il link alla loro pagina (/donate), come il piede */
#mance { scroll-margin-top: 96px; }
#mance:target { background: rgba(43, 26, 66, .75); }
.tre .link-mance a { color: var(--oro-chiaro); font-weight: 700; }
.tre .link-mance a:hover { color: var(--oro); }

/* la strada */
.strada { background: linear-gradient(180deg, var(--notte), #0a0716 30%, var(--notte)); padding-bottom: clamp(48px, 6vw, 96px); }
.strada h2 { margin-bottom: clamp(40px, 6vw, 72px); padding-left: 44px; }
@media (min-width: 900px) { .strada h2 { padding-left: 64px; } }
.percorso { position: relative; }
.colonna { position: absolute; top: .6em; bottom: 0; left: 11px; width: 2px; background: var(--luce-tenue); }
@media (min-width: 900px) { .colonna { left: 19px; top: 0; } }
.luce-colonna { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--fatto, 1)); background: linear-gradient(180deg, var(--luce), var(--oro) 85%); box-shadow: 0 0 18px rgba(207, 230, 255, .6); }
.punta {
  position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(207, 230, 255, .25), 0 0 24px 6px rgba(207, 230, 255, .7);
  transform: translateY(var(--dove, 0px)); opacity: 0;
}
.strada.viva .punta { opacity: 1; }
.tappe { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 10vw, 140px); }
.tappa { position: relative; display: grid; gap: 28px; padding-left: 44px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .tappa { padding-left: 64px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.tappa::before {
  content: ""; position: absolute; left: 6px; top: .55em; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--notte); border: 2px solid var(--spento); transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
@media (min-width: 900px) { .tappa::before { left: 14px; top: 50%; margin-top: -6px; } }
.tappa.accesa::before { background: var(--oro); border-color: var(--oro-chiaro); box-shadow: 0 0 16px rgba(232, 193, 115, .8); }
.tappa h3 { font-size: var(--t-medio); font-stretch: 110%; margin-bottom: 12px; }
.tappa .parole p { color: #d4cbe4; max-width: 46ch; }
.vista { position: relative; min-height: 220px; display: grid; place-items: center; }

/* 1: tre creature */
.ventaglio { min-height: 280px; }
.ventaglio img {
  position: absolute; width: min(36%, 168px); border-radius: var(--raggio-carta);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ventaglio img:nth-child(1) { transform: translateX(-62%) rotate(-11deg); }
.ventaglio img:nth-child(2) { transform: translateY(-6%); z-index: 1; }
.ventaglio img:nth-child(3) { transform: translateX(62%) rotate(11deg); }
.ventaglio:hover img:nth-child(1) { transform: translateX(-80%) rotate(-15deg) translateY(-4%); }
.ventaglio:hover img:nth-child(3) { transform: translateX(80%) rotate(15deg) translateY(-4%); }

/* 2: la gemma */
.gemma img { width: 150px; height: 150px; filter: drop-shadow(0 0 30px rgba(207, 92, 255, .55)); }
.scintilla {
  position: absolute; width: 18px; height: 18px; background: var(--oro-chiaro);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; transform: scale(.4);
}
.s1 { top: 18%; left: 32%; } .s2 { top: 28%; right: 30%; width: 12px; height: 12px; } .s3 { bottom: 22%; left: 38%; width: 10px; height: 10px; }
.s4 { bottom: 30%; right: 34%; width: 16px; height: 16px; background: var(--luce); } .s5 { top: 46%; left: 26%; width: 9px; height: 9px; background: var(--luce); }
.tappa.accesa .scintilla { animation: brilla 2.6s ease-in-out infinite; }
.tappa.accesa .s2 { animation-delay: .5s; } .tappa.accesa .s3 { animation-delay: 1.1s; } .tappa.accesa .s4 { animation-delay: 1.6s; } .tappa.accesa .s5 { animation-delay: 2s; }
@keyframes brilla { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.5) rotate(90deg); } }

/* 3: il mazzo da 27 */
.mazzo { gap: 14px; }
.posti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px); }
.posti li { aspect-ratio: 750 / 1050; border-radius: 4px; border: 1px solid rgba(248, 226, 166, .5); background: url('../texture/retro_carta.avif') center / cover, #2a1846; transition: transform .25s ease; }
.js .posti li:not(.pieno) { border: 1px dashed rgba(207, 230, 255, .25); background: transparent; }
.posti li.nuovo { transform: translateY(-3px); }
/* (giro «la landing, seconda mano») il dorso delle carte e' la texture del gioco (192 KB): il browser la scaricava con la
   pagina, insieme al fondo dell'apertura. Adesso solo quando la strada si avvicina (.vicina, da landing.js); senza
   JavaScript come prima */
.js .strada:not(.vicina) .posti li, .js .strada:not(.vicina) .giro-carta .retro { background-image: none; }
.conto-posti { color: var(--tenue); font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; }
.conto-posti span { color: var(--oro-chiaro); font-weight: 800; font-stretch: 75%; font-size: 1.6em; }

/* 4: il tabellone, una scala */
.turni { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; width: min(100%, 400px); }
.turni li {
  --scalino: 0;
  margin-left: calc(var(--scalino) * 7.5%); padding: 7px 14px; border-radius: 8px; width: max-content;
  border: 1px solid rgba(207, 230, 255, .35); color: var(--luce); background: rgba(207, 230, 255, .05); font-weight: 700; font-stretch: 88%; font-size: .95rem;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.js .turni li:not(.vinto) { border-color: var(--linea); color: var(--spento); background: transparent; }
.turni li:nth-child(2) { --scalino: 1; } .turni li:nth-child(3) { --scalino: 2; } .turni li:nth-child(4) { --scalino: 3; }
.turni li:nth-child(5) { --scalino: 4; } .turni li:nth-child(6) { --scalino: 5; } .turni li:nth-child(7) { --scalino: 6; } .turni li:nth-child(8) { --scalino: 7; }
.turni li.finale, .js .turni li.finale.vinto { color: #2a1606; border-color: var(--oro-chiaro); background: linear-gradient(180deg, var(--oro-chiaro), var(--oro)); }

/* 5: il premio */
.carta-premio { position: relative; width: min(52%, 210px); container-type: inline-size; border-radius: var(--raggio-carta); }
.carta-premio img { border-radius: var(--raggio-carta); }
.carta-premio::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--oro), 0 0 60px rgba(232, 193, 115, .55); opacity: .35; transition: opacity .6s ease; pointer-events: none; }
.tappa.accesa .carta-premio::after { opacity: 1; }

/* 6: la stampa, fronte e retro */
.stampa { perspective: 1100px; }
.giro-carta { --giro: 0deg; position: relative; width: min(46%, 190px); aspect-ratio: 750 / 1050; transform-style: preserve-3d; transform: rotateY(var(--giro)); }
.giro-carta .fronte, .giro-carta .retro { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--raggio-carta); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); }
.giro-carta .retro { transform: rotateY(180deg); background: url('../texture/retro_carta.avif') center / cover, #2a1846; }

/* ---------------------------------------------------------------- la Limited, viva e contata */
.limited { background: radial-gradient(70% 60% at 25% 40%, rgba(123, 79, 216, .18), transparent 70%), var(--notte); }
.limited .dentro { display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .limited .dentro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.carta-viva { perspective: 1200px; display: grid; place-items: center; }
.carta-luce {
  --rx: 0deg; --ry: 0deg; --px: 0; --gx: 50%; --gy: 30%;
  position: relative; width: min(86%, 400px); aspect-ratio: 750 / 1050; border-radius: var(--raggio-carta); overflow: hidden; container-type: inline-size;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(248, 226, 166, .35), 0 0 90px -20px rgba(232, 193, 115, .35); background: #02060c;
}
.carta-luce.segue { transition: transform .08s linear; }
/* (giro «la landing, seconda mano») la prima immagine del video e' un'immagine sopra il video, che si scarica solo quando
   la Limited si avvicina (loading=lazy): come «poster» del video si scaricava con la pagina, 68 KB insieme al fondo
   dell'apertura. Se ne va quando il video gira (.gira, da landing.js); chi non vuole movimento, e chi non ha JavaScript
   (il browser gli mostrerebbe i comandi del video, su un riquadro nero), vede lei */
.arte-ferma, .arte-viva, .carta-luce .cornice { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arte-ferma { transition: opacity .5s ease; }
.carta-luce.gira .arte-ferma { opacity: 0; }
.lamina {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .38;
  background: linear-gradient(115deg, transparent 30%, rgba(248, 226, 166, .55) 44%, rgba(207, 92, 255, .4) 52%, rgba(120, 200, 255, .35) 58%, transparent 72%);
  background-size: 250% 250%; background-position: calc(50% + var(--px) * 40%) 50%;
}
.conti { display: grid; gap: 22px; }
.conti h2 { display: grid; gap: 6px; }
.numero-grande { font-size: clamp(4rem, 2rem + 9vw, 9.5rem); font-weight: 850; font-stretch: 62%; line-height: .9; color: var(--oro-chiaro); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sotto-numero { font-size: var(--t-medio); font-stretch: 112%; font-weight: 700; }
.conti > p { color: #d4cbe4; max-width: 52ch; }
.tirature { width: 100%; max-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tirature caption { text-align: left; color: var(--tenue); font-size: var(--t-piccolo); padding-bottom: 10px; }
.tirature th { text-align: left; font-weight: 700; font-stretch: 80%; color: var(--tenue); font-size: var(--t-piccolo); padding: 5px 14px 5px 0; white-space: nowrap; width: 1%; }
.tirature td { padding: 5px 0; }
.tirature td.copie { text-align: right; padding-left: 14px; width: 1%; font-weight: 700; font-stretch: 80%; }
.barra-tiratura { display: block; height: 10px; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, var(--oro-scuro), var(--oro-chiaro)); }
/* la lunghezza di ogni barra: le copie in scala, sulla tiratura piu' alta (il server la scrive a passi di 5) */
.barra-tiratura.quota-5 { width: 5%; }
.barra-tiratura.quota-10 { width: 10%; }
.barra-tiratura.quota-15 { width: 15%; }
.barra-tiratura.quota-20 { width: 20%; }
.barra-tiratura.quota-25 { width: 25%; }
.barra-tiratura.quota-30 { width: 30%; }
.barra-tiratura.quota-35 { width: 35%; }
.barra-tiratura.quota-40 { width: 40%; }
.barra-tiratura.quota-45 { width: 45%; }
.barra-tiratura.quota-50 { width: 50%; }
.barra-tiratura.quota-55 { width: 55%; }
.barra-tiratura.quota-60 { width: 60%; }
.barra-tiratura.quota-65 { width: 65%; }
.barra-tiratura.quota-70 { width: 70%; }
.barra-tiratura.quota-75 { width: 75%; }
.barra-tiratura.quota-80 { width: 80%; }
.barra-tiratura.quota-85 { width: 85%; }
.barra-tiratura.quota-90 { width: 90%; }
.barra-tiratura.quota-95 { width: 95%; }
.barra-tiratura.quota-100 { width: 100%; }

/* ---------------------------------------------------------------- non fidarti: verifica */
.verifica { background: #04030a; border-block: 1px solid var(--linea); }
.verifica h2 { font-size: var(--t-grande); font-stretch: 125%; letter-spacing: -.03em; line-height: .95; }
.impronta { margin: clamp(36px, 5vw, 64px) 0 0; display: grid; gap: 12px; }
.impronta figcaption { color: var(--tenue); font-size: var(--t-piccolo); }
.esadecimale {
  font-size: clamp(1.05rem, .6rem + 2.3vw, 2.6rem); font-weight: 600; font-stretch: 70%; line-height: 1.2; letter-spacing: 0;
  color: var(--luce); word-break: break-all; max-width: 34em; font-variant-numeric: tabular-nums;
}
.esadecimale .c { display: inline-block; width: .56em; text-align: center; }
.esadecimale .c.mossa { color: var(--spento); }
.blocco { color: var(--bitcoin); font-weight: 700; font-stretch: 90%; }
.blocco.attesa { color: var(--tenue); font-weight: 500; max-width: 60ch; }
.esempio { color: var(--tenue); font-size: var(--t-piccolo); max-width: 60ch; }
.tre-righe { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 20px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .tre-righe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tre-righe p { color: #d4cbe4; padding-top: 16px; border-top: 1px solid var(--linea); }
.anche { margin: 36px 0 28px; color: var(--tenue); max-width: 62ch; }

/* ---------------------------------------------------------------- la maggiore eta' */
.maggiore { background: radial-gradient(60% 70% at 85% 30%, rgba(7, 22, 40, .9), transparent 70%), var(--notte); }
/* TROGLO che se ne va nel buio, piano: la creatura della Limited viva */
.maggiore::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 50%; width: min(62vw, 640px); aspect-ratio: 750 / 1050; transform: translateY(-50%) rotate(-8deg);
  background: center / contain no-repeat; opacity: .16; filter: saturate(.35) brightness(.8);
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%);
}
@media (max-width: 899px) { .maggiore::after { opacity: .1; right: -30%; } }
.maggiore.vicina::after { background-image: url('troglo-creatura-480.webp'); }
.maggiore .dentro { z-index: 1; }
.maggiore .dentro { display: grid; gap: 26px; max-width: 900px; margin-left: max(0px, calc((100vw - 1180px) / 2)); }
.epigrafe { margin: 0 0 18px; }
.epigrafe p { font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); font-weight: 300; font-stretch: 88%; line-height: 1.2; color: var(--luce); max-width: 26ch; }
.epigrafe p::before { content: '«'; } .epigrafe p::after { content: '»'; }
.epigrafe footer { margin-top: 12px; color: var(--tenue); font-size: var(--t-piccolo); font-stretch: 90%; }
.maggiore .dentro > p { color: #d4cbe4; max-width: 62ch; }

/* ---------------------------------------------------------------- le lingue */
.elenco-lingue { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.elenco-lingue li { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 700; font-stretch: 112%; }
.elenco-lingue a { color: var(--tenue); text-decoration: none; border-bottom: 2px solid transparent; }
.elenco-lingue a:hover { color: var(--testo); }
.elenco-lingue a[aria-current] { color: var(--testo); border-bottom-color: var(--oro); }
.lingue p { color: #d4cbe4; max-width: 60ch; }

/* ---------------------------------------------------------------- l'invito finale */
.finale { overflow: hidden; background: radial-gradient(80% 90% at 50% 100%, rgba(123, 79, 216, .25), transparent 70%), var(--notte); }
.finale .dentro { display: grid; justify-items: start; gap: 22px; }
.finale h2 { font-size: var(--t-grande); font-stretch: 125%; letter-spacing: -.03em; line-height: .95; max-width: 12ch; }
.finale p { color: #d4cbe4; max-width: 46ch; }
.meteore { position: absolute; inset: 0; pointer-events: none; }
.meteora {
  position: absolute; top: -10%; width: 2px; height: 120px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(207, 230, 255, .85)); opacity: 0;
  transform: rotate(var(--angolo, 20deg)) translateY(0);
  animation: cade var(--durata, 3s) linear var(--ritardo, 0s) infinite;
}
.meteora.oro { background: linear-gradient(180deg, transparent, var(--oro-chiaro)); }
@keyframes cade {
  0% { opacity: 0; transform: rotate(var(--angolo, 20deg)) translateY(0); }
  8% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--angolo, 20deg)) translateY(130vh); }
}

/* ---------------------------------------------------------------- il piede */
.piede { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); color: var(--tenue); font-size: var(--t-piccolo); }
.piede .dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.piede nav { display: flex; flex-wrap: wrap; gap: 20px; }
.piede a { color: var(--tenue); }
.piede a:hover { color: var(--testo); }
/* il link delle mance, nel piede: d'oro, e' l'unica cosa che il gioco chiede */
.piede .mance-piede a { color: var(--oro-chiaro); text-decoration: underline; }
.piede .mance-piede a:hover { color: var(--oro); }
/* le carte del gioco (giro «il cerchio burocratico»: i termini, la privacy, i cookie, i contatti), in fondo al piede, su
   una riga loro (legale-pezzi.html, «legale») */
.piede nav.legale { flex-basis: 100%; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--linea); }
.piede nav.legale a { font-size: .8125rem; }
/* la riga dei diritti, sotto i link legali (giro «cosa si puo' copiare»: legale-pezzi.html, «legale») */
.piede .diritti { flex-basis: 100%; margin: 0; font-size: .8125rem; }

/* ---------------------------------------------------------------- l'avviso in basso
   (giro «il cerchio burocratico»: legale-pezzi.html, «avviso»; landing/avviso.js lo accende finche' non si tocca «Ho
   capito»). Sopra tutto, staccato dai bordi e dalla tacca del telefono; la pagina, mentre c'e', ha in fondo il suo
   spazio (body.con-avviso), cosi' il piede non resta sotto */
.avviso-in-basso {
  position: fixed; z-index: 40; left: var(--gola); right: var(--gola-destra); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  max-width: 820px; margin-inline: auto; display: flex; align-items: center; gap: 12px 18px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea);
  background: rgba(16, 9, 27, .97); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8);
  color: var(--testo); font-size: var(--t-piccolo); line-height: 1.5;
}
.avviso-in-basso[hidden] { display: none; }
.avviso-in-basso p { margin: 0; flex: 1 1 auto; }
.avviso-in-basso a { color: var(--oro-chiaro); text-decoration: underline; }
.avviso-in-basso .bottone { flex: none; min-height: 44px; }
body.con-avviso { padding-bottom: calc(var(--avviso-alto, 0px) + 24px); }
/* al telefono piu' raccolto: il bottone accanto al testo, in fondo, e il testo un poco piu' piccolo (in italiano, a 430
   pixel, l'avviso e' un sesto dello schermo) */
@media (max-width: 560px) {
  .avviso-in-basso { align-items: flex-end; gap: 10px 12px; padding: 12px 12px 12px 14px; font-size: .8125rem; line-height: 1.45; }
  .avviso-in-basso .bottone { min-height: 40px; padding-inline: .9em; }
}
/* (e sui telefoni stretti, fino a 412 pixel, il bottone sotto, largo: accanto, il testo andrebbe a capo troppe volte.
   Misurato nelle sei lingue, a 390: in riga in tedesco 214 pixel, un quarto dello schermo, e a colonna 168, un quinto;
   in spagnolo e in olandese 177 e 149; in italiano 139 e 149) */
@media (max-width: 412px) {
  .avviso-in-basso { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* chi non vuole movimento: tutto fermo, tutto leggibile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .meteore, .raggi { display: none; }
}