.board-kuromasu {
  display: grid;
  gap: 0;
  width: min(92vw, 28rem);
  aspect-ratio: 1;
  background: var(--board-cell, #fffaf0);
  border: 3px solid var(--board-line-strong, #3b2a1a);
}
.board-kuromasu .cell {
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--board-cell, #fffaf0);
  border: 1px solid var(--board-line);
  color: var(--board-given, #241a14);
}
.board-kuromasu .cell.is-black {
  background: #241a14;
  color: #fff6e4;
}
.board-kuromasu .cell.is-white {
  background: var(--board-cell, #fffaf0);
  box-shadow: inset 0 0 0 3px #241a14;
  border-radius: 50%;
}
.board-kuromasu .cell.is-given.is-white {
  box-shadow: inset 0 0 0 3px #241a14;
  border-radius: 0.35rem;
}
#board.board-kuromasu .cell.is-selected {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  z-index: 2;
}
#board.board-kuromasu .cell.is-white.is-selected {
  box-shadow: inset 0 0 0 3px #241a14, 0 0 0 2.5px var(--play-ring-active, #19D65A);
}

/* Black shading must stay visible while hovered, also on the daily grid. */
@media (hover: hover) and (pointer: fine) {
  html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell.is-black:hover {
    background: #241a14;
    color: #fff6e4;
  }
}

/* Clue cells are <button>s. chrome.css sets button { padding: 9px 14px }, so the
   content box is much smaller than the border box, and futoshiki .cell
   { overflow: hidden } clips whatever spills. The board is the container
   (a button's own cqw collapses in Chrome). The previous wide rule reused
   --numeric-cell-ratio (0.7) against that board cqw, the same size as one
   digit, so 11/16/17 overflowed the padded content box.
   The numeral span is the size container. Its fit child reads that cell.
   One digit stays about 70% of the cell. Two digits are only as large as
   the inner width allows, with 3px clear of the border on every side.
   text-box-trim drops the em-box leading so the cap-to-baseline box, which
   is the digit ink, is what gets centered. */
html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell {
  padding: 0;
  min-width: 0;
  min-height: 0;
}
html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell > .cell-numeral {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  container-type: size;
}
html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell > .cell-numeral > .cell-numeral-fit {
  display: block;
  width: max-content;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-size: min(
    calc(var(--numeric-cell-ratio, 0.7) * (100cqi + 2px)),
    calc((100cqi - 6px) / 0.66),
    calc((100cqb - 6px) / 0.78),
    var(--numeric-cell-max, 4.8rem)
  );
}
html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell > .cell-numeral.cell-numeral-wide > .cell-numeral-fit {
  font-size: min(
    calc((100cqi - 6px) / 1.3),
    calc((100cqb - 6px) / 0.78),
    var(--numeric-cell-max, 4.8rem)
  );
}
@supports not (text-box-trim: trim-both) {
  html.is-play body.ds-kuromasu #board.board-kuromasu > button.cell > .cell-numeral > .cell-numeral-fit {
    transform: translateY(-0.04em);
  }
}