/* Scale the receiver to the display, from a phone to a living-room monitor. */
html,body{width:100%;height:100%;margin:0}
body{display:block;overflow:hidden;background:#101a29}
.receiver{width:100vw;max-width:none;height:100vh;height:100svh;min-width:0;min-height:0;margin:0;border:clamp(3px,.45vw,10px) solid #111720;border-radius:0;display:flex;flex-direction:column;box-shadow:none}
header{flex:0 0 clamp(46px,6.4vh,78px);height:auto;padding:0 clamp(12px,1.7vw,40px);gap:clamp(10px,1vw,24px)}
.brand{font-size:clamp(28px,2.6vw,62px)}.brand span{font-size:clamp(38px,3.6vw,85px);left:40%;top:-40%}
.guide-word{font-size:clamp(16px,1.55vw,36px)}.filter-label,header time{font-size:clamp(10px,1vw,23px)}header time{min-width:clamp(70px,8vw,160px)}
.info-zone{flex:0 0 clamp(142px,24vh,330px);min-height:0;grid-template-columns:minmax(0,1fr) clamp(230px,27vw,580px);padding:clamp(10px,1.3vh,22px) clamp(12px,1.5vw,36px);gap:clamp(12px,2vw,44px);overflow:hidden}
.details{align-self:center}h1{font-size:clamp(20px,2.1vw,44px)}.channel-caption{font-size:clamp(10px,.95vw,20px)}.metadata,.now-next{font-size:clamp(11px,1.1vw,23px)}.details p{font-size:clamp(12px,1.15vw,25px);margin:clamp(6px,1vh,18px) 0}
.television{width:100%;max-height:100%;min-height:0}.guide-bar{flex:0 0 clamp(26px,3.5vh,45px);font-size:clamp(11px,1.05vw,24px)}
.grid{flex:1;min-height:0;display:flex;flex-direction:column}.timeline{flex:0 0 clamp(28px,3.7vh,48px);height:auto;grid-template-columns:clamp(100px,13vw,280px) 1fr}.timeline>div:first-child{font-size:clamp(9px,.8vw,18px);display:flex;align-items:center;padding:6px 10px}
#times span{display:flex;align-items:center;font-size:clamp(11px,1.05vw,24px);padding:6px clamp(8px,1vw,24px)}
/* Keep both text lines and the selection border inside each row at every display size. */
#channels{--title-line:clamp(13.2px,1.32vw,30px);--time-line:clamp(10.8px,1.02vw,22.8px);flex:1;min-height:0;display:grid;grid-template-rows:repeat(var(--channel-count,11),minmax(max(48px,calc(var(--title-line) + var(--time-line) + 20px)),1fr));overflow-y:auto;overscroll-behavior:contain}.channel-row{min-height:0;height:100%;grid-template-columns:clamp(100px,13vw,280px) 1fr}.channel-label{min-height:0;padding:6px clamp(8px,1vw,24px);gap:clamp(6px,1vw,24px)}.channel-label .number{font-size:clamp(14px,1.5vw,32px);min-width:clamp(24px,3vw,62px)}.channel-label .call{font-size:clamp(8px,.9vw,20px)}.channel-label .call small{font-size:clamp(7px,.72vw,16px)}
.programs{min-height:0}.program{font-size:clamp(11px,1.1vw,25px);line-height:var(--title-line);padding:4px clamp(8px,1vw,24px);gap:2px}.program span,.program small{flex:0 0 auto}.program small{font-size:clamp(9px,.85vw,19px);line-height:var(--time-line);margin-top:0}.selected-info{flex:0 0 auto;min-height:0;font-size:clamp(10px,.98vw,22px);padding:clamp(7px,1vh,14px) clamp(12px,1.3vw,32px)}
.remote{flex:0 0 auto;padding:clamp(8px,1.2vh,16px) clamp(10px,1.3vw,30px);gap:clamp(5px,.7vw,16px)}.remote button,.remote a{font-size:clamp(9px,.85vw,20px);padding:clamp(7px,.9vh,14px) clamp(9px,1vw,22px);min-height:0}
footer{flex:0 0 auto;font-size:clamp(9px,.8vw,18px);padding:clamp(7px,1vh,12px) clamp(10px,1.3vw,30px)}
.receiver:fullscreen{width:100vw;height:100vh}.watch-mode .info-zone{flex:1;min-height:0;display:flex}.watch-mode .television{height:100%;width:100%;max-height:none;aspect-ratio:auto}.watch-mode header{flex-basis:clamp(44px,6vh,70px)}
@media(max-width:720px){.info-zone{grid-template-columns:minmax(0,1fr) 38%;flex-basis:155px;padding:10px;gap:10px}.details p{-webkit-line-clamp:2;font-size:11px}h1{font-size:18px}.filter-label{font-size:9px}.metadata,.now-next{font-size:10px}.channel-caption{font-size:9px}.television{min-width:0}.remote{gap:5px}.remote a{margin-left:0}.footer-hint{display:none}.selected-info{font-size:10px}}
@media(max-height:560px){body{overflow-y:auto}.receiver{height:auto;min-height:650px}.grid{min-height:260px}.watch-mode{height:100svh;min-height:0}.watch-mode .info-zone{min-height:0}}