/* Sudoku — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }
.game-shell { max-width:460px; }

.board-wrap { display:flex; justify-content:center; }
.sk-grid {
  display:grid; grid-template-columns:repeat(9, 1fr); width:100%; max-width:400px; aspect-ratio:1;
  background:var(--card); border:5px solid var(--stroke); border-radius:12px; overflow:hidden;
  box-shadow:0 6px 0 var(--stroke); touch-action:manipulation;
}
.sk-cell {
  display:flex; align-items:center; justify-content:center; position:relative;
  font-size:21px; font-weight:700; cursor:pointer; color:var(--blue);
  border:1px solid #e3d8c0; user-select:none;
}
.sk-cell.given { color:var(--stroke); }
.sk-cell.err { color:#FF3B30; }
.sk-cell.sel { background:var(--yellow); }
.sk-cell.peer { background:#fff3cf; }
.sk-cell.same { background:#cfeefc; }
/* thick 3x3 box borders */
.sk-cell:nth-child(9n+1){ border-left:3px solid var(--stroke); }
.sk-cell:nth-child(9n){ border-right:3px solid var(--stroke); }
.sk-cell:nth-child(-n+9){ border-top:3px solid var(--stroke); }
.sk-cell.r3 { border-bottom:3px solid var(--stroke); }
.sk-cell.c3 { border-right:3px solid var(--stroke); }
.sk-cell .notes {
  position:absolute; inset:2px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  font-size:9px; font-weight:600; color:var(--muted); pointer-events:none;
}
.sk-cell .notes span { display:flex; align-items:center; justify-content:center; }

.pad { display:grid; grid-template-columns:repeat(9, 1fr); gap:5px; margin-top:16px; max-width:400px; margin-left:auto; margin-right:auto; }
.pad button {
  font:inherit; font-size:20px; font-weight:700; color:var(--stroke); cursor:pointer; aspect-ratio:0.85;
  background:var(--card); border:3px solid var(--stroke); border-radius:10px; box-shadow:0 3px 0 var(--stroke);
}
.pad button:active { transform:translateY(3px); box-shadow:0 0 0 var(--stroke); }
.pad-tools { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.sbtn.small { width:auto; padding:10px 14px; font-size:14px; }
.sbtn.small.on { background:var(--green); }
@media (max-width:430px){ .sk-cell{ font-size:17px; } .pad button{ font-size:17px; } }