/* Review candidate: restore Spirit Beasts' identity without replacing the app. */
html body .site-shell::after {
  position: fixed !important;
  inset: 0 !important;
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, .12), rgba(5, 7, 6, .35) 60%, rgba(5, 7, 6, .85)),
    url('/assets/img/fcsb/hero.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #050706 !important;
  opacity: 0.9 !important;
  mask-image: none !important;
}

html body .topbar {
  position: relative;
  top: auto;
  width: min(calc(100% - 32px), 1660px);
  margin: 18px auto 0;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(170px, 185px);
  gap: 10px;
  min-height: 112px;
  padding: 8px 14px;
  background: rgba(4, 6, 7, .88);
}

html body .topbar .brand {
  display: flex;
  align-items: center;
  width: 100%;
  height: 96px;
  min-width: 0;
}

html body .topbar .brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  filter: none;
}

html body .topbar .main-nav {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

html body .topbar .nav-link {
  min-height: 44px;
  padding-inline: 9px;
}

html body .topbar .account-menu { min-width: 0; }
html body .topbar .account-pill { width: 100%; min-width: 0; }

html body main.approved-home-page {
  width: min(calc(100% - 32px), 1660px) !important;
  margin-top: 18px;
}

html body .home-hero {
  border-width: 22px !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) !important;
  gap: clamp(18px, 3vw, 48px) !important;
  padding: clamp(12px, 2vw, 28px);
  background: linear-gradient(120deg, rgba(3, 7, 10, .84), rgba(8, 5, 18, .66)) !important;
}

html body .home-hero .hero-copy { min-width: 0; }
html body .home-hero .hero-title-lockup h1 {
  font-size: clamp(2.6rem, 5.7vw, 5.2rem);
  line-height: 1.05;
  margin-block: 12px 16px;
}

html body .home-hero .hero-title-lockup p {
  max-width: 42ch;
  line-height: 1.65;
  text-wrap: pretty;
}

html body .home-hero .identity-showcase,
html body .home-hero .identity-showcase img.gg-hero-art {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  overflow: visible !important;
}

html body .home-hero .identity-showcase img.gg-hero-art {
  border: 1px solid rgba(255, 217, 130, .45) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .5) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .75), 0 0 50px rgba(230, 185, 93, .18), 0 0 0 6px rgba(0, 0, 0, .3) !important;
}

.sb-earned-only {
  margin: 14px auto;
  max-width: none;
  color: #e9d6a2;
  font-size: .86rem;
  line-height: 1.6;
}

html body .home-hero .hero-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

html body .home-hero .hero-metrics div { min-width: 0; }
html body .home-hero .hero-image-buttons { flex-wrap: wrap; gap: 10px; }
html body .home-hero .element-copy { padding: 14px 12px; line-height: 1.65; }

@media (max-width: 1200px) {
  html body .topbar {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  }
  html body .topbar .brand { width: min(100%, 350px); }
  html body .topbar .main-nav { grid-row: 2; grid-column: 1 / -1; }
  html body .topbar .account-menu { grid-column: 2; grid-row: 1; }
}

@media (max-width: 850px) {
  html body .home-hero { grid-template-columns: minmax(0, 1fr) !important; }
  html body .home-hero .hero-title-lockup h1 { font-size: clamp(2.6rem, 9vw, 4.7rem); }
  html body .home-hero .identity-showcase { max-width: 580px; margin-inline: auto; }
}

/* Product-scoped corrections for the shared header/radio on narrow screens. */
@media (max-width: 900px) {
  html body .gg-header-container {
    height: auto;
    min-height: 60px;
    padding: 10px 12px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
  }
  html body .gg-header-actions { flex-wrap: wrap; justify-content: center; }
  html body .gg-ticker-shortcuts {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-block: 5px;
    scrollbar-width: thin;
  }
  html body .gg-ticker-shortcuts a { flex: 0 0 auto; padding-block: 5px; }
  html body .gg-radio-bar-inner { min-width: 0; padding-inline: 8px; gap: 8px; }
  html body .gg-radio-left { min-width: 0; flex: 1 1 0; gap: 8px; }
  html body .gg-radio-center { flex: 0 0 auto; gap: 6px; }
  html body .gg-radio-album-art { width: 32px; height: 32px; }
  html body .gg-volume-wrapper { gap: 2px; }
  html body .gg-volume-slider { width: 48px; }
  html body .gg-btn-play-toggle,
  html body .gg-btn-mute { min-width: 44px; min-height: 44px; }
}

@media (max-width: 560px) {
  html body .topbar {
    width: calc(100% - 20px);
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    gap: 10px;
    margin-top: 12px;
  }
  html body .topbar .brand { width: 100%; height: 110px; }
  html body .topbar .brand-logo { object-position: center; }
  html body .topbar .main-nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    overflow: visible;
    justify-content: center;
    flex-wrap: wrap;
  }
  html body .topbar .nav-link { flex: 0 1 auto; padding-inline: 8px; font-size: .76rem; }
  html body .topbar .account-menu { grid-column: 1; grid-row: 3; }
  html body main.approved-home-page { width: calc(100% - 20px) !important; }
  html body .home-hero {
    border-width: 16px !important;
    padding: 16px 8px;
    gap: 22px !important;
  }
  html body .home-hero .hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body .home-hero .hero-franchise { font-size: .58rem; letter-spacing: .12em; }
  html body .home-hero .hero-franchise::before,
  html body .home-hero .hero-franchise::after { display: none; }
  html body .home-hero .element-copy { padding-inline: 6px; font-size: .9rem; }
}