/* Layered media stage; clipped, pointer-free and independent of game rules. */
.combat-vfx { position:absolute; z-index:5; width:clamp(180px,36vw,340px); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:screen; contain:layout paint; }
.combat-vfx video { display:block; width:100%; height:100%; object-fit:contain; }
.combat-vfx.vfx-support { width:clamp(150px,27vw,250px); --vfx-color:#b4ec9d; }
.vfx-fallback::after { content:""; position:absolute; inset:20%; border:3px solid var(--vfx-color,#ffc985); border-radius:50%; box-shadow:0 0 28px var(--vfx-color,#ffc985),inset 0 0 22px var(--vfx-color,#ffc985); animation:vfx-ring .75s ease-out both; }
.combat-skill-title { position:absolute; z-index:6; pointer-events:none; top:45px; left:50%; transform:translateX(-50%); max-width:85%; width:max-content; padding:7px 18px; border:1px solid #ddc58a70; background:linear-gradient(90deg,#11180be6,#3b301fef,#11180be6); border-radius:3px; font:600 12px/1.3 var(--font-ui); letter-spacing:.09em; color:#ffe5aa; opacity:0; text-align:center; }
.combat-skill-title.is-visible { animation:vfx-title 1.3s ease-out both; }
.arena.vfx-heavy .bg { animation:vfx-impact .35s ease-out; }
@keyframes vfx-title { 0% {opacity:0;translate:0 5px} 15%,65% {opacity:1;translate:0 0} 100% {opacity:0} }
@keyframes vfx-ring { from {transform:scale(.4);opacity:.8} to {transform:scale(1.65);opacity:0} }
@keyframes vfx-impact { 0%,100% {transform:translateX(0)} 25% {transform:translateX(-3px)} 60% {transform:translateX(2px)} }
@media(prefers-reduced-motion:reduce) {
 .combat-vfx,.combat-skill-title { display:none!important; }
 .arena.vfx-heavy .bg { animation:none!important; }
}