body { font-family: system-ui, sans-serif; margin: 0; background: #111; color: #eee; }
.wrap { max-width: 520px; margin: 24px auto; padding: 16px; }
.title { margin: 0 0 8px; }
.status { margin: 0 0 16px; opacity: 0.9; }

.board { display: grid; gap: 8px; margin: 16px 0; }
.row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }

.tile {
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid #333;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  background: #000;
  user-select: none;
}

.tile.gray { background: #3a3a3c; border-color: #3a3a3c; }
.tile.yellow { background: #b59f3b; border-color: #b59f3b; }
.tile.green { background: #538d4e; border-color: #538d4e; }

.inputrow { display: flex; gap: 8px; }
input, button { padding: 10px 12px; font-size: 16px; }
#guess { flex: 1; text-transform: uppercase; }