/* The existing audio controller wears a small rose-gold star, not a player panel. */
.music-home-slot { display: block; width: 0; height: 0; }
body:has(#story) :is(#music-home-slot,dialog) > #music-player[data-music-design="pendant"][data-state] {
  --pendant-ink: #886170;
  --pendant-line: #b18b8d;
  --pendant-light: #fff9e9;
  --pendant-shade: #d3a6a8;
  position: fixed; z-index: 30; top: 0; right: max(18px, env(safe-area-inset-right)); bottom: auto;
  display: block; width: 52px; height: 164px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 1; visibility: visible; pointer-events: none; transform: none;
  animation: none; transition: none; overflow: visible; isolation: isolate;
  color: var(--pendant-ink); font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
body:has(#story.is-visible) :is(#music-home-slot,dialog) > #music-player[data-music-design="pendant"][data-state] {
  --pendant-ink: #746d63; --pendant-line: #aaa08e; --pendant-shade: #c6b59e;
}
#music-player[data-music-design="pendant"] button {
  border: 0; margin: 0; padding: 0; color: var(--pendant-ink); background: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
#music-player[data-music-design="pendant"] .music-toggle {
  position: absolute; top: 76px; left: 0; width: 52px; height: 52px;
  display: block; min-width: 0; flex: none; border-radius: 50%; pointer-events: auto;
}
#music-player[data-music-design="pendant"] button:hover { background: none; }
#music-player[data-music-design="pendant"] button:focus-visible {
  outline: 1px solid var(--pendant-line); outline-offset: 3px;
}
.music-charm {
  position: absolute; bottom: 0; left: 0; width: 52px; height: 128px;
  pointer-events: none; transform-origin: 50% 0;
  animation: pendant-sway 6s ease-in-out infinite; animation-play-state: paused;
}
.pendant-chain {
  position: absolute; left: calc(50% - .5px); top: 0; width: 1px; height: 86px;
  background: linear-gradient(to bottom,transparent,var(--pendant-line) 20%,var(--pendant-line)); opacity: .65;
}
.pendant-chain::before, .pendant-chain::after {
  content: ""; position: absolute; left: -1px; width: 3px; height: 3px;
  border-radius: 50%; background: var(--pendant-light); border: .5px solid var(--pendant-line);
}
.pendant-chain::before { top: 28px; }
.pendant-chain::after { bottom: 13px; }
#music-player .pendant-star {
  position: absolute; bottom: 0; left: 4px; width: 44px; height: 48px;
  overflow: visible; filter: drop-shadow(0 2px 3px #604e5c1c); opacity: .82;
  transition: opacity .4s ease, filter .4s ease;
}
.pendant-star .pendant-face { fill: url(#pendant-gold); stroke: var(--pendant-line); stroke-width: .8; stroke-linejoin: round; }
.pendant-star .pendant-link { fill: none; stroke: var(--pendant-line); stroke-width: .8; }
.pendant-star .pendant-cut { fill: none; stroke: #fffdf4; stroke-width: .7; opacity: .8; }
.pendant-star .pendant-stop-light { stop-color: var(--pendant-light); }
.pendant-star .pendant-stop-shade { stop-color: var(--pendant-shade); }
#music-player[data-state="playing"][data-muted="false"] .music-charm { animation-play-state: running; }
#music-player[data-state="playing"][data-muted="false"] .pendant-star { opacity: 1; filter: drop-shadow(0 0 5px #f0d7b84d); }
#music-player[data-state="loading"] .pendant-star { opacity: .4; }
#music-player[data-muted="true"] .pendant-star { opacity: .52; }
#music-player[data-music-design="pendant"] .music-track {
  position: absolute; right: 61px; top: 1px; min-width: 116px; display: grid;
  gap: 4px; padding: 10px 14px; border: 1px solid #ffffff99; border-radius: 5px;
  text-align: left; background: #faf6eeed; box-shadow: 0 5px 20px #4f465510;
  color: var(--pendant-ink); pointer-events: none; opacity: 0;
  transform: translateX(4px); transition: opacity .2s ease, transform .2s ease;
}
#music-player[data-music-design="pendant"] .music-track strong {
  font-family: "Shang Story Serif", "Songti SC", SimSun, serif;
  font-size: 13px; font-weight: 400; letter-spacing: .18em; line-height: 1.3;
}
body:has(#story) #music-player[data-music-design="pendant"] .music-track small { color: var(--pendant-ink); font-size: 10px; letter-spacing: .06em; white-space: nowrap; line-height: 1.4; }
#music-player[data-music-design="pendant"] .music-mute {
  position: absolute; left: 8px; top: 128px; width: 36px; height: 36px; display: grid;
  place-items: center; border-radius: 50%; opacity: 0; pointer-events: none;
  transition: opacity .2s ease; background: #faf6eecc;
}
#music-player[data-music-design="pendant"] .music-mute::before { display: none; }
#music-player .music-mute svg { width: 15px; height: 15px; stroke-width: 1.4; }
#music-player .music-muted-icon { display: none; }
#music-player[data-muted="true"] .music-sound-icon { display: none; }
#music-player[data-muted="true"] .music-muted-icon { display: block; }
#music-player[data-music-design="pendant"]:is(:hover,:focus-within) .music-track { opacity: 1; transform: none; }
#music-player[data-music-design="pendant"]:is(:hover,:focus-within) .music-mute { opacity: .85; pointer-events: auto; }
/* The same controls follow the current dialog; the audio element never moves. */
body:has(#story) :is(#music-home-slot,dialog)[open] > #music-player[data-music-design="pendant"][data-state] { position: absolute; right: 16px; }
@keyframes pendant-sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@media (max-width: 760px) {
  body:has(#story) :is(#music-home-slot,dialog) > #music-player[data-music-design="pendant"][data-state] { right: max(7px,env(safe-area-inset-right)); height: 134px; }
  #music-player[data-music-design="pendant"] .music-toggle { top: 46px; }
  .music-charm { height: 98px; }
  .pendant-chain { height: 56px; }
  .pendant-chain::before { top: 16px; }
  #music-player[data-music-design="pendant"] .music-mute { top: 98px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-charm { animation: none; transform: none; }
  #music-player[data-music-design="pendant"] :is(.pendant-star,.music-track,.music-mute) { transition: none; }
}