/* Képrejtvény (nonogram). Cell size follows the frame width: the clue areas take --lu / --tu cells. */
.n-wrap { container-type: inline-size; width: 100%; display: flex; justify-content: center; }
@media (max-width: 560px) {
  /* Borrow the play panel's side padding so 15×15 keeps ≥ 18 px cells on a 360 px phone. */
  .n-wrap { width: calc(100% + 16px); margin-inline: -8px; }
}

.n-board {
  --n: 10;
  --rows: 10;
  --lu: 2;
  --tu: 2;
  --pad: 6px;
  --cell: min(46px, calc((100cqw - 2 * var(--pad)) / (var(--n) + var(--lu))));
  --n-thin: color-mix(in srgb, var(--text) 13%, var(--surface));
  --n-mid: color-mix(in srgb, var(--text) 48%, var(--surface));
  --n-thick: color-mix(in srgb, var(--text) 78%, var(--surface));
  --n-clue-bg: color-mix(in srgb, var(--game) 5%, var(--surface));
  --n-hl: color-mix(in srgb, var(--game) 9%, var(--surface));
  --n-hl-clue: color-mix(in srgb, var(--game) 17%, var(--surface));
  display: grid;
  grid-template-columns: calc(var(--cell) * var(--lu)) repeat(var(--n), var(--cell));
  grid-template-rows: calc(var(--cell) * var(--tu)) repeat(var(--rows), var(--cell));
  padding: var(--pad);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 34px -18px rgba(40, 30, 120, .45), 0 0 0 1px var(--line);
}

/* --- Clues ------------------------------------------------------------------------- */
.n-corner { background: transparent; }
.n-clue {
  display: flex; min-width: 0; min-height: 0; overflow: hidden;
  font-family: var(--display); font-weight: 600; font-size: calc(var(--cell) * var(--cf, .5));
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
  background: var(--n-clue-bg); color: var(--text);
  transition: color .25s, opacity .25s, background-color .12s;
}
.n-rclue {
  align-items: center; justify-content: flex-end;
  gap: calc(var(--cell) * .13); padding-right: calc(var(--cell) * .22);
  border-bottom: 1px solid var(--n-thin);
}
.n-rclue.n-r5 { border-bottom: 2px solid var(--n-mid); }
.n-cclue {
  flex-direction: column; align-items: center; justify-content: flex-end;
  gap: calc(var(--cell) * .06); padding-bottom: calc(var(--cell) * .16);
  border-right: 1px solid var(--n-thin);
}
.n-cclue.n-c5 { border-right: 2px solid var(--n-mid); }
.n-clue.n-done { color: var(--muted); opacity: .42; }
.n-clue.n-hl { background: var(--n-hl-clue); }
.n-clue.n-hl:not(.n-done) { color: var(--text); }

/* --- Cells ------------------------------------------------------------------------- */
.n-cell {
  position: relative; min-width: 0; min-height: 0; cursor: pointer;
  background: var(--surface);
  border-right: 1px solid var(--n-thin); border-bottom: 1px solid var(--n-thin);
  transition: background-color .08s, border-color .5s;
}
.n-cell.n-c5 { border-right: 2px solid var(--n-mid); }
.n-cell.n-r5 { border-bottom: 2px solid var(--n-mid); }
.n-cell.n-first-c { border-left: 2px solid var(--n-thick); }
.n-cell.n-first-r { border-top: 2px solid var(--n-thick); }
.n-cell.n-last-c { border-right: 2px solid var(--n-thick); }
.n-cell.n-last-r { border-bottom: 2px solid var(--n-thick); }
.n-cell.n-tl { border-top-left-radius: 6px; }
.n-cell.n-tr { border-top-right-radius: 6px; }
.n-cell.n-bl { border-bottom-left-radius: 6px; }
.n-cell.n-br { border-bottom-right-radius: 6px; }
.n-cell.n-hl { background: var(--n-hl); }
@media (hover: hover) {
  .n-board:not(.n-reveal) .n-cell:hover { background: color-mix(in srgb, var(--game) 20%, var(--surface)); }
}

/* Filled square */
.n-cell::before {
  content: ""; position: absolute; inset: 1px; pointer-events: none;
  border-radius: max(2px, calc(var(--cell) * .1));
  background: var(--game);
  box-shadow: inset 0 calc(var(--cell) * -.06) 0 rgba(0, 0, 0, .14), inset 0 calc(var(--cell) * .05) 0 rgba(255, 255, 255, .22);
  transform: scale(0);
  transition: transform .13s cubic-bezier(.3, 1.4, .5, 1);
}
.n-cell.n-fill::before { transform: scale(1); }
/* ✕ mark */
.n-cell::after {
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: calc(var(--cell) * .48); font-weight: 700; line-height: 1; color: var(--muted);
  opacity: 0; transform: scale(.4);
  transition: opacity .12s, transform .12s;
}
.n-cell.n-x::after { opacity: .7; transform: scale(1); }
.n-cell.n-cursor { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }

/* --- Solved: the picture appears ------------------------------------------------------ */
.n-board.n-reveal .n-cell { cursor: default; border-right-color: transparent; border-bottom-color: transparent; }
.n-board.n-reveal .n-cell.n-last-c { border-right-color: var(--n-thick); }
.n-board.n-reveal .n-cell.n-last-r { border-bottom-color: var(--n-thick); }
.n-board.n-reveal .n-cell.n-fill::before {
  right: -1px; bottom: -1px; border-radius: 0; box-shadow: none;
  animation: n-pop .55s cubic-bezier(.3, 1.5, .5, 1) both;
  animation-delay: calc(var(--d) * 28ms);
}
.n-board.n-reveal .n-cell.n-c5.n-fill::before { right: -2px; }
.n-board.n-reveal .n-cell.n-r5.n-fill::before { bottom: -2px; }
.n-board.n-reveal .n-cell.n-last-c.n-fill::before { right: 0; }
.n-board.n-reveal .n-cell.n-last-r.n-fill::before { bottom: 0; }
.n-board.n-reveal .n-cell.n-tl.n-fill::before { border-top-left-radius: 4px; }
.n-board.n-reveal .n-cell.n-tr.n-fill::before { border-top-right-radius: 4px; }
.n-board.n-reveal .n-cell.n-bl.n-fill::before { border-bottom-left-radius: 4px; }
.n-board.n-reveal .n-cell.n-br.n-fill::before { border-bottom-right-radius: 4px; }
.n-board.n-reveal .n-cell.n-x::after { opacity: 0; transform: scale(.3) rotate(45deg); transition: opacity .4s, transform .4s; }
.n-board.n-reveal .n-clue { opacity: .3; }
@keyframes n-pop {
  0% { transform: scale(1); filter: none; }
  35% { transform: scale(.45); filter: brightness(1.45) saturate(1.2); }
  100% { transform: scale(1); filter: none; }
}

.n-caption {
  width: 100%; margin-top: 14px; text-align: center;
  font-family: var(--display); font-size: clamp(1.05rem, 3.8vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em;
  animation: n-caption .6s cubic-bezier(.2, .9, .3, 1.3) .45s both;
}
.n-caption .n-cap-label { color: var(--muted); font-weight: 600; }
.n-caption strong { color: var(--game); font-weight: 800; }
@keyframes n-caption { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* --- Paint / ✕ mode switch ------------------------------------------------------------- */
.n-tools { width: 100%; display: flex; justify-content: center; margin-top: 12px; user-select: none; -webkit-user-select: none; }
.n-modes { display: inline-flex; gap: 6px; }
.n-mode { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; touch-action: manipulation; }
.n-mode.n-on { background: var(--game); border-color: var(--game); color: #fff; }
.n-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--game); }
.n-mode.n-on .n-swatch { background: #fff; }
.n-xmark { font-weight: 800; line-height: 1; }
.n-tools.n-locked { opacity: .55; pointer-events: none; }