/* === SPOTIFY PLAYER — EMO BOTTOM BAR + SONG CARDS === */

/* Song list on links page */
.songs-section {
  margin-top: 32px;
}

.songs-title {
  color: #ff0033;
  font-size: 1.35rem;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1a1a1a;
  filter: url(#crayon);
  animation: slideInLeft 0.5s ease-out 0.4s both;
}

.song-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 0, 51, 0.03);
  padding: 14px 20px;
  margin-bottom: 10px;
  border: 2px solid #1a1a1a;
  border-left: 4px solid;
  cursor: pointer;
  filter: url(#crayon);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  animation: fadeInUp 0.4s ease-out both;
  text-decoration: none;
}

.song-card:nth-child(2) { animation-delay: 0.1s; }
.song-card:nth-child(3) { animation-delay: 0.2s; }
.song-card:nth-child(4) { animation-delay: 0.3s; }
.song-card:nth-child(5) { animation-delay: 0.4s; }
.song-card:nth-child(6) { animation-delay: 0.5s; }
.song-card:nth-child(7) { animation-delay: 0.6s; }
.song-card:nth-child(8) { animation-delay: 0.7s; }

.song-card:nth-child(odd) {
  border-left-color: #ff0033;
}

.song-card:nth-child(even) {
  border-left-color: #cc00ff;
}

.song-card:hover {
  border-color: #ff3366;
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(255, 0, 51, 0.2);
}

.song-card.song-active {
  border-color: #ff0033;
  background: rgba(255, 0, 51, 0.08);
  box-shadow: 0 0 20px rgba(255, 0, 51, 0.3);
}

.song-card .song-icon {
  font-size: 2rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.song-card:hover .song-icon {
  transform: scale(1.2);
  animation: jiggle 0.5s ease-in-out;
}

.song-card.song-active .song-icon::after {
  content: " ♪";
  animation: blink 0.8s step-end infinite;
}

.song-card .song-info {
  flex: 1;
  min-width: 0;
}

.song-card .song-name {
  color: #ff3366;
  font-size: 1.1rem;
  font-weight: bold;
}

.song-card:nth-child(even) .song-name {
  color: #cc00ff;
}

.song-card.song-active .song-name {
  color: #ff0033;
  animation: emoGlow 3s ease-in-out infinite;
}

.song-card .song-artist {
  color: #666;
  font-size: 0.9rem;
}

.song-card .song-play-hint {
  color: #444;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: color 0.3s;
}

.song-card:hover .song-play-hint {
  color: #ff3366;
}

/* Fixed bottom player bar */
#spotify-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  background: #0a0a0a;
  border-top: 3px solid #ff0033;
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
  filter: url(#crayon);
}

#spotify-player-bar.active {
  transform: translateY(0);
}

.player-inner {
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.player-now-playing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  min-width: 180px;
  flex-shrink: 0;
}

.player-now-playing .player-label {
  color: #ff0033;
  font-size: 0.8rem;
  white-space: nowrap;
  animation: emoGlow 4s ease-in-out infinite;
}

#player-title {
  color: #ff3366;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-embed {
  flex: 1;
  min-width: 0;
}

.player-embed iframe {
  display: block;
  width: 100%;
  height: 80px;
  border: none;
  border-radius: 0;
}

#player-close {
  color: #ff0033;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 8px 16px;
  flex-shrink: 0;
  transition: color 0.3s, transform 0.3s;
  font-family: 'Gloria Hallelujah', cursive;
}

#player-close:hover {
  color: #ff66aa;
  transform: rotate(90deg) scale(1.2);
}

/* Add bottom padding to body when player is active so content isn't hidden */
body.player-open {
  padding-bottom: 90px;
}

/* Clickable song name in blog posts */
.song-link {
  color: #ff3366;
  cursor: pointer;
  border-bottom: 2px solid #ff3366;
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}

.song-link:hover {
  color: #ff66aa;
  border-color: #ff66aa;
  animation: jiggle 0.4s ease-in-out;
}

@media (max-width: 700px) {
  .player-now-playing {
    display: none;
  }
}