.sudoku-stage{padding:10px;background:#0e141b}
.sudoku{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  width:100%;
  max-width:520px;
  margin:0 auto;
  border:1px solid #33455a;
  border-radius:10px;
  overflow:hidden;
  background:#0b1118;
}
.cell{
  position:relative;
  aspect-ratio:1/1;
  border:0;
  border-right:1px solid #1b2733;
  border-bottom:1px solid #1b2733;
  background:#101a24;
  color:#93c5fd;
  font-family:inherit;
  font-size:var(--fs, 22px);
  font-weight:500;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .1s ease;
  user-select:none;-webkit-user-select:none;
}
.cell .v{position:relative;z-index:1;line-height:1}
.cell .notes{
  position:absolute;inset:7%;
  display:none;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  color:#7893ad;
  font-size:calc(var(--fs, 22px) * .3);
  font-weight:400;
  line-height:1;
  pointer-events:none;
  z-index:1;
}
.cell.has-notes .notes{display:grid}
.cell .notes span{display:flex;align-items:center;justify-content:center}
.cell.conflict .notes{color:#b06f7c}
.cell.sel .notes{color:#a9c7e8}
.cell:nth-child(9n){border-right:0}
.cell:nth-child(n+73){border-bottom:0}
.cell.br{border-right:2px solid #33455a}
.cell.bb{border-bottom:2px solid #33455a}

.cell.given{color:#e6edf3;font-weight:600;background:#121d28}
.cell.peer{background:#16222e}
.cell.same{background:#1b2c3f}
.cell.sel{background:#1e3348;box-shadow:inset 0 0 0 2px var(--accent);z-index:2}
.cell.conflict{color:#ff7b8a;background:#2a1620}
.cell.conflict.sel{box-shadow:inset 0 0 0 2px #ff7b8a}
.cell.hinted{animation:hint-pop .4s ease}
@keyframes hint-pop{0%{background:#2c4a6a}100%{background:inherit}}

.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.numpad button{
  appearance:none;cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:9px;
  padding:11px 0;
  font-size:16px;
  transition:background .12s ease,border-color .12s ease;
}
.numpad button:hover{border-color:#4a6b8f}
.numpad button:active{background:#1b2a3d}
#notes.is-on{
  border-color:#4a6b8f;
  border-color:color-mix(in srgb, var(--accent) 50%, var(--line));
  color:var(--accent);
  background:#142235;
}

@media (max-width:600px){
  .sudoku-stage{padding:8px}
  .numpad{gap:4px}
  .numpad button{padding:10px 0;font-size:15px}
}