/* ============================================================
   星海音乐 Web · lyric.css（v6.21 · 从 style.css 结构化拆分）
   内容：桌面歌词面板 / 翻译与罗马音副行
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ================= 歌词面板 ================= */
/* 【v6.8 质感调优】桌面「展开全部歌词」面板从近实底改为毛玻璃透底：
   半透明底色 + 更深 backdrop 模糊，下层界面（黑胶封面/列表）以柔和模糊
   画面透出 —— 不完全遮死，也不影响歌词可读性 */
.lyric-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--pb-h);
  width: 400px;
  max-width: 100vw;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(13, 19, 34, 0.58);
  border-left: 1px solid rgba(var(--accent-rgb), 0.16);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* 全局液态玻璃光效：顶部高光线缓慢呼吸 */
.lyric-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(var(--accent-rgb), 0.42) 55%,
    rgba(255, 255, 255, 0.16) 80%,
    transparent 100%);
  animation: glassGlow 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
.lyric-panel.open { transform: none; }
.lyric-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.lyric-head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.lyric-head img {
  width: 86px; height: 86px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--card);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  flex: none;
}
.lyric-meta { min-width: 0; }
.lyric-name {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyric-singer { margin-top: 6px; font-size: 13px; color: var(--sub); }
.lyric-quality { margin-top: 8px; }
.lyric-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 26px 28px 60px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%);
}
.lyric-line {
  padding: 9px 4px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #6d7a96;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .lyric-line:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.07); }
}
.lyric-line.active {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-2-rgb), 0.05));
  transform: scale(1.02);
  transform-origin: left center;
}
.lyric-empty { text-align: center; color: #5f6b85; padding: 60px 0; font-size: 13.5px; }

/* ============ 歌词副行：翻译 / 罗马音（v6.6） ============
 * 三处歌词视图（桌面歌词面板 / 正在播放 / 手机全屏）共用；
 * 罗马音在上（贴近原文发音）、翻译在下（Apple Music 式排列）。
 * 静态内容只在 setData 渲染一次，不影响逐字卡拉OK的每帧更新。 */
.lyric-sub { margin-top: 3px; }
.lyric-sub span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(142, 154, 179, 0.62);
  letter-spacing: 0.2px;
  -webkit-user-select: none; user-select: none;
}
.lyric-sub .ls-rm { font-style: italic; }
/* 当前行激活时副行整体提亮（跟随三种行类） */
.lyric-line.active .lyric-sub span,
.np-lyric-line.active .lyric-sub span,
.fs-lyric-line.active .lyric-sub span { color: rgba(171, 183, 216, 0.95); }
/* 逐字行内副行不参与卡拉OK渐变填充（kw-w 的 background-clip 只作用于字 span） */
.lyric-sub .kw-w { -webkit-text-fill-color: initial; color: inherit; background: none; }
/* 手机全屏歌词模式：副行字号随主行放大节奏微调；
   长罗马音换行后与翻译副行之间留 3px 呼吸间距（VLM 视觉复核建议） */
.fs-player.lm .lyric-sub span { font-size: 12.5px; }
.fs-player.lm .lyric-sub .ls-rm { margin-bottom: 3px; line-height: 1.45; }



/* ============================================================
   【v6.31 阶段四】歌词编辑入口（歌词面板头部，关闭按钮左侧）
   ============================================================ */
.lyric-edit-btn { position: absolute; top: 14px; right: 58px; z-index: 2; }