/* Health bar fix - make it red */
.asc-health-bar-fill {
    background-color: var(--health-color, #ef4444) !important;
}

/* Mana pips styling - improved visibility */
.asc-mana-pip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.3);
    border: 2px solid rgba(59, 130, 246, 0.8); /* Stronger border */
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); /* Add subtle glow */
}

.asc-mana-pip--filled {
    background-color: var(--mana-color, #3b82f6);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.8), 0 0 3px rgba(255, 255, 255, 0.6); /* Enhanced glow */
}

/* Add borders to enemy attack counter pips */
.asc-attack-pip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(239, 68, 68, 0.5); /* Red border for visibility */
}

.asc-attack-pip--active {
    background-color: var(--error-red, #ef4444);
    border: 2px solid rgba(255, 255, 255, 0.5); /* White border for active state */
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.8); /* Add glow */
}

/* Character sprite shadows */
.asc-character-sprite-container, .asc-enemy-sprite-container {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5));
}

/* Platform shadows */
.asc-player-platform, .asc-enemy-platform {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Command button colors */
.asc-command-button--attack {
    background-color: #ef4444 !important;
    color: white;
}

.asc-command-button--skill {
    background-color: #3b82f6 !important;
    color: white;
}

.asc-command-button--item {
    background-color: #10b981 !important;
    color: white;
}

.asc-command-button--run {
    background-color: #6b7280 !important;
    color: white;
}

/* Better command button spacing */
.asc-command-grid {
    gap: 0.75rem;
}

/* Better battle arena visualization */
.asc-battle-arena {
    background: linear-gradient(to bottom, #1e3a8a, #1e40af);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
}

/* Effect class fixes */
.attack-effect {
    background: url('/_content/Ascend.Shared.UI/images/effects/attack-effect.png') no-repeat center center;
    background-size: contain;
    animation: attackAnimation 0.6s steps(8) forwards;
}

.enemy-attack-effect {
    background: url('/_content/Ascend.Shared.UI/images/effects/enemy-attack-effect.png') no-repeat center center;
    background-size: contain;
    animation: enemyAttackAnimation 0.6s steps(8) forwards;
}

.skill-effect {
    background: url('/_content/Ascend.Shared.UI/images/effects/skill-effect.png') no-repeat center center;
    background-size: contain;
    animation: skillAnimation 0.8s steps(10) forwards;
}

.heal-effect {
    background: url('/_content/Ascend.Shared.UI/images/effects/heal-effect.png') no-repeat center center;
    background-size: contain;
    animation: healAnimation 0.8s steps(10) forwards;
}

.victory-effect {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent 70%);
    animation: victoryAnimation 1s ease forwards;
}

.mana-effect {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 70%);
    animation: manaAnimation 0.8s ease forwards;
}

/* Animation keyframes */
@keyframes attackAnimation {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes enemyAttackAnimation {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes skillAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes healAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes victoryAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes manaAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}