/* ==========================================================
   player.css — 可收起的音乐播放器（收起到右下角）
   ========================================================== */
.player {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 340px; height: 132px;
  border-radius: 26px;
  background: rgba(29, 27, 22, 0.78);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  color: #f5f3ee;
  box-shadow: 0 30px 60px -20px rgba(36, 20, 81, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: hidden;
  transform-origin: 100% 100%;
  transition:
    width 0.75s var(--ease-out),
    height 0.75s var(--ease-out),
    border-radius 0.75s var(--ease-out),
    box-shadow 0.6s;
  font-family: var(--font-serif);
}
.player::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, rgba(110, 75, 216, 0.55), rgba(218, 119, 86, 0.35), rgba(155, 123, 240, 0.5), rgba(110, 75, 216, 0.55));
  filter: blur(40px); opacity: 0.55; z-index: -1;
  animation: auraSpin 14s linear infinite; animation-play-state: paused;
}
.player.is-playing::before { animation-play-state: running; }
@keyframes auraSpin { to { transform: rotate(360deg); } }

.player__body {
  position: absolute; inset: 0; padding: 16px 18px 14px 18px;
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 6px;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out), filter 0.5s;
}
.player.is-collapsed .player__body { opacity: 0; transform: scale(0.85) translate(20px, 20px); filter: blur(6px); pointer-events: none; }

.player__disc {
  grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 50%;
  background:
    radial-gradient(circle, #1d1b16 0 9%, transparent 10%),
    radial-gradient(circle, rgba(255,255,255,0.9) 0 12%, transparent 13%),
    repeating-radial-gradient(circle, #2a2533 0 2px, #17131e 2px 4px);
  box-shadow: 0 0 0 2px rgba(201, 180, 255, 0.35), 0 10px 22px rgba(0,0,0,0.45);
  position: relative;
  animation: discSpin 5s linear infinite; animation-play-state: paused;
}
.player__disc::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: var(--grad-purple); opacity: 0.85;
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23%); mask: radial-gradient(circle, transparent 0 22%, #000 23%);
}
.player.is-playing .player__disc { animation-play-state: running; }
@keyframes discSpin { to { transform: rotate(360deg); } }

.player__meta { min-width: 0; align-self: end; }
.player__title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__time { font-family: var(--font-mono); font-size: 11px; opacity: 0.6; letter-spacing: 0.04em; }

.player__controls { display: flex; align-items: center; gap: 10px; align-self: start; }
.player__btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); transition: background 0.3s, transform 0.4s var(--ease-spring);
}
.player__btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.08); }
.player__btn:active { transform: scale(0.92); }
.player__btn svg { width: 16px; height: 16px; fill: currentColor; }
.player__btn--play { width: 38px; height: 38px; background: #f5f3ee; color: var(--ink); }
.player__btn--play:hover { background: #fff; }
.player__btn--play .ic-pause { display: none; }
.player.is-playing .player__btn--play .ic-play { display: none; }
.player.is-playing .player__btn--play .ic-pause { display: block; }

.player__vol { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.player__vol svg { width: 15px; height: 15px; fill: currentColor; opacity: 0.75; flex: none; }

/* 自定义滑块（进度 / 音量） */
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0;
  --p: 0%;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #c9b4ff, #da7756) 0 0 / var(--p) 100% no-repeat, rgba(255,255,255,0.18);
  transition: height 0.2s;
}
.range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.18); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #c9b4ff, #da7756); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(155, 123, 240, 0.35); transform: scale(0.75);
  transition: transform 0.25s var(--ease-spring);
}
.range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(155,123,240,0.35); }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.15); }
.player__seek { grid-column: 1 / 3; }

/* 收起按钮 & 收起后的圆形迷你态 */
.player__fold {
  position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0.6; transition: opacity 0.3s, background 0.3s, transform 0.5s var(--ease-out);
  z-index: 2;
}
.player__fold:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.player__fold svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.player.is-collapsed { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 18px 40px -10px rgba(110, 75, 216, 0.7), 0 0 0 1px rgba(255,255,255,0.12) inset; }
.player__mini {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(0.4) rotate(-120deg); pointer-events: none;
  transition: opacity 0.4s, transform 0.75s var(--ease-spring);
}
.player.is-collapsed .player__mini { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.2s; }
.player.is-collapsed .player__fold { opacity: 0; pointer-events: none; }
.player__ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.player__ring circle { fill: none; stroke-width: 3; }
.player__ring .bg { stroke: rgba(255,255,255,0.14); }
.player__ring .fg { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; transition: stroke-dashoffset 0.25s linear; }
.player__mini-disc {
  width: 34px; height: 34px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #2a2533 0 2px, #17131e 2px 4px);
  box-shadow: 0 0 0 2px rgba(201,180,255,0.5);
  display: grid; place-items: center;
  animation: discSpin 5s linear infinite; animation-play-state: paused;
}
.player.is-playing .player__mini-disc { animation-play-state: running; }
.player__mini-disc::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad-purple); }

/* 播放时的音律条 */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; margin-left: 8px; vertical-align: middle; }
.eq i { width: 2px; height: 30%; background: #c9b4ff; border-radius: 1px; }
.player.is-playing .eq i { animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s !important; }
.eq i:nth-child(3) { animation-delay: -0.6s !important; }
.eq i:nth-child(4) { animation-delay: -0.15s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

@media (max-width: 520px) {
  .player { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
}