/* 90s cable guide: preview video + clock up top, scrolling blue grid below. */
:root {
  --g-bg: #050d4a;
  --g-cell: #1430a8;
  --g-cell-2: #0d2386;
  --g-cell-now: #2a4fd6;
  --g-chan: #0a1a6e;
  --g-line: #6f8cff;
  --g-head: #000a3c;
  --g-gold: #ffd200;
  --g-text: #fff;
  --g-shadow: 2px 2px 0 #000;
}
body.guide { background: var(--g-bg); color: var(--g-text); overflow: hidden; height: 100vh; height: 100dvh; }
.guide-shell { display: grid; grid-template-rows: minmax(180px, 46%) 1fr; height: 100vh; height: 100dvh; }
.g-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; padding: 10px;
         background: linear-gradient(#000530, var(--g-bg)); min-height: 0; }
.g-top .player { aspect-ratio: auto; height: 100%; outline: 3px solid var(--g-line); }
.g-info { display: flex; flex-direction: column; justify-content: space-between; padding: 6px 12px;
          text-shadow: var(--g-shadow); text-transform: uppercase; font-weight: 700; min-width: 0; }
.g-info .g-brand { font-size: clamp(1.1rem, 2.6vw, 2.2rem); text-transform: lowercase; }
.g-info .g-brand a { border: 0; }
.g-info .g-brand { display: flex; align-items: center; gap: 12px; }
.g-info .g-brand img { height: clamp(40px, 7vw, 72px); width: auto; display: block; filter: drop-shadow(2px 2px 0 #000); }
.g-info .g-clock { font-size: clamp(2rem, 6vw, 4.6rem); line-height: 1; color: var(--g-gold); font-variant-numeric: tabular-nums; }
.g-info .g-date { font-size: clamp(.9rem, 1.6vw, 1.3rem); }
.g-info .g-now { font-size: clamp(.9rem, 1.7vw, 1.35rem); border-top: 2px solid var(--g-line); padding-top: 8px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-info .g-now small { display: block; color: var(--g-gold); font-size: .75em; }
.g-grid { position: relative; overflow: hidden; border-top: 4px solid var(--g-line); min-height: 0; }
.g-head, .g-row { display: grid; grid-template-columns: clamp(84px, 14vw, 150px) 1fr; }
.g-head { position: relative; z-index: 2; background: var(--g-head); border-bottom: 3px solid var(--g-line);
          text-shadow: var(--g-shadow); font-weight: 700; text-transform: uppercase; }
.g-head .g-day { padding: 6px 8px; color: var(--g-gold); border-right: 3px solid var(--g-line); font-size: clamp(.8rem, 1.6vw, 1.1rem); }
.g-times { position: relative; height: 100%; }
.g-times span { position: absolute; top: 0; bottom: 0; padding: 6px 8px; border-left: 2px solid var(--g-line);
                font-size: clamp(.8rem, 1.6vw, 1.1rem); white-space: nowrap; }
.g-rows { position: absolute; left: 0; right: 0; will-change: transform; }
.g-row { height: clamp(46px, 7.5vh, 64px); border-bottom: 2px solid var(--g-line); cursor: pointer; }
.g-row:hover .g-chan { background: var(--g-cell-now); }
.g-chan { background: var(--g-chan); border-right: 3px solid var(--g-line); padding: 4px 8px;
          display: flex; flex-direction: column; justify-content: center; text-shadow: var(--g-shadow);
          font-weight: 700; line-height: 1.05; min-width: 0; }
.g-chan .num { font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: var(--g-gold); }
.g-chan .call { font-size: clamp(.7rem, 1.3vw, .95rem); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-progs { position: relative; overflow: hidden; }
.g-prog { position: absolute; top: 0; bottom: 0; padding: 4px 8px; border-right: 2px solid var(--g-line);
          background: linear-gradient(var(--g-cell), var(--g-cell-2)); text-shadow: var(--g-shadow);
          font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
          display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.g-prog.now { background: linear-gradient(var(--g-cell-now), var(--g-cell)); }
.g-prog .t { font-size: clamp(.8rem, 1.6vw, 1.1rem); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.g-prog .s { font-size: clamp(.65rem, 1.2vw, .85rem); color: #cfd8ff; overflow: hidden; text-overflow: ellipsis; }
.g-prog.cont-l .t::before { content: "◀ "; color: var(--g-gold); }
.g-prog.cont-r .t::after { content: " ▶"; color: var(--g-gold); }
.g-prog.movie .s::before { content: "MOVIE · "; color: var(--g-gold); }
.g-empty { padding: 30px; text-align: center; font-weight: 700; text-shadow: var(--g-shadow); text-transform: uppercase; }
@media (max-width: 700px) {
  .guide-shell { grid-template-rows: auto 1fr; }
  .g-top { grid-template-columns: 1fr; }
  .g-top .player { aspect-ratio: 16/9; height: auto; }
  .g-info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .g-info .g-now { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .g-rows { transition: none !important; } }

/* active channel: the one in the preview; click again to watch */
.g-row.active .g-chan { background: var(--g-cell-now); box-shadow: inset 4px 0 0 var(--g-gold); }
.g-row:focus-visible { outline: 3px solid var(--g-gold); outline-offset: -3px; }
.g-chan { position: relative; }
.g-chan .watch { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
                 font-size: clamp(.6rem, 1.1vw, .8rem); color: var(--g-gold); text-transform: uppercase;
                 background: rgba(0, 0, 0, .35); padding: 2px 5px; border-radius: 3px; }
.g-row.active .g-chan .watch { display: block; }
@media (max-width: 700px) { .g-row.active .g-chan .watch { font-size: 0; padding: 2px 4px; } .g-row.active .g-chan .watch::after { content: "▶"; font-size: .8rem; } }

/* the flip: edge-on, swap the stream behind static, flip back */
.g-top { perspective: 1200px; }
.g-top .player { transform-origin: center; backface-visibility: hidden; }
.g-top .player.flip-out { animation: flip-out .18s ease-in forwards; }
.g-top .player.flip-in { animation: flip-in .45s ease-out; }
.g-top .player.flip-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: static-fade .7s steps(1) forwards, static-jitter .1s steps(2) infinite;
}
@keyframes flip-out { from { transform: rotateY(0); } to { transform: rotateY(90deg); } }
@keyframes flip-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
@keyframes static-fade { 0% { opacity: 1; } 60% { opacity: .8; } 80% { opacity: .35; } 100% { opacity: 0; } }
@keyframes static-jitter { 0% { background-position: 0 0; } 50% { background-position: 37px -53px; } 100% { background-position: -61px 29px; } }

/* sound toggle, top right of the preview */
.g-sound { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; align-items: center; gap: 6px;
           background: rgba(0, 10, 60, .85); border: 2px solid var(--g-line); border-radius: 4px; padding: 3px 8px;
           color: #fff; font-weight: 700; text-transform: uppercase; font-size: .85rem; cursor: pointer;
           text-shadow: var(--g-shadow); }
.g-sound input { accent-color: var(--g-gold); width: 16px; height: 16px; margin: 0; }