.sp-board { --size:4; --gap:8px; width:100%; max-width:448px; margin:auto; padding:9px; border-radius:12px; background:#cbd7bf; user-select:none; touch-action:manipulation; }
.sp-row { display:grid; grid-template-columns:repeat(var(--size),minmax(0,1fr)); gap:var(--gap); margin-bottom:var(--gap); }
.sp-row:last-child { margin-bottom:0; }
.sp-cell { display:grid; place-items:center; position:relative; min-width:0; width:100%; aspect-ratio:1; padding:0; border:1px solid #c1ceb6; border-radius:7px; background:#fafcf4; color:#3b503a; font:650 clamp(22px,3.8vw,40px)/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; box-shadow:0 3px 0 #a8bc97; cursor:default; }
.sp-cell.is-correct { background:#e6efdb; color:#4c693c; }
.sp-cell.is-movable { border-color:#496a3f; box-shadow:0 3px 0 #829c70,inset 0 0 0 1px #496a3f; cursor:pointer; }
.sp-cell.is-movable:hover { background:#edf4e4; }
.sp-cell.is-empty { background:#b6c7a7; border:1px dashed #91a57f; box-shadow:inset 0 2px 5px #576a3820; }
.sp-cell:focus-visible { z-index:2; outline:3px solid #b8893d; outline-offset:-4px; }
.sp-board.is-paused { visibility:hidden; }
.sp-board.is-won { background:#8dab78; }
.sp-board.is-won .sp-cell { border-color:#c1d6ac; background:#eff7e6; }
.sp-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#sp-retry:not([hidden]) { margin-top:12px; }
.sp-target { margin-top:28px; padding-top:20px; border-top:1px solid #e3e9dd; }
.sp-target p { color:#647168; font-size:12px; margin:0 0 12px; }
.sp-target-board { display:grid; grid-template-columns:repeat(var(--size),1fr); gap:3px; width:140px; max-width:100%; padding:5px; background:#e5ecde; border-radius:6px; }
.sp-target-board span { display:grid; place-items:center; aspect-ratio:1; border-radius:2px; background:#fafcf5; color:#607453; font-size:11px; }
.sp-target-board span:last-child { background:transparent; }
.sp-target .sp-target-note { margin:12px 0 0; line-height:1.7; }
@media(max-width:900px) { .sp-target { display:none; } }
@media(max-width:540px) {
  .sp-workspace .cg-toolbar label { flex:1 1 100%; }
  .sp-workspace .cg-toolbar .cg-button { padding-inline:12px; white-space:nowrap; }
  .sp-board { --gap:6px; padding:6px; }
  .sp-cell { border-radius:5px; font-size:clamp(22px,7vw,32px); }
  .sp-board[data-size="5"] { --gap:5px; }
  .sp-board[data-size="5"] .sp-cell { font-size:clamp(18px,5.8vw,27px); }
  .sp-workspace .cg-metric { flex-direction:column; align-items:flex-start; gap:6px; }
}