/* La scuola: il percorso, il testo di una lezione, le animazioni, il quiz.

   Nessun colore nuovo: le variabili sono quelle di `tavolo.css`, e i mattoni
   (`.scheda`, `.btn`, `.collegamento`, `.intestazione`) sono quelli di tutte le
   pagine. La scuola deve sembrare la stessa casa del tavolo, non un opuscolo.

   La differenza col tavolo e' il **ritmo**: al tavolo si guarda, qui si legge.
   Quindi pagina piu' larga, corpo piu' grande, interlinea piu' alta, e una
   misura di riga che resta corta anche quando la pagina e' larga — il testo
   scorre in una colonna di ~65 caratteri centrata, e figure e animazioni
   occupano tutta la larghezza della scheda. E' il contrario del pannello
   denso: qui lo spazio bianco e' il mezzo, non lo spreco.

   Lo zoom col dito qui **si vuole**: la scuola non e' il tavolo, dove il
   doppio tap e' il gesto per giocare (vedi CLAUDE.md). Nessun `touch-action`
   e nessun `user-scalable` su queste pagine. */

.scuola { max-width: 880px; }
.scuola .scheda { margin-top: 1.6rem; }
.scuola-avanti { margin: 1.8rem 0 0; }
.scuola-finita h2 { margin-top: 0; }

/* La misura della riga di lettura. Un solo numero, cosi' che cambiare il
   respiro del testo sia una riga sola e non dieci. */
.scuola { --misura: 38rem; }

/* --------------------------------------------------------- il percorso */

.percorso { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.percorso-riga a {
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 1.1rem;
  padding: 1rem 1.05rem; border-radius: 14px; color: inherit; text-decoration: none;
  border: 1px solid var(--bordo-tenue); background: rgba(255, 255, 255, .03);
  transition: background .18s ease, border-color .18s ease;
}
.percorso-riga a:hover { border-color: var(--bordo); background: rgba(255, 255, 255, .06); }
.percorso-numero {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--bordo); font-variant-numeric: tabular-nums; color: var(--fioco);
  font-size: 1.05rem;
}
.percorso-fatta .percorso-numero { background: var(--accento); color: var(--scuro); border-color: transparent; }
.percorso-testo { display: grid; gap: .15rem; min-width: 0; }
.percorso-titolo { font-weight: 600; font-size: 1.12rem; }
.percorso-sotto { font-size: .95rem; color: var(--fioco); line-height: 1.45; }
.percorso-stato { font-size: .85rem; color: var(--fioco-piu); white-space: nowrap; }
.percorso-cambiata .percorso-stato { color: var(--accento); }

/* --------------------------------------------------------- la lezione */

.lezione-numero {
  margin: 0 0 .4rem; font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fioco);
}
.lezione .intestazione .sotto { font-size: 1.12rem; line-height: 1.5; }

.lezione-testo {
  padding: 2rem clamp(1.1rem, 4vw, 2.4rem);
  /* Il corpo cresce con la finestra ma si ferma: oltre i ~20px una riga lunga
     diventa faticosa anche se il carattere e' grande. */
  font-size: clamp(1.06rem, .96rem + .45vw, 1.2rem);
  line-height: 1.75;
}
.lezione-testo h2 {
  font-size: clamp(1.3rem, 1.12rem + .6vw, 1.6rem); font-weight: normal;
  letter-spacing: .01em; line-height: 1.3; margin: 2.6rem 0 .7rem; color: var(--accento-chiaro);
}
.lezione-testo h2:first-child { margin-top: 0; }
.lezione-testo p { margin: .95rem auto; }
.lezione-testo ul { padding-left: 1.4rem; }
.lezione-testo li { margin: .5rem 0; }
.lezione-testo strong { color: var(--accento-chiaro); font-weight: 600; }
.lezione-testo .tabella-punti { border-collapse: collapse; margin: 1.1rem auto; width: 100%; }
.lezione-testo .tabella-punti td, .lezione-testo .tabella-punti th {
  padding: .55rem .9rem .55rem 0; text-align: left; border-bottom: 1px solid var(--bordo-tenue);
}
.lezione-testo .tabella-punti td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Il testo che si legge sta in una colonna stretta e centrata; le figure, le
   animazioni e il quiz no, e prendono tutta la scheda. E' cio' che permette
   alla pagina di essere larga senza che la riga diventi illeggibile.
   Sta **dopo** le regole qui sopra apposta: una di quelle usa la scorciatoia
   `margin`, che azzererebbe i margini automatici e riaccosterebbe i titoli al
   bordo mentre i paragrafi restano centrati — il difetto si vede subito ed e'
   subito difficile da spiegare. */
.lezione-testo > p,
.lezione-testo > ul,
.lezione-testo > ol,
.lezione-testo > h2,
.lezione-testo > table { max-width: var(--misura); margin-inline: auto; }

.lezione-fine { padding: 1.5rem clamp(1.1rem, 4vw, 2.4rem); }
.lezione-fine p { margin-top: 0; font-size: 1.05rem; }
.lezioni-vicine {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0;
}
.lezioni-vicine .collegamento { font-size: 1rem; }

/* --------------------------------------------------------- le carte */

.fila-carte {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 1.1rem; margin: 1.6rem 0; padding: 0;
}
.carta-lezione { display: grid; justify-items: center; gap: .4rem; width: 6.6rem; text-align: center; }
.carta-lezione img {
  /* Il raggio misurato del mazzo (vedi CLAUDE.md): 8,43% della larghezza, che
     in altezza (356x600) e' il 5%. Sta gia' in `--angolo-carta`. */
  width: 100%; height: auto; border-radius: var(--angolo-carta);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.carta-nome { font-size: .8rem; line-height: 1.3; color: var(--fioco); }
.carta-didascalia { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); }

/* ------------------------------------------------------ le animazioni */

/* Il meccanismo, una volta sola per tutte e sei:
   - `.anim-scena` e' un palco a proporzione fissa; ogni pezzo e' collocato in
     percentuale, quindi la scena si rimpicciolisce senza scomporsi;
   - `.anim-dove` porta il posto a riposo (e non si muove mai), `.anim-pezzo`
     porta l'animazione. Le percentuali dei `transform` sono quindi relative
     alla carta stessa, e i fotogrammi si leggono come «di quanto si sposta»;
   - **il fotogramma 0% e' identico al 100%, ed e' anche lo stato scritto nelle
     regole base**. Da qui tre cose insieme: il loop non scatta, l'animazione
     in pausa mostra comunque una figura sensata, e chi ha chiesto meno
     movimento vede quella stessa figura ferma;
   - le animazioni partono in pausa e le fa partire `scuola.js` quando la
     scena entra nella viewport. Senza JavaScript partono da sole: lo dice la
     regola nel `<noscript>` di `lezione.html`. */

.anim {
  margin: 2rem 0; padding: 1.1rem 1.1rem .2rem;
  border-radius: 18px; border: 1px solid var(--bordo-tenue);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(27, 74, 44, .75), rgba(0, 0, 0, .2) 72%),
    rgba(0, 0, 0, .18);
  overflow: hidden;
}
/* La proporzione del palco e' un dato, non un gusto: da essa dipende quanto e'
   alta una carta rispetto al palco, e quindi di quanto deve spostarsi chi
   attraversa la scena in verticale. I due spostamenti che ne dipendono stanno
   in `--salita` e `--discesa`, accanto a lei, e cambiano insieme a lei: se un
   giorno si cambia la proporzione e non quei due numeri, la briscola non
   arriva sul tavolo e la carta pescata non arriva in mano. */
.anim-scena { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.anim-briscola { --salita: -62%; }
.anim-pescare { --discesa: 23%; }
.anim-dove {
  position: absolute; left: 50%; top: 50%; width: 19%;
  transform: translate(-50%, -50%);
}
.anim-pezzo { display: block; position: relative; }
.anim-pezzo img {
  position: relative; display: block; width: 100%; height: auto;
  border-radius: var(--angolo-carta); box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
}
/* L'alone d'oro di chi prende: sotto la carta, e muove solo opacita' e scala. */
.anim-pezzo::before {
  content: ""; position: absolute; inset: -7%; opacity: 0;
  border-radius: 13% / 7.7%;
  box-shadow: 0 0 0 2px rgba(230, 192, 92, .95), 0 0 30px 10px rgba(230, 192, 92, .38);
}
.anim-eti {
  position: absolute; left: 50%; bottom: -.2em; transform: translate(-50%, 50%);
  min-width: 1.9em; padding: .14em .45em; border-radius: 999px; text-align: center;
  font-size: clamp(.68rem, .55rem + .5vw, .92rem); line-height: 1.3; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.anim-eti-punti { background: var(--accento); color: var(--scuro); opacity: 0; }
/* L'ordine di gioco non e' un punteggio: piccolo, in alto, e sempre visibile. */
.anim-eti-ordine {
  left: auto; right: -.4em; bottom: auto; top: -.2em; transform: translate(0, -50%);
  background: rgba(10, 20, 14, .92); color: var(--inchiostro); border: 1px solid var(--bordo);
  font-weight: 600;
}
.anim-detta {
  margin: .9rem auto .1rem; max-width: var(--misura); text-align: center;
  font-size: .95rem; line-height: 1.5; color: var(--fioco);
}

.anim-pezzo, .anim-pezzo::before, .anim-eti { animation-play-state: paused; }
.anim-viva .anim-pezzo, .anim-viva .anim-pezzo::before, .anim-viva .anim-eti {
  animation-play-state: running;
}

/* --- il giro: due carte sul tavolo, una prende, se le porta via tutte e due */

.anim-giro .anim-dove { width: 21%; }
.anim-giro .gi-perde { left: 36%; top: 49%; }
.anim-giro .gi-vince { left: 64%; top: 52%; }
.anim-giro .gi-perde .anim-pezzo { animation: giro-perde 7s infinite; }
.anim-giro .gi-vince .anim-pezzo { animation: giro-vince 7s infinite; }
.anim-giro .gi-vince .anim-pezzo::before { animation: alone-lungo 7s infinite; }

@keyframes giro-perde {
  0%, 26%   { transform: none; opacity: 1; }
  36%, 50%  { transform: translateY(7%) rotate(-2.5deg); opacity: 1; }
  62%       { transform: translate(150%, -85%) rotate(14deg); opacity: 0; }
  70%       { transform: translate(-35%, 145%) rotate(-7deg); opacity: 0; }
  88%, 100% { transform: none; opacity: 1; }
}
@keyframes giro-vince {
  0%, 26%   { transform: none; opacity: 1; }
  36%, 50%  { transform: translateY(-11%) scale(1.06); opacity: 1; }
  62%       { transform: translate(140%, -95%) rotate(18deg); opacity: 0; }
  70%       { transform: translate(35%, 150%) rotate(8deg); opacity: 0; }
  88%, 100% { transform: none; opacity: 1; }
}
/* L'alone torna alla scala di partenza prima della fine anche se e' gia'
   invisibile: un fotogramma di chiusura che differisce dall'apertura anche solo
   in una trasformazione a opacita' zero e' comunque un fotogramma diverso, e
   il confronto che verifica il loop lo vede. */
@keyframes alone-lungo {
  0%, 28%   { opacity: 0; transform: scale(.82); }
  38%, 50%  { opacity: .95; transform: scale(1); }
  60%       { opacity: 0; transform: scale(1.12); }
  100%      { opacity: 0; transform: scale(.82); }
}

/* --- i quattro semi: gli assi in fila, e l'attenzione che passa su ognuno */

.anim-semi .anim-dove { width: 18%; }
.anim-semi .se-1 { left: 14%; --t: 0s; }
.anim-semi .se-2 { left: 38%; --t: 2.2s; }
.anim-semi .se-3 { left: 62%; --t: 4.4s; }
.anim-semi .se-4 { left: 86%; --t: 6.6s; }
.anim-semi .anim-pezzo { animation: alza-quattro 8.8s infinite; animation-delay: var(--t); }
.anim-semi .anim-pezzo::before { animation: alone-quattro 8.8s infinite; animation-delay: var(--t); }

@keyframes alza-quattro {
  0%, 3%    { transform: none; }
  10%, 19%  { transform: translateY(-10%) scale(1.07); }
  25%, 100% { transform: none; }
}
@keyframes alone-quattro {
  0%, 5%    { opacity: 0; }
  11%, 19%  { opacity: .9; }
  25%, 100% { opacity: 0; }
}

/* --- i punti: il numero stampato non e' il punteggio */

.anim-punti .anim-dove { width: 15%; top: 47%; }
.anim-punti .pu-1 { left: 10%; --t: 0s; }
.anim-punti .pu-2 { left: 30%; --t: 2.2s; }
.anim-punti .pu-3 { left: 50%; --t: 4.4s; }
.anim-punti .pu-4 { left: 70%; --t: 6.6s; }
.anim-punti .pu-5 { left: 90%; --t: 8.8s; }
.anim-punti .anim-pezzo { animation: alza-cinque 11s infinite; animation-delay: var(--t); }
.anim-punti .anim-pezzo::before { animation: alone-cinque 11s infinite; animation-delay: var(--t); }
.anim-punti .anim-eti { animation: eti-pop 11s infinite; animation-delay: var(--t); }

@keyframes alza-cinque {
  0%, 2%    { transform: none; }
  8%, 15%   { transform: translateY(-11%) scale(1.08); }
  20%, 100% { transform: none; }
}
@keyframes alone-cinque {
  0%, 4%    { opacity: 0; }
  9%, 15%   { opacity: .9; }
  20%, 100% { opacity: 0; }
}
@keyframes eti-pop {
  0%, 4%    { opacity: 0; transform: translate(-50%, 50%) scale(.5); }
  9%, 15%   { opacity: 1; transform: translate(-50%, 50%) scale(1); }
  20%       { opacity: 0; transform: translate(-50%, 50%) scale(.9); }
  100%      { opacity: 0; transform: translate(-50%, 50%) scale(.5); }
}

/* --- la presa: le due regole, una dopo l'altra, nello stesso posto */

.anim-presa .anim-dove { width: 21%; }
.anim-presa .pr-a1, .anim-presa .pr-b1 { left: 36%; top: 49%; }
.anim-presa .pr-a2, .anim-presa .pr-b2 { left: 64%; top: 52%; }
.anim-presa .pr-a1 .anim-pezzo { animation: presa-a-perde 12s infinite; }
.anim-presa .pr-a2 .anim-pezzo { animation: presa-a-vince 12s infinite; }
.anim-presa .pr-a2 .anim-pezzo::before { animation: presa-a-alone 12s infinite; }
.anim-presa .pr-b2 .anim-pezzo { animation: presa-b-perde 12s infinite; }
.anim-presa .pr-b1 .anim-pezzo { animation: presa-b-vince 12s infinite; }
.anim-presa .pr-b1 .anim-pezzo::before { animation: presa-b-alone 12s infinite; }
/* La seconda coppia comincia invisibile: e' il fotogramma a riposo, cioe' la
   prima regola. Chi non vede l'animazione vede quella, ed e' giusto cosi'. */
.anim-presa .pr-b1 .anim-pezzo, .anim-presa .pr-b2 .anim-pezzo { opacity: 0; }

@keyframes presa-a-perde {
  0%, 22%   { transform: none; opacity: 1; }
  30%, 42%  { transform: translateY(6%) rotate(-2deg); opacity: 1; }
  48%       { transform: translateY(6%) rotate(-2deg); opacity: 0; }
  94%       { transform: none; opacity: 0; }
  100%      { transform: none; opacity: 1; }
}
@keyframes presa-a-vince {
  0%, 22%   { transform: none; opacity: 1; }
  30%, 42%  { transform: translateY(-12%) scale(1.06); opacity: 1; }
  48%       { transform: translateY(-12%) scale(1.06); opacity: 0; }
  94%       { transform: none; opacity: 0; }
  100%      { transform: none; opacity: 1; }
}
@keyframes presa-a-alone {
  0%, 24%   { opacity: 0; }
  32%, 42%  { opacity: .95; }
  48%, 100% { opacity: 0; }
}
@keyframes presa-b-perde {
  0%, 52%   { transform: none; opacity: 0; }
  58%, 72%  { transform: none; opacity: 1; }
  80%, 90%  { transform: translateY(6%) rotate(2deg); opacity: 1; }
  96%, 100% { transform: none; opacity: 0; }
}
@keyframes presa-b-vince {
  0%, 52%   { transform: none; opacity: 0; }
  58%, 72%  { transform: none; opacity: 1; }
  80%, 90%  { transform: translateY(-12%) scale(1.06); opacity: 1; }
  96%, 100% { transform: none; opacity: 0; }
}
@keyframes presa-b-alone {
  0%, 74%   { opacity: 0; }
  82%, 90%  { opacity: .95; }
  96%, 100% { opacity: 0; }
}

/* --- la briscola che taglia */

.anim-briscola .anim-dove { width: 20%; }
/* La briscola sta di traverso sotto il mazzo, come al tavolo (vedi CLAUDE.md:
   coricata si legge dai due lati). Qui non si muove: e' il promemoria. */
.anim-briscola .br-seme {
  left: 13%; top: 50%; width: 15%; transform: translate(-50%, -50%) rotate(90deg);
}
.anim-briscola .br-perde { left: 50%; top: 42%; }
.anim-briscola .br-vince { left: 74%; top: 78%; }
.anim-briscola .br-perde .anim-pezzo { animation: br-perde 8s infinite; }
.anim-briscola .br-vince .anim-pezzo { animation: br-taglia 8s infinite; }
.anim-briscola .br-vince .anim-pezzo::before { animation: br-alone 8s infinite; }

@keyframes br-taglia {
  0%, 14%   { transform: none; opacity: 1; }
  32%, 54%  { transform: translate(-8%, var(--salita)) rotate(-3deg); opacity: 1; }
  66%       { transform: translate(120%, -140%) rotate(16deg); opacity: 0; }
  74%       { transform: translate(25%, 45%) rotate(5deg); opacity: 0; }
  88%, 100% { transform: none; opacity: 1; }
}
@keyframes br-perde {
  0%, 32%   { transform: none; opacity: 1; }
  54%       { transform: translateY(7%) rotate(-3deg); opacity: .78; }
  66%       { transform: translate(150%, -90%) rotate(20deg); opacity: 0; }
  74%       { transform: translate(-25%, 65%) rotate(-6deg); opacity: 0; }
  88%, 100% { transform: none; opacity: 1; }
}
@keyframes br-alone {
  0%, 32%   { opacity: 0; transform: scale(.85); }
  42%, 56%  { opacity: .95; transform: scale(1); }
  64%       { opacity: 0; transform: scale(1.1); }
  100%      { opacity: 0; transform: scale(.85); }
}

/* --- si pesca: una carta lascia il mazzo, arriva in mano e si scopre */

.anim-pescare .anim-dove { width: 20%; }
.anim-pescare .pe-seme {
  left: 16%; top: 50%; width: 17%; transform: translate(-50%, -50%) rotate(90deg);
}
.anim-pescare .pe-mazzo { left: 16%; top: 50%; }
.anim-pescare .pe-dorso { left: 16%; top: 46%; }
.anim-pescare .pe-mano1 { left: 58%; top: 62%; transform: translate(-50%, -50%) rotate(-7deg); }
.anim-pescare .pe-fronte { left: 74%; top: 60%; }
.anim-pescare .pe-mano2 { left: 90%; top: 62%; transform: translate(-50%, -50%) rotate(7deg); }
/* Il mazzo e' uno spessore, non un foglio: due ombre piatte sotto e a destra
   valgono tre immagini sovrapposte, e costano zero nodi. */
.anim-pescare .pe-mazzo .anim-pezzo img {
  box-shadow: 3px 4px 0 rgba(255, 255, 255, .09), 6px 8px 0 rgba(255, 255, 255, .05),
              0 12px 26px rgba(0, 0, 0, .55);
}
.anim-pescare .pe-fronte .anim-pezzo { opacity: 0; }
/* Lo spostamento e' calcolato, non a occhio: da sinistra (16%) al posto vuoto
   in mano (74%) ci sono 58 punti di larghezza del palco, e la carta ne e'
   larga 20 — 58/20 = 290% di se stessa. In verticale il dislivello e' 14
   punti di ALTEZZA del palco, e la carta ne e' alta 59,9 (20% * 600/356 * 16/9):
   14/59,9 = 23%. Se cambia la larghezza della carta, o la proporzione del
   palco, cambiano questi numeri. */
.anim-pescare .pe-dorso .anim-pezzo { animation: pe-viaggio 8s infinite; }
.anim-pescare .pe-fronte .anim-pezzo { animation: pe-scopri 8s infinite; }

@keyframes pe-viaggio {
  0%, 12%   { transform: none; opacity: 1; }
  42%, 46%  { transform: translate(290%, var(--discesa)) rotate(5deg); opacity: 1; }
  50%       { transform: translate(290%, var(--discesa)) rotate(5deg) scaleX(.06); opacity: 1; }
  51%, 84%  { transform: translate(290%, var(--discesa)) rotate(5deg) scaleX(.06); opacity: 0; }
  94%, 100% { transform: none; opacity: 1; }
}
@keyframes pe-scopri {
  0%, 50%   { transform: scaleX(.06); opacity: 0; }
  51%       { transform: scaleX(.06); opacity: 1; }
  58%, 80%  { transform: scaleX(1); opacity: 1; }
  88%, 100% { transform: scaleX(.06); opacity: 0; }
}

/* Chi ha chiesto meno movimento non lo deve avere: resta il fotogramma fermo,
   che e' lo stato a riposo — cioe' una figura che si capisce da sola. Le
   etichette dei punti, che nell'animazione compaiono a turno, qui restano
   tutte visibili: ferme non avrebbero altro modo di dirsi. */
/* I selettori portano `.anim` davanti apposta: senza, `.anim-eti` pesa meno di
   `.anim-punti .anim-eti` e l'animazione continuava a girare proprio dove si
   era chiesto di spegnerla — un difetto che non si vede finche' non si prova
   con l'impostazione accesa. Cosi' pesano uguale e vince l'ultimo scritto,
   che e' questo. */
@media (prefers-reduced-motion: reduce) {
  .anim .anim-pezzo, .anim .anim-pezzo::before, .anim .anim-eti { animation: none; }
  .anim .anim-eti-punti { opacity: 1; }
}

/* --------------------------------------------------------- gli esercizi */

.esercizio {
  margin: 1.8rem 0; padding: 1.3rem; border-radius: 16px;
  border: 1px solid var(--bordo); background: rgba(0, 0, 0, .18);
  scroll-margin-top: 1rem;
}
.esercizio-giusto { border-color: rgba(120, 200, 140, .55); }
.esercizio-sbagliato { border-color: rgba(230, 120, 100, .55); }
.esercizio-domanda { margin: 0 0 .5rem; font-weight: 600; font-size: 1.1rem; line-height: 1.5; }
.esercizio-scelte { display: flex; flex-wrap: wrap; gap: .7rem; margin: .9rem 0 0; }
.fila-mostrate { justify-content: flex-start; }

.risposta {
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: .6rem 1.05rem; border-radius: 12px;
  border: 1px solid var(--bordo); background: rgba(255, 255, 255, .06);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.risposta:hover { border-color: var(--accento); background: rgba(255, 255, 255, .1); }
.risposta:active { transform: translateY(1px); }
.risposta-carta { flex-direction: column; width: 7rem; padding: .55rem; font-size: .82rem; line-height: 1.3; }
.risposta-carta img { width: 100%; height: auto; border-radius: var(--angolo-carta); }
.risposta-giusta { border-color: rgb(120, 200, 140); background: rgba(120, 200, 140, .16); }
.risposta-sbagliata { border-color: rgb(230, 120, 100); background: rgba(230, 120, 100, .14); }

.esercizio-esito p { margin: .9rem 0 0; line-height: 1.6; font-size: 1.02rem; }
.esercizio-giusto .esercizio-esito strong { color: rgb(150, 215, 165); }
.esercizio-sbagliato .esercizio-esito strong { color: rgb(240, 150, 130); }

/* --------------------------------------------------------- il quiz */

/* Il riquadro esiste **solo con JavaScript**: lo costruisce `scuola.js`
   raccogliendo gli esercizi gia' stampati dal server. Senza JavaScript restano
   dove stanno, uno sotto l'altro, e la lezione funziona come sempre. */

.quiz {
  margin: 2rem 0 .5rem; border: 1px solid var(--bordo); border-radius: 18px;
  background: rgba(0, 0, 0, .26); overflow: hidden;
}
.quiz-capo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--bordo-tenue);
  background: rgba(255, 255, 255, .04);
}
.quiz-conta {
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fioco);
  font-variant-numeric: tabular-nums;
}
.quiz-pallini { display: flex; gap: .4rem; }
.quiz-pallino {
  width: .52rem; height: .52rem; border-radius: 50%;
  background: rgba(255, 255, 255, .16); transition: background .25s ease, transform .25s ease;
}
.quiz-pallino-ora { background: var(--accento); transform: scale(1.25); }
.quiz-pallino-giusto { background: rgba(120, 200, 140, .9); }

.quiz-corpo { position: relative; padding: .2rem 1.2rem 1.2rem; }
.quiz-passo[hidden] { display: none; }
.quiz-passo:focus { outline: none; }
/* Il passo in misura sta fuori dal flusso per un istante: serve a sapere
   quanto e' alto il piu' alto, cosi' il riquadro non salta a ogni domanda. */
.quiz-misura { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
.quiz .esercizio { margin: 1.1rem 0 0; border: 0; background: none; padding: 0; }
.quiz .lezione-fine {
  margin: 1.1rem 0 0; border: 0; background: none; padding: 0; box-shadow: none;
  max-width: none;
}
.quiz-piede { padding: 0 1.2rem 1.2rem; }
.quiz-avanti[hidden] { display: none; }
.quiz-entra { animation: quiz-entra .28s ease both; }
@keyframes quiz-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.quiz-attesa { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .quiz-entra { animation: none; }
  .quiz-pallino { transition: none; }
}

/* --------------------------------------------------------- lo stretto */

@media (max-width: 560px) {
  .lezione-testo { padding: 1.4rem 1.1rem; }
  .lezione-fine { padding: 1.2rem 1.1rem; }
  .carta-lezione { width: 5rem; }
  .risposta-carta { width: 5.8rem; }
  .esercizio { padding: 1rem; }
  .quiz-capo, .quiz-corpo, .quiz-piede { padding-left: .9rem; padding-right: .9rem; }
  .percorso-riga a { grid-template-columns: 2.4rem 1fr; gap: .8rem; }
  .percorso-stato { grid-column: 2; }
  .anim { padding: .7rem .7rem .2rem; }
  /* Su un telefono il palco a 16/9 lascia carte alte un dito: si accorcia, e
     con lui i due spostamenti che dipendono dalla sua altezza. */
  .anim-scena { aspect-ratio: 4 / 3; }
  .anim-briscola { --salita: -80%; }
  .anim-pescare { --discesa: 31%; }
  .fila-carte { gap: .7rem; margin: 1.2rem 0; }
}