/* Match the landing utilities; keep the landscape visible behind the player. */
#spotify-player {
  width: min(480px, calc(100vw - 2rem)); max-width: none;
  background: rgba(7,8,10,.28); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--line); border-radius: 24px;
  padding: 24px 58px 24px 24px; flex-wrap: wrap; gap: 16px;
  color: var(--ink-soft); transition: opacity .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
#spotify-player [hidden] { display: none !important; }
#sp-info { min-width: 140px; flex: 1; }
#sp-track { font-family: 'Newsreader',serif; font-size: 1.25rem; color: var(--ink); }
#sp-artist { white-space: normal; line-height: 1.6; }
#sp-hint, #sp-close, #spotify-player .sp-btn, #sp-link {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7,8,10,.14); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%;
  transition: color .35s, background .35s, border-color .35s;
}
#sp-hint { right: 1.8rem; bottom: 4.3rem; font-size: 1.15rem; }
#sp-hint[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
#sp-close { position: absolute; top: 12px; right: 12px; cursor: pointer; font-size: 1.25rem; }
#sp-connect, #sp-disconnect {
  position: static; opacity: 1; width: auto; height: auto; min-height: 44px;
  padding: 8px 16px; background: rgba(7,8,10,.14); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-soft); font: .65rem 'DM Mono',monospace; cursor: pointer;
}
#spotify-player button:disabled { opacity: .35; cursor: default; }
#spotify-player button:focus-visible, #sp-hint:focus-visible, #sp-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
#sp-notice { right: 1.8rem; bottom: 7.6rem; max-width: min(300px, calc(100vw - 3.6rem)); color: var(--ink); }
@media (max-width: 768px) {
  #spotify-player { margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { #spotify-player, #spotify-player *, #sp-hint { transition: none; } }