.store-badges {
  max-width: 600px;
}

.steam-store-badge {
  min-width: 188px;
  justify-content: center;
  padding: 5px 16px;
  color: var(--white);
  background: #171a21;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.steam-store-badge:hover {
  color: var(--white);
  background: #0e1015;
}

.steam-store-mark {
  width: auto;
  height: 34px;
}

/* Preserve the designed hero height while allowing zoomed or wrapped content to grow. */
.hero {
  height: auto;
  min-height: clamp(530px, 78svh, 770px);
  max-height: none;
}

.game-hero {
  height: auto;
  min-height: clamp(520px, 72svh, 740px);
  max-height: none;
}

.hero-shell,
.game-hero-shell {
  height: auto;
  min-height: inherit;
  padding-top: clamp(36px, 6vh, 58px);
}

@media (max-width: 780px) {
  .nav-shell {
    flex-wrap: wrap;
    gap: 0 18px;
  }

  .site-nav {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    padding-top: 0;
  }

  .game-hero {
    min-height: clamp(500px, 68svh, 740px);
  }
}

@media (max-width: 520px) {
  .hero,
  .game-hero {
    min-height: 720px;
  }

  .hero h1,
  .game-hero h1 {
    font-size: clamp(44px, 16vw, 58px);
  }

  .store-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(340px, 100%);
    max-width: none;
  }

  .store-badge-link {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .steam-store-badge {
    grid-column: 1 / -1;
  }

  .steam-store-mark {
    height: 30px;
  }

  .epic-store-badge,
  .microsoft-store-badge {
    padding-right: 8px;
    padding-left: 6px;
  }

  .desktop-store-copy strong {
    font-size: 12px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: clamp(340px, 76svh, 770px);
  }
}