/* =====================================================
   WILDVERSE PLAYER SHELL — VISUALIZER
   Compact desktop-safe visualizer
===================================================== */

#wvNowDeck.wv-player-shell #wvNowVisualizer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;

  width: 118px;
  min-width: 118px;
  max-width: 118px;
  height: 42px;
  padding: 0.25rem 0.46rem;

  flex: 0 0 118px;

  border: 1px solid rgba(125, 249, 255, 0.12);
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%, rgba(125, 249, 255, 0.12), transparent 66%),
    rgba(125, 249, 255, 0.045);

  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(125, 249, 255, 0.08);
}

#wvNowDeck.wv-player-shell #wvNowVisualizer span {
  display: block;
  width: 5px;
  height: 7px;

  border-radius: 999px;
  opacity: 0.32;

  background:
    linear-gradient(180deg, var(--wv-player-pink) 0%, var(--wv-player-cyan) 72%, #ffffff 100%);

  box-shadow:
    0 0 8px rgba(125, 249, 255, 0.28),
    0 0 14px rgba(255, 79, 216, 0.12);
}

#wvNowDeck.wv-player-shell.is-playing #wvNowVisualizer span,
#wvNowDeck.wv-player-shell #wvNowVisualizer.is-active span {
  opacity: 1;
  animation: wv-shell-bars 0.9s ease-in-out infinite;
}

#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(2) { animation-delay: 0.06s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(3) { animation-delay: 0.12s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(4) { animation-delay: 0.18s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(5) { animation-delay: 0.24s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(6) { animation-delay: 0.3s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(7) { animation-delay: 0.36s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(8) { animation-delay: 0.42s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(9) { animation-delay: 0.48s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(10) { animation-delay: 0.54s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(11) { animation-delay: 0.6s; }
#wvNowDeck.wv-player-shell #wvNowVisualizer span:nth-child(12) { animation-delay: 0.66s; }

@keyframes wv-shell-bars {
  0%, 100% {
    height: 7px;
    filter: brightness(0.9);
  }

  50% {
    height: 30px;
    filter: brightness(1.38);
  }
}