.guess { display: grid; justify-items: center; gap: 12px; margin-top: 6px; }

/* Rows of tiles: as big as fit the screen's width and height, up to 6 letters across. */
.board {
  --tile: min(54px, calc((100vw - 32px - (var(--n) - 1) * 6px) / var(--n)), calc((100dvh - 470px) / 6));
  display: grid;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.board .row { display: grid; grid-template-columns: repeat(var(--n), var(--tile)); gap: 6px; }
.board .row.shake { animation: shake 0.35s ease; }

.tile, .rule-tile {
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.tile { width: var(--tile); height: var(--tile); font-size: calc(var(--tile) * 0.5); }
.tile.typed { border-color: var(--line-strong); animation: press 0.12s ease; }
.tile.hit, .rule-tile.hit { border-color: transparent; background: var(--hit-bg); color: var(--hit-fg); }
.tile.near, .rule-tile.near { border-color: transparent; background: var(--near-bg); color: var(--near-fg); }
.tile.miss, .rule-tile.miss { border-color: transparent; background: var(--miss-bg); color: var(--miss-fg); }
.tile.reveal { animation: flip 0.32s ease backwards; animation-delay: calc(var(--k) * 220ms); }
.rule-tile { display: inline-grid; width: 1.6em; height: 1.6em; font-size: 0.85em; vertical-align: middle; }

/* The on-screen keyboard: ten keys across a phone. */
.keys { display: grid; gap: 6px; width: 100%; max-width: 480px; user-select: none; -webkit-user-select: none; }
.keys div { display: flex; justify-content: center; gap: 5px; }
.keys button {
  flex: 1 1 0;
  max-width: 44px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.keys button.wide { flex-grow: 1.6; max-width: 70px; font-size: 0.75rem; text-transform: none; }
.keys button:active:not(:disabled) { translate: 0 2px; }
.keys button.hit { background: var(--hit-bg); color: var(--hit-fg); }
.keys button.near { background: var(--near-bg); color: var(--near-fg); }
.keys button.miss { background: var(--miss-bg); color: var(--miss-fg); opacity: 0.4; }
/* In the Fun theme the usual grey is too close to the purple tiles: misses go dark. */
[data-theme="fun"] :is(.tile.miss, .rule-tile.miss, .keys button.miss) { background: #1d1242; color: #9d92d4; }
.keys button:disabled { cursor: default; }
[data-theme="fun"] .keys button { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }

.guess .message { margin: 0; min-height: 1.5em; }

@keyframes press { 50% { scale: 1.08; } }
@keyframes flip { from { transform: rotateX(90deg); } }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }