:root{--notte:#080b11;--blu:#18213e;--crema:#f1ead9;--carta:#e9d7b4;--rosso:#d6372f;--ink:#0b0b0a;--ombra:#7b6245;--fa:'Anton',Impact,sans-serif;--fb:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--notte);color:var(--crema);font-family:var(--fb);overflow:hidden}
button{font:inherit;color:inherit}
body{-webkit-font-smoothing:antialiased}
svg{display:block}
.ic{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.app{display:grid;grid-template-rows:auto minmax(0,300px) auto minmax(0,1fr) auto;height:100dvh;max-width:560px;margin:0 auto}
#cancella{min-height:44px;padding:8px;border:0;background:var(--notte);color:var(--crema);font:600 16px var(--fb);text-decoration:underline;cursor:pointer}
#cancella:focus-visible{outline:3px solid var(--rosso);outline-offset:-3px}

/* in alto, su carta: testata + palco del ritratto, sempre fermi */
.fondo{background:var(--carta);color:var(--ink)}
.testa{display:flex;align-items:center;gap:12px;padding:10px 16px 0}
.tondo{cursor:pointer;padding:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:var(--crema);color:var(--ink)}
.tondo svg{width:22px;height:22px}
.tondo[hidden]{display:none}
.marca{font:400 30px/1 var(--fa);letter-spacing:.02em;text-transform:uppercase;flex:1}
.chips{display:flex;align-items:center;gap:6px;font:700 22px/1 var(--fb);font-variant-numeric:tabular-nums}
.chips svg{width:26px;height:26px}
.palco{display:grid;grid-template-columns:auto 1fr;gap:6px;padding:4px 16px 0;min-height:0}
.ritratto{display:block;min-height:0;align-self:end;height:100%;max-height:300px;aspect-ratio:2/3;background:#0b0b0a14}
.palco img{display:block;height:100%;width:100%;object-fit:cover}
.lato{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-bottom:10px;min-width:0}
.anello{position:relative;width:112px;height:112px;align-self:center}
.anello svg{width:100%;height:100%;transform:rotate(-90deg)}
.anello circle{fill:none;stroke-width:11}
.anello .tr{stroke:#0b0b0a22}
.anello .pr{stroke:var(--rosso);stroke-linecap:butt;stroke-dasharray:calc(263.9px * var(--xp,0)) 999}
.anello b{position:absolute;inset:0;display:grid;place-items:center;font:400 54px/1 var(--fa);color:var(--ink)}
.anello b::before{content:"";position:absolute;width:62px;height:62px;border:3px solid var(--ink);border-radius:15px;background:var(--rosso);transform:rotate(-7deg);box-shadow:3px 3px 0 var(--ink);z-index:0}
.anello b span{position:relative;z-index:1;color:#fff}
.nome{font:400 40px/.95 var(--fa);text-transform:uppercase;text-align:center;letter-spacing:.02em}
.stat{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat li{display:flex;align-items:center;gap:5px;padding:5px 6px;border:2px solid var(--ink);border-radius:10px;background:#fff6e2}
.stat svg{width:20px;height:20px;flex:none}
.stat b{font:700 22px/1 var(--fb);font-variant-numeric:tabular-nums}

/* le quattro ante */
.dock{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);border-top:3px solid var(--ink)}
.ante{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 9px;color:var(--crema);border-top:6px solid transparent;margin-top:-3px}
.ante svg{width:30px;height:30px}
.ante em{font:700 20px/1 var(--fb);font-style:normal;font-variant-numeric:tabular-nums;opacity:.7}
.ante[aria-selected=true]{background:var(--notte);border-top-color:var(--rosso)}
.ante[aria-selected=true] em{opacity:1}
.ante:focus-visible{outline:3px solid var(--crema);outline-offset:-5px}
.pannello{min-height:0;overflow:auto;background:var(--notte);padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.pannello.anim{animation:su .22s ease-out}
.pannello[hidden]{display:none}
@keyframes su{from{opacity:0;transform:translateY(14px)}}

/* ante: dadi */
.vedi{position:relative;isolation:isolate;overflow:hidden;border:2px solid var(--blu);border-radius:14px;background:var(--blu) var(--img) center/cover no-repeat;padding:0;display:block;width:100%;cursor:pointer}
.vedi:disabled{cursor:not-allowed}
.vedi:focus-visible,.tondo:focus-visible,.ritratto:focus-visible{outline:3px solid var(--rosso);outline-offset:2px}
.grande{aspect-ratio:3.1/1;border-color:var(--crema);box-shadow:0 0 0 4px var(--crema) inset}
.altri{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.altri .vedi{aspect-ratio:2.6/1}
.no{filter:grayscale(1) contrast(1.35) brightness(.7)}
.luc{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);border:2px solid var(--crema)}
.luc svg{width:16px;height:16px;color:var(--crema)}
.sp{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rosso);border:2px solid var(--crema)}
.sp svg{width:17px;height:17px;color:#fff;stroke-width:3.6}

/* ante: missioni */
.miss{display:grid;gap:8px}
.m{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;padding:6px 12px 6px 6px;border:2px solid var(--crema);border-radius:13px;background:var(--blu)}
.ill{position:relative;display:grid;place-items:center;width:50px;height:50px;border:3px solid var(--ink);border-radius:10px;background:var(--carta);color:var(--ink);overflow:hidden}
.ill svg{width:32px;height:32px}
.ill.d5{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1px;padding:2px}
.ill.d5 svg{width:12px;height:12px}
.ill.fac{display:block}
.ill.fac i{position:absolute;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--carta) var(--r) 50% 4.5%/420% auto}
.ill.fac i:nth-child(1){left:0;top:0}.ill.fac i:nth-child(2){right:0;top:0}.ill.fac i:nth-child(3){left:11px;bottom:0}
.barra{display:flex;gap:3px}
.barra i{flex:1;height:14px;border:2px solid var(--crema);border-radius:4px;background:#10162b}
.barra i.p{background:var(--rosso)}
.num{margin-top:4px;font:700 18px/1 var(--fb);font-variant-numeric:tabular-nums;opacity:.8}
.prem{display:flex;align-items:center;gap:4px;font:700 22px/1 var(--fb);font-variant-numeric:tabular-nums}
.prem svg{width:24px;height:24px}
.m.fatta{background:#10162b;border-color:#f1ead988}
.m.fatta .prem{opacity:.5}.m.fatta .ill{filter:grayscale(.4)}
.m.acc .prem{opacity:1}
/* moneta appena accreditata: si accende una volta, senza testo */
.m.nuova .prem svg{animation:accesa 1.4s ease-out 1}
@keyframes accesa{0%{transform:scale(.6);filter:brightness(2.4) drop-shadow(0 0 0 #ffd24a)}40%{transform:scale(1.5);filter:brightness(1.8) drop-shadow(0 0 8px #ffd24a)}100%{transform:scale(1);filter:none}}
@media (prefers-reduced-motion:reduce){.m.nuova .prem svg{animation:none}}
.m .sp{inset:auto 0 0 auto;right:0;top:auto;bottom:0;width:20px;height:20px;border-radius:7px 0 0 0;border:0;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.m .sp svg{width:12px;height:12px}

/* ante: trofei */
.tro{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.t{position:relative;aspect-ratio:1;border:2px solid var(--crema);border-radius:12px;overflow:hidden;background:var(--blu)}
.t img{display:block;width:100%;height:100%;object-fit:cover}
.t.no{filter:none;border-color:var(--blu)}
.t.no img{filter:grayscale(1) brightness(.28) contrast(1.2)}
.t .luc{inset:0;margin:auto;width:34px;height:34px}
.t .luc svg{width:18px;height:18px}
.t .sp{right:4px;top:4px;width:22px;height:22px}.t .sp svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.pannello.anim{animation:none}}
.chips{min-width:0}

.ante small{opacity:.55;font-size:inherit}

/* ante: suoni (copertine quadrate; stato = bordo e spunta, bloccato = grigio e lucchetto) */
.suoni{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.suoni .vedi{aspect-ratio:1}
.suoni .scelto{border-color:var(--crema);box-shadow:0 0 0 3px var(--crema) inset}
.suoni .ascolto{outline:3px solid var(--rosso);outline-offset:2px}
.seg{position:absolute;left:6px;bottom:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);border:2px solid var(--crema)}
.seg svg{width:16px;height:16px;color:var(--crema)}
.suoni .no .seg{opacity:.9}
.suoni .luc{right:6px;bottom:6px}
.profilo-avviso{flex:none;display:flex;align-items:center;gap:8px;padding:8px;color:var(--ink)}
.profilo-avviso[hidden],.profilo-avviso button[hidden]{display:none}
.profilo-avviso p{flex:1;margin:0}
.profilo-avviso button{min-height:44px;padding:8px;border:2px solid var(--crema);border-radius:8px;background:var(--ink);color:var(--crema);font:inherit}
.profilo-avviso button:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}

#link-manuale{flex:1;min-width:0;min-height:44px;padding:8px;border:2px solid var(--ink);border-radius:8px;background:var(--crema);color:var(--ink);font:inherit}#link-manuale[hidden]{display:none}