.pieces{display:block;height:var(--diameter-board);left:0;pointer-events:none;position:absolute;top:0;width:var(--diameter-board);z-index:99}.pieces .piece.white{--pos-row:-1}.pieces .piece.black{--pos-row:8}.pieces .piece{--pos-col:3.5;--scale:0;--transition-delay:0ms;--transition-duration:200ms;bottom:0;display:block;height:var(--diameter-tile);position:absolute;left:0;transform:translate(calc(var(--pos-col) * 100%),calc(var(--pos-row) * -100%)) translateZ(0);transform-origin:50% 50%;transition:all var(--transition-duration) var(--transition-ease) var(--transition-delay);width:var(--diameter-tile)}.perspective-black .pieces .piece{transform:translate(calc((7 - var(--pos-col)) * 100%),calc((7 - var(--pos-row)) * -100%)) translateZ(0)}.pieces .piece svg{display:block;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%) translateZ(0) scale(var(--scale));transform-origin:50% 50%;transition:transform var(--transition-duration) var(--transition-ease),fill var(--transition-duration) var(--transition-ease),opacity var(--transition-duration) var(--transition-ease)}.turn-white .pieces .piece:not(.highlight-capture) svg.black,.turn-black .pieces .piece:not(.highlight-capture) svg.white,.turn-black .pieces .piece:not(.can-move):not(.can-capture) svg.black,.turn-white .pieces .piece:not(.can-move):not(.can-capture) svg.white{--stroke:transparent;opacity:.8}@-webkit-keyframes wobble{0%,50%,100%{transform:translate(-50%,-50%) translateZ(0) scale(1) rotate(0deg)}25%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(-2deg)}75%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(2deg)}}@keyframes wobble{0%,50%,100%{transform:translate(-50%,-50%) translateZ(0) scale(1) rotate(0deg)}25%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(-2deg)}75%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(2deg)}}.pieces .piece.highlight-active svg{-webkit-animation:wobble 500ms linear infinite;animation:wobble 500ms linear infinite;--stroke:var(--color-success)}.pieces .piece.highlight-capture svg{--stroke:var(--color-danger)}.piece svg{--svg-di:calc(var(--diameter-tile) * .666);display:block;font-weight:bold;height:var(--svg-di);left:50%;line-height:var(--svg-di);position:absolute;stroke-linejoin:round;text-align:center;top:50%;transform:translate(-50%,-50%);width:var(--svg-di)}