/* MONSTER MASH MOTORS — Rumble Bowl Stunt Show (site/src/js/games/stunt.js).
   The arena bill style: flat inks, a black key line, hard offset shadows,
   Anton headlines off register, Bangers for punchy labels, Lexend to read.
   Everything is scoped to .stunt; tokens fall back to the house inks. */

@font-face { font-family: 'Anton'; src: url('../fonts/Anton-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('../fonts/Bangers-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.stunt {
  --paper: #F4EBDD; --paper-hi: #FFF9EE; --key: #15110F; --orange: #FB652D; --blue: #6AB9D7;
  --night: #13162C; --night-2: #1C2248; --safety: #FFE14A; --gold: #F2C12E; --tk: #FB652D;
  --shadow: 5px 5px 0 var(--key);
  --anton: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --bangers: 'Bangers', 'Anton', Impact, sans-serif;
  --lexend: 'Lexend', system-ui, sans-serif;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  font-family: var(--lexend);
  color: var(--key);
  -webkit-tap-highlight-color: transparent;
}
.stunt *, .stunt *::before, .stunt *::after { box-sizing: border-box; }
.stunt > * { min-width: 0; }

/* ---------------------------------------------------------------- stage */
.st-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 124px);
  min-height: 240px;
  background: #10142B;
  border: 4px solid var(--key);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  outline: none;
  touch-action: manipulation;
}
@media (orientation: portrait) {
  .st-stage { aspect-ratio: 1 / 1.3; max-height: calc(100svh - 124px); }
}
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.stunt:not(.is-ready) .st-canvas { opacity: 0; }

/* ---------------------------------------------------------------- buttons */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 48px; padding: 8px 16px;
  font: 700 18px/1.1 var(--lexend);
  color: var(--key); background: var(--paper-hi);
  border: 4px solid var(--key); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--key);
  cursor: pointer; user-select: none;
  transition: transform .06s, box-shadow .06s;
}
.st-btn svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.st-btn:hover { background: #FFFDF6; }
.st-btn:active, .st-btn.is-down { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--key); }
.st-btn:focus-visible { outline: 5px solid var(--safety); outline-offset: 3px; }
.st-btn:disabled { cursor: not-allowed; opacity: .6; box-shadow: 2px 2px 0 var(--key); }
.st-big { min-height: 72px; padding: 10px 28px; font: 400 34px/1 var(--bangers); letter-spacing: .04em; background: var(--orange); }
.st-big svg { width: 30px; height: 30px; }
.st-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------------------------------------------------------------- panels */
.st-panel {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px;
  padding: 14px 16px; overflow-y: auto; text-align: center;
  color: var(--paper-hi);
  background: rgba(16, 20, 43, .74);
}
.st-panel[hidden] { display: none; }
.st-bill {
  margin: 0; font: 400 clamp(38px, 8.5vw, 92px)/.92 var(--anton); text-transform: uppercase; letter-spacing: .01em;
  color: var(--paper-hi);
  text-shadow: 4px 4px 0 var(--orange), -3px -2px 0 var(--blue), 5px 5px 0 var(--key);
}
.st-bill span { color: var(--safety); }
.st-head {
  margin: 0; font: 400 clamp(28px, 5vw, 48px)/1 var(--anton); text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--orange), -2px -2px 0 var(--blue);
}
.st-lede { margin: 0; font-size: clamp(17px, 2.2vw, 20px); max-width: 32em; }
.st-sound-note { margin: 0; font-size: 16px; opacity: .92; }

/* The truck picker: six picture buttons. */
.st-trucks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 1080px; }
.st-truck {
  position: relative; flex-direction: column; gap: 4px; padding: 8px 6px 10px; min-height: 64px;
  background: var(--paper); border-color: var(--key);
}
.st-truck::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--tk); border-bottom: 3px solid var(--key); border-radius: 8px 8px 0 0; }
.st-portrait { display: block; width: 100%; max-width: 132px; aspect-ratio: 1.1; margin-top: 6px; }
.st-portrait svg { width: 100%; height: 100%; }
.st-name { font: 400 22px/1 var(--anton); text-transform: uppercase; letter-spacing: .02em; }
.st-limit { display: inline-flex; align-items: center; gap: 5px; font: 600 15px/1.1 var(--lexend); }
.st-limit-ico svg, .st-pw-ico svg { width: 30px; height: 16px; fill: var(--orange); stroke: var(--key); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.st-limit-ico svg .f, .st-pw-ico svg .f { fill: var(--key); }
.st-limit-ico svg .n, .st-pw-ico svg .n { fill: none; stroke: var(--paper-hi); }
.st-best-stars { position: absolute; top: 14px; right: 8px; color: var(--gold); font-size: 16px; -webkit-text-stroke: 1px var(--key); }

/* The set-up picker. */
.st-setups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 980px; }
.st-setupbtn { flex-direction: column; gap: 4px; padding: 8px; background: var(--paper); }
.st-setpic { display: block; width: 100%; max-width: 170px; aspect-ratio: 1.5; }
.st-setpic svg { width: 100%; height: 100%; }
.st-built { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1.2 var(--lexend); }
.st-built i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--tk); border: 2px solid var(--key); }
.st-setupbtn.is-locked .st-setpic { filter: grayscale(1); opacity: .5; }
.st-back { background: var(--paper); }

/* ---------------------------------------------------------------- HUD */
.st-hud {
  position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.st-hud[hidden] { display: none; }
.st-hud > * { pointer-events: auto; }
.st-score { display: flex; flex-direction: column; gap: 4px; }
.st-points {
  display: inline-block; min-width: 3.5em; padding: 2px 12px;
  font: 400 30px/1.1 var(--bangers); letter-spacing: .03em; color: var(--key);
  background: var(--safety); border: 3px solid var(--key); border-radius: 10px; box-shadow: 3px 3px 0 var(--key);
}
.st-meter {
  position: relative; display: block; width: 160px; height: 18px; margin: 8px 12px 0 10px;
  background: var(--paper-hi); border: 3px solid var(--key); border-radius: 9px; box-shadow: 3px 3px 0 var(--key);
}
.st-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--orange); border-radius: 5px; transition: width .2s; }
.st-meter i {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; font-size: 0;
  background: var(--key);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.st-meter i::after {
  content: ''; position: absolute; inset: 4px; background: var(--paper-hi);
  clip-path: inherit;
}
.st-meter .s1 { left: 0; } .st-meter .s2 { left: var(--m2, 45%); } .st-meter .s3 { left: 100%; }
.st-meter .s1::after, .st-meter.got2 .s2::after, .st-meter.got3 .s3::after { background: var(--gold); }
.st-clock {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px;
  font: 400 30px/1.1 var(--bangers); color: var(--paper-hi);
  background: var(--night-2); border: 3px solid var(--key); border-radius: 10px; box-shadow: 3px 3px 0 var(--key);
}
.st-clock svg { width: 24px; height: 24px; fill: none; stroke: var(--paper-hi); stroke-width: 2.4; stroke-linecap: round; }
.st-clock.is-low { background: var(--orange); color: var(--key); }
.st-clock.is-low svg { stroke: var(--key); }
.st-pause { padding: 6px 12px; }
.st-pause span { font: 700 16px/1 var(--lexend); }

/* Announcer Al pops in at the top with his call. */
.st-al {
  position: absolute; z-index: 4; left: 50%; top: 58px; transform: translate(-50%, -8px) scale(.7);
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(92%, 640px);
  padding: 6px 16px 6px 8px;
  background: var(--paper-hi); border: 4px solid var(--key); border-radius: 16px; box-shadow: 4px 4px 0 var(--key);
  opacity: 0; pointer-events: none;
  transition: opacity .12s, transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.st-al.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.st-al-face { display: block; width: 44px; height: 52px; flex: 0 0 auto; }
.st-al-face svg { width: 100%; height: 100%; }
.st-al-text {
  margin: 0; font: 400 clamp(20px, 3.2vw, 34px)/1.05 var(--bangers); letter-spacing: .03em; color: var(--key);
  text-shadow: 2px 2px 0 var(--orange);
}
/* The truck's own words, above its hood. */
.st-say {
  position: absolute; z-index: 3; left: 0; top: 0; translate: -50% -100%;
  width: max-content; max-width: min(260px, 80%); padding: 6px 12px; font: 700 16px/1.2 var(--lexend); color: var(--key);
  background: var(--paper-hi); border: 3px solid var(--key); border-radius: 14px; box-shadow: 3px 3px 0 var(--key);
  opacity: 0; pointer-events: none; transition: opacity .15s; white-space: normal; text-align: center;
}
.st-say::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px; background: var(--paper-hi); border: 3px solid var(--key); border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.st-say.is-on { opacity: 1; }
.st-count {
  position: absolute; z-index: 4; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.6);
  font: 400 clamp(64px, 16vw, 170px)/1 var(--anton); color: var(--paper-hi);
  text-shadow: 6px 6px 0 var(--orange), -4px -3px 0 var(--blue), 7px 7px 0 var(--key);
  opacity: 0; pointer-events: none;
}
.st-count.is-on { animation: st-pop .75s ease-out both; }
@keyframes st-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.st-hint {
  position: absolute; z-index: 4; right: 10px; bottom: 10px; padding: 6px 12px;
  font: 700 16px/1 var(--lexend); color: var(--key); background: var(--safety);
  border: 3px solid var(--key); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.st-hint.is-on { opacity: 1; }

/* ---------------------------------------------------------------- controls */
.st-controls { display: flex; justify-content: space-between; align-items: stretch; gap: 12px; touch-action: none; user-select: none; }
.st-controls[hidden] { display: none !important; }
.st-lean, .st-acts { display: flex; gap: 12px; }
.st-ctl { flex-direction: column; gap: 2px; min-width: 72px; min-height: 72px; padding: 6px 10px; font: 400 22px/1 var(--bangers); letter-spacing: .04em; touch-action: none; }
.st-ctl .st-ico { font: 700 30px/1 var(--lexend); }
.st-back-flip, .st-front-flip { background: var(--blue); }
.st-jump { min-width: 104px; min-height: 84px; background: var(--orange); font-size: 28px; }
.st-jump .st-ico { font-size: 34px; }
.st-power { position: relative; min-width: 120px; min-height: 84px; background: var(--tk); overflow: hidden; }
.st-pw-word {
  font: 400 24px/1 var(--bangers); letter-spacing: .04em; color: var(--key);
  background: var(--paper-hi); border: 2px solid var(--key); border-radius: 8px; padding: 2px 8px;
}
.st-pw-ico svg { width: 38px; height: 20px; }
.st-pw-limit { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--lexend); color: var(--key); background: var(--paper-hi); border: 2px solid var(--key); border-radius: 8px; padding: 2px 6px; }
.st-pips { display: inline-flex; gap: 4px; }
.st-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--key); background: transparent; }
.st-pips i.on { background: var(--orange); }
.st-bar { display: inline-block; width: 46px; height: 12px; border: 2.5px solid var(--key); border-radius: 6px; overflow: hidden; background: var(--night-2); }
.st-bar i { display: block; height: 100%; width: calc(var(--fill, 1) * 100%); background: var(--safety); }
.st-power[data-mode="empty"], .st-power[data-mode="wait"] { filter: saturate(.25) brightness(.85); }
.st-power[data-mode="glow"] .st-bar i, .st-power[data-mode="glow"] .st-pips i.on { background: var(--orange); }
.st-power.is-ready { box-shadow: 4px 4px 0 var(--key), 0 0 0 4px var(--safety); }
.st-power.is-ready.is-down { box-shadow: 1px 1px 0 var(--key), 0 0 0 4px var(--safety); }

/* Landscape phones: controls at the sides of the arena. */
.stunt.is-side { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lean stage acts" "how how how"; align-items: center; column-gap: 8px; }
.stunt.is-side .st-stage { grid-area: stage; aspect-ratio: auto; height: calc(100svh - 16px); max-height: none; min-height: 200px; }
.stunt.is-side .st-controls { display: contents; }
.stunt.is-side .st-lean { grid-area: lean; flex-direction: column; }
.stunt.is-side .st-acts { grid-area: acts; flex-direction: column; }
@media (max-height: 520px) {
  .st-al { top: 92px; max-width: 72%; }
  .st-al-text { font-size: 19px; }
  .st-al-face { width: 30px; height: 36px; }
  .st-say { font-size: 14px; padding: 4px 10px; }
}
.stunt.is-side .st-how { grid-area: how; }

/* ---------------------------------------------------------------- results */
.st-results { justify-content: flex-start; gap: 8px; }
.st-res-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; }
.st-res-stars { display: flex; gap: 6px; }
.st-star { font: 400 clamp(52px, 9vw, 84px)/1 var(--bangers); color: var(--night-2); -webkit-text-stroke: 3px var(--paper-hi); }
.st-star.on { color: var(--gold); -webkit-text-stroke: 3px var(--key); text-shadow: 4px 4px 0 var(--orange); animation: st-star .5s var(--d, 0s) both cubic-bezier(.3, 1.6, .5, 1); }
@keyframes st-star { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.st-res-points { margin: 0; font: 400 22px/1 var(--lexend); }
.st-res-points b { font: 400 clamp(34px, 5vw, 52px)/1 var(--bangers); letter-spacing: .03em; color: var(--safety); text-shadow: 3px 3px 0 var(--key); }
.st-res-al { display: flex; align-items: center; gap: 8px; margin: 0; max-width: 40em; padding: 6px 14px 6px 8px; background: var(--paper-hi); color: var(--key); border: 4px solid var(--key); border-radius: 16px; box-shadow: 4px 4px 0 var(--key); }
.st-res-al-text { font: 400 clamp(20px, 2.6vw, 28px)/1.1 var(--bangers); letter-spacing: .03em; text-align: left; }
.st-res-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-res-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--night-2); border: 3px solid var(--key); border-radius: 10px; font-size: 16px; }
.st-li-ico { font-size: 20px; color: var(--safety); }
.st-li-v { font: 400 22px/1 var(--bangers); letter-spacing: .03em; color: var(--safety); }
.st-res-best { margin: 0; font-weight: 700; }
.st-badges p { margin: 4px 0; }
.st-badge-new { display: inline-block; padding: 6px 14px; font: 700 17px/1.3 var(--lexend); color: var(--key); background: var(--safety); border: 3px solid var(--key); border-radius: 12px; box-shadow: 3px 3px 0 var(--key); }
.st-burst { color: var(--orange); font-size: 22px; }
.st-unlock { font-weight: 700; color: var(--safety); }

/* ---------------------------------------------------------------- how to play */
.st-how { margin: 0; font-size: 17px; line-height: 1.5; color: var(--key); }
.st-how-i { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; white-space: nowrap; }
.st-how small { font-size: 14px; opacity: .85; }
.st-key { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 5px; font: 700 18px/1 var(--lexend); background: var(--paper-hi); border: 3px solid var(--key); border-radius: 7px; box-shadow: 2px 2px 0 var(--key); }
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .st-trucks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-setups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-truck { padding: 6px 4px 8px; }
  .st-portrait { max-width: 84px; }
  .st-name { font-size: 18px; }
  .st-limit { font-size: 13px; gap: 3px; }
  .st-limit-ico svg { width: 24px; }
  .st-setpic { max-width: 120px; }
  .st-points, .st-clock { font-size: 24px; }
  .st-meter { width: 110px; }
  .st-panel { padding: 10px; gap: 8px; }
  .st-al { top: 84px; max-width: 86%; padding: 4px 10px 4px 6px; }
  .st-al-face { width: 32px; height: 38px; }
  .st-al-text { font-size: 20px; }
  .st-res-al { padding: 4px 10px 4px 6px; }
  .st-res-al-text { font-size: 19px; }
  .st-res-list li { padding: 2px 8px; font-size: 14px; }
  .st-li-v { font-size: 19px; }
  .st-star { font-size: 48px; }
  .st-head { font-size: 28px; }
}
@media (max-width: 400px) {
  .st-ctl { min-width: 64px; min-height: 64px; padding: 4px 6px; font-size: 18px; }
  .st-jump { min-width: 80px; min-height: 72px; }
  .st-power { min-width: 96px; min-height: 72px; }
  .st-lean, .st-acts { gap: 8px; }
  .st-pause span { display: none; }
  .st-how { font-size: 16px; }
}
/* Phone results: everything above the fold, list included. */
@media (max-width: 480px) {
  .st-results { gap: 6px; padding-top: 8px; }
  .st-results .st-head { font-size: 22px; }
  .st-results .st-big { min-height: 52px; font-size: 26px; padding: 4px 18px; }
  .st-results .st-row { gap: 8px; }
  .st-newtruck, .st-newsetup { min-height: 48px; padding: 6px 12px; font-size: 16px; }
  .st-star { font-size: 34px; }
  .st-res-points b { font-size: 26px; }
  .st-res-al-text { font-size: 16px; }
  .st-badge-new { font-size: 14px; padding: 4px 10px; }
  .st-badges p { margin: 2px 0; }
  .st-unlock { font-size: 13px; }
  .st-res-list { gap: 4px; }
  .st-res-list li { font-size: 13px; padding: 2px 6px; gap: 4px; }
  .st-li-ico { display: none; }
  .st-li-v { font-size: 17px; }
  /* Play again on its own line, the two smaller buttons side by side under it. */
  .st-results .st-row { display: grid; grid-template-columns: auto auto; justify-content: center; }
  .st-results .st-again { grid-column: 1 / -1; justify-self: center; }
}
/* Landscape phones: a shorter results card. */
@media (max-height: 520px) {
  .st-results { gap: 5px; padding-top: 6px; }
  .st-results .st-head { font-size: 24px; }
  .st-star { font-size: 34px; }
  .st-res-points { font-size: 18px; }
  .st-res-points b { font-size: 26px; }
  .st-results .st-big { min-height: 50px; font-size: 24px; padding: 4px 16px; }
  .st-newtruck, .st-newsetup { min-height: 48px; padding: 4px 12px; font-size: 16px; }
  .st-res-al { padding: 2px 10px 2px 6px; }
  .st-res-al .st-al-face { width: 26px; height: 30px; }
  .st-res-al-text { font-size: 16px; }
  .st-badge-new { font-size: 14px; padding: 3px 10px; }
  .st-badges p { margin: 1px 0; }
  .st-unlock { font-size: 14px; }
  .st-res-list li { font-size: 13px; padding: 1px 6px; }
  .st-li-v { font-size: 16px; }
}
/* The narrowest phones (after the 400px rules, so these win): the four
   buttons share the row instead of keeping minimum widths. */
@media (max-width: 360px) {
  .st-trucks { gap: 6px; }
  .st-portrait { max-width: 60px; }
  .st-name { font-size: 16px; }
  .st-limit { font-size: 12px; }
  .st-limit-ico { display: none; }
  .st-panel { padding: 8px 6px; gap: 6px; }
  .st-head { font-size: 24px; }
  .st-big { min-height: 60px; font-size: 26px; padding: 8px 16px; }
  .st-res-al .st-al-face { display: none; }
  .st-controls, .st-lean, .st-acts { gap: 6px; }
  .st-lean { flex: 1 1 0; min-width: 0; }
  .st-acts { flex: 1.35 1 0; min-width: 0; }
  .st-ctl { flex: 1 1 0; min-width: 0; padding: 4px; }
  .st-power { flex-grow: 1.5; }
  .st-pw-ico { display: none; }
  .st-pw-word { font-size: 20px; padding: 1px 5px; }
  .st-pw-limit { font-size: 12px; padding: 1px 4px; }
  .st-bar { width: 30px; }
}
.stunt.is-side .st-trucks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stunt.is-side .st-portrait { max-width: 80px; }
.stunt.is-side .st-ctl { min-width: 72px; min-height: 64px; }

/* ---------------------------------------------------------------- reduced motion */
.stunt.st-still .st-al, .stunt.st-still .st-btn { transition: none; }
.stunt.st-still .st-count.is-on { animation: st-fade .75s linear both; }
.stunt.st-still .st-star.on { animation: none; }
@keyframes st-fade { 0% { opacity: 0; transform: translate(-50%, -50%); } 15%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .stunt .st-al, .stunt .st-btn { transition: none; }
  .stunt .st-star.on { animation: none; }
}