:root {
  --bg:#121417;
  --panel:#1d232b;
  --panel-alt:#262f39;
  --accent:#4da3ff;
  --accent-soft:#305d88;
  --error:#ff4d61;
  --warning:#ffb347;
  --good:#28d77e;
  --text:#f5f7fa;
  --muted:#9aa5b1;
  --grid-border:#405060;
  --clue:#f0f4f8;
  --note:#5e92c8;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
}

html,body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  min-height:100%;
}

header {
  padding:1rem clamp(1rem,3vw,2rem);
  background:linear-gradient(135deg,#1d2732,#151a20 60%);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  border-bottom:1px solid #1f2b35;
}

h1 {
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin:0;
  letter-spacing:1px;
  background:linear-gradient(90deg,#68b7ff,#fff);
  -webkit-background-clip:text;
  color:transparent;
}

.controls {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
}

.controls select,
.controls button,
.notes-toggle input {
  font:inherit;
}

button, select {
  background:var(--panel-alt);
  color:var(--text);
  border:1px solid #2d3844;
  padding:0.45rem 0.75rem;
  border-radius:6px;
  cursor:pointer;
  transition:.15s background,.15s transform,.15s border-color;
}

button:hover:not(:disabled),
select:hover {
  background:var(--accent-soft);
}

button:active:not(:disabled) {
  transform:translateY(2px);
}

button:disabled {
  opacity:.5;
  cursor:not-allowed;
}

.notes-toggle {
  display:flex;
  gap:0.35rem;
  align-items:center;
  font-size:.85rem;
  background:var(--panel-alt);
  padding:0.3rem 0.6rem;
  border:1px solid #2d3844;
  border-radius:6px;
}

.notes-toggle input {
  accent-color:var(--accent);
  cursor:pointer;
}

.timer {
  margin-left:auto;
  font-weight:600;
  letter-spacing:1px;
  background:#203040;
  padding:0.4rem 0.75rem;
  border-radius:6px;
  border:1px solid #2f4255;
  min-width:4.5ch;
  text-align:center;
}

main {
  padding:1.25rem clamp(0.75rem,3vw,2rem);
  display:grid;
  gap:1.25rem;
  justify-items:center;
}

.board {
  display:grid;
  grid-template-columns:repeat(6, clamp(2.4rem,7vw,3.4rem));
  grid-template-rows:repeat(6, clamp(2.4rem,7vw,3.4rem));
  gap:2px;
  background:var(--grid-border);
  padding:6px;
  border-radius:10px;
  position:relative;
  box-shadow:0 4px 16px -6px #000;
  user-select:none;
}

.cell {
  position:relative;
  background:var(--panel);
  border:1px solid #2c3a46;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1.05rem,2.2vw,1.5rem);
  font-weight:500;
  cursor:pointer;
  outline:none;
  transition:.12s background,.12s border-color,.12s color;
}

.cell:hover {
  background:#25313c;
}

.cell.clue {
  font-weight:600;
  background:#273745;
  color:var(--clue);
  cursor:default;
}

.cell.selected {
  background:#2d4252;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}

.cell.conflict {
  background:#3a1f27;
  color:var(--error);
  border-color:#662b37;
}

.cell.same-value:not(.conflict) {
  background:#203543;
  color:#9fe1ff;
}

.cell.peer:not(.selected):not(.same-value):not(.conflict) {
  background:#222e37;
}

.cell .notes {
  position:absolute;
  top:2px;
  left:2px;
  right:2px;
  bottom:2px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  font-size:clamp(.45rem,1vw,.65rem);
  line-height:1.1;
  gap:1px;
  color:var(--note);
  font-weight:400;
  pointer-events:none;
}

.cell.note-mode-value {
  opacity:.85;
  font-size:1rem;
}

.board::before,
.board::after,
.board .sub-divider {
  content:"";
  position:absolute;
  background:var(--accent-soft);
  opacity:.55;
  pointer-events:none;
}

.board .sub-divider {
  width:calc(100% - 12px);
  height:2px;
  left:6px;
  background:var(--accent-soft);
}

.board .sub-divider.col {
  height:calc(100% - 12px);
  width:2px;
  top:6px;
}

.subRowLine {
  position:absolute;
  left:6px;
  right:6px;
  height:2px;
  background:var(--accent);
  opacity:.9;
}

.subColLine {
  position:absolute;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--accent);
  opacity:.9;
}

.number-pad {
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  justify-content:center;
  max-width:400px;
}

.number-pad button {
  flex:1 0 calc(14% - 0.4rem);
  min-width:3rem;
  font-size:1.05rem;
  font-weight:600;
  padding:0.7rem 0;
}

.number-pad button.erase {
  flex-basis:100%;
  background:#3a2a2a;
  border-color:#4a3434;
}

.number-pad button.erase:hover {
  background:#533636;
}

footer {
  padding:1.5rem clamp(1rem,4vw,3rem);
  font-size:.85rem;
  color:var(--muted);
  text-align:center;
  line-height:1.4;
  border-top:1px solid #1f2b35;
}

@media (max-width:520px) {
  .number-pad button {
    min-width:2.4rem;
    padding:0.55rem 0;
  }
}

.cell:focus-visible {
  outline:2px solid var(--good);
  outline-offset:0;
}