/* Shared banner controls. Desktop navigation appears only after the banner exits. */
.portal { --shared-banner-height:495px; }
.portal .portal-hero,
.portal .news-hero,
.portal .news-hero.profile-banner {
  min-height:var(--shared-banner-height);
  aspect-ratio:auto;
  padding-block:0;
}
.portal .portal-hero > .portal-wrap,
.portal .news-hero > .portal-wrap {
  display:grid;
  grid-template-columns:minmax(0,1fr) 128px;
  align-items:center;
  gap:48px;
  padding-top:40px;
  padding-bottom:50px;
}
.banner-copy { min-width:0; }
.music-banner:before { background-position:center,center center; }
.banner-shortcuts { display:flex; flex-direction:column; gap:9px; min-width:0; }
.portal .banner-shortcuts .portal-btn {
  display:flex;
  width:100%;
  min-width:0;
  justify-content:space-between;
  padding:9px 18px;
  min-height:40px;
  gap:12px;
  white-space:nowrap;
}
.banner-stream { min-width:0; }
.banner-shortcuts .stream-status {
  display:flex;
  align-items:center;
  width:100%;
  margin-top:7px;
  padding:8px 10px;
  gap:9px;
  min-height:34px;
  border:1px solid #647168;
  border-radius:6px;
  background:#26312e;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  white-space:normal;
}
.portal .banner-shortcuts .stream-status { color:#e1e7e3; }
.banner-shortcuts .stream-status .stream-status-dot {
  width:12px;
  height:12px;
  flex:0 0 12px;
  border:2px solid #f1f5f2;
  background:#aab6ae;
  box-shadow:none;
}
.portal .banner-shortcuts .stream-status[data-state="live"] {
  color:#fff;
  background:#7f2033;
  border-color:#ff7187;
  box-shadow:0 2px 12px #ff405b40;
}
.banner-shortcuts .stream-status[data-state="live"] .stream-status-dot {
  background:#ff405b;
  border-color:#ffd5dc;
  animation:stream-live-glow 2s ease-out infinite;
}
.portal .banner-shortcuts .stream-status[data-state="unknown"] {
  color:#ffdda0;
  background:#392f20;
  border-color:#997844;
  font-size:11px;
}
.banner-shortcuts .stream-status[data-state="unknown"] .stream-status-dot {
  background:#edbd68;
  border-color:#ffe3ae;
}
@keyframes stream-live-glow {
  0%,100% { box-shadow:0 0 0 0 #ff718766; }
  65% { box-shadow:0 0 0 5px #ff718700; }
}
.portal .banner-shortcuts .stream-title {
  margin:5px 0 0;
  color:var(--site-muted);
  font-size:11px;
  line-height:1.5;
}
.portal-hero .banner-shortcuts .stream-title,
.collection-banner .banner-shortcuts .stream-title,
.games-banner .banner-shortcuts .stream-title { color:#eef1e9; }
@media(min-width:1081px) {
  /* Even short pages can scroll past the banner to reach the full navigation. */
  .banner-nav-enabled #main-content > .portal { min-height:calc(100vh + var(--page-banner-height,0px) - 54px); }
  .banner-nav-enabled .site-nav {
    position:fixed;
    inset:0 0 auto;
    z-index:100;
    transform:translateY(-100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .2s ease,visibility .2s;
    box-shadow:0 4px 18px #0000000d;
  }
  .banner-nav-enabled .site-nav.is-banner-past {
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
}
@media(max-width:800px) {
  .portal { --shared-banner-height:432px; }
  .portal .portal-hero > .portal-wrap,
  .portal .news-hero > .portal-wrap { padding-top:45px; padding-bottom:55px; }
  .portal .portal-hero > .portal-wrap,
  .portal .news-hero > .portal-wrap { grid-template-columns:minmax(0,1fr) 128px; gap:24px; }
}
@media(max-width:600px) {
  .portal .portal-hero > .portal-wrap,
  .portal .news-hero > .portal-wrap { grid-template-columns:minmax(0,1fr); gap:24px; }
  .banner-shortcuts { display:grid; grid-template-columns:repeat(2,128px); justify-content:end; align-items:start; gap:10px; }
  .portal .banner-shortcuts > .portal-btn,
  .banner-shortcuts .banner-stream { width:100%; justify-self:end; }
  .banner-shortcuts .banner-stream { grid-column:2; grid-row:3; }
  .banner-shortcuts .youtube-link { grid-column:1; grid-row:3; }
}
@media(max-width:500px) {
  .portal .portal-hero > .portal-wrap,
  .portal .news-hero > .portal-wrap { padding-top:25px; padding-bottom:45px; }
}
@media(prefers-reduced-motion:reduce) {
  .banner-nav-enabled .site-nav { transition:none; }
  .banner-shortcuts .stream-status[data-state="live"] .stream-status-dot { animation:none; }
}

/* Banner preferences stay visible while the desktop navigation is hidden. */
.portal .portal-hero > .portal-wrap,
.portal .news-hero > .portal-wrap { position:static; padding-top:76px; }
.banner-preferences {
  position:absolute;
  top:16px;
  right:max(20px,calc((100% - 1160px)/2));
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:#f2f4ef;
}
.banner-preferences .language-switch,
.banner-preferences .theme-switch {
  background:#17231fe6;
  border:1px solid #b4c2b580;
  border-radius:7px;
  margin:0;
  padding:3px;
  min-height:40px;
}
.portal .banner-preferences .language-switch a { color:#f2f4ef; }
.banner-preferences .theme-switch button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:5px;
  border-radius:4px;
  color:#d9e1d9;
  cursor:pointer;
}
.banner-preferences .theme-switch button[aria-pressed=true] { background:#627c65; color:#fff; }
.banner-preferences .theme-switch button:focus-visible { outline:2px solid #c3ddbd; outline-offset:2px; }
@media(max-width:600px) {
  .banner-preferences { top:12px; gap:8px; }
}

/* Mobile navigation stays on screen; banners keep Twitch and stream information. */
@media(max-width:1080px) {
  .site-nav {
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 4px 18px #0000000d;
  }
  .portal .portal-hero > .portal-wrap,
  .portal .news-hero > .portal-wrap {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .portal .banner-shortcuts .portal-btn { display:none; }
  .portal .banner-shortcuts .banner-stream > .portal-btn { display:flex; }
  .banner-shortcuts {
    display:block;
    justify-self:start;
    width:128px;
    max-width:100%;
  }
  .banner-shortcuts .banner-stream {
    display:block;
    width:100%;
    grid-column:auto;
    grid-row:auto;
    justify-self:start;
  }
}