:root{--bg: #11151c;--panel: #1a212c;--ink: #e8eef6;--muted: #8b97a8;--accent: #ffb454;--danger: #ff5959;--ok: #4ad07a;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}#app{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px;min-height:100%}h1{margin:4px 0;font-size:26px;letter-spacing:2px;color:var(--accent)}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}button,select{background:var(--panel);color:var(--ink);border:1px solid #2c384a;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer}button:hover{border-color:var(--accent)}button.active{background:var(--accent);color:#1a1206;font-weight:700}.hud{display:flex;gap:18px;font-size:15px;color:var(--muted)}.hud b{color:var(--ink)}canvas{background:#0c0f14;border-radius:10px;box-shadow:0 8px 30px #00000080;image-rendering:pixelated;touch-action:none}.help{max-width:640px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}.banner{font-size:20px;font-weight:700;min-height:26px}.banner.win{color:var(--ok)}.banner.lose{color:var(--danger)}.online-panel{background:var(--panel);border:1px solid #2a3340;border-radius:10px;padding:14px 18px;margin:8px auto;max-width:420px;text-align:center}.online-panel.hidden{display:none}.online-panel h2{margin:4px 0 8px}.online-panel .big{font-size:1.6rem;letter-spacing:4px;font-weight:700;color:var(--accent)}.online-row{display:flex;gap:8px;justify-content:center;margin:8px 0}.online-row input{text-transform:uppercase;width:7rem;text-align:center}.online-panel button.primary{background:var(--accent);color:#11151c;font-weight:700}