*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--void); color: var(--white);
  font-family: 'JetBrains Mono', ui-monospace, monospace; line-height: 1.6; overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Archivo Black', system-ui, sans-serif; margin: 0; }

/* Busted-signal texture, quiet by default */
.static-overlay {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: staticShift 0.4s steps(2) infinite;
}
@keyframes staticShift { 50% { transform: translateY(1px); } }

/* Tune-in signature: CRT warm-up, resolves into the channel */
.tune-in {
  position: fixed; inset: 0; z-index: 10; background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: tuneOut .5s var(--ease) 1.8s forwards;
}
.tune-in-text {
  font-family: 'Archivo Black', sans-serif; color: var(--toxic); font-size: var(--fs-lg);
  letter-spacing: .1em; animation: flicker 0.15s steps(3) infinite;
}
@keyframes flicker { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes tuneOut { to { opacity: 0; visibility: hidden; transform: scaleY(0.002); } }
@media (prefers-reduced-motion: reduce) { .tune-in { display: none; } }

.channel-bar {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5);
  border-bottom: 2px solid var(--magenta); background: var(--tube); font-size: var(--fs-xs); letter-spacing: .1em;
  position: relative; z-index: 1;
}
.ch-num { color: var(--toxic); }
.ch-name { flex: 1; font-family: 'Archivo Black', sans-serif; }
.ch-live { display: flex; align-items: center; gap: 6px; color: var(--magenta); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: var(--glow-mag); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

main { max-width: 880px; margin: 0 auto; padding: var(--sp-8) var(--sp-5); position: relative; z-index: 1; }

.hero { text-align: center; padding-bottom: var(--sp-8); }
.hero-logo { max-width: 100%; width: 460px; height: auto; filter: drop-shadow(0 0 32px rgba(214,41,158,.25)) drop-shadow(0 0 32px rgba(212,230,57,.15)); }
.hero-note { color: var(--white); opacity: .7; max-width: 50ch; margin: var(--sp-5) auto 0; }

.guide { padding: var(--sp-7) 0; border-top: 1px dashed var(--line); }
.guide-label { color: var(--magenta); font-size: var(--fs-xs); letter-spacing: .18em; margin-bottom: var(--sp-4); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.show-card { background: var(--tube); border: 1px solid var(--line); padding: var(--sp-3); }
.thumb {
  height: 120px; margin-bottom: var(--sp-3); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--sp-2);
  background: repeating-linear-gradient(45deg, var(--tube), var(--tube) 10px, #1c1622 10px, #1c1622 20px);
  position: relative;
}
.corner-bug { position: absolute; bottom: 6px; right: 6px; width: 28px; height: auto; opacity: .92; }
.bug-caption { color: var(--line); font-size: var(--fs-xs); letter-spacing: .04em; margin-top: var(--sp-4); font-style: italic; }
.thumb-1 { background: repeating-linear-gradient(45deg, #1c1013, #1c1013 10px, var(--magenta) 10px, var(--magenta) 11px); }
.thumb-2 { background: repeating-linear-gradient(135deg, #101c14, #101c14 10px, var(--toxic) 10px, var(--toxic) 11px); }
.thumb-3 { background: repeating-linear-gradient(90deg, #14101c, #14101c 12px, var(--line) 12px, var(--line) 13px); }
.runtime { font-size: var(--fs-xs); background: #000; padding: 2px 6px; opacity: .8; }
.show-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.show-meta { font-size: var(--fs-xs); opacity: .6; margin: 0; }
.glitch-num { color: var(--magenta); }

.signal { padding: var(--sp-7) 0; border-top: 1px dashed var(--line); }
.signal-label { color: var(--toxic); font-size: var(--fs-xs); letter-spacing: .18em; margin-bottom: var(--sp-3); }
.signal-body { opacity: .6; max-width: 60ch; }

footer { text-align: center; padding: var(--sp-6) 0 var(--sp-8); color: var(--line); font-size: var(--fs-xs); letter-spacing: .12em; }
.footer-bug { width: 32px; height: auto; opacity: .6; margin-bottom: var(--sp-3); }

:focus-visible { outline: 2px solid var(--toxic); outline-offset: 3px; }