.sudoku-shell{
  width:min(720px,100%);
  margin:auto;
  display:grid;
  justify-items:center;
  gap:16px;
}

.sudoku-hud{
  width:min(640px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.sudoku-stat{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid #26374d;
  border-radius:12px;
  background:#0b1420;
  text-align:center;
}
.sudoku-stat-label{color:#64748b;font-size:.6rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.sudoku-stat-value{color:#dce8f5;font-size:.76rem;font-weight:850;white-space:nowrap}
.sudoku-stat--mode.is-active{border-color:#2563eb;background:#102649}
.sudoku-stat--mode.is-active .sudoku-stat-value{color:#93c5fd}

.sudoku-board{
  width:min(640px,100%);
  max-width:640px;
  gap:0;
  border:4px solid #71839d;
  border-radius:13px;
  overflow:hidden;
  background:#71839d;
  box-shadow:0 24px 58px #0008,0 0 0 1px #ffffff0b;
}

.sudoku-cell{
  position:relative;
  min-width:0;
  border-radius:0;
  border-width:1px;
  border-style:solid;
  border-color:#2c3d52;
  background:#101a28;
  color:#dce8f5;
  font-size:clamp(1.18rem,3.45vw,1.88rem);
  font-weight:780;
  line-height:1;
  transition:background .1s ease,color .1s ease,box-shadow .1s ease,border-color .1s ease;
}
.sudoku-cell.box-tone-b{background:#0c1623}
.sudoku-cell.box-edge-right{border-right-width:4px;border-right-color:#71839d}
.sudoku-cell.box-edge-bottom{border-bottom-width:4px;border-bottom-color:#71839d}
.sudoku-cell:hover{z-index:2;background:#17283b;border-color:#4e6681}
.sudoku-cell:focus-visible{z-index:7;outline:3px solid #dff6ff;outline-offset:-3px}

.sudoku-cell.revealed{
  background:#192536;
  color:#f8fafc;
  font-weight:930;
}
.sudoku-cell.revealed.box-tone-b{background:#15202f}

.sudoku-cell.user-value{
  color:#5da9ff;
  font-weight:930;
  text-shadow:0 0 20px #2563eb42;
}

.sudoku-cell.peer{background:#10283a}
.sudoku-cell.box-tone-b.peer{background:#0d2435}
.sudoku-cell.revealed.peer{background:#21354b}
.sudoku-cell.user-value.peer{background:#112d45}

.sudoku-cell.same-value{
  z-index:2;
  background:#16405d;
  color:#7dd3fc;
  box-shadow:inset 0 0 0 2px #38bdf855;
}
.sudoku-cell.revealed.same-value{color:#e0f2fe;background:#244a66}

.sudoku-cell.selected{
  z-index:6;
  background:linear-gradient(145deg,#155e75,#1d4ed8);
  color:#fff;
  outline:3px solid #bfdbfe;
  outline-offset:-3px;
  box-shadow:inset 0 0 0 1px #ffffff66,0 0 22px #2563eb55;
}
.sudoku-cell.selected.user-value{color:#fff}

.sudoku-cell.conflict{
  z-index:7;
  color:#fff1f2;
  background:linear-gradient(145deg,#7f1d1d,#4c1d2b);
  border-color:#fb7185;
  box-shadow:inset 0 0 0 2px #fb718599;
}
.sudoku-cell.selected.conflict{outline-color:#fecdd3}

.sudoku-cell.has-notes{padding:0}
.sudoku-notes{
  position:absolute;
  inset:3px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  pointer-events:none;
}
.sudoku-note{
  display:grid;
  place-items:center;
  color:#7db5ef;
  font:820 clamp(.42rem,1.25vw,.69rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.sudoku-cell.peer .sudoku-note{color:#6ca4db}
.sudoku-cell.selected .sudoku-note{color:#e0f2fe}

.sudoku-input-dock{
  width:min(640px,100%);
  display:grid;
  gap:10px;
  padding:13px;
  border:1px solid #293b52;
  border-radius:18px;
  background:linear-gradient(155deg,#101b2a,#09111c);
  box-shadow:0 16px 40px #0005,inset 0 1px #ffffff0b;
}

.sudoku-input-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px;
}
.sudoku-input-heading strong{color:#e4edf8;font-size:.79rem}
.sudoku-input-heading span{color:#617087;font-size:.62rem}

.sudoku-numberpad{
  width:100%;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:7px;
}
.sudoku-number{
  min-width:0;
  min-height:58px;
  display:grid;
  place-items:center;
  padding:4px 2px;
  border:1px solid #334964;
  border-radius:12px;
  background:#15253a;
  color:#eef6ff;
  font:900 1.38rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.sudoku-number:hover:not(:disabled){transform:translateY(-1px);background:#1c3550;border-color:#4c7998}
.sudoku-number:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.sudoku-number.complete{opacity:.38;background:#0d1723;color:#66778d}

.sudoku-input-dock .game-board-tools{margin-top:1px}
.sudoku-input-dock .game-board-tool{background:#101c2b}
.sudoku-input-dock .game-board-tool-icon{font-size:1.22rem}
.sudoku-input-dock .game-board-tool--toggle.is-active{border-color:#3b82f6;background:#102d52}

.sudoku-session-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding-top:2px;
}
.sudoku-session-actions .game-action{width:100%;min-height:42px}
.sudoku-session-actions .game-action--primary{background:linear-gradient(135deg,#1d4ed8,#0e7490);border-color:#3b82f6}

@media(max-width:650px){
  .sudoku-shell{gap:11px}
  .sudoku-hud{gap:5px}
  .sudoku-stat{padding:6px 5px;border-radius:9px;gap:4px;flex-direction:column;align-items:center}
  .sudoku-stat-label{font-size:.5rem}
  .sudoku-stat-value{font-size:.68rem}
  .sudoku-board{border-width:3px;border-radius:9px}
  .sudoku-cell{font-size:clamp(1.08rem,5.6vw,1.48rem)}
  .sudoku-cell.box-edge-right{border-right-width:3px}
  .sudoku-cell.box-edge-bottom{border-bottom-width:3px}
  .sudoku-notes{inset:1px}
  .sudoku-note{font-size:clamp(.36rem,2.1vw,.58rem)}
  .sudoku-input-dock{padding:9px;border-radius:14px;gap:8px}
  .sudoku-input-heading span{display:none}
  .sudoku-numberpad{gap:4px}
  .sudoku-number{min-height:47px;border-radius:9px;font-size:1.16rem}
  .sudoku-session-actions{gap:6px}
  .sudoku-session-actions .game-action{min-height:40px;padding:0 7px;font-size:.7rem}
}

@media(max-width:410px){
  .sudoku-input-dock{padding:7px}
  .sudoku-numberpad{gap:3px}
  .sudoku-number{min-height:42px;border-radius:7px;font-size:1.08rem}
  .sudoku-session-actions{grid-template-columns:1fr 1fr}
  .sudoku-session-actions .game-action--primary{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){
  .sudoku-cell,.sudoku-number{transition:none}
}