.sp-board{position:relative;aspect-ratio:1;background:var(--color-surface-muted);border-radius:var(--radius-md);overflow:hidden;touch-action:manipulation}.sp-tile{position:absolute;left:0;top:0;width:calc(100% / var(--n));height:calc(100% / var(--n));padding:0;margin:0;border:0;cursor:pointer;background-color:var(--color-surface);background-repeat:no-repeat;background-size:calc(var(--n) * 100%) calc(var(--n) * 100%);box-shadow:inset 0 0 0 2px var(--color-surface);transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%));transition:transform 0.14s ease-out,opacity 0.5s}.sp-tile:hover{filter:brightness(1.04)}.sp-tile.is-gap{opacity:0;pointer-events:none}.sp-tile.is-gap.is-solved{opacity:1}.sp-tile span{position:absolute;left:0.35rem;top:0.3rem;min-width:1.6rem;height:1.6rem;padding:0 0.3rem;display:grid;place-items:center;border-radius:999px;background:var(--color-surface);color:var(--color-text);font:600 var(--text-sm) var(--font-head)}.sp-board:not(.show-nums) .sp-tile span{display:none}.sp-board.is-done .sp-tile span{display:none}.sp-peek{position:absolute;inset:0;background-size:cover;opacity:0;pointer-events:none;transition:opacity 0.2s}.sp-board.is-peeking .sp-peek{opacity:1}.game-tools .btn[aria-pressed="true"]:not(#nums){background:var(--color-text);color:var(--color-surface)}.game-tools .btn[aria-pressed="true"]#nums{background:var(--color-surface-muted)}.sp-pic{width:var(--tap);height:var(--tap);padding:0;border:3px solid transparent;border-radius:var(--radius-md);background:none;cursor:pointer;overflow:hidden}.sp-pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(var(--radius-md) - 3px)}.sp-pic[aria-pressed="true"]{border-color:var(--color-action)}@media (prefers-reduced-motion:reduce){.sp-tile,.sp-peek{transition:none}}