.wl-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 8px; width: min(280px, 92%); margin: 0 auto; }
.wl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wl-tile {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink);
  transition: transform .12s ease, background .25s ease;
}
.wl-tile.g { background: var(--mint); color: #fff; border-color: var(--mint); }
.wl-tile.y { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.wl-tile.x { background: #d9d2e6; color: #fff; border-color: #d9d2e6; }
.wl-tile.pop { animation: wlpop .18s ease; }
@keyframes wlpop { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
.wl-input {
  min-height: var(--tap); flex: 1; max-width: 200px;
  border: 2px solid var(--line); border-radius: 14px; padding: 0 14px;
  font-size: 18px; font-family: inherit; text-align: center; color: var(--ink);
}