/* Killer Sudoku — page-specific styles layered on top of app.css.
   Standard 9x9 board (no custom lattice needed, same .board/.cell classes as diagonal-sudoku),
   so this file only adds the two things unique to Killer: dashed cage-boundary lines and the
   small cage-sum label in each cage's top-left-most cell. */

/* Dashed cage boundary, inset from the cell edge so it never touches the classic grid/box
   lines. Applied unconditionally to every cell (transparent by default via `border-color:
   transparent`) — only the cage-t/r/b/l modifier classes (computed per cell in JS from the
   generated cage layout, see computeCageRenderInfo in killer-sudoku-app.js) give a side an
   actual color, so most cells render an invisible box and cost nothing visually. */
.board.killer .cell::before {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1.5px dashed transparent;
  border-radius: 1px;
  z-index: 1;
}
.board.killer .cell.cage-t::before { border-top-color: color-mix(in srgb, var(--ink-3) 62%, transparent); }
.board.killer .cell.cage-r::before { border-right-color: color-mix(in srgb, var(--ink-3) 62%, transparent); }
.board.killer .cell.cage-b::before { border-bottom-color: color-mix(in srgb, var(--ink-3) 62%, transparent); }
.board.killer .cell.cage-l::before { border-left-color: color-mix(in srgb, var(--ink-3) 62%, transparent); }

/* Cage sum label — absolutely positioned, so it never competes with the centered digit or the
   pencil-note grid for grid-layout placement (see the design note in killer-sudoku-app.js's
   renderCell). */
.board.killer .cell .cage-sum {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* The note grid already pads 2px on every side; a cage-sum label in the same corner would
   collide with note "1" in the top-left slot, so nudge the whole note grid down slightly on
   cells that carry a sum label. */
.board.killer .cell.has-sum .notes {
  padding-top: 10px;
}

@media (max-width: 480px) {
  .board.killer .cell .cage-sum { font-size: 8.5px; top: 1px; left: 3px; }
  .board.killer .cell.has-sum .notes { padding-top: 9px; }
}