.sl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.sl-board{--size:4;--gap:6px;--cell:calc((100% - (var(--size) + 1) * var(--gap)) / var(--size));position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto;border-radius:16px;background:var(--border)}
.sl-tile{position:absolute;left:calc(var(--gap) + var(--x) * (var(--cell) + var(--gap)));top:calc(var(--gap) + var(--y) * (var(--cell) + var(--gap)));width:var(--cell);height:var(--cell);border-radius:12px;background:var(--surface);box-shadow:inset 0 -3px 0 #0002;font:800 clamp(16px,calc(28px - var(--size) * 2px + 2vw),40px) var(--mono);color:var(--ink);transition:left .12s ease,top .12s ease;touch-action:manipulation}
.sl-tile:hover:not(:disabled){filter:brightness(.96)}
.sl-tile.correct{background:var(--accent-soft);color:var(--accent)}
.sl-tile:disabled{cursor:default;opacity:1}
.sl-board.solved .sl-tile{background:var(--accent);color:var(--accent-ink)}
@media(max-width:720px){.sl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sl-tile{transition:none}}