/* Custom styles for ABC website with Tailwind CSS */

/* Colorful letters - YouKids color scheme (6-color rotation) */
/* Target letter cards and apply colors to their .letter child */
#grid-container > div:nth-child(6n+1) .letter { color: #E63C2A !important; } /* Red */
#grid-container > div:nth-child(6n+2) .letter { color: #7B73D6 !important; } /* Purple */
#grid-container > div:nth-child(6n+3) .letter { color: #FFC933 !important; } /* Yellow */
#grid-container > div:nth-child(6n+4) .letter { color: #2EBCC6 !important; } /* Cyan */
#grid-container > div:nth-child(6n+5) .letter { color: #FF9347 !important; } /* Orange */
#grid-container > div:nth-child(6n+6) .letter { color: #6BC75F !important; } /* Green */

/* Hide play button on touch devices, only show on desktop hover */
@media (hover: none) {
    .group:hover > div[class*="opacity-0"] {
        opacity: 0 !important;
    }
}

/* Main toggle button states (ABC / 123) */
.main-toggle-option {
    background-color: transparent;
    font-weight: 700;
    opacity: 0.4;
}

.main-toggle-option.active {
    background-color: rgb(243 244 246) !important; /* gray-100 */
    opacity: 1;
}

.main-toggle-option:hover:not(.active) {
    background-color: rgb(249 250 251); /* gray-50 */
}

/* Sub toggle button states (A / 🍎) */
.sub-toggle-option {
    background-color: transparent;
    color: rgb(107 114 128); /* gray-500 */
}

.sub-toggle-option.active {
    background-color: rgb(243 244 246) !important; /* gray-100 */
    color: rgb(31 41 55) !important; /* gray-800 */
}

.sub-toggle-option:hover:not(.active) {
    background-color: rgb(249 250 251); /* gray-50 */
}

/* Keep letters button (A) always bold */
.sub-toggle-option[data-sub-mode="letters"] {
    font-weight: 700;
}

/* Pulse animation for cards to indicate audio is available */
@keyframes pulse-card {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--pulse-color, rgba(123, 115, 214, 0));
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px var(--pulse-color, rgba(123, 115, 214, 0.4));
    }
}

@-webkit-keyframes pulse-card {
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--pulse-color, rgba(123, 115, 214, 0));
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        box-shadow: 0 0 0 10px var(--pulse-color, rgba(123, 115, 214, 0.4));
    }
}

.pulse-card {
    -webkit-animation: pulse-card 2s ease-in-out 3 !important;
    animation: pulse-card 2s ease-in-out 3 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}