@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.word-chip {
    @apply px-3 py-1 rounded-full text-sm font-medium transition-all;
}

.word-chip.valid {
    @apply bg-green-900/40 text-green-400 border border-green-800/50;
}

.word-chip.invalid {
    @apply bg-red-900/40 text-red-400 border border-red-800/50 cursor-pointer hover:bg-red-800/60;
}

.word-chip.corrected {
    @apply bg-blue-900/40 text-blue-400 border border-blue-800/50;
}