.key-active {
    filter: brightness(1.2);
    transform: translateY(8px);
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4);
}

.key-correct {
    animation: flash-green 0.3s ease-out;
    background-color: #22c55e !important;
}

.key-wrong {
    animation: shake-red 0.3s ease-in-out;
    background-color: #ef4444 !important;
    box-shadow: 0 0 25px 10px rgba(239, 68, 68, 0.9) !important;
    z-index: 40;
}

.hint {
    box-shadow: 0 0 20px 8px rgba(0, 255, 255, 0.7);
    border: 5px solid #00ffff !important;
    z-index: 50;
    animation: pulse-hint 1.5s infinite ease-in-out;
}

.key-unused {
    opacity: 0.38;
    filter: saturate(0.55);
}

@keyframes pulse-hint {
    0%,
    100% {
        transform: scale(1.05);
        filter: brightness(1.1);
        box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.6);
    }

    50% {
        transform: scale(1.08);
        filter: brightness(1.3);
        box-shadow: 0 0 25px 10px rgba(0, 255, 255, 0.8);
    }
}

@keyframes flash-green {
    0% {
        filter: brightness(2);
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes shake-red {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

.score-pop {
    animation: bounce 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}

@keyframes bounce {
    0%,
    100% {
        transform: scale(1);
    }

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

input[type="range"] {
    accent-color: #6366f1;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}