diff --git a/src/Board/Board.css b/src/Board/Board.css
index 72bc431..a2073a6 100644
--- a/src/Board/Board.css
+++ b/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 {
diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css
index a289a68..31ed367 100644
--- a/src/Board/MoveAnimation.css
+++ b/src/Board/MoveAnimation.css
@@ -1,6 +1,8 @@
 .move-animation-overlay {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--board-border, 5vmin));
+    width: auto;
+    height: auto;
     pointer-events: none;
     z-index: 10;
     overflow: hidden;
diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx
index f4f84e4..3167883 100644
--- a/src/Board/MoveAnimation.tsx
+++ b/src/Board/MoveAnimation.tsx
@@ -44,7 +44,7 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) {
         const points = board.querySelectorAll<HTMLElement>('.point');
         const bars = board.querySelectorAll<HTMLElement>('.bar');
 
-        const samplePiece = board.querySelector<HTMLElement>('.piece:not(.ghost):not(.moved) img');
+        const samplePiece = board.querySelector<HTMLElement>('.point .piece:not(.ghost):not(.moved) img');
         const pieceSize = samplePiece
             ? samplePiece.getBoundingClientRect().width
             : boardRect.width / 17;
diff --git a/src/Dialogues/Dialogues.css b/src/Dialogues/Dialogues.css
index 5485cdd..314d8f0 100644
--- a/src/Dialogues/Dialogues.css
+++ b/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);
diff --git a/src/index.tsx b/src/index.tsx
index 32b10a8..e3350b7 100644
--- a/src/index.tsx
+++ b/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>
   );