/* ==========================================================================
   Page Music Player · lyrics.css
   全屏播放页歌词区：滚动容器 / 行高亮 / 逐行进度 / 翻译 / 空状态
   --------------------------------------------------------------------------
   DOM（lyrics.js 生成）：
     .pp-lyrics[data-role=lyrics]
       .lyrics-lines[role=list]
         .lyric-line[data-index][.is-active]  style="--line-progress:0.42"
           .lyric-orig
           .lyric-trans
       .lyrics-empty
         .lyrics-empty-icon / .lyrics-empty-title / .lyrics-empty-hint
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 滚动容器
   -------------------------------------------------------------------------- */
.pp-lyrics {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: 6px;
  padding: 0 clamp(2px, 0.6vw, 10px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* 上下边缘柔和淡出，避免歌词被硬切 */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.pp-lyrics:focus {
  outline: none;
}

.pp-lyrics:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* 可点击区域已经足够，鼠标样式交给每一行 */
.pp-lyrics::-webkit-scrollbar {
  width: 8px;
}

/* --------------------------------------------------------------------------
   2. 歌词行
   -------------------------------------------------------------------------- */
.lyrics-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 上下留白，让首尾行也能滚动到容器中央 */
  padding-block: clamp(140px, 40vh, 420px);
  text-align: center;
}

.lyric-line {
  padding: 0.4em 1em;
  border-radius: var(--radius-sm);
  color: rgba(232, 236, 244, 0.42);
  font-size: clamp(14.5px, 1.55vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  cursor: pointer;
  transition: color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.24s var(--ease), opacity 0.22s var(--ease),
    font-size 0.24s var(--ease);
}

.lyric-line:hover {
  color: rgba(232, 236, 244, 0.72);
  background: rgba(255, 255, 255, 0.035);
}

.lyric-line:active {
  transform: scale(0.995);
}

.lyric-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 当前行 */
.lyric-line.is-active {
  color: var(--text);
  font-weight: 650;
  transform: scale(1.02);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 108, 255, 0.1) 22%,
    rgba(139, 108, 255, 0.1) 78%,
    transparent
  );
}

.lyric-line.is-active:hover {
  color: var(--text);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 108, 255, 0.15) 22%,
    rgba(139, 108, 255, 0.15) 78%,
    transparent
  );
}

/* --------------------------------------------------------------------------
   3. 原文 / 译文 / 空行
   -------------------------------------------------------------------------- */
.lyric-orig {
  display: block;
  min-height: 1em;
  word-break: break-word;
}

/* 当前行按 --line-progress（0–1）做卡拉 OK 式填充；
   不支持 background-clip:text 时自动回退为纯色文字 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lyric-line.is-active .lyric-orig {
    background-image: linear-gradient(
      90deg,
      #ffffff 0,
      #f2eeff calc(var(--line-progress, 0) * 100%),
      rgba(232, 236, 244, 0.62) calc(var(--line-progress, 0) * 100%),
      rgba(232, 236, 244, 0.62) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(139, 108, 255, 0.28));
  }
}

.lyric-trans {
  display: block;
  margin-top: 0.28em;
  color: rgba(232, 236, 244, 0.34);
  font-size: 0.78em;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.lyric-trans:empty {
  display: none;
}

.lyric-line.is-active .lyric-trans {
  color: rgba(217, 206, 255, 0.72);
}

/* 间奏空行：显示 · · · */
.lyric-blank {
  display: inline-block;
  color: rgba(232, 236, 244, 0.3);
  letter-spacing: 0.28em;
  font-size: 0.86em;
  line-height: 1.2;
  user-select: none;
}

.lyric-line.is-active .lyric-blank {
  color: rgba(217, 206, 255, 0.6);
}

/* --------------------------------------------------------------------------
   4. 空状态 / 提示
   -------------------------------------------------------------------------- */
.lyrics-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 180px;
  padding: 32px 18px;
  text-align: center;
}

.lyrics-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lyrics-empty-title {
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
}

.lyrics-empty-hint {
  max-width: 280px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}

/* 点击歌词跳转时，状态文字可做强调（lyrics.js 会更新 .pp-lyrics-state） */
.pp-lyrics-state.is-error {
  color: #ffb3bd;
}

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .lyrics-lines {
    padding-block: clamp(64px, 22vh, 180px);
    gap: 0;
  }

  .lyric-line {
    padding: 0.34em 0.8em;
    font-size: clamp(14px, 4vw, 17px);
  }

  .lyric-line.is-active {
    transform: none;
  }

  /* 歌词模式下占满 .pp-right 的剩余高度（player.css 中 .pp-right 为 flex 容器） */
  .pp-lyrics {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .pp-lyrics {
    margin-top: 2px;
    padding: 0;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }

  .lyrics-lines {
    padding-block: clamp(60px, 16vh, 140px);
  }

  .lyric-line {
    font-size: 14px;
    line-height: 1.55;
  }

  .lyric-trans {
    font-size: 0.76em;
    margin-top: 0.2em;
  }

  .lyrics-empty {
    min-height: 140px;
    padding: 22px 12px;
  }

  .lyrics-empty-icon {
    width: 44px;
    height: 44px;
  }
}

/* 减少动态效果：不做行内缩放与平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  .pp-lyrics {
    scroll-behavior: auto;
  }

  .lyric-line,
  .lyric-line.is-active {
    transition: none;
    transform: none;
  }
}