/* Number Merge board. Platform tokens only. */

.nm-head { display: flex; justify-content: center; }

.nm-score {
  /* Tight, because the score, the grid, the arrow pad and the status line
     all have to fit on the first screen together. */
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The grid is 3x3 on hard and 5x5 on easy, so everything in here is sized
   from --nm-size rather than from the four the game launched with. */
.nm-grid {
  display: grid;
  grid-template-columns: repeat(var(--nm-size, 4), 1fr);
  gap: clamp(var(--space-1), 1.6vw, var(--space-2));
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 1;
  background: var(--surface-sunken);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.nm-tile {
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  /* A number has to fill its tile on a 3x3 and still fit on a 5x5. */
  font-size: min(calc(24rem / var(--nm-size, 4)), calc(21.6vw / var(--nm-size, 4)), 2.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* One accent hue, deepening as the value climbs. Nine separate colours would
   read as a different product on every page. */
.nm-tile[data-value]      { background: var(--accent-soft); color: var(--accent-text); }
.nm-tile[data-value="8"],
.nm-tile[data-value="16"],
.nm-tile[data-value="32"] { background: var(--accent); color: var(--text-inverse); }
.nm-tile[data-value="64"],
.nm-tile[data-value="128"],
.nm-tile[data-value="256"] { background: var(--accent-hover); color: var(--text-inverse); }
.nm-tile[data-value="512"],
.nm-tile[data-value="1024"],
.nm-tile[data-value="2048"] { background: var(--streak); color: var(--text-inverse); }

/* Four digits in a small tile need the room. */
.nm-tile[data-value="1024"],
.nm-tile[data-value="2048"] {
  font-size: min(calc(18rem / var(--nm-size, 4)), calc(16.8vw / var(--nm-size, 4)), 1.6rem);
}

/* Arrow pad, in the thumb zone. The board is keyboard-driven on desktop. */
.nm-pad {
  display: grid;
  grid-template-columns: repeat(3, var(--tap-min));
  grid-template-areas: ". up ." "left down right";
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

.nm-key {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  font: inherit;
  font-size: var(--text-lg);
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.nm-key:nth-child(1) { grid-area: up; }
.nm-key:nth-child(2) { grid-area: left; }
.nm-key:nth-child(3) { grid-area: right; }
.nm-key:nth-child(4) { grid-area: down; }

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

/*
 * This game's share of the window.
 *
 * The grid is square, so capping its width caps its height, and underneath it
 * sit an arrow pad and a status line - about as much furniture as a Sudoku
 * keypad. On a phone the screen is narrower than the cap and this does
 * nothing; on a 1280x800 laptop it is the whole reason the card fits.
 */
@media (min-width: 64rem) {
  body[data-game="number-merge"] {
    --board-reserve: 34rem;
  }
}