/* ==========================================================================
   Oltremappa — stile «Arcipelago»
   Pensato per iPad (Safari e app sulla schermata Home, con Apple Pencil) e per bambini di 7 anni.

   L'idea: il gioco è una carta nautica all'alba. Sotto c'è il mare (pesca → acquamarina → turchese)
   con isole, rotte tratteggiate e una rosa dei venti; sopra galleggia il vetro, come una lente
   appoggiata sulla mappa. Dettagli d'ottone da carta nautica per stelle, premi e cornici: oro = conquista.
   Durante esercizi e corsivo la carta si fa da parte («la cabina tranquilla»): resta solo il mare calmo,
   e torna sul risultato del livello.

   Materiali
   - Vetro vero (backdrop-filter, sempre anche con -webkit-): solo pochi comandi che galleggiano, al massimo
     2 superfici sfocate per schermata (+1 con una finestra aperta): gruppi della barra in alto, testata del
     gioco, fumetto di Bit nel gioco, risultato, velo delle finestre, avviso, targa del titolo all'accesso.
   - Vetro «finto» (riempimenti traslucidi + riflessi in gradiente + bordo luminoso, nessun filtro): tutte le
     carte ripetute (mondi, livelli, 62 carte dell'Atlante, uova, scelte, tasti, tasselli, pannelli).
   Leggibilità: Andika per tutto ciò che si legge (creato per chi impara a leggere); titoli ed etichette in
   ui-rounded (SF Rounded su iPad) con ripiego Baloo 2. Testo blu notte su vetro chiaro (AA o meglio);
   testo bianco solo su colori scuri e caratteri grandi.
   Ripieghi: senza backdrop-filter, prefers-reduced-transparency (riempimenti opachi), prefers-reduced-motion,
   stampa semplice dei biglietti. color-scheme: light (l'iPad in modalità scura non cambia nulla).
   ========================================================================== */

/* ---------- 1. Gettoni ---------- */
:root {
  color-scheme: light;

  /* Inchiostro */
  --ink: #16274A;
  --ink-soft: #44557A;
  --ink-mute: #5B6B8C;
  --line: rgba(22, 39, 74, .14);
  --hair: rgba(22, 39, 74, .09);
  --card: #FFFFFF;

  /* Azione ed esiti (bianco su --ok ≈ 4:1, su --ok-d ≈ 5,5:1) */
  --primary: #FF7448;
  --primary-d: #D9461F;
  --ok: #17A05A;
  --ok-d: #0B7A40;
  --ko: #FF9440;
  --ko-d: #D96B10;
  --gold: #F4B740;
  --ok-fill: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #2BB46B 0%, #148F52 55%, #0B7A40 100%);
  --ok-soft: linear-gradient(180deg, #F0FBF4, #D3F3DF);
  --ko-soft: linear-gradient(180deg, #FFF3EA, #FFE0C7);
  /* Arancio dei pulsanti principali: il riflesso resta sopra le lettere, dietro al testo il fondo è scuro
     abbastanza per il bianco (≈ 4,7–5,1:1 nella fascia delle lettere: AA anche per il testo normale sul telefono). */
  --primary-fill: radial-gradient(120% 56% at 30% -12%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #E8643A 0%, #CC4C22 28%, #C24418 60%, #A8360E 100%);

  /* Materie (colore pieno; le componenti rgb sono in .subj-*) */
  --math: #2F7BF6;
  --ita: #FF4F74;
  --cor: #8B5CF0;

  /* Mare e ottone */
  --dawn: #FFE7CF;            /* colore in cima allo sfondo = theme-color dell'app */
  --sea: #1E6F96;
  --sea-d: #0F4C6C;
  --sea-rgb: 30, 111, 150;
  --brass: #C8962F;
  --brass-l: #F1CF7A;
  --brass-ink: #8A5E0E;

  /* Caratteri */
  --font-text: 'Andika', 'Trebuchet MS', system-ui, sans-serif;
  --font-head: ui-rounded, 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-brand: 'Baloo 2', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;

  /* Raggi concentrici (raggio interno = raggio esterno − margine) */
  --r-sheet: 40px;   /* finestre, risultato, vassoio del tastierino */
  --r-card: 34px;    /* carte, scheda dell'esercizio, pannelli */
  --r-tile: 28px;    /* scelte, tasti, uova, carte dell'Atlante */
  --r-inner: 20px;   /* elementi annidati vicino a un angolo */
  --r-pill: 999px;
  --radius: var(--r-card);

  /* Materiali di vetro */
  --g-solid: linear-gradient(168deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .91) 55%, rgba(255, 255, 255, .87) 100%);
  --g-frost: linear-gradient(168deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .87) 48%, rgba(255, 255, 255, .82) 100%);
  --g-clear: linear-gradient(168deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .42) 100%);
  --g-sheen: radial-gradient(140% 80% at 18% -18%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 52%);
  --g-corner: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%);
  --g-rim: linear-gradient(150deg, #fff 0%, rgba(255, 255, 255, .45) 22%, rgba(255, 255, 255, .08) 52%, rgba(255, 255, 255, .35) 80%, rgba(255, 255, 255, .95) 100%);
  --g-blur: blur(20px) saturate(185%);
  --g-lens: inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, .95), inset -1.5px -1.5px 1px -1px rgba(255, 255, 255, .55), inset 0 0 14px rgba(255, 255, 255, .35);

  /* Ombre */
  --g-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 -14px 22px -16px rgba(30, 111, 150, .22), 0 18px 40px -18px rgba(12, 62, 96, .5), 0 4px 12px -4px rgba(12, 62, 96, .14);
  --g-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 10px 20px -10px rgba(12, 62, 96, .45), 0 2px 5px -1px rgba(12, 62, 96, .12);
  --shadow: var(--g-shadow);
  --well: inset 0 2px 6px rgba(12, 62, 96, .14), inset 0 -1px 0 rgba(255, 255, 255, .8);

  /* Movimento */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Margini laterali: almeno 16px, di più se c'è la tacca (iPhone in orizzontale, viewport-fit=cover). */
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}

/* Tinte delle materie: colore, componenti rgb (per alone e vetro), inchiostro scuro per i testi colorati,
   disco per le cifre bianche dei livelli (bianco ≥ 4,2:1, ancora vivace) */
.subj-mat { --subj: var(--math); --subj-rgb: 47, 123, 246; --subj-ink: #1E5ED0; --subj-disc: #2A6FE8; }
.subj-ita { --subj: var(--ita); --subj-rgb: 255, 79, 116; --subj-ink: #C92A50; --subj-disc: #E03A62; }
.subj-cor { --subj: var(--cor); --subj-rgb: 139, 92, 240; --subj-ink: #6B3FD0; --subj-disc: #7C4DE6; }
.subj-daily { --subj: var(--primary); --subj-rgb: 255, 116, 72; --subj-ink: #C2441C; --subj-disc: #CC4C22; }

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
/* Lo scorrimento automatico (scrollIntoView) non porta mai un elemento sotto la barra in alto. */
html { scroll-padding-top: calc(104px + var(--safe-t)); scroll-padding-bottom: 24px; }
/* Nel gioco Bit occupa l'angolo in basso: la spiegazione che scorre in vista si ferma sopra di lui. */
html:has(.screen.play) { scroll-padding-top: calc(84px + var(--safe-t)); scroll-padding-bottom: 150px; }
body {
  font-family: var(--font-text);
  font-size: 20px;
  color: var(--ink);
  /* Colore unico (passa alla tela): niente background-attachment: fixed, lento su iOS. Il disegno sta nei livelli fissi qui sotto. */
  background: #CDEFEA;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
input, select, textarea { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: .3em 0; color: var(--ink); }
svg { display: block; }

#app { min-height: 100%; }
.screen { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut-r) calc(28px + var(--safe-b)) var(--gut-l); min-height: 100vh; min-height: 100svh; }
.muted { color: var(--ink-soft); font-size: .85em; }
.row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.center { text-align: center; }
.warn { color: #B3262B; }

/* Maiuscolo opzionale per i testi di lettura */
body.caps .txt { text-transform: uppercase; }
body.caps .nocaps .txt, body.caps .txt.nocaps, body.caps .nocaps.txt, body.caps .nocaps { text-transform: none; }

/* ---------- 3. Fondo: la carta nautica all'alba ----------
   Due livelli fissi dietro a tutto (position: fixed, mai background-attachment: fixed):
   body::before = il mare (alba, onde); body::after = i punti di riferimento (rosa, barca, isolotti, isola, rotte).
   Solo le rotte si adattano allo schermo (cover); la barca ha un livello suo, ancorato in px come gli isolotti
   accanto ai quali naviga: a ogni dimensione resta in acqua (mai sulla terraferma o sulla rosa). */
body::before, body::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
}
body::before {
  background:
    url(img/mappa-onde.svg) 0 0 / 240px 240px repeat,
    radial-gradient(55% 40% at 88% -6%, rgba(255, 246, 222, .95), rgba(255, 246, 222, 0) 70%),
    radial-gradient(45% 35% at -5% 18%, rgba(255, 190, 176, .55), rgba(255, 190, 176, 0) 70%),
    linear-gradient(172deg, #FFE7CF 0%, #FFDCCB 16%, #E4F3E8 36%, #B9E9E6 55%, #84D3DC 78%, #5BBBD3 100%);
}
body::after {
  background:
    url(img/mappa-rosa.svg) right -54px bottom -54px / 250px 250px no-repeat,
    url(img/mappa-barca.svg) right 398px bottom 44px / 46px auto no-repeat,
    url(img/mappa-isolotti.svg) right 210px bottom 6px / 210px auto no-repeat,
    url(img/mappa-isola.svg) left -110px bottom -70px / 450px auto no-repeat,
    url(img/mappa-rotte.svg) center / cover no-repeat;
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
/* Esercizi e corsivo: la cabina tranquilla. Via isole, rosa, rotte e barca; mare chiaro e calmo,
   con una luce morbida dietro la scheda. Così lo sguardo resta sull'esercizio. */
body:has(.screen.play)::after { opacity: 0; transform: translateY(36px); }
body:has(.screen.play)::before {
  background:
    url(img/mappa-onde-calme.svg) 0 0 / 240px 240px repeat,
    radial-gradient(75% 55% at 50% 24%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 72%),
    linear-gradient(172deg, #FFEBD9 0%, #F7F1E6 24%, #E4F4EF 52%, #CBEBEA 78%, #B8E3E6 100%);
}
/* Risultato del livello: come premio la carta riaffiora (senza l'isola grande, dove sta Bit). */
body:has(.screen.play .result)::after {
  opacity: 1; transform: none;
  background:
    url(img/mappa-rosa.svg) right -54px bottom -54px / 250px 250px no-repeat,
    url(img/mappa-barca.svg) right 398px bottom 44px / 46px auto no-repeat,
    url(img/mappa-isolotti.svg) right 210px bottom 6px / 210px auto no-repeat,
    url(img/mappa-rotte.svg) center / cover no-repeat;
}
/* Pagine lunghe che scorrono sopra la carta (Atlante, mondi, uova, genitori, moduli, informativa): punti di riferimento
   attenuati, così le carte di vetro finto (che non sfocano) non mostrano sagome nette dietro ai testi. */
body:has(.screen.dex, .screen.map, .screen.eggs-screen, .screen.parents, .screen.privacy, .screen.privacy-kids, .screen.fam.narrow)::after { opacity: .42; }

/* ---------- 4. Ricette del vetro ---------- */
/* Bordo luminoso (riflesso sui bordi) disegnato con una maschera: niente filtri. */
.tb-left, .tb-right, .tb-title, .play-head, .home-card, .world-card, .lvl, .ex-card, .result, .panel, .profile-card,
.egg-card, .shards, .empty-eggs, .abaco-live, .col-grid, .btn, .login-hero > div:not(.login-bit), .cur-top, .explain,
.keypad, .dex-filters,
.choice, .key, .tile, .tapword, .pass-key, .ab-btn {
  position: relative;
  isolation: isolate;
}
.tb-left::after, .tb-right::after, .tb-title:not(:empty)::after, .play-head::after, .home-card::after, .world-card::after, .lvl::after,
.ex-card::after, .result::after, .panel::after, .profile-card::after, .egg-card::after, .shards::after, .empty-eggs::after,
.abaco-live::after, .col-grid::after, .btn::after, .login-hero > div:not(.login-bit)::after, .cur-top::after, .keypad::after,
.dex-filters::after,
.choice::after, .key::after, .tile::after, .tapword::after, .pass-key::after, .ab-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Vetro «toccabile» (scelte, tasti, tasselli, animali segreti, abaco): riflesso a lente sulla metà alta,
   spessore colorato in basso, ombra tinta; alla pressione si schiaccia come una goccia e torna a molla.
   --t = tinta (rgb): mare per i tasti, colore della materia per le risposte. */
.choice, .key, .tile, .tapword, .pass-key, .ab-btn {
  --t: var(--sea-rgb);
  border: 0; color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .95) 50%, rgba(var(--t), .13) 100%), rgba(255, 255, 255, .74);
  box-shadow: inset 0 2px 0 #fff, inset 0 -10px 18px -10px rgba(var(--t), .42), inset 0 0 0 1px rgba(var(--t), .1), 0 14px 24px -12px rgba(var(--t), .55), 0 2px 4px rgba(12, 62, 96, .1);
  transition: transform .45s var(--spring), box-shadow .25s, background-color .2s, opacity .25s, filter .25s;
}
.choice, .tile, .tapword { --t: var(--subj-rgb, var(--sea-rgb)); }
.choice::before, .key::before, .tile::before, .tapword::before, .pass-key::before, .ab-btn::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 3px; height: 42%; z-index: -1; pointer-events: none;
  border-radius: 999px 999px 50% 50% / 999px 999px 80% 80%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.choice:active, .key:active, .tile:active, .tapword:active, .pass-key:active, .ab-btn:active {
  transform: scale(1.03, .93); filter: brightness(1.04); transition-duration: .09s;
  box-shadow: inset 0 2px 0 #fff, inset 0 -10px 18px -10px rgba(var(--t), .5), 0 0 0 6px rgba(255, 255, 255, .65), 0 0 22px rgba(var(--t), .35);
}

/* ---------- 5. Bottoni a capsula ---------- */
.btn {
  border: 0; border-radius: var(--r-pill); padding: 14px 26px; min-height: 58px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: .005em; color: var(--ink);
  background: var(--g-sheen), var(--g-frost);
  box-shadow: var(--g-shadow-sm);
  transition: transform .4s var(--spring), box-shadow .25s, filter .25s, background .2s, color .2s;
}
.btn:active { transform: scale(.95, .93); box-shadow: var(--g-shadow-sm), 0 0 0 5px rgba(255, 255, 255, .55); filter: brightness(1.04); transition-duration: .1s; }
.btn-ghost { background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)); }
.btn-primary {
  color: #fff; text-shadow: 0 1px 2px rgba(120, 30, 0, .35);
  background: var(--primary-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(150, 40, 10, .25), 0 12px 24px -10px rgba(217, 70, 31, .7), 0 2px 6px -1px rgba(150, 40, 10, .2);
}
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 5px rgba(255, 141, 94, .35), 0 8px 18px -8px rgba(217, 70, 31, .7); }
.btn-ok {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .4);
  background: var(--ok-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(0, 70, 30, .25), 0 12px 24px -10px rgba(11, 122, 64, .7), 0 2px 6px -1px rgba(0, 70, 30, .2);
}
.btn-ok:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 0 5px rgba(60, 212, 135, .3), 0 8px 18px -8px rgba(11, 122, 64, .7); }
.btn-danger {
  color: #fff; text-shadow: 0 1px 2px rgba(110, 0, 10, .35);
  background: radial-gradient(120% 56% at 30% -12%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #E04850 0%, #CC3540 40%, #B5262F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 24px -10px rgba(181, 38, 47, .65);
}
.btn.big { font-size: 1.32rem; padding: 16px 34px; min-height: 66px; }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: .95rem; border-radius: var(--r-pill); }
.btn-sm.btn-primary { background: linear-gradient(180deg, #C94A20, #A8360E); }
.btn-sm.btn-ok { background: linear-gradient(180deg, #11884A, #0A6B38); }
.btn.busy { opacity: .6; }
/* Disattivato = vetro neutro e leggibile (non «rotto»); quando si accende torna colorato: «ora puoi». */
.btn:disabled {
  pointer-events: none; opacity: 1; filter: none; color: var(--ink-mute); text-shadow: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .54));
  box-shadow: inset 0 0 0 2px rgba(22, 39, 74, .12), 0 6px 14px -10px rgba(12, 62, 96, .35);
}
.btn:disabled::before { display: none; }

/* Riflesso che passa due volte sui pulsanti principali grandi, poi si ferma (solo transform: niente ridisegni). */
.btn-primary.big { overflow: hidden; }
.btn-primary.big::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(0) skewX(-16deg);
  animation: arcShine 4.5s ease-in-out 1s 2 both;
}
@keyframes arcShine { 0%, 50% { transform: translateX(0) skewX(-16deg); } 85%, 100% { transform: translateX(420%) skewX(-16deg); } }
/* Nel corsivo i pulsanti stanno sotto la lavagna: niente luce in movimento mentre si scrive. */
.cursive-area .cur-btns .btn-primary.big::before { display: none; }

/* Chip a capsula */
.chip {
  border: 0; border-radius: var(--r-pill); min-height: 44px; padding: 6px 14px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--ink);
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  box-shadow: var(--g-shadow-sm);
  transition: transform .35s var(--spring), background .2s;
}
.chip:active { transform: scale(.94); }
.chip.sel {
  color: #fff; background: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #2A86AD, var(--sea-d));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px -8px rgba(15, 76, 108, .7);
}
/* Uova da schiudere: moneta d'oro che pulsa tre volte (solo transform), poi resta ferma. */
.chip-hot {
  background: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #FFE48F, #F6BE45);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(200, 150, 47, .55), 0 6px 16px -6px rgba(200, 150, 47, .8);
  animation: arcPulse 1.6s ease-in-out .6s 3;
}
@keyframes arcPulse { 50% { transform: scale(1.08); } }

.speak-btn {
  border: 0; border-radius: 50%; width: 54px; height: 54px; flex: none; font-size: 1.4rem; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .74));
  box-shadow: var(--g-shadow-sm);
  transition: transform .35s var(--spring);
}
.speak-btn:active { transform: scale(.9); }
.speak-btn.sm { width: 46px; height: 46px; font-size: 1.15rem; vertical-align: middle; margin-left: 8px; }

/* ---------- 6. Barra in alto: comandi che galleggiano ---------- */
/* Tre colonne: i gruppi laterali in colonne uguali, così il titolo sta al centro dello schermo in ogni schermata. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 0 calc(-1 * var(--gut-r)) 4px calc(-1 * var(--gut-l)); padding: calc(10px + var(--safe-t)) var(--gut-r) 16px var(--gut-l);
}
.tb-left { justify-self: start; }
.tb-right { justify-self: end; }
/* Bordo di scorrimento: i contenuti sfumano sotto i comandi. Quasi opaco, così non serve sfocare
   (una striscia sfocata larga quanto lo schermo sarebbe pesante sull'iPad durante lo scorrimento). */
.topbar::before {
  content: ''; position: fixed; z-index: -1; top: 0; left: 0; right: 0; height: calc(104px + var(--safe-t)); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 234, 214, .97) 0%, rgba(255, 234, 214, .93) 62%, rgba(255, 234, 214, 0) 100%);
}
.tb-left, .tb-right {
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--r-pill);
  background: var(--g-sheen), var(--g-clear);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-lens), var(--g-shadow);
}
.tb-left:empty, .tb-right:empty { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tb-left:empty::after, .tb-right:empty::after { display: none; }
/* Titolo: una terza capsula (vetro finto, sopra il velo), sempre leggibile anche quando i contenuti scorrono. */
.tb-title {
  margin: 0; justify-self: center; min-width: 0; max-width: min(46vw, 100%);
  font-size: 1.5rem; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-title:not(:empty) {
  padding: 7px 22px; border-radius: var(--r-pill);
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 252, 248, .96), rgba(255, 246, 236, .84));
  box-shadow: var(--g-shadow-sm);
}
.tb-back, .tb-avatar {
  border: 0; flex: none; width: 50px; height: 50px; border-radius: 50%; padding: 3px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .97), rgba(255, 255, 255, .6) 70%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(12, 62, 96, .1), 0 2px 6px -2px rgba(12, 62, 96, .25);
  transition: transform .35s var(--spring);
}
.tb-back { font-size: 2rem; line-height: 1; font-weight: 800; padding: 0 0 4px; }
.tb-back:active, .tb-avatar:active { transform: scale(.9); }
.tb-avatar svg { width: 100%; height: 100%; }
.tb-right .chip { background: transparent; box-shadow: none; min-height: 50px; padding: 6px 12px; font-size: 1.05rem; }
.tb-right .chip + .chip { position: relative; }
.tb-right .chip + .chip::before { content: ''; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 1px; background: rgba(22, 39, 74, .14); }
.tb-right .chip-hot {
  background: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #FFE48F, #F6BE45);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(200, 150, 47, .5);
}
.tb-right .chip-hot::before, .tb-right .chip-hot + .chip::before { display: none; }

/* ---------- 7. Finestre, avvisi, coriandoli ---------- */
/* Una sola superficie sfocata: il velo. Lo sfondo scompare e l'attenzione va alla finestra. */
.modal-back {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gut-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gut-l);
  background: linear-gradient(180deg, rgba(16, 72, 104, .26), rgba(10, 44, 76, .46));
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  animation: fadeIn .2s;
}
.modal-back.out { animation: fadeOut .2s forwards; }
.modal-box {
  /* In Safari vh è il viewport «grande»: con la barra visibile la finestra uscirebbe dal velo (✕ tagliata). dvh = area visibile. */
  position: relative; width: 100%; max-width: 640px; max-height: 92vh; max-height: calc(100dvh - 32px - var(--safe-t) - var(--safe-b)); overflow: auto; text-align: center;
  border-radius: var(--r-sheet); padding: 30px 26px 26px;
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 40px 90px -24px rgba(4, 22, 48, .6), 0 8px 24px -8px rgba(4, 22, 48, .3);
  animation: arcPop .45s var(--spring);
}
.modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.1rem; color: var(--ink);
  background: radial-gradient(120% 80% at 30% 0%, #fff, rgba(235, 243, 248, .85) 70%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px -2px rgba(12, 62, 96, .3);
}
.modal-box.modal-wide { max-width: 860px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }
@keyframes arcPop { from { transform: scale(.88) translateY(14px); opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

.toast {
  position: fixed; left: 50%; bottom: calc(30px + var(--safe-b)); transform: translateX(-50%); z-index: 200; max-width: 90vw; text-align: center;
  color: #fff; border-radius: 26px; padding: 14px 24px; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  background: linear-gradient(168deg, rgba(30, 52, 92, .86), rgba(14, 34, 66, .82));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -14px rgba(4, 22, 48, .55);
  animation: arcToastIn .45s var(--spring);
}
.toast.out { opacity: 0; transition: opacity .35s; }
@keyframes arcToastIn { from { transform: translate(-50%, 30px) scale(.9); opacity: 0; } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(calc(110vh + 40px)) rotate(720deg) translateX(40px); } }

/* ---------- 8. Stelle e pannelli ---------- */
/* Stella da conquistare: argento in rilievo (si vede che ne manca una). Conquistata: oro da carta nautica. */
.st {
  display: inline-block; font-size: 1.6em; line-height: 1; color: #B9C3D6;
  background: linear-gradient(180deg, #EEF2F8, #AEB9CC);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 #fff) drop-shadow(0 1px 1px rgba(22, 39, 74, .3));
}
.st.on {
  color: #F2B23A;
  background: linear-gradient(180deg, #FFEB9C 0%, #F6C04A 45%, #D99419 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(150, 95, 10, .55)) drop-shadow(0 0 6px rgba(255, 200, 80, .45));
}

.panel {
  border-radius: var(--r-card); padding: 20px 22px; margin: 14px 0;
  background: var(--g-sheen), var(--g-solid);
  box-shadow: var(--g-shadow);
}
.panel h3 { margin-top: 16px; }
.panel > .btn-primary { margin-top: 12px; }

/* ---------- 9. Accesso: profili, animali segreti, nuovo giocatore ---------- */
.login { text-align: center; padding-top: 34px; }
.login-hero { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; }
/* Targa del titolo: vetro con doppio filo d'ottone, come il cartiglio di una carta nautica. */
.login-hero > div:not(.login-bit) {
  padding: 16px 34px 18px; border-radius: var(--r-card);
  background: var(--g-sheen), var(--g-clear);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .55), inset 0 0 0 6px rgba(255, 255, 255, .25), inset 0 0 0 7px rgba(200, 150, 47, .35), var(--g-shadow);
}
.login-bit { width: 130px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(12, 62, 96, .25)); }
.logo {
  font-family: var(--font-brand); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: .5px; margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #2378A2 0%, #16274A 75%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .9));
}
.login-sub { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--brass-ink); }
.login-sub::before, .login-sub::after { content: '·  ✦  ·'; color: var(--brass); font-size: .8em; margin: 0 .5em; letter-spacing: -.1em; }
.login-q { margin-top: 28px; font-size: 1.8rem; }
.profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 14px 0 20px; }
.profile-card {
  border: 0; border-radius: var(--r-card); width: 180px; padding: 18px 10px 14px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* Quasi pieno: sull'accesso la carta non è attenuata e sotto i profili passano isola e faro. */
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95));
  box-shadow: var(--g-shadow);
  transition: transform .4s var(--spring);
}
.profile-card:active { transform: scale(.94); }
.profile-card.locked { opacity: .72; }
.pc-av {
  width: 116px; height: 116px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 6px 0 4px;
  background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(255, 255, 255, .6) 30%, rgba(196, 236, 242, .7) 70%, rgba(150, 214, 226, .8) 100%);
  box-shadow: 0 0 0 4px var(--brass-l), 0 0 0 6px var(--brass), inset 0 4px 10px rgba(12, 62, 96, .18), 0 10px 18px -8px rgba(120, 80, 10, .55);
}
.pc-av.plus {
  width: 104px; height: 104px; margin: 12px 0 10px; font-family: var(--font-head); font-size: 3.6rem; color: var(--primary-d);
  border: 3px dashed rgba(217, 70, 31, .45); background: rgba(255, 255, 255, .5); box-shadow: inset 0 2px 8px rgba(12, 62, 96, .08);
}
.pc-name { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }
.pc-lock { position: absolute; top: 8px; right: 12px; font-size: 1.6rem; }
.login-note { color: var(--ink-soft); font-size: .9rem; }
.notice-local, .login-note.notice-local {
  display: inline-block; border: 1.5px dashed rgba(200, 150, 47, .8); border-radius: var(--r-pill); padding: 8px 18px; font-size: .9rem; color: var(--ink);
  background: linear-gradient(168deg, rgba(255, 248, 225, .94), rgba(255, 240, 200, .82));
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(150, 100, 10, .6);
}
.notice-local.dev-unpaired { display: block; margin: 12px 0; padding: 10px 14px; border-radius: 22px; }
.notice-local.dev-unpaired p { margin: 0 0 8px; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Animali segreti */
.pass h2 { font-size: 1.5rem; padding: 0 30px; }
.pass-dots { display: flex; justify-content: center; gap: 12px; margin: 10px 0 16px; }
.pass-dots span {
  width: 64px; height: 64px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
  border: 2px dashed rgba(22, 39, 74, .22); background: rgba(255, 255, 255, .55); box-shadow: var(--well);
}
.pass-dots span.on {
  border: 2px solid var(--brass); background: linear-gradient(180deg, #FFF6D6, #FFE39A);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(244, 183, 64, .25);
  animation: arcSquish .45s var(--spring);
}
.pass-grid { display: grid; grid-template-columns: repeat(3, 94px); gap: 12px; justify-content: center; }
.pass-key { width: 94px; height: 94px; border-radius: var(--r-tile); font-size: 3rem; }
.pass-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pass-msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 700; color: #B45309; }
.pass-msg:empty { min-height: 0; margin: 0; }

/* Nuovo giocatore */
.wizard h2 { font-size: 1.5rem; padding: 0 24px; }
.wz-bit { width: 110px; margin: 0 auto; filter: drop-shadow(0 10px 10px rgba(12, 62, 96, .22)); }
.name-in, .gate-in, .f-in {
  border: 2px solid rgba(22, 39, 74, .14); background: rgba(255, 255, 255, .9); color: var(--ink);
  box-shadow: inset 0 2px 5px rgba(12, 62, 96, .1);
  transition: border-color .2s, box-shadow .2s;
}
.name-in:focus, .gate-in:focus, .f-in:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 2px 5px rgba(12, 62, 96, .08), 0 0 0 5px rgba(255, 116, 72, .22); }
.name-in { display: block; margin: 18px auto; width: min(360px, 100%); font-size: 1.6rem; padding: 14px 18px; border-radius: var(--r-pill); text-align: center; font-family: var(--font-head); }
.starters { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 20px; }
.starter {
  border: 3px solid transparent; border-radius: 30px; padding: 10px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; font-family: var(--font-head); font-size: 1.15rem;
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .7));
  box-shadow: var(--g-shadow-sm);
  transition: transform .4s var(--spring), border-color .2s;
}
.starter.sel { border-color: var(--primary); background: var(--g-sheen), linear-gradient(168deg, #FFF4EC, #FFE2D2); box-shadow: var(--g-shadow-sm), 0 0 0 6px rgba(255, 116, 72, .2); transform: scale(1.05); }

/* ---------- 10. Home ---------- */
.home-hello { display: flex; align-items: center; gap: 12px 24px; margin: 8px 0 18px; position: relative; flex-wrap: wrap; }
.hello-t h1 {
  font-size: 2.4rem; margin: 0;
  background: linear-gradient(180deg, #2378A2 0%, #16274A 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hello-t p { margin: 0; font-size: 1.2rem; color: var(--ink-soft); }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-card {
  --tint: var(--sea-rgb);
  border: 0; border-radius: var(--r-card); padding: 18px 20px; min-height: 196px; text-align: left; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: radial-gradient(85% 75% at 100% 100%, rgba(var(--tint), .28), rgba(var(--tint), 0) 70%), var(--g-sheen), var(--g-frost);
  box-shadow: inset 0 -4px 0 rgba(var(--tint), .75), var(--g-shadow);
  transition: transform .45s var(--spring), box-shadow .3s;
}
/* Una sola luce morbida nell'angolo (niente strisce diagonali sopra i testi). */
.home-card::before, .world-card::before, .profile-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--g-corner);
}
.home-card:active { transform: scale(.965); box-shadow: inset 0 -4px 0 rgba(var(--tint), .75), var(--g-shadow), 0 0 0 6px rgba(255, 255, 255, .5); transition-duration: .12s; }
.home-card.subj-mat { --tint: 47, 123, 246; }
.home-card.subj-ita { --tint: 255, 79, 116; }
.home-card.subj-cor { --tint: 139, 92, 240; }
.home-card.eggs { --tint: 255, 128, 80; }
.home-card.dex { --tint: 22, 160, 170; }
.home-card.daily {
  --tint: 214, 150, 30;
  background: radial-gradient(85% 75% at 100% 100%, rgba(244, 170, 40, .4), rgba(244, 170, 40, 0) 70%), var(--g-sheen), linear-gradient(168deg, rgba(255, 248, 222, .97), rgba(255, 230, 160, .86));
  box-shadow: inset 0 -4px 0 rgba(var(--tint), .8), inset 0 0 0 1.5px rgba(200, 150, 47, .45), var(--g-shadow);
}
.home-card.daily.done { filter: saturate(.55); }
/* Icone come oblò di vetro con un filo d'ottone (come gli avatar e i mondi). */
.hc-emoji {
  width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; line-height: 1; flex: none;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55) 60%), rgba(var(--tint), .22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 5px rgba(200, 150, 47, .4), inset 0 -3px 8px rgba(var(--tint), .25), 0 10px 18px -10px rgba(var(--tint), .9);
}
.hc-emoji svg { width: 64px; height: 64px; }
.home-card.eggs.hot .hc-emoji { animation: arcWobble 2.2s ease-in-out infinite; }
@keyframes arcWobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg) scale(1.04); } 80% { transform: rotate(8deg) scale(1.04); } 90% { transform: rotate(-4deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.hc-title { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.hc-sub { font-size: 1.05rem; color: var(--ink-soft); margin-top: auto; }
/* Barre d'avanzamento: pozzetto incassato, riempimento lucido nel colore della materia. */
.hc-bar { height: 14px; border-radius: var(--r-pill); overflow: hidden; background: rgba(30, 111, 150, .11); box-shadow: inset 0 1px 3px rgba(12, 62, 96, .18), 0 1px 0 rgba(255, 255, 255, .8); }
.hc-bar i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #FFD56A, #FF8A50);
  box-shadow: 0 0 8px rgba(255, 160, 80, .55);
}
.hc-bar i:not([style*="width: 0%"]) { min-width: 14px; }
.subj-mat .hc-bar i { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #7FB0FF, #2F7BF6); box-shadow: 0 0 8px rgba(47, 123, 246, .45); }
.subj-ita .hc-bar i { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #FF9DB1, #FF4F74); box-shadow: 0 0 8px rgba(255, 79, 116, .45); }
.subj-cor .hc-bar i { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #C2A8FF, #8B5CF0); box-shadow: 0 0 8px rgba(139, 92, 240, .45); }
.home-foot { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.reward-pop .rp-emoji { font-size: 5rem; }

/* ---------- 11. Mappa: le isole di vetro ---------- */
.worlds { display: flex; flex-direction: column; gap: 18px; position: relative; }
.worlds::before { content: ''; position: absolute; left: 61px; top: 60px; bottom: 60px; width: 0; pointer-events: none; border-left: 4px dotted rgba(255, 255, 255, .95); }
.world-card {
  border: 0; border-radius: var(--r-card); padding: 16px 20px; color: var(--ink); text-align: left;
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 14px;
  background: var(--g-sheen), var(--g-solid);
  box-shadow: var(--g-shadow);
  transition: transform .45s var(--spring);
}
.world-card:active { transform: scale(.975); transition-duration: .12s; }
.world-card.locked { background: var(--g-sheen), linear-gradient(168deg, rgba(244, 248, 251, .96), rgba(226, 236, 243, .92)); }
.world-card.locked .wc-emoji { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95), rgba(214, 226, 236, .95)); filter: saturate(.4); }
.world-card.locked .wc-name { color: var(--ink-soft); }
.world-card.done { background: radial-gradient(70% 90% at 100% 50%, rgba(23, 160, 90, .2), rgba(23, 160, 90, 0) 70%), var(--g-sheen), var(--g-solid); }
.wc-emoji {
  width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.9rem; justify-self: center;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 54%, #FFF0CC 0 46%, #BDEDEF 49% 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 7px rgba(140, 214, 224, .45), inset 0 -4px 10px rgba(30, 111, 150, .25), 0 10px 18px -8px rgba(12, 62, 96, .45);
}
.wc-num { font-family: var(--font-head); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--brass-ink); }
.wc-name { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.wc-desc { font-size: 1.02rem; color: var(--ink-soft); margin: 4px 0 8px; }
.wc-prog { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; }
.wc-prog .hc-bar { flex: 1; max-width: 320px; }
.wc-prog span { color: var(--ink); }
.guardian-badge { display: flex; flex-direction: column; align-items: center; font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.guardian-badge.owned span { color: var(--brass-ink); }
.guardian-badge > div { filter: drop-shadow(0 8px 10px rgba(12, 62, 96, .22)); }

/* ---------- 12. Mondo: il percorso dei livelli (boe lungo una rotta puntinata) ---------- */
.world-desc { text-align: center; color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 8px; }
.level-path { display: flex; flex-direction: column; gap: 14px; padding: 10px 0 40px; position: relative; max-width: 760px; margin: 0 auto; }
.level-path::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 50px; width: 0; margin-left: -2px; pointer-events: none; border-left: 4px dotted rgba(255, 255, 255, .95); }
.lvl {
  border: 0; border-radius: var(--r-pill); padding: 10px 24px 10px 10px; color: var(--ink); text-align: left;
  display: flex; align-items: center; gap: 18px; width: min(560px, 92%);
  background: var(--g-sheen), var(--g-frost);
  box-shadow: var(--g-shadow);
  transition: transform .45s var(--spring);
}
.lvl:active { transform: scale(.965); transition-duration: .12s; }
.lvl.left { align-self: flex-start; }
.lvl.right { align-self: flex-end; }
.lvl-circle {
  --c-rgb: var(--subj-rgb, 255, 116, 72);
  position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  /* Disco nel colore della materia un po' più profondo (bianco ≥ 4,2:1) con il riflesso piccolo in alto a sinistra, fuori dalla cifra. */
  background:
    radial-gradient(circle at 26% 16%, rgba(255, 255, 255, .85) 0 6%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 60%),
    var(--subj-disc, var(--primary-d));
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .16), inset 0 2px 2px rgba(255, 255, 255, .55), 0 0 0 4px rgba(255, 255, 255, .85), 0 10px 18px -6px rgba(var(--c-rgb), .65);
}
.lvl.done .lvl-circle {
  --c-rgb: 23, 160, 90;
  background: radial-gradient(circle at 26% 16%, rgba(255, 255, 255, .8) 0 6%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 50% 115%, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 60%), #11884A;
}
/* Chiuso: vetro più leggero ma pieno, testo secondario (non un «fantasma»). */
.lvl.locked { background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .52)); box-shadow: var(--g-shadow-sm); }
.lvl.locked .lvl-title { color: var(--ink-soft); }
.lvl.locked .lvl-circle { --c-rgb: 120, 140, 170; font-size: 1.6rem; text-shadow: none; background: radial-gradient(circle at 26% 16%, rgba(255, 255, 255, .9) 0 6%, rgba(255, 255, 255, 0) 22%), #CCD7E5; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .12), 0 0 0 4px rgba(255, 255, 255, .7); }
.lvl-info { min-width: 0; }
.lvl-title { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; line-height: 1.15; }
.lvl-sub { font-size: 1.05rem; color: var(--ink-soft); }
.lvl-stars .st { font-size: 1.4em; }
/* Il prossimo livello da fare: anello d'oro e un faro che pulsa (solo transform e opacity). */
.lvl.next { box-shadow: 0 0 0 4px rgba(244, 183, 64, .6), 0 0 28px rgba(244, 183, 64, .45), var(--g-shadow); }
.lvl.next .lvl-circle::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid rgba(244, 183, 64, .95); pointer-events: none;
  animation: arcBeacon 2.2s ease-out infinite;
}
@keyframes arcBeacon { from { transform: scale(.92); opacity: .95; } to { transform: scale(1.42); opacity: 0; } }
/* La Sfida del Guardiano: carta incorniciata d'ottone. */
.lvl.guardian {
  border: 0; border-radius: var(--r-sheet); padding: 14px 26px 14px 16px; width: min(640px, 100%); align-self: center;
  background: radial-gradient(80% 120% at 0% 50%, rgba(255, 214, 110, .55), rgba(255, 214, 110, 0) 70%), var(--g-sheen), linear-gradient(168deg, rgba(255, 249, 228, .98), rgba(255, 231, 168, .96));
  box-shadow: inset 0 0 0 2px rgba(200, 150, 47, .8), inset 0 0 0 7px rgba(255, 255, 255, .35), inset 0 0 0 8px rgba(200, 150, 47, .45), 0 18px 40px -16px rgba(150, 100, 10, .6);
}
.lvl.guardian.next { box-shadow: inset 0 0 0 2px rgba(200, 150, 47, .8), inset 0 0 0 7px rgba(255, 255, 255, .35), inset 0 0 0 8px rgba(200, 150, 47, .45), 0 0 0 4px rgba(244, 183, 64, .5), 0 18px 40px -16px rgba(150, 100, 10, .6); }
.lvl-g { flex: none; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(120, 80, 10, .3)); }

/* ---------- 13. Gioco: testata, area, scheda dell'esercizio ---------- */
.play { padding-bottom: 0; }
/* Bordo di scorrimento anche nel gioco: ciò che scorre sotto la testata sfuma nell'alba (vetro finto, senza filtri). */
.screen.play::before {
  content: ''; position: fixed; z-index: 15; top: 0; left: 0; right: 0; height: calc(78px + var(--safe-t)); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 235, 217, .97) 0%, rgba(255, 235, 217, .9) 58%, rgba(255, 235, 217, 0) 100%);
}
.play-head {
  position: sticky; top: calc(6px + var(--safe-t)); z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  margin: calc(6px + var(--safe-t)) 0 2px; padding: 5px 20px 5px 5px; border-radius: var(--r-pill);
  background: var(--g-sheen), var(--g-clear);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-lens), var(--g-shadow);
}
.guardian-play .play-head { box-shadow: inset 0 0 0 2px rgba(200, 150, 47, .6), var(--g-lens), var(--g-shadow); }
/* Avanzamento a perline: pozzetti chiari, perla corrente accesa nel colore della materia. */
.play-progress { display: flex; gap: 6px; }
.play-progress i {
  flex: 1; height: 18px; border-radius: var(--r-pill); background: rgba(22, 39, 74, .2);
  box-shadow: inset 0 0 0 1.5px rgba(22, 39, 74, .4), inset 0 1.5px 3px rgba(12, 62, 96, .28), inset 0 -1px 0 rgba(255, 255, 255, .85);
  transition: background .3s, transform .45s var(--spring);
}
.play-progress i.cur {
  transform: scaleY(1.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), rgba(var(--subj-rgb, 255, 116, 72), .3);
  box-shadow: inset 0 0 0 3px var(--subj, var(--primary)), 0 0 0 3px rgba(255, 255, 255, .6), 0 0 14px rgba(var(--subj-rgb, 255, 116, 72), .5);
}
.play-progress i.ok { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), #15985B; box-shadow: 0 0 8px rgba(23, 160, 90, .45); }
.play-progress i.half { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--gold); }
.play-progress i.ko { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--ko); }
.play-title { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; color: var(--ink); max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ex-area { padding: 18px 0 140px; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
/* La scheda è la protagonista: vetro quasi pieno (un foglio pulito, senza sfocatura: sotto c'è il mare calmo),
   un filo e una tinta del colore della materia per sapere sempre «dove sono». */
.ex-card {
  border-radius: var(--r-card); padding: 24px 28px 26px; text-align: center;
  background:
    radial-gradient(120% 60% at 50% 125%, rgba(var(--subj-rgb, 30, 111, 150), .1), rgba(var(--subj-rgb, 30, 111, 150), 0) 70%),
    var(--g-sheen),
    linear-gradient(168deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9));
  box-shadow: inset 0 0 0 1.5px rgba(var(--subj-rgb, 30, 111, 150), .16), var(--g-shadow);
}
.prompt { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.prompt.problem {
  font-size: 1.35rem; font-weight: 400; text-align: left; border-radius: var(--r-inner); padding: 14px 16px;
  background: rgba(var(--subj-rgb, 30, 111, 150), .06); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .07);
}
.ask { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; margin-top: 10px; color: var(--subj-ink, var(--primary-d)); }
.listen-btn {
  border: 0; margin: 12px auto 0; display: flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 12px 28px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: #1E5ED0;
  background: var(--g-sheen), linear-gradient(168deg, rgba(232, 242, 255, .97), rgba(205, 225, 255, .85));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(47, 123, 246, .25), 0 10px 20px -10px rgba(47, 123, 246, .6);
  transition: transform .35s var(--spring);
}
.listen-btn:active { transform: scale(.94); box-shadow: inset 0 1px 0 #fff, 0 0 0 5px rgba(47, 123, 246, .2); }
.visual { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.visual svg { max-width: 100%; height: auto; }
.passage {
  text-align: left; border-radius: 26px; padding: 16px 20px; margin-bottom: 14px;
  background: linear-gradient(168deg, rgba(255, 252, 240, .97), rgba(255, 244, 214, .88));
  box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .4), inset 0 1px 0 #fff;
}
.passage h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.passage p { margin: 0; font-size: 1.3rem; line-height: 1.6; }
.ans-area { display: flex; justify-content: center; }

/* Visuali dentro la scheda */
.big-op { font-family: var(--font-head); font-weight: 800; font-size: 3rem; letter-spacing: 2px; line-height: 1.2; color: var(--ink); }
.big-op.sm { font-size: 2.1rem; }
.slot { display: inline-block; min-width: 1.2em; padding: 0 .2em; border-radius: 14px; line-height: 1.1; background: rgba(255, 228, 210, .9); color: #C2441C; border: 3px dashed var(--primary); }
.count-grid { display: flex; flex-direction: column; gap: 6px; }
.cg-row { display: flex; justify-content: center; gap: 4px; font-size: 2.3rem; line-height: 1.15; }
.cg-gap { width: 16px; }
.emoji-sum { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.es-g { font-size: 2.2rem; max-width: 330px; letter-spacing: 2px; line-height: 1.3; }
.es-op { font-family: var(--font-head); font-size: 3rem; font-weight: 800; color: var(--subj-ink, var(--primary-d)); }
.es-x { position: relative; opacity: .45; }
.es-x::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 5px; background: #E5484D; transform: rotate(-35deg); border-radius: 3px; }
.ten-frame { display: grid; grid-template-columns: repeat(5, 48px); gap: 5px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, #23406E, #16274A); box-shadow: 0 8px 16px -8px rgba(12, 40, 80, .6); }
.ten-frame span { height: 48px; background: #fff; border-radius: 9px; }
.ten-frame span.on { background: radial-gradient(circle, #E5484D 55%, #fff 57%); }
.array-grid { display: flex; flex-direction: column; gap: 4px; font-size: 2.1rem; line-height: 1.15; letter-spacing: 4px; }
.groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.grp { border-radius: var(--r-inner); padding: 8px 10px; display: flex; flex-direction: column; align-items: center; }
.grp, .pairs span { background: rgba(var(--sea-rgb), .06); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .08); }
.grp-items { font-size: 1.6rem; max-width: 140px; line-height: 1.2; }
.grp-c { font-size: 1.6rem; }
.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 2rem; }
.pairs span { border-radius: 14px; padding: 2px 8px; }
.pattern { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 2.6rem; align-items: center; }
.pattern .slot { font-size: 2rem; padding: 4px 14px; }
.share { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sh-items { font-size: 2rem; max-width: 480px; letter-spacing: 3px; }
.sh-kids { font-size: 2.6rem; letter-spacing: 8px; }
.money { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.coin { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #5A4300; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 0 3px 6px rgba(0, 0, 0, .15); }
.coin i { font-style: normal; font-size: .9rem; margin-left: 2px; }
.coin.c1 { background: radial-gradient(circle, #F4D46B 52%, #C9CED6 54%); }
.coin.c2 { background: radial-gradient(circle, #C9CED6 52%, #F4D46B 54%); }
.banknote { width: 132px; height: 70px; border-radius: 10px; background: var(--c); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); border: 3px solid rgba(255, 255, 255, .6); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.banknote i { font-style: normal; margin-left: 4px; }
.pictogram { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pg-row { display: flex; align-items: center; gap: 10px; }
.pg-l { font-size: 2rem; width: 48px; text-align: center; }
.pg-v { font-size: 1.7rem; letter-spacing: 2px; }
.chart-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.word-big { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.wb-e { font-size: 3.6rem; }
.wb-w { font-size: 3rem; font-weight: 700; letter-spacing: 3px; }
.gap { display: inline-block; min-width: 2.2em; height: 1em; border-bottom: 5px solid var(--primary); background: rgba(255, 228, 210, .9); border-radius: 10px 10px 0 0; vertical-align: -0.1em; margin: 0 4px; }
.emoji-xl { font-size: 6.5rem; line-height: 1.1; }
.emoji-xl.sm { font-size: 4.2rem; }
.sentence { font-size: 1.7rem; line-height: 1.6; font-weight: 700; }
.cursive-word { background: #fff; border-radius: 22px; padding: 6px 10px; max-width: 100%; overflow-x: auto; box-shadow: inset 0 0 0 1.5px rgba(22, 39, 74, .1), 0 8px 18px -10px rgba(12, 62, 96, .4); }
.cursive-word svg { height: 130px; width: auto; max-width: 100%; }
.cursive-word.big { margin: 10px auto; display: inline-block; }

/* ---------- 14. Risposte ---------- */
/* Scelte: vetro toccabile (ricetta sopra), segno ✓ / ✕ oltre al colore (anche per chi non distingue i colori). */
.choices { display: grid; gap: 16px; width: 100%; max-width: 820px; grid-template-columns: repeat(3, 1fr); }
.choices.n2 { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
.choices.n4 { grid-template-columns: repeat(4, 1fr); }
.choices.cs-word.n4 { grid-template-columns: repeat(2, 1fr); }
.choices.cs-sentence { grid-template-columns: 1fr; max-width: 760px; }
.choice {
  border-radius: var(--r-tile); padding: 16px 14px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ch-l { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.ch-sub { font-size: .9rem; color: var(--ink-soft); }
.cs-symbol .ch-l { font-family: var(--font-head); font-size: 3rem; font-weight: 800; line-height: 1; }
.cs-emoji .choice { min-height: 120px; }
.cs-emoji .ch-l { font-size: 4.2rem; line-height: 1; }
.cs-syll .ch-l { font-size: 2.2rem; letter-spacing: 1px; }
.cs-sentence .choice { align-items: flex-start; text-align: left; padding: 14px 52px 14px 22px; min-height: 64px; }
.cs-sentence .ch-l { font-size: 1.35rem; font-weight: 400; }
/* Segno nell'angolo (lo pseudo ::before qui sostituisce il riflesso). */
.choice.ok::before, .choice.ko::before, .choice.shown::before {
  left: auto; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center; font: 800 1.1rem/1 var(--font-head);
  box-shadow: 0 3px 8px -2px rgba(0, 40, 20, .4);
}
.choice.ok { color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .45); background: var(--ok-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 5px rgba(60, 212, 135, .35), 0 14px 28px -10px rgba(11, 122, 64, .7); animation: arcSquish .55s var(--spring); }
.choice.ok::before { content: '✓'; content: '✓' / ''; color: var(--ok-d); background: #fff; }
.choice.ok .ch-sub { color: #fff; }
/* Sbagliato: gentile ma diverso anche nella forma: incavato, senza riflesso, segno ✕ arancio. */
.choice.ko {
  background: var(--ko-soft); opacity: .92;
  box-shadow: inset 0 3px 8px rgba(217, 107, 16, .22), inset 0 0 0 2.5px rgba(255, 148, 64, .85);
  animation: shake .4s;
}
.choice.ko::before { content: '✕'; content: '✕' / ''; color: #fff; background: var(--ko-d); }
.choice.shown { background: var(--ok-soft); box-shadow: inset 0 0 0 4px var(--ok), 0 0 0 5px rgba(60, 212, 135, .25), 0 12px 24px -12px rgba(11, 122, 64, .6); }
.choice.shown::before { content: '✓'; content: '✓' / ''; color: #fff; background: var(--ok); }
/* Dopo la risposta giusta le altre scelte si ritirano: resta in primo piano solo quella corretta. */
.choice.dim { opacity: .5; filter: saturate(.5); transform: scale(.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 10px -8px rgba(12, 62, 96, .4); }
.choice.ko.dim { opacity: .82; filter: none; }
@keyframes arcSquish { 0% { transform: scale(.96); } 35% { transform: scale(1.08, .94); } 60% { transform: scale(.97, 1.04); } 100% { transform: scale(1); } }
@keyframes bounce { 40% { transform: scale(1.08); } }

/* Tastierino: tasti di vetro dentro un vassoio di vetro con angoli concentrici (40 − 12 = 28). */
.ans-number { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.num-box {
  min-width: 150px; height: 92px; padding: 0 16px; border-radius: var(--r-tile); border: 3px solid var(--subj, var(--primary)); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 3.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .86));
  box-shadow: inset 0 3px 8px rgba(12, 62, 96, .12), 0 0 0 5px rgba(255, 255, 255, .55), 0 14px 26px -14px rgba(12, 62, 96, .5);
}
.num-box.empty { color: rgba(22, 39, 74, .24); }
.num-box.small { min-width: 96px; height: 84px; font-size: 2.8rem; border-width: 3px; border-style: solid; }
.num-box.focus { box-shadow: inset 0 3px 8px rgba(12, 62, 96, .12), 0 0 0 6px rgba(244, 183, 64, .65), 0 14px 26px -14px rgba(12, 62, 96, .5); }
.num-box.ok { color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .45); border-color: var(--ok-d); background: var(--ok-fill); box-shadow: 0 0 0 5px rgba(60, 212, 135, .35), 0 14px 26px -12px rgba(11, 122, 64, .7); animation: arcSquish .55s var(--spring); }
.num-box.ko { border-color: var(--ko); background: var(--ko-soft); box-shadow: inset 0 3px 8px rgba(217, 107, 16, .2); animation: shake .4s; }
.num-box.shown { border-color: var(--ok); background: var(--ok-soft); }
.multi-row { display: flex; gap: 22px; }
.multi-f { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.multi-l { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--ink); }
.keypad {
  display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; padding: 12px; border-radius: var(--r-sheet);
  background: linear-gradient(168deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 22px 44px -22px rgba(12, 62, 96, .45);
}
.key { height: 76px; border-radius: var(--r-tile); font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; }
.key-back { --t: 217, 107, 16; color: #B4500C; background: linear-gradient(180deg, #FFF5EE 0%, #FFE9DA 50%, #FFD8BE 100%); }
.key-ok { --t: 11, 122, 64; color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .45); background: var(--ok-fill); }

/* Colonna: quaderno a quadretti */
.ans-column { display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; }
.col-grid {
  display: grid; grid-template-columns: 56px 76px 76px; gap: 6px; align-items: center; justify-items: center; padding: 18px 20px; border-radius: var(--r-card);
  background:
    linear-gradient(rgba(30, 111, 150, .09) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(30, 111, 150, .09) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(168deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9));
  box-shadow: var(--g-shadow);
}
.col-cell { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; }
.col-h { font-size: 1.5rem; height: 40px; }
.col-h.da { color: #D63A43; }
.col-h.u { color: #1E5ED0; }
.col-op { color: var(--subj-ink, var(--primary-d)); }
.col-help { border: 2.5px dashed rgba(22, 39, 74, .25); background: rgba(255, 255, 255, .75); border-radius: 14px; width: 46px; height: 46px; font-size: 1.5rem; color: #6B3FD0; }
.col-in { border: 3px solid var(--subj, var(--primary)); background: rgba(255, 255, 255, .97); border-radius: 18px; box-shadow: inset 0 2px 5px rgba(12, 62, 96, .1); }
.col-cell.focus { box-shadow: inset 0 2px 5px rgba(12, 62, 96, .1), 0 0 0 6px rgba(244, 183, 64, .65); }
.col-cell.ok { color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .45); background: var(--ok-fill); border-color: var(--ok-d); }
.col-cell.ko { background: var(--ko-soft); border-color: var(--ko); }
.col-cell.shown { background: var(--ok-soft); border-color: var(--ok); box-shadow: none; }
.col-line { grid-column: 1 / -1; width: 100%; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #23406E, #16274A); }
.col-note { font-size: 1.08rem; line-height: 1.35; color: var(--ink); max-width: 300px; margin-top: 10px; text-align: center; }

/* Tasselli da ordinare */
.ans-order { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.tiles-answer {
  min-height: 96px; width: 100%; max-width: 860px; padding: 10px; border: 3px dashed rgba(30, 111, 150, .38); border-radius: var(--r-card);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
  background: rgba(255, 255, 255, .5); box-shadow: inset 0 3px 12px rgba(12, 62, 96, .12), inset 0 -1px 0 rgba(255, 255, 255, .7);
  transition: background .2s;
}
.tiles-answer.empty::before { content: 'Tocca i tasselli nell\'ordine giusto'; color: #50618A; font-size: 1.15rem; }
.tiles-answer.joined { gap: 2px; }
.tiles-answer.ok { border-style: solid; border-color: var(--ok); background: rgba(225, 248, 234, .9); animation: arcSquish .55s var(--spring); }
.tiles-answer.ko { border-color: var(--ko); background: rgba(255, 238, 224, .9); animation: shake .4s; }
.tiles-answer.shown { border-color: var(--ok); border-style: solid; }
.tiles-bank { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 860px; }
.tiles-bank.vertical, .tiles-answer.vertical { flex-direction: column; align-items: stretch; }
.tile { border-radius: 22px; padding: 12px 22px; font-size: 1.75rem; font-weight: 700; min-height: 68px; min-width: 68px; }
.vertical .tile { font-size: 1.25rem; font-weight: 400; text-align: left; }
/* Tassello già messo nella risposta: dorato. */
.tiles-answer .tile {
  --t: 200, 150, 47;
  background: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #FFF6D6, #FFE39C);
  box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .55), inset 0 1px 0 #fff, 0 8px 16px -8px rgba(150, 100, 10, .55);
}

/* Parole da toccare */
.tapwords { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; }
.tapword { border-radius: 20px; padding: 10px 18px; font-size: 1.8rem; font-weight: 700; min-height: 60px; }
.tapword.ok { color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 25, .45); background: var(--ok-fill); box-shadow: 0 0 0 4px rgba(60, 212, 135, .35), 0 10px 20px -10px rgba(11, 122, 64, .7); animation: arcSquish .55s var(--spring); }
.tapword.ko { background: var(--ko-soft); box-shadow: inset 0 3px 8px rgba(217, 107, 16, .2), inset 0 0 0 2px rgba(255, 148, 64, .85); opacity: .85; }
.tapword.ok::before, .tapword.ko::before { display: none; }
.tapword.shown { outline: 0; background: var(--ok-soft); box-shadow: inset 0 0 0 4px var(--ok); }

/* Abaco */
.ans-abaco { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.abaco-live { border-radius: var(--r-card); padding: 12px 20px; background: var(--g-sheen), var(--g-solid); box-shadow: var(--g-shadow); }
.abaco-live.ok { outline: 0; box-shadow: inset 0 0 0 4px var(--ok), 0 0 0 5px rgba(60, 212, 135, .3), var(--g-shadow); }
.abaco-live.ko { outline: 0; box-shadow: inset 0 0 0 4px var(--ko), var(--g-shadow); animation: shake .4s; }
.ab-ctrls { display: flex; gap: 40px; }
.ab-ctrl { display: flex; gap: 10px; }
.ab-btn { width: 72px; height: 72px; border-radius: 24px; font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; }

/* ---------- 15. Spiegazione e risultato ---------- */
/* «Guardiamo insieme»: una pergamena dorata, calda: lo sbaglio diventa una spiegazione. */
.explain {
  border: 0; border-radius: var(--r-card); padding: 18px 22px; text-align: center;
  background: radial-gradient(90% 80% at 0% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%), linear-gradient(168deg, rgba(255, 248, 224, .98), rgba(255, 232, 170, .92));
  box-shadow: inset 0 0 0 2px rgba(200, 150, 47, .7), inset 0 1px 0 #fff, 0 18px 40px -16px rgba(150, 100, 10, .55);
  animation: arcPop .45s var(--spring);
}
.explain .ex-head { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--brass-ink); }
.explain p { font-size: 1.25rem; margin: 8px 0 14px; }

.result {
  width: 100%; max-width: 820px; margin: 0 auto; border-radius: var(--r-sheet); padding: 28px 24px; text-align: center; overflow: hidden;
  background: radial-gradient(46% 26% at 50% 24%, rgba(255, 214, 110, .34), rgba(255, 214, 110, 0) 70%), var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .7));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow);
  animation: arcPop .5s var(--spring);
}
/* Rosa dei venti in filigrana */
.result::before {
  content: ''; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; z-index: -1; opacity: .32; pointer-events: none;
  background: url(img/mappa-rosa.svg) center / contain no-repeat;
}
.result h2 { font-size: 2.1rem; }
/* Le stelle conquistate hanno un palco: raggi dorati che girano piano. */
.res-stars { margin: 10px 0; position: relative; isolation: isolate; }
.res-stars::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .5) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%);
  animation: spin 24s linear infinite;
}
/* Con 0 stelle niente raggi: la festa resta un premio. */
.res-stars:not(:has(.st.on))::before { display: none; }
.res-stars .st { font-size: 4.8rem; margin: 0 2px; animation: arcStarLand .7s cubic-bezier(.2, .9, .3, 1.25) backwards; }
.res-stars .st:nth-child(2) { animation-delay: .25s; }
.res-stars .st:nth-child(3) { animation-delay: .5s; }
.res-stars .st.on { filter: drop-shadow(0 1px 0 rgba(150, 95, 10, .55)) drop-shadow(0 0 14px rgba(255, 200, 80, .7)); }
@keyframes arcStarLand { from { transform: scale(0) rotate(-140deg); opacity: 0; } 60% { transform: scale(1.18) rotate(8deg); opacity: 1; } }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.res-pct { font-size: 1.15rem; color: var(--ink-soft); }
.res-reward { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin: 16px 0 6px; color: var(--brass-ink); }
.res-eggs { display: flex; justify-content: center; gap: 10px; }
.res-egg { animation: wobble 1.2s infinite; filter: drop-shadow(0 12px 12px rgba(12, 62, 96, .25)); }
.res-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.res-legend { display: flex; justify-content: center; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 12px 12px rgba(12, 62, 96, .25)); }
.res-msg { font-size: 1.2rem; }
.guardian-intro > div:first-child { display: flex; justify-content: center; animation: float 3s ease-in-out infinite; }
.guardian-intro p { font-size: 1.15rem; }
.confirm p { font-size: 1.1rem; }

/* ---------- 16. Bit ---------- */
.bit { position: relative; z-index: 30; }
.bit-btn { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.bit-face { width: 96px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 12px 10px rgba(12, 62, 96, .28)); }
/* Batterie in una capsula di vetro: si leggono su qualsiasi fondo. */
.bit-batt {
  display: flex; gap: 5px; margin-top: 4px; padding: 4px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(12, 62, 96, .35);
}
.bit-batt:empty { display: none; }
.bit-batt span { width: 20px; height: 11px; border-radius: 6px; border: 1.5px solid rgba(22, 39, 74, .55); background: rgba(22, 39, 74, .06); box-shadow: inset 0 1px 0 #fff; }
.bit-batt span.on { background: linear-gradient(180deg, #7BEAAE, #17A05A); border-color: var(--ok-d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 6px rgba(23, 160, 90, .6); }
.bit-led { animation: led 1.4s infinite; }
@keyframes led { 50% { fill: #FFC93D; } }
.bit-eyes { animation: blink 4s infinite; transform-origin: 60px 53px; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bit.talking .bit-mouth { animation: talk .25s infinite alternate; transform-origin: 60px 66px; }
@keyframes talk { to { transform: scaleY(.3); } }
.bit-bubble {
  position: absolute; left: 100%; bottom: 40px; margin-left: 12px; width: min(460px, 70vw);
  border: 0; border-radius: 28px; padding: 18px 20px 16px; color: var(--ink); font-size: 1.15rem; line-height: 1.4;
  background: var(--g-sheen), linear-gradient(168deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .76));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 22px 44px -18px rgba(12, 62, 96, .55), 0 4px 12px -4px rgba(12, 62, 96, .16);
  animation: arcPop .4s var(--spring);
}
.bit-bubble::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: -8px; bottom: 30px; border-radius: 5px; transform: rotate(45deg);
  background: rgba(255, 255, 255, .86); box-shadow: -2px 2px 4px -1px rgba(12, 62, 96, .12);
}
.bubble-x { position: absolute; top: 4px; right: 4px; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: .95rem; color: var(--ink); background: rgba(22, 39, 74, .07); box-shadow: inset 0 1px 0 #fff; }
.bubble-t { padding-right: 40px; }
.bubble-v { margin-top: 8px; }
.bubble-v svg { max-width: 100%; height: auto; }
/* Nel gioco Bit sta in basso a sinistra, su una piccola lente di luce (il suo «posto» sul mare calmo). */
.bit-play { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(10px + var(--safe-b)); }
.bit-play .bit-btn { position: relative; isolation: isolate; }
.bit-play .bit-btn::before {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 128px; height: 36px; margin-left: -64px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .45) 62%, rgba(255, 255, 255, 0));
}
/* Nella home il fumetto sta nel flusso sopra uno sfondo fermo: vetro finto (stesso aspetto, meno lavoro per l'iPad). */
.bit-home { display: flex; align-items: center; flex: 1 1 360px; min-height: 120px; }
.bit-home .bit-face { width: 104px; }
.bit-home .bit-bubble { position: relative; inset: auto; margin-left: 16px; width: auto; flex: 1; max-width: 560px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-sheen), var(--g-solid); }
.bit-home .bit-bubble::before { bottom: auto; top: 50%; transform: translateY(-50%) rotate(45deg); background: rgba(255, 255, 255, .95); }
.bit-home .bit-batt { display: none; }

/* ---------- 17. Corsivo: cornice di vetro, carta bianca ---------- */
.cursive-area { gap: 12px; padding-top: 12px; padding-bottom: 150px; }
.cur-top {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 8px 12px 8px 10px; border-radius: var(--r-card);
  background: var(--g-sheen), var(--g-solid); box-shadow: var(--g-shadow);
}
.cur-mode {
  flex: none; border-radius: var(--r-pill); padding: 8px 18px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; text-shadow: 0 1px 2px rgba(60, 20, 120, .35);
  background: radial-gradient(120% 56% at 30% -12%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #9468F5, #6337C8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 16px -8px rgba(116, 68, 216, .8);
}
/* Righe brevi: chi legge da poco non perde il segno andando a capo. */
.cur-top .prompt { font-size: 1.22rem; font-weight: 400; line-height: 1.45; max-width: 56ch; justify-content: flex-start; text-align: left; }
.cur-model { display: flex; align-items: center; gap: 10px; justify-content: center; font-family: var(--font-head); font-weight: 700; color: var(--ink-soft); }
.cur-model svg { height: 110px; width: auto; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(22, 39, 74, .1), 0 0 0 5px rgba(255, 255, 255, .5), 0 10px 20px -12px rgba(12, 62, 96, .5); }
/* La lavagna resta un foglio bianco ben leggibile: il vetro fa solo da cornice ad anello. */
.tracer {
  /* Rientrata dello spessore dell'anello (8,5px per lato): il bordo visibile è allineato alla consegna. */
  position: relative; width: calc(100% - 17px); max-width: calc(1040px - 17px); margin: 0 auto; overflow: hidden; touch-action: none;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .55), 0 0 0 8.5px rgba(255, 255, 255, .95), 0 24px 48px -18px rgba(12, 62, 96, .5), 0 4px 12px -4px rgba(12, 62, 96, .16);
}
.tracer canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.tr-ink { touch-action: none; cursor: crosshair; }
.cur-msg {
  text-align: center; font-size: 1.3rem; font-weight: 700; min-height: 1.4em; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px;
}
.cur-stars .st { font-size: 2.2rem; }
.cur-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---------- 18. Uova, schiusa, scoperta del Portento ---------- */
.eggs-screen .shards { margin-top: 4px; }
.shards {
  border-radius: var(--r-card); padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700;
  background: var(--g-sheen), var(--g-solid); box-shadow: var(--g-shadow);
}
.shards small { font-family: var(--font-text); font-weight: 400; color: var(--ink-soft); width: 100%; font-size: 1.05rem; }
.shard-bar { display: inline-flex; gap: 5px; }
.shard-bar i { width: 32px; height: 18px; border-radius: var(--r-pill); border: 1.5px solid rgba(22, 39, 74, .16); background: rgba(255, 255, 255, .6); box-shadow: inset 0 2px 3px rgba(12, 62, 96, .12); }
.shard-bar i.on { border-color: var(--brass); background: linear-gradient(180deg, #FFEB9C, #F4B740 60%, #D99419); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 8px rgba(244, 183, 64, .55); }
.egg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: center; gap: 20px; margin-top: 20px; }
.egg-card {
  border: 0; border-radius: var(--r-card); padding: 22px 14px 16px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 1.15rem;
  background: radial-gradient(60% 46% at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), var(--g-sheen), var(--g-solid);
  box-shadow: var(--g-shadow);
  transition: transform .45s var(--spring);
}
.egg-card:active { transform: scale(.95); transition-duration: .1s; }
.egg-card small { font-family: var(--font-text); color: var(--ink-soft); text-align: center; font-size: 1.05rem; line-height: 1.3; }
/* Il premio «illumina» la carta: alone e ombra nel colore dell'uovo. */
.egg-card.egg-oro { background: radial-gradient(60% 46% at 50% 40%, rgba(255, 226, 130, .8), rgba(255, 226, 130, 0) 70%), var(--g-sheen), var(--g-solid); box-shadow: 0 18px 32px -16px rgba(230, 160, 20, .65), var(--g-shadow); }
.egg-card.egg-argento { background: radial-gradient(60% 46% at 50% 40%, rgba(196, 214, 240, .9), rgba(196, 214, 240, 0) 70%), var(--g-sheen), var(--g-solid); box-shadow: 0 18px 32px -16px rgba(120, 150, 200, .65), var(--g-shadow); }
.egg-card.egg-leggendario { background: radial-gradient(60% 46% at 50% 40%, rgba(214, 180, 255, .72), rgba(255, 220, 120, .35) 50%, rgba(255, 220, 120, 0) 72%), var(--g-sheen), var(--g-solid); box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .5), 0 18px 32px -16px rgba(150, 90, 230, .6), var(--g-shadow); }
.egg-card.egg-arcobaleno { background: radial-gradient(60% 46% at 50% 40%, rgba(255, 180, 200, .55), rgba(150, 220, 255, .38) 50%, rgba(150, 220, 255, 0) 72%), var(--g-sheen), var(--g-solid); box-shadow: 0 18px 32px -16px rgba(230, 120, 170, .55), var(--g-shadow); }
.egg-wobble { animation: wobble 1.6s infinite; }
.egg-card .egg-wobble { position: relative; isolation: isolate; margin-bottom: 10px; filter: drop-shadow(0 10px 8px rgba(12, 62, 96, .22)); }
.egg-card .egg-wobble svg { width: 118px; height: auto; }
/* Nido di sabbia sotto l'uovo */
.egg-card .egg-wobble::before {
  content: ''; position: absolute; left: 50%; bottom: -10px; width: 120px; height: 26px; margin-left: -60px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(222, 184, 110, .72) 0 50%, rgba(222, 184, 110, 0) 100%);
}
.empty-eggs {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 20px; font-size: 1.2rem; border-radius: var(--r-card);
  background: var(--g-sheen), var(--g-solid); box-shadow: var(--g-shadow);
}
.empty-eggs .bit-batt { display: none; }
/* Schiusa: finestra calda e opaca, raggi dorati e nido sotto l'uovo. */
.modal-box.modal-hatch { max-width: 560px; background: radial-gradient(70% 55% at 50% 40%, #FFF4D2 0%, #FFFFFF 55%, #E4F5F7 100%); }
.hatch-stage { display: flex; flex-direction: column; align-items: center; min-height: 360px; justify-content: center; position: relative; isolation: isolate; }
.hatch-stage:not(.revealed)::before {
  content: ''; position: absolute; left: 50%; top: 44%; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 214, 110, .38) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: spin 30s linear infinite;
}
.hatch-egg { border: 0; background: none; position: relative; isolation: isolate; padding: 0; animation: wobble 1.4s infinite; filter: drop-shadow(0 18px 14px rgba(12, 62, 96, .28)); }
.hatch-egg::before {
  content: ''; position: absolute; left: 50%; bottom: -14px; width: 180px; height: 36px; margin-left: -90px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(222, 184, 110, .72) 0 50%, rgba(222, 184, 110, 0) 100%);
}
.hatch-egg .cracks { position: absolute; inset: 0; width: 170px; height: 212px; pointer-events: none; }
.hatch-egg .cracks path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hatch-egg.crack-1 .c1, .hatch-egg.crack-2 .c1, .hatch-egg.crack-2 .c2 { opacity: 1; }
.hatch-egg.bump { animation: bumpEgg .3s; }
.hatch-egg.burst { animation: burst .45s forwards; }
@keyframes bumpEgg { 30% { transform: scale(1.12) rotate(-6deg); } 60% { transform: scale(.95) rotate(6deg); } }
@keyframes burst { to { transform: scale(1.6); opacity: 0; filter: brightness(3); } }
.hatch-hint { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin-top: 26px; }
.reveal-card { position: relative; display: flex; flex-direction: column; align-items: center; animation: popIn .4s cubic-bezier(.2, 1.6, .5, 1); }
.rays { position: absolute; top: -10px; width: 320px; height: 320px; border-radius: 50%; z-index: 0; opacity: .55; background: repeating-conic-gradient(from 0deg, var(--ray, #FFE39A) 0 10deg, transparent 10deg 20deg); animation: spin 12s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.rar-comune .rays { --ray: #E4E9F1; }
.rar-noncomune .rays { --ray: #BFF0CD; }
.rar-raro .rays { --ray: #BBD6FF; }
.rar-epico .rays { --ray: #DCC2FF; }
.rar-leggendario .rays { --ray: #FFD86B; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }
.rv-creature { position: relative; z-index: 1; animation: float 3s ease-in-out infinite; }
.rv-rarity {
  position: relative; z-index: 1; display: inline-block; color: #fff; font-family: var(--font-head); font-weight: 800; border-radius: var(--r-pill); padding: 6px 18px; margin: 6px 0;
  /* Il colore della rarità arriva inline (background): il velo scuro è un'ombra interna, che si dipinge sopra. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 100px rgba(16, 28, 52, .26), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .45);
}
.reveal-card h2, .dex-detail h2 { position: relative; z-index: 1; font-size: 2.1rem; margin: 4px 0; display: flex; align-items: center; justify-content: center; }
.rv-meta { color: var(--ink-soft); font-family: var(--font-head); font-weight: 700; }
.rv-desc { font-size: 1.2rem; max-width: 420px; }
.rv-new { color: var(--ok-d); font-family: var(--font-head); font-weight: 800; padding: 8px 18px; border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(232, 250, 239, .97), rgba(205, 242, 219, .92)); box-shadow: inset 0 0 0 1.5px rgba(23, 160, 90, .4), inset 0 1px 0 #fff; }
.rv-dup { color: var(--brass-ink); font-family: var(--font-head); font-weight: 800; padding: 8px 18px; border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(255, 249, 226, .97), rgba(255, 236, 180, .92)); box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .45), inset 0 1px 0 #fff; }

/* ---------- 19. Atlante dei Portenti ---------- */
/* Filtri: un controllo segmentato, un unico binario di vetro con la «lente» blu mare sull'opzione scelta. */
.dex-filters {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; margin: 6px auto 18px; padding: 5px;
  border-radius: 30px; background: var(--g-sheen), var(--g-frost); box-shadow: var(--g-shadow-sm);
}
.dex-filters .chip { min-height: 44px; background: transparent; box-shadow: none; }
.dex-filters .chip.sel { background: radial-gradient(120% 70% at 30% -10%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #2A86AD, var(--sea-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 14px -6px rgba(15, 76, 108, .7); }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
/* 62 carte: vetro finto senza filtri; la rarità si legge dalla tinta in alto e dal filo interno. */
.dex-card {
  --rar: 142, 154, 166;
  border: 0; border-radius: var(--r-tile); padding: 10px 6px 12px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(90% 38% at 50% 0%, rgba(var(--rar), .3), rgba(var(--rar), 0) 100%), var(--g-sheen), var(--g-solid);
  box-shadow: inset 0 0 0 2px rgba(var(--rar), .42), inset 0 2px 0 rgba(255, 255, 255, .9), 0 12px 22px -14px rgba(12, 62, 96, .55), 0 2px 5px -1px rgba(12, 62, 96, .1);
  transition: transform .4s var(--spring);
}
.dex-card:active { transform: scale(.94); }
.dex-card.rar-noncomune { --rar: 63, 174, 90; }
.dex-card.rar-raro { --rar: 47, 128, 237; }
.dex-card.rar-epico { --rar: 155, 81, 224; }
.dex-card.rar-leggendario {
  --rar: 233, 164, 0;
  background: radial-gradient(90% 60% at 50% 25%, rgba(255, 222, 130, .7), rgba(255, 222, 130, 0) 75%), var(--g-sheen), linear-gradient(168deg, rgba(255, 251, 236, .98), rgba(255, 238, 190, .9));
}
.dex-card.unknown { background: radial-gradient(90% 38% at 50% 0%, rgba(var(--rar), .22), rgba(var(--rar), 0) 100%), var(--g-sheen), linear-gradient(168deg, rgba(238, 245, 250, .96), rgba(220, 233, 242, .9)); }
.dc-num { font-size: .8rem; color: var(--ink-soft); align-self: flex-start; padding-left: 8px; font-weight: 700; }
.dc-img { filter: drop-shadow(0 8px 6px rgba(12, 62, 96, .18)); }
.dc-name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; text-align: center; line-height: 1.1; }
.dc-rar { font-size: .8rem; letter-spacing: 1px; }
/* Scheda del Portento: piedistallo di sabbia sotto il disegno (il disegno non si tocca). */
.dex-detail > div:first-child { display: flex; justify-content: center; position: relative; isolation: isolate; animation: float 3s ease-in-out infinite; }
.dex-detail > div:first-child::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 170px; height: 32px; margin-left: -85px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(222, 184, 110, .62) 0 50%, rgba(222, 184, 110, 0) 100%);
}
.dex-detail .rv-desc { margin-inline: auto; }

/* ---------- 20. Genitori e insegnanti ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { border-radius: var(--r-inner); padding: 10px; text-align: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .07); }
.kpi b { display: block; font-family: var(--font-head); font-size: 1.6rem; }
.kpi span { font-size: .8rem; color: var(--ink-soft); }
.skill-row { display: grid; grid-template-columns: 1fr 160px 56px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: .95rem; }
.skill-bar { height: 12px; border-radius: var(--r-pill); overflow: hidden; background: rgba(22, 39, 74, .08); box-shadow: inset 0 1px 3px rgba(12, 62, 96, .15); }
.skill-bar i { display: block; height: 100%; }
.prog-world { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: center; }
.pw-name { font-family: var(--font-head); font-weight: 700; }
.pw-levels { display: flex; flex-wrap: wrap; gap: 6px; }
/* Titolo su una riga intera, sotto le 3 stelle in fila (vicine, centrate). */
.pw-l {
  border-radius: 12px; padding: 4px 8px 5px; max-width: 132px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(22, 39, 74, .07);
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 1px;
}
.pw-l small { flex-basis: 100%; font-size: .9rem; text-align: center; line-height: 1.15; color: var(--ink-soft); margin-bottom: 2px; }
.pw-l .st { font-size: .9em; }
.hist { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hist td { padding: 6px 4px; border-bottom: 1px solid var(--hair); }
.hist .st { font-size: 1em; }
/* Interruttore come in iOS: premendolo la manopola si allarga prima di scattare. */
.toggle { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
/* Nascosto solo alla vista: VoiceOver, Controllo interruttori e tastiera lo trovano e ne leggono lo stato. */
.toggle input[type=checkbox] { position: absolute; left: 0; top: 50%; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.toggle input:focus-visible + .tg-ui { box-shadow: inset 0 1px 3px rgba(12, 62, 96, .25), 0 0 0 4px rgba(47, 123, 246, .45); }
.toggle small { display: block; color: var(--ink-soft); font-size: .8rem; }
.tg-ui { width: 60px; height: 34px; border-radius: var(--r-pill); position: relative; flex: none; background: rgba(120, 140, 170, .4); box-shadow: inset 0 1px 3px rgba(12, 62, 96, .25); transition: background .2s; }
.tg-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 34px; height: 28px; border-radius: var(--r-pill); background: linear-gradient(180deg, #fff, #F1F5F9); box-shadow: 0 3px 8px rgba(12, 40, 80, .3), inset 0 1px 0 #fff; transition: transform .35s var(--spring), width .2s; }
.toggle:active .tg-ui::after { width: 40px; }
.toggle input:checked + .tg-ui { background: linear-gradient(180deg, #2BB46B, #148F52); box-shadow: inset 0 1px 3px rgba(0, 70, 30, .3); }
.toggle input:checked + .tg-ui::after { transform: translateX(20px); }
.toggle:active input:checked + .tg-ui::after { transform: translateX(14px); }
.toggle select { margin-left: auto; font-size: 1rem; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line); background: rgba(255, 255, 255, .9); color: var(--ink); }
.panel.info li { margin-bottom: 8px; font-size: .95rem; }
.gate h2 { font-size: 1.5rem; padding: 0 30px; }
.gate-in { font-size: 2rem; width: 160px; text-align: center; padding: 10px; border-radius: 18px; margin: 6px auto 4px; display: block; }
.gate-err, .f-err { color: #B42318; }
.gate-err { min-height: 1.4em; margin-bottom: 8px; }

/* ---------- 21. Online: famiglie, moduli, codici, genitori, amministratore, privacy ---------- */
/* Spazio in alto solo per le pagine senza barra (intestazione con Bit e targa): con la barra, stessa altezza ovunque. */
.fam:not(:has(> .topbar)) { padding-top: 20px; }
.fam.narrow { max-width: 680px; }
.fam .login-hero { margin-bottom: 8px; }
.fam.narrow .login-bit { width: 90px; }
.fam-card { text-align: left; }
.fam.login .fam-card { max-width: 680px; margin: 18px auto; }
.fam-card h2 { margin-top: 0; }
.fam-actions { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 10px; }
.fam-actions .btn { width: 100%; text-align: center; }
.fam-links { text-align: center; font-size: .95rem; margin: 14px 0; }
.fam-links a, .f-links a, .privacy-text a, .fam-card a:not(.btn), .modal-box a:not(.btn), .panel a:not(.btn) {
  color: var(--sea-d); font-weight: 700; text-decoration-color: rgba(15, 76, 108, .35); text-underline-offset: 3px;
}
/* Collegamenti su una riga propria: bersaglio di tocco alto 44px. */
.fam-links a:not(.btn), .f-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.fam-links a.btn { color: var(--ink); text-decoration: none; }
.fam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fam-head h2, .fam-head p { margin: 0; }
.fam-modal { text-align: left; }
.fam-modal h2 { padding-right: 44px; }
.fam-howto li { margin-bottom: 6px; }
/* Passi della registrazione: perline di vetro */
.fam-steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; flex-wrap: wrap; counter-reset: st; }
.fam-steps li { counter-increment: st; font-size: .85rem; padding: 5px 12px; border-radius: var(--r-pill); color: var(--ink-soft); background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .07); }
.fam-steps li::before { content: counter(st) '. '; }
.fam-steps li.on { color: #fff; font-weight: 700; background: linear-gradient(180deg, #C94A20, #A8360E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 12px -6px rgba(217, 70, 31, .6); }
.fam-steps li.done { color: var(--ok-d); background: rgba(225, 248, 234, .95); }
.wizard-inline .wizard { text-align: center; }

/* Campi dei moduli */
.f-form { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.f-row { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.f-label { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink); }
.f-in { width: 100%; font-size: 1.1rem; padding: 12px 14px; border-radius: 16px; }
.f-code { text-transform: uppercase; letter-spacing: 2px; font-family: ui-monospace, Menlo, monospace; }
.f-pw { display: flex; gap: 6px; align-items: center; }
.f-pw .f-in { flex: 1; }
.f-eye { border: 0; border-radius: 16px; width: 52px; height: 52px; flex: none; font-size: 1.2rem; background: rgba(255, 255, 255, .8); box-shadow: var(--g-shadow-sm); }
.f-hint { color: var(--ink-soft); font-size: .82rem; display: block; }
.f-err { min-height: 1.2em; margin: 0; font-size: .95rem; }
.f-err:empty { min-height: 0; }
.f-ok { color: var(--ok-d); font-weight: 700; }
.f-links { text-align: center; font-size: .95rem; margin: 4px 0 0; }
.f-inline { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.f-consent { display: flex; gap: 12px; align-items: flex-start; border-radius: 22px; padding: 12px 14px; margin: 12px 0; cursor: pointer; font-size: 1rem; text-align: left; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 39, 74, .08); }
.f-check { width: 28px; height: 28px; flex: none; margin: 2px 0 0; accent-color: var(--ok); }
.privacy-short ul { padding-left: 20px; }
.privacy-short li { margin-bottom: 6px; font-size: .95rem; }

/* Codici da conservare: cartiglio dorato */
.code-big {
  font-family: ui-monospace, Menlo, monospace; font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 700; letter-spacing: 3px; text-align: center; word-break: break-all;
  border: 2px dashed var(--brass); border-radius: 22px; padding: 16px 10px; margin: 12px 0;
  background: linear-gradient(168deg, rgba(255, 250, 230, .97), rgba(255, 240, 196, .88)); box-shadow: inset 0 1px 0 #fff;
  user-select: all; -webkit-user-select: all;
}
.recovery { text-align: left; }
.code-list { list-style: none; padding: 0; columns: 2; }
.code-list li { font-family: ui-monospace, Menlo, monospace; padding: 4px 0; }
.code-list li small { font-family: var(--font-text); color: var(--ink-soft); font-size: .9rem; margin-left: 8px; }

/* Indicatore del salvataggio */
.save-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.save-chip .sc-ic { font-size: 1rem; }
.tb-right .save-chip[data-status="offline"], .tb-right .save-chip[data-status="auth"], .tb-right .save-chip[data-status="error"],
.save-chip[data-status="offline"], .save-chip[data-status="auth"], .save-chip[data-status="error"] { background: linear-gradient(180deg, #FFF6D8, #FFE6A6); color: var(--ink); }

/* «Chi sta giocando?» e blocco dei tentativi */
.bit-sleep { position: relative; width: 120px; margin: 0 auto; filter: grayscale(.4); }
.bit-sleep .bit-led { animation: none; fill: #9AA6BC; }
.bit-sleep > div { animation: float 4s ease-in-out infinite; }
.bit-sleep .zzz { position: absolute; top: -6px; right: -18px; font-size: 2rem; animation: float 2s ease-in-out infinite; }

/* Area genitori online e pannello amministratore */
.kid-row, .dev-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.dev-row { grid-template-columns: 1fr auto; }
.kid-av { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, rgba(196, 236, 242, .8)); box-shadow: 0 0 0 2px var(--brass-l), 0 6px 12px -6px rgba(12, 62, 96, .4); }
.kid-av svg { width: 100%; height: 100%; }
.kid-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kid-info b { font-family: var(--font-head); font-size: 1.2rem; overflow-wrap: anywhere; }
.kid-info small { color: var(--ink-soft); font-size: .85rem; }
.kid-info small.warn { color: #B3262B; }
.kid-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.fam-row .kid-actions { grid-column: 1 / -1; }
.parents.fam .panel > .row.wrap { justify-content: flex-start; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.avatar-grid .starter { font-size: .9rem; }
.danger-zone { margin-top: 18px; padding: 14px 16px; border-radius: 22px; background: linear-gradient(168deg, rgba(255, 242, 242, .95), rgba(255, 228, 228, .85)); box-shadow: inset 0 0 0 1.5px rgba(214, 58, 67, .3); }
.danger-zone h3 { margin-top: 0; }
.invite-out:not(:empty) { margin-top: 12px; }

/* Informativa */
.privacy-text { text-align: left; font-size: .95rem; line-height: 1.5; color: var(--ink); -webkit-user-select: text; user-select: text; }
.privacy-text h2 { font-size: 1.3rem; margin-top: 1em; }
.privacy-text h3 { font-size: 1.1rem; }
.modal-text { padding-top: 10px; }
.privacy-gate { max-width: 680px; margin: 18px auto; }
.privacy-gate .f-links { text-align: left; margin-top: 10px; }

/* Privacy per i bambini */
.kp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.kp-bit { width: 110px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(12, 62, 96, .25)); }
.kp-list { list-style: none; padding: 0; margin: 0; }
.kp-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-inner); font-size: 1.2rem; transition: background .2s; }
.kp-item .speak-btn.sm { margin-left: 0; }
.kp-item.on { background: linear-gradient(168deg, rgba(255, 248, 222, .97), rgba(255, 234, 176, .88)); box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .45); }

/* Stampa (fuori dalla stampa l'area è nascosta) */
.print-area { display: none; }

/* ---------- 21b. Allenamento e consigli di Bit ---------- */
/* Schermata «Allenamento»: carta dell'allenamento di oggi (dorata finché vale l'uovo d'oro), materie, «Le mie abilità». */
.tr-hero, .tr-mode { position: relative; isolation: isolate; }
.tr-hero::after, .tr-mode::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tr-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
  border-radius: var(--r-card); padding: 22px 26px; margin-top: 6px;
  background: radial-gradient(85% 75% at 100% 100%, rgba(var(--sea-rgb), .26), rgba(var(--sea-rgb), 0) 70%), var(--g-sheen), var(--g-frost);
  box-shadow: inset 0 -4px 0 rgba(var(--sea-rgb), .7), var(--g-shadow);
}
.tr-hero.gold {
  background: radial-gradient(85% 75% at 100% 100%, rgba(244, 170, 40, .4), rgba(244, 170, 40, 0) 70%), var(--g-sheen), linear-gradient(168deg, rgba(255, 248, 222, .97), rgba(255, 230, 160, .86));
  box-shadow: inset 0 -4px 0 rgba(214, 150, 30, .8), inset 0 0 0 1.5px rgba(200, 150, 47, .45), var(--g-shadow);
}
.tr-hero-t { flex: 1 1 320px; min-width: 0; }
.tr-hero-t h2 { font-size: 2rem; margin: 10px 0 4px; }
.tr-hero-t p { margin: 0 0 16px; font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; }
.tr-hero-ico {
  width: 120px; height: 120px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 4rem; line-height: 1;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55) 60%), rgba(244, 183, 64, .25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 0 0 7px rgba(200, 150, 47, .45), inset 0 -4px 10px rgba(200, 150, 47, .25), 0 14px 24px -12px rgba(150, 100, 10, .7);
}
.tr-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--brass-ink);
  background: linear-gradient(180deg, rgba(255, 249, 226, .97), rgba(255, 236, 180, .92));
  box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .45), inset 0 1px 0 #fff;
}
.tr-h { margin: 24px 6px 10px; font-size: 1.3rem; color: var(--ink-soft); }
.tr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tr-mode {
  --tint: var(--subj-rgb, var(--sea-rgb));
  border: 0; border-radius: var(--r-tile); min-height: 86px; padding: 12px 18px; display: flex; align-items: center; gap: 14px; text-align: left;
  font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--ink);
  background: radial-gradient(85% 75% at 100% 100%, rgba(var(--tint), .26), rgba(var(--tint), 0) 70%), var(--g-sheen), var(--g-frost);
  box-shadow: inset 0 -4px 0 rgba(var(--tint), .7), var(--g-shadow-sm);
  transition: transform .45s var(--spring), box-shadow .3s;
}
.tr-mode:active { transform: scale(.965); transition-duration: .12s; }
.tr-mode.locked { filter: saturate(.25); opacity: .82; }
.tr-mode-e {
  width: 56px; height: 56px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55) 60%), rgba(var(--tint), .22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 5px rgba(200, 150, 47, .4);
}
.tr-skills { margin-top: 24px; }
.sk-group { margin: 16px 0 4px; }
.sk-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-family: var(--font-head); font-size: 1.25rem; }
.sk-ico { font-size: 1.35rem; }
.sk-note { font-family: var(--font-text); font-size: 1rem; color: var(--ink-soft); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sk-chip {
  --t: var(--subj-rgb, var(--sea-rgb));
  border: 0; border-radius: var(--r-pill); min-height: 48px; padding: 8px 18px 8px 12px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.05rem; color: var(--ink); text-align: left;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .86));
  box-shadow: inset 0 0 0 1.5px rgba(var(--t), .3), inset 0 -3px 6px -3px rgba(var(--t), .3), 0 8px 16px -10px rgba(var(--t), .75);
  transition: transform .4s var(--spring);
}
.sk-chip:active { transform: scale(.95); transition-duration: .1s; }
.sk-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 2px rgba(255, 255, 255, .9); }
.st-debole .sk-dot { background: #E07A10; }
.st-ripasso .sk-dot { background: #2A7FC6; }
.st-crescita .sk-dot { background: #7CB342; }
.st-sicura .sk-dot { background: #17A05A; }
.sk-more { display: inline-block; margin-top: 8px; font-size: 1rem; color: var(--ink-soft); }
.tr-foot { text-align: center; margin-top: 14px; }

/* «I consigli di Bit» nel risultato: schede color pergamena (come «Guardiamo insieme»), testo da leggere in Andika. */
.tips { margin: 18px auto 4px; max-width: 700px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.tips-h { margin: 0 0 2px; font-size: 1.35rem; color: var(--brass-ink); text-align: center; }
.tip {
  display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-tile); padding: 14px 16px;
  background: radial-gradient(90% 80% at 0% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%), linear-gradient(168deg, rgba(255, 250, 232, .98), rgba(255, 238, 190, .93));
  box-shadow: inset 0 0 0 1.5px rgba(200, 150, 47, .55), inset 0 1px 0 #fff, 0 12px 26px -16px rgba(150, 100, 10, .55);
  animation: arcPop .45s var(--spring) backwards;
}
.tip:nth-child(3) { animation-delay: .12s; }
.tip:nth-child(4) { animation-delay: .24s; }
.tip-ico {
  width: 50px; height: 50px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
  background: radial-gradient(120% 90% at 30% 0%, #fff, rgba(255, 255, 255, .6) 60%), rgba(244, 183, 64, .25);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .95), 0 0 0 4px rgba(200, 150, 47, .45);
}
.tip-body { flex: 1; min-width: 0; }
.tip-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 1.22rem; color: var(--brass-ink); }
.tip-t .speak-btn.sm { margin-left: 0; flex: none; }
.tip-x { margin: 4px 0 8px; font-size: 1.15rem; line-height: 1.45; }
.tip-ex {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border-radius: 14px; font-size: 1.05rem;
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(200, 150, 47, .3);
}
.tip-ex-l { font-family: var(--font-head); font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brass-ink); }
.tip-go { margin-top: 10px; }
.res-note { margin: 4px 0 0; color: var(--brass-ink); font-size: 1.05rem; }

/* Corsivo dentro l'allenamento: la stessa lavagna del laboratorio. */
.ex-area.kind-trace { gap: 12px; }
/* La consegna è breve: la scheda resta bassa e lo spazio va alla lavagna. */
.play:not(.cursive) .ex-area.kind-trace > .ex-card { min-height: 0 !important; padding: 14px 22px; }
.ex-area.kind-trace > .ans-area { display: block; }
.ans-trace { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ans-trace .cur-model svg { height: 96px; }

/* Area genitori: «Come aiutarlo a casa». */
.ptip { border-radius: var(--r-inner); padding: 12px 16px; margin: 10px 0; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.ptip-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 1.08rem; }
.ptip-n { font-size: .92rem; color: var(--ink-soft); white-space: nowrap; }
.ptip p { margin: 6px 0; font-size: 1rem; line-height: 1.5; }
.ptip .tip-ex { font-size: .98rem; }
.ptip-gen { margin-top: 12px; }
.ptip-gen summary { cursor: pointer; font-family: var(--font-head); font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.ptip-gen li { margin: 6px 0; font-size: 1rem; line-height: 1.45; }

@media (max-width: 600px) {
  .tr-hero { padding: 18px; }
  .tr-hero-t h2 { font-size: 1.6rem; }
  .tr-hero-ico { display: none; }
  .tr-start { width: 100%; }
  .tr-modes { grid-template-columns: 1fr; gap: 10px; }
  .tr-mode { min-height: 66px; font-size: 1.2rem; }
  .tip { padding: 12px; gap: 10px; }
  .tip-ico { width: 40px; height: 40px; font-size: 1.3rem; }
  .ans-trace .cur-btns { padding-left: 72px; gap: 10px; }
  .ans-trace .cur-btns .btn { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tip { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tr-hero, .tr-mode { background: linear-gradient(168deg, #FFFFFF, #F3F8FA); }
  .tr-hero.gold { background: linear-gradient(168deg, #FFF8DE, #FFEBB4); }
}

/* ---------- 22. Adattamenti ---------- */
/* Spiegazione «Guardiamo insieme» (dopo il 2° errore): la pagina scorre il meno possibile, così consegna e disegno
   restano in vista mentre Bit spiega. Il tastierino non serve più e si toglie; la scheda perde l'altezza minima. */
html:has(.ex-area > .explain) { scroll-padding-bottom: 16px; }
.ex-area:has(> .explain) .keypad, .ex-area:has(> .explain) .ans-order > .btn, .ex-area:has(> .explain) .ans-abaco > .btn,
.ex-area:has(> .explain) .ab-ctrls, .ex-area:has(> .explain) .tiles-bank:empty { display: none; }
.play:not(.cursive) .ex-area:not(.kind-column):has(> .explain) > .ex-card { min-height: 0 !important; }
.ex-area:has(> .explain) .col-note { display: none; } /* la nota sulle caselline del riporto non serve più */
/* Le scelte (già segnate ✓ / ✕) si fanno più basse e gli spazi più stretti: anche grafico e domanda restano in vista. */
.play:not(.cursive) .ex-area:has(> .explain) { row-gap: 14px; }
.ex-area:has(> .explain) .choices .choice { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
/* iPad (orizzontale e verticale): esercizi più grandi, la scheda prende spazio. */
@media (min-width: 768px) and (min-height: 700px) {
  .ex-area { padding-top: 22px; gap: 22px; }
  .play:not(.cursive) .ex-card { padding: 28px 34px 30px; }
  .play:not(.cursive) .ex-area:not(.kind-column) > .ex-card { min-height: clamp(180px, 28vh, 300px); display: flex; flex-direction: column; justify-content: center; }
  .prompt { font-size: 1.75rem; }
  .prompt.problem { font-size: 1.45rem; }
  .cg-row { font-size: 3rem; gap: 6px; }
  .es-g { font-size: 2.6rem; max-width: 400px; }
  .big-op { font-size: 3.6rem; }
  .array-grid { font-size: 2.5rem; }
  .choices { max-width: 900px; gap: 18px; }
  .choice { min-height: 120px; }
  .ch-l { font-size: 2.1rem; }
  .cs-symbol .ch-l { font-size: 3.4rem; }
  .cs-sentence .choice { min-height: 72px; }
  .cs-sentence .ch-l { font-size: 1.45rem; }
  .keypad { grid-template-columns: repeat(3, 92px); gap: 12px; }
  .key { height: 84px; font-size: 2.4rem; }
  .num-box { height: 104px; min-width: 170px; font-size: 3.6rem; }
  .tile, .tapword { min-height: 78px; min-width: 78px; padding: 14px 26px; font-size: 2rem; border-radius: 24px; }
  .vertical .tile { min-height: 64px; padding: 12px 22px; font-size: 1.35rem; }
}
/* Verticale alto: un po' d'aria sopra la scheda. */
@media (orientation: portrait) and (min-height: 1000px) and (min-width: 700px) {
  .play:not(.cursive) .ex-area { padding-top: 3vh; gap: 26px; }
  .play:not(.cursive) .ex-area:not(.kind-column) > .ex-card { min-height: 32vh; }
  .cg-row { font-size: 3.4rem; }
  .choice { min-height: 140px; }
  .cs-sentence .choice { min-height: 80px; }
}
/* Orizzontale: tastierino in un vassoio a destra; domanda e casella della risposta vicine, a sinistra. */
@media (min-width: 900px) and (orientation: landscape) {
  .ex-area.kind-number, .ex-area.kind-multi {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 20px; align-items: start;
  }
  .ex-area.kind-number > .ans-area, .ex-area.kind-multi > .ans-area,
  .ex-area.kind-number .ans-number, .ex-area.kind-multi .ans-number { display: contents; }
  .ex-area.kind-number > .ex-card, .ex-area.kind-multi > .ex-card {
    grid-column: 1; grid-row: 1; min-height: clamp(200px, 30vh, 300px); display: flex; flex-direction: column; justify-content: center;
  }
  .ex-area.kind-number .num-box, .ex-area.kind-multi .multi-row { grid-column: 1; grid-row: 2; justify-self: center; }
  .ex-area.kind-number .keypad, .ex-area.kind-multi .keypad { grid-column: 2; grid-row: 1 / -1; }
  .ex-area.kind-number > .explain, .ex-area.kind-multi > .explain { grid-column: 1; grid-row: 3; }
  /* Colonna: consegna in una striscia a tutta larghezza, sotto griglia e tastierino affiancati. */
  .ex-area.kind-column { display: flex; flex-direction: column; }
  .ex-area.kind-column .ans-column { gap: 48px; align-items: flex-start; flex-wrap: nowrap; }
  /* Numero con la spiegazione: la spiegazione prende il posto del tastierino, a destra; nulla scorre. */
  .ex-area.kind-number:has(> .explain), .ex-area.kind-multi:has(> .explain) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ex-area.kind-number > .explain, .ex-area.kind-multi > .explain { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  /* Scelte con la spiegazione: le risposte (già segnate) a sinistra, la spiegazione a destra, sotto la scheda intera:
     anche con il grafico e la barra di Safari (1180x740) la domanda resta in vista. */
  .ex-area.kind-choice:has(> .explain) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .ex-area.kind-choice:has(> .explain) > .ex-card { grid-column: 1 / -1; }
  .ex-area.kind-choice:has(> .explain) .choices:not(.cs-sentence) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* La colonna di sinistra lascia libero l'angolo di Bit (fisso in basso a sinistra): niente risposta sotto di lui. */
  .ex-area.kind-choice:has(> .explain) > .ans-area, .ex-area.kind-column:has(> .explain) > .ans-area { padding-left: 72px; }
  /* Colonna con la spiegazione: l'operazione (con la soluzione in verde) a sinistra, la spiegazione a destra. */
  .ex-area.kind-column:has(> .explain) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .ex-area.kind-column:has(> .explain) > .ex-card { grid-column: 1 / -1; }
  /* Corsivo «Tocca a te»: il modello accanto alla consegna (non su una riga sua), la lavagna resta alta. */
  .cursive-area:has(> .cur-model) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .cursive-area > .cur-top { grid-column: 1; grid-row: 1; }
  .cursive-area > .cur-model { grid-column: 2; grid-row: 1; }
  .cursive-area:has(> .cur-model) > .tracer, .cursive-area:has(> .cur-model) > .cur-msg, .cursive-area:has(> .cur-model) > .cur-btns { grid-column: 1 / -1; }
}
/* Mondo in orizzontale: percorso a serpentina, le boe sui due lati della rotta: sta tutto in una schermata. */
@media (min-width: 900px) {
  .level-path { max-width: 880px; gap: 0; padding-bottom: 60px; }
  .lvl { width: calc(50% - 28px); }
  .lvl + .lvl { margin-top: -30px; }
  .lvl.guardian { width: min(620px, 80%); margin-top: 26px; }
  .level-path::before { top: 40px; bottom: 150px; }
}
@media (max-width: 820px) {
  body::after {
    background:
      url(img/mappa-rosa.svg) right -50px bottom -50px / 200px 200px no-repeat,
      url(img/mappa-barca.svg) right 304px bottom 36px / 36px auto no-repeat,
      url(img/mappa-isolotti.svg) right 150px bottom 4px / 170px auto no-repeat,
      url(img/mappa-isola.svg) left -120px bottom -60px / 360px auto no-repeat,
      url(img/mappa-rotte.svg) center / cover no-repeat;
  }
  body:has(.screen.play .result)::after {
    background:
      url(img/mappa-rosa.svg) right -50px bottom -50px / 200px 200px no-repeat,
      url(img/mappa-barca.svg) right 304px bottom 36px / 36px auto no-repeat,
      url(img/mappa-isolotti.svg) right 150px bottom 4px / 170px auto no-repeat,
      url(img/mappa-rotte.svg) center / cover no-repeat;
  }
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .prog-world { grid-template-columns: 1fr; }
}
/* Telefono */
@media (max-width: 600px) {
  body { font-size: 18px; }
  html { scroll-padding-top: calc(150px + var(--safe-t)); }
  /* Sul telefono tra isola, isolotti e rosa non c'è mare per la barca: resta in porto. */
  body::after {
    background:
      url(img/mappa-rosa.svg) right -50px bottom -50px / 200px 200px no-repeat,
      url(img/mappa-isolotti.svg) right 150px bottom 4px / 170px auto no-repeat,
      url(img/mappa-isola.svg) left -120px bottom -60px / 360px auto no-repeat,
      url(img/mappa-rotte.svg) center / cover no-repeat;
  }
  body:has(.screen.play .result)::after {
    background:
      url(img/mappa-rosa.svg) right -50px bottom -50px / 200px 200px no-repeat,
      url(img/mappa-isolotti.svg) right 150px bottom 4px / 170px auto no-repeat,
      url(img/mappa-rotte.svg) center / cover no-repeat;
  }
  /* Barra: il titolo va su una seconda riga intera (mai troncato a «Prat…»). */
  .topbar { grid-template-columns: auto 1fr auto; grid-template-areas: "l . r" "t t t"; row-gap: 8px; }
  .tb-left { grid-area: l; }
  .tb-right { grid-area: r; }
  .tb-title { grid-area: t; font-size: 1.2rem; max-width: 100%; }
  .tb-title:empty { display: none; }
  .topbar:has(.tb-title:not(:empty))::before { height: calc(146px + var(--safe-t)); background: linear-gradient(180deg, rgba(255, 234, 214, .98) 0%, rgba(255, 234, 214, .95) 72%, rgba(255, 234, 214, 0) 100%); }
  .tb-right .chip { padding: 4px 8px; font-size: .95rem; }
  .tb-back, .tb-avatar { width: 46px; height: 46px; }
  .play-title { display: none; }
  .play-head { padding-right: 14px; }
  .btn { font-size: 1.1rem; padding: 12px 20px; min-height: 54px; }
  .btn.big { font-size: 1.2rem; }
  /* Targa del titolo: sottotitolo su righe bilanciate, senza ornamenti spezzati. */
  .login-sub { text-wrap: balance; line-height: 1.3; font-size: 1.05rem; }
  .login-sub::before, .login-sub::after { display: none; }
  .home-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .home-card { min-height: 164px; padding: 14px; border-radius: 28px; }
  .hc-emoji { width: 58px; height: 58px; font-size: 2rem; }
  .hc-emoji svg { width: 50px; height: 50px; }
  .hc-title { font-size: 1.22rem; }
  .world-card { grid-template-columns: 62px 1fr; padding: 14px; border-radius: 28px; }
  .world-card .guardian-badge { display: none; }
  .wc-emoji { width: 58px; height: 58px; font-size: 2rem; }
  .worlds::before { left: 43px; }
  .lvl { border-radius: 30px; padding: 8px 16px 8px 8px; }
  .lvl-circle { width: 62px; height: 62px; font-size: 1.7rem; }
  .ex-card { border-radius: 30px; padding: 18px 16px; }
  /* Consegna su più righe: testo centrato su tutta la larghezza, il pulsantino 🔊 segue l'ultima parola
     (come in un libro), così non ruba una colonna al testo né una riga in più allo schermo. */
  .ex-card .prompt:not(.problem) { display: block; text-align: center; }
  .ex-card .prompt:not(.problem) .speak-btn.sm { display: inline-flex; vertical-align: middle; margin: -6px 0 -4px 6px; }
  .choices, .choices.n4 { grid-template-columns: repeat(2, 1fr); }
  .choices.n3:not(.cs-sentence) > .choice:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .keypad { grid-template-columns: repeat(3, 68px); gap: 8px; padding: 8px; border-radius: 32px; }
  .key { height: 62px; border-radius: 24px; font-size: 2rem; }
  .big-op { font-size: 2.3rem; }
  .bit-face { width: 74px; }
  .bit-play .bit-face { width: 56px; }
  .bit-play .bit-batt { gap: 3px; padding: 3px 6px; }
  .bit-play .bit-batt span { width: 14px; height: 9px; }
  .bit-play .bit-btn::before { width: 84px; height: 28px; margin-left: -42px; }
  /* Mentre c'è la spiegazione il pannello prende tutta la larghezza: Bit si fa da parte e torna con «Ho capito». */
  .screen.play:has(.explain) .bit-play { visibility: hidden; }
  .bit-bubble { position: fixed; left: 76px; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + var(--safe-b)); width: auto; margin: 0; max-height: 45vh; overflow: auto; font-size: 1.05rem; padding: 14px 16px 12px; }
  .bit-bubble::before { display: none; }
  .bubble-x { top: 2px; right: 2px; }
  .cg-row { font-size: min(2.3rem, 6vw); gap: 2px; }
  .cg-row:not(:has(.cg-gap)) { font-size: min(2.3rem, 9vw); }
  .ch-l { font-size: 1.6rem; }
  .cs-syll .ch-l { font-size: 1.55rem; letter-spacing: 0; }
  .choice { padding: 14px 10px; }
  .cg-gap { width: 10px; }
  .array-grid { font-size: min(2.1rem, 6vw); letter-spacing: 1px; }
  .es-g { font-size: 1.8rem; }
  .play .ex-area { padding-bottom: 160px; }
  .cur-top { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 8px 10px 10px; }
  .cur-top .prompt { max-width: none; font-size: 1.05rem; line-height: 1.4; }
  .cur-mode { font-size: 1.05rem; padding: 6px 14px; }
  /* Pulsanti del corsivo: a destra di Bit (che sta fisso nell'angolo in basso a sinistra), mai sotto di lui. */
  .cursive-area .cur-btns { padding-left: 72px; gap: 10px; }
  .cursive-area .cur-btns .btn { padding: 10px 16px; }
  .result { border-radius: 32px; }
  .modal-box { border-radius: 30px; }
  .bit-bubble { border-radius: 24px; }
  .egg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .egg-card .egg-wobble svg { width: 92px; }
  .egg-card .egg-wobble::before { width: 92px; margin-left: -46px; }
  .dex-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .dc-name { font-size: 1.05rem; overflow-wrap: anywhere; }
  /* Filtri dell'Atlante: vanno a capo, tutti visibili (una striscia che scorre ne nasconderebbe metà). */
  .dex-filters { flex-wrap: wrap; justify-content: center; border-radius: 28px; }
  /* Colonna: griglia più compatta, così il tastierino (fino a ✓) sta nello schermo senza scorrere. */
  .ex-area.kind-column { gap: 12px; padding-top: 12px; }
  .ex-area.kind-column > .ex-card { padding: 14px 16px; }
  .ans-column { gap: 12px; }
  .col-grid { grid-template-columns: 46px 56px 56px; padding: 10px 12px; gap: 4px; }
  .col-cell { width: 52px; height: 52px; font-size: 2rem; }
  .col-h { height: 26px; font-size: 1.25rem; }
  .col-help { width: 44px; height: 44px; }
  .col-note { font-size: .95rem; margin-top: 6px; }
  .skill-row { grid-template-columns: 1fr 80px 44px; }
  .chip { padding: 4px 9px; font-size: .9rem; }
  .f-inline { grid-template-columns: 1fr; }
  .save-chip .sc-t { display: none; }
  .code-list { columns: 1; }
  .fam-head { flex-direction: column; align-items: stretch; }
}

/* Puntatore vero (Apple Pencil sospesa, trackpad): leggero schiarimento al passaggio. Il dito non lo vede. */
@media (hover: hover) and (pointer: fine) {
  .choice:hover, .key:hover, .tile:hover, .tapword:hover, .home-card:hover, .world-card:hover, .lvl:hover, .egg-card:hover, .dex-card:hover, .btn:hover { filter: brightness(1.03); }
}

/* Con una finestra aperta le animazioni decorative sotto il velo si fermano (il vetro non si ricalcola a ogni fotogramma). */
body:has(.modal-back) .chip-hot, body:has(.modal-back) .bit-face, body:has(.modal-back) .lvl-g,
body:has(.modal-back) .home-card.eggs.hot .hc-emoji, body:has(.modal-back) .lvl.next .lvl-circle::after,
body:has(.modal-back) .egg-wobble, body:has(.modal-back) .login-bit,
body:has(.modal-back) .bit-led, body:has(.modal-back) .bit-eyes, body:has(.modal-back) .bit-mouth { animation-play-state: paused; }
/* Negli esercizi il LED di Bit non lampeggia: nessuna luce intermittente ai margini mentre ci si concentra
   (e nessun ridisegno continuo dell'ombra di Bit). */
.screen.play .bit-led { animation: none; }

/* ---------- 23. Ripieghi: niente vetro sfocato ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tb-left, .tb-right, .play-head, .login-hero > div:not(.login-bit) { background: linear-gradient(168deg, #FFFFFF, #F1F8FA); }
  .result, .bit-bubble { background: linear-gradient(168deg, #FFFFFF, #F3F8FA); }
  .modal-back { background: rgba(8, 26, 52, .55); }
  .toast { background: #1E3458; }
}
/* Meno trasparenza: tutto opaco, niente decorazioni dietro. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --g-frost: linear-gradient(168deg, #FFFFFF, #F3F8FA);
    --g-solid: linear-gradient(168deg, #FFFFFF, #F5F9FA);
    --g-clear: linear-gradient(168deg, #FFFFFF, #F1F8FA);
    --g-blur: none;
  }
  body::after, body:has(.screen.play .result)::after { display: none; }
  body::before, body:has(.screen.play)::before { background: linear-gradient(172deg, #FFF3E6 0%, #EAF6F4 55%, #CDEBEC 100%); }
  .topbar::before { background: #FFF1E3; }
  .screen.play::before { background: linear-gradient(180deg, #FFF3E6 0%, #FFF3E6 70%, rgba(255, 243, 230, 0) 100%); }
  .tb-left, .tb-right, .play-head, .login-hero > div:not(.login-bit), .result, .bit-bubble, .toast, .modal-back { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ex-card, .result, .bit-bubble, .modal-box, .tb-title:not(:empty) { background: linear-gradient(168deg, #FFFFFF, #F3F8FA); }
  .toast { background: #1E3458; }
  .modal-back { background: rgba(8, 26, 52, .7); }
  .btn-ghost, .chip, .speak-btn, .tb-back, .tb-avatar, .pass-dots span, .tiles-answer, .grp, .pairs span, .kpi, .pw-l, .f-consent, .keypad, .bit-batt { background: #FFFFFF; }
  .choice, .key, .tile, .tapword, .pass-key, .ab-btn { background: #FFFFFF; }
  .dex-card.unknown, .world-card.locked, .lvl.locked { background: #E8EFF5; }
  .home-card::before, .world-card::before, .profile-card::before, .bit-play .bit-btn::before,
  .choice:not(.ok):not(.ko):not(.shown)::before, .key::before, .tile::before, .tapword::before, .pass-key::before, .ab-btn::before { display: none; }
}

/* ---------- 24. Meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary.big::before, .chip-hot, .login-bit, .bit-face, .lvl-g, .res-legend, .guardian-intro > div:first-child,
  .dex-detail > div:first-child, .rv-creature, .kp-bit, .bit-sleep > div, .bit-sleep .zzz, .egg-wobble, .res-egg,
  .home-card.eggs.hot .hc-emoji, .rays, .bit-led, .bit-eyes, .hatch-egg, .lvl.next .lvl-circle::after,
  .res-stars::before, .hatch-stage::before, .res-stars .st, .pass-dots span.on,
  .choice.ok, .num-box.ok, .tapword.ok, .tiles-answer.ok,
  .choice.ko, .num-box.ko, .tiles-answer.ko, .abaco-live.ko, .shake, .bit.talking .bit-mouth { animation: none !important; }
  .confetti { display: none !important; }
  .btn-primary.big::before { display: none; }
  body::after { transition: none; }
  .btn, .chip, .choice, .key, .tile, .tapword, .home-card, .world-card, .lvl, .egg-card, .dex-card, .profile-card,
  .pass-key, .starter, .ab-btn, .speak-btn, .tb-back, .tb-avatar, .listen-btn, .tg-ui::after, .play-progress i { transition: none !important; }
  .modal-box, .result, .explain, .bit-bubble, .toast, .modal-back, .reveal-card { animation-duration: .01ms !important; }
}

/* ---------- 25. Stampa: biglietti semplici, niente sfondo né vetro ---------- */
@media print {
  html, body, body.printing { background: #fff !important; }
  body::before, body::after { display: none !important; }
  body.printing > *:not(.print-area) { display: none !important; }
  body.printing .print-area { display: block; }
  .ticket { border: 2px dashed #999; border-radius: 12px; padding: 14px 18px; margin: 0 0 14px; break-inside: avoid; page-break-inside: avoid; font-size: 12pt; color: #000; background: #fff; box-shadow: none; }
  .ticket h2 { font-size: 15pt; margin: 0 0 6px; color: #000; }
  .ticket p, .ticket li { margin: 3px 0; }
  .ticket .muted { color: #333; }
  .ticket-code { font-family: ui-monospace, Menlo, monospace; font-size: 22pt; font-weight: 700; letter-spacing: 3px; text-align: center; border: 2px solid #000; border-radius: 8px; padding: 6px; margin: 8px 0 !important; }
}