:root{--bg: #14161b;--panel: #1c1f26;--panel-2: #222831;--border: #3a4150;--text: #e8eaf0;--text-dim: #9aa3b5;--accent: #6fb3a8;--ok: #3d8b6d;--warn: #c2a24b;--danger: #b35d5d;--radius: 10px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px}button:hover{border-color:var(--accent)}button.active{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:default}input{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:14px}.login{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}.login h1{font-size:40px;margin:0;letter-spacing:2px}.login p{color:var(--text-dim);margin:0}.login form{display:flex;gap:8px}.shell{height:100%;display:flex}.stage{flex:1;position:relative;overflow:hidden}.stage canvas{display:block}.hud-top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}.hud-top>*{pointer-events:auto}.hud-bottom{position:absolute;bottom:10px;left:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.badge{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:13px}.badge.warn{border-color:var(--warn);color:var(--warn)}.spacer{flex:1}.toasts{position:absolute;top:56px;right:10px;display:flex;flex-direction:column;gap:8px;width:280px}.toast{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:10px;font-size:13px}.toast .row{display:flex;gap:8px;margin-top:8px}.side{width:300px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.side h3{margin:12px 12px 6px;font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.roster{padding:0 12px 8px;font-size:14px}.roster div{padding:3px 0}.inbox{padding:0 12px 8px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}.inbox .note{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:8px;padding:6px 9px;font-size:13px}.inbox .note.read{border-left-color:var(--border);color:var(--text-dim)}.inbox .note .when{color:var(--text-dim);font-size:11px}.inbox-empty{color:var(--text-dim);font-size:13px}.inbox-actions{padding:0 12px 8px}.dm-list{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:6px}.dm-messages{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-height:80px}.dm-messages .msg{background:var(--panel-2);border-radius:8px;padding:6px 9px;font-size:13px;max-width:90%}.dm-messages .msg.mine{align-self:flex-end;background:#2b3a37}.dm-messages .msg .who{color:var(--text-dim);font-size:11px}.dm-send{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border)}.dm-send input{flex:1}.plain{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:96px 16px 72px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-content:start;background:var(--bg)}.plain section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}.plain h4{margin:0 0 6px;font-size:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.plain-door{color:var(--text-dim);font-weight:400;font-size:12px}.plain ul{margin:0;padding-left:18px}.plain li{margin:2px 0;font-size:13px}.plain-presence{color:var(--text-dim);font-size:12px}.plain-empty{margin:0;color:var(--text-dim);font-size:13px}.plain section{transition:border-color .35s ease}.plain section.live{border-color:#4f6f73}.plain-me{font-weight:600}.plain-glyph{display:inline-block}.plain-glyph.p-available{color:var(--ok)}.plain-glyph.p-busy{color:var(--warn)}.plain-glyph.p-dnd{color:var(--danger)}.plain-door-state{display:inline-block;border-radius:4px;padding:0 3px}.plain-door-state.d-open{color:#58b691}.plain-door-state.d-closed{color:var(--warn)}.plain-door-state.d-locked{color:#d98f8f}.plain-zone-glyph{color:var(--text-dim)}.plain-count{margin-left:auto;display:inline-block;font-size:11px;color:var(--accent);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:1px 7px}.plain-walk{color:var(--text-dim);font-size:12px;font-style:italic}.plain-walk-dots{display:inline-block}.plain-stage{color:var(--accent);font-size:12px}.plain-badge{color:var(--text-dim);font-size:12px}.plain-npc{margin:4px 0 0 18px;color:var(--text-dim);font-size:12px;font-style:italic}.plain-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion: no-preference){.plain li{animation:plain-in .35s ease-out backwards}.plain-glyph.changed,.plain-count.changed{animation:plain-pop .45s ease}.plain-door-state.changed{animation:plain-flash .9s ease}.plain-walk-dots{animation:plain-walk 1.1s ease-in-out infinite}}@keyframes plain-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes plain-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes plain-flash{0%{background:#2b3a37}to{background:transparent}}@keyframes plain-walk{0%,to{opacity:.45}50%{opacity:1}}.dm-presence{color:var(--text-dim);font-size:11px}.dm-earlier{display:block;margin:0 auto 8px;font-size:12px}.games-dock{position:absolute;left:10px;bottom:52px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-height:calc(100% - 130px)}.games-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;width:340px;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.games-panel h3{margin:0;font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.game-host{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}.game-private{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--text-dim);cursor:pointer}.games-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}.game-screen{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer}.game-screen:hover{border-color:var(--accent)}.game-screen-head{display:flex;justify-content:space-between;gap:6px}.game-screen-seats{display:flex;flex-direction:column;gap:2px}.game-status{color:var(--text-dim);font-size:12px}.game-dim{color:var(--text-dim);font-size:13px;margin:0}.game-board{display:grid;gap:2px;width:max-content}.game-board .cell{width:14px;height:14px;background:var(--bg);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1}.game-board .cell.p0{color:var(--accent)}.game-board .cell.p1{color:var(--warn)}.game-modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#0a0c108c}.game-view{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;width:380px;max-width:calc(100% - 40px);max-height:85%;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.game-view-head{display:flex;gap:8px;align-items:center}.game-view .game-board{align-self:center}.game-view .game-board .cell{width:34px;height:34px;font-size:20px;border-radius:5px}.game-view .game-board .cell.clickable{cursor:pointer}.game-view .game-board .cell.clickable:hover{outline:2px solid var(--accent);outline-offset:-2px}.game-roster{display:flex;flex-direction:column;gap:4px;font-size:13px}.game-roster h4{margin:4px 0 0;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.game-roster .row{display:flex;gap:8px;align-items:center;justify-content:space-between}.game-actions{display:flex;gap:8px;flex-wrap:wrap}