/* Pixel Reveal - Nonogram (Picross). Tap to fill, X to mark, match clues. */
.ng-arena { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.ng-wrap { display: grid; gap: 2px; touch-action: manipulation; max-width: 100%; }
.ng-clue {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  font: 700 11px/1.1 "Chivo", system-ui, sans-serif;
  color: var(--casino-muted, #9aa0b8);
  padding: 2px;
}
.ng-clue.col { flex-direction: column; align-items: center; justify-content: flex-end; }
.ng-clue span.done { color: var(--casino-green, #37e0a0); }
.ng-clue-corner { width: 26px; height: 26px; }
.ng-cell {
  width: clamp(22px, 6.6vw, 34px);
  height: clamp(22px, 6.6vw, 34px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(11px, 3.4vw, 16px);
  cursor: pointer;
  user-select: none;
  min-width: 26px; min-height: 26px;
}
.ng-cell.filled { background: linear-gradient(160deg, var(--casino-red,#7c5cff), var(--casino-red-soft,#a58cff)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.ng-cell.marked { color: #ff6b8a; }
.ng-cell.wrong { background: rgba(255,45,85,.35); }
.ng-cell.pop { animation: ng-pop .15s ease; }
#markMode.on { background: #ff6b8a; color: #0a0a14; box-shadow: 0 0 12px rgba(255,107,138,.6); }
@keyframes ng-pop { 0%{transform:scale(.8)} 100%{transform:scale(1)} }