:root{--ink: #f4f1ea;--ink-dim: #c9c4b8;--panel: rgba(18, 20, 24, .72);--panel-edge: rgba(255, 255, 255, .12);--accent: #e0b23a;--radius: 10px;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;font-family:Inter,system-ui,-apple-system,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#a9c3d8;color:var(--ink)}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}button{touch-action:manipulation}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.hud{position:fixed;inset:0;pointer-events:none}.hud button,.hud a,.hud .help{pointer-events:auto}.street{position:absolute;top:max(var(--s4),env(safe-area-inset-top));left:50%;transform:translate(-50%);padding:var(--s2) var(--s4);background:#1d5c3a;border:2px solid #f4f1ea;border-radius:6px;font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap}.street:empty{display:none}.landmark{position:absolute;top:calc(max(var(--s4),env(safe-area-inset-top)) + 46px);left:50%;transform:translate(-50%);padding:var(--s1) var(--s3);background:#5a3a22;border:2px solid #e9dcc3;border-radius:4px;font-size:13px;font-weight:600;color:#f6efe2;white-space:nowrap;max-width:calc(100vw - 2 * var(--s4));overflow:hidden;text-overflow:ellipsis}.landmark:empty{display:none}.speedo{position:absolute;left:var(--s5);bottom:var(--s5);padding:var(--s2) var(--s4);background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:var(--s1)}.speedo span{font-size:40px;font-weight:700;line-height:1;min-width:2ch;text-align:right}.speedo small{font-size:13px;color:var(--ink-dim)}#minimap{position:absolute;right:var(--s4);top:max(var(--s4),env(safe-area-inset-top));width:180px;height:180px;border-radius:50%;border:2px solid var(--panel-edge);background:#2b2d31;box-shadow:0 4px 18px #00000059}.tools{position:absolute;right:var(--s4);top:calc(max(var(--s4),env(safe-area-inset-top)) + 192px);display:flex;flex-direction:column;gap:var(--s2)}.tools button,.touch button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s3);background:var(--panel);color:var(--ink);border:1px solid var(--panel-edge);border-radius:var(--radius);font:inherit;font-size:14px;cursor:pointer}.tools button:hover{background:#282c32d9}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.hud svg{width:20px;height:20px;stroke-width:2;flex:none}.help{position:absolute;right:calc(var(--s4) + 140px);top:calc(max(var(--s4),env(safe-area-inset-top)) + 192px);padding:var(--s3) var(--s4);background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);font-size:14px}.help dl{display:grid;grid-template-columns:auto auto;gap:var(--s1) var(--s4);margin:0}.help dt{font-weight:600;color:var(--accent)}.help dd{margin:0;color:var(--ink)}.touch{display:none}@media (pointer: coarse){.touch{display:block;position:absolute;inset:0;pointer-events:none}.speedo{bottom:auto;top:calc(max(var(--s4),env(safe-area-inset-top)) + 56px);left:var(--s4);padding:var(--s1) var(--s3)}.speedo span{font-size:28px}.credit,.tools span,#btn-help{display:none}#minimap{width:128px;height:128px}.tools{top:calc(max(var(--s4),env(safe-area-inset-top)) + 140px)}}.credit{position:absolute;left:50%;transform:translate(-50%);bottom:var(--s1);font-size:11px;white-space:nowrap;max-width:calc(100vw - 2 * var(--s4));overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 3px rgba(255,255,255,.8);color:#141414cc;pointer-events:auto}.credit a{color:inherit}.loading{position:fixed;inset:0;display:grid;place-items:center;background:#1b1d21;color:var(--ink-dim);font-size:16px;letter-spacing:.04em;transition:opacity .4s}.loading.done{opacity:0;pointer-events:none}.hud [hidden]{display:none!important}.loading>div{text-align:center;padding:0 var(--s4)}.loading h1{margin:0 0 var(--s2);font-size:22px;color:var(--ink)}.loading p{margin:0}.topleft{position:absolute;left:var(--s4);top:max(var(--s4),env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);max-width:46vw}.chip{pointer-events:auto;min-height:44px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s3);background:var(--panel);color:var(--ink);border:1px solid var(--panel-edge);border-radius:999px;font:inherit;font-size:14px;cursor:pointer}.chip:before{content:"";width:8px;height:8px;border-radius:50%;background:#8a8a8a}.chip[data-state=online]:before{background:#58c47f}.chip[data-state=connecting]:before{background:var(--accent)}.roster{pointer-events:auto;list-style:none;margin:0;padding:var(--s2) var(--s3);background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);font-size:14px;max-height:40vh;overflow:auto;min-width:160px}.roster li{padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roster small{color:var(--ink-dim);font-size:12px;margin-left:var(--s1)}.roster .you{color:var(--accent)}.toast{padding:var(--s2) var(--s3);background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);font-size:14px}.prompt{pointer-events:auto;position:absolute;left:50%;bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 56px);transform:translate(-50%);min-height:48px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s4) 0 var(--s2);background:#121418d1;color:var(--ink);border:1px solid var(--panel-edge);border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}.prompt kbd{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:6px;background:var(--ink);color:#1b1d21;font:700 14px/1 Inter,system-ui,sans-serif}.prompt:hover{background:#20242ae6}.speedo[hidden]{display:none}body:not(.driving) .car-only{display:none}body.driving .foot-only{display:none}.help h2{margin:var(--s2) 0 var(--s1);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}.help h2:first-child{margin-top:0}.help{max-height:70vh;overflow:auto}#scene:focus{outline:none}.menu{position:fixed;inset:0;display:grid;place-items:center;padding:var(--s4);background:#0e10138c;backdrop-filter:blur(3px);z-index:5;overflow:auto}.menu[hidden]{display:none}.menu-card{position:relative;width:min(440px,100%);padding:var(--s5);background:#1b1d21;border:1px solid var(--panel-edge);border-radius:14px;box-shadow:0 18px 50px #00000073;font-size:15px;line-height:1.5}.menu .sign{display:inline-block;margin:0 0 var(--s3);padding:6px 16px;background:#1d5c3a;border:2px solid var(--ink);border-radius:6px;font-size:22px;font-weight:700;letter-spacing:.01em}.menu .lede{margin:0 0 var(--s2);color:var(--ink)}.menu .online{margin:0 0 var(--s4);color:var(--ink-dim);font-size:14px}.menu .stack{display:flex;flex-direction:column;gap:var(--s2)}.menu label,.menu .label{font-size:13px;font-weight:600;color:var(--ink-dim);margin-top:var(--s2)}.menu input{min-height:44px;padding:0 var(--s3);background:#121417;color:var(--ink);border:1px solid #3a3e45;border-radius:8px;font:inherit;font-size:16px}.menu input:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:transparent}.menu input.code{letter-spacing:.3em;font-variant-numeric:tabular-nums;font-size:20px}.menu .hint{margin:0;font-size:13px;color:var(--ink-dim)}.menu .err{margin:0;color:#ff9b8a;font-size:14px}.swatches{display:flex;flex-wrap:wrap;gap:var(--s2)}.swatch{width:44px;height:44px;padding:0;border-radius:50%;border:2px solid transparent;background:#121417;cursor:pointer;display:grid;grid-template-rows:1fr 1fr;overflow:hidden}.swatch span{display:block}.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px #1b1d21 inset}.menu button{font:inherit;cursor:pointer}.menu button svg{width:18px;height:18px;stroke-width:2;flex:none}.menu .primary,.menu .ghost,.menu .link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 var(--s4);border-radius:8px}.menu .primary{background:var(--accent);color:#1b1d21;border:0;font-weight:700}.menu .primary:hover{background:#ecc254}.menu .primary:disabled{opacity:.6;cursor:wait}.menu .primary.big{margin-top:var(--s3);min-height:50px;font-size:16px}.menu .ghost{background:transparent;color:var(--ink);border:1px solid #3a3e45}.menu .ghost:hover{background:#24272c}.menu .link{background:none;border:0;color:var(--ink-dim);padding:0 var(--s2)}.menu .link:hover{color:var(--ink)}.menu .row{display:flex;gap:var(--s2);justify-content:space-between;margin-top:var(--s2);flex-wrap:wrap}.menu .acct{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid #2c2f35;display:flex;flex-direction:column;gap:var(--s2);color:var(--ink-dim);font-size:14px}.menu .acct strong{color:var(--ink);font-weight:600;word-break:break-all}.menu .acct .ghost{align-self:flex-start}.menu .acct .link{align-self:flex-start;padding:0}.menu .close{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--ink-dim);border-radius:8px}.menu .close:hover{color:var(--ink);background:#24272c}.menu .foot{margin:var(--s4) 0 0;font-size:13px;color:var(--ink-dim)}.menu .credits{margin:var(--s2) 0 0;font-size:12px;color:var(--ink-dim);line-height:1.45}.menu a{color:var(--ink)}.menu button:focus-visible,.menu a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (pointer: coarse){.topleft{max-width:40vw}.prompt{left:auto;right:max(var(--s4),env(safe-area-inset-right));transform:none;bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 112px);z-index:2}}@media (max-width: 520px){.menu-card{padding:var(--s4)}}@media (pointer: coarse) and (max-height: 520px){.tools{flex-direction:row;top:max(var(--s4),env(safe-area-inset-top));right:calc(max(var(--s4),env(safe-area-inset-right)) + 128px + var(--s3))}#minimap{right:max(var(--s4),env(safe-area-inset-right))}}.stick-zone{position:absolute;left:0;bottom:0;width:50%;height:62%;pointer-events:auto;touch-action:none}.stick{--r: 60px;position:absolute;left:0;top:0;width:calc(2 * var(--r));height:calc(2 * var(--r));margin:calc(-1 * var(--r)) 0 0 calc(-1 * var(--r));border-radius:50%;background:#12141847;border:2px solid rgba(244,241,234,.45);box-shadow:0 2px 12px #00000040;pointer-events:none;opacity:.55;transition:opacity .15s}.stick.active{opacity:1;transition:none}.stick .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#f4f1ead9;box-shadow:0 2px 8px #00000059}.stick.sprint .knob{background:var(--accent)}.touch .pad{position:absolute;right:max(var(--s4),env(safe-area-inset-right));bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + var(--s4));display:flex;gap:var(--s3);align-items:flex-end;pointer-events:auto}.touch .pad button{width:72px;height:72px;justify-content:center;padding:0;border-radius:50%;background:#12141880;border-color:#f4f1ea66}.touch .pad button.on{background:#e0b23ab3}.touch .pad svg{width:30px;height:30px}@media (pointer: coarse){.street,.landmark{top:max(var(--s3),env(safe-area-inset-top));bottom:auto;left:max(var(--s3),env(safe-area-inset-left));transform:none;max-width:calc(100vw - 128px - 3 * var(--s4));overflow:hidden;text-overflow:ellipsis}.street{padding:2px 8px;font-size:12px;border-width:1.5px;border-radius:4px}.landmark{top:calc(max(var(--s3),env(safe-area-inset-top)) + 26px);padding:1px 6px;font-size:10.5px;border-width:1px;border-radius:3px}.topleft{top:calc(max(var(--s3),env(safe-area-inset-top)) + 50px);left:max(var(--s3),env(safe-area-inset-left))}.speedo{top:calc(max(var(--s3),env(safe-area-inset-top)) + 102px);left:max(var(--s3),env(safe-area-inset-left))}}.combat{position:absolute;left:var(--s4);bottom:max(var(--s4),env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}.combat .hp{width:200px;height:10px;border-radius:999px;background:#12141899;border:1px solid var(--panel-edge);overflow:hidden}.combat .hp i{display:block;height:100%;width:100%;background:#58c47f;transition:width .2s}.combat .hp[data-low="1"] i{background:#e2574c}.combat .slots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}.combat .slots li{padding:3px var(--s2);background:var(--panel);border:1px solid var(--panel-edge);border-radius:6px;font-size:13px;color:var(--ink-dim);white-space:nowrap}.combat .slots li.on{color:#1b1d21;background:var(--accent);border-color:var(--accent)}.combat .slots kbd{font:600 11px/1 Inter,system-ui,sans-serif;margin-right:5px;opacity:.7}.combat .slots small{font-variant-numeric:tabular-nums;margin-left:3px}.crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffffe6;box-shadow:0 0 2px #000c}.crosshair:before{left:10px;top:0;width:2px;height:22px}.crosshair:after{top:10px;left:0;height:2px;width:22px}.crosshair[data-hit="1"]:before,.crosshair[data-hit="1"]:after{background:#ff5a4a}.hurt{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 120px #c8141400;transition:box-shadow .15s}.hurt[data-on="1"]{box-shadow:inset 0 0 140px #c8141499}.dead{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.dead strong{display:block;font-size:44px;letter-spacing:.08em;text-transform:uppercase;color:#f4f1ea;text-shadow:0 2px 12px rgba(0,0,0,.7)}.dead span{font-size:15px;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.8)}body.driving .combat .slots{display:none}@media (pointer: coarse){.combat{top:calc(max(var(--s4),env(safe-area-inset-top)) + 56px);bottom:auto}.combat .hp{width:140px}.combat .slots{display:none}.touch .pad button.fire{width:84px;height:84px;background:#aa281e8c}.touch .pad button.weapon{width:auto;min-width:72px;height:48px;border-radius:999px;padding:0 var(--s3);gap:var(--s1);font-size:13px;align-self:flex-end}.touch .pad button.weapon svg{width:18px;height:18px}}@media (pointer: coarse) and (max-height: 520px){.combat{top:calc(max(var(--s4),env(safe-area-inset-top)) + 56px)}}
