/* tadpole-layout.css — the SHARED game-header 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.

   Standard top-of-screen rhythm (the <body> is a flex column, so we set `order`
   on its direct children rather than moving markup):

     eyebrow  (set label / recipe name)   order -4   small, muted, uppercase
     PROMPT   (the task — the hero)        order -3   BIG, sentence case, --ink
     stars    (progress)                   order -2   small compact ⭐ chip
     board                                 order  0   (default)
     secondary "how-to" line              (default)  16px muted, below the board

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

/* ---- 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 */
}
