.motion-sprite{background-image:var(--motion-url)!important;background-size:800% 500%;background-position-y:calc(var(--motion-row)*25%);background-position-x:var(--motion-start);animation:mageFrames var(--motion-duration,1.2s) steps(4,end) infinite;image-rendering:pixelated}
.unit-figure[data-motion='move']{animation:tileStep .44s cubic-bezier(.3,.7,.4,1) both;z-index:20}
.cell:has(.unit-figure[data-motion='move']),.cell:has(.effect-layer){z-index:8}
.defeat-ghost{position:absolute;inset:0;pointer-events:none;animation:defeatFade .65s steps(4,end) forwards}
@keyframes defeatFade{0%,55%{opacity:1}100%{opacity:0}}
.effect-layer{position:absolute;width:220%;height:220%;left:-60%;bottom:-15%;pointer-events:none;z-index:40;image-rendering:pixelated;transform:rotateX(calc(-1 * var(--camera-tilt,0deg)));transform-origin:50% 88%}
@keyframes mageFrames{from{background-position-x:var(--motion-start)}to{background-position-x:var(--motion-end)}}
@keyframes tileStep{from{transform:translate(calc(var(--move-dx)*100%),calc(var(--move-dy)*100%)) rotateX(calc(-1 * var(--camera-tilt,0deg)))}45%{transform:translate(calc(var(--move-dx)*45%),calc(var(--move-dy)*45% - 13%)) rotateX(calc(-1 * var(--camera-tilt,0deg)))}to{transform:translate(0,0) rotateX(calc(-1 * var(--camera-tilt,0deg)))}}
@media(prefers-reduced-motion:reduce){.unit-figure .motion-sprite{animation:none!important;background-position-x:var(--motion-start)}.unit-figure[data-motion='move']{animation:none!important}.effect-layer{display:none}}