/* ==========================================================================
   Revision 19 — artwork containment + width-driven stacked/two-pane video
   ========================================================================== */

/* The neon horse artwork is branding, not wallpaper to crop. Always preserve
   the complete image inside the viewport and let true black fill any surplus
   space (most noticeably at the sides of an ultrawide display). */
.site-background {
  background-color: #000 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* In every layout where the document itself may scroll, player geometry comes
   from the width of its grid track. Do not let any older viewport-height rule
   make the stage or Now Playing card narrower than the column at page load. */
.player-page .player-layout.layout-two-pane .player-stage,
.player-page .player-layout.layout-two-pane .now-playing-card,
.search-result-page .player-layout.layout-search-stack .player-stage,
.search-result-page .player-layout.layout-search-stack .now-playing-card,
.search-result-page .player-layout.layout-search-split .player-stage,
.search-result-page .player-layout.layout-search-split .now-playing-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.player-page .player-layout.layout-two-pane .player-stage,
.search-result-page .player-layout.layout-search-stack .player-stage,
.search-result-page .player-layout.layout-search-split .player-stage {
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
}

@media (max-width: 900px) {
  body.player-page .player-stage,
  body.search-result-page .player-stage {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}