.play-stage.dino { height: 410px; background: #edf1dd; }

.dino-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(#e4f0ec, #fff6db);
  pointer-events: none;
  --dino-trex-stride: 550ms;
  --dino-rhino-stride: 600ms;
}

.dino-picture { display: block; width: 100%; height: 100%; }
.dino-picture text { font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.dino-portrait { display: block; width: 100%; height: 100%; overflow: visible; }
.dino-cue { position: absolute; top: 30px; left: 47%; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 240px; transform: translateX(-50%); color: #7b8964; text-align: center; font-size: 12px; }
.dino-cue strong { display: grid; place-items: center; min-width: 64px; min-height: 64px; padding: 3px 15px; border: 2px solid #c9b889; border-radius: 17px 17px 17px 5px; background: #fffdf1; box-shadow: 0 4px 0 #c8b98c40; color: #657a4f; font: 750 40px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace; }
.dino-cue strong.dino-target-word,
.dino-stage[data-phase="complete"] .dino-cue strong { font: 700 25px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif; }
.dino-cue-detail { color: #8b957b; font-size: 10px; }
.dino-progress-note { position: absolute; left: 17px; bottom: 11px; padding: 5px 11px; border-radius: 20px; background: #fffaf0dc; color: #7f825b; font-size: 10px; }
/* The practice card already owns the bottom narration and progress bar. Keep
   that one readable line, especially when the narration wraps on a phone. */
.play-stage.dino .dino-progress-note { display: none; }
.play-stage.dino .actor-speech { padding: 0 12px; line-height: 1.5; }
.dino-stage [data-dino-trex-position],
.dino-stage [data-dino-rhino-position] { transition: transform 330ms cubic-bezier(.2,.65,.25,1); }

.dino-trex-face-cry,
.dino-trex-face-roar,
.dino-rhino-face-happy,
.dino-rhino-face-look,
.dino-cry-bubble { display: none; }
.dino-rhino-peek,
.dino-finish-sparkles,
.dino-speed-lines { opacity: 0; }
.dino-trex-leg-near { transform-origin: 126px 142px; }
.dino-trex-leg-far { transform-origin: 148px 137px; }
.dino-trex-tail { transform-origin: 108px 120px; }
.dino-trex-head { transform-origin: 170px 72px; }
.dino-trex-jaw { transform-origin: 177px 66px; }
.dino-trex-arm-near { transform-origin: 167px 105px; }
.dino-trex-arm-far { transform-origin: 177px 105px; }
.dino-rhino-leg { transform-origin: var(--dino-leg-pivot); }
.dino-rhino-tail { transform-origin: 25px 67px; }
.dino-rhino-head { transform-origin: 146px 66px; }
.dino-rhino-blink { transform-origin: 167px 69px; }

.dino-stage .dino-trex-leg-near { animation: dino-trex-step var(--dino-trex-stride) ease-in-out infinite; }
.dino-stage .dino-trex-leg-far { animation: dino-trex-step var(--dino-trex-stride) ease-in-out infinite; animation-delay: calc(var(--dino-trex-stride) * -.5); }
.dino-stage .dino-trex-tail { animation: dino-tail-sway var(--dino-trex-stride) ease-in-out infinite alternate; }
.dino-stage .dino-trex-arm { animation: dino-arm-swing var(--dino-trex-stride) ease-in-out infinite alternate; }
.dino-stage .dino-rhino-leg-back-near,
.dino-stage .dino-rhino-leg-front-far { animation: dino-rhino-step var(--dino-rhino-stride) ease-in-out infinite; }
.dino-stage .dino-rhino-leg-back-far,
.dino-stage .dino-rhino-leg-front-near { animation: dino-rhino-step var(--dino-rhino-stride) ease-in-out infinite; animation-delay: calc(var(--dino-rhino-stride) * -.5); }
.dino-stage .dino-rhino-head { animation: dino-head-bob var(--dino-rhino-stride) ease-in-out infinite alternate; }
.dino-stage .dino-rhino-tail { animation: dino-tail-sway var(--dino-rhino-stride) ease-in-out infinite alternate; }
.dino-stage[data-running="false"] .dino-trex-leg,
.dino-stage[data-running="false"] .dino-trex-tail,
.dino-stage[data-running="false"] .dino-trex-arm,
.dino-stage[data-running="false"] .dino-rhino-leg,
.dino-stage[data-running="false"] .dino-rhino-head,
.dino-stage[data-running="false"] .dino-rhino-tail { animation-play-state: paused; }
.dino-stage[data-running="true"] .dino-speed-lines { opacity: .7; }

.dino-stage[data-phase="miss"] .dino-cue strong { border-color: #d0ae89; color: #997a56; }
.dino-stage[data-phase="miss"] .dino-trex-face-roar,
.dino-stage[data-phase="miss"] .dino-rhino-face-look { display: inline; }
.dino-stage[data-phase="miss"] .dino-trex-face-normal { animation: dino-roar-rest 600ms ease-out both; }
.dino-stage[data-phase="miss"] .dino-trex-face-roar { animation: dino-roar-face 600ms ease-out both; }
.dino-stage[data-phase="miss"] .dino-trex-jaw { animation: dino-roar-jaw 600ms ease-out both; }
.dino-stage[data-phase="miss"] .dino-trex-head { animation: dino-soft-roar 600ms ease-out both; }
.dino-stage[data-phase="miss"] .dino-rhino-head { animation: dino-look-back 600ms ease-in-out both; animation-play-state: running; }
.dino-stage[data-phase="miss"] .dino-rhino-face-normal { display: none; }
.dino-stage[data-phase="miss"] .dino-rhino-face-look { animation: dino-rhino-blink 600ms ease-in-out both; }
.dino-stage[data-phase="run"] .dino-rhino-face-normal,
.dino-stage[data-phase="run"] .dino-rhino-mouth-normal,
.dino-stage[data-phase="complete"] .dino-rhino-mouth-normal { display: none; }
.dino-stage[data-phase="run"] .dino-rhino-face-happy { display: inline; }
.dino-stage[data-phase="complete"] .dino-trex-face-normal,
.dino-stage[data-phase="complete"] .dino-rhino-face-normal,
.dino-stage[data-phase="complete"] .dino-trex-label,
.dino-stage[data-phase="complete"] .dino-rhino-label { display: none; }
.dino-stage[data-phase="complete"] .dino-trex-face-cry,
.dino-stage[data-phase="complete"] .dino-rhino-face-happy,
.dino-stage[data-phase="complete"] .dino-cry-bubble { display: inline; }
.dino-stage[data-phase="complete"] .dino-trex-leg,
.dino-stage[data-phase="complete"] .dino-trex-tail,
.dino-stage[data-phase="complete"] .dino-trex-arm { animation: none; }
.dino-stage[data-phase="complete"] .dino-trex-head { animation: dino-sob 850ms ease-in-out 700ms 5; }
.dino-stage[data-phase="complete"] .dino-tear { animation: dino-teardrop 1050ms ease-in 700ms 4 both; }
.dino-stage[data-phase="complete"] .dino-tear-two { animation-delay: 1020ms; }
.dino-stage[data-phase="complete"] .dino-cry-bubble { animation: dino-bubble-appear 350ms ease-out 650ms both; }
.dino-stage[data-phase="complete"] .dino-rhino-escape { animation: dino-forest-escape 1000ms ease-in both; }
.dino-stage[data-phase="complete"] .dino-rhino-peek { animation: dino-forest-peek 550ms ease-out 900ms both; }
.dino-stage[data-phase="complete"] .dino-rhino-peek .dino-rhino-head { animation: none; }
.dino-stage[data-phase="complete"] .dino-finish-sparkles { animation: dino-sparkles 550ms ease-out 1200ms both; }
.dino-stage[data-phase="complete"] .dino-cue strong { border-color: #afbd8d; background: #f7f9e9; }
.dino-finale { position: relative; width: 100%; height: auto; aspect-ratio: 700 / 390; min-height: 245px; border-radius: 16px; }
.dino-finale .dino-cue { top: 14px; left: 50%; width: auto; }
.dino-finale .dino-cue > span { display: none; }
.dino-finale[data-phase="complete"] .dino-cue strong { min-width: 68px; min-height: 36px; padding: 4px 12px; border-radius: 13px; box-shadow: 0 2px 0 #c8b98c40; font-size: 19px; }

@keyframes dino-trex-step { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(11deg); } }
@keyframes dino-rhino-step { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(13deg); } }
@keyframes dino-tail-sway { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes dino-arm-swing { from { transform: rotate(-9deg); } to { transform: rotate(6deg); } }
@keyframes dino-head-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes dino-roar-rest { 0%, 100% { opacity: 1; } 10%, 37% { opacity: 0; } 52% { opacity: 1; } }
@keyframes dino-roar-face { 0%, 52%, 100% { opacity: 0; } 10%, 37% { opacity: 1; } }
@keyframes dino-roar-jaw { 0%, 52%, 100% { transform: rotate(0); } 12%, 35% { transform: rotate(5deg); } }
@keyframes dino-soft-roar { 0%, 100% { transform: rotate(0); } 16%, 32% { transform: translateX(-1px) rotate(-2deg); } 55% { transform: rotate(1deg); } }
@keyframes dino-look-back { 0%, 100% { transform: translate(0, 0) rotate(0); } 22%, 50% { transform: translate(-2px, 1px) rotate(-3deg); } }
@keyframes dino-rhino-blink { 0%, 40%, 66%, 100% { transform: scaleY(1); } 52% { transform: scaleY(.12); } }
@keyframes dino-sob { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg) translateY(1px); } 60% { transform: rotate(2deg); } }
@keyframes dino-teardrop { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 90%, 100% { transform: translateY(26px); opacity: 0; } }
@keyframes dino-bubble-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes dino-forest-escape { 0% { transform: translateX(0); opacity: 1; } 65% { opacity: 1; } 100% { transform: translateX(160px); opacity: 0; } }
@keyframes dino-forest-peek { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes dino-sparkles { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .play-stage.dino { height: 280px; background: #e4f0ec; }
  .dino-stage { background: #e4f0ec; }
  .dino-cue { top: 44px; left: 47%; width: 215px; font-size: 11px; }
  .dino-cue strong { min-width: 54px; min-height: 54px; font-size: 36px; padding: 3px 12px; }
  .dino-cue-detail { font-size: 9px; }
  .play-stage.dino .combo-badge { display: none; }
  .dino-progress-note { bottom: 10px; left: 10px; max-width: calc(100% - 20px); font-size: 9px; padding: 4px 9px; }
  .dino-finale { min-height: 215px; }
  .dino-finale .dino-cue { top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dino-stage *, .dino-stage *::before, .dino-stage *::after { animation: none !important; transition: none !important; }
  .dino-stage[data-phase="complete"] .dino-rhino-escape { opacity: 0; }
  .dino-stage[data-phase="complete"] .dino-rhino-peek,
  .dino-stage[data-phase="complete"] .dino-finish-sparkles,
  .dino-stage[data-phase="complete"] .dino-cry-bubble { opacity: 1; }
  .dino-stage[data-phase="complete"] .dino-tear { opacity: 1; }
  .dino-stage[data-phase="miss"] .dino-trex-face-normal { display: none; }
  .dino-stage[data-phase="miss"] .dino-trex-face-roar { opacity: 1; }
}