@charset "UTF-8";
/* ==========================================================================
   Next Scripture Line — styles.css
   --------------------------------------------------------------------------
   ALMOST EVERYTHING THIS PAGE LOOKS LIKE IS SOMEWHERE ELSE, ON PURPOSE.

     /biblegames/shared/theme.css   the night sky, the golds, the three levels
                                    of ink, the type stacks, the focus ring,
                                    the self-check report panel.
     /biblegames/shared/quiz.css    the whole four-choice layout: the no-scroll
                                    flex column, the scoreboard, the answer
                                    grid, the feedback panel, the score card.
     this file                      only what belongs to this game alone.

   index.php loads them in that order, so anything here overrides both.

   THIS IS THE LONGEST OF THE FIVE PER-GAME STYLESHEETS, AND IT SHOULD BE.

   Every other quiz on the site answers with a NAME — "Aaron", "Nahum", "Ten".
   This one answers with a CLAUSE of up to seventy characters, and that single
   fact changes the answer grid, the button height, the type size and the
   landscape layout. Everything below follows from it, and nothing below would
   suit any other game, which is exactly why it is here and not in quiz.css.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. What this game asks for                                                 */
/* -------------------------------------------------------------------------- */

:root {
  /*
   * Four stacked buttons instead of two rows of two, so each one needs to be
   * about half as tall — 2 x 84px of shared default becomes 4 x 46px for very
   * nearly the same total height, and the question above keeps its room.
   *
   * The 40px floor is below the 44px touch-target guidance, and is chosen
   * deliberately: a button 320px WIDE and 40px tall is a far larger target than
   * a 44px-tall one half that width, and the guidance is about area a fingertip
   * can hit, not about height alone. On any screen with room the clamp lifts it
   * back over 44px anyway.
   */
  --ans-min-h: clamp(40px, 6.4vh, 58px);

  /*
   * Sized for the longest ending in the bank, which ?check=1 reports and which
   * is 65 characters. Two lines of this on a 320px screen fit the button above;
   * three do not, which is why the ceiling is well under quiz.css's 1.4rem.
   */
  --ans-font: clamp(0.74rem, 2.5vw, 1rem);
}

/* -------------------------------------------------------------------------- */
/* 2. The opening of the verse                                                */
/* -------------------------------------------------------------------------- */

/*
 * The prompt here IS scripture, so it is set as scripture — italic, in the
 * display face, exactly as Who Said It sets its quotations.
 *
 * Unlike that game there are NO quotation marks, and that is a deliberate
 * difference rather than an oversight: the text is half a sentence and ends in
 * an ellipsis, so an opening quotation mark with no closing one would read as a
 * mistake on every single question. The ellipsis already says "there is more of
 * this", which is the whole point of the game.
 */
.ask {
  max-width: 34ch;
  font-style: italic;
  font-size: clamp(1.05rem, 3.8vw, 1.65rem);
}

/* -------------------------------------------------------------------------- */
/* 3. The four endings — one column, not two by two                           */
/* -------------------------------------------------------------------------- */

/*
 * quiz.css puts the answers two by two, and says why: names run long and four
 * across a 320px screen wraps every one of them.
 *
 * That reasoning gives the opposite answer here. "but the gift of God is
 * eternal life through Jesus Christ our Lord" is 65 characters. In a
 * half-width button on a phone that is five or six lines; in a full-width one
 * it is two. So this game takes the full width and stacks them.
 *
 * It also reads better. The four endings are alternative continuations of one
 * sentence, and a column is how you compare four versions of a line — the eye
 * runs down the left edge of each and the differences line up. Two by two puts
 * them side by side, where nothing lines up with anything.
 */
.answers {
  grid-template-columns: 1fr;
  gap: 6px;
}

/*
 * Left-aligned, not centred, and indented past the tick.
 *
 * Centring is right for a name, which is short and sits in the middle of its
 * button. It is wrong for a clause: four centred clauses of different lengths
 * start at four different places, and comparing them means finding the start of
 * each one first.
 *
 * The left padding clears .ans__mark, which quiz.css positions absolutely at
 * the top left so the tick or cross cannot shift the text when it appears.
 */
.ans {
  justify-content: flex-start;
  padding-left: 34px;
  padding-right: 12px;
  text-align: left;
}

.ans__name {
  text-align: left;
  /*
   * Endings are quoted scripture on the button as well as in the panel, so
   * they are set in the same italic display face as the prompt above. That is
   * also what tells a player at a glance that all four are being offered AS
   * scripture — three of them just are not what this verse says.
   */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
}

/* The mark sits centred against a shorter button than the shared default. */
.ans__mark {
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}

/* -------------------------------------------------------------------------- */
/* 4. Small screens and landscape                                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  :root {
    /* Four rows plus their gaps is the tightest part of this layout on a small
       phone, so the floor comes down a little further here than the shared
       file's does. */
    --ans-min-h: clamp(38px, 6vh, 52px);
    --ans-font: clamp(0.7rem, 3.1vw, 0.9rem);
  }

  .ans {
    padding-left: 30px;
  }
}

/*
 * Phone landscape.
 *
 * quiz.css puts the answers FOUR ACROSS here, because for one-word names width
 * is what there is. For clauses that is the worst possible arrangement: four
 * columns of 65 characters on a 640px screen is about eight lines each.
 *
 * So this game goes two by two in landscape instead — which is the shared
 * file's portrait layout, arrived at from the opposite direction. Two columns
 * is enough width for a clause to sit on two lines, and two rows is short
 * enough to leave the verse its room on a 400px-high screen.
 */
@media (max-height: 460px) and (orientation: landscape) {
  .answers {
    grid-template-columns: 1fr 1fr;
  }

  :root {
    --ans-min-h: clamp(38px, 13vh, 54px);
    --ans-font: clamp(0.68rem, 2.1vh, 0.88rem);
  }

  .ask {
    font-size: clamp(0.95rem, 4vh, 1.25rem);
  }
}

/* -------------------------------------------------------------------------- */
/* 5. Print                                                                   */
/* -------------------------------------------------------------------------- */

/* The blanket print rules are in quiz.css. Nothing here needs adding. */