/* Portable wrapper: .rfx > .rfx-content + .rfx-layer. Set data-effect and --rfx-color. */
.rfx{--rfx-color:#91a8c9;--rfx-intensity:.75;position:relative;isolation:isolate;display:inline-grid;place-items:center;width:94px;height:94px;border-radius:50%;background:#171d26;box-shadow:0 8px 16px #0005}
.rfx-content{position:relative;width:100%;height:100%;border-radius:inherit;display:grid;place-items:center;z-index:1;overflow:hidden}
.rfx-layer{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:var(--rfx-intensity)}
.card-art > .card-rarity-effect > .rfx-layer{mask-image:var(--rfx-image-mask,none);mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:var(--rfx-image-mask,none);-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.rfx-layer::before,.rfx-layer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.rfx[data-shape=card]{width:108px;height:146px;border-radius:10px;border:3px solid #b69c70}
/* Unique keeps its pink-and-cyan identity, with a visibly circulating energy rim. */
.rfx[data-effect=unique-energy] { --rfx-intensity: 1; }
.rfx[data-effect=unique-energy] > .rfx-layer {
    box-shadow: 0 0 2px 1px #a1fffa, 0 0 18px #ff3cac99, inset 0 0 8px #4deeea55;
    animation: rfx-unique-pulse 5.2s ease-in-out infinite;
}
.rfx[data-effect=unique-energy] > .rfx-layer::before {
    inset: -2px; padding: 2px;
    background: linear-gradient(115deg, #ff3cac 5%, #ff8acd 22%, #fff1ff 29%, #4deeea 36%, #a1fffa 57%, #fff1ff 65%, #ff3cac 74%);
    background-size: 300% 100%;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: rfx-unique-circuit 6.4s linear infinite;
}
.rfx[data-effect=unique-energy] > .rfx-layer::after {
    inset: -10px;
    background:
        radial-gradient(ellipse 2px 17px at 15% 5%, #fff0ff 15%, #ff8acdaa 35%, transparent 70%),
        radial-gradient(ellipse 17px 2px at 15% 5%, #fff0ff 15%, #ff8acdaa 35%, transparent 70%),
        radial-gradient(ellipse 2px 20px at 94% 73%, #a1fffa 15%, #4deeeaaa 35%, transparent 70%),
        radial-gradient(ellipse 20px 2px at 94% 73%, #a1fffa 15%, #4deeeaaa 35%, transparent 70%),
        radial-gradient(circle at 7% 64%, #a1fffa 0 1px, transparent 3px),
        radial-gradient(circle at 76% 95%, #ff8acd 0 2px, transparent 4px);
    animation: rfx-energy-sparks 5.2s ease-in-out infinite;
}
@keyframes rfx-energy-flow { 0%, 100% { background-position: 0% 20%; } 50% { background-position: 100% 80%; } }
@keyframes rfx-energy-sparks { 0%, 100% { opacity: .25; transform: translateY(5px); } 50% { opacity: 1; transform: translateY(-5px); } }
@keyframes rfx-unique-circuit { from { background-position: 150% 50%; } to { background-position: -150% 50%; } }
@keyframes rfx-unique-pulse { 0%, 100% { box-shadow: 0 0 2px 1px #a1fffa, 0 0 11px #ff3cac66, inset 0 0 5px #4deeea33; } 50% { box-shadow: 0 0 3px 1px #fff0ff, 0 0 24px #ff3cacbb, inset 0 0 10px #4deeea55; } }
.rfx[data-effect=satin] .rfx-layer{background:linear-gradient(125deg,#fff4,transparent 40%,#0003)}
.rfx[data-effect=etched] .rfx-layer{inset:5px;border:1px dashed #fff9;box-shadow:0 0 0 2px #0003}
.rfx[data-effect=breath] .rfx-layer{box-shadow:0 0 17px var(--rfx-color);animation:rfx-breathe 4s ease-in-out infinite}
.rfx[data-effect=glint] .rfx-layer{background:linear-gradient(115deg,transparent 30%,#fff8 49%,transparent 65%);background-size:300% 100%;animation:rfx-sweep 5s ease-in-out infinite}
.rfx[data-effect=halo] .rfx-layer{inset:-5px;border:1px solid var(--rfx-color);box-shadow:0 0 13px var(--rfx-color),inset 0 0 8px var(--rfx-color)}
.rfx[data-effect=dew] .rfx-layer{background:radial-gradient(circle at 22% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 60%,#fff 0 2px,transparent 3px),radial-gradient(circle at 34% 86%,#fff 0 1px,transparent 3px);animation:rfx-breathe 3s infinite}
.rfx[data-effect=orbit] .rfx-layer{inset:-9px;border:1px solid #ffffff20;animation:rfx-spin 7s linear infinite}
.rfx[data-effect=orbit] .rfx-layer::before{inset:-3px auto auto 50%;width:6px;height:6px;background:#ceffe5;box-shadow:0 0 10px var(--rfx-color)}
.rfx[data-effect=scan] .rfx-layer{background:linear-gradient(transparent 40%,#adffd270 50%,transparent 60%);background-size:100% 300%;animation:rfx-scan 4s ease-in-out infinite}
.rfx[data-effect=chrome] .rfx-layer{background:linear-gradient(130deg,transparent 20%,#b5d8ff99 30%,#fff9 32%,transparent 38%,#82b9ff60 70%,transparent 80%);background-size:250% 100%;animation:rfx-sweep 5s infinite}
.rfx[data-effect=ripple] .rfx-layer::before,.rfx[data-effect=ripple] .rfx-layer::after{border:1px solid var(--rfx-color);animation:rfx-ripple 3.5s ease-out infinite}
.rfx[data-effect=ripple] .rfx-layer::after{animation-delay:-1.75s}
.rfx[data-effect=frost] .rfx-layer{background:repeating-conic-gradient(from 20deg,#e0f5ff80 0 1deg,transparent 1deg 30deg);box-shadow:inset 0 0 20px #b9e6ff,0 0 10px #82c6ff80;animation:rfx-breathe 5s infinite}
.rfx[data-effect=twinkle] .rfx-layer::before{inset:-8px;background:radial-gradient(ellipse at 18% 24%,white 0 2px,transparent 3px),radial-gradient(ellipse at 80% 75%,white 0 2px,transparent 3px);filter:drop-shadow(0 0 4px #b6d7ff);animation:rfx-breathe 2s infinite}
.rfx[data-effect=twinkle] .rfx-layer::after{inset:-10px;background:radial-gradient(ellipse at 85% 10%,white 0 1px,transparent 3px);animation:rfx-breathe 3s infinite reverse}
.rfx[data-effect=plasma] .rfx-layer{inset:-5px;border:2px dotted #ddadff;box-shadow:0 0 15px #b565ee,inset 0 0 10px #bd78ec;animation:rfx-breathe 1.8s infinite}
.rfx[data-effect=orbitals] .rfx-layer::before,.rfx[data-effect=orbitals] .rfx-layer::after{inset:-14px;border:1px solid #dfaaff;transform:rotate(-30deg) scaleX(.6);animation:rfx-orbital 6s linear infinite}
.rfx[data-effect=orbitals] .rfx-layer::after{animation-delay:-3s;animation-direction:reverse}
.rfx[data-effect=velvet] .rfx-layer{background:repeating-linear-gradient(140deg,transparent 0 7px,#e6adff60 8px,transparent 10px);background-size:200% 100%;mix-blend-mode:screen;animation:rfx-sweep 8s infinite}
.rfx[data-effect=gilded] .rfx-layer{background:linear-gradient(110deg,transparent 20%,#ffb80055 40%,#fff4bcdd 50%,#f7b60055 60%,transparent 80%);background-size:300% 100%;animation:rfx-sweep 4s infinite;box-shadow:0 0 15px #ffc75a60}
.rfx[data-effect=embers] .rfx-layer::before{inset:-20px;background:radial-gradient(circle at 20% 85%,#ffc260 0 2px,transparent 3px),radial-gradient(circle at 80% 60%,#ffedb0 0 1px,transparent 2px),radial-gradient(circle at 65% 90%,#ff973e 0 2px,transparent 3px);animation:rfx-rise 3s linear infinite}
.rfx[data-effect=embers] .rfx-layer::after{inset:-15px;background:radial-gradient(circle at 30% 75%,#ffe8a0 0 1px,transparent 3px),radial-gradient(circle at 90% 80%,#ffb14f 0 2px,transparent 3px);animation:rfx-rise 3s -1.5s linear infinite}
.rfx[data-effect=corona] .rfx-layer{inset:-12px;z-index:-1;background:repeating-conic-gradient(#ffc86b90 0 3deg,transparent 4deg 18deg);filter:blur(3px);animation:rfx-spin 30s linear infinite;box-shadow:0 0 30px #f5b54170}
.rfx[data-effect=divine] .rfx-layer::before{inset:-8px;border:1px solid #ffe6a9;box-shadow:0 0 0 5px #ffc75c15,0 0 0 9px #ffc75c55,0 0 25px #ffc75c80;animation:rfx-breathe 4s infinite}
.rfx[data-effect=prism] .rfx-layer{background:linear-gradient(120deg,#ff609970,#ffc65b70,#77ffbd70,#55baff70,#c57dff70,#ff609970);background-size:400% 100%;mix-blend-mode:screen;animation:rfx-sweep 5s infinite}
.rfx[data-effect=singularity] .rfx-layer{inset:-9px;z-index:-1;background:conic-gradient(#ff99d6,transparent 30%,#889bff,transparent 70%,#ff99d6);box-shadow:0 0 24px #cd77ca90;animation:rfx-spin 4s linear infinite}
.rfx[data-effect=iridescent] .rfx-layer{background:repeating-conic-gradient(from 45deg,#ffaed880 0deg,#b7ffff80 50deg,#ffeab880 100deg,#b8a7ff80 150deg,#ffaed880 180deg);background-size:200% 200%;mix-blend-mode:screen;animation:rfx-pearl 7s ease-in-out infinite}
@keyframes rfx-sweep{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes rfx-scan{0%,100%{background-position:50% 100%}50%{background-position:50% 0%}}
@keyframes rfx-breathe{0%,100%{opacity:calc(var(--rfx-intensity) * .2)}50%{opacity:var(--rfx-intensity)}}
@keyframes rfx-spin{to{transform:rotate(360deg)}}
@keyframes rfx-ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes rfx-orbital{from{transform:rotate(0deg) scaleX(.65)}to{transform:rotate(360deg) scaleX(.65)}}
@keyframes rfx-rise{from{transform:translateY(12px);opacity:0}35%{opacity:1}to{transform:translateY(-45px);opacity:0}}
@keyframes rfx-pearl{0%,100%{background-position:0% 20%}50%{background-position:100% 80%}}
.rfx-paused .rfx-layer,.rfx-paused .rfx-layer::before,.rfx-paused .rfx-layer::after{animation-play-state:paused!important}
.motion-reduced .rfx-layer,.motion-reduced .rfx-layer::before,.motion-reduced .rfx-layer::after{animation:none!important}


/* Transparent procedural fire mounted by rarity-fire.js. Celestial and
   mythical are shaded surfaces instead; they carry no CSS of their own. */
.rfx[data-effect=violet-flames] .rfx-layer { inset:0; z-index:-1; }
.rfx[data-effect=violet-flames] .rfx-layer::before { box-shadow:0 0 7px #b264ed80,0 0 15px #8f37c830; }
.rfx-fire { position:absolute;width:calc(100% + 80px);height:calc(100% + 100px);left:-40px;bottom:-30px;pointer-events:none; }

/* Badge integration: retain the original medal's size and material. */
/* The medal keeps its own size and material; the effect is an overlay on it. */
/* The host takes the medal's own size rather than imposing one: a `.badge-medal`
   already has a box, so forcing 100% onto it shrank it. Only a bare medal SVG
   needs a size, and it is the surrounding context that knows which. */
.badge-effect-host { position:relative;display:inline-block;vertical-align:middle;flex:none;line-height:0; }
.badge-effect-host > .badge-medal { display:grid;box-sizing:border-box; }
.badge-effect-host > svg { display:block;width:64px;height:64px; }
.badge-mount .badge-effect-host > svg { width:83px;height:83px; }
/* Overlaying only makes sense inside the host that positions it: loose in a
   page, an absolute `.rfx` would stretch over whatever it landed in. */
.badge-effect-host > .rfx.badge-rarity-effect { position:absolute;inset:0;z-index:2;width:auto;height:auto;background:transparent;box-shadow:none;pointer-events:none; }
.rfx.badge-rarity-effect > .rfx-layer { z-index:0; }
.rfx.badge-rarity-effect[data-effect=prismatic] { isolation:auto;mix-blend-mode:hard-light; }
.rfx.badge-rarity-effect[data-effect=prismatic] > .prismatic-surface { mix-blend-mode:normal; }

/* Shaded surfaces overflow whatever they wrap — a card, a badge, a cut-out
   subject — so the canvas is centred on it and given room on every side. */
/* A finish sits on the print rather than around it, so the canvas covers the
   host exactly and hard-light lets it both screen and multiply what is under
   it: an additive overlay could only ever fog a light print.

   Where the blend goes depends on what it has to reach. A badge wraps its own
   medal, so the canvas blends inside the wrapper. A card's effect host is
   absolutely positioned with a z-index, which makes it a stacking context and
   therefore a blending boundary — a canvas inside it would have nothing to
   blend with, so the host itself carries the blend and reaches the print. */
.prismatic-surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rfx[data-effect=prismatic] > .prismatic-surface { mix-blend-mode: hard-light; }
.trading-card .card-rarity-effect[data-effect=prismatic] { isolation: auto; mix-blend-mode: hard-light; }
.trading-card .card-rarity-effect[data-effect=prismatic] > .prismatic-surface { mix-blend-mode: normal; }
.rfx[data-prismatic-ready] > .rfx-layer { display: none; }

.celestial-surface, .mythical-surface, .gilded-surface {
    position: absolute; left: 50%; top: 50%;
    width: calc(100% / .62); height: calc(100% / .62);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.rfx[data-celestial-ready], .rfx[data-mythical-ready], .rfx[data-gilded-ready] { overflow: visible; }