body.ds-numberlink .board-wrap {
  overflow: visible;
  max-width: 100%;
}
.board-numberlink {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  --nl-gutter: 24px;
  grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, var(--n, 8)), minmax(0, 1fr));
  aspect-ratio: var(--n, 8) / var(--rows, var(--n, 8));
  background: var(--board-cell, #fffaf0);
  border: 3px solid var(--board-line-strong, #3b2a1a);
  touch-action: none;
}
.board-numberlink.nl-many-cols {
  --nl-gutter: 20px;
}
.board-numberlink.nl-max-cols {
  --nl-gutter: 10px;
}
.board-numberlink .cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  font-weight: 700;
  background: var(--board-cell, #fffaf0);
  border: 1px solid var(--board-line);
  color: var(--board-given, #241a14);
}
.board-numberlink .cell .cell-numeral {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px var(--board-cell, #fffaf0), 0 1px 0 var(--board-cell, #fffaf0);
}
.board-numberlink .cell .cell-numeral-wide {
  font-size: 0.82em;
  letter-spacing: -0.04em;
}
/* Same pair ink as colorOfLabel(), including the public SSR path-* cells. */
.board-numberlink > .cell.path-1 { color: #c45c26; }
.board-numberlink > .cell.path-2 { color: #2f6f4e; }
.board-numberlink > .cell.path-3 { color: #2a5ea8; }
.board-numberlink > .cell.path-4 { color: #8a3d8f; }
.board-numberlink > .cell.path-5 { color: #b08900; }
.board-numberlink > .cell.path-6 { color: #b33b3b; }
.board-numberlink > .cell.path-7 { color: #1f7a8c; }
.board-numberlink > .cell.path-8 { color: #6b4f2a; }
.board-numberlink > .cell.path-9 { color: #4a4e69; }
.board-numberlink > .cell.path-10 { color: #c45c9a; }
.board-numberlink > .cell.path-11 { color: #3d7ea6; }
.board-numberlink > .cell.path-12 { color: #c88708; }
.board-numberlink > .cell.path-13 { color: #2e8b7a; }
.board-numberlink > .cell.path-14 { color: #d45e3d; }
.board-numberlink > .cell.path-15 { color: #6b5b95; }
.board-numberlink > .cell.path-16 { color: #8a5a2b; }
.board-numberlink > .cell.path-17 { color: #4a7c59; }
.board-numberlink .cell.is-given { font-weight: 800; }
.board-numberlink .cell.is-selected {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  z-index: 2;
}
.board-numberlink .cell::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
  pointer-events: none;
}
.board-numberlink .cell.is-empty::before { display: none; }
.board-numberlink .cell.is-n::after,
.board-numberlink .cell.is-e::after,
.board-numberlink .cell.is-s::after,
.board-numberlink .cell.is-w::after { content: none; }
.board-numberlink .cell .link {
  position: absolute;
  background: currentColor;
  pointer-events: none;
  opacity: 0.72;
}
.board-numberlink .cell .link-n { left: 42%; right: 42%; top: 0; height: 50%; }
.board-numberlink .cell .link-s { left: 42%; right: 42%; bottom: 0; height: 50%; }
.board-numberlink .cell .link-w { top: 42%; bottom: 42%; left: 0; width: 50%; }
.board-numberlink .cell .link-e { top: 42%; bottom: 42%; right: 0; width: 50%; }
