/* 全站背景音乐迷你播放器 —— 样式单点。

   2026-09-20 从 build_prototype.py 里抽出来：原来只有主站首页有播放器，
   二创 / 糖点 / 来玩 / 长文那些标签页上一个都没有，用户在那些页面上控制不了音乐。
   现在主站和 10 个子页面共用这一份。**改这里 = 全站生效**，不用重跑任何 builder
   —— 那正是不做成内联常量（site_menu.py 那种）的理由：build_sweet_pages.py 和
   build_erchuang_page.py 都不在部署脚本里，漏跑不会报错，改了等于没改。

   站上有两套 CSS 变量命名（见 site_menu.py 里那张表）：
   | | 底 | 描边 | 强调色 | 强调色（深） |
   |---|---|---|---|---|
   | 主站 / 二创 / 长文连载 | --surface | --line-strong | --accent | --accent-strong |
   | 主题糖点系（8 页）     | --paper   | --edge        | --red    | --red-ink |
   所以一律写成 var(--paper, var(--surface)) 这种**带回退**的形式，同一份 CSS 两边都能用。
   --ink --muted --mono --seru --bg 两套都有，直接用；--spine 只有主站有，单独给回退。

   ⚠️ 类名沿用主站原来那套（.player / .pl-*），10 个子页面都查过没有同名类。
   但 build_prototype.py 里还有一组 .pl-close/.pl-nav/.pl-prev/.pl-next/.pl-count，
   那是**图片查看器**、同前缀不同组件，留在主站自己的 CSS 里，别搬过来。 */

/* 顶栏那几件（☰ / ◐ / 播放器）必须同高同心：统一 30px 高 + flex 居中。
   原来只写 top:14px、字号不同，实际高度 31/30/26.5px，视觉中心差了 2px 多。 */
.player{position:fixed;top:14px;right:16px;z-index:60;display:flex;align-items:center;gap:1px;
  height:30px;padding:0;text-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:opacity .28s ease}

/* 滚动时淡出，免得盖住正在读的内容；停止滚动 0.7s 后恢复。
   主站原来靠 body.scrolling 这个类（只有播放器在用），现在改由 player.js 自己
   加 .pl-dim —— 子页面没有那套滚动监听，放进共享逻辑里 11 个页面行为才一致。 */
.player.pl-dim{opacity:.12;pointer-events:none}
@media(prefers-reduced-motion:reduce){.player{transition:none}}

/* 长文连载页右上角是一整条 .topbar 工具栏（登录/创作中心/管理台/◐），
   播放器停靠进去当第一格，跟着那条 flex 排版走，不再自己 fixed 定位。
   position:relative 是给下拉歌单当定位参照的（不然会挂到 .topbar 上去）。 */
.topbar .player{position:relative;top:auto;right:auto;z-index:auto}

.pl-btn{background:none;border:none;color:var(--ink);cursor:pointer;line-height:1;
  padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px}
/* ⏮⏸⏭ 原来是 emoji-presentation 字符，iOS 上会渲染成彩色 emoji、且三个宽度不等（23/18.8/23px）。 */
.pl-btn svg{width:15px;height:15px;display:block}
.pl-play svg{width:16px;height:16px}
.pl-btn:hover{background:color-mix(in srgb,var(--red, var(--accent)) 18%,transparent);
  color:var(--red-ink, var(--accent-strong))}
.pl-title{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  padding:5px 8px;border-radius:8px;min-width:0}
.pl-title:hover{color:var(--red-ink, var(--accent-strong))}
.pl-name{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-caret{color:var(--muted);font-size:10px}

/* 播放时的小均衡器 */
.pl-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.pl-eq i{width:2px;height:11px;background:var(--red, var(--accent));border-radius:1px;
  animation:pl-eq-k .9s ease-in-out infinite}
.pl-eq i:nth-child(2){animation-delay:.3s}
.pl-eq i:nth-child(3){animation-delay:.6s}
.player.paused .pl-eq i{animation-play-state:paused;height:4px}
/* keyframes 名字带 pl- 前缀：主站自己有个 @keyframes fade，子页面各有各的动画，
   共享文件里的名字要保证 11 个页面上都不会撞。 */
@keyframes pl-eq-k{0%,100%{height:3px}50%{height:12px}}

/* 窄屏收起「上一首」：加了播放模式键之后是五件（模式/上一首/播放/下一首/歌名），
   320px 的手机上红线页只剩 5px 间距（它的返回文案最长，「← 糖点首页」）。
   砍掉「上一首」腾出 27px，其余页面也跟着宽松。选它是因为它最可省 ——
   歌单下拉里可以直接点任意一首，而模式键和下一首没有替代。桌面保留完整五件。 */
@media (max-width:820px){ #plPrev{display:none} }

/* 窄屏收起歌名：顶栏那一条在手机上放不下
   ☰ + ◐ + ←返回 + 再玩一会 + 完整播放器（长歌名时 245px）—— 实测 375px 宽下全叠在一起。
   收掉歌名后播放器约 122px，整条刚好排得开。歌名在下拉歌单里仍然标着当前那首。 */
@media (max-width:820px){ .pl-name{display:none} }

/* 下拉歌单 */
.pl-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;max-width:min(80vw,300px);
  max-height:min(50vh,320px);overflow-y:auto;list-style:none;margin:0;padding:6px;
  background:color-mix(in srgb,var(--paper, var(--surface)) 96%,var(--bg));
  border:1px solid var(--edge, var(--line-strong));
  border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.22);display:none;
  scrollbar-width:thin;scrollbar-color:var(--spine, var(--muted)) transparent}
.pl-menu.open{display:block;animation:pl-fade-k .3s ease}
@keyframes pl-fade-k{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pl-menu li{font-family:var(--seru);font-size:13px;color:var(--ink);padding:8px 10px;border-radius:8px;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:9px;align-items:center}
.pl-menu li:hover{background:color-mix(in srgb,var(--red, var(--accent)) 14%,transparent)}
.pl-menu li.cur{color:var(--red-ink, var(--accent-strong));
  background:color-mix(in srgb,var(--red, var(--accent)) 12%,transparent)}
.pl-menu li .idx{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:16px;flex:none}
.pl-menu li .nm{overflow:hidden;text-overflow:ellipsis}