:root{
  --bg:#1b1410; --panel:rgba(24,18,14,.94); --line:#4a3a2c; --txt:#f3e6d4; --dim:#b9a58c;
  --acc:#f08a3c; --ok:#7cc46a; --bad:#e2554a; --warn:#f3c24b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;color:var(--txt);
  font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(#e7a56c 0%,#c9774a 28%,#7a4632 52%,#2a1c14 70%,#1b1410 100%);
  user-select:none;-webkit-user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}

#top{position:fixed;top:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;background:linear-gradient(rgba(20,14,10,.85),rgba(20,14,10,.55));
  pointer-events:auto;z-index:5}
.res{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;font-weight:700;font-size:14px;cursor:pointer}
.res b{font-size:14px}
.res small{font-weight:600;font-size:11px;opacity:.85}
.res small.neg{color:var(--bad)} .res small.pos{color:var(--ok)}
.res span.zero{color:var(--bad)}
.res.giorno{color:var(--acc)}

#avvisi{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 82px);
  display:flex;flex-direction:column;gap:6px;align-items:center;z-index:6;width:min(94vw,460px)}
.avviso{width:100%;padding:9px 12px;border-radius:12px;font-weight:700;text-align:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.avviso.warn{background:#7a1f18;border:1px solid #e2554a;animation:pulse 1s infinite alternate}
.avviso.porta{background:#3d5a2a;border:1px solid var(--ok)}
@keyframes pulse{to{background:#a2281e}}

#ticker{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 70px);
  width:min(94vw,460px);text-align:center;font-size:14px;padding:7px 12px;border-radius:12px;
  background:rgba(20,14,10,.8);border:1px solid var(--line);opacity:0;transition:opacity .4s;pointer-events:none;z-index:4}
#ticker.on{opacity:1}
#ticker.warn{border-color:var(--bad)} #ticker.ok{border-color:var(--ok)}

#bottom{position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;justify-content:center;
  padding:8px 10px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(transparent,rgba(20,14,10,.85));z-index:5}
button{font:inherit;color:var(--txt);background:#3a2b20;border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;font-weight:700;cursor:pointer}
button:active{transform:scale(.97)}
button:disabled{opacity:.45}
button.primario{background:var(--acc);border-color:#ffb27a;color:#1b1009}
button.rosso{background:#6e2420;border-color:var(--bad)}
#liberi{background:var(--warn);color:#1b1009;border-radius:999px;padding:0 6px;font-size:12px}
#liberi:empty{display:none}

#sheet{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:10;
  background:rgba(0,0,0,.25)}
#sheet[hidden]{display:none}
.sheet-in{position:relative;width:min(100vw,520px);max-height:74vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;
  padding:16px 16px calc(env(safe-area-inset-bottom) + 18px);box-shadow:0 -8px 30px rgba(0,0,0,.5)}
.sheet-in .x{position:absolute;top:10px;right:10px;padding:6px 11px;background:transparent}
h2{margin:0 36px 4px 0;font-size:20px}
h3{margin:14px 0 6px;font-size:15px;color:var(--acc)}
p{margin:6px 0}
.dim{color:var(--dim);font-size:13px}
.lista{display:flex;flex-direction:column;gap:6px}
.riga{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);text-align:left;width:100%;font-weight:600}
.riga .ico{font-size:24px;width:30px;text-align:center}
.riga .tx{flex:1;min-width:0}
.riga .tx small{display:block;color:var(--dim);font-weight:500}
.riga .dx{font-weight:800;white-space:nowrap}
.riga.match{border-color:var(--ok)}
.barra{height:6px;background:#3a2b20;border-radius:4px;overflow:hidden;margin-top:3px}
.barra i{display:block;height:100%;background:var(--ok)}
.barra i.basso{background:var(--bad)}
.bottoni{display:flex;gap:8px;margin-top:14px}
.bottoni button{flex:1}
.indizio{border-left:3px solid var(--warn);padding:6px 10px;background:rgba(243,194,75,.08);border-radius:6px;font-style:italic}
.storia{font-style:italic;color:#e8d6bd}

#flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;z-index:9}
#flash.rosso{background:rgba(200,30,20,.45);opacity:1;transition:none}
#flash.verde{background:rgba(90,200,80,.3);opacity:1;transition:none}