/* Real tile swaps, with a quiet autonomous demonstration until the first move. */
.zest-playable{cursor:default}
.zest-playable .art-word{font-size:clamp(56px,6vw,90px);pointer-events:none}
.zest-playable .playable-board{height:62%;width:auto;aspect-ratio:1;top:54%;left:50%;display:block;transform:translate(-50%,-50%);translate:none;filter:none;padding:0;border:5px solid #2d323a;border-radius:15px;isolation:isolate;touch-action:pan-y;box-shadow:0 24px 45px #0004}
.playable-board .puzzle-tile{position:absolute;top:0;left:0;width:33.333333%;height:33.333333%;background-image:url('assets/zest-dish.webp');background-size:300% 300%;background-position:calc(var(--piece-x)*50%) calc(var(--piece-y)*50%);border:3px solid #2d323a;border-radius:7px;padding:0;transform:translate(calc(var(--x)*100%),calc(var(--y)*100%));transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .2s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.puzzle-tile>span{position:absolute;top:6px;left:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#17191bbd;font:600 10px/1 system-ui;opacity:0;transition:opacity .15s}
.puzzle-tile:hover>span,.puzzle-tile:focus-visible>span,.puzzle-tile.is-selected>span{opacity:1}
.playable-board .puzzle-tile:hover{box-shadow:inset 0 0 0 2px #fff9;z-index:2}
.playable-board .puzzle-tile.is-selected{box-shadow:inset 0 0 0 4px #ffcf71,0 4px 18px #0006;z-index:3}
.playable-board .puzzle-tile:focus-visible{outline:3px solid #fff2cf;outline-offset:-6px;z-index:4}
.puzzle-tools{position:absolute;bottom:20px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:8;color:#f0ead6}
.puzzle-tools p{margin:0;font-size:11px;line-height:1.55;letter-spacing:.01em}
.puzzle-tools .puzzle-status{font-size:9px;color:#d2c6bd;margin-top:3px}
.puzzle-tools .puzzle-shuffle{min-height:44px;padding:10px 15px;border:1px solid #ffffff55;border-radius:24px;background:#ffffff0e;color:#fff5df;font-size:11px;white-space:nowrap}
.puzzle-shuffle:hover{background:#ffffff22}.puzzle-shuffle:focus-visible{outline:3px solid #ffcf71;outline-offset:3px}
.puzzle-solved .playable-board{border-color:#8aab8b}.puzzle-solved .puzzle-status{color:#c3e2bb}
.playable-board .puzzle-tile{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.playable-board .puzzle-tile.is-dragging{translate:var(--drag-x,0px) var(--drag-y,0px);transition:none;z-index:10;cursor:grabbing;box-shadow:0 12px 25px #0007,inset 0 0 0 2px #fff8;opacity:.95}
.puzzle-tile.is-dragging>span{opacity:1}
.playable-board .puzzle-tile.is-drop-target{box-shadow:inset 0 0 0 4px #ffcf71;z-index:3}
@media(max-width:600px){.zest-playable .art-word{font-size:64px;top:23px}.zest-playable .playable-board{height:60%;top:52%}.puzzle-tools{bottom:16px;left:18px;right:18px;gap:8px}.puzzle-tools p{font-size:10px}.puzzle-tools .puzzle-status{font-size:8px;max-width:190px}.puzzle-tools .puzzle-shuffle{padding:10px 13px;font-size:10px}.playable-board .puzzle-tile{border-width:2px}}
@media(prefers-reduced-motion:reduce){.playable-board .puzzle-tile{transition:none}}