fix: use useLayoutEffect for test event listener to prevent Cypress race condition

Root cause: useEffect registers the test:targetClick listener after the browser
paints, creating a race where Cypress finds the target-sphere DOM element and
dispatches events before the listener is ready.

Fix: switch to useLayoutEffect (runs before paint) so the listener is always
registered by the time any Cypress test can dispatch events.

Also add cy.wait(100) after event dispatch in screenshots.cy.ts, consistent
with the pattern in gameplay.cy.ts, to give React time to process state updates.

Agent-Logs-Url: https://github.com/Hack23/game/sessions/cc45c339-eb55-475b-8b72-29b9fab0ce47

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Author: Copilot

cypress/e2e/screenshots.cy.ts

@@ -60,7 +60,10 @@ describe("Game Visual Documentation", () => {
       win.dispatchEvent(new CustomEvent('test:targetClick'));
       win.dispatchEvent(new CustomEvent('test:targetClick'));
     });
-    
+
+    // Wait for React to process the state updates (consistent with gameplay.cy.ts pattern)
+    cy.wait(100);
+
     // Verify score updated
     cy.get("[data-testid=score-value]").should("not.contain", "0");
 

src/App.tsx

@@ -1,5 +1,5 @@
 import { Canvas } from "@react-three/fiber";
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from "react";
 import type { JSX } from "react";
 import { useGameState } from "./hooks/useGameState";
 import { useAudioManager } from "./hooks/useAudioManager";
@@ -96,7 +96,10 @@ function App(): JSX.Element {
   const gameStateRef = useRef(gameState);
   gameStateRef.current = gameState;
 
-  useEffect(() => {
+  // useLayoutEffect (not useEffect) ensures the listener is registered synchronously
+  // before the browser paints, preventing a race where Cypress finds the target-sphere
+  // in the DOM before the test event listener is ready to receive events.
+  useLayoutEffect(() => {
     const handleTestTargetClick = (): void => {
       const gs = gameStateRef.current;
       if (gs.isPlaying && gs.timeLeft > 0 && gs.targets.length > 0) {