/* sim-style.css A321 Flight Sim (desktop + mobile) */

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body {
  background: #060a12; overflow: hidden;
  font-family: 'Courier New', monospace;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
canvas { display: block; }
#c { width: 100vw; height: 100vh; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* Section: #rotate-prompt. */
#rotate-prompt { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-prompt {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 500;
    background: #04070d; color: #c8e8ff; text-align: center; gap: 12px; padding: 24px;
  }
}
.rotate-icon { font-size: 44px; animation: rotateHint 1.6s ease-in-out infinite; }
@keyframes rotateHint { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
.rotate-text { font-size: 14px; letter-spacing: 2px; font-family: 'Courier New', monospace; }
.rotate-sub  { font-size: 10px; color: #4a8fbf; max-width: 260px; }

/* Section: #loading. */
#loading {
  position: fixed; inset: 0; background: #000; z-index: 200;
  overflow: hidden; color: #c8e8ff;
}
.boot-phase {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
  pointer-events: none;
}
.boot-phase.show { opacity: 1; visibility: visible; }

/* Boot phase 1: studio logo. */
.boot-logotype {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-weight: 900; font-size: 40px; color: #eaf6ff;
  text-shadow: 0 0 18px rgba(80,180,255,.55), 0 0 46px rgba(40,120,220,.28);
}
.boot-logotype span { color: #44ccff; }
.boot-phase.show .boot-logotype { animation: bootTrackInWide 1.1s cubic-bezier(.16,.84,.44,1) both; }

/* Boot phase 2: author. */
.boot-handle {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-weight: 500; font-size: 28px; letter-spacing: 6px; color: #cfe9ff;
  text-shadow: 0 0 14px rgba(80,180,255,.4);
}
.boot-tagline {
  margin-top: 10px; font-size: 10px; letter-spacing: 5px; color: #4a8fbf;
  font-family: 'Courier New', monospace;
  opacity: 0;
}
.boot-phase.show .boot-handle  { animation: bootTrackInMed 1.1s cubic-bezier(.16,.84,.44,1) both; }
.boot-phase.show .boot-tagline { animation: bootFadeIn 0.8s ease 0.5s both; }

/* Implementation note. */
@keyframes bootTrackInWide {
  from { letter-spacing: -2px; opacity: 0; }
  to   { letter-spacing: 10px; opacity: 1; }
}
/* Author handle styling. */
@keyframes bootTrackInMed {
  from { letter-spacing: -2px; opacity: 0; }
  to   { letter-spacing: 6px; opacity: 1; }
}
@keyframes bootFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Configure #phase-load. */
#phase-load h1 {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 32px; letter-spacing: 9px; color: #fff; margin-bottom: 6px;
  text-shadow: 0 0 16px rgba(80,180,255,.3);
}
.boot-sub {
  font-size: 11px; letter-spacing: 3px; color: #4a8fbf; margin-bottom: 30px;
}
.load-bar-bg { width: 280px; height: 3px; background: #1a2a3a; border-radius: 2px; overflow: hidden; }
.load-bar    {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg,#1a7aff,#44ccff);
  box-shadow: 0 0 8px rgba(70,180,255,.6);
  transition: width .35s ease;
}
.boot-status {
  margin-top: 16px; min-height: 14px;
  font-size: 10px; letter-spacing: 2px; color: #7fb8e6;
  font-family: 'Courier New', monospace;
}

/* Section: .panel. */
.panel {
  position: absolute;
  background: rgba(4,9,18,0.88);
  border: 1px solid #1a3a5c; border-radius: 6px;
  color: #c8e8ff;
}
.panel-title {
  font-size: 8px; letter-spacing: 2px; color: #3a7aaa;
  text-transform: uppercase; padding: 4px 8px;
  border-bottom: 1px solid #1a3a5c;
}

/* Statusbar */
#statusbar { top: 8px; left: 8px; padding: 0; min-width: 155px; pointer-events: none; }
.sb-row   { font-size: 8px; line-height: 1.55; padding: 0 8px; color: #c8e8ff; }
.sb-row b { color: #fff; }
.sb-row.dim { color: #446688; }
.phase    { font-size: 10px; font-weight: bold; letter-spacing: 2px; color: #44ff88; padding: 4px 8px 2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }
.warn-blink { animation: blink .5s infinite; font-size: 9px; font-weight: bold; color: #ff3333; padding: 2px 8px; }
.warn-blink.warn-orange { color: #ff8800; }

/* Section: #controls. */
#controls { top: 8px; right: 8px; padding: 0; min-width: 175px; max-width: 190px; pointer-events: all; }
.hint-row { font-size: 8px; line-height: 1.7; color: #4a8fbf; padding: 0 8px; }
.hint-row .k { color: #c8e8ff; background: #1a3a5c; border-radius: 2px; padding: 0 3px; font-size: 7px; }
.hint-row b  { color: #c8e8ff; }
.col-orange { color: #ffaa00; }
.col-green  { color: #44ff88; }
.ctrl-divider { height: 1px; background: #1a3a5c; margin: 4px 0; }
.btn-row { display: flex; gap: 4px; padding: 3px 6px; }
.btn-row button, #controls button {
  flex: 1; border: 1px solid #1a3a5c; border-radius: 4px;
  background: #0e1e35; color: #c8e8ff;
  padding: 5px 4px; font-size: 8px; font-family: inherit; cursor: pointer;
}
.btn-row button:hover, #controls button:hover { background: #1a3050; }
.airport-btn.active { background: #1a3a5c; border-color: #3a8abf; color: #fff; }
.dim { color: #446688; }

/* Speed / Alt tapes */
#speedtape { top: 50%; left: 8px; transform: translateY(-50%); width: 50px; height: 160px; overflow: hidden; padding: 0; }
#alt-tape  { top: 50%; right: 8px; transform: translateY(-50%); width: 50px; height: 160px; overflow: hidden; padding: 0; }
.tape-wrap canvas { display: block; width: 100%; height: 100%; }

/* PFD */
#pfd { bottom: 12px; left: 64px; padding: 0; width: 160px; }
#attitude-canvas { display: block; width: 110px; height: 110px; margin: 6px auto 4px; border-radius: 50%; border: 1px solid #1a4a7a; }
.pfd-grid { display: grid; grid-template-columns: auto 1fr; padding: 2px 8px 6px; gap: 1px 6px; }
.pl { font-size: 8px; color: #3a7aaa; letter-spacing: 1px; align-self: center; }
.pv { font-size: 11px; font-weight: bold; color: #c8e8ff; text-align: right; }
.pv.green  { color: #44ff88; }
.pv.warn   { color: #ffaa00; }
.pv.danger { color: #ff4444; }

/* ND */
#nd { bottom: 12px; right: 64px; padding: 0; width: 160px; text-align: center; }
#nd .panel-title span { font-size: 13px; font-weight: bold; color: #c8e8ff; }
#compass-canvas { display: block; margin: 4px auto; }
.nd-info { display: grid; grid-template-columns: auto 1fr; padding: 2px 8px 6px; gap: 1px 6px; }

/* Throttle desktop */
#throttle-display { bottom: 12px; left: 50%; transform: translateX(-50%); padding: 0; width: 100px; text-align: center; }
#throttle-bar-bg  { height: 5px; background: #0a1522; overflow: hidden; margin: 4px 8px; border: 1px solid #1a3a5c; }
#throttle-bar     { height: 100%; background: linear-gradient(90deg,#0a5a22,#44ff88); width: 0%; transition: width .1s; }
#throttle-pct     { font-size: 14px; font-weight: bold; color: #44ff88; padding: 2px 0 6px; }

/* Section: #fly-joy-wrap. */
#fly-joy-wrap, #thr-wrap, #mob-bar, #apt-picker,
#orbit-joy-wrap, #orbit-zoom { display: none !important; }

/* Configure body.is-touch. */
body.is-touch #fly-joy-wrap { display: flex !important; }
body.is-touch #thr-wrap     { display: flex !important; }
body.is-touch #mob-bar      { display: flex !important; }

/* Hide desktop UI on mobile. */
body.is-touch #controls          { display: none !important; }
body.is-touch #throttle-display  { display: none !important; }

/* Section: #fly-joy-wrap. */
#fly-joy-wrap {
  position: fixed;
  bottom: clamp(78px, 17vh, 116px);
  left: clamp(4px, 1.5vw, 10px);
  z-index: 50; pointer-events: all;
  flex-direction: column; align-items: center; gap: clamp(2px, 0.5vh, 4px);
}
.joy-label { font-size: clamp(6px, 1.4vh, 7px); letter-spacing: 2px; color: rgba(80,160,240,0.55); }
#fly-joy-base {
  width: clamp(62px, 17vh, 110px); height: clamp(62px, 17vh, 110px);
  border-radius: 50%;
  background: rgba(10,40,80,0.40);
  border: 2px solid rgba(60,140,220,0.30);
  position: relative;
}
#fly-joy-label-u, #fly-joy-label-d,
#fly-joy-label-l, #fly-joy-label-r {
  position: absolute; font-size: 8px;
  color: rgba(150,200,255,0.28); pointer-events: none;
}
#fly-joy-label-u { top: 4px;    left: 50%; transform: translateX(-50%); }
#fly-joy-label-d { bottom: 4px; left: 50%; transform: translateX(-50%); }
#fly-joy-label-l { left: 4px;   top: 50%;  transform: translateY(-50%); }
#fly-joy-label-r { right: 4px;  top: 50%;  transform: translateY(-50%); }
#fly-joy-knob {
  width: clamp(26px, 7vh, 44px); height: clamp(26px, 7vh, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(120,200,255,0.78), rgba(30,90,200,0.62));
  border: 2px solid rgba(140,210,255,0.88);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 12px rgba(60,160,255,0.45);
}

/* Section: #thr-wrap. */
#thr-wrap {
  position: fixed;
  bottom: clamp(78px, 17vh, 116px);
  right: clamp(4px, 1.5vw, 10px);
  z-index: 50; pointer-events: all;
  flex-direction: column; align-items: center; gap: clamp(2px, 0.5vh, 4px);
}
.thr-title { font-size: clamp(6px, 1.4vh, 7px); letter-spacing: 2px; color: rgba(80,160,240,0.55); }
#thr-track {
  width: clamp(34px, 7vh, 52px); height: clamp(66px, 17vh, 140px);
  background: rgba(4,14,28,0.80);
  border: 1px solid #1c3a5a;
  border-radius: 26px;
  position: relative;
  touch-action: none;
  overflow: hidden;
}
#thr-fill {
  position: absolute; bottom: 50%; left: 0; right: 0; height: 0%;
  background: linear-gradient(to top, #074a1c, #22cc55);
  pointer-events: none;
}
#thr-fill-rev {
  position: absolute; top: 50%; left: 0; right: 0; height: 0%;
  background: linear-gradient(to bottom, #5a1a0a, #ff5a30);
  pointer-events: none;
}
#thr-idle-mark {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(120,170,220,0.5);
  pointer-events: none;
}
#thr-thumb {
  position: absolute; left: 5px; right: 5px; height: 22px;
  bottom: calc(50% - 11px);
  background: rgba(50,200,90,0.92);
  border: 2px solid #44ff88;
  border-radius: 11px;
  box-shadow: 0 0 10px rgba(68,255,120,0.55);
  pointer-events: none;
}
#thr-pct {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center; font-size: clamp(9px, 2.2vh, 14px); font-weight: bold;
  color: rgba(200,255,210,0.95);
  pointer-events: none;
  text-shadow: 0 0 8px #000, 0 0 16px #000;
}
/* Configure #rud-row. */
#rud-row { display: flex; gap: clamp(3px, 1vw, 5px); }
.rud-btn {
  width: clamp(32px, 7vw, 50px); height: clamp(24px, 5.5vh, 38px);
  border-radius: 8px;
  background: rgba(8,24,50,0.85); border: 1px solid #1a4a7a;
  color: #c8e8ff; font-size: clamp(9px, 2.2vh, 13px); font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
}
.rud-btn:active { background: rgba(50,120,200,0.45); }

/* Section: #mob-bar. */
#mob-bar {
  position: fixed;
  bottom: clamp(3px, 1vh, 6px);
  left: 50%; transform: translateX(-50%);
  z-index: 50; pointer-events: all;
  flex-direction: column; gap: clamp(2px, 0.5vh, 4px); align-items: center;
}
.mob-row {
  display: flex; flex-direction: row; gap: clamp(3px, 1vw, 5px); align-items: center;
}
.mb {
  width: clamp(46px, 9vw, 72px); height: clamp(28px, 7.5vh, 46px);
  border-radius: clamp(6px, 1.5vh, 10px);
  background: rgba(6,18,40,0.90); border: 1px solid #1a3a5c;
  color: #a0c8e8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1px, 0.3vh, 2px); cursor: pointer;
}
.mb-i { font-size: clamp(11px, 2.8vh, 17px); line-height: 1; }
.mb-t { font-size: clamp(5.5px, 1.3vh, 7px); letter-spacing: .5px; }
.mb.active  { background: rgba(15,70,35,0.85); border-color: #44ff88; color: #44ff88; }
.mb.pressed { background: rgba(30,70,160,0.75); border-color: #44aaff; color: #44aaff; }

/* Section: #apt-picker. */
#apt-picker {
  position: fixed; bottom: 116px; left: 50%; transform: translateX(-50%);
  z-index: 60; pointer-events: all;
  background: rgba(4,12,28,0.96); border: 1px solid #2a5a8c;
  border-radius: 10px; padding: 12px;
  flex-direction: column; gap: 8px; min-width: 210px;
}
.apt-title { font-size: 9px; letter-spacing: 2px; color: #3a7aaa; text-align: center; }
#apt-picker .airport-btn {
  width: 100%; padding: 10px 12px;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #c8e8ff; font-size: 12px; font-family: inherit; cursor: pointer; text-align: left;
}
#apt-picker .airport-btn.active { background: #1a3a5c; border-color: #3a8abf; }
#apt-close {
  padding: 8px; background: #1a1a2a; border: 1px solid #334;
  border-radius: 6px; color: #668; font-size: 10px; font-family: inherit;
  cursor: pointer; text-align: center;
}
/* Orbit joystick and zoom are hidden. */
#orbit-joy-wrap, #orbit-zoom { display: none !important; }

/* Mobile layout for touch devices. */

/* Configure body.is-touch. */
body.is-touch #statusbar {
  top: clamp(3px, 1vh, 6px); left: clamp(3px, 1vw, 6px);
  max-width: clamp(115px, 27vw, 165px);
}
body.is-touch .sb-row { font-size: clamp(6.5px, 1.5vh, 7px); line-height: 1.4; }
body.is-touch .phase  { font-size: clamp(7px, 1.7vh, 8px); padding: clamp(2px,0.6vh,3px) 6px 1px; }
/* Configure body.is-touch. */
body.is-touch #h-tiles { display: none !important; }

/* Configure body.is-touch. */
body.is-touch #speedtape {
  left: clamp(2px, 1vw, 4px); width: clamp(24px, 5vh, 34px);
  height: clamp(46px, 16vh, 100px);
  top: 47%; transform: translateY(-50%);
}
body.is-touch #alt-tape {
  right: clamp(2px, 1vw, 4px); width: clamp(24px, 5vh, 34px);
  height: clamp(46px, 16vh, 100px);
  top: 47%; transform: translateY(-50%);
}
/* Configure body.is-touch. */
body.is-touch #speedtape,
body.is-touch #alt-tape { display: none !important; }

/* Configure body.is-touch. */
body.is-touch #pfd {
  top: clamp(70px, 17vh, 96px); left: clamp(3px, 1vw, 6px); right: auto; bottom: auto;
  transform: none;
  width: clamp(115px, 27vw, 165px);
}
body.is-touch #attitude-canvas {
  width: clamp(48px, 11vh, 70px); height: clamp(48px, 11vh, 70px);
  margin: clamp(2px, 0.5vh, 3px) auto clamp(1px, 0.3vh, 2px);
}
body.is-touch .pfd-grid { padding: 1px clamp(4px,1vw,6px) clamp(2px,0.6vh,4px); gap: 0 clamp(2px,0.8vw,4px); }
body.is-touch .pl { font-size: clamp(6px, 1.4vh, 7px); }
body.is-touch .pv { font-size: clamp(7px, 1.7vh, 9px); }

/* Configure body.is-touch. */
body.is-touch #nd {
  top: clamp(34px, 8vh, 46px); right: clamp(3px, 1vw, 6px); bottom: auto;
  width: clamp(82px, 20vw, 108px); transform: none;
}
body.is-touch #compass-canvas { width: clamp(56px, 13vh, 84px); height: clamp(56px, 13vh, 84px); }
body.is-touch #nd .panel-title      { font-size: clamp(6px, 1.4vh, 7px); padding: clamp(2px,0.6vh,3px) 6px; }
body.is-touch #nd .panel-title span { font-size: clamp(8px, 1.8vh, 10px); }
body.is-touch .nd-info { padding: 1px 6px clamp(2px,0.6vh,3px); }
body.is-touch .nd-info .pv { font-size: clamp(7px, 1.7vh, 9px); }
body.is-touch .nd-info .pl { font-size: clamp(6px, 1.4vh, 7px); }

/* Airport lighting note. */
@media (max-height: 380px) and (orientation: landscape) {
  body.is-touch #pfd { display: none !important; }
}

/* Menu popup (mobile) */
.popup-title {
  font-size: 9px; letter-spacing: 2px; color: #3a7aaa;
  text-align: center; font-family: 'Courier New', monospace;
}
.popup-divider { height: 1px; background: #1a3a5c; }
.popup-row {
  display: flex; gap: 8px;
}
.popup-row button, #mpop-close {
  flex: 1; padding: 10px 8px;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 8px;
  color: #c8e8ff; font-size: 11px; font-family: 'Courier New', monospace;
  cursor: pointer; text-align: center;
}
.popup-row button:active, #mpop-close:active { background: #1a3050; }
.popup-row .airport-btn.active { background: #1a3a5c; border-color: #3a8abf; color: #fff; }
#mpop-close { color: #667788; font-size: 10px; }

/* Section: #mob-menu-popup. */
#mob-menu-popup, #weather-popup, #weight-popup, #ap-popup {
  display: none;
  position: fixed; inset: 0;
  z-index: 200; pointer-events: all;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  padding: 16px;
}
body.is-touch #mob-menu-popup.open { display: flex; }

.popup-card {
  display: flex; flex-direction: column; gap: 8px;
  width: min(90vw, 320px);
  max-height: min(88vh, 640px);
  overflow-y: auto;
  background: rgba(4,12,28,0.97); border: 1px solid #2a5a8c;
  border-radius: 12px; padding: 14px;
}

/* Section: #weather-overlay. */

/* Configure #weather-overlay. */
#weather-overlay {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 12; width: 100vw; height: 100vh;
}

/* Fighter-jet-style HUD overlay (camera mode 3) - drawn on top of the 3D
   view like a real HUD combiner glass. Same layer as #hud since it's the
   same kind of instrument content, just a different presentation. */
#fighter-hud-canvas {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 10; width: 100vw; height: 100vh;
}

/* Configure #weather-panel. */
#weather-panel {
  display: none; padding: 0 6px 4px;
}
/* Configure #weight-panel. */
#weight-panel, #ap-panel {
  display: none; padding: 0 6px 4px;
}
.w-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 0; font-size: 7px; color: #4a8fbf;
}
.w-row label { flex: 0 0 74px; font-size: 7px; color: #4a8fbf; }
.w-row input[type=range] {
  flex: 1; height: 3px; cursor: pointer; accent-color: #3a8abf;
}
.w-row .w-lbl { flex: 0 0 44px; text-align: right; color: #c8e8ff; font-size: 7px; }
.w-row select {
  flex: 1; background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 3px;
  color: #c8e8ff; font-size: 7px; padding: 1px 2px; font-family: inherit;
}
.w-presets { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 0 2px; }
.w-presets button {
  flex: 1; min-width: 44px; padding: 3px 2px; font-size: 7px;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 3px;
  color: #c8e8ff; cursor: pointer; font-family: inherit;
}
.w-presets button:hover { background: #1a3050; }

/* Configure #wapt-panel. */
#wapt-panel { display: none; padding: 0 6px 4px; }
.wapt-q {
  flex: 1; min-width: 0; background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 3px;
  color: #c8e8ff; font-size: 7px; padding: 2px 4px; font-family: inherit;
}
.wapt-picker select { flex: 1; }
.wapt-status { padding: 2px 8px; min-height: 9px; }
.wapt-results { max-height: 80px; overflow-y: auto; margin: 0 8px 2px; }
.wapt-result-item {
  padding: 3px 5px; border-radius: 3px; cursor: pointer;
  font-size: 7px; color: #c8e8ff;
}
.wapt-result-item:hover { background: rgba(79,168,255,.15); }
.wapt-name { color: #7fd0ff !important; padding: 3px 8px 1px; }
.wapt-picker { padding: 0 8px; }
.spinner {
  width: 7px; height: 7px; border: 1.5px solid rgba(255,255,255,.2); border-top-color: #4fa8ff;
  border-radius: 50%; display: inline-block; animation: wapt-spin .8s linear infinite; margin-right: 4px; vertical-align: -1px;
}
@keyframes wapt-spin { to { transform: rotate(360deg); } }

.wpop-title { font-size: 9px; letter-spacing: 2px; color: #3a7aaa; text-align: center; }
.wpop-divider { height: 1px; background: #1a3a5c; }
.wpop-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 8px; color: #4a8fbf;
}
.wpop-row label   { flex: 0 0 82px; }
.wpop-row input[type=range] {
  flex: 1; height: 4px; cursor: pointer; accent-color: #3a8abf;
}
.wpop-row .wlbl   { flex: 0 0 50px; text-align: right; color: #c8e8ff; font-size: 8px; }
.wpop-row select  {
  flex: 1; background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #c8e8ff; font-size: 8px; padding: 3px 4px; font-family: inherit;
}
.wpop-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.wpop-presets button {
  flex: 1; min-width: 60px; padding: 7px 4px; font-size: 8px;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #c8e8ff; cursor: pointer; font-family: inherit;
}
.wpop-presets button.active { background: #1a3a5c; border-color: #3a8abf; }
#wpop-close {
  padding: 7px; background: #1a1a2a; border: 1px solid #334;
  border-radius: 6px; color: #668; font-size: 9px; font-family: inherit;
  cursor: pointer; text-align: center;
}

/* Section: .wpop-row. */
.wpop-row button {
  padding: 6px 4px; font-size: 8px;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #c8e8ff; cursor: pointer; font-family: inherit;
}
.wpop-row button:hover { background: #1a3050; }
.w-row button.active,
.wpop-row button.active,
.w-presets button.active { background: #1a3a5c; border-color: #3a8abf; color: #fff; }

/* Configure .ap-eng.active. */
.ap-eng.active,
#dg-ap-master.active,
#mw-ap-master.active {
  background: rgba(15,70,35,0.85); border-color: #44ff88; color: #44ff88;
}
.ap-step {
  padding: 2px 0; font-size: 10px; text-align: center;
  background: #0e1e35; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #c8e8ff; cursor: pointer; font-family: inherit;
}
.ap-step:hover { background: #1a3050; }

/* Section: .fma-row. */
.fma-row {
  display: flex; justify-content: center; gap: 6px;
  font-size: 7px; font-weight: bold; letter-spacing: .5px;
  padding: 2px 0; margin-bottom: 2px;
}
.fma-item { color: #2a4a6a; }
.fma-item.active { color: #44ff88; text-shadow: 0 0 6px rgba(68,255,136,.5); }

/* Section: #phase-select. */
#phase-select { overflow-y: auto; padding: 24px 12px; pointer-events: auto; }
.asel-radar {
  position: absolute; right: -220px; top: 50%; transform: translateY(-50%);
  width: 760px; height: 760px; pointer-events: none; opacity: .45; z-index: 0;
}
.asel-ring { position: absolute; inset: 0; border: 1px solid rgba(58,138,191,.14); border-radius: 50%; }
.asel-ring.r2 { inset: 80px; border-color: rgba(58,138,191,.11); }
.asel-ring.r3 { inset: 160px; border-color: rgba(58,138,191,.08); }
.asel-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(68,204,255,.16), rgba(68,204,255,0) 26%);
  animation: aselSweep 10s linear infinite;
}
@keyframes aselSweep { to { transform: rotate(360deg); } }

.asel-col { position: relative; z-index: 1; width: min(92vw, 560px); }
.asel-kicker { font-family: 'Orbitron','Courier New',monospace; font-size: 10px; letter-spacing: 4px; color: #4a8fbf; text-align: center; }
.asel-h1 {
  font-family: 'Orbitron','Courier New',monospace; font-weight: 900; font-size: 26px; letter-spacing: 5px;
  text-align: center; color: #eaf6ff; margin: 8px 0 20px;
  text-shadow: 0 0 18px rgba(80,180,255,.45), 0 0 46px rgba(40,120,220,.22);
}
.asel-searchbar {
  display: flex; align-items: center; gap: 10px;
  background: #0e1e35; border: 1px solid #2a5a8c; border-radius: 10px;
  padding: 11px 14px; transition: box-shadow .2s, border-color .2s;
}
.asel-searchbar:focus-within { border-color: #44ccff; box-shadow: 0 0 0 3px rgba(68,204,255,.12); }
.asel-ic { font-size: 14px; color: #4a8fbf; }
#asel-input { flex: 1; background: none; border: none; outline: none; color: #eaf6ff; font-size: 13px; letter-spacing: .3px; font-family: 'Courier New', monospace; }
#asel-input::placeholder { color: #3f6a90; }
.asel-status { font-size: 9px; color: #4a8fbf; text-align: center; min-height: 12px; margin-top: 4px; }

#asel-results { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.asel-res-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.asel-res-row:hover { background: rgba(58,138,191,.15); }
.asel-res-icao {
  font-family: 'Orbitron','Courier New',monospace; font-weight: 700; font-size: 11px; color: #eaf6ff;
  background: #122036; border: 1px solid #1a3a5c; border-radius: 4px; padding: 2px 6px; min-width: 42px; text-align: center;
}
.asel-res-mid { flex: 1; min-width: 0; }
.asel-res-name { font-size: 11px; color: #c8e8ff; }
.asel-res-sub { font-size: 9px; color: #446688; }

.asel-section-lbl {
  font-size: 9px; letter-spacing: 3px; color: #4a8fbf; margin: 18px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.asel-section-lbl::after { content: ''; flex: 1; height: 1px; background: #1a3a5c; }

.asel-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 700px) { .asel-quick-grid { grid-template-columns: repeat(2, 1fr); } }
.asel-qcard {
  background: #0a1526; border: 1px solid #1a3a5c; border-radius: 9px; padding: 11px 6px; text-align: center; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.asel-qcard:hover { transform: translateY(-2px); border-color: #44ccff; background: #0d1c33; }
.asel-qcard .aq-icao { font-family: 'Orbitron','Courier New',monospace; font-size: 12px; font-weight: 700; color: #eaf6ff; }
.asel-qcard .aq-city { font-size: 8px; color: #446688; margin-top: 2px; letter-spacing: .5px; }

.asel-recent-row { display: flex; gap: 6px; flex-wrap: wrap; }
.asel-recent-pill {
  background: #0d1729; border: 1px solid #1a3a5c; border-radius: 16px; padding: 5px 11px; font-size: 9px; color: #4a8fbf;
  cursor: pointer; display: flex; gap: 6px; align-items: center;
}
.asel-recent-pill b { color: #c8e8ff; }
.asel-recent-pill:hover { border-color: #3a8abf; }

.asel-foot { margin-top: 24px; text-align: center; font-size: 8.5px; color: #3a5878; letter-spacing: .3px; }
.asel-foot a { color: #4a8fbf; text-decoration: none; border-bottom: 1px dotted #3a5878; }

/* Configure .ltrack. */
.ltrack { width: 280px; text-align: left; margin-top: 14px; }
.ltrack:first-of-type { margin-top: 0; }
.ltrack-lbl { font-size: 8px; letter-spacing: 1.5px; color: #4a8fbf; margin-bottom: 4px; text-align: center; }
.load-bar2 { background: linear-gradient(90deg,#0a5a22,#44ff88); box-shadow: 0 0 8px rgba(68,255,136,.45); }

/* Section: #mcdu-toggle. */
#mcdu-toggle {
  position: fixed; top: 8px; right: 8px; z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  cursor: pointer; pointer-events: auto;
  background: rgba(4,9,18,.92); border: 1px solid #1a3a5c; border-radius: 8px;
}
#mcdu-toggle:hover { border-color: #3a8abf; }
.mcdu-dot { width: 6px; height: 6px; border-radius: 50%; background: #44ff88; box-shadow: 0 0 6px #44ff88; }
#mcdu-toggle b { font-family: 'Orbitron','Courier New',monospace; font-size: 12px; color: #eaf6ff; letter-spacing: 1px; font-weight: 700; }
#mcdu-toggle .mcdu-chev { color: #4a8fbf; font-size: 9px; margin-left: 2px; transition: transform .2s; }
#mcdu-toggle.open .mcdu-chev { transform: rotate(180deg); }

#mcdu-drawer {
  position: fixed; z-index: 55; pointer-events: auto;
  background: rgba(4,9,18,.96); border: 1px solid #2a5a8c; color: #c8e8ff;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
  top: 46px; right: 8px; width: 280px; max-height: min(80vh, 620px);
  border-radius: 8px;
  transform: translateX(140%);
}
#mcdu-drawer.open { transform: translateX(0); }

.mcdu-tabs { display: flex; border-bottom: 1px solid #1a3a5c; flex-shrink: 0; }
.mcdu-tab { flex: 1; text-align: center; padding: 7px 2px; font-size: 13px; color: #446688; cursor: pointer; border-bottom: 2px solid transparent; }
.mcdu-tab span { display: block; font-size: 6.5px; letter-spacing: .5px; margin-top: 2px; }
.mcdu-tab.active { color: #44ff88; border-bottom-color: #44ff88; }
.mcdu-tab:hover { background: rgba(58,138,191,.1); }

.mcdu-body { flex: 1; overflow-y: auto; padding: 6px 8px; }
.mcdu-page { display: none; }
.mcdu-page.active { display: block; }

/* Configure #action-rail. */
#action-rail {
  position: fixed; bottom: clamp(4px, 1.2vh, 10px); left: 50%; transform: translateX(-50%);
  z-index: 50; pointer-events: auto;
  display: flex; gap: clamp(3px, 0.8vw, 6px);
}
.arbtn {
  width: clamp(44px, 8vw, 58px); height: clamp(30px, 6.5vh, 42px);
  border-radius: clamp(6px, 1.2vh, 9px);
  background: rgba(6,18,40,.90); border: 1px solid #1a3a5c; color: #a0c8e8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; user-select: none;
}
.arbtn .ar-i { font-size: clamp(11px, 2.4vh, 15px); line-height: 1; }
.arbtn .ar-t { font-size: clamp(5.5px, 1.1vh, 6.5px); letter-spacing: .4px; }
.arbtn.active  { background: rgba(15,70,35,.85); border-color: #44ff88; color: #44ff88; }
.arbtn.pressed { background: rgba(30,70,160,.75); border-color: #44aaff; color: #44aaff; }
.arbtn:hover   { background: rgba(21,40,71,.9); }

/* Configure body.is-touch. */
body.is-touch #tilt-block { display: block !important; }

/* Configure body.is-touch. */
body.is-touch #mcdu-toggle { top: clamp(3px, 1vh, 6px); right: clamp(3px, 1vw, 6px); padding: 5px 8px; }
body.is-touch #mcdu-toggle b { font-size: 10px; }
body.is-touch #mcdu-drawer {
  top: auto; right: 0; left: 0; bottom: 0; width: auto;
  max-height: 68vh; border-radius: 14px 14px 0 0;
  border-bottom: none; border-left: none; border-right: none;
  transform: translateY(140%);
}
body.is-touch #mcdu-drawer.open { transform: translateY(0); }
body.is-touch #action-rail { bottom: clamp(3px, 1vh, 6px); }
body.is-touch .arbtn { width: clamp(38px, 7.5vw, 50px); height: clamp(28px, 6vh, 36px); }