:root { --bg:#10161d; --panel:#1b2530; --fg:#e8eef4; --muted:#8fa1b3; --accent:#3fb950; --red:#ef5350; --blue:#42a5f5; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, sans-serif; overflow:hidden; touch-action:none; }
canvas { position:fixed; inset:0; width:100%; height:100%; }
.panel { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--panel); padding:28px 32px; border-radius:14px; width:min(92vw,380px); text-align:center; box-shadow:0 10px 40px #0008; }
h1,h2 { margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 18px; }
kbd { background:#0004; border:1px solid #fff3; border-radius:4px; padding:1px 6px; }
form { display:flex; gap:8px; }
input { flex:1; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid #fff3; background:#0003; color:var(--fg); font-size:16px; }
button { padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#04130a; font-weight:700; font-size:16px; cursor:pointer; }
button.secondary { background:#fff2; color:var(--fg); margin-top:14px; }
ul { list-style:none; margin:0; padding:0; }
li { padding:8px 12px; margin:4px 0; border-radius:8px; background:#0003; }
li.empty { color:var(--muted); background:none; border:1px dashed #fff3; }
.hidden { display:none !important; }
#version { position:fixed; right:10px; bottom:6px; color:var(--muted); font-size:12px; opacity:.8; }
#toast { position:fixed; left:50%; top:16px; transform:translateX(-50%); background:#000b; padding:8px 16px; border-radius:8px; }
#hint { position:fixed; left:50%; bottom:10px; transform:translateX(-50%); color:var(--muted); font-size:13px; }
input { width:100%; margin-bottom:12px; }
.modes { display:flex; gap:10px; }
.modes button { flex:1; display:flex; flex-direction:column; gap:2px; }
.modes button small { font-weight:400; opacity:.75; font-size:12px; min-height:1em; }
.modes button:disabled { opacity:.4; cursor:default; }
#debug { position:fixed; left:8px; top:8px; margin:0; padding:8px 10px; background:#000b; color:#9f9; font:12px/1.35 ui-monospace, monospace; border-radius:6px; pointer-events:none; }
.panel.wide { width:min(94vw,520px); }
.teams { display:flex; gap:12px; margin-bottom:6px; }
.team { flex:1; border-radius:10px; padding:10px; background:#0003; border-top:4px solid var(--red); }
.team.blue { border-top-color:var(--blue); }
.team h3 { margin:0 0 6px; font-size:14px; letter-spacing:.1em; }
.team.red h3 { color:var(--red); } .team.blue h3 { color:var(--blue); }
.team li.me { outline:2px solid #fff; font-weight:700; }
.team button { width:100%; margin-top:6px; padding:6px; font-size:14px; }
.team button:disabled { opacity:.35; cursor:default; }
.cd { font-size:44px; font-weight:800; margin:10px 0 0; color:var(--accent); }
.rules { display:flex; gap:6px; margin-bottom:6px; }
.rule { flex:1; padding:8px 4px; font-size:14px; background:#fff2; color:var(--fg); }
.rule.sel { background:var(--accent); color:#04130a; }
.sub.small { font-size:13px; min-height:2.8em; margin-bottom:12px; }
#side { position:fixed; left:10px; bottom:8px; width:min(300px,60vw); pointer-events:none; }
#chat { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
#chat div { background:#000a; padding:3px 8px; border-radius:6px; font-size:13px; border-left:4px solid #888; animation:fade 9s forwards; }
#chat div.t0 { border-left-color:var(--red); } #chat div.t1 { border-left-color:var(--blue); }
@keyframes fade { 0%,85% { opacity:1; } 100% { opacity:0; } }
#touchBtns { position:fixed; right:14px; bottom:34px; display:flex; gap:12px; }
#touchBtns button { width:84px; height:84px; border-radius:50%; font-size:13px; opacity:.85; }
#hint { width:max-content; max-width:94vw; text-align:center; }