:root{--bg:#14102b;--ink:#fff4e6;--m:#ff4fa3;--e:#3de7ff;--w:#ffc94a;--panel:#241c4d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* height:100% resta come ripiego per i browser più vecchi; dove è supportata, 100svh usa l'altezza
   "piccola" dello schermo (quella con la barra del browser visibile) e NON cambia quando la barra
   appare o scompare durante il gioco, evitando che il layout si sposti a ogni tocco. */
html,body{margin:0;height:100%;height:100svh;background:#0b0818;color:var(--ink);font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none}
#app{position:relative;height:100%;height:100svh;max-width:480px;margin:0 auto;background:var(--bg)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov{z-index:2;position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(20,16,43,.88);text-align:center}
.ov.on{display:flex}
h1{margin:0;font-size:clamp(72px,24vw,112px);line-height:.9;letter-spacing:.02em;font-weight:700}
h1 span:nth-child(1){color:var(--m)}h1 span:nth-child(2){color:var(--e)}h1 span:nth-child(3){color:var(--w)}
h2{margin:0;font-size:32px}
p{margin:0;opacity:.85;line-height:1.35;max-width:32ch;overflow-wrap:anywhere}
input{font:inherit;font-size:20px;text-align:center;width:220px;padding:10px 14px;border-radius:14px;border:2px solid #4b3f92;background:var(--panel);color:var(--ink)}
input:focus{outline:3px solid var(--e);border-color:var(--e)}
button{font:inherit;font-weight:700;font-size:22px;padding:12px 40px;border:0;border-radius:999px;background:var(--m);color:#2a0b1d;cursor:pointer;box-shadow:0 6px 0 #a02b6b}
button:active{transform:translateY(4px);box-shadow:0 2px 0 #a02b6b}
button:focus-visible{outline:3px solid var(--w);outline-offset:3px}
ol{margin:0;padding:0;list-style:none;width:100%;max-width:280px;font-size:18px}
li{display:flex;justify-content:space-between;padding:4px 10px;border-radius:8px}
li:nth-child(odd){background:rgba(255,255,255,.05)}
li b{color:var(--w)}
.how{font-size:15px;opacity:.7}
#install{display:none;background:var(--e);box-shadow:0 6px 0 #1a93a6;font-size:16px;padding:8px 24px}
#install:active{box-shadow:0 2px 0 #1a93a6}
.ov{overflow-y:auto;justify-content:safe center}
.row2{display:flex;gap:12px}
.sec{font-size:16px;padding:8px 22px;background:#3a2f7a;color:var(--ink);box-shadow:0 4px 0 #1b1440}
.sec:active{box-shadow:0 1px 0 #1b1440}
#opts{z-index:3;background:#14102b}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:300px;padding:10px 4px;font-size:19px;border-bottom:1px solid rgba(255,255,255,.08)}
.opt input[type=checkbox]{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:999px;background:#3a2f7a;position:relative;cursor:pointer;transition:background .15s;flex:none}
.opt input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:transform .15s}
.opt input[type=checkbox]:checked{background:var(--m)}
.opt input[type=checkbox]:checked::after{transform:translateX(22px)}
.opt input[type=checkbox]:focus-visible,.opt input[type=range]:focus-visible{outline:3px solid var(--e);outline-offset:3px}
.opt input[type=range]{width:150px;accent-color:var(--m)}
#toast{position:absolute;z-index:9;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-20px);background:var(--panel);border:2px solid var(--e);padding:8px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s}
#toast.on{opacity:1;transform:translate(-50%,0)}
li.me{background:rgba(255,79,163,.28)!important}
.err{color:#ff8a8a;min-height:1.2em;font-size:15px}
.link{background:none;box-shadow:none;color:var(--e);font-size:14px;padding:0;text-decoration:underline;border-radius:4px}
.link:active{transform:none;box-shadow:none}
.acct{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.acct h3{margin:0;font-size:18px;opacity:.8}
.code{font-size:24px;font-weight:700;letter-spacing:.06em;color:var(--w);min-height:1.3em;word-break:break-all}
#mute{position:absolute;z-index:5;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--ink);box-shadow:none;display:grid;place-items:center;opacity:.6}
#mute:active{transform:none;box-shadow:none;opacity:1}
#mute svg{width:22px;height:22px}
#mute .x{display:none}#mute.off .wave{display:none}#mute.off .x{display:inline}
#app{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Elementi "sonda", invisibili: servono solo a leggere in pixel le safe area di iOS,
   perché una custom property CSS con env() non si legge risolta in JS. */
.safe-probe{position:fixed;left:0;width:1px;visibility:hidden;pointer-events:none}
#sp-top{top:0;height:env(safe-area-inset-top,0px)}
#sp-bottom{bottom:0;height:env(safe-area-inset-bottom,0px)}