/* DIRT RACE mode: race HUD, results, race-mode tweaks to the base HUD (docs/RACE.md) */

:root {
  --fs-go: #3fe07e;
}

/* ================= race-mode changes to the base HUD (src/ui/hud.js) ================= */
.fs-hud.is-race .fs-score { display: none; }
/* stunt popups stay, smaller and lower so they clear the race banners */
.fs-hud.is-race .fs-stunt { top: 27vh; transform: scale(0.62); transform-origin: 50% 0; }
#ui.is-touch .fs-hud.is-race .fs-dmg { top: calc(18.6rem + var(--sat)); }

/* ================= race HUD (src/ui/racehud.js) ================= */
.fs-race { position: absolute; inset: 0; }
.fs-race__hud { position: absolute; inset: 0; transition: opacity 0.25s; }
.fs-race__hud > section { position: absolute; contain: layout style; }
#ui .fs-race { transition: opacity 0.5s 0.15s; }
#ui.is-title .fs-race { opacity: 0; transition: none; }
#ui:has(> .fs-hud.is-paused) .fs-race__hud,
.fs-hud.is-paused ~ .fs-race .fs-race__hud,
.fs-race.is-results .fs-race__hud { opacity: 0; }

/* ---- place + lap + timing (top left) ---- */
.fs-rleft {
  top: calc(1.5rem + var(--sat));
  left: calc(2.2rem + var(--sal));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.fs-rtop { display: flex; align-items: flex-start; gap: 1rem; }
.fs-rpos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.fs-rpos__plate {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.8rem 1.1rem 0.7rem 1.2rem;
  background: var(--fs-plate);
  box-shadow: inset 0.3rem 0 0 var(--fs-orange);
  transform: skewX(var(--fs-skew));
  transform-origin: 0 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fs-cut)), calc(100% - var(--fs-cut)) 100%, 0 100%);
}
.fs-rpos__flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(63, 224, 126, 0.95), rgba(63, 224, 126, 0.15));
}
.fs-rpos__flash.is-down { background: linear-gradient(90deg, rgba(255, 46, 31, 0.95), rgba(255, 46, 31, 0.15)); }
.fs-rpos__num {
  position: relative;
  font-size: 5.8rem;
  font-weight: 700;
  min-width: 0.45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fs-rpos__side { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 0.05rem; }
.fs-rpos__suf { font-size: 2.3rem; font-weight: 700; color: var(--fs-bone); letter-spacing: 0.02em; text-box: trim-both cap alphabetic; }
.fs-rpos__of { font-size: 1.7rem; font-weight: 600; color: var(--fs-dust); text-box: trim-both cap alphabetic; }

.fs-rlap {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  padding: 0.45rem 0.8rem 0.35rem;
  background: var(--fs-bone);
  color: #000;
  font-weight: 700;
  transform: skewX(var(--fs-skew));
}
.fs-rlap > * { text-box: trim-both cap alphabetic; }
.fs-rlap__lbl { font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.3rem; }
.fs-rlap__num { font-size: 2.1rem; }
.fs-rlap__of { font-size: 1.5rem; color: rgba(0, 0, 0, 0.55); }
.fs-rlap.is-final { background: var(--fs-orange); }

.fs-rtime {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end;
  column-gap: 0.8rem;
  row-gap: 0.6rem;
  padding: 0.8rem 1.1rem 0.75rem 1.2rem;
  background: var(--fs-plate-soft);
  transform: skewX(var(--fs-skew));
  transform-origin: 0 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fs-cut)), calc(100% - var(--fs-cut)) 100%, 0 100%);
}
.fs-rtime__row { display: contents; }
.fs-rtime__lbl {
  grid-column: 1;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-dust);
  text-box: trim-both cap alphabetic;
}
.fs-rtime__v {
  font-size: 2.15rem;
  font-weight: 600;
  color: var(--fs-bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.fs-rtime__v small { font-size: 0.72em; color: rgba(255, 246, 236, 0.75); }
[data-row='best'] .fs-rtime__v { font-size: 1.85rem; color: rgba(255, 246, 236, 0.9); }
.fs-rtime__delta {
  grid-column: 3;
  align-self: center;
  padding: 0.3rem 0.45rem 0.2rem;
  background: var(--fs-red);
  color: #fff;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.fs-rtime__delta.is-up { background: var(--fs-go); color: #000; }
.fs-rtime__row.is-flash .fs-rtime__lbl, .fs-rtime__row.is-flash .fs-rtime__v { animation: fs-rflash 0.5s steps(2, jump-none) 6; }
.fs-rtime__row.is-flash .fs-rtime__lbl { color: var(--fs-bone); }
.fs-rtime__row.is-best .fs-rtime__lbl, .fs-rtime__row.is-best .fs-rtime__v, .fs-rtime__row.is-best .fs-rtime__v small { color: var(--fs-go); }
@keyframes fs-rflash { 50% { opacity: 0.25; } }

/* ---- standings tower ---- */
.fs-rtower {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  width: 17rem;
}
.fs-rrow {
  --c: #c9cdd2;
  display: grid;
  grid-template-columns: 2.2rem 0.32rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  height: 2.35rem;
  padding-right: 0.8rem;
  background: rgba(0, 0, 0, 0.5);
  transform: skewX(var(--fs-skew));
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}
.fs-rrow > * { text-box: trim-both cap alphabetic; }
.fs-rrow__pos {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.6rem;
  font-weight: 700;
  text-box: none;
}
.fs-rrow__col { align-self: stretch; margin: 0.45rem 0; background: var(--c); }
.fs-rrow__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-rrow__gap { font-size: 1.3rem; color: var(--fs-dust); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-rrow:first-child .fs-rrow__pos { background: var(--fs-bone); color: #000; }
.fs-rrow.is-me { background: var(--fs-orange); color: #000; }
.fs-rrow.is-me .fs-rrow__pos { background: #000; color: var(--fs-orange); }
.fs-rrow.is-me .fs-rrow__gap { color: rgba(0, 0, 0, 0.72); }
.fs-rrow.is-me .fs-rrow__col { background: #000; }
.fs-rrow.is-fin .fs-rrow__gap { color: var(--fs-bone); }
.fs-rrow.is-out { opacity: 0.5; }

/* ---- minimap (top right) ---- */
.fs-rmap {
  top: calc(3.2rem + var(--sat));
  right: calc(1.6rem + var(--sar));
  width: 15rem;
  height: 15rem;
  padding: 0.8rem;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.32) 75%);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}
.fs-rmap__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fs-rmap__edge { fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 24; stroke-linejoin: round; }
.fs-rmap__road { fill: none; stroke: rgba(255, 246, 236, 0.78); stroke-width: 11; stroke-linejoin: round; }
.fs-rmap__jumps { fill: none; stroke: var(--fs-orange); stroke-width: 11; }
.fs-rmap__start0 { stroke: #000; stroke-width: 8; }
.fs-rmap__start1 { stroke: #fff; stroke-width: 8; stroke-dasharray: 3.6 3.6; }
.fs-rmap__dot { stroke: #000; }
.fs-rmap__ring { fill: rgba(0, 0, 0, 0.35); stroke: #fff; }
.fs-rmap__medot { fill: var(--fs-orange); stroke: #000; }

/* ---- banners: FINAL LAP / FINISH (top centre) ---- */
.fs-rbanner { top: calc(14vh + var(--sat)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.fs-rban {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  padding: 0.95rem 2.8rem 0.8rem;
  background: var(--fs-orange);
  color: #000;
  box-shadow: 0 0 0 0.22rem #000, 0 0.7rem 1.8rem rgba(0, 0, 0, 0.5);
}
.fs-rban__txt { font-size: 5.4rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-box: trim-both cap alphabetic; }
.fs-rban__chk { width: 3.6rem; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 1.2rem 1.2rem; }
.fs-rban--final .fs-rban__chk { background: repeating-linear-gradient(90deg, #000 0 0.5rem, transparent 0.5rem 1.1rem); width: 2.2rem; }
.fs-rban--finish { background: #0d0a08; color: var(--fs-bone); box-shadow: 0 0 0 0.22rem #000, inset 0 -0.35rem 0 var(--fs-orange), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.5); }

/* ---- wrong way ---- */
.fs-rwrong { top: calc(14vh + var(--sat)); left: 50%; transform: translateX(-50%); }
.fs-rwrong__plate {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 2.2rem 0.75rem 1.7rem;
  background: var(--fs-red);
  color: #fff;
  transform: skewX(var(--fs-skew));
  box-shadow: 0 0 0 0.22rem #000, 0 0.7rem 1.8rem rgba(0, 0, 0, 0.5);
  animation: fs-rwrong 0.8s steps(2, jump-none) infinite;
}
.fs-rwrong__plate svg { width: 4.2rem; height: 4.2rem; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.fs-rwrong__plate span { font-size: 5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-box: trim-both cap alphabetic; }
@keyframes fs-rwrong { 50% { background: #0d0a08; color: var(--fs-red); } }

/* ---- start: lights, countdown, prompt (centre) ---- */
.fs-rstart {
  top: calc(10vh + var(--sat));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  pointer-events: none;
}
.fs-rlights {
  display: flex;
  gap: 1.2rem;
  padding: 1rem 1.6rem;
  background: linear-gradient(180deg, #1b1510, #060504);
  box-shadow: inset 0 0.28rem 0 var(--fs-orange), 0 0.7rem 1.6rem rgba(0, 0, 0, 0.55);
  transform: skewX(var(--fs-skew));
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0.8rem 100%, 0 calc(100% - 0.8rem));
}
.fs-rlights i {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  transform: skewX(10deg);
  background: radial-gradient(circle at 40% 35%, #3b2b24, #150d0a 70%);
  box-shadow: inset 0 0 0 0.2rem #000, inset 0 0.35rem 0.6rem rgba(0, 0, 0, 0.8);
}
.fs-rlights i.is-on {
  background: radial-gradient(circle at 40% 35%, #ffd9cc, #ff3a22 34%, #a30e00 78%);
  box-shadow: inset 0 0 0 0.2rem #000, 0 0 1.6rem 0.35rem rgba(255, 46, 31, 0.7);
}
.fs-rlights i.is-go {
  background: radial-gradient(circle at 40% 35%, #e6ffe9, #3fe07e 34%, #0a7a35 78%);
  box-shadow: inset 0 0 0 0.2rem #000, 0 0 1.8rem 0.45rem rgba(63, 224, 126, 0.7);
}
.fs-rcount { display: grid; place-items: center; min-height: 1rem; }
.fs-rcount__num {
  display: block;
  font-size: 12rem;
  font-weight: 700;
  line-height: 0.9;
  text-box: trim-both cap alphabetic;
  transform: skewX(var(--fs-skew));
  filter: drop-shadow(0 0.06em 0 #000) drop-shadow(0 0.15em 0.3em rgba(0, 0, 0, 0.55));
}
.fs-rcount__num:empty { display: none; }
.fs-rcount__num.is-go {
  color: var(--fs-go);
  -webkit-text-fill-color: var(--fs-go);
  letter-spacing: 0.02em;
  filter: drop-shadow(0 0.06em 0 #000) drop-shadow(0 0 0.35em rgba(63, 224, 126, 0.55));
}
.fs-rinfo {
  margin: 0;
  padding: 0.5rem 1.2rem 0.4rem;
  background: var(--fs-plate);
  font-size: 1.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fs-dust);
  transform: skewX(var(--fs-skew));
  white-space: nowrap;
}
.fs-rprompt {
  margin: 0;
  padding: 0.7rem 2rem 0.55rem;
  background: var(--fs-orange);
  color: #000;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(var(--fs-skew));
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5);
  animation: fs-pulse 1.5s ease-in-out infinite;
}
.fs-rprompt span { display: block; text-box: trim-both cap alphabetic; }
.fs-rstart:not([data-mode='grid']) .fs-rinfo, .fs-rstart:not([data-mode='grid']) .fs-rprompt { display: none; }
.fs-rstart[data-mode='grid'] .fs-rcount { display: none; }
.fs-rstart[data-mode='go-out'] { opacity: 0; transform: scale(1.08); transition: opacity 0.4s, transform 0.4s; }

/* ================= results ================= */
.fs-rres {
  position: absolute;
  inset: 0;
  z-index: 5; /* over the touch controls, under the pause menu */
  pointer-events: auto;
  overflow: auto;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.74) 45%, rgba(0, 0, 0, 0.55) 100%);
  backdrop-filter: blur(6px) saturate(0.8);
  -webkit-backdrop-filter: blur(6px) saturate(0.8);
  animation: fs-fade 0.35s ease-out;
}
.fs-rres.is-leaving .fs-rres__btns { opacity: 0.5; pointer-events: none; }
.fs-rres__inner {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 46rem);
  grid-template-areas: 'head board' 'btns board';
  align-content: center;
  gap: 0 4rem;
  padding: calc(2rem + var(--sat)) calc(3rem + var(--sar)) calc(2rem + var(--sab)) calc(5rem + var(--sal));
}
.fs-rres__head { grid-area: head; align-self: end; display: flex; flex-direction: column; align-items: flex-start; }
.fs-rres__kick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-orange);
  animation: fs-rise 0.4s 0.05s ease-out both;
}
.fs-rres__kick span { text-box: trim-both cap alphabetic; }
.fs-rres__kick svg { width: 2.6rem; height: 2.6rem; }
.fs-rres__kick svg .pole { fill: none; stroke: var(--fs-bone); stroke-width: 1.8; stroke-linecap: round; }
.fs-rres__kick svg .cloth { fill: #fff; }
.fs-rres__kick svg .chk { fill: #000; }
.fs-rres__place {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  margin: 0 0 2rem;
  transform: skewX(var(--fs-skew));
  transform-origin: 0 100%;
  font-weight: 700;
}
.fs-rres__place .fs-split { font-size: 13rem; line-height: 0.9; padding-bottom: 0.04em; }
.fs-rres__side { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 0.1rem; }
.fs-rres__side small { font-size: 4.8rem; color: var(--fs-bone); text-box: trim-both cap alphabetic; }
.fs-rres__side em { font-size: 3rem; font-style: normal; font-weight: 600; color: var(--fs-dust); text-box: trim-both cap alphabetic; }
.fs-rres__place--win .fs-split { font-size: 8.6rem; text-transform: uppercase; white-space: nowrap; }
.fs-rres__stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; animation: fs-rise 0.4s 0.35s ease-out both; }
.fs-rres__stats span {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  transform: skewX(var(--fs-skew));
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-dust);
  white-space: nowrap;
}
.fs-rres__stats b { font-size: 2.2rem; font-weight: 600; color: var(--fs-bone); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-box: trim-both cap alphabetic; }
.fs-rres__btns { grid-area: btns; align-self: start; display: flex; flex-direction: column; gap: 0.55rem; animation: fs-rise 0.4s 0.5s ease-out both; }
.fs-rres .fs-mbtn--go { background: var(--fs-orange); color: #000; }
.fs-rres .fs-mbtn--go::before { background: linear-gradient(90deg, #fff6ec, #ffd9b8); }
.fs-rres .fs-mbtn kbd { font-size: 0.55em; }

.fs-rres__board {
  grid-area: board;
  align-self: center;
  padding: 1.4rem 1.6rem 1.3rem;
  background: linear-gradient(180deg, rgba(14, 10, 7, 0.92), rgba(0, 0, 0, 0.92));
  box-shadow: inset 0 0.3rem 0 var(--fs-orange);
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 1.4rem 100%, 0 calc(100% - 1.4rem));
  animation: fs-rise 0.4s 0.2s ease-out both;
}
.fs-rres__th, .fs-rres__row {
  display: grid;
  grid-template-columns: 3.2rem 0.36rem minmax(0, 1fr) 8.6rem 7.6rem;
  align-items: center;
  column-gap: 1rem;
}
.fs-rres__th {
  padding: 0 1rem 0.8rem 0;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-orange);
}
.fs-rres__th span:first-child { grid-column: 1 / 3; padding-left: 0.4rem; }
.fs-rres__th span:nth-child(n + 3) { text-align: right; }
.fs-rres__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.32rem; }
.fs-rres__row {
  height: 3.3rem;
  padding-right: 1rem;
  background: rgba(255, 255, 255, 0.06);
  transform: skewX(var(--fs-skew));
  font-size: 2rem;
  animation: fs-rrow-in 0.38s calc(0.45s + var(--i, 0) * 0.07s) cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.fs-rres__row > * { text-box: trim-both cap alphabetic; }
.fs-rres__row > b { align-self: stretch; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); font-size: 2.2rem; font-weight: 700; text-box: none; }
.fs-rres__row > i { align-self: stretch; margin: 0.6rem 0; background: var(--c, #c9cdd2); }
.fs-rres__row:first-child > b { background: var(--fs-bone); color: #000; }
.fs-rres__name { font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-rres__time, .fs-rres__best { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-rres__best { font-size: 1.65rem; color: var(--fs-dust); }
.fs-rres__row.is-racing .fs-rres__time::after { content: 'racing…'; font-size: 0.8em; letter-spacing: 0.04em; color: var(--fs-dust); animation: fs-blink 1.2s ease-in-out infinite; }
.fs-rres__row.is-me { background: var(--fs-orange); color: #000; }
.fs-rres__row.is-me > b { background: #000; color: var(--fs-orange); }
.fs-rres__row.is-me > i { background: #000; }
.fs-rres__row.is-me .fs-rres__best, .fs-rres__row.is-me.is-racing .fs-rres__time::after { color: rgba(0, 0, 0, 0.7); }
@keyframes fs-rrow-in { from { opacity: 0; transform: skewX(var(--fs-skew)) translateX(-2.5rem); } }

/* ================= touch + small screens ================= */
#ui.is-touch .fs-rmap { top: calc(9.2rem + var(--sat)); right: calc(1.4rem + var(--sar)); width: 12rem; height: 12rem; padding: 0.6rem; }
#ui.is-touch .fs-rleft { top: calc(1.1rem + var(--sat)); }
#ui.is-touch .fs-rres .fs-mbtn { min-height: max(3.2rem, 44px); }
/* phones and short windows: the tower keeps the player and the trucks either side */
#ui.is-touch .fs-rrow.is-far { display: none; }

@media (max-height: 520px) {
  .fs-rrow.is-far { display: none; }
  #ui.is-touch .fs-rmap { top: calc(8.9rem + var(--sat)); width: max(4rem, calc(11rem - var(--sat) - var(--sab))); height: max(4rem, calc(11rem - var(--sat) - var(--sab))); }
  .fs-rleft { gap: 0.7rem; }
  .fs-rpos__num { font-size: 4.8rem; }
  .fs-rpos__suf { font-size: 2rem; }
  .fs-rpos__of { font-size: 1.5rem; }
  .fs-rtime__v { font-size: 1.9rem; }
  [data-row='best'] .fs-rtime__v { font-size: 1.65rem; }
  .fs-rtime { row-gap: 0.5rem; }
  .fs-rbanner, .fs-rwrong { top: calc(22vh + var(--sat)); }
  .fs-rban__txt { font-size: 4.4rem; }
  .fs-rwrong__plate span { font-size: 4rem; }
  .fs-rwrong__plate svg { width: 3.4rem; height: 3.4rem; }
  .fs-rstart { top: calc(6vh + var(--sat)); gap: 1.1rem; }
  .fs-rcount__num { font-size: 9rem; }
  .fs-rlights i { width: 3.2rem; height: 3.2rem; }
  .fs-rres__inner { gap: 2.4rem; padding-left: calc(3rem + var(--sal)); padding-top: calc(1.2rem + var(--sat)); padding-bottom: calc(1.2rem + var(--sab)); }
  .fs-rres__kick { margin-bottom: 0.9rem; font-size: 1.9rem; }
  .fs-rres__place { margin-bottom: 1.2rem; }
  .fs-rres__place .fs-split { font-size: 9rem; }
  .fs-rres__place--win .fs-split { font-size: 6.6rem; }
  .fs-rres__side small { font-size: 3.6rem; }
  .fs-rres__side em { font-size: 2.4rem; }
  .fs-rres__stats { margin-bottom: 1.2rem; }
  .fs-rres__row { height: 2.9rem; font-size: 1.8rem; }
  .fs-rres__board { padding: 1rem 1.2rem 1rem; }
  .fs-rres .fs-mbtn { padding: 0.7rem 1.2rem 0.55rem; font-size: 2.1rem; }
}

@media (max-height: 380px) and (min-aspect-ratio: 1/1) {
  #ui.is-touch .fs-rmap { top: calc(8.7rem + var(--sat)); width: max(4rem, calc(8rem - var(--sat) - var(--sab))); height: max(4rem, calc(8rem - var(--sat) - var(--sab))); }
}

/* narrow / portrait: timing folds under the place, results stack */
@media (max-aspect-ratio: 1/1) {
  .fs-rtop { flex-direction: column; gap: 0.6rem; }
  .fs-rleft { transform: scale(1.25); transform-origin: 0 0; }
  #ui.is-touch .fs-rmap { width: 16rem; height: 16rem; }
  #ui.is-touch .fs-hud.is-race .fs-dmg { top: calc(32.5rem + var(--sat)); }
  .fs-rbanner, .fs-rwrong { top: calc(40vh + var(--sat)); }
  .fs-rstart { top: calc(30vh + var(--sat)); }
  .fs-rres__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'board' 'btns'; align-content: center; gap: 2rem; padding: calc(2rem + var(--sat)) calc(2rem + var(--sar)) calc(2rem + var(--sab)) calc(2rem + var(--sal)); }
  .fs-rres__stats { margin-bottom: 0; }
  .fs-rres__kick { font-size: 2.6rem; }
  .fs-rres__place .fs-split { font-size: 15rem; }
  .fs-rres__place--win .fs-split { font-size: 10rem; }
  .fs-rres__side small { font-size: 5.4rem; }
  .fs-rres__side em { font-size: 3.4rem; }
  .fs-rres__stats span { font-size: 1.6rem; }
  .fs-rres__stats b { font-size: 2.6rem; }
  .fs-rres__th { font-size: 1.5rem; }
  .fs-rres__th, .fs-rres__row { grid-template-columns: 3.4rem 0.4rem minmax(0, 1fr) 8.6rem 7.4rem; column-gap: 0.8rem; }
  .fs-rres__row { height: 3.9rem; font-size: 2.35rem; }
  .fs-rres__row > b { font-size: 2.6rem; }
  .fs-rres__best { font-size: 1.95rem; }
  .fs-rres .fs-mbtn { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-rprompt, .fs-rwrong__plate, .fs-rtime__row.is-flash .fs-rtime__v, .fs-rtime__row.is-flash .fs-rtime__lbl { animation: none !important; }
  .fs-rres__row, .fs-rres__board, .fs-rres__btns, .fs-rres__stats, .fs-rres__kick { animation: none !important; }
}