.pony-stage-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #e3efdf;
  pointer-events: none;
}

.pony-course {
  display: block;
  width: 100%;
  height: calc(100% - 120px);
  position: absolute;
  inset: 120px 0 0;
  overflow: hidden;
}

.play-stage.pony { height: 450px; }
.play-stage.pony .pony-stage-scene { inset: 36px 0 34px; }
.play-stage.pony .pony-next-line { top: 95px; bottom: auto; }
.play-stage.pony .actor-speech { padding: 0 10px; line-height: 1.5; }
.play-stage.pony .combo-badge { display: none; }

.pony-race-hud { position: absolute; top: 0; left: 13px; right: 13px; z-index: 1; color: #69805a; }
.pony-race-counts { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.pony-race-counts strong { color: #4f704c; font-weight: 750; }
.pony-race-counts > span:last-child { color: #998052; }
.pony-race-map { padding: 20px 13px 0; }
.pony-race-track { position: relative; height: 6px; border: 1px solid #c5d1ae; border-radius: 10px; background: #f7f6e8; }
.pony-race-fill { position: absolute; top: -1px; bottom: -1px; left: -1px; width: 0; border-radius: 10px; background: linear-gradient(90deg, #9ebd76, #769c69); transition: width 350ms ease-out; }
.pony-race-milestone { position: absolute; top: -3px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8px; color: #8d9d7e; }
.pony-race-milestone > i { display: block; width: 10px; height: 10px; border: 2px solid #b5c69c; border-radius: 50%; background: #f9f7e8; transition: background 250ms ease-out, border-color 250ms ease-out; }
.pony-race-milestone[data-reached="true"] { color: #577649; font-weight: 750; }
.pony-race-milestone[data-reached="true"] > i { background: #82a86b; border-color: #e7d497; box-shadow: 0 0 0 2px #f4e9bc; }
.pony-race-runner { position: absolute; left: 0; bottom: 4px; transform: translateX(-50%); width: 31px; height: 28px; transition: left 350ms ease-out; z-index: 2; }
.pony-race-runner .pony-artwork { width: 100%; height: 100%; }
.pony-race-finish-marker { position: absolute; right: -7px; bottom: 4px; color: #5c7951; font-size: 21px; line-height: 1; }
.pony-race-map-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; color: #889b72; font-size: 9px; line-height: 12px; }
.pony-race-full-course { color: #9eaa8c; font-size: 8px; }
.pony-race-map-labels strong { font-weight: 650; color: #6b8358; }
.pony-race-encouragement { margin-top: 5px; text-align: center; color: #879560; font-size: 10px; line-height: 15px; }
/* Feedback floats in the open upper-left sky, below the complete HUD, so it
   cannot cover counts, milestone markers or the moving course miniature. */
.pony-race-gain { position: absolute; top: 136px; left: 6px; padding: 4px 10px; border: 1px solid #dec37e; border-radius: 20px; background: #fff6d7; color: #9e793d; font-size: 12px; font-weight: 750; opacity: 0; }
.pony-race-gained .pony-race-gain { animation: pony-race-gain 800ms ease-out both; }
.pony-stage-scene[data-race-complete="true"] .pony-race-track { border-color: #b8a36e; }
.pony-stage-scene[data-race-complete="true"] .pony-race-fill { background: linear-gradient(90deg, #91ae70, #c5aa61); }
.pony-stage-scene[data-race-complete="true"] .pony-race-encouragement { color: #987a3f; font-weight: 650; }
.pony-finish-position { transition: transform 450ms ease-out; }
.pony-finish-ribbon-broken { opacity: 0; }
.pony-stage-scene[data-race-final-approach="true"] .pony-finish-position { transition: none; }
.pony-stage-scene[data-race-final-approach="true"] .pony-finish-camera { animation: pony-last-approach 700ms linear both; }

.pony-artwork {
  display: block;
  width: 190px;
  height: auto;
  overflow: visible;
}

.pony-rider { transform: translate(365px, 250px); }
.pony-world { transform: translateX(0); }
.pony-head { transform-origin: 39px -64px; }
.pony-ears { transform-origin: 72px -114px; }
.pony-child { transform-origin: -8px -87px; }
.pony-leg-front-near { transform-origin: 30px -46px; }
.pony-leg-front-far { transform-origin: 34px -47px; }
.pony-leg-back-near { transform-origin: -61px -45px; }
.pony-leg-back-far { transform-origin: -43px -45px; }
.pony-tail { transform-origin: -65px -71px; }
.pony-landing-dust,
.pony-refuse-mark { opacity: 0; }
.pony-target-sign { transform-origin: 530px 179px; }

.pony-course[data-phase="jump"] .pony-rider {
  animation: pony-jump 700ms linear both;
}
.pony-course[data-phase="jump"] .pony-world {
  animation: pony-camera-follow 700ms linear both;
}
.pony-course[data-phase="jump"] .pony-obstacle-current {
  animation: pony-hurdle-clearance 700ms ease-out both;
}
.pony-course[data-phase="jump"] .pony-parallax-fence {
  animation: pony-fence-follow 700ms linear both;
}
.pony-course[data-phase="jump"] .pony-ground-shadow {
  animation: pony-shadow 700ms linear both;
  transform-origin: 365px 251px;
}
.pony-course[data-phase="jump"] .pony-leg-front-near,
.pony-course[data-phase="jump"] .pony-leg-front-far {
  animation: pony-front-fold 700ms ease-in-out both;
}
.pony-course[data-phase="jump"] .pony-leg-back-near,
.pony-course[data-phase="jump"] .pony-leg-back-far {
  animation: pony-back-fold 700ms ease-in-out both;
}
.pony-course[data-phase="jump"] .pony-child {
  animation: pony-rider-lean 700ms ease-in-out both;
}
.pony-course[data-phase="jump"] .pony-tail {
  animation: pony-tail-lift 700ms ease-in-out both;
}
.pony-course[data-phase="jump"] .pony-landing-dust {
  animation: pony-dust 700ms ease-out both;
}
.pony-course[data-phase="jump"] .pony-obstacle-current .pony-target-sign {
  animation: pony-target-clear 700ms ease-out both;
}

.pony-course[data-phase="land"] .pony-rider,
.pony-course[data-phase="finish"] .pony-rider { transform: translate(665px, 250px); }
.pony-course[data-phase="land"] .pony-world,
.pony-course[data-phase="finish"] .pony-world { transform: translateX(-300px); }
.pony-course[data-phase="land"] .pony-obstacle-current,
.pony-course[data-phase="finish"] .pony-obstacle-current { transform: translateX(-40px); }
.pony-course[data-phase="land"] .pony-ground-shadow,
.pony-course[data-phase="finish"] .pony-ground-shadow { transform: translateX(300px); }
.pony-course[data-phase="finish"] .pony-target-sign { opacity: .4; }
.pony-course[data-phase="finish"] .pony-child { transform: rotate(-4deg); }

.pony-course[data-phase="refuse"] .pony-rider { animation: pony-stop 650ms ease-in-out both; }
.pony-course[data-phase="refuse"] .pony-head { animation: pony-head-no 650ms ease-in-out both; }
.pony-course[data-phase="refuse"] .pony-ears { animation: pony-ear-flick 650ms ease-in-out both; }
.pony-course[data-phase="refuse"] .pony-refuse-mark { animation: pony-gentle-notice 650ms ease-out both; }

.pony-next-line {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  padding: 6px 13px;
  border: 1px solid #f9f9eabf;
  border-radius: 18px;
  background: #fffef1d9;
  color: #6b8257;
  font-size: 10px;
  white-space: nowrap;
}

.pony-next-line > span:last-child {
  overflow: hidden;
  color: #4d6b47;
  font: 700 12px ui-monospace, monospace;
  text-overflow: ellipsis;
  letter-spacing: 2px;
}

/* Horse and hurdle share world coordinates. The camera follows after takeoff;
   the next hurdle arrives at x530 and the rider ends at screen x365, so changing
   back to idle for the next letter does not teleport the horse. */
@keyframes pony-camera-follow {
  0%, 54% { transform: translateX(0); }
  70% { transform: translateX(-80px); }
  86% { transform: translateX(-245px); }
  100% { transform: translateX(-300px); }
}

/* Leave space behind the tail and meet the past hurdle at x = -340 on reset. */
@keyframes pony-hurdle-clearance {
  0%, 70% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

/* Fence posts repeat every 56px, making the reset after 112px seamless. */
@keyframes pony-fence-follow {
  0%, 54% { transform: translateX(0); }
  70% { transform: translateX(-30px); }
  86% { transform: translateX(-91px); }
  100% { transform: translateX(-112px); }
}

@keyframes pony-jump {
  0% { transform: translate(365px, 250px); }
  10% { transform: translate(384px, 251px) rotate(-2deg); }
  25% { transform: translate(437px, 197px) rotate(-9deg); }
  42% { transform: translate(498px, 154px) rotate(-4deg); }
  54% { transform: translate(544px, 149px) rotate(1deg); }
  70% { transform: translate(602px, 187px) rotate(7deg); }
  86% { transform: translate(652px, 249px) rotate(2deg); }
  92% { transform: translate(665px, 252px) scale(1.025, .97); }
  100% { transform: translate(665px, 250px); }
}

@keyframes pony-shadow {
  0% { transform: translateX(0) scaleX(1); opacity: .22; }
  10% { transform: translateX(19px) scaleX(1); opacity: .22; }
  42% { transform: translateX(133px) scaleX(.68); opacity: .1; }
  54% { transform: translateX(179px) scaleX(.65); opacity: .1; }
  86% { transform: translateX(287px) scaleX(.98); opacity: .22; }
  100% { transform: translateX(300px) scaleX(1); opacity: .22; }
}

@keyframes pony-front-fold {
  0%, 10%, 88%, 100% { transform: rotate(0deg); }
  32%, 60% { transform: rotate(-58deg); }
  75% { transform: rotate(-24deg); }
}

@keyframes pony-back-fold {
  0%, 10%, 88%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(30deg); }
  48%, 64% { transform: rotate(53deg); }
  77% { transform: rotate(20deg); }
}

@keyframes pony-rider-lean {
  0%, 10%, 100% { transform: rotate(0deg); }
  30%, 62% { transform: rotate(18deg) translate(5px, -2px); }
  86% { transform: rotate(-3deg); }
}

@keyframes pony-tail-lift {
  0%, 100% { transform: rotate(0deg); }
  30%, 65% { transform: rotate(18deg); }
}

@keyframes pony-dust {
  0%, 81% { opacity: 0; }
  88% { opacity: .75; }
  100% { opacity: 0; }
}

@keyframes pony-target-clear {
  0%, 17%, 100% { opacity: 1; transform: translateY(0); }
  36%, 76% { opacity: .23; transform: translateY(-7px); }
}

@keyframes pony-stop {
  0%, 100% { transform: translate(365px, 250px); }
  24% { transform: translate(373px, 250px); }
  54% { transform: translate(361px, 250px); }
}

@keyframes pony-head-no {
  0%, 100% { transform: rotate(0deg); }
  24% { transform: rotate(-7deg); }
  46% { transform: rotate(5deg); }
  68% { transform: rotate(-3deg); }
}

@keyframes pony-ear-flick {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(-9deg); }
  53% { transform: rotate(7deg); }
}

@keyframes pony-gentle-notice {
  0%, 100% { opacity: 0; }
  28%, 65% { opacity: .85; }
}

/* The final accepted key includes the last jump, then a visible run beyond the
   finish line. The camera stops first so the horse crosses a stationary gate. */
.pony-course[data-phase="finish"] .pony-rider { animation: pony-finish-run 1900ms linear both; }
.pony-course[data-phase="finish"] .pony-world { animation: pony-finish-camera 1900ms linear both; }
.pony-course[data-phase="finish"] .pony-obstacle-current { animation: pony-finish-hurdle 1900ms ease-out both; }
.pony-course[data-phase="finish"] .pony-parallax-fence { animation: pony-finish-fence 1900ms linear both; }
.pony-course[data-phase="finish"] .pony-ground-shadow { animation: pony-finish-shadow 1900ms linear both; transform-origin: 365px 251px; }
.pony-course[data-phase="finish"] .pony-leg-front-near,
.pony-course[data-phase="finish"] .pony-leg-front-far { animation: pony-finish-front-legs 1900ms ease-in-out both; }
.pony-course[data-phase="finish"] .pony-leg-back-near,
.pony-course[data-phase="finish"] .pony-leg-back-far { animation: pony-finish-back-legs 1900ms ease-in-out both; }
.pony-course[data-phase="finish"] .pony-child { animation: pony-finish-rider 1900ms ease-in-out both; }
.pony-course[data-phase="finish"] .pony-tail { animation: pony-finish-tail 1900ms ease-in-out both; }
.pony-course[data-phase="finish"] .pony-obstacle-current .pony-target-sign { animation: pony-final-target 700ms ease-out both; }
.pony-course[data-phase="finish"] .pony-finish-position { transition: none; }
.pony-course[data-phase="finish"] .pony-finish-camera { animation: pony-finish-gate 1900ms linear both; }
.pony-course[data-phase="finish"] .pony-finish-ribbon { animation: pony-ribbon-clear 1900ms step-end both; }
.pony-course[data-phase="finish"] .pony-finish-ribbon-broken { animation: pony-ribbon-break 1900ms step-end both; }

@keyframes pony-finish-run {
  0% { transform: translate(365px, 250px); }
  4% { transform: translate(384px, 251px) rotate(-2deg); }
  9% { transform: translate(437px, 197px) rotate(-9deg); }
  15% { transform: translate(498px, 154px) rotate(-4deg); }
  20% { transform: translate(544px, 149px) rotate(1deg); }
  26% { transform: translate(602px, 187px) rotate(7deg); }
  32% { transform: translate(652px, 249px) rotate(2deg); }
  36% { transform: translate(665px, 250px); }
  47% { transform: translate(753px, 247px); }
  58% { transform: translate(843px, 250px); }
  69% { transform: translate(922px, 247px); }
  80% { transform: translate(994px, 250px); }
  90% { transform: translate(1031px, 249px); }
  100% { transform: translate(1040px, 250px); }
}
@keyframes pony-finish-camera { 0%, 20% { transform: translateX(0); } 26% { transform: translateX(-80px); } 32% { transform: translateX(-245px); } 36%, 100% { transform: translateX(-300px); } }
@keyframes pony-finish-gate { 0%, 20% { transform: translateX(180px); } 26% { transform: translateX(132px); } 32% { transform: translateX(33px); } 36%, 100% { transform: translateX(0); } }
@keyframes pony-last-approach { 0%, 54% { transform: translateX(180px); } 70% { transform: translateX(132px); } 86% { transform: translateX(33px); } 100% { transform: translateX(0); } }
@keyframes pony-finish-hurdle { 0%, 26% { transform: translateX(0); } 36%, 100% { transform: translateX(-40px); } }
@keyframes pony-finish-fence { 0%, 20% { transform: translateX(0); } 26% { transform: translateX(-30px); } 32% { transform: translateX(-91px); } 36%, 100% { transform: translateX(-112px); } }
@keyframes pony-finish-shadow {
  0% { transform: translateX(0); opacity: .22; } 9% { transform: translateX(72px) scaleX(.8); opacity: .14; }
  20% { transform: translateX(179px) scaleX(.65); opacity: .1; } 32% { transform: translateX(287px); opacity: .22; }
  36% { transform: translateX(300px); } 47% { transform: translateX(388px); } 58% { transform: translateX(478px); }
  69% { transform: translateX(557px); } 80% { transform: translateX(629px); } 90% { transform: translateX(666px); } 100% { transform: translateX(675px); }
}
@keyframes pony-finish-front-legs { 0%, 4%, 33%, 100% { transform: rotate(0); } 12%, 22% { transform: rotate(-58deg); } 28% { transform: rotate(-24deg); } 40%, 61%, 81% { transform: rotate(-20deg); } 50%, 71%, 90% { transform: rotate(16deg); } }
@keyframes pony-finish-back-legs { 0%, 4%, 33%, 100% { transform: rotate(0); } 11% { transform: rotate(30deg); } 18%, 24% { transform: rotate(53deg); } 29% { transform: rotate(20deg); } 40%, 61%, 81% { transform: rotate(20deg); } 50%, 71%, 90% { transform: rotate(-16deg); } }
@keyframes pony-finish-rider { 0%, 4%, 36% { transform: rotate(0); } 11%, 23% { transform: rotate(18deg) translate(5px, -2px); } 40%, 75% { transform: rotate(5deg); } 100% { transform: rotate(-4deg); } }
@keyframes pony-finish-tail { 0%, 100% { transform: rotate(0); } 12%, 25% { transform: rotate(18deg); } 40%, 60%, 80% { transform: rotate(10deg); } 50%, 70%, 90% { transform: rotate(3deg); } }
@keyframes pony-final-target { 0%, 17% { opacity: 1; } 40%, 100% { opacity: .2; } }
@keyframes pony-ribbon-clear { 0%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes pony-ribbon-break { 0%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes pony-race-gain { 0% { opacity: 0; transform: translateY(7px); } 18%, 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 760px) {
  .play-stage.pony { height: 410px; }
  .pony-race-hud { left: 10px; right: 10px; }
  .pony-race-counts { gap: 6px; font-size: 10px; }
  .pony-race-encouragement { font-size: 9px; }
  .pony-race-gain { font-size: 11px; padding: 3px 8px; }
  .pony-next-line { bottom: 8px; font-size: 9px; padding: 5px 10px; gap: 7px; }
  .pony-next-line > span:last-child { font-size: 11px; }
}

@media (max-width: 440px) {
  .play-stage.pony { height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .pony-course *,
  .pony-course *::before,
  .pony-course *::after { animation: none !important; }
  .pony-stage-scene * { transition: none !important; }
  .pony-race-gained .pony-race-gain { animation: none; opacity: 1; }
  .pony-course[data-phase="jump"] .pony-rider { transform: translate(665px, 250px); }
  .pony-course[data-phase="jump"] .pony-world { transform: translateX(-300px); }
  .pony-course[data-phase="jump"] .pony-obstacle-current { transform: translateX(-40px); }
  .pony-course[data-phase="jump"] .pony-ground-shadow { transform: translateX(300px); }
  .pony-course[data-phase="refuse"] .pony-refuse-mark { opacity: .8; }
  .pony-course[data-phase="finish"] .pony-rider { transform: translate(1040px, 250px); }
  .pony-course[data-phase="finish"] .pony-world { transform: translateX(-300px); }
  .pony-course[data-phase="finish"] .pony-obstacle-current { transform: translateX(-40px); }
  .pony-course[data-phase="finish"] .pony-ground-shadow { transform: translateX(675px); }
  .pony-course[data-phase="finish"] .pony-finish-camera { transform: translateX(0); }
  .pony-course[data-phase="finish"] .pony-finish-ribbon { opacity: 0; }
  .pony-course[data-phase="finish"] .pony-finish-ribbon-broken { opacity: 1; }
}