/* Impaginazione mobile-first e linguaggio visivo (§7.2 e §7.2.7 del PRD).
 *
 * Regole che governano tutto:
 *   - la scacchiera non scrolla e non viene mai coperta;
 *   - si usa `dvh`, mai `vh`: su mobile la barra dell'indirizzo si ritrae e
 *     `100vh` cambia a meta' scorrimento, facendo saltare la scacchiera;
 *   - le azioni stanno nel terzo basso, dove arriva il pollice;
 *   - nessun `:hover` come unico modo di capire qualcosa: sul touch non esiste;
 *   - tre taglie, non due: telefono (barra in basso), finestra stretta (colonna
 *     di icone), desktop (colonna con i nomi + colonna destra). Un'interfaccia
 *     da telefono stirata su un monitor e' un difetto quanto il contrario.
 *
 * Il tono e' quello chiesto dal committente: pulsanti premibili con lo spessore
 * sotto, angoli molto tondi, colori accesi con significato fisso, carte con
 * bordo invece che ombra. Il carattere resta quello di sistema — COEP vieta i
 * CDN — quindi la morbidezza la danno raggio, peso e colore.
 */

:root {
  /* Superfici e testo */
  --sfondo: #ffffff;
  --superficie: #ffffff;
  --testo: #3c3c3c;
  --tenue: #afafaf;
  --bordo: #e5e5e5;
  --ombra: #e5e5e5;          /* lo spessore sotto le carte e i pulsanti neutri */

  /* Semantica fissa: un colore vuol dire sempre la stessa cosa (§7.2.7).
     Verde = giusto/avanti · rosso = sbagliato · blu = neutro/informativo ·
     oro = ricompensa. */
  --scelta: #58cc02;
  --scelta-sotto: #58a700;
  --scelta-tenue: #d7ffb8;
  --giusto: #58cc02;
  --errore: #ff4b4b;
  --errore-sotto: #ea2b2b;
  --errore-tenue: #ffdfe0;
  --info: #1cb0f6;
  --info-sotto: #1899d6;
  --premio: #ffc800;

  /* Scacchiera: verde e crema, non legno scuro. Piu' sveglia, e il verde e'
     gia' il colore dell'app. */
  --chiara: #f0e5c9;
  --scura: #7fa650;

  /* Misure del guscio. Sono variabili perche' `.esito`, il foglio e il
     riempimento del corpo devono seguire la navigazione senza sapere dov'e'. */
  --nav-h: 66px;             /* barra in basso, solo telefono */
  --rail-w: 0px;             /* colonna laterale, solo da 700 px in su */
  --colonna: 720px;          /* nessuna riga di testo piu' larga di cosi' */
  --raggio: 16px;
  /* Quanto si tiene per se' il resto della schermata quando la scacchiera deve
     sapere quanto e' alta (solo da 1100 px in su, dove la colonna non e' piu'
     elastica): barra, riga di stato, una fila di pulsanti, margini. */
  --avanzo: 220px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #131f24;
    --superficie: #1c2b32;
    --testo: #f1f7fb;
    --tenue: #93a4ad;
    --bordo: #37464f;
    --ombra: #37464f;
    --scelta-tenue: #223c1a;
    --errore-tenue: #3d1f22;
  }
}

* { box-sizing: border-box; }

/* `hidden` non nasconde nulla se il CSS assegna un `display` esplicito: la
 * regola d'autore vince su quella del browser. Senza questa riga le due file di
 * pulsanti (caselle e verdetto) restano a schermo insieme, e chi studia si
 * trova quattro bottoni senza sapere quale sia il suo. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;              /* la schermata di gioco non scrolla mai */
  overscroll-behavior: none;     /* niente pull-to-refresh sopra la scacchiera */
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-left: var(--rail-w);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ barra */

.barra {
  flex: 0 0 auto;
  min-height: 52px;              /* mai sotto il bersaglio touch minimo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;                     /* senza, titolo e coda si toccano */
  padding: 0 16px;
  border-bottom: 2px solid var(--bordo);
}

.titolo { font-weight: 800; font-size: 16px; letter-spacing: 0.01em; }

/* La coda della barra porta due cose diverse: quasi ovunque uno stato ("nuova
   partita", "i tuoi set"), sullo studio e sulla crescita un conto che si
   guadagna. Solo il secondo e' una ricompensa e prende l'oro; colorare anche
   "nuova partita" faceva sembrare un premio una didascalia. */
.coda {
  color: var(--tenue);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.coda.premio { color: var(--premio); font-weight: 800; }

/* ------------------------------------------------------ barra di avanzamento */

/* Dice quanto manca senza scriverlo. Grassa e tonda: da lontano si legge come
   un progresso, non come un bordo. */
.progresso {
  flex: 0 0 auto;
  height: 16px;
  margin: 10px 16px 0;
  border-radius: 999px;
  background: var(--bordo);
  overflow: hidden;
}

.progresso-fatto {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--scelta);
  transition: width 0.3s ease-out;
}

/* ------------------------------------------------------------------ coach */

.coach {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 12px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
}

.coach-testo {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  /* Due righe e non una di piu': un muro di testo sopra la scacchiera viene
     saltato, e allora tanto valeva non scriverlo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coach.aperto .coach-testo,
/* La consegna di un esercizio non e' un commento: la seconda meta' della frase
   e' spesso quella che cambia la risposta, e nasconderla dietro un tocco fa
   rispondere a una domanda diversa da quella posta. */
.coach.domanda .coach-testo {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Senza consegna da leggere, la freccia non ha niente da aprire. */
.coach.domanda .coach-apri { display: none; }

.coach-apri {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--info);
  font-size: 18px;
  font-weight: 800;
}

/* ------------------------------------------------------------ scacchiera */

/* La casa di cui parla la domanda. Volutamente diversa da `.scelta`: quella e'
   una risposta data, questa e' il soggetto della domanda, e confonderle
   farebbe credere di aver gia' risposto qualcosa. */
.casa.fuoco {
  box-shadow: inset 0 0 0 3px var(--info);
}

/* Le due case dell'ultima mossa. Una velatura, non un colore pieno: deve
   dirsi al primo sguardo senza coprire il pezzo che ci sta sopra, e senza
   somigliare a una casa scelta, che invece e' una risposta in corso. */
.casa.ultima::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--premio);
  opacity: 0.4;
  pointer-events: none;
}

/* Le coordinate sui bordi. Piccole e tenui: servono a trovare una casa quando
   la domanda la nomina, non a essere lette. */
.coord-colonna,
.coord-riga {
  position: absolute;
  font-size: min(2cqmin, 11px);
  font-weight: 700;
  line-height: 1;
  opacity: 0.6;
  pointer-events: none;
}
.coord-colonna { bottom: 2px; right: 3px; }
.coord-riga { top: 2px; left: 3px; }

/* Prima di cominciare non c'e' nessuna scacchiera, e l'area vuota si prendeva
   comunque tutta l'altezza: aprendo "Gioca" lo schermo sembrava vuoto, con le
   impostazioni schiacciate in fondo dove non si guarda.

   Non basta pero' togliere lo spazio, o a salire e' anche il pulsante che fa
   partire la partita: su un telefono l'azione principale deve restare in
   basso, dove arriva il pollice. Si sposta quindi cio' che va letto **sopra**
   l'area vuota, lasciando che sia lei a spingere le azioni in fondo. */
body:has(.scacchiera:empty) .barra,
body:has(.scacchiera:empty) .progresso { order: -2; }
body:has(.scacchiera:empty) .coach { order: -1; }
body:has(.scacchiera:empty) .stato,
body:has(.scacchiera:empty) .impostazioni {
  order: 0;
}
body:has(.scacchiera:empty) .scacchiera-area { order: 1; }
/* L'azione principale resta in fondo: e' li' che arriva il pollice. */
body:has(.scacchiera:empty) .azioni { order: 2; }

.scacchiera-area {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;                 /* senza questo il figlio flex non si riduce */
  padding: 8px;
  container-type: size;          /* misura lo spazio davvero disponibile */
}

.scacchiera {
  /* Il lato e' il **minore** fra larghezza e altezza dello spazio rimasto.
     `height: 100%` con `aspect-ratio` non basta: quando la larghezza viene
     limitata, l'altezza resta quella imposta e le case diventano rettangoli —
     una scacchiera stirata, con i pezzi ovali. Le unita' del contenitore danno
     i due lati veri, e il minimo fra i due e' sempre un quadrato.

     Il tetto di 640 px vale solo sul monitor: una scacchiera da 900 px si
     guarda muovendo la testa invece che gli occhi. */
  width: min(100cqw, 100cqh, 640px);
  height: min(100cqw, 100cqh, 640px);
  position: relative;              /* riferimento per l'overlay delle frecce */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: var(--raggio);
  overflow: hidden;
  touch-action: manipulation;    /* niente zoom da doppio tocco sulla scacchiera */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Le frecce stanno sopra le case ma non ricevono tocchi: dove si tocca deve
   restare la casa, sempre. */
.frecce {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.casa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Il pezzo segue il lato della scacchiera, non quello dello schermo: con
     `vw` su un monitor largo i pezzi uscivano dalle case. */
  font-size: min(10cqmin, 62px);
  line-height: 1;
  border: none;
  padding: 0;
  cursor: pointer;
}

.casa.chiara { background: var(--chiara); }
.casa.scura  { background: var(--scura); }

/* La selezione e' un anello spesso, non una tinta leggera: su un telefono al
   sole una differenza di luminosita' non si vede. */
.casa.scelta::after {
  content: "";
  position: absolute;
  inset: 6%;
  border: 4px solid var(--info);
  border-radius: 50%;
  pointer-events: none;
}

.casa.mancata::after { border-color: var(--errore); }
.casa.corretta::after { border-color: var(--giusto); }

.pezzo {
  pointer-events: none;          /* il tocco arriva sempre alla casa */
  color: #101014;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.55);
}

.pezzo.bianco { color: #fbfaff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }

/* Pallino sulle case dove si puo' andare: senza, muovere sul telefono
   diventa un tentativo alla cieca. Non e' un `:hover` — sul touch non esiste. */
.casa.destinazione::before {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: rgba(28, 176, 246, 0.85);
  pointer-events: none;
}

.casa.destinazione:has(.pezzo)::before {
  inset: 6%;
  background: none;
  border: 5px solid rgba(255, 75, 75, 0.9);
}

/* ------------------------------------------------------------ impostazioni */

.impostazioni {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
}

.campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--testo);
}

.campo-testo,
.campo select {
  flex: 1 1 auto;
  min-height: 48px;
  max-width: 62%;
  border-radius: 12px;
  border: 2px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
  font-size: 16px;              /* sotto i 16px iOS ingrandisce da solo la pagina */
  font-weight: 600;
  padding: 0 12px;
}

.campo-testo:focus,
.campo select:focus {
  outline: none;
  border-color: var(--info);
}

/* Sul telefono etichetta e controllo non stanno sulla stessa riga: con il
   controllo a 62 percento della larghezza, "Post-mossa — commenta dopo ogni
   mossa" si leggeva "Post-mossa — commen", e si sceglieva una modalita' senza
   sapere quale fosse. Sopra i 700 px la riga ci sta e resta com'era. */
@media (max-width: 699px) {
  .campo {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .campo-testo,
  .campo select { max-width: none; }
}

/* ------------------------------------------------------------------ stato */

.stato {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tenue);
  text-align: center;
}

/* ---------------------------------------------------------------- azioni */

.azioni {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 8px 12px 14px;
}

/* Il pulsante premibile: lo spessore sotto sparisce e il pulsante scende di
   quattro pixel. E' l'unico ritorno tattile che un browser puo' dare senza
   vibrazione, e su un telefono conta piu' di qualsiasi animazione. */
.azione {
  flex: 1 1 0;
  min-height: 52px;              /* sopra il minimo: qui si tocca sempre */
  border-radius: var(--raggio);
  border: 2px solid var(--bordo);
  box-shadow: 0 4px 0 var(--ombra);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--info);
  background: var(--superficie);
  touch-action: manipulation;
  cursor: pointer;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

.azione:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

/* Un collegamento che fa da pulsante deve sembrare un pulsante: la sottolineatura
   e il testo a sinistra lo fanno leggere come un link finito dentro una scatola. */
a.azione {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.azione.primaria {
  background: var(--scelta);
  border-color: var(--scelta);
  box-shadow: 0 4px 0 var(--scelta-sotto);
  color: #ffffff;
}

.azione.pericolo {
  background: var(--errore);
  border-color: var(--errore);
  box-shadow: 0 4px 0 var(--errore-sotto);
  color: #ffffff;
}

/* Spento vuol dire spento: senza spessore non sembra nemmeno premibile, ed e'
   esattamente il messaggio giusto. */
.azione:disabled {
  opacity: 1;
  background: var(--bordo);
  border-color: var(--bordo);
  box-shadow: none;
  color: var(--tenue);
  cursor: default;
}

/* ----------------------------------------------------------------- esito */

/* La fascia del verdetto: sale dal basso, tinta come l'esito, con una riga di
   motivo e un pulsante solo. E' il posto dove si guarda dopo aver risposto, e
   deve dire giusto/sbagliato prima ancora di essere letta. */
.esito {
  position: fixed;
  left: var(--rail-w);
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 16px 16px 20px;
  background: var(--superficie);
  border-top: 2px solid var(--bordo);
  border-radius: var(--raggio) var(--raggio) 0 0;
}

.esito p { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.esito-dettaglio { color: var(--tenue); font-size: 14px; font-weight: 600; }

/* Il pulsante della fascia non sta in una `.azioni`: senza contenitore flex
   restava largo quanto la parola "Avanti", un bersaglio da 84 px in fondo a una
   fascia larga tutto lo schermo. Qui e' l'unica cosa da fare: che sia largo
   quanto la fascia. */
.esito .azione { width: 100%; flex: none; }

.esito.giusto { background: var(--scelta-tenue); border-color: var(--scelta); }
.esito.giusto p { color: var(--scelta-sotto); }
.esito.sbagliato { background: var(--errore-tenue); border-color: var(--errore); }
.esito.sbagliato p { color: var(--errore-sotto); }

/* Su una fascia rossa un pulsante verde dice "bene, avanti" a chi ha appena
   sbagliato: il colore va con l'esito, non con l'azione. */
.esito.sbagliato .azione.primaria {
  background: var(--errore);
  border-color: var(--errore);
  box-shadow: 0 4px 0 var(--errore-sotto);
}

/* ------------------------------------------------------ schermata d'accesso */

/* L'unica schermata senza navigazione: da fuori non si va da nessuna parte.
   Quindi niente spazio riservato in basso, e il contenuto sta al centro. */
body.accesso { padding-bottom: env(safe-area-inset-bottom); padding-left: 0; }

.benvenuto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 16px;
  min-height: 0;
}

.benvenuto-simbolo { margin: 0; font-size: 64px; line-height: 1; text-align: center; }
.benvenuto-titolo { margin: 4px 0 0; font-size: 26px; font-weight: 800; text-align: center; }

.benvenuto-riga {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tenue);
  text-align: center;
  line-height: 1.4;
}

.benvenuto-riga.sbagliato { color: var(--errore); }

/* Qui il campo prende tutta la riga a ogni misura: sono due campi in croce, e
   incolonnarli e' anche il modo in cui li riempie un gestore di password. */
.benvenuto .campo { flex-direction: column; align-items: stretch; gap: 6px; }
.benvenuto .campo-testo { max-width: none; }
.benvenuto .azioni { padding: 12px 0 0; }

/* --------------------------------------------------- navigazione fra sezioni */

/* Una sola lista di destinazioni, due forme: barra in basso col pollice sul
   telefono, colonna a lato sul monitor. Un hamburger su desktop costringe a
   ricordarsi otto sezioni che ci sarebbe tutto lo spazio per mostrare. */
.sezioni {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 2px solid var(--bordo);
}

.sezione {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--tenue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}

.sezione-icona { font-size: 22px; line-height: 1; }

/* Il nome della sezione su una riga sola: "Woodpecker" mandava a capo e
   spostava in su l'icona, facendo ballare tutta la barra. */
.sezione-nome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sezione.corrente {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}

/* Sul telefono ci stanno cinque bersagli: quattro sezioni piu' "Altro", che
   apre lo stesso foglio di sempre. Oltre, si scende sotto il dito. */
.sezione-extra { display: none; }

/* Uscire non e' una sezione: si stacca dalle altre e sta in fondo. */
.sezione-esci { margin-top: auto; color: var(--tenue); }
.menu-voce.esci { text-align: left; font: inherit; cursor: pointer; margin-top: 18px; }

/* ------------------------------------------------------------ foglio (sheet) */

/* Copre lo schermo perche' leggere l'analisi e' un'attivita' a se': la
   scacchiera sotto, mezza visibile, farebbe solo concorrenza al testo. E' anche
   l'unica parte dell'app che scorre. */
.foglio {
  position: fixed;
  inset: 0;
  left: var(--rail-w);
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--sfondo);
  padding-top: env(safe-area-inset-top);
}

/* Schermo trasparente che ingoia il tocco d'apertura: dura poche centinaia di
   millisecondi e sta sopra tutto il contenuto del foglio. */
.foglio.sordo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.foglio-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 52px;
  border-bottom: 2px solid var(--bordo);
}

.foglio-chiudi {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.foglio-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
}

/* Il testo lungo non supera mai la colonna di lettura, anche quando il foglio
   e' largo un monitor. */
.foglio-corpo > * {
  max-width: var(--colonna);
  margin-inline: auto;
}

/* Righe alte e distanziate: nella barra i bersagli erano larghi pochi pixel e
   attaccati fra loro, che sul telefono vuol dire toccare quello sbagliato. */
.menu-voce {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  justify-content: center;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 2px solid var(--bordo);
  border-bottom-width: 4px;
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  text-decoration: none;
}

.menu-voce strong { font-size: 16px; font-weight: 800; }
.menu-voce span { font-size: 13px; color: var(--tenue); font-weight: 600; }

.menu-voce.corrente {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, var(--superficie));
}

/* ------------------------------------------- sequenza da tenere a mente (F10) */

/* Prende il posto della scacchiera quando sparisce. Le mosse stanno grandi e
   spaziate: si leggono una volta e poi si guarda altrove, ed e' proprio quello
   che l'esercizio vuole. */
.sequenza {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: min(100cqw, 100cqh, 640px);
  padding: 12px;
}

.sequenza p {
  margin: 0;
  font-size: clamp(18px, 6cqw, 28px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------ contenuto del foglio (F2) */

.capitolo { margin: 16px 0; }
.capitolo h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.capitolo p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--tenue); }

/* Ogni momento e' un bottone: si tocca e la scacchiera va li'. Un elenco di
   testi senza posizione e' esattamente cio' che non fa imparare. */
.momento {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 48px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 2px solid var(--bordo);
  border-bottom-width: 4px;
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  cursor: pointer;
}

.momento p { margin: 4px 0 0; font-size: 14px; color: var(--tenue); }

.momento-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Dove la linea viene giu': si legge come un avvertimento, non come una nota. */
.momento p.debole { color: var(--errore); }

.momento-riga strong { font-size: 15px; font-weight: 800; }
.momento-riga em { font-size: 12px; color: var(--tenue); font-style: normal; }

.nota { font-size: 12px; color: var(--tenue); line-height: 1.45; margin: 20px 0 0; }

/* ================================================================== taglie */

/* -------------------------------------- finestra stretta: colonna di icone */

@media (min-width: 700px) {
  :root {
    --nav-h: 0px;
    --rail-w: 76px;
  }

  /* La barra in basso diventa una colonna a lato: sul monitor il pollice non
     c'e', e il bordo inferiore e' il posto piu' lontano dal contenuto. */
  .sezioni {
    top: 0;
    right: auto;
    width: var(--rail-w);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: calc(10px + env(safe-area-inset-top)) 8px 10px;
    border-top: none;
    border-right: 2px solid var(--bordo);
    overflow-y: auto;
  }

  .sezione {
    flex: 0 0 auto;
    min-height: 56px;
  }

  /* Su schermo largo non si nasconde niente dietro "Altro": lo spazio c'e'. */
  .sezione-extra { display: flex; }
  .sezione-altro { display: none; }

  /* Colonna di lettura centrata: una riga di testo larga un monitor si perde
     tornando a capo, e un pulsante largo 1900 px non sembra premibile. */
  .barra,
  .progresso,
  .coach,
  .stato,
  .impostazioni,
  .azioni,
  .scacchiera-area {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
  }

  /* La fascia deve stare esattamente sopra la colonna del contenuto, non al
     centro dello schermo: con la colonna laterale e quella del coach, "centro"
     e "sotto la scacchiera" sono due punti diversi, e la prima versione finiva
     a cavallo fra le due colonne coprendo i pulsanti.
     `--lato-dx` e' quanto si porta via la colonna destra (zero finche' non
     c'e'), cosi' la stessa formula vale a tutte e due le taglie. */
  .esito {
    --lato-dx: 0px;
    --disp: calc(100vw - var(--rail-w));
    --griglia: min(var(--disp), calc(var(--colonna) + var(--lato-dx)));
    left: calc(var(--rail-w) + (var(--disp) - var(--griglia)) / 2);
    right: auto;
    transform: none;
    width: calc(var(--griglia) - var(--lato-dx));
    border: 2px solid var(--bordo);
    border-radius: var(--raggio);
    bottom: 16px;
  }

  .esito.giusto { border-color: var(--scelta); }
  .esito.sbagliato { border-color: var(--errore); }
}

/* ------------------------------------ desktop: nomi nella colonna, due colonne */

@media (min-width: 1100px) {
  :root { --rail-w: 240px; }

  /* Icona e nome sulla stessa riga: e' la forma che si legge da un metro. */
  .sezione {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .sezione-icona { font-size: 24px; }

  /* Colonna centrale + colonna destra per il coach. La barra sta sopra
     entrambe; tutto il resto scende in colonna uno, **nell'ordine in cui sta
     nella pagina**.
     Niente righe assegnate a mano: due tentativi ci si sono rotti sopra. Con le
     prime righe fissate, la collocazione automatica riempiva il primo buco —
     su "Partita", che non ha la barra di avanzamento, "Tocca a te." finiva
     sopra la scacchiera. Fissando anche quella, il difetto si spostava al
     pezzo successivo; e fissando pure le file di pulsanti, woodpecker ne
     mostra due insieme (le risposte e "Chiudi") e la seconda spariva sotto la
     prima. Lasciando decidere all'ordine del documento non c'e' niente da
     tenere allineato a mano. */
  body {
    display: grid;
    grid-template-columns: minmax(0, var(--colonna)) 320px;
    grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    column-gap: 28px;
  }

  body > * { grid-column: 1; }

  /* La barra copre tutta la larghezza: fermarla a meta' lasciava il filo di
     separazione sospeso in mezzo allo schermo. */
  .barra {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: none;
    margin-inline: 0;
  }

  /* **Tutte** le righe sono esplicite, non solo le prime. La collocazione
     automatica sposta il cursore solo in avanti ma parte dalla prima cella
     libera: sulle pagine senza barra di avanzamento la riga 2 restava vuota, e
     ci finiva dentro il primo elemento non piazzato — su "Partita" era
     "Tocca a te.", che compariva **sopra** la scacchiera. Bastava piazzarne uno
     in piu' e il difetto si spostava al successivo: o si piazzano tutti, o non
     serve a niente.

     Le file di pulsanti stanno tutte sulla riga 6 perche' una sola per volta e'
     visibile — e' l'invariante gia' imposta da `[hidden]` piu' su, non una
     coincidenza fortunata. */
  /* Senza una riga elastica la scacchiera non ha piu' un'altezza da cui
     dedurre il proprio lato, e le unita' del contenitore darebbero zero. Glielo
     si dice: quanto avanza sotto la barra e sopra i pulsanti, e comunque mai
     piu' di 640 px. I 220 px sono barra, riga di stato, una fila di pulsanti e
     i margini — se la somma sbaglia si vede subito, perche' qualcosa resta
     tagliato in fondo, ed e' proprio quello che la sonda controlla.

     Woodpecker le file di pulsanti ne tiene due insieme (le risposte e
     "Chiudi"), e la seconda finiva quattordici pixel sotto il bordo. Non e' un
     caso da indovinare: si riconosce dalla pagina stessa. */
  .scacchiera-area {
    max-width: none;
    height: min(640px, calc(100dvh - var(--avanzo)));
  }

  body:has(.azioni:not([hidden]) ~ .azioni:not([hidden])) { --avanzo: 292px; }

  /* Su meta' delle schermate il contenuto principale non e' una scacchiera ma
     un elenco che scorre (le linee del repertorio, le partite, i set, la
     crescita). Stessa ragione, stesso vincolo. */
  body > .foglio-corpo {
    min-height: 0;
    max-height: calc(100dvh - 190px);
  }
  /* Il coach sta accanto a tutto il resto, non dentro la colonna: gli si dice
     dove comincia (subito sotto la barra) e di non toccare piu' niente. */
  .coach {
    grid-column: 2;
    grid-row: 2 / 100;
    align-self: start;
    margin: 10px 0 0;
    max-width: none;
  }

  /* Senza scacchiera l'area non deve tenersi mezzo schermo vuoto. */
  body:has(.scacchiera:empty) .scacchiera-area { height: auto; }

  /* Il foglio e le fasce sono fuori dal flusso: la griglia non li tocca. */
  .foglio, .esito, .sezioni { grid-column: auto; }

  /* 320 px di colonna destra piu' 28 di distacco: e' quanto la fascia del
     verdetto deve togliersi per restare allineata alla scacchiera. */
  .esito { --lato-dx: 348px; }

  /* Un pulsante non prende mai tutta la colonna: 480 px bastano e avanzano.
     Centrato, perche' la scacchiera sopra e' centrata e due bordi sinistri
     diversi si vedono. */
  .azioni { max-width: 480px; }
}

/* Chi ha chiesto meno movimento non deve vedere il pulsante saltare. */
@media (prefers-reduced-motion: reduce) {
  .azione, .progresso-fatto { transition: none; }
}