/* Nonograms: list papira sa brojevima kolona gore i redova levo, polja kao dugmad, alat Fill ili X. Raspored računa
   client/nonograms/game.ts (--cell, --n, --rc, --cc). Ostalo je iz base.css. */
.is-game .felt.nonograms{touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.ngboard{position:absolute;--ngink:#2a1d12;--ink:#2a1d12}
.ngpaper{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:10px;background:#fbf6e8;
  box-shadow:0 14px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(120,90,50,.22);
  display:grid;grid-template-columns:calc(var(--rc)*var(--cell)*.58) calc(var(--n)*var(--cell));
  grid-template-rows:calc(var(--cc)*var(--cell)*.62) calc(var(--n)*var(--cell));padding:calc(var(--cell)*.3);box-sizing:border-box;align-content:start}
.ngboard.side .ngpaper{left:0;transform:none}
.ngcols{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--n),var(--cell))}
.ngrows{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(var(--n),var(--cell))}
.nggrid{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell);
  outline:2px solid var(--ngink);cursor:pointer;touch-action:pinch-zoom}
.ngclue{appearance:none;border:0;margin:0;padding:0 2px;background:transparent;color:var(--ngink);cursor:pointer;
  font:700 calc(var(--cell)*.46)/1 var(--sans);display:flex;gap:calc(var(--cell)*.14)}
.ngclue.col{flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 3px}
.ngclue.row{justify-content:flex-end;align-items:center;padding-right:5px}
.ngclue i{font-style:normal}
.ngclue.done{color:#6f604c}
.ngclue.done i{text-decoration:line-through;text-decoration-color:rgba(111,96,76,.6)}
.ngclue:nth-child(odd){background:rgba(120,90,50,.06)}
.ngc{appearance:none;margin:0;padding:0;border:0;border-right:1px solid rgba(42,29,18,.25);border-bottom:1px solid rgba(42,29,18,.25);
  background:transparent;cursor:pointer;position:relative;color:#7a6a55;font:700 calc(var(--cell)*.5)/1 var(--sans)}
.ngc.bR{border-right:2px solid var(--ngink)}
.ngc.bB{border-bottom:2px solid var(--ngink)}
.ngc.fill{background:var(--ink)}
.ngc.mark::after{content:'';position:absolute;inset:26%;--x:#8a7a62;background:linear-gradient(45deg,transparent 43%,var(--x) 43%,var(--x) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--x) 43%,var(--x) 57%,transparent 57%)}
.ngc.wrong::after{--x:#c0281f}
.ngc.told{box-shadow:inset 0 0 0 2px #3fae5a}
.ngc.pre:not(.fill){background:rgba(242,201,100,.6)}
.ngc.pre.fill{opacity:.65}
.ngc.flash{animation:ngflash .9s ease-out}
@keyframes ngflash{0%{box-shadow:inset 0 0 0 4px #3fae5a}100%{box-shadow:none}}
.ngc:focus-visible{outline:3px solid var(--brass);outline-offset:-3px;z-index:1}
.ngboard.reveal .ngc{animation:ngin .35s ease-out both}
@keyframes ngin{from{opacity:0}to{opacity:1}}
.ngboard.won .ngc.mark::after{opacity:0;transition:opacity .6s}
.ngboard.won .ngc.fill{transition:background .6s}
.ngboard.won .nggrid{outline-color:transparent}
.ngboard.won .ngc{border-color:transparent}
/* alat */
.ngtools{position:absolute;display:flex;gap:10px}
.ngboard:not(.side) .ngtools{left:50%;bottom:0;transform:translateX(-50%)}
.ngboard.side .ngtools{right:0;top:50%;transform:translateY(-50%);flex-direction:column}
.ngtool{appearance:none;display:flex;align-items:center;gap:8px;min-height:48px;min-width:96px;padding:0 16px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(120,90,50,.35);background:linear-gradient(180deg,#fffaf0,#efe2c4);color:var(--ngink);font:700 17px/1 var(--sans);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.ngtool[aria-pressed="true"]{background:linear-gradient(180deg,#f6d77b,#e3b54a);border-color:#a67c1f}
.ngsw{width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:16px}
.ngsw.fill{background:var(--ngink)}
.ngsw.mark{border:1.5px solid #8a7a62;--x:#8a7a62;background:linear-gradient(45deg,transparent 42%,var(--x) 42%,var(--x) 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--x) 42%,var(--x) 58%,transparent 58%)}
.ngtool:focus-visible,.ngclue:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ngc.flash,.ngboard.reveal .ngc{animation:none}.ngboard.won .ngc.fill,.ngboard.won .ngc.mark::after{transition:none}}