:root {
  /* Default cluster sizing tuned for bottom-right corner on 1400x900 screen */
  --cluster-width: 500px;
  --cluster-right: 24px;
  --cluster-bottom: 18px;
}

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

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

/* Optional preview backgrounds (e.g. ?bg=dark or ?bg=light) */
body.preview-bg {
  background: radial-gradient(
    circle at 75% 75%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(238, 241, 245, 0.96) 55%,
    rgba(218, 224, 232, 0.98) 100%
  );
}

body.dark-preview-bg {
  background: radial-gradient(
    circle at 75% 75%,
    #1c2229 0%,
    #0f1318 65%,
    #090b0e 100%
  );
}

/* Speedometer Cluster HUD anchored at Bottom-Right */
#speedometer-hud {
  position: fixed;
  right: var(--cluster-right);
  bottom: var(--cluster-bottom);
  width: var(--cluster-width);
  aspect-ratio: 1000 / 615;
  z-index: 20;
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Responsive auto-scaling for screens with 1400x900 or smaller aspect ratio */
@media (max-width: 1400px), (max-height: 900px) {
  #speedometer-hud.auto-fit {
    width: clamp(350px, 35.7vw, 520px);
  }
}

/* Mechanical Gauge Needles (hardware accelerated, smoothed via rAF lerp) */
.gauge-needle {
  will-change: transform;
}

/* Dial Typography */
.font-dial-num {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-weight: 600;
}

.font-dial-label {
  font-family: 'Inter', sans-serif;
}

.font-odo {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Blinking animations for turn indicators & unfastened seatbelt */
@keyframes blinkerPulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.8));
  }
  50% {
    opacity: 0.18;
    filter: none;
  }
}

@keyframes warningPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

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

.seatbelt-warning {
  animation: warningPulse 0.9s infinite ease-in-out;
}