/* ═══════════════════════════════════════════════════════════════════
   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: Title.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('../Title.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-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 {
  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-primary:hover {
  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 {
  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: 320px;
}

.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 {
  -webkit-appearance: none;
  appearance: none;
  width: 148px;
  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 {
  -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 {
  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 {
  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-select-btns .count-btn {
  width: auto;
  padding: 0 14px;
}

.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;
}

.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 heat panel ────────────────────── */
#game-overlay > *:not(#hud-heat-panel) {
  transition: opacity 0.35s ease;
}
#game-overlay.hud-shutdown > *:not(#hud-heat-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; }

/* ── 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;
}

/* ─── 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: rgba(0, 6, 14, 0.6);
  padding: 4px;
  line-height: 0;
}

#hud-damage-canvas {
  display: block;
  width: 120px;
  height: 120px;
  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: rgba(0, 6, 14, 0.55);
  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: rgba(0, 6, 14, 0.55);
  padding: 5px 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#hud-radar-canvas {
  display: block;
  width: 140px;
  height: 140px;
  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: 118px;
  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 7px 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;
}

/* Heat level indicator panel ──────────────────────────────────────────────── */
#hud-heat-panel {
  position: absolute;
  bottom: 36px;
  right: 20px;
  width: 140px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  background: rgba(0, 6, 14, 0.6);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.hud-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.2);
  overflow: hidden;
}

#hud-heat-fill {
  height: 100%;
  width: 0%;
  background: #00cc44;
  transition: width 0.12s linear, background 0.25s ease;
}

#hud-heat-text {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--c-text);
  text-align: right;
}

/* Warning state: pulsing red border, larger urgent text */
#hud-heat-panel.heat-warning {
  border-color: rgba(255, 34, 0, 0.9);
  animation: heat-warn-pulse 0.35s ease-in-out infinite alternate;
}
#hud-heat-panel.heat-warning #hud-heat-text {
  font-size: 0.72rem;
  color: #ff3300;
  letter-spacing: 0.05em;
}

/* Shutdown state: dark red solid border */
#hud-heat-panel.heat-shutdown {
  border-color: rgba(160, 0, 0, 0.9);
}
#hud-heat-panel.heat-shutdown #hud-heat-text {
  color: #cc2200;
  letter-spacing: 0.3em;
}

/* Override state: amber border to signal continued risk */
#hud-heat-panel.heat-override {
  border-color: rgba(255, 140, 0, 0.7);
}
#hud-heat-panel.heat-override #hud-heat-text {
  color: #ff9900;
}

@keyframes heat-warn-pulse {
  from { box-shadow: 0 0 4px  rgba(255, 40, 0, 0.4); }
  to   { box-shadow: 0 0 16px rgba(255, 40, 0, 0.85); }
}

/* ─── RESULT SCREEN ──────────────────────────────────────────────────────── */
.result-content {
  position: relative;
  z-index: 1;
  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);
}

/* ─── 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;
  /* "Very faint" — controls ghost over the action without obscuring it */
  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);
}