/*
 * Neon Arcade design tokens — the single source of style values, extracted from
 * design/README.md ("Design tokens"). Every component references these variables rather than
 * hard-coding hex values, so the palette stays consistent across the app.
 */
:root {
  /* Color */
  --bg: #06070d;
  --panel: rgba(12, 14, 24, 0.6);
  --panel-solid: #0a0c16;
  --panel-solid-2: #0c0e18;

  --cyan: #38f5ff;
  --cyan-hover: #7dfaff;
  --magenta: #ff4dd8;
  --lime: #b6ff3a;
  --amber: #ffcf4d;
  --pink: #ff6b8a;

  --text: #e7ecff;
  --muted-1: #a9b0d4;
  --muted-2: #8b93b8;
  --muted-3: #6c739a;
  --muted-4: #5b6288;

  /* Player avatar colors (also used for glows) */
  --p-jim: #ff4dd8;
  --p-brian: #38f5ff;
  --p-chris: #b6ff3a;
  --p-dave: #ffcf4d;
  --p-josh: #8b7dff;
  --p-spencer: #ff8a5b;

  /* Hairline / fill helpers */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.14);
  --fill-faint: rgba(255, 255, 255, 0.02);

  /* Typography */
  --font-display: 'Press Start 2P', monospace;
  --font-head: 'Chakra Petch', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --r-btn: 10px;
  --r-card: 14px;
  --r-panel: 16px;
  --r-pill: 999px;

  /* Glow / shadow */
  --glow-cyan: 0 0 22px rgba(56, 245, 255, 0.6);
  --glow-wordmark: 0 0 22px rgba(56, 245, 255, 0.6);
}

/* Motion — the subset of the design's keyframes used by the current screens. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes neonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideOver {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* A freshly added game card pops onto the board and its NEW badge scales in (Task 8 add phase). */
@keyframes cardPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes newTag {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* The reveal moment (Task 10 resolution): the winner flash scales in and its aurora halo spins slowly
 * behind the winner's name (design/screenshots/08-reveal.png). */
@keyframes flashIn {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes glowSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* The Results dwell (Task 11): the winner hero rises in as the round settles into its rest state
 * (design/screenshots/09-results.png). */
@keyframes winRise {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}