/* Word Search board. Platform tokens only. */

.ws-theme {
  margin: 0 0 var(--space-3);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/*
 * Eight across on easy, fourteen on expert.
 *
 * A fourteen-column grid inside the 26rem the game launched with is a 28px
 * cell, so the board is allowed to be wider on the tiers that need it - and
 * the letters are sized from --ws-size, because a 0.95rem floor that was
 * right for twelve columns is an overflowing cell at fourteen.
 */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-size, 12), 1fr);
  gap: 2px;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  aspect-ratio: 1;
  /* Dragging across letters must not select them as text. */
  user-select: none;
  touch-action: none;
}

.ws-cell {
  display: grid;
  place-items: center;
  padding: 0;
  min-width: 0;
  font: inherit;
  /* Was clamp(0.6rem, 2.6vw, 0.95rem) - a 9.6px floor, which is smaller
     than the browser's minimum readable size and far smaller than any
     other text on the page. A 12x12 grid of letters nobody can read is
     not a puzzle, it is an eye test.

     Now divided by the column count instead of fixed, which holds that
     line at every tier: 14.6px on a 375px phone at fourteen columns, and
     25px at eight. The first is small and readable; the floor it replaced
     would simply have overflowed the cell. */
  font-size: min(calc(16.8rem / var(--ws-size, 12)), calc(40.8vw / var(--ws-size, 12)), 1.4rem);
  font-weight: 650;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ws-cell[data-selected="1"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* A find is marked by fill and by weight, so it survives a colour-blind
   palette and a greyscale print. */
.ws-cell[data-found="1"] {
  background: var(--good-soft);
  color: var(--good);
  font-weight: 800;
}

.ws-cell[data-anchor="1"] { outline: 2px solid var(--accent); outline-offset: -2px; }

.ws-words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ws-words li { color: var(--text-primary); }

/* Struck through as well as dimmed: strikethrough is the part that still
   reads when the colour does not. */
.ws-words li[data-found="1"] {
  color: var(--text-muted);
  text-decoration: line-through;
}

/*
 * This game's share of the window.
 *
 * Set here rather than in app.css, which is a render-blocking file at 90% of
 * its budget, and this is a per-game number: an expert board is fourteen
 * columns wide and carries twelve words under it, which is two lines of word
 * list more than the ten-word board the reserve was measured on.
 */
body[data-game="word-search"] {
  --board-max: 30rem;
  --board-reserve: 26rem;
}

/*
 * And its share of a laptop.
 *
 * A 1280x800 window is wider than a phone and no taller, so here the grid is
 * capped by height rather than by the width of the screen - and an expert
 * board overran the bottom of that window by 81px with the number above.
 * Twelve words under a fourteen-column grid is simply more card than an
 * 800px-high window has room for at full size.
 */
@media (min-width: 64rem) {
  body[data-game="word-search"] {
    --board-reserve: 31rem;
  }
}