/* Sized in vh so it reads the same on a phone, a laptop and a TV.
   On Xbox the page is 960x540 CSS pixels. Text stays inside .safe,
   which keeps 5% off every edge for TVs that overscan. */
:root {
  --ink: #f5f1e6;
  --dim: #b9b2a0;
  --panel: rgba(8, 8, 14, 0.86);
  --hot: #ffb000;
  --line: rgba(245, 241, 230, 0.18);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --sans: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); overflow: hidden; }
body { font: 2.6vh/1.35 var(--body); }
body.idle { cursor: none; }
[hidden] { display: none !important; }

#tv { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }

.safe { position: fixed; }

/* Channel bug, top right, like a station watermark. */
#bug { top: 5vh; right: 5vw; font: 2.2vh var(--mono); letter-spacing: .08em; opacity: .55;
  text-shadow: 0 0 .4vh #000, 0 0 1vh #000; text-transform: uppercase; }
#bug .num { font-size: 3.4vh; margin-right: .6em; }

/* Sound gate: browsers start video muted until someone presses something. */
#gate { left: 5vw; top: 5vh; border: 0; cursor: pointer; transform-origin: left center;
  background: var(--hot); color: #111; font: 700 3vh var(--body); padding: 1.4vh 3.2vh; border-radius: 99px;
  box-shadow: 0 .6vh 3vh rgba(0,0,0,.6); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: .4em; text-align: center;
  font: 700 .9em var(--body); background: #111; color: var(--ink); border: 1px solid var(--line); }
#gate kbd { background: #111; color: var(--hot); border: 0; }

/* On-screen info, bottom of the screen. */
#osd { left: 5vw; right: 5vw; bottom: 5vh; background: var(--panel); border: 1px solid var(--line);
  border-radius: 1.6vh; padding: 2.4vh 3vh 2vh; backdrop-filter: blur(6px); }
#osd .row { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; }
#osd .ch { font: 2.2vh var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); }
#osd .ch .num { font-size: 3vh; margin-right: .6em; }
#osd .clock { font: 2.6vh var(--mono); color: var(--dim); }
#osd .title { font: 900 4.6vh/1.1 var(--sans); margin: 1vh 0 .6vh; text-transform: uppercase; letter-spacing: .01em; }
#osd .meta { color: var(--dim); }
#osd .meta a { color: var(--dim); }
#osd .bar { height: .8vh; background: var(--line); border-radius: 99px; margin: 1.8vh 0 1.2vh; overflow: hidden; }
#osd .bar i { display: block; height: 100%; width: 0; background: var(--hot); }
#osd .small { font-size: 2.3vh; color: var(--dim); }
#osd .upnext b { color: var(--ink); font-weight: 600; }
#osd .keys { margin-top: 1.4vh; font-size: 2vh; color: var(--dim); }
#osd .keys kbd { margin: 0 .3em 0 1em; }
#osd .keys kbd:first-child { margin-left: 0; }

/* TV guide, a panel down the right side. */
#guide { top: 5vh; bottom: 5vh; right: 5vw; width: min(62vw, 110vh); background: var(--panel);
  border: 1px solid var(--line); border-radius: 1.6vh; padding: 2.6vh 3vh; display: flex; flex-direction: column;
  backdrop-filter: blur(6px); }
#guide h2 { margin: 0 0 1.6vh; font: 900 3.6vh var(--sans); text-transform: uppercase; }
#guide h2 small { font: 2.2vh var(--mono); color: var(--hot); letter-spacing: .12em; margin-left: .6em; }
#guide .rows { list-style: none; margin: 0; padding: 0; flex: 1; overflow: hidden; }
#guide li { display: grid; grid-template-columns: 13vh minmax(0, 1fr) auto; gap: 2vh; align-items: baseline;
  padding: 1.2vh 1.4vh; border-top: 1px solid var(--line); }
#guide li.now { background: rgba(255, 176, 0, .12); border-radius: 1vh; border-top-color: transparent; }
#guide li.now + li { border-top-color: transparent; }
#guide .t { font: 2.4vh var(--mono); color: var(--hot); white-space: nowrap; }
#guide .n { font-weight: 600; }
#guide .n small { display: block; font-weight: 400; color: var(--dim); font-size: 2vh;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guide .l { font: 2.1vh var(--mono); color: var(--dim); }
#guide .p { grid-column: 2 / 4; height: .5vh; background: var(--line); border-radius: 99px; overflow: hidden; }
#guide .p i { display: block; height: 100%; background: var(--hot); }
#guide .credit { margin: 1.6vh 0 0; font-size: 2vh; color: var(--dim); }

/* Cards that fill the screen between tapes: bumps and stand-by. */
.card { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 10vh 10vw; background: var(--bg, #1d4ed8); color: var(--fg, #fff); }
.card .lines div { font: 900 7vh/1.12 var(--sans); text-transform: lowercase; letter-spacing: -.01em;
  opacity: 0; animation: in .5s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes in { from { opacity: 0; transform: translateY(2vh) scale(.96); } to { opacity: 1; transform: none; } }
.card .next { position: absolute; left: 10vw; right: 10vw; bottom: 10vh; font: 2.6vh var(--mono);
  text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.card .next b { font-weight: 700; }

.card.standby { --fg: #fff;
  background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%,
    #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0); align-items: center; text-align: center; }
.card.standby .lines { background: #000; padding: 3vh 6vh; border-radius: 1vh; }
.card.standby .lines div { font-size: 5.4vh; font-weight: 900; text-transform: uppercase; animation: none; opacity: 1; }
.card.standby .lines div + div { font: 400 2.6vh var(--mono); margin-top: 1.4vh; letter-spacing: .08em; }
.card.standby .next { display: none; }

#tuning { position: fixed; left: 5vw; bottom: 5vh; font: 2.4vh var(--mono); color: var(--dim);
  letter-spacing: .12em; text-transform: uppercase; }