/* =============================================================
   GAME: Nonogram
   ============================================================= */
.board-nonogram {
  --w: 10; --rc: 3; --cc: 3; --maxcell: 40px;
  --cell: min(calc((100vw - 84px) / (var(--w) + var(--rc) * .6)), var(--maxcell));
  --ng-glow: #ff4d6d;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ng-wrap {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  padding: 8px; border-radius: 16px;
  background: linear-gradient(160deg, #2b0c18, #170610);
  box-shadow: 0 0 0 2px var(--ng-glow), 0 0 28px rgba(255, 77, 109, .3), 0 12px 30px rgba(0, 0, 0, .35);
}
.ng-corner { display: grid; place-items: center; padding: 4px; }
.ng-corner canvas {
  width: min(100%, calc(var(--cell) * var(--cc) * .62)); max-height: calc(var(--cc) * var(--cell) * .62); aspect-ratio: 1;
  image-rendering: pixelated; border-radius: 4px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .25);
}
/* column clues: one stack per column, numbers at the bottom */
.ng-cols { display: flex; gap: 1px; padding: 0 3px; align-items: stretch; }
.ng-cclue {
  width: var(--cell); min-height: calc(var(--cc) * var(--cell) * .62 + 6px); flex: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px; padding: 3px 0 4px;
  border-radius: 6px 6px 0 0; color: #ffd0da;
  font: 700 calc(var(--cell) * .5) / 1.1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: color .15s, background-color .15s;
}
.ng-rows { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; }
.ng-rclue {
  height: var(--cell); flex: none; display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--cell) * .2); padding: 0 6px 0 4px;
  border-radius: 6px 0 0 6px; color: #ffd0da;
  font: 700 calc(var(--cell) * .5) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: color .15s, background-color .15s;
}
.ng-cclue.ng-bl { margin-left: 2px; }
.ng-rclue.ng-bt { margin-top: 2px; }
.ng-cclue:nth-child(odd), .ng-rclue:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.ng-cclue.ng-hot, .ng-rclue.ng-hot { background: rgba(255, 77, 109, .2); color: #fff; }
.ng-cclue.ng-ok, .ng-rclue.ng-ok { color: rgba(255, 208, 218, .35); }
.ng-cclue.ng-ok.ng-hot, .ng-rclue.ng-ok.ng-hot { color: rgba(255, 255, 255, .5); }

.ng-grid {
  display: flex; flex-direction: column; gap: 1px; padding: 3px; border-radius: 8px;
  background: #5a2234; box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .5);
  touch-action: none;
}
.ng-row { display: flex; gap: 1px; }
.ng-row.ng-bt { margin-top: 2px; }
.ng-cell {
  position: relative; width: var(--cell); height: var(--cell); flex: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 2px; background: #241018; touch-action: none;
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ng-cell.ng-bl { margin-left: 2px; }
.ng-row:first-child .ng-cell:first-child { border-top-left-radius: 6px; }
.ng-row:first-child .ng-cell:last-child { border-top-right-radius: 6px; }
.ng-row:last-child .ng-cell:first-child { border-bottom-left-radius: 6px; }
.ng-row:last-child .ng-cell:last-child { border-bottom-right-radius: 6px; }
.ng-cell:hover { background: #3a1826; }
.ng-cell:focus { outline: none; }
.ng-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); z-index: 1; }
.ng-cell.is-on {
  background: linear-gradient(145deg, #ff7a93, #e8335a 60%, #c3204a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 8px rgba(255, 77, 109, .35);
  animation: ngfill .16s ease;
}
.ng-cell.is-on:focus-visible { box-shadow: inset 0 0 0 2px var(--focus), 0 0 8px rgba(255, 77, 109, .35); }
@keyframes ngfill { from { transform: scale(.7); } }
.ng-cell.is-x::before, .ng-cell.is-x::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: max(2px, calc(var(--cell) * .08)); margin-top: max(-1px, calc(var(--cell) * -.04));
  border-radius: 2px; background: #b06a80;
}
.ng-cell.is-x::before { transform: rotate(45deg); }
.ng-cell.is-x::after { transform: rotate(-45deg); }
.ng-cell:disabled { cursor: default; }
.ng-loading .ng-cell { background: #22101a; animation: ngload 1.2s ease-in-out infinite alternate; }
.ng-loading .ng-row:nth-child(2n) .ng-cell { animation-delay: .3s; }
@keyframes ngload { to { background: #33172a; } }
/* solved: crosses fade, the picture glows */
.ng-over .ng-cell.is-x::before, .ng-over .ng-cell.is-x::after { opacity: 0; transition: opacity .4s; }
.ng-over .ng-cell.is-on { animation: ngwin .9s ease both; }
@keyframes ngwin { 40% { background: #ffc2cf; box-shadow: 0 0 14px rgba(255, 120, 150, .9); } }
.ng-over .ng-cclue, .ng-over .ng-rclue { color: rgba(255, 208, 218, .35); }

/* tools */
.ng-tools { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ng-tool {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .92rem var(--font-body); color: var(--muted); background: transparent; transition: background .15s, color .15s, box-shadow .15s;
}
.ng-tool:hover { color: var(--ink); }
.ng-tool[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #ff4d6d, #c3204a); box-shadow: 0 0 14px rgba(255, 77, 109, .45); }
.ng-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ng-tool:disabled { opacity: .45; cursor: default; }
.ng-ico-fill { width: 14px; height: 14px; border-radius: 3px; background: currentColor; }
.ng-ico-x { position: relative; width: 14px; height: 14px; }
.ng-ico-x::before, .ng-ico-x::after { content: ""; position: absolute; left: -1px; right: -1px; top: 6px; height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.ng-ico-x::after { transform: rotate(-45deg); }
.ng-help { margin: 0; max-width: 520px; font-size: .84rem; color: var(--muted); text-align: center; }
.ng-clock, .ng-count { font-variant-numeric: tabular-nums; }
.ng-count { color: #ffc1ce; }
@media (max-width: 480px) {
  .ng-wrap { padding: 6px; border-radius: 12px; }
  .ng-rclue { padding: 0 4px 0 2px; }
  .ng-cclue, .ng-rclue { font-size: max(10px, calc(var(--cell) * .55)); }
}
@media (prefers-reduced-motion: reduce) {
  .ng-cell, .ng-cclue, .ng-rclue { transition: none; }
  .ng-cell.is-on, .ng-over .ng-cell.is-on { animation: none; }
}