@charset "UTF-8";
/* ==========================================================================
   Ten Commandments — what belongs to this game alone
   --------------------------------------------------------------------------
   Almost nothing, and that is the point of the shared card grid.

   The no-scroll column, the top bar, the scoreboard and the score card are in
   /biblegames/shared/shell.css. The board, the cards, the flip and the panel
   under it are in /biblegames/shared/grid.css. Both are loaded before this
   file, so anything here overrides them.

   What is left is the two things that are genuinely this game's:

     1. FIVE COLUMNS, not the shared default. Twenty cards go 5x4, and the
        numbers on half of them are one or two characters wide, so the cards can
        be narrower here than in a game whose cards all carry words.

     2. THE NUMBER CARDS ARE SET AS NUMBERS. Half this pack says "7" and half
        says "Do not steal", and one size of type cannot serve both — a "7" at
        label size is a lost little mark in the middle of a card.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. The board                                                               */
/* -------------------------------------------------------------------------- */

.grid {
  /* Twenty cards, five across and four down. grid.css defaults to five and
     drops to four on a narrow phone, which gives 4x5 — also fine, and the
     reason the count is a token rather than written into the markup. */
  --grid-cols: 5;
  max-width: 34rem;
}

/* -------------------------------------------------------------------------- */
/* 2. The number cards                                                        */
/* -------------------------------------------------------------------------- */

/*
 * A number wants to be big.
 *
 * `.card--a` is the numbers side. Left at the shared label size a "7" reads as
 * a smudge in the middle of an otherwise empty card, and the two halves of the
 * pack stop looking like halves of one pack.
 *
 * This is only the FACE. The back of a number card still says "Number" at the
 * shared size, because that word is doing accessibility work and must not
 * shout.
 */
.card--a.is-up .card__face,
.card--a.is-matched .card__face {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* 3. Responsive                                                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .grid { --grid-cols: 4; }
}

/*
 * Phone landscape. grid.css goes to seven columns, which for twenty cards
 * leaves a ragged last row of six. Ten across gives 10x2, which is tidy and
 * uses the width that landscape actually has.
 */
@media (max-height: 460px) and (orientation: landscape) {
  .grid { --grid-cols: 10; max-width: 100%; }

  .card--a.is-up .card__face,
  .card--a.is-matched .card__face {
    font-size: clamp(0.9rem, 3.4vh, 1.4rem);
  }
}