/* The little scenes on the lobby's game cards (static/js/gamefx.js draws them, this file times them).
   Nothing moves until the card is hovered or has the keyboard focus (the animations are all declared, and paused). Every scene is one loop of --d with its "master"
   element (data-master) on the same loop: the lobby page keeps the card playing after the pointer leaves until the master has finished its loop, so the scene
   always ends at rest. Every animation starts and ends at the rest pose, which is the game's icon exactly as it is. */
.gcard-art .fx { display: block; width: 54%; aspect-ratio: 1; height: auto; overflow: visible; }
.fx * { transform-box: view-box; animation-play-state: paused; }
.gcard:is(:hover, :focus-visible, .hov) .fx * { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .fx * { animation: none !important; } }
/* The scenes that move pieces of the ORIGINAL icon (static/casino-icons/layers, js/gamefx.js `layer`): the plain icon is what you see at rest and until every piece has loaded (.rg-ready);
   while the card is hovered or focused the pieces take over (.rg-parts, the whole icon cut into pieces that stack exactly) or the one piece that spins is shown over its twin in the icon
   (.rg-over). For somebody who asked for less motion the plain icon is all there is. */
.fx .rg-parts { display: none; } .fx .rg-over { visibility: hidden; }
.gcard:is(:hover, :focus-visible, .hov) .fx.rg-ready .rg-rest { display: none; }
.gcard:is(:hover, :focus-visible, .hov) .fx.rg-ready .rg-parts { display: inline; }
.gcard:is(:hover, :focus-visible, .hov) .fx.rg-ready .rg-over { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .fx .rg-parts { display: none !important; } .fx .rg-over { visibility: hidden !important; } .fx .rg-rest { display: inline !important; } }
.fx-mines { --d: 4.4s; } .fx-moles { --d: 3.8s; } .fx-chicken { --d: 2.4s; } .fx-limbo { --d: 4.6s; }

/* ---------- Mines: the fuse burns, the bomb shakes harder and harder, then it goes off ---------- */
.m-bomb { transform-origin: 215px 312px; animation: fx-m-bomb var(--d) linear infinite paused; }
.m-fire { opacity: 0; animation: fx-m-fire var(--d) linear infinite paused; }
.m-flick { transform-origin: 367px 118px; animation: fx-m-flick .2s ease-in-out infinite alternate paused; }
.m-spark { transform-origin: 367px 118px; opacity: 0; animation: fx-m-spark .6s linear infinite paused; }
.m-flash { opacity: 0; animation: fx-m-flash var(--d) linear infinite paused; }
.m-b1, .m-b2, .m-b3 { transform-origin: 215px 305px; transform: scale(0); opacity: 0; }
.m-b1 { animation: fx-m-b1 var(--d) cubic-bezier(.2, .8, .3, 1) infinite paused; }
.m-b2 { animation: fx-m-b2 var(--d) cubic-bezier(.2, .8, .3, 1) infinite paused; }
.m-b3 { animation: fx-m-b3 var(--d) cubic-bezier(.2, .8, .3, 1) infinite paused; }
.m-ring { transform-origin: 215px 305px; transform: scale(0); opacity: 0; animation: fx-m-ring var(--d) cubic-bezier(.1, .7, .3, 1) infinite paused; }
.m-deb { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fx-m-deb var(--d) cubic-bezier(.2, .7, .4, 1) infinite paused; }
.m-smoke { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: fx-m-smoke var(--d) ease-out infinite paused; }
.m-smoke.s1 { animation-name: fx-m-smoke2; } .m-smoke.s2 { animation-name: fx-m-smoke3; } .m-smoke.s3 { animation-name: fx-m-smoke2; } .m-smoke.s4 { animation-name: fx-m-smoke3; }
@keyframes fx-m-bomb {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 10% { transform: translate(-1.5px, 1px) rotate(-.5deg) scale(1.012); } 14% { transform: translate(1.5px, -1px) rotate(.5deg) scale(1.016); }
  18% { transform: translate(-2px, 1.5px) rotate(-.8deg) scale(1.03); } 22% { transform: translate(2px, -1.5px) rotate(.8deg) scale(1.038); } 26% { transform: translate(-3px, 2px) rotate(-1.2deg) scale(1.052); }
  29% { transform: translate(3px, -2px) rotate(1.2deg) scale(1.068); } 32% { transform: translate(-4px, 2px) rotate(-1.6deg) scale(1.095); } 34.5% { transform: translate(0, 0) rotate(0) scale(1.15); opacity: 1; }
  34.6% { opacity: 0; } 80% { transform: scale(.4); opacity: 0; } 84% { transform: scale(1.12); opacity: 1; } 90% { transform: scale(.97); opacity: 1; } 95%, 100% { transform: scale(1); opacity: 1; } }
@keyframes fx-m-fire { 0% { opacity: 0; } 3% { opacity: 1; } 33% { opacity: 1; } 34.5%, 100% { opacity: 0; } }
@keyframes fx-m-flick { from { transform: scale(.72) rotate(-8deg); } to { transform: scale(1.18) rotate(10deg); } }
@keyframes fx-m-spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; } }
@keyframes fx-m-flash { 0%, 34.5% { opacity: 0; } 35.2% { opacity: .95; } 42% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fx-m-b1 { 0%, 34.5% { transform: scale(0); opacity: 0; } 35% { transform: scale(.25); opacity: 1; } 41% { transform: scale(1); } 52% { transform: scale(1.07); opacity: 1; } 62% { transform: scale(1.14); opacity: 0; } 100% { transform: scale(1.14); opacity: 0; } }
@keyframes fx-m-b2 { 0%, 35% { transform: scale(0); opacity: 0; } 35.4% { transform: scale(.2); opacity: 1; } 41.5% { transform: scale(1); } 50% { transform: scale(1.05); opacity: 1; } 58% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes fx-m-b3 { 0%, 35.5% { transform: scale(0); opacity: 0; } 36% { transform: scale(.2); opacity: 1; } 42% { transform: scale(1); } 48% { transform: scale(1.04); opacity: 1; } 54% { transform: scale(1.08); opacity: 0; } 100% { transform: scale(1.08); opacity: 0; } }
@keyframes fx-m-ring { 0%, 34.5% { transform: scale(0); opacity: 0; } 35% { transform: scale(.3); opacity: .9; } 54% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes fx-m-deb { 0%, 34.5% { transform: translate(0, 0) rotate(0) scale(1); opacity: 0; } 35% { opacity: 1; } 56% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 1; } 72% { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(calc(var(--r) * 1.6)) scale(.8); opacity: 0; } 100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) scale(.8); opacity: 0; } }
@keyframes fx-m-smoke { 0%, 37% { transform: scale(0); opacity: 0; } 40% { transform: scale(.4); opacity: .95; } 62% { transform: scale(1.15) translateY(-16px); opacity: .9; } 80% { transform: scale(1.5) translateY(-48px); opacity: 0; } 100% { transform: scale(1.5) translateY(-48px); opacity: 0; } }
@keyframes fx-m-smoke2 { 0%, 38% { transform: scale(0); opacity: 0; } 41% { transform: scale(.35); opacity: .95; } 64% { transform: scale(1.3) translate(10px, -22px); opacity: .9; } 82% { transform: scale(1.7) translate(16px, -56px); opacity: 0; } 100% { transform: scale(1.7) translate(16px, -56px); opacity: 0; } }
@keyframes fx-m-smoke3 { 0%, 39% { transform: scale(0); opacity: 0; } 42% { transform: scale(.3); opacity: .95; } 66% { transform: scale(1.2) translate(-12px, -18px); opacity: .9; } 84% { transform: scale(1.6) translate(-18px, -52px); opacity: 0; } 100% { transform: scale(1.6) translate(-18px, -52px); opacity: 0; } }

/* ---------- Moles: the mole sinks into its hole, the ground is quiet, then it shoots up with dirt flying and blinks ---------- */
.mo-mole { transform-origin: 240px 311px; animation: fx-mo-mole var(--d) linear infinite paused; }
.mo-dirt { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fx-mo-dirt var(--d) cubic-bezier(.2, .7, .4, 1) infinite paused; }
.mo-blink { opacity: 0; animation: fx-mo-blink var(--d) linear infinite paused; }
@keyframes fx-mo-mole {
  0%, 8% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, .9, .4); } 24% { transform: translateY(235px) scale(1.02, .96); } 39% { transform: translateY(235px) scale(1, 1); animation-timing-function: cubic-bezier(.1, .7, .2, 1); }
  47% { transform: translateY(-26px) scale(.97, 1.06); animation-timing-function: ease-in-out; } 54% { transform: translateY(5px) scale(1.03, .97); } 60%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes fx-mo-dirt { 0%, 39% { transform: translate(0, 0) scale(.6); opacity: 0; } 40% { opacity: 1; } 50% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } 62% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 64px)) scale(.8); opacity: 0; } 100% { opacity: 0; } }
@keyframes fx-mo-blink { 0%, 72% { opacity: 0; } 73% { opacity: 1; } 78% { opacity: 1; } 79%, 100% { opacity: 0; } }

/* ---------- Chicken: the wing flaps, twice, then a rest (the pieces are the original icon's own: static/casino-icons/layers/chicken) ---------- */
.rg-wing { transform-origin: 153px 263px; animation: fx-rg-wing var(--d) ease-in-out infinite paused; }
@keyframes fx-rg-wing { 0%, 44%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 21% { transform: rotate(2.5deg); } 32% { transform: rotate(-5deg); } }

/* ---------- Limbo: the engine lights, the rocket shakes, climbs and leaves a trail of smoke, and comes back in from below ---------- */
.l-rocket { transform-origin: 255px 205px; animation: fx-l-rocket var(--d) linear infinite paused; }
.l-flame { transform-origin: 0 0; transform: scale(.2, .15); opacity: 0; animation: fx-l-flame var(--d) ease-in-out infinite paused; }
.l-flame path { transform-box: fill-box; transform-origin: 50% 0; animation: fx-l-flick .14s ease-in-out infinite alternate paused; }
.l-smoke { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.l-smoke.s0 { animation: fx-l-s0 var(--d) ease-out infinite paused; } .l-smoke.s1 { animation: fx-l-s1 var(--d) ease-out infinite paused; } .l-smoke.s2 { animation: fx-l-s2 var(--d) ease-out infinite paused; }
.l-smoke.s3 { animation: fx-l-s3 var(--d) ease-out infinite paused; } .l-smoke.s4 { animation: fx-l-s4 var(--d) ease-out infinite paused; } .l-smoke.s5 { animation: fx-l-s5 var(--d) ease-out infinite paused; }
@keyframes fx-l-rocket {
  0% { transform: translate(0, 0); opacity: 1; } 3% { transform: translate(-1px, .6px); } 5% { transform: translate(1px, -.6px); } 7% { transform: translate(-1.2px, .8px); } 9% { transform: translate(1.2px, -.8px); }
  11% { transform: translate(-1.5px, 1px); } 13% { transform: translate(1.5px, -1px); } 14% { transform: translate(0, 0); animation-timing-function: cubic-bezier(.55, 0, .9, .45); } 40% { transform: translate(350px, -410px); opacity: 1; }
  40.5% { opacity: 0; } 52% { transform: translate(-350px, 410px); opacity: 0; animation-timing-function: cubic-bezier(.1, .7, .2, 1); } 52.5% { opacity: 1; } 88%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes fx-l-flame { 0% { transform: scale(.2, .15); opacity: 0; } 6% { transform: scale(.6, .5); opacity: 1; } 12% { transform: scale(1, 1); } 14%, 40% { transform: scale(1.15, 1.5); opacity: 1; } 40.5% { opacity: 0; } 52.5% { transform: scale(1.2, 1.6); opacity: 1; } 70% { transform: scale(1, 1.15); } 88% { transform: scale(.6, .4); opacity: 1; } 95% { transform: scale(.3, .2); opacity: 0; } 100% { transform: scale(.2, .15); opacity: 0; } }
@keyframes fx-l-flick { from { transform: scale(.86, .96); } to { transform: scale(1.1, 1.04); } }
@keyframes fx-l-s0 { 0%, 5% { transform: scale(0); opacity: 0; } 9% { transform: scale(.5); opacity: .95; } 30% { transform: scale(1.5) translate(-16px, 20px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-l-s1 { 0%, 14% { transform: scale(0); opacity: 0; } 17% { transform: scale(.5); opacity: .95; } 38% { transform: scale(1.5) translate(-14px, 18px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-l-s2 { 0%, 19% { transform: scale(0); opacity: 0; } 22% { transform: scale(.5); opacity: .95; } 43% { transform: scale(1.5) translate(-14px, 18px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-l-s3 { 0%, 24% { transform: scale(0); opacity: 0; } 27% { transform: scale(.5); opacity: .95; } 48% { transform: scale(1.5) translate(-14px, 18px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-l-s4 { 0%, 29% { transform: scale(0); opacity: 0; } 32% { transform: scale(.5); opacity: .95; } 53% { transform: scale(1.5) translate(-14px, 18px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-l-s5 { 0%, 34% { transform: scale(0); opacity: 0; } 37% { transform: scale(.5); opacity: .95; } 58% { transform: scale(1.5) translate(-14px, 18px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Roulette: the wheel spins up and slows down, the ball runs round the rim the other way and drops into a pocket ---------- */
.fx-roulette { --d: 3.8s; }
.r-wheel { transform-origin: 239px 237px; animation: fx-r-wheel var(--d) cubic-bezier(.3, .05, .2, 1) infinite paused; }
.r-orbit { transform-origin: 239px 237px; animation: fx-r-orbit var(--d) cubic-bezier(.2, .5, .3, 1) infinite paused; }
.r-ball { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fx-r-ball var(--d) ease-in-out infinite paused; }
@keyframes fx-r-wheel { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes fx-r-orbit { from { transform: rotate(0); } to { transform: rotate(-1800deg); } }
@keyframes fx-r-ball {
  0%, 2% { transform: translateY(-26px) scale(1.5); opacity: 0; } 7% { transform: translateY(0) scale(1); opacity: 1; } 52% { transform: translateY(0) scale(1); opacity: 1; }
  62% { transform: translateY(22px); } 66% { transform: translateY(13px); } 72% { transform: translateY(41px); } 75% { transform: translateY(34px); } 79% { transform: translateY(46px); opacity: 1; }
  92% { transform: translateY(46px) scale(1); opacity: 1; } 100% { transform: translateY(46px) scale(.5); opacity: 0; } }

/* ---------- Coin flip: tossed, three turns in the air (the back is a lime star), lands with a squash and a bounce ---------- */
.fx-coinflip { --d: 2.9s; }
.gcard-art .cf-coin { transform-origin: 238px 420px; animation: fx-cf-coin var(--d) linear infinite paused; }      /* (scoped to the lobby card: the game page has its own .cf-coin, and an unscoped rule here froze its flip) */
.gcard-art .cf-front, .gcard-art .cf-back { transform-origin: 238px 243px; }
.gcard-art .cf-front { animation: fx-cf-front var(--d) linear infinite paused; }
.gcard-art .cf-back { transform: scaleY(0); animation: fx-cf-back var(--d) linear infinite paused; }
.gcard-art .cf-shadow { opacity: 0; transform-origin: 238px 452px; animation: fx-cf-shadow var(--d) linear infinite paused; }
@keyframes fx-cf-coin {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .75, .3, 1); } 38% { transform: translateY(-34px) scale(1.08); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  78% { transform: translateY(0) scale(1.07, .91); animation-timing-function: ease-out; } 85% { transform: translateY(-12px) scale(.98, 1.03); animation-timing-function: ease-in; }
  91% { transform: translateY(0) scale(1.03, .96); animation-timing-function: ease-out; } 95% { transform: translateY(-3px) scale(1); animation-timing-function: ease-in; } 100% { transform: translateY(0) scale(1); } }
@keyframes fx-cf-front {
  0% { transform: scaleY(1); animation-timing-function: ease-in; } 6.5% { transform: scaleY(0); } 19.5% { transform: scaleY(0); animation-timing-function: ease-out; } 26% { transform: scaleY(1); animation-timing-function: ease-in; }
  32.5% { transform: scaleY(0); } 45.5% { transform: scaleY(0); animation-timing-function: ease-out; } 52% { transform: scaleY(1); animation-timing-function: ease-in; } 58.5% { transform: scaleY(0); }
  71.5% { transform: scaleY(0); animation-timing-function: ease-out; } 78%, 100% { transform: scaleY(1); } }
@keyframes fx-cf-back {
  0%, 6.5% { transform: scaleY(0); animation-timing-function: ease-out; } 13% { transform: scaleY(1); animation-timing-function: ease-in; } 19.5% { transform: scaleY(0); } 32.5% { transform: scaleY(0); animation-timing-function: ease-out; }
  39% { transform: scaleY(1); animation-timing-function: ease-in; } 45.5% { transform: scaleY(0); } 58.5% { transform: scaleY(0); animation-timing-function: ease-out; } 65% { transform: scaleY(1); animation-timing-function: ease-in; }
  71.5%, 100% { transform: scaleY(0); } }
@keyframes fx-cf-shadow { 0% { opacity: 0; transform: scaleX(1); } 8% { opacity: .28; } 38% { opacity: .1; transform: scaleX(.55); } 78% { opacity: .3; transform: scaleX(1.05); } 90% { opacity: .22; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* ---------- War: the swords draw back, clash with a flash and a spray of sparks, and a glint runs along the blades ---------- */
.fx-war { --d: 2.8s; }
.w-all { transform-origin: 237px 243px; animation: fx-w-all var(--d) linear infinite paused; }
.w-glint { opacity: 0; animation: fx-w-glint var(--d) ease-in-out infinite paused; }
.w-flash, .w-flash2, .w-ring { transform-origin: 237px 243px; transform: scale(0); opacity: 0; }
.w-flash { animation: fx-w-flash var(--d) cubic-bezier(.2, .8, .3, 1) infinite paused; }
.w-flash2 { animation: fx-w-flash2 var(--d) cubic-bezier(.2, .8, .3, 1) infinite paused; }
.w-ring { animation: fx-w-ring var(--d) cubic-bezier(.1, .7, .3, 1) infinite paused; }
.w-spark { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: fx-w-spark var(--d) cubic-bezier(.2, .7, .4, 1) infinite paused; }
@keyframes fx-w-all {
  0% { transform: rotate(0) scale(1); } 14% { transform: translateY(2px) rotate(-2.5deg) scale(.97); } 26% { transform: translateY(5px) rotate(-4deg) scale(.95); animation-timing-function: cubic-bezier(.8, 0, 1, .5); }
  30% { transform: translateY(0) rotate(3deg) scale(1.14); } 33% { transform: rotate(-1.5deg) scale(1.1); } 38% { transform: rotate(1deg) scale(1.06); } 44% { transform: rotate(-.6deg) scale(1.02); } 52%, 100% { transform: rotate(0) scale(1); } }
@keyframes fx-w-glint { 0%, 46% { transform: translateX(0); opacity: 0; } 47% { opacity: .75; } 66% { transform: translateX(520px); opacity: .75; } 67%, 100% { transform: translateX(520px); opacity: 0; } }
@keyframes fx-w-flash { 0%, 29% { transform: scale(0); opacity: 0; } 30% { transform: scale(.3); opacity: 1; } 35% { transform: scale(1.05); opacity: 1; } 46% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fx-w-flash2 { 0%, 29.5% { transform: scale(0); opacity: 0; } 30.5% { transform: scale(.3); opacity: 1; } 34% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes fx-w-ring { 0%, 29.5% { transform: scale(0); opacity: 0; } 30.5% { transform: scale(.4); opacity: .9; } 50% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fx-w-spark { 0%, 29.5% { transform: translate(0, 0) rotate(var(--r)) scale(0); opacity: 0; } 31% { transform: translate(0, 0) rotate(var(--r)) scale(1); opacity: 1; } 52% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4); opacity: 0; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4); opacity: 0; } }

/* ---------- Wheel: it turns under the fixed pointer, fast and then slower and slower, rim lights run round, and a burst marks where it stops ---------- */
.fx-wheel { --d: 4.6s; }
.wh-spin { transform-origin: 239px 249px; animation: fx-wh-spin var(--d) ease-in-out infinite paused; }
.wh-lights { opacity: 0; animation: fx-wh-lights var(--d) linear infinite paused; }
.wh-light { transform-box: fill-box; transform-origin: center; animation: fx-wh-blink .5s ease-in-out infinite alternate paused; }
.wh-burst { transform-origin: 240px 138px; transform: scale(0); opacity: 0; animation: fx-wh-burst var(--d) ease-out infinite paused; }
/* the disc rocks under the pointer and settles (a few degrees only: the disc piece has a gap behind the pointer in the original, which a bigger turn would show) */
@keyframes fx-wh-spin { 0%, 70%, 100% { transform: rotate(0); } 10% { transform: rotate(3.5deg); } 22% { transform: rotate(-3deg); } 34% { transform: rotate(2.6deg); } 46% { transform: rotate(-2deg); } 58% { transform: rotate(1.1deg); } }
@keyframes fx-wh-lights { 0% { opacity: 0; } 4%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes fx-wh-blink { from { transform: scale(.5); } to { transform: scale(1.3); } }
@keyframes fx-wh-burst { 0%, 80% { transform: scale(0); opacity: 0; } 84% { transform: scale(.5); opacity: 1; } 92% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Rock paper scissors: three pumps together, then each hand shows itself in turn ---------- */
.fx-rps { --d: 3.6s; }
.rp-rock { transform-origin: 110px 265px; animation: fx-rp-rock var(--d) ease-in-out infinite paused; }
.rp-paper { transform-origin: 400px 265px; animation: fx-rp-paper var(--d) ease-in-out infinite paused; }
.rp-scissors { transform-origin: 240px 410px; animation: fx-rp-scissors var(--d) ease-in-out infinite paused; }
.rp-burst { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.rp-burst.b0 { animation: fx-rp-b0 var(--d) ease-out infinite paused; } .rp-burst.b1 { animation: fx-rp-b1 var(--d) ease-out infinite paused; } .rp-burst.b2 { animation: fx-rp-b2 var(--d) ease-out infinite paused; }
@keyframes fx-rp-rock {
  0%, 6% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(0, 16px) rotate(5deg); } 14% { transform: translate(0, -10px) rotate(-4deg); } 18% { transform: translate(0, 0) rotate(0); }
  22% { transform: translate(0, 16px) rotate(5deg); } 26% { transform: translate(0, -10px) rotate(-4deg); } 30% { transform: translate(0, 0) rotate(0); } 34% { transform: translate(0, 16px) rotate(5deg); }
  38% { transform: translate(0, -10px) rotate(-4deg); } 42% { transform: translate(0, 0) rotate(0); } 47% { transform: translate(-6px, -14px) rotate(-7deg) scale(1.17); } 54% { transform: translate(-3px, -6px) rotate(-3deg) scale(1.1); } 64%, 100% { transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes fx-rp-paper {
  0%, 6% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(0, 16px) rotate(-5deg); } 14% { transform: translate(0, -10px) rotate(4deg); } 18% { transform: translate(0, 0) rotate(0); }
  22% { transform: translate(0, 16px) rotate(-5deg); } 26% { transform: translate(0, -10px) rotate(4deg); } 30% { transform: translate(0, 0) rotate(0); } 34% { transform: translate(0, 16px) rotate(-5deg); }
  38% { transform: translate(0, -10px) rotate(4deg); } 42%, 50% { transform: translate(0, 0) rotate(0) scale(1); } 55% { transform: translate(6px, -14px) rotate(7deg) scale(1.15); } 61% { transform: translate(3px, -6px) rotate(3deg) scale(1.08); } 70%, 100% { transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes fx-rp-scissors {
  0%, 6% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(0, 16px); } 14% { transform: translate(0, -10px); } 18% { transform: translate(0, 0); }
  22% { transform: translate(0, 16px); } 26% { transform: translate(0, -10px); } 30% { transform: translate(0, 0); } 34% { transform: translate(0, 16px); }
  38% { transform: translate(0, -10px); } 42%, 58% { transform: translate(0, 0) rotate(0) scale(1); } 63% { transform: translate(0, -12px) rotate(-6deg) scale(1.15); } 67% { transform: translate(0, -8px) rotate(6deg) scale(1.12); }
  71% { transform: translate(0, -5px) rotate(-4deg) scale(1.08); } 75% { transform: translate(0, -2px) rotate(3deg) scale(1.03); } 82%, 100% { transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes fx-rp-b0 { 0%, 44% { transform: scale(0); opacity: 0; } 48% { transform: scale(.6); opacity: 1; } 58% { transform: scale(1.1); opacity: 1; } 66%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes fx-rp-b1 { 0%, 51% { transform: scale(0); opacity: 0; } 55% { transform: scale(.6); opacity: 1; } 65% { transform: scale(1.1); opacity: 1; } 73%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes fx-rp-b2 { 0%, 59% { transform: scale(0); opacity: 0; } 63% { transform: scale(.6); opacity: 1; } 73% { transform: scale(1.1); opacity: 1; } 81%, 100% { transform: scale(1.3); opacity: 0; } }

/* ---------- Dice: both dice are thrown, tumble (their faces change) and land with a squash and a puff of dust ---------- */
.fx-dice { --d: 3.4s; }
.d-die { transform-origin: 306px 392px; }
.d-die.back { transform-origin: 168px 300px; animation: fx-d-hop-b var(--d) linear infinite paused; }
.d-die.front { animation: fx-d-hop-f var(--d) linear infinite paused; }
.d-die.back .d-spin { animation: fx-d-spin-b var(--d) linear infinite paused; }
.d-die.front .d-spin { animation: fx-d-spin-f var(--d) linear infinite paused; }
.d-spin { transform-box: fill-box; transform-origin: center; }
.d-face { opacity: 0; animation-duration: var(--d); animation-iteration-count: infinite; animation-timing-function: step-end; animation-play-state: paused; }
.d-shadow { opacity: 0; transform-box: fill-box; transform-origin: center; }
.d-shadow.a { animation: fx-d-shadow-b var(--d) linear infinite paused; } .d-shadow.b { animation: fx-d-shadow-f var(--d) linear infinite paused; }
.d-puff { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.d-puff.p1 { animation: fx-d-puff-f1 var(--d) ease-out infinite paused; } .d-puff.p2 { animation: fx-d-puff-f2 var(--d) ease-out infinite paused; } .d-puff.p3 { animation: fx-d-puff-b var(--d) ease-out infinite paused; }
@keyframes fx-d-hop-f { 0%, 8% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 26% { transform: translateY(-36px) scale(1.04); animation-timing-function: cubic-bezier(.6, 0, .9, .5); } 44% { transform: translateY(0) scale(1.1, .88); animation-timing-function: ease-out; } 52% { transform: translateY(-14px) scale(.98, 1.03); animation-timing-function: ease-in; } 60% { transform: translateY(0) scale(1.05, .94); animation-timing-function: ease-out; } 66% { transform: translateY(-4px) scale(1); animation-timing-function: ease-in; } 72%, 100% { transform: translateY(0) scale(1); } }
@keyframes fx-d-hop-b { 0%, 14% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 31% { transform: translateY(-30px) scale(1.04); animation-timing-function: cubic-bezier(.6, 0, .9, .5); } 50% { transform: translateY(0) scale(1.1, .88); animation-timing-function: ease-out; } 58% { transform: translateY(-12px) scale(.98, 1.03); animation-timing-function: ease-in; } 66% { transform: translateY(0) scale(1.05, .94); animation-timing-function: ease-out; } 72% { transform: translateY(-3px) scale(1); animation-timing-function: ease-in; } 78%, 100% { transform: translateY(0) scale(1); } }
@keyframes fx-d-spin-f { 0%, 8% { transform: rotate(0); animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 44% { transform: rotate(720deg); } 50% { transform: rotate(727deg); } 57% { transform: rotate(716deg); } 64% { transform: rotate(722deg); } 72%, 100% { transform: rotate(720deg); } }
@keyframes fx-d-spin-b { 0%, 14% { transform: rotate(0); animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 50% { transform: rotate(-720deg); } 56% { transform: rotate(-726deg); } 63% { transform: rotate(-715deg); } 70% { transform: rotate(-721deg); } 78%, 100% { transform: rotate(-720deg); } }
@keyframes fx-d-shadow-f { 0%, 7% { opacity: 0; transform: scaleX(1); } 14% { opacity: .22; } 26% { opacity: .1; transform: scaleX(.6); } 44% { opacity: .3; transform: scaleX(1.05); } 60% { opacity: .26; transform: scaleX(1); } 72%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fx-d-shadow-b { 0%, 13% { opacity: 0; transform: scaleX(1); } 20% { opacity: .2; } 31% { opacity: .08; transform: scaleX(.6); } 50% { opacity: .26; transform: scaleX(1.05); } 66% { opacity: .22; transform: scaleX(1); } 78%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fx-d-puff-f1 { 0%, 43% { transform: scale(0); opacity: 0; } 44% { transform: scale(.5); opacity: .9; } 55% { transform: scale(1.5) translate(-18px, -6px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-d-puff-f2 { 0%, 43.5% { transform: scale(0); opacity: 0; } 44.5% { transform: scale(.5); opacity: .9; } 55.5% { transform: scale(1.5) translate(18px, -6px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-d-puff-b { 0%, 49% { transform: scale(0); opacity: 0; } 50% { transform: scale(.5); opacity: .9; } 61% { transform: scale(1.5) translate(-16px, -6px); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-d-f-f1 { 0% { opacity: 0; } 9% { opacity: 0; } 14% { opacity: 0; } 14% { opacity: 0; } 19% { opacity: 0; } 19% { opacity: 1; } 24% { opacity: 0; } 24% { opacity: 0; } 29% { opacity: 0; } 29% { opacity: 0; } 34% { opacity: 0; } 34% { opacity: 0; } 39% { opacity: 0; } 39% { opacity: 0; } 44% { opacity: 0; } 100% { opacity: 0; } }
.d-die.front .d-face.f1 { animation-name: fx-d-f-f1; }
@keyframes fx-d-f-f2 { 0% { opacity: 0; } 9% { opacity: 1; } 14% { opacity: 0; } 14% { opacity: 0; } 19% { opacity: 0; } 19% { opacity: 0; } 24% { opacity: 0; } 24% { opacity: 0; } 29% { opacity: 0; } 29% { opacity: 0; } 34% { opacity: 0; } 34% { opacity: 1; } 39% { opacity: 0; } 39% { opacity: 0; } 44% { opacity: 0; } 100% { opacity: 0; } }
.d-die.front .d-face.f2 { animation-name: fx-d-f-f2; }
@keyframes fx-d-f-f3 { 0% { opacity: 0; } 9% { opacity: 0; } 14% { opacity: 0; } 14% { opacity: 0; } 19% { opacity: 0; } 19% { opacity: 0; } 24% { opacity: 0; } 24% { opacity: 0; } 29% { opacity: 0; } 29% { opacity: 1; } 34% { opacity: 0; } 34% { opacity: 0; } 39% { opacity: 0; } 39% { opacity: 0; } 44% { opacity: 0; } 100% { opacity: 0; } }
.d-die.front .d-face.f3 { animation-name: fx-d-f-f3; }
@keyframes fx-d-f-f4 { 0% { opacity: 0; } 9% { opacity: 0; } 14% { opacity: 0; } 14% { opacity: 1; } 19% { opacity: 0; } 19% { opacity: 0; } 24% { opacity: 0; } 24% { opacity: 0; } 29% { opacity: 0; } 29% { opacity: 0; } 34% { opacity: 0; } 34% { opacity: 0; } 39% { opacity: 0; } 39% { opacity: 1; } 44% { opacity: 0; } 100% { opacity: 0; } }
.d-die.front .d-face.f4 { animation-name: fx-d-f-f4; }
@keyframes fx-d-f-f5 { 0% { opacity: 1; } 9% { opacity: 0; } 14% { opacity: 1; } 14% { opacity: 0; } 19% { opacity: 1; } 19% { opacity: 0; } 24% { opacity: 1; } 24% { opacity: 0; } 29% { opacity: 1; } 29% { opacity: 0; } 34% { opacity: 1; } 34% { opacity: 0; } 39% { opacity: 1; } 39% { opacity: 0; } 44% { opacity: 1; } 100% { opacity: 1; } }
.d-die.front .d-face.f5 { animation-name: fx-d-f-f5; }
@keyframes fx-d-f-f6 { 0% { opacity: 0; } 9% { opacity: 0; } 14% { opacity: 0; } 14% { opacity: 0; } 19% { opacity: 0; } 19% { opacity: 0; } 24% { opacity: 0; } 24% { opacity: 1; } 29% { opacity: 0; } 29% { opacity: 0; } 34% { opacity: 0; } 34% { opacity: 0; } 39% { opacity: 0; } 39% { opacity: 0; } 44% { opacity: 0; } 100% { opacity: 0; } }
.d-die.front .d-face.f6 { animation-name: fx-d-f-f6; }
@keyframes fx-d-b-f1 { 0% { opacity: 0; } 15% { opacity: 1; } 20% { opacity: 0; } 20% { opacity: 0; } 25% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 0; } 30% { opacity: 0; } 35% { opacity: 0; } 35% { opacity: 0; } 40% { opacity: 0; } 40% { opacity: 1; } 45% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 0; } }
.d-die.back .d-face.f1 { animation-name: fx-d-b-f1; }
@keyframes fx-d-b-f2 { 0% { opacity: 0; } 15% { opacity: 0; } 20% { opacity: 0; } 20% { opacity: 0; } 25% { opacity: 0; } 25% { opacity: 1; } 30% { opacity: 0; } 30% { opacity: 0; } 35% { opacity: 0; } 35% { opacity: 0; } 40% { opacity: 0; } 40% { opacity: 0; } 45% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 0; } }
.d-die.back .d-face.f2 { animation-name: fx-d-b-f2; }
@keyframes fx-d-b-f3 { 0% { opacity: 1; } 15% { opacity: 0; } 20% { opacity: 1; } 20% { opacity: 0; } 25% { opacity: 1; } 25% { opacity: 0; } 30% { opacity: 1; } 30% { opacity: 0; } 35% { opacity: 1; } 35% { opacity: 0; } 40% { opacity: 1; } 40% { opacity: 0; } 45% { opacity: 1; } 45% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
.d-die.back .d-face.f3 { animation-name: fx-d-b-f3; }
@keyframes fx-d-b-f4 { 0% { opacity: 0; } 15% { opacity: 0; } 20% { opacity: 0; } 20% { opacity: 0; } 25% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 0; } 30% { opacity: 0; } 35% { opacity: 0; } 35% { opacity: 1; } 40% { opacity: 0; } 40% { opacity: 0; } 45% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 0; } }
.d-die.back .d-face.f4 { animation-name: fx-d-b-f4; }
@keyframes fx-d-b-f5 { 0% { opacity: 0; } 15% { opacity: 0; } 20% { opacity: 0; } 20% { opacity: 1; } 25% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 0; } 30% { opacity: 0; } 35% { opacity: 0; } 35% { opacity: 0; } 40% { opacity: 0; } 40% { opacity: 0; } 45% { opacity: 0; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.d-die.back .d-face.f5 { animation-name: fx-d-b-f5; }
@keyframes fx-d-b-f6 { 0% { opacity: 0; } 15% { opacity: 0; } 20% { opacity: 0; } 20% { opacity: 0; } 25% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 0; } 30% { opacity: 1; } 35% { opacity: 0; } 35% { opacity: 0; } 40% { opacity: 0; } 40% { opacity: 0; } 45% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 0; } }
.d-die.back .d-face.f6 { animation-name: fx-d-b-f6; }

/* ---------- Blackjack: the cards are swept away and dealt again, a glint crosses them, and a "21" pops up ---------- */
.fx-blackjack { --d: 4.2s; }
.gcard-art .bj-cards { transform-origin: 240px 240px; animation: fx-bj-cards var(--d) linear infinite paused; }
.bj-glint { opacity: 0; animation: fx-bj-glint var(--d) ease-in-out infinite paused; }
.bj-badge, .bj-burst { transform-origin: 392px 96px; transform: scale(0); opacity: 0; }
.bj-badge { animation: fx-bj-badge var(--d) ease-out infinite paused; } .bj-burst { animation: fx-bj-burst var(--d) ease-out infinite paused; }
@keyframes fx-bj-cards { 0%, 8% { transform: translate(0, 0) rotate(0); animation-timing-function: cubic-bezier(.6, 0, .9, .6); } 20% { transform: translate(-310px, 40px) rotate(-22deg); } 20.01% { transform: translate(340px, -30px) rotate(20deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 33% { transform: translate(-12px, 4px) rotate(-2deg); animation-timing-function: ease-in-out; } 38% { transform: translate(0, -6px) rotate(.6deg); } 42%, 100% { transform: translate(0, 0) rotate(0); } }
@keyframes fx-bj-glint { 0%, 46% { transform: translateX(0); opacity: 0; } 47% { opacity: .75; } 62% { transform: translateX(520px); opacity: .75; } 63%, 100% { transform: translateX(520px); opacity: 0; } }
@keyframes fx-bj-badge { 0%, 50% { transform: scale(0) rotate(-12deg); opacity: 0; } 55% { transform: scale(1.25) rotate(6deg); opacity: 1; } 59% { transform: scale(.95) rotate(-3deg); opacity: 1; } 63% { transform: scale(1) rotate(0); opacity: 1; } 78% { transform: scale(1) rotate(0); opacity: 1; } 85%, 100% { transform: scale(0) rotate(10deg); opacity: 0; } }
@keyframes fx-bj-burst { 0%, 50% { transform: scale(0); opacity: 0; } 55% { transform: scale(.7); opacity: 1; } 64% { transform: scale(1.15); opacity: 1; } 74%, 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- Hi-Lo: the lime arrow sends echoes up three times, then the coral arrow sends echoes down ---------- */
.fx-hilo { --d: 3.6s; }
.h-cards { transform-origin: 240px 300px; animation: fx-h-cards var(--d) ease-in-out infinite paused; }
.h-up, .h-down { opacity: 0; }
.h-up { transform-origin: 163px 272px; animation: fx-h-up var(--d) ease-out infinite paused; } .h-down { transform-origin: 300px 293px; animation: fx-h-down var(--d) ease-out infinite paused; }
@keyframes fx-h-cards { 0%, 4% { transform: translateY(0) rotate(0); } 10% { transform: translateY(-3px) rotate(-1.2deg); } 44% { transform: translateY(-3px) rotate(-1.2deg); } 52% { transform: translateY(3px) rotate(1.2deg); } 90% { transform: translateY(3px) rotate(1.2deg); } 97%, 100% { transform: translateY(0) rotate(0); } }
@keyframes fx-h-up { 0%% { transform: translateY(0) scale(1); opacity: 0; } 6% { transform: translateY(0) scale(1); opacity: 0; } 8% { transform: translateY(-10px) scale(1.05); opacity: 1; } 20% { transform: translateY(-70px) scale(1.35); opacity: 0; } 18% { transform: translateY(0) scale(1); opacity: 0; } 20% { transform: translateY(-10px) scale(1.05); opacity: 1; } 32% { transform: translateY(-70px) scale(1.35); opacity: 0; } 30% { transform: translateY(0) scale(1); opacity: 0; } 32% { transform: translateY(-10px) scale(1.05); opacity: 1; } 44% { transform: translateY(-70px) scale(1.35); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 0; } }
@keyframes fx-h-down { 0%% { transform: translateY(0) scale(1); opacity: 0; } 52% { transform: translateY(0) scale(1); opacity: 0; } 54% { transform: translateY(10px) scale(1.05); opacity: 1; } 66% { transform: translateY(70px) scale(1.35); opacity: 0; } 64% { transform: translateY(0) scale(1); opacity: 0; } 66% { transform: translateY(10px) scale(1.05); opacity: 1; } 78% { transform: translateY(70px) scale(1.35); opacity: 0; } 76% { transform: translateY(0) scale(1); opacity: 0; } 78% { transform: translateY(10px) scale(1.05); opacity: 1; } 90% { transform: translateY(70px) scale(1.35); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 0; } }

/* ---------- Baccarat: the chip spins, a natural 9 pops up between the cards in a burst, and a glint crosses the cards ---------- */
.fx-baccarat { --d: 3.8s; }
.bc-chip { transform-origin: 239px 330px; animation: fx-bc-chip var(--d) cubic-bezier(.3, .1, .2, 1) infinite paused; }
.bc-glint { opacity: 0; animation: fx-bc-glint var(--d) ease-in-out infinite paused; }
.bc-badge, .bc-burst { transform-origin: 240px 130px; transform: scale(0); opacity: 0; }
.bc-badge { animation: fx-bc-badge var(--d) ease-out infinite paused; } .bc-burst { animation: fx-bc-burst var(--d) ease-out infinite paused; }
@keyframes fx-bc-chip { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes fx-bc-glint { 0%, 62% { transform: translateX(0); opacity: 0; } 63% { opacity: .75; } 80% { transform: translateX(520px); opacity: .75; } 81%, 100% { transform: translateX(520px); opacity: 0; } }
@keyframes fx-bc-badge { 0%, 38% { transform: scale(0) rotate(-12deg); opacity: 0; } 44% { transform: scale(1.25) rotate(6deg); opacity: 1; } 48% { transform: scale(.95) rotate(-3deg); opacity: 1; } 52% { transform: scale(1) rotate(0); opacity: 1; } 70% { transform: scale(1) rotate(0); opacity: 1; } 78%, 100% { transform: scale(0) rotate(10deg); opacity: 0; } }
@keyframes fx-bc-burst { 0%, 38% { transform: scale(0); opacity: 0; } 44% { transform: scale(.7); opacity: 1; } 54% { transform: scale(1.15); opacity: 1; } 66%, 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- Poker: the card turns over (coral lattice on its back) and back again, the front chip spins like a spun coin, sparkles fly ---------- */
.fx-poker { --d: 3.8s; }
.pk-chip { transform-origin: 189.5px 317.5px; animation: fx-pk-chip var(--d) cubic-bezier(.2, .5, .3, 1) infinite paused; }
.pk-cfront, .pk-cback { transform-origin: 240px 190px; }
.pk-cfront { animation: fx-pk-cfront var(--d) linear infinite paused; }
.pk-cback { transform: scaleX(0); animation: fx-pk-cback var(--d) linear infinite paused; }
.pk-spark { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
@keyframes fx-pk-chip { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
@keyframes fx-pk-cfront { 0%, 8% { transform: scaleX(1); animation-timing-function: ease-in; } 17% { transform: scaleX(0); } 37% { transform: scaleX(0); animation-timing-function: ease-out; } 46%, 100% { transform: scaleX(1); } }
@keyframes fx-pk-cback { 0%, 17% { transform: scaleX(0); animation-timing-function: ease-out; } 27% { transform: scaleX(1); animation-timing-function: ease-in; } 37%, 100% { transform: scaleX(0); } }
.pk-spark.k0 { animation: fx-pk-s0 var(--d) ease-out infinite paused; }
@keyframes fx-pk-s0 { 0%, 46% { transform: scale(0) rotate(0); opacity: 0; } 52% { transform: scale(1.2) rotate(45deg); opacity: 1; } 61% { transform: scale(0) rotate(90deg); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
.pk-spark.k1 { animation: fx-pk-s1 var(--d) ease-out infinite paused; }
@keyframes fx-pk-s1 { 0%, 53% { transform: scale(0) rotate(0); opacity: 0; } 59% { transform: scale(1.2) rotate(45deg); opacity: 1; } 68% { transform: scale(0) rotate(90deg); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
.pk-spark.k2 { animation: fx-pk-s2 var(--d) ease-out infinite paused; }
@keyframes fx-pk-s2 { 0%, 60% { transform: scale(0) rotate(0); opacity: 0; } 66% { transform: scale(1.2) rotate(45deg); opacity: 1; } 75% { transform: scale(0) rotate(90deg); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
.pk-spark.k3 { animation: fx-pk-s3 var(--d) ease-out infinite paused; }
@keyframes fx-pk-s3 { 0%, 67% { transform: scale(0) rotate(0); opacity: 0; } 73% { transform: scale(1.2) rotate(45deg); opacity: 1; } 82% { transform: scale(0) rotate(90deg); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
.pk-spark.k4 { animation: fx-pk-s4 var(--d) ease-out infinite paused; }
@keyframes fx-pk-s4 { 0%, 74% { transform: scale(0) rotate(0); opacity: 0; } 80% { transform: scale(1.2) rotate(45deg); opacity: 1; } 89% { transform: scale(0) rotate(90deg); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }

/* ---------- Plinko: the big ball pops away, a small one drops through the pegs (each lights as it is hit) into the middle slot, then a new ball pops in ---------- */
.fx-plinko { --d: 5s; }
.pk-big { transform-origin: 239px 98px; animation: fx-pk-big var(--d) ease-in-out infinite paused; }
.pk-bx { animation: fx-pk-bx var(--d) linear infinite paused; } .pk-by { animation: fx-pk-by var(--d) linear infinite paused; }
.pk-ball { transform-box: fill-box; transform-origin: center bottom; opacity: 0; animation: fx-pk-ball var(--d) ease-in-out infinite paused; }
.pk-peg { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.pk-peg.a { animation: fx-pk-pa var(--d) ease-out infinite paused; } .pk-peg.b { animation: fx-pk-pb var(--d) ease-out infinite paused; } .pk-peg.c { animation: fx-pk-pc var(--d) ease-out infinite paused; } .pk-peg.d { animation: fx-pk-pd var(--d) ease-out infinite paused; }
.gcard-art .pk-slot { transform-origin: 240px 392px; transform: scale(0); opacity: 0; animation: fx-pk-slot var(--d) ease-out infinite paused; }
@keyframes fx-pk-big { 0%, 3% { transform: scale(1); opacity: 1; } 6% { transform: scale(1.14); opacity: 1; } 10% { transform: scale(0); opacity: 0; } 88% { transform: scale(0); opacity: 0; } 94% { transform: scale(1.18); opacity: 1; } 98% { transform: scale(.96); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fx-pk-bx { 0%, 10% { transform: translateX(0); } 22% { transform: translateX(-14px); } 33% { transform: translateX(16px); } 44% { transform: translateX(-16px); } 55% { transform: translateX(15px); } 70%, 100% { transform: translateX(0); } }
@keyframes fx-pk-by { 0%, 10% { transform: translateY(0); animation-timing-function: ease-in; } 22% { transform: translateY(47px); animation-timing-function: ease-out; } 25.5% { transform: translateY(33px); animation-timing-function: ease-in; } 33% { transform: translateY(101px); animation-timing-function: ease-out; } 36.5% { transform: translateY(87px); animation-timing-function: ease-in; } 44% { transform: translateY(155px); animation-timing-function: ease-out; } 47.5% { transform: translateY(141px); animation-timing-function: ease-in; } 55% { transform: translateY(206px); animation-timing-function: ease-out; } 58.5% { transform: translateY(192px); animation-timing-function: ease-in; } 70%, 79.5% { transform: translateY(287px); } 100% { transform: translateY(0); } }
@keyframes fx-pk-ball { 0%, 9.9% { transform: scale(1); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 69.9% { transform: scale(1); opacity: 1; } 70.6% { transform: scale(1.35, .65); opacity: 1; } 74.5% { transform: scale(1); opacity: 1; } 77.5% { transform: scale(1); opacity: 1; } 79.5%, 100% { transform: scale(.3); opacity: 0; } }
@keyframes fx-pk-pa { 0%, 21.5% { transform: scale(0); opacity: 0; } 22.5% { transform: scale(.9); opacity: 1; } 27% { transform: scale(1.06); opacity: 1; } 32% { transform: scale(.9); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
@keyframes fx-pk-pb { 0%, 32.5% { transform: scale(0); opacity: 0; } 33.5% { transform: scale(.9); opacity: 1; } 38% { transform: scale(1.06); opacity: 1; } 43% { transform: scale(.9); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
@keyframes fx-pk-pc { 0%, 43.5% { transform: scale(0); opacity: 0; } 44.5% { transform: scale(.9); opacity: 1; } 49% { transform: scale(1.06); opacity: 1; } 54% { transform: scale(.9); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
@keyframes fx-pk-pd { 0%, 54.5% { transform: scale(0); opacity: 0; } 55.5% { transform: scale(.9); opacity: 1; } 60% { transform: scale(1.06); opacity: 1; } 65% { transform: scale(.9); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
@keyframes fx-pk-slot { 0%, 70% { transform: scale(0); opacity: 0; } 72% { transform: scale(.6); opacity: 1; } 77% { transform: scale(1.15); opacity: 1; } 86%, 100% { transform: scale(1.3); opacity: 0; } }

/* ---------- Keno: the numbers are drawn, one tile after another pops and lights up, and at the end the three picked ones go off together ---------- */
.fx-keno { --d: 4.8s; }
.k-all { animation: fx-tick var(--d) linear infinite paused; }
.k-lit { opacity: 0; } .k-tile.t9 .k-lit { fill: #F5623F; }
.k-ring { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: fx-k-ring var(--d) cubic-bezier(.1, .7, .3, 1) infinite paused; }
@keyframes fx-tick { from, to { opacity: 1; } }
@keyframes fx-k-ring { 0%, 66% { transform: scale(0); opacity: 0; } 67% { transform: scale(.5); opacity: .95; } 84%, 100% { transform: scale(1.7); opacity: 0; } }
.k-tile.t1 { animation: fx-k-t1 var(--d) ease-in-out infinite paused; } .k-tile.t1 .k-lit { animation: fx-k-l1 var(--d) ease-out infinite paused; }
@keyframes fx-k-t1 { 0%, 6% { transform: scale(1); } 9% { transform: scale(1.34); } 12% { transform: scale(.97); } 14%, 100% { transform: scale(1); } }
@keyframes fx-k-l1 { 0%, 6% { opacity: 0; } 8% { opacity: .9; } 10% { opacity: .5; } 15%, 100% { opacity: 0; } }
.k-tile.t4 { animation: fx-k-t4 var(--d) ease-in-out infinite paused; } .k-tile.t4 .k-lit { animation: fx-k-l4 var(--d) ease-out infinite paused; }
@keyframes fx-k-t4 { 0%, 14% { transform: scale(1); } 17% { transform: scale(1.34); } 20% { transform: scale(.97); } 22%, 100% { transform: scale(1); } }
@keyframes fx-k-l4 { 0%, 14% { opacity: 0; } 16% { opacity: .9; } 18% { opacity: .5; } 23%, 100% { opacity: 0; } }
.k-tile.t10 { animation: fx-k-t10 var(--d) ease-in-out infinite paused; } .k-tile.t10 .k-lit { animation: fx-k-l10 var(--d) ease-out infinite paused; }
@keyframes fx-k-t10 { 0%, 22% { transform: scale(1); } 25% { transform: scale(1.34); } 28% { transform: scale(.97); } 30%, 100% { transform: scale(1); } }
@keyframes fx-k-l10 { 0%, 22% { opacity: 0; } 24% { opacity: .9; } 26% { opacity: .5; } 31%, 100% { opacity: 0; } }
.k-tile.t7 { animation: fx-k-t7 var(--d) ease-in-out infinite paused; } .k-tile.t7 .k-lit { animation: fx-k-l7 var(--d) ease-out infinite paused; }
@keyframes fx-k-t7 { 0%, 30% { transform: scale(1); } 33% { transform: scale(1.34); } 36% { transform: scale(.97); } 38%, 100% { transform: scale(1); } }
@keyframes fx-k-l7 { 0%, 30% { opacity: 0; } 32% { opacity: .9; } 34% { opacity: .5; } 39%, 100% { opacity: 0; } }
.k-tile.t8 { animation: fx-k-t8 var(--d) ease-in-out infinite paused; } .k-tile.t8 .k-lit { animation: fx-k-l8 var(--d) ease-out infinite paused; }
@keyframes fx-k-t8 { 0%, 38% { transform: scale(1); } 41% { transform: scale(1.34); } 44% { transform: scale(.97); } 46%, 100% { transform: scale(1); } }
@keyframes fx-k-l8 { 0%, 38% { opacity: 0; } 40% { opacity: .9; } 42% { opacity: .5; } 47%, 100% { opacity: 0; } }
.k-tile.t3 { animation: fx-k-t3 var(--d) ease-in-out infinite paused; } .k-tile.t3 .k-lit { animation: fx-k-l3 var(--d) ease-out infinite paused; }
@keyframes fx-k-t3 { 0%, 46% { transform: scale(1); } 49% { transform: scale(1.34); } 52% { transform: scale(.97); } 54%, 100% { transform: scale(1); } }
@keyframes fx-k-l3 { 0%, 46% { opacity: 0; } 48% { opacity: .9; } 50% { opacity: .5; } 55%, 100% { opacity: 0; } }
.k-tile.t5 { animation: fx-k-t5 var(--d) ease-in-out infinite paused; } .k-tile.t5 .k-lit { animation: fx-k-l5 var(--d) ease-out infinite paused; }
@keyframes fx-k-t5 { 0%, 54% { transform: scale(1); } 57% { transform: scale(1.34); } 60% { transform: scale(.97); } 62%, 100% { transform: scale(1); } }
@keyframes fx-k-l5 { 0%, 54% { opacity: 0; } 56% { opacity: .9; } 58% { opacity: .5; } 63%, 100% { opacity: 0; } }
.k-tile.t2 { animation: fx-k-t2 var(--d) ease-in-out infinite paused; } .k-tile.t2 .k-lit { animation: fx-k-l2 var(--d) ease-out infinite paused; }
@keyframes fx-k-t2 { 0%, 66% { transform: scale(1); } 69% { transform: scale(1.3); } 72% { transform: scale(.97); } 74%, 100% { transform: scale(1); } }
@keyframes fx-k-l2 { 0%, 66% { opacity: 0; } 68% { opacity: .9; } 72% { opacity: .9; } 82%, 100% { opacity: 0; } }
.k-tile.t6 { animation: fx-k-t6 var(--d) ease-in-out infinite paused; } .k-tile.t6 .k-lit { animation: fx-k-l6 var(--d) ease-out infinite paused; }
@keyframes fx-k-t6 { 0%, 66% { transform: scale(1); } 69% { transform: scale(1.3); } 72% { transform: scale(.97); } 74%, 100% { transform: scale(1); } }
@keyframes fx-k-l6 { 0%, 66% { opacity: 0; } 68% { opacity: .9; } 72% { opacity: .9; } 82%, 100% { opacity: 0; } }
.k-tile.t9 { animation: fx-k-t9 var(--d) ease-in-out infinite paused; } .k-tile.t9 .k-lit { animation: fx-k-l9 var(--d) ease-out infinite paused; }
@keyframes fx-k-t9 { 0%, 66% { transform: scale(1); } 69% { transform: scale(1.3); } 72% { transform: scale(.97); } 74%, 100% { transform: scale(1); } }
@keyframes fx-k-l9 { 0%, 66% { opacity: 0; } 68% { opacity: .9; } 72% { opacity: .9; } 82%, 100% { opacity: 0; } }

/* ---------- Tic-Tac-Toe: the board empties and a game is played, each mark pops in, then a line is struck through the three X's and fades ---------- */
.fx-tictactoe { --d: 5.2s; }
.t-mark { transform-box: view-box; }
.t-strike { opacity: 0; animation: fx-t-strike var(--d) linear infinite paused; }
.t-strike path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-t-draw var(--d) ease-in-out infinite paused; }
@keyframes fx-t-strike { 0%, 61% { opacity: 0; } 62% { opacity: 1; } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes fx-t-draw { 0%, 62% { stroke-dashoffset: 1; } 74%, 100% { stroke-dashoffset: 0; } }
.t-mark.x4 { transform-origin: 239px 258px; animation: fx-t-x4 var(--d) ease-out infinite paused; }
@keyframes fx-t-x4 { 0%, 3% { transform: scale(1); } 8% { transform: scale(0); } 14% { transform: scale(0); } 17.5% { transform: scale(1.25); } 20%, 100% { transform: scale(1); } }
.t-mark.o3 { transform-origin: 115px 257px; animation: fx-t-o3 var(--d) ease-out infinite paused; }
@keyframes fx-t-o3 { 0%, 3% { transform: scale(1); } 8% { transform: scale(0); } 24% { transform: scale(0); } 27.5% { transform: scale(1.25); } 30%, 100% { transform: scale(1); } }
.t-mark.x1 { transform-origin: 115px 136px; animation: fx-t-x1 var(--d) ease-out infinite paused; }
@keyframes fx-t-x1 { 0%, 3% { transform: scale(1); } 8% { transform: scale(0); } 34% { transform: scale(0); } 37.5% { transform: scale(1.25); } 40%, 100% { transform: scale(1); } }
.t-mark.o2 { transform-origin: 365px 136px; animation: fx-t-o2 var(--d) ease-out infinite paused; }
@keyframes fx-t-o2 { 0%, 3% { transform: scale(1); } 8% { transform: scale(0); } 44% { transform: scale(0); } 47.5% { transform: scale(1.25); } 50%, 100% { transform: scale(1); } }
.t-mark.x5 { transform-origin: 365px 376px; animation: fx-t-x5 var(--d) ease-out infinite paused; }
@keyframes fx-t-x5 { 0%, 3% { transform: scale(1); } 8% { transform: scale(0); } 54% { transform: scale(0); } 57.5% { transform: scale(1.25); } 60%, 100% { transform: scale(1); } }

/* ---------- Tower: a little climber hops up floor by floor, the flag waves harder at the top, and confetti flies ---------- */
.fx-tower { --d: 4.4s; }
.tw-flag { transform-origin: 249px 70px; animation: fx-tw-wave 1.1s ease-in-out infinite alternate paused; }
.tw-gust { transform-origin: 249px 70px; animation: fx-tw-gust var(--d) ease-in-out infinite paused; }
.tw-hero { opacity: 0; animation: fx-tw-hero var(--d) linear infinite paused; }
.tw-hop { transform-origin: 240px 420px; animation: fx-tw-hop var(--d) linear infinite paused; }
.tw-bit { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: fx-tw-bit var(--d) cubic-bezier(.2, .7, .4, 1) infinite paused; }
@keyframes fx-tw-wave { from { transform: skewY(0) rotate(0) scaleX(1); } to { transform: skewY(-9deg) rotate(-3deg) scaleX(.93); } }
@keyframes fx-tw-gust { 0%, 48% { transform: rotate(0) scale(1); } 54% { transform: rotate(-10deg) scale(1.08); } 70% { transform: rotate(-6deg) scale(1.04); } 80%, 100% { transform: rotate(0) scale(1); } }
@keyframes fx-tw-hero { 0%, 5% { opacity: 0; } 8%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes fx-tw-hop { 0%, 5% { transform: translateY(0) scale(0); animation-timing-function: ease-out; } 8% { transform: translateY(0) scale(1.15); } 10% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0px) scale(.92, 1.1); animation-timing-function: ease-out; } 16.4% { transform: translateY(-72px) scale(1); animation-timing-function: ease-in; } 20% { transform: translateY(-52px) scale(1.12, .88); } 21.5% { transform: translateY(-52px) scale(1); } 22% { transform: translateY(-52px) scale(.92, 1.1); animation-timing-function: ease-out; } 26.4% { transform: translateY(-124px) scale(1); animation-timing-function: ease-in; } 30% { transform: translateY(-104px) scale(1.12, .88); } 31.5% { transform: translateY(-104px) scale(1); } 32% { transform: translateY(-104px) scale(.92, 1.1); animation-timing-function: ease-out; } 36.4% { transform: translateY(-176px) scale(1); animation-timing-function: ease-in; } 40% { transform: translateY(-156px) scale(1.12, .88); } 41.5% { transform: translateY(-156px) scale(1); } 42% { transform: translateY(-156px) scale(.92, 1.1); animation-timing-function: ease-out; } 46.4% { transform: translateY(-228px) scale(1); animation-timing-function: ease-in; } 50% { transform: translateY(-208px) scale(1.12, .88); } 51.5% { transform: translateY(-208px) scale(1); } 54% { transform: translateY(-236px) scale(1); animation-timing-function: ease-in; } 58% { transform: translateY(-208px) scale(1.12, .88); } 61% { transform: translateY(-208px) scale(1); animation-timing-function: ease-out; } 64% { transform: translateY(-232px) scale(1); animation-timing-function: ease-in; } 68% { transform: translateY(-208px) scale(1.1, .9); } 71% { transform: translateY(-208px) scale(1); } 80% { transform: translateY(-208px) scale(1); } 84%, 100% { transform: translateY(-208px) scale(0); } }
@keyframes fx-tw-bit { 0%, 51% { transform: translate(0, 0) rotate(0) scale(0); opacity: 0; } 52.5% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 1; } 90% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(calc(var(--r) * 2)) scale(.8); opacity: 0; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) scale(.8); opacity: 0; } }