/* ==========================================================================
   LOW POLY DERBY — all screen UI.

   Art direction: a scrapyard fight night. Dark oiled steel, hazard tape, stencilled
   condensed capitals, bare high-contrast readouts. Nothing here may look like default
   browser chrome, and no image or font files exist — so the whole identity is built
   from gradients, clip-paths, borders and a system condensed-type stack.

   Two rules drive most of the odd choices below:

   1. ONE SCALING KNOB. Everything is sized in `rem` and the root font-size is a
      viewport-derived clamp. A 900px window and a 4K window get the same layout,
      just scaled — no media queries to keep in sync.
   2. ANIMATE COMPOSITOR PROPERTIES ONLY. Bars are scaled with `transform: scaleX()`
      rather than `width`, because the HUD writes to them every frame and a width
      change re-runs layout for the whole overlay. Same reason there are no blurs or
      box-shadow animations on anything the HUD touches per-frame.
   ========================================================================== */

/* Scales the entire UI off the smaller viewport axis so a short wide window does not
   get a HUD taller than the play area. */
html {
  font-size: clamp(11px, min(1.45vh, 1.15vw), 20px);
}

:root {
  /* --- surfaces ------------------------------------------------------- */
  --lpd-void: #07080a;
  --lpd-bg: #0c0e12;
  --lpd-panel: #14181f;
  --lpd-panel-2: #1b212a;
  --lpd-steel: #2b323c;
  --lpd-line: #3d4651;

  /* --- ink ------------------------------------------------------------ */
  --lpd-ink: #eef3f8;
  --lpd-ink-dim: #97a2ae;
  --lpd-ink-faint: #5d6773;

  /* --- signal --------------------------------------------------------- */
  --lpd-hazard: #ffcc33;
  --lpd-rust: #c4552a;
  --lpd-danger: #ff3b30;
  --lpd-good: #5aff8f;
  --lpd-player: #4dd2ff;
  --lpd-bounty: #ff2d55;

  /* --- rarity (draft + shop share these) ------------------------------ */
  --lpd-common: #b7c2ce;
  --lpd-rare: #4dd2ff;
  --lpd-legendary: #ffb238;
  --lpd-fused: #ff6ec7;

  /* --- type ----------------------------------------------------------- */
  /* No webfonts allowed, so we lean on whatever heavy condensed face the OS has.
     Impact/Haettenschweiler on Windows, Oswald/Roboto Condensed on Linux, and
     Arial Narrow almost everywhere else. */
  --lpd-face-heavy: "Haettenschweiler", "Arial Narrow Bold", "Anton", "Oswald",
    "Impact", "Franklin Gothic Heavy", "Archivo Black", system-ui, sans-serif;
  --lpd-face: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow",
    "Oswald", "Segoe UI", system-ui, sans-serif;
  --lpd-face-num: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono",
    monospace;

  /* Hazard tape. Reused as a border image, a divider and a loading-bar fill. */
  --lpd-tape: repeating-linear-gradient(
    -45deg,
    var(--lpd-hazard) 0 0.55rem,
    #16191d 0.55rem 1.1rem
  );
  --lpd-tape-red: repeating-linear-gradient(
    -45deg,
    var(--lpd-danger) 0 0.55rem,
    #16191d 0.55rem 1.1rem
  );

  /* Chamfered plate. Cut corners read as cut sheet metal rather than a web card. */
  --lpd-cut: polygon(
    0 0.85rem, 0.85rem 0, calc(100% - 0.85rem) 0, 100% 0.85rem,
    100% calc(100% - 0.85rem), calc(100% - 0.85rem) 100%,
    0.85rem 100%, 0 calc(100% - 0.85rem)
  );
  --lpd-cut-sm: polygon(
    0 0.45rem, 0.45rem 0, calc(100% - 0.45rem) 0, 100% 0.45rem,
    100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%,
    0.45rem 100%, 0 calc(100% - 0.45rem)
  );
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--lpd-void);
  color: var(--lpd-ink);
  font-family: var(--lpd-face);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

#viewport {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#ui-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  /* The HUD must never eat clicks meant for the canvas; interactive screens opt
     back in with `pointer-events:auto` on their own root. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--lpd-face);
  color: var(--lpd-ink);
  text-transform: uppercase;
}

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

.lpd-hidden {
  display: none !important;
}

/* ==========================================================================
   SHARED PARTS
   ========================================================================== */

.lpd-plate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.22)),
    var(--lpd-panel);
  border: 0.12rem solid var(--lpd-line);
  clip-path: var(--lpd-cut);
}

/* Rivet dots in the corners: the cheapest possible "fabricated" cue. */
.lpd-plate::before {
  content: "";
  position: absolute;
  inset: 0.42rem;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 0.09rem, transparent 0.1rem);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

.lpd-tape {
  height: 0.5rem;
  background: var(--lpd-tape);
  opacity: 0.9;
}

.lpd-label {
  font-family: var(--lpd-face);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--lpd-ink-faint);
  font-weight: 700;
}

.lpd-num {
  font-family: var(--lpd-face-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Stencilled headline. The skew is the single strongest identity cue in the whole
   sheet — it makes every title read as painted on a moving panel. */
.lpd-head {
  font-family: var(--lpd-face-heavy);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.92;
  transform: skewX(-7deg);
  text-shadow: 0.12rem 0.12rem 0 #000, -0.06rem -0.06rem 0 rgba(255, 255, 255, 0.08);
}

/* --- bars ---------------------------------------------------------------
   `.lpd-bar__fill` is driven by `transform: scaleX(0..1)` from JS. */
.lpd-bar {
  position: relative;
  overflow: hidden;
  background: #10141a;
  border: 0.1rem solid var(--lpd-line);
  height: 0.7rem;
}
.lpd-bar__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--lpd-ink-dim);
  will-change: transform;
}
.lpd-bar--xp .lpd-bar__fill {
  background: linear-gradient(90deg, #2e86ff, var(--lpd-player));
}
.lpd-bar--boost .lpd-bar__fill {
  background: linear-gradient(90deg, #ff7a18, var(--lpd-hazard));
}
.lpd-bar--core .lpd-bar__fill {
  background: linear-gradient(90deg, #3aa06a, var(--lpd-good));
}
.lpd-bar--core.is-warn .lpd-bar__fill {
  background: linear-gradient(90deg, #a97a1c, var(--lpd-hazard));
}
.lpd-bar--core.is-crit .lpd-bar__fill {
  background: linear-gradient(90deg, #8c1d16, var(--lpd-danger));
}
.lpd-bar--heat .lpd-bar__fill {
  background: linear-gradient(90deg, var(--lpd-hazard), var(--lpd-danger));
}
.lpd-bar--stat .lpd-bar__fill {
  background: linear-gradient(90deg, #45505d, var(--lpd-ink-dim));
}

/* --- buttons ------------------------------------------------------------ */
.lpd-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.7rem 1.1rem;
  border: 0.12rem solid var(--lpd-line);
  background: linear-gradient(180deg, var(--lpd-panel-2), #0f1319);
  color: var(--lpd-ink-dim);
  font-family: var(--lpd-face-heavy);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  clip-path: var(--lpd-cut-sm);
  cursor: pointer;
  transition: color 0.09s linear, background 0.09s linear;
}
.lpd-btn::after {
  /* The selection wedge slides in from the left instead of a hover glow. */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.45rem;
  background: var(--lpd-hazard);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.09s ease-out;
}
.lpd-btn.is-active,
.lpd-btn:hover {
  color: var(--lpd-ink);
  background: linear-gradient(180deg, #232b36, #131922);
}
.lpd-btn.is-active::after,
.lpd-btn:hover::after {
  transform: scaleX(1);
}
.lpd-btn.is-danger.is-active::after,
.lpd-btn.is-danger:hover::after {
  background: var(--lpd-danger);
}
.lpd-btn__sub {
  display: block;
  font-family: var(--lpd-face);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--lpd-ink-faint);
  margin-top: 0.15rem;
}
.lpd-btn.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Small keycap chip used to advertise the keyboard/pad binding of a control. */
.lpd-key {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.05rem 0.35rem;
  border: 0.1rem solid var(--lpd-line);
  background: #0a0d11;
  color: var(--lpd-hazard);
  font-family: var(--lpd-face-num);
  font-size: 0.72rem;
  text-align: center;
  letter-spacing: 0;
}

/* ==========================================================================
   FULL-SCREEN MENU SHELL
   ========================================================================== */

.lpd-screen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 2.2rem 2.8rem;
  gap: 1.2rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 204, 51, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(8, 9, 12, 0.94), rgba(8, 9, 12, 0.985));
  animation: lpd-screen-in 0.16s ease-out;
}
/* Scanline wash + a corner grime vignette. Static (never animated) so it costs one
   paint on open and nothing afterwards. */
.lpd-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
  mix-blend-mode: normal;
}
.lpd-screen > * {
  position: relative;
  z-index: 1;
}
.lpd-screen--pause {
  background:
    linear-gradient(180deg, rgba(8, 9, 12, 0.82), rgba(8, 9, 12, 0.92));
  justify-content: center;
  align-items: center;
}

@keyframes lpd-screen-in {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: none; }
}

.lpd-screen__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 0.12rem solid var(--lpd-line);
  padding-bottom: 0.7rem;
}
.lpd-screen__title {
  font-family: var(--lpd-face-heavy);
  font-size: 3.1rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  transform: skewX(-7deg);
  color: var(--lpd-ink);
  text-shadow: 0.14rem 0.14rem 0 #000;
}
.lpd-screen__title em {
  font-style: normal;
  color: var(--lpd-hazard);
}
.lpd-screen__sub {
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--lpd-ink-faint);
}
.lpd-screen__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 1.6rem;
}
.lpd-screen__foot {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: flex-end;
  border-top: 0.12rem solid var(--lpd-line);
  padding-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--lpd-ink-faint);
}
.lpd-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   TITLE
   ========================================================================== */

.lpd-title {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.lpd-title__logo {
  font-family: var(--lpd-face-heavy);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
  transform: skewX(-8deg);
  text-shadow:
    0.2rem 0.2rem 0 #000,
    0.4rem 0.4rem 0 rgba(196, 85, 42, 0.55);
}
.lpd-title__logo span {
  display: block;
}
.lpd-title__logo .lpd-title__derby {
  color: var(--lpd-hazard);
  -webkit-text-stroke: 0.06rem #000;
}
.lpd-title__tape {
  width: min(52rem, 80vw);
  height: 0.75rem;
  background: var(--lpd-tape);
  margin: 1.1rem 0 1.6rem;
}
.lpd-title__tag {
  font-size: 0.9rem;
  letter-spacing: 0.5em;
  color: var(--lpd-ink-faint);
  margin-bottom: 2rem;
}
.lpd-title__modes {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(30rem, 70vw);
}
.lpd-title__seed {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.9rem;
  border: 0.12rem dashed var(--lpd-line);
  color: var(--lpd-ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.lpd-title__seed b {
  font-family: var(--lpd-face-num);
  color: var(--lpd-hazard);
  letter-spacing: 0;
}

/* --- private online rooms ------------------------------------------------ */
.lpd-online__card {
  width: min(34rem, 100%);
  margin: auto;
  padding: 1.25rem;
  display: grid;
  gap: 0.8rem;
}
.lpd-online__or {
  margin-top: 0.3rem;
  color: var(--lpd-ink-faint);
  font-family: var(--lpd-face-num);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-align: center;
}
.lpd-online__join {
  display: flex;
  gap: 0.55rem;
}
.lpd-online__join .lpd-btn {
  flex: 0 0 auto;
  width: auto;
}
.lpd-online__code {
  min-width: 0;
  width: 0;
  flex: 1 1 12rem;
  border: 0.12rem solid #59636f;
  background: #0b0e13;
  color: var(--lpd-ink);
  padding: 0.7rem 0.8rem;
  font-family: var(--lpd-face-num);
  font-size: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.lpd-online__code:focus { outline: 0.14rem solid var(--lpd-accent); outline-offset: 0.1rem; }
.lpd-online__room {
  color: var(--lpd-accent);
  font-family: var(--lpd-face-num);
  font-size: 0.95rem;
  letter-spacing: 0.07em;
  text-align: center;
}
.lpd-online__roster {
  display: grid;
  gap: 0.4rem;
  min-height: 4rem;
}
.lpd-online__driver {
  border-left: 0.18rem solid var(--lpd-player);
  background: rgba(255, 255, 255, 0.045);
  padding: 0.48rem 0.62rem;
  color: var(--lpd-ink);
  font-family: var(--lpd-face-num);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.lpd-online__warning { min-height: 1.2rem; text-align: center; }

/* ==========================================================================
   CAR SELECT
   ========================================================================== */

.lpd-select__list {
  flex: 0 0 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.lpd-select__detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
}
.lpd-select__name {
  font-family: var(--lpd-face-heavy);
  font-size: 3rem;
  line-height: 0.9;
  transform: skewX(-7deg);
}
.lpd-select__blurb {
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--lpd-ink-dim);
  text-transform: none;
  max-width: 40rem;
}
.lpd-stats {
  display: grid;
  grid-template-columns: 7.5rem 1fr 4rem;
  gap: 0.45rem 0.8rem;
  align-items: center;
  max-width: 34rem;
}
.lpd-stats__k {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--lpd-ink-faint);
}
.lpd-stats__v {
  font-family: var(--lpd-face-num);
  font-size: 0.85rem;
  color: var(--lpd-ink);
  text-align: right;
}
.lpd-select__show {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 1.4rem;
  align-items: stretch;
}
.lpd-select__show .lpd-stats {
  flex: 0 0 clamp(19rem, 42%, 34rem);
  /* Bars keep their own height instead of stretching to fill the taller row. */
  align-content: start;
}
.lpd-select__preview {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 12rem;
  /* A pool of light on the shop floor. The canvas is transparent, so without this the
     car floats in a flat panel with nothing under it. */
  background:
    radial-gradient(115% 85% at 50% 76%, rgba(255, 204, 51, 0.11), transparent 62%),
    radial-gradient(85% 70% at 50% 42%, rgba(120, 160, 220, 0.07), transparent 72%);
}
.lpd-preview__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* Drag-to-spin must not also scroll the page on a touchscreen. */
  touch-action: none;
}
.lpd-preview__canvas:active {
  cursor: grabbing;
}
.lpd-select__stage {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--lpd-hazard);
}
.lpd-select__ups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin-top: auto;
}
.lpd-upchip {
  padding: 0.6rem 0.8rem;
  border: 0.12rem solid var(--lpd-line);
  background: #10141a;
  cursor: pointer;
  clip-path: var(--lpd-cut-sm);
}
.lpd-upchip.is-active {
  border-color: var(--lpd-hazard);
  background: #1b2130;
}
.lpd-upchip__n {
  font-family: var(--lpd-face-heavy);
  font-size: 1.15rem;
  color: var(--lpd-ink);
}
.lpd-upchip__d {
  font-size: 0.78rem;
  color: var(--lpd-ink-faint);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

/* ==========================================================================
   NODE MAP  (mirrors image.png: START top, branching SAFE/HAZARD, BOSS bottom)
   ========================================================================== */

.lpd-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
  width: min(46rem, 100%);
}
.lpd-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lpd-map__edge {
  fill: none;
  stroke: #4d5764;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.lpd-map__edge.is-open {
  stroke: var(--lpd-hazard);
  stroke-width: 3.2;
}
/* Row bands, the faint rectangles behind each tier in the reference image. */
.lpd-map__band {
  position: absolute;
  left: 2%;
  right: 2%;
  border: 0.1rem solid rgba(120, 132, 148, 0.22);
  background: rgba(255, 255, 255, 0.012);
  pointer-events: none;
}
.lpd-map__node {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 5.6rem;
  padding: 0.55rem 0.8rem;
  text-align: center;
  border: 0.14rem solid var(--lpd-line);
  border-radius: 0.6rem;
  background: linear-gradient(180deg, #232a34, #131820);
  color: var(--lpd-ink-dim);
  font-family: var(--lpd-face-heavy);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  cursor: default;
}
.lpd-map__node--hazard {
  border-radius: 0.35rem;
  transform: translate(-50%, -50%) rotate(45deg);
  min-width: 6.4rem;
  min-height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--lpd-rust);
}
.lpd-map__node--hazard .lpd-map__inner {
  transform: rotate(-45deg);
}
.lpd-map__node--boss {
  border-color: var(--lpd-danger);
  background: linear-gradient(180deg, #3a1c1c, #180d0f);
}
.lpd-map__node--start {
  border-color: var(--lpd-ink-faint);
}
.lpd-map__node.is-current {
  border-color: var(--lpd-player);
  color: var(--lpd-ink);
  box-shadow: 0 0 0 0.18rem rgba(77, 210, 255, 0.18);
}
.lpd-map__node.is-done {
  opacity: 0.38;
}
.lpd-map__node.is-open {
  cursor: pointer;
  color: var(--lpd-ink);
  border-color: var(--lpd-hazard);
}
.lpd-map__node.is-active {
  color: #0a0c10;
  background: var(--lpd-hazard);
  border-color: #fff0b8;
}
.lpd-map__node--hazard.is-active {
  background: var(--lpd-rust);
  color: var(--lpd-ink);
}
.lpd-map__reward {
  display: block;
  font-family: var(--lpd-face);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--lpd-hazard);
  margin-top: 0.15rem;
  white-space: nowrap;
}
.lpd-map__node.is-active .lpd-map__reward {
  color: #2a1e00;
}
.lpd-map__legend {
  display: flex;
  gap: 1.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--lpd-ink-faint);
}
.lpd-map__legend i {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.4rem;
  vertical-align: -0.05rem;
  border: 0.12rem solid var(--lpd-line);
}
.lpd-map__legend i.hz {
  transform: rotate(45deg);
  border-color: var(--lpd-rust);
}
.lpd-map__legend i.bs {
  border-color: var(--lpd-danger);
}

/* ==========================================================================
   SHOP
   ========================================================================== */

.lpd-shop__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  grid-auto-rows: min-content;
  gap: 0.9rem;
  overflow-y: auto;
  align-content: start;
}
.lpd-shop__item {
  padding: 0.9rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lpd-shop__item.is-active {
  border-color: var(--lpd-hazard);
}
.lpd-shop__item.is-sold {
  opacity: 0.35;
  cursor: default;
}
.lpd-shop__item.is-broke {
  border-color: #4a2c2c;
}
.lpd-shop__n {
  font-family: var(--lpd-face-heavy);
  font-size: 1.35rem;
}
.lpd-shop__d {
  font-size: 0.8rem;
  color: var(--lpd-ink-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
}
.lpd-shop__c {
  font-family: var(--lpd-face-num);
  font-size: 1rem;
  color: var(--lpd-hazard);
}
.lpd-shop__c.is-broke {
  color: var(--lpd-danger);
}
.lpd-purse {
  font-family: var(--lpd-face-heavy);
  font-size: 1.6rem;
  color: var(--lpd-hazard);
}

/* ==========================================================================
   PAUSE / ROUND END / GAME OVER
   ========================================================================== */

.lpd-modal {
  width: min(34rem, 86vw);
  padding: 1.6rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lpd-modal__title {
  font-family: var(--lpd-face-heavy);
  font-size: 2.6rem;
  line-height: 0.9;
  transform: skewX(-7deg);
}
.lpd-modal__title.is-win {
  color: var(--lpd-good);
}
.lpd-modal__title.is-lose {
  color: var(--lpd-danger);
}
.lpd-modal__acts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lpd-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}
.lpd-summary dt {
  color: var(--lpd-ink-faint);
}
.lpd-summary dd {
  margin: 0;
  font-family: var(--lpd-face-num);
  color: var(--lpd-ink);
  text-align: right;
}

/* ==========================================================================
   DRAFT
   ========================================================================== */

.lpd-draft {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(255, 204, 51, 0.07), transparent 65%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.9), rgba(6, 7, 9, 0.96));
  animation: lpd-screen-in 0.14s ease-out;
}
.lpd-draft__head {
  text-align: center;
}
.lpd-draft__title {
  font-family: var(--lpd-face-heavy);
  font-size: 2.6rem;
  transform: skewX(-7deg);
  color: var(--lpd-hazard);
  text-shadow: 0.14rem 0.14rem 0 #000;
}
.lpd-draft__sub {
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  color: var(--lpd-ink-faint);
  margin-top: 0.3rem;
}
.lpd-draft__cards {
  display: flex;
  gap: 1.2rem;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}
.lpd-card {
  position: relative;
  width: 17rem;
  min-height: 21rem;
  padding: 1.1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  background: linear-gradient(180deg, #191f27, #0d1116);
  border: 0.14rem solid var(--lpd-line);
  clip-path: var(--lpd-cut);
  transition: transform 0.1s ease-out;
}
.lpd-card.is-active {
  transform: translateY(-0.6rem);
}
.lpd-card__idx {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  font-family: var(--lpd-face-num);
  font-size: 0.9rem;
  color: var(--lpd-ink-faint);
  border: 0.1rem solid var(--lpd-line);
  padding: 0 0.35rem;
}
.lpd-card__rarity {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--lpd-ink-faint);
}
.lpd-card__name {
  font-family: var(--lpd-face-heavy);
  font-size: 1.75rem;
  line-height: 1;
  transform: skewX(-6deg);
}
.lpd-card__rule {
  height: 0.28rem;
  background: var(--lpd-line);
}
.lpd-card__desc {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--lpd-ink-dim);
  text-transform: none;
  letter-spacing: 0.01em;
  flex: 1 1 auto;
}
.lpd-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.lpd-card__tag {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  padding: 0.1rem 0.35rem;
  border: 0.1rem solid var(--lpd-line);
  color: var(--lpd-ink-faint);
}

.lpd-card--common { border-color: #4a5462; }
.lpd-card--common .lpd-card__rule { background: var(--lpd-common); }
.lpd-card--common .lpd-card__rarity { color: var(--lpd-common); }
.lpd-card--common.is-active { border-color: var(--lpd-common); }

.lpd-card--rare { border-color: #1f5c78; }
.lpd-card--rare .lpd-card__rule { background: var(--lpd-rare); }
.lpd-card--rare .lpd-card__rarity { color: var(--lpd-rare); }
.lpd-card--rare .lpd-card__name { color: #cdf0ff; }
.lpd-card--rare.is-active { border-color: var(--lpd-rare); }

.lpd-card--legendary { border-color: #7a5312; }
.lpd-card--legendary .lpd-card__rule { background: var(--lpd-legendary); }
.lpd-card--legendary .lpd-card__rarity { color: var(--lpd-legendary); }
.lpd-card--legendary .lpd-card__name { color: #ffdfa0; }
.lpd-card--legendary.is-active { border-color: var(--lpd-legendary); }
.lpd-card--legendary::before {
  /* Legendary cards get an inner glow so they read at a glance in a 3-up row. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 100%, rgba(255, 178, 56, 0.16), transparent 70%);
}

/* The mutation banner from the Muddy Build rule — has to be the loudest thing on
   the card, because a fusion is a run-defining moment. */
.lpd-card__fused {
  position: absolute;
  top: 1.9rem;
  left: -1.2rem;
  right: -1.2rem;
  padding: 0.22rem 0;
  text-align: center;
  font-family: var(--lpd-face-heavy);
  font-size: 1rem;
  letter-spacing: 0.35em;
  color: #14040c;
  background: var(--lpd-fused);
  transform: rotate(-6deg);
  box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.lpd-card__fusedfrom {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--lpd-fused);
}
.lpd-card--fused {
  border-color: var(--lpd-fused);
}

/* ==========================================================================
   HUD
   ========================================================================== */

.lpd-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lpd-hud__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lpd-hud__corner--tl { top: 1.1rem; left: 1.3rem; }
.lpd-hud__corner--tr { top: 1.1rem; right: 1.3rem; align-items: flex-end; }
.lpd-hud__corner--bl { bottom: 1.1rem; left: 1.3rem; }
.lpd-hud__corner--br { bottom: 1.1rem; right: 1.3rem; align-items: flex-end; }
.lpd-hud__corner--tc {
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.lpd-hud__corner--bc {
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  width: min(34rem, 46vw);
}

/* --- timer / heat -------------------------------------------------------- */
.lpd-hud__timer {
  font-family: var(--lpd-face-num);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--lpd-ink);
  text-shadow: 0.1rem 0.1rem 0 #000;
}
.lpd-hud__heatwrap {
  width: 10rem;
}
.lpd-hud__ring {
  font-family: var(--lpd-face-heavy);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--lpd-danger);
  text-shadow: 0.08rem 0.08rem 0 #000;
}
.lpd-hud__ring.is-crit {
  animation: lpd-flash 0.55s steps(2, jump-none) infinite;
}
@keyframes lpd-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --- bounty -------------------------------------------------------------- */
.lpd-hud__bounty {
  padding: 0.25rem 1.1rem;
  border: 0.14rem solid var(--lpd-bounty);
  background: linear-gradient(180deg, rgba(255, 45, 85, 0.22), rgba(20, 4, 10, 0.7));
  font-family: var(--lpd-face-heavy);
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  color: #ffd8e2;
  clip-path: var(--lpd-cut-sm);
}
.lpd-hud__bounty small {
  display: block;
  font-family: var(--lpd-face);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--lpd-bounty);
}

/* --- run counters -------------------------------------------------------- */
.lpd-hud__stat {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--lpd-face-num);
  font-size: 1.35rem;
  color: var(--lpd-ink);
  text-shadow: 0.08rem 0.08rem 0 #000;
}
.lpd-hud__stat span {
  font-family: var(--lpd-face);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--lpd-ink-faint);
}
.lpd-hud__stat.is-scrap { color: var(--lpd-hazard); }

/* --- xp / level ---------------------------------------------------------- */
.lpd-hud__xprow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.lpd-hud__lvl {
  flex: 0 0 auto;
  padding: 0.1rem 0.55rem;
  border: 0.12rem solid var(--lpd-player);
  color: var(--lpd-player);
  font-family: var(--lpd-face-heavy);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  background: rgba(6, 24, 34, 0.7);
}
.lpd-hud__xpbar {
  flex: 1 1 auto;
  height: 0.55rem;
}
.lpd-hud__xptxt {
  flex: 0 0 auto;
  font-family: var(--lpd-face-num);
  font-size: 0.7rem;
  color: var(--lpd-ink-faint);
}

/* --- speed / boost ------------------------------------------------------- */
.lpd-hud__speedbox {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.lpd-hud__speed {
  font-family: var(--lpd-face-num);
  font-size: 3.6rem;
  line-height: 0.85;
  color: var(--lpd-ink);
  text-shadow: 0.12rem 0.12rem 0 #000;
}
.lpd-hud__speedunit {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--lpd-ink-faint);
}
.lpd-hud__boostwrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.lpd-hud__boostbar {
  width: 9rem;
  height: 0.65rem;
  transform: skewX(-18deg);
}

/* --- car silhouette + panel arcs ---------------------------------------- */
.lpd-hud__car {
  width: 11rem;
  height: 13rem;
  display: block;
}
.lpd-hud__carwrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lpd-hud__corebar {
  width: 11rem;
  height: 0.8rem;
  transform: skewX(-18deg);
}
.lpd-hud__coretxt {
  font-family: var(--lpd-face-num);
  font-size: 0.7rem;
  color: var(--lpd-ink-faint);
}

/* SVG parts. Classes swap only when a health band changes, never per frame. */
.lpd-arc {
  fill: none;
  stroke-linecap: butt;
  stroke-width: 7;
  transition: stroke 0.15s linear;
}
.lpd-arc--track { stroke: #1d232c; }
.lpd-arc--val { stroke: var(--lpd-good); }
.lpd-arc--val.is-warn { stroke: var(--lpd-hazard); }
.lpd-arc--val.is-crit { stroke: var(--lpd-danger); }
.lpd-arc--val.is-dead { stroke: #4a1010; }
.lpd-panel {
  stroke: #0a0c10;
  stroke-width: 1.5;
  fill: #39424f;
  transition: fill 0.15s linear;
}
.lpd-panel.is-warn { fill: #6a5a1e; }
.lpd-panel.is-crit { fill: #6e2119; }
.lpd-panel.is-dead { fill: #16191e; }
.lpd-hud__carbody {
  fill: #10141a;
  stroke: #59636f;
  stroke-width: 2;
}
.lpd-hud__cablabel {
  fill: var(--lpd-ink-faint);
  font-family: var(--lpd-face-num);
  font-size: 9px;
}

/* --- low-hp vignette ----------------------------------------------------- */
.lpd-hud__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(150, 10, 10, 0.55) 78%, rgba(90, 0, 0, 0.92) 100%);
  will-change: opacity;
}

/* --- debug --------------------------------------------------------------- */
.lpd-hud__debug {
  max-width: 30rem;
  padding: 0.45rem 0.7rem;
  background: rgba(4, 6, 9, 0.82);
  border-left: 0.16rem solid var(--lpd-good);
  font-family: var(--lpd-face-num);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--lpd-good);
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-wrap;
}

/* ==========================================================================
   COMIC POPS
   ========================================================================== */

.lpd-pops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lpd-pop {
  position: absolute;
  left: 0;
  top: 0;
  /* Positioned entirely through `transform` so a burst of callouts never triggers
     layout — this is the difference between a smooth and a stuttering pile-up. */
  transform: translate3d(-1000px, -1000px, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  white-space: nowrap;
  font-family: var(--lpd-face-heavy);
  letter-spacing: 0.03em;
  color: var(--lpd-ink);
  /* Heavy comic outline. Four hard shadows outline the glyphs even where
     -webkit-text-stroke is unavailable. */
  -webkit-text-stroke: 0.12rem #08090b;
  paint-order: stroke fill;
  text-shadow:
    0.16rem 0.16rem 0 #08090b,
    -0.06rem 0.14rem 0 #08090b,
    0.14rem -0.06rem 0 #08090b;
}
.lpd-pop--hit { font-size: 1.5rem; color: #dfe7ef; }
.lpd-pop--info { font-size: 1.35rem; color: var(--lpd-player); }
.lpd-pop--kill { font-size: 2.2rem; color: var(--lpd-danger); }
.lpd-pop--tbone { font-size: 2.6rem; color: var(--lpd-hazard); }
.lpd-pop--huge {
  font-size: 3.4rem;
  color: var(--lpd-hazard);
  -webkit-text-stroke: 0.16rem #08090b;
}

/* ==========================================================================
   CRASH SURFACE (index.html owns the markup; it would otherwise be raw browser UI)
   ========================================================================== */

#crash-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 3rem;
  background: linear-gradient(180deg, #1a0708, #07080a);
  color: #ffd7d7;
  overflow: auto;
}
#crash-overlay[hidden] {
  display: none;
}
#crash-overlay h1 {
  font-family: var(--lpd-face-heavy);
  font-size: 4rem;
  margin: 0 0 1rem;
  color: var(--lpd-danger);
  transform: skewX(-7deg);
}
#crash-text {
  font-family: var(--lpd-face-num);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #ff9d9d;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lpd-screen,
  .lpd-draft {
    animation: none;
  }
  .lpd-hud__ring.is-crit {
    animation: none;
  }
  .lpd-card,
  .lpd-btn,
  .lpd-btn::after {
    transition: none;
  }
}