/* 3D 歌曲空间 */
#song-space-container {
  width: 100%;
  height: max(0px, calc(100dvh - 120px));
  min-height: 420px;
  margin: 40px auto 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26,10,46,0.85) 0%, rgba(13,5,24,0.95) 100%);
  cursor: grab;
  user-select: none;
}
#song-space-container:active { cursor: grabbing; }
.space-hint {
  position: fixed; top: 16px; right: 24px; z-index: 9998;
  color: rgba(200,180,255,.45); font-size: .8rem; letter-spacing: 2px; pointer-events: none;
}
.start-orbit-button {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  transform: none;
  padding: 10px 18px;
  border: 1px solid rgba(151, 206, 255, .58);
  border-radius: 999px;
  color: #dff4ff;
  background: rgba(36, 16, 73, .78);
  box-shadow: 0 0 14px rgba(120, 180, 255, .32), inset 0 1px 0 rgba(255,255,255,.16);
  font: inherit;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.start-orbit-button:hover {
  background: rgba(72, 34, 126, .9);
  box-shadow: 0 0 22px rgba(147, 202, 255, .58), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-2px);
}
#scene-wrapper {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
#scene-rotate {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .1s ease-out;
  width: 0; height: 0;
}
#nebula-plane {
  position: absolute;
  left: -2400px;
  top: -1440px;
  width: 4800px;
  height: 2880px;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(18, 7, 42, .12) 0%, rgba(10, 4, 25, .26) 100%),
    url('images/xingkon/user-fivearm-wan27-2048x1024-reconstructed.png') center / 100% 100% no-repeat;
  background-color: #0d0518;
  background-blend-mode: normal;
  opacity: .9;
}
#nebula-effects {
  position: absolute;
  left: -2400px;
  top: -1440px;
  width: 4800px;
  height: 2880px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#scene-orbit {
  /* Small final alignment adjustment; keep the nebula background fixed. */
  --card-orbit-offset-x: -80px;
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: nebulaClockwiseOrbit 240s linear infinite;
}
@keyframes nebulaClockwiseOrbit {
  from { transform: translateX(var(--card-orbit-offset-x)) rotate(0deg); }
  to { transform: translateX(var(--card-orbit-offset-x)) rotate(360deg); }
}
body.scene-interacted #scene-orbit {
  animation: none;
  transform: translateX(var(--card-orbit-offset-x)) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .nebula-star, .nebula-meteor { animation: none; }
}
.nebula-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 3px currentColor;
  animation: nebulaStarTwinkle var(--twinkle-duration, 4s) ease-in-out infinite alternate;
  backface-visibility: hidden;
}
.nebula-star.bright {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 6px currentColor, 0 0 12px rgba(181,216,255,.28);
}
body.low-power-scene .nebula-star {
  animation: none;
  box-shadow: none;
  opacity: .58;
}
body.low-power-scene .nebula-meteor {
  animation: none;
  opacity: 0;
}
.nebula-meteor {
  position: absolute;
  width: 110px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, rgba(159,221,255,.15) 20%, rgba(226,247,255,.96) 100%);
  box-shadow: 0 0 7px rgba(159,221,255,.72), 0 0 18px rgba(143,110,255,.32);
  animation: nebulaMeteor 15s linear infinite;
  backface-visibility: hidden;
}
.nebula-meteor.meteor-two { animation-delay: 7.4s; }
@keyframes nebulaStarTwinkle {
  from { opacity: .22; transform: scale(.72); }
  to { opacity: .92; transform: scale(1.12); }
}
@keyframes nebulaMeteor {
  0%, 8% { opacity: 0; transform: translate3d(0,0,0) rotate(-24deg); }
  10% { opacity: .9; }
  17% { opacity: 0; transform: translate3d(430px,200px,0) rotate(-24deg); }
  100% { opacity: 0; transform: translate3d(430px,200px,0) rotate(-24deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nebula-star, .nebula-meteor { animation: none; }
}

/* 歌曲卡片 — 使用备份的 .card / .platform-badges 结构 */
@property --card-hover-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.song-card-3d {
  position: absolute; left: 0; top: 0;
  width: 240px; height: 240px;
  cursor: pointer;
  z-index: 2;
}
.song-card-3d.is-preview {
  z-index: 2000 !important;
}
.card-face {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(135deg, #2a1540, #1a0a2e);
  box-shadow: 0 8px 32px rgba(120,80,200,.3), inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotate(calc(-1 * var(--layout-rotation, 0deg))) scale(var(--card-hover-scale));
  animation: cardCounterOrbit 240s linear infinite;
  animation-delay: var(--orbit-counter-delay, 0s);
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transition: --card-hover-scale .18s ease-out, box-shadow .18s ease-out;
}
@keyframes cardCounterOrbit {
  from { transform: rotate(calc(-1 * var(--layout-rotation, 0deg))) rotate(0deg) scale(var(--card-hover-scale)); }
  to { transform: rotate(calc(-1 * var(--layout-rotation, 0deg))) rotate(-360deg) scale(var(--card-hover-scale)); }
}
body.scene-interacted .card-face {
  animation: none;
}
.song-card-3d.is-preview .card-face {
  --card-hover-scale: 4;
  pointer-events: none;
  box-shadow: 0 18px 60px rgba(192,132,252,.64), inset 0 1px 0 rgba(255,255,255,.14);
}
#song-scene {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.card-bg {
  /* 透明化 — 让 .card 内容可见（原为封面图遮罩，现在无封面） */
  position: absolute; inset: 0; opacity: 0;
}

/* === 卡片内容 — 与备份 styles.css 完全一致 === */
.card{box-sizing:border-box;height:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;cursor:pointer;transition:all .3s;position:relative;min-height:218px}
.card:hover{background:rgba(255,255,255,.1);border-color:rgba(126,200,227,.4);transform:translateY(-2px)}
.card h3{font-size:1.98rem;line-height:1.16;margin-bottom:8px;white-space:normal;overflow-wrap:anywhere;color:#66ccff;text-shadow:0 0 12px rgba(102,204,255,.28)}
.card .release-meta{display:flex;flex-direction:column;gap:3px;margin:0 0 8px}.card .year{font-size:.75rem;color:#a78bfa;line-height:1.2}.card .date{font-size:.7rem;color:#7ec8e3;line-height:1.2}
.card .intro{font-size:.85rem;color:#9ca3af;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.card .tag{font-size:.7rem;padding:2px 8px;border-radius:10px;background:rgba(126,200,227,.15);color:#7ec8e3}
.platform-badges{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}.platform-dot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;border:1px solid rgba(255,255,255,.14);color:#64748b;background:rgba(255,255,255,.04)}.platform-dot.on.bili{color:#fb7299;border-color:rgba(251,114,153,.4);background:rgba(251,114,153,.12)}.platform-dot.on.netease{color:#f87171;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.12)}.platform-dot.on.qq{color:#60a5fa;border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.12)}.platform-dot.missing{color:#6b7280;border-color:rgba(107,114,128,.3);background:rgba(107,114,128,.08)}.platform-dot.search{color:#9ca3af;border-color:rgba(156,163,175,.3);background:rgba(156,163,175,.08)}

/* 歌曲空间星空 */
.star-field{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.star-field .s{position:absolute;border-radius:50%}
@keyframes sFlicker{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}