/* Custom styles for the fantasy theme */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #1a202c, #2d3748);
    overflow-x: hidden;
}

/* Custom scrollbar for battle log */
div::-webkit-scrollbar {
    width: 8px;
}

div::-webkit-scrollbar-track {
    background: #2d3748;
    border-radius: 4px;
}

div::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

div::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Glow effects for health bars */
.bg-red-600 {
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* Button hover animations */
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Pulse animation for current turn indicator */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Character portrait glow effect */
.character-portrait {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Magical sparkle effect for abilities */
@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(180deg); }
}

.ability-sparkle:hover {
    animation: sparkle 0.6s ease-in-out;
}

/* Forest background texture */
.forest-bg {
    background-image: 
        radial-gradient(circle at 25% 50%, rgba(34, 197, 94, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
}

/* Text glow effects */
.text-glow {
    text-shadow: 0 0 10px currentColor;
}

/* Victory screen animation */
@keyframes victoryBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.victory-text {
    animation: victoryBounce 2s ease-in-out infinite;
}