*{box-sizing:border-box}body{margin:0;background:#071323;color:#f5f8ff;font:24px Arial,sans-serif;padding:35px}button,input,select{font:inherit;color:inherit;background:#142a42;border:2px solid transparent;border-radius:10px;padding:14px;margin:5px}button:focus,input:focus,select:focus{outline:4px solid #36e1cb}header{display:flex;align-items:center;gap:18px;height:100px}header img{width:75px;height:75px;object-fit:contain}header strong{font-size:40px}#status{flex:1;color:#9db7c9;font-size:20px}main{display:flex;gap:30px;height:850px}aside{width:560px;display:flex;flex-direction:column}aside select,aside input{width:100%}#channels{flex:1;overflow:auto}#channels button{display:block;width:98%;text-align:start}#channels .playing{border-color:#36e1cb}#view{flex:1;min-width:0}#video-box{position:relative;background:#000;height:670px}video,#av-player{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain}#av-player{display:none}#overlay{position:absolute;bottom:25px;left:25px;background:#071323e8;padding:20px;border-radius:10px;white-space:pre-line;pointer-events:none}#overlay:empty{display:none}h1{font-size:32px}#gate{position:fixed;top:0;left:0;right:0;bottom:0;background:#071323;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px}#gate[hidden]{display:none}pre{white-space:pre-wrap;overflow-wrap:anywhere}#programme{max-height:160px;overflow:auto}body.full main{display:block}body.full aside,body.full header,body.full #view>h1,body.full #view>p,body.full #view>div:not(#video-box),body.full #programme{display:none}body.full #video-box{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;width:100vw}nav{display:flex;align-items:center;justify-content:center}#page{font-size:18px}

/* Fit the browser viewport; only channel/guide panels scroll. */
html{width:100%;height:100%;overflow:hidden}body{width:100%;height:100%;height:100dvh;overflow:hidden;padding:2vh 2vw;display:flex;flex-direction:column;font-size:clamp(14px,1.5vw,24px)}header{height:auto;min-height:0;flex:0 0 auto;margin-bottom:1vh;gap:1vw}header img{width:5vw;height:7vh}header strong{font-size:2.5vw}#status{font-size:1em;min-width:0;overflow-wrap:anywhere}button,input,select{padding:.65em;margin:.2em;min-width:0}main{height:auto;flex:1;min-height:0;gap:2vw}aside{width:30%;min-width:0;min-height:0}aside select,aside input{width:calc(100% - .4em)}#channels{min-height:0;overscroll-behavior:contain}#view{display:flex;flex-direction:column;min-height:0;overflow:hidden}#video-box{height:auto;min-height:0;flex:1}#channel-name{font-size:1.3em;margin:.4em 0}#now{margin:.3em 0}#programme{flex:0 1 auto;max-height:16vh;margin:.3em 0;overflow:auto}#programme:empty{display:none}#gate{padding:4vh 4vw;overflow:auto}body.full #video-box{height:100%;width:100%}nav{flex:none}#page{font-size:.8em}