diff --git a/packages/client/src/lib/Game.svelte b/packages/client/src/lib/Game.svelte
index ef982a3..265146d 100644
--- a/packages/client/src/lib/Game.svelte
+++ b/packages/client/src/lib/Game.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { game } from './stores/game.svelte.js';
   import Board from './Board.svelte';
   import ModeratorPanel from './ModeratorPanel.svelte';
@@ -11,9 +12,14 @@
   let armedSquare: Square | null = $state(null);
   let pendingPromotion: { from: Square; to: Square } | null = $state(null);
 
+  // Lifecycle effect: connect once when gameId becomes known, disconnect on
+  // teardown. untrack() prevents the connect/disconnect call from registering
+  // any state reads as effect dependencies — without it, reading state.ws
+  // inside connect() triggers Svelte's effect_update_depth_exceeded loop.
   $effect(() => {
-    game.connect(gameId);
-    return () => game.disconnect();
+    const id = gameId;
+    untrack(() => game.connect(id));
+    return () => untrack(() => game.disconnect());
   });
 
   // Once the server commits, our local arm clears (visual state slaved to server).