Fix move animation clipping beneath board border

src/Board/Board.css

@@ -5,6 +5,7 @@
     --secondary-hover: rgb(128, 128, 211);
     --valid: greenyellow;
     --highlight: red;
+    --board-border: 5vmin;
     user-select: none;
     position: relative;
     display: grid;
@@ -13,7 +14,7 @@
     height: 100%;
     width: 100%;
     touch-action: none;
-    border: 5vmin solid #aaa;
+    border: var(--board-border) solid #aaa;
     transition: border-color 1s;
     box-sizing: border-box;
     .selected {

src/Board/MoveAnimation.css

@@ -1,6 +1,6 @@
 .move-animation-overlay {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--board-border, 5vmin));
     pointer-events: none;
     z-index: 10;
     overflow: hidden;

src/Board/MoveAnimation.tsx

@@ -37,9 +37,8 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) {
         }
 
         const boardRect = board.getBoundingClientRect();
-        const boardStyle = getComputedStyle(board);
-        const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth);
-        const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth);
+        const overlayLeft = boardRect.left;
+        const overlayTop = boardRect.top;
 
         const points = board.querySelectorAll<HTMLElement>('.point');
         const bars = board.querySelectorAll<HTMLElement>('.bar');

src/Dialogues/Dialogues.css

@@ -1,5 +1,5 @@
 dialog {
-  z-index: 1;
+  z-index: 100;
   background: var(--dialog-background-color);
   color: var(--primary-color);
   backdrop-filter: blur(10px);

src/index.tsx

@@ -459,7 +459,6 @@ export function App() {
           pulsate={isMyTurn && game.status === Status.Rolling}
           undo={!!match && isMyTurn && usedDice.length > 0 && usedDice.length < game.dice.length}
         />
-        <MoveAnimation pairs={movePairs} boardRef={boardRef} />
         <div className={classes('bar', { 
           selected: selected === -1 && game.color === Color.White,
           valid: game.color === Color.White && game.prison?.white > 0 && sources.has(-1)
@@ -537,6 +536,7 @@ export function App() {
             moved={lastMove.moved[index]}
           />
         )}
+        <MoveAnimation pairs={movePairs} boardRef={boardRef} />
       </div>
     </Dialogues>
   );