/* Hint card animations */
.hint-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hint-card.locked {
    opacity: 0.6;
}

.hint-card.revealed {
    opacity: 1;
    border-color: rgba(50, 166, 255, 0.2);
    background-color: #1e1e2e;
}

.hint-card.revealing {
    animation: hint-flip 0.5s ease-out;
}

@keyframes hint-flip {
    0% {
        transform: scaleY(0.6);
        opacity: 0.3;
    }
    50% {
        transform: scaleY(1.02);
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Shake animation for wrong guesses */
.shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* Pulse animation for correct guess */
.pulse-success {
    animation: pulse-green 0.6s ease-out;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    100% { box-shadow: 0 0 0 20px rgba(34, 197, 94, 0); }
}

/* HP counter animation */
.hp-drop {
    animation: hp-drop 0.4s ease-out;
    color: #f87171;
}

@keyframes hp-drop {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Result card entrance */
#result-card:not(.hidden) {
    animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth body scroll on mobile */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

/* Input autofill fix for dark theme */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #1e1e2e inset !important;
    -webkit-text-fill-color: white !important;
}