/* ══════════════════════════════════════════════════════════════════
   VESEMEN · LA PAGINA CHE RACCONTA
   Sta fuori dal portale di proposito. Il portale ha un lavoro solo, e ogni
   riga che gli si appende sotto glielo toglie.

   REGOLA CHE HA DECISO TUTTO: qui non si accende la ventola. Niente canvas,
   niente requestAnimationFrame, niente animazioni al rullo, niente JS che
   ascolta lo scorrimento, niente backdrop-filter. Le uniche cose che si
   muovono sono le transizioni di un dito quando tocchi qualcosa, e le
   immagini arrivano quando servono. Una pagina lunga deve costare come una
   pagina di testo, perche' e' quello che e'.

   E' scritta prima per il telefono. Le regole qui sotto sono quelle del
   telefono; il desktop arriva dopo, nei @media (min-width), e non prima.
   ══════════════════════════════════════════════════════════════════ */

body{padding-top:var(--bar)}

/* il fondo: una sola sfumatura ferma, dipinta una volta e mai piu' toccata.
 * Da' profondita' senza costare un fotogramma. */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120vw 70vh at 50% -10%, rgba(180,240,74,.10) 0%, transparent 60%),
    radial-gradient(90vw 60vh at 100% 40%, rgba(92,216,255,.05) 0%, transparent 62%),
    var(--void)}
main{position:relative;z-index:1}

section{padding:64px 0}
section + section{border-top:1px solid var(--line)}
/* IL NUMERO DELLA SEZIONE. La pagina e' lunga e chi scorre ha bisogno di
 * appigli: un numero in lime davanti all'etichetta dice a che punto sei senza
 * occupare una riga sua. */
.shead .lbl em{font-style:normal;color:var(--lime);margin-right:11px;letter-spacing:.14em}
.shead{margin-bottom:26px}
.shead h2{font-size:clamp(28px,7.4vw,46px);line-height:1.02;margin-top:9px}
/* la parola in risalto dei titoli e' lime come tutto il resto del sito; solo
 * nella sezione dei leggendari diventa oro, che e' l'unico posto della pagina
 * dove quel colore vuol dire qualcosa */
.shead h2 em{font-style:normal;color:var(--lime)}
#leggendari .shead h2 em{color:var(--l5)}
.shead p{margin:14px 0 0;color:var(--dim);font-size:16px;line-height:1.62;max-width:60ch}
.lede{color:var(--dim);font-size:17px;line-height:1.65;max-width:62ch}
.lede b{color:var(--ink);font-weight:600}
.limeword{color:var(--lime)}

/* ── L'APERTURA ───────────────────────────────────────────────────
 * Il titolo dice cosa sono, la riga sotto dice come funzionano, e i tre
 * numeri dicono le uniche tre cose che uno vuole sapere prima di decidere. */
.hero{padding-top:30px}
.hero h1{font-size:clamp(32px,8.6vw,58px);line-height:1}
.hero h1 em{font-style:normal;color:var(--lime)}

/* la fila dei personaggi: sul telefono scorre col dito e si aggancia,
 * sul desktop e' una griglia ferma. Nessuna delle due costa niente. */
/* ── IL BANCO ─────────────────────────────────────────────────────
 * Il pezzo forte dell'apertura: un ritratto grande a sinistra e il discorso a
 * destra. Sul telefono e' una colonna sola nell'ordine in cui si legge, cioe'
 * titolo, personaggio, tasto: il tasto subito sotto l'immagine, se no il
 * ritratto riempie lo schermo e la cosa piu' bella della pagina resta ferma
 * perche' nessuno vede come si muove. */
/* SUL TELEFONO L'ORDINE E' QUELLO IN CUI SI LEGGE: chi sei, cosa fai vedere,
 * cosa si puo' premere, e solo dopo il discorso lungo. Il titolo e il ritratto
 * e il tasto devono stare nella prima schermata tutti e tre, per cui la frase
 * di presentazione scende sotto: e' l'unica delle quattro che puo' aspettare. */
.lab{margin-top:22px;display:grid;gap:18px}
.pitch{order:1} .glass{order:2} .acts{order:3} .say{order:4}
.say{display:grid;gap:12px}

.glass{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line2);background:var(--panel);
  box-shadow:0 30px 60px -34px #000, 0 0 0 1px rgba(180,240,74,.08)}
.glass canvas{display:block;width:100%;height:auto;aspect-ratio:1}

/* il livello, l'unico dato in vista: una parola nell'angolo */
.badge{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:999px;
  background:rgba(7,8,11,.72);border:1px solid var(--c);color:var(--c);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase}

/* I PUNTI DEL PEZZO, dall'altra parte del grado.
 * Stessa pastiglia, stesso vetro sotto, ma il colore non cambia col livello: i
 * punti valgono quello che valgono, e farli cambiare colore direbbe una seconda
 * volta la cosa che dice gia' il grado. */
/* QUI C'ERA LA PASTIGLIA DEI PUNTI sull'angolo del ritratto, ed e' andata via
   con la pastiglia. Si chiamava `.punti` come l'elenco dei punti per grado piu'
   in basso in questo stesso foglio: due cose diverse, stesso nome. La seconda
   regola vinceva su display e list-style ma non su `position:absolute`, che
   restava attaccato all'elenco e lo mandava a galleggiare in fondo alla pagina,
   sopra "Have fun". Un difetto che nessuna delle due regole, letta da sola,
   lasciava sospettare. */

/* il lampo di cambio: un colpo solo, poi non resta niente che si muove */
.pop{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.55), transparent 60%)}
.pop.go{animation:pop .42s ease-out forwards}
@keyframes pop{0%{opacity:.9}100%{opacity:0}}
.wait{position:absolute;inset:0;display:grid;place-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}

.pitch h1{margin-top:9px}
/* ── I DUE TASTI ──────────────────────────────────────────────────
 * Stessa forma, stessa altezza, stesso carattere. Cambia solo il riempimento,
 * che e' l'unica cosa che deve distinguere il tasto principale dall'altro.
 * Prima GENERATE era una pastiglia di lime in Archivo Black e MINT ONE un
 * rettangolino di contorno in monospazio: sembravano di due pagine diverse.
 * Questo trattamento era nato solo per il telefono, ed era una scelta sbagliata:
 * un tasto brutto resta brutto anche su uno schermo grande. */
.acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.acts .run,
.acts .btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;border-radius:999px;
  font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.02em;
  text-transform:none;white-space:nowrap;transition:.16s cubic-bezier(.2,1,.3,1)}
.acts .run{border:1px solid var(--lime)}
.acts .btn2{background:rgba(243,241,236,.035);border:1px solid var(--line2);
  color:var(--ink);box-shadow:none}
.acts .btn2:hover{border-color:var(--lime);color:var(--ink);
  background:rgba(180,240,74,.07);box-shadow:0 0 34px -14px var(--lime)}

/* la spia verde: e' l'unica cosa che si muove in tutta la pagina, ed e' un
 * puntino di nove pixel. `flex:0 0 9px` e non `width`: dentro un tasto stretto
 * si schiacciava a larghezza zero e restava solo l'alone, che e' un modo
 * curioso di sparire. */
.led{display:block;flex:0 0 9px;width:9px;height:9px;border-radius:99px;
  background:var(--lime);box-shadow:0 0 10px var(--lime), inset 0 0 3px #fff;
  animation:led 1.5s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1;transform:scale(1)}
               50%{opacity:.3;transform:scale(.72)}}
.arw{display:block;width:15px;height:15px;flex:0 0 15px;color:var(--lime);
  transition:transform .16s cubic-bezier(.2,1,.3,1)}
.acts .btn2:hover .arw{transform:translateX(3px)}
.acts .run{padding:14px 30px;font-size:15px}
.tiny{flex:1 0 100%;margin:2px 0 0;color:var(--faint);font-size:11.5px;line-height:1.6}

/* ── LA FASCIA DELLA CHIUSURA ─────────────────────────────────── */
.band{display:flex;gap:10px;margin:0 -22px;padding:0 22px 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.band::-webkit-scrollbar{display:none}
.band img{flex:0 0 42vw;width:42vw;max-width:200px;height:auto;aspect-ratio:1;border-radius:14px;
  scroll-snap-align:center;background:var(--panel);border:1px solid var(--line)}

/* i tre numeri, in colonna sul telefono perche' ognuno merita la sua riga */
.facts{display:grid;gap:1px;margin-top:34px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fact{background:var(--deep);padding:20px 18px}
.fact b{display:block;font-family:'Archivo Black',sans-serif;font-size:26px;
  letter-spacing:-.02em;margin-top:7px}
.fact.lime b{color:var(--lime)}
.fact.pink b{color:var(--pink)}
.fact span{display:block;margin-top:6px;color:var(--dim);font-size:13.5px;line-height:1.5}

/* ── LA DIVISIONE DEI DIECI VET ───────────────────────────────────
 * La barra viene prima delle righe di proposito: la proporzione si capisce a
 * colpo d'occhio e le parole servono solo a dire cosa vuol dire ogni pezzo.
 * Tre fette e tre colori che esistono gia', il rosa e' lo stesso del contatore
 * del bruciato in cima alla pagina, cosi' il collegamento si fa da solo. */
.split{display:flex;gap:3px;height:14px;margin-bottom:30px}
.split span{width:var(--w);background:var(--c);border-radius:3px}
.split span:first-child{border-radius:7px 3px 3px 7px}
.split span:last-child{border-radius:3px 7px 7px 3px}

.cuts{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cuts li{display:flex;gap:16px;align-items:baseline;background:var(--deep);padding:22px 18px}
.cuts b{flex:0 0 auto;min-width:2.8em;font-family:'Archivo Black',sans-serif;font-size:26px;
  letter-spacing:-.02em;color:var(--c)}
.cuts h3{font-size:17px;letter-spacing:-.01em}
.cuts p{margin:8px 0 0;color:var(--dim);font-size:14.5px;line-height:1.62}
.cuts p b{display:inline;min-width:0;font-family:inherit;font-size:inherit;
  font-weight:600;letter-spacing:normal;color:var(--ink)}

/* ── I CINQUE LIVELLI ─────────────────────────────────────────────
 * Sul telefono e' un carosello che si aggancia: cinque schede in colonna
 * sarebbero due schermate di scorrimento per una cosa che si guarda, non si
 * legge. Sul desktop tornano in fila. */
.tiers{display:flex;gap:12px;margin:0 -22px;padding:0 22px 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tiers::-webkit-scrollbar{display:none}
.tier{flex:0 0 min(74vw,300px);scroll-snap-align:center;
  background:var(--deep);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tier img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--panel)}
.tier .body{padding:16px 17px 18px;border-top:1px solid var(--line)}
.tier .name{display:flex;align-items:center;gap:9px;
  font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.01em}
.tier .dot{width:10px;height:10px;border-radius:99px;background:var(--c);
  box-shadow:0 0 12px -1px var(--c)}
.tier .name b{color:var(--c);font-weight:inherit}
/* nella scheda resta il nome del tratto che si vede nell'immagine, e basta.
 * C'era anche una riga di commento tipo "where most characters land" e un
 * "count tbd" accanto al conteggio: la prima era una descrizione della
 * distribuzione che non si puo' piu' affermare, il secondo era un segnaposto
 * messo in vista. Insieme facevano sembrare la scheda rotta. */
.tier .ex{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--ink);line-height:1.5}
.tier .ex i{font-style:normal}
/* la barretta del peso e' sparita con i pesi: la rarita' adesso si dichiara
 * come un numero fisso su 100 000, non come una probabilita' che galleggia,
 * e disegnare una barra per un numero che non c'e' ancora sarebbe una bugia
 * grafica */
.tier .n{display:flex;margin-top:12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}
.hint{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.odds{margin-top:28px;padding:20px 18px;border:1px solid var(--line2);border-radius:16px;
  background:rgba(180,240,74,.04);font-size:16px;line-height:1.66;color:var(--dim)}
.odds b{color:var(--lime);font-family:'Archivo Black',sans-serif;letter-spacing:-.01em}
.note{margin-top:16px;color:var(--faint);font-size:13.5px;line-height:1.66;max-width:64ch}
.note i{font-style:italic;color:var(--dim)}

/* ── I SEI ────────────────────────────────────────────────────────
 * Sei lastre piccole, non sei riquadri grossi. Prima erano tre per riga e
 * larghe quasi quattrocento pixel: un tratto ritagliato dentro un rettangolo
 * grigio grande cosi' sembra una fotografia di magazzino, non un pezzo raro.
 *
 * Adesso ogni lastra e' una teca: il tratto galleggia su una pozza calda
 * (l'oro del livello, appena accennato), la cornice ha un filo dello stesso
 * colore e un alone fuori, e il nome sta DENTRO in basso su una velatura,
 * invece che in una didascalia staccata. Il risultato e' che la lastra e' un
 * oggetto solo e non un'immagine con una scritta sotto. */
.six{display:flex;gap:10px;margin:0 -22px;padding:0 22px 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.six::-webkit-scrollbar{display:none}
.plate{position:relative;flex:0 0 min(52vw,220px);scroll-snap-align:center;margin:0;
  border-radius:18px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,194,74,.16), transparent 62%),
    linear-gradient(180deg, #14161E, #0B0D12);
  border:1px solid rgba(255,194,74,.22);
  box-shadow:0 18px 40px -22px #000, inset 0 1px 0 rgba(255,255,255,.06),
             0 0 34px -20px rgba(255,194,74,.7)}
.plate img{display:block;width:100%;height:auto;aspect-ratio:1;background:transparent}
/* la velatura sotto il nome: nasce trasparente e affonda, cosi' il tratto non
 * viene tagliato da una banda netta */
.plate figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 11px;text-align:center;
  background:linear-gradient(transparent, rgba(7,8,11,.78) 42%, rgba(7,8,11,.94))}
.plate figcaption b{display:block;font-family:'Archivo Black',sans-serif;font-size:13px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.plate figcaption span{display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--l5)}

/* QUANTI NE ESCONO, SOTTO IL NOME.
 * E' una fascia e non una cifra: di un tratto tirato dieci volte su centomila
 * ne escono sette o tredici, e scrivere "10" sarebbe una promessa che la
 * collezione non mantiene. Sta in grigio e non in oro perche' e' un dato, non
 * un titolo: l'oro qui dentro vuol dire "leggendario" e basta. */
.plate figcaption .quanti{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;
  font-style:normal;font-size:8.5px;letter-spacing:.08em;color:var(--dim);
  font-variant-numeric:tabular-nums}

/* ── LE SPECIALI ──────────────────────────────────────────────────
 * Stessa lastra dei leggendari ma con una descrizione sotto, e senza l'oro:
 * una speciale non e' piu' rara, e' un'altra cosa, e dargli il colore del
 * livello piu' alto direbbe il contrario. Il lime, che qui vuol dire "questo
 * fa qualcosa". */
.plate.speciale{flex:0 0 min(78vw,300px);background:
  radial-gradient(circle at 50% 40%, rgba(180,240,74,.13), transparent 62%),
  linear-gradient(180deg,#13161D,#0B0D12);
  border-color:rgba(180,240,74,.24);
  box-shadow:0 18px 40px -22px #000, inset 0 1px 0 rgba(255,255,255,.06),
             0 0 34px -20px rgba(180,240,74,.6)}
.plate.speciale figcaption{position:static;padding:14px 15px 0;text-align:left;
  background:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plate.speciale figcaption b{font-size:16px;color:var(--ink)}
.plate.speciale figcaption span{margin:0;color:var(--lime);font-size:9px}
.plate.speciale p{margin:9px 0 0;padding:0 15px 16px;color:var(--dim);
  font-size:13.5px;line-height:1.6}

/* ── LE DOMANDE ───────────────────────────────────────────────────
 * <details> vero, non un accordion fatto a mano: si apre senza JS, funziona
 * col tasto invio, e il telefono lo conosce gia'. La freccia ruota, e basta. */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  list-style:none;padding:22px 0;font-family:'Archivo Black',sans-serif;
  font-size:17px;line-height:1.34;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--lime)}
.qa .chev{margin-left:auto;flex:0 0 auto;width:22px;height:22px;position:relative;
  transition:transform .18s ease}
.qa .chev::before,.qa .chev::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--lime);border-radius:2px;transform:translate(-50%,-50%)}
.qa .chev::before{width:13px;height:2px;transition:opacity .18s ease}
.qa .chev::after{width:2px;height:13px}
/* aperto diventa un meno, non un'asta: il segno ruota di un quarto e sparisce
 * la stanghetta ORIZZONTALE, perche' ruotando e' quella verticale a finire
 * dritta. Scambiarle lasciava una riga in piedi che non voleva dire niente. */
.qa details[open] .chev{transform:rotate(90deg)}
.qa details[open] .chev::before{opacity:0}
.qa .ans{padding:0 0 24px;color:var(--dim);font-size:15.5px;line-height:1.7;max-width:64ch}
.qa .ans p{margin:0 0 12px}
.qa .ans p:last-child{margin:0}
.qa .ans b{color:var(--ink);font-weight:600}

/* ── LA STRADA ────────────────────────────────────────────────────
 * Verticale sempre, anche sul desktop: una roadmap si legge dall'alto in
 * basso e metterla in orizzontale e' solo un modo per farla stare in una
 * schermata che non serve a nessuno. */
.road{list-style:none;margin:0;padding:0;position:relative}
.road::before{content:'';position:absolute;left:15px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--lime),rgba(180,240,74,.18) 62%,transparent)}
.road li{position:relative;padding:0 0 34px 52px}
.road li:last-child{padding-bottom:0}
.road .pin{position:absolute;left:6px;top:3px;width:20px;height:20px;border-radius:99px;
  background:var(--void);border:2px solid var(--lime);
  box-shadow:0 0 0 5px var(--void),0 0 18px -3px var(--lime)}
.road li.maybe .pin{border-color:var(--faint);border-style:dashed;box-shadow:0 0 0 5px var(--void)}
.road h3{font-size:20px;letter-spacing:-.01em}
.road .when{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);display:block;margin-bottom:6px}
.road li.maybe .when{color:var(--faint)}
.road p{margin:9px 0 0;color:var(--dim);font-size:15.5px;line-height:1.68;max-width:58ch}

/* ── LA CHIUSURA ──────────────────────────────────────────────────
 * Due parole e un bottone. Chi e' arrivato fin qui ha gia' deciso. */
.end{text-align:center;padding:74px 0 90px;border-top:1px solid var(--line)}
.end h2{font-size:clamp(38px,13vw,86px);line-height:.94}
.end h2 em{font-style:normal;color:var(--lime)}
.end .run{margin-top:30px}
.end .small{margin-top:26px;color:var(--faint);font-size:12px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.08em}

/* ══ DA QUI IN SU E' IL DESKTOP ═══════════════════════════════════ */
@media (min-width:760px){
  section{padding:88px 0}
  .hero{padding-top:56px}
  /* IL BANCO SI APRE IN DUE. Il vetro tiene la colonna di sinistra per intero,
   * il discorso e il tasto si dividono quella di destra: cosi' il testo resta
   * appoggiato al centro del ritratto invece di partire dal suo bordo alto. */
  /* IL BANCO SI APRE IN DUE. Il vetro tiene la colonna di sinistra per intero,
   * il resto si impila a destra: titolo, frase, tasti. La collocazione
   * esplicita nella griglia batte gli `order` del telefono, per cui non serve
   * disfarli uno per uno. */
  .lab{margin-top:36px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;gap:16px 38px;align-content:center}
  .glass{grid-column:1;grid-row:1 / 4}
  .pitch{grid-column:2;grid-row:1;align-self:end}
  .say{grid-column:2;grid-row:2}
  .acts{grid-column:2;grid-row:3;align-self:start;margin-top:6px}
  .badge{left:18px;bottom:18px;font-size:11.5px}
  /* la fascia torna griglia: vanno azzerati i margini negativi che sul telefono
   * la facevano uscire dai bordi, se no la pagina scorre di lato */
  .band{margin:0;overflow:visible;display:grid;grid-template-columns:repeat(6,1fr);
    gap:12px;padding:0}
  .band img{flex:none;width:100%;max-width:none;height:auto}
  .facts{grid-template-columns:repeat(3,1fr);margin-top:44px}
  .split{height:16px;margin-bottom:34px}
  .cuts li{padding:26px 24px;gap:22px}
  .cuts b{font-size:32px;min-width:2.6em}
  .cuts h3{font-size:19px}
  .cuts p{font-size:15.5px}
  .fact{padding:26px 24px}
  .fact b{font-size:32px}
  .tiers{overflow:visible;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
    margin:0;padding:0}
  .tier{flex:none}
  .six{overflow:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    margin:0;padding:0}
  #speciali .six{grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px}
  .plate.speciale{flex:none}
  .plate{flex:none}
  .tier .name{font-size:17px}
  .hint{display:none}
  .qa summary{font-size:19px;padding:26px 0}
  .qa .ans{font-size:16px;padding-bottom:28px}
  .road li{padding-left:60px;padding-bottom:42px}
  .road h3{font-size:23px}
}
@media (min-width:1040px){
  .shead p,.lede{font-size:18px}
  /* tutte e sette in fila: sono un elenco corto, e vederle insieme e' il punto.
     Erano sei colonne quando i leggendari erano sei: con il settimo, le Matrix
     Shades finivano da sole su una seconda riga. */
  .six{grid-template-columns:repeat(7,1fr)}
  .plate figcaption{padding:22px 8px 10px}
  .plate figcaption b{font-size:12px}
}

/* ══ IL ROUND ══════════════════════════════════════════════════════
   LA CIAMBELLA SERVE A CONFRONTARE, non a decorare. Quattro percentuali in
   fila si leggono una alla volta; un anello le mette tutte nella stessa
   occhiata, e si vede subito che il bruciato e' la fetta piu' grande e la
   squadra la piu' piccola.

   Il cerchio ha circonferenza cento esatta, cosi' ogni fetta si scrive nella
   sua percentuale e non c'e' aritmetica da rifare a mano nel foglio di stile. */
.torta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.cia{position:relative;width:200px;height:200px;flex:0 0 auto}
.cia svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.cia circle{fill:none;stroke-width:3.4}
.cia .fondo{stroke:var(--line)}
.cia .fetta{stroke:var(--c)}
.ciat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;pointer-events:none}
.ciat b{display:inline-flex;align-items:center;font-family:'Archivo Black',sans-serif;
  font-size:21px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.ciat em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
/* Il logo VET dentro un titolo grosso prende la misura del testo che lo ospita:
   la classe e' la stessa di tutto il sito, cambia solo quanto e' grande. */
.shead h2 .vet{width:.72em;height:.72em;vertical-align:-.02em;margin-left:.18em}

/* ══ IL PODIO ══════════════════════════════════════════════════════
   Tre barre di altezze diverse dicono in un colpo che il primo prende piu' del
   secondo e del terzo messi insieme. Tre righe di testo direbbero la stessa
   cosa ma bisognerebbe fare la somma per accorgersene.

   Il primo sta in mezzo e non a sinistra: e' un podio, e su un podio il primo
   e' quello alto in mezzo. */
.podio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  align-items:end;height:260px;margin-bottom:26px}
.pp{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:10px;height:var(--h)}
.pp b{display:inline-flex;align-items:center;font-family:'Archivo Black',sans-serif;
  font-size:clamp(15px,3.6vw,21px);letter-spacing:-.02em;color:var(--c);white-space:nowrap}
.pp .col{width:100%;flex:1;min-height:8px;border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,var(--c),transparent 190%);
  box-shadow:inset 0 1px 0 rgba(243,241,236,.18)}
.pp.primo .col{box-shadow:inset 0 1px 0 rgba(243,241,236,.28),0 0 40px rgba(255,194,74,.22)}
.pp em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pp .vet{background:var(--c)}

/* I pesi dei punti: una riga di coppie, non una frase. Chi vuole sapere quanto
   vale un epic lo trova senza leggere il periodo intero. */
.punti{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 26px}
.punti li{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
.punti i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.punti b{font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:-.02em;
  color:var(--ink)}

/* il rimando alla classifica: un link, ma con la freccia che dice che si va
   da qualche parte */
.vai{display:inline-flex;align-items:center;gap:8px;color:var(--lime);
  text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid transparent;
  transition:border-color .15s}
.vai svg{width:15px;height:15px;transition:transform .18s ease}
.vai:hover{border-bottom-color:var(--lime)}
.vai:hover svg{transform:translateX(3px)}

/* ══ IL FONDO CHE PAGA ═════════════════════════════════════════════ */
.pioggia{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:22px;
  align-items:start}
.pioggia .plate{margin:0}
.pioggia .cuts b{font-size:21px}

@media (max-width:820px){
  .torta,.pioggia{grid-template-columns:minmax(0,1fr);gap:22px}
  .cia{width:168px;height:168px;margin:0 auto}
  .podio{height:210px;gap:10px}
}

/* ══ QUANTO MANCA ══════════════════════════════════════════════════
   In cima a tutto, prima del banco: chi arriva prima del giorno non puo'
   ancora mintare, e la domanda che si fa e' una sola.

   Le cifre sono le palette del contatore della fornitura, le stesse della
   pagina d'attesa: chi passa dall'una all'altra riconosce la stessa cosa.
   Non si ribaltano - cambiano ogni secondo, e otto cifre che si voltano di
   continuo sono un cartellone dell'aeroporto - ma la cerniera in mezzo resta,
   perche' e' quella che le rende palette anche da ferme. */
.apre{padding:34px 0 30px;border-bottom:1px solid var(--line)}
.apre[hidden]{display:none}
.apre-testa{margin-bottom:22px}
.apre .lbl em{font-style:normal;color:var(--lime);margin-right:11px}
.apre h2{font-size:clamp(24px,5.4vw,38px);line-height:1.05;margin-top:9px;
  letter-spacing:-.03em}
.apre h2 em{font-style:normal;color:var(--lime)}
.apre-nota{margin:18px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.04em;color:var(--faint);line-height:1.7}

.orologio{display:flex;align-items:flex-start;gap:clamp(12px,4vw,30px);flex-wrap:wrap}
.unita{display:flex;flex-direction:column;align-items:center;gap:9px}
.cifre{display:flex;gap:3px}
.cif{position:relative;width:clamp(28px,6.4vw,46px);height:clamp(40px,9vw,66px);
  border-radius:7px;background:rgba(243,241,236,.05);
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(25px,6vw,44px);line-height:clamp(40px,9vw,66px);
  text-align:center;color:var(--lime);font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(180,240,74,.32)}
.cif::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(7,8,11,.85)}
.unita span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}

/* ══ COME SONO DISTRIBUITI I TRATTI ════════════════════════════════
   Sette barre, una per slot. Dice in un colpo una cosa che l'elenco dei
   livelli non dice: che il guardaroba e' quasi tutto maglie, e che i corpi
   sono sei in tutto. */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px 26px;margin:26px 0 0}
.slot{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:12px}
.slot span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.slot .pista{height:7px;border-radius:99px;background:rgba(243,241,236,.05);overflow:hidden}
.slot .pista i{display:block;height:100%;border-radius:99px;width:var(--w);
  background:var(--lime);min-width:3px}
.slot b{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:2.2em;text-align:right}

/* ══ QUANTO PAGA, DAVVERO ══════════════════════════════════════════
   «Meno ce ne sono, piu' prende ognuno» e' una frase. Queste sono tre colonne
   di altezza diversa, ed e' la stessa cosa detta in modo che si veda: il monte
   non cambia mai, cambia in quante mani finisce.

   La colonna e' alta quanto il premio, non quanti sono: e' il numero che
   interessa a chi legge, ed e' anche quello che va nella direzione opposta. */
.scala{margin-top:30px;padding:24px 26px 22px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(92,216,255,.05),rgba(243,241,236,.012))}
.scala-testa{margin-bottom:22px}
.scala-testa .lbl em{font-style:normal;color:var(--cyan);margin-right:11px}
.scala-testa p{margin:9px 0 0;color:var(--dim);font-size:14.5px;line-height:1.6}
.scala-testa p b{color:var(--ink);font-weight:500;display:inline-flex;align-items:center}
.scala-testa .vet{background:var(--cyan)}

.scala-righe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sc{display:flex;flex-direction:column;align-items:center;gap:6px}
.sc b{font-family:'Archivo Black',sans-serif;font-size:22px;letter-spacing:-.02em;
  color:var(--ink);line-height:1}
.sc span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
/* LA BARRA HA UNA CORSIA SUA, alta e fissa. Senza, la sua altezza in
   percentuale si misurava su un contenitore flex pieno di altro testo, e le tre
   colonne venivano tutte uguali: un grafico che non graficava niente. */
.sc .corsia{display:flex;align-items:flex-end;width:100%;height:96px;margin-top:8px}
.sc .col{width:100%;height:var(--h);min-height:8px;border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,rgba(92,216,255,.55),rgba(92,216,255,.08));
  box-shadow:inset 0 1px 0 rgba(243,241,236,.16)}
.sc.mezzo .col{background:linear-gradient(180deg,var(--cyan),rgba(92,216,255,.14));
  box-shadow:inset 0 1px 0 rgba(243,241,236,.3),0 0 34px rgba(92,216,255,.2)}
.sc em{font-style:normal;display:inline-flex;align-items:center;
  font-family:'Archivo Black',sans-serif;font-size:clamp(14px,2.4vw,19px);
  letter-spacing:-.02em;color:var(--cyan);margin-top:9px}
.sc em .vet{background:var(--cyan);width:.66em;height:.66em}
.scala .nota{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.62;color:var(--faint)}
.scala .nota b{color:var(--ink);font-weight:400}

@media (max-width:640px){
  .scala{padding:18px 17px 18px;border-radius:16px}
  .scala-righe{gap:9px}
  .sc .corsia{height:76px}
  .sc b{font-size:18px}
}

/* IL SIMBOLO E LA VIRGOLA NON SI SEPARANO. A 390px il titolo "Every 100 000 V,
   the board pays" andava a capo fra il simbolo e la virgola, e la riga nuova
   cominciava con ", the board": si tiene insieme quello che si legge insieme. */
.unito{white-space:nowrap}

/* l'ora di chi guarda, sotto il conto alla rovescia */
.apre-tuo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:14px 0 0}
.apre-tuo b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--ink);letter-spacing:.02em}
.apre-tuo em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);letter-spacing:.06em}

/* Il velo che nascondeva barra, tasti e portafoglio prima del lancio non c'e'
   piu' (09/09/2026): il sito e' aperto a tutti e quello che ferma il mint sta
   sulla catena, non nel browser. */