/* 499: align Tuner carets with the label baseline in both player states. */
body.single-player-ui .player-collection .works-chevron{
  position:relative!important;
  top:2px!important;
  transform:none!important;
}
body.single-player-ui .player-collection .works-selector[aria-expanded="true"] .works-chevron{
  transform:rotate(180deg)!important;
}
body.single-player-ui #player-expanded-browse .player-browse-chevron{
  position:relative!important;
  top:5px!important;
  transform:none!important;
}
body.single-player-ui #player-expanded-browse[aria-expanded="true"] .player-browse-chevron{
  transform:rotate(180deg)!important;
}
/* Source tooltip opens upward so it clears the artwork top edge. */
body.single-player-ui .panel-source-link[data-tooltip]::after{
  top:auto!important;
  bottom:calc(100% + 1px)!important;
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,1px)!important;
}
body.single-player-ui .panel-source-link[data-tooltip]:focus-visible::after{
  transform:translate(-50%,0)!important;
}
@media(hover:hover) and (pointer:fine){
  body.single-player-ui .panel-source-link[data-tooltip]:hover::after{
    transform:translate(-50%,0)!important;
  }
}
/* Mechanical Tuner response: only the needle moves. */
body.single-player-ui .tuner-gauge .tuner-needle{
  transform-box:view-box;
  transform-origin:21px 23px;
}
@keyframes tuner-needle-kick{
  0%{transform:rotate(0deg)}
  24%{transform:rotate(-22deg)}
  52%{transform:rotate(10deg)}
  74%{transform:rotate(-4deg)}
  100%{transform:rotate(0deg)}
}
@media(hover:hover) and (pointer:fine){
  body.single-player-ui .works-selector:hover .tuner-needle,
  body.single-player-ui #player-expanded-browse:hover .tuner-needle{
    animation:tuner-needle-kick .46s cubic-bezier(.2,.75,.3,1) both;
  }
}
@media(prefers-reduced-motion:reduce){
  body.single-player-ui .tuner-gauge .tuner-needle{animation:none!important}
}
/* Top-right controls: center tooltip directly beneath each icon. */
body.single-player-ui .top-controls [data-tooltip]::after{
  left:50%!important;
  right:auto!important;
  top:calc(100% + 1px)!important;
  bottom:auto!important;
  transform:translate(-50%,-1px)!important;
}
body.single-player-ui .top-controls [data-tooltip]:focus-visible::after{
  transform:translate(-50%,0)!important;
}
@media(hover:hover) and (pointer:fine){
  body.single-player-ui .top-controls [data-tooltip]:hover::after{
    transform:translate(-50%,0)!important;
  }
}