@font-face {
  font-family: 'DS-Digital';
  src: url('fonts/ds-digital.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: transparent;
  color: white;
  overflow: hidden;
}

.speedometer-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.gauges-container {
  display: flex;
  gap: 15px;
  align-items: center;
}

.gauge {
  position: relative;
}
.gauge.speed {
  width: 220px;
  height: 220px;
}
.gauge.rpm {
  width: 130px;
  height: 130px;
}

.gauge-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 3px solid #0f3460;
  position: relative;
  box-shadow: 0 0 20px rgba(15, 52, 96, 0.5);
}

.gauge-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(to top, #ff6b6b, #ff8e8e);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease;
}

.gauge.speed .gauge-needle {
  width: 4px;
  height: 85px;
}
.gauge.rpm .gauge-needle {
  width: 2px;
  height: 45px;
}

.gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ff6b6b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}
.gauge.speed .gauge-center,
.gauge.rpm .gauge-center {
  width: 20px;
  height: 20px;
}

.gauge-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #64b5f6;
}
.gauge.speed .gauge-label {
  bottom: 35px;
  font-size: 14px;
}
.gauge.rpm .gauge-label {
  bottom: 15px;
  font-size: 10px;
}

.gear-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #64b5f6;
  border-radius: 8px;
  width: 50px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DS-Digital', monospace;
  font-size: 50px;
  color: #64b5f6;
  box-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

.indicators-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 0;
}

.indicator {
  width: 30px;
  height: 20px;
  background: #16213e;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ff9800;
  transition: all 0.3s ease;
  border: 2px solid #16213e;
}

.indicator.active {
  background: #ff9800;
  color: white;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.8);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}

.bars-status-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin-top: -80px;
}

.bars-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.bar-item {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #0f3460;
  border-radius: 8px;
  padding: 8px;
  width: 25px;
  height: 120px;
  box-shadow: 0 0 10px rgba(15, 52, 96, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-label {
  font-size: 9px;
  color: #64b5f6;
  margin-bottom: 8px;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.bar-background {
  background: #2a2a3e;
  width: 8px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

.bar-fill {
  width: 100%;
  border-radius: 4px;
  transition: height 0.3s ease;
}

.fuel-bar {
  background: linear-gradient(0deg, #ff6b6b);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.health-bar {
  background: linear-gradient(0deg, #ff6b6b);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
}

.bar-value {
  font-size: 8px;
  color: white;
  text-align: center;
  margin-top: 5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.status-box {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #0f3460;
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 0 15px rgba(15, 52, 96, 0.3);
  display: flex;
  gap: 15px;
  align-items: center;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.status-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.engine-on {
  background: #4caf50;
  color: white;
}
.engine-off {
  background: #f44336;
  color: white;
}
.seatbelt-on {
  background: #4caf50;
  color: white;
}
.seatbelt-off {
  background: #f44336;
  color: white;
}
.lights-off {
  background: #666;
  color: white;
}
.lights-on {
  background: #ffeb3b;
  color: black;
}
.lights-high {
  background: #2196f3;
  color: white;
}

.gauge-marks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gauge-mark {
  position: absolute;
  width: 2px;
  height: 10px;
  background: #0f3460;
  transform-origin: center bottom;
}