/* Content-led layouts for phones, small tablets, and landscape screens. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Both slides size the shared row, so wrapping copy never moves the page
   when the carousel advances. Hidden slides remain inert and aria-hidden. */
.hero-carousel.is-enhanced .hero-slide[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.hero-carousel.is-enhanced .launch-hero[hidden] {
  display: grid;
}
.hero-carousel .hero-copy,
.hero-carousel .launch-copy,
.hero-carousel-selectors button > span:last-child {
  min-width: 0;
}
.hero-carousel .hero-slide {
  height: auto;
}

/* A form needs enough room for complete field labels and useful input widths. */
.support-layout > *,
.form-row > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .support-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .support-layout aside > p {
    max-width: 65ch;
  }
  .footer-bottom {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .footer-bottom > div {
    gap: 6px 22px;
  }
  .footer-bottom > div a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .press-room .media-download,
  .media-section-nav a {
    min-height: 44px;
  }
  .media-section-nav a {
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 800px) {
  .hero-carousel.is-enhanced .launch-hero[hidden] {
    display: block;
  }
  .hero-carousel-selectors button {
    align-items: flex-start;
  }
  .hero-selector-number {
    line-height: 1.2;
  }
}
@media (max-width: 700px) {
  .menu-toggle {
    min-height: 44px;
  }
  .hero-carousel .hero-copy,
  .hero-carousel .launch-copy {
    width: 100%;
  }
  .hero-carousel .actions .button,
  .hero-carousel .actions .text-link {
    min-height: 44px;
    max-width: 100%;
  }
  .support-jump-links,
  .policy-nav {
    min-width: 0;
  }
  .policy-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .media-icon-row {
    align-items: flex-start;
  }
  .media-icon-row > div {
    min-width: 0;
  }
}
@media (max-width: 380px) {
  /* Keep the menu beside the brand instead of alone on a second line. */
  .site-header {
    padding-inline: 4.5%;
  }
  .header-brand-row .brand {
    gap: 8px;
  }
  .header-brand-row .menu-toggle {
    padding-inline: 6px;
  }
  .hero-carousel-selectors button {
    padding-inline: 8px;
    gap: 6px;
  }
  .hero-carousel-selectors strong {
    font-size: 12px;
  }
  .hero-carousel-playback {
    justify-content: space-between;
  }
  .hero-carousel-playback .hero-rotation {
    margin-left: auto;
  }
  .media-screenshots h4,
  .media-screenshots .media-download {
    overflow-wrap: anywhere;
  }
}
@media (max-height: 500px) and (min-width: 701px) {
  /* Let landscape visitors reach the content without a tall empty stage. */
  .hero-carousel .hero-slide {
    min-height: 0;
    padding-block: 32px;
  }
  .hero-carousel .hero-title {
    font-size: clamp(62px, 8vw, 82px);
    margin-block: 20px;
  }
  .hero-carousel .launch-visual img {
    max-height: 390px;
  }
}
/* Brand text can reflow when a visitor enlarges type. */
.brand {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.brand > img {
  flex-shrink: 0;
}
.brand > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.brand small {
  line-height: 1.5;
}
/* Grid and flex children must be allowed to shrink before long or enlarged
   words wrap; otherwise their intrinsic widths force the page sideways. */
.section-heading > *,
.studio-section > *,
.release-calendar > *,
.release-calendar a > span,
.media-layout > *,
.media-sidebar dl > *,
.development-links > *,
.news-studio-card > *,
.policy-nav > *,
.game-info h3 > span {
  min-width: 0;
}
:where(.section-heading, .studio-copy, .game-info, .release-calendar,
       .support-page, .news-hub, .policy-layout, .press-room,
       .hero-carousel) :where(h1, h2, h3, h4, p, li, dt, dd, a, button) {
  overflow-wrap: anywhere;
}
.release-calendar-label,
.manifesto-strip,
.hero-carousel-controls,
.hero-carousel-playback {
  flex-wrap: wrap;
}
.hero-carousel-selectors,
.hero-carousel-playback {
  min-width: 0;
  max-width: 100%;
}
.hero-carousel-playback button {
  max-width: 100%;
}
.release-calendar time {
  flex-shrink: 0;
}
.contact-item > a {
  max-width: 100%;
}
@media (max-width: 700px) {
  .media-sidebar dl,
  .policy-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-studio-card {
    grid-template-columns: 85px minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .news-studio-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-studio-card img {
    width: 100%;
    height: 180px;
    object-position: center;
  }
}
.game-info h3 > span:not([aria-hidden="true"]) {
  flex-shrink: 1;
}
.game-card:hover .game-info h3 > span:not([aria-hidden="true"]) {
  transform: none;
}
.hero-selector-number {
  flex-shrink: 0;
}
@media (max-width: 800px) {
  .hero-carousel-selectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr));
  }
}

/* Spellweaver's supporting sections also reflow with larger reading sizes. */
.game-facts > *,
.watch-section > *,
.feature-grid > *,
.card-section > *,
.world-section > *,
.modes-grid > *,
.preorder-section > *,
.faq-section > * {
  min-width: 0;
}
:where(.game-facts, .watch-section, .feature-grid, .card-section,
       .world-section, .modes-grid, .preorder-section, .faq-section,
       .spell-hero) :where(h1, h2, h3, p, a, li, summary, strong, span) {
  overflow-wrap: anywhere;
}
.world-section {
  height: auto;
  min-height: 520px;
}
@media (max-width: 900px) {
  .faq-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 700px) {
  .world-section {
    min-height: 470px;
  }
  .game-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}