/* Card FX — styles for the signature card effects in js/card-fx.js.
   Motion is driven from JS (Web Animations); these rules only set the look.
   Loaded by play.html and the admin FX Lab. */

/* One stage per effect run: fixed over the whole window, click-through,
   above the move ghosts (5900) so struck cards read on top of the board. */
.cfx-layer {
    position: fixed;
    inset: 0;
    z-index: 5950;
    pointer-events: none;
    overflow: hidden;
}

.cfx-layer > div,
.cfx-layer > span {
    position: absolute;
}

/* A card stand-in drawn at a rect (the real card may already be elsewhere). */
.cfx-card {
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(20, 18, 14, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.cfx-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfx-card-back {
    background: repeating-linear-gradient(45deg,
        rgba(255, 191, 0, 0.05) 0 1px, transparent 1px 6px),
        linear-gradient(135deg, #1e190a, #0f0c05);
}

/* ── Shared pieces (colour via --cfx-rgb: "r, g, b") ───────── */

.cfx-wash {
    inset: 0;
}

/* The activating card's outline. Lit inside as well as out — an outer-only
   glow leaves the card's own box reading as a dark hole in the light. */
.cfx-source {
    --cfx-rgb: 255, 140, 50;
    border-radius: 8px;
    border: 2px solid rgba(var(--cfx-rgb), 0.95);
    background: rgba(var(--cfx-rgb), 0.14);
    mix-blend-mode: screen;
    box-shadow: 0 0 16px 4px rgba(var(--cfx-rgb), 0.8),
                inset 0 0 16px rgba(var(--cfx-rgb), 0.7);
}

/* A ward over a card the effect spares. */
.cfx-ward {
    --cfx-rgb: 126, 217, 87;
    border-radius: 8px;
    border: 2px solid rgba(var(--cfx-rgb), 0.95);
    box-shadow: 0 0 16px rgba(var(--cfx-rgb), 0.75),
                inset 0 0 14px rgba(var(--cfx-rgb), 0.45);
    background: linear-gradient(160deg, rgba(var(--cfx-rgb), 0) 30%,
        rgba(255, 255, 255, 0.24) 50%, rgba(var(--cfx-rgb), 0) 70%);
}

/* ── EXTINCT ──────────────────────────────────────────────── */

.cfx-extinct-sky,
.cfx-extinct-flash {
    inset: 0;
}

.cfx-extinct-flash {
    mix-blend-mode: screen;
}



/* The red mark on every doomed card. */
.cfx-doom {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    border: 2px solid rgba(255, 70, 40, 0.95);
    box-shadow: inset 0 0 14px rgba(255, 60, 20, 0.7),
                0 0 14px rgba(255, 60, 20, 0.8);
    opacity: 0;
}

/* Meteor: anchored on its centre; the tail streams out along -x and the
   whole thing is rotated to point down its flight path. */
.cfx-meteor {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    will-change: transform;
}

.cfx-meteor-core {
    position: absolute;
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 45%,
        #fffbe6 0%, #ffd27a 28%, #ff7a1f 55%, rgba(200, 40, 0, 0.9) 72%, rgba(120, 20, 0, 0) 100%);
    box-shadow: 0 0 30px 12px rgba(255, 130, 40, 0.75),
                0 0 80px 30px rgba(255, 70, 10, 0.4);
}

.cfx-meteor-tail {
    position: absolute;
    right: 0;
    top: -16px;
    width: 340px;
    height: 32px;
    border-radius: 50% 0 0 50%;
    background: linear-gradient(90deg,
        rgba(255, 60, 0, 0) 0%, rgba(255, 90, 20, 0.35) 40%, rgba(255, 170, 70, 0.85) 85%, #fff2c4 100%);
    filter: blur(4px);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.cfx-ember {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 8px 2px rgba(255, 120, 30, 0.9);
}

.cfx-shockwave {
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 6px solid rgba(255, 220, 160, 0.95);
    box-shadow: 0 0 24px rgba(255, 140, 50, 0.9),
                inset 0 0 18px rgba(255, 140, 50, 0.7);
}

.cfx-shockwave-dust {
    border: 18px solid rgba(120, 90, 60, 0.55);
    box-shadow: none;
    filter: blur(6px);
}

.cfx-rock {
    background: linear-gradient(135deg, #8a7c6c, #3d352d);
    border-radius: 30% 45% 35% 50%;
    box-shadow: 0 0 6px rgba(255, 120, 40, 0.6);
}



/* Stone skin laid over a petrifying card. */
.cfx-stone {
    position: absolute;
    inset: 0;
    opacity: 0;
    mix-blend-mode: multiply;
    background-color: #9a9084;
    background-size: 96px 96px;
}

.cfx-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Molten cracks — still glowing from the meteor's heat. */
.cfx-cracks path {
    fill: none;
    stroke: #ffc46b;
    stroke-width: 2.4;
    stroke-linejoin: bevel;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px #ff7a1f) drop-shadow(0 0 5px rgba(255, 80, 10, 0.8));
}

.cfx-chunk {
    background-color: #6f665b;
    background-repeat: no-repeat;
    filter: grayscale(1) sepia(0.35) brightness(0.55) contrast(1.3);
    box-shadow: inset 0 0 0 1px rgba(20, 14, 10, 0.6);
}

.cfx-dust-puff {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 130, 105, 0.7) 0%, rgba(120, 100, 80, 0) 70%);
    filter: blur(3px);
}

.cfx-mote {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(190, 170, 140, 0.9);
    box-shadow: 0 0 6px rgba(160, 140, 110, 0.7);
}

/* ── VANISH ───────────────────────────────────────────────── */

/* The curtain of light: brightest down its centre line, which is the
   erasing edge. */
.cfx-vanish-band {
    background: linear-gradient(90deg, rgba(190, 230, 255, 0) 0%,
        rgba(190, 230, 255, 0.35) 38%, #ffffff 50%, rgba(190, 230, 255, 0.35) 62%, rgba(190, 230, 255, 0) 100%);
    filter: blur(3px);
    mix-blend-mode: screen;
    will-change: transform;
}

.cfx-vanish-card {
    box-shadow: 0 0 14px rgba(190, 230, 255, 0.55);
}

.cfx-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 65%);
}

/* Four-point twinkle. */
.cfx-star {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffffff 0%, rgba(200, 235, 255, 0.9) 18%, rgba(200, 235, 255, 0) 60%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.cfx-glint {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f4fbff;
    box-shadow: 0 0 6px 2px rgba(170, 215, 255, 0.9);
}

.cfx-blink {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, #ffffff 0%, rgba(190, 230, 255, 0.85) 20%, rgba(190, 230, 255, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

/* ── RAGE ─────────────────────────────────────────────────── */

/* Red heat welling up under the raged side. */
.cfx-rage-glow {
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 60%, rgba(255, 60, 20, 0.45) 0%,
        rgba(180, 10, 0, 0.25) 55%, rgba(120, 0, 0, 0) 80%);
    mix-blend-mode: screen;
}

.cfx-fissures {
    position: absolute;
    overflow: visible;
}

.cfx-fissures path {
    fill: none;
    stroke: #ffb070;
    stroke-width: 3;
    stroke-linejoin: bevel;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px #ff4a12) drop-shadow(0 0 8px rgba(220, 20, 0, 0.9));
}

.cfx-rage-aura {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    box-shadow: inset 0 0 16px rgba(255, 40, 20, 0.75), 0 0 14px rgba(255, 40, 20, 0.7);
    border: 2px solid rgba(255, 60, 30, 0.9);
}

.cfx-card.cfx-rage-burning img {
    filter: sepia(0.6) saturate(2.2) hue-rotate(-20deg) brightness(1.15);
}

.cfx-card.cfx-rage-burning {
    box-shadow: 0 0 18px 4px rgba(255, 90, 20, 0.85);
}

.cfx-flame {
    transform-origin: 50% 100%;
    border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
    background: linear-gradient(0deg, rgba(255, 240, 180, 0.95) 0%, rgba(255, 140, 30, 0.85) 30%,
        rgba(230, 30, 0, 0.6) 70%, rgba(150, 0, 0, 0) 100%);
    filter: blur(2px);
    mix-blend-mode: screen;
}

.cfx-ember-red {
    background: #ff6a2a;
    box-shadow: 0 0 8px 2px rgba(255, 50, 10, 0.9);
}

.cfx-shockwave-rage {
    border-color: rgba(255, 120, 70, 0.95);
    box-shadow: 0 0 24px rgba(255, 40, 10, 0.9), inset 0 0 18px rgba(255, 40, 10, 0.7);
}

.cfx-rage-slam {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 160, 0.95) 0%, rgba(255, 70, 20, 0.7) 30%, rgba(200, 0, 0, 0) 65%);
}

/* ── FEAST ────────────────────────────────────────────────── */

.cfx-feast-mark {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    border: 2px solid rgba(240, 200, 70, 0.95);
    box-shadow: inset 0 0 14px rgba(240, 180, 40, 0.6), 0 0 14px rgba(240, 180, 40, 0.75);
    opacity: 0;
}

/* Dragon jaws: a bronze-scaled jaw with a row of ivory fangs on the biting
   edge (the fangs' clip-path is generated in JS). The two jaws meet on the
   card's centre line, so the fangs overlap the card when they snap shut. */
.cfx-jaw {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

/* Dark green-black scales, a glowing red maw along the biting edge. The
   snout tapers toward the bite so it reads as a jaw, not a bun. */
.cfx-jaw-bone {
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 50% 140%, rgba(0, 0, 0, 0) 0 7px, rgba(0, 0, 0, 0.35) 7px 9px),
        radial-gradient(ellipse at 50% 20%, rgba(150, 190, 110, 0.28) 0%, rgba(150, 190, 110, 0) 55%),
        linear-gradient(180deg, #2c3a20 0%, #18210f 60%, #0c1107 100%);
}

.cfx-jaw-upper .cfx-jaw-bone {
    clip-path: polygon(8% 100%, 0% 62%, 6% 28%, 22% 6%, 50% 0%, 78% 6%, 94% 28%, 100% 62%, 92% 100%);
    box-shadow: inset 0 -10px 0 #9c1a0e;
}

.cfx-jaw-lower .cfx-jaw-bone {
    clip-path: polygon(12% 0%, 88% 0%, 96% 34%, 84% 74%, 62% 96%, 38% 96%, 16% 74%, 4% 34%);
    box-shadow: inset 0 10px 0 #9c1a0e;
}

/* The maw's red glow around the bite line. */
.cfx-jaw-upper .cfx-jaw-bone::after,
.cfx-jaw-lower .cfx-jaw-bone::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    height: 22%;
    background: linear-gradient(180deg, rgba(220, 40, 20, 0) 0%, rgba(220, 40, 20, 0.85) 100%);
}

.cfx-jaw-upper .cfx-jaw-bone::after { bottom: 0; }
.cfx-jaw-lower .cfx-jaw-bone::after { top: 0; transform: scaleY(-1); }

.cfx-jaw-teeth {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 34%;
    background: linear-gradient(180deg, #fffaf0 0%, #e2d6bb 100%);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.cfx-jaw-upper .cfx-jaw-teeth { bottom: -30%; }
.cfx-jaw-lower .cfx-jaw-teeth { top: -30%; left: 15%; right: 15%; }

.cfx-chomp-flash {
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 245, 210, 0.95) 0%, rgba(255, 190, 60, 0.55) 35%, rgba(255, 150, 0, 0) 70%);
}

.cfx-crumb {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #c9a96e;
    box-shadow: 0 0 5px rgba(240, 190, 80, 0.7);
}

/* Treasure in flight — the same gold gem as the in-game treasure readout. */
.cfx-gem {
    font-size: 18px;
    line-height: 1;
    color: #ffbf00;
    filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.9));
}

.cfx-gem-spark {
    width: 46px;
    height: 46px;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 210, 90, 0.85) 22%, rgba(255, 191, 0, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

/* ── CHAOS ────────────────────────────────────────────────── */

/* A spiral vortex: conic arms masked to a soft disc. */
.cfx-vortex {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(190, 120, 255, 0.75) 0deg 14deg,
            rgba(90, 20, 180, 0) 14deg 45deg),
        radial-gradient(circle, rgba(240, 220, 255, 0.9) 0%, rgba(150, 70, 255, 0.45) 30%, rgba(60, 0, 140, 0) 70%);
    -webkit-mask-image: radial-gradient(circle, #000 25%, rgba(0, 0, 0, 0.6) 50%, transparent 70%);
    mask-image: radial-gradient(circle, #000 25%, rgba(0, 0, 0, 0.6) 50%, transparent 70%);
    filter: blur(2px);
    mix-blend-mode: screen;
    will-change: transform;
}

.cfx-vortex-inner {
    background:
        repeating-conic-gradient(from 20deg, rgba(110, 230, 255, 0.7) 0deg 10deg,
            rgba(20, 120, 200, 0) 10deg 36deg),
        radial-gradient(circle, rgba(220, 250, 255, 0.85) 0%, rgba(80, 200, 255, 0.35) 35%, rgba(0, 60, 140, 0) 70%);
}

.cfx-chaos-card {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(180, 110, 255, 0.8);
}

.cfx-chaos-land {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 225, 255, 0.9) 0%, rgba(170, 90, 255, 0.55) 30%, rgba(120, 40, 220, 0) 65%);
}

/* ── ORDER ────────────────────────────────────────────────── */

/* A gold rune circle: double ring, eight spokes. */
.cfx-order-sigil {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 120, 0.75);
    box-shadow: 0 0 22px rgba(255, 200, 90, 0.45), inset 0 0 22px rgba(255, 200, 90, 0.35);
    background: radial-gradient(circle, rgba(255, 215, 120, 0) 55%, rgba(255, 215, 120, 0.12) 56%, rgba(255, 215, 120, 0) 64%);
    mix-blend-mode: screen;
}

.cfx-order-sigil::after {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 120, 0.7);
}

.cfx-order-spoke {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 50%;
    margin-left: -1px;
    transform-origin: 50% 100%;
    background: linear-gradient(180deg, rgba(255, 225, 150, 0.9) 0%, rgba(255, 225, 150, 0) 70%);
}

/* The card's owner colour (--side: "r, g, b"), switched mid-flip. */
.cfx-card.cfx-order-card {
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(var(--side), 0.95), 0 0 16px rgba(var(--side), 0.65);
    transition: box-shadow 0.08s;
}

.cfx-order-arrow {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.cfx-order-arrow-plr { bottom: -11px; border-top: 8px solid rgb(80, 180, 255); }
.cfx-order-arrow-opp { top: -11px; border-bottom: 8px solid rgb(255, 80, 80); }

.cfx-order-flash {
    left: 0;
    top: 0;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, #fffbe8 0%, rgba(255, 215, 120, 0.8) 25%, rgba(255, 200, 80, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.cfx-shockwave-order {
    border-color: rgba(255, 225, 150, 0.95);
    box-shadow: 0 0 22px rgba(255, 200, 90, 0.8), inset 0 0 16px rgba(255, 200, 90, 0.6);
}

/* ── PURGE ────────────────────────────────────────────────── */

/* Cold, purifying fire. */
.cfx-flame-blue {
    background: linear-gradient(0deg, rgba(240, 250, 255, 0.95) 0%, rgba(140, 215, 255, 0.85) 30%,
        rgba(60, 120, 255, 0.55) 70%, rgba(30, 60, 200, 0) 100%);
}

.cfx-ember-blue {
    background: #bfe8ff;
    box-shadow: 0 0 8px 2px rgba(90, 180, 255, 0.9);
}

/* The burning line eating a card from the bottom up. */
.cfx-burn-edge {
    height: 6px;
    margin-top: -3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(140, 215, 255, 0) 0%, #f2fbff 20%, #9fd8ff 50%, #f2fbff 80%, rgba(140, 215, 255, 0) 100%);
    box-shadow: 0 0 10px 3px rgba(110, 190, 255, 0.85);
}

.cfx-ash {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: rgba(200, 205, 215, 0.85);
    box-shadow: 0 0 4px rgba(150, 200, 255, 0.5);
}

.cfx-ember-pile {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(240, 250, 255, 0.95) 0%, rgba(120, 200, 255, 0.7) 30%, rgba(40, 100, 255, 0) 70%);
    filter: blur(2px);
    mix-blend-mode: screen;
}

.cfx-card.cfx-rise-card {
    box-shadow: 0 0 18px 4px rgba(140, 210, 255, 0.75);
}

/* ── END ──────────────────────────────────────────────────── */

/* Old film over everything: the backdrop goes sepia under a burnt-edge
   vignette; the grain is a faint overlay on top. */
.cfx-end-film {
    inset: 0;
    backdrop-filter: sepia(0.85) saturate(0.7) contrast(1.1) brightness(0.85);
    -webkit-backdrop-filter: sepia(0.85) saturate(0.7) contrast(1.1) brightness(0.85);
    background-color: rgba(70, 45, 15, 0.18);
    box-shadow: inset 0 0 160px 40px rgba(25, 12, 0, 0.75);
}

.cfx-end-grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-size: 96px 96px;
}

.cfx-end-clock {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 238, 200, 0.75);
    box-shadow: 0 0 30px rgba(255, 230, 180, 0.35), inset 0 0 40px rgba(255, 230, 180, 0.25);
    background: radial-gradient(circle, rgba(255, 240, 210, 0.08) 0%, rgba(255, 240, 210, 0.02) 70%);
}

.cfx-end-tick {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 50%;
    margin-left: -1px;
    transform-origin: 50% 100%;
    background: linear-gradient(180deg, rgba(255, 238, 200, 0.85) 0 7%, transparent 7%);
}

.cfx-end-tick-major {
    width: 4px;
    margin-left: -2px;
    background: linear-gradient(180deg, rgba(255, 238, 200, 0.95) 0 11%, transparent 11%);
}

.cfx-end-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 3px;
    background: rgba(255, 240, 210, 0.9);
    box-shadow: 0 0 8px rgba(255, 230, 180, 0.6);
}

.cfx-end-hand-h { width: 6px; height: 26%; margin-left: -3px; }
.cfx-end-hand-m { width: 3px; height: 40%; margin-left: -1.5px; }

.cfx-end-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff4dc;
}

.cfx-end-lock {
    font-size: 18px;
    color: #ffbf00;
    filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.9));
}

.cfx-end-lock-ring {
    border-radius: 999px;
    border: 2px solid rgba(255, 191, 0, 0.85);
    box-shadow: 0 0 12px rgba(255, 191, 0, 0.6);
}

.cfx-card.cfx-end-card {
    box-shadow: 0 0 14px rgba(255, 235, 190, 0.6);
}

.cfx-card.cfx-end-echo {
    box-shadow: none;
    filter: sepia(1) brightness(1.3);
}

.cfx-end-land {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, #fff6e2 0%, rgba(255, 230, 180, 0.7) 25%, rgba(255, 220, 160, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.cfx-shockwave-end {
    border-color: rgba(255, 240, 210, 0.9);
    box-shadow: 0 0 26px rgba(255, 230, 180, 0.7), inset 0 0 18px rgba(255, 230, 180, 0.5);
}

/* ── Shared: giant glyphs, coloured sparks and motes ─────── */

.cfx-glyph {
    --cfx-rgb: 255, 255, 255;
    left: 0;
    top: 0;
    font-family: 'Times New Roman', Georgia, serif;
    font-weight: bold;
    line-height: 1;
    color: rgba(var(--cfx-rgb), 0.35);
    -webkit-text-stroke: 2px rgba(var(--cfx-rgb), 0.9);
    text-shadow: 0 0 24px rgba(var(--cfx-rgb), 0.8), 0 0 70px rgba(var(--cfx-rgb), 0.45);
    mix-blend-mode: screen;
}

.cfx-spark-blue,
.cfx-spark-pink {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.cfx-spark-blue { background: #d8ecff; box-shadow: 0 0 8px 2px rgba(78, 160, 255, 0.95); }
.cfx-spark-pink { background: #ffe0ec; box-shadow: 0 0 8px 2px rgba(255, 94, 156, 0.95); }

.cfx-mote-blue,
.cfx-mote-green,
.cfx-mote-pink {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.cfx-mote-blue { background: #cfe6ff; box-shadow: 0 0 7px 2px rgba(78, 160, 255, 0.85); }
.cfx-mote-green { background: #d6ffe3; box-shadow: 0 0 7px 2px rgba(78, 208, 122, 0.85); }
.cfx-mote-pink { background: #ffd6e6; box-shadow: 0 0 7px 2px rgba(255, 94, 156, 0.85); }

/* ── ALPHA ────────────────────────────────────────────────── */

/* A hunting reticle: broken ring with four inward ticks. */
.cfx-alpha-reticle {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px dashed rgba(120, 185, 255, 0.95);
    box-shadow: 0 0 14px rgba(78, 160, 255, 0.7), inset 0 0 14px rgba(78, 160, 255, 0.4);
    background:
        linear-gradient(rgba(170, 210, 255, 0.95), rgba(170, 210, 255, 0.95)) 50% 0 / 2px 16% no-repeat,
        linear-gradient(rgba(170, 210, 255, 0.95), rgba(170, 210, 255, 0.95)) 50% 100% / 2px 16% no-repeat,
        linear-gradient(rgba(170, 210, 255, 0.95), rgba(170, 210, 255, 0.95)) 0 50% / 16% 2px no-repeat,
        linear-gradient(rgba(170, 210, 255, 0.95), rgba(170, 210, 255, 0.95)) 100% 50% / 16% 2px no-repeat;
}

/* A spectral claw swipe: three parallel streaks. */
.cfx-claw {
    left: 0;
    top: 0;
    height: 28px;
    transform-origin: 0 50%;
    filter: drop-shadow(0 0 6px rgba(78, 160, 255, 0.95));
}

.cfx-claw-streak {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(200, 230, 255, 0) 0%, #ffffff 35%, #bfe0ff 70%, rgba(120, 180, 255, 0) 100%);
}

/* The glowing gashes the claws leave on the card. */
.cfx-gash {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 50%;
    height: 3px;
    background: linear-gradient(90deg, rgba(150, 200, 255, 0) 0%, #e6f3ff 30%, #7fb8ff 70%, rgba(150, 200, 255, 0) 100%);
    box-shadow: 0 0 8px 2px rgba(78, 160, 255, 0.8);
}

/* ── DELTA ────────────────────────────────────────────────── */

.cfx-delta-portal {
    left: 0;
    top: 0;
    clip-path: polygon(50% 4%, 97% 90%, 3% 90%);
    background:
        repeating-conic-gradient(from 0deg at 50% 62%, rgba(150, 255, 190, 0.55) 0deg 12deg, rgba(20, 90, 50, 0) 12deg 40deg),
        radial-gradient(circle at 50% 62%, rgba(230, 255, 240, 0.95) 0%, rgba(78, 208, 122, 0.7) 30%, rgba(10, 60, 30, 0.2) 70%);
    filter: drop-shadow(0 0 12px rgba(78, 208, 122, 0.9));
}

.cfx-delta-river {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-delta-river path {
    fill: none;
    stroke: #b6ffcf;
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px #4ed07a) drop-shadow(0 0 10px rgba(78, 208, 122, 0.8));
}

.cfx-delta-land {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #f0fff5 0%, rgba(78, 208, 122, 0.75) 25%, rgba(78, 208, 122, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

/* ── OMEGA ────────────────────────────────────────────────── */

.cfx-omega-ring {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 140, 185, 0.95);
    box-shadow: 0 0 14px rgba(255, 94, 156, 0.8), inset 0 0 10px rgba(255, 94, 156, 0.5);
}

/* A pillar of light from the top of the screen down onto the card. */
.cfx-omega-beam {
    transform-origin: 50% 50%;
    background: linear-gradient(90deg, rgba(255, 94, 156, 0) 0%, rgba(255, 94, 156, 0.7) 22%,
        #fff2f7 46%, #ffffff 50%, #fff2f7 54%, rgba(255, 94, 156, 0.7) 78%, rgba(255, 94, 156, 0) 100%);
    box-shadow: 0 0 40px 10px rgba(255, 94, 156, 0.55);
    mix-blend-mode: screen;
}

.cfx-frag {
    background-color: #6a2a40;
    background-repeat: no-repeat;
}

.cfx-omega-void {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #000 0%, #0a0005 45%, rgba(255, 94, 156, 0.85) 60%, rgba(255, 94, 156, 0) 72%);
}

/* ── CANCEL ───────────────────────────────────────────────── */

/* The stamp: two thick red bars crossed. */
.cfx-cancel-x {
    left: 0;
    top: 0;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 60, 50, 0.7));
    background:
        linear-gradient(45deg, transparent 43%, #e8302a 43%, #ff5a4a 50%, #e8302a 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #e8302a 43%, #ff5a4a 50%, #e8302a 57%, transparent 57%);
}

/* The ink the stamp leaves on the card. */
.cfx-cancel-ink {
    position: absolute;
    inset: 6%;
    opacity: 0;
    mix-blend-mode: multiply;
    background:
        linear-gradient(45deg, transparent 41%, rgba(210, 25, 20, 0.92) 41%, rgba(210, 25, 20, 0.92) 59%, transparent 59%),
        linear-gradient(-45deg, transparent 41%, rgba(210, 25, 20, 0.92) 41%, rgba(210, 25, 20, 0.92) 59%, transparent 59%);
}

.cfx-ink-drop {
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50% 40% 55% 45%;
    background: #d81e18;
}

.cfx-cancel-word {
    left: 0;
    top: 0;
    padding: 2px 10px;
    border: 3px solid #e8302a;
    border-radius: 6px;
    font-family: 'DragonSlayer', serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: #ff4a3c;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 60, 50, 0.6);
    background: rgba(20, 0, 0, 0.35);
}

/* ── FADE ─────────────────────────────────────────────────── */

.cfx-fade-fog {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(225, 220, 245, 0.32) 0%, rgba(200, 195, 230, 0.12) 45%, rgba(200, 195, 230, 0) 70%);
    filter: blur(14px);
}

.cfx-card.cfx-fade-echo {
    box-shadow: none;
    filter: grayscale(0.6) brightness(1.3);
    mix-blend-mode: screen;
}

.cfx-fade-wisp {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 242, 255, 0.85) 0%, rgba(220, 215, 245, 0) 70%);
    filter: blur(3px);
}

.cfx-fade-outline {
    border-radius: 5px;
    border: 1px solid rgba(235, 230, 255, 0.85);
    box-shadow: 0 0 10px rgba(220, 215, 255, 0.6);
}

/* ── Shared: lightning, weather, wings ────────────────────── */

.cfx-bolt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-bolt path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: miter;
    filter: drop-shadow(0 0 3px #bfe3ff) drop-shadow(0 0 10px rgba(110, 170, 255, 0.95));
}

.cfx-bolt path.cfx-bolt-fork { stroke-width: 1.6; }
.cfx-bolt-red path { filter: drop-shadow(0 0 3px #ff9a9a) drop-shadow(0 0 12px rgba(255, 30, 40, 0.95)); }
.cfx-bolt-violet path { filter: drop-shadow(0 0 3px #d9cfff) drop-shadow(0 0 12px rgba(140, 100, 255, 0.95)); }
.cfx-bolt-faint { opacity: 0.6; }
.cfx-bolt-arc path { stroke-width: 4; }

.cfx-snow {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(240, 248, 255, 0.95);
    box-shadow: 0 0 4px rgba(200, 225, 255, 0.8);
}

.cfx-rain {
    width: 1.5px;
    height: 26px;
    background: linear-gradient(180deg, rgba(180, 200, 255, 0) 0%, rgba(200, 215, 255, 0.75) 100%);
    transform: rotate(-10deg);
}

/* A bat-like dragon wing (outline set in JS, mirrored for the right wing).
   Finger bones fan out from the shoulder (--sx: 100% for a left wing, 0% for
   a right); the membrane darkens toward its scalloped edge. */
.cfx-wing {
    --sx: 100%;
    --bone: rgba(255, 255, 255, 0.6);
}

.cfx-wing-breach {
    --bone: #ff5a50;
    background:
        radial-gradient(ellipse at var(--sx) 50%, rgba(255, 50, 40, 0.7) 0%, rgba(150, 0, 15, 0.45) 30%, rgba(40, 0, 6, 0) 60%),
        radial-gradient(ellipse at var(--sx) 50%, #3a0508 0%, #1a0206 55%, #070002 100%);
}

.cfx-wing-steel {
    --bone: #c8d8ee;
    background: radial-gradient(ellipse at var(--sx) 50%, #3a475c 0%, #1a2130 55%, #090c12 100%);
}

/* ── BUST ─────────────────────────────────────────────────── */

/* Frost creeping in from the window's edges. */
.cfx-bust-frost {
    inset: 0;
    box-shadow: inset 0 0 120px 30px rgba(210, 235, 255, 0.55), inset 0 0 280px 60px rgba(120, 180, 255, 0.25);
}

.cfx-shockwave-ice {
    border-color: rgba(230, 245, 255, 0.95);
    box-shadow: 0 0 24px rgba(150, 210, 255, 0.9), inset 0 0 18px rgba(150, 210, 255, 0.6);
}

.cfx-gust {
    height: 2px;
    transform-origin: 0 50%;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(230, 245, 255, 0) 0%, rgba(240, 250, 255, 0.95) 60%, rgba(230, 245, 255, 0) 100%);
}

/* The ice block sealing a card. */
.cfx-ice {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    clip-path: inset(100% 0 0 0);
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(305deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 25%),
        linear-gradient(180deg, rgba(170, 220, 255, 0.45) 0%, rgba(90, 160, 230, 0.4) 100%);
    box-shadow: inset 0 0 0 2px rgba(220, 240, 255, 0.85), inset 0 0 16px rgba(150, 210, 255, 0.8);
}

.cfx-ice-crystal {
    left: 0;
    top: 0;
    width: 7px;
    transform-origin: 50% 100%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(0deg, rgba(150, 210, 255, 0.9) 0%, #ffffff 100%);
    filter: drop-shadow(0 0 4px rgba(150, 210, 255, 0.9));
}

.cfx-spark-ice {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px 2px rgba(150, 210, 255, 0.95);
}

.cfx-cracks-ice path {
    stroke: #f2fbff;
    filter: drop-shadow(0 0 2px #9fd2ff);
}

.cfx-ice-shard {
    clip-path: polygon(50% 0, 100% 40%, 70% 100%, 10% 80%, 0 30%);
    background: linear-gradient(160deg, #ffffff 0%, rgba(160, 215, 255, 0.85) 100%);
}

.cfx-avalanche {
    border-radius: 40%;
    background: radial-gradient(ellipse at 60% 50%, rgba(250, 252, 255, 0.95) 0%, rgba(230, 240, 255, 0.75) 40%, rgba(220, 235, 255, 0) 72%);
    filter: blur(6px);
}

/* ── EXPLODE ──────────────────────────────────────────────── */

.cfx-cracks-magma path {
    stroke: #ffb347;
    stroke-width: 2.6;
    filter: drop-shadow(0 0 3px #ff5a1e) drop-shadow(0 0 8px rgba(255, 60, 0, 0.9));
}

.cfx-explode-core {
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #fff0b0 20%, #ffb030 45%, #ff4a10 70%, rgba(160, 20, 0, 0) 100%);
    box-shadow: 0 0 60px 20px rgba(255, 120, 30, 0.7);
}

.cfx-fireball {
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 220, 0.95) 0%, rgba(255, 190, 70, 0.9) 25%,
        rgba(255, 90, 20, 0.75) 50%, rgba(120, 20, 0, 0.4) 70%, rgba(40, 10, 0, 0) 100%);
    mix-blend-mode: screen;
}

/* A charred shard with a glowing edge, like the debris in the art. */
.cfx-shard {
    left: 0;
    top: 0;
    clip-path: polygon(10% 0, 100% 20%, 80% 100%, 0 70%);
    background: linear-gradient(135deg, #ffb347 0%, #3a1608 30%, #120604 100%);
    filter: drop-shadow(0 0 4px rgba(255, 100, 20, 0.9));
}

.cfx-ember-fall {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 6px 2px rgba(255, 90, 20, 0.9);
}

/* ── BREACH ───────────────────────────────────────────────── */

.cfx-breach-mist {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(200, 20, 30, 0.35) 0%, rgba(140, 0, 10, 0.15) 45%, rgba(120, 0, 10, 0) 70%);
    filter: blur(16px);
}

/* The opponent's vault seal over their treasure. */
.cfx-vault {
    left: 0;
    top: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #ffd76a;
    border: 4px solid #ffbf00;
    background: radial-gradient(circle, rgba(60, 40, 0, 0.9) 0%, rgba(20, 12, 0, 0.95) 70%);
    box-shadow: 0 0 0 6px rgba(255, 191, 0, 0.25), 0 0 26px rgba(255, 191, 0, 0.7), inset 0 0 18px rgba(255, 191, 0, 0.5);
}

.cfx-vault .cfx-cracks {
    position: absolute;
    inset: 0;
}

.cfx-cracks-gold path {
    stroke: #fff2c4;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 3px #ff3a30);
}

.cfx-vault-shard {
    left: 0;
    top: 0;
    clip-path: polygon(20% 0, 100% 30%, 70% 100%, 0 60%);
    background: linear-gradient(135deg, #ffe08a 0%, #b07a00 100%);
    filter: drop-shadow(0 0 4px rgba(255, 191, 0, 0.8));
}

.cfx-gem-red {
    filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 30, 40, 0.8));
}

/* ── STORM ────────────────────────────────────────────────── */

.cfx-storm-cloud {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(50, 50, 90, 0.95) 0%, rgba(30, 30, 70, 0.8) 45%, rgba(20, 20, 50, 0) 72%);
    filter: blur(8px);
}

.cfx-spark-violet {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f0ecff;
    box-shadow: 0 0 8px 2px rgba(140, 100, 255, 0.95);
}

/* A card blasted off the deck: scorched, crackling violet at the edges. */
.cfx-card.cfx-storm-burnt {
    box-shadow: 0 0 16px 4px rgba(140, 100, 255, 0.85);
}

.cfx-card.cfx-storm-burnt img {
    filter: sepia(0.5) brightness(0.8) hue-rotate(200deg) saturate(1.4);
}

.cfx-storm-land {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #f4f0ff 0%, rgba(140, 100, 255, 0.75) 25%, rgba(120, 80, 255, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.cfx-gem-violet {
    filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.9)) drop-shadow(0 0 12px rgba(140, 100, 255, 0.9));
}

/* ── OVERHAUL ─────────────────────────────────────────────── */

.cfx-city {
    overflow: hidden;
}

/* A dark tower with lit windows and a snow-capped roof. */
.cfx-building {
    position: absolute;
    bottom: 0;
    border-top: 3px solid rgba(235, 242, 255, 0.85);
    background-color: #0c1220;
    background-image: radial-gradient(rgba(255, 214, 140, 0.75) 1.2px, transparent 1.7px);
    background-size: 9px 11px;
    background-position: 4px 6px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.cfx-cyclone {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.cfx-cyclone-ring {
    position: absolute;
    left: 0;
    transform: perspective(600px) rotateX(74deg);
    border-radius: 50%;
    border: 3px solid rgba(225, 238, 255, 0.6);
    border-left-color: rgba(225, 238, 255, 0.1);
    border-bottom-color: rgba(225, 238, 255, 0.25);
    box-shadow: 0 0 14px rgba(200, 225, 255, 0.5), inset 0 0 10px rgba(200, 225, 255, 0.35);
    background: radial-gradient(ellipse, rgba(220, 235, 255, 0.12) 0%, rgba(220, 235, 255, 0) 70%);
}

/* ── VOID ─────────────────────────────────────────────────── */

.cfx-void-tendrils {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Thorny, branch-like tendrils: a thick dark stem with a violet glow. */
.cfx-void-tendrils path {
    fill: none;
    stroke: #2a1240;
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px #b070ff) drop-shadow(0 0 10px rgba(120, 60, 220, 0.8));
}

/* The vortex eye: spiral arms around a black hole with a cyan rim. */
.cfx-void-eye {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(150, 230, 255, 0.55) 0deg 8deg, rgba(110, 50, 200, 0) 8deg 30deg),
        radial-gradient(circle, #000000 0%, #000000 16%, rgba(120, 230, 255, 0.95) 19%, rgba(90, 40, 170, 0.9) 34%,
            rgba(60, 20, 130, 0.6) 55%, rgba(30, 10, 70, 0) 72%);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    box-shadow: 0 0 60px rgba(130, 60, 230, 0.5);
}

.cfx-void-hole {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #000 0%, #000 60%, rgba(160, 240, 255, 0.9) 72%, rgba(160, 240, 255, 0) 80%);
}

/* A stand-in for the destroyed space itself. */
.cfx-void-space {
    border-radius: 8px;
    border: 2px solid rgba(255, 191, 0, 0.35);
    background: rgba(255, 191, 0, 0.05);
    box-shadow: inset 0 0 14px rgba(160, 90, 240, 0.5);
}

.cfx-mote-violet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ead8ff;
    box-shadow: 0 0 7px 2px rgba(150, 80, 240, 0.9);
}

.cfx-void-implode {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 4px solid rgba(200, 160, 255, 0.9);
    box-shadow: 0 0 30px rgba(150, 80, 240, 0.8), inset 0 0 30px rgba(150, 80, 240, 0.6);
}

.cfx-shockwave-void {
    border-color: rgba(210, 180, 255, 0.95);
    box-shadow: 0 0 24px rgba(150, 80, 240, 0.9), inset 0 0 18px rgba(150, 80, 240, 0.6);
}

/* ── EXPAND ───────────────────────────────────────────────── */

.cfx-star-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff8e0;
    box-shadow: 0 0 5px 1px rgba(255, 230, 170, 0.8);
}

/* The golden moon from the art. */
.cfx-moon {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 36%, rgba(255, 252, 235, 0.95) 0%, rgba(255, 228, 160, 0.9) 35%, rgba(230, 170, 80, 0.75) 62%, rgba(180, 110, 40, 0) 72%),
        radial-gradient(circle at 60% 60%, rgba(160, 110, 50, 0.35) 0%, rgba(160, 110, 50, 0) 20%);
    box-shadow: 0 0 80px 30px rgba(255, 200, 110, 0.35);
    mix-blend-mode: screen;
}

.cfx-stardust {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe9a8;
    box-shadow: 0 0 6px 2px rgba(255, 200, 90, 0.85);
}

.cfx-constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-constellation path {
    fill: none;
    stroke: rgba(255, 230, 160, 0.9);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.9));
}

.cfx-const-star {
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 220, 140, 0.9) 22%, rgba(255, 200, 90, 0) 62%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.cfx-expand-birth {
    border-radius: 8px;
    border: 2px solid #ffd76a;
    background: radial-gradient(ellipse, rgba(255, 230, 160, 0.55) 0%, rgba(255, 200, 90, 0.1) 70%);
    box-shadow: 0 0 26px rgba(255, 200, 90, 0.85);
}

.cfx-expand-flash {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 225, 150, 0.85) 24%, rgba(255, 200, 90, 0) 62%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.cfx-spark-gold {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff4cc;
    box-shadow: 0 0 8px 2px rgba(255, 191, 0, 0.95);
}

/* ── TERRAFORM (around the original play.css terraform-* pieces) ── */

.cfx-sand {
    width: 3px;
    height: 2px;
    border-radius: 1px;
    background: rgba(230, 190, 130, 0.85);
}

/* The glowing green orb the tree-dragon cradles. */
.cfx-terra-orb {
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #f2ffe0 0%, #a8ff7a 25%, #3fbf3a 55%, rgba(20, 90, 20, 0) 72%);
    box-shadow: 0 0 30px 10px rgba(120, 230, 90, 0.6);
}

.cfx-terra-taproot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-terra-taproot path {
    fill: none;
    stroke: #6b4a2a;
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(120, 230, 90, 0.8));
}

.cfx-terra-burst {
    left: 0;
    top: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 255, 200, 0.9) 0%, rgba(126, 217, 87, 0.6) 35%, rgba(60, 140, 40, 0) 70%);
}

.cfx-moss {
    width: 8px;
    height: 14px;
    border-radius: 40% 40% 60% 60%;
    background: linear-gradient(180deg, #8fbf5a 0%, #4f7d2e 100%);
    box-shadow: 0 0 4px rgba(110, 200, 80, 0.5);
}

.cfx-terra-ring {
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(150, 230, 110, 0.9);
    box-shadow: 0 0 16px rgba(110, 200, 80, 0.8);
}

.cfx-dust-cloud {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 170, 110, 0.7) 0%, rgba(190, 150, 100, 0) 70%);
    filter: blur(2px);
}

/* ── PRUNE ────────────────────────────────────────────────── */

.cfx-prune-mist {
    background: radial-gradient(ellipse, rgba(200, 235, 190, 0.28) 0%, rgba(170, 210, 160, 0.1) 45%, rgba(170, 210, 160, 0) 70%);
}

.cfx-falling-leaf {
    width: 10px;
    height: 6px;
    border-radius: 80% 12% 80% 12%;
    background: radial-gradient(ellipse at 30% 50%, #b6e88a, #4f9a36 75%);
}

.cfx-prune-vine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* A thorny vine: dark green stem with short thorns (a dashed outer stroke). */
.cfx-prune-vine path {
    fill: none;
    stroke: #2f5a1f;
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(150, 230, 110, 0.7)) drop-shadow(1px 1px 0 #1a3010);
}

/* Giant pruning shears: two steel blades closing on a pivot at the left. */
.cfx-shears {
    left: 0;
    top: 0;
    height: 0;
}

.cfx-shear-blade {
    position: absolute;
    left: 0;
    top: -6px;
    width: 100%;
    height: 12px;
    transform-origin: 6px 50%;
    clip-path: polygon(0 30%, 8% 0, 100% 50%, 8% 100%, 0 70%);
    background: linear-gradient(180deg, #e8f4ec 0%, #8fa39a 50%, #3c4a44 100%);
    filter: drop-shadow(0 0 4px rgba(150, 230, 110, 0.8));
}

.cfx-shear-blade-b {
    background: linear-gradient(0deg, #e8f4ec 0%, #8fa39a 50%, #3c4a44 100%);
}

.cfx-spark-sap {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d8ffb0;
    box-shadow: 0 0 6px 2px rgba(120, 220, 80, 0.9);
}

.cfx-dead-leaf {
    width: 9px;
    height: 6px;
    border-radius: 80% 12% 80% 12%;
    background: radial-gradient(ellipse at 30% 50%, #c8a060, #6b4a22 75%);
}

/* ── DROWN ────────────────────────────────────────────────── */

/* The flood: a sea-green body with a bright rippling surface line. */
.cfx-water {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(160, 255, 240, 0.55) 0%, rgba(40, 170, 170, 0.45) 3%,
        rgba(10, 90, 110, 0.55) 40%, rgba(4, 40, 60, 0.75) 100%);
    box-shadow: inset 0 3px 0 rgba(200, 255, 250, 0.7);
}

.cfx-water-caustics {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    filter: blur(1.5px);
    background:
        repeating-radial-gradient(ellipse at 30% 20%, rgba(200, 255, 250, 0.35) 0 5px, rgba(200, 255, 250, 0) 5px 60px),
        repeating-radial-gradient(ellipse at 70% 40%, rgba(200, 255, 250, 0.25) 0 4px, rgba(200, 255, 250, 0) 4px 74px);
    mix-blend-mode: screen;
}

.cfx-bubble {
    border-radius: 50%;
    border: 1px solid rgba(220, 255, 250, 0.8);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(200, 255, 250, 0.15) 30%, rgba(200, 255, 250, 0) 60%);
}

/* A small fish silhouette: body plus tail. */
.cfx-fish {
    clip-path: polygon(0 50%, 22% 10%, 62% 0, 78% 30%, 100% 0, 92% 50%, 100% 100%, 78% 70%, 62% 100%, 22% 90%);
    background: linear-gradient(180deg, #ffcf6a 0%, #ff8a3c 100%);
    filter: drop-shadow(0 0 4px rgba(255, 180, 90, 0.6));
}

/* The great bubble around the drowned card, like the one in the art. */
.cfx-big-bubble {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(220, 255, 250, 0.85);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle, rgba(140, 240, 230, 0.08) 55%, rgba(140, 240, 230, 0.35) 75%, rgba(140, 240, 230, 0.15) 100%);
    box-shadow: 0 0 22px rgba(120, 230, 220, 0.6), inset 0 0 22px rgba(160, 250, 240, 0.5);
}

.cfx-splash {
    left: 0;
    top: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(200, 255, 250, 0.9);
    box-shadow: 0 0 16px rgba(120, 230, 220, 0.8);
}

.cfx-droplet {
    left: 0;
    top: 0;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: rgba(200, 255, 250, 0.9);
    box-shadow: 0 0 5px rgba(120, 230, 220, 0.8);
}

/* ── Shared: light rays, more sparks ──────────────────────── */

/* Slowly turning god-rays (centre them with translate(-50%,-50%)). */
.cfx-rays {
    position: absolute;
    left: 0;
    top: 0;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 230, 160, 0.32) 0deg 4deg, rgba(255, 230, 160, 0) 4deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 68%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.cfx-spark-red {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffe0e0;
    box-shadow: 0 0 8px 2px rgba(255, 40, 40, 0.95);
}

/* ── NULL ─────────────────────────────────────────────────── */

.cfx-star-cold { background: #e6f0ff; box-shadow: 0 0 5px 1px rgba(150, 190, 255, 0.85); }

.cfx-null-serpent {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The serpent's body: a deep-blue band edged with light, star-speckled. */
.cfx-null-serpent .cfx-null-body {
    fill: none;
    stroke: #0e2654;
    stroke-width: 48;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px #7fb2ff) drop-shadow(0 0 22px rgba(60, 120, 255, 0.75));
}

.cfx-null-serpent .cfx-null-belly {
    fill: none;
    stroke: rgba(150, 190, 255, 0.45);
    stroke-width: 12;
    stroke-linecap: round;
}

.cfx-null-serpent .cfx-null-stars {
    fill: none;
    stroke: #eaf3ff;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px #bcd6ff);
}

.cfx-null-wave {
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(200, 215, 240, 0.85);
    box-shadow: 0 0 20px rgba(150, 170, 220, 0.7), inset 0 0 20px rgba(150, 170, 220, 0.5);
}

/* A nulled card: drained grey with a ∅ stamped on it. */
.cfx-null-veil {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(90, 96, 110, 0.55);
    backdrop-filter: grayscale(1) brightness(0.8);
    -webkit-backdrop-filter: grayscale(1) brightness(0.8);
    color: rgba(225, 232, 245, 0.9);
    font-family: Georgia, serif;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(150, 180, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(200, 215, 240, 0.5);
}

/* ── BEGIN ────────────────────────────────────────────────── */

/* A ring of fire around a black void, like the art. */
.cfx-fire-ring {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffd27a 0deg, #ff6a1e 25deg, #ffb347 48deg, #c81e0a 70deg, #ff8a2a 105deg, #fff0b0 128deg,
        #ff5a14 160deg, #b31608 190deg, #ffb347 220deg, #ff6a1e 255deg, #fff2c4 280deg, #e03a10 310deg, #ffcf6a 338deg, #ffd27a 360deg);
    -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 57%, #000 65%, transparent 73%);
    mask-image: radial-gradient(circle, transparent 52%, #000 57%, #000 65%, transparent 73%);
    filter: blur(2.5px) drop-shadow(0 0 22px rgba(255, 120, 30, 0.95));

}

.cfx-fire-ring-void {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 120, 255, 0.5) 0%, #05000c 45%, #000 70%);
}

.cfx-begin-chevron {
    left: 0;
    top: 0;
    font-size: 34px;
    font-weight: bold;
    color: #ffcf7a;
    text-shadow: 0 0 10px rgba(255, 140, 30, 0.95), 0 0 22px rgba(255, 90, 20, 0.7);
}

.cfx-begin-shimmer {
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 160, 60, 0) 0%, rgba(255, 190, 110, 0.35) 50%, rgba(255, 160, 60, 0) 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}

/* ── GENESIS ──────────────────────────────────────────────── */

.cfx-nebula-cloud {
    left: 0;
    top: 0;
    border-radius: 50%;
    filter: blur(18px);
    mix-blend-mode: screen;
}

.cfx-genesis-sun {
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #fff2c0 18%, #ffb347 40%, rgba(255, 90, 40, 0.6) 60%, rgba(200, 40, 80, 0) 75%);
    mix-blend-mode: screen;
}

/* Ember wings: glowing orange membranes with dark bones (GENESIS's art). */
.cfx-wing-ember {
    --bone: #fff0c0;
    background: radial-gradient(ellipse at var(--sx) 55%, rgba(255, 220, 140, 0.95) 0%, rgba(255, 120, 40, 0.85) 30%, rgba(190, 30, 50, 0.75) 62%, rgba(80, 0, 30, 0.55) 100%);
    mix-blend-mode: screen;
}

.cfx-shockwave-genesis {
    border-color: rgba(255, 230, 170, 0.95);
    box-shadow: 0 0 26px rgba(255, 120, 60, 0.85), inset 0 0 18px rgba(230, 60, 160, 0.6);
}

/* ── EXODUS ───────────────────────────────────────────────── */

.cfx-aurora {
    background: linear-gradient(180deg, rgba(120, 255, 190, 0) 0%, rgba(120, 255, 190, 0.35) 30%,
        rgba(60, 220, 150, 0.22) 60%, rgba(40, 160, 120, 0) 100%);
    filter: blur(14px);
    mix-blend-mode: screen;
}

/* A tall arch of golden light. */
.cfx-exodus-gate {
    left: 0;
    top: 0;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 4px 4px / 32% 32% 4px 4px;
    border: 3px solid rgba(255, 225, 140, 0.95);
    background: linear-gradient(180deg, rgba(255, 250, 225, 0.95) 0%, rgba(255, 225, 140, 0.6) 45%, rgba(120, 230, 170, 0.25) 100%);
    box-shadow: 0 0 30px rgba(255, 215, 110, 0.85), 0 0 80px rgba(120, 230, 170, 0.45), inset 0 0 26px rgba(255, 255, 255, 0.7);
}

.cfx-feather {
    width: 7px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    background: linear-gradient(90deg, #fff4c8 0%, #ffd76a 50%, #e8b84a 100%);
    box-shadow: 0 0 6px rgba(255, 215, 110, 0.8);
}

.cfx-card.cfx-exodus-walker {
    box-shadow: 0 0 22px 6px rgba(255, 225, 140, 0.85);
}

.cfx-card.cfx-exodus-walker img { filter: brightness(1.4) sepia(0.4); }

/* ── PEEK ─────────────────────────────────────────────────── */

/* The red-and-white swirl from the art. */
.cfx-peek-swirl {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.35) 0deg 22deg, rgba(200, 10, 20, 0.45) 22deg 60deg, rgba(0, 0, 0, 0) 60deg 90deg);
    -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%);
    mask-image: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%);
    filter: blur(6px);
}

/* A great almond-shaped dragon eye with a slit pupil. */
.cfx-dragon-eye {
    left: 0;
    top: 0;
    overflow: hidden;
    clip-path: ellipse(50% 50% at 50% 50%);
    border-radius: 50% / 50%;
    background: radial-gradient(ellipse at 50% 50%, #ffd27a 0%, #ff6a1e 30%, #b3120c 60%, #2a0002 100%);
    box-shadow: 0 0 40px rgba(255, 40, 30, 0.8);
    filter: drop-shadow(0 0 16px rgba(255, 30, 20, 0.9));
}

.cfx-dragon-iris {
    position: absolute;
    left: 46%;
    top: 4%;
    width: 8%;
    height: 92%;
    border-radius: 50%;
    background: #050000;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.6);
}

.cfx-peek-gaze {
    background: linear-gradient(90deg, rgba(255, 40, 40, 0) 0%, rgba(255, 90, 80, 0.55) 50%, rgba(255, 40, 40, 0) 100%);
    mix-blend-mode: screen;
    filter: blur(4px);
}

/* ── BOUNCE ───────────────────────────────────────────────── */

/* A three-toed dragon footprint, pressed into the ground. */
.cfx-footprint {
    left: 0;
    top: 0;
    width: 70px;
    height: 80px;
    clip-path: polygon(50% 100%, 22% 82%, 18% 55%, 4% 20%, 16% 16%, 30% 44%, 38% 6%, 50% 0%, 62% 6%, 70% 44%, 84% 16%, 96% 20%, 82% 55%, 78% 82%);
    background: radial-gradient(ellipse at 50% 60%, rgba(40, 24, 8, 0.9) 0%, rgba(80, 50, 20, 0.85) 60%, rgba(120, 80, 30, 0.6) 100%);
    filter: drop-shadow(0 0 6px rgba(230, 160, 80, 0.6));
}

.cfx-spring-ring {
    left: 0;
    top: 0;
    height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(255, 210, 140, 0.9);
    box-shadow: 0 0 10px rgba(230, 160, 80, 0.7);
}

/* ── GREED / LOOT ─────────────────────────────────────────── */

.cfx-coin {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c8 0%, #ffd24a 35%, #c98d00 75%, #8a5c00 100%);
    box-shadow: 0 0 6px rgba(255, 200, 60, 0.85), inset 0 0 0 1px rgba(140, 90, 0, 0.6);
}

.cfx-coin-spark {
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff2b0;
    box-shadow: 0 0 8px 2px rgba(255, 191, 0, 0.95);
}

.cfx-gold-pillar {
    transform-origin: 50% 100%;
    background: linear-gradient(90deg, rgba(255, 200, 60, 0) 0%, rgba(255, 220, 120, 0.7) 35%, #fff6d0 50%, rgba(255, 220, 120, 0.7) 65%, rgba(255, 200, 60, 0) 100%);
    box-shadow: 0 0 40px rgba(255, 191, 0, 0.6);
    mix-blend-mode: screen;
}

.cfx-card.cfx-greed-envy {
    box-shadow: 0 0 16px 3px rgba(120, 220, 90, 0.75);
}

.cfx-card.cfx-greed-envy img { filter: hue-rotate(40deg) saturate(1.2); }

.cfx-loot-chain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-loot-chain line {
    stroke: #e8dcb8;
    stroke-width: 4;
    stroke-dasharray: 7 4;
    filter: drop-shadow(0 0 3px rgba(255, 210, 110, 0.9));
}

/* A three-pronged golden claw. */
.cfx-claw-head {
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    clip-path: polygon(0 50%, 40% 30%, 70% 0, 62% 34%, 100% 30%, 70% 50%, 100% 70%, 62% 66%, 70% 100%, 40% 70%);
    background: linear-gradient(135deg, #fff4cc 0%, #ffbf00 50%, #8a6000 100%);
    filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.95));
}

.cfx-card.cfx-loot-seized {
    box-shadow: 0 0 0 2px #ffd24a, 0 0 18px rgba(255, 191, 0, 0.9);
}

/* ── QUERY ────────────────────────────────────────────────── */

/* A crimson scrying orb holding a hidden card. */
.cfx-crimson-orb {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 220, 230, 0.9) 0%, rgba(255, 60, 110, 0.75) 25%, rgba(140, 0, 50, 0.85) 60%, rgba(40, 0, 20, 0.9) 100%);
    box-shadow: 0 0 26px rgba(255, 40, 110, 0.85), inset 0 0 18px rgba(255, 150, 190, 0.6);
}

.cfx-orb-card {
    position: absolute;
    left: 28%;
    top: 20%;
    width: 44%;
    height: 60%;
    border-radius: 3px;
    background: linear-gradient(135deg, #2a1a10, #0f0a05);
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) blur(2px);
    box-shadow: 0 0 8px rgba(255, 120, 170, 0.6);
}

.cfx-query-burst {
    background: radial-gradient(circle, rgba(255, 230, 240, 0.95) 0%, rgba(255, 60, 120, 0.6) 35%, rgba(255, 30, 90, 0) 70%);
}

/* ── BIOLOGY ──────────────────────────────────────────────── */

.cfx-sea-ray {
    width: 60px;
    transform: skewX(-12deg);
    background: linear-gradient(180deg, rgba(200, 255, 245, 0.35) 0%, rgba(160, 240, 230, 0.12) 60%, rgba(160, 240, 230, 0) 100%);
    filter: blur(6px);
    mix-blend-mode: screen;
}

.cfx-bio-spiral {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-bio-spiral path {
    fill: none;
    stroke: #ffd98a;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.9)) drop-shadow(0 0 10px rgba(80, 220, 200, 0.6));
}

.cfx-card.cfx-bio-chosen {
    box-shadow: 0 0 0 2px rgba(120, 240, 220, 0.95), 0 0 20px rgba(80, 220, 200, 0.85);
}

/* ── BURY ─────────────────────────────────────────────────── */

/* A skeletal finger-bone reaching up out of the ground. */
.cfx-bone-claw {
    left: 0;
    top: 0;
    width: 10px;
    transform-origin: 50% 100%;
    clip-path: polygon(50% 0, 80% 14%, 64% 22%, 72% 48%, 60% 56%, 70% 100%, 30% 100%, 40% 56%, 28% 48%, 36% 22%, 20% 14%);
    background: linear-gradient(0deg, #8a8270 0%, #e8e2d0 60%, #fffaf0 100%);
    filter: drop-shadow(0 0 4px rgba(180, 230, 200, 0.7));
}

.cfx-card.cfx-bury-haunted {
    box-shadow: 0 0 18px 4px rgba(170, 230, 200, 0.7);
}

.cfx-card.cfx-bury-haunted img { filter: grayscale(0.6) sepia(0.2) hue-rotate(80deg) brightness(1.1); }

.cfx-bury-chain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-bury-chain path {
    fill: none;
    stroke: rgba(190, 240, 215, 0.9);
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(150, 230, 190, 0.9));
}

.cfx-dirt {
    width: 7px;
    height: 6px;
    border-radius: 40%;
    background: #5a4632;
}

.cfx-tombstone {
    left: 0;
    top: 0;
    width: 42px;
    height: 56px;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
    background: linear-gradient(180deg, #9a9ca2 0%, #5c5e64 100%);
    box-shadow: inset 0 0 0 2px rgba(40, 40, 46, 0.6), 0 0 14px rgba(180, 230, 200, 0.4);
}

/* ── BANISH ───────────────────────────────────────────────── */

.cfx-light-column {
    transform-origin: 50% 0;
    background: linear-gradient(90deg, rgba(255, 255, 240, 0) 0%, rgba(255, 255, 240, 0.55) 30%, #ffffff 50%, rgba(255, 255, 240, 0.55) 70%, rgba(255, 255, 240, 0) 100%);
    box-shadow: 0 0 60px rgba(255, 250, 220, 0.6);
    mix-blend-mode: screen;
}

.cfx-banish-halo {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 245, 210, 0.9);
    box-shadow: 0 0 22px rgba(255, 245, 210, 0.85), inset 0 0 18px rgba(255, 245, 210, 0.6);
}

.cfx-card.cfx-ghost-card {
    box-shadow: 0 0 22px 6px rgba(255, 255, 240, 0.7);
}

.cfx-card.cfx-ghost-card img { filter: grayscale(1) brightness(1.8) contrast(0.7); }

/* ── GENESIS + EXODUS finale additions (inside .ge-finale-overlay) ── */

/* The split sky: GENESIS's fire nebula on the left, EXODUS's emerald aurora on the right. */
.cfx-ge-sky {
    position: absolute;
    top: -20%;
    width: 80%;
    height: 140%;
    filter: blur(30px);
    mix-blend-mode: screen;
}

.cfx-ge-sky-gen {
    left: -20%;
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 140, 50, 0.55) 0%, rgba(230, 50, 130, 0.35) 35%, rgba(90, 40, 200, 0.2) 60%, rgba(0, 0, 0, 0) 80%);
}

.cfx-ge-sky-exo {
    right: -20%;
    background: radial-gradient(ellipse at 40% 50%, rgba(120, 255, 190, 0.45) 0%, rgba(255, 215, 110, 0.3) 35%, rgba(30, 120, 90, 0.2) 60%, rgba(0, 0, 0, 0) 80%);
}

.cfx-ge-rays {
    width: 140vmin;
    height: 140vmin;
}

/* A slowly turning ring of runes behind the pair. */
.cfx-ge-runes {
    position: absolute;
    width: 78vmin;
    height: 78vmin;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 110, 0.55);
    box-shadow: 0 0 30px rgba(255, 191, 0, 0.35), inset 0 0 30px rgba(255, 191, 0, 0.25);
    pointer-events: none;
}

.cfx-ge-rune {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 4vmin;
    line-height: 1;
    color: #ffe08a;
    text-shadow: 0 0 10px rgba(255, 191, 0, 0.9);
}

/* Each Ancient trails its own colour. */
.ge-trail.cfx-ge-trail-gen {
    background: radial-gradient(circle, rgba(255, 220, 140, 0.95) 0%, rgba(255, 90, 40, 0.6) 45%, transparent 70%);
}

.ge-trail.cfx-ge-trail-exo {
    background: radial-gradient(circle, rgba(220, 255, 230, 0.95) 0%, rgba(80, 220, 150, 0.55) 45%, transparent 70%);
}

/* EXODUS's wings: emerald membranes with golden bones. */
.cfx-wing-emerald {
    --bone: #ffe08a;
    background: radial-gradient(ellipse at var(--sx) 55%, rgba(170, 255, 210, 0.85) 0%, rgba(40, 180, 120, 0.78) 35%, rgba(10, 80, 60, 0.6) 70%, rgba(0, 30, 20, 0.4) 100%);
    mix-blend-mode: screen;
}

.cfx-ge-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff4c8;
    box-shadow: 0 0 8px 2px rgba(255, 200, 60, 0.9);
}

/* A wing's arm and finger bones, drawn over its membrane. */
.cfx-wing-bones {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-wing-bones path {
    stroke: var(--bone);
    stroke-linecap: round;
    fill: none;
}

.cfx-ring-tongue { mix-blend-mode: screen; }

/* ── Shared pieces for Batches F and G ───────────────────── */

.cfx-deck-mark {
    left: 0;
    top: 0;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.cfx-deck-mark-gold { color: #ffe08a; text-shadow: 0 0 10px rgba(255, 191, 0, 0.95), 0 0 2px #000; }
.cfx-deck-mark-teal { color: #a8fff4; text-shadow: 0 0 10px rgba(40, 220, 210, 0.95), 0 0 2px #000; }

.cfx-blink-gold { background: radial-gradient(circle, #ffffff 0%, rgba(255, 215, 100, 0.9) 22%, rgba(255, 191, 0, 0) 62%); }
.cfx-blink-teal { background: radial-gradient(circle, #ffffff 0%, rgba(120, 255, 240, 0.9) 22%, rgba(40, 220, 210, 0) 62%); }
.cfx-blink-pink { background: radial-gradient(circle, #ffffff 0%, rgba(255, 170, 220, 0.9) 22%, rgba(255, 120, 200, 0) 62%); }
.cfx-blink-neon { background: radial-gradient(circle, #ffffff 0%, rgba(120, 250, 255, 0.9) 18%, rgba(255, 90, 230, 0.6) 36%, rgba(255, 90, 230, 0) 62%); }
.cfx-blink-moon { background: radial-gradient(circle, #ffffff 0%, rgba(200, 210, 255, 0.85) 22%, rgba(120, 110, 200, 0) 62%); }

.cfx-shockwave-gold {
    border-color: rgba(255, 230, 150, 0.95);
    box-shadow: 0 0 24px rgba(255, 191, 0, 0.9), inset 0 0 18px rgba(255, 191, 0, 0.6);
}

.cfx-shockwave-teal {
    border-color: rgba(160, 255, 245, 0.9);
    box-shadow: 0 0 20px rgba(40, 220, 210, 0.85), inset 0 0 14px rgba(40, 220, 210, 0.6);
}

/* A rainbow ring: the conic fill shows only through the ring's border. */
.cfx-shockwave-prism {
    border: 8px solid transparent;
    background: conic-gradient(#ff5ad8, #ffd24a, #5affb0, #3ad0ff, #b06aff, #ff5ad8) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 120, 240, 0.9));
}

/* ── CHARITY: neon unicorn dragon in a neon jungle ─────────── */

.cfx-neon-mote {
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.cfx-neon-cyan   { box-shadow: 0 0 8px 3px rgba(60, 230, 255, 0.95); background: #d8fbff; }
.cfx-neon-pink   { box-shadow: 0 0 8px 3px rgba(255, 70, 220, 0.95); background: #ffd8f6; }
.cfx-neon-lime   { box-shadow: 0 0 8px 3px rgba(150, 255, 80, 0.95); background: #eaffd0; }
.cfx-neon-violet { box-shadow: 0 0 8px 3px rgba(170, 90, 255, 0.95); background: #ecdcff; }

/* A glowing fern frond: a stalk with leaflets, drawn in neon, standing on
   the bottom edge (its box hangs above its left/top anchor). */
.cfx-layer > .cfx-neon-frond {
    width: 34px;
    margin-left: -17px;
    translate: 0 -100%;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    background:
        linear-gradient(90deg, transparent 46%, currentColor 46% 54%, transparent 54%),
        repeating-linear-gradient(-35deg, transparent 0 9px, currentColor 9px 11px, transparent 11px 18px) left / 50% 100% no-repeat,
        repeating-linear-gradient(35deg, transparent 0 9px, currentColor 9px 11px, transparent 11px 18px) right / 50% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 6px currentColor);
    -webkit-mask: linear-gradient(0deg, #000 60%, transparent);
    mask: linear-gradient(0deg, #000 60%, transparent);
}

.cfx-layer > .cfx-neon-frond.cfx-neon-cyan   { color: rgba(60, 230, 255, 0.75); }
.cfx-layer > .cfx-neon-frond.cfx-neon-pink   { color: rgba(255, 70, 220, 0.7); }
.cfx-layer > .cfx-neon-frond.cfx-neon-lime   { color: rgba(150, 255, 80, 0.7); }
.cfx-layer > .cfx-neon-frond.cfx-neon-violet { color: rgba(170, 90, 255, 0.75); }

/* The spiral unicorn horn: a twisted, striped lance of light. */
.cfx-horn-lance {
    height: 12px;
    margin-top: -6px;
    transform-origin: 0 50%;
    border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(115deg, #ffffff 0 5px, #ff7ae0 5px 11px, #7af0ff 11px 17px);
    box-shadow: 0 0 14px 3px rgba(255, 90, 216, 0.85), 0 0 30px 6px rgba(90, 240, 255, 0.55);
}

.cfx-card.cfx-gift { box-shadow: 0 0 0 2px #7af0ff, 0 0 22px 6px rgba(60, 230, 255, 0.75); overflow: visible; color: #36d6ff; }
.cfx-card.cfx-gift-rival { box-shadow: 0 0 0 2px #ff7ae0, 0 0 22px 6px rgba(255, 70, 220, 0.75); overflow: visible; color: #ff3ad0; }
.cfx-card.cfx-gift img, .cfx-card.cfx-gift-rival img { border-radius: 5px; }

.cfx-ribbon-v,
.cfx-ribbon-h,
.cfx-ribbon-bow {
    position: absolute;
    pointer-events: none;
}

/* The ribbon bands: a satin stripe in the gift's colour. */
.cfx-ribbon-v { left: 44%; width: 12%; top: 0; bottom: 0; }
.cfx-ribbon-h { top: 44%; height: 9%; left: 0; right: 0; }

.cfx-ribbon-v,
.cfx-ribbon-h {
    background-color: currentColor;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.15));
    box-shadow: 0 0 8px currentColor;
}

.cfx-ribbon-h { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.15)); }

/* The bow: two loops either side of a knot. */
.cfx-ribbon-bow {
    left: 50%;
    top: 48.5%;
    width: 64%;
    height: 26%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 8%, transparent 9%),
        radial-gradient(ellipse 26% 42% at 27% 50%, transparent 0 45%, currentColor 48% 100%, transparent 100%),
        radial-gradient(ellipse 26% 42% at 73% 50%, transparent 0 45%, currentColor 48% 100%, transparent 100%);
    filter: drop-shadow(0 0 6px currentColor);
}

/* ── DECIDE: teal cosmic dragon, pearl halo, light from above ─── */

.cfx-decide-shaft {
    transform-origin: 50% 0;
    background: linear-gradient(90deg, rgba(120, 255, 240, 0) 0%, rgba(170, 255, 245, 0.35) 30%, rgba(230, 255, 252, 0.55) 50%,
        rgba(170, 255, 245, 0.35) 70%, rgba(120, 255, 240, 0) 100%);
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mix-blend-mode: screen;
    filter: blur(4px);
}

.cfx-decide-mote {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #dffffb;
    box-shadow: 0 0 6px 2px rgba(80, 230, 220, 0.8);
}

.cfx-pearl-halo {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(160, 255, 245, 0.35);
    box-shadow: 0 0 30px rgba(80, 230, 220, 0.5), inset 0 0 30px rgba(80, 230, 220, 0.35);
}

.cfx-pearl {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e6fffb 30%, #9fd8e0 70%, #6aa8b8 100%);
    box-shadow: 0 0 10px rgba(120, 255, 240, 0.9);
}

/* The winged sprite from the art: a point of light with fluttering wings. */
.cfx-fairy {
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px 4px rgba(170, 255, 245, 0.95), 0 0 30px 10px rgba(80, 230, 220, 0.6);
}

.cfx-fairy::before,
.cfx-fairy::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 14px;
    height: 18px;
    border-radius: 50%;
    background: rgba(200, 255, 250, 0.55);
    animation: cfx-flutter 0.12s ease-in-out infinite alternate;
}

.cfx-fairy::before { right: 8px; transform-origin: 100% 80%; }
.cfx-fairy::after { left: 8px; transform-origin: 0 80%; }

@keyframes cfx-flutter {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.3); }
}

.cfx-stardust-teal { background: #e6fffb; box-shadow: 0 0 6px 2px rgba(80, 230, 220, 0.85); }
.cfx-stardust-violet { background: #f0e6ff; box-shadow: 0 0 6px 2px rgba(170, 140, 255, 0.85); }

.cfx-card.cfx-decide-card { box-shadow: 0 0 0 2px rgba(170, 255, 245, 0.8), 0 0 24px 6px rgba(60, 220, 210, 0.6); }

.cfx-decide-verdict-up {
    border-radius: 8px;
    border: 3px solid #ffe08a;
    box-shadow: 0 0 24px 6px rgba(255, 191, 0, 0.85), inset 0 0 18px rgba(255, 191, 0, 0.5);
}

.cfx-decide-verdict-down {
    border-radius: 8px;
    border: 3px solid rgba(120, 220, 230, 0.8);
    box-shadow: 0 0 18px 4px rgba(20, 120, 140, 0.8);
    background: rgba(0, 20, 30, 0.35);
}

/* ── CLEVER: sly black dragon with gold-tipped spines ─────── */

.cfx-clever-spine {
    width: 30px;
    transform-origin: 50% 100%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(0deg, #0c0904 0%, #2a1e08 45%, #c99a2e 85%, #ffe39a 100%);
}

.cfx-clever-gleam {
    border-radius: 6px;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 190, 0.85) 50%, transparent 65%) no-repeat;
    background-size: 200% 100%;
    mix-blend-mode: screen;
}

.cfx-card.cfx-clever-back { box-shadow: 0 0 0 1px rgba(255, 215, 120, 0.8), 0 0 16px 3px rgba(255, 191, 0, 0.5); }
.cfx-card.cfx-clever-real { box-shadow: 0 0 0 2px #ffe08a, 0 0 26px 8px rgba(255, 191, 0, 0.8); }

.cfx-smoke-puff {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 26, 20, 0.95) 0%, rgba(20, 18, 14, 0.6) 40%, rgba(10, 8, 6, 0) 70%);
    filter: blur(4px);
}

/* ── COAX: grinning, coiled serpent with iridescent scales ─── */

.cfx-coax-ring {
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: conic-gradient(#5affb0, #3ad0ff, #b06aff, #ffd24a, #5affb0) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 6px rgba(90, 255, 180, 0.8));
}

/* The hypnosis spiral: rainbow spokes over rippling rings. */
.cfx-coax-spiral {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(90, 255, 176, 0.7) 0 10deg, rgba(10, 30, 30, 0) 10deg 30deg, rgba(176, 106, 255, 0.7) 30deg 40deg, rgba(10, 30, 30, 0) 40deg 60deg),
        repeating-radial-gradient(circle, rgba(58, 208, 255, 0.45) 0 6px, rgba(0, 0, 0, 0) 6px 16px);
    -webkit-mask: radial-gradient(circle, #000 0%, #000 55%, transparent 70%);
    mask: radial-gradient(circle, #000 0%, #000 55%, transparent 70%);
    mix-blend-mode: screen;
}

.cfx-coax-coil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-coax-coil .cfx-coax-body {
    fill: none;
    stroke: url(#cfx-coax-grad);
    stroke-width: 26;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(90, 255, 180, 0.7));
}

.cfx-coax-coil .cfx-coax-scales {
    fill: none;
    stroke: rgba(255, 255, 240, 0.75);
    stroke-width: 10;
    stroke-linecap: round;
}

.cfx-card.cfx-coax-card { box-shadow: 0 0 0 2px #5affb0, 0 0 22px 6px rgba(120, 90, 255, 0.6), 0 0 40px 10px rgba(90, 255, 180, 0.35); }

/* ── GARDEN: little green dragon with a trowel, in a flower garden ── */

.cfx-garden-sun {
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0%, rgba(255, 240, 160, 0.9) 22%, rgba(255, 220, 100, 0.35) 45%, rgba(255, 220, 100, 0) 70%);
    mix-blend-mode: screen;
}

.cfx-pollen {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff6b0;
    box-shadow: 0 0 5px 1px rgba(255, 230, 120, 0.8);
}

.cfx-butterfly {
    width: 22px;
    height: 16px;
}

.cfx-bwing-l,
.cfx-bwing-r {
    position: absolute;
    top: 0;
    width: 11px;
    height: 16px;
    border-radius: 60% 40% 50% 60%;
    animation: cfx-flap 0.16s ease-in-out infinite alternate;
}

.cfx-bwing-l { left: 0; transform-origin: 100% 50%; }
.cfx-bwing-r { right: 0; transform-origin: 0 50%; border-radius: 40% 60% 60% 50%; }

.cfx-butterfly-pink .cfx-bwing-l, .cfx-butterfly-pink .cfx-bwing-r { background: radial-gradient(circle at 50% 40%, #fff2f8 0 18%, #ff7ab8 20% 70%, #a0306a 72%); }
.cfx-butterfly-blue .cfx-bwing-l, .cfx-butterfly-blue .cfx-bwing-r { background: radial-gradient(circle at 50% 40%, #f0fbff 0 18%, #5ab8ff 20% 70%, #24508a 72%); }

@keyframes cfx-flap {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.2); }
}

/* A garden trowel: a wooden handle above a pointed steel blade. */
.cfx-trowel {
    left: 0;
    top: 0;
    width: 26px;
    height: 84px;
    transform-origin: 50% 100%;
    background:
        linear-gradient(90deg, #6b4423, #a8743c 45%, #5a3a1c) 50% 0 / 9px 38px no-repeat,
        linear-gradient(180deg, #8f6a3a, #8f6a3a) 50% 38px / 5px 8px no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.cfx-trowel::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 40px;
    clip-path: polygon(10% 0, 90% 0, 100% 45%, 50% 100%, 0 45%);
    background: linear-gradient(90deg, #8d939c, #e6eaef 45%, #9aa1aa);
}

.cfx-garden-stem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-garden-stem path {
    fill: none;
    stroke: #4fb83a;
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(120, 230, 80, 0.7));
}

.cfx-leaf {
    width: 30px;
    height: 16px;
    transform-origin: 0 50%;
    border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg, #b6f07a, #3f9a2a);
    box-shadow: 0 0 6px rgba(120, 230, 80, 0.5);
}

.cfx-bloom {
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.cfx-bloom::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7b0 0 45%, #ffc93a 50% 100%);
    box-shadow: 0 0 10px rgba(255, 210, 80, 0.8);
}

.cfx-petal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 54px;
    margin: -54px 0 0 -15px;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: linear-gradient(0deg, #ff7ab8 0%, #ffc4dd 70%, #fff0f6 100%);
    box-shadow: 0 0 10px rgba(255, 140, 190, 0.6);
}

/* A little five-petal flower, coloured by currentColor. */
.cfx-flower {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff3a0 0 20%, transparent 22%),
        radial-gradient(circle at 50% 14%, currentColor 0 20%, transparent 22%),
        radial-gradient(circle at 86% 40%, currentColor 0 20%, transparent 22%),
        radial-gradient(circle at 72% 82%, currentColor 0 20%, transparent 22%),
        radial-gradient(circle at 28% 82%, currentColor 0 20%, transparent 22%),
        radial-gradient(circle at 14% 40%, currentColor 0 20%, transparent 22%);
    filter: drop-shadow(0 0 4px currentColor);
}

.cfx-flower-pink { color: #ff7ab8; }
.cfx-flower-gold { color: #ffcf3a; }
.cfx-flower-violet { color: #b07aff; }
.cfx-flower-red { color: #ff5a4a; }

.cfx-card.cfx-garden-card { box-shadow: 0 0 0 2px #b6f07a, 0 0 24px 6px rgba(120, 230, 80, 0.7); }

.cfx-petal-mote {
    left: 0;
    top: 0;
    width: 9px;
    height: 6px;
    border-radius: 50% 0 50% 0;
    background: linear-gradient(135deg, #ffd0e6, #ff7ab8);
    box-shadow: 0 0 4px rgba(255, 140, 190, 0.7);
}

/* ── CUTE: pastel rainbow baby dragon ─────────────────────── */

.cfx-bokeh {
    --cfx-rgb: 255, 170, 220;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--cfx-rgb), 0.55) 0%, rgba(var(--cfx-rgb), 0.3) 55%, rgba(var(--cfx-rgb), 0) 72%);
    filter: blur(2px);
    mix-blend-mode: screen;
}

/* A four-point twinkle. */
.cfx-twinkle {
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: #fffaff;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 4px #ffc4f0);
}

.cfx-heart {
    --cfx-rgb: 255, 170, 220;
    left: 0;
    top: 0;
    line-height: 1;
    color: rgb(var(--cfx-rgb));
    text-shadow: 0 0 8px rgba(var(--cfx-rgb), 0.95), 0 0 2px #fff;
}

.cfx-heart-small { font-size: 16px; }

.cfx-heart-mote {
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffe0f2;
    box-shadow: 0 0 8px 3px rgba(255, 150, 210, 0.95);
}

.cfx-rainbow {
    background: radial-gradient(ellipse 50% 100% at 50% 100%,
        transparent 0 66%, rgba(255, 154, 213, 0.9) 66% 70%, rgba(255, 210, 122, 0.9) 70% 74%, rgba(255, 245, 154, 0.9) 74% 78%,
        rgba(158, 245, 176, 0.9) 78% 82%, rgba(138, 216, 255, 0.9) 82% 86%, rgba(199, 155, 255, 0.9) 86% 90%, transparent 90%);
    filter: blur(1.5px) drop-shadow(0 0 10px rgba(255, 220, 255, 0.6));
    mix-blend-mode: screen;
}

.cfx-cute-glow {
    border-radius: 8px;
    border: 3px solid #ffc4ea;
    background: rgba(255, 190, 235, 0.22);
    box-shadow: 0 0 20px 5px rgba(255, 150, 210, 0.75), inset 0 0 14px rgba(255, 220, 245, 0.6);
}

/* A bubbly, candy-coloured "1". */
.cfx-cute-one {
    left: 0;
    top: 0;
    font-family: 'Arial Rounded MT Bold', 'Nunito', 'Varela Round', sans-serif;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    -webkit-text-stroke: 3px #ff6ab8;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #c9408a, 0 0 14px rgba(255, 150, 210, 0.95);
}

.cfx-card.cfx-cute-card { box-shadow: 0 0 0 2px #ffc4ea, 0 0 22px 6px rgba(255, 150, 210, 0.75); }

/* ── DOUBLE: twin dragons, silver-blue and gold ───────────── */

.cfx-double-helix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-double-helix .cfx-twin-silver,
.cfx-double-helix .cfx-twin-gold {
    fill: none;
    stroke-width: 22;
    stroke-linecap: round;
}

.cfx-double-helix .cfx-twin-silver { stroke: #9fc4ea; filter: drop-shadow(0 0 3px #eaf4ff) drop-shadow(0 0 14px rgba(110, 170, 240, 0.8)); }
.cfx-double-helix .cfx-twin-gold { stroke: #d9a640; filter: drop-shadow(0 0 3px #fff2c0) drop-shadow(0 0 14px rgba(255, 180, 40, 0.8)); }
.cfx-double-helix .cfx-twin-scales { stroke-width: 8; filter: none; }
.cfx-double-helix .cfx-twin-silver.cfx-twin-scales { stroke: #f2f8ff; }
.cfx-double-helix .cfx-twin-gold.cfx-twin-scales { stroke: #fff4cc; }

.cfx-twin-frame-silver,
.cfx-twin-frame-gold {
    border-radius: 8px;
    border: 3px solid;
}

.cfx-twin-frame-silver { border-color: #cfe4ff; box-shadow: 0 0 18px 4px rgba(110, 170, 240, 0.85); background: rgba(150, 195, 240, 0.18); }
.cfx-twin-frame-gold { border-color: #ffe08a; box-shadow: 0 0 18px 4px rgba(255, 180, 40, 0.85); background: rgba(240, 190, 80, 0.18); }

.cfx-double-flash {
    border-radius: 8px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9) 0%, rgba(255, 230, 170, 0.5) 50%, rgba(255, 230, 170, 0) 80%);
    mix-blend-mode: screen;
}

.cfx-spark-silver {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f2f8ff;
    box-shadow: 0 0 8px 2px rgba(130, 180, 255, 0.95);
}

.cfx-double-stamp {
    left: 0;
    top: 0;
    font-weight: 900;
    line-height: 1;
    font-family: 'DragonSlayer', Georgia, serif;
    background: linear-gradient(90deg, #e6f2ff 0%, #9fc4ea 45%, #ffe08a 55%, #d9a640 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 10px rgba(255, 220, 140, 0.8));
}

.cfx-card.cfx-double-echo { opacity: 0.5; filter: hue-rotate(180deg) brightness(1.2); }

/* ── FIERCE: crimson dragon roaring before a castle under the moon ── */

.cfx-fierce-moon {
    left: 0;
    top: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 40%, #fff2e0 0%, #ffd6b0 40%, #e88a6a 70%, #a03a2a 100%);
    box-shadow: 0 0 60px 20px rgba(255, 120, 80, 0.45), 0 0 140px 60px rgba(200, 40, 20, 0.3);
}

/* Battlements and towers along the bottom of the screen. */
.cfx-castle {
    background: linear-gradient(180deg, #4a1208 0%, #1a0604 12%, #050100 100%);
    clip-path: polygon(0 100%, 0 40%, 4% 40%, 4% 30%, 6% 30%, 6% 40%, 9% 40%, 9% 30%, 11% 30%, 11% 40%, 14% 40%,
        14% 8%, 15% 0, 16% 8%, 16% 18%, 19% 18%, 19% 40%, 30% 40%, 30% 30%, 32% 30%, 32% 40%, 35% 40%, 35% 30%, 37% 30%, 37% 40%,
        44% 40%, 44% 22%, 46% 14%, 48% 22%, 48% 40%, 60% 40%, 60% 30%, 62% 30%, 62% 40%, 65% 40%, 65% 30%, 67% 30%, 67% 40%,
        76% 40%, 76% 4%, 77.5% 0, 79% 4%, 79% 14%, 82% 14%, 82% 40%, 88% 40%, 88% 30%, 90% 30%, 90% 40%, 93% 40%, 93% 30%, 95% 30%,
        95% 40%, 100% 40%, 100% 100%);
}

.cfx-fierce-slash {
    left: 0;
    top: 0;
    height: 20px;
    background: linear-gradient(90deg, rgba(255, 220, 160, 0) 0%, #fff2d0 30%, #ff8a3a 55%, #d81e0a 80%, rgba(120, 0, 0, 0) 100%);
    filter: drop-shadow(0 0 10px rgba(255, 70, 20, 0.95));
    clip-path: polygon(0 50%, 15% 20%, 85% 0, 100% 50%, 85% 100%, 15% 80%);
}

.cfx-fierce-hit {
    border-radius: 8px;
    border: 2px solid rgba(255, 90, 40, 0.95);
    background: rgba(200, 20, 0, 0.3);
    box-shadow: 0 0 20px 4px rgba(255, 50, 10, 0.8), inset 0 0 16px rgba(255, 60, 20, 0.6);
}

.cfx-fierce-icon {
    left: 0;
    top: 0;
    filter: drop-shadow(0 0 14px rgba(255, 60, 20, 0.9));
}

/* A kite shield: steel rim, crimson field, gold boss stripe. */
.cfx-shield-face {
    position: absolute;
    inset: 14% 22%;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
    background:
        linear-gradient(90deg, transparent 46%, rgba(255, 220, 160, 0.8) 46% 54%, transparent 54%),
        linear-gradient(160deg, #c93a20, #6a0e04);
    box-shadow: inset 0 0 0 5px #d8d0c4;
}

/* A sword, point up: leather grip (the box), steel blade, gold guard. */
.cfx-sword {
    position: absolute;
    left: 46%;
    top: 4%;
    width: 8%;
    height: 92%;
    background: linear-gradient(90deg, #4a2e16, #8a5a2a, #4a2e16) 50% 100% / 70% 19% no-repeat;
}

.cfx-sword::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 77%;
    background: linear-gradient(90deg, #9aa1aa, #f2f4f6 50%, #9aa1aa);
    clip-path: polygon(50% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
}

.cfx-sword::after {
    content: '';
    position: absolute;
    left: -110%;
    top: 76%;
    width: 320%;
    height: 5%;
    border-radius: 3px;
    background: linear-gradient(90deg, #b8874a, #ffe08a, #b8874a);
}

.cfx-sword-a { transform: rotate(40deg); }
.cfx-sword-b { transform: rotate(-40deg); }

/* The red ban ring with its bar. */
.cfx-ban {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 12px solid #e8251a;
    box-shadow: 0 0 18px rgba(255, 40, 10, 0.9), inset 0 0 12px rgba(255, 40, 10, 0.7);
}

.cfx-ban::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 12px;
    background: #e8251a;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 0 12px rgba(255, 40, 10, 0.9);
}

/* ── SAVE: turquoise dragon in jewelled, pearl-studded armour ── */

.cfx-pearl-bubble {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eafdfd 35%, #b8e2e6 70%, #8cc0c8 100%);
    border-color: rgba(255, 255, 255, 0.9);
}

/* A dome of iridescent scales standing over the protected row. */
.cfx-save-dome {
    overflow: hidden;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 3px solid rgba(160, 255, 245, 0.85);
    border-bottom: none;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.22) 0 30%, transparent 31%) 0 0 / 28px 20px,
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.22) 0 30%, transparent 31%) 14px 10px / 28px 20px,
        linear-gradient(120deg, rgba(90, 220, 230, 0.32), rgba(150, 120, 255, 0.24) 40%, rgba(255, 150, 210, 0.22) 70%, rgba(90, 220, 230, 0.3));
    box-shadow: 0 0 30px 6px rgba(80, 230, 220, 0.55), inset 0 0 40px rgba(160, 255, 245, 0.45);
}

.cfx-save-sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

.cfx-save-jewel {
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.cfx-save-jewel-pink { background: linear-gradient(135deg, #ffe0f0, #ff6ab8 60%, #a02a6a); filter: drop-shadow(0 0 6px #ff8ad0); }
.cfx-save-jewel-teal { background: linear-gradient(135deg, #e0fffb, #3ad8d0 60%, #0a6a70); filter: drop-shadow(0 0 6px #6affef); }

/* A pearl bubble sealing a card. */
.cfx-save-bubble {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(220, 255, 252, 0.85);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle at 50% 50%, rgba(160, 255, 245, 0) 55%, rgba(160, 255, 245, 0.28) 75%, rgba(200, 160, 255, 0.35) 100%);
    box-shadow: 0 0 18px rgba(80, 230, 220, 0.65), inset 0 0 18px rgba(200, 255, 250, 0.4);
}

.cfx-spark-aqua {
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e6fffb;
    box-shadow: 0 0 8px 2px rgba(60, 230, 220, 0.95);
}

/* ── SLEEP: violet dragon dozing on the clouds ────────────── */

/* A crescent moon: the lit rim of a disc, its shadow side bitten out. */
.cfx-sleep-moon {
    left: 0;
    top: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: inset -22px 10px 0 0 #fff4c8;
    filter: drop-shadow(0 0 16px rgba(255, 240, 180, 0.8));
}

.cfx-cloud {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 60%, #ffffff 0 30%, transparent 31%),
        radial-gradient(circle at 55% 40%, #ffffff 0 34%, transparent 35%),
        radial-gradient(circle at 75% 62%, #ffffff 0 28%, transparent 29%);
    filter: blur(3px) drop-shadow(0 4px 10px rgba(120, 100, 200, 0.5));
}

.cfx-card.cfx-sleep-card { box-shadow: 0 0 22px 6px rgba(170, 140, 255, 0.6); }

.cfx-sleep-veil {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 220, 140, 0.8);
    background: linear-gradient(160deg, rgba(20, 14, 50, 0.3), rgba(20, 14, 50, 0.55));
    text-shadow: 0 0 10px rgba(255, 220, 140, 0.9);
}

.cfx-zzz {
    left: 0;
    top: 0;
    font-weight: 900;
    font-family: Georgia, serif;
    line-height: 1;
    color: #ece4ff;
    text-shadow: 0 0 10px rgba(170, 140, 255, 0.95), 0 0 2px #2a1a60;
}

/* ── SHADE: hooded, winged shadow before a full moon ──────── */

.cfx-shade-moon {
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 42%, #ffffff 0%, #eef0ff 45%, #c8cce8 70%, #9aa0c8 100%);
    box-shadow: 0 0 70px 26px rgba(200, 210, 255, 0.45), 0 0 160px 70px rgba(120, 130, 220, 0.25);
}

.cfx-mist {
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(220, 225, 245, 0.55) 0%, rgba(180, 185, 220, 0.25) 45%, rgba(180, 185, 220, 0) 70%);
    filter: blur(8px);
}

.cfx-wing-shade {
    --bone: rgba(110, 100, 160, 0.4);
    background: radial-gradient(ellipse at var(--sx) 55%, #2c2844 0%, #14121f 40%, #06050c 75%, #040309 100%);
}

.cfx-shade-feather {
    width: 9px;
    height: 26px;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    background: linear-gradient(90deg, #08070e 0%, #24203a 50%, #0c0a16 100%);
    box-shadow: 0 0 6px rgba(150, 140, 220, 0.5);
}

.cfx-shade-sweep {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(6, 4, 14, 0.85) 40%, rgba(6, 4, 14, 0.85) 60%, rgba(0, 0, 0, 0) 100%);
    filter: blur(6px);
}

.cfx-shade-veil {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8dcff;
    background: linear-gradient(160deg, rgba(14, 10, 30, 0.82), rgba(4, 2, 12, 0.9));
    box-shadow: 0 0 14px rgba(150, 140, 220, 0.6), inset 0 0 0 1px rgba(150, 140, 220, 0.6);
    text-shadow: 0 0 10px rgba(200, 210, 255, 0.95);
}

.cfx-shade-wisp {
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 24, 60, 0.9) 0%, rgba(30, 24, 60, 0) 70%);
    box-shadow: 0 0 8px rgba(150, 140, 220, 0.5);
}

.cfx-card.cfx-shade-cloak { box-shadow: 0 0 0 2px rgba(150, 140, 220, 0.8), 0 0 24px 8px rgba(10, 6, 30, 0.9); filter: brightness(0.75) saturate(0.7); }

/* ══ Batch H ══════════════════════════════════════════════════ */

/* ── WILD ─────────────────────────────────────────────────── */

/* A kaleidoscope rosette: mirrored prism wedges, soft-edged. */
.cfx-wild-kaleido {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255, 90, 216, 0.75) 0deg 15deg, rgba(255, 210, 74, 0.7) 15deg 30deg,
            rgba(90, 255, 176, 0.65) 30deg 45deg, rgba(58, 208, 255, 0.7) 45deg 60deg);
    -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 30% 52%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 18%, #000 30% 52%, transparent 70%);
    mix-blend-mode: screen;
    filter: blur(1px) saturate(1.3);
}

.cfx-wild-kaleido-b {
    background:
        repeating-conic-gradient(from 7deg, rgba(176, 106, 255, 0.8) 0deg 10deg, rgba(255, 255, 255, 0.35) 10deg 14deg,
            rgba(58, 208, 255, 0.75) 14deg 24deg, rgba(255, 90, 216, 0.75) 24deg 36deg);
    -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 42% 60%, transparent 72%);
    mask: radial-gradient(circle, transparent 0 34%, #000 42% 60%, transparent 72%);
}

/* Stained-glass shards: leaded edges, a colour each. */
.cfx-wild-shard {
    clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 86%, 0 30%);
    border: 1px solid rgba(20, 10, 30, 0.6);
    mix-blend-mode: screen;
}

.cfx-wild-shard-0 { background: linear-gradient(135deg, #ff9ae6, #ff3ac8); box-shadow: 0 0 10px #ff5ad8; }
.cfx-wild-shard-1 { background: linear-gradient(135deg, #fff1a0, #ffb800); box-shadow: 0 0 10px #ffd24a; }
.cfx-wild-shard-2 { background: linear-gradient(135deg, #b8ffe0, #22e08f); box-shadow: 0 0 10px #5affb0; }
.cfx-wild-shard-3 { background: linear-gradient(135deg, #b8ecff, #1aa6ff); box-shadow: 0 0 10px #3ad0ff; }
.cfx-wild-shard-4 { background: linear-gradient(135deg, #e2c8ff, #8a3aff); box-shadow: 0 0 10px #b06aff; }

/* The copied card, framed in shifting prism light. */
.cfx-wild-frame {
    border-radius: 9px;
    border: 3px solid transparent;
    background: conic-gradient(#ff5ad8, #ffd24a, #5affb0, #3ad0ff, #b06aff, #ff5ad8) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 8px rgba(255, 120, 240, 0.9));
}

/* The prism beam: a white core inside a rainbow sheath. */
.cfx-wild-beam {
    height: 12px;
    transform-origin: 0 50%;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #ff5ad8 0%, #ffd24a 25%, #5affb0 50%, #3ad0ff 75%, #b06aff 100%);
    box-shadow: 0 0 14px rgba(255, 150, 240, 0.85);
    mix-blend-mode: screen;
}

.cfx-wild-mote {
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255, 90, 216, 0.9), 0 0 12px 4px rgba(58, 208, 255, 0.6);
}

.cfx-wild-card {
    box-shadow: 0 0 18px 4px rgba(255, 120, 240, 0.6), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.cfx-wild-done {
    box-shadow: 0 0 26px 8px rgba(255, 210, 120, 0.75), 0 0 10px 2px rgba(90, 255, 200, 0.7);
}

/* A tile of the card — its slice of the art, leaded like stained glass. */
.cfx-wild-tile {
    background-color: rgba(60, 30, 90, 0.9);
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(20, 10, 30, 0.7), 0 0 8px rgba(255, 120, 240, 0.55);
    backface-visibility: visible;
}

.cfx-wild-glint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: screen;
}

/* ── ZOMBIE ───────────────────────────────────────────────── */

.cfx-zombie-moon {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 38%, rgba(150, 160, 150, 0.55) 0%, rgba(150, 160, 150, 0) 9%),
        radial-gradient(circle at 62% 28%, rgba(150, 160, 150, 0.5) 0%, rgba(150, 160, 150, 0) 7%),
        radial-gradient(circle at 56% 64%, rgba(140, 150, 140, 0.5) 0%, rgba(140, 150, 140, 0) 12%),
        radial-gradient(circle at 26% 70%, rgba(150, 160, 150, 0.45) 0%, rgba(150, 160, 150, 0) 6%),
        radial-gradient(circle, #f4f6ea 0%, #dfe4d2 55%, #b9c2ac 70%, rgba(185, 194, 172, 0) 71%);
    box-shadow: 0 0 90px 30px rgba(200, 230, 210, 0.3);
}

.cfx-zombie-fog {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(140, 190, 170, 0.45) 0%, rgba(80, 130, 120, 0) 70%);
    filter: blur(10px);
}

.cfx-zombie-glow {
    left: 0;
    top: 0;
    width: 200px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(170, 255, 150, 0.85) 0%, rgba(60, 200, 90, 0.45) 35%, rgba(30, 120, 60, 0) 70%);
    mix-blend-mode: screen;
    filter: blur(4px);
}

.cfx-zombie-claw {
    position: absolute;
    overflow: visible;
    transform-origin: 50% 100%;
}

.cfx-zombie-claw path {
    fill: none;
    stroke: #e8e2c8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(120, 255, 140, 0.8));
}

.cfx-zombie-claw circle {
    fill: #d8d2b4;
}

.cfx-zombie-eye {
    left: 0;
    top: 0;
    width: 14px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #ffffff 0%, #9dff7a 40%, rgba(60, 220, 80, 0) 75%);
    box-shadow: 0 0 12px 4px rgba(120, 255, 100, 0.8);
}

/* The copied card's spirit: its art, ghostly green and see-through. */
.cfx-zombie-spirit {
    filter: sepia(0.4) hue-rotate(60deg) saturate(1.4) brightness(1.2) blur(0.5px);
    box-shadow: 0 0 22px 6px rgba(120, 255, 140, 0.7);
    background: rgba(40, 120, 60, 0.4);
}

.cfx-zombie-wisp {
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 255, 210, 0.95) 0%, rgba(90, 220, 110, 0.6) 45%, rgba(60, 180, 80, 0) 75%);
    filter: blur(1px);
}

.cfx-zombie-card {
    box-shadow: 0 0 24px 6px rgba(110, 230, 120, 0.75), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.cfx-zombie-veins {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-zombie-veins path {
    fill: none;
    stroke: #8dff74;
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px #2fdc4a);
    opacity: 0.85;
}

.cfx-shockwave-zombie {
    border-color: rgba(190, 255, 170, 0.9);
    box-shadow: 0 0 22px rgba(80, 220, 100, 0.9), inset 0 0 16px rgba(80, 220, 100, 0.6);
}

/* A bat: a body with two scalloped wings. */
.cfx-zombie-bat {
    left: 0;
    top: 0;
    width: 30px;
    height: 12px;
    background: #050a0c;
    clip-path: polygon(50% 20%, 58% 0, 62% 30%, 80% 10%, 100% 30%, 88% 50%, 76% 44%, 66% 70%, 50% 100%, 34% 70%, 24% 44%, 12% 50%, 0 30%, 20% 10%, 38% 30%, 42% 0);
}

/* ── AGAIN ────────────────────────────────────────────────── */

.cfx-again-cloud {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.6) 0%, rgba(230, 240, 255, 0.3) 45%, rgba(230, 240, 255, 0) 70%);
    filter: blur(8px);
}

.cfx-again-wind {
    height: 2px;
    border-radius: 2px;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 6px rgba(200, 230, 255, 0.8);
}

/* A white feather: a quill-split vane. */
.cfx-again-feather {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 46%, rgba(190, 210, 235, 0.9) 50%, rgba(240, 246, 255, 0.95) 54%);
    box-shadow: 0 0 6px rgba(200, 225, 255, 0.8);
}

/* The art's sweeping arcs: partial rings, brighter at one end. */
.cfx-again-ring {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.9);
    border-right-color: rgba(190, 225, 255, 0.6);
    box-shadow: 0 -4px 12px -4px rgba(200, 230, 255, 0.8);
}

/* The rewind dial: ticks round a pale face; its hand spins backwards. */
.cfx-again-dial {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background:
        radial-gradient(circle closest-side, rgba(30, 50, 90, 0.8) 0 84%, rgba(30, 50, 90, 0) 85%),
        repeating-conic-gradient(rgba(255, 255, 255, 0.9) 0deg 2deg, rgba(255, 255, 255, 0) 2deg 30deg);
    box-shadow: 0 0 16px rgba(200, 230, 255, 0.8);
}

.cfx-again-hand {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -2deg, rgba(255, 255, 255, 0.9) 0deg 4deg, rgba(190, 220, 255, 0.35) 4deg 70deg, rgba(255, 255, 255, 0) 70deg);
}

.cfx-again-card {
    box-shadow: 0 0 18px 4px rgba(210, 235, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.cfx-again-echo {
    filter: brightness(1.6) saturate(0.4) blur(1px);
    box-shadow: 0 0 14px rgba(220, 240, 255, 0.7);
}

.cfx-again-mote {
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px 3px rgba(190, 225, 255, 0.9);
}

.cfx-again-glyph {
    left: 0;
    top: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 10px #9fd4ff, 0 0 22px #5aa9e6;
}

/* ── ROT ──────────────────────────────────────────────────── */

.cfx-rot-mist {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(150, 170, 110, 0.4) 0%, rgba(90, 110, 60, 0) 70%);
    filter: blur(10px);
}

.cfx-rot-spore {
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d6e8a0;
    box-shadow: 0 0 6px 2px rgba(170, 200, 90, 0.7);
}

.cfx-rot-fly {
    left: 0;
    top: 0;
    width: 5px;
    height: 4px;
    border-radius: 50%;
    background: #10140a;
    box-shadow: -3px -2px 0 -1px rgba(220, 230, 255, 0.55), 3px -2px 0 -1px rgba(220, 230, 255, 0.55);
}

.cfx-rot-card {
    box-shadow: 0 0 16px 4px rgba(120, 150, 60, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* A patch of mould: a dark core with a fuzzy, sickly-green rim. */
.cfx-rot-mold {
    position: absolute;
    border-radius: 47% 53% 42% 58% / 55% 45% 55% 45%;
    background:
        radial-gradient(circle at 35% 40%, rgba(220, 240, 160, 0.9) 0 6%, rgba(220, 240, 160, 0) 9%),
        radial-gradient(circle at 62% 58%, rgba(220, 240, 160, 0.8) 0 5%, rgba(220, 240, 160, 0) 8%),
        radial-gradient(circle, rgba(40, 56, 18, 0.92) 0%, rgba(96, 130, 40, 0.9) 38%, rgba(180, 215, 90, 0.75) 58%, rgba(180, 215, 90, 0) 74%);
    box-shadow: 0 0 8px rgba(170, 210, 80, 0.6);
    filter: blur(0.6px);
}

.cfx-rot-cracks path {
    stroke: #1d2410;
    stroke-width: 2;
    filter: drop-shadow(0 0 2px rgba(160, 200, 80, 0.6));
}

.cfx-rot-dust {
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfc8ac;
    box-shadow: 0 0 6px 2px rgba(150, 170, 110, 0.6);
}

/* A little bone: a shaft with knobbed ends. */
.cfx-rot-bone {
    left: 0;
    top: 0;
    width: 24px;
    height: 10px;
    background:
        radial-gradient(circle at 3.5px 3px, #ece4c8 0 3px, transparent 3.5px),
        radial-gradient(circle at 3.5px 7px, #ece4c8 0 3px, transparent 3.5px),
        radial-gradient(circle at 20.5px 3px, #ece4c8 0 3px, transparent 3.5px),
        radial-gradient(circle at 20.5px 7px, #ece4c8 0 3px, transparent 3.5px),
        linear-gradient(#ece4c8, #ece4c8) 3px 3.5px / 18px 3px no-repeat;
    filter: drop-shadow(0 0 3px rgba(150, 170, 110, 0.8));
}

.cfx-blink-rot { background: radial-gradient(circle, #ffffff 0%, rgba(200, 230, 130, 0.85) 22%, rgba(120, 160, 60, 0) 62%); }

.cfx-rot-swirl {
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(rgba(150, 200, 80, 0) 0deg, rgba(150, 200, 80, 0.7) 90deg, rgba(150, 200, 80, 0) 180deg, rgba(150, 200, 80, 0.7) 270deg, rgba(150, 200, 80, 0) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 20%, #000 35% 60%, transparent 72%);
    mask: radial-gradient(circle, transparent 0 20%, #000 35% 60%, transparent 72%);
    mix-blend-mode: screen;
}

/* Raised from the grave: the rot peels away as it flies. */
.cfx-rot-rise {
    animation: cfx-rot-peel 0.8s ease-out both;
}

@keyframes cfx-rot-peel {
    from { filter: grayscale(0.6) sepia(0.6) hue-rotate(40deg) brightness(0.5); box-shadow: 0 0 16px 4px rgba(120, 150, 60, 0.6); }
    to { filter: none; box-shadow: 0 0 14px 3px rgba(200, 230, 140, 0.6); }
}

/* ── BLOOM ────────────────────────────────────────────────── */

/* A broad jungle leaf with a pale midrib. */
.cfx-bloom-frond {
    left: 0;
    top: 0;
    aspect-ratio: 1 / 0.45;
    border-radius: 0 100% 0 100%;
    background:
        linear-gradient(160deg, rgba(0, 0, 0, 0) 48%, rgba(200, 240, 170, 0.6) 50%, rgba(0, 0, 0, 0) 52%),
        linear-gradient(160deg, #2f7a3a 0%, #4fae4a 50%, #1d5a2a 100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.cfx-bloom-float {
    left: 0;
    top: 0;
    width: 12px;
    height: 16px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: linear-gradient(0deg, #ff7ab8 0%, #ffc4dd 70%, #fff0f6 100%);
    box-shadow: 0 0 6px rgba(255, 140, 190, 0.6);
}

.cfx-bloom-ripple {
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(190, 255, 240, 0.8);
    box-shadow: 0 0 10px rgba(120, 230, 210, 0.6);
}

/* A lily pad: a green disc with its notch and radiating veins. */
.cfx-bloom-pad {
    left: 0;
    top: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(170, 230, 130, 0.35) 0deg 1.5deg, rgba(0, 0, 0, 0) 1.5deg 24deg),
        radial-gradient(circle, #7ccf5a 0%, #3f9a3e 60%, #2a6e2e 100%);
    -webkit-mask: conic-gradient(from -14deg, transparent 0deg 28deg, #000 28deg);
    mask: conic-gradient(from -14deg, transparent 0deg 28deg, #000 28deg);
    box-shadow: 0 0 18px rgba(40, 120, 60, 0.6);
}

/* A tiny lotus perched on a pad. */
.cfx-bloom-mini {
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 50% 70%, #fff3a0 0%, #ffd23a 15%, #ff9ccb 35%, #ff5aa6 70%, rgba(255, 90, 166, 0) 72%);
    filter: drop-shadow(0 0 6px rgba(255, 140, 200, 0.9));
}

/* The great lotus: two rings of petals round a golden heart. */
.cfx-bloom-lotus {
    left: 0;
    top: 0;
    border-radius: 50%;
}

.cfx-bloom-lotus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22%;
    height: 22%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe0 0%, #ffd23a 50%, #e8a000 100%);
    box-shadow: 0 0 18px 6px rgba(255, 210, 90, 0.7);
}

.cfx-bloom-petal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    height: 48%;
    margin: -48% 0 0 -13%;
    transform-origin: 50% 100%;
    transform: rotate(var(--a));
    border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%;
    background: linear-gradient(0deg, #ff5aa6 0%, #ff9ccb 45%, #ffe2ef 90%);
    box-shadow: 0 0 10px rgba(255, 120, 190, 0.6);
    transition: transform 0.35s ease-out;
}

.cfx-bloom-petal-in {
    width: 20%;
    height: 36%;
    margin: -36% 0 0 -10%;
    background: linear-gradient(0deg, #ff7ab8 0%, #ffc4dd 60%, #fff6fa 100%);
}

/* A closed bud: every petal folded up towards the middle. */
.cfx-bloom-closed .cfx-bloom-petal {
    transform: rotate(calc(var(--a) * 0.12));
}

.cfx-bloom-drop {
    left: 0;
    top: 0;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #d8fff6;
    box-shadow: 0 0 6px rgba(120, 230, 210, 0.9);
}

.cfx-bloom-card {
    box-shadow: 0 0 22px 6px rgba(255, 150, 200, 0.75), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Petals folded over the card's text box: its abilities are hushed. */
.cfx-bloom-veil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    border-radius: 60% 60% 4px 4px / 30% 30% 4px 4px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 196, 221, 0.95) 0%, rgba(255, 196, 221, 0) 45%),
        radial-gradient(ellipse at 80% 0%, rgba(255, 196, 221, 0.95) 0%, rgba(255, 196, 221, 0) 45%),
        linear-gradient(0deg, rgba(255, 90, 166, 0.92) 0%, rgba(255, 156, 203, 0.9) 60%, rgba(255, 226, 239, 0.85) 100%);
    box-shadow: 0 -4px 12px rgba(255, 120, 190, 0.6);
}

.cfx-bloom-seal {
    left: 0;
    top: 0;
    font-size: 30px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 8px #ff5aa6, 0 0 16px #ff9ccb;
}

/* ── TAX ──────────────────────────────────────────────────── */

.cfx-tax-mote {
    left: 0;
    top: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffe9a8;
    box-shadow: 0 0 6px 2px rgba(255, 200, 90, 0.7);
}

/* The ledger: ruled parchment between two dark rollers. */
.cfx-tax-ledger {
    left: 0;
    top: 0;
    border-radius: 4px;
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 22px, rgba(120, 80, 30, 0.25) 22px 23px),
        linear-gradient(90deg, #4a2a10 0%, #4a2a10 2.5%, #e9d6a8 3%, #f6e8c4 50%, #e9d6a8 97%, #4a2a10 97.5%, #4a2a10 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(120, 80, 30, 0.35);
    font-family: 'DragonSlayer', Georgia, serif;
}

.cfx-tax-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    text-align: center;
    font-size: 17px;
    letter-spacing: 3px;
    color: #5a3410;
}

.cfx-tax-sum {
    position: absolute;
    right: 9%;
    bottom: 12px;
    font-size: 22px;
    font-weight: 700;
    color: #8a1a10;
}

.cfx-tax-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cfx-tax-ink path {
    fill: none;
    stroke: #2a1806;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.cfx-tax-quill {
    left: 0;
    top: 0;
    font-size: 30px;
    color: #fffaf0;
    filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.9));
}

/* A red wax seal stamped with a gem. */
.cfx-tax-seal {
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffd9c0;
    border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
    background: radial-gradient(circle at 40% 35%, #e0423a 0%, #a8140e 60%, #6a0806 100%);
    box-shadow: 0 0 0 3px rgba(168, 20, 14, 0.6), 0 4px 10px rgba(0, 0, 0, 0.6);
}

.cfx-tax-coin {
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff6c4 0%, #ffd23a 40%, #c88a00 100%);
    box-shadow: inset 0 0 0 2px #b07800, 0 0 10px rgba(255, 200, 60, 0.8);
}

.cfx-tax-plus {
    left: 0;
    top: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffe08a;
    text-shadow: 0 0 6px rgba(255, 191, 0, 0.9);
}

/* A gold chain: a border of links round the taxed hand. */
.cfx-tax-chain {
    border-radius: 10px;
    border: 5px dashed #ffcf4a;
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.75), inset 0 0 10px rgba(255, 191, 0, 0.35);
}

.cfx-tax-tag {
    left: 0;
    top: 0;
    padding: 3px 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f6e8c4, #e0c88c);
    border: 2px solid #8a5a10;
    color: #8a1a10;
    font-family: 'DragonSlayer', Georgia, serif;
    font-size: 15px;
    letter-spacing: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ── SCRUMPS ──────────────────────────────────────────────── */

/* A tall cave crystal: a pale, faceted spike. */
.cfx-scrumps-crystal {
    left: 0;
    top: 0;
    transform-origin: 50% 100%;
    clip-path: polygon(50% 0, 82% 18%, 100% 100%, 0 100%, 18% 18%);
    background: linear-gradient(90deg, rgba(200, 220, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(150, 180, 240, 0.6) 55%, rgba(220, 235, 255, 0.5) 100%);
    filter: drop-shadow(0 0 8px rgba(160, 200, 255, 0.7));
}

/* White sunglasses: two blue-mirrored lenses and a bridge. */
.cfx-scrumps-shades {
    left: 0;
    top: 0;
    height: 26px;
    overflow: hidden;
}

.cfx-scrumps-shades i {
    position: absolute;
    top: 0;
    width: 42%;
    height: 100%;
    border-radius: 40% 40% 50% 50%;
    border: 3px solid #ffffff;
    box-sizing: border-box;
    background: linear-gradient(160deg, #e8f2ff 0%, #4a7aff 45%, #10206a 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.cfx-scrumps-shades i:first-child { left: 4%; }
.cfx-scrumps-shades i:nth-child(2) { right: 4%; }

.cfx-scrumps-shades b {
    position: absolute;
    left: 44%;
    right: 44%;
    top: 30%;
    height: 4px;
    background: #ffffff;
}

.cfx-scrumps-glint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
}

/* A crystal cluster erupting from a new space. */
.cfx-scrumps-cluster {
    left: 0;
    top: 0;
    transform-origin: 50% 100%;
}

.cfx-scrumps-cluster i {
    position: absolute;
    bottom: 0;
    clip-path: polygon(50% 0, 85% 20%, 100% 100%, 0 100%, 15% 20%);
    background: linear-gradient(90deg, rgba(210, 225, 255, 0.75) 0%, #ffffff 45%, rgba(150, 180, 240, 0.8) 55%, rgba(225, 238, 255, 0.7) 100%);
    filter: drop-shadow(0 0 6px rgba(160, 200, 255, 0.9));
}

.cfx-scrumps-cluster i:nth-child(1) { left: 30%; width: 34%; height: 100%; }
.cfx-scrumps-cluster i:nth-child(2) { left: 8%; width: 26%; height: 62%; transform: rotate(-18deg); transform-origin: 50% 100%; }
.cfx-scrumps-cluster i:nth-child(3) { left: 62%; width: 28%; height: 72%; transform: rotate(16deg); transform-origin: 50% 100%; }
.cfx-scrumps-cluster i:nth-child(4) { left: 46%; width: 18%; height: 44%; transform: rotate(32deg); transform-origin: 50% 100%; }

.cfx-gem-ice {
    font-size: 24px;
    color: #bfe0ff;
    filter: drop-shadow(0 0 6px rgba(120, 180, 255, 0.95));
}

.cfx-scrumps-tick {
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 800;
    color: #dff0ff;
    text-shadow: 0 0 6px rgba(90, 160, 255, 0.95);
}

.cfx-scrumps-total {
    left: 0;
    top: 0;
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(90, 160, 255, 0.95), 0 0 22px rgba(255, 191, 0, 0.7);
}

/* The mould patches' clip box, laid over the rotting card. */
.cfx-rot-moldbox {
    border-radius: 5px;
    overflow: hidden;
}