/* This page was created with the help of Claude Fable 5 by Anthropic. */
/* nonogram.css — page styles for the Nonogram game (board size 5–7).
   Cell size (--ncell) and clue-track size (--nclue) are computed from the
   viewport by js/nonogram.js.
   Shared game chrome (controls, overlay) lives in site.css. */

body {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* More air between the board and the controls than the shared default */
#game-area {
  gap: var(--space-12);
}

#board {
  position: relative;
  display: grid;
  /* grid-template columns/rows are set by js/nonogram.js (size-dependent) */
  touch-action: manipulation;
}

/* On wide screens there is room to spare: a right margin matching the clue
   track keeps the play area itself centered. On phones the margin would
   shrink the board, so the board box is centered instead. */
@media (min-width: 768px) {
  #board {
    margin-right: var(--nclue);
  }
}

/* --- Clues --- */
.clue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--ncell) * 0.12);
  color: var(--g4);
  font-size: calc(var(--ncell) * 0.32);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease);
}

.clue-col {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: calc(var(--ncell) * 0.18);
}

.clue-row {
  padding-right: calc(var(--ncell) * 0.18);
}

/* A line whose clue is currently satisfied fades back */
.clue.done {
  color: var(--g2);
}

/* Per-clue progress: certainly-finished runs fade, contradicted runs
   turn red (see js/line-clues.js) */
.clue span.done {
  color: var(--g2);
}

.clue span.wrong {
  color: var(--danger);
}

/* --- Cells --- */
.ncell {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--g2);
  cursor: pointer;
}

/* Thicker outer frame around the play area (absolutely positioned so
   it does not occupy grid cells and push the real items around) */
#board::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--ncell) * var(--nsize));
  height: calc(var(--ncell) * var(--nsize));
  box-shadow: inset 0 0 0 2px var(--g3);
  pointer-events: none;
}

.ncell.filled {
  background: var(--g4);
}

.ncell.marked::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  font-size: calc(var(--ncell) * 0.5);
  line-height: 1;
}

/* Keyboard cursor */
.ncell.cursor {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}