/* Nonogram styles */

.nonogram-wrap{ display:flex; flex-direction:column; gap:12px; }

.nonogram-board{
  /* Keep clues tightly coupled to the grid (not stretched across the whole card). */
  display:grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: max-content max-content;
  gap: 8px;
  align-items:start;
  justify-content:center;

  /* Mobile quirk fix: ensure the whole clue+grid block stays centered inside the card
     even on very narrow viewports. */
  align-self: center;
  max-width: 100%;

  width: fit-content;
  margin: 0 auto;
  /* --cell is injected from JS so clue widths match the rendered grid. */
}

.nonogram-colclues{
  grid-column: 2;
  grid-row: 1;
  display:flex;
  /* No horizontal gap: must match grid columns exactly (grid has gap:0). */
  gap: 0;
  align-items:flex-end;
  justify-content:flex-start;
  width: fit-content;
}

.nonogram-rowclues{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  /* No vertical gap: keep each row clue aligned to a grid row. */
  gap: 0;
  align-items:flex-end;
  justify-content:center;
}

.nonogram-grid{
  grid-column: 2;
  grid-row: 2;
  border-radius: 10px;
  padding: 0;
  background: rgba(255,255,255,0.04);
}

.clue-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  /* Force exact column width to match the grid. */
  width: var(--cell);
}
.clue-row{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  /* Match the grid row height exactly to avoid 1px drift/gaps. */
  height: var(--cell);
  align-items: center; /* vertically centre clue numbers */
}

/* Visual feedback: solved lines */
.clue-col.solved .clue-num,
.clue-row.solved .clue-num{
  color: var(--success);
}

.clue-num{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(230,237,246,0.85);
  line-height: 1;
}

.nonogram-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  font-size: 18px;
  user-select:none;
  cursor:pointer;
  background: rgba(0,0,0,0.08);
}

.nonogram-cell.fill{ background: rgba(230,237,246,0.88); color: rgba(0,0,0,0.65); }
.nonogram-cell.x{ background: rgba(0,0,0,0.10); color: rgba(230,237,246,0.45); }

.nonogram-cell.selected{ outline: 2px solid rgba(76,201,240,0.65); outline-offset:-2px; }

.nonogram-legend{ color: var(--text-2); font-size: 13px; line-height: 1.4; }