/* Battle Animation Component Styles */
.asc-battle-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.asc-battle-animation .asc-animation-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation types */
.asc-battle-animation.attack {
    animation: asc-attack-animation 0.6s ease-in-out forwards;
}

.asc-battle-animation.skill {
    animation: asc-skill-animation 0.8s ease-in-out forwards;
}

.asc-battle-animation.heal {
    animation: asc-heal-animation 0.8s ease-in-out forwards;
}

.asc-battle-animation.damage {
    animation: asc-damage-animation 0.5s ease-in-out forwards;
}

/* Animation keyframes */
@keyframes asc-attack-animation {
    0% { background-color: transparent; }
    30% { background-color: rgba(239, 68, 68, 0.2); }
    70% { background-color: rgba(239, 68, 68, 0.3); }
    100% { background-color: transparent; }
}

@keyframes asc-skill-animation {
    0% { background-color: transparent; }
    30% { background-color: rgba(139, 92, 246, 0.2); }
    70% { background-color: rgba(139, 92, 246, 0.3); }
    100% { background-color: transparent; }
}

@keyframes asc-heal-animation {
    0% { background-color: transparent; }
    30% { background-color: rgba(16, 185, 129, 0.2); }
    70% { background-color: rgba(16, 185, 129, 0.3); }
    100% { background-color: transparent; }
}

@keyframes asc-damage-animation {
    0% { background-color: transparent; }
    25% { background-color: rgba(239, 68, 68, 0.3); }
    50% { background-color: transparent; }
    75% { background-color: rgba(239, 68, 68, 0.3); }
    100% { background-color: transparent; }
}

@media (max-width: 768px) {
    .asc-battle-animation {
        /* Adjust for smaller screens */
    }
}