/* Gorilla City 2032 HUD — black and gold, laid out like the supplied reference art:
   logo + mission card top-left, square map top-right, health/energy bottom-left,
   cash + on-foot/driving status bottom-right, car radio bottom-centre.
   Every element is the live one from index.html (same ids); this file only lays them out.
   Remove the hud-2032 class from <body> to fall back to the previous compact HUD. */
@font-face{font-family:'Silkscreen';src:url('assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('assets/fonts/silkscreen-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--hud-gold:#f2c230;--hud-gold-deep:#b98a12;--hud-ink:rgba(9,11,13,.86);--hud-line:rgba(242,194,48,.78);--hud-text:#f4f1e6;--hud-dim:#b9b6aa;--hud-pad:max(16px,env(safe-area-inset-left));}

body.hud-2032 #gameHud.compact-hud{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;filter:none;pointer-events:none;font-family:Arial,Helvetica,sans-serif;color:var(--hud-text)}
body.hud-2032 #gameHud :is(.hud-capsule,.hud-wallet,.hud-bottom,.hud-capsule>header){display:contents}
body.hud-2032 #gameHud :is(.identity,.contract,.mapcard,#clock,#cash,.player-gauges,.hud-radio,.hud-feedback,.speedcard,#hudMenuSlot,#footChip){position:absolute;pointer-events:auto;box-sizing:border-box}
body.hud-2032 #gameHud :is(.hud-feedback,.speedcard,#footChip){pointer-events:none}
/* anchor resets: each box is pinned by exactly two sides */
body.hud-2032 #gameHud :is(.identity,.contract,.mapcard,#clock,#hudMenuSlot){bottom:auto;height:auto;max-height:none;min-height:0}
body.hud-2032 #gameHud :is(.identity,.contract,.player-gauges){right:auto}
body.hud-2032 #gameHud :is(.mapcard,#clock,#hudMenuSlot,#cash,#footChip,.speedcard){left:auto}
body.hud-2032 #gameHud :is(.player-gauges,#cash,#footChip,.speedcard,.hud-radio,.hud-feedback){top:auto;height:auto;max-height:none;min-height:0}
body.hud-2032 #gameHud .mapcard{height:188px}
body.hud-2032 #gameHud .hud-panel,body.hud-2032 #gameHud :is(.contract,.player-gauges,#cash,.speedcard,#footChip,.hud-radio,#clock){background:var(--hud-ink);border:1px solid var(--hud-line);border-radius:6px;box-shadow:0 2px 0 #000a,0 6px 18px #0006}

/* ---- top-left: logo + mission ---- */
body.hud-2032 #gameHud .identity{top:max(14px,env(safe-area-inset-top));left:var(--hud-pad);margin:0;padding:0;background:none;border:0}
body.hud-2032 #gameHud .identity strong{display:block;font:700 26px/1 'Silkscreen',monospace;letter-spacing:1px;color:var(--hud-gold);text-shadow:0 2px 0 #6b4a00,2px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
body.hud-2032 #gameHud .contract{top:calc(max(14px,env(safe-area-inset-top)) + 38px);left:var(--hud-pad);display:block;width:min(370px,38vw);min-height:0;max-height:none;padding:10px 40px 10px 34px;border-bottom-color:var(--hud-line)}
body.hud-2032 #gameHud .contract .mission-diamond{position:absolute;left:12px;top:13px;width:11px;height:11px;border:0;background:var(--hud-gold);transform:rotate(45deg);box-shadow:0 0 0 2px #000}
body.hud-2032 #gameHud .contract .eyebrow{display:block;margin:0 0 3px;font:400 11px/1.2 'Silkscreen',monospace;letter-spacing:.5px;color:var(--hud-gold)}
body.hud-2032 #gameHud .contract .eyebrow .accent{display:none}
body.hud-2032 #gameHud .contract #contractnum{color:var(--hud-dim);margin-left:6px}
body.hud-2032 #gameHud .contract #objective{display:block;margin:0;font:700 15px/1.25 Arial,Helvetica,sans-serif;color:var(--hud-text);white-space:normal;overflow:visible}
body.hud-2032 #gameHud .contract #missiondesc{display:block;margin:3px 0 0;font:12px/1.35 Arial,Helvetica,sans-serif;color:var(--hud-dim)}
body.hud-2032 #gameHud .contract #distance,body.hud-2032 #gameHud .contract .contractbottom{display:inline-block;margin:6px 0 0;font:400 11px/1.2 'Silkscreen',monospace;color:var(--hud-text)}
body.hud-2032 #gameHud .contract .contractbottom::before{content:'·';margin:0 6px;color:var(--hud-dim)}
body.hud-2032 #gameHud .contract .contractbottom .accent{color:var(--hud-gold)}
body.hud-2032 #gameHud .contract #missionDetails{position:absolute;top:6px;right:6px;width:28px;height:28px;min-width:28px;padding:0;border:1px solid var(--hud-line);border-radius:4px;background:#000;color:var(--hud-gold);font-size:14px;cursor:pointer}
body.hud-2032 #gameHud .contract .cargo-status{margin-top:6px}

/* ---- top-right: square map, clock, menu ---- */
body.hud-2032 #gameHud .mapcard{top:max(14px,env(safe-area-inset-top));right:var(--hud-pad);left:auto;bottom:auto;width:188px;height:188px;padding:4px;background:var(--hud-ink);border:2px solid var(--hud-line);border-radius:6px;box-shadow:0 2px 0 #000a,0 6px 18px #0006}
body.hud-2032 #gameHud .map-open-button{width:100%;height:100%;padding:0;border:0;border-radius:3px;background:none;box-shadow:none;overflow:hidden}
body.hud-2032 #gameHud #minimap{width:100%;height:100%;border:0;border-radius:3px;background:#1f2b23}
body.hud-2032 #gameHud .map-north{top:6px;left:auto;right:6px;transform:none;padding:2px 6px;border:1px solid var(--hud-line);border-radius:3px;background:#000c;color:var(--hud-gold);font:400 11px/1.2 'Silkscreen',monospace}
body.hud-2032 #gameHud .map-north::after{content:' ▲'}
body.hud-2032 #gameHud .map-key{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:3px;background:#000b;color:var(--hud-dim);font:400 10px/1.2 'Silkscreen',monospace}
body.hud-2032 #gameHud #clock{top:calc(max(14px,env(safe-area-inset-top)) + 196px);right:var(--hud-pad);width:188px;padding:5px 8px;text-align:center;font:400 12px/1.2 'Silkscreen',monospace;color:var(--hud-text)}
body.hud-2032 #gameHud #hudMenuSlot{top:max(14px,env(safe-area-inset-top));right:calc(var(--hud-pad) + 198px);display:flex;flex-direction:column;gap:6px}
body.hud-2032 #gameHud #hudMenuSlot button{min-width:44px;min-height:36px;padding:0 10px;border:1px solid var(--hud-line);border-radius:5px;background:var(--hud-ink);color:var(--hud-gold);font:400 11px/1 'Silkscreen',monospace;cursor:pointer}

/* ---- bottom-left: health + energy ---- */
body.hud-2032 #gameHud .player-gauges{left:var(--hud-pad);bottom:max(16px,env(safe-area-inset-bottom));display:grid;gap:7px;width:236px;padding:10px 12px}
body.hud-2032 #gameHud .gauge{display:flex;align-items:center;gap:9px;margin:0}
body.hud-2032 #gameHud .gauge-icon{width:14px;text-align:center;font-size:15px;line-height:1}
body.hud-2032 #gameHud .health-gauge .gauge-icon{color:#ff4b48}
body.hud-2032 #gameHud .stamina-gauge .gauge-icon{color:#58a8ff}
body.hud-2032 #gameHud .gauge-track{flex:1;height:11px;border:1px solid #000;border-radius:2px;background:#2a2e31;box-shadow:inset 0 1px 0 #0008}
body.hud-2032 #gameHud #healthFill{background:linear-gradient(#ff5a50,#c9201f)!important}
body.hud-2032 #gameHud #staminaFill{background:linear-gradient(#6cb6ff,#1f63c9)!important}

/* ---- bottom-right: cash + status ---- */
body.hud-2032 #gameHud #cash{right:var(--hud-pad);bottom:calc(max(16px,env(safe-area-inset-bottom)) + 46px);min-width:150px;padding:7px 14px;text-align:right;font:700 22px/1.1 'Silkscreen',monospace;color:var(--hud-gold);text-shadow:0 2px 0 #000}
body.hud-2032 #gameHud #footChip,body.hud-2032 #gameHud .speedcard{right:var(--hud-pad);bottom:max(16px,env(safe-area-inset-bottom));min-width:150px;margin:0;padding:7px 12px;float:none;text-align:right;font:400 12px/1.2 'Silkscreen',monospace;color:var(--hud-text)}
body.hud-2032 #gameHud #footChip::before{content:'🚶 ';filter:grayscale(1) brightness(2)}
body.hud-2032 #gameHud.hud-driving #footChip{display:none}
body.hud-2032 #gameHud .speedcard .speed{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;font:inherit}
body.hud-2032 #gameHud .speedcard #speed{font:700 20px/1 'Silkscreen',monospace;color:var(--hud-gold)}
body.hud-2032 #gameHud .speedcard small{font:400 11px/1.2 'Silkscreen',monospace;color:var(--hud-dim)}
body.hud-2032 #gameHud .speedcard small br{display:none}
body.hud-2032 #gameHud .speedcard #mode{margin-left:6px;color:var(--hud-text);font-weight:400}

/* ---- bottom-centre: car radio (only in a car or a venue with music) ---- */
body.hud-2032 #gameHud .hud-radio{left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 560px));min-width:300px;padding:7px 10px 7px 12px;border-left:1px solid var(--hud-line)}
body.hud-2032 #gameHud.hud-driving .hud-radio,body.hud-2032.hud-radio-live #gameHud .hud-radio{display:flex}
body.hud-2032 #gameHud .hud-music-icon{color:var(--hud-gold);font-size:18px}
body.hud-2032 #gameHud .radio-panel{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;flex:1;min-width:0;padding:0!important;background:none;border:0;box-shadow:none;white-space:nowrap;overflow:hidden}
body.hud-2032 #gameHud #stationName{grid-column:1;font:700 12px/1.2 'Silkscreen',monospace;color:var(--hud-gold);overflow:hidden;text-overflow:ellipsis}
body.hud-2032 #gameHud #radioSong{grid-column:1;font:700 13px/1.3 Arial,sans-serif;color:var(--hud-text);overflow:hidden;text-overflow:ellipsis}
body.hud-2032 #gameHud #radioArtist{display:none}
body.hud-2032 #gameHud #radioStatus:empty{display:none}
body.hud-2032 #gameHud #radioStatus{grid-column:1;font:11px/1.3 Arial,sans-serif;color:var(--hud-dim)}
body.hud-2032 #gameHud .radio-controls{grid-column:2;grid-row:1/span 3;display:flex;gap:4px;align-items:center}
body.hud-2032 #gameHud .radio-controls button{min-width:32px;height:30px;padding:0 6px;border:1px solid var(--hud-line);border-radius:4px;background:#000;color:var(--hud-gold);font:400 11px/1 'Silkscreen',monospace;cursor:pointer}
body.hud-2032 #gameHud .radio-controls #radioShuffle{display:none}
body.hud-2032 #gameHud .hud-radio-summary{display:none!important}
body.hud-2032.hud-radio-drawer #gameHud .hud-radio-summary{display:block!important;flex:1;min-width:0;padding:0;border:0;background:none;text-align:left;color:var(--hud-text)}
body.hud-2032.hud-radio-drawer #gameHud #hudRadioStation{color:var(--hud-gold);font:700 11px/1.2 'Silkscreen',monospace}
body.hud-2032 #gameHud .radio-keys{display:block;grid-column:1;font:400 9px/1.3 'Silkscreen',monospace;color:var(--hud-dim)}

/* ---- feedback line above the radio ---- */
body.hud-2032 #gameHud .hud-feedback{left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 62px);transform:translateX(-50%);width:min(620px,70vw);text-align:center}
body.hud-2032 #gameHud .hud-feedback :is(.status,.interaction-hint,.hover-status,.save-notice){display:inline-block;margin:3px auto 0;padding:6px 12px;border:1px solid var(--hud-line);border-radius:5px;background:var(--hud-ink);color:var(--hud-text);font:400 11px/1.35 'Silkscreen',monospace}
body.hud-2032 #gameHud .hud-feedback :is(.status,.interaction-hint,.hover-status,.save-notice)[hidden]{display:none}

/* ---- tuning banner (top centre, a few seconds after changing station) ---- */
#radioBanner{position:fixed;z-index:30;left:50%;top:max(18px,env(safe-area-inset-top));transform:translate(-50%,-8px);opacity:0;pointer-events:none;padding:8px 18px 9px;min-width:240px;text-align:center;background:var(--hud-ink);border:1px solid var(--hud-line);border-radius:6px;box-shadow:0 2px 0 #000a,0 8px 24px #0008;transition:opacity .25s,transform .25s}
#radioBanner.show{opacity:1;transform:translate(-50%,0)}
#radioBanner b{display:block;font:700 18px/1.15 'Silkscreen',monospace;color:var(--hud-gold);text-shadow:0 2px 0 #000}
#radioBanner small{display:block;margin-top:2px;font:400 10px/1.3 'Silkscreen',monospace;color:var(--hud-dim)}
#radioBanner span{display:block;margin-top:4px;font:700 13px/1.3 Arial,sans-serif;color:var(--hud-text)}

/* ---- contact dialogue: portrait card with gold buttons, as in the reference art ---- */
body.hud-2032 #contactDialog{background:var(--hud-ink);border:1px solid var(--hud-line);border-radius:8px;color:var(--hud-text);box-shadow:0 2px 0 #000,0 16px 40px #000a}
body.hud-2032 #contactDialog .contact-portrait{border:2px solid var(--hud-gold);border-radius:4px;image-rendering:pixelated}
body.hud-2032 #contactDialog #contactName{font:700 18px/1.2 'Silkscreen',monospace;color:var(--hud-gold);letter-spacing:.5px}
body.hud-2032 #contactDialog .eyebrow{font:400 10px/1.2 'Silkscreen',monospace;color:var(--hud-dim)}
body.hud-2032 #contactDialog .contact-actions button{border:1px solid var(--hud-line);border-radius:4px;background:#000;color:var(--hud-text);font:400 12px/1 'Silkscreen',monospace;letter-spacing:.5px}
body.hud-2032 #contactDialog .contact-actions button#acceptJob{color:var(--hud-gold);box-shadow:inset 0 0 0 1px #f2c23055}
body.hud-2032 #contactDialog .contact-actions button:hover:not(:disabled){background:#1b1608}

/* ---- phones: controls own the bottom corners, so the HUD stacks at the top ---- */
body.hud-2032.mobile-ui{--hud-pad:max(10px,env(safe-area-inset-left))}
body.hud-2032.mobile-ui #gameHud .identity strong{font-size:14px}
body.hud-2032.mobile-ui #gameHud .identity{top:max(8px,env(safe-area-inset-top))}
body.hud-2032.mobile-ui #gameHud .contract{top:calc(max(8px,env(safe-area-inset-top)) + 22px);width:calc(100vw - 2 * var(--hud-pad) - 112px);padding:7px 34px 7px 26px}
body.hud-2032.mobile-ui #gameHud .contract .mission-diamond{left:9px;top:10px;width:9px;height:9px}
body.hud-2032.mobile-ui #gameHud .contract #objective{font-size:12px}
body.hud-2032.mobile-ui #gameHud .contract:not(.expanded) #missiondesc{display:none}
body.hud-2032.mobile-ui #gameHud .mapcard{top:max(8px,env(safe-area-inset-top));width:100px;height:100px!important;padding:3px}
body.hud-2032.mobile-ui #gameHud .map-key{display:none}
body.hud-2032.mobile-ui #gameHud #clock{display:none}
body.hud-2032.mobile-ui #gameHud #hudMenuSlot{top:calc(max(8px,env(safe-area-inset-top)) + 106px);right:var(--hud-pad);flex-direction:row}
body.hud-2032.mobile-ui #gameHud #hudMenuSlot button{min-height:44px}
body.hud-2032.mobile-ui #gameHud .player-gauges{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 168px);width:150px;padding:7px 9px;gap:5px}
body.hud-2032.mobile-ui #gameHud #cash{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 206px);min-width:120px;font-size:16px;padding:5px 10px}
body.hud-2032.mobile-ui #gameHud :is(#footChip,.speedcard){bottom:calc(max(16px,env(safe-area-inset-bottom)) + 168px);min-width:120px;padding:6px 10px;font-size:10px}
body.hud-2032.mobile-ui #gameHud .hud-radio{left:var(--hud-pad)!important;right:var(--hud-pad)!important;top:calc(max(8px,env(safe-area-inset-top)) + 160px)!important;bottom:auto!important;transform:none;max-width:none;min-width:0;width:auto}
body.hud-2032.mobile-ui #gameHud .radio-keys{display:none}
body.hud-2032.mobile-ui #gameHud .hud-feedback{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 300px);width:calc(100vw - 2 * var(--hud-pad))}
body.hud-2032.mobile-ui.playing .hud-visibility-button{top:calc(max(8px,env(safe-area-inset-top)) + 106px);right:auto;left:var(--hud-pad)}
@media (max-width:900px) and (min-width:601px){body.hud-2032 #gameHud .hud-radio{max-width:calc(100vw - 2 * 260px);min-width:220px}}
body.hud-hidden.hud-2032 #gameHud{display:none}
/* phones: keep logo, mission card and (while driving) speed + radio visible without expanding */
body.hud-2032.mobile-ui:not(.hud-expanded) #gameHud :is(.identity,.contract){display:block!important}
body.hud-2032.mobile-ui:not(.hud-expanded) #gameHud.hud-driving .speedcard{display:block!important}
body.hud-2032.mobile-ui #gameHud.hud-driving .hud-radio{display:flex!important}
body.hud-2032.mobile-ui #gameHud .hud-radio .hud-radio-summary{display:block!important;flex:1;min-width:0;min-height:0;padding:0;border:0;background:none;text-align:left;color:var(--hud-text)}
body.hud-2032.mobile-ui #gameHud .hud-music-icon{display:inline}
body.hud-2032.mobile-ui #gameHud #hudRadioStation{color:var(--hud-gold);font:700 10px/1.2 'Silkscreen',monospace}
body.hud-2032.mobile-ui #gameHud #hudRadioTitle{display:block;font:700 11px/1.3 Arial,sans-serif;color:var(--hud-text);overflow:hidden;text-overflow:ellipsis}
body.hud-2032.mobile-ui #gameHud .contract:not(.expanded) .contractbottom{display:none}