.nwrap { max-width:100%; overflow-x:auto; padding:4px; }
.nboard { --n:10; --cs:min(32px, calc((100vw - 120px) / var(--n))); display:grid; grid-template-columns:auto repeat(var(--n), var(--cs)); grid-auto-rows:auto; gap:0; touch-action:none; user-select:none; margin:0 auto; width:max-content; }
.ncol { grid-row:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding-bottom:4px; font:700 calc(var(--cs) * .42)/1.15 system-ui; color:var(--text); }
.ncol.ok, .nrow.ok { color:var(--muted); opacity:.55; }
.nrow { grid-column:1; display:flex; justify-content:flex-end; align-items:center; gap:calc(var(--cs) * .2); padding-right:6px; font:700 calc(var(--cs) * .42)/1 system-ui; color:var(--text); }
.nc { width:var(--cs); height:var(--cs); border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; font:700 calc(var(--cs) * .6)/1 system-ui; color:var(--muted); box-sizing:border-box; }
.nc.f5 { border-right:2px solid var(--text); } .nc.b5 { border-bottom:2px solid var(--text); }
.nc.on, .nc.pv1 { background:var(--accent); } .nc.x::after, .nc.pv2::after { content:'×'; }
.nc.pv1 { opacity:.7; } .nboard.won .nc.on { background:#4ade80; }
.nc:hover { outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:-2px; }
.bar button { min-height:44px; }
#sizes button.on, #tools button.on { background:var(--accent); color:var(--accent-ink,#06202e); }