/* DIGIGMA design system — first-class grids.
   Isolated. Do not import from live sudoku / killer / binary pages. */

.ds-play {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .ds-play { grid-template-columns: minmax(0, 360px) 200px; }
}

.ds-board-wrap {
  min-width: 0;
  width: min(100%, 360px);
}

.ds-board {
  --n: 9;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  background: var(--board-cell);
  border: 2px solid var(--board-frame);
  border-radius: var(--radius-board);
  overflow: hidden;
}

.ds-board[data-size="6"] { --n: 6; }

.ds-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--board-cell);
  color: var(--board-given);
  font-family: var(--font-digits);
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  font-weight: var(--weight-entry);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset -1px 0 0 var(--board-line),
    inset 0 -1px 0 var(--board-line);
}

.ds-cell:nth-child(9n),
.ds-board[data-size="6"] .ds-cell:nth-child(6n) {
  box-shadow: inset 0 -1px 0 var(--board-line);
}

.ds-cell:nth-child(n + 73),
.ds-board[data-size="6"] .ds-cell:nth-child(n + 31) {
  box-shadow: inset -1px 0 0 var(--board-line);
}

.ds-cell:nth-child(9n):nth-child(n + 73),
.ds-board[data-size="6"] .ds-cell:nth-child(6n):nth-child(n + 31) {
  box-shadow: none;
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)) {
  box-shadow:
    inset -2px 0 0 var(--board-line-strong),
    inset 0 -1px 0 var(--board-line);
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(n + 19):nth-child(-n + 27),
.ds-board:not([data-size="6"]) .ds-cell:nth-child(n + 46):nth-child(-n + 54) {
  box-shadow:
    inset -1px 0 0 var(--board-line),
    inset 0 -2px 0 var(--board-line-strong);
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 19):nth-child(-n + 27),
.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 46):nth-child(-n + 54) {
  box-shadow:
    inset -2px 0 0 var(--board-line-strong),
    inset 0 -2px 0 var(--board-line-strong);
}

.ds-cell.is-given {
  color: var(--board-given);
  font-weight: var(--weight-given);
}

.ds-cell.is-entry {
  color: var(--board-entry);
  font-weight: var(--weight-entry);
}

.ds-cell.is-hi { background: var(--board-cell-hi); }
.ds-cell.is-same { background: var(--board-cell-same); }
.ds-cell.is-ok { background: var(--board-cell-ok); color: var(--board-digit-ok); }
.ds-cell.is-bad {
  background: var(--board-cell-bad);
  color: var(--board-digit-bad);
  font-weight: var(--weight-given);
}

.ds-cell.is-sel {
  background: var(--board-cell-sel);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 2px #C88708,
    inset -1px 0 0 var(--board-line),
    inset 0 -1px 0 var(--board-line);
  z-index: 2;
}

.ds-cell:hover:not(.is-sel) { background: var(--board-cell-hover); }

.ds-cell:focus-visible {
  outline: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 2px #C88708,
    0 0 0 2px var(--paper);
}

.ds-notes {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: 0.52em;
  font-weight: 500;
  color: var(--board-note);
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
}

.ds-notes span { display: grid; place-items: center; min-width: 0; min-height: 0; }

@media (max-width: 760px) {
  .ds-notes { font-size: 0.64em; }
}

.ds-cell[data-cage="a"] { background: var(--board-cage-a); }
.ds-cell[data-cage="b"] { background: var(--board-cage-b); }
.ds-cell[data-cage="c"] { background: var(--board-cage-c); }
.ds-cell[data-cage].is-hi { filter: saturate(1.05); }
.ds-cell[data-cage].is-sel { background: var(--board-cell-sel); }

.ds-cage-sum {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: clamp(0.48rem, 1.6vw, 0.62rem);
  font-weight: 600;
  color: var(--board-cage-sum);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.ds-cage-wall {
  position: absolute;
  background: transparent;
  border-color: var(--board-cage);
  border-style: dotted;
  pointer-events: none;
  z-index: 1;
}

.ds-cage-wall.n { top: 2px; left: 2px; right: 2px; height: 0; border-top-width: 1.5px; border-top-style: dotted; }
.ds-cage-wall.s { bottom: 2px; left: 2px; right: 2px; height: 0; border-bottom-width: 1.5px; border-bottom-style: dotted; }
.ds-cage-wall.w { top: 2px; bottom: 2px; left: 2px; width: 0; border-left-width: 1.5px; border-left-style: dotted; }
.ds-cage-wall.e { top: 2px; bottom: 2px; right: 2px; width: 0; border-right-width: 1.5px; border-right-style: dotted; }

.ds-cell.is-bin-0 { color: var(--board-bin-0); font-weight: var(--weight-given); }
.ds-cell.is-bin-1 { color: var(--board-bin-1); font-weight: var(--weight-entry); }
.ds-cell.is-warn {
  background: var(--board-bin-warn);
  box-shadow: inset 0 0 0 1.5px var(--board-bin-warn-line);
  color: var(--board-digit-bad);
}

.ds-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-digits);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--board-clock);
}

.ds-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ds-keypad button {
  min-height: 44px;
  background: var(--board-key);
  border: 1px solid var(--board-key-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-digits);
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.ds-keypad button:hover { border-color: var(--indigo); }
.ds-keypad button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ds-play-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ds-legend {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}