#combat-popups {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10005;
    overflow: visible;
}

/* Premium Skill Labels (Battlefield) */
.premium-skill-label {
    position: absolute;
    /* Changed from fixed to match absolute container */
    pointer-events: none;
    z-index: 10005;
    font-weight: 900;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    /* Changed to Gold Gradient */
    background: linear-gradient(to bottom, #fff 0%, #ffd700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Changed shadow to gold */
    text-shadow:
        0 0 2px rgba(255, 255, 255, 1),
        0 0 15px rgba(212, 175, 55, 0.9),
        0 0 30px rgba(212, 175, 55, 0.5),
        2px 4px 6px rgba(0, 0, 0, 0.8);

    /* CRITICAL FIX: Animation restored */
    animation: premiumFloat 2.0s ease-out forwards;
    will-change: transform, opacity;

    padding: 10px 20px;
}

@keyframes premiumFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.6) rotate(-3deg);
        filter: blur(4px);
        /* Reduced blur */
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -40px) scale(1.2) rotate(0deg);
        filter: blur(0);
    }

    /* 70% marker for stable peak visibility */
    70% {
        opacity: 1;
        transform: translate(calc(-50% + var(--target-x-shift, 0px) * 0.6), -120px) scale(1.1) rotate(0deg);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--target-x-shift, 0px)), -180px) scale(0.9) rotate(3deg);
        filter: blur(6px);
    }
}

/* Premium Cast Glow */
.anim-cast-premium {
    z-index: 100 !important;
}

.anim-cast-premium::before,
.anim-cast::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 4%;
    width: auto;
    height: 76%;
    aspect-ratio: .82;
    transform: translateX(-50%) scale(.72, .84);
    transform-origin: center bottom;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 58%,
        var(--state-glow, rgba(100, 108, 255, .78)) 0%,
        rgba(255, 255, 255, .18) 24%,
        transparent 72%
    );
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;
}

.anim-cast-premium::before {
    animation: cast-premium-aura 1.2s ease-in-out both;
}

@keyframes cast-premium-aura {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(.72, .84);
    }

    50% {
        opacity: .82;
        transform: translateX(-50%) scale(1.08, 1);
    }
}

/* Standard Cast Animation */
.anim-cast::before {
    animation: cast-standard-aura 1.2s ease-in-out both;
}

.anim-cast {
    z-index: 100;
}

@keyframes cast-standard-aura {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(.78, .86);
    }

    50% {
        opacity: .58;
        transform: translateX(-50%) scale(1, .96);
    }
}

/* Floating Skill Name (Standard) */
.skill-cast-text {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: #646cff;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    animation: floatUpFade 1.0s ease-out forwards;
    z-index: 10001;
    pointer-events: none;
}

@keyframes floatUpFade {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -10px);
    }

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

    100% {
        opacity: 0;
        transform: translate(-50%, -40px);
    }
}

/* Squad Status Mini Animation */
.mini-skill-anim {
    position: absolute;
    top: -40px;
    /* Higher up to avoid overlapping portrait */
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    animation: miniSkillFloat 1s ease-out forwards;
}

@keyframes miniSkillFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

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

    100% {
        opacity: 0;
        transform: translate(-50%, -25px);
    }
}