/* Rumbaroo action-tile art: accents, idle motion, play burst. Reduced motion = still art. */
.tile.k-hop{--acc:#c8742a}.tile.k-boomerang{--acc:#b5562b}.tile.k-pouch{--acc:#c99a4e}.tile.k-dingo{--acc:#d9873a}.tile.k-billabong{--acc:#2a9db0}
.tile.k-mob{--acc:#9c7a1e}.tile.k-outback{--acc:#e07b2a}.tile.k-dust{--acc:#b8925a}.tile.k-croc{--acc:#5f8f3e}.tile.k-didge{--acc:#8b4a2b}
.tile.action .art{display:block;width:calc(var(--tw)*.74);height:calc(var(--tw)*.74);position:relative;overflow:visible}
.tile.action .sub{margin-top:calc(var(--th)*.02)}
/* subtle accent: an inner ring in the tile's accent + a tiny corner pip in the game color */
.tile.action::before{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 1px 2px rgba(120,96,40,.25),0 1px 0 rgba(255,255,255,.9)}
.tile.action::after{content:"";position:absolute;top:calc(var(--th)*.1);right:calc(var(--th)*.1);width:calc(var(--th)*.075);height:calc(var(--th)*.075);border-radius:50%;background:currentColor;opacity:.85}
.tile.action.k-billabong::after{background:conic-gradient(var(--t-red) 0 25%,var(--t-yellow) 0 50%,var(--t-green) 0 75%,var(--t-blue) 0)}

/* ---- idle motion: short, slow, staggered; mostly still ---- */
.art *{transform-box:fill-box}
.art-hop .a-roo{transform-origin:50% 100%;animation:a-hop 3.6s ease-in-out infinite}
.art-hop .a-shadow{transform-origin:50% 50%;animation:a-hop-sh 3.6s ease-in-out infinite}
@keyframes a-hop{0%,62%,100%{transform:translateY(0)}70%{transform:translateY(1.5px) scaleY(.94)}80%{transform:translateY(-5px) rotate(-6deg)}90%{transform:translateY(0) scaleY(.97)}}
@keyframes a-hop-sh{0%,62%,100%{transform:scaleX(1);opacity:.18}80%{transform:scaleX(.6);opacity:.08}}
.art-boomerang .a-boom{transform-origin:50% 50%;animation:a-spin 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes a-spin{0%,70%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.art-pouch .a-peek{animation:a-peek 4.4s ease-in-out infinite}
@keyframes a-peek{0%,60%,100%{transform:translateY(0)}72%,84%{transform:translateY(-3px) rotate(-3deg)}}
.art-dingo .a-ear-l{transform-origin:80% 100%;animation:a-ear 4.8s ease-in-out infinite}
.art-dingo .a-ear-r{transform-origin:20% 100%;animation:a-ear 4.8s ease-in-out infinite reverse}
.art-dingo .a-eyes{transform-origin:50% 50%;animation:a-blink 4.8s infinite}
@keyframes a-ear{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-12deg)}92%{transform:rotate(4deg)}}
@keyframes a-blink{0%,46%,52%,100%{transform:scaleY(1)}49%{transform:scaleY(.1)}}
.art-billabong .a-ring{transform-origin:50% 50%;animation:a-ripple 3.2s ease-out infinite}
.art-billabong .a-r2{animation-delay:.25s}.art-billabong .a-r3{animation-delay:.5s}.art-billabong .a-r4{animation-delay:.75s}
.art-billabong .a-drop{animation:a-drop 3.2s ease-in infinite}
@keyframes a-ripple{0%,100%{transform:scale(1)}12%{transform:scale(.88)}30%{transform:scale(1.06)}45%{transform:scale(1)}}
@keyframes a-drop{0%,60%{transform:translateY(0);opacity:1}75%{transform:translateY(3px);opacity:1}100%{transform:translateY(0);opacity:1}}
.art-mob .a-h1,.art-mob .a-h2,.art-mob .a-h3{animation:a-bob 3.4s ease-in-out infinite}
.art-mob .a-h1{animation-delay:.2s}.art-mob .a-h3{animation-delay:.4s}
@keyframes a-bob{0%,70%,100%{translate:0 0}80%{translate:0 -2.4px}90%{translate:0 0}}
.art-outback .a-swap{transform-origin:50% 50%;animation:a-swap 5.2s ease-in-out infinite}
.art-outback .a-sun{transform-origin:50% 50%;animation:a-sun 5.2s ease-in-out infinite}
@keyframes a-swap{0%,64%,100%{transform:translateX(0)}74%{transform:translateX(2.5px)}84%{transform:translateX(-1px)}92%{transform:translateX(.5px)}}
@keyframes a-swap-big{0%{transform:scaleY(1)}45%{transform:scaleY(-1)}100%{transform:scaleY(1)}}
@keyframes a-sun{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.art-dust .a-swirl{transform-origin:50% 50%;animation:a-spin 6s ease-in-out infinite}
.art-dust .a-specks{transform-origin:50% 50%;animation:a-specks 6s linear infinite}
@keyframes a-specks{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
.art-croc .a-jaw-up{transform-origin:12% 90%;animation:a-snap 4s ease-in-out infinite}
@keyframes a-snap{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(-9deg)}86%{transform:rotate(3deg) translateY(1.5px)}92%{transform:rotate(0)}}
.art-didge .a-w1,.art-didge .a-w2{animation:a-wave 2.8s ease-out infinite}
.art-didge .a-w2{animation-delay:.35s}
@keyframes a-wave{0%,40%{opacity:0;transform:translate(-2px,2px)}60%{opacity:1}100%{opacity:0;transform:translate(2px,-2px)}}
/* tiles in a crowd: calm the hand (idle only on hover/selected and the discard pile top) */
.hand .tile.action .art *{animation-play-state:paused}
.hand .tile.action:hover .art *,.hand .tile.action.sel .art *,.hand .tile.action:focus-visible .art *{animation-play-state:running}

/* ---- play burst: add .art-play to the tile when it lands ---- */
.tile.action.art-play{animation:a-land .7s cubic-bezier(.2,1.4,.4,1)}
.tile.action.art-play::before{animation:a-glow .9s ease-out}
@keyframes a-land{0%{transform:scale(1.35) rotate(-8deg)}55%{transform:scale(.94) rotate(2deg)}100%{transform:none}}
@keyframes a-glow{0%{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 0 var(--acc)}40%{box-shadow:inset 0 0 0 3px var(--acc),0 0 0 10px color-mix(in srgb,var(--acc) 35%,transparent)}100%{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 55%,transparent),0 0 0 16px transparent}}
.art-play .art-hop .a-roo{animation:a-hop-big .7s ease-out}
@keyframes a-hop-big{0%{transform:translate(-8px,4px)}50%{transform:translate(0,-9px) rotate(-10deg)}100%{transform:none}}
.art-play .art-boomerang .a-boom{animation:a-spin-big .8s ease-out}
@keyframes a-spin-big{0%{transform:rotate(0) scale(1.1)}100%{transform:rotate(720deg) scale(1)}}
.art-play .art-croc .a-jaw-up{animation:a-chomp .6s ease-in-out 2}
@keyframes a-chomp{0%,100%{transform:rotate(0)}40%{transform:rotate(-16deg)}70%{transform:rotate(4deg) translateY(1.5px)}}
.art-play .art-billabong .a-ring{animation:a-ripple-big .9s ease-out}
@keyframes a-ripple-big{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.art-play .art-dust .a-swirl{animation:a-spin-big .8s ease-out}
.art-play .art-outback .a-swap{animation:a-swap-big .8s ease-in-out}
.art-play .art-didge .a-w1,.art-play .art-didge .a-w2{animation:a-wave .5s ease-out 3}
.art-play .art-mob .a-h1,.art-play .art-mob .a-h2,.art-play .art-mob .a-h3{animation:a-bob .35s ease-in-out 3}
.art-play .art-pouch .a-peek{animation:a-peek-big .8s ease-out}
@keyframes a-peek-big{0%{transform:translateY(10px)}60%{transform:translateY(-6px) rotate(-6deg)}100%{transform:none}}
.art-play .art-dingo .a-ear-l,.art-play .art-dingo .a-ear-r{animation:a-ear .5s ease-in-out 2}

@media (prefers-reduced-motion: reduce){
  .art *,.tile.action.art-play,.tile.action.art-play::before{animation:none!important}
}