:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #090b10;
  color: #f7f8fa;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }

.game {
  position: relative;
  width: min(100vw, 500px);
  height: 100dvh;
  min-height: 600px;
  margin: auto;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #202735 0, #0d1119 36%, #080a0e 75%);
}

.topbar {
  height: 9%;
  padding: max(12px, env(safe-area-inset-top)) 18px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 42px;
  gap: 12px;
  align-items: end;
  background: rgba(5, 7, 10, .86);
  border-bottom: 1px solid #252a34;
}

.topbar div { display: flex; flex-direction: column; }
.topbar span, .rpm-label span, .gear span { font-size: 10px; letter-spacing: .16em; color: #8e97a6; }
.topbar strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.topbar .timer { text-align: right; }
#restart { border: 0; border-radius: 50%; height: 38px; background: #222833; font-size: 22px; }

.track { position: absolute; top: 9%; right: 0; bottom: 0; left: 0; height: auto; overflow: hidden; }
.road {
  position: absolute;
  inset: 0;
  background: #161b20;
}
#trackCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.car {
  position: absolute; z-index: 2; left: 50%; bottom: 36%; width: 78px; height: 112px;
  transform: translateX(calc(-50% + var(--steer-x, 0px))) rotate(var(--steer-angle, 0deg));
  filter: drop-shadow(0 8px 7px #000b);
  transform-origin: 50% 42%;
}
.car img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  z-index: 1;
}
.exhaust-flame {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -14px;
  width: 15px;
  height: 36px;
  border-radius: 55% 55% 70% 70%;
  opacity: 0;
  transform: translateX(-50%) scale(.2);
  transform-origin: 50% 0;
  background: radial-gradient(ellipse at 50% 10%, #fff 0 13%, #86d8ff 16% 31%, #fff36a 35% 53%, #ff791f 58% 79%, transparent 84%);
  filter: brightness(1.35) drop-shadow(0 0 9px #ff781f) drop-shadow(0 0 7px #46aaff);
  pointer-events: none;
}
.car.shift-pop .exhaust-flame { animation: exhaust-pop 290ms steps(1, end); }
@keyframes exhaust-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(.15); }
  12% { opacity: 1; transform: translateX(-50%) scale(.8, 1.25) rotate(-4deg); }
  30% { opacity: .28; transform: translateX(-50%) scale(.45, .55); }
  46% { opacity: 1; transform: translateX(-50%) scale(1, .92) rotate(5deg); }
  66% { opacity: .18; transform: translateX(-50%) scale(.35, .4); }
  78% { opacity: .82; transform: translateX(-50%) scale(.72, .62); }
  100% { opacity: 0; transform: translateX(-50%) scale(.1); }
}
.throttling .car { filter: drop-shadow(0 8px 7px #000b) drop-shadow(0 0 4px #ff354455); }

.lights { position: absolute; z-index: 4; top: 10px; left: 50%; transform: translateX(-50%); display: flex; padding: 6px; gap: 6px; background: #070809; border-radius: 20px; }
.lights i { width: 25px; height: 25px; border-radius: 50%; background: #321316; box-shadow: inset 0 0 6px #000; }
.lights i.on { background: #ff3441; box-shadow: 0 0 18px #ff2433; }
.lights.go i { background: #43ef77; box-shadow: 0 0 18px #2cff6d; }
.lights.hidden {
  opacity: 0;
  transform: translate(-50%, -18px) scale(.88);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
}
.message { position: absolute; z-index: 5; top: 55px; width: 100%; text-align: center; font-weight: 900; font-size: 21px; font-style: italic; letter-spacing: .08em; text-shadow: 0 2px 8px #000; }

.dashboard {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 12px;
  height: 34%;
  padding: 5px 18px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: transparent;
}
.shift-feedback {
  position: relative;
  z-index: 14;
  height: 25px;
  text-align: center;
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: .055em;
  color: #79ffab;
  transform: translateY(clamp(-155px, -18vh, -112px));
  text-shadow: 0 2px 4px #000, 0 0 10px #21e878, 0 0 18px #000;
  pointer-events: none;
}
.shift-feedback.bad { color: #ff6973; text-shadow: 0 2px 4px #000, 0 0 10px #ff3444, 0 0 18px #000; }
.rpm-label { display: flex; justify-content: space-between; align-items: end; }
.rpm-label strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.rpm-track { position: relative; height: 22px; margin-top: 4px; border: 2px solid #343b48; border-radius: 5px; overflow: hidden; background: #151922; }
.rpm-zone { position: absolute; top: 0; bottom: 0; z-index: 1; }
.rpm-zone.good { left: 72%; width: 18%; background: #674f16; }
.rpm-zone.perfect { left: 80%; width: 7%; background: #237542; }
.rpm-fill { height: 100%; width: 0; background: linear-gradient(90deg, #44c86c, #f2ce45 70%, #f0444f); opacity: .8; }
.rpm-needle { position: absolute; z-index: 3; top: -2px; bottom: -2px; left: 0; width: 4px; background: white; box-shadow: 0 0 8px white; }
.rpm-scale { display: flex; justify-content: space-between; color: #697281; font-size: 10px; margin-top: 3px; }
.readouts { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 32%; }
.readouts > div { display: flex; flex-direction: column; align-items: center; }
.readouts strong { font-size: clamp(38px, 12vw, 58px); line-height: 1; font-variant-numeric: tabular-nums; }
.readouts span { color: #8e97a6; font-size: 11px; letter-spacing: .14em; }
.readouts .gear strong { color: #ffcf3f; }
.readouts .speed-readout {
  position: absolute;
  z-index: 16;
  left: 96px;
  bottom: max(212px, calc(env(safe-area-inset-bottom) + 204px));
  width: 58px;
}

.controls { flex: 1; min-height: 132px; display: flex; align-items: center; justify-content: center; }
.control-ring {
  position: relative;
  width: min(38vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
  touch-action: none;
  transform: translateX(min(12vw, 52px));
}
.steering-wheel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 8px #000b);
  transform: rotate(var(--wheel-angle, 0deg));
  will-change: transform;
}
.gear-mark {
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #687488;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  pointer-events: none;
}
.gear-up { top: 8px; }
.gear-down { bottom: 8px; }
.center-point {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px #fff;
  pointer-events: none;
}
.control-ring.active .steering-wheel { filter: drop-shadow(0 7px 8px #000b) brightness(1.08); }
.control-ring.shift-up .gear-up,
.control-ring.shift-down .gear-down { color: #65e895; text-shadow: 0 0 12px #65e895; }

.rpm-meter {
  position: absolute;
  z-index: 12;
  left: 0;
  bottom: max(285px, 36vh);
  width: 82px;
  height: min(20vh, 150px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.minimap-panel {
  position: absolute;
  z-index: 13;
  left: 9px;
  bottom: calc(max(285px, 36vh) + min(20vh, 150px) + 10px);
  width: 94px;
  height: 140px;
  padding: 6px;
  border: 1px solid #ffffff28;
  border-radius: 12px;
  background: #071009b8;
  box-shadow: 0 5px 14px #0008, inset 0 0 18px #18391d55;
  pointer-events: none;
}
#minimap { display: block; width: 100%; height: 100%; }
.rpm-meter strong {
  padding-left: 4px;
  color: #aab2bf;
  font-size: 9px;
  letter-spacing: .15em;
}
.rpm-bars {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.rpm-bars i { display: block; height: 6px; opacity: .34; border-radius: 0 4px 4px 0; background: #35e66e; box-shadow: none; filter: grayscale(1) brightness(.58); transition: opacity 45ms linear, filter 45ms linear; }
.rpm-bars i.active {
  opacity: 1;
  filter: brightness(1.85) saturate(1.5);
  box-shadow: 0 0 5px #ffffffcc, 0 0 11px #ffffff80;
}
.rpm-bars i:nth-child(1) { width: 24%; }
.rpm-bars i:nth-child(2) { width: 30%; }
.rpm-bars i:nth-child(3) { width: 36%; }
.rpm-bars i:nth-child(4) { width: 42%; }
.rpm-bars i:nth-child(5) { width: 49%; }
.rpm-bars i:nth-child(6) { width: 57%; background: #71df50; }
.rpm-bars i:nth-child(7) { width: 65%; background: #b8dd3d; }
.rpm-bars i:nth-child(8) { width: 73%; background: #e0cf37; }
.rpm-bars i:nth-child(9) { width: 81%; background: #eda638; }
.rpm-bars i:nth-child(10) { width: 88%; background: #ef763c; }
.rpm-bars i:nth-child(11) { width: 94%; background: #f04c45; }
.rpm-bars i:nth-child(12) { width: 100%; background: #ff303d; }

.gas-pedal {
  position: absolute;
  z-index: 14;
  left: 12px;
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px));
  width: 83px;
  height: 126px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 7px 8px #000b);
  touch-action: none;
}
.gas-pedal img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gas-pedal.active {
  transform: translateY(5px);
  filter: drop-shadow(0 2px 4px #000b) brightness(.84);
}
.brake-pedal {
  position: absolute;
  z-index: 14;
  left: 14px;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: 78px;
  height: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 7px 8px #000b) sepia(.25) saturate(1.5) hue-rotate(320deg);
  touch-action: none;
}
.brake-pedal img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.brake-pedal span {
  position: absolute;
  right: 50%;
  bottom: 9px;
  transform: translateX(50%);
  color: #ffd7d7;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.brake-pedal.active {
  transform: translateY(5px);
  filter: drop-shadow(0 2px 4px #000b) drop-shadow(0 0 8px #ff3434aa) brightness(.82);
}

.gear-buttons {
  position: absolute;
  z-index: 15;
  left: 98px;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 74px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gear-buttons button {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid #ffffff30;
  border-radius: 14px;
  background: #151a22d9;
  color: #f4f7fb;
  box-shadow: 0 5px 12px #0008, inset 0 1px #ffffff18;
  font-size: 25px;
  line-height: 1;
  touch-action: manipulation;
}
.gear-buttons button:active {
  transform: translateY(2px);
  color: #65e895;
  border-color: #65e89580;
  box-shadow: 0 2px 5px #0008, 0 0 12px #65e89545;
}
.gear-buttons img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
  pointer-events: none;
}

.result { position: absolute; z-index: 20; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(5,7,11,.94); backdrop-filter: blur(10px); }
.result.hidden { display: none; }
.result span { letter-spacing: .2em; color: #6be994; font-weight: 800; }
.result strong { margin-top: 14px; font-size: 52px; }
.result p { color: #aeb6c3; }
.result button { margin-top: 24px; padding: 17px 35px; border: 0; border-radius: 14px; background: #ed2f3b; font-weight: 900; }

.start-gate {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(5, 7, 11, .78);
  backdrop-filter: blur(5px);
}
.start-gate.hidden { display: none; }
.driver-portrait {
  width: min(68vw, 270px);
  height: min(34vh, 285px);
  margin-bottom: 2px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px #000b);
  pointer-events: none;
}
.start-gate button {
  min-width: 190px;
  padding: 18px 32px;
  border: 2px solid #ff6972;
  border-radius: 16px;
  background: #d92632;
  color: #fff;
  font-weight: 900;
  font-size: 23px;
  box-shadow: 0 8px 24px #000a;
}
.start-gate span { color: #aab2bf; font-size: 10px; letter-spacing: .14em; }

@media (max-height: 680px) {
  .dashboard { padding-top: 4px; }
  .shift-feedback { height: 20px; font-size: 15px; }
  .controls { min-height: 122px; }
}