:root{--bg:#101826;--ring:#2a3a52;--text:#eef3ff;--accent:#6c63ff;--reward:#6c4ad6;--ok:#4fd1a5;--err:#ff8a8a}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:600 16px system-ui,-apple-system,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center}
header{width:100%;max-width:560px;display:flex;align-items:center;gap:8px;padding:8px 12px;box-sizing:border-box;min-height:60px}
#scores{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:14px;padding:4px 8px;border-radius:10px;background:#1b2840;border-left:6px solid}
#timer{font-size:18px;min-width:3ch;text-align:right}
button{font:inherit;color:#fff;background:var(--ring);border:0;border-radius:14px;padding:10px 16px;cursor:pointer;min-height:44px;min-width:44px}
button.primary{background:var(--accent)}button.reward{background:var(--reward)}button.ghost{background:transparent;border:2px solid var(--ring)}
button:disabled{opacity:.45;cursor:default}
input{font:inherit;font-size:18px;color:var(--text);background:#0b1220;border:2px solid var(--ring);border-radius:12px;padding:10px 12px;min-height:44px;box-sizing:border-box;width:190px;text-align:center}
#code{text-transform:uppercase;letter-spacing:3px;width:160px}
canvas{flex:1;width:100%;max-width:560px;min-height:0;display:block;cursor:pointer}
#tip{margin:4px 0 6px;opacity:.75;font-size:14px;min-height:1.2em;text-align:center;padding:0 12px}
footer{font-size:12px;opacity:.5;padding-bottom:8px}
.panel{position:fixed;inset:0;background:rgba(8,12,30,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;overflow:auto}
.panel[hidden],.toast[hidden],[hidden]{display:none!important}
.panel h1{margin:0;font-size:30px}.panel h2{margin:10px 0 0;font-size:18px;opacity:.85}.panel p{margin:0;opacity:.9}
.panel>button,.online>button{min-width:240px}
.online{display:flex;flex-direction:column;align-items:center;gap:12px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.small{font-size:14px;opacity:.75}.me{font-size:18px}
.code{font-size:44px!important;letter-spacing:6px}
.err{color:var(--err);min-height:1.2em;font-size:15px}
#players{list-style:none;margin:0;padding:0;width:100%;max-width:320px;display:flex;flex-direction:column;gap:6px}
#players li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#1b2840;font-size:16px;border-left:8px solid}
#players li .n{flex:1;text-align:left}#players li .tag{font-size:13px;opacity:.8}
#players li.away{opacity:.5}
#players li .rep{min-height:44px;min-width:44px;padding:6px 10px;font-size:13px;background:transparent;border:2px solid var(--ring)}
#players li.bot .n{opacity:.8}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:rgba(8,12,30,.92);padding:10px 14px;border-radius:14px;display:flex;align-items:center;gap:10px;font-size:15px;z-index:5}