/* ===== abcgioco (A B C Gioco) - stile generale ===== */
/* Font (Google Fonts, licenza libera OFL, file nella cartella fonts/: niente richieste a Google, vanno anche senza internet)
   - Andika per i testi: fatto per chi impara a leggere (a e g come a scuola, lettere che non si confondono)
     (Andika di suo ha le righe molto alte: con ascent/descent-override occupa lo stesso spazio in altezza del font di prima)
   - Fredoka per titoli e bottoni: tondo e allegro (solo lettere latine: le emoji restano quelle del dispositivo) */
@font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; ascent-override: 95%; descent-override: 26%; line-gap-override: 0%; src: url("../fonts/andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 700 900; font-display: swap; ascent-override: 95%; descent-override: 26%; line-gap-override: 0%; src: url("../fonts/andika-700.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/fredoka-700.woff2") format("woff2"); }
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }   /* margini di sicurezza (tacca, angoli) */
:root { --font-testi: "Andika", "Comic Sans MS", sans-serif; --font-titoli: "Fredoka", "Andika", sans-serif; }
button, input, select, textarea { font-family: inherit; }
:root {
  --rosa: #ff6fae;
  --viola: #8e6cf5;
  --azzurro: #4cc9f0;
  --verde: #5ad67d;
  --giallo: #ffd166;
  --arancio: #ff8c42;
  --rosso: #ef476f;
  --sfondo: #fff5fb;
  --testo: #3b2a4a;
  --carta: #ffffff;
  --ombra: 0 8px 20px rgba(80, 40, 120, 0.15);
  --raggio: 22px;
  /* Rilievo 3D: uno "spessore" pieno sotto + un'ombra morbida + un filo di luce sopra. Lo usano le carte dei giochi e i riquadri della configurazione */
  --ombra3d: 0 7px 0 rgba(60, 30, 100, .18), 0 16px 24px rgba(60, 30, 100, .2), inset 0 3px 0 rgba(255, 255, 255, .8);
  --ombra3d-premuta: 0 2px 0 rgba(60, 30, 100, .2), 0 5px 9px rgba(60, 30, 100, .18), inset 0 3px 0 rgba(255, 255, 255, .8);
  /* Colori del tema (si scelgono nella configurazione): rosa è quello di base */
  --t1: #ff6fae; --t2: #8e6cf5; --ttitolo: #6741d9; --tmsg: #c2185b; --tsul: #fff;
  --tchiaro: #efe6ff; --tchiaro2: #ffe3f1; --tglow: 255, 111, 174;
}
html[data-tema="verde"]  { --t1: #4cd685; --t2: #1f9d6b; --ttitolo: #1a8a5c; --tmsg: #1a8a5c; --sfondo: #f1fff6; --tchiaro: #d9f7e4; --tchiaro2: #e6fff0; --tglow: 90, 214, 125; }
html[data-tema="blu"]    { --t1: #4cc9f0; --t2: #3b6fe0; --ttitolo: #2f5fcf; --tmsg: #2f5fcf; --sfondo: #f1f8ff; --tchiaro: #dbe8ff; --tchiaro2: #e0f4ff; --tglow: 76, 201, 240; }
html[data-tema="rosso"]  { --t1: #ff6b6b; --t2: #d62839; --ttitolo: #c4202f; --tmsg: #c4202f; --sfondo: #fff4f4; --tchiaro: #ffdede; --tchiaro2: #ffe6e6; --tglow: 255, 107, 107; }
html[data-tema="viola"]  { --t1: #b07cf5; --t2: #6f3fd1; --ttitolo: #6f3fd1; --tmsg: #6f3fd1; --sfondo: #f8f2ff; --tchiaro: #e9defe; --tchiaro2: #f0e6ff; --tglow: 176, 124, 245; }
html[data-tema="giallo"] { --t1: #ffd23f; --t2: #f5a700; --ttitolo: #a86f00; --tmsg: #a86f00; --tsul: #4a3200; --sfondo: #fffbea; --tchiaro: #fff0b8; --tchiaro2: #fff5cc; --tglow: 255, 210, 63; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Tutto in STAMPATELLO MAIUSCOLO, perché la bambina non legge il corsivo.
   Per tornare al normale basta togliere questa regola. */
*, *::before, *::after { text-transform: uppercase; letter-spacing: 0.02em; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-testi);   /* Andika per tutti i testi; i titoli e i bottoni hanno Fredoka (regola qui sotto, in fondo al file) */
  background: var(--sfondo);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(var(--tglow), 0.15) 0, transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(76, 201, 240, 0.18) 0, transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255, 209, 102, 0.2) 0, transparent 35%);
  color: var(--testo);
  min-height: 100vh;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--t1), var(--t2));
  color: var(--tsul);
  box-shadow: var(--ombra);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
  flex: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.topbar h1 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.titolo-testo { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.titolo-prova { display: inline-block; margin-top: .1em; padding: .05em .5em; border-radius: .4em; background: #ffd600; color: #1e1e1e; border: 2px solid #1e1e1e; font-size: .75em; letter-spacing: .08em; }
.titolo-versione { font-size: .55rem; font-weight: bold; letter-spacing: .08em; opacity: .85; }
.topbar-destra { display: flex; gap: 6px; }
.btn-home, .btn-sound {
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.6);
  color: var(--tsul);
  font-size: 1.4rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s;
}
.btn-home:active, .btn-sound:active { transform: scale(0.9); }

.app {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  /* tacche e angoli arrotondati (app a tutto schermo): niente sotto la fotocamera */
  padding-top: calc(16px + var(--sa-t)); padding-left: calc(16px + var(--sa-l)); padding-right: calc(16px + var(--sa-r)); padding-bottom: calc(16px + var(--sa-b));
}

/* ===== Menu principale ===== */
.benvenuto {
  text-align: center;
  margin: 8px 0 18px;
}
.benvenuto h2 { margin: 0 0 6px; font-size: 1.6rem; color: var(--ttitolo); }
.benvenuto p { margin: 0; opacity: 0.8; }
.stelle-totali {
  display: inline-block;
  margin-top: 10px;
  background: var(--giallo);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: bold;
  box-shadow: var(--ombra);
}

.griglia-giochi {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  gap: 20px 14px;
  padding-bottom: 10px;
}
.carta-gioco {
  padding: 10px 8px;
  width: 150px; height: 186px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s;
}
.carta-gioco .emoji { font-size: 4.6rem; line-height: 1.1; margin-bottom: 6px; }
/* icone disegnate (SVG) al posto dell'emoji, grandi come un'emoji */
.carta-gioco .emoji .icona-gioco { width: 104px; height: 104px; display: block; margin: 0 auto; }
.carta-gioco h3 { margin: 2px 0; font-size: 1.05rem; }
.carta-gioco p { margin: 0; font-size: 0.85rem; opacity: 0.75; }
.carta-gioco .record { margin-top: 8px; font-size: 0.8rem; color: var(--ttitolo); font-weight: bold; }

/* ===== Elementi comuni ai giochi ===== */
.gioco {
  background: var(--carta);
  border-radius: var(--raggio);
  padding: 18px;
  box-shadow: var(--ombra);
  text-align: center;
}
.gioco h2 { margin: 0 0 6px; color: var(--ttitolo); }
.gioco .istruzioni { margin: 0 0 14px; opacity: 0.8; }

.btn {
  /* UGUALE ai bottoni della home (pillola lucida, contorno marrone, rilievo, riflesso): cambia solo la grandezza */
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 52%), linear-gradient(180deg, var(--t1), var(--t2));
  color: #fff;
  border: .13em solid var(--bordo-home, #4a2511);
  border-radius: 999px;
  padding: .45em 1.2em;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -.16em 0 rgba(0,0,0,.18), 0 .14em 0 var(--bordo-home, #4a2511), 0 .3em .5em rgba(0,0,0,.25);
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511;
  margin: 6px;
  touch-action: manipulation;
  transition: transform .1s;
}
.btn::after { content: ''; position: absolute; left: 9%; top: 14%; width: 14%; height: 22%; border-radius: 999px; background: rgba(255,255,255,.65); pointer-events: none; }
.btn:active { transform: translateY(.12em) scale(.98); box-shadow: inset 0 -.1em 0 rgba(0,0,0,.18), 0 .03em 0 var(--bordo-home, #4a2511); }
/* secondario (NO, INDIETRO...): stessa forma, bianco con il testo scuro */
.btn.secondario { background: linear-gradient(180deg, #fff 0, #fff 55%, #f1eaff 100%); color: var(--testo); text-shadow: none; }
.btn.piccolo { font-size: .95rem; }

.barra-stato {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-weight: bold;
}
.barra-stato span {
  background: var(--sfondo);
  padding: 6px 14px;
  border-radius: 999px;
}

.messaggio {
  min-height: 2em;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 12px 0;
  color: var(--tmsg);
}
.messaggio.vittoria { color: var(--verde); animation: salta .6s ease; }
@keyframes salta {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.scelte { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ===== Memory ===== */
.memory-griglia {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 520px;
}
.memory-carta {
  aspect-ratio: 1;
  perspective: 600px;
  cursor: pointer;
}
.memory-carta .interno {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .4s;
  transform-style: preserve-3d;
}
.memory-carta.girata .interno { transform: rotateY(180deg); }
.memory-carta .faccia {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 2.2rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.memory-carta .retro {
  background: linear-gradient(135deg, var(--t2), var(--azzurro));
  color: white;
}
.memory-carta .fronte {
  background: white;
  border: 3px solid var(--giallo);
  transform: rotateY(180deg);
}
.memory-carta.trovata .fronte { background: #e8ffe8; border-color: var(--verde); }

/* ===== Tris ===== */
.tris-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
}
.tris-cella {
  aspect-ratio: 1;
  background: var(--sfondo);
  border: 3px solid var(--t2);
  border-radius: 16px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tris-cella.vincente { background: var(--giallo); animation: salta .5s; }

/* ===== Indovina il numero ===== */
.input-grande {
  font-size: 2rem;
  width: 160px;
  text-align: center;
  padding: 8px;
  border: 3px solid var(--t2);
  border-radius: 16px;
}
.tentativi-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tentativi-lista span {
  padding: 4px 10px;
  border-radius: 999px;
  color: white;
  font-weight: bold;
}
.tentativi-lista .basso { background: var(--azzurro); }
.tentativi-lista .alto { background: var(--arancio); }
.tentativi-lista .giusto { background: var(--verde); }

/* ===== Matematica ===== */
.domanda { font-size: 3rem; font-weight: bold; margin: 16px 0; color: var(--ttitolo); }
.risposte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}
.risposte .btn { font-size: 1.6rem; padding: 16px; margin: 0; }
.risposte .btn.giusta { background: var(--verde); }
.risposte .btn.sbagliata { background: var(--rosso); animation: trema .3s; }
@keyframes trema {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ===== Acchiappa la stella ===== */
.stelle-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}
.buco {
  aspect-ratio: 1;
  background: #e9dcf7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  cursor: pointer;
  overflow: hidden;
}
.buco .stella {
  transform: scale(0);
  transition: transform .15s;
}
.buco.attivo .stella { transform: scale(1); }
.buco.colpito { background: var(--giallo); }

/* ===== Ripeti i colori ===== */
.colori-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}
.colore-btn {
  aspect-ratio: 1;
  border-radius: 24px;
  border: 4px solid white;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .1s, transform .1s;
  font-size: 2.5rem;
}
.colore-btn.acceso, .colore-btn:active { opacity: 1; transform: scale(1.05); }
.colore-btn[data-colore="rosso"] { background: var(--rosso); }
.colore-btn[data-colore="verde"] { background: var(--verde); }
.colore-btn[data-colore="blu"] { background: var(--azzurro); }
.colore-btn[data-colore="giallo"] { background: var(--giallo); }

/* ===== Puzzle scorrevole ===== */
.puzzle-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 320px;
  margin: 0 auto;
  background: var(--t2);
  padding: 6px;
  border-radius: 16px;
}

/* ===== Disegno ===== */
.tavolozza { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.colore-pennello {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
}
.colore-pennello.selezionato { outline: 4px solid var(--t2); }
.tela {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  background: white;
  border: 4px solid var(--t2);
  border-radius: 16px;
  touch-action: none;
  cursor: crosshair;
  display: block;
  margin: 0 auto;
}
.spessori { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }

/* ===== Coriandoli ===== */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}
.coriandolo {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  animation: cadi linear forwards;
}
@keyframes cadi {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.6; }
}

/* ===== DENTRO UN GIOCO: NIENTE BARRA IN ALTO E NIENTE SCORRIMENTO, MAI =====
   Il gioco occupa esattamente lo schermo. Regola descritta in .claude/skills/giochiamo/SKILL.md */
html.in-gioco, body.in-gioco { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.in-gioco .topbar { display: none; }
body.in-gioco .app { max-width: none; height: 100vh; height: 100dvh; padding: calc(6px + var(--sa-t)) calc(6px + var(--sa-r)) calc(6px + var(--sa-b)) calc(6px + var(--sa-l)); overflow: hidden; display: flex; flex-direction: column; }
body.in-gioco .app > .gioco { flex: 1; min-height: 0; padding: 0; background: transparent; box-shadow: none; text-align: left; overflow: hidden; }

/* Bottoni 🏠 e 🔊 da mettere nella riga in alto di ogni gioco */
.app-btn {
  border: 2.5px solid var(--bordo-home, #4a2511); background: linear-gradient(180deg, #fff 0, #fff 55%, #f1eaff 100%); color: var(--testo); font: inherit; font-size: 1.35rem; line-height: 1;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; position: relative;
  box-shadow: 0 4px 0 var(--bordo-home, #4a2511), 0 8px 12px rgba(40, 20, 70, .25); transition: transform .1s;
}
.app-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bordo-home, #4a2511); }


@media (max-width: 480px) {
  .topbar h1 { font-size: 1.1rem; }
  .griglia-giochi { grid-template-columns: repeat(2, 150px); gap: 12px; }
  .carta-gioco .emoji { font-size: 4rem; }
  .domanda { font-size: 2.4rem; }
}

/* ===== STELLINE ===== */
.stelle-badge {
  display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--testo);   /* mai sfondo giallo: la ⭐ non si vedrebbe (regola di Ray) */
  font-weight: 900; font-size: 1rem; padding: 4px 12px; border-radius: 999px; box-shadow: var(--ombra);
}
.stelle-badge[hidden] { display: none; }
.stelle-badge.pulsa { animation: slPulsa .55s ease; }
@keyframes slPulsa { 50% { transform: scale(1.35); } }
.stella-vola {
  position: fixed; z-index: 50; transform: translate(-50%, 0); pointer-events: none;
  font-weight: 900; font-size: 1.5rem; color: #d99a00; text-shadow: 0 2px 0 #fff, 0 0 8px #fff;
  animation: slVola 1.3s ease-out forwards;
}
@keyframes slVola { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 60px) scale(1.2); } }

/* ===== SFIDE EDUCATIVE E ACQUISTI =====
   Il fondo scuro sta SOTTO la riga in alto dei giochi (che ha z-index 30), così 🏠 e 🔊 restano sempre toccabili. */
.sfida-overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(60, 30, 90, .6);
  display: flex; align-items: center; justify-content: center; padding: calc(8px + var(--sa-t)) calc(8px + var(--sa-r)) calc(8px + var(--sa-b)) calc(8px + var(--sa-l)); overflow: hidden;
}
.sfida-card {
  background: #fff; border-radius: 26px; padding: 14px 16px; width: min(480px, 100%); max-height: 100%; overflow: hidden;
  text-align: center; box-shadow: 0 7px 0 var(--bordo-home, #4a2511), 0 14px 30px rgba(0, 0, 0, .3); border: 3px solid var(--bordo-home, #4a2511);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sfida-titolo { font-size: clamp(1.1rem, 4.5vmin, 1.7rem); font-weight: 900; color: var(--ttitolo); }
.sfida-testo { font-size: clamp(.85rem, 3vmin, 1.1rem); font-weight: bold; }
.sfida-stato { min-height: 1.3em; font-size: clamp(.8rem, 2.8vmin, 1rem); font-weight: bold; color: var(--tmsg); }
.sfida-emoji { font-size: clamp(2.2rem, 10vmin, 4rem); line-height: 1.1; }
.sfida-parola { font-size: clamp(2rem, 11vmin, 4.2rem); font-weight: 900; letter-spacing: .08em; color: var(--testo); line-height: 1.1; }
.sfida-bottoni { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sfida-mic {
  width: clamp(64px, 16vmin, 100px); height: clamp(64px, 16vmin, 100px); border-radius: 50%; border: none; cursor: pointer;
  font-size: clamp(2rem, 8vmin, 3rem); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 5px 0 rgba(0,0,0,.2);
}
.sfida-mic.ascolta { animation: slAscolta .8s ease-in-out infinite; background: var(--rosso); }
@keyframes slAscolta { 50% { transform: scale(1.15); } }
.sfida-ascolta { border: none; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: bold; background: var(--azzurro); color: #fff; cursor: pointer; }
.sfida-ascolta.grande { font-size: 1.2rem; padding: 12px 22px; min-height: 48px; }
.sfida-salta { border: none; background: transparent; font: inherit; font-weight: bold; font-size: .8rem; opacity: .75; cursor: pointer; padding: 4px 12px; }
.sfida-puntini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; max-width: 100%; }
.sfida-puntini .pt { width: clamp(11px, 3vmin, 16px); height: clamp(11px, 3vmin, 16px); border-radius: 50%; background: var(--giallo); display: inline-block; }
.sfida-puntini .pt.rosa { background: var(--t1); }
.sfida-puntini .pt.fuori { opacity: .22; }
.sfida-puntini .piu { font-weight: 900; padding: 0 6px; }
.sfida-domanda { font-size: clamp(2rem, 10vmin, 3.6rem); font-weight: 900; color: var(--ttitolo); line-height: 1.1; }
.sfida-risposte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.sfida-risp {
  font: inherit; font-size: clamp(1.6rem, 7vmin, 2.6rem); font-weight: 900; padding: 8px 0; border: none; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--azzurro), var(--verde)); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.sfida-risp.sbagliata { background: var(--rosso); animation: trema .3s; opacity: .8; }

@media (max-height: 520px) {
  .sfida-card { padding: 8px 12px; gap: 3px; border-width: 4px; }
  .sfida-puntini { display: none; }
  .sfida-emoji { font-size: 2rem; }
  .sfida-salta { padding: 0 10px; }
}

/* ===== CONFIGURAZIONE (SOLO PER I GRANDI) ===== */
.config { display: flex; justify-content: center; padding-top: 12px; }
.config-card {
  background: #fff; border-radius: 26px; box-shadow: 0 7px 0 var(--bordo-home, #4a2511), 0 14px 22px rgba(60, 30, 100, .18); border: 3px solid var(--bordo-home, #4a2511); padding: 20px 18px; width: min(420px, 100%);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.config-card h2 { margin: 0; color: var(--ttitolo); }
.config-card p { margin: 0; }
.config-emoji { font-size: 3rem; line-height: 1.1; }
.config-input { font: inherit; font-size: 1.4rem; text-align: center; width: 100%; padding: 10px; border: 3px solid var(--t2); border-radius: 16px; }
.config-msg { min-height: 1.4em; font-weight: bold; color: var(--tmsg); }
.config-card.trema { animation: trema .3s; }
.config-riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; padding: 10px 14px; background: var(--sfondo); border-radius: 14px; font-weight: bold; font-size: 1.1rem; }
.config-regalo { width: 100%; }
.config-reset { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 52%), linear-gradient(180deg, #ff6b6b, #e03131); }   /* cancellare: stessa forma, rosso */
.config-conferma { width: 100%; background: #fff3f6; border-radius: 14px; padding: 10px; }
.config-conferma[hidden] { display: none; }
.config-bottoni { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.config-info { font-size: .8rem; color: var(--testo); }   /* niente trasparenza: si deve leggere */

/* Titolo del gioco nell'header (inserito da app.js dopo il tasto 🏠) */
body.in-gioco .gioco [class$="-header"] { grid-template-columns: auto auto minmax(0, 1fr) auto; }
/* Giochi: in alto solo 🏠, il titolo e i tasti (⚙️ ⏸️ 🔊); tutte le informazioni (stelline, livello, punti, record...) in una riga SOTTO */
body.in-gioco .gioco [class$="-header"]:not(.sl-header) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "casa titolo destra" "info info info"; row-gap: 6px; }
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > [data-app="home"] { grid-area: casa; }
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > .tasto-tutorial { grid-area: titolo; justify-self: start; }
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > .app-destra, body.in-gioco .gioco [class$="-header"]:not(.sl-header) > [data-app="sound"] { grid-area: destra; }
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > [class$="-centro"] { grid-area: info; justify-content: center; }
.badge-record { background: #fff3bf; }
@media (max-height: 520px) {
  /* schermi bassi: le informazioni tornano nella stessa riga, al centro, per lasciare spazio al gioco */
  body.in-gioco .gioco [class$="-header"]:not(.sl-header) { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "casa titolo info destra"; }
}
.titolo-gioco { font-weight: bold; font-size: 1.1rem; color: var(--ttitolo); white-space: nowrap; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .titolo-gioco { font-size: .8rem; line-height: 1.1; max-width: 28vw; white-space: normal; overflow-wrap: anywhere; } }

.copia-link { text-align: center; margin: 14px 0 6px; }

.config-conto { font-size: 1.8rem; font-weight: bold; color: var(--ttitolo); margin: 8px 0; }

.config-profilo { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.config-etichetta { font-weight: bold; color: var(--ttitolo); }
.config-input[type="text"] { font-size: 1.2rem; }
.cfg-sesso { padding: 10px 16px; font-weight: 900; font-size: 1rem; margin: 6px; }

/* Configurazione: voce del tablet e registrazioni dei genitori */
.config-voce { width: 100%; background: var(--sfondo); border-radius: 14px; padding: 8px 12px; text-align: left; }
.config-voce summary { cursor: pointer; font-weight: bold; color: var(--ttitolo); padding: 6px 0; }
.config-voce-corpo { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 6px 0 4px; }
.config-voce-corpo .config-info { font-size: .8rem; text-align: left; }
.cfg-reg-lista { display: flex; flex-direction: column; gap: 6px; }
.cfg-reg-riga { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 6px; background: #fff; border-radius: 12px; padding: 6px 8px; }
.cfg-reg-testo { font-size: .9rem; font-weight: bold; min-width: 0; overflow-wrap: anywhere; }
.cfg-reg-btn { border: none; background: var(--sfondo); border-radius: 50%; width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; }
.cfg-reg-btn:disabled { opacity: .3; cursor: default; }
.cfg-reg-btn.attivo { background: #ff5d73; animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { transform: scale(1.12); } }

.cfg-tipi { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cfg-tipo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; font: inherit; font-weight: bold; text-align: left; cursor: pointer; color: var(--testo); }
.cfg-tipo-e { font-size: 1.6rem; }
.cfg-tipo-t small { display: block; font-size: .7rem; opacity: .7; }

.cfg-colori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.cfg-colore { min-height: 52px; font: inherit; font-weight: bold; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); cursor: pointer; }
.cfg-colore[data-tema="giallo"] { color: #4a3200; text-shadow: none; }

/* Configurazione: ogni sezione è un riquadro a sé, in rilievo come le carte dei giochi */
.config-colonna { flex-direction: column; align-items: center; gap: 22px; padding: 14px 4px 96px; }
.config-gruppo { width: min(420px, 100%); display: flex; flex-direction: column; gap: 22px; }
.config-box {
  width: min(420px, 100%); background: #fff; border: 3px solid var(--bordo-home, #4a2511); border-radius: 26px; box-shadow: 0 7px 0 var(--bordo-home, #4a2511), 0 14px 22px rgba(60, 30, 100, .18);
  padding: 16px 16px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.config-box h2 { margin: 0; color: var(--ttitolo); }
.config-box p { margin: 0; }
.config-box.config-voce { align-items: stretch; text-align: left; background: #fff; }
.config-box .config-riga { background: var(--sfondo); }
.config-versione { text-align: center; margin: 0; }
.config-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px);
  background: #fff; border: 4px solid var(--t1); border-radius: 999px; padding: 10px 20px; text-align: center;
  font-weight: bold; color: var(--ttitolo); box-shadow: var(--ombra3d); pointer-events: none;
}
.config-toast:empty { display: none; }
.config-box.config-voce { padding: 10px 16px 12px; }

/* Zona pericolosa della configurazione */
.config-pericolo { border-color: var(--bordo-home); }
.config-pericolo .config-etichetta { color: #b0161e; }
.config-attenzione { background: #fff0f0; border: 3px solid #ff8da1; }
.config-attenzione[hidden], #cfg-reset-tutto[hidden] { display: none; }

/* Fumetto del primo avvio che indica l'ingranaggio */
.fumetto-config {
  position: fixed; z-index: 60; width: min(280px, calc(100vw - 24px)); box-sizing: border-box; background: #fff; border: 4px solid var(--t1);
  border-radius: 20px; padding: 12px 14px; text-align: center; font-weight: bold; color: var(--ttitolo); box-shadow: var(--ombra3d); cursor: pointer;
  animation: fumetto-su 1.3s ease-in-out infinite;
}
.fumetto-config::after {
  content: ''; position: absolute; top: -14px; left: var(--freccia, 50%); width: 22px; height: 22px; background: #fff;
  border-left: 4px solid var(--t1); border-top: 4px solid var(--t1); transform: translateX(-50%) rotate(45deg);
}
.fumetto-config small { display: block; margin-top: 4px; font-size: .7rem; opacity: .7; }
@keyframes fumetto-su { 50% { margin-top: 6px; } }
[data-app="config"].evidenzia { outline: 4px solid var(--giallo); animation: pulsa 1s infinite; }
/* il ? dei giochi lampeggia con un alone giallo (senza ingrandirsi: resta fermo sotto il dito) */
[data-app="tutorial"].evidenzia { outline: 4px solid var(--giallo); animation: alone-q 1s ease-in-out infinite; }
@keyframes alone-q { 50% { outline-color: transparent; box-shadow: 0 0 0 8px rgba(255, 210, 63, .55); } }
.fumetto-tutorial { pointer-events: none; }   /* il tocco passa sotto: si chiude toccando dove si vuole */

/* ===== HOME a tutto schermo (niente barra in alto): sfondo disegnato, titolo, tre bottoni, pannello a destra ===== */
html.in-home, body.in-home { height: 100%; }   /* niente overflow: hidden qui: serve per il "trascina giù per aggiornare" di Chrome */
body.in-home .app { max-width: none; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.home { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.home-scena { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.hs-nuvole { }   /* ogni nuvola si muove per conto suo: vedi sf-nuvola */
@keyframes nuvole { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.home-centro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 2.2vmin, 20px); padding: 8px 12px; }
.home-titolo {
  margin: 0; font-size: clamp(2.6rem, 13vmin, 6.6rem); font-weight: 900; line-height: 1; letter-spacing: .04em;
  color: var(--t1); display: flex; flex-direction: column; align-items: center;
  /* contorno marrone scuro (fatto con le ombre: va anche sui Chrome vecchi), senza effetto 3D */
  text-shadow: .05em 0 0 #4a2511, -.05em 0 0 #4a2511, 0 .05em 0 #4a2511, 0 -.05em 0 #4a2511,
    .035em .035em 0 #4a2511, -.035em .035em 0 #4a2511, .035em -.035em 0 #4a2511, -.035em -.035em 0 #4a2511,
    0 0 0 #4a2511;
}
.home-titolo .titolo-prova { font-size: .22em; text-shadow: none; margin-top: .35em; }
.home .benvenuto { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.home .benvenuto h2 { margin: 0; color: #fff; font-size: clamp(1.1rem, 4.5vmin, 1.8rem);
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511; }
.home .stelle-totali { margin: 0; border: 3px solid #4a2511; font-size: clamp(.95rem, 3.6vmin, 1.3rem); }
.home-menu { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.6vmin, 22px); }
.home-btn {
  position: relative; width: min(66vw, 380px); font: inherit; font-weight: 900; font-size: clamp(1.25rem, 5.6vmin, 2.3rem);
  padding: .38em 1em; border-radius: 999px; border: .13em solid #4a2511; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 52%), linear-gradient(180deg, var(--t1), var(--t2));
  box-shadow: inset 0 -.16em 0 rgba(0,0,0,.18), 0 .14em 0 #4a2511, 0 .3em .5em rgba(0,0,0,.25);
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511;
  touch-action: manipulation; transition: transform .1s;
}
.home-btn::after { content: ''; position: absolute; left: 9%; top: 14%; width: 14%; height: 22%; border-radius: 999px; background: rgba(255,255,255,.65); pointer-events: none; }
.home-btn:active { transform: translateY(.12em) scale(.98); box-shadow: inset 0 -.1em 0 rgba(0,0,0,.18), 0 .03em 0 #4a2511; }
.home-lato { position: absolute; z-index: 2; right: -60px; padding-right: calc(70px + var(--sa-r)) !important; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px;
  padding: 12px 10px; background: rgba(40, 70, 40, .35); border-radius: 26px 0 0 26px; }
.home-icona { width: clamp(52px, 11vmin, 70px); height: clamp(52px, 11vmin, 70px);
  font-size: clamp(1.6rem, 6vmin, 2.3rem); line-height: 1; cursor: pointer; touch-action: manipulation; }
.home-versione { position: absolute; z-index: 1; left: calc(12px + var(--sa-l)); bottom: calc(10px + var(--sa-b)); color: var(--testo); font-size: .95rem; font-weight: 900; background: rgba(255, 255, 255, .88);
  border: 2px solid var(--bordo-home); border-radius: 999px; padding: 3px 12px; }   /* si legge su qualsiasi sfondo */
@media (max-height: 430px) {
  .home .benvenuto h2 { display: none; }
  .home-titolo { font-size: clamp(2.2rem, 12vmin, 4rem); }
}

/* ===== PAGINE (scegli il gioco, opzioni, negozio, record, configurazione) ===== */
.pagina-testa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: calc(-16px - var(--sa-t)) -16px 16px; padding: calc(10px + var(--sa-t)) 16px 12px;
  position: relative; z-index: 20; background: none; }   /* senza banda chiara: dietro si vede lo sfondo, e scorre con la pagina */
.pagina-testa h2 { margin: 0; text-align: center; color: var(--ttitolo); font-size: clamp(1.2rem, 5vw, 1.7rem); }
.cfg-colori-grandi .cfg-colore { min-height: 84px; font-size: 1rem; }
.record-lista { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.record-riga { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; font-weight: 900; }
.record-e { font-size: 2.2rem; line-height: 1; text-align: center; }
.record-e .icona-gioco { width: 2.4rem; height: 2.4rem; display: block; margin: 0 auto; }
.record-v { color: var(--ttitolo); font-size: .9rem; text-align: right; }
@media (orientation: portrait) {
  .home-titolo { font-size: clamp(2.6rem, 15vw, 6.6rem); }
  .home-btn { width: min(78vw, 420px); font-size: clamp(1.3rem, 7vw, 2.4rem); }
  .home-centro { margin-bottom: 12vh; }
}

/* ===== Pausa (giochi d'azione) ===== */
.app-destra { display: flex; gap: 6px; align-items: center; }
.pausa-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(40, 20, 70, .45); }
.pausa-card { background: #fff; border-radius: 26px; border: 3px solid var(--bordo-home); box-shadow: 0 7px 0 var(--bordo-home), 0 14px 30px rgba(0, 0, 0, .3); padding: 18px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pausa-big { font-size: clamp(2.4rem, 12vmin, 4.5rem); line-height: 1.1; }
.pausa-titolo { font-size: clamp(1.4rem, 6vmin, 2.2rem); font-weight: 900; color: var(--ttitolo); }
.pausa-riprendi { font-size: 1.3rem; padding: 12px 30px; }
/* stelline in alto a destra: solo stellina e numero, senza sfondo */
.stelle-grandi { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: clamp(1.4rem, 6vmin, 2.4rem); color: #fff; background: none;
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511; }
.home-alto { position: absolute; z-index: 2; right: calc(14px + var(--sa-r)); top: calc(10px + var(--sa-t)); gap: 10px; }   /* 🔊 vicino alle stelline, come nelle altre pagine */
.pagina-testa .stelle-grandi { font-size: clamp(1.3rem, 5.5vw, 1.9rem); }
@media (orientation: portrait) {
  .home-lato { top: auto; transform: none; bottom: max(9vh, 56px); }
  .home-centro { margin-bottom: 22vh; }
}
/* scelta dello sfondo nelle opzioni */
.cfg-sfondi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.cfg-sfondo { padding: 0 0 4px; cursor: pointer; font: inherit; color: var(--testo); display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.cfg-sfondo-img { width: 100%; height: auto; display: block; border-radius: calc(var(--tessera-raggio) - 3px) calc(var(--tessera-raggio) - 3px) 0 0; }   /* angoli tondi senza tagliare la ✓ */
.cfg-sfondo span { font-size: .72rem; font-weight: 900; text-align: center; }

/* ===== NEGOZIO e OPZIONI DEI GIOCHI: stesso stile della home (contorno scuro, rilievo 3D, lucido) ===== */
:root { --bordo-home: #4a2511; }
.negozio { display: flex; flex-direction: column; gap: 18px; }
.negozio-scheda { flex: 0 0 auto; width: 108px; scroll-snap-align: center; padding: 10px 4px 8px; cursor: pointer; font: inherit; color: var(--testo);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .12s; }
.negozio-scheda-e { font-size: 2.3rem; line-height: 1.1; }
.negozio-scheda-e .icona-gioco { width: 2.5rem; height: 2.5rem; display: block; }
.negozio-scheda-n { font-size: .72rem; font-weight: 900; text-align: center; }
/* gruppi: riquadri 3D con il titolo grosso come la home */
.negozio-voci { display: flex; flex-direction: column; gap: 22px; }
.negozio-gruppo { background: var(--tchiaro2); border: 3px solid var(--bordo-home); border-radius: 26px; box-shadow: 0 7px 0 var(--bordo-home), 0 14px 22px rgba(60, 30, 100, .18);
  padding: 8px 12px 14px; }
.negozio-gruppo-t { margin: 0 0 10px; text-align: center; color: #ffd23f; font-size: 1.5rem; font-weight: 900;
  text-shadow: 2px 0 0 var(--bordo-home), -2px 0 0 var(--bordo-home), 0 2px 0 var(--bordo-home), 0 -2px 0 var(--bordo-home); }
.negozio-griglia, .opz-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.negozio-voce { position: relative; padding: 10px 4px 8px; cursor: pointer; font: inherit; color: var(--testo);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s; }
.negozio-e { font-size: 2.3rem; line-height: 1.1; }
.negozio-colore { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bordo-home); display: block; }
.negozio-n { font-size: .72rem; font-weight: 900; text-align: center; }
.negozio-prezzo { background: none; border: none; padding: 0; font-size: 1rem; font-weight: 900; color: #fff; white-space: nowrap;   /* come le stelline delle pagine: senza sfondo, bianche col contorno */
  text-shadow: 1.5px 0 0 var(--bordo-home), -1.5px 0 0 var(--bordo-home), 0 1.5px 0 var(--bordo-home), 0 -1.5px 0 var(--bordo-home); }
.negozio-voce.presa .negozio-prezzo { color: #fff; }

/* finestra delle opzioni di un gioco (⚙️ in alto): sotto la riga in alto, così 🏠 e 🔊 restano toccabili */
.opz-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 26; display: flex; align-items: center; justify-content: center; padding: 64px 10px 10px; background: rgba(40, 20, 70, .5); }
.opz-card { background: #fff; border: 3px solid var(--bordo-home); border-radius: 26px; box-shadow: 0 7px 0 var(--bordo-home), 0 14px 30px rgba(0, 0, 0, .3); padding: 12px 14px 16px; width: min(520px, 100%); max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.opz-titolo { text-align: center; font-size: 1.6rem; font-weight: 900; color: #ffd23f;
  text-shadow: 2px 0 0 var(--bordo-home), -2px 0 0 var(--bordo-home), 0 2px 0 var(--bordo-home), 0 -2px 0 var(--bordo-home); }
.opz-gruppo { padding: 6px 10px 12px; }
.opz-gruppo .negozio-gruppo-t { font-size: 1.15rem; margin-bottom: 8px; }
.opz-griglia { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.opz-voce { padding: 6px 2px; }
.opz-voce .negozio-e { font-size: 1.9rem; }
.opz-voce.da-comprare { opacity: .8; }
.opz-scelto { background: var(--verde); color: #fff; }
.opz-interruttore { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; font: inherit; font-weight: 900; color: var(--testo); cursor: pointer; }
.opz-fatto { width: auto; align-self: center; font-size: 1.3rem; }
@media (max-height: 520px) {
  .opz-overlay { padding-top: 56px; }
  .opz-card { width: min(760px, 100%); padding: 6px 10px 8px; gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  .opz-titolo, .opz-gruppo .negozio-gruppo-t, .opz-voce .negozio-n { display: none; }
  .opz-gruppo { padding: 6px; box-shadow: 0 4px 0 var(--bordo-home); flex: 1 1 auto; }
  .opz-griglia { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  .opz-voce { padding: 3px 2px; border-width: 3px; box-shadow: 0 3px 0 var(--bordo-home); }
  .opz-voce .negozio-e { font-size: 1.5rem; }
  .opz-voce .negozio-prezzo { font-size: .65rem; padding: 0 5px; }
  .opz-interruttore { padding: 6px 10px; font-size: .85rem; }
  .opz-fatto { font-size: 1rem; padding: .25em .9em; }
}
.cfg-audio { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.opz-interruttore.spento { opacity: .45; }
.opz-interruttore:not(.on) span { opacity: .6; }
.cfg-link { width: 100%; font-size: clamp(1rem, 4.5vw, 1.4rem); }

/* ===== TESSERA: lo stile unico di tutte le tessere della app =====
   Carte dei giochi, schede e oggetti del negozio, scelte dentro i giochi, colori, sfondi, record, interruttori, icone della home.
   Per cambiare l'aspetto di tutte basta cambiare queste variabili o questa regola (vedi skill stile-giochini). */
:root { --tessera-bordo: 2.5px; --tessera-spessore: 4px; --tessera-raggio: 18px; --tessera-sfondo: linear-gradient(180deg, #fff 0, #fff 60%, #f6f0ff 100%); }
.tessera { position: relative; background: var(--tessera-sfondo); border: var(--tessera-bordo) solid var(--bordo-home); border-radius: var(--tessera-raggio);
  box-shadow: 0 var(--tessera-spessore) 0 var(--bordo-home), 0 10px 16px rgba(40, 20, 70, .28), inset 0 -4px 0 rgba(0, 0, 0, .06); color: var(--testo); font-family: inherit; cursor: pointer; transition: transform .1s; }
.tessera::before { content: ''; position: absolute; left: 10%; top: 6px; width: 22%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); pointer-events: none; }
.tessera:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bordo-home); }
/* selezione: come nella scelta dei colori, anello scuro marcato + la ✓ nell'angolo; niente alone o sfondo verde */
/* scelta: bordo verde chiaro e grosso, e la ✓ nell'angolo */
.tessera.sel, .tessera.attivo, .tessera.on { border-color: var(--bordo-home); box-shadow: 0 var(--tessera-spessore) 0 var(--bordo-home), 0 0 0 4px var(--t2), 0 10px 16px rgba(40, 20, 70, .28); }   /* anello nel colore di accento del tema */
.tessera.sel::after, .tessera.attivo::after, .tessera.on::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--t2); color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); font-size: 15px; font-weight: 900; line-height: 20px; text-align: center; z-index: 2; }
.tessera.bloccata, .tessera.da-comprare { filter: saturate(.55); opacity: .88; }
.tessera.bloccata::after { content: attr(data-prezzo); position: absolute; top: -6px; right: -4px; background: var(--giallo); color: var(--testo); border: 2px solid var(--bordo-home);
  font-size: .55rem; font-weight: 900; line-height: 1; padding: 2px 5px; border-radius: 999px; }
/* varianti */
.tessera.cfg-colore { color: #fff; }
.tessera.cfg-sfondo::before { z-index: 1; }
.tessera.carta-gioco:hover { transform: translateY(-2px); }
.tessera.home-icona { --tessera-bordo: 3px; }
.tessera.cfg-colore[data-tema="giallo"] { color: #4a3200; }
/* scelta dei giochi: gruppi (preferiti in testa, ben staccati dagli altri) e stellina dei preferiti sulla carta */
.giochi-gruppo { margin: 0 0 34px; }
.giochi-preferiti { background: var(--tchiaro2); border: 3px solid var(--bordo-home); border-radius: 26px; box-shadow: 0 7px 0 var(--bordo-home), 0 14px 22px rgba(60, 30, 100, .18); padding: 8px 10px 18px; margin-bottom: 40px; }
.carta-stella { position: absolute; top: 4px; right: 4px; z-index: 2; width: 36px; height: 36px; border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0;
  filter: grayscale(1) opacity(.4); transition: transform .15s, filter .15s; }
.carta-stella.on { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); transform: scale(1.1); }
.carta-stella:active { transform: scale(.85); }
/* sfida "numero prima e dopo" */
.sfida-primadopo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0; }
.sf-numero, .sf-casella { min-width: 74px; height: 74px; padding: 0 8px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 900;
  border: 3px solid var(--bordo-home); box-shadow: 0 4px 0 var(--bordo-home); background: #fff; }
.sf-casella { background: #fff3bf; color: var(--ttitolo); border-style: dashed; }
.sf-freccia { font-size: 1.8rem; }
@media (max-height: 520px) { .sf-numero, .sf-casella { min-width: 52px; height: 52px; font-size: 1.8rem; } }
.negozio-mini { display: block; width: 76px; height: 56px; }
.negozio-mini svg, .negozio-mini img { width: 100%; height: 100%; display: block; object-fit: contain; }
.opz-voce .negozio-mini { width: 64px; height: 44px; }
/* riquadri dei livelli dentro i giochi: stesso contorno e rilievo delle finestre (classe comune per tutti i giochi) */
.gioco [class$="-card"] { border: 3px solid var(--bordo-home); box-shadow: 0 7px 0 var(--bordo-home), 0 14px 26px rgba(40, 20, 70, .22); }
/* frecce e tasti dei giochi: tessere (già con contorno e rilievo); il simbolo più grande */
.tessera.sn-freccia, .tessera.sk-freccia, .tessera.sk-azione, .tessera.bl-tasto { border-radius: 18px; }
/* informazioni nei giochi: piccole pillole con il contorno */
.gioco .stelle-badge { border: 2px solid rgba(74, 37, 17, .35); box-shadow: none; }
/* tessere piccole (attrezzi del Salone, scelte di Unisci e Cresci): bordo e ✓ più piccoli */
.tessera.sl-tab, .tessera.sl-tool, .tessera.sl-opt, .tessera.an-modo, .tessera.an-tema { --tessera-bordo: 2px; --tessera-spessore: 3px; --tessera-raggio: 14px; }
.tessera.sl-tab::before, .tessera.sl-tool::before, .tessera.sl-opt::before { top: 3px; height: 4px; }
/* risposte delle sfide: come i bottoni della home */
.sfida-risp { border: 3px solid var(--bordo-home) !important; box-shadow: 0 4px 0 var(--bordo-home) !important; text-shadow: 1.5px 0 0 #4a2511, -1.5px 0 0 #4a2511, 0 1.5px 0 #4a2511, 0 -1.5px 0 #4a2511;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 55%), linear-gradient(180deg, var(--azzurro), var(--verde)); }
.sfida-risp:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bordo-home) !important; }
/* titoli delle pagine e dei giochi: grossi, gialli con il contorno, come la home */
.pagina-testa h2, body.in-gioco .titolo-gioco { color: #ffd23f; font-weight: 900;
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511, 1.5px 1.5px 0 #4a2511, -1.5px 1.5px 0 #4a2511; }

/* ===== Accessibilità (controllo UX del 8 novembre 2026) ===== */
/* bersagli da toccare: almeno 44 px */
.app-btn { min-width: 44px; min-height: 44px; }
.carta-stella { width: 44px; height: 44px; top: 0; right: 0; }
.opz-interruttore { min-height: 50px; }
.cfg-link { min-height: 50px; }
.tessera.an-modo { min-height: 44px; }
/* chi ha chiesto meno animazioni nel telefono: niente nuvole che si muovono, pulsazioni o scosse */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* chi usa la tastiera (o un comando vocale) vede dove si trova */
button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid #1c7ed6; outline-offset: 3px; }
.opz-nota { margin: -4px 0 8px; text-align: center; font-weight: 900; font-size: .8rem; color: var(--testo); }
.opz-griglia.ferma .opz-voce:not(.sel):not(.da-comprare) { filter: grayscale(.8); opacity: .55; }
/* giostra 3D del negozio */
.giostra { position: relative; z-index: 15; background: none; margin: -16px -16px 0; padding: 0 16px; }   /* senza banda chiara, scorre con la pagina */
.giostra-scena { position: relative; height: 136px; perspective: 900px; overflow: hidden; touch-action: pan-y; }
.giostra-anello { position: absolute; left: 50%; top: 14px; width: 0; height: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.giostra-anello .negozio-scheda { position: absolute; left: -59px; top: 0; width: 118px; transition: opacity .4s; backface-visibility: hidden; }
/* pannello a destra della home: all'apertura della app entra da destra con un rimbalzo */
.home-lato.entra { animation: entra-da-destra .9s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
@keyframes entra-da-destra { 0% { transform: translate(120%, -50%); } 100% { transform: translate(0, -50%); } }
@media (orientation: portrait) { @keyframes entra-da-destra { 0% { transform: translateX(120%); } 100% { transform: translateX(0); } } }
/* configurazione: giochi da mostrare (selezione multipla, stile normale della selezione) */
.cfg-giochi { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; width: 100%; }
.cfg-gioco { padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cfg-gioco-e { font-size: 2rem; line-height: 1; }
.cfg-gioco-e .icona-gioco { width: 56px; height: 56px; display: block; }
.cfg-gioco-n { font-size: .7rem; font-weight: 900; text-align: center; }
/* stellina dei preferiti ben visibile: un tasto bianco tondo con la stella */
.carta-stella { background: #fff; border: 2.5px solid var(--bordo-home); border-radius: 50%; box-shadow: 0 3px 0 var(--bordo-home); filter: none; font-size: 1.35rem; top: -8px; right: -8px; }
.carta-stella:not(.on) { color: transparent; text-shadow: 0 0 0 #b9b2c6; }
.carta-stella.on { background: #fff3bf; filter: none; transform: none; }
.giochi-aiuto { text-align: center; font-weight: 900; color: var(--testo); margin: 0 0 14px; }
/* nei giochi la riga delle informazioni sta SEMPRE su una riga sola: le etichette si stringono */
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > [class$="-centro"] { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }
body.in-gioco .gioco [class$="-centro"] > .stelle-badge { flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: 3px 8px; font-size: clamp(.72rem, 3.4vw, 1rem); }
@media (max-width: 420px) {
  body.in-gioco .gioco [class$="-centro"] > .stelle-badge [class$="-su"] { display: none; }   /* niente "/20" sui telefoni stretti */
  body.in-gioco .gioco [class$="-centro"] > .stelle-badge { padding: 2px 6px; }
}
body.in-gioco .gioco [class$="-header"]:not(.sl-header) > .titolo-gioco { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.cfg-condividi { margin: 0 0 4px; text-align: center; font-weight: 900; font-size: 1.05rem; color: var(--ttitolo); }
/* tasti rotondi delle barre (🏠 ❓ ⚙️ ⏸️ 🔊 ↩️ 🔄): "bolla" di vetro nei colori del tema, con il bordo bianco
   e un'ombra morbida sotto (scelta di Ray: niente bordo scuro sui tasti rotondi) */
.app-btn { background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 55%), linear-gradient(180deg, var(--t1), var(--t2));
  border: 2.5px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 4px 0 rgba(70, 40, 110, .35), 0 8px 14px rgba(40, 20, 70, .25); }
.app-btn::after { content: ''; position: absolute; left: 18%; top: 9%; width: 26%; height: 15%; border-radius: 50%; background: rgba(255,255,255,.6); pointer-events: none; transform: rotate(-20deg); }
.app-btn:active { box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), 0 1px 0 rgba(70, 40, 110, .35), 0 3px 6px rgba(40, 20, 70, .2); }
/* titolo della home A B C GIOCO: "A B C" in una tonalità più scura di "GIOCO", con i colori del tema */
.titolo-parola { display: block; text-align: center; }
.titolo-gio { color: var(--t2); }
.titolo-chini { color: var(--t1); }
/* sfondo scelto dietro tutte le pagine, fermo mentre la pagina scorre */
#sfondo-pagina { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#sfondo-pagina[hidden] { display: none; }
.sfondo-pagina-img { width: 100%; height: 100%; display: block; }

html:not(.in-gioco) body { background-color: transparent; }
.cfg-pass-box { position: relative; width: 100%; }
.cfg-pass-box .config-input { padding-right: 56px; }
.cfg-occhio { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: none; font-size: 1.4rem; cursor: pointer; }
/* sezioni della voce: niente freccina per aprire, si tocca il titolo */
.config-voce summary { list-style: none; }
.config-voce summary::-webkit-details-marker { display: none; }

/* "i" delle informazioni nel pannello della home: una i grossa, bianca con il contorno */
.home-info span { text-transform: none; font-weight: 900; font-style: normal; font-size: 1.15em; line-height: 1; color: #fff;
  text-shadow: -2px 0 0 var(--bordo-home), 2px 0 0 var(--bordo-home), 0 -2px 0 var(--bordo-home), 0 2px 0 var(--bordo-home); }
.home-info { background: linear-gradient(180deg, var(--t1), var(--t2)); }
.info-bottoni { flex-direction: column; align-items: stretch; }
.info-bottoni .btn { width: 100%; min-height: 50px; text-decoration: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.info-versione { font-size: 0.95rem; opacity: 1; }
/* hall of fame: record e stelline vinte giocando, uno sotto l'altro a destra */
.record-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.record-stelle { color: var(--testo); font-size: .95rem; white-space: nowrap; }
/* sezione genitori: ogni prova con il suo tasto per vedere un esempio */
.cfg-tipo-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cfg-esempio { min-height: 48px; padding: 6px 12px; font-size: .9rem; white-space: nowrap; }
@media (max-width: 420px) { .cfg-esempio { font-size: .8rem; padding: 6px 8px; } }
/* pagina delle novità */
.novita { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.novita-lista { margin: 0; padding: 0 4px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.novita-lista li { background: #fff; border: 2.5px solid var(--bordo-home); border-radius: 16px; padding: 8px 12px; font-weight: bold; color: var(--testo); line-height: 1.35; }
.novita-gruppo small { font-size: .6em; }
/* sfida di esempio (dalla sezione genitori): etichetta gialla in alto */
.sfida-esempio .sfida-card { position: relative; }
.sfida-esempio .sfida-card::before { content: 'ESEMPIO'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #ffd23f; color: var(--bordo-home);
  border: 2.5px solid var(--bordo-home); border-radius: 999px; padding: 1px 12px; font-weight: 900; font-size: .85rem; }
/* sfida "conta e scrivi": oggetti a gruppi di 5, casella del numero, caselle delle lettere e tasti delle lettere */
.cs-riga { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; flex-wrap: wrap; }
.cs-oggetti { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 56px; padding: 6px 10px; border: 3px solid var(--bordo-home); border-radius: 18px; background: #fff; }
.cs-gruppo { font-size: clamp(1.5rem, 6vmin, 2.2rem); letter-spacing: 2px; line-height: 1.2; }
.cs-vuoto { display: block; width: 90px; height: 40px; }
.cs-parola { display: flex; justify-content: center; gap: 0; margin: 2px 0; }
.cs-lettera { width: clamp(34px, 9vmin, 46px); height: clamp(40px, 10vmin, 52px); border: 2.5px solid var(--bordo-home); margin-left: -2.5px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.3rem, 5vmin, 1.9rem); font-weight: 900; color: var(--ttitolo); }
.cs-lettera:first-child { margin-left: 0; border-radius: 10px 0 0 10px; } .cs-lettera:last-child { border-radius: 0 10px 10px 0; }
.cs-lettera.piena { background: #fff3bf; }
.cs-tasti { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.cs-tasti[hidden] { display: none; }
.cs-tasto { min-width: 52px; min-height: 52px; padding: 4px 10px; font-size: 1.6rem; }
.cs-tasto.usata { opacity: .25; }
@media (max-height: 520px) { .cs-gruppo { font-size: 1.3rem; } .cs-tasto { min-width: 46px; min-height: 46px; font-size: 1.3rem; } .cs-oggetti { min-height: 44px; } }
.sfida-risposte[hidden] { display: none; }
/* ===== Prove a schermo intero (regola di Ray, vale per tutte le prove) =====
   La finestra prende tutto lo schermo sotto la riga in alto (--sfida-sopra la mette js/sfide.js),
   le cose si distribuiscono in altezza e diventano più grandi. */
.sfida-overlay.sfida-piena { padding: calc(var(--sfida-sopra, 0px) + 6px) calc(8px + var(--sa-r)) calc(12px + var(--sa-b)) calc(8px + var(--sa-l)); align-items: stretch; }
.sfida-piena .sfida-card { width: 100%; max-width: none; height: 100%; max-height: none; justify-content: space-evenly; gap: 10px; padding: 16px 18px; }
.sfida-piena .sfida-titolo { font-size: clamp(1.4rem, 5.5vmin, 2.2rem); }
.sfida-piena .sfida-testo { font-size: clamp(1.15rem, 5.2vmin, 1.9rem); line-height: 1.25; }   /* consegne più grandi (richiesta di Ray) */
.sfida-piena .sfida-stato { font-size: clamp(1.05rem, 4.6vmin, 1.6rem); }
.sfida-piena .sfida-risposte { max-width: 720px; }
.sfida-piena .sfida-risp { min-height: clamp(52px, 11vh, 120px); font-size: clamp(1.8rem, min(9vmin, 7vh), 3.6rem); }
.sfida-piena .sfida-domanda { font-size: clamp(2.6rem, 13vmin, 5rem); }
.sfida-piena .sfida-parola { font-size: clamp(2.4rem, 13vmin, 5.2rem); }
.sfida-piena .sfida-puntini .pt { width: clamp(14px, 4vmin, 24px); height: clamp(14px, 4vmin, 24px); }
.sfida-piena .sf-numero, .sfida-piena .sf-casella { min-width: clamp(60px, 13vh, 130px); height: clamp(60px, 13vh, 130px); font-size: clamp(2.2rem, 7vh, 4.4rem); }
.sfida-piena .cs-gruppo { font-size: clamp(1.6rem, min(8vmin, 6vh), 3.2rem); }
.sfida-piena .cs-lettera { width: clamp(38px, min(11vmin, 8vh), 70px); height: clamp(44px, 9vh, 80px); font-size: clamp(1.5rem, 5vh, 2.8rem); }
.sfida-piena .cs-tasto { min-width: clamp(50px, min(13vmin, 10vh), 90px); min-height: clamp(50px, 10vh, 90px); font-size: clamp(1.6rem, 5vh, 2.8rem); }
.sfida-piena .sfida-salta { font-size: clamp(1.1rem, 4.4vmin, 1.4rem); }
@media (max-height: 520px) {
  .sfida-piena .sfida-card { gap: 3px; padding: 6px 12px; }
  .sfida-piena .sfida-risp { min-height: 48px; font-size: 1.7rem; }
  .sfida-piena .sf-numero, .sfida-piena .sf-casella { min-width: 52px; height: 52px; font-size: 1.8rem; }
  .sfida-piena .cs-gruppo { font-size: 1.4rem; }
  .sfida-piena .cs-lettera { width: 36px; height: 38px; font-size: 1.3rem; }
  .sfida-piena .cs-tasto { min-width: 46px; min-height: 44px; font-size: 1.3rem; }
  .sfida-piena .cs-tasti { gap: 6px; }
  .sfida-piena .sfida-titolo { display: none; } .sfida-piena .sfida-testo { font-size: .95rem; }
  .sfida-piena .cs-oggetti { min-height: 0; padding: 2px 10px; } .sfida-piena .sfida-ascolta { padding: 4px 12px; }
}
.sfida-piena.sfida-esempio .sfida-card::before { top: 6px; }

/* tutorial dei giochi (❓ in alto) */
.tut-icona { width: clamp(64px, 16vmin, 96px); }
.tut-icona .icona-gioco { width: 100%; height: auto; display: block; }
.tut-testo { margin: 0; font-size: clamp(1rem, 3.8vmin, 1.3rem); font-weight: bold; line-height: 1.4; color: var(--testo); max-width: 520px; }
@media (max-height: 520px) { .tut-icona { display: none; } .tut-testo { font-size: .95rem; line-height: 1.3; } .tut-overlay .info-bottoni { flex-direction: row; } .tut-overlay .info-bottoni .btn { width: auto; flex: 1; } }
.tut-overlay .info-bottoni .btn { white-space: nowrap; }
/* sezione genitori: 🔊 Audio e voci, con tutorial dei giochi, tutorial delle prove e frasi della app */
#cfg-voce { background: var(--tchiaro2, #fff); border: 3px solid var(--bordo-home); border-radius: 26px; padding: 12px; box-shadow: 0 6px 0 var(--bordo-home); display: flex; flex-direction: column; gap: 10px; }
.cfg-audio-t { text-align: center; }
.cfg-reg-riga.tut .cfg-reg-testo b { display: block; }
.cfg-reg-riga.tut .cfg-reg-testo small { display: block; font-weight: normal; font-size: .8rem; line-height: 1.3; }
/* prove a schermo intero su telefoni piccoli: meno spazio tra le parti e oggetti un po' più piccoli */
@media (max-height: 700px) and (min-height: 521px) { .sfida-piena .sfida-card { gap: 6px; padding: 10px 12px; } }   /* sotto i 520 px vale la regola più stretta qui sopra */
@media (max-width: 420px) { .sfida-piena .cs-gruppo { font-size: clamp(1.3rem, 7vw, 1.8rem); letter-spacing: 0; } .sfida-piena .cs-oggetti { gap: 6px; padding: 4px 8px; } }
/* finestra della "i" sugli schermi bassi (telefono in orizzontale): bottoni su due colonne, più bassi */
@media (max-height: 520px) {
  .sfida-overlay:not(.tut-overlay):not(.sfida-piena) .info-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(560px, 100%); }
  .sfida-overlay:not(.tut-overlay):not(.sfida-piena) .info-bottoni .btn { min-height: 44px; font-size: .95rem; padding: 4px 10px; }
  .sfida-overlay:not(.tut-overlay):not(.sfida-piena) .info-bottoni [data-sfida="salta"]:last-child { grid-column: 1 / -1; }
  .info-versione { display: none; }
}

/* ===== Sfondi animati (js/sfondi.js): animali che camminano, saltano, volano; foglie e neve che cadono ===== */
.sf-a { transform-box: fill-box; transform-origin: center; animation-iteration-count: infinite; animation-timing-function: ease-in-out; will-change: transform; }
@keyframes sf-passeggia { 0% { transform: translateX(0) scaleX(1); } 47% { transform: translateX(var(--d)) scaleX(1); } 50% { transform: translateX(var(--d)) scaleX(-1); } 97% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.sf-passeggia { animation-name: sf-passeggia; animation-timing-function: linear; }
@keyframes sf-passo { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
.sf-passo { animation-name: sf-passo; }
@keyframes sf-saltino { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-30px); } 55% { transform: translateY(-30px); } }
.sf-saltino { animation-name: sf-saltino; }
@keyframes sf-attraversa { from { transform: translateX(0); } to { transform: translateX(var(--d)); } }
.sf-attraversa { animation-name: sf-attraversa; animation-timing-function: linear; }
@keyframes sf-onda { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.sf-onda { animation-name: sf-onda; }
@keyframes sf-cade { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(var(--dx), 380px) rotate(180deg); } 100% { transform: translate(0, 780px) rotate(360deg); } }
.sf-cade { animation-name: sf-cade; animation-timing-function: linear; }
@keyframes sf-galleggia { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.sf-galleggia { animation-name: sf-galleggia; }
@keyframes sf-brilla { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.sf-brilla { animation-name: sf-brilla; }
@keyframes sf-tuffo { 0%, 55% { transform: translate(0, 60px) rotate(-40deg); opacity: 0; } 60% { transform: translate(0, 30px) rotate(-40deg); opacity: 1; } 75% { transform: translate(-90px, -90px) rotate(0deg); } 90% { transform: translate(-180px, 30px) rotate(40deg); opacity: 1; } 95%, 100% { transform: translate(-180px, 60px) rotate(40deg); opacity: 0; } }
.sf-tuffo { animation-name: sf-tuffo; animation-timing-function: linear; }
.sf-caso { animation-direction: normal; }
/* nelle miniature delle Opzioni gli sfondi stanno fermi (sono nove insieme); fermi anche per chi ha chiesto meno animazioni */
.cfg-sfondo-img .sf-a { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sf-a { animation: none !important; } }
/* tutti i bottoni (anche quelli piccoli delle finestre e della sezione genitori) sono alti almeno 44 px */
.btn, .home-btn { min-height: 44px; }
.cfg-sesso { min-height: 44px; }

/* ===== Scelte all'inizio dei giochi (armi, personaggi, navicelle, set, temi) =====
   nomi leggibili (almeno 11 px) e prezzo come nel negozio: senza sfondo, bianco col contorno */
.gioco .fr-arma-n, .gioco .vv-arma-n, .gioco .an-tema-n, .gioco .bl-scelta-n, .gioco .mt-nave-n { font-size: 11px; letter-spacing: 0; }
.tessera.bloccata::after { background: none !important; border: none !important; box-shadow: none !important; color: #fff !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 900; top: -4px; right: 2px;
  text-shadow: 1.5px 0 0 var(--bordo-home), -1.5px 0 0 var(--bordo-home), 0 1.5px 0 var(--bordo-home), 0 -1.5px 0 var(--bordo-home); }
.fr-arma-mini svg { display: block; width: 100%; max-width: 64px; height: auto; margin: 0 auto; }
/* telefono in verticale: tre scelte per riga, così i nomi si leggono interi */
@media (max-width: 480px) and (orientation: portrait) {
  .gioco .fr-armi, .gioco .vv-armi, .gioco .mt-navi { grid-template-columns: repeat(3, 1fr); }
  .mt-nave-n { display: block !important; }
}
/* tablet e schermi grandi: le finestre di inizio livello e le opzioni ⚙️ dei giochi sono più grandi (per le dita di una bambina) */
@media (min-width: 900px) and (min-height: 700px) {
  .gioco [class$="-overlay"] > [class$="-card"] { zoom: 1.4; }
  .record-lista, .novita, .config-colonna { zoom: 1.2; }
}
/* inizio livello: solo la scelta attuale e "🔄 Cambia"; le altre si aprono sotto */
.scelte-chiuse:not(.scelte-aperte) { display: none !important; }
.scelte-aperte { margin-top: 2px; }
.scelta-attuale { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.scelta-attuale > .tessera { pointer-events: none; flex: 0 0 auto; min-width: 84px; max-width: 46%; }
.scelta-cambia { font-size: 1rem; padding: 8px 16px; }
/* schermi bassi (telefono girato): le righe "scelta attuale + Cambia" più compatte */
@media (max-height: 520px) {
  .scelta-attuale { gap: 8px; }
  .scelta-attuale > .tessera { padding: 2px 8px; }
  .scelta-cambia { font-size: .9rem; padding: 4px 12px; }
  .an-card .an-catena { display: none; }
}
@media (max-height: 700px) {
  [data-scegliendo] [class$="-p"], [data-scegliendo] [class$="-record"], [data-scegliendo] .an-catena, [data-scegliendo] .scelta-attuale:not(.aperta) { display: none !important; }
}
/* negozio aperto da un gioco: il tasto per tornare al gioco è la miniatura del gioco dentro la bolla */
.app-btn.torna-gioco { padding: 3px; overflow: hidden; }
.app-btn.torna-gioco .icona-gioco { width: 100%; height: 100%; display: block; border-radius: 50%; }
/* giostra: tutte le schede alte uguali (il nome ha sempre posto per due righe) */
.giostra-anello .negozio-scheda { height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; box-sizing: border-box; }
.giostra-anello .negozio-scheda-n { min-height: 2.5em; display: flex; align-items: center; justify-content: center; line-height: 1.2; font-size: 11px; }

@keyframes sf-nuvola { from { transform: translateX(0); } to { transform: translateX(var(--d)); } }
.sf-nuvola { animation-name: sf-nuvola; animation-direction: alternate; }
@keyframes sf-sole { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(-8px); } }
.sf-sole { animation-name: sf-sole; }
/* i genitori possono fermare le animazioni degli sfondi (dispositivi lenti): classe sfondi-fermi su <html> */
.sfondi-fermi .sf-a { animation: none !important; }
.sfida-mini { display: block; width: 110px; margin: 0 auto; }
.sfida-mini svg, .sfida-mini img { width: 100%; height: auto; display: block; }
/* tasto ? del tutorial: punto di domanda bianco con il contorno nel colore scuro del tema (come la "i" della home), non l'emoji rossa */
.tasto-tutorial-q { display: block; font-family: inherit; font-size: 1.7rem; font-weight: 900; line-height: 1; color: #fff; transform: translateY(1px);
  text-shadow: 2px 0 0 var(--ttitolo), -2px 0 0 var(--ttitolo), 0 2px 0 var(--ttitolo), 0 -2px 0 var(--ttitolo), 1.5px 1.5px 0 var(--ttitolo), -1.5px -1.5px 0 var(--ttitolo), 1.5px -1.5px 0 var(--ttitolo), -1.5px 1.5px 0 var(--ttitolo); }
/* A B C GIOCO va su due righe sul telefono: sugli schermi bassi il titolo è più piccolo, così i bottoni non finiscono sotto il pannello a destra */
@media (orientation: portrait) and (max-height: 720px) { .home-titolo { font-size: clamp(2.2rem, 11vw, 3.4rem); } }

/* ===== Titoli e bottoni in Fredoka (i testi restano in Andika) ===== */
h1, h2, h3, .home-titolo, .home-btn, .btn, .pagina-testa h2, .titolo-gioco, [class$="-h2"], [class*="-h2 "], .sfida-titolo, .pausa-titolo, .opz-titolo,
.negozio-gruppo-t, .config-etichetta, .stelle-grandi, .home-versione { font-family: var(--font-titoli); }

/* 🔓 Tutti i livelli (solo app di prova): griglia dei numeri */
.livelli-card { max-width: min(520px, 94vw); max-height: 90%; overflow-y: auto; }
.livelli-griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; margin: 6px 0 10px; }
.livelli-n { min-height: 48px; font-size: 1.3rem; font-weight: 900; font-family: var(--font-titoli); }

/* finestra "i": nota sul microfono per i genitori */
.info-privacy { margin: 4px 0 0; max-width: 460px; font-size: .78rem; line-height: 1.3; color: #6b5b7b; text-align: center; }

/* home: "Ciao, Anna!" sotto il menu, solo se i genitori hanno messo il nome */
.home-ciao { margin: clamp(8px, 2vh, 18px) auto 0; max-width: min(72vw, 420px); overflow-wrap: anywhere; font-family: var(--font-titoli); font-weight: 700; font-size: clamp(1.3rem, 4.5vmin, 2.1rem); color: #fff; text-align: center;
  text-shadow: 2px 0 0 #4a2511, -2px 0 0 #4a2511, 0 2px 0 #4a2511, 0 -2px 0 #4a2511, 1.5px 1.5px 0 #4a2511, -1.5px 1.5px 0 #4a2511; }

/* sfida in inglese: i colori sono pallini grandi da toccare (niente scritte, se no si legge la risposta) */
.sfida-risp.sf-colore { display: flex; align-items: center; justify-content: center; background: #fff !important; }   /* sfondo bianco: il verde e l'azzurro si vedono bene */
.sf-pallino { display: block; width: 2em; height: 2em; border-radius: 50%; border: 3px solid var(--bordo-home); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }

/* sezione genitori: istruzioni per installare la app (Android e iPhone/iPad) */
.config-passi { margin: 6px 0 4px; padding-left: 1.4em; text-align: left; line-height: 1.45; font-size: .95rem; }
.config-passi li { margin: 4px 0; }
.config-installa #cfg-installa-ora { margin: 6px auto; }

/* ===== Badge in alto nei giochi (stelline, livello, punti, record...): bianchi con il contorno marrone, come le tessere,
   così si leggono bene su qualsiasi sfondo; il numero in grassetto scuro (richiesta di Ray: prima non si vedevano) ===== */
.gioco [class$="-centro"] > .stelle-badge, .sl-stage .stelle-badge {
  background: #fff !important; color: #3b2a4a; border: 2.5px solid var(--bordo-home) !important; box-shadow: none !important;   /* solo il bordo: il rilievo sotto veniva tagliato */
  font-family: var(--font-titoli); font-weight: 700;
}
.gioco [class$="-centro"] > .stelle-badge b { color: #2b1d3a; font-weight: 700; }
.gioco [class$="-centro"] > .stelle-badge [class$="-su"] { opacity: .8; }

/* ===== Prove nuove (2.3): figure, parole con il buco, stelline da toccare, forme ===== */
.sf-parola-fig { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sf-figura { font-size: clamp(2.6rem, 11vmin, 4.6rem); line-height: 1; }
.sf-parola-buco { font-family: var(--font-testi); font-weight: 700; font-size: clamp(1.8rem, 8vmin, 3.2rem); letter-spacing: 4px; color: var(--testo); }
.sf-parola-buco b { display: inline-block; min-width: 1.2em; padding: 0 4px; margin: 0 2px; border: 3px solid var(--bordo-home); border-radius: 10px; background: #fff3bf; text-align: center; color: var(--ttitolo); }
.sfida-risposte.sf-risp-figure .sfida-risp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff !important; text-shadow: none; color: var(--testo); }
.sf-op-fig { font-size: clamp(2rem, 9vmin, 3.4rem); line-height: 1.1; }
.sf-risp-figure .sfida-risp small { font-size: clamp(.7rem, 2.8vmin, .95rem); font-weight: 700; letter-spacing: 1px; }
.sf-forma { width: clamp(46px, 13vmin, 84px); height: auto; display: block; }
.sf-tanti { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100%, 420px); }
.sf-stellina { min-height: 52px; font-size: clamp(1.7rem, 7vmin, 2.4rem); border: 3px solid var(--bordo-home); border-radius: 14px; background: #fff; color: #b8a77a; cursor: pointer; line-height: 1; }
.sf-stellina.accesa { background: #fff8db; }
.sf-tanti-n { font-size: 1.4em; color: var(--ttitolo); }
.sf-fatto { font-size: 1.2rem; padding: 10px 26px; }
.sf-lati { display: flex; justify-content: space-between; width: min(100%, 420px); font-weight: 700; font-size: .85rem; opacity: .75; }
@media (max-height: 520px) { .sf-stellina { min-height: 44px; } .sf-tanti { gap: 5px; } .sf-figura { font-size: 2.2rem; } .sf-parola-buco { font-size: 1.6rem; } .sf-lati { display: none; } }

/* ===== Pagina 🎯 Prove educative dei genitori ===== */
.prove-gen .cfg-prova { display: flex; flex-direction: column; gap: 6px; }
.prove-gen .cfg-prova-d { margin: 0; text-transform: none; }
.prove-gen .cfg-tipi { display: flex; flex-direction: column; gap: 12px; }
.prove-gen #prove-giostra, .prove-gen #classi-giostra { width: 100%; align-self: stretch; }
.prove-gen .prove-classe { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prove-gen .prove-classe[hidden] { display: none; }
.prove-gen .cfg-arriveranno { font-size: 1.05em; text-align: center; padding: 14px; }   /* la giostra ha bisogno di tutta la larghezza (i pezzi dentro sono assoluti) */
.prove-gen .cfg-cat-accese { width: 100%; max-width: 560px; box-sizing: border-box; }
.prove-gen .cfg-cat-accese b { white-space: nowrap; }
/* bustina in fondo alla pagina delle prove: suggerisci una prova (mail come il parere delle informazioni) */
.prove-gen .cfg-suggerisci { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 560px; box-sizing: border-box; padding: 14px 18px; text-decoration: none; color: inherit; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15em; }
.prove-gen .cfg-suggerisci-e { font-size: 2.2em; line-height: 1; }
.config-riga > span { flex: 1 1 auto; min-width: 0; }
.config-riga > b { flex: 0 0 auto; white-space: nowrap; }   /* il numero (5 / 7) non si sovrappone mai alla scritta */
.cfg-pass-form { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cfg-pass-form[hidden] { display: none; }
/* istruzioni per installare la app, nelle informazioni (tasto 📲 Installa la app) */
.info-installa { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 8px; }
.info-installa[hidden] { display: none; }
.sfida-card.info-card { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* giostra: icona e nome usano tutto lo spazio della scheda (richiesta di Ray) */
.giostra-anello .negozio-scheda { padding: 6px 4px 5px; gap: 2px; justify-content: space-between; }
.giostra-anello .negozio-scheda-e { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: 3.1rem; line-height: 1; }
.giostra-anello .negozio-scheda-e .icona-gioco { width: 3.6rem; height: 3.6rem; }
.giostra-anello .negozio-scheda-n { font-size: 12.5px; min-height: 2.4em; }
/* bambina / bambino: solo le icone, grandi */
.cfg-sesso { font-size: 2.8rem; line-height: 1; padding: 8px 18px; min-width: 84px; }
/* sottosezione Audio e voci dei genitori: giostra delle parti, si vede solo la parte scelta */
.audio-gen #audio-giostra { width: 100%; align-self: stretch; }
.audio-gen #cfg-voce { width: 100%; max-width: 560px; }
.audio-gen .cfg-audio-t { display: none; }
.audio-gen details.config-voce[hidden] { display: none; }
.audio-gen #cfg-voce { background: none; border: 0; box-shadow: none; padding: 0; }
.audio-gen #cfg-voce > .config-info { text-align: center; }
/* righe dei tutorial (testo lungo): il testo prende tutta la riga, i tasti vanno sotto a destra */
.cfg-reg-riga.tut .cfg-reg-testo { grid-column: 2 / -1; }
.cfg-reg-riga.tut [data-az="rec"] { grid-column: 3; }
/* informazioni: i tasti su due colonne (così la finestra sta tutta nello schermo anche sui telefoni piccoli) */
.sfida-bottoni.info-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sfida-bottoni.info-bottoni .btn { margin: 0; font-size: .82rem; padding: 10px 6px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; }
.sfida-bottoni.info-bottoni [data-sfida="salta"] { grid-column: 1 / -1; }
@media (max-height: 520px) {
  .sfida-overlay:not(.tut-overlay):not(.sfida-piena) .sfida-bottoni.info-bottoni { grid-template-columns: repeat(3, 1fr); }
  .sfida-overlay:not(.tut-overlay):not(.sfida-piena) .sfida-bottoni.info-bottoni [data-sfida="salta"] { grid-column: auto; }
}
/* Regola di Ray: le scritte sopra lo sfondo (che cambia) stanno sempre in un box bianco.
   .nota = box bianco per un testo; .nota-info = istruzione, con l'icona ℹ️ davanti. */
.nota { background: #fff; color: var(--testo, #4a2511); border: 3px solid var(--bordo-home, #4a2511); border-radius: 16px; box-shadow: 0 4px 0 var(--bordo-home, #4a2511);
  padding: 8px 14px; margin: 0 auto 12px; max-width: min(560px, 100%); box-sizing: border-box; text-align: center; font-weight: 700; }
.nota[hidden] { display: none; }
.nota-info { display: flex; align-items: center; gap: 10px; text-align: left; }
.nota-info::before { content: 'ℹ️'; font-size: 1.5em; flex: 0 0 auto; }
/* istruzione dentro un box già bianco: solo l'icona ℹ️ davanti */
.con-info::before { content: 'ℹ️ '; }
/* ✅ PROVE ACCESE è un tasto: accende o spegne tutte le prove della categoria (con conferma) */
button.cfg-cat-accese { font: inherit; font-weight: bold; color: inherit; border: 2px dashed var(--bordo-home, #4a2511); cursor: pointer; text-align: left; }
button.cfg-cat-accese small { display: block; font-size: .7rem; font-weight: normal; opacity: .8; }
/* versione nella home (richiesta di Ray): al centro in basso, coi colori del tema */
.home-versione { left: 50%; right: auto; transform: translateX(-50%); background: linear-gradient(180deg, var(--t1), var(--t2)); color: #fff;
  border: 2px solid var(--bordo-home); box-shadow: 0 3px 0 var(--bordo-home); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
/* ===== Tutorial di benvenuto (js/benvenuto.js): schede a tutto schermo da sfogliare col dito ===== */
.bv-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(40, 15, 80, .6); overflow: hidden; touch-action: pan-y; }
.bv-binario { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); }
.bv-scheda { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: calc(62px + var(--sa-t, 0px)) calc(16px + var(--sa-r, 0px)) calc(18px + var(--sa-b, 0px)) calc(16px + var(--sa-l, 0px)); }
.bv-card { width: min(460px, 100%); max-height: 100%; box-sizing: border-box; background: #fff; border: 3px solid var(--bordo-home); border-radius: 28px;
  box-shadow: 0 7px 0 var(--bordo-home); padding: 18px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; overflow: hidden; }
.bv-e { font-size: 4.6rem; line-height: 1; }
.bv-icona { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); display: block; }
.bv-t { margin: 0; font-family: var(--font-titoli); color: var(--ttitolo); font-size: 1.6rem; line-height: 1.1; }
.bv-p { margin: 0; font-size: 1rem; line-height: 1.4; }
.bv-mini { display: flex; gap: 10px; justify-content: center; }
.bv-mini span { background: #fff; border: 3px solid var(--bordo-home); border-radius: 16px; box-shadow: 0 3px 0 var(--bordo-home); padding: 4px 8px; font-size: 1.8rem; }
.bv-sotto { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 4px; }
.bv-sotto .btn { min-width: 200px; }
.bv-punti { display: flex; gap: 8px; }
.bv-punti i { width: 12px; height: 12px; border-radius: 8px; background: var(--tchiaro); border: 2px solid var(--bordo-home); transition: width .3s; }
.bv-punti i.on { width: 28px; background: var(--t2); }
.bv-salta { position: absolute; z-index: 2; top: calc(14px + var(--sa-t, 0px)); right: calc(14px + var(--sa-r, 0px)); font-family: var(--font-titoli); font-size: .95rem;
  background: #fff; color: var(--testo); border: 3px solid var(--bordo-home); border-radius: 20px; padding: 6px 14px; box-shadow: 0 3px 0 var(--bordo-home); min-height: 44px; cursor: pointer; }
@media (max-height: 520px) {   /* telefono in orizzontale: tutto più compatto, niente scorrimento */
  .bv-scheda { padding-top: calc(10px + var(--sa-t, 0px)); padding-bottom: calc(10px + var(--sa-b, 0px)); }
  .bv-card { padding: 10px 14px; gap: 6px; width: min(600px, 100%); }
  .bv-e { font-size: 2.6rem; } .bv-icona { width: 64px; height: 64px; border-radius: 16px; }
  .bv-t { font-size: 1.2rem; } .bv-p { font-size: .85rem; } .bv-mini span { font-size: 1.3rem; padding: 2px 6px; }
  .bv-sotto { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; } .bv-sotto .btn { min-width: 0; }
}
/* bustina "suggerisci" (giochi e prove): la stessa tessera larga con la busta */
.suggerisci { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 560px; box-sizing: border-box; margin: 18px auto 8px;
  padding: 14px 18px; text-decoration: none; color: inherit; font-family: var(--font-titoli); font-weight: 700; font-size: 1.1em; text-align: center; }
.suggerisci-e { font-size: 2.2em; line-height: 1; }
/* ===== Informazioni (la "i"): layout C · Vetrina, finestra quadrata (scelta di Ray) ===== */
.sfida-card.info-quadrata { width: min(440px, calc(100vw - 24px)); aspect-ratio: 1 / 1; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 10px; padding: 14px; box-sizing: border-box; }
.info-vetrina { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: linear-gradient(180deg, var(--tchiaro2), var(--tchiaro)); border: 2px solid var(--tchiaro); border-radius: 20px; padding: 10px; }
.info-vetrina[hidden] { display: none; }
.info-logo { width: clamp(64px, 26%, 110px); height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.info-nome { margin: 0; color: var(--ttitolo); text-shadow: none; }
.info-vetrina .info-versione { display: block !important; font-size: .82rem; font-weight: bold; }
.info-vetrina .cfg-condividi { display: inline; margin: 0; color: inherit; font-size: inherit; }
.info-quadrata .info-installa { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; }
.info-tondi { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; }
.info-tondo { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  color: var(--testo); font-family: var(--font-titoli); font-size: .68rem; text-transform: uppercase; min-width: 0; }
.info-tondo b { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  background: linear-gradient(180deg, #fff, var(--tchiaro)); border: 3px solid var(--bordo-home); box-shadow: 0 3px 0 var(--bordo-home); }
.info-tondo:active b { transform: translateY(2px); box-shadow: 0 1px 0 var(--bordo-home); }
.info-tondo.on b { background: var(--t2); border-color: var(--t2); }
.info-fatto { margin: 0; width: 100%; }
.info-quadrata .info-privacy { margin: 0; font-size: .62rem; line-height: 1.25; text-align: center; opacity: .8; }
@media (max-height: 520px) {   /* telefono in orizzontale: la finestra diventa più larga che alta, la vetrina più bassa */
  .sfida-card.info-quadrata { aspect-ratio: auto; width: min(560px, calc(100vw - 24px)); gap: 6px; padding: 10px; }
  .info-vetrina { flex-direction: row; gap: 12px; padding: 6px 10px; }
  .info-logo { width: 54px; }
  .info-tondo b { width: 42px; height: 42px; font-size: 1.2rem; }
}
.sfida-card.info-quadrata > * { align-self: stretch; width: auto; }
.info-quadrata .info-tondi { width: 100%; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); flex: 0 0 auto; }
.info-quadrata .info-fatto, .info-quadrata .info-privacy { flex: 0 0 auto; }
.info-quadrata .info-vetrina { flex: 1 1 0; }
.info-quadrata .info-installa:not([hidden]) { flex: 1 1 0; display: flex; }
.info-quadrata .info-tondi { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
.info-quadrata .info-vetrina { min-height: 120px; }
.info-tondo b { width: clamp(38px, 11vw, 50px); height: clamp(38px, 11vw, 50px); font-size: clamp(1.05rem, 3.6vw, 1.45rem); }
.info-tondo span { font-size: clamp(.55rem, 2.2vw, .68rem); white-space: nowrap; }
@media (max-height: 520px) {
  .info-quadrata .info-vetrina { flex: 0 0 auto; min-height: 0; }
  .info-quadrata .info-installa:not([hidden]) { flex: 0 1 auto; max-height: 40vh; }
}
@media (max-width: 340px) { .sfida-card.info-quadrata { aspect-ratio: auto; } }
/* 🌍 lingue delle prove (pagina delle prove dei genitori, categoria Lingue) */
.prove-gen .cfg-lingue { width: 100%; max-width: 560px; box-sizing: border-box; }
.prove-gen .cfg-lingue[hidden] { display: none; }
.cfg-lingue-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cfg-lingua { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-family: var(--font-titoli); color: var(--testo); min-height: 84px; }
.cfg-lingua-b { font-size: 2rem; line-height: 1; }
.cfg-lingua-t { font-size: .7rem; }
.cfg-lingua small { font-family: var(--font-testi); font-size: .5rem; line-height: 1.1; opacity: .8; text-align: center; }
@media (max-width: 360px) { .cfg-lingue-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-copyright { margin: 0; font-size: .6rem; text-align: center; opacity: .7; text-transform: none; }
@media (max-width: 380px) { .sfida-card.info-quadrata { gap: 7px; padding: 12px; } .info-quadrata .info-vetrina { min-height: 92px; padding: 6px; } .info-quadrata .info-logo { width: 22%; } }
.bv-passi { margin: 0; padding-left: 1.4em; text-align: left; font-size: .9rem; line-height: 1.35; text-transform: uppercase; }
.bv-passi li { margin: 2px 0; }
.bv-nota { margin: 0; font-size: .75rem; opacity: .8; }
@media (max-height: 520px) { .bv-passi { font-size: .72rem; } .bv-passi li { margin: 0; } .bv-nota { display: none; } }
/* 📲 INSTALLA LA APP nella home (solo se non è installata): pillola piccola sopra la versione, per i grandi, non un gioco */
.home-installa { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); bottom: calc(46px + var(--sa-b)); white-space: nowrap;
  font-family: var(--font-titoli); font-size: .85rem; color: var(--ttitolo); background: #fff; border: 2px solid var(--bordo-home); border-radius: 999px;
  box-shadow: 0 3px 0 var(--bordo-home); padding: 6px 14px; min-height: 36px; cursor: pointer; }
.home-installa:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 var(--bordo-home); }
@media (max-height: 430px) { .home-installa { bottom: calc(40px + var(--sa-b)); font-size: .75rem; padding: 4px 12px; min-height: 30px; } }
@media (max-height: 520px) {   /* telefono in orizzontale: la pillola va in basso a sinistra, sulla riga della versione (se no copre il saluto) */
  .home-installa { left: calc(12px + var(--sa-l)); transform: none; bottom: calc(10px + var(--sa-b)); }
  .home-installa:active { transform: translateY(2px); }
}
/* tutorial di benvenuto: le miniature vere dei giochi e quelle delle prove */
.bv-mini-giochi { flex-wrap: wrap; gap: 6px; }
.bv-mini-giochi span { padding: 0; border: 0; box-shadow: none; background: none; line-height: 0; }
.bv-mini-giochi .icona-gioco, .bv-mini-giochi img { width: 46px; height: 46px; display: block; }
.bv-mini-prove span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; padding: 4px 6px; }
.bv-mini-prove b { font-size: 1.5rem; line-height: 1.1; }
.bv-mini-prove small { font-family: var(--font-titoli); font-size: .55rem; }
@media (max-height: 520px) { .bv-mini-giochi .icona-gioco, .bv-mini-giochi img { width: 34px; height: 34px; } .bv-mini-prove b { font-size: 1.1rem; } .bv-mini-prove span { min-width: 44px; padding: 2px 4px; } }
@media (max-width: 380px) { .bv-mini-giochi { gap: 4px; } .bv-mini-giochi .icona-gioco, .bv-mini-giochi img { width: 40px; height: 40px; } }

/* ===== Prove della 2ª elementare (matematica) ===== */
.cfg-cat-accese[hidden] { display: none; }
.prove-gen .cfg-vuota { text-align: center; padding: 14px; font-size: 1.05em; }
/* decine e unità: barrette da 10 quadretti e cubetti da 1 */
.du-blocchi { display: flex; align-items: flex-end; justify-content: center; gap: 5px; flex-wrap: wrap; }
.du-decina { display: inline-block; width: clamp(12px, 3vmin, 20px); height: clamp(70px, min(24vmin, 17vh), 170px); border: 2px solid #4a2511; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #ff922b 0, #ff922b calc(10% - 2px), #4a2511 calc(10% - 2px), #4a2511 10%); }
.du-decina.mini { width: 8px; height: 30px; vertical-align: middle; }
.du-unita { display: grid; grid-template-columns: repeat(3, auto); gap: 3px; margin-left: 8px; }
.du-unita i, .du-cubo { display: inline-block; width: clamp(12px, 3vmin, 20px); height: clamp(12px, 3vmin, 20px); background: #4dabf7; border: 2px solid #4a2511; border-radius: 3px; vertical-align: middle; }
.du-legenda { display: flex; gap: 18px; justify-content: center; font-weight: 900; font-size: clamp(.95rem, 3vmin, 1.5rem); }
/* maggiore, minore, uguale; pari o dispari */
.sf-segno { font-size: clamp(2.2rem, 9vmin, 3.6rem); line-height: 1; color: var(--ttitolo); }
.sfida-risposte.sf-due { grid-template-columns: repeat(2, 1fr); }
.pd-coppie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
.pd-coppie span { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px; border: 2px dashed #b08968; border-radius: 10px; }
.pd-coppie span.sola { border-color: var(--rosso); }
.pd-coppie i { width: clamp(12px, 3.2vmin, 20px); height: clamp(12px, 3.2vmin, 20px); border-radius: 50%; background: var(--t1); display: block; }
/* numeri a salti */
.sf-salti { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.sf-salti .sf-numero, .sf-salti .sf-casella { min-width: clamp(56px, 11vmin, 110px); height: clamp(56px, 11vmin, 110px); font-size: clamp(1.8rem, 5.5vmin, 3.4rem); }
.sf-salto-aiuto { font-weight: 900; color: var(--ttitolo); font-size: clamp(1rem, 3.4vmin, 1.6rem); }
/* tabelline: i pallini in righe */
.tb-righe { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.tb-righe span { display: flex; gap: 3px; }
.tb-righe i { width: clamp(9px, min(2.4vmin, 2vh), 15px); height: clamp(9px, min(2.4vmin, 2vh), 15px); border-radius: 50%; background: var(--giallo); border: 1px solid #b08968; display: block; }
/* orologio */
.sf-orologio { width: clamp(130px, 38vmin, 340px); height: auto; display: block; filter: drop-shadow(0 4px 0 rgba(74,37,17,.25)); }
.sf-lancette { display: flex; gap: 16px; font-weight: 900; font-size: clamp(.85rem, 2.8vmin, 1.4rem); }
.sf-lancette .corta { color: #e8590c; } .sf-lancette .lunga { color: #1971c2; }
/* euro: monete e banconote disegnate */
.eu-soldi { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 640px; }
.eu-moneta { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 12vmin, 76px); height: clamp(48px, 12vmin, 76px); border-radius: 50%;
  font-weight: 900; font-size: clamp(1rem, 4vmin, 1.5rem); color: #4a2511; border: 3px solid #8d6e2f; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.eu-moneta.eu-1 { background: radial-gradient(circle, #e9ecef 52%, #f2c94c 54%); }
.eu-moneta.eu-2 { background: radial-gradient(circle, #f2c94c 52%, #ced4da 54%); }
.eu-banconota { display: inline-flex; align-items: center; justify-content: center; width: clamp(84px, 22vmin, 140px); height: clamp(44px, 11vmin, 72px); border-radius: 8px;
  font-weight: 900; font-size: clamp(1.1rem, 4.4vmin, 1.7rem); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); border: 3px solid rgba(0,0,0,.25); box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.eu-banconota.eu-5 { background: #868e96; } .eu-banconota.eu-10 { background: #e8590c; } .eu-banconota.eu-20 { background: #1c7ed6; } .eu-banconota.eu-50 { background: #f08c00; }
/* problemi */
.sf-problema { display: flex; align-items: center; gap: 12px; max-width: 760px; padding: 10px 14px; background: #fff; border: 3px solid var(--bordo-home); border-radius: 16px;
  font-family: var(--font-testi); font-weight: 700; font-size: clamp(1rem, 4.2vmin, 1.6rem); line-height: 1.35; text-align: left; color: var(--testo); }
.sf-problema-e { font-size: clamp(2rem, 9vmin, 3.4rem); }
/* simmetria: metà figura, asse tratteggiato, l'altra metà da scegliere */
.sm-figura { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.sm-griglia { display: inline-grid; grid-template-columns: repeat(var(--col), clamp(24px, min(8vmin, 5vh), 56px)); grid-auto-rows: clamp(24px, min(8vmin, 5vh), 56px); border: 2px solid #4a2511; background: #fff; }
.sm-griglia i { border: 1px solid #ced4da; display: block; }
.sm-asse { width: 0; border-left: 4px dashed var(--rosso); margin: -8px 4px; }
.sm-vuota { place-items: center; font-size: 2rem; font-weight: 900; color: var(--ttitolo); background: #fff3bf; border-style: dashed;
  grid-template-columns: calc(var(--col) * clamp(24px, min(8vmin, 5vh), 56px)); grid-auto-rows: calc(4 * clamp(24px, min(8vmin, 5vh), 56px)); }
.sf-risp-figure .sm-griglia { grid-template-columns: repeat(var(--col), clamp(14px, min(5.4vmin, 3.2vh), 38px)); grid-auto-rows: clamp(14px, min(5.4vmin, 3.2vh), 38px); }
.sfida-risposte.sf-due .sfida-risp { font-size: clamp(1.4rem, 6.5vmin, 3rem); }
@media (max-width: 420px) { .sf-salti { gap: 5px; } .sf-salti .sf-numero, .sf-salti .sf-casella { min-width: 50px; height: 54px; padding: 0 4px; font-size: 1.55rem; } }
@media (max-height: 520px) {
  .du-decina { height: 70px; } .du-legenda, .sf-lancette, .sf-salto-aiuto { display: none; }
  .pd-coppie i, .tb-righe i { width: 9px; height: 9px; }
  .sf-orologio { width: 110px; }
  .sf-salti .sf-numero, .sf-salti .sf-casella { min-width: 44px; height: 44px; font-size: 1.4rem; }
  .eu-moneta { width: 40px; height: 40px; font-size: .9rem; } .eu-banconota { width: 70px; height: 36px; font-size: 1rem; }
  .sf-problema { font-size: .95rem; padding: 6px 10px; } .sf-problema-e { font-size: 1.8rem; }
  .sm-griglia { grid-template-columns: repeat(var(--col), 20px); grid-auto-rows: 20px; }
  .sm-vuota { grid-template-columns: calc(var(--col) * 20px); grid-auto-rows: 80px; }
  .sf-risp-figure .sm-griglia { grid-template-columns: repeat(var(--col), 14px); grid-auto-rows: 14px; }
  .tb-righe { display: none; }
}

/* ===== Prove della 2ª elementare: italiano e lingue ===== */
.sfida-risposte.sf-lunghe .sfida-risp { font-size: clamp(1rem, 4.4vmin, 2rem); padding: 8px 4px; line-height: 1.15; }
@media (max-width: 600px) and (min-height: 521px) {   /* telefono in verticale: le risposte lunghe una sotto l'altra, senza andare a capo */
  .sfida-risposte.sf-lunghe { grid-template-columns: 1fr; gap: 8px; max-width: 420px; margin: 0 auto; }
  .sfida-piena .sfida-risposte.sf-lunghe .sfida-risp { min-height: 46px; font-size: clamp(1.1rem, 5.4vmin, 1.6rem); }
}
@media (max-width: 360px) { .io-voci .io-voce { font-size: 1rem; min-height: 46px; padding: 4px 8px; } .io-voci.io-parole .io-voce { min-width: 64px; } .io-casella { min-width: 44px; min-height: 40px; } .io-voci { gap: 6px; } }
.sf-frase { font-family: var(--font-testi); font-weight: 700; font-size: clamp(1.3rem, 6vmin, 2.6rem); letter-spacing: 1px; color: var(--testo); text-align: center; line-height: 1.3; }
.sf-frase b { display: inline-block; min-width: 1.6em; padding: 0 6px; border: 3px dashed var(--bordo-home); border-radius: 10px; background: #fff3bf; color: var(--ttitolo); }
.sf-forma-nome, .sf-domanda-testo { font-weight: 900; color: var(--ttitolo); font-size: clamp(.9rem, 3.6vmin, 1.5rem); text-align: center; }
.sf-alfabeto { font-weight: 900; letter-spacing: 2px; font-size: clamp(.75rem, 2.8vmin, 1.2rem); opacity: .7; text-align: center; }
.sf-parola-lingua { text-transform: none; }
.sf-risposte-frase .sfida-risp small { font-size: clamp(.8rem, 3.2vmin, 1.3rem); text-transform: none; line-height: 1.15; }
/* tocca in ordine: le caselle in alto e le voci sotto */
.io-caselle { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; }
.io-casella { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: clamp(54px, 13vmin, 120px); min-height: clamp(46px, 9vh, 90px); padding: 2px 6px;
  border: 3px dashed var(--bordo-home); border-radius: 12px; background: #fff; }
.io-casella.piena { border-style: solid; background: #fff3bf; }
.io-casella small { font-size: .7rem; font-weight: 900; color: var(--ttitolo); }
.io-casella b { font-size: clamp(1rem, 4.2vmin, 2rem); font-weight: 900; color: var(--testo); }
.io-figure .io-casella b { font-size: clamp(1.6rem, 6vmin, 3rem); }
.io-fine { font-size: 2rem; font-weight: 900; }
.io-voci { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 760px; }
.io-voci .io-voce { flex: 1 1 28%; min-height: 52px; font-size: clamp(1.1rem, 4.6vmin, 2.2rem); padding: 6px 10px; }
.io-voci.io-parole .io-voce { flex: 0 1 auto; min-width: 80px; }
.io-voci.io-figure .io-voce { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff !important; color: var(--testo); text-shadow: none; }
.io-voci.io-figure .io-voce small { font-size: clamp(.7rem, 2.8vmin, 1.05rem); font-weight: 700; }
.io-voce.usata { opacity: .3; }
/* in, on, under: il disegno con la scatola */
.dv-scena { position: relative; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: clamp(1.6rem, min(7vmin, 5vh), 3.2rem); }
.dv-scena .dv-ani { font-size: .8em; }
.dv-under { flex-direction: column-reverse; }
.dv-in .dv-ani { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: .5em; z-index: 1; }
.dv-in { padding-top: .8em; }
/* big o small */
.gp-fig { line-height: 1; display: block; }
.gp-big { font-size: clamp(3rem, min(15vmin, 11vh), 6rem); }
.gp-small { font-size: clamp(1.2rem, min(5vmin, 4vh), 2rem); }
@media (max-height: 520px) {
  .sfida-risposte.sf-lunghe .sfida-risp { font-size: 1rem; }
  .sf-frase { font-size: 1.15rem; } .sf-alfabeto, .sf-forma-nome { display: none; }
  .io-casella { min-height: 38px; min-width: 46px; } .io-casella b { font-size: 1rem; } .io-figure .io-casella b { font-size: 1.3rem; }
  .io-voci .io-voce { min-height: 44px; font-size: 1rem; padding: 2px 8px; } .io-voci.io-figure .io-voce small { font-size: .65rem; }
  .gp-big { font-size: 2.6rem; } .dv-scena { font-size: 1.6rem; }
}
@media (max-width: 360px) and (max-height: 620px) {   /* telefono piccolo (320×568): tutto più stretto */
  .sfida-piena .sfida-card { gap: 4px; padding: 8px 10px; }
  .sfida-piena .sfida-risposte.sf-lunghe .sfida-risp { min-height: 42px; font-size: 1.05rem; padding: 4px; }
  .sf-forma-nome { display: none; } .sf-figura { font-size: 2.2rem; }
  .sf-problema { font-size: .95rem; padding: 6px 8px; } .sf-problema-e { font-size: 1.6rem; }
  .io-casella { min-height: 34px; } .io-casella b { font-size: .95rem; }
}

/* ===== Classe del bambino (sezione genitori) e finestra a più risposte ===== */
.cfg-classe-t { margin-top: 12px; }
.cfg-classe-t small { font-size: .75em; opacity: .7; }
.cfg-classi { gap: 4px; }
.cfg-classe { min-width: 38px; min-height: 48px; padding: 4px 5px; margin: 0; font-weight: 900; font-size: 1.05rem; }
.cfg-classi { flex-wrap: nowrap; }
.sfida-bottoni.sf-scelte { flex-direction: column; align-items: stretch; width: min(100%, 420px); gap: 8px; }
.sfida-bottoni.sf-scelte .btn { width: 100%; }

/* ===== Prove nuove della 1ª e della 3ª elementare ===== */
.sf-gruppo { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: clamp(1rem, min(4.4vmin, 3.4vh), 1.9rem); line-height: 1.1; max-width: 9em; }
.sfida-risposte.sf-gruppi .sfida-risp { padding: 6px 4px; }
.sf-dieci { display: grid; grid-template-columns: repeat(5, clamp(26px, 8vmin, 54px)); gap: 4px; }
.sf-dieci i { aspect-ratio: 1; border: 3px solid var(--bordo-home); border-radius: 8px; background: #fff; }
.sf-dieci i.pieno { background: radial-gradient(circle, var(--t1) 45%, #fff 48%); }
.sf-traguardo { font-weight: 900; font-size: clamp(.8rem, 3vmin, 1.2rem); color: var(--ttitolo); }
.sf-traguardo span { font-size: 1.6em; vertical-align: middle; }
.sfida-risposte.sf-cinque { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sfida-risposte.sf-quattro { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sf-ritmo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: clamp(1.6rem, min(7vmin, 5vh), 3rem); }
.sf-ritmo .sf-casella { font-size: .7em; }
.sf-matita { width: clamp(100px, 30vmin, 220px); height: auto; display: block; }
.dv-fuori { flex-direction: row; align-items: flex-end; gap: .1em; }
.sf-minuscole, .sf-minuscole * { text-transform: none !important; }
.du-cento { display: inline-block; width: clamp(40px, 10vmin, 70px); height: clamp(40px, 10vmin, 70px); border: 2px solid #4a2511; border-radius: 3px;
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), #4a2511 calc(10% - 1px), #4a2511 10%), repeating-linear-gradient(to bottom, #ffd43b 0, #ffd43b calc(10% - 1px), #4a2511 calc(10% - 1px), #4a2511 10%); }
.du-cento.mini { width: 22px; height: 22px; vertical-align: middle; }
.sf-evidenza { background: #fff3bf; color: var(--rosso); }
.sf-colonna { display: grid; grid-template-columns: repeat(var(--cifre), clamp(28px, 8vmin, 54px)); justify-content: center; font-size: clamp(1.6rem, min(7vmin, 5vh), 3rem); font-weight: 900; color: var(--ttitolo); line-height: 1.15; text-align: center; }
.sf-colonna .sf-colonna-riga { grid-column: 1 / -1; height: 4px; background: #4a2511; border-radius: 2px; margin: 2px 0; }
.sf-piatti { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sf-piatti span { padding: 4px 8px; border: 3px solid #b08968; border-radius: 50%; background: #fff; font-size: clamp(.9rem, 3.4vmin, 1.4rem); }
.sf-torta { width: clamp(110px, min(30vmin, 24vh), 220px); height: auto; display: block; }
.sf-fraz { padding: 0 1px; }
.sf-angolo { width: clamp(120px, min(36vmin, 26vh), 240px); height: auto; display: block; }
.sf-parola-media { font-size: clamp(1.4rem, 7vmin, 3rem); }
.sf-testo-lungo { font-size: clamp(.9rem, 3.6vmin, 1.35rem); line-height: 1.4; }
.sfida-risposte.sf-discorso .sfida-risp { font-size: clamp(.85rem, 3.4vmin, 1.4rem); font-family: var(--font-testi); }
.sf-orologi .sf-orologio { width: clamp(60px, min(22vmin, 16vh), 150px); filter: none; }
.eu-moneta.eu-cent { background: radial-gradient(circle, #f4a261 52%, #e76f51 54%); font-size: clamp(.8rem, 3.2vmin, 1.2rem); }
@media (max-height: 520px) {
  .sf-gruppo { font-size: .95rem; } .sf-dieci { grid-template-columns: repeat(5, 24px); gap: 2px; } .sf-dieci i { border-width: 2px; border-radius: 5px; }
  .sf-traguardo { font-size: .75rem; } .sf-ritmo { font-size: 1.4rem; } .sf-matita { width: 90px; }
  .du-cento { width: 30px; height: 30px; } .sf-colonna { font-size: 1.2rem; grid-template-columns: repeat(var(--cifre), 22px); }
  .sf-piatti { display: none; } .sf-torta { width: 90px; } .sf-angolo { width: 100px; } .sf-testo-lungo { font-size: .8rem; line-height: 1.25; }
  .sf-orologi .sf-orologio { width: 56px; }
}
@media (max-width: 400px) { .sfida-risposte.sf-cinque { gap: 3px; } .sfida-risposte.sf-cinque .sfida-risp { padding: 4px 0; } .sfida-risposte.sf-quattro { grid-template-columns: repeat(2, 1fr); } }
.sf-testo-lungo { font-size: clamp(.82rem, min(3.6vmin, 2.7vh), 1.35rem); }
.io-figure .sf-op-fig { font-size: clamp(1.4rem, min(9vmin, 5.5vh), 3.4rem); }
.io-casella { min-height: clamp(40px, 7vh, 90px); }
@media (max-width: 360px) { .du-cento { width: 34px; height: 34px; } .du-decina { height: 64px; } }
.info-link-privacy { display: inline-block; padding: 12px 6px; margin: -12px 0; color: inherit; font-weight: 700; }
@media (max-height: 520px) { .info-link-privacy { padding: 0 4px; margin: 0; } }

/* ===== Pagina di presentazione (solo app dello Store aperta dal browser, js/presentazione.js; proposta A) =====
   Pagina per i grandi: qui si può scorrere in verticale, mai di lato. */
html.pres, html.pres body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: auto; user-select: text; -webkit-user-select: text; }
html.pres body { background: linear-gradient(180deg, #ffe3f1, #fff5fb 420px, #fff5fb); }
.pres-pagina { max-width: none; padding: 0; }
.pres-centro { max-width: 1040px; margin: 0 auto; padding: calc(28px + var(--sa-t)) 16px 0; text-align: center; }
.pres-icona { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 6px 0 rgba(74, 37, 17, .25); }
.pres-titolo { font: 900 clamp(2.6rem, 9vw, 4.6rem)/1 var(--font-titoli); margin: 6px 0 0; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(74, 37, 17, .25); }
.pres-abc { color: #7048e8; } .pres-gioco { color: var(--rosa); }
.pres-frase { max-width: 640px; margin: 14px auto 18px; font-size: 1.05rem; font-weight: 700; line-height: 1.45; }
.pres-play { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; min-height: 56px; border-radius: 16px; background: #1b1b1f; color: #fff; text-decoration: none; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); text-align: left; }
.pres-play b { display: block; font: 900 1.15rem/1.1 var(--font-titoli); } .pres-play small { display: block; font-size: .7rem; opacity: .8; }
.pres-tri { width: 34px; height: 34px; flex: none; }
.pres-punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.pres-tessera { background: #fff; border: 3px solid var(--bordo-home, #4a2511); border-radius: 22px; box-shadow: 0 6px 0 rgba(74, 37, 17, .25); padding: 16px; font-weight: 700; line-height: 1.4; }
.pres-e { font-size: 2.2rem; } .pres-tessera h2 { font: 900 1.1rem var(--font-titoli); color: var(--rosa); margin: 4px 0; }
.pres-foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 20px; }
.pres-tel { margin: 0; border: 6px solid #2b2140; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 8px 0 rgba(74, 37, 17, .2); aspect-ratio: 390 / 844; }
.pres-tel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pres-piede { text-align: center; font-size: .8rem; font-weight: 700; padding: 18px 16px calc(26px + var(--sa-b)); }
.pres-piede a { color: #7048e8; display: inline-block; padding: 8px 2px; }
@media (max-width: 700px) { .pres-punti { grid-template-columns: 1fr; } .pres-foto { grid-template-columns: repeat(2, 1fr); } }

/* ===== Scuola dell'infanzia: oggetti, pallini, tamburo, dado, ombre ===== */
.inf-oggetti, .inf-pallini { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
.inf-oggetti > span { font-size: clamp(1.4rem, min(7vmin, 5vh), 2.8rem); letter-spacing: 2px; }
.sf-risp-figure .inf-oggetti > span, .sf-gruppi .inf-oggetti > span { font-size: clamp(.9rem, min(4.2vmin, 3vh), 1.7rem); letter-spacing: 0; }
.inf-pallini > span { display: flex; gap: 3px; }
.inf-pallini i { display: block; width: clamp(12px, min(3.6vmin, 2.6vh), 22px); aspect-ratio: 1; border-radius: 50%; background: var(--t1, #ff6fae); border: 2px solid #4a2511; }
.inf-quanti .inf-pallini i { width: 14px; }
.inf-tocca { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 520px; }
.inf-ogg { min-width: 48px; min-height: 48px; font-size: clamp(1.6rem, 6vmin, 2.4rem); border: 3px solid var(--bordo-home, #4a2511); border-radius: 14px; background: #fff; cursor: pointer; filter: grayscale(.85) opacity(.55); }
.inf-ogg.acceso { filter: none; background: #fff3bf; transform: scale(1.06); }
.inf-cesto { display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 6px; border-radius: 0 0 40% 40%; background: #f8e6c9; border-top: 6px solid #b08968; }
.inf-dado { width: clamp(90px, min(26vmin, 20vh), 170px); height: auto; display: block; }
.inf-tamburo { font-size: clamp(2.4rem, 10vmin, 4rem); padding: 6px 22px; line-height: 1.1; }
.inf-figura { font-size: clamp(3rem, min(16vmin, 12vh), 6rem); line-height: 1; }
.inf-grande { font-size: clamp(3rem, min(15vmin, 11vh), 5.5rem); }
.inf-ombra { filter: brightness(0) opacity(.78); }
.inf-battiti { display: flex; gap: 8px; min-height: 26px; }
.inf-battiti i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #ffd43b; border: 2px solid #4a2511; }
.inf-batti-tasti { display: flex; gap: 14px; }
.inf-batti, .inf-batti-ok { font-size: clamp(2rem, 8vmin, 3rem); padding: 6px 22px; min-height: 60px; }
.inf-fila { display: flex; gap: 12px; justify-content: center; font-size: clamp(2.4rem, min(11vmin, 8vh), 4.2rem); }
.inf-fila .sf-casella { font-size: .6em; }
.inf-pronto { font-size: 1.3rem; padding: 12px 26px; }
.sfida-risposte[hidden] { display: none; }
.sfida-risposte.sf-colori .sfida-risp { background: #fff !important; display: flex; align-items: center; justify-content: center; }
.sf-colori .sf-pallino, .inf-pallone { display: inline-block; flex: none; width: clamp(44px, min(14vmin, 10vh), 80px); height: clamp(44px, min(14vmin, 10vh), 80px); border-radius: 50%; border: 4px solid #4a2511; }
.inf-pallone { width: clamp(80px, min(24vmin, 16vh), 140px); height: clamp(80px, min(24vmin, 16vh), 140px); }
.inf-g1 { font-size: clamp(1rem, 4vmin, 1.6rem); } .inf-g2 { font-size: clamp(1.8rem, 7vmin, 2.8rem); } .inf-g3 { font-size: clamp(2.8rem, min(11vmin, 8vh), 4.4rem); }
.inf-modello .sf-forma { width: clamp(70px, min(22vmin, 16vh), 130px); }
@media (max-height: 520px) {
  .inf-oggetti > span { font-size: 1.3rem; } .inf-ogg { min-width: 44px; min-height: 44px; font-size: 1.4rem; } .inf-dado { width: 70px; }
  .inf-figura, .inf-grande { font-size: 2.6rem; } .inf-fila { font-size: 2rem; } .inf-batti, .inf-batti-ok { min-height: 46px; font-size: 1.6rem; } .inf-tamburo { font-size: 2rem; }
  .inf-cesto { min-height: 50px; } .inf-pallone { width: 64px; height: 64px; } .inf-modello .sf-forma { width: 56px; }
}
@media (max-height: 520px) { .inf-quanti { display: none; } .inf-tocca { gap: 4px; max-width: 640px; } }