/* ==========================================================
   Design Tokens — CSS custom properties (mirrors theme.js)
   ========================================================== */

:root {
  /* Backgrounds */
  --bg-primary: #06060f;
  --bg-secondary: #0c0c1a;
  --bg-card: #12122a;
  --bg-board: #080810;

  /* Text */
  --text-primary: #e0e0ff;
  --text-secondary: #6a6a88;

  /* Accents */
  --accent-blue: #4444ff;
  --accent-cyan: #00ccff;
  --accent-green: #00ff88;
  --accent-green-dark: #00dd77;

  /* Semantic */
  --danger: #ff4444;
  --garbage: #3a3a4e;
  --border: #1e1e44;

  /* Medals */
  --medal-gold: #ffd700;
  --medal-silver: #c0c0c0;
  --medal-bronze: #cd7f32;

  /* Button text */
  --btn-green-text: #003d1f;

  /* Overlay */
  --overlay-bg: rgba(6, 6, 15, 0.88);

  /* Glows */
  --glow-cyan: rgba(0, 200, 255, 0.15);
  --glow-green: rgba(0, 255, 136, 0.3);

  /* Opacities */
  --opacity-faint: 0.04;
  --opacity-tint: 0.06;
  --opacity-subtle: 0.08;
  --opacity-muted: 0.10;
  --opacity-soft: 0.15;
  --opacity-label: 0.5;
  --opacity-overlay: 0.75;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Animations */
  --anim-fade: 0.5s ease-out both;
  --anim-pulse: 2.5s ease-in-out infinite;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
}

/* ==========================================================
   Shared Button Classes
   ========================================================== */

.btn {
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-green) 0%, var(--accent-green-dark) 100%);
  color: var(--btn-green-text);
}

.btn-primary:hover {
  box-shadow: 0 0 24px var(--glow-green);
}

.btn-primary:active {
  scale: 0.95;
  box-shadow: 0 0 8px var(--glow-green);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  border-color: rgba(0, 200, 255, 0.5);
  color: rgba(0, 200, 255, 0.9);
}

.btn-secondary:active {
  scale: 0.95;
}

/* ==========================================================
   Shared Component Classes
   ========================================================== */

.player-card {
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 2px solid var(--player-color, var(--border));
  box-shadow: 0 0 16px -4px var(--player-color, transparent);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--player-color, var(--text-primary));
}

.gradient-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan), var(--accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pause-icon {
  display: flex;
  gap: 3px;
}

.pause-icon::before,
.pause-icon::after {
  content: '';
  width: 4px;
  height: 18px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1.5px;
}