/* ============================================================
   On-screen Keyboard
   ============================================================ */

.keyboard {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 8px 8px;
  user-select: none;
  flex-shrink: 0;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* ── Base key ─────────────────────────────────── */
.key {
  height: var(--key-height, 58px);
  flex: 1;
  max-width: 43px;
  min-width: 32px;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: var(--color-key-bg);
  color: var(--color-key-text);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, filter 0.05s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.key:active {
  filter: brightness(0.8);
}

/* Wide keys (Enter / Backspace) */
.key.wide {
  flex: 1.5;
  max-width: 65px;
  font-size: 0.7rem;
}

/* Accent key row */
.keyboard-row.accent-row {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-hr);
}

.key.accent {
  height: 44px;
  max-width: 52px;
  background: color-mix(in srgb, var(--color-key-bg) 70%, var(--color-bg));
  border: 1px solid var(--color-tile-border-empty);
  font-size: 0.9rem;
}

/* ── Key evaluation states ────────────────────── */
.key[data-state="correct"] {
  background: var(--color-correct);
  color: #fff;
}
.key[data-state="present"] {
  background: var(--color-present);
  color: #fff;
}
.key[data-state="absent"] {
  background: var(--color-absent);
  color: #fff;
}

/* Backspace icon inside key */
.key .backspace-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}