/* One viewport contract for playable pages. The game remains in normal flow;
   ads may use their own space without sharing a hit target with our controls. */
body[data-game-page],
body[data-mode="solver"] {
  --game-bottom-clearance: calc(max(var(--mobile-nav-height, 0px), env(safe-area-inset-bottom, 0px)) + var(--ad-adhesion-h, 0px));
  --game-viewport-height: calc(100dvh - var(--game-bottom-clearance) - 72px);
  padding-bottom: calc(var(--game-bottom-clearance) + 24px);
  scroll-padding-bottom: calc(var(--game-bottom-clearance) + 24px);
}

body[data-game-page] :is(button, input, [tabindex]),
body[data-mode="solver"] :is(button, input, [tabindex]) {
  scroll-margin-block-end: calc(var(--game-bottom-clearance) + 20px);
}

.game-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-block: 0 12px;
}

.game-shell__header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.game-shell__mode {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.game-shell__mode :is(button, a) {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
}

.game-shell__mode :is([aria-pressed="true"], [aria-current="page"]) {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 1199px) {
  body[data-game-page],
  body[data-mode="solver"] {
    --mobile-nav-height: 0px;
  }

  /* In a game, the existing header menu replaces the four bottom shortcuts.
     It opens the same accessible menu and leaves the keyboard all its space. */
  body[data-game-page] .bottom-nav,
  body[data-mode="solver"] .bottom-nav {
    display: none !important;
  }

  body[data-game-page] .mobile-menu-btn,
  body[data-mode="solver"] .mobile-menu-btn {
    display: inline-flex !important;
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  body[data-game-page] .header {
    min-height: 52px;
    margin-bottom: 4px;
    padding-block: 4px;
  }

  body[data-game-page] .header-content {
    gap: 6px;
  }

  body[data-game-page] main.page {
    padding-top: 8px;
  }

  body[data-game-page] :is(.page-heading, .game-page-heading) {
    gap: 6px;
    margin-block: 0 12px;
    padding-block: 0;
  }

  body[data-game-page] .page-heading :is(.page-art, .page-mark) {
    display: none;
  }

  body[data-game-page] :is(.page-heading, .game-page-heading) h1 {
    margin-block: 0 4px;
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  body[data-game-page] :is(.page-header__subtitle, .page-heading__summary) {
    margin-block: 0;
    font-size: .875rem;
    line-height: 1.4;
  }
}