/* ===== v89：店铺背景音乐「迷你播放器」卡片 =====
 * 结构卡片：
 *   圆形唱片（播放时旋转） + 曲名/状态 + 暂停按钮 + 音量条（可折叠）
 * 交互：
 *   · 卡片按住可拖动（记录位置，localStorage 持久化）
 *   · 点唱片/曲名区域 = 播放 / 暂停
 *   · 「⌄」折叠成 42px 圆形小唱片，音乐不停（像迷你播放器）
 *   · 音量条 0~100，默认 45%，选择记到 localStorage（下次进站沿用）
 * 观感贴合「朱印」设计：暖纸面 + 朱砂点缀 + 轻投影，不抢主体内容。 */
.bgm-card {
    position: fixed; left: 16px; bottom: 16px; z-index: 850;
    /* v98：宽度流体化（150~200px，跟屏幕走）—— 固定 182/200px 时窄屏放不下状态文字，
     * 宽屏又占太多；JS 侧 cardWidth() 用同一公式，两侧必须一致。 */
    width: clamp(160px, 47vw, 200px);
    padding: 9px 10px 8px;
    background: linear-gradient(158deg, var(--surface, #fff) 0%, var(--surface-2, #fafafa) 100%);
    border: 1px solid var(--line-2, rgba(0, 0, 0, .1));
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .05),
                inset 0 1px 0 rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    display: flex; flex-direction: column; gap: 7px;
    user-select: none; -webkit-user-select: none;
    touch-action: none;
    transition: box-shadow .25s var(--ease, ease), transform .18s var(--ease, ease);
    animation: bgmIn .38s var(--ease, ease);
}
@keyframes bgmIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.bgm-card.is-dragging {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .08);
    transform: scale(1.02);
    cursor: grabbing;
}
.bgm-top { display: flex; align-items: center; gap: 8px; }
.bgm-main {
    display: flex; align-items: center; gap: 9px; cursor: grab;
    border: 0; background: transparent; padding: 0; text-align: left;
    flex: 1 1 auto; min-width: 0;
    border-radius: 12px;
    transition: transform .16s var(--ease, ease);
}
.bgm-main:active { transform: scale(.965); }
.bgm-card.is-dragging .bgm-main { cursor: grabbing; }
/* 操作区：与唱片/曲名并排（不再绝对定位压在上面，避免点收起却点到播放） */
.bgm-ops { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* 唱片：外圈朱砂渐变 + 内圈唱片纹理，播放时匀速旋转 */
.bgm-disc {
    position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--accent, #c8372d) 0 26%, rgba(200, 55, 45, .18) 27% 100%);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.bgm-disc::after {
    content: ""; position: absolute; inset: 4px; border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .28) 0 1px, rgba(255, 255, 255, 0) 1px 2.5px);
    opacity: .5;
}
.bgm-disc svg { width: 15px; height: 15px; color: #fff; z-index: 1; }
.bgm-card.is-playing .bgm-disc { animation: bgmSpin 4.2s linear infinite; }
@keyframes bgmSpin { to { transform: rotate(360deg); } }

.bgm-meta { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.bgm-meta b {
    display: block; font-size: 12px; font-weight: 700; color: var(--ink, #222);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v98：状态行允许折到两行再省略 —— 单行 ellipsis 会把「点按任意处即可播放」
 * 这类中文提示截成「点按任意处即…」，等于没说清楚。 */
.bgm-meta i {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    font-size: 10.5px; font-style: normal; color: var(--ink-3, #888);
    line-height: 1.35; overflow: hidden; word-break: break-word;
}
.bgm-ops { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
/* 圆形按键：按下时是「下沉 + 主色柔和染色」，不再是生硬的灰方块 */
.bgm-btn {
    width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--ink-2, #555);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease),
                transform .16s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.bgm-btn svg { width: 14px; height: 14px; }
/* 收起键：带边框 + 浅底，和播放键明显区分，也更好点（32px 触控尺寸） */
.bgm-collapse {
    width: 34px; height: 34px;
    background: var(--surface-3, rgba(0, 0, 0, .05));
    border: 1px solid var(--line-2, rgba(0, 0, 0, .12));
    color: var(--ink-2, #555);
}
.bgm-collapse svg { width: 15px; height: 15px; }
@media (hover: hover) {
    .bgm-btn:hover { background: var(--surface-3, rgba(0, 0, 0, .05)); color: var(--ink, #222); }
    .bgm-btn.is-primary:hover { filter: brightness(1.08); }
}
.bgm-btn:active {
    transform: scale(.86);
    background: var(--accent-soft, rgba(200, 55, 45, .12));
    color: var(--accent-ink, #c8372d);
}
.bgm-btn.is-primary {
    background: var(--accent, #c8372d); color: var(--on-accent, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.bgm-btn.is-primary:active { transform: scale(.86); filter: brightness(.94); color: var(--on-accent, #fff); }

/* 音量条 */
.bgm-vol { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 1px; }
.bgm-vol svg { width: 12px; height: 12px; color: var(--ink-3, #888); flex: 0 0 auto; }
/* v98：视觉仍是 3px 细轨道，但把可点区域撑到 22px —— 原来整根 input 只有 3px 高，
 * 手机上手指几乎按不准音量。 */
.bgm-vol input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 30px; border-radius: 999px;
    background: transparent; outline: none; cursor: pointer;
}
.bgm-vol input[type="range"]::-webkit-slider-runnable-track {
    height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #c8372d) var(--bgm-fill, 45%), var(--line-2, rgba(0,0,0,.12)) var(--bgm-fill, 45%));
}
.bgm-vol input[type="range"]::-moz-range-track {
    height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #c8372d) var(--bgm-fill, 45%), var(--line-2, rgba(0,0,0,.12)) var(--bgm-fill, 45%));
}
.bgm-vol input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
    margin-top: -5px; /* 让 13px 圆点垂直居中到 3px 轨道 */
    background: var(--surface, #fff); border: 2px solid var(--accent, #c8372d); cursor: pointer;
}
.bgm-vol input[type="range"]::-moz-range-thumb {
    width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent, #c8372d);
    background: var(--surface, #fff); cursor: pointer;
}
.bgm-vol b { font-size: 10px; color: var(--ink-3, #888); min-width: 24px; text-align: right; font-weight: 600; }

/* 折叠态：一张圆形的旋转小唱片（隐藏文字与操作区，否则 42px 宽里文字换行会把卡片撑成 80+px） */
.bgm-card.is-collapsed,
.bgm-card.is-auto-collapsed {
    width: 44px; height: 44px; padding: 4px; gap: 0; justify-content: center;
    border-radius: 50%;
}
.bgm-card.is-auto-hidden { display: none; }
.bgm-card.is-collapsed .bgm-vol,
.bgm-card.is-collapsed .bgm-meta,
.bgm-card.is-collapsed .bgm-ops,
.bgm-card.is-auto-collapsed .bgm-vol,
.bgm-card.is-auto-collapsed .bgm-meta,
.bgm-card.is-auto-collapsed .bgm-ops { display: none; }
.bgm-card.is-collapsed .bgm-main,
.bgm-card.is-auto-collapsed .bgm-main { width: 100%; height: 100%; justify-content: center; }
.bgm-card.is-collapsed .bgm-disc,
.bgm-card.is-auto-collapsed .bgm-disc { width: 32px; height: 32px; }
/* v98：卡片宽度已由上面的 clamp() 处理，这里不再用固定 182px 覆盖，
 * 否则窄屏会回到「宽度固定、状态被裁」的老问题。 */
/* v100：窄屏里「收起键 34 + 播放键 32」两个按钮会吃掉曲名的全部宽度，
 * 结果「店铺音乐」被裁成「店…」。展开态点唱片/曲名本身就能播放暂停，
 * 所以在 ≤400px 时藏掉那个重复的播放键，把宽度还给文字。 */
@media (max-width: 400px) {
    .bgm-card:not(.is-collapsed):not(.is-auto-collapsed) .bgm-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bgm-card { animation: none; }
    .bgm-card.is-playing .bgm-disc { animation-duration: 12s; }
}