/* CW-ARCADE — RESPONSIVE
   Explicit behaviour at 1920 / 1440 / 1366 / tablet / mobile — not a
   naive shrink of the desktop layout. */

/* ---------- 1440 and below: slightly tighter wide layouts ---------- */
@media (max-width: 1440px) {
  :root {
    --content-width: 1120px;
    --content-wide: 1280px;
  }
}

/* ---------- 1366 laptop ---------- */
@media (max-width: 1366px) {
  :root {
    --content-width: 1040px;
    --content-wide: 1200px;
  }

  .game-showcase {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__stage {
    order: -1;
  }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-strip__item:nth-child(2) {
    border-right: none;
  }

  .proof-strip__item:nth-child(odd) {
    border-right: 1px solid var(--hairline);
  }

  .proof-strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }

  .game-showcase {
    grid-template-columns: 1fr;
  }

  .game-stage {
    position: static;
  }

  .game-rail {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-3);
  }

  .game-rail-card {
    flex: 0 0 260px;
  }

  .tab-flow {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .site-nav__links {
    display: none;
  }

  .site-nav__toggle {
    display: grid;
    place-items: center;
  }
}

/* ---------- Mobile (≤680px) ---------- */
@media (max-width: 680px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .proof-strip__item {
    border-right: none !important;
  }

  .proof-strip__item:not(:last-child) {
    border-bottom: 1px solid var(--hairline);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .site-nav__actions .btn-ghost {
    display: none;
  }

  .site-footer__top {
    flex-direction: column;
    gap: var(--space-8);
  }

  .site-footer__cols {
    gap: var(--space-8);
  }

  .glass-scroller {
    height: clamp(280px, 62vw, 320px);
  }

  /* Lens must stay comfortably bigger than the (fixed ~176px, see
     .stat-card's own min-clamp) natural card footprint in BOTH axes —
     buildFilter()'s flat/undistorted zone is carved in from the
     lens's own width/height, so a lens sized too close to the card
     leaves that zone narrower than the card itself, catching its
     edges in the same bend/chromatic-split meant only for the tiny
     neighboring cards and empty rail around it. */
  .glass-scroller__lens {
    width: clamp(250px, 60vw, 300px);
    height: clamp(240px, 54vw, 280px);
  }

  .cta-panel h2 {
    font-size: clamp(1.8rem, 1.4rem + 4vw, 2.6rem);
  }
}

/* ---------- Mobile nav drawer ---------- */
.site-nav__mobile {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 190;
  background: rgba(6, 7, 10, 0.98);
  backdrop-filter: blur(10px);
  padding: var(--space-8) var(--gutter);
  display: none;
  flex-direction: column;
  gap: var(--space-6);
}

.site-nav__mobile.is-open {
  display: flex;
}

.site-nav__mobile a {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
}

.site-nav__mobile .btn {
  margin-top: var(--space-4);
}

/* ---------- Guard against decorative-layer overflow ---------- */
.hex-stage,
.aurora-stage,
.hero,
.problem-section {
  max-width: 100vw;
}

/* NOTE: overflow-x:hidden must NOT be set directly on html/body — per the
   CSS overflow spec, declaring overflow-x without overflow-y forces the
   other axis to "auto", and doing that on the root elements turns them
   into an explicit scroll container that breaks position:sticky for any
   descendant (any sticky-pinned rig would silently no-op — scrolling in
   lockstep with its track instead of pinning). A wrapper div gets the
   clip instead: it can't ever actually need to scroll internally
   (height:auto grows with content), so the same overflow coercion never
   manifests as a real scroll container, and stickiness inside it
   resolves against the viewport exactly as it should. */
.page-clip {
  overflow-x: hidden;
  width: 100%;
}