:root { --bg:#000; --surface:#111114; --hi:#1c1c21; --text:#f2f2f7; --dim:#8e8e93; --accent:#0a84ff; --good:#30d158; --hair:rgba(255,255,255,.12); }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
header { position:fixed; top:0; left:0; padding:20px 24px; z-index:5; }
.wordmark { font-weight:600; letter-spacing:.01em; }
.center { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:72px 24px 32px; text-align:center; }
.center[hidden], main[hidden] { display:none; }
h1 { margin:6px 0 0; font-weight:400; font-size:clamp(26px,5vw,38px); }
.dim { color:var(--dim); max-width:420px; margin:0; }
.small { font-size:13px; }
.monitor { width:200px; height:200px; }
.ring { fill:none; stroke:var(--accent); stroke-width:1.3; } .r1{opacity:.3} .r2{opacity:.2} .r3{opacity:.11}
.mon { fill:var(--hi); stroke:rgba(255,255,255,.22); } .scr { fill:rgba(10,132,255,.2); } .stand { fill:rgba(255,255,255,.32); }
form { display:flex; flex-direction:column; gap:10px; width:min(320px,100%); margin-top:14px; }
input { background:var(--hi); color:var(--text); border:1px solid var(--hair); border-radius:14px; padding:14px 16px; font:inherit; text-align:center; outline:none; }
input:focus { border-color:var(--accent); }
#pin { font:500 24px ui-monospace, Menlo, monospace; letter-spacing:.3em; padding-left:calc(16px + .3em); }
#pin::placeholder, #room::placeholder { letter-spacing:normal; font:400 16px -apple-system, "Segoe UI", sans-serif; }
#room { text-transform:lowercase; }
button { background:var(--accent); color:#fff; border:0; border-radius:14px; padding:14px; font:600 16px inherit; cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
.msg { min-height:1.4em; color:#ff6961; margin:0; }
.sas { font:600 54px ui-monospace, Menlo, monospace; letter-spacing:.2em; padding:14px 22px 14px calc(22px + .2em); background:var(--surface); border:1px solid var(--hair); border-radius:20px; margin:10px 0; }
#board { position:fixed; inset:0; }
#cv { width:100%; height:100%; display:block; touch-action:none; }
.badge { position:fixed; top:14px; right:14px; display:flex; align-items:center; gap:8px; background:rgba(17,17,20,.92); border:1px solid var(--hair); border-radius:20px; padding:8px 14px; font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--good); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--surface); border:1px solid var(--hair); border-radius:20px; padding:10px 18px; opacity:0; transition:opacity .25s; pointer-events:none; }
.toast.show { opacity:1; }
@media (prefers-reduced-motion: no-preference) { .r1 { animation: pulse 2.6s ease-in-out infinite; } .r2 { animation: pulse 2.6s .25s ease-in-out infinite; } .r3 { animation: pulse 2.6s .5s ease-in-out infinite; } }
@keyframes pulse { 50% { transform: scale(1.06); transform-origin: 120px 120px; } }

.chip { background:var(--hi); color:var(--dim); border:1px solid var(--hair); border-radius:14px; padding:4px 10px; font:500 12px inherit; cursor:pointer; margin-left:4px; }
.chip[aria-pressed="true"] { color:var(--text); background:var(--accent); border-color:transparent; }