/* Local SVG scenes. No canvas, external imagery or remote animation service. */
#resource-action,#resource-bonus,.foe-token{position:relative}
.fx-scene{--fx-color:#d7b3ff;--fx-deep:#9674bf;position:absolute;inset:0;z-index:4;pointer-events:none!important;border-radius:inherit;overflow:hidden;isolation:isolate;animation:fx-presence 2.3s ease both;font-family:system-ui,sans-serif}
.fx-scene::before{content:'';position:absolute;inset:1px;border:2px solid var(--fx-color);border-radius:inherit;box-shadow:inset 0 0 30px color-mix(in srgb,var(--fx-deep) 30%,transparent);opacity:.85}
.fx-halo{position:absolute;width:170px;height:170px;right:-12px;top:calc(50% - 90px);background:radial-gradient(ellipse,color-mix(in srgb,var(--fx-deep) 65%,transparent),transparent 65%);animation:fx-halo 2.3s ease both}
.fx-art{position:absolute;right:7%;top:calc(50% - 76px);width:124px;height:124px;overflow:visible;filter:drop-shadow(0 4px 5px #121022aa);transform-origin:center;animation:fx-rise 2.3s ease both}
.fx-trail{position:absolute;right:4%;top:30%;width:155px;height:65px;border-top:5px solid var(--fx-color);border-radius:50%;opacity:.75;transform:rotate(-25deg);animation:fx-sweep 2.3s ease both}
.fx-caption{position:absolute;left:auto;right:12px;bottom:10px;max-width:calc(100% - 24px);padding:7px 12px;background:#201c2ff2;color:#fff3e5!important;border:1px solid color-mix(in srgb,var(--fx-color) 55%,#201c2f);border-radius:8px;box-shadow:0 3px 14px #0002;text-align:left;line-height:1.3}
.fx-caption strong{font-size:14px;font-weight:700;color:#fff7ee!important;display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-caption span{font-size:12px;color:var(--fx-color)!important}
.fx-note .fx-trail,.fx-sun .fx-trail,.fx-rune .fx-trail,.fx-star .fx-trail{height:116px;width:116px;border:2px solid var(--fx-color);right:7%;top:calc(50% - 72px);animation:fx-ring 2.3s ease both}
.fx-note .fx-art{animation:fx-melody 2.3s ease both}.fx-note .fx-satellites{animation:fx-notes 2.3s ease both;transform-origin:center}
.fx-axe .fx-art,.fx-sword .fx-art,.fx-dagger .fx-art,.fx-scythe .fx-art{animation:fx-slash 2.3s ease both}
.fx-fire .fx-art{animation:fx-fireball 2.3s ease both}.fx-fire .fx-trail{border-top-width:15px;filter:blur(3px)}
.fx-gear .fx-art{animation:fx-gear 2.3s ease both}
.fx-shield .fx-art,.fx-fist .fx-art{animation:fx-impact 2.3s ease both}
.fx-brush .fx-satellites,.fx-leaf .fx-satellites{transform-origin:center;animation:fx-bloom 2.3s ease both}
.fx-defeat .fx-trail{display:none}.fx-defeat .fx-art{animation:fx-soul 2.3s ease both}.fx-defeat .fx-halo{background:radial-gradient(ellipse,#63557799,transparent 65%)}
.foe-token>.fx-scene .fx-art{width:90px;height:90px;top:-10px;right:22%}.foe-token>.fx-scene .fx-caption{bottom:5px;padding:4px 9px}.foe-token>.fx-scene .fx-caption strong{font-size:12px}.foe-token>.fx-scene .fx-caption span{font-size:11px}
.effects-hud{position:fixed;z-index:150;right:20px;bottom:22px;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 28px)}
.effects-hud .fx-scene{position:relative;inset:auto;width:280px;max-width:100%;height:130px;border-radius:14px;background:#211e2ceF;box-shadow:0 8px 28px #0004}
.effects-hud .fx-art{right:6px;top:1px;width:113px;height:113px}.effects-hud .fx-caption{left:12px;right:auto;bottom:12px;max-width:175px;background:#201c2fea}.effects-hud .fx-caption strong{max-width:150px}.effects-hud .fx-halo{right:-25px;top:-25px}
#fx-settings label{margin-bottom:12px}#fx-settings button{margin-top:6px}
.fx-still,.fx-still *{animation:none!important}.fx-still .fx-trail{display:none}.fx-still .fx-art{transform:none}.fx-still .fx-halo{opacity:.4}
@keyframes fx-presence{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
@keyframes fx-halo{0%{opacity:0;transform:scale(.7)}35%,75%{opacity:.8;transform:scale(1.15)}100%{opacity:0;transform:scale(1.3)}}
@keyframes fx-rise{0%{transform:translateY(24px) scale(.65)}25%,70%{transform:translateY(-2px) scale(1)}100%{transform:translateY(-25px) scale(.9)}}
@keyframes fx-sweep{0%,15%{opacity:0;transform:rotate(-75deg) scale(.6)}38%{opacity:.8;transform:rotate(8deg) scale(1)}75%,100%{opacity:0;transform:rotate(38deg) scale(1.2)}}
@keyframes fx-ring{0%{transform:scale(.4) rotate(-30deg);opacity:0}35%{transform:scale(1.15) rotate(10deg);opacity:.7}100%{transform:scale(1.4) rotate(50deg);opacity:0}}
@keyframes fx-slash{0%{transform:translate(-15px,10px) rotate(-55deg) scale(.7)}22%{transform:rotate(-30deg) scale(1.08)}39%,72%{transform:rotate(18deg) scale(1)}100%{transform:translate(15px,-14px) rotate(24deg) scale(.95)}}
@keyframes fx-fireball{0%{transform:translate(-75px,8px) scale(.6)}32%{transform:translate(4px,-5px) scale(1.12)}60%,80%{transform:translate(0,-5px) scale(1)}100%{transform:translate(18px,-16px) scale(.8)}}
@keyframes fx-melody{0%{transform:translateY(22px) rotate(-12deg) scale(.6)}25%{transform:translateY(0) rotate(8deg)}55%{transform:translateY(-8px) rotate(-5deg)}80%,100%{transform:translateY(-18px) rotate(4deg)}}
@keyframes fx-notes{0%,20%{transform:translateY(15px);opacity:0}50%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
@keyframes fx-gear{0%{transform:rotate(-50deg) scale(.6)}35%,70%{transform:rotate(15deg) scale(1)}100%{transform:rotate(60deg) scale(.8)}}
@keyframes fx-impact{0%{transform:scale(.5)}27%{transform:scale(1.16)}40%,75%{transform:scale(1)}100%{transform:scale(.9)}}
@keyframes fx-bloom{0%{transform:scale(.2);opacity:0}45%,75%{transform:scale(1);opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes fx-soul{0%{transform:translateY(25px) scale(.8);opacity:0}25%,55%{transform:translateY(-5px) scale(1);opacity:1}100%{transform:translateY(-55px) scale(.85);opacity:0}}
@media(max-width:600px){.fx-art{width:106px;height:106px;top:calc(50% - 63px);right:5%}.fx-caption strong{font-size:13px}.effects-hud{right:12px;bottom:12px}.effects-hud .fx-scene{width:240px;height:116px}.effects-hud .fx-art{width:100px;height:100px}.effects-hud .fx-caption{max-width:158px}}

/* The Magician is a full sequence, drawn afresh on each frame. */
.fx-scene.fx-wizard{animation:none;background:transparent;overflow:hidden}
.fx-wizard::before{border-color:#ffb968;box-shadow:inset 0 0 20px #ff81331a;z-index:1}
.wizard-stage{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.fx-wizard .fx-caption{left:10px;right:auto;bottom:8px;padding:5px 9px;background:#21152ded;max-width:calc(100% - 20px)}
.fx-wizard .fx-caption strong{font-size:12px;max-width:210px}.fx-wizard .fx-caption span{font-size:11px}
.effects-hud .fx-wizard{width:360px;height:200px;background:#231b2c}
.effects-hud .fx-wizard .fx-caption{max-width:200px}
@media(max-width:600px){.effects-hud .fx-wizard{width:min(340px,calc(100vw - 24px));height:190px}.fx-wizard .fx-caption strong{font-size:11px}.fx-wizard .fx-caption span{font-size:10px}}

/* Barde : symphonie en pixel art, palette originale. */
.fx-bard::before{border-color:#d7b3ff;box-shadow:inset 0 0 20px #b979e41a}

/* Original class colors for the three new sprite effects. */
.fx-sprite::before{border-color:var(--fx-color);box-shadow:inset 0 0 20px #b979e414}

/* 2.2 — Keep the original sprite pixels crisp, with space reserved for the caption. */
.sprite-stage,.sprite-stage image{image-rendering:pixelated}
.fx-sprite .fx-caption{max-width:calc(100% - 20px)}
.fx-sprite::before{box-shadow:inset 0 0 20px color-mix(in srgb,var(--fx-deep) 12%,transparent)}