:root { --hdr-h: 56px; }
.flight-ui {
  --flight-left: max(14px,env(safe-area-inset-left));
  --flight-right: max(14px,env(safe-area-inset-right));
  --flight-top: max(10px,env(safe-area-inset-top));
  --flight-bottom: max(20px,env(safe-area-inset-bottom));
  overflow: hidden;
}
#flightBar { display: flex; gap: 8px; align-items: center; }
.flight-ui header {
  position: fixed;
  z-index: 8;
  inset: var(--flight-top) var(--flight-right) auto var(--flight-left);
  background: none;
  border: 0;
  padding: 0;
  letter-spacing: 0;
  pointer-events: none;
}
.flight-ui header > strong:first-child,.flight-ui #deviceMode { display: none; }
#flightAircraft {
  max-width: 42vw;
  padding: 7px 9px;
  color: #fff;
  background: #101a22b8;
  border-radius: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#flightBar button,.glass-actions button,.flight-ui #touchQuick button {
  min-height: 44px;
  padding: 6px 11px;
  color: #f6fafb;
  background: #101b22db;
  border: 2px solid #bdcad299;
  border-radius: 12px;
  font-weight: 700;
  pointer-events: auto;
}
#flightBar button:first-child { background: #103a52e8; border-color: #7bc9ed; }
#flightBar #menu { background: #872e2ced; border-color: #ef9e92; }
#flightBar button[aria-expanded="true"],.flight-ui #touchQuick button[aria-pressed="true"] {
  background: #155346ed;
  border-color: #8fffc6;
}
.flight-ui #hud { inset: 0 var(--flight-right) 0 var(--flight-left); }
.flight-ui #glassReadouts {
  position: absolute;
  top: 43%;
  left: 50%;
  width: min(72vw,110vh,740px);
  height: min(61vh,76vw,560px);
  transform: translate(-50%,-50%);
}
.flight-ui #attitudePanel[data-mode="hud"] #adiCanvas {
  top: 49%;
  width: min(41vh,49vw,384px);
}
.flight-ui #attitudePanel #attitudeMode,
.flight-ui #reticle,.flight-ui #tacticalInstruments,.flight-ui .keys { display: none !important; }
.flight-ui #stats { left: 0; right: auto; bottom: var(--flight-bottom); padding: 0; background: none; }
.flight-ui #stats .stat:not(#flightLoad) { display: none; }
.flight-ui #flightLoad {
  padding: 4px 8px;
  font-size: 11px;
  background: #101f28c9;
  border-radius: 7px;
}
#waypointChip {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: max-content;
  max-width: 56vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #8afec3;
  border-radius: 24px;
  padding: 4px 12px;
  background: #0c2420e8;
  font: 700 clamp(11px,1.5vw,16px) system-ui,sans-serif;
}
.flight-ui #flightGuide,.flight-ui #gateGuide {
  position: absolute;
  inset: auto auto calc(var(--flight-bottom) + 8px) 50%;
  transform: translateX(-50%);
  max-width: 62vw;
  width: max-content;
  text-align: center;
}
.flight-ui #status,.flight-ui #towControls {
  position: static;
  transform: none;
  max-width: 100%;
  border-radius: 8px;
}
.flight-ui #status { padding: 5px 9px; background: #111f26d9; font-size: 12px; }
.flight-ui #status.coach-warning { background: #85332bf0; }
.flight-ui #towControls { margin-top: 4px; }
.flight-ui #flightNext,.flight-ui #gateStep {
  display: inline-block;
  margin: 4px auto 0;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #83e6c4;
  color: #102623;
  font-weight: 700;
  pointer-events: auto;
}
.flight-ui #gateStep { margin: 0; }
.flight-ui #flightNavigation,.flight-ui #systems,.flight-ui #mobileExtras {
  display: none;
  position: absolute;
  top: var(--hdr-h, 56px);
  right: 0;
  left: auto;
  bottom: auto;
  width: min(310px,90vw);
  max-width: 90vw;
  max-height: calc(100dvh - var(--hdr-h, 56px) - var(--flight-bottom, 20px) - 10px);
  overflow: auto;
  z-index: 7;
  padding: 10px;
  border: 1px solid #a9bdc9ab;
  border-radius: 12px;
  background: #11242ff5;
  pointer-events: auto;
}
.flight-ui #hud[data-mobile-panel="nav"]:not(:has(#tacticalPanel:not([hidden]))) #flightNavigation,
.flight-ui #hud[data-mobile-panel="systems"] #systems,
.flight-ui #hud[data-mobile-panel="more"] #mobileExtras { display: block; }
.flight-ui #hud:has(#replayControls:not([hidden])) #systems { display: block; }
.flight-ui #flightNavigation .glass-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flight-ui #flightNavigation canvas { display: block; margin: 6px 0; }
.flight-ui #flightNavigation { width: min(350px,90vw); }
.flight-ui #flightNavigation #nav { display: block; white-space: pre-line; margin: 6px 0; font-size: 13px; }
.flight-ui #flightNavigation #radar { border: 1px solid #709ca7; border-radius: 8px; }
.flight-ui #flightNavigation details { margin: 6px 0; color: #aacbd7; font-size: 12px; }
.map-legend { display: flex; gap: 8px; flex-wrap: wrap; color: #deedf2; font-size: 11px; }
.map-legend b { color: #ffcf5e; }
.map-legend i { color: #80dcff; font-style: normal; }
@media (orientation: landscape) and (max-height: 550px) {
  .mobile-mode.flight-ui #flightNavigation { width: min(315px,85vw); max-height: 76vh; }
  .mobile-mode.flight-ui #flightNavigation #radar { max-width: 61vh; margin-inline: auto; }
}
#mobileExtras p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.glass-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.flight-ui #flightTimeControls { position: static; margin-top: 8px; text-align: left; }
.flight-ui #quickControls:not([open]) { display: none; }
.flight-ui #quickControls[open] {
  top: var(--hdr-h, 56px);
  right: var(--flight-right);
  bottom: auto;
  left: auto;
  width: min(305px,86vw);
  max-height: calc(100dvh - var(--hdr-h, 56px) - 24px);
  z-index: 10;
}
.flight-ui .flight-panel-close {
  display: block;
  position: sticky;
  top: 0;
  margin: 0 0 8px auto;
  min-height: 44px;
  z-index: 2;
  background: #183d50;
  border-radius: 8px;
  touch-action: manipulation;
}
body:not(.flight-ui) .flight-panel-close { display: none; }
.flight-ui #quickControls[open] { overflow-y: auto; overscroll-behavior: contain; }
.flight-ui #flightNavigation,.flight-ui #systems,.flight-ui #mobileExtras { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mobile-mode.flight-panel-open #touchRudderControl,
.mobile-mode.flight-panel-open #touchQuick,
.mobile-mode.flight-panel-open #touchThrottleControl,
.mobile-mode:has(#hudMpDropdown:not([hidden])) #touchRudderControl,
.mobile-mode:has(#hudMpDropdown:not([hidden])) #touchQuick,
.mobile-mode:has(#hudMpDropdown:not([hidden])) #touchThrottleControl,
.mobile-mode:has(#hudMpDropdown:not([hidden])) #flightGuide,
.mobile-mode:has(#hudMpDropdown:not([hidden])) #stats,
.mobile-mode:has(#tacticalPanel[open]:not([hidden])) #touchRudderControl,
.mobile-mode:has(#tacticalPanel[open]:not([hidden])) #touchQuick,
.mobile-mode:has(#tacticalPanel[open]:not([hidden])) #touchThrottleControl { visibility: hidden; pointer-events: none; }
.mobile-mode [data-mobile-panel]:not([data-mobile-panel=""]):not([data-mobile-panel="nav"]) #tacticalPanel { display: none !important; }
body.tactical-mode #flightGuide,
#hud:has(#tacticalGuide:not([hidden])) #flightGuide { display: none !important; }
.flight-ui #tacticalPanel {
  top: var(--hdr-h, 56px);
  max-height: calc(100dvh - var(--hdr-h, 56px) - var(--flight-bottom, 20px) - 12px);
}
.flight-ui #tacticalPanel:not([open]) { display: none; }
.flight-ui #tacticalGuide { bottom: calc(var(--flight-bottom) + 34px); }
.flight-ui #tacticalReport { z-index: 9; }
.overview-active #glassReadouts,.overview-active #waypointChip { visibility: hidden; }

.mobile-mode.flight-ui #hud {
  --stick-size: clamp(108px,34vh,168px);
  --throttle-height: clamp(134px,39vh,230px);
  --throttle-width: clamp(44px,7.1vw,65px);
}
.mobile-mode.flight-ui #touchFlight {
  display: block;
  position: absolute;
  inset: 0;
}
.mobile-mode.flight-ui #hud:has(#gateGuide:not([hidden])) #touchFlight { visibility: hidden; }
.mobile-mode.flight-ui #flightNext.flight-assist-duplicate { display: none; }
#touchLeft {
  position: absolute;
  bottom: var(--flight-bottom);
  left: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}
#touchRudderControl {
  position: absolute;
  right: 0;
  bottom: calc(var(--flight-bottom) + var(--throttle-height) + 27px);
  display: grid;
  gap: 2px;
  width: min(28vw,210px);
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 3px #09171d;
  font-size: 12px;
  font-weight: 700;
  pointer-events: auto;
}
#touchRudder {
  appearance: none;
  touch-action: none;
  margin: 0;
  width: 100%;
  height: 44px;
  background: #19252b75;
  border: 2px solid #dbe4e6ac;
  border-radius: 24px;
}
#touchRudder::-webkit-slider-thumb {
  appearance: none;
  width: 40px;
  height: 30px;
  border: 2px solid #f3fbf9;
  border-radius: 18px;
  background: #f8fffa32;
}
#touchRudder::-moz-range-thumb {
  width: 40px;
  height: 28px;
  border: 2px solid #f3fbf9;
  border-radius: 18px;
  background: #f8fffa32;
}
.mobile-mode.flight-ui #touchStick { background: #14252f63; border: 2px solid #e4edf2a3; }
.mobile-mode.flight-ui #touchStick span { width: 38%; height: 38%; background: #e9f2f128; border: 2px solid #f2fbf7d9; }
.mobile-mode.flight-ui #touchQuick {
  position: absolute;
  right: calc(var(--throttle-width) + 9px);
  bottom: var(--flight-bottom);
  display: grid;
  grid-template-columns: repeat(3,minmax(48px,1fr));
  gap: 5px;
  width: min(29vw,220px);
}
.mobile-mode.flight-ui #touchQuick button {
  min-width: 0;
  padding-inline: 3px;
  font-size: clamp(11px,1.65vw,15px);
  touch-action: none;
}
.mobile-mode.flight-ui #touchThrottleControl {
  position: absolute;
  inset: auto 0 var(--flight-bottom) auto;
  display: block;
  width: var(--throttle-width);
  height: var(--throttle-height);
  padding: 0;
  border: 2px solid #d6e1d5a3;
  border-radius: 14px;
  background: #172a2bba;
  touch-action: none;
  pointer-events: auto;
}
.mobile-mode.flight-ui #touchThrottleValue {
  position: absolute;
  bottom: calc(100% + 5px);
  width: 100%;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 1px 3px #081515;
}
.mobile-mode.flight-ui #touchThrottle {
  position: absolute;
  top: 50%;
  left: 50%;
  appearance: none;
  width: calc(var(--throttle-height) - 10px);
  height: calc(var(--throttle-width) - 9px);
  margin: 0;
  transform: translate(-50%,-50%) rotate(-90deg);
  border: 0;
  border-radius: 9px;
  background: linear-gradient(90deg,#ed9c3f var(--throttle-level,0%),#344446 var(--throttle-level,0%));
  touch-action: none;
}
.mobile-mode.flight-ui #touchThrottle::-webkit-slider-thumb {
  appearance: none;
  width: 9px;
  height: calc(var(--throttle-width) - 13px);
  border-radius: 3px;
  background: #fff2d0;
}
.mobile-mode.flight-ui #touchThrottle::-moz-range-thumb {
  width: 9px;
  height: calc(var(--throttle-width) - 13px);
  border: 0;
  border-radius: 3px;
  background: #fff2d0;
}
.mobile-mode.flight-ui #stats { left: 50%; transform: translateX(-50%); width: max-content; bottom: var(--flight-bottom); }
.mobile-mode.flight-ui #flightGuide,.mobile-mode.flight-ui #gateGuide { bottom: calc(var(--flight-bottom) + 27px); left: 41%; max-width: 34vw; }
.mobile-mode.flight-ui #tacticalGuide { bottom: calc(var(--flight-bottom) + 26px); left: 40%; max-width: 34vw; }
.mobile-mode.flight-ui #waypointChip { top: 72%; max-width: 34vw; }
.mobile-mode.flight-ui #overviewScale { top: var(--hdr-h, 56px); right: 0; bottom: auto; }

@media (orientation: landscape) and (max-height: 550px) {
  .mobile-mode.flight-ui #hud {
    --stick-size: clamp(92px, 26dvh, 134px);
    --throttle-height: clamp(114px, 33dvh, 170px);
    --throttle-width: clamp(42px, 6.2vw, 56px);
  }
  .mobile-mode.flight-ui #touchQuick {
    grid-template-columns: repeat(4, minmax(40px, 1fr));
    width: min(33vw, 224px);
    gap: 4px;
  }
  .mobile-mode.flight-ui #touchQuick button {
    min-height: 34px;
    padding: 2px 3px;
    font-size: 11px;
  }
  .mobile-mode.flight-ui #touchRudderControl {
    bottom: calc(var(--flight-bottom) + var(--throttle-height) + 24px);
    width: min(21vw, 152px);
  }
  .mobile-mode.flight-ui #touchRudder { height: 34px; }
  .mobile-mode.flight-ui #flightGuide,.mobile-mode.flight-ui #gateGuide,.mobile-mode.flight-ui #tacticalGuide {
    left: 39%;
    max-width: 33vw;
    bottom: calc(var(--flight-bottom) + 26px);
  }
  .mobile-mode.flight-ui #stats { left: 39%; transform: translateX(-50%); }
}

@media (orientation: portrait) {
  .mobile-mode.flight-ui #hud { --stick-size: min(29vw,130px); --throttle-height: clamp(138px,25vh,195px); }
  .mobile-mode.flight-ui #glassReadouts { top: 36%; width: 94%; height: min(39vh,96vw); }
  .mobile-mode.flight-ui #attitudePanel[data-mode="hud"] #adiCanvas { top: 40%; width: min(54vw,32vh); }
  .mobile-mode.flight-ui #waypointChip { top: 58%; max-width: 76vw; }
  .mobile-mode.flight-ui #touchQuick { width: min(43vw,186px); }
  .mobile-mode.flight-ui #flightGuide,.mobile-mode.flight-ui #gateGuide,.mobile-mode.flight-ui #tacticalGuide {
    bottom: calc(var(--throttle-height) + var(--flight-bottom) + 92px);
    left: 50%;
    max-width: 90vw;
  }
  .mobile-mode.flight-ui #stats { bottom: calc(var(--throttle-height) + var(--flight-bottom) + 4px); }
  .mobile-mode.flight-ui #flightAircraft { max-width: 34vw; }
}
@media (max-width: 450px) {
  #flightBar { gap: 4px; }
  #flightBar button { padding-inline: 6px; }
}

.flight-ui #headerMpBtn {
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.flight-ui #flightNavigation {
  border-radius: 14px;
  background: rgba(10, 24, 38, 0.90);
  border: 1px solid rgba(140, 200, 235, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.flight-ui #radar {
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}