/* Nonogram. Shared game styles live in /play/play.css. */
.meta { margin: 0 0 12px; color: var(--muted); font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.timer { color: var(--ink); font-weight: 600; }

.board-wrap {
  display: grid; justify-items: center; overflow-x: auto;
  padding: clamp(12px, 3vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}

/* --n is the grid size, set from the script. Squares shrink to fit phones. */
.nono {
  --cell: clamp(26px, calc((100vw - 120px) / (var(--n) + 2.4)), 42px);
  display: grid; grid-template-columns: auto repeat(var(--n), var(--cell));
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.nono.big { --cell: clamp(24px, calc((100vw - 120px) / (var(--n) + 3)), 38px); }

.clue { color: var(--ink); font: 600 13px/1.15 var(--sans); font-variant-numeric: tabular-nums; transition: opacity .15s; }
.clue.col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; padding-bottom: 6px; }
.clue.row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-right: 8px; }
.clue.done { color: var(--muted); opacity: .45; }

.cell {
  position: relative; width: var(--cell); height: var(--cell); padding: 0;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg); cursor: pointer;
}
/* Thicker lines every five squares, and a frame around the whole grid. */
.cell.edge-r { border-right: 2px solid var(--muted); }
.cell.edge-b { border-bottom: 2px solid var(--muted); }
.cell.top { border-top: 2px solid var(--ink); }
.cell.left { border-left: 2px solid var(--ink); }
.cell.right { border-right: 2px solid var(--ink); }
.cell.bottom { border-bottom: 2px solid var(--ink); }
.cell:hover { background: var(--accent-soft); }
.cell.fill { background: var(--ink); }
.cell.cross::after {
  content: "×"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font: 500 calc(var(--cell) * .6)/1 var(--sans);
}
.nono.won .cell { cursor: default; }
.nono.won .cell.fill { background: var(--accent); animation: pop .3s ease-out backwards; }
.nono.won .cell:hover:not(.fill) { background: var(--bg); }

.mode { margin-top: 4px; }
.mode button { display: inline-flex; align-items: center; gap: 8px; }
.swatch-fill { width: 14px; height: 14px; border-radius: 3px; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .nono.won .cell.fill { animation: none; }
  .clue { transition: none; }
}