/* Short, stepped RPG feedback. Controls and their text remain available from
   the first frame; motion never owns layout, focus, or gameplay timing. */
body.game-mode #app{--motion-scale:1}
body.game-mode .motion-frame-enter{animation:fk-frame-enter 160ms steps(4,end)}
body.game-mode .motion-command-enter{animation:fk-command-enter 150ms steps(3,end)}
body.game-mode .motion-portrait-enter{transform-origin:50% 85%;animation:fk-portrait-enter 340ms steps(8,end)}
body.game-mode .starter-screen .starter-art .motion-portrait-enter{animation:fk-portrait-enter 340ms steps(8,end)}
body.game-mode .motion-emblem-enter{animation:fk-emblem-enter 340ms steps(7,end)}
body.game-mode .motion-reward-enter> :nth-child(1){animation:fk-reward-enter 220ms steps(5,end)}
body.game-mode .motion-reward-enter> :nth-child(2){animation:fk-reward-enter 280ms steps(6,end)}
body.game-mode .motion-reward-enter> :nth-child(n+3){animation:fk-reward-enter 340ms steps(7,end)}
body.game-mode .motion-reward-refresh .run-reward-icon,body.game-mode .motion-reward-refresh .run-reward--recovery .loot-pointer{transform-origin:50% 75%;animation:fk-reward-refresh 280ms steps(6,end)}
body.game-mode .motion-status-enter{animation:fk-status-enter calc(260ms * var(--motion-scale)) steps(5,end)}
body.game-mode .motion-level-enter .level{animation:fk-level-enter calc(540ms * var(--motion-scale)) steps(8,end)}
body.game-mode .motion-xp-gain{animation:fk-xp-gain calc(420ms * var(--motion-scale)) linear}
body.game-mode .motion-xp-roll{animation:fk-xp-roll calc(620ms * var(--motion-scale)) linear}
body.game-mode .motion-hp-meter{animation:fk-xp-gain calc(300ms * var(--motion-scale)) linear}
body.game-mode .motion-level-label{animation:fk-level-enter calc(540ms * var(--motion-scale)) steps(8,end)}
body.game-mode .hp-changing .health-track>i{animation-duration:calc(300ms * var(--motion-scale))}
body.game-mode .health-track .hp-loss{animation-duration:calc(480ms * var(--motion-scale))}
body.game-mode .hp-change{animation-duration:calc(600ms * var(--motion-scale))}
/* Evolution keeps the result legible throughout, replacing the old white flash.
   The ring stays behind the existing sprite and cannot receive input. */
body.game-mode .evolution-glow .sprite{position:relative;z-index:1;animation:none}
body.game-mode .motion-evolution-enter{isolation:isolate}
body.game-mode .motion-evolution-enter .sprite{animation:fk-evolution-settle 800ms steps(12,end)}
body.game-mode .motion-growth-enter{animation:fk-evolution-settle 700ms steps(12,end)}
body.game-mode .motion-reward-enter>:focus-visible{animation:none}
/* Two pixel layers converge, release, and retire behind the new form. The
   authoritative result, nickname and close button stay visible throughout. */
body.game-mode .motion-evolution-enter:before,body.game-mode .motion-evolution-enter:after{content:"";position:absolute;pointer-events:none;z-index:0;inset:4%;opacity:0}
body.game-mode .motion-evolution-enter:before{background:linear-gradient(#f3d488,#f3d488) 50% 0/5px 5px no-repeat,linear-gradient(#b8efe0,#b8efe0) 100% 25%/4px 4px no-repeat,linear-gradient(#f3d488,#f3d488) 100% 75%/5px 5px no-repeat,linear-gradient(#b8efe0,#b8efe0) 50% 100%/4px 4px no-repeat,linear-gradient(#f3d488,#f3d488) 0 75%/5px 5px no-repeat,linear-gradient(#b8efe0,#b8efe0) 0 25%/4px 4px no-repeat;animation:fk-evolution-motes 880ms steps(12,end)}
body.game-mode .motion-evolution-enter:after{inset:16%;border:3px double #f3d488;clip-path:polygon(12% 0,88% 0,88% 12%,100% 12%,100% 88%,88% 88%,88% 100%,12% 100%,12% 88%,0 88%,0 12%,12% 12%);animation:fk-evolution-ring 840ms steps(12,end)}
@keyframes fk-frame-enter{0%{box-shadow:inset 0 -3px #f3d488}100%{box-shadow:inset 0 0 #f3d48800}}
@keyframes fk-command-enter{0%{outline:2px solid #f3d488;outline-offset:-4px}100%{outline:2px solid #f3d48800;outline-offset:-4px}}
@keyframes fk-portrait-enter{0%{transform:none}20%{transform:translateY(2px) scale(var(--portrait-squash,1.025),var(--portrait-stretch,.975))}52%{transform:translate(var(--portrait-step,0px),var(--portrait-lift,-3px)) rotate(var(--portrait-lean,0deg))}78%{transform:translateY(1px) scale(1.015,.985)}100%{transform:none}}
@keyframes fk-emblem-enter{0%{transform:translateY(4px) scale(.94)}65%{transform:translateY(-2px) scale(1.02)}100%{transform:none}}
@keyframes fk-reward-enter{0%{outline:1px solid #f3d488;outline-offset:-3px}100%{outline:1px solid #f3d48800;outline-offset:-3px}}
@keyframes fk-reward-refresh{0%{transform:none}35%{transform:translateY(-3px) scale(1.08)}70%{transform:translateY(1px) scale(.98)}100%{transform:none}}
@keyframes fk-status-enter{0%{outline:2px solid currentColor;outline-offset:2px}100%{outline:2px solid transparent;outline-offset:2px}}
@keyframes fk-level-enter{0%,65%{color:#f5d68b;text-shadow:1px 1px #25283c}100%{text-shadow:none}}
@keyframes fk-xp-gain{from{width:var(--motion-xp-before)}to{width:var(--motion-xp-after)}}
@keyframes fk-xp-roll{0%{width:var(--motion-xp-before)}50%{width:100%}51%{width:0}100%{width:var(--motion-xp-after)}}
@keyframes fk-evolution-settle{0%{transform:scale(.96)}30%{transform:scale(.94)}58%{transform:translateY(-2px) scale(1.04)}80%{transform:translateY(1px) scale(.99)}100%{transform:none}}
@keyframes fk-evolution-ring{0%{transform:scale(1.25);opacity:0}18%{opacity:.5}42%{transform:scale(.72);opacity:.65}68%{transform:scale(1.15);opacity:.55}100%{transform:scale(1.45);opacity:0}}
@keyframes fk-evolution-motes{0%{transform:scale(1.05) rotate(-12deg);opacity:0}16%{opacity:.85}40%{transform:scale(.6) rotate(0deg);opacity:.9}65%{transform:scale(1.04) rotate(12deg);opacity:.75}100%{transform:scale(1.18) rotate(20deg);opacity:0}}
/* Paid expedition recovery marks only the resource that actually improved.
   Authoritative HP/PP and controls stay readable from the first frame. The
   three mint pixels rise within the portrait well and retire as one group. */
body.game-mode .motion-care-recover{position:relative;isolation:isolate}
body.game-mode .motion-care-recover>div>span{animation:fk-care-vitals 620ms steps(9,end)}
body.game-mode .motion-care-recover>.sprite{animation:fk-care-settle 520ms steps(8,end)}
body.game-mode .motion-care-recover:after{content:"";position:absolute;pointer-events:none;left:8px;top:8px;width:44px;height:44px;z-index:1;opacity:0;background:linear-gradient(#a9efd0,#a9efd0) 5px 32px/3px 6px no-repeat,linear-gradient(#d7ffdf,#d7ffdf) 19px 23px/3px 6px no-repeat,linear-gradient(#a9efd0,#a9efd0) 34px 30px/3px 6px no-repeat;animation:fk-care-motes 580ms steps(9,end)}
body.game-mode .motion-care-pp>span{animation:fk-care-pp 560ms steps(8,end)}
@keyframes fk-care-vitals{0%,50%{color:#b6f5d1;text-shadow:0 1px #173a33}100%{text-shadow:none}}
@keyframes fk-care-settle{0%{transform:scale(.98)}38%{transform:translateY(-2px) scale(1.025)}70%{transform:translateY(-1px)}100%{transform:none}}
@keyframes fk-care-motes{0%{transform:translateY(3px);opacity:0}18%{opacity:1}68%{opacity:.9}100%{transform:translateY(-12px);opacity:0}}
@keyframes fk-care-pp{0%,50%{color:#b6f5d1;box-shadow:inset 0 -2px #a9efd0}100%{box-shadow:inset 0 -2px #a9efd000}}
/* Saved preference and the live OS preference both take precedence, including
   when a player changes the preference while a presentation is in progress. */
.reduced-motion #app *,.reduced-motion #app *:before,.reduced-motion #app *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){#app [class*="motion-"],#app [class*="motion-"]:before,#app [class*="motion-"]:after{animation:none!important;transition:none!important}}