/* Gorilla City 2032 HUD v3: one cluster in the top-left, as in the supplied reference.
   Round north-up minimap with a gold ring and N badge, overlapping a dark rounded plate that holds the title,
   weekday + time, cash, the objective pill with distance, health/energy bars and the radio (tap to change station).
   Same live elements and ids as before; this file only re-lays them out. Remove `hud-v3` from <body> to go back. */
@font-face{font-family:'Rajdhani';src:url('assets/fonts/rajdhani-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('assets/fonts/rajdhani-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('assets/fonts/rajdhani-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
body.hud-v3{--s:1;--hx:max(14px,env(safe-area-inset-left));--hy:max(12px,env(safe-area-inset-top));--map:calc(200px*var(--s));--plate-x:calc(var(--hx) + 118px*var(--s));--plate-w:calc(624px*var(--s));--in:calc(var(--hx) + 214px*var(--s));--v3-ink:#0c1117;--v3-line:rgba(170,186,204,.42);--v3-text:#f4f6f8;--v3-dim:#b8c5d4;--v3-gold:#f5c22b;--v3-green:#4be08a}
@media (max-width:1250px){body.hud-v3:not(.mobile-ui){--s:.86}}
body.hud-v3 #gameHud :is(.identity strong,#clock,#cash,.contract #objective,.contract #distance,#hudRadioStation,#hudRadioTitle,#hudRadioArtist){font-family:'Rajdhani','Arial Narrow',Arial,sans-serif!important}
/* plate */
body.hud-v3 #gameHud .hud-plate{position:absolute;left:var(--plate-x);top:calc(var(--hy) + 16px*var(--s));width:var(--plate-w);height:calc(172px*var(--s));border-radius:calc(22px*var(--s));background:linear-gradient(180deg,#151c25 0%,#0b1016 100%);border:1.5px solid var(--v3-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 #000a,0 10px 28px #0008;pointer-events:none}
body.hud-v3 #gameHud .hud-plate::after{content:'';position:absolute;left:calc(90px*var(--s));right:calc(16px*var(--s));top:calc(102px*var(--s));height:1.5px;background:linear-gradient(90deg,transparent,rgba(245,194,43,.55) 70%,rgba(245,194,43,.85))}
/* round map */
body.hud-v3 #gameHud .mapcard{left:var(--hx)!important;right:auto!important;top:var(--hy)!important;width:var(--map)!important;height:var(--map)!important;padding:calc(11px*var(--s))!important;border-radius:50%!important;border:2px solid #232b35!important;background:conic-gradient(from -30deg,#f5c22b 0 82deg,#2a323d 82deg 104deg,#f5c22b 104deg 150deg,#2a323d 150deg 196deg,#f5c22b 196deg 262deg,#2a323d 262deg 290deg,#f5c22b 290deg 330deg,#2a323d 330deg 360deg)!important;box-shadow:0 0 0 calc(4px*var(--s)) #10161d,0 4px 0 #000a,0 10px 26px #0009!important;z-index:2}
body.hud-v3 #gameHud .mapcard::before{content:'';position:absolute;inset:calc(7px*var(--s));border-radius:50%;background:#0f151c;pointer-events:none}
body.hud-v3 #gameHud .map-open-button{position:relative;width:100%!important;height:100%!important;border-radius:50%!important;overflow:hidden;border:calc(3px*var(--s)) solid #1a222b!important;background:#2f3b38!important}
body.hud-v3 #gameHud #minimap{border-radius:50%!important;width:100%!important;height:100%!important}
body.hud-v3 #gameHud .map-north{position:absolute!important;left:50%!important;right:auto!important;top:calc(-19px*var(--s))!important;transform:translateX(-50%)!important;width:calc(38px*var(--s));height:calc(38px*var(--s));display:grid!important;place-items:center;padding:0!important;border:2px solid #2c3540!important;border-radius:calc(10px*var(--s))!important;background:#0b0f14!important;color:#fff!important;font:700 calc(24px*var(--s))/1 'Rajdhani',Arial,sans-serif!important;z-index:3;box-shadow:0 2px 0 #000}
body.hud-v3 #gameHud .map-north::after{content:''!important}
body.hud-v3 #gameHud .mapcard .map-north{top:calc(-12px*var(--s))!important}
body.hud-v3 #gameHud .map-key{display:none!important}
/* title / time / cash */
body.hud-v3 #gameHud .identity{left:var(--in)!important;top:calc(var(--hy) + 28px*var(--s))!important;z-index:1}
body.hud-v3 #gameHud .identity strong{font-size:calc(33px*var(--s))!important;font-weight:700!important;letter-spacing:.4px!important;line-height:1!important;color:var(--v3-text)!important;text-shadow:0 2px 0 #000!important}
body.hud-v3 #gameHud #clock{left:calc(var(--in) + 270px*var(--s))!important;right:auto!important;top:calc(var(--hy) + 33px*var(--s))!important;width:auto!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;display:flex!important;gap:calc(14px*var(--s));font-size:calc(24px*var(--s))!important;font-weight:600!important;color:var(--v3-text)!important;letter-spacing:.5px;white-space:nowrap}
body.hud-v3 #gameHud #clock .clock-day{color:#a9c8ec}
body.hud-v3 #gameHud #clock .clock-time{color:#5ad2ff}
body.hud-v3 #gameHud #cash{left:auto!important;right:auto!important;top:calc(var(--hy) + 26px*var(--s))!important;bottom:auto!important;left:calc(var(--plate-x) + var(--plate-w) - 128px*var(--s))!important;width:calc(112px*var(--s))!important;min-width:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-align:right!important;font-size:calc(34px*var(--s))!important;font-weight:700!important;color:var(--v3-green)!important;text-shadow:0 2px 0 #000!important;white-space:nowrap}
/* objective pill */
body.hud-v3 #gameHud .contract{left:calc(var(--in) - 6px*var(--s))!important;top:calc(var(--hy) + 70px*var(--s))!important;width:calc(var(--plate-w) - 108px*var(--s))!important;height:calc(46px*var(--s));min-height:0!important;padding:0 calc(86px*var(--s)) 0 calc(56px*var(--s))!important;display:flex!important;align-items:center;border-radius:calc(15px*var(--s))!important;background:rgba(255,255,255,.035)!important;border:1.5px solid rgba(170,186,204,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;z-index:1}
body.hud-v3 #gameHud .contract .mission-diamond{left:calc(18px*var(--s))!important;top:50%!important;width:calc(18px*var(--s))!important;height:calc(18px*var(--s))!important;margin-top:calc(-9px*var(--s));background:#0c1117!important;border:calc(4px*var(--s)) solid var(--v3-gold)!important;box-sizing:border-box;transform:rotate(45deg)!important;box-shadow:0 0 0 1px #000!important;font-size:0!important;color:transparent!important}
body.hud-v3 #gameHud .contract :is(.eyebrow,.contractbottom){display:none!important}
body.hud-v3 #gameHud .contract #objective{margin:0!important;font-size:calc(22px*var(--s))!important;font-weight:600!important;line-height:1.1!important;color:var(--v3-text)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis}
body.hud-v3 #gameHud .contract #distance{position:absolute!important;right:calc(16px*var(--s));top:50%;transform:translateY(-50%);margin:0!important;font-size:calc(21px*var(--s))!important;font-weight:500!important;color:var(--v3-dim)!important;white-space:nowrap}
body.hud-v3 #gameHud .contract #missiondesc{display:none!important;position:absolute;left:0;top:calc(100% + 64px*var(--s));width:100%;padding:8px 12px;border:1px solid var(--v3-line);border-radius:10px;background:var(--v3-ink);font:500 14px/1.35 'Rajdhani',Arial,sans-serif!important;color:var(--v3-dim)!important}
body.hud-v3.hud-expanded #gameHud .contract #missiondesc{display:block!important}
body.hud-v3 #gameHud .contract #missionDetails{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-width:0!important;border:0!important;background:none!important;color:transparent!important;font-size:0!important;cursor:pointer}
body.hud-v3 #gameHud .contract .cargo-status{position:absolute;left:calc(56px*var(--s));bottom:calc(-26px*var(--s))}
/* bars */
body.hud-v3 #gameHud .player-gauges{left:calc(var(--in) - 10px*var(--s))!important;top:calc(var(--hy) + 124px*var(--s))!important;bottom:auto!important;width:calc(250px*var(--s))!important;padding:0!important;gap:calc(11px*var(--s))!important;background:none!important;border:0!important;box-shadow:none!important;z-index:1}
body.hud-v3 #gameHud .gauge{gap:calc(12px*var(--s))!important}
body.hud-v3 #gameHud .gauge-icon{width:calc(24px*var(--s))!important;font-size:calc(26px*var(--s))!important;line-height:1!important;text-shadow:0 2px 0 #000}
body.hud-v3 #gameHud .health-gauge .gauge-icon{color:#ff4b52!important}
body.hud-v3 #gameHud .stamina-gauge .gauge-icon{color:var(--v3-gold)!important;font-weight:700}
body.hud-v3 #gameHud .gauge-track{height:calc(17px*var(--s))!important;border:0!important;border-radius:calc(4px*var(--s))!important;background:#2b3138!important;box-shadow:inset 0 1px 0 #0009!important;overflow:hidden}
body.hud-v3 #gameHud #healthFill{background:linear-gradient(#ff5a5f,#e2343e)!important}
body.hud-v3 #gameHud #staminaFill{background:linear-gradient(#ffd23a,#f2b21d)!important}
/* radio (tap to change station; swipe or ‹ › to go back/forward) */
body.hud-v3 #gameHud .hud-radio{display:flex!important;left:calc(var(--in) + 258px*var(--s))!important;right:auto!important;top:calc(var(--hy) + 124px*var(--s))!important;bottom:auto!important;transform:none!important;width:calc(var(--plate-w) - 364px*var(--s))!important;min-width:0!important;max-width:none!important;height:calc(58px*var(--s));padding:0 0 0 calc(18px*var(--s))!important;gap:calc(12px*var(--s))!important;align-items:center;background:none!important;border:0!important;border-left:2px solid rgba(220,228,236,.55)!important;border-radius:0!important;box-shadow:none!important;z-index:1}
body.hud-v3 #gameHud .hud-music-icon{display:inline!important;color:#fff!important;font-size:calc(36px*var(--s))!important;line-height:1;text-shadow:0 2px 0 #000}
body.hud-v3 #gameHud .radio-panel{display:none!important}
body.hud-v3 #gameHud .hud-radio .hud-radio-summary{display:block!important;flex:1;min-width:0;min-height:0;padding:0!important;border:0!important;background:none!important;text-align:left;color:var(--v3-text);cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
body.hud-v3 #gameHud #hudRadioStation{display:block;font-size:calc(21px*var(--s))!important;font-weight:700!important;line-height:1.1;color:#fff!important;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
body.hud-v3 #gameHud .hud-radio-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(19px*var(--s));line-height:1.2;color:var(--v3-dim)}
body.hud-v3 #gameHud #hudRadioTitle,body.hud-v3 #gameHud #hudRadioArtist{display:inline!important;font-size:inherit!important;font-weight:500!important;color:var(--v3-dim)!important}
body.hud-v3 #gameHud .hud-radio-summary.tuned #hudRadioStation{animation:v3tune .5s ease-out}
@keyframes v3tune{0%{color:var(--v3-gold);transform:translateX(6px)}100%{color:#fff;transform:none}}
body.hud-v3 #gameHud .hud-radio-steps{display:none}
body.hud-v3 #gameHud .hud-radio-steps button{width:calc(28px*var(--s));height:calc(28px*var(--s));min-width:0;padding:0;border:1px solid rgba(170,186,204,.4);border-radius:8px;background:#141b23;color:#fff;font:700 calc(20px*var(--s))/1 'Rajdhani',Arial,sans-serif;cursor:pointer}
/* everything else */
body.hud-v3 #gameHud #footChip{display:none!important}
body.hud-v3 #gameHud #hudMenuSlot{left:auto!important;right:var(--hx)!important;top:var(--hy)!important;flex-direction:row!important}
body.hud-v3 #gameHud .speedcard{right:var(--hx)!important;bottom:max(16px,env(safe-area-inset-bottom))!important}
body.hud-v3 #radioBanner{left:auto;right:max(16px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 54px);transform:translateY(-8px)}
body.hud-v3 #radioBanner.show{transform:none}
/* ---- phones ---- */
body.hud-v3.mobile-ui{--s:.56;--hx:max(8px,env(safe-area-inset-left));--hy:max(8px,env(safe-area-inset-top));--map:96px;--plate-x:calc(var(--hx) + 62px);--plate-w:calc(100vw - var(--plate-x) - var(--hx));--in:calc(var(--hx) + 112px)}
body.hud-v3.mobile-ui #gameHud .hud-plate{top:calc(var(--hy) + 6px);height:118px;border-radius:16px}
body.hud-v3.mobile-ui #gameHud .hud-plate::after{display:none}
body.hud-v3.mobile-ui #gameHud .identity{display:block!important;top:calc(var(--hy) + 16px)!important}
body.hud-v3.mobile-ui #gameHud .identity strong{font-size:16px!important}
body.hud-v3.mobile-ui #gameHud #clock .clock-day{display:none}
body.hud-v3.mobile-ui #gameHud #clock{display:flex!important;left:auto!important;right:calc(var(--hx) + 74px)!important;top:calc(var(--hy) + 18px)!important;font-size:13px!important;gap:6px}
body.hud-v3.mobile-ui #gameHud #cash{display:block!important;left:auto!important;right:calc(var(--hx) + 10px)!important;top:calc(var(--hy) + 13px)!important;width:auto!important;font-size:20px!important}
body.hud-v3.mobile-ui #gameHud .contract{display:flex!important;left:calc(var(--in) - 4px)!important;top:calc(var(--hy) + 40px)!important;width:calc(100vw - var(--in) - var(--hx) - 6px)!important;height:32px;padding:0 54px 0 32px!important;border-radius:10px!important}
body.hud-v3.mobile-ui #gameHud .contract .mission-diamond{left:11px!important;width:12px!important;height:12px!important;margin-top:-6px;border-width:3px!important}
body.hud-v3.mobile-ui #gameHud .contract #objective{font-size:15px!important}
body.hud-v3.mobile-ui #gameHud .contract #distance{font-size:13px!important;right:10px}
body.hud-v3.mobile-ui #gameHud .player-gauges{display:grid!important;left:calc(var(--in) - 4px)!important;top:calc(var(--hy) + 82px)!important;width:calc((100vw - var(--in) - var(--hx)) * .42)!important;gap:7px!important}
body.hud-v3.mobile-ui #gameHud .gauge-icon{font-size:14px!important;width:14px!important}
body.hud-v3.mobile-ui #gameHud .gauge-track{height:9px!important}
body.hud-v3.mobile-ui #gameHud .hud-radio{display:flex!important;left:calc(var(--in) + (100vw - var(--in) - var(--hx)) * .46)!important;top:calc(var(--hy) + 78px)!important;width:calc((100vw - var(--in) - var(--hx)) * .54 - 6px)!important;height:36px;padding-left:9px!important;gap:6px!important}
body.hud-v3.mobile-ui #gameHud .hud-music-icon{font-size:20px!important}
body.hud-v3.mobile-ui #gameHud #hudRadioStation{font-size:13px!important}
body.hud-v3.mobile-ui #gameHud .hud-radio-line{font-size:12px}
body.hud-v3.mobile-ui #gameHud .hud-radio-steps{display:none}
body.hud-v3.mobile-ui #gameHud .mapcard{top:calc(var(--hy) + 16px)!important;padding:7px!important}
body.hud-v3.mobile-ui #gameHud .map-north{width:24px;height:24px;font-size:15px!important;border-radius:7px!important}
body.hud-v3.mobile-ui #gameHud #hudMenuSlot{top:calc(var(--hy) + 132px)!important}
body.hud-v3.mobile-ui.playing .hud-visibility-button{top:calc(max(8px,env(safe-area-inset-top)) + 132px)!important;left:var(--hx)!important}
body.hud-v3.mobile-ui #gameHud .hud-feedback{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 170px)}
body.hud-v3.mobile-ui #gameHud :is(#footChip,.speedcard){bottom:calc(max(16px,env(safe-area-inset-bottom)) + 168px)!important}
body.hud-hidden.hud-v3 #gameHud{display:none}
body.hud-v3 #gameHud .hud-radio-summary small:not(:empty)::before{content:none}

/* Inside, the room is the main view. Keep the same live HUD controls in a
   narrower cluster and leave optional radio/objective detail in the menu. */
body.hud-v3 #gameHud.hud-venue{--s:.58;--map:92px;--plate-x:calc(var(--hx) + 54px);--plate-w:340px;--in:calc(var(--hx) + 108px)}
body.hud-v3 #gameHud.hud-venue .hud-plate{top:calc(var(--hy) + 4px);height:82px;width:var(--plate-w);border-radius:14px}
body.hud-v3 #gameHud.hud-venue .hud-plate::after{display:none}
body.hud-v3 #gameHud.hud-venue .identity{top:calc(var(--hy) + 13px)!important}
body.hud-v3 #gameHud.hud-venue .identity strong{font-size:20px!important}
body.hud-v3 #gameHud.hud-venue #cash{left:auto!important;right:auto!important;left:calc(var(--plate-x) + var(--plate-w) - 100px)!important;top:calc(var(--hy) + 49px)!important;font-size:22px!important;width:84px!important}
body.hud-v3 #gameHud.hud-venue .player-gauges{left:var(--in)!important;top:calc(var(--hy) + 43px)!important;width:160px!important;gap:7px!important}
body.hud-v3 #gameHud.hud-venue :is(#clock,.contract,.hud-radio){display:none!important}
body.hud-v3 #gameHud.hud-venue #hudHeat{left:calc(var(--plate-x) + var(--plate-w) - 100px);top:calc(var(--hy) + 33px);width:84px}
body.hud-v3.mobile-ui #gameHud.hud-venue{--map:78px;--plate-x:calc(var(--hx) + 44px);--plate-w:min(308px,calc(100vw - var(--plate-x) - var(--hx)));--in:calc(var(--hx) + 91px)}
body.hud-v3.mobile-ui #gameHud.hud-venue .hud-plate{height:68px;top:calc(var(--hy) + 5px)}
body.hud-v3.mobile-ui #gameHud.hud-venue .mapcard{top:calc(var(--hy) + 3px)!important;padding:6px!important}
body.hud-v3.mobile-ui #gameHud.hud-venue .identity{top:calc(var(--hy) + 15px)!important}
body.hud-v3.mobile-ui #gameHud.hud-venue .identity strong{font-size:16px!important}
body.hud-v3.mobile-ui #gameHud.hud-venue .player-gauges{left:var(--in)!important;top:calc(var(--hy) + 38px)!important;width:min(124px,calc((100vw - var(--in) - var(--hx)) * .57))!important;gap:6px!important}
body.hud-v3.mobile-ui #gameHud.hud-venue #cash{left:auto!important;right:calc(var(--hx) + 10px)!important;top:calc(var(--hy) + 43px)!important;font-size:20px!important;width:76px!important}
body.hud-v3.mobile-ui #gameHud.hud-venue #hudMenuSlot,body.hud-v3.mobile-ui.playing:has(#gameHud.hud-venue) .hud-visibility-button{top:calc(var(--hy) + 86px)!important}
@media(max-height:500px){body.hud-v3.mobile-ui #gameHud.hud-venue{--map:64px}body.hud-v3.mobile-ui #gameHud.hud-venue .hud-plate{height:58px}body.hud-v3.mobile-ui #gameHud.hud-venue .identity{top:calc(var(--hy) + 10px)!important}body.hud-v3.mobile-ui #gameHud.hud-venue .player-gauges{top:calc(var(--hy) + 32px)!important}body.hud-v3.mobile-ui #gameHud.hud-venue #cash{top:calc(var(--hy) + 34px)!important}body.hud-v3.mobile-ui #gameHud.hud-venue #hudMenuSlot{top:var(--hy)!important}body.hud-v3.mobile-ui.playing:has(#gameHud.hud-venue) .hud-visibility-button{top:var(--hy)!important;left:auto!important;right:calc(var(--hx) + 108px)}}

/* police heat: stars under the cash; they flash while an officer is writing you up */
body.hud-v3 #gameHud #hudHeat{position:absolute;left:calc(var(--plate-x) + var(--plate-w) - 128px*var(--s));top:calc(var(--hy) + 58px*var(--s));width:calc(124px*var(--s));text-align:right;font:700 calc(16px*var(--s))/1 'Rajdhani','Arial Narrow',Arial,sans-serif;letter-spacing:calc(2px*var(--s));color:#ff5a4a;text-shadow:0 1px 0 #000;z-index:3;pointer-events:none}
body.hud-v3 #gameHud #hudHeat[hidden]{display:none}
body.hud-v3 #gameHud #hudHeat.hot{animation:heat-flash .5s steps(2) infinite}
body.hud-v3 #gameHud #hudHeat b{color:#ffe14d;font-weight:800;text-shadow:0 0 6px rgba(255,190,40,.55),0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000}
body.hud-v3 #gameHud #hudHeat i{font-style:normal;color:rgba(255,255,255,.2);text-shadow:0 1px 0 rgba(0,0,0,.6)}
body.hud-v3 #gameHud #hudHeat.searching b{animation:wanted-search .6s steps(2) infinite}
body.hud-v3 #gameHud #hudHeat.gain b{animation:wanted-gain .32s ease-out 3}
@keyframes wanted-search{50%{color:rgba(255,255,255,.35);text-shadow:none}}
@keyframes wanted-gain{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
body.hud-v3 #gameHud #hudHeat b{display:inline-block;transform-origin:right center}
@keyframes heat-flash{50%{color:#5ab0ff}}
body.hud-v3.mobile-ui #gameHud #hudHeat{left:auto;right:calc(var(--hx) + 10px);top:calc(var(--hy) + 2px);width:auto;font-size:12px;letter-spacing:1px}

/* title screen: TOP 5 · RICHEST IN GORILLA CITY (Supabase gc_top_cash, rendered by city-board.js) */
.city-board{position:absolute;left:18px;bottom:18px;z-index:5;width:min(292px,calc(100vw - 32px));padding:11px 13px 9px;border-radius:12px;background:linear-gradient(180deg,rgba(14,21,30,.92),rgba(8,12,18,.9));border:1.5px solid rgba(245,194,43,.55);box-shadow:0 10px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);color:#e9eef4;font:600 15px/1.2 'Rajdhani','Arial Narrow',Arial,sans-serif;pointer-events:none}
.city-board h3{display:flex;align-items:baseline;gap:7px;margin:0 0 7px;font:700 15px/1 'Rajdhani','Arial Narrow',Arial,sans-serif;letter-spacing:.08em;color:#f5c22b;white-space:nowrap}
.city-board h3 .cb-kicker{padding:2px 6px 1px;border-radius:5px;background:#f5c22b;color:#141008;font-size:12px;letter-spacing:.1em}
.city-board ol{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.city-board li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;min-height:22px;padding:1px 6px 1px 2px;border-radius:6px;white-space:nowrap}
.city-board li .cb-rank{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(169,200,236,.14);color:#a9c8ec;font:700 12px/1 'Rajdhani',Arial,sans-serif;font-style:normal}
.city-board li.cb-gold .cb-rank{background:linear-gradient(180deg,#ffe37a,#e0a50f);color:#2a1d00;box-shadow:0 0 8px rgba(245,194,43,.45)}
.city-board li.cb-silver .cb-rank{background:linear-gradient(180deg,#f1f4f8,#a9b3bf);color:#1b222b}
.city-board li.cb-bronze .cb-rank{background:linear-gradient(180deg,#f0b27a,#a8642c);color:#2a1406}
.city-board li.cb-gold .cb-name{color:#ffe9a6}
.city-board li .cb-name{overflow:hidden;text-overflow:ellipsis}
.city-board li .cb-cash{color:#4be08a;font-variant-numeric:tabular-nums}
.city-board li.cb-you{background:rgba(245,194,43,.14);outline:1px solid rgba(245,194,43,.4)}
.city-board li.cb-you .cb-name{color:#f5c22b}
.city-board ol.cb-mine{margin-top:5px;padding-top:5px;border-top:1px dashed rgba(169,200,236,.25)}
.city-board .cb-empty{margin:2px 0 4px;color:#cfd8e3;font-size:14px}
.city-board .cb-note{margin:7px 0 0;color:#7f93a8;font-size:11px;letter-spacing:.04em}
/* the board sits against the screen corner, never over the logo, the name box or START */
#intro>.city-board{position:fixed;left:18px;bottom:18px}
/* phones: centred under the title card, all five rows, a little tighter */
@media (max-width:800px){#intro>.city-board{left:50%;right:auto;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 24px));padding:8px 11px 7px;font-size:14px}.city-board h3{font-size:13px;margin-bottom:5px}.city-board li{min-height:19px}.city-board li .cb-rank{width:18px;height:18px;font-size:11px}.city-board .cb-note{margin-top:5px}}
/* short screens (phones sideways, small phones) have no spare room; the board also steps aside while you type your name */
@media (max-height:540px){#intro>.city-board{display:none}}
#intro>.city-board.cb-no-room{display:none}
body.name-typing #intro>.city-board,#intro:has(#playerName:focus)>.city-board{display:none}

/* ================= city map (full screen, v3 look) ================= */
#mapPanel{position:absolute;inset:0;pointer-events:none;font:600 14px 'Rajdhani','Arial Narrow',Arial,sans-serif;color:#e9eef4;z-index:30;--g:#f5c22b;--glass:rgba(11,16,22,.88);--edge:rgba(170,186,204,.22)}
#mapPanel[hidden]{display:none}
#mapPanel>*{pointer-events:auto}
#mapPanel button{font:inherit;color:inherit;cursor:pointer}
.map-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;gap:10px;align-items:flex-start}
.map-icon{flex:none;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--edge);background:var(--glass);box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:20px!important;line-height:1;display:grid;place-items:center;backdrop-filter:blur(6px)}
.map-icon:active,.map-zoom button:active{transform:scale(.94)}
#mapRecenter{color:#6cb6ff}
.map-search{position:relative;flex:1;min-width:0;max-width:520px}
.map-search-icon{position:absolute;left:14px;top:11px;font-size:20px;color:#8a97a6;pointer-events:none}
#mapSearch{width:100%;height:46px;padding:0 14px 0 40px;border-radius:14px;border:1.5px solid var(--edge);background:var(--glass);color:#e9eef4;font:600 16px 'Rajdhani','Arial Narrow',Arial,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.45);outline:none;backdrop-filter:blur(6px)}
#mapSearch:focus{border-color:var(--g)}
#mapSearch::placeholder{color:#8a97a6}
#mapResults{position:absolute;left:0;right:0;top:52px;display:flex;flex-direction:column;max-height:46vh;overflow:auto;border-radius:14px;background:var(--glass);border:1.5px solid var(--edge);box-shadow:0 10px 26px rgba(0,0,0,.5)}
#mapResults:empty{display:none}
#mapResults button{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:none;font-size:15px!important}
#mapResults button:last-child{border-bottom:0}
#mapResults button i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,#d9dee6);box-shadow:0 0 0 2px #0b0f14}
#mapResults button small{color:#8a97a6;font-size:12px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
#mapResults button:hover,#mapResults button:focus{background:rgba(245,194,43,.12)}
.map-filters{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 56px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.map-filters::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:17px;background:var(--glass);border:1.5px solid var(--edge);font-size:14px;letter-spacing:.02em;cursor:pointer;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0b0f14}
.chip b{font-weight:700;font-size:12px;color:#8a97a6}
.chip:has(input:checked){border-color:color-mix(in srgb,var(--c) 70%,transparent)}
.chip:has(input:not(:checked)){opacity:.5}
.chip:has(input:not(:checked)) i{background:transparent;box-shadow:0 0 0 2px var(--c)}
.chip:has(input:focus-visible){outline:2px solid var(--g);outline-offset:2px}
.map-zoom{position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--glass);border:1.5px solid var(--edge);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.map-zoom button{width:46px;height:46px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:none;font-size:22px!important;line-height:1}
.map-zoom button:last-child{border-bottom:0;font-size:18px!important;color:#8a97a6}
.map-selection{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;padding:14px;border-radius:18px;background:var(--glass);border:1.5px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.55);display:grid;gap:12px;backdrop-filter:blur(6px)}
.map-sel-head{display:flex;gap:12px;align-items:center;min-width:0}
.map-sel-dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c,#3a4855);box-shadow:0 0 0 3px #0b0f14,0 0 0 4.5px var(--c,#3a4855)}
.map-sel-text{min-width:0}
#mapSelected{font-size:18px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mapRouteStatus{font-size:13px;color:#8a97a6;margin-top:2px}
.map-sel-actions{display:flex;gap:10px}
.map-sel-actions button{height:44px;border-radius:12px;border:1.5px solid var(--edge);background:rgba(255,255,255,.04);font-size:15px!important;letter-spacing:.06em;padding:0 16px}
.map-sel-actions .primary{flex:1;background:var(--g);border-color:var(--g);color:#0b0f14!important;font-weight:700}
.map-sel-actions .primary:disabled{background:rgba(245,194,43,.18);border-color:rgba(245,194,43,.25);color:rgba(245,194,43,.6)!important;cursor:default}
.map-brand{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);font:700 12px 'Rajdhani','Arial Narrow',Arial,sans-serif;letter-spacing:.18em;color:rgba(233,238,244,.45);pointer-events:none!important}
.map-brand span{color:var(--g)}
@media (min-width:900px){.map-selection{left:max(12px,env(safe-area-inset-left));right:auto;width:420px;margin:0}.map-filters{left:auto;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));max-width:calc(100vw - 640px)}.map-top{right:auto;width:min(620px,45vw)}.map-zoom{top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:none;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 30px)}}
@media (max-width:899px){.map-brand{display:none}.map-zoom{top:auto;transform:none;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)}}
body.map-open #mobileControls,body.map-open #mobileMenu,body.map-open #touch{display:none!important}
body.warp-flash #world{animation:warpFlash .7s ease-out}@keyframes warpFlash{0%{filter:brightness(3) saturate(.2)}100%{filter:none}}

/* 0.6.4 · starter tour (tutorial-ui.js): one card at the top centre, under the HUD */
.tour{position:fixed;left:50%;top:max(74px,calc(env(safe-area-inset-top) + 74px));transform:translateX(-50%);z-index:30;width:min(430px,calc(100vw - 24px));padding:10px 14px 11px;border-radius:12px;background:linear-gradient(180deg,rgba(14,22,31,.95),rgba(8,12,18,.93));border:1.5px solid rgba(245,194,43,.6);box-shadow:0 10px 30px rgba(0,0,0,.5);color:#e9eef4;font:600 15px/1.25 'Rajdhani','Arial Narrow',Arial,sans-serif;text-align:left}
.tour[hidden]{display:none}
.tour .tour-kicker{display:flex;align-items:center;gap:8px;font:700 11px/1 'Rajdhani',Arial,sans-serif;letter-spacing:.12em;color:#a9c8ec}
.tour .tour-kicker span{flex:1}
.tour .tour-pay{color:#4be08a;letter-spacing:.04em;font-size:13px}
.tour .tour-title{display:block;margin:6px 0 2px;font:700 22px/1.05 'Rajdhani',Arial,sans-serif;color:#f5c22b;letter-spacing:.02em}
.tour .tour-text{margin:2px 0 0;color:#dfe7ef;font-size:15px}
.tour .tour-bar{height:6px;margin-top:8px;border-radius:4px;background:rgba(169,200,236,.16);overflow:hidden}
.tour .tour-bar[hidden]{display:none}
.tour .tour-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5c22b,#ffe37a);transition:width .15s linear}
.tour .tour-dots{display:flex;gap:4px;margin-top:8px}
.tour .tour-dots i{flex:1;height:3px;border-radius:2px;background:rgba(169,200,236,.2)}
.tour .tour-dots i.done{background:#4be08a}
.tour .tour-dots i.now{background:#f5c22b}
.tour button{font:700 12px/1 'Rajdhani',Arial,sans-serif;letter-spacing:.1em;border-radius:7px;cursor:pointer}
.tour .tour-quit{padding:4px 8px;background:transparent;color:#a9c8ec;border:1px solid rgba(169,200,236,.35)}
.tour .tour-buttons{display:flex;gap:8px;margin-top:10px}
.tour .tour-go{flex:1;padding:10px 12px;background:linear-gradient(180deg,#ffd955,#f0b417);color:#1a1204;border:0;font-size:15px}
.tour .tour-later{padding:10px 14px;background:transparent;color:#cfd8e3;border:1px solid rgba(169,200,236,.35)}
.tour.tour-done{text-align:center;border-color:#4be08a}
.tour.tour-done .tour-title{color:#4be08a;font-size:34px}
.tour.tour-info .tour-title{color:#ffe9a6}
#controls .tour-controls{display:block;width:100%;margin:6px 0 10px;padding:10px 12px;border-radius:8px;border:1.5px solid rgba(245,194,43,.6);background:rgba(245,194,43,.12);color:#f5c22b;font:700 14px/1 'Rajdhani',Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
#controls .tour-controls:disabled{opacity:.7;cursor:default;color:#4be08a;border-color:rgba(75,224,138,.5);background:rgba(75,224,138,.08)}
body.mobile-ui .tour{top:max(118px,calc(env(safe-area-inset-top) + 118px));width:min(360px,calc(100vw - 20px));padding:8px 11px 9px}
body.mobile-ui .tour .tour-title{font-size:18px}
body.mobile-ui .tour .tour-text{font-size:13px}
@media (max-height:500px){.tour{padding:6px 10px 7px}.tour .tour-dots{display:none}.tour .tour-title,body.mobile-ui .tour .tour-title{font-size:16px;margin:3px 0 1px}.tour .tour-text,body.mobile-ui .tour .tour-text{font-size:12.5px}.tour .tour-bar{margin-top:5px}.tour .tour-buttons{margin-top:6px}.tour .tour-go,.tour .tour-later{padding:7px 10px}.tour.tour-done .tour-title{font-size:24px}}