/*
 * Collectible Card FX
 *
 * Every effect stays behind the HUD card's readable content.  The animation
 * recipes only move painted layers (transform, opacity, background-position),
 * never the card layout or gameplay controls.
 */

.card-fx {
  --fx-a: #ffd47b;
  --fx-b: #ff8c58;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: layout paint style;
  isolation: isolate;
  opacity: .88;
  mix-blend-mode: screen;
}

.card-fx::before,
.card-fx::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity, background-position;
}

.card-fx::before { inset: -34%; }
.card-fx::after {
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--fx-a) 36%, transparent);
  border-radius: inherit;
  opacity: .52;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--fx-a) 16%, transparent), 0 0 12px color-mix(in srgb, var(--fx-b) 14%, transparent);
}

#playerHero > .card-fx,
.calling-card > .card-fx { position: absolute !important; z-index: 1 !important; }

/* Starter: warm little sparks that cross the player card at different speeds. */
.card-fx[data-card-fx="fireflies"] {
  background:
    radial-gradient(circle, var(--fx-a) 0 1.5px, transparent 2.6px) 12% 85% / 37px 29px,
    radial-gradient(circle, var(--fx-b) 0 1px, transparent 2px) 78% 20% / 53px 47px,
    radial-gradient(circle, #fff7c4 0 1px, transparent 2.5px) 42% 65% / 61px 57px;
  animation: fx-firefly-field 8.5s linear infinite;
}
.card-fx[data-card-fx="fireflies"]::before {
  background: radial-gradient(circle at 30% 75%, color-mix(in srgb, var(--fx-a) 38%, transparent), transparent 6%), radial-gradient(circle at 77% 22%, color-mix(in srgb, var(--fx-b) 28%, transparent), transparent 7%);
  animation: fx-soft-drift 5.4s ease-in-out infinite alternate;
}
.card-fx[data-card-fx="fireflies"]::after { animation: fx-edge-breathe 2.8s ease-in-out infinite; }

/* Confetti and pennants make wins feel less tax-deductible. */
.card-fx[data-card-fx="confetti"] {
  background:
    linear-gradient(55deg, transparent 46%, var(--fx-a) 47% 52%, transparent 53%) 0 0 / 24px 22px,
    linear-gradient(-37deg, transparent 43%, var(--fx-b) 44% 51%, transparent 52%) 9px 8px / 31px 29px,
    radial-gradient(circle, #fff5bf 0 1px, transparent 2px) 0 0 / 19px 17px;
  animation: fx-confetti-fall 5.8s linear infinite;
}
.card-fx[data-card-fx="confetti"]::before { background: linear-gradient(126deg, transparent 31%, color-mix(in srgb, var(--fx-a) 19%, transparent) 46%, transparent 61%); animation: fx-sweep 4s ease-in-out infinite; }
.card-fx[data-card-fx="pennants"] { background: linear-gradient(140deg, transparent 0 38%, color-mix(in srgb, var(--fx-a) 37%, transparent) 39% 42%, transparent 43% 65%, color-mix(in srgb, var(--fx-b) 28%, transparent) 66% 69%, transparent 70%); background-size: 42px 36px; animation: fx-banner-shift 7s linear infinite; }
.card-fx[data-card-fx="pennants"]::before,
.card-fx[data-card-fx="banner"]::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fx-a) 25%, transparent) 0 16px, transparent 17px 31px); clip-path: polygon(0 14%, 100% 0, 88% 38%, 100% 75%, 0 91%, 11% 54%); animation: fx-pennant-sway 4.2s ease-in-out infinite; }
.card-fx[data-card-fx="pennants"]::after { animation: fx-edge-breathe 3.2s ease-in-out infinite; }

/* Rockets, boss comets, and tracer rounds use the same spark physics with unique palettes. */
.card-fx[data-card-fx="comets"],
.card-fx[data-card-fx="tracers"] {
  background: radial-gradient(circle, var(--fx-a) 0 1px, transparent 2px) 0 0 / 47px 38px, radial-gradient(circle, var(--fx-b) 0 1px, transparent 2px) 19px 14px / 59px 49px;
  animation: fx-star-drift 10s linear infinite;
}
.card-fx[data-card-fx="comets"]::before,
.card-fx[data-card-fx="tracers"]::before {
  inset: -55%;
  background: repeating-linear-gradient(126deg, transparent 0 19%, color-mix(in srgb, var(--fx-a) 0%, transparent) 20% 27%, color-mix(in srgb, var(--fx-a) 75%, transparent) 28% 30%, color-mix(in srgb, var(--fx-b) 35%, transparent) 31% 33%, transparent 34% 52%);
  filter: blur(.2px);
  animation: fx-comet-flight 3.6s cubic-bezier(.2, .84, .3, 1) infinite;
}
.card-fx[data-card-fx="tracers"]::before { animation-duration: 2.2s; animation-delay: -1.1s; }
.card-fx[data-card-fx="comets"]::after { box-shadow: inset 0 0 17px color-mix(in srgb, var(--fx-a) 24%, transparent), 0 0 18px color-mix(in srgb, var(--fx-b) 24%, transparent); animation: fx-edge-breathe 1.8s ease-in-out infinite; }

/* Evolution effects: climbing moonlight and a mechanical charge-up. */
.card-fx[data-card-fx="ascension"] { background: linear-gradient(0deg, color-mix(in srgb, var(--fx-a) 33%, transparent), transparent 48%), radial-gradient(circle, var(--fx-b) 0 1px, transparent 2px) 0 0 / 33px 46px; animation: fx-rise-field 6s linear infinite; }
.card-fx[data-card-fx="ascension"]::before { background: repeating-linear-gradient(90deg, transparent 0 16px, color-mix(in srgb, var(--fx-a) 21%, transparent) 17px 20px, transparent 21px 35px); transform: skewX(-16deg); animation: fx-beam-climb 3.4s ease-in-out infinite; }
.card-fx[data-card-fx="charge"] { background: repeating-linear-gradient(127deg, transparent 0 14px, color-mix(in srgb, var(--fx-a) 22%, transparent) 15px 17px, transparent 18px 33px), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fx-b) 24%, transparent), transparent 44%); animation: fx-charge-lines 2.3s linear infinite; }
.card-fx[data-card-fx="charge"]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fx-a) 63%, transparent), transparent); transform: skewX(-32deg); animation: fx-scan 2.1s ease-in-out infinite; }
.card-fx[data-card-fx="charge"]::after { animation: fx-edge-breathe 1.45s ease-in-out infinite; }

/* Nature and camp effects. */
.card-fx[data-card-fx="vines"] { background: repeating-radial-gradient(ellipse at 13% 110%, transparent 0 17px, color-mix(in srgb, var(--fx-a) 20%, transparent) 18px 20px, transparent 21px 40px), linear-gradient(145deg, transparent 35%, color-mix(in srgb, var(--fx-b) 16%, transparent) 36% 38%, transparent 39%); animation: fx-vine-creep 8s ease-in-out infinite alternate; }
.card-fx[data-card-fx="vines"]::before { background: repeating-linear-gradient(129deg, transparent 0 26px, color-mix(in srgb, var(--fx-a) 20%, transparent) 27px 29px, transparent 30px 55px); animation: fx-soft-drift 7s ease-in-out infinite alternate; }
.card-fx[data-card-fx="aurora"] { background: linear-gradient(116deg, transparent 20%, color-mix(in srgb, var(--fx-a) 20%, transparent) 36%, color-mix(in srgb, var(--fx-b) 25%, transparent) 49%, transparent 67%); background-size: 180% 180%; animation: fx-aurora 7s ease-in-out infinite; }
.card-fx[data-card-fx="aurora"]::before { background: linear-gradient(95deg, transparent 24%, color-mix(in srgb, var(--fx-b) 34%, transparent) 44%, color-mix(in srgb, var(--fx-a) 22%, transparent) 56%, transparent 76%); filter: blur(12px); transform: rotate(-9deg); animation: fx-aurora-sway 6s ease-in-out infinite alternate; }
.card-fx[data-card-fx="sprouts"] { background: radial-gradient(ellipse at 18% 100%, color-mix(in srgb, var(--fx-a) 27%, transparent) 0 7%, transparent 8%), radial-gradient(ellipse at 68% 102%, color-mix(in srgb, var(--fx-b) 25%, transparent) 0 9%, transparent 10%); animation: fx-sprout-bob 4.5s ease-in-out infinite; }
.card-fx[data-card-fx="sprouts"]::before { background: repeating-linear-gradient(62deg, transparent 0 30px, color-mix(in srgb, var(--fx-a) 26%, transparent) 31px 34px, transparent 35px 59px); transform-origin: bottom; animation: fx-vine-creep 5.6s ease-in-out infinite alternate; }
.card-fx[data-card-fx="bloom"] { background: repeating-conic-gradient(from 15deg at 52% 54%, color-mix(in srgb, var(--fx-a) 0%, transparent) 0 11deg, color-mix(in srgb, var(--fx-a) 34%, transparent) 12deg 18deg, transparent 19deg 29deg); mask-image: radial-gradient(circle at 52% 54%, #000 0 31%, transparent 66%); animation: fx-spin-slow 10s linear infinite; }
.card-fx[data-card-fx="bloom"]::before { background: radial-gradient(circle at center, color-mix(in srgb, var(--fx-b) 48%, transparent) 0 5%, transparent 34%); animation: fx-bloom 3.6s ease-in-out infinite; }

/* Magical input feedback, coins, and a compulsive reroll wheel. */
.card-fx[data-card-fx="runes"],
.card-fx[data-card-fx="sigil"] { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--fx-a) 0%, transparent) 0 8deg, color-mix(in srgb, var(--fx-a) 26%, transparent) 9deg 11deg, transparent 12deg 23deg); mask-image: radial-gradient(circle at center, transparent 0 21%, #000 22% 46%, transparent 47%); animation: fx-spin-slow 10s linear infinite; }
.card-fx[data-card-fx="runes"]::before,
.card-fx[data-card-fx="sigil"]::before { inset: 17%; border: 1px solid color-mix(in srgb, var(--fx-b) 55%, transparent); border-radius: 50%; box-shadow: 0 0 12px color-mix(in srgb, var(--fx-a) 38%, transparent), inset 0 0 10px color-mix(in srgb, var(--fx-a) 18%, transparent); animation: fx-rune-pulse 2.8s ease-in-out infinite; }
.card-fx[data-card-fx="sigil"]::before { animation-duration: 1.8s; border-width: 2px; }
.card-fx[data-card-fx="acorns"] { background: radial-gradient(ellipse at 50% 50%, var(--fx-a) 0 2px, transparent 3px) 0 0 / 28px 37px, radial-gradient(circle at 50% 30%, var(--fx-b) 0 1px, transparent 2px) 13px 12px / 41px 47px; animation: fx-acorn-tumble 5.5s linear infinite; }
.card-fx[data-card-fx="acorns"]::before { background: linear-gradient(118deg, transparent 40%, color-mix(in srgb, var(--fx-a) 22%, transparent) 42% 43%, transparent 45%); animation: fx-sweep 5.1s ease-in-out infinite; }
.card-fx[data-card-fx="oracle"] { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--fx-a) 35%, transparent) 0 5deg, transparent 6deg 22deg, color-mix(in srgb, var(--fx-b) 24%, transparent) 23deg 26deg, transparent 27deg 44deg); mask-image: radial-gradient(circle, transparent 0 16%, #000 17% 44%, transparent 45%); animation: fx-spin-slow 8s linear infinite; }
.card-fx[data-card-fx="oracle"]::before { inset: 7%; border: 1px dashed color-mix(in srgb, var(--fx-a) 60%, transparent); border-radius: 50%; animation: fx-spin-reverse 4.7s linear infinite; }

/* Recovery, weather, and punishingly pretty difficultly auras. */
.card-fx[data-card-fx="mend"] { background: radial-gradient(circle, color-mix(in srgb, var(--fx-a) 57%, transparent) 0 2px, transparent 3px) 0 0 / 31px 34px, radial-gradient(circle, color-mix(in srgb, var(--fx-b) 42%, transparent) 0 4px, transparent 5px) 13px 18px / 49px 54px; animation: fx-bubble-rise 6s linear infinite; }
.card-fx[data-card-fx="mend"]::before { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fx-a) 28%, transparent), transparent 35%); animation: fx-rune-pulse 3s ease-in-out infinite; }
.card-fx[data-card-fx="clouds"] { background: radial-gradient(ellipse at 18% 62%, color-mix(in srgb, var(--fx-a) 28%, transparent) 0 13%, transparent 25%), radial-gradient(ellipse at 72% 31%, color-mix(in srgb, var(--fx-b) 24%, transparent) 0 14%, transparent 27%); animation: fx-cloud-drift 9s ease-in-out infinite alternate; }
.card-fx[data-card-fx="clouds"]::before { background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--fx-a) 27%, transparent), transparent 42%); filter: blur(9px); animation: fx-soft-drift 5.4s ease-in-out infinite alternate; }
.card-fx[data-card-fx="embers"] { background: radial-gradient(circle, var(--fx-a) 0 1.5px, transparent 2.6px) 0 0 / 25px 32px, radial-gradient(circle, var(--fx-b) 0 1px, transparent 2.1px) 15px 16px / 39px 42px; animation: fx-ember-rise 5.4s linear infinite; }
.card-fx[data-card-fx="embers"]::before { background: linear-gradient(0deg, color-mix(in srgb, var(--fx-b) 27%, transparent), transparent 48%); animation: fx-flicker 1.8s ease-in-out infinite; }
.card-fx[data-card-fx="rain"] { background: repeating-linear-gradient(100deg, transparent 0 11px, color-mix(in srgb, var(--fx-a) 42%, transparent) 12px 13px, transparent 14px 27px), repeating-linear-gradient(100deg, transparent 0 21px, color-mix(in srgb, var(--fx-b) 31%, transparent) 22px 23px, transparent 24px 42px); animation: fx-rain 2.5s linear infinite; }
.card-fx[data-card-fx="rain"]::before { background: linear-gradient(125deg, transparent 34%, color-mix(in srgb, var(--fx-b) 26%, transparent) 50%, transparent 66%); animation: fx-sweep 3.5s ease-in-out infinite; }
.card-fx[data-card-fx="eclipse"] { background: radial-gradient(circle at 50% 50%, transparent 0 19%, color-mix(in srgb, var(--fx-a) 46%, transparent) 20% 22%, transparent 23% 34%, color-mix(in srgb, var(--fx-b) 19%, transparent) 35% 36%, transparent 37%); animation: fx-eclipse 7.5s ease-in-out infinite; }
.card-fx[data-card-fx="eclipse"]::before { inset: -18%; background: conic-gradient(from 0deg at 50% 50%, transparent 0 33%, color-mix(in srgb, var(--fx-b) 24%, transparent) 34% 41%, transparent 42% 77%, color-mix(in srgb, var(--fx-a) 21%, transparent) 78% 84%, transparent 85%); animation: fx-spin-slow 12s linear infinite; }

/* Stars, prestige, and endgame fireworks. */
.card-fx[data-card-fx="constellation"],
.card-fx[data-card-fx="stars"] { background: radial-gradient(circle, var(--fx-a) 0 1px, transparent 2px) 0 0 / 31px 27px, radial-gradient(circle, var(--fx-b) 0 1.5px, transparent 2.7px) 17px 9px / 53px 43px, linear-gradient(145deg, transparent 47%, color-mix(in srgb, var(--fx-a) 19%, transparent) 48% 48.5%, transparent 49%); animation: fx-star-drift 12s linear infinite; }
.card-fx[data-card-fx="constellation"]::before { inset: 13%; border: 1px dotted color-mix(in srgb, var(--fx-a) 49%, transparent); border-radius: 50%; animation: fx-spin-slow 13s linear infinite; }
.card-fx[data-card-fx="stars"]::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fx-a) 40%, transparent) 0 2px, transparent 3px); animation: fx-twinkle 2.1s ease-in-out infinite; }
.card-fx[data-card-fx="galaxy"] { background: repeating-radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--fx-a) 22%, transparent) 0 1px, transparent 2px 13px), conic-gradient(from 0deg at 50% 50%, transparent 0 13%, color-mix(in srgb, var(--fx-b) 25%, transparent) 18%, transparent 30%, color-mix(in srgb, var(--fx-a) 20%, transparent) 43%, transparent 57%); animation: fx-spin-slow 18s linear infinite; }
.card-fx[data-card-fx="galaxy"]::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fx-b) 30%, transparent), transparent 36%); animation: fx-bloom 4s ease-in-out infinite; }
.card-fx[data-card-fx="crest"] { background: linear-gradient(118deg, transparent 28%, color-mix(in srgb, var(--fx-a) 26%, transparent) 46%, transparent 63%); background-size: 220% 100%; animation: fx-crest-shine 4.4s ease-in-out infinite; }
.card-fx[data-card-fx="crest"]::before { inset: 13%; border: 1px solid color-mix(in srgb, var(--fx-b) 47%, transparent); clip-path: polygon(50% 0, 96% 22%, 80% 90%, 50% 100%, 20% 90%, 4% 22%); animation: fx-rune-pulse 2.7s ease-in-out infinite; }
.card-fx[data-card-fx="sweep"] { background: linear-gradient(112deg, transparent 12%, color-mix(in srgb, var(--fx-a) 0%, transparent) 34%, color-mix(in srgb, var(--fx-a) 54%, transparent) 46%, color-mix(in srgb, var(--fx-b) 26%, transparent) 51%, transparent 64%); background-size: 210% 100%; animation: fx-crest-shine 3.1s ease-in-out infinite; }
.card-fx[data-card-fx="sweep"]::before { background: radial-gradient(circle at 26% 70%, color-mix(in srgb, var(--fx-b) 34%, transparent), transparent 9%), radial-gradient(circle at 75% 24%, color-mix(in srgb, var(--fx-a) 31%, transparent), transparent 11%); animation: fx-soft-drift 3.8s ease-in-out infinite alternate; }
.card-fx[data-card-fx="howl"] { background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 10px, color-mix(in srgb, var(--fx-a) 24%, transparent) 11px 12px, transparent 13px 26px); animation: fx-howl 3.4s ease-out infinite; }
.card-fx[data-card-fx="howl"]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fx-b) 28%, transparent), transparent); animation: fx-scan 2.7s ease-in-out infinite; }
.card-fx[data-card-fx="wanted"] { background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--fx-a) 15%, transparent) 8px 9px, transparent 10px 17px), radial-gradient(circle at 20% 38%, color-mix(in srgb, var(--fx-b) 33%, transparent), transparent 12%); animation: fx-wanted-scan 3s linear infinite; }
.card-fx[data-card-fx="wanted"]::before { background: linear-gradient(104deg, transparent 36%, color-mix(in srgb, var(--fx-a) 46%, transparent) 50%, transparent 64%); animation: fx-sweep 2.7s ease-in-out infinite; }
.card-fx[data-card-fx="cataclysm"] { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--fx-a) 38%, transparent) 0 4deg, transparent 5deg 19deg, color-mix(in srgb, var(--fx-b) 25%, transparent) 20deg 23deg, transparent 24deg 42deg); mask-image: radial-gradient(circle, transparent 0 13%, #000 15% 66%, transparent 82%); animation: fx-spin-slow 5.4s linear infinite; }
.card-fx[data-card-fx="cataclysm"]::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fx-a) 47%, transparent), transparent 23%), conic-gradient(from 15deg at 50% 50%, transparent 0 15%, color-mix(in srgb, var(--fx-b) 29%, transparent) 16% 19%, transparent 20% 46%, color-mix(in srgb, var(--fx-a) 25%, transparent) 47% 50%, transparent 51%); animation: fx-cataclysm-pulse 1.9s ease-in-out infinite; }
.card-fx[data-card-fx="cataclysm"]::after { border-color: color-mix(in srgb, var(--fx-a) 76%, white); box-shadow: inset 0 0 19px color-mix(in srgb, var(--fx-b) 42%, transparent), 0 0 20px color-mix(in srgb, var(--fx-a) 54%, transparent); animation: fx-edge-breathe 1.3s ease-in-out infinite; }

@keyframes fx-firefly-field { from { background-position: 12% 85%, 78% 20%, 42% 65%; } to { background-position: 66% -32%, 14% 118%, 96% 3%; } }
@keyframes fx-confetti-fall { from { background-position: 0 -18px, 9px -20px, 0 -8px; } to { background-position: 76px 105px, 98px 111px, 57px 86px; } }
@keyframes fx-star-drift { from { background-position: 0 0, 19px 14px, 0 0; } to { background-position: 94px -78px, -55px 91px, 80px -64px; } }
@keyframes fx-rise-field { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 28px -116px; } }
@keyframes fx-ember-rise { from { background-position: 0 38px, 15px 59px; } to { background-position: 43px -89px, -20px -70px; } }
@keyframes fx-bubble-rise { from { background-position: 0 65px, 13px 75px; } to { background-position: 28px -79px, -17px -94px; } }
@keyframes fx-rain { from { background-position: 0 -42px, 0 -86px; } to { background-position: 32px 72px, 56px 111px; } }
@keyframes fx-acorn-tumble { from { background-position: 0 0, 13px 12px; transform: rotate(0); } to { background-position: 57px 73px, -42px 91px; transform: rotate(3deg); } }
@keyframes fx-charge-lines { from { background-position: 0 0, 0 0; } to { background-position: 45px 73px, 0 0; } }
@keyframes fx-banner-shift { from { background-position: 0 0; } to { background-position: 84px -54px; } }
@keyframes fx-aurora { 0%, 100% { background-position: 0% 44%; opacity: .62; } 50% { background-position: 100% 60%; opacity: 1; } }
@keyframes fx-vine-creep { from { transform: translate(-3%, 4%) rotate(-2deg); } to { transform: translate(4%, -3%) rotate(2deg); } }
@keyframes fx-cloud-drift { from { transform: translate(-6%, 3%) scale(1); } to { transform: translate(6%, -4%) scale(1.13); } }
@keyframes fx-wanted-scan { from { background-position: 0 0, 0 0; } to { background-position: 0 51px, 0 0; } }
@keyframes fx-eclipse { 0%, 100% { transform: translateX(-10%) rotate(-8deg); } 50% { transform: translateX(11%) rotate(8deg); } }
@keyframes fx-howl { from { transform: scale(.7); opacity: .15; } 52% { opacity: .82; } to { transform: scale(1.35); opacity: .03; } }
@keyframes fx-bloom { 0%, 100% { transform: scale(.75); opacity: .35; } 55% { transform: scale(1.2); opacity: .92; } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(.75); opacity: .25; } 50% { transform: scale(1.25); opacity: .95; } }
@keyframes fx-crest-shine { from { background-position: 150% 0; } to { background-position: -70% 0; } }
@keyframes fx-cataclysm-pulse { 0%, 100% { transform: scale(.86) rotate(0); opacity: .43; } 52% { transform: scale(1.12) rotate(14deg); opacity: 1; } }
@keyframes fx-soft-drift { from { transform: translate(-4%, 3%) scale(.96); } to { transform: translate(5%, -4%) scale(1.08); } }
@keyframes fx-comet-flight { from { transform: translate(-34%, 62%); opacity: 0; } 14% { opacity: .92; } 63% { opacity: .72; } to { transform: translate(36%, -57%); opacity: 0; } }
@keyframes fx-pennant-sway { 0%, 100% { transform: rotate(-3deg) translateX(-4%); } 50% { transform: rotate(4deg) translateX(5%); } }
@keyframes fx-beam-climb { from { transform: translateY(28%) skewX(-16deg); opacity: .12; } 48% { opacity: .84; } to { transform: translateY(-30%) skewX(-16deg); opacity: .08; } }
@keyframes fx-scan { from { transform: translateX(-58%) skewX(-28deg); opacity: 0; } 38% { opacity: .7; } to { transform: translateX(63%) skewX(-28deg); opacity: 0; } }
@keyframes fx-sweep { from { transform: translateX(-58%) rotate(0); opacity: 0; } 42% { opacity: .78; } to { transform: translateX(60%) rotate(0); opacity: 0; } }
@keyframes fx-aurora-sway { from { transform: translateX(-8%) rotate(-11deg); opacity: .3; } to { transform: translateX(8%) rotate(-4deg); opacity: .84; } }
@keyframes fx-rune-pulse { 0%, 100% { transform: scale(.78); opacity: .22; } 50% { transform: scale(1.08); opacity: .92; } }
@keyframes fx-spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes fx-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes fx-flicker { 0%, 100% { opacity: .28; transform: scaleY(.94); } 47% { opacity: .88; transform: scaleY(1.07); } }
@keyframes fx-edge-breathe { 0%, 100% { opacity: .25; transform: scale(.98); } 50% { opacity: .95; transform: scale(1.01); } }

/* Trail Locker collection: preview tiles only animate when inspected or equipped. */
.fx-progress {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 8px;
  padding: 7px 8px;
  border: 1px solid rgba(190, 150, 98, .24);
  border-radius: 8px;
  background: rgba(14, 11, 16, .52);
}
.fx-progress span { color: #ffdd7d; font-size: 8px; font-weight: 1000; }
.fx-progress small { color: #b5a08d; font-size: 7px; font-weight: 800; text-align: right; }

.fx-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 3px; }
.fx-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 78px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rarity, #cfbc99) 49%, rgba(190, 150, 98, .27));
  border-radius: 9px;
  background: linear-gradient(145deg, #3d2d33, #201921);
  color: #fee8c0;
  text-align: left;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fx-choice:not(:disabled):hover { z-index: 2; transform: translateY(-2px); border-color: var(--fx-a); filter: brightness(1.14); box-shadow: 0 0 15px color-mix(in srgb, var(--fx-a) 25%, transparent); }
.fx-choice.selected { border-color: #86ebc1; background: linear-gradient(145deg, #2b5648, #192d2b); box-shadow: 0 0 0 1px rgba(158, 255, 214, .28), 0 0 16px rgba(94, 235, 179, .2); }
.fx-choice.locked { border-color: rgba(108, 94, 104, .45); background: linear-gradient(145deg, #28232a, #17151b); color: #8d8290; filter: grayscale(.6); opacity: .78; cursor: default; }
.fx-preview {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 60px;
  width: 60px;
  height: 64px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fx-a) 57%, rgba(246, 213, 147, .32));
  border-radius: 7px;
  background: radial-gradient(circle at 62% 18%, color-mix(in srgb, var(--fx-b) 24%, transparent), transparent 31%), linear-gradient(145deg, #1f2735, #181421);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 0 rgba(0, 0, 0, .5);
}
.fx-preview .fx-mini { position: absolute !important; z-index: 1 !important; inset: 0 !important; border-radius: 6px; opacity: .95; }
.fx-preview > i { position: absolute; z-index: 2; right: 5px; bottom: 4px; color: #fff6ca; font-size: 19px; font-style: normal; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 9px var(--fx-a); }
.fx-choice-copy { position: relative; z-index: 1; display: block; min-width: 0; padding: 4px 3px 2px 7px; }
.fx-choice b { display: block; overflow: hidden; color: #ffe1a6; font-family: "Cinzel", Georgia, serif; font-size: 8px; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.fx-choice small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: #bca895; font-size: 6px; font-weight: 800; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fx-choice em { display: block; overflow: hidden; margin-top: 4px; color: var(--rarity, #a8dcb7); font-size: 5.5px; font-style: normal; font-weight: 1000; letter-spacing: .23px; text-overflow: ellipsis; white-space: nowrap; }
.fx-choice.locked b { color: #b6a6b2; }.fx-choice.locked small { color: #877d88; }.fx-choice.locked em { color: #cfad70; }.fx-choice.locked .fx-preview { filter: saturate(.3) brightness(.7); }
.fx-choice:not(.selected):not(:hover) .fx-mini,
.fx-choice:not(.selected):not(:hover) .fx-mini::before,
.fx-choice:not(.selected):not(:hover) .fx-mini::after { animation-play-state: paused !important; }

.calling-card.card-fx-swap { animation: card-fx-swap .62s cubic-bezier(.16, .86, .24, 1.15) both; }
#playerHero.player-fx-swap { animation: player-fx-swap .62s cubic-bezier(.16, .86, .24, 1.15) both; }
@keyframes card-fx-swap { 0% { filter: brightness(1); } 35% { filter: brightness(1.7) saturate(1.4); transform: scale(.96) rotate(-.8deg); } 100% { filter: brightness(1); transform: scale(1) rotate(0); } }
@keyframes player-fx-swap { 0% { filter: brightness(1); } 37% { filter: brightness(1.55) saturate(1.35); transform: translateY(-2px) scale(1.015); } 100% { filter: brightness(1); transform: translateY(0) scale(1); } }

@media (max-width: 1130px) {
  .fx-preview { flex-basis: 54px; width: 54px; }
  .fx-choice-copy { padding-left: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-fx,
  .card-fx::before,
  .card-fx::after,
  .calling-card.card-fx-swap,
  #playerHero.player-fx-swap { animation: none !important; transition: none !important; }
}