/* OutRun Waves Arcade - Design tokens & custom game styling */
:root {
  --radius: 0.625rem;
  --background: oklch(0.97 0.02 230);
  --foreground: oklch(0.18 0.05 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.05 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.05 240);
  --primary: oklch(0.55 0.22 245);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.94 0.03 220);
  --secondary-foreground: oklch(0.2 0.05 240);
  --muted: oklch(0.93 0.02 230);
  --muted-foreground: oklch(0.48 0.04 240);
  --accent: oklch(0.68 0.2 165);
  --accent-foreground: oklch(0.1 0.04 240);
  --destructive: oklch(0.58 0.24 27);
  --border: oklch(0.88 0.03 235);
  --input: oklch(0.88 0.03 235);
  --ring: oklch(0.55 0.22 245);
  --chart-1: #06b6d4;
  --chart-2: #3b82f6;
  --chart-3: #8b5cf6;
  --chart-4: #ec4899;
  --chart-5: #f59e0b;
}

.dark {
  --background: oklch(0.12 0.04 250);
  --foreground: oklch(0.96 0.02 220);
  --card: oklch(0.17 0.04 250);
  --card-foreground: oklch(0.96 0.02 220);
  --popover: oklch(0.17 0.04 250);
  --popover-foreground: oklch(0.96 0.02 220);
  --primary: oklch(0.66 0.22 245);
  --primary-foreground: oklch(0.1 0.04 250);
  --secondary: oklch(0.23 0.04 250);
  --secondary-foreground: oklch(0.96 0.02 220);
  --muted: oklch(0.21 0.03 250);
  --muted-foreground: oklch(0.7 0.03 230);
  --accent: oklch(0.72 0.19 165);
  --accent-foreground: oklch(0.1 0.04 240);
  --destructive: oklch(0.65 0.22 25);
  --border: oklch(0.28 0.04 250);
  --input: oklch(0.28 0.04 250);
  --ring: oklch(0.66 0.22 245);
  --chart-1: #22d3ee;
  --chart-2: #60a5fa;
  --chart-3: #a78bfa;
  --chart-4: #f472b6;
  --chart-5: #fbbf24;
}

/* Custom arcade game styling */
.arcade-font {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: "tnum";
}

.scanline-overlay {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
}

.glow-blue {
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.6), 0 0 24px rgba(14, 165, 233, 0.3);
}

.glow-pink {
  text-shadow: 0 0 12px rgba(244, 114, 182, 0.6), 0 0 24px rgba(236, 72, 153, 0.3);
}

.glow-yellow {
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 24px rgba(245, 158, 11, 0.3);
}

/* CRT Screen curve and bezel */
.game-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 80vh;
  background-color: #030a1a;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.8);
}