/* Final desktop player polish: adaptive cover art fill + prominent Visuals control. */
@media (min-width: 900px) {
  /*
   * Adaptive cover treatment:
   * - foreground artwork always uses contain (never crop, never stretch)
   * - the same cover becomes a blurred edge-fill behind it so portrait/square/
   *   landscape artwork still visually fills the entire hero artwork card.
   */
  html.nw-exact-ready .nw-exact-player[data-visual-mode] .nw-exact-cover {
    overflow: hidden !important;
    border-radius: 16px !important;
    isolation: isolate;
    background: rgba(2, 4, 11, .96) !important;
    box-shadow:
      0 0 0 1px rgba(255, 71, 214, .34),
      0 0 22px rgba(206, 51, 255, .16),
      0 20px 58px rgba(0, 0, 0, .48) !important;
  }

  html.nw-exact-ready .nw-exact-player[data-visual-mode] .nw-exact-cover::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(180deg, rgba(2, 3, 10, .08), rgba(2, 3, 10, .28)),
      var(--exact-cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(24px) saturate(1.28) brightness(.62);
    transform: scale(1.12);
    opacity: .94;
  }

  html.nw-exact-ready .nw-exact-player[data-visual-mode] .nw-exact-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 48%),
      linear-gradient(90deg, rgba(2,4,11,.24), transparent 18%, transparent 82%, rgba(2,4,11,.24));
    box-shadow: inset 0 0 34px rgba(0, 0, 0, .26);
  }

  html.nw-exact-ready .nw-exact-player[data-visual-mode] .nw-exact-cover img {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 15px !important;
    background: transparent !important;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.34));
  }

  /* Approved prominent Visuals pill. It remains the same functional button/picker trigger. */
  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) {
    min-height: 78px !important;
    border: 1px solid rgba(255, 85, 224, .9) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 15% 18%, rgba(176, 76, 255, .30), transparent 35%),
      linear-gradient(115deg, rgba(34, 13, 72, .98), rgba(9, 10, 28, .98) 58%, rgba(15, 29, 59, .98)) !important;
    box-shadow:
      0 0 0 2px rgba(122, 74, 255, .16),
      0 0 22px rgba(255, 53, 216, .42),
      0 0 42px rgba(72, 147, 255, .22),
      inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    transform: translateZ(0);
    overflow: visible !important;
    isolation: isolate;
    animation: nwVisualButtonBreath 2.8s ease-in-out infinite;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3)::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -5px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(95deg, rgba(255, 54, 218, .42), rgba(117, 70, 255, .26), rgba(71, 176, 255, .42));
    filter: blur(12px);
    opacity: .62;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3)::after {
    content: '⌄';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #f6d7ff;
    font-size: 15px;
    opacity: .92;
    text-shadow: 0 0 10px rgba(224, 86, 255, .72);
    transition: transform .2s ease;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3).picker-open::after {
    transform: translateY(-50%) rotate(180deg);
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) > svg {
    width: 32px !important;
    height: 32px !important;
    color: #efb6ff !important;
    filter: drop-shadow(0 0 9px rgba(230, 79, 255, .72));
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) > div {
    gap: 4px !important;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) strong {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-shadow: 0 0 14px rgba(255, 100, 226, .38);
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) span {
    color: #c9b6e8 !important;
    font-size: 8.5px !important;
    letter-spacing: .03em;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) .nw-exact-switch {
    margin-right: 22px;
  }

  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3):hover,
  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3).picker-open {
    border-color: rgba(255, 157, 239, 1) !important;
    box-shadow:
      0 0 0 2px rgba(130, 83, 255, .24),
      0 0 32px rgba(255, 55, 218, .58),
      0 0 58px rgba(65, 156, 255, .32),
      inset 0 1px 0 rgba(255, 255, 255, .20) !important;
  }

  @keyframes nwVisualButtonBreath {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.10); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nw-exact-ready .nw-exact-audio-row > button:nth-child(3) {
    animation: none !important;
  }
}