@charset "UTF-8";
/* ==========================================================================
   Bible Names Memory — what belongs to this game alone
   --------------------------------------------------------------------------
   The no-scroll column, the top bar, the scoreboard, the answer panel and the
   score card are in /biblegames/shared/shell.css, loaded before this file.

   What is here is the board of twelve names, and where the panel sits.

   This game does NOT wear grid.css. It has no pairs and nothing is turned
   over — it is Simon, not a memory grid, whatever the audit table said — and
   the two have almost nothing in common but the word "memory".

   --------------------------------------------------------------------------
   A LIT NAME AND A RESTING ONE DIFFER IN MORE THAN COLOUR

   The 2024 board was twelve buttons whose only difference was a background
   colour set from JavaScript, and a lit one differed from the rest by being a
   slightly different colour and 7 pixels of border.

   A lit name here is brighter, warmer, ringed in gold and lifted off the
   board, and the standing line above says "Watch" or "Your turn" in words.

   --------------------------------------------------------------------------
   Contents
     1. Tokens
     2. The board
     3. A name
     4. The panel
     5. Responsive
     6. Reduced motion, forced colours, more contrast, print
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Tokens                                                                  */
/* -------------------------------------------------------------------------- */

:root {
  --name-gap: 6px;
  --name-cols: 3;
}

/* -------------------------------------------------------------------------- */
/* 2. The board                                                               */
/* -------------------------------------------------------------------------- */

.board {
  display: grid;
  grid-template-columns: repeat(var(--name-cols), 1fr);
  /* The rows share whatever .stage has, so the twelve fill the screen rather
     than sitting in a block with a third of the page empty around them. */
  grid-auto-rows: 1fr;
  gap: var(--name-gap);
  width: 100%;
  height: 100%;
  max-width: 34rem;
  margin: auto;
  min-height: 0;
}

/* -------------------------------------------------------------------------- */
/* 3. A name                                                                  */
/* -------------------------------------------------------------------------- */

.name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* A fingertip floor, not a size — the rows share the board's height, so a
     button is normally taller than this. The 2024 board hard-coded
     `padding: 60px`, which is why it could not fit a phone. */
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--panel-1), var(--panel-2));
  color: var(--gold-1);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) ease, border-color var(--dur) ease,
              box-shadow var(--dur) ease, transform var(--dur) ease,
              color var(--dur) ease;
}

.name__word {
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 3.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Who they were. --text-dim, not --text-faint: it is the teaching half of the
   button, so it has to be readable, not decorative. */
.name__who {
  font-size: clamp(0.54rem, 2.1vw, 0.7rem);
  line-height: 1.15;
  color: var(--text-dim);
  text-align: center;
  overflow-wrap: break-word;
}

/* ---- the three lit states ----------------------------------------------- */

/*
 * The game showing you the sequence. The brightest thing on the page while it
 * is happening, because it is the only thing that matters then.
 */
.name.is-lit {
  background: linear-gradient(160deg, #ffe9a8, #ffcc33);
  border-color: var(--gold-1);
  color: #241703;
  box-shadow: 0 0 18px var(--gold-glow);
  transform: scale(1.04);
}

.name.is-lit .name__who { color: #4a3208; }

/* The player pressing one. Cooler than the game's own flash, so a child can
   tell "I did that" from "it did that". */
.name.is-tap {
  background: linear-gradient(160deg, #9fe6c0, #3f9a6d);
  border-color: var(--ok);
  color: #062514;
  box-shadow: 0 0 14px rgba(134, 230, 168, 0.5);
}

.name.is-tap .name__who { color: #0d3a22; }

.name.is-wrong {
  background: linear-gradient(160deg, #ffb59a, #b8482a);
  border-color: var(--wrong);
  color: #2b0d04;
  box-shadow: 0 0 14px rgba(255, 156, 110, 0.5);
}

.name.is-wrong .name__who { color: #40160a; }

.name:active { transform: scale(0.96); }

/* -------------------------------------------------------------------------- */
/* 4. The panel                                                               */
/* -------------------------------------------------------------------------- */

/*
 * Its own row under the board, with a FIXED height — so a name arriving
 * cannot shove the board upwards while a player is holding its shape in their
 * head. Same reasoning as the card grids; different game, same problem.
 */
.namenote {
  flex: 0 0 auto;
  height: 8.6em;
  overflow-y: auto;
  padding: 7px 12px;
}

.namenote .feedback__why { font-size: 0.86rem; }
.namenote .feedback__verse { font-size: 0.86rem; }
.namenote .feedback__scripture { margin-top: 7px; padding: 6px 10px 5px; }

.namenote.is-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

/* -------------------------------------------------------------------------- */
/* 5. Responsive                                                              */
/* -------------------------------------------------------------------------- */

@media (hover: hover) {
  .name:hover { border-color: rgba(255, 214, 130, 0.8); }
}

@media (max-width: 420px) {
  :root { --name-gap: 5px; }

  .namenote { height: 9.2em; padding: 6px 9px; }
}

/*
 * Phone landscape. Six across, two down: the twelve go wide, which is what
 * landscape has. shell.css hides .lede here, so the standing "Watch" / "Your
 * turn" line goes with it — the board's own lighting carries it, and the
 * panel is still there.
 */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --name-cols: 6; }

  .name { min-height: 34px; }

  .name__who { display: none; }

  .namenote { height: 4.4em; }
}

@media (max-height: 299px) {
  .board { height: auto; }

  .name { min-height: 44px; }

  .namenote { height: auto; min-height: 8.6em; overflow-y: visible; }
}

/* -------------------------------------------------------------------------- */
/* 6. Reduced motion, forced colours, more contrast, print                    */
/* -------------------------------------------------------------------------- */

/*
 * Reduced motion.
 *
 * The lighting is the mechanic and stays. What goes is the SCALE — theme.css
 * removes the duration but a transform with no duration still jumps, and a
 * board of twelve buttons jumping by 4% is exactly the sort of movement the
 * setting exists to stop.
 */
@media (prefers-reduced-motion: reduce) {
  .name.is-lit { transform: none; }
  .name:active { transform: none; }
}

/*
 * Windows High Contrast. The system discards the palette, which would make a
 * lit name identical to a resting one — and here that is the whole game.
 * Outlines survive where backgrounds do not.
 */
@media (forced-colors: active) {
  .name { border: 1px solid CanvasText; }

  .name.is-lit   { outline: 4px solid Highlight; outline-offset: -4px; }
  .name.is-tap   { outline: 4px double Highlight; outline-offset: -4px; }
  .name.is-wrong { outline: 4px dotted CanvasText; outline-offset: -4px; }

  .namenote { border: 1px solid CanvasText; }
}

@media (prefers-contrast: more) {
  .name__who { color: var(--text); }
}

@media print {
  .namenote { display: none !important; }

  .name { color: #000; background: none; }
}