/* Sci-Fi theme — deep-space blue-black, neon cyan/magenta, scan lines,
   hex-shaped tower swatches, corner brackets, holo panels, pulse glows.
   All rules are scoped to [data-theme="scifi"] to prevent cross-theme leak. */

[data-theme="scifi"] {
  /* Surfaces */
  --bg: #070b14;
  --surface: #0f1626;
  --surface-2: #121b30;
  --surface-hover: #1a2640;
  --surface-pressed: #15324a;
  --overlay-bg: rgba(3, 6, 14, 0.85);

  /* Borders */
  --border: #213454;
  --border-strong: #3a5a90;
  --border-soft: #1a2740;
  --border-row: #15203a;

  /* Text */
  --text: #d8f0ff;
  --text-muted: #8bb8d8;
  --text-dim: #5b7fa0;
  --text-accent: #4fd9f5;
  --text-faint: #334e6b;

  /* Brand */
  --accent: #4fd9f5;
  --accent-2: #e44bdb;
  --accent-glow: rgba(79, 217, 245, 0.45);

  /* State */
  --success: #6ef0a6;
  --success-bg: #0e2a22;
  --success-border: #1f5a44;
  --warn: #ffc870;
  --danger: #ff6a8c;
  --danger-bg: #2a0e1d;
  --danger-border: #6a1a38;
  --locked: #ffa84a;

  /* Stat-strip tints */
  --stat-money: #4fd9f5;
  --stat-hp-bad: #ff6a8c;
  --stat-hp-mid: #ffc870;
  --stat-hp-ok:  #6ef0a6;
  --stat-wave: #e44bdb;
  --stat-remaining: #ffc870;
  --stat-score: #a8b6ff;
  --stat-best: #e44bdb;
  --stat-fps: #5b7fa0;
  --stat-fps-mid: #ffc870;
  --stat-fps-low: #ff6a8c;
  --stat-reward: #4fd9f5;

  /* Chevrons */
  --chevron-power: #ffc870;
  --chevron-speed: #4fd9f5;
  --chevron-empty: #1a2740;
  --chev-power-text: #ffc870;
  --chev-speed-text: #4fd9f5;
  --chev-sell-text: #ff6a8c;

  /* Leaderboard */
  --lb-title: #e44bdb;
  --lb-input: #4fd9f5;
  --lb-input-border: #3a5a90;
  --lb-caret: #e44bdb;
  --lb-submit-bg: #12263e;
  --lb-submit-border: #3a5a90;
  --lb-submit-hover: #1a3555;
  --lb-submit-text: #4fd9f5;
  --lb-new-bg: #2a1040;
  --lb-new-fg: #ffb4ff;
  --lb-header-border: #213454;
  --lb-empty: #334e6b;
  --scores-btn-fg: #e44bdb;
  --scores-btn-border: #4a2460;
  --scores-btn-hover-bg: #1e1230;
  --scores-btn-hover-border: #8a4aa0;
  --scores-btn-hover-fg: #ffa8ff;

  /* Pause */
  --pause-bg: rgba(6, 12, 24, 0.6);
  --pause-label-bg: rgba(15, 22, 40, 0.85);
  --pause-label-border: rgba(79, 217, 245, 0.55);
  --pause-label-fg: #4fd9f5;

  /* Game controls */
  --ctl-bg: rgba(10, 16, 30, 0.85);
  --ctl-bg-hover: rgba(20, 40, 70, 0.95);
  --ctl-fg: #8bb8d8;
  --ctl-fg-hover: #4fd9f5;
  --ctl-pause-on-fg: #6ef0a6;
  --ctl-pause-on-bg: #0e2a22;
  --ctl-pause-on-border: #1f5a44;

  /* Info badge */
  --info-bg: rgba(10, 20, 40, 0.9);
  --info-fg: #8bb8d8;
  --info-border: #3a5a90;
  --info-hover-bg: #1a3555;
  --info-hover-fg: #4fd9f5;
  --info-hover-border: #4fd9f5;

  /* Tower selected */
  --tower-selected-outline: #4fd9f5;
  --tower-selected-bg: rgba(79, 217, 245, 0.12);

  /* Titles */
  --title-gameover: #ff6a8c;
  --title-newscore: #4fd9f5;

  /* Radii */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  /* Fonts */
  --font-ui: 'Rajdhani', 'Share Tech Mono', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-serif: 'Orbitron', 'Rajdhani', system-ui, sans-serif;

  --ls-wide: 0.5px;
  --ls-wider: 2px;
  --ls-widest: 4px;
}

/* ---------- Global background grid ---------- */

[data-theme="scifi"] body {
  background:
    linear-gradient(rgba(79, 217, 245, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(79, 217, 245, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 50% -10%, rgba(79, 217, 245, 0.08), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(228, 75, 219, 0.06), transparent 60%),
    var(--bg);
}

/* ---------- Stats strip ---------- */

[data-theme="scifi"] #top-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 22, 40, 0.7), rgba(8, 14, 26, 0.7));
  border: 1px solid rgba(79, 217, 245, 0.25);
  border-radius: var(--r-md);
  box-shadow:
    0 0 18px rgba(79, 217, 245, 0.08),
    inset 0 1px 0 rgba(79, 217, 245, 0.12);
}
[data-theme="scifi"] #top-bar::before,
[data-theme="scifi"] #top-bar::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
[data-theme="scifi"] #top-bar::before {
  top: -1px; left: -1px;
  border-top-width: 2px; border-left-width: 2px;
}
[data-theme="scifi"] #top-bar::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px; border-right-width: 2px;
}

[data-theme="scifi"] #stats .stat .lbl {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  color: var(--text-dim);
}
[data-theme="scifi"] #stats .stat .val {
  text-shadow: 0 0 6px currentColor, 0 0 12px rgba(79, 217, 245, 0.3);
}

/* ---------- Right panel (tower picker + details) ---------- */

[data-theme="scifi"] #picker,
[data-theme="scifi"] #tower-panel {
  background: linear-gradient(135deg, rgba(15, 22, 40, 0.9), rgba(8, 14, 26, 0.9));
  border: 1px solid rgba(79, 217, 245, 0.3);
  box-shadow:
    0 0 20px rgba(79, 217, 245, 0.05),
    inset 0 1px 0 rgba(79, 217, 245, 0.12),
    inset 0 -1px 0 rgba(228, 75, 219, 0.06);
  overflow: hidden;
}

[data-theme="scifi"] #picker {
  overflow-y: auto;
}

[data-theme="scifi"] #picker::after,
[data-theme="scifi"] #tower-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(79, 217, 245, 0.025) 2px,
    rgba(79, 217, 245, 0.025) 4px
  );
  pointer-events: none;
}

[data-theme="scifi"] #picker .category-header {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-widest);
  color: var(--accent);
  text-shadow: 0 0 6px rgba(79, 217, 245, 0.35);
  border-bottom: 1px solid rgba(79, 217, 245, 0.18);
}

[data-theme="scifi"] .tower-btn {
  background: rgba(18, 27, 48, 0.75);
  border: 1px solid rgba(79, 217, 245, 0.18);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
[data-theme="scifi"] .tower-btn:hover {
  background: rgba(26, 38, 64, 0.85);
  border-color: rgba(79, 217, 245, 0.45);
  box-shadow: 0 0 10px rgba(79, 217, 245, 0.2);
}
[data-theme="scifi"] .tower-btn.selected {
  outline: none;
  background: rgba(79, 217, 245, 0.12);
  border-color: var(--accent);
  box-shadow:
    0 0 12px rgba(79, 217, 245, 0.45),
    inset 0 0 8px rgba(79, 217, 245, 0.12);
}
[data-theme="scifi"] .tower-btn .swatch {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border-radius: 0;
  width: 12px;
  height: 12px;
}
[data-theme="scifi"] .tower-btn .cost {
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
[data-theme="scifi"] .tower-btn .cost::before {
  content: 'CR ';
  color: var(--text-dim);
  font-size: 10px;
}

/* ---------- Tower detail panel ---------- */

[data-theme="scifi"] #tower-panel .tp-header {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(79, 217, 245, 0.35);
}
[data-theme="scifi"] #tower-panel .tp-btn {
  background: rgba(18, 27, 48, 0.75);
  border: 1px solid rgba(79, 217, 245, 0.25);
}
[data-theme="scifi"] #tower-panel .tp-btn:hover:not(:disabled) {
  background: rgba(79, 217, 245, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(79, 217, 245, 0.25);
}

/* ---------- Settings / leaderboard panels ---------- */

[data-theme="scifi"] #settings-panel,
[data-theme="scifi"] #lb-panel {
  background: linear-gradient(135deg, rgba(15, 22, 40, 0.96), rgba(8, 14, 26, 0.96));
  border: 1px solid rgba(79, 217, 245, 0.35);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(79, 217, 245, 0.12),
    inset 0 1px 0 rgba(79, 217, 245, 0.15);
}
[data-theme="scifi"] #settings-panel::before,
[data-theme="scifi"] #settings-panel::after,
[data-theme="scifi"] #lb-panel::before,
[data-theme="scifi"] #lb-panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
[data-theme="scifi"] #settings-panel::before,
[data-theme="scifi"] #lb-panel::before {
  top: -1px; left: -1px;
  border-top-width: 2px; border-left-width: 2px;
}
[data-theme="scifi"] #settings-panel::after,
[data-theme="scifi"] #lb-panel::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px; border-right-width: 2px;
}
[data-theme="scifi"] #settings-panel h2,
[data-theme="scifi"] #lb-panel h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  text-shadow: 0 0 8px rgba(79, 217, 245, 0.4);
}

[data-theme="scifi"] .settings-section h3 {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  color: var(--accent);
}

/* ---------- Theme picker ---------- */

[data-theme="scifi"] #theme-picker .theme-card {
  background: rgba(18, 27, 48, 0.75);
  border: 1px solid rgba(79, 217, 245, 0.2);
}
[data-theme="scifi"] #theme-picker .theme-card:hover {
  background: rgba(26, 38, 64, 0.85);
  border-color: rgba(79, 217, 245, 0.45);
}
[data-theme="scifi"] #theme-picker .theme-card[aria-pressed="true"] {
  background: rgba(79, 217, 245, 0.12);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 12px rgba(79, 217, 245, 0.35);
}
[data-theme="scifi"] #theme-picker .theme-name {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ---------- Top-bar controls ---------- */

[data-theme="scifi"] #top-controls .ctl-btn {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border-color: rgba(79, 217, 245, 0.3);
}
[data-theme="scifi"] #top-controls .ctl-btn:hover {
  box-shadow: 0 0 10px rgba(79, 217, 245, 0.25);
  border-color: var(--accent);
}

/* ---------- Pause overlay ---------- */

[data-theme="scifi"] #pause-overlay .label {
  font-family: var(--font-display);
  text-shadow:
    0 0 8px rgba(79, 217, 245, 0.6),
    0 0 18px rgba(79, 217, 245, 0.35);
  box-shadow:
    0 0 20px rgba(79, 217, 245, 0.25),
    inset 0 0 10px rgba(79, 217, 245, 0.15);
}

/* ---------- Scrollbar ---------- */

[data-theme="scifi"] *::-webkit-scrollbar { width: 6px; }
[data-theme="scifi"] *::-webkit-scrollbar-track {
  background: rgba(15, 22, 40, 0.6);
  border-left: 1px solid var(--border);
}
[data-theme="scifi"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 0;
}
[data-theme="scifi"] *::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 8px var(--accent);
}

/* ---------- Animations ---------- */

@keyframes scifi-pulse-neon {
  0%, 100% { box-shadow: 0 0 8px rgba(79, 217, 245, 0.25); }
  50%      { box-shadow: 0 0 18px rgba(79, 217, 245, 0.55); }
}

[data-theme="scifi"] .tower-btn.selected {
  animation: scifi-pulse-neon 2.4s ease-in-out infinite;
}