@font-face{font-family:VCR;src:url('/assets/VCR_OSD_MONO.ttf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0c040;outline-offset:5px}[hidden]{display:none!important}#app{height:100%;width:100%;background:#000;position:relative;overflow:hidden}#tv{position:absolute;width:2000px;height:1170px;transform-origin:top left;font-family:VCR,monospace;color:#39ff14}#base-cabinet,#cabinet,#press-art{position:absolute;inset:0;width:2000px;height:1170px;pointer-events:none;z-index:2}#screen{position:absolute;left:125px;top:112px;width:1350px;height:945px;overflow:hidden;background:#000}#video{width:100%;height:100%;object-fit:cover;display:none}#transition{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}#scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#00000008 3px 4px)}.physical{position:absolute;border:0;background:transparent;border-radius:50%;z-index:5}#up{left:1636px;top:662px;width:118px;height:118px}#down{left:1807px;top:663px;width:118px;height:118px}#power{left:1709px;top:938px;width:158px;height:158px}#volume{position:absolute;left:1638px;top:559px;width:280px;height:66px;z-index:6;opacity:0;cursor:ew-resize}#volume:focus-visible{opacity:.35}#volume-knob{position:absolute;width:65px;height:66px;top:559px;z-index:4;pointer-events:none}#overlay{position:absolute;z-index:6;text-shadow:-2px -2px #000,2px 2px #000}#channel-label{font-size:116px;line-height:1;background:none;color:inherit;border:0;padding:0;text-shadow:inherit}#channel-name{font-size:36px}#episode{position:absolute;left:230px;top:882px;z-index:6;max-width:1190px}#episode button{display:block;border:0;background:none;color:#39ff14;text-align:left;text-shadow:2px 2px #000;padding:0;max-width:100%}#show-info{font-size:58px}#episode-info{font-size:44px;margin-top:12px}#overlay,#episode{transition:opacity .25s}#tv.quiet #overlay,#tv.quiet #episode{opacity:0;pointer-events:none}#menu{position:absolute;left:190px;top:175px;width:1210px;height:805px;background:#000;z-index:8;overflow:auto;color:#39ff14;font-size:36px}#menu h1{font-size:58px;font-weight:400;margin:0 0 50px}#menu button{color:inherit;background:none;border:0;text-align:left}#menu .back{position:absolute;right:20px;top:12px;font-size:46px}#menu .main-link{position:absolute;font-size:64px;line-height:1}#menu p{font-size:32px;line-height:1.4}#menu .row{display:block;width:100%;padding:18px;background:#14320f;margin:10px 0;font-size:34px}#menu input,#menu select{background:#10200c;color:inherit;border:1px solid #39ff14;padding:10px;max-width:95%}#menu label{display:block;margin:18px 0}#dev{position:absolute;left:28px;top:18px;font:bold 26px Arial;color:#888;background:none;border:0;z-index:10}#dev-panel{position:absolute;left:28px;top:62px;width:650px;max-height:1030px;overflow:auto;z-index:12;background:#1a1a2efa;border:1px solid #f0c040;color:#f0c040;padding:22px;font:26px Arial}#dev-panel button,#dev-panel select,#dev-panel input{margin:8px 0;padding:9px;max-width:100%}#dev-panel label{display:block}#dev-panel input[type=number]{width:150px}#status{position:absolute;left:230px;top:770px;max-width:1150px;background:#000c;font-size:34px;z-index:15;pointer-events:none}#status:empty{display:none}#custom-buttons{position:absolute;inset:0;pointer-events:none;z-index:7}#custom-buttons button{position:absolute;pointer-events:auto;border:0;background:transparent;color:#f0c040;transform:translate(-50%,-50%);font:24px Arial}#custom-buttons img{display:block;max-width:500px}#guide{position:absolute;inset:0;background:#000d;z-index:9;padding:28px 40px;color:white;font:32px Arial}#guide h1{text-align:center;color:#f0c040;font-size:35px}#guide .guide-row{display:grid;grid-template-columns:272px 1fr 1fr;width:100%;border:0;border-bottom:2px solid #444466;text-align:left;background:#1a1a2e;color:white;font:32px Arial;padding:25px 15px}#guide .guide-row:nth-child(even){background:#222244}#guide .guide-row.selected{outline:3px solid #f0c040}#guide .guide-row span:first-child{color:#f0c040}#guide footer{text-align:center;margin-top:40px;color:#aaa}#guide button.close{background:none;border:0;color:#f0c040;float:right;font-size:32px}#fullscreen-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#000e;padding:18px;border:1px solid #39ff14;z-index:30;color:#39ff14;font:18px VCR;max-width:98%;flex-wrap:wrap}#fullscreen-controls button{color:inherit;border:1px solid #39ff1480;background:#10200c;padding:10px}#fullscreen-controls label{display:flex;gap:8px;align-items:center}#fs-volume{width:120px}#app:is(:fullscreen,.expanded) #tv{transform:none!important;left:0!important;top:0!important;width:100%;height:100%}#app:is(:fullscreen,.expanded) #base-cabinet,#app:is(:fullscreen,.expanded) #cabinet,#app:is(:fullscreen,.expanded) .physical,#app:is(:fullscreen,.expanded) #volume,#app:is(:fullscreen,.expanded) #volume-knob,#app:is(:fullscreen,.expanded) #dev,#app:is(:fullscreen,.expanded) #custom-buttons{display:none}#app:is(:fullscreen,.expanded) #screen{inset:0;width:100%;height:100%}#app:is(:fullscreen,.expanded) #video{object-fit:contain!important;transform:none!important}#app:is(:fullscreen,.expanded) #overlay{left:5%!important;top:5%!important}#app:is(:fullscreen,.expanded) #channel-label{font-size:60px!important}#app:is(:fullscreen,.expanded) #channel-name{font-size:24px}#app:is(:fullscreen,.expanded) #episode{left:5%;top:auto;bottom:130px}#app:is(:fullscreen,.expanded) #show-info{font-size:32px}#app:is(:fullscreen,.expanded) #episode-info{font-size:24px}#app:is(:fullscreen,.expanded) #menu{left:8%;top:8%;width:84%;height:70%;font-size:24px}#app:is(:fullscreen,.expanded) #menu h1{font-size:36px}#app:is(:fullscreen,.expanded) #menu .main-link{position:static!important;display:block;margin:16px;font-size:30px!important}#app:is(:fullscreen,.expanded) #menu .back{font-size:26px}#app:is(:fullscreen,.expanded) #guide{font-size:20px}#app:is(:fullscreen,.expanded) #status{left:10%;top:60%;font-size:24px}

#volume-track{position:absolute;left:1638px;top:559px;width:280px;height:66px;z-index:4;pointer-events:none}#app:is(:fullscreen,.expanded) #volume-track{display:none}#menu .main-link{margin-left:-40px}#overlay,#episode{color:#39ff14;text-shadow:2px 2px 1px #000;-webkit-text-stroke:0px}#channel-label{color:#39ff14}
#fullscreen-controls{width:max-content}

.library-panel{height:640px;overflow:auto;padding:12px 12px 45px;font-size:26px}.library-panel button{font:inherit;display:block;margin:10px 0;padding:8px;text-align:left}.library-panel label{display:block;margin:12px 0}.library-panel input,.library-panel select{font:inherit;max-width:90%;background:#000;color:#55ff55;border:1px solid #55ff55;padding:6px}.library-panel p{font-size:24px}.library-panel h2{font-size:30px}.library-row{display:flex;gap:20px}.library-panel .confirm{border:2px solid #55ff55;padding:15px}.library-panel .confirm button{display:inline-block;margin-right:20px}

.library-panel .episode-current{color:#fff!important}.library-panel .episode-watched{color:#888!important}.library-panel .episode-upcoming{color:#39ff14!important}

@font-face{font-family:'VCR OSD MONO';src:url('/assets/VCR_OSD_MONO.ttf')}#original-menu{position:absolute;inset:0;z-index:10;width:2000px;height:1170px}#original-menu canvas{width:100%!important;height:100%!important}#app:is(:fullscreen,.expanded) #original-menu{width:100%;height:100%}#screen iframe{border:0}#video{display:block}
/* The guide lives inside the picture, never over the cabinet buttons. */
#guide{inset:auto;left:140px;top:140px;width:1330px;height:875px;overflow:auto;font-size:25px;padding:20px 30px}
#guide .guide-row{grid-template-columns:260px 1fr 1fr;font-size:25px;padding:14px 10px}
#app:is(:fullscreen,.expanded) #guide{inset:0;width:100%;height:100%;padding-bottom:110px}
.physical,#volume{z-index:11}

#episode{top:auto;bottom:170px}
#progress-controls{width:100%;margin-top:12px;font-size:24px}
#episode-progress{display:block;width:100%;height:28px;accent-color:#39ff14;cursor:ew-resize}
#progress-caption{display:flex;align-items:center;justify-content:space-between;gap:18px}
#progress-caption #return-live{font-size:24px;border:1px solid #39ff14;padding:3px 12px;background:#0008}
#progress-controls:has(input:disabled){opacity:.6}
#app:is(:fullscreen,.expanded) #episode{width:90%;max-width:none;bottom:135px}
#app:is(:fullscreen,.expanded) #progress-controls{font-size:16px}
#app:is(:fullscreen,.expanded) #progress-caption #return-live{font-size:16px}

#progress-caption #pause-play{font-size:24px;border:1px solid #39ff14;padding:3px 12px;background:#0008}#app:is(:fullscreen,.expanded) #progress-caption #pause-play{font-size:16px}

#episode{width:1100px}
/* Classic cable guide: composition stays within the television picture. */
#screen.guide-mode{background:#071742}
#screen.guide-mode #video,#screen.guide-mode iframe{position:absolute!important;left:50%!important;top:0!important;width:50%!important;height:45%!important;object-fit:contain!important;transform:none!important}
#screen #guide{inset:0;width:100%;height:100%;padding:0;overflow:hidden;background:transparent;color:#fff;font:32px VCR,monospace;z-index:1;text-shadow:2px 2px #000;display:flex;flex-direction:column;pointer-events:none}
.guide-info{height:45%;width:50%;background:linear-gradient(#111c9b,#071332);padding:26px 24px;text-align:center;flex-shrink:0;overflow:hidden;pointer-events:auto}
.guide-brand{color:#efef93;font-size:30px;letter-spacing:2px}
.guide-feature p{margin:20px 0;font-size:34px;line-height:1.05}.guide-feature p:nth-child(2){color:#ffff82}
.guide-ad-label{position:absolute;top:18%;left:52%;width:46%;text-align:center;white-space:pre-line;font-size:28px}
.guide-times{display:grid;grid-template-columns:20% repeat(3,1fr);height:8%;flex-shrink:0;background:linear-gradient(#244ca9,#132454);color:#ffff82;border:4px ridge #ccc}
.guide-times span{display:flex;align-items:center;justify-content:center;border-right:4px ridge #ddd;font-size:32px;white-space:nowrap}
.guide-list{height:47%;overflow:hidden;pointer-events:auto;background:#102552;scrollbar-width:none;touch-action:none}
.classic-row{display:flex;width:100%;height:112px;padding:0;border:0;border-bottom:4px ridge #d3d3db;background:#581f29;color:#fff;text-align:left;font:32px VCR,monospace;text-shadow:2px 2px #000}
.classic-row:nth-child(even){background:#194e80}.classic-row.selected{background:#1779a5}.classic-row:focus-visible{outline:3px solid yellow;outline-offset:-4px}
.guide-channel{width:20%;flex-shrink:0;background:#121d3e;color:#eeef79;white-space:pre-line;text-align:center;border-right:4px ridge #ddd;overflow:hidden;padding:6px;font-size:29px}
.guide-programs{display:flex;width:80%;overflow:hidden}.guide-programs>span{display:flex;align-items:center;flex-shrink:0;border-right:4px ridge #ddd;padding:8px;overflow:hidden;line-height:1.08}
.guide-footer{height:8%;display:flex;justify-content:center;align-items:center;gap:18px;background:#091439;pointer-events:auto}
.guide-footer button{background:transparent;color:#efef93;border:1px solid #8494c9;font:22px VCR;padding:8px}
#app:is(:fullscreen,.expanded) #screen #guide{padding:0;font-size:clamp(16px,2.5vh,32px)}
#app:is(:fullscreen,.expanded) .guide-feature p{font-size:clamp(16px,3vh,34px);margin:2vh 0}
#app:is(:fullscreen,.expanded) .guide-times span{font-size:clamp(16px,3vh,32px)}
#app:is(:fullscreen,.expanded) .classic-row{height:11vh;font-size:clamp(16px,3vh,32px)}
#app:is(:fullscreen,.expanded) .guide-channel{font-size:clamp(14px,2.7vh,29px)}
#app:is(:fullscreen,.expanded) .guide-footer{justify-content:flex-start;gap:8px}
#app:is(:fullscreen,.expanded) .guide-footer button{font-size:14px}
#account-screen{position:absolute;inset:0;z-index:40;background:#000;overflow:hidden;color:#172116;font:27px VCR,monospace}
#sign-in-art{position:absolute;left:-5.5%;top:-21%;width:111%;height:153%;clip-path:polygon(5% 12%,95% 12%,95% 88%,5% 88%)}
#account-panel{position:absolute;left:25%;top:34%;width:38%;height:52%;overflow:auto;padding:12px 24px;color:#102310}
#account-panel h1{font-size:38px;margin:8px 0 18px}#account-panel p{font-size:23px;margin:12px 0}
#account-panel label{display:block;margin:12px 0;font-size:25px}#account-panel input{display:block;width:100%;padding:10px;background:#d5d0bd;border:2px solid #4b4a3d;color:#101a10}
#account-panel button,#account-panel a{display:block;width:100%;margin:12px 0;padding:10px;border:2px solid #424537;background:#283425;color:#dbdfb3;text-align:center;text-decoration:none;font:25px VCR}
#account-button{position:absolute;right:26px;bottom:18px;z-index:41;background:#201b13;color:#c8b978;border:1px solid #7e6a3b;font:18px VCR;padding:6px}
#admin-panel{position:fixed;inset:35px;z-index:50;background:#111d13;color:#b5ff91;font:24px VCR;overflow:auto;padding:32px}
#admin-panel h1{font-size:34px}#admin-panel h2{font-size:28px;margin-top:36px}#admin-panel label{display:block;margin:14px 0}#admin-panel input:not([type=checkbox]){display:block;width:min(95%,800px);padding:10px;background:#1b2b18;color:#fff;border:1px solid #63975a}
#admin-panel button{background:#293e22;color:#c8ffab;border:1px solid #63975a;padding:12px;margin:6px}#admin-panel table{width:100%;border-collapse:collapse}#admin-panel td,#admin-panel th{text-align:left;padding:12px;border-bottom:1px solid #385534}#admin-panel p{overflow-wrap:anywhere}
#account-message{color:#6d100d}#admin-panel #account-message{color:#ffce74}
#app:is(:fullscreen,.expanded) #account-button{right:8px;top:8px;bottom:auto;font-size:12px}

/* Touch controls supplement the original cabinet; desktop artwork is unchanged. */
#touch-controls{display:none}
@media(max-width:700px),(max-height:500px),(pointer:coarse){
 #touch-controls{position:absolute;z-index:35;bottom:env(safe-area-inset-bottom,0);left:0;width:100%;display:none;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;background:#000e;color:#39ff14;font:16px VCR}
 #touch-controls button{min-width:44px;min-height:44px;padding:8px;border:1px solid #39ff1470;background:#10200c;color:inherit}
 #app:is(:fullscreen,.expanded) #touch-controls{display:none}
 #fullscreen-controls{bottom:env(safe-area-inset-bottom,4px);gap:4px;padding:4px;justify-content:center;font-size:14px}
 #fullscreen-controls button{min-height:44px;padding:6px}
 #fs-volume{height:44px}
 #admin-panel{inset:4px;font-size:16px;padding:14px}#admin-panel h1{font-size:24px}#admin-panel h2{font-size:20px}
}
@media(max-width:700px),(max-height:500px){
 #app>#account-screen{position:absolute;inset:auto;left:50%;top:50%;width:240vw;height:140.4vw;transform:translate(-43%,-50%);overflow:visible;background:#000;}
 #account-panel{padding:6px 12px;max-height:calc(100dvh - 50px);}
 #account-panel h1{font-size:22px;margin:4px 0 8px}#account-panel p{font-size:16px}
 #account-panel label{font-size:16px;margin:8px 0}#account-panel input{font-size:16px;min-height:44px;padding:6px}
 #account-panel button,#account-panel a{font-size:16px;min-height:44px;padding:6px;margin:8px 0}
 #account-screen~#touch-controls{z-index:35}
 #app:is(:fullscreen,.expanded) #channel-label{font-size:32px!important}
 #app:is(:fullscreen,.expanded) #channel-name{font-size:16px}
 #app:is(:fullscreen,.expanded) #episode{bottom:160px;max-width:90%}
 #app:is(:fullscreen,.expanded) #show-info{font-size:22px}#app:is(:fullscreen,.expanded) #episode-info{font-size:18px}
}

.guide-programs>span>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal;min-width:0}

#app.account-open #touch-controls{display:none}
@media(max-width:700px),(max-height:500px){
 #app:is(:fullscreen,.expanded) .guide-brand{font-size:14px;letter-spacing:0}
 #app:is(:fullscreen,.expanded) .guide-info{padding:12px 8px;height:32%}
 #app:is(:fullscreen,.expanded) .guide-feature p{font-size:16px;margin:10px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 #app:is(:fullscreen,.expanded) #screen.guide-mode #video,#app:is(:fullscreen,.expanded) #screen.guide-mode iframe{height:32%!important}
 #app:is(:fullscreen,.expanded) .guide-times{height:6%}
 #app:is(:fullscreen,.expanded) .guide-times span{font-size:12px}
 #app:is(:fullscreen,.expanded) .guide-list{height:62%;padding-bottom:110px}
 #app:is(:fullscreen,.expanded) .classic-row{font-size:14px;height:80px}
 #app:is(:fullscreen,.expanded) .guide-channel{font-size:13px}
 #app:is(:fullscreen,.expanded) .guide-programs>span{padding:4px}
}