.g-klotski{--c:80px;margin:0 auto;padding:4px 0 2px;user-select:none;-webkit-user-select:none;max-width:100%;touch-action:none}.g-klotski .kl-field{position:relative;margin:0 2px;background:var(--surface-2);border:solid #7a6a58;border-width:6px 6px 0;border-radius:4px 4px 0 0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--c)var(--c)}.g-klotski .kl-floor{display:grid;grid-template-columns:calc(var(--c) + 6px)calc(var(--c) * 2)calc(var(--c) + 6px);margin:0 2px;height:6px}.g-klotski .kl-wall{background:#7a6a58;height:6px}.g-klotski .kl-wall:first-child{border-radius:0 0 0 4px}.g-klotski .kl-wall:last-child{border-radius:0 0 4px 0}.g-klotski .kl-gap{position:relative;text-align:center}.g-klotski .kl-gap em{position:absolute;left:0;right:0;top:10px;font-style:normal;font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}.g-klotski{padding-bottom:28px}.g-klotski .kl-piece{position:absolute;box-sizing:border-box;border-radius:8px;border:3px solid transparent;background-clip:padding-box;cursor:grab;touch-action:none;transition:left .12s ease,top .12s ease,opacity .5s ease,box-shadow .12s;display:grid;place-items:center;outline:none;-webkit-tap-highlight-color:transparent}.g-klotski .kl-piece::before{content:'';position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),inset 0 3px rgba(255,255,255,.28);background:var(--bg-c)}.g-klotski .kl-B{--bg-c:linear-gradient(145deg, #f6cf62, #d9a21f);z-index:2}.g-klotski .kl-V{--bg-c:linear-gradient(145deg, #3d9c82, #1f6f5c)}.g-klotski .kl-H{--bg-c:linear-gradient(145deg, #5b8fd0, #3a64a3)}.g-klotski .kl-S{--bg-c:linear-gradient(145deg, #d98b66, #b5603c)}.g-klotski .kl-pip{position:relative;z-index:1;width:28%;aspect-ratio:1;max-width:26px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}.g-klotski .kl-B .kl-pip{width:24%;max-width:40px;background:rgba(255,255,255,.45)}.g-klotski .kl-S .kl-pip{width:36%}.g-klotski .kl-piece:hover{filter:brightness(1.06)}.g-klotski .kl-piece:focus-visible{box-shadow:0 0 0 3px var(--focus);z-index:5}.g-klotski .kl-piece.is-selected{box-shadow:0 0 0 3px var(--ink),0 6px 12px rgba(0,0,0,.3);z-index:5}.g-klotski .kl-piece.is-selected:focus-visible{box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--focus)}.g-klotski .kl-piece.is-drag{transition:none;z-index:8;cursor:grabbing;box-shadow:0 8px 14px rgba(0,0,0,.35)}.g-klotski .kl-piece.is-out{opacity:0;pointer-events:none;transition:top .55s ease-in,opacity .55s ease-in;z-index:1}.g-klotski .kl-piece.is-hint{box-shadow:0 0 0 3px var(--gold),0 0 14px 2px rgba(242,193,78,.8);animation:kl-pulse 1s ease-in-out 3;z-index:6}.g-klotski .kl-piece.is-hint::after{content:'';position:absolute;z-index:2;font-size:calc(var(--c) * .5);font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1}.g-klotski .kl-piece[data-dir=up]::after{content:'↑'}.g-klotski .kl-piece[data-dir=down]::after{content:'↓'}.g-klotski .kl-piece[data-dir=left]::after{content:'←'}.g-klotski .kl-piece[data-dir=right]::after{content:'→'}.g-klotski .kl-ghost{position:absolute;box-sizing:border-box;border:3px dashed var(--gold);border-radius:8px;background:rgba(242,193,78,.18);pointer-events:none;z-index:4;transition:left .12s,top .12s}.g-klotski .kl-ghost[hidden]{display:none}@keyframes kl-pulse{50%{filter:brightness(1.25)}}@media(prefers-reduced-motion:reduce){.g-klotski .kl-piece,.g-klotski .kl-piece.is-out{transition:none}.g-klotski .kl-piece.is-hint{animation:none}}