/* One control deck reserves the bottom of the viewport; HUD never sits on it. */
#mobileControls,#mobileMenu{display:none}#mobileControls[hidden],#mobileMenu[hidden]{display:none!important}
#mobileControls{position:fixed;z-index:24;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));height:132px;align-items:flex-end;justify-content:space-between;pointer-events:none;gap:12px}
.mobile-stick{position:relative;width:132px;height:132px;flex:none;border-radius:50%;background:#0c191dad;border:2px solid #d4b45c88;box-shadow:inset 0 0 0 9px #192d2e70,0 3px 14px #0006;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.mobile-stick-ring{position:absolute;inset:24%;border:1px solid #ddc47a66;border-radius:50%}.mobile-stick-thumb{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:linear-gradient(#e7ce83,#987326);border:2px solid #fff1b3;box-shadow:0 3px 6px #0006;transform:translate(-50%,-50%);pointer-events:none}.mobile-stick-caption{position:absolute;bottom:11px;left:0;right:0;text-align:center;font:bold 9px monospace;letter-spacing:1px;color:#e7d793;pointer-events:none}.mobile-stick.held{border-color:#e7ce83;background:#142a31b8}.mobile-actions{display:grid;grid-template-columns:68px 60px;grid-auto-rows:56px;gap:8px;align-content:end;pointer-events:none}.mobile-actions button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#122328e8;border:2px solid #a68d43;border-radius:18px;color:#ffe6a1;font:bold 11px 'Courier New',monospace;min-width:44px;min-height:44px;margin:0;padding:4px;box-shadow:0 3px 8px #0007}.mobile-actions #mobileInteract{background:#cfad50;color:#131c1b}.mobile-actions button.held{background:#f3d56e;color:#122323;transform:translateY(2px)}.mobile-actions button:disabled{opacity:.45}.mobile-actions button[hidden]{display:none}
body.mobile-ui{--mobile-deck:156px;overscroll-behavior:none}body.mobile-ui #touch{display:none!important}body.mobile-ui.playing #mobileControls{display:flex}body.mobile-ui.playing #mobileMenu{display:block;position:fixed;z-index:25;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:48px;height:44px;padding:0;background:#14272beF;border:1px solid #b39a52;color:#f6d993;font:bold 10px monospace;border-radius:8px;touch-action:manipulation}
body.mobile-ui header{left:max(12px,env(safe-area-inset-left));right:68px;top:max(12px,env(safe-area-inset-top));pointer-events:none;align-items:flex-start}body.mobile-ui .identity strong{font:bold 11px monospace;letter-spacing:1px}body.mobile-ui .identity small{font-size:7px;letter-spacing:1px}body.mobile-ui .topright{display:none}body.mobile-ui .district,body.mobile-ui footer,body.mobile-ui .camera-controls{display:none}body.mobile-ui .cash{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 4px);right:70px;font-size:17px;letter-spacing:0}body.mobile-ui .player-gauges{left:max(12px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 36px);bottom:auto;width:154px;padding:5px 7px}body.mobile-ui .gauge>span{font-size:8px;width:40px}body.mobile-ui .contract{top:calc(max(12px,env(safe-area-inset-top)) + 86px);left:max(12px,env(safe-area-inset-left));width:min(248px,calc(100vw - 132px));max-height:108px;overflow:auto;padding:9px 10px}body.mobile-ui .contract.expanded{max-height:calc(100dvh - var(--mobile-deck) - 120px)}body.mobile-ui .contract h2{font:bold 11px/1.3 monospace;margin:7px 0}body.mobile-ui .contract .eyebrow{font-size:8px}body.mobile-ui #missionDetails{min-width:44px;min-height:44px;top:0;right:0;padding:3px;font-size:8px;border:0}body.mobile-ui .contractbottom{font-size:8px;padding-top:5px;margin-top:5px}body.mobile-ui .mapcard{position:fixed;left:auto;right:max(12px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 50px);bottom:auto;width:96px;height:96px;padding:0;display:block;background:none;border:0}body.mobile-ui .map-open-button{width:96px;height:96px}body.mobile-ui .map-open-button .map-north{font-size:10px}body.mobile-ui .map-open-button .map-key{font-size:8px}body.mobile-ui .speedcard{right:max(12px,env(safe-area-inset-right));bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 148px)}body.mobile-ui .speed{margin-top:0;gap:5px}body.mobile-ui .speed>span{font-size:28px;letter-spacing:-1px}body.mobile-ui .speed small{font-size:8px;letter-spacing:0}body.mobile-ui .speed b{font-size:7px;letter-spacing:0}body.mobile-ui .status{left:50%;bottom:calc(var(--mobile-deck) + env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);max-width:calc(100vw - 24px);max-height:40px;overflow:hidden;font:9px/1.4 monospace;letter-spacing:0;white-space:normal;padding:7px 10px;text-align:center;pointer-events:none}body.mobile-ui .interaction-hint{display:none}body.mobile-ui .hover-status{left:50%;bottom:calc(var(--mobile-deck) + 48px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);font-size:9px;padding:6px}body.mobile-ui .save-notice{top:auto;bottom:calc(var(--mobile-deck) + 85px + env(safe-area-inset-bottom));right:12px;max-width:70vw;font:9px/1.4 monospace;pointer-events:none}body.mobile-ui .weather-hud{display:none}body.mobile-ui .radio-panel{display:none}body.mobile-ui:not(.mobile-message) .status{display:none}body.mobile-ui #world{touch-action:none}
#mobileMenuDialog{width:min(420px,calc(100vw - 24px));max-width:420px;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:24px 18px;background:#102125;border:2px solid #c7a457;font:13px monospace;border-radius:10px}#mobileMenuDialog h2{font:bold 20px monospace;letter-spacing:2px;margin:12px 48px 22px 0}.mobile-menu-close{position:sticky;float:right;top:0;min-width:44px;min-height:44px;background:#203536;border:1px solid #b59d53;font-size:24px;color:#eed58c}.mobile-menu-items{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mobile-menu-items button{min-height:48px;background:#213638;border:1px solid #927b42;color:#f6e0a6;padding:10px 6px;font:bold 11px monospace;touch-action:manipulation}#mobileMenuDialog p{font:12px/1.6 monospace}#mobileMenuDialog details{padding-top:12px;border-top:1px solid #927b42}#mobileMenuDialog summary{min-height:44px;padding:12px 0;color:#e9cf86;cursor:pointer}.mobile-controller-status{font:10px/1.5 monospace!important;color:#d2bd72}body.mobile-ui dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}body.mobile-ui dialog button{min-height:44px}body.mobile-ui input,body.mobile-ui select{font-size:16px}body.mobile-ui.map-open #mobileControls,body.mobile-ui.map-open #mobileMenu{display:none!important}
@media(min-width:601px){body.mobile-ui .contract{width:270px;max-height:120px}body.mobile-ui .mapcard,body.mobile-ui .map-open-button{width:120px;height:120px}body.mobile-ui .player-gauges{width:190px}body.mobile-ui .speedcard{top:calc(max(12px,env(safe-area-inset-top)) + 178px)}}
@media(max-height:540px) and (min-width:480px){body.mobile-ui{--mobile-deck:124px}#mobileControls{height:104px}.mobile-stick{width:104px;height:104px}.mobile-stick-thumb{width:40px;height:40px}.mobile-actions{grid-template-columns:68px 60px;grid-auto-rows:44px;gap:6px}.mobile-actions button{font-size:10px;border-radius:14px}body.mobile-ui .contract{top:calc(max(8px,env(safe-area-inset-top)) + 30px);left:186px;width:min(270px,calc(100vw - 340px));max-height:90px}body.mobile-ui .player-gauges{top:calc(max(8px,env(safe-area-inset-top)) + 32px);width:154px}body.mobile-ui .mapcard,body.mobile-ui .map-open-button{width:78px;height:78px}body.mobile-ui .mapcard{top:calc(max(8px,env(safe-area-inset-top)) + 46px)}body.mobile-ui .speedcard{top:calc(max(8px,env(safe-area-inset-top)) + 124px)}body.mobile-ui .status{max-width:calc(100vw - 340px);bottom:calc(12px + env(safe-area-inset-bottom));max-height:36px}body.mobile-ui .hover-status{bottom:calc(52px + env(safe-area-inset-bottom));max-width:calc(100vw - 340px)}body.mobile-ui .save-notice{top:auto;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 340px)}}

/* Compact portrait keeps its HUD above the control deck. */
@media(max-width:479px) and (max-height:620px){body.mobile-ui .contract{max-height:80px}body.mobile-ui .hover-status,body.mobile-ui .save-notice{display:none}}

/* Radio belongs to the drawer, never to the mobile play area. The original
   controls stay mounted, so station changes preserve handlers and playback. */
body.mobile-ui #mobileMenuDialog .radio-panel{display:block;position:static;width:100%;max-height:none;overflow:visible;pointer-events:auto;padding:12px;border-radius:6px;margin:0 0 14px}
#mobileMenuDialog .radio-panel #stationName{font:bold 13px/1.4 monospace;white-space:normal;overflow-wrap:anywhere}
#mobileMenuDialog .radio-panel #radioSong{font:12px/1.4 monospace;white-space:normal;margin-top:7px;overflow-wrap:anywhere}
#mobileMenuDialog .radio-panel #radioArtist{font:10px/1.5 monospace;white-space:normal;overflow-wrap:anywhere}
#mobileMenuDialog .radio-panel .radio-status{display:block;font:10px/1.5 monospace;margin-top:6px}
#mobileMenuDialog .radio-panel .radio-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
#mobileMenuDialog .radio-controls button{width:100%;min-width:44px;min-height:48px;font-size:16px;margin:0;touch-action:manipulation}
#mobileMenuDialog .mobile-menu-radio[hidden]{display:none}
/* A one-line objective replaces the stacked job card while exploring.
   DETAILS still expands progress, cargo and rewards when needed. */
body.mobile-ui .contract:not(.expanded){max-height:none;min-height:44px;padding:7px 50px 7px 10px;overflow:hidden}
body.mobile-ui .contract:not(.expanded) .eyebrow,body.mobile-ui .contract:not(.expanded) .contractbottom,body.mobile-ui .contract:not(.expanded) #cargoStatus{display:none}
body.mobile-ui .contract:not(.expanded) h2{font:bold 10px/1.5 monospace;margin:7px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mobile-ui .contract.expanded #missionDetails{position:sticky;float:right}
body.mobile-ui .contract.expanded .eyebrow{padding-right:0}
body.mobile-ui .identity small{display:none}
body.mobile-ui .speed b{display:none}
body.mobile-ui .save-notice:empty,body.mobile-ui .status:empty{display:none}
@media(max-width:360px){#mobileMenuDialog{padding:14px 12px}#mobileMenuDialog .radio-panel{padding:10px 8px}#mobileMenuDialog .radio-panel .radio-controls{gap:3px}body.mobile-ui .player-gauges{width:136px}body.mobile-ui .cash{font-size:15px}body.mobile-ui .identity strong{font-size:9px}}

body.mobile-ui:not(.mobile-driving) .speedcard .speed{display:none}

/* Independent pedals keep full acceleration while the left thumb steers. */
.mobile-actions #mobileAccelerate{background:#25744be8;color:#efffee;border-color:#83d5a6}
#mobileControls.hover-controls .mobile-actions{grid-template-columns:repeat(3,52px);grid-auto-rows:52px;gap:6px}
@media(max-width:360px){#mobileControls.hover-controls .mobile-stick{width:116px;height:116px}#mobileControls.hover-controls .mobile-actions{grid-template-columns:repeat(3,46px)}}

.mobile-actions #mobilePunch{background:#6b2a24e8;border-color:#e08a5e;color:#ffe2cf}
.mobile-actions #mobileShoot{background:#2a2f3ae8;border-color:#c9c9d6;color:#f1f1f7}
.mobile-actions #mobileRoll{background:#22413ae8;border-color:#7fd6b8;color:#dffaf0}
.mobile-actions #mobileWeapon{background:#3a2c14e8;border-color:#e8c06a;color:#fff1cc;font-size:11px}
.mobile-actions #mobileCruise,.mobile-actions #mobileAuto,.mobile-actions #mobileWarp{background:#16324ae8;border-color:#6cb6ff;color:#e3f1ff;font-size:11px}

/* Browser bars, keyboard focus and retained Safari page zoom change the visual
   viewport without moving position:fixed controls inside the layout viewport.
   Screen coordinates plus inverse scale keep MOVE and all actions reachable. */
body.mobile-ui #mobileControls{
 left:var(--mobile-viewport-left,0px);right:auto;bottom:var(--mobile-viewport-bottom,0px);
 width:var(--mobile-control-width,100vw);height:calc(var(--mobile-control-height,132px) + max(12px,env(safe-area-inset-bottom)));
 padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
 transform:scale(var(--mobile-control-scale,1));transform-origin:bottom left;gap:12px;
}
body.mobile-ui #mobileControls .mobile-stick{width:var(--mobile-stick-size,132px);height:var(--mobile-stick-size,132px)}
body.mobile-ui #mobileControls .mobile-actions{flex:none;min-width:0;grid-template-columns:repeat(var(--mobile-action-columns,3),var(--mobile-action-width,60px));grid-auto-rows:var(--mobile-action-row,56px);gap:var(--mobile-action-gap,8px)}
body.mobile-ui.playing .compact-hud,body.mobile-ui.playing .hud-visibility-button{touch-action:none}
body.hud-2032.mobile-ui #gameHud.compact-hud{
 left:var(--mobile-viewport-left,0px);top:var(--mobile-viewport-top,0px);right:auto;bottom:auto;
 width:var(--mobile-control-width,100vw);height:calc(var(--mobile-viewport-height,100dvh) / var(--mobile-control-scale,1));
 transform:scale(var(--mobile-control-scale,1));transform-origin:top left;
}
body.hud-2032.mobile-ui.playing .hud-visibility-button{
 left:calc(var(--mobile-viewport-left,0px) + var(--hud-pad,12px) * var(--mobile-control-scale,1));
 top:calc(var(--mobile-viewport-top,0px) + (max(8px,env(safe-area-inset-top)) + 106px) * var(--mobile-control-scale,1));
 transform:scale(var(--mobile-control-scale,1));transform-origin:top left;
}
body.mobile-ui.mobile-compact-height #mobileControls .mobile-actions button{font-size:10px;border-radius:14px}

/* The combat deck can gain a third row after a weapon is equipped. Reserve its
   real height so vitals and mode labels cannot sit over a movement/action hitbox. */
body.mobile-ui{--mobile-deck:calc(var(--mobile-control-height,132px) + 24px)}
body.hud-2032.mobile-ui #gameHud .player-gauges,
body.hud-2032.mobile-ui #gameHud :is(#footChip,.speedcard){bottom:calc(max(16px,env(safe-area-inset-bottom)) + max(168px,var(--mobile-control-height,132px)))}
body.hud-2032.mobile-ui #gameHud #cash{bottom:calc(max(16px,env(safe-area-inset-bottom)) + max(206px,calc(var(--mobile-control-height,132px) + 38px)))}

/* The responsive columns own each hitbox; legacy fixed widths must not push
   JUMP/ROLL past the screen on smaller phones. Long pedal labels can wrap. */
body.mobile-ui #mobileControls .mobile-actions button{width:100%;max-width:100%;min-width:44px;overflow-wrap:anywhere}
/* Riding labels stay on one line without shrinking the finger-sized targets. */
body.mobile-ui #mobileControls .mobile-actions #mobileInteract[data-mobile-key="g"]{font-size:9px;letter-spacing:0;padding:2px 1px;white-space:nowrap;overflow-wrap:normal;word-break:normal}
body.mobile-ui #mobileControls .mobile-actions #mobileRun[data-mobile-key="s"]{padding:2px 1px;white-space:nowrap;overflow-wrap:normal;word-break:normal}

/* floating joystick: follows the thumb when it lands anywhere on the lower-left of the screen */
.mobile-stick.floating{transition:none;z-index:5;box-shadow:inset 0 0 0 9px #192d2e70,0 0 0 3px #ffd75c55,0 3px 18px #0008}
.mobile-stick{transition:transform .12s ease-out}