Live Hard Mode toggle until first guess, move How to Play/Dev Mode into Settings

[dhoepp]

Summary

• Hard Mode now tracks the live Settings toggle until the first guess is submitted, then locks for the rest of that game. Previously the value was snapshotted once at /game mount and stayed locked for the entire session (even across "New Game" clicks in Infinity mode) until a full page reload — so flipping the setting mid-session silently did nothing until you reloaded. State is set during render (not inside an effect) per the react-hooks/set-state-in-effect rule, avoiding an extra cascading re-render.
• Moved "How to Play" and the Dev Mode toggle into the Settings modal, out of the header. The header was cramped below ~430px wide with up to 6-7 icon buttons; it's now down to Home / Settings / dark-mode toggle / sign-in-out.

Why

• Hard Mode: the "next game only" behavior was confusing — toggling the setting felt like it should apply right away if you hadn't committed to anything yet in the current game.
• Header: mobile users under 430px were seeing squeezed/overlapping icons.

Reviewer notes

• GamePage.tsx: hardMode state is now nudged back to the live hardModeSetting during render whenever guesses.length === 0 (React's documented "adjust state when a value changes" pattern), then frozen once a guess exists. Re-unlocks automatically when handleNewGame resets guesses to [].
• SettingsModal.tsx gained a required onOpenHowToPlay prop; Header.tsx still owns the showHelp/showSettings open state and just passes the callback through.
• Dev Mode row in Settings is gated the same way the old header button was (!loading && configured && user && canUseDevMode).

Test plan

• tsc -b and eslint clean (pre-existing unrelated exhaustive-deps warning left as-is)
• Verified in browser: toggling Hard Mode on with 0 guesses shows the badge immediately (no reload)
• Verified in browser: after 1 guess, toggling Hard Mode off leaves the badge/enforcement in place for the rest of that game
• Verified in browser at 375px: header no longer cramped; Settings modal shows "How to Play" row and (when eligible) Dev Mode toggle; "How to Play" opens correctly from Settings

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v61-tier3-team-99	Ready	Preview, Comment	Jul 20, 2026 9:51pm

[github-actions]

🤖 AI Review (Gemini 2.5 Flash)

This pull request refactors the location of the Dev Mode toggle and the 'How to Play' button, moving them from the Header component into the SettingsModal. Additionally, it updates the Hard Mode game logic to dynamically apply the setting when no guesses have been made in the current game, and lock it in once a guess is submitted. The changes appear to be well-implemented according to the revised feature specifications.