@import url('../global.css');

/* =============================================================================
   Nonogram (Picross) — a square board split into four areas: a corner, the
   column clues (top), the row clues (left) and the cell grid. The clue gutters
   and the grid share the same per-axis 1fr tracks, so numbers always line up with
   their row / column. Fill / cross state is toggled by class from NonogramGame.
   ========================================================================== */

/* The whole puzzle: a square (via .game-square) that shrinks so the Fill /
   Restart toolbar below always stays on-screen. Equal-size gutters keep the
   cell area square (and therefore the cells square). */
.nonogram {
  --nono-gutter: 24%;
  display: grid;
  grid-template-columns: var(--nono-gutter) 1fr;
  grid-template-rows: var(--nono-gutter) 1fr;
  padding: clamp(4px, 1.5vmin, 10px);
  background: var(--nono-frame);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
}

.nono-corner {
  grid-column: 1;
  grid-row: 1;
}

/* Column clues: one bottom-aligned stack of numbers per column. */
.nono-col-clues {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), 1fr);
  align-items: end;
}

/* Row clues: one right-aligned run of numbers per row. */
.nono-row-clues {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(var(--rows, 10), 1fr);
}

.nono-clue {
  display: flex;
  gap: clamp(2px, 0.8vmin, 6px);
  font-size: clamp(0.5rem, 2.1vmin, 0.95rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--nono-clue-text);
  font-variant-numeric: tabular-nums;
}

.nono-clue-col {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
}

.nono-clue-row {
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
}

/* A blank line's "0" clue is dimmed (it just says the line stays empty). */
.nono-clue .is-zero {
  opacity: 0.35;
}

/* The cell grid. */
.nono-cells {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), 1fr);
  grid-template-rows: repeat(var(--rows, 10), 1fr);
  gap: 1px;
  background: var(--nono-line);
  border: 2px solid var(--nono-line-strong);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.nono-cell {
  position: relative;
  background: var(--nono-cell);
  cursor: pointer;
}

.nono-cell.is-filled {
  background: var(--nono-fill);
}

/* Crossed-out cell: a small X noting the player believes it stays empty. */
.nono-cell.is-cross::after {
  content: '';
  position: absolute;
  inset: 28%;
  background:
    linear-gradient(
      45deg,
      transparent 42%,
      var(--nono-cross) 42%,
      var(--nono-cross) 58%,
      transparent 58%
    ),
    linear-gradient(
      -45deg,
      transparent 42%,
      var(--nono-cross) 42%,
      var(--nono-cross) 58%,
      transparent 58%
    );
}

/* Thicker separators every five cells (standard nonogram reading aid). */
.nono-cell.block-left {
  box-shadow: inset 2px 0 0 var(--nono-line-strong);
}

.nono-cell.block-top {
  box-shadow: inset 0 2px 0 var(--nono-line-strong);
}

.nono-cell.block-left.block-top {
  box-shadow:
    inset 2px 0 0 var(--nono-line-strong),
    inset 0 2px 0 var(--nono-line-strong);
}

/* Fill / Restart toolbar under the board (natural height). */
.nonogram-tools {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.nono-btn {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--nono-btn);
  color: #fff;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    background-color 0.15s ease;
}

.nono-btn:hover {
  background: var(--nono-btn-hover);
}

.nono-btn:active {
  transform: scale(0.92);
}

/* The Fill/Cross toggle shows which tool is active. */
.nono-mode.is-cross {
  background: var(--nono-cross-btn);
}

.nono-mode.is-cross:hover {
  background: var(--nono-cross-btn-hover);
}