/* Animation for hint decrement */
.stat-value.decrement {
    animation: hint-decrement 0.4s ease;
}

@keyframes hint-decrement {
    0% { transform: scale(1); color: var(--cs-primary); }
    50% { transform: scale(1.2); color: var(--tone-amber-fg); }
    100% { transform: scale(1); color: var(--cs-primary); }
}

/* Word acceptance animation */
.cell.word-found {
    animation: word-found 0.6s ease;
}

@keyframes word-found {
    0% { transform: scale(1); }
    20% { transform: scale(1.15); background: #22c55e; color: white; }
    60% { transform: scale(1.1); background: #22c55e; color: white; }
    100% { transform: scale(1); }
}

/* New word pill fade-in animation */
.found-word.animate-in {
    animation: pill-fade-in 0.5s ease;
}

@keyframes pill-fade-in {
    0% { 
        opacity: 0; 
        transform: translateY(-10px) scale(0.9); 
    }
    50% { 
        opacity: 0.8; 
        transform: translateY(-2px) scale(1.05); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Keystone word celebration animation */
.message.keystone-celebration {
    animation: keystone-pulse 1.5s ease;
}

@keyframes keystone-pulse {
    0% { 
        transform: scale(1); 
        color: #22c55e;
    }
    20% { 
        transform: scale(1.2); 
        color: #f59e0b;
    }
    40% { 
        transform: scale(1.1); 
        color: #3b82f6;
    }
    60% { 
        transform: scale(1.15); 
        color: #8b5cf6;
    }
    80% { 
        transform: scale(1.1); 
        color: #ec4899;
    }
    100% { 
        transform: scale(1); 
        color: #22c55e;
    }
}

/* Hint increment animation for keystone bonus */
.stat-value.increment-bonus {
    animation: hint-bonus 1s ease;
}

@keyframes hint-bonus {
    0% { 
        transform: scale(1); 
        color: var(--cs-primary); 
    }
    20% { 
        transform: scale(1.3) rotate(-5deg); 
        color: #f59e0b; 
    }
    40% { 
        transform: scale(1.3) rotate(5deg); 
        color: #22c55e; 
    }
    60% { 
        transform: scale(1.3) rotate(-5deg); 
        color: #3b82f6; 
    }
    80% { 
        transform: scale(1.2) rotate(0deg); 
        color: #8b5cf6; 
    }
    100% { 
        transform: scale(1); 
        color: var(--cs-primary); 
    }
}