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