/* ==========================================================================
   THEME CONFIGURATION — Space Shooter Cockpit Command Interface
   Advanced military spacecraft UI — clean, functional, cyberpunk-adjacent
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Core Backgrounds ── */
  --bg-void: #05070a;
  --bg-deep: #080c12;
  --bg-panel: rgba(8, 12, 20, 0.72);
  --bg-panel-solid: #0a0f18;
  --bg-panel-hover: rgba(14, 22, 36, 0.88);
  --bg-input: rgba(0, 40, 55, 0.2);
  --bg-overlay: rgba(5, 7, 10, 0.85);

  /* ── Accent Colors ── */
  --cyan: #2dd4dc;
  --cyan-bright: #5eedf5;
  --cyan-mid: #1a8f96;
  --cyan-dim: #0e3538;
  --cyan-ghost: rgba(45, 212, 220, 0.05);
  --cyan-soft: rgba(45, 212, 220, 0.12);
  --cyan-glow: rgba(45, 212, 220, 0.25);

  --amber: #e8991a;
  --amber-dim: #4a3008;
  --amber-soft: rgba(232, 153, 26, 0.12);

  --red: #e8364b;
  --red-dim: #4a0e18;
  --red-soft: rgba(232, 54, 75, 0.12);

  --green: #2dd47a;
  --green-dim: #0e3528;
  --green-soft: rgba(45, 212, 122, 0.12);

  --purple: #a78bfa;

  /* ── Typography ── */
  --text-bright: #e2edf2;
  --text-primary: #8fb8c4;
  --text-secondary: #4d7a87;
  --text-muted: #2d4f59;
  --text-dim: #1a333c;

  /* ── Fonts ── */
  --font-heading: 'Rajdhani', 'Share Tech Mono', 'Courier New', sans-serif;
  --font-body: 'JetBrains Mono', 'Roboto Mono', 'Share Tech Mono', monospace;
  --font-mono: 'Share Tech Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* ── Borders ── */
  --border-panel: 1px solid rgba(45, 212, 220, 0.18);
  --border-active: 1px solid var(--cyan);
  --border-dim: 1px solid rgba(45, 212, 220, 0.08);
  --border-separator: 1px solid rgba(45, 212, 220, 0.1);

  /* ── Radii ── */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 20px;

  /* ── Timing ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 100ms var(--ease-out);
  --t-normal: 200ms var(--ease-smooth);

  /* ── Glow Effects ── */
  --glow-cyan-sm: 0 0 6px rgba(45, 212, 220, 0.3);
  --glow-cyan-md: 0 0 12px rgba(45, 212, 220, 0.25), 0 0 4px rgba(45, 212, 220, 0.4);
  --glow-cyan-lg: 0 0 20px rgba(45, 212, 220, 0.2), 0 0 6px rgba(45, 212, 220, 0.35);
  --glow-red-sm: 0 0 6px rgba(232, 54, 75, 0.4);
  --glow-amber-sm: 0 0 6px rgba(232, 153, 26, 0.3);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ── */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-void);
}

/* ── Canvases ── */
#starfield-canvas,
#game-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

#starfield-canvas { z-index: 1; }

#game-canvas {
  z-index: 5;
  display: none;
  pointer-events: none;
}
#game-canvas.active {
  display: block;
  pointer-events: auto;
}

/* ── CRT Scanlines + Sci-Fi Vignette ── */
.scanlines-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 90;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(0, 0, 0, 0.05) 4px
    ),
    radial-gradient(ellipse at center, transparent 35%, rgba(5, 7, 10, 0.4) 65%, rgba(2, 4, 7, 0.88) 100%);
  opacity: 0.92;
}

/* ── UI Root ── */
#ui-root {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 20;
  pointer-events: none;
}

/* ── Screen Container (kept for game state transitions) ── */
.screen-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity var(--t-normal), transform var(--t-normal), visibility var(--t-normal);
}
.screen-container.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.screen-container.screen-game {
  pointer-events: none;
}

/* V2 mobile shell: tall panels scroll instead of clipping on short viewports */
@media (max-width: 768px), (max-height: 620px) {
  .screen-container {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  .screen-container.screen-game {
    justify-content: center;
    overflow: visible;
    padding: 0;
  }
}