/* Compact pilot instruments are shared; touch layout is activated by phone identity. */
.parachute-hud{position:absolute;top:96px;left:24px;width:min(320px,calc(100vw - 48px));box-sizing:border-box;padding:10px 12px;border:1px solid #cad7b746;border-radius:9px;background:#12242b70;pointer-events:none;color:#e4eed2;font-family:var(--mono);text-shadow:0 1px 3px #071922}
.parachute-hud>strong{display:block;font:16px/1.2 var(--mono);letter-spacing:.04em}
.parachute-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.parachute-metrics>span{display:flex;flex-direction:column;gap:4px;font:8px/1.2 var(--mono);color:#bfd1bf;white-space:nowrap}
.parachute-metrics b{font:12px/1.2 var(--mono);color:#edf2dc}
.parachute-hud>small{display:block;margin-top:7px;font:9px/1.4 var(--mono);color:#c7d9c4}
.foot-combat-hud{position:fixed;left:24px;bottom:36px;z-index:8;display:flex;align-items:baseline;gap:9px;padding:7px 10px;border:1px solid #bfd8b438;border-radius:7px;background:#12242b70;color:#e4eed2;font:12px/1.4 var(--mono);pointer-events:none;text-shadow:0 1px 3px #071922}
.foot-combat-hud[hidden],.foot-combat-reticle[hidden]{display:none}
.foot-combat-hud strong{font:11px/1.4 var(--mono);letter-spacing:.04em}.foot-combat-hud small{font:9px/1.4 var(--mono);color:#d6dda8}.foot-combat-hud small:empty{display:none}
.foot-combat-copy,.match-state>.match-count{display:contents}
.foot-combat-copy.foot-weapon-selector{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;min-width:0;min-height:44px;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;pointer-events:auto;touch-action:manipulation}
.foot-weapon-selector strong:after{content:' ▾';opacity:.65}
.foot-weapon-menu{position:absolute;left:0;bottom:calc(100% + 6px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(280px,calc(100vw - var(--phone-left,24px) - var(--phone-right,24px)));box-sizing:border-box;padding:6px;border:1px solid #b6c6ad66;border-radius:9px;background:#10242cf5;box-shadow:0 8px 24px #0007;pointer-events:auto}
.foot-weapon-menu[hidden],.foot-sniper-scope[hidden]{display:none}
.foot-weapon-menu button{display:flex;min-width:0;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:0;padding:4px;border:1px solid #b4c6b244;border-radius:5px;background:#243d40;color:#e2ebd0;font:10px/1.2 var(--mono);touch-action:manipulation}
.foot-weapon-menu button small{font:7px/1.2 var(--mono);letter-spacing:0}.foot-weapon-menu button[aria-pressed=true]{border-color:#d4ecaf;background:#405743}.foot-weapon-menu button:disabled{opacity:.38}
.foot-combat-hud:has(.foot-weapon-menu:not([hidden])){z-index:40}
.phone-ui .foot-weapon-menu{top:calc(100% + 6px);bottom:auto}
.foot-sniper-scope{position:fixed;left:0;top:var(--phone-viewport-top,0px);width:100vw;height:var(--phone-viewport-height,100dvh);z-index:7;pointer-events:none;background:radial-gradient(circle at center,transparent 0 42vmin,#06101466 42.2vmin,#020609eb 44vmin)}
.foot-sniper-scope>div{position:absolute;left:50%;top:50%;width:84vmin;height:84vmin;transform:translate(-50%,-50%);border:1px solid #15221eb3;border-radius:50%;overflow:hidden}
.foot-sniper-scope i{position:absolute;background:#101a15b8}.foot-sniper-scope i:first-child{left:0;right:0;top:50%;height:1px}.foot-sniper-scope i:nth-child(2){top:0;bottom:0;left:50%;width:1px}.foot-sniper-scope b{position:absolute;left:calc(50% + 10px);top:calc(50% + 16px);color:#d7e4bfa8;text-shadow:0 1px #132a23;font:9px/1 var(--mono)}
.match-state .match-short-label{display:none}
/* Public-lobby presence is essential status, including on Steam Deck when a
   saved minimal HUD hides optional match instruments. Reuse the original
   live counters; crew notices and alerts must not make them disappear. */
#flightUI[data-free-roam=true] .flight-logo{display:none}
#flightUI[data-free-roam=true] .flight-top .match-state{display:grid!important;visibility:visible;grid-template-columns:repeat(2,minmax(0,1fr));width:112px;flex:0 1 112px;height:24px;box-sizing:border-box;align-items:center;padding:2px 5px;gap:5px;border:1px solid #bfd8b44d;border-radius:5px;background:#12242ba6;backdrop-filter:none;transform:none;font-family:var(--mono)}
#flightUI[data-free-roam=true] .flight-top .match-state .match-count{display:flex;min-width:0;align-items:center;justify-content:center;flex-direction:row;gap:4px;margin:0}
#flightUI[data-free-roam=true] .flight-top .match-state b{font-size:12px;line-height:1;font-weight:500;margin:0}
#flightUI[data-free-roam=true] .flight-top .match-state .match-short-label{display:block;font-size:6px;line-height:1;letter-spacing:0;margin:0;white-space:nowrap}
#flightUI[data-free-roam=true] .flight-top .match-state .match-full-label{position:absolute;width:1px;max-width:none;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#flightUI[data-free-roam=true] .flight-top .match-state i{display:none}
.foot-gyro-quick,.settings-tab-short{display:none}
.combat-gyro-card{padding:18px;border:1px solid #9abbad42;border-radius:10px;background:#122d3670}
.combat-setting-heading h4,.combat-controls-note h4{font:18px/1.3 var(--mono);margin:7px 0 16px;color:#e2efcf}
.combat-gyro-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.combat-gyro-actions button{min-height:48px;padding:10px;border:1px solid #bfd8b44d;border-radius:8px;background:#17352f88;color:#e2efcf;font:12px/1.4 var(--mono)}
.combat-gyro-actions button[aria-pressed=true]{background:#cde8a4c9;color:#18352a;border-color:#e6f9bc}
.combat-gyro-actions button:disabled{opacity:.45}
#phoneAimGyroStatus{font:14px/1.5 Inter,Arial,sans-serif;color:#c0d4c4;margin:14px 0}
.combat-gyro-sensitivity{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px;font:11px/1.4 var(--mono);color:#bdd5bd}
.combat-gyro-sensitivity input{width:100%;min-width:0;min-height:44px;margin:0;accent-color:#d0e5a2}
.combat-controls-note{padding:20px 0 0}.combat-controls-note p{font:13px/1.65 Inter,Arial,sans-serif;color:#bdd0c0}.combat-controls-note b{color:#e1efcf}
#settingsCombat{max-width:760px;margin:0 auto;padding:0 0 14px}
.foot-combat-reticle{position:fixed;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);z-index:8;pointer-events:none;filter:drop-shadow(0 1px 1px #051a1f)}
.foot-combat-reticle i{position:absolute;background:#e8f2d6d9;border-radius:1px}.foot-combat-reticle i:nth-child(1),.foot-combat-reticle i:nth-child(2){top:calc(50% - 1px);width:6px;height:2px}.foot-combat-reticle i:nth-child(1){left:0}.foot-combat-reticle i:nth-child(2){right:0}.foot-combat-reticle i:nth-child(3),.foot-combat-reticle i:nth-child(4){left:calc(50% - 1px);width:2px;height:6px}.foot-combat-reticle i:nth-child(3){top:0}.foot-combat-reticle i:nth-child(4){bottom:0}.foot-combat-reticle b{position:absolute;top:calc(50% - 1px);left:calc(50% - 1px);width:2px;height:2px;background:#e8f2d6;border-radius:50%}
.foot-combat-reticle[data-mode=grenade]{width:36px;height:36px;border:1px dashed #e8f2d666;border-radius:50%}.foot-combat-reticle[data-aiming=true]{opacity:.95}.foot-combat-reticle[data-aiming=false]{opacity:.65}
#flightUI:has(#parachuteHUD:not([hidden])) :is(.instruments,.bottom-flight,.touch-actions,.camera-label,#groundHint,#worldCrewHUD){display:none!important}
.pilot-health-hud{position:absolute;top:96px;left:24px;width:154px;box-sizing:border-box;padding:8px 10px;border:1px solid #cad7b746;border-radius:7px;background:#12242b70;pointer-events:none;color:#e4eed2;font-family:var(--mono);text-shadow:0 1px 3px #071922}
.pilot-health-hud>div:first-child{display:flex;justify-content:space-between;gap:6px;font:10px/1.3 var(--mono)}
.pilot-health-track{height:3px;margin-top:6px;background:#bfd1bf25;border-radius:2px;overflow:hidden}
.pilot-health-track>i{display:block;width:100%;height:100%;background:#cde8a4}
.pilot-health-hud>small{display:block;margin-top:5px;font:9px/1.3 var(--mono);color:#f4c5a2;white-space:nowrap}
.pilot-stamina-hud{display:grid;grid-template-columns:42px minmax(0,1fr) 26px;align-items:center;gap:5px;width:100%;height:9px;margin-top:6px;font:8px/1.1 var(--mono);color:#b6dce0;pointer-events:none}
.pilot-stamina-hud[hidden]{display:none}
.pilot-stamina-hud>span:first-child{white-space:nowrap;letter-spacing:0}
.pilot-stamina-hud output{font:8px/1.1 var(--mono);text-align:right;color:#d9eeeb}
.pilot-stamina-track{display:block;height:3px;border-radius:2px;background:#9cc9ce25;overflow:hidden}
.pilot-stamina-track>i{display:block;width:100%;height:100%;background:#8fd6db;transform-origin:left center;transform:scaleX(1)}
.pilot-stamina-hud[data-state=sprinting] .pilot-stamina-track>i{background:#c2e9e0}
.pilot-stamina-hud[data-state=exhausted]{color:#ffd094}
.pilot-stamina-hud[data-state=exhausted] .pilot-stamina-track>i{background:#e8ac6f}
.pilot-stamina-hud[data-state=waiting] .pilot-stamina-track>i{background:#a5c6bf}
/* Activated by phone identity only. Desktop, tablets and Steam Deck keep their layout. */
.phone-ui{--phone-hud-top:0px;--phone-top:max(8px,env(safe-area-inset-top));--phone-bottom:max(12px,env(safe-area-inset-bottom));--phone-left:max(12px,env(safe-area-inset-left));--phone-right:max(12px,env(safe-area-inset-right));--phone-control-width:min(194px,calc(50vw - var(--phone-right) - 8px));--phone-stick-size:80px;--phone-move-size:148px;--phone-lower-size:94px;--phone-panel:#10283238;--phone-telemetry-height:36px;-webkit-text-size-adjust:100%;overscroll-behavior:none}
.phone-ui #phoneControls{position:fixed;left:0;top:var(--phone-viewport-top,0px);width:100%;height:var(--phone-viewport-height,100dvh);z-index:8;pointer-events:none;font-family:var(--mono);color:#e2efcf;text-shadow:0 1px 3px #071922;user-select:none;-webkit-user-select:none}
.phone-ui .phone-toolbar{position:absolute;top:var(--phone-hud-top);left:auto;right:var(--phone-right);width:44px;height:auto;min-height:0;max-height:144px;bottom:auto;display:grid;grid-template-columns:repeat(1,44px);grid-auto-rows:44px;align-items:start;align-content:start;gap:6px;margin:0;pointer-events:none}
.phone-ui #phoneControls:is([data-state=flight],[data-state=foot],[data-state=spectating]) .phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 6px)}
.phone-ui .phone-toolbar button,.phone-ui .phone-home-display button{display:flex;align-items:center;justify-content:center;height:44px;min-height:44px;max-height:44px;align-self:start;box-sizing:border-box;border:1px solid #bfd8b438;border-radius:12px;background:#10283238;color:#e7f0d7;font:9px/1.3 var(--mono);letter-spacing:0;box-shadow:none;touch-action:manipulation;pointer-events:auto}
.phone-ui .phone-toolbar button{width:44px;min-width:44px;max-width:44px;padding:0}
.phone-ui .phone-toolbar svg{display:block;width:18px;height:18px;pointer-events:none;flex:none}
.phone-ui .phone-toolbar button:disabled{opacity:.4}
.phone-ui #phoneControls[data-state=foot] .phone-toolbar:has(#phoneFootRear:not([hidden])){width:94px;max-height:94px;grid-template-columns:repeat(2,44px);gap:6px}
.phone-ui #phoneControls #phoneFootRear{font-size:7px;line-height:1.2;touch-action:none}
.phone-ui #phoneControls #phoneFootRear.is-active{border-color:#c8eef0b3;background:#2e5d6770}
.phone-ui #phoneControls #phoneFootRear[hidden],.phone-ui #phoneControls:not([data-state=foot]) #phoneFootRear{display:none!important}
/* Navigation already reserves one horizontal utility row. Retain its height
   when the map is visible, so the new hold target never enters the gun lane. */
.phone-ui:has(#groundMinimap:not([hidden])) #phoneControls[data-state=foot] nav.phone-toolbar:has(#phoneFootRear:not([hidden])){width:188px;height:44px;max-height:44px;grid-template-columns:repeat(4,44px);gap:4px}
.phone-ui:has(#groundMinimap:not([hidden])):has(#phoneControls[data-state=foot] #phoneFootRear:not([hidden])){--ground-nav-width:188px}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui:has(#groundMinimap:not([hidden])):has(#phoneControls[data-state=foot] #phoneFootRear:not([hidden])){--ground-nav-width:calc(var(--ground-map-size) + 204px)}
}
@media(orientation:landscape) and (max-height:300px){
 .phone-ui #phoneControls[data-state=foot] nav.phone-toolbar:has(#phoneFootRear:not([hidden])){width:188px;height:44px;max-height:44px;grid-template-columns:repeat(4,44px);gap:4px}
}
@media(orientation:portrait){
 .phone-ui:has(#phoneControls[data-state=foot] #phoneFootRear:not([hidden])):not(:has(#groundMinimap:not([hidden]))) #flightUI :is(#announcer,#warning){top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 108px)}
}
.phone-ui #phoneControls :is(#phoneFullscreen,#phoneDisplayStatus){display:none!important}
.phone-ui .phone-display-status{margin:0;padding:6px 9px;border-radius:6px;background:#112a32d9;color:#bcd2c2;font:11px/1.5 var(--mono);pointer-events:none;overflow-wrap:anywhere}
.phone-ui .phone-display-status:empty{display:none}
.phone-ui .phone-game-controls{position:absolute;inset:0;display:none;pointer-events:none}
.phone-ui #phoneControls:is([data-state=flight],[data-state=foot]) .phone-game-controls{display:block}
/* Left thumb flies. The right cluster keeps Look, Brake and actions close together. */
.phone-ui .phone-stick{position:absolute;bottom:calc(var(--phone-bottom) + 20px);width:var(--phone-stick-size);height:var(--phone-stick-size);border:1px solid #c0dec533;border-radius:50%;background:radial-gradient(circle,#274c5324 0 45%,#14323a12 46% 100%);box-shadow:none;pointer-events:auto;touch-action:none;outline:none}
.phone-ui .phone-move-stick{--phone-thumb-size:clamp(40px,calc(var(--phone-move-size) * .32),48px);left:var(--phone-left);right:auto;width:var(--phone-move-size);height:var(--phone-move-size)}
.phone-ui .phone-look-stick{right:var(--phone-right)}
.phone-ui #phoneFreeLookStick.phone-free-look-stick{--phone-free-look-size:60px;--phone-thumb-size:18px;right:calc(var(--phone-right) + var(--phone-stick-size) + 8px);bottom:calc(var(--phone-bottom) + 20px + var(--phone-stick-size) * .5 - var(--phone-free-look-size) * .5);width:var(--phone-free-look-size);height:var(--phone-free-look-size);min-width:44px;min-height:44px;box-sizing:border-box;border:1px dashed #b5dce057;background:radial-gradient(circle,#193a4530 0 40%,#102b3414 41% 100%);color:#c2e2e3}
.phone-ui #phoneFreeLookStick .phone-free-look-orbit{position:absolute;inset:12% 6%;border:1px solid #a7d8db3d;border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.phone-ui #phoneFreeLookStick .phone-free-look-eye{position:absolute;left:calc(50% - 9px);top:calc(50% - 9px);width:18px;height:18px;opacity:.8;pointer-events:none}
.phone-ui #phoneFreeLookStick[data-mode=aim]{border-style:solid;border-color:#c0d8ac5c;color:#d3e4c1}
.phone-ui #phoneFreeLookStick[data-mode=aim] .phone-free-look-eye{opacity:0}
.phone-ui #phoneFreeLookStick[data-mode=aim] .phone-free-look-orbit{inset:25%;transform:none;border-color:#c0d8ac45}
.phone-ui #phoneFreeLookStick[data-mode=aim]:before{content:'';position:absolute;left:calc(50% - 9px);top:calc(50% - 9px);width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/1px 18px no-repeat,linear-gradient(currentColor,currentColor) center/18px 1px no-repeat;opacity:.7;pointer-events:none}
.phone-ui #phoneFreeLookStick .phone-stick-thumb{background:#a6dce02e;border-color:#c5ebed80}
.phone-ui #phoneFreeLookStick .phone-stick-label{font-size:7px;letter-spacing:.02em;color:#b8d8dc}
.phone-ui #phoneFreeLookStick.is-active{border-style:solid;border-color:#c8eef0b3;background:radial-gradient(circle,#2e5d6738 0 40%,#193e4826 41% 100%)}
.phone-ui #phoneControls:not([data-state=foot]) #phoneFreeLookStick,.phone-ui #phoneControls[data-riding-horse=true] #phoneFreeLookStick,.phone-ui #phoneFreeLookStick[hidden]{display:none!important}
.phone-ui .phone-stick-ring{position:absolute;inset:23%;border:1px solid #c0dec529;border-radius:50%;pointer-events:none}
.phone-ui .phone-stick-thumb{position:absolute;left:calc(50% - var(--phone-thumb-size,36px) / 2);top:calc(50% - var(--phone-thumb-size,36px) / 2);width:var(--phone-thumb-size,36px);height:var(--phone-thumb-size,36px);border-radius:50%;background:#bbd6bc32;border:1px solid #d4ecc46a;box-shadow:none;transform:translate(var(--phone-stick-x,0px),var(--phone-stick-y,0px));pointer-events:none}
.phone-ui .phone-stick.is-active{border-color:#cfe8ad87;background:radial-gradient(circle,#42675735 0 45%,#2347371f 46% 100%)}
.phone-ui .phone-stick.is-active .phone-stick-thumb{background:#d3eeb568;border-color:#e4f8c8}
.phone-ui .phone-stick-label{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font:8px/1.4 var(--mono);letter-spacing:.06em;color:#b9d2c1;pointer-events:none}
.phone-ui :is(.phone-flight-primary,.phone-flight-secondary,.phone-flight-combat,.phone-flight-access,.phone-foot-actions,.phone-interaction){position:absolute;left:auto;right:var(--phone-right);transform:none;width:var(--phone-control-width);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;pointer-events:none}
.phone-ui .phone-action{height:44px;min-height:44px;min-width:44px;padding:5px 3px;border:1px solid #bed3b638;border-radius:12px;background:var(--phone-panel);color:#e7f0d7;font:8px/1.3 var(--mono);letter-spacing:0;box-shadow:none;pointer-events:auto;touch-action:none}
.phone-ui .phone-flight-primary{width:94px;grid-template-columns:repeat(2,44px);bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 72px)}
.phone-ui .phone-action.phone-fire{background:#29443452;border-color:#cde6a380;color:#e2f2bb;font-weight:700}
.phone-ui .phone-flight-access{bottom:calc(var(--phone-bottom) + 20px);right:calc(var(--phone-right) + var(--phone-stick-size) + 8px);width:64px;grid-template-columns:64px}
.phone-ui .phone-brake{font-size:9px;font-weight:700;border-color:#e7d39b85;background:#715c3542;color:#fff0c5}
.phone-ui .phone-flight-secondary{width:94px;grid-template-columns:repeat(2,44px);bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 72px)}
.phone-ui .phone-flight-combat{width:max(144px,var(--phone-control-width));height:44px;grid-template-columns:44px 44px minmax(44px,1fr);bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 24px)}
.phone-ui .phone-action:is(.is-active,[aria-pressed=true]){background:#cde8a4c9;color:#18352a;border-color:#e6f9bc}
.phone-ui #phoneBurner[aria-pressed=true]{font-weight:700;border-width:2px}
.phone-ui .phone-action:disabled{opacity:.3;box-shadow:none}
.phone-ui .phone-action.phone-research-release{grid-column:span 2;min-height:48px;height:auto;padding:8px 6px;font-size:9px;font-weight:700;border-color:#d3c69b99;background:#403b25dd;color:#fff0bd}
.phone-ui .phone-action.phone-research-release:disabled{opacity:.78}
.phone-ui .phone-power-control{position:relative;display:flex;flex-direction:column;gap:1px;width:100%;min-width:44px;height:44px;min-height:44px;max-height:44px;padding:0;border:0;border-radius:7px;background:#10283218;pointer-events:auto;touch-action:none}
.phone-ui .phone-power-control>span{position:absolute;top:1px;left:5px;right:5px;pointer-events:none;display:flex;justify-content:space-between;align-items:center;color:#c5d7c6;font:7px/1.3 var(--mono);letter-spacing:.06em}
.phone-ui .phone-power-control output{color:#e0eccb;letter-spacing:0}
.phone-ui #phonePower{display:block;width:100%;height:44px;min-height:44px;margin:0;background:none;accent-color:#d0e5a2;touch-action:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.phone-ui #phonePower::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#d0e5a270}
.phone-ui #phonePower::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7.5px;border:1px solid #e3efc1;border-radius:50%;background:#d0e5a2}
.phone-ui #phonePower::-moz-range-track{height:3px;border-radius:2px;background:#d0e5a270}
.phone-ui #phonePower::-moz-range-thumb{width:18px;height:18px;border:1px solid #e3efc1;border-radius:50%;background:#d0e5a2}
.phone-ui #phoneControls[data-systems=open] :is(.phone-flight-primary,.phone-interaction){display:none}
.phone-ui .phone-foot-actions{width:94px;grid-template-columns:repeat(2,44px);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
.phone-ui #phoneCrouch.phone-crouch{position:absolute;left:calc(var(--phone-left) + var(--phone-move-size) + 8px);right:auto;bottom:calc(var(--phone-bottom) + 20px);width:44px;min-width:44px;height:44px;min-height:44px;padding:3px;font-size:8px;pointer-events:auto;touch-action:none}
.phone-ui #phoneControls:not([data-state=foot]) #phoneCrouch,.phone-ui #phoneCrouch[hidden]{display:none}
.phone-ui #phoneControls[data-foot-combat=true] .phone-foot-actions{width:144px;grid-template-columns:repeat(3,44px)}
/* Compact four-button row; retain a full 44px touch area for every action. */
.phone-ui #phoneControls[data-foot-punch=true] .phone-foot-actions{width:188px;grid-template-columns:repeat(4,44px);gap:4px}
.phone-ui .phone-foot-actions .phone-action{padding:4px 2px;border-radius:10px;font-size:8px}
.phone-ui #phoneFootPunch.phone-punch{border-color:#d6c9a85c;background:#514e3438;color:#f2e6c7}
.phone-ui #phoneFootPunch.phone-punch.is-active{border-color:#f0dfb8;background:#dbc495bd;color:#352b1d}
.phone-ui #phoneFootPunch[hidden]{display:none}
.phone-ui .phone-foot-combat{position:absolute;right:var(--phone-right);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 76px);width:94px;display:grid;grid-template-columns:repeat(2,44px);gap:6px;pointer-events:none}
.phone-ui .phone-foot-combat[hidden]{display:none}
/* Fire and Jump exchange their existing cells only during ordinary armed walking. */
.phone-ui #phoneControls[data-foot-action-swap=true] .phone-foot-actions>#phoneFootFire,.phone-ui #phoneControls[data-foot-action-swap=true] .phone-foot-combat>#phoneJump{width:44px;min-width:44px;max-width:44px;height:44px;box-sizing:border-box}
.phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-interaction{left:var(--phone-left);right:auto;width:calc(50vw - var(--phone-left) - 8px);bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 26px)}
.phone-ui .foot-combat-hud{top:calc(var(--phone-viewport-top,0px) + var(--phone-hud-top) + var(--phone-telemetry-height) + 52px);bottom:auto;left:var(--phone-left);width:min(252px,calc(50vw - var(--phone-left) - 8px));max-width:calc(50vw - var(--phone-left) - 8px);min-height:56px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:5px 6px;font-size:11px;background:#12242b85}
.phone-ui .foot-combat-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:2px;overflow-wrap:anywhere}
.phone-ui .foot-combat-hud[hidden]{display:none}
.phone-ui .foot-combat-hud strong{font-size:9px;line-height:1.25;letter-spacing:0}.phone-ui .foot-combat-hud small{font-size:8px;line-height:1.3}
.phone-ui .foot-gyro-quick{display:flex;flex:none;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;box-sizing:border-box;padding:4px;border:1px solid #bfd8b45c;border-radius:8px;background:#10283290;color:#e0edce;font:8px/1.4 var(--mono);letter-spacing:0;text-align:center;touch-action:manipulation;pointer-events:auto}
.phone-ui .foot-gyro-quick[aria-pressed=true]{background:#cde8a4c9;color:#18352a;border-color:#e6f9bc}
.phone-ui .foot-gyro-quick[hidden]{display:none}
.phone-ui:has(#announcer.visible:not(:where(.hud-disabled,[hidden]))) .foot-combat-hud{visibility:hidden}
.phone-ui .foot-combat-reticle{top:calc(var(--phone-viewport-top,0px) + var(--phone-viewport-height,100dvh) / 2)}
.phone-ui .phone-interaction{bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 24px);grid-template-columns:minmax(0,1fr)}
.phone-ui .phone-interaction .phone-interact{height:44px;min-height:44px;font-size:9px;border-color:#cae6a870;background:#29443452;color:#e2f2bb}
.phone-ui #phoneControls[data-state=flight]:not([data-rotor-pilot=true]):has(#phoneInteract:not([hidden])) .phone-flight-primary{display:none}
.phone-ui #phoneControls[data-state=flight] .phone-interaction{bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 72px)}
.phone-ui #phoneControls[data-state=flight] .phone-foot-actions{display:none}
.phone-ui #phoneControls[data-state=foot] .phone-interaction{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 76px)}
.phone-ui #phoneControls[data-state=foot] :is(.phone-flight-primary,.phone-flight-secondary,.phone-flight-combat,.phone-flight-access){display:none}
.phone-ui #phoneControls:is([data-state=driver],[data-state=passenger],[data-state=gunner]) .phone-flight-combat{display:none!important}
/* A manned defense gun keeps two large actions and its existing look pad. */
.phone-ui #phoneControls[data-base-defense=true] .phone-game-controls{display:block}
.phone-ui #phoneControls[data-base-defense=true] :is(.phone-move-stick,.phone-flight-secondary,.phone-flight-access,.phone-foot-actions,.phone-power-control,#phoneSystems,#phoneView,#phoneWingman){display:none!important}
.phone-ui #phoneControls[data-base-defense=true] .phone-flight-primary{display:grid!important;right:var(--phone-right);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 28px);width:72px;grid-template-columns:72px}
.phone-ui #phoneControls[data-base-defense=true] .phone-flight-primary button:not(#phoneGun){display:none!important}
.phone-ui #phoneControls[data-base-defense=true] #phoneGun{display:block;min-width:72px;min-height:52px;font-size:10px}
.phone-ui #phoneControls[data-base-defense=true] .phone-pilot-action{display:block;left:var(--phone-left);top:auto;bottom:calc(var(--phone-bottom) + 20px);width:94px;min-height:48px;font-size:10px}
.phone-ui #phoneControls[data-base-defense=true] .phone-interaction{display:none!important}
.phone-ui.landing-challenge .phone-flight-combat{width:144px;grid-template-columns:44px minmax(44px,1fr)}
.phone-ui .phone-pilot-action{position:absolute;top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 44px);bottom:auto;left:var(--phone-left);width:44px;height:44px;border-color:#ebc3a563;background:#613c2c42;color:#ffdfc2;font-size:7px}
.phone-ui #phoneControls[data-state=parachute] .phone-game-controls{display:block}
.phone-ui #phoneControls[data-state=parachute] .phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 6px)}
.phone-ui #phoneControls[data-state=parachute] :is(.phone-flight-primary,.phone-flight-secondary,.phone-flight-combat,.phone-foot-actions,.phone-interaction,#phoneSystems){display:none!important}
.phone-ui #phoneControls[data-state=parachute] .phone-pilot-action{left:var(--phone-left);right:auto;width:94px;font-size:9px;border-color:#cae6a870;background:#29443452;color:#e2f2bb}
.phone-ui #phoneControls[data-state=parachute] .phone-flight-access{grid-template-columns:minmax(44px,1fr)}
.phone-ui #flightUI .parachute-hud{top:var(--phone-hud-top);left:var(--phone-left);width:calc(100vw - var(--phone-left) - var(--phone-right));height:var(--phone-telemetry-height);display:flex;align-items:center;gap:8px;padding:3px 7px;background:#12242b50}
.phone-ui .parachute-hud>strong{font-size:9px;line-height:1.2;flex:0 1 62px;min-width:0}
.phone-ui .parachute-metrics{flex:1;min-width:0;gap:4px;margin-top:0}
.phone-ui .parachute-metrics>span{font-size:6px;gap:2px}
.phone-ui .parachute-metrics b{font-size:9px}
.phone-ui .parachute-hud>small{display:none}
.phone-ui #flightUI .pilot-health-hud{top:var(--phone-hud-top);left:var(--phone-left);width:min(144px,calc(50vw - var(--phone-left) - 8px));height:var(--phone-telemetry-height);padding:3px 7px;background:#12242b50}
.phone-ui .pilot-health-hud>div:first-child{font-size:8px}
.phone-ui .pilot-health-hud>small{font-size:8px;margin-top:2px}
.phone-ui .pilot-health-hud:has(#pilotHealthStatus:not([hidden])) .pilot-health-track{display:none}
.phone-ui .pilot-health-hud:has(#pilotStaminaHUD:not([hidden])) .pilot-health-track{height:2px;margin-top:3px}
.phone-ui #flightUI .pilot-stamina-hud{grid-template-columns:30px minmax(0,1fr);height:7px;gap:4px;margin-top:3px;font-size:6px;line-height:1.1}
.phone-ui .pilot-stamina-hud output{display:none}
.phone-ui .pilot-stamina-track{height:3px}
@media(max-height:360px){.phone-ui #flightUI .pilot-health-hud{padding:2px 7px}.phone-ui .pilot-health-hud>div:first-child,.phone-ui .pilot-health-hud>small{font-size:7px}.phone-ui .pilot-health-hud>small{margin-top:1px}}
@media(max-height:360px) and (orientation:landscape){
 .phone-ui .pilot-health-hud:has(#pilotStaminaHUD:not([hidden]))>div:first-child{line-height:1}
 .phone-ui .pilot-health-hud:has(#pilotStaminaHUD:not([hidden])) .pilot-health-track{margin-top:2px}
 .phone-ui #flightUI .pilot-stamina-hud{margin-top:1px}
}

/* Essential flight parameters form one slim top strip, never two tall side panels. */
.phone-ui .phone-telemetry{position:absolute;top:var(--phone-hud-top);left:var(--phone-left);right:var(--phone-right);height:var(--phone-telemetry-height);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:3px 4px;border-radius:7px;background:#10283280;pointer-events:none}
.phone-ui .phone-telemetry>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:2px}
.phone-ui .phone-telemetry small{font:7px/1.2 var(--mono);color:#b9d1bd;white-space:nowrap}
.phone-ui .phone-telemetry i{font-style:normal}
.phone-ui .phone-telemetry b{font:clamp(9px,2.4vw,12px)/1.2 var(--mono);white-space:nowrap;letter-spacing:0}
.phone-ui #flightUI :is(.instruments,.touch-actions,#flightMapButton,#pauseButton,#wingmanPanel,#padHints,#keyboardHints,.camera-label){display:none!important}
.phone-ui #flightUI .flight-top{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 6px);left:var(--phone-left);right:calc(50% + 8px);width:min(252px,calc(50vw - var(--phone-left) - 8px));min-height:0;gap:6px;justify-content:flex-start}
.phone-ui #flightUI .flight-logo{display:none}
.phone-ui #flightUI .flight-top .match-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;height:40px;box-sizing:border-box;align-items:center;font-family:var(--mono);padding:4px 7px;border:1px solid #bfd8b438;border-radius:7px;background:#12242b70;backdrop-filter:none;gap:8px;flex-wrap:nowrap}
.phone-ui #flightUI .flight-top .match-state .match-count{display:flex;min-width:0;max-width:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;margin:0}
.phone-ui #flightUI .flight-top .match-state b{font-size:14px;line-height:1;font-weight:500}
.phone-ui #flightUI .flight-top .match-state span{font-size:6px;line-height:1.25;letter-spacing:0;max-width:100%;margin:0;overflow-wrap:anywhere}
.phone-ui #flightUI .flight-top .match-state i{display:none}
.phone-ui #flightUI .bottom-flight{top:auto;bottom:calc(var(--phone-bottom) + var(--phone-move-size) + 36px);left:var(--phone-left);right:calc(50% + 8px);display:block}
.phone-ui #flightUI .airframe-status{position:absolute;bottom:4px;left:90px;transform:none;width:calc(100% - 90px);min-width:0;max-width:none;margin:0;display:block}
.phone-ui #flightUI .airframe-status>:is(span,.hull,small),.phone-ui #flightUI #aircraftSystems{display:none}
.phone-ui #flightUI .weapon{display:flex;gap:7px;margin:0;font-size:8px;flex-wrap:wrap;align-items:center}
.phone-ui #flightUI .weapon b{font-size:11px;margin-left:3px}
.phone-ui #flightUI .weapon>span:last-child{font-size:7px;max-width:none;flex-basis:100%}
.phone-ui #flightUI #rackStatus{display:block;text-align:left;font:7px/1.4 var(--mono);letter-spacing:0;margin-top:4px}
.phone-ui #flightUI #rearmStatus{margin:0;font:9px/1.4 var(--mono);text-align:left}
.phone-ui #flightUI .radar-wrap{position:relative;top:auto;left:0;right:auto;width:78px;height:94px;transform:none;flex:none;border-color:#b8d5af43;background:#0d283680;backdrop-filter:none}
.phone-ui #flightUI .radar-wrap canvas{display:block;width:76px;height:76px}
.phone-ui #flightUI .radar-wrap>span{font-size:7px;left:5px;right:5px;bottom:5px;letter-spacing:0}
.phone-ui #flightUI .flight-mission{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 54px);left:var(--phone-left);right:calc(50% + 8px);align-items:flex-start;gap:3px}
.phone-ui #flightUI .flight-mission>span,.phone-ui #flightUI .flight-mission small{font-size:8px;letter-spacing:0}
.phone-ui #flightUI .flight-mission b{font-size:15px}
.phone-ui #flightUI #socialMicIndicator{font-size:8px;border:0;padding:0;margin:0;line-height:1.5}
.phone-ui #flightUI #socialUnreadCount{font-size:8px;min-width:18px;height:18px;margin:0 0 0 5px}
.phone-ui #flightUI #interactionHint{display:none!important}
.phone-ui #flightUI #groundHint,.phone-ui #flightUI:has(#trainingPanel:not([hidden])) #groundHint{bottom:auto;top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 107px);left:var(--phone-left);right:calc(50% + 8px);transform:none;width:auto;max-width:none;font-size:9px;padding:5px 7px;max-height:52px;background:#10283296;white-space:normal}
.phone-ui #flightUI .matchmaking-badge,.phone-ui #flightUI #publicLobbyBadge{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 9px);left:var(--phone-left);right:calc(50% + 8px);width:auto;max-width:none;transform:none;padding:7px 9px;gap:8px;min-height:0;font-size:9px;box-shadow:none;flex-wrap:wrap}
.phone-ui #flightUI .matchmaking-badge-text{font-size:9px;line-height:1.4}
.phone-ui #flightUI .matchmaking-badge button{min-height:44px;font-size:9px;padding:7px 9px}
.phone-ui #flightUI #audioUnlock{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 52px);left:var(--phone-left);right:auto;transform:none;min-height:44px;padding:8px 10px;font-size:9px;max-width:135px}
.phone-ui #flightUI #encounterPanel{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 95px);left:var(--phone-left);right:calc(50% + 8px);width:auto;max-width:none;max-height:120px;padding:9px 11px;overflow:auto;pointer-events:auto}
.phone-ui #flightUI #encounterPanel .micro{font-size:8px}
.phone-ui #flightUI #encounterPanel h3{font-size:20px;margin:6px 0}
.phone-ui #flightUI #encounterPanel p{font-size:10px;line-height:1.45;margin:6px 0}
.phone-ui #flightUI #encounterPanel button{font-size:10px;min-height:44px;padding:8px}
.phone-ui #flightUI #respawnPanel{width:calc(100% - 28px);max-width:390px;max-height:calc(var(--phone-viewport-height,100dvh) - 100px);overflow:auto;padding:20px;border-radius:10px}
.phone-ui #flightUI #respawnPanel h2{font-size:34px}
.phone-ui #flightUI #respawnPanel p{font-size:14px;line-height:1.6}
.phone-ui #flightUI #respawnPanel button{min-height:48px;font-size:13px}

/* Every phone menu has a real scroll area and keyboard-aware height. */
.phone-ui :is(#manualDialog,#settingsDialog,#pauseDialog,#roomDialog,#resultDialog,#crewDialog,#socialDialog,#mapDialog){position:fixed;top:calc(var(--phone-viewport-top,0px) + var(--phone-top));left:var(--phone-left);right:var(--phone-right);bottom:auto;width:auto;max-width:none;max-height:calc(var(--phone-viewport-height,100dvh) - var(--phone-top) - var(--phone-bottom));margin:0;border-radius:12px;scroll-padding:12px;overscroll-behavior:contain}
.phone-ui :is(#manualDialog,#roomDialog,#resultDialog,#crewDialog){padding:20px;overflow-y:auto}
.phone-ui :is(#pauseDialog.guide-dialog,#settingsDialog){height:calc(var(--phone-viewport-height,100dvh) - var(--phone-top) - var(--phone-bottom));padding:0;overflow:hidden}
.phone-ui :is(dialog,#customizer,#hangar) :is(button,select,input,textarea,summary,a.solid){touch-action:manipulation}
.phone-ui :is(dialog,#customizer) :is(button,a.solid,summary){min-height:44px}
.phone-ui :is(dialog,#customizer) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;min-height:44px;max-width:100%}
.phone-ui :is(dialog,#customizer) input[type=range]{min-height:36px;accent-color:#d0e5a2}
.phone-ui :is(dialog,#customizer) :is(.micro,.setting-note,.custom-copy){font-size:11px;line-height:1.6}
.phone-ui :is(dialog,#customizer) h2{font-size:32px;line-height:1.1}
.phone-ui :is(.settings-header,.pause-header){height:auto;min-height:0;padding:15px 16px 0;max-height:46%;overflow-y:auto;overscroll-behavior:contain}
.phone-ui #pauseDialog .pause-header h2,.phone-ui #settingsDialog .settings-header h2{font-size:31px;margin:7px 0 11px}
.phone-ui .pause-heading{flex-direction:row;align-items:center;gap:12px}
.phone-ui .pause-heading>.solid{width:auto;min-width:106px;min-height:44px;font-size:12px;padding:11px;margin:0}
.phone-ui .pause-header .dialog-intro{font-size:12px;line-height:1.5;margin-bottom:11px}
.phone-ui #pauseDialog .pause-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-bottom:13px}
.phone-ui #pauseDialog .pause-actions>button{min-width:0;min-height:44px;font-size:10px;padding:9px 7px;margin:0}
.phone-ui :is(.pause-body,.settings-body){flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:15px 16px;scroll-padding:14px}
.phone-ui :is(.pause-footer,.settings-footer){flex:none;min-height:0;padding:10px 16px;gap:10px}
.phone-ui :is(.pause-footer,.settings-footer) .menu-help,.phone-ui .settings-header .menu-help{display:none}
.phone-ui :is(.pause-footer,.settings-footer) [data-menu-status]{font-size:10px;line-height:1.4;min-height:0}
.phone-ui #settingsDialog .settings-footer .solid.close{min-width:95px;min-height:44px;font-size:12px;padding:11px}
.phone-ui #settingsDialog .settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.phone-ui #settingsDialog .settings-tabs button{min-width:0;min-height:44px;font-size:9px;padding:8px 5px;line-height:1.35}
.phone-ui #settingsDialog :is(.setting,.hud-setting-row){padding:12px 0;min-height:0;font-size:14px;gap:8px}
.phone-ui #settingsDialog .setting{flex-direction:column;align-items:stretch}
.phone-ui #settingsDialog .setting select{width:100%;max-width:100%;min-height:44px}
.phone-ui #settingsDialog .hud-setting-row{grid-template-columns:minmax(0,1fr)}
.phone-ui #settingsDialog .audio-slider{grid-template-columns:minmax(0,1fr) 40px;gap:9px;padding:12px 0;font-size:14px;min-height:0}
.phone-ui #settingsDialog .audio-slider label{grid-column:1/-1}
.phone-ui #settingsDialog .audio-slider input{grid-row:2;grid-column:1}
.phone-ui #settingsDialog .audio-slider output{grid-row:2;grid-column:2;font-size:12px}
.phone-ui #settingsDialog .hud-switch-row{padding:12px 0;min-height:65px}
.phone-ui #settingsDialog .hud-switch-row strong{font-size:14px}
.phone-ui #settingsDialog .hud-switch-row small{font-size:12px}
.phone-ui #settingsDialog .hud-presets{gap:6px}
.phone-ui #settingsDialog .hud-presets button{padding:10px 8px;min-height:62px}
.phone-ui #settingsDialog .hud-presets button strong{font-size:10px}
.phone-ui #settingsDialog .hud-presets button small{font-size:10px}
.phone-ui #settingsDialog .hud-preview{height:145px}
.phone-ui #pauseDialog #explorationHUD{grid-template-columns:minmax(0,1fr);gap:11px}
.phone-ui #pauseDialog #explorationHUD :is(#roomPanel,#landmarkPanel,#onFootPanel){padding:14px}
.phone-ui #pauseDialog .pause-world-heading h3{font-size:27px}
.phone-ui #pauseDialog .pause-world-heading p{font-size:13px}
.phone-ui #pauseDialog #roomRoster{font-size:12px;line-height:1.75}
.phone-ui #pauseDialog #roomPanel button{font-size:11px;min-height:44px}
.phone-ui #pauseDialog .aircraft-recovery{padding:14px;flex-direction:column;align-items:stretch}
.phone-ui #pauseDialog .aircraft-recovery h3{font-size:25px}
.phone-ui #pauseDialog .aircraft-recovery p{font-size:12px}
.phone-ui #pauseDialog .aircraft-recovery button{min-width:0;font-size:11px;min-height:44px}
.phone-ui .phone-guide{border:1px solid #9abbad42;border-radius:8px;background:#122d36c9;margin:0 0 16px;padding:0;flex:none}
.phone-ui .phone-guide summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:13px 14px;font:11px/1.4 var(--mono);color:#d4e6bd;cursor:pointer;list-style:none}
.phone-ui .phone-guide summary::-webkit-details-marker{display:none}
.phone-ui .phone-guide summary span{font-size:9px;color:#93b39e}
.phone-ui .phone-guide-copy{padding:0 14px 13px}
.phone-ui .phone-guide-copy p{font:13px/1.65 Inter,Arial,sans-serif;color:#bbd0c4;margin:0 0 12px}
.phone-ui .phone-guide-copy p:last-child{margin-bottom:0}
.phone-ui .phone-guide-copy b{display:block;font:10px/1.5 var(--mono);color:#d5e9b6;margin-bottom:4px;letter-spacing:.08em}
.phone-ui #phoneTrainingInfo{margin-bottom:16px}
.phone-ui #pauseDialog #trainingPanel{position:static;inset:auto;width:100%;max-width:none;max-height:none;padding:14px;overflow:visible;border-radius:8px;pointer-events:auto}
.phone-ui #pauseDialog #trainingPanel .training-heading span{font-size:11px}
.phone-ui #pauseDialog #trainingPanel h3{font-size:27px;margin:10px 0}
.phone-ui #pauseDialog #trainingPanel p{font-size:13px;line-height:1.65}
.phone-ui #pauseDialog #trainingPanel :is(#lessonTip,#lessonMetric){font-size:11px;line-height:1.6}
.phone-ui #pauseDialog #trainingPanel .training-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.phone-ui #pauseDialog #trainingPanel .training-actions button{font-size:10px;padding:9px 5px;min-height:44px}
.phone-ui #pauseDialog #trainingPanel .lesson-picker{font-size:11px;margin-top:11px}

/* Hangar controls flow naturally on small screens rather than covering the jet. */
.phone-ui #hangar{display:flex;flex-direction:column;gap:15px;padding:calc(var(--phone-top) + 58px) 16px calc(var(--phone-bottom) + 10px);overflow:auto;overscroll-behavior:contain}
.phone-ui #hangar header{display:flex;flex-wrap:wrap;gap:10px;padding:7px 0 12px;min-height:0;height:auto}
.phone-ui #hangar .brand{font-size:29px}
.phone-ui #hangar :is(.wordmark,.system){display:none}
.phone-ui #hangar nav{display:flex;flex:1;justify-content:flex-end;gap:9px;margin:0;min-height:44px}
.phone-ui #hangar .navlink{display:block;font-size:10px;min-height:44px}
.phone-ui #hangar .navlink.active{display:none}
.phone-ui #hangar .hangar-overview{display:flex;flex-direction:column;gap:17px;padding:0;min-width:0}
.phone-ui #hangar .hero{max-width:none}
.phone-ui #hangar .hero .eyebrow{font-size:10px;line-height:1.5}
.phone-ui #hangar h1{font-size:56px;margin:11px 0;line-height:.9}
.phone-ui #hangar .hero>p{display:block;font-size:13px;line-height:1.6;max-width:none}
.phone-ui #hangar .hero-meta{font-size:10px;gap:17px;margin-top:13px}
.phone-ui #hangar .hero-meta b{font-size:19px}
.phone-ui #hangar .pilot-card{padding-top:14px;max-width:none;width:100%;font-size:13px}
.phone-ui #hangar .pilot-name{font-size:30px}
.phone-ui #hangar .pilot-rank{font-size:12px}
.phone-ui #hangar .pilot-card small{font-size:11px}
.phone-ui #hangar .pilot-wallet{font-size:14px}
.phone-ui #hangar .customize-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.phone-ui #hangar .customize-links button{min-height:48px;font-size:11px;padding:11px 9px}
.phone-ui #hangar #cloudBadge{font-size:10px;max-width:130px;min-height:44px}
.phone-ui #hangar .aircraft-label{display:block;position:static;inset:auto;align-self:stretch;width:auto;margin:0;padding:13px 14px}
.phone-ui #hangar .aircraft-label h2{font-size:28px;margin:8px 0 12px}
.phone-ui #hangar .aircraft-label h2 span{display:inline;font-size:16px;margin:0 0 0 7px}
.phone-ui #hangar .aircraft-label>div:not(.aircraft-line){font-size:11px;line-height:1.5;margin-top:5px}
.phone-ui #hangar .aircraft-label .micro{font-size:10px}
.phone-ui #hangar .coordinates{display:none}
.phone-ui #hangar .sortie-config{display:flex;flex-direction:column;min-height:0;margin:0;gap:0}
.phone-ui #hangar .mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.phone-ui #hangar .mode-tab{min-height:68px;padding:12px 10px;font-size:13px;text-align:left}
.phone-ui #hangar .mode-tab small{font-size:10px;line-height:1.5;margin-top:5px}
.phone-ui #hangar .aircraft-select{display:flex;align-items:stretch;flex-direction:column;gap:6px;min-width:0;padding:13px;font-size:11px}
.phone-ui #hangar .aircraft-select select{font-size:20px;min-height:44px;width:100%;max-width:100%}
.phone-ui #hangar .deployment{display:flex;flex-direction:column;gap:14px;min-height:0;padding:16px;margin:0;align-items:stretch}
.phone-ui #hangar .mission-map{display:none}
.phone-ui #hangar .mission-info h3{font-size:29px}
.phone-ui #hangar .mission-info p{font-size:11px;line-height:1.6}
.phone-ui #hangar .mission-info .micro{font-size:10px}
.phone-ui #hangar .flight-profile{display:flex;flex-direction:column;align-items:stretch;gap:7px;border:0;padding:0;max-width:none;width:100%;font-size:12px}
.phone-ui #hangar .flight-profile select{width:100%;max-width:100%;min-height:44px;font-size:16px}
.phone-ui #hangar .flight-profile :is(label,small){font-size:11px}
.phone-ui #hangar .deploy{width:100%;margin:0;padding:15px;min-height:72px;font-size:26px;align-self:auto}
.phone-ui #hangar .deploy small{font-size:10px;line-height:1.5}
.phone-ui #hangar footer{display:flex;flex-wrap:wrap;min-height:0;padding:6px 0;gap:8px;font-size:10px}
.phone-ui #hangar footer>span:nth-child(2){display:none}
.phone-ui #hangar footer button{font-size:10px;min-height:44px}
.phone-ui #hangar #controllerStatus{max-width:100%;font-size:10px}
.phone-ui #hangar #matchmakingHangar{margin-top:13px;padding:13px}
.phone-ui #hangar #matchmakingHangar h3{font-size:23px}
.phone-ui #hangar #matchmakingHangar p{font-size:11px}

/* Customization keeps a preview above its sheet; text editing uses the full viewport. */
.phone-ui #customizer{position:fixed;top:calc(var(--phone-viewport-top,0px) + min(32dvh,220px));left:var(--phone-left);right:var(--phone-right);bottom:auto;width:auto;max-width:none;height:calc(var(--phone-viewport-height,100dvh) - min(32dvh,220px) - var(--phone-bottom));max-height:none;overflow-y:auto;padding:17px;border-radius:12px 12px 0 0;scroll-padding:15px;overscroll-behavior:contain}
.phone-ui #customizer:has(input:focus,textarea:focus){top:calc(var(--phone-viewport-top,0px) + var(--phone-top));height:calc(var(--phone-viewport-height,100dvh) - var(--phone-top) - var(--phone-bottom))}
.phone-ui #customizer .customizer-head{position:sticky;top:-17px;z-index:3;padding:10px 0;background:#102633}
.phone-ui #closeCustomizer{min-height:44px;min-width:44px;font-size:26px}
.phone-ui #customizer h2{font-size:31px;margin:11px 0 15px}
.phone-ui #customizer .custom-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.phone-ui #customizer .custom-tabs button{flex:1;min-width:70px;min-height:44px;padding:10px 7px;font-size:10px}
.phone-ui #customizer :is(.custom-option,.custom-preset){font-size:13px;min-height:48px;padding:11px}
.phone-ui #customizer .custom-option small{font-size:11px;line-height:1.6}
.phone-ui #customizer .option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.phone-ui #customizer .name-entry{display:flex;flex-direction:column;gap:8px}
.phone-ui #customizer .name-entry input{width:100%;min-width:0;font-size:16px}
.phone-ui #customizer .name-entry button{min-height:44px;font-size:11px}
.phone-ui #customizer :is(.account-identity,#accountState,#localSaveStatus,#characterSaveStatus){font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.phone-ui #customizer .backup-actions{display:flex;flex-direction:column;gap:9px}
.phone-ui #customizer .backup-actions button,.phone-ui #customizer .backup-actions label{width:100%;min-height:44px;font-size:11px}
.phone-ui #customizer .backup-actions input{max-width:100%;font-size:13px}

/* Social sheets remain usable when the software keyboard reduces the viewport. */
.phone-ui #socialDialog.social-dialog{height:calc(var(--phone-viewport-height,100dvh) - var(--phone-top) - var(--phone-bottom));max-height:calc(var(--phone-viewport-height,100dvh) - var(--phone-top) - var(--phone-bottom));padding:0;overflow:hidden}
.phone-ui #socialDialog .social-header{padding:12px 14px;gap:10px}
.phone-ui #socialDialog .social-header h2{font-size:26px;margin-top:5px}
.phone-ui #socialDialog .social-header .micro{font-size:8px}
.phone-ui #socialDialog .social-close{min-height:44px;padding:9px 11px;font-size:10px}
.phone-ui #socialDialog .social-session-status{font-size:9px;padding:7px 14px}
.phone-ui #socialDialog .social-layout{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.phone-ui #socialDialog .social-chat{flex:none;min-height:0;padding:13px 14px;border-right:0;border-bottom:1px solid #a6c4b438;overflow:visible}
.phone-ui #socialDialog .social-history{flex:none;height:140px;min-height:0;max-height:140px;overflow:auto;scroll-padding:10px}
.phone-ui #socialDialog:has(#chatMessage:focus) .social-history{height:72px}
.phone-ui #socialDialog .social-composer{padding-top:11px;margin-top:9px;flex:none}
.phone-ui #socialDialog .social-composer textarea{font-size:16px;min-height:60px;max-height:100px;margin:7px 0 8px;padding:10px;line-height:1.4}
.phone-ui #socialDialog .social-compose-actions .solid{min-height:44px;font-size:11px;min-width:100px;padding:10px 15px}
.phone-ui #socialDialog .social-chat-status{font-size:10px;line-height:1.5;margin-top:7px}
.phone-ui #socialDialog .social-message{padding:9px 11px;margin-bottom:9px}
.phone-ui #socialDialog .social-message p{font-size:14px;line-height:1.55}
.phone-ui #socialDialog .social-voice{flex:none;min-height:0;overflow:visible;padding:15px 14px}
.phone-ui #socialDialog .social-voice h3{font-size:11px}
.phone-ui #socialDialog .social-voice-notice{font-size:12px;line-height:1.6;min-height:0}
.phone-ui #socialDialog .social-voice-actions button{min-height:44px;font-size:10px}
.phone-ui #socialDialog .social-microphone-button{min-height:48px;font-size:12px}
.phone-ui #socialDialog .social-volume-row input{min-height:36px}
.phone-ui #socialDialog .social-peer-controls{grid-template-columns:75px minmax(0,1fr) 34px;gap:9px}
.phone-ui #socialDialog .social-peer-controls button{min-height:44px;font-size:11px}
.phone-ui #socialDialog .social-peer-controls input{min-height:36px}
.phone-ui #socialDialog .social-footer{display:none}
.phone-ui #roomDialog h2,.phone-ui #resultDialog h2{font-size:34px;margin:16px 0 12px}
.phone-ui #roomDialog>p,.phone-ui #resultDialog>p{font-size:13px;line-height:1.65}
.phone-ui #roomDialog .room-options{grid-template-columns:minmax(0,1fr);gap:18px}
.phone-ui #roomDialog .room-field{font-size:11px;margin-top:17px}
.phone-ui #roomDialog .room-field input{font-size:16px;padding:12px;min-width:0}
.phone-ui #roomDialog .public-lobby-card{margin:17px 0;padding:16px}
.phone-ui #roomDialog .public-lobby-card h3{font-size:29px}
.phone-ui #roomDialog .public-lobby-card p{font-size:13px}
.phone-ui #roomDialog .public-lobby-actions{flex-wrap:wrap}
.phone-ui #roomDialog .public-lobby-actions .solid{flex-basis:100%;font-size:11px}
.phone-ui #roomDialog .room-options h3{font-size:27px}
.phone-ui #roomDialog .room-options p{font-size:12px}
.phone-ui #roomDialog #roomStatus{font-size:11px;line-height:1.6}
/* Unfold the field atlas across the phone's actual visible viewport. The
   parchment edge and faint folds are decoration; every map touch reaches canvas. */
.phone-ui #mapDialog.world-map{position:fixed;top:var(--phone-viewport-top,0px);left:0;right:0;bottom:auto;width:100vw;max-width:none;height:var(--phone-viewport-height,100dvh);max-height:var(--phone-viewport-height,100dvh);margin:0;padding:11px;box-sizing:border-box;overflow:hidden;border:0;border-radius:0;background:radial-gradient(ellipse at 0 50%,#9b7d4d38,transparent 65%),radial-gradient(ellipse at 100% 0,#9b7d4d3b,transparent 60%),repeating-linear-gradient(87deg,#a28d6311 0 1px,transparent 1px 4px),#ded1ad;box-shadow:inset 0 0 8px #795e484d}
.phone-ui #mapDialog.world-map[open]{display:block}
.phone-ui #mapDialog.world-map:before{content:'';position:absolute;inset:3px;z-index:3;pointer-events:none;border:1px solid #97794b63;box-shadow:inset 0 0 4px #faf0d575}
.phone-ui #mapDialog .world-map-header{position:absolute;inset:0;z-index:4;height:auto;min-height:0;max-height:none;margin:0;padding:0;border:0;background:none;pointer-events:none}
.phone-ui #mapDialog :is(.map-heading,.world-map-toolbar,.world-map-sidebar,.world-map-footer,.map-close-word){display:none}
.phone-ui #mapDialog .map-close{position:absolute;top:var(--phone-top);right:var(--phone-right);width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #806d4599;border-radius:3px;background:#eee3c9eb;box-shadow:0 2px 7px #503e342b;color:#3e4d3d;font:28px/1 Arial,sans-serif;touch-action:manipulation;pointer-events:auto}
.phone-ui #mapDialog .world-map-layout{position:absolute;inset:11px;display:block;min-height:0;overflow:hidden;border:1px solid #806d4563;box-shadow:0 1px 3px #795e4859}
.phone-ui #mapDialog .world-map-stage{width:100%;height:100%;min-height:0;overflow:hidden}
.phone-ui #mapDialog .world-map-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 32.5%,#68553516 33.15%,#f9f1d732 33.45%,transparent 34.1%,transparent 65.8%,#68553516 66.5%,#f9f1d732 66.8%,transparent 67.5%),linear-gradient(0deg,transparent 49.2%,#68553518 49.85%,#f9f1d739 50.2%,transparent 50.9%);box-shadow:inset 0 0 20px #7461451f}
.phone-ui #mapDialog #mapCanvas{width:100%;height:100%;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.phone-ui .controller-editor{top:var(--phone-viewport-top,0px);height:var(--phone-viewport-height,100dvh);bottom:auto;padding:10px}
.phone-ui .controller-editor-card{max-height:calc(var(--phone-viewport-height,100dvh) - 20px);overflow:auto;padding:16px}
.phone-ui .controller-editor-keys button{font-size:11px;min-height:44px}

/* Landscape gains a wider action row without moving controls out of the right half. */
@media(orientation:landscape){
 .phone-ui{--phone-stick-size:80px;--phone-move-size:128px;--phone-lower-size:var(--phone-stick-size)}
 .phone-ui .phone-flight-primary{width:194px;grid-template-columns:repeat(4,44px)}
 .phone-ui .phone-flight-access{width:calc(var(--phone-control-width) - var(--phone-stick-size) - 8px);grid-template-columns:repeat(2,minmax(44px,1fr))}
 .phone-ui .phone-flight-secondary{width:194px;grid-template-columns:repeat(4,44px)}
 .phone-ui .phone-foot-combat{width:194px;grid-template-columns:repeat(4,44px)}
 .phone-ui #phoneControls[data-foot-armed=true] .phone-foot-actions{right:calc(var(--phone-right) + var(--phone-stick-size) + 8px);bottom:calc(var(--phone-bottom) + 20px)}
 .phone-ui #phoneControls[data-foot-armed=true] .phone-foot-combat{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-interaction{left:calc(var(--phone-left) + var(--phone-move-size) + 60px);right:calc(var(--phone-right) + var(--phone-stick-size) + 160px);width:calc(100vw - var(--phone-left) - var(--phone-move-size) - var(--phone-right) - var(--phone-stick-size) - 220px);bottom:calc(var(--phone-bottom) + 20px)}
 .phone-ui #flightUI #groundHint,.phone-ui #flightUI:has(#trainingPanel:not([hidden])) #groundHint{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 145px)}
 .phone-ui #flightUI #encounterPanel{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 60px);max-height:85px}
 .phone-ui #pauseDialog .pause-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
 .phone-ui :is(.settings-header,.pause-header){padding-top:10px;max-height:49%}
 .phone-ui #pauseDialog .pause-header h2,.phone-ui #settingsDialog .settings-header h2{font-size:25px;margin:4px 0 8px}
 .phone-ui .pause-header .dialog-intro{display:none}
 .phone-ui #pauseDialog .pause-actions>button{min-height:44px;padding:8px;font-size:9px}
 .phone-ui #pauseDialog #explorationHUD{grid-template-columns:repeat(2,minmax(0,1fr))}
 .phone-ui #socialDialog .social-header{padding:9px 13px}
 .phone-ui #socialDialog .social-header h2{font-size:23px}
 .phone-ui #socialDialog .social-session-status{font-size:8px;padding:5px 13px}
 .phone-ui #socialDialog .social-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);overflow:auto;align-items:start}
 .phone-ui #socialDialog .social-chat{min-width:0;border-right:1px solid #a6c4b438;border-bottom:0}
 .phone-ui #socialDialog .social-history{height:100px}
 .phone-ui #socialDialog:has(#chatMessage:focus) .social-history{height:55px}
 .phone-ui #hangar{padding-top:calc(var(--phone-top) + 50px)}
 .phone-ui #hangar .hero h1{font-size:44px}
 .phone-ui #hangar .hero>p{display:none}
 .phone-ui #hangar .customize-links{grid-template-columns:repeat(4,minmax(0,1fr))}
 .phone-ui #hangar .mode-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 .phone-ui #hangar .pilot-card{max-width:none}
 .phone-ui #hangar .aircraft-label{display:none}
}
@media(max-width:360px) and (orientation:portrait){
 .phone-ui #hangar .brand{font-size:26px}
 .phone-ui #hangar nav{gap:7px}
 .phone-ui .phone-telemetry b{font-size:9px}
 .phone-ui .phone-telemetry small{font-size:7px}
}
@media(max-height:360px) and (orientation:landscape){
 .phone-ui{--phone-top:max(6px,env(safe-area-inset-top));--phone-stick-size:64px;--phone-move-size:112px;--phone-telemetry-height:26px}
 .phone-ui .phone-telemetry{padding:1px 4px}
 .phone-ui .phone-telemetry>span{gap:1px}
 .phone-ui #phoneControls:is([data-state=flight],[data-state=foot],[data-state=spectating]) .phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 4px)}
 .phone-ui .phone-power-control>span{font-size:7px}
 .phone-ui #flightUI .flight-mission{display:none}
}

.phone-ui #mapDialog .map-layer{min-height:44px;padding:8px 0;font-size:12px}
.phone-ui #mapDialog .map-layer input{width:18px;height:18px;min-height:0}

/* Home puts mode, aircraft and Deploy ahead of account/customization details. */
/* Home display help is in the page flow; no game toolbar floats over the hangar. */
.phone-ui #phoneControls:is([data-state=hangar],[data-state=menu]) .phone-toolbar{display:none}
.phone-home-display{display:none}
.phone-ui .phone-home-display{position:static;inset:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:100%;height:auto;min-height:0;max-height:none;order:1;flex:none;pointer-events:auto}
.phone-ui .phone-home-display button{min-width:110px;padding:8px 12px;font-size:10px}
.phone-ui .phone-home-display .phone-display-status{position:static;inset:auto;max-width:none;width:100%;margin:0;font-size:11px;pointer-events:none}
.phone-ui #hangar{position:fixed;top:var(--phone-viewport-top,0px);height:var(--phone-viewport-height,100dvh);padding:var(--phone-top) max(16px,var(--phone-right)) calc(var(--phone-bottom) + 10px) max(16px,var(--phone-left));gap:12px;scroll-padding-top:16px;scroll-padding-bottom:20px;touch-action:pan-y}
.phone-ui #hangar header{order:0;height:auto;min-height:0;max-height:none;gap:8px;flex-wrap:nowrap;align-items:flex-start;padding:0 0 8px}
.phone-ui #hangar nav{order:0;width:auto;height:auto;min-height:0;max-height:none;margin:0;gap:6px;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:44px;align-items:stretch;align-content:start}
.phone-ui #hangar .navlink{min-width:0;height:44px;min-height:44px;max-height:44px;padding:6px 3px;font-size:8px;letter-spacing:0;white-space:normal;border:1px solid #bfd8b433;border-radius:7px;background:#102832a8}
.phone-ui #hangar .hangar-overview{display:contents}
.phone-ui #hangar .hero{position:static;inset:auto;order:1;padding:0;pointer-events:none}
.phone-ui #hangar .hero h1{font-size:42px;line-height:1;margin:6px 0;letter-spacing:-1px}
.phone-ui #hangar .hero h1 br{display:none}
.phone-ui #hangar .hero h1 em{margin-left:.15em}
.phone-ui #hangar .hero .eyebrow{font-size:9px;letter-spacing:.06em}
.phone-ui #hangar .hero>p{font-size:12px;line-height:1.4;margin:0}
.phone-ui #hangar .hero>p br{display:none}
.phone-ui #hangar .hero-meta{display:none}
.phone-ui #hangar .sortie-config{order:2;flex:none}
.phone-ui #hangar .mode-tab{min-height:56px;font-size:11px;padding:10px 8px}
.phone-ui #hangar .mode-tab small{font-size:9px;margin-top:3px}
.phone-ui #hangar .aircraft-select{padding:10px 12px;gap:4px}
.phone-ui #hangar .aircraft-select select{font-size:18px}
.phone-ui #hangar .deployment{order:3;flex:none;padding:12px;gap:10px}
.phone-ui #hangar .mission-info .micro{display:none}
.phone-ui #hangar .mission-info h3{font-size:23px;margin:0 0 4px}
.phone-ui #hangar .mission-info p{font-size:10px}
.phone-ui #hangar .flight-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;min-width:0}
.phone-ui #hangar .flight-profile small{grid-column:1/-1;font-size:10px}
.phone-ui #hangar .deploy{min-height:64px;font-size:24px;padding:12px}
.phone-ui #hangar .aircraft-label{order:4;flex:none;padding:10px 12px}
.phone-ui #hangar .aircraft-label h2{font-size:24px;margin:4px 0 7px}
.phone-ui #hangar .aircraft-label p{font-size:12px;line-height:1.5;margin:8px 0 0}
.phone-ui #hangar .pilot-card{order:5;flex:none;padding:14px;border:1px solid #c9dfdb26;border-radius:9px;min-width:0}
.phone-ui #hangar #phoneHomeGuide{order:6;flex:none;margin:0}
.phone-ui #hangar footer{order:7;flex:none}
@media(orientation:landscape){
 .phone-ui #hangar .mode-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 .phone-ui #hangar .hero h1{font-size:34px}
 .phone-ui #hangar .hero>p{display:none}
 .phone-ui #hangar .deployment{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);align-items:center}
 .phone-ui #hangar .mission-info{grid-column:1;grid-row:1}
 .phone-ui #hangar .flight-profile{grid-column:1;grid-row:2}
 .phone-ui #hangar .deploy{grid-column:2;grid-row:1/3;align-self:stretch}
 .phone-ui #hangar .aircraft-label{display:block}
}

/* Their right-side Menu/Chat surfaces already expose these support actions. */
.phone-ui #flightUI :is(#audioUnlock,#publicLobbyBadge,#inventoryButton){display:none!important}
.phone-ui #flightUI .matchmaking-badge button,.phone-ui #flightUI #encounterPanel button{display:none!important}


@media(max-width:360px) and (orientation:portrait){
 .phone-ui{--phone-stick-size:72px;--phone-move-size:128px}
 .phone-ui #flightUI .airframe-status{left:0;bottom:100px;width:100%}
}

/* Saved desktop HUD position/scale cannot shift readouts into the phone sticks. */
.phone-ui #flightUI{position:fixed;inset:auto;left:0;top:var(--phone-viewport-top,0px);width:100%;height:var(--phone-viewport-height,100dvh)}
.phone-ui #flightUI :is(.match-state,.flight-mission){transform:none}
.phone-ui #flightUI .radar-wrap{order:0;margin-left:0}
/* Short browser viewports place Brake/Systems beside Look, freeing one row. */
@media(max-height:360px) and (orientation:landscape){
 .phone-ui #flightUI #groundHint,.phone-ui #flightUI:has(#trainingPanel:not([hidden])) #groundHint{top:auto;bottom:calc(var(--phone-bottom) + 20px);left:calc(var(--phone-left) + var(--phone-move-size) + 12px);max-height:48px}
}
@media(max-height:300px) and (orientation:landscape){
 .phone-ui{--phone-stick-size:44px;--phone-move-size:82px}
}
@media(max-height:280px) and (orientation:landscape){
 .phone-ui .phone-flight-primary,.phone-ui .phone-flight-secondary,.phone-ui #phoneControls[data-state=flight] .phone-interaction{bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 64px)}
 .phone-ui .phone-flight-combat{bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 20px)}
 .phone-ui .phone-power-control>span{display:none}
 .phone-ui .phone-foot-actions{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 20px)}
 .phone-ui #phoneControls[data-state=foot] .phone-interaction{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 68px)}
}

/* Display help occupies the left readout area, never the flight action labels. */
.phone-ui #phoneControls:is([data-state=flight],[data-state=foot],[data-state=spectating]) .phone-display-status{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 4px);left:var(--phone-left);right:calc(50% + 8px);max-width:none;max-height:calc(var(--phone-viewport-height,100dvh) - var(--phone-hud-top) - var(--phone-telemetry-height) - var(--phone-move-size) - var(--phone-bottom) - 50px);overflow:hidden}

.phone-gyro-panel{display:none}
.phone-ui .phone-gyro-panel{display:block;margin:0 0 16px;padding:14px;border:1px solid #9abbad42;border-radius:9px;background:#122d3670}
.phone-ui .phone-gyro-panel h3{font:24px/1.2 var(--display);margin:0 0 10px;color:#e2efcf}
.phone-ui .phone-gyro-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.phone-ui .phone-gyro-actions button{min-height:44px;padding:8px;border:1px solid #c5dcb157;border-radius:8px;background:#183b3457;color:#e2efcf;font:10px/1.4 var(--mono)}
.phone-ui #phoneGyro[aria-pressed=true]{background:#cde8a4c9;color:#18352a;border-color:#e6f9bc}
.phone-ui #phoneGyroStatus{font:12px/1.5 Inter,Arial,sans-serif;color:#c0d4c4;margin:10px 0}
.phone-ui .phone-gyro-sensitivity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;font:9px/1.4 var(--mono);color:#bdd5bd}
.phone-ui #phoneGyroSensitivity{width:100%;min-width:0;min-height:36px;accent-color:#d0e5a2}

.phone-ui .phone-gyro-help{font:12px/1.5 Inter,Arial,sans-serif;color:#bdd0c0;margin:10px 0 0}

/* One fixed settings header leaves the body and its controls free to scroll. */
.phone-ui #settingsDialog .settings-header{height:auto;max-height:none;overflow:visible;padding:8px 12px 0;flex:none}
.phone-ui #settingsDialog .settings-header .dialog-head{min-height:44px;gap:10px;margin:0 0 7px}
.phone-ui #settingsDialog .settings-title-copy{min-width:0}
.phone-ui #settingsDialog .settings-header .dialog-head .micro{display:none}
.phone-ui #settingsDialog .settings-header h2{font-size:26px;line-height:1.1;margin:0}
.phone-ui #settingsDialog .settings-header .close{width:44px;min-width:44px;height:44px;min-height:44px;max-height:44px;padding:0;font-size:30px;flex:none;border:1px solid #a4c1bd42;border-radius:8px;background:#19353d}
.phone-ui #settingsDialog .settings-header .settings-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0;padding:0;background:none;min-width:0}
.phone-ui #settingsDialog .settings-header .settings-tabs button{min-width:44px;min-height:44px;max-height:44px;padding:7px 2px;font-size:9px;line-height:1.3;letter-spacing:0;border-radius:7px 7px 0 0;overflow-wrap:normal}
.phone-ui #settingsDialog .settings-tab-full{display:none}
.phone-ui #settingsDialog .settings-tab-short{display:inline}
.phone-ui #settingsDialog .settings-body{padding:14px 12px;scroll-padding:12px;overflow-x:hidden;scrollbar-gutter:stable}
.phone-ui #settingsDialog .settings-section-heading h3{font-size:27px;margin:0 0 8px}
.phone-ui #settingsDialog .settings-section-heading p{font-size:13px;line-height:1.5;margin:0 0 14px}
.phone-ui #settingsDialog .settings-footer{padding:6px 12px;min-height:56px;box-sizing:border-box}
.phone-ui #settingsDialog .settings-footer [data-menu-status]{display:none}
.phone-ui #settingsDialog .settings-footer .solid.close{width:100%;min-height:44px;max-height:44px;margin:0;padding:10px;font-size:12px}
.phone-ui #settingsDialog .combat-gyro-card{padding:13px;border-radius:9px}
.phone-ui #settingsDialog .combat-setting-heading h4{font-size:17px;margin:5px 0 13px}
.phone-ui #settingsDialog .combat-gyro-actions{gap:7px}
.phone-ui #settingsDialog .combat-gyro-actions button{min-height:44px;font-size:11px;padding:9px 7px;touch-action:manipulation}
.phone-ui #settingsDialog #phoneAimGyroStatus{font-size:13px;line-height:1.5;margin:12px 0}
.phone-ui #settingsDialog .combat-gyro-sensitivity{grid-template-columns:minmax(0,1fr);gap:2px;font-size:10px}
.phone-ui #settingsDialog .combat-gyro-sensitivity input{min-height:44px}
.phone-ui #settingsDialog .combat-controls-note{padding-top:16px}
.phone-ui #settingsDialog .combat-controls-note h4{font-size:16px;margin:0 0 10px}
.phone-ui #settingsDialog .combat-controls-note p{font-size:13px;line-height:1.5}
@media(max-height:360px) and (orientation:landscape){
 .phone-ui #flightUI .flight-top .match-state{height:32px}
 .phone-ui .foot-combat-hud{top:calc(var(--phone-viewport-top,0px) + var(--phone-hud-top) + var(--phone-telemetry-height) + 44px);min-height:50px;padding:2px 6px}
 .phone-ui #settingsDialog .settings-header{padding-top:4px}
 .phone-ui #settingsDialog .settings-header .dialog-head{margin-bottom:4px}
 .phone-ui #settingsDialog .settings-header h2{font-size:22px}
 .phone-ui #settingsDialog .settings-body{padding-top:10px;padding-bottom:10px}
 .phone-ui #settingsDialog .settings-footer{padding-top:4px;padding-bottom:4px;min-height:52px}
 .phone-ui #flightUI:has(#announcer.visible:not(:where(.hud-disabled,[hidden]))) .flight-top{visibility:hidden}
}

/* Keep combat context at the edges: a compact alert above a short radar rack. */
.phone-ui #flightUI .bottom-flight{position:absolute;top:auto;bottom:calc(var(--phone-bottom) + var(--phone-move-size) + 25px);left:var(--phone-left);right:auto;width:calc(44% - var(--phone-left));height:78px;display:flex;align-items:flex-end;gap:7px;pointer-events:none}
.phone-ui #flightUI .radar-wrap{position:relative;width:62px;height:76px;min-width:62px;box-sizing:border-box;flex:none;opacity:.76;background:#0d283638;border-color:#b8d5af35;backdrop-filter:none}
.phone-ui #flightUI .radar-wrap canvas{width:60px;height:60px}
.phone-ui #flightUI .radar-wrap>span{left:3px;right:3px;bottom:4px;font-size:6px}
.phone-ui #flightUI .airframe-status{position:static;inset:auto;width:auto;min-width:0;max-width:none;margin:0;flex:1;padding:3px 0;opacity:.8}
.phone-ui #flightUI .weapon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 4px;margin:0;font-size:6px;letter-spacing:0}
.phone-ui #flightUI .weapon b{font-size:10px;margin-left:2px}
.phone-ui #flightUI .weapon>span:last-child{display:block;grid-column:1/-1;max-width:none;font-size:6px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.phone-ui #flightUI #rackStatus{display:block;margin:3px 0 0;font-size:6px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.phone-ui #flightUI #rearmStatus{font-size:6px;line-height:1.3;max-height:18px;overflow:hidden}
.phone-ui #flightUI #encounterPanel{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 70px);bottom:auto;left:var(--phone-left);right:auto;width:calc(44% - var(--phone-left));height:58px;max-height:58px;min-width:0;box-sizing:border-box;padding:5px 7px;border-color:#d9bd874a;background:#10283245;overflow:hidden;pointer-events:none}
.phone-ui #flightUI #encounterPanel>.micro{font-size:6px;line-height:1.2;letter-spacing:0}
.phone-ui #flightUI #encounterPanel h3{font-size:16px;line-height:1;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-ui #flightUI #encounterPhase{display:block;font-size:6px;line-height:1.3;max-height:16px;overflow:hidden}
.phone-ui #flightUI #encounterPanel :is(p,button,#monsterHealth){display:none}
@media(orientation:landscape){
 .phone-ui #flightUI .bottom-flight{bottom:calc(var(--phone-bottom) + var(--phone-move-size) + 25px);height:64px;width:calc(43% - var(--phone-left))}
 .phone-ui #flightUI .radar-wrap{width:50px;height:64px;min-width:50px}
 .phone-ui #flightUI .radar-wrap canvas{width:48px;height:48px}
 .phone-ui #flightUI #encounterPanel{height:50px;max-height:50px;width:calc(43% - var(--phone-left));top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 45px)}
 .phone-ui #flightUI #encounterPanel>.micro:first-child{display:none}
}
@media(orientation:landscape) and (max-height:330px){
 .phone-ui #flightUI #encounterPanel{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 33px);height:28px;max-height:28px;padding:3px 5px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px}
 .phone-ui #flightUI #encounterPanel h3{font-size:10px;margin:0}
 .phone-ui #flightUI #encounterPhase{font-size:6px;line-height:1.2;max-height:22px}
 .phone-ui #flightUI .bottom-flight{bottom:calc(var(--phone-bottom) + var(--phone-move-size) + 25px);height:51px}
 .phone-ui #flightUI .radar-wrap{width:40px;height:51px;min-width:40px}
 .phone-ui #flightUI .radar-wrap canvas{width:38px;height:38px}
 .phone-ui #flightUI .radar-wrap>span{font-size:5px;bottom:2px}
 .phone-ui #flightUI #rackStatus,.phone-ui #flightUI #rearmStatus{display:none}
}

/* Reserve the upper-left emergency target below the pilot count. Readouts keep
   their own lane, including Safari's very short landscape visual viewport. */
.phone-ui:has(#phoneControls[data-state=flight] #phonePilotAction:not([hidden])) #flightUI .flight-mission{left:calc(var(--phone-left) + 56px)}
.phone-ui:has(#phoneControls[data-state=flight] #phonePilotAction:not([hidden])) #flightUI #encounterPanel{left:calc(var(--phone-left) + 56px);width:calc(43% - var(--phone-left) - 56px)}
@media(orientation:landscape) and (max-height:330px){
 .phone-ui:has(#phoneControls[data-state=flight] #phonePilotAction:not([hidden])) #flightUI .bottom-flight{left:calc(var(--phone-left) + 56px);width:calc(43% - var(--phone-left) - 56px)}
}

@media(orientation:landscape) and (max-height:300px){
 .phone-ui #flightUI .bottom-flight{height:35px}
 .phone-ui #flightUI .radar-wrap{height:35px;width:34px;min-width:34px}
 .phone-ui #flightUI .radar-wrap canvas{width:32px;height:32px}
 .phone-ui #flightUI .radar-wrap>span{display:none}
}

/* Transient messages need their full text, including Safari's wrapped gear
   notices. Keep one content-sized lane instead of clipping them to one line. */
.phone-ui:has(#phoneControls) #flightUI :is(#announcer,#warning){top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 84px);bottom:auto;left:var(--phone-left);right:var(--phone-right);transform:none;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-sizing:border-box;padding:6px 9px;border:1px solid #c4dbb34d;border-radius:6px;font-size:11px;line-height:1.45;letter-spacing:0;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:normal;overflow:visible;-webkit-line-clamp:unset;-webkit-box-orient:initial;line-clamp:none;pointer-events:none;z-index:2}
.phone-ui #flightUI #announcer{display:block;background:#102832d9}
.phone-ui #flightUI #warning{background:#471906d9}
.phone-ui:not(.on-foot,.ground-vehicle) #flightUI:has(#warning.active) #announcer{visibility:hidden}
.phone-ui #flightUI:has(#announcer.visible:not(:where(.hud-disabled,[hidden]))) :is(.flight-mission,#encounterPanel),.phone-ui:not(.on-foot,.ground-vehicle) #flightUI:has(#warning.active) :is(.flight-mission,#encounterPanel){visibility:hidden}
@media(orientation:landscape){
 .phone-ui:has(#phoneControls) #flightUI :is(#announcer,#warning){top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 30px);left:calc(var(--phone-left) + max(94px,var(--phone-move-size)) + 12px);right:calc(var(--phone-right) + max(144px,var(--phone-control-width)) + 12px)}
}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #flightUI:has(#announcer.visible:not(:where(.hud-disabled,[hidden]))) .bottom-flight,.phone-ui:not(.on-foot,.ground-vehicle) #flightUI:has(#warning.active) .bottom-flight{visibility:hidden}
}

/* Browser chrome already defines the visible top edge. An installed or full
   screen game applies its notch inset here once, without moving menu layouts. */
.phone-ui:is([data-phone-display-mode=standalone],[data-phone-display-mode=fullscreen]){--phone-hud-top:env(safe-area-inset-top)}
.phone-ui .phone-telemetry{top:var(--phone-hud-top);box-sizing:border-box;border-radius:0 0 7px 7px}
.phone-ui #phoneControls[data-state] nav.phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 8px)}
.phone-ui #phoneControls nav.phone-toolbar button{border-radius:10px;background:#10283250}
.phone-ui:not(.on-foot) #flightUI .flight-top{width:min(104px,calc(50vw - var(--phone-left) - 28px))}
.phone-ui:not(.on-foot) #flightUI .flight-top .match-state{height:28px;padding:2px 5px;gap:4px;background:#12242b50}
.phone-ui:not(.on-foot) #flightUI .flight-top .match-state b{font-size:11px;line-height:1}
.phone-ui:not(.on-foot) #flightUI .flight-top .match-state span{font-size:6px;line-height:1}
.phone-ui:not(.on-foot) #flightUI .flight-top .match-state .match-short-label{display:block}
.phone-ui:not(.on-foot) #flightUI .flight-top .match-state .match-full-label{position:absolute;width:1px;max-width:none;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.phone-ui #flightUI[data-free-roam=true] .flight-mission{display:none!important}
.phone-ui #flightUI:not([data-free-roam=true]) .flight-mission{display:flex;top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 46px);left:calc(var(--phone-left) + 56px);right:auto;width:min(168px,calc(100vw - var(--phone-left) - var(--phone-right) - 112px));gap:2px}
.phone-ui #flightUI:not([data-free-roam=true]) .flight-mission>span{font-size:8px;line-height:1.15}
.phone-ui #flightUI:not([data-free-roam=true]) .flight-mission b{font-size:15px;line-height:1}
.phone-ui #flightUI:not([data-free-roam=true]) .flight-mission small{font-size:7px;line-height:1.15}
.phone-ui #flightUI #worldCrewHUD.world-crew-hud{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 8px)}
.phone-ui #drivingHUD.driving-hud{top:calc(var(--phone-viewport-top,0px) + var(--phone-hud-top))}
.phone-ui:has(#phoneControls) #flightUI :is(#announcer,#warning){top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 92px);right:calc(var(--phone-right) + 52px)}
@media(orientation:landscape){
 .phone-ui:has(#phoneControls) #flightUI :is(#announcer,#warning){top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 30px);right:calc(var(--phone-right) + max(144px,var(--phone-control-width)) + 12px)}
}
@media(orientation:landscape) and (max-height:420px){
 /* Reserve the outer 44px column without shrinking any combat tap target. */
 .phone-ui #phoneControls :is(.phone-flight-primary,.phone-flight-secondary,.phone-flight-combat,.phone-foot-combat){right:calc(var(--phone-right) + 52px)}
 .phone-ui #phoneControls[data-state=gunner] .phone-flight-primary{right:calc(var(--phone-right) + 52px)}
 .phone-ui #phoneControls:not([data-foot-armed=true]) .phone-foot-actions{right:calc(var(--phone-right) + 52px)}
 .phone-ui #phoneControls:is([data-state=flight],[data-state=driver],[data-state=passenger]) .phone-interaction,.phone-ui #phoneControls[data-state=foot]:not([data-foot-armed=true]) .phone-interaction{right:calc(var(--phone-right) + 52px)}
 .phone-ui:has(#phoneControls) #flightUI :is(#announcer,#warning){right:calc(var(--phone-right) + max(144px,var(--phone-control-width)) + 64px);padding:5px 7px;line-height:1.35}
}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneControls[data-state] nav.phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 2px);gap:4px}
 .phone-ui #phoneControls[data-state=foot] nav.phone-toolbar{top:calc(var(--phone-hud-top) + 4px)}
 .phone-ui #phoneControls:is([data-state=driver],[data-state=passenger]) nav.phone-toolbar{top:calc(var(--phone-hud-top) + max(var(--phone-telemetry-height),30px) + 2px)}
 .phone-ui:not(.on-foot,.ground-vehicle) #flightUI:has(#warning.active) .flight-top{visibility:hidden}
}
/* Warden passengers look from their real seat; rear crew use carried firearms. */
.phone-ui #phoneControls:is([data-state=airpassenger],[data-state=seatgunner]) .phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 6px)}
.phone-ui #phoneControls:is([data-state=airpassenger],[data-state=seatgunner]) .phone-game-controls{display:block}
.phone-ui #phoneControls:is([data-state=airpassenger],[data-state=seatgunner]) :is(.phone-move-stick,.phone-flight-primary,.phone-flight-secondary,.phone-flight-combat,.phone-flight-access,#phoneJump,#phoneSprint,#phoneCrouch){display:none!important}
.phone-ui #phoneControls[data-state=airpassenger] :is(.phone-foot-actions,.phone-foot-combat){display:none!important}
/* A flight copilot keeps a compact cabin/chase switch beside Exit. */
.phone-ui #phoneControls[data-state=airpassenger][data-flight-passenger=true] #phoneSystemsPanel.phone-flight-secondary{display:grid!important;left:calc(var(--phone-left) + 100px);right:auto;bottom:calc(var(--phone-bottom) + 20px);width:44px;height:44px;grid-template-columns:44px;grid-auto-rows:44px;gap:0}
.phone-ui #phoneControls[data-state=airpassenger][data-flight-passenger=true] #phoneSystemsPanel.phone-flight-secondary button:not(#phoneView){display:none!important}
.phone-ui #phoneControls[data-state=airpassenger][data-flight-passenger=true] #phoneView{display:block;width:44px;height:44px}
.phone-ui #phoneControls:is([data-state=airpassenger],[data-state=seatgunner]) .phone-interaction{left:var(--phone-left);right:auto;bottom:calc(var(--phone-bottom) + 20px);width:94px}
.phone-ui #phoneControls[data-state=seatgunner] .phone-foot-actions{left:calc(var(--phone-left) + 100px);right:auto;bottom:calc(var(--phone-bottom) + 20px);width:44px;grid-template-columns:44px}
.phone-ui #phoneControls[data-state=seatgunner] .phone-foot-combat{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneControls:is([data-state=airpassenger],[data-state=seatgunner]) .phone-toolbar{top:calc(var(--phone-hud-top) + var(--phone-telemetry-height) + 2px);gap:4px}
}
.phone-ui #phoneControls[data-rotorcraft=true] .phone-flight-combat{width:144px;grid-template-columns:44px minmax(44px,1fr)}
/* Helicopter pedals occupy the unused weapon row, with direct cockpit access. */
.phone-ui #phoneControls .phone-yaw[hidden],.phone-ui #phoneControls:not([data-rotor-pilot=true]) .phone-yaw{display:none}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-flight-primary{display:grid;width:144px;grid-template-columns:repeat(3,44px)}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-yaw{width:44px;height:44px;min-width:44px;min-height:44px;font-size:8px;font-weight:700}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-interaction{right:calc(var(--phone-right) + 150px);width:94px;bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 76px)}
@media(orientation:portrait){
 /* The left-side parked seat picker keeps its lane on narrow phones. */
 .phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-interaction{right:var(--phone-right);bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 122px)}
}
@media(orientation:landscape) and (max-height:420px){
 .phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-interaction{right:calc(var(--phone-right) + 202px)}
}
/* Armed Safari passengers keep View beside the weapon/exit shortcuts. */
.phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] #phoneSystemsPanel.phone-flight-secondary{display:grid!important;left:calc(var(--phone-left) + 150px);right:auto;bottom:calc(var(--phone-bottom) + 20px);width:44px;height:44px;grid-template-columns:44px;grid-auto-rows:44px;gap:0}
.phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] #phoneSystemsPanel.phone-flight-secondary button:not(#phoneView){display:none!important}
.phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] #phoneView{display:block;width:44px;height:44px}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] nav.phone-toolbar{top:calc(var(--phone-hud-top) + max(var(--phone-telemetry-height),30px) + 2px)}
}
@media(orientation:landscape) and (max-height:500px){
 .phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] #phoneSystemsPanel.phone-flight-secondary{left:calc(var(--phone-left) + 100px);bottom:calc(var(--phone-bottom) + 70px)}
}


@media(orientation:landscape) and (max-height:300px){
 /* A 44px View fits between the parked seat row and the lower shortcuts. */
 .phone-ui #phoneControls[data-state=seatgunner][data-seat-ground=true] #phoneSystemsPanel.phone-flight-secondary{bottom:calc(var(--phone-bottom) + 64px)}
}

/* A throttle quadrant beside Look leaves the rudder pedals directly reachable. */
.phone-ui #phoneControls[data-state=flight]{--phone-power-height:112px;--phone-flight-primary-bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 104px);--phone-flight-aux-bottom:calc(var(--phone-lower-size) + var(--phone-bottom) + 56px)}
.phone-ui #phoneControls[data-state=flight] .phone-flight-combat{display:block;right:var(--phone-right);width:194px;height:44px;bottom:var(--phone-flight-aux-bottom)}
.phone-ui #phoneControls[data-state=flight] .phone-flight-aux{position:absolute;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,44px);gap:6px;width:194px;height:44px;pointer-events:none}
.phone-ui #phoneControls[data-state=flight] .phone-rudder-controls{display:grid;grid-column:span 2;grid-template-columns:repeat(2,44px);gap:6px;width:94px;height:44px;pointer-events:none}
.phone-ui #phoneControls[data-state=flight] .phone-flight-aux .phone-action{width:44px;height:44px;min-width:44px;min-height:44px}
.phone-ui #phoneControls[data-aircraft-pilot=true] .phone-yaw:not([hidden]){display:block;font-size:9px;font-weight:700}
.phone-ui #phoneControls[data-state=flight] :is(.phone-flight-primary,.phone-flight-secondary){bottom:var(--phone-flight-primary-bottom)}
.phone-ui #phoneControls[data-state=flight] .phone-flight-access{right:calc(var(--phone-right) + var(--phone-stick-size) + 60px);width:64px;grid-template-columns:64px;bottom:calc(var(--phone-bottom) + 20px)}
.phone-ui #phoneControls[data-state=flight] .phone-power-lever{position:absolute;right:calc(var(--phone-stick-size) + 8px);bottom:calc(var(--phone-bottom) + 20px - var(--phone-flight-aux-bottom));display:block;width:44px;min-width:44px;height:var(--phone-power-height);min-height:44px;max-height:none;box-sizing:border-box;padding:0;border:1px solid #bfd8b438;border-radius:8px;background:linear-gradient(90deg,#0a202741,#28433b42 48%,#0a202741);pointer-events:auto;touch-action:none}
.phone-ui #phoneControls[data-state=flight] .phone-power-lever>span:first-child{top:-14px;left:-3px;right:-3px;display:flex;justify-content:center;gap:3px;font:6px/1.1 var(--mono);letter-spacing:0;white-space:nowrap}
.phone-ui #phoneControls[data-state=flight] .phone-power-lever #phonePower{position:absolute;inset:0;width:44px;height:100%;min-width:44px;min-height:44px;margin:0;writing-mode:vertical-lr;direction:rtl;opacity:0;z-index:2;touch-action:none}
.phone-ui #phoneControls[data-state=flight] .phone-power-gate{display:block;position:absolute;left:19px;right:auto;top:9px;bottom:9px;width:4px;border:1px solid #b8c9a835;border-radius:3px;background:repeating-linear-gradient(0deg,#bed2b236 0 1px,transparent 1px 10px),#07191c88;box-shadow:inset 1px 0 2px #0009;pointer-events:none}
.phone-ui #phoneControls[data-state=flight] .phone-power-grip{display:block;position:absolute;left:5px;right:5px;top:auto;bottom:calc(4px + var(--phone-power-position,0) * (100% - 22px));height:14px;border:1px solid #e1edbaaa;border-radius:3px;background:linear-gradient(#d5e7ae,#81996e 48%,#3b5140 49%,#a7be8c);box-shadow:0 2px 3px #0005;pointer-events:none}
.phone-ui #phoneControls[data-state=flight] .phone-power-lever:focus-within{outline:2px solid #e4f8b7;outline-offset:2px}
.phone-ui #phoneControls[data-state=flight][data-brake-mode=toggle] #phoneBrake[aria-pressed=true]{border-color:#fff0bf;background:#cdb47bc9;color:#302915}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-flight-primary{width:44px;grid-template-columns:44px}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-flight-access{width:44px;grid-template-columns:44px}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] :is(.phone-flight-combat,.phone-flight-aux){width:144px;grid-template-columns:repeat(3,44px)}
.phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-interaction{right:calc(var(--phone-right) + 50px);width:94px;bottom:var(--phone-flight-primary-bottom)}
@media(orientation:portrait) and (max-width:360px){
 /* Keep the larger flight stick when the lower centre lane is too narrow. */
 .phone-ui #phoneControls[data-state=flight]{--phone-flight-primary-bottom:calc(var(--phone-bottom) + 198px);--phone-flight-aux-bottom:calc(var(--phone-bottom) + 150px)}
 .phone-ui #phoneControls[data-state=flight] .phone-flight-access{right:calc(var(--phone-right) + 102px);bottom:var(--phone-flight-primary-bottom)}
 .phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-flight-access{right:calc(var(--phone-right) + 150px);width:44px;grid-template-columns:44px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .bottom-flight{width:88px;gap:4px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .radar-wrap{width:34px;min-width:34px;height:46px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .radar-wrap canvas{width:32px;height:32px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .radar-wrap>span{left:1px;right:1px;font-size:5px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .weapon{grid-template-columns:minmax(0,1fr)}
}
@media(orientation:landscape) and (max-height:500px){
 .phone-ui #phoneControls[data-state=flight]{--phone-power-height:94px;--phone-flight-primary-bottom:calc(var(--phone-bottom) + 182px);--phone-flight-aux-bottom:calc(var(--phone-bottom) + 132px)}
 .phone-ui #phoneControls[data-state=flight] :is(.phone-flight-combat,.phone-flight-primary,.phone-flight-secondary){right:calc(var(--phone-right) + 52px)}
 .phone-ui #phoneControls[data-state=flight] .phone-power-lever{right:calc(var(--phone-stick-size) - 44px)}
 .phone-ui #phoneControls[data-state=flight] .phone-flight-access{right:calc(var(--phone-right) + var(--phone-stick-size) + 58px);width:94px;grid-template-columns:repeat(2,44px)}
 .phone-ui #phoneControls[data-state=flight][data-rotor-pilot=true] .phone-interaction{right:calc(var(--phone-right) + 102px)}
}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneControls[data-state=flight]{--phone-power-height:80px;--phone-flight-primary-bottom:calc(var(--phone-bottom) + 154px);--phone-flight-aux-bottom:calc(var(--phone-bottom) + 104px)}
 .phone-ui #phoneControls[data-state=flight] .phone-power-lever>span:first-child{display:none}
}
/* The independent orbit pad uses the vacant lane directly beside Look. */
@media(orientation:portrait) and (max-width:380px){
 .phone-ui #phoneFreeLookStick.phone-free-look-stick{--phone-free-look-size:44px}
}
@media(orientation:portrait) and (max-width:340px){
 .phone-ui #phoneControls[data-state=foot] #phoneCrouch.phone-crouch{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 78px)}
 /* A nearby Board/Talk action shares this raised row with Crouch. Keep both
    full-height targets and reserve the crouch width plus a six-pixel gap. */
 .phone-ui #phoneControls[data-state=foot]:not([data-foot-armed=true]) .phone-interaction{width:min(var(--phone-control-width),calc(100vw - var(--phone-left) - var(--phone-move-size) - var(--phone-right) - 58px))}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-interaction{width:min(calc(50vw - var(--phone-left) - 8px),calc(var(--phone-move-size) + 2px))}
 /* Below 340px a fourth action shares the left stick's horizontal lane.
    Lift this row above that stick; Board/Talk and Crouch retain the next row. */
 .phone-ui #phoneControls[data-state=foot][data-foot-punch=true] .phone-foot-actions{bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 26px)}
 .phone-ui #phoneControls[data-state=foot][data-foot-punch=true] .phone-interaction{bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 76px)}
 .phone-ui #phoneControls[data-state=foot][data-foot-punch=true] #phoneCrouch.phone-crouch{bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 78px)}
}
@media(orientation:landscape) and (max-height:500px){
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions{right:var(--phone-right);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-combat{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 76px)}
}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneFreeLookStick.phone-free-look-stick{--phone-free-look-size:44px}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-combat{right:calc(var(--phone-right) + 52px);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px);width:194px;grid-template-columns:repeat(4,44px)}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions{right:calc(var(--phone-right) + 250px);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
}
@media(orientation:landscape) and (min-height:301px) and (max-height:360px){
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-combat{right:var(--phone-right)}
 .phone-ui #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions{right:calc(var(--phone-right) + 198px)}
 /* Nearby loot hides the map in this short viewport. Place the four unarmed
    actions below its utility rail, leaving both pickup strips their own lane. */
 .phone-ui.on-foot:has(#groundMinimap[hidden]):has(#lootPicker:not([hidden]),#exoticNearbyPicker:not([hidden])) #phoneControls[data-state=foot][data-foot-punch=true] .phone-foot-actions{right:var(--phone-right)}
}

/* Reload has its own lane directly above Fire. Its 8px gap, darker colour and
   independent pointer capture keep a held firing thumb away from reloading. */
.phone-ui #phoneControls .phone-foot-actions>#phoneFootReload.phone-reload{position:absolute;left:0;right:auto;top:auto;bottom:calc(100% + 8px);width:44px;min-width:44px;height:44px;box-sizing:border-box;z-index:1;border-radius:9px;background:#1028326b;border-color:#adc8c345;color:#c8d8cd;font-size:7px}
.phone-ui #phoneControls .phone-foot-combat>#phoneFootReload.phone-reload{position:absolute;left:0;right:auto;top:-52px;bottom:auto;width:44px;min-width:44px;height:44px;box-sizing:border-box;background:#1028326b;border-color:#adc8c345;color:#c8d8cd;font-size:7px}
.phone-ui #phoneFootDisarm.phone-disarm{background:#27353c50;border-color:#c4d4bd38;color:#d2dfca;font-size:7px}
.phone-ui #phoneControls :is(#phoneFootDisarm,#phoneFootReload)[hidden]{display:none}
/* The normal portrait layout keeps Reload beside the two-column gun band.
   Every interactive action retains a 44px target; no transparent oversize box. */
.phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions{width:144px;grid-template-columns:repeat(3,44px);gap:6px}
@media(orientation:landscape) and (min-height:361px){
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions{right:calc(var(--phone-right) + 152px);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 26px)}
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-combat{right:calc(var(--phone-right) + 52px);bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 78px);width:194px;grid-template-columns:repeat(4,44px);gap:6px}
}
@media(orientation:landscape) and (max-height:360px){
 /* Short browser viewports keep the existing single action band. Fire takes
    its rightmost primary cell so the separate Reload sits in the clear centre
    lane above it, away from the map/utility corner and left information. */
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions>#phoneSprint{order:0}
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions>#phoneFootWeapon{order:1}
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions>#phoneFootFire{order:2}
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] .phone-foot-actions>#phoneFootReload.phone-reload{left:100px}
}
@media(orientation:portrait) and (max-width:340px){
 /* The narrow-phone Crouch lane previously occupied the new reload target. */
 .phone-ui:has(#phoneControls[data-foot-action-swap=true]) #phoneControls[data-state=foot][data-foot-armed=true] #phoneCrouch.phone-crouch{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 130px)}
}

/* Actual optical views replace both right pads with this single larger aim
   surface. Reuse the captured Look node; the left movement pad is unchanged. */
.phone-ui #phoneControls[data-scoped-view=true]{--phone-stick-size:128px}
.phone-ui #phoneControls[data-scoped-view=true] #phoneLookStick{--phone-thumb-size:38px;border-color:#c0d8ac70;background:radial-gradient(circle,#28473a30 0 45%,#102b2319 46% 100%);color:#d3e4c1}
.phone-ui #phoneControls[data-scoped-view=true] #phoneLookStick .phone-stick-ring{inset:28%;border-color:#c0d8ac4d}
.phone-ui #phoneControls[data-scoped-view=true] #phoneLookStick:before{content:'';position:absolute;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;background:linear-gradient(currentColor,currentColor) center/1px 24px no-repeat,linear-gradient(currentColor,currentColor) center/24px 1px no-repeat;opacity:.65;pointer-events:none}
.phone-ui #phoneControls[data-scoped-view=true] #phoneFreeLookStick{display:none!important}
.phone-ui #phoneControls[data-scoped-view=true][data-state=foot]:not([data-foot-armed=true]) .phone-interaction{left:var(--phone-left);right:auto;width:min(144px,calc(50vw - var(--phone-left) - 8px));bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 26px)}
@media(orientation:landscape) and (max-height:500px){
 .phone-ui #phoneControls[data-scoped-view=true]{--phone-stick-size:112px}
}
@media(orientation:landscape) and (max-height:360px){
 .phone-ui #phoneControls[data-scoped-view=true]{--phone-stick-size:96px}
 .phone-ui #phoneControls[data-scoped-view=true] nav.phone-toolbar{grid-template-columns:repeat(3,44px);width:144px;height:44px;max-height:44px;gap:6px}
 /* Optical zoom keeps its own bottom-centre lane between the unchanged left
    stick/Crouch and the large aim pad, clear of the raised firing row. */
 .phone-ui:has(#phoneControls[data-scoped-view=true]) .binoculars-zoom-controls{left:calc(var(--phone-left) + max(160px,calc(var(--phone-move-size) + 58px)));top:auto;bottom:calc(var(--phone-bottom) + 20px);transform:none}
 .phone-ui #phoneControls[data-scoped-view=true][data-state=foot][data-foot-armed] .phone-interaction{left:var(--phone-left);right:auto;width:var(--phone-move-size);bottom:calc(var(--phone-move-size) + var(--phone-bottom) + 26px)}
}
@media(orientation:portrait) and (min-width:341px) and (max-width:360px){
 .phone-ui #phoneControls[data-scoped-view=true] #phoneCrouch.phone-crouch{bottom:calc(var(--phone-stick-size) + var(--phone-bottom) + 130px)}
}

/* A direct emergency exit remains visible for every occupied road seat. */
.phone-ui #phoneControls:is([data-state=driver],[data-state=passenger],[data-state=seatgunner]) .phone-pilot-action{width:72px;min-height:44px;font-size:9px;font-weight:700;background:#583124b8;border-color:#f2bc8c99}