:root{--void:#0f0d16;--paper:#1b1626;--paper-2:#0f0c17;--edge-dark:#0b0910;--edge-light:#56436f;--edge-mid:#3a3154;--ink:#e8e3f2;--ink-dim:#a29bb8;--ink-faint:#6f6885;--gold:#ffd9a0;--mint:#a9e6d8;--danger:#ff9d9d;--px:4px;--font:ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono CJK SC", "PingFang SC", "Microsoft YaHei", monospace}*{box-sizing:border-box}html,body{background:var(--void);height:100%;color:var(--ink);font:13px/1.5 var(--font);-webkit-font-smoothing:none;overscroll-behavior:none;margin:0;overflow:hidden}#app{position:fixed;inset:0}#stage{place-items:center;display:grid;position:absolute;inset:0}#stage canvas{image-rendering:pixelated;touch-action:none}.panel{background:var(--paper);border:var(--px) solid var(--edge-dark);box-shadow:inset 0 0 0 2px var(--edge-light);border-radius:0}.wordmark{letter-spacing:.24em;color:var(--gold);font-size:13px;font-weight:700}.wordmark-xl{letter-spacing:.28em;text-indent:.28em;color:var(--gold);margin:0;font-size:40px;font-weight:700;line-height:1}#sidebar{flex-direction:column;width:200px;max-height:calc(100% - 32px);display:flex;position:absolute;top:16px;right:16px;overflow:hidden}.panel-head{border-bottom:2px solid var(--edge-dark);background:var(--edge-mid);justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.online{color:var(--ink);align-items:center;gap:5px;font-size:12px;display:inline-flex}.dot{background:var(--mint);width:6px;height:6px}#player-list{flex:1;margin:0;padding:4px;list-style:none;overflow-y:auto}#player-list li{align-items:center;gap:8px;padding:3px 6px;display:flex}#player-list li.me .nick{color:var(--gold)}#player-list canvas{width:16px;height:24px;image-rendering:pixelated;flex:none}#player-list .nick{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#chat{flex-direction:column;width:min(420px,100% - 32px);display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}#chat-log{background:var(--paper);scrollbar-width:thin;flex-direction:column;gap:3px;max-height:208px;padding:8px 10px;font-size:13px;display:flex;overflow-y:auto}#chat-log .line{word-break:break-word}#chat-log .line .who{color:var(--gold)}#chat-log .line.mine .who{color:var(--mint)}#chat-log .line.sys{color:var(--ink-faint)}#chat-log .line.err{color:var(--danger)}#composer{border-top:2px solid var(--edge-dark);gap:0;display:flex}#composer input{background:var(--paper-2);border:0;border-right:2px solid var(--edge-dark);min-width:0;color:var(--ink);font:inherit;outline:none;flex:1;padding:9px 10px}#composer input::placeholder{color:var(--ink-faint)}#composer button{background:var(--edge-mid);width:42px;color:var(--gold);font:inherit;cursor:pointer;border:0;flex:none;font-size:15px}#composer button:active{background:var(--edge-dark)}#pad{grid-template-rows:repeat(2,44px);grid-template-columns:repeat(3,44px);gap:4px;display:none;position:absolute;bottom:16px;right:16px}#pad[data-on="1"]{display:grid}.pad-btn{border:var(--px) solid var(--edge-dark);box-shadow:inset 0 0 0 2px var(--edge-light);color:var(--ink);font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#1b1626d1;padding:0;font-size:14px}.pad-btn[data-held="1"]{background:var(--edge-mid);color:var(--gold)}.pad-btn[data-dir=up]{grid-area:1/2}.pad-btn[data-dir=left]{grid-area:2/1}.pad-btn[data-dir=down]{grid-area:2/2}.pad-btn[data-dir=right]{grid-area:2/3}#status{background:var(--paper);border:var(--px) solid var(--edge-dark);box-shadow:inset 0 0 0 2px var(--edge-light);color:var(--ink-dim);z-index:5;padding:5px 10px;font-size:12px;position:absolute;top:16px;left:50%;transform:translate(-50%)}#lobby{background:var(--void);z-index:10;place-items:center;display:grid;position:absolute;inset:0}#app[data-state=room] #lobby,#app[data-state=lobby] #sidebar,#app[data-state=lobby] #chat{display:none}.lobby-card{text-align:center;width:min(420px,100vw - 32px);padding:28px 24px 22px}.tagline{letter-spacing:.1em;color:var(--ink-faint);margin:12px 0 22px;font-size:11px}#nick-input{background:var(--paper-2);width:100%;box-shadow:inset 2px 2px 0 var(--edge-dark), inset -2px -2px 0 var(--edge-mid);color:var(--ink);font:inherit;text-align:center;border:0;outline:none;margin-bottom:12px;padding:11px 12px;font-size:14px}#nick-input::placeholder{color:var(--ink-faint)}.avatar-picker{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;display:grid}.avatar-picker button{background:var(--paper-2);border:var(--px) solid var(--edge-dark);box-shadow:inset 2px 2px 0 #00000080, inset -2px -2px 0 var(--edge-mid);cursor:pointer;place-items:center;padding:8px 0 6px;display:grid}.avatar-picker button canvas{width:20px;height:30px;image-rendering:pixelated}.avatar-picker button[aria-pressed=true]{box-shadow:inset 2px 2px 0 var(--edge-dark), inset -2px -2px 0 var(--gold);background:var(--edge-mid)}.primary{background:var(--edge-mid);border:var(--px) solid var(--edge-dark);width:100%;box-shadow:inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);color:var(--gold);font:inherit;letter-spacing:.16em;text-indent:.16em;cursor:pointer;padding:12px;font-size:15px}.primary:active{box-shadow:inset 2px 2px 0 var(--edge-dark), inset -2px -2px 0 var(--edge-light)}.primary:disabled{color:var(--ink-faint);cursor:default}#lobby-error{color:var(--danger);margin:12px 0 0;font-size:12px}@media (max-width:760px){:root{--chat-h:32vh}body{font-size:12px}#stage{place-items:start center}#sidebar{flex-direction:row;align-items:center;width:auto;max-height:46px;top:calc(min(66.67vw,52vh) + 6px);left:0;right:0}.panel-head{border-bottom:0;border-right:2px solid var(--edge-dark);height:100%;padding:6px 8px}#player-list{gap:2px;padding:2px 4px;display:flex;overflow:auto hidden}#player-list li{gap:4px;padding:2px 4px}#player-list .nick{max-width:72px;font-size:11px}#chat{width:auto;height:var(--chat-h);padding-bottom:env(safe-area-inset-bottom);bottom:0;left:0;right:0}#chat-log{flex:1;max-height:none}#composer input{padding:11px 10px;font-size:15px}#pad{right:12px;bottom:calc(var(--chat-h) + 12px + env(safe-area-inset-bottom))}#status{top:auto;bottom:calc(var(--chat-h) + 116px + env(safe-area-inset-bottom))}.wordmark-xl{font-size:34px}.lobby-card{padding:24px 18px 18px}}@media (orientation:landscape) and (max-height:520px){#sidebar{flex-direction:column;width:156px;max-height:46vh;top:8px;left:8px;right:auto}.panel-head{border-right:0;border-bottom:2px solid var(--edge-dark)}#chat{width:min(340px,46vw);padding-bottom:0;bottom:8px;left:auto;right:8px}#chat-log{max-height:26vh}#pad{bottom:8px;left:8px;right:auto}#status{top:8px;bottom:auto}}