/* Keep the listener's controls reachable on narrow and short screens. */
.focus-scene{min-height:0}
.focus-top{top:max(18px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
.focus-bottom{bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:1000px){
  .player-shell{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding-block:10px}
  .player-label{grid-column:1;grid-row:1}
  .player-options{grid-column:2;grid-row:1;position:static;display:flex;align-items:center}
  .player-center{grid-column:1/-1;grid-row:2;padding-top:0}
  body.player-active{padding-bottom:180px}
}
@media(max-width:650px){
  .player-shell{width:calc(100% - 24px);grid-template-columns:minmax(0,1fr);padding:10px 0 calc(10px + env(safe-area-inset-bottom));gap:6px;min-height:0}
  .player-label{grid-column:1;grid-row:1;justify-content:center;gap:10px}
  .player-track-details strong{font-size:14px}.player-tiny{font-size:8px}
  .player-center{grid-column:1;grid-row:2}
  .player-options{grid-column:1;grid-row:3;position:static;display:flex;justify-content:center;gap:10px}
  .player-options select{display:block!important;min-height:44px;width:55px}
  .player-options .close-player{display:grid!important;min-height:44px;width:44px}
  .player-options #playerVolume{display:block!important;width:64px;flex:0 0 64px}
  .player-options .volume-icon{display:block;width:16px;flex:0 0 16px}
  .focus-activate{min-height:44px;min-width:44px;justify-content:center}
  .player-controls{gap:20px;margin:0 0 3px}.player-play,.player-controls .mini-icon{min-width:44px;min-height:44px}
  body.player-active{padding-bottom:220px}
  .focus-close{min-height:44px}.focus-top{gap:8px}.focus-top>span{max-width:115px}
  .focus-bottom{width:calc(100% - 24px);justify-content:center;flex-wrap:nowrap;gap:10px}
  .focus-center{max-width:100%;padding-inline:12px}.focus-center h2{overflow-wrap:anywhere}
}
@media(max-height:450px){
  .focus-center{transform:scale(.7);transform-origin:center}
  .focus-eye{margin-bottom:16px}
  .focus-top{top:6px}.focus-bottom{bottom:6px}
}

.card-micro{flex-wrap:wrap;gap:6px 12px}.card-runtime{white-space:nowrap}
.card-micro{display:flex;justify-content:space-between;align-items:baseline}