.sd-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(420px, 96vw);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--ink);
  border-radius: 10px; overflow: hidden;
  background: var(--ink);
  gap: 1px;
}
.sd-cell {
  background: var(--surface);
  display: grid; place-items: center;
  position: relative; cursor: pointer;
  font-size: clamp(16px, 5.2vw, 24px); font-weight: 800; color: var(--grape);
  user-select: none;
}
.sd-cell.given { color: var(--ink); background: var(--surface-2); cursor: default; font-weight: 900; }
.sd-cell.sel { background: #ece4ff; }
.sd-cell.peer { background: #f6f1ff; }
.sd-cell.conflict { color: #e23b5a; background: #ffe6ec; }
.sd-cell.right { color: #1ba679; }
/* 粗分割线 */
.sd-cell[data-c="2"], .sd-cell[data-c="5"] { box-shadow: 2px 0 0 var(--ink); }
.sd-cell[data-r="2"], .sd-cell[data-r="5"] { box-shadow: 0 2px 0 var(--ink); }
.sd-cell[data-r="2"][data-c="2"], .sd-cell[data-r="2"][data-c="5"],
.sd-cell[data-r="5"][data-c="2"], .sd-cell[data-r="5"][data-c="5"] { box-shadow: 2px 0 0 var(--ink), 0 2px 0 var(--ink); }

.sd-notes {
  position: absolute; inset: 2px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: clamp(7px, 2.1vw, 10px); color: var(--muted); font-weight: 700;
}
.sd-notes span { display: grid; place-items: center; }

.sd-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; width: min(420px, 96vw); margin: 0 auto; }
.sd-key {
  min-height: 44px; border: 2px solid var(--line); background: var(--surface);
  border-radius: 12px; font-size: 20px; font-weight: 800; color: var(--grape);
}
.sd-key:active { transform: scale(.94); }