/* ---------- nonogram ---------- */
.ng-wrap{--s:24px;display:flex;justify-content:center;width:100%}
.ng{display:grid;user-select:none;-webkit-user-select:none;touch-action:none}
.ng-cc,.ng-rc{font-family:var(--display);font-weight:600;font-size:calc(var(--s) * .52);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ng-cc{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:calc(var(--s) * .14);padding-bottom:calc(var(--s) * .25);border-bottom:2px solid var(--tan)}
.ng-rc{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--s) * .26);padding-right:calc(var(--s) * .3);border-right:2px solid var(--tan)}
.ng-cc.b5{box-shadow:inset -1px 0 0 var(--line)}
.ng-cc.ok,.ng-rc.ok{color:var(--muted);opacity:.4}
.ng-cc.hl,.ng-rc.hl{color:var(--amber);opacity:1}
.ng-x{position:relative;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;place-items:center;font-size:calc(var(--s) * .55);color:var(--muted)}
.ng-x.br,.ng-x.ec{border-right:2px solid var(--tan)}
.ng-x.bb,.ng-x.er{border-bottom:2px solid var(--tan)}
.ng-x.hl{background:var(--bg2)}
.ng-x.on{background:var(--pc,var(--amber));box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.ng-x.x::after{content:"✕";line-height:1}
.ng-x.sel{box-shadow:inset 0 0 0 2px var(--you)}
.ng-x.psel{box-shadow:inset 0 0 0 2px var(--ps)}
.ng-x.on.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.ng-x.bad{background:var(--bad)}
.ng-wrap.done .ng-x.x::after{content:""}
.ng-wrap.done .ng-x.on{box-shadow:none}
.ng-foot{display:flex;gap:8px;align-items:center}
.ng-foot .seg{flex:1}
.ng-foot .btn{flex:none;padding:12px 14px}
.ng-foot .btn.on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}