Add History API routing so browser/Android back navigates screens

- ui-store syncs screens to history (push on go/goGame, hash URLs like #/profile),
  back() = history.back(), initHistory anchors a home base + restores deep links
- page.tsx listens to popstate; resolveScreen() guards transient screens
  (game/room/chat/matchmaking fall back to home when their state is gone)
- ScreenHeader + ChatScreen back buttons use history back; chat cleans up on unmount

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/lib/ui-store.ts

@@ -15,23 +15,92 @@ export type Screen =
   | "chat"
   | "game"; // the table (used for both ai + online)
 
+const ALL_SCREENS: Screen[] = [
+  "home", "auth", "profile", "friends", "online",
+  "room", "matchmaking", "leaderboard", "shop", "chat", "game",
+];
+
+/** Screens safe to restore from a URL on a cold load (no transient state needed). */
+export const STATIC_SCREENS: Screen[] = [
+  "home", "auth", "profile", "friends", "online", "leaderboard", "shop",
+];
+
+export function screenFromHash(): Screen {
+  if (typeof window === "undefined") return "home";
+  const h = window.location.hash.replace(/^#\/?/, "");
+  return (ALL_SCREENS.includes(h as Screen) ? (h as Screen) : "home");
+}
+
+function urlFor(screen: Screen): string {
+  if (typeof window === "undefined") return "/";
+  const base = window.location.pathname + window.location.search;
+  return screen === "home" ? base : `${base}#/${screen}`;
+}
+
+function pushHistory(screen: Screen, replace = false) {
+  if (typeof window === "undefined") return;
+  const state = { screen };
+  if (replace) window.history.replaceState(state, "", urlFor(screen));
+  else window.history.pushState(state, "", urlFor(screen));
+}
+
 interface UIStore {
   screen: Screen;
   /** screen to return to from the game table */
   returnTo: Screen;
   dailyModalOpen: boolean;
+
   go: (screen: Screen) => void;
   goGame: (returnTo?: Screen) => void;
+  /** Browser/hardware back. */
+  back: (fallback?: Screen) => void;
+  /** Sync from a popstate event (does not touch history). */
+  syncFromPop: (screen: Screen) => void;
+  /** Establish a home base entry + restore a deep-linked screen on load. */
+  initHistory: () => void;
+
   openDaily: () => void;
   closeDaily: () => void;
 }
 
-export const useUIStore = create<UIStore>((set) => ({
+export const useUIStore = create<UIStore>((set, get) => ({
   screen: "home",
   returnTo: "home",
   dailyModalOpen: false,
-  go: (screen) => set({ screen }),
-  goGame: (returnTo = "home") => set({ screen: "game", returnTo }),
+
+  go: (screen) => {
+    if (get().screen === screen) return;
+    pushHistory(screen);
+    set({ screen });
+  },
+
+  goGame: (returnTo = "home") => {
+    pushHistory("game");
+    set({ screen: "game", returnTo });
+  },
+
+  back: (fallback) => {
+    if (typeof window !== "undefined") {
+      window.history.back();
+      return;
+    }
+    if (fallback) set({ screen: fallback });
+  },
+
+  syncFromPop: (screen) => set({ screen }),
+
+  initHistory: () => {
+    // Always anchor a "home" base entry so back() has somewhere to land.
+    pushHistory("home", true);
+    const target = screenFromHash();
+    if (target !== "home" && STATIC_SCREENS.includes(target)) {
+      pushHistory(target);
+      set({ screen: target });
+    } else {
+      set({ screen: "home" });
+    }
+  },
+
   openDaily: () => set({ dailyModalOpen: true }),
   closeDaily: () => set({ dailyModalOpen: false }),
 }));