:root {
  --primary:   #00e5ff;
  --warning:   #ffb356;
  --danger:    #ff5a7a;
  --success:   #51f0b0;
  --dark:      #05080f;
  --panel-bg:  rgba(6, 10, 20, 0.8);
  --border:    rgba(109, 221, 255, 0.28);
  --font-main: 'Rajdhani', sans-serif;
  --font-display: 'Orbitron', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(255, 179, 86, 0.08), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(59, 186, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #08111d 0%, #04070d 100%);
  font-family: var(--font-main);
  color: #e0f7fa;
  user-select: none;
}

/* ===================== CANVAS ===================== */
#gameCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none;
  z-index: 1;
}

/* ===================== SCREENS ===================== */

/* ── Loading Screen ── */
#loadingScreen {
  background: linear-gradient(180deg, #08111d 0%, #04070d 100%);
  z-index: 250;
  flex-direction: column;
}
.loading-panel {
  text-align: center;
  width: min(420px, 90vw);
}
.loading-panel .game-title {
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
}
.loading-status {
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: rgba(224, 247, 250, 0.7);
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}
.loading-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.loading-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #51f0b0);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.loading-percent {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary);
  margin-top: 0.6rem;
  letter-spacing: 2px;
}
.screen {
  position: fixed;
  top: 48px;
  left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  z-index: 100;
  padding: 24px 0;
}
.screen.active { display: flex; }
.hidden-overlay { display: none; }
.hidden-overlay.visible {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

/* ===================== MAIN MENU ===================== */
#mainMenu {
  flex-direction: column;
  background: radial-gradient(ellipse at center, #0a1628 0%, #020810 100%);
}

.menu-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,229,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(213,0,249,0.05) 0%, transparent 50%);
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.menu-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.8vh, 16px);
  width: min(560px, 94vw);
  max-height: calc(100vh - 110px);
  justify-content: center;
  padding: clamp(10px, 2vh, 20px) 0;
}

.game-title {
  font-size: clamp(2.4rem, 9vh, 5.6rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 0 40px var(--primary), 0 0 80px rgba(0,229,255,0.3);
  line-height: 1;
  margin: 0;
}
.game-title span {
  color: var(--primary);
  text-shadow: 0 0 30px var(--primary), 0 0 60px var(--primary);
}

.game-subtitle {
  font-size: clamp(0.8rem, 1.8vh, 1.2rem);
  letter-spacing: 0.4em;
  color: var(--warning);
  text-shadow: 0 0 20px var(--warning);
  text-transform: uppercase;
  margin: 0;
}

.menu-desc {
  font-size: clamp(0.8rem, 1.55vh, 0.96rem);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  margin: 0;
}

#mainMenu .btn-primary,
#mainMenu .btn-test,
#mainMenu .btn-secondary {
  min-width: 200px;
}

#mainMenu .btn-primary,
#mainMenu .btn-test {
  padding: 10px 24px;
  font-size: 0.92rem;
}

#mainMenu .btn-secondary {
  padding: 8px 18px;
  font-size: 0.8rem;
}

.region-quickselect {
  margin-top: 2px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.region-quickselect .btn-secondary {
  min-width: 96px;
  padding: 7px 12px;
}

/* ===================== BUTTONS ===================== */
.btn-primary, .btn-secondary {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.15s ease;
  outline: none;
  min-width: 220px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #0098a8);
  color: #000;
  padding: 14px 32px;
  font-size: 1.05rem;
  box-shadow: 0 0 24px rgba(0,229,255,0.5);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #40ffff, var(--primary));
  box-shadow: 0 0 40px rgba(0,229,255,0.8);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  padding: 12px 28px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: rgba(0,229,255,0.1);
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(0,229,255,0.3);
}

/* ===================== GRAPHICS QUALITY SELECTOR ===================== */
.gfx-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.gfx-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.gfx-toggle {
  display: flex;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.gfx-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  padding: 6px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.gfx-btn:hover {
  color: var(--primary);
  background: rgba(0,229,255,0.08);
}
.gfx-btn.active {
  background: rgba(0,229,255,0.18);
  color: var(--primary);
  box-shadow: inset 0 0 10px rgba(0,229,255,0.15);
}
.gfx-hint {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
}

@media (max-height: 760px) {
  .menu-content {
    gap: 8px;
    max-height: calc(100vh - 96px);
  }

  .game-title {
    font-size: clamp(2rem, 8vh, 4.6rem);
    letter-spacing: 0.14em;
  }

  .game-subtitle {
    letter-spacing: 0.3em;
  }

  #mainMenu .btn-primary,
  #mainMenu .btn-test {
    padding: 8px 18px;
    min-width: 188px;
    font-size: 0.85rem;
  }

  #mainMenu .btn-secondary {
    min-width: 140px;
    padding: 7px 12px;
    font-size: 0.76rem;
  }

  .region-quickselect .btn-secondary {
    min-width: 86px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
}

/* ===================== PANEL ===================== */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px 48px;
  max-width: 680px;
  width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  box-shadow: 0 0 60px rgba(0,229,255,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}

.panel h2 {
  font-size: 1.8rem;
  letter-spacing: 0.25em;
  color: var(--primary);
  text-shadow: 0 0 20px var(--primary);
}
.panel h3 {
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--warning);
  margin-top: 8px;
}

/* ===================== CONTROLS GRID ===================== */
.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}
.ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 4px;
  background: rgba(0,229,255,0.04);
}
.ctrl kbd {
  background: rgba(0,229,255,0.15);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--primary);
  font-weight: 700;
}
.ctrl span { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* ===================== REGION LIST ===================== */
.region-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.region-list li {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 10px;
}
.region-tag {
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.region-tag.dino  { background: #1b5e20; color: #a5d6a7; }
.region-tag.ape   { background: #4e342e; color: #ffccbc; }
.region-tag.demon { background: #4a148c; color: #ce93d8; }
.region-tag.mech  { background: #1a237e; color: #90caf9; }
.region-tag.void  { background: #212121; color: #e040fb; }

/* ===================== TEST MODE ===================== */
.btn-test {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.15s ease;
  outline: none;
  min-width: 220px;
  background: linear-gradient(135deg, #ff6f00, #b84000);
  color: #fff;
  padding: 13px 32px;
  font-size: 1rem;
  box-shadow: 0 0 22px rgba(255,111,0,0.45);
}
.btn-test:hover {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  box-shadow: 0 0 36px rgba(255,150,0,0.7);
  transform: translateY(-2px);
}

#testMode {
  background: radial-gradient(ellipse at center, #0a1220 0%, #020810 100%);
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 30px 16px 40px;
}

.test-panel {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.test-header { text-align: center; }
.test-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #ff9800;
  text-shadow: 0 0 28px #ff9800;
  letter-spacing: 0.25em;
  font-weight: 900;
}
.test-sub {
  color: rgba(255,255,255,0.45);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  width: 100%;
}

.test-card {
  background: rgba(10,18,32,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 22px 20px 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #e0f7fa;
  font-family: var(--font-main);
  outline: none;
  position: relative;
  overflow: hidden;
}
.test-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.test-card:hover {
  border-color: #ff9800;
  box-shadow: 0 0 28px rgba(255,152,0,0.35), inset 0 0 18px rgba(255,152,0,0.06);
  transform: translateY(-4px) scale(1.015);
}
.test-card:active { transform: translateY(0) scale(1); }

.tc-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: rgba(255,152,0,0.25);
  line-height: 1;
  letter-spacing: 0.06em;
  position: absolute;
  top: 14px;
  right: 18px;
}

.tc-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 36px;
}

.tc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65);
}
.tag.t-swamp      { background: #1b3a12; color: #88c860; }
.tag.t-jungle     { background: #0d2e14; color: #57e05a; }
.tag.t-hell       { background: #2e0808; color: #ff5a40; }
.tag.t-mech       { background: #0a1530; color: #5aacff; }
.tag.t-void       { background: #0e0018; color: #cc40ff; }

.tc-enemies {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.tc-badge {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: flex-start;
}
.tc-badge.boss {
  background: rgba(255, 60, 0, 0.18);
  border: 1px solid rgba(255,60,0,0.4);
  color: #ff6040;
}

.tm-back {
  min-width: 160px;
  margin-top: 8px;
}

/* ===================== HUD ===================== */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: var(--font-display);
}
#hud.hidden { display: none; }

.hud-vignette,
.hud-noise,
.hud-horizon {
  position: absolute;
  inset: 0;
}

.hud-vignette {
  background:
    radial-gradient(circle at center, transparent 48%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(5, 10, 16, 0.62) 0%, transparent 15%, transparent 82%, rgba(5, 10, 16, 0.82) 100%);
}

.hud-noise {
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.45) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.35) 0 0.5px, transparent 0.8px);
  background-size: 12px 12px, 16px 16px;
  mix-blend-mode: screen;
}

.hud-horizon {
  top: 50%;
  bottom: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(50, 220, 255, 0.2), transparent);
  box-shadow: 0 0 18px rgba(50, 220, 255, 0.18);
}

/* Top bar */
.hud-top {
  position: absolute;
  top: 18px; left: 22px; right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.84) 0%, rgba(8, 13, 24, 0.42) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 35px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
}
.hud-region {
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--warning);
  text-shadow: 0 0 12px rgba(255, 210, 74, 0.5);
  text-transform: uppercase;
}
.hud-score {
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  color: #f4f6fb;
  text-shadow: 0 0 20px rgba(255,255,255,0.24);
}
.hud-wave {
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(50, 220, 255, 0.45);
}

.hud-audio-controls {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(0, 10, 20, 0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.hud-audio-btn {
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(0, 229, 255, 0.08);
  color: #8ff4ff;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-main);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hud-audio-btn:hover {
  background: rgba(0, 229, 255, 0.16);
  border-color: rgba(0, 229, 255, 0.6);
}

.hud-audio-btn.muted {
  color: #ffd557;
  border-color: rgba(255, 213, 87, 0.45);
  background: rgba(255, 213, 87, 0.12);
}

.hud-volume-slider {
  width: 92px;
  accent-color: #1ce5ff;
  cursor: pointer;
}

.hud-volume-value {
  min-width: 38px;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: rgba(244, 246, 251, 0.82);
  text-align: right;
}

.hud-fs-btn {
  pointer-events: auto;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(0, 10, 20, 0.5);
  color: #8ff4ff;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-main);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hud-fs-btn:hover {
  background: rgba(0, 229, 255, 0.16);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.28);
}

/* Vitals */
.hud-vitals {
  position: absolute;
  bottom: 118px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  min-width: 264px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.82), rgba(8, 12, 22, 0.4));
  box-shadow: 0 18px 35px rgba(0,0,0,0.22);
  backdrop-filter: blur(12px);
}
.hud-bar-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: rgba(221,232,255,0.58);
  width: 54px;
}
.hud-bar-track {
  width: 154px;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.38);
}
.hud-bar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transition: width 0.22s ease, box-shadow 0.22s ease;
}
.hud-bar.hull   { background: linear-gradient(90deg, #4ff2b8, #13b989); box-shadow: 0 0 12px rgba(81, 240, 176, 0.45); }
.hud-bar.shield { background: linear-gradient(90deg, #70edff, #19afd5); box-shadow: 0 0 12px rgba(50, 220, 255, 0.45); }
.hud-bar.fuel   { background: linear-gradient(90deg, #ffd557, #ff9c3c); box-shadow: 0 0 12px rgba(255, 210, 74, 0.4); }
.hud-val {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  width: 32px;
  text-align: right;
}

/* Weapons */
.hud-weapons {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
}
.weapon-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 20px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.78), rgba(8, 13, 24, 0.42));
  min-width: 82px;
  transition: all 0.22s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
}
.weapon-slot.active {
  border-color: var(--primary);
  box-shadow: 0 0 22px rgba(50, 220, 255, 0.28), inset 0 0 28px rgba(50, 220, 255, 0.08);
  background: linear-gradient(180deg, rgba(11, 26, 38, 0.9), rgba(8, 15, 24, 0.56));
}
.w-icon { font-size: 1.08rem; color: var(--primary); text-shadow: 0 0 14px rgba(50, 220, 255, 0.45); }
.w-name { font-size: 0.58rem; letter-spacing: 0.22em; color: rgba(228,236,255,0.46); }
.w-ammo { font-size: 1.12rem; color: #fff; font-weight: 700; }

/* Instruments */
.hud-instruments {
  position: absolute;
  bottom: 118px;
  right: 172px;
  display: flex;
  gap: 14px;
}
.instrument {
  text-align: center;
  padding: 14px 18px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.82), rgba(8, 13, 24, 0.44));
  min-width: 88px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.22);
  backdrop-filter: blur(12px);
}
.inst-label { font-size: 0.58rem; letter-spacing: 0.28em; color: rgba(227,235,255,0.36); }
.inst-val   { font-size: 1.7rem; color: var(--primary); font-weight: 700; text-shadow: 0 0 20px rgba(50,220,255,0.25); }
.inst-unit  { font-size: 0.52rem; color: rgba(255,255,255,0.34); letter-spacing: 0.14em; }

/* Radar */
.radar {
  position: absolute;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#radarCanvas {
  border-radius: 50%;
  border: 1.5px solid rgba(50,220,255,0.45);
  background: radial-gradient(circle, rgba(4, 24, 34, 0.88), rgba(3, 10, 14, 0.94));
  box-shadow: 0 0 28px rgba(50,220,255,0.16), inset 0 0 46px rgba(50,220,255,0.08);
}
.radar-label { font-size: 0.56rem; letter-spacing: 0.28em; color: rgba(100,229,255,0.54); }

/* Crosshair */
.crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  filter: drop-shadow(0 0 14px rgba(50,220,255,0.7));
  z-index: 10; /* above cockpit overlay (z-index:2) so always visible */
}

/* ── Enemy health bars ───────────────────────────────────── */
.enemy-hp-bar {
  position: absolute;
  width: 36px;
  height: 3px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 60, 40, 0.55);
  border-radius: 1px;
  transform: translateX(-50%);
  display: none;
  box-shadow: none;
}
.enemy-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff2000 0%, #ff7700 60%, #ffcc00 100%);
  border-radius: 1px;
  transition: width 0.08s linear;
}

/* ===================== COCKPIT OVERLAY ===================== */
.cockpit-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden; /* clip zoomed PNG to viewport */
}
.cockpit-overlay.hidden { display: none; }


/* ── Positioned MFD screens (pinned over PNG screen cutouts) ── */
/* Adjust top/left/width/%s to align with your cockpit PNG       */
.ck-screen {
  position: absolute;
  z-index: 2; /* above the PNG img (z-index:1) */
  overflow: hidden;
}
/* Positions calibrated for 165%/165% zoom with -32%/22% offset + bottom clip */
.ck-screen-left   { top: 72%; left: 27%;   width: 15%; height: 22%; }
.ck-screen-center { top: 72%; left: 47%;   width: 13%; height: 22%; }
.ck-screen-right  { top: 72%; left: 65%;   width: 15%; height: 22%; }
.ck-screen .cockpit-mfd,
.ck-screen .cockpit-lcd { width: 100%; height: 100%; aspect-ratio: unset; }

/* ── MFD (Multi-Function Display) ────────────────────────── */
.cockpit-mfd {
  position: relative;
  width: 100%; height: 100%;
  /* no border/bg — the real PNG bezel surrounds this */
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Hide the fake HTML bezel buttons — PNG already has them */
.mfd-bezel-btns { display: none; }
.mfd-type-label { display: none; }

/* ── PFD: Primary Flight Display ─────────────────────────── */
.pfd-screen {
  flex: 1;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background: #020810; /* deep military dark */
}
.pfd-horizon-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* pfd-world is rotated (roll) and translated Y (pitch) by JS */
.pfd-world {
  position: absolute;
  width: 280%; height: 280%;
  top: -90%; left: -90%;
}
.pfd-sky {
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, #021224 0%, #062850 45%, #0b4080 100%);
}
.pfd-ground {
  position: absolute;
  top: 50%; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #2e1204 0%, #1a0902 55%, #0c0501 100%);
}
.pfd-h-line {
  position: absolute;
  top: calc(50% - 1px);
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #ffffff 15%, #ffffff 85%, transparent);
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
/* Pitch-ladder marks (static on pfd-world so they tilt with horizon) */
.pfd-world::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30%; height: 1px;
  transform: translate(-50%, -600%);
  background: rgba(255,255,255,0.5);
  box-shadow: 0 calc(280% * 0.0714) 0 rgba(255,255,255,0.35),
              0 calc(-280% * 0.0714) 0 rgba(255,255,255,0.35),
              0 calc(280% * 0.143) 0 rgba(255,255,255,0.25),
              0 calc(-280% * 0.143) 0 rgba(255,255,255,0.25);
}
/* Fixed aircraft reference — does NOT rotate with horizon */
.pfd-aircraft-sym {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: #ffcc00;
  text-shadow: 0 0 3px #000, 0 0 10px rgba(255,200,0,0.8);
  z-index: 4;
  white-space: nowrap;
  letter-spacing: -2px;
  line-height: 1;
}
/* Speed tape — left edge */
.pfd-speed-box {
  position: absolute;
  left: 0; top: 30%; bottom: 30%;
  width: 22%;
  background: rgba(0,0,0,0.82);
  border-right: 1px solid rgba(255,200,0,0.35);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.pfd-speed-box span {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.55rem, 1.2vw, 0.9rem);
  font-weight: 700;
  color: #ffcc00;
  text-shadow: 0 0 6px rgba(255,200,0,0.7);
  line-height: 1;
}
.pfd-speed-box em, .pfd-alt-box em {
  font-style: normal;
  font-size: 0.38rem;
  color: rgba(255,255,255,0.45);
  display: block;
  letter-spacing: 0.05em;
}
/* Altitude tape — right edge */
.pfd-alt-box {
  position: absolute;
  right: 0; top: 30%; bottom: 30%;
  width: 22%;
  background: rgba(0,0,0,0.82);
  border-left: 1px solid rgba(0,255,120,0.35);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.pfd-alt-box span {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.55rem, 1.2vw, 0.9rem);
  font-weight: 700;
  color: #00ff88;
  text-shadow: 0 0 6px rgba(0,255,130,0.7);
  line-height: 1;
}

/* ── HSI: Horizontal Situation Indicator ─────────────────── */
.hsi-screen {
  flex: 1;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, #061428 0%, #020810 70%, #010408 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Compass ring — rotated by JS based on heading */
.hsi-ring {
  position: absolute;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(0,200,255,0.7);
  box-shadow:
    0 0 10px rgba(0,160,255,0.25),
    inset 0 0 18px rgba(0,20,60,0.65);
  transition: transform 0.12s linear;
}
/* Tick marks every 30° via CSS conic gradient on a donut pseudo-element */
.hsi-ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(0,210,255,0.75) 0deg 2deg,
    transparent 2deg 10deg,
    rgba(0,170,220,0.40) 10deg 10.8deg,
    transparent 10.8deg 20deg,
    rgba(0,170,220,0.40) 20deg 20.8deg,
    transparent 20.8deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 77%, black 79%, black 100%);
  mask: radial-gradient(circle, transparent 77%, black 79%, black 100%);
  pointer-events: none;
}
.hsi-lbl {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.45rem, 1vw, 0.65rem); font-weight: 700;
  color: rgba(0,230,255,0.92);
  text-shadow: 0 0 5px rgba(0,200,255,0.7);
  z-index: 2;
}
.hsi-n { top:  3px; left: 50%; transform: translateX(-50%); }
.hsi-e { right: 3px; top: 50%; transform: translateY(-50%); }
.hsi-s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.hsi-w { left: 3px; top: 50%; transform: translateY(-50%); }
.hsi-plane {
  position: absolute;
  font-size: clamp(0.8rem, 1.8vw, 1.3rem);
  color: #00e8ff;
  text-shadow: 0 0 10px rgba(0,220,255,0.9), 0 0 20px rgba(0,200,255,0.4);
  z-index: 2;
}
.hsi-hdg-val {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: clamp(0.5rem, 1vw, 0.7rem); font-weight: 700;
  color: #00e8ff;
  text-shadow: 0 0 8px rgba(0,200,255,0.7);
  background: rgba(0,0,0,0.7);
  padding: 1px 6px;
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 2px;
  z-index: 3;
  letter-spacing: 0.1em;
}

/* ── Switches & knobs ────────────────────────────────────── */
.panel-switches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.panel-switches-r { flex-direction: column-reverse; }
.sw-row { display: flex; gap: 8px; }
.sw-btn {
  width: 12px; height: 20px;
  background: linear-gradient(to bottom, rgba(46,56,76,0.95), rgba(26,32,48,0.95));
  border-radius: 2px;
  border: 1px solid rgba(68,82,110,0.52);
  box-shadow: 0 2px 4px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.sw-btn::after {
  content: '';
  position: absolute;
  top: 5px; left: 2px; right: 2px; height: 9px;
  background: rgba(36,46,64,0.92);
  border-radius: 1px;
  border: 1px solid rgba(52,65,90,0.6);
}
.sw-btn.sw-on::after {
  background: rgba(0,185,65,0.88);
  box-shadow: 0 0 5px rgba(0,255,80,0.42);
}
.knob-row { display: flex; gap: 10px; align-items: center; }

/* Decorative knobs */
.dash-knob {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(60,70,85,0.9), rgba(18,22,28,0.95));
  border: 1px solid rgba(80,100,120,0.45);
  box-shadow: 0 0 6px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.07);
}
.dash-knob-sm { width: 18px; height: 18px; }

/* ── Center controls: throttle + stick ──────────────────── */
.cockpit-controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0 4px;
}
/* Throttle */
.throttle-assy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.thr-track {
  position: relative;
  width: 14px; height: 58px;
  background: rgba(18,22,36,0.96);
  border: 1px solid rgba(52,65,90,0.55);
  border-radius: 2px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.72);
}
.thr-lever {
  position: absolute;
  top: 8%; left: -5px; right: -5px;
  height: 14px;
  background: linear-gradient(to bottom, rgba(76,88,115,0.96), rgba(46,56,80,0.96));
  border-radius: 2px;
  border: 1px solid rgba(95,112,145,0.62);
  box-shadow: 0 2px 5px rgba(0,0,0,0.72);
  transition: top 0.1s ease;
}
.thr-label {
  font-family: 'Courier New', monospace;
  font-size: 0.44rem;
  color: rgba(90,112,148,0.55);
  letter-spacing: 0.15em;
}
/* Joystick */
.stick-assy { display: flex; flex-direction: column; align-items: center; }
.stick-base {
  width: 46px; height: 12px;
  background: radial-gradient(ellipse at 50% 30%, rgba(50,58,80,0.97), rgba(16,20,32,0.97));
  border-radius: 50%;
  border: 1px solid rgba(72,85,115,0.55);
  box-shadow: 0 4px 14px rgba(0,0,0,0.88);
}
.stick-shaft {
  position: relative;
  width: 18px; height: 54px;
  background: linear-gradient(to right,
    rgba(26,32,46,0.98) 0%,
    rgba(46,54,76,0.98) 35%,
    rgba(32,38,56,0.98) 65%,
    rgba(20,26,40,0.98) 100%);
  border-radius: 4px 4px 2px 2px;
  border: 1px solid rgba(68,82,110,0.52);
  box-shadow: 2px 0 7px rgba(0,0,0,0.62);
  transform: rotate(-4deg);
  transform-origin: bottom center;
}
.stick-hat {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 8px;
  background: linear-gradient(to bottom, rgba(66,76,100,0.96), rgba(40,48,70,0.96));
  border-radius: 2px;
  border: 1px solid rgba(85,98,130,0.52);
}
.stick-fire {
  position: absolute;
  top: 15px; right: -7px;
  width: 11px; height: 11px;
  background: radial-gradient(circle at 35% 35%, #ff5555, #bb0000);
  border-radius: 50%;
  border: 1px solid #7a0000;
  box-shadow: 0 0 7px rgba(255,0,0,0.48);
}
.stick-btn2 {
  position: absolute;
  top: 29px; right: -6px;
  width: 9px; height: 9px;
  background: radial-gradient(circle at 35% 35%, #ffdd44, #cc8800);
  border-radius: 50%;
  border: 1px solid #885500;
  box-shadow: 0 0 5px rgba(255,200,0,0.32);
}
.panel-mini-knobs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

/* ===================== COCKPIT LCD ===================== */
.cockpit-lcd {
  position: relative;
  width: 100%; height: 100%;
  background: #010c04;
  /* no border — PNG bezel surrounds this */
  padding: 6% 8%;
  box-sizing: border-box;
  box-shadow: inset 0 0 30px rgba(0,20,8,0.9);
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
}

/* CRT scanline overlay */
.lcd-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 2;
}

.lcd-header {
  font-size: clamp(0.42rem, 0.9vw, 0.62rem);
  letter-spacing: 0.2em;
  color: #00ff50;
  text-shadow: 0 0 6px #00ff50;
  text-align: center;
  margin-bottom: 5%;
  opacity: 0.8;
  border-bottom: 1px solid rgba(0,255,80,0.2);
  padding-bottom: 3%;
}

.lcd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

.lcd-label {
  font-size: clamp(0.38rem, 0.8vw, 0.55rem);
  color: rgba(0,255,80,0.55);
  letter-spacing: 0.1em;
  width: 28%;
  flex-shrink: 0;
}
.lcd-val {
  font-size: clamp(0.65rem, 1.4vw, 1rem);
  font-weight: 700;
  color: #00ff50;
  text-shadow: 0 0 8px #00ff50, 0 0 16px rgba(0,255,80,0.4);
  letter-spacing: 0.08em;
  min-width: 0;
  flex: 1;
  text-align: right;
}

.lcd-unit {
  font-size: 0.52rem;
  color: rgba(0,255,80,0.4);
  letter-spacing: 0.06em;
  align-self: flex-end;
  padding-bottom: 2px;
}

.lcd-divider {
  border-top: 1px solid rgba(0,255,80,0.15);
  margin: 5px 0 3px;
}

/* Compact status bars */
.lcd-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0,255,80,0.1);
  border: 1px solid rgba(0,255,80,0.2);
  border-radius: 2px;
  overflow: hidden;
}
.lcd-bar {
  height: 100%;
  width: 100%;
  background: #00ff50;
  box-shadow: 0 0 6px #00ff50;
  border-radius: 2px;
  transition: width 0.2s ease;
}
.lcd-bar-shield {
  background: #00cfff;
  box-shadow: 0 0 6px #00cfff;
}

/* Blinking cursor */
.lcd-cursor {
  font-size: 0.6rem;
  color: #00ff50;
  text-align: right;
  opacity: 1;
  animation: lcdBlink 1s step-start infinite;
  margin-top: 2px;
}
@keyframes lcdBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Camera mode flash label */
.cam-mode-label {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--primary);
  text-shadow: 0 0 16px var(--primary);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 8;   /* on top of everything */
}
.cam-mode-label.hidden { display: none; }
.ch-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(50,220,255,0.72);
  box-shadow: inset 0 0 0 2px rgba(50,220,255,0.08);
}
.ch-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 3px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary);
}
.ch-top, .ch-bottom, .ch-left, .ch-right {
  position: absolute;
  background: rgba(50,220,255,0.78);
}
.ch-top    { top: -11px; left: 50%; transform: translateX(-50%); width: 1.5px; height: 9px; }
.ch-bottom { bottom: -11px; left: 50%; transform: translateX(-50%); width: 1.5px; height: 9px; }
.ch-left   { left: -11px; top: 50%; transform: translateY(-50%); width: 9px; height: 1.5px; }
.ch-right  { right: -11px; top: 50%; transform: translateY(-50%); width: 9px; height: 1.5px; }

/* Kill feed */
.killfeed {
  position: absolute;
  top: 86px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.kf-entry {
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.52));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--warning);
  letter-spacing: 0.14em;
  animation: kfFade 4s forwards;
  box-shadow: 0 14px 28px rgba(0,0,0,0.2);
}
@keyframes kfFade {
  0%   { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(20px); }
}

/* Lock-on */
.lockon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -90px);
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-shadow: 0 0 14px rgba(255, 91, 77, 0.7);
  animation: lockPulse 0.4s ease infinite alternate;
}
@keyframes lockPulse {
  from { opacity: 1; }
  to   { opacity: 0.3; }
}
.lockon.hidden { display: none; }

/* Threat alert */
.threat-alert {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -130px);
  color: #ff3a30;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-shadow: 0 0 16px rgba(255, 58, 48, 0.85);
  animation: threatBlink 0.32s linear infinite alternate;
}
@keyframes threatBlink {
  from { opacity: 1; }
  to   { opacity: 0.34; }
}
.threat-alert.hidden { display: none; }

/* Boost */
.boost-indicator {
  position: absolute;
  bottom: 228px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-shadow: 0 0 18px rgba(255, 210, 74, 0.62);
  animation: boostPulse 0.5s ease infinite alternate;
}
@keyframes boostPulse {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to   { opacity: 0.7; transform: translateX(-50%) scale(1.05); }
}
.boost-indicator.hidden { display: none; }

/* Wave announcement */
.wave-announce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.28em;
  color: #fff;
  text-shadow: 0 0 24px rgba(50,220,255,0.8), 0 0 60px rgba(50,220,255,0.28);
  animation: waveIn 3s forwards;
  pointer-events: none;
}
@keyframes waveIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  70%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}
.wave-announce.hidden { display: none; }

/* ===================== GAME OVER / COMPLETE ===================== */
.gameover-title {
  color: var(--danger);
  font-size: 2rem;
  text-shadow: 0 0 20px var(--danger);
}
.complete-title {
  color: var(--success);
  font-size: 2rem;
  text-shadow: 0 0 20px var(--success);
}

#finalStats, #levelStats {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: left;
}

/* ===================== MENU PARTICLES ===================== */
.menu-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleDrift linear infinite;
  opacity: 0;
}
@keyframes particleDrift {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

/* ===================== DAMAGE FLASH ===================== */
#damageFlash {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 36%, rgba(255,91,77,0.32) 72%, rgba(255,91,77,0.55) 100%);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.05s;
}
#damageFlash.active { opacity: 1; }

@media (max-width: 900px) {
  .hud-top {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
    gap: 10px;
  }

  .hud-region,
  .hud-wave {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }

  .hud-score {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
  }

  .hud-audio-controls {
    gap: 6px;
    padding: 5px 8px;
  }

  .hud-audio-btn {
    padding: 4px 7px;
    font-size: 0.52rem;
  }

  .hud-volume-slider {
    width: 64px;
  }

  .hud-volume-value {
    min-width: 30px;
    font-size: 0.56rem;
  }

  .hud-fs-btn {
    padding: 4px 8px;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .hud-vitals {
    left: 10px;
    bottom: 102px;
    min-width: 220px;
    padding: 12px;
  }

  .hud-bar-track {
    width: 116px;
  }

  .hud-instruments {
    right: 122px;
    bottom: 102px;
    gap: 10px;
  }

  .instrument {
    min-width: 70px;
    padding: 11px 12px 8px;
  }

  .inst-val {
    font-size: 1.3rem;
  }

  .weapon-slot {
    min-width: 70px;
    padding: 10px 14px 8px;
  }

  .radar {
    right: 10px;
    bottom: 10px;
  }

  #radarCanvas {
    width: 98px;
    height: 98px;
  }
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ===================== MOBILE TOUCH CONTROLS ===================== */
.mobile-controls {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 185px;
  z-index: 20;
  background: linear-gradient(to top, rgba(4, 7, 14, 0.92) 55%, rgba(4, 7, 14, 0) 100%);
  padding: 8px 12px 10px;
  box-sizing: border-box;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  touch-action: none;
}
.mobile-controls.active {
  display: flex;
}

/* ── Common button ───────────────────────────────────────── */
.mc-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 229, 255, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.30);
  color: #8ff4ff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  transition: background 0.08s, border-color 0.08s;
}
.mc-btn:active {
  background: rgba(0, 229, 255, 0.26);
  border-color: var(--primary);
}

/* ── Left zone: throttle + joystick + yaw ───────────────── */
.mc-left {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
}

.mc-throttle-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 32px;
}
.mc-thr {
  width: 38px; height: 38px;
  border-radius: 8px;
  font-size: 1rem;
  padding: 0;
}

.mc-joy-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* ── Virtual joystick ────────────────────────────────────── */
.mc-joystick-zone {
  pointer-events: auto;
  touch-action: none;
  width: 116px; height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-joystick-base {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.05);
  border: 1.5px solid rgba(0, 229, 255, 0.20);
  position: relative;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.06), inset 0 0 26px rgba(0, 0, 0, 0.55);
}
.mc-joystick-base::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.16);
}
.mc-joystick-knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 210, 255, 0.65), rgba(0, 85, 130, 0.95));
  border: 1.5px solid rgba(0, 229, 255, 0.55);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.36), inset 0 2px 4px rgba(255,255,255,0.12);
  pointer-events: none;
  will-change: transform;
}

/* ── Yaw row ─────────────────────────────────────────────── */
.mc-yaw-row {
  display: flex;
  gap: 5px;
}
.mc-yaw {
  padding: 6px 9px;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  min-width: 50px;
  height: 30px;
}

/* ── Centre status strip ─────────────────────────────────── */
.mc-status {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding-bottom: 8px;
  min-width: 82px;
}
.mc-stat-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mc-stat-lbl {
  font-family: var(--font-display);
  font-size: 0.46rem;
  letter-spacing: 0.10em;
  color: rgba(200, 220, 255, 0.46);
  width: 26px;
  flex-shrink: 0;
}
.mc-stat-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.mc-stat-fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transition: width 0.18s ease;
}
.mc-fill-hull  { background: linear-gradient(90deg, #4ff2b8, #13b989); }
.mc-fill-shld  { background: linear-gradient(90deg, #70edff, #19afd5); }
.mc-ammo-row {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.mc-ammo {
  font-family: var(--font-display);
  font-size: 0.50rem;
  color: rgba(200, 220, 255, 0.52);
  letter-spacing: 0.06em;
}

/* ── Right zone: action buttons ──────────────────────────── */
.mc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.mc-row {
  display: flex;
  gap: 5px;
}

/* FIRE — large round button */
.mc-fire {
  width: 78px; height: 78px;
  border-radius: 50%;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  background: rgba(255, 80, 80, 0.14);
  border-color: rgba(255, 80, 80, 0.44);
  color: #ff9898;
  box-shadow: 0 0 16px rgba(255, 60, 60, 0.14);
}
.mc-fire:active {
  background: rgba(255, 60, 60, 0.36);
  box-shadow: 0 0 24px rgba(255, 60, 60, 0.48);
  border-color: #ff6060;
}

/* Secondary action buttons */
.mc-action {
  padding: 7px 9px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  min-width: 50px;
  height: 33px;
}

/* Boost — amber accent */
.mc-boost {
  background: rgba(255, 179, 86, 0.12);
  border-color: rgba(255, 179, 86, 0.38);
  color: var(--warning);
}
.mc-boost:active { background: rgba(255, 179, 86, 0.30); }

/* Lock — green accent */
.mc-lock-btn {
  background: rgba(81, 240, 176, 0.10);
  border-color: rgba(81, 240, 176, 0.30);
  color: var(--success);
}
.mc-lock-btn:active { background: rgba(81, 240, 176, 0.26); }

/* Pause */
.mc-pause-mc {
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.60);
}

/* ===================== MOBILE HUD ADAPTATIONS ===================== */
/* Applied to any touchscreen (coarse pointer = finger/stylus) */
@media (pointer: coarse) {

  /* Prevent text zoom on canvas & controls */
  #gameCanvas { touch-action: none; }

  /* Always hide cockpit overlay — too complex at mobile scale */
  .cockpit-overlay { display: none !important; }

  /* Compact top bar */
  .hud-top {
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
  }
  .hud-region,
  .hud-wave   { font-size: 0.54rem !important; letter-spacing: 0.10em !important; }
  .hud-score  { font-size: 0.78rem !important; letter-spacing: 0.10em !important; }

  /* Hide audio controls & fullscreen button from top bar */
  .hud-audio-controls,
  .hud-fs-btn { display: none !important; }

  /* Push bottom-anchored HUD panels above touch controls zone */
  .hud-vitals {
    bottom: 196px !important;
    left: 8px !important;
    min-width: 188px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .hud-bar-track { width: 108px !important; }
  .hud-label { font-size: 0.58rem !important; }

  .hud-weapons {
    bottom: 196px !important;
  }
  .weapon-slot {
    min-width: 62px !important;
    padding: 8px 11px 6px !important;
  }

  .hud-instruments {
    bottom: 196px !important;
    right: 10px !important;
    gap: 8px !important;
  }
  .instrument  { min-width: 68px !important; padding: 10px 11px 8px !important; }
  .inst-val    { font-size: 1.18rem !important; }

  /* Hide radar — too tiny; mini status is in the controls bar */
  .radar { display: none !important; }

  /* Kill feed compact */
  .killfeed { top: 50px !important; right: 8px !important; }
  .kf-entry { font-size: 0.62rem !important; padding: 4px 8px !important; }

  /* Boost indicator above touch zone */
  .boost-indicator { bottom: 202px !important; }
}

/* Portrait-specific overrides */
@media (pointer: coarse) and (orientation: portrait) {
  .mobile-controls      { height: 230px !important; }
  .hud-vitals,
  .hud-weapons,
  .hud-instruments      { bottom: 242px !important; }
  .boost-indicator      { bottom: 246px !important; }

  .mc-joystick-zone     { width: 130px !important; height: 130px !important; }
  .mc-joystick-base     { width: 122px !important; height: 122px !important; }
  .mc-joystick-knob     { width: 50px  !important; height: 50px  !important; }
  .mc-fire              { width: 86px  !important; height: 86px  !important; }
  .mc-throttle-col      { padding-bottom: 44px !important; }
  .mc-action            { min-width: 56px !important; height: 36px !important; }
}