.board-calcudoku {
  display: grid;
  gap: 0;
  width: min(92vw, 28rem);
  aspect-ratio: 1;
  border: 2px solid var(--board-line-strong, #3b2a1a);
}
.board-calcudoku .cell {
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 650;
  background: var(--board-cell, #fffaf0);
  background-image:
    var(--calc-wall-n, linear-gradient(transparent, transparent)),
    var(--calc-wall-e, linear-gradient(transparent, transparent)),
    var(--calc-wall-s, linear-gradient(transparent, transparent)),
    var(--calc-wall-w, linear-gradient(transparent, transparent));
  background-position: top, right, bottom, left;
  background-size:
    100% var(--calc-wall-size, 2px),
    var(--calc-wall-size, 2px) 100%,
    100% var(--calc-wall-size, 2px),
    var(--calc-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-calcudoku .cell.wall-n { --calc-wall-n: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-calcudoku .cell.wall-e { --calc-wall-e: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-calcudoku .cell.wall-s { --calc-wall-s: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-calcudoku .cell.wall-w { --calc-wall-w: linear-gradient(var(--board-line-strong), var(--board-line-strong)); }
.board-calcudoku .cell.tint-1 { background-color: color-mix(in srgb, #2457C5 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cell.tint-2 { background-color: color-mix(in srgb, #1E8C4E 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cell.tint-3 { background-color: color-mix(in srgb, #7A3E9D 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cell.tint-4 { background-color: color-mix(in srgb, #D4A017 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cell.tint-5 { background-color: color-mix(in srgb, #8C5A3C 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cell.tint-6 { background-color: color-mix(in srgb, #C44B86 26%, var(--board-cell, #fffaf0)); }
.board-calcudoku .cage-label {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  pointer-events: none;
  z-index: 1;
}
.board-calcudoku .cell.has-cage-label .digit {
  align-self: center;
  justify-self: center;
  padding: 0;
}
#board.board-calcudoku .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;
}

/* Every candidate keeps its slot, including cells without a cage clue.
   Match the existing clue's line height plus its maximum top offset and 4px gap.
   Cage walls are background strokes and selection is an inset shadow. */
html.is-play body #board.board.board-calcudoku .cell > .notes.candidate-notes {
  --note-columns: var(--note-domain-columns);
  --note-rows: var(--note-domain-rows);
  top: calc(7px + 1.05 * clamp(0.62rem, calc(min(92vw, 28rem) / var(--n, 6) * 0.22), 1.05rem));
  grid-template-areas: none;
}
html.is-play body #board.board.board-calcudoku .cell > .notes.candidate-notes > span:nth-child(n) {
  grid-area: auto;
}