/* ===== 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-creature-turn-flash {
    animation: ms-battle-creature-turn-flash 560ms ease-in-out 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-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 * {
    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%;
}

@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-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-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);
    }
}