/* Vetrina di Pokémon Tridentum.
 *
 * ===========================================================================
 *  LA DIREZIONE, in una riga: il sito è dipinto con i colori del GIOCO.
 * ===========================================================================
 *
 * 1. LA PALETTE non è più una tavolozza «da Game Boy» inventata qui. I quattro
 *    toni storici restano (sono anche quelli che la pagina di gioco ricopia
 *    nel suo `<style>`, e due palette leggermente diverse fra il sito e la
 *    console si vedono), e attorno a loro entrano le ALTRE rampe «day» del
 *    gioco — la stessa tabella con cui sono dipinti il mondo, gli sprite e
 *    l'immagine chiave. Nessun colore è inventato in questo file: WATER,
 *    YELLOW, RED, GRAY e ROOF vengono da lì, riga per riga.
 *
 *      acqua   #70b0e8  WATER[1]   i collegamenti e le note informative
 *      giallo  #e0c078  YELLOW[1]  il fuoco da tastiera e ciò che va guardato
 *      rosso   #e86060  RED[1]     il pericolo (era #e05038, fuori tabella)
 *      grigio  #c0c0b8  GRAY[1]    il testo secondario su fondo scuro
 *      porfido #c85848  ROOF[1]    l'accento caldo (i tetti di Tridentum)
 *
 *    La ragione per cui prima c'era un verde solo: quattro toni sono ciò che
 *    UN tile del Game Boy Color può portare — ma uno schermo ne porta otto
 *    rampe insieme, ed è esattamente ciò che l'overworld di questo gioco fa.
 *    Un sito monocromo non era più fedele: era più povero.
 *
 * 2. LA GRIGLIA È DA 8 PIXEL, che è la tessera di GSC. Ogni margine, ogni
 *    imbottitura e ogni distanza di questo foglio è un multiplo di 8 (i token
 *    `--sp-*`). Prima erano 6, 7, 9, 10, 12, 14, 16, 18, 20, 22, 26 e 28
 *    mescolati: nessuno di quei numeri voleva dire niente.
 *
 * 3. DUE VOCI TIPOGRAFICHE. Il monospazio resta dove una macchina parla —
 *    titoli, etichette, tabelle, numeri, tasti, bottoni — e la prosa passa a
 *    una proporzionale di sistema, perché un paragrafo di sessanta parole in
 *    Courier si legge male e nessun Game Boy ha mai scritto in Courier.
 *
 * 4. SPIGOLI DURI. Nessun raggio, nessuna ombra, nessuna sfumatura, nessuna
 *    transizione: un GBC cambia colore in un fotogramma. I bordi sono a 2 px
 *    pieni, come le cornici delle finestre del gioco.
 *
 * 5. LE IMMAGINI STANNO A SCALA INTERA. Gli screenshot sono il fotogramma
 *    320×288 del gioco fotografato a ×3 (960×864): la colonna della griglia è
 *    larga ESATTAMENTE 320 px, quindi il nearest-neighbour ridà un pixel di
 *    schermo per ogni pixel di gioco e non ne inventa né ne butta uno. Prima
 *    la stessa immagine finiva in una colonna da ~180 px con
 *    `image-rendering: pixelated`, cioè una riduzione non intera a
 *    nearest-neighbour: quattro pixel su cinque buttati, in modo irregolare.
 *
 * NON è UI di gioco: quella resta tilemap-only dentro Unity, dove ogni cosa a
 * schermo è uno sprite disegnato in world space. Qui si veste il sito, non il
 * gioco.
 */

:root {
  /* --- i quattro toni storici (anche in play.html.heex) ------------------ */
  --gbc-darkest: #081820;
  --gbc-dark: #0e2a2e;
  --gbc-mid: #346856;
  --gbc-light: #88c070;
  --gbc-lightest: #e0f8d0;

  /* --- le altre rampe «day» del gioco ----------------------------------- */
  --gbc-water: #70b0e8; /* WATER[1] */
  --gbc-water-dark: #3870c0; /* WATER[2] */
  --gbc-yellow: #e0c078; /* YELLOW[1] */
  --gbc-red: #e86060; /* RED[1] */
  --gbc-roof: #c85848; /* ROOF[1] */
  --gbc-gray: #c0c0b8; /* GRAY[1] */

  /* Testo SECONDARIO. Non e' `--gbc-mid`: quello e' il tono delle cornici
     (#346856), e su fondo scuro un paragrafo scritto con quello e' sotto il
     rapporto di contrasto leggibile — misurato guardando la pagina, non
     stimato. Le cornici restano #346856, le parole no. */
  --gbc-muted: #92b3a2;

  /* --- la griglia da 8, che e' la tessera ------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;

  /* La misura della pagina: 1024 con 16 di aria per lato fa 992 di contenuto,
     cioe' ESATTAMENTE tre colonne da 320 con due varchi da 16 (punto 5
     dell'intestazione). */
  --misura: 1024px;

  /* La colonna di uno screenshot: la larghezza nativa del gioco, 320 px. */
  --schermo: 320px;

  --font-ui: "Courier New", Courier, monospace;
  --font-testo: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* La riga di prosa non supera le ~68 lettere: oltre, l'occhio perde il
     capo della riga successiva. A 1024 px senza questo limite ne faceva 130. */
  --riga: 68ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gbc-darkest);
  color: var(--gbc-lightest);
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--gbc-water); }
a:hover { color: var(--gbc-lightest); }

/* IL FUOCO DA TASTIERA SI VEDE, ed è la stessa riga per ogni cosa cliccabile.
   Giallo perché in questo foglio è l'unico tono che non vuole già dire
   «collegamento» (acqua) o «pericolo» (rosso). `:focus-visible` e non
   `:focus`: chi usa il mouse non deve vedere una cornice a ogni clic. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gbc-yellow);
  outline-offset: 2px;
}

/* IL SALTO AL CONTENUTO. Fuori schermo finché non prende il fuoco: è la prima
   cosa che incontra chi naviga con il TAB, e senza di lui dovrebbe attraversare
   otto voci di menu su ogni pagina. */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--gbc-yellow);
  color: var(--gbc-darkest);
  font-family: var(--font-ui);
  font-weight: bold;
  padding: var(--sp-1) var(--sp-2);
  text-decoration: none;
}
.salta:focus { left: 0; }

/* --- Intestazione e piè di pagina ------------------------------------ */

.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-2);
  border-bottom: 2px solid var(--gbc-mid);
}

.brand { text-decoration: none; display: flex; align-items: baseline; gap: var(--sp-1); }
.brand-mark {
  color: var(--gbc-light);
  font-family: var(--font-ui);
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 20px;
}
.brand:hover .brand-mark { color: var(--gbc-lightest); }
.brand-sub {
  color: var(--gbc-darkest);
  background: var(--gbc-light);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 1px 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* `flex-wrap` E NON UNA RIGA SOLA, ed è il difetto più grosso che questo
   foglio aveva: sei voci di menu in una riga inspezzabile facevano 435 px di
   larghezza minima, quindi su un telefono da 390 px TUTTE le pagine del sito
   scorrevano di lato (misurato: `document.scrollWidth` 455 su ogni pagina).
   Su un telefono il gioco sta nel vetro come una console tascabile: il sito
   attorno non può essere l'unica cosa che non ci sta. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 14px;
}
.site-nav a, .link-button { padding: 2px 0; }
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none;
  border: none;
  color: var(--gbc-water);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { color: var(--gbc-lightest); }

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--misura);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-2) var(--sp-6);
}

.site-foot {
  border-top: 2px solid var(--gbc-mid);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  color: var(--gbc-muted);
  font-size: 13px;
}
.site-foot p { max-width: var(--riga); margin: 0 auto; }

/* --- Blocchi ---------------------------------------------------------- */

/* --- UNA CORNICE NON È MAI PIÙ LARGA DEL SUO INCHIOSTRO ------------------
 *
 * Segnalazione dell'utente, con la schermata dell'elenco «Che cosa c'è
 * dentro»: «come mai il sito non sfrutta ampiezza del testo?».
 *
 * LA CAUSA, misurata nel browser a 1440 px. Due limiti giusti presi da soli
 * si sovrapponevano male — `--misura` (1024, cioè tre schermate da 320 coi
 * loro varchi) disegna la cornice, `--riga` (68 caratteri) ferma la prosa —
 * e il risultato era una scatola molto più larga del suo contenuto:
 *
 *   pagina                cornice   inchiostro   vuoto a destra
 *   /  (i quattro riquadri)   992      605-612      380-387  (39 %)
 *   /accedi                   992          410          582  (59 %)
 *   /personaggio/diario       992          410          582  (59 %)
 *   /classifica (tabella)     992          966           26  (a posto)
 *
 * Il vuoto dentro una scatola DISEGNATA non si legge come aria voluta: si
 * legge come un guasto. Il vuoto ai lati di una PAGINA sì — è margine, e
 * nessuno lo nota.
 *
 * LA REGOLA, in tre righe, e vale su ogni pagina:
 *
 *   1. Di default la cornice si STRINGE sulla riga leggibile: un riquadro
 *      non supera `--riga` più la sua imbottitura. Il vuoto passa da dentro
 *      la scatola al margine della pagina, che è il suo posto.
 *   2. Chi la larghezza la USA se la riprende: una tabella, una griglia di
 *      dati o un elenco a due colonne riportano il loro riquadro a tutta la
 *      misura. È un `:has()`, quindi dove non è supportato il ripiego è il
 *      comportamento di prima — mai uno peggiore.
 *   3. UN ELENCO DA SCORRERE VA IN DUE COLONNE quando ce ne stanno due
 *      piene. I 68 caratteri nascono per la prosa continua, dove l'occhio
 *      deve ritrovare il capo della riga successiva; una lista di fatti
 *      indipendenti non si legge di seguito, si scorre, e due colonne
 *      dimezzano la strada. La misura torna: dentro un riquadro a piena
 *      larghezza restano 944 px, che a due colonne con un varco da 32 fanno
 *      456 px l'una — una cinquantina di caratteri, la colonna di un
 *      quotidiano.
 *
 * `.story` NON va in due colonne, ed è l'eccezione che conferma la regola:
 * è una narrazione NUMERATA, si legge in ordine dall'alto in basso, e non è
 * un elenco da scorrere. Resta in colonna sola, e il suo riquadro si stringe.
 */

.panel {
  border: 2px solid var(--gbc-light);
  background: var(--gbc-dark);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-3);
  /* Regola 1: la cornice non supera la riga leggibile più l'imbottitura. */
  max-width: calc(var(--riga) + 2 * var(--sp-3));
}

/* Regola 2: chi usa la larghezza se la riprende. L'elenco è esplicito e non
   un `*`: ogni voce qui sotto è un contenuto che a 456 px sta MEGLIO che a
   545, e chi non c'è dentro sta meglio stretto. */
.panel:has(.table-wrap),
.panel:has(.stats),
.panel:has(.party),
.panel:has(.turns),
.panel:has(.facts),
.panel:has(.tappe),
.panel:has(.quest-list) {
  max-width: none;
}

/* Un form ha una larghezza SUA (384 px, la colonna dei campi): la cornice si
   stringe su quella e non sulla riga di prosa, o restano 209 px di vuoto. */
.panel:has(.form) {
  max-width: calc(384px + 2 * var(--sp-3));
}

h1, h2, h3 {
  color: var(--gbc-light);
  font-family: var(--font-ui);
  line-height: 1.25;
}
h1 { font-size: 30px; letter-spacing: 2px; margin: 0 0 var(--sp-1); }

/* Il titolo di sezione porta una riga sotto di sé: senza, in una pagina lunga
   come `/` le sei sezioni erano sei paragrafi in più. */
h2 {
  font-size: 20px;
  letter-spacing: 1px;
  margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 2px solid var(--gbc-mid);
}
/* Dentro un riquadro il titolo NON porta la riga: la cornice è già il taglio. */
.panel h2, .nota h2 { border-bottom: none; padding-bottom: 0; margin-top: 0; }
h3 { font-size: 15px; letter-spacing: 1px; margin: 0 0 var(--sp-1); }

p { max-width: var(--riga); }
.lede { font-size: 18px; color: var(--gbc-lightest); margin: 0 0 var(--sp-2); }
.muted { color: var(--gbc-muted); }

/* --- L'apertura (`/`) -------------------------------------------------- */

.hero {
  border: 2px solid var(--gbc-light);
  background: var(--gbc-dark);
  margin-bottom: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
}
.hero-testo { padding: var(--sp-3); }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* LA BANDA DIPINTA. `background-size` a 512×320 è l'immagine 256×160
   raddoppiata: una scala INTERA, quindi il pixel resta quadrato. Il
   contenitore la ritaglia — non la rimpicciolisce — quando lo schermo è più
   stretto di 512, che è l'unico modo di tenere l'arte esatta a ogni
   larghezza. */
.hero-arte {
  /* `order: -1` su una colonna sola: su telefono l'immagine sta SOPRA il
     titolo (è la prima cosa che si vede), su scrivania torna al suo posto a
     destra. Nel DOM il testo resta primo, che è l'ordine giusto per chi
     legge con una voce sintetica. */
  order: -1;
  height: 320px;
  /* IL FONDO È IL CIELO DELL'IMMAGINE, non il nero della pagina. La riga 0
     del PNG è di UN colore solo (`#c0c0b8`, GRAY[1]: un cielo coperto), quindi
     ancorando il disegno IN BASSO lo spazio che avanza sopra si legge come
     altro cielo invece che come una barra nera. È il modo di riempire un
     riquadro più alto dell'arte senza rimpicciolire l'arte. */
  background-color: var(--gbc-gray);
  background-image: url("/images/hero-valle-120e136bdb63376982bfcfbe71e01be2.png?vsn=d");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 512px 320px;
  image-rendering: pixelated;
  border-bottom: 2px solid var(--gbc-mid);
}

@media (min-width: 900px) {
  /* Il testo a sinistra e l'arte a destra: in una lingua che si legge da
     sinistra la prima cosa da leggere è il nome del gioco, non il paesaggio.
     `order: 1` e non `0` perché nel DOM l'arte viene PRIMA (è lei che deve
     stare in cima su un telefono). */
  .hero { grid-template-columns: 1fr 512px; }
  .hero-arte {
    order: 1;
    border-bottom: none;
    border-left: 2px solid var(--gbc-mid);
    height: 100%;
    min-height: 320px;
  }
}

.button {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  background: var(--gbc-light);
  color: var(--gbc-darkest);
  border: 2px solid var(--gbc-light);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  /* 44 px è il bersaglio minimo di un dito: sotto, su un telefono si sbaglia. */
  min-height: 44px;
  line-height: 26px;
}
.button:hover { background: var(--gbc-lightest); border-color: var(--gbc-lightest); color: var(--gbc-darkest); }
.button.ghost { background: transparent; color: var(--gbc-light); }
.button.ghost:hover { background: var(--gbc-mid); color: var(--gbc-lightest); border-color: var(--gbc-mid); }
.button.big { font-size: 18px; padding: var(--sp-2) var(--sp-3); line-height: 24px; }

/* --- Griglia degli screenshot ---------------------------------------- */

/* Colonne da 320 px ESATTI: la larghezza nativa del gioco. `auto-fit`
   con una misura fissa e non `minmax()`, perché una colonna elastica
   riporterebbe le immagini a una scala non intera.

   E LA COLONNA VALE 320 PIÙ LA CORNICE, non 320 in tutto. Con
   `box-sizing: border-box` una colonna da 320 dà all'immagine 316 px —
   misurato nel browser il 2026-09-06, ed era un difetto MIO del giorno
   prima: 316/960 non è un terzo, quindi ogni schermata veniva ridotta a
   scala non intera, che è esattamente il difetto che questa griglia era
   nata per chiudere. I due pixel di bordo per lato vanno AGGIUNTI.

   Il varco scende da 16 a 8 perché tre colonne da 324 con due varchi da
   16 farebbero 1004 px e la misura della pagina ne dà 992: con 8 fanno
   988 e ci stanno. Fra due schermate restano comunque 12 px di stacco
   (2 di cornice + 8 + 2), che è il respiro di un foglio di contatto. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(var(--schermo) + 4px));
  justify-content: center;
  gap: var(--sp-1);
}
.shot { margin: 0; border: 2px solid var(--gbc-mid); background: var(--gbc-darkest); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Scaling a nearest-neighbour: e' arte a pixel, l'interpolazione la
     spappolerebbe. Stesso principio del Pixel Perfect Camera in gioco. */
  image-rendering: pixelated;
}
.shot figcaption {
  padding: var(--sp-1);
  font-size: 13px;
  color: var(--gbc-lightest);
  background: var(--gbc-dark);
  border-top: 2px solid var(--gbc-mid);
}

/* Sotto i 356 px (320 + la cornice + due volte l'aria della pagina) la
   colonna non ci sta più: si lascia scendere l'immagine sotto la scala
   intera invece di far scorrere la pagina di lato, che è il male peggiore. */
@media (max-width: 355px) {
  .shots { grid-template-columns: 1fr; }
}

/* --- Elenchi di fatti -------------------------------------------------- */

/* Regola 3: due colonne quando ce ne stanno due piene. `auto-fit` con un
   minimo in CARATTERI e non in pixel, perché la soglia vera è «una colonna
   sotto i 40 caratteri non si legge»: così la seconda colonna nasce solo dove
   serve, e su un telefono non nasce mai. Le voci NON hanno più un
   `max-width` proprio — a decidere la misura è la colonna.

   `min(40ch, 100%)` E NON `40ch`, ed è la correzione del 2026-09-06 sera
   (segnalazione dell'utente, con la schermata: «problema di visualizzazione su
   browser su smartphone»). Un `minmax(40ch, 1fr)` nudo dice due cose, non
   una: «non fare una seconda colonna sotto i 40 caratteri» — che è ciò che si
   voleva — e «non stringere MAI la colonna sotto i 40 caratteri», che non lo
   è. Su uno schermo più stretto di 40ch la colonna resta larga com'è e il
   testo esce dal riquadro. Misurato su `/roadmap`: a 412 px zero, a 390 px
   +1, a 360 px **+31**, a 320 px **+71** oltre il bordo della cornice, cioè
   il traboccamento cresce esattamente di quanto si stringe lo schermo, perché
   la voce non si restringe affatto.

   Con `min(40ch, 100%)` il minimo diventa «40 caratteri, o tutta la larghezza
   se è meno»: la soglia delle due colonne resta identica dove c'è spazio, e
   dove non c'è la colonna cede. La pagina non scorreva di lato nemmeno prima
   — `scrollWidth == clientWidth` era verde — ed è per questo che il difetto
   era passato: il metro guardava il vetro, non la cornice. */
.facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
  column-gap: var(--sp-4);
}
.facts li {
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--gbc-mid);
  position: relative;
}
.facts li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: var(--sp-1);
  color: var(--gbc-light);
  font-size: 10px;
  line-height: inherit;
}
.facts li:last-child { border-bottom: none; }
/* Il capoverso in grassetto che apre una riga è il TITOLO della riga: sta su
   una riga sua, come in una voce di manuale. */
.facts li > strong:first-child { color: var(--gbc-lightest); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}
.stat { border: 1px solid var(--gbc-mid); padding: var(--sp-1) var(--sp-2); }
.stat dt {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--gbc-muted);
  text-transform: uppercase;
}
.stat dd {
  margin: 4px 0 0;
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--gbc-lightest);
  font-variant-numeric: tabular-nums;
}

/* --- Squadra ---------------------------------------------------------- */

.party { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: var(--sp-2); }
.mon { border: 1px solid var(--gbc-mid); padding: var(--sp-1) var(--sp-2); }
.mon-head { display: flex; justify-content: space-between; gap: var(--sp-1); align-items: baseline; }
.mon-name { color: var(--gbc-lightest); font-family: var(--font-ui); font-weight: bold; }
.mon-level { color: var(--gbc-light); font-family: var(--font-ui); font-size: 13px; }
.mon-species { font-size: 13px; color: var(--gbc-muted); }
.hp-bar { height: var(--sp-1); border: 1px solid var(--gbc-mid); margin-top: var(--sp-1); background: var(--gbc-darkest); }
.hp-bar > span { display: block; height: 100%; background: var(--gbc-light); }
.hp-bar.low > span { background: var(--gbc-red); }
.hp-text { font-family: var(--font-ui); font-size: 13px; color: var(--gbc-lightest); margin-top: 4px; }

/* --- Talento (DV) e allenamento (EV) — pagina squadra ------------------
 *
 * Barrette PICCOLE, accanto al numero e mai al posto suo: la barra dice
 * «dov'è nato bene» a colpo d'occhio, il numero resta la verità leggibile
 * (DV 0..15, EV 0..255 — le grandezze di gen 2).
 */

.meter { display: inline-block; width: 64px; height: 6px; border: 1px solid var(--gbc-mid); background: var(--gbc-darkest); vertical-align: middle; margin-right: 6px; }
.meter > span { display: block; height: 100%; background: var(--gbc-light); }
.meter-value { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

.mon-section {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gbc-light);
  margin: var(--sp-2) 0 var(--sp-1);
}
.moves { list-style: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: 14px; }
.moves li { padding: 3px 0; border-bottom: 1px solid var(--gbc-mid); }
.moves li:last-child { border-bottom: none; }

.badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.badges li {
  border: 1px solid var(--gbc-yellow);
  color: var(--gbc-yellow);
  font-family: var(--font-ui);
  padding: 3px var(--sp-2);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.empty { color: var(--gbc-muted); font-style: italic; }

/* --- Il DIARIO degli incarichi (/personaggio/diario) -------------------
 *
 * QUESTE QUATTRO CLASSI NON AVEVANO UNA RIGA DI CSS: titolo, avanzamento e
 * testo erano tre `<span>` in fila, quindi la pagina leggeva
 * «IL PRIMO POKéMON fatto Va' al laboratorio del PROF. ROVERE.» — tre cose
 * diverse in una frase sola. Ora sono tre righe con tre ruoli.
 */

.quest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
  column-gap: var(--sp-4);
}
.quest-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-2);
  align-items: baseline;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--gbc-mid);
}
.quest-list li:last-child { border-bottom: none; }

.quest-title {
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--gbc-lightest);
  letter-spacing: 1px;
}

/* Lo stato sta a DESTRA del titolo, sulla stessa riga: è il numero che si
   cerca con l'occhio quando si riapre il diario. */
.quest-state {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--gbc-light);
  text-align: right;
  white-space: nowrap;
}

/* Il testo dell'incarico occupa tutta la riga sotto, e in prosa. */
.quest-text { grid-column: 1 / -1; color: var(--gbc-muted); }

/* --- Tabelle (classifica, storico) ------------------------------------
 *
 * Il contenitore scorre in orizzontale DA SOLO: una tabella larga non deve
 * mai far scorrere la pagina, che su un telefono e' la differenza fra
 * leggibile e inutilizzabile.
 */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
}
.table caption { text-align: left; color: var(--gbc-muted); font-size: 13px; padding-bottom: var(--sp-1); font-family: var(--font-testo); }
.table th, .table td { padding: var(--sp-1); text-align: left; border-bottom: 1px solid var(--gbc-mid); white-space: nowrap; }
.table th { color: var(--gbc-light); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; }
.table tbody tr:nth-child(even) { background: var(--gbc-darkest); }
/* La riga sotto il puntatore si stacca: con 136 righe di mosse, seguire una
   riga fino in fondo a occhio nudo è la differenza fra un catalogo e un muro. */
.table tbody tr:hover { background: var(--gbc-mid); }
.table tbody tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.name { white-space: normal; }

/* --- Etichette ------------------------------------------------------- */

.tag {
  display: inline-block;
  border: 1px solid var(--gbc-mid);
  color: var(--gbc-muted);
  font-family: var(--font-ui);
  padding: 1px 7px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 6px;
  white-space: nowrap;
}
.tag-win { border-color: var(--gbc-light); color: var(--gbc-light); }
.tag-loss { border-color: var(--gbc-red); color: var(--gbc-red); }
.delta-up { color: var(--gbc-light); }
.delta-down { color: var(--gbc-red); }

/* Un collegamento dentro una cella di tabella o una riga di elenco: stesso
   colore degli altri, senza sottolineatura finché non ci si passa sopra. La
   classe era USATA e non definita (`pvp_match_live`, `pvp_player_live`). */
.link { color: var(--gbc-water); text-decoration: none; }
.link:hover { color: var(--gbc-lightest); text-decoration: underline; }

/* --- La cronaca dei turni --------------------------------------------- */

.turns { list-style: none; padding: 0; margin: 0; }
.turn { border-left: 2px solid var(--gbc-mid); padding: 0 0 var(--sp-2) var(--sp-2); }
.turn:last-child { padding-bottom: 0; }
.turn-head { color: var(--gbc-light); font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.turn ul { list-style: none; padding: 0; margin: 4px 0 0; }
.turn li { padding: 2px 0; font-size: 14px; }
.turn li.ko { color: var(--gbc-red); }

/* --- Form ------------------------------------------------------------- */

.form { max-width: 384px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.field label { font-family: var(--font-ui); font-size: 12px; color: var(--gbc-light); letter-spacing: 1px; }
.field input {
  background: var(--gbc-darkest);
  border: 2px solid var(--gbc-mid);
  color: var(--gbc-lightest);
  padding: var(--sp-1);
  font-family: var(--font-ui);
  font-size: 16px; /* 16 px: sotto, iOS ingrandisce la pagina al fuoco */
  min-height: 44px;
}
.field input:hover { border-color: var(--gbc-light); }
/* NON si toglie il contorno di fuoco: prima `outline: none` lasciava come
   unico segnale un bordo che cambiava tinta, invisibile a chi naviga col TAB.
   La regola `:focus-visible` in cima a questo foglio vale anche qui. */
.field input:focus { border-color: var(--gbc-light); }
.field-error { color: var(--gbc-red); font-size: 13px; margin: 0; }

.flashes:empty { display: none; }
.flash { border: 2px solid; padding: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); font-size: 15px; max-width: var(--riga); }
.flash-error { border-color: var(--gbc-red); color: var(--gbc-red); }
.flash-info { border-color: var(--gbc-light); color: var(--gbc-light); }

.form-foot { margin-top: var(--sp-2); font-size: 14px; }
.field-hint { font-size: 13px; margin: 0; }

/* --- La storia in cinque righe, e i tasti (vetrina, 2026-09-03) ---------- */

.story { margin: 0; padding: 0 0 0 var(--sp-3); max-width: var(--riga); }
.story li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--gbc-mid); }
.story li:last-child { border-bottom: none; }
.story li::marker { color: var(--gbc-light); font-family: var(--font-ui); font-weight: bold; }

kbd {
  display: inline-block;
  border: 1px solid var(--gbc-light);
  border-bottom-width: 2px;
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gbc-lightest);
  background: var(--gbc-darkest);
}

/* --- Dex delle mosse (/mosse, 2026-09-04) ------------------------------- */

/* La barra dei filtri: gli stessi campi del form di accesso, in riga invece
   che in colonna. `align-items: end` allinea il bottone alla base dei campi,
   che hanno l'etichetta sopra. */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-2); }
.filters .field { margin-bottom: 0; }
.filters .field input, .filters .field select {
  background: var(--gbc-darkest);
  border: 2px solid var(--gbc-mid);
  color: var(--gbc-lightest);
  padding: var(--sp-1);
  font-family: var(--font-ui);
  font-size: 16px;
  min-height: 44px;
}
.filters .field select:hover, .filters .field input:hover { border-color: var(--gbc-light); }
.filters .field select:focus, .filters .field input:focus { border-color: var(--gbc-light); }

/* Intestazione ordinabile: e' un link vero, ma dentro una `th` deve leggersi
   come un'intestazione — stesso colore e stessa spaziatura, e la freccia dice
   qual e' la colonna attiva e in che verso. */
.table th .sort { color: var(--gbc-light); text-decoration: none; }
.table th .sort:hover { color: var(--gbc-lightest); text-decoration: underline; }
.table th .sort-on { color: var(--gbc-lightest); }
.sort-arrow { margin-left: 4px; }

/* Le celle della tabella non vanno a capo (regola generale di `.table`), ma
   l'effetto e' una frase: con 136 righe la colonna si tiene stretta e va a
   capo, altrimenti la tabella diventa larga il doppio dello schermo. */
.moves-table td.effect { white-space: normal; min-width: 224px; font-family: var(--font-testo); font-size: 14px; color: var(--gbc-muted); }
.moves-table td.name { min-width: 152px; }

/* --- L'albo della Sfida della Bora ---------------------------------------- */

/* La squadra sta in UNA cella e sono sei nomi con il loro livello: va a capo
   come l'effetto di una mossa, altrimenti la riga e' larga il doppio dello
   schermo. La larghezza minima e' quella di due nomi, cosi' la colonna non
   si strizza in una scala di lettere. */
.bora-table td, .bora-table th { vertical-align: top; }
.bora-team { white-space: normal; min-width: 232px; font-size: 13px; }
.bora-reward { white-space: normal; min-width: 152px; }

/* La glossa del premio («insegna Lama di Ghiaia») e' una seconda riga sotto
   il nome, non un inciso in mezzo alla frase: il nome resta l'elemento che
   si legge per primo. */
.bora-gloss { display: block; font-size: 12px; }

/* --- Le NOVITÀ ------------------------------------------------------------ */

/* Una voce è un `<article>` con dentro un `.panel`: il margine sotto lo dà
   già il pannello, quindi qui non se ne aggiunge un secondo. `scroll-margin`
   perché ogni voce è un'ancora (`/novita#2026-09-04`): senza, l'intestazione
   della voce finirebbe incollata al bordo alto della finestra. */
.nota { scroll-margin-top: var(--sp-2); }
.nota-data {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.nota-ancora { color: var(--gbc-muted); text-decoration: none; }
.nota-ancora:hover { color: var(--gbc-lightest); }
.nota-sommario { font-size: 16px; }
.nota-gruppo + .nota-gruppo { margin-top: var(--sp-3); }
/* L'etichetta del gruppo (NOVITÀ / CORREZIONI / BILANCIAMENTO) è una fascia,
   non un titolo: dice di che colore è ciò che segue, e si salta con l'occhio. */
.nota-gruppo h3 {
  text-transform: uppercase;
  display: inline-block;
  background: var(--gbc-mid);
  color: var(--gbc-lightest);
  padding: 2px var(--sp-1);
  margin-bottom: var(--sp-1);
}

/* --- Quanti giocatori ci sono adesso -------------------------------------- */

/* Un numero solo, in evidenza sotto il richiamo all'accesso ma sopra i
   bottoni: è la domanda che si fa chi arriva («c'è qualcuno?»), non il
   titolo della pagina. Il bordo a sinistra e non tutt'attorno: è una nota a
   margine del testo, non un riquadro suo. */
.online {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-1) var(--sp-2);
  border-left: 4px solid var(--gbc-water);
  background: var(--gbc-darkest);
  color: var(--gbc-lightest);
  font-family: var(--font-ui);
  font-size: 15px;
  max-width: var(--riga);
}
/* A mondo chiuso la stessa riga cambia colore: «il mondo è spento» è un fatto
   diverso da «non c'è nessuno», e prima si leggevano uguali. */
.online[data-mondo="down"] { border-left-color: var(--gbc-yellow); }

/* --- Amministrazione ------------------------------------------------------
   Il riquadro di conferma di una chiusura o di una revoca. Bordo rosso perche'
   e' l'unico posto del portale dove un clic distrugge qualcosa: lo stesso
   --gbc-red della barra PS bassa, che in questo sito vuol dire gia' «attenzione».
   Nessun componente nuovo in vetrina_components.ex: <.panel> basta, e il
   moduledoc di quel file lo vieta con la ragione scritta. */
.conferma {
  border: 2px solid var(--gbc-red);
  background: var(--gbc-darkest);
  padding: var(--sp-2);
  margin: var(--sp-2) 0;
}
.conferma .facts li::before { color: var(--gbc-red); }
.conferma .cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* L'email intera si vede solo su un gesto esplicito: il <summary> e' il gesto. */
.table details { display: inline; }
.table summary { cursor: pointer; font-variant-numeric: tabular-nums; }

/* --- Il telefono ----------------------------------------------------------
 *
 * Il sito non è il gioco, ma su un telefono deve stare nel vetro come ci sta
 * lui: niente scorrimento laterale, niente testo sotto i 15 px, niente
 * bersagli che un dito manca.
 */

@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  h2 { font-size: 18px; margin-top: var(--sp-3); }
  .lede { font-size: 16px; }
  .site-head { padding: var(--sp-1) var(--sp-2); }
  .brand-mark { font-size: 16px; }
  .site-nav { gap: var(--sp-1) var(--sp-2); width: 100%; }
  .site-main { padding: var(--sp-2) var(--sp-2) var(--sp-4); }
  .panel, .hero-testo { padding: var(--sp-2); }
  .hero-arte { height: 240px; }
  .button.big { width: 100%; text-align: center; }
}

/* Chi ha chiesto meno movimento non ne trova: qui non ce n'è comunque, e la
   riga vale come dichiarazione — se un giorno qualcuno aggiunge una
   transizione, resta spenta dove è stata chiesta spenta. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- La ROADMAP (/roadmap) -----------------------------------------------
 *
 * Un elenco DA SCORRERE, quindi due colonne come `.facts` e `.quest-list`
 * (vedi «una cornice non è mai più larga del suo inchiostro»): chi apre
 * questa pagina cerca una riga, non legge un racconto.
 *
 * Ogni passo è tre righe con tre ruoli — lo STATO, il titolo, il testo — più
 * le fonti in coda. Lo stato sta per PRIMO e non a destra come nel DIARIO:
 * qui è la cosa che si cerca («che cosa manca?»), e una colonna di etichette
 * allineate a sinistra si scorre con l'occhio in una passata sola.
 */

.tappe {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
  column-gap: var(--sp-4);
}
.tappe li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--gbc-mid);
  scroll-margin-top: var(--sp-2);
}
.tappe li:last-child { border-bottom: none; }

/* L'etichetta dello stato è un blocco a sé, sopra il titolo: un `inline-block`
   accanto al testo si sarebbe portato dietro il rientro della riga successiva. */
.tappa-stato {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 7px;
  margin-bottom: 4px;
  border: 1px solid currentColor;
}
/* I tre stati coi tre significati che questo foglio ha già: il verde è ciò
   che c'è (lo stesso della barra dei PS piena), il giallo è ciò che va
   guardato adesso, l'acqua è una nota — non una promessa. */
.stato-fatto { color: var(--gbc-light); }
.stato-in-corso { color: var(--gbc-yellow); }
.stato-probabile { color: var(--gbc-water); }

.tappa-titolo {
  display: block;
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--gbc-lightest);
  letter-spacing: 1px;
}
.tappa-testo { display: block; color: var(--gbc-muted); margin-top: 4px; }

/* LE FONTI NON SI VEDONO PIÙ (2026-09-06, richiesta dell'utente: «togli i
   riferimenti alla documentazione interna del progetto»). La regola
   `.tappa-fonti` è stata tolta insieme all'elemento che la portava: una regola
   che veste un elemento che nessuno emette è un invito a rimetterlo, e il suo
   commento — «le fonti sono la prova che quel passo non è inventato, quindi si
   vedono» — sarebbe la frase che convince il prossimo autore a farlo.
   La prova che un passo futuro non è inventato non è sparita: si è spostata
   dalla pagina al BOOT, dove `Game.Roadmap` apre il file della fonte e ci
   cerca dentro la `cita`. Un nome stampato non verificava niente. */