/* 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);
  /* Contesto per lo sfondo dipinto qui sotto (`body::before`). */
  position: relative;
  isolation: isolate;
  color: var(--gbc-lightest);
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* LO SFONDO DIPINTO (2026-09-19, richiesta dell'utente: «non si potrebbe
   utilizzare anche come background della pagina … magari oscurato o con
   qualche effetto in modo tale che non disturbi l'occhio»). La stessa valle
   della banda, fissa, a tutta finestra, molto scura e appena sfocata: dà la
   temperatura del gioco senza competere col testo. Sta DIETRO a tutto
   (`z-index: -1` dentro `isolation` del body); l'intestazione ha un fondo
   pieno e resta leggibile. Chi chiede meno movimento o meno trasparenze la
   vede ancora, perché è ferma. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/images/hero-valle-32022e68dc4115d1d71f6e51c7771c4a.png?vsn=d");
  background-size: cover;
  background-position: center bottom;
  image-rendering: pixelated;
  filter: blur(3px) brightness(0.3) saturate(0.8);
  transform: scale(1.03); /* il blur non lascia bordi chiari */
  pointer-events: none;
}

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 {
  /* Fondo pieno sopra lo sfondo dipinto: l'intestazione deve restare netta. */
  background: var(--gbc-darkest);
  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. */
  /* 2026-09-19 (richiesta dell'utente: «come mai background di questa
     immagine è grigio?»): il cielo del PNG è ora WATER[1] (ricolorato solo il
     grigio collegato al bordo alto), e lo spazio che avanza sopra l'arte è una
     sfumatura da WATER[2] a WATER[1] che finisce esattamente dove il disegno
     comincia (320px dal fondo). */
  background-color: var(--gbc-water);
  background-image:
    url("/images/hero-valle-32022e68dc4115d1d71f6e51c7771c4a.png?vsn=d"),
    linear-gradient(to bottom, var(--gbc-water-dark) 0%, var(--gbc-water) calc(100% - 320px));
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 512px 320px, 100% 100%;
  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; }

/* I PREMI della Bora (piano premi W3): una voce per riga, la percentuale a
   destra del gruppo in cifre tabellari, le scelte sotto. Le specie del pool
   sono decine e stanno in un <details> in colonne strette, che a 400 px
   diventano una o due. */
.bora-premi { list-style: none; padding: 0; margin: 0; }
.bora-premi > li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--gbc-mid); }
.bora-premi > li:last-child { border-bottom: none; }
.bora-premi-testa { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0; }
.bora-premi-quota { font-family: var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bora-premi-nota { margin: 0; font-size: 14px; }
.bora-premi-scelte { margin: var(--sp-1) 0; padding-left: var(--sp-3); }
.bora-premi-specie { columns: 7em; column-gap: var(--sp-2); margin: var(--sp-1) 0; padding-left: var(--sp-3); }
.bora-premi-table td, .bora-premi-table th { vertical-align: top; }
/* Il cartello «la tabella scorre di lato» serve solo dove la tabella scorre:
   sotto i 600 px le sette colonne non ci stanno, sopra sì. */
.bora-premi-scorri { display: none; font-size: 13px; margin: 0 0 var(--sp-1); }
@media (max-width: 600px) { .bora-premi-scorri { display: block; } }

/* --- 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 var(--sp-1);
}
.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);
}

/* LE RIGHE (2026-09-17): una frase per modifica, i dettagli con un clic.
   Ogni riga è un `<details>` nativo, chiuso. UNA colonna, e non la griglia di
   `.facts`: in una griglia a due colonne, aprendo una riga quella accanto si
   allungherebbe vuota. Il ▶ di `.facts` resta il segno e diventa ▼ quando la
   riga è aperta; il marcatore del browser si spegne, così il segno è lo
   stesso ovunque. */
.nota-righe { list-style: none; padding: 0; margin: 0; }
.nota-riga { border-bottom: 1px solid var(--gbc-mid); }
.nota-riga:last-child { border-bottom: none; }
.nota-riga summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  color: var(--gbc-lightest);
}
.nota-riga summary::-webkit-details-marker { display: none; }
.nota-riga summary::before {
  /* Testo alternativo vuoto: il segno è decorazione e non entra nel nome
     accessibile del titolo. La riga senza «/ ""» è il ripiego per un browser
     che non conosce quella sintassi e scarterebbe la dichiarazione intera. */
  content: "▶";
  content: "▶" / "";
  position: absolute;
  left: 0;
  top: var(--sp-1);
  color: var(--gbc-light);
  font-size: 10px;
  line-height: inherit;
}
.nota-riga details[open] > summary::before { content: "▼"; content: "▼" / ""; }
.nota-riga summary:hover { text-decoration: underline; }
/* I dettagli rientrano sotto il titolo e parlano a mezza voce. L'ancora di
   una riga (`/novita#2026-09-04-novita-1`) sta su questo paragrafo, quindi il
   `scroll-margin` deve lasciare in vista il titolo SOPRA di lui: 144 px sono
   un titolo di quattro righe a 320 px (il limite di 96 lettere) più la sua
   imbottitura. Misurato: con 48 px un titolo di due righe finiva 16 px sopra
   il bordo della finestra. */
.nota-dettagli {
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-3);
  color: var(--gbc-muted);
  scroll-margin-top: calc(var(--sp-6) * 3);
}

/* --- 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. */

/* --- IL PANNELLO DEGLI INTERVENTI DI `/amministrazione` --------------------
 *
 * Quattro regole in coda, e nessun colore, nessuna misura e nessun componente
 * nuovi: tutto viene dai token già in cima a questo foglio.
 *
 * 1. `.field select` NON ERA VESTITO FUORI DA `.filters`. La regola a ~719
 *    stila `select` solo dentro la barra dei filtri (`/mosse`, `/classifica`):
 *    un `<select>` dentro un `.form` restava quello di sistema — fondo bianco,
 *    bordo arrotondato, font proporzionale — cioè le tre cose che il punto 4
 *    della direzione in cima («spigoli duri») e il punto 3 («monospazio dove
 *    parla una macchina») vietano. Questa è la gemella esatta di `.field
 *    input` a ~669: stessi token, stessa altezza minima da 44 px (il
 *    bersaglio del dito), stessi 16 px di corpo — sotto i quali iOS ingrandisce
 *    la pagina al fuoco.
 *
 * 2. `max-width: 100%` SU CAMPI E MENU. Un `<select>` prende come larghezza
 *    minima intrinseca quella della sua VOCE PIÙ LUNGA, e un `<input
 *    type=number>` ha una larghezza di default sua: dentro una griglia stretta
 *    l'uno o l'altro spingono la colonna oltre il bordo del riquadro, che è
 *    esattamente il difetto che `npm run visual-cornici` misura dal
 *    2026-09-06. Il vincolo si mette sul campo, non sulla griglia, perché è il
 *    campo che ha una misura sua da rinunciare.
 *
 * 3. LA GRIGLIA DEI QUATTRO VERBI usa `minmax(min(40ch, 100%), 1fr)` e non
 *    `minmax(40ch, 1fr)`: la forma nuda dice due cose invece di una — «non
 *    fare una seconda colonna sotto i 40 caratteri» (voluto) e «non stringere
 *    MAI la colonna sotto i 40 caratteri» (non voluto), e sotto i 40ch il
 *    testo esce dalla cornice. È la correzione del 2026-09-06, e vale identica
 *    qui: le altre tre griglie di questo foglio la portano già.
 *
 * 4. IL RIQUADRO SI RIPRENDE LA LARGHEZZA. `.panel` si ferma alla riga
 *    leggibile (68ch); quattro colonne da 40ch non ci starebbero mai e la
 *    griglia resterebbe in colonna sola su qualunque schermo, cioè un elenco
 *    verticale di quattro form. È la stessa eccezione già concessa a
 *    `.table-wrap`, `.stats` e compagnia, scritta qui invece che lassù perché
 *    in questo file si aggiunge solo in coda.
 */

.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;
}
.field select:hover { border-color: var(--gbc-light); }
.field select:focus { border-color: var(--gbc-light); }

.field input, .field select { max-width: 100%; }

.interventi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.intervento { border: 1px solid var(--gbc-mid); padding: var(--sp-2); }
.intervento h3 { margin-bottom: var(--sp-2); }
.intervento .cta { margin-top: var(--sp-2); }

.panel:has(.interventi) { max-width: none; }

/* --- IL PANNELLO DEL METEO DI `/amministrazione` --------------------------
 *
 * NESSUN NOME DI DOCUMENTO INTERNO QUI DENTRO, e non è pudore: questo foglio
 * il browser lo SCARICA, commenti compresi, quindi vale la stessa regola delle
 * pagine. La prima stesura di questo blocco citava due volte la decisione da
 * cui il pannello nasce, e a farla cadere è stato il presidio che scansiona i
 * byte serviti — 2 punti su 108 risorse. La ragione di una regola si scrive
 * per esteso, il suo numero di catalogo no: chi cerca la decisione la trova
 * dal modulo Elixir del pannello, che il browser non scarica.
 *
 * Tre regole in coda, nessun colore e nessuna misura nuovi: `--font-ui`,
 * `--gbc-yellow` e i token `--sp-*` sono già in cima a questo foglio.
 *
 * 1. `.meteo-valore` È IL MONOSPAZIO DOVE PARLA UNA MACCHINA (punto 3
 *    dell'intestazione). I valori che questo pannello stampa — `rain 0.5`,
 *    `weather_force` — sono LETTERALMENTE quelli che viaggiano sul filo verso
 *    il gioco e finiscono nel `detail` della riga di registro: un'intensità
 *    scritta in proporzionale accanto a una frase italiana si legge come una
 *    parola, e invece è un valore che si può ricercare nel registro.
 *
 * 2. `.meteo-avviso` È GIALLO, e il giallo in questo foglio vuol dire «ciò che
 *    va guardato» (l'altro suo uso è il fuoco da tastiera). NON è
 *    `.conferma`, che è rossa: il rosso qui dice «un clic distrugge
 *    qualcosa», e questo riquadro non chiede niente — dichiara tre cose che
 *    l'amministratore deve sapere PRIMA di premere (il meteo governa gli
 *    incontri; «sereno» è una forzatura e non un rilascio; una forzatura non
 *    sopravvive a un riavvio del server). Il dominio le aveva scritte in
 *    quattro commenti del proprio sorgente, e un commento non è un posto in
 *    cui qualcuno guarda prima di premere: per questo hanno una cornice.
 *
 * 3. NESSUNA GRIGLIA NUOVA. I tre punti di misura stanno in un `.facts`, che
 *    la porta già (`minmax(min(40ch, 100%), 1fr)`, la correzione del
 *    2026-09-06), e i due menu in un `.filters`, che è la stessa barra della
 *    ricerca del pannello sopra. Una quarta griglia sarebbe stata una quarta
 *    occasione di scrivere `minmax(40ch, 1fr)` nudo e far uscire il testo
 *    dalla cornice su un telefono.
 */

.meteo-valore {
  font-family: var(--font-ui);
  color: var(--gbc-lightest);
  letter-spacing: 1px;
}

.meteo-avviso {
  border: 2px solid var(--gbc-yellow);
  background: var(--gbc-darkest);
  padding: var(--sp-2);
  margin: var(--sp-2) 0;
}
.meteo-avviso p { margin: 0 0 var(--sp-2); }
.meteo-avviso p:last-child { margin-bottom: 0; }

/* === POKÉDEX === (/pokedex, 2026-09-17) -----------------------------
 *
 * Solo token della palette; le spaziature sono i token `--sp-*` (multipli di
 * 8), salvo i 2 px di bordo, di `min-width` della barra e del passo della
 * linea evolutiva, come le altre cornici del file. Le figure sono i fronti 56×56 del
 * gioco: a ×1 nell'indice e a ×2 esatto nella scheda (112 px), sempre
 * `pixelated`, mai a scala non intera. La barra di una statistica è una
 * proporzione sul massimo di un byte (255), non sul massimo del dex.
 */

.dex-pic { width: 56px; padding-top: 0; padding-bottom: 0; }
.dex-pic img, .dex-figure { image-rendering: pixelated; display: block; }

.dex-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.dex-figure {
  width: 112px;
  height: 112px;
  max-width: 100%;
  border: 2px solid var(--gbc-mid);
  background: var(--gbc-lightest);
}
.dex-facts { flex: 1 1 min(40ch, 100%); min-width: 0; }

.dex-stats { width: 100%; max-width: 48ch; }
.dex-stats th { text-align: left; font-weight: normal; color: var(--gbc-light); }
.dex-bar-cell { width: 100%; }
.dex-bar { display: block; height: 8px; min-width: 2px; background: var(--gbc-light); }

.dex-sources, .dex-area { margin: 0 0 var(--sp-2); padding-left: var(--sp-2); }
.dex-line { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.dex-line li { padding: 2px 0; }
.dex-line li.depth-1 { padding-left: var(--sp-2); }
.dex-line li.depth-2 { padding-left: var(--sp-4); }

/* === WIKI === */
/* --- La WIKI (/wiki, /wiki/:pagina) ----------------------------------------
 *
 * Nessun colore nuovo e nessuna misura nuova: solo i token in cima a questo
 * foglio, e un test lo pretende (in questa sezione non c'è un solo colore
 * scritto in cifre). Le regole che la wiki eredita senza riscriverle:
 *
 *   - le figure sono `.shot`, cioè la stessa cornice delle schermate della
 *     home, e la griglia `.wiki-figure` ha le stesse colonne da 320 + 4 px di
 *     `.shots` (il fotogramma 320×288 a scala intera, cornice AGGIUNTA);
 *   - i tasti sono una `.table` dentro un `.table-wrap`, che scorre da solo e
 *     non fa scorrere la pagina;
 *   - la prosa resta alla `--riga`: un riquadro non è più largo del suo
 *     inchiostro.
 *
 * L'UNICA SCALA NON INTERA È DICHIARATA: sotto i 356 px di finestra la colonna
 * da 324 px non ci sta più, e l'immagine scende a `max-width: 100%` invece di
 * far scorrere la pagina di lato (la stessa scelta di `.shots`). Da 360 px in
 * su ogni figura è a un pixel di schermo per pixel di gioco.
 */

.wiki-indice { list-style: none; padding: 0; margin: 0; }
.wiki-indice li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--gbc-mid); }
.wiki-indice li:last-child { border-bottom: none; }
.wiki-indice-titolo {
  display: block;
  font-family: var(--font-ui);
  font-weight: bold;
  letter-spacing: 1px;
}
.wiki-indice-sommario { display: block; color: var(--gbc-muted); }

.wiki-briciole { font-family: var(--font-ui); font-size: 13px; color: var(--gbc-muted); margin: 0 0 var(--sp-1); }

.wiki-sommario {
  border-left: 2px solid var(--gbc-mid);
  padding-left: var(--sp-2);
  margin: 0 0 var(--sp-3);
  max-width: var(--riga);
}
.wiki-sommario ol { margin: 0; padding-left: var(--sp-3); }
.wiki-sommario li::marker { color: var(--gbc-light); font-family: var(--font-ui); }

/* Un'ancora raggiunta da un collegamento non finisce sotto il bordo alto. */
.wiki-sezione { scroll-margin-top: var(--sp-2); }

.wiki-lista { max-width: var(--riga); padding-left: var(--sp-3); }
.wiki-lista li { padding: 2px 0; }

/* Un numero che viene dal gioco (un prezzo, il tetto di livello) è una
   macchina che parla: monospazio, come nelle tabelle. */
.wiki-valore { font-family: var(--font-ui); color: var(--gbc-lightest); white-space: nowrap; }

.wiki-tasti td { white-space: normal; }

.wiki-figure {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--schermo) + 4px));
  gap: var(--sp-1);
  margin: var(--sp-2) 0 var(--sp-3);
  /* Una figura senza didascalia accanto a una che ce l'ha non si allunga: la
     cornice resta attorno all'immagine invece di chiudere un rettangolo vuoto. */
  align-items: start;
}
.wiki-figura img { max-width: 100%; }

@media (max-width: 355px) {
  .wiki-figure { grid-template-columns: 1fr; }
}

.wiki-vedi { font-family: var(--font-ui); font-size: 14px; color: var(--gbc-muted); }

/* --- L'avviso che è una demo, e l'annuncio ------------------------------- */

/* Il GIALLO (`YELLOW[1]`, la rampa del gioco) è già il colore di «ciò che va
   guardato» in questo foglio — è il fuoco da tastiera. Qui fa la stessa cosa
   per due blocchi che devono staccarsi dalla prosa senza urlare: l'avvertenza
   sulla demo e l'annuncio. Non c'è nessuna animazione, nessun lampeggio e
   nessuna transizione: un riquadro che si muove si guarda una volta e poi si
   impara a saltarlo, e queste due cose vanno LETTE. Contrasto misurato sul
   fondo scuro della pagina (`--gbc-darkest`): il giallo dà 9,3:1, il testo
   chiaro (`--gbc-lightest`) 14,6:1 — molto sopra il 4,5:1 richiesto. */

/* Il richiamo breve accanto al riquadro dell'accesso: una riga di testo con
   una barra gialla a sinistra. Non è una scatola, perché dentro l'apertura
   una seconda cornice dentro la cornice si legge come un errore. */
/* LA RIAPERTURA (2026-09-19): il messaggio che deve saltare all'occhio. */
.avviso-riapertura {
  margin: var(--sp-2) 0;
  padding: var(--sp-2);
  border: 3px solid var(--gbc-yellow);
  background: var(--gbc-darkest);
  color: var(--gbc-lightest);
  font-family: var(--font-ui);
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}
.avviso-riapertura strong { color: var(--gbc-yellow); display: block; font-size: 1.4rem; }

.avviso-lampo {
  border-left: 4px solid var(--gbc-yellow);
  padding-left: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: 15px;
  max-width: var(--riga);
}
.avviso-lampo strong { color: var(--gbc-yellow); }

/* L'avvertenza lunga, dentro il riquadro «È una demo, e si vede». Il fondo è
   il nero della pagina e non quello del riquadro: così si stacca da ciò che
   la circonda invece di sparirci dentro. */
.avvertenza {
  border: 2px solid var(--gbc-yellow);
  background: var(--gbc-darkest);
  padding: var(--sp-2);
  margin: var(--sp-3) 0;
  /* La regola 1 del blocco «una cornice non è mai più larga del suo
     inchiostro» vale anche qui, e qui serve DAVVERO: il riquadro che la
     contiene sta a piena misura perché ha un `.facts` dentro, e senza questa
     riga la cornice gialla arrivava a 940 px attorno a righe di prosa da 68
     caratteri — misurato a 1280, 940 contro ~600 di inchiostro. */
  max-width: calc(var(--riga) + 2 * var(--sp-2));
}
.avvertenza > :first-child { margin-top: 0; }
.avvertenza > :last-child { margin-bottom: 0; }
.avvertenza h3 { color: var(--gbc-yellow); }
.avvertenza strong { color: var(--gbc-lightest); }

/* L'ANNUNCIO. È l'unico blocco della pagina con la cornice gialla piena e il
   titolo grande: deve farsi vedere da chi scorre, e per questo sta in alto e
   non in fondo. La misura resta quella della prosa (`--riga`), così le righe
   si leggono anche quando la finestra è larga. */
.cercasi {
  border: 2px solid var(--gbc-yellow);
  background: var(--gbc-dark);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
  max-width: calc(var(--riga) + 2 * var(--sp-3));
}
.cercasi h2 {
  color: var(--gbc-yellow);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 var(--sp-2);
}
/* L'occhiello: la parola che dice di che cosa si tratta prima del titolo. */
.cercasi-occhiello {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gbc-light);
  margin: 0 0 4px;
}
.cercasi p { max-width: var(--riga); }
.cercasi > p:last-child { margin-bottom: 0; }
/* Il recapito: è la riga che si copia, quindi monospazio come i numeri e le
   tabelle, e con la sua riga sopra a separarlo dal discorso. */
.cercasi-contatto {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--gbc-lightest);
  border-top: 1px solid var(--gbc-mid);
  padding-top: var(--sp-2);
  margin-top: var(--sp-2);
}

/* --- La tier list dei giocatori (/tier-list, 2026-09-26) ------------------ */

/* La SCHEDA DI VOTO: un gruppo per intervallo di numeri di dex, e dentro una
   griglia di scelte che a 400 px diventa una colonna. La scelta ha la stessa
   misura dei filtri (44 px: si tocca col pollice). */
.tier-group {
  border: 1px solid var(--gbc-mid);
  margin: 0 0 var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: var(--sp-1) var(--sp-2);
}
.tier-group legend {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gbc-light);
  padding: 0 4px;
}
.tier-vote { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); }
.tier-vote label { font-size: 15px; }
.tier-vote select {
  background: var(--gbc-darkest);
  border: 2px solid var(--gbc-mid);
  color: var(--gbc-lightest);
  padding: 0 var(--sp-1);
  font-family: var(--font-ui);
  font-size: 16px;
  min-height: 44px;
  min-width: 64px;
}
.tier-vote select:hover, .tier-vote select:focus { border-color: var(--gbc-light); }
[data-tier-mia] .cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: 0; }

/* La lettera della fascia: si legge per prima nella riga. */
.tier-letter { font-family: var(--font-ui); color: var(--gbc-lightest); }
.tier-table .dex-pic { width: 40px; }

/* L'esito del salvataggio ACCANTO al pulsante: su un telefono il flash in
   cima alla pagina è lontano dal dito che ha premuto «Salva». Stessa cornice
   e stessi colori del flash (`.flash-error` / `.flash-info`). */
.tier-esito { border: 2px solid; padding: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 0; font-size: 15px; }