/* Shared responsive rules for homepage/global layouts. */

@media (max-width: 1920px) {
  .battle {
    --battle-character-size: min(49vw, 82dvh);
    --battle-mat-size: min(80vw, 132dvh, 92rem);
  }
}

@media (max-width: 1700px) {
  .battle .battle-center {
    padding: 0 5%;
  }

  .battle .battle-center .floating-dice img {
    width: 50%;
  }
}

@media (max-width: 1300px) {
  .battle .battle-center {
    padding: 0;
  }
}

@media (max-width: 1580px) {
  .section-text-media .section-text-media-image {
    transform: none;
  }

  .parallax-dice-right,
  .parallax-dice-left {
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .coop-promo-shell {
    overflow: hidden;
  }

  .coop-promo {
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .heros-carousel {
    --hero-card-size: clamp(9.75rem, 28.5vw, 12rem);
    --hero-left-offset: clamp(1rem, 8vw, 4rem);
  }

  .heros-carousel .heros-carousel-nav {
    gap: 3.5rem;
  }

  .discover-more__grid {
    grid-template-columns: 1fr;
  }

  .discover-card {
    min-height: 0;
  }

  .coop-promo__inner {
    grid-template-columns: 50% 50%;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  .coop-promo__content {
    padding-left: 0;
  }

  .coop-promo__content h2 {
    white-space: normal;
    max-width: 12rem;
    margin-inline: auto;
  }

  .coop-promo__art {
    min-height: 18rem;
  }

  .coop-promo__character {
    top: auto;
    bottom: -0.9rem;
    left: auto;
    right: 50%;
    transform: translate(50%, 0);
    height: 24em;
  }
}

@media (max-width: 780px) {
  .battle {
    --battle-character-size: min(68vw, 78dvh);
    --battle-character-bleed: clamp(-16rem, -26vw, -5rem);
    --battle-mat-size: min(82vw, 98dvh);
    --battle-mat-bleed: clamp(-22rem, -42vw, -8rem);
  }

  .battle .battle-center {
    width: 90%;
  }

  .battle .battle-center .battle-center-content {
    height: 60dvh;
  }

  .battle .battle-center .floating-dice {
    width: 40%;
    bottom: -65%;
  }

  .battle .battle-left {
    left: 0%;
  }

  .battle .battle-right {
    right: 0%;
  }
}

@media (max-width: 560px) {
  .heros-carousel {
    --hero-card-size: clamp(8.625rem, 43.5vw, 10.35rem);
    --hero-left-offset: clamp(0.75rem, 4vw, 1.25rem);
    padding: 3.25rem 0 2.5rem;
  }

  .heros-carousel .heros-carousel-nav {
    gap: 2.25rem;
  }

  .heros-carousel h2 {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .coop-promo__inner {
    display: flex;
    flex-direction: column;
    padding-top: 1.75rem;
  }

  .discover-more {
    padding-bottom: 3rem;
  }

  .discover-card__media {
    height: 15rem;
  }

  .site-footer {
    padding-inline: 1rem;
  }
}

@media (max-width: 56rem) {

  .navigation__content .menu-left,
  .navigation__content .menu-right {
    display: none;
  }

  .navigation__content {
    justify-content: center;
  }

  .navigation__content .branding {
    width: auto;
    min-width: 0;
    max-width: min(220px, 40vw);
    padding: calc(var(--space-3) + 0.5rem) var(--space-4) calc(var(--space-3) - 0.25rem);
    flex: 0 1 auto;
    filter: drop-shadow(0 0.6rem 1rem rgba(0, 0, 0, 0.35));
  }

  .navigation__content .branding img {
    transform: translateY(28%);
  }

  .nav__menu-toggle {
    display: flex;
    top: 24%;
    right: -10px;
    width: 3rem;
    height: 3rem;
    background: radial-gradient(circle at top left, rgba(242, 107, 43, 0.2), transparent 38%), linear-gradient(180deg, rgba(31, 40, 57, 0.95), rgba(12, 16, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.6rem 1.25rem rgba(0, 0, 0, 0.36);
  }

  .coop-promo__art{
    display:none;
  }

  body.motion-ready .coop-promo__content{
    padding-top:4em;
  }

  .section-video-media .container-l{
    padding: 0em 0 3em;
  }

  .site-nav {
    height: var(--nav-height-mobile);
    background: linear-gradient(180deg, rgba(7, 10, 16, 0.94) 0%, rgba(18, 24, 36, 0.86) 100%);
  }

  .nav-drawer {
    width: min(88vw, 22rem);
  }

  .nav-drawer__panel {
    padding-top: calc(var(--space-8) + 0.25rem);
  }

  .nav-drawer__links .wp-block-navigation__container {
    gap: var(--space-8);
    padding-left: 1.25rem;
  }
}

@media (max-width: 500px) {

  .container-l,
  .container-m,
  .container-s {
    padding: 0 20px;
  }

  .hero .hero__content h1,
  .battle .battle-center-content h2 {
    font-size: 42px;
    line-height: 1;
  }

  .battle .battle-center .floating-dice {
    width: 50%;
    bottom: -60%;
  }

  .battle .battle-right .base img,
  .battle .battle-left .base img,
  .battle .battle-right .charactor img,
  .battle .battle-left .charactor img {
    max-width: 100%;
    width: 100%;
  }

  .battle .battle-left .base {
    left: var(--battle-mat-bleed);
  }

  .battle .battle-right .base {
    right: var(--battle-mat-bleed);
  }

  .battle .battle-left .charactor {
    left: var(--battle-character-bleed);
  }

  .battle .battle-right .charactor {
    right: var(--battle-character-bleed);
  }

  .section-text-media {
    padding: 4em 0;
  }

  .section-text-media .container-l {
    flex-direction: column-reverse;
    width: 100%;
  }

  .section-text-media .section-text-media-content,
  .section-text-media .section-text-media-image {
    width: 100%;
  }

  .section-text-media .section-text-media-image {
    width: 80%;
  }

  .parallax-dice-right,
  .parallax-dice-left {
    display: none;
  }
}

@media (max-width: 900px) {
  .header-slider {
    --header-slider-stage-width: min(100% - 2rem, 40rem);
    --header-slider-control-bottom: clamp(3.5rem, 7vh, 5rem);
  }

  .header-slider__inner,
  .header-slider__slide[data-text-position="right"] .header-slider__inner {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: clamp(1rem, 3vh, 1.75rem);
    width: var(--header-slider-stage-width);
    padding-top: calc(var(--nav-height-mobile) + 1rem);
    padding-right: 0;
    padding-bottom: 5.75rem;
    padding-left: 0;
    text-align: center;
  }

  .header-slider__slide[data-media-position="left"] .header-slider__feature {
    order: 0;
  }

  .header-slider__copy,
  .header-slider__slide[data-text-position="right"] .header-slider__copy {
    align-items: center;
    justify-self: center;
    width: min(100%, 32rem);
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
  }

  .header-slider__copy h1,
  .header-slider__copy h2 {
    font-size: clamp(2.65rem, 12vw, 4.75rem);
    line-height: 0.94;
  }

  .header-slider__copy p {
    max-width: 30rem;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    line-height: 1.28;
  }

  .header-slider__feature {
    order: -1;
    align-self: center;
    justify-content: center;
    width: 100%;
    max-height: 32vh;
  }

  .header-slider__feature img {
    width: min(var(--header-slider-image-width, 82%), 76vw);
    max-width: 23rem;
    max-height: 32vh;
  }

  .header-slider__logo {
    width: min(var(--header-slider-logo-width, clamp(7.5rem, 34vw, 10rem)), 100%);
  }

  .header-slider__slide.has-mobile-background > video.header-slider__background {
    display: none;
  }

  .header-slider__slide.has-mobile-background > .header-slider__mobile-background {
    display: block;
  }

  .header-slider__shade {
    background: radial-gradient(circle at 50% 24%, rgba(242, 107, 43, 0.26), transparent 28%), linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(5, 7, 12, 0.34) 38%, rgba(0, 0, 0, 0.86) 100%);
  }
}

@media (max-width: 560px) {
  .header-slider {
    --header-slider-stage-width: min(100% - 1.5rem, 27rem);
    --header-slider-control-bottom: 3.25rem;
  }

  .header-slider__inner,
  .header-slider__slide[data-text-position="right"] .header-slider__inner {
    width: var(--header-slider-stage-width);
    padding-bottom: 5.25rem;
  }

  .header-slider__copy h1,
  .header-slider__copy h2 {
    font-size: clamp(2.15rem, 13.5vw, 3.45rem);
  }

  .header-slider__copy p {
    margin: 0.85rem 0 1.1rem;
    font-size: 1rem;
    line-height: 1.26;
  }

  .header-slider__feature {
    max-height: 28vh;
  }

  .header-slider__feature img {
    width: min(var(--header-slider-image-width, 82%), 82vw);
    max-width: 19rem;
    max-height: 28vh;
  }

  .header-slider__controls {
    gap: 0.9rem;
  }
}