/* =============================================
   MUSIC CONTROLS
   ============================================= */

#music-control {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 182, 193, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
  font-size: 1.6rem;
  outline: none;
}

#music-control:hover {
  transform: scale(1.15) translateY(-2px);
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 182, 193, 0.7);
  box-shadow: 0 8px 25px rgba(232, 105, 138, 0.4), inset 0 1px 1px rgba(255,255,255,0.6);
}

#music-control:active {
  transform: scale(0.95);
}

#music-control.hidden {
  display: none !important;
}

#music-control.playing .music-icon {
  animation: music-bounce 1.5s ease-in-out infinite alternate;
}

#music-control.paused .music-icon {
  animation: none;
  opacity: 0.5;
  filter: grayscale(100%);
}

@keyframes music-bounce {
  0%   { transform: translateY(0) scale(1) rotate(-5deg); }
  50%  { transform: translateY(-4px) scale(1.1) rotate(5deg); }
  100% { transform: translateY(0) scale(1) rotate(-5deg); }
}

@media (max-width: 480px) {
  #music-control {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}