/*
 * The packager adds `itch-build` to the root element. The normal website loads
 * this file too, but none of these rules apply there.
 */
:root.itch-build,
:root.itch-build body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) [data-legacy-site-header],
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .bt-landing-concept,
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen > [data-legacy-home-stage],
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) [data-legacy-site-footer] {
  display: none !important;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen.is-active {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 520px);
  place-content: center;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen > [data-legacy-home-copy] {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: initial;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen > [data-legacy-home-copy]::before,
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen > [data-legacy-home-copy]::after,
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen > [data-legacy-home-copy] > :not(.hero-actions),
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-actions > :not(.hero-play-options) {
  display: none !important;
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-actions,
:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-play-options {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  gap: clamp(12px, 2.5vh, 18px);
}

:root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-play-option {
  width: 100%;
  min-height: clamp(76px, 13vh, 96px);
}

@media (max-height: 430px) and (orientation: landscape) {
  :root.itch-build body:not(.is-playing):not(.is-learning-in-home) .home-screen.is-active {
    grid-template-columns: minmax(0, 760px);
  }

  :root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-play-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root.itch-build body:not(.is-playing):not(.is-learning-in-home) .hero-play-option {
    min-height: 84px;
  }
}