:root{--bg: #1b1d23;--panel: #262a33;--line: #3a3f4b;--text: #e8eaed;--muted: #9aa0ac;--accent: #5b8cff;--danger: #e0556b;--ok: #5fc97a;--center: #f0c674}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}#root{min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem}button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:.55rem 1rem;border-radius:8px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{border-color:var(--danger);color:var(--danger)}button.link{border:none;background:none;color:var(--muted);padding:0}input{font:inherit;background:#14161b;border:1px solid var(--line);color:var(--text);padding:.55rem .7rem;border-radius:8px}.lobby{max-width:420px;text-align:center}.lobby h1{font-size:3rem;margin:.5rem 0 0;letter-spacing:.05em}.tagline{color:var(--muted);margin-bottom:2rem}.divider{color:var(--muted);margin:1.5rem 0 1rem;font-size:.9rem}button.block{display:block;width:100%}.mode-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.25rem;text-align:center}.mode-card h2{margin:0 0 .9rem;font-size:1.15rem}.difficulty{display:flex;gap:.5rem;margin-bottom:1rem}.difficulty .pill{flex:1;padding:.45rem 0}.difficulty .pill-active{border-color:var(--accent);color:var(--accent)}.join-form{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.join-form input{text-transform:uppercase;letter-spacing:.15em;width:9rem;text-align:center}.room{width:100%;max-width:560px}.room-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.room-code{font-weight:600;letter-spacing:.1em}.conn{font-size:.85rem;color:var(--muted)}.conn-open{color:var(--ok)}.conn-reconnecting,.conn-connecting{color:var(--center)}.conn-closed{color:var(--danger)}.waiting{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.5rem;text-align:center}.share{display:flex;gap:.5rem;margin:.75rem 0}.share input{flex:1}.hint{color:var(--muted)}.status-bar{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;margin-bottom:1rem}.status-bar .turn{font-weight:600}.status-bar .ok{color:var(--ok)}.status-bar .warn{color:var(--muted)}.error{color:var(--danger);margin:.75rem 0}.board{display:block;margin:0 auto;-webkit-user-select:none;user-select:none}.cell{stroke:var(--bg);stroke-width:1}.cell-light{fill:#2f343f}.cell-dark{fill:#282c35}.cell-center{fill:#4a402a;stroke:var(--center);stroke-width:2}.ball{stroke:#0006;stroke-width:2;cursor:pointer}.ball-white{fill:#eef1f6}.ball-black{fill:#41464f;stroke:#000a}.ball-king{stroke:var(--center);stroke-width:4}.ball-selected{stroke:var(--accent);stroke-width:4}.arrow{cursor:pointer}.arrow-bg{fill:var(--accent);opacity:.9}.arrow:hover .arrow-bg{opacity:1}.arrow-glyph{fill:#fff;font-size:13px;pointer-events:none}.arrow-dist{fill:#fff;font-size:12px;font-weight:700;pointer-events:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;display:flex;align-items:center;justify-content:center}.result{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2rem;text-align:center}