/* 4 · Pop! — lilla pastello, bolle arcobaleno in rilievo (accese) o piatte (spente), plastilina morbida, ombre doppie. */
:root {
  --sfondo: #F1ECFF; --superficie: #FBF9FF; --superficie-2: #EDE6FF; --testo: #241B47; --testo-2: #4F4673;
  --primario: #5B3FD9; --primario-testo: #FFFFFF; --accento: #FF9F43; --bordo: #D8CEF5; --fuoco: #241B47;
  --cella-sfondo: #E6DEFF; --pt-bordo: transparent; --raggio: 36px; --ombra: 10px 10px 24px rgba(91, 63, 217, .14), -8px -8px 20px rgba(255, 255, 255, .9);
  --font-titoli: 'Bricolage Grotesque', 'Fredoka', sans-serif;
  --r1: #FF6B8B; --r2: #FF9F43; --r3: #FFD23F; --r4: #4ED18A; --r5: #4DA8FF; --r6: #A66BFF;
}
html[data-colori="calmi"] { --r1: #D99AAA; --r2: #DDB28A; --r3: #DDCD8E; --r4: #9CCDB1; --r5: #9DBCDB; --r6: #BBA5DA; --ombra: 4px 4px 12px rgba(91, 63, 217, .1); }
body { background: var(--sfondo); }
.morbido { min-height: 100dvh; background: radial-gradient(800px 500px at 100% 0, #FFE3F1, transparent 60%), radial-gradient(800px 600px at 0 40%, #DFF7FF, transparent 60%), var(--sfondo); }
html[data-colori="contrasto"] .morbido, html[data-colori="scuro"] .morbido { background: var(--sfondo); }

/* bolle pop-it */
.cella { border-radius: 34%; background: var(--cella-sfondo); box-shadow: inset 4px 4px 10px rgba(91, 63, 217, .15), inset -4px -4px 10px rgba(255, 255, 255, .8); }
.cella .pt { background: color-mix(in srgb, var(--b) 35%, #E6DEFF); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .12), inset -2px -2px 4px rgba(255, 255, 255, .7); }
.cella .pt.on { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--b) 40%, #FFF) 0 12%, var(--b) 55%, color-mix(in srgb, var(--b) 75%, #000)); box-shadow: 3px 4px 6px rgba(0, 0, 0, .22), -2px -2px 4px rgba(255, 255, 255, .7); }
.cella .p1, .pt-b.p1 { --b: var(--r1); } .cella .p2, .pt-b.p2 { --b: var(--r2); } .cella .p3, .pt-b.p3 { --b: var(--r3); } .cella .p4, .pt-b.p4 { --b: var(--r4); } .cella .p5, .pt-b.p5 { --b: var(--r5); } .cella .p6, .pt-b.p6 { --b: var(--r6); }
.cella-tocca { background: #E6DEFF; border-radius: 48px; box-shadow: 14px 14px 30px rgba(91, 63, 217, .18), -12px -12px 26px rgba(255, 255, 255, .95), inset 0 0 0 2px rgba(255, 255, 255, .6); }
.pt-b { border: 0; background: color-mix(in srgb, var(--b) 30%, #E6DEFF); box-shadow: inset 5px 5px 10px rgba(0, 0, 0, .14), inset -5px -5px 10px rgba(255, 255, 255, .8); color: #3B2F66; }
.pt-b.on { border: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--b) 40%, #FFF) 0 14%, var(--b) 55%, color-mix(in srgb, var(--b) 72%, #000)); box-shadow: 8px 10px 16px rgba(0, 0, 0, .22), -6px -6px 12px rgba(255, 255, 255, .8); color: #FFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); animation: pop calc(.4s / max(var(--mov), .01)) cubic-bezier(.3, 1.8, .5, 1) 1; }
@keyframes pop { 0% { transform: scale(.85); } 50% { transform: scale(1.12); } }
html[data-colori="contrasto"] .cella, html[data-colori="contrasto"] .cella-tocca { background: #000; box-shadow: inset 0 0 0 3px #FFF; } html[data-colori="contrasto"] .cella .pt:not(.on), html[data-colori="contrasto"] .pt-b:not(.on) { background: transparent; box-shadow: none; }
html[data-colori="contrasto"] .cella .pt.on, html[data-colori="contrasto"] .pt-b.on { background: #FFF; color: #000; text-shadow: none; box-shadow: none; }
html[data-colori="scuro"] .cella, html[data-colori="scuro"] .cella-tocca { background: #2A2640; box-shadow: none; } html[data-colori="scuro"] .pt-b:not(.on) { color: #F3F1FA; }

/* tasti di plastilina */
.tasto { border-radius: 22px; font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; transition: transform calc(.15s * var(--mov)), box-shadow calc(.15s * var(--mov)); }
.tasto-primario { background: #5B3FD9; box-shadow: 6px 6px 14px rgba(91, 63, 217, .35), -4px -4px 10px rgba(255, 255, 255, .8), inset 0 2px 0 rgba(255, 255, 255, .25); }
.tasto-secondario { background: #FBF9FF; box-shadow: 6px 6px 14px rgba(91, 63, 217, .14), -5px -5px 12px rgba(255, 255, 255, .95), inset 0 0 0 2px #D8CEF5; }
.tasto:active { transform: scale(.96); box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .15); }
.tasto-secondario .ic { --ic1: #5B3FD9; --ic2: #3A26A0; --ic3: #FF9F43; color: #5B3FD9; }
.tasto.grande { min-height: 60px; padding: .85em 1.5em; font-size: 1.15rem; }
html[data-colori="contrasto"] .tasto-primario, html[data-colori="contrasto"] .tasto-secondario { box-shadow: inset 0 0 0 3px #FFF; } html[data-colori="scuro"] .tasto-secondario { background: #2A2640; box-shadow: inset 0 0 0 2px #4A4466; }
.chip { border-radius: 16px; font-family: var(--font-titoli); border: 0; background: #FBF9FF; box-shadow: 4px 4px 10px rgba(91, 63, 217, .12), -3px -3px 8px #FFF, inset 0 0 0 2px #D8CEF5; }
.chip.attivo { background: #5B3FD9; box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .25); }

.testata-in { padding: 14px 0; }
.logo-nome { font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; } .logo-nome b { color: #5B3FD9; margin-left: .1em; }
.voce { font-weight: 700; } .voce:hover, .voce[aria-current="page"] { background: #FBF9FF; box-shadow: 4px 4px 10px rgba(91, 63, 217, .14), -3px -3px 8px #FFF; }
html[data-colori="contrasto"] .voce[aria-current="page"] { box-shadow: inset 0 0 0 3px #FFF; background: #000; }
.voce-ic .ic { --ic1: var(--r5); --ic2: #1F6BC2; } .menu li:nth-child(2) .ic { --ic1: var(--r2); --ic2: #B85F10; } .menu li:nth-child(3) .ic { --ic1: var(--r4); --ic2: #1F8A50; } .menu li:nth-child(4) .ic { --ic1: var(--r6); --ic2: #6A2FC2; } .menu li:nth-child(5) .ic { --ic1: var(--r1); --ic2: #B82A4A; } .menu li:nth-child(6) .ic { --ic1: #F2B70F; --ic2: #9A7300; }
.tasto-modo, .tasto-menu { background: #FBF9FF; color: var(--testo); box-shadow: 4px 4px 10px rgba(91, 63, 217, .14), -3px -3px 8px #FFF; } .tasto-modo .ic { --ic1: #5B3FD9; --ic2: #3A26A0; --ic3: var(--r3); }
html[data-colori="contrasto"] .tasto-modo, html[data-colori="contrasto"] .tasto-menu { background: #000; color: #FFF; box-shadow: inset 0 0 0 3px #FFF; }

.faccina .f-corpo { fill: #A66BFF; } .faccina .f-occhio { fill: #FFF; } .faccina .f-luce { fill: #241B47; } .faccina .f-spento { fill: #C3A3FF; } .faccina .f-bocca { stroke: #FFF; } .faccina .f-guancia { fill: #FF6B8B; }
.mascotte { width: 70px; height: 88px; filter: drop-shadow(4px 6px 8px rgba(91, 63, 217, .3)); }

/* home */
.eroe { padding: 24px 0; }
.eroe-carta { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: 't p' 'b b'; gap: 20px 40px; align-items: center; background: #FBF9FF; border-radius: 56px; padding: clamp(24px, 5vw, 56px); box-shadow: 20px 20px 50px rgba(91, 63, 217, .16), -16px -16px 40px rgba(255, 255, 255, .95); }
html[data-colori="contrasto"] .eroe-carta { background: #000; box-shadow: inset 0 0 0 3px #FFF; } html[data-colori="scuro"] .eroe-carta { background: #1F1C30; box-shadow: none; }
.eroe-testo { grid-area: t; } .eroe-pop { grid-area: p; display: grid; justify-items: center; gap: 8px; } .tavoletta { grid-area: b; }
.occhiello { font-weight: 700; color: #5B3FD9; } html[data-colori="contrasto"] .occhiello { color: #FFE500; }
.eroe h1 { font-size: clamp(3rem, 7.5vw, 5.4rem); line-height: .95; font-weight: 800; letter-spacing: -.04em; margin: 8px 0 16px; }
.eroe h1 span { background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-colori="contrasto"] .eroe h1 span, html[data-colori="calmi"] .eroe h1 span { background: none; color: inherit; }
.eroe-frase { font-size: 1.2rem; color: var(--testo-2); max-width: 40ch; } .eroe-bottoni { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 12px; }
.prova-esito { text-align: center; font-weight: 700; min-height: 3em; max-width: 30ch; margin: 10px auto 0; }
.tavoletta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 22px; border-radius: 40px; background: linear-gradient(90deg, #FFE0E7, #FFEBD6, #FFF6CC, #DDF7E8, #DCEEFF, #EADDFF); }
html[data-colori="contrasto"] .tavoletta { background: #000; box-shadow: inset 0 0 0 3px #FFF; } html[data-colori="scuro"] .tavoletta { background: #2A2640; }
.tavoletta .cella { --pt: clamp(20px, 3.4vw, 34px); --pt-gap: clamp(8px, 1.6vw, 14px); background: rgba(255, 255, 255, .6); }
@media (max-width: 860px) { .eroe-carta { grid-template-columns: 1fr; grid-template-areas: 't' 'p' 'b'; border-radius: 40px; } }

.pillole { margin: 34px auto; } .pillole ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pillola { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 22px 16px 16px; border-radius: 999px; text-decoration: none; color: var(--testo); background: #FBF9FF; box-shadow: 10px 10px 24px rgba(91, 63, 217, .14), -8px -8px 20px rgba(255, 255, 255, .95); transition: transform calc(.18s * var(--mov)); }
.pillola:hover { transform: translateY(-3px); } .pillola:active { transform: scale(.98); box-shadow: inset 6px 6px 14px rgba(91, 63, 217, .16); }
html[data-colori="contrasto"] .pillola { background: #000; box-shadow: inset 0 0 0 3px #FFF; color: #FFF; } html[data-colori="scuro"] .pillola { background: #1F1C30; box-shadow: none; color: var(--testo); }
.pillola-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .15), inset 6px 6px 10px rgba(255, 255, 255, .4); }
.pillola-ic .ic { width: 58%; height: 58%; --ic1: #FFF; --ic2: rgba(255, 255, 255, .7); --ic3: rgba(255, 255, 255, .9); }
.c0 { --pc: var(--r1); } .c1 { --pc: var(--r2); } .c2 { --pc: var(--r4); } .c3 { --pc: var(--r5); } .c4 { --pc: var(--r6); } .c5 { --pc: #F2B70F; }
html[data-colori="contrasto"] .pillola-ic { background: #FFE500; } html[data-colori="contrasto"] .pillola-ic .ic { --ic1: #000; --ic2: #000; --ic3: #000; }
.pillola-t { display: grid; } .pillola-t b { font: 800 1.4rem var(--font-titoli); } .pillola-t span { color: var(--testo-2); font-weight: 700; }
.pillola-vai .ic { width: 30px; height: 30px; color: var(--testo-2); }
@media (max-width: 760px) { .pillole ul { grid-template-columns: 1fr; } .pillola { border-radius: 40px; } }
.due-morbide { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 22px auto; }
.morbida { background: #FBF9FF; border-radius: 40px; padding: 28px; box-shadow: var(--ombra); }
html[data-colori="contrasto"] .morbida { background: #000; box-shadow: inset 0 0 0 3px #FFF; } html[data-colori="scuro"] .morbida { background: #1F1C30; box-shadow: none; }
.morbida h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.nome-veloce { display: grid; gap: 10px; } .nome-veloce input { font-size: 1.3rem; border-radius: 20px; } .nome-uscita { min-height: 80px; padding: 10px 0; } .nome-veloce .tasto { justify-self: start; }
.tutti { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; } .tutti li { display: flex; gap: 14px; } .tutti h3 { font-size: 1.1rem; margin: 0; } .tutti p { margin: 0; color: var(--testo-2); }
.tutti-ic .ic { width: 44px; height: 44px; color: #5B3FD9; }
@media (max-width: 860px) { .due-morbide { grid-template-columns: 1fr; } }
.lingue-m { margin: 22px auto; } .lingue-chip { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }

.tp h1 { font-weight: 800; letter-spacing: -.03em; } .tp-ic { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #FBF9FF; box-shadow: var(--ombra); flex: none; } .tp-ic .ic { width: 64px; height: 64px; }
html[data-colori="contrasto"] .tp-ic { background: #000; box-shadow: inset 0 0 0 3px #FFF; }
.lezione, .gioco-area, .gioco-carta, .scheda-carta, .classe-blocco, .testo-lungo, .scrivi-griglia > section, .traduci, .chi-ce-dietro, .rilievo, .controlli, .lingua-carta { border-radius: 40px; background: #FBF9FF; }
html[data-colori="contrasto"] :is(.lezione, .gioco-area, .gioco-carta, .scheda-carta, .classe-blocco, .testo-lungo, .scrivi-griglia > section, .traduci, .chi-ce-dietro, .rilievo, .controlli, .lingua-carta) { background: #000; box-shadow: inset 0 0 0 3px #FFF; }
html[data-colori="scuro"] :is(.lezione, .gioco-area, .gioco-carta, .scheda-carta, .classe-blocco, .testo-lungo, .scrivi-griglia > section, .traduci, .chi-ce-dietro, .rilievo, .controlli, .lingua-carta) { background: #1F1C30; box-shadow: none; }
.scelta { border: 0; border-radius: 30px; background: #FBF9FF; box-shadow: 8px 8px 18px rgba(91, 63, 217, .16), -6px -6px 14px #FFF; font-family: var(--font-titoli); }
.scelta:active { box-shadow: inset 6px 6px 14px rgba(91, 63, 217, .2); }
.carta { background: radial-gradient(circle at 35% 30%, #C3A3FF, #A66BFF 55%, #6A2FC2); border-radius: 26px; }
.min { background: radial-gradient(circle at 35% 30%, #8F78FF, #5B3FD9); box-shadow: 3px 4px 8px rgba(0, 0, 0, .2); }
.tasto-p { border-radius: 20px; box-shadow: 6px 6px 14px rgba(91, 63, 217, .14), -5px -5px 12px #FFF; } .tasto-p.giu { background: #5B3FD9; box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .3); }
.piede { background: #241B47; color: #EDE6FF; border-radius: 56px 56px 0 0; } .piede a { color: #FFF; }
html[data-colori="contrasto"] .piede { background: #000; border-top: 3px solid #FFF; }
.schermo { background: var(--sfondo); } .stretto-gioco { max-width: 900px; }
.pillola-ic .ic .w { fill: color-mix(in srgb, var(--pc) 70%, #000); } .pillola-ic .ic .b { fill: rgba(0, 0, 0, .18); }
.cella .pt:not(.on), .pt-b:not(.on) { background: #DCD3F7; }
html[data-colori="contrasto"] .cella .pt:not(.on), html[data-colori="contrasto"] .pt-b:not(.on) { background: transparent; } html[data-colori="scuro"] .cella .pt:not(.on), html[data-colori="scuro"] .pt-b:not(.on) { background: #3A3555; }