#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: var(--text); }

.hud-dist { position: absolute; right: var(--pad); top: 28px; width: clamp(300px, 32vw, 470px); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.d-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; margin-bottom: 9px; }
.d-val b { display: flex; font: 400 40px/1 var(--display); letter-spacing: 0; text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45)); }
.d-val span { font: 600 11px/1 var(--ui); letter-spacing: 0.12em; color: #e8f0f7a0; }
.d-track { position: relative; height: 28px; transform: skewX(-20deg); border: 1px solid #dce6ff60; background: #060c18c4; box-shadow: 0 4px 16px #0006; }
.d-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #e9f3ff80 calc(10% - 2px) 10%); z-index: 2; }
.d-fill, #prog-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; transform: scaleX(0);
  background: repeating-linear-gradient(-55deg, #fff3 0 4px, transparent 4px 13px), linear-gradient(90deg, #8aa918, #e8ff31);
  background-size: 28px 100%, 100% 100%; box-shadow: none; animation: none;
}
.d-car { position: absolute; top: 50%; left: 0; width: 25px; height: 25px; margin: -12px 0 0 -12px; transform: skewX(24deg); color: #fff; filter: drop-shadow(0 2px 3px #000); z-index: 3; }
.d-car svg { width: 100%; height: 100%; fill: currentColor; transform: rotate(180deg); }
.d-flag { position: absolute; right: -2px; top: -4px; bottom: -4px; width: 20px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 8px 8px; border: 1px solid #fff; }

.hud-map { position: absolute; left: clamp(12px, 2.4vw, 44px); bottom: clamp(12px, 3vh, 32px); filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5)); }
.gauge-right { position: absolute; right: clamp(8px, 2vw, 36px); bottom: clamp(4px, 2vh, 22px); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)); }
canvas#speedo, canvas#minimap { display: block; }
body.nitro-on .gauge-right { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(47, 211, 255, 0.45)); }

.hud-time { position: absolute; left: var(--pad); top: 28px; }
.t-label { display: block; margin: 0 0 4px 2px; font: 600 11px/1 var(--ui); letter-spacing: 0.22em; color: #e8f0f7a0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
#time-val { display: flex; font: 400 40px/1 var(--display); background: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45)); }
#time-val i, .d-val b i { box-sizing: content-box; display: inline-block; width: 0.56em; padding: 0 0.16em; margin: 0 -0.16em; text-align: center; font-style: normal; background: var(--glass-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#time-val i.p, .d-val b i.p { width: 0.28em; }
.t-best {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 26px; margin: 8px 0 0 6px; padding: 0 16px 0 34px;
  font: 600 10.5px/1 var(--ui); letter-spacing: 0.18em; color: #e8f0f7a0;
}
.t-best::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg);
  background: var(--hatch-lines) left / 22px 100% no-repeat, var(--volt-fill) left / 22px 100% no-repeat, var(--strip-ticks), rgba(6, 12, 24, 0.6);
  border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006;
}
.t-best b { font: 700 12px/1 var(--ui); letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; }

.toast, #warn, #drift { --c: #e8ff31; --c2: #8aa918; --ink-on: #0b1006; }
.toast.bad, #warn { --c: #ff5a48; --c2: #b3170d; --ink-on: #1a0303; }
.toast.good, #drift { --c: #36daff; --c2: #0b78a3; --ink-on: #021018; }

#warn {
  position: absolute; left: 50%; top: 30px; isolation: isolate; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 26px 0 0;
  transform: translateX(-50%) translateY(-6px); opacity: 0; transition: opacity 0.2s ease, transform 0.3s var(--ease);
  font: 700 12px/1 var(--ui); letter-spacing: 0.2em; color: #fff;
}
#warn.show { opacity: 1; transform: translateX(-50%); }
#warn::before { content: ""; position: absolute; inset: 0; z-index: -2; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.66); border: 1px solid rgba(255, 120, 104, 0.55); box-shadow: 0 4px 16px #0006; }
#warn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: -1; transform-origin: left; transform: skewX(-20deg) scaleX(var(--near, 0)); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); transition: transform 0.25s linear; }
#warn .cap { position: relative; display: grid; place-items: center; width: 54px; height: 100%; }
#warn .cap::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); animation: blink 0.7s steps(2) infinite; }
#warn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-on); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#warn b { font: 400 18px/1 var(--display); letter-spacing: 0.06em; }
#warn span { padding: 4px 8px; color: var(--c); border: 1px solid rgba(255, 120, 104, 0.5); transform: skewX(-20deg); font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: 0.45; } }

#drift {
  position: absolute; left: 50%; bottom: 15vh; isolation: isolate; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 28px 0 0;
  transform: translateX(-50%) translateY(8px); opacity: 0; transition: opacity 0.25s ease, transform 0.35s var(--ease);
}
#drift.show { opacity: 1; transform: translateX(-50%); }
#drift::before { content: ""; position: absolute; inset: 0; z-index: -2; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.6); border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006; }
.dr-label { position: relative; display: grid; place-items: center; height: 100%; padding: 0 18px; font: 700 11px/1 var(--ui); letter-spacing: 0.24em; color: var(--ink-on); }
.dr-label::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); }
#drift b { font: 400 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.dr-u { align-self: flex-end; margin: 0 0 14px -6px; font: 600 12px/1 var(--ui); letter-spacing: 0.2em; color: var(--muted); }
#drift em { padding: 5px 9px; font: 700 15px/1 var(--ui); font-style: normal; color: var(--c); border: 1px solid rgba(54, 218, 255, 0.55); transform: skewX(-20deg); }

#toasts { position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 30px 0 0;
  animation: calloutIn 0.4s var(--ease) backwards;
}
.toast::before { content: ""; position: absolute; inset: 0; z-index: -2; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.62); border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006; }
.toast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: -1; transform-origin: left; transform: skewX(-20deg); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); animation: drain var(--life, 2.2s) linear forwards; }
.toast .ti { position: relative; display: grid; place-items: center; width: 62px; height: 100%; color: var(--ink-on); }
.toast .ti::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); }
.toast .ti svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast.good .ti svg { fill: currentColor; stroke: none; }
.toast b { font: 400 32px/1 var(--display); letter-spacing: 0.03em; white-space: nowrap; }
.toast small { padding: 5px 9px; font: 700 12px/1 var(--ui); letter-spacing: 0.14em; color: var(--c); border: 1px solid currentColor; transform: skewX(-20deg); white-space: nowrap; }
.toast small:empty { display: none; }
.toast.out { animation: calloutOut 0.3s ease forwards; }
@keyframes calloutIn { from { opacity: 0; transform: translateX(-60px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 -40px 0 -40px); } }
@keyframes calloutOut { to { opacity: 0; transform: translateX(40px); } }
@keyframes drain { to { transform: skewX(-20deg) scaleX(0); } }

#hitfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; --fx: 255, 64, 48; }
#hitfx.good { --fx: 54, 218, 255; }
#hitfx.slam { --fx: 237, 255, 49; }
#hitfx::before, #hitfx::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 12vw; transform: skewX(-20deg); background: repeating-linear-gradient(-55deg, rgba(var(--fx), 0.6) 0 7px, rgba(var(--fx), 0.16) 7px 19px); }
#hitfx::before { left: -3vw; -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); }
#hitfx::after { right: -3vw; -webkit-mask: linear-gradient(270deg, #000, transparent); mask: linear-gradient(270deg, #000, transparent); }
#hitfx.on { animation: hit 0.5s ease-out; }
@keyframes hit { 0% { opacity: 1; } 100% { opacity: 0; } }

#count {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: 0;
  font: 400 clamp(150px, 22vw, 320px)/1 var(--display); letter-spacing: 0.01em; padding: 0 0.12em;
  background: var(--glass-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.45));
}
#count.pop { animation: countPop 0.85s var(--ease) both; }
#count.go { background-image: var(--volt-text); filter: drop-shadow(0 0 40px rgba(237, 255, 49, 0.35)) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4)); }
@keyframes countPop {
  0% { opacity: 0; transform: translate(-46%, -50%) skewX(-12deg) scale(1.25); filter: blur(12px); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-54%, -50%) scale(0.94); filter: blur(4px); }
}
body[data-state="race"] #count:not(.go), body[data-state="menu"] #count { display: none; }
#lights { position: absolute; left: 50%; top: calc(40% + clamp(90px, 13vw, 190px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(420px, 60vw); height: 22px; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; }
body[data-state="countdown"] #lights, #lights.go { opacity: 1; }
#lights.out { opacity: 0; transition-duration: 0.6s; }
#lights i { display: block; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.62); border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006; transition: background 0.15s ease, box-shadow 0.15s ease; }
#lights i.on { background: var(--hatch-lines), linear-gradient(90deg, #b3170d, #ff5a48); box-shadow: 0 0 22px rgba(255, 70, 50, 0.45); }
#lights.go i { background: var(--hatch-lines), var(--volt-fill); box-shadow: 0 0 22px rgba(237, 255, 49, 0.45); }

#finish {
  position: fixed; inset: 0; z-index: 30;
  background: linear-gradient(90deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0.42) 42%, rgba(4, 6, 12, 0) 72%);
  animation: fadeIn 0.6s ease backwards;
}
.res { position: absolute; left: var(--pad); top: 46%; transform: translateY(-50%); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 4px; font: 700 11px/1 var(--ui); letter-spacing: 0.3em; color: var(--muted); animation: riseIn 0.6s var(--ease) 0.2s backwards; }
.eyebrow i { width: 14px; height: 2px; background: var(--volt); transform: skewX(-20deg); }
.badge {
  position: relative; display: inline-flex; align-items: center; height: 28px; isolation: isolate; margin: 0 0 8px 8px; padding: 0 16px;
  font: 700 11px/1 var(--ui); letter-spacing: 0.26em; color: #0b1006; animation: riseIn 0.6s var(--ease) 0.3s backwards;
}
.badge::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--hatch-lines), var(--volt-fill); }
.res-time { font: 400 clamp(84px, 11vw, 176px)/1 var(--display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; padding-right: 0.08em; animation: rise 0.9s var(--ease) 0.2s backwards; }
@keyframes rise { from { opacity: 0; transform: translateX(-30px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.res-delta { margin: 6px 0 0 6px; min-height: 18px; font: 700 15px/1 var(--ui); letter-spacing: 0.08em; color: var(--muted); animation: riseIn 0.6s var(--ease) 0.45s backwards; }
.res-delta.faster { color: var(--green); }
.res-delta.slower { color: #ff8a7c; }
.res-stats { display: flex; gap: 14px; margin: 26px 0 0 8px; animation: riseIn 0.6s var(--ease) 0.55s backwards; }
.res-stats div { position: relative; isolation: isolate; padding: 12px 34px 12px 20px; }
.res-stats div::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.6); border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006; }
.res-stats span { display: block; font: 600 9.5px/1 var(--ui); letter-spacing: 0.24em; color: var(--faint); }
.res-stats b { display: block; margin-top: 8px; font: 700 19px/1 var(--ui); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.res-stats i { font-style: normal; }
.res-btns { display: flex; align-items: center; gap: 26px; margin: 34px 0 0 8px; animation: riseIn 0.6s var(--ease) 0.7s backwards; }
.go.small { height: 54px; }
.go.small .go-l { font-size: 24px; }

@media (max-height: 820px) {
  .res { top: 42%; }
  .res-time { font-size: clamp(64px, 15vh, 140px); }
  .res-stats { margin-top: 16px; }
  .res-btns { margin-top: 20px; }
}
.hud-keys {
  position: absolute; top: 22px; right: calc(var(--pad) + 150px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font: 600 9.5px/1 var(--ui); letter-spacing: 0.18em; color: #e8f0f7b0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.k-row { display: flex; gap: 14px; }
.k-row span { display: inline-flex; align-items: center; gap: 4px; }
.k-row kbd { min-width: 20px; height: 17px; padding: 0 5px; font-size: 9px; margin-right: 2px; }
.k-row kbd.w { min-width: 40px; }
.k-fly { display: none; }
body.fly .k-fly { display: flex; }
body.fly .k-gnd { display: none; }
@media (max-width: 1100px) { .hud-keys { display: none; } }

.hud-alt {
  position: absolute; right: clamp(40px, 4vw, 72px); bottom: calc(clamp(4px, 2vh, 22px) + 286px); isolation: isolate;
  display: none; align-items: center; gap: 10px; height: 34px; padding: 0 18px 0 0; --c: #36daff; --c2: #0b78a3;
}
.hud-alt.show { display: flex; }
.hud-alt::before { content: ""; position: absolute; inset: 0; z-index: -2; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.62); border: 1px solid #dce6ff60; box-shadow: 0 4px 16px #0006; }
.al-cap { position: relative; display: grid; place-items: center; height: 100%; padding: 0 12px; font: 700 10px/1 var(--ui); letter-spacing: 0.22em; color: #021018; }
.al-cap::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-20deg); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); }
.hud-alt b { min-width: 2.6em; text-align: right; font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.al-u { font: 600 10px/1 var(--ui); letter-spacing: 0.2em; color: var(--muted); }
.al-bar { position: relative; width: 90px; height: 8px; transform: skewX(-20deg); background: var(--strip-ticks), rgba(6, 12, 24, 0.5); border: 1px solid var(--hair); overflow: hidden; }
.al-bar em { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--hatch-lines), linear-gradient(90deg, var(--c2), var(--c)); transition: transform 0.15s linear; }

@media (max-width: 760px) {
  .hud-dist { width: 40vw; right: 22px; }
  .d-track { height: 23px; }
  #time-val { font-size: 30px; }
  .toast b { font-size: 26px; }
  #drift b { font-size: 40px; }
}
@media (max-width: 680px) {
  .gauge-right { transform: scale(0.66); transform-origin: bottom right; }
  .hud-map { transform: scale(0.6); transform-origin: bottom left; }
}