Mobile Support: Responsive UI & Touch Controls

src/App.css

@@ -220,3 +220,44 @@ html, body, #root {
   border-radius: 2px;
   transition: width 0.05s linear;
 }
+
+/* Mobile responsive: full-screen overlays */
+@media (max-width: 768px) {
+  .overlay-box {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    padding: 24px 20px;
+    justify-content: center;
+  }
+
+  .menu-title {
+    font-size: 48px;
+    letter-spacing: 16px;
+  }
+
+  .menu-subtitle {
+    font-size: 13px;
+    letter-spacing: 6px;
+    margin-bottom: 32px;
+  }
+
+  .menu-control {
+    font-size: 11px;
+    letter-spacing: 2px;
+  }
+
+  .gameover-score {
+    font-size: 48px;
+  }
+
+  .gameover-label {
+    font-size: 28px;
+    letter-spacing: 8px;
+  }
+}
+
+/* Prevent default touch behaviors on the game canvas */
+.game-wrapper {
+  touch-action: none;
+}

src/DitherGame.tsx

@@ -426,24 +426,37 @@ export default function DitherGame() {
 
     const onPointerMove = (e: PointerEvent) => {
       const st = stateRef.current;
-      if (!st || e.pointerType !== "mouse") return;
+      if (!st) return;
       const { x, y } = getLocalPos(e);
       st.mouseX = x;
       st.mouseY = y;
-      st.mouseActive = true;
+      // Mouse always sets active on move; touch is managed by down/up
+      if (e.pointerType === "mouse") {
+        st.mouseActive = true;
+      }
       if (!raf) raf = requestAnimationFrame(tick);
     };
 
     const onPointerLeave = (e: PointerEvent) => {
       const st = stateRef.current;
-      if (st && e.pointerType === "mouse") {
+      if (st) {
         st.mouseActive = false;
         if (!raf) raf = requestAnimationFrame(tick);
       }
     };
 
     const onPointerDown = (e: PointerEvent) => {
+      const st = stateRef.current;
       const game = gameRef.current;
+
+      // Touch: activate tracking and update position on finger down
+      if (e.pointerType === "touch" && st) {
+        const { x, y } = getLocalPos(e);
+        st.mouseX = x;
+        st.mouseY = y;
+        st.mouseActive = true;
+      }
+
       if (game.phase === "playing") {
         game.charging = true;
         game.chargeStart = performance.now();
@@ -459,6 +472,11 @@ export default function DitherGame() {
       const game = gameRef.current;
       const { x, y } = getLocalPos(e);
 
+      // Touch: deactivate tracking on finger lift (pause, like mouse leaving)
+      if (e.pointerType === "touch") {
+        st.mouseActive = false;
+      }
+
       if (game.phase === "menu" && freshClickRef.current) {
         freshClickRef.current = false;
         gameRef.current = createGameState();