/* ============================================================
   DIGITORIUM — L'Accademia delle Rune
   Modern atmospheric styling (indie-game look). No pixel font,
   no CRT: soft gradients, glass HUD, glowing accents.
   ============================================================ */

:root{
  --bg0:#0b0f28;
  --bg1:#141a3e;
  --ink:#eef3ff;
  --muted:#9fb0d8;
  --gold:#ffd27a;
  --cyan:#6ff0e0;
  --coral:#ff6f91;
  --violet:#8a6bff;
  --ok:#57e08f;
  --panel:rgba(18,22,50,.72);
  --card:rgba(30,36,80,.55);
  --line:rgba(255,255,255,.10);
  --r:16px;
  /* Georgia prima di Palatino: è disegnata per lo schermo, c'è su Windows
     e su Mac, e regge meglio in piccolo. Via "Times New Roman" dalla coda,
     che era il carattere peggiore del gruppo e quello che toccava a chi non
     ha né Iowan né Palatino. */
  --serif:"Iowan Old Style",Georgia,"Palatino Linotype",serif;
  --sans:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ============================================================
   Il carattere del testo.

   Atkinson Hyperlegible, del Braille Institute, licenza SIL Open Font
   1.1: si può ridistribuire, e sta qui dentro — nessuna chiamata a
   Google, nessun font che arriva da fuori. Due pesi, 34 KB in tutto.

   Non è un font «per dislessici» di quelli che si vedono in giro: è
   disegnato per far DISTINGUERE le lettere che si somigliano, che è
   esattamente il lavoro che questo gioco chiede mille volte a chi le
   sta ancora imparando. La I, la l e la 1 hanno tre forme diverse; la
   b, la d, la p e la q non sono l'una lo specchio dell'altra; le
   aperture sono larghe, così la a non diventa una o.

   `swap`: se per un istante non c'è, si legge col carattere di sistema
   invece di guardare un buco.
   ============================================================ */
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("../assets/font/atkinson-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("../assets/font/atkinson-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}   /* deve battere i display:flex dei box */
html,body{height:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Alto almeno quanto la finestra, ma libero di crescere: se il contenuto non
   ci sta — schermi bassi, pannello dell'operatore aperto, testo ingrandito —
   la pagina scorre invece di tagliare. Centrato con `auto` sui margini e non
   con `center`, che quando il contenuto è più alto della finestra lo fa
   debordare anche in alto, dove nessuno scroll può più raggiungerlo. */
#app{
  position:relative;
  width:100vw; min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto;
  background:
    radial-gradient(1100px 640px at 50% -12%, #6a45c8 0%, transparent 58%),
    radial-gradient(900px 500px at 50% 116%, #7a3a5e 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 88%);
}

/* ---------- il cortile dell'Accademia ----------
   Compare solo sulle schermate d'ingresso: profili, mappa, diploma. Sotto ci
   sta una velatura che scurisce il centro — l'immagine ha il centro già vuoto,
   ma il testo ci passa sopra e il contrasto deve reggere anche se un domani
   lo sfondo viene sostituito con uno più chiaro. */
#sfondoIngresso{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(9,12,34,.86), rgba(9,12,34,.30) 70%, transparent),
    url("../assets/sfondo-ingresso.webp") center/cover no-repeat;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease;
}
html.ingresso #sfondoIngresso{opacity:1; visibility:visible;}
@media (prefers-reduced-motion:reduce){#sfondoIngresso{transition:none;}}
/* Le schermate stanno sopra il cortile. Serve `position` perché `z-index`
   funzioni, ma NON va applicata a quelle sovrapposte: `#app > .screen` vince
   per specificità su `.screen.overlay` (un id batte due classi), e con
   `position:relative` storia, pausa, diploma e codice smettevano di coprire
   lo schermo e si mettevano in fila accanto alla mappa. */
#app > .screen:not(.overlay){position:relative; z-index:1;}

/* ---------- screens ----------
   `margin:auto` centra quando c'è spazio e si comporta come un margine
   normale quando non ce n'è: niente resta fuori dal bordo alto. */
.screen{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; width:min(1040px,96vw); padding:24px; text-align:center;
  margin:auto;
}
.screen.active{display:flex;}
.screen.overlay{
  position:absolute; inset:0; z-index:50;
  width:100%; max-width:none;
  background:rgba(6,8,22,.8); backdrop-filter:blur(7px);
}

/* ---------- brand / titles ----------
   Le due stelline ai lati del nome erano caratteri tipografici, non un
   nostro disegno: li disegna il sistema operativo, quindi cambiavano fra
   Windows, Mac e Android e su alcuni telefoni venivano resi come emoji a
   colori — lo stesso difetto per cui le emoji sono state tolte ovunque.
   Al loro posto, sopra il nome, l'emblema: un elemento solo e centrato. */
.logo{line-height:1.35;}
.emblema{
  display:block; margin:0 auto 10px; width:clamp(74px,9vw,104px); height:auto;
}
.logo-top{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,6vw,58px); letter-spacing:9px;
  /* la spaziatura larga aggiunge aria a destra: la tolgo per non far
     sembrare il titolo spostato a sinistra */
  text-indent:9px;
  color:var(--gold); text-shadow:0 3px 24px rgba(255,200,110,.35);
}
.logo-sub{
  display:block; margin-top:8px; font-family:var(--serif); font-style:italic;
  font-size:clamp(13px,2.4vw,20px); letter-spacing:1px; color:#d7c9ff;
}
.tagline{font-size:14px; color:var(--muted); line-height:1.7; max-width:560px;}
.panel-title{font-family:var(--serif); font-size:clamp(20px,3.4vw,30px); color:var(--gold); letter-spacing:1px;}

/* ---------- journey map ---------- */
#mapWrap{
  width:100%; max-height:56vh; overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
#lessonGrid{position:relative; height:290px; min-width:100%;}
#lessonGrid svg.trail{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}

.act-band{position:absolute; top:0; bottom:0; border-radius:16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ah) 12%, transparent), transparent 70%);
  border:1px solid color-mix(in srgb, var(--ah) 22%, transparent);}
/* L'orizzonte dell'atto: i cieli veri delle sue tappe, sfumati da sinistra a
   destra (li calcola `cieloAtto()` da SCENE). Misure in pixel e non in
   percentuale perché quello che conta non è l'altezza della fascia, è dove
   cominciano le rune: a 82px, e a 78 qui non c'è già più niente. */
.act-band::before{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:var(--cielo, transparent); opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.5) 46px, transparent 78px);
  mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.5) 46px, transparent 78px);
}
/* il titolo sta sopra l'orizzonte: un filo d'ombra e resta staccato */
.act-band .act-name, .act-band .act-place{text-shadow:0 1px 3px rgba(6,8,20,.85);}
.act-band .act-name{position:absolute; top:8px; left:14px; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ah); opacity:.85; white-space:nowrap;}
.act-band .act-place{position:absolute; top:26px; left:14px; font-size:10px; color:var(--muted); white-space:nowrap;}
/* la pagina dell'atto: sta nell'intestazione, che era spazio vuoto */
/* non flex: ogni pezzo di testo diventerebbe un elemento a sé e il `gap` si
   infilerebbe anche fra «Leggi la» e il nome della pagina */
.act-pagina{
  position:absolute; top:6px; right:12px; display:block; white-space:nowrap;
  font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:var(--muted); background:none; border:none; padding:6px 8px; border-radius:9px;
  white-space:nowrap;
}
.act-pagina .ap-pezzi{display:inline-flex; gap:3px; vertical-align:-2px; margin-right:6px;}
.act-pagina .ap-pezzi i{
  width:9px; height:12px; border-radius:2px; display:block;
  border:1px solid color-mix(in srgb, var(--ah) 40%, transparent);
}
.act-pagina .ap-pezzi i.on{background:color-mix(in srgb, var(--ah) 62%, transparent); border-color:var(--ah);}
.act-pagina.intera{
  cursor:pointer; color:var(--ah);
  background:color-mix(in srgb, var(--ah) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ah) 34%, transparent);
}
.act-pagina.intera:hover{background:color-mix(in srgb, var(--ah) 22%, transparent);}
.act-pagina .ap-ico{font-size:12px; margin-right:5px;}
.act-pagina b{font-weight:800;}

.node{position:absolute; transform:translate(-50%,-50%); width:98px; text-align:center; cursor:pointer;}
.node .dot{
  width:60px; height:60px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; font-size:25px;
  background:radial-gradient(circle at 50% 35%, #3a3570, #201c46);
  border:2px solid color-mix(in srgb, var(--ah) 55%, transparent);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
.node:hover .dot{transform:translateY(-4px); border-color:var(--ah); box-shadow:0 12px 26px rgba(0,0,0,.5);}
.node.current .dot{border-color:var(--ah); box-shadow:0 0 0 4px color-mix(in srgb, var(--ah) 22%, transparent), 0 10px 24px rgba(0,0,0,.5);}
.node.current .dot::after{content:''; position:absolute; width:76px; height:76px; border-radius:50%;
  border:2px solid var(--ah); animation:ping 1.9s ease-out infinite;}
@keyframes ping{0%{transform:scale(.85);opacity:.75}100%{transform:scale(1.25);opacity:0}}
.node.done .dot{background:radial-gradient(circle at 50% 35%, #2f6a58, #14342c); border-color:#57e08f;}
.node.locked{cursor:not-allowed;}
.node.locked .dot{filter:saturate(.25) brightness(.7); border-color:rgba(255,255,255,.12);}
.node.locked:hover .dot{transform:none; box-shadow:0 8px 18px rgba(0,0,0,.45);}
.node .n-title{margin-top:8px; font-size:11px; font-weight:800; line-height:1.3; color:var(--ink);}
.node .n-title .n-tasti{white-space:nowrap;}
.node .n-sub{font-size:9.5px; color:var(--muted); line-height:1.35; margin-top:2px;}
.node .n-stars{font-size:11px; letter-spacing:1px; color:#3a3f66; margin-top:3px;}
.node .n-stars .on{color:var(--gold);}
.node.locked .n-title, .node.locked .n-sub{opacity:.45;}
.node .n-boss{display:inline-block; margin-top:3px; font-size:8.5px; font-weight:800; letter-spacing:.08em;
  padding:2px 7px; border-radius:999px; background:rgba(255,111,145,.18); color:var(--coral);
  border:1px solid rgba(255,111,145,.35);}
/* Facoltativa: smorzata, non un premio da inseguire — dice solo che si può
   proseguire senza. */
.node .n-bonus{display:inline-block; margin-top:3px; font-size:8px; font-weight:800; letter-spacing:.07em;
  padding:2px 7px; border-radius:999px; background:rgba(159,176,216,.14); color:var(--muted);
  border:1px dashed rgba(159,176,216,.4);}

/* Rileggi il racconto: appoggiato alla runa, discreto finché non lo si
   cerca. Grande abbastanza da centrarlo col mouse (30px) senza rubare il
   clic alla tappa, che resta il gesto principale. */
.node .n-storia{
  position:absolute; top:-6px; right:-2px; width:30px; height:30px;
  border-radius:50%; border:1.5px solid rgba(255,210,122,.4); cursor:pointer;
  background:rgba(10,12,30,.92); color:var(--gold);
  font-family:var(--serif); font-size:15px; line-height:1; font-weight:600;
  opacity:.72; transition:opacity .15s, color .15s, border-color .15s;
}
.node:hover .n-storia{opacity:1;}
.node .n-storia:hover{color:var(--gold); border-color:var(--gold);}

/* ---------- story card ---------- */
.story-card{
  background:linear-gradient(180deg, rgba(30,26,66,.96), rgba(16,13,40,.96));
  border:1px solid color-mix(in srgb, var(--ah,#6ff0e0) 35%, transparent);
  border-radius:20px; padding:28px 32px; max-width:600px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.story-act{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ah,#6ff0e0);}
.story-who{font-family:var(--serif); font-size:21px; color:var(--gold);}
.story-text{font-size:15px; line-height:1.85; color:var(--ink);}
.story-text b{color:var(--cyan);}
.story-text i{color:#d7c9ff; font-style:italic;}
/* Il gesto da fare, staccato dal racconto: chi salta le righe lunghe — e in
   una prima lettura sono tanti — trova comunque qui la cosa da premere. */
.story-tip{
  margin:2px 0 0; padding:11px 13px; border-radius:12px;
  background:rgba(255,210,122,.09); border:1px solid rgba(255,210,122,.26);
  font-size:13.5px; line-height:1.7; color:#ffe3ac;
}
.story-tip b{color:var(--gold);}
.story-tip[hidden]{display:none;}
/* Il secondo strato: chiuso è una riga sola, e chi non la apre non perde
   niente che serva a giocare. Il triangolino di suo è minuscolo e grigio:
   qui il bersaglio deve essere grande abbastanza per un dito. */
.story-piu{margin:2px 0 0;}
.story-piu[hidden]{display:none;}
.story-piu > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:800; font-size:13.5px; color:#ffe3ac;
  background:rgba(255,210,122,.09); border:1px solid rgba(255,210,122,.26);
  border-radius:12px; padding:10px 15px; min-height:44px; box-sizing:border-box;
}
.story-piu > summary::-webkit-details-marker{display:none;}
.story-piu > summary::after{content:'▾'; font-size:12px; opacity:.75; transition:transform .15s;}
.story-piu[open] > summary::after{transform:rotate(180deg);}
.story-piu > summary:hover{background:rgba(255,210,122,.16);}
.story-piu[open] > summary{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.story-piu[open] .story-tip{border-top-left-radius:0; border-top-right-radius:0; border-top:none;}

/* la riga che spiega che nome si sta scegliendo. Larghezza limitata: senza,
   si distende per tutta la schermata e diventa una riga sola lunghissima */
.new-user-lead{
  margin:0 auto 2px; max-width:400px;
  font-size:14px; line-height:1.6; color:var(--dim); text-align:center;
}
.new-user-lead b{color:#ffe3ac;}
/* a che punto è la carta: quanti respiri sono stati letti e quanti restano.
   Sapere che sono quattro e non infiniti è ciò che tiene sulla pagina chi
   fatica a restarci. */
.story-passi{display:flex; gap:7px; justify-content:center; margin:10px 0 2px;}
.story-passi i{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.16); transition:background .25s, transform .25s;
}
.story-passi i.fatto{background:rgba(255,255,255,.4);}
.story-passi i.ora{background:var(--ah,#ffd27a); transform:scale(1.35);}
.story-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:4px;}
/* la carta si avanza cliccandoci sopra: dirlo col cursore */
#story .story-card{cursor:pointer;}
#story .story-card button, #story .story-card summary{cursor:pointer;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-weight:800; font-size:15px; color:#3a2405;
  background:linear-gradient(180deg,#ffe0a0,#ffbf5e);
  border:none; border-radius:14px; padding:13px 22px; cursor:pointer;
  box-shadow:0 6px 0 #c98a2c, 0 12px 22px rgba(0,0,0,.28);
  transition:transform .1s ease, box-shadow .1s ease, filter .1s;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #c98a2c, 0 6px 12px rgba(0,0,0,.28);}
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn-ghost:active{transform:translateY(2px); box-shadow:none;}
.btn-help{background:linear-gradient(180deg,#8fffe6,#41c9ad); color:#06231f; box-shadow:0 6px 0 #1c8f77, 0 12px 22px rgba(0,0,0,.28);}
.btn-help:active{box-shadow:0 2px 0 #1c8f77;}

/* ---------- menu footer ---------- */
.menu-footer{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;}
.sound-toggle{font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--muted);}
.sound-toggle input{width:18px; height:18px; accent-color:var(--gold);}

/* ---------- barra del menu ----------
   Ancorata in alto a destra e fuori dal flusso: la mappa resta l'unica cosa
   al centro. Come il pannello operatore, esiste solo finché il menu è la
   schermata attiva. */
.menu-bar{
  position:fixed; top:12px; right:14px; z-index:40;
  display:flex; align-items:center; gap:8px;
}
#menu:not(.active) .menu-bar{display:none;}
.chip-utente, .ico-btn, .ico-tog > span{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 12px; border-radius:12px; cursor:pointer;
  background:rgba(10,12,30,.55); border:1.5px solid var(--line);
  color:var(--muted); font-family:inherit; font-size:13.5px; font-weight:700;
  backdrop-filter:blur(6px); transition:color .15s, border-color .15s;
}
.ico-btn{min-width:42px; padding:0; font-size:19px; font-family:var(--serif);}
.ico-tog > span{min-width:42px; padding:0;}
.chip-utente:hover, .ico-btn:hover, .ico-tog:hover > span{color:var(--ink); border-color:var(--gold);}
.chip-utente .chip-nome{max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chip-utente svg{width:22px; height:22px;}
.ico-tog{position:relative; display:block;}
/* la casella vera resta lì per la tastiera e per i lettori di schermo */
.ico-tog input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.ico-tog input:focus-visible + span{border-color:var(--gold); color:var(--ink);}
/* audio spento: barrato, non solo più pallido — lo si capisce anche di sfuggita */
.ico-tog input:not(:checked) + span{opacity:.55;}
.ico-tog input:not(:checked) + span::after{
  content:''; position:absolute; left:9px; right:9px; top:50%;
  height:2px; border-radius:2px; background:currentColor; transform:rotate(-38deg);
}

/* ---------- zona operatore ----------
   Chiusa di suo: quello che serve al bambino sta sopra, e sotto c'è una voce
   sola. Il pulsante è smorzato apposta — deve trovarlo chi lo cerca, non
   attirare chi sta giocando. */
.op-zone{margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.btn-op{
  background:transparent; color:var(--muted); font-size:13.5px; font-weight:700;
  padding:9px 16px; border:1.5px solid var(--line); box-shadow:none;
}
.btn-op:hover{color:var(--ink); border-color:var(--gold);}
.btn-op:active{transform:translateY(2px); box-shadow:none;}
.btn-op[aria-expanded="true"]{color:var(--ink); border-color:var(--gold);}
/* Ancorato al fondo della finestra e sopra la pagina: non fa posto a sé
   stesso spingendo il resto, che è quello che tagliava il titolo in alto. */
.op-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  border-top:1.5px solid var(--line); border-radius:18px 18px 0 0;
  background:rgba(10,12,30,.96); backdrop-filter:blur(8px);
  box-shadow:0 -12px 30px rgba(0,0,0,.45);
  padding:14px 18px 18px;
  max-height:70vh; overflow-y:auto;
}
.op-panel[hidden]{display:none;}
/* Essendo fixed non sparirebbe cambiando schermata: esiste solo col menu. */
#menu:not(.active) .op-panel{display:none;}
.op-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  max-width:660px; margin:0 auto 12px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.op-close{padding:4px 12px; font-size:15px; line-height:1;}
.op-panel-body{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:660px; margin:0 auto;
}
.op-panel .btn{font-size:13.5px; padding:10px 16px;}
/* Azzera progressi cancella tutto: che non sembri un pulsante come gli altri. */
.btn-danger{border-color:#8a3a4a; color:#ff9db0;}
.btn-danger:hover{border-color:#ff6f91; color:#ffc2ce;}

/* Uscita verso la scheda dell'attività: entrati nel gioco a schermo pieno non
   c'era più modo di tornare al sito se non col tasto indietro del browser. */
.exit-link{
  display:inline-block; margin-top:26px; font-size:13px; font-weight:700;
  color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:10px;
}
.exit-link:hover{color:var(--ink); background:rgba(255,255,255,.06);}

/* ---------- help ---------- */
.help-body{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px;
  padding:22px; font-size:14px; line-height:1.9; text-align:left; max-width:640px;
}
.help-body strong{color:var(--gold);}
.help-body em{color:var(--cyan); font-style:normal;}
/* i titoletti: servono a poter NON leggere la pagina intera e trovare
   comunque la regola che si sta cercando */
.help-body h3{
  display:flex; align-items:center; gap:8px;
  margin:18px 0 4px; font-size:12px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--cyan);
}
.help-body h3:first-child{margin-top:0;}
/* ---- e che ci stia in una schermata ----
   Sette blocchi in colonna non entrano in una finestra da portatile: il
   testo finiva sotto il bordo e il bottone «Indietro» con lui, cioè la
   pagina che spiega come si gioca si leggeva a metà. I blocchi sono corti
   e indipendenti, quindi su schermi larghi stanno in due colonne — e
   quando anche così non basta, la pagina scorre invece di tagliare. */
.help-sez{break-inside:avoid;}
.help-sez h3{margin-top:0;}
.help-sez + .help-sez{margin-top:16px;}
@media (min-width:900px){
  /* `columns` e non una griglia: la griglia allinea le righe fra loro e ogni
     riga diventa alta quanto il blocco più alto, quindi si guadagnava poco.
     Le colonne di testo si bilanciano da sole. */
  .help-body{max-width:920px; columns:2; column-gap:30px;}
  .help-sez + .help-sez{margin-top:16px;}
}
/* Su uno schermo largo la terza colonna, invece di stringere l'interlinea:
   qui si legge a fatica per mestiere, e le righe distanti sono la prima cosa
   che aiuta. Le colonne restano sopra i 350px, che per blocchi di due o tre
   righe è largo abbastanza. */
@media (min-width:1240px){
  .help-body{max-width:1180px; columns:3; column-gap:28px;}
}
#help{justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain;
  max-height:100vh; padding-top:20px; padding-bottom:20px;}
#help .panel-title{position:sticky; top:-20px; z-index:2;}
.help-body h3 .ico{width:17px; height:17px; flex:none;}
.help-body p{margin:0 0 6px;}

/* ---------- game + HUD ---------- */
/* relative: pausa e schermo intero si ancorano qui, non alla pagina.
   --scena è la larghezza che HUD, scena e trainer condividono, così le tre
   fasce restano incolonnate qualunque sia la finestra: la più stretta fra il
   massimo, la larghezza disponibile e quella che l'altezza concede. */
#game{
  gap:8px; justify-content:flex-start; padding-top:10px; position:relative;
  /* Quanto si prendono le fasce sopra e sotto la scena: HUD ~62, banner
     «Inizia» ~62, riga dell'incantesimo ~20, tastiera ~175, spazi ~40,
     padding ~24. Sbagliare per difetto taglia la tastiera, ed è quello che
     succedeva: la scena si prendeva l'altezza che serviva a lei. */
  --contorno:289px;
  --scena:min(1500px, 97vw, (100vh - var(--contorno)) * 16 / 9);
}
#hud[hidden]{display:none;}
#hud{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:stretch;
  width:var(--scena,min(1240px,97vw)); font-size:13px;
}
.hud-item{
  background:var(--panel); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px;
  padding:7px 13px; display:flex; flex-direction:column; gap:3px; align-items:center; min-width:74px;
}
.hud-label{font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.hud-item span:last-child{font-weight:800;}

/* Velocità e traguardo in un riquadro solo: separati erano due numeri da
   confrontare a mente, e «65» da solo non dice niente. La barra rende la
   distanza una cosa da guardare, non da calcolare. */
.hud-speed{min-width:170px; padding:6px 16px;}
.speed-row{display:flex; align-items:baseline; gap:6px; font-weight:800; font-size:17px;}
.speed-sep{font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}
.hud-speed #hudGoal{color:var(--muted); font-size:14px;}
.speed-bar{
  width:100%; height:4px; border-radius:3px; margin-top:3px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.speed-bar i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#6ff0e0,#8a6bff);
  transition:width .3s ease;
}
#hudWpm.reached{color:var(--ok);}
#hudWpm.reached ~ .speed-bar i, .hud-speed:has(#hudWpm.reached) .speed-bar i{
  background:linear-gradient(90deg,var(--ok),#8fffe6);
}
.hud-lives, .hud-acc{justify-content:center; min-width:96px;}
.hud-lives span:last-child, .hud-acc span:last-child{font-size:17px;}

/* Punti e combo: la ricompensa, non l'obiettivo. In fila con gli altri —
   una riga tutta per loro costava alla scena più di quanto valessero — ma
   smorzati, così non competono con i numeri della lezione. */
.hud-points{min-width:88px; opacity:.82;}
.points-row{display:flex; align-items:baseline; gap:6px; justify-content:center;}
.hud-points #hudScore{font-weight:800; font-size:15px;}
.hud-combo{color:var(--gold); font-weight:800; font-size:12px;}
.hud-combo.hidden{visibility:hidden;}
/* «x8» da solo non dice di che cosa: la parola sta davanti, piccola, e non
   ruba spazio al numero */
.hud-combo i{font-style:normal; font-weight:600; font-size:9px; opacity:.75;
  text-transform:uppercase; letter-spacing:.08em; margin-right:3px;}
#hudWpm.reached{color:var(--ok);}
#hudAcc.low{color:var(--coral);}

/* La scena si dimensiona anche sull'altezza, non solo sulla larghezza:
   `max-height` da sola non bastava, perché con aspect-ratio è la larghezza a
   decidere e su uno schermo largo la scena cresceva finché tastiera e mani —
   cioè la parte che insegna — finivano sotto il bordo. `min()` prende la più
   stretta fra la larghezza disponibile e quella che l'altezza concede. */
#canvas{
  width:var(--scena);
  min-width:min(520px, 97vw);   /* non oltre la finestra: niente scroll orizzontale */
  height:auto; aspect-ratio:16/9;
  background:linear-gradient(180deg,#0d1836,#3a2c5e);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}

/* Il contenitore serve solo a dare un riferimento alla prova: ha
   esattamente il riquadro del canvas, così la prova ci sta sopra precisa. */
#scenaWrap{position:relative; width:var(--scena); min-width:min(520px,97vw);}
#scenaWrap #canvas{width:100%;}

/* ---------- prova dei tasti nuovi ---------- */
.prova{
  position:absolute; inset:0; z-index:20; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(9,7,24,.86); backdrop-filter:blur(4px);
  padding:18px; text-align:center;
}
.prova.hidden{display:none;}
.prova-occhiello{
  margin:0; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.prova-runa{
  width:104px; height:104px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(111,240,224,.20), rgba(20,16,44,.9) 70%);
  border:2px solid rgba(111,240,224,.55); border-radius:26px;
  box-shadow:0 0 34px rgba(111,240,224,.30);
}
.prova-runa span{font-family:var(--serif); font-size:52px; font-weight:700; color:#eaf6ff; line-height:1;}
.prova.giusto .prova-runa{
  border-color:rgba(87,224,143,.85);
  box-shadow:0 0 44px rgba(87,224,143,.55);
}

/* Il codice Alt, con le cifre che si accendono man mano: è la stessa cosa
   che il gioco disegna sotto la runa mentre si scrive, qui in grande. */
.prova-codice{display:flex; align-items:center; gap:6px;}
.prova-codice.hidden{display:none;}
.pc-alt{
  font-family:var(--mono, ui-monospace, Consolas, monospace); font-size:13px; font-weight:700;
  padding:6px 11px; border-radius:7px; color:#d7cdfa;
  background:rgba(20,16,40,.92); border:1px solid rgba(200,190,240,.4);
}
.pc-cifre{display:flex; gap:5px;}
.pc-cifre i{
  font-style:normal; width:26px; height:30px; display:grid; place-items:center;
  font-family:var(--mono, ui-monospace, Consolas, monospace); font-size:15px; font-weight:700;
  border-radius:7px; color:rgba(190,185,225,.65);
  background:rgba(20,16,40,.92); border:1px solid rgba(200,190,240,.3);
}
.pc-cifre i.fatta{color:var(--ok); border-color:rgba(87,224,143,.7);}
.pc-cifre i.ora{border-color:var(--cyan); color:#eaf6ff; box-shadow:0 0 14px rgba(111,240,224,.5);}
.pc-cifre i.male{color:var(--coral); border-color:rgba(255,111,145,.75);}

.prova-dito{margin:0; font-size:16px; color:var(--ink);}
.prova-dito b{color:var(--cyan);}
.prova-avanzo{margin:0; font-size:13px; color:var(--muted); max-width:34ch;}
.prova-punti{display:flex; gap:7px;}
.prova-punti i{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.prova-punti i.ok{background:var(--ok); border-color:var(--ok);}
.prova-punti i.ora{background:var(--cyan); border-color:var(--cyan);}
.prova-prima{
  display:none; align-items:center; gap:5px;
  font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:rgba(87,224,143,.14); color:var(--ok); border:1px solid rgba(87,224,143,.4);
}
.prova.primo .prova-prima{display:inline-flex;}
/* La via d'uscita esiste, ma non è la prima cosa che si vede: compare
   dopo qualche secondo, per l'operatore, non per chi ha fretta. */
.prova-salta{
  background:none; border:0; color:var(--muted); font-size:12px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:6px; font-family:inherit;
}
.prova-salta:hover{color:var(--ink);}
/* «come si gioca» c'è sempre; «salta la prova» compare dopo otto secondi.
   Su una riga sola, così l'arrivo del secondo non sposta il primo. */
.prova-piede{display:flex; gap:16px; justify-content:center; align-items:center; min-height:30px;}
@media (max-width:640px){
  .prova-runa{width:82px; height:82px;}
  .prova-runa span{font-size:40px;}
}

/* Qui compare, lettera per lettera, quello che il bambino sta scrivendo.
   Era serif in corsivo: inclinato, con le grazie, e con la l e la I
   ridotte alla stessa asta — sul testo che si sta copiando è il posto
   dove il corsivo costa di più e non serve a niente. */
#targetLine{font-size:15px; color:var(--muted); min-height:18px; letter-spacing:1px;
  font-family:var(--sans); font-weight:600;}
#typedBuffer{color:var(--gold); font-style:normal;}

/* ---------- finger trainer ---------- */
/* ============================================================
   La striscia sotto la scena è l'unica fascia che NON si incolonna con
   le altre: la scena è larga quanto l'altezza le concede (16:9), e a
   1366 px le restano cinquecento pixel di pagina inutilizzati ai lati.
   Le mani se li prendono, e non tolgono niente a nessuno.
   ============================================================ */
#trainer{display:flex; align-items:flex-end; justify-content:center; gap:16px;
  flex-wrap:nowrap; width:min(1500px, 97vw);}
.trainer-left{display:flex; flex-direction:column; align-items:center; gap:8px; flex:none;}
.nextkey-wrap{display:none;} /* modern layout uses the keyboard + hint line */

/* hands artwork + fingertip glow overlays (assets/hands.png) */
/* ---- sigilli dei profili: disegni, non emoji ---- */
.sigillo{width:1.5em; height:1.5em; object-fit:contain; vertical-align:-.35em;
  display:inline-block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));}
.avatar-opt .sigillo{width:40px; height:40px; vertical-align:middle;}
.u-avatar .sigillo{width:44px; height:44px; vertical-align:middle;}
#whoChip .sigillo{width:22px; height:22px; vertical-align:-.32em;}
.report-sheet .sigillo{width:26px; height:26px; vertical-align:-.3em;
  filter:none;}

/* ---- icone SVG: prendono colore e dimensione dal testo ---- */
.ico{
  width:1.05em; height:1.05em; vertical-align:-.17em;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}
.ico-vita{color:#ff8098; fill:currentColor;}
#hudLives .ico{width:16px; height:16px; vertical-align:-.2em; margin:0 1px;}
.help-panel p .ico{color:var(--gold); margin-right:2px;}

/* ---- la runa della tappa: l'icona È il contenuto ---- */
.node .dot .rune{width:44px; height:48px; display:block;}
.node .dot .rune .plate{fill:rgba(10,14,34,.55); stroke:var(--ah); stroke-width:2;}
.node .dot .rune text{fill:#e8ecff; font-family:"Iowan Old Style",Georgia,serif;
  font-weight:600; text-anchor:middle;}
.node .dot .rune .row{fill:rgba(255,255,255,.22);}
.node .dot .rune .row.on{fill:var(--ah);}
.node .dot .rune .line{fill:var(--ah);}
.node.locked .dot .rune{opacity:.45;}
.node .dot .ico{width:24px; height:24px; opacity:.75;}

/* ============================================================
   UNA MANO PER LATO DELLA TASTIERA

   Prima stavano tutte e due in un pannello a destra dei tasti: 190 px di
   larghezza per due mani, cioè 90 ciascuna, e un polpastrello acceso da
   una decina di pixel — il segnale più debole dello schermo dentro il suo
   oggetto più grande. Per giunta la mano sinistra stava a destra di
   tutto, dalla parte opposta ai tasti che muove.

   Divise, ognuna si prende la larghezza che prima si spartivano, e la
   larghezza c'era già: sotto la scena avanzava, mentre l'altezza no.
   ============================================================ */
/* la sorgente: serve a ritagliare, non si guarda */
#handsWrap{position:absolute; width:0; height:0; overflow:hidden; opacity:0;
  pointer-events:none;}
#handsCanvas{display:block;}

/* La mano non pesa in altezza: il suo posto nella riga è alto zero e il
   disegno le galleggia sopra, allineato al fondo della tastiera. Così può
   essere grande quanto vuole senza rubare un pixel alla scena — sale nello
   spazio ai lati, che è vuoto. */
.mano-lato{position:relative; --largo:250px; height:0; min-width:70px;
  flex:0 1 calc(var(--largo) * var(--fetta, 1));}
.mano-dentro{position:absolute; bottom:0; left:0; width:100%;
  /* il polso sfuma invece di finire di netto */
  -webkit-mask-image:linear-gradient(#000 86%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(#000 86%, rgba(0,0,0,0) 100%);}
@media (max-height:860px){ .mano-lato{--largo:224px;} }
@media (max-height:720px){ .mano-lato{--largo:190px;} }
.mano-lato canvas{width:100%; height:auto; display:block;}
.mano-dentro .fglow{
  position:absolute; width:19%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    var(--fc,#6ff0e0) 0%, color-mix(in srgb, var(--fc,#6ff0e0) 60%, transparent) 42%, transparent 72%);
  opacity:0; transition:opacity .12s;
  pointer-events:none; mix-blend-mode:screen;
}
.mano-dentro .fglow.active{opacity:.85;}

/* ---------- le mani dentro la carta ----------
   Stessa illustrazione e stessi bagliori del gioco, in piccolo. Sta sotto
   il testo, centrata, e compare solo sul pezzo che nomina i tasti. */
.story-mani{
  position:relative; width:min(300px,72%); margin:12px auto 2px;
  animation:mani-entra .4s cubic-bezier(.2,.9,.3,1.1) both;
}
.story-mani canvas{width:100%; height:auto; display:block;}
.story-mani .fglow{
  position:absolute; width:9%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    var(--fc,#6ff0e0) 0%, color-mix(in srgb, var(--fc,#6ff0e0) 60%, transparent) 42%, transparent 72%);
  opacity:.85; pointer-events:none; mix-blend-mode:screen;
}
@keyframes mani-entra{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .story-mani{animation-duration:.01s;} }
@media (max-height:760px){ .story-mani{width:min(220px,60%);} }

/* ---------- la Pietra delle Rune, dentro la carta ----------
   È la tastiera del gioco, gli stessi tasti con gli stessi colori delle
   dita, ferma e senza niente acceso: la carta dice che le rune «ci sono
   ancora tutte insieme», e quello è ciò che si deve vedere. */
.story-pietra{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  margin:12px auto 2px; padding:10px 12px; width:max-content; max-width:100%;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line); border-radius:14px;
  animation:mani-entra .4s cubic-bezier(.2,.9,.3,1.1) both;
}
.story-pietra .kb-key{width:26px; height:26px; font-size:10px;}
.story-pietra .kb-key.space{width:110px;}
@media (max-width:560px){
  .story-pietra{padding:7px 8px;}
  .story-pietra .kb-key{width:20px; height:20px; font-size:8px;}
  .story-pietra .kb-key.space{width:82px;}
}


#keyboard{
  display:flex; flex-direction:column; gap:5px;
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:14px; padding:10px 12px;
}
.kb-row{display:flex; gap:5px; justify-content:center;}
.kb-key{
  --fc:#6ff0e0;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  /* una velatura del colore del dito: da spenta la tastiera resta leggibile,
     ma la metà sinistra tende all'ambra e la destra all'azzurro — la
     divisione fra le mani si vede prima di premere qualsiasi cosa */
  color:color-mix(in srgb, var(--fc) 42%, #cdd8f5);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  border-radius:8px; position:relative;
  transition:transform .06s, background .1s, box-shadow .1s, color .1s;
}
.kb-key.home::after{content:''; position:absolute; bottom:4px; width:8px; height:2px; border-radius:2px; background:currentColor; opacity:.45;}
.kb-key.space{width:210px;}
.kb-key.active{
  /* il tasto acceso prende il colore del suo dito, non un verde uguale per
     tutti: era l'unico punto in cui la tastiera smetteva di dire la mano */
  color:#0b0d18;
  background:linear-gradient(180deg, color-mix(in srgb, var(--fc) 78%, #ffffff), var(--fc));
  border-color:color-mix(in srgb, var(--fc) 55%, #ffffff);
  box-shadow:0 0 18px color-mix(in srgb, var(--fc) 68%, transparent);
  transform:translateY(-1px);
}
#fingerHint{font-size:15px; letter-spacing:.6px; color:#b9c2e6; margin-bottom:2px;}
@media (max-height:760px){ #fingerHint{font-size:13.5px;} }

#fingerHint b{color:var(--cyan); font-weight:800;}

/* pausa e schermo intero, in alto a destra sopra la scena */
/* I tre bottoni stanno nell'angolo in basso a destra DELLA SCENA, sulla
   fascia scura del terreno, che è vuota. Fuori avrebbero avuto bisogno di
   una riga tutta loro, o sarebbero finiti addosso al quadro. */
.game-tools{position:absolute; bottom:10px; right:12px; display:flex; gap:6px; z-index:3;}
.game-tools .btn-tool{padding:5px 10px; font-size:12.5px; opacity:.42;
  background:rgba(10,14,34,.5); border-color:rgba(255,255,255,.10);
  transition:opacity .15s;}
.game-tools .btn-tool:hover, .game-tools .btn-tool:focus-visible{opacity:1;}
.btn-tool{padding:8px 14px; font-size:14px;
  background:var(--panel); color:var(--ink); box-shadow:none; border:1px solid var(--line);}
.btn-tool:hover{border-color:var(--gold);}
/* il «?» ha lo stesso peso degli altri strumenti: stessa larghezza dell'icona,
   non una lettera più magra in mezzo a due riquadri */
.btn-tool-aiuto{min-width:40px; padding:8px 0; font-family:var(--serif); font-size:18px; line-height:1;}
.btn-tool:active{transform:translateY(2px); box-shadow:none;}

/* ---------- "come si fa" banner ---------- */

/* ---------- panels / pause ---------- */
.panel{
  background:var(--panel); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:20px;
  padding:30px 40px; display:flex; flex-direction:column; gap:16px; align-items:center;
}

/* ---------- results ---------- */
/* ---------- esito: le due misure che decidono ----------
   Cinque riquadri più due righe di testo ripetevano gli stessi numeri: le
   battute comparivano due volte, la precisione pure. Restano le due cose che
   decidono se la tappa è superata, ciascuna accanto alla propria soglia —
   un numero da solo non dice niente, è il confronto che conta. */
.esiti{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.esito{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px;
  padding:16px 26px; min-width:184px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.esito-riga{display:flex; align-items:baseline; gap:8px; min-height:31px;}
.esito-num{font-size:31px; font-weight:800; color:var(--gold); line-height:1;}
.esito-num.ok{color:var(--ok);}
.esito-num.no{color:var(--coral);}
.esito-lbl{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
/* la soglia detta a parole: un numero accanto a un altro numero non dice di
   che numero si tratta, e «47 di 45» si leggeva perfino come una frazione */
.esito-soglia{font-size:11px; color:var(--muted); opacity:.85; margin-top:2px;}
.esito-soglia span{font-weight:800; color:var(--ink);}
/* le vite: le stesse tre del gioco, quelle spese al buio */
.esito-vite{align-items:center; gap:7px;}
.esito-vite .ico{width:26px; height:26px;}
.esito-vite .spenta{opacity:.22; filter:grayscale(1);}
.esito-bar{
  position:relative;
  width:100%; height:5px; border-radius:3px; margin-top:4px;
  background:rgba(255,255,255,.1);
}
.esito-bar.bar-vuota{background:transparent;}
/* la tacca dove passa il cancello: si vede il riempimento fermarsi prima */
.esito-bar b{
  position:absolute; top:-2px; width:2px; height:9px; border-radius:1px;
  background:rgba(255,255,255,.55); transform:translateX(-1px);
}
.esito-bar i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#8a6bff,#ffd27a);
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}
.esito-bar i.ok{background:linear-gradient(90deg,#57e08f,#8fffe6);}
.esito-bar i.no{background:linear-gradient(90deg,#ff6f91,#ffa8bd);}
/* il riquadro che ha fermato la tappa: non un allarme, ma abbastanza da
   distinguerlo dall'altro, che invece è andato bene */
.esito.blocca{
  border-color:rgba(255,111,145,.55);
  box-shadow:0 0 0 1px rgba(255,111,145,.18), 0 0 26px rgba(255,111,145,.14);
}

/* punti e combo: ci sono, ma non sono la lezione */
/* «Rifai la tappa» è una terza scelta che quasi nessuno cerca: come riga di
   testo c'è per chi la vuole e non pesa su chi vuole solo andare avanti. */
/* «Ascolta» è uno strumento, non un'azione: nella riga dei risultati resta
   la sola icona, così non compete con «Prossima tappa». Il nome ce l'ha
   nel title e nell'aria-label, che è dove serve a chi non vede l'icona. */
#results .results-actions .btn-voce span{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
#results .results-actions .btn-voce{padding:12px 14px;}

.btn-riga{
  background:none; border:0; padding:6px 10px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(226,232,255,.25);
}
.btn-riga:hover, .btn-riga:focus-visible{color:var(--ink);}

.stars[hidden]{display:none;}

.stats{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.stat{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px;
  padding:18px 24px; min-width:110px; display:flex; flex-direction:column; gap:8px;
}
.stat-num{font-size:28px; font-weight:800; color:var(--gold);}
.stat-lbl{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
/* ---------- esito della tappa ----------
   La runa conquistata, o lo Scriba che ti rimanda indietro. Sta sopra ai
   numeri perché è la prima cosa da capire: com'è andata si vede prima di
   leggere una cifra. */
.result-art{
  display:flex; align-items:center; justify-content:center;
  min-height:150px; margin-bottom:-4px;
}
/* Grande: è l'elemento che dice com'è andata, e a novanta pixel galleggiava
   nel vuoto senza pesare nulla. */
.esito-runa{
  width:134px; height:148px;
  filter:drop-shadow(0 0 34px color-mix(in srgb, var(--ah,#6ff0e0) 55%, transparent));
  animation:esito-sale .5s cubic-bezier(.2,.9,.3,1.2) both;
}
/* Perdendo, la runa non si rompe: non si accende. La luce prova a salire e
   si spegne — un secondo, e resta la pietra al buio. È la stessa cosa che
   si vede sulla mappa quando una tappa non è ancora fatta, ed è coerente
   con il bottone che sta sotto: «Riprova» a una cosa spenta si può. */
.result-art.perso .esito-runa{
  animation:esito-spenta 1.5s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes esito-sale{
  from{opacity:0; transform:translateY(16px) scale(.86);}
  to  {opacity:1; transform:none;}
}
@keyframes esito-spenta{
  0%  {opacity:0; transform:scale(.94);
       filter:drop-shadow(0 0 26px color-mix(in srgb, var(--ah,#8b84ab) 45%, transparent));}
  30% {opacity:1; transform:scale(1);
       filter:drop-shadow(0 0 26px color-mix(in srgb, var(--ah,#8b84ab) 45%, transparent));}
  100%{opacity:1; transform:scale(1);
       filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
}
@media (prefers-reduced-motion:reduce){
  .esito-runa, .result-art.perso .esito-runa{animation-duration:.01s;}
}
@media (max-height:820px){
  .result-art{min-height:100px;}
  .esito-runa{width:92px; height:102px;}
}

/* Le stelle sono il premio, e stavano dopo tre riquadri di numeri, a 38px.
   Adesso stanno attaccate alla runa — sono la stessa cosa — e sono grandi
   quanto un premio deve essere. */
.stars{font-size:54px; letter-spacing:14px; color:#3a3f66; line-height:1;
  margin:-6px 0 2px; text-indent:14px;}
.stars .on{color:var(--gold); text-shadow:0 0 26px rgba(255,210,122,.65);}
@media (max-height:760px){ .stars{font-size:42px; letter-spacing:11px;} }
/* ---------- che cosa fare adesso ----------
   Era una riga di 13px grigi, centrata, sospesa fra i numeri e i bottoni:
   la zona morta di qualsiasi schermata di esito, quella che l'occhio salta
   per andare dal risultato al pulsante. Ed è l'unica frase che dice al
   bambino che cosa toccare la prossima volta.
   Ha un riquadro, sta attaccata al bottone che la mette in pratica, è
   allineata a sinistra (il centrato costringe a ricercare l'inizio di ogni
   riga: la cosa che a un lettore in difficoltà costa di più) e ha il corpo
   di un testo, non di una nota a piè di pagina. */
.goal-note{
  max-width:32em; margin:2px auto 0; text-align:left;
  font-size:15px; line-height:1.65; color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:11px 15px;
}
#results.esito-no .goal-note{border-left-color:var(--coral);}
.goal-note:empty{display:none;}
.goal-note b{color:var(--gold);}
.goal-note b.ok{color:var(--ok);} .goal-note b.no{color:var(--coral);}
.results-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- diploma (mage rank) ---------- */
.scroll-diploma{
  background:radial-gradient(circle at 50% 0%, #2a2160 0%, #140d30 82%);
  border:2px solid var(--gold); border-radius:20px;
  padding:34px 42px; max-width:520px; display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 0 50px rgba(255,210,122,.28);
}
.dip-sigil{font-size:56px; filter:drop-shadow(0 0 16px rgba(255,210,122,.6));}
/* il disegno del grado, quando c'è, al posto dell'emoji */
.dip-img{display:block; width:clamp(88px,14vw,120px); height:auto; margin:0 auto;}
/* lo stemma del grado nella barra: un pulsante come gli altri, ma quello
   che ci sta dentro è un disegno e non un'icona di linea */
.grado-btn{padding:0; overflow:hidden;}
.grado-img{width:34px; height:34px; display:block;}
/* i gradi non ancora presi, nella scheda: presenti ma smorzati */
.rep-table tr.rep-vuoto td{opacity:.45;}
.dip-kicker{font-size:10px; letter-spacing:.16em; color:#b9a8e8; text-transform:uppercase;}
.dip-a-chi{display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--serif); font-size:clamp(18px,3vw,26px); color:var(--ink);}
.dip-a-chi .sigillo{width:34px; height:34px;}
.dip-grade{font-family:var(--serif); font-size:clamp(22px,4vw,34px); color:var(--gold); text-shadow:0 0 22px rgba(255,210,122,.4);}
.dip-blurb{font-size:14px; line-height:1.8; color:var(--ink); text-align:center;}
.dip-date{font-size:11px; color:#8f83b8;}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:6px;}

@media (max-width:520px){
  .logo-top{font-size:30px;}
  .emblema{width:70px;}
  #hud{font-size:11px;}
  .hud-item{min-width:58px; padding:6px 9px;}
  .kb-key{width:26px; height:26px; font-size:10px;}
  .kb-key.space{width:130px;}
}

/* Finestre basse — un portatile con la barra del browser, o la finestra non
   massimizzata. Il titolo scalava solo sulla larghezza, quindi restava alto
   uguale mentre lo spazio verticale finiva. Qui stringe l'intestazione, che è
   la parte che non serve a giocare, e lascia intatta la mappa. */
@media (max-height:820px){
  .logo-top{font-size:clamp(26px,4.4vw,40px); letter-spacing:6px; text-indent:6px;}
  .emblema{width:clamp(62px,8vw,84px); margin-bottom:8px;}
  .logo-sub{font-size:15px; margin-top:4px;}
  .logo{line-height:1.2;}
  .tagline{font-size:13.5px;}
  .screen{gap:14px; padding:16px 24px;}
  .op-zone{margin-top:14px;}
  .exit-link{margin-top:16px;}
}
@media (max-height:640px){
  .logo-sub, .tagline{display:none;}   /* decorazione: sparisce prima della mappa */
  .logo-top{font-size:clamp(22px,3.6vw,32px); letter-spacing:5px; text-indent:5px;}
  .emblema{width:58px; margin-bottom:6px;}
  .screen{gap:10px; padding:12px 24px;}
}

/* Schermi alti: la scena cresce, e con lei l'aiuto didattico — una tastiera
   piccola sotto una scena grande si legge peggio, ed è lì che si guarda per
   trovare il tasto. */
@media (min-height:1000px){
  .kb-key{width:40px; height:40px; font-size:14.5px;}
  .kb-key.space{width:220px;}
  #targetLine{font-size:16px;}
  #game{--contorno:330px;}                                   /* tasti più alti */
}

/* La schermata di gioco ha quattro fasce da far stare insieme: HUD, scena,
   riga dell'incantesimo, tastiera e mani. Su una finestra bassa si stringe
   tutto il contorno — mai la scena, che è dove si guarda. */
@media (max-height:860px){
  #game{padding-top:6px; gap:6px; --contorno:257px;}
  #hud{font-size:12px; gap:6px;}
  .hud-item{padding:5px 10px; min-width:64px; gap:1px;}
  .kb-key{width:36px; height:36px; font-size:13.5px;}
  #keyboard{padding:8px 10px; gap:4px;}
  .kb-row{gap:4px;}
  #targetLine{font-size:15px;}
}
@media (max-height:720px){
  #game{--contorno:279px;}
  #hud{font-size:11px;}
  .hud-item{padding:4px 8px; min-width:56px;}
  .hud-label{font-size:7.5px;}
  .kb-key{width:27px; height:27px; font-size:10.5px;}
  .kb-key.space{width:120px;}
  #fingerHint{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;}}

.goal-note .beat{display:inline-block; margin-top:8px; font-family:var(--serif);
  font-style:italic; color:#d7c9ff; line-height:1.7;}

/* ---------- profiles ---------- */
.user-list{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:900px;}
.user-card{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px;
  padding:18px 20px; min-width:150px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .12s, border-color .15s, box-shadow .15s;
  position:relative;
}
.user-card:hover{transform:translateY(-4px); border-color:rgba(255,210,122,.55); box-shadow:0 14px 34px rgba(0,0,0,.4);}
.user-card .u-avatar{font-size:40px; line-height:1;}
.user-card .u-name{font-size:15px; font-weight:800;}
.user-card .u-meta{font-size:11px; color:var(--muted);}
.user-card .u-del{
  position:absolute; top:8px; right:10px; font-size:14px; opacity:.35;
  background:none; border:none; color:var(--ink); cursor:pointer; padding:2px 4px;
}
.user-card .u-del:hover{opacity:1; color:var(--coral);}

.new-user{
  display:flex; flex-direction:column; gap:14px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 24px;
}
.new-user.hidden{display:none;}
.avatar-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:420px;}
.avatar-opt{
  font-size:26px; width:48px; height:48px; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; background:rgba(255,255,255,.05);
  border:2px solid transparent; transition:border-color .12s, background .12s;
}
.avatar-opt:hover{background:rgba(255,255,255,.1);}
.avatar-opt.sel{border-color:var(--gold); background:rgba(255,210,122,.14);}
#userName{
  font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink);
  background:rgba(10,14,32,.7); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 16px; width:280px; text-align:center; outline:none;
}
#userName:focus{border-color:var(--gold);}
.new-user-actions{display:flex; gap:12px;}
#switchUserBtn #whoChip{margin-right:2px;}

/* ---------- cloud saves ---------- */
.cloud-panel{max-width:520px; gap:14px;}
.cloud-text{font-size:14px; line-height:1.8; color:var(--ink); text-align:center;}
.cloud-hint{font-size:12px; line-height:1.7; color:var(--muted); text-align:center;}
.code-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:24px; font-weight:800;
  letter-spacing:3px; color:var(--gold);
  background:rgba(10,14,32,.75); border:2px dashed rgba(255,210,122,.5);
  border-radius:14px; padding:16px 22px; user-select:all; cursor:copy;
}
.code-box:hover{border-color:var(--gold);}
#codeInput{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:18px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--ink); text-align:center;
  background:rgba(10,14,32,.7); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 16px; width:300px; outline:none;
}
#codeInput:focus{border-color:var(--gold);}
.cloud-badge{font-size:11px; color:var(--cyan); font-weight:700;}

/* ---------- test di velocità (valutazione) ---------- */
.assess-box{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px;
  padding:24px 28px; max-width:820px; width:100%;
  display:flex; flex-direction:column; gap:16px; align-items:center;
}
.assess-lead{font-size:15px; line-height:1.8; color:var(--ink); text-align:center; max-width:600px;}
.dur-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.dur-opt{
  font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  padding:10px 18px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1.5px solid var(--line);
  transition:border-color .12s, color .12s, background .12s;
}
.dur-opt:hover{background:rgba(255,255,255,.09);}
.dur-opt.sel{border-color:var(--gold); color:var(--gold); background:rgba(255,210,122,.12);}

.assess-top{display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px;}
.assess-timer{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:38px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;
}
.assess-live{font-size:14px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;}
.assess-text{
  font-family:var(--serif); font-size:23px; line-height:2.1; letter-spacing:.4px;
  white-space:pre-wrap; word-break:break-word;
  text-align:left; width:100%; color:#7f8bb5;
  background:rgba(10,14,32,.6); border:1px solid var(--line); border-radius:14px;
  padding:22px 26px; max-height:40vh; overflow-y:auto;
}
.assess-text .ok{color:#eef3ff;}
.assess-text .ko{color:#ff8fa8; background:rgba(255,111,145,.16); border-radius:3px;}
.assess-text .cur{
  background:var(--gold); color:#241a05; border-radius:3px;
  animation:curBlink 1.1s steps(2,start) infinite;
}
@keyframes curBlink{0%,100%{opacity:1}50%{opacity:.45}}
.assess-compare{font-size:14px; line-height:1.8; color:var(--muted); text-align:center;}
.assess-compare b{color:var(--ok);}
.assess-compare b.down{color:var(--coral);}
.kb-key.shift{width:52px; font-size:14px;}
.lvl-label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.dur-opt small{display:block; font-size:10px; font-weight:600; opacity:.75; margin-top:2px; letter-spacing:0;}

/* ---------- impostazioni per apprendista ---------- */
.set-box{display:flex; gap:20px; flex-wrap:wrap; justify-content:center; width:100%;}
.set-group{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px;
  padding:20px 22px; flex:1 1 340px; max-width:440px;
  display:flex; flex-direction:column; gap:14px; text-align:left;
}
.set-title{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
.set-row{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:14px;}
.set-row input[type=checkbox]{width:20px; height:20px; accent-color:var(--gold); flex:0 0 auto; margin-top:2px;}
.set-row b{font-weight:800; color:var(--ink);}
.set-row small{display:block; font-size:12px; line-height:1.6; color:var(--muted); margin-top:3px; font-weight:400;}
.set-row .set-lab{flex:1;}
.set-row select{
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink);
  background:rgba(10,14,32,.8); border:1.5px solid var(--line); border-radius:10px;
  padding:8px 10px; cursor:pointer; flex:0 0 auto;
}

/* ---- opzioni di leggibilità (applicate su <html>) ---- */
html.a11y-dys, html.a11y-dys body{
  --serif:var(--sans);
  letter-spacing:.03em; word-spacing:.12em;
}
html.a11y-dys .assess-text, html.a11y-dys .story-text{letter-spacing:.05em; line-height:2.3;}
html.a11y-big{font-size:118%;}
html.a11y-big .assess-text{font-size:26px;}
html.a11y-contrast{--bg0:#03040c; --bg1:#080b1c; --ink:#ffffff; --muted:#c8d4f5;
  --card:rgba(12,16,40,.9); --panel:rgba(8,11,28,.92); --line:rgba(255,255,255,.28);}
html.a11y-contrast #app{background:linear-gradient(180deg,#080b1c,#03040c 90%);}
html.a11y-still *{animation:none !important; transition:none !important;}

/* ---------- scheda progressi (operatore) ---------- */
.report-sheet{
  background:#fff; color:#1c2035; border-radius:16px;
  padding:28px 32px; width:100%; max-width:860px; text-align:left;
  max-height:62vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.rep-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  border-bottom:2px solid #e6e8f2; padding-bottom:14px; margin-bottom:18px;}
.rep-title{font-family:var(--serif); font-size:19px; color:#3a2f7a; font-weight:700;}
.rep-sub{font-size:15px; font-weight:800; margin-top:4px;}
.rep-date{font-size:12px; color:#6b7194; white-space:nowrap;}
.rep-section{margin-bottom:22px;}
.rep-section h3{font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#6b7194; margin-bottom:10px;}
.rep-table{width:100%; border-collapse:collapse; font-size:13px;}
.rep-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:#6b7194; border-bottom:1px solid #e6e8f2; padding:6px 8px;}
.rep-table td{padding:7px 8px; border-bottom:1px solid #f0f1f7; font-variant-numeric:tabular-nums;}
.rep-table tr:last-child td{border-bottom:none;}
.rep-delta{font-weight:800; color:#1a8f5a;}
.rep-delta.down{color:#c0392b;}
.rep-empty{font-size:13px; color:#6b7194; font-style:italic;}
.rep-note{font-size:11px; color:#8a90b0; border-top:1px solid #e6e8f2; padding-top:12px;}
.rep-stars{color:#c99b1e; letter-spacing:1px;}
.rep-spark{display:block; margin-top:10px;}

/* ------------------------------------------------------------------
   Avviso «serve una tastiera».
   Compare solo su dispositivi senza puntatore preciso, prima ancora che
   il bambino crei il mago: la delusione deve arrivare prima di
   investirci, non dopo. Non blocca: si può proseguire.
   ------------------------------------------------------------------ */
#senzaTastiera{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:24px; background:rgba(8,10,26,.92); backdrop-filter:blur(3px);}
#senzaTastiera[hidden]{display:none;}
#senzaTastiera .st-carta{max-width:24rem; text-align:center; background:#141a34;
  border:1px solid #2b3260; border-radius:18px; padding:30px 26px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
#senzaTastiera .st-ico{width:44px; height:44px; color:#8fd6ff; margin-bottom:14px;}
#senzaTastiera h2{font-size:21px; margin:0 0 12px; color:#ffd27a;}
#senzaTastiera p{font-size:15px; line-height:1.6; color:#c3c8e4; margin:0 0 14px;}
#senzaTastiera .st-nota{font-size:13px; color:#8a90b0;}
#senzaTastiera .btn{margin-top:6px;}

@media print{
  body{overflow:visible; background:#fff;}
  #app{display:block; height:auto; background:#fff;}
  .screen{display:none !important;}
  #report.active{display:block !important; width:100%; padding:0;}
  .report-sheet{max-height:none; overflow:visible; box-shadow:none; border-radius:0; max-width:none;}
  .no-print{display:none !important;}
}

/* la distinzione fra la misura e il ritmo di gioco, nella scheda */
.rep-h-nota{font-weight:600; font-size:12px; color:var(--muted); letter-spacing:0;}
.rep-h-sub{margin:2px 0 8px; font-size:11.5px; line-height:1.6; color:var(--muted); max-width:70ch;}

/* ============================================================
   «Ascolta»: il pulsante che legge la schermata ad alta voce.
   Discreto ma non minuscolo — il bersaglio resta di 44 pixel, che è la
   misura sotto la quale un dito non ci arriva. Sta in fondo alle azioni,
   a sinistra del pulsante che va avanti: chi vuole proseguire non ci
   inciampa, chi ha bisogno di sentire lo trova dove guarda.
   ============================================================ */
.btn-voce{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:800; font-size:13.5px;
  color:#cdd8f5; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:14px;
  padding:0 16px; min-height:44px; cursor:pointer;
  margin-right:auto;              /* spinge gli altri pulsanti a destra */
  transition:background .12s, color .12s, border-color .12s;
}
.btn-voce:hover{background:rgba(255,255,255,.13); color:#fff;}
.btn-voce .ico{width:17px; height:17px;}
.btn-voce.parla{
  color:#0f1330; background:var(--gold); border-color:var(--gold);
}
.btn-voce.parla .ico{animation:voce-onda .9s ease-in-out infinite;}
@keyframes voce-onda{0%,100%{opacity:1;} 50%{opacity:.45;}}
@media (max-width:560px){ .btn-voce span{display:none;} .btn-voce{padding:0 13px;} }

/* ============================================================
   Il foglio dei risultati: una misura da leggere.
   ------------------------------------------------------------
   I testi si distendevano per tutta la larghezza della finestra — su uno
   schermo largo il pezzo di racconto finiva su righe da centoventi
   caratteri. Per chiunque è faticoso, per un bambino con dislessia è il
   punto in cui si smette di leggere. Trentaquattro caratteri e mezzo per
   riga circa: la misura di un libro.
   ============================================================ */
#results .goal-note,
#results .res-beat,
#results .res-pezzo,
#results .risultato-minore{ max-width:34em; margin-left:auto; margin-right:auto; }

/* il pezzo di racconto: la voce del mondo, non un'altra riga di verdetto */
.res-beat{
  margin:14px auto 0; padding:14px 20px 14px 22px;
  border-left:2px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-family:var(--serif); font-size:16px; line-height:1.75;
  color:#f0e6d2; text-align:left; font-style:normal;
}
.res-beat[hidden]{display:none;}

/* il frammento di pagina: stessa lingua dell'intestazione d'atto sulla mappa */
/* non flex: con `display:flex` ogni pezzo di testo diventa un elemento a sé
   e il `gap` si infila anche prima del punto finale — «Torri e Cripte .» */
.res-pezzo{
  display:block; text-align:center;
  margin:14px auto 0; font-size:12.5px; color:var(--muted);
}
.res-pezzo[hidden]{display:none;}
.res-pezzo b{color:var(--gold); font-weight:800;}
.res-pezzo .rp-pezzi{display:inline-flex; gap:3px; vertical-align:-2px; margin-right:7px;}
.res-pezzo .rp-pezzi i{
  width:9px; height:12px; border-radius:2px; display:block;
  border:1px solid rgba(255,210,122,.4);
}
.res-pezzo .rp-pezzi i.on{background:rgba(255,210,122,.62); border-color:var(--gold);}