/* Reserved, normal-flow speech for the three remaining cards only. */
.training-card[data-scene-thought] .card-art-mascot{flex-direction:column;gap:8px;align-self:start}
.training-card[data-scene-thought] .mascot-text-slot{display:none}
.training-card[data-scene-thought] .sport-mascot{flex:none}
.training-card[data-scene-thought] .scene-note{width:100%;max-width:390px;flex:none;margin:0;user-select:text;visibility:hidden}
.training-card[data-scene-thought].scene-speaking .scene-note{visibility:visible}
.training-card[data-scene-thought] .scene-bubble{position:relative;border:1px solid #bddcff38;border-radius:17px;padding:15px 18px;background:#c6def20d;box-shadow:inset 0 1px 0 #eef7ff18;color:#edf0f5;font-size:18px;font-weight:400;line-height:1.45;letter-spacing:-.2px;text-align:left;opacity:0;transition:opacity .35s ease}
.training-card[data-scene-thought] .scene-bubble::before{content:'';position:absolute;top:-7px;left:calc(50% - 7px);width:12px;height:12px;background:#2a3b50;border-left:1px solid #bddcff38;border-top:1px solid #bddcff38;transform:rotate(45deg)}
.training-card[data-scene-thought].scene-speaking .scene-bubble{opacity:1}
.training-card[data-scene-thought] .scene-context{font-size:14px;line-height:1.6;color:#b8c8da;text-align:left;margin:12px 2px 0;opacity:0;transition:opacity .4s ease}
.training-card[data-scene-thought].scene-explained .scene-context{opacity:1}
@media(min-width:901px){.training-list .training-card[data-scene-thought]{top:min(var(--desktop-card-top,35px),calc(100svh - var(--scene-card-height,650px) - 24px))}}
@media(max-width:600px){.training-card[data-scene-thought] .card-art-mascot{gap:4px}.training-card[data-scene-thought] .scene-bubble{font-size:17px;padding:14px 16px}.training-card[data-scene-thought] .scene-context{font-size:14px}}
@media(prefers-reduced-motion:reduce){.training-card[data-scene-thought] .scene-bubble,.training-card[data-scene-thought] .scene-context{transition:none}}
.paused .training-card[data-scene-thought] .scene-bubble,.paused .training-card[data-scene-thought] .scene-context{transition:none}

/* Broad, legible silhouettes and reactions; only the bounded action animates. */
[data-scene-thought] .mascot-whole{transform-box:view-box;transform-origin:228px 405px}
[data-scene-thought] .mascot-face{transform-box:view-box;transform-origin:228px 210px}
[data-scene-thought="movement"][data-scene-phase="running"] .mascot-whole{animation:scene-balance 4.8s both}
[data-scene-thought="movement"][data-scene-phase="running"] .mascot-face{animation:scene-relief 4.8s both}
@keyframes scene-balance{0%,12%{transform:none}19%{transform:translateY(-8px) scale(1.03,1.02)}28%{transform:translate(13px,0) rotate(14deg)}34%{transform:translate(26px,-5px) rotate(22deg);animation-timing-function:cubic-bezier(.15,.9,.25,1)}43%{transform:translate(-14px,0) rotate(-13deg)}50%{transform:translate(5px,0) rotate(5deg)}57%{transform:none}65%{transform:translateY(7px) scale(1.05,.94)}73%,100%{transform:none}}
@keyframes scene-relief{0%,49%{transform:none}57%{transform:translateY(-10px) rotate(-9deg)}65%{transform:translateY(7px) rotate(5deg)}74%,100%{transform:none}}
[data-scene-thought="progress"][data-scene-phase="running"] .mascot-whole{animation:scene-startle 4.8s both}
[data-scene-thought="progress"][data-scene-phase="running"] .mascot-face{animation:scene-look-up 4.8s both}
@keyframes scene-startle{0%,18%{transform:none}23%{transform:translateY(-24px) scale(.97,1.05)}29%{transform:translateY(5px) scale(1.04,.96)}36%,100%{transform:none}}
@keyframes scene-look-up{0%,15%{transform:none}20%{transform:rotate(-5deg)}29%,60%{transform:translateY(-11px) rotate(-9deg)}72%{transform:rotate(9deg)}81%,100%{transform:none}}
[data-scene-thought] .scene-confetti-points{position:absolute;inset:11% 0 auto;height:0;pointer-events:none;visibility:hidden;z-index:3}
[data-scene-thought] .scene-confetti-points i{position:absolute;width:7px;height:12px;background:#bddcff;left:50%;opacity:0;border-radius:1px}
[data-scene-thought] .scene-confetti-points i:nth-child(3n+2){background:#edb298;width:9px;height:7px}
[data-scene-thought] .scene-confetti-points i:nth-child(3n){background:#edf0f5;width:6px;height:9px;border-radius:50%}
[data-scene-thought].scene-confetti .scene-confetti-points{visibility:visible}
[data-scene-thought].scene-confetti .scene-confetti-points i{animation:scene-confetti-shower 2.35s cubic-bezier(.12,.42,.6,1) var(--delay) both}
@keyframes scene-confetti-shower{0%{opacity:0;transform:translate(0,0) rotate(0)}9%{opacity:1}23%{opacity:1;transform:translate(calc(var(--x)*1.8),-22px) rotate(calc(var(--spin)*.25))}78%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x)*2.1),var(--fall)) rotate(var(--spin))}}
[data-scene-thought] .scene-plan{position:absolute;top:44%;left:44%;width:26%;aspect-ratio:.76;border-radius:5px;background:#dce8f0;border:2px solid #edf0f5;padding:8% 3%;display:flex;flex-direction:column;justify-content:center;gap:16%;opacity:0;pointer-events:none;z-index:2;box-shadow:3px 5px 0 #13233338;transform:translateY(14px) rotate(-7deg)}
[data-scene-thought] .scene-plan i{height:3px;width:90%;background:#526b81;display:block;flex:none}
[data-scene-thought] .scene-plan i:last-child{width:65%}
[data-scene-thought="individual"][data-scene-phase="running"] .scene-plan{animation:scene-paper-push 4.8s both}
[data-scene-thought="individual"][data-scene-phase="running"] .mascot-face{animation:scene-head-no 4.8s both}
[data-scene-thought="individual"][data-scene-phase="running"] .mascot-whole{animation:scene-confident 4.8s both}
[data-scene-thought="individual"][data-scene-phase="done"] .scene-plan{opacity:1;transform:translate(90%,5px) rotate(18deg) scale(.88)}
@keyframes scene-paper-push{0%{opacity:0;transform:translateY(14px) rotate(-7deg)}10%,43%{opacity:1;transform:translateY(0) rotate(-7deg)}59%,100%{opacity:1;transform:translate(90%,5px) rotate(18deg) scale(.88)}}
@keyframes scene-head-no{0%{transform:none}14%,22%{transform:rotate(-12deg)}28%{transform:translateX(-12px) rotate(-10deg)}33%{transform:translateX(13px) rotate(10deg)}38%{transform:translateX(-10px) rotate(-8deg)}43%{transform:translateX(8px) rotate(6deg)}48%,63%{transform:none}72%,81%{transform:translateY(-6px) rotate(-6deg)}90%,100%{transform:none}}
@keyframes scene-confident{0%,43%{transform:none}54%{transform:translateX(7px) rotate(3deg)}64%{transform:none}73%,81%{transform:translateY(-6px) scale(1.04,1.02)}91%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){[data-scene-thought] .scene-confetti-points{display:none}[data-scene-thought] .mascot-whole,[data-scene-thought] .mascot-face,[data-scene-thought] .scene-plan{animation:none!important}}
.paused [data-scene-thought] .scene-confetti-points{display:none}
.paused [data-scene-thought] .mascot-whole,.paused [data-scene-thought] .mascot-face,.paused [data-scene-thought] .scene-plan{animation:none!important}
