/* ═══════════════════════════════════════════════════════════════
   CATEGORY FIGURE ANIMATIONS
   Sportsbook (I1 Crossing Kick · 1500ms) + Slot (SL-D1 · 980ms)

   Colors are controlled by CSS custom properties set inline
   (per-category) via renderCategoryFigure():
     --fig-idle   default #cfd3da  — silver/off state color
     --fig-active default #f0c85a  — accent/hover color
     --fx-spark   default = --fig-active — spark burst spike color
     --fx-glow    default = --fig-active — radial glow halo color

   Effects can be toggled per-category via data attributes:
     data-effect-spark="0"  suppresses the burst ring (::before)
     data-effect-glow="0"   suppresses the radial glow (::after)
     data-effect-shake="0"  suppresses frame shake (slot)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap {
    --fig-idle: #cfd3da;
    --fig-active: #f0c85a;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--radius-xl, 14px);
    background: linear-gradient(135deg, var(--surface, #1a1f29), var(--surface2, #242a36));
    border: 1px solid var(--border, #2a3140);
    overflow: visible;
    container-type: size;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
}

.m-cat-banner .cat-figure-wrap {
    border-radius: var(--m-radius, 12px);
}

.cat-banner-card:hover .cat-figure-wrap {
    transform: scale(1.06);
    box-shadow:
        0 16px 42px -10px rgba(0,0,0,.65),
        0 0 32px color-mix(in oklch, var(--fig-active) 25%, transparent),
        0 0 0 1px rgba(255,255,255,.08);
    border-color: color-mix(in oklch, var(--fig-active) 35%, var(--border, #2a3140));
}

/* Suppress hologram sweep when SVG figure is present */
.cat-banner-card:has(.cat-figure-wrap)::before {
    animation: none !important;
    opacity: 0 !important;
}

/* ── SVG element inside figure container ── */
.cat-figure-wrap .cat-figure-svg {
    position: absolute;
    inset: 12%; width: 76%; height: 76%;
    fill: currentColor;
    color: var(--fig-idle);
    transform-origin: center;
    transition: color .25s ease;
    overflow: visible;
    z-index: 3;
}

.cat-banner-card:hover .cat-figure-wrap .cat-figure-svg,
.m-cat-banner:active .cat-figure-wrap .cat-figure-svg {
    color: var(--fig-active);
}

/* Nameplate N3: accent gradient on hover when SVG figure present */
.cat-banner-card:has(.cat-figure-wrap):hover .cat-banner-name {
    background: linear-gradient(var(--fig-active), color-mix(in oklch, var(--fig-active) 78%, #000));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ═══════════════════════════════════════════════════════════════
   SPORTSBOOK — I1 Crossing Kick (1500ms)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="sportsbook"] .trail-ghost {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    fill: var(--fig-active);
}

.cat-figure-wrap[data-figure-type="sportsbook"] .ball-main {
    transform-box: fill-box;
    transform-origin: center;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="sportsbook"] .ball-main,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="sportsbook"] .ball-main {
    animation:
        sb-cross-motion 1500ms cubic-bezier(.35,.05,.25,1) 1 forwards,
        sb-cross-op-main 1500ms linear 1 forwards,
        sb-main-aura 1500ms ease-out 1 forwards;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="sportsbook"] .trail-ghost,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="sportsbook"] .trail-ghost {
    animation:
        sb-cross-motion 1500ms cubic-bezier(.35,.05,.25,1) 1 forwards var(--delay, 0ms),
        sb-cross-op-ghost 1500ms linear 1 forwards var(--delay, 0ms);
}

@keyframes sb-cross-motion {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    8%   { transform: translate(0,0) scale(.4) rotate(0deg); }
    9%   { transform: translate(95%,-95%) scale(.05) rotate(0deg); }
    18%  { transform: translate(90%,-90%) scale(.05) rotate(0deg); }
    22%  { transform: translate(85%,-85%) scale(.25) rotate(45deg); }
    50%  { transform: translate(-85%,85%) scale(.7) rotate(220deg); }
    58%  { transform: translate(-80%,80%) scale(.8) rotate(280deg); }
    85%  { transform: translate(-6%,4%) scale(1.14) rotate(520deg); }
    100% { transform: translate(0,0) scale(1) rotate(540deg); }
}

@keyframes sb-cross-op-main {
    0%,8%    { opacity: 1; }
    9%,18%   { opacity: 0; }
    22%,100% { opacity: 1; }
}

@keyframes sb-cross-op-ghost {
    0%,18%   { opacity: 0; }
    22%      { opacity: var(--op, .4); }
    60%      { opacity: var(--op, .4); }
    80%,100% { opacity: 0; }
}

@keyframes sb-main-aura {
    0%,20% { filter: none; }
    35%    { filter: drop-shadow(0 0 4px color-mix(in oklch, var(--fig-active) 55%, transparent)); }
    75%    { filter: drop-shadow(0 0 6px color-mix(in oklch, var(--fig-active) 55%, transparent)); }
    88%    { filter: drop-shadow(0 0 16px var(--fig-active)) drop-shadow(0 0 28px color-mix(in oklch, var(--fig-active) 55%, transparent)); }
    100%   { filter: drop-shadow(0 0 6px color-mix(in oklch, var(--fig-active) 25%, transparent)); }
}

/* Sportsbook — landing spark (::before) */
.cat-figure-wrap[data-figure-type="sportsbook"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="sportsbook"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="sportsbook"]::before {
    animation: sb-spark 1500ms ease-out 1 forwards;
}

@keyframes sb-spark {
    0%,76% { transform: scale(0); opacity: 0; }
    84%    { transform: scale(1.2) rotate(20deg); opacity: 1; }
    100%   { transform: scale(2) rotate(40deg); opacity: 0; }
}

/* Sportsbook — landing glow (::after) */
.cat-figure-wrap[data-figure-type="sportsbook"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="sportsbook"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="sportsbook"]::after {
    animation: sb-glow 1500ms ease-out 1 forwards;
}

@keyframes sb-glow {
    0%,68% { opacity: 0; transform: scale(.3); }
    82%    { opacity: 1; transform: scale(1.15); }
    100%   { opacity: 0; transform: scale(1.45); }
}


/* ═══════════════════════════════════════════════════════════════
   SLOT — SL-D1 Balanced (980ms)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="slot"] .cat-figure-svg {
    color: color-mix(in oklch, var(--fig-idle) 90%, transparent);
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"] .cat-figure-svg,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"] .cat-figure-svg {
    color: color-mix(in oklch, var(--fig-active) 70%, var(--fig-idle));
    animation: sl-frame-shake 980ms ease-out 1 forwards;
    transform-origin: center;
}

@keyframes sl-frame-shake {
    0%,3%    { transform: translateX(0); }
    6%       { transform: translateX(-3px); }
    9%       { transform: translateX(3px); }
    12%      { transform: translateX(-2px); }
    15%      { transform: translateX(2px); }
    18%,100% { transform: translateX(0); }
}

.slot-foreign-wrap {
    container-type: size;
    width: 100%; height: 100%;
    overflow: hidden;
    position: relative;
}

.slot-foreign-strip {
    position: absolute;
    top: 0; left: 0; width: 100%;
    display: flex; flex-direction: column;
    color: var(--fig-idle);
    filter: blur(0);
    transition: none;
    will-change: transform, filter, color;
}

.slot-foreign-digit {
    flex: 0 0 auto;
    width: 100%; height: 100cqh;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; color: inherit;
    font-family: "Arial Black", "Helvetica Black", sans-serif;
    font-weight: 900; font-size: 72cqh;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.slot-foreign-digit > span {
    display: inline-block;
    line-height: 1;
    transform: skewX(-10deg);
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="1"],
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="1"] {
    animation: sld1-strip-1 980ms cubic-bezier(.25,.5,.3,1) 1 forwards;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="2"],
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="2"] {
    animation: sld1-strip-2 980ms cubic-bezier(.25,.5,.3,1) 1 forwards;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="3"],
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"] .slot-foreign-strip[data-reel="3"] {
    animation: sld1-strip-3 980ms cubic-bezier(.25,.5,.3,1) 1 forwards;
}

@keyframes sld1-strip-1 {
    0%,3% { transform: translateY(0);    filter: blur(0);   color: var(--fig-idle); }
    5%    { transform: translateY(-10%); filter: blur(4px); color: var(--fig-idle); }
    45%   { transform: translateY(-88%); filter: blur(6px); color: var(--fig-idle); }
    50%   { transform: translateY(-90%); filter: blur(2px); color: var(--fig-idle); }
    52%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    57%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    85%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    90%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    95%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    100%  { transform: translateY(-90%); color: var(--fig-active); }
}

@keyframes sld1-strip-2 {
    0%,3% { transform: translateY(0);    filter: blur(0);   color: var(--fig-idle); }
    5%    { transform: translateY(-10%); filter: blur(4px); color: var(--fig-idle); }
    58%   { transform: translateY(-88%); filter: blur(6px); color: var(--fig-idle); }
    63%   { transform: translateY(-90%); filter: blur(2px); color: var(--fig-idle); }
    65%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    70%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    85%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    90%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    95%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    100%  { transform: translateY(-90%); color: var(--fig-active); }
}

@keyframes sld1-strip-3 {
    0%,3% { transform: translateY(0);    filter: blur(0);   color: var(--fig-idle); }
    5%    { transform: translateY(-10%); filter: blur(4px); color: var(--fig-idle); }
    72%   { transform: translateY(-88%); filter: blur(6px); color: var(--fig-idle); }
    76%   { transform: translateY(-90%); filter: blur(2px); color: var(--fig-idle); }
    78%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    83%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    88%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    92%   { transform: translateY(-90%); filter: drop-shadow(0 0 10px var(--fig-active)); color: var(--fig-active); }
    96%   { transform: translateY(-90%); filter: none; color: var(--fig-active); }
    100%  { transform: translateY(-90%); color: var(--fig-active); }
}

/* Slot — landing spark (::before) */
.cat-figure-wrap[data-figure-type="slot"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"]::before {
    animation: sl-spark 980ms ease-out 1 forwards;
}

@keyframes sl-spark {
    0%,82% { transform: scale(0); opacity: 0; }
    90%    { transform: scale(1.3) rotate(20deg); opacity: 1; }
    100%   { transform: scale(2.2) rotate(40deg); opacity: 0; }
}

/* Slot — landing glow (::after) */
.cat-figure-wrap[data-figure-type="slot"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="slot"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="slot"]::after {
    animation: sl-glow 980ms ease-out 1 forwards;
}

@keyframes sl-glow {
    0%,75% { opacity: 0; transform: scale(.3); }
    87%    { opacity: 1; transform: scale(1.25); }
    100%   { opacity: 0; transform: scale(1.55); }
}


/* ═══════════════════════════════════════════════════════════════
   LIVE CASINO — Card Reveal C v2 (1500ms)
   9♥ + A♠ flip dengan fan tilt + chip drop, suit pip pulse, felt glow.
   Two-layer transforms: outer .lc-card-tilt-* untuk slide+rotateZ+scale;
   inner .lc-card-flip-* untuk rotateY murni — compose tanpa konflik.
   Base state = settled (matching 100% keyframe) supaya tidak ada snap saat hover berakhir.
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-left,
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-right,
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-l,
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-r,
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-chip,
.cat-figure-wrap[data-figure-type="live_casino"] .lc-pip-pulse {
    transform-box: fill-box;
}

.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-left {
    transform-origin: 50% 50%;
    transform: translate(-3%, 0) rotate(-7deg) scale(1.04);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-right {
    transform-origin: 50% 50%;
    transform: translate(3%, 0) rotate(7deg) scale(1.04);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-l {
    transform-origin: 100% 50%;
}
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-r {
    transform-origin: 0% 50%;
}
.cat-figure-wrap[data-figure-type="live_casino"] .lc-pip-pulse {
    transform-origin: 50% 50%;
}
.cat-figure-wrap[data-figure-type="live_casino"] .lc-card-chip {
    transform-origin: 50% 50%;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-left,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-left {
    animation: lc-tilt-left 1500ms cubic-bezier(.3,0,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-right,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-tilt-right {
    animation: lc-tilt-right 1500ms cubic-bezier(.3,0,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-l,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-l {
    animation: lc-flip-l 1500ms cubic-bezier(.34,.04,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-r,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-flip-r {
    animation: lc-flip-r 1500ms cubic-bezier(.34,.04,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-pip-pulse,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-pip-pulse {
    animation: lc-pip-pulse 1500ms ease-out 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-chip,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-card-chip {
    animation: lc-chip-drop 1500ms cubic-bezier(.32,1.4,.52,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"] .lc-felt,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"] .lc-felt {
    animation: lc-felt-glow 1500ms ease-out 1 forwards;
}

/* Live Casino — landing spark (::before) */
.cat-figure-wrap[data-figure-type="live_casino"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"]::before {
    animation: lc-spark 1500ms ease-out 1 forwards;
}

/* Live Casino — landing glow (::after) */
.cat-figure-wrap[data-figure-type="live_casino"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="live_casino"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="live_casino"]::after {
    animation: lc-glow 1500ms ease-out 1 forwards;
}

@keyframes lc-tilt-left {
    0%        { transform: translate(-30%, 8%) rotate(-22deg) scale(.55); opacity: 0; }
    10%       { opacity: 1; }
    30%       { transform: translate(0, 0) rotate(0deg) scale(1); }
    60%       { transform: translate(0, -3%) rotate(0deg) scale(1.04); }
    74%, 100% { transform: translate(-3%, 0) rotate(-7deg) scale(1.04); }
}

@keyframes lc-tilt-right {
    0%        { transform: translate(30%, 8%) rotate(22deg) scale(.55); opacity: 0; }
    10%       { opacity: 1; }
    30%       { transform: translate(0, 0) rotate(0deg) scale(1); }
    60%       { transform: translate(0, -3%) rotate(0deg) scale(1.04); }
    74%, 100% { transform: translate(3%, 0) rotate(7deg) scale(1.04); }
}

@keyframes lc-flip-l {
    0%, 20%   { transform: rotateY(95deg); }
    48%       { transform: rotateY(-12deg); }
    58%, 100% { transform: rotateY(0deg); }
}

@keyframes lc-flip-r {
    0%, 26%   { transform: rotateY(-95deg); }
    54%       { transform: rotateY(12deg); }
    64%, 100% { transform: rotateY(0deg); }
}

@keyframes lc-pip-pulse {
    0%, 60%   { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    68%       { transform: scale(1.22); filter: drop-shadow(0 0 8px var(--fig-active)); }
    76%       { transform: scale(.94); filter: drop-shadow(0 0 4px var(--fig-active)); }
    84%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}

@keyframes lc-chip-drop {
    0%, 68% { transform: translateY(-110%) scale(.4) rotate(-220deg); opacity: 0; }
    76%     { transform: translateY(-30%) scale(.85) rotate(-60deg); opacity: 1; }
    86%     { transform: translateY(0) scale(1.16) rotate(0deg); filter: drop-shadow(0 0 14px var(--fig-active)); }
    92%     { transform: translateY(0) scale(.92) rotate(6deg); }
    100%    { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 0 8px var(--fig-active)); }
}

@keyframes lc-felt-glow {
    0%, 30% { opacity: .2; }
    60%     { opacity: .28; }
    85%     { opacity: .35; }
    100%    { opacity: .2; }
}

@keyframes lc-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    86%     { transform: scale(1.25) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}

@keyframes lc-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   SHOOTER — Scope Zoom (1500ms)
   Sniper scope feel: zoom 3→1 dengan blur, circular vignette (fat-stroke ring),
   12 mil-dots, "320M" rangefinder text, red lock crosshair + ring expand,
   subtle breathing sway 70-100%.
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="shooter"] .scope-cross,
.cat-figure-wrap[data-figure-type="shooter"] .scope-vignette,
.cat-figure-wrap[data-figure-type="shooter"] .scope-dot,
.cat-figure-wrap[data-figure-type="shooter"] .scope-ring,
.cat-figure-wrap[data-figure-type="shooter"] .scope-rangefinder {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.cat-figure-wrap[data-figure-type="shooter"] .scope-vignette,
.cat-figure-wrap[data-figure-type="shooter"] .scope-rangefinder,
.cat-figure-wrap[data-figure-type="shooter"] .scope-dot,
.cat-figure-wrap[data-figure-type="shooter"] .scope-ring {
    opacity: 0;
}

.scope-vignette {
    display: none !important;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"] .scope-cross,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"] .scope-cross {
    animation: sh-zoom 1500ms cubic-bezier(.16,.7,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"] .scope-vignette,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"] .scope-vignette {
    animation: sh-vignette 1500ms ease-out 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"] .scope-rangefinder,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"] .scope-rangefinder {
    animation: sh-range 1500ms ease-out 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"] .scope-dot,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"] .scope-dot {
    animation: sh-dot 1500ms ease-out 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"] .scope-ring,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"] .scope-ring {
    animation: sh-ring 1500ms ease-out 1 forwards;
}

/* Shooter — landing spark (::before) */
.cat-figure-wrap[data-figure-type="shooter"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"]::before {
    animation: sh-spark 1500ms ease-out 1 forwards;
}

/* Shooter — landing glow (::after) */
.cat-figure-wrap[data-figure-type="shooter"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="shooter"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="shooter"]::after {
    animation: sh-glow 1500ms ease-out 1 forwards;
}

@keyframes sh-zoom {
    0%   { transform: scale(3) rotate(5deg); filter: blur(4px); opacity: 0; }
    12%  { opacity: 1; }
    52%  { transform: scale(1.05) rotate(0deg); filter: blur(0); }
    62%  { transform: scale(.97); }
    72%  { transform: translate(.8px, -.6px) scale(1); }
    82%  { transform: translate(-.8px, .8px) scale(1); }
    92%  { transform: translate(.4px, 0) scale(1); }
    100% { transform: translate(0, 0) scale(1); filter: blur(0); }
}
@keyframes sh-vignette {
    0%, 28%  { opacity: 0; }
    60%      { opacity: 1; }
    100%     { opacity: 1; }
}
@keyframes sh-range {
    0%, 50%  { opacity: 0; transform: translateY(2px); }
    62%      { opacity: .9; transform: translateY(0); }
    100%     { opacity: .9; transform: translateY(0); }
}
@keyframes sh-dot {
    0%, 60%  { opacity: 0; transform: scale(0); filter: drop-shadow(0 0 0 transparent); }
    72%      { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 6px #ef4444); }
    82%      { transform: scale(.85); }
    100%     { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px #ef4444); }
}
@keyframes sh-ring {
    0%, 70%  { opacity: 0; transform: scale(.4); }
    82%      { opacity: 1; transform: scale(1); stroke-width: 3; }
    100%     { opacity: 0; transform: scale(2.4); stroke-width: 1; }
}
@keyframes sh-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    86%     { transform: scale(1.25) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}
@keyframes sh-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   LOBBY — Marquee Showcase (1400ms)
   Cinema marquee frame, 11 square game tiles scrolling right→left,
   16 chasing border lights stagger 55ms, center tile gold rotating
   dashed highlight.
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-strip,
.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-light,
.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-center-hl {
    transform-box: fill-box;
}
.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-strip { transform-origin: 50% 50%; }
.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-light {
    fill: currentColor;
    opacity: .25;
}
.cat-figure-wrap[data-figure-type="lobby"] .lb-mq-center-hl {
    transform-origin: 50% 50%;
    opacity: 0;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-strip,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-strip {
    animation: lb-strip 1400ms cubic-bezier(.18,.6,.18,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-light,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-light {
    animation: lb-light 1400ms ease-in-out 1 forwards;
    animation-delay: calc(var(--idx,0) * 55ms);
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-center-hl,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="lobby"] .lb-mq-center-hl {
    animation: lb-center 1400ms ease-out 1 forwards;
}

/* Lobby — landing spark (::before) */
.cat-figure-wrap[data-figure-type="lobby"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="lobby"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="lobby"]::before {
    animation: lb-spark 1400ms ease-out 1 forwards;
}

/* Lobby — landing glow (::after) */
.cat-figure-wrap[data-figure-type="lobby"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="lobby"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="lobby"]::after {
    animation: lb-glow 1400ms ease-out 1 forwards;
}

@keyframes lb-strip {
    0%   { transform: translateX(40%); opacity: 0; }
    20%  { opacity: 1; }
    72%  { transform: translateX(-3%); }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes lb-light {
    0%, 100% { fill: currentColor; opacity: .25; filter: drop-shadow(0 0 0 transparent); }
    50%      { fill: var(--fig-active); opacity: 1; filter: drop-shadow(0 0 4px var(--fig-active)); }
}
@keyframes lb-center {
    0%, 76%   { opacity: 0; transform: rotate(0deg) scale(.85); }
    86%       { opacity: 1; transform: rotate(180deg) scale(1.08); filter: drop-shadow(0 0 10px var(--fig-active)); }
    100%      { opacity: .9; transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 5px var(--fig-active)); }
}
@keyframes lb-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    86%     { transform: scale(1.25) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}
@keyframes lb-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   ARCADE — Pacman Chase (1500ms)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="arcade"] .arc-pac {
    transform: translate(40px, 128px);
    transform-box: fill-box;
}
.cat-figure-wrap[data-figure-type="arcade"] .arc-pac-top,
.cat-figure-wrap[data-figure-type="arcade"] .arc-pac-bot {
    transform-origin: 0 0;
}
.cat-figure-wrap[data-figure-type="arcade"] .arc-pac-top { transform: rotate(-26deg); }
.cat-figure-wrap[data-figure-type="arcade"] .arc-pac-bot { transform: rotate(26deg); }
.cat-figure-wrap[data-figure-type="arcade"] .arc-ghost {
    transform: translate(-40px, 128px);
    opacity: 0;
}
.cat-figure-wrap[data-figure-type="arcade"] .arc-ghost-bob {
    transform-box: fill-box;
    transform-origin: center;
}
.cat-figure-wrap[data-figure-type="arcade"] .arc-pac-dot {
    transform-box: fill-box;
    transform-origin: center;
}

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-pac,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-pac {
    animation: arc-pac-move 1500ms cubic-bezier(.35,.65,.5,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-top,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-top {
    animation: arc-pac-chomp-top 220ms ease-in-out infinite;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-bot,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-bot {
    animation: arc-pac-chomp-bot 220ms ease-in-out infinite;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-ghost,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-ghost {
    animation: arc-ghost-trail 1500ms cubic-bezier(.35,.65,.5,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-ghost-bob,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-ghost-bob {
    animation: arc-ghost-wobble 320ms ease-in-out infinite;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-dot,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"] .arc-pac-dot {
    animation: arc-pac-eat 260ms ease-out 1 forwards;
    animation-delay: calc(var(--idx, 0) * 220ms + 240ms);
}

@keyframes arc-pac-move {
    0%   { transform: translate(40px, 128px); }
    10%  { transform: translate(58px, 124px); }
    22%  { transform: translate(82px, 132px); }
    34%  { transform: translate(106px, 124px); }
    46%  { transform: translate(130px, 132px); }
    58%  { transform: translate(154px, 124px); }
    70%  { transform: translate(178px, 132px); }
    82%  { transform: translate(200px, 126px); }
    100% { transform: translate(216px, 128px); }
}
@keyframes arc-pac-chomp-top {
    0%, 100% { transform: rotate(-26deg); }
    50%      { transform: rotate(0deg); }
}
@keyframes arc-pac-chomp-bot {
    0%, 100% { transform: rotate(26deg); }
    50%      { transform: rotate(0deg); }
}
@keyframes arc-ghost-trail {
    0%   { transform: translate(-40px, 128px); opacity: 0; }
    16%  { opacity: 1; transform: translate(-20px, 124px); }
    25%  { transform: translate(8px, 132px); opacity: 1; }
    40%  { transform: translate(38px, 124px); }
    55%  { transform: translate(68px, 132px); }
    70%  { transform: translate(98px, 124px); }
    85%  { transform: translate(125px, 130px); }
    100% { transform: translate(146px, 128px); opacity: 1; }
}
@keyframes arc-ghost-wobble {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-2px); }
}
@keyframes arc-pac-eat {
    0%   { opacity: 1; transform: scale(1); fill: currentColor; }
    35%  { opacity: 1; transform: scale(1.7); fill: white; }
    55%  { opacity: 1; transform: scale(1.3); fill: white; }
    100% { opacity: 0; transform: scale(0); fill: white; }
}

/* Arcade — landing spark (::before) */
.cat-figure-wrap[data-figure-type="arcade"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"]::before {
    animation: arc-spark 1500ms ease-out 1 forwards;
}

/* Arcade — landing glow (::after) */
.cat-figure-wrap[data-figure-type="arcade"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="arcade"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="arcade"]::after {
    animation: arc-glow 1500ms ease-out 1 forwards;
}

@keyframes arc-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    84%     { transform: scale(1.2) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}
@keyframes arc-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   TABLE GAME — Royal Flush Reveal (1500ms)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="table_game"] .rf-card,
.cat-figure-wrap[data-figure-type="table_game"] .rf-hand-set {
    transform-origin: center;
    transform-box: fill-box;
}
.cat-figure-wrap[data-figure-type="table_game"] .rf-card-front { opacity: 0; }

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"] .rf-card,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"] .rf-card {
    animation: rf-flip 540ms cubic-bezier(.4,.05,.4,1) 1 forwards;
    animation-delay: calc(var(--idx, 0) * 170ms + 100ms);
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"] .rf-card-back,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"] .rf-card-back {
    animation: rf-back-fade 540ms 1 forwards;
    animation-delay: calc(var(--idx, 0) * 170ms + 100ms);
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"] .rf-card-front,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"] .rf-card-front {
    animation: rf-front-fade 540ms 1 forwards;
    animation-delay: calc(var(--idx, 0) * 170ms + 100ms);
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"] .rf-hand-set,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"] .rf-hand-set {
    animation: rf-hand-flourish 1500ms ease-out 1 forwards;
}

@keyframes rf-flip {
    0%   { transform: scaleX(1) translateY(0); }
    20%  { transform: scaleX(0.55) translateY(-3px); }
    50%  { transform: scaleX(0) translateY(-7px); }
    80%  { transform: scaleX(0.7) translateY(-3px); }
    100% { transform: scaleX(1) translateY(0); }
}
@keyframes rf-back-fade {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes rf-front-fade {
    0%, 49%    { opacity: 0; filter: brightness(1); }
    50%        { opacity: 1; filter: brightness(2.2); }
    62%        { opacity: 1; filter: brightness(1.4); }
    78%, 100%  { opacity: 1; filter: brightness(1); }
}
@keyframes rf-hand-flourish {
    0%, 70% { transform: scale(1); }
    82%     { transform: scale(1.04); }
    92%     { transform: scale(0.99); }
    100%    { transform: scale(1); }
}

/* Table Game — landing spark (::before) */
.cat-figure-wrap[data-figure-type="table_game"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"]::before {
    animation: rf-spark 1500ms ease-out 1 forwards;
}

/* Table Game — landing glow (::after) */
.cat-figure-wrap[data-figure-type="table_game"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="table_game"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="table_game"]::after {
    animation: rf-glow 1500ms ease-out 1 forwards;
}

@keyframes rf-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    84%     { transform: scale(1.2) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}
@keyframes rf-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   OTHER — Mystery Block (1500ms · 8-bit retro)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-figure-type="other"] .myb-block,
.cat-figure-wrap[data-figure-type="other"] .myb-coin,
.cat-figure-wrap[data-figure-type="other"] .myb-flash {
    transform-origin: center;
    transform-box: fill-box;
}
.cat-figure-wrap[data-figure-type="other"] .myb-coin { opacity: 0; }
.cat-figure-wrap[data-figure-type="other"] .myb-flash { opacity: 0; }

.cat-banner-card:hover .cat-figure-wrap[data-figure-type="other"] .myb-block,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="other"] .myb-block {
    animation: myb-bump 1500ms cubic-bezier(.4,0,.2,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="other"] .myb-coin,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="other"] .myb-coin {
    animation: myb-coin-arc 1500ms cubic-bezier(.3,.7,.4,1) 1 forwards;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="other"] .myb-flash,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="other"] .myb-flash {
    animation: myb-flash 1500ms ease-out 1 forwards;
}

@keyframes myb-bump {
    0%   { transform: translate(0,0) scaleY(1) scaleX(1); }
    6%   { transform: translate(0,4px) scaleY(.94) scaleX(1.03); }
    14%  { transform: translate(0,-12px) scaleY(.82) scaleX(1.12); }
    22%  { transform: translate(0,-2px) scaleY(1.06) scaleX(.96); }
    32%  { transform: translate(0,0) scaleY(1) scaleX(1); }
    82%  { transform: translate(0,0) scaleY(1) scaleX(1); }
    86%  { transform: translate(0,1px) scaleY(.97) scaleX(1.02); }
    92%  { transform: translate(0,0) scaleY(1.02) scaleX(.99); }
    100% { transform: translate(0,0) scaleY(1) scaleX(1); }
}
@keyframes myb-coin-arc {
    0%, 12%  { opacity: 0; transform: translate(0,0) scale(0) rotate(0); }
    16%      { opacity: 1; transform: translate(0,-8px) scale(.6) rotate(80deg); }
    26%      { opacity: 1; transform: translate(0,-32px) scale(1) rotate(220deg); }
    40%      { opacity: 1; transform: translate(0,-52px) scale(1) rotate(360deg); }
    52%      { opacity: 1; transform: translate(0,-52px) scale(1) rotate(440deg); }
    68%      { opacity: 1; transform: translate(0,-28px) scale(1) rotate(620deg); }
    82%      { opacity: 1; transform: translate(0,-10px) scale(1) rotate(740deg); }
    86%      { opacity: 1; transform: translate(0,-6px) scale(1.06,.9) rotate(760deg); }
    90%      { opacity: 1; transform: translate(0,-12px) scale(1) rotate(780deg); }
    94%      { opacity: 1; transform: translate(0,-9px) scale(1) rotate(800deg); }
    100%     { opacity: 0; transform: translate(0,-9px) scale(.7) rotate(820deg); }
}
@keyframes myb-flash {
    0%, 12%   { opacity: 0; }
    17%       { opacity: 1; }
    26%       { opacity: 0.4; }
    34%, 100% { opacity: 0; }
}

/* Other — landing spark (::before) */
.cat-figure-wrap[data-figure-type="other"]::before {
    content: '';
    position: absolute; inset: 8%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   var(--fx-spark, var(--fig-active)) 3deg,   transparent 8deg,
        transparent 40deg,  var(--fx-spark, var(--fig-active)) 47deg,  transparent 52deg,
        transparent 85deg,  var(--fx-spark, var(--fig-active)) 92deg,  transparent 97deg,
        transparent 130deg, var(--fx-spark, var(--fig-active)) 137deg, transparent 142deg,
        transparent 175deg, var(--fx-spark, var(--fig-active)) 182deg, transparent 187deg,
        transparent 220deg, var(--fx-spark, var(--fig-active)) 227deg, transparent 232deg,
        transparent 265deg, var(--fx-spark, var(--fig-active)) 272deg, transparent 277deg,
        transparent 310deg, var(--fx-spark, var(--fig-active)) 317deg, transparent 322deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
            mask: radial-gradient(circle, transparent 22%, black 24%, black 52%, transparent 62%);
    transform: scale(0); opacity: 0;
    z-index: 4; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="other"]::before,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="other"]::before {
    animation: myb-spark 1500ms ease-out 1 forwards;
}

/* Other — landing glow (::after) */
.cat-figure-wrap[data-figure-type="other"]::after {
    content: '';
    position: absolute; inset: -5%;
    background: radial-gradient(circle at center,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 55%, transparent) 0%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 25%, transparent) 28%,
        color-mix(in oklch, var(--fx-glow, var(--fig-active)) 10%, transparent) 50%,
        transparent 70%);
    opacity: 0; transform: scale(.4);
    z-index: 1; pointer-events: none;
}
.cat-banner-card:hover .cat-figure-wrap[data-figure-type="other"]::after,
.m-cat-banner:active .cat-figure-wrap[data-figure-type="other"]::after {
    animation: myb-glow 1500ms ease-out 1 forwards;
}

@keyframes myb-spark {
    0%, 76% { transform: scale(0); opacity: 0; }
    84%     { transform: scale(1.2) rotate(20deg); opacity: 1; }
    100%    { transform: scale(2) rotate(40deg); opacity: 0; }
}
@keyframes myb-glow {
    0%, 70% { opacity: 0; transform: scale(.3); }
    87%     { opacity: 1; transform: scale(1.2); }
    100%    { opacity: 0; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════
   EFFECT TOGGLES (admin-configurable per category)
   ═══════════════════════════════════════════════════════════════ */

.cat-figure-wrap[data-effect-spark="0"]::before {
    display: none !important;
}

.cat-figure-wrap[data-effect-glow="0"]::after {
    display: none !important;
}

.cat-banner-card:hover .cat-figure-wrap[data-effect-shake="0"] .cat-figure-svg,
.m-cat-banner:active .cat-figure-wrap[data-effect-shake="0"] .cat-figure-svg {
    animation: none !important;
}


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .cat-figure-wrap,
    .cat-figure-wrap .cat-figure-svg,
    .cat-figure-wrap .trail-ghost,
    .cat-figure-wrap .ball-main,
    .cat-figure-wrap .slot-foreign-strip,
    .cat-figure-wrap .lc-card-tilt-left,
    .cat-figure-wrap .lc-card-tilt-right,
    .cat-figure-wrap .lc-card-flip-l,
    .cat-figure-wrap .lc-card-flip-r,
    .cat-figure-wrap .lc-card-chip,
    .cat-figure-wrap .lc-pip-pulse,
    .cat-figure-wrap .lc-felt,
    .cat-figure-wrap .scope-cross,
    .cat-figure-wrap .scope-vignette,
    .cat-figure-wrap .scope-dot,
    .cat-figure-wrap .scope-ring,
    .cat-figure-wrap .scope-rangefinder,
    .cat-figure-wrap .lb-mq-strip,
    .cat-figure-wrap .lb-mq-light,
    .cat-figure-wrap .lb-mq-center-hl,
    .cat-figure-wrap .arc-pac,
    .cat-figure-wrap .arc-pac-top,
    .cat-figure-wrap .arc-pac-bot,
    .cat-figure-wrap .arc-ghost,
    .cat-figure-wrap .arc-ghost-bob,
    .cat-figure-wrap .arc-pac-dot,
    .cat-figure-wrap .rf-card,
    .cat-figure-wrap .rf-card-back,
    .cat-figure-wrap .rf-card-front,
    .cat-figure-wrap .rf-hand-set,
    .cat-figure-wrap .myb-block,
    .cat-figure-wrap .myb-coin,
    .cat-figure-wrap .myb-flash {
        animation: none !important;
        transition: color .25s ease !important;
    }
    .cat-figure-wrap::before,
    .cat-figure-wrap::after {
        animation: none !important;
    }
}