/* City sandbox HUD: monochrome radar, strong labels, restrained amber accents. */
#hud {font-family:'Arial Narrow',Arial,sans-serif;--hud-ink:#101311;--hud-paper:#f3f1e8;--hud-amber:#ffd84d;}
#hud button,#hud input,#hud summary,#hud kbd {font-family:inherit;}
#hud button {border-radius:4px;}
#menu-btn,#radio-btn {top:24px;left:24px;width:58px;height:54px;border:2px solid #090b09;background:#111a;box-shadow:0 2px 0 #0008;border-radius:4px;}
#radio-btn {left:92px;}
#menu-btn .control-label,#radio-btn .control-label,#menu-btn kbd,#radio-btn kbd {display:none;}
#street,#street.show {left:50%;top:26px;transform:translateX(-50%);max-width:calc(100vw - 800px);padding:8px 14px;background:#101311b3;border:0;border-left:3px solid #ffd84d;border-radius:0;text-transform:uppercase;font-size:19px;letter-spacing:.08em;}
#vitals {left:auto;right:24px;top:24px;width:280px;padding:14px 16px;background:#0a0d0cdd;border:2px solid #090b09;border-radius:4px;grid-template-columns:1fr 1fr;gap:10px;font-size:17px;box-shadow:0 3px 0 #0006;}
#vitals span {font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.07em;}
#vitals progress {height:10px;border:1px solid #070b08;accent-color:#e8d478;}
#vitals #hp-bar {accent-color:#83bd83;}
#money-value {font-family:Impact,'Arial Narrow',sans-serif;font-size:36px;font-weight:500;color:#d4e8bd;letter-spacing:1px;text-shadow:2px 2px #000;}
#eat-btn {font-size:14px;min-height:42px;padding:8px;color:#eee7ca;background:#2b3026;border:1px solid #63705a;}
#players,body.touch #players {top:190px;right:24px;width:280px;max-height:34vh;border-radius:4px;padding:0;border:2px solid #090b09;background:#101311dc;font-size:16px;}
#players h3 {display:flex;justify-content:space-between;gap:10px;margin:0;padding:12px;border:0;background:#050705;font-size:12px;letter-spacing:.08em;color:#bfc8bd;}
#players h3 b {color:#ffd84d;font-size:13px;}
#players ul {padding:0 8px 8px;margin:0;}
#players li {min-height:52px;gap:8px;border-bottom:1px solid #ffffff13;}
#players li .player-dot {width:9px;height:9px;flex:none;background:#f1f1e7;border:2px solid #65725f;border-radius:50%;}
#players li span {display:block;line-height:1.25;min-width:0;}
#players small {display:block;color:#aeb5a8;font-size:12px;font-weight:400;margin-top:4px;}
#players li em {font-style:normal;}
#players .player-voice {width:20px;flex:none;opacity:.22;}
#players .player-voice svg {width:18px;height:18px;}
#players li.speaking .player-voice {opacity:1;color:#ffd84d;}
#players li.speaking .player-dot {background:#ffd84d;box-shadow:0 0 10px #ffd84d88;}
#players li button {width:34px;height:34px;border:1px solid #64705a;background:#242b22;border-radius:3px;flex:none;}
#radar {left:24px;right:auto;bottom:30px;width:380px;padding:0;border:4px solid #080c09;border-radius:3px;background:#121713;box-shadow:0 3px 0 #0008;overflow:hidden;z-index:12;}
#radar header {display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;font-size:10px;color:#d4dbcc;font-weight:700;letter-spacing:.07em;}
#radar header b {display:flex;align-items:center;gap:5px;color:#f8e7a9;font-size:11px;white-space:nowrap;}
#radar header i {width:6px;height:6px;border-radius:50%;background:#a3d697;}
#radar #minimap,body.touch #radar #minimap {display:block;position:static;width:100%;height:220px;max-width:none;right:auto;bottom:auto;border:0;border-radius:0;outline:0;box-shadow:none;cursor:crosshair;}
#radar footer {display:flex;align-items:center;gap:12px;padding:6px 10px;min-height:32px;font-size:10px;font-weight:700;color:#c9d2c3;}
#radar footer span {display:flex;align-items:center;gap:4px;}
#radar footer i {display:inline-block;width:7px;height:7px;border-radius:50%;}
#radar .you-dot {background:#ffd84d;}#radar .human-dot {background:#f0f0e6;}#radar .talk-dot {border:2px solid #ffd84d;background:transparent;}
#map-range {margin-left:auto;white-space:nowrap;}
#radar button {width:28px;height:26px;background:#283125;border:1px solid #7d8b6d;color:#eee;font:bold 18px Arial,sans-serif;border-radius:2px;padding:2px;flex:none;}
#radar button .ui-icon {width:16px;height:16px;}
#radar.expanded {left:50%;bottom:50%;transform:translate(-50%,50%);width:min(1000px,calc(100vw - 40px));z-index:45;border-width:5px;box-shadow:0 0 0 100vmax #000b;}
#radar.expanded #minimap {height:min(66vh,650px);}
#radar.expanded header {height:48px;font-size:15px;}#radar.expanded header b {font-size:16px;}
#attribution {left:24px;right:auto;bottom:8px;font-size:10px;max-width:380px;}
#chat,body.touch #chat {left:24px;bottom:342px;width:380px;}
#chat-log {max-height:180px;}.chat-row {font:15px/1.4 Arial,sans-serif;border-radius:2px;background:#0a100abf;border:0;padding:6px 9px;}
#chat-input {border-radius:3px;font-size:18px;}
#weapon-select {left:auto;right:24px;bottom:30px;border:2px solid #070a07;background:#141b14ed;border-radius:4px;color:#fff1bb;min-width:170px;font-size:18px;text-transform:uppercase;letter-spacing:.04em;}
#voice-panel {top:94px;left:24px;width:220px;padding:10px 12px;background:#101710e8;border:2px solid #090d09;border-radius:4px;font:14px Arial,sans-serif;}
#voice-panel summary {font-size:13px;min-height:20px;letter-spacing:.08em;}
#voice-panel[open] {z-index:38;}
#voice-panel button {font-size:14px;border-radius:3px;background:#283021;}
#voice-self {left:24px;top:146px;padding:7px 10px;background:#0e160cc4;border-left:3px solid #65745e;border-radius:0;color:#c3ccb9;font-size:11px;font-weight:700;letter-spacing:.09em;pointer-events:none;}
#voice-self.active {border-color:#ffd84d;color:#ffd84d;}
#voice-panel[open]~#voice-self {display:none;}
#voice-directions {position:fixed;inset:0;pointer-events:none;z-index:18;}
.speaker-marker {position:absolute;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #ffd84daa;border-left:4px solid #ffd84d;background:#0c120cef;color:#fff0b4;transform:translate(-50%,-100%);font:700 14px Arial,sans-serif;white-space:nowrap;box-shadow:0 0 calc(var(--voice-level,0)*20px) #ffd84d55;}
.speaker-marker .ui-icon {width:18px;height:18px;color:#ffd84d;}
.speaker-marker i {display:none;}
.speaker-marker.edge {transform:translate(-50%,-50%);max-width:210px;}
.speaker-marker.edge i {display:block;width:9px;height:9px;position:absolute;left:calc(50% - 5px);top:-7px;background:#ffd84d;transform:rotate(var(--bearing));clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);}
#hud #emote-bar {display:none;}
#hud #emote-bar.open {display:grid;grid-template-columns:repeat(3,1fr);left:50%;bottom:100px;width:300px;padding:8px;border-radius:4px;background:#101710ef;}
#hud #emote-bar button {width:auto;min-width:80px;height:48px;font:13px Arial,sans-serif;padding:5px 5px 15px;border:1px solid #65705b;border-radius:3px;}
#emote-bar button::after {font:10px Arial,sans-serif;}
#speedo {right:24px;bottom:94px;background:#0c130bdf;border-radius:3px;font:38px Impact,'Arial Narrow',sans-serif;color:#f9edc8;border:2px solid #070c07;}
#jet {left:50%;right:auto;top:88px;transform:translateX(-50%);background:#0c130bd9;border-radius:3px;font:14px Arial,sans-serif;}
#jet .jet-caption {font-size:10px;font-weight:800;letter-spacing:.08em;}
#hint,body.touch #hint {bottom:32px;left:50%;max-width:calc(100vw - 850px);white-space:normal;background:#0d150cdb;border-radius:3px;font:14px/1.4 Arial,sans-serif;padding:10px 14px;}
#toast {border-radius:3px;font:700 18px Arial,sans-serif;border-left:4px solid #ffd84d;}
#rocket-controls {bottom:160px;right:24px;grid-template-columns:repeat(2,124px);}
#rocket-controls button {background:#101810eb;border:1px solid #6d795b;border-radius:3px;font:700 14px Arial,sans-serif;}
#menu .card,#help .card,#radio {border-radius:4px;border:2px solid #141a12;background:#0e140eed;}
#menu h2,#help h2 {font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.02em;}
@media(max-width:1100px){
 #radar{width:330px;}#radar #minimap{height:200px;}#street,#street.show{top:26px;max-width:calc(100vw - 600px);font-size:15px;}
 #chat,body.touch #chat{width:330px;bottom:320px;}#hint,body.touch #hint{bottom:345px;max-width:340px;}
}
@media(max-width:620px){
 #menu-btn,#radio-btn {width:44px;height:44px;top:12px;left:12px;}#radio-btn{left:64px;}
 #vitals{top:12px;right:12px;width:174px;padding:9px;gap:6px;font-size:14px;}#vitals span{font-size:10px;}#money-value{font-size:25px;}#eat-btn{font-size:10px;min-height:30px;padding:5px;}
 #players,body.touch #players{right:12px;top:130px;width:174px;max-height:180px;font-size:13px;}#players h3{font-size:9px;padding:8px;}#players h3 b{font-size:10px;}#players li{min-height:42px;gap:5px;}#players small{font-size:10px;}#players li button{width:28px;height:28px;}#players .player-voice{width:14px;}#players .player-voice svg{width:14px;}
 #voice-panel{top:68px;left:12px;width:142px;padding:8px;}#voice-panel summary{font-size:11px;}#voice-panel[open]{top:68px;width:230px;max-height:calc(100dvh - 260px);overflow:auto;}#voice-self{top:111px;left:12px;font-size:9px;padding:5px 7px;}
 #street,#street.show{top:149px;left:12px;transform:none;max-width:calc(100vw - 210px);font-size:11px;padding:6px;}
 #radar{left:12px;bottom:18px;width:224px;border-width:3px;}#radar header{height:29px;padding:0 6px;font-size:8px;gap:5px;}#radar header b{font-size:9px;gap:3px;}
 #radar #minimap,body.touch #radar #minimap{height:142px;}#radar footer{padding:4px 6px;gap:6px;min-height:25px;font-size:8px;}#radar footer span:nth-child(3){display:none;}#radar button{width:24px;height:24px;}#radar #map-expand{width:25px;height:22px;}
 #radar.expanded{width:calc(100vw - 20px);left:50%;bottom:50%;}#radar.expanded #minimap{height:62dvh;}#radar.expanded header{font-size:11px;height:40px;}#radar.expanded header b{font-size:12px;}
 #attribution{left:12px;bottom:2px;font-size:8px;max-width:224px;}
 #chat,body.touch #chat{left:12px;bottom:232px;width:210px;}#chat-log{max-height:110px;}.chat-row{font-size:12px;padding:4px 6px;}
 #weapon-select{right:12px;bottom:18px;min-width:116px;font-size:12px;min-height:42px;padding:8px;}
 #speedo{right:12px;bottom:72px;font-size:27px;padding:9px;}
 #hint,body.touch #hint{bottom:250px;width:calc(100vw - 32px);max-width:360px;font-size:12px;}
 #jet,body.touch #jet{top:330px;left:12px;transform:none;font-size:11px;padding:7px;}#jet .bar{width:80px;height:7px;}
 #rocket-controls{right:12px;bottom:290px;grid-template-columns:repeat(2,84px);gap:4px;}#rocket-controls button{min-height:42px;padding:5px;font-size:11px;}#rocket-controls kbd{font-size:9px;}
 body.touch #touch-buttons{right:12px;bottom:80px;grid-template-columns:repeat(2,54px);gap:8px;}body.touch #touch-buttons button,body.touch #btn-car.show{width:54px;height:54px;border-radius:4px;}body.touch #btn-car.show{right:12px;bottom:210px;}
 .speaker-marker{font-size:11px;padding:5px 7px;max-width:170px;overflow:hidden;text-overflow:ellipsis;}.speaker-marker .ui-icon{width:14px;height:14px;}
}
#ping {left:164px;top:40px;right:auto;bottom:auto;color:#b5c3ac;font:11px Arial,sans-serif;background:#0b110bac;padding:4px 6px;border-radius:2px;}
#vitals progress {appearance:none;-webkit-appearance:none;background:#303a2b;border:0;height:9px;}
#vitals progress::-webkit-progress-bar {background:#303a2b;}
#vitals progress::-webkit-progress-value {background:#e8d478;}
#vitals #hp-bar::-webkit-progress-value {background:#83bd83;}
#vitals progress::-moz-progress-bar {background:#e8d478;}
#vitals #hp-bar::-moz-progress-bar {background:#83bd83;}
@media(max-width:620px){#ping {left:118px;top:27px;font-size:9px;padding:3px 4px;}}
/* Elevated reticle matches the camera ray used by the firing code. */
#crosshair {left:var(--aim-x,54%);top:var(--aim-y,42%);width:26px;height:26px;font:initial;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px #000);}
#crosshair i {position:absolute;background:#fff6df;box-shadow:0 0 0 1px #15191599;}
#crosshair i:nth-child(1){width:2px;height:7px;left:12px;top:0;}
#crosshair i:nth-child(2){width:2px;height:7px;left:12px;bottom:0;}
#crosshair i:nth-child(3){width:7px;height:2px;left:0;top:12px;}
#crosshair i:nth-child(4){width:7px;height:2px;right:0;top:12px;}
#crosshair b {position:absolute;left:12px;top:12px;width:2px;height:2px;background:#fff;}
#crosshair.hit {transform:translate(-50%,-50%) rotate(45deg);}
#crosshair.hit i {background:#ffdc62;}
#damage-readout {position:fixed;left:var(--aim-x,54%);top:calc(var(--aim-y,42%) + 28px);transform:translateX(-50%);font:700 14px Arial,sans-serif;color:#ffdf7e;background:#101810dd;padding:6px 9px;pointer-events:none;z-index:15;white-space:nowrap;}
#damage-readout[hidden]{display:none;}