/* Chinese Word of the Day — card, character, and audio styling.
   Dark mode is handled via Bootstrap's [data-bs-theme="dark"] attribute,
   matching the other learning-tool pages. */

.wotd-card {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(25, 135, 84, 0.06));
    border-top: 4px solid #0d6efd !important;
}

.wotd-character {
    font-size: clamp(4.5rem, 22vw, 8rem);
    font-weight: 700;
    color: #0d6efd;
}

.wotd-pinyin {
    font-size: clamp(1.4rem, 6vw, 2rem);
    color: #0d6efd;
}

.wotd-meaning {
    color: #495057;
}

/* Audio button: subtle pulse while the clip is loading/playing. */
.wotd-audio.is-playing {
    animation: wotd-pulse 1s ease-in-out infinite;
}

@@keyframes wotd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Dark mode */
[data-bs-theme="dark"] .wotd-card {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(25, 135, 84, 0.12));
}

[data-bs-theme="dark"] .wotd-character {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .wotd-pinyin {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .wotd-meaning {
    color: #dee2e6;
}