/* Finite character performances. Image and effects stay above the number strip. */
.tile[data-action]>img,.performer[data-action]>img{transform-origin:50% 82%;animation-duration:2.2s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:1}
.action-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.tile>.action-fx{left:4%;top:3%;width:92%;height:73%;overflow:hidden}
.action-fx>g{opacity:0;transform-box:view-box;transform-origin:50% 50%;animation:fx-appear 2.2s ease-in-out both}
.tile[data-action]>.number{z-index:4}
[data-action="wave"]>img{animation-name:act-wave!important}
[data-action="doze"]>img{animation-name:act-doze!important}
[data-action="cool"]>img{animation-name:act-cool!important}
[data-action="sob"]>img{animation-name:act-sob!important}
[data-action="huff"]>img{animation-name:act-huff!important}
[data-action="puzzle"]>img{animation-name:act-puzzle!important}
[data-action="bloom"]>img{animation-name:act-bloom!important}
[data-action="fan"]>img{animation-name:act-fan!important}
[data-action="curtsy"]>img{animation-name:act-curtsy!important}
[data-action="orbit"]>img{animation-name:act-orbit!important}
.action-fx .fx-paw{transform-origin:68% 65%;animation-name:fx-wave}
.action-fx .fx-sleep{animation-name:fx-sleep}
.action-fx .fx-glint{animation-name:fx-glint}
.action-fx .fx-tears{animation-name:fx-tears}
.action-fx .fx-steam{animation-name:fx-steam}
.action-fx .fx-question{animation-name:fx-question}
.action-fx .fx-heart{animation-name:fx-heart}
.action-fx .fx-fan{transform-origin:67% 76%;animation-name:fx-fan}
.action-fx .fx-petals{animation-name:fx-petals}
.action-fx .fx-orbit{animation-name:fx-orbit}
@keyframes act-wave{0%,100%{transform:none}20%{transform:translateY(-4%) scale(1.04)}35%,65%{transform:rotate(-4deg)}50%,80%{transform:rotate(4deg)}}
@keyframes act-doze{0%,100%{transform:none}22%,65%{transform:translateY(4%) rotate(4deg) scale(.98)}43%,82%{transform:translateY(1%) rotate(2deg)}}
@keyframes act-cool{0%,100%{transform:none}25%,55%{transform:rotate(-8deg) translateX(-3%)}70%{transform:rotate(3deg) translateY(-2%)}}
@keyframes act-sob{0%,100%{transform:none}18%,34%,50%,66%{transform:translateX(-2%) rotate(-2deg) scaleY(.97)}26%,42%,58%,74%{transform:translateX(2%) rotate(2deg)}}
@keyframes act-huff{0%,100%{transform:none}20%,60%{transform:rotate(-7deg) translateX(-4%)}40%,78%{transform:rotate(7deg) translateX(4%)}}
@keyframes act-puzzle{0%,100%{transform:none}25%,40%{transform:rotate(10deg) translateX(3%)}65%,78%{transform:rotate(-9deg) translateX(-3%)}}
@keyframes act-bloom{0%,100%{transform:none}30%,60%{transform:translateY(-3%) scale(1.035)}80%{transform:translateY(1%) scale(.99)}}
@keyframes act-fan{0%,100%{transform:none}25%,60%{transform:rotate(-4deg)}43%,78%{transform:rotate(3deg) translateY(-2%)}}
@keyframes act-curtsy{0%,100%{transform:none}25%{transform:translateY(-2%)}46%,62%{transform:translateY(7%) scaleY(.94) rotate(4deg)}82%{transform:translateY(-1%)}}
@keyframes act-orbit{0%,100%{transform:none}25%{transform:translateY(-7%) rotate(-3deg)}60%{transform:translateY(-5%) rotate(3deg)}82%{transform:translateY(-2%)}}
@keyframes fx-appear{0%,100%{opacity:0}20%,75%{opacity:1}}
@keyframes fx-wave{0%,100%{opacity:0;transform:rotate(-10deg)}20%,50%,80%{opacity:1;transform:rotate(15deg)}35%,65%{opacity:1;transform:rotate(-15deg)}}
@keyframes fx-sleep{0%{opacity:0;transform:translateY(8%)}30%,55%{opacity:1}100%{opacity:0;transform:translateY(-12%)}}
@keyframes fx-glint{0%,15%,100%{opacity:0;transform:translateX(-12%) scale(.6)}35%,55%{opacity:1;transform:translateX(0) scale(1)}75%{opacity:0;transform:translateX(12%) scale(.8)}}
@keyframes fx-tears{0%,15%{opacity:0;transform:translateY(-4%)}30%,60%{opacity:1}85%,100%{opacity:0;transform:translateY(20%)}}
@keyframes fx-steam{0%{opacity:0;transform:scale(.5)}30%,55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15) translateY(-8%)}}
@keyframes fx-question{0%,100%{opacity:0;transform:rotate(-12deg) scale(.8)}25%,75%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes fx-heart{0%{opacity:0;transform:translateY(8%) scale(.7)}35%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10%) scale(1.1)}}
@keyframes fx-fan{0%,100%{opacity:0;transform:scaleX(.2) rotate(-20deg)}25%,60%{opacity:1;transform:scaleX(1) rotate(10deg)}43%,78%{opacity:1;transform:scaleX(.85) rotate(-8deg)}}
@keyframes fx-petals{0%{opacity:0;transform:translateY(-10%) rotate(-8deg)}30%,60%{opacity:1}100%{opacity:0;transform:translateY(15%) rotate(16deg)}}
@keyframes fx-orbit{0%{opacity:0;transform:rotate(-45deg) scale(.8)}25%,75%{opacity:1}100%{opacity:0;transform:rotate(315deg) scale(1.05)}}
.action-picker{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
.action-picker select{flex:1;min-width:0;max-width:100%;min-height:44px;border:1px solid #d3b9ce;border-radius:9px;background:#fffaf7;color:var(--ink);padding:5px;font:12px var(--font)}
.collection-cell>button{width:100%;min-height:44px;margin-top:5px;padding:4px;border:1px solid #d3b9ce;border-radius:7px;background:#fff5fa;font-size:10px}
.action-card{margin-bottom:8px}.action-card>div{min-width:0}.action-card button{min-height:44px}.action-card .action-description{font-size:11px;line-height:1.7}
.action-replay{height:auto;width:100%;min-height:185px;margin:8px auto 16px;text-align:center;border-radius:12px;background:radial-gradient(ellipse,#f6e4f0,#fff9f3);padding:12px}
.action-replay .performer{margin:auto}.action-replay p{font-size:11px;color:var(--muted);margin-top:8px}
@media(prefers-reduced-motion:reduce){.tile[data-action]>img,.performer[data-action]>img,.action-fx>g{animation:none!important;transform:none!important}.action-fx>g{opacity:1}.tile[data-action]{outline:1px solid #bd91ae}}