/* The original compact Spotify player stays intact; controls belong below it. */
.spotify-notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 18px 20px; margin: 20px 0; border: 1px solid #465638; border-radius: 10px; background: var(--surface); }
.spotify-notice[hidden] { display: none; }
.spotify-notice-intro { min-width: 0; }
.spotify-notice strong { font-size: 18px; font-weight: 600; }
.spotify-notice-intro p { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.spotify-notice-link { grid-column: 1; justify-self: start; padding: 3px 0; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.spotify-notice-link:hover { color: var(--text); }
.spotify-notice > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.spotify-privacy-copy { color: var(--muted); font-size: 15px; line-height: 1.8; }
.spotify-privacy-copy a { text-decoration: underline; text-underline-offset: 3px; }
.act-list:has(.spotify-act) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
.act-list .spotify-act { display: block; padding: 0; overflow: hidden; background: #1f1f1f; border: 1px solid #3b3b3b; border-radius: 12px; }
.act-list .spotify-act > h3 { padding: 18px 18px 12px; color: #fff; font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -.4px; overflow-wrap: anywhere; }
.spotify-slot { min-height: 152px; margin: 0 16px; border-radius: 12px; overflow: hidden; background: #1f1f1f; }
.spotify-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #1f1f1f; }
.spotify-loading, .spotify-gate, .spotify-fallback { display: flex; min-height: 152px; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 16px; text-align: center; font-size: 14px; color: #c9c9c9; }
.spotify-gate .button, .spotify-fallback a { color: #fff; border: 1px solid #949494; background: transparent; font-size: 14px; }
.spotify-gate .button:hover, .spotify-fallback a:hover { background: #333; }
.spotify-gate .button { border-color: #626262; }
.spotify-gate-hint { font-size: 12px; color: #b3b3b3; }
.spotify-gate-hint a { text-decoration: underline; text-underline-offset: 3px; }
.spotify-gate-hint a:hover { color: #fff; }
.spotify-fallback a { padding: 9px 14px; border-radius: 6px; }
.spotify-voting { padding: 16px; }
.act-list .spotify-act .rating-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 8px; }
.act-list .spotify-act .rating-button { min-height: 70px; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 9px 4px; font-size: 14px; font-weight: 600; border-width: 2px; }
.act-list .spotify-act .rating-button > .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.act-list .spotify-act .rating-button > span { white-space: normal; line-height: 1.25; }
.act-list .spotify-act .rating-button:not(.selected) { color: #fff; border-color: #d6d6d6; background: transparent; }
.act-list .spotify-act .rating-button:not(.selected):hover { color: #fff; border-color: #fff; background: #353535; }
.act-list .spotify-act .rating-0.selected, .act-list .spotify-act .rating-1.selected { color: #1f1f1f; border-color: #fff; background: #fff; }
.act-list .spotify-act .rating-2.selected { color: var(--on-accent, #273617); border-color: var(--lime); background: var(--lime); }
@media (min-width: 700px) {
  .act-list:has(.spotify-act) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .spotify-notice { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
  .spotify-notice > button { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .act-list:has(.spotify-act) { display: grid; gap: 20px; margin-top: 20px; }
  .act-list .spotify-act > h3 { font-size: 20px; }
}