.kk-wrap { display: flex; justify-content: center; overflow: auto; }
.kk-board {
  display: grid; gap: 3px; background: var(--ink); padding: 4px; border-radius: 10px; width: max-content;
}
.kk-cell {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; border-radius: 6px; font-weight: 900;
}
.kk-clue { background: #4a4470; color: #fff; font-size: 13px; line-height: 1.1; text-align: center; padding: 2px; }
.kk-corner { background: #2b2440; }
.kk-input {
  background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; border: 2px solid transparent;
}
.kk-input.sel { border-color: var(--grape); background: #f3ecff; }
.kk-input.bad { color: var(--coral); }
@media (max-width: 380px) {
  .kk-cell { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 18px; }
}
.kk-pad { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 420px; margin-left: auto; margin-right: auto; }
.kk-key {
  width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface);
  font-size: 20px; font-weight: 900; color: var(--ink); cursor: pointer;
}
.kk-key:active { transform: scale(.94); }