/* ARCHER */

.archer-attack-fx {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}

/* ---------- Arrow flight ---------- */

.archer-arrow-flight {
    left: 50%;
    top: calc(48% + var(--aim-y, 0px));

    width: clamp(180px, 68vw, 240px);
    aspect-ratio: 512 / 284;

    z-index: 85;
    opacity: 0;
    transform-origin: left center;
    will-change: transform, opacity;
    backface-visibility: hidden;

    animation:
        archer-arrow-flight var(--flight-duration, 240ms) cubic-bezier(0.12, 0.72, 0.18, 1) forwards;
}

.archer-arrow-image {
    position: absolute;
    inset: 0;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter: drop-shadow(0 0 4px rgba(255, 190, 60, 0.55));
}

.archer-arrow-trail {
    position: absolute;
    left: 58%;
    top: 57%;

    width: 72%;
    height: 8px;
    border-radius: 999px;

    background: linear-gradient(90deg,
            rgba(255, 245, 185, 0.75),
            rgba(255, 190, 50, 0.48),
            rgba(255, 140, 0, 0));

    opacity: 0.65;
    filter:
        blur(3px) drop-shadow(0 0 4px #ffc84a);

    transform: translateY(-50%);
}

/* Brighter visual variation — damage stays unchanged */

.archer-arrow-flight.empowered .archer-arrow-image {
    filter:
        brightness(1.28) drop-shadow(0 0 5px #fff2a0) drop-shadow(0 0 11px #ffb52e);
}

.archer-arrow-flight.empowered .archer-arrow-trail {
    width: 88%;
    height: 11px;
    opacity: 0.95;

    background: linear-gradient(90deg,
            rgba(255, 255, 220, 0.95),
            rgba(255, 205, 70, 0.75),
            rgba(255, 130, 0, 0));

    filter:
        blur(4px) drop-shadow(0 0 8px #ffc84a);
}

/* ---------- Launch flash ---------- */

.archer-launch-flash {
    left: calc(50% + 150px);
    top: calc(48% + var(--aim-y, 0px) + 86px);

    width: 46px;
    height: 46px;
    z-index: 77;

    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 230, 1) 0%,
            rgba(255, 205, 70, 0.9) 25%,
            rgba(255, 145, 20, 0.35) 55%,
            rgba(255, 120, 0, 0) 78%);

    mix-blend-mode: screen;

    animation:
        archer-launch-burst var(--launch-duration, 78ms) ease-out forwards;
}

.archer-launch-flash.empowered {
    width: 62px;
    height: 62px;
}

/* ---------- Impact ---------- */

.archer-impact-flash,
.archer-impact-ring,
.archer-impact-spark {
    left: calc(50% - 12px);
    top: calc(48% + var(--aim-y, 0px) + 36px);
}

.archer-impact-flash {
    width: 60px;
    height: 60px;
    z-index: 92;

    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 241, 150, 0.95) 18%,
            rgba(255, 190, 45, 0.72) 42%,
            rgba(255, 125, 0, 0) 75%);

    mix-blend-mode: screen;
    filter: drop-shadow(0 0 7px #ffd45a);

    animation:
        archer-impact-burst var(--impact-duration, 165ms) ease-out forwards;
}

.archer-impact-flash.empowered {
    width: 82px;
    height: 82px;
    filter: drop-shadow(0 0 13px #fff4a0);
}

.archer-impact-ring {
    width: 46px;
    height: 46px;
    z-index: 91;

    border: 2px solid rgba(255, 215, 90, 0.85);
    border-radius: 50%;

    box-shadow: 0 0 7px rgba(255, 190, 30, 0.65);

    animation:
        archer-impact-ring var(--impact-duration, 180ms) ease-out forwards;
}

.archer-impact-ring.empowered {
    width: 62px;
    height: 62px;
    border-width: 3px;
    box-shadow: 0 0 12px rgba(255, 190, 30, 0.9);
}

.archer-impact-spark {
    width: 3px;
    height: 13px;
    z-index: 93;

    border-radius: 999px;
    background: linear-gradient(to top,
            rgba(255, 130, 0, 0),
            rgba(255, 205, 60, 0.9),
            rgba(255, 255, 220, 1));

    filter: drop-shadow(0 0 3px #ffb52e);
    transform-origin: center bottom;
}

.archer-impact-spark.empowered {
    width: 4px;
    height: 18px;
}

/* ---------- Animations ---------- */

@keyframes archer-arrow-flight {
    0% {
        transform:
            translate3d(150px, 80px, 0)
            scale(var(--start-scale, 1.18))
            rotate(var(--arrow-rotation, 0deg));

        opacity: 1;
    }

    100% {
        transform:
            translate3d(-12px, 0, 0)
            scale(var(--final-scale, 0.62))
            rotate(var(--arrow-rotation, 0deg));

        opacity: 1;
    }
}

@keyframes archer-launch-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

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

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

@keyframes archer-impact-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 0;
    }

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

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

@keyframes archer-impact-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 1;
    }

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

/* ---------- Flying impact sparks ---------- */

.archer-impact-spark {
    animation:
        archer-impact-spark var(--spark-duration, 180ms) ease-out forwards;
}

@keyframes archer-impact-spark {
    0% {
        transform:
            translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateY(0) scaleY(1);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateY(var(--spark-travel, -32px)) scaleY(0.15);

        opacity: 0;
    }
}

/* ---------- Monster arrow impact ---------- */

.monster-archer-hit {
    animation:
        archer-monster-hit var(--archer-hit-duration, 165ms) ease-out;
}

@keyframes archer-monster-hit {
    0% {
        transform: translateX(0) scale(1);
        filter: brightness(1);
    }

    28% {
        transform:
            translateX(var(--archer-recoil, -5px)) scale(var(--archer-hit-scale, 1.012));

        filter:
            brightness(var(--archer-hit-brightness, 1.85)) saturate(1.2);
    }

    65% {
        transform: translateX(2px) scale(0.998);
        filter: brightness(1.12);
    }

    100% {
        transform: translateX(0) scale(1);
        filter: brightness(1);
    }
}

/* --- KNIGHT --- */

.slash-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    background-image: url('./images/slash.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: normal;
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
}

.slash-effect.animate {
    animation: slash-strike 0.25s ease-out forwards;
}

@keyframes slash-strike {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-15deg);
    }

    20% {
        opacity: 1;
        transform: scale(1.2) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.4) rotate(5deg);
    }
}

/* =========================================================
   SHARED HERO DAMAGE NUMBER
   Knight and Archer
   ========================================================= */

.hero-hit-number {
    position: absolute;
    z-index: 100;
    pointer-events: none;

    color: #fff4cf;
    font-family: 'Nunito', sans-serif;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;

    text-shadow:
        2px 2px 0 #000,
        0 0 5px #ff9b22;

    animation:
        hero-hit-number-float var(--damage-number-duration, 520ms)
        ease-out forwards;
}

.hero-hit-number.stronger {
    font-size: 31px;
    text-shadow:
        2px 2px 0 #000,
        0 0 7px #ff9b22,
        0 0 12px rgba(255, 160, 30, 0.65);
}

.hero-hit-number.blocked {
    color: #bbbbbb;
    font-size: 23px;
    text-shadow:
        2px 2px 0 #000,
        0 0 4px rgba(255, 255, 255, 0.35);
}

@keyframes hero-hit-number-float {
    0% {
        transform: translate(-50%, -50%) scale(0.45);
        opacity: 0;
    }

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

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


/* =========================================================
   KNIGHT BASIC ATTACK — FORGE CLEAVE
   ========================================================= */

.knight-attack-fx {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}

/* ---------- Sword glint ---------- */

.knight-sword-glint {
    left: calc(50% + var(--glint-x, 0px));
    top: calc(50% + var(--glint-y, 0px));

    width: 28px;
    height: 28px;
    z-index: 92;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 240, 160, 0.95) 18%,
        rgba(255, 155, 35, 0.5) 48%,
        rgba(255, 100, 0, 0) 75%
    );

    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px #fff0a0);

    animation:
        knight-sword-glint var(--glint-duration, 55ms)
        ease-out forwards;
}

@keyframes knight-sword-glint {
    0% {
        transform: translate(-50%, -50%) scale(0.15);
        opacity: 0;
    }

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

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

/* ---------- Slash sweep ---------- */

.knight-slash-sweep {
    left: calc(50% + var(--aim-x, 0px));
    top: calc(50% + var(--aim-y, 0px));

    width: 138%;
    height: 138%;
    z-index: 88;

    background-image: url('./images/slash.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    mix-blend-mode: screen;

    filter:
        brightness(1.28)
        saturate(1.3)
        contrast(1.08)
        drop-shadow(0 0 7px rgba(255, 100, 15, 0.75));

    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;

    animation:
        knight-slash-move var(--slash-duration, 185ms)
        cubic-bezier(0.12, 0.72, 0.18, 1) forwards,
        knight-slash-fade var(--slash-duration, 185ms)
        linear forwards;
}

.knight-slash-sweep.stronger {
    filter:
        brightness(1.5)
        saturate(1.45)
        contrast(1.15)
        drop-shadow(0 0 12px rgba(255, 95, 10, 0.95));
}

@keyframes knight-slash-move {
    0% {
        transform:
            translate3d(-50%, -50%, 0)
            rotate(var(--slash-start-rotation, -8deg))
            scale(var(--slash-start-x, 0.64), 0.64);
    }

    100% {
        transform:
            translate3d(-50%, -50%, 0)
            rotate(var(--slash-end-rotation, 2deg))
            scale(var(--slash-end-x, 1.19), 1.19);
    }
}

@keyframes knight-slash-fade {
    0% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- Knight impact ---------- */

.knight-impact-flash,
.knight-impact-ring,
.knight-impact-spark {
    left: calc(50% + var(--aim-x, 0px));
    top: calc(50% + var(--impact-y, 10px));
}

.knight-impact-flash {
    width: 64px;
    height: 64px;
    z-index: 94;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 235, 145, 0.95) 16%,
        rgba(255, 135, 25, 0.72) 40%,
        rgba(255, 55, 0, 0) 74%
    );

    mix-blend-mode: screen;
    filter: drop-shadow(0 0 8px #ffb238);

    animation:
        knight-impact-flash var(--impact-duration, 155ms)
        ease-out forwards;
}

.knight-impact-flash.stronger {
    width: 82px;
    height: 82px;
    filter: drop-shadow(0 0 14px #ffbd43);
}

.knight-impact-ring {
    width: 50px;
    height: 50px;
    z-index: 93;

    border: 2px solid rgba(255, 195, 70, 0.85);
    border-radius: 50%;

    box-shadow: 0 0 9px rgba(255, 125, 20, 0.8);

    animation:
        knight-impact-ring var(--ring-duration, 170ms)
        ease-out forwards;
}

.knight-impact-ring.stronger {
    width: 68px;
    height: 68px;
    border-width: 3px;
    border-color: rgba(255, 205, 90, 0.95);
}

.knight-impact-spark {
    width: 3px;
    height: 14px;
    z-index: 96;

    border-radius: 999px;

    background: linear-gradient(
        to top,
        rgba(255, 75, 0, 0),
        rgba(255, 155, 25, 0.95),
        rgba(255, 250, 205, 1)
    );

    filter: drop-shadow(0 0 3px #ff8a1e);
    transform-origin: center bottom;

    animation:
        knight-impact-spark var(--spark-duration, 180ms)
        ease-out forwards;
}

.knight-impact-spark.stronger {
    width: 4px;
    height: 19px;
}

@keyframes knight-impact-flash {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

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

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

@keyframes knight-impact-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 1;
    }

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

@keyframes knight-impact-spark {
    0% {
        transform:
            translate(-50%, -50%)
            rotate(var(--spark-angle, 0deg))
            translateY(0)
            scaleY(1);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(var(--spark-angle, 0deg))
            translateY(var(--spark-travel, -32px))
            scaleY(0.12);

        opacity: 0;
    }
}

/* ---------- Monster Knight impact ---------- */

.monster-knight-hit {
    animation:
        knight-monster-hit var(--knight-hit-duration, 165ms)
        ease-out;
}

@keyframes knight-monster-hit {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }

    28% {
        transform:
            translate3d(var(--knight-recoil, 7px), 0, 0)
            scale(var(--knight-hit-scale, 1.014));

        filter:
            brightness(var(--knight-hit-brightness, 1.8))
            saturate(1.2);
    }

    68% {
        transform:
            translate3d(var(--knight-return-recoil, -2px), 0, 0)
            scale(0.997);

        filter: brightness(1.1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}