.letter-keyboard { display: grid; gap: 6px; padding-block: 16px; border-block: 1px solid var(--line); }
.letter-keyboard[hidden] { display: none; }
.letter-keyboard-row { display: flex; justify-content: center; gap: 5px; }
.letter-key { flex: 1 1 0; max-width: 44px; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; padding: 4px 0; cursor: pointer; touch-action: manipulation; }
.letter-key:hover, .letter-key:active { background: #e6ece3; border-color: var(--accent); }
.letter-key:focus-visible { outline-offset: 1px; }
.letter-key--action { max-width: none; flex: 0 1 140px; font-size: .875rem; }
.letter-key--enter { background: var(--accent); border-color: var(--accent); color: white; }
.letter-key--enter:where(:not(:disabled):not([aria-disabled=true])):is(:hover, :active) { background: var(--accent-hover); color: white; }
@media (max-width: 640px) {
  .letter-keyboard-row { gap: 3px; }
  .letter-key { font-size: .875rem; }
}