/* SimPlane - Antonov An-225 Flight Simulator POC Stylesheet */

:root {
  --bg-space: #050811;
  --panel-bg: rgba(10, 16, 28, 0.78);
  --panel-bg-solid: #0d1424;
  --panel-border: rgba(64, 130, 240, 0.28);
  --panel-border-bright: rgba(90, 160, 255, 0.6);
  --text-main: #f0f4fc;
  --text-dim: #8ba0c4;
  --text-bright: #ffffff;
  --cyan-accent: #00d2ff;
  --blue-primary: #1976d2;
  --blue-dark: #0a4b9c;
  --ukraine-blue: #0057b7;
  --ukraine-yellow: #ffd700;
  --green-active: #00e676;
  --amber-warn: #ffab00;
  --red-alert: #ff3d71;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  /* Width of #top-right-actions: five 34px buttons, four 6px gaps, 4px padding and a 1px border
     each side (measured: 204px). The header, telemetry bar and docked carousel all keep clear of
     it through this one value, so a button added to that bar means changing it here only. */
  --top-right-actions-w: 204px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-space);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  touch-action: none;
}

/* Plane Selection / Showcase Studio: darker, slightly textured background instead of light blue */
body.mode-showcase {
  background-color: #060913;
  background-image:
    radial-gradient(ellipse 85% 65% at 50% 50%, #0e172a 0%, #09101c 45%, #050811 85%, #020408 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.038'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 256px 256px;
  background-position: center center, 0 0;
}

#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#three-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

/* ─── UI Overlay Shell ─────────────────────────────────────────────── */
.ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 2rem 0 2rem;
}

.ui-panel {
  pointer-events: auto;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ─── Top Header Bar Group ──────────────────────────────────────────── */
.top-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

.top-header {
  position: relative;
  z-index: 95;
  width: auto;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 4px;
  gap: 12px;
  background: rgba(4, 10, 20, 0.75);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  border-radius: 0 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

/* Collapsed menu items hidden by default when top-header is not expanded */
.top-header:not(.menu-expanded) .header-text,
.top-header:not(.menu-expanded) .header-middle-controls,
.top-header:not(.menu-expanded) .mode-switcher-container,
.top-header:not(.menu-expanded) .window-controls,
.top-header:not(.menu-expanded) .app-nav-container {
  display: none !important;
}

/* Expanded menu state */
.top-header.menu-expanded {
  position: relative;
  z-index: 110;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Right padding = #top-right-actions' width + a 12px gutter. It was once 136px, narrower than the
     panel, which only went unnoticed while the middle controls were centered and never reached it. */
  padding: 4px calc(var(--top-right-actions-w) + 12px) 4px 4px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  gap: 16px;
  background: rgba(4, 10, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 210, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 87, 183, 0.35);
  border-radius: 0 !important;
}

.top-header.menu-expanded .header-text {
  display: flex;
}

.top-header.menu-expanded .header-middle-controls {
  display: flex;
}

.top-header.menu-expanded .mode-switcher-container {
  display: flex;
}

.top-header.menu-expanded .window-controls {
  display: flex;
}

.top-header.menu-expanded .app-nav-container {
  display: flex;
}

.top-header.menu-expanded .app-logo-badge {
  margin: 0;
  flex-shrink: 0;
}

/* 1. Left: SimPlane Logo & Title */
.header-title-group {
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  height: 34px;
}

/* 2. Middle: Mode Switcher & Controls */
.header-middle-controls {
  order: 2;
  display: flex;
  align-items: center;
  /* space-between, not center: mode-switcher anchors to the title's edge of this block and
     window-controls anchors to its far edge (flush with the header panel's own right edge,
     which is itself flush with the viewport). Centering left a ~580px gap between
     window-controls and the header's right edge at 1920px wide -- measured via a scratch CDP
     script -- because centering a ~625px-wide cluster inside whatever width this flex-1 block
     happens to have does not anchor either end to anything. */
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
}

.header-middle-controls .mode-switcher-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.header-middle-controls .window-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.camera-selector-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(5, 10, 20, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  padding: 2px 3px;
  height: 34px;
  box-sizing: border-box;
}

/* 3. Right: 1kx Projects Menu */
.top-header .app-nav-container {
  order: 3;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ─── Upper-Right Pinned Action Bar ───────────────────────────────── */
.top-right-actions {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: rgba(4, 10, 20, 0.85);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  border-radius: 0 !important;
  pointer-events: auto;
  z-index: 120;
  box-sizing: border-box;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* `contain: paint` above (2026-09-16, db8d916: isolates this bar into its own paint layer to stop
   the header's unfold/collapse animation from flashing this corner) clips painting to the bar's own
   small box — collateral damage: the 1kx Projects dropdown (.app-nav-modal) is a child of this bar,
   positioned well outside it (top:calc(100% + 8px) in .app-nav-modal below), so with containment on
   it opened (.visible: opacity 1, pointer-events auto) but painted nothing, looking like a dead
   button. Lifting
   containment only while the dropdown itself is open (Casey, 2026-09-22: "we don't have a working
   app menu in SimPlane") keeps the unfold-flash fix intact for the header toggle it targets in the
   ordinary case (the two rarely coincide — opening the header and opening this dropdown are separate
   clicks), while letting the dropdown actually paint on top of it. */
.top-right-actions:has(.app-nav-modal.visible) {
  contain: none;
}

.top-header.menu-expanded ~ .top-right-actions {
  border-color: transparent;
  box-shadow: none;
  /* The expanded header already paints a surface under this panel (same box, z-index 110 vs 120),
     so its own 0.85 fill stacked on the header's 0.92 into a visibly darker second layer and its
     opaque edge covered the header's border at the top-right corner. Dropping the fill lets the
     header be the one surface. It is deliberately NOT in the transition list above: on close the
     header snaps back to a small box at once, so this fill must return instantly too, or the icons
     float over the bare scene for a frame. .ui-panel also gives this element a 16px backdrop blur,
     which re-blurs the header underneath and erases the header's border across the panel's span, so
     that goes too (same reasoning: not transitioned, so it returns instantly on close). */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.top-right-actions .app-nav-container {
  display: flex;
  /* Containing block for .app-nav-modal's right:0 below, so the dropdown's right edge lines up
     with this container's (the grid-icon button's) own right edge — the same convention the
     other apps use (e.g. football/css/styles.css's .app-nav-container), rather than the bar's. */
  position: relative;
}

.app-help-btn {
  text-decoration: none;
}

/* ─── Orbit View Floating Controls ────────────────────────────────── */
.orbit-view-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(4, 10, 20, 0.90);
  border: 1px solid rgba(0, 210, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  border-radius: 0 !important;
  z-index: 100;
  transition: opacity 0.22s ease, visibility 0.22s ease, bottom 0.22s ease;
  pointer-events: auto;
}

.orbit-view-controls.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

.orbit-fly-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: linear-gradient(135deg, #0072ff 0%, #004b9c 100%);
  border: 1px solid rgba(0, 210, 255, 0.7);
  box-shadow: 0 0 12px rgba(0, 114, 255, 0.45);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.orbit-fly-btn:hover {
  background: linear-gradient(135deg, #1a88ff 0%, #005bb8 100%);
  border-color: #00e5ff;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.7);
  transform: translateY(-1px);
}

.orbit-fly-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(0, 114, 255, 0.4);
}

.orbit-fly-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
  pointer-events: none;
}

.orbit-fly-btn span {
  pointer-events: none;
}

/* Hide bottom flight controls bar during Plane Selection / Showcase mode so orbit controls are prominent and visible on desktop */
body.mode-showcase .bottom-controls-bar {
  display: none !important;
}

/* When in Runway / In-Flight mode and camera is Orbit, dock orbit controls comfortably above bottom bar */
body:not(.mode-showcase) .orbit-view-controls {
  bottom: 104px;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body:not(.mode-showcase) .orbit-view-controls {
    bottom: 58px;
  }
}

@media (max-width: 860px) {
  .orbit-view-controls {
    left: 96px;
    right: 160px;
    transform: none;
    margin: 0 auto;
    width: fit-content;
  }
}

.flight-controls-overlay.hidden ~ .orbit-view-controls {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

@media (max-width: 680px) {
  body:not(.mode-showcase) .orbit-view-controls {
    bottom: 52px;
  }
  .orbit-view-controls {
    bottom: 16px;
    left: 92px;
    right: 156px;
    gap: 5px;
    padding: 3px 5px;
  }
  .orbit-view-controls .ctrl-icon-btn {
    width: 32px;
    height: 32px;
  }
  .orbit-fly-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
    gap: 5px;
  }
  .orbit-fly-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* T343: the plane's own mechanism (a cargo door, a droop nose) beside the turntable and spec sheet, lit while open like
   the turntable while it turns. After the 680px block so its width wins there; [hidden] must beat inline-flex. */
.orbit-view-controls .orbit-plane-btn {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.orbit-plane-btn[hidden] { display: none; }
.orbit-plane-btn[data-kind="door"] .plane-action-nose,
.orbit-plane-btn[data-kind="nose"] .plane-action-door { display: none; }
.orbit-plane-labels { display: grid; pointer-events: none; }
.orbit-plane-label { grid-area: 1 / 1; }
.orbit-plane-btn[aria-pressed="true"] .orbit-plane-label[data-when="shut"],
.orbit-plane-btn[aria-pressed="false"] .orbit-plane-label[data-when="open"] { visibility: hidden; }
@media (max-width: 680px) {
  .orbit-view-controls .orbit-plane-btn { font-size: 11px; padding: 0 8px; gap: 5px; }
}

.app-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.4) 0%, rgba(8, 41, 90, 0.6) 100%);
  border: 1px solid rgba(0, 210, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 87, 183, 0.35);
  color: var(--cyan-accent);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.app-logo-badge:hover {
  border-color: var(--cyan-accent);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.55);
  color: var(--text-bright);
}

.app-logo-badge:active {
  transform: scale(0.96);
}

.app-logo-badge:focus-visible {
  outline: 2px solid var(--cyan-accent);
  outline-offset: 2px;
}

.header-title-group.expanded .app-logo-badge {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.65) 0%, rgba(0, 210, 255, 0.3) 100%);
  border-color: var(--cyan-accent);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.5), inset 0 0 6px rgba(0, 210, 255, 0.25);
  color: var(--text-bright);
}

.header-text {
  display: none;
  flex-direction: column;
  justify-content: center;
  height: 34px;
}

.header-title-group.expanded .header-text {
  display: flex;
  animation: header-unfold 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes header-unfold {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.15;
  color: var(--text-bright);
}

.header-title svg {
  margin-top: calc((1lh - 18px) / 2);
  flex-shrink: 0;
}

.header-subtitle {
  font-size: 10px;
  line-height: 1.1;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(0, 210, 255, 0.15);
  color: var(--cyan-accent);
  border: 1px solid rgba(0, 210, 255, 0.4);
}

.badge-tag.mriya {
  background: rgba(255, 215, 0, 0.15);
  color: var(--ukraine-yellow);
  border-color: rgba(255, 215, 0, 0.5);
}

.badge-tag.dreamliner {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.5);
}

.badge-tag.galaxy {
  background: rgba(148, 163, 184, 0.18);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.55);
}

.badge-tag.b747 {
  background: rgba(249, 115, 22, 0.18);
  color: #ff8c00;
  border-color: rgba(249, 115, 22, 0.55);
}

.badge-tag.kc135 {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.55);
}

.badge-tag.b52 {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.55);
}

.badge-tag.a340 {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
}

.badge-tag.a350 {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.55);
}

.badge-tag.x59 {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.55);
}

.badge-tag.concorde {
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border-color: rgba(14, 165, 233, 0.55);
}

.badge-tag.loading {
  background: rgba(0, 229, 255, 0.18);
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.65);
  animation: badge-loading-pulse 1s ease-in-out infinite alternate;
}

@keyframes badge-loading-pulse {
  from { opacity: 0.6; border-color: rgba(0, 229, 255, 0.35); }
  to { opacity: 1.0; border-color: rgba(0, 229, 255, 0.85); }
}

/* ─── Mode Switcher Segmented Control ─────────────────────────────── */
.mode-switcher-container {
  display: flex;
  align-items: center;
  background: rgba(5, 10, 20, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  padding: 2px 3px;
  /* Its own border(1px) + padding-left(3px) otherwise inset the first tab 4px past whatever
     this container's left edge is lined up against (the logo button above it, in the mobile
     split header) — pull the box left so the tab's rendered edge, not the container's, is what
     aligns. */
  margin-left: -4px;
  gap: 4px;
  height: 34px;
  box-sizing: border-box;
}

.mode-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.mode-tab-btn:hover {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.06);
}

.mode-tab-btn.active {
  color: var(--text-bright);
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.7) 0%, rgba(10, 75, 156, 0.85) 100%);
  border: 1px solid var(--panel-border-bright);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.35);
}

.mode-tab-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ─── Window Controls (Top Right) ─────────────────────────────────── */
.window-controls {
  order: 2;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 34px;
}

.ctrl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(20, 32, 55, 0.6);
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.18s ease;
}

.ctrl-icon-btn:hover {
  background: rgba(40, 60, 95, 0.8);
  border-color: var(--panel-border-bright);
  color: var(--text-bright);
}

.ctrl-icon-btn.active {
  color: var(--cyan-accent);
  border-color: var(--cyan-accent);
  background: rgba(0, 210, 255, 0.15);
}

.ctrl-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ─── Plane Carousel Component ────────────────────────────────────── */
.plane-carousel-container {
  --plane-card-width: 270px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 6px;
  margin-bottom: 0;
  padding: 6px 8px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  box-sizing: border-box;
}

/* Plane Selector 2D Tag Filter Bar (Purpose & Manufacturer) */
.plane-filter-bar,
.plane-category-bar {
  --filter-role-color: #00e5ff;
  --filter-role-glow: rgba(0, 229, 255, 0.28);
  --filter-role-bg: rgba(0, 229, 255, 0.16);
  --filter-role-border: #00e5ff;
  --filter-role-border-dim: rgba(0, 229, 255, 0.24);

  --filter-mfr-color: #5ea8ff;
  --filter-mfr-glow: rgba(94, 168, 255, 0.28);
  --filter-mfr-bg: rgba(94, 168, 255, 0.16);
  --filter-mfr-border: #5ea8ff;
  --filter-mfr-border-dim: rgba(94, 168, 255, 0.24);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 4px 6px;
  width: 100%;
  box-sizing: border-box;
}

.plane-filter-bar::-webkit-scrollbar,
.plane-category-bar::-webkit-scrollbar,
.filter-dimension-row::-webkit-scrollbar {
  display: none;
}

.filter-dimension-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

@media (min-width: 861px) {
  .filter-dimension-row[data-dimension="manufacturer"] {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 12px;
    margin-left: 2px;
  }
}

@media (max-width: 860px) {
  .plane-filter-bar,
  .plane-category-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .filter-dimension-row {
    width: 100%;
  }
  .filter-dimension-row[data-dimension="manufacturer"] {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}

.filter-dim-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  opacity: 0.85;
  width: 32px;
  flex-shrink: 0;
  user-select: none;
  text-transform: uppercase;
}

.filter-dimension-row[data-dimension="purpose"] .filter-dim-label {
  color: var(--filter-role-color);
}

.filter-dimension-row[data-dimension="manufacturer"] .filter-dim-label {
  color: var(--filter-mfr-color);
}

.filter-chip-group,
.plane-category-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.filter-chip,
.plane-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  background: rgba(13, 20, 36, 0.75);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Subtle idle borders per dimension */
.filter-chip[data-dim="purpose"] {
  border-color: var(--filter-role-border-dim);
}

.filter-chip[data-dim="manufacturer"] {
  border-color: var(--filter-mfr-border-dim);
}

.filter-chip:hover,
.plane-category-tab:hover {
  background: rgba(25, 40, 70, 0.85);
  border-color: var(--panel-border-bright);
  color: var(--text-bright);
}

.filter-chip[data-dim="purpose"]:hover {
  border-color: rgba(0, 229, 255, 0.5);
}

.filter-chip[data-dim="manufacturer"]:hover {
  border-color: rgba(94, 168, 255, 0.5);
}

/* Active State - Fallback */
.filter-chip.active,
.plane-category-tab.active {
  background: rgba(0, 210, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.25);
}

/* Active State - Role (Cyan) */
.filter-chip[data-dim="purpose"].active {
  background: var(--filter-role-bg);
  border-color: var(--filter-role-border);
  color: var(--filter-role-color);
  box-shadow: 0 0 8px var(--filter-role-glow);
}

/* Active State - Manufacturer (Sky Blue) */
.filter-chip[data-dim="manufacturer"].active {
  background: var(--filter-mfr-bg);
  border-color: var(--filter-mfr-border);
  color: var(--filter-mfr-color);
  box-shadow: 0 0 8px var(--filter-mfr-glow);
}

.filter-chip.zero-count {
  opacity: 0.45;
}

.filter-chip .chip-count,
.filter-chip .tab-count,
.plane-category-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  padding: 0 3px;
  height: 13px;
  min-width: 13px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 !important;
  color: var(--text-dim);
  box-sizing: border-box;
}

.filter-chip.active .chip-count,
.filter-chip.active .tab-count,
.plane-category-tab.active .tab-count {
  border-color: rgba(0, 210, 255, 0.35);
  color: var(--cyan-accent);
  background: rgba(0, 210, 255, 0.12);
}

.filter-chip[data-dim="purpose"].active .chip-count {
  border-color: rgba(0, 229, 255, 0.4);
  color: var(--filter-role-color);
  background: rgba(0, 229, 255, 0.14);
}

.filter-chip[data-dim="manufacturer"].active .chip-count {
  border-color: rgba(94, 168, 255, 0.4);
  color: var(--filter-mfr-color);
  background: rgba(94, 168, 255, 0.14);
}

.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  background: rgba(255, 68, 102, 0.12);
  border: 1px solid rgba(255, 68, 102, 0.35);
  border-radius: 0 !important;
  color: #ff5577;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 2px;
}

.filter-reset-btn:hover {
  background: rgba(255, 68, 102, 0.25);
  border-color: rgba(255, 68, 102, 0.7);
  color: #ff88a3;
  box-shadow: 0 0 8px rgba(255, 68, 102, 0.3);
}

.filter-reset-btn.hidden {
  display: none !important;
}

.plane-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-align: center;
  width: 100%;
}

.plane-carousel-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.plane-card-btn.category-hidden,
.plane-card-btn.filter-hidden,
.carousel-dot.category-hidden,
.carousel-dot.filter-hidden {
  display: none !important;
}

/* Held invisible (layout intact) until the saved plane is scrolled into place and fully ready, so
   the hard-coded first card never paints as the selection. Reuses the container's opacity fade. */
.plane-carousel-container.awaiting-plane {
  opacity: 0;
  pointer-events: none;
}

.plane-carousel-track {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 8px;
  width: 100%;
}

.plane-carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 68px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  z-index: 2;
  transition: all 0.2s ease;
}

.carousel-nav-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.carousel-nav-btn:focus-visible {
  outline: 2px solid var(--cyan-accent);
  outline-offset: 1px;
}

.carousel-nav-btn.prev {
  margin-right: 4px;
}

.carousel-nav-btn.next {
  margin-left: 4px;
}

.plane-card-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 var(--plane-card-width);
  width: var(--plane-card-width);
  max-width: 290px;
  height: 74px;
  padding: 6px 10px;
  background: rgba(13, 20, 36, 0.65);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
}

.plane-card-btn:first-child {
  scroll-snap-align: start;
}

.plane-card-btn:last-child {
  scroll-snap-align: end;
}

.plane-card-btn:hover {
  background: rgba(25, 40, 70, 0.75);
  border-color: var(--panel-border-bright);
  color: var(--text-bright);
  transform: translateY(-1px);
}

.plane-card-btn.active {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.35) 0%, rgba(0, 210, 255, 0.2) 100%);
  border: 1px solid var(--cyan-accent);
  color: var(--text-bright);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.3), inset 0 0 8px rgba(0, 210, 255, 0.1);
}

.plane-card-btn.loading {
  border-color: rgba(0, 229, 255, 0.8) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
  animation: card-loading-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes card-loading-pulse {
  from { opacity: 0.7; }
  to { opacity: 1.0; }
}

/* An aircraft whose files could not be loaded (T181); selecting it again retries. */
.plane-card-btn.load-failed {
  border-color: rgba(240, 179, 90, 0.9) !important;
}

.plane-card-btn.load-failed::after {
  content: "Couldn't load — tap to retry";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: center;
  background: rgba(240, 179, 90, 0.92);
  color: #1b1206;
}

.plane-card-thumb {
  position: relative;
  width: 86px;
  height: 54px;
  flex-shrink: 0;
  background: rgba(4, 8, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plane-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.plane-card-btn:hover .plane-thumb-img {
  transform: scale(1.05);
}

.plane-card-btn.active .plane-card-thumb {
  border-color: var(--cyan-accent);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.35);
}

.thumb-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--cyan-accent);
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 0;
  line-height: 1.2;
}

.thumb-badge.dover {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.45);
}

.thumb-badge.sr71 {
  color: #ff3d71;
  border-color: rgba(255, 61, 113, 0.45);
}

.thumb-badge.a330 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.plane-callsign.a330 {
  color: #38bdf8;
}

.thumb-badge.a350 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.plane-callsign.a350 {
  color: #38bdf8;
}

.thumb-badge.ngf {
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.45);
}

.plane-callsign.ngf {
  color: #06b6d4;
}

.plane-card-btn[data-plane="NGF_6GEN"].active {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.35) 0%, rgba(6, 182, 212, 0.22) 100%);
  border-color: #06b6d4;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.3), inset 0 0 8px rgba(6, 182, 212, 0.1);
}

.plane-card-btn[data-plane="NGF_6GEN"].active .plane-card-thumb {
  border-color: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}

.thumb-badge.b777 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.plane-callsign.b777 {
  color: #38bdf8;
}

.plane-card-btn[data-plane="B777"].active {
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.45) 0%, rgba(56, 189, 248, 0.18) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3), inset 0 0 8px rgba(0, 82, 204, 0.2);
}

.plane-card-btn[data-plane="B777"].active .plane-card-thumb {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.thumb-badge.b737 {
  color: #ffd100;
  border-color: rgba(255, 209, 0, 0.45);
}

.plane-callsign.b737 {
  color: #ffd100;
}

.thumb-badge.b747 {
  color: #ff8c00;
  border-color: rgba(249, 115, 22, 0.45);
}

.plane-callsign.b747 {
  color: #ff8c00;
}

.plane-card-btn[data-plane="B747_8I"].active {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.40) 0%, rgba(249, 115, 22, 0.18) 100%);
  border-color: #ff8c00;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35), inset 0 0 8px rgba(234, 88, 12, 0.25);
}

.plane-card-btn[data-plane="B747_8I"].active .plane-card-thumb {
  border-color: #ff8c00;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

.thumb-badge.kc135 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.plane-callsign.kc135 {
  color: #38bdf8;
}

.thumb-badge.b52 {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.45);
}

.plane-callsign.b52 {
  color: #22c55e;
}

.plane-card-btn[data-plane="B52H"].active {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.90) 0%, rgba(34, 197, 94, 0.20) 100%);
  border-color: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35), inset 0 0 8px rgba(6, 78, 59, 0.45);
}

.plane-card-btn[data-plane="B52H"].active .plane-card-thumb {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.thumb-badge.a340 {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.45);
}

.plane-callsign.a340 {
  color: #fbbf24;
}

.thumb-badge.x59 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.plane-callsign.x59 {
  color: #38bdf8;
}

/* T282: every plane card lights in its own colour, matched to the livery where it can be (737 Southwest
   blue, A330 DHL yellow, 747 Sunrise orange, An-225 Ukraine gold/blue). Kept from before: B747 #ff8c00,
   B-52 #22c55e, NGF #06b6d4, B777 #38bdf8. A new plane needs a colour not already in this block. */

.plane-card-btn[data-plane="C5_GALAXY"].active { /* fuchsia */
  background: linear-gradient(135deg, rgba(112, 26, 117, 0.5) 0%, rgba(232, 121, 249, 0.2) 100%);
  border-color: #e879f9;
  box-shadow: 0 0 14px rgba(232, 121, 249, 0.35), inset 0 0 8px rgba(112, 26, 117, 0.3);
}

.plane-card-btn[data-plane="C5_GALAXY"].active .plane-card-thumb {
  border-color: #e879f9;
  box-shadow: 0 0 10px rgba(232, 121, 249, 0.4);
}

.plane-card-btn[data-plane="KC135R"].active { /* USAF silver */
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(203, 213, 225, 0.2) 100%);
  border-color: #cbd5e1;
  box-shadow: 0 0 14px rgba(203, 213, 225, 0.35), inset 0 0 8px rgba(15, 23, 42, 0.3);
}

.plane-card-btn[data-plane="KC135R"].active .plane-card-thumb {
  border-color: #cbd5e1;
  box-shadow: 0 0 10px rgba(203, 213, 225, 0.4);
}

.plane-card-btn[data-plane="A350_1000"].active { /* violet */
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.5) 0%, rgba(192, 132, 252, 0.2) 100%);
  border-color: #c084fc;
  box-shadow: 0 0 14px rgba(192, 132, 252, 0.35), inset 0 0 8px rgba(88, 28, 135, 0.3);
}

.plane-card-btn[data-plane="A350_1000"].active .plane-card-thumb {
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

.plane-card-btn[data-plane="X59"].active { /* teal */
  background: linear-gradient(135deg, rgba(17, 94, 89, 0.5) 0%, rgba(45, 212, 191, 0.2) 100%);
  border-color: #2dd4bf;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.35), inset 0 0 8px rgba(17, 94, 89, 0.3);
}

.plane-card-btn[data-plane="X59"].active .plane-card-thumb {
  border-color: #2dd4bf;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
}

.plane-card-btn[data-plane="AN225"].active { /* Ukraine gold over Ukraine blue */
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.45) 0%, rgba(217, 164, 65, 0.2) 100%);
  border-color: #d9a441;
  box-shadow: 0 0 14px rgba(217, 164, 65, 0.35), inset 0 0 8px rgba(0, 87, 183, 0.3);
}

.plane-card-btn[data-plane="AN225"].active .plane-card-thumb {
  border-color: #d9a441;
  box-shadow: 0 0 10px rgba(217, 164, 65, 0.4);
}

.plane-card-btn[data-plane="B787_10"].active { /* soft periwinkle */
  background: linear-gradient(135deg, rgba(30, 41, 99, 0.55) 0%, rgba(148, 163, 245, 0.2) 100%);
  border-color: #94a3f5;
  box-shadow: 0 0 14px rgba(148, 163, 245, 0.35), inset 0 0 8px rgba(30, 41, 99, 0.3);
}

.plane-card-btn[data-plane="B787_10"].active .plane-card-thumb {
  border-color: #94a3f5;
  box-shadow: 0 0 10px rgba(148, 163, 245, 0.4);
}

.plane-card-btn[data-plane="A330_200F"].active { /* DHL yellow over DHL red */
  background: linear-gradient(135deg, rgba(212, 5, 17, 0.35) 0%, rgba(250, 204, 21, 0.2) 100%);
  border-color: #facc15;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.35), inset 0 0 8px rgba(212, 5, 17, 0.3);
}

.plane-card-btn[data-plane="A330_200F"].active .plane-card-thumb {
  border-color: #facc15;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

.plane-card-btn[data-plane="B737_MAX8"].active { /* Southwest blue; Heart livery red into blue */
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.4) 0%, rgba(79, 116, 224, 0.28) 100%);
  border-color: #4f74e0;
  box-shadow: 0 0 14px rgba(79, 116, 224, 0.35), inset 0 0 8px rgba(27, 53, 117, 0.3);
}

.plane-card-btn[data-plane="B737_MAX8"].active .plane-card-thumb {
  border-color: #4f74e0;
  box-shadow: 0 0 10px rgba(79, 116, 224, 0.4);
}

.plane-card-btn[data-plane="A340"].active { /* pink */
  background: linear-gradient(135deg, rgba(80, 7, 36, 0.5) 0%, rgba(244, 114, 182, 0.2) 100%);
  border-color: #f472b6;
  box-shadow: 0 0 14px rgba(244, 114, 182, 0.35), inset 0 0 8px rgba(80, 7, 36, 0.3);
}

.plane-card-btn[data-plane="A340"].active .plane-card-thumb {
  border-color: #f472b6;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4);
}

.plane-card-btn[data-plane="SR71"].active { /* red */
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.45) 0%, rgba(239, 68, 68, 0.2) 100%);
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35), inset 0 0 8px rgba(127, 29, 29, 0.3);
}

.plane-card-btn[data-plane="SR71"].active .plane-card-thumb {
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.plane-card-btn[data-plane="CONCORDE"].active { /* British Airways speedmarque crimson */
  background: linear-gradient(135deg, rgba(0, 36, 125, 0.45) 0%, rgba(225, 29, 72, 0.22) 100%);
  border-color: #e11d48;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.35), inset 0 0 8px rgba(0, 36, 125, 0.3);
}

.plane-card-btn[data-plane="CONCORDE"].active .plane-card-thumb {
  border-color: #e11d48;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.4);
}

.plane-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.plane-card-eyebrow,
.plane-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.plane-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.plane-callsign,
.plane-role-tag {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  color: var(--cyan-accent);
  background: rgba(0, 210, 255, 0.12);
  padding: 1px 4px;
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.badge-tag.sr71 {
  color: #ff3d71;
  background: rgba(255, 61, 113, 0.15);
  border: 1px solid rgba(255, 61, 113, 0.4);
}

.plane-card-sub {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* Pagination indicator dots below track */
.carousel-pagination {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.carousel-dot {
  width: 18px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.carousel-dot:hover {
  background: rgba(0, 210, 255, 0.6);
}

.carousel-dot.active {
  width: 32px;
  background: var(--cyan-accent);
  box-shadow: 0 0 6px var(--cyan-accent);
}

@media (prefers-reduced-motion: reduce) {
  .plane-carousel-track {
    scroll-behavior: auto;
  }
  .plane-card-btn, .plane-thumb-img {
    transition: none !important;
  }
}

/* ─── Camera Selector Strip ───────────────────────────────────────── */
.camera-selector-strip {
  display: flex;
  align-items: center;
  background: rgba(5, 10, 20, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  padding: 2px 3px;
  gap: 4px;
  height: 34px;
  box-sizing: border-box;
}

/* T279: Plane Selection is always the orbit turntable and nothing is flying, so the camera switch
   and the autopilot toggle are hidden there (Runway View and In Flight keep them). */
body.mode-showcase .camera-selector-strip,
body.mode-showcase #btn-ap-toggle {
  display: none;
}

.cam-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.cam-btn:hover {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.06);
}

.cam-btn.active {
  color: var(--cyan-accent);
  background: rgba(0, 210, 255, 0.18);
  border: 1px solid rgba(0, 210, 255, 0.45);
}

/* ─── Telemetry HUD (Pinned to Top Bar Between Menu and Right Actions) ─── */
.telemetry-hud {
  position: absolute;
  top: 2rem;
  left: calc(2rem + 54px);
  /* Clear of #top-right-actions plus a 14px gutter. These were fixed at 138px/192px, sized for a
     three-button bar, and overlapped the bar by 26px once it grew a fourth (sound) button. */
  right: calc(2rem + var(--top-right-actions-w) + 14px);
  height: 44px;
  width: fit-content;
  max-width: calc(100% - 4rem - 54px - var(--top-right-actions-w) - 14px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(4, 10, 20, 0.75);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  border-radius: 0 !important;
  box-sizing: border-box;
  z-index: 90;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* When SimPlane menu expands, it opens on top of the HUD */
.top-header.menu-expanded ~ .telemetry-hud {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* When SimPlane menu expands, hide background coordinates and map buttons so they never bleed through or intercept clicks */
body.menu-open .pos-readout,
body.menu-open .sim-goto-btn,
body.menu-open .sim-map-btn,
body.menu-open .sim-goto,
body:has(.top-header.menu-expanded) .pos-readout,
body:has(.top-header.menu-expanded) .sim-goto-btn,
body:has(.top-header.menu-expanded) .sim-map-btn,
body:has(.top-header.menu-expanded) .sim-goto {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* In Showcase / Plane Selection mode, hide telemetry HUD */
body.mode-showcase .telemetry-hud {
  display: none !important;
}

/* When Traditional Avionics HUD is active, hide the top bar telemetry strip */
body.hud-traditional-active .telemetry-hud {
  display: none !important;
}

/* Traditional Collimated Avionics HUD Canvas Overlay */
.traditional-hud-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

/* In Showcase mode, traditional HUD is also hidden */
body.mode-showcase .traditional-hud-canvas {
  display: none !important;
}

/* Interactive Tap Zones for Traditional Collimated Avionics HUD */
.hud-tape-tap-zone {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
  display: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-sizing: border-box;
}

body.hud-traditional-active .hud-tape-tap-zone {
  display: block;
}

body.mode-showcase .hud-tape-tap-zone {
  display: none !important;
}

.hud-tape-tap-zone:hover {
  background: rgba(0, 255, 102, 0.05);
  border-color: rgba(0, 255, 102, 0.25);
}

.hud-tape-tap-zone:active {
  background: rgba(0, 255, 102, 0.12);
  border-color: rgba(0, 255, 102, 0.45);
}

.hud-tape-tap-zone:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 1px;
}

/* ─── Satellite Sky HUD Tracking Indicators (T67) ──────────────────── */
.hud-sat-indicator,
.hud-iss-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 5;
  margin-left: -14px;
  margin-top: -14px;
  border-radius: 0 !important;
  will-change: transform, opacity;
  transition: opacity 0.15s ease-out;
}

body.mode-showcase .hud-sat-indicator,
body.mode-showcase .hud-iss-indicator {
  display: none !important;
}

.hud-sat-reticle,
.hud-iss-reticle {
  display: block;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 3px rgba(0, 255, 102, 0.6));
}

.hud-sat-label,
.hud-iss-label {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  font-family: "SF Mono", "Roboto Mono", "Courier New", Courier, monospace;
  text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 5px rgba(0, 255, 102, 0.5);
  pointer-events: none;
  user-select: none;
}

.hud-sat-title,
.hud-iss-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  color: #00ff66;
}

.hud-sat-sub,
.hud-iss-sub {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  color: #00ff66;
  opacity: 0.85;
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-sizing: border-box;
  flex: 0 0 66px;
  width: 66px;
  min-width: 0;
}

.hud-item[data-field="airspeed"] {
  width: 66px;
  flex: 0 0 66px;
}

.hud-item[data-field="altitude"] {
  width: 66px;
  flex: 0 0 66px;
}

.hud-item[data-field="throttle"] {
  width: 54px;
  flex: 0 0 54px;
}

.hud-item[data-field="gear"] {
  width: 68px;
  flex: 0 0 68px;
}

.hud-item[data-field="brakes"] {
  width: 48px;
  flex: 0 0 48px;
}

.hud-item[data-field="flaps"] {
  width: 54px;
  flex: 0 0 54px;
}

.hud-item[data-field="flaps"] .hud-val {
  font-size: 12px;
}

.hud-item[data-field="pitch"] {
  width: 44px;
  flex: 0 0 44px;
}

.hud-item[data-field="bank"] {
  width: 44px;
  flex: 0 0 44px;
}

.hud-label {
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1.2;
}

.hud-val {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}

.hud-val.green {
  color: var(--green-active);
}

.hud-val.amber {
  color: var(--amber-warn);
}

.hud-val.blue {
  color: var(--cyan-accent);
}

.hud-val.red {
  color: #ff5252;
}

.hud-val.dim {
  color: var(--text-dim);
  opacity: 0.7;
}

.hud-divider {
  width: 1px;
  height: 20px;
  background: var(--panel-border);
  flex: 0 0 1px;
  box-sizing: border-box;
  margin-top: 5px;
}

.hud-item.hud-interactive {
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0 4px;
}

.hud-item.hud-interactive:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hud-item.hud-interactive:hover .hud-val {
  filter: brightness(1.25);
}

.hud-item.hud-interactive:active {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(0.96);
}

.hud-item.hud-interactive:focus-visible {
  outline: 1px solid var(--cyan-accent);
  outline-offset: 1px;
}

/* ─── Bottom Flight Actions Bar (Pinned to bottom of window on desktop) ─ */
.bottom-controls-bar {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: calc(100vw - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-bottom: 0;
  z-index: 12;
  pointer-events: none;
}

.bottom-controls-bar > * {
  pointer-events: auto;
}

.actions-row {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4);
  overflow-x: auto;
  scrollbar-width: none;
}

.actions-row::-webkit-scrollbar {
  display: none;
}

/* When flight controls overlay is toggled off (hidden), reveal actions-row fallback buttons */
.flight-controls-overlay.hidden ~ .bottom-controls-bar .actions-row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* When flight controls overlay is visible, hide redundant bottom action buttons and keyboard legend */
.flight-controls-overlay:not(.hidden) ~ .bottom-controls-bar .actions-row,
.flight-controls-overlay:not(.hidden) ~ .bottom-controls-bar .controls-legend {
  display: none !important;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 0 !important;
  border: 1px solid var(--panel-border);
  background: rgba(20, 32, 55, 0.75);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex: 1 1 0px;
  min-width: max-content;
  max-width: 170px;
}

.action-btn > span:not(.btn-key-badge) {
  white-space: nowrap;
}

.action-btn svg {
  flex-shrink: 0;
}

.btn-key-badge {
  flex-shrink: 0;
}

.action-btn:hover {
  background: rgba(40, 65, 110, 0.9);
  border-color: var(--panel-border-bright);
  box-shadow: 0 4px 14px rgba(25, 118, 210, 0.3);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: translateY(0);
}

.action-btn.active {
  background: rgba(255, 82, 82, 0.24);
  border-color: rgba(255, 82, 82, 0.75);
  color: #ff5252;
  box-shadow: 0 0 14px rgba(255, 82, 82, 0.4);
}

.action-btn.active:hover {
  background: rgba(255, 82, 82, 0.34);
  border-color: rgba(255, 82, 82, 0.9);
}

.action-btn.primary {
  background: linear-gradient(135deg, #0072ff 0%, #004b9c 100%);
  border-color: rgba(0, 180, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 114, 255, 0.35);
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #1a88ff 0%, #005bb8 100%);
  box-shadow: 0 6px 20px rgba(0, 114, 255, 0.5);
}

.action-btn.highlight {
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(255, 215, 0, 0.12);
  color: var(--ukraine-yellow);
}

.action-btn.highlight:hover {
  background: rgba(255, 215, 0, 0.22);
}

.action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.btn-key-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-dim);
  margin-left: 2px;
}

/* ─── Controls Cheat Sheet Strip ──────────────────────────────────── */
.controls-legend {
  display: none !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  border-bottom: none;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 3px 6px;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1.2;
}

.legend-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-bright);
}

.legend-btn:hover .key-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.legend-btn:active {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(1px);
}

.legend-btn:focus-visible {
  outline: 1px solid var(--ukraine-blue, #0072ff);
  outline-offset: 1px;
}

.legend-btn-label {
  font-size: 11px;
  letter-spacing: 0.2px;
}

.key-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-bright);
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  transition: all 0.15s ease;
}

/* ─── Tablet On-Screen Touch Flight Controls (Throttle & Stick) ─────── */
.flight-controls-overlay {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.flight-controls-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

.flight-controls-overlay.hidden * {
  pointer-events: none !important;
}

/* ─── Heading Dial (T366) ──────────────────────────────────────────── */
/* The bottom-left corner on its own; beside THROTTLE (its 106px + the Stick HUD's 8px gap) while the
   Stick HUD is up, sliding over as the Stick HUD fades. An instrument, not a control: touches go through
   to the view, so it never takes an orbit drag. */
:root {
  --hdg-dial-w: 116px;
}

.heading-dial {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: var(--hdg-dial-w);
  padding: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 0 !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 15;
  transition: left 0.22s ease, bottom 0.22s ease;
}

.flight-controls-overlay:not(.hidden) ~ .heading-dial {
  left: calc(2rem + 106px + 8px);
}

body.mode-showcase .heading-dial {
  display: none !important;
}

/* Above the desktop actions row's left end when the row is too wide to clear the dial: hud-heading-dial.js
   measures the row, sets the class and lifts the dial by the row's height (--hdg-lift). */
.heading-dial.above-row {
  bottom: var(--hdg-lift);
}

.hdg-readout-val {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--cyan-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hdg-dial-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Sizes are in the dial's own 0–100 units, so the card scales with the panel. */
.hdg-face {
  fill: rgba(2, 8, 18, 0.55);
  stroke: var(--panel-border);
  stroke-width: 1;
}

.hdg-tick {
  stroke: var(--text-dim);
  stroke-width: 1;
}

.hdg-tick-major {
  stroke: var(--text-main);
  stroke-width: 1.4;
}

.hdg-label {
  fill: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
}

.hdg-label-cardinal {
  fill: var(--text-bright);
  font-size: 11px;
}

/* The selected heading: the HDG pill's cyan, so the two read as one. */
.hdg-bug path {
  fill: var(--cyan-accent);
  filter: drop-shadow(0 0 2px rgba(0, 210, 255, 0.6));
}

.hdg-lubber {
  fill: var(--text-bright);
}

.hdg-plane {
  fill: none;
  stroke: var(--text-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  :root {
    --hdg-dial-w: 96px;
  }
  .heading-dial {
    left: calc(1rem + env(safe-area-inset-left, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    padding: 6px;
  }
  /* The Stick HUD's mobile throttle is 92px wide. */
  .flight-controls-overlay:not(.hidden) ~ .heading-dial {
    left: calc(1rem + env(safe-area-inset-left, 0px) + 92px + 8px);
  }
  .heading-dial .quadrant-title {
    font-size: 8.5px;
    letter-spacing: 0.4px;
  }
  .hdg-readout-val {
    font-size: 10px;
  }
}

/* Too narrow for the dial beside the Stick HUD's three panels (a phone held upright): the Stick HUD wins. */
@media (max-width: 520px) {
  .flight-controls-overlay:not(.hidden) ~ .heading-dial {
    display: none;
  }
}

/* ─── Left Quadrant: Throttle & Brakes ────────────────────────────── */
.flight-throttle-quadrant {
  display: flex;
  flex-direction: column;
  width: 106px;
  padding: 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.quadrant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.quadrant-title {
  font-size: 9.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.thr-readout-val {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--cyan-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}

.thr-assembly {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  height: 140px;
  align-items: stretch;
}

.thr-detents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.thr-detent-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.thr-detent-btn:hover {
  background: rgba(0, 210, 255, 0.2);
  border-color: var(--cyan-accent);
  color: #fff;
}

.thr-detent-btn.active {
  background: rgba(0, 210, 255, 0.35);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}

.flight-thr-track {
  position: relative;
  width: 46px;
  flex: 0 0 46px;
  background: rgba(5, 10, 20, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  cursor: ns-resize;
  overflow: visible;
  touch-action: none;
  box-sizing: border-box;
}

.flight-thr-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, rgba(0, 180, 255, 0.45) 0%, rgba(0, 230, 118, 0.55) 75%, rgba(255, 171, 0, 0.7) 100%);
  border-radius: 0 !important;
  pointer-events: none;
  transition: height 0.05s linear;
}

.flight-thr-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  height: 18px;
  bottom: 0;
  transform: translateY(50%);
  background: #1976d2;
  border: 1px solid #00d2ff;
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
  transition: bottom 0.05s linear;
}

.flight-thr-thumb.dragging {
  cursor: grabbing;
  background: #00d2ff;
  box-shadow: 0 0 16px #00d2ff;
}

.thr-thumb-grip {
  display: block;
  width: 16px;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 -3px 0 #ffffff, 0 3px 0 #ffffff;
  border-radius: 0 !important;
  pointer-events: none;
}

.touch-quadrant-btn.brake {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.6px;
  background: rgba(20, 32, 55, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  color: var(--text-bright);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: none;
}

.touch-quadrant-btn.brake svg {
  width: 12px;
  height: 12px;
}

.touch-quadrant-btn.brake:hover {
  background: rgba(40, 65, 110, 0.9);
  border-color: var(--panel-border-bright);
}

.touch-quadrant-btn.brake.active {
  background: rgba(255, 61, 113, 0.35);
  border-color: #ff3d71;
  color: #ff3d71;
  box-shadow: 0 0 12px rgba(255, 61, 113, 0.55);
}

/* ─── Right Controls Group: Instrument Cluster & Flight Stick ───────── */
.flight-right-cluster-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.flight-right-cluster-group > * {
  pointer-events: auto;
}

/* ─── Flight Instrument Cluster of Thin Square Buttons ──────────────── */
.flight-instrument-cluster {
  display: flex;
  flex-direction: column;
  width: 102px;
  padding: 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.flight-instrument-cluster .quadrant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.instrument-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 6px;
  align-content: start;
}

.cluster-btn {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 2px;
  background: rgba(20, 32, 55, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  color: var(--text-bright);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  box-sizing: border-box;
  text-align: center;
}

.cluster-btn:hover {
  background: rgba(40, 65, 110, 0.9);
  border-color: var(--panel-border-bright);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.35);
}

.cluster-btn:active {
  transform: translateY(0);
}

.cluster-btn.active {
  background: rgba(0, 210, 255, 0.25);
  border-color: var(--cyan-accent);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
}

.cluster-btn.active-warn {
  background: rgba(255, 82, 82, 0.28);
  border-color: #ff5252;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 82, 82, 0.5);
}

.cluster-btn svg {
  display: none;
}

.cluster-btn-label {
  font-size: 8.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-bright);
  white-space: nowrap;
}

.cluster-btn.action-takeoff .cluster-btn-label,
.cluster-btn.action-land .cluster-btn-label {
  font-size: 9.5px;
  letter-spacing: 0.6px;
}

.cluster-btn-val {
  font-size: 7.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.cluster-btn-val.green {
  color: #00e676;
}

.cluster-btn-val.cyan {
  color: var(--cyan-accent);
}

.cluster-btn-val.dim {
  color: var(--text-dim);
}

.cluster-btn-val.orange {
  color: #ffab00;
}

/* ─── Right Quadrant: Flight Stick & Rudder ───────────────────────── */
.flight-stick-quadrant {
  display: flex;
  flex-direction: column;
  width: 172px;
  padding: 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.stick-readout-val {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--cyan-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}

.flight-stick-pad {
  position: relative;
  width: 152px;
  height: 152px;
  background: rgba(5, 10, 20, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stick-axis {
  position: absolute;
  background: rgba(64, 130, 240, 0.28);
  pointer-events: none;
  border-radius: 0 !important;
}

.stick-axis.axis-x {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.stick-axis.axis-y {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  transform: translateX(-50%);
}

.stick-dir-label {
  position: absolute;
  font-size: 7.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.55;
  letter-spacing: 0.4px;
  pointer-events: none;
  user-select: none;
}

.stick-dir-label.dir-up {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.stick-dir-label.dir-down {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.stick-dir-label.dir-left {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.stick-dir-label.dir-right {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.flight-stick-knob {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(25, 118, 210, 0.35);
  border: 1px solid #00d2ff;
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.05s ease-out;
}

.flight-stick-pad.active .flight-stick-knob {
  background: rgba(0, 210, 255, 0.45);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.85);
}

.stick-knob-pip {
  width: 8px;
  height: 8px;
  background: var(--cyan-accent);
  border: 1px solid #ffffff;
  border-radius: 0 !important;
  box-shadow: 0 0 4px #00d2ff;
}

.flight-rudder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
}

.touch-rudder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  font-size: 8.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  background: rgba(20, 32, 55, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s ease;
  flex: 1;
  touch-action: none;
  line-height: 1;
}

.touch-rudder-btn:hover {
  background: rgba(40, 65, 110, 0.9);
  color: var(--text-bright);
}

.touch-rudder-btn:active,
.touch-rudder-btn.active {
  background: rgba(0, 210, 255, 0.32);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
}

.rudder-bar-label {
  font-size: 7.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.6;
  letter-spacing: 0.5px;
}

/* ─── Specs Drawer / Modal ────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 6, 12, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-backdrop:not(.visible) * {
  pointer-events: none !important;
}

.specs-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 12px;
}

.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
}

.modal-title svg {
  margin-top: calc((1lh - 20px) / 2);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 0;
  transition: color 0.18s;
}

.modal-close-btn:hover {
  color: var(--text-bright);
}

/* ─── T337: Choose starting airport (Fly from Plane Selection) ──────── */
.airport-picker-panel {
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  box-sizing: border-box;
}

.airport-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.airport-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text-bright);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.airport-option:hover,
.airport-option:focus-visible {
  background: rgba(0, 210, 255, 0.12);
  border-color: rgba(0, 210, 255, 0.45);
  outline: none;
}

.airport-option.last-used {
  border-color: rgba(0, 210, 255, 0.45);
}

.airport-option-code {
  min-width: 52px;
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan-accent);
}

.airport-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.airport-option-name {
  font-size: 14px;
  font-weight: 600;
}

.airport-option-rwy {
  font-size: 11.5px;
  color: var(--text-dim);
}

.airport-option kbd {
  padding: 1px 6px;
  border: 1px solid var(--panel-border);
  font-size: 11px;
  color: var(--text-dim);
}

@media (max-height: 420px) {
  .airport-picker-panel { padding: 12px 14px 14px; }
  .airport-picker-list { gap: 6px; margin-top: 8px; }
  .airport-option { padding: 8px 12px; }
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spec-cell {
  background: rgba(5, 10, 20, 0.45);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}

.specs-description {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  background: rgba(5, 10, 20, 0.3);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.inspect-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.inspect-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 0;
  background: rgba(25, 118, 210, 0.25);
  border: 1px solid var(--panel-border);
  color: var(--cyan-accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.inspect-btn:hover {
  background: rgba(25, 118, 210, 0.45);
  border-color: var(--cyan-accent);
}

/* ─── Spec Sheet Sidebar (T277) ───────────────────────────────────── */
/* Large viewports only, in Plane Selection: the spec sheet sits down the right side instead of
   behind the button. The media query must match SPECS_SIDEBAR_MQ in flight-app.js, which routes
   the button to "toggle the sidebar" instead of "open the modal" when it matches. --specs-sidebar-top
   is set from the carousel panel's measured bottom, since its height depends on the filter rows.
   The plane's on-screen size follows the viewport HEIGHT, so the aspect-ratio floor is what keeps the
   sidebar off the An-225's wingtip (1280x800 and 1440x1000 both put the wing under it). */
.specs-sidebar {
  display: none;
}

@media (min-width: 1440px) and (min-height: 720px) and (min-aspect-ratio: 3/2) {
  body.mode-showcase:not(.specs-sidebar-off) .specs-sidebar {
    position: absolute;
    top: var(--specs-sidebar-top, 232px);
    right: 28px;
    bottom: 24px;
    width: 380px;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 0;
    border-radius: 0;
    z-index: 100;
    pointer-events: auto;
  }
}

.specs-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}

.specs-sidebar-head .modal-title {
  font-size: 18px;
}

.specs-sidebar-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 18px;
}

.specs-sidebar .specs-grid {
  gap: 8px;
}

.specs-sidebar .spec-cell {
  padding: 8px 10px;
}

.specs-sidebar .spec-value {
  font-size: 13px;
}

.specs-sidebar .inspect-buttons-row {
  margin-top: -4px;
}

.specs-sidebar .specs-credits {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: #8a99ad;
  line-height: 1.4;
}

.specs-sidebar .specs-credits .spec-label {
  display: block;
  margin-bottom: 3px;
}

/* ─── Flight Controls & Shortcuts Help Modal ──────────────────────── */
.help-modal {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.help-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 680px) {
  .help-shortcuts-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.help-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-section-title {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cyan-accent);
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.25);
  padding-bottom: 4px;
}

.help-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-shortcut-desc {
  color: var(--text-dim);
  font-size: 11.5px;
  flex: 1;
}

.help-shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.help-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 0 !important;
}

.help-or {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  padding: 0 1px;
}

.help-modal-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4px;
}

.help-footer-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  display: block;
}

/* T273: medium CTA to the full help page (help/#simplane). */
.help-docs-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  text-decoration: none;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid var(--cyan-accent);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.help-docs-cta:hover,
.help-docs-cta:focus-visible {
  background: rgba(0, 210, 255, 0.24);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.35);
  outline: none;
}

/* ─── 1kx Projects Menu Modal Integration ─────────────────────────── */
/* Reveal: opacity + slide, matching every other app's .app-nav-modal (football, LiamBot, CaseyCase,
   root, Casey) — SimPlane used to toggle display:none/block instead (no animation), the one
   structural outlier; unified 2026-09-22. */
.app-nav-modal {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  background: var(--panel-bg-solid);
  border: 1px solid var(--panel-border-bright);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-nav-modal.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Matches the other apps' .app-nav-container:has(.app-nav-modal.visible) z-index boost, though it
   rarely matters here — .app-nav-modal's own z-index:1000 above already clears the 3D canvas and
   HUD panels on this page. */
.app-nav-container:has(.app-nav-modal.visible) {
  z-index: 1000;
}

.app-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  padding: 4px 8px 8px 8px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 8px;
}

.app-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dim);
  transition: all 0.15s ease;
}

.app-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-bright);
}

.app-nav-link.current-app {
  background: rgba(0, 210, 255, 0.15);
  color: var(--cyan-accent);
}

.app-nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.app-nav-icon svg {
  width: 16px;
  height: 16px;
}

/* Per-icon proportion nudges — the icons.svg symbols aren't drawn to a consistent visual weight
   at a shared 16px, so each app that lists them corrects the same handful (values matched to
   football/LiamBot/CaseyCase/Casey/root's own .app-nav-icon.icon-xxx rules, since it's the
   symbols' own geometry being corrected for, not a SimPlane-specific choice). icon-simplane has
   no cross-app precedent (SimPlane isn't in any other app's list); sized to sit visually between
   icon-casey and icon-1kx until it's un-hidden and judged against the others directly. */
.app-nav-icon.icon-1kx svg { width: 24px; height: 24px; }
.app-nav-icon.icon-football svg { width: 18px; height: 18px; }
.app-nav-icon.icon-caseyland svg { width: 28px; height: 28px; }
.app-nav-icon.icon-caseycase svg { width: 24px; height: 24px; }
.app-nav-icon.icon-casey svg { width: 20px; height: 20px; }
.app-nav-icon.icon-simplane svg { width: 20px; height: 20px; }

.app-nav-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.app-nav-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.app-nav-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
}

.app-nav-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.app-nav-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background-color: var(--cyan-accent);
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.85), 0 0 12px rgba(0, 210, 255, 0.45);
  display: inline-block;
  flex-shrink: 0;
}

.app-nav-ext {
  opacity: 0.7;
  color: var(--text-dim);
  transition: opacity 0.15s ease;
}

.app-nav-link:hover .app-nav-ext {
  opacity: 1;
  color: var(--text-bright);
}

/* ─── Responsive Media Queries ─────────────────────────────────────── */
/* Tablet & Touch Devices: Hide action button row and keyboard shortcuts legend */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .actions-row,
  .controls-legend {
    display: none !important;
  }
  .btn-key-badge {
    display: none !important;
  }
  .bottom-controls-bar {
    bottom: 12px;
    padding: 0;
    left: 128px;
    right: 194px;
    width: auto;
    max-width: none;
    transform: none;
  }
  .flight-controls-overlay.hidden ~ .bottom-controls-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: 100%;
    gap: 0;
  }
}

/* Mobile & Touch Devices: Hide throttle %, gear, and flaps from top bar telemetry HUD
   since they are already continuously visible and controllable in on-screen flight controls */
@media (max-width: 860px), (hover: none) and (pointer: coarse), (max-height: 480px) {
  .telemetry-hud .hud-item[data-field="throttle"],
  .telemetry-hud .hud-divider-throttle,
  .telemetry-hud .hud-item[data-field="gear"],
  .telemetry-hud .hud-divider-gear,
  .telemetry-hud .hud-item[data-field="flaps"],
  .telemetry-hud .hud-divider-flaps {
    display: none !important;
  }
}

@media (max-width: 1360px) {
  /* Once header-middle-controls wraps to its own row below, the base rule's gap:16px (meant as
     the horizontal gap between title/middle-controls/nav on one desktop row) becomes the vertical
     gap BETWEEN those two rows instead, and reads as too much air. row-gap alone tightens just
     that, without touching the desktop single-row spacing. */
  .top-header.menu-expanded {
    /* header-middle-controls (below) drops to its own row once it hits width:100%, but the
       base rule's height:44px/min-height:44px is sized for one row -- without relaxing it here,
       at the same breakpoint that causes the wrap, the second row renders outside the panel's
       own box instead of growing it (measured via a scratch CDP script at 1100px: topHeader
       stayed top:28/bottom:72 while header-middle-controls sat at top:73/bottom:107, entirely
       below the panel it's supposed to be inside). */
    height: auto;
    min-height: 44px;
    row-gap: 6px;
    /* The right-hand clearance in the base rule exists only because #top-right-actions shares
       row 1 with the header. Once the controls drop to row 2 they sit below that panel, so the
       row runs to the header's own right edge (flush with the pinned icons above it). Row 1 is
       just the ~200px title, which cannot reach the panel at any width this applies to. */
    padding: 6px 4px;
  }
  .header-middle-controls {
    order: 3;
    width: 100%;
    margin-top: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    height: auto;
  }
  .top-header .app-nav-container {
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 860px) {
  .ui-overlay {
    padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px));
  }
  .top-right-actions {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
  }
  .top-header {
    padding: 4px;
    width: auto;
    align-self: flex-start;
  }
  .top-header.menu-expanded {
    /* Matches #top-right-actions' own 4px padding (not the wider desktop 12px) so the mode-switcher
       and window-controls row lines up left and right with the buttons in that separate panel above it. */
    padding: 6px 4px;
    width: 100%;
    align-self: stretch;
    height: auto;
    min-height: 44px;
  }
  .header-subtitle {
    display: none;
  }
  .header-middle-controls {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: auto;
  }
  .bottom-controls-bar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100vw - 2rem);
    padding: 0;
  }
  .flight-controls-overlay.hidden ~ .bottom-controls-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: 100%;
    gap: 0;
  }
  .telemetry-hud {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px) + 48px);
    right: calc(1rem + env(safe-area-inset-right, 0px) + var(--top-right-actions-w) + 14px);
    max-width: calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 48px - var(--top-right-actions-w) - 14px);
    height: 44px;
    padding: 3px 4px;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .telemetry-hud::-webkit-scrollbar {
    display: none;
  }
  .hud-divider {
    height: 15px;
  }
  .hud-item {
    min-width: 0;
    flex: 0 0 52px;
    width: 52px;
  }
  .hud-item[data-field="airspeed"] {
    width: 58px;
    flex: 0 0 58px;
  }
  .hud-item[data-field="altitude"] {
    width: 58px;
    flex: 0 0 58px;
  }
  /* On mobile viewports, throttle %, gear, and flaps are hidden; brakes remain */
  .telemetry-hud .hud-item[data-field="throttle"],
  .telemetry-hud .hud-divider-throttle,
  .telemetry-hud .hud-item[data-field="gear"],
  .telemetry-hud .hud-divider-gear,
  .telemetry-hud .hud-item[data-field="flaps"],
  .telemetry-hud .hud-divider-flaps {
    display: none !important;
  }
  .hud-item[data-field="brakes"] {
    width: 42px;
    flex: 0 0 42px;
  }
  .hud-item[data-field="pitch"] {
    width: 38px;
    flex: 0 0 38px;
  }
  .hud-item[data-field="bank"] {
    width: 38px;
    flex: 0 0 38px;
  }
  .hud-label {
    font-size: 7.5px;
    letter-spacing: 0.3px;
  }
  .hud-val {
    font-size: 11.5px;
  }
  .telemetry-hud .hud-ap-item {
    min-width: 0;
    width: auto;
    padding: 0 2px;
  }
  .telemetry-hud .hud-ap-pill-group {
    gap: 2px;
  }
  .telemetry-hud .hud-ap-pill {
    padding: 2px 3.5px;
    font-size: 8px;
  }
  .actions-row,
  .controls-legend,
  .btn-key-badge {
    display: none !important;
  }
  .specs-grid {
    grid-template-columns: 1fr;
  }
  .plane-carousel-container {
    --plane-card-width: 220px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 6px 6px 12px;
  }
  .plane-card-btn {
    flex: 0 0 var(--plane-card-width);
    width: var(--plane-card-width);
    max-width: 250px;
    height: 64px;
    gap: 8px;
    padding: 4px 8px;
  }
  .plane-card-thumb {
    width: 76px;
    height: 48px;
  }
  .plane-card-title {
    font-size: 12px;
  }
  .plane-card-sub {
    font-size: 9px;
  }
  .carousel-nav-btn {
    width: 26px;
    height: 62px;
  }
  .flight-controls-overlay {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
  }
  .flight-throttle-quadrant {
    width: 92px;
    padding: 6px;
    box-sizing: border-box;
  }
  .flight-throttle-quadrant .quadrant-title {
    font-size: 8.5px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .flight-throttle-quadrant .thr-readout-val {
    font-size: 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .thr-assembly {
    height: 116px;
    gap: 6px;
    justify-content: space-between;
  }
  .flight-thr-track {
    width: 42px;
    flex: 0 0 42px;
  }
  .flight-thr-thumb {
    width: 100%;
    left: 0;
    height: 16px;
  }
  .thr-detent-btn {
    font-size: 7px;
    padding: 1px 3px;
  }
  .flight-stick-quadrant {
    width: 154px;
    padding: 6px;
    box-sizing: border-box;
  }
  .flight-stick-quadrant .quadrant-title {
    font-size: 8.5px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .flight-stick-quadrant .stick-readout-val {
    font-size: 9.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    text-align: right;
  }
  .flight-stick-pad {
    width: 140px;
    height: 122px;
  }
  .flight-stick-knob {
    width: 34px;
    height: 34px;
  }
  .touch-quadrant-btn.brake {
    padding: 4px 2px;
    font-size: 9px;
  }
  .touch-rudder-btn {
    font-size: 7.5px;
    padding: 3px 4px;
  }
  .flight-instrument-cluster {
    width: 88px;
    padding: 6px;
  }
  .instrument-cluster-grid {
    grid-template-columns: repeat(2, 34px);
    gap: 4px;
  }
  .cluster-btn {
    width: 34px;
    height: 34px;
    padding: 2px 1px;
  }
  .cluster-btn svg {
    display: none;
  }
  .cluster-btn-label {
    font-size: 7.5px;
  }
  .cluster-btn.action-takeoff .cluster-btn-label,
  .cluster-btn.action-land .cluster-btn-label {
    font-size: 8px;
  }
  .cluster-btn-val {
    font-size: 7px;
  }
}

@media (max-width: 768px) {
  .telemetry-hud {
    left: calc(1rem + env(safe-area-inset-left, 0px) + 48px);
    right: calc(1rem + env(safe-area-inset-right, 0px) + var(--top-right-actions-w) + 14px);
    max-width: calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 48px - var(--top-right-actions-w) - 14px);
    padding: 2px 3px;
    gap: 2px;
  }
  .hud-divider {
    height: 13px;
  }
  .hud-item {
    min-width: 0;
    flex: 0 0 44px;
    width: 44px;
  }
  .hud-item[data-field="airspeed"] {
    width: 40px;
    flex: 0 0 40px;
  }
  .hud-item[data-field="altitude"] {
    width: 40px;
    flex: 0 0 40px;
  }
  .hud-item[data-field="brakes"] {
    width: 32px;
    flex: 0 0 32px;
  }
  .hud-item[data-field="pitch"] {
    width: 29px;
    flex: 0 0 29px;
  }
  .hud-item[data-field="bank"] {
    width: 29px;
    flex: 0 0 29px;
  }
  .telemetry-hud .hud-papi-item {
    width: 43px;
    flex: 0 0 43px;
    min-width: 0;
    padding: 0 1px;
  }
  .hud-papi-dots {
    gap: 2px;
  }
  .papi-dot {
    width: 5.5px;
    height: 5.5px;
  }
  .telemetry-hud .hud-ap-item {
    min-width: 0;
    width: auto;
    padding: 0 1px;
  }
  .telemetry-hud .hud-ap-pill-group {
    gap: 1.5px;
  }
  .telemetry-hud .hud-ap-pill {
    padding: 1.5px 2.5px;
    font-size: 7.5px;
  }
  .hud-label {
    font-size: 6.8px;
    letter-spacing: 0.2px;
  }
  .hud-val {
    font-size: 10.5px;
  }
}

@media (max-width: 680px) {
  .header-middle-controls {
    order: 3;
    width: 100%;
    margin-top: 4px;
    flex-direction: row;
    /* Safety net, not the primary layout: mode-switcher + window-controls together (~570px) don't
       fit a phone-width row (~336px) even shrunk, so wrap lets window-controls spill to its own
       line on the narrowest phones instead of clipping off the right edge. */
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 4px;
  }
  .mode-tab-btn {
    padding: 0 4px;
    font-size: 10px;
  }
  /* Icon-only on phones — "Plane Selection" / "Runway View" / "In Flight" no longer fit as text
     next to the camera/AP/tilt/settings buttons on the right; aria-label keeps the accessible name. */
  .mode-tab-btn span {
    display: none;
  }
  .window-controls {
    gap: 4px;
  }
  .camera-selector-strip {
    gap: 2px;
    padding: 2px;
  }
  .cam-btn {
    padding: 0 5px;
    font-size: 9.5px;
  }
  .window-controls .ctrl-icon-btn {
    width: 30px;
    height: 30px;
  }
  .top-header .app-nav-container {
    order: 2;
    margin-left: auto;
  }
  .bottom-controls-bar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100vw - 16px);
    padding: 0;
  }
  .flight-controls-overlay.hidden ~ .bottom-controls-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: 100%;
    gap: 0;
  }
}

/* Mobile Plane Selector: one info card up top, pulled up snug under the header; paddle buttons
   pinned to the screen edges instead of flanking the (now hidden) scrolling carousel track.
   Triggers on short/landscape phone viewports too (max-height), not just narrow/portrait ones
   (max-width) — a landscape phone can be 800px+ wide but only ~360-430px tall, and width alone
   never catches that case. */
@media (max-width: 680px), (max-height: 480px) {
  .plane-carousel-container {
    /* Gutter for the absolutely positioned paddles (inset 0.4rem + 26px wide + 6px gap), so the
       card sits between them instead of underneath. */
    --carousel-paddle-gutter: calc(0.4rem + 26px + 6px);
    margin-top: 2px;
    padding: 3px calc(var(--carousel-paddle-gutter) + env(safe-area-inset-right, 0px)) 6px
      calc(var(--carousel-paddle-gutter) + env(safe-area-inset-left, 0px));
  }
  .plane-carousel-track {
    justify-content: center;
    padding: 0 4px;
  }
  .plane-carousel-track .plane-card-btn:not(.active) {
    display: none;
  }
  .plane-card-btn {
    flex: 1 1 auto;
    width: 100%;
    max-width: 320px;
  }
  .carousel-pagination {
    display: none;
  }
  /* Not position:fixed: .plane-carousel-container is a .ui-panel, and backdrop-filter makes an
     element its own containing block — a fixed descendant would size against the panel, not the
     viewport. It's already position:relative and spans the full screen width, so absolute against
     it reaches the same screen edges. */
  .carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 56px;
    z-index: 3;
    margin: 0;
  }
  .plane-filter-bar {
    gap: 3px;
    padding: 0 0 4px;
  }
  .filter-dimension-row {
    gap: 4px;
    padding-bottom: 1px;
  }
  .filter-dim-label {
    font-size: 7.5px;
    width: 28px;
    letter-spacing: 0.5px;
  }
  .filter-chip {
    height: 20px;
    padding: 0 6px;
    font-size: 8.5px;
    gap: 4px;
  }
  .filter-chip .chip-count,
  .filter-chip .tab-count {
    font-size: 7.5px;
    height: 12px;
    min-width: 12px;
    padding: 0 2px;
  }
  .filter-reset-btn {
    height: 20px;
    padding: 0 5px;
    font-size: 8px;
  }
  .carousel-nav-btn.prev {
    left: calc(0.4rem + env(safe-area-inset-left, 0px));
  }
  .carousel-nav-btn.next {
    right: calc(0.4rem + env(safe-area-inset-right, 0px));
  }
}

@media (max-height: 480px) {
  .plane-filter-bar {
    gap: 2px;
    padding: 0 0 2px;
  }
  .filter-dimension-row {
    gap: 3px;
  }
  .filter-chip {
    height: 18px;
    padding: 0 5px;
    font-size: 8px;
    gap: 3px;
  }
  .filter-dim-label {
    font-size: 7px;
    width: 24px;
  }
}

/* Portrait phones (T159): the expanded header's first row is the logo + "SimPlane vX" title beside
   #top-right-actions, and the title (~200px) plus the five-button bar (--top-right-actions-w plus
   its inset) need ~442px, so on a 390px phone the version badge sat under the stick and HUD
   buttons. The version is the expendable part. */
@media (max-width: 460px) {
  .top-header .header-title .badge-tag {
    display: none;
  }
}

/* Landscape phones only (short-height AND wide enough): dock the single-card carousel into the
   same top row as the logo button and the icon cluster instead of a row of its own below — that
   row is otherwise almost empty, and there's plenty of vertical room to give back on a short
   viewport. 44px/--top-right-actions-w match the fixed size of those two elements at this breakpoint (measured,
   not guessed); the offsets mirror how #top-right-actions itself is inset from the edge, so this
   tracks it if that ever changes. Gated on width too: a portrait phone also matches max-height
   above (it's short there too), and only has ~140px between logo and icon cluster — the card
   doesn't fit legibly. min-width: 560px is comfortably above any portrait phone width (~430px
   max) and comfortably below the ~568px+ that real landscape phones give the strip between them.
   Only while collapsed: expanded, the header is two rows tall and this would overlap the second. */
@media (max-width: 680px) and (min-width: 560px), (max-height: 480px) and (min-width: 560px) {
  .top-header:not(.menu-expanded) ~ .plane-carousel-container {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px) + 44px + 8px);
    right: calc(1rem + env(safe-area-inset-right, 0px) + var(--top-right-actions-w) + 8px);
    width: auto;
    margin-top: 0;
    z-index: 96;
  }
}

/* ─── Pixelated Retro Crash Glitch & Banner Overlay ─────────────────── */
.crash-hud-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent !important;
}

.crash-pixel-canvas {
  display: none !important;
}

.crash-scanlines {
  display: none !important;
}

.crash-banner-card {
  position: relative;
  z-index: 10;
  background: rgba(14, 5, 8, 0.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #ff1744;
  border-radius: 0 !important;
  box-shadow: 0 0 32px rgba(255, 23, 68, 0.45), inset 0 0 16px rgba(255, 23, 68, 0.2);
  padding: 24px 36px;
  text-align: center;
  max-width: 90vw;
  width: 480px;
}

.crash-banner-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.crash-alert-icon {
  color: #ff1744;
  filter: drop-shadow(0 0 8px #ff1744);
}

.crash-title {
  font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', monospace;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow: 0 0 12px #ff1744, 0 0 24px #ff1744;
}

.crash-reason {
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ff5252;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.crash-sub-reason {
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #b0bec5;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.crash-reset-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 23, 68, 0.2);
  border: 1px solid rgba(255, 23, 68, 0.5);
  border-radius: 0 !important;
  margin-bottom: 8px;
  overflow: hidden;
}

.crash-reset-bar {
  height: 100%;
  width: 0%;
  background: #ff1744;
  box-shadow: 0 0 10px #ff1744;
  border-radius: 0 !important;
  transition: width 0.05s linear;
}

.crash-reset-label {
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #ff8a80;
  text-transform: uppercase;
  font-weight: 600;
}

/* ─── Rotate-to-Landscape Prompt ──────────────────────────────────────
   Visibility is entirely CSS-driven off (orientation: portrait) combined with the same
   touch/narrow-viewport test isMobileViewport() and the actions-row/legend hide use elsewhere
   (see the comment above isMobileViewport() in flight-app.js) — so "mobile" means the same
   thing here as everywhere else it's asked. JS only ever toggles .dismissed. */
.rotate-device-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(5, 8, 17, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  padding: 24px;
}

@media (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .rotate-device-overlay {
    display: flex;
  }
}

.rotate-device-overlay.dismissed {
  display: none !important;
}

.rotate-device-icon {
  color: var(--cyan-accent);
  filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.5));
  animation: rotate-device-spin 1.8s ease-in-out infinite;
}

@keyframes rotate-device-spin {
  0%, 20% { transform: rotate(0deg); }
  50%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

.rotate-device-title {
  font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-bright);
  text-transform: uppercase;
}

.rotate-device-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dim);
}

.rotate-device-dismiss {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* ─── Autopilot & PAPI HUD Controls & Annunciator Bars ──────────────── */
.hud-papi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-sizing: border-box;
  width: auto;
  min-width: 68px;
  flex: 0 0 auto;
  padding: 0 4px;
}

.hud-ap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-sizing: border-box;
  width: auto;
  min-width: 140px;
  flex: 0 0 auto;
  padding: 0 4px;
}

.hud-ap-pill-group {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.hud-ap-pill {
  background: rgba(14, 25, 45, 0.85);
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.1;
  user-select: none;
}

.hud-ap-pill:hover {
  border-color: var(--cyan-accent);
  color: #fff;
}

.hud-ap-pill.active {
  background: rgba(0, 210, 255, 0.25);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
}

.hud-ap-pill#hud-btn-ap-master.active {
  background: rgba(0, 230, 118, 0.25);
  border-color: #00e676;
  color: #00e676;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}

#btn-ap.active,
#btn-ap-toggle.active,
#legend-btn-ap.active {
  background: rgba(0, 230, 118, 0.22) !important;
  border-color: #00e676 !important;
  color: #00e676 !important;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.45) !important;
}

#btn-ap.active svg,
#btn-ap-toggle.active svg,
#legend-btn-ap.active svg {
  stroke: #00e676 !important;
  filter: drop-shadow(0 0 4px rgba(0, 230, 118, 0.7));
}

#btn-ap.active .btn-key-badge {
  background: rgba(0, 230, 118, 0.3) !important;
  border-color: #00e676 !important;
  color: #00e676 !important;
}

/* ─── Flight Director Overlay ─────────────────────────────────────── */
.flight-director-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 80;
}

.fd-bar {
  position: absolute;
  background: rgba(0, 229, 255, 0.85);
  box-shadow: 0 0 8px #00e5ff;
  border-radius: 0 !important;
  transition: transform 0.06s ease-out;
}

.fd-bar.fd-pitch {
  width: 140px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fd-bar.fd-roll {
  width: 2px;
  height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fd-aircraft-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
  border-radius: 0 !important;
}

/* ─── ILS Glideslope & Localizer Needles ──────────────────────────── */
.ils-needle {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  transition: transform 0.08s ease-out;
  border-radius: 0 !important;
}

.ils-needle.ils-loc {
  width: 2px;
  height: 120px;
  left: 50%;
  top: 50%;
  background: #d500f9;
  box-shadow: 0 0 6px rgba(213, 0, 249, 0.75);
  transform: translate(-50%, -50%);
}

.ils-needle.ils-gs {
  width: 120px;
  height: 2px;
  left: 50%;
  top: 50%;
  background: #d500f9;
  box-shadow: 0 0 6px rgba(213, 0, 249, 0.75);
  transform: translate(-50%, -50%);
}

/* ─── HUD PAPI 4-Light Array Indicator ────────────────────────────── */
.hud-papi-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.papi-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.papi-dot.papi-w {
  background-color: #ffffff;
  box-shadow: 0 0 6px #ffffff;
  border-color: #ffffff;
}

.papi-dot.papi-r {
  background-color: #ff1744;
  box-shadow: 0 0 6px #ff1744;
  border-color: #ff1744;
}

/* ─── Flight Cue & Takeoff Annunciator Banner ─────────────────────── */
.flight-cue-banner {
  position: fixed;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(10, 14, 20, 0.88);
  border: 1.5px solid #00e5ff;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
  z-index: 120;
  pointer-events: none;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flight-cue-banner.warning {
  border-color: #ffea00;
  box-shadow: 0 0 16px rgba(255, 234, 0, 0.55);
}

.flight-cue-banner.danger {
  border-color: #ff1744;
  box-shadow: 0 0 20px rgba(255, 23, 68, 0.7);
  animation: pulse-danger 0.4s infinite alternate;
}

@keyframes pulse-danger {
  0% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(1.04); }
}

.flight-cue-text {
  font-family: 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #00e5ff;
  text-transform: uppercase;
}

.flight-cue-banner.warning .flight-cue-text {
  color: #ffea00;
}

.flight-cue-banner.danger .flight-cue-text {
  color: #ff1744;
}

.action-btn.active-reverser {
  background: rgba(255, 23, 68, 0.28) !important;
  border-color: #ff1744 !important;
  color: #ff1744 !important;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.6) !important;
}

/* ─── Flight Controls & Sensitivity Settings Modal ─────────────────── */
.flight-settings-panel {
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.settings-content-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-content-grid[hidden] {
  display: none;
}

/* Tabs (T68): Flight Controls & Sensitivity | Sky & Terrain */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--panel-border);
}

.settings-tab-btn {
  flex: 1 1 auto;   /* sized by label: the long first tab stays on one line where there is room */
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.settings-tab-btn:hover {
  color: var(--text-main);
}

.settings-tab-btn.active {
  color: var(--text-bright);
  border-bottom-color: var(--cyan-accent);
}

/* Season and Time pickers inside the Terrain tab (terrain-season.js / terrain-time.js) */
.season-panel select,
.time-panel select {
  background: rgba(5, 10, 20, 0.9);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: 6px 8px;
}
.season-panel > select { width: 100%; }
.season-panel input[type="range"],
.time-panel input[type="range"] {
  width: 100%;
  accent-color: var(--cyan-accent);
}
.season-panel .season-dev-readout,
.time-panel .season-dev-readout {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--cyan-accent);
}
.time-panel .time-dev-row {
  display: flex;
  gap: 6px;
}
.time-panel .time-dev-row select { flex: 1 1 auto; min-width: 0; }
.time-panel .time-dev-row #time-dev-speed { flex: 0 0 76px; }
.time-panel .time-dev-row button {
  flex: 0 0 34px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  cursor: pointer;
}
.time-panel .time-dev-row button:hover { color: var(--text-bright); border-color: var(--text-dim); }
.time-panel select:disabled { opacity: 0.5; }

.settings-shared-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(10, 18, 32, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 !important;
}

.setting-item.setting-toggle-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setting-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-name {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.setting-val-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-accent);
}

.setting-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0;
}

.setting-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  border-radius: 0 !important;
  margin-top: 4px;
}

.setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--cyan-accent);
  border: 1px solid #ffffff;
  border-radius: 0 !important;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}

.setting-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--cyan-accent);
  border: 1px solid #ffffff;
  border-radius: 0 !important;
  cursor: pointer;
}

.setting-toggle-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-btn {
  background: rgba(20, 35, 60, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 0 !important;
  color: var(--text-bright);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.4px;
}

.setting-btn:hover {
  border-color: var(--cyan-accent);
  background: rgba(0, 210, 255, 0.15);
}

.setting-btn.primary {
  background: var(--cyan-accent);
  border-color: var(--cyan-accent);
  color: #040a14;
}

.setting-btn.primary:hover {
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
}

.setting-btn.danger {
  border-color: rgba(255, 23, 68, 0.4);
  color: #ff5252;
}

.setting-btn.danger:hover {
  background: rgba(255, 23, 68, 0.15);
  border-color: #ff1744;
}

.setting-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 !important;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 54px;
  text-align: center;
}

.setting-toggle-btn.active {
  background: rgba(0, 230, 118, 0.2);
  border-color: #00e676;
  color: #00e676;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.settings-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
  margin-top: 4px;
}



/* ─── Season picker (development hosts only; terrain-season.js mounts it) ───── */
.season-dev-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  width: 216px;
  padding: 8px 10px 9px;
  background: rgba(10, 16, 28, 0.86);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 11px;
  pointer-events: auto;
}
.season-dev-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.season-dev-title span {
  color: var(--amber-warn);
  font-weight: 600;
}
.season-dev-panel select,
.season-dev-panel input[type="range"] {
  width: 100%;
  margin: 0 0 6px;
  background: var(--panel-bg-solid);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  font-size: 11px;
}
.season-dev-panel select { padding: 3px 4px; }
.season-dev-readout {
  color: var(--text-dim);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
/* Time of day (T19; terrain-time.js adds it to the season panel): preset, speed and restart on one row. */
.time-dev-section {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--panel-border);
}
.time-dev-row {
  display: flex;
  gap: 4px;
}
.season-dev-panel .time-dev-row select { flex: 1 1 auto; width: auto; min-width: 0; }
.season-dev-panel .time-dev-row #time-dev-speed { flex: 0 0 58px; }
.time-dev-row button {
  flex: 0 0 26px;
  height: 22px;
  margin: 0 0 6px;
  padding: 0;
  background: var(--panel-bg-solid);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.time-dev-row button:hover { color: var(--text-bright); border-color: var(--text-dim); }
.season-dev-panel select:disabled { opacity: 0.5; }

/* World-position readout, made a permanent feature 2026-09-22 (was dev-hosts-only). No panel or
   label per Casey: plain text floating in the sky, right-aligned under the upper-right action bar
   (.top-right-actions: top 2rem + its own 44px height, plus the header's 12px gutter convention —
   see the comment near .top-header.menu-expanded above). Text colour is day/night aware (Casey,
   2026-09-22): a dark blue reads against the bright day sky on its own, no shadow needed (dropped
   — Casey, same day: "shadow/glow isn't helping readability in daytime"). .night-mode (toggled by
   environment.js's applyLight once the lamps are on (T19: at sunset, by the clock)) restores the
   original look entirely unchanged — --text-dim plus the glow that made it legible over a dark
   night sky. */
/* Dev-only pause banner (Casey, 2026-09-24): "a hotkey I can use to pause the flight entirely to
   look at an area and/or screenshot" — Space, dev hosts only. Centred top, out of the way of the
   flight HUD bar and the pos-readout in the opposite corner. */
.sim-paused-banner {
  position: fixed;
  top: calc(2rem + 44px + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

/* Sector arrival hold banner (?at= start hold, Casey 2026-09-28): positioned below the
   pause banner so they do not overlap when arriving while paused (Casey, 2026-09-29). */
#sim-arrival-banner {
  top: calc(2rem + 44px + 46px);
}

.pos-readout {
  position: fixed;
  top: calc(2rem + 44px + 12px);
  right: calc(2rem + 56px);
  z-index: 60;
  text-align: right;
  color: #0a1a38;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Click to copy (flight-app.js). Only the text's own box takes the click. */
  pointer-events: auto;
  cursor: copy;
  user-select: none;
}

.pos-readout.copied::after {
  /* Below the coordinates, out of the text's flow (Casey, 2026-09-28): inline, it widened the right-aligned
     line and pushed the numbers left. */
  content: '✓ copied';
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 3px;
  white-space: nowrap;
}

body.night-mode .pos-readout {
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Plane Selection is a studio turntable, not a place in the world — no coordinates to show. */
body.mode-showcase .pos-readout {
  display: none;
}

@media (max-width: 860px) {
  .pos-readout {
    /* Mirrors .top-right-actions' own mobile top/right (1rem + safe-area-inset) above, so the
       readout keeps tracking directly under the bar rather than drifting once it moves. */
    top: calc(1rem + env(safe-area-inset-top, 0px) + 44px + 8px);
    right: calc(1rem + env(safe-area-inset-right, 0px) + 68px);
  }
}

/* Location controls: coordinates, then compass icon (Go to coordinates, J), then map icon (Sim view) all on one line */
.sim-goto-btn, .sim-map-btn {
  position: fixed;
  top: calc(2rem + 44px + 7px);
  right: calc(2rem - 3px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: #0a1a38;
  cursor: pointer;
  opacity: 0.8;
}
.sim-goto-btn:hover, .sim-goto-btn:focus-visible, .sim-map-btn:hover, .sim-map-btn:focus-visible { opacity: 1; }
body.night-mode .sim-goto-btn, body.night-mode .sim-map-btn { color: var(--text-dim); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); }
body.mode-showcase .sim-goto-btn, body.mode-showcase .sim-map-btn { display: none; }
/* The compass button sits between the coordinates and the map button. */
.sim-goto-btn { right: calc(2rem + 25px); }
.sim-goto {
  position: fixed;
  top: calc(2rem + 44px + 36px);
  right: 2rem;
  z-index: 61;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 0.6rem;
  /* Blue glass like the header bar, thinner so the sky shows through. 0.75 keeps the hint ~4.5:1
     even over white cloud (the blur averages whatever is behind). */
  background: rgba(6, 18, 40, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 87, 183, 0.25);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 12px;
}
.sim-goto.visible { display: flex; }
.sim-goto input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  background: rgba(64, 130, 240, 0.12);
  border: 1px solid rgba(90, 160, 255, 0.3);
  border-radius: 0;
  outline: none;
  color: var(--text-bright);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sim-goto input::placeholder { color: rgba(139, 160, 196, 0.6); }
/* The cyan border replaces the browser's focus ring. */
.sim-goto input:focus { border-color: rgba(0, 210, 255, 0.7); background-color: rgba(64, 130, 240, 0.18); }
.sim-goto .sim-goto-hint { color: #b4c4e2; line-height: 1.4; }
.sim-goto.invalid input { border-color: rgba(255, 138, 128, 0.7); }
.sim-goto.invalid .sim-goto-hint { color: #ff8a80; }

@media (max-width: 860px) {
  .sim-goto-btn, .sim-map-btn {
    /* A touch-friendly target on touch screens, the glyph unchanged. */
    top: calc(1rem + env(safe-area-inset-top, 0px) + 44px + 2px);
    right: calc(1rem + env(safe-area-inset-right, 0px) - 4px);
    width: 32px;
    height: 32px;
  }
  .sim-goto-btn { right: calc(1rem + env(safe-area-inset-right, 0px) - 4px + 34px); }
  .pos-readout.copied::after { right: 0; }
  .sim-goto {
    top: calc(1rem + env(safe-area-inset-top, 0px) + 44px + 40px);
    right: calc(1rem + env(safe-area-inset-right, 0px));
  }
}