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

/*
 * The board is as wide as the tier is long.
 *
 * Four letters up to seven, so the column count and the width both come from
 * --wg-length rather than from a number in here. 20rem across seven columns
 * would be a 2.5rem tile with a 2.1rem letter in it, which is a letter in a
 * box rather than a tile; the cap is per-letter instead, and a seven-letter
 * board is simply wider than a four-letter one.
 */
.wg-board {
  display: grid;
  grid-template-rows: repeat(var(--wg-rows, 6), 1fr);
  gap: var(--space-2);
  width: 100%;
  /*
   * Two caps, and the second one is the interesting one.
   *
   * Six rows of square tiles means the board's height is its width times
   * six over the word length - so a board capped only by width grows past
   * the bottom of a short window and takes the keyboard with it. The
   * platform hands down --board-fit, which is the height this card may
   * have; converting it back into a width is what keeps the keyboard on
   * the first screen. The 2.5rem is the five gaps between the rows.
   */
  max-width: min(
    calc(var(--wg-length, 5) * 4rem),
    calc((var(--board-fit, 30rem) - 2.5rem) * var(--wg-length, 5) / 6)
  );
  margin-inline: auto;
}

.wg-row {
  display: grid;
  grid-template-columns: repeat(var(--wg-length, 5), 1fr);
  gap: var(--space-2);
}

.wg-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  /* Scaled to the tile, which is the viewport split by the word length. On a
     375px phone that is a 1.9rem letter at four letters and 1.2rem at seven,
     both of them comfortably above the readable floor. */
  font-size: min(calc(32rem / var(--wg-length, 5)), calc(6.4vw * 5 / var(--wg-length, 5)), 2.1rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--surface-card);
}

.wg-tile[data-filled="1"] { border-color: var(--border-strong); }

/*
 * Marks carry meaning, so they must not rely on colour alone: a colour-blind
 * player needs the same information. Each state also changes the border and
 * the text weight, and the cells are labelled for screen readers.
 */
.wg-tile[data-mark="exact"] {
  background: var(--good);
  border-color: var(--good);
  color: var(--text-inverse);
}

.wg-tile[data-mark="present"] {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--text-inverse);
}

.wg-tile[data-mark="absent"] {
  background: var(--surface-sunken);
  border-color: var(--surface-sunken);
  color: var(--text-muted);
}

.wg-status {
  margin: var(--space-4) 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  min-height: 1.5em;
}

/* ---------- Keyboard, in the thumb zone ---------- */

.wg-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 30rem;
  margin-inline: auto;
  width: 100%;
}

.wg-keyrow {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

.wg-key {
  flex: 1;
  min-width: 0;
  /* Below the 44px guidance, as every on-screen keyboard is: ten keys cannot
     fit a 320px row otherwise. Height keeps the target reachable. */
  min-height: var(--tap-min);
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.wg-key:hover { background: var(--surface-hover); }
.wg-key--wide { flex: 1.6; font-size: var(--text-xs); }

.wg-key[data-mark="exact"]   { background: var(--good);    border-color: var(--good);    color: var(--text-inverse); }
.wg-key[data-mark="present"] { background: var(--warning); border-color: var(--warning); color: var(--text-inverse); }
.wg-key[data-mark="absent"]  { background: var(--surface-page); color: var(--text-muted); }

/*
 * This game's share of the window, set here rather than in app.css for the
 * same two reasons: that file is render-blocking and nearly at its budget,
 * and this number belongs to this game. 28rem is the seven-letter board at
 * 4rem a letter; the shorter tiers cap themselves below it.
 */
body[data-game="word-guess"] {
  --board-max: 28rem;
}

/*
 * And its share of a laptop.
 *
 * Six rows of tiles, each a fifth of the board wide, and a keyboard under
 * them: every pixel off the cap takes rather more than a pixel off the
 * height, which is why this number is the largest of the five and still
 * leaves the board the right size.
 */
@media (min-width: 64rem) {
  body[data-game="word-guess"] {
    --board-reserve: 38rem;
  }
}