:root{
  --cream:#ead7b4;
  --brass:#c9a45c;
  --screen:#050706;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050403}
body{
  font-family:"Courier New",ui-monospace,monospace;
  color:var(--cream);
  -webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 50% 42%,#34251a 0%,#120d09 49%,#050403 78%,#000 100%);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 42%,transparent 34%,rgba(0,0,0,.58) 100%);
}
.back{
  position:fixed;z-index:40;top:18px;left:18px;
  color:#d9c6a4;text-decoration:none;font:600 11px/1.2 "Courier New",monospace;
  letter-spacing:.16em;padding:9px 12px;border:1px solid rgba(201,164,92,.45);
  background:rgba(8,7,5,.66);border-radius:3px;backdrop-filter:blur(8px);
  box-shadow:0 8px 28px -16px #000;
}
.back:hover{color:#f4dfad;border-color:#e4c27b;background:rgba(20,15,9,.82)}
.stage{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0;z-index:2;
}
.television{
  position:relative;width:min(100vw,150vh);height:auto;aspect-ratio:3/2;
  max-height:100vh;user-select:none;z-index:1;
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.7));
}
.cabinet{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;pointer-events:none;
}
/* Calibrated to the Pexels front-on CRT plate. */
.screen{
  position:absolute;left:15.9%;top:14.7%;width:56.9%;height:64.4%;
  overflow:hidden;border-radius:2.4% / 4.5%;
  background:radial-gradient(ellipse at 50% 50%,#101613 0%,#020403 70%,#000 100%);
  box-shadow:
    inset 0 0 26px 9px rgba(0,0,0,.95),
    inset 0 0 4px 1px rgba(190,220,200,.12),
    0 0 0 2px rgba(1,2,2,.8);
  cursor:pointer;z-index:3;
}
.screen-inner{position:absolute;inset:0;overflow:hidden;background:#000}
.screen-inner iframe,.screen-inner video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover;background:#000;display:block;
}
.screen-inner video{object-fit:contain}
.scanlines{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.20;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.55) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(ellipse at 25% 12%,rgba(255,246,220,.22),transparent 40%),
    linear-gradient(118deg,rgba(255,255,255,.09),transparent 28%,transparent 70%,rgba(0,0,0,.26));
  mix-blend-mode:screen;opacity:.5;
}
.osd{
  position:absolute;z-index:6;left:5%;top:6%;display:flex;flex-direction:column;gap:2px;
  padding:5px 7px;background:rgba(0,0,0,.62);border-left:2px solid rgba(167,255,193,.65);
  color:#baffd0;text-shadow:0 0 8px rgba(90,255,145,.55);opacity:0;
  transition:opacity .35s ease;pointer-events:none;
}
.osd.show{opacity:1}
.osd-ch{font:700 clamp(10px,1.1vw,17px)/1 "Courier New",monospace;letter-spacing:.16em}
.osd-name{font:600 clamp(7px,.72vw,11px)/1.25 "Courier New",monospace;letter-spacing:.1em;color:#d4ffdf}
.noise{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:screen;animation:noise .18s steps(2) infinite;
}
.noise.on{opacity:.28}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}}
/* Invisible click targets over the real TV's control panel. */
.hotspot{
  position:absolute;z-index:12;border:0;background:transparent;cursor:pointer;padding:0;
  top:60.7%;height:10.5%;
}
.hotspot.prev{left:71.6%;width:5.8%}
.hotspot.next{left:77.5%;width:5.8%}
.hotspot{color:rgba(232,208,164,.72);font:700 clamp(6px,.62vw,10px)/1 "Courier New",monospace;letter-spacing:.06em;text-shadow:0 1px 0 #000}
.hotspot span{display:block;padding:4px 2px;background:rgba(5,4,3,.52);border:1px solid rgba(201,164,92,.25);border-radius:3px}
.hotspot:hover span{color:#f6e5b1;border-color:rgba(240,211,145,.65)}
.hotspot:focus-visible{outline:2px solid #f0d391;outline-offset:2px}
/* Click left/right third of the screen too. */
.zap{position:absolute;z-index:8;top:15%;height:64%;width:20%;cursor:ew-resize}
.zap.prev{left:15.9%}
.zap.next{left:52.9%}
.zap:hover{background:linear-gradient(90deg,rgba(240,211,145,.05),transparent)}
@media(max-width:700px){
  .back{top:9px;left:9px;font-size:9px;padding:7px 8px;letter-spacing:.1em}
  .stage{padding:0}
  .television{width:100vw}
}

@media(orientation:portrait){
  .stage{isolation:isolate}
  .stage::before{
    content:"";position:fixed;inset:-40px;z-index:0;
    background:url("vintage-tv.jpg") center/cover no-repeat;
    filter:blur(22px) brightness(.24) saturate(.8);
    transform:scale(1.08);
  }
}

@media(orientation:portrait){
  body::after{
    content:"";position:fixed;inset:-40px;z-index:0;
    background:url("vintage-tv.jpg") center/cover no-repeat;
    filter:blur(24px) brightness(.22) saturate(.75);
    transform:scale(1.08);pointer-events:none;
  }
  .stage::before{display:none}
}