.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 450px); border: 2px solid var(--text); border-radius: 8px; overflow: hidden; background: var(--panel); }
.sd-sq { aspect-ratio: 1; display: grid; place-items: center; border-right: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); font-size: clamp(16px, 4.6vw, 22px); }
.sd-sq:nth-child(9n) { border-right: 0; }
.sd-sq:nth-last-child(-n + 9) { border-bottom: 0; }
.sd-sq.br { border-right: 2px solid var(--text); }
.sd-sq.bb { border-bottom: 2px solid var(--text); }
.sd-sq.given { font-weight: 600; background: var(--chip); }
.sd-sq.done { color: var(--green); font-weight: 500; }
.sd-sq input {
  width: 100%; height: 100%; border: 0; background: transparent; color: var(--blue); text-align: center; padding: 0;
  font: inherit; font-weight: 500; outline: none; caret-color: var(--blue);
}
.sd-sq input:focus { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.sd-sq.wrong { background: color-mix(in srgb, var(--red) 18%, var(--panel)); }
.sd-sq.wrong input { color: var(--red); }