/* Flight-only handheld strip: no extra canvas, controls or per-frame layout. */
.handheld-flight-ui #flightUI #phoneTelemetry{position:fixed;top:env(safe-area-inset-top);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));height:34px;box-sizing:border-box;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:4px 8px;border-radius:0 0 7px 7px;background:#102832c2;pointer-events:none;font-family:var(--mono);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #071922}
.handheld-flight-ui #phoneTelemetry>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:2px}
.handheld-flight-ui #phoneTelemetry small{font-size:8px;line-height:1.15;color:#b9d1bd;white-space:nowrap}
.handheld-flight-ui #phoneTelemetry i{font-style:normal}
.handheld-flight-ui #phoneTelemetry b{font-size:12px;line-height:1.15;font-weight:500;white-space:nowrap;color:#e2efcf}
/* Handheld utilities share the desktop edge rack instead of falling through
   legacy centered map/inventory rules. Telemetry reserves its own full row.
   The same classes are chosen before the first controller button in either
   browser; phone controls and desktop input remain separate. */
body.handheld-ui:not(.phone-ui){--desktop-edge:max(12px,env(safe-area-inset-left));--desktop-top:max(12px,env(safe-area-inset-top));--desktop-utility-top:var(--desktop-top);--desktop-utility-size:44px;--desktop-utility-step:52px}
body.handheld-ui:not(.phone-ui):has(#flightUI #phoneTelemetry:not([hidden])){--desktop-top:calc(env(safe-area-inset-top) + 48px);--desktop-utility-top:var(--desktop-top)}
body.handheld-ui:not(.phone-ui) #flightUI #phoneTelemetry{height:40px;padding:5px 8px}
body.handheld-ui:not(.phone-ui) #phoneTelemetry small{font-size:9px}
body.handheld-ui:not(.phone-ui) #phoneTelemetry b{font-size:14px}
body.handheld-ui:not(.phone-ui) #flightUI .flight-top{top:var(--desktop-top)}
/* The top strip owns these values on handhelds, including training/room modes
   whose older, more specific selectors would otherwise restore duplicate dials. */
body.handheld-ui:not(.phone-ui) #flightUI .instruments{display:none!important}
.phone-ui .phone-telemetry{grid-template-columns:repeat(9,minmax(0,1fr));gap:2px}
@media(max-width:380px){.phone-ui .phone-telemetry small{font-size:6px}.phone-ui .phone-telemetry b{font-size:8px}}
/* Fishing and bow-cannon actions reuse the familiar large primary target. */
.phone-ui #phoneControls:is([data-fishing=true],[data-boat-role=gunner]) .phone-foot-actions{display:flex!important}
.phone-ui #phoneControls[data-fishing=true] #phoneJump{white-space:pre-line;border-color:#98dcc58c;background:#163d3b9c}
.phone-ui #phoneControls[data-fishing=true] #phoneJump.is-active{background:#437764bd;border-color:#c7f7dd}
.phone-ui #phoneControls[data-boat-role=gunner] #phoneJump{border-color:#e5bb8799;background:#68472f94}
.phone-ui #phoneControls:is([data-fishing=true],[data-boat-role=pilot],[data-boat-role=gunner],[data-boat-role=frontPassenger],[data-boat-role=gunnerLeft],[data-boat-role=gunnerRight]) :is(.phone-flight-primary,.phone-flight-access,.phone-flight-combat,.phone-flight-secondary,#phonePilotAction,#phoneFootWeapon,#phoneFootPunch,#phoneSprint){display:none!important}
.phone-ui #phoneControls[data-fishing=true] #phoneCrouch{display:flex;align-items:center;justify-content:center}
.phone-ui #fishingHud{bottom:calc(var(--phone-bottom) + 64px)!important;max-width:calc(100vw - var(--phone-left) - var(--phone-right) - 28px);min-width:0!important;width:min(260px,calc(100vw - 56px));box-sizing:border-box;font-size:11px!important;pointer-events:none}
@media(orientation:landscape){.phone-ui #fishingHud{bottom:calc(var(--phone-bottom) + 6px)!important;width:min(290px,36vw)}}

#boatCannonHUD{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;z-index:4;color:#e4f3c5;pointer-events:none;font-family:var(--mono);text-shadow:0 1px 3px #081d20}
#boatCannonHUD>i{position:absolute;inset:0;border:1px solid #d9efbcb3;border-radius:50%}
#boatCannonHUD>i:before,#boatCannonHUD>i:after{content:'';position:absolute;background:#e4f3c5;left:50%;top:50%;transform:translate(-50%,-50%)}
#boatCannonHUD>i:before{width:8px;height:1px}#boatCannonHUD>i:after{height:8px;width:1px}
#boatCannonHUD>span{position:absolute;top:38px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.04em;padding:4px 7px;border-radius:4px;background:#10283280}
#exoticInventoryClaim{min-height:44px;width:100%;margin-top:10px}

.phone-ui #phoneControls[data-fishing=true] #phoneMoveStick,.phone-ui #phoneControls:is([data-boat-role=gunner],[data-boat-role=frontPassenger],[data-boat-role=gunnerLeft],[data-boat-role=gunnerRight]) #phoneMoveStick{display:none!important}
.phone-ui #phoneControls[data-state=foot]:is([data-fishing=true],[data-boat-role=gunner]) .phone-foot-actions{left:var(--phone-left);right:auto;bottom:var(--phone-bottom);width:92px;height:64px;display:block!important}
.phone-ui #phoneControls[data-state=foot]:is([data-fishing=true],[data-boat-role=gunner]) #phoneJump{width:92px;height:64px;min-height:64px;font-size:13px;border-radius:13px}
.phone-ui #phoneControls[data-state=foot][data-fishing=true] #phoneCrouch.phone-crouch{left:var(--phone-left);right:auto;bottom:calc(var(--phone-bottom) + 76px);width:92px;height:44px;font-size:11px}
.phone-ui #phoneControls[data-state=foot][data-fishing=true] .phone-interaction{left:50%;right:auto;bottom:var(--phone-bottom);transform:translateX(-50%);width:clamp(64px,calc(100vw - 244px),160px)}
.phone-ui #fishingHud{bottom:calc(var(--phone-bottom) + 152px)!important}
@media(orientation:landscape){.phone-ui #fishingHud{bottom:calc(var(--phone-bottom) + 76px)!important}}


#boatCannonRange{position:absolute;top:66px;left:50%;transform:translateX(-50%);font:10px/1.4 var(--mono);white-space:nowrap;padding:4px 7px;border-radius:4px;background:#102832bb;color:#c8e2d4}
#boatCannonHUD[data-range-state=out] #boatCannonRange{color:#ffb49b;background:#381d18d9}
#boatCannonHUD[data-range-state=in] #boatCannonRange{color:#deff9e}
#boatCannonHUD[data-range-state=out]>i{border-color:#ffb49b}