.keyboard {
  display: grid;
  gap: 6px;
  margin: 22px auto 0;
  max-width: 570px;
}

.key-row { display: flex; justify-content: center; gap: 5px; }

.key {
  min-width: 0;
  flex: 1;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #e7eef5;
  color: #24364a;
  font: 700 12px 'DM Mono', monospace;
  letter-spacing: 0;
  cursor: pointer;
}

.key:hover { filter: brightness(.96); }
.key.correct { background: var(--good); color: #fff; }
.key.present { background: var(--warn); color: #fff; }
.key.absent { background: var(--bad); color: #fff; }
.key.action { flex: 1.45; font-size: 18px; }

@media (max-width: 650px) {
  .keyboard { gap: 4px; }
  .key-row { gap: 3px; }
  .key { height: 38px; font-size: 10px; }
  .key.action { font-size: 15px; }
}