:root{--bg:#1d1b26;--panel:#2b2838;--text:#f2ecd8;--muted:#a89f8a;--accent:#e07a5f;--danger:#ff6b6b}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;overflow:hidden}#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated}.panel{background:var(--panel);border:3px solid #000;flex-direction:column;gap:12px;width:min(320px,100vw - 32px);padding:20px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:6px 6px #000}.panel[hidden]{display:none}.panel h1{text-align:center;margin:0 0 4px;font-size:22px}.panel label{color:var(--muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.panel input{font:inherit;color:#000;background:#fff;border:2px solid #000;padding:6px 8px}.panel input[type=color]{height:36px;padding:2px}.panel button{font:inherit;cursor:pointer;background:var(--accent);color:#000;border:2px solid #000;padding:8px;font-weight:700;box-shadow:3px 3px #000}.panel button:active{transform:translate(2px,2px);box-shadow:1px 1px #000}.panel button:disabled{opacity:.6;cursor:wait}.panel.wide{width:min(440px,100vw - 32px);max-height:calc(100vh - 32px);overflow-y:auto}.panel h2{text-align:center;margin:0;font-size:18px}.panel .actions{justify-content:flex-end;gap:8px;display:flex}.panel .actions button{flex:1}.panel button.secondary{background:var(--muted)}#wardrobe{z-index:10}.customizer{align-items:center;gap:14px;display:flex}.customizer .preview{image-rendering:pixelated;cursor:pointer;background:#c9a27e;border:2px solid #000;flex:none}.customizer .controls{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.customizer .row{flex-direction:column;gap:3px;display:flex}.customizer .label{color:var(--muted);font-size:12px}.customizer .swatches{flex-wrap:wrap;gap:4px;display:flex}.customizer .swatches button{width:22px;height:22px;box-shadow:none;cursor:pointer;border:2px solid #000;padding:0}.customizer .swatches button.selected{outline:2px solid var(--text);outline-offset:1px}.customizer .picker{align-items:center;gap:4px;display:flex}.customizer .picker .name{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.customizer .picker .arrow{width:26px;height:26px;box-shadow:none;border:2px solid #000;padding:0;font-size:16px;line-height:1}.customizer .picker input[type=color]{border:2px solid #000;flex:none;width:32px;height:26px;padding:1px}.customizer .picker input[type=color]:disabled{opacity:.3}@media (width<=420px){.customizer{flex-direction:column}}.hud-btn{font:inherit;cursor:pointer;background:var(--panel);color:var(--text);border:2px solid #000;padding:6px 10px;font-weight:700;position:fixed;top:12px;right:12px;box-shadow:3px 3px #000}.hud-btn[hidden]{display:none}#voice-hud{flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 180px);display:flex;position:fixed;top:12px;left:12px}#voice-hud[hidden]{display:none}#voice-hud .hud-btn{position:static}#voice-hud .hud-btn.secondary{background:#3a3648}#voice-hud .hud-btn.active{background:var(--accent);color:#000}#voice-hud .hud-btn.talking{outline-offset:1px;outline:2px solid #7ee787}#voice-hint{color:var(--muted);background:#0009;padding:4px 6px;font-size:12px}#voice-hint:empty{display:none}#join-error{min-height:1.2em;color:var(--danger);margin:0;font-size:13px}#chat{pointer-events:none;flex-direction:column;gap:6px;width:min(360px,100vw - 24px);display:flex;position:fixed;bottom:12px;left:12px}#chat[hidden]{display:none}#chat-log{pointer-events:auto;overflow-wrap:anywhere;background:#0009;max-height:32vh;margin:0;padding:6px 8px;font-size:13px;line-height:1.35;list-style:none;overflow-y:auto}#chat-log:empty{display:none}#chat-log time{color:var(--muted);font-size:11px}#chat-log b{color:#9ad1ff}#chat-log .mine b{color:#ffe9a8}#chat-log .system{color:var(--muted);font-style:italic}#chat-log .notice{color:var(--danger)}#chat-input{font:inherit;color:#000;pointer-events:auto;background:#fffe;border:2px solid #000;padding:6px 8px;font-size:13px}#chat-input:not(:focus){opacity:.7}#status{background:#000c;padding:6px 12px;font-size:13px;position:fixed;top:12px;left:50%;transform:translate(-50%)}#game canvas{touch-action:none}button{touch-action:manipulation}#chat-toggle{top:auto;right:12px;bottom:max(12px, env(safe-area-inset-bottom));min-height:44px}#zoom-controls{gap:8px;display:flex;position:fixed;bottom:72px;right:12px}#zoom-controls[hidden]{display:none}#zoom-controls .hud-btn{min-width:44px;min-height:44px;font-size:22px;position:static}#chat{pointer-events:auto;bottom:max(68px, env(safe-area-inset-bottom));background:var(--panel);z-index:3;border:2px solid #000;padding:8px}#chat-input{width:100%;min-height:44px;font-size:16px}.panel{z-index:5}.panel.wide{max-height:calc(100dvh - 24px)}@media (pointer:coarse),(width<=600px){.hud-btn{min-height:44px;font-size:12px}#voice-hud{top:max(8px, env(safe-area-inset-top));gap:5px;max-width:calc(100vw - 130px);left:8px}#wardrobe-btn{right:8px;top:max(8px, env(safe-area-inset-top))}#voice-ptt{display:none}.panel{padding:12px}.panel input{font-size:16px}.customizer .picker .arrow{width:44px;height:44px}.customizer .swatches button{width:32px;height:32px}.customizer .picker input[type=color]{width:44px;height:44px}#chat-log{max-height:35dvh}}@media (height<=500px) and (orientation:landscape){.customizer{flex-direction:row}}