/**
 * Ponoki. Below-the-fold content block.
 *
 * Each game renders in a position: fixed, full-viewport .screen or .stage, so
 * prose placed after it in normal flow would sit behind the game and be
 * unreachable. This sheet makes the page scrollable, parks a full-viewport
 * spacer under the game, and puts the prose after it. Scrolling slides the
 * prose up over the still-running game. Scrolling back reveals the game
 * exactly as it was.
 *
 * The game itself is never touched. It keeps position: fixed and inset: 0.
 *
 * WHY THIS IS SAFE, do not "simplify" it:
 *   Because the games are position: fixed, they do not move when the document
 *   scrolls. Bubble rects and the fixed particle layers that receive their
 *   getBoundingClientRect() coordinates therefore move together, so the
 *   viewport-coordinate maths stays correct at any scroll offset. Measured on
 *   pop-spiral: the score popup lands 40px from the clicked bubble with this
 *   block, 47px without it, and 36px while scrolled 200px mid game.
 *   Nothing here introduces a transform, filter, contain or backdrop-filter,
 *   so no new containing block appears for those fixed layers. See the note at
 *   the top of desktop-frame.css.
 *
 * TWO TRAPS, both load bearing:
 *   1. Several games set html, body { height: 100% }. That caps the document,
 *      so the spacer adds no scroll height at all. Hence height: auto.
 *   2. When one overflow axis is hidden and the other is visible, the visible
 *      one computes to auto, which turns body into its own scroll container
 *      instead of scrolling the document. clip is the only partner value that
 *      lets visible stay visible, hence overflow-x: clip.
 */

:root {
  --pk-seo-max: 32rem;
}

/* Make the document scrollable. The games ship with overflow: hidden on html
   and/or body, which is what pins them to exactly one screenful today. */
html {
  height: auto;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-y: contain; /* no pull to refresh sneaking in */
}

body {
  height: auto;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: visible;
  /* lantern, lumen and wisp set touch-action: none on body, which blocks
     touch scrolling outright. They take no touch input during play (breath
     drives them), so allowing a vertical pan costs them nothing. */
  touch-action: pan-y;
}

/* Holds open exactly one viewport so the game is alone above the fold and the
   prose starts just past it. Inert: never intercepts a tap meant for the game. */
.seo-spacer {
  height: 100dvh;
  pointer-events: none;
}

/* Sits above every game layer so scrolling covers the game rather than
   fighting it for the same pixels. Opaque background is what makes that read
   as a panel instead of a bleed through. */
.seo-block {
  position: relative;
  z-index: 100;
  background: var(--color-bg-deep, hsl(230, 35%, 7%));
  border-top: 1px solid hsla(220, 20%, 60%, 0.12);
  color: var(--color-text-primary, hsl(220, 20%, 92%));
  font-family: var(--font-body, 'Inter', sans-serif);
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem clamp(3rem, 8vw, 4.5rem);
  padding-bottom: max(env(safe-area-inset-bottom), clamp(3rem, 8vw, 4.5rem));
}

.seo-inner {
  max-width: var(--pk-seo-max);
  margin-inline: auto;
}

.seo-block h2 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.seo-block h1 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.seo-block p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-primary, hsl(220, 20%, 92%));
  margin-bottom: 1rem;
}

.seo-block p:last-child {
  margin-bottom: 0;
}

.seo-block a {
  color: var(--color-accent, hsl(185, 70%, 55%));
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .seo-block a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Installed app (Android TWA and installed PWA) hides this entirely: someone
   who already installed Ponoki does not need the page that sells Ponoki.
   Pure CSS on display context, so every requester still receives identical
   bytes and a crawler, which renders in browser display-mode, still sees it.
   With the block gone the document has nothing to overflow, so the scroll
   rules above become inert and the app renders exactly as it did before. */
@media (display-mode: standalone) {
  .seo-spacer,
  .seo-block {
    display: none;
  }
}