/* Guest shell: .app-public column, public content container, guest focus mode. */
/* Public shell — marketing chrome for logged-out content pages; reuses .landing-topbar + .landing-footer. */
.app-public {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-0);
}
/* Frosted translucent sticky bar; do NOT use a solid fill — it kills the blur blend. */
.app-public .landing-topbar::before {
  background: color-mix(in srgb, var(--bg-0) 68%, transparent);
  border-bottom: 1px solid var(--border);
}
/* Placed AFTER the base rule so it wins at equal specificity. */
@media (max-width: 768px) {
  .app-public .landing-topbar::before { background: transparent; border-bottom: none; }
}
.app-public .public-content {
  flex: 1 1 auto; width: 100%;
  /* clip, not hidden: contains a tooltip's overflow without creating a scroll container (keeps sticky topbar working). */
  overflow-x: clip;
}

/* Focus mode for the GUEST shell — the same flag, class and exit pill AppShell uses, so a
   spectator can drop the marketing chrome the way a signed-in viewer can. */
.app-public.is-focus .landing-topbar,
.app-public.is-focus .landing-footer { display: none; }
.app-public.is-focus .public-content { height: 100vh; height: 100dvh; max-height: 100dvh; }

/* A guest watching a live match gets the GAME layout, not the marketing container: the board
   is sized to its parent, so the 1400px cap and the page's reading padding shrink it and let
   the sticky topbar and the footer close over it. Mirrors `.app-content > .game-screen`. */
.app-public .public-content > .screen.game-screen {
  max-width: 1600px;
  padding: 0.625rem 1rem 1rem;
}
@media (max-width: 640px) {
  .app-public .public-content > .screen.game-screen { padding: 0.5rem 0.25rem 0.75rem; }
}
/* Same container as .landing-container so public pages line up under the topbar. */
.app-public .public-content > .screen {
  width: 100%; max-width: 1400px;
  margin: 0 auto;
  /* Published as a token so a full-bleed hero can cancel it — see .about-hero-bg. */
  --screen-pad-top: clamp(20px, 2.5vw, 28px);
  padding: var(--screen-pad-top) var(--page-gutter) clamp(40px, 5vw, 56px);
  box-sizing: border-box;
}