/* ============================================================
   Mobile-fit (formerly variant A — "Tight")
   Proportional shrink applied product-wide so each game's pre-play
   state lands above the fold on a phone. Variants B / C were
   experiments; A won the test and is now the default.
   ============================================================ */

/* Page / chrome */
.page         { padding: 14px 18px 18px; }
.meta-strip   { margin: 8px 0 14px; padding: 8px 0; }
footer.foot   { margin-top: 18px; padding-top: 12px; gap: 8px; }
.foot-by      { font-size: 11px; }
.foot-nav a   { font-size: 13px; }
header.top    { padding: 0; }
.brand .name  { font-size: 18px; }

/* YESNO pre-play */
.ask-stage     { padding: 14px 0 6px; }
.ask-label     { margin-bottom: 14px; }
.ask-rule      { margin-bottom: 16px; }
.ask-prompt    { font-size: 18px; margin: 0 auto 18px; max-width: 280px; }
.answer-btn    { font-size: 42px; height: 68px; }
.ask-hint      { margin-top: 12px; }

/* Hue pre-play */
.prompt-row         { margin: 6px 0 8px; }
.match-pair         { aspect-ratio: 4/1; }
.picker-name        { margin: 8px 0 10px; }
.slider-row         { margin-bottom: 8px; }
.slider-row__head   { margin-bottom: 2px; }
.guess-btn          { padding: 12px 16px; margin-top: 6px; }
.attempts-list      { gap: 4px; margin-top: 10px; }

/* HighLow pre-play */
.highlow-page h1   { font-size: 26px; margin: 6px 0 0; }
.hl-sub            { font-size: 13px; margin: 0 0 2px; }
.hl-streak         { margin: 0 0 8px; }
.hl-rangewrap      { margin: 8px 0 12px; }
.hl-slots          { gap: 5px; margin-bottom: 10px; }
.hl-slot           { padding: 7px 14px; }
.hl-slot-guess     { font-size: 18px; }

/* ThisThat pre-play */
.thisthat-page h1  { font-size: 26px; margin: 6px 0 0; }
.tt-sub            { font-size: 13px; margin: 0 0 2px; }
.tt-streak         { margin: 0 0 10px; }
.tt-tile           { padding: 20px 18px; }
.tt-name           { font-size: 22px; }