/* ═══════════════════════════════════════════════════════════════════
   HEXIPOD ARENA — main.css
   Phase 1: title screen + launch stub
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --c-bg:       #050810;
  --c-bg2:      #0a0f1e;
  --c-accent:   #00d4ff;
  --c-accent2:  #ff6a00;
  --c-text:     #b8d8f0;
  --c-dim:      #3a5070;
  --c-white:    #e8f4ff;

  --font: 'Courier New', 'Lucida Console', monospace;
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ─── SCREENS ────────────────────────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
  z-index: 1;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ─── BACKGROUND ─────────────────────────────────────────────────────────── */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Deep space base */
  background-color: var(--c-bg);

  /* Radial glow from center */
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 50%,
      rgba(0, 50, 110, 0.55) 0%,
      transparent 70%),
    /* Subtle hex grid */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98'%3E%3Cpath d='M28 2 L54 17 L54 49 L28 64 L2 49 L2 17 Z' fill='none' stroke='%2300aaff' stroke-width='0.6' opacity='0.12'/%3E%3Cpath d='M28 36 L54 51 L54 83 L28 98 L2 83 L2 51 Z' fill='none' stroke='%2300aaff' stroke-width='0.6' opacity='0.12'/%3E%3C/svg%3E");
}

/* Scanline overlay */
.bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
  pointer-events: none;
}

/* Tactical Neuronics website link — title screen footer */
.tn-link {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(0, 212, 255, 0.55),
    0 1px 5px rgba(0, 0, 0, 0.85);
  transition: color 0.18s, text-shadow 0.18s;
}

.tn-link:hover {
  color: var(--c-white);
  text-shadow:
    0 0 18px rgba(0, 212, 255, 0.9),
    0 1px 5px rgba(0, 0, 0, 0.85);
}

/* Title screen: footer text brightened for legibility over the image backdrop */
#screen-title .screen-footer {
  color: var(--c-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

#screen-title .version-text {
  color: var(--c-accent);
  opacity: 1;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.6), 0 1px 5px rgba(0, 0, 0, 0.85);
}

/* Title screen: Title2.png full-screen backdrop */
#screen-title .bg-layer {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 90% 90% at 50% 50%,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.62) 100%),
    url('../Title2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── TITLE CONTENT ──────────────────────────────────────────────────────── */
.title-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

#screen-title .title-content {
  opacity: 0;
  animation: title-reveal 0.8s ease forwards 3s;
}

@keyframes title-reveal {
  to { opacity: 1; }
}

/* Title screen: stretch all buttons to match the widest (Enter Arena) */
#screen-title .title-content {
  align-items: stretch;
}
#screen-title .btn-secondary {
  background: rgba(0, 0, 0, 0.62);
  text-align: center;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.60);
  box-shadow:
    0 0 14px rgba(0, 212, 255, 0.25),
    inset 0 0 10px rgba(0, 212, 255, 0.04);
}
#screen-title .btn-secondary:hover {
  color: var(--c-white);
  border-color: var(--c-white);
  box-shadow:
    0 0 28px rgba(0, 212, 255, 0.50),
    inset 0 0 14px rgba(0, 212, 255, 0.10);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.90);
}

.title-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-accent);
  animation: blink 2.4s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 0.15; }
}

.title-text {
  font-size: clamp(3rem, 11vw, 8.5rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow:
    0 0 18px var(--c-accent),
    0 0 55px rgba(0, 212, 255, 0.35),
    0 0 110px rgba(0, 212, 255, 0.15);
}

.title-accent {
  display: block;
  color: #aa0000;
}

.title-rule {
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0.6;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.18s ease;
}

.btn-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding: 16px 52px;
  color: var(--c-accent);
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid var(--c-accent);
  box-shadow:
    0 0 24px rgba(0, 212, 255, 0.40),
    inset 0 0 20px rgba(0, 212, 255, 0.06);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.70);
}

.btn-main {
  display: block;
  pointer-events: none;
}

/* Force the action buttons above any sibling z-order that could steal hover */
#btn-solo, #btn-multi {
  position: relative;
  z-index: 5;
}

.btn-primary:hover,
.btn-primary.is-hovered {
  color: var(--c-white);
  background: rgba(0, 212, 255, 0.18);
  box-shadow:
    0 0 44px rgba(0, 212, 255, 0.70),
    inset 0 0 28px rgba(0, 212, 255, 0.12);
  text-shadow: 0 0 14px rgba(0, 212, 255, 1.0);
}

.btn-primary:active { transform: scale(0.97); }

@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(0, 212, 255, 0.40),
      inset 0 0 20px rgba(0, 212, 255, 0.06);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.70);
  }
  50% {
    box-shadow:
      0 0 48px rgba(0, 212, 255, 0.80),
      inset 0 0 28px rgba(0, 212, 255, 0.12);
    text-shadow: 0 0 18px rgba(0, 212, 255, 1.0);
  }
}

.btn-pulse { animation: pulse-glow 2.2s ease-in-out infinite; }

.btn-secondary {
  font-size: 0.82rem;
  padding: 10px 28px;
  color: var(--c-dim);
  background: transparent;
  border: 1px solid var(--c-dim);
}

.btn-secondary:hover {
  color: var(--c-text);
  border-color: var(--c-text);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.screen-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--c-dim);
  z-index: 1;
}

.version-text {
  color: var(--c-accent);
  opacity: 0.65;
}

/* ─── UPDATE BANNER ──────────────────────────────────────────────────────── */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: rgba(0, 60, 100, 0.96);
  border-bottom: 1px solid var(--c-accent);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.update-banner span { flex: 1; }

.update-refresh {
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  padding: 5px 16px;
  background: var(--c-accent);
  color: #000;
  border: none;
  cursor: pointer;
}

.update-dismiss {
  background: none;
  border: none;
  color: var(--c-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  line-height: 1;
}

.update-dismiss:hover { color: var(--c-text); }

/* ─── LAUNCH SCREEN ──────────────────────────────────────────────────────── */
#screen-launch .bg-layer {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 90% 90% at 50% 50%,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.62) 100%),
    url('../Title2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#screen-launch {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 24px 0 80px;
}

.launch-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

@media (max-height: 500px) {
  #screen-launch { padding: 12px 0 60px; }
  .launch-content { gap: 10px; }
  .launch-eyebrow { display: none; }
  .launch-title { font-size: 1.3rem; letter-spacing: 0.15em; }
  .title-rule { display: none; }
  .launch-menu { gap: 6px; }
  .enemy-count-row { padding: 6px 10px; }
}

.launch-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--c-accent);
  opacity: 0.7;
}

.launch-title {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 0 20px var(--c-accent);
}

.launch-menu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 440px;
  background: rgba(0, 4, 12, 0.75);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 4px;
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.enemy-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(0, 212, 255, 0.20);
  background: rgba(0, 6, 14, 0.55);
}

.enemy-count-label {
  font: bold 11px monospace;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  text-transform: uppercase;
}

.enemy-count-btns {
  display: flex;
  gap: 5px;
}

/* Volume slider ───────────────────────────────────────────────────────────── */
.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

#volume-slider,
#voice-slider,
#music-slider,
#enemy-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 3px;
  background: rgba(0, 212, 255, 0.20);
  border: 1px solid rgba(0, 212, 255, 0.30);
  outline: none;
  cursor: pointer;
}

#volume-slider::-webkit-slider-thumb,
#voice-slider::-webkit-slider-thumb,
#music-slider::-webkit-slider-thumb,
#enemy-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--c-accent);
  box-shadow: 0 0 7px rgba(0, 212, 255, 0.75);
  cursor: pointer;
}

#volume-slider::-moz-range-thumb,
#voice-slider::-moz-range-thumb,
#music-slider::-moz-range-thumb,
#enemy-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--c-accent);
  box-shadow: 0 0 7px rgba(0, 212, 255, 0.75);
  border: none;
  cursor: pointer;
}

#volume-display,
#voice-display,
#music-display,
#enemy-display {
  font: bold 11px monospace;
  color: var(--c-accent);
  min-width: 36px;
  text-align: right;
  letter-spacing: 0.05em;
}

.count-btn {
  width: 34px;
  height: 34px;
  background: rgba(0, 6, 14, 0.70);
  border: 1px solid rgba(0, 212, 255, 0.28);
  color: rgba(0, 212, 255, 0.55);
  font: bold 13px monospace;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.count-btn:hover {
  background: rgba(0, 212, 255, 0.12);
  color: var(--c-accent);
  border-color: rgba(0, 212, 255, 0.55);
}

/* ─── ARENA CARD GRID ────────────────────────────────────────────────────── */
#lobby-arena-row {
  width: 440px;
  max-width: 100%;
}

.arena-select-section {
  width: 100%;
  border: 1px solid rgba(0, 212, 255, 0.20);
  background: rgba(0, 6, 14, 0.55);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arena-select-label {
  font: bold 11px monospace;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  text-transform: uppercase;
}

.arena-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.arena-grid::-webkit-scrollbar {
  height: 4px;
}

.arena-grid::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.08);
  border-radius: 2px;
}

.arena-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.40);
  border-radius: 2px;
}

.arena-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.70);
}

/* Arena card buttons — override base .count-btn sizing */
#arena-select-btns .count-btn,
#lobby-arena-btns .count-btn {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
  padding: 6px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  scroll-snap-align: start;
}

.arena-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0.60;
  transition: opacity 0.15s;
  pointer-events: none;
}

.arena-card-name {
  font: bold 9px/1 monospace;
  letter-spacing: 0.14em;
  color: rgba(0, 212, 255, 0.50);
  text-transform: uppercase;
  transition: color 0.15s;
  pointer-events: none;
}

#arena-select-btns .count-btn:hover .arena-thumb,
#lobby-arena-btns .count-btn:hover .arena-thumb { opacity: 0.90; }

#arena-select-btns .count-btn:hover .arena-card-name,
#lobby-arena-btns .count-btn:hover .arena-card-name { color: var(--c-accent); }

#arena-select-btns .count-btn.count-btn-active .arena-thumb,
#lobby-arena-btns .count-btn.count-btn-active .arena-thumb { opacity: 1; }

#arena-select-btns .count-btn.count-btn-active .arena-card-name,
#lobby-arena-btns .count-btn.count-btn-active .arena-card-name { color: var(--c-accent); }

.count-btn-active {
  background: rgba(0, 212, 255, 0.18);
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.35);
}


.btn-primary .btn-sub {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  opacity: 0.55;
  margin-top: 3px;
  pointer-events: none;
}

.btn-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  animation: none !important;
  box-shadow: none !important;
}

.vr-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  cursor: pointer;
  border: 1px solid var(--c-dim);
  padding: 10px 20px;
  justify-content: center;
}

.vr-toggle input[type="checkbox"] { accent-color: var(--c-accent); }

/* ─── GAME SCREEN ────────────────────────────────────────────────────────── */
#screen-game {
  background: #000;
}

#game-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#game-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* ── HUD SHUTDOWN — hide everything except damage/heat panel ─────────────── */
#game-overlay > *:not(#hud-damage-panel) {
  transition: opacity 0.35s ease;
}
#game-overlay.hud-shutdown > *:not(#hud-damage-panel) {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── HUD GLITCH — raster / TV signal artifacts ───────────────────────────── */

/* Scrolling scan-line static overlay — visible only while a glitch class is set */
#game-overlay.hud-glitch-sm::before,
#game-overlay.hud-glitch-md::before,
#game-overlay.hud-glitch-lg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    0deg,
    transparent          0px,
    transparent          2px,
    rgba(0,255,200,0.04) 2px,
    rgba(0,255,200,0.04) 4px
  );
  animation: hud-scan-roll linear infinite;
}

@keyframes hud-scan-roll {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}

/* ── Small — gun hit: quick raster snap and chromatic fringe ── */
@keyframes hud-glitch-sm {
  0%   { opacity: 1;   filter: none;
         transform: none; }
  15%  { opacity: 0.7; filter: brightness(2.2) hue-rotate(12deg);
         transform: skewX(1.5deg) translateX(4px); }
  30%  { opacity: 0;   filter: brightness(0);
         transform: none; }
  45%  { opacity: 0.9; filter: drop-shadow(3px 0 0 rgba(255,0,60,.9)) drop-shadow(-3px 0 0 rgba(0,255,220,.9));
         transform: translateX(-3px); }
  65%  { opacity: 0.6; filter: hue-rotate(25deg) brightness(1.3);
         transform: none; }
  82%  { opacity: 0.9; filter: none;
         transform: translateX(1px); }
  100% { opacity: 1;   filter: none;
         transform: none; }
}
#game-overlay.hud-glitch-sm {
  animation: hud-glitch-sm 320ms steps(1, end) both;
}
#game-overlay.hud-glitch-sm::before { animation-duration: 80ms; }

/* ── Medium — splash: signal disruption + colour corruption ── */
@keyframes hud-glitch-md {
  0%   { opacity: 1;   filter: none;
         transform: none; }
  7%   { opacity: 0;   filter: brightness(5) saturate(0);
         transform: skewX(3deg) translateX(7px); }
  13%  { opacity: 0.4; filter: hue-rotate(140deg) saturate(4) brightness(0.5);
         transform: translateX(-6px); }
  20%  { opacity: 0;   filter: brightness(0);
         transform: skewX(-2deg); }
  28%  { opacity: 0.6; filter: drop-shadow(5px 0 0 rgba(255,0,60,.9)) drop-shadow(-5px 0 0 rgba(0,255,220,.9));
         transform: translateX(5px) scaleY(1.015); }
  36%  { opacity: 0.2; filter: brightness(0);
         transform: none; }
  46%  { opacity: 0.7; filter: hue-rotate(50deg) brightness(1.4) contrast(1.5);
         transform: translateX(-4px) scaleY(0.99); }
  57%  { opacity: 0.9; filter: drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,255,220,.5));
         transform: none; }
  70%  { opacity: 0.6; filter: hue-rotate(18deg);
         transform: translateX(2px); }
  84%  { opacity: 0.9; filter: none;
         transform: none; }
  100% { opacity: 1;   filter: none;
         transform: none; }
}
#game-overlay.hud-glitch-md {
  animation: hud-glitch-md 580ms steps(1, end) both;
}
#game-overlay.hud-glitch-md::before { animation-duration: 55ms; }

/* ── Large — direct missile: raster collapse and slow recovery ── */
@keyframes hud-glitch-lg {
  0%   { opacity: 1;   filter: none;
         transform: none; }
  4%   { opacity: 0;   filter: brightness(10) saturate(0);
         transform: skewX(6deg) scaleY(1.05) translateX(-12px); }
  7%   { opacity: 0.2; filter: hue-rotate(180deg) saturate(6) contrast(4);
         transform: skewX(-5deg) translateX(14px); }
  10%  { opacity: 0;   filter: brightness(0);
         transform: none; }
  14%  { opacity: 0.3; filter: drop-shadow(8px 0 0 rgba(255,0,60,1)) drop-shadow(-8px 0 0 rgba(0,255,220,1));
         transform: translateX(-10px) scaleY(0.97); }
  18%  { opacity: 0;   filter: none;
         transform: skewX(4deg) translateX(8px); }
  23%  { opacity: 0.3; filter: hue-rotate(270deg) brightness(2.5) saturate(5);
         transform: translateX(-7px); }
  28%  { opacity: 0;   filter: brightness(0);
         transform: none; }
  34%  { opacity: 0.4; filter: hue-rotate(100deg) saturate(3) contrast(2);
         transform: skewX(-2deg) translateX(6px); }
  40%  { opacity: 0;   filter: none;
         transform: none; }
  47%  { opacity: 0.5; filter: drop-shadow(5px 0 0 rgba(255,0,60,.8)) drop-shadow(-5px 0 0 rgba(0,255,220,.8));
         transform: translateX(-5px); }
  54%  { opacity: 0.6; filter: brightness(1.6) hue-rotate(35deg);
         transform: none; }
  61%  { opacity: 0.3; filter: brightness(0);
         transform: translateX(4px); }
  68%  { opacity: 0.7; filter: hue-rotate(20deg) drop-shadow(3px 0 0 rgba(255,0,60,.5)) drop-shadow(-3px 0 0 rgba(0,255,220,.5));
         transform: none; }
  76%  { opacity: 0.5; filter: none;
         transform: translateX(-2px); }
  84%  { opacity: 0.8; filter: brightness(1.2);
         transform: none; }
  91%  { opacity: 0.7; filter: hue-rotate(8deg);
         transform: translateX(1px); }
  96%  { opacity: 0.9; filter: none;
         transform: none; }
  100% { opacity: 1;   filter: none;
         transform: none; }
}
#game-overlay.hud-glitch-lg {
  animation: hud-glitch-lg 1100ms steps(1, end) both;
}
#game-overlay.hud-glitch-lg::before { animation-duration: 40ms; }

/* ── DEATH GLITCH — severe sustained HUD corruption during dying sequence ── */
@keyframes hud-death-glitch {
  0%   { transform: none;                            filter: none;                                         opacity: 1;   }
  4%   { transform: translateX(-12px) skewX(4deg);   filter: hue-rotate(90deg) brightness(2) saturate(4);  opacity: 0.6; }
  8%   { transform: translateX(18px);                filter: hue-rotate(200deg) brightness(0.3);           opacity: 1;   }
  11%  { transform: none;                            filter: saturate(0) brightness(3);                    opacity: 0.2; }
  14%  { transform: translateX(-5px);                filter: none;                                         opacity: 1;   }
  18%  { transform: none;                            filter: none;                                         opacity: 1;   }
  30%  { transform: translateX(22px) skewX(-6deg);   filter: hue-rotate(280deg) brightness(4);             opacity: 0.4; }
  32%  { transform: translateX(-8px);                filter: hue-rotate(0deg) saturate(6);                 opacity: 0.8; }
  34%  { transform: none;                            filter: none;                                         opacity: 0;   }
  36%  { transform: none;                            filter: none;                                         opacity: 1;   }
  52%  { transform: translateX(8px) skewX(3deg);     filter: brightness(2.5) hue-rotate(50deg);            opacity: 0.9; }
  55%  { transform: translateX(-16px);               filter: saturate(0);                                  opacity: 0.4; }
  57%  { transform: none;                            filter: none;                                         opacity: 1;   }
  70%  { transform: translateX(-24px) skewX(9deg);   filter: hue-rotate(180deg) brightness(5) saturate(0); opacity: 0;   }
  73%  { transform: translateX(12px);                filter: hue-rotate(90deg);                            opacity: 0.5; }
  76%  { transform: none;                            filter: none;                                         opacity: 1;   }
  88%  { transform: translateX(6px) skewX(-4deg);    filter: brightness(0.1);                              opacity: 0.3; }
  91%  { transform: none;                            filter: brightness(4) hue-rotate(130deg);              opacity: 0.9; }
  94%  { transform: none;                            filter: none;                                         opacity: 1;   }
  100% { transform: none;                            filter: none;                                         opacity: 1;   }
}

#game-overlay.hud-dying #hud-damage-panel,
#game-overlay.hud-dying #hud-direction-panel,
#game-overlay.hud-dying #hud-radar-panel {
  animation: hud-death-glitch 2.1s steps(1, end) infinite;
}
/* Offset each panel so they glitch out of sync with each other */
#game-overlay.hud-dying #hud-direction-panel { animation-delay: -0.55s; }
#game-overlay.hud-dying #hud-radar-panel     { animation-delay: -1.25s; }

/* ── COCKPIT BOOT SEQUENCE ──────────────────────────────────────────────── */
/* Full-screen overlay that plays a system-activation glitch after the       */
/* 3D interior view fades. Sits above HUD (z-index 1000). pointer-events:none*/
#cockpit-boot {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
}
#cockpit-boot.active {
  display: block;
  animation: cockpit-boot-seq 2.8s steps(1, end) forwards;
}


@keyframes cockpit-boot-seq {
  /* --- first burst: power spike --- */
  0%   { opacity: 0;   background: transparent; filter: none; }
  4%   { opacity: 1;   background: #d4d4d4;
         filter: brightness(14) saturate(0) contrast(6); }
  7%   { opacity: 0.8; background: #000;
         filter: brightness(5) saturate(0); }
  10%  { opacity: 0;   background: transparent; filter: none; }

  /* --- green scanline static (sensors coming online) --- */
  15%  { opacity: 0.75;
         background: repeating-linear-gradient(0deg,
           transparent 0px, transparent 2px,
           rgba(0, 255, 140, 0.16) 2px, rgba(0, 255, 140, 0.16) 4px);
         filter: hue-rotate(80deg) saturate(3) brightness(1.8); }
  20%  { opacity: 0.45;
         background: transparent;
         filter: drop-shadow(8px 0 0 rgba(255, 0, 60, 0.85))
                 drop-shadow(-8px 0 0 rgba(0, 255, 200, 0.85)); }
  24%  { opacity: 0; filter: none; background: transparent; }

  /* --- second power burst --- */
  30%  { opacity: 0.95; background: #c8c8c8;
         filter: brightness(10) saturate(0); }
  33%  { opacity: 0.65;
         background: repeating-linear-gradient(0deg,
           rgba(0, 18, 36, 0.55) 0px, rgba(0, 18, 36, 0.55) 3px,
           transparent 3px, transparent 6px);
         filter: brightness(2.5) hue-rotate(190deg) saturate(5)
                 skewX(-3deg); }
  38%  { opacity: 0; filter: none; background: transparent; }

  /* --- chromatic aberration / color channel split --- */
  44%  { opacity: 0.55;
         background: transparent;
         filter: drop-shadow(12px 0 0 rgba(255, 0, 80, 0.9))
                 drop-shadow(-12px 0 0 rgba(0, 220, 255, 0.9))
                 brightness(1.4); }
  48%  { opacity: 0.3;
         background: repeating-linear-gradient(0deg,
           transparent 0px, transparent 2px,
           rgba(0, 200, 255, 0.09) 2px, rgba(0, 200, 255, 0.09) 4px);
         filter: brightness(1.2); }
  53%  { opacity: 0; filter: none; background: transparent; }

  /* --- brief stabilizing flickers --- */
  60%  { opacity: 0.22;
         background: repeating-linear-gradient(0deg,
           transparent 0px, transparent 2px,
           rgba(0, 255, 160, 0.07) 2px, rgba(0, 255, 160, 0.07) 4px);
         filter: brightness(1.15) saturate(1.4); }
  65%  { opacity: 0.08; filter: none; background: transparent; }
  75%  { opacity: 0.06; filter: brightness(1.05); }
  88%  { opacity: 0.02; filter: none; }
  100% { opacity: 0;    filter: none; background: transparent; }
}

.debug-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: rgba(0, 212, 255, 0.45);
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
}

@media (pointer: coarse) {
  .debug-hint { display: none; }
}

/* ─── HUD (Phase 4) ──────────────────────────────────────────────────────── */

/* Hide native cursor while in game */
#screen-game { cursor: none; }

/* Reticle: 4-tick crosshair that follows the mouse ─────────────────────── */
#hud-reticle {
  position: absolute;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Horizontal ticks */
#hud-reticle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 2px;
  margin-top: -1px;
  background: var(--c-accent);
  opacity: 0.88;
  box-shadow: 25px 0 0 0 var(--c-accent); /* right tick */
}

/* Vertical ticks */
#hud-reticle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 11px;
  margin-left: -1px;
  background: var(--c-accent);
  opacity: 0.88;
  box-shadow: 0 25px 0 0 var(--c-accent); /* bottom tick */
}

/* Damage diagram panel ────────────────────────────────────────────────────── */
#hud-damage-panel {
  position: absolute;
  bottom: 36px;
  left: 20px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  background: transparent;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#hud-damage-canvas {
  display: block;
  width: 180px;
  height: 180px;
  image-rendering: pixelated;
}

/* Bearing / direction indicator panel ────────────────────────────────────── */
#hud-direction-panel {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 170, 204, 0.22);
  background: transparent;
  padding: 3px;
  line-height: 0;
}

#hud-direction-canvas {
  display: block;
  width: 90px;
  height: 90px;
  image-rendering: pixelated;
}

/* Radar panel ─────────────────────────────────────────────────────────────── */
#hud-radar-panel {
  position: absolute;
  top: 36px;
  right: 20px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  background: transparent;
  padding: 5px 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#hud-radar-canvas {
  display: block;
  width: 210px;
  height: 210px;
  image-rendering: pixelated;
}

/* Grace period indicator ──────────────────────────────────────────────────── */
#hud-grace {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font: bold 12px 'Courier New', monospace;
  color: #00ffcc;
  text-shadow: 0 0 10px #00ffcc, 0 0 22px rgba(0,255,204,0.5);
  letter-spacing: 3px;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s;
}
#hud-grace.active {
  opacity: 1;
  animation: grace-pulse 1s ease-in-out infinite alternate;
}
@keyframes grace-pulse {
  from { text-shadow: 0 0 8px  #00ffcc, 0 0 18px rgba(0,255,204,0.4); }
  to   { text-shadow: 0 0 14px #00ffcc, 0 0 32px rgba(0,255,204,0.8); }
}

/* Rocket jump status indicator ───────────────────────────────────────────── */
#hud-rocket {
  position: absolute;
  bottom: 138px;
  left: 50%;
  transform: translateX(-50%);
  font: bold 11px 'Courier New', monospace;
  letter-spacing: 3px;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}
#hud-rocket[data-state="ready"] {
  opacity: 1;
  color: #ff8800;
  text-shadow: 0 0 8px #ff6600, 0 0 18px rgba(255,102,0,0.5);
  animation: rocket-pulse 1.4s ease-in-out infinite alternate;
}
#hud-rocket[data-state="ready"]::before { content: '▲ ROCKET READY'; }
#hud-rocket[data-state="airborne"] {
  opacity: 1;
  color: #ffdd00;
  text-shadow: 0 0 10px #ff8800, 0 0 24px rgba(255,136,0,0.7);
}
#hud-rocket[data-state="airborne"]::before { content: '▲ AIRBORNE'; }
@keyframes rocket-pulse {
  from { text-shadow: 0 0 6px  #ff6600, 0 0 14px rgba(255,102,0,0.4); }
  to   { text-shadow: 0 0 12px #ff8800, 0 0 28px rgba(255,136,0,0.7); }
}

/* Floating world-space enemy health bars ─────────────────────────────────── */
#hud-healthbars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.enemy-hbar-wrap {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 68px;
  display: none;
}

.enemy-hbar-name {
  color: rgba(255, 80, 0, 0.85);
  font: bold 10px monospace;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  text-shadow: 0 0 4px rgba(255, 80, 0, 0.6);
}

.enemy-hbar-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 80, 0, 0.35);
}

.enemy-hbar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.12s linear, background 0.2s;
}

.enemy-hbar-shutdown .enemy-hbar-track {
  border-color: rgba(255, 34, 0, 0.9);
  box-shadow: 0 0 5px rgba(255, 34, 0, 0.7);
}

.enemy-hbar-shutdown .enemy-hbar-name::after {
  content: ' [SHUTDOWN]';
  color: #ff2200;
}

.hud-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--c-accent);
  text-transform: uppercase;
}

/* ─── RESULT SCREEN ──────────────────────────────────────────────────────── */
.result-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
  max-width: 1200px;
  padding: 40px;
  box-sizing: border-box;
}

.result-poster-col {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#result-poster {
  max-width: 420px;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.result-info-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.result-title {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 0 30px var(--c-accent);
}

.result-title.defeat {
  color: var(--c-accent2);
  text-shadow: 0 0 30px var(--c-accent2);
}

.result-title.draw {
  color: #f0c040;
  text-shadow: 0 0 30px #f0c040;
}

.result-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 212, 255, 0.20);
  background: rgba(0, 6, 14, 0.55);
}

.result-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.result-stat-label {
  font: bold 11px monospace;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  text-transform: uppercase;
  opacity: 0.75;
}

.result-stat-value {
  font: bold 22px monospace;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* ─── RESULT SCREEN — LANDSCAPE MOBILE ──────────────────────────────────────
   On phones in landscape the viewport is often only 320–420 px tall, so the
   result screen overflows and the user cannot scroll. Allow scroll and shrink
   the layout down to fit without needing to scroll at all on most devices.    */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px) {
  #screen-result {
    overflow-y: auto;
    justify-content: flex-start;
  }

  .result-layout {
    gap: 16px;
    padding: 10px 16px 40px; /* bottom pad clears footer */
  }

  #result-poster {
    max-width: 150px;
    max-height: 40vh;
  }

  .result-title {
    font-size: clamp(1.6rem, 6.5vw, 3rem);
  }

  .result-content {
    gap: 8px;
  }

  .result-stats {
    gap: 4px;
    padding: 8px 12px;
    width: 260px;
  }

  .result-stat-label {
    font-size: 9px;
  }

  .result-stat-value {
    font-size: 15px;
  }
}

/* ─── SPEED GEAR INDICATOR ───────────────────────────────────────────────────
   Speed is now shown as a bar in the damage canvas; text indicator hidden.   */
#hud-gear {
  display: none;
  position: absolute;
  bottom: 232px;
  left: 20px;
  font: bold 11px 'Courier New', monospace;
  color: var(--c-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
  transition: color 0.2s, text-shadow 0.2s;
}
/* High gear (7–9): warm amber tint */
#hud-gear[data-gear="7"],
#hud-gear[data-gear="8"],
#hud-gear[data-gear="9"] {
  color: #ff9900;
  text-shadow: 0 0 8px rgba(255,153,0,0.6);
}
/* Low gear (1–2): cool blue-green, slightly dimmed */
#hud-gear[data-gear="1"],
#hud-gear[data-gear="2"] {
  color: #44ccbb;
  opacity: 0.60;
}

/* ─── MOBILE GEAR CONTROL ────────────────────────────────────────────────────
   Static HTML in index.html, direct child of #screen-game (NOT inside
   #mc-root). This avoids: #mc-root's opacity:0.28, any #mc-root child
   rendering quirks on Android, and post-DOM-insertion append failures.
   Hidden by default; shown only on touch devices via @media (pointer:coarse).
   Events wired by mobile.js using getElementById. */
#mc-gear-cont {
  display: none;           /* hidden until game starts */
  position: absolute;
  top: 4px;
  left: 14px;
  z-index: 16;             /* above game-overlay(10) and mc-root(15) */
  align-items: center;
  pointer-events: none;
}
/* Shown only when the game is running on a touch device (class added by mobile.js) */
#mc-gear-cont.mc-gear-active { display: flex; }
#mc-gear-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.mc-gear-btn {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.75);
  font: bold 28px 'Courier New', monospace;
  width: 70px;
  height: 70px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  line-height: 1;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.mc-gear-btn:active {
  background: rgba(0,212,255,0.18);
}
#mc-gear-val {
  font: bold 22px 'Courier New', monospace;
  color: rgba(255,255,255,0.75);
  min-width: 26px;
  text-align: center;
  pointer-events: none;
}

/* ─── PORTRAIT ROTATION WARNING ─────────────────────────────────────────────
   Shown only on touch devices held in portrait. CSS media query is more
   reliable than JS for this since it fires before the page renders.          */
#mc-rotate-msg {
  display: none;
  position: fixed;
  inset: 0;
  background: #050810;
  color: rgba(255, 255, 255, 0.80);
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  z-index: 500;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
}

#mc-rotate-msg .mc-rotate-icon {
  font-size: 3.2rem;
  opacity: 0.55;
  display: block;
}

@media screen and (orientation: portrait) and (pointer: coarse) {
  #mc-rotate-msg { display: flex; }
}

/* ─── MOBILE CONTROLS OVERLAY ────────────────────────────────────────────── */
#mc-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  opacity: 0.28;
}

/* Left panel anchored to bottom-left, right panel to bottom-right */
.mc-side {
  position: absolute;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#mc-left  { left:  18px; }
#mc-right { right: 18px; }


/* Touch-target wrap — larger than the visual base so it's easy to hit */
.mc-stick-wrap {
  width:  190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: none;
}

/* Visual joystick base ring */
.mc-stick-base {
  width:  160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}

/* Thumb nub — moves with the finger */
.mc-stick-nub {
  width:  44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.60);
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.04s linear;
}

/* Button row beneath each stick */
.mc-btns {
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.mc-btn {
  min-width: 76px;
  height: 76px;
  padding: 0 14px;
  border-radius: 19px;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.90);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: all;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: background 0.06s;
}

.mc-btn-wide { min-width: 108px; }

.mc-btn.mc-active {
  background: rgba(255, 255, 255, 0.24);
}

/* ─── MULTIPLAYER SCREENS ────────────────────────────────────────────────── */

/* Text inputs on the multi entry screen */
.mp-input {
  background:   rgba(0, 20, 40, 0.8);
  border:       1px solid var(--c-dim);
  color:        var(--c-white);
  font-family:  var(--font);
  font-size:    0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:      6px 10px;
  min-width:    160px;
  outline:      none;
  transition:   border-color 0.18s;
}

.mp-input:focus {
  border-color: var(--c-accent);
  box-shadow:   0 0 6px rgba(0, 212, 255, 0.28);
}

/* Room code input — wider chars */
.mp-code {
  letter-spacing: 0.45em;
  text-align:     center;
  min-width:      110px;
}

/* Status / error text under buttons */
.mp-status {
  min-height: 1.2em;
  font-size:  0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-accent2);
  text-align: center;
  padding: 4px 0;
}

/* ── Lobby player list ─────────────────────────────────────────────────────── */
.lobby-players {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  max-height: 220px;
  overflow-y: auto;
}

.lobby-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: rgba(0, 30, 55, 0.55);
  border: 1px solid var(--c-dim);
  letter-spacing: 0.12em;
}

.lobby-player-self {
  border-color: rgba(0, 212, 255, 0.45);
}

.lobby-player-name {
  font-size: 0.82rem;
  color: var(--c-white);
}

.lobby-player-tags {
  display: flex;
  gap: 6px;
}

.lobby-tag {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border: 1px solid;
}

.lobby-tag-host {
  color: var(--c-accent2);
  border-color: rgba(255, 106, 0, 0.45);
}

.lobby-tag-ready {
  color: #44ff88;
  border-color: rgba(68, 255, 136, 0.45);
}

/* Ready button toggled-on state */
.btn-ready-on {
  border-color: rgba(68, 255, 136, 0.7) !important;
  color: #44ff88 !important;
  text-shadow: 0 0 8px rgba(68, 255, 136, 0.5);
}

/* ─── PLAYER'S GUIDE SCREEN ─────────────────────────────────────────────────── */
#screen-guide {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 28px 0 80px;
}

.guide-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 620px;
  padding: 0 20px;
  text-align: center;
}

.guide-panel {
  width: 100%;
  text-align: left;
  background: rgba(0, 4, 12, 0.75);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 4px;
  padding: 18px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-section-label {
  font: bold 11px monospace;
  letter-spacing: 0.25em;
  color: var(--c-accent);
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.20);
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.guide-text {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0;
}

.guide-text strong {
  color: var(--c-accent);
  letter-spacing: 0.10em;
}

.guide-row {
  display: flex;
  gap: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
}

.guide-key {
  flex: 0 0 160px;
  color: var(--c-accent);
  opacity: 0.85;
}

.guide-desc {
  color: var(--c-text);
  flex: 1;
}

@media (max-width: 480px) {
  .guide-key { flex: 0 0 120px; }
}

/* ─── MOBILE HUD OVERRIDES ───────────────────────────────────────────────────
   Must be at end of file so source order beats the desktop rules above at
   equal specificity (both use single ID selectors).                          */
@media (pointer: coarse) {
  /* Damage / health indicator — shrink to 50 % and pin to top-right */
  #hud-damage-panel {
    top:    8px;
    right:  116px;
    bottom: auto;
    left:   auto;
    gap:    3px;
  }
  #hud-damage-canvas {
    width:  90px;
    height: 90px;
  }
  /* Radar — match damage indicator size exactly, flush to top-right corner */
  #hud-radar-panel {
    top:     8px;
    right:   8px;
    padding: 4px;
    gap:     2px;
  }
  #hud-radar-panel .hud-label { display: none; }
  #hud-radar-canvas {
    width:  90px;
    height: 90px;
  }

  /* Bearing indicator and rocket status — moved lower to clear touch controls */
  #hud-direction-panel { bottom: 10px; }
  #hud-rocket          { bottom: 110px; }
}