.board-suguru {
  display: grid;
  gap: 0;
  width: min(92vw, 28rem);
  aspect-ratio: 1;
  border: 2px solid var(--board-line-strong, #3b2a1a);
}
.board-suguru .cell {
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 650;
  background: var(--board-cell, #fffaf0);
  background-image:
    var(--suguru-wall-n, linear-gradient(transparent, transparent)),
    var(--suguru-wall-e, linear-gradient(transparent, transparent)),
    var(--suguru-wall-s, linear-gradient(transparent, transparent)),
    var(--suguru-wall-w, linear-gradient(transparent, transparent));
  background-position: top, right, bottom, left;
  background-size:
    100% var(--suguru-wall-size, 2px),
    var(--suguru-wall-size, 2px) 100%,
    100% var(--suguru-wall-size, 2px),
    var(--suguru-wall-size, 2px) 100%;
  background-repeat: no-repeat;
  border: 0;
  border-top: 1px solid var(--board-line);
  border-left: 1px solid var(--board-line);
}
.board-suguru .cell.is-given { font-weight: 800; color: var(--board-given, #241a14); }
.board-suguru .cell.is-selected { background-color: var(--board-cell-sel, #f3e0b8); }
.board-suguru .cell.tint-1 { background-color: color-mix(in srgb, #D45E3D 10%, var(--board-cell, #fffaf0)); }
.board-suguru .cell.tint-2 { background-color: color-mix(in srgb, #C88708 10%, var(--board-cell, #fffaf0)); }
.board-suguru .cell.tint-3 { background-color: color-mix(in srgb, #2E8B7A 10%, var(--board-cell, #fffaf0)); }
.board-suguru .cell.tint-4 { background-color: color-mix(in srgb, #3547B3 10%, var(--board-cell, #fffaf0)); }
.board-suguru .cell.tint-5 { background-color: color-mix(in srgb, #6B5B95 10%, var(--board-cell, #fffaf0)); }
.board-suguru .cell.tint-6 { background-color: color-mix(in srgb, #E07A5F 10%, var(--board-cell, #fffaf0)); }

/* Four inset wall layers overlap at convex/concave corners and T-junctions.
   They do not consume grid-track space or change the button hitboxes. */
.board-suguru .cell.wall-n { --suguru-wall-n: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-suguru .cell.wall-e { --suguru-wall-e: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-suguru .cell.wall-s { --suguru-wall-s: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-suguru .cell.wall-w { --suguru-wall-w: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
/* Same active-cell treatment as Sudoku. */
#board.board-suguru .cell.is-selected {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  border-radius: 0;
  z-index: 2;
}