/* tadpole-layout.css — the SHARED game layout standard.
   Loaded by every game AFTER its inline <style> (link sits just before </head>),
   so these rules win the cascade on equal specificity. Relies on the CSS variables
   every game already defines: --ink, --muted, --accent, --gold.

   ==========================================================================
   THE SUITE HAS EXACTLY TWO LAYOUT TEMPLATES. Pick one — never invent a third.
   ==========================================================================

   1. FLOW (the default — ~23 games: Tick or Fix, Fredle, Sumdle, Flagle, the
      picture games, the language games …). Body IS the page: the game's parts are
      direct <body> children in normal document flow, ordered by the `order` rules
      below, with the About copy last. The page scrolls; the board sizes itself to
      its content. Use this unless the game needs a fixed frame.

        <body>
          <header class="header">      order -5   nav
          <div class="set-label">      order -4   eyebrow (or .recipe-name)
          <div class="instruction">    order -3   PROMPT — the task, the hero line
          <div class="stars-row">      order -2   stars chip (or .score-area)
          <div class="play">           order  0   the board
          <div class="feedback">       (default)  secondary "how-to" line
          <main class="about-us">                 SEO copy, below the fold

   2. SCREEN (4 games: Make a Cake, Make a Rainbow, Build a Building, Chess).
      Same header rhythm, but the game is framed inside ONE non-scrolling viewport
      so a tray can be pinned to the bottom edge. Everything gameplay lives inside
      `.screen` (exactly 100dvh) > `.app` (the 440px column); the About copy is a
      SIBLING of `.screen`, so the page still scrolls to reach it.

        <body>
          <div class="screen">                    exactly 100dvh, never shrinks
            <header class="header">
            … eyebrow / prompt / stars …
            <div class="app">                     440px column, flex:1, clips
              <main class="stage">                flex:1 — the board, absorbs slack
              <div class="tray-wrap">             pinned to the bottom, --drag-guard
          <main class="about-us">                 SEO copy, sibling of .screen

      `.screen` and `.app` are defined ONCE, here. Do not re-declare them per game.

   See web/brand/GAME-HEADER.md for the canonical markup + how to use it. */

/* ---- The SCREEN template's two boxes ----
   .screen must be EXACTLY one viewport tall. The subtlety: <body> is itself a flex
   column, so `.screen` is a flex ITEM, and a flex item's default `flex-shrink:1`
   overrides its own `height`. Because `.about-us` sits below it and text cannot
   compress, ALL the shrink pressure landed on `.screen` — whose children carry
   `min-height:0`/`overflow:hidden` and so happily collapse. Chess rendered 515px
   and Make a Rainbow 474px inside a 664px viewport: the game squashed into the top
   two-thirds with dead space beneath, purely because the SEO copy existed. Hence
   `flex:0 0 auto` — the declared 100dvh is the height, and the About copy overflows
   into normal page scroll where it belongs. */
.screen { width: 100%; height: 100dvh; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.app    { width: 100%; max-width: 440px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---- Bottom system-gesture guard: --drag-guard ----
   Phones reserve a strip along the bottom edge of the SCREEN for the system swipe-up
   (home / app switcher). A touch that starts inside that strip belongs to the OS, so a
   drag begun on a tile sitting there doesn't pick the tile up — it backgrounds Safari.

   env(safe-area-inset-bottom) does NOT protect against this on the web. iOS Safari
   reports it as 0 while its own toolbar covers the strip, and every game page scrolls
   (the About copy sits below the fold), so the toolbar collapses, the 100dvh game screen
   grows down onto the gesture strip, and the inset is still 0. A tray pinned to the
   bottom of the viewport with only its own 10-16px margin lands right on it.

   So the clearance is floored rather than trusted to the inset. Any DRAGGABLE surface
   pinned to the bottom of the viewport sets its bottom margin to
   `max(var(--drag-guard), <its own spacing>)`. 34px is the iPhone home-indicator inset —
   comfortably past the ~21pt gesture region, with room left for a child's loose grab.
   Coarse pointers only: a mouse has no gesture strip, so desktop keeps its tight layout. */
:root { --drag-guard: 0px; }
@media (pointer: coarse) { :root { --drag-guard: 34px; } }

/* ---- Nav bar stays pinned to the very top ----
   The eyebrow/prompt/stars below use negative `order` to sit above the board; the nav
   (`.header`) is also a direct flex child of <body>, so it MUST get the most-negative
   order or it falls below them. (The screenshot pipeline hides .header, so this only
   shows on the live site.) */
.header { order: -5; max-width: none; }   /* nav: pinned to top AND full-width on every game (some games inline max-width:440 — standardise it here) */

/* ---- Primary prompt: the hero line (the task) ---- */
.hint-line,
.instruction {
  order: -3;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  padding: 8px 18px 2px;
}

/* ---- Stars: one small, consistent chip just under the prompt ---- */
.score-area,
.stars-row {
  order: -2;
  padding: 8px 16px 18px;          /* breathing room above (from prompt) + below (from board) */
}
.score-area .score-label { display: none; }          /* drop the "Stars" word — keep ⭐ N */
.score-area .score-value,
.stars-row {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0;
}

/* ---- Eyebrow: set label / recipe name, small + muted, very top ---- */
.set-label,
.recipe-name {
  order: -4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 4px 16px 0;
}

/* ---- Secondary "how-to" line below the board — kept at 16px, with breathing room ---- */
.feedback {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  padding: 18px 16px 10px;         /* space above (from the board) + below */
}
