:root {
  color-scheme: dark;
}

body {
  --sky-top: #12153f;
  --sky-bottom: #371063;
  --horizon-glow: rgba(255, 72, 173, 0.85);
  --road-dark: #181726;
  --road-light: #22203b;
  --rumble-dark: #ff2b6e;
  --rumble-light: #fbd44b;
  --grass-dark: #0c2a2f;
  --grass-light: #164349;
  background: radial-gradient(circle at 50% 15%, rgba(255, 77, 167, 0.3), transparent 50%),
    linear-gradient(var(--sky-top), var(--sky-bottom));
  min-height: 100vh;
}

.outrun-screen {
  --screen-aspect: 4 / 3;
  --screen-padding: clamp(12px, 1.8vw, 24px);
  --screen-bg: rgba(4, 6, 12, 0.88);
  --screen-shadow:
    0 0 0 2px rgba(255, 65, 160, 0.45) inset,
    0 0 36px 8px rgba(255, 65, 160, 0.35),
    0 0 120px 12px rgba(26, 33, 73, 0.55);
  --crt-scanline-alpha: 0.18;
  --crt-aperture-opacity: 0.18;
  --crt-overlay-filter: hue-rotate(-12deg) saturate(1.15);
  --crt-glow-shadow: inset 0 0 80px rgba(255, 92, 174, 0.35);
}

.outrun-screen canvas {
  background: linear-gradient(0deg, rgba(13, 18, 41, 0.9) 0%, rgba(9, 12, 29, 0.9) 60%, rgba(4, 7, 16, 0.94) 100%);
  border-radius: 8px;
}

.outrun-hud {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(12px, 2.4vw, 28px);
  font-size: clamp(12px, 1.6vw, 16px);
  color: rgba(250, 233, 255, 0.85);
  text-shadow: 0 0 12px rgba(255, 84, 190, 0.55);
  backdrop-filter: blur(3px) saturate(1.2);
}

.outrun-hud .title {
  font-size: clamp(16px, 3vw, 28px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffe6ff;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(6px, 1vw, 18px);
  margin-top: clamp(8px, 1.2vw, 14px);
  font-variant-numeric: tabular-nums;
}

.stat-grid span {
  display: inline-flex;
  gap: 0.4em;
  align-items: baseline;
}

.stat-grid .fps {
  justify-self: end;
  opacity: 0.75;
}

.outrun-controls {
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 199, 255, 0.72);
}