/* Loaded last. City-only HUD: the centre of the screen belongs to the game. */
body.city-mobile-ui{--city-edge:12px;--city-safe-bottom:max(12px,env(safe-area-inset-bottom));-webkit-text-size-adjust:100%;overscroll-behavior:none}
body.city-mobile-ui .topbar{position:fixed;inset:0 0 auto;min-height:60px;height:60px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));align-items:center;background:linear-gradient(#071522d9,#07152277);z-index:8;pointer-events:none}
body.city-mobile-ui .topbar a,body.city-mobile-ui .topbar button{pointer-events:auto}
body.city-mobile-ui .brand{gap:6px}body.city-mobile-ui .brand>span{width:30px;height:32px}
body.city-mobile-ui .brand strong{font-size:14px}body.city-mobile-ui .brand small{font-size:7px}
body.city-mobile-ui .top-actions{flex-wrap:nowrap;gap:0}
body.city-mobile-ui #pause{min-height:44px;padding:8px 12px;font-size:12px}
body.city-mobile-ui .shade{background:linear-gradient(0deg,#07101b55,transparent 25%)}
body.city-mobile-ui .hud-left{z-index:8;top:68px;left:var(--city-edge);right:var(--city-edge);width:auto;display:grid;gap:7px;pointer-events:none}
body.city-mobile-ui .hud-left .cash{position:fixed;top:10px;left:50%;transform:translateX(-50%);padding:4px 9px;min-width:70px;border:0;background:none;text-align:center}
body.city-mobile-ui .cash small{font-size:7px;letter-spacing:.1em}body.city-mobile-ui .cash strong{font-size:21px;line-height:1.1}
body.city-mobile-ui .mission{max-width:440px;width:100%;padding:9px 11px;border-radius:12px;background:#071522df}
body.city-mobile-ui .mission small{font-size:8px;letter-spacing:.12em}
body.city-mobile-ui .mission strong{font-size:13px;line-height:1.3;margin-top:3px}
body.city-mobile-ui #city-guide{display:flex;align-items:center;gap:8px;margin-top:8px;color:#a5efdf;font-size:11px;line-height:1.3}
body.city-mobile-ui #city-bearing{font-size:23px;line-height:1;display:inline-block;width:22px;text-align:center;flex:none;color:#ffe19a}
body.city-mobile-ui #city-next-step{flex:1}body.city-mobile-ui #city-distance{font-size:11px;white-space:nowrap}
body.city-mobile-ui .hud-right{position:static;pointer-events:none}
body.city-mobile-ui #map{position:fixed;left:var(--city-edge);bottom:calc(var(--city-safe-bottom) + 86px);width:104px;height:84px;border-radius:12px;opacity:.95}
body.city-mobile-ui .hud-right .status{position:fixed;right:var(--city-edge);bottom:calc(var(--city-safe-bottom) + 86px);min-width:92px;max-width:130px;padding:8px 10px;border-radius:12px}
body.city-mobile-ui .status strong{font-size:27px}body.city-mobile-ui .status small{font-size:8px;letter-spacing:.05em}
body.city-mobile-ui[data-city-driving="false"] .status strong,body.city-mobile-ui[data-city-driving="false"] .status span{display:none}
body.city-mobile-ui #contract-card{max-width:240px;padding:7px 10px}
body.city-mobile-ui #prompt{display:none!important}
body.city-mobile-ui #toast{top:auto;bottom:calc(var(--city-safe-bottom) + 185px);left:50%;width:min(210px,calc(100% - 24px));padding:8px 11px;font-size:11px;line-height:1.3;border-radius:12px;text-align:center;z-index:7}
body.city-mobile-ui #city-warnings{position:relative;max-width:440px;background:#402320e8;border:1px solid #f2b186;color:#ffdbb8;padding:7px 10px;border-radius:10px;font-size:11px;pointer-events:none}
body.city-mobile-ui #touch{display:flex;left:var(--city-edge);right:var(--city-edge);bottom:var(--city-safe-bottom);gap:8px;align-items:flex-end;z-index:9}
body.city-mobile-ui #touch>div{gap:6px}
body.city-mobile-ui #touch button{width:52px;height:62px;min-width:44px;min-height:44px;border-radius:14px;padding:3px;font-size:11px;font-weight:900;user-select:none;-webkit-user-select:none;touch-action:none}
body.city-mobile-ui #touch .action{width:78px;font-size:10px;white-space:normal}
body.city-mobile-ui #touch .action:disabled{opacity:.55}
body.city-mobile-ui #touch button:active{outline:2px solid #a8ffeb;outline-offset:1px}
body.city-mobile-ui .intro{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(500px,calc(100% - 28px));max-height:calc(100svh - 90px);overflow-y:auto;padding:24px;border-radius:20px}
body.city-mobile-ui .intro h1{font-size:clamp(44px,12vw,76px);margin:14px 0}
body.city-mobile-ui .intro .strap{font-size:14px;line-height:1.5;margin:12px 0}
body.city-mobile-ui .city-quick-help{font-size:12px;line-height:1.6;color:#c7dce5;margin:12px 0 18px}
body.city-mobile-ui .intro .eyebrow{font-size:9px;line-height:1.5}
body.city-mobile-ui #pause-dialog{max-width:650px;padding:20px;max-height:calc(100svh - 32px)}
body.city-mobile-ui #pause-dialog h2{font-size:28px}body.city-mobile-ui #pause-dialog h3{font-size:15px;margin:22px 0 10px}
body.city-mobile-ui .city-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.city-mobile-ui .city-menu-grid button{display:block!important;min-height:48px;padding:10px 6px;font-size:12px;white-space:normal!important}
body.city-mobile-ui .city-status-details{border-top:1px solid #ffffff26;margin-top:20px;padding-top:12px}
body.city-mobile-ui .city-status-details summary{cursor:pointer;font-size:13px;padding:10px 0;min-height:44px}
body.city-mobile-ui .city-menu-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
body.city-mobile-ui .city-menu-stats>div{min-width:0;width:auto;text-align:left;padding:10px}
body.city-mobile-ui .dialog{max-height:calc(100svh - 28px);overscroll-behavior:contain}
body.city-mobile-ui #error{z-index:100;position:fixed;inset:15%;padding:24px;overflow:auto}
@media(max-width:359px){body.city-mobile-ui{--city-edge:10px}body.city-mobile-ui #touch button{width:44px;height:56px}body.city-mobile-ui #touch .action{width:66px}body.city-mobile-ui .brand strong{font-size:12px}body.city-mobile-ui #pause{padding:8px;font-size:11px}body.city-mobile-ui .city-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px) and (min-width:560px){body.city-mobile-ui .mission{max-width:360px}body.city-mobile-ui #map{left:auto;right:12px;top:70px;bottom:auto;width:96px;height:78px}body.city-mobile-ui .intro{padding:16px;max-width:620px}body.city-mobile-ui .intro h1{font-size:40px;margin:8px 0}body.city-mobile-ui .intro .fine{display:none}body.city-mobile-ui .city-quick-help{margin:8px 0}body.city-mobile-ui #toast{bottom:14px}}
@media(min-width:1000px) and (pointer:fine){body.city-mobile-ui .mission{max-width:430px}body.city-mobile-ui #map{width:165px;height:134px}body.city-mobile-ui #touch{max-width:520px;margin:auto}}
body.city-mobile-ui [hidden]{display:none!important}