.g-sliding-puzzle{--sp-pad:3px;--sp-sign:-1;--sp-face:color-mix(in srgb, var(--c-brand) 9%, var(--c-surface));--sp-edge:color-mix(in srgb, var(--c-brand) 22%, var(--c-border));--sp-ink:color-mix(in srgb, var(--c-brand) 26%, var(--c-text));--sp-face-live:color-mix(in srgb, var(--c-brand) 18%, var(--c-surface));--sp-edge-live:color-mix(in srgb, var(--c-brand) 58%, var(--c-border));--sp-face-home:color-mix(in srgb, var(--c-good) 16%, var(--c-surface));--sp-edge-home:color-mix(in srgb, var(--c-good) 50%, var(--c-border));--sp-ink-home:color-mix(in srgb, var(--c-good) 45%, var(--c-text));gap:var(--sp-3);width:100%}.g-sliding-puzzle .sp-chip{align-items:center;gap:var(--sp-2);padding-block:var(--sp-1);padding-inline:var(--sp-4);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-size:var(--fs-sm);margin:0;display:inline-flex}.g-sliding-puzzle .sp-chip b{min-width:2ch;color:var(--c-text);font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:center}.g-sliding-puzzle .sp-board{aspect-ratio:1;border-radius:var(--r-lg);background:var(--c-surface-2);border:1px solid var(--c-border);touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:min(100%,400px);position:relative;container-type:inline-size}.g-sliding-puzzle .sp-tile,.g-sliding-puzzle .sp-hole{width:calc(100% / var(--sp-n,3));height:calc(100% / var(--sp-n,3));padding:var(--sp-pad);transform:translate(calc(var(--sp-col,0) * 100% * var(--sp-sign,-1)), calc(var(--sp-row,0) * 100%));transition:transform .17s var(--ease);background:0 0;border:0;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}.g-sliding-puzzle .sp-hole-face{border-radius:var(--r-md);border:2px dashed color-mix(in srgb, var(--c-brand) 28%, var(--c-border));background:color-mix(in srgb, var(--c-brand) 4%, var(--c-bg));width:100%;height:100%;display:block}.g-sliding-puzzle .sp-face{border-radius:var(--r-md);border:1px solid var(--sp-edge);background:var(--sp-face);width:100%;height:100%;color:var(--sp-ink);font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-lg);font-size:clamp(1rem, calc(38cqw / var(--sp-n,3)), 2.75rem);transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);place-items:center;line-height:1;display:grid}.g-sliding-puzzle .sp-tile:not(.is-locked) .sp-face{background:var(--sp-face-live);border-color:var(--sp-edge-live);box-shadow:var(--shadow-sm)}.g-sliding-puzzle .sp-tile.is-home .sp-face{background:var(--sp-face-home);border-color:var(--sp-edge-home);color:var(--sp-ink-home)}.g-sliding-puzzle .sp-tile.is-home:not(.is-locked) .sp-face{border-color:var(--c-good)}.g-sliding-puzzle .sp-tile[aria-disabled=true]{cursor:default}.g-sliding-puzzle .sp-tile:not(.is-locked):active .sp-face{transform:scale(.96)}.g-sliding-puzzle .sp-tile:focus-visible{z-index:2;outline:none}.g-sliding-puzzle .sp-tile:focus-visible .sp-face{outline:3px solid var(--c-focus);outline-offset:2px}.g-sliding-puzzle .sp-tile.is-hint{z-index:3}.g-sliding-puzzle .sp-tile.is-hint .sp-face{outline:3px solid var(--c-accent);outline-offset:-1px;animation:sp-hint-flash .95s var(--ease) 2}@keyframes sp-hint-flash{0%,to{box-shadow:0 0 #0000}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--c-accent) 38%, transparent)}}.g-sliding-puzzle.is-won .sp-face{background:var(--sp-face-home);border-color:var(--sp-edge-home);color:var(--sp-ink-home);box-shadow:none}.g-sliding-puzzle.is-won .sp-hole-face{border-style:solid;border-color:var(--sp-edge-home)}.g-sliding-puzzle .sp-msg{min-height:1.6em;padding-inline:var(--sp-3);text-align:center;color:var(--c-text-dim);margin:0;font-weight:600}.g-sliding-puzzle .sp-msg.is-good{color:var(--c-good)}.g-sliding-puzzle.is-still .sp-tile,.g-sliding-puzzle.is-still .sp-hole,.g-sliding-puzzle.is-still .sp-face{transition:none}.g-sliding-puzzle.is-still .sp-tile:not(.is-locked):active .sp-face{transform:none}.g-sliding-puzzle.is-still .sp-tile.is-hint .sp-face{box-shadow:0 0 0 5px color-mix(in srgb, var(--c-accent) 38%, transparent);animation:none}@media (prefers-reduced-motion:reduce){.g-sliding-puzzle .sp-tile,.g-sliding-puzzle .sp-hole,.g-sliding-puzzle .sp-face{transition:none}.g-sliding-puzzle .sp-tile:not(.is-locked):active .sp-face{transform:none}.g-sliding-puzzle .sp-tile.is-hint .sp-face{box-shadow:0 0 0 5px color-mix(in srgb, var(--c-accent) 38%, transparent);animation:none}}@container (width<=340px){.g-sliding-puzzle .sp-tile,.g-sliding-puzzle .sp-hole{--sp-pad:2px}}