.board-wrap{position:relative;margin:0 auto;width:min(100% - 16px,450px)}
.board{position:relative;aspect-ratio:1;width:100%;overflow:hidden;border:3px solid #cfd9e9;border-radius:12px;background-color:#eef3fa;background-image:linear-gradient(to right,#dce5f2 1px,transparent 1px),linear-gradient(to bottom,#dce5f2 1px,transparent 1px);background-size:16.6666667% 16.6666667%;touch-action:none}
.piece{position:absolute;border:0;border-radius:9px;background:#90a7c4;box-shadow:inset 0 -4px 0 #536e9230,0 2px 3px #4b627818;cursor:grab;display:grid;place-items:center;user-select:none;touch-action:none;padding:0;transition:box-shadow .14s,background .14s}
.piece:active{cursor:grabbing}.piece:hover{filter:brightness(1.04)}.piece.selected{box-shadow:inset 0 -4px 0 #536e922d,0 0 0 2px #3c6dce}
.piece.target{background:#f4a750;box-shadow:inset 0 -4px 0 #c0772870,0 1px 3px #a867302b}.piece.target.selected{box-shadow:inset 0 -4px 0 #c0772870,0 0 0 2px #ed8427}
.piece:not(.target):nth-child(3n){background:#a4b6d1}.piece:not(.target):nth-child(4n){background:#8ab8b1}.piece:not(.target):nth-child(5n){background:#ada9cc}
.piece .piece-grip{border-radius:8px;background:#fff6;width:20%;height:4px;transform:rotate(90deg);pointer-events:none}.piece.h .piece-grip{transform:none}
.piece.target:after{content:'➜';font-size:20px;color:#754414;pointer-events:none}
.exit{position:absolute;right:-13px;top:calc(41.6666667%);width:24px;height:16.6666667%;display:grid;place-items:center;border-radius:0 9px 9px 0;background:#edaa5c;color:#fff;font-weight:900;font-size:17px;pointer-events:none}
@media(max-width:420px){.piece{border-radius:7px}.piece.target:after{font-size:17px}.exit{right:-10px;width:19px}}