.sboard { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); grid-template-rows:repeat(9, minmax(0, 1fr)); width:min(450px, 100%); aspect-ratio:1; border:3px solid var(--text); border-radius:6px; background:var(--panel); box-sizing:border-box; }
.sc { position:relative; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:0; background:transparent; font:600 clamp(1.1rem, 5.4vw, 1.7rem)/1 system-ui, sans-serif; color:var(--accent); min-width:0; }
.sc:nth-child(9n+3), .sc:nth-child(9n+6) { border-right:2px solid var(--text); }
.sc:nth-child(n+19):nth-child(-n+27), .sc:nth-child(n+46):nth-child(-n+54) { border-bottom:2px solid var(--text); }
.sc.given { color:var(--text); font-weight:800; background:color-mix(in srgb, var(--muted) 14%, transparent); }
.sc.peer { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.sc.same { background:color-mix(in srgb, var(--accent) 26%, transparent); }
.sc.sel { background:color-mix(in srgb, var(--accent) 42%, transparent); outline:2px solid var(--accent); outline-offset:-2px; z-index:1; }
.sc.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 20%, transparent); }
.sc .nt { position:absolute; inset:2px; display:grid; grid-template-columns:repeat(3, 1fr); font-size:clamp(.5rem, 2.2vw, .7rem); font-weight:600; color:var(--muted); line-height:1; }
.sc .nt i { font-style:normal; display:grid; place-items:center; }
.pad { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:4px; width:min(450px, 100%); }
.pad button { min-height:48px; padding:0; font:700 1.25rem system-ui; position:relative; }
.pad button small { position:absolute; right:3px; bottom:1px; font-size:.55rem; color:var(--muted); }
.pad button:disabled { opacity:.35; }
.bar button { min-height:44px; }
#levels button.on, #notes.on { background:var(--accent); color:var(--accent-ink,#06202e); }
.sboard.won { border-color:#4ade80; }