@font-face { font-family: 'Oswald'; font-weight: 400; src: url('fonts/oswald-400.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 500; src: url('fonts/oswald-500.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 700; src: url('fonts/oswald-700.woff2') format('woff2'); }

/* ── Themes ─────────────────────────────────────────────────────────── */
:root, .theme-vice {
  --a: #ff2f86;          /* primary  */
  --b: #ff9a3c;          /* secondary */
  --c: #ffd36e;          /* highlight */
  --glow: rgba(255, 47, 134, .55);
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, .14);
  --muted: rgba(255, 255, 255, .55);
  --track: rgba(255, 255, 255, .13);
  --warn: #ffb020;
  --red: #ff2b3d;
  --a14: rgba(255,47,134,.14); --a28: rgba(255,47,134,.28); --b22: rgba(255,154,60,.22);
}
.theme-ocean  { --a: #22d8ff; --b: #8a5cff; --c: #c7b6ff; --glow: rgba(34, 216, 255, .5);
                --a14: rgba(34,216,255,.14); --a28: rgba(34,216,255,.28); --b22: rgba(138,92,255,.22); }
.theme-sunset { --a: #ff6a2b; --b: #ffc23d; --c: #fff0b0; --glow: rgba(255, 106, 43, .5);
                --a14: rgba(255,106,43,.14); --a28: rgba(255,106,43,.28); --b22: rgba(255,194,61,.22); }
.theme-mono   { --a: #ffffff; --b: #d9dde6; --c: #ffffff; --glow: rgba(255, 255, 255, .35);
                --a14: rgba(255,255,255,.10); --a28: rgba(255,255,255,.22); --b22: rgba(217,221,230,.2); }
.theme-nve    { --a: #2a2a35; --b: #4a3a55; --c: #2a2a35; --glow: rgba(0, 0, 0, 0); --ink: #1e1e26;
                --dim: rgba(30, 30, 38, .16); --muted: rgba(30, 30, 38, .6); --track: rgba(30, 30, 38, .15);
                --a14: rgba(42,42,53,.1); --a28: rgba(42,42,53,.2); --b22: rgba(74,58,85,.18); }

/* ── Base ───────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
body { font-family: 'Oswald', 'Arial Narrow', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Fixed 512×512 design space; app.js scales it for 1024 DUI */
#stage { position: absolute; left: 0; top: 0; width: 512px; height: 512px; transform-origin: 0 0; }

#hud {
  position: absolute; left: 24px; bottom: 26px; width: 318px;
  opacity: 0; transform: translate3d(-14px, 6px, 0) skewX(-6deg);
  transition: opacity .32s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
}
#hud.show { opacity: 1; transform: translate3d(0, 0, 0) skewX(-6deg); }

.label { font-size: 13px; font-weight: 500; letter-spacing: .22em; color: var(--muted); }

/* ── Flags ──────────────────────────────────────────────────────────── */
.flags { display: flex; gap: 6px; margin: 0 0 2px 4px; }
.flag {
  font-size: 13px; font-weight: 500; letter-spacing: .14em; line-height: 1;
  padding: 4px 7px 4px 8px; border-radius: 3px; color: var(--dim);
  border: 1px solid var(--dim);
  transition: color .15s, border-color .15s, background-color .15s;
}
.flag.on { color: var(--ink); border-color: var(--a); background: var(--a28); }
.flag.warn.on { color: #fff; border-color: var(--warn); background: rgba(255,176,32,.32); }

/* ── Speed + side column ───────────────────────────────────────────── */
.main { display: flex; align-items: flex-end; height: 128px; }
.speed {
  display: flex; font-weight: 700; font-size: 132px; line-height: 1; letter-spacing: 0;
  filter: drop-shadow(0 0 10px var(--glow));
  margin-bottom: -10px;
}
.speed span {
  display: block; width: 64px; text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--c) 30%, var(--b) 62%, var(--a) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.speed span.ghost { background: none; color: var(--dim); }

.side { display: flex; flex-direction: column; align-items: center; margin: 0 0 6px 14px; gap: 3px; }
.gear {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 8px; position: relative;
  font-size: 40px; font-weight: 700; line-height: 1;
  background: var(--a14);
  box-shadow: inset 0 0 0 2px var(--a), 0 0 14px var(--glow);
  transition: box-shadow .15s, background-color .15s, color .15s;
}
.gear.rev  { color: var(--c); background: var(--b22); box-shadow: inset 0 0 0 2px var(--b), 0 0 14px var(--glow); }
.gear.red  { color: #fff; background: rgba(255,43,61,.4); box-shadow: inset 0 0 0 2px var(--red), 0 0 18px rgba(255, 43, 61, .7); }
.unit { font-size: 20px; font-weight: 500; letter-spacing: .12em; margin-top: 2px; }

/* ── RPM ────────────────────────────────────────────────────────────── */
.rpm {
  position: relative; height: 12px; margin-top: 10px; overflow: hidden;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px);
          mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px);
}
.rpm-track, .rpm-red, .rpm-fill { position: absolute; top: 0; bottom: 0; }
.rpm-track { left: 0; right: 0; background: var(--track); }
.rpm-red   { right: 0; width: 12.5%; background: rgba(255,43,61,.45); }
.rpm-fill  {
  left: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); will-change: transform;
  background: linear-gradient(90deg, var(--a) 0%, var(--b) 70%, var(--c) 100%);
}
.rpm.red .rpm-fill { background: linear-gradient(90deg, var(--b) 0%, var(--red) 55%, #ff6b7a 100%); }

.foot { display: flex; align-items: center; margin-top: 6px; }
.ticks { display: flex; flex: 1; justify-content: space-between; margin: 0 12px 0 10px; }
.ticks i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); width: 10px; text-align: center; }
.ticks i.r { color: var(--red); }

.fuel { display: flex; align-items: center; gap: 7px; }
.fuel.off { display: none; }
.fuel-bar {
  position: relative; width: 58px; height: 8px; background: var(--track); overflow: hidden;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px);
          mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px);
}
.fuel-fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(1);
  background: linear-gradient(90deg, var(--a), var(--b)); transition: transform .6s ease;
}
.fuel.low .fuel-fill { background: var(--warn); }

/* ── Hologram frame accents ────────────────────────────────────────── */
.corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--a); opacity: .7; }
.corner.tl { left: -8px; top: -6px;  border-left-width: 2px; border-top-width: 2px; }
.corner.br { right: -8px; bottom: -6px; border-right-width: 2px; border-bottom-width: 2px; }
.theme-nve .corner { opacity: .35; }

/* Redline pulse: only runs while redlining so the DUI stays idle otherwise */
@keyframes pulse { 50% { opacity: .55; } }
.gear.red { animation: pulse .22s steps(2) infinite; }