/* ========================================================================
   Cyber-Combat Interface — design tokens
   Source: docs/design/stitch/DESIGN_SYSTEM.md
   ======================================================================== */
:root {
  /* surfaces */
  --bg:               #0a0a12;
  --surface:          #131319;
  --surface-low:      #1b1b22;
  --surface:          #1f1f26;
  --surface-high:     #2a2930;
  --surface-highest:  #35343b;
  --surface-lowest:   #0e0e14;

  /* neon palette */
  --primary:          #ff00ff;  /* neon pink — critical actions */
  --primary-soft:     #ffabf3;
  --secondary:        #00f1fd;  /* electric cyan — navigation/info */
  --secondary-soft:   #6ff6ff;
  --tertiary:         #9fd800;  /* lime — energy/ready */
  --tertiary-soft:    #b6f700;
  --on-surface:       #e4e1ea;
  --on-surface-dim:   #a4899d;
  --outline:          #564052;

  /* spacing (4px base) */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 48px;
  --hud-margin: 64px;

  /* radii */
  --r-sm:  0.125rem;
  --r:     0.25rem;
  --r-md:  0.375rem;
  --r-lg:  0.5rem;
  --r-xl:  0.75rem;

  /* fonts */
  --font: 'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;

  /* effects */
  --bloom-pink:    0 0 12px rgba(255, 0, 255, 0.55);
  --bloom-cyan:    0 0 12px rgba(0, 241, 253, 0.55);
  --bloom-lime:    0 0 12px rgba(159, 216, 0, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* Subtle scanline overlay across all menus (Level 0 floor) */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 50%),
    linear-gradient(90deg, rgba(255,0,255,0.04), rgba(0,241,253,0.03));
  background-size: 100% 4px, 3px 100%;
}

.hidden { display: none !important; }

/* ========================================================================
   Screen container — every menu lives in a flex column inside one of these
   ======================================================================== */
.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,0,255,0.06), transparent 60%),
    var(--bg);
  z-index: 1;
}

/* HUD bar across the top of every menu — operator card on the left, status on the right */
.menu-topbar {
  position: absolute;
  top: var(--md);
  left: var(--md);
  right: var(--md);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 5;
}

.operator-card {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--sm) var(--md);
  background: rgba(31,31,38,0.6);
  border-left: 2px solid var(--secondary);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-dim);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.operator-card .op-id { color: var(--secondary); font-weight: 700; }
.operator-card .op-status { color: var(--tertiary); }

.status-card {
  padding: var(--sm) var(--md);
  background: rgba(31,31,38,0.6);
  border: 1px solid var(--outline);
  font-family: 'Space Grotesk', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary);
  text-align: right;
  line-height: 1.6;
  backdrop-filter: blur(8px);
}

/* ========================================================================
   Main Menu
   ======================================================================== */
.menu-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--lg);
  position: relative;
}

/* Faint stick-figure silhouette behind the title */
.menu-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,0,255,0.05), transparent 50%);
  pointer-events: none;
}

.title-stack {
  text-align: center;
  line-height: 0.95;
}
.title-line1 { color: var(--secondary); text-shadow: var(--bloom-cyan); }
.title-line2 { color: var(--primary);   text-shadow: var(--bloom-pink); }
.title-stack h1 {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-style: italic;
}
.title-stack .underline {
  display: block;
  height: 2px;
  width: 70%;
  margin: var(--md) auto 0;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}

/* "INTERDIMENSIONAL COMBAT" subtitle — subtle neon flicker.
   The data-text mirror sits behind it so we can offset a faint cyan/pink
   ghost without polluting the font shadow. */
.title-subtitle {
  position: relative;
  margin-top: var(--md);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-align: center;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
  animation: subtitleFlicker 5.6s steps(1) infinite;
  /* The text itself fades imperceptibly with a slow pulse */
}
.title-subtitle::before,
.title-subtitle::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.title-subtitle::before { color: var(--primary); }
.title-subtitle::after  { color: var(--tertiary); }
.title-subtitle::before { animation: subtitleGhostPink 5.6s steps(1) infinite; }
.title-subtitle::after  { animation: subtitleGhostLime 5.6s steps(1) infinite; }

@keyframes subtitleFlicker {
  0%, 92%, 96%, 100%      { opacity: 1; }
  93%, 95%                { opacity: 0.55; }    /* one quick blink */
  94%                     { opacity: 0.85; }
}
@keyframes subtitleGhostPink {
  0%, 92%, 100%           { opacity: 0; transform: translate(0, 0); }
  93%                     { opacity: 0.6; transform: translate(2px, 0); }
  94%                     { opacity: 0.0; transform: translate(0, 0); }
  95%                     { opacity: 0.6; transform: translate(-2px, 0); }
  96%                     { opacity: 0; }
}
@keyframes subtitleGhostLime {
  0%, 60%, 100%           { opacity: 0; }
  60.5%                   { opacity: 0.4; transform: translate(1px, 0); }
  61%                     { opacity: 0; transform: translate(0, 0); }
}

/* Playful one-liner under the subtitle */
.title-undertitle {
  margin-top: var(--xs);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--on-surface-dim);
  font-style: italic;
  opacity: 0.85;
}

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--md);
  text-align: center;
  margin-top: var(--xl);
}

.menu-item {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--on-surface);
  font-family: var(--font);
  cursor: pointer;
  padding: var(--sm) var(--md);
  transition: color 120ms, text-shadow 120ms, transform 120ms;
}
.menu-item:hover,
.menu-item:focus {
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
  outline: none;
}
.menu-item.primary {
  color: var(--primary);
  text-shadow: var(--bloom-pink);
}
.menu-item.primary:hover {
  color: var(--primary-soft);
}

/* Bottom action bar across menus.
   pointer-events:none on the container so clicks that miss a button fall
   through to the screen content underneath; the buttons opt back in. */
.menu-bottombar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid var(--outline);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  z-index: 5;
  pointer-events: none;
}
.menu-bottombar .btn-bar {
  background: none;
  border: none;
  color: var(--on-surface-dim);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--xs) var(--md);
  transition: color 120ms;
  pointer-events: auto;
}
.menu-bottombar .btn-bar:hover { color: var(--secondary); }

/* ========================================================================
   Character Select — 3-column grid of 11 fighters + big preview pane
   ======================================================================== */
.char-screen-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--xl);
  padding: 96px var(--xl) 88px;
  align-items: stretch;
  overflow-y: auto;
}

.char-pane h2,
.stage-pane h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--lg);
  color: var(--on-surface);
}
.char-pane h2::before,
.stage-pane h2::before {
  content: '|  ';
  color: var(--primary);
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--md);
}

.char-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
  /* chamfered corner top-right */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sm);
}
.char-card:hover {
  border-color: var(--secondary);
}
.char-card.selected {
  border-color: var(--primary);
  box-shadow: var(--bloom-pink);
}
.char-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 255, 0.08);
  pointer-events: none;
  clip-path: inherit;
}

.char-preview {
  width: 60%;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
.char-card .char-name {
  margin-top: var(--xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.char-card .char-role {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--on-surface-dim);
  text-transform: uppercase;
}

/* Right-side preview pane */
.char-preview-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--xl);
}

.preview-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
  text-transform: uppercase;
  margin-bottom: var(--md);
  border: 1px solid var(--secondary);
  padding: 4px 12px;
  background: rgba(0,241,253,0.06);
}

.preview-stage {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 50% 60%, rgba(0,241,253,0.18), transparent 65%), var(--surface-lowest);
  border: 1px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-stage canvas {
  filter: drop-shadow(0 0 18px rgba(0,241,253,0.5));
}

.stat-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  gap: var(--md);
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin-top: var(--md);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-dim);
}
.stat-row .stat-bar {
  position: relative;
  height: 6px;
  background: var(--surface);
}
.stat-row .stat-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--secondary), var(--secondary-soft));
  box-shadow: var(--bloom-cyan);
}
.stat-row .stat-val { color: var(--secondary); font-weight: 700; }

.char-name-big {
  margin-top: var(--lg);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.char-class {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--on-surface-dim);
  text-transform: uppercase;
  margin-bottom: var(--lg);
}

/* Slanted "lock-in" CTA */
.btn-lockin {
  background: var(--primary);
  color: #1a1a1a;
  border: none;
  padding: 14px 48px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font);
  cursor: pointer;
  /* slanted parallelogram */
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: var(--bloom-pink);
  transition: filter 150ms, transform 80ms;
}
.btn-lockin:hover { filter: brightness(1.15); }
.btn-lockin:active { transform: translateY(1px); }

.player-ready-row {
  display: flex;
  gap: var(--sm);
  margin-top: var(--lg);
}
.player-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border: 1px solid var(--outline);
  color: var(--on-surface-dim);
  text-transform: uppercase;
}
.player-chip.ready {
  border-color: var(--tertiary);
  color: var(--tertiary);
  text-shadow: var(--bloom-lime);
}

/* ========================================================================
   Stage Select — 3-up cards (tile shows the same we have today, but styled)
   ======================================================================== */
.stage-screen-body {
  flex: 1;
  padding: 96px var(--xl) 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.stage-timer {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
  text-transform: uppercase;
  margin-bottom: var(--xs);
}
.stage-timer-num {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-surface);
  line-height: 1;
}
.stage-timer-bar {
  height: 2px;
  width: 220px;
  background: var(--secondary);
  margin: var(--sm) 0 var(--xl);
  box-shadow: var(--bloom-cyan);
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--md);
  width: 100%;
  max-width: 1200px;
}

.stage-card {
  position: relative;
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  padding: var(--md);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
  display: flex;
  flex-direction: column;
}
.stage-card:hover { border-color: var(--secondary); }
.stage-card.selected {
  border-color: var(--secondary);
  box-shadow: var(--bloom-cyan);
  background: linear-gradient(180deg, var(--surface-lowest), rgba(0,241,253,0.06));
}

.stage-vote {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}
.stage-card.selected .stage-vote {
  background: var(--secondary);
  box-shadow: var(--bloom-cyan);
}

.stage-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  margin-bottom: var(--md);
  overflow: hidden;
}
.stage-preview canvas { width: 100%; height: 100%; display: block; }

.stage-card .stage-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--xs);
}
.stage-card.selected .stage-name { color: var(--secondary); text-shadow: var(--bloom-cyan); }

.stage-card .stage-desc {
  font-size: 11px;
  color: var(--on-surface-dim);
  line-height: 1.5;
  margin-bottom: var(--md);
}

.btn-vote {
  background: none;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--font);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  width: 100%;
}
.stage-card.selected .btn-vote {
  background: var(--secondary);
  color: #1a1a1a;
  border-color: var(--secondary);
  box-shadow: var(--bloom-cyan);
}

.stage-mode-row {
  display: flex;
  gap: var(--md);
  margin-top: var(--xl);
  align-items: center;
}
.stage-mode-row .mode-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-dim);
}

.btn-mode {
  background: none;
  border: 1px solid var(--outline);
  color: var(--on-surface);
  font-family: var(--font);
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, box-shadow 120ms;
}
.btn-mode:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}
.btn-mode.active {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--bloom-pink);
}

.btn-fight {
  background: var(--primary);
  color: #1a1a1a;
  border: none;
  padding: 14px 64px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font);
  cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: var(--bloom-pink);
  margin-top: var(--lg);
}
.btn-fight:hover { filter: brightness(1.15); }
.btn-fight:disabled {
  background: var(--outline);
  color: var(--on-surface-dim);
  box-shadow: none;
  cursor: not-allowed;
}

/* Online room sidebar (slides in over stage select when CREATE/JOIN clicked) */
.online-panel {
  position: fixed;
  top: 0; right: 0;
  width: 380px;
  height: 100vh;
  background: rgba(19,19,25,0.95);
  border-left: 1px solid var(--secondary);
  padding: 96px var(--lg) var(--lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--md);
  backdrop-filter: blur(20px);
  transform: translateX(100%);
  transition: transform 220ms ease-out;
}
.online-panel.open { transform: translateX(0); }
.online-panel h3 {
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
}
.online-panel input[type="text"] {
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  color: var(--on-surface);
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.04em;
  outline: none;
}
.online-panel input[type="text"]:focus {
  border-color: var(--secondary);
  box-shadow: var(--bloom-cyan);
}
.online-panel .btn-row { display: flex; gap: var(--sm); }

/* ========================================================================
   Generic modal overlay (Audio, Settings, Pause, Match End).
   Uses the design-system glassmorphism rules: 20px blur + 10% white tint.
   ======================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,18,0.55);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-panel {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--secondary);
  box-shadow: var(--bloom-cyan);
  padding: var(--xl);
  min-width: 420px;
  max-width: 560px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  gap: var(--md);
  /* chamfered top-right + bottom-left corners */
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.modal-panel h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
}

.form-group { display: flex; flex-direction: column; gap: var(--xs); }
.form-group label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--on-surface-dim);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.form-val { color: var(--secondary); font-weight: 700; }

/* Sliders */
.modal-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-highest);
  outline: none;
  cursor: pointer;
}
.modal-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--secondary);
  border: 1px solid var(--bg);
  box-shadow: var(--bloom-cyan);
  cursor: pointer;
}
.modal-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--secondary);
  border: 1px solid var(--bg);
  box-shadow: var(--bloom-cyan);
  cursor: pointer;
}

/* Diamond checkbox per design-system spec */
.check-row {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: var(--md);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--secondary);
  background: transparent;
  cursor: pointer;
  position: relative;
  transform: rotate(45deg);
  margin: 4px;
}
.check-row input[type="checkbox"]:checked {
  background: var(--tertiary);
  border-color: var(--tertiary);
  box-shadow: var(--bloom-lime);
}

/* Pause panel uses pink as a "danger/state" hint instead of cyan */
.pause-panel { border-color: var(--primary); box-shadow: var(--bloom-pink); }
.pause-panel h2 { color: var(--primary); text-shadow: var(--bloom-pink); }
.pause-sub {
  font-size: 12px;
  color: var(--on-surface-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--md);
}

/* Match end panel — winner announcement */
.match-end-panel {
  border-color: var(--tertiary);
  box-shadow: var(--bloom-lime);
  text-align: center;
  align-items: center;
}
.match-end-panel h2 {
  font-size: 56px;
  color: var(--tertiary);
  text-shadow: var(--bloom-lime);
  margin: 0;
}
.match-end-eyebrow {
  font-size: 12px;
  color: var(--on-surface-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.match-end-name {
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--on-surface);
  text-transform: uppercase;
  margin-top: -8px;
}
.match-end-stats {
  font-size: 12px;
  color: var(--on-surface-dim);
  letter-spacing: 0.1em;
  line-height: 1.7;
}

/* ========================================================================
   Controls overlay (kept; restyled)
   ======================================================================== */
.controls-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.controls-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--outline);
  padding: var(--xl);
  max-width: 700px;
  width: 90vw;
  text-align: center;
}
.controls-panel h2 {
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--secondary);
  text-shadow: var(--bloom-cyan);
  margin-bottom: var(--lg);
}
.controls-columns {
  display: flex;
  gap: var(--xl);
  text-align: left;
  margin-bottom: var(--lg);
}
.controls-col { flex: 1; }
.controls-col h3 {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--on-surface-dim);
  text-transform: uppercase;
  margin-bottom: var(--md);
  border-bottom: 1px solid var(--outline);
  padding-bottom: var(--xs);
}
.control-row {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: 4px 0;
  font-size: 13px;
  color: var(--on-surface);
}
.control-row .key {
  background: var(--surface);
  border: 1px solid var(--outline);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary);
  min-width: 80px;
  text-align: center;
  font-family: 'Space Grotesk', monospace;
}
.controls-tip {
  font-size: 12px;
  color: var(--on-surface-dim);
  margin-bottom: var(--md);
  font-style: italic;
}
.btn-close {
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--on-surface);
  font-family: var(--font);
  padding: 8px 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-close:hover { border-color: var(--secondary); color: var(--secondary); }

/* ========================================================================
   GAME SCREEN (unchanged structure)
   ======================================================================== */
#gameScreen {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
}

#gameScreen canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bgCanvas { z-index: 1; }
#gameCanvas { z-index: 2; }
#fxCanvas { z-index: 3; pointer-events: none; }

#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

/* HUD Elements */
.hud-bar {
  position: absolute;
  top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-bar.p0 { left: 20px; }
.hud-bar.p1 { right: 20px; flex-direction: row-reverse; }
.hud-bar.p2 { left: 20px; top: 65px; }
.hud-bar.p3 { right: 20px; top: 65px; flex-direction: row-reverse; }

.hud-name {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 60px;
}

.hud-hp-outer {
  width: 200px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}

.hud-hp-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-soft));
  border-radius: 7px;
  transition: width 0.15s;
}

.hud-energy-outer {
  width: 120px;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.hud-energy-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--tertiary));
  border-radius: 4px;
  transition: width 0.15s;
}

.hud-stocks {
  font-size: 0.7rem;
  color: var(--on-surface-dim);
}

/* Kill feed / WINS! announcement — display-lg with neon glitch shadow */
#killFeed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.kill-message {
  font-family: var(--font);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
  /* glitch shadow: 2px offset cyan + 2px offset pink */
  text-shadow:
     2px 0 0 var(--secondary),
    -2px 0 0 var(--primary),
     0 0 30px rgba(255,255,255,0.4);
  animation: killPop 1.5s ease-out forwards;
}

@keyframes killPop {
  0%   { transform: scale(0.5); opacity: 0; }
  15%  { transform: scale(1.3); opacity: 1; }
  30%  { transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-20px); }
}

/* Round-start countdown — same neon glitch style */
.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--on-surface);
  text-shadow:
     2px 0 0 var(--secondary),
    -2px 0 0 var(--primary),
     0 0 60px rgba(255,255,255,0.4);
  z-index: 10;
  animation: countPulse 1s ease-out;
}

@keyframes countPulse {
  0%   { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}