.sudoku-board--killer {
  border-color: color-mix(in srgb, var(--board-cage-border) 70%, transparent);
}

.sudoku-board--killer .cell {
  background: var(--board-cell-bg);
}

.cell--cage-top {
  border-top: 2px dashed var(--board-cage-border) !important;
}

.cell--cage-left {
  border-left: 2px dashed var(--board-cage-border) !important;
}

.cell--cage-bottom {
  border-bottom: 2px dashed var(--board-cage-border) !important;
}

.cell--cage-right {
  border-right: 2px dashed var(--board-cage-border) !important;
}

.cell__cage-sum {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--board-cage-sum, var(--orange));
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.cell--cage-error {
  background: var(--board-error-bg, rgba(255, 77, 157, 0.14)) !important;
}

.cell--cage-error .cell__cage-sum {
  color: var(--board-error-text, var(--pink));
}

.panel__rules {
  margin-bottom: 16px;
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.rules-list li + li {
  margin-top: 6px;
}

@media (max-width: 420px) {
  .cell__cage-sum {
    font-size: 0.48rem;
  }
}
