/* ============================================================
   BASE — reset, typography, atmosphere
   ============================================================ */

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

html, body { height: 100%; }

body {
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt);
  background: var(--void);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body, button, input { user-select: none; }
input { user-select: text; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }
::selection { background: var(--ember); color: var(--void); }

/* ---- Type scale -------------------------------------------- */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--txt-hi);
}

/* The signature: display type is sheared forward. Motion, baked in. */
.display--rake { transform: skewX(-7deg); }

.micro {
  font-family: var(--f-ui);
  font-size: var(--micro-size);
  font-weight: 500;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* Indexed micro-label: "01 — SELECT DRIVER". Technical, deliberate. */
.micro--idx::before {
  content: attr(data-idx);
  color: var(--ember);
  margin-right: 0.7em;
}

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.dim  { color: var(--txt-dim); }
.hot  { color: var(--ember); }
.cold { color: var(--ice); }

/* ---- Atmosphere: grain + vignette ---------------------------
   Film grain is what separates a designed dark UI from a flat
   CSS gradient. Rendered once as SVG turbulence, tiled.
   ------------------------------------------------------------- */

#grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain-drift 6s steps(6) infinite;
  will-change: transform;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, -2%); }
  33%  { transform: translate(2%, -3%); }
  50%  { transform: translate(-2%, 3%); }
  66%  { transform: translate(3%, 2%); }
  83%  { transform: translate(-3%, 1%); }
  100% { transform: translate(0, 0); }
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8990;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(3, 6, 18, 0.86) 100%);
}

/* Cold ambient bloom behind menu screens — the "city outside" */
#ambience {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(64% 50% at 14% 112%, rgba(53, 223, 240, 0.20), transparent 64%),
    radial-gradient(54% 44% at 92% -12%, rgba(255, 63, 164, 0.22), transparent 66%),
    radial-gradient(42% 36% at 74% 98%, rgba(255, 201, 60, 0.09), transparent 66%),
    var(--void);
}

/* Faint perspective grid — one motif, echoed from the game world */
#horizon {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 46vh;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(53, 223, 240, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 223, 240, 0.13) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  animation: horizon-run 3.2s linear infinite;
}

@keyframes horizon-run {
  to { background-position: 0 70px, 0 0; }
}

/* ---- Scrollbars -------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hi); }
::-webkit-scrollbar-thumb:hover { background: var(--ember-lo); }

/* ---- Accessibility ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #grain, #horizon { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}