/**
 * Mobile Player Override – loads AFTER play-block CSS (priority 20).
 * Single source of truth for mobile mini bar + expanded full-screen player.
 * Desktop-only #plyr-playlist rules live in style.css (min-width: 1025px).
 *
 * DOM structure (plyr-theme-2, audio) – confirmed via console:
 *
 *   #plyr-playlist.fixed-bottom.plyr-theme-2
 *     ├── .immersive-player__handle     (swipe indicator, added by JS)
 *     ├── .plyr.plyr--audio
 *     │     ├── .plyr__video-wrapper    (may be empty for audio)
 *     │     └── .plyr__controls
 *     │           ├── .wavyl-poster-halo  ← optional wrapper (immersive-player.js)
 *     │           │     └── .plyr__poster
 *     │           ├── .plyr__progress__container
 *     │           ├── .plyr-control-left
 *     │           │     ├── (.plyr__poster  ← may exist here too, hidden in expanded)
 *     │           │     └── .plyr__info
 *     │           │           ├── .plyr__title
 *     │           │           └── .plyr__author
 *     │           ├── .plyr-control-center
 *     │           │     └── .plyr-control-center-top
 *     │           │           ├── [shuffle] [prev] [play] [next] [repeat]
 *     │           ├── .plyr-control-right
 *     │           │     ├── time, volume, like, visualizer, list …
 *     │           ├── [data-plyr="like"]      ← loose direct children
 *     │           ├── .btn-visualizer         ← loose direct children
 *     │           └── .btn-lyrics             ← loose direct children
 *     ├── .immersive-player__close      (minimize btn, added by JS)
 *     ├── .immersive-player__backdrop   (added by JS)
 *     └── .plyr-list-wrap
 */

@media (max-width: 1024px) {

  /* ═══════════════════════════════════════════════════════════
     1.  MINI BAR  —  compact 64px bottom strip
         [handle]
         [poster 44px] [title / artist] [▶ play]
     ═══════════════════════════════════════════════════════════ */

  /* ── Container ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 64px !important;
    max-height: 64px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 1000;
  }

  /* ── .plyr fills the bar ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ── Hide video-wrapper & audio pseudo ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__video-wrapper,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr--audio:before {
    display: none !important;
  }

  /* ── Controls: single horizontal row ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100% !important;
    padding: 8px 12px !important;
    gap: 0 !important;
    opacity: 1 !important;
    position: relative !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls > * {
    opacity: 1 !important;
  }

  /* ── Flatten the three column wrappers ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-control-left,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-control-center,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-control-right {
    display: contents !important;
  }

  /* ── Poster thumbnail (left); .wavyl-poster-halo wraps poster (immersive-player.js) ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls > .plyr__poster {
    display: block !important;
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 10px 0 0 !important;
    order: 1 !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls .wavyl-poster-halo {
    position: relative !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
    margin: 0 10px 0 0 !important;
    order: 1 !important;
    isolation: isolate !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls .wavyl-poster-halo .wavyl-poster-halo__glow {
    position: absolute !important;
    z-index: 0 !important;
    inset: -3px !important;
    border-radius: 7px !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(14px) !important;
    opacity: 0.32 !important;
    transform: scale(1.07) !important;
    pointer-events: none !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__controls > .wavyl-poster-halo .plyr__poster {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* ── Track info (fills middle) ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin-right: 10px !important;
    padding: 0 !important;
    order: 2 !important;
    width: auto !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__title,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__author {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.3 !important;
    width: auto !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__title {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__author {
    font-size: 12px !important;
    opacity: 0.6 !important;
  }

  /* ── Play button (right) ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="play"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: 3 !important;
  }

  /* ── Hide EVERYTHING else ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="prev"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="next"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="like"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="visualizer"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .btn-visualizer,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="lyrics"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .btn-lyrics,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="shuffle"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="repeat"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="mute"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="download"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="purchase"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="captions"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="pip"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="airplay"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="video"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="fullscreen"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="settings"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="list"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="mini"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="max"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="rewind"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) [data-plyr="fast-forward"],
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__volume,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__menu,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__time,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__progress__container,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr__progress,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-duration-wrap,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-control-center-top,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-control-center-bottom,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .add_to_cart_button,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .immersive-player__close,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .immersive-player__backdrop,
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .plyr-list-wrap {
    display: none !important;
  }

  /* ── Drag handle ── */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) .immersive-player__handle {
    display: block !important;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 5;
    pointer-events: none;
  }


  /* ═══════════════════════════════════════════════════════════
     2.  EXPANDED FULL-SCREEN PLAYER
     ═══════════════════════════════════════════════════════════

     Matches production layout (top → bottom):

       [wavyl logo]   [˅ close]      (absolute corners)
       ┌──────────────────────┐
       │                      │
       │   ┌──────────────┐   │
       │   │   ARTWORK    │   │   ~280px centered
       │   └──────────────┘   │
       │                      │
       │   Title (wraps)      │
       │      Artist          │
       │                      │
       │  ✕  ◁  ⏸  ▷  ↻      │   shuffle prev play next repeat
       │                      │
       │  ♡  🔊  📄  ☰        │   like, volume, lyrics, queue
       │                      │
       ├──────────────────────┤
       │ 0:04 ═══════ 0:00   │   progress bar at BOTTOM
       └──────────────────────┘
  */

  /* ── Container: covers viewport ── */
  body #plyr-playlist.immersive-player.is-expanded.fixed-bottom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
    /* Allow poster halo blur to reach screen edges (was clipping at box bounds) */
    overflow: visible !important;
  }

  /* ── .plyr fills the container ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* ── Hide video-wrapper (empty for audio tracks) ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr__video-wrapper {
    display: none !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr--audio:before {
    display: none !important;
  }

  /* ── Controls: COLUMN layout for vertical stacking ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 3.5rem 1.5rem 1.5rem !important;
    opacity: 1 !important;
    position: relative !important;
    gap: 0 !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > * {
    opacity: 1 !important;
  }

  /* ── ROW 1: Artwork + soft color halo (.wavyl-poster-halo from immersive-player.js) ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls .wavyl-poster-halo {
    position: relative !important;
    display: block !important;
    width: 280px !important;
    max-width: 75vw !important;
    height: 280px !important;
    max-height: 75vw !important;
    margin: 0 auto 1rem !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    isolation: isolate !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls .wavyl-poster-halo .wavyl-poster-halo__glow {
    position: absolute !important;
    z-index: 0 !important;
    left: 5% !important;
    right: 5% !important;
    top: 5% !important;
    bottom: 5% !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(42px) saturate(1.15) !important;
    opacity: 0.52 !important;
    transform: scale(1.17) !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
  }
  .wavyl-poster-halo--empty .wavyl-poster-halo__glow {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls .wavyl-poster-halo > .plyr__poster {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }
  /* Fallback if halo script has not wrapped yet */
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > .plyr__poster {
    display: block !important;
    width: 280px !important;
    max-width: 75vw !important;
    height: 280px !important;
    max-height: 75vw !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 auto 1rem !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  /* ── ROW 2: Track info ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-left {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    order: 2 !important;
    flex-shrink: 0 !important;
    padding: 0 0 0.5rem !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1rem !important;
    width: auto !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    line-height: 1.3 !important;
    max-width: 85vw !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__author {
    font-size: 14px !important;
    opacity: 0.6 !important;
    margin-top: 2px !important;
  }
  /* Hide small poster inside plyr-control-left (if any) */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-left .plyr__poster {
    display: none !important;
  }

  /* ── ROW 3: Playback buttons ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    padding: 0.75rem 0 !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: auto !important;
  }
  /* Explicitly show all playback buttons */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="shuffle"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="prev"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="play"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="next"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="repeat"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Larger play button */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-center [data-plyr="play"] {
    transform: scale(1.4) !important;
    margin: 0 0.75rem !important;
  }

  /* ── ROW 4: Secondary actions (heart, volume, lyrics, queue) ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    order: 4 !important;
    flex-shrink: 0 !important;
    gap: 2rem !important;
    padding: 0.5rem 0 !important;
  }
  /* Hide ALL by default */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right > * {
    display: none !important;
  }
  /* Show: heart, volume, lyrics, queue – matching production */
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right [data-plyr="like"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1 !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right [data-plyr="mute"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right .plyr__volume {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right [data-plyr="lyrics"],
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right .btn-lyrics {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 3 !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr-control-right [data-plyr="list"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 4 !important;
  }

  /* ── ROW 5 (BOTTOM): Progress bar – pushed to bottom with margin-top:auto ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress__container {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 20px !important;
    order: 99 !important;
    margin-top: auto !important;
    padding: 0.5rem 0 0.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    gap: 0.5rem !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress {
    display: flex !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress input[type="range"],
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress .plyr__progress__buffer,
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress .plyr__tooltip {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Show time displays inside progress container */
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress__container .plyr__time,
  body #plyr-playlist.immersive-player.is-expanded .plyr__progress__container .plyr-duration-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0 !important;
  }

  /* ── Loose direct-child buttons: hide ALL ── */
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > button:not(.immersive-player__close),
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > .plyr__control,
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > .btn-lyrics,
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > .btn-visualizer,
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > [data-plyr="like"],
  body #plyr-playlist.immersive-player.is-expanded .plyr__controls > [data-plyr="visualizer"] {
    display: none !important;
    order: 99 !important;
  }

  /* ── Wavyl logo – top-left of expanded player (clickable, PJAX nav) ── */
  body #plyr-playlist.immersive-player.is-expanded > .immersive-player__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 100 !important;
    width: 32px !important;
    height: 32px !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  body #plyr-playlist.immersive-player.is-expanded > .immersive-player__logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Hide logo in mini bar */
  body #plyr-playlist.fixed-bottom:not(.is-expanded) > .immersive-player__logo {
    display: none !important;
  }

  /* ── Close (minimize) button – chevron-down, top-right ── */
  body #plyr-playlist.immersive-player.is-expanded > .immersive-player__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100 !important;
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
  }
  body #plyr-playlist.immersive-player.is-expanded > .immersive-player__close:active {
    color: #fff !important;
  }

  /* ── Backdrop ── */
  body #plyr-playlist.immersive-player.is-expanded > .immersive-player__backdrop {
    display: block !important;
    position: absolute !important;
    inset: 0;
    z-index: 0;
  }

  /* ── Hide handle + playlist in expanded ── */
  body #plyr-playlist.immersive-player.is-expanded .immersive-player__handle,
  body #plyr-playlist.immersive-player.is-expanded .plyr-list-wrap {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile expanded "now playing" view (#wavyl-mobile-expanded-player)
   Full-screen view with artwork, progress, transport, Visualizer/Lyrics buttons.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #wavyl-mobile-expanded-player {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    overflow: auto;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-backdrop {
    position: absolute;
    inset: 0;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-container {
    position: relative;
    z-index: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding-top: 3rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-artwork {
    width: 200px;
    height: 200px;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: #333;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-align: center;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-artist {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-progress {
    width: 100%;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-time-current,
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-time-duration {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    min-width: 2.5rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-progress-rail {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-progress-bar {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-controls button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-actions {
    display: flex;
    gap: 0.75rem;
  }
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-btn-visualizer,
  #wavyl-mobile-expanded-player .wavyl-mobile-expanded-btn-lyrics {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
  }

  /* Blurred halo is motion-heavy for some users */
  @media (prefers-reduced-motion: reduce) {
    .wavyl-poster-halo__glow {
      display: none !important;
    }
  }
}