/* ============================================================ Livestream & Highlights — page-specific decoration. The broadcast half of the old GameDay & Broadcast page. It shares the same house style as pages/gameday.css (red-led, near-black broadcast surfaces) but is its own file: the two pages will drift as GameDay is revised, and a shared file would couple them. RED leads (the broadcast accent, same as GameDay), blue marks the Showtime/reach/thumbnail beats, green marks confirmations. Keyframes are global, so everything here is `ls`-prefixed. Note the marquee and live-dot animations are NOT redefined — they come from the design system (.xs-marquee, .xs-livedot). NOTE on

///: the theme and DS style bare elements at specificity 0,1,1, which beats any single-class rule here (0,1,0). Every rule below that lands on one of those is scoped under `.xs-page` for that reason. ============================================================ */ @keyframes lsGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}} /* ---------- hero ---------- */ /* The real overlay still sits behind the copy, scrimmed hard enough on the left that the headline keeps its contrast. */ .ls-hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;color:#fff; background:var(--ink-900)} .ls-hero__shot{position:absolute;top:0;right:0;bottom:0;width:min(66%,860px)} .ls-hero__shot img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block} .ls-hero__scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,#04070f 0%,#04070f 36%,rgba(4,7,15,.74) 54%,rgba(4,7,15,.3) 80%,rgba(4,7,15,.6) 100%)} /* the site header is fixed and transparent over the hero — hold solid black for its height before fading, same convention as every page */ .ls-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none; background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)} .ls-hero__foot{position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none; background:linear-gradient(0deg,var(--ink-900),transparent)} .ls-hero__glow{position:absolute;bottom:-160px;right:-120px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(204,0,0,.35),transparent 62%);filter:blur(24px); animation:lsGlow 7s ease-in-out infinite;pointer-events:none} .ls-hero__inner{position:relative;width:100%;padding-top:calc(130px + clamp(1rem,3vw,2.5rem))} .ls-hero__chips{display:flex;flex-wrap:wrap;gap:1.8rem;margin-top:2.6rem; color:rgba(255,255,255,.65);font-size:.9rem} .ls-hero__chip{display:inline-flex;align-items:center;gap:.5rem} .ls-hero__chip i{color:var(--red-500)} /* ---------- pain ---------- */ .ls-pain{background:#0b1120;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:26px} .ls-pain__icon{font-size:2.6rem;color:rgba(255,255,255,.25)} .ls-pain__title{font-family:var(--font-display);font-size:1.3rem;margin:.7rem 0 .3rem;color:#fff} .xs-page .ls-pain__body{color:rgba(255,255,255,.6);line-height:1.55;margin:0} .ls-kicker{text-align:center;font-family:var(--font-display); font-size:clamp(1.3rem,3vw,2rem);color:#fff} /* ---------- Showtime broadcast cue board ---------- */ .ls-board{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.6)} .ls-board__bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:10px 16px; background:#111a2e;border-bottom:1px solid rgba(255,255,255,.1);font-size:.72rem;color:rgba(255,255,255,.6)} .ls-board__name{font-family:var(--font-display);letter-spacing:.06em;color:#fff} .ls-board__air{display:inline-flex;align-items:center;gap:.4rem;color:var(--red-500);font-weight:700} .ls-board__body{padding:18px} .ls-board__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:520px){.ls-board__grid{grid-template-columns:repeat(2,1fr)}} /* Each cue is a real