/* Il Sentiero — percorso a caselle (kids-path.js).

   I colori vengono dai token BRITANNICI (--bh-*), non da --accent: sono
   quelli che age-bands.css ridefinisce sotto html[data-age="kids"] e
   [data-age="junior"], quindi il Sentiero segue la pelle invece di
   ignorarla. Il primo tentativo usava var(--accent, ...) e le caselle
   uscivano del blu di sistema invece del rosso della bandiera — il ripiego
   dopo la virgola non serviva a niente, perche' --accent esiste comunque.

   L'ombra netta (--bh-shadow, 4px 5px 0 senza sfocatura) e' la firma della
   pelle bambini: e' un contorno da fumetto, non un'ombra realistica. */

#kids-path-screen .content { padding-bottom: 40px; }

.kp-loading { text-align: center; color: var(--text-muted); padding: 40px 0; }

.kp-head { text-align: center; margin: 8px 0 22px; }
.kp-head-title {
  font-family: var(--font-display, inherit);
  font-size: 1.6rem; font-weight: 800; color: var(--text);
}
.kp-head-sub { font-size: .84rem; color: var(--text-muted); margin-top: 2px; }
.kp-bar {
  height: 10px; border-radius: 999px; background: var(--bg-secondary);
  margin: 12px auto 6px; max-width: 320px; overflow: hidden;
}
.kp-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--bh-red, #e4002b); transition: width .35s ease;
}
.kp-stars { font-size: .8rem; font-weight: 700; color: var(--text-muted); }

/* ─── La mappa ─────────────────────────────────────────────────────────
   Il tabellone e' un CAMMINO, non una griglia. Sei pannelli in colonna, uno
   per tappa, ognuno col suo paesaggio inglese disegnato in SVG
   (`kids-path-map.js`), e le caselle appoggiate sul tracciato.

   I pannelli sono attaccati (nessun margine fra loro) perche' il sentiero
   esce dal fondo di uno ed entra in cima al successivo nello stesso punto:
   basta un pixel di spazio e il cammino si spezza sei volte. */
.kp-map { max-width: 420px; margin: 0 auto; }
/* Il paesaggio e' un'illustrazione, messa come sfondo dal JS. `cover` perche'
   il rapporto del file (9:16) e quello del pannello non coincidono: si taglia
   in alto e in basso, mai ai lati, e la fascia libera dove passa il cammino e'
   VERTICALE — quindi il taglio non la tocca mai. */
.kp-tappa {
  position: relative; line-height: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.kp-svg { display: block; width: 100%; height: auto; }
/* IL TABELLONE DEI MONDI (fascia ragazzi) non ha un'illustrazione sotto: il
   fondo, il terreno e il paesaggio stanno DENTRO l'SVG, disegnati da
   `junior-path-map.js`. La regola azzera lo sfondo invece di contare sul
   fatto che il JS non lo scriva: la fascia si cambia dalle Impostazioni a
   pagina aperta, e un `background-image` rimasto addosso mostrerebbe il
   prato inglese dei bambini dietro il mondo di un ragazzo. */
.kp-tappa--mondo {
  background-image: none !important;
  /* Il terreno del mondo, passato dal JS come proprieta' custom: chiude la
     cucitura di mezzo pixel fra due pannelli attaccati. Il ripiego non e'
     `transparent` ma il verde di partenza, cosi' anche prima che il JS scriva
     la variabile non si vede la pagina attraverso il tabellone. */
  background-color: var(--kp-terra, #7fa85a);
}

/* ─── IL PILOTA DIPINTO (2026-09-12) ───────────────────────────────────
   Un mondo puo' avere il paesaggio DIPINTO (sei immagini generate) e la sola
   STRADA in SVG sopra. Il dipinto sta qui come sfondo e non come <img> dentro
   l'SVG: `cover` assorbe cosi' lo 0,8% di scarto fra il rapporto del file
   (2:3) e quello del viewBox (320x484), e lo assorbe SOPRA e SOTTO — mai ai
   lati, dove il cammino scarta fino al 20% e all'80% della larghezza.
   `background-color` resta sotto: e' cio' che si vede nel mezzo pixel della
   cucitura e mentre l'immagine arriva. */
.kp-tappa--dipinta .kp-dipinto {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none;
}
/* La strada torna SOPRA il dipinto: dentro l'SVG di sotto e' gia' disegnata,
   ma li' e' coperta. Le due passate hanno la stessa curva perche' e' la
   stessa funzione — la geometria si importa, non si ricopia. */
.kp-tappa--dipinta .kp-strada { position: absolute; inset: 0; z-index: 2; }
/* IL RIPIEGO. Se il dipinto non arriva (offline, rete lenta, primo avvio: i
   dipinti stanno fuori dal precache) l'`onerror` mette questa classe, e il
   pannello torna a essere il paesaggio disegnato in SVG che gia' sta sotto.
   `smoke-kids.mjs` blocca le richieste dei dipinti e lo verifica: un ripiego
   che nessuno prova non e' un ripiego. */
.kp-tappa--ripiego .kp-dipinto,
.kp-tappa--ripiego .kp-strada { display: none; }
/* LA CUCITURA, E PERCHE' QUI NON C'E' NIENTE.
   Prima stesura: una sfumatura di 14px in cima e in fondo a ogni pannello,
   verso `--kp-terra`, per chiudere cio' che due dipinti diversi non possono
   chiudere. Sembrava prudente. GUARDATA a schermo, era il difetto: il terreno
   del mondo e' un verde chiaro (#7fa85a) e il bordo dei dipinti e' giungla
   scura, quindi la velatura non nascondeva la giuntura, la DISEGNAVA — cinque
   bande giallo-verdi larghe quanto lo schermo, esattamente cio' che la
   cucitura in SVG aveva gia' fatto una volta.
   Confrontati i due resi affiancati (`scratchpad/shots/cucitura.png` e
   `cucitura-senza.png`): senza velatura le cinque giunzioni non si vedono.
   Il lavoro lo fanno i PROMPT — vista ripida dall'alto, niente cielo e niente
   orizzonte, stessa vegetazione nella stessa tinta sul bordo alto e su quello
   basso, e il pannello 1 passato come riferimento agli altri cinque: due
   bordi di giungla che si toccano sono giungla, non una giuntura.
   Regola che ne esce, e vale oltre questo caso: una velatura di TINTA PIATTA
   sopra un dipinto non chiude una cucitura, la mette in evidenza. La
   continuita' si ottiene nel disegno o non si ottiene.
   `background-color: var(--kp-terra)` resta e basta: serve nel mezzo pixel di
   arrotondamento e finche' l'immagine non e' arrivata. */

/* Il nome della tappa, appoggiato in alto sul paesaggio. In inglese, con
   l'italiano sotto: il Sentiero e' un corso d'inglese, non solo un gioco. */
/* Il cartello va dalla parte dove il sentiero NON passa (lo decide
   latoCartello()): al centro copriva il cammino e la prima casella. */
.kp-tappa-nome {
  position: absolute; top: 8px;
  z-index: 3; text-align: center; line-height: 1.15; pointer-events: none;
  background: #fffdf6; border: 2.5px solid #10202f; border-radius: 12px;
  box-shadow: 2px 3px 0 #10202f; padding: 4px 12px; white-space: nowrap;
}
.kp-tappa-nome--sx { left: 10px; }
.kp-tappa-nome--dx { right: 10px; }
.kp-tappa-en { display: block; font-weight: 800; font-size: .84rem; color: #10202f; }
.kp-tappa-it { display: block; font-weight: 700; font-size: .68rem; color: #5b6672; }

/* Le caselle stanno SOPRA il disegno, centrate sul nodo del tracciato. La
   posizione arriva come stile inline da kids-path.js, che la chiede a
   nodoPct(): la stessa funzione che disegna la curva, cosi' la casella non
   puo' finire fuori dal sentiero. */
.kp-sq {
  position: absolute; transform: translate(-50%, -50%);
  width: 42px; height: 42px; z-index: 2;
  border-radius: 50%; border: 3px solid var(--bh-border, #10202f);
  background: #fffdf6; color: #10202f;
  font-weight: 800; font-size: .92rem; cursor: default;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0; line-height: 1;
  box-shadow: 2px 3px 0 rgba(16, 32, 47, .55);
}
.kp-sq.is-done   { background: var(--bh-red, #e4002b); color: #fff; }
/* Il grigio del BLOCCATO era #9aa7b4: misurato 2,45:1 su bianco e 1,70:1 sul
   giallo del premio — cioe' illeggibile, non «spento». Sul bianco basta
   scurirlo; sul GIALLO nessun grigio arriva a 4,5, quindi li' il numero e'
   d'inchiostro e a spegnere la casella ci pensano il fondo e l'ombra.
   Misurato con `node scripts/audit-contrast.mjs`. */
.kp-sq.is-locked { background: #fffdf6; color: #616f80; box-shadow: 1px 2px 0 rgba(16,32,47,.3); }
.kp-sq.is-next {
  cursor: pointer; z-index: 4; background: #ffd23f;
  animation: kp-pulse 1.6s ease-in-out infinite;
}
@keyframes kp-pulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .kp-sq.is-next { animation: none; }
  .kp-bar > span { transition: none; }
}

/* Il premio chiude la tappa: e' un traguardo, quindi si vede da lontano. */
.kp-sq.kp-premio {
  width: 56px; height: 56px; background: #ffd23f; color: #10202f;
  border-width: 3.5px; box-shadow: 3px 4px 0 #10202f;
}
.kp-sq.kp-premio .kp-sq-face {
  font-size: .5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .04em;
}
.kp-sq.kp-premio.is-done { background: var(--bh-red, #e4002b); color: #fff; }

/* Jeremy sulla casella corrente: e' il "sei qui". `position:absolute` dentro
   il cerchio con la testa che SBORDA in alto — se stesse dentro sarebbe un
   francobollo. L'immagine e' pointer-events:none, altrimenti su iOS il tap
   sull'ala non apre la casella. */
.kp-sq { overflow: visible; }
.kp-qui {
  position: absolute; left: 50%; bottom: 40%;
  width: auto; height: 132%; transform: translateX(-50%);
  pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
/* LA GUIDA DEI RAGAZZI E' UN <svg>, NON UN <img>, e porta la STESSA classe:
   il posizionamento sopra la casella resta scritto in un posto solo. Le due
   righe qui sotto sono le sole differenze, e sono quelle che un <img> aveva
   gratis — un <svg> senza `height` esplicita collassa, e senza `overflow`
   visibile il disegno viene tagliato dal suo stesso riquadro.
   Piu' alta dell'immagine di Scott (168% contro 132%) perche' la figura e'
   una PERSONA INTERA e non un animaletto accovacciato: alla stessa altezza
   la testa arrivava al bordo della casella e si leggeva come un francobollo. */
.kp-qui--svg { height: 168%; overflow: visible; }
/* La guida DIPINTA: stessa altezza della figura SVG (168%), perche' e' la
   stessa cosa — una persona intera, non un animaletto accovacciato. Il file
   e' gia' ritagliato sul disegno da `gen_assets.py` (`Image.getbbox()`), ed
   e' il motivo per cui questa altezza vale: su una tela con il vuoto intorno
   il CSS dimensionerebbe la TELA e la figura uscirebbe grande la meta'. */
.kp-qui--dipinta {
  height: 168%;
  /* E DUE OMBRE, NON UNA. Scott ha un'ombra scura perche' cammina su un
     prato chiaro; Nadia cammina anche sul verde cupo della foresta di felci,
     e li' un'ombra scura sotto una figura in kaki e verde non stacca niente —
     misurato guardandola sul pannello 3. Prima un alone CHIARO sottile (e'
     lui a disegnare la silhouette, che e' l'unica cosa leggibile a 70px),
     poi l'ombra scura che la appoggia alla casella. Nessuna delle due da sola
     funziona su tutti e sei i pannelli, ed e' lo stesso motivo per cui la
     strada ha un contorno scuro E un corpo chiaro. */
  filter: drop-shadow(0 0 2px rgba(255, 253, 246, .95))
          drop-shadow(0 2px 3px rgba(16, 32, 47, .45));
}

/* La coccarda del premio, al posto dell'adesivo del cast. Le misure sono
   quelle di `.kp-premio-img` perche' occupa lo stesso posto nella scheda. */
.kp-premio-svg { display: block; width: 132px; height: auto; margin: 0 auto 10px; }
/* Nell'album la coccarda e' senza nastro (`compatta`) e riempie il cerchio:
   con il nastro il cerchio lo tagliava a meta'. */
.kp-sticker .kp-premio-svg { width: 100%; height: 100%; margin: 0; }
/* Sulla casella corrente il numero NON si dipinge: sopra c'e' Scott, e un
   numero al 28% non e' un numero attenuato, e' una macchia — 1,66:1, il solo
   difetto rimasto all'audit del 2026-08-30. La regola del progetto e' che una
   riga secondaria si spegne col COLORE, mai con la trasparenza; qui non c'e'
   nessun colore che vada bene, perche' il testo dev'essere ASSENTE.
   `opacity: 0` e non `visibility: hidden`: il numero resta nell'albero di
   accessibilita' e quindi il pulsante conserva il suo nome («8»), che e'
   l'unica cosa che lo distingue dalle altre 65 per chi non vede Jeremy. */
.kp-sq.is-next .kp-sq-face { opacity: 0; }

.kp-card {
  margin: 26px auto 0; max-width: 460px; background: var(--bh-paper, var(--card));
  border: 2.5px solid var(--bh-border, var(--border));
  border-radius: var(--bh-radius, 18px); padding: 20px 18px;
  box-shadow: var(--bh-shadow, none);
}
.kp-q { font-size: 1.15rem; font-weight: 700; text-align: center; color: var(--text); line-height: 1.4; }
/* «Ti ricordi?»: l'etichetta della prova di ripasso. Colore pieno e non
   opacita' — una riga secondaria spenta con la trasparenza prende il
   contrasto da cio' che ha sotto, ed e' la causa che ha generato la meta'
   dei difetti trovati dall'audit del 2026-08-29. */
.kp-ripasso {
  text-align: center; margin-bottom: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bh-red-testo, #b8000f);
}
.kp-listen {
  display: block; margin: 12px auto 0; padding: 8px 18px; border-radius: 999px;
  border: 2px solid var(--border); background: var(--bg-secondary);
  color: var(--text); font-weight: 700; font-size: .84rem; font-family: inherit; cursor: pointer;
}
.kp-opts { display: grid; gap: 10px; margin-top: 18px; }
.kp-opt {
  padding: 14px 12px; border-radius: var(--bh-radius-sm, 14px);
  border: 2.5px solid var(--bh-border, var(--border));
  background: var(--bh-paper, var(--bg-secondary)); color: var(--bh-text, var(--text));
  box-shadow: var(--bh-shadow-sm, none);
  font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.kp-opt:disabled { cursor: default; }
.kp-opt.is-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.kp-opt.is-ko { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; opacity: 1; }
/* LA CORREZIONE — «Bravo!» e «Quasi!».
   I due colori erano scritti a mano (#16a34a e #dc2626) e non seguivano
   niente: il verde faceva 3,30:1 sulla carta bianca della pelle bambini e il
   rosso 3,15:1 sulla card notturna. Sono le DUE righe che un bambino legge
   dopo ogni singola risposta — trecento volte in una tappa — ed erano le meno
   leggibili della schermata. Ora usano i token di TESTO, che sono tarati sul
   tema e sulla superficie peggiore: `--success-testo` (8,2:1 di giorno,
   8,7 di notte) e `--bh-red-testo` (5,48 / 5,59). Misurato il 2026-08-31 con
   `node scripts/audit-contrast.mjs` negli stati `prova-ko` e `intruso`. */
.kp-fb { min-height: 22px; margin-top: 12px; text-align: center; font-size: .88rem; }
.kp-fb-ok { color: var(--success-testo, #10592a); font-weight: 800; }
.kp-fb-ko { color: var(--bh-red-testo, #b8000f); font-weight: 700; }
.kp-tip { color: var(--text-muted); }

/* ─── I due gesti YLE: figura e intruso ────────────────────────────────
   Le figure vengono dai paper Cambridge (tabella in kids-figure.js) e sono
   fotografie o disegni su fondo chiaro: `object-fit: contain` le mostra
   INTERE, perche' una figura d'esame ritagliata a meta' e' una domanda a cui
   non si puo' rispondere. Il riquadro sotto e' un token, non un bianco
   scritto a mano: se il testo segue il tema, la superficie sotto deve
   seguirlo (regola dell'audit del 2026-08-29).
   Nessuna opacita' e nessun colore in linea nel JS: i pulsanti sono gli
   stessi `.kp-opt` di tutte le altre prove, quindi ereditano gia' `is-ok` e
   `is-ko` e non hanno bisogno di stati propri. */
.kp-fig-img {
  display: block; width: 100%; max-width: 240px; margin: 16px auto 0;
  aspect-ratio: 1 / 1; object-fit: contain;
  border: 2.5px solid var(--bh-border, var(--border));
  border-radius: var(--bh-radius-sm, 14px);
  background: var(--bh-paper-2, var(--bg-secondary));
}
.kp-figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.kp-opt--fig { padding: 8px; }
.kp-opt--fig img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: 10px; background: var(--bh-paper-2, var(--bg-secondary));
}

/* ─── I due gesti YLE del passo 4: ascolta e pronuncia ─────────────────
   ASCOLTA. La frase non e' a schermo: c'e' solo la domanda e i tre pulsanti.
   La rivelazione (.kp-rivela) compare DOPO la risposta e porta la frase
   inglese, che fino a quel momento si era solo sentita — e' il momento in cui
   uno sbaglio insegna qualcosa, quindi si legge grande, come la rivelazione
   di Lampo che fa lo stesso mestiere. Nasce con l'attributo `hidden` e si
   accende togliendolo, mai con lo stile: e' la regola del progetto.
   Tinta piena e non opacita' (regola dell'audit 2026-08-29). */
.kp-rivela {
  margin-top: 14px; padding: 10px 12px; text-align: center;
  border-radius: var(--bh-radius-sm, 14px);
  background: var(--bh-paper-2, var(--bg-secondary));
  font-size: 1.02rem; font-weight: 800; line-height: 1.4;
  color: var(--bh-text, var(--text));
}

/* PRONUNCIA. La parola e' la protagonista, quindi e' grande; la traduzione la
   accompagna piu' piccola e in tinta piena. I due pulsanti stanno FIANCO A
   FIANCO — «Parla» pieno, «Salta» leggero — perche' saltare non e' un ripiego
   nascosto in fondo: e' una possibilita' dichiarata, sempre a portata di dito
   (piano §1, decisione di Ciro). «Salta» resta comunque un bordo e non un
   fantasma: un bottone che si legge male e' un bottone che un bambino non
   trova proprio quando gli serve. */
.kp-pron { margin-top: 16px; text-align: center; }
.kp-pron-parola {
  font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: .01em;
  color: var(--bh-text, var(--text));
}
.kp-pron-it {
  margin-top: 4px; font-size: .95rem; font-weight: 600; font-style: italic;
  color: var(--text-muted);
}
.kp-pron-bottoni {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 4px;
}
.kp-pron-mic:disabled { background: var(--bh-paper-2, var(--bg-secondary)); color: var(--text-muted); }
.kp-pron-salta {
  margin-top: 16px; padding: 12px 22px; border-radius: 999px;
  border: 2.5px solid var(--bh-border, var(--border));
  background: var(--bh-paper, var(--card)); color: var(--bh-text, var(--text));
  font-weight: 700; font-size: .9rem; font-family: inherit; cursor: pointer;
}
.kp-pron-salta:disabled { cursor: default; color: var(--text-muted); }
/* La riga di stato dice sempre cosa sta succedendo — «Parla adesso», «Ti
   sento: ...», «Va bene, la prossima volta!». Ha un'altezza minima cosi' la
   scheda non salta quando compare. */
.kp-pron-stato {
  min-height: 22px; margin-top: 12px;
  font-size: .92rem; font-weight: 700; line-height: 1.4;
  color: var(--bh-text, var(--text));
}

.kp-card--premio { text-align: center; }
.kp-premio-img {
  display: block; margin: 0 auto 12px; height: 150px; width: auto;
  max-width: 100%;
}
.kp-premio-img.is-wide {
  height: auto; width: 100%; border-radius: 14px;
}
.kp-premio-t { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.5; }
.kp-go {
  margin-top: 16px; padding: 12px 28px; border-radius: 999px; border: none;
  background: var(--bh-red, #e4002b); color: #fff; font-weight: 800;
  box-shadow: var(--bh-shadow-sm, none);
  font-size: .95rem; font-family: inherit; cursor: pointer;
}
.kp-finito { text-align: center; font-weight: 800; margin-top: 22px; color: var(--text); }

/* ─── L'episodio della storia ──────────────────────────────────────────
   «Il biglietto d'oro»: la storia APRE e CHIUDE ogni giornata (kids-story.js,
   docs/sentiero-2-plan.md §5). E' la ragione per cui un bambino torna domani,
   quindi ha l'aria di un fumetto e non di una scheda: vignetta larga quanto
   la card, racconto in italiano, battuta inglese in una nuvoletta.

   Nessun colore in linea nel markup generato dal JS: qui, e solo qui, si
   decidono le tinte — cosi' i tre temi (chiaro, carta, scuro) le seguono. */
.kp-card--storia { text-align: center; }
.kp-ep-vignetta {
  display: block; width: 100%; height: auto; margin: 0 0 14px;
  border: 2.5px solid var(--bh-border, var(--border));
  border-radius: 14px; background: var(--bg-secondary);
}
.kp-ep-racconto {
  margin: 0; text-align: left; font-size: 1rem; line-height: 1.6;
  color: var(--text);
}
/* Le caselle-premio portano l'episodio DOPPIO (4-6 frasi): piu' testo vuole
   piu' respiro, non un corpo piu' piccolo. */
.kp-card--storia.is-doppio .kp-ep-racconto { line-height: 1.68; }

.kp-ep-battuta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 18px;
}
.kp-ep-chi {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bh-red-testo, #b8000f);
}
/* La nuvoletta e' una superficie FISSA (carta bianca in tutti e tre i temi),
   quindi il testo dev'essere fisso anche lui: --cm-ink-carta e' il token nato
   apposta per questo caso. Un `color` che seguisse il tema diventerebbe chiaro
   su bianco la notte — e' la trappola gia' pagata sui gettoni gialli. */
.kp-ep-bolla {
  position: relative; display: inline-block; max-width: 92%;
  background: #fff; color: var(--cm-ink-carta, #10202f);
  border: 3px solid var(--cm-ink-carta, #10202f); border-radius: 16px;
  padding: 12px 16px; font-size: 1.05rem; font-weight: 700; line-height: 1.4;
  box-shadow: 3px 4px 0 var(--cm-ink-carta, #10202f);
}

/* La chiusura: il gancio e il «Domani: ...». Il teaser e' la riga secondaria e
   si spegne col COLORE, mai con l'opacita' — una riga trasparente prende il
   contrasto da cio' che ha sotto. */
.kp-card--gancio { text-align: center; }
.kp-ep-gancio {
  margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.55;
  color: var(--text);
}
.kp-ep-teaser {
  margin: 14px 0 0; font-size: .84rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--bh-gold-testo, #7d5f10);
}

/* ─── La missione, le consegne, la cornice del gioco ───────────────────
   Passo 2-bis: «come se il bambino partecipasse alla storia risolvendo gli
   esercizi» (Ciro). Sono tre superfici della STESSA voce — quella che
   racconta — e per questo condividono il gettone dorato: il bambino impara a
   riconoscere «questa riga e' la storia che mi parla», e le distingue dalla
   domanda, che e' l'esercizio.

   Nessuna riga si spegne con l'opacita': il colore e' pieno (regola pagata
   dall'audit del 2026-08-29 — una riga trasparente prende il contrasto da
   cio' che ha sotto). E nessun colore in linea nel markup del JS: tutto qui,
   cosi' i tre temi lo seguono. */
.kp-missione {
  margin: 0 0 14px; padding: 10px 12px;
  border-left: 4px solid var(--bh-gold, #ffd23f);
  border-radius: 0 10px 10px 0;
  background: var(--bh-paper-2, var(--bg-secondary));
  text-align: left;
}
.kp-missione--grande { margin: 18px 0 0; }
.kp-missione-eti {
  display: block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bh-gold-testo, #7d5f10);
}
.kp-missione-t {
  display: block; font-size: .95rem; font-weight: 700; line-height: 1.45;
  color: var(--text);
}
/* La consegna sta SOPRA la domanda ed e' la voce del personaggio: corsivo,
   corpo piu' piccolo, colore pieno. La gerarchia la fanno corpo e stile, mai
   la trasparenza. */
.kp-consegna {
  text-align: center; margin: 0 0 8px;
  font-size: .92rem; font-style: italic; font-weight: 600; line-height: 1.4;
  color: var(--bh-gold-testo, #7d5f10);
}
/* La cornice del gioco: stessa voce della missione, ma e' l'ultimo momento
   della giornata e puo' respirare di piu'. */
.kp-cornice {
  margin: 0 0 14px; padding: 10px 12px;
  border-left: 4px solid var(--bh-gold, #ffd23f);
  border-radius: 0 10px 10px 0;
  background: var(--bh-paper-2, var(--bg-secondary));
  text-align: left; font-size: .95rem; font-weight: 700; line-height: 1.45;
  color: var(--text);
}

/* La REGOLA LAMPO del gesto `grammatica`: la spiegazione di una riga che
   precede la frase da completare, e che ricompare nella correzione quando si
   sbaglia.
   Il riquadro e' quello della missione e della cornice — bordo a sinistra,
   superficie secondaria — ma in ROSSO bandiera invece che in oro: e' l'unico
   momento della giornata in cui si spiega qualcosa, e deve distinguersi a
   colpo d'occhio dalla domanda che ha sotto. Il rosso dei BORDI e' `--bh-red`
   (quello della bandiera, non si tocca), il rosso delle SCRITTE e'
   `--bh-red-testo`, che di notte si schiarisce: sono due mestieri e due token,
   ed erano stati confusi in uno solo (audit del 2026-08-30).
   Il testo e' pieno e non trasparente, e la superficie segue il tema come il
   testo: una riga spenta con l'opacita' prende il contrasto da cio' che ha
   sotto. */
.kp-flash {
  margin: 0 0 14px; padding: 10px 12px;
  border-left: 4px solid var(--bh-red, #e4002b);
  border-radius: 0 10px 10px 0;
  background: var(--bh-paper-2, var(--bg-secondary));
  text-align: left;
}
.kp-flash-eti {
  display: block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bh-red-testo, #b8000f);
}
.kp-flash-t {
  display: block; font-size: .95rem; font-weight: 700; line-height: 1.45;
  color: var(--text);
}

/* ─── I tre gesti d'esame del passo 4 dei ragazzi ──────────────────────
   TRASFORMA, SCOVA, LEGGI. Sono i formati del Preliminary e del First for
   Schools, e si vedono solo dalla fascia ragazzi su un tabellone B1/B2.
   Nessuna regola qui nasconde o mostra: la visibilita' la decidono i dati
   (`GESTI_SOLO_ALTO` in kids-path-tasks.js), come per tutti gli altri gesti.

   Tre regole della casa rispettate alla lettera, e vale la pena dire quali
   perche' sono esattamente quelle gia' pagate altrove:
   (1) nessuna riga secondaria spenta con l'opacita' — si spegne col COLORE,
       perche' l'opacita' fa dipendere il contrasto da cio' che c'e' sotto;
   (2) nessuna superficie chiara scritta a mano sotto testo che segue il tema:
       si usano i token, che di notte si ridefiniscono da soli;
   (3) niente colore in linea dal JavaScript: qui tutto passa da una classe. */

/* IL BRANO di `leggi`. E' un TESTO da leggere, non una card: allineato a
   sinistra, interlinea alta, corpo pieno. Il bordo a sinistra e l'occhiello
   sono gli stessi della regola lampo (.kp-flash), e non e' pigrizia: i due
   blocchi fanno lo stesso mestiere — «questo e' il materiale, la domanda
   viene dopo» — e due grammatiche diverse per la stessa funzione insegnano
   due cose dove ce n'e' una. */
.kp-brano {
  margin: 0 0 14px; padding: 12px 14px;
  border-left: 4px solid var(--bh-navy, #0a1f3d);
  border-radius: 0 10px 10px 0;
  background: var(--bh-paper-2, var(--bg-secondary));
  text-align: left;
}
.kp-brano-eti {
  display: block; margin-bottom: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bh-navy-testo, var(--text-muted));
}
.kp-brano-t {
  margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text);
}

/* SCOVA. Le parole della frase SONO i pulsanti, quindi il contenitore deve
   comportarsi come un testo e andare a capo: una griglia a una colonna
   (`.kp-opts`) impilerebbe una frase di dieci parole in dieci righe, e
   nessuno la leggerebbe piu' come una frase. La regola sovrascrive
   `display: grid` di `.kp-opts` perche' il pulsante resta lo stesso `.kp-opt`
   — la correzione, `is-ok` e `is-ko` arrivano gratis da li'. */
.kp-opts--parole {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin-top: 18px;
}
.kp-opt--parola { padding: 9px 11px; font-size: .98rem; }

/* TRASFORMA. La parola chiave sta in un gettone perche' e' un VINCOLO e non
   un suggerimento: in mezzo a una riga di prosa si legge come un aiuto, e
   l'esame la da' proprio come regola («senza cambiarla»). Il campo di testo
   cresce con la riga e non e' mai piu' stretto di otto caratteri, o su un
   telefono la risposta finisce sotto il dito. */
.kp-tra { margin-top: 16px; text-align: left; }
.kp-tra-lead {
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: var(--bh-radius-sm, 14px);
  background: var(--bh-paper-2, var(--bg-secondary));
  font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--text);
}
.kp-tra-chiave {
  display: inline-block; margin: 0 0 12px; padding: 5px 14px;
  border-radius: 999px;
  background: var(--bh-gold, #ffc72c); color: var(--bh-gold-testo, #10202f);
  border: 2.5px solid var(--bh-border, var(--border));
  font-size: .82rem; font-weight: 800; letter-spacing: .08em;
}
.kp-tra-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 0 0 14px; font-size: 1rem; line-height: 1.8; color: var(--text);
}
.kp-tra-fisso { font-weight: 700; }
.kp-tra-in {
  flex: 1 1 8ch; min-width: 8ch;
  padding: 7px 10px; border-radius: 10px;
  border: 2.5px solid var(--bh-border, var(--border));
  background: var(--bh-paper, var(--bg-secondary));
  color: var(--bh-text, var(--text));
  font-family: inherit; font-size: 1rem; font-weight: 700;
}
.kp-tra-in:disabled { cursor: default; }

/* ─── La giornata ──────────────────────────────────────────────────────
   Una casella e' un giorno: quattro prove e un gioco. I bollini in cima
   dicono a che punto si e': senza, un bambino non sa se ne mancano una o
   quattro, e "quanto manca" e' meta' della voglia di finire. */
.kp-giorno-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.kp-giorno-n { font-weight: 800; font-size: .82rem; color: var(--text-muted); }
.kp-bollini { display: inline-flex; gap: 6px; }
.kp-bollino {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2.5px solid var(--bh-border, #10202f); background: #fff;
}
.kp-bollino.is-fatto { background: #17a398; }
.kp-bollino.is-ora   { background: #ffc72c; transform: scale(1.25); }

/* Oggi e' fatta: si dice, e si dice QUALE casella aspetta. "Torna domani" da
   solo sembra un errore; con il numero e' una promessa. */
.kp-domani {
  margin: 10px auto 0; max-width: 320px; padding: 7px 12px;
  border: 2.5px solid #d8a400; border-radius: 12px; background: #fff6dc;
  font-size: .82rem; font-weight: 800; color: #8a6500;
}

/* Abbinare: due colonne, si tocca a sinistra e poi a destra. */
.kp-abb { display: flex; gap: 10px; }
.kp-abb-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kp-abb-b {
  padding: 11px 8px; border-radius: 12px; font-weight: 700; font-size: .92rem;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card));
  color: var(--bh-text, var(--text)); font-family: inherit; cursor: pointer;
}
.kp-abb-b.is-sel   { background: #ffc72c; }
/* LA COPPIA GIA' TROVATA. Era `#fff` su `#17a398` con `opacity: .55`, cioe'
   1,42:1 — la parola spariva nel momento esatto in cui il bambino l'ha
   indovinata, che e' l'unico momento in cui gli serve rileggerla per
   ricordarsela. Due errori sovrapposti, tutti e due gia' scritti nelle regole
   di casa: una riga si spegne col COLORE e mai con l'opacita', e sopra una
   superficie FISSA (questo verde non gira col tema) il testo dev'essere fisso
   anche lui — `--cm-ink-carta` e' il token nato per quello. L'inchiostro sul
   verde fa 5,36:1. «Fatta» si vede lo stesso: a dirlo e' il verde pieno al
   posto della carta, non lo sbiadire. */
.kp-abb-b.is-fatta { background: #17a398; color: var(--cm-ink-carta, #10202f); cursor: default; }
.kp-abb-b.is-ko    { background: #e4002b; color: #fff; }

/* Ordinare e scrivere: la riga che si compone in alto, il serbatoio sotto.
   Toccare di nuovo una parola gia' usata la rimette a posto — senza, un
   bambino che sbaglia il primo pezzo deve ricominciare da capo. */
.kp-ord-riga, .kp-scr-riga {
  min-height: 46px; margin-bottom: 12px; padding: 10px 12px;
  border: 2.5px dashed var(--bh-border, #10202f); border-radius: 12px;
  font-weight: 800; font-size: 1.02rem; color: var(--bh-text, var(--text));
}
.kp-scr-riga { letter-spacing: .12em; text-transform: lowercase; }
.kp-ord-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kp-ord-w {
  padding: 9px 13px; border-radius: 11px; font-weight: 800; font-size: .96rem;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card));
  color: var(--bh-text, var(--text)); font-family: inherit; cursor: pointer;
}
.kp-lettera { min-width: 40px; text-transform: lowercase; }
/* LA PAROLA GIA' MESSA IN FILA. `opacity: .3` la portava a 2,55:1 nel tema
   scuro, ed e' un pulsante ANCORA VIVO: toccarlo la rimette nel serbatoio, ed
   e' l'unico modo che ha un bambino di correggersi senza ricominciare. Un
   comando che si deve poter premere e non si riesce a leggere non e' spento,
   e' rotto — e l'esenzione WCAG dei controlli disabilitati non lo copre,
   perche' disabilitato non e'. Si spegne col COLORE (il muted della fascia,
   5,6-6,1:1 sulle tre superfici) e il tratteggio dice «questa e' andata di
   la'» meglio di quanto lo dicesse la trasparenza. */
.kp-ord-w.is-usata {
  background: var(--bh-paper-2, var(--bg-secondary));
  color: var(--bh-text-muted, var(--text-muted));
  border-style: dashed;
}

/* Memoria: le tessere si scoprono a coppie. */
/* Le colonne le decide il gioco (`--col`): piu' si sale di gradino piu' sono
   le tessere. E' FLEX e non grid per una ragione sola: agli ultimi due
   gradini le coppie sono sette, cioe' quattordici tessere, e quattordici non
   riempiono una griglia da quattro — l'ultima riga ne ha due. In grid quelle
   due restano incollate a sinistra e leggono come un errore di disegno (era
   il motivo per cui il memory si fermava a sei coppie); in flex con
   `justify-content: center` stanno in mezzo. Sulle righe piene il centraggio
   non fa nulla, quindi tutti i conteggi precedenti restano identici. */
.kp-mem {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.kp-mem-t {
  flex: 0 0 calc((100% - (var(--col, 4) - 1) * 8px) / var(--col, 4));
  aspect-ratio: 1; border-radius: 12px; font-family: inherit; cursor: pointer;
  border: 2.5px solid var(--bh-border, #10202f); background: #012169;
  display: flex; align-items: center; justify-content: center; padding: 4px;
}
.kp-mem-t > span { font-size: .72rem; font-weight: 800; color: #fff; opacity: 0; }
.kp-mem-t.is-aperta { background: var(--bh-paper, var(--card)); }
.kp-mem-t.is-aperta > span { opacity: 1; color: var(--bh-text, var(--text)); }
.kp-mem-t.is-presa  { background: #17a398; }
/* Stessa storia di `.kp-abb-b.is-fatta`, e stessa cura: il bianco su questo
   verde acqua fa 3,12:1 anche a piena opacita'. La tessera vinta di Coppie
   porta la parola che si e' appena abbinata, quindi e' testo da leggere e non
   una decorazione. Il verde e' una superficie FISSA, percio' il testo e'
   l'inchiostro fisso: 5,36:1. (Le tessere dell'impiccato hanno lo stesso
   verde ma sono `disabled`, e per WCAG 1.4.3 non hanno requisito.) */
.kp-mem-t.is-presa > span { opacity: 1; color: var(--cm-ink-carta, #10202f); }

.kp-lampo-conta { margin-top: 10px; font-size: .8rem; font-weight: 800; color: var(--text-muted); }

/* ─── Il tempo di Lampo (solo cinque stelle) ───────────────────────────
   L'unico cronometro dei giochi. Sta SOPRA i pulsanti perche' e' li' che si
   guarda mentre si sceglie, e porta i secondi scritti accanto alla barra: il
   numero e' cio' che resta leggibile quando il movimento e' spento.
   La transizione vive dentro `prefers-reduced-motion: no-preference` — chi ha
   chiesto meno movimento vede la barra scendere a scatti di un secondo, che
   e' la stessa informazione senza l'animazione. */
.kp-timer {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 12px;
}
.kp-timer-pista {
  flex: 1; height: 12px; border-radius: 999px; overflow: hidden;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card));
}
.kp-timer-barra {
  display: block; height: 100%; width: 100%; background: #17a398;
}
@media (prefers-reduced-motion: no-preference) {
  .kp-timer-barra { transition: width 1s linear; }
}
.kp-timer-sec {
  min-width: 1.6em; text-align: right;
  font-size: .96rem; font-weight: 900; color: var(--bh-text, var(--text));
  font-variant-numeric: tabular-nums;
}
/* Scaduto: si tinge la PISTA, e la barra resta vuota. Colore pieno, mai
   opacita' (regola del progetto). Il bianco sopra il rosso bandiera e' la
   coppia gia' misurata a 4,85:1, quindi la striscia si vede in tutti e tre i
   temi senza dipendere dal fondo della scheda. */
.kp-timer.is-scaduto .kp-timer-pista { background: var(--bh-red, #e4002b); }
.kp-timer.is-scaduto .kp-timer-barra { transition: none; }
.kp-timer.is-scaduto .kp-timer-sec { color: var(--bh-red-testo, #e4002b); }
/* ─── Il BONUS di tempo sulle prove (fascia ragazzi) ───────────────────
   Stessa barra di Lampo, altro mestiere: qui il tempo si GUADAGNA, non si
   perde. Per questo ha un'etichetta che lo dice («+1 se rispondi ora») e non
   ha il rosso: allo scadere la pista diventa NEUTRA — cioe' spenta, non
   allarmata — e i pulsanti restano vivi.
   L'etichetta e' testo pieno e non trasparente: una riga secondaria si spegne
   col COLORE, mai con l'opacita' (regola del progetto). */
.kp-timer.is-bonus { flex-wrap: wrap; }
.kp-timer-eti {
  flex: 1 0 100%;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
  color: var(--bh-gold-testo, #8a6a00);
}
.kp-timer.is-bonus .kp-timer-barra { background: var(--bh-gold, #ffc72c); }
.kp-timer.is-bonus.is-scaduto .kp-timer-pista { background: var(--bh-paper, var(--card)); }
.kp-timer.is-bonus.is-scaduto .kp-timer-sec,
.kp-timer.is-bonus.is-scaduto .kp-timer-eti { color: var(--text-muted); }
/* Il «+1 velocita'» nella riga della correzione: e' il premio, quindi si
   vede. Sta accanto a «Bravo!» e non al posto suo — la prima cosa da sapere
   resta se la risposta era giusta. */
.kp-bonus {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; border: 2px solid var(--bh-border, #10202f);
  background: var(--bh-gold, #ffc72c); color: var(--cm-ink-carta, #10202f);
  font-size: .78rem; font-weight: 900;
}

/* «Tempo!» — sbagliata gentile: si dice cosa era, non che si e' persa. */
.kp-lampo-scaduto {
  margin-bottom: 10px; text-align: center;
  font-size: .95rem; font-weight: 800; color: var(--bh-red-testo, #e4002b);
}

/* La parola inglese svelata dopo la risposta, in modalita' traduzione: e' la
   sola volta in cui si vede scritta cio' che si e' sentito, quindi si legge
   grande. Tinta piena e non opacita': una riga trasparente prende il
   contrasto da cio' che ha sotto (regola del progetto). */
.kp-lampo-rivela {
  margin-top: 10px; text-align: center; font-size: 1.15rem; font-weight: 800;
  color: var(--bh-text, var(--text)); letter-spacing: .01em;
}

/* ─── L'album degli sticker ────────────────────────────────────────────
   Le sagome vuote ci sono apposta: un album che mostra solo cio' che hai
   gia' preso non fa venire voglia di tornare. */
.kp-album { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.kp-sticker {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--bh-border, #10202f);
  display: flex; align-items: center; justify-content: center;
}
.kp-sticker.is-preso { background: #ffd23f; box-shadow: 2px 3px 0 var(--bh-border, #10202f); }
.kp-sticker.is-preso img { width: 100%; height: 100%; object-fit: cover; }
.kp-sticker.is-vuoto { background: #e8edf2; border-style: dashed; border-color: #8895a5; }
.kp-sticker-n { font-size: .74rem; font-weight: 800; color: #596677; }
/* «Hai vinto lo sticker!» — la riga piu' festosa di tutto il Sentiero, e nel
   tema scuro misurava 2,20:1: illeggibile. Il rosso era scritto a mano
   (#b8000f, tarato su carta chiara) e quindi non si schiariva mai. Adesso e'
   il token di TESTO, che di notte diventa #ff6b7a. Si vede una volta ogni
   undici giorni: se non si semina lo stato, nessun referto la incontra mai. */
.kp-sticker-vinto { margin-top: 8px; font-weight: 800; color: var(--bh-red-testo, #b8000f); font-size: .88rem; }

/* Memory dei personaggi: le tessere portano le facce, e ogni coppia trovata
   vince una parola inglese (l'idea e' di Ciro: il premio insegna). */
.kp-mem--facce .kp-mem-t { padding: 0; overflow: hidden; }
.kp-mem--facce .kp-mem-t img {
  width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .12s;
  background: #fffdf6;
}
.kp-mem--facce .kp-mem-t.is-aperta img,
.kp-mem--facce .kp-mem-t.is-presa img { opacity: 1; }
.kp-bottino { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.kp-parola-vinta {
  padding: 5px 10px; border-radius: 999px; background: #ffd23f;
  border: 2.5px solid var(--bh-border, #10202f);
  font-size: .8rem; font-weight: 700; color: #10202f;
}
.kp-parola-vinta b { font-weight: 900; }
/* L'italiano si stacca dall'inglese con una barretta e un peso diverso: in
   grassetto uno dietro l'altro «great grande» leggeva come una frase sola, e
   la parola vinta e' il premio — se non si capisce dove finisce l'inglese, il
   premio non insegna niente. */
/* Tinte piene e non opacita', anche qui dove il rapporto passava (7,3:1): il
   gettone e' giallo fisso, quindi il colore si puo' scegliere una volta e
   basta. La trasparenza qui non era pericolosa — sotto c'e' sempre lo stesso
   giallo — ma il separatore al 55% faceva 3,45:1 e nessun referto poteva
   vederlo, perche' e' uno `::before` e lo strumento misura i nodi di testo.
   Una regola che nessuno puo' misurare e' il posto peggiore dove lasciare
   l'unico meccanismo che la casa vieta. */
.kp-parola-vinta i { font-style: normal; font-weight: 600; color: #33404f; }
.kp-parola-vinta i::before { content: " · "; color: #4a5666; }

/* L'impiccato. La parola con i trattini sta SOTTO il disegno, grande e
   spaziata: e' quello che si guarda, il disegno e' solo il conto degli
   errori. */
.kp-forca { display: block; width: 108px; height: 120px; margin: 6px auto 10px; }
.kp-imp-parola {
  text-align: center; font-size: 1.5rem; font-weight: 900; letter-spacing: .22em;
  color: var(--bh-text, var(--text)); margin-bottom: 16px; text-transform: lowercase;
  min-height: 1.6em;
}
.kp-imp-tasti { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.kp-imp-t {
  width: 40px; height: 40px; border-radius: 10px; font-family: inherit;
  font-size: 1rem; font-weight: 800; cursor: pointer; text-transform: lowercase;
  border: 2.5px solid var(--bh-border, #10202f);
  background: var(--bh-paper, var(--card)); color: var(--bh-text, var(--text));
}
.kp-imp-t:disabled { cursor: default; }
.kp-imp-t.is-ok { background: #17a398; color: #fff; }
.kp-imp-t.is-ko { background: #e8edf2; color: #68778a; }

/* ─── La schermata dei Giochi ───────────────────────────────────────────
   Riusa per intero il corpo dei giochi (.kp-mem, .kp-imp-*, .kp-lampo,
   .kp-forca): qui c'e' solo cio' che sta INTORNO — il titolo, le tre
   stelle e le quattro schede. Un secondo foglio con le stesse regole sarebbe
   la solita coppia che diverge. */
.kg-head { margin: 4px 0 14px; }
.kg-head-title { font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 800; }
.kg-head-sub { font-size: .86rem; color: var(--text-muted); margin-top: 2px; }

/* Il selettore della difficolta': CINQUE bottoni, non piu' tre. Su un
   telefono da 420px ci stanno in fila sola solo se le stelle rimpiccioliscono
   (10px dentro il selettore, 15px dappertutto altrove) e i margini si
   stringono — misurato: cinque bottoni da 71px con 5 stelle da 10px piu' i
   distanziatori fanno 62px di contenuto. La scritta scende a .7rem perche'
   «Campione» e «Difficile» sono le due parole piu' lunghe della fila. */
.kg-livelli { display: flex; gap: 6px; margin-bottom: 16px; }
.kg-liv {
  flex: 1; min-width: 0; padding: 9px 3px; border-radius: 14px; cursor: pointer;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: inherit; color: var(--text);
}
.kg-liv.is-ora { background: #012169; color: #fff; }
.kg-liv-nome { font-size: .7rem; font-weight: 800; letter-spacing: 0; }
.kg-liv .kg-stelle { gap: 1px; }
.kg-liv .kg-stella { width: 10px; height: 10px; stroke-width: 2.4; }
/* Lo schiacciamento serve al telefono: da tablet in su lo spazio c'e', e
   cinque stelle da dieci pixel in mezzo alla pagina sembrano un francobollo. */
@media (min-width: 700px) {
  .kg-liv { padding: 11px 8px; }
  .kg-liv .kg-stelle { gap: 2px; }
  .kg-liv .kg-stella { width: 14px; height: 14px; }
  .kg-liv-nome { font-size: .82rem; }
}
.kg-stelle { display: inline-flex; gap: 2px; }
.kg-stella { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.kg-stella.is-piena { fill: #ffd23f; stroke: #10202f; }

.kg-grid { display: grid; gap: 10px; }
.kg-card {
  text-align: left; padding: 14px; border-radius: 16px; cursor: pointer;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card));
  box-shadow: 3px 3px 0 var(--bh-border, #10202f);
  display: flex; flex-direction: column; gap: 3px; font-family: inherit; color: var(--text);
}
.kg-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bh-border, #10202f); }
/* Il disegno del gioco + la velatura pastello (`--kg-tinta`, dal dato).
   La tinta sta in un ::before al 55%: piena competerebbe col testo, e di
   notte una tinta chiara piena farebbe schede chiare in una pagina scura.
   L'immagine ha gia' il SUO fondo pastello pieno, quindi niente velature
   sopra di lei. */
.kg-card { position: relative; overflow: hidden; }
.kg-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--kg-tinta, transparent); opacity: .55; pointer-events: none;
}
/* Di notte la velatura scende al 14%: al 55% una tinta pastello CHIARA
   schiarisce la scheda scura e il testo chiaro ci annega — e' la regola del
   contrasto che dipende da cio' che sta sotto, presa dal verso giusto. */
[data-theme="dark"] .kg-card::before { opacity: .14; }
/* Anche al 14% la velatura schiarisce il fondo sotto il sottotitolo: il
   grigio spento standard misurava 3,87:1. Si alza il COLORE, non si toglie
   la tinta. */
[data-theme="dark"] .kg-card-sub { color: #cdd7e1; }
.kg-card > * { position: relative; }
.kg-card-img {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 2px solid var(--bh-border, #10202f); margin-bottom: 5px;
}
.kg-card-nome { font-size: 1.05rem; font-weight: 800; }
.kg-card-sub { font-size: .84rem; color: var(--text-muted); }
.kg-avviso { margin-top: 14px; font-size: .88rem; color: var(--text-muted); }

/* «Altri giochi» — i due promossi dall'hub adulto (UK Quiz, Word Search).
   La riga di separazione e il titolino non sono decorazione: dicono che le
   tre stelle finiscono sopra. Senza, sarebbero la quinta e la sesta tessera
   della stessa griglia e la difficolta' scelta sembrerebbe valere anche per
   loro. Le schede restano `.kg-card` (stesso contorno, stessa ombra dura:
   e' la stessa pelle), e la variante cambia solo il fondo — abbastanza per
   vedere che sono un'altra cosa, non tanto da sembrare un'altra app. */
.kg-altri { margin-top: 22px; padding-top: 16px; border-top: 2.5px dashed var(--bh-border, #10202f); }
.kg-altri-testa { margin-bottom: 10px; }
.kg-altri-titolo {
  display: block; font-family: var(--font-display, inherit);
  font-size: 1.1rem; font-weight: 800;
}
.kg-altri-sub { display: block; font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.kg-card--altro { background: var(--bh-paper-2, var(--surface-2, var(--card))); }

.kg-partita-testa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kg-indietro {
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 2.5px solid var(--bh-border, #10202f); background: var(--bh-paper, var(--card)); color: var(--text);
  font-weight: 800; font-size: .82rem;
}
.kg-partita-nome { font-weight: 800; }
.kg-fine { margin-top: 16px; text-align: center; }
.kg-bravo { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.kg-fine-bottoni { display: flex; gap: 10px; justify-content: center; }