regal-tic

As a frontend developer, implement the LandingHero section using `@react-three/fiber` Canvas with a 3D 3×3×3 tic-tac-toe cube grid. Build `BoardCell` with `useRef`/`useFrame` for emissive lerp animation between `#1E90FF` (base) and `#63B8FF` (hover) using `meshStandardMaterial` with opacity 0.65. Build `GridLines` using `useMemo` to generate `THREE.BufferGeometry` line segments along X/Y/Z axes with `LineBasicMaterial` at 0.25 opacity. Build `XMark` and `OMark` geometry components using Three.js line materials. Implement mouse-follow board rotation via pointer events on the Canvas. Wrap the 3D canvas with framer-motion hero text/CTA overlay using `AnimatePresence`. Imports include `useState`, `useRef`, `useMemo`, `useCallback` from React, plus `THREE` directly.

As a frontend developer, implement the LandingBoardPreview section as a fully interactive SVG-based tic-tac-toe demo board. Use constants `CELL_SIZE=100`, `GAP=12`, `BOARD_SIZE=336`, `CORNER_RADIUS=12` and `WIN_COMBOS` array for win detection via `checkWinner`. Implement `getCellPos`, `getRelatedCells`, and `getWinLineCoords` helpers. Build `XMark` with two animated `motion.line` elements using `xPathVariants` (spring stiffness 200, damping 15). Build `OMark` with `motion.circle` using `oPathVariants` (spring stiffness 180, damping 14). Add `glowVariants` (spring scale 0→1, opacity 0→0.55), `cascadeGlowVariants` (custom delay per cell index with opacity/scale keyframes), and `winLineVariants` (pathLength 0→1, duration 0.6). Implement `cellHoverVariants` for hover glow overlay at opacity 0.35. Use `AnimatePresence` for enter/exit of X/O marks. State includes current board cells array, current player turn, and winner/line.

As a frontend developer, implement the LandingFeatures section displaying three feature cards from the `features` array: AI Opponent (`lf-icon-wrap--ai`), Multiplayer Gameplay (`lf-icon-wrap--multi`), and Progress Tracking (`lf-icon-wrap--stats`). Each card has a title, description, and an array of `stats` badges with variant classes (`lf-stat-badge--blue`, `--green`, `--gold`, `--red`). Build custom SVG icon components: `AIIcon`, `MultiplayerIcon`, and `StatsIcon`, mapped via `iconMap`. Use `useState` for active/hovered card state, `useRef` and `useCallback`. Animate card entry with framer-motion `AnimatePresence` and stagger transitions. Implement hover interaction that expands or highlights the active feature card.

As a frontend developer, implement the LandingModeSelection section with two-level selection: game mode (AI vs Players) and contextual sub-options. Mode cards use `AIIcon` and `PlayersIcon` SVG components. AI mode reveals `DIFFICULTIES` array (Easy/Medium/Hard with emoji 🌱⚡🔥) as selectable chips; multiplayer mode reveals `INVITE_OPTIONS` (local/link with `ms-invite-icon--local`/`--link`). `CheckIcon` SVG marks selected sub-options. `GridDecoSVG` renders a decorative 160×160 tic-tac-toe grid with X/O marks using `var(--primary)`. `generateParticles(count)` generates radial burst particles with angle/dist/scale/delay per particle, animated on mode selection via framer-motion `AnimatePresence`. Use `useState` for `selectedMode` and `selectedSub`, `useCallback` for handlers. Section is ~16K chars with extensive animation variants.

As a frontend developer, implement the LandingGameplayFlow section as a 6-step animated walkthrough using the `STEPS` array (Select Mode, Choose Difficulty, Make Your Move, AI Responds, View Result, Update Score). Each step has `num`, `title`, `desc`, `nextPreview`, and `icon` fields. Build step-specific SVG icon components: `ModeIcon`, `DifficultyIcon`, `MoveIcon`, `AiIcon`, `ResultIcon`, `ScoreIcon`. Use `useInView` from framer-motion to trigger step entry animations on scroll, with `useRef` on the section. Implement `useState` for `activeStep` and `useEffect`/`useCallback` for auto-advance or click-driven step progression. `AnimatePresence` handles step transition animations. The `nextPreview` string is shown as a connector label between steps. Steps lay out as a vertical or horizontal timeline.

As a frontend developer, implement the LandingAIHighlight section showcasing AI difficulty tiers and feature callouts. Render three difficulty tabs from `DIFFICULTIES` array (Easy/🟢, Medium/🟡, Hard/🔴) with `useState` for `activeDifficulty`, switching description text via `AnimatePresence`. Build four feature pill components from `FEATURES` array (Adaptive Strategy, Instant Response, Fair Play Guarantee, Score Tracking) each with icon and sublabel. Implement `BrainIcon`, `ZapIcon`, `ShieldIcon`, and `TrophyIcon` SVG components mapped by `icon` field. Build `AIBrainLargeIcon` with a 48×48 dashed-circle SVG as the hero visual. Integrate `gsap` (imported) for entrance or pulse animations on the large brain icon or feature pills. Use `useState`, `useEffect`, `useRef`, `useCallback` for GSAP timeline management and cleanup.

As a frontend developer, implement the LandingScoreboard section with animated stat counters and an SVG ring progress indicator. `STATS` array defines wins (target 47), losses (18), draws (12) with color classes `lsb-stat-value--wins/losses/draws`. `WIN_RATE_TARGET=61`, `RING_RADIUS=34`, `RING_CIRCUMFERENCE=2π×34`. Build `AnimatedCounter` using `useMotionValue`, `useTransform`, `animate` from framer-motion with configurable `target`/`delay`, subscribing to `rounded` to set `display` state. Build `AnimatedRingPercent` similarly with duration 2s, delay 0.8s. Animate SVG ring `strokeDashoffset` via `ringOffset` motion value using `animate` from framer-motion. Use `useInView` on `sectionRef` with `once: true, margin: '-80px'` to trigger all animations. Apply `cardVariants` (y:40→0, scale:0.97→1, duration 0.7) and `labelVariants` (custom index delay) on scroll entry. Include background parallax layer div.

As a frontend developer, implement the LandingCTA section with a magnetic CTA button and cursor trail effect. Use `useState` for `magnetOffset ({x,y})`, `isHovered`, and `trailDots` array (capped at last 6). `useRef` on `sectionRef` (for `useInView` with `once:true, margin:'-80px'`) and `btnRef` (for button bounding rect). `handleMouseMove` calculates center offset and applies 0.3× magnetic pull via `setMagnetOffset`, plus appends trail dots with incrementing `trailIdRef`. `handleMouseLeave` resets all state. Animate button position with framer-motion using `magnetOffset`. `containerVariants` stagger children 0.12s with `itemVariants` (y:30→0, duration 0.6, cubic-bezier [0.22,1,0.36,1]). Background has three warm orb divs (`lc-deco-orb--warm1/2/3`) in `lc-deco-bg` with `translateY(calc(var(--scroll, 0) * -0.3px))` parallax, plus mid-layer `lc-deco-mid` at -0.5px with inline X/O/grid SVG marks (`lc-grid-mark--1/2/3`).

As a frontend developer, implement the Footer section with three link columns and animated social icons. `columns` array defines Product (5 links to ModeSelect/Difficulty/Scoreboard/GameBoard), Company (5 links), and Legal (3 links) — all as `{ heading, links }` objects with `href` targets. Animate columns with `containerVariants` (staggerChildren: 0.12) and `columnVariants` (y:30→0, opacity, duration 0.5). Each link list uses `linkListVariants` (staggerChildren: 0.06, delayChildren: 0.15) and `linkVariants` (y:12→0, duration 0.35). Build social icon components `TwitterIcon`, `GithubIcon`, and `DiscordIcon` as SVG stroke icons. Apply `useInView` on the footer ref to trigger entry animations. Note: this component may already exist from a previous page.

As a frontend developer, implement the Navbar section for the ModeSelect page. This component may already exist from the Landing page (task caecab27-09ce-4a34-abe9-cb5796a68c5f) and should be reused or verified to work correctly on this page. The Navbar uses framer-motion hooks (useScroll, useTransform, useMotionValueEvent) to drive scroll-reactive background opacity, box-shadow, and border opacity transitions. An animated SVG logo uses GRID_PATH, X_PATH, O_PATH with motion path draw animations and logoStroke color pulse between #1E90FF and #FFD700 based on scrollY. Desktop nav links use linkContainerVariants/linkItemVariants with staggered spring animations. Mobile menu uses mobileMenuVariants (height/opacity) and mobileLinkVariants (custom delay per index). useState manages mobileOpen and hasScrolled; backdropFilter blur(16px) activates past 10px scroll. NAV_PAGES array includes all 6 routes: Landing, ModeSelect, Difficulty, GameBoard, GameResult, Scoreboard.

As an AI Engineer, integrate GPT 5.4 (as specified in SRD) to power the AI opponent logic. Implement an AIService class that accepts the current board state, difficulty level, and game history, then returns the AI's next move. Difficulty levels should modulate AI behavior: Easy (random/suboptimal moves), Medium (mixed strategy), Hard (optimal GPT-driven moves). Implement prompt templates for each difficulty. Expose the service via a callable used by the game move endpoint. Ensure response latency stays under 1 second for Easy/Medium; Hard may use streaming with fallback timeout. Add unit tests for all difficulty tiers.

As a Frontend Developer, implement global state management for the regal-tic application using React Context + useReducer (or Zustand). State slices needed: (1) gameState — current game session (id, mode, difficulty, board, currentPlayer, status, winner, moves); (2) scoreState — session scores (wins, losses, draws, winRate, history array); (3) uiState — theme preference, loading flags. Expose actions: startGame, makeMove, endGame, resetGame, updateScore. Ensure state persists across page navigation (React Router) and is accessible by GameBoard, GameResult, and Scoreboard pages. Add localStorage persistence for scores and theme preference.

As a frontend developer, implement the ModeSelectHero section for the ModeSelect page. This section renders a full 3D scene using @react-three/fiber Canvas, @react-three/drei Float and MeshDistortMaterial, and gsap for entrance animations. The AnimatedGridBoard component composes GridLines (6 tube-geometry lines rendered via THREE.CatmullRomCurve3, pointer-reactive rotation via useFrame) and 9 GridBox meshes (boxGeometry 0.55x0.55x0.55, MeshDistortMaterial with distort=0.08, Float wrapper, per-mesh rotation.y += 0.002 and sin-wave rotation.x). SceneSetup positions camera at (0, 0.1, 5.5) via useEffect. Box colors cycle through ['#32CD32','#1E90FF','#FF6347','#FFD700']. The hero overlay text and CTAs are animated with gsap on mount. ambientLight intensity=1.2 and directionalLight at (4,3,5) illuminate the scene.

As a frontend developer, implement the ModeSelectCards section for the ModeSelect page. This section features mode-selection cards each embedding a @react-three/fiber Canvas with OrbitControls showing an interactive 3D tic-tac-toe board. The 3D board uses GridLines (bufferGeometry with Float32Array vertex positions, lineBasicMaterial #1E90FF opacity 0.5), BoardBase (planeGeometry 3.2x3.2 with dark transparent meshStandardMaterial), XMark (shapeGeometry from generateXShape, spring-animated scale via motion.mesh), and OMark (torusGeometry args=[radius=0.35, tubeRadius=0.06, 16, 32]). Card reveal uses framer-motion useInView. useState, useRef, useCallback, and useEffect manage hover states and animation triggers. gsap is imported for supplemental transitions.

As a frontend developer, implement the ModeSelectFeatures section for the ModeSelect page. This section renders two feature grids — aiFeatures (3 items: AI Difficulty Levels, Smart Strategy Engine, Real-Time Score Tracking) and playerFeatures (3 items: Local Multiplayer Support, Quick Rematch, plus one more) — each item containing an inline SVG icon and text. Framer-motion useInView triggers staggered card reveal animations via a useRef sentinel. Each feature card applies an accentClass ('secondary', 'primary', 'highlight', 'accent') for CSS custom-property-driven border/glow color theming. No 3D or API calls; purely declarative animated layout.

As a frontend developer, implement the ModeSelectCTA section for the ModeSelect page. The section renders a motion.div CTA card (initial opacity:0/y:30, whileInView entrance) with a cursor-reactive radial glow layer driven by handleMouseMove computing --mx/--my CSS vars from getBoundingClientRect. useState manages glowPos ({x,y} percentages) and isHovering. Three decorative orb divs (mct-deco-orb--1/2/3) form a parallax background layer with CSS scroll variable. A magnetic button effect is implemented via GSAP in useEffect: mousemove on btnPrimaryRef computes dx/dy normalized offsets and tweens x/y by strength=8 with power2.out; mouseleave springs back with elastic.out(1, 0.5). useCallback memoizes mouse handlers.

As a frontend developer, implement the Footer section for the ModeSelect page. This component may already exist from the Landing page (task dac5c614-56d5-4eba-9fec-eadac4c3a0ae) and should be reused or verified. The Footer uses framer-motion useInView to trigger containerVariants (staggerChildren: 0.12) driving columnVariants (opacity:0/y:30 → visible) and linkListVariants (staggerChildren: 0.06, delayChildren: 0.15) driving individual linkVariants. Three link columns are defined via the columns array: Product (5 links to /ModeSelect, /Difficulty, /Scoreboard, /GameBoard), Company (5 links to /Landing), and Legal (3 links to /Landing). Social icons (TwitterIcon, GithubIcon, DiscordIcon) are inline SVG components with stroke-based rendering. A logo/tagline and copyright block complete the layout.

As a frontend developer, implement the Navbar section for the Difficulty page. This component (shared with Landing and ModeSelect pages — may already exist) uses framer-motion hooks: useScroll, useTransform, useMotionValueEvent, and AnimatePresence. Key features: scroll-driven bgOpacity/shadowOpacity/borderOpacity transforms over [0,80]px scroll range, backdropFilter blur(16px) activating after 10px scroll via hasScrolled state, animated SVG logo with GRID_PATH/X_PATH/O_PATH stroke draw and logoStroke color-pulsing between #1E90FF and #FFD700 based on scroll position, desktop nav links with staggered spring entrance via linkContainerVariants/linkItemVariants, and a mobile hamburger menu using mobileMenuVariants (height/opacity) and mobileLinkVariants (custom index-delayed spring). NAV_PAGES includes all 6 routes. useState manages mobileOpen and hasScrolled.

As a Frontend Developer, implement a typed API client module (src/api/) that wraps all backend endpoints. Modules: gameApi (createGame, getGame, submitMove, endGame) and scoreApi (getScores, recordScore, getStats). Use axios or fetch with a configured base URL from environment variable VITE_API_BASE_URL. Add request/response interceptors for error handling and loading state. Export typed TypeScript interfaces matching the backend Pydantic schemas. This client layer is consumed by the global state management actions and must be in place before any page-level API integration.

As a frontend developer, implement the DifficultyHeader section for the Difficulty page. Uses a custom useThreeCanvas hook with a useRef canvasRef to mount a Three.js scene featuring a TorusKnotGeometry(1.5, 0.22, 100, 16, 2, 3) with MeshStandardMaterial (color: #1E90FF, emissive: #0a2f5a), AmbientLight and DirectionalLight. The knot continuously rotates (x += 0.004, y += 0.007) in an rAF loop with responsive resize handling. GSAP drives an elastic.out(1, 0.6) entrance scale animation from 0 to 1 over 1.2s. The canvas is positioned as a decorative backdrop layer behind framer-motion content: an accent bar with scaleX entrance animation (initial scaleX:0/opacity:0 → animate scaleX:1/opacity:1) overlays the headline and subtitle text.

As a frontend developer, implement the DifficultyGrid section for the Difficulty page. Renders three difficulty cards (Easy/Medium/Hard) from a difficulties config array with id, label, description, aiBehavior, winRate, strokeColor, badgeClass, and iconClass. Each card uses cardVariants with staggered opacity/y entrance (delay: 0.15*i, cubic-bezier easing). Features a RadialProgress sub-component rendering an SVG circle with CIRCUMFERENCE=2π*54, using framer-motion's animate strokeDashoffset driven by useInView(sectionRef, {once:true, margin:'-80px'}) — animates from CIRCUMFERENCE to offset over 1.2s easeOut. useState manages selected card. handleSelect sets selected state then navigates to /GameBoard after 600ms timeout. Decorative dg-bg-orb divs provide ambient background effects.

As a frontend developer, implement the DifficultyDescription section for the Difficulty page. Contains six SVG icon components (EasyIcon, MediumIcon, HardIcon, SparkleIcon, ZapIcon, BrainIcon) rendered inline. Features a MiniBoard sub-component using useRef mountRef and useState hovered, mounting a Three.js scene with PerspectiveCamera(35, w/h, 0.1, 50) positioned at (4, 3.5, 6), WebGLRenderer with alpha, and Three.js geometry for miniature tic-tac-toe boards — each receiving accentColor and cellMarkers props. Three MiniBoard instances render per difficulty level (Easy/Medium/Hard). The outer section uses useInView for scroll-triggered entrance animations. useState and useEffect manage hover states and Three.js lifecycle (resize observer, rAF loop, renderer disposal on unmount).

As a frontend developer, implement the DifficultyFooterCTA section for the Difficulty page. Contains a CtaThreeScene sub-component using useRef mountRef and sceneRef, mounting a Three.js scene with PerspectiveCamera(45, w/h, 0.1, 100) at z=8, AmbientLight(#1e90ff, 0.3) and PointLight(#ffd700, 0.4, 20). Creates 8 scattered tokens: even indices use createXToken (THREE.Group with two rotated BoxGeometry(0.14,1.0,0.08) bars at ±π/4) and odd indices use createOToken (TorusGeometry(0.5,0.12,16,32)). Token colors cycle through [#1e90ff, #ff6347, #32cd32, #ffd700]. GSAP animates floating idle motion on each token via userData. Framer-motion wraps CTA text and buttons with entrance animations. useState, useEffect, useCallback manage scene lifecycle and resize handling. The CTA links to difficulty selection or /GameBoard.

As a frontend developer, implement the Footer section for the Difficulty page. This component (shared with Landing and ModeSelect — may already exist) uses framer-motion useInView to trigger containerVariants (staggerChildren: 0.12) on the footer element. Renders three link columns (Product, Company, Legal) via a columns config array, each column animated with columnVariants (opacity:0/y:30 → opacity:1/y:0, 0.5s easeOut). Individual links use linkListVariants (staggerChildren: 0.06, delayChildren: 0.15) and linkVariants (opacity/y entrance). Contains three SVG social icons: TwitterIcon, GithubIcon, and DiscordIcon. Product links include routes to /ModeSelect, /Difficulty, /Scoreboard, /GameBoard. Includes brand copyright text for regal-tic.

As a frontend developer, implement the GameBoardHeader section for the GameBoard page. This section renders the top header bar of the active game board using React with `useState`, `useEffect`, and `useRef` hooks, plus GSAP for entrance animations. Key components include: (1) a mode badge with dynamic icon switching between `SwordsIcon` (PvP), `BotIcon` (AI), and `UserIcon` (local) based on game mode prop; (2) a difficulty display using `DIFFICULTY_STARS` mapping (Easy=1, Medium=2, Hard=3) rendered as `StarIcon` components with `filled` boolean prop controlling filled vs empty star SVG appearance; (3) match info row showing `ClockIcon` with elapsed time, `TrophyIcon` with current score, and `GridIcon` with current turn count. All SVG icons are defined inline (SwordsIcon, BotIcon, UserIcon, ClockIcon, TrophyIcon, GridIcon, StarIcon). GSAP timeline animates the header elements on mount via `useRef`. Styles imported from `../styles/GameBoardHeader.css`. Note: this is a new page-level layout section — Navbar may already exist from ModeSelect or Difficulty pages and should be reused if applicable.

As a frontend developer, implement the GameBoardStatus section for the GameBoard page. This section renders the dynamic game status panel using React with `useState`, `useEffect`, `useRef`, and `useCallback` hooks, combined with GSAP and Framer Motion (`AnimatePresence`, `motion`) for rich state-transition animations. Key components include: (1) an active turn counter display with `ClockIcon` SVG; (2) player indicator cards showing `XMark` and `OMark` SVGs to distinguish Player X vs Player O; (3) a status alert banner that conditionally renders `TrophyIcon` (win state), `AlertIcon` (error/info), `DrawIcon` (draw state), or `PlayerVsAI` (AI mode indicator) based on the current `gameState`; (4) simulated game state cycling via `SIMULATED_STATES` array containing states such as `'player-turn'`, `'ai-turn'`, `'win'`, `'draw'` with `currentPlayer` metadata — in production these come from props/context. `AnimatePresence` handles mount/unmount transitions of the alert banner, while GSAP handles player card highlight animations via `useRef`. Styles imported from `../styles/GameBoardStatus.css`.

As a frontend developer, implement the ResultHero section for the GameResult page. This section renders an outcome-aware hero using the OUTCOMES config object (win/loss/draw) with corresponding label, title, message, icon tint, and confetti flag. Includes three custom SVG icon components — TrophyIcon (green stroke), ShieldXIcon (red stroke), HandshakeIcon (gold stroke) — and inline ClockIcon for meta display. Uses GSAP for entrance animations triggered on mount. Applies outcome-specific CSS tint classes ('win', 'loss', 'draw') and conditionally launches a confetti effect for win state. useState and useEffect manage animation lifecycle; useRef and useCallback support GSAP context cleanup. The section chains from the GameBoard page via depends_on on b92b2104-ffc2-4e47-84a1-69f41e5cca90.

As a frontend developer, implement the ResultStats section for the GameResult page. This section uses resolveStats() to derive game stats (yourSymbol, yourMoves, opponentSymbol, opponentMoves, isVsAI, difficulty, duration, winState). Renders stat cards with GSAP-animated reveal using gsap.fromTo on '.rs-card-animated' elements (opacity 0→1, y 28→0, stagger 0.13, power3.out). Integrates D3 for a micro-bar chart SVG rendered into a d3Ref container — builds an xScale with scaleLinear, renders labeled bar groups for 'Your Moves', 'Opponent Moves', and 'Total'. Includes BadgeIcon and ClockIcon SVG components; displays difficulty badge via difficultyLabel() and formats duration via formatDuration() utility.

As a frontend developer, implement the ResultMoveReplay section for the GameResult page. This section renders an interactive move-by-move replay of the game. Uses MOVE_DATA (5 moves with player, cell, timestamp, isAI flags) and BOARD_SNAPSHOTS generated by generateBoardStates() to step through board states. Implements MiniBoard component (3×3 grid with rmr-mini-cell classes including --highlight-x, --highlight-o, --x, --o, --blank variants) and FullBoard modal component with rmr-modal-cell variants. Features a replay modal triggered by a PlayIcon SVG button, with ChevronLeft/ChevronRight navigation between move steps. Uses Framer Motion's AnimatePresence for modal enter/exit transitions, GSAP for card reveal animations, useState for currentStep/modalOpen state, useRef for GSAP context, and useCallback for step navigation handlers.

As a frontend developer, implement the ResultScoreUpdate section for the GameResult page. This section displays session score data from SESSION_DATA (wins: 5, losses: 2, draws: 1, winRate: 63%, isRecord flag, recordMessage). Implements useAnimatedCounter hook using IntersectionObserver + GSAP fromTo animation (textContent 0→target, power2.out ease, snap to integer) to animate numeric counters on scroll into view. Implements useSparkline hook using D3 to render a responsive SVG sparkline chart from history data — builds xScale/yScale with scaleLinear, renders area fill with d3.area + curveMonotoneX, line path with d3.line, and an SVG linearGradient defs block for the fill. Renders TRENDS array (Win Rate, Games Played, Loss Streak) with directional delta badges. Displays a personal-best record banner when isRecord is true.

As a frontend developer, implement the ResultActions section for the GameResult page. This section renders outcome-aware CTA buttons (Play Again via PlayIcon, Mode Select via GridIcon, Leaderboard via TrophyIcon — all custom SVG components). Uses useState for outcome state (win/loss/draw), randomly selected from getOutcomeMessages() on mount. Implements a GSAP timeline on mount for character-by-character text entrance: queries '.ra-split-char' elements on outcomeRef, animates opacity+y with stagger 0.04, then animates subtitleRef and buttonsRef sequentially. Triggers a canvas-based confetti animation for win outcome using getRandomConfetti(count) which generates confetti pieces with randomized x, y, color, width, height, rotation, delay, and duration. Uses useRef for sectionRef, outcomeRef, subtitleRef, buttonsRef, confettiRef, and glowDotsRef; Framer Motion motion components for button hover/tap interactions.

As a Tech Lead, verify the end-to-end integration between the GameBoard frontend implementation and the Game Session backend API. Ensure the board correctly initializes a game session on load, submits player moves to PUT /api/games/{game_id}/move, receives and displays AI moves within 1 second, updates game status (win/loss/draw) from API response, and transitions to the GameResult page on game end. Confirm global state is updated correctly throughout. Note: also depends on temp_ai_engine for AI move delivery.

As a Tech Lead, verify the end-to-end integration between the Difficulty page selection and the GameBoard game session creation. Ensure the selected difficulty (Easy/Medium/Hard) from DifficultyGrid is passed via global state or route params to GameBoard, which then calls POST /api/games with the correct mode and difficulty values. Confirm the AI behavior changes perceptibly per difficulty level as delivered by the AI engine.

As a frontend developer, implement the ScoreboardHero section for the Scoreboard page. The section renders a `<section className="sh-root">` container with two purely decorative dot pattern divs (`sh-dots sh-dots--tl` and `sh-dots sh-dots--br`) marked `aria-hidden`. Inside `sh-content`, render an `<h1 className="sh-title">` where 'board' is wrapped in `<span className="sh-title-accent">` for color accent styling. Two paragraph tags follow: `sh-subtitle` describing game history/statistics tracking, and `sh-tagline` with the motivational tagline. All styling is imported from `ScoreboardHero.css` (3421 chars) covering the decorative dot patterns, title accent color, and responsive layout. No state or interactivity — purely static presentational section.

As a frontend developer, implement the ScoreboardStats section for the Scoreboard page. The section uses `useEffect`, `useRef`, and `useState` hooks along with `d3` for entrance animations. A static `statsData` array defines four stat cards: Total Games Played (2847), Win Rate (67.4%), Current Streak (8), and Favorite Mode ('VS AI'), each with an icon, label, value, suffix, trend string, trendDir ('up'/'down'/'neutral'), and a CSS variable color. Implement the `CountUp` sub-component that uses `requestAnimationFrame` with an `easeOutExpo` easing function over 1600ms to animate numeric values from 0 to their target; a `trigger` prop gates the animation start; handles both integer and float (`.toFixed(1)`) display and non-numeric string targets. Implement the `StatCard` sub-component which holds a `d3Ref`; on `observed` becoming true, fires a D3 transition (600ms, `easeCubicOut`) animating `opacity` 0→1 and `translateY(20px)→translateY(0px)` for card entrance. Each card renders `sbs-card-icon` colored via `stat.color`, `sbs-card-body` containing `sbs-card-value` (hosting `CountUp`), and a trend badge with dynamic class `sbs-trend-up`, `sbs-trend-down`, or `sbs-trend-neutral`. Wire up an IntersectionObserver (implied by `observed` prop) to trigger count-up and D3 entrance animations when cards scroll into view. All styles from `ScoreboardStats.css` (3223 chars).

As a Tech Lead, verify the end-to-end integration between the GameResult frontend sections and the backend APIs. Ensure ResultHero, ResultStats, ResultMoveReplay, ResultScoreUpdate, and ResultActions all correctly read game outcome data from global state (populated by the Game Session API), that ResultScoreUpdate triggers POST /api/scores to record the result, and that the updated score stats are reflected accurately. Validate confetti triggers on win, move replay data integrity, and score badge display.

As a Tech Lead, verify the end-to-end integration between the Scoreboard frontend sections (ScoreboardHero, ScoreboardStats) and the Scores backend API. Ensure GET /api/scores/stats returns data that correctly populates the four stat cards (Total Games Played, Win Rate, Current Streak, Favorite Mode) with real values replacing static mock data. Validate D3 animations trigger correctly on live data, CountUp animates to real targets, and trend directions reflect actual score history.