/* =========================================================
   Mario Battle — Pixel-Art Design System
   Chunky CRT/TV bezels, NES palette, pixel fonts.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap');

/* =====================================================
   TOKENS
   ===================================================== */
:root {
  /* Sky / overworld */
  --sky:           #5C94FC;
  --sky-deep:      #2038EC;

  /* Bricks & ground */
  --brick:         #B83400;
  --brick-dark:    #6A1900;
  --ground:        #E07000;
  --ground-light:  #FBA068;

  /* TV chassis */
  --tv-shell:      #C7B89A;
  --tv-shell-hl:   #E6D9BC;
  --tv-shell-sh:   #8C7E61;
  --tv-shell-deep: #5A4F3C;

  /* Console panels */
  --console:       #2A2A2A;
  --console-hl:    #4A4A4A;
  --console-sh:    #1A1A1A;

  /* Primary colors */
  --red:           #E52521;
  --red-dark:      #A11212;
  --green:         #00A800;
  --green-dark:    #006800;
  --green-light:   #80D010;
  --yellow:        #FBD000;
  --yellow-dark:   #C09800;
  --yellow-light:  #FFE680;
  --blue:          #5C94FC;

  /* Ink */
  --ink:           #1A1A1A;
  --ink-soft:      #4A4A4A;

  /* Fonts */
  --font-pixel:    'Press Start 2P', monospace;
  --font-body:     'Silkscreen', 'Press Start 2P', monospace;
  --font-mono:     'VT323', monospace;

  /* Grid */
  --px: 4px;
}

/* =====================================================
   BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
  min-height: 100vh;
}

img, canvas {
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

button { cursor: pointer; }

/* =====================================================
   BUILD HASH
   ===================================================== */
.build-hash {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--brick-dark);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* =====================================================
   HORIZON FOOTER (brick stripe + ground)
   ===================================================== */
body::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 100px;
  height: 8px;
  background: var(--brick);
  box-shadow: inset 0 4px 0 var(--brick-dark);
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 100px;
  background: var(--ground);
  border-top: 4px solid var(--ink);
  box-shadow: inset 0 4px 0 var(--ground-light);
  z-index: 0;
}

/* =====================================================
   FRAME / LAYOUT
   ===================================================== */
.frame {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 180px;
  position: relative;
  z-index: 1;
}

/* =====================================================
   PIXEL NAV
   ===================================================== */
.pixel-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 32px 0 40px;
  flex-wrap: wrap;
}

.pixel-nav button {
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 10px 16px;
  border: 4px solid var(--ink);
  background: var(--tv-shell);
  color: var(--ink);
  letter-spacing: .05em;
  box-shadow: inset 3px 3px 0 var(--tv-shell-hl), inset -3px -3px 0 var(--tv-shell-sh);
  transition: transform 120ms steps(4, end), box-shadow 120ms steps(4, end);
}
.pixel-nav button:hover {
  transform: translate(2px, 2px);
  box-shadow: inset 3px 3px 0 var(--tv-shell-hl), inset -3px -3px 0 var(--tv-shell-sh), 2px 2px 0 var(--ink);
}
.pixel-nav button.active {
  background: var(--yellow);
  box-shadow: inset 3px 3px 0 var(--yellow-light), inset -3px -3px 0 var(--yellow-dark), 4px 4px 0 var(--ink);
}

/* =====================================================
   PIXEL BUTTON
   ===================================================== */
.pixel-btn {
  font-family: var(--font-pixel);
  font-size: 11px;
  padding: 14px 22px;
  border: 4px solid var(--ink);
  letter-spacing: .05em;
  transition: transform 120ms steps(4, end), box-shadow 120ms steps(4, end);
}
.pixel-btn:hover {
  transform: translate(2px, 2px);
}
.pixel-btn:active {
  transform: translate(4px, 4px);
}

/* Tones */
.pixel-btn.green {
  background: var(--green);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  box-shadow: inset 4px 4px 0 var(--green-light), inset -4px -4px 0 var(--green-dark), 4px 4px 0 var(--ink);
}
.pixel-btn.green:hover { box-shadow: inset 4px 4px 0 var(--green-light), inset -4px -4px 0 var(--green-dark), 2px 2px 0 var(--ink); }
.pixel-btn.green:active { box-shadow: inset 4px 4px 0 var(--green-light), inset -4px -4px 0 var(--green-dark); }

.pixel-btn.yellow {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset 4px 4px 0 var(--yellow-light), inset -4px -4px 0 var(--yellow-dark), 4px 4px 0 var(--ink);
}
.pixel-btn.yellow:hover { box-shadow: inset 4px 4px 0 var(--yellow-light), inset -4px -4px 0 var(--yellow-dark), 2px 2px 0 var(--ink); }
.pixel-btn.yellow:active { box-shadow: inset 4px 4px 0 var(--yellow-light), inset -4px -4px 0 var(--yellow-dark); }

.pixel-btn.red {
  background: var(--red);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  box-shadow: inset 4px 4px 0 #FF7060, inset -4px -4px 0 var(--red-dark), 4px 4px 0 var(--ink);
}
.pixel-btn.red:hover { box-shadow: inset 4px 4px 0 #FF7060, inset -4px -4px 0 var(--red-dark), 2px 2px 0 var(--ink); }
.pixel-btn.red:active { box-shadow: inset 4px 4px 0 #FF7060, inset -4px -4px 0 var(--red-dark); }

.pixel-btn.shell {
  background: var(--tv-shell);
  color: var(--ink);
  box-shadow: inset 4px 4px 0 var(--tv-shell-hl), inset -4px -4px 0 var(--tv-shell-sh), 4px 4px 0 var(--ink);
}
.pixel-btn.shell:hover { box-shadow: inset 4px 4px 0 var(--tv-shell-hl), inset -4px -4px 0 var(--tv-shell-sh), 2px 2px 0 var(--ink); }
.pixel-btn.shell:active { box-shadow: inset 4px 4px 0 var(--tv-shell-hl), inset -4px -4px 0 var(--tv-shell-sh); }

.pixel-btn.console {
  background: var(--console);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  box-shadow: inset 4px 4px 0 var(--console-hl), inset -4px -4px 0 #000, 4px 4px 0 var(--ink);
}
.pixel-btn.console:hover { box-shadow: inset 4px 4px 0 var(--console-hl), inset -4px -4px 0 #000, 2px 2px 0 var(--ink); }
.pixel-btn.console:active { box-shadow: inset 4px 4px 0 var(--console-hl), inset -4px -4px 0 #000; }

.pixel-btn.sm {
  padding: 8px 12px;
  font-size: 9px;
}

.pixel-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none !important;
}

/* =====================================================
   PIXEL CARD
   ===================================================== */
.pixel-card {
  border: 4px solid var(--ink);
  padding: 18px;
}
.pixel-card.shell {
  background: var(--tv-shell);
  color: var(--ink);
  box-shadow: inset 4px 4px 0 var(--tv-shell-hl), inset -4px -4px 0 var(--tv-shell-sh), 4px 4px 0 var(--ink);
}
.pixel-card.console {
  background: var(--console);
  color: var(--yellow);
  box-shadow: inset 4px 4px 0 var(--console-hl), inset -4px -4px 0 #000, 4px 4px 0 var(--ink);
}
.pixel-card.sky {
  background: var(--sky);
  color: #fff;
  box-shadow: inset 4px 4px 0 #A0BFFF, inset -4px -4px 0 var(--sky-deep), 4px 4px 0 var(--ink);
}

.pixel-card h3 {
  font-family: var(--font-pixel);
  font-size: 11px;
  margin: 0 0 12px 0;
  letter-spacing: .05em;
}
.pixel-card.console h3 {
  color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
}

/* =====================================================
   PIXEL PILL
   ===================================================== */
.pixel-pill {
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 6px 12px;
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pixel-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.pixel-pill.green {
  background: var(--green);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.pixel-pill.green .dot { background: var(--green-light); }

.pixel-pill.red {
  background: var(--red);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.pixel-pill.red .dot { background: var(--yellow); }

.pixel-pill.yellow {
  background: var(--yellow);
  color: var(--ink);
}
.pixel-pill.yellow .dot { background: #fff; }

.pixel-pill.shell {
  background: var(--tv-shell);
  color: var(--ink);
}
.pixel-pill.shell .dot { background: var(--ink-soft); }

/* =====================================================
   PIXEL TV (CRT chassis)
   ===================================================== */
.pixel-tv {
  background: var(--tv-shell);
  border: 4px solid var(--ink);
  padding: 24px 28px 32px;
  box-shadow: inset 6px 6px 0 var(--tv-shell-hl), inset -6px -6px 0 var(--tv-shell-sh), 4px 4px 0 var(--ink);
}
.pixel-tv .tv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pixel-tv .tv-brand {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink);
  letter-spacing: .08em;
}
.pixel-tv .tv-power {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--ink-soft);
}
.pixel-tv .tv-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
}
.pixel-tv .tv-screen {
  background: #000;
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--ink);
  aspect-ratio: 256 / 224;
  position: relative;
  overflow: hidden;
}
.pixel-tv .tv-screen canvas,
.pixel-tv .tv-screen img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
/* Scanlines */
.pixel-tv .tv-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px
  );
  z-index: 2;
}
/* Corner darken */
.pixel-tv .tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
  z-index: 3;
}
.pixel-tv .tv-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.pixel-tv .tv-speaker {
  flex: 1;
  margin: 0 16px;
  height: 32px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0, var(--ink) 4px,
    var(--tv-shell-sh) 4px, var(--tv-shell-sh) 12px
  );
  border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 #000;
}

/* Knob */
.knob {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 #6A6A6A, inset -4px -4px 0 #000;
  position: relative;
  flex-shrink: 0;
}
.knob::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 14px;
  background: var(--yellow);
  transform: translateX(-50%);
}

/* =====================================================
   WORDMARK
   ===================================================== */
.wordmark {
  font-family: var(--font-pixel);
  line-height: 1;
  display: inline-block;
}
.wordmark .wm-mario {
  color: var(--red);
  letter-spacing: .05em;
}
.wordmark .wm-battle {
  color: #fff;
  letter-spacing: .04em;
}

/* =====================================================
   KEY CHIP (input indicator)
   ===================================================== */
.key-chip {
  padding: 4px 7px;
  font-family: var(--font-pixel);
  font-size: 7px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--ink-soft);
  box-shadow: inset 2px 2px 0 var(--console);
  display: inline-block;
}
.key-chip.active {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--yellow-light), inset -2px -2px 0 var(--yellow-dark);
}

/* =====================================================
   KV ROW (label / value pair)
   ===================================================== */
.kv-row {
  font-family: var(--font-mono);
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  line-height: 1.4;
}
.kv-row .kv-label { color: var(--ink-soft); flex-shrink: 0; }
.kv-row .kv-value { color: var(--red-dark); font-weight: normal; text-align: right; min-width: 0; }

.pixel-card.console .kv-row .kv-label { color: #888; }
.pixel-card.console .kv-row .kv-value { color: #fff; }

/* =====================================================
   SCRUBBER (transport bar)
   ===================================================== */
/* ── VCR Deck ── */
.scrubber-card {
  padding: 10px 12px;
}

/* Cassette body */
.vcr-cassette {
  background: var(--ink);
  border: 3px solid #000;
  border-radius: 6px;
  padding: 6px 10px 6px;
  margin-bottom: 8px;
  box-shadow: inset 2px 2px 0 #333, inset -2px -2px 0 #000;
}

/* Tape label strip */
.vcr-label {
  background: #e8e0c8;
  border: 2px solid #999;
  padding: 2px 8px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vcr-label .tape-title {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--ink);
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.vcr-label .tape-counter {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--red-dark);
  margin-left: 10px;
  white-space: nowrap;
  line-height: 1;
}

/* Tape window with reels */
.vcr-window {
  background: #111;
  border: 2px solid #000;
  border-radius: 3px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.vcr-reel {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #444;
  background: #222;
  box-shadow: inset 2px 2px 0 #333;
  flex-shrink: 0;
  position: relative;
}
.vcr-reel::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #555;
  border: 2px solid #333;
  transform: translate(-50%, -50%);
}
.vcr-reel.supply { }
.vcr-reel.takeup { }
.vcr-tape-path {
  flex: 1;
  height: 8px;
  margin: 0 4px;
  position: relative;
  background: #2a1800;
  border: 1px solid #444;
}
.vcr-tape-progress {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #8B4513;
  box-shadow: inset 0 2px 0 #A0522D;
  pointer-events: none;
}

/* Transport controls */
.scrubber-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 0;
}
.scrubber-frame {
  margin-left: auto;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
}
.scrubber-speed {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 3px 6px;
  border: 2px solid var(--ink);
  background: var(--console);
  color: var(--yellow);
  margin-left: 4px;
}

/* =====================================================
   AUDIO MIXER
   ===================================================== */
/* ── TV-bottom audio controls ── */
.tv-audio-btn {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  background: var(--ink-soft);
  color: var(--yellow);
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 3px 3px 0 #6A6A6A, inset -3px -3px 0 #000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms steps(4, end);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tv-audio-btn:hover {
  background: #5A5A5A;
}
.tv-audio-btn svg,
.vcr-transport-btn svg {
  pointer-events: none;
}
.vcr-transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}
.tv-audio-btn.muted {
  background: var(--red-dark);
  color: #fff;
  box-shadow: inset 3px 3px 0 #FF7060, inset -3px -3px 0 #600;
}
.tv-volume-slider {
  flex: 1;
  margin: 0 12px;
  appearance: none;
  background: transparent;
  height: 24px;
}
.tv-volume-slider:focus { outline: none; }
.tv-volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--tv-shell-sh) 0%, var(--yellow) 100%);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3);
}
.tv-volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 20px;
  margin-top: -8px;
  border: 3px solid var(--ink);
  background: var(--tv-shell);
  box-shadow: inset 2px 2px 0 var(--tv-shell-hl), inset -2px -2px 0 var(--tv-shell-sh);
}
.tv-volume-slider::-moz-range-track {
  height: 8px;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--tv-shell-sh) 0%, var(--yellow) 100%);
}
.tv-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 20px;
  border: 3px solid var(--ink);
  background: var(--tv-shell);
  box-shadow: inset 2px 2px 0 var(--tv-shell-hl), inset -2px -2px 0 var(--tv-shell-sh);
}
.tv-volume-slider::-moz-range-progress {
  height: 8px;
  background: var(--yellow);
}

/* =====================================================
   SCREEN LAYOUTS
   ===================================================== */
.screen { display: none; }
.screen.active { display: block; }

/* Ensure [hidden] overrides display on layout containers */
[hidden] { display: none !important; }

/* HOME — 3-column */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 560px 1fr;
  gap: 32px;
  align-items: start;
}

.home-left { padding-top: 40px; }
.home-left .wordmark { margin-bottom: 24px; }
.home-left .body-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 280px;
  line-height: 1.6;
}
.home-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-center .tv-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
}

.home-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
}

/* INSPECTOR — 2-column */
.inspector-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.inspector-left .pixel-tv { margin-bottom: 20px; }
.inspector-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Inputs two-column inside card */
.input-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.input-columns .player-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 #000;
}
.input-columns .player-label.p1 { color: var(--red); }
.input-columns .player-label.p2 { color: var(--green-light); }
.chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Player sections in Players card */
.player-section {
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.player-section:not(:last-child) {
  border-bottom: 2px dotted var(--tv-shell-sh);
}
.player-section .player-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  margin-bottom: 6px;
}
.player-section .player-label.mario { color: var(--red-dark); }
.player-section .player-label.luigi { color: var(--green-dark); }

/* CONTROLLERS — centered column */
.controllers-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
.controllers-layout h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  margin: 0;
}
.controller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 780px;
  width: 100%;
}

/* Controller slot card */
.controller-slot .slot-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  margin-bottom: 14px;
  text-shadow: 1px 1px 0 #000;
}
.controller-slot .slot-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* NES pad rendering */
.nes-pad {
  padding: 14px;
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 rgba(255,255,255,0.15), inset -4px -4px 0 rgba(0,0,0,0.4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.nes-pad.dark { background: var(--ink); }
.nes-pad.light { background: var(--tv-shell-sh); }

.dpad {
  position: relative;
  width: 50px;
  height: 50px;
}
.dpad-v {
  position: absolute;
  left: 18px; top: 0;
  width: 14px; height: 50px;
  background: var(--ink);
  border: 2px solid #000;
}
.dpad-h {
  position: absolute;
  top: 18px; left: 0;
  width: 50px; height: 14px;
  background: var(--ink);
  border: 2px solid #000;
}
.pad-startsel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.pad-bar {
  width: 24px;
  height: 6px;
  background: var(--ink-soft);
  border: 2px solid #000;
}
.pad-buttons {
  display: flex;
  gap: 6px;
}
.pad-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #000;
}

/* REPLAYS — grid */
.replays-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.replays-header h1 {
  font-family: var(--font-pixel);
  font-size: 22px;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  margin: 0;
}
.filter-pills {
  display: flex;
  gap: 8px;
}
.replays-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.replay-card {
  cursor: pointer;
  transition: transform 120ms steps(4, end);
}
.replay-card:hover {
  transform: translate(2px, 2px);
}
.replay-card .thumb {
  aspect-ratio: 256 / 224;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--ink);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.replay-card .thumb img {
  width: 108%;
  height: 108%;
  margin: -4% 0 0 -4%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
}
/* Scanlines on thumbnail */
.replay-card .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0, transparent 1px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px
  );
  pointer-events: none;
}
.replay-card .tape-name {
  font-family: var(--font-pixel);
  font-size: 10px;
  margin-bottom: 6px;
}
.replay-card .tape-meta {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-soft);
}
.pixel-card.console .tape-name {
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
}
.pixel-card.console .tape-meta { color: #fff; }

/* Crash badge */
.crash-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--red);
  text-shadow: 2px 2px 0 #000;
  z-index: 2;
}
.replay-card .thumb.crash img {
  filter: hue-rotate(160deg) brightness(0.6);
}

/* =====================================================
   HOME SETUP PANEL (game setup on home screen)
   ===================================================== */
.setup-panel select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 4px solid var(--ink);
  background: var(--tv-shell);
  color: var(--ink);
  width: 100%;
}
.setup-panel input[type="number"] {
  font-family: var(--font-mono);
  font-size: 18px;
  padding: 6px 10px;
  border: 4px solid var(--ink);
  background: var(--tv-shell);
  color: var(--ink);
  width: 100%;
}
.setup-panel label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: .05em;
  display: block;
  margin-bottom: 6px;
}
.setup-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.setup-row > div { flex: 1; }

/* =====================================================
   HUD OVERLAY (during live play, inside tv-screen)
   ===================================================== */
.hud-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  z-index: 4;
}
.hud-overlay .hud-left,
.hud-overlay .hud-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hud-p1 { color: var(--red); }
.hud-p2 { color: var(--green-light); }

/* =====================================================
   MAPPING DIALOG
   ===================================================== */
dialog {
  border: 4px solid var(--ink);
  background: var(--console);
  color: #fff;
  padding: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 420px;
}
dialog::backdrop {
  background: rgba(0,0,0,0.6);
}
dialog h3 {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
  margin: 0 0 16px;
}
dialog .map-device {
  font-family: var(--font-body);
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
}
dialog .map-prompt {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--yellow);
  margin-bottom: 12px;
  min-height: 24px;
}
dialog .map-progress {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #888;
  margin-bottom: 20px;
}
dialog .map-actions {
  display: flex;
  gap: 12px;
}

/* =====================================================
   SAVE TAPE
   ===================================================== */
.save-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.save-row input[type="text"] {
  font-family: var(--font-mono);
  font-size: 18px;
  padding: 6px 10px;
  border: 4px solid var(--ink);
  background: var(--tv-shell);
  color: var(--ink);
  flex: 1;
}
.save-status {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 8px;
}
.pixel-card.console .save-status { color: #888; }

/* =====================================================
   FILE UPLOAD
   ===================================================== */
.file-upload {
  position: relative;
  display: inline-block;
}
.file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }
  .home-left, .home-right { padding-top: 0; }
  .inspector-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }
  .controller-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
  .replays-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .replays-grid {
    grid-template-columns: 1fr;
  }
  .frame { padding: 0 16px 180px; }
}