mancala/docs/specs/web-redesign/requirements.md

Web redesign: requirements

Status: in progress on branch feature/web-redesign (based on feature/game-clock). Scope: web app, with small additions to core and the backend. The mobile app keeps its current look.

The design is the canvas "Köçürme Board Tasarımı" (claude.ai artifact 8AnZr74jA68LGDBfwA1vyd): home ("Lobi"), game ("Oyun") and watch/replay ("İzle / Tekrar") screens, each at desktop (1440 px) and phone (390 px) width. The phone screens are the same pages at a narrow width, not a separate app.

Requirements

R1. Look

• R1.1 Three themes: Ceviz (walnut, dark), Gece (night, dark) and Yeşim (jade, light). The header shows them as swatches; the choice is kept in the browser. Themes saved by older versions fall back to Ceviz.
• R1.2 The typeface is Bricolage Grotesque; icons are inline SVG.
• R1.3 Every page has the same sticky header: logo and name (links home), theme swatches, account menu on the home page, and one main action ("New Game", or "Leave" during a game). On phones the action shows its icon only.
• R1.4 Pages work from 320 px wide: no horizontal scrolling, touch targets at least 44 px.

R2. Board

• R2.1 Pits and stores are wells on a board; stones are drawn as coloured stones scattered in the well, with the count in a badge. The viewer's store is on the right and its badge uses the accent colour.
• R2.2 Below 600 px of board width the board stands upright: the top player's store at the top, the viewer's at the bottom, the viewer's pits in the left column.
• R2.3 On the viewer's turn, the pits they can play are buttons; hovering one previews the move: a "+n" chip on each pit that receives stones and a ring on the pit where the last stone lands.
• R2.4 While a move is animated, pits receiving stones are ringed; captures and stones landing in the store are marked too. The pit the last move was played from has a dashed ring.

R3. Game page

• R3.1 The top player is shown on the left, the bottom player on the right, and the turn between them ("Your turn", "Opponent's turn", or what ended the game). On phones the bottom player is shown below the board.
• R3.2 Each player shows an avatar with initials, name, role ("You" / "Opponent"), store count, clock and whether they are online. The player to move is ringed.
• R3.3 When the game ends a card over the board shows the result, the score, "New Game" and "Home"; it can be closed to see the board.
• R3.4 The move list shows the newest move first, with tags for extra turns, captures and stones added to the store. Selecting a move still shows that position (the review banner offers to go back to live).

R4. Replay page

• R4.1 A summary card shows the result, date, duration, move count, both players with the score, and "Watch from start".
• R4.2 Below the board a controls card has first/previous/play/next/last buttons, the speed (1x, 2x, 4x), a timeline and a line describing the shown move with its tags.
• R4.3 The move list shows the oldest move first, starting with "Start"; the shown move is highlighted.

R5. Home page

• R5.1 A user with a game in progress sees it first: opponent, whose turn, move number, both store counts, a large mini board and "Continue".
• R5.2 "Live games", "Popular games" and "My recent games" are grids of cards: both players with the score, a mini board with the stone counts and a status pill (live, result, abandoned) with details. "Live games" is hidden when nothing is being played; "Popular games" always lists finished games.