/* ==========================================================================
   ep1cLIVE — Y2K EDITION
   A 2003-ish fan portal: starfield, chrome logo, beveled windows, gel buttons,
   a scrolling marquee and a hit counter. Same real schedule / live-status data
   as before. No pink, no sparkle — chrome, neon and LEDs instead.
   ========================================================================== */

:root {
  /* deep space ------------------------------------------------------------ */
  --space:     #04050f;
  --space-2:   #0a1030;
  --panel:     #0e1738;
  --panel-2:   #16224e;

  /* ink ------------------------------------------------------------------- */
  --ink:       #eef4ff;
  --ink-dim:   #93a6d0;
  --ink-faint: #5c6c98;

  /* chrome + neon --------------------------------------------------------- */
  --cyan:      #38d9ff;
  --cyan-lt:   #a6ecff;
  --blue:      #1f57e0;
  --hot:       #ff2b52;
  --lime:      #a6ff2e;
  --gold:      #ffd23f;
  --magenta:   #ff4fd8;

  /* bevel light / shadow -------------------------------------------------- */
  --hi: rgba(255, 255, 255, 0.34);
  --lo: rgba(0, 0, 0, 0.62);

  --gap: clamp(0.85rem, 2.2vw, 1.6rem);
  --pad: clamp(1rem, 4vw, 3rem);

  /* period-accurate font stacks — nothing to download --------------------- */
  --body: Verdana, Geneva, Tahoma, "DejaVu Sans", Arial, sans-serif;
  --ui:   Tahoma, Verdana, Geneva, Arial, sans-serif;
  --head: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --logo: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --mono: "Courier New", Courier, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
  /* the starfield: a few layers of dots at different sizes so it never reads
     as one obvious grid */
  background-color: var(--space);
  background-image:
    radial-gradient(120% 80% at 50% -15%, #16276b 0%, rgba(22,39,107,0) 62%),
    radial-gradient(1px 1px at 40px 60px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 130px 150px, #bfe4ff 99%, transparent),
    radial-gradient(2px 2px at 220px 40px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 300px 200px, #8fe6ff 99%, transparent),
    radial-gradient(1px 1px at 90px 265px, #ffffff 99%, transparent),
    radial-gradient(2px 2px at 350px 320px, #cfefff 99%, transparent);
  background-size: 100% 100%, 340px 340px, 420px 420px, 500px 500px, 380px 380px, 300px 300px, 460px 460px;
  background-attachment: fixed;
}

/* a second star layer that twinkles on top of the first */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(1px 1px at 70px 30px, #ffffff 99%, transparent),
    radial-gradient(2px 2px at 180px 120px, #d6f2ff 99%, transparent),
    radial-gradient(1px 1px at 260px 220px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 30px 180px, #ffffff 99%, transparent);
  background-size: 260px 260px, 360px 360px, 440px 440px, 320px 320px;
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } }

h1, h2, h3 { margin: 0; line-height: 1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--cyan-lt); }
button { font: inherit; color: inherit; }

::selection { background: var(--hot); color: #fff; }

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

.skip {
  position: absolute; left: 0.6rem; top: -5rem; z-index: 90;
  background: var(--gold); color: #241a00;
  padding: 0.5rem 0.9rem; font: 700 12px/1 var(--ui); text-decoration: none;
  border: 1px solid #000; border-radius: 4px;
}
.skip:focus { top: 0.6rem; }

/* ========================================================================== */
/*  MARQUEE — the classic scrolling welcome strip at the very top             */
/* ========================================================================== */
.marquee {
  position: relative; z-index: 5;
  overflow: hidden;
  border-bottom: 2px solid #000;
  background: linear-gradient(180deg, #213a86 0%, #14225a 48%, #0b1440 52%, #1d3079 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  padding: 0.35rem 0;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 34s linear infinite;
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > span { padding-right: 3rem; white-space: nowrap; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ========================================================================== */
/*  SITE COLUMN — a centered fixed-width column, like every good 2003 page    */
/* ========================================================================== */
.site {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(10, 16, 48, 0.92), rgba(5, 8, 24, 0.94));
  border-left: 1px solid #1b2a63;
  border-right: 1px solid #1b2a63;
  box-shadow: 0 0 0 1px #01030c, 0 0 60px rgba(0, 0, 0, 0.75);
}

/* ========================================================================== */
/*  HEADER RAIL                                                              */
/* ========================================================================== */
.rail {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--gap);
  flex-wrap: wrap;
  padding: 0.6rem var(--pad);
  border-bottom: 1px solid #000;
  background: linear-gradient(180deg, #1b2d70 0%, #101c4c 55%, #0a1238 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 0 rgba(0, 0, 0, 0.5);
}
.rail__mark {
  font: 700 20px/1 var(--head);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(56, 217, 255, 0.6);
}
.rail__mark span { color: var(--hot); text-shadow: 0 1px 0 #000; }

.rail__nav { margin-left: auto; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

.tally {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 700 11px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  background: #070c22;
  border: 1px solid #000; border-radius: 4px;
  padding: 0.4rem 0.65rem;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.8), inset -1px -1px 0 rgba(120, 150, 210, 0.2);
  white-space: nowrap;
}
.tally__lamp {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: #2a3358;
  box-shadow: inset 0 0 0 1px #000;
}
body.is-live .tally { color: var(--hot); border-color: #4a0a15; }
body.is-live .tally__lamp {
  background: var(--hot);
  box-shadow: 0 0 6px var(--hot), 0 0 14px rgba(255, 43, 82, 0.7);
  animation: lamp 1.6s ease-out infinite;
}
@keyframes lamp {
  0%   { box-shadow: 0 0 6px var(--hot), 0 0 0 0 rgba(255, 43, 82, 0.55); }
  70%  { box-shadow: 0 0 6px var(--hot), 0 0 0 8px rgba(255, 43, 82, 0); }
  100% { box-shadow: 0 0 6px var(--hot), 0 0 0 0 rgba(255, 43, 82, 0); }
}

/* rainbow divider — the single most 2000s element on the page */
.bars { display: grid; grid-template-columns: repeat(7, 1fr); height: 7px; }
.bars i { display: block; }
.bars i:nth-child(1) { background: #ff2b52; }
.bars i:nth-child(2) { background: #ff8a1e; }
.bars i:nth-child(3) { background: #ffd23f; }
.bars i:nth-child(4) { background: #7cf03c; }
.bars i:nth-child(5) { background: #38d9ff; }
.bars i:nth-child(6) { background: #4a6bff; }
.bars i:nth-child(7) { background: #b23cff; }
.bars--foot { border-top: 1px solid #000; }

/* ========================================================================== */
/*  GEL BUTTONS                                                              */
/* ========================================================================== */
.gel {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 35, 80, 0.9);
  border: 1px solid #063f6b;
  border-radius: 8px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(to bottom, #82ddff 0%, #26a9ed 48%, #0b6fc4 52%, #4fbbff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 35, 80, 0.5),
    0 2px 0 #04305a,
    0 4px 8px rgba(0, 0, 0, 0.45);
}
.gel:hover { filter: brightness(1.13); }
.gel:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(0, 30, 70, 0.65);
}

/* nav links rendered as small gel pills */
.rail__nav a {
  display: inline-block;
  padding: 0.34rem 0.7rem;
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 30, 70, 0.9);
  border: 1px solid #0a3f78;
  border-radius: 6px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.25) 22%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(to bottom, #4f7ce0 0%, #24479f 50%, #16295f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.rail__nav a:hover { filter: brightness(1.25); }
.rail__nav a:active { transform: translateY(2px); }

/* ========================================================================== */
/*  HERO                                                                     */
/* ========================================================================== */
.hero { padding: clamp(1.6rem, 4vw, 3rem) var(--pad) clamp(1.8rem, 4vw, 3rem); }

.hero__kicker {
  font: 700 11px/1.5 var(--ui);
  letter-spacing: 0.22em;
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
  margin-bottom: 0.7rem;
}

.wordmark {
  font-family: var(--logo);
  font-size: clamp(3.2rem, 15.5vw, 12.5rem);
  line-height: 0.82;
  letter-spacing: 0.005em;
  margin: 0.1rem 0 0.5rem;
  background: linear-gradient(
    to bottom,
    #ffffff 0%, #dceeff 16%, #7d9bc0 33%, #ffffff 47%,
    #93b6da 59%, #eef7ff 73%, #5c7ea6 87%, #dbe9f7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(3, 8, 24, 0.9);
  filter:
    drop-shadow(0 3px 0 #050a1e)
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 20px rgba(56, 217, 255, 0.25));
}
/* the LIVE half carries the on-air state; off air it is just more chrome */
.wordmark__live {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.is-live .wordmark__live {
  background-image: linear-gradient(to bottom, #ffffff 0%, #ff92a4 20%, #ff2b52 48%, #ffd6dd 62%, #b60016 100%);
  filter: drop-shadow(0 0 14px rgba(255, 43, 82, 0.75));
  animation: livepulse 1.15s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }

.hero__blink {
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.3em;
  color: var(--lime);
  text-shadow: 0 0 8px rgba(166, 255, 46, 0.7);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.hero__line {
  margin-top: var(--gap);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.7;
  max-width: 46ch;
  color: var(--ink-dim);
}
.hero__line em { font-style: normal; color: var(--cyan); }

/* ========================================================================== */
/*  WINDOW COMPONENT — beveled panes with a glossy title bar                 */
/* ========================================================================== */
.win {
  border: 1px solid #000;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 14%, var(--panel) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.14),
    inset -1px -1px 0 rgba(0, 0, 0, 0.6),
    0 6px 0 rgba(0, 0, 0, 0.45),
    0 12px 26px rgba(0, 0, 0, 0.55);
}
.win__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(180deg, #6cc6ff 0%, #1f6fe6 46%, #0d45b6 54%, #3a90ff 100%);
  border-bottom: 1px solid #041036;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.win__ico {
  width: 12px; height: 12px; flex: none; border-radius: 2px;
  background: linear-gradient(#fff2a8, #ffb400);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(0, 0, 0, 0.4);
}
.win__title { flex: 1; }
.win__badge {
  font: 700 9px/1 var(--ui); letter-spacing: 0.1em;
  padding: 3px 5px; border-radius: 3px;
  color: #16130a;
  background: linear-gradient(#ffe9a8, #f0b429);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}
body.is-live .win__badge { color: #fff; background: linear-gradient(#ff7d90, #c1001f); }
.win__body { padding: 0.9rem; }
/* the little red close box every 2003 window had, purely decorative */
.win__bar::after {
  content: ""; flex: none;
  width: 13px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, #ffb3b3 0%, #e01e1e 55%, #a30000 100%);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(0, 0, 0, 0.4);
}

/* readout ---------------------------------------------------------------- */
.readout__state {
  font: 700 10px/1 var(--ui); letter-spacing: 0.1em;
  padding: 3px 6px; border-radius: 3px;
  color: #0d1020; background: linear-gradient(#c9d6ea, #8e9db6);
  border: 1px solid #000;
}
body.is-live .readout__state { color: #fff; background: linear-gradient(#ff7d90, #c1001f); }

.readout__now {
  font-weight: 700;
  color: var(--ink);
  padding: 0.15rem 0 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.readout__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; }
.readout__grid div {
  padding: 0.6rem 0.7rem 0.3rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.readout__grid div:last-child { border-right: 0; }
.readout__grid dt {
  font: 700 9px/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan-lt); margin-bottom: 0.45rem;
}
.readout__grid dd {
  margin: 0;
  font: 700 13px/1 var(--mono);
  color: var(--lime);
  text-shadow: 0 0 7px rgba(166, 255, 46, 0.4);
}
.readout__grid dd[data-empty="true"] { color: #3f4a70; text-shadow: none; }

/* next-sign-on ticket ---------------------------------------------------- */
.next {
  border-top: 4px solid #000;
  background: linear-gradient(180deg, #1b2b64 0%, #101c4c 14%, #0c1538 100%);
}
.next .win__bar { background: linear-gradient(180deg, #ff8fa3 0%, #e0294c 46%, #b01334 54%, #ff5c7a 100%); }
.next__when {
  font: 700 10px/1 var(--ui); letter-spacing: 0.16em;
  color: var(--gold); text-shadow: 0 1px 0 #000;
}
.next__day {
  font-family: var(--logo);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0.35rem 0 0.1rem;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(56, 217, 255, 0.5);
}
.next__slot { font: 700 11px/1.5 var(--ui); color: var(--ink-dim); letter-spacing: 0.05em; }

.countdown { display: flex; gap: 0.4rem; margin: 1rem 0 1.2rem; }
.led { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.32rem; min-width: 0; }
.led b {
  width: 100%;
  font: 700 clamp(1.25rem, 3.4vw, 1.9rem)/1.1 var(--mono);
  text-align: center;
  color: #8dffb0;
  text-shadow: 0 0 8px rgba(60, 255, 140, 0.7), 0 0 2px rgba(60, 255, 140, 0.95);
  background: #03070a;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 0.22rem 0.05rem;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.95), inset -1px -1px 0 rgba(90, 130, 160, 0.28);
}
.led span { font: 700 9px/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

.next__cta { margin-top: 0.2rem; }

/* ========================================================================== */
/*  TICKER                                                                    */
/* ========================================================================== */
.ticker {
  overflow: hidden;
  padding: 0.55rem 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: linear-gradient(180deg, #0d1538, #070b22 50%, #0d1538);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ticker__track {
  display: flex; width: max-content;
  animation: marquee 42s linear infinite;
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track > span { padding-right: 3rem; white-space: nowrap; }
.ticker__track b { color: var(--cyan); }

/* ========================================================================== */
/*  SECTIONS                                                                  */
/* ========================================================================== */
.band { padding: clamp(1.8rem, 5vw, 3.4rem) var(--pad); }
.band + .band { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.band__title {
  font-family: var(--logo);
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(56, 217, 255, 0.45);
  margin-bottom: 0.5rem;
}
.band__title::after {
  content: " \25B6";
  color: var(--hot);
  font-size: 0.5em;
  vertical-align: middle;
  text-shadow: 0 0 10px rgba(255, 43, 82, 0.8);
}
.band__note { color: var(--ink-dim); max-width: 62ch; margin-bottom: clamp(1.1rem, 2.5vw, 1.7rem); }

/* schedule grid ---------------------------------------------------------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); }
.day {
  min-height: 9rem;
  padding: 0.85rem 0.7rem 1rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
}
.day:last-child { border-right: 0; }
.day__name { font: 700 10px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-lt); }
.day__time {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  color: #fff; text-shadow: 0 1px 0 #000;
}
.day__game { font-size: 0.82rem; color: var(--ink); font-weight: 700; }
.day__tag { font: 400 10px/1.5 var(--ui); color: var(--ink-faint); margin-top: auto; }
.day--off { background: rgba(0, 0, 0, 0.3); }
.day--off .day__time, .day--off .day__game { color: var(--ink-faint); text-shadow: none; }
.day--next {
  background: linear-gradient(180deg, rgba(56, 217, 255, 0.2), rgba(56, 217, 255, 0.03));
  box-shadow: inset 0 4px 0 var(--gold);
}
.day[data-today] .day__name { color: var(--lime); }
.day[data-today] .day__name::after { content: " \25C4 TODAY"; color: var(--lime); }

/* clips ------------------------------------------------------------------ */
.clips { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.clip {
  grid-column: span 3;
  display: block; text-decoration: none;
  border: 1px solid #000; border-radius: 7px; overflow: hidden;
  background: var(--panel);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.14), 0 5px 0 rgba(0, 0, 0, 0.45), 0 10px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease;
}
.clip--wide { grid-column: span 4; }
.clip--tall { grid-column: span 2; }
.clip__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: end start; padding: 0.6rem;
  background: linear-gradient(115deg, var(--c1, #1b2136) 0%, #05081a 45%, var(--c2, #262e46) 100%);
}
.clip__frame::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 11px);
  transform: rotate(-1deg);
}
.clip__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.clip__play {
  position: absolute; z-index: 3; left: 47%; top: 42%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 18px; color: #fff; padding-left: 4px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(255, 43, 82, 0.75));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.clip__tc {
  position: relative; z-index: 3;
  font: 700 10px/1 var(--mono);
  color: #d9ffe6; padding: 0.25rem 0.4rem;
  background: rgba(2, 6, 14, 0.85);
  border: 1px solid #000; border-radius: 3px;
}
.clip__meta {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid #000;
  background: linear-gradient(180deg, #1a2558, #101948);
}
.clip__title { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.clip__stat { margin-left: auto; font: 700 10px/1 var(--mono); color: var(--ink-faint); white-space: nowrap; }
.clip:hover { transform: translateY(-3px); }
.clip:hover .clip__meta { background: linear-gradient(180deg, #24357a, #16225e); }
.clip:hover .clip__play { background: radial-gradient(circle at 35% 30%, #fff, #ff2b52); }

/* rig -------------------------------------------------------------------- */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 clamp(1.2rem, 3vw, 2.6rem); margin: 0; }
.spec div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.spec dt { font: 700 10px/1.8 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-lt); }
.spec dd { margin: 0; font: 700 12px/1.8 var(--mono); color: var(--ink); text-align: right; }

.marks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.marks span {
  font: 700 10px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.32rem 0.55rem; border-radius: 3px;
  color: #041018;
  background: linear-gradient(#d8e6f5, #93a6c2);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* watch ------------------------------------------------------------------ */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.embed {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 8px, rgba(0, 0, 0, 0.12) 8px 16px),
    #03060f;
  display: grid; place-items: center; text-align: center; padding: 1.2rem;
}
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed__msg { font: 700 11px/1.9 var(--mono); color: var(--ink-faint); }

.links { display: flex; flex-direction: column; gap: 0.5rem; }
.linkbtn {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  border: 1px solid #000; border-radius: 7px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #1d2b64, #101a44);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset -1px -1px 0 rgba(0, 0, 0, 0.5), 0 3px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.1s ease;
}
.linkbtn:hover { filter: brightness(1.25); }
.linkbtn:active { transform: translateY(2px); }
.linkbtn__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid #000; border-radius: 6px;
  font: 700 11px/1 var(--ui); color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.45);
}
.linkbtn__ico::before { content: "?"; }
[data-ico="twitch"]  { background: linear-gradient(180deg, #b98cff, #5a1fd0); }
[data-ico="twitch"]::before  { content: "TW"; }
[data-ico="youtube"] { background: linear-gradient(180deg, #ff6b6b, #b00000); }
[data-ico="youtube"]::before { content: "YT"; }
[data-ico="twitter"] { background: linear-gradient(180deg, #86dcff, #1573b8); }
[data-ico="twitter"]::before { content: "X"; }
[data-ico="discord"] { background: linear-gradient(180deg, #9aa8ff, #4149cc); }
[data-ico="discord"]::before { content: "DC"; }
[data-ico="tiktok"]  { background: linear-gradient(180deg, #7bf5e0, #0c2b34); }
[data-ico="tiktok"]::before  { content: "TT"; }
[data-ico="mail"]    { background: linear-gradient(180deg, #e2ebf7, #8b98ae); color: #101728; }
[data-ico="mail"]::before    { content: "@"; }

.linkbtn__txt { display: flex; flex-direction: column; gap: 1px; font: 700 14px/1.2 var(--head); color: #fff; text-shadow: 0 1px 0 #000; }
.linkbtn__txt em { font: 700 10px/1.3 var(--ui); font-style: normal; color: var(--ink-dim); letter-spacing: 0.03em; word-break: break-all; }
.linkbtn__go { margin-left: auto; font: 700 18px/1 var(--ui); color: var(--cyan); }

/* ========================================================================== */
/*  FOOTER + EPHEMERA                                                         */
/* ========================================================================== */
footer { padding: clamp(1.4rem, 4vw, 2.4rem) var(--pad); border-top: 1px solid rgba(255, 255, 255, 0.07); }
.footer__grid { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.4rem); align-items: start; }

.counterwrap__label { font: 700 9px/1 var(--ui); letter-spacing: 0.16em; color: var(--cyan-lt); margin-bottom: 0.45rem; }
.counter { display: inline-flex; gap: 3px; padding: 5px; background: #141a30; border: 2px inset #6a7896; border-radius: 3px; }
.counter span {
  min-width: 1.15ch; padding: 3px 4px; text-align: center;
  font: 700 20px/1 var(--mono);
  color: #ffe9a8;
  text-shadow: 0 0 7px rgba(255, 220, 120, 0.55);
  background: linear-gradient(#0a0d18 0 48%, #4a5470 49% 51%, #10152a 52%);
  border: 1px solid #000;
}
.counterwrap__note { font: 400 10px/1.6 var(--ui); color: var(--ink-faint); margin-top: 0.4rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badge {
  display: inline-block;
  font: 700 9px/1 var(--ui); letter-spacing: 0.08em;
  padding: 5px 7px; border: 1px solid #000; border-radius: 3px;
  color: #05121f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(0, 0, 0, 0.3), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.badge--cyan    { background: linear-gradient(180deg, #c8f2ff, #4fb8e0); }
.badge--lime    { background: linear-gradient(180deg, #eaffb4, #9fdc2e); }
.badge--gold    { background: linear-gradient(180deg, #ffeeb2, #f0b429); }
.badge--magenta { background: linear-gradient(180deg, #ffc7f2, #d94ab8); }

.footer__links { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; text-align: right; }
.footer__links a { font: 700 11px/1.4 var(--ui); color: var(--cyan-lt); text-decoration: none; letter-spacing: 0.04em; }
.footer__links a:hover { color: var(--gold); }

.footer__rule { height: 1px; background: rgba(255, 255, 255, 0.09); margin: 1.4rem 0 0.9rem; }
.footer__legal { font: 400 10px/1.8 var(--ui); color: var(--ink-faint); letter-spacing: 0.03em; }

/* ========================================================================== */
/*  ENTRANCE + MOTION PREFERENCES                                             */
/* ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .tune > * { animation: tune-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .tune > *:nth-child(2) { animation-delay: 0.07s; }
  .tune > *:nth-child(3) { animation-delay: 0.13s; }
  .tune > *:nth-child(4) { animation-delay: 0.19s; }
  @keyframes tune-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee__track, .ticker__track { transform: none; }
  .hero__blink { opacity: 1; }
}

/* ========================================================================== */
/*  RESPONSIVE                                                                */
/* ========================================================================== */
@media (max-width: 1180px) {
  .site { border-left: 0; border-right: 0; }
}
@media (max-width: 60rem) {
  .hero__row, .watch { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: repeat(2, 1fr); }
  .day { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .day:nth-child(2n) { border-right: 0; }
  .clips { grid-template-columns: repeat(2, 1fr); }
  .clip, .clip--wide, .clip--tall { grid-column: span 1; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__links { align-items: flex-start; text-align: left; }
}
@media (max-width: 40rem) {
  .rail__nav a:not(.rail__nav-keep) { display: none; }
  .tally { order: 3; margin-left: auto; }
  .week { grid-template-columns: 1fr; }
  .day { border-right: 0; }
  .day__tag { margin-top: 0; }
  .countdown { flex-wrap: wrap; }
  .led { flex: 1 1 4rem; }
}

@media print {
  .marquee, .ticker, .rail, .stars, .bars, .clip__play { display: none !important; }
  body { background: #fff; color: #000; }
  .win, .clip, .linkbtn { border: 1px solid #999; box-shadow: none; background: #fff; }
  .band__title, .next__day, .wordmark { color: #000; -webkit-text-stroke: 0; filter: none; text-shadow: none; }
}