/* v0.24.5 — NexterHub-scale responsive site width.
 * Reference: owner's preferred NexterHub wide-container design (approx. 1760px target).
 * Uses ONE responsive gutter and max-width for public header, hero contents,
 * page shells, world/game listings, category sections, and footer.
 * Do not stretch narrow gameplay boards, authored prose, or modals.
 */
:root {
  --pw-content-max: 1760px;
  --pw-content-gutter: clamp(16px, 2vw, 40px);
  --pw-site-width: min(var(--pw-content-max), calc(100% - var(--pw-content-gutter) - var(--pw-content-gutter)));
}

/* Public site scaffold: gameplay and dashboard routes share the header's horizontal boundaries. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) :is(
  .shell,
  .inner-page,
  .prose-page,
  .footer-grid,
  .footer-bottom,
  .pw-ref-worlds,
  .nav-wrap
),
body[data-route="/"] .hero-inner {
  box-sizing: border-box;
  width: var(--pw-site-width);
  max-width: var(--pw-content-max);
  margin-inline: auto;
  min-width: 0;
}

/* Original hero max-width (1460px) must not override global container. */
body[data-route="/"] .pw-cinematic-hero .hero-inner {
  width: var(--pw-site-width);
  max-width: var(--pw-content-max);
  margin-inline: auto;
}

/* The header's older internal 30px padding created an unintended double inset. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-topbar .nav-wrap {
  width: var(--pw-site-width);
  max-width: var(--pw-content-max);
  padding-inline: 0;
  margin-inline: auto;
}

/* Themed containers: same outside edges as header while retaining card padding. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-ref-worlds,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .footer-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .footer-bottom,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .section.shell {
  width: var(--pw-site-width);
  max-width: var(--pw-content-max);
  margin-inline: auto;
}

/* Do not constrain entire informational/game templates to earlier site-wide limits. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .inner-page.shell,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .prose-page.shell,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .phase8-page.shell {
  width: var(--pw-site-width);
  max-width: var(--pw-content-max);
}

/* Keep intentionally focused reading and game boards readable within the wide page. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .prose-page > :is(p,ul,ol,blockquote),
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .phase7-article > :is(p,ul,ol,blockquote) {
  max-width: 82ch;
}
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) :is(.play-content,.play-board,.exp-grid,.p13-grid,.p13-practice) {
  min-width: 0;
}
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .world-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .game-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .guide-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .phase5-feature-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .dashboard-grid,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-category-viewport,
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-ref-viewport {
  max-width: 100%;
  min-width: 0;
}

/* Avoid card overflow across intermediate screens. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) :is(.world-grid,.game-grid,.guide-grid,.phase5-feature-grid,.dashboard-grid) > * {
  min-width: 0;
}

@media (min-width: 1800px) {
  /* More usable, professional space on 4K/ultrawide desktops. */
  body[data-route="/"] .hero-inner {
    gap: clamp(28px, 3vw, 58px);
  }
}

@media (max-width: 850px) {
  :root { --pw-content-gutter: 20px; }
  body[data-route="/"] .pw-cinematic-hero .hero-inner {
    width: var(--pw-site-width);
    max-width: var(--pw-content-max);
  }
}

@media (max-width: 600px) {
  :root { --pw-content-gutter: 15px; }
  body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-topbar .nav-wrap {
    width: var(--pw-site-width);
    padding-inline: 0;
  }
  body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) :is(.section.shell,.inner-page,.prose-page,.pw-ref-worlds) {
    width: var(--pw-site-width);
  }
}