Drag on mobile

src/Game/Dice.css

@@ -1,7 +1,3 @@
 .dice {
-    position: absolute;
-    left: 20%;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
+    order: 6;
 }

src/Game/Game.css

@@ -4,32 +4,38 @@
     height: 100%;
     flex-wrap: wrap;
     touch-action: none;
+    > * {
+        display: flex;
+        align-items: center;
+        flex-basis: calc(100% / 15);
+        /* landscape layout (tablet / computer) */
+        @media (min-aspect-ratio: 1) {
+            flex-direction: column;
+            max-width: calc(100% / 15);
+        }
+
+        /* portrait layout (mobile) */
+        @media (max-aspect-ratio: 1) {
+            flex-direction: row;
+            max-height: calc(100% / 15);
+        }
+    }
+}
+
+.toolbar {
+    order: 1;
 }
 
 .bar {
     background: lightblue;
-    flex-basis: 4%;
-    display: flex;
-    /* landscape layout (tablet / computer) */
-    @media (min-aspect-ratio: 1) {
-        flex-direction: column;
-    }
-    /* portrait layout (mobile) */
-    @media (max-aspect-ratio: 1) {
-        flex-direction: row;
-    }
 }
 
 .home {
     background: lightblue;
-    flex-basis: 4%;
 }
 
 .point {
-    display: flex;
     position: relative;
-    align-items: center;
-    flex-basis: calc(100% / 14);
 
     &::before {
         content: ' ';
@@ -41,18 +47,24 @@
     }
 }
 
+/*
+order:
+[toolbar1] [leftboard2] [bar3] [rightboard4] [home5]
+[dice6] [leftboard7] [bar8] [rightboard9] [home10]
+*/
+
 :nth-child(1 of .bar) {
     order: 3;
     justify-content: flex-end;
 }
 :nth-child(2 of .bar) {
-    order: 7;
+    order: 8;
 }
 :nth-child(1 of .home) {
     order: 5;
 }
 :nth-child(2 of .home) {
-    order: 9;
+    order: 10;
     justify-content: flex-end;
 }
 :nth-child(-n+12 of .point) {
@@ -70,9 +82,6 @@
 
 /* landscape layout (tablet / computer) */
 @media (min-aspect-ratio: 1) {
-    .point {
-        flex-direction: column;
-    }
     .point:hover::before {
         border-top-color: blue !important;
     }
@@ -98,8 +107,6 @@
 
     /* bottom */
     :nth-child(n+13 of .point) {
-        display: flex;
-        flex-direction: column;
         justify-content: flex-end;
 
         &::before {

src/Game/index.tsx

@@ -91,6 +91,7 @@ export default function Game() {
     }, [move])
 
     return <div id="board">
+        <div id="toolbar"></div>
         <Dice onClick={roll} values={dice} />
 
         <div className="bar">

src/index.css

@@ -17,6 +17,7 @@ html,
 body,
 #root {
   height: 100%;
+  margin: 0;
 }
 
 @media (prefers-color-scheme: light) {