:root {
  /* Cluster sizing for responsive HUD (default tuned for 1400x900 or 1920x1080 screens) */
  --cluster-width: 580px;
  --cluster-right: 28px;
  --cluster-bottom: 24px;

  /* Color Palette matching the reference design */
  --color-chassis-bg: #090c10;
  --color-chassis-border: #1a2232;
  --color-chassis-bevel: #222d42;
  --color-pod-bg: #07090d;
  --color-cyan-glow: #00d2ff;
  --color-cyan-dim: #133a4a;
  --color-cyan-bright: #38bdf8;
  --color-text-white: #ffffff;
  --color-text-silver: #f1f5f9;
  --color-text-muted: #8e9ba8;
  --color-text-dark: #4b5868;
  --color-amber-mil: #f59e0b;
  --color-red-danger: #ef4444;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Optional preview backgrounds for testing via URL param (?bg=dark or ?bg=light) */
body.dark-preview-bg {
  background: radial-gradient(
    circle at 75% 75%,
    #171d26 0%,
    #0c1015 55%,
    #050709 100%
  );
}

body.preview-bg {
  background: radial-gradient(
    circle at 75% 75%,
    #e2e8f0 0%,
    #cbd5e1 55%,
    #94a3b8 100%
  );
}

/* Speedometer HUD container fixed at bottom-right corner */
#speedometer-hud {
  position: fixed;
  right: var(--cluster-right);
  bottom: var(--cluster-bottom);
  width: var(--cluster-width);
  aspect-ratio: 1024 / 576;
  z-index: 999;
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s ease;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75));
}

/* Center HUD when ?center=1 or ?preview=1 is provided in URL */
body.center-hud #speedometer-hud {
  right: 50%;
  bottom: 50%;
  width: min(920px, 92vw);
  transform: translate(50%, 50%);
  transform-origin: center center;
}

/* Responsive Auto-scaling for smaller screens */
@media (max-width: 1400px), (max-height: 900px) {
  #speedometer-hud.auto-fit {
    width: clamp(380px, 42vw, 560px);
  }
}

@media (max-width: 1024px) {
  #speedometer-hud.auto-fit {
    width: clamp(320px, 50vw, 460px);
    right: 14px;
    bottom: 12px;
  }
}

/* SVG Typography Classes matching reference image precisely */
.font-speed-val {
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
}

.font-speed-unit {
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 2.2px;
}

.font-dial-num {
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-weight: 600;
}

.font-rpm-val {
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.font-pct-val {
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.font-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.font-sublabel {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.font-clock {
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.font-gear-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.font-gear-val {
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-weight: 700;
}

.font-odo {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 1.5px;
}

/* Turn Indicator Animations */
@keyframes blinkIndicator {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.9));
  }
  50% {
    opacity: 0.15;
    filter: none;
  }
}

.blinking-indicator {
  animation: blinkIndicator 0.65s infinite ease-in-out;
}

/* Warning Pulse Animations */
@keyframes warningPulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.85));
  }
  50% {
    opacity: 0.3;
    filter: none;
  }
}

.warning-pulse {
  animation: warningPulse 0.8s infinite ease-in-out;
}

/* Engine MIL Glow */
@keyframes engineGlow {
  0%, 100% {
    filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.85));
  }
  50% {
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.45));
  }
}

.mil-active {
  animation: engineGlow 1.8s infinite ease-in-out;
}