/* =====================================================================
   STS v5.7.4 — TRUE VIEWPORT HOMEPAGE FIX
   Final high-specificity overrides for legacy global canvas constraints.
===================================================================== */

html:has(.sts403-fullscreen),
html:has(.sts403-fullscreen) body.streamx-v5.twitch-v53{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  overflow-x:hidden!important;
}

html body.streamx-v5.twitch-v53 main.page.v5-page:has(> .sts403-fullscreen){
  display:block!important;
  width:100vw!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Beats the old > :not(...) 1540px rule in sts-clean-bundle.css. */
html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen:not(.sts-tv-home):not(script):not(style){
  display:grid!important;
  grid-template-columns:clamp(176px,11.25vw,220px) minmax(0,1fr)!important;
  width:100vw!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  justify-content:stretch!important;
  align-items:start!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-sidebar{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav{
  display:grid!important;
  grid-template-columns:1fr!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav > a{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-content{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:14px clamp(14px,1.15vw,26px) 42px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-section,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero{
  min-height:clamp(380px,30vw,620px)!important;
  background-size:cover!important;
  background-position:center!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
  min-height:clamp(380px,30vw,620px)!important;
  width:min(760px,62%)!important;
  padding:clamp(44px,5vw,90px) clamp(58px,5vw,108px)!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero h1{
  max-width:100%!important;
  font-size:clamp(38px,4vw,76px)!important;
  overflow-wrap:anywhere!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:clamp(14px,1vw,22px)!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card:nth-child(n){
  display:block!important;
  min-width:0!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
  gap:clamp(22px,1.5vw,34px)!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}

html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media (min-width:1900px){
  html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen:not(.sts-tv-home):not(script):not(style){
    grid-template-columns:220px minmax(0,1fr)!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
  }
}

@media (max-width:1450px){
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:1100px){
  html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen:not(.sts-tv-home):not(script):not(style){
    grid-template-columns:76px minmax(0,1fr)!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav > a{
    justify-content:center!important;
    font-size:0!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav > a span{
    font-size:20px!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
    width:72%!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:760px){
  html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen:not(.sts-tv-home):not(script):not(style){
    display:block!important;
    width:100%!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-sidebar{
    display:none!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-content{
    padding:8px 10px 86px!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero,
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
    min-height:430px!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
    width:100%!important;
    padding:28px 22px 50px!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:520px){
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid,
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{
    grid-template-columns:1fr!important;
  }
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}