/* Nonogram — the board is a grid whose first row and column are the clues.
   Sized so a 5x5 plus its clue gutter fits a 320px phone: gutter ~40px leaves
   ~52px per cell, comfortably over the 24px minimum tap target. */

#board {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 380px;
  margin: var(--space-3) auto var(--space-2);
}

.ng-corner { min-width: 38px; }

.ng-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-weight: 800;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* Column clues read top-to-bottom, which is how a nonogram is conventionally
   written and what lets several runs sit above a narrow column. */
.ng-clue-col { writing-mode: vertical-rl; text-orientation: upright; min-height: 46px; letter-spacing: 1px; }
.ng-clue-row { min-width: 38px; justify-content: flex-end; padding-right: 4px; letter-spacing: 2px; }

.ng-cell {
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text-faint);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.ng-cell.fill { background: var(--accent); border-color: var(--accent); }
.ng-cell.mark { color: var(--text-faint); background: var(--bg); }
.ng-cell:active { transform: scale(0.94); }

.ng-bar { display: flex; gap: var(--space-2); justify-content: center; max-width: 380px; margin: 0 auto; }
#end-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
#end-stats { font-weight: 700; margin: 0 0 6px; }