.fx-deal,.fx-flip,.fx-next,.fx-wait,.fx-reveal,.fx-win,.fx-loss,.fx-lock{backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.fx-deal,.fx-next,.fx-reveal{will-change:transform,opacity}

/* 发牌：纸卡从下方轻轻弹起，略带歪斜后摆正 */
.fx-deal{transform-origin:50% 100%;animation:fx-deal 420ms cubic-bezier(.2,.9,.3,1.25) both}
@keyframes fx-deal{0%{opacity:0;transform:translate3d(0,14px,0) rotate(-2.5deg) scale(.94)}60%{opacity:1;transform:translate3d(0,-3px,0) rotate(.6deg) scale(1.01)}100%{opacity:1;transform:none}}

/* 翻牌：像纸片翻面，中途换边，不出现镜像文字 */
.fx-flip{transform-origin:50% 50%;animation:fx-flip 380ms cubic-bezier(.45,.05,.35,1) both}
@keyframes fx-flip{0%{transform:perspective(700px) rotateY(0)}48%{transform:perspective(700px) rotateY(86deg) scale(.98)}52%{transform:perspective(700px) rotateY(-86deg) scale(.98)}100%{transform:perspective(700px) rotateY(0)}}

/* 下一步：从右侧轻轻滑入，带一点纸张倾斜 */
.fx-next{transform-origin:0 100%;animation:fx-next 320ms cubic-bezier(.25,.8,.3,1) both}
@keyframes fx-next{0%{opacity:0;transform:translate3d(18px,0,0) rotate(1.5deg)}70%{opacity:1;transform:translate3d(-2px,0,0) rotate(-.3deg)}100%{opacity:1;transform:none}}

/* 等待：小狗探头，左右歪歪脑袋，循环很慢 */
.fx-wait{transform-origin:50% 100%;animation:fx-wait 2.4s ease-in-out infinite}
@keyframes fx-wait{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(0,-4px,0) rotate(-2deg)}55%{transform:translate3d(0,-4px,0) rotate(1.5deg)}75%{transform:translate3d(0,-1px,0) rotate(0)}}

/* 揭晓：从小到大轻轻冒出来 */
.fx-reveal{transform-origin:50% 60%;animation:fx-reveal 480ms cubic-bezier(.2,.85,.3,1.2) both}
@keyframes fx-reveal{0%{opacity:0;transform:scale(.9) rotate(-1deg)}55%{opacity:1;transform:scale(1.035) rotate(.4deg)}100%{opacity:1;transform:none}}

/* 胜利：蓄力压扁、轻跳、落地再小弹一下 */
.fx-win{transform-origin:50% 100%;animation:fx-win 500ms cubic-bezier(.3,.7,.4,1) both}
@keyframes fx-win{0%{transform:none}18%{transform:translate3d(0,1px,0) scale(1.03,.96)}45%{transform:translate3d(0,-12px,0) scale(.98,1.03) rotate(-1.5deg)}70%{transform:translate3d(0,0,0) scale(1.02,.98)}85%{transform:translate3d(0,-3px,0) rotate(.5deg)}100%{transform:none}}

/* 失利：可爱地低头歪一下，再慢慢抬起来 */
.fx-loss{transform-origin:30% 100%;animation:fx-loss 500ms ease-in-out both}
@keyframes fx-loss{0%{transform:none}35%{transform:translate3d(0,4px,0) rotate(-4deg)}60%{transform:translate3d(0,4px,0) rotate(-3deg)}80%{transform:translate3d(0,2px,0) rotate(-1deg)}100%{transform:none}}

/* 锁定：像按下一枚印章，轻压后回弹 */
.fx-lock{transform-origin:50% 50%;animation:fx-lock 220ms cubic-bezier(.3,.6,.4,1.4) both}
@keyframes fx-lock{0%{transform:none}40%{transform:scale(.95)}75%{transform:scale(1.025)}100%{transform:none}}

@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx-deal,.fx-next,.fx-reveal{animation:fx-fade 160ms ease-out both;will-change:opacity}.fx-flip,.fx-wait,.fx-win,.fx-loss,.fx-lock{animation:none;will-change:auto}}