/* Movement is explicit for these games; pause freezes the visual layer as well as the game. */
.motion-spark{position:fixed;z-index:100;pointer-events:none;font-style:normal;font-size:22px;will-change:transform,opacity}
body.live-motion svg svg{overflow:hidden}
body.live-motion .cell-art{overflow:hidden}
body.live-motion.motion-paused *,body.live-motion.motion-paused *::before,body.live-motion.motion-paused *::after{animation-play-state:paused!important}
body.live-motion #blob{animation:jelly-breathe 1.4s ease-in-out infinite!important;transform-origin:50% 100%;transition:left .32s ease-out!important}
@keyframes jelly-breathe{0%,100%{scale:1 .96}50%{scale:.96 1.04}}
body.live-motion #face{animation:jelly-fall .6s ease-in-out infinite alternate!important;transform-origin:50% 80%}
@keyframes jelly-fall{from{scale:.95 1.08;rotate:-5deg}to{scale:1.06 .95;rotate:5deg}}
body.live-motion #wheel{transition:transform .22s cubic-bezier(.18,.75,.22,1)!important}
body[data-game=sapo].live-motion #croc{animation:croc-walk .36s ease-in-out infinite alternate!important;transform-box:view-box;transform-origin:center}
@keyframes croc-walk{from{translate:0 0;rotate:-1deg}to{translate:0 -3px;rotate:1deg}}
body[data-game=sapo].live-motion #fly>svg{animation:fly-wings .07s linear infinite alternate!important;transform-box:view-box;transform-origin:center}
@keyframes fly-wings{from{opacity:.8}to{opacity:1}}
body[data-game=aliens].live-motion #fleet>g>svg{animation:ship-bank 1.3s ease-in-out infinite alternate!important;transform-box:view-box;transform-origin:center}
@keyframes ship-bank{from{rotate:-7deg;scale:1 .96}to{rotate:7deg;scale:1 1.04}}
.ship-exhaust{animation:engine-glow .18s linear infinite alternate!important;transform-origin:0 0;transform-box:fill-box}
@keyframes engine-glow{from{opacity:.4;scale:.7 1}to{opacity:.9;scale:1.2 1}}
body.live-motion #car img{animation:engine-vibration .16s linear infinite alternate!important;transform-origin:50% 65%}
@keyframes engine-vibration{to{translate:0 -1px}}
body.live-motion .star{animation:coin-spin 1.8s linear infinite!important;transform-style:preserve-3d}
@keyframes coin-spin{to{rotate:y 360deg}}
body[data-game=enduro].live-motion #game{background-repeat:repeat-y;background-size:100% auto;animation:road-travel 7s linear infinite!important}
@keyframes road-travel{from{background-position:center 0}to{background-position:center 900px}}
body.live-motion .balloon{animation:balloon-sway 3s ease-in-out infinite alternate!important;transform-origin:50% 30%}
@keyframes balloon-sway{from{rotate:-3deg}to{rotate:3deg}}
body[data-game=pandemia].live-motion .virus{animation:virus-drift 3s ease-in-out infinite alternate!important;pointer-events:none}
body[data-game=pandemia].live-motion .virus:nth-child(3n){animation-delay:-1.2s!important;animation-duration:4s!important}
@keyframes virus-drift{from{translate:-4px -3px;rotate:-12deg}to{translate:5px 5px;rotate:15deg}}
body[data-game=pandemia].live-motion .cell-art,body[data-game=simon].live-motion .cell-art{animation:cell-breathe 1.7s ease-in-out infinite alternate!important;transform-origin:50% 65%}
@keyframes cell-breathe{from{scale:.96 1.03}to{scale:1.03 .95}}
body.live-motion .pad.lit{animation:pad-hit .35s ease-out!important;box-shadow:inset 0 0 18px #fff,0 0 24px #ffe48e!important}
@keyframes pad-hit{0%{scale:1;rotate:x 0deg}40%{scale:.91;rotate:x 12deg}100%{scale:1;rotate:x 0deg}}
body.live-motion .device{perspective:700px}
body.live-motion .cell.active{animation:beat-tap .2s ease-out!important;box-shadow:0 0 18px #ffc85b88}
body.live-motion #feet span.active{animation:foot-tap .22s ease-out!important;transform-origin:center bottom}
@keyframes beat-tap{from{scale:.95;rotate:x 8deg}to{scale:1;rotate:x 0deg}}
@keyframes foot-tap{from{rotate:-12deg;translate:0 -7px}to{rotate:0deg;translate:0 0}}
body.live-motion.motion-listening #listen{background-image:linear-gradient(100deg,#fff0 30%,#ffffff90 50%,#fff0 70%);background-size:250% 100%;animation:listen-wave .7s linear infinite!important}
@keyframes listen-wave{from{background-position:180% 0}to{background-position:-80% 0}}
body.live-motion #options button:active,body.live-motion .keys button:active{transform:perspective(600px) rotateX(14deg) translateY(3px)!important}
body.live-motion #slots img{transition:filter .2s,scale .2s!important}
body.live-motion #slots img:hover{scale:1.05}
body.live-motion #choices label{transition:background .2s,box-shadow .2s!important}
body.live-motion #choices label:has(input:checked){box-shadow:0 4px 0 #b99143;animation:beat-tap .25s ease-out!important}
body.live-motion .note{transition:box-shadow .15s!important}
body.live-motion .note:active{box-shadow:inset 0 3px 10px #0006!important;scale:.95}
/* Original cooperative games: animate the actual playing state. */
body.live-motion .team.active .art,body.live-motion .instrument.correct .art,body.live-motion .machine.active{animation:instrument-play .45s ease-in-out infinite alternate!important;transform-origin:center bottom}
@keyframes instrument-play{from{rotate:-3deg;scale:1}to{rotate:3deg;scale:1.05}}
body.live-motion .freeze-stage:not(.frozen) svg{animation:stage-dance .6s ease-in-out infinite alternate!important;transform-origin:50% 90%}
@keyframes stage-dance{from{rotate:-2deg;translate:0 0}to{rotate:2deg;translate:0 -5px}}
body.live-motion .freeze-stage.frozen *{animation-play-state:paused!important}
body.live-motion .mission-step{animation:mission-entry .35s ease-out!important}
@keyframes mission-entry{from{opacity:.2;translate:20px 0}to{opacity:1;translate:0}}
@media print{.motion-spark{display:none!important}body.live-motion *{animation:none!important}}
body.live-motion .memory-grid{perspective:1000px}body.live-motion .memory-card.open{animation:memory-reveal .38s ease-out!important}body.live-motion .memory-card.matched{animation:memory-match .55s ease-out!important}
@keyframes memory-reveal{from{rotate:y 85deg;scale:.92}to{rotate:y 0deg;scale:1}}
@keyframes memory-match{0%{scale:.95}50%{scale:1.08;box-shadow:0 0 22px #65c6a6}100%{scale:1}}
body.live-motion .factory.playing .gear{animation:factory-gear 4s linear infinite!important}body.live-motion .machine.lit{animation:instrument-play .25s ease-in-out infinite alternate!important}
@keyframes factory-gear{to{rotate:360deg}}
body.live-motion .mission-art .art{animation:instrument-play 2s ease-in-out infinite alternate!important;transform-origin:center}

.rhythm-motion{height:65px;margin:8px auto;display:flex;justify-content:center;pointer-events:none}.rhythm-motion svg{width:146px;height:65px}.drum-stick{transform-origin:35px 5px}.drum-stick.second{transform-origin:145px 4px}
body.live-motion.motion-listening .drum-stick{animation:drum-strike var(--beat-duration,.8s) ease-in infinite!important}body.live-motion.motion-listening .drum-stick.second{animation-delay:calc(var(--beat-duration,.8s) / 2)!important;animation-direction:reverse!important}body.live-motion.motion-listening .drum-skin{animation:skin-strike var(--beat-duration,.8s) ease-out infinite!important;transform-origin:90px 30px}
@keyframes drum-strike{0%,100%{rotate:0deg}45%{rotate:-22deg}80%{rotate:3deg}}@keyframes skin-strike{0%{scale:1 .85}25%,100%{scale:1}}

body[data-game=enduro].live-motion #game{background-size:100% 900px}
/* Pause wins even over ID-specific animation shorthands. */
body.live-motion.motion-paused *:not(#motion-pause-specificity){animation-play-state:paused!important}