/* ===== GAME ANIMATIONS ===== */

.game-animation-layer {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.play-battle-animation-layer {
    z-index: 2;
}

.play-battle-player-target-animation-layer {
    z-index: 4;
}

.play-battle-creature-turn-flash {
    animation: ms-battle-creature-turn-flash 560ms ease-in-out both;
}

.play-battle-creature-hit-shake {
    animation: ms-battle-creature-hit-shake 360ms ease-out both;
    will-change: transform;
}

.play-battle-creature-hit-shake.play-battle-creature-critical-hit {
    animation: ms-battle-creature-critical-hit-shake 480ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.play-battle-creature-defeat {
    animation: ms-battle-creature-defeat 1100ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
    will-change: opacity, transform, filter;
}

.play-battle-creature-defeat .play-battle-creature-image {
    animation: ms-battle-creature-defeat-image 1100ms ease-in both;
}

.play-battle-damage-number {
    animation: ms-battle-damage-number 950ms ease-out both;
    backface-visibility: hidden;
    color: rgba(255,250,228,0.98);
    contain: layout paint;
    font-size: clamp(0.9rem, 4.2cqi, 2.35rem);
    font-weight: 900;
    left: var(--basic-attack-x);
    line-height: 1;
    pointer-events: none;
    position: absolute;
    text-shadow:
        0 2px 0 rgba(91,25,16,0.82),
        0 -1px 0 rgba(255,255,255,0.72),
        0 0 8px rgba(255,203,118,0.36);
    top: var(--basic-attack-y);
    transform: translate3d(-50%, -52%, 0) scale(0.88);
    will-change: opacity, transform;
    z-index: 4;
}

.play-player-damage-number {
    animation: ms-player-damage-number 950ms ease-out both;
    backface-visibility: hidden;
    color: rgba(255,70,70,0.98);
    contain: layout paint;
    font-size: 1.1rem;
    font-weight: 900;
    left: 50%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    text-shadow:
        0 2px 0 rgba(58,0,0,0.86),
        0 0 8px rgba(255,35,35,0.5),
        0 -1px 0 rgba(255,220,210,0.7);
    top: 22px;
    transform: translate3d(-50%, -58%, 0) scale(0.88);
    will-change: opacity, transform;
    z-index: 6;
}

.play-battle-message-overlay-attack-cue {
    animation: ms-battle-message-attack-cue 420ms ease-out both;
}

.game-animation-layer-loop .game-animation-basic-attack,
.game-animation-layer-loop .game-animation-basic-attack::before,
.game-animation-layer-loop .game-animation-basic-attack::after,
.game-animation-layer-loop .game-animation-basic-attack *,
.game-animation-layer-loop .game-animation-life-drain,
.game-animation-layer-loop .game-animation-life-drain::before,
.game-animation-layer-loop .game-animation-life-drain::after,
.game-animation-layer-loop .game-animation-life-drain *,
.game-animation-layer-loop .game-animation-sound-wave,
.game-animation-layer-loop .game-animation-sound-wave::before,
.game-animation-layer-loop .game-animation-sound-wave::after,
.game-animation-layer-loop .game-animation-sound-wave *,
.game-animation-layer-loop .game-animation-scratch,
.game-animation-layer-loop .game-animation-scratch::before,
.game-animation-layer-loop .game-animation-scratch::after,
.game-animation-layer-loop .game-animation-scratch * {
    animation-iteration-count: infinite;
}

.game-animation-basic-attack {
    --basic-attack-duration: 900ms;
    --basic-attack-x: 50%;
    --basic-attack-y: 38%;
    inset: 0;
    position: absolute;
}

.game-animation-basic-attack::before {
    animation: ms-basic-attack-flash var(--basic-attack-duration) ease-out both;
    background: radial-gradient(circle at var(--basic-attack-x) var(--basic-attack-y), rgba(255,244,210,0.5), rgba(255,132,54,0.16) 12%, transparent 28%);
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
}

.game-animation-basic-attack::after {
    animation: ms-basic-attack-recoil var(--basic-attack-duration) ease-out both;
    background: radial-gradient(circle, rgba(20,10,8,0.42), transparent 66%);
    border-radius: 999px;
    height: 16%;
    left: var(--basic-attack-x);
    opacity: 0;
    position: absolute;
    top: var(--basic-attack-y);
    transform: translate(-50%, -50%) scale(0.6);
    width: 16%;
}

.game-animation-basic-attack__impact,
.game-animation-basic-attack__shockwave,
.game-animation-basic-attack__slash {
    left: var(--basic-attack-x);
    position: absolute;
    top: var(--basic-attack-y);
}

.game-animation-basic-attack__impact {
    animation: ms-basic-attack-impact var(--basic-attack-duration) ease-out both;
    background: radial-gradient(circle, rgba(255,255,246,0.96) 0%, rgba(255,207,112,0.9) 24%, rgba(255,96,38,0.35) 56%, transparent 72%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255,220,150,0.54);
    height: 9%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
    width: 9%;
}

.game-animation-basic-attack__shockwave {
    animation: ms-basic-attack-shockwave var(--basic-attack-duration) ease-out 60ms both;
    border: 2px solid rgba(255,230,180,0.72);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(255,99,42,0.24);
    height: 10%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    width: 10%;
}

.game-animation-basic-attack__slash {
    background: linear-gradient(90deg, rgba(255,248,220,0), rgba(255,248,220,0.94), rgba(255,127,56,0.34));
    border-radius: 999px;
    box-shadow: 0 0 7px rgba(255,180,96,0.38);
    height: 1.1%;
    opacity: 0;
    transform-origin: left center;
    width: 11%;
}

.game-animation-basic-attack__slash-one {
    animation: ms-basic-attack-mark-one var(--basic-attack-duration) ease-out 40ms both;
}

.game-animation-basic-attack__slash-two {
    animation: ms-basic-attack-mark-two var(--basic-attack-duration) ease-out 85ms both;
    width: 9%;
}

.game-animation-life-drain {
    --life-drain-duration: 1300ms;
    --life-drain-x: var(--basic-attack-x, 50%);
    --life-drain-y: var(--basic-attack-y, 42%);
    inset: 0;
    position: absolute;
}

.game-animation-life-drain::before {
    animation: ms-life-drain-shadow var(--life-drain-duration) ease-out both;
    background:
        radial-gradient(ellipse at var(--life-drain-x) var(--life-drain-y), rgba(12,0,20,0.72) 0%, rgba(20,7,34,0.42) 22%, transparent 50%),
        radial-gradient(circle at var(--life-drain-x) calc(var(--life-drain-y) - 12%), rgba(102,255,166,0.18), transparent 34%);
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
}

.game-animation-life-drain::after {
    animation: ms-life-drain-ring var(--life-drain-duration) cubic-bezier(0.18, 0.78, 0.2, 1) both;
    border: 2px solid rgba(117,255,177,0.62);
    border-radius: 999px;
    box-shadow:
        0 0 18px rgba(85,255,162,0.42),
        inset 0 0 14px rgba(95,37,145,0.4);
    content: '';
    height: 30%;
    left: var(--life-drain-x);
    opacity: 0;
    position: absolute;
    top: var(--life-drain-y);
    transform: translate(-50%, -50%) scale(0.72);
    width: 28%;
}

.game-animation-life-drain__core,
.game-animation-life-drain__mote,
.game-animation-life-drain__siphon,
.game-animation-life-drain__veil {
    left: var(--life-drain-x);
    position: absolute;
    top: var(--life-drain-y);
}

.game-animation-life-drain__veil {
    animation: ms-life-drain-veil var(--life-drain-duration) ease-in-out both;
    background:
        radial-gradient(ellipse at center, rgba(7,28,18,0) 0%, rgba(38,255,144,0.22) 34%, rgba(88,38,145,0.18) 58%, transparent 74%),
        repeating-linear-gradient(100deg, transparent 0 12%, rgba(120,255,185,0.16) 13%, transparent 18%);
    border-radius: 46% 54% 52% 48%;
    filter: blur(1px);
    height: 44%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    width: 34%;
}

.game-animation-life-drain__core {
    animation: ms-life-drain-core var(--life-drain-duration) ease-out both;
    background: radial-gradient(circle, rgba(224,255,223,0.96) 0%, rgba(94,255,151,0.78) 26%, rgba(99,39,151,0.46) 58%, transparent 74%);
    border-radius: 999px;
    box-shadow:
        0 0 16px rgba(108,255,169,0.58),
        0 0 34px rgba(107,48,164,0.38);
    height: 13%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    width: 13%;
}

.game-animation-life-drain__siphon {
    animation: ms-life-drain-siphon var(--life-drain-duration) cubic-bezier(0.2, 0.78, 0.26, 1) both;
    background: linear-gradient(0deg, transparent, rgba(96,255,158,0.24) 18%, rgba(224,255,220,0.88) 54%, rgba(98,44,150,0.12) 84%, transparent);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(93,255,167,0.42);
    height: 42%;
    opacity: 0;
    transform-origin: center bottom;
    width: 2.2%;
}

.game-animation-life-drain__siphon-one {
    animation-delay: 40ms;
    --life-drain-siphon-rotation: -8deg;
}

.game-animation-life-drain__siphon-two {
    animation-delay: 120ms;
    height: 48%;
    --life-drain-siphon-rotation: 9deg;
    width: 1.8%;
}

.game-animation-life-drain__siphon-three {
    animation-delay: 210ms;
    height: 36%;
    --life-drain-siphon-rotation: 1deg;
    width: 1.4%;
}

.game-animation-life-drain__mote {
    animation: ms-life-drain-mote var(--life-drain-duration) ease-out both;
    background: rgba(183,255,202,0.92);
    border-radius: 999px;
    box-shadow:
        0 0 8px rgba(104,255,164,0.74),
        0 0 16px rgba(102,50,154,0.36);
    height: 2.4%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    width: 2.4%;
}

.game-animation-life-drain__mote-one {
    animation-delay: 40ms;
    --life-drain-mote-x: -12%;
    --life-drain-mote-y: -34%;
}

.game-animation-life-drain__mote-two {
    animation-delay: 130ms;
    --life-drain-mote-x: 10%;
    --life-drain-mote-y: -42%;
}

.game-animation-life-drain__mote-three {
    animation-delay: 220ms;
    --life-drain-mote-x: -4%;
    --life-drain-mote-y: -48%;
}

.game-animation-life-drain__mote-four {
    animation-delay: 310ms;
    --life-drain-mote-x: 16%;
    --life-drain-mote-y: -30%;
}

.game-animation-sound-wave {
    --sound-wave-duration: 2000ms;
    --sound-wave-x: var(--basic-attack-x, 50%);
    --sound-wave-y: var(--basic-attack-y, 44%);
    inset: 0;
    position: absolute;
}

.game-animation-sound-wave::before {
    animation: ms-sound-wave-halo var(--sound-wave-duration) ease-out both;
    background: radial-gradient(ellipse at var(--sound-wave-x) var(--sound-wave-y), rgba(227,247,255,0.32) 0%, rgba(86,181,222,0.18) 23%, rgba(18,42,72,0.14) 44%, transparent 68%);
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
}

.game-animation-sound-wave::after {
    animation: ms-sound-wave-scanline var(--sound-wave-duration) ease-in-out both;
    background: linear-gradient(90deg, transparent, rgba(199,241,255,0.34), transparent);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(124,213,245,0.28);
    content: '';
    height: 1px;
    left: var(--sound-wave-x);
    opacity: 0;
    position: absolute;
    top: var(--sound-wave-y);
    transform: translate(-50%, -50%) scaleX(0.24);
    width: 40%;
}

.game-animation-sound-wave__bar,
.game-animation-sound-wave__ring,
.game-animation-sound-wave__spark {
    left: var(--sound-wave-x);
    position: absolute;
    top: var(--sound-wave-y);
}

.game-animation-sound-wave__ring {
    animation: ms-sound-wave-ring var(--sound-wave-duration) cubic-bezier(0.16, 0.78, 0.28, 1) both;
    border: 1px solid rgba(195,241,255,0.68);
    border-radius: 999px;
    box-shadow:
        0 0 12px rgba(92,197,234,0.38),
        inset 0 0 10px rgba(191,240,255,0.14);
    height: 14%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    width: 14%;
}

.game-animation-sound-wave__ring-two {
    animation-delay: 220ms;
}

.game-animation-sound-wave__ring-three {
    animation-delay: 440ms;
}

.game-animation-sound-wave__bar {
    animation: ms-sound-wave-bar var(--sound-wave-duration) ease-in-out both;
    background: linear-gradient(180deg, rgba(236,252,255,0.96), rgba(95,207,242,0.76) 45%, rgba(119,92,210,0.5));
    border-radius: 999px;
    box-shadow:
        0 0 7px rgba(120,218,248,0.64),
        0 0 16px rgba(116,93,211,0.24);
    height: 16%;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.18);
    transform-origin: center center;
    width: 1.7%;
}

.game-animation-sound-wave__bar-one {
    animation-delay: 0ms;
    margin-left: -13.2%;
    --sound-wave-bar-late: 0.22;
    --sound-wave-bar-mid: 0.34;
    --sound-wave-bar-peak: 0.46;
}

.game-animation-sound-wave__bar-two {
    animation-delay: 70ms;
    margin-left: -8.8%;
    --sound-wave-bar-late: 0.36;
    --sound-wave-bar-mid: 0.62;
    --sound-wave-bar-peak: 0.82;
}

.game-animation-sound-wave__bar-three {
    animation-delay: 135ms;
    margin-left: -4.4%;
    --sound-wave-bar-late: 0.58;
    --sound-wave-bar-mid: 0.96;
    --sound-wave-bar-peak: 1.28;
}

.game-animation-sound-wave__bar-four {
    animation-delay: 200ms;
    --sound-wave-bar-late: 0.76;
    --sound-wave-bar-mid: 1.16;
    --sound-wave-bar-peak: 1.58;
}

.game-animation-sound-wave__bar-five {
    animation-delay: 135ms;
    margin-left: 4.4%;
    --sound-wave-bar-late: 0.54;
    --sound-wave-bar-mid: 0.9;
    --sound-wave-bar-peak: 1.2;
}

.game-animation-sound-wave__bar-six {
    animation-delay: 70ms;
    margin-left: 8.8%;
    --sound-wave-bar-late: 0.32;
    --sound-wave-bar-mid: 0.56;
    --sound-wave-bar-peak: 0.74;
}

.game-animation-sound-wave__bar-seven {
    animation-delay: 0ms;
    margin-left: 13.2%;
    --sound-wave-bar-late: 0.24;
    --sound-wave-bar-mid: 0.38;
    --sound-wave-bar-peak: 0.5;
}

.game-animation-sound-wave__spark {
    animation: ms-sound-wave-spark var(--sound-wave-duration) ease-out both;
    background: rgba(230,252,255,0.9);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(127,221,247,0.66);
    height: 2%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    width: 2%;
}

.game-animation-sound-wave__spark-one {
    animation-delay: 180ms;
    --sound-wave-spark-x: -18%;
    --sound-wave-spark-y: -12%;
}

.game-animation-sound-wave__spark-two {
    animation-delay: 360ms;
    --sound-wave-spark-x: 18%;
    --sound-wave-spark-y: 10%;
}

.game-animation-scratch {
    --scratch-duration: 700ms;
    --scratch-x: var(--basic-attack-x, 50%);
    --scratch-y: var(--basic-attack-y, 40%);
    inset: 0;
    position: absolute;
}

.game-animation-scratch::before {
    animation: ms-scratch-flash var(--scratch-duration) ease-out both;
    background: radial-gradient(circle at var(--scratch-x) var(--scratch-y), rgba(255,236,236,0.46), rgba(255,86,86,0.18) 14%, transparent 32%);
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
}

.game-animation-scratch__claw,
.game-animation-scratch__burst {
    left: var(--scratch-x);
    position: absolute;
    top: var(--scratch-y);
}

.game-animation-scratch__claw {
    background: linear-gradient(180deg, rgba(255,244,244,0) 0%, rgba(255,247,247,0.96) 26%, rgba(255,92,92,0.86) 62%, rgba(150,12,12,0.12) 100%);
    border-radius: 999px;
    box-shadow:
        0 0 8px rgba(255,120,120,0.5),
        0 0 16px rgba(255,40,40,0.26);
    height: 30%;
    opacity: 0;
    transform-origin: center top;
    width: 0.9%;
}

.game-animation-scratch__claw-one {
    animation: ms-scratch-claw var(--scratch-duration) cubic-bezier(0.22, 0.7, 0.2, 1) 0ms both;
    margin-left: -6.6%;
}

.game-animation-scratch__claw-two {
    animation: ms-scratch-claw var(--scratch-duration) cubic-bezier(0.22, 0.7, 0.2, 1) 55ms both;
    height: 34%;
    margin-left: -2.2%;
}

.game-animation-scratch__claw-three {
    animation: ms-scratch-claw var(--scratch-duration) cubic-bezier(0.22, 0.7, 0.2, 1) 110ms both;
    height: 34%;
    margin-left: 2.2%;
}

.game-animation-scratch__claw-four {
    animation: ms-scratch-claw var(--scratch-duration) cubic-bezier(0.22, 0.7, 0.2, 1) 165ms both;
    margin-left: 6.6%;
}

.game-animation-scratch__burst {
    animation: ms-scratch-burst var(--scratch-duration) ease-out 120ms both;
    background: radial-gradient(circle, rgba(255,250,250,0.92) 0%, rgba(255,120,120,0.6) 36%, transparent 70%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255,96,96,0.46);
    height: 8%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    width: 8%;
}

@keyframes ms-scratch-flash {
    0%, 6% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    52% {
        opacity: 0.22;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ms-scratch-claw {
    0% {
        opacity: 0;
        transform: translate(-50%, -78%) rotate(19deg) scaleY(0.05);
    }

    22% {
        opacity: 1;
        transform: translate(-50%, -60%) rotate(19deg) scaleY(1);
    }

    52% {
        opacity: 0.85;
        transform: translate(-46%, -42%) rotate(19deg) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translate(-42%, -24%) rotate(19deg) scaleY(0.9);
    }
}

@keyframes ms-scratch-burst {
    0%, 12% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

    30% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1);
    }

    54% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.82);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
    }
}

@keyframes ms-basic-attack-flash {
    0%, 8% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    58% {
        opacity: 0.18;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ms-basic-attack-recoil {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }

    28% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.85);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.18);
    }
}

@keyframes ms-basic-attack-impact {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

    24% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    42% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(0.82);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
    }
}

@keyframes ms-basic-attack-shockwave {
    0%, 14% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }

    34% {
        opacity: 0.62;
    }

    72% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.9);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.9);
    }
}

@keyframes ms-basic-attack-mark-one {
    0%, 12% {
        opacity: 0;
        transform: translate(-4%, -230%) rotate(-28deg) scaleX(0.15);
    }

    28% {
        opacity: 0.9;
        transform: translate(16%, -245%) rotate(-28deg) scaleX(1);
    }

    62% {
        opacity: 0;
        transform: translate(24%, -255%) rotate(-28deg) scaleX(0.78);
    }

    100% {
        opacity: 0;
        transform: translate(24%, -255%) rotate(-28deg) scaleX(0.78);
    }
}

@keyframes ms-basic-attack-mark-two {
    0%, 16% {
        opacity: 0;
        transform: translate(-16%, 170%) rotate(24deg) scaleX(0.15);
    }

    32% {
        opacity: 0.76;
        transform: translate(10%, 190%) rotate(24deg) scaleX(1);
    }

    62% {
        opacity: 0;
        transform: translate(18%, 205%) rotate(24deg) scaleX(0.75);
    }

    100% {
        opacity: 0;
        transform: translate(18%, 205%) rotate(24deg) scaleX(0.75);
    }
}

@keyframes ms-life-drain-shadow {
    0%, 8% {
        opacity: 0;
        filter: saturate(1) brightness(1);
    }

    24% {
        opacity: 0.88;
        filter: saturate(1.2) brightness(0.92);
    }

    62% {
        opacity: 0.64;
        filter: saturate(0.84) brightness(0.74);
    }

    100% {
        opacity: 0;
        filter: saturate(0.62) brightness(0.58);
    }
}

@keyframes ms-life-drain-ring {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.42);
    }

    28% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(0.78);
    }

    58% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(1.04);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes ms-life-drain-veil {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.72) rotate(-2deg);
    }

    26% {
        opacity: 0.86;
        transform: translate(-50%, -52%) scale(0.92) rotate(1deg);
    }

    54% {
        opacity: 0.62;
        transform: translate(-50%, -58%) scale(1.02) rotate(-1deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -76%) scale(0.72) rotate(2deg);
    }
}

@keyframes ms-life-drain-core {
    0%, 12% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.42);
    }

    26% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.08);
    }

    48% {
        opacity: 0.84;
        transform: translate(-50%, -64%) scale(0.82);
    }

    78% {
        opacity: 0.42;
        transform: translate(-50%, -108%) scale(0.54);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -148%) scale(0.2);
    }
}

@keyframes ms-life-drain-siphon {
    0%, 12% {
        opacity: 0;
        transform: translate(-50%, -58%) rotate(var(--life-drain-siphon-rotation, 0deg)) scaleY(0.08);
    }

    30% {
        opacity: 0.92;
        transform: translate(-50%, -76%) rotate(var(--life-drain-siphon-rotation, 0deg)) scaleY(0.72);
    }

    62% {
        opacity: 0.58;
        transform: translate(-50%, -102%) rotate(var(--life-drain-siphon-rotation, 0deg)) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -128%) rotate(var(--life-drain-siphon-rotation, 0deg)) scaleY(0.2);
    }
}

@keyframes ms-life-drain-mote {
    0%, 12% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    28% {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1);
    }

    66% {
        opacity: 0.72;
        transform: translate(calc(-50% + var(--life-drain-mote-x)), calc(-50% + var(--life-drain-mote-y))) scale(0.72);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--life-drain-mote-x)), calc(-50% + var(--life-drain-mote-y))) scale(0.24);
    }
}

@keyframes ms-sound-wave-halo {
    0%, 8% {
        opacity: 0;
        filter: blur(0);
    }

    18% {
        opacity: 0.82;
        filter: blur(0.5px);
    }

    58% {
        opacity: 0.44;
        filter: blur(1.2px);
    }

    100% {
        opacity: 0;
        filter: blur(2px);
    }
}

@keyframes ms-sound-wave-scanline {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.16);
    }

    22% {
        opacity: 0.88;
        transform: translate(-50%, -50%) scaleX(0.82);
    }

    52% {
        opacity: 0.54;
        transform: translate(-50%, -50%) scaleX(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.48);
    }
}

@keyframes ms-sound-wave-ring {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.22);
    }

    20% {
        opacity: 0.72;
    }

    62% {
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1.45);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.8);
    }
}

@keyframes ms-sound-wave-bar {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.12);
    }

    18% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scaleY(var(--sound-wave-bar-peak, 1));
    }

    30% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scaleY(0.34);
    }

    42% {
        opacity: 0.94;
        transform: translate(-50%, -50%) scaleY(var(--sound-wave-bar-mid, 0.76));
    }

    56% {
        opacity: 0.74;
        transform: translate(-50%, -50%) scaleY(0.24);
    }

    72% {
        opacity: 0.58;
        transform: translate(-50%, -50%) scaleY(var(--sound-wave-bar-late, 0.48));
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.12);
    }
}

@keyframes ms-sound-wave-spark {
    0%, 14% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    30% {
        opacity: 0.9;
        transform: translate(-50%, -58%) scale(1);
    }

    70% {
        opacity: 0.46;
        transform: translate(calc(-50% + var(--sound-wave-spark-x)), calc(-50% + var(--sound-wave-spark-y))) scale(0.68);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sound-wave-spark-x)), calc(-50% + var(--sound-wave-spark-y))) scale(0.2);
    }
}

@keyframes ms-battle-creature-turn-flash {
    0%, 26%, 56%, 100% {
        filter: brightness(1) saturate(1);
        opacity: 1;
    }

    12%, 42% {
        filter: brightness(2.05) saturate(1.2) drop-shadow(0 0 14px rgba(255,65,46,0.66));
        opacity: 0.9;
    }
}

@keyframes ms-battle-creature-hit-shake {
    0%, 100% {
        transform: translateX(-50%);
    }

    14% {
        transform: translateX(calc(-50% - 5px)) rotate(-0.6deg);
    }

    28% {
        transform: translateX(calc(-50% + 5px)) rotate(0.6deg);
    }

    42% {
        transform: translateX(calc(-50% - 3px)) rotate(-0.35deg);
    }

    56% {
        transform: translateX(calc(-50% + 3px)) rotate(0.35deg);
    }

    72% {
        transform: translateX(calc(-50% - 1px));
    }
}

@keyframes ms-battle-creature-critical-hit-shake {
    0%, 100% {
        transform: translateX(-50%);
    }

    8% {
        transform: translateX(calc(-50% - 13px)) translateY(-2px) rotate(-2.1deg) scale(1.015);
    }

    18% {
        transform: translateX(calc(-50% + 12px)) translateY(2px) rotate(1.8deg) scale(1.025);
    }

    30% {
        transform: translateX(calc(-50% - 10px)) translateY(-1px) rotate(-1.6deg) scale(1.012);
    }

    44% {
        transform: translateX(calc(-50% + 8px)) rotate(1.2deg);
    }

    60% {
        transform: translateX(calc(-50% - 5px)) rotate(-0.8deg);
    }

    76% {
        transform: translateX(calc(-50% + 3px)) rotate(0.35deg);
    }
}

@keyframes ms-battle-creature-critical-flash {
    0%, 100% {
        opacity: 0;
    }

    10% {
        opacity: 0.94;
    }

    24% {
        opacity: 0.72;
    }

    40% {
        opacity: 0.5;
    }

    68% {
        opacity: 0;
    }
}

@keyframes ms-battle-player-freeze {
    0% {
        box-shadow: inset 0 0 0 1px rgba(255,40,40,0), inset 0 0 0 0 rgba(180,0,0,0);
        opacity: 0;
    }

    9% {
        box-shadow: inset 0 0 5px 3px rgba(255,46,46,0.96), inset 0 0 92px 20px rgba(196,0,0,0.64);
        opacity: 1;
    }

    24% {
        box-shadow: inset 0 0 4px 2px rgba(255,74,74,0.74), inset 0 0 66px 14px rgba(168,0,0,0.46);
        opacity: 1;
    }

    38% {
        box-shadow: inset 0 0 5px 3px rgba(255,46,46,0.92), inset 0 0 98px 22px rgba(204,0,0,0.62);
        opacity: 1;
    }

    100% {
        box-shadow: inset 0 0 2px 1px rgba(255,40,40,0), inset 0 0 44px 10px rgba(150,0,0,0);
        opacity: 0;
    }
}

@keyframes ms-battle-creature-defeat {
    0% {
        filter: brightness(1) saturate(1) blur(0) drop-shadow(0 18px 24px rgba(0,0,0,0.58));
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    10% {
        filter: brightness(2.15) saturate(0.95) blur(0) drop-shadow(0 0 24px rgba(255,123,74,0.72));
        opacity: 1;
        transform: translateX(-50%) translateY(-0.5%) scale(1.018);
    }

    18% {
        filter: brightness(0.8) saturate(0.5) sepia(0.18) blur(0);
        opacity: 0.96;
        transform: translateX(-50%) translateY(-1%) scale(0.995);
    }

    34% {
        filter: brightness(1.12) saturate(0.38) sepia(0.36) blur(0.3px) drop-shadow(0 0 16px rgba(255,203,118,0.34));
        opacity: 0.78;
        transform: translateX(-50%) translateY(-3%) scale(0.972);
    }

    66% {
        filter: brightness(0.6) saturate(0.14) sepia(0.6) blur(1.4px);
        opacity: 0.34;
        transform: translateX(-50%) translateY(-8%) scale(0.92);
    }

    100% {
        filter: brightness(0.28) saturate(0) sepia(0.72) blur(3.4px);
        opacity: 0;
        transform: translateX(-50%) translateY(-15%) scale(0.84);
    }
}

@keyframes ms-battle-creature-defeat-image {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    24% {
        clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
        opacity: 1;
    }

    46% {
        clip-path: polygon(0 0, 100% 4%, 100% 90%, 82% 86%, 66% 94%, 51% 82%, 33% 91%, 14% 79%, 0 88%);
        opacity: 0.76;
    }

    74% {
        clip-path: polygon(0 0, 100% 10%, 100% 68%, 86% 62%, 73% 75%, 56% 58%, 42% 73%, 24% 54%, 0 66%);
        opacity: 0.36;
    }

    100% {
        clip-path: polygon(0 0, 100% 18%, 100% 34%, 82% 30%, 66% 42%, 47% 25%, 28% 38%, 0 24%);
        opacity: 0;
    }
}

@keyframes ms-battle-message-attack-cue {
    0% {
        border-top-color: rgba(255,154,104,0.32);
        box-shadow: 0 -14px 30px rgba(0,0,0,0.36);
    }

    24% {
        border-top-color: rgba(255,93,72,0.92);
        box-shadow:
            0 -14px 30px rgba(0,0,0,0.36),
            0 -12px 28px rgba(255,41,35,0.46),
            inset 0 1px 18px rgba(255,54,42,0.22);
    }

    100% {
        border-top-color: rgba(255,154,104,0.32);
        box-shadow: 0 -14px 30px rgba(0,0,0,0.36);
    }
}

@keyframes ms-battle-damage-number {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -52%, 0) scale(0.88);
    }

    12% {
        opacity: 1;
        transform: translate3d(-50%, -60%, 0) scale(1.04);
    }

    40% {
        opacity: 1;
        transform: translate3d(-50%, -75%, 0) scale(1);
    }

    72% {
        opacity: 0.82;
        transform: translate3d(-50%, -92%, 0) scale(0.98);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -108%, 0) scale(0.95);
    }
}

@keyframes ms-player-damage-number {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -58%, 0) scale(0.88);
    }

    12% {
        opacity: 1;
        transform: translate3d(-50%, -70%, 0) scale(1.08);
    }

    42% {
        opacity: 1;
        transform: translate3d(-50%, -88%, 0) scale(1);
    }

    72% {
        opacity: 0.8;
        transform: translate3d(-50%, -104%, 0) scale(0.98);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -118%, 0) scale(0.95);
    }
}