/* Keep every theme fitted to the available window, without changing its layout. */
html[data-theme] .shell{width:100%;max-width:none}

@media (min-width:851px){
  html[data-theme] .shell{
    display:flex;flex-direction:column;
    height:100vh;height:100dvh;min-height:600px;overflow:visible;
  }
  html[data-theme] .top,html[data-theme] .footer{flex:0 0 auto}
  html[data-theme] .layout{
    flex:1 1 0;min-height:0;height:auto;
    grid-template-rows:minmax(0,1fr) auto;
  }
  html[data-theme] .stage{
    width:auto;height:auto;min-width:0;min-height:0;aspect-ratio:auto;
    align-self:stretch;justify-self:stretch;
  }
  html[data-theme] .side,html[data-theme] .theme-rail{min-height:0}
  html[data-theme] .playlist{min-height:0;max-height:none}
  html[data-theme] .tech-monitor{min-height:0;overflow:auto}
}

/* At intermediate widths, allow the player controls to wrap instead of clipping. */
@media (min-width:851px) and (max-width:1200px){
  html[data-theme] .controlrow{flex-wrap:wrap}
}

/* On short windows, an expanded options panel can grow the page if needed. */
@media (min-width:851px) and (max-height:720px){
  html[data-theme] .shell:has(#compatPanel[open]){min-height:720px}
}

/* Phones and tablets retain a naturally scrolling, single-column layout. */
@media (max-width:850px){
  html[data-theme] .layout{height:auto;min-height:0}
  html[data-theme] .stage{
    width:100%;max-width:100%;height:auto;min-width:0;min-height:220px;aspect-ratio:16/9;
  }
  html[data-theme="olivier"] .top{height:auto}
}

/* Fit the empty-state prompt inside the video area on small or short screens. */
@media (max-width:520px), (min-width:851px) and (max-height:720px){
  html[data-theme] .empty-content{max-width:95%;padding:10px 16px}
  html[data-theme] .empty-content .play-icon{width:42px;height:42px;margin:0 auto 8px}
  html[data-theme] .empty-content .play-icon svg{width:20px;height:20px}
  html[data-theme] .empty-content h2{font-size:20px;margin:0 0 6px}
  html[data-theme] .empty-content p{font-size:11px;line-height:1.35;margin:0 0 8px}
  html[data-theme] .empty-content button{font-size:11px;padding:7px 10px}
}