:root { --guide-bg: #0b1a5c; --guide-cell: #1c2f8a; --guide-now: #2f49c4; --yellow: #ffe14d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden;
  font-family: "VT323", "Courier New", ui-monospace, Menlo, monospace; }
#tv { position: fixed; inset: 0; background: #000; }
.screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hidden { display: none !important; }
#static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; transition: opacity 120ms; }
#static.on { opacity: 1; }
#scanlines { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 3px);
  box-shadow: inset 0 0 160px rgba(0,0,0,0.75); }
#standby { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: repeating-linear-gradient(90deg, #c0c0c0 0 12.5%, #c0c000 0 25%, #00c0c0 0 37.5%, #00c000 0 50%, #c000c0 0 62.5%, #c00000 0 75%, #0000c0 0 87.5%, #111 0 100%);
  font-size: 5vh; text-shadow: 3px 3px 0 #000; }
#standby div { background: #000c; padding: 0.3em 0.8em; }
#standby small { font-size: 2.4vh; background: #000c; padding: 0.3em 0.8em; margin-top: 0.5em; }
#osd { position: absolute; top: 5vh; right: 6vw; font-size: 9vh; color: #3f6; text-shadow: 0 0 6px #3f6, 3px 3px 0 #000; letter-spacing: 0.05em; }
#banner { position: absolute; left: 5vw; right: 5vw; bottom: 6vh; display: grid; grid-template-columns: auto 1fr auto; gap: 2vw; align-items: center;
  background: linear-gradient(180deg, #1b2a8ccc, #0b1450ee); border: 3px solid #8fa4ff; border-radius: 6px; padding: 1.6vh 2vw; font-size: 3vh; }
#banner .ch { display: flex; flex-direction: column; align-items: center; }
#bNum { font-size: 7vh; color: var(--yellow); line-height: 1; }
#bName { font-size: 2.2vh; text-transform: uppercase; }
#bTitle { font-size: 3.6vh; }
#bSub { font-size: 2.4vh; color: #cdd6ff; }
#banner .when { display: flex; flex-direction: column; align-items: flex-end; font-size: 2.4vh; }
#bClock { font-size: 3.4vh; color: var(--yellow); }
#caption { position: absolute; left: 3vw; right: 3vw; top: 3vh; font-size: 1.8vh; color: #fff; background: #000a; padding: 0.3em 0.8em; border-radius: 3px; text-align: center; }
#hint { position: absolute; top: 2vh; left: 50%; transform: translateX(-50%); background: #000a; padding: 0.4em 1em; border-radius: 4px; font-size: 2vh; }
kbd { border: 1px solid #888; border-radius: 3px; padding: 0 0.3em; margin: 0 0.1em; }
#guide { position: absolute; left: 0; right: 0; bottom: 0; height: 66vh; background: var(--guide-bg); border-top: 4px solid #8fa4ff; display: flex; flex-direction: column; }
.gHead { display: flex; gap: 2vw; align-items: baseline; padding: 0.8vh 1.5vw; font-size: 3vh; background: #06103d; }
.gHead .logo { color: var(--yellow); font-size: 3.6vh; }
.gHead .gHelp { margin-left: auto; font-size: 1.8vh; color: #b8c4ff; }
#gScroll { flex: 1; overflow: auto; position: relative; }
#gGrid { position: relative; }
.gRow { position: relative; height: 54px; border-bottom: 2px solid var(--guide-bg); }
.gRow.sel .gChan { background: var(--yellow); color: #000; }
.gRow.sel .gCell { outline: 2px solid var(--yellow); outline-offset: -2px; }
.gChan { position: sticky; left: 0; z-index: 2; width: 200px; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 10px;
  background: #13237a; border-right: 3px solid #8fa4ff; font-size: 18px; cursor: pointer; }
.gChan b { font-size: 24px; color: var(--yellow); }
.gRow.sel .gChan b { color: #000; }
.gCell { position: absolute; top: 2px; height: 50px; background: var(--guide-cell); border-left: 2px solid var(--guide-bg); padding: 4px 8px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; font-size: 18px; cursor: pointer; }
.gCell small { display: block; color: #b8c4ff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.gCell.now { background: var(--guide-now); }
.gTimes { position: sticky; top: 0; z-index: 3; height: 30px; background: #06103d; }
.gTimes .gChan { height: 30px; background: #06103d; border-right: 3px solid #8fa4ff; }
.gTime { position: absolute; top: 0; height: 30px; line-height: 30px; padding-left: 6px; border-left: 1px solid #8fa4ff; font-size: 18px; color: var(--yellow); }
.gNowLine { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4d4d; z-index: 1; pointer-events: none; }
#credits { position: absolute; inset: 6vh 8vw; overflow: auto; background: #0b1450f2; border: 3px solid #8fa4ff; padding: 2vh 3vw; font-size: 20px; }
#credits h2 { color: var(--yellow); margin-top: 0; }
#credits a { color: #9fd0ff; }
#credits li { margin-bottom: 0.6em; }
#credits .small { font-size: 16px; color: #b8c4ff; }