@font-face { font-family: "Bungee"; src: url("../fonts/bungee.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --prugna: #2b1846; --prugna-2: #4a2580; --viola: #6b33b8;
  --panna: #fff6e8; --panna-2: #ffe9c9;
  --mandarino: #ff7a1a; --rosa: #ff4fa3; --laguna: #19c3d9; --lime: #8be04e; --tuorlo: #ffd23f; --cielo: #7a5cff;
  --testo: #2b1846;
  --ombra: 0 6px 0 -1px rgba(43, 24, 70, .55), 0 14px 22px -6px rgba(20, 8, 40, .55);
  --ombra-piccola: 0 4px 0 -1px rgba(43, 24, 70, .55), 0 8px 14px -4px rgba(20, 8, 40, .45);
  --bordo: 3.5px solid var(--prugna);
  --r: 22px;
  --sicuro-alto: env(safe-area-inset-top, 0px); --sicuro-basso: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Fredoka", system-ui, sans-serif; color: var(--testo); font-weight: 500;
  background: radial-gradient(120% 70% at 50% 110%, #ff8fc8 0%, #ff4fa3 22%, #8a3fd1 52%, #3a1d6e 78%, #2b1846 100%) fixed, var(--prugna);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
::selection { background: var(--tuorlo); color: var(--prugna); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--tuorlo); outline-offset: 3px; border-radius: 14px; }
svg { width: 1em; height: 1em; flex: none; }

/* bolle che salgono dietro ai menu */
#bolle-sfondo { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#bolle-sfondo i {
  position: absolute; bottom: -120px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(191,246,255,.35) 22%, rgba(255,159,224,.18) 55%, rgba(122,92,255,.5) 100%);
  box-shadow: inset -6px -8px 18px rgba(255,255,255,.25), inset 4px 4px 10px rgba(122,92,255,.35);
  animation: sale linear infinite;
}
@keyframes sale { from { transform: translate3d(0,0,0); } 50% { transform: translate3d(28px,-55vh,0); } to { transform: translate3d(-10px,-120vh,0); } }
body.in-gioco #bolle-sfondo { display: none; }

/* schermate */
.schermo { position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden;
  padding: calc(12px + var(--sicuro-alto)) 16px calc(20px + var(--sicuro-basso)); -webkit-overflow-scrolling: touch; }
.schermo.attivo { display: flex; animation: entra .38s cubic-bezier(.16,1,.3,1); }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.schermo.gioco { padding: 0; overflow: hidden; background: #000; }
.schermo > * { flex-shrink: 0; }

.barra { width: 100%; max-width: 720px; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; margin-bottom: 10px; }
.barra h2 { margin: 0; text-align: center; font-family: "Bungee"; font-weight: 400; font-size: clamp(1.15rem, 5vw, 1.6rem); color: var(--panna); text-shadow: 0 3px 0 var(--prugna); letter-spacing: .01em; line-height: 1.1; text-wrap: balance; }
.barra > .contatore { justify-self: end; }
.tondo { width: 56px; height: 56px; border-radius: 50%; border: var(--bordo); background: var(--panna); display: grid; place-items: center; box-shadow: var(--ombra-piccola); font-size: 30px; padding: 0; transition: transform .15s; }
.tondo:active { transform: translateY(3px) scale(.96); }
.contatore { display: inline-flex; align-items: center; gap: 6px; justify-self: end; background: var(--panna); border: var(--bordo); border-radius: 999px; padding: 6px 14px 6px 8px; font-family: "Bungee"; font-weight: 400; font-size: 1.25rem; box-shadow: var(--ombra-piccola); font-variant-numeric: tabular-nums; }
.contatore svg { font-size: 30px; }
#home .barra { grid-template-columns: 56px 1fr; }

/* logo */
.logo { margin: 4px 0 0; font-family: "Bungee"; font-weight: 400; font-size: clamp(2.6rem, 14vw, 5.2rem); line-height: .95; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; letter-spacing: -.01em; }
.logo span { display: inline-block; -webkit-text-stroke: 3px var(--prugna); paint-order: stroke fill; text-shadow: 0 6px 0 var(--prugna), 0 14px 20px rgba(20,8,40,.5); animation: rimbalza 2.4s cubic-bezier(.37,0,.63,1) infinite; }
.logo span:nth-child(1) { color: var(--tuorlo); } .logo span:nth-child(2) { color: var(--laguna); animation-delay: .12s; }
.logo span:nth-child(3) { color: var(--lime); animation-delay: .24s; } .logo span:nth-child(4) { color: var(--mandarino); animation-delay: .36s; }
.logo span:nth-child(5) { color: var(--rosa); animation-delay: .48s; -webkit-text-stroke-color: var(--prugna); }
.logo em { font-style: normal; flex-basis: 100%; text-align: center; font-size: .42em; color: var(--panna); -webkit-text-stroke: 2px var(--prugna); paint-order: stroke fill; text-shadow: 0 4px 0 var(--prugna); letter-spacing: .35em; margin-top: 4px; padding-left: .35em; }
@keyframes rimbalza { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* Kikky */
.kikky-palco { position: relative; width: min(46vw, 210px); margin: 2px auto -6px; }
.kikky-palco.piccolo { width: min(52vw, 230px); margin: 4px auto 6px; }
.kikky-ritratto svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 14px rgba(20,8,40,.45)); animation: respira 3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes respira { 50% { transform: translateY(-4px) scale(1.015, .99); } }
.ombra-palco { width: 70%; height: 16px; margin: -12px auto 0; border-radius: 50%; background: rgba(20,8,40,.35); filter: blur(4px); }

/* porte principali */
.porte { width: 100%; max-width: 560px; display: grid; gap: 14px; margin-top: 14px; }
.porta { position: relative; display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 14px; text-align: left; padding: 12px 18px 12px 12px; border: var(--bordo); border-radius: var(--r); box-shadow: var(--ombra); overflow: hidden; transition: transform .16s cubic-bezier(.16,1,.3,1); }
.porta:active { transform: translateY(4px) scale(.985); box-shadow: var(--ombra-piccola); }
.porta::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.18); }
.porta-ico { grid-row: 1 / 3; width: 76px; height: 76px; border-radius: 20px; background: var(--panna); border: var(--bordo); display: grid; place-items: center; font-size: 54px; transform: rotate(-6deg); }
.porta b { font-family: "Bungee"; font-weight: 400; font-size: clamp(1.5rem, 7vw, 2rem); color: var(--panna); -webkit-text-stroke: 2px var(--prugna); paint-order: stroke fill; text-shadow: 0 3px 0 var(--prugna); line-height: 1; }
.porta small { font-size: 1.05rem; font-weight: 600; color: var(--prugna); }
.p-gara { background: linear-gradient(135deg, #ff9a4a, var(--mandarino) 60%, #f25a00); }
.p-bolle { background: linear-gradient(135deg, #5ee0f0, var(--laguna) 60%, #0a9bb5); }
.p-impara { background: linear-gradient(135deg, #b4f07c, var(--lime) 60%, #5cbf22); }
.p-ballo { background: linear-gradient(135deg, #ffb6de, #ff6fb8 60%, var(--rosa)); }
.p-bolle .porta-ico { transform: rotate(5deg); } .p-impara .porta-ico { transform: rotate(-3deg); } .p-ballo .porta-ico { transform: rotate(4deg); }
/* 4 porte: a due colonne sui telefoni, tessere verticali */
.porte { grid-template-columns: 1fr 1fr; }
.porte .porta { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 12px 8px 14px; row-gap: 4px; }
.porte .porta-ico { grid-row: auto; }
.porte .porta b { font-size: clamp(1.2rem, 6vw, 1.7rem); }
.porte .porta small { font-size: .95rem; line-height: 1.15; }
@media (min-width: 760px) { .porte { grid-template-columns: repeat(4, 1fr); max-width: 860px; } }

/* scuola di ballo */
.lezioni .att { padding-top: 6px; }
.mini-ballo { width: 100px; height: 100px; background: radial-gradient(circle at 50% 70%, rgba(255,255,255,.35), transparent 70%); border-radius: 16px; }
.disco-scelte { width: 100%; max-width: 720px; display: grid; gap: 12px; }
.carica { cursor: pointer; position: relative; }
.carica input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.carica:focus-within { outline: 4px solid var(--tuorlo); outline-offset: 3px; }
.conto { display: flex; gap: 6px; margin-left: auto; }
.conto span { width: 42px; height: 42px; border-radius: 50%; border: var(--bordo); background: rgba(255,246,232,.5); display: grid; place-items: center; font-family: "Bungee"; font-size: 1.2rem; transition: transform .1s, background .1s; }
.conto span.on { background: var(--tuorlo); transform: scale(1.2); }
.frase-lezione { position: absolute; left: 16px; right: 16px; top: calc(76px + var(--sicuro-alto)); margin: 0; z-index: 2; text-align: center; color: var(--panna); font-weight: 700; font-size: clamp(1.15rem, 4.8vw, 1.5rem); line-height: 1.25; text-shadow: 0 3px 0 var(--prugna), 0 0 14px rgba(20,8,40,.8); text-wrap: balance; pointer-events: none; }
.comandi-lezione { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 0 12px calc(12px + var(--sicuro-basso)); }
.comandi-lezione .grosso { margin: 0; min-height: 58px; padding: 8px 18px; font-size: 1.1rem; }
.comandi-disco { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 10px calc(12px + var(--sicuro-basso)); }
.comandi-disco button { height: clamp(96px, 22vw, 130px); border: var(--bordo); border-radius: 24px; box-shadow: var(--ombra-piccola); font-weight: 700; font-size: .95rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; }
.comandi-disco b { font-family: "Bungee"; font-weight: 400; font-size: 1.35rem; }
.comandi-disco button.giu { transform: translateY(4px) scale(.95); filter: brightness(1.2); }
.combo { color: var(--rosa); }
.combo:empty { display: none; }

.porticine { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.porticine button { display: inline-flex; align-items: center; gap: 8px; background: var(--panna); border: var(--bordo); border-radius: 999px; padding: 8px 16px 8px 8px; font-weight: 700; font-size: 1.05rem; box-shadow: var(--ombra-piccola); }
.porticine svg { font-size: 34px; }
.credit { margin-top: auto; padding-top: 18px; color: var(--panna); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }

/* bottoni grandi */
.grosso { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 28px; border: var(--bordo); border-radius: 999px; background: var(--panna); font-family: "Bungee"; font-weight: 400; font-size: 1.35rem; box-shadow: var(--ombra); margin: 14px auto 0; transition: transform .15s; }
.grosso svg { font-size: 30px; }
.grosso:active { transform: translateY(4px); box-shadow: var(--ombra-piccola); }
.grosso.verde { background: var(--lime); } .grosso.rosa { background: var(--rosa); color: var(--panna); }
.grosso:disabled { opacity: .5; }

h2.sotto { font-family: "Bungee"; font-weight: 400; color: var(--panna); text-shadow: 0 3px 0 var(--prugna); font-size: 1.3rem; margin: 22px 0 10px; }
.spiega { max-width: 560px; text-align: center; color: var(--panna); font-size: 1.12rem; font-weight: 600; line-height: 1.4; margin: 0 0 14px; text-wrap: balance; text-shadow: 0 2px 6px rgba(20,8,40,.45); }

/* scelte (mezzi, piste, vestiti) */
.scelte { width: 100%; max-width: 720px; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .scelte.mezzi, .scelte.vestiti { grid-template-columns: repeat(4, 1fr); } }
.scelta { position: relative; border: var(--bordo); border-radius: var(--r); background: var(--panna); padding: 10px 10px 12px; box-shadow: var(--ombra-piccola); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .18s cubic-bezier(.16,1,.3,1), background .2s; }
.scelta svg.ico { font-size: 64px; }
.scelta b { font-family: "Bungee"; font-weight: 400; font-size: 1.05rem; line-height: 1.1; text-align: center; }
.scelta small { font-size: .95rem; font-weight: 600; opacity: .85; text-align: center; line-height: 1.2; }
.scelta.scelto { background: var(--tuorlo); transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--ombra); }
.scelta.scelto::after { content: ""; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%; border: var(--bordo); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%232b1846' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.scelta .vestito svg { width: 100%; height: auto; }
.scelta.chiuso { filter: saturate(.25); opacity: .75; }
.scelta .lucchetto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; }
.scelta .lucchetto span { position: absolute; top: 8px; background: var(--prugna); color: var(--panna); border-radius: 99px; padding: 2px 10px; font-size: .9rem; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.piste .scelta { padding: 0 0 10px; overflow: hidden; }
.piste .anteprima { width: 100%; aspect-ratio: 16 / 9; border-bottom: var(--bordo); display: block; }
.stelline { display: flex; gap: 2px; font-size: 22px; }
.stelline .vuota { opacity: .25; filter: grayscale(1); }

/* HUD dei giochi */
#tela3d, #tela2d, #tela-parole, #tela-lezione, #tela-disco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-gara, .hud-bolle { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--sicuro-alto)) 12px 0; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; z-index: 2; }
.hud-gara > *, .hud-bolle > * { pointer-events: auto; }
.hud-pos { background: var(--panna); border: var(--bordo); border-radius: 20px; padding: 4px 14px 6px; box-shadow: var(--ombra-piccola); text-align: center; }
.hud-pos b { display: block; font-family: "Bungee"; font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--mandarino); -webkit-text-stroke: 1.5px var(--prugna); paint-order: stroke fill; }
.hud-pos small { font-weight: 700; font-size: .95rem; }
.hud-ogg { width: 74px; height: 74px; margin: 0 auto; border-radius: 22px; border: var(--bordo); background: rgba(255,246,232,.92); box-shadow: var(--ombra-piccola); display: grid; place-items: center; font-size: 54px; }
.hud-ogg.gira svg { animation: gira .12s steps(1) infinite; }
.hud-ogg.pieno { animation: pulsa 1s ease-in-out infinite; background: var(--tuorlo); }
@keyframes pulsa { 50% { transform: scale(1.08); } }
.pausa { margin-left: auto; }
.hud-bolle b { background: var(--panna); border: var(--bordo); border-radius: 999px; padding: 6px 14px; font-family: "Bungee"; font-weight: 400; font-size: 1.05rem; box-shadow: var(--ombra-piccola); font-variant-numeric: tabular-nums; }
.vite { display: flex; gap: 2px; font-size: 30px; }
.vite svg { filter: drop-shadow(0 2px 0 var(--prugna)); }
.avviso { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; font-family: "Bungee"; font-weight: 400; font-size: clamp(2rem, 11vw, 4.6rem); color: var(--tuorlo); -webkit-text-stroke: 3px var(--prugna); paint-order: stroke fill; text-shadow: 0 6px 0 var(--prugna); white-space: nowrap; opacity: 0; }
.avviso.vai { animation: avviso 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes avviso { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); } 30% { transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1); } }

.comandi-gara, .comandi-bolle { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px calc(14px + var(--sicuro-basso)); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; z-index: 2; pointer-events: none; }
.comandi-gara > *, .comandi-bolle > * { pointer-events: auto; }
.freccia { width: clamp(84px, 24vw, 120px); height: clamp(84px, 24vw, 120px); border-radius: 30px; border: var(--bordo); background: rgba(255,246,232,.82); box-shadow: var(--ombra-piccola); font-size: clamp(52px, 14vw, 72px); display: grid; place-items: center; touch-action: none; }
.freccia.giu, .lancia.giu { transform: translateY(4px) scale(.95); background: var(--tuorlo); }
.lancia { width: clamp(96px, 27vw, 132px); height: clamp(96px, 27vw, 132px); border-radius: 50%; border: var(--bordo); background: var(--rosa); box-shadow: var(--ombra); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 50px; touch-action: none; margin-bottom: 10px; }
.lancia b { font-family: "Bungee"; font-weight: 400; font-size: 1rem; color: var(--panna); -webkit-text-stroke: 1px var(--prugna); paint-order: stroke fill; margin-top: -4px; }
.lancia:disabled { filter: saturate(.3); opacity: .75; }
body.inclina .comandi-gara .freccia { opacity: .35; }

/* livelli bolle */
.griglia-livelli { width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.liv { aspect-ratio: 1; border: var(--bordo); border-radius: 24px; box-shadow: var(--ombra-piccola); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; overflow: hidden; }
.liv b { font-family: "Bungee"; font-weight: 400; font-size: 2.1rem; color: var(--panna); -webkit-text-stroke: 2px var(--prugna); paint-order: stroke fill; line-height: 1; position: relative; }
.liv .stelline { position: relative; }
.liv.chiuso { filter: saturate(.2) brightness(.8); }
.liv.chiuso::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 22v-6a9 9 0 0118 0v6' fill='none' stroke='%232b1846' stroke-width='4'/%3E%3Crect x='10' y='21' width='28' height='21' rx='5' fill='%23ffd23f' stroke='%232b1846' stroke-width='3.5'/%3E%3C/svg%3E") center/42% no-repeat; }

/* imparo */
.attivita { width: 100%; max-width: 720px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .attivita { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.att { border: var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-piccola); padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: transform .15s; }
.att:active { transform: translateY(3px) scale(.98); }
.att svg { font-size: 62px; filter: drop-shadow(0 3px 0 rgba(43,24,70,.35)); }
.att b { font-family: "Bungee"; font-weight: 400; font-size: clamp(.82rem, 3.6vw, 1.02rem); line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.att small { font-size: .95rem; font-weight: 600; line-height: 1.2; }
.att.grande { grid-column: 1 / -1; flex-direction: row; text-align: left; padding: 14px 18px; gap: 16px; }
.att.grande svg { font-size: 76px; }
.att.grande b { font-size: 1.4rem; display: block; }

.pallini { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pallini i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--prugna); background: var(--panna); }
.pallini i.ok { background: var(--lime); } .pallini i.no { background: var(--rosa); } .pallini i.ora { background: var(--tuorlo); transform: scale(1.25); }
.q-figura { width: min(64vw, 260px); aspect-ratio: 1; display: grid; place-items: center; margin: 4px 0 8px; }
.q-figura svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(20,8,40,.4)); animation: respira 3s ease-in-out infinite; }
.q-figura .numerone { font-family: "Bungee"; font-size: 4.4rem; color: var(--panna); -webkit-text-stroke: 3px var(--prugna); paint-order: stroke fill; text-shadow: 0 6px 0 var(--prugna); }
.q-figura.uova { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; width: min(90vw, 420px); aspect-ratio: auto; min-height: 140px; }
.q-figura.uova svg { width: 54px; height: 54px; animation: none; }
.q-domanda { max-width: 620px; margin: 0 0 14px; text-align: center; font-weight: 700; font-size: clamp(1.35rem, 5.6vw, 1.9rem); line-height: 1.2; color: var(--panna); text-shadow: 0 3px 0 var(--prugna); text-wrap: balance; }
.q-risposte { width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-risposte button { min-height: 76px; border: var(--bordo); border-radius: 22px; background: var(--panna); box-shadow: var(--ombra-piccola); font-weight: 700; font-size: clamp(1.1rem, 4.6vw, 1.45rem); padding: 10px; line-height: 1.15; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, background .2s; }
.q-risposte button svg { font-size: 44px; }
.q-risposte button.giusta { background: var(--lime); animation: festa .5s cubic-bezier(.16,1,.3,1); }
.q-risposte button.sbagliata { background: var(--rosa); color: var(--panna); animation: scuoti .4s; }
.q-risposte button:disabled:not(.giusta):not(.sbagliata) { opacity: .55; }
@keyframes festa { 40% { transform: scale(1.08) rotate(-2deg); } }
@keyframes scuoti { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.q-sapevi { max-width: 580px; min-height: 1.4em; text-align: center; color: var(--panna); font-size: 1.12rem; font-weight: 600; line-height: 1.35; margin: 14px 0 0; text-wrap: balance; }
.bandiera { width: 100%; max-width: 230px; border: var(--bordo); border-radius: 10px; box-shadow: var(--ombra); }

/* tastiera di Spara Parole */
.tastiera { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 4px calc(8px + var(--sicuro-basso)); background: linear-gradient(180deg, rgba(43,24,70,0), rgba(43,24,70,.85) 24%); z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.tastiera .riga { display: flex; justify-content: center; gap: 5px; }
.tastiera button { flex: 1 1 0; max-width: 60px; height: clamp(46px, 12vw, 58px); border-radius: 12px; border: 3px solid var(--prugna); background: var(--panna); font-family: "Bungee"; font-weight: 400; font-size: clamp(1rem, 4.6vw, 1.4rem); box-shadow: 0 4px 0 -1px rgba(43,24,70,.8); padding: 0; touch-action: manipulation; }
.tastiera button.prossimo { background: var(--tuorlo); animation: pulsa .9s ease-in-out infinite; }
.tastiera button.premuto { transform: translateY(3px); box-shadow: none; background: var(--lime); }
.tastiera button.errore { background: var(--rosa); }
.tastiera.nascosta { display: none; }

/* balla con kikky */
.pista-ballo { width: min(92vw, 420px); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; border: var(--bordo); border-radius: 28px; background: #1b0f30; box-shadow: var(--ombra); }
.mattonella { border: var(--bordo); border-radius: 20px; display: grid; place-items: center; font-family: "Bungee"; font-size: 1.1rem; color: var(--panna); -webkit-text-stroke: 1px var(--prugna); paint-order: stroke fill; opacity: .55; transition: opacity .12s, transform .12s, box-shadow .12s; }
.mattonella svg { font-size: 64px; display: block; margin: 0 auto 2px; }
.mattonella.accesa { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 4px var(--panna), 0 0 40px 10px currentColor; }

/* album */
.figurine { width: 100%; max-width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .figurine { grid-template-columns: repeat(4, 1fr); } }
.figurina { aspect-ratio: 3 / 4; border: var(--bordo); border-radius: 16px; background: var(--panna); box-shadow: var(--ombra-piccola); padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.figurina .disegno { width: 100%; flex: 1; display: grid; place-items: center; border-radius: 10px; }
.figurina .disegno svg { width: 92%; height: auto; }
.figurina b { font-size: .86rem; font-weight: 700; text-align: center; line-height: 1.1; padding-top: 4px; }
.figurina .num { position: absolute; top: 6px; left: 8px; font-family: "Bungee"; font-size: .8rem; opacity: .6; }
.figurina.manca .disegno svg { filter: brightness(0) opacity(.25); }
.figurina.manca b { opacity: .5; }
.velo { position: fixed; inset: 0; z-index: 20; background: rgba(27,15,48,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.velo[hidden] { display: none; }
.carta-grande, .pannello { width: min(92vw, 420px); max-height: 92vh; overflow-y: auto; background: var(--panna); border: var(--bordo); border-radius: 28px; box-shadow: var(--ombra); padding: 18px; text-align: center; animation: carta .5s cubic-bezier(.16,1,.3,1); }
@keyframes carta { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
.carta-grande .disegno { border-radius: 18px; border: var(--bordo); padding: 8px; }
.carta-grande .disegno svg { width: 100%; height: auto; }
.carta-grande h3 { font-family: "Bungee"; font-weight: 400; font-size: 1.5rem; margin: 12px 0 6px; line-height: 1.1; }
.carta-grande dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; text-align: left; margin: 8px 0; font-size: 1.05rem; }
.carta-grande dt { font-weight: 700; } .carta-grande dd { margin: 0; }
.carta-grande p { font-size: 1.1rem; line-height: 1.4; margin: 8px 0 0; text-align: left; }
.pannello h2 { font-family: "Bungee"; font-weight: 400; margin: 4px 0 6px; font-size: 1.8rem; }
.pannello .grosso { width: 100%; }
.fine .podio { font-family: "Bungee"; font-size: 4rem; line-height: 1; color: var(--mandarino); -webkit-text-stroke: 2px var(--prugna); paint-order: stroke fill; }
.fine .stelle-vinte { display: flex; justify-content: center; gap: 6px; font-size: 64px; margin: 8px 0; }
.fine .stelle-vinte svg { animation: stellona .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.fine .stelle-vinte svg:nth-child(2) { animation-delay: .2s; } .fine .stelle-vinte svg:nth-child(3) { animation-delay: .4s; }
.fine .stelle-vinte svg.vuota { filter: grayscale(1) opacity(.3); }
@keyframes stellona { from { transform: scale(0) rotate(-90deg); } }
.fine p { font-size: 1.15rem; font-weight: 600; margin: 6px 0; }
.fine .classifica { list-style: none; padding: 0; margin: 8px 0; text-align: left; }
.fine .classifica li { display: flex; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 10px; font-weight: 600; }
.fine .classifica li.io { background: var(--tuorlo); }
.fine .classifica li span { font-family: "Bungee"; width: 2.2em; }

/* moduli */
.modulo { width: 100%; max-width: 560px; background: var(--panna); border: var(--bordo); border-radius: var(--r); box-shadow: var(--ombra); padding: 16px; }
.modulo .spiega { color: var(--testo); text-shadow: none; text-align: left; }
.tipi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tipi label span { display: inline-block; padding: 8px 14px; border: 3px solid var(--prugna); border-radius: 999px; font-weight: 600; }
.tipi input { position: absolute; opacity: 0; }
.tipi input:checked + span { background: var(--tuorlo); }
.tipi input:focus-visible + span { outline: 4px solid var(--laguna); }
.campo { display: block; font-weight: 700; margin-bottom: 12px; }
.campo textarea, .campo input { display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 500; padding: 10px 12px; border: 3px solid var(--prugna); border-radius: 14px; background: #fff; color: var(--testo); user-select: text; -webkit-user-select: text; caret-color: var(--rosa); }
.campo textarea::placeholder, .campo input::placeholder { color: #7a6a8c; }
.esito { min-height: 1.3em; font-weight: 700; margin: 10px 0 0; text-align: center; }
.mie-segnalazioni { width: 100%; max-width: 560px; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mie-segnalazioni li { background: var(--panna); border: 3px solid var(--prugna); border-radius: 16px; padding: 10px 12px; font-size: 1rem; }
.mie-segnalazioni li.vuoto { text-align: center; opacity: .85; }
.mie-segnalazioni .stato { display: inline-block; font-size: .85rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--panna-2); margin-left: 6px; }
.mie-segnalazioni .stato.fatta { background: var(--lime); } .mie-segnalazioni .stato.in_lavoro { background: var(--tuorlo); }
.interruttori { width: 100%; max-width: 560px; display: grid; gap: 10px; }
.interruttori label { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panna); border: var(--bordo); border-radius: 18px; padding: 12px 16px; font-weight: 700; font-size: 1.1rem; box-shadow: var(--ombra-piccola); }
.interruttori input { appearance: none; -webkit-appearance: none; width: 62px; height: 36px; border-radius: 999px; border: 3px solid var(--prugna); background: #d9cfe6; position: relative; transition: background .2s; flex: none; margin: 0; }
.interruttori input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--panna); border: 2px solid var(--prugna); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.interruttori input:checked { background: var(--lime); }
.interruttori input:checked::after { transform: translateX(26px); }
.testo-genitori { width: 100%; max-width: 560px; margin-top: 16px; background: var(--panna); border: var(--bordo); border-radius: var(--r); padding: 8px 18px; font-size: 1.05rem; line-height: 1.45; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--prugna-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #bolle-sfondo { display: none; }
}
@media (min-height: 760px) { .kikky-palco { width: min(50vw, 240px); } }
@media (max-height: 640px) { .kikky-palco { width: 120px; } .logo { font-size: 2.6rem; } .porte { gap: 10px; } .porta-ico { width: 62px; height: 62px; font-size: 44px; } .porta { grid-template-columns: 62px 1fr; } }

/* ballerino 3D: sotto i comandi; la corsia della discoteca sta sopra su una tela trasparente */
.tela-ballo3d { position: absolute; inset: 0; display: block; z-index: 0; }
#tela-disco { z-index: 1; pointer-events: none; background: transparent; }
#lezione > .hud-bolle, #lezione > .frase-lezione, #lezione > .comandi-lezione { z-index: 2; }
.mini-ballo { object-fit: cover; }
.scegli-qualita select { font: inherit; font-weight: 700; padding: 6px 10px; border: 3px solid var(--prugna); border-radius: 12px; background: var(--panna); color: var(--prugna); }