/* Képrejtvény (nonogram). Cell size follows the frame width: the clue areas take --lu / --tu cells.
   Every cell is a soft dark tile (padding + content-box background), five-blocks get a wider gap. */
.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))));
  --gap: max(1px, calc(var(--cell) * .045));
  --gap5: max(3px, calc(var(--cell) * .17));
  --n-tile: #1c1c1e;
  --n-tile-hover: #2c2c2e;
  --n-hl: color-mix(in srgb, var(--game) 16%, #1c1c1e);
  --n-hl-clue: color-mix(in srgb, var(--game) 22%, transparent);
  --n-r: min(7px, calc(var(--cell) * .2));
  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: 18px;
  background: transparent;
  color: #fff;
}

/* --- Clues ------------------------------------------------------------------------- */
.n-corner { background: transparent; }
.n-clue {
  display: flex; min-width: 0; min-height: 0; overflow: hidden;
  font-family: var(--font); font-weight: 600; font-size: calc(var(--cell) * var(--cf, .5));
  letter-spacing: -0.02em; line-height: 1;
  color: #fff; background: transparent;
  transition: color .25s, opacity .25s, background-color .18s;
}
.n-rclue {
  align-items: center; justify-content: flex-end;
  gap: calc(var(--cell) * .13); padding-right: calc(var(--cell) * .26);
  border-radius: var(--n-r) 0 0 var(--n-r);
  margin: var(--gap) 0 var(--gap) 0;
}
.n-rclue.n-r5 { margin-bottom: var(--gap5); }
.n-cclue {
  flex-direction: column; align-items: center; justify-content: flex-end;
  gap: calc(var(--cell) * .06); padding-bottom: calc(var(--cell) * .2);
  border-radius: var(--n-r) var(--n-r) 0 0;
  margin: 0 var(--gap);
}
.n-cclue.n-c5 { margin-right: var(--gap5); }
.n-clue.n-done { color: var(--muted); opacity: .45; }
.n-clue.n-hl { background: var(--n-hl-clue); }
.n-clue.n-hl:not(.n-done) { color: #fff; }
.n-clue.n-wave span { display: inline-block; }

/* --- Cells ------------------------------------------------------------------------- */
.n-cell {
  position: relative; min-width: 0; min-height: 0; cursor: pointer;
  padding: var(--gap);
  background: var(--n-tile); background-clip: content-box;
  border-radius: calc(var(--n-r) + var(--gap));
  transition: background-color .18s var(--ease-out), transform .3s var(--ease-spring);
}
.n-cell.n-c5 { padding-right: var(--gap5); }
.n-cell.n-r5 { padding-bottom: var(--gap5); }
.n-cell.n-hl { background-color: var(--n-hl); }
@media (hover: hover) {
  .n-board:not(.n-reveal) .n-cell:hover { background-color: var(--n-tile-hover); }
  .n-board:not(.n-reveal) .n-cell.n-hl:hover { background-color: color-mix(in srgb, var(--game) 28%, #2c2c2e); }
}

/* Filled square */
.n-cell::before {
  content: ""; position: absolute; pointer-events: none;
  inset: var(--gap);
  border-radius: var(--n-r);
  background: var(--game);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: scale(0);
  transition: transform .26s var(--ease-spring), border-radius .4s, inset .4s;
}
.n-cell.n-c5::before { right: var(--gap5); }
.n-cell.n-r5::before { bottom: var(--gap5); }
.n-cell.n-fill::before { transform: scale(1); }
/* ✕ mark */
.n-cell::after {
  content: ""; position: absolute; inset: var(--gap); pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - .8px), rgba(255, 255, 255, .5) calc(50% - .8px), rgba(255, 255, 255, .5) calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(-45deg, transparent calc(50% - .8px), rgba(255, 255, 255, .5) calc(50% - .8px), rgba(255, 255, 255, .5) calc(50% + .8px), transparent calc(50% + .8px));
  background-size: 42% 42%; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(.3) rotate(-45deg);
  transition: opacity .15s, transform .3s var(--ease-spring);
}
.n-cell.n-c5::after { right: var(--gap5); }
.n-cell.n-r5::after { bottom: var(--gap5); }
.n-cell.n-x::after { opacity: 1; transform: none; }
.n-cell.n-cursor { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }

/* --- Solved: the picture appears (tiles melt together on black) ------------------------ */
.n-board.n-reveal .n-cell { cursor: default; background-color: rgba(255, 255, 255, .035); transition: background-color .6s var(--ease-out); }
.n-board.n-reveal .n-cell.n-fill::before {
  inset: -.5px; border-radius: 0; box-shadow: none;
  animation: n-pop .6s var(--ease-spring) both;
  animation-delay: calc(var(--d) * 35ms);
}
.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: .28; }
@keyframes n-pop {
  0% { transform: scale(1); filter: none; }
  35% { transform: scale(.5); filter: brightness(1.5) saturate(1.2); }
  100% { transform: scale(1); filter: none; }
}

.n-caption {
  width: 100%; margin-top: 16px; text-align: center;
  font-family: var(--font); font-size: clamp(1.1rem, 3.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.03em;
  animation: n-caption .6s var(--ease-spring) .45s both;
}
.n-caption .n-cap-label { color: var(--muted); font-weight: 500; }
.n-caption strong { color: var(--accent); font-weight: 650; }
@keyframes n-caption { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* --- Paint / ✕ mode switch: a segmented pill ------------------------------------------- */
.n-tools { width: 100%; display: flex; justify-content: center; margin-top: 14px; user-select: none; -webkit-user-select: none; }
.n-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.n-mode {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; touch-action: manipulation;
  background: transparent; color: var(--muted);
}
.n-mode:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.n-mode.n-on, .n-mode.n-on:hover { background: #fff; color: #000; }
.n-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--game); }
.n-xmark { font-weight: 700; line-height: 1; }
.n-tools.n-locked { opacity: .5; pointer-events: none; }

/* --- Server hints: the cells to change pulse, the line that explains why is tinted ---------- */
.n-cell.n-hint-focus { background-color: color-mix(in srgb, var(--game) 24%, #1c1c1e); }
.n-cell.n-hint { z-index: 1; background-color: color-mix(in srgb, var(--game) 30%, #2c2c2e); animation: n-hint-pulse 1.1s ease-in-out infinite; }
.n-cell.n-hint::after { opacity: .9; transform: none; background-size: 0 0; box-shadow: inset 0 0 0 2px #fff; border-radius: var(--n-r); }
.n-cell.n-hint.n-x::after { background-size: 42% 42%; }
.n-clue.n-hint-line { background: var(--n-hl-clue); color: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes n-hint-pulse { 50% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .n-cell.n-hint { animation: none; } }