style.css

@keyframes tile-appear {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes tile-match {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes hint-pulse {
    0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

.tile {
    transition: all 0.3s ease;
    animation: tile-appear 0.3s ease-out;
}

.tile:hover {
    transform: translateY(-2px);
}

.tile-matched {
    animation: tile-match 0.5s ease;
}
.hint-active {
    animation: hint-pulse 1.5s infinite;
}

@keyframes button-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.bg-green-500 {
    background-color: #10b981;
    animation: button-pulse 0.5s ease;
}
/* Dark mode toggle transition */
.dark-mode-transition * {
    transition: background-color 0.3s ease, color 0.3s ease;
}