:root{
  --fondo:#2B0F3A;--fondo2:#4A1646;--carta:#ffffff14;--linea:#ffffff26;
  --testo:#FFF3E8;--tenue:#E3C9D8;--sole:#FFC857;--corallo:#FF7A59;--rosa:#E8366F;--menta:#3CE0A8;
  --r:20px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(120% 70% at 20% -10%,#8A1F5C 0%,transparent 60%),radial-gradient(100% 60% at 100% 110%,#C24A2E66 0%,transparent 60%),var(--fondo);
  background-attachment:fixed;color:var(--testo);
  font:16px/1.45 "Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;
}
#app{max-width:520px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(70px + env(safe-area-inset-bottom))}
.scena{animation:entra .32s ease both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
h1{font:800 clamp(2.5rem,12vw,3.4rem)/1 Georgia,"Times New Roman",serif;letter-spacing:-.03em;margin:22px 0 10px}
h1 em{color:var(--sole);font-style:italic}
h2{font:800 1.75rem/1.12 Georgia,serif;letter-spacing:-.02em;margin:6px 0 8px}
p{margin:6px 0}
.tenue{color:var(--tenue)}
.piccolo{font-size:14px}
.carta{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);padding:16px;margin:14px 0;backdrop-filter:blur(6px)}
input{width:100%;font:600 18px/1.2 inherit;font-family:inherit;color:var(--testo);background:#0003;border:1.5px solid var(--linea);border-radius:14px;padding:14px;margin:6px 0;outline:0}
input:focus{border-color:var(--sole)}
input::placeholder{color:#e3c9d899}
#cd{text-transform:uppercase;letter-spacing:.3em;text-align:center}
#cd::placeholder{letter-spacing:normal;text-transform:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.btn{display:block;width:100%;font-weight:800;font-size:17px;padding:15px;border-radius:15px;margin-top:8px;background:linear-gradient(180deg,#FFD97A,var(--sole));color:#3A1600;box-shadow:0 4px 0 #B9851B;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #B9851B}
.btn.sec{background:#ffffff1a;color:var(--testo);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--sole);outline-offset:2px}
.lingue{display:flex;justify-content:flex-end;gap:6px}
.lingue button{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:700;color:var(--tenue);border:1px solid var(--linea)}
.lingue button[aria-current=true]{background:var(--sole);color:#3A1600;border-color:var(--sole)}
.oppure{display:flex;align-items:center;gap:10px;color:var(--tenue);font-size:13px;margin:12px 0 6px}
.oppure:before,.oppure:after{content:"";flex:1;height:1px;background:var(--linea)}
.regole{margin:8px 0 0;padding-left:20px;font-size:14.5px;color:var(--tenue)}
.regole li{margin:5px 0}
.errore{background:#E8366F33;border:1px solid var(--rosa);border-radius:12px;padding:9px 12px;margin:10px 0;font-size:14.5px}
.codice{font:800 3.1rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--sole);text-align:center;margin:6px 0}
.qr{max-width:190px;margin:12px auto 4px;text-align:center}
.qr svg{display:block;width:100%;border-radius:12px}
.gente{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.gente li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0002;border-radius:12px}
.gente .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.gente .via{opacity:.5}
.tondo{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-weight:800;font-size:14px;color:#3A1600}
.tag{font-size:12px;color:var(--tenue)}
.scelta{display:flex;gap:6px;margin-top:6px}
.scelta button{flex:1;padding:9px;border-radius:11px;font-weight:700;background:#0002;box-shadow:inset 0 0 0 1px var(--linea)}
.scelta button[aria-pressed=true]{background:var(--sole);color:#3A1600}
.testa{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--tenue);font-weight:600}
.barra{height:7px;border-radius:9px;background:#0004;overflow:hidden;margin:9px 0 15px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--corallo),var(--sole));border-radius:9px;transform-origin:left;width:100%}
.barra.poco i{background:var(--rosa)}
.chi{display:flex;align-items:center;gap:10px;margin:2px 0 8px;font-weight:800}
.titolo{font:800 clamp(1.65rem,7vw,2.15rem)/1.13 Georgia,serif;letter-spacing:-.02em;margin:6px 0 14px}
.opzioni{display:grid;gap:10px}
.opzione{display:flex;align-items:center;gap:12px;text-align:left;font-weight:700;font-size:17px;padding:14px;border-radius:16px;background:#ffffff17;box-shadow:inset 0 0 0 1.5px var(--linea);transition:transform .08s,background .15s}
.opzione:active{transform:scale(.985)}
.opzione b{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#0003;font-size:14px}
.opzione.mia{background:var(--sole);color:#3A1600;box-shadow:none}
.opzione.mia b{background:#3A160022}
.opzione.giusta{background:var(--menta);color:#06301F;box-shadow:none;animation:pop .38s cubic-bezier(.3,1.6,.5,1) both}
.opzione.giusta b{background:#06301F22}
.opzione.spenta{opacity:.5}
.opzione .chiha{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}
.opzione .chiha .tondo{width:24px;height:24px;font-size:11px}
@keyframes pop{from{transform:scale(.92)}to{transform:none}}
.esito{text-align:center;font-weight:800;margin:14px 0 2px}
.suspense .opzione{animation:batte .62s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes batte{50%{background:#ffffff33;transform:scale(1.015)}}
.mio{text-align:center;font:800 1.5rem/1.15 Georgia,serif;margin:16px 0 0;color:var(--tenue);animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
.mio.bene{color:var(--menta)}
.opzione.giusta{box-shadow:0 0 26px #3ce0a866}
.classifica{counter-reset:p}
.classifica .punti{font-weight:800;color:var(--sole)}
.podio{text-align:center;padding:14px 0 4px}
.podio .tondo{width:76px;height:76px;font-size:30px;margin:0 auto 10px;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.coriandoli{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.coriandoli i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:cade 2.8s linear forwards}
@keyframes cade{to{transform:translateY(112vh) rotate(620deg)}}
#off{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:92vw;background:var(--rosa);color:#fff;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:12px;display:none;z-index:20}
#off.on{display:block}