:root{--bg:#1b1b2f;--card:#26264a;--fg:#f4f4ff;--mut:#9a9ac4;--acc:#ffb300;--ok:#2ecc71;--bad:#ff5252}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;touch-action:manipulation}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.hidden{display:none!important}
.screen{min-height:100%;max-width:520px;margin:0 auto;padding:24px 16px calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
#home{justify-content:center;text-align:center;gap:16px}
.logo{font-size:3rem;margin:0;font-weight:900;letter-spacing:-1px}
.logo span{color:var(--acc)}
.sub{color:var(--mut);margin:0 0 8px}
h2,h3{margin:8px 0 0}
label{color:var(--mut);font-size:.85rem;margin-top:6px}
label small{opacity:.7}
input{width:100%;padding:12px;border-radius:10px;border:2px solid #3a3a6a;background:var(--card);color:var(--fg);font-size:1.1rem}
input:focus{outline:none;border-color:var(--acc)}
#jcode{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:700}
.btn{border:0;border-radius:14px;padding:14px 18px;font-size:1rem;font-weight:700;background:var(--acc);color:#222;cursor:pointer}
.btn.big{font-size:1.25rem;padding:18px}
.btn.alt{background:var(--card);color:var(--fg);border:2px solid #3a3a6a}
.btn.link{background:none;color:var(--mut);font-weight:500}
.btn:active{transform:scale(.97)}
.chip{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:10;border:0;border-radius:20px;padding:6px 12px;background:var(--card);color:var(--fg);font-weight:700}
.conn{position:fixed;top:0;left:0;right:0;z-index:20;text-align:center;background:var(--bad);padding:4px;font-size:.85rem}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:12px;border-radius:10px;border:2px solid #3a3a6a;background:var(--card);color:var(--fg);font-weight:700}
.seg button.on{border-color:var(--acc);color:var(--acc)}
.hint{color:var(--mut);font-size:.85rem;margin:0}
.topline{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:1.1rem}
.badge{background:var(--card);border-radius:12px;padding:4px 10px;font-size:.8rem;color:var(--mut)}
.code{font-size:3.2rem;font-weight:900;letter-spacing:10px;text-align:center;color:var(--acc)}
#qr{display:flex;justify-content:center;padding:8px}
#qr img,#qr canvas{background:#fff;padding:8px;border-radius:10px}
.plist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;background:var(--card);padding:8px 12px;border-radius:10px}
.plist li.off{opacity:.45}
.plist svg{width:28px;height:28px;flex:none}
.bar{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.status{text-align:center;font-size:1.4rem;font-weight:700;padding:14px;border-radius:14px;background:var(--card)}
.status.open{background:var(--ok);color:#06361a}
.winner{text-align:center;padding:16px;border-radius:16px;background:var(--card);animation:pop .35s ease-out}
.winner svg{width:150px;height:150px}
.winner .wl{font-size:2rem;font-weight:900;margin-top:6px;word-break:break-word}
.winner .wm{color:var(--mut);margin-top:2px}
.winner.me{background:var(--ok);color:#06361a}
.winner.me .wm{color:#0a5a2c}
.swatches,.shapes,.sounds{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{width:38px;height:38px;border-radius:50%;border:3px solid transparent}
.swatches button.on{border-color:#fff}
.swatches input{width:38px;height:38px;padding:0;border:0;background:none}
.shapes button{width:54px;height:54px;border-radius:12px;border:2px solid #3a3a6a;background:var(--card);padding:6px}
.shapes button.on{border-color:var(--acc)}
.shapes svg{width:100%;height:100%}
.sounds{flex-direction:column;flex-wrap:nowrap;gap:6px}
.srow{display:flex;gap:6px}
.srow button{border:2px solid #3a3a6a;background:var(--card);color:var(--fg);font-size:1rem;border-radius:12px;padding:10px 14px}
.srow .play{flex:none;width:50px;color:var(--acc)}
.srow .pick{flex:1;text-align:left}
.srow.on .pick{border-color:var(--acc);color:var(--acc);font-weight:700}
.preview{display:flex;justify-content:center}
.preview svg{width:90px;height:90px}
.error{color:var(--bad);min-height:1.2em;margin:0;text-align:center}
.buzzwrap{flex:1;display:flex;align-items:center;justify-content:center}
#buzz{width:min(86vw,60vh,420px);aspect-ratio:1;border:0;background:none;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 12px 0 rgba(0,0,0,.35));transition:transform .05s,filter .05s}
#buzz svg{width:100%;height:100%;display:block}
#buzz:active,#buzz.down{transform:translateY(10px);filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
#buzz.locked{opacity:.35;filter:none}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.logoimg{width:160px;height:160px;margin:0 auto -8px;display:block}
.srow .play:active,.srow .pick:active{background:#3a3a6a}
.srow .play.playing{background:var(--acc);color:#222;border-color:var(--acc)}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.modal .box{background:var(--card);border-radius:18px;padding:20px;max-width:480px;width:100%;display:flex;flex-direction:column;gap:12px}
.modal ol{margin:0;padding-left:22px;line-height:1.5}
.modal li{margin-bottom:6px}
.modal .ic{display:inline-block;border:1px solid var(--mut);border-radius:6px;padding:0 6px}
#install{background:none;border:2px dashed #3a3a6a;color:var(--mut)}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#14142a;border-top:1px solid #3a3a6a;padding-bottom:env(safe-area-inset-bottom)}
#tabbar button{flex:1;border:0;background:none;color:var(--mut);padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;font-weight:600}
#tabbar .ti{font-size:1.4rem;line-height:1;filter:grayscale(1);opacity:.7}
#tabbar button.on{color:var(--acc)}
#tabbar button.on .ti{filter:none;opacity:1}
.mybuzz{display:flex;align-items:center;gap:12px}
.mybuzz .btn{flex:1}
.mybuzz .preview svg{width:64px;height:64px}