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

body {
  background: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
}

/* =========================================================
   Bloom Cluster Container (Positioned bottom-right for HUD)
   ========================================================= */
.cluster-container {
  position: fixed;
  bottom: 18px;
  right: 22px;
  width: 470px;
  max-width: 26vw;
  aspect-ratio: 1280 / 820;
  z-index: 100;
  pointer-events: auto;
}

/* =========================================================
   Bloom HUD
   ========================================================= */
.cluster-hud {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 40px rgba(189, 92, 119, 0.22));
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cluster-hud.hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.cluster-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* =========================================================
   Needles Animation & Pivots
   ========================================================= */
#speedNeedleGroup {
  transform-origin: 410px 425px;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#rpmNeedleGroup {
  transform-origin: 968px 381px;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================
   Digital Speed Display & Card Texts
   ========================================================= */
#digitalSpeedVal {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 900;
  font-size: 60px;
  fill: #65444D;
  letter-spacing: -1.5px;
  transition: fill 0.2s ease;
}

.card-val-text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 19px;
  fill: #65444D;
}

.card-gear-text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 25px;
  fill: #BD5C77;
}

.card-trip-text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  fill: #65444D;
}

/* Low fuel alert on card */
#fuelCardGroup.low-fuel-alert rect {
  animation: fuelCardPulse 1.2s infinite alternate;
}

@keyframes fuelCardPulse {
  0% {
    fill: #F6DFE2;
  }
  100% {
    fill: #FFB3C1;
  }
}

/* =========================================================
   Turn Blinkers Animation
   ========================================================= */
.cluster-blinker {
  stroke: #E6B8BE;
  transition: stroke 0.15s ease, filter 0.15s ease;
}

.cluster-blinker.blinker-active {
  stroke: #BD5C77 !important;
  filter: drop-shadow(0 0 8px rgba(189, 92, 119, 0.85));
  animation: blinkerFlash 0.4s infinite alternate;
}

@keyframes blinkerFlash {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* =========================================================
   Headlights (Lampu Aktif) Group
   ========================================================= */
.lampu-group {
  transition: opacity 0.25s ease;
}

.lampu-group.headlights-off {
  opacity: 0.45;
}

.lampu-group.headlights-on {
  opacity: 1;
}

.lampu-group.headlights-on #lampuDot {
  fill: #BD5C77;
  filter: drop-shadow(0 0 6px rgba(189, 92, 119, 0.9));
}

.lampu-group.headlights-highbeam #lampuDot {
  fill: #5C8ABD;
  filter: drop-shadow(0 0 8px rgba(92, 138, 189, 0.9));
}

/* =========================================================
   Status Pills (Seatbelt, Engine, Key)
   ========================================================= */
.status-pill {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#seatbeltPill.unbuckled {
  animation: seatbeltAlert 0.75s infinite alternate;
}

@keyframes seatbeltAlert {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(189, 92, 119, 0.7));
  }
}

#enginePill.engine-off {
  opacity: 0.38;
}

#enginePill.engine-on {
  opacity: 1;
}

#keyPill.key-off {
  opacity: 0.38;
}

#keyPill.key-on {
  opacity: 1;
}

/* =========================================================
   Customized Proportions (RPM smaller, Fuel & Engine bigger)
   ========================================================= */
#rpmGaugeCluster {
  transform-origin: 968px 381px;
  transform: scale(0.78);
  transition: transform 0.3s ease;
}

#fuelCardGroup {
  transform-origin: 790px 645px;
  transform: translate(0px, 6px) scale(1.24);
  transition: transform 0.3s ease;
}

#healthCardGroup {
  transform-origin: 790px 570px;
  transform: translate(0px, -6px) scale(1.24);
  transition: transform 0.3s ease;
}

#enginePill {
  transform-origin: 1136px 700px;
  transform: scale(1.36);
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}