: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)}#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:flex;position:absolute;left:0;right:0;bottom:max(var(--s4),env(safe-area-inset-bottom));justify-content:space-between;padding:0 var(--s4)}.touch .pad{display:flex;gap:var(--s3);pointer-events:auto}.touch button{width:72px;height:72px;justify-content:center;padding:0;border-radius:50%}.touch button.on{background:#e0b23a8c}.touch svg{width:30px;height:30px}.speedo{bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 88px);left:var(--s4)}.tools span,#btn-help{display:none}#minimap{width:128px;height:128px}.tools{top:calc(max(var(--s4),env(safe-area-inset-top)) + 140px)}.street{top:auto;bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 96px)}.landmark{top:auto;bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 138px)}}.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 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{bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 96px)}.street{bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 150px)}.landmark{bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 192px)}.touch button[data-key=jump]{width:60px;height:60px;align-self:flex-end}}@media (max-width: 520px){.menu-card{padding:var(--s4)}}@media (pointer: coarse){.touch{padding:0 var(--s3)}.touch .pad{gap:var(--s2);align-items:flex-end}.touch button{width:64px;height:64px}.touch button[data-key=jump]{width:52px;height:52px}}
