:root{--bg:#141414;--panel:#1f1f1f;--panel-border:#3a3a3a;--accent:#ff7a1a;--text:#f2f2f2;--muted:#9a9a9a;--font:"Courier New", ui-monospace, monospace}*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none;background:var(--bg);height:100dvh;color:var(--text);font-family:var(--font);margin:0;font-size:13px;overflow:hidden}#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:block}:root{--kb:0px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--chatbar-h:44px}#bubbles{pointer-events:none;position:fixed;inset:0;overflow:hidden}.bubble{color:#111;white-space:pre-wrap;word-break:break-word;opacity:1;background:#fff;border:2px solid #111;border-radius:10px;max-width:220px;padding:3px 8px;line-height:1.25;transition:opacity .4s;position:absolute;transform:translate(-50%,-100%);box-shadow:0 2px #000}.bubble:after{content:"";background:#fff;border-bottom:2px solid #111;border-right:2px solid #111;width:8px;height:8px;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)rotate(45deg)}.bubble.fading{opacity:0}.bubble b{color:#c0392b}.bubble.shout{border-color:#d62828;font-weight:700;box-shadow:0 2px #000,0 0 0 2px #fff,0 0 0 4px #d62828}.bubble.shout:after{border-color:#d62828}.bubble.whisper{color:#555;background:#ececec;border-style:dashed;font-style:italic}.bubble.whisper:after{background:#ececec;border-style:dashed}#log .whisper{color:#c39bd3;font-style:italic}#log .shout b{color:#ff6b6b}#log{left:12px;bottom:calc(var(--chatbar-h) + var(--safe-bottom) + var(--kb) + 12px);border:1px solid var(--panel-border);pointer-events:none;background:#141414bf;border-radius:6px;width:300px;max-height:40vh;padding:6px 8px;font-size:12px;position:fixed;overflow-y:auto}#log:empty{display:none}#log div{color:var(--muted);padding:1px 0}#log b{color:var(--text)}#log .sys{color:var(--accent)}#chatbar{left:0;right:0;bottom:var(--kb);height:calc(var(--chatbar-h) + var(--safe-bottom));padding:6px 12px calc(6px + var(--safe-bottom));background:var(--panel);border-top:2px solid var(--panel-border);z-index:6;align-items:center;gap:8px;display:flex;position:fixed}#chatbar input{height:30px;font:inherit;color:#111;background:#fff;border:2px solid #111;border-radius:15px;outline:none;flex:1;padding:0 10px}#chatbar input:disabled{background:#555}.pill{height:30px;font:inherit;color:var(--accent);border:2px solid var(--accent);cursor:pointer;white-space:nowrap;background:#111;border-radius:15px;align-items:center;padding:0 14px;font-weight:700;display:inline-flex}button.pill:disabled{opacity:.5;cursor:default}.overlay{z-index:10;background:#000000bf;place-items:center;display:grid;position:fixed;inset:0}.overlay.hidden{display:none}#joinform{background:var(--panel);border:2px solid var(--accent);text-align:center;border-radius:10px;width:min(420px,92vw);padding:24px}#joinform h1{color:var(--accent);letter-spacing:2px;margin:0 0 6px}#joinform p{color:var(--muted);margin:0 0 14px}#joinform input{width:100%;height:36px;font:inherit;border:2px solid #111;border-radius:6px;margin-bottom:10px;padding:0 10px;font-size:15px}#joinform button{width:100%;height:36px;font:inherit;color:#111;background:var(--accent);cursor:pointer;border:0;border-radius:6px;font-weight:700}#joinform .hint{margin:12px 0 0;font-size:11px}#status p{background:var(--panel);border:2px solid var(--accent);border-radius:8px;padding:16px 24px}.appearance{text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:4px 0 12px;display:grid}.appearance-preview{width:64px;height:auto;image-rendering:pixelated;background:#2a2a2a;border:2px solid #111;border-radius:6px;justify-self:center;padding:6px 10px}.appearance-rows{gap:4px;display:grid}.appearance-row{grid-template-columns:92px 26px 1fr 26px;align-items:center;gap:4px;font-size:12px;display:grid}.appearance-label{color:var(--muted)}.appearance-row button,.appearance-random{height:24px;font:inherit;color:var(--text);border:1px solid var(--panel-border);cursor:pointer;background:#111;border-radius:4px;padding:0;font-size:11px}.appearance-row button:hover,.appearance-random:hover{border-color:var(--accent);color:var(--accent)}.appearance-value{text-align:center;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.swatch{vertical-align:middle;border:1px solid #000;border-radius:3px;width:40px;height:14px;display:inline-block}.appearance-random{justify-self:start;margin-top:4px;padding:0 10px}.panel{right:12px;bottom:calc(var(--chatbar-h) + var(--safe-bottom) + var(--kb) + 12px);background:var(--panel);border:2px solid var(--accent);z-index:5;border-radius:10px;width:340px;padding:10px 12px 12px;position:fixed}.panel.hidden{display:none}.panel header{color:var(--accent);letter-spacing:1px;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700;display:flex}.panel header button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0}.panel .appearance{margin:0}#hud{top:calc(12px + var(--safe-top));z-index:4;flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:fixed;right:12px}#hud.hidden{display:none}#zone{border:1px solid var(--panel-border);color:var(--accent);letter-spacing:1px;background:#141414cc;border-radius:6px;padding:4px 10px;font-weight:700}#minimap{width:256px;height:128px;image-rendering:pixelated;border:2px solid var(--panel-border);cursor:crosshair;background:#141414cc;border-radius:6px}@media (max-width:700px){#minimap{width:160px;height:80px}}#fade{opacity:0;pointer-events:none;z-index:8;background:#000;transition:opacity .22s;position:fixed;inset:0}#fade.on{opacity:1}#minimap.hidden{display:none}#tooltip{color:var(--text);border:1px solid var(--accent);pointer-events:none;white-space:nowrap;z-index:6;background:#141414eb;border-radius:6px;padding:4px 8px;font-size:12px;position:fixed}#tooltip.hidden{display:none}#online-wrap{top:calc(12px + var(--safe-top));z-index:5;position:fixed;left:12px}#online-wrap.hidden{display:none}#online{gap:6px}#online-count{font-variant-numeric:tabular-nums}#rooms{width:300px;max-height:60vh;margin-top:8px;position:static;overflow-y:auto}#rooms-list{margin:0;padding:0;list-style:none}#rooms-list>li{border-top:1px solid var(--panel-border);padding:6px 0}#rooms-list>li:first-child{border-top:0}#rooms-list .room{justify-content:space-between;font-weight:700;display:flex}#rooms-list .room.here{color:var(--accent)}#rooms-list .count{color:var(--muted);font-weight:400}#rooms-list .names{flex-wrap:wrap;gap:4px;margin:4px 0 0;padding:0;list-style:none;display:flex}#rooms-list .names button{font:inherit;color:var(--text);border:1px solid var(--panel-border);cursor:pointer;background:#111;border-radius:10px;padding:1px 8px;font-size:11px}#rooms-list .names button:hover{border-color:var(--accent);color:var(--accent)}#rooms-list .names button.me{border-color:var(--accent);color:var(--accent);cursor:default}#minimap-wrap{position:relative}#minimap-wrap.hidden{display:none}#bigmap-open{width:24px;height:24px;font:inherit;color:var(--accent);border:1px solid var(--accent);cursor:pointer;background:#141414e6;border-radius:4px;font-size:14px;position:absolute;bottom:6px;right:6px}#bigmap{z-index:7}#bigmap-frame{background:var(--panel);border:2px solid var(--accent);border-radius:10px;width:min(96vw,1400px);padding:10px 12px 12px}#bigmap-frame header{color:var(--accent);letter-spacing:1px;align-items:center;gap:12px;margin-bottom:8px;font-weight:700;display:flex}#bigmap-frame header .hint{color:var(--muted);letter-spacing:0;flex:1;font-size:12px;font-weight:400}#bigmap-frame header button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0}#bigmap-body{aspect-ratio:2;width:100%;max-height:calc(100vh - 110px);margin:0 auto;position:relative}#bigmap-canvas{width:100%;height:100%;image-rendering:pixelated;cursor:crosshair;background:#0f0f0f;border-radius:6px;display:block}#bigmap-labels{pointer-events:none;position:absolute;inset:0}.map-label{white-space:nowrap;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 1px #000;font-size:12px;position:absolute;transform:translate(-50%,-50%)}.map-label.zone{letter-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:700}.map-label.building{color:#ffd27a;font-size:10px}.map-label.building.cinema{color:#ff6b6b;font-weight:700}@media (max-width:900px){.map-label.zone{letter-spacing:0;font-size:9px}.map-label.building{display:none}}#bigmap-open-mobile{display:none}@media (pointer:coarse){#chatbar input,#name{font-size:16px}#chatbar input,.pill{height:34px}}@media (max-width:700px){:root{--chatbar-h:50px}#chatbar{gap:6px;padding-left:8px;padding-right:8px}#chatbar #who,#sendbtn{display:none}#chatbar input::placeholder{color:#0000}#log{pointer-events:auto;width:auto;max-height:2.9em;padding:4px 8px;font-size:11px;transition:max-height .2s;left:8px;right:8px}#log.expanded{max-height:40vh}#online-wrap{top:calc(8px + var(--safe-top));left:8px}#online{height:30px;padding:0 10px;font-size:12px}#hud{top:calc(8px + var(--safe-top));gap:4px;right:8px}#zone{text-overflow:ellipsis;white-space:nowrap;max-width:46vw;padding:3px 8px;font-size:11px;overflow:hidden}#minimap-wrap{display:none!important}#bigmap-open-mobile{height:30px;padding:0 10px;font-size:12px;display:inline-flex}.panel,#rooms{width:auto;max-height:55vh;left:8px;right:8px;overflow-y:auto}#rooms{margin-top:0;position:fixed}#joinform{padding:16px}.appearance{grid-template-columns:1fr;justify-items:center}.appearance-rows{width:100%}#bigmap-frame{border-left:0;border-right:0;border-radius:0;width:100vw;padding:8px}#bigmap-body{max-height:calc(100dvh - 80px)}#tooltip{display:none!important}}