/* KRISHIV KART — base page styles + in-race HUD.
   Sizes use --u (1% of a 16:9 viewport height: min(1vh, 0.5625vw)) so the HUD
   scales identically from 1280x720 to 3840x2160 and never overflows narrow windows. */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root {
  --font-game: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ink: #1b1035;
  --ink-soft: rgba(27, 16, 53, 0.72);
  --u: min(1vh, 0.5625vw);
  --hud-pad: calc(var(--u) * 3.2);
  --accent: #ffd23a;
  --accent-2: #38c8ff;
  --accent-3: #ff4f9a;
  --good: #4dff7a;
  /* readable outline for plain (non-gradient) HUD text */
  --ol: 0.07em;
  --outline: calc(var(--ol) * -1) calc(var(--ol) * -1) 0 var(--ink), var(--ol) calc(var(--ol) * -1) 0 var(--ink),
    calc(var(--ol) * -1) var(--ol) 0 var(--ink), var(--ol) var(--ol) 0 var(--ink),
    0 calc(var(--ol) * -1.3) 0 var(--ink), 0 calc(var(--ol) * 1.3) 0 var(--ink),
    calc(var(--ol) * -1.3) 0 0 var(--ink), calc(var(--ol) * 1.3) 0 0 var(--ink),
    0 calc(var(--ol) * 2.6) 0 rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ base page */

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0a14;
  color: #fff;
  font-family: var(--font-game);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

canvas#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* ------------------------------------------------------------------ HUD root */

.hud {
  position: absolute;
  inset: 0;
  font-family: var(--font-game);
  color: #fff;
  line-height: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  contain: layout style;
}
.hud--hidden { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }

/* outlined gradient text: back copy = outline, front copy = gradient fill.
   Both copies are positioned with explicit z-order: the back copy's filter makes
   it a stacking context, which would otherwise paint it OVER a plain front copy. */
.olt { display: inline-grid; position: relative; isolation: isolate; }
.olt > span { grid-area: 1 / 1; white-space: nowrap; position: relative; }
.olt-back {
  z-index: 0;
  color: var(--ink);
  -webkit-text-stroke: var(--stroke, 0.16em) var(--ink);
  filter: drop-shadow(0 0.07em 0 rgba(0, 0, 0, 0.35));
}
.olt-front {
  z-index: 1;
  background: var(--fill, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ lap + timer */

.hud-tl {
  position: absolute;
  left: var(--hud-pad);
  top: var(--hud-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
}
.hud-lap {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.6);
  text-shadow: var(--outline);
}
.hud-lap-label {
  font-size: calc(var(--u) * 4.2);
  color: var(--accent);
  letter-spacing: 0.04em;
}
.hud-lap-num {
  font-size: calc(var(--u) * 9);
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
  transform-origin: 50% 70%;
}
.hud-lap-total { font-size: calc(var(--u) * 5.2); color: #e6e2ff; }
.hud-lap.final .hud-lap-num { color: #ff5a6e; }
.hud-lap.final .hud-lap-label { color: #ff9d2e; }

.hud-timer {
  font-size: calc(var(--u) * 3.6);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 1.4);
  background: linear-gradient(180deg, rgba(40, 26, 92, 0.78), rgba(18, 10, 46, 0.78));
  box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 255, 255, 0.85), 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35);
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(0, 0, 0, 0.5);
  min-width: 6.4em;
  text-align: center;
}
.hud-split {
  font-size: calc(var(--u) * 2.6);
  color: #fff;
  text-shadow: var(--outline);
  opacity: 0;
  transform: translateX(calc(var(--u) * -3));
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: pre;
}
.hud-split.on { opacity: 1; transform: none; }
.hud-split.best { color: var(--good); }

/* v5 lire counter (HUD.setCoins): a gold lira + count; glows at the cap */
.hud-coins {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.5) calc(var(--u) * 0.45) calc(var(--u) * 0.5);
  border-radius: calc(var(--u) * 3);
  background: linear-gradient(180deg, rgba(92, 58, 8, 0.8), rgba(46, 26, 4, 0.8));
  box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 226, 120, 0.9), 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
  transform-origin: 20% 50%;
}
.hud-coins.on { opacity: 1; }
.hud-coins-icon {
  display: inline-grid;
  place-items: center;
  width: calc(var(--u) * 4.2);
  height: calc(var(--u) * 4.2);
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: bold;
  font-size: calc(var(--u) * 2.7);
  color: #8a5606;
  background: radial-gradient(circle at 38% 32%, #fff6b0 0, #ffd23a 45%, #c98a0c 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) #a8700a, 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 246, 196, 0.8);
}
.hud-coins-num {
  font-size: calc(var(--u) * 3.6);
  color: #fff3c4;
  text-shadow: var(--outline);
  min-width: 1.2em;
  text-align: right;
}
.hud-coins-max { font-size: calc(var(--u) * 2.2); color: rgba(255, 236, 170, 0.75); text-shadow: var(--outline); }
.hud-coins.max { box-shadow: 0 0 0 calc(var(--u) * 0.35) #fff1a0, 0 0 calc(var(--u) * 2.4) rgba(255, 206, 40, 0.95); }
.hud-coins.max .hud-coins-num { color: #ffe14d; }
.hud-coins.max .hud-coins-icon { animation: hud-coin-glint 1.1s ease-in-out infinite alternate; }
@keyframes hud-coin-glint { from { filter: brightness(1); } to { filter: brightness(1.35) drop-shadow(0 0 4px #ffe14d); } }

/* v5 Hot Potato fuse (carrier's view): a potato in a draining ring + the seconds left; red + shaking at <= 3 s */
.hud-potato {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-pad) + var(--u) * 7);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin-left: calc(var(--u) * -5.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(40, 20, 6, 0.85) 0 58%, transparent 60%),
    conic-gradient(#ffb347 0 var(--p, 100%), rgba(255, 255, 255, 0.15) var(--p, 100%) 100%);
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 150, 40, 0.75);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hud-potato.on { opacity: 1; transform: none; }
.hud-potato-icon { grid-area: 1 / 1; font-size: calc(var(--u) * 5.2); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4)); }
.hud-potato-num {
  grid-area: 1 / 1;
  align-self: end;
  margin-bottom: calc(var(--u) * -1.4);
  font-size: calc(var(--u) * 3.6);
  color: #fff3c4;
  text-shadow: var(--outline);
}
.hud-potato.hot { animation: hud-potato-shake 0.18s linear infinite; box-shadow: 0 0 calc(var(--u) * 2.4) rgba(255, 60, 30, 0.95); }
.hud-potato.hot .hud-potato-num { color: #ff5a3c; }
@keyframes hud-potato-shake { 0% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3%) rotate(-4deg); } 75% { transform: translateX(3%) rotate(4deg); } 100% { transform: translateX(0) rotate(0); } }

/* ------------------------------------------------------------------ phone badge */

.hud-phone {
  position: absolute;
  top: calc(var(--hud-pad) * 0.8);
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.7) calc(var(--u) * 1.2);
  border-radius: 999px;
  font-size: calc(var(--u) * 2.1);
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, rgba(30, 140, 90, 0.9), rgba(14, 84, 52, 0.9));
  box-shadow: 0 0 0 calc(var(--u) * 0.28) rgba(255, 255, 255, 0.9), 0 calc(var(--u) * 0.4) calc(var(--u) * 1) rgba(0, 0, 0, 0.35);
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -160%);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2, .9, .3, 1.3), padding 0.45s ease;
}
.hud-phone.on { opacity: 1; transform: translate(-50%, 0); }
.hud-phone-text {
  display: inline-block;
  max-width: 16em;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.45s ease, opacity 0.3s ease, margin 0.45s ease;
}
/* collapsed: only the live dot + phone icon remain (the negative margin cancels the flex gap) */
.hud-phone:not(.expanded) { padding-right: calc(var(--u) * 1.2); }
.hud-phone:not(.expanded) .hud-phone-text { max-width: 0; opacity: 0; margin-left: calc(var(--u) * -0.8); }
.hud-phone.lost { background: linear-gradient(180deg, rgba(232, 58, 70, 0.94), rgba(150, 18, 38, 0.94)); }
.hud-phone.lost .hud-phone-dot {
  background: #ffd5d5;
  box-shadow: 0 0 calc(var(--u) * 1) #ff7a7a;
  animation: hud-blink 0.6s steps(1, end) infinite;
}
.hud-phone-dot {
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  border-radius: 50%;
  background: #7dffb0;
  box-shadow: 0 0 calc(var(--u) * 1) #7dffb0;
  animation: hud-pulse 1.6s ease-in-out infinite;
}
.hud-phone-icon { font-size: 1.15em; text-shadow: none; }

/* ------------------------------------------------------------------ item slot */

.hud-item {
  position: absolute;
  right: var(--hud-pad);
  top: var(--hud-pad);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.hud-item-ring {
  position: absolute;
  inset: calc(var(--u) * -1.35);
  border-radius: 33%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
  box-shadow: 0 0 calc(var(--u) * 2.2) rgba(255, 255, 255, 0.55);
}
.hud-item-ring-spin {
  position: absolute;
  inset: -40%;
  background: conic-gradient(#ff4f6d, #ffb02e, #fff24d, #4dff7a, #38c8ff, #8f6bff, #ff4fd0, #ff4f6d);
  animation: hud-spin 0.9s linear infinite;
  animation-play-state: paused;
}
.hud-item.rolling .hud-item-ring { opacity: 1; }
.hud-item.rolling .hud-item-ring-spin { animation-play-state: running; }
.hud-item-frame {
  position: absolute;
  inset: 0;
  border-radius: 28%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #4a36b8 0%, #2a1d78 55%, #170f46 100%);
  border: calc(var(--u) * 0.65) solid #ffffff;
  box-shadow:
    0 0 0 calc(var(--u) * 0.45) var(--ink),
    0 calc(var(--u) * 0.9) calc(var(--u) * 1.8) rgba(0, 0, 0, 0.45),
    inset 0 calc(var(--u) * -1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45),
    inset 0 0 0 calc(var(--u) * 0.35) rgba(255, 255, 255, 0.12);
}
/* empty slot: lighter "glass" frame with a faint inner ring */
.hud-item:not(.has) .hud-item-frame {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(74, 54, 184, 0.62) 0%, rgba(30, 20, 92, 0.66) 100%);
  border-color: rgba(255, 255, 255, 0.82);
}
.hud-item-frame::after {
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 30%;
  border: calc(var(--u) * 0.4) dashed rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hud-item:not(.has) .hud-item-frame::after { opacity: 1; }
.hud-item.has:not(.rolling) .hud-item-frame {
  box-shadow:
    0 0 0 calc(var(--u) * 0.45) var(--ink),
    0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--item, #fff) 70%, transparent),
    0 calc(var(--u) * 0.9) calc(var(--u) * 1.8) rgba(0, 0, 0, 0.45),
    inset 0 calc(var(--u) * -1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45),
    inset 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--item, #fff) 35%, transparent);
}
.hud-item-shine {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  height: 42%;
  border-radius: 50% / 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04));
  pointer-events: none;
  z-index: 2;
}
.hud-item-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 9.4);
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-game);
  filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(0, 0, 0, 0.35));
  z-index: 1;
}
.hud-item-burst {
  position: absolute;
  inset: calc(var(--u) * -1.5);
  border-radius: 34%;
  border: calc(var(--u) * 0.8) solid var(--item, #fff);
  box-shadow: 0 0 calc(var(--u) * 2) var(--item, #fff);
  opacity: 0;
  pointer-events: none;
}
.hud-item-count {
  position: absolute;
  right: calc(var(--u) * -1.6);
  bottom: calc(var(--u) * -1.4);
  min-width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  padding: 0 calc(var(--u) * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: calc(var(--u) * 3.6);
  background: linear-gradient(180deg, #ff7a59, #e8263f);
  border: calc(var(--u) * 0.5) solid #fff;
  box-shadow: 0 0 0 calc(var(--u) * 0.35) var(--ink), 0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.4);
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(0, 0, 0, 0.45);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1);
  z-index: 3;
}
.hud-item-count.on { transform: scale(1); }
.hud-item-name {
  position: absolute;
  top: calc(100% + var(--u) * 2.2);
  right: 0;
  font-size: calc(var(--u) * 2.6);
  white-space: nowrap;
  text-shadow: var(--outline);
  color: var(--item, #fff);
  opacity: 0;
  transform: translateY(calc(var(--u) * -1.5));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hud-item-name.on { opacity: 1; transform: none; }
/* Golden Toot: a gold ring around the slot that drains while the window runs */
.hud-item-meter {
  position: absolute;
  inset: calc(var(--u) * -1.1);
  border-radius: 33%;
  background: conic-gradient(#fff3a0 0 var(--p, 100%), rgba(255, 255, 255, 0.12) var(--p, 100%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 1.1), #000 calc(100% - var(--u) * 1.05));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 1.1), #000 calc(100% - var(--u) * 1.05));
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 196, 40, 0.9));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.hud-item-meter.on { opacity: 1; }
.hud-item.golden .hud-item-icon { animation: hud-golden 0.5s ease-in-out infinite alternate; }
/* v5: the last throw is still out (Flying Pizza) — the slot is greyed until it is caught */
.hud-item.busy .hud-item-icon { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
/* Beer Rocket riding: the mug glows and bobs */
.hud-item.riding .hud-item-frame {
  box-shadow: 0 0 0 calc(var(--u) * 0.45) var(--ink), 0 0 calc(var(--u) * 3.4) rgba(255, 190, 40, 0.95), inset 0 0 calc(var(--u) * 3) rgba(255, 210, 90, 0.7);
}
.hud-item.riding .hud-item-icon { animation: hud-bob 0.32s ease-in-out infinite alternate; }

/* ------------------------------------------------------------------ espresso splash + capo siren */

/* coffee splattered over the view (Espresso Splash); opacity set by hud.js */
.hud-splash {
  position: absolute;
  inset: 0;
  overflow: hidden;            /* split-screen: stays inside this player's view */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hud-splash.on { visibility: visible; }
/* the espresso cup flying at the screen just before the splat */
.hud-cup {
  position: absolute;
  left: 50%;
  top: 38%;
  font-size: calc(var(--u) * 14);
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-game);
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.5) rgba(0, 0, 0, 0.45));
  visibility: hidden;
  pointer-events: none;
}
.hud-cup.on { visibility: visible; }
.hud-splash svg {
  position: absolute;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  display: block;
  overflow: visible;
  transform-origin: 50% 45%;
  filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1.2) rgba(30, 12, 2, 0.45));
}
.hud-splash-drip { animation: hud-drip 4s cubic-bezier(.4, 0, .6, 1) both; }

/* incoming Capo Crusher: a siren banner at the top of this player's view */
.hud-warn {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 13);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.8) calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: 999px;
  font-size: calc(var(--u) * 4.4);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: var(--outline);
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 calc(var(--u) * 1.6), rgba(0, 0, 0, 0) calc(var(--u) * 1.6) calc(var(--u) * 3.2)),
    linear-gradient(180deg, #ffc23a, #f08a00);
  box-shadow: 0 0 0 calc(var(--u) * 0.5) #fff, 0 0 0 calc(var(--u) * 0.95) var(--ink), 0 0 calc(var(--u) * 4) rgba(255, 170, 30, 0.75);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  white-space: nowrap;
}
.hud-warn.on { visibility: visible; opacity: 1; transition: opacity 0.15s ease; animation: hud-warn-flash 0.6s steps(1, end) infinite; }
.hud-warn.locked {
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 calc(var(--u) * 1.6), rgba(0, 0, 0, 0) calc(var(--u) * 1.6) calc(var(--u) * 3.2)),
    linear-gradient(180deg, #ff5a4e, #d4142f);
  box-shadow: 0 0 0 calc(var(--u) * 0.5) #fff, 0 0 0 calc(var(--u) * 0.95) var(--ink), 0 0 calc(var(--u) * 5) rgba(255, 60, 40, 0.9);
}
.hud-warn.locked.on { animation-duration: 0.28s; }
.hud-warn-siren {
  position: relative;
  width: calc(var(--u) * 5.2);
  height: calc(var(--u) * 5.2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #ff3b2e 30% 60%, #8f0d12 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) var(--ink);
  overflow: hidden;
}
.hud-warn-siren::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: conic-gradient(rgba(255, 255, 255, 0.95) 0 40deg, transparent 40deg 180deg, rgba(255, 255, 255, 0.95) 180deg 220deg, transparent 220deg);
  animation: hud-spin 0.5s linear infinite;
}
.hud-warn.locked .hud-warn-siren::after { animation-duration: 0.22s; }
.hud-warn-icon {
  font-size: 1.25em;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-game);
  text-shadow: none;
  filter: drop-shadow(0 0 calc(var(--u) * 0.8) #fff2a8);
}

/* ------------------------------------------------------------------ minimap */

.hud-map {
  position: absolute;
  left: var(--hud-pad);
  bottom: var(--hud-pad);
  width: calc(var(--u) * 33);
  height: calc(var(--u) * 29);
  border-radius: calc(var(--u) * 3);
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.86), rgba(18, 11, 48, 0.9));
  box-shadow:
    0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.7),
    0 0 0 calc(var(--u) * 0.62) rgba(27, 16, 53, 0.55),
    0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.35),
    inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.35);
}
.hud-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ bottom-right cluster */

.hud-br {
  position: absolute;
  right: var(--hud-pad);
  bottom: calc(var(--hud-pad) * 0.7);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.2);
}

.hud-speed {
  position: relative;
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  margin-bottom: calc(var(--u) * 1.6);
}
.hud-speed-svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.hud-speed-track {
  fill: none;
  stroke: rgba(18, 10, 46, 0.62);
  stroke-width: 9;
  stroke-linecap: round;
}
.hud-speed-ticks {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.4;
  stroke-dasharray: 0.7 9.3;
  stroke-dashoffset: 0.35;
}
.hud-speed-val {
  fill: none;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 1.6px rgba(120, 200, 255, 0.9));
  transition: stroke-dashoffset 0.08s linear;
}
/* a zero-length dash still draws its round cap: hide the arc at standstill */
.hud-speed.zero .hud-speed-val { opacity: 0; }
.hud-speed.boosting .hud-speed-val { filter: drop-shadow(0 0 3px rgba(255, 150, 40, 1)); }
.hud-speed.star .hud-speed-val { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)); }
.hud-speed.star .hud-speed-svg { animation: hud-hue 0.9s linear infinite; }   /* grays are unaffected */
.hud-speed.star .hud-speed-num { color: #fff6c4; }
.hud-speed-num {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  text-align: center;
  font-size: calc(var(--u) * 6.4);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--outline);
}
.hud-speed.boosting .hud-speed-num { color: #ffe9a0; }
.hud-speed-unit {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  text-align: center;
  font-size: calc(var(--u) * 1.9);
  letter-spacing: 0.12em;
  color: #cfc8ff;
  text-shadow: var(--outline);
}

.hud-drift {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -1.6);
  width: calc(var(--u) * 18);
  transform: translateX(-50%) translateY(calc(var(--u) * 1.5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hud-drift.on { opacity: 1; transform: translateX(-50%); }
.hud-drift-bar {
  display: flex;
  gap: calc(var(--u) * 0.5);
  width: 100%;
  padding: calc(var(--u) * 0.45);
  border-radius: 999px;
  background: rgba(18, 10, 46, 0.78);
  box-shadow: 0 0 0 calc(var(--u) * 0.28) rgba(255, 255, 255, 0.85);
}
.hud-drift.charged .hud-drift-bar {
  box-shadow: 0 0 0 calc(var(--u) * 0.28) var(--tier, #fff), 0 0 calc(var(--u) * 2) var(--tier, #fff);
}
.hud-drift-seg {
  flex: 1;
  height: calc(var(--u) * 1.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.hud-drift-seg i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, var(--seg) 45%, var(--seg) 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.hud-drift-label {
  order: -1;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: 0.1em;
  color: var(--tier, #fff);
  text-shadow: var(--outline);
  min-height: 1em;
}

.hud-place {
  display: flex;
  align-items: flex-start;
  line-height: 0.82;
  transform-origin: 70% 80%;
  filter: drop-shadow(0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.35));
}
.hud-place-num { font-size: calc(var(--u) * 21); --stroke: 0.13em; }
.hud-place-suf { font-size: calc(var(--u) * 8.5); --stroke: 0.17em; margin-top: calc(var(--u) * 1.4); margin-left: calc(var(--u) * 0.4); }
.hud-place.p1 { filter: drop-shadow(0 0 calc(var(--u) * 2.2) rgba(255, 200, 40, 0.65)) drop-shadow(0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.35)); }

/* ------------------------------------------------------------------ center layers */

.hud-center { position: absolute; inset: 0; }

.hud-count {
  position: absolute;
  left: 50%;
  top: 41%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.hud-count.on { visibility: visible; }
.hud-count-text { font-size: calc(var(--u) * 30); --stroke: 0.11em; }
.hud-count.go .hud-count-text { font-size: calc(var(--u) * 26); }
.hud-count-burst {
  position: absolute;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
}
.hud-count.go .hud-count-burst {
  background: radial-gradient(circle, rgba(140, 255, 160, 0.7) 0%, rgba(77, 255, 122, 0.2) 45%, rgba(77, 255, 122, 0) 70%);
}

.hud-flash {
  position: absolute;
  left: 0;
  right: 0;
  top: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.hud-flash.on { visibility: visible; }
.hud-flash-text { font-size: calc(var(--u) * 11); --stroke: 0.14em; letter-spacing: 0.02em; }
.hud-flash.medium .hud-flash-text { font-size: calc(var(--u) * 6.5); --stroke: 0.16em; }
/* optional name pill under a callout ("KABOOM!" → rival's name in their kart color) */
.hud-flash-sub {
  --c: #ffffff;
  display: none;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  margin-top: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.8) calc(var(--u) * 0.45) calc(var(--u) * 0.6);
  border-radius: 999px;
  background: rgba(18, 10, 46, 0.82);
  box-shadow: 0 0 0 calc(var(--u) * 0.28) rgba(255, 255, 255, 0.85);
  font-size: calc(var(--u) * 2.8);
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.hud-flash-sub.on { display: flex; }
.hud-flash-sub::before {
  content: '';
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--u) * 0.25) rgba(255, 255, 255, 0.9);
}

.hud-wrong {
  position: absolute;
  left: 50%;
  top: 30%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2) calc(var(--u) * 1.4) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 7);
  letter-spacing: 0.03em;
  color: #fff;
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 calc(var(--u) * 2), rgba(0, 0, 0, 0) calc(var(--u) * 2) calc(var(--u) * 4)),
    linear-gradient(180deg, #ff5a4e, #d4142f);
  box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff, 0 0 0 calc(var(--u) * 1.05) var(--ink), 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45);
  text-shadow: var(--outline);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(.3, 1.5, .5, 1), opacity 0.2s ease, visibility 0s linear 0.25s;
}
.hud-wrong.on {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.25s cubic-bezier(.3, 1.5, .5, 1), opacity 0.2s ease;
  animation: hud-blink 0.9s steps(1, end) infinite 0.3s;
}
.hud-wrong-icon {
  width: 1.05em;
  height: 1.05em;
  color: #ffe14d;
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(0.05em 0.05em 0 var(--ink));
}

.hud-finish {
  position: absolute;
  left: 50%;
  top: 38%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  opacity: 0;
  visibility: hidden;
}
.hud-finish.on { visibility: visible; }
.hud-finish-band {
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 0.6);
  background: repeating-conic-gradient(#ffffff 0 25%, #1b1035 0 50%) 0 0 / calc(var(--u) * 3.2) calc(var(--u) * 3.2);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) var(--ink), 0 calc(var(--u) * 0.6) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.4);
}
.hud-finish-title {
  font-size: calc(var(--u) * 17);
  --stroke: 0.12em;
  --fill: linear-gradient(180deg, #ffffff 0%, #fff6a8 30%, #ffd23a 55%, #ff9d2e 100%);
}
.hud-finish-place { font-size: calc(var(--u) * 11); --stroke: 0.14em; margin-top: calc(var(--u) * -1.5); }
.hud-finish-time {
  font-size: calc(var(--u) * 3.8);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--outline);
  min-height: 1em;
  margin-bottom: calc(var(--u) * 0.6);
}
.hud-finish.podium .hud-finish-place { filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 220, 90, 0.6)); }

/* ------------------------------------------------------------------ keyframes */

/* ------------------------------------------------------------------ split-screen (SPEC §14.6) */

/* one .hud per view: main.js sets left/top/width/height + its own --u */
.hud--compact { --hud-pad: calc(var(--u) * 2.6); }
.hud--compact .hud-map { display: none; }
.hud--compact .hud-phone { top: calc(var(--u) * 7.4); }
.hud.avoid-tl .hud-tl { left: calc(var(--hud-pad) + var(--avoid, 0px)); }
.hud.avoid-tr .hud-item { right: calc(var(--hud-pad) + var(--avoid, 0px)); }
.hud.avoid-br .hud-br { right: calc(var(--hud-pad) + var(--avoid, 0px)); }
.hud-frame {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--slot, #fff), inset 0 0 0 5px rgba(16, 8, 40, 0.55);
}
.hud--compact .hud-frame { display: block; }
.hud-slot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4) calc(var(--u) * 0.8);
  border-radius: 0 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  background: var(--slot, #fff);
  color: #fff;
  font-size: calc(var(--u) * 3.6);
  letter-spacing: 0.04em;
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(0, 0, 0, 0.45);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.35);
}
.hud-slot[hidden] { display: none; }
/* "P2" tag floating over another human's kart */
.hud-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) calc(var(--u) * 0.45);
  border-radius: calc(var(--u) * 1);
  background: var(--c, #fff);
  border: calc(var(--u) * 0.32) solid #fff;
  color: #fff;
  font-size: calc(var(--u) * 2.8);
  line-height: 1;
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.45);
  box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1) rgba(0, 0, 0, 0.35);
  transform-origin: 50% 100%;
  will-change: transform;
}
.hud-tag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -1.3);
  transform: translateX(-50%);
  border: calc(var(--u) * 0.8) solid transparent;
  border-top-color: #fff;
}

/* shared minimap / standings widget */
.hud-shared {
  position: absolute;
  z-index: 2;
  font-family: var(--font-game);
  color: #fff;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hud-shared[data-kind='center'] .hud-shared-map {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.9), rgba(18, 11, 48, 0.94));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(27, 16, 53, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.hud-shared[data-kind='center'] .hud-shared-list { display: none; }
.hud-shared[data-kind='quad'] {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  background:
    radial-gradient(90% 120% at 20% 10%, rgba(80, 56, 170, 0.55), rgba(0, 0, 0, 0) 60%),
    linear-gradient(160deg, #241552 0%, #120a2e 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.hud-shared[data-kind='quad'] .hud-shared-map {
  position: relative;
  border-radius: calc(var(--u) * 4);
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.86), rgba(18, 11, 48, 0.9));
  box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(255, 255, 255, 0.6);
}
.hud-shared-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 0.55);
  min-width: 0;
}
.hud-st-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 4.2) calc(var(--u) * 2.4) 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 255, 255, 0.07);
  font-size: calc(var(--u) * 2.9);
}
.hud-st-row[hidden] { display: none; }
.hud-st-row.human { background: rgba(255, 255, 255, 0.16); }
.hud-st-row.done .hud-st-name::after { content: ' 🏁'; font-size: 0.8em; }
.hud-st-pos { text-align: right; color: #ffd23a; text-shadow: var(--outline); }
.hud-st-chip { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * 0.35) #fff; }
.hud-st-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--outline); }
.hud-st-tag {
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.8);
  font-size: 0.8em;
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.4);
}
.hud-st-tag:empty { display: none; }

/* ------------------------------------------------------------------ sandbox (free roam; notes/sandbox-design.md §10) */

/* hud.setMode('drive' | 'foot') adds .hud--sandbox + .hud--drive / .hud--foot. Race mode
   never shows any of this; the sandbox hides the race-only widgets. */
.hud-hp, .hud-loc, .hud-city, .hud-inv, .hud-xh, .hud-prompt, .hud-ko, .hud-dmg { display: none; }
.hud--sandbox .hud-lap, .hud--sandbox .hud-timer, .hud--sandbox .hud-split, .hud--sandbox .hud-coins,
.hud--sandbox .hud-place, .hud--sandbox .hud-wrong, .hud--sandbox .hud-finish, .hud--sandbox .hud-map { display: none; }

/* kart widgets fade out on foot, the weapon strip fades in */
.hud--sandbox .hud-item, .hud--sandbox .hud-br { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s; }
.hud--foot .hud-item, .hud--foot .hud-br {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 2));
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* location line (top-left): street + neighbourhood */
.hud--sandbox .hud-loc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hud--sandbox .hud-loc.on { opacity: 1; }
.hud-loc-street {
  font-size: calc(var(--u) * 3.9);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: var(--outline);
  white-space: nowrap;
  max-width: calc(var(--u) * 52);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-loc-area {
  font-size: calc(var(--u) * 2.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--outline);
  white-space: nowrap;
}
.hud-loc-street:empty, .hud-loc-area:empty { display: none; }
.hud-loc.nostreet .hud-loc-area { font-size: calc(var(--u) * 3); }

/* HP bar (top-left, on foot) */
.hud--foot .hud-hp { display: flex; }
.hud-hp {
  align-items: center;
  gap: calc(var(--u) * 1);
  --hpc: #4dff7a;
  transform-origin: 10% 50%;
}
.hud-hp[data-tier='mid'] { --hpc: #ffd23a; }
.hud-hp[data-tier='low'] { --hpc: #ff4a5a; }
.hud-hp-heart {
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 5.1);
  overflow: visible;
  filter: drop-shadow(0 calc(var(--u) * 0.35) 0 rgba(0, 0, 0, 0.35));
}
.hud-hp-heart path:first-child { fill: #ff4a6a; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.hud-hp-heart .hud-hp-heart-hi { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.2; stroke-linecap: round; }
.hud--lowhp .hud-hp-heart { animation: hud-heartbeat 0.8s ease-in-out infinite; }
.hud-hp-bar {
  position: relative;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 3.6);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 10, 46, 0.8);
  box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--u) * 0.62) rgba(27, 16, 53, 0.55),
    0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35);
}
.hud-hp-ghost, .hud-hp-fill {
  position: absolute;
  inset: calc(var(--u) * 0.5);
  border-radius: 999px;
  transform-origin: 0 50%;
}
.hud-hp-ghost { background: #fff3b0; transition: transform 0.5s ease 0.35s; }
.hud-hp-fill {
  background: linear-gradient(180deg, #ffffff 0%, var(--hpc) 42%, var(--hpc) 70%, color-mix(in srgb, var(--hpc) 70%, #000) 100%);
  transition: transform 0.12s ease-out, background 0.3s ease;
}
.hud-hp-num {
  font-size: calc(var(--u) * 4.2);
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;
  color: #fff;
  text-shadow: var(--outline);
}
.hud-hp[data-tier='low'] .hud-hp-num { color: #ff8a8a; }

/* damage flash + low-HP pulse (hud.js animates the opacity) and the KO overlay */
.hud--foot .hud-dmg, .hud--foot .hud-ko { display: flex; }
.hud-dmg {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(255, 20, 50, 0) 55%, rgba(255, 24, 56, 0.5) 85%, rgba(200, 0, 40, 0.75) 100%);
}
.hud--lowhp .hud-dmg { animation: hud-lowhp 1.1s ease-in-out infinite; }
.hud-ko {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.4);
  background: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(40, 0, 18, 0.28) 0%, rgba(90, 0, 26, 0.55) 70%, rgba(50, 0, 16, 0.82) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.hud-ko.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.hud-ko-text {
  font-size: calc(var(--u) * 17);
  --stroke: 0.12em;
  --fill: linear-gradient(180deg, #ffffff 0%, #ffd6d6 26%, #ff4a5a 58%, #c2002c 100%);
  margin-top: calc(var(--u) * -6);
}
.hud-ko-sub {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.4) calc(var(--u) * 0.6);
  border-radius: 999px;
  background: rgba(18, 10, 46, 0.85);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 255, 255, 0.9);
  font-size: calc(var(--u) * 3.4);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.5);
  font-variant-numeric: tabular-nums;
}
.hud-ko-sub:empty { display: none; }
/* back on your feet: the words go at once (hud.js empties the countdown), only the red tint fades out */
.hud-ko:not(.on) .hud-ko-text { visibility: hidden; }

/* city map (bottom-left, both sandbox modes; per view in split screen too) */
.hud--sandbox .hud-city.on { display: block; }
.hud-city {
  position: absolute;
  left: var(--hud-pad);
  bottom: var(--hud-pad);
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 31);
  border-radius: calc(var(--u) * 3);
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.88), rgba(18, 11, 48, 0.92));
  box-shadow:
    0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.75),
    0 0 0 calc(var(--u) * 0.62) rgba(27, 16, 53, 0.55),
    0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.35);
}
.hud-city-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* north badge on the top edge */
.hud-city-n {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--u) * 0.7);
  transform: translateX(-50%);
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: calc(var(--u) * 2.1);
  color: #fff;
  background: linear-gradient(180deg, #ff5a6e, #d4143a);
  box-shadow: 0 0 0 calc(var(--u) * 0.28) #fff, 0 0 0 calc(var(--u) * 0.5) rgba(27, 16, 53, 0.6);
  text-shadow: 0 calc(var(--u) * 0.15) 0 rgba(0, 0, 0, 0.4);
}
/* a soft inner frame over the canvas edge */
.hud-city::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 calc(var(--u) * 2.4) rgba(10, 4, 30, 0.75);
  pointer-events: none;
}
.hud.avoid-bl .hud-city { left: calc(var(--hud-pad) + var(--avoid, 0px)); }

/* paused: the whole city replaces the minimap — under the HP / location line, the city's portrait
   shape, on the view's outer side (.ov-right) and never wider than --ovmax (hud.js keeps it clear of
   the pause card in the middle of the screen) */
.hud-cityov { display: none; }
.hud--sandbox.hud--paused .hud-cityov.on { display: block; }
.hud-cityov {
  position: absolute;
  z-index: 5;
  left: var(--hud-pad);
  bottom: var(--hud-pad);
  height: calc(100% - var(--u) * 21 - var(--hud-pad));
  aspect-ratio: 0.62;
  max-width: var(--ovmax, 40%);
  border-radius: calc(var(--u) * 3);
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.94), rgba(18, 11, 48, 0.96));
  box-shadow:
    0 0 0 calc(var(--u) * 0.36) rgba(255, 255, 255, 0.85),
    0 0 0 calc(var(--u) * 0.7) rgba(27, 16, 53, 0.6),
    0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45);
}
.hud.ov-right .hud-cityov { left: auto; right: var(--hud-pad); }
.hud-cityov-credit {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 0.8);
  text-align: center;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(var(--u) * 1.5);
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 calc(var(--u) * 0.4) rgba(10, 4, 30, 0.9);
}
/* (the minimap, and the bottom widgets on the overview's side, step aside while paused) */
.hud--sandbox.hud--paused .hud-city,
.hud--sandbox.hud--paused.ov-right .hud-inv, .hud--sandbox.hud--paused.ov-right .hud-br { visibility: hidden; }

/* weapon strip (bottom-right, on foot) */
.hud--foot .hud-inv { display: flex; }
.hud-inv {
  position: absolute;
  right: var(--hud-pad);
  bottom: var(--hud-pad);
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 1.6);
  --w: #ffffff;
  animation: hud-inv-in 0.28s cubic-bezier(.2, .9, .3, 1.2) both;
}
.hud.avoid-br .hud-inv { right: calc(var(--hud-pad) + var(--avoid, 0px)); }
.hud-inv-info { display: flex; align-items: baseline; gap: calc(var(--u) * 1.4); margin-right: calc(var(--u) * 0.6); }
.hud-inv-name {
  font-size: calc(var(--u) * 3.1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w);
  text-shadow: var(--outline);
}
.hud-inv-ammo {
  font-size: calc(var(--u) * 5.2);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: var(--outline);
}
.hud-inv.dry .hud-inv-ammo { color: #ff6a6a; }
.hud-inv-row { display: flex; align-items: flex-end; gap: calc(var(--u) * 2.9); }
.hud-inv-slot {
  position: relative;
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
  --w: #ffffff;
  opacity: 0.8;
  transform-origin: 50% 100%;
  transition: transform 0.18s cubic-bezier(.3, 1.4, .5, 1), opacity 0.18s ease;
}
.hud-inv-slot.sel { opacity: 1; transform: scale(1.22); z-index: 1; }
.hud-inv-frame {
  position: absolute;
  inset: 0;
  border-radius: 28%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #4a36b8 0%, #2a1d78 55%, #170f46 100%);
  border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) var(--ink), 0 calc(var(--u) * 0.7) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.4),
    inset 0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(0, 0, 0, 0.45);
}
.hud-inv-slot:not(.has) .hud-inv-frame {
  background: linear-gradient(160deg, rgba(74, 54, 184, 0.55) 0%, rgba(30, 20, 92, 0.6) 100%);
  border-color: rgba(255, 255, 255, 0.6);
}
.hud-inv-slot:not(.has) .hud-inv-frame::after {
  content: '';
  position: absolute;
  inset: 26%;
  border-radius: 30%;
  border: calc(var(--u) * 0.35) dashed rgba(255, 255, 255, 0.3);
}
.hud-inv-slot.sel .hud-inv-frame {
  border-color: #ffffff;
  box-shadow: 0 0 0 calc(var(--u) * 0.4) var(--ink), 0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--w) 75%, transparent),
    0 calc(var(--u) * 0.7) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.4), inset 0 0 calc(var(--u) * 2.6) color-mix(in srgb, var(--w) 38%, transparent);
}
.hud-inv-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 6.4);
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-game);
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.35));
  z-index: 1;
}
.hud-inv-slot.dry .hud-inv-icon { filter: grayscale(1) brightness(0.75); opacity: 0.6; }
.hud-inv-count {
  position: absolute;
  right: calc(var(--u) * -1.2);
  bottom: calc(var(--u) * -1.1);
  min-width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: calc(var(--u) * 2.8);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #4a36b8, #241767);
  border: calc(var(--u) * 0.4) solid #fff;
  box-shadow: 0 0 0 calc(var(--u) * 0.3) var(--ink);
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.hud-inv-count:empty { display: none; }
.hud-inv-slot.dry .hud-inv-count { background: linear-gradient(180deg, #ff7a59, #e8263f); }
/* bazooka reload: a ring around its slot fills toward the next round */
.hud-inv-ring {
  position: absolute;
  inset: calc(var(--u) * -1);
  border-radius: 33%;
  background: conic-gradient(#ffd27a 0 var(--p, 0%), rgba(255, 255, 255, 0.14) var(--p, 0%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 0.95), #000 calc(100% - var(--u) * 0.9));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 0.95), #000 calc(100% - var(--u) * 0.9));
  filter: drop-shadow(0 0 calc(var(--u) * 0.8) rgba(255, 170, 60, 0.85));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.hud-inv-ring.on { opacity: 1; }
.hud--ko .hud-inv { opacity: 0.45; filter: grayscale(0.8); }

/* crosshair + hit marker (view centre, on foot) */
.hud--foot .hud-xh { display: block; }
.hud-xh {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  --xh: #ffffff;
}
.hud-xh.on { opacity: 1; }
.hud-xh.lock { --xh: #ff5a4e; }
.hud-xh-tick {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 0.6);
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * -1) 0 0 calc(var(--u) * -0.3);
  border-radius: calc(var(--u) * 0.3);
  background: var(--xh);
  box-shadow: 0 0 0 calc(var(--u) * 0.24) rgba(16, 8, 40, 0.85);
  transform: rotate(var(--a)) translateY(calc(var(--u) * -2.4));
  transition: transform 0.15s ease, background 0.15s ease;
}
.hud-xh-tick:nth-child(1) { --a: 0deg; }
.hud-xh-tick:nth-child(2) { --a: 90deg; }
.hud-xh-tick:nth-child(3) { --a: 180deg; }
.hud-xh-tick:nth-child(4) { --a: 270deg; }
/* a target inside the auto-aim cone: red ticks pull in around a ring */
.hud-xh.lock .hud-xh-tick { transform: rotate(var(--a)) translateY(calc(var(--u) * -3.1)); }
.hud-xh::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  margin: calc(var(--u) * -2.3) 0 0 calc(var(--u) * -2.3);
  border-radius: 50%;
  border: calc(var(--u) * 0.45) solid var(--xh);
  box-shadow: 0 0 0 calc(var(--u) * 0.22) rgba(16, 8, 40, 0.85), inset 0 0 0 calc(var(--u) * 0.22) rgba(16, 8, 40, 0.85);
  opacity: 0;
  transform: scale(1.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.hud-xh.lock::before { opacity: 1; transform: scale(1); }
.hud-xh-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  margin: calc(var(--u) * -0.4) 0 0 calc(var(--u) * -0.4);
  border-radius: 50%;
  background: var(--xh);
  box-shadow: 0 0 0 calc(var(--u) * 0.24) rgba(16, 8, 40, 0.85);
  transition: background 0.15s ease;
}
.hud-hit { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; visibility: hidden; }
.hud-hit.on { visibility: visible; }
.hud-hit i {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 2.1);
  margin: calc(var(--u) * -1.05) 0 0 calc(var(--u) * -0.275);
  border-radius: calc(var(--u) * 0.3);
  background: #ffffff;
  box-shadow: 0 0 0 calc(var(--u) * 0.22) rgba(16, 8, 40, 0.8);
  transform: rotate(var(--a)) translateY(calc(var(--u) * -3.4));
}
.hud-hit i:nth-child(1) { --a: 45deg; }
.hud-hit i:nth-child(2) { --a: 135deg; }
.hud-hit i:nth-child(3) { --a: 225deg; }
.hud-hit i:nth-child(4) { --a: 315deg; }
.hud-hit.ko i { background: #ff4a5a; }

/* prompt pill above the crosshair ("ENTER KART", "PRESS F TO EXIT"): your kart and your walker fill
   each view from ~47 % of its height down (1P / 2P / 4P), so the pill stays clear above them */
.hud--sandbox .hud-prompt { display: block; }
.hud-prompt {
  position: absolute;
  left: 50%;
  top: 34%;
  translate: -50% 0;
  padding: calc(var(--u) * 0.9) calc(var(--u) * 2.6) calc(var(--u) * 0.8);
  border-radius: 999px;
  font-size: calc(var(--u) * 3.2);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, rgba(40, 26, 92, 0.9), rgba(18, 10, 46, 0.9));
  box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--u) * 0.6) rgba(27, 16, 53, 0.55),
    0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35);
  text-shadow: 0 calc(var(--u) * 0.22) 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.hud-prompt.on { opacity: 1; visibility: visible; transition: opacity 0.2s ease; animation: hud-prompt-glow 1.2s ease-in-out infinite alternate; }

/* split-screen widget in the sandbox: the city instead of the course */
.hud-shared.city .hud-map-canvas { display: none; }
.hud-shared.city .hud-shared-map { overflow: hidden; }
.hud-shared.city[data-kind='quad'] { grid-template-columns: var(--cityw, 40%) minmax(0, 1fr); }
.hud-shared.city.noplayers[data-kind='quad'] { grid-template-columns: var(--cityw, 40%); justify-content: center; }
.hud-shared.city[data-kind='quad'] .hud-shared-list { gap: calc(var(--u) * 1); }
.hud-shared-credit { display: none; }
.hud-shared.city[data-kind='quad'] .hud-shared-credit {
  display: block;
  position: absolute;
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 1.2);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(var(--u) * 1.6);
  color: rgba(255, 255, 255, 0.55);
}
.hud-pl-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: calc(var(--u) * 1.2);
  row-gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.6);
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(var(--u) * 3);
}
.hud-pl-row[hidden] { display: none; }
.hud-pl-tag {
  grid-row: 1 / 3;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.9);
  font-size: 0.95em;
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 calc(var(--u) * 0.28) #fff;
}
.hud-pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--outline); }
.hud-pl-state { font-size: 0.7em; letter-spacing: 0.08em; color: #cfc8ff; text-shadow: var(--outline); }
.hud-pl-row.ko .hud-pl-state { color: #ff6a7a; }
.hud-pl-hp {
  grid-column: 2 / 4;
  height: calc(var(--u) * 1.2);
  border-radius: 999px;
  background: rgba(18, 10, 46, 0.8);
  overflow: hidden;
  --hpc: #4dff7a;
  visibility: hidden;
}
.hud-pl-row.foot .hud-pl-hp { visibility: visible; }
.hud-pl-hp[data-tier='mid'] { --hpc: #ffd23a; }
.hud-pl-hp[data-tier='low'] { --hpc: #ff4a5a; }
.hud-pl-hp i { display: block; height: 100%; border-radius: 999px; background: var(--hpc); transform-origin: 0 50%; transition: transform 0.2s ease; }

@keyframes hud-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(0.96); } 45% { transform: scale(1.12); } }
@keyframes hud-lowhp { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.5; } }
@keyframes hud-inv-in { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } to { opacity: 1; transform: none; } }
@keyframes hud-prompt-glow {
  from { box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--u) * 0.6) rgba(27, 16, 53, 0.55), 0 0 calc(var(--u) * 0.6) rgba(255, 210, 58, 0); }
  to { box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--u) * 0.6) rgba(27, 16, 53, 0.55), 0 0 calc(var(--u) * 2.6) rgba(255, 210, 58, 0.7); }
}

@keyframes hud-spin { to { transform: rotate(360deg); } }
@keyframes hud-hue { to { filter: hue-rotate(360deg); } }
@keyframes hud-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes hud-blink { 0% { opacity: 1; } 62% { opacity: 0.25; } }
@keyframes hud-golden { from { filter: drop-shadow(0 0 calc(var(--u) * 0.4) #ffd84a) brightness(1); } to { filter: drop-shadow(0 0 calc(var(--u) * 2) #ffd84a) brightness(1.25); } }
@keyframes hud-bob { from { transform: translateY(calc(var(--u) * -0.6)) rotate(-6deg); } to { transform: translateY(calc(var(--u) * 0.6)) rotate(6deg); } }
@keyframes hud-drip { from { transform: translateY(0); } to { transform: translateY(18%); } }
@keyframes hud-warn-flash { 0% { filter: brightness(1.25); } 50% { filter: brightness(0.85); } }

@media (prefers-reduced-motion: reduce) {
  .hud-item-ring-spin, .hud-phone-dot, .hud-wrong.on, .hud-speed.star .hud-speed-svg { animation: none; }
  .hud-warn.on, .hud-warn-siren::after, .hud-splash-drip, .hud-item.golden .hud-item-icon, .hud-item.riding .hud-item-icon { animation: none; }
  .hud--lowhp .hud-hp-heart, .hud--lowhp .hud-dmg, .hud-prompt.on, .hud-inv { animation: none; }
}


/* Free-roam flight instruments, anchored where the weapon strip normally sits. */
.hud-flight { display: none; position: absolute; right: var(--hud-pad); bottom: var(--hud-pad); width: calc(var(--u) * 48); padding: calc(var(--u) * 2.5); border-radius: calc(var(--u) * 2.2); color: #e9faff; background: linear-gradient(135deg, rgba(10, 33, 57, .94), rgba(12, 21, 43, .88)); border: calc(var(--u) * .2) solid rgba(121, 229, 255, .65); box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 3) #07101d66; font-family: system-ui, sans-serif; }
.hud--flight .hud-flight { display: block; }
.hud--flight .hud-inv, .hud--flight .hud-hp, .hud--flight .hud-xh { display: none; }
.hud-flight-status { color: #8ce8ff; font-size: calc(var(--u) * 1.8); font-weight: 800; letter-spacing: .12em; }
.hud-flight-stats { display: flex; gap: calc(var(--u) * 4); margin: calc(var(--u) * 1.4) 0; }
.hud-flight-stats > div { display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
.hud-flight-stats b { font-size: calc(var(--u) * 5); font-variant-numeric: tabular-nums; line-height: 1; }
.hud-flight-stats span { font-size: calc(var(--u) * 1.3); letter-spacing: .08em; color: #b7cadc; }
.hud-flight-boost { display: flex; gap: calc(var(--u) * 1.5); align-items: center; font-size: calc(var(--u) * 1.4); font-weight: 800; }
.hud-flight-boost-track { flex: 1; height: calc(var(--u) * .7); border-radius: 999px; overflow: hidden; background: #ffffff22; }
.hud-flight-boost-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #2ab6e2, #a8f7ff); transform-origin: left; }
.hud-flight-hint { margin-top: calc(var(--u) * 1.7); white-space: pre-line; font-size: calc(var(--u) * 1.35); line-height: 1.6; font-weight: 600; color: #bfd2e6; }
.hud.avoid-br .hud-flight { right: calc(var(--hud-pad) + var(--avoid, 0px)); }
.hud--compact .hud-flight { width: calc(var(--u) * 43); padding: calc(var(--u) * 2); }
.hud--sandbox.hud--paused.ov-right .hud-flight { visibility: hidden; }

.hud-flight-systems { margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.4); font-weight: 700; color: #e6d9a5; letter-spacing: .02em; }