/* Nonogramm 的盘面。左侧一列放行提示，顶上一行放列提示，其余是格子。 */

.nono {
  --cell: 30px;
  --clue: 12px;
  display: grid;
  grid-template-columns: auto repeat(var(--n), var(--cell));
  touch-action: none;              /* 拖拽填格时不要触发页面滚动 */
  user-select: none; -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
  flex: none;
}

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

/* ---- 提示 ---- */
.nono .colclue,
.nono .rowclue {
  display: flex;
  gap: 3px;
  font-size: var(--clue);
  color: var(--muted);
  line-height: 1.1;
  padding: 3px;
}
.nono .colclue {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.nono .rowclue {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  white-space: nowrap;
}
/* 该行/列已经填对了 —— 提示变淡，扫读时可以跳过 */
.nono .colclue.done,
.nono .rowclue.done { opacity: .32; }

/* 每 5 格加一条粗线，长行数格子时找得到位置 */
.nono .colclue.band { box-shadow: inset 2px 0 0 var(--grid); }
.nono .rowclue.band { box-shadow: inset 0 2px 0 var(--grid); }

/* ---- 格子 ---- */
.nono .cell {
  width: var(--cell); height: var(--cell);
  border: 1px solid var(--line);
  background: var(--cell-bg, var(--surface));
  position: relative;
  cursor: pointer;
}
.nono .cell.band-l { border-left-color: var(--grid); border-left-width: 2px; }
.nono .cell.band-t { border-top-color: var(--grid); border-top-width: 2px; }
.nono .cell.edge-r { border-right-color: var(--grid); border-right-width: 2px; }
.nono .cell.edge-b { border-bottom-color: var(--grid); border-bottom-width: 2px; }

.nono .cell.fill { background: var(--primary); border-color: var(--primary); }

.nono .cell.cross::before,
.nono .cell.cross::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 52%; height: 2px; background: var(--muted); border-radius: 1px;
}
.nono .cell.cross::before { transform: translate(-50%, -50%) rotate(45deg); }
.nono .cell.cross::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 解开后的揭晓动画：逐格点亮 */
.nono.won .cell.fill {
  background: linear-gradient(135deg, var(--primary), var(--violet));
  border-color: transparent;
  animation: pop .28s ease-out both;
  animation-delay: var(--d, 0ms);
}
.nono.won .cell.cross::before,
.nono.won .cell.cross::after { opacity: 0; transition: opacity .3s; }
@keyframes pop {
  from { transform: scale(.55); opacity: .25; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nono.won .cell.fill { animation: none; }
}

.board-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px; flex-wrap: wrap;
}

/* 窄屏和大盘面：缩小格子。20×20 在 375px 宽的屏上仍然放不下，
   靠 .board-wrap 横向滚动兜底 —— 再小就点不准了。 */
@media (max-width: 560px) {
  .nono { --cell: 22px; --clue: 10px; }
  .nono[data-n="15"] { --cell: 18px; --clue: 9px; }
  .nono[data-n="20"] { --cell: 15px; --clue: 8px; }
  .nono .colclue, .nono .rowclue { padding: 2px; gap: 2px; }
  .nono .rowclue { padding-right: 4px; }
}