/* Hero = the game's launch intro (2026-09-27). Layout is set by
   js/hero-intro.js on #hero[data-layout]: cover (phones), column (wide,
   headline beside the video), column-center (wide but short on room). */
.hero__sticky {
  background: #0b1020 url('../assets/images/hero_intro_backdrop.webp') center / cover no-repeat;
}

/* Phones / centred column: headline at the bottom over a scrim, and it
   clears out as the scroll starts the intro. */
.hero[data-layout="cover"] .hero__sticky,
.hero[data-layout="column-center"] .hero__sticky {
  place-items: end center;
}
.hero[data-layout="cover"] .hero__sticky::after,
.hero[data-layout="column-center"] .hero__sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 10, 24, 0.94) 0%, rgba(6, 10, 24, 0.74) 50%, rgba(6, 10, 24, 0) 100%);
  opacity: var(--hero-text-fade, 1);
}
.hero[data-layout="cover"] .hero__content,
.hero[data-layout="column-center"] .hero__content {
  opacity: var(--hero-text-fade, 1);
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.hero[data-layout="cover"] .hero__eyebrow {
  display: none;
}

/* Wide screens: headline on the left, the intro in a column on the right. */
.hero[data-layout="column"] .hero__content {
  position: absolute;
  top: 50%;
  left: var(--hero-text-left, 5vw);
  width: var(--hero-text-width, 40vw);
  max-width: 640px;
  padding: 0;
  text-align: left;
  transform: translateY(-50%);
}
.hero[data-layout="column"] .hero__title {
  font-size: clamp(2.4rem, 4.6vw, 5rem);
}
.hero[data-layout="column"] .hero__subtitle {
  margin-left: 0;
}
.hero[data-layout="column"] .hero__cta {
  justify-content: flex-start;
}

/* 2.0 art (2026-09-28, DJ picked what stays). */
/* Wide title logo in the nav and footer (was the stacked Digi + wordmark). */
.nav__logo--wide { height: 52px; top: 0; }
.footer__logo--wide { height: 72px; }
@media (max-width: 960px) {
  .nav__logo--wide { height: 36px; }
  .footer__logo--wide { height: 56px; }
}

/* DJ's mode tabs have the name baked in: no card, no typed label
   (same call he made in the app). The label stays for screen readers. */
.modes__grid--tabs .mode-tile {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.modes__grid--tabs .mode-tile img {
  width: 100%;
  max-width: 170px;
  height: auto;
  aspect-ratio: 340 / 309;
  margin: 0 auto;
}
.modes__grid--tabs .mode-tile span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* One 2.0 gameplay clip instead of three old ones. */
.play-now__previews--single {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}

/* Upsell card: a 2.0 gameplay screenshot behind the dark overlay. */
.upsell-card {
  background-image:
    linear-gradient(135deg, rgba(13, 27, 42, 0.82), rgba(27, 40, 56, 0.82)),
    url('../assets/images/v2_0/upsell_bg.webp');
}

/* "Play modes" gets its own row (it had no rule and sat in a grid cell). */
.modes__grid--tabs .modes__split-label {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
}
@media (max-width: 600px) {
  .modes__grid--tabs { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}