/* ==========================================================================
   Songboard board.css — 公开歌单页专属样式
   颜色/圆角/字体全部来自 body.board-root 上内联的 --sb-* 变量（六套预设通用）
   ========================================================================== */

.board-root {
    min-height: 100vh;
    position: relative;
}

/* ---------- 背景层 ---------- */
.board-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-repeat: repeat;
    background-size: 64px;
    pointer-events: none;
}
.board-bg--cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.board-bg--blur {
    /* 模糊时向外扩一圈，遮住高斯模糊的边缘光晕 */
    inset: -32px;
}
.board-bg--gradient {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.board-veil {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--sb-bg);
    pointer-events: none;
}

/* ---------- 毛玻璃卡片（theme.card.blur，配合卡片透明度食用） ---------- */
.board-root.is-glass .board-streamer,
.board-root.is-glass .board-song,
.board-root.is-glass .sb-modal__panel {
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
}

/* ---------- 贴纸浮动 ---------- */
.board-sticker {
    position: fixed;
    z-index: 1;
    color: var(--sb-subtext);
    opacity: .5;
    pointer-events: none;
    animation: float 4s ease-in-out infinite;
}
.board-sticker svg { width: 64px; height: 64px; }
.board-sticker--tl { top: 18px; left: 3vw; transform: rotate(-10deg); }
.board-sticker--br { bottom: 24px; right: 3vw; transform: rotate(8deg); animation-delay: 1.6s; }

/* ---------- 页面容器 ---------- */
.board-wrap {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    padding: 34px 20px 30px;
}

/* ---------- 标题 ---------- */
.board-head { text-align: center; margin-bottom: 22px; }
.board-title {
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    color: var(--sb-text);
}
.board-title__kao {
    display: inline-block;
    margin-left: 8px;
    font-size: .55em;
    color: var(--sb-primary);
    animation: float 3s ease-in-out infinite;
    vertical-align: middle;
    white-space: nowrap;
}
.board-subtitle { margin-top: 8px; font-size: 14px; color: var(--sb-subtext); }

/* ---------- 主播卡 ---------- */
.board-streamer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 22px;
    background: var(--sb-card);
    border-radius: var(--sb-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
}
.board-avatar {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sb-accent);
    box-shadow: 0 0 0 3px var(--sb-card), 0 0 0 6px var(--sb-primary);
}
.board-avatar img,
.board-avatar__fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}
.board-streamer__meta { flex: 1; min-width: 200px; }
.board-streamer__name { font-size: 20px; font-weight: 700; color: var(--sb-text); }
.board-streamer__bio {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sb-subtext);
    word-break: break-word;
}
.board-live-btn { flex-shrink: 0; }

/* ---------- 公告 ---------- */
.board-announcement {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--sb-accent);
    border-radius: calc(var(--sb-radius) * .7);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--sb-text);
}
.board-announcement__icon { flex-shrink: 0; }
.board-announcement__text { word-break: break-word; }

/* ---------- 工具区 ---------- */
.board-tools { margin-top: 18px; }
.board-tools__row { display: flex; gap: 10px; flex-wrap: wrap; }
.board-search { flex: 2; min-width: 180px; }
.board-filter { flex: 1; min-width: 120px; max-width: 170px; }
.board-random-btn { flex-shrink: 0; }

.board-letters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.board-letter {
    min-width: 32px;
    padding: 4px 10px;
    border: 2px solid var(--sb-accent);
    border-radius: 999px;
    background: var(--sb-card);
    color: var(--sb-subtext);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
}
.board-letter:hover { border-color: var(--sb-primary); color: var(--sb-primary); transform: translateY(-1px); }
.board-letter.is-active {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: #fff;
}
.board-letter:focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 2px; }

.board-tip {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--sb-subtext);
    text-align: center;
}

/* ---------- 歌曲列表：卡片模式 ---------- */
.board-songs {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.board-songs.is-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.board-song {
    position: relative;
    cursor: pointer;
    background: var(--sb-card);
    transition: transform .18s ease, box-shadow .18s ease;
}
.board-songs.is-card .board-song {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
    border-radius: var(--sb-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.board-songs.is-card .board-song:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
}
.board-song__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-song__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-text);
    word-break: break-word;
}
.board-song__badge { font-size: 13px; margin-right: 2px; }
.board-song__artist { font-size: 12.5px; color: var(--sb-subtext); word-break: break-word; }
.board-song__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    min-height: 18px;
}
.board-song__tag {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--sb-accent);
    color: var(--sb-text);
    font-size: 11.5px;
    font-weight: 600;
}
.board-song__note {
    font-size: 11.5px;
    color: var(--sb-subtext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.board-song__copy {
    align-self: flex-end;
    padding: 6px 18px;
    border: none;
    border-radius: 999px;
    background: var(--sb-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}
.board-song__copy:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.board-song__copy:focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 2px; }

/* ---------- 歌曲列表：紧凑列表模式 ---------- */
.board-songs.is-table { display: flex; flex-direction: column; gap: 8px; }
.board-songs.is-table .board-song {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: calc(var(--sb-radius) * .55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
.board-songs.is-table .board-song:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(0, 0, 0, .09); }
.board-songs.is-table .board-song__main {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    flex: 1;
}
.board-songs.is-table .board-song__meta { flex-shrink: 0; }
.board-songs.is-table .board-song__note { max-width: 200px; }
.board-songs.is-table .board-song__copy { align-self: center; flex-shrink: 0; }

/* ---------- 空状态 ---------- */
.board-empty {
    text-align: center;
    padding: 52px 20px;
    color: var(--sb-subtext);
}
.board-empty__kaomoji {
    display: inline-block;
    font-size: 34px;
    color: var(--sb-primary);
    letter-spacing: 1px;
    animation: float 3.2s ease-in-out infinite;
    white-space: nowrap;
}
.board-empty p { margin-top: 14px; font-size: 14px; }

/* ---------- 页脚 ---------- */
.board-foot {
    margin-top: 34px;
    text-align: center;
    font-size: 12px;
    color: var(--sb-subtext);
}
.board-foot a { color: var(--sb-primary); text-decoration: none; }

/* ---------- 随机一首弹窗 ---------- */
.board-random-panel { max-width: 380px; text-align: center; padding: 28px 26px 24px; }
.board-random-panel .sb-modal__close { position: absolute; top: 14px; right: 14px; }
.board-random-panel__head { font-size: 15px; font-weight: 600; color: var(--sb-subtext); }
.board-random-panel__song { margin: 18px 0 6px; }
.board-random-panel__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sb-text);
    word-break: break-word;
}
.board-random-panel__artist { margin-top: 6px; font-size: 14px; color: var(--sb-subtext); word-break: break-word; }
.board-random-panel__paid {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--sb-accent);
    color: var(--sb-text);
    font-size: 12px;
    font-weight: 600;
}
.board-random-panel__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ---------- Live2D 看板娘 ---------- */
.board-live2d {
    position: fixed;
    bottom: 0;
    z-index: 900; /* 弹窗(1100)之下、内容之上 */
}
.board-live2d--right { right: 10px; }
.board-live2d--left { left: 10px; }
.board-live2d--small { width: 180px; height: 220px; }
.board-live2d--medium { width: 240px; height: 290px; }
.board-live2d--large { width: 320px; height: 390px; }
.board-live2d__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.board-live2d__bubble {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, 6px);
    max-width: 92%;
    padding: 7px 14px;
    background: var(--sb-card);
    color: var(--sb-text);
    border: 2px solid var(--sb-accent);
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.board-live2d__bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 10px;
    height: 10px;
    background: var(--sb-card);
    border-right: 2px solid var(--sb-accent);
    border-bottom: 2px solid var(--sb-accent);
    transform: translateX(-50%) rotate(45deg);
}
.board-live2d__bubble.is-show { opacity: 1; transform: translate(-50%, 0); }
.board-live2d__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--sb-card);
    color: var(--sb-subtext);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: opacity .2s ease, color .2s ease;
}
.board-live2d:hover .board-live2d__toggle { opacity: .9; }
.board-live2d__toggle:hover { color: var(--sb-primary); }
.board-live2d__toggle:focus-visible { opacity: 1; outline: 3px solid var(--sb-accent); }

@media (max-width: 640px) {
    .board-live2d--desktop { display: none; }
    .board-live2d--small,
    .board-live2d--medium,
    .board-live2d--large { width: 150px; height: 185px; }
}

/* ---------- 音符飘出 ---------- */
.board-note {
    position: fixed;
    z-index: 1300;
    font-size: 22px;
    color: var(--sb-primary);
    pointer-events: none;
    animation: note-fly .8s ease-out forwards;
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .board-wrap { padding: 24px 14px 24px; }
    .board-songs.is-card { grid-template-columns: 1fr; }
    .board-streamer { padding: 16px; gap: 12px; }
    .board-avatar { width: 64px; height: 64px; }
    .board-live-btn { width: 100%; }
    .board-search { flex-basis: 100%; }
    .board-filter { max-width: none; }
    .board-random-btn { flex: 1; }
    .board-songs.is-table .board-song__main { flex-direction: column; gap: 2px; }
    .board-songs.is-table .board-song__meta { display: none; }
    .board-sticker svg { width: 44px; height: 44px; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
    .board-sticker,
    .board-title__kao,
    .board-empty__kaomoji,
    .board-note { animation: none; }
}