/* STS v5.6.144 - Header unsquash / mockup proportion fix
   Keeps the mockup banner full-height, gives the nav real room, and stops the logo/nav from being crushed. */
:root{
  --sts-hdr-h:92px;
  --sts-hdr-green:#63ff18;
  --sts-hdr-purple:#a020ff;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header,
body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header,
.tw-topbar.sts-glass-nav.sts-mockup-header{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:var(--sts-hdr-h)!important;
  min-height:var(--sts-hdr-h)!important;
  max-height:var(--sts-hdr-h)!important;
  padding:0 16px!important;
  display:grid!important;
  grid-template-columns:minmax(1120px,1fr) minmax(360px,430px) auto!important;
  align-items:center!important;
  gap:16px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 9% 48%, rgba(99,255,24,.16), transparent 10%),
    radial-gradient(circle at 25% 45%, rgba(160,32,255,.28), transparent 22%),
    radial-gradient(circle at 55% 50%, rgba(99,255,24,.08), transparent 24%),
    linear-gradient(180deg,#242428 0%,#17171d 52%,#0b0c10 100%)!important;
  border-bottom:1px solid rgba(99,255,24,.52)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.62), inset 0 -1px 0 rgba(160,32,255,.60)!important;
  z-index:99999!important;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header::before,
.tw-topbar.sts-glass-nav.sts-mockup-header::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg, rgba(160,32,255,.20), transparent 26%, rgba(99,255,24,.10) 42%, transparent 66%, rgba(160,32,255,.12))!important;
  opacity:1!important;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header::after,
.tw-topbar.sts-glass-nav.sts-mockup-header::after{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:5px!important;
  height:1px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(99,255,24,.7),rgba(160,32,255,.58),transparent)!important;
}

body.streamx-v5.twitch-v53 .sts-mock-left,
html body.streamx-v5.twitch-v53 .sts-mock-left{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  height:var(--sts-hdr-h)!important;
  display:grid!important;
  grid-template-columns:600px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  overflow:hidden!important;
}

body.streamx-v5.twitch-v53 .sts-mock-brand,
html body.streamx-v5.twitch-v53 .sts-mock-brand{
  width:600px!important;
  min-width:600px!important;
  height:86px!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

body.streamx-v5.twitch-v53 .sts-mock-brand img,
html body.streamx-v5.twitch-v53 .sts-mock-brand img{
  width:600px!important;
  height:86px!important;
  max-width:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
  filter:drop-shadow(0 0 14px rgba(160,32,255,.62)) drop-shadow(0 0 10px rgba(99,255,24,.16))!important;
}

body.streamx-v5.twitch-v53 .sts-mock-nav,
html body.streamx-v5.twitch-v53 .sts-mock-nav{
  position:relative!important;
  z-index:3!important;
  height:86px!important;
  min-width:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:16px!important;
  padding:0 0 18px!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

body.streamx-v5.twitch-v53 .sts-mock-nav a,
body.streamx-v5.twitch-v53 .sts-mock-more-btn,
html body.streamx-v5.twitch-v53 .sts-mock-nav a,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn{
  flex:0 0 auto!important;
  min-width:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#f4f2f7!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  text-shadow:0 2px 0 #000!important;
}

body.streamx-v5.twitch-v53 .sts-mock-nav a.is-active,
body.streamx-v5.twitch-v53 .sts-mock-nav a:hover,
body.streamx-v5.twitch-v53 .sts-mock-more-btn:hover,
html body.streamx-v5.twitch-v53 .sts-mock-nav a.is-active,
html body.streamx-v5.twitch-v53 .sts-mock-nav a:hover,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn:hover{
  color:var(--sts-hdr-green)!important;
  text-shadow:0 0 12px rgba(99,255,24,.70),0 2px 0 #000!important;
}

body.streamx-v5.twitch-v53 .sts-mock-nav a::after,
body.streamx-v5.twitch-v53 .sts-mock-more-btn::after,
html body.streamx-v5.twitch-v53 .sts-mock-nav a::after,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn::after{
  bottom:-8px!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,var(--sts-hdr-green),transparent)!important;
}

body.streamx-v5.twitch-v53 .sts-mock-more-wrap,
html body.streamx-v5.twitch-v53 .sts-mock-more-wrap{
  flex:0 0 auto!important;
  position:relative!important;
}

body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search,
html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  max-width:430px!important;
  min-width:0!important;
  height:42px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 48px!important;
  align-items:center!important;
  border:1px solid rgba(99,255,24,.50)!important;
  border-radius:0!important;
  background:rgba(13,17,26,.92)!important;
  box-shadow:0 0 20px rgba(99,255,24,.07), inset 0 -1px 0 rgba(99,255,24,.12)!important;
  overflow:visible!important;
}

body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search input,
html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search input{
  height:40px!important;
  min-width:0!important;
  background:transparent!important;
  border:0!important;
  color:#fff!important;
  padding:0 16px!important;
  font-size:13px!important;
  font-weight:800!important;
}

body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search button,
html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search button{
  width:48px!important;
  height:40px!important;
  border:0!important;
  border-left:1px solid rgba(99,255,24,.34)!important;
  background:rgba(0,0,0,.22)!important;
  color:#fff!important;
}

body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-actions,
html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-actions{
  position:relative!important;
  z-index:3!important;
  height:86px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}

body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .tw-btn,
html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .tw-btn{
  height:40px!important;
  min-height:40px!important;
  padding:0 16px!important;
  border-radius:8px!important;
  font-size:13px!important;
  font-weight:1000!important;
}

/* Make the ticker thinner so it stops crushing the header visually */
body.streamx-v5.twitch-v53 .sts-crypto-ticker,
html body.streamx-v5.twitch-v53 .sts-crypto-ticker{
  height:24px!important;
  min-height:24px!important;
  line-height:24px!important;
  overflow:hidden!important;
  border-top:0!important;
  border-bottom:1px solid rgba(99,255,24,.22)!important;
}
body.streamx-v5.twitch-v53 .sts-crypto-track,
html body.streamx-v5.twitch-v53 .sts-crypto-track{
  height:24px!important;
  align-items:center!important;
}

@media(max-width:1680px){
  html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header,
  body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header{
    grid-template-columns:minmax(900px,1fr) minmax(310px,390px) auto!important;
    gap:12px!important;
  }
  body.streamx-v5.twitch-v53 .sts-mock-left,
  html body.streamx-v5.twitch-v53 .sts-mock-left{grid-template-columns:500px minmax(0,1fr)!important;gap:14px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-brand,
  html body.streamx-v5.twitch-v53 .sts-mock-brand,
  body.streamx-v5.twitch-v53 .sts-mock-brand img,
  html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:500px!important;min-width:500px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-nav,
  html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:13px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-nav a,
  body.streamx-v5.twitch-v53 .sts-mock-more-btn,
  html body.streamx-v5.twitch-v53 .sts-mock-nav a,
  html body.streamx-v5.twitch-v53 .sts-mock-more-btn{font-size:12px!important;letter-spacing:.11em!important;}
}

@media(max-width:1320px){
  html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header,
  body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header{
    grid-template-columns:1fr auto!important;
    height:78px!important;
    min-height:78px!important;
    max-height:78px!important;
    padding:0 10px!important;
  }
  body.streamx-v5.twitch-v53 .sts-mock-left,
  html body.streamx-v5.twitch-v53 .sts-mock-left{height:78px!important;grid-template-columns:360px minmax(0,1fr)!important;gap:10px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-brand,
  html body.streamx-v5.twitch-v53 .sts-mock-brand,
  body.streamx-v5.twitch-v53 .sts-mock-brand img,
  html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:360px!important;min-width:360px!important;height:72px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-nav,
  html body.streamx-v5.twitch-v53 .sts-mock-nav{height:78px!important;overflow-x:auto!important;scrollbar-width:none!important;padding-bottom:14px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-nav::-webkit-scrollbar{display:none!important;}
  body.streamx-v5.twitch-v53 .sts-mock-search,
  html body.streamx-v5.twitch-v53 .sts-mock-search{display:none!important;}
}

@media(max-width:760px){
  html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header,
  body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header{height:72px!important;min-height:72px!important;max-height:72px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-left,
  html body.streamx-v5.twitch-v53 .sts-mock-left{height:72px!important;grid-template-columns:210px minmax(0,1fr)!important;}
  body.streamx-v5.twitch-v53 .sts-mock-brand,
  html body.streamx-v5.twitch-v53 .sts-mock-brand,
  body.streamx-v5.twitch-v53 .sts-mock-brand img,
  html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:210px!important;min-width:210px!important;height:66px!important;}
  body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn:not(.primary),
  html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn:not(.primary){display:none!important;}
}