:root{--bg1:#101331;--bg2:#2a2650;--bg3:#4a3a68;--panel:#221d40ee;--line:#453a66;--text:#e8e0f0;--dim:#9a8fb8;--accent:#ffb85c;--accent-dark:#2a2344;--rose:#ff8fa3;--mint:#7fe3c9;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--hud:44px}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{height:100%;overscroll-behavior:none}body{position:fixed;inset:0;width:100%;background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);color:var(--text);overflow:hidden;font-family:Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}#stage{position:fixed;inset:0;padding:calc(var(--hud) + var(--sat) + 6px) calc(8px + var(--sar)) calc(64px + var(--sab)) calc(8px + var(--sal))}#arena{width:100%;height:100%;display:flex;align-items:center;justify-content:center}canvas#game{max-width:100%;max-height:100%}#hud{position:fixed;top:0;left:0;right:0;height:calc(var(--hud) + var(--sat));padding:var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal));display:flex;align-items:center;gap:10px;background:#191c38cc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:5}#logo{font-weight:600;letter-spacing:.34em;font-size:13px;color:var(--accent);white-space:nowrap;padding-left:.34em}#clock{font-size:12px;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}#chips{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#chips::-webkit-scrollbar{display:none}.chip{display:flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:20px;font-size:11px;white-space:nowrap;background:#26214a}.chip .dot{width:9px;height:9px;border-radius:50%;flex:none}.chip.me{border-color:var(--accent)}.chip .sc{color:var(--dim);font-variant-numeric:tabular-nums}#status{font-size:10px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:6px}#statdot{width:8px;height:8px;border-radius:50%;background:var(--rose);flex:none}#statdot.on{background:var(--mint)}button{font-family:inherit;font-size:12px;letter-spacing:.14em;color:var(--accent-dark);background:var(--accent);border:none;border-radius:22px;padding:11px 20px;cursor:pointer;text-transform:uppercase;font-weight:600;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:active{transform:translateY(1px)}button:hover:not(:disabled){background:#ffca7f}button:disabled{opacity:.4;cursor:default}button.big{font-size:14px;padding:14px 34px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:calc(var(--sat) + 10px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);background:#12102666;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 30px;display:flex;flex-direction:column;gap:16px;align-items:center;min-width:290px;max-width:100%;max-height:100%;overflow-y:auto;box-shadow:0 18px 50px #05040f88}.title{font-size:30px;font-weight:600;letter-spacing:.44em;color:var(--accent);padding-left:.44em}.title .p{color:var(--mint)}.sub{font-size:11px;color:var(--dim);letter-spacing:.22em;text-transform:uppercase}input#nick{font-family:inherit;font-size:16px;text-align:center;letter-spacing:.1em;color:var(--text);background:#191634;border:1px solid var(--line);border-radius:22px;padding:12px 14px;width:230px;outline:none}input#nick:focus{border-color:var(--accent)}#roster{display:flex;flex-direction:column;gap:6px;width:100%;max-height:38vh;overflow-y:auto}.rrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 12px;background:#191634;border:1px solid var(--line);border-radius:12px}.rrow .dot{width:12px;height:12px;border-radius:50%;flex:none}.rrow .hostb{margin-left:auto;font-size:9px;color:var(--mint);letter-spacing:.15em}.hint{font-size:10.5px;color:var(--dim);text-align:center;line-height:1.8}#bigmsg{font-size:min(40px,8.5vw);font-weight:600;letter-spacing:.14em;text-align:center;text-shadow:0 0 24px #00000088}#submsg{font-size:13px;color:var(--text);letter-spacing:.1em;text-align:center}.hidden{display:none!important}#copybtn{font-size:10px;padding:7px 12px}#toast{position:fixed;bottom:calc(76px + var(--sab));left:50%;transform:translate(-50%);background:#221d40;border:1px solid var(--line);max-width:90vw;color:var(--text);font-size:11px;padding:9px 16px;border-radius:20px;z-index:20;letter-spacing:.08em;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;box-shadow:0 6px 20px #05040f66}#countnum{font-size:100px;font-weight:600;color:#f5ecdd;text-shadow:0 0 40px #ffb85c88;z-index:8;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}#tapzones{position:fixed;inset:0;z-index:7;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(78px + var(--sab));pointer-events:none;font-size:12px;color:#e8e0f099;letter-spacing:.2em}#controls{position:fixed;bottom:calc(10px + var(--sab));left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:6;padding:0 calc(var(--sal)) 0 calc(var(--sar))}button.ctl{width:48px;height:48px;padding:0;border-radius:50%;font-size:18px;letter-spacing:0;background:#221d40dd;color:var(--text);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}button.ctl:hover:not(:disabled){background:#2c2650}button.ctl.rot{color:var(--accent);font-size:22px}button.ctl.rot.cd{opacity:.35;pointer-events:none}button.ctl.ready{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px #ffb85c66;animation:pulse 1.1s ease-in-out infinite}button.ctl.dim{opacity:.45}@keyframes pulse{0%,to{box-shadow:0 0 8px #ffb85c44}50%{box-shadow:0 0 18px #ffb85caa}}@media(max-width:640px){.title{font-size:24px}#logo{display:none}}