/* Battle V3 · Toxy graffiti shots. Opaque ink keeps silhouettes readable. */
.v3-ability-vfx-host:has(.signature-ability-108) { z-index: 10080; }
.v3-ability-vfx-host .generic-vfx-root.signature-ability-108 { filter: none; }
.v3-ability-vfx-host .signature-ability-108 .generic-vfx-delivery-layer { mix-blend-mode: normal; }
.toxy-ability-vfx {
    position: fixed; z-index: 10080; inset: 0; pointer-events: none; overflow: hidden;
    --toxy-primary: #ff43bd; --toxy-core: #ffe0f7; --toxy-deep: #c10079;
}
.toxy-ink-shadow { fill: #0b101b; }
.toxy-ink-color { fill: var(--toxy-primary); }
.toxy-ink-deep { fill: var(--toxy-deep); }
.toxy-ink-light { fill: var(--toxy-core); }
.toxy-ink-scratch { fill: none; stroke: var(--toxy-core); stroke-width: 1.3; stroke-linecap: round; }

.toxy-ability-vfx__weapon {
    position: fixed; z-index: 5; left: var(--toxy-start-x); top: var(--toxy-start-y);
    width: 130px; height: 130px; transform-origin: 0 0; transform: rotate(var(--toxy-angle));
}
.toxy-ability-vfx__weapon img {
    position: absolute; width: 130px; height: 130px; object-fit: contain; left: -130px; top: -48px;
    filter: drop-shadow(0 0 4px var(--toxy-primary)); animation: toxyWeaponRecoil .8s ease-out both;
}
@keyframes toxyWeaponRecoil {
    0% { opacity: 1; transform: translateX(0) scaleX(-1); }
    14% { opacity: 1; transform: translateX(-18px) rotate(-6deg) scaleX(-1); }
    36%, 65% { opacity: 1; transform: translateX(0) scaleX(-1); }
    100% { opacity: 0; transform: translateX(-6px) scaleX(-1); }
}

/* Only the bullet and its torn paint wake travel. The track clips paint that
   would otherwise appear behind the gun, including right-to-left shots. */
.toxy-shot-trajectory {
    position: fixed; z-index: 4; left: var(--toxy-start-x); top: var(--toxy-start-y);
    width: var(--toxy-distance); height: 0; transform: rotate(var(--toxy-angle)); transform-origin: 0 0;
}
.toxy-shot-flight-window { position: absolute; left: 0; top: -130px; width: 100%; height: 260px; overflow: hidden; }
.toxy-shot-projectile {
    position: absolute; left: 0; top: 130px; width: 0; height: 0;
    animation: toxyPaintFlight var(--toxy-flight-duration) linear 40ms both;
}
@keyframes toxyPaintFlight {
    0% { opacity: 1; transform: translateX(0); }
    99.9% { opacity: 1; }
    100% { opacity: 0; transform: translateX(var(--toxy-distance)); }
}
.is-impacting .toxy-shot-trajectory { visibility: hidden; }
.toxy-shot-trail {
    position: absolute; right: 39px; top: -60px; width: var(--toxy-trail-width); height: 120px;
    filter: drop-shadow(0 0 2px var(--toxy-primary));
}
.toxy-shot-trail-art { display: block; width: 100%; height: 100%; overflow: visible; }
.toxy-shot-trail-art .toxy-ink-shadow { transform: translateY(2px); }
.toxy-shot-bullet-art {
    position: absolute; left: -88px; top: -32px; width: 92px; height: 64px; overflow: visible;
    filter: drop-shadow(0 0 3px var(--toxy-primary)) drop-shadow(0 0 6px var(--toxy-primary));
}
.toxy-shot-tag {
    position: absolute; left: var(--tag-x); top: calc(50% + var(--tag-y)); width: var(--tag-size); height: var(--tag-size);
    color: var(--motif-color); transform: translate(-50%, -50%) rotate(var(--tag-tilt));
    filter: drop-shadow(0 2px 1px #080b16) drop-shadow(0 0 2px var(--toxy-primary));
}
.toxy-shot-tag svg, .toxy-muzzle-tags svg, .toxy-paint-debris svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The barrel is the origin of the forward fan, not the centre of a halo. */
.toxy-ability-vfx__muzzle {
    position: fixed; z-index: 6; left: var(--toxy-start-x); top: var(--toxy-start-y);
    width: 0; height: 0; transform: rotate(var(--toxy-angle));
}
.toxy-muzzle-paint {
    position: absolute; left: -35px; top: -110px; width: 300px; height: 220px; transform-origin: 35px 110px;
    animation: toxyPaintMuzzle .42s cubic-bezier(.12,.7,.2,1) both;
    filter: drop-shadow(0 0 3px var(--toxy-primary));
}
.toxy-muzzle-art { width: 100%; height: 100%; overflow: visible; }
@keyframes toxyPaintMuzzle {
    0% { opacity: 0; transform: scale(.12,.25); }
    8%, 24% { opacity: 1; transform: scale(1,1); }
    45% { opacity: .9; transform: scale(1.08,.9); }
    100% { opacity: 0; transform: scale(1.24,1.16); }
}
.toxy-muzzle-tags i {
    position: absolute; left: calc(105px + var(--i) * 33px); top: calc(-78px + var(--i) * 116px);
    width: 34px; height: 38px; color: var(--toxy-primary); opacity: 0;
    filter: drop-shadow(0 0 2px var(--toxy-core)); animation: toxyMuzzleTag .5s ease-out 25ms both;
}
@keyframes toxyMuzzleTag {
    0% { opacity: 0; transform: translate(-45px,0) scale(.2) rotate(-25deg); }
    20%, 55% { opacity: 1; }
    100% { opacity: 0; transform: translate(35px,12px) scale(1.1) rotate(12deg); }
}

/* A short puncture flash gives way to opaque ink and a legible skin stamp. */
.toxy-ability-vfx__impact {
    position: fixed; z-index: 7; left: var(--toxy-end-x); top: var(--toxy-end-y);
    width: 0; height: 0;
}
.toxy-ability-vfx__impact-core {
    position: absolute; left: -70px; top: -70px; width: 140px; height: 140px;
    background: var(--toxy-core); clip-path: polygon(48% 0,56% 34%,78% 12%,65% 42%,100% 49%,65% 58%,85% 88%,55% 68%,47% 100%,41% 66%,11% 84%,31% 57%,0 45%,36% 40%,24% 14%,44% 33%);
    opacity: 0; animation: toxyPaintPuncture .18s ease-out var(--toxy-impact-delay) both;
}
@keyframes toxyPaintPuncture {
    0% { opacity: 0; transform: scale(.1) rotate(-10deg); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.55) rotate(10deg); }
}
.toxy-graffiti-impact {
    position: absolute; left: 0; top: 0; width: 310px; height: 310px; transform: translate(-50%, -50%);
}
.toxy-paint-art { display: block; width: 100%; height: 100%; overflow: visible; }
.toxy-graffiti-impact > .toxy-paint-art { opacity: 0; filter: drop-shadow(0 0 2px var(--toxy-primary)); }
.toxy-impact-art .toxy-ink-deep { transform: scale(1.06) rotate(3deg); }
.toxy-impact-art__hole { fill: #10131d; }
.is-impacting .toxy-graffiti-impact > .toxy-paint-art { animation: toxyPaintSpread 1.16s cubic-bezier(.1,.8,.2,1) both; }
@keyframes toxyPaintSpread {
    0% { opacity: 0; transform: scale(.18) rotate(-13deg); }
    9% { opacity: 1; transform: scale(1.08) rotate(4deg); }
    24%, 65% { opacity: .95; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: translateY(8px) scale(1.04); }
}
.toxy-graffiti-impact__stamp {
    position: absolute; left: 50%; top: 50%; width: 92px; height: 100px; color: var(--toxy-primary); opacity: 0;
    filter: drop-shadow(0 2px 1px #080a14) drop-shadow(0 0 3px var(--toxy-primary));
}
.toxy-graffiti-impact__stamp svg { width: 100%; height: 100%; overflow: visible; }
.is-impacting .toxy-graffiti-impact__stamp { animation: toxyPaintStamp 1.04s ease-out 45ms both; }
@keyframes toxyPaintStamp {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.65) rotate(-18deg); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(6deg); }
    25%, 77% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-7deg); }
    100% { opacity: 0; transform: translate(-50%, -46%) scale(1.04) rotate(-7deg); }
}
.toxy-graffiti-impact__drips { position: absolute; inset: 0; }
.toxy-graffiti-impact__drips i {
    position: absolute; left: var(--drip-x); top: 56%; width: 3px; height: var(--drip-length);
    border-radius: 0 0 8px 8px; background: var(--toxy-primary); transform-origin: top; opacity: 0;
}
.toxy-graffiti-impact__drips i:nth-child(2n) { width: 5px; top: 61%; }
.toxy-graffiti-impact__drips i::after { content: ''; position: absolute; width: 6px; height: 9px; left: -1px; bottom: -3px; border-radius: 50%; background: inherit; }
.is-impacting .toxy-graffiti-impact__drips i { animation: toxyPaintDrip 1s ease-in calc(.08s + var(--i) * .025s) both; }
@keyframes toxyPaintDrip {
    0% { opacity: 0; transform: scaleY(.05); }
    18% { opacity: .95; }
    65% { opacity: .9; transform: scaleY(1); }
    100% { opacity: 0; transform: translateY(10px) scaleY(1.12); }
}
.toxy-impact-debris { position: absolute; left: 0; top: 0; }
.toxy-paint-debris {
    position: absolute; left: 0; top: 0; width: var(--chip-length); height: 5px; background: var(--toxy-primary);
    clip-path: polygon(0 15%,100% 0,72% 100%,18% 75%); opacity: 0;
}
.toxy-paint-debris.is-tag { width: 27px; height: 30px; background: none; clip-path: none; color: var(--motif-color); }
.is-impacting .toxy-paint-debris { animation: toxyPaintScatter .78s cubic-bezier(.05,.6,.2,1) calc(var(--i) * 5ms) both; }
@keyframes toxyPaintScatter {
    0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateX(18px) scale(.2); }
    14%, 60% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--scatter)) rotate(var(--counter-angle)) scale(.85); }
}
.toxy-laser-card-impact {
    position: fixed; z-index: 3; left: var(--toxy-card-left); top: var(--toxy-card-top);
    width: var(--toxy-card-width); height: var(--toxy-card-height); overflow: hidden; border-radius: 12px;
}
.toxy-laser-card-impact__cracks, .toxy-laser-card-impact__web {
    position: absolute; inset: 0; width: 100%; height: 100%; fill: none;
    stroke: var(--toxy-core); stroke-width: 1; opacity: 0; stroke-dasharray: 220; stroke-dashoffset: 220;
    filter: drop-shadow(0 0 2px var(--toxy-primary)); animation: toxyPaintCracks .62s ease-out var(--toxy-impact-delay) both;
}
@keyframes toxyPaintCracks { 0% { stroke-dashoffset: 220; opacity: 0; } 18% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.v3-card.toxy-laser-card-hit .v3-face-front { animation: toxyAbilityDamageShake .4s ease-out both !important; }
@keyframes toxyAbilityDamageShake {
    0%,100% { transform: translate(0,0) rotate(0); filter: brightness(1); }
    15% { transform: translate(-6px,2px) rotate(-1deg); filter: brightness(1.5); }
    35% { transform: translate(5px,-2px) rotate(.8deg); }
    55% { transform: translate(-3px,1px) rotate(-.5deg); }
    75% { transform: translate(2px,-1px); }
}
.v3-card.toxy-laser-casting .v3-face-front { filter: brightness(1.12) saturate(1.14); }
.toxy-ability-vfx.is-basic .toxy-ability-vfx__weapon, .toxy-ability-vfx.is-basic .toxy-ability-vfx__weapon img { width: 100px; height: 100px; }
.toxy-ability-vfx.is-basic .toxy-ability-vfx__weapon img { left: -100px; top: -37px; }
.toxy-ability-vfx.is-basic .toxy-muzzle-paint { scale: .8; }
.toxy-ability-vfx.is-basic .toxy-muzzle-tags { display: none; }
.toxy-ability-vfx.is-basic .toxy-shot-bullet-art { scale: .86; transform-origin: right center; }
.toxy-ability-vfx.is-basic .toxy-graffiti-impact { width: 255px; height: 255px; }
.toxy-ability-vfx.is-basic .toxy-graffiti-impact__stamp { width: 74px; height: 80px; }
.toxy-ability-vfx.is-basic .toxy-paint-debris.is-tag { width: 22px; height: 24px; }
@media (max-width: 600px) {
    .toxy-muzzle-paint { scale: .75; }
    .toxy-muzzle-tags { display: none; }
    .toxy-graffiti-impact { width: 235px; height: 235px; }
    .toxy-ability-vfx.is-basic .toxy-graffiti-impact { width: 205px; height: 205px; }
    .toxy-graffiti-impact__stamp { width: 74px; height: 80px; }
}

/* Graffiti V2 · 107 activation and its buff-controlled portrait spirals. */
.toxy-sync-cast__center {
    position: absolute; left: var(--toxy-start-x); top: var(--toxy-start-y); width: 0; height: 0;
    scale: var(--toxy-sync-scale,1); animation: toxySyncCastVisibility 2.05s ease-out both;
}
@keyframes toxySyncCastVisibility { 0% { opacity: 0; } 9%,78% { opacity: 1; } 100% { opacity: 0; } }
.toxy-sync-cast__spirals { position: absolute; left: -165px; top: -190px; width: 330px; height: 370px; transform: rotate(-7deg); }
.toxy-sync-paint-spirals { width: 100%; height: 100%; overflow: visible; }
.toxy-sync-cast .toxy-sync-paint-spiral__body { animation: toxySyncInkCharge 1.85s ease-out both; }
@keyframes toxySyncInkCharge { 0% { stroke-dashoffset: 940; opacity: 0; } 20% { opacity: 1; } 100% { stroke-dashoffset: 0; } }
.toxy-sync-paint-spiral { filter: drop-shadow(0 0 2px var(--spiral-color)); }
.toxy-sync-cast__half {
    position: absolute; left: calc(var(--side) * 87px - 55px); top: -55px; width: 110px; height: 110px;
    animation: toxySyncPaintUnfold 1.95s cubic-bezier(.12,.7,.2,1) both;
}
.toxy-sync-cast__half img { position: relative; width: 100%; height: 100%; object-fit: contain; transform: scaleX(calc(var(--side) * -1)); filter: drop-shadow(0 0 4px var(--toxy-primary)); }
.toxy-sync-cast__ink { position: absolute; left: -65px; top: -65px; width: 240px; height: 240px; opacity: .8; }
.toxy-sync-cast__ink svg { width: 100%; height: 100%; overflow: visible; }
.toxy-sync-cast__signature { position: absolute; left: 35px; top: 104px; width: 44px; height: 50px; color: var(--toxy-primary); filter: drop-shadow(0 0 2px var(--toxy-core)); }
.toxy-sync-cast__signature svg { width: 100%; height: 100%; overflow: visible; }
@keyframes toxySyncPaintUnfold {
    0% { opacity: 0; transform: translateX(calc(var(--side) * -65px)) scale(.2) rotate(calc(var(--side) * -25deg)); }
    24%,72% { opacity: 1; transform: translateX(calc(var(--side) * 7px)) scale(1) rotate(calc(var(--side) * 6deg)); }
    100% { opacity: 0; transform: translateX(calc(var(--side) * 25px)) scale(.9); }
}
.toxy-sync-cast__tags i {
    position: absolute; left: calc(-140px + var(--i) * 49px); top: calc(-160px + var(--i) * 24px);
    width: 29px; height: 32px; color: var(--tag-color); opacity: 0;
    animation: toxySyncPaintTag 1.6s ease-out calc(var(--i) * 45ms) both;
}
.toxy-sync-cast__tags i:nth-child(even) { top: calc(135px - var(--i) * 17px); }
.toxy-sync-cast__tags svg { width: 100%; height: 100%; overflow: visible; }
@keyframes toxySyncPaintTag { 0% { opacity: 0; transform: translateY(25px) scale(.2) rotate(-18deg); } 25%,75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.1) rotate(10deg); } }

.toxy-sync-card-fx[data-graffiti-version="2"] { inset: -2px -20px; overflow: visible; isolation: auto; }
/* Match the native V3 HUD gutters: upper badges, right-hand gear/spells and
   the 246px bottom zone stay completely outside the persistent paint. These
   coordinates scale with the card's existing zoom in every viewport profile. */
.v3-card .hero-banner-wrapper > .toxy-sync-card-fx[data-graffiti-version="2"] {
    inset: 88px 130px 250px 12px;
    z-index: 2;
    overflow: hidden;
    clip-path: inset(0);
    border-radius: 12px;
    isolation: isolate;
    animation: none;
}
.toxy-sync-card-fx[data-graffiti-version="2"]::before,
.toxy-sync-card-fx[data-graffiti-version="2"]::after { display: none; }
.toxy-sync-card-fx .toxy-sync-paint-spirals { position: absolute; inset: 0; width: 100%; height: 100%; }
.toxy-sync-card-fx .toxy-sync-paint-spiral__body { animation: toxySyncInkFlow 3.2s linear infinite; }
.toxy-sync-card-fx .toxy-sync-paint-spiral.is-pink .toxy-sync-paint-spiral__body { animation-direction: reverse; animation-duration: 3.8s; }
@keyframes toxySyncInkFlow { to { stroke-dashoffset: -216; } }
.toxy-sync-graffiti-seals { position: absolute; inset: 0; }
.toxy-sync-graffiti-seals i {
    position: absolute; left: calc(3% + var(--seal-i) * 78%); top: calc(24% + var(--seal-i) * 37%);
    width: 28px; height: 31px; filter: drop-shadow(0 1px 1px #070a12);
    animation: toxySyncSealFloat 2.7s ease-in-out calc(var(--seal-i) * -.9s) infinite alternate;
}
.toxy-sync-graffiti-seals svg { width: 100%; height: 100%; overflow: visible; }
@keyframes toxySyncSealFloat { from { transform: translateY(4px) rotate(-12deg); } to { transform: translateY(-5px) rotate(9deg); } }
.toxy-sync-ink-flecks { position: absolute; inset: 0; }
.toxy-sync-ink-flecks i { position: absolute; left: var(--ink-x); top: var(--ink-y); width: 14px; height: 15px; animation: toxySyncInkFleck 2s ease-in-out calc(var(--i) * -.23s) infinite; }
.toxy-sync-ink-flecks svg { width: 100%; height: 100%; }
.toxy-sync-ink-flecks b { display: block; width: 8px; height: 3px; background: currentColor; clip-path: polygon(0 15%,100% 0,70% 100%,15% 75%); }
@keyframes toxySyncInkFleck { 0%,100% { opacity: .2; transform: translateY(5px) rotate(-14deg); } 45% { opacity: .9; transform: translateY(-7px) rotate(17deg); } }

@media (prefers-reduced-motion: reduce) {
    .toxy-ability-vfx *, .v3-card.toxy-laser-card-hit .v3-face-front { animation-duration: .24s !important; animation-delay: 0s !important; }
    .toxy-shot-trajectory, .toxy-muzzle-tags, .toxy-impact-debris, .toxy-graffiti-impact__drips, .toxy-sync-cast__tags { display: none; }
    .toxy-sync-cast__center, .toxy-sync-cast__half { animation: none !important; opacity: 1; }
    .toxy-sync-cast .toxy-sync-paint-spiral__body { animation: none !important; }
    .v3-card.toxy-laser-card-hit .v3-face-front { animation: none !important; }
    .toxy-muzzle-paint { animation-name: toxyPaintStill; }
    .is-impacting .toxy-graffiti-impact > .toxy-paint-art { animation: toxyPaintStill .35s ease-out !important; }
    .is-impacting .toxy-graffiti-impact__stamp { animation: toxyPaintStill .4s ease-out !important; transform: translate(-50%,-50%); }
}
@keyframes toxyPaintStill { 0%,100% { opacity: 0; } 25%,65% { opacity: .9; } }