/* V8.4.6 — compact real playback controls, preserving the existing island. */
#global-player .player-extras {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}
#global-player .player-mute,
#global-player .player-mode-button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #bfc3cb;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease,background .18s ease,transform .18s ease;
}
#global-player .player-mute:hover,
#global-player .player-mode-button:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}
#global-player .player-mute:focus-visible,
#global-player .player-mode-button:focus-visible {
  outline: 2px solid #b8bec9;
  outline-offset: 2px;
}
#global-player .player-mute > :is(i,svg),
#global-player .player-mute > i > svg,
#global-player .player-mode-button > :is(i,svg),
#global-player .player-mode-button > i > svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
}
/* Always keep the original high-volume shape; strike it only when silent. */
#global-player .player-mute.is-muted::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 23px;
  height: 2px;
  left: 4px;
  top: 14px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(-46deg);
  box-shadow: 0 0 0 1px rgba(26,28,35,.75);
  pointer-events: none;
}
#global-player #player-volume {width: 60px;max-width:60px;flex:0 1 60px;}
#global-player .player-play-modes {display:inline-flex;align-items:center;gap:2px;flex:none;direction:ltr;}
#global-player .player-mode-button.is-active {color:#e9ebf0;background:rgba(210,216,227,.13);}
#global-player .player-mode-button.is-active::before {
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;bottom:2px;
}
#global-player #player-repeat .player-repeat-one {display:none;}
#global-player #player-repeat[data-repeat-mode="one"] .player-repeat-one {
  display:grid;place-items:center;position:absolute;bottom:7px;left:12px;
  width:8px;height:9px;font:800 9px/1 Arial,sans-serif;
  background:#282a30;color:#fff;border-radius:2px;
}
/* The closing state is visible until the exit keyframes and sound fade end.
   Its start and end match the existing lm-player-pop entrance animation. */
@keyframes lm846-player-exit {
  from {opacity:1;transform:translate(-50%,0) scale(1);}
  to   {opacity:0;transform:translate(-50%,26px) scale(.97);}
}
#global-player.player.is-closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: lm846-player-exit .42s cubic-bezier(.64,0,.78,0) both !important;
}
@media (min-width:761px) and (max-width:1040px) {
  #global-player #player-volume {width:48px;max-width:48px;}
  #global-player .player-mode-button {width:27px;height:27px;}
  #global-player .player-extras {gap:4px;}
}
@media (max-width:760px) {
  /* The mobile player has no room for a volume slider: keep modes accessible
     in a compact row by the close control without covering the progress bar. */
  #global-player #player-volume {display:none!important;}
  #global-player .player-extras {
    display:flex!important;position:absolute;top:6px;left:37px;right:auto;
    width:auto;gap:0;transform:none!important;
    z-index:2;
  }
  #global-player .player-play-modes {display:flex!important;gap:0;}
  #global-player .player-mode-button {width:24px;height:24px;border-radius:7px;}
  #global-player .player-mode-button > :is(i,svg),
  #global-player .player-mode-button > i > svg {width:12px;height:12px;}
  #global-player #player-repeat[data-repeat-mode="one"] .player-repeat-one {bottom:4px;left:10px;}
  /* Reserve a top row for mobile playback modes and the mute button. */
  #global-player.player {min-height:96px;padding-top:33px!important;padding-bottom:14px!important;}
  #global-player .player-mute {display:inline-flex!important;width:24px;height:24px;border-radius:7px;}
  #global-player .player-mute > :is(i,svg),
  #global-player .player-mute > i > svg {width:12px;height:12px;}
  #global-player .player-mute.is-muted::after {width:18px;left:3px;top:11px;height:1.5px;}
}
@media (prefers-reduced-motion:reduce) {
  #global-player.player.is-closing {animation:none!important;}
  #global-player .player-mute,#global-player .player-mode-button {transition:none!important;}
}
#global-player.player:not(.is-visible):not(.is-closing) {
  visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}
