.ns-board { width: min(100%, 510px); margin: 20px auto; padding: 14px; border: 1px solid var(--glass-edge); border-radius: 24px; background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.ns-grid { display: grid; grid-template-columns: 62px repeat(var(--n), minmax(0, 1fr)); gap: 7px; align-items: center; }
.ns-corner { font-size: 10px; color: var(--muted); text-align: center; }
.ns-total { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 52px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.ns-total strong { font: 800 20px var(--display); }
.ns-total span { font-size: 10px; white-space: nowrap; color: var(--muted); }
.ns-total.met { color: #16634f; background: #d2f4e6; }
.ns-total.met span { color: #16634f; }
.ns-cell { position: relative; width: 100%; min-height: 44px; aspect-ratio: 1; border: 1px solid var(--glass-edge); border-radius: 12px; font: 800 clamp(20px,5vw,29px) var(--display); color: var(--text); background: var(--glass); cursor: pointer; }
.ns-cell.removed { color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); }
.ns-cell.removed::after { content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; background: currentColor; transform: rotate(-35deg); }
.ns-cell:focus-visible { outline: 3px solid var(--select); outline-offset: 2px; }
.ns-cell:disabled { cursor: default; }
@media (max-width: 480px) { .ns-board { padding: 8px; } .ns-grid { grid-template-columns: 44px repeat(var(--n), minmax(0, 1fr)); gap: 3px; } .ns-total { min-height: 44px; } .ns-total strong { font-size: 18px; } .ns-total span { font-size: 9px; } .ns-cell { border-radius: 8px; font-size: 20px; } }