#web-player-more[hidden] { display: none !important; }

@media (max-width: 900px) {
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #controls,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .control-cluster { display: none !important; }

  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-dock {
    position: relative; z-index: 40; display: flex; flex: 0 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; width: 100%; min-width: 0; height: 124px; max-height: 140px;
    box-sizing: border-box; padding: 9px 8px 8px; overflow: visible;
    border: 1px solid var(--surface-edge, #ffffff20); border-radius: 24px;
    background: var(--surface-glass, #15191fee); box-shadow: var(--surface-shadow, 0 10px 28px #0004);
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-dock #progress-bar {
    order: 0; flex: 0 0 4px; position: relative; width: calc(100% - 20px); height: 4px;
    min-height: 4px; margin: 4px 10px 2px; touch-action: none;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-dock #progress-bar::before { inset: -20px 0; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-time-row {
    display: flex; align-items: center; justify-content: center; flex: 0 0 24px; height: 24px; min-width: 0; pointer-events: none;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-time-row #time-display {
    display: flex !important; align-items: center; justify-content: center; width: 100%; height: 24px; min-height: 0;
    margin: 0; padding: 0; color: rgba(255,255,255,.52); font-size: 10px; line-height: 24px; letter-spacing: .8px;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-controls-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: center;
    gap: 0; flex: 1 0 56px; min-width: 0; width: 100%; height: 56px;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-controls-row > .ctrl-btn {
    display: inline-flex !important; position: relative; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; min-width: 44px; max-width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0;
    border-radius: 50%; color: rgba(255,255,255,.80); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-controls-row > #play-btn {
    width: 56px; min-width: 56px; height: 56px; min-height: 56px; margin-inline: auto;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-controls-row > #web-player-more-btn[aria-expanded="true"] {
    color: rgba(var(--surface-accent, 184,235,216), 1); border-color: rgba(var(--surface-accent, 184,235,216), .4);
    background: rgba(var(--surface-accent, 184,235,216), .12);
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more {
    position: absolute; z-index: 150; inset: auto -1px calc(100% + 10px); box-sizing: border-box;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px;
    max-height: min(56dvh, calc(var(--web-viewport-height, 100dvh) - var(--web-mobile-top, 72px) - var(--web-nav-height, 64px) - 158px));
    padding: 12px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--surface-edge, #ffffff22); border-radius: 22px;
    background: var(--surface-glass, #161a21fa); box-shadow: var(--surface-shadow, 0 16px 44px #0007);
    backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15);
    animation: mobile-player-more-enter 180ms ease-out;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-heading {
    grid-column: 1 / -1; padding: 2px 2px 4px; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: #ffffff88;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-item { min-width: 0; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-item-source {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 4px 10px; border: 1px solid #ffffff16; border-radius: 14px; background: #ffffff06;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-item-source > .web-player-more-label { order: -1; color: #ffffffa0; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more #control-title-badges {
    display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; gap: 8px;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .control-source-chip {
    min-height: 44px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 11px;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-heart-badges { display: none !important; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-player-more-item > div {
    display: block !important; width: 100%; min-width: 0; margin: 0;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-player-more-item > .ctrl-btn,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-player-more-item > div > .ctrl-btn {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    width: 100%; max-width: none; min-width: 0; min-height: 62px; height: 62px; padding: 8px 3px; margin: 0;
    border: 1px solid #ffffff16; border-radius: 14px; font-size: 13px; line-height: 1.3;
    background: #ffffff06; color: #ffffffc9; box-shadow: inset 0 1px 0 #ffffff0c; touch-action: manipulation;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-player-more-label {
    display: block; max-width: 100%; font-size: 10px; line-height: 1.4; white-space: nowrap;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more #quality-control .web-player-more-label { display: none; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .volume-control::before,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .quality-control::before,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .lyric-timing-control::before { display: none !important; }
  /* Inline expansion is confined to More; the fixed-height dock never moves.
     The connected quality menu is portaled to body and keeps its own positioning. */
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .volume-popover,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .lyric-timing-popover {
    display: none; position: relative !important; inset: auto !important; width: 100%; min-width: 0; max-height: none;
    box-sizing: border-box; margin-top: 8px; transform: none !important; opacity: 1; pointer-events: auto;
    border-radius: 14px; background: #ffffff06; box-shadow: none;
  }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-item:has(.volume-control.open),
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] .web-player-more-item:has(.web-mobile-player-timing-open) { grid-column: 1 / -1; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .volume-control.open .volume-popover,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more .web-mobile-player-timing-open:not(.closing) .lyric-timing-popover { display: grid; }
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-more button:focus-visible,
  body.web-adapter.web-mobile-active.web-mobile-player-controls[data-mobile-page="player"] #web-player-controls-row button:focus-visible {
    outline: 2px solid rgba(var(--surface-accent, 184,235,216), .9); outline-offset: 2px;
  }
}
@keyframes mobile-player-more-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #web-player-more { animation: none !important; } }