/* 图标字体和符号定义 */
/* Icon fonts and symbols for STB compatibility */

/* 基础图标符号 - 使用Unicode符号确保兼容性 */
.btn-icon::before,
.record-icon::before,
.star::before {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 播放控制图标 */
.play-icon::before { content: '▶'; }
.pause-icon::before { content: '⏸'; }
.prev-icon::before { content: '⏮'; }
.next-icon::before { content: '⏭'; }

/* 录音图标 */
.record-icon::before { content: '🎤'; }

/* 星星评分图标 */
.star::before { content: '🌸'; }

/* 加载动画图标 */
.loading-spinner::before { content: '⟳'; }

/* 状态指示器 */
.voice-wave .wave-bar::before {
    content: '';
    display: block;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: height 0.1s ease;
}

/* 按钮状态图标 */
.control-btn.playing .btn-icon::before { content: '⏸'; }
.control-btn.paused .btn-icon::before { content: '▶'; }

/* 遥控器导航指示器 */
.focus-indicator::before {
    content: '⬜';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #4ecdc4;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.focusable:focus .focus-indicator::before {
    opacity: 1;
}

/* 自定义图标类 */
.icon-volume-up::before { content: '🔊'; }
.icon-volume-down::before { content: '🔉'; }
.icon-volume-mute::before { content: '🔇'; }

.icon-fullscreen::before { content: '⛶'; }
.icon-exit-fullscreen::before { content: '⛶'; }

.icon-settings::before { content: '⚙'; }
.icon-help::before { content: '❓'; }
.icon-info::before { content: 'ℹ'; }

/* 方向指示器 */
.arrow-up::before { content: '↑'; }
.arrow-down::before { content: '↓'; }
.arrow-left::before { content: '←'; }
.arrow-right::before { content: '→'; }

/* 状态指示器 */
.status-success::before { content: '✓'; color: #4ecdc4; }
.status-error::before { content: '✗'; color: #ff6b6b; }
.status-warning::before { content: '⚠'; color: #feca57; }
.status-info::before { content: 'ℹ'; color: #3498db; }

/* 动画效果 */
@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-spinning {
    animation: icon-spin 1s linear infinite;
}

/* 按钮图标布局 */
.control-btn .btn-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* 响应式图标调整 */
@media screen and (max-width: 1280px) {
    .btn-icon {
        font-size: 14px;
    }

    .star {
        font-size: 36px;
    }
}

@media screen and (max-height: 720px) {
    .btn-icon {
        font-size: 12px;
    }

    .record-icon::before {
        font-size: 16px;
    }
}