/* ═══ Player Page — Premium Design ═══ */
.player-page { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.player-loading { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Background */
.player-bg { position: fixed; inset: 0; z-index: 0; }
.player-bg-img { width: 100%; height: 100%; object-fit: cover; filter: blur(120px) saturate(1.4) brightness(.25); transform: scale(1.6); opacity: 0; transition: opacity 2s var(--ease); }
.player-bg-img.loaded { opacity: 1; }
.player-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,.6) 35%, rgba(5,5,5,.85) 70%, rgba(5,5,5,.96) 100%); }

/* Ambient visualizer canvas */
.player-visualizer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* Content */
.player-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px 40px; max-width: 560px; margin: 0 auto; width: 100%; }

/* Artwork */
.player-artwork { width: min(300px, 62vw); aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-elevated); margin-bottom: 36px; position: relative; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-radius .8s var(--ease); box-shadow: 0 8px 48px rgba(0,0,0,.5), 0 0 80px rgba(232,168,73,.04); }
.player-artwork-inner { width: 100%; height: 100%; position: relative; }
.player-artwork.playing { animation: artwork-breathe 4s ease-in-out infinite; }
@keyframes artwork-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 48px rgba(0,0,0,.5), 0 0 80px rgba(232,168,73,.08), 0 0 40px rgba(232,168,73,.04); }
  50% { transform: scale(1.012); box-shadow: 0 12px 60px rgba(0,0,0,.5), 0 0 120px rgba(232,168,73,.14), 0 0 60px rgba(232,168,73,.07); }
}
.player-artwork img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
.player-artwork img.loaded { opacity: 1; transform: scale(1); }

/* Placeholder with animated rings */
.player-artwork-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); }
.player-artwork-placeholder svg { width: 52px; height: 52px; color: var(--text-faint); opacity: .4; position: relative; z-index: 1; }
.placeholder-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.placeholder-rings div { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.04); }
.placeholder-rings div:nth-child(1) { width: 60%; height: 60%; animation: ring-expand 4s ease-in-out infinite; }
.placeholder-rings div:nth-child(2) { width: 78%; height: 78%; animation: ring-expand 4s ease-in-out infinite 1.2s; }
.placeholder-rings div:nth-child(3) { width: 96%; height: 96%; animation: ring-expand 4s ease-in-out infinite 2.4s; }
@keyframes ring-expand { 0%,100% { transform: scale(.95); opacity: .3; } 50% { transform: scale(1.02); opacity: .08; } }

/* Track info */
.player-info { text-align: center; margin-bottom: 28px; width: 100%; padding: 0 8px; }
.player-title { font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-artist { font-size: .9375rem; color: var(--text-secondary); }
.player-artist:empty { display: none; }

/* Waveform */
.player-waveform-container { width: 100%; }
.waveform-wrap { width: 100%; height: 52px; margin-bottom: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; border-radius: var(--radius-xs); transition: background .15s ease; }
.waveform-wrap:hover { background: rgba(255,255,255,.02); }
.waveform-wrap canvas { width: 100%; height: 100%; display: block; }
.waveform-hover-time { position: absolute; top: -28px; transform: translateX(-50%); background: rgba(0,0,0,.85); color: #fff; font-family: var(--mono); font-size: .625rem; padding: 3px 8px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .1s ease; white-space: nowrap; backdrop-filter: blur(8px); }
.waveform-wrap:hover .waveform-hover-time { opacity: 1; }

/* Time */
.player-time { display: flex; justify-content: space-between; width: 100%; margin-bottom: 24px; font-family: var(--mono); font-size: .6875rem; color: var(--text-tertiary); }

/* Controls */
.player-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 24px; width: 100%; }
.ctrl-skip { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all .2s var(--ease); }
.ctrl-skip:hover { color: var(--text-primary); background: rgba(255,255,255,.06); transform: scale(1.08); }
.ctrl-skip:active { transform: scale(.88); transition: transform .08s; }
.ctrl-skip svg { width: 20px; height: 20px; }
.ctrl-play { width: 64px; height: 64px; border-radius: 50%; background: var(--text-primary); color: var(--bg); display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease-bounce); box-shadow: 0 2px 20px rgba(255,255,255,.08); }
.ctrl-play:hover { transform: scale(1.08); box-shadow: 0 4px 32px rgba(255,255,255,.14); }
.ctrl-play:active { transform: scale(.9); transition: transform .08s ease; }
.ctrl-play.is-playing { box-shadow: 0 4px 32px rgba(255,255,255,.12), 0 0 60px rgba(232,168,73,.08); }
.ctrl-play svg { width: 26px; height: 26px; }
.ctrl-play .icon-play { margin-left: 3px; }

/* Volume */
.player-volume { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 24px; }
.vol-btn { color: var(--text-tertiary); transition: color .15s ease; display: flex; align-items: center; }
.vol-btn:hover { color: var(--text-secondary); }
.vol-btn svg { width: 16px; height: 16px; }
.vol-slider-wrap { width: 100px; height: 3px; position: relative; border-radius: 2px; background: var(--bg-surface); }
.vol-slider { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 1; }
.vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text-primary); cursor: pointer; margin-top: -4.5px; transition: transform .15s var(--ease); }
.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.vol-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text-primary); cursor: pointer; border: none; }
.vol-slider-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--text-secondary); border-radius: 2px; pointer-events: none; transition: width .05s linear; }

/* Actions */
.player-actions { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.act-btn { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-full); font-size: .8125rem; font-weight: 500; color: var(--text-secondary); transition: all .15s ease; background: rgba(255,255,255,.04); }
.act-btn:hover { background: rgba(255,255,255,.09); color: var(--text-primary); transform: translateY(-1px); }
.act-btn:active { transform: translateY(0); }
.act-btn svg { width: 15px; height: 15px; }

/* Error state */
.player-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 80px 24px; }
.player-error-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.player-error-icon svg { width: 28px; height: 28px; color: var(--text-faint); }
.player-error h2 { font-size: 1.25rem; font-weight: 600; }
.player-error p { color: var(--text-secondary); font-size: .9375rem; margin-bottom: 16px; }

/* ═══ Responsive ═══ */
@media (max-width: 480px) {
  .player-content { padding: 68px 16px 28px; }
  .player-artwork { width: min(260px, 70vw); margin-bottom: 28px; border-radius: var(--radius-m); }
  .ctrl-play { width: 56px; height: 56px; }
  .ctrl-play svg { width: 22px; height: 22px; }
  .player-controls { gap: 16px; }
  .vol-slider-wrap { width: 80px; }
  .act-btn span { display: none; }
  .act-btn { padding: 9px 12px; }
}
@media (min-width: 768px) {
  .player-artwork { width: min(340px, 50vw); }
}