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

   What is here is the board of souls, and the flash row that carries a verse
   as the board lights up.

   --------------------------------------------------------------------------
   A DARK SOUL AND A LIGHT ONE MUST NOT DIFFER ONLY IN COLOUR

   The whole board is circles with no text on them, so this is the one game on
   the site where colour is genuinely tempting as the only signal — and the one
   where it would do the most harm, because the player has to read the WHOLE
   BOARD at a glance to plan a move.

   So a light soul differs in four ways: it is brighter, it is warmer, it has a
   ring, and it carries a small mark. Its accessible name says "light" or
   "dark" in words as well.

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

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

:root {
  --soul-gap: 7px;

  /* A soul still in the dark: cold, sunken, quiet. */
  --soul-dark: radial-gradient(circle at 50% 35%, #2a2350 0%, #14103a 60%, #0c0926 100%);

  /* A soul come to the light: warm, raised, and unmistakably the other thing. */
  --soul-lit: radial-gradient(circle at 50% 35%, #fff6d0 0%, #ffcc33 55%, #b7860b 100%);
}

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

/*
 * Square, and capped in both directions.
 *
 * `aspect-ratio` off the width makes it square in portrait, which is nearly
 * every visitor; `max-height` clamps it in landscape and the ratio gives way,
 * which is the right thing to give up because the cells stay identical to one
 * another either way.
 *
 * --soul-cols is set from Scripts.js out of the board size in souls.php, so
 * changing SOULS_SIZE changes the grid and nothing here has to be touched.
 */
.board {
  display: grid;
  grid-template-columns: repeat(var(--soul-cols, 5), 1fr);
  gap: var(--soul-gap);
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 30rem;
  max-height: 100%;
  margin: auto;
  padding: var(--soul-gap);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 232, 176, 0.05), rgba(8, 6, 26, 0.4));
}

@supports not (aspect-ratio: 1 / 1) {
  .board {
    height: 100%;
    max-height: 30rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 3. A soul                                                                  */
/* -------------------------------------------------------------------------- */

.soul {
  position: relative;
  /* 44px is what a fingertip needs. On a 5x5 board inside a phone-width app
     each cell is comfortably over that; the floor is here for the smallest
     windows, where the shell has already allowed the page to scroll. */
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 2px solid rgba(255, 214, 130, 0.18);
  border-radius: 50%;
  background: var(--soul-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) ease, border-color var(--dur) ease,
              box-shadow var(--dur) ease, transform var(--dur) ease;
}

/*
 * The mark on a soul, drawn rather than typed so it costs no font and cannot
 * be selected. A small cross of light on the ones that have come to it.
 *
 * This is the fourth signal — see the rule at the top of this file. Brightness,
 * warmth, a ring and a shape, so nobody is relying on the colour alone.
 */
.soul::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  background:
    linear-gradient(to bottom, transparent 42%, rgba(90, 55, 5, 0.75) 42%, rgba(90, 55, 5, 0.75) 58%, transparent 58%),
    linear-gradient(to right, transparent 42%, rgba(90, 55, 5, 0.75) 42%, rgba(90, 55, 5, 0.75) 58%, transparent 58%);
  background-size: 46% 46%;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity var(--dur) ease;
}

.soul.is-lit {
  background: var(--soul-lit);
  border-color: var(--gold-1);
  box-shadow: 0 0 12px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.soul.is-lit::after { opacity: 1; }

.soul.is-dark {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6);
}

.soul:active { transform: scale(0.92); }

/* -------------------------------------------------------------------------- */
/* 4. The flash row                                                           */
/* -------------------------------------------------------------------------- */

/*
 * FIXED height. A verse arriving must not shove the board upwards while a
 * child is deciding where to touch — on a puzzle whose whole difficulty is
 * knowing where things are, that is worse than it would be anywhere else.
 */
.flash {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 4.2em;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--panel-edge);
  background: rgba(8, 6, 26, 0.55);
  text-align: center;
  font-size: clamp(0.74rem, 2.8vw, 0.9rem);
  line-height: 1.35;
  color: var(--text);
  transition: border-color var(--dur) ease;
}

.flash.is-verse {
  border-color: rgba(255, 204, 51, 0.5);
  background: rgba(26, 18, 58, 0.7);
}

.flash__mark {
  flex: 0 0 auto;
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-2);
}

.flash__verse {
  font-family: var(--font-display);
  font-style: italic;
  color: #fdf6e3;
}

.flash__ref {
  font-size: 0.82em;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-2);
  white-space: nowrap;
}

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

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

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

  .flash { height: 4.6em; padding: 0 8px; }
}

/*
 * Phone landscape. shell.css hides .hud, .hint and .progress; this game does
 * not need the clock back — it has no clock — so only the flash row tightens,
 * and the board, being square, is limited by the height and shrinks with it.
 */
@media (max-height: 460px) and (orientation: landscape) {
  .flash { height: 3em; font-size: 0.72rem; }
}

/*
 * Below 300px the shell stops being a fixed-height column and the page scrolls
 * (Standards.md §5). The board gets a floor rather than collapsing.
 */
@media (max-height: 299px) {
  .board { height: 230px; min-height: 230px; }

  .flash { height: auto; min-height: 4.2em; }
}

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

/* theme.css kills the transitions. The press also SCALES, and a transform with
   no duration still jumps, so the movement itself has to go. */
@media (prefers-reduced-motion: reduce) {
  .soul:active { transform: none; }
}

/*
 * Windows High Contrast. The system throws the palette away, which on a board
 * of circles would leave a dark soul and a light one identical — the single
 * worst case of it anywhere on this site, because there is no text to fall
 * back on. An explicit border and the drawn mark carry it.
 */
@media (forced-colors: active) {
  .board,
  .flash {
    border: 1px solid CanvasText;
  }

  .soul { border: 2px solid CanvasText; background: Canvas; }

  .soul.is-lit {
    background: Highlight;
    outline: 3px solid CanvasText;
    outline-offset: -3px;
  }

  /* The drawn cross is a gradient, which forced colours discards. Put a real
     glyph there instead, so a light soul is still distinguishable. */
  .soul.is-lit::after {
    content: "✦";
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    opacity: 1;
    color: HighlightText;
    font-size: 1rem;
  }
}

@media (prefers-contrast: more) {
  .soul { border-width: 3px; }
}

@media print {
  .board,
  .flash {
    display: none !important;
  }
}