/* FULL SEND — UI. Brand: hot orange, black, bone white, chrome, desert dust.
   Everything rides the logo's slant (skewX -10deg); corners are die-cut, never rounded cards.
   Sizes are in rem; html font-size scales with the viewport (phone landscape -> 4K). */

:root {
  --fs-orange: #ff6a1a;
  --fs-molten: #ffb23f;
  --fs-bone: #fff6ec;
  --fs-chrome: #c9cdd2;
  --fs-dust: #e0bd92;
  --fs-red: #ff2e1f;
  --fs-plate: rgba(0, 0, 0, 0.62);
  --fs-plate-soft: rgba(0, 0, 0, 0.42);
  --fs-skew: -10deg;
  --fs-font: 'Teko', Impact, 'Arial Narrow Bold', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --fs-cut: 0.55rem;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

html {
  font-size: clamp(9px, calc(1.05vmin + 0.45vmax), 30px);
  height: 100%;
  background: #000;
  overscroll-behavior: none;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--fs-bone);
  font-family: var(--fs-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; touch-action: none; }
#app canvas { display: block; }

#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font-family: var(--fs-font);
  font-weight: 500;
  line-height: 1;
  color: var(--fs-bone);
  overflow: hidden;
}
#ui [hidden] { display: none !important; }
:where(#ui) button { font: inherit; color: inherit; pointer-events: auto; cursor: pointer; }
:where(#ui) kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0.12em 0.4em 0;
  box-sizing: border-box;
  border-radius: 0.22em;
  background: linear-gradient(180deg, #f6f6f4, #b9bcc0);
  box-shadow: 0 0.14em 0 #55585c, 0 0.2em 0.3em rgba(0, 0, 0, 0.5);
  color: #121212;
  font: 600 1em/1 var(--fs-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Logo-style lettering: chrome on top, molten orange below the waist. */
.fs-split {
  background: linear-gradient(180deg, #ffffff 0%, #eef0f2 26%, #a7adb5 49%, #ff9a3c 50.5%, #ff6a1a 74%, #d84600 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-box: trim-both cap alphabetic;
}

/* ================= HUD ================= */
.fs-hud { position: absolute; inset: 0; }
.fs-hud > section { position: absolute; contain: layout style; }
.fs-hud.is-paused > section { opacity: 0; transition: opacity 0.2s; }

.fs-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 178, 63, 0) 35%, rgba(255, 106, 26, 0.55) 100%);
}
.fs-flash.is-bad { background: radial-gradient(ellipse at 50% 45%, rgba(255, 46, 31, 0) 30%, rgba(255, 30, 20, 0.6) 100%); }

/* ---- score (top left) ---- */
.fs-score {
  top: calc(1.5rem + var(--sat));
  left: calc(2.2rem + var(--sal));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.fs-score__plate {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem 0.65rem 1.1rem;
  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-score__num {
  padding-bottom: 0.16em; /* room for the comma tail below the trimmed baseline */
  margin-bottom: -0.16em;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}
.fs-score__unit { font-size: 1.35rem; color: var(--fs-dust); letter-spacing: 0.06em; text-box: trim-both cap alphabetic; }

.fs-combo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transform-origin: 0 50%;
}
.fs-combo__x {
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  padding: 0.35rem 0.6rem 0.25rem;
  background: var(--fs-bone);
  color: #000;
  font-weight: 700;
  transform: skewX(var(--fs-skew));
}
.fs-combo__x small { font-size: 1.5rem; margin-right: 0.08em; }
.fs-combo__x b { font-size: 2.4rem; text-box: trim-both cap alphabetic; }
.fs-combo.is-hot .fs-combo__x { background: var(--fs-orange); color: #000; }
.fs-combo__body { display: flex; flex-direction: column; gap: 0.35rem; }
.fs-combo__lbl { font-size: 1.3rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fs-bone); text-shadow: 0 0.08rem 0.25rem #000; }
.fs-combo__bar { display: block; width: 7rem; height: 0.42rem; background: rgba(0, 0, 0, 0.55); transform: skewX(var(--fs-skew)); }
.fs-combo__bar b { display: block; height: 100%; background: var(--fs-orange); transform-origin: 0 50%; }
.fs-combo:not(.is-hot) .fs-combo__bar b { background: var(--fs-bone); }

.fs-best {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem 0.2rem;
  background: var(--fs-plate-soft);
  transform: skewX(var(--fs-skew));
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-dust);
}
.fs-best b { font-size: 1.75rem; font-weight: 600; color: var(--fs-bone); letter-spacing: 0.01em; margin-left: 0.2rem; }

/* ---- system (top right) ---- */
.fs-sys {
  top: calc(1.1rem + var(--sat));
  right: calc(1.6rem + var(--sar));
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: rgba(255, 246, 236, 0.66);
  text-shadow: 0 0.06rem 0.2rem #000;
}
.fs-sys__fps.is-low { color: var(--fs-molten); }
.fs-sys__mute { display: flex; align-items: center; gap: 0.3rem; text-transform: uppercase; color: var(--fs-bone); }
.fs-sys__mute svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }

/* ---- air timer (top centre) ---- */
.fs-air {
  top: calc(7vh + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  filter: drop-shadow(0 0.15rem 0.4rem rgba(0, 0, 0, 0.6));
}
.fs-air.is-on { opacity: 1; }
.fs-air__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem 0.6rem;
  background: var(--fs-plate);
  transform: skewX(var(--fs-skew));
  clip-path: polygon(var(--fs-cut) 0, 100% 0, 100% calc(100% - var(--fs-cut)), calc(100% - var(--fs-cut)) 100%, 0 100%, 0 var(--fs-cut));
}
.fs-air__lbl { font-size: 1.7rem; letter-spacing: 0.08em; color: var(--fs-dust); text-box: trim-both cap alphabetic; padding-bottom: 0.05rem; }
.fs-air__num {
  font-size: 4.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
  min-width: 2.15em;
  text-align: right;
  color: var(--fs-bone);
}
.fs-air__s { font-size: 2rem; font-weight: 600; color: var(--fs-bone); text-box: trim-both cap alphabetic; }
.fs-air[data-heat='big'] .fs-air__num, .fs-air[data-heat='big'] .fs-air__s { color: var(--fs-molten); }
.fs-air[data-heat='huge'] .fs-air__num, .fs-air[data-heat='huge'] .fs-air__s { color: var(--fs-orange); }
.fs-air[data-heat='huge'] .fs-air__row { box-shadow: inset 0 -0.3rem 0 var(--fs-orange); }
.fs-air__bar {
  position: relative;
  width: 15rem;
  height: 0.45rem;
  background: rgba(0, 0, 0, 0.55);
  transform: skewX(var(--fs-skew));
}
.fs-air__bar b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--fs-bone), var(--fs-molten) 40%, var(--fs-orange) 70%, var(--fs-red)); transform-origin: 0 50%; transform: scaleX(0); }
.fs-air__bar i { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 0.18rem; background: var(--fs-bone); }
.fs-air__bar i span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.35rem);
  font-size: 1.05rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--fs-bone);
  text-shadow: 0 0.06rem 0.2rem #000;
}

/* ---- stunt popups (centre) ---- */
.fs-stunt {
  top: 19vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.fs-pop {
  --len: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-width: 92vw;
  text-align: center;
}
.fs-pop__combo {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.3rem 0.8rem 0.15rem;
  background: var(--fs-orange);
  color: #000;
  font-size: 2.8rem;
  font-weight: 700;
  transform: skewX(var(--fs-skew));
}
.fs-pop__combo small { font-size: 0.65em; }
.fs-pop__combo span { font-size: 0.5em; letter-spacing: 0.08em; margin-left: 0.4rem; text-transform: uppercase; }
.fs-pop__head { position: relative; display: grid; place-items: center; padding: 0 3rem; }
.fs-pop__streak {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 18%;
  bottom: 12%;
  background:
    linear-gradient(90deg, rgba(255, 106, 26, 0) 0%, rgba(255, 106, 26, 0.85) 18%, rgba(255, 140, 50, 0.95) 60%, rgba(255, 178, 63, 0) 100%);
  transform-origin: 0 50%;
  opacity: 0;
}
.fs-pop__title {
  position: relative;
  margin: 0;
  /* Teko caps run ~0.44em a character: the vw cap keeps long titles inside a portrait phone */
  font-size: min(calc(7.2rem / max(1, var(--len) * 0.85)), calc(185vw / var(--chars, 11)));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 0.09em 0 #000) drop-shadow(0 0.2em 0.35em rgba(0, 0, 0, 0.55));
}
.fs-pop.is-big .fs-pop__title { font-size: min(calc(8.6rem / max(1, var(--len) * 0.85)), calc(185vw / var(--chars, 11))); }
.fs-pop__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.fs-chip {
  padding: 0.4rem 0.9rem 0.25rem;
  background: var(--fs-bone);
  color: #000;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(var(--fs-skew));
}
.fs-chip--best { background: #000; color: var(--fs-molten); box-shadow: inset 0 0 0 0.16rem var(--fs-molten); }
.fs-pop__row { display: flex; align-items: center; gap: 1.6rem; }
.fs-pop__pts {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  font-size: 4.6rem;
  font-weight: 700;
  color: var(--fs-molten);
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
  filter: drop-shadow(0 0.07em 0 #000) drop-shadow(0 0 0.3em rgba(0, 0, 0, 0.6));
}
.fs-stamp {
  padding: 0.45rem 0.9rem 0.3rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.fs-stamp small { font-size: 0.62em; letter-spacing: 0.02em; margin-left: 0.2em; }
.fs-stamp--clean { background: var(--fs-orange); color: #000; box-shadow: 0 0 0 0.18rem #000, 0 0.4rem 1rem rgba(0, 0, 0, 0.5); }
.fs-stamp--sketchy {
  background: rgba(0, 0, 0, 0.72);
  color: var(--fs-dust);
  box-shadow: inset 0 0 0 0.16rem var(--fs-dust);
}
.fs-pop__stats {
  display: flex;
  gap: 1.4rem;
  padding: 0.4rem 1rem 0.3rem;
  background: var(--fs-plate-soft);
  transform: skewX(var(--fs-skew));
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  color: var(--fs-dust);
}
.fs-pop__stats b { color: var(--fs-bone); font-weight: 600; font-size: 1.2em; margin-right: 0.15em; }

/* bowling: the rack diagram under the title (hit pins orange, standing pins hollow) */
.fs-bowl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  background: var(--fs-plate-soft);
  transform: skewX(var(--fs-skew));
}
.fs-bowl__row { display: flex; gap: 0.75rem; }
.fs-bowl__pin {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.16rem var(--fs-dust);
  opacity: 0.55;
}
.fs-bowl__pin.is-down { background: var(--fs-orange); box-shadow: 0 0 0 0.14rem #000, 0 0 0.7rem rgba(255, 106, 26, 0.6); opacity: 1; }

.fs-pop--bail .fs-pop__title {
  font-size: 8.4rem;
  color: var(--fs-red);
  -webkit-text-fill-color: var(--fs-red);
  background: none;
  text-box: trim-both cap alphabetic;
  filter: drop-shadow(0 0.07em 0 #000) drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.6));
}
.fs-pop__reason {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.7);
  transform: skewX(var(--fs-skew));
  font-size: 2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.fs-pop__reason span { color: var(--fs-red); font-size: 0.8em; }

/* ---- toasts ---- */
.fs-toasts {
  left: 0;
  right: 0;
  bottom: calc(5.4rem + var(--sab));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.fs-toast {
  padding: 0.55rem 1.2rem 0.4rem;
  background: rgba(0, 0, 0, 0.74);
  box-shadow: inset 0.28rem 0 0 var(--fs-orange);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(var(--fs-skew));
}

/* ---- damage (bottom left) ---- */
.fs-dmg {
  --dmg: rgb(244, 236, 226);
  left: calc(2.2rem + var(--sal));
  bottom: calc(1.6rem + var(--sab));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem 0.75rem;
  background: var(--fs-plate-soft);
  clip-path: polygon(0 0, calc(100% - var(--fs-cut)) 0, 100% var(--fs-cut), 100% 100%, 0 100%);
}
.fs-dmg__fig { position: relative; display: flex; align-items: flex-end; gap: 0.8rem; }
.fs-dmg__truck { width: 10.5rem; height: auto; display: block; overflow: visible; }
.fs-dmg__truck .body { fill: var(--dmg); transition: fill 0.3s; }
.fs-dmg__truck .glass { fill: rgba(0, 0, 0, 0.7); }
.fs-dmg__truck .cage { fill: var(--dmg); opacity: 0.8; }
.fs-dmg__truck .tube { fill: none; stroke: var(--dmg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.fs-dmg__truck .tyre { fill: #141414; stroke: var(--dmg); stroke-width: 1.6; }
.fs-dmg__truck .rim { fill: var(--fs-chrome); }
.fs-dmg__eng {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem 0.2rem;
  background: var(--fs-molten);
  color: #000;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(var(--fs-skew));
}
/* only the icon blinks, so the word stays readable */
.fs-dmg__eng svg { width: 1.6rem; height: 1.6rem; fill: currentColor; animation: fs-blink 1s steps(2, jump-none) infinite; }
.fs-dmg__eng[data-state='crit'] { background: var(--fs-red); color: #fff; }
.fs-dmg__eng[data-state='crit'] svg { animation-duration: 0.45s; }
.fs-dmg__row { display: flex; align-items: center; gap: 0.6rem; }
.fs-dmg__lbl, .fs-dmg__pct { font-size: 1.3rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fs-dust); text-box: trim-both cap alphabetic; }
.fs-dmg__pct { min-width: 2.6em; text-align: right; color: var(--fs-bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-dmg__bar { flex: 1; min-width: 6rem; height: 0.55rem; background: rgba(255, 255, 255, 0.14); transform: skewX(var(--fs-skew)); }
.fs-dmg__bar b { display: block; height: 100%; background: var(--dmg); transform-origin: 0 50%; transition: transform 0.25s; }

/* ---- speed + tach + boost (bottom right) ---- */
.fs-speed {
  right: calc(2rem + var(--sar));
  bottom: calc(1.4rem + var(--sab));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}
.fs-tach {
  position: relative;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.74) 0 58%, rgba(0, 0, 0, 0.5) 69%, rgba(0, 0, 0, 0) 71.5%);
}
.fs-tach__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-tach__track { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 9; }
.fs-tach__redzone { fill: none; stroke: rgba(255, 46, 31, 0.5); stroke-width: 9; }
.fs-tach__fill { fill: none; stroke: url(#fsTachGrad); stroke-width: 9; }
.fs-tach__ticks line { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.3; }
.fs-tach__ticks line.maj { stroke: #fff; stroke-width: 2.6; }
.fs-tach__ticks line.red { stroke: var(--fs-red); }
.fs-tach__nums text { fill: rgba(255, 246, 236, 0.85); font: 600 16px var(--fs-font); text-anchor: middle; }
.fs-tach__nums text.red { fill: var(--fs-red); }
.fs-tach__needle path { fill: #fff; }
.fs-tach.is-redline .fs-tach__needle path { fill: var(--fs-red); }
.fs-tach.is-redline .fs-tach__redzone { stroke: var(--fs-red); }
.fs-tach__read {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%) skewX(var(--fs-skew));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.fs-tach__kmh {
  font-size: 4.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.fs-tach__unit { font-size: 1.3rem; letter-spacing: 0.1em; color: var(--fs-dust); text-transform: uppercase; text-box: trim-both cap alphabetic; }
.fs-gear {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  min-width: 2.6rem;
  margin-left: -1.3rem;
  display: grid;
  place-items: center;
  padding: 0.45rem 0.4rem 0.3rem;
  box-sizing: border-box;
  background: var(--fs-bone);
  color: #000;
  transform: skewX(var(--fs-skew));
}
.fs-gear b { font-size: 2.3rem; font-weight: 700; text-box: trim-both cap alphabetic; }
.fs-tach.is-redline .fs-gear { background: var(--fs-orange); animation: fs-blink 0.16s steps(2, jump-none) infinite; }
.fs-gear.is-rev { background: var(--fs-red); color: #fff; }

.fs-boost { display: flex; align-items: center; gap: 0.5rem; margin-right: 0.6rem; }
.fs-boost__icon svg { width: 1.9rem; height: 1.9rem; fill: var(--fs-orange); display: block; filter: drop-shadow(0 0.08rem 0.15rem #000); }
.fs-boost__bar {
  position: relative;
  display: block;
  width: 11rem;
  height: 1rem;
  background: rgba(0, 0, 0, 0.6);
  transform: skewX(-24deg);
  overflow: hidden;
}
.fs-boost__bar b {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fs-orange), var(--fs-molten) 75%, #fff4d6);
  transform-origin: 0 50%;
}
/* segment gaps */
.fs-boost__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 0.16rem), rgba(0, 0, 0, 0.85) calc(10% - 0.16rem) 10%);
}
.fs-boost[data-state='on'] .fs-boost__bar { box-shadow: 0 0 0.9rem rgba(255, 140, 40, 0.9); }
.fs-boost[data-state='on'] .fs-boost__icon svg { fill: #fff4d6; }
.fs-boost[data-state='low'] .fs-boost__icon { animation: fs-blink 0.6s steps(2, jump-none) infinite; }

/* ---- key hints (bottom centre) ---- */
.fs-hints {
  left: 50%;
  bottom: calc(1.3rem + var(--sab));
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.32);
  font-size: 1.1rem;
  transition: opacity 1.2s;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 246, 236, 0.85);
  white-space: nowrap;
}
.fs-hints span { display: flex; align-items: center; gap: 0.22rem; }
.fs-hints kbd { margin-right: 0.12rem; font-size: 0.95em; }
.fs-hints.is-faded { opacity: 0.45; }

@keyframes fs-blink { 50% { opacity: 0.35; } }

/* ================= help panel ================= */
.fs-help {
  position: absolute;
  inset: 0;
  z-index: 7; /* above the pause menu, which opens it */
  display: grid;
  place-items: center;
  padding: calc(1rem + var(--sat)) calc(1rem + var(--sar)) calc(1rem + var(--sab)) calc(1rem + var(--sal));
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  overflow: auto;
}
.fs-help__card {
  position: relative;
  width: min(100%, 78rem);
  box-sizing: border-box;
  padding: 1.8rem 2.2rem 1.6rem;
  background: linear-gradient(180deg, rgba(14, 10, 7, 0.94), rgba(0, 0, 0, 0.94));
  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.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.fs-help__card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.fs-help__card h2 { margin: 0; font-size: 3.6rem; font-weight: 700; text-transform: uppercase; transform: skewX(var(--fs-skew)); text-box: trim-both cap alphabetic; }
.fs-x {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  transform: skewX(var(--fs-skew));
}
.fs-x svg { width: 1.6rem; height: 1.6rem; }
.fs-x:hover, .fs-x:focus-visible { background: var(--fs-orange); color: #000; outline: none; }
.fs-help__grid { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); gap: 1.4rem 2.4rem; }
.fs-help__col h3 {
  margin: 0 0 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-orange);
}
/* keys sit in a column sized to each group's widest combo, labels line up beside them */
.fs-help__col dl { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 0.8rem; }
.fs-help__col dl > div { display: contents; }
.fs-help__col dt { display: flex; gap: 0.25rem; font-size: 1.15rem; }
.fs-help__col dd { margin: 0; font-size: 1.5rem; color: rgba(255, 246, 236, 0.9); white-space: nowrap; }
/* touch variant: mini copies of the on-screen buttons */
.fs-help__grid.fs-help__grid--touch { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 1.4rem 3rem; }
.fs-help__grid--touch .fs-help__col dl { gap: 0.7rem 1rem; }
.fs-help__grid--touch .fs-help__col dd { font-size: 1.8rem; }
.fs-tkey {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.45rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.12rem rgba(255, 246, 236, 0.45);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  color: var(--fs-bone);
}
.fs-tkey svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fs-tkey svg .fill { fill: currentColor; stroke: none; }
.fs-tkey--txt { padding: 0.15rem 0.7rem 0; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em; }
.fs-help__card footer { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 1.45rem; color: var(--fs-dust); letter-spacing: 0.02em; }

@keyframes fs-rise { from { opacity: 0; transform: translateY(1.2rem); } }

/* ================= pause ================= */
.fs-pause {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: auto;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.45) 100%);
  backdrop-filter: blur(6px) saturate(0.8);
  -webkit-backdrop-filter: blur(6px) saturate(0.8);
  overflow: auto;
  animation: fs-fade 0.18s ease-out;
}
@keyframes fs-fade { from { opacity: 0; } }
.fs-pause__inner {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 40rem);
  align-content: center;
  gap: 4rem;
  padding: calc(2rem + var(--sat)) calc(3rem + var(--sar)) calc(2rem + var(--sab)) calc(5rem + var(--sal));
}
.fs-pause__menu { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; }
.fs-pause__logo { width: 17rem; height: auto; margin: 0 0 0.6rem -0.6rem; filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.6)); }
.fs-pause__title {
  margin: 0 0 1.2rem;
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fs-bone);
  transform: skewX(var(--fs-skew));
  text-box: trim-both cap alphabetic;
}
.fs-mbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.3rem 0.7rem;
  border: 0;
  background: rgba(255, 255, 255, 0.07);
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  transform: skewX(var(--fs-skew));
  overflow: hidden;
  isolation: isolate;
  outline: none;
  transition: color 0.12s, transform 0.12s;
}
.fs-mbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--fs-orange), #ff8a2e);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fs-mbtn span, .fs-mbtn em { text-box: trim-both cap alphabetic; }
.fs-mbtn em { font-style: normal; font-size: 0.8em; color: var(--fs-dust); }
.fs-mbtn:hover, .fs-mbtn:focus-visible { color: #000; transform: skewX(var(--fs-skew)) translateX(0.6rem); }
.fs-mbtn:hover::before, .fs-mbtn:focus-visible::before { transform: scaleX(1); }
.fs-mbtn:hover em, .fs-mbtn:focus-visible em { color: #000; }
.fs-mbtn:active { transform: skewX(var(--fs-skew)) translateX(0.6rem) scale(0.98); }
.fs-pause__note { margin: 0.4rem 0 0 0.3rem; font-size: 1.35rem; color: var(--fs-molten); letter-spacing: 0.03em; }
.fs-pause__tp { align-self: end; }
.fs-pause__tp h3 {
  margin: 0 0 0.9rem;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-orange);
}
.fs-pause__tpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.fs-tp {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem 0.55rem;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: left;
  transform: skewX(var(--fs-skew));
  outline: none;
  transition: background 0.12s, color 0.12s;
}
.fs-tp b { font-size: 2.2rem; font-weight: 700; color: var(--fs-orange); min-width: 1.2rem; text-box: trim-both cap alphabetic; }
.fs-tp span { font-size: 1.7rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: trim-both cap alphabetic; }
.fs-tp:hover, .fs-tp:focus-visible { background: var(--fs-bone); color: #000; }
.fs-tp:hover b, .fs-tp:focus-visible b { color: #000; }
/* free roam: car picker (swaps in place), styled like the main menu's */
.fs-pause__car { align-self: end; max-width: 34rem; }
.fs-pause__car h3 {
  margin: 0 0 0.9rem;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-orange);
}
.fs-pause__pick { display: flex; align-items: center; gap: 0.9rem; }
.fs-pause__cname {
  flex: 1;
  min-width: 0;
  font-size: 3.6rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fs-bone);
  transform: skewX(var(--fs-skew));
  text-box: trim-both cap alphabetic;
}
.fs-pause__ctag { margin: 0.9rem 0 0; font-size: 1.45rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-dust); }
.fs-pause__ctag b { margin-right: 0.8rem; color: var(--fs-orange); font-weight: 600; }
.fs-pause__car .fs-menu__blurb { margin: 0.6rem 0 0.4rem; }
#ui.is-touch .fs-pause__car .fs-menu__arrow { width: max(3.2rem, 40px); height: max(3.2rem, 40px); }

/* ================= title ================= */
.fs-title {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fs-title__haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(255, 106, 26, 0.16) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0.88) 100%);
}
.fs-title__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vh;
  width: 100%;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.fs-title__logo {
  position: relative;
  width: min(68vw, 100vh * 1.2, 1150px);
  aspect-ratio: 1506 / 636;
  animation: fs-logo-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fs-title__logo img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1.2rem 2.2rem rgba(0, 0, 0, 0.65));
}
.fs-title__burst {
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 178, 63, 0.55), rgba(255, 106, 26, 0.2) 40%, rgba(255, 106, 26, 0) 70%);
  animation: fs-burst 1.4s 0.3s ease-out both;
}
.fs-title__glint {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  /* a narrow band reads as light on chrome; a wide one reads as fog */
  background: linear-gradient(105deg, transparent 0 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 54%) no-repeat;
  background-size: 250% 100%;
  background-position: 180% 0;
  mix-blend-mode: screen;
  animation: fs-glint 5s 1.1s ease-in-out infinite;
}
@keyframes fs-logo-in {
  0% { opacity: 0; transform: translateY(-6%) scale(1.28) rotate(-2deg); filter: brightness(2.2); }
  42% { opacity: 1; transform: translateY(1%) scale(0.965) rotate(0); filter: brightness(1.4); }
  58% { transform: translateY(-0.5%) scale(1.012); }
  72% { transform: translate(0.6%, 0) scale(1); filter: brightness(1); }
  80% { transform: translate(-0.4%, 0); }
  100% { transform: none; filter: none; }
}
@keyframes fs-burst {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0.45; transform: scale(1.12); }
}
@keyframes fs-glint {
  0%, 62% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.fs-title__go {
  margin: 0;
  padding: 0.75rem 2.2rem 0.6rem;
  background: var(--fs-orange);
  color: #000;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: skewX(var(--fs-skew));
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5);
  animation: fs-go-in 0.4s 0.65s cubic-bezier(0.2, 1.3, 0.4, 1) both, fs-pulse 1.5s 1.2s ease-in-out infinite;
}
.fs-title__go span { display: block; text-box: trim-both cap alphabetic; }
@keyframes fs-go-in { from { opacity: 0; transform: skewX(var(--fs-skew)) scale(0.7); } }
@keyframes fs-pulse {
  0%, 100% { transform: skewX(var(--fs-skew)) scale(1); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(255, 106, 26, 0.6); }
  50% { transform: skewX(var(--fs-skew)) scale(1.045); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5), 0 0 0 0.7rem rgba(255, 106, 26, 0); }
}
.fs-title__card {
  display: flex;
  gap: 2.6rem;
  margin-top: 1.2vh;
  padding: 1.1rem 1.8rem 1rem;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: inset 0 0.22rem 0 rgba(255, 106, 26, 0.85);
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0.8rem 100%, 0 calc(100% - 0.8rem));
  animation: fs-rise 0.5s 0.9s ease-out both;
}
.fs-title__group h3 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-orange);
}
.fs-title__group p { display: flex; align-items: center; gap: 0.22rem; margin: 0 0 0.4rem; font-size: 1.1rem; }
.fs-title__group p span { margin-left: 0.45rem; font-size: 1.45rem; color: rgba(255, 246, 236, 0.92); white-space: nowrap; }
.fs-title__card--touch { gap: 2rem; }
.fs-title__card--touch div { display: flex; flex-direction: column; gap: 0.3rem; }
.fs-title__card--touch b { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-orange); }
.fs-title__card--touch span { font-size: 1.6rem; }
.fs-title__foot {
  position: absolute;
  bottom: calc(1.2rem + var(--sab));
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: rgba(255, 246, 236, 0.6);
  text-decoration: none;
  animation: fs-fade 0.6s 1.2s both;
}
.fs-title__foot:hover { color: var(--fs-orange); }
.fs-title.is-leaving { opacity: 0; pointer-events: none; transform: scale(1.06); }
#ui .fs-hud, #ui .fs-touch { transition: opacity 0.5s 0.15s; }
#ui.is-title .fs-hud, #ui.is-title .fs-touch { opacity: 0; transition: none; }

/* ================= touch controls (built by src/input.js) ================= */
.fs-touch { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fs-tbtn {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 0.16rem rgba(255, 246, 236, 0.48);
  color: var(--fs-bone);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.1s ease-out, background 0.1s ease-out, box-shadow 0.1s ease-out;
}
.fs-tbtn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fs-tbtn svg .fill { fill: currentColor; stroke: none; }
.fs-tbtn.is-down { background: var(--fs-orange); color: #000; box-shadow: inset 0 0 0 0.16rem #000, 0 0 0 0.16rem var(--fs-orange); transform: scale(0.95); }

.fs-touch__left, .fs-touch__right { position: absolute; bottom: calc(1.4rem + var(--sab)); }
.fs-touch__left { left: calc(1.6rem + var(--sal)); display: flex; flex-direction: column; align-items: flex-start; gap: 3.8rem; }
.fs-touch__right { right: calc(1.6rem + var(--sar)); width: 18rem; height: 22rem; }
.fs-touch__steer, .fs-touch__pedals { display: flex; gap: 1rem; align-items: flex-end; }
.fs-touch__steer { gap: 0; }
/* steering: big thumb pads, and the whole rectangle (slanted corners included) takes the touch;
   the slanted plate is drawn by ::before, inset a little so the pads look further apart than they are */
.fs-tbtn--left, .fs-tbtn--right { width: 13.6rem; height: 12.8rem; background: none; box-shadow: none; }
.fs-tbtn--left::before, .fs-tbtn--right::before {
  content: '';
  position: absolute;
  inset: 0 0.25rem;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 0.16rem rgba(255, 246, 236, 0.48);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  transition: background 0.1s ease-out;
}
.fs-tbtn--left.is-down, .fs-tbtn--right.is-down { background: none; box-shadow: none; }
.fs-tbtn--left.is-down::before, .fs-tbtn--right.is-down::before { background: var(--fs-orange); box-shadow: inset 0 0 0 0.16rem #000; }
.fs-tbtn--left svg, .fs-tbtn--right svg { position: relative; stroke-width: 2.9; width: 42%; height: 42%; }
.fs-touch__roll { position: relative; display: flex; justify-content: space-between; align-items: center; width: 26.6rem; margin-left: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; }
#ui.is-airborne .fs-touch__roll { opacity: 1; pointer-events: auto; }
.fs-touch__roll .fs-tbtn { pointer-events: none; }
#ui.is-airborne .fs-touch__roll .fs-tbtn { pointer-events: auto; }
.fs-touch__roll-label { position: absolute; left: 50%; transform: translateX(-50%) skewX(var(--fs-skew)); padding: 0.35rem 0.7rem 0.25rem; background: var(--fs-plate); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.07em; color: var(--fs-bone); }
.fs-tbtn--rollL, .fs-tbtn--rollR { width: 5.6rem; height: 4.6rem; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.fs-tbtn--rollL svg, .fs-tbtn--rollR svg { width: 44%; height: 52%; }
.fs-tbtn--gas, .fs-tbtn--brake {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  clip-path: polygon(0 6%, 50% 0, 100% 6%, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 0.22rem, transparent 0.22rem 1.1rem),
    rgba(0, 0, 0, 0.45);
}
.fs-tbtn--gas { width: 8.5rem; height: 14rem; box-shadow: inset 0 0 0 0.2rem var(--fs-orange); color: var(--fs-orange); }
.fs-tbtn--brake { width: 8.5rem; height: 10rem; }
.fs-tbtn--gas span, .fs-tbtn--brake span { align-self: end; margin-bottom: 1.1rem; }
.fs-tbtn--gas.is-down, .fs-tbtn--brake.is-down { background: var(--fs-orange); color: #000; }
.fs-tbtn--boost, .fs-tbtn--handbrake { width: 6.2rem; height: 6.2rem; border-radius: 50%; }
.fs-tbtn--boost { right: 1.15rem; bottom: 14.8rem; box-shadow: inset 0 0 0 0.2rem var(--fs-orange); color: var(--fs-orange); }
.fs-tbtn--handbrake { right: 10.65rem; bottom: 11rem; }
.fs-tbtn--handbrake span { font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; }
.fs-touch__pedals { position: absolute; right: 0; bottom: 0; }
.fs-touch__aux { position: absolute; inset: 0; }
.fs-touch__aux .fs-tbtn { position: absolute; }
.fs-touch__top {
  position: absolute;
  top: calc(3.4rem + var(--sat));
  right: calc(1.4rem + var(--sar));
  display: flex;
  gap: 0.7rem;
}
.fs-touch__top .fs-tbtn { width: 4.8rem; height: 4.8rem; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
/* kids mode (src/kids.js): the car steers itself, so just two big pedals: STOP bottom left, GO bottom right */
#ui.is-kids .fs-touch__left, #ui.is-kids .fs-touch__aux { display: none; }
#ui.is-kids .fs-touch__right { left: calc(1.6rem + var(--sal)); width: auto; height: auto; }
#ui.is-kids .fs-touch__pedals { position: static; justify-content: space-between; }
#ui.is-kids .fs-tbtn--gas { width: 15rem; height: 21rem; }
#ui.is-kids .fs-tbtn--brake { width: 13rem; height: 15rem; }
#ui.is-kids .fs-tbtn--gas span, #ui.is-kids .fs-tbtn--brake span { font-size: 0; }
#ui.is-kids .fs-tbtn--gas span::after, #ui.is-kids .fs-tbtn--brake span::after { content: 'GO'; font-size: 3.4rem; }
#ui.is-kids .fs-tbtn--brake span::after { content: 'STOP'; }

/* touch layout: the dial folds into a slim speed strip at bottom centre (the full dial sat on the truck),
   damage tucks under the score, key hints go, menu buttons grow to thumb size */
#ui.is-touch .fs-hints { display: none; }
#ui.is-touch .fs-speed { right: auto; left: 50%; transform: translateX(-50%); align-items: center; gap: 0.45rem; bottom: calc(0.9rem + var(--sab)); }
#ui.is-touch .fs-tach {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.5rem 0.5rem 1.7rem;
  border-radius: 0;
  background: var(--fs-plate);
  clip-path: polygon(0.9rem 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%);
}
#ui.is-touch .fs-tach__svg { display: none; }
#ui.is-touch .fs-tach__read { position: static; transform: skewX(var(--fs-skew)); flex-direction: row; align-items: flex-end; gap: 0.4rem; }
#ui.is-touch .fs-tach__kmh { font-size: 3.6rem; min-width: 1.65em; text-align: right; }
#ui.is-touch .fs-gear { position: static; margin: 0; }
#ui.is-touch .fs-boost { margin-right: 0; }
#ui.is-touch .fs-boost__bar { width: 9rem; height: 0.8rem; }
#ui.is-touch .fs-mbtn, #ui.is-touch .fs-tp { min-height: max(2.75rem, 40px); }
#ui.is-touch .fs-x { width: max(3rem, 40px); height: max(3rem, 40px); }
#ui.is-touch .fs-dmg {
  left: calc(2.2rem + var(--sal));
  bottom: auto;
  top: calc(6.1rem + var(--sat));
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  width: 15rem;
  padding: 0.5rem 0.8rem 0.45rem;
  background: var(--fs-plate);
  box-shadow: inset 0 0.16rem 0 rgba(255, 246, 236, 0.26);
  clip-path: none;
  transform: skewX(var(--fs-skew));
}
#ui.is-touch .fs-dmg__truck { display: none; }
#ui.is-touch .fs-dmg__fig { position: absolute; top: 100%; left: 0; }
#ui.is-touch .fs-dmg__row { width: 100%; gap: 0.55rem; }
#ui.is-touch .fs-dmg__lbl, #ui.is-touch .fs-dmg__pct { font-size: 1.55rem; font-weight: 700; color: var(--fs-bone); }
#ui.is-touch .fs-dmg__bar { min-width: 0; height: 0.8rem; }
#ui.is-touch .fs-score .fs-combo { margin-top: 3rem; }
#ui.is-touch .fs-score .fs-combo[hidden] + .fs-best { margin-top: 3rem; }
#ui.is-touch .fs-toasts { bottom: auto; top: calc(30vh + var(--sat)); }
#ui.is-touch .fs-sys { top: calc(0.6rem + var(--sat)); }

/* short screens (phones in landscape) */
@media (max-height: 520px) {
  .fs-air { top: calc(3vh + var(--sat)); }
  .fs-stunt { top: 15vh; }
  .fs-pop { gap: 0.55rem; }
  .fs-pause__inner { gap: 2.4rem; padding-left: calc(3rem + var(--sal)); }
  .fs-pause__logo { width: 13rem; margin-bottom: 0; }
  .fs-pause__title { font-size: 4.6rem; margin-bottom: 0.6rem; }
  .fs-mbtn { padding: 0.7rem 1.2rem 0.55rem; font-size: 2.1rem; }
  .fs-help__card { padding: 1.2rem 1.6rem 1rem; }
  .fs-help__card header { margin-bottom: 0.6rem; }
  .fs-help__card h2 { font-size: 2.8rem; }
  .fs-help__grid { grid-template-columns: repeat(5, minmax(0, auto)); gap: 0.8rem 1.6rem; }
  .fs-help__col h3 { margin-bottom: 0.5rem; }
  .fs-help__col dl { gap: 0.32rem 0.55rem; }
  .fs-help__col dt { font-size: 1rem; }
  .fs-help__col dd { font-size: 1.3rem; }
  .fs-help__card footer { margin-top: 0.8rem; padding-top: 0.6rem; font-size: 1.25rem; }
  .fs-title__logo { width: min(68vw, 100vh, 1150px); }
  #ui.is-touch .fs-pause__logo { display: none; }
}

/* narrow / portrait */
@media (max-aspect-ratio: 1/1) {
  html { font-size: clamp(8px, calc(0.5vmin + 0.55vmax), 30px); }
  .fs-pause__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: calc(2rem + var(--sat)) calc(2rem + var(--sar)) calc(2rem + var(--sab)) calc(2rem + var(--sal)); }
  .fs-pause__tp, .fs-pause__car { align-self: start; }
  .fs-help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-help__grid.fs-help__grid--touch { grid-template-columns: minmax(0, 1fr); }
  .fs-title__card { flex-direction: column; gap: 1rem; }
  .fs-title__logo { width: 92vw; }
  .fs-stunt { top: 24vh; }
  #ui.is-touch .fs-speed { bottom: calc(18rem + var(--sab)); }
  .fs-hints { display: none; }
  .fs-speed { transform-origin: 100% 100%; }
}
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) and (min-height: 521px) {
  .fs-help__grid { grid-template-columns: repeat(3, minmax(0, auto)); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-title__logo, .fs-title__burst, .fs-title__glint, .fs-title__go, .fs-title__card, .fs-title__foot { animation: none !important; }
  .fs-dmg__eng, .fs-gear, .fs-boost__icon { animation: none !important; }
}

/* touch + portrait: ask for landscape (index.html also goes full screen and locks landscape on the first tap) */
.fs-rotate {
  display: none; position: fixed; inset: 0; z-index: 100;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center; background: #1a120c; color: var(--fs-bone);
  font-family: var(--fs-font); text-transform: uppercase; letter-spacing: 0.04em;
}
.fs-rotate svg { width: 96px; height: 96px; color: var(--fs-orange); animation: fs-tip 2.2s ease-in-out infinite; }
.fs-rotate b { font-size: 34px; font-weight: 600; line-height: 1; }
.fs-rotate small { font-size: 20px; opacity: 0.7; }
@keyframes fs-tip { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { .fs-rotate { display: flex; } }