/* watch.html 专用样式：动画观看页的视频播放器、控制按钮和降级提示。 */
.watch-header {
    text-align: center;
}

.watch-header h1 {
    color: var(--color-primary, var(--primary-light, #4a90e2));
    margin-bottom: 10px;
}

.watch-header h2 {
    color: var(--color-secondary, var(--secondary-color, #4ECDC4));
    font-size: 2rem;
}

.bouncing-animals {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.watch-back-link {
    margin-bottom: 20px;
}

.watch-controls {
    margin-top: 25px;
    text-align: center;
}

.watch-control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.watch-progress-panel {
    background: #E3F2FD;
    border-radius: var(--radius-medium, 10px);
    margin: 15px 0;
    padding: 15px;
}

.watch-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.watch-progress-track {
    background: #BBDEFB;
    border-radius: 5px;
    cursor: pointer;
    height: 10px;
    overflow: hidden;
}

.watch-progress-fill {
    background: var(--color-success, #06D6A0);
    height: 100%;
    transition: width 0.3s;
    width: 0;
}

.watch-info {
    margin-top: 25px;
}

.watch-info-title {
    color: var(--color-primary, var(--primary-light, #4a90e2));
    margin-bottom: 15px;
}

.watch-story {
    background: #FFF3E0;
    border-radius: var(--radius-medium, 10px);
    margin-bottom: 20px;
    padding: 15px;
}

.watch-story h4 {
    color: var(--color-warning, #FF9E6D);
    margin-bottom: 10px;
}

.watch-story p {
    color: #666;
    line-height: 1.6;
}

.watch-lyrics {
    background: #E8F5E8;
    border-radius: var(--radius-medium, 10px);
    padding: 20px;
}

.watch-lyrics h4 {
    color: var(--color-success, #06D6A0);
    margin-bottom: 15px;
}

.watch-lyrics-list {
    background: white;
    border-radius: var(--radius-small, 8px);
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
}

.watch-lyrics-line {
    background: #F1F8E9;
    border-radius: var(--radius-small, 8px);
    margin: 8px 0;
    padding: 5px 10px;
}

.watch-empty {
    padding: 40px 20px;
    text-align: center;
}

.watch-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.watch-empty h3 {
    color: var(--color-warning, #FF9E6D);
    margin-bottom: 15px;
}

.watch-empty p {
    color: var(--text-light, #666);
    margin-bottom: 25px;
}

.watch-next-actions {
    margin-top: 25px;
}

.watch-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.kids-card h1,
.kids-card h2,
.kids-card h3 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.kids-btn {
    min-width: 120px;
}

.kids-video-player,
.kids-audio-player {
    width: 100%;
}