/* Stable outer layout: width depends only on available width and CSS breakpoints.
   The existing controllers continue to own their internal toolbar/crop/fullscreen. */
.player-panel.player-layout-v4 {
  width: min(100%, 1152px, calc(100vw - 32px));
  max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
  min-width: 0;
  margin-inline: auto;
  scroll-margin-top: 80px;
}
@media (min-width: 651px) and (max-height: 950px) {
  .player-panel.player-layout-v4 { width: min(100%, 962px, calc(100vw - 32px)); }
}
@media (min-width: 651px) and (max-height: 800px) {
  .player-panel.player-layout-v4 { width: min(100%, 862px, calc(100vw - 32px)); }
}
@media (min-width: 651px) and (max-height: 740px) {
  .player-panel.player-layout-v4 { width: min(100%, 762px, calc(100vw - 32px)); }
}
.player-panel.player-layout-v4 > .player-box:not(:fullscreen) {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
}
.player-panel.player-layout-v4 > .player-box.pl-source3-crop-viewport:not(:fullscreen) {
  aspect-ratio: 16 / 9 !important;
}
.player-layout-v4 > .player-box > iframe,
.player-layout-v4 > .player-box > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
/* Keep existing Source 3 actions visible in normal mode; fullscreen is unchanged. */
.player-layout-v4 > .player-box:not(:fullscreen) > .pl-source3-controls { opacity: 1; }
.player-layout-v4 > .player-box:not(:fullscreen) > .pl-source3-controls button { pointer-events: auto !important; }
.player-layout-v4 > .player-toolbar .server-switcher {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 5px;
  scrollbar-width: thin;
  scrollbar-color: #53657d #0d141e;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.player-layout-v4 > .player-toolbar .server-switcher::-webkit-scrollbar { display: block; height: 6px; }
.player-layout-v4 > .player-toolbar .server-switcher::-webkit-scrollbar-thumb { background: #53657d; border-radius: 6px; }
.player-layout-v4 > .player-toolbar .source-pill { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 650px) {
  .player-panel.player-layout-v4 { scroll-margin-top: 124px; }
  body:has(.player-layout-v4) .site-header .nav { flex-wrap: wrap; gap: 8px 18px; padding-block: 8px; }
  body:has(.player-layout-v4) .site-header nav { flex-wrap: wrap; max-width: 100%; }
}