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

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  overflow-x: hidden;
  /* An iframe document with no background paints the browser default
     (opaque white), covering the dark arcade-stage bezel behind it wherever
     the fixed-size #app panel doesn't reach. Match the stage's own pinned
     dark color (see .player__stage in games/[slug].astro) so the two frames
     read as one continuous dark surface. */
  background: #16162A;
}

/* This UI has a fixed-size layout (was a browser-extension popup), so it
   can't stretch to fill the arcade stage. Center it instead of letting it
   sit pinned to the top-left with empty space on the right. */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ─── THEMES ─────────────────────────────────────────────── */
#app {
  width: 620px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, color 0.3s;
}

/* NEON */
#app.theme-neon {
  --bg: #080818;
  --surface: #12122a;
  --surface2: #1c1c3a;
  --accent: #00ffa3;
  --accent2: #00cfff;
  --ai-accent: #ff4488;
  --ai-accent2: #ff8844;
  --text: #c8ffe0;
  --text-dim: #5a9a80;
  --border: #00ffa344;
  --border-bright: #00ffa3;
  --btn-bg: #12122a;
  --btn-hover: #1e1e44;
  --comparing: #ffee00;
  --swapping: #ff8800;
  --win-color: #00ffa3;
  --lose-color: #ff4466;
  --glow-color: #00ffa3;
  background: var(--bg);
  color: var(--text);
}

/* RETRO (CRT green) */
#app.theme-retro {
  --bg: #001200;
  --surface: #001a00;
  --surface2: #002800;
  --accent: #00cc00;
  --accent2: #00ff44;
  --ai-accent: #cc8800;
  --ai-accent2: #ffcc00;
  --text: #00ee00;
  --text-dim: #006600;
  --border: #00770044;
  --border-bright: #00cc00;
  --btn-bg: #001a00;
  --btn-hover: #003300;
  --comparing: #ffff00;
  --swapping: #ff8800;
  --win-color: #00ff44;
  --lose-color: #ff4400;
  --glow-color: #00cc00;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
}
#app.theme-retro::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
  pointer-events: none;
  z-index: 9999;
}

/* PASTEL */
#app.theme-pastel {
  --bg: #f8f0ff;
  --surface: #ffffff;
  --surface2: #f0e8ff;
  --accent: #a855f7;
  --accent2: #ec4899;
  --ai-accent: #f97316;
  --ai-accent2: #eab308;
  --text: #4a1d96;
  --text-dim: #9d77c9;
  --border: #d8b4fe55;
  --border-bright: #a855f7;
  --btn-bg: #ffffff;
  --btn-hover: #f3e8ff;
  --comparing: #f59e0b;
  --swapping: #ef4444;
  --win-color: #10b981;
  --lose-color: #ef4444;
  --glow-color: #a855f7;
  background: var(--bg);
  color: var(--text);
}

/* MINIMAL */
#app.theme-minimal {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface2: #eeeeee;
  --accent: #1976d2;
  --accent2: #0288d1;
  --ai-accent: #e53935;
  --ai-accent2: #fb8c00;
  --text: #212121;
  --text-dim: #757575;
  --border: #cccccc;
  --border-bright: #1976d2;
  --btn-bg: #ffffff;
  --btn-hover: #e3f2fd;
  --comparing: #f9a825;
  --swapping: #e53935;
  --win-color: #2e7d32;
  --lose-color: #c62828;
  --glow-color: #1976d2;
  background: var(--bg);
  color: var(--text);
}

/* FIRE */
#app.theme-fire {
  --bg: #0a0500;
  --surface: #150a00;
  --surface2: #1f0f00;
  --accent: #ff6b00;
  --accent2: #ffcc00;
  --ai-accent: #00aaff;
  --ai-accent2: #8844ff;
  --text: #ffddaa;
  --text-dim: #885500;
  --border: #ff6b0044;
  --border-bright: #ff6b00;
  --btn-bg: #150a00;
  --btn-hover: #2a1400;
  --comparing: #ffffff;
  --swapping: #ff0000;
  --win-color: #ff6b00;
  --lose-color: #00aaff;
  --glow-color: #ff6b00;
  background: var(--bg);
  color: var(--text);
}

/* ─── HEADER ─────────────────────────────────────────────── */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.title-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--glow-color);
}

#settingsBtn {
  background: var(--btn-bg);
  border: 1px solid var(--border-bright);
  color: var(--accent);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: center;
}
#settingsBtn:hover { background: var(--btn-hover); }
#settingsBtn.open { transform: rotate(60deg); }

/* ─── SETTINGS PANEL ─────────────────────────────────────── */
#settingsPanel {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 14px;
}
#settingsPanel.open {
  max-height: 420px;
  padding: 12px 14px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px 10px;
  align-items: center;
}

.settings-grid label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.settings-grid select,
.settings-grid input[type=range] {
  width: 100%;
  height: 28px;
  background: var(--btn-bg);
  border: 1px solid var(--border-bright);
  color: var(--text);
  border-radius: 4px;
  font-size: 11px;
  padding: 0 4px;
  cursor: pointer;
  outline: none;
}

.settings-grid input[type=range] {
  padding: 0;
  accent-color: var(--accent);
}

/* ─── SCREENS ─────────────────────────────────────────────── */
.screen { display: none; flex-direction: column; flex: 1; }
.screen.active { display: flex; }

/* ─── MENU SCREEN ─────────────────────────────────────────── */
#menuScreen { padding: 16px 14px; gap: 14px; }

.mode-buttons {
  display: flex;
  gap: 10px;
}

.mode-btn {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.mode-btn:hover {
  background: var(--btn-hover);
  box-shadow: 0 0 14px var(--glow-color)44;
  transform: translateY(-1px);
}
.mode-btn:active { transform: translateY(0); }

.mode-icon { font-size: 22px; }
.mode-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
}
.mode-desc {
  font-size: 10px;
  color: var(--text-dim);
}

#algoSelectorWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
#algoSelectorWrap label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
#algoSelect {
  flex: 1;
  background: var(--btn-bg);
  border: 1px solid var(--border-bright);
  color: var(--text);
  border-radius: 4px;
  height: 28px;
  font-size: 11px;
  padding: 0 6px;
  cursor: pointer;
  outline: none;
}

/* ─── GAME SCREEN ─────────────────────────────────────────── */
#gameScreen { padding: 0; }

/* HUD */
#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}

#timerDisplay {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
}

#algoLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: center;
}

#gauntletLabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: 1px;
  min-width: 60px;
  text-align: right;
}

/* Game area wrapper */
#gameArea {
  display: flex;
  flex: 1;
  gap: 0;
  padding: 10px 14px;
  min-height: 240px;
}

/* Side-by-side sections */
#playerSection, #aiSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.section-divider {
  width: 1px;
  background: var(--border);
  margin: 0 8px;
  align-self: stretch;
}

.section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 2px;
  height: 16px;
  display: flex;
  align-items: center;
}

#playerSection .section-label { color: var(--accent); }
#aiSection .section-label { color: var(--ai-accent); }

/* Bars wrapper (relative, needed for absolute bar children) */
.bars-wrapper {
  position: relative;
  flex: 1;
  min-height: 188px;
  height: 188px;
}

/* Ghost overlay container */
.ghost-overlay-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Bars container (holds absolutely-positioned bars) */
.bars-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Individual bar */
.bar {
  position: absolute;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  cursor: grab;
  transition: left 0.15s ease, width 0.15s ease;
  transform-origin: bottom center;
  will-change: left, transform;
}
.bar.no-transition { transition: none !important; }

/* Hover state */
.bar:hover:not(.dragging) {
  filter: brightness(1.35);
  outline: 1px solid var(--accent);
  z-index: 5;
}

/* Dragging state */
.bar.dragging {
  cursor: grabbing;
  transition: none !important;
  z-index: 50;
  transform: scaleX(1.12);
  filter: brightness(1.5) saturate(1.4);
  box-shadow: 0 0 18px 3px var(--glow-color), 0 6px 20px rgba(0,0,0,0.5);
}

/* Wobble animation (triggered on adjacent bars during swap) */
@keyframes barWobble {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px) skewY(-1deg); }
  50%  { transform: translateX(3px) skewY(1deg); }
  80%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.bar.wobble { animation: barWobble 0.28s ease; }

/* Flash animation for AI swaps */
@keyframes aiSwapFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.5) saturate(0.5); }
  100% { filter: brightness(1); }
}

/* AI comparing highlight */
.bar.ai-comparing {
  outline: 2px solid var(--comparing);
  filter: brightness(1.4);
  z-index: 6;
}

/* AI swapping flash */
.bar.ai-swapping {
  animation: aiSwapFlash 0.25s ease;
  outline: 2px solid var(--swapping);
  z-index: 7;
}

/* Ghost overlay bars */
.ghost-bar {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.ghost-bar.ai-comparing { opacity: 0.6; }
.ghost-bar.ai-swapping { opacity: 0.75; }

/* Sorted celebration flash */
@keyframes sortedPulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.8) saturate(1.5); }
  100% { filter: brightness(1.2); }
}
.bar.sorted { animation: sortedPulse 0.6s ease forwards; }

/* ─── KEYBOARD CONTROLS ───────────────────────────────────── */
/* Focused bar (arrow-key navigation, space not yet held) */
.bar.kb-focused:not(.kb-dragging) {
  outline: 2px dashed var(--accent2);
  outline-offset: 3px;
  filter: brightness(1.25);
  z-index: 6;
}

/* Grabbed bar (space held) — same scale as mouse drag but with upward glow */
.bar.kb-dragging {
  transform: scaleX(1.12) scaleY(1.05) !important;
  filter: brightness(1.55) saturate(1.45) !important;
  box-shadow: 0 0 22px 5px var(--glow-color),
              0 -6px 16px var(--glow-color)55,
              0 8px 24px rgba(0,0,0,0.55) !important;
  outline: 2px solid var(--accent2) !important;
  z-index: 50 !important;
  animation: none !important;
  transition: none !important;
}

/* ─── RESULT OVERLAY ──────────────────────────────────────── */
#resultOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(3px);
}
#resultOverlay.hidden { display: none; }

#resultCard {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 22px 28px;
  text-align: center;
  box-shadow: 0 0 40px var(--glow-color)66;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

#resultTitle {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}
#resultTitle.win { color: var(--win-color); text-shadow: 0 0 20px var(--win-color); }
#resultTitle.lose { color: var(--lose-color); text-shadow: 0 0 20px var(--lose-color); }

#resultDetails {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  letter-spacing: 0.5px;
}
#resultDetails strong { color: var(--text); }

.result-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.result-btns button {
  background: var(--btn-bg);
  border: 1px solid var(--border-bright);
  color: var(--accent);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.result-btns button:hover {
  background: var(--btn-hover);
  box-shadow: 0 0 10px var(--glow-color)55;
}
.result-btns button.hidden { display: none; }

/* ─── COUNTDOWN ───────────────────────────────────────────── */
#countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: rgba(0,0,0,0.6);
  pointer-events: none;
}
#countdown.hidden { display: none; }
#countdownNum {
  font-size: 80px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 40px var(--glow-color);
}
@keyframes countPop {
  0%   { transform: scale(1.8); opacity: 0; }
  30%  { transform: scale(1);   opacity: 1; }
  80%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}
#countdownNum { animation: countPop 0.9s ease forwards; }

/* ─── SORTED CHECK MARK ───────────────────────────────────── */
@keyframes checkIn {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1)   rotate(0deg); opacity: 1; }
}
.sort-done-badge {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 20px;
  animation: checkIn 0.4s ease forwards;
  z-index: 10;
  white-space: nowrap;
}

/* ─── GHOST MODE: single container layout ─────────────────── */
#gameArea.ghost-mode #aiSection { display: none; }
#gameArea.ghost-mode .section-divider { display: none; }
#gameArea.ghost-mode #playerSection { flex: 1; }

/* ─── SCROLLBAR (neon/fire only) ─────────────────────────── */
.theme-neon ::-webkit-scrollbar,
.theme-retro ::-webkit-scrollbar,
.theme-fire ::-webkit-scrollbar  { width: 4px; }
.theme-neon ::-webkit-scrollbar-track { background: var(--bg); }
.theme-neon ::-webkit-scrollbar-thumb { background: var(--accent2); border-radius: 2px; }

/* ─── CONTROLS: SCHEME SELECT + FRAME SLIDER (wide) ──────── */
#controlSchemeSelect { grid-column: span 3; }
#frameCountSlider    { grid-column: span 3; }

/* ─── TRAINING MODE ───────────────────────────────────────── */
#gameArea.training-mode #aiSection    { display: none; }
#gameArea.training-mode .section-divider { display: none; }
#gameArea.training-mode #playerSection { flex: 1; }

.training-frame-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  justify-content: center;
}
.training-frame-list span strong { color: var(--text); }

/* ─── CLICK-TO-SWAP ───────────────────────────────────────── */
@keyframes clickPulse {
  from { box-shadow: 0 0 8px 3px var(--glow-color)88; }
  to   { box-shadow: 0 0 22px 7px var(--glow-color); }
}
.bar.click-selected {
  outline: 2px solid var(--accent);
  filter: brightness(1.55) saturate(1.2);
  z-index: 10;
  cursor: pointer;
  animation: clickPulse 0.65s ease infinite alternate;
}

/* ─── KEYBIND MODE ────────────────────────────────────────── */
#playerBars.keybind-mode .bar { cursor: default; }
#playerBars.keybind-mode .bar:hover:not(.kb-dragging) {
  filter: none;
  outline: none;
}
#playerBars.keybind-mode .bar::after {
  content: attr(data-key);
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  pointer-events: none;
  text-transform: uppercase;
}

/* ─── KEYBIND CONFIG PANEL ────────────────────────────────── */
.keybind-config {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.keybind-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.keybind-config-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.keybind-config-header button {
  background: var(--btn-bg);
  border: 1px solid var(--border-bright);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.keybind-config-header button:hover { background: var(--btn-hover); }
.keybind-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.kb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.kb-cell span {
  font-size: 8px;
  color: var(--text-dim);
  font-weight: 600;
}
.kb-input {
  width: 28px;
  height: 24px;
  text-align: center;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  caret-color: transparent;
  text-transform: uppercase;
}
.kb-input:focus {
  border-color: var(--border-bright);
  box-shadow: 0 0 6px var(--glow-color)66;
}

/* ─── MENU BATTLE ─────────────────────────────────────────── */
#menuBattle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#battleHeader {
  display: flex;
  align-items: center;
  min-height: 15px;
}
.battle-label {
  flex: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.battle-label-right {
  text-align: right;
  color: var(--ai-accent);
}
#battleVs {
  padding: 0 10px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--text-dim);
  flex-shrink: 0;
}
#battleArea {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.battle-bars-wrapper {
  position: relative;
  flex: 1;
  height: 68px;
}
.battle-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  align-self: stretch;
}
#battleLeftBars .bar,
#battleRightBars .bar {
  cursor: default;
  pointer-events: none;
}
#battleStatus {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  min-height: 12px;
  transition: color 0.2s;
}
.battle-win-flash {
  color: var(--win-color) !important;
  text-shadow: 0 0 10px var(--win-color)88;
}
@keyframes battleWinLabel {
  from { text-shadow: 0 0 6px currentColor; opacity: 1; }
  to   { text-shadow: 0 0 18px currentColor; opacity: 0.7; }
}
.battle-winner {
  color: var(--win-color) !important;
  animation: battleWinLabel 0.45s ease infinite alternate;
}