:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #040711;
  color: #f8fbff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; height: 100vh; overflow: hidden; }
body { background: radial-gradient(circle at top, #153765 0, #07101f 46%, #03050a 100%); }

.shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #050812;
}

.hud {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: min(25rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid rgb(134 213 255 / 28%);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgb(3 10 25 / 86%), rgb(10 31 56 / 72%));
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 36%);
  backdrop-filter: blur(12px);
}

.eyebrow { margin: 0 0 .2rem; color: #6ee7ff; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; }
h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.25rem); }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
dl div { padding: .65rem; border-radius: .8rem; background: rgb(255 255 255 / 8%); }
dt { color: #9db9d8; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
dd { margin: .1rem 0 0; font-size: 1.1rem; font-weight: 800; }
.help { margin: 0; color: #d8e7ff; line-height: 1.45; font-size: .92rem; }

/* Race complete overlay shown when lap counting reaches the finish. */
.finish-banner {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(.96);
  min-width: min(28rem, calc(100vw - 2rem));
  padding: 1.2rem 1.4rem;
  border: 1px solid rgb(255 236 128 / 54%);
  border-radius: 1.2rem;
  background: linear-gradient(135deg, rgb(16 12 3 / 92%), rgb(80 45 8 / 82%));
  box-shadow: 0 1.4rem 4rem rgb(0 0 0 / 50%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.finish-banner p { margin: 0 0 .35rem; color: #ffe66d; text-transform: uppercase; letter-spacing: .18em; font-weight: 900; }
.finish-banner strong { display: block; font-size: clamp(1.1rem, 3vw, 1.8rem); }
.finish-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 680px) {
  .hud {
    inset: auto .75rem .75rem .75rem;
    width: auto;
    padding: .85rem;
  }
  dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .help { font-size: .82rem; }
}