.props-ui .board{--gap: clamp(4px, 1.1vw, 7px);--inset: clamp(5px, 1.2vw, 8px);--tile: calc((100cqi - 2 * var(--inset) - (var(--n) - 1) * var(--gap)) / var(--n));container-type:inline-size;position:relative;aspect-ratio:1;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.props-ui .board:focus-visible{outline-offset:6px}.props-ui .well{position:absolute;inset:0;border-radius:10px;background:radial-gradient(120% 120% at 50% 0%,#3a2616,#1f140b);box-shadow:inset 0 4px 10px #0009,inset 0 0 0 2px #0006}.props-ui .tile{--x: calc(var(--inset) + var(--c) * (var(--tile) + var(--gap)));--y: calc(var(--inset) + var(--r) * (var(--tile) + var(--gap)));position:absolute;left:0;top:0;width:var(--tile);height:var(--tile);display:grid;place-items:center;border-radius:clamp(5px,1.4cqi,9px);overflow:hidden;transform:translate3d(calc(var(--x) + var(--dx, 0px)),calc(var(--y) + var(--dy, 0px)),0);transition:transform .15s cubic-bezier(.3,1.3,.55,1);background:var(--wood-face);background-position:0 0,calc(var(--v, 1) * 41px) calc(var(--v, 1) * 67px),0 0;box-shadow:var(--wood-raise);cursor:grab;will-change:transform}.props-ui .tile.dragging{transition:none;cursor:grabbing}.props-ui .board.scrambling .tile{transition:transform .46s cubic-bezier(.55,0,.2,1) var(--delay, 0ms)}.props-ui .tile-num{font-family:var(--font-display);font-weight:800;font-size:calc(var(--tile) * .52);line-height:1;color:var(--char);text-shadow:0 1.5px 0 rgba(255,238,206,.6),0 -1px 0 rgba(60,30,10,.35);letter-spacing:.01em;pointer-events:none}.props-ui .tile-art{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}.props-ui[data-art=picture] .tile-art{display:block}.props-ui[data-art=picture] .tile{box-shadow:inset 0 0 0 1px #fff4dc40,0 4px #2b1b10,0 7px 10px #00000073}.props-ui[data-art=picture] .tile-num{position:absolute;top:6%;left:8%;z-index:1;font-size:calc(var(--tile) * .2);color:#fff4d6;text-shadow:0 1px 2px rgba(0,0,0,.8);display:none}.props-ui[data-art=picture][data-mode=practice] .tile-num{display:block}.props-ui .tile-final{opacity:0;transform:translate3d(var(--x),calc(var(--y) - 30%),0) scale(1.08);transition:opacity .24s ease,transform .38s cubic-bezier(.3,1.4,.5,1);pointer-events:none}.props-ui .tile-final .tile-num{font-size:0}.props-ui .tile-final .tile-num:before{content:"";display:block;width:calc(var(--tile) * .22);height:calc(var(--tile) * .5);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Crect x='10' y='20' width='4' height='28' rx='1' fill='%233a2213'/%3E%3Cpath d='M6.5 20h11l-1.6-5H8.1z' fill='%233a2213'/%3E%3Cpath d='M12 15C6 11 7 5 10.5 1c0 4 2 5 3 6 .5-2 1.5-3.5 2.5-4.5C18 8 17 12.5 12 15z' fill='%23b4441c'/%3E%3C/svg%3E") center / contain no-repeat}.props-ui.is-solved .tile-final{opacity:1;transform:translate3d(var(--x),var(--y),0);transition-delay:.12s}.props-ui[data-mode=practice] .tile.home:after,.props-ui[data-mode=lesson] .tile.goal.home:after{content:"";position:absolute;top:9%;right:9%;width:9%;aspect-ratio:1;border-radius:50%;background:#3a2213b3;box-shadow:0 1px #ffeece99}.props-ui[data-mode=practice][data-art=picture] .tile.home:after{background:#fff4d6;box-shadow:0 0 0 2px #00000080}.props-ui[data-mode=lesson] .tile:not(.goal){filter:saturate(.5) brightness(.72)}.props-ui .board.show-goal .tile{transform:translate3d(calc(var(--inset) + var(--hc) * (var(--tile) + var(--gap))),calc(var(--inset) + var(--hr) * (var(--tile) + var(--gap))),0);transition:transform .26s cubic-bezier(.4,0,.2,1)}.props-ui .board.show-goal:after{content:"Finished board";position:absolute;left:50%;bottom:calc(-1 * var(--pad, 12px) - 2.2em);translate:-50% 0;font-size:var(--step--1);color:var(--foam);white-space:nowrap}.props-ui .tile.hinted{animation:sp-hint-pulse .9s ease-in-out 2;z-index:1}.props-ui .tile.hinted:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 4px var(--torch),0 0 22px #f4b740bf}@keyframes sp-hint-pulse{50%{filter:brightness(1.15)}}.props-ui .tile.bump{animation:sp-bump .16s ease}@keyframes sp-bump{25%{translate:-3px 0}75%{translate:3px 0}}.props-ui .board.edge-bump[data-bump=up]{animation:sp-nudge-up .16s ease}.props-ui .board.edge-bump[data-bump=down]{animation:sp-nudge-down .16s ease}.props-ui .board.edge-bump[data-bump=left]{animation:sp-nudge-left .16s ease}.props-ui .board.edge-bump[data-bump=right]{animation:sp-nudge-right .16s ease}@keyframes sp-nudge-up{50%{translate:0 -3px}}@keyframes sp-nudge-down{50%{translate:0 3px}}@keyframes sp-nudge-left{50%{translate:-3px 0}}@keyframes sp-nudge-right{50%{translate:3px 0}}.props-ui.is-solved .tile:not(.tile-final){animation:sp-solve-wave .52s ease calc((var(--c) + var(--r)) * 55ms) 1}@keyframes sp-solve-wave{40%{filter:brightness(1.25) saturate(1.1);scale:1.05}}.props-ui[data-art=picture].is-solved .board{--gap: 0px}.props-ui[data-art=picture].is-solved .tile{border-radius:0;box-shadow:none;transition:transform .4s ease .3s,border-radius .4s ease .3s}@media(prefers-reduced-motion:reduce){.props-ui .tile,.props-ui .board.scrambling .tile{transition:none}}