/* Player pages are a viewport, not a document: only local content scrolls. */
html.player-page{height:100dvh;overflow:hidden!important;overscroll-behavior:none}
html.player-page body{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;overflow:hidden!important}
html.player-page body>.topbar{flex:0 0 auto!important}
html.player-page body>main{flex:1 1 0!important;height:0!important;min-height:0!important;overflow:hidden!important}
html.player-page #tv-view{height:100%!important;min-height:0!important;overflow:hidden!important}
html.player-page .guide{min-height:0!important;overflow:hidden!important}
html.player-page .guide-table{min-height:0!important;overflow:hidden!important}
html.player-page #guide-list{min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}

/* Touch layouts keep their own controls/safe areas. Desktop uses the same
   fixed outer frame, with an edge-to-edge 16:9 picture above its information. */
html.player-page:not(.touch-player-ui) .player-area{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;background:#000}
html.player-page:not(.touch-player-ui) .video-shell:not(:fullscreen):not(.touch-fullscreen){flex:0 0 auto!important;align-self:stretch!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;max-height:none!important}
html.player-page:not(.touch-player-ui) .programme-detail{flex:1 1 0;min-height:0!important;max-height:none!important;overflow:hidden!important;width:100%;padding:.6rem .65rem 0!important}
html.player-page:not(.touch-player-ui) .programme-detail>div{height:100%;min-height:0;grid-template-columns:4rem minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;align-items:start!important}
html.player-page:not(.touch-player-ui) #channel-logo{width:4rem!important;height:4rem!important}
/* Center the station name against its logo without moving the programme row. */
html.player-page .video-shell.radio-mode+.programme-detail :is(#channel-logo,#channel-name){align-self:center!important}
html.player-page .video-shell.radio-mode+.programme-detail #channel-name{margin-block:0!important}
/* The entire programme text scrolls together, independently of the channel header. */
html.player-page:not(.touch-player-ui) #programme{height:100%;min-height:0;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scroll-padding-bottom:.25rem;-webkit-overflow-scrolling:touch}
html.player-page:not(.touch-player-ui) .programme-copy{display:block!important;min-height:0;height:auto;margin-top:0!important;padding:.5rem 0 .25rem;overflow:visible}
html.player-page:not(.touch-player-ui) .programme-description{min-height:0;overflow:visible}
@media(max-width:900px){
  html.player-page:not(.touch-player-ui) #tv-view{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)!important}
  html.player-page:not(.touch-player-ui) .guide{height:100%!important}
  html.player-page:not(.touch-player-ui) .guide-table{height:100%!important}
  html.player-page:not(.touch-player-ui) .programme-detail{padding:.6rem .85rem 0!important}
  html.player-page:not(.touch-player-ui) .programme-detail>div{grid-template-columns:2rem minmax(0,1fr)!important}
  html.player-page:not(.touch-player-ui) #channel-logo{width:2rem!important;height:2rem!important}
  html.player-page:not(.touch-player-ui) #channel-name{font-size:1.2rem!important}
}