:root{ --bg:#0B0B0B; --fg:#fff; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}

/* ---------- vista a "reel": prima l'immagine/video a tutta pagina, poi il testo.
   Lo scroll aggancia (snap) l'immagine e il testo come i reel, ma dentro il testo
   lo scorrimento resta libero. ---------- */
.gioco{height:100vh;height:100svh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gioco::-webkit-scrollbar{display:none}

/* ---------- scena: pannello intero del reel (niente sticky, niente overlay) ---------- */
.scena{position:relative;height:100vh;height:100svh;overflow:hidden;z-index:0;
  scroll-snap-align:start;scroll-snap-stop:always}
.scena .sfondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transform-origin:center}
.velo{display:none}   /* nessun overlay che scurisce l'immagine */
.titolo{position:absolute;left:0;right:0;bottom:16vh;padding:0 26px;text-align:center}
.titolo h1{font-size:clamp(30px,9vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:600;margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.occhiello{margin:0 0 8px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}

.freccia{display:none}

/* ---------- label per muoversi fra immagine e testo ----------
   .vai-testo: in basso sull'immagine, freccia SU animata (invita a salire al testo)
   .vai-immagine: in alto sul testo, freccia GIÙ statica (torna a vedere l'immagine) */
.vai-testo,.vai-immagine{position:absolute;left:50%;transform:translateX(-50%);
  width:86px;height:42px;display:flex;justify-content:center;cursor:pointer;border:0;z-index:4;padding:0}
.vai-testo{bottom:0;border-radius:86px 86px 0 0;align-items:flex-start;padding-top:10px;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vai-immagine{top:0;border-radius:0 0 86px 86px;align-items:flex-end;padding-bottom:10px;background:var(--bg)}

.chevrone{position:relative;width:22px;height:22px}
.chevrone:before,.chevrone:after{content:"";position:absolute;left:50%;width:14px;height:14px;margin-left:-7px}
.chevrone.su:before,.chevrone.su:after{border-top:2px solid var(--fg);border-left:2px solid var(--fg)}
.chevrone.su:before{top:6px;transform:rotate(45deg)}
.chevrone.su:after{top:0;opacity:.5;transform:rotate(45deg)}
.chevrone.giu:before,.chevrone.giu:after{border-right:2px solid var(--fg);border-bottom:2px solid var(--fg)}
.chevrone.giu:before{top:0;transform:rotate(45deg)}
.chevrone.giu:after{top:6px;opacity:.5;transform:rotate(45deg)}
/* la freccia SU (invito al testo) si anima; la freccia GIÙ resta statica */
.vai-testo .chevrone.su:before{animation:sali 1.7s cubic-bezier(.4,0,.2,1) infinite}
.vai-testo .chevrone.su:after{animation:sali 1.7s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.12s}
@keyframes sali{0%{transform:translateY(7px) rotate(45deg);opacity:0}
  45%{opacity:1}100%{transform:translateY(-5px) rotate(45deg);opacity:0}}

/* fumetto "Scorri / Scroll" che compare dopo qualche secondo di inattività */
.ballon-scroll{position:fixed;left:50%;transform:translate(-50%,14px);z-index:60;
  bottom:70px;padding:11px 18px;border-radius:16px;
  background:#fff;color:#111;font-size:15px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 12px 34px rgba(0,0,0,.4);opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.ballon-scroll:after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;
  border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.ballon-scroll.mostra{opacity:1;transform:translate(-50%,0);animation:ballon-galleggia 1.8s ease-in-out .4s infinite}
@keyframes ballon-galleggia{0%,100%{margin-top:0}50%{margin-top:-6px}}

/* ---------- contenitore del testo: pannello successivo del reel ---------- */
.contenuti{position:relative;z-index:2;background:var(--bg)}
.contenuti.reel{scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh}
.contenuti.con-scena{border-radius:0;box-shadow:none}

/* ---------- pannelli che scorrono sopra ---------- */
.pannello{position:relative;z-index:2;background:transparent;padding:44px 26px 40px}
.pannello + .pannello{padding-top:8px}

/* ---------- spaziatura uniforme dei box del capitolo ----------
   Ogni box (racconto, testo/immagine extra, enigma, continua) ha SOLO padding
   inferiore di 30px: lo stacco fra un box e l'altro è quindi sempre 30px e non
   si somma mai col padding superiore. Vale anche per l'ultimo box prima
   dell'enigma. Il primo box prende un po' d'aria dalla scena. */
.contenuti .pannello{padding-top:0;padding-bottom:30px}
.contenuti .pannello + .pannello{padding-top:0}
.contenuti.reel .vai-immagine + .pannello{padding-top:46px}
.contenuti:not(.con-scena) > .pannello:first-child{padding-top:40px}
.pannello.racconto .testo{margin:0}
.racconto{min-height:auto}
.blocco{padding-bottom:60px}
.centro{min-height:100vh;min-height:100svh;border-radius:0;box-shadow:none;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.centro .logo{margin-bottom:26px;opacity:.9}
.centro h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}

.testo{font-size:19px;line-height:1.65;margin:0 0 22px;opacity:.92}
.domanda{font-size:21px;line-height:1.45;font-weight:500;margin:0 0 22px;letter-spacing:-.01em}
.indizio{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.09);font-size:16px}
.errore{margin:0 0 16px;color:#ff9d8f;font-size:16px}
.minuto{font-size:14px;opacity:.6;margin:14px 0 0}
.staccato{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}

[data-rivela]{opacity:0;transform:translateY(20px);
  transition:opacity 1s cubic-bezier(.16,.84,.3,1),transform 1s cubic-bezier(.16,.84,.3,1)}
[data-rivela].visibile{opacity:1;transform:none}

/* ---------- moduli ---------- */
.modulo{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.modulo input[type=text],.modulo input[type=email]{padding:16px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:inherit;font-size:17px}
.modulo input::placeholder{color:rgba(255,255,255,.45)}
.modulo input:focus{outline:2px solid var(--fg);outline-offset:2px}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:16px 26px;
  background:var(--fg);color:var(--bg);font-size:17px;font-weight:500;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s}
button:active{transform:scale(.97)}
button.secondario{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.3)}
button.testuale{background:none;color:inherit;opacity:.55;font-size:14px;padding:10px 0;font-weight:400}

.opzione{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  transition:background .25s,border-color .25s,transform .25s}
.opzione:active{transform:scale(.99)}
.opzione input{margin-top:4px;accent-color:var(--fg)}
.opzione input:checked ~ span{font-weight:500}
.spunta{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;opacity:.9}
.spunta input{margin-top:3px;width:20px;height:20px;accent-color:var(--fg);flex:0 0 auto}

/* ---------- scelte del bivio ---------- */
.scelte{display:grid;gap:14px;margin:4px 0 18px}
.scelta-card button{width:100%;padding:0;overflow:hidden;border-radius:22px;background:rgba(255,255,255,.06);
  color:inherit;text-align:left;display:block;border:1px solid rgba(255,255,255,.14)}
.scelta-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.scelta-card .etichetta{display:block;padding:16px 18px 0;font-size:19px;font-weight:500;letter-spacing:-.01em}
.scelta-card .sotto{display:block;padding:4px 18px 18px;font-size:15px;opacity:.72;font-weight:400}
.scelta-card button:active{transform:scale(.985)}

.lingue{display:flex;gap:10px;margin:0 0 24px}
.lingue a{padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  text-decoration:none;font-size:15px}
.lingue a.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ---------- schermata iniziale a due passi ---------- */
/* passo 1: scelta lingua con le bandiere */
.scegli-lingua{font-size:18px;line-height:1.35;font-weight:500;margin:6px 0 26px;opacity:.92}
.scegli-lingua .en{font-size:15px;opacity:.6;font-weight:400}
.lingue-bandiere{display:flex;gap:20px;justify-content:center;margin:0 0 8px}
.lingue-bandiere .bandiera{display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:26px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s}
.lingue-bandiere .bandiera:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.lingue-bandiere .bandiera:active{transform:scale(.95)}
.lingue-bandiere .flag{font-size:52px;line-height:1;
  /* fallback su desktop dove le emoji-bandiera non si vedono */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* passo 2: testo più piccolo e grande pulsante PLAY */
.schermo-play .testo.piccolo{font-size:15.5px;line-height:1.55;opacity:.72;max-width:30em;margin:2px 0 22px}
.btn-play{background:#22c55e;color:#06230f;font-size:26px;font-weight:800;letter-spacing:.14em;
  padding:20px 60px;border-radius:999px;min-width:200px;
  box-shadow:0 10px 30px rgba(34,197,94,.35);text-transform:uppercase}
.btn-play:hover{background:#26d268}
.btn-play:active{transform:scale(.97)}
.sotto-play{margin-top:14px;opacity:.6;max-width:26em}
.sotto-play a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cambia-lingua{opacity:.55;text-decoration:none;font-size:14px}
.cambia-lingua:hover{opacity:.85}
/* su fondo chiaro il verde resta leggibile, ma scuriamo un filo il testo del play */
.tema-chiaro .btn-play{color:#06230f}

.privacy{max-height:34vh;overflow:auto;text-align:left;font-size:14px;line-height:1.55;opacity:.78;
  padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);margin-bottom:22px}

.fondo{position:relative;z-index:2;background:var(--bg);text-align:center;padding:0 26px 40px}
/* spazio in fondo: l'ultimo pulsante si può portare fino al centro schermo */
.spazio-fondo{height:60svh;min-height:320px;background:var(--bg)}

/* ---------- solo mobile ---------- */
.solo-mobile{display:none}
@media (min-width:820px){
  .gioco{display:none}
  .solo-mobile{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;text-align:center}
  .solo-mobile .box{max-width:430px}
  .solo-mobile img{margin:0 auto 26px}
  .solo-mobile p{font-size:20px;margin:0 0 8px}
  .solo-mobile .en{opacity:.55;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-rivela]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
.privacy-link{display:inline-block;margin:2px 0;text-decoration:underline;text-underline-offset:3px}

/* ---------- titolo del capitolo ---------- */
.titolo-capitolo{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}

/* ---------- l'enigma si stacca dal racconto ---------- */
.enigma-blocco{padding-top:0}
.riquadro-enigma{position:relative;border:1px solid rgba(255,255,255,.22);border-radius:22px;
  padding:24px 22px 26px;background:rgba(255,255,255,.06);overflow:hidden}
.riquadro-enigma:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--fg),transparent);opacity:.5;
  transform:translateX(-100%);animation:passaggio 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes passaggio{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.riquadro-enigma .occhiello{display:flex;align-items:center;gap:8px}
.riquadro-enigma .pallino{width:7px;height:7px;border-radius:50%;background:var(--fg);
  animation:respiro 2.2s ease-in-out infinite}
@keyframes respiro{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
[data-rivela].visibile .riquadro-enigma{animation:entra .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- colore delle scelte ---------- */
.scelta-card button{--tinta:transparent}
.scelta-card button[style*="--tinta"]{border-color:var(--tinta)}
.scelta-card button[style*="--tinta"] .etichetta{color:var(--fg)}
.scelta-card button[style*="--tinta"]:before{content:"";display:block;height:4px;background:var(--tinta)}

/* ---------- scelta del personaggio ---------- */
.scelte.quadrate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 20px}
.scelte.quadrate .scelta-card{display:block}
.scelte.quadrate .scelta-card button{width:100%;height:100%;padding:0 0 14px;border-radius:20px;
  display:flex;flex-direction:column;align-items:stretch;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.scelte.quadrate .scelta-card img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:19px 19px 0 0;margin-bottom:12px}
.scelte.quadrate .scelta-card .etichetta{padding:0 12px;font-size:16px;line-height:1.25;
  font-weight:500;letter-spacing:-.01em}
.scelte.quadrate .scelta-card .sotto{padding:4px 12px 0;font-size:13px;line-height:1.35;opacity:.7}
.scelte.quadrate .scelta-card button[style*="--tinta"]{border-color:var(--tinta)}
.scelte.quadrate .scelta-card button[style*="--tinta"]:before{display:none}
.scelte.quadrate .scelta-card button[style*="--tinta"] img{box-shadow:inset 0 -3px 0 var(--tinta)}
@media (min-width:560px){ .scelte.quadrate{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- banner dei cookie ---------- */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;
  display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  max-width:760px;margin:0 auto;padding:20px 22px;border-radius:20px;
  background:#14161a;color:#f2f3f4;box-shadow:0 14px 44px rgba(0,0,0,.3)}
.cookie-banner .testo{flex:1;min-width:240px;font-size:14px;line-height:1.55}
.cookie-banner .titolo{margin:0 0 4px;font-size:15px;font-weight:600}
.cookie-banner p{margin:0}
.cookie-banner a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cookie-banner .scelte{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner button{border:1px solid rgba(255,255,255,.4);background:transparent;color:#f2f3f4;
  border-radius:999px;padding:11px 26px;font:inherit;font-size:14px;cursor:pointer}
.cookie-banner button[data-cookie="si"]{background:#f2f3f4;color:#14161a;border-color:#f2f3f4}
@media (max-width:520px){
  .cookie-banner{padding:18px}
  .cookie-banner .scelte{width:100%}
  .cookie-banner button{flex:1}
}

/* ---------- istruzioni per il premio ---------- */
.istruzioni{width:100%;text-align:left;border:1px solid rgba(255,255,255,.28);border-radius:20px;
  padding:22px 22px 24px;background:rgba(255,255,255,.09);margin:6px 0 18px}
.istruzioni .occhiello{margin:0 0 10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.istruzioni p{margin:0;font-size:19px;line-height:1.55}

/* ---------- enigmi: colore e nuove tipologie ---------- */
.riquadro-enigma{border-color:color-mix(in srgb, var(--tinta-enigma) 55%, transparent)}
.riquadro-enigma:before{background:linear-gradient(90deg,transparent,var(--tinta-enigma),transparent);opacity:.85}
.riquadro-enigma .pallino{background:var(--tinta-enigma)}
.riquadro-enigma .occhiello{color:var(--tinta-enigma);opacity:1}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .riquadro-enigma{border-color:var(--tinta-enigma)}
}
.campo-codice{font-size:26px!important;letter-spacing:.32em;text-align:center;
  font-variant-numeric:tabular-nums}
.tocca-immagine{position:relative;border-radius:16px;overflow:hidden;cursor:crosshair}
.tocca-immagine img{width:100%;display:block}
.segno-tocco{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid var(--tinta-enigma);background:rgba(255,255,255,.28);display:none;pointer-events:none}
.da-ordinare{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.da-ordinare li{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  font-size:16px;cursor:grab;touch-action:none;user-select:none}
.da-ordinare li.in-mano{opacity:.55;border-color:var(--tinta-enigma)}
.da-ordinare .maniglia{opacity:.5;font-size:20px;line-height:1}

/* microanimazione quando l'enigma è sbagliato */
@keyframes scuoti-enigma{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}
.scuoti{animation:scuoti-enigma .5s}

/* spinner mentre il video di scena carica */
.spinner-video{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.spinner-video span{width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:gira-video .8s linear infinite}
@keyframes gira-video{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .scuoti{animation:none}
  .spinner-video span{animation:none}
}

/* enigma: abbina a tocco */
.abbina{display:flex;gap:14px;margin:0 0 10px}
.abbina-col{flex:1;display:flex;flex-direction:column;gap:8px}
.abbina-voce{background:rgba(255,255,255,.06);color:var(--fg);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:12px 10px;font-size:16px;text-align:center;cursor:pointer;width:100%}
.abbina-voce.attiva{border-color:#fff;background:rgba(255,255,255,.16)}
.abbina-voce.legata{border-color:var(--tinta-enigma,#c9a227);background:rgba(201,162,39,.18)}

/* enigma: componi la parola */
.componi{margin:0 0 10px}
.componi-parola{min-height:44px;letter-spacing:.18em;font-size:26px;font-weight:600;text-align:center;
  border-bottom:2px solid rgba(255,255,255,.3);margin:0 0 14px;padding:6px 0}
.componi-lettere{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 12px}
.componi-lettere .lettera{width:46px;height:46px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;
  line-height:1;font-size:20px;font-weight:600;color:var(--fg);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:10px;cursor:pointer}
.componi-lettere .lettera.usata{opacity:.25;cursor:default}
.componi-canc{font-size:14px}

/* enigma: tocca gli intrusi */
.intrusi{display:grid;gap:12px;margin:0 0 10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.intrusi.con-immagini{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){ .intrusi.con-immagini{grid-template-columns:repeat(3,minmax(0,1fr))} }
.intruso{display:flex;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.06);
  color:var(--fg);border:2px solid rgba(255,255,255,.18);border-radius:16px;overflow:hidden;padding:0;cursor:pointer}
.intrusi:not(.con-immagini) .intruso{padding:12px;align-items:center;border-radius:14px}
.intruso img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.intruso span{font-size:14px;text-align:center;padding:8px 10px}
.intrusi:not(.con-immagini) .intruso span{padding:0}
.intruso.preso{border-color:var(--tinta-enigma,#c9a227);background:rgba(201,162,39,.22)}
.intruso.preso img{box-shadow:inset 0 -3px 0 var(--tinta-enigma,#c9a227)}

/* comparsa morbida delle immagini nei pannelli (connessioni lente) */
.pannello img.media-attesa{opacity:0}
.pannello img.media-pronta{animation:media-appari .45s ease}
@keyframes media-appari{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pannello img.media-attesa{opacity:1}
  .pannello img.media-pronta{animation:none}
}

/* la parola da comporre è sempre in maiuscolo */
.componi-parola,.componi-lettere .lettera{text-transform:uppercase}

/* paragrafi del testo capitolo: conserva gli a capo */
.testo p{margin:0 0 .9em}
.testo p:last-child{margin-bottom:0}
/* Titolo (H2) dentro il testo: grande come i titoli dei capitoli */
.testo h2{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  opacity:1;margin:.7em 0 .4em}
.testo h2:first-child{margin-top:0}
.testo h2:last-child{margin-bottom:0}
/* casella privacy obbligatoria nel form email */
.spunta.obbligo span{font-weight:500}

/* logo sempre visibile: su fondo chiaro diventa scuro */
.tema-chiaro img.logo,.tema-chiaro .logo{filter:brightness(0)}
/* enigma: il colore scelto tinge visibilmente il riquadro */
.riquadro-enigma{background:color-mix(in srgb, var(--tinta-enigma) 12%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .riquadro-enigma{background:rgba(201,162,39,.10)}
}

/* intestazione del primo capitolo: logo location + titolo storia, sopra il testo */
.intestazione-storia{text-align:left}
.intestazione-storia .logo{margin:0 0 18px}
.intestazione-storia .titolo-storia{font-size:clamp(28px,8vw,42px);line-height:1.08;
  letter-spacing:-.02em;font-weight:600;margin:0}

/* niente zoom accidentale toccando gli enigmi */
button,.opzione,.intruso,.abbina-voce,.lettera,.scelta-card button,.da-ordinare li{touch-action:manipulation}
/* icone e riquadri dei blocchi (enigma, scelta, finale) */
.icona-blocco{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:rgba(255,255,255,.16);font-size:14px;font-weight:700;margin-right:9px;vertical-align:middle}
.riquadro-blocco{border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:22px 20px;
  background:rgba(255,255,255,.04)}
.tema-chiaro .icona-blocco{background:rgba(0,0,0,.10)}
.tema-chiaro .riquadro-blocco{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.03)}
/* logo sempre ridimensionato, anche se il file è grande */
img.logo,.logo-location,.intestazione-storia .logo{width:100px;height:auto;max-height:88px;object-fit:contain}

/* metti in ordine: selezione a clic con numeri */
.da-ordinare.a-tocco li{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.da-ordinare.a-tocco .num-ordine{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.14);color:var(--fg)}
.da-ordinare.a-tocco li.scelto{border-color:var(--tinta-enigma,#c9a227)}
.da-ordinare.a-tocco li.scelto .num-ordine{background:var(--tinta-enigma,#c9a227);color:#1a1206}
#ordinaAzzera{margin-top:6px}

/* Blocchi aggiuntivi del capitolo (testo/immagine) fra racconto ed enigma.
   Lo stacco di 30px è già gestito dalla spaziatura uniforme sopra: qui restano
   solo le immagini a tutta larghezza. */
.pannello.media-extra{padding-left:0;padding-right:0}
.pannello.media-extra img{display:block;width:100%;height:auto;border-radius:0}
/* comparsa dei blocchi extra: spostamento contenuto entro lo stacco (30px),
   così un blocco che sale non invade mai quello vicino */
.pannello.blocco-extra[data-rivela],.pannello.media-extra[data-rivela]{
  transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.16,.84,.3,1),transform .8s cubic-bezier(.16,.84,.3,1)}
/* a comparsa avvenuta il blocco torna esattamente in posizione (serve la stessa
   specificità della regola sopra, altrimenti .visibile non la vince) */
.pannello.blocco-extra[data-rivela].visibile,.pannello.media-extra[data-rivela].visibile{transform:none}
/* elementi con parallasse allo scroll (impostati via JS) */
[data-parallasse]{will-change:transform}
@media (prefers-reduced-motion: reduce){
  .pannello.blocco-extra[data-rivela],.pannello.media-extra[data-rivela]{transform:none;transition:none}
  .contenuti.invita{animation:none}
  .ballon-scroll.mostra{animation:none}
  [data-parallasse]{transform:none!important}
}

/* Pulsante del finale esterno: stesso peso del pulsante primario */
.btn-esterno{display:inline-block;text-decoration:none;text-align:center;
  border-radius:999px;padding:16px 26px;background:var(--fg);color:var(--bg);
  font-size:17px;font-weight:500;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn-esterno:active{transform:scale(.97)}

/* ---------- animazioni di comparsa scelte per il singolo blocco ----------
   Sovrascrivono la comparsa predefinita (slide dal basso) dei blocchi extra.
   Vale solo per i blocchi con data-anim impostato (quelli dopo il testo iniziale). */
.pannello[data-anim][data-rivela]{transform:none;transition:none;opacity:0}
.pannello[data-anim][data-rivela].visibile{opacity:1}
.pannello[data-anim="fade"][data-rivela].visibile    {animation:ga-fade .8s ease both}
.pannello[data-anim="sinistra"][data-rivela].visibile{animation:ga-sinistra .8s cubic-bezier(.16,.84,.3,1) both}
.pannello[data-anim="destra"][data-rivela].visibile  {animation:ga-destra .8s cubic-bezier(.16,.84,.3,1) both}
.pannello[data-anim="zoom"][data-rivela].visibile    {animation:ga-zoom .7s cubic-bezier(.16,.84,.3,1) both}
.pannello[data-anim="rimbalzo"][data-rivela].visibile{animation:ga-rimbalzo .9s both}
.pannello[data-anim="ribalta"][data-rivela].visibile {animation:ga-ribalta .8s cubic-bezier(.16,.84,.3,1) both;transform-origin:top center}
@keyframes ga-fade{from{opacity:0}to{opacity:1}}
@keyframes ga-sinistra{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes ga-destra{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes ga-zoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* rimbalzo: arriva dal basso con un piccolo rimbalzo; tutto lo spostamento
   verticale resta entro lo stacco fra i blocchi (25px), niente sovrapposizioni */
@keyframes ga-rimbalzo{0%{opacity:0;transform:translateY(20px)}
  55%{opacity:1;transform:translateY(-5px)}72%{transform:translateY(2px)}
  86%{transform:translateY(-1px)}100%{opacity:1;transform:translateY(0)}}
/* ribalta: cerniera sul bordo alto, così il blocco non sale mai sopra la sua
   posizione (niente sovrapposizione col blocco precedente) */
@keyframes ga-ribalta{from{opacity:0;transform:perspective(800px) rotateX(-72deg) translateY(12px)}
  to{opacity:1;transform:none}}
/* con movimento ridotto i blocchi restano semplicemente visibili */
@media (prefers-reduced-motion:reduce){
  .pannello[data-anim][data-rivela]{opacity:1;transform:none}
}

/* ---------- schermata PLAY: titolo della ricompensa ---------- */
.schermo-play .play-titolo{font-size:clamp(22px,6.5vw,28px);font-weight:600;letter-spacing:-.02em;
  line-height:1.2;margin:6px 0 12px}

/* ---------- voto a stelle nel finale (1-4) ---------- */
.voto-eti{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.voto-stelle{display:inline-flex;flex-direction:row-reverse;justify-content:center;gap:8px;margin:0 0 16px}
.voto-stelle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.voto-stelle label{font-size:38px;line-height:1;color:rgba(255,255,255,.26);cursor:pointer;
  transition:color .12s,transform .1s}
.voto-stelle label:hover,.voto-stelle label:hover ~ label,
.voto-stelle input:checked ~ label{color:#ffcf3f}
.voto-stelle label:active{transform:scale(.88)}
.tema-chiaro .voto-stelle label{color:rgba(0,0,0,.2)}
.tema-chiaro .voto-stelle label:hover,.tema-chiaro .voto-stelle label:hover ~ label,
.tema-chiaro .voto-stelle input:checked ~ label{color:#e6a700}

/* ---------- pulsanti "segui su Instagram" a fine avventura ---------- */
.segui-ig{display:flex;gap:10px;margin:18px 0 4px}
.btn-ig{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 12px;border-radius:16px;text-decoration:none;color:var(--fg);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:13px;line-height:1.3;text-align:center}
.btn-ig svg{opacity:.92;flex:0 0 auto}
.btn-ig:hover{background:rgba(255,255,255,.14)}
.tema-chiaro .btn-ig{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}

/* ---------- logo della location: sempre in un rettangolo bianco arrotondato ---------- */
.con-logo-loc img.logo{background:#fff;border-radius:16px;padding:12px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);object-fit:contain;
  width:118px;height:auto;max-height:76px;filter:none!important}

/* ---------- modulo finale a 3 passi ---------- */
.modulo-passi fieldset.passo{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.modulo-passi fieldset.passo[hidden]{display:none}
.passi-testa{display:none}
.modulo-passi.js-passi .passi-testa{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.passi-barra{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.passi-barra span{display:block;height:100%;width:33%;border-radius:99px;background:var(--fg);
  transition:width .5s cubic-bezier(.16,.84,.3,1)}
.passi-conta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.passi-indietro{width:34px;height:34px;padding:0;border-radius:50%;background:transparent;color:var(--fg);
  border:1px solid rgba(255,255,255,.3);font-size:22px;line-height:1;visibility:hidden;flex:0 0 auto}
.passi-indietro.visibile{visibility:visible}
.tema-chiaro .passi-barra{background:rgba(0,0,0,.12)}
.tema-chiaro .passi-indietro{border-color:rgba(0,0,0,.25)}

.passo-domanda{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:4px 0 0}
.passo-sotto{font-size:14px;opacity:.7;margin:-6px 0 4px}
.nota-minori{font-size:13px;line-height:1.45;opacity:.6;margin:0}
.scelte-profilo{display:grid;gap:10px;margin:4px 0 4px}
.opz-profilo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:18px 20px;border-radius:18px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  transition:background .25s,border-color .25s,transform .2s cubic-bezier(.2,.7,.2,1);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.opz-profilo:active{transform:scale(.98)}
.opz-profilo input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opz-profilo .op-eti{font-size:19px;font-weight:600;letter-spacing:-.01em}
.opz-profilo .op-sub{font-size:14px;opacity:.65}
.opz-profilo.scelta,.opz-profilo:has(input:checked){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.opz-profilo.scelta .op-sub,.opz-profilo:has(input:checked) .op-sub{opacity:.8}
.opz-profilo:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:3px}
.tema-chiaro .opz-profilo{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.03)}

/* passaggio fra un passo e l'altro */
.passo.entra-avanti{animation:passo-avanti .45s cubic-bezier(.16,.84,.3,1) both}
.passo.entra-indietro{animation:passo-indietro .45s cubic-bezier(.16,.84,.3,1) both}
@keyframes passo-avanti{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes passo-indietro{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.modulo-passi.in-attesa button[type=submit]{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .passo.entra-avanti,.passo.entra-indietro{animation:none}
  .passi-barra span{transition:none}
}
/* dal passo 2 in poi resta solo la domanda del passo */
.riquadro-blocco.oltre-passo1 > .domanda{display:none}

/* spazio in fondo: il pulsante di enigmi, scelte e modulo finale non resta
   mai tagliato dal bordo dello schermo o dalla barra del telefono */
.contenuti .pannello.blocco{padding-bottom:70px}
.gioco{padding-bottom:env(safe-area-inset-bottom)}

/* avventure esterne: scelta lingua e pagina finale si usano anche da computer
   (la storia si gioca su un altro sito, che può non essere solo da telefono) */
@media (min-width:820px){
  .pagina-esterna .gioco{display:block;max-width:520px;margin:0 auto}
  .pagina-esterna .solo-mobile{display:none}
}

/* ---------- schermata del premio: festa + avviso ---------- */
.schermo-premio{position:relative;overflow:hidden}
.schermo-premio > *:not(.festa){position:relative;z-index:1}
.schermo-premio .festa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.medaglia{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 0 14px;
  color:#3a2600;background:radial-gradient(circle at 35% 30%,#ffe9a8,#f2b63c 60%,#d58f12);
  box-shadow:0 0 0 6px rgba(242,182,60,.18),0 12px 34px rgba(242,182,60,.35);
  animation:medaglia-entra .9s cubic-bezier(.2,1.4,.4,1) both, medaglia-brilla 2.6s 1s ease-in-out infinite}
@keyframes medaglia-entra{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes medaglia-brilla{0%,100%{box-shadow:0 0 0 6px rgba(242,182,60,.18),0 12px 34px rgba(242,182,60,.35)}
  50%{box-shadow:0 0 0 12px rgba(242,182,60,.08),0 12px 44px rgba(242,182,60,.55)}}
.schermo-premio h1{animation:premio-su .7s .25s cubic-bezier(.16,.84,.3,1) both}
.hai-vinto{margin:-2px 0 18px;font-size:17px;opacity:.8;animation:premio-su .7s .4s cubic-bezier(.16,.84,.3,1) both}
.schermo-premio .istruzioni{animation:premio-su .8s .6s cubic-bezier(.16,.84,.3,1) both}
@keyframes premio-su{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.non-chiudere{display:flex;gap:12px;align-items:flex-start;text-align:left;margin:16px 0 4px;padding:14px 16px;border-radius:16px;
  background:rgba(242,182,60,.14);border:1px solid rgba(242,182,60,.55);color:var(--fg);
  animation:premio-su .8s .9s cubic-bezier(.16,.84,.3,1) both}
.non-chiudere svg{flex:0 0 auto;color:#f2b63c;margin-top:1px}
.non-chiudere p{margin:0;font-size:15px;line-height:1.45}
.non-chiudere strong{display:block;font-size:16px}
.tema-chiaro .non-chiudere{background:rgba(214,143,18,.12);border-color:rgba(214,143,18,.6)}
.tema-chiaro .non-chiudere svg{color:#b97500}
@media (prefers-reduced-motion: reduce){
  .medaglia,.schermo-premio h1,.hai-vinto,.schermo-premio .istruzioni,.non-chiudere{animation:none}
  .schermo-premio .festa{display:none}
}

/* indizio a tempo: pulsante con conto alla rovescia */
.aiuto-box{margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.aiuto-box[hidden]{display:none}
.aiuto-btn{width:100%;padding:14px 22px}
button.aiuto-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.aiuto-etichetta{font-variant-numeric:tabular-nums}
.aiuto-barra{height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.aiuto-barra i{display:block;height:100%;width:0;background:var(--fg);border-radius:4px;transition:width 1s linear}
.aiuto-stato{font-size:14px;opacity:.65;margin:2px 0 0;text-align:center}
.indizio.appare{animation:media-appari .45s ease}
@media (prefers-reduced-motion:reduce){ .indizio.appare{animation:none} }

/* pulsante verso il modulo esterno: a tutta larghezza, ben visibile */
.btn-modulo{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;
  padding:20px 24px;font-size:19px;font-weight:600;background:var(--fg);color:var(--bg);
  box-shadow:0 0 0 6px rgba(255,255,255,.08),0 10px 30px rgba(255,255,255,.14)}
.btn-modulo .freccia{font-size:22px;line-height:1}
.nota-modulo{margin:12px 0 0;font-size:13px;opacity:.65;text-align:center}

/* ---------- scelta del personaggio: titolo in evidenza, animato ---------- */
.titolo-scelta-personaggio{margin:4px 0 22px;text-align:center;font-size:clamp(24px,7vw,30px);line-height:1.15;font-weight:800;letter-spacing:.01em}
.titolo-scelta-personaggio .parola{display:inline-block;white-space:nowrap}
.titolo-scelta-personaggio .lettera{display:inline-block;opacity:0;transform:translateY(14px);animation:personaggio-sali .6s ease forwards;animation-delay:calc(var(--i) * 45ms + 200ms)}
.titolo-scelta-personaggio .lucido{display:block;height:3px;margin:10px auto 0;width:0;border-radius:3px;background:linear-gradient(90deg,transparent,#c9a227,#f5d76e,#c9a227,transparent);animation:personaggio-lucido 1.1s ease .9s forwards,personaggio-lampo 3.2s ease-in-out 2.2s infinite}
@keyframes personaggio-sali{to{opacity:1;transform:translateY(0)}}
@keyframes personaggio-lucido{to{width:70%}}
@keyframes personaggio-lampo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.8) drop-shadow(0 0 6px #c9a227)}}
@media (prefers-reduced-motion:reduce){
  .titolo-scelta-personaggio .lettera,.titolo-scelta-personaggio .lucido{animation:none!important;opacity:1;transform:none;width:70%}
}

/* ---------- blocco enigma: niente box, titolo animato come "Scegli il tuo personaggio" ---------- */
.enigma-blocco .riquadro-enigma{border:0;border-top:2px solid var(--tinta-enigma,#c9a227);border-bottom:2px solid var(--tinta-enigma,#c9a227);
  border-radius:0;overflow:visible;margin:0 -26px;padding:30px 26px 26px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tinta-enigma,#c9a227) 16%,transparent),color-mix(in srgb,var(--tinta-enigma,#c9a227) 6%,transparent))}
.enigma-blocco .riquadro-enigma .domanda{color:#fff;font-size:19px;margin:0 0 18px}
.enigma-blocco .modulo input:not([type=checkbox]):not([type=radio]):not([type=hidden]){background:rgba(255,255,255,.08);border:1px solid color-mix(in srgb,var(--tinta-enigma,#c9a227) 60%,transparent)}
.enigma-blocco .modulo button[type=submit]{background:var(--tinta-enigma,#c9a227);color:#0B0B0B}
.enigma-blocco .riquadro-enigma:before{display:none}
.titolo-enigma{margin:0;font-size:20px;line-height:1.2;text-align:left;color:var(--tinta-enigma,#c9a227)}
.titolo-riga-enigma{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.icona-enigma{width:34px;height:34px;flex:0 0 34px;color:var(--tinta-enigma,#c9a227)}

/* ---------- blocco enigma: immagine extra e istruzione ---------- */
.immagine-extra{margin:0 0 14px}
.immagine-extra img{display:block;width:100%;height:auto;border-radius:14px}
.istruzione{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--tinta-enigma,#c9a227) 18%,transparent);border:1px solid var(--tinta-enigma,#c9a227)}
.istruzione svg{flex:0 0 22px;width:22px;height:22px;color:var(--tinta-enigma,#c9a227)}
.istruzione span{font-size:15px;font-weight:700;line-height:1.3}
.istruzione span b{color:var(--tinta-enigma,#c9a227);font-weight:800}
.codice-pallini{display:flex;justify-content:center;gap:12px;margin:6px 0 14px}
.codice-pallini .pallino{width:18px;height:18px;border-radius:50%;border:2px solid var(--tinta-enigma,#c9a227);background:transparent;transition:background .2s}
.codice-pallini .pallino.pieno{background:var(--tinta-enigma,#c9a227)}

/* ---------- barra di avanzamento della storia (bordo superiore del blocco enigma) ---------- */
.enigma-blocco .riquadro-enigma{border-top:0}
.progresso-storia{position:absolute;left:0;right:0;top:0;height:22px;background:rgba(201,162,39,.18);border-bottom:1px solid rgba(201,162,39,.35);overflow:hidden;z-index:1}
.progresso-storia .conto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none}
.progresso-storia i{display:block;position:absolute;left:0;top:0;bottom:0;height:auto;width:0;overflow:hidden;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,#8a6d1a,var(--tinta-enigma,#c9a227),#f5d76e);box-shadow:0 0 8px color-mix(in srgb,var(--tinta-enigma,#c9a227) 70%,transparent)}
.progresso-storia i::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
/* blocco enigma: l'animazione parte solo quando il blocco compare, ogni volta che il giocatore ci arriva */
.progresso-storia.anima i{animation:riempi-storia 1.6s cubic-bezier(.3,.7,.2,1) .3s both;animation-play-state:paused}
.progresso-storia.anima i::after{animation:lampo-storia .7s ease-out 1.9s both;animation-play-state:paused}
[data-rivela].visibile .progresso-storia.anima i,[data-rivela].visibile .progresso-storia.anima i::after{animation-play-state:running}
/* schermata di storia completata: barra piena, animata all'arrivo */
.progresso-storia.libero i,.progresso-storia.libero i::after{animation-play-state:running}
@keyframes riempi-storia{from{width:0}to{width:var(--p)}}
@keyframes lampo-storia{from{left:-40%;opacity:1}to{left:110%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .progresso-storia i,.progresso-storia i::after{animation:none!important;width:var(--p)}
  .progresso-storia i::after{display:none}
}

/* ---------- risposta sbagliata: il form trema e il campo diventa rosso per un attimo ---------- */
@keyframes scuoti-form{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}
  40%,60%{transform:translateX(8px)}
}
@keyframes rosso-campo{
  0%,100%{background-color:rgba(255,255,255,.08)}
  30%{background-color:rgba(229,72,77,.35)}
}
.modulo.scosso{animation:scuoti-form .5s cubic-bezier(.36,.07,.19,.97) both}
.modulo.scosso input[type=text],.modulo.scosso .campo-codice{animation:rosso-campo .5s ease both;border-color:#e5484d!important}
@media (prefers-reduced-motion:reduce){
  .modulo.scosso,.modulo.scosso input[type=text],.modulo.scosso .campo-codice{animation:none}
}


/* ===== Finali: stesso stile del blocco enigma ===== */
.finale-blocco .riquadro-blocco{border:0;border-top:2px solid var(--tinta-fin,#c9a227);border-bottom:2px solid var(--tinta-fin,#c9a227);border-radius:0;margin:0 -26px;padding:30px 26px 26px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tinta-fin,#c9a227) 16%,transparent),color-mix(in srgb,var(--tinta-fin,#c9a227) 6%,transparent))}
.finale-blocco .occhiello{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:0;text-transform:none;opacity:1;color:var(--tinta-fin,#c9a227)}
.finale-blocco .icona-blocco{width:34px;height:34px;flex:0 0 34px;background:var(--tinta-fin,#c9a227);color:#0B0B0B;font-size:17px}
.finale-blocco .domanda{color:#fff;font-size:19px;margin:0 0 18px}
.finale-blocco .btn-esterno{background:var(--tinta-fin,#c9a227);color:#0B0B0B}
.finale-blocco .modulo input:not([type=checkbox]):not([type=radio]):not([type=hidden]){background:rgba(255,255,255,.08);border:1px solid color-mix(in srgb,var(--tinta-fin,#c9a227) 60%,transparent)}
.finale-blocco .modulo button[type=submit]{background:var(--tinta-fin,#c9a227);color:#0B0B0B}

/* Finale esterno: rimbalzo del blocco, icona che scatta, coriandoli (vedi gioco.js) */
[data-rivela].visibile .finale-festa .riquadro-blocco{animation:rimbalzo-finale .9s cubic-bezier(.3,.7,.3,1) .1s both}
[data-rivela].visibile .finale-festa .icona-blocco{animation:pulsa-finale .9s ease-out .4s both}
@keyframes rimbalzo-finale{0%{transform:translateY(-40px) scale(.96);opacity:0}45%{transform:translateY(8px) scale(1.02);opacity:1}70%{transform:translateY(-4px) scale(.995)}100%{transform:translateY(0) scale(1)}}
@keyframes pulsa-finale{0%{transform:scale(.6) rotate(-20deg)}60%{transform:scale(1.2) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.finale-festa .coriandoli{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.finale-festa .coriandoli i{position:absolute;top:-20px;width:var(--w,8px);height:var(--h,12px);background:var(--c);border-radius:2px;opacity:0;
  animation:cade-finale var(--d,2.6s) cubic-bezier(.25,.6,.4,1) var(--r,0s) forwards}
@keyframes cade-finale{0%{transform:translate(0,0) rotate(0deg);opacity:1}80%{opacity:1}100%{transform:translate(var(--x,0px),420px) rotate(var(--rot,720deg));opacity:0}}
@media (prefers-reduced-motion: reduce){
  .finale-festa .riquadro-blocco,.finale-festa .icona-blocco{animation:none!important}
  .finale-festa .coriandoli{display:none}
}

/* Schermata Complimenti: etichetta evidenziata e istruzioni più grandi */
.schermo-premio .istruzioni .occhiello{display:inline-block;margin:0 0 12px;padding:6px 12px;border-radius:999px;background:var(--tinta-fin,#c9a227);color:#0B0B0B;font-size:13px;font-weight:800;letter-spacing:.14em;opacity:1}
.schermo-premio .istruzioni p:not(.occhiello){font-size:21px;line-height:1.45;color:#fff;font-weight:500}