/* R131 additive scoped controls. Existing music.css stays unchanged on production. */
.player .player-controls{display:flex;align-items:center;flex:0 0 auto;gap:7px;min-width:0}
.player .player-controls .control{display:inline-grid;place-items:center;flex:none;
  width:44px;height:44px;min-width:44px;min-height:44px}
.player .player-controls #play-button{width:48px;height:48px}
.player .player-controls .control-next,.player .player-controls .control-shuffle{
  background:#112026;color:#e7bd79;border:1px solid #8b7043;border-radius:50%
}
.player .player-controls .control svg{width:21px;height:21px;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.player .player-controls .control-next svg path:first-child{fill:currentColor;stroke:none}
.player .player-controls .control-shuffle[aria-pressed="true"]{
  background:#ddad6f;color:#10191b;border-color:#f7d69d;
  box-shadow:0 0 0 2px #ddad6f55
}
.player .player-controls .control-shuffle[aria-pressed="true"]:hover{background:#f2c88c}
.player .player-controls button:focus-visible{outline:3px solid #ffe0a3;outline-offset:3px}
.player .player-controls button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:760px){
 .player .player-controls{gap:5px}
 .player .player-controls .control,.player .player-controls #play-button{
   width:39px;height:39px;min-width:39px;min-height:39px
 }
 .player .player-controls .control svg{width:18px;height:18px}
 .player-caption{min-width:80px}
}
@media(max-width:390px){
 .player{grid-template-columns:40px minmax(0,1fr) auto;
   grid-template-rows:auto auto;column-gap:7px;row-gap:5px}
 .player .player-controls{grid-area:1/3/2/4;align-self:center;gap:4px}
 .player .player-controls .control,.player .player-controls #play-button{
   grid-area:auto;width:36px;height:38px;min-width:36px;min-height:38px
 }
 .player .player-controls #play-button{border-radius:50%}
 #seek{grid-area:2/2/3/4;max-width:100%}
 .player-caption{grid-area:1/2/2/3;min-width:0;max-width:100%}
 .player-caption strong{font-size:12px;overflow-wrap:anywhere}
}
@media(max-width:320px){
 .player{padding-left:8px;padding-right:8px;column-gap:5px}
 .player-art{width:34px;height:34px}
 .player .player-controls{gap:3px}
 .player .player-controls .control,.player .player-controls #play-button{
   width:33px;height:36px;min-width:33px;min-height:36px
 }
 .player .player-controls .control svg{width:16px;height:16px}
}


/* R133 Owner Visual accessibility correction: the actual R131 mobile
   screenshot shows small Next/Shuffle buttons. Preserve native controls and
   JS; enlarge hit targets only. Appended AFTER existing R131 CSS so even
   the narrower 390px/320px rules cannot shrink buttons below 44x44 CSS px.
   Deliberately no overflow hiding or clipping. */
@media(max-width:760px){
 .player .player-controls .control,
 .player .player-controls #play-button{
   width:44px;height:44px;min-width:44px;min-height:44px;
   touch-action:manipulation;
   -webkit-tap-highlight-color:transparent;
 }
 .player .player-controls .control svg{
   width:20px;height:20px;
 }
 .player .player-controls .control:focus-visible{
   outline:3px solid #ffe0a3;outline-offset:2px;
 }
}
@media(max-width:390px){
 .player .player-controls{gap:3px}
 .player .player-caption{min-width:0}
 .player .player-caption strong{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:320px){
 .player{column-gap:4px;padding-left:8px;padding-right:8px}
 .player .player-controls{gap:2px}
 .player .player-controls .control,
 .player .player-controls #play-button{
   width:44px;height:44px;min-width:44px;min-height:44px;
 }
 .player .player-controls .control svg{width:19px;height:19px}
}