/* Giro 2 · Bolle (alla Lingokids): cielo viola a sfumatura, bolle che galleggiano, carte bianche molto tonde,
   tessere a sfumatura come icone d'app con il riflesso lucido. */
:root {
  --sfondo: #5A2FD6; --superficie: #FFFFFF; --superficie-2: #F3EEFF; --testo: #24154A; --testo-2: #5A4E7A;
  --primario: #6A3DE8; --primario-testo: #FFFFFF; --accento: #FFD84A; --bordo: #E5DCFF;
  --cielo-1: #4E25C9; --cielo-2: #7B4DFF; --su-cielo: #FFFFFF;
  --c1: #E8432F; --c2: #1E7FD6; --c3: #1E8E4A; --c4: #B8500A; --c5: #0F8C80; --c6: #6A3DE8; --c7: #C2337C;
  --raggio: 32px; --ombra: 0 16px 40px rgba(26, 11, 64, .25);
  --font-titoli: 'Baloo 2', 'Nunito', sans-serif; --font-testo: 'Nunito', 'Atkinson Hyperlegible', sans-serif;
  --ic1: #FFFFFF; --ic2: rgba(255, 255, 255, .72); --ic3: #FFFFFF;
}
html[data-carattere="chiaro"] { --font-testo: 'Atkinson Hyperlegible', sans-serif; }
html[data-colori="calmi"] { --cielo-1: #6E5E9C; --cielo-2: #8D7FB8; }
html[data-colori="contrasto"] { --cielo-1: #000000; --cielo-2: #000000; }
html[data-colori="scuro"] { --cielo-1: #150B33; --cielo-2: #2A1766; --superficie: #1F1740; --superficie-2: #2C2257; --testo: #F2F3F7; --testo-2: #C9C2E6; }
body { background: var(--cielo-1); font-weight: 700; }
.cielo { min-height: 100dvh; background: radial-gradient(1200px 600px at 80% -10%, var(--cielo-2), transparent 60%), linear-gradient(180deg, var(--cielo-1), color-mix(in srgb, var(--cielo-1) 70%, var(--cielo-2))); position: relative; overflow: hidden; }
.bolle i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06) 60%); pointer-events: none; animation: galleggia calc(9s / max(var(--mov), .01)) ease-in-out 1 alternate; }
.bolle i:nth-child(1) { width: 140px; height: 140px; left: 4%; top: 120px; } .bolle i:nth-child(2) { width: 60px; height: 60px; left: 30%; top: 60px; } .bolle i:nth-child(3) { width: 220px; height: 220px; right: -60px; top: 380px; }
.bolle i:nth-child(4) { width: 90px; height: 90px; left: 8%; top: 900px; } .bolle i:nth-child(5) { width: 50px; height: 50px; right: 20%; top: 140px; } .bolle i:nth-child(6) { width: 120px; height: 120px; right: 10%; top: 1400px; }
@keyframes galleggia { to { transform: translateY(-30px); } }
html[data-colori="contrasto"] .bolle { display: none; }
h1, h2 { font-family: var(--font-titoli); font-weight: 800; line-height: 1.05; }
.largo { width: min(1200px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; } .stretto { width: min(860px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
.contenuto { padding-bottom: 48px; }

/* tessere a sfumatura (come icone d'app) */
.tessera { --g1: #FFB347; --g2: #FF6B3D; position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 30%; background: linear-gradient(145deg, var(--g1), var(--g2)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), 0 8px 18px rgba(26, 11, 64, .25); flex: none; overflow: hidden; }
.tessera::after { content: ''; position: absolute; left: 10%; top: 6%; width: 60%; height: 34%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.tessera .ic { width: 62%; height: 62%; position: relative; z-index: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); }
.tessera.grande { width: 104px; height: 104px; } .tessera.mini { width: 38px; height: 38px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.t-arancio { --g1: #FFC45C; --g2: #FF6B3D; } .t-azzurro { --g1: #6EE7FF; --g2: #2E8CFF; } .t-verde { --g1: #8CF29A; --g2: #1FB86A; } .t-rosa { --g1: #FFA3D6; --g2: #FF4F9A; }
.t-giallo { --g1: #FFE873; --g2: #FFB21F; } .t-blu { --g1: #A08CFF; --g2: #5A3DF0; } .t-lime { --g1: #E3FF7A; --g2: #6CCB2E; } .t-grigio { --g1: #D6D2E3; --g2: #A8A2BD; }
html[data-colori="contrasto"] .tessera { background: #000; box-shadow: none; } html[data-colori="contrasto"] .tessera::after { display: none; }

/* tasti */
.tasto { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.4em; border: 0; border-radius: 999px; font-family: var(--font-titoli); font-weight: 800; font-size: 1.1rem; text-decoration: none; cursor: pointer; transition: transform calc(.12s * var(--mov)); }
.tasto:hover { transform: translateY(-2px); } .tasto:active { transform: translateY(2px) scale(.98); }
.tasto .ic { width: 1.4em; height: 1.4em; } .tasto.grande { font-size: 1.3rem; padding: .85em 1.8em; } .tasto.piccolo { font-size: .95rem; padding: .55em 1.1em; }
.tasto-giallo { background: linear-gradient(180deg, #FFE36B, #FFC21A); color: #3A2600; box-shadow: inset 0 -5px 0 #E59F00, 0 10px 22px rgba(255, 194, 26, .35); }
.tasto-viola { background: linear-gradient(180deg, #8D66FF, #6A3DE8); color: #FFF; box-shadow: inset 0 -5px 0 #4C25C4, 0 8px 18px rgba(106, 61, 232, .35); }
.tasto-bianco, .tasto-chiaro { background: #FFFFFF; color: var(--testo); box-shadow: inset 0 -4px 0 #E2D9FF; } .tasto-chiaro { background: var(--superficie-2); color: #24154A; }
.tasto-vetro { background: rgba(255, 255, 255, .16); color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.tasto-bianco .ic, .tasto-chiaro .ic { --ic1: #6A3DE8; --ic2: #4C25C4; --ic3: #FFC21A; color: #6A3DE8; } .tasto-vetro .ic { --ic1: #FFF; --ic2: rgba(255, 255, 255, .7); color: #FFF; }
html[data-colori="contrasto"] .tasto-vetro { background: #000; box-shadow: inset 0 0 0 3px #FFF; }
.btn { border: 0; border-radius: 999px; background: var(--superficie-2); color: #24154A; box-shadow: inset 0 -4px 0 #E2D9FF; font-family: var(--font-titoli); font-weight: 800; }
.btn-primario { background: linear-gradient(180deg, #8D66FF, #6A3DE8); color: #FFF; box-shadow: inset 0 -5px 0 #4C25C4; }
.btn .ic { --ic1: #6A3DE8; --ic2: #4C25C4; --ic3: #FFC21A; }

/* testata trasparente sul viola */
.testata { position: relative; z-index: 30; } .testata-in { width: min(1200px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.logo { display: flex; align-items: center; gap: 8px; color: #FFFFFF; text-decoration: none; font-family: var(--font-titoli); font-weight: 800; font-size: 1.9rem; } .logo-blob { width: 52px; height: 54px; }
.menu { margin-left: auto; } .menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.voce { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; color: #FFFFFF; text-decoration: none; font-family: var(--font-titoli); font-weight: 800; font-size: 1.05rem; }
.voce:hover, .voce[aria-current="page"] { background: rgba(255, 255, 255, .16); } .voce[aria-current="page"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.menu-apri { display: none; }
@media (max-width: 1180px) {
  .menu-apri { display: inline-flex; } .testata .modo-apri { margin-left: auto; }
  .menu { position: absolute; left: 16px; right: 16px; top: 100%; background: #FFFFFF; border-radius: 28px; padding: 12px; display: none; box-shadow: var(--ombra); }
  .menu.aperto { display: block; } .menu ul { flex-direction: column; } .voce { color: #24154A; font-size: 1.25rem; padding: 8px; }
}
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .menu-apri { display: inline-flex; }
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .testata .modo-apri { margin-left: auto; }
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .menu { position: absolute; left: 16px; right: 16px; top: 100%; background: #FFF; border-radius: 28px; padding: 12px; display: none; }
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .menu.aperto { display: block; }
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .menu ul { flex-direction: column; }
html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .voce { color: #24154A; }
html[data-colori="scuro"] .menu.aperto { background: var(--superficie); } html[data-colori="scuro"] .menu.aperto .voce { color: var(--testo); }
@media (max-width: 560px) { .logo span { font-size: 1.4rem; } .logo-blob { width: 40px; height: 42px; } .testata .tasto { font-size: .95rem; padding: .55em .9em; } }

/* home */
.eroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 30px 0 60px; }
.orbita { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.blob-eroe { position: absolute; left: 25%; top: 22%; width: 50%; height: auto; animation: rimbalza calc(1.6s / max(var(--mov), .01)) cubic-bezier(.3, 1.5, .5, 1) 2; filter: drop-shadow(0 20px 30px rgba(26, 11, 64, .35)); }
@keyframes rimbalza { 30% { transform: translateY(-16px) scale(1.02, .98); } }
.orb { position: absolute; width: 19%; height: 19%; } .orb .ic { width: 60%; height: 60%; }
.o0 { left: 41%; top: 0; transform: rotate(-6deg); } .o1 { right: 4%; top: 13%; transform: rotate(8deg); } .o2 { right: 0; top: 50%; } .o3 { right: 12%; bottom: 4%; transform: rotate(-8deg); } .o4 { left: 18%; bottom: 0; transform: rotate(6deg); } .o5 { left: 0; top: 52%; transform: rotate(-4deg); } .o6 { left: 6%; top: 14%; transform: rotate(10deg); }
.eroe-testo { color: var(--su-cielo); } .eroe-testo h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); color: #FFFFFF; margin-bottom: .3em; } .eroe-testo p { font-size: 1.25rem; color: #FFFFFF; max-width: 40ch; }
.eroe-bottoni { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
@media (max-width: 860px) { .eroe { grid-template-columns: minmax(0, 1fr); padding-top: 0; } .orbita { max-width: 320px; } }
.app-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.app { display: grid; justify-items: center; gap: 8px; padding: 28px 16px 24px; background: #FFFFFF; border-radius: 32px; text-decoration: none; text-align: center; box-shadow: var(--ombra); transition: transform calc(.15s * var(--mov)); }
.app:hover { transform: translateY(-6px); } .app-nome { font-family: var(--font-titoli); font-weight: 800; font-size: 1.7rem; color: #24154A; } .app-frase { color: #5A4E7A; }
html[data-colori="scuro"] .app { background: var(--superficie); } html[data-colori="scuro"] .app-nome { color: var(--testo); } html[data-colori="scuro"] .app-frase { color: var(--testo-2); }
@media (max-width: 900px) { .app-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pannello-bianco { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 48px; background: var(--superficie); border-radius: 40px; padding: 36px 40px; box-shadow: var(--ombra); }
.pb-testo h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--testo); } .pb-testo p { color: var(--testo-2); font-size: 1.15rem; } .pb-adulti a { color: #5A2FD6; font-weight: 800; }
html[data-colori="scuro"] .pb-adulti a { color: #C9B8FF; }
.pb-blob .blob { width: min(240px, 80%); display: block; margin: 0 auto; }
@media (max-width: 760px) { .pannello-bianco { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

/* titoli sul viola */
.tp { display: flex; align-items: center; gap: 22px; color: #FFFFFF; margin: 16px 0 30px; } .tp h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 0 0 .1em; color: #FFFFFF; } .tp p { color: #FFFFFF; font-size: 1.2rem; margin: 0 0 .6em; opacity: .95; }
@media (max-width: 560px) { .tp { align-items: flex-start; } .tp .tessera.grande { width: 72px; height: 72px; } }
.briciole { color: #FFFFFF; font-weight: 800; } .briciole a { color: #FFFFFF; display: inline-flex; min-height: 48px; align-items: center; }
.mondi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.mondi li:nth-child(even) { transform: none; }
.mondo { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 18px; background: var(--superficie); border-radius: 36px; text-decoration: none; box-shadow: var(--ombra); height: 100%; transition: transform calc(.15s * var(--mov)); }
.mondo:hover { transform: translateY(-6px) scale(1.02); } .mondo-nome { font-family: var(--font-titoli); font-weight: 800; font-size: 1.6rem; color: var(--testo); } .mondo-frase { color: var(--testo-2); } .mondo-n { font-weight: 800; color: #5A2FD6; }
html[data-colori="scuro"] .mondo-n { color: #C9B8FF; } html[data-colori="contrasto"] .mondo-n { color: #000; }
@media (max-width: 600px) { .mondi li:nth-child(even) { transform: none; } }
.giochi { list-style: none; padding: 0; display: grid; gap: 16px; }
.gioco { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--superficie); border-radius: 30px; padding: 18px 22px; box-shadow: var(--ombra); }
.g-t { flex: 1; min-width: 200px; } .g-t h2 { font-size: 1.5rem; margin: 0; color: var(--testo); } .g-t p { margin: 0; color: var(--testo-2); }
.g-liv { display: flex; gap: 10px; flex-wrap: wrap; } .presto-t { margin: 0; font-weight: 800; color: var(--testo-2); }

/* il gioco: carta bianca sul viola */
.schermo { min-height: 100dvh; }
.barra { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: min(1000px, 100% - 32px); margin: 0 auto; padding: 16px 0; }
.g-progresso, .t-progresso { display: flex; gap: 8px; } .g-progresso .pallino, .t-progresso .pallino { width: 34px; height: 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .25); } .pallino.fatto { background: #FFD84A !important; } .pallino.ora { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5) !important; }
.campo { position: relative; z-index: 1; width: min(960px, 100% - 32px); margin: 0 auto; padding-bottom: 60px; }
.carta { background: var(--superficie); border-radius: 40px; padding: 26px; box-shadow: var(--ombra); color: var(--testo); }
.g-area > .carta { display: grid; justify-items: center; gap: 12px; text-align: center; }
.g-titolo, .t-titolo { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: #5A2FD6; margin: 0; } html[data-colori="scuro"] .g-titolo, html[data-colori="scuro"] .t-titolo { color: #C9B8FF; } html[data-colori="contrasto"] .g-titolo { color: #000; }
.g-prima { display: flex; gap: 10px; margin: 0; font-size: .95rem; color: var(--testo-2); }
.istr { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; } .istr .ascolta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .istr .ascolta { padding: .6em; border-radius: 50%; }
.g-istruzione { font-family: var(--font-titoli); font-weight: 800; font-size: 1.8rem; margin: 0; }
.g-domanda { min-height: 160px; display: grid; place-items: center; } .g-tempo { width: 100%; }
.g-risposte { gap: 18px; margin-top: 24px; }
.risposta { border: 0; border-radius: 32px; background: var(--superficie); box-shadow: 0 12px 28px rgba(26, 11, 64, .28), inset 0 -6px 0 #E2D9FF; color: var(--testo); font-family: var(--font-titoli); transition: transform calc(.15s * var(--mov)); }
.risposta:hover { transform: translateY(-4px) scale(1.02); } .risposta:active { transform: scale(.97); }
.risposta.giusta { background: linear-gradient(180deg, #8CF29A, #1FB86A); color: #06331B; box-shadow: 0 12px 28px rgba(31, 184, 106, .45), inset 0 -6px 0 #13965A; animation: pop calc(.45s * var(--mov)) cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.08); } }
.risposta.provata { opacity: .4; } .risposta.punto { border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); } .risposta.punto.giusta { background: #1FB86A; }
.esito { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; background: rgba(255, 255, 255, .14); border-radius: 30px; padding: 14px 18px; min-height: 84px; }
.g-esito { margin: 0; font-family: var(--font-titoli); font-weight: 800; font-size: 1.5rem; color: #FFFFFF; flex: 1; } .g-esito.giusto { color: #FFFFFF; }
.blob-esito { width: 70px; height: auto; flex: none; transform: scale(0); transition: transform calc(.4s * var(--mov)) cubic-bezier(.3, 1.6, .5, 1); } .blob-esito.su { transform: scale(1); }
html[data-movimento="niente"] .blob-esito { transform: none; opacity: 0; } html[data-movimento="niente"] .blob-esito.su { opacity: 1; }
.pie { display: flex; gap: 12px; margin-left: auto; } .liv { display: flex; justify-content: center; margin-top: 18px; }
.g-livelli { display: flex; gap: 6px; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 4px; } .g-livello { border: 0; border-radius: 999px; background: transparent; color: #FFF; padding: 6px 14px; font-weight: 800; cursor: pointer; } .g-livello[aria-pressed="true"] { background: #FFFFFF; color: #24154A; }
.g-fine, .t-fine { background: var(--superficie); border-radius: 40px; padding: 40px 20px; text-align: center; box-shadow: var(--ombra); color: var(--testo); } .g-fine h2, .t-fine h2 { font-size: 2.8rem; } .fine-bottoni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 600px) { .barra .tasto span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .barra .modo-apri span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .g-progresso .pallino { width: 20px; } .g-istruzione { font-size: 1.3rem; } .d-lettera { font-size: 5rem; } .pie { width: 100%; } .pie .tasto { flex: 1; } }

/* tastiera */
.lezioni { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lezione { display: flex; align-items: center; gap: 16px; background: var(--superficie); border-radius: 30px; padding: 14px 18px; text-decoration: none; box-shadow: var(--ombra); height: 100%; }
.lez-n { --g1: #FFC45C; --g2: #FF6B3D; width: 60px; height: 60px; flex: none; border-radius: 30%; display: grid; place-items: center; background: linear-gradient(145deg, var(--g1), var(--g2)); color: #FFF; font-family: var(--font-titoli); font-weight: 800; font-size: 1.8rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.lez-n .ic { width: 36px; height: 36px; } .lez-t { display: grid; color: var(--testo); } .lez-t b { font-family: var(--font-titoli); font-size: 1.25rem; } .lez-t span { color: var(--testo-2); font-size: 1rem; }
.campo-t .carta { display: grid; justify-items: center; gap: 8px; text-align: center; } .t-frase { margin: 0; font-weight: 800; } .t-dito { margin: 0; font-weight: 800; color: #5A2FD6; } html[data-colori="scuro"] .t-dito { color: #C9B8FF; }
.t-esito { text-align: center; color: #FFFFFF; font-family: var(--font-titoli); font-size: 1.4rem; min-height: 1.6em; margin: 16px 0; }
.kb-carta { padding: 18px; } .kb-tasto { border: 0; border-radius: 14px; background: var(--superficie-2); box-shadow: inset 0 -6px 0 var(--dito); color: #24154A; } .kb-giusto { background: #6A3DE8; color: #FFF; }
.t-sotto { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: #FFFFFF; font-weight: 800; }

/* colora */
.galleria { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.quadro { display: grid; gap: 6px; background: #FFFFFF; border-radius: 32px; padding: 14px; text-decoration: none; text-align: center; font-family: var(--font-titoli); font-weight: 800; font-size: 1.15rem; color: #24154A; box-shadow: var(--ombra); transition: transform calc(.15s * var(--mov)); } .quadro:hover { transform: translateY(-6px) rotate(-1deg); }
.disegno.mini { width: 100%; height: auto; display: block; } .disegno.mini .zona { fill: #FFFFFF; stroke-width: 7; }
.campo-c { position: relative; z-index: 1; width: min(1200px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding-bottom: 40px; align-items: start; }
.attrezzi { display: grid; gap: 12px; } .c-esito { text-align: center; font-weight: 800; margin: 10px 0 0; }
.c-tavolozza { grid-template-columns: repeat(4, minmax(0, 1fr)); } .c-strumenti, .c-grandezze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .c-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-strumenti .btn, .c-grandezze .btn, .c-azioni .btn { font-size: .9rem; padding: .55em .3em; }
[data-strumento][aria-pressed="true"], [data-grandezza][aria-pressed="true"] { background: #6A3DE8; color: #FFF; box-shadow: inset 0 -4px 0 #4C25C4; }
@media (max-width: 900px) { .campo-c { grid-template-columns: 1fr; } }

/* stampa */
.fam-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fam { background: var(--superficie); border-radius: 32px; padding: 22px; box-shadow: var(--ombra); color: var(--testo); } .fam h2 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin: 0 0 6px; } .fam > p { color: var(--testo-2); }
.fam ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .riga-s { display: grid; padding: 12px 16px; border-radius: 20px; background: var(--superficie-2); text-decoration: none; color: var(--testo); } .riga-s small { color: var(--testo-2); font-weight: 700; }
@media (max-width: 860px) { .fam-griglia { grid-template-columns: 1fr; } }
.s-titolo { font-size: clamp(2.2rem, 5vw, 3.2rem); color: #FFFFFF; }
.scheda-due { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; } .anteprima-c { padding: 0; overflow: hidden; background: var(--superficie-2); }
.s-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .s-esito { flex-basis: 100%; margin: 0; font-weight: 800; } .s-nota { font-size: .95rem; color: var(--testo-2); }
@media (max-width: 1100px) { .scheda-due { grid-template-columns: 1fr; } }
.modo-scelta span { border: 0; background: var(--superficie-2); box-shadow: inset 0 -3px 0 #E2D9FF; color: #24154A; } .modo-scelta input:checked + span { background: #6A3DE8; color: #FFF; box-shadow: inset 0 -3px 0 #4C25C4; }
html[data-colori="contrasto"] .modo-scelta span { border: 2px solid #000; }

.pagina-testo h2 { font-size: 1.6rem; margin-top: 1.3em; color: #5A2FD6; } html[data-colori="scuro"] .pagina-testo h2 { color: #C9B8FF; } html[data-colori="contrasto"] .pagina-testo h2 { color: #000; }
.pagina-testo a { color: #5A2FD6; font-weight: 800; } html[data-colori="scuro"] .pagina-testo a { color: #C9B8FF; } .pagina-testo li { margin-bottom: .5em; } .pagina-testo .intro { font-size: 1.2rem; }
.per-bambini { background: var(--superficie-2); border-radius: 24px; padding: 12px 20px; }
.vuoto { text-align: center; padding: 40px 0; color: #FFF; } .vuoto h1 { color: #FFF; } .blob-404 { width: 200px; }
[data-pannello-intero] .modo-corpo { padding: 4px 0 0; }
.chi-ce-dietro { display: flex; gap: 22px; align-items: center; background: var(--superficie); border-radius: 40px; padding: 28px; margin-top: 56px; box-shadow: var(--ombra); color: var(--testo); }
.ccd-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 6px #FFD84A, 0 0 0 12px #B49BFF; }
.ccd-testo h2 { font-size: 1.7rem; } .ccd-testo p { color: var(--testo-2); } .ccd-bottoni { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .chi-ce-dietro { flex-direction: column; text-align: center; } .ccd-bottoni { justify-content: center; } }
.piede { position: relative; z-index: 1; color: #FFFFFF; } .piede-in { width: min(1200px, 100% - 32px); margin: 0 auto; padding: 30px 0 48px; border-top: 2px solid rgba(255, 255, 255, .2); } .piede-in > * { max-width: none; }
.piede-link { display: flex; flex-wrap: wrap; gap: 4px 22px; } .piede-link a { color: #FFF; font-weight: 800; padding: 10px 0; display: inline-flex; } .piede a { color: #FFE27A; } .piede-firma, .piede-fratelli { margin: 8px 0 0; }
.modo-dialogo { border: 0; border-radius: 36px; box-shadow: 0 30px 60px rgba(26, 11, 64, .45); } .modo-chiudi { border: 0; background: var(--superficie-2); }
.tessera .ic { --ic1: #FFFFFF; --ic2: rgba(0, 0, 0, .2); --ic3: rgba(255, 255, 255, .78); } .tessera .ic .w { fill: var(--g2); } .tessera .ic .lettera { stroke: var(--g2); }

/* ——— prototipo unito (21/10): più calmo, icone leggibili, la torre ——— */
/* il viola resta in alto; sotto il fondo è chiaro e calmo */
body { background: #F5F2FF; }
.cielo { background: linear-gradient(180deg, var(--cielo-1) 0, var(--cielo-2) 560px, #F5F2FF 561px); }
.schermo .cielo, body.schermo .cielo { background: linear-gradient(180deg, var(--cielo-1) 0, var(--cielo-2) 300px, #F5F2FF 301px); }
html[data-colori="scuro"] body, html[data-colori="scuro"] .cielo { background: #120A2B; }
html[data-colori="contrasto"] body, html[data-colori="contrasto"] .cielo { background: #FFFFFF; }
.bolle i { animation: none; opacity: .7; } .bolle i:nth-child(n+4) { display: none; }
.app, .mondo, .gioco, .lezione, .quadro, .fam, .carta, .chi-ce-dietro, .pannello-bianco { box-shadow: 0 8px 24px rgba(36, 21, 74, .10); }
/* sotto la fascia viola i testi tornano scuri */
.tp, .tp h1, .tp p, .briciole, .briciole a, .s-titolo, .t-esito, .t-sotto, .vuoto, .vuoto h1 { color: var(--testo); }
.tp .tasto-vetro, .t-sotto { color: var(--testo); } .tp .tasto-vetro { background: #FFFFFF; box-shadow: inset 0 -4px 0 #E2D9FF; } .tp .tasto-vetro .ic { --ic1: #6A3DE8; color: #6A3DE8; }
.contenuto > .largo:first-child > .tp, .contenuto > .stretto > .tp { color: #FFFFFF; } .contenuto > .largo:first-child > .tp :is(h1, p) , .contenuto > .stretto > .tp :is(h1, p) { color: #FFFFFF; }
.contenuto > .largo:first-child > .briciole, .contenuto > .largo:first-child > .briciole a { color: #FFFFFF; }
.esito { background: #FFFFFF; box-shadow: 0 8px 24px rgba(36, 21, 74, .10); } .g-esito, .g-esito.giusto { color: var(--testo); }
body[data-stato="giusto"] .esito { background: #DDF7E6; } body[data-stato="riprova"] .esito, body[data-stato="aiuto"] .esito { background: #FFF6D6; }
html[data-colori="scuro"] .esito { background: var(--superficie); } html[data-colori="contrasto"] .esito { background: #FFF; border: 3px solid #000; }
.esito .tasto-vetro, .liv .g-livelli { color: var(--testo); } .esito .tasto-vetro { background: var(--superficie-2); box-shadow: inset 0 -4px 0 #E2D9FF; } .esito .tasto-vetro .ic { --ic1: #6A3DE8; color: #6A3DE8; }
.liv .g-livelli { background: #FFFFFF; } .g-livello { color: #24154A; } .g-livello[aria-pressed="true"] { background: #6A3DE8; color: #FFFFFF; }
/* le icone dentro le tessere: il disegno chiaro sul colore, i dettagli col colore della tessera */
.tessera .ic [stroke="#fff"] { stroke: var(--g2); } .tessera .ic [fill="#fff"] { fill: var(--g2); }
/* scuro: i tasti bianchi restano bianchi con testo scuro */
.tasto-bianco, .tasto-chiaro { color: #24154A; } html[data-colori="scuro"] .btn, html[data-colori="scuro"] .kb-tasto { color: var(--testo); }
/* la tastiera prende tutta la larghezza */
.t-area { width: 100%; } .kb-carta .t-tastiera { width: 100%; }
/* la torre accanto al gioco */
.con-torre { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start; width: min(1100px, 100% - 32px); }
.con-torre > .g-fine { grid-column: 2; }
.torre { position: sticky; top: 16px; display: grid; justify-items: center; gap: 8px; background: #FFFFFF; border-radius: 32px; padding: 16px 12px 18px; box-shadow: 0 8px 24px rgba(36, 21, 74, .12); }
html[data-colori="scuro"] .torre { background: var(--superficie); }
.torre-t { font-family: var(--font-titoli); font-weight: 800; color: var(--testo); }
.torre-pila { display: flex; flex-direction: column; width: 112px; }
.torre-slot { display: block; margin-top: -22px; opacity: .13; filter: grayscale(1); } .torre-slot:last-child { margin-top: 0; }
.torre-slot .mattone { width: 100%; height: auto; display: block; }
.torre-slot.pieno { opacity: 1; filter: none; animation: cade calc(.55s * var(--mov)) cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cade { from { transform: translateY(-120px); opacity: 0; } }
.barra .g-progresso { display: none; }
@media (max-width: 760px) {
  .con-torre { grid-template-columns: 1fr; gap: 14px; } .con-torre > .g-fine { grid-column: auto; }
  .torre { position: static; grid-auto-flow: column; justify-content: center; align-items: center; padding: 8px 14px; border-radius: 999px; } .torre-pila { flex-direction: row-reverse; width: auto; gap: 2px; } .torre-slot { width: 44px; margin: 0; }
  .barra .g-progresso { display: none; }
}
.piede { background: linear-gradient(180deg, var(--cielo-2), var(--cielo-1)); margin-top: 40px; } .piede-in { border-top: 0; } html[data-colori="contrasto"] .piede { background: #000; }
html[data-colori="scuro"] .tp .tasto-vetro, html[data-colori="scuro"] .esito .tasto-vetro { color: #24154A; } html[data-colori="scuro"] :is(.tp, .briciole, .briciole a, .s-titolo, .t-esito, .t-sotto, .vuoto) { color: var(--testo); }
html[data-colori="scuro"] .tasto-chiaro, html[data-colori="scuro"] .esito .tasto-vetro { background: #FFFFFF; color: #24154A; }
html[data-colori="scuro"] .modo-scelta span { color: var(--testo); }

/* ——— sito vero (21/10): icone colorate sulle carte bianche, giochi nuovi ——— */
:root { --ic1: #6A3DE8; --ic2: #4C25C4; --ic3: #FFC21A; }
.testata .voce .tessera .ic, .tessera .ic { --ic1: #FFFFFF; --ic2: rgba(0, 0, 0, .2); --ic3: rgba(255, 255, 255, .78); }
.d-stella .ic { --ic1: #FFC21A; --ic2: #E0A800; }
.d-ascolta .ic { --ic1: #6A3DE8; color: #6A3DE8; } .d-ascolta { color: var(--testo); }
.r-puntini-g { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 150px; } .r-puntini-g i { width: 22px; height: 22px; border-radius: 50%; background: #FF8A3D; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.r-gruppo { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 170px; } .rg-el { width: 34px; display: block; }
.r-numero.piccolo { font-size: 2.2rem; } .d-pezzo.grande { min-width: 140px; height: 140px; } .d-pezzo.grande .og { width: 110px; }
.d-parola.piccola { font-size: 1.6rem; max-width: 22ch; text-align: center; }
.d-ombra .og { filter: brightness(0); opacity: .82; } html[data-colori="scuro"] .d-ombra .og { filter: brightness(0) invert(1); }
.d-op { font-size: 2.4rem; font-weight: 800; }
/* memory */
.g-risposte.memory { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .g-risposte.memory { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.carta-m { min-height: 110px; position: relative; } .carta-m .cm-fronte { display: none; width: 76px; } .carta-m .cm-dietro { font-family: var(--font-titoli); font-size: 2.6rem; color: #FFFFFF; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 30%; background: linear-gradient(145deg, #A08CFF, #5A3DF0); }
.carta-m.aperta .cm-fronte, .carta-m.trovata .cm-fronte { display: block; } .carta-m.aperta .cm-dietro, .carta-m.trovata .cm-dietro { display: none; }
.carta-m.vista .cm-dietro { background: linear-gradient(145deg, #CFC4FF, #9E8BF5); }
.carta-m.trovata { background: #DDF7E6; opacity: 1 !important; }
.carta-m.vista .cm-fronte { display: block; position: absolute; right: 8px; bottom: 8px; width: 40px; opacity: .35; }
@media (max-width: 760px) { .torre-t { display: none; } }

/* ——— telefono (21/10, segnalato da Simone): la fascia viola segue il contenuto, non un'altezza fissa ——— */
.cielo, .schermo .cielo, body.schermo .cielo { background: #F5F2FF; }
.testata { background: var(--cielo-1); }
.eroe, .tp, .barra { position: relative; isolation: isolate; }
.eroe::before, .tp::before, .barra::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -30px; bottom: -40px; background: linear-gradient(180deg, var(--cielo-1), var(--cielo-2)); }
.tp::before { top: -60px; bottom: -28px; } .barra::before { top: -20px; bottom: -150px; }
.contenuto > .largo:first-child > .briciole { position: relative; isolation: isolate; } .contenuto > .largo:first-child > .briciole::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -20px; bottom: 0; background: var(--cielo-1); }
html[data-colori="scuro"] .cielo { background: #120A2B; } html[data-colori="contrasto"] .cielo { background: #FFFFFF; }
html[data-colori="contrasto"] .testata, html[data-colori="contrasto"] :is(.eroe, .tp, .barra)::before { background: #000; }
.tp { margin-bottom: 44px; }
.corpo-sagoma { width: min(240px, 58vw); }
@media (max-width: 560px) { .barra .c-titolo { font-size: 1.15rem; } .eroe-testo h1 { font-size: 2.2rem; } .eroe { padding-bottom: 30px; } }
.barra { z-index: auto; }
@media (max-width: 640px) {
  .g-risposte.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .g-risposte { gap: 10px; } .risposta { min-height: 92px; padding: 8px 4px; border-radius: 24px; }
  .risposta .r-lettera, .risposta .r-numero { font-size: 2.5rem; } .risposta .r-parola { font-size: 1.05rem; } .risposta .r-sotto { font-size: .85rem; }
  .risposta .og, .risposta .bandiera { width: min(100%, 84px); }
  .g-area > .carta { padding: 18px 14px; gap: 8px; } .g-domanda { min-height: 110px; }
  .d-lettera { font-size: 4.6rem; } .d-oggetto .og { width: 120px; } .d-bandiera .bandiera { width: min(220px, 62vw); }
}
.g-risposte.corpo ~ * { } body:has(.g-risposte.corpo) .g-domanda { display: none; }

/* ——— giochi nuovi (aiutante) ——— */
/* i mondi 8 e 9 (Tempo, Emozioni): pelle.mjs ha 7 tinte; finché non ne ha 9 le tessere senza tinta prendono queste */
.t-turchese { --g1: #7CF0E0; --g2: #12A594; } .t-corallo { --g1: #FFB8A8; --g2: #F0605A; }
.mondi li:nth-child(8) .tessera, body:has(a[href^="/gioca/tempo/"]) .tp .tessera:not([class*=" t-"]), body:has(a[href^="/gioca/tempo/"]) .giochi .tessera:not([class*=" t-"]) { --g1: #7CF0E0; --g2: #12A594; }
.mondi li:nth-child(9) .tessera, body:has(a[href^="/gioca/emozioni/"]) .tp .tessera:not([class*=" t-"]), body:has(a[href^="/gioca/emozioni/"]) .giochi .tessera:not([class*=" t-"]) { --g1: #FFB8A8; --g2: #F0605A; }
/* oggetti in gruppo (addizioni, sottrazioni, parti uguali) */
.d-gruppo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 360px; }
.d-gruppo-el { width: 44px; display: block; position: relative; } .d-gruppo-el.piccolo { width: 30px; }
.d-gruppo-el.tolto { opacity: .35; }
.d-gruppo-el.tolto::after { content: ''; position: absolute; inset: 10%; background: linear-gradient(45deg, transparent 44%, #E5484D 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #E5484D 44% 56%, transparent 56%); opacity: 1; }
.d-somma .d-gruppo { max-width: 180px; }
/* parole, lettere e caselle */
.d-casella.d-largo { min-width: 140px; padding: 6px 14px; font-size: 1.6rem; }
.d-parola-lettere { gap: 6px; } .d-casella.d-lett { min-width: 48px; height: 58px; font-size: 2rem; border-radius: 12px; }
.d-conto > .og { width: 120px; }
.d-op.d-salto { font-size: 1.8rem; color: var(--testo-2); }
.r-fila { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .r-fila b { font-family: var(--font-titoli); font-size: 1.6rem; min-width: 1.6em; padding: 2px 6px; border-radius: 10px; background: #EEEAF8; color: var(--testo); }
.d-coppie { max-width: 110px; } .d-largo-p { max-width: 260px; }
/* colori da mescolare */
.d-mescola { gap: 8px; } .d-tinta { display: grid; justify-items: center; gap: 2px; } .d-tinta .og { width: 76px; }
/* grande e piccolo */
.r-misura { width: 110px; height: 110px; display: grid; place-items: center; } .risposta .r-misura .og { width: calc(100% * var(--s)); max-width: none; }
/* lo specchio */
.d-specchio { display: flex; align-items: center; gap: 0; } .d-specchio .griglia { width: 112px; height: auto; display: block; }
.d-asse { width: 4px; align-self: stretch; margin: 0 8px; background: repeating-linear-gradient(180deg, #7B5CFF 0 8px, transparent 8px 14px); border-radius: 2px; }
.risposta .griglia { width: min(100%, 100px); height: auto; }
/* orologio, stagioni, facce */
.d-orologio .og { width: 200px; } .d-scena .og { width: 190px; } .d-faccia .og { width: 170px; }
html[data-colori="contrasto"] .d-gruppo-el.tolto::after { background: linear-gradient(45deg, transparent 44%, #000 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #000 44% 56%, transparent 56%); }
html[data-colori="scuro"] .r-fila b { background: #2A2050; color: #fff; }
@media (max-width: 640px) {
  .d-gruppo-el { width: 34px; } .d-gruppo-el.piccolo { width: 24px; } .d-somma .d-gruppo { max-width: 120px; }
  .d-casella.d-largo { min-width: 110px; font-size: 1.25rem; } .d-casella.d-lett { min-width: 36px; height: 46px; font-size: 1.5rem; padding: 2px; }
  .d-orologio .og { width: 160px; } .d-scena .og { width: 150px; } .d-faccia .og { width: 130px; } .d-tinta .og { width: 56px; }
  .r-misura { width: 84px; height: 84px; } .r-fila b { font-size: 1.2rem; } .d-specchio .griglia { width: 90px; }
}
/* «Tocca il…»: punti più piccoli (44 px, la misura minima per il dito) così a Esperto non coprono la faccia */
.risposta.punto { width: 44px; height: 44px; min-height: 44px; border-width: 4px; background: rgba(255, 255, 255, .35); }
.risposta.punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #6A3DE8; } .risposta.punto.giusta { background: rgba(31, 184, 106, .75); }
.d-faccia-p .og { width: 96px; } @media (max-width: 640px) { .d-faccia-p .og { width: 76px; } }