/* Deployment checkpoint: mobile hero uses full-resolution shared artwork. */
/* HOME PAGE — page-local CSS loaded after /styles.css.
   Keep homepage-only work here. Shared nav/footer/tokens belong in /styles.css. */

/* HOME HERO · GAMING FEATURE CARDS · 2026-09-14 */
/* One authoritative layer for the current card structure. The previous revamp
   compressed five content beats into fixed 128–176px cards and then used
   !important to force them to fit. Reserve real room instead: cadence, name,
   mode, peak rank, and replay action all remain readable at every breakpoint. */
html:not(.is-live) #hero-games .hero-game-role{display:none}
html:not(.is-live) #hero-games>.hero-game{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.115);
  border-radius:14px;
  background:
    radial-gradient(circle at 92% 0%,rgba(130,255,255,.07),transparent 36%),
    linear-gradient(145deg,rgba(11,14,22,.95),rgba(6,8,13,.89));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 22px 50px -42px #000
}
html:not(.is-live) #hero-games>.hero-game::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(130,255,255,.5),rgba(130,255,255,.07) 50%,transparent 80%)
}
html:not(.is-live) #hero-games>.hero-game:nth-child(2)::after{
  background:linear-gradient(90deg,rgba(104,181,255,.44),rgba(104,181,255,.06) 50%,transparent 80%)
}
html:not(.is-live) #hero-games>.hero-game:nth-child(3)::after{
  background:linear-gradient(90deg,rgba(93,155,255,.44),rgba(93,155,255,.06) 50%,transparent 80%)
}
html:not(.is-live) #hero-games .hero-game-topline{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  min-height:22px
}
html:not(.is-live) #hero-games .hero-game-meta.hero-game-cadence{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:22px;
  margin:0;
  padding:5px 9px;
  overflow:visible;
  border:1px solid rgba(130,255,255,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(130,255,255,.12),rgba(130,255,255,.045));
  color:#b7c3ff;
  font-size:.56rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.095em;
  text-align:left;
  text-overflow:clip;
  white-space:nowrap;
  box-shadow:inset 0 1px rgba(255,255,255,.045)
}
html:not(.is-live) #hero-games>.hero-game .hero-game-name,
html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-name,
html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-name,
html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-name{
  position:static;
  display:block;
  width:max-content;
  max-width:100%;
  margin:0;
  overflow:visible;
  color:#f6f8fc;
  font-size:1.12rem;
  font-weight:860;
  line-height:1.12;
  text-decoration:none;
  text-overflow:clip;
  white-space:normal;
  transition:color .15s var(--ease)
}
html:not(.is-live) #hero-games>.hero-game .hero-game-name:hover{color:#bdc9ff}
html:not(.is-live) #hero-games .hero-game-details{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:5px 0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none
}
html:not(.is-live) #hero-games .hero-mode-rule{
  display:block;
  flex:none;
  width:3px;
  height:30px;
  margin:0;
  border-radius:999px;
  background:linear-gradient(180deg,#9eb0ff,rgba(116,139,235,.2))
}
html:not(.is-live) #hero-games .hero-mode-copy{
  display:grid;
  gap:3px;
  min-width:0
}
/* Reset legacy shared-card rules that still target the old span-based layout.
   Without these, the mode text becomes an inline row with a stray bullet and
   the first card's rank inherits an obsolete grid position. */
html:not(.is-live) #hero-games .hero-game-details>.hero-mode-copy{
  display:grid;
  align-items:initial;
  gap:3px;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none
}
html:not(.is-live) #hero-games .hero-game-details>span+span::before{
  content:none;
  display:none
}
html:not(.is-live) #hero-games .hero-mode-copy small{
  color:#808ba0;
  font-size:.7rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.1em
}
html:not(.is-live) #hero-games .hero-mode-copy strong{
  overflow:visible;
  color:#e9edf5;
  font-size:.76rem;
  font-weight:820;
  line-height:1.18;
  text-overflow:clip;
  white-space:normal
}
html:not(.is-live) #hero-games .hero-mode-copy em{
  color:#a0a9ba;
  font-size:.62rem;
  font-style:normal;
  font-weight:680;
  line-height:1.15
}
html:not(.is-live) #hero-games .hero-game-footer,
html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px;
  min-width:0;
  min-height:46px;
  margin-top:0;
  padding:7px 0 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.075)
}
html:not(.is-live) #hero-games .hero-game-footer>.hero-game-rank{
  grid-column:1;
  grid-row:1;
  align-self:center
}
/* The shared sheet still contains an older first-card placement rule
   (.hero-game:nth-child(1) .hero-game-rank) with higher specificity. Match
   that hierarchy here so Grandmaster cannot be pushed into a phantom row. */
html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer>.hero-game-rank{
  grid-column:1;
  grid-row:1;
  align-self:center
}
html:not(.is-live) #hero-games .hero-game-footer>.hero-game-youtube{
  grid-column:2;
  grid-row:1
}
html:not(.is-live) #hero-games .hero-game-rank{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  justify-content:start;
  gap:8px;
  min-width:0;
  min-height:39px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none
}
html:not(.is-live) #hero-games .hero-rank-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:9px
}
html:not(.is-live) #hero-games .hero-rank-mark img{
  width:33px;
  height:33px;
  object-fit:contain
}
html:not(.is-live) #hero-games .hero-rank-copy{
  display:grid;
  gap:2px;
  min-width:0
}
html:not(.is-live) #hero-games .hero-rank-k{
  color:#7f8a9f;
  font-size:.7rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.095em
}
html:not(.is-live) #hero-games .hero-rank-name{
  overflow:visible;
  color:#f1f4f9;
  font-size:.76rem;
  font-weight:850;
  line-height:1.1;
  text-overflow:clip;
  white-space:nowrap
}
html:not(.is-live) #hero-games .hero-game-youtube{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
  align-self:end;
  gap:6px;
  min-width:80px;
  min-height:28px;
  padding:4px 2px 3px;
  border:0;
  border-radius:0;
  background:none;
  color:#bac3d1;
  font-size:.62rem;
  font-weight:820;
  text-decoration:none;
  white-space:nowrap
}
html:not(.is-live) #hero-games .hero-game-youtube:hover{background:none;color:#fff}
html:not(.is-live) #hero-games .hero-game-youtube-arrow{
  width:10px;
  height:10px;
  color:#8493ca;
  transition:transform .15s var(--ease),color .15s var(--ease)
}
html:not(.is-live) #hero-games .hero-game-youtube:hover .hero-game-youtube-arrow{
  transform:translateX(2px);
  color:#bec9ff
}

/* Full desktop: one wide Marvel feature over two roomy secondary cards. */
@media (min-width:1280px){
  html:not(.is-live) body.home-page .hero-content{
    width:min(1180px,calc(100% - 48px));
    max-width:1180px;
    grid-template-columns:minmax(0,1fr) minmax(292px,318px);
    column-gap:28px
  }
  html:not(.is-live) .hero-main{min-width:0}
  html:not(.is-live) .hero-editorial,
  html:not(.is-live) .hero-schedule-focus,
  html:not(.is-live) #hero-games,
  html:not(.is-live) .hero-socials{width:100%;max-width:100%}
  html:not(.is-live) .hero-editorial{width:100%}
  html:not(.is-live) #hero-games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:184px 190px;
    gap:10px 12px;
    width:min(100%,1030px);
    margin-top:14px
  }
  html:not(.is-live) #hero-games>.hero-game,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1),
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){
    height:auto;
    min-height:0
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1){
    grid-column:1/-1;
    grid-row:1;
    grid-template-columns:138px minmax(0,1fr);
    grid-template-rows:184px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(2){
    grid-column:1;
    grid-row:2;
    grid-template-columns:142.5px minmax(0,1fr);
    grid-template-rows:190px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){
    grid-column:2;
    grid-row:2;
    grid-template-columns:142.5px minmax(0,1fr);
    grid-template-rows:190px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art{
    width:138px;
    min-width:138px;
    height:184px;
    min-height:184px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    width:142.5px;
    min-width:142.5px;
    height:190px;
    min-height:190px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-art{
    grid-column:1;
    grid-row:1;
    align-self:stretch;
    margin:0;
    border:0;
    border-right:1px solid rgba(255,255,255,.08);
    border-radius:0;
    background-color:#090c12;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy{
    position:static;
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(44px,1fr) auto;
    align-content:stretch;
    gap:6px;
    height:100%;
    min-height:0;
    max-height:100%;
    min-width:0;
    padding:12px 14px 11px;
    overflow:hidden
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-copy{
    grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    column-gap:26px;
    row-gap:6px;
    padding:12px 16px 11px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-topline{
    grid-column:1;
    grid-row:1
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-name{
    grid-column:1;
    grid-row:2;
    align-self:center;
    font-size:1.62rem
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-details{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-mode-rule{
    height:38px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-mode-copy small{
    font-size:.7rem
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-mode-copy strong{
    font-size:.88rem
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{
    grid-column:1/-1;
    grid-row:3
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-name,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-name{
    font-size:1.18rem
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-rank{
    max-width:300px;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-mark{
    width:44px;
    height:44px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-mark img{
    width:40px;
    height:40px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-k{
    font-size:.7rem
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-name{
    font-size:.9rem
  }
  html:not(.is-live) .hero-socials{width:min(100%,1030px)}
}

/* Short desktop viewports (including the owner's maximized Edge window):
   keep the full-sized game cards, but spend less vertical room on empty chrome
   above and between the existing hero groups. The social dock stays locked to
   the bottom; the cards now finish above it instead of disappearing behind it. */
@media (min-width:1280px) and (max-height:950px){
  /* A small deliberate gap below the nav, then denser rhythm everywhere else. */
  html:not(.is-live) .hero-content{padding-top:10px;padding-bottom:0}
  html:not(.is-live) .hero-editorial{padding:0}
  html:not(.is-live) body.home-page .hero-kicker{margin-bottom:12px}
  html:not(.is-live) body.home-page .hero-title{font-size:clamp(4.2rem,5vw,5.35rem)}
  html:not(.is-live) body.home-page .hero-message-body{margin-top:10px}
  html:not(.is-live) body.home-page .hero-tagline{font-size:clamp(1.1rem,1.4vw,1.34rem)}
  html:not(.is-live) body.home-page .hero-lede{margin-top:7px;font-size:.77rem;line-height:1.32}
  html:not(.is-live) body.home-page .hero-now{margin-top:9px;padding:4px 7px}
  html:not(.is-live) body.home-page .hero-schedule-focus.hero-schedule-inline{
    margin-top:6px;padding:5px 0 6px;border-top:0
  }
  html:not(.is-live) body.home-page .hero-schedule-hours{font-size:clamp(1.65rem,2.1vw,2.15rem)}
  html:not(.is-live) #hero-games{grid-template-rows:144px 150px;gap:8px 12px;margin-top:5px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1){grid-template-rows:144px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){grid-template-rows:150px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art{
    width:108px;min-width:108px;height:144px;min-height:144px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    width:112.5px;min-width:112.5px;height:150px;min-height:150px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy{
    grid-template-rows:auto auto minmax(30px,1fr) auto;gap:3px;padding:8px 10px 7px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-copy{
    column-gap:18px;row-gap:3px;padding:8px 12px 7px
  }
  html:not(.is-live) #hero-games .hero-game-details{min-height:32px;padding:2px 0}
  html:not(.is-live) #hero-games .hero-mode-rule{height:25px}
  html:not(.is-live) #hero-games .hero-game-footer,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{
    min-height:36px;padding-top:4px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-mark{width:36px;height:36px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-rank-mark img{width:32px;height:32px}
  html:not(.is-live) .hero-social-row{min-height:46px;padding:5px 7px}
  html:not(.is-live) .hero-social-btn{min-height:34px;padding:4px 6px}
  html:not(.is-live) .hero-live-card{align-self:end;padding:17px;gap:7px}
  html:not(.is-live) .hero-live-card .hlc-digits{font-size:clamp(2.15rem,2.55vw,2.9rem)}
}
@media (min-width:1280px) and (max-height:860px){
  html:not(.is-live) .hero-content{padding-top:9px}
  html:not(.is-live) body.home-page .hero-kicker{margin-bottom:9px}
  html:not(.is-live) body.home-page .hero-title{font-size:clamp(4rem,4.8vw,5.1rem)}
  html:not(.is-live) body.home-page .hero-message-body{margin-top:7px}
  html:not(.is-live) body.home-page .hero-tagline{font-size:clamp(1.02rem,1.3vw,1.24rem)}
  html:not(.is-live) body.home-page .hero-lede{margin-top:5px;font-size:.73rem;line-height:1.28}
  html:not(.is-live) body.home-page .hero-now{margin-top:7px}
  html:not(.is-live) body.home-page .hero-schedule-focus.hero-schedule-inline{margin-top:4px;padding:4px 0 5px}
  html:not(.is-live) body.home-page .hero-schedule-hours{font-size:1.85rem}
  html:not(.is-live) #hero-games{grid-template-rows:132px 138px;gap:7px 10px;margin-top:4px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1){grid-template-rows:132px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){grid-template-rows:138px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art{
    width:99px;min-width:99px;height:132px;min-height:132px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    width:103.5px;min-width:103.5px;height:138px;min-height:138px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy{padding:7px 9px 6px}
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-copy{padding:7px 11px 6px}
  html:not(.is-live) #hero-games .hero-game-details{min-height:28px}
  html:not(.is-live) #hero-games .hero-game-footer,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{min-height:33px;padding-top:3px}
  html:not(.is-live) .hero-social-row{min-height:42px;padding:4px 6px}
  html:not(.is-live) .hero-social-btn{min-height:31px;padding:3px 5px}
  html:not(.is-live) .hero-live-card{padding:15px;gap:6px}
  html:not(.is-live) .hero-live-card .hlc-digits{font-size:2.35rem}
}
/* Mid-width desktop: stack the three feature cards rather than squeeze two
   secondary cards into a narrow left column beside Next Stream. */
@media (min-width:980px) and (max-width:1279px){
  html:not(.is-live) #hero-games{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,176px);
    gap:10px;
    height:auto
  }
  html:not(.is-live) #hero-games>.hero-game,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1),
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){
    grid-column:1;
    grid-row:auto;
    grid-template-columns:132px minmax(0,1fr);
    height:176px;
    min-height:176px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    width:132px;
    min-width:132px;
    height:176px;
    min-height:176px;
    border-right:1px solid rgba(255,255,255,.08);
    background-size:cover
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-copy{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(48px,1fr) auto;
    gap:6px;
    height:176px;
    padding:11px 13px 10px
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-topline,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-name,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-details,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{
    grid-column:1;
    grid-row:auto
  }
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-name{font-size:1.18rem}
}

/* Tablet and phone: retain all information and let the hero grow vertically.
   The artwork remains a complete 3:4 poster and supplies the card's height. */
@media (max-width:979px){
  html:not(.is-live) #hero-games{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    gap:10px;
    height:auto
  }
  html:not(.is-live) #hero-games>.hero-game,
  html:not(.is-live) #hero-games>.hero-game:first-child,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1),
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){
    grid-column:1;
    grid-row:auto;
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:200px;
    height:200px;
    min-height:200px;
    padding:0
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1;
    width:150px;
    min-width:150px;
    height:200px;
    min-height:200px;
    margin:0;
    border:0;
    border-right:1px solid rgba(255,255,255,.08);
    border-radius:0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy{
    position:static;
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(48px,1fr) auto;
    gap:5px;
    height:200px;
    min-width:0;
    padding:10px 11px 9px;
    overflow:visible
  }
  html:not(.is-live) #hero-games .hero-game-meta.hero-game-cadence{
    min-height:20px;
    padding:4px 8px;
    font-size:.52rem
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-name{
    font-size:1rem;
    line-height:1.08
  }
  html:not(.is-live) #hero-games .hero-game-details{
    min-height:44px;
    padding:5px 0
  }
  html:not(.is-live) #hero-games .hero-mode-rule{height:28px}
  html:not(.is-live) #hero-games .hero-mode-copy small{font-size:.7rem}
  html:not(.is-live) #hero-games .hero-mode-copy strong{font-size:.69rem}
  html:not(.is-live) #hero-games .hero-mode-copy em{font-size:.56rem}
  html:not(.is-live) #hero-games .hero-game-rank{
    grid-template-columns:32px minmax(0,1fr);
    gap:7px;
    min-height:42px;
    padding:4px 7px
  }
  html:not(.is-live) #hero-games .hero-rank-mark{width:32px;height:32px}
  html:not(.is-live) #hero-games .hero-rank-mark img{width:29px;height:29px}
  html:not(.is-live) #hero-games .hero-rank-k{font-size:.7rem}
  html:not(.is-live) #hero-games .hero-rank-name{font-size:.7rem}
  html:not(.is-live) #hero-games .hero-game-youtube{
    min-width:76px;
    min-height:26px;
    padding:3px 0;
    font-size:.56rem
  }
  html:not(.is-live) #hero-games .hero-game-youtube span{display:inline}
}

@media (max-width:520px){
  html:not(.is-live) #hero-games .hero-game-footer,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:2px
  }
  html:not(.is-live) #hero-games .hero-game-footer>.hero-game-rank,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer>.hero-game-rank{
    grid-column:1;
    grid-row:1;
    width:100%
  }
  html:not(.is-live) #hero-games .hero-game-footer>.hero-game-youtube,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-footer>.hero-game-youtube{
    grid-column:1;
    grid-row:2;
    justify-self:end;
    min-height:24px;
    padding-block:1px
  }
}

@media (max-width:360px){
  html:not(.is-live) #hero-games>.hero-game,
  html:not(.is-live) #hero-games>.hero-game:first-child,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1),
  html:not(.is-live) #hero-games>.hero-game:nth-child(2),
  html:not(.is-live) #hero-games>.hero-game:nth-child(3){
    grid-template-columns:156px minmax(0,1fr);
    grid-template-rows:208px;
    height:208px;
    min-height:208px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(1) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(2) .hero-game-art,
  html:not(.is-live) #hero-games>.hero-game:nth-child(3) .hero-game-art{
    width:156px;
    min-width:156px;
    height:208px;
    min-height:208px
  }
  html:not(.is-live) #hero-games>.hero-game .hero-game-copy,
  html:not(.is-live) #hero-games>.hero-game:nth-child(n+2) .hero-game-copy{
    height:208px;
    padding:9px 9px 8px
  }
  html:not(.is-live) #hero-games .hero-game-meta.hero-game-cadence{font-size:.48rem}
  html:not(.is-live) #hero-games>.hero-game .hero-game-name{font-size:.94rem}
  html:not(.is-live) #hero-games .hero-mode-copy strong{font-size:.65rem}
  html:not(.is-live) #hero-games .hero-mode-copy em{font-size:.52rem}
  html:not(.is-live) #hero-games .hero-rank-name{font-size:.66rem}
  html:not(.is-live) #hero-games .hero-game-youtube{font-size:.52rem}
}


/* HOME · FIRST-PAINT LIVE STATE GATE · 2026-09-15 */
/* deployment-fingerprint: live-first-paint-v2 */
.home-live-gate{display:none}
html.home-live-pending{
  background:#08090d
}
html.home-live-pending body{
  overflow:hidden
}
html.home-live-pending #site-nav,
html.home-live-pending main,
html.home-live-pending #site-footer{
  visibility:hidden
}
html.home-live-pending .home-live-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:14px;
  min-height:100svh;
  background:
    radial-gradient(circle at 50% 38%,rgba(130,255,255,.09),transparent 34%),
    #08090d;
  opacity:0;
  animation:home-live-gate-in .16s .12s both
}
.home-live-gate-wordmark{
  color:#f4f6fb;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:850;
  letter-spacing:-.035em
}
.home-live-gate-dots{
  display:flex;
  gap:5px;
  height:6px
}
.home-live-gate-dots i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#91a5ff;
  opacity:.3;
  animation:home-live-dot .9s infinite ease-in-out
}
.home-live-gate-dots i:nth-child(2){animation-delay:.12s}
.home-live-gate-dots i:nth-child(3){animation-delay:.24s}
@keyframes home-live-gate-in{to{opacity:1}}
@keyframes home-live-dot{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  html.home-live-pending .home-live-gate{animation:none;opacity:1}
  .home-live-gate-dots i{animation:none;opacity:.65}
}
/* A fresh cached live answer is applied in <head>, before home.js has had a
   chance to swap the DOM classes. Keep the correct live composition visible
   from first paint instead of showing the offline hero for one frame. */
html.is-live:not(.home-live-pending) .hero-main,
html.is-live:not(.home-live-pending) .hero-live-card{
  display:none!important
}
html.is-live:not(.home-live-pending) #hero-takeover{
  display:grid!important
}

html.is-live:not(.home-live-pending) #hero-takeover{
  position:relative;
  border:1px solid rgba(130,255,255,.13);
  border-radius:20px;
  background:linear-gradient(145deg,#10191d,#080c0f);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 28px 64px -52px #000;
  animation:none
}
html.is-live .ht-simulcast{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px
}
html.is-live .ht-sim-label{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin:0}
.ht-live-dot{width:7px;height:7px;border-radius:50%;background:#ff3d4a;box-shadow:0 0 0 5px rgba(255,61,74,.13);animation:home-live-dot-pulse 1.5s ease-in-out infinite}
html.is-live .ht-platform-btn{--platform:#fff;justify-content:flex-start;border-color:color-mix(in srgb,var(--platform) 42%,transparent);background:color-mix(in srgb,var(--platform) 12%,rgba(0,0,0,.42))}
html.is-live .ht-platform-btn b{margin-left:auto;color:var(--platform);font-size:.48rem;letter-spacing:.12em}
.ht-platform-twitch{--platform:#a970ff}.ht-platform-youtube{--platform:#ff4352}.ht-platform-kick{--platform:#53fc18}.ht-platform-tiktok{--platform:#69f4ef}.ht-platform-x{--platform:#fff}.ht-platform-facebook{--platform:#68a4ff}
@keyframes home-live-glow{50%{border-color:rgba(255,91,99,.92);box-shadow:0 0 0 1px rgba(255,55,67,.16),0 0 48px rgba(255,25,43,.28)}}
@keyframes home-live-dot-pulse{50%{transform:scale(1.18);box-shadow:0 0 0 7px rgba(255,61,74,.08)}}
@media(max-width:640px){
  html.is-live .ht-simulcast{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.is-live .ht-platform-btn,
  html.is-live .ht-platform-btn:nth-of-type(4),
  html.is-live .ht-platform-btn:nth-of-type(5){grid-column:span 1;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){html.is-live:not(.home-live-pending) #hero-takeover,.ht-live-dot{animation:none}}


/* HOME · STREAM RECORD CALENDAR + STREAK POLISH · 2026-09-15 */
/* Calendar: keep every region in its own track. The old desktop rule used a
   380px hard cap plus a fixed summary column, which became cramped at the
   owner's 1668px viewport and let selected-night/detail content visually run
   into adjacent regions. */
@media (min-width:1080px){
  #stream .bento-cal .streak-cal{
    display:grid;
    grid-template-columns:minmax(0,1fr) 176px;
    grid-template-rows:auto auto auto auto auto;
    column-gap:20px;
    row-gap:8px;
    align-items:start;
    min-width:0
  }
  #stream .bento-cal .streak-cal>*{min-width:0}
  #stream .bento-cal .sc-head{
    grid-column:1/-1;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-width:0
  }
  #stream .bento-cal .sc-step{
    flex:none;
    max-width:100%;
    white-space:nowrap
  }
  #stream .bento-cal .sc-dows{
    grid-column:1;
    grid-row:2;
    width:100%;
    max-width:none;
    margin:0
  }
  #stream .bento-cal .sc-grid{
    grid-column:1;
    grid-row:3;
    width:100%;
    max-width:none;
    margin:0
  }
  #stream .bento-cal .sc-detail{
    grid-column:1;
    grid-row:4;
    min-height:18px;
    margin:2px 0 0;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere
  }
  #stream .bento-cal .sc-pop{
    grid-column:1;
    grid-row:5
  }
  #stream .bento-cal .sc-foot{
    grid-column:2;
    grid-row:2/6;
    align-self:stretch;
    align-content:start;
    display:grid;
    gap:12px;
    min-width:0;
    margin:0;
    padding:4px 0 0 18px;
    border-top:0;
    border-left:1px solid var(--hair)
  }
  #stream .bento-cal .sc-sum{
    min-width:0;
    font-size:.68rem;
    line-height:1.45;
    overflow-wrap:anywhere
  }
  #stream .bento-cal .sc-legend{
    display:grid;
    justify-content:start;
    gap:7px;
    min-width:0
  }
}
@media (min-width:1080px) and (max-width:1240px){
  #stream .bento-cal .streak-cal{
    grid-template-columns:minmax(0,1fr) 154px;
    column-gap:16px
  }
  #stream .bento-cal .sc-foot{padding-left:14px}
}

/* BEST STREAK gets one strong visual hierarchy instead of four similarly
   weighted lines. The record leads, the end-date reads as supporting context,
   and the current run becomes a separate live/accent chip when present. */
#stream #record-grid .rec-card:first-child{
  position:relative;
  overflow:hidden;
  min-height:128px;
  padding:17px 18px 16px 20px;
  border-color:rgba(130,255,255,.17);
  background:
    radial-gradient(circle at 88% 18%,rgba(130,255,255,.14),transparent 38%),
    linear-gradient(145deg,rgba(15,20,32,.94),rgba(8,11,18,.92))
}
#stream #record-grid .rec-card:first-child::before{
  width:3px;
  background:linear-gradient(180deg,#9cb0ff,#677de8 58%,rgba(103,125,232,.12))
}
#stream #record-grid .rec-card:first-child::after{
  content:"";
  position:absolute;
  top:-38px;
  right:-28px;
  width:120px;
  height:120px;
  border:1px solid rgba(130,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 20px rgba(130,255,255,.025),0 0 0 40px rgba(130,255,255,.012);
  pointer-events:none
}
#stream #record-grid .rec-card:first-child .rec-label{
  color:#9eacf0;
  font-size:.58rem;
  letter-spacing:.16em
}
#stream #record-grid .rec-card:first-child .rec-big{
  position:relative;
  z-index:1;
  margin-top:8px;
  color:#eef1ff;
  font-size:clamp(1.7rem,2.6vw,2.25rem);
  line-height:.95;
  letter-spacing:-.04em
}
#stream #record-grid .rec-card:first-child .rec-sub{
  position:relative;
  z-index:1;
  max-width:26ch;
  margin-top:9px;
  color:#9aa5b9;
  font-size:.58rem;
  line-height:1.35;
  letter-spacing:.08em
}
#stream #record-grid .rec-card:first-child .rec-month:not(.state-hidden){
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:5px 8px;
  border:1px solid rgba(130,255,255,.16);
  border-radius:999px;
  background:rgba(130,255,255,.07);
  color:#aebcff;
  font-size:.55rem;
  font-weight:850;
  line-height:1;
  letter-spacing:.08em
}

/* HOME · CREATOR STUDIO · 2026-09-18 */
body.home-page{
  --brand-cyan:#82ffff;
  --bg:#080b0d;--bg-2:#0b1013;--surface:#10161a;--text:#f4f8f8;
  --muted:#a6b1b3;--dim:#748184;--accent:#82ffff;--accent-2:#c4ffff;
  --accent-line:rgba(130,255,255,.24);
  --grad:linear-gradient(115deg,#f8fbfa 0%,#82ffff 100%);
  --hair:rgba(255,255,255,.085);--hair-2:rgba(255,255,255,.14);
  --card:linear-gradient(155deg,rgba(15,22,26,.96),rgba(7,11,14,.97));
  background:radial-gradient(circle at 78% 2%,rgba(130,255,255,.055),transparent 28%),#080b0d;color:var(--text)
}
body.home-page .display em,body.home-page .display .accent{
  background:linear-gradient(115deg,#f8fbfa,#82ffff);-webkit-background-clip:text;background-clip:text;color:transparent
}

body.home-page .nav-inner{
  border-color:rgba(130,255,255,.09);
  background:rgba(6,10,13,.88)
}
body.home-page .nav-links a.active,
body.home-page .nav-links a[aria-current="page"]{
  color:#eaffff;
  background:rgba(130,255,255,.08);
  box-shadow:inset 0 -2px #82ffff
}
body.home-page .nav-watch{
  border-color:rgba(130,255,255,.22);
  background:linear-gradient(135deg,#b9ffff,#82ffff);
  color:#061012
}

/* Hero */
html:not(.is-live) body.home-page .hero{min-height:100svh;background:#09090c}
html:not(.is-live) body.home-page .hero-bg{
  opacity:.62;object-position:center 48%;filter:saturate(.72) contrast(1.08) brightness(.62);transform:none
}
html:not(.is-live) body.home-page .hero-scrim{
  background:linear-gradient(90deg,rgba(6,6,9,.97),rgba(7,7,10,.88) 34%,rgba(8,8,12,.5) 62%,rgba(8,8,12,.25) 78%,rgba(7,7,10,.66)),
             linear-gradient(180deg,rgba(6,6,9,.36),rgba(6,6,9,.06) 42%,#09090c)
}
html:not(.is-live) body.home-page .hero-message{display:block;max-width:900px;padding:0}
html:not(.is-live) body.home-page .hero-kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 15px;color:#b7ffff;font-size:.58rem;font-weight:850;letter-spacing:.16em
}
html:not(.is-live) body.home-page .hero-kicker>span{
  width:34px;height:1px;background:linear-gradient(90deg,#82ffff,rgba(130,255,255,.08))
}
html:not(.is-live) body.home-page .hero-title{
  display:block;width:auto;max-width:100%;margin:0;font-size:clamp(4.55rem,6.55vw,7.35rem);line-height:.86;letter-spacing:-.067em
}
html:not(.is-live) body.home-page .hero-brand-title{color:#f8f5ef;text-shadow:0 22px 70px rgba(0,0,0,.42)}
html:not(.is-live) body.home-page .hero-message-body{display:block;margin-top:18px}
html:not(.is-live) body.home-page .hero-tagline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.12em .34em;margin:0;color:#d9d5dd;
  font-family:'Manrope',sans-serif;font-size:clamp(1.28rem,1.8vw,1.78rem);font-weight:780;line-height:1.08;letter-spacing:-.035em
}
html:not(.is-live) body.home-page .hero-tagline-accent{color:#82ffff}
html:not(.is-live) body.home-page .hero-lede{max-width:56ch;margin:11px 0 0;color:#a8a4ae;font-size:.92rem;line-height:1.58}
html:not(.is-live) body.home-page .hero-now{
  position:static;display:inline-flex;width:max-content;max-width:100%;margin-top:15px;padding:5px 8px;
  border:1px solid rgba(130,255,255,.14);border-radius:999px;background:rgba(130,255,255,.055);
  color:#a5e8ea;font-size:.52rem;letter-spacing:.13em
}
html:not(.is-live) body.home-page .hero-schedule-focus.hero-schedule-inline{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;width:100%;margin:18px 0 0;padding:13px 0 14px;
  border:0;border-top:0;border-bottom:1px solid rgba(255,255,255,.075);
  border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none
}
html:not(.is-live) body.home-page .hero-schedule-copy{display:grid;gap:5px}
html:not(.is-live) body.home-page .hero-schedule-kicker{color:#c7c2ce;font-size:.54rem;letter-spacing:.14em}
html:not(.is-live) body.home-page .hero-schedule-dot{width:6px;height:6px;background:var(--live);box-shadow:0 0 12px rgba(255,84,104,.6)}
html:not(.is-live) body.home-page .hero-schedule-hours{display:flex;align-items:baseline;gap:9px;color:#f6f3ee;font-size:clamp(1.75rem,2.4vw,2.5rem);letter-spacing:-.05em}
html:not(.is-live) body.home-page .hero-schedule-hours small{color:#9893a1}
html:not(.is-live) body.home-page .hero-schedule-dash{color:#5ddde2}
html:not(.is-live) body.home-page .hero-schedule-link{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid rgba(130,255,255,.14);
  border-radius:9px;background:rgba(130,255,255,.05);color:#c9bdf2;font-size:.56rem;text-decoration:none;white-space:nowrap
}
html:not(.is-live) body.home-page .hero-schedule-link:hover{border-color:rgba(130,255,255,.28);background:rgba(130,255,255,.1);color:#fff}

/* Preferred hero components · restored from pre-redesign Home */
/* Game cards: keep their content, but give the rotation one consistent stage. */
html:not(.is-live) #hero-games>.hero-game{
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 100% 0,rgba(130,255,255,.055),transparent 34%),
    linear-gradient(145deg,rgba(11,14,22,.96),rgba(6,8,13,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 24px 54px -46px #000;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)
}
html:not(.is-live) #hero-games>.hero-game:hover{
  transform:translateY(-2px);
  border-color:rgba(130,255,255,.24);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 28px 58px -42px rgba(0,0,0,.96)
}
html:not(.is-live) #hero-games .hero-game-art{
  filter:saturate(.93) contrast(1.03)
}
html:not(.is-live) #hero-games .hero-game-name{
  letter-spacing:-.025em
}
html:not(.is-live) #hero-games .hero-rank-mark{
  border-color:rgba(130,255,255,.13);
  background:radial-gradient(circle at 50% 35%,rgba(130,255,255,.13),rgba(7,9,14,.78))
}
html:not(.is-live) #hero-games .hero-game-youtube{
  color:#aeb6c7
}
html:not(.is-live) #hero-games .hero-game-youtube:hover{
  color:#fff
}

/* Platform dock: one visual system, with platform identity carried by icons
   instead of ten unrelated button treatments. */
html:not(.is-live) .hero-socials{
  position:relative;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:
    radial-gradient(circle at 0 0,rgba(117,142,255,.09),transparent 38%),
    linear-gradient(145deg,rgba(11,14,22,.88),rgba(6,8,13,.84));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 30px 64px -52px #000;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}
html:not(.is-live) .hero-social-row{
  grid-template-columns:154px minmax(0,1fr);
  min-height:62px;
  padding:9px 10px
}
html:not(.is-live) .hero-social-row+.hero-social-row{
  border-top:1px solid rgba(255,255,255,.07)
}
html:not(.is-live) .hero-social-live{
  background:linear-gradient(90deg,rgba(117,142,255,.075),transparent 44%)
}
html:not(.is-live) .hero-social-rowhead{
  display:grid;
  align-content:center;
  justify-content:start;
  gap:4px;
  margin:0 6px
}
html:not(.is-live) .hero-social-label{
  color:#c4cffb;
  font-size:.58rem;
  letter-spacing:.14em
}
html:not(.is-live) .hero-social-note,
html:not(.is-live) .hero-social-row:not(.hero-social-live) .hero-social-note{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#777f90;
  font-size:.54rem;
  text-decoration:none
}
html:not(.is-live) .hero-social-links{
  display:grid;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  background:rgba(3,5,9,.40)
}
html:not(.is-live) .hero-live-links{
  grid-template-columns:repeat(6,minmax(0,1fr))
}
html:not(.is-live) .hero-follow-links{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
html:not(.is-live) .hero-social-btn{
  position:relative;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:6px 8px;
  border:0;
  color:#b0b7c4;
  font-size:.66rem;
  font-weight:760;
  transition:background .16s var(--ease),color .16s var(--ease)
}
html:not(.is-live) .hero-social-btn+.hero-social-btn{
  border-left:1px solid rgba(255,255,255,.055)
}
html:not(.is-live) .hero-social-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.045)
}
html:not(.is-live) .hero-social-icon{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.035)
}
html:not(.is-live) .hero-social-icon i{
  width:13px;
  height:13px
}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(1) .hero-social-icon{color:#b690ff;background:rgba(145,70,255,.11)}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(2) .hero-social-icon{color:#ff7c86;background:rgba(255,0,0,.085)}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(3) .hero-social-icon{color:#75f0a7;background:rgba(83,252,143,.075)}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(4) .hero-social-icon{color:#fff;background:rgba(255,255,255,.065)}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(5) .hero-social-icon{color:#fff;background:rgba(255,255,255,.055)}
html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(6) .hero-social-icon{color:#86aaff;background:rgba(80,118,255,.085)}
html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(1) .hero-social-icon{color:#f0a0dc;background:rgba(214,76,177,.08)}
html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(2) .hero-social-icon{color:#fff;background:rgba(255,255,255,.055)}
html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(3) .hero-social-icon{color:#ffe16b;background:rgba(255,225,107,.07)}
html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(4) .hero-social-icon{color:#aeb8ff;background:rgba(88,101,242,.11)}

/* Countdown card: make it a deliberate utility panel rather than a side box. */
html:not(.is-live) .hero-live-card{
  overflow:hidden;
  border:1px solid rgba(130,255,255,.16);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0,rgba(130,255,255,.15),transparent 40%),
    linear-gradient(150deg,rgba(15,19,30,.94),rgba(6,8,13,.90));
  box-shadow:0 34px 86px -50px #000,inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}
html:not(.is-live) .hero-live-card::before{
  content:"";
  position:absolute;
  inset:0 18px auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(130,255,255,.65),transparent)
}
html:not(.is-live) .hero-live-card .hlc-label{
  color:#b6f8f8;
  letter-spacing:.14em
}
html:not(.is-live) .hero-live-card .hlc-digits{
  margin-top:2px;
  color:#fff;
  letter-spacing:-.055em;
  text-shadow:0 14px 42px rgba(112,136,255,.18)
}
html:not(.is-live) .hero-live-card .hlc-sub{
  color:#8993a7
}
html:not(.is-live) .hero-live-card .hlc-next{
  border-color:rgba(130,255,255,.12);
  background:rgba(130,255,255,.045)
}
html:not(.is-live) .hero-live-card>#hlc-btn{
  min-height:44px;
  border-radius:10px;
  box-shadow:0 16px 34px -24px rgba(130,255,255,.62)
}
html:not(.is-live) .hlc-remind{
  gap:6px
}
html:not(.is-live) .hlc-remind a{
  border-radius:8px;
  background:rgba(255,255,255,.026)
}

/* Live */
html.is-live body.home-page .hero{background:#09090c}
html.is-live body.home-page .hero-bg{opacity:.42;filter:saturate(.65) contrast(1.08) brightness(.54)}
html.is-live body.home-page .ht-head{max-width:12ch;color:#f7f3ed;letter-spacing:-.05em}
html.is-live body.home-page .ht-sub{color:#97919e}
html.is-live body.home-page .ht-explore-link,
html.is-live body.home-page .ht-tracker-card{border-color:rgba(255,255,255,.075);border-radius:12px;background:rgba(14,13,18,.78);box-shadow:inset 0 1px rgba(255,255,255,.025)}
html.is-live body.home-page .ht-player{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#050507;box-shadow:0 34px 90px -54px #000}
html.is-live body.home-page .ht-platform-btn{border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.02)}

/* Featured + Highlights: one section, stream title first, two-up clip rows. */
#replays,#shorts,#community,#discover-tools,#stream{margin:0}
#replays{
  padding:78px 0 72px;
  background:radial-gradient(circle at 12% 0,rgba(130,255,255,.035),transparent 28%),#080d10
}
#replays .home-content-stage{
  display:grid;
  grid-template-columns:minmax(305px,.68fr) minmax(0,1.32fr);
  grid-template-areas:"head head" "featured clips";
  gap:23px 28px;min-width:0;padding:26px;overflow:hidden;
  border:1px solid rgba(130,255,255,.095);border-radius:23px;
  background:radial-gradient(circle at 92% 0,rgba(130,255,255,.055),transparent 34%),
    linear-gradient(145deg,#12181b,#090c0f);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 34px 86px -68px #000
}
#replays .home-content-head{
  grid-area:head;display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0
}
#replays .home-content-head .sec-kicker{margin-bottom:9px}
#replays .home-content-head h2{
  margin:0;font-size:clamp(2.35rem,3.8vw,3.85rem);line-height:.94;letter-spacing:-.048em
}
#replays .home-content-head>.side{flex:none}
#replays .home-featured-stream{
  grid-area:featured;display:flex;flex-direction:column;align-items:stretch;
  gap:12px;min-width:0;margin:0;padding:0 22px 0 0;
  border:0;border-right:1px solid rgba(255,255,255,.075);
  border-radius:0;background:none;box-shadow:none
}
#replays .home-featured-intro{min-width:0}
#replays .content-source{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;
  color:#a9e5e7;font-size:.59rem;letter-spacing:.12em
}
#replays #featured-vod-title{
  margin:0;color:#eefafa;font-family:'Manrope',sans-serif;
  font-size:clamp(1.13rem,1.5vw,1.52rem);font-weight:800;
  line-height:1.32;letter-spacing:-.028em;
  overflow-wrap:anywhere;text-wrap:pretty
}
#replays .vod-media{
  width:100%;min-width:0;overflow:hidden;
  border:1px solid rgba(130,255,255,.16);border-radius:14px;
  background:#0b1215;box-shadow:0 24px 60px -46px #000
}
#replays .vod-thumb{overflow:hidden;border-radius:13px}
#replays .missed-line{
  margin:0;padding:0;border:0;border-radius:0;background:none;min-width:0
}
#replays .missed-line .ml-head{display:none!important}
#replays .missed-line .ml-where{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin:0;align-items:stretch;min-width:0
}
#replays .ml-where .wl-block,
#replays .ml-where .wl-block+.wl-block{min-width:0;height:100%;margin:0}
#replays .ml-where .wl-free{
  border-color:rgba(130,255,255,.25);background:rgba(130,255,255,.04)
}
#replays .ml-where .wl-cond{
  background:rgba(130,255,255,.08);color:#c9ffff;
  border-bottom-color:rgba(130,255,255,.18)
}
#replays .ml-where .vod-locked{
  border-color:rgba(174,143,244,.26);background:rgba(174,143,244,.035)
}
#replays .ml-where .vod-lock{
  background:rgba(174,143,244,.10);color:#e0d2ff;
  border-bottom-color:rgba(174,143,244,.17)
}
#replays .ml-where .wl-cond,
#replays .ml-where .vod-lock{
  display:flex;align-items:center;min-width:0;min-height:43px;
  padding:7px 9px;font-size:.67rem;line-height:1.35;
  overflow-wrap:anywhere
}
#replays .ml-where .wl-go{
  min-width:0;min-height:37px;padding:7px 9px;
  color:#e7f5f5;font-size:.71rem;line-height:1.4;
  overflow-wrap:anywhere
}
#replays .home-featured-copy{min-width:0;margin:0}
#replays #vod-band-sub{max-width:34rem;margin:0;color:#a8b8ba;font-size:.78rem;line-height:1.5}
#replays .actions{margin-top:12px;gap:8px}
#replays .actions .btn{min-height:37px;padding:8px 11px;font-size:.68rem}

#shorts{grid-area:clips;min-width:0;margin:0;padding:0;background:none}
#shorts .home-highlights-head{
  display:flex;align-items:end;justify-content:space-between;
  gap:16px;margin:0 0 13px;padding:0;border:0
}
#shorts .home-highlights-head>div{min-width:0}
#shorts .home-highlights-head .sec-kicker{margin-bottom:7px}
#shorts .home-highlights-head h2{
  margin:0;font-size:clamp(1.65rem,2.45vw,2.35rem);line-height:.96;letter-spacing:-.04em
}
#shorts .home-highlight-actions{display:flex;align-items:center;gap:9px;flex:none}
#shorts .clip-rail-controls{display:flex;align-items:center;gap:5px}
#shorts .clip-rail-btn{
  display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid rgba(130,255,255,.14);border-radius:9px;
  background:rgba(130,255,255,.03);color:#bdd9da;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),opacity .15s var(--ease)
}
#shorts .clip-rail-btn:hover:not(:disabled){
  border-color:rgba(130,255,255,.32);background:rgba(130,255,255,.09);color:#fff
}
#shorts .clip-rail-btn:disabled{opacity:.3;cursor:default}
#shorts .clip-rail-btn i{width:11px;height:11px}
#shorts .yt-zone{padding:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
#shorts .home-clip-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;gap:12px;width:100%;min-width:0;
  max-height:570px;padding:0 8px 2px 0;
  overflow-x:hidden;overflow-y:auto;
  scroll-snap-type:y proximity;scroll-padding-top:1px;
  overscroll-behavior-block:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(130,255,255,.32) rgba(255,255,255,.035)
}
#shorts .home-clip-grid::-webkit-scrollbar{width:6px}
#shorts .home-clip-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
#shorts .home-clip-grid::-webkit-scrollbar-thumb{background:rgba(130,255,255,.30);border-radius:999px}
#shorts .clip-card{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  scroll-snap-align:start;overflow:hidden;
  border:1px solid rgba(130,255,255,.095);border-radius:12px;
  background:linear-gradient(145deg,#121b1e,#091013);
  box-shadow:inset 0 1px rgba(255,255,255,.024);
  transition:border-color .18s var(--ease),background .18s var(--ease)
}
#shorts .clip-card:hover{
  transform:none;border-color:rgba(130,255,255,.25);
  background:linear-gradient(145deg,#172328,#0b1518)
}
#shorts .clip-thumb{
  display:block;flex:none;grid-column:auto;grid-row:auto;
  width:100%;height:auto;min-height:0;aspect-ratio:16/9;
  overflow:hidden;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)
}
#shorts .clip-thumb img{width:100%;height:100%;object-fit:cover}
#shorts .clip-title{
  display:block;flex:1 1 auto;grid-column:auto;grid-row:auto;
  min-width:0;margin:0;padding:11px 12px 13px;
  color:#edf5f5;font-size:.78rem;line-height:1.38;
  overflow:visible;overflow-wrap:anywhere
}
#shorts .clip-meta{
  grid-column:auto;grid-row:auto;align-self:stretch;
  margin-top:auto;padding:9px 12px 10px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#b3cacb;font-size:.65rem
}
#shorts .home-clips-empty{grid-column:1/-1;min-width:0;padding:18px}
@media(max-width:1050px){
  #replays .home-content-stage{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "featured" "clips";gap:22px
  }
  #replays .home-featured-stream{
    padding:0 0 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.075)
  }
  #shorts .home-clip-grid{max-height:540px}
}
@media(max-width:700px){
  #replays .home-content-stage{padding:16px;border-radius:18px}
  #replays .home-content-head{align-items:flex-start;flex-direction:column;gap:8px}
  #shorts .home-highlights-head{align-items:flex-start;flex-direction:column;gap:9px}
  #shorts .home-highlight-actions{width:100%;justify-content:space-between}
  #shorts .home-clip-grid{max-height:520px;gap:9px;padding-right:6px}
}
@media(max-width:520px){
  #shorts .home-clip-grid{grid-template-columns:minmax(0,1fr)}
  #replays #featured-vod-title{font-size:1.1rem}
}
/* Discover · curated destinations, not another dashboard */
#discover-tools{
  padding:76px 0 82px;
  background:#080d10
}
#discover-tools .wrap{display:block}
#discover-tools .sec-kicker{justify-self:auto}
#discover-tools .home-tools-head{
  display:flex;align-items:end;justify-content:space-between;gap:32px;margin:0 0 24px;padding:0;border:0
}
#discover-tools .home-tools-head::after{display:none}
#discover-tools .home-tools-head h2{
  max-width:12ch;margin:0;font-size:clamp(2.55rem,4.3vw,4.25rem);line-height:.92;letter-spacing:-.048em
}
#discover-tools .home-tools-lede{
  max-width:30rem;margin:0 0 3px;color:#918b98;font-size:.88rem;line-height:1.58
}
#discover-tools .home-tools-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;border:0;background:none
}
#discover-tools .home-tool-card{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr auto;
  gap:13px 13px;min-width:0;min-height:191px;padding:19px;overflow:hidden;
  border:1px solid rgba(255,255,255,.075);border-radius:17px;
  background:linear-gradient(150deg,rgba(17,16,22,.92),rgba(10,10,14,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.028);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)
}
#discover-tools .home-tool-card:hover{
  transform:translateY(-2px);border-color:rgba(130,255,255,.16);
  background:linear-gradient(150deg,rgba(20,18,27,.96),rgba(11,10,16,.98))
}
#discover-tools .home-tool-card::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,rgba(130,255,255,.9),rgba(130,255,255,.08) 62%,transparent)
}
#discover-tools .home-tool-card::after{display:none}
#discover-tools .home-tool-icon{
  grid-column:1;grid-row:1;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(130,255,255,.15);border-radius:12px;background:rgba(130,255,255,.07);color:#82ffff
}
#discover-tools .home-tool-copy{grid-column:2;grid-row:1/3;min-width:0}
#discover-tools .home-tool-k{display:block;margin-bottom:5px;color:#729da0;font-size:.49rem;letter-spacing:.13em}
#discover-tools .home-tool-copy h3{margin:0;color:#f0ece6;font-size:1.25rem;line-height:1.08}
#discover-tools .home-tool-copy p{max-width:32rem;margin:8px 0 0;color:#8d8793;font-size:.75rem;line-height:1.5}
#discover-tools .home-tool-actions{
  grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:7px;min-width:0;margin-top:auto
}
#discover-tools .home-tool-actions .btn{min-width:0;min-height:37px;padding:8px 11px;font-size:.62rem}
#discover-tools .home-tool-card.home-tool-feature{
  border-color:rgba(130,255,255,.21);
  background:radial-gradient(circle at 3% 0,rgba(130,255,255,.12),transparent 56%),linear-gradient(145deg,#142025,#090f12)
}
#discover-tools .home-tool-card.home-tool-feature::before{height:3px;background:linear-gradient(90deg,#82ffff,rgba(130,255,255,.18) 65%,transparent)}
#discover-tools .home-tool-card.home-tool-feature .home-tool-icon{background:rgba(130,255,255,.13);border-color:rgba(130,255,255,.26)}
#discover-tools .home-tool-card.home-tool-feature h3{color:#f4ffff}
#discover-tools .home-tool-card.home-tool-feature .btn-primary{border-color:rgba(130,255,255,.38);background:linear-gradient(120deg,#b5ffff,#82ffff);color:#071114}
#discover-tools .home-tool-card:focus-within{border-color:rgba(130,255,255,.4);box-shadow:0 0 0 1px rgba(130,255,255,.12)}

/* Stream record · consistency, calendar and records each get a job */
#stream{
  padding:82px 0 88px;border-top:1px solid rgba(255,255,255,.045);
  background:radial-gradient(circle at 12% 4%,rgba(130,255,255,.055),transparent 25%),#080c0f
}
#stream .section-head{margin-bottom:22px}
#stream .section-head h2{font-size:clamp(2.5rem,4.25vw,4.2rem);line-height:1.02}
#stream .hub-cta{border-color:rgba(130,255,255,.12);background:rgba(130,255,255,.04);color:#9fd9dc}
#stream .live-zone{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#stream .bento.bento-band{
  display:grid;grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr);grid-template-rows:auto auto;
  gap:17px;min-width:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none
}
#stream .bento-when,#stream .bento-tl{display:none!important}
/* The live hero owns the player, status and CTA. Keep this compatibility
   node for existing home.js hooks, never paint a second takeover in Records. */
body.home-page #stream .hub-now{display:none!important}
#stream .bento-band>.bento-lead,
#stream .bento-band>.bento-cal{
  min-width:0;border:1px solid rgba(255,255,255,.075);border-radius:18px;
  background:linear-gradient(150deg,rgba(16,15,21,.94),rgba(10,9,14,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.03)
}
#stream .bento-band>.bento-lead{
  grid-column:1;grid-row:1;padding:30px 28px;
  background:radial-gradient(circle at 16% 12%,rgba(130,255,255,.14),transparent 46%),linear-gradient(150deg,rgba(17,16,23,.96),rgba(10,9,14,.97))
}
#stream .bento-lead .rec-label{color:#b0eeef;font-size:.75rem;letter-spacing:.12em}
#stream .bento-lead .lead-figure{margin-top:21px;color:#eaffff;font-size:clamp(4.8rem,6.4vw,6.8rem);line-height:.8;letter-spacing:-.065em}
#stream .bento-lead .lead-said{max-width:26ch;margin-top:19px;color:#bacdce;font-size:1.02rem;line-height:1.43}
#stream .bento-lead .rec-bar{width:min(100%,310px);margin-top:18px}
#stream .bento-lead #record-window{display:inline-flex;margin-top:17px;color:#a7bfc1;font-size:.72rem}
#stream .bento-band>.bento-cal{grid-column:2;grid-row:1;padding:25px 26px}
#stream .bento-cal .streak-cal{
  display:grid;grid-template-columns:minmax(0,1fr) 158px;grid-template-rows:auto auto auto auto auto;
  column-gap:22px;row-gap:8px;min-height:0
}
#stream .bento-cal .sc-head{grid-column:1/-1}
#stream .bento-cal .sc-dows,#stream .bento-cal .sc-grid,#stream .bento-cal .sc-detail,#stream .bento-cal .sc-pop{grid-column:1}
#stream .bento-cal .sc-foot{
  display:grid;align-content:start;gap:11px;min-width:0;margin:0;padding:4px 0 0 18px;
  border-top:0;border-left:1px solid rgba(255,255,255,.06)
}
#stream .bento-cal .sc-grid{width:100%;max-width:none}
#stream .bento-cal .sc-label{color:#baffff;font-size:.76rem;letter-spacing:.12em}
#stream .bento-cal .sc-month{color:#e9fafa;font-size:.75rem}
#stream .bento-cal .sc-detail{font-size:.77rem;line-height:1.45;overflow-wrap:anywhere}
#stream .bento-cal .sc-sum{color:#e9fafa;font-size:.81rem;line-height:1.46}
#stream .bento-cal .sc-legend{color:#a9c1c3;font-size:.74rem;line-height:1.4}
#stream .bento-band>.bento-rec{
  grid-column:1/-1;grid-row:2;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none
}
#stream .record-head{margin:4px 0 12px;color:#a9dfe1;font-size:.74rem;letter-spacing:.12em}
#stream .record-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin:0;border:0;background:none}
#stream #record-grid .rec-card,
#stream #record-grid .rec-card+.rec-card,
#stream #record-grid .rec-card:first-child{
  display:grid;min-width:0;min-height:136px;height:auto;padding:18px 19px;overflow:hidden;
  border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(17,16,22,.72);box-shadow:inset 0 1px rgba(255,255,255,.024)
}
#stream #record-grid .rec-card::before,#stream #record-grid .rec-card::after{display:none}
#stream #record-grid .rec-card:first-child{
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto auto auto;gap:8px 12px;
  border-color:rgba(130,255,255,.13);background:radial-gradient(circle at 100% 0,rgba(130,255,255,.1),transparent 52%),rgba(17,16,22,.82)
}
#stream #record-grid .rec-card:first-child .rec-label{grid-column:1/-1;color:#adf1f1;font-size:.74rem}
#stream #record-grid .rec-card:first-child .rec-big{grid-column:1;grid-row:2;display:flex;align-items:flex-end;gap:7px;margin:0}
#stream #record-grid .rec-card:first-child .rec-streak-number{font-size:clamp(2.8rem,3.5vw,3.6rem);line-height:1}
#stream #record-grid .rec-card:first-child .rec-streak-unit{padding-bottom:4px;color:#b9d8d9;font-size:.72rem}
#stream #record-grid .rec-card:first-child #rec-streak-sub{
  grid-column:2;grid-row:2;align-self:center;min-width:0;max-width:25ch;padding:0;border:0;background:none;color:#a9bfc1;font-size:.7rem;line-height:1.35;text-align:right;overflow-wrap:anywhere
}
#stream #record-grid .rec-card:first-child #rec-run:not(.state-hidden){
  grid-column:1/-1;grid-row:3;justify-self:start;margin-top:3px;padding:0;border:0;background:none;color:#adccce;font-size:.7rem;line-height:1.3
}
#stream #record-grid .rec-card:not(:first-child){align-content:center;gap:6px}
#stream #record-grid .rec-card:not(:first-child) .rec-label{color:#a3bfc1;font-size:.74rem}
#stream #record-grid .rec-card:not(:first-child) .rec-big{margin:0;color:#edffff;font-size:clamp(1.45rem,2.15vw,1.9rem);line-height:1.12}
#stream #record-grid .rec-card:not(:first-child) .rec-sub,
#stream #record-grid .rec-card:not(:first-child) .rec-month{
  margin:0;padding:0;border:0;background:none;color:#acc0c2;font-size:.7rem;line-height:1.4
}

/* Community closes the page, intentionally smaller than the content hero */
#community.community-band{
  position:relative;overflow:hidden;padding:62px 24px 68px;border-top:1px solid rgba(255,255,255,.055);
  background:radial-gradient(circle at 50% 15%,rgba(130,255,255,.055),transparent 34%),#080b0d
}
#community .community{width:min(100%,760px);max-width:760px;margin-inline:auto;display:grid;justify-items:center;text-align:center}
#community .community-discord-mark{
  display:grid;place-items:center;width:74px;height:74px;margin:0 0 18px;border:1px solid rgba(255,255,255,.13);border-radius:21px;
  background:linear-gradient(145deg,#707af4,#5865f2 68%,#4853d8);color:#fff;
  box-shadow:0 22px 56px -30px rgba(88,101,242,.88),inset 0 1px rgba(255,255,255,.18)
}
#community .community-discord-mark i{width:35px;height:35px;font-size:35px}
#community .community h2{margin:0;font-size:clamp(2.35rem,4vw,3.9rem);line-height:.92;letter-spacing:-.05em}
#community .community p{max-width:560px;margin:13px auto 0;color:#99929f;font-size:.88rem;line-height:1.55}
#community .community .actions{justify-content:center;gap:9px;margin-top:19px}
#community .top-sup{justify-self:center;margin-left:auto;margin-right:auto}

/* Responsive */
@media (max-width:1079px){
  #stream .bento.bento-band{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:10px}
  #stream .bento-band>.bento-lead,#stream .bento-band>.bento-cal,#stream .bento-band>.bento-rec{
    grid-column:1;grid-row:auto
  }
  #stream .bento-cal .streak-cal{grid-template-columns:minmax(0,1fr) 150px}
}
@media (max-width:979px){
  html:not(.is-live) .hero-socials{margin-top:20px;border-radius:13px}
  html:not(.is-live) .hero-social-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}
  html:not(.is-live) .hero-social-rowhead{display:flex;justify-content:space-between;margin:0 2px}
  html:not(.is-live) .hero-live-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not(.is-live) .hero-follow-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(n+4),
  html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(n+3){border-top:1px solid rgba(255,255,255,.055)}
  html:not(.is-live) .hero-live-links .hero-social-btn:nth-child(4),
  html:not(.is-live) .hero-follow-links .hero-social-btn:nth-child(3){border-left:0}
  html:not(.is-live) .hero-live-card{border-radius:15px}
  #discover-tools .home-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #discover-tools .home-tool-card{min-height:0}
}
@media (max-width:899px){
  #replays{padding-top:64px;padding-bottom:62px}
  #discover-tools,#stream{padding-top:64px;padding-bottom:68px}
  #discover-tools .home-tools-head{display:grid;gap:10px}
  #discover-tools .home-tools-lede{margin:0}
  #stream .bento-cal .streak-cal{grid-template-columns:minmax(0,1fr);gap:8px}
  #stream .bento-cal .sc-foot{grid-column:1;margin-top:6px;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.06)}
}
@media (max-width:699px){
  #discover-tools .home-tools-grid{grid-template-columns:minmax(0,1fr)}
  html:not(.is-live) body.home-page .hero-content{padding-top:12px;padding-bottom:22px}
  html:not(.is-live) body.home-page .hero-kicker{margin-bottom:11px;font-size:.51rem}
  html:not(.is-live) body.home-page .hero-title{font-size:clamp(3.15rem,14.2vw,4.7rem)}
  html:not(.is-live) body.home-page .hero-message-body{margin-top:13px}
  html:not(.is-live) body.home-page .hero-tagline{font-size:clamp(1.04rem,5vw,1.34rem)}
  html:not(.is-live) body.home-page .hero-lede{font-size:.8rem;line-height:1.5}
  html:not(.is-live) body.home-page .hero-now{display:none}
  html:not(.is-live) body.home-page .hero-schedule-focus.hero-schedule-inline{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:14px;padding:11px 0
  }
  html:not(.is-live) body.home-page .hero-schedule-hours{font-size:clamp(1.5rem,8vw,2rem)}
  #replays .vod-media{border-radius:15px}
  #discover-tools .home-tool-card{padding:17px}
  #stream .bento-band>.bento-lead,#stream .bento-band>.bento-cal{padding:20px}
  #stream .record-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  #stream #record-grid .rec-card,#stream #record-grid .rec-card:first-child{min-height:0}
  #community.community-band{padding-top:54px;padding-bottom:58px}
  #community .community-discord-mark{width:64px;height:64px;border-radius:18px}
  #community .community-discord-mark i{width:30px;height:30px;font-size:30px}
}
@media (max-width:520px){
  html:not(.is-live) .hero-schedule-focus.hero-schedule-inline{grid-template-columns:minmax(0,1fr);gap:8px}
  html:not(.is-live) .hero-schedule-link{justify-self:start;min-height:32px}
  html:not(.is-live) .hero-social-btn{min-height:40px;gap:6px;padding-inline:5px;font-size:.61rem}
  html:not(.is-live) .hero-social-icon{width:23px;height:23px}
}
@media (max-width:460px){
  #replays .actions,#discover-tools .home-tool-actions,#community .community .actions{
    display:grid;grid-template-columns:minmax(0,1fr);width:100%
  }
  #replays .actions .btn,#discover-tools .home-tool-actions .btn,#community .community .actions .btn{
    width:100%;justify-content:center
  }
  #community .community .actions{width:min(100%,340px)}
}
 
/* LIVE HOME · preview stays primary; category context is compact beneath it. */
html.is-live body.home-page .ht-player-stack{min-width:0;width:100%;gap:9px}
html.is-live body.home-page .live-category-strip{width:100%}