:root{--dimBoard:600px;--pieceRatio:0.9;--square-size:calc(var(--dimBoard) / 8);--blackSquare:#b58863;--whiteSquare:#f0d9b5;--highlightSquare:#ff0;--selectedSquareWhite:#ababaa;--selectedSquareBlack:#ababaa;--movedSquareBlack:#e9e981;--movedSquareWhite:#f1f1a0;--choiceSquare:#fff;--coverSquare:#000;--hintColor:#ababaa}.board{display:flex;flex-wrap:wrap;width:var(--dimBoard);height:var(--dimBoard);transform:translateZ(0);will-change:auto}.board.flipped{flex-direction:row-reverse;flex-wrap:wrap-reverse}.square{width:var(--square-size);height:var(--square-size);display:flex;justify-content:center;align-items:center}.piece{width:calc(var(--square-size) * var(--pieceRatio));height:calc(var(--square-size) * var(--pieceRatio));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform-origin:center center;backface-visibility:hidden}.piece.dragging{will-change:transform}.choicable{z-index:50}.hint{background:var(--hintColor);width:calc(calc(var(--dimBoard) / 8) / 3.5);height:calc(calc(var(--dimBoard) / 8) / 3.5);position:absolute;z-index:5;border-radius:50%;opacity:.8}.catchable{width:calc(calc(var(--dimBoard) / 8) * .9);height:calc(calc(var(--dimBoard) / 8) * .9)}.blackSquare{background:var(--blackSquare)}.whiteSquare{background:var(--whiteSquare)}.selectedSquareWhite{background:var(--selectedSquareWhite)}.selectedSquareBlack{background:var(--selectedSquareBlack)}.movedSquareBlack{background:var(--movedSquareBlack)}.movedSquareWhite{background:var(--movedSquareWhite)}.choice{background:var(--choiceSquare);z-index:30}.cover{background:var(--coverSquare);opacity:.5;z-index:25}.highlighted{box-shadow:inset 0 0 10px var(--highlightSquare)}.piece{position:absolute;cursor:pointer;transition:opacity var(--fade-time,.15s) var(--fade-animation,ease);z-index:10;will-change:auto}.piece.dragging{z-index:100;transition:none!important;will-change:left,top,transform;width:calc(var(--square-size) * var(--pieceRatio))!important;height:calc(var(--square-size) * var(--pieceRatio))!important;box-sizing:border-box}.piece.fading{opacity:0;transition:opacity var(--fade-time,.15s) var(--fade-animation,ease)}.piece.moving{transition:transform var(--move-time,.2s) var(--move-animation,ease)}.piece.replacing{transition:none!important;opacity:1;transform:none}.piece.transforming{transition:none!important;transform-origin:center center;will-change:transform,opacity;z-index:50}.piece.transform-complete{animation:transformBounce .4s ease-out}@keyframes transformBounce{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.piece img{width:100%;height:100%;object-fit:contain;pointer-events:none;image-rendering:crisp-edges}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-5px,0)}70%{transform:translate3d(0,-3px,0)}90%{transform:translate3d(0,-1px,0)}}.fade-in{animation:fadeIn var(--fade-time,.15s) var(--fade-animation,ease)}.fade-out{animation:fadeOut var(--fade-time,.15s) var(--fade-animation,ease)}.slide-in{animation:slideIn var(--fade-time,.15s) var(--fade-animation,ease)}.bounce{animation:bounce 1s ease}