/* ═══════════════════════════════════════════════════
   CD 唱片机主题 — 清风拂面
   基于 Lottie 动画逐帧 + 静态 PNG 合成
   ═══════════════════════════════════════════════════ */

/* ── 主题容器：覆盖播放器区域，默认隐藏 ── */
.cd-theme {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: #E3E1DD;
}
.cd-theme.active {
  opacity: 1;
}

/* ── 场景背景 ── */
.cd-scenes {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cd-scenes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── 唱机底座 ── */
.cd-player-body {
  position: absolute;
  z-index: 3;
  bottom: 9%;
  left: 6%;
  width: 88%;
  line-height: 0;
}
.cd-player-body img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 置物架 ── */
.cd-shelf {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
}
.cd-shelf img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 静态装饰左/右 ── */
.cd-deco-left {
  position: absolute;
  z-index: 2;
  left: 4%;
  bottom: 42%;
  width: 20%;
  max-width: 90px;
  line-height: 0;
  pointer-events: none;
}
.cd-deco-left img {
  width: 100%;
  height: auto;
  display: block;
}

.cd-deco-right {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 38%;
  width: 22%;
  max-width: 100px;
  line-height: 0;
  pointer-events: none;
}
.cd-deco-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Lottie: 黑胶唱片（686×279画布，唱片在中心） ── */
.cd-vinyl {
  position: absolute;
  z-index: 5;
  /* 从参考图分析：唱片中心在画面50%位置 */
  top: 19%;
  left: 9%;
  width: 82%;
  /* 保持Lottie原始比例：696/279 ≈ 2.494 */
  aspect-ratio: 696 / 279;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.65;
}
.cd-vinyl lottie-player,
.cd-vinyl svg {
  width: 100% !important;
  height: 100% !important;
}
.cd-vinyl canvas,
.cd-vinyl svg {
  display: block;
}

/* ── Lottie: 唱针（279×279画布，右侧） ── */
.cd-needle {
  position: absolute;
  z-index: 6;
  /* 唱针位于唱片右侧，从参考图 needle x≈800-890 */
  right: 10%;
  top: 16%;
  width: 26%;
  aspect-ratio: 279 / 279;
  pointer-events: none;
}
.cd-needle svg,
.cd-needle canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Lottie: 机器人（276×276，左下） ── */
.cd-robot-lottie {
  position: absolute;
  z-index: 5;
  left: 2%;
  bottom: 24%;
  width: 15%;
  max-width: 65px;
  aspect-ratio: 276 / 276;
  pointer-events: none;
}
.cd-robot-lottie svg,
.cd-robot-lottie canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── 静态机器人底图 ── */
.cd-robot-static {
  position: absolute;
  z-index: 4;
  left: 2%;
  bottom: 24%;
  width: 15%;
  max-width: 65px;
  line-height: 0;
  pointer-events: none;
  opacity: 0.3;
}
.cd-robot-static img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Lottie: 香薰（276×276，装饰左动画） ── */
.cd-deco-lottie {
  position: absolute;
  z-index: 5;
  left: 5%;
  bottom: 40%;
  width: 18%;
  max-width: 75px;
  aspect-ratio: 276 / 276;
  pointer-events: none;
}
.cd-deco-lottie svg,
.cd-deco-lottie canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ═══════════════════════════════════════════════════
   专辑封面 → 黑胶唱片中心标签
   ═══════════════════════════════════════════════════ */
.cd-theme.active ~ .cover-lyrics-wrapper {
  z-index: 7;
}
.cd-theme.active ~ .cover-lyrics-wrapper .album-art {
  /* 缩小为唱片中心标签 */
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
  border-radius: 50% !important;
  /* 唱片标签效果 */
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.35),
    0 0 0 6px rgba(30,30,30,0.15),
    0 0 0 9px rgba(0,0,0,0.08),
    0 4px 20px rgba(0,0,0,0.25) !important;
  /* 居中于黑胶唱片 */
  position: relative;
  margin: 0 auto 8px !important;
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
  object-fit: cover;
}
.cd-theme.active ~ .cover-lyrics-wrapper .song-info {
  margin-top: 4px;
}
.cd-theme.active ~ .cover-lyrics-wrapper .song-info h1 {
  font-size: 1rem;
}
.cd-theme.active ~ .cover-lyrics-wrapper .song-info p {
  font-size: 0.75rem;
}

/* ── 隐藏默认背景 ── */
.cd-theme.active ~ .player-background {
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

/* ── 进度条样式微调 ── */
.cd-theme.active ~ .m3-slider-root {
  z-index: 8;
}
.cd-theme.active ~ .time-labels {
  z-index: 8;
}
.cd-theme.active ~ .controls {
  z-index: 8;
}

/* ── 歌词显示时主题淡化 ── */
.cd-theme.active.lyrics-open {
  opacity: 0.04;
  transition: opacity 0.4s ease;
}

/* ═══════════════════════════════════════════════════
   暗色模式适配
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] .cd-theme.active {
  filter: brightness(0.85) saturate(0.92);
}

/* ═══════════════════════════════════════════════════
   小屏适配 (width < 375px)
   ═══════════════════════════════════════════════════ */
@media screen and (max-width: 374px) {
  .cd-vinyl { top: 17%; }
  .cd-needle { top: 14%; right: 8%; width: 22%; }
  .cd-player-body { bottom: 7%; left: 4%; width: 92%; }
  .cd-theme.active ~ .cover-lyrics-wrapper .album-art {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
  }
}

/* ═══════════════════════════════════════════════════
   大屏适配 (tablet)
   ═══════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {
  .cd-theme.active ~ .cover-lyrics-wrapper .album-art {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
  }
  .cd-vinyl { top: 22%; width: 55%; left: 22.5%; }
  .cd-needle { top: 19%; right: 20%; width: 18%; }
  .cd-player-body { bottom: 8%; left: 10%; width: 80%; }
  .cd-deco-left { left: 6%; }
  .cd-deco-right { right: 5%; }
}