@charset "UTF-8";
/* ==========================================================================
   Bible Books Memory — 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 turning and the panel
   under it are in /biblegames/shared/grid.css. Both load before this file.

   The one difference from the Ten Commandments is that BOTH halves of this
   pack carry words — "Revelation" and "The very last book" — where half of that
   pack is a single digit. So the cards want to be a little wider and the type a
   little smaller, and nothing else changes at all.
   ========================================================================== */

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

.grid {
  /*
   * Four across, not the shared five.
   *
   * Twenty cards of words go 4x5. At five across, "The loyal daughter-in-law"
   * in a 66-pixel column is five lines of hyphenated type on a phone, and the
   * card stops being readable at a glance — which is the one thing a memory
   * card has to be.
   */
  --grid-cols: 4;
  max-width: 36rem;
}

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

/*
 * The book name is the anchor, so it is set in the display face and stands
 * slightly apart from the description it is being matched to. Both are still
 * the same size — this is emphasis, not hierarchy, because neither half of a
 * pair is more important than the other.
 */
.card--a.is-up .card__face,
.card--a.is-matched .card__face {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

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

/* Already four across; the shared block would take it to four as well, so
   there is nothing to say here for a narrow phone. */

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