feat: NCWF-5/6/7/8/9 chess analysis page and engine integration

- NCWF-5: scaffold /analysis route with ChessBoard viewer and navigation
- NCWF-6: FEN / PGN / Game-ID input form with depth selector
- NCWF-7: extend GameApiService with analyzePosition(); add AnalysisService
  with game-wide annotation pipeline; proxy /api/analysis -> :8087
- NCWF-8: EvalTimelineComponent — SVG win-chance chart per ply
- NCWF-9: AnnotatedMoveListComponent — quality labels (!! ! ?! ? ??)
  derived from win-chance delta

Also fix pre-existing app.spec.ts failure (missing provideHttpClient).
Apply project-wide prettier formatting pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/commands/create-defect.md

@@ -0,0 +1,102 @@
+# Create Defect in YouTrack
+
+Automated defect creation workflow. Topic/hint: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo (Angular 20 / TypeScript). Defects raised
+here usually belong to project `NCWF`, but routing in Step 5 still applies.
+
+## Step 1 — Gather Context
+
+Use `AskUserQuestion` tool to ask the user (max 4 questions at once):
+
+1. **Component** — Where does the bug occur? (e.g. a component, service, route/page, model, styling, API integration)
+2. **What breaks** — What is the actual (broken) behavior?
+3. **Expected** — What should happen instead?
+4. **Reproducibility** — Is it always reproducible? Any known trigger conditions? (route, viewport, browser)
+
+If `$ARGUMENTS` already answers some of these, skip those questions.
+
+## Step 2 — Research (if needed)
+
+If the bug involves component logic, a service, or routing:
+
+- Search repo for relevant code (`Grep`/`Bash`) under `src/app/{components,services,models,core,pages}`.
+- Check `.spec.ts` files for existing coverage of the broken area.
+- Do NOT guess at root cause. Surface findings before drafting.
+
+## Step 3 — Draft Defect
+
+Compose the full defect report using this template:
+
+```
+Summary
+
+[One-sentence description of what is broken.]
+
+
+Steps to Reproduce
+
+1. Step one
+2. Step two
+3. Step three
+
+
+Expected Behavior
+
+[What should happen.]
+
+
+Actual Behavior
+
+[What actually happens.]
+
+
+Environment / Notes
+
+[Any relevant context: route/URL, viewport, browser, console errors, API payloads — only if applicable.]
+```
+
+Rules:
+
+- Steps must be minimal and reproducible.
+- Expected vs actual: concrete and unambiguous.
+- Omit "Environment / Notes" section if not relevant.
+
+## Step 4 — Clarify
+
+Show the draft to the user.
+**Use `AskUserQuestion` tool to ask:**
+
+- Are steps to reproduce complete and accurate?
+- Severity: Blocker / Critical / Major / Minor / Trivial?
+- Any related tickets or recent changes to link?
+
+Incorporate feedback. Repeat until user approves.
+
+## Step 5 — Determine Project
+
+> **Project routing rules (always apply these):**
+>
+> - Frontend code (UI, UX, web app, components, services) → `NCWF`
+> - Backend code (game engine, bots, API, services, coordinator) → `NCS`
+> - Infrastructure (Kubernetes, pipelines, CI/CD, DB setup, cloud infra) → `NCI`
+
+- Frontend / UI / UX → project: `NCWF` (default for this repo)
+- Backend / coordinator / systems / bot / engine → project: `NCS`
+- Kubernetes, pipelines, CI/CD, infrastructure → project: `NCI`
+
+If ambiguous, ask the user.
+
+## Step 6 — Create Issue
+
+Call `mcp__youtrack__create_issue` with:
+
+- `project`: determined in Step 5
+- `summary`: concise title describing what is broken (≤72 chars, sentence case)
+- `description`: full formatted defect report from Step 3 (Markdown)
+- `type`: `Bug`
+
+## Step 7 — Report
+
+Display the created issue ID and URL.
+Ask if a linked investigation or fix task is needed.

.claude/commands/create-story.md

@@ -0,0 +1,119 @@
+# Create User Story in YouTrack
+
+Automated user-story creation workflow. Topic/hint: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo (Angular 20 / TypeScript). Stories raised
+here usually belong to project `NCWF`, but routing in Step 5 still applies.
+
+## Step 1 — Gather Context
+
+Use `AskUserQuestion` tool to ask the user (max 4 questions at once):
+
+1. **Domain** — Is this frontend (UI/UX) work, or does it touch backend/infrastructure?
+2. **User type** — Who is the actor? (e.g. player, spectator, admin, anonymous visitor)
+3. **Action** — What should the user be able to do?
+4. **Goal/value** — Why? What outcome does it enable?
+
+If `$ARGUMENTS` already answers some of these, skip those questions.
+
+## Step 2 — Research (if needed)
+
+If the topic involves unfamiliar UI flows, component structure, or technical constraints:
+
+- Search the repo for relevant code under `src/app/` (use `Grep`/`Bash`).
+- Use `WebSearch` if the topic involves Angular APIs, external standards or protocols.
+- Do NOT guess. Surface findings before drafting.
+
+## Step 3 — Draft Story
+
+Compose the full story using this template:
+
+```
+As a [type of user]
+I want to [perform an action]
+So that [achieve a goal or value]
+
+
+Description
+
+[Additional context or business logic for this story.]
+
+
+Acceptance Criteria
+
+[List the specific, measurable criteria that define when this story is done:]
+
+- Criterion 1
+- Criterion 2
+- Criterion 3
+
+
+Implementation Notes
+
+[Technical notes, component/service references, design refs, or constraints.]
+```
+
+Rules:
+
+- User story line: plain English, present tense, from user's perspective.
+- Acceptance criteria: testable, unambiguous, one condition each.
+- Implementation notes: optional — only include if there are known constraints, related tickets, or design refs.
+
+## Step 4 — Clarify Acceptance Criteria
+
+Show the draft to the user.
+**Use `AskUserQuestion` tool to ask:**
+
+- Are the acceptance criteria complete and correct?
+- Any implementation constraints to add?
+- Priority (if known)?
+
+Incorporate feedback. Repeat until user approves.
+
+## Step 5 — Determine Project
+
+> **Project routing rules (always apply these):**
+>
+> - Frontend code (UI, UX, web app, components, services) → `NCWF`
+> - Backend code (game engine, bots, API, services, coordinator) → `NCS`
+> - Infrastructure (Kubernetes, pipelines, CI/CD, DB setup, cloud infra) → `NCI`
+
+- Frontend / UI / UX → project: `NCWF` (default for this repo)
+- Backend / coordinator / systems / bot / engine → project: `NCS`
+- Kubernetes, pipelines, CI/CD, infrastructure → project: `NCI`
+
+If still ambiguous, ask the user.
+
+## Step 6 — Create Issue
+
+Call `mcp__youtrack__create_issue` with:
+
+- `project`: determined in Step 5
+- `summary`: concise title derived from the "I want to" clause (≤72 chars, sentence case)
+- `description`: full formatted story from Step 3 (Markdown)
+- `type`: `Feature` (or `Task` if purely technical with no user-facing value)
+
+## Step 7 — Link Issues
+
+After creation, ask the user (use `AskUserQuestion` if interactive, otherwise infer from context):
+
+> Are there related issues to link? (skip if none)
+
+Collect any issue IDs the user mentions. For each, determine the correct relation and call `mcp__youtrack__link_issues`:
+
+| Situation                               | Relation to use |
+| --------------------------------------- | --------------- |
+| This story must be done before another  | `blocks`        |
+| Another story must be done before this  | `is blocked by` |
+| Stories share domain or are related     | `relates to`    |
+| This is a child of an epic/story        | `subtask of`    |
+| This is a parent grouping subtasks      | `parent for`    |
+| This depends on another ticket's output | `depends on`    |
+
+If the user mentions an issue in the story description or implementation notes (e.g. "see NCS-42", "after NCWF-12 is done"), auto-detect and suggest linking it — confirm before creating the link.
+
+## Step 8 — Report
+
+Display the created issue ID and URL.
+List any links created (relation type + linked issue ID).
+Ask if a linked sub-task or implementation ticket is needed.

.claude/commands/estimate-issues.md

@@ -0,0 +1,100 @@
+# Estimate Issue Time in YouTrack
+
+Sprint planning time estimator. Issue ID or empty for full current sprint: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo. Sprint mode defaults to project `NCWF`.
+
+## Step 1 — Determine Scope
+
+**Single-issue mode** (`$ARGUMENTS` set):
+
+- Call `mcp__youtrack__get_issue` on `$ARGUMENTS`.
+- Proceed with that issue only.
+
+**Sprint mode** (`$ARGUMENTS` empty):
+
+- Call `mcp__youtrack__search_issues` with query `project: NCWF Sprints: {current sprint} #Unresolved`.
+- If query returns 0 results, use `AskUserQuestion` to ask for the sprint name, then retry with `project: NCWF Sprints: {name}`.
+- Collect all returned issues.
+
+## Step 2 — Build Issue Tree
+
+For each top-level issue from Step 1:
+
+1. Fetch full details via `mcp__youtrack__get_issue`: summary, description, acceptance criteria, Type, existing `Zeitschätzung`, linked issues.
+2. Identify subtasks from links with relation `subtask of` (i.e. issues where the fetched issue is the parent).
+3. Recursively fetch subtasks until all leaves are known.
+4. Group into tree: Epic → Story → Task/Subtask.
+
+**Leaf node** = issue with no subtask children.
+**Parent node** = issue that has at least one subtask child.
+
+## Step 3 — Estimate Leaf Nodes
+
+For each leaf node:
+
+1. Read: summary, description, acceptance criteria, implementation notes.
+2. If scope is unclear, search codebase (`Grep`/`Bash`) under `src/app/` for related files to gauge complexity.
+3. Assign estimate using this scale:
+
+| Size    | Criteria                                               | Estimate |
+| ------- | ------------------------------------------------------ | -------- |
+| Trivial | Style tweak, copy change, 1-file tweak                 | 30m      |
+| Small   | 1–3 files, single component/service, no unknowns       | 1h–2h    |
+| Medium  | 3–6 files, new component + service wiring, some design | 3h–5h    |
+| Large   | 6+ files, cross-feature, non-trivial state/routing     | 1d–2d    |
+| XL      | New feature area, major refactor, research spike       | 3d–5d    |
+
+4. Record: estimate + one-line reasoning.
+5. Skip leaf if it already has `Zeitschätzung` set — note it as pre-estimated.
+
+## Step 4 — Roll Up for Display
+
+YouTrack auto-sums `Zeitschätzung` from subtasks up to parents — **do not write estimates to parent nodes**.
+
+Compute display-only rolled-up totals:
+
+- Parent total = sum of all descendant leaf estimates (including pre-estimated ones).
+- Flag any branch where some leaves are missing estimates (partial roll-up).
+
+## Step 5 — Show Summary + Confirm
+
+Display full tree with estimates. Format:
+
+```
+Epic  NCWF-10: Board UI overhaul             [4h 30m]  ← rolled up
+  Story NCWF-11: Drag-and-drop pieces        [2h 30m]  ← rolled up
+    Task  NCWF-12: Add drag directive          1h 30m   ← leaf (new)
+    Task  NCWF-13: Add component specs          1h       ← leaf (new)
+  Story NCWF-14: Move-list panel             [2h]      ← rolled up
+    Task  NCWF-15: Render SAN move list        2h       ← leaf (pre-set, skipped)
+```
+
+Legend: `[X]` = display-only roll-up (not written). Plain = will be written to YouTrack.
+
+If sprint mode, show grand total at bottom:
+
+```
+Sprint total: Xd Yh Zm  (N issues, M leaves to update)
+```
+
+**Use `AskUserQuestion` tool:**
+
+- Does the breakdown look right?
+- Any estimates to adjust before writing to YouTrack?
+
+Incorporate all feedback before proceeding.
+
+## Step 6 — Write Estimates
+
+On user approval, write estimates **only to leaf nodes** (bottom-up order):
+
+- For each leaf with a new estimate, call `mcp__youtrack__update_issue` with field `Zeitschätzung` = approved estimate.
+- YouTrack period format: `"30m"`, `"1h 30m"`, `"1d"`, `"2d 4h"`.
+- Skip leaves already pre-estimated.
+
+## Step 7 — Report
+
+List all updated issues with set estimates.
+Show final rolled-up totals per Epic/Story (read back from YouTrack via `mcp__youtrack__get_issue` if needed).
+In sprint mode, show total sprint estimate.

.claude/commands/fix-defect.md

@@ -0,0 +1,147 @@
+# Fix Defect from YouTrack
+
+Automated defect-fix workflow. Ticket ID: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo (Angular 20 / TypeScript). Gates:
+
+- Build: `npm run build`
+- Test: `npm test -- --watch=false --browsers=ChromeHeadless`
+- Format: `npx prettier --write .` (check with `npx prettier --check .`)
+
+## Step 1 — Fetch Ticket
+
+Call `mcp__youtrack__get_issue` with ID `$ARGUMENTS`.
+Extract and display: summary, description, steps to reproduce, Priority, Subsystem.
+
+## Step 2 — Create Worktree
+
+Derive branch name from ticket:
+
+- `type` from YouTrack issue type: `bug` → `fix`, `feature`/`task` → `feat`, `refactor` → `refactor`, else `chore`
+- `scope` from affected area (kebab-case, omit if unclear)
+- `description` from ticket summary: lowercase, kebab-case, max 40 chars, drop articles
+
+Branch format: `<type>/<ticket-id>-<description>`
+Example: `fix/NCWF-123-board-flip-resets-selection`
+
+Call `EnterWorktree` with that branch name.
+All subsequent file work happens inside this worktree.
+
+## Step 3 — Identify Root Cause (read-only)
+
+1. Run `npm run build` — capture all errors and warnings.
+2. Run `npm test -- --watch=false --browsers=ChromeHeadless` — capture all failures.
+3. Spawn `cavecrew-investigator` with: ticket description + build/test output → locate root cause (files, line numbers, what's wrong).
+4. **If anything is ambiguous (reproduction unclear, scope uncertain, conflicting signals), use `AskUserQuestion` tool to ask — max 4 questions at once.**
+5. **Report findings to user. No file writes yet. Wait for acknowledgement before continuing.**
+
+## Step 3b — Complexity Assessment + Subtasks
+
+After root cause confirmed, assess scope:
+
+**Simple** (1–2 files, single concern, < 1 hour estimated): proceed directly to Step 4.
+
+**Complex** (3+ files, multiple concerns, or estimated > 1 hour): create subtasks before coding.
+
+To create subtasks:
+
+1. Break fix into discrete, independently-completable tasks (e.g. "Fix selection state in BoardComponent", "Add spec for flip behaviour", "Update GameService move stream").
+2. For each subtask call `mcp__youtrack__create_issue` with:
+   - `project`: based on subtask content — do **not** inherit from parent. Frontend/UI → `NCWF`; backend code → `NCS`; Kubernetes/pipelines/CI-CD/infrastructure → `NCI`. If ambiguous, ask user.
+   - `summary`: concise action-oriented title
+   - `type`: `Task`
+   - `description`: what to do and why
+3. Call `mcp__youtrack__link_issues` to link each subtask to `$ARGUMENTS` with relation `subtask of`.
+4. Check if the ticket description or comments mention other issue IDs. For each mentioned ID, suggest a link and confirm with user:
+   - Fix depends on another fix finishing first → `is blocked by`
+   - This fix blocks another ticket → `blocks`
+   - Logically related but independent → `relates to`
+5. List created subtask IDs and any additional links to user.
+
+Then proceed to Step 4, implementing subtasks in order.
+
+## Step 4 — Fix
+
+1. Implement fix (use the `general-purpose` agent for non-trivial multi-file changes; inline edits for small ones).
+2. Run `npm run build` — must be green.
+3. Run `npm test -- --watch=false --browsers=ChromeHeadless` — must be green (add new specs for new behaviour; do not modify existing specs unless requirements changed).
+4. Run `npx prettier --write .` — **blocking, foreground only**. Wait for completion before continuing.
+5. Run `npx prettier --check .` — **blocking, foreground only** (never `run_in_background`). Wait for exit code 0. Must be green.
+   - If it fails, fix all issues and re-run until exit code 0.
+   - **Do NOT proceed to Step 5 until the build, tests and format check all pass.**
+     If any step fails, iterate until all pass.
+
+## Step 5 — Review
+
+Spawn `cavecrew-reviewer` on the full diff.
+Display findings grouped by severity.
+
+## Step 5b — Apply Review Findings
+
+If the review produced any findings (any severity):
+
+1. Implement all agreed fixes.
+2. Run `npm run build` — must be green.
+3. Run `npm test -- --watch=false --browsers=ChromeHeadless` — must be green.
+4. Run `npx prettier --write .` then `npx prettier --check .` — **blocking, foreground only**. Wait for exit code 0.
+5. Re-spawn `cavecrew-reviewer` on the updated diff to confirm all findings are resolved.
+
+Repeat until review is clean or user explicitly accepts remaining findings.
+
+## Step 6 — Confirm + Push
+
+Show summary: ticket, branch, files changed, review findings.
+**Use `AskUserQuestion` tool to ask for explicit approval before pushing.** Include any open questions about commit message scope or body if unclear.
+
+On approval, commit following Conventional Commits:
+
+```
+<type>(<scope>): <short description, imperative, ≤50 chars>
+
+<optional body: what changed and why, wrap at 72 chars>
+
+Closes $ARGUMENTS
+https://knockoutwhist.youtrack.cloud/issue/$ARGUMENTS
+```
+
+- `type`: same as branch type (`fix`, `feat`, `refactor`, `chore`, etc.)
+- `scope`: affected area (`ui`, `components`, `services`, `models`, `core`, `routing`, `pages`, `styles`)
+- Subject: imperative mood, no period, lowercase
+- Footer `Closes $ARGUMENTS` and ticket URL always present
+
+Push branch to remote.
+
+## Step 7 — Comment on Ticket
+
+After successful push, call `mcp__youtrack__add_issue_comment` on `$ARGUMENTS` with:
+
+```
+Branch `<branch-name>` pushed.
+
+<one-sentence summary of what was changed and why>
+
+Files changed:
+- <file1>
+- <file2>
+```
+
+## Step 7b — Additional Links
+
+After commenting, ask the user if `$ARGUMENTS` should be linked to any other issues not already linked:
+
+| Situation                           | Relation        |
+| ----------------------------------- | --------------- |
+| This fix blocks another open ticket | `blocks`        |
+| Another ticket must ship first      | `is blocked by` |
+| Related defect or story             | `relates to`    |
+| Duplicate of another defect         | `duplicates`    |
+
+Scan the ticket description and comments for any issue IDs that were mentioned but not yet linked. Suggest those automatically.
+
+Call `mcp__youtrack__link_issues` for each confirmed link.
+
+## Step 8 — Cleanup
+
+Call `ExitWorktree` with `discard_changes: true` to delete the worktree.
+(Branch was pushed in step 6 — commits are safe on remote; `discard_changes: true` bypasses the local-ahead guard.)
+Report: branch pushed, ticket commented, links created, worktree deleted, done.

.claude/commands/implement-feature.md

@@ -0,0 +1,164 @@
+# Implement Feature from YouTrack
+
+Automated feature-implementation workflow. Ticket ID: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo (Angular 20 / TypeScript). In-project =
+`NCWF`. Gates:
+
+- Build: `npm run build`
+- Test: `npm test -- --watch=false --browsers=ChromeHeadless`
+- Format: `npx prettier --write .` (check with `npx prettier --check .`)
+
+This workflow implements the given ticket **and all of its subtasks**, while
+respecting `blocked by` dependencies. Tasks that live in other projects
+(`NCS`, `NCI`, or any project other than `NCWF`) are never edited here — they
+are collected and reported at the end with a ready-to-run prompt.
+
+## Step 1 — Fetch Ticket + Build Task Tree
+
+1. Call `mcp__youtrack__get_issue` with ID `$ARGUMENTS`.
+2. Extract and display: summary, description, acceptance criteria, Priority, Subsystem, and the **issue links**.
+3. From the links, build the task tree:
+   - **Subtasks** = issues linked as `subtask of` / `parent for` (children of `$ARGUMENTS`). Recurse: fetch each subtask with `get_issue` and collect its subtasks too.
+   - **Blocked-by** = for every task in the tree, record issues linked as `is blocked by`.
+4. Classify each task by project (the prefix before the dash in the issue ID):
+   - **In-project** = `NCWF`.
+   - **Out-of-project** = `NCS`, `NCI`, or any other prefix. These are **never implemented here**.
+5. Display the full tree: root, subtasks (nested), and for each its blockers + project tag.
+
+## Step 2 — Resolve Implementation Order
+
+1. Filter to **in-project (`NCWF`), not-yet-resolved** tasks only (root + subtasks). Out-of-project tasks are excluded from implementation.
+2. Topologically sort by `blocked by`: a task is only implementable once all its in-project blockers are resolved.
+3. A task is **blocked** (cannot start) if any blocker is:
+   - an in-project task that is not yet resolved in this run, **or**
+   - an out-of-project task (`NCS`/`NCI`/etc.) — these can't be resolved here.
+4. Produce two lists:
+   - **Implementable order** — `NCWF` tasks, dependency-sorted.
+   - **Blocked tasks** — with the blocker(s) that stop them.
+5. **Report both lists to the user.** Wait for acknowledgement before continuing.
+
+## Step 3 — Create Worktree
+
+Derive branch name from the root ticket `$ARGUMENTS`:
+
+- `type` from YouTrack issue type: `feature`/`task` → `feat`, `refactor` → `refactor`, `bug` → `fix`, else `chore`
+- `scope` from affected area (kebab-case, omit if unclear)
+- `description` from ticket summary: lowercase, kebab-case, max 40 chars, drop articles
+
+Branch format: `<type>/<ticket-id>-<description>`
+Example: `feat/NCWF-456-add-board-theme-selector`
+
+Call `EnterWorktree` with that branch name.
+All subsequent file work happens inside this worktree. All implementable
+tasks (root + subtasks) are implemented on this one branch.
+
+## Step 4 — Understand Requirements (read-only)
+
+1. Run `npm run build` — confirm baseline is green.
+2. Run `npm test -- --watch=false --browsers=ChromeHeadless` — confirm baseline is green.
+3. For the root + each implementable subtask, spawn `cavecrew-investigator` with: that task's description + acceptance criteria → locate affected files under `src/app/`, relevant components/services/models, routes, integration touch-points.
+4. **If anything is ambiguous (scope unclear, acceptance criteria missing, design decisions needed), use `AskUserQuestion` tool to ask — max 4 questions at once.**
+5. **Report plan to user: per task — what will be added/changed, which files, which areas. No file writes yet. Wait for acknowledgement before continuing.**
+
+## Step 5 — Implement (per task, in dependency order)
+
+For each task in the implementable order from Step 2, do the following before moving to the next:
+
+1. Implement task (use the `general-purpose` agent for non-trivial multi-file changes; inline edits for small ones).
+2. Run `npm run build` — must be green.
+3. Run `npm test -- --watch=false --browsers=ChromeHeadless` — must be green (add new specs for new behaviour; do not modify existing specs unless requirements changed).
+4. Run `npx prettier --write .` — **blocking, foreground only**. Wait for completion before continuing.
+5. Run `npx prettier --check .` — **blocking, foreground only** (never `run_in_background`). Wait for exit code 0. Must be green.
+   - If it fails, fix all issues and re-run until exit code 0.
+   - **Do NOT proceed to the next task until build, tests and format check all pass.**
+
+If any step fails, iterate until all pass. Once a task is fully green it counts
+as **resolved** for the purpose of unblocking later tasks — re-check Step 2's
+blocked list: any task whose blockers are now all resolved becomes implementable.
+
+## Step 6 — Review
+
+Spawn `cavecrew-reviewer` on the full diff (covering all implemented tasks).
+Display findings grouped by severity.
+
+## Step 6b — Apply Review Findings
+
+If the review produced any findings (any severity):
+
+1. Implement all agreed fixes.
+2. Run `npm run build` — must be green.
+3. Run `npm test -- --watch=false --browsers=ChromeHeadless` — must be green.
+4. Run `npx prettier --write .` then `npx prettier --check .` — **blocking, foreground only**. Wait for exit code 0.
+5. Re-spawn `cavecrew-reviewer` on the updated diff to confirm all findings are resolved.
+
+Repeat until review is clean or user explicitly accepts remaining findings.
+
+## Step 7 — Confirm + Push
+
+Show summary: root ticket, implemented subtasks, branch, files changed, review findings.
+**Use `AskUserQuestion` tool to ask for explicit approval before pushing.** Include any open questions about commit message scope or body if unclear.
+
+On approval, commit following Conventional Commits:
+
+```
+<type>(<scope>): <short description, imperative, ≤50 chars>
+
+<optional body: what changed and why, wrap at 72 chars>
+
+Closes $ARGUMENTS
+<also list Closes <ID> for each implemented subtask>
+https://knockoutwhist.youtrack.cloud/issue/$ARGUMENTS
+```
+
+- `type`: same as branch type (`feat`, `refactor`, `chore`, etc.)
+- `scope`: affected area (`ui`, `components`, `services`, `models`, `core`, `routing`, `pages`, `styles`)
+- Subject: imperative mood, no period, lowercase
+- Footer `Closes <ID>` for the root and every resolved subtask, plus the root ticket URL.
+
+Push branch to remote.
+
+## Step 8 — Comment on Tickets
+
+After successful push, call `mcp__youtrack__add_issue_comment` on `$ARGUMENTS` **and on each implemented subtask** with:
+
+```
+Branch `<branch-name>` pushed.
+
+<one-sentence summary of what was added and why>
+
+Files changed:
+- <file1>
+- <file2>
+```
+
+## Step 9 — Cleanup
+
+Call `ExitWorktree` with `discard_changes: true` to delete the worktree.
+(Branch was pushed in step 7 — commits are safe on remote; `discard_changes: true` bypasses the local-ahead guard.)
+
+## Step 10 — Report Blocked + Cross-Project Tasks
+
+Final report to the user, in two sections:
+
+### Blocked in-project tasks
+
+List any `NCWF` tasks that could **not** be implemented, with the blocker(s)
+that stopped them. (These can be re-run with this command once blockers clear.)
+
+### Cross-project tasks (NCS / NCI / other)
+
+For every out-of-project task discovered in the tree (whether it was a subtask
+or a blocker), output one entry:
+
+```
+- <ID> [<PROJECT>]: <summary>
+  Prompt: /implement-feature <ID>
+```
+
+Where `Prompt` is a short, copy-pasteable instruction to implement that task in
+its own project — e.g. the ticket ID plus a one-line description of what the
+other project needs to do so this project's blocked tasks can proceed.
+
+End with: branch pushed, tickets commented, worktree deleted, plus the counts of
+implemented / blocked / cross-project tasks.

.claude/commands/split-story.md

@@ -0,0 +1,117 @@
+# Split Story into Subtasks in YouTrack
+
+Split a user story into smaller, implementable subtasks. Story ID: `$ARGUMENTS`
+
+This is the **NowChess-Frontend** repo. Frontend subtasks route to `NCWF`.
+
+## Step 1 — Fetch Story
+
+Call `mcp__youtrack__get_issue` with ID `$ARGUMENTS`.
+Extract and display: summary, description, acceptance criteria, implementation notes.
+
+## Step 2 — Research (if needed)
+
+If the story involves unfamiliar UI flows or technical constraints:
+
+- Search repo for relevant code under `src/app/` (`Grep`/`Bash`).
+- Use `WebSearch` for Angular APIs, external standards or protocols.
+- Do NOT guess. Surface findings before proposing splits.
+
+## Step 3 — Propose Split
+
+Analyse the story and propose a set of subtasks. Rules:
+
+- Each subtask = one unit of work, completable independently or in sequence.
+- No subtask should exceed ~2 days of work.
+- Name subtasks in imperative mood (e.g. "Add board theme service", "Render theme picker component").
+- Cover the full scope of the parent story — no gaps.
+
+Show proposed subtask list to user (titles only) and ask:
+**Use `AskUserQuestion` tool:**
+
+- Does the split look right?
+- Any subtasks to add, remove, or merge?
+- Should any subtask be assigned to a specific person?
+
+Incorporate feedback. Repeat until user approves the list.
+
+## Step 4 — Draft Each Subtask
+
+For each approved subtask, compose description using this template:
+
+```
+[Brief description of what needs to be done for this subtask.]
+
+
+Steps / Tasks
+
+- Task 1
+- Task 2
+- Task 3
+
+
+Definition of Done
+
+What must be true for this subtask to be considered complete:
+
+- Code implemented
+- Specs passing
+- Reviewed and merged
+```
+
+Rules:
+
+- Steps/Tasks: concrete, ordered where order matters.
+- Definition of Done: adjust per subtask — not all subtasks need the same criteria (e.g. a research spike has different DoD than an implementation task).
+- Keep description short — one paragraph max.
+
+## Step 5 — Determine Project per Subtask
+
+Assign each subtask's project based on its content — do **not** inherit blindly from parent:
+
+- Frontend code (UI, UX, web app, components, services) → `NCWF`
+- Backend code (game engine, bots, API, services, coordinator) → `NCS`
+- Kubernetes, pipelines, CI/CD, DB setup, infrastructure → `NCI`
+
+If a subtask's project is ambiguous, ask the user before creating it.
+
+## Step 6 — Create Subtasks
+
+For each subtask call `mcp__youtrack__create_issue` with:
+
+- `project`: from Step 5
+- `summary`: subtask title (≤72 chars, sentence case)
+- `description`: full formatted description from Step 4 (Markdown)
+- `type`: `Task`
+
+Then call `mcp__youtrack__link_issues` to link each created subtask to `$ARGUMENTS` with relation `subtask of`.
+
+## Step 6b — Inter-Subtask Links
+
+If subtasks must be done in sequence (one depends on output of another), add ordering links:
+
+- For each dependency pair call `mcp__youtrack__link_issues` with relation `is blocked by` (subtask B is blocked by subtask A).
+
+Ask the user to confirm sequencing before adding these links:
+
+> Do any subtasks have ordering dependencies? (e.g. "Add theme service must come before Render theme picker")
+
+## Step 6c — External Links
+
+Scan `$ARGUMENTS` description and implementation notes for any referenced issue IDs not already linked. For each:
+
+| Situation                                | Relation        |
+| ---------------------------------------- | --------------- |
+| Parent story blocks another epic/story   | `blocks`        |
+| Story depends on another epic completing | `is blocked by` |
+| Related story in same domain             | `relates to`    |
+| This story duplicates or supersedes      | `duplicates`    |
+
+Suggest links to the user and call `mcp__youtrack__link_issues` on confirmation.
+
+## Step 7 — Report
+
+List all created subtask IDs and summaries.
+List all links created (subtask-of, blocking chains, external).
+Display parent story link.
+Ask if any subtask needs further splitting.

.gitignore

@@ -37,3 +37,7 @@ __screenshots__/
 # System files
 .DS_Store
 Thumbs.db
+
+# Claude Code
+/.claude/settings.local.json
+/.claude/worktrees/

CHANGELOG.md

@@ -1,35 +1,77 @@
+## [0.3.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.8...0.3.0) (2026-06-10)
+
+### Features
+
+- NCWF-5 Scaffold post-game analysis page at /analysis with board viewer and route
+- NCWF-6 FEN / PGN / Game-ID input form for custom analysis
+- NCWF-7 Integrate backend analysis API (POST /api/analysis/position) via GameApiService
+- NCWF-8 Per-move evaluation timeline SVG chart
+- NCWF-9 Annotated move list with quality labels (!! ! ?! ? ??)
+
 ## 0.0.0 (2026-05-12)
 
 ### Features
 
-* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
-* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
-* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
-* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
+- added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
+- added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
+- NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
+- NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
 
 ### Bug Fixes
 
-* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
-* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
-* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
-* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
-* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
-* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
-* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
-* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
-* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
+- build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
+- cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
+- gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
+- GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
+- npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
+- removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
+- removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
+- size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
+- structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
+
 ## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.1.0...0.0.0) (2026-05-12)
 
 ### Features
 
-* NCS-69 Challenge request ([#3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/3)) ([bad7366](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bad7366bdbb048c20218257b30ac22efc9ecb6db))
+- NCS-69 Challenge request ([#3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/3)) ([bad7366](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bad7366bdbb048c20218257b30ac22efc9ecb6db))
+
 ## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.0...0.0.0) (2026-05-12)
 
 ### Bug Fixes
 
-* NCWF-1 401 ([#5](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/5)) ([f8f93ef](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/f8f93efff48f1d7198023fed45b675c2e225df36))
+- NCWF-1 401 ([#5](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/5)) ([f8f93ef](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/f8f93efff48f1d7198023fed45b675c2e225df36))
+
 ## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.1...0.0.0) (2026-05-12)
 
 ### Bug Fixes
 
-* NCWF-1 401 ([#6](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/6)) ([6d1e06d](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/6d1e06dfd606b93d029e9c9b84eea6f8b3b6294e))
+- NCWF-1 401 ([#6](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/6)) ([6d1e06d](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/6d1e06dfd606b93d029e9c9b84eea6f8b3b6294e))
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.2...0.0.0) (2026-05-14)
+
+### Bug Fixes
+
+- added missing challenge routes ([61000f8](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/61000f8a22aff8b524664a756cc933834365f923))
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.3...0.0.0) (2026-05-15)
+
+### Bug Fixes
+
+- build error ([51a363a](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/51a363a2432be111b804082df362975047dc8080))
+- NCWF-2 bugs and desing fixes ([#7](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/7)) ([c02414e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c02414ea40177b05a5e62dcf68dcb44efa6d3740))
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.4...0.0.0) (2026-06-01)
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.5...0.0.0) (2026-06-02)
+
+### Bug Fixes
+
+- NCWF-4 Token Issues ([#8](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/8)) ([95eff42](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/95eff42dfe6d9c23ede08c7297614369a1b00d9f))
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.6...0.0.0) (2026-06-06)
+
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.7...0.0.0) (2026-06-10)
+
+### Bug Fixes
+
+- route play-vs-bot to /vs-bot endpoint ([a620735](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/a62073511f2ac912ceb0f6b4730bef37545dd8ea))

Dockerfile

@@ -23,3 +23,4 @@ RUN chmod +x /docker-entrypoint.sh
 
 EXPOSE 80
 ENTRYPOINT ["/docker-entrypoint.sh"]
+#

angular.json

@@ -18,9 +18,7 @@
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
@@ -38,9 +36,7 @@
                 "output": "/assets/ChessAssets"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ]
+            "styles": ["src/styles.css"]
           },
           "configurations": {
             "production": {
@@ -106,10 +102,7 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               {
@@ -127,9 +120,7 @@
                 "output": "/assets/ChessAssets"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ]
+            "styles": ["src/styles.css"]
           }
         }
       }

docs/board-api-spec.yaml

@@ -55,7 +55,6 @@ tags:
     description: Export a game as FEN or PGN
 
 paths:
-
   # ---------------------------------------------------------------------------
   # Game lifecycle
   # ---------------------------------------------------------------------------
@@ -467,7 +466,6 @@ paths:
 # =============================================================================
 
 components:
-
   securitySchemes:
     bearerAuth:
       type: http
@@ -517,7 +515,6 @@ components:
             $ref: '#/components/schemas/ApiError'
 
   schemas:
-
     # -------------------------------------------------------------------------
     # Requests
     # -------------------------------------------------------------------------
@@ -551,7 +548,7 @@ components:
         pgn:
           type: string
           description: PGN text (headers and move list)
-          example: "1. e4 e5 2. Nf3 Nc6 *"
+          example: '1. e4 e5 2. Nf3 Nc6 *'
 
     # -------------------------------------------------------------------------
     # Game state
@@ -587,7 +584,7 @@ components:
         pgn:
           type: string
           description: PGN move text for the full game so far
-          example: "1. e4"
+          example: '1. e4'
         turn:
           type: string
           enum: [white, black]

proxy.conf.json

@@ -1,4 +1,14 @@
 {
+  "/api/analysis": {
+    "target": "http://localhost:8087",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/api/tournament": {
+    "target": "http://localhost:8089",
+    "secure": false,
+    "changeOrigin": true
+  },
   "/api/account": {
     "target": "http://localhost:8083",
     "secure": false,
@@ -9,6 +19,12 @@
     "secure": false,
     "changeOrigin": true
   },
+  "/api/user/ws": {
+    "target": "http://localhost:8084",
+    "secure": false,
+    "changeOrigin": true,
+    "ws": true
+  },
   "/api": {
     "target": "http://localhost:8080",
     "secure": false,

public/env.template.js

@@ -1,4 +1,4 @@
 window.__RUNTIME_CONFIG__ = {
-  API_URL: "${API_URL}",
-  WEBSOCKET_URL: "${WEBSOCKET_URL}"
+  API_URL: '${API_URL}',
+  WEBSOCKET_URL: '${WEBSOCKET_URL}',
 };

src/app/app.config.ts

@@ -1,4 +1,8 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
 
@@ -10,6 +14,6 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideHttpClient(withInterceptors([authInterceptor])),
-    provideRouter(routes)
-  ]
+    provideRouter(routes),
+  ],
 };

src/app/app.html

@@ -1,2 +1 @@
-<app-toolbar />
-<router-outlet />
+<app-toolbar /> <router-outlet />

src/app/app.routes.ts

@@ -2,10 +2,20 @@ import { Routes } from '@angular/router';
 import { GameComponent } from './pages/game/game.component';
 import { WelcomeComponent } from './pages/welcome/welcome.component';
 import { ProfileComponent } from './pages/profile/profile.component';
+import { ChallengesComponent } from './pages/challenges/challenges.component';
+import { GamesComponent } from './pages/games/games.component';
+import { TournamentsComponent } from './pages/tournaments/tournaments.component';
+import { BotsComponent } from './pages/bots/bots.component';
+import { AnalysisComponent } from './pages/analysis/analysis.component';
 
 export const routes: Routes = [
   { path: '', component: WelcomeComponent },
   { path: 'profile', component: ProfileComponent },
+  { path: 'games', component: GamesComponent },
+  { path: 'challenges', component: ChallengesComponent },
+  { path: 'tournaments', component: TournamentsComponent },
+  { path: 'bots', component: BotsComponent },
+  { path: 'analysis', component: AnalysisComponent },
   { path: 'game/:gameId', component: GameComponent },
-  { path: '**', redirectTo: '' }
+  { path: '**', redirectTo: '' },
 ];

src/app/app.spec.ts

@@ -1,12 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
 import { App } from './app';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
-      providers: [provideRouter([])]
+      providers: [provideRouter([]), provideHttpClient()],
     }).compileComponents();
   });
 

src/app/app.ts

@@ -7,10 +7,10 @@ import { ThemeService } from './services/theme.service';
   selector: 'app-root',
   imports: [RouterOutlet, ToolbarComponent],
   templateUrl: './app.html',
-  styleUrl: './app.css'
+  styleUrl: './app.css',
 })
 export class App implements OnInit {
-  constructor(private readonly themeService: ThemeService) { }
+  constructor(private readonly themeService: ThemeService) {}
 
   ngOnInit(): void {
     this.themeService.initTheme();

src/app/button-template.css

@@ -12,7 +12,11 @@
   letter-spacing: 1px;
   cursor: pointer;
   box-shadow: var(--btn-glow);
-  transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease,
+    background 1.6s ease,
+    box-shadow 1.6s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/app/components/annotated-move-list/annotated-move-list.component.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+}
+
+.empty {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  padding: 12px 16px;
+  font-family: var(--nc-mono, monospace);
+  letter-spacing: 0.06em;
+}
+
+.move-grid {
+  display: grid;
+  grid-template-columns: 28px 1fr 1fr;
+  gap: 2px 4px;
+  padding: 8px 12px;
+  font-family: var(--nc-mono, monospace);
+  font-size: 12px;
+}
+
+.mv-num {
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.04em;
+}
+
+.mv {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 0.8);
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+.mv:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+}
+
+.mv.active {
+  background: rgba(255, 69, 200, 0.18);
+  color: #fff;
+}
+
+.mv-empty {
+  cursor: default;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.mv-empty:hover {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.mv-san {
+  flex: 1;
+}
+
+.mv-placeholder {
+  opacity: 0.4;
+}
+
+/* Quality badges */
+.mv-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 4px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.q-brilliant .mv-badge,
+.mv-badge.q-brilliant {
+  color: #5ee5a1;
+  background: rgba(94, 229, 161, 0.15);
+}
+
+.q-best .mv-badge,
+.mv-badge.q-best {
+  color: #5ee5a1;
+  background: rgba(94, 229, 161, 0.1);
+}
+
+.q-inaccuracy .mv-badge,
+.mv-badge.q-inaccuracy {
+  color: #ffb13a;
+  background: rgba(255, 177, 58, 0.15);
+}
+
+.q-mistake .mv-badge,
+.mv-badge.q-mistake {
+  color: #ff7a7a;
+  background: rgba(255, 122, 122, 0.15);
+}
+
+.q-blunder .mv-badge,
+.mv-badge.q-blunder {
+  color: #ff4444;
+  background: rgba(255, 68, 68, 0.18);
+}

src/app/components/annotated-move-list/annotated-move-list.component.html

@@ -0,0 +1,48 @@
+@if (moves.length === 0) {
+  <div class="empty">No annotated moves yet.</div>
+} @else {
+  <div class="move-grid" role="list">
+    @for (pair of pairs; track $index) {
+      <div class="mv-num" role="presentation">{{ $index + 1 }}</div>
+
+      <div
+        class="mv"
+        [class.active]="isWhiteActive($index)"
+        [class]="qualityClass(pair.white)"
+        role="listitem"
+        tabindex="0"
+        (click)="selectWhite($index)"
+        (keydown.enter)="selectWhite($index)"
+      >
+        <span class="mv-san">{{ pair.white?.san ?? '' }}</span>
+        @if (qualityLabel(pair.white)) {
+          <span class="mv-badge" [class]="qualityClass(pair.white)">{{
+            qualityLabel(pair.white)
+          }}</span>
+        }
+      </div>
+
+      <div
+        class="mv"
+        [class.active]="isBlackActive($index)"
+        [class.mv-empty]="!pair.black"
+        [class]="qualityClass(pair.black)"
+        role="listitem"
+        [attr.tabindex]="pair.black ? 0 : null"
+        (click)="selectBlack($index, pair.black)"
+        (keydown.enter)="selectBlack($index, pair.black)"
+      >
+        @if (pair.black) {
+          <span class="mv-san">{{ pair.black.san }}</span>
+          @if (qualityLabel(pair.black)) {
+            <span class="mv-badge" [class]="qualityClass(pair.black)">{{
+              qualityLabel(pair.black)
+            }}</span>
+          }
+        } @else {
+          <span class="mv-san mv-placeholder">…</span>
+        }
+      </div>
+    }
+  </div>
+}

src/app/components/annotated-move-list/annotated-move-list.component.ts

@@ -0,0 +1,83 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AnnotatedMove, MoveQuality } from '../../models/analysis.models';
+
+interface AnnotatedPair {
+  white: AnnotatedMove | null;
+  black: AnnotatedMove | null;
+}
+
+const QUALITY_LABELS: Record<MoveQuality, string> = {
+  brilliant: '!!',
+  best: '!',
+  good: '',
+  inaccuracy: '?!',
+  mistake: '?',
+  blunder: '??',
+};
+
+const QUALITY_CLASSES: Record<MoveQuality, string> = {
+  brilliant: 'q-brilliant',
+  best: 'q-best',
+  good: 'q-good',
+  inaccuracy: 'q-inaccuracy',
+  mistake: 'q-mistake',
+  blunder: 'q-blunder',
+};
+
+@Component({
+  selector: 'app-annotated-move-list',
+  standalone: true,
+  imports: [],
+  templateUrl: './annotated-move-list.component.html',
+  styleUrl: './annotated-move-list.component.css',
+})
+export class AnnotatedMoveListComponent {
+  @Input({ required: true }) moves: AnnotatedMove[] = [];
+  @Input() activePly: number | null = null;
+  @Output() plySelected = new EventEmitter<number>();
+
+  get pairs(): AnnotatedPair[] {
+    const result: AnnotatedPair[] = [];
+    for (let i = 0; i < this.moves.length; i += 2) {
+      result.push({
+        white: this.moves[i] ?? null,
+        black: this.moves[i + 1] ?? null,
+      });
+    }
+    return result;
+  }
+
+  qualityLabel(move: AnnotatedMove | null): string {
+    if (!move?.quality) return '';
+    return QUALITY_LABELS[move.quality] ?? '';
+  }
+
+  qualityClass(move: AnnotatedMove | null): string {
+    if (!move?.quality) return '';
+    return QUALITY_CLASSES[move.quality] ?? '';
+  }
+
+  isWhiteActive(pairIndex: number): boolean {
+    return this.activePly === pairIndex * 2;
+  }
+
+  isBlackActive(pairIndex: number): boolean {
+    return this.activePly === pairIndex * 2 + 1;
+  }
+
+  selectWhite(pairIndex: number): void {
+    this.plySelected.emit(pairIndex * 2);
+  }
+
+  selectBlack(pairIndex: number, black: AnnotatedMove | null): void {
+    if (!black) return;
+    this.plySelected.emit(pairIndex * 2 + 1);
+  }
+
+  formatEval(move: AnnotatedMove | null): string {
+    if (!move || move.evalAfter === null) return '';
+    const v = move.evalAfter;
+    const sign = v > 0 ? '+' : '';
+    return `${sign}${v.toFixed(2)}`;
+  }
+}

src/app/components/board-actions-bar/board-actions-bar.component.css

@@ -0,0 +1,54 @@
+.board-actions {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+}
+
+.board-actions.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.btn {
+  flex: 1;
+  font-family: var(--nc-sans);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 8px 10px;
+  cursor: pointer;
+  border: 1px solid var(--nc-border-strong);
+  background: var(--nc-btn-bg, rgba(255, 255, 255, 0.03));
+  color: var(--nc-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.btn:hover:not(:disabled) {
+  background: var(--nc-btn-hover-bg, rgba(255, 255, 255, 0.07));
+  border-color: var(--nc-text-muted);
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  color: var(--nc-danger);
+  border-color: var(--nc-danger-soft, rgba(255, 122, 122, 0.3));
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--nc-danger-bg, rgba(255, 122, 122, 0.08));
+  border-color: var(--nc-danger);
+}

src/app/components/board-actions-bar/board-actions-bar.component.html

@@ -0,0 +1,54 @@
+<div class="board-actions" [class.disabled]="isGameFinished">
+  <button class="btn" type="button" [disabled]="isGameFinished" (click)="takeback.emit()">
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M21 7v6h-6" />
+      <path d="M3 17a9 9 0 0 0 15.5-6" />
+      <path d="M3 7a9 9 0 0 1 15.5 6" />
+    </svg>
+    Takeback
+  </button>
+
+  <button class="btn" type="button" [disabled]="isGameFinished" (click)="offerDraw.emit()">
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14" />
+      <polyline points="12 5 19 12 12 19" />
+      <polyline points="12 19 5 12 12 5" />
+    </svg>
+    Offer Draw
+  </button>
+
+  <button class="btn btn-danger" type="button" [disabled]="isGameFinished" (click)="resign.emit()">
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M4 4l16 16" />
+      <path d="M4 20l16-16" />
+    </svg>
+    Resign
+  </button>
+</div>

src/app/components/board-actions-bar/board-actions-bar.component.ts

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-board-actions-bar',
+  standalone: true,
+  imports: [],
+  templateUrl: './board-actions-bar.component.html',
+  styleUrl: './board-actions-bar.component.css',
+})
+export class BoardActionsBarComponent {
+  @Input() undoAvailable = false;
+  @Input() isGameFinished = false;
+  @Output() takeback = new EventEmitter<void>();
+  @Output() offerDraw = new EventEmitter<void>();
+  @Output() resign = new EventEmitter<void>();
+}

src/app/components/challenge-create-dialog/challenge-create-dialog.component.css

@@ -23,7 +23,9 @@
   background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
   border: 2px solid #00d5ff;
   border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  box-shadow:
+    0 0 20px rgba(0, 213, 255, 0.3),
+    inset 0 0 10px rgba(0, 213, 255, 0.05);
   width: 90%;
   max-width: 500px;
   max-height: 90vh;

src/app/components/challenge-create-dialog/challenge-create-dialog.component.html

@@ -1,93 +1,117 @@
 <div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
-    <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
-        <div class="dialog-header">
-            <h2>Create Challenge</h2>
-            <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
-        </div>
-
-        <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
-            <!-- Error Message -->
-            <div *ngIf="errorMessage" class="error-message">
-                {{ errorMessage }}
-            </div>
-
-            <!-- Target Username -->
-            <div class="form-group">
-                <label for="targetUsername">Opponent Username</label>
-                <input type="text" id="targetUsername" formControlName="targetUsername"
-                    placeholder="Enter opponent's username" [disabled]="loading" required />
-                <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
-                    Username is required
-                </small>
-            </div>
-
-            <!-- Player Color Selection -->
-            <div class="form-group">
-                <label for="color">Play as</label>
-                <select id="color" formControlName="color" [disabled]="loading">
-                    <option value="white">White</option>
-                    <option value="black">Black</option>
-                    <option value="random">Random</option>
-                </select>
-            </div>
-
-            <!-- Time Control Mode Selection -->
-            <div class="form-group">
-                <label for="timeMode">Time Control</label>
-                <select id="timeMode" formControlName="timeMode" [disabled]="loading">
-                    <option value="blitz">Blitz</option>
-                    <option value="rapid">Rapid</option>
-                    <option value="classical">Classical</option>
-                    <option value="unlimited">Unlimited</option>
-                </select>
-            </div>
-
-            <!-- Time Presets -->
-            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
-                <label>Presets</label>
-                <div class="preset-buttons">
-                    <button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
-                        (click)="selectPreset(preset)" [disabled]="loading">
-                        {{ preset.label }}
-                    </button>
-                </div>
-            </div>
-
-            <!-- Custom Time Control -->
-            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
-                <div class="form-row">
-                    <div class="form-col">
-                        <label for="limitMinutes">Time (minutes)</label>
-                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000"
-                            [disabled]="loading" />
-                    </div>
-                    <div class="form-col">
-                        <label for="incrementSeconds">Increment (seconds)</label>
-                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300"
-                            [disabled]="loading" />
-                    </div>
-                </div>
-            </div>
-
-            <!-- TTL (Time to Live) -->
-            <div class="form-group">
-                <label for="ttlSeconds">Challenge Expires In</label>
-                <select id="ttlSeconds" formControlName="ttlSeconds" [disabled]="loading">
-                    <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
-                        {{ ttl.label }}
-                    </option>
-                </select>
-            </div>
-
-            <!-- Buttons -->
-            <div class="dialog-buttons">
-                <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
-                    Cancel
-                </button>
-                <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
-                    {{ loading ? 'Sending...' : 'Send Challenge' }}
-                </button>
-            </div>
-        </form>
+  <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
+    <div class="dialog-header">
+      <h2>Create Challenge</h2>
+      <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
     </div>
-</div>
+
+    <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
+      <!-- Error Message -->
+      <div *ngIf="errorMessage" class="error-message">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Target Username -->
+      <div class="form-group">
+        <label for="targetUsername">Opponent Username</label>
+        <input
+          type="text"
+          id="targetUsername"
+          formControlName="targetUsername"
+          placeholder="Enter opponent's username"
+          required
+        />
+        <small
+          *ngIf="
+            form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched
+          "
+        >
+          Username is required
+        </small>
+      </div>
+
+      <!-- Player Color Selection -->
+      <div class="form-group">
+        <label for="color">Play as</label>
+        <select id="color" formControlName="color">
+          <option value="white">White</option>
+          <option value="black">Black</option>
+          <option value="random">Random</option>
+        </select>
+      </div>
+
+      <!-- Time Control Mode Selection -->
+      <div class="form-group">
+        <label for="timeMode">Time Control</label>
+        <select id="timeMode" formControlName="timeMode">
+          <option value="blitz">Blitz</option>
+          <option value="rapid">Rapid</option>
+          <option value="classical">Classical</option>
+          <option value="unlimited">Unlimited</option>
+        </select>
+      </div>
+
+      <!-- Time Presets -->
+      <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+        <label>Presets</label>
+        <div class="preset-buttons">
+          <button
+            type="button"
+            *ngFor="let preset of getAvailablePresets()"
+            class="preset-btn"
+            (click)="selectPreset(preset)"
+            [disabled]="loading"
+          >
+            {{ preset.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Custom Time Control -->
+      <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+        <div class="form-row">
+          <div class="form-col">
+            <label for="limitMinutes">Time (minutes)</label>
+            <input
+              type="number"
+              id="limitMinutes"
+              formControlName="limitMinutes"
+              min="1"
+              max="1000"
+            />
+          </div>
+          <div class="form-col">
+            <label for="incrementSeconds">Increment (seconds)</label>
+            <input
+              type="number"
+              id="incrementSeconds"
+              formControlName="incrementSeconds"
+              min="0"
+              max="300"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- TTL (Time to Live) -->
+      <div class="form-group">
+        <label for="ttlSeconds">Challenge Expires In</label>
+        <select id="ttlSeconds" formControlName="ttlSeconds">
+          <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
+            {{ ttl.label }}
+          </option>
+        </select>
+      </div>
+
+      <!-- Buttons -->
+      <div class="dialog-buttons">
+        <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
+          Cancel
+        </button>
+        <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
+          {{ loading ? 'Sending...' : 'Send Challenge' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/components/challenge-create-dialog/challenge-create-dialog.component.ts

@@ -1,6 +1,20 @@
-import { Component, inject, OnInit, OnDestroy, DestroyRef, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  inject,
+  OnInit,
+  OnDestroy,
+  DestroyRef,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormBuilder,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { finalize } from 'rxjs';
 import { ChallengeService } from '../../services/challenge.service';
@@ -11,149 +25,155 @@ import { PlayerColor } from '../../models/challenge.models';
 type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
 
 interface TimePreset {
-    label: string;
-    limitSeconds: number;
-    incrementSeconds: number;
+  label: string;
+  limitSeconds: number;
+  incrementSeconds: number;
 }
 
 @Component({
-    selector: 'app-challenge-create-dialog',
-    standalone: true,
-    imports: [CommonModule, FormsModule, ReactiveFormsModule],
-    templateUrl: './challenge-create-dialog.component.html',
-    styleUrls: ['./challenge-create-dialog.component.css']
+  selector: 'app-challenge-create-dialog',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './challenge-create-dialog.component.html',
+  styleUrls: ['./challenge-create-dialog.component.css'],
 })
 export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
-    private readonly challengeService = inject(ChallengeService);
-    private readonly router = inject(Router);
-    private readonly fb = inject(FormBuilder);
-    private readonly destroyRef = inject(DestroyRef);
+  private readonly challengeService = inject(ChallengeService);
+  private readonly router = inject(Router);
+  private readonly fb = inject(FormBuilder);
+  private readonly destroyRef = inject(DestroyRef);
 
-    @Output() closeChallengeDialog = new EventEmitter<void>();
+  @Output() closeChallengeDialog = new EventEmitter<void>();
 
-    form!: FormGroup;
-    loading = false;
-    errorMessage = '';
-    selectedTimeMode: TimeMode = 'rapid';
+  form!: FormGroup;
+  loading = false;
+  errorMessage = '';
+  selectedTimeMode: TimeMode = 'rapid';
 
-    timePresets: Record<TimeMode, TimePreset[]> = {
-        blitz: [
-            { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
-            { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
-            { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
-            { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
-            { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
-        ],
-        rapid: [
-            { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
-            { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
-            { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
-            { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
-        ],
-        classical: [
-            { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
-            { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
-            { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
-            { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
-        ],
-        unlimited: []
-    };
+  timePresets: Record<TimeMode, TimePreset[]> = {
+    blitz: [
+      { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
+      { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
+      { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
+      { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
+      { label: '5+0', limitSeconds: 300, incrementSeconds: 0 },
+    ],
+    rapid: [
+      { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
+      { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
+      { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
+      { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 },
+    ],
+    classical: [
+      { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
+      { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
+      { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
+      { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 },
+    ],
+    unlimited: [],
+  };
 
-    ttlOptions = [
-        { label: '5 minutes', seconds: 300 },
-        { label: '1 hour', seconds: 3600 },
-        { label: '1 day', seconds: 86400 },
-        { label: 'No expiry', seconds: 0 }
-    ];
+  ttlOptions = [
+    { label: '5 minutes', seconds: 300 },
+    { label: '1 hour', seconds: 3600 },
+    { label: '1 day', seconds: 86400 },
+    { label: 'No expiry', seconds: 0 },
+  ];
 
-    ngOnInit(): void {
-        this.initializeForm();
-    }
+  ngOnInit(): void {
+    this.initializeForm();
+  }
 
-    ngOnDestroy(): void {
-    }
+  ngOnDestroy(): void {}
 
-    private initializeForm(): void {
-        this.form = this.fb.group({
-            targetUsername: ['', [Validators.required, Validators.minLength(1)]],
-            color: ['random', Validators.required],
-            timeMode: ['rapid'],
-            limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
-            incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
-            ttlSeconds: [3600, Validators.required]
-        });
+  private initializeForm(): void {
+    this.form = this.fb.group({
+      targetUsername: ['', [Validators.required, Validators.minLength(1)]],
+      color: ['random', Validators.required],
+      timeMode: ['rapid'],
+      limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
+      incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
+      ttlSeconds: [3600, Validators.required],
+    });
 
-        this.form.get('timeMode')?.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((mode: unknown) => {
-                const timeMode = mode as TimeMode;
-                this.selectedTimeMode = timeMode;
-                if (timeMode !== 'unlimited') {
-                    const firstPreset = this.timePresets[timeMode][0];
-                    if (firstPreset) {
-                        this.form.patchValue({
-                            limitMinutes: firstPreset.limitSeconds / 60,
-                            incrementSeconds: firstPreset.incrementSeconds
-                        });
-                    }
-                }
+    this.form
+      .get('timeMode')
+      ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((mode: unknown) => {
+        const timeMode = mode as TimeMode;
+        this.selectedTimeMode = timeMode;
+        if (timeMode !== 'unlimited') {
+          const firstPreset = this.timePresets[timeMode][0];
+          if (firstPreset) {
+            this.form.patchValue({
+              limitMinutes: firstPreset.limitSeconds / 60,
+              incrementSeconds: firstPreset.incrementSeconds,
             });
-    }
-
-    selectPreset(preset: TimePreset): void {
-        this.form.patchValue({
-            limitMinutes: preset.limitSeconds / 60,
-            incrementSeconds: preset.incrementSeconds
-        });
-    }
-
-    getAvailablePresets(): TimePreset[] {
-        return this.timePresets[this.selectedTimeMode] || [];
-    }
-
-    submit(): void {
-        if (this.form.invalid || this.loading) {
-            return;
+          }
         }
+      });
+  }
 
-        const targetUsername = this.form.get('targetUsername')?.value?.trim();
-        if (!targetUsername) {
-            this.errorMessage = 'Please enter a valid username';
-            return;
-        }
+  selectPreset(preset: TimePreset): void {
+    this.form.patchValue({
+      limitMinutes: preset.limitSeconds / 60,
+      incrementSeconds: preset.incrementSeconds,
+    });
+  }
 
-        this.errorMessage = '';
-        this.loading = true;
+  getAvailablePresets(): TimePreset[] {
+    return this.timePresets[this.selectedTimeMode] || [];
+  }
 
-        const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
-        const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
-        const ttlSeconds = this.form.get('ttlSeconds')?.value;
-        const color = (this.form.get('color')?.value || 'random') as PlayerColor;
-
-        this.challengeService.sendChallenge(targetUsername, {
-            timeControl: {
-                limitSeconds,
-                incrementSeconds
-            },
-            color,
-            ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
-        })
-            .pipe(finalize(() => (this.loading = false)))
-            .subscribe({
-                next: (challenge) => {
-                    // Challenge sent successfully - navigate to challenges page to view status
-                    this.form.reset();
-                    this.closeChallengeDialog.emit();
-                    void this.router.navigate(['/challenges']);
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
-                }
-            });
+  submit(): void {
+    if (this.form.invalid || this.loading) {
+      return;
     }
 
-    cancel(): void {
-        this.form.reset();
-        this.closeChallengeDialog.emit();
+    const targetUsername = this.form.get('targetUsername')?.value?.trim();
+    if (!targetUsername) {
+      this.errorMessage = 'Please enter a valid username';
+      return;
     }
+
+    this.errorMessage = '';
+    this.loading = true;
+    this.form.disable();
+
+    const limitSeconds = Math.round((this.form.getRawValue().limitMinutes || 0) * 60);
+    const { incrementSeconds, ttlSeconds, color: rawColor } = this.form.getRawValue();
+    const color = (rawColor || 'random') as PlayerColor;
+
+    this.challengeService
+      .sendChallenge(targetUsername, {
+        timeControl: {
+          limitSeconds,
+          incrementSeconds,
+        },
+        color,
+        ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined,
+      })
+      .pipe(
+        finalize(() => {
+          this.loading = false;
+          this.form.enable();
+        }),
+      )
+      .subscribe({
+        next: (challenge) => {
+          // Challenge sent successfully - navigate to challenges page to view status
+          this.form.reset();
+          this.closeChallengeDialog.emit();
+          void this.router.navigate(['/challenges']);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
+        },
+      });
+  }
+
+  cancel(): void {
+    this.form.reset();
+    this.closeChallengeDialog.emit();
+  }
 }

src/app/components/challenge-notification/challenge-notification.component.css

@@ -8,7 +8,9 @@
   background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
   border: 2px solid #00d5ff;
   border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  box-shadow:
+    0 0 20px rgba(0, 213, 255, 0.4),
+    inset 0 0 10px rgba(0, 213, 255, 0.05);
   padding: 16px;
   color: #e0e0e0;
   z-index: 2000;
@@ -16,7 +18,9 @@
 
   &.error {
     border-color: #ff6b6b;
-    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
+    box-shadow:
+      0 0 20px rgba(255, 107, 107, 0.4),
+      inset 0 0 10px rgba(255, 107, 107, 0.05);
   }
 
   @media (max-width: 768px) {

src/app/components/challenge-notification/challenge-notification.component.html

@@ -1,38 +1,50 @@
 <div class="challenge-notification" [class.error]="!!errorMessage">
-    <div class="notification-header">
-        <div class="notification-title">
-            <span class="badge">CHALLENGE</span>
-            <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
-        </div>
-        <button type="button" class="close-btn" (click)="onClose()"
-            [disabled]="acceptingChallenge || decliningChallenge">
-            ×
-        </button>
+  <div class="notification-header">
+    <div class="notification-title">
+      <span class="badge">CHALLENGE</span>
+      <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
+    </div>
+    <button
+      type="button"
+      class="close-btn"
+      (click)="onClose()"
+      [disabled]="acceptingChallenge || decliningChallenge"
+    >
+      ×
+    </button>
+  </div>
+
+  <div class="notification-content">
+    <div class="time-control">
+      <span class="label">Time Control:</span>
+      <span class="value">{{ getTimeControlDisplay() }}</span>
     </div>
 
-    <div class="notification-content">
-        <div class="time-control">
-            <span class="label">Time Control:</span>
-            <span class="value">{{ getTimeControlDisplay() }}</span>
-        </div>
-
-        <div class="expiration">
-            <span class="label">{{ getExpirationInfo() }}</span>
-        </div>
-
-        <div *ngIf="errorMessage" class="error-message">
-            {{ errorMessage }}
-        </div>
-
-        <div class="notification-actions">
-            <button type="button" class="btn btn-decline" (click)="onDecline()"
-                [disabled]="acceptingChallenge || decliningChallenge">
-                {{ decliningChallenge ? 'Declining...' : 'Decline' }}
-            </button>
-            <button type="button" class="btn btn-accept" (click)="onAccept()"
-                [disabled]="acceptingChallenge || decliningChallenge">
-                {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
-            </button>
-        </div>
+    <div class="expiration">
+      <span class="label">{{ getExpirationInfo() }}</span>
     </div>
-</div>
+
+    <div *ngIf="errorMessage" class="error-message">
+      {{ errorMessage }}
+    </div>
+
+    <div class="notification-actions">
+      <button
+        type="button"
+        class="btn btn-decline"
+        (click)="onDecline()"
+        [disabled]="acceptingChallenge || decliningChallenge"
+      >
+        {{ decliningChallenge ? 'Declining...' : 'Decline' }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-accept"
+        (click)="onAccept()"
+        [disabled]="acceptingChallenge || decliningChallenge"
+      >
+        {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/challenge-notification/challenge-notification.component.ts

@@ -1,101 +1,110 @@
 import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 import { Challenge } from '../../models/challenge.models';
 import { ChallengeService } from '../../services/challenge.service';
 import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
 
 @Component({
-    selector: 'app-challenge-notification',
-    standalone: true,
-    imports: [CommonModule],
-    templateUrl: './challenge-notification.component.html',
-    styleUrls: ['./challenge-notification.component.css']
+  selector: 'app-challenge-notification',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './challenge-notification.component.html',
+  styleUrls: ['./challenge-notification.component.css'],
 })
 export class ChallengeNotificationComponent {
-    @Input() challenge!: Challenge;
-    @Output() accept = new EventEmitter<Challenge>();
-    @Output() decline = new EventEmitter<Challenge>();
-    @Output() close = new EventEmitter<void>();
+  @Input() challenge!: Challenge;
+  @Output() accept = new EventEmitter<Challenge>();
+  @Output() decline = new EventEmitter<Challenge>();
+  @Output() close = new EventEmitter<void>();
 
-    private readonly challengeService = inject(ChallengeService);
+  private readonly challengeService = inject(ChallengeService);
+  private readonly router = inject(Router);
 
-    acceptingChallenge = false;
-    decliningChallenge = false;
-    errorMessage = '';
+  acceptingChallenge = false;
+  decliningChallenge = false;
+  errorMessage = '';
 
-    onAccept(): void {
-        if (this.acceptingChallenge || this.decliningChallenge) {
-            return;
-        }
-
-        this.acceptingChallenge = true;
-        this.errorMessage = '';
-
-        this.challengeService.acceptChallenge(this.challenge.id)
-            .pipe(finalize(() => (this.acceptingChallenge = false)))
-            .subscribe({
-                next: () => {
-                    this.accept.emit(this.challenge);
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
-                }
-            });
+  onAccept(): void {
+    if (this.acceptingChallenge || this.decliningChallenge) {
+      return;
     }
 
-    onDecline(): void {
-        if (this.acceptingChallenge || this.decliningChallenge) {
-            return;
-        }
+    this.acceptingChallenge = true;
+    this.errorMessage = '';
 
-        this.decliningChallenge = true;
-        this.errorMessage = '';
+    this.challengeService
+      .acceptChallenge(this.challenge.id)
+      .pipe(finalize(() => (this.acceptingChallenge = false)))
+      .subscribe({
+        next: (acceptedChallenge) => {
+          this.accept.emit(acceptedChallenge);
+          if (acceptedChallenge.gameId) {
+            void this.router.navigate(['/game', acceptedChallenge.gameId]);
+          } else {
+            this.errorMessage = 'Challenge accepted, but no game was created.';
+          }
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+        },
+      });
+  }
 
-        this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
-            .pipe(finalize(() => (this.decliningChallenge = false)))
-            .subscribe({
-                next: () => {
-                    this.decline.emit(this.challenge);
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
-                }
-            });
+  onDecline(): void {
+    if (this.acceptingChallenge || this.decliningChallenge) {
+      return;
     }
 
-    onClose(): void {
-        this.close.emit();
+    this.decliningChallenge = true;
+    this.errorMessage = '';
+
+    this.challengeService
+      .declineChallenge(this.challenge.id, { reason: 'generic' })
+      .pipe(finalize(() => (this.decliningChallenge = false)))
+      .subscribe({
+        next: () => {
+          this.decline.emit(this.challenge);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+        },
+      });
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  getTimeControlDisplay(): string {
+    const { limit, increment } = this.challenge.timeControl;
+    if (!limit || !increment) {
+      return 'Unlimited';
+    }
+    const minutes = Math.floor(limit / 60);
+    return `${minutes}+${increment}`;
+  }
+
+  getCreatedByDisplay(): string {
+    return this.challenge.challenger.name;
+  }
+
+  getExpirationInfo(): string {
+    const expiresAt = new Date(this.challenge.expiresAt);
+    const now = new Date();
+    const diffMs = expiresAt.getTime() - now.getTime();
+
+    if (diffMs <= 0) {
+      return 'Expired';
     }
 
-    getTimeControlDisplay(): string {
-        const { limit, increment } = this.challenge.timeControl;
-        if (!limit || !increment) {
-            return 'Unlimited';
-        }
-        const minutes = Math.floor(limit / 60);
-        return `${minutes}+${increment}`;
+    const minutes = Math.floor(diffMs / 60000);
+    if (minutes > 60) {
+      const hours = Math.floor(minutes / 60);
+      return `Expires in ${hours}h`;
     }
 
-    getCreatedByDisplay(): string {
-        return this.challenge.challenger.name;
-    }
-
-    getExpirationInfo(): string {
-        const expiresAt = new Date(this.challenge.expiresAt);
-        const now = new Date();
-        const diffMs = expiresAt.getTime() - now.getTime();
-
-        if (diffMs <= 0) {
-            return 'Expired';
-        }
-
-        const minutes = Math.floor(diffMs / 60000);
-        if (minutes > 60) {
-            const hours = Math.floor(minutes / 60);
-            return `Expires in ${hours}h`;
-        }
-
-        return `Expires in ${minutes}m`;
-    }
+    return `Expires in ${minutes}m`;
+  }
 }

src/app/components/chess-board/chess-board.component.html

@@ -1,5 +1,9 @@
 <div class="board-shell">
-  <div class="board-grid" [class.board-grid--classic]="boardTheme === 'classic'" [class.board-grid--arabian]="boardTheme === 'arabian'">
+  <div
+    class="board-grid"
+    [class.board-grid--classic]="boardTheme === 'classic'"
+    [class.board-grid--arabian]="boardTheme === 'arabian'"
+  >
     @for (square of squares; track trackByCoordinate($index, square)) {
       <button
         type="button"
@@ -27,6 +31,10 @@
   </div>
 
   @if (boardTheme === 'arabian') {
-    <img class="board-bottom" src="/assets/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
+    <img
+      class="board-bottom"
+      src="/assets/arabian-chess/sprites/board/board_bottom.png"
+      alt="Board frame"
+    />
   }
 </div>

src/app/components/chess-board/chess-board.component.ts

@@ -14,7 +14,7 @@ type BoardTheme = 'arabian' | 'classic';
   standalone: true,
   imports: [ChessPieceComponent],
   templateUrl: './chess-board.component.html',
-  styleUrl: './chess-board.component.css'
+  styleUrl: './chess-board.component.css',
 })
 export class ChessBoardComponent implements OnChanges {
   @Input({ required: true }) fen = '';
@@ -150,7 +150,7 @@ export class ChessBoardComponent implements OnChanges {
     return {
       coordinate: `${file}${rank}`,
       isLight: (rowIndex + column) % 2 === 0,
-      pieceCode
+      pieceCode,
     };
   }
 

src/app/components/chess-piece/chess-piece.component.ts

@@ -6,7 +6,7 @@ type BoardTheme = 'arabian' | 'classic';
   selector: 'app-chess-piece',
   standalone: true,
   templateUrl: './chess-piece.component.html',
-  styleUrl: './chess-piece.component.css'
+  styleUrl: './chess-piece.component.css',
 })
 export class ChessPieceComponent {
   @Input({ required: true }) pieceCode: string | null = null;

src/app/components/eval-timeline/eval-timeline.component.css

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.timeline-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+
+.timeline-svg {
+  display: block;
+  width: 100%;
+  height: 80px;
+}
+
+.midline {
+  stroke: rgba(255, 255, 255, 0.12);
+  stroke-width: 1;
+  stroke-dasharray: 4 4;
+}
+
+.area-white {
+  fill: rgba(255, 255, 255, 0.18);
+}
+
+.area-black {
+  fill: rgba(20, 20, 30, 0.55);
+}
+
+.eval-line {
+  fill: none;
+  stroke: var(--nc-neon, #ff45c8);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.active-marker {
+  stroke: var(--nc-warning, #ffb13a);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 3;
+  opacity: 0.8;
+}
+
+.empty {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  padding: 12px 0;
+  font-family: var(--nc-mono, monospace);
+  letter-spacing: 0.06em;
+  text-align: center;
+}

src/app/components/eval-timeline/eval-timeline.component.html

@@ -0,0 +1,53 @@
+@if (points.length === 0) {
+  <div class="empty">No evaluation data yet.</div>
+} @else {
+  <div class="timeline-wrap" role="img" aria-label="Evaluation timeline">
+    <svg
+      class="timeline-svg"
+      [attr.viewBox]="'0 0 ' + svgWidth + ' ' + svgHeight"
+      preserveAspectRatio="none"
+    >
+      <!-- Midline (balanced) -->
+      <line
+        x1="0"
+        [attr.y1]="svgHeight / 2"
+        [attr.x2]="svgWidth"
+        [attr.y2]="svgHeight / 2"
+        class="midline"
+      />
+
+      <!-- White-advantage fill (clip above midline) -->
+      <defs>
+        <clipPath id="clip-white">
+          <rect x="0" y="0" [attr.width]="svgWidth" [attr.height]="svgHeight / 2" />
+        </clipPath>
+        <clipPath id="clip-black">
+          <rect
+            x="0"
+            [attr.y]="svgHeight / 2"
+            [attr.width]="svgWidth"
+            [attr.height]="svgHeight / 2"
+          />
+        </clipPath>
+      </defs>
+
+      <polygon [attr.points]="polylineWhite" class="area-white" clip-path="url(#clip-white)" />
+
+      <polygon [attr.points]="polylineBlack" class="area-black" clip-path="url(#clip-black)" />
+
+      <!-- Eval line -->
+      <polyline [attr.points]="evalPolyline" class="eval-line" />
+
+      <!-- Active ply marker -->
+      @if (activeX() !== null) {
+        <line
+          [attr.x1]="activeX()"
+          y1="0"
+          [attr.x2]="activeX()"
+          [attr.y2]="svgHeight"
+          class="active-marker"
+        />
+      }
+    </svg>
+  </div>
+}

src/app/components/eval-timeline/eval-timeline.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { AnnotatedMove } from '../../models/analysis.models';
+
+interface TimelinePoint {
+  x: number;
+  y: number;
+  eval: number;
+  san: string;
+  plyIndex: number;
+}
+
+const CLAMP = 5; // clamp eval to ±5 pawns for display
+const HEIGHT = 80;
+const WIDTH = 600;
+
+@Component({
+  selector: 'app-eval-timeline',
+  standalone: true,
+  imports: [],
+  templateUrl: './eval-timeline.component.html',
+  styleUrl: './eval-timeline.component.css',
+})
+export class EvalTimelineComponent implements OnChanges {
+  @Input({ required: true }) moves: AnnotatedMove[] = [];
+  @Input() activePly: number | null = null;
+
+  points: TimelinePoint[] = [];
+  evalPolyline = '';
+  polylineWhite = '';
+  polylineBlack = '';
+  svgWidth = WIDTH;
+  svgHeight = HEIGHT;
+
+  ngOnChanges(): void {
+    this.buildChart();
+  }
+
+  activeX(): number | null {
+    if (this.activePly === null) return null;
+    const pt = this.points[this.activePly];
+    return pt ? pt.x : null;
+  }
+
+  private buildChart(): void {
+    if (this.moves.length === 0) {
+      this.points = [];
+      this.evalPolyline = '';
+      this.polylineWhite = '';
+      this.polylineBlack = '';
+      return;
+    }
+
+    const total = this.moves.length;
+    this.points = this.moves.map((m, i) => {
+      const evalValue = m.evalAfter ?? 0;
+      const clamped = Math.max(-CLAMP, Math.min(CLAMP, evalValue));
+      const x = (i / Math.max(total - 1, 1)) * WIDTH;
+      // y=0 => white winning (top), y=HEIGHT => black winning (bottom)
+      const y = ((CLAMP - clamped) / (CLAMP * 2)) * HEIGHT;
+      return { x, y, eval: evalValue, san: m.san, plyIndex: i };
+    });
+
+    const coordStr = this.points.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+    this.evalPolyline = coordStr;
+
+    const mid = HEIGHT / 2;
+    const first = this.points[0];
+    const last = this.points[this.points.length - 1];
+
+    this.polylineWhite = `${first.x.toFixed(1)},${mid} ${coordStr} ${last.x.toFixed(1)},${mid}`;
+    this.polylineBlack = this.polylineWhite;
+  }
+}

src/app/components/export-panel/export-panel.component.css

@@ -0,0 +1,136 @@
+.card {
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.disclose summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+}
+
+.disclose summary::-webkit-details-marker {
+  display: none;
+}
+
+.panel-title {
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--nc-text-muted);
+  font-weight: 600;
+}
+
+.chev {
+  color: var(--nc-text-dim);
+  display: flex;
+  transition: transform 0.2s;
+}
+
+.disclose[open] .chev {
+  transform: rotate(180deg);
+}
+
+.disclose[open] summary {
+  border-bottom: 1px solid var(--nc-border);
+}
+
+.panel-body {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Segmented control */
+.seg {
+  display: flex;
+  border: 1px solid var(--nc-border);
+  padding: 2px;
+  background: var(--nc-seg-bg, rgba(0, 0, 0, 0.2));
+}
+
+.seg-btn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--nc-text-muted);
+  padding: 7px 10px;
+  font-size: 11px;
+  font-family: var(--nc-sans);
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.seg-btn.active {
+  background: var(--nc-neon);
+  color: #fff;
+  font-weight: 700;
+}
+
+.export-out {
+  width: 100%;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  padding: 10px;
+  resize: vertical;
+  min-height: 70px;
+  line-height: 1.5;
+}
+
+.export-out:focus {
+  outline: none;
+  border-color: var(--nc-neon-soft);
+}
+
+.export-row {
+  display: flex;
+  gap: 6px;
+}
+
+/* Buttons */
+.btn {
+  flex: 1;
+  font-family: var(--nc-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 8px 10px;
+  cursor: pointer;
+  border: 1px solid var(--nc-border-strong);
+  background: var(--nc-btn-bg, rgba(255, 255, 255, 0.03));
+  color: var(--nc-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.btn:hover {
+  background: var(--nc-btn-hover-bg, rgba(255, 255, 255, 0.07));
+  border-color: var(--nc-text-muted);
+}
+
+.copy-notice {
+  margin: 0;
+  font-size: 11px;
+  color: var(--nc-success);
+  font-family: var(--nc-mono);
+  letter-spacing: 0.04em;
+}

src/app/components/export-panel/export-panel.component.html

@@ -0,0 +1,90 @@
+<details class="card disclose">
+  <summary>
+    <span class="panel-title">Export Position</span>
+    <span class="chev" aria-hidden="true">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </span>
+  </summary>
+
+  <div class="panel-body">
+    <div class="seg" role="tablist" aria-label="Export format">
+      <button
+        class="seg-btn"
+        [class.active]="exportKind === 'fen'"
+        role="tab"
+        [attr.aria-selected]="exportKind === 'fen'"
+        (click)="setKind('fen')"
+      >
+        FEN
+      </button>
+      <button
+        class="seg-btn"
+        [class.active]="exportKind === 'pgn'"
+        role="tab"
+        [attr.aria-selected]="exportKind === 'pgn'"
+        (click)="setKind('pgn')"
+      >
+        PGN
+      </button>
+    </div>
+
+    <textarea
+      class="export-out"
+      [value]="exportValue"
+      [placeholder]="exportPlaceholder"
+      rows="4"
+      readonly
+    ></textarea>
+
+    <div class="export-row">
+      <button class="btn" type="button" (click)="copy()">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="9" y="9" width="13" height="13" rx="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+        Copy
+      </button>
+      <button class="btn" type="button" (click)="download()">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+        Download
+      </button>
+    </div>
+
+    @if (copyNotice) {
+      <p class="copy-notice">{{ copyNotice }}</p>
+    }
+  </div>
+</details>

src/app/components/export-panel/export-panel.component.ts

@@ -0,0 +1,79 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+type ExportKind = 'fen' | 'pgn';
+
+@Component({
+  selector: 'app-export-panel',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './export-panel.component.html',
+  styleUrl: './export-panel.component.css',
+})
+export class ExportPanelComponent implements OnChanges {
+  @Input() fen = '';
+  @Input() pgn = '';
+
+  exportKind: ExportKind = 'fen';
+  exportValue = '';
+  copyNotice = '';
+  private copyNoticeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  get exportPlaceholder(): string {
+    return this.exportKind === 'fen' ? 'FEN will appear here' : 'PGN will appear here';
+  }
+
+  ngOnChanges(): void {
+    this.syncValue();
+  }
+
+  setKind(kind: ExportKind): void {
+    this.exportKind = kind;
+    this.syncValue();
+  }
+
+  copy(): void {
+    if (!this.exportValue.trim()) {
+      return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+      this.showNotice('Ready in the text box.');
+      return;
+    }
+
+    void navigator.clipboard
+      .writeText(this.exportValue)
+      .then(() => this.showNotice('Copied!'))
+      .catch(() => this.showNotice('Ready in the text box.'));
+  }
+
+  download(): void {
+    if (!this.exportValue.trim()) {
+      return;
+    }
+
+    const ext = this.exportKind === 'pgn' ? 'pgn' : 'txt';
+    const blob = new Blob([this.exportValue], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `game.${ext}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  private syncValue(): void {
+    this.exportValue = this.exportKind === 'fen' ? this.fen : this.pgn;
+  }
+
+  private showNotice(msg: string): void {
+    this.copyNotice = msg;
+    if (this.copyNoticeTimer !== null) {
+      clearTimeout(this.copyNoticeTimer);
+    }
+    this.copyNoticeTimer = setTimeout(() => {
+      this.copyNotice = '';
+    }, 1800);
+  }
+}

src/app/components/input-card/input-card.component.css

@@ -29,17 +29,16 @@
 .input-card textarea {
   resize: vertical;
   height: 40px;
-  background-color:lightcyan;
+  background-color: lightcyan;
   border: 3px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
+  border-radius: var(--border-radius-sm);
 }
 
 .input-card input {
   min-width: unset;
-  background-color:lightcyan;
-    border: 3px solid var(--color-border);
-        border-radius: var(--border-radius-sm);
-
+  background-color: lightcyan;
+  border: 3px solid var(--color-border);
+  border-radius: var(--border-radius-sm);
 }
 
 .hint-text {

src/app/components/input-card/input-card.component.html

@@ -2,11 +2,23 @@
   <label>{{ label }}</label>
 
   @if (inputType === 'textarea') {
-  <textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
-    (input)="onValueChange(textareaInput.value)" class="form-input"></textarea>
+    <textarea
+      #textareaInput
+      [placeholder]="placeholder"
+      [value]="value"
+      [rows]="rows"
+      (input)="onValueChange(textareaInput.value)"
+      class="form-input"
+    ></textarea>
   } @else {
-  <input #textInput type="text" [placeholder]="placeholder" [value]="value" (input)="onValueChange(textInput.value)"
-    class="form-input" />
+    <input
+      #textInput
+      type="text"
+      [placeholder]="placeholder"
+      [value]="value"
+      (input)="onValueChange(textInput.value)"
+      class="form-input"
+    />
   }
 
   <button type="button" class="app-btn w-100" (click)="onButtonClick()">
@@ -14,6 +26,6 @@
   </button>
 
   @if (hintText) {
-  <p class="hint-text">{{ hintText }}</p>
+    <p class="hint-text">{{ hintText }}</p>
   }
-</section>
+</section>

src/app/components/login-dialog/login-dialog.component.css

@@ -1,58 +1,297 @@
-@import '../../button-template.css';
+:host {
+  --auth-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --auth-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+  --auth-neon: #ff45c8;
+  --auth-neon-soft: rgba(255, 69, 200, 0.55);
+  --auth-bg: #06060d;
+}
 
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(2, 2, 10, 0.58);
+  background: rgba(4, 2, 12, 0.72);
+  backdrop-filter: blur(6px);
   display: grid;
   place-items: center;
   z-index: 350;
   padding: 1rem;
+  animation: backdrop-in 180ms ease-out both;
 }
 
 .dialog-card {
-  width: min(460px, 100%);
-  background: var(--dlg-bg);
-  border: 1.5px solid var(--dlg-border);
-  box-shadow: var(--bb-glow);
-  border-radius: 4px;
-  padding: 1rem;
+  position: relative;
+  width: min(420px, 100%);
+  background:
+    radial-gradient(120% 80% at 50% 0%, rgba(255, 69, 200, 0.1), transparent 60%),
+    linear-gradient(180deg, #0a0612 0%, #06060d 100%);
+  border: 1px solid var(--auth-neon-soft);
+  border-radius: 14px;
+  padding: 28px 26px 22px;
   display: grid;
-  gap: 0.7rem;
+  gap: 14px;
+  font-family: var(--auth-sans);
+  color: #fff;
+  box-shadow:
+    0 0 0 1px rgba(255, 69, 200, 0.06) inset,
+    0 0 30px rgba(255, 69, 200, 0.18),
+    0 30px 60px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+  animation: dialog-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.dialog-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    rgba(255, 69, 200, 0.06) 50%,
+    transparent 100%
+  );
+  height: 35%;
+  animation: scanline 4.5s linear infinite;
+  mix-blend-mode: screen;
+}
+
+.dialog-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: repeating-linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0.012) 0px,
+    rgba(255, 255, 255, 0.012) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  border-radius: inherit;
+}
+
+.dialog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.brand-tag {
+  font-family: var(--auth-mono);
+  font-size: 10px;
+  letter-spacing: 2.5px;
+  color: var(--auth-neon);
+  text-transform: uppercase;
+  opacity: 0.85;
+  animation: pulse-glow 2.4s ease-in-out infinite;
+}
+
+.brand-tag::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--auth-neon);
+  margin-right: 8px;
+  vertical-align: 1px;
+  box-shadow: 0 0 8px var(--auth-neon);
+}
+
+.close-btn {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.65);
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  display: grid;
+  place-items: center;
+  transition: all 0.18s ease;
+}
+
+.close-btn:hover {
+  color: var(--auth-neon);
+  border-color: var(--auth-neon-soft);
+  box-shadow: 0 0 10px rgba(255, 69, 200, 0.35);
 }
 
 .dialog-title {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 22px;
-  letter-spacing: 2px;
-  color: var(--bb-title);
-  text-align: center;
+  font-family: var(--auth-sans);
+  font-weight: 700;
+  font-size: 26px;
+  letter-spacing: 0.5px;
+  color: #fff;
+  margin: 4px 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dialog-subtitle {
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.45);
+  letter-spacing: 0.6px;
+  margin-bottom: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+form {
+  display: grid;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.field {
+  display: grid;
+  gap: 6px;
+}
+
+.field-label {
+  font-family: var(--auth-mono);
+  font-size: 10px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.55);
 }
 
 .dialog-input {
   width: 100%;
-  background: rgba(4, 4, 20, 0.62);
-  border: 1px solid var(--bb-border);
-  color: var(--bb-title);
-  border-radius: 2px;
-  padding: 0.6rem 0.7rem;
-  font-family: 'Space Mono', monospace;
+  background: rgba(8, 5, 20, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-family: var(--auth-mono);
   font-size: 13px;
+  letter-spacing: 0.3px;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease;
+}
+
+.dialog-input::placeholder {
+  color: rgba(255, 255, 255, 0.28);
 }
 
 .dialog-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
-}
-
-.dialog-textarea {
-  min-height: 120px;
-  resize: vertical;
+  border-color: var(--auth-neon);
+  background: rgba(20, 6, 26, 0.7);
+  box-shadow:
+    0 0 0 3px rgba(255, 69, 200, 0.15),
+    0 0 18px rgba(255, 69, 200, 0.18);
 }
 
 .text-danger {
-  color: #dc3545;
-  font-size: 0.875rem;
+  color: #ff6ea0;
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+
+.error-banner {
+  font-family: var(--auth-mono);
+  font-size: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(255, 69, 110, 0.08);
+  border: 1px solid rgba(255, 69, 110, 0.35);
+  color: #ff9bb4;
+  animation: shake 0.35s ease-out;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.btn {
+  flex: 1;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-family: var(--auth-sans);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.4px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.btn-primary {
+  background: var(--auth-neon);
+  border: 1px solid var(--auth-neon);
+  color: #1a0210;
+  box-shadow: 0 0 18px rgba(255, 69, 200, 0.45);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(255, 69, 200, 0.7);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.alt-line {
+  margin-top: 4px;
+  text-align: center;
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.45);
+  position: relative;
+  z-index: 1;
+}
+
+.alt-line a {
+  color: var(--auth-neon);
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 4px;
+}
+
+.alt-line a:hover {
+  text-shadow: 0 0 8px var(--auth-neon-soft);
+}
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(26, 2, 16, 0.35);
+  border-top-color: #1a0210;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
 }
 
 .sr-only {
@@ -66,3 +305,58 @@
   white-space: nowrap !important;
   border: 0 !important;
 }
+
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
+}
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/app/components/login-dialog/login-dialog.component.html

@@ -1,36 +1,59 @@
 <div class="dialog-overlay" (click)="closeDialog()">
   <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-title">LOGIN</div>
+    <div class="dialog-head">
+      <span class="brand-tag">NowChess // Auth</span>
+      <button type="button" class="close-btn" (click)="closeDialog()" aria-label="Close">×</button>
+    </div>
+
+    <h2 class="dialog-title">Welcome back</h2>
+    <div class="dialog-subtitle">Sign in to continue your match</div>
 
     <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-      <label for="username" class="sr-only">Username</label>
-      <input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
-        [disabled]="isLoading" />
-      @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
-      <small class="text-danger">Username must be at least 3 characters</small>
-      }
+      <div class="field">
+        <label for="username" class="field-label">Username</label>
+        <input
+          id="username"
+          type="text"
+          class="dialog-input"
+          formControlName="username"
+          placeholder="your_handle"
+          autocomplete="username"
+        />
+        @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
+          <small class="text-danger">Username must be at least 3 characters</small>
+        }
+      </div>
 
-      <label for="password" class="sr-only">Password</label>
-      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
-        [disabled]="isLoading" />
-      @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
-      <small class="text-danger">Password must be at least 6 characters</small>
-      }
+      <div class="field">
+        <label for="password" class="field-label">Password</label>
+        <input
+          id="password"
+          type="password"
+          class="dialog-input"
+          formControlName="password"
+          placeholder="••••••••"
+          autocomplete="current-password"
+        />
+        @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+          <small class="text-danger">Password must be at least 6 characters</small>
+        }
+      </div>
 
       @if (errorMessage) {
-      <div class="error-banner">{{ errorMessage }}</div>
+        <div class="error-banner">{{ errorMessage }}</div>
       }
 
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openRegister()">Create account</button>
-        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
-        <button type="submit" class="app-btn" [disabled]="isLoading || loginForm.invalid">
+        <button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
+        <button type="submit" class="btn btn-primary" [disabled]="isLoading || loginForm.invalid">
           @if (isLoading) {
-          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            <span class="spinner" aria-hidden="true"></span>
           }
-          Login
+          {{ isLoading ? 'Signing in…' : 'Sign in' }}
         </button>
       </div>
+
+      <div class="alt-line">New here?<a (click)="openRegister()">Create an account</a></div>
     </form>
   </div>
-</div>
+</div>

src/app/components/login-dialog/login-dialog.component.ts

@@ -9,7 +9,7 @@ import { AuthDialogService } from '../../services/auth-dialog.service';
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './login-dialog.component.html',
-  styleUrl: './login-dialog.component.css'
+  styleUrl: './login-dialog.component.css',
 })
 export class LoginDialogComponent {
   @Output() onClose = new EventEmitter<void>();
@@ -26,7 +26,7 @@ export class LoginDialogComponent {
   constructor() {
     this.loginForm = this.formBuilder.group({
       username: ['', [Validators.required, Validators.minLength(3)]],
-      password: ['', [Validators.required, Validators.minLength(6)]]
+      password: ['', [Validators.required, Validators.minLength(6)]],
     });
   }
 
@@ -38,17 +38,20 @@ export class LoginDialogComponent {
 
     this.isLoading = true;
     this.errorMessage = null;
+    this.loginForm.disable();
 
-    const { username, password } = this.loginForm.value;
+    const { username, password } = this.loginForm.getRawValue();
     this.authService.login(username, password).subscribe({
       next: () => {
         this.isLoading = false;
+        this.loginForm.enable();
         this.onSuccess.emit();
       },
       error: (err) => {
         this.isLoading = false;
+        this.loginForm.enable();
         this.errorMessage = err.error?.message || 'Login failed. Please try again.';
-      }
+      },
     });
   }
 

src/app/components/move-history/move-history.component.css

@@ -0,0 +1,112 @@
+.moves {
+  display: grid;
+  grid-template-columns: 38px 1fr 1fr;
+  font-family: var(--nc-mono);
+  font-size: 12px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.moves-empty {
+  grid-column: 1 / -1;
+  padding: 16px;
+  color: var(--nc-text-dim);
+  font-size: 12px;
+  text-align: center;
+}
+
+.mv-num {
+  padding: 6px 12px 6px 10px;
+  color: var(--nc-text-dim);
+  text-align: right;
+  border-right: 1px solid var(--nc-border);
+}
+
+.mv {
+  padding: 6px 10px;
+  color: var(--nc-text);
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+
+.mv:hover {
+  background: rgba(255, 69, 200, 0.06);
+  color: var(--nc-neon);
+}
+
+.mv.current {
+  background: rgba(255, 69, 200, 0.1);
+  color: var(--nc-neon);
+}
+
+.mv.mv-empty {
+  color: var(--nc-text-dim);
+  cursor: default;
+}
+
+.mv.mv-empty:hover {
+  background: transparent;
+  color: var(--nc-text-dim);
+}
+
+.moves-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-top: 1px solid var(--nc-border);
+}
+
+.moves-nav {
+  display: flex;
+  gap: 2px;
+}
+
+.icon-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--nc-text-muted);
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.icon-btn:hover {
+  color: var(--nc-neon);
+  border-color: var(--nc-border);
+}
+
+.live-label {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  color: var(--nc-neon);
+  letter-spacing: 0.14em;
+  opacity: 0.8;
+}
+
+.live-label.reviewing {
+  color: var(--nc-warning);
+  opacity: 1;
+}
+
+.moves::-webkit-scrollbar {
+  width: 6px;
+}
+.moves::-webkit-scrollbar-track {
+  background: transparent;
+}
+.moves::-webkit-scrollbar-thumb {
+  background: var(--nc-border-strong);
+  border-radius: 3px;
+}
+.moves::-webkit-scrollbar-thumb:hover {
+  background: var(--nc-neon-soft);
+}

src/app/components/move-history/move-history.component.html

@@ -0,0 +1,96 @@
+<div class="moves" role="list" #movesEl>
+  @if (movePairs.length === 0) {
+    <div class="moves-empty">No moves yet.</div>
+  } @else {
+    @for (pair of movePairs; track $index) {
+      <div class="mv-num" role="presentation">{{ $index + 1 }}</div>
+      <div
+        class="mv"
+        [class.current]="isWhiteViewing($index)"
+        role="listitem"
+        tabindex="0"
+        (click)="clickWhite($index)"
+        (keydown.enter)="clickWhite($index)"
+      >
+        {{ pair.white }}
+      </div>
+      <div
+        class="mv"
+        [class.current]="isBlackViewing($index)"
+        [class.mv-empty]="!pair.black"
+        role="listitem"
+        [attr.tabindex]="pair.black ? 0 : null"
+        (click)="clickBlack($index, pair.black)"
+        (keydown.enter)="clickBlack($index, pair.black)"
+      >
+        {{ pair.black ?? '…' }}
+      </div>
+    }
+  }
+</div>
+
+<div class="moves-foot">
+  <div class="moves-nav" role="group" aria-label="Move navigation">
+    <button class="icon-btn" title="First move" (click)="navigate.emit('first')">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="11 17 6 12 11 7" />
+        <polyline points="18 17 13 12 18 7" />
+      </svg>
+    </button>
+    <button class="icon-btn" title="Previous move" (click)="navigate.emit('prev')">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="15 18 9 12 15 6" />
+      </svg>
+    </button>
+    <button class="icon-btn" title="Next move" (click)="navigate.emit('next')">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+    </button>
+    <button class="icon-btn" title="Last move / return to live" (click)="navigate.emit('last')">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="13 17 18 12 13 7" />
+        <polyline points="6 17 11 12 6 7" />
+      </svg>
+    </button>
+  </div>
+  @if (plyCount > 0) {
+    <span class="live-label" [class.reviewing]="!isLive">{{ isLive ? 'LIVE' : 'REVIEWING' }}</span>
+  }
+</div>

src/app/components/move-history/move-history.component.ts

@@ -0,0 +1,73 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+export type MoveNavDirection = 'first' | 'prev' | 'next' | 'last';
+
+interface MovePair {
+  white: string;
+  black: string | null;
+}
+
+@Component({
+  selector: 'app-move-history',
+  standalone: true,
+  imports: [],
+  templateUrl: './move-history.component.html',
+  styleUrl: './move-history.component.css',
+})
+export class MoveHistoryComponent implements OnChanges {
+  @Input({ required: true }) moves: string[] = [];
+  @Input() viewingPly: number | null = null;
+  @Output() navigate = new EventEmitter<MoveNavDirection>();
+  @Output() navigateToPly = new EventEmitter<number>();
+
+  @ViewChild('movesEl') movesEl?: ElementRef<HTMLElement>;
+
+  movePairs: MovePair[] = [];
+
+  get plyCount(): number {
+    return this.moves.length;
+  }
+
+  get isLive(): boolean {
+    return this.viewingPly === null || this.viewingPly >= this.moves.length - 1;
+  }
+
+  ngOnChanges(): void {
+    this.movePairs = this.buildPairs(this.moves);
+  }
+
+  isWhiteViewing(pairIndex: number): boolean {
+    const ply = this.viewingPly ?? this.moves.length - 1;
+    return ply === pairIndex * 2;
+  }
+
+  isBlackViewing(pairIndex: number): boolean {
+    const ply = this.viewingPly ?? this.moves.length - 1;
+    return ply === pairIndex * 2 + 1;
+  }
+
+  clickWhite(pairIndex: number): void {
+    this.navigateToPly.emit(pairIndex * 2);
+  }
+
+  clickBlack(pairIndex: number, black: string | null): void {
+    if (!black) return;
+    this.navigateToPly.emit(pairIndex * 2 + 1);
+  }
+
+  private buildPairs(moves: string[]): MovePair[] {
+    const pairs: MovePair[] = [];
+    for (let i = 0; i < moves.length; i += 2) {
+      pairs.push({ white: moves[i], black: moves[i + 1] ?? null });
+    }
+    return pairs;
+  }
+}

src/app/components/player-card/player-card.component.css

@@ -0,0 +1,98 @@
+.player {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.player.is-turn {
+  border-color: var(--nc-neon-soft);
+  box-shadow:
+    0 0 0 1px rgba(255, 69, 200, 0.2),
+    0 0 20px rgba(255, 69, 200, 0.1);
+}
+
+.player-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.avatar-black {
+  background: linear-gradient(135deg, #2a2a40 0%, #0a0a14 100%);
+  border: 1px solid var(--nc-border-strong);
+}
+
+.avatar-white {
+  background: linear-gradient(135deg, var(--nc-neon) 0%, #7a2fd6 100%);
+}
+
+.player-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.player-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--nc-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.captured {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  line-height: 1;
+}
+
+.clock {
+  font-family: var(--nc-mono);
+  font-size: 22px;
+  font-weight: 600;
+  padding: 8px 14px;
+  min-width: 92px;
+  text-align: center;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  letter-spacing: 0.02em;
+  transition:
+    color 0.2s,
+    border-color 0.2s,
+    background 0.2s,
+    text-shadow 0.2s;
+}
+
+.clock.clock-active {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+  background: var(--nc-neon-clock-bg, rgba(255, 69, 200, 0.08));
+  text-shadow: 0 0 8px rgba(255, 69, 200, 0.4);
+}
+
+.clock.clock-low {
+  color: var(--nc-warning);
+  border-color: var(--nc-warning-soft, rgba(255, 177, 58, 0.4));
+}

src/app/components/player-card/player-card.component.html

@@ -0,0 +1,26 @@
+<div class="player" [class.is-turn]="isActive">
+  <div
+    class="player-avatar"
+    [class.avatar-black]="color === 'black'"
+    [class.avatar-white]="color === 'white'"
+  >
+    {{ initial }}
+  </div>
+
+  <div class="player-info">
+    <div class="player-name">{{ name }}</div>
+    @if (capturedPieces.length > 0) {
+      <div class="captured">
+        @for (pc of capturedPieces; track $index) {
+          <span class="pc">{{ pc }}</span>
+        }
+      </div>
+    }
+  </div>
+
+  @if (clockDisplay !== '--:--') {
+    <div class="clock" [class.clock-active]="isActive" [class.clock-low]="isLowTime && !isActive">
+      {{ clockDisplay }}
+    </div>
+  }
+</div>

src/app/components/player-card/player-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-player-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './player-card.component.html',
+  styleUrl: './player-card.component.css',
+})
+export class PlayerCardComponent {
+  @Input({ required: true }) name = '';
+  @Input({ required: true }) initial = '';
+  @Input({ required: true }) color: 'white' | 'black' = 'white';
+  @Input() isActive = false;
+  @Input() clockDisplay = '--:--';
+  @Input() isLowTime = false;
+  @Input() capturedPieces: string[] = [];
+}

src/app/components/promotion-dialog/promotion-dialog.component.css

@@ -12,7 +12,9 @@
   justify-content: center;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.2s, visibility 0.2s;
+  transition:
+    opacity 0.2s,
+    visibility 0.2s;
   z-index: 1000;
 
   &.open {

src/app/components/promotion-dialog/promotion-dialog.component.html

@@ -2,8 +2,14 @@
   <div class="promotion-dialog">
     <div class="promotion-header">
       <h3>Pawn Promotion</h3>
-      <button class="app-btn" (click)="close()" aria-label="Close"
-        style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
+      <button
+        class="app-btn"
+        (click)="close()"
+        aria-label="Close"
+        style="padding: 0.2rem 0.5rem; min-width: unset"
+      >
+        &times;
+      </button>
     </div>
 
     <div class="promotion-body">
@@ -11,13 +17,18 @@
 
       <div class="promotion-options">
         @for (piece of promotionPieces; track piece.type) {
-        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
-          (click)="selectPromotion(piece.type)" [title]="piece.label">
-          <span class="piece-symbol">{{ piece.symbol }}</span>
-          <span class="piece-label">{{ piece.label }}</span>
-        </button>
+          <button
+            type="button"
+            class="app-btn promotion-choice"
+            [attr.data-piece]="piece.type"
+            (click)="selectPromotion(piece.type)"
+            [title]="piece.label"
+          >
+            <span class="piece-symbol">{{ piece.symbol }}</span>
+            <span class="piece-label">{{ piece.label }}</span>
+          </button>
         }
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/components/promotion-dialog/promotion-dialog.component.ts

@@ -13,7 +13,7 @@ interface PromotionPieceOption {
   standalone: true,
   imports: [CommonModule],
   templateUrl: './promotion-dialog.component.html',
-  styleUrl: './promotion-dialog.component.css'
+  styleUrl: './promotion-dialog.component.css',
 })
 export class PromotionDialogComponent {
   @Input() isOpen = false;
@@ -24,7 +24,7 @@ export class PromotionDialogComponent {
     { type: 'queen', label: 'Queen', symbol: '♕' },
     { type: 'rook', label: 'Rook', symbol: '♖' },
     { type: 'bishop', label: 'Bishop', symbol: '♗' },
-    { type: 'knight', label: 'Knight', symbol: '♘' }
+    { type: 'knight', label: 'Knight', symbol: '♘' },
   ];
 
   selectPromotion(type: PromotionPieceType): void {

src/app/components/register-dialog/register-dialog.component.css

@@ -1,58 +1,303 @@
-@import '../../button-template.css';
+:host {
+  --auth-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --auth-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+  --auth-neon: #ff45c8;
+  --auth-neon-soft: rgba(255, 69, 200, 0.55);
+  --auth-bg: #06060d;
+}
 
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(2, 2, 10, 0.58);
+  background: rgba(4, 2, 12, 0.72);
+  backdrop-filter: blur(6px);
   display: grid;
   place-items: center;
   z-index: 350;
   padding: 1rem;
+  animation: backdrop-in 180ms ease-out both;
 }
 
 .dialog-card {
-  width: min(460px, 100%);
-  background: var(--dlg-bg);
-  border: 1.5px solid var(--dlg-border);
-  box-shadow: var(--bb-glow);
-  border-radius: 4px;
-  padding: 1rem;
+  position: relative;
+  width: min(440px, 100%);
+  background:
+    radial-gradient(120% 80% at 50% 0%, rgba(255, 69, 200, 0.1), transparent 60%),
+    linear-gradient(180deg, #0a0612 0%, #06060d 100%);
+  border: 1px solid var(--auth-neon-soft);
+  border-radius: 14px;
+  padding: 28px 26px 22px;
   display: grid;
-  gap: 0.7rem;
+  gap: 14px;
+  font-family: var(--auth-sans);
+  color: #fff;
+  box-shadow:
+    0 0 0 1px rgba(255, 69, 200, 0.06) inset,
+    0 0 30px rgba(255, 69, 200, 0.18),
+    0 30px 60px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+  animation: dialog-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.dialog-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    rgba(255, 69, 200, 0.06) 50%,
+    transparent 100%
+  );
+  height: 35%;
+  animation: scanline 4.5s linear infinite;
+  mix-blend-mode: screen;
+}
+
+.dialog-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: repeating-linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0.012) 0px,
+    rgba(255, 255, 255, 0.012) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  border-radius: inherit;
+}
+
+.dialog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.brand-tag {
+  font-family: var(--auth-mono);
+  font-size: 10px;
+  letter-spacing: 2.5px;
+  color: var(--auth-neon);
+  text-transform: uppercase;
+  opacity: 0.85;
+  animation: pulse-glow 2.4s ease-in-out infinite;
+}
+
+.brand-tag::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--auth-neon);
+  margin-right: 8px;
+  vertical-align: 1px;
+  box-shadow: 0 0 8px var(--auth-neon);
+}
+
+.close-btn {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.65);
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  display: grid;
+  place-items: center;
+  transition: all 0.18s ease;
+}
+
+.close-btn:hover {
+  color: var(--auth-neon);
+  border-color: var(--auth-neon-soft);
+  box-shadow: 0 0 10px rgba(255, 69, 200, 0.35);
 }
 
 .dialog-title {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 22px;
-  letter-spacing: 2px;
-  color: var(--bb-title);
-  text-align: center;
+  font-family: var(--auth-sans);
+  font-weight: 700;
+  font-size: 26px;
+  letter-spacing: 0.5px;
+  color: #fff;
+  margin: 4px 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dialog-subtitle {
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.45);
+  letter-spacing: 0.6px;
+  margin-bottom: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+form {
+  display: grid;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.field {
+  display: grid;
+  gap: 6px;
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.field-label {
+  font-family: var(--auth-mono);
+  font-size: 10px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.55);
 }
 
 .dialog-input {
   width: 100%;
-  background: rgba(4, 4, 20, 0.62);
-  border: 1px solid var(--bb-border);
-  color: var(--bb-title);
-  border-radius: 2px;
-  padding: 0.6rem 0.7rem;
-  font-family: 'Space Mono', monospace;
+  background: rgba(8, 5, 20, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-family: var(--auth-mono);
   font-size: 13px;
+  letter-spacing: 0.3px;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease;
+}
+
+.dialog-input::placeholder {
+  color: rgba(255, 255, 255, 0.28);
 }
 
 .dialog-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
-}
-
-.dialog-textarea {
-  min-height: 120px;
-  resize: vertical;
+  border-color: var(--auth-neon);
+  background: rgba(20, 6, 26, 0.7);
+  box-shadow:
+    0 0 0 3px rgba(255, 69, 200, 0.15),
+    0 0 18px rgba(255, 69, 200, 0.18);
 }
 
 .text-danger {
-  color: #dc3545;
-  font-size: 0.875rem;
+  color: #ff6ea0;
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+
+.error-banner {
+  font-family: var(--auth-mono);
+  font-size: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(255, 69, 110, 0.08);
+  border: 1px solid rgba(255, 69, 110, 0.35);
+  color: #ff9bb4;
+  animation: shake 0.35s ease-out;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.btn {
+  flex: 1;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-family: var(--auth-sans);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.4px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.btn-primary {
+  background: var(--auth-neon);
+  border: 1px solid var(--auth-neon);
+  color: #1a0210;
+  box-shadow: 0 0 18px rgba(255, 69, 200, 0.45);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(255, 69, 200, 0.7);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.alt-line {
+  margin-top: 4px;
+  text-align: center;
+  font-family: var(--auth-mono);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.45);
+  position: relative;
+  z-index: 1;
+}
+
+.alt-line a {
+  color: var(--auth-neon);
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 4px;
+}
+
+.alt-line a:hover {
+  text-shadow: 0 0 8px var(--auth-neon-soft);
+}
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(26, 2, 16, 0.35);
+  border-top-color: #1a0210;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
 }
 
 .sr-only {
@@ -66,3 +311,58 @@
   white-space: nowrap !important;
   border: 0 !important;
 }
+
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
+}
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/app/components/register-dialog/register-dialog.component.html

@@ -1,43 +1,91 @@
 <div class="dialog-overlay" (click)="closeDialog()">
   <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-title">CREATE ACCOUNT</div>
+    <div class="dialog-head">
+      <span class="brand-tag">NowChess // Register</span>
+      <button type="button" class="close-btn" (click)="closeDialog()" aria-label="Close">×</button>
+    </div>
+
+    <h2 class="dialog-title">Create account</h2>
+    <div class="dialog-subtitle">Join the board and start playing</div>
 
     <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
-      <input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
-        [disabled]="isLoading" />
-      @if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
-      <small class="text-danger">Username must be at least 3 characters</small>
-      }
+      <div class="field">
+        <label for="username" class="field-label">Username</label>
+        <input
+          id="username"
+          type="text"
+          class="dialog-input"
+          formControlName="username"
+          placeholder="your_handle"
+          autocomplete="username"
+        />
+        @if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
+          <small class="text-danger">Username must be at least 3 characters</small>
+        }
+      </div>
 
-      <input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email"
-        [disabled]="isLoading" />
-      @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
-      <small class="text-danger">Please enter a valid email</small>
-      }
+      <div class="field">
+        <label for="email" class="field-label">Email</label>
+        <input
+          id="email"
+          type="email"
+          class="dialog-input"
+          formControlName="email"
+          placeholder="you@domain.com"
+          autocomplete="email"
+        />
+        @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
+          <small class="text-danger">Please enter a valid email</small>
+        }
+      </div>
 
-      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
-        [disabled]="isLoading" />
-      @if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
-      <small class="text-danger">Password must be at least 6 characters</small>
-      }
-
-      <input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
-        placeholder="Confirm Password" [disabled]="isLoading" />
+      <div class="field-row">
+        <div class="field">
+          <label for="password" class="field-label">Password</label>
+          <input
+            id="password"
+            type="password"
+            class="dialog-input"
+            formControlName="password"
+            placeholder="••••••••"
+            autocomplete="new-password"
+          />
+          @if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
+            <small class="text-danger">Min 6 characters</small>
+          }
+        </div>
+        <div class="field">
+          <label for="confirmPassword" class="field-label">Confirm</label>
+          <input
+            id="confirmPassword"
+            type="password"
+            class="dialog-input"
+            formControlName="confirmPassword"
+            placeholder="••••••••"
+            autocomplete="new-password"
+          />
+        </div>
+      </div>
 
       @if (errorMessage) {
-      <div class="error-banner">{{ errorMessage }}</div>
+        <div class="error-banner">{{ errorMessage }}</div>
       }
 
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
-        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
-        <button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
+        <button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          [disabled]="isLoading || registerForm.invalid"
+        >
           @if (isLoading) {
-          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            <span class="spinner" aria-hidden="true"></span>
           }
-          Register
+          {{ isLoading ? 'Creating…' : 'Create account' }}
         </button>
       </div>
+
+      <div class="alt-line">Already have an account?<a (click)="openLogin()">Sign in</a></div>
     </form>
   </div>
-</div>
+</div>

src/app/components/register-dialog/register-dialog.component.ts

@@ -9,7 +9,7 @@ import { AuthDialogService } from '../../services/auth-dialog.service';
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './register-dialog.component.html',
-  styleUrl: './register-dialog.component.css'
+  styleUrl: './register-dialog.component.css',
 })
 export class RegisterDialogComponent {
   @Output() onClose = new EventEmitter<void>();
@@ -28,7 +28,7 @@ export class RegisterDialogComponent {
       username: ['', [Validators.required, Validators.minLength(3)]],
       email: ['', [Validators.required, Validators.email]],
       password: ['', [Validators.required, Validators.minLength(6)]],
-      confirmPassword: ['', [Validators.required]]
+      confirmPassword: ['', [Validators.required]],
     });
   }
 
@@ -46,18 +46,20 @@ export class RegisterDialogComponent {
 
     this.isLoading = true;
     this.errorMessage = null;
+    this.registerForm.disable();
 
-    const { username, email, password: pwd } = this.registerForm.value;
+    const { username, email, password: pwd } = this.registerForm.getRawValue();
     this.authService.register(username, pwd, email).subscribe({
       next: () => {
         this.isLoading = false;
+        this.registerForm.enable();
         this.onSuccess.emit();
       },
       error: (err) => {
         this.isLoading = false;
-        this.errorMessage =
-          err.error?.message || 'Registration failed. Please try again.';
-      }
+        this.registerForm.enable();
+        this.errorMessage = err.error?.message || 'Registration failed. Please try again.';
+      },
     });
   }
 

src/app/components/toolbar/toolbar.component.css

@@ -1,84 +1,606 @@
-@import '../../button-template.css';
-
-.navbar {
-  background: rgba(8, 6, 28, 0.85);
-  backdrop-filter: blur(8px);
-  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
-  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
-  border-radius: 0;
-  padding: 0.75rem 1rem;
+/* ============ THEME TOKENS ============ */
+:host {
+  /* Light mode: warm sunset palette from background gradient */
+  --nc-accent: #ff3dbb;
+  --nc-accent-hover: rgba(255, 107, 61, 0.15);
+  --nc-accent-badge: rgba(223, 61, 255, 0.9);
+  --nc-badge-text: #1a0800;
+  --nc-surface: rgba(26, 24, 56, 0.97);
+  --nc-nav-bg: linear-gradient(
+    180deg,
+    rgba(26, 24, 56, 0.88) 0%,
+    rgba(46, 32, 80, 0.6) 70%,
+    rgba(74, 41, 98, 0) 100%
+  );
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.7);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.1);
+  --nc-popover-glow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 107, 61, 0.18);
+  --nc-unread-dot: #ff6b3d;
+  --nc-avatar-a: #d44d4a;
+  --nc-avatar-b: #8b3a6b;
+  --nc-danger: #ff7a7a;
 }
 
-.navbar-brand {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: var(--bb-title) !important;
-  font-family: 'Bebas Neue', sans-serif;
-  letter-spacing: 1px;
-  cursor: pointer;
+:host-context(html[data-theme='dark']) {
+  /* Dark mode: blue neon palette */
+  --nc-accent: #00d5ff;
+  --nc-accent-hover: rgba(0, 213, 255, 0.12);
+  --nc-accent-badge: #00d5ff;
+  --nc-badge-text: #04000f;
+  --nc-surface: rgba(8, 6, 28, 0.97);
+  --nc-nav-bg: linear-gradient(
+    180deg,
+    rgba(8, 5, 20, 0.88) 0%,
+    rgba(8, 5, 20, 0.58) 70%,
+    rgba(8, 5, 20, 0) 100%
+  );
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
+  --nc-text-dim: rgba(255, 255, 255, 0.4);
+  --nc-border: rgba(255, 255, 255, 0.08);
+  --nc-popover-glow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 213, 255, 0.15);
+  --nc-unread-dot: #00d5ff;
+  --nc-avatar-a: #00d5ff;
+  --nc-avatar-b: #1a5fa8;
+  --nc-danger: #ff7a7a;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.user-section {
+/* ============ NAV CONTAINER ============ */
+.nc-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 56px;
+  z-index: 100;
+  display: flex;
   align-items: center;
+  padding: 0 24px;
+  background: var(--nc-nav-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  font-family:
+    'Space Grotesk',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
 }
 
-.me-btn {
-  background: rgba(0, 210, 255, 0.1);
-  color: var(--bb-title);
-  border: 1px solid var(--bb-border);
-  border-radius: 2px;
-  padding: 0.5rem 0.8rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
+/* ============ LOGO ============ */
+.nc-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
   cursor: pointer;
-  transition: all 0.2s ease;
-  display: inline-flex;
+  user-select: none;
+}
+
+.nc-logo-mark {
+  width: 24px;
+  height: 24px;
+  background: var(--nc-accent);
+  display: flex;
   align-items: center;
   justify-content: center;
-  outline: none;
+  font-weight: 800;
+  color: var(--nc-badge-text);
+  font-size: 14px;
+}
+
+.nc-logo-text {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--nc-text);
+}
+
+/* ============ CENTER LINKS ============ */
+.nc-links {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+}
+
+.nc-link {
+  background: transparent;
+  border: none;
+  color: var(--nc-text-muted);
+  padding: 8px 14px;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.08em;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  transition: color 0.15s;
+}
+
+.nc-link:hover {
+  color: var(--nc-text);
+}
+
+.nc-link::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 14px;
+  right: 14px;
+  height: 1px;
+  background: var(--nc-accent);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.nc-link:hover::after {
+  opacity: 1;
+}
+
+/* ============ RIGHT CLUSTER ============ */
+.nc-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+/* ============ BELL ============ */
+.nc-bell {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--nc-border);
+  background: transparent;
+  color: var(--nc-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  font-family: inherit;
+}
+
+.nc-bell:hover,
+.nc-bell.is-open {
+  background: var(--nc-accent-hover);
+  color: var(--nc-text);
+}
+
+/* ============ BADGE ============ */
+.nc-badge {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 7px;
+  background: var(--nc-accent-badge);
+  color: var(--nc-badge-text);
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+}
+
+/* ============ GAMES BUTTON ============ */
+.nc-games-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--nc-border);
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.nc-games-btn:hover {
+  background: var(--nc-accent-hover);
+  color: var(--nc-text);
+}
+
+/* ============ PROFILE BUTTON ============ */
+.nc-profile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 4px 4px;
+  height: 36px;
+  border: 1px solid var(--nc-border);
+  background: transparent;
+  cursor: pointer;
+  color: var(--nc-text-muted);
+  font-family: inherit;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.nc-profile:hover,
+.nc-profile.is-open {
+  background: var(--nc-accent-hover);
+  color: var(--nc-text);
+}
+
+.nc-profile-name {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.nc-chevron {
+  opacity: 0.5;
+}
+
+/* ============ AVATAR ============ */
+.nc-avatar {
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--nc-avatar-a) 0%, var(--nc-avatar-b) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+.nc-avatar-sm {
+  width: 26px;
+  height: 26px;
+  font-size: 11px;
+}
+.nc-avatar-md {
+  width: 40px;
+  height: 40px;
+  font-size: 17px;
+}
+
+/* ============ DROPDOWN WRAPPER ============ */
+.nc-dropdown-wrap {
+  position: relative;
+}
+
+/* ============ POPOVERS ============ */
+.nc-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  background: var(--nc-surface);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--nc-border);
+  box-shadow: var(--nc-popover-glow);
+  z-index: 200;
+  overflow: hidden;
+}
+
+/* ============ NOTIFICATIONS PANEL ============ */
+.nc-notif {
+  width: 360px;
+}
+
+.nc-notif-header {
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nc-notif-header-title {
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  color: var(--nc-text-muted);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.nc-notif-list {
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+.nc-notif-empty {
+  padding: 24px 18px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.04em;
+}
+
+.nc-notif-row {
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.nc-notif-row.is-unread {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.nc-notif-row.is-unread::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 22px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--nc-unread-dot);
+}
+
+.nc-notif-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nc-accent);
+}
+
+.nc-notif-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.nc-notif-text {
+  font-size: 13px;
+  color: var(--nc-text);
+  line-height: 1.35;
+}
+
+.nc-notif-text b {
+  font-weight: 600;
+}
+
+.nc-notif-meta {
+  font-size: 10px;
+  color: var(--nc-text-dim);
+  margin-top: 4px;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
-.me-btn:hover {
-  background: rgba(0, 210, 255, 0.2);
-  border-color: var(--bb-tag);
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
-  transform: scale(1.05);
-}
-
-.me-btn:active {
-  transform: scale(0.98);
-}
-
-/* Sunset Mode */
-.sunset .navbar {
-  background: rgba(20, 5, 45, 0.85);
-  border-bottom-color: rgba(255, 64, 207, 0.2);
-  box-shadow: 0 4px 20px rgba(242, 106, 226, 0.15);
-}
-
-.sunset .me-btn {
-  background: rgba(242, 106, 226, 0.1);
-  border-color: var(--bb-border);
-}
-
-.sunset .me-btn:hover {
-  background: rgba(242, 106, 226, 0.2);
-  border-color: var(--bb-tag);
-  box-shadow: 0 0 10px rgba(242, 106, 226, 0.4);
-}
-
-.container-fluid {
+.nc-notif-actions {
   display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.nc-btn-accept,
+.nc-btn-decline {
+  padding: 6px 12px;
+  font-size: 10px;
+  font-family: inherit;
+  letter-spacing: 0.18em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-transform: uppercase;
+  font-weight: 600;
+  border: none;
+  transition: opacity 0.15s;
+}
+
+.nc-btn-accept {
+  background: var(--nc-accent);
+  color: var(--nc-badge-text);
+  font-weight: 700;
+}
+
+.nc-btn-decline {
+  background: transparent;
+  color: var(--nc-text-muted);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.nc-btn-accept:disabled,
+.nc-btn-decline:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.nc-notif-footer {
+  padding: 10px 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.nc-view-all {
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--nc-text-dim);
+  font-size: 11px;
+  font-family: inherit;
+  letter-spacing: 0.2em;
+  cursor: pointer;
+  text-transform: uppercase;
+  padding: 6px 0;
+  transition: color 0.15s;
+}
+
+.nc-view-all:hover {
+  color: var(--nc-text-muted);
+}
+
+/* ============ PROFILE MENU ============ */
+.nc-menu {
+  width: 250px;
+}
+
+.nc-menu-header {
+  padding: 16px 16px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  gap: 12px;
   align-items: center;
 }
 
-.ms-auto {
-  margin-left: auto;
+.nc-menu-user-name {
+  font-size: 14px;
+  color: var(--nc-text);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nc-menu-user-sub {
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  margin-top: 2px;
+  letter-spacing: 0.06em;
+}
+
+.nc-menu-group {
+  padding: 6px 0;
+}
+
+.nc-menu-group + .nc-menu-group {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.nc-menu-item {
+  padding: 9px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+  font-family: inherit;
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+.nc-menu-item:hover {
+  background: var(--nc-accent-hover);
+  color: var(--nc-accent);
+}
+
+.nc-menu-item.danger {
+  color: var(--nc-danger);
+}
+.nc-menu-item.danger:hover {
+  background: rgba(255, 122, 122, 0.08);
+  color: var(--nc-danger);
+}
+
+.nc-menu-icon {
+  opacity: 0.85;
+  display: inline-flex;
+}
+.nc-menu-label {
+  flex: 1;
+}
+
+/* ============ DARK MODE TOGGLE PILL ============ */
+.nc-toggle {
+  width: 28px;
+  height: 16px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  position: relative;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.nc-toggle.is-on {
+  background: var(--nc-accent);
+}
+
+.nc-toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  transition: left 0.2s;
+}
+
+.nc-toggle.is-on::after {
+  left: 14px;
+}
+
+/* ============ AUTH BUTTONS (logged out) ============ */
+.nc-auth-btn {
+  background: transparent;
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text-muted);
+  padding: 7px 14px;
+  font-size: 11px;
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.nc-auth-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--nc-text);
+}
+
+.nc-auth-btn--primary {
+  background: var(--nc-accent);
+  border-color: var(--nc-accent);
+  color: var(--nc-badge-text);
+}
+
+.nc-auth-btn--primary:hover {
+  filter: brightness(1.1);
+  color: var(--nc-badge-text);
+}
+
+/* ============ NOTIF SCROLLBAR ============ */
+.nc-notif-list::-webkit-scrollbar {
+  width: 6px;
+}
+.nc-notif-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.nc-notif-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
 }

src/app/components/toolbar/toolbar.component.html

@@ -1,35 +1,321 @@
-<nav class="navbar">
-  <div class="container-fluid">
-    <span class="navbar-brand">NowChess</span>
-    <div class="ms-auto">
-      <div class="d-flex align-items-center gap-2">
-        <button type="button" class="app-btn" (click)="toggleTheme()">
-          {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
-        </button>
-        @if (currentUser; as user) {
-        <div class="d-flex align-items-center gap-2 user-section">
-          <button type="button" class="me-btn" (click)="goToProfile()">
-            👤 {{ user.username }}
-          </button>
-          <button type="button" class="app-btn" (click)="logout()">Logout</button>
-        </div>
-        } @else {
-        <button type="button" class="app-btn" (click)="openLoginDialog()">
-          Login
-        </button>
-        <button type="button" class="app-btn" (click)="openRegisterDialog()">
-          Register
+<nav class="nc-nav">
+  <!-- Logo -->
+  <div class="nc-logo" (click)="goToHome()" role="button" tabindex="0">
+    <div class="nc-logo-mark">♞</div>
+    <span class="nc-logo-text">NowChess</span>
+  </div>
+
+  <!-- Center links — only when logged in -->
+  @if (currentUser) {
+    <div class="nc-links">
+      <button type="button" class="nc-link">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </svg>
+        Watch
+      </button>
+      <button type="button" class="nc-link" (click)="goToTournaments()">Tournaments</button>
+      <button type="button" class="nc-link" (click)="goToBots()">Bots</button>
+      <button type="button" class="nc-link" (click)="goToAnalysis()">Analysis</button>
+    </div>
+  }
+
+  <!-- Right cluster -->
+  <div class="nc-right">
+    @if (currentUser; as user) {
+      <!-- Notifications bell -->
+      <div class="nc-dropdown-wrap" data-dropdown="notif">
+        <button
+          type="button"
+          class="nc-bell"
+          [class.is-open]="notifOpen"
+          (click)="toggleNotif($event)"
+          aria-label="Notifications"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+          </svg>
+          @if (incomingChallenges.length > 0) {
+            <span class="nc-badge">{{ incomingChallenges.length }}</span>
+          }
         </button>
+
+        @if (notifOpen) {
+          <div class="nc-popover nc-notif" (click)="$event.stopPropagation()">
+            <div class="nc-notif-header">
+              <span class="nc-notif-header-title">Challenges</span>
+            </div>
+
+            <div class="nc-notif-list">
+              @if (incomingChallenges.length === 0) {
+                <div class="nc-notif-empty">No pending challenges</div>
+              }
+              @for (challenge of incomingChallenges; track challenge.id) {
+                <div class="nc-notif-row is-unread">
+                  <div class="nc-notif-icon">
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.6"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <line x1="14.5" y1="17.5" x2="3" y2="6" />
+                      <path d="M13 19l6 -6" />
+                      <path d="M16 16l4 4" />
+                      <path d="M19 21l2 -2" />
+                      <path d="M15 5l4 4" />
+                      <path d="M21 3l-3 1l-4 4" />
+                    </svg>
+                  </div>
+                  <div class="nc-notif-body">
+                    <div class="nc-notif-text">
+                      <b>{{ challenge.challenger.name }}</b> challenged you to a
+                      {{ getTimeControlDisplay(challenge) }} game.
+                    </div>
+                    <div class="nc-notif-meta">
+                      {{ challenge.challenger.rating }} ·
+                      {{ challenge.timeControl.type ?? 'Custom' }} ·
+                      {{ getExpirationInfo(challenge) }}
+                    </div>
+                    <div class="nc-notif-actions">
+                      <button
+                        type="button"
+                        class="nc-btn-accept"
+                        [disabled]="acceptingId === challenge.id || !!decliningId"
+                        (click)="acceptChallenge($event, challenge)"
+                      >
+                        <svg
+                          width="11"
+                          height="11"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.4"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                        {{ acceptingId === challenge.id ? '...' : 'Accept' }}
+                      </button>
+                      <button
+                        type="button"
+                        class="nc-btn-decline"
+                        [disabled]="!!acceptingId || decliningId === challenge.id"
+                        (click)="declineChallenge($event, challenge)"
+                      >
+                        <svg
+                          width="10"
+                          height="10"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.4"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <line x1="18" y1="6" x2="6" y2="18" />
+                          <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                        {{ decliningId === challenge.id ? '...' : 'Decline' }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+
+            <div class="nc-notif-footer">
+              <button type="button" class="nc-view-all" (click)="goToChallenges()">
+                View all challenges
+              </button>
+            </div>
+          </div>
         }
       </div>
-    </div>
+
+      <!-- Games quick-access -->
+      <button type="button" class="nc-games-btn" (click)="goToGames()">
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M14.5 17.5L3 6" />
+          <path d="M13 19l6-6" />
+          <path d="M16 16l4 4" />
+          <path d="M19 21l2-2" />
+          <path d="M15 5l4 4" />
+          <path d="M21 3l-3 1-4 4" />
+        </svg>
+        Games
+      </button>
+
+      <!-- Profile -->
+      <div class="nc-dropdown-wrap" data-dropdown="profile">
+        <button
+          type="button"
+          class="nc-profile"
+          [class.is-open]="profileOpen"
+          (click)="toggleProfile($event)"
+        >
+          <div class="nc-avatar nc-avatar-sm">{{ getInitial() }}</div>
+          <span class="nc-profile-name">{{ user.username }}</span>
+          <svg
+            class="nc-chevron"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+
+        @if (profileOpen) {
+          <div class="nc-popover nc-menu" (click)="$event.stopPropagation()">
+            <div class="nc-menu-header">
+              <div class="nc-avatar nc-avatar-md">{{ getInitial() }}</div>
+              <div>
+                <div class="nc-menu-user-name">{{ user.username }}</div>
+                <div class="nc-menu-user-sub">{{ user.rating }} · &#64;{{ user.username }}</div>
+              </div>
+            </div>
+
+            <div class="nc-menu-group">
+              <button type="button" class="nc-menu-item" (click)="goToProfile()">
+                <span class="nc-menu-icon">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
+                </span>
+                <span class="nc-menu-label">My profile</span>
+              </button>
+
+              <button type="button" class="nc-menu-item" (click)="goToChallenges()">
+                <span class="nc-menu-icon">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="14.5" y1="17.5" x2="3" y2="6" />
+                    <path d="M13 19l6 -6" />
+                    <path d="M16 16l4 4" />
+                    <path d="M19 21l2 -2" />
+                    <path d="M15 5l4 4" />
+                    <path d="M21 3l-3 1l-4 4" />
+                  </svg>
+                </span>
+                <span class="nc-menu-label">Challenges</span>
+              </button>
+
+              <button type="button" class="nc-menu-item" (click)="toggleTheme($event)">
+                <span class="nc-menu-icon">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.7"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+                  </svg>
+                </span>
+                <span class="nc-menu-label">{{ isDarkMode ? 'Light mode' : 'Dark mode' }}</span>
+                <span class="nc-toggle" [class.is-on]="isDarkMode"></span>
+              </button>
+            </div>
+
+            <div class="nc-menu-group">
+              <button type="button" class="nc-menu-item danger" (click)="logout()">
+                <span class="nc-menu-icon">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.7"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                    <polyline points="16 17 21 12 16 7" />
+                    <line x1="21" y1="12" x2="9" y2="12" />
+                  </svg>
+                </span>
+                <span class="nc-menu-label">Log out</span>
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+      <!-- Logged-out auth buttons -->
+      <button type="button" class="nc-auth-btn" (click)="openLoginDialog()">Login</button>
+      <button type="button" class="nc-auth-btn nc-auth-btn--primary" (click)="openRegisterDialog()">
+        Register
+      </button>
+    }
   </div>
 </nav>
 
 @if (showLoginDialog) {
-<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
+  <app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
 }
 
 @if (showRegisterDialog) {
-<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
-}
+  <app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
+}

src/app/components/toolbar/toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { Component, DestroyRef, HostListener, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -8,32 +8,56 @@ import { CurrentUser } from '../../models/auth.models';
 import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
 import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
 import { ThemeService } from '../../services/theme.service';
+import { ChallengeEventService } from '../../services/challenge-event.service';
+import { ChallengeService } from '../../services/challenge.service';
+import { ChallengeWebSocketService } from '../../services/challenge-websocket.service';
+import { Challenge } from '../../models/challenge.models';
 
 @Component({
   selector: 'app-toolbar',
   standalone: true,
   imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
   templateUrl: './toolbar.component.html',
-  styleUrl: './toolbar.component.css'
+  styleUrl: './toolbar.component.css',
 })
 export class ToolbarComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly authService = inject(AuthService);
   private readonly authDialogService = inject(AuthDialogService);
   private readonly themeService = inject(ThemeService);
+  private readonly challengeEventService = inject(ChallengeEventService);
+  private readonly challengeService = inject(ChallengeService);
+  private readonly challengeWs = inject(ChallengeWebSocketService);
   private readonly router = inject(Router);
 
+  private pollHandle: ReturnType<typeof setInterval> | null = null;
+  private readonly navigatedChallengeIds = new Set<string>();
+
   currentUser: CurrentUser | null = null;
   showLoginDialog = false;
   showRegisterDialog = false;
   isDarkMode = false;
+  profileOpen = false;
+  notifOpen = false;
+  incomingChallenges: Challenge[] = [];
+  acceptingId: string | null = null;
+  decliningId: string | null = null;
 
   ngOnInit(): void {
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-      });
+    this.destroyRef.onDestroy(() => this.stopPolling());
+
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
+      this.currentUser = user;
+      if (user) {
+        this.challengeWs.connect();
+        this.startPolling();
+      } else {
+        this.challengeWs.disconnect();
+        this.stopPolling();
+        this.navigatedChallengeIds.clear();
+        this.challengeEventService.clear();
+      }
+    });
 
     this.authDialogService.dialogState$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -42,14 +66,76 @@ export class ToolbarComponent implements OnInit {
         this.showRegisterDialog = state === 'register';
       });
 
-    this.themeService.darkMode$
+    this.themeService.darkMode$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((isDark) => {
+      this.isDarkMode = isDark;
+    });
+
+    this.challengeEventService
+      .getIncomingChallenges$()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((isDarkMode) => {
-        this.isDarkMode = isDarkMode;
+      .subscribe((challenges) => {
+        this.incomingChallenges = challenges;
       });
   }
 
+  private startPolling(): void {
+    this.fetchChallenges();
+    this.pollHandle = setInterval(() => this.fetchChallenges(), 10_000);
+  }
+
+  private stopPolling(): void {
+    if (this.pollHandle !== null) {
+      clearInterval(this.pollHandle);
+      this.pollHandle = null;
+    }
+  }
+
+  private fetchChallenges(): void {
+    this.challengeService.listChallenges().subscribe({
+      next: (response) => {
+        const incoming = response.in ?? response.incoming ?? [];
+        this.challengeEventService.setIncomingChallenges(incoming);
+
+        const outgoing = response.out ?? response.outgoing ?? [];
+        for (const c of outgoing) {
+          if (c.status === 'accepted' && c.gameId && !this.navigatedChallengeIds.has(c.id)) {
+            this.navigatedChallengeIds.add(c.id);
+            if (!this.router.url.includes(`/game/${c.gameId}`)) {
+              void this.router.navigate(['/game', c.gameId]);
+            }
+          }
+        }
+      },
+    });
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!(event.target as HTMLElement).closest('[data-dropdown]')) {
+      this.profileOpen = false;
+      this.notifOpen = false;
+    }
+  }
+
+  toggleProfile(event: MouseEvent): void {
+    event.stopPropagation();
+    const wasOpen = this.profileOpen;
+    this.profileOpen = false;
+    this.notifOpen = false;
+    this.profileOpen = !wasOpen;
+  }
+
+  toggleNotif(event: MouseEvent): void {
+    event.stopPropagation();
+    const wasOpen = this.notifOpen;
+    this.profileOpen = false;
+    this.notifOpen = false;
+    this.notifOpen = !wasOpen;
+  }
+
   openLoginDialog(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
     this.authDialogService.openLogin();
   }
 
@@ -58,6 +144,8 @@ export class ToolbarComponent implements OnInit {
   }
 
   openRegisterDialog(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
     this.authDialogService.openRegister();
   }
 
@@ -66,15 +154,54 @@ export class ToolbarComponent implements OnInit {
   }
 
   logout(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
     this.authService.logout();
   }
 
-  toggleTheme(): void {
+  toggleTheme(event: MouseEvent): void {
+    event.stopPropagation();
     this.themeService.toggleTheme();
   }
 
+  goToHome(): void {
+    void this.router.navigate(['/']);
+  }
+
   goToProfile(): void {
-    this.router.navigate(['/profile']);
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/profile']);
+  }
+
+  goToGames(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/games']);
+  }
+
+  goToTournaments(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/tournaments']);
+  }
+
+  goToChallenges(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/challenges']);
+  }
+
+  goToBots(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/bots']);
+  }
+
+  goToAnalysis(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/analysis']);
   }
 
   onLoginSuccess(): void {
@@ -84,4 +211,52 @@ export class ToolbarComponent implements OnInit {
   onRegisterSuccess(): void {
     this.closeRegisterDialog();
   }
+
+  getInitial(): string {
+    return this.currentUser?.username?.charAt(0).toUpperCase() ?? '?';
+  }
+
+  getTimeControlDisplay(challenge: Challenge): string {
+    const { limit, increment } = challenge.timeControl;
+    if (!limit || !increment) return 'Unlimited';
+    return `${Math.floor(limit / 60)}+${increment}`;
+  }
+
+  getExpirationInfo(challenge: Challenge): string {
+    const diff = new Date(challenge.expiresAt).getTime() - Date.now();
+    if (diff <= 0) return 'Expired';
+    const min = Math.floor(diff / 60000);
+    return min > 60 ? `${Math.floor(min / 60)}h` : `${min}m`;
+  }
+
+  acceptChallenge(event: MouseEvent, challenge: Challenge): void {
+    event.stopPropagation();
+    if (this.acceptingId || this.decliningId) return;
+    this.acceptingId = challenge.id;
+    this.challengeService.acceptChallenge(challenge.id).subscribe({
+      next: (accepted) => {
+        this.acceptingId = null;
+        this.challengeEventService.onChallengeAccepted(accepted);
+        if (accepted.gameId) void this.router.navigate(['/game', accepted.gameId]);
+      },
+      error: () => {
+        this.acceptingId = null;
+      },
+    });
+  }
+
+  declineChallenge(event: MouseEvent, challenge: Challenge): void {
+    event.stopPropagation();
+    if (this.acceptingId || this.decliningId) return;
+    this.decliningId = challenge.id;
+    this.challengeService.declineChallenge(challenge.id, { reason: 'generic' }).subscribe({
+      next: () => {
+        this.decliningId = null;
+        this.challengeEventService.removeChallenge(challenge.id);
+      },
+      error: () => {
+        this.decliningId = null;
+      },
+    });
+  }
 }

src/app/core/config.loader.ts

@@ -4,8 +4,10 @@
  */
 export function loadRuntimeConfig() {
   const config = (window as any).__RUNTIME_CONFIG__ || {};
+  const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+  const derivedWsUrl = `${wsProtocol}://${window.location.host}`;
   return {
     apiUrl: config.API_URL || '',
-    wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
+    wsUrl: config.WEBSOCKET_URL || derivedWsUrl,
   };
 }

src/app/models/analysis.models.ts

@@ -0,0 +1,25 @@
+export interface AnalysisRequest {
+  fen: string;
+  depth: number;
+}
+
+export interface AnalysisResponse {
+  eval: number;
+  winChance: number;
+  depth: number;
+  bestMove: string;
+  continuations: string[];
+}
+
+export type MoveQuality = 'brilliant' | 'best' | 'good' | 'inaccuracy' | 'mistake' | 'blunder';
+
+export interface AnnotatedMove {
+  san: string;
+  fen: string;
+  evalBefore: number | null;
+  evalAfter: number | null;
+  quality: MoveQuality | null;
+  bestMove: string | null;
+  winChanceBefore: number | null;
+  winChanceAfter: number | null;
+}

src/app/models/auth.models.ts

@@ -17,7 +17,8 @@ export interface RegisterResponse {
 }
 
 export interface LoginResponse {
-  token: string;
+  accessToken: string;
+  refreshToken: string;
 }
 
 export interface CurrentUser {

src/app/models/bot.models.ts

@@ -0,0 +1,10 @@
+export interface Bot {
+  id: string;
+  name: string;
+  rating: number;
+  createdAt: string;
+}
+
+export interface BotWithToken extends Bot {
+  token: string;
+}

src/app/models/challenge.models.ts

@@ -1,49 +1,55 @@
-export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' | 'cancelled' | 'expired';
+export type ChallengeStatus =
+  | 'created'
+  | 'pending'
+  | 'accepted'
+  | 'declined'
+  | 'cancelled'
+  | 'expired';
 
 export type PlayerColor = 'white' | 'black' | 'random';
 
 export interface Player {
-    id: string;
-    name: string;
-    rating: number;
+  id: string;
+  name: string;
+  rating: number;
 }
 
 export interface TimeControl {
-    type: string | null;
-    limit: number | null;
-    increment: number | null;
+  type: string | null;
+  limit: number | null;
+  increment: number | null;
 }
 
 export interface Challenge {
-    id: string;
-    challenger: Player;
-    destUser: Player;
-    variant: string;
-    color: PlayerColor;
-    timeControl: TimeControl;
-    status: ChallengeStatus;
-    declineReason: string | null;
-    gameId: string | null;
-    expiresAt: string;
-    createdAt: string;
+  id: string;
+  challenger: Player;
+  destUser: Player;
+  variant: string;
+  color: PlayerColor;
+  timeControl: TimeControl;
+  status: ChallengeStatus;
+  declineReason: string | null;
+  gameId: string | null;
+  expiresAt: string;
+  createdAt: string;
 }
 
 export interface SendChallengeRequest {
-    timeControl: {
-        limitSeconds: number;
-        incrementSeconds: number;
-    };
-    color?: PlayerColor;
-    ttlSeconds?: number;
+  timeControl: {
+    limitSeconds: number;
+    incrementSeconds: number;
+  };
+  color?: PlayerColor;
+  ttlSeconds?: number;
 }
 
 export interface ListChallengesResponse {
-    'in'?: Challenge[];
-    'out'?: Challenge[];
-    incoming?: Challenge[];
-    outgoing?: Challenge[];
+  in?: Challenge[];
+  out?: Challenge[];
+  incoming?: Challenge[];
+  outgoing?: Challenge[];
 }
 
 export interface DeclineChallengeRequest {
-    reason?: string;
+  reason?: string;
 }

src/app/models/game.models.ts

@@ -1,5 +1,10 @@
 export type GameTurn = 'white' | 'black';
 
+export interface ClockState {
+  whiteRemainingMs: number;
+  blackRemainingMs: number;
+}
+
 export type GameStatus =
   | 'started'
   | 'check'
@@ -26,6 +31,7 @@ export interface GameState {
   moves: string[];
   undoAvailable: boolean;
   redoAvailable: boolean;
+  clock: ClockState | null;
 }
 
 export interface GameFull {

src/app/models/tournament.models.ts

@@ -0,0 +1,66 @@
+export interface TournamentClock {
+  limit: number;
+  increment: number;
+}
+
+export interface TournamentVariant {
+  key: string;
+  name: string;
+}
+
+export interface TournamentBotRef {
+  id: string;
+  name: string;
+}
+
+export interface TournamentResult {
+  rank: number;
+  points: number;
+  tieBreak: number;
+  bot: TournamentBotRef;
+  nbGames: number;
+  wins: number;
+  draws: number;
+  losses: number;
+}
+
+export interface TournamentStanding {
+  page: number;
+  players: TournamentResult[];
+}
+
+export interface Tournament {
+  id: string;
+  fullName: string;
+  clock: TournamentClock;
+  variant: TournamentVariant;
+  rated: boolean;
+  nbPlayers: number;
+  nbRounds: number;
+  createdBy: string;
+  startsAt: string | null;
+  status: 'created' | 'started' | 'finished';
+  round: number;
+  standing: TournamentStanding;
+  winner: TournamentBotRef | null;
+}
+
+export interface TournamentList {
+  created: Tournament[];
+  started: Tournament[];
+  finished: Tournament[];
+}
+
+export interface TournamentPairing {
+  id: string;
+  round: number;
+  white: TournamentBotRef | null;
+  black: TournamentBotRef;
+  gameId: string | null;
+  winner: 'white' | 'black' | 'draw' | null;
+}
+
+export interface RoundPairings {
+  round: number;
+  pairings: TournamentPairing[];
+}

src/app/pages/analysis/analysis.component.css

@@ -0,0 +1,542 @@
+/* ============================================================
+   DESIGN TOKENS — dark mode (default)
+============================================================ */
+:host {
+  --nc-neon: #ff45c8;
+  --nc-neon-soft: rgba(255, 69, 200, 0.55);
+  --nc-bg: #06060d;
+  --nc-surface: rgba(20, 17, 42, 0.6);
+  --nc-surface-solid: rgba(10, 8, 22, 0.95);
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.08);
+  --nc-border-strong: rgba(255, 255, 255, 0.15);
+  --nc-warning: #ffb13a;
+  --nc-warning-soft: rgba(255, 177, 58, 0.4);
+  --nc-danger: #ff7a7a;
+  --nc-danger-bg: rgba(255, 122, 122, 0.08);
+  --nc-danger-soft: rgba(255, 122, 122, 0.3);
+  --nc-success: #5ee5a1;
+  --nc-clock-bg: rgba(0, 0, 0, 0.4);
+  --nc-btn-bg: rgba(255, 255, 255, 0.03);
+  --nc-btn-hover-bg: rgba(255, 255, 255, 0.07);
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --nc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+}
+
+:host-context(html:not([data-theme='dark'])) {
+  --nc-neon: #ff3dbb;
+  --nc-neon-soft: rgba(255, 61, 187, 0.55);
+  --nc-bg: transparent;
+  --nc-surface: rgba(26, 24, 56, 0.72);
+  --nc-surface-solid: rgba(26, 24, 56, 0.97);
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.72);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.1);
+  --nc-border-strong: rgba(255, 255, 255, 0.18);
+  --nc-btn-bg: rgba(255, 255, 255, 0.05);
+  --nc-btn-hover-bg: rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================================
+   SHELL
+============================================================ */
+.analysis-shell {
+  min-height: 100dvh;
+  background: var(--nc-bg);
+  font-family: var(--nc-sans);
+  color: var(--nc-text);
+  position: relative;
+}
+
+.analysis-shell::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(74, 41, 98, 0.12), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(41, 74, 98, 0.18), transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================================
+   PAGE CONTAINER
+============================================================ */
+.page {
+  position: relative;
+  z-index: 1;
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 28px 32px 60px;
+}
+
+/* ============================================================
+   BREADCRUMB
+============================================================ */
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.crumb-link {
+  color: var(--nc-text-dim);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 0.15s;
+}
+
+.crumb-link:hover {
+  color: var(--nc-neon);
+}
+.crumb-sep {
+  color: var(--nc-text-dim);
+  opacity: 0.5;
+}
+.crumb-current {
+  color: var(--nc-text-muted);
+}
+
+/* ============================================================
+   PAGE HEADER
+============================================================ */
+.page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--nc-border);
+}
+
+.page-title h1 {
+  margin: 0 0 4px;
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--nc-text);
+}
+
+.page-subtitle {
+  margin: 0;
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.06em;
+}
+
+/* ============================================================
+   ERROR
+============================================================ */
+.state-error {
+  padding: 14px 16px;
+  margin-bottom: 20px;
+  color: var(--nc-danger);
+  background: var(--nc-danger-bg);
+  border: 1px solid var(--nc-danger-soft);
+  font-size: 13px;
+}
+
+/* ============================================================
+   INPUT SECTION
+============================================================ */
+.input-section {
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 20px;
+  margin-bottom: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.mode-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--nc-border);
+  padding-bottom: 12px;
+}
+
+.mode-tab {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--nc-text-muted);
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.mode-tab:hover {
+  color: var(--nc-text);
+}
+
+.mode-tab.active {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+}
+
+.input-row {
+  display: flex;
+  gap: 8px;
+}
+
+.text-input {
+  flex: 1;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  font-family: var(--nc-mono);
+  font-size: 12px;
+  padding: 9px 12px;
+  letter-spacing: 0.04em;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.text-input:focus {
+  border-color: var(--nc-neon-soft);
+}
+.text-input::placeholder {
+  color: var(--nc-text-dim);
+}
+
+.pgn-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.text-area {
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  font-family: var(--nc-mono);
+  font-size: 12px;
+  padding: 10px 12px;
+  letter-spacing: 0.04em;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+  line-height: 1.5;
+}
+
+.text-area:focus {
+  border-color: var(--nc-neon-soft);
+}
+.text-area::placeholder {
+  color: var(--nc-text-dim);
+}
+
+.depth-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 6px;
+  border-top: 1px solid var(--nc-border);
+}
+
+.depth-label {
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--nc-text-dim);
+}
+
+.depth-input {
+  width: 56px;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  font-family: var(--nc-mono);
+  font-size: 13px;
+  padding: 7px 10px;
+  outline: none;
+  transition: border-color 0.15s;
+  text-align: center;
+}
+
+.depth-input:focus {
+  border-color: var(--nc-neon-soft);
+}
+
+/* ============================================================
+   BUTTONS
+============================================================ */
+.btn {
+  font-family: var(--nc-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 9px 14px;
+  cursor: pointer;
+  border: 1px solid var(--nc-border-strong);
+  background: var(--nc-btn-bg);
+  color: var(--nc-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+  flex-shrink: 0;
+}
+
+.btn:hover:not([disabled]) {
+  background: var(--nc-btn-hover-bg);
+  border-color: var(--nc-text-muted);
+}
+
+.btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--nc-neon) !important;
+  color: #fff !important;
+  border-color: var(--nc-neon) !important;
+  box-shadow: 0 0 14px rgba(255, 69, 200, 0.3);
+  font-weight: 700;
+}
+
+.btn-primary:hover:not([disabled]) {
+  box-shadow: 0 0 20px rgba(255, 69, 200, 0.5);
+}
+
+.btn-analyse {
+  margin-left: auto;
+  background: rgba(255, 69, 200, 0.12);
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+}
+
+.btn-analyse:hover:not([disabled]) {
+  background: rgba(255, 69, 200, 0.2);
+}
+
+/* ============================================================
+   MAIN GRID
+============================================================ */
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 28px;
+  align-items: start;
+}
+
+/* ============================================================
+   BOARD COLUMN
+============================================================ */
+.board-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 520px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.board-wrap {
+  container-type: size;
+  aspect-ratio: 1 / 1;
+  padding: 10px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 69, 200, 0.06);
+}
+
+.nav-bar {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 6px 0;
+}
+
+.icon-btn {
+  background: var(--nc-btn-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text-muted);
+  padding: 8px 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+
+.icon-btn:hover {
+  color: var(--nc-neon);
+  background: var(--nc-btn-hover-bg);
+}
+
+/* ============================================================
+   SIDE COLUMN
+============================================================ */
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.side-card {
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.side-card-summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 13px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+
+.side-card-summary::-webkit-details-marker {
+  display: none;
+}
+
+.side-card-title {
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--nc-text-muted);
+  font-weight: 600;
+  flex: 1;
+}
+
+.side-card-meta {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.08em;
+}
+
+.chev {
+  color: var(--nc-text-dim);
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+.side-card[open] .chev {
+  transform: rotate(180deg);
+}
+.side-card[open] .side-card-summary {
+  border-bottom: 1px solid var(--nc-border);
+}
+
+.side-card-body {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.timeline-body {
+  padding: 10px 16px;
+}
+
+/* ============================================================
+   EVAL GRID
+============================================================ */
+.eval-grid {
+  gap: 8px;
+}
+
+.eval-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.eval-row--col {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.eval-label {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--nc-text-dim);
+  flex-shrink: 0;
+}
+
+.eval-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--nc-text);
+}
+
+.eval-value.mono {
+  font-family: var(--nc-mono);
+  font-size: 12px;
+}
+
+.eval-value.positive {
+  color: var(--nc-success);
+}
+.eval-value.negative {
+  color: var(--nc-danger);
+}
+
+.continuation {
+  font-size: 11px;
+  color: var(--nc-text-muted);
+  line-height: 1.6;
+  word-break: break-all;
+}
+
+/* ============================================================
+   RESPONSIVE
+============================================================ */
+@media (max-width: 1100px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+  .board-col {
+    max-width: 560px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 16px 16px 48px;
+  }
+  .page-title h1 {
+    font-size: 20px;
+  }
+}

src/app/pages/analysis/analysis.component.html

@@ -0,0 +1,355 @@
+<div class="analysis-shell">
+  <div class="page">
+    <!-- Breadcrumb -->
+    <nav class="crumb" aria-label="Breadcrumb">
+      <a routerLink="/" class="crumb-link">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">Analysis</span>
+    </nav>
+
+    <!-- Page header -->
+    <header class="page-header">
+      <div class="page-title">
+        <h1>Chess Analysis</h1>
+        <p class="page-subtitle">Analyse positions, games or custom PGN with the engine</p>
+      </div>
+    </header>
+
+    <!-- Error -->
+    @if (errorMessage) {
+      <div class="state-error">{{ errorMessage }}</div>
+    }
+
+    <!-- Input section -->
+    <section class="input-section">
+      <!-- Mode tabs -->
+      <div class="mode-tabs" role="tablist" aria-label="Analysis input mode">
+        <button
+          class="mode-tab"
+          [class.active]="inputMode === 'fen'"
+          role="tab"
+          (click)="setInputMode('fen')"
+        >
+          FEN
+        </button>
+        <button
+          class="mode-tab"
+          [class.active]="inputMode === 'pgn'"
+          role="tab"
+          (click)="setInputMode('pgn')"
+        >
+          PGN
+        </button>
+        <button
+          class="mode-tab"
+          [class.active]="inputMode === 'game'"
+          role="tab"
+          (click)="setInputMode('game')"
+        >
+          Game ID
+        </button>
+      </div>
+
+      <!-- FEN input -->
+      @if (inputMode === 'fen') {
+        <div class="input-row">
+          <input
+            id="fen-input"
+            type="text"
+            class="text-input"
+            placeholder="Paste FEN string here…"
+            autocomplete="off"
+            [(ngModel)]="fenInput"
+            (keydown.enter)="loadFen()"
+          />
+          <button
+            class="btn btn-primary"
+            type="button"
+            (click)="loadFen()"
+            [disabled]="!fenInput.trim()"
+          >
+            Load
+          </button>
+        </div>
+      }
+
+      <!-- PGN input -->
+      @if (inputMode === 'pgn') {
+        <div class="pgn-col">
+          <textarea
+            id="pgn-input"
+            class="text-area"
+            rows="5"
+            placeholder="Paste PGN here…"
+            [(ngModel)]="pgnInput"
+          ></textarea>
+          <button
+            class="btn btn-primary"
+            type="button"
+            (click)="loadPgn()"
+            [disabled]="!pgnInput.trim() || loading"
+          >
+            @if (loading) {
+              Loading…
+            } @else {
+              Import PGN
+            }
+          </button>
+        </div>
+      }
+
+      <!-- Game ID input -->
+      @if (inputMode === 'game') {
+        <div class="input-row">
+          <input
+            id="gameid-input"
+            type="text"
+            class="text-input"
+            placeholder="Game ID"
+            autocomplete="off"
+            [(ngModel)]="fenInput"
+            (keydown.enter)="loadGame(fenInput)"
+          />
+          <button
+            class="btn btn-primary"
+            type="button"
+            (click)="loadGame(fenInput)"
+            [disabled]="!fenInput.trim() || loading"
+          >
+            @if (loading) {
+              Loading…
+            } @else {
+              Load game
+            }
+          </button>
+        </div>
+      }
+
+      <!-- Depth + analyse -->
+      <div class="depth-row">
+        <label class="depth-label" for="depth-input">Depth</label>
+        <input
+          id="depth-input"
+          type="number"
+          class="depth-input"
+          min="1"
+          max="18"
+          [(ngModel)]="depth"
+        />
+        <button
+          class="btn btn-analyse"
+          type="button"
+          (click)="runAnalysis()"
+          [disabled]="analysing"
+        >
+          @if (analysing) {
+            Analysing…
+          } @else {
+            Analyse
+          }
+        </button>
+      </div>
+    </section>
+
+    <!-- Main layout: board + sidebar -->
+    <div class="layout">
+      <!-- Board column -->
+      <div class="board-col">
+        <div class="board-wrap">
+          <app-chess-board
+            [fen]="displayFen"
+            [selectedSquare]="null"
+            [highlightedSquares]="[]"
+            boardTheme="arabian"
+          />
+        </div>
+
+        <!-- Navigation bar -->
+        @if (fenHistory.length > 1) {
+          <div class="nav-bar">
+            <button class="icon-btn" title="First position" (click)="navigateHistory('first')">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="11 17 6 12 11 7" />
+                <polyline points="18 17 13 12 18 7" />
+              </svg>
+            </button>
+            <button class="icon-btn" title="Previous" (click)="navigateHistory('prev')">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </button>
+            <button class="icon-btn" title="Next" (click)="navigateHistory('next')">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </button>
+            <button class="icon-btn" title="Last position" (click)="navigateHistory('last')">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="13 17 18 12 13 7" />
+                <polyline points="6 17 11 12 6 7" />
+              </svg>
+            </button>
+          </div>
+        }
+      </div>
+
+      <!-- Side column -->
+      <aside class="side">
+        <!-- Single position analysis result -->
+        @if (positionAnalysis && !hasAnnotations) {
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Position Analysis</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <div class="side-card-body eval-grid">
+              <div class="eval-row">
+                <span class="eval-label">Evaluation</span>
+                <span
+                  class="eval-value"
+                  [class.positive]="positionAnalysis.eval > 0"
+                  [class.negative]="positionAnalysis.eval < 0"
+                >
+                  {{ positionAnalysis.eval > 0 ? '+' : '' }}{{ positionAnalysis.eval.toFixed(2) }}
+                </span>
+              </div>
+              <div class="eval-row">
+                <span class="eval-label">Win chance</span>
+                <span class="eval-value">{{ (positionAnalysis.winChance * 100).toFixed(1) }}%</span>
+              </div>
+              <div class="eval-row">
+                <span class="eval-label">Best move</span>
+                <span class="eval-value mono">{{ positionAnalysis.bestMove }}</span>
+              </div>
+              <div class="eval-row">
+                <span class="eval-label">Depth</span>
+                <span class="eval-value mono">{{ positionAnalysis.depth }}</span>
+              </div>
+              @if (positionAnalysis.continuations.length > 0) {
+                <div class="eval-row eval-row--col">
+                  <span class="eval-label">Continuation</span>
+                  <span class="eval-value mono continuation">{{
+                    positionAnalysis.continuations.join(' ')
+                  }}</span>
+                </div>
+              }
+            </div>
+          </details>
+        }
+
+        <!-- Evaluation timeline -->
+        @if (hasAnnotations) {
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Evaluation</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <div class="side-card-body timeline-body">
+              <app-eval-timeline [moves]="annotatedMoves" [activePly]="activePly" />
+            </div>
+          </details>
+
+          <!-- Annotated moves -->
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Moves</span>
+              <span class="side-card-meta">{{ annotatedMoves.length }} plies</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <app-annotated-move-list
+              [moves]="annotatedMoves"
+              [activePly]="activePly"
+              (plySelected)="navigateToPly($event)"
+            />
+          </details>
+        }
+      </aside>
+    </div>
+  </div>
+</div>

src/app/pages/analysis/analysis.component.ts

@@ -0,0 +1,244 @@
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { switchMap, of } from 'rxjs';
+
+import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
+import { EvalTimelineComponent } from '../../components/eval-timeline/eval-timeline.component';
+import { AnnotatedMoveListComponent } from '../../components/annotated-move-list/annotated-move-list.component';
+
+import { GameApiService } from '../../services/game-api.service';
+import { AnalysisService } from '../../services/analysis.service';
+
+import { AnnotatedMove, AnalysisResponse } from '../../models/analysis.models';
+import { GameFull } from '../../models/game.models';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+const ANALYSIS_DEPTH_DEFAULT = 14;
+const STARTING_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
+
+type InputMode = 'fen' | 'pgn' | 'game';
+
+@Component({
+  selector: 'app-analysis',
+  standalone: true,
+  imports: [
+    RouterLink,
+    FormsModule,
+    ChessBoardComponent,
+    EvalTimelineComponent,
+    AnnotatedMoveListComponent,
+  ],
+  templateUrl: './analysis.component.html',
+  styleUrl: './analysis.component.css',
+})
+export class AnalysisComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly gameApi = inject(GameApiService);
+  private readonly analysisService = inject(AnalysisService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  // ── State ─────────────────────────────────────────────────
+  inputMode: InputMode = 'fen';
+  fenInput = '';
+  pgnInput = '';
+  depth = ANALYSIS_DEPTH_DEFAULT;
+
+  loading = false;
+  analysing = false;
+  errorMessage = '';
+
+  currentFen = STARTING_FEN;
+  game: GameFull | null = null;
+
+  /** FEN for each ply (index 0 = position before move 0 was played) */
+  fenHistory: string[] = [STARTING_FEN];
+  annotatedMoves: AnnotatedMove[] = [];
+  activePly: number | null = null;
+
+  /** Single-position analysis result (for custom FEN/PGN input) */
+  positionAnalysis: AnalysisResponse | null = null;
+
+  get displayFen(): string {
+    if (this.activePly !== null && this.fenHistory[this.activePly + 1]) {
+      return this.fenHistory[this.activePly + 1];
+    }
+    return this.currentFen;
+  }
+
+  get hasAnnotations(): boolean {
+    return this.annotatedMoves.length > 0;
+  }
+
+  // ── Lifecycle ─────────────────────────────────────────────
+  ngOnInit(): void {
+    // Support /analysis?gameId=xxx deep-link
+    this.route.queryParamMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
+      const gameId = params.get('gameId');
+      if (gameId) {
+        this.inputMode = 'game';
+        this.loadGame(gameId);
+      }
+    });
+  }
+
+  // ── Input mode ─────────────────────────────────────────────
+  setInputMode(mode: InputMode): void {
+    this.inputMode = mode;
+    this.errorMessage = '';
+  }
+
+  // ── Load FEN ──────────────────────────────────────────────
+  loadFen(): void {
+    const fen = this.fenInput.trim();
+    if (!fen) return;
+    this.reset();
+    this.currentFen = fen;
+    this.fenHistory = [fen];
+    this.analyseSinglePosition(fen);
+  }
+
+  // ── Load PGN ──────────────────────────────────────────────
+  loadPgn(): void {
+    const pgn = this.pgnInput.trim();
+    if (!pgn) return;
+    this.reset();
+    this.loading = true;
+    this.gameApi
+      .importPgn(pgn)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          this.loading = false;
+          this.applyGame(game);
+        },
+        error: (err) => {
+          this.loading = false;
+          this.errorMessage = getErrorMessage(err, 'Could not import PGN.');
+        },
+      });
+  }
+
+  // ── Load game by ID ───────────────────────────────────────
+  loadGame(gameId: string): void {
+    this.reset();
+    this.loading = true;
+    this.gameApi
+      .getGame(gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          this.loading = false;
+          this.applyGame(game);
+        },
+        error: (err) => {
+          this.loading = false;
+          this.errorMessage = getErrorMessage(err, 'Could not load game.');
+        },
+      });
+  }
+
+  // ── Run full analysis ─────────────────────────────────────
+  runAnalysis(): void {
+    if (this.fenHistory.length < 2) {
+      this.analyseSinglePosition(this.currentFen);
+      return;
+    }
+    this.analysing = true;
+    this.errorMessage = '';
+    const sans =
+      this.annotatedMoves.length > 0
+        ? this.annotatedMoves.map((m) => m.san)
+        : (this.game?.state.moves ?? []);
+
+    this.analysisService
+      .analyzeGame(sans, this.fenHistory, this.depth)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (annotated) => {
+          this.annotatedMoves = annotated;
+          this.analysing = false;
+        },
+        error: (err) => {
+          this.errorMessage = getErrorMessage(err, 'Analysis failed.');
+          this.analysing = false;
+        },
+      });
+  }
+
+  // ── Board navigation ──────────────────────────────────────
+  navigateToPly(ply: number): void {
+    this.activePly = ply;
+  }
+
+  navigateHistory(direction: 'first' | 'prev' | 'next' | 'last'): void {
+    const total = this.fenHistory.length - 1;
+    const current = this.activePly ?? total;
+    let next: number;
+    switch (direction) {
+      case 'first':
+        next = 0;
+        break;
+      case 'prev':
+        next = Math.max(0, current - 1);
+        break;
+      case 'next':
+        next = Math.min(total, current + 1);
+        break;
+      default:
+        next = total;
+        break;
+    }
+    this.activePly = next >= total ? null : next;
+  }
+
+  // ── Private helpers ───────────────────────────────────────
+  private reset(): void {
+    this.errorMessage = '';
+    this.annotatedMoves = [];
+    this.positionAnalysis = null;
+    this.activePly = null;
+    this.game = null;
+    this.fenHistory = [STARTING_FEN];
+    this.currentFen = STARTING_FEN;
+  }
+
+  private applyGame(game: GameFull): void {
+    this.game = game;
+    this.currentFen = game.state.fen;
+    // Build a flat FEN history from scratch using moves array
+    // The server gives us the final FEN. We reconstruct history by
+    // storing the final FEN; full per-ply history requires per-move API calls
+    // which is out of scope here — we store what we have and allow analysis to proceed.
+    this.fenHistory = [game.state.fen];
+    // Seed annotated moves with san strings, no quality yet
+    this.annotatedMoves = game.state.moves.map((san) => ({
+      san,
+      fen: game.state.fen,
+      evalBefore: null,
+      evalAfter: null,
+      quality: null,
+      bestMove: null,
+      winChanceBefore: null,
+      winChanceAfter: null,
+    }));
+  }
+
+  private analyseSinglePosition(fen: string): void {
+    this.analysing = true;
+    this.analysisService
+      .analyzePosition(fen, this.depth)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (result) => {
+          this.positionAnalysis = result;
+          this.analysing = false;
+        },
+        error: (err) => {
+          this.errorMessage = getErrorMessage(err, 'Analysis failed.');
+          this.analysing = false;
+        },
+      });
+  }
+}

src/app/pages/bots/bots.component.css

@@ -0,0 +1,384 @@
+:host {
+  --nc-neon: #ff45c8;
+  --nc-bg: #06060d;
+  --nc-surface: rgba(20, 17, 42, 0.6);
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.08);
+  --nc-border-strong: rgba(255, 255, 255, 0.15);
+  --nc-success: #5ee5a1;
+  --nc-danger: #ff7a7a;
+  --nc-warn: #ffd166;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  display: block;
+  min-height: 100vh;
+  background: var(--nc-bg);
+  font-family: var(--nc-sans);
+  color: var(--nc-text);
+}
+
+:host-context(html:not([data-theme='dark'])) {
+  --nc-neon: #c026d3;
+  --nc-bg: #f5f0fc;
+  --nc-surface: rgba(255, 255, 255, 0.88);
+  --nc-text: #0f0022;
+  --nc-text-muted: rgba(15, 0, 34, 0.65);
+  --nc-text-dim: rgba(15, 0, 34, 0.4);
+  --nc-border: rgba(15, 0, 34, 0.1);
+  --nc-border-strong: rgba(15, 0, 34, 0.2);
+  --nc-success: #16a34a;
+  --nc-danger: #dc2626;
+  --nc-warn: #b45309;
+}
+
+.b-shell {
+  padding-top: 72px;
+  min-height: 100vh;
+}
+.page {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 32px 20px 64px;
+}
+
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 28px;
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.06em;
+}
+.crumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--nc-text-dim);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.crumb-link:hover {
+  color: var(--nc-neon);
+}
+.crumb-sep {
+  opacity: 0.35;
+}
+.crumb-current {
+  color: var(--nc-text-muted);
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.page-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+.page-sub {
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.btn-new {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nc-neon);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-new:hover {
+  opacity: 0.85;
+}
+
+/* Create panel */
+.create-panel {
+  border: 1px solid var(--nc-border-strong);
+  border-radius: 12px;
+  background: var(--nc-surface);
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.create-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.field-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--nc-text-muted);
+}
+.create-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.text-input {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--nc-border-strong);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nc-text);
+  font-size: 14px;
+}
+.text-input:focus {
+  outline: 2px solid var(--nc-neon);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+.text-input:disabled {
+  opacity: 0.5;
+}
+.error-text {
+  font-size: 12px;
+  color: var(--nc-danger);
+  margin: 0;
+}
+
+/* Buttons */
+.btn-primary {
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nc-neon);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity 0.15s;
+}
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-ghost {
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--nc-border-strong);
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+.btn-ghost:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* States */
+.state-msg {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 24px 0;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+}
+.pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--nc-neon);
+  flex-shrink: 0;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 64px 0;
+  text-align: center;
+}
+.empty-icon {
+  color: var(--nc-text-dim);
+  margin-bottom: 4px;
+}
+.empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+}
+.empty-sub {
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  margin: 0;
+}
+
+/* Bot list */
+.bot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.bot-card {
+  border: 1px solid var(--nc-border);
+  border-radius: 12px;
+  background: var(--nc-surface);
+  overflow: hidden;
+}
+.bot-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+}
+.bot-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--nc-neon);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+}
+.bot-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+}
+.bot-name {
+  font-size: 14px;
+  font-weight: 600;
+}
+.bot-meta {
+  font-size: 11px;
+  color: var(--nc-text-muted);
+}
+.bot-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.btn-token {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid var(--nc-border-strong);
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.btn-token:hover,
+.btn-token.active {
+  background: rgba(255, 69, 200, 0.1);
+  color: var(--nc-neon);
+  border-color: var(--nc-neon);
+}
+.btn-token:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-danger {
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid rgba(255, 122, 122, 0.3);
+  background: transparent;
+  color: var(--nc-danger);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn-danger:hover {
+  background: rgba(255, 122, 122, 0.1);
+}
+.btn-danger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Token panel */
+.token-panel {
+  border-top: 1px solid var(--nc-border);
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.token-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--nc-warn);
+}
+.token-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.token-value {
+  flex: 1;
+  font-family: monospace;
+  font-size: 11px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 8px 10px;
+  word-break: break-all;
+  color: var(--nc-text-muted);
+  border: 1px solid var(--nc-border);
+}
+.btn-copy {
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid var(--nc-border-strong);
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+.btn-copy:hover {
+  color: var(--nc-success);
+}

src/app/pages/bots/bots.component.html

@@ -0,0 +1,193 @@
+<div class="b-shell">
+  <div class="page">
+    <nav class="crumb">
+      <a routerLink="/" class="crumb-link">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">My Bots</span>
+    </nav>
+
+    <header class="page-header">
+      <div class="title-row">
+        <h1 class="page-title">My Bots</h1>
+        <button type="button" class="btn-new" (click)="openCreate()">
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          New bot
+        </button>
+      </div>
+      <p class="page-sub">
+        Bots are automated players owned by your account. Each has a token used to join tournaments
+        and make moves.
+      </p>
+    </header>
+
+    @if (showCreate) {
+      <div class="create-panel">
+        <div class="create-inner">
+          <label class="field-label">Bot name</label>
+          <div class="create-row">
+            <input
+              type="text"
+              class="text-input"
+              [(ngModel)]="newBotName"
+              placeholder="e.g. AlphaBot"
+              (keydown.enter)="submitCreate()"
+              [disabled]="creating"
+              maxlength="40"
+            />
+            <button
+              type="button"
+              class="btn-primary"
+              (click)="submitCreate()"
+              [disabled]="creating || !newBotName.trim()"
+            >
+              {{ creating ? 'Creating…' : 'Create' }}
+            </button>
+            <button type="button" class="btn-ghost" (click)="cancelCreate()" [disabled]="creating">
+              Cancel
+            </button>
+          </div>
+          @if (createError) {
+            <p class="error-text">{{ createError }}</p>
+          }
+        </div>
+      </div>
+    }
+
+    @if (loading) {
+      <div class="state-msg"><span class="pulse"></span>Loading bots…</div>
+    } @else if (bots.length === 0) {
+      <div class="empty-state">
+        <svg
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="empty-icon"
+        >
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+        <p class="empty-title">No bots yet</p>
+        <p class="empty-sub">Create a bot to join tournaments and play automated games.</p>
+      </div>
+    } @else {
+      <div class="bot-list">
+        @for (bot of bots; track bot.id) {
+          <div class="bot-card">
+            <div class="bot-main">
+              <div class="bot-avatar">{{ bot.name.charAt(0).toUpperCase() }}</div>
+              <div class="bot-info">
+                <span class="bot-name">{{ bot.name }}</span>
+                <span class="bot-meta"
+                  >Rating {{ bot.rating }} · Created {{ bot.createdAt | date: 'MMM d, yyyy' }}</span
+                >
+              </div>
+              <div class="bot-actions">
+                <button
+                  type="button"
+                  class="btn-token"
+                  [class.active]="!!revealedTokens[bot.id]"
+                  [disabled]="revealingId === bot.id"
+                  (click)="revealToken(bot.id)"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    @if (revealedTokens[bot.id]) {
+                      <path
+                        d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"
+                      />
+                      <path
+                        d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"
+                      />
+                      <line x1="1" y1="1" x2="23" y2="23" />
+                    } @else {
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx="12" cy="12" r="3" />
+                    }
+                  </svg>
+                  {{ revealingId === bot.id ? '…' : revealedTokens[bot.id] ? 'Hide' : 'Token' }}
+                </button>
+                <button
+                  type="button"
+                  class="btn-danger"
+                  [disabled]="deletingId === bot.id"
+                  (click)="deleteBot(bot.id)"
+                >
+                  {{ deletingId === bot.id ? '…' : 'Delete' }}
+                </button>
+              </div>
+            </div>
+
+            @if (revealedTokens[bot.id]) {
+              <div class="token-panel">
+                <div class="token-warning">
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                    />
+                    <line x1="12" y1="9" x2="12" y2="13" />
+                    <line x1="12" y1="17" x2="12.01" y2="17" />
+                  </svg>
+                  Token was just regenerated — the old one is now invalid. Keep this secret.
+                </div>
+                <div class="token-row">
+                  <code class="token-value">{{ revealedTokens[bot.id] }}</code>
+                  <button type="button" class="btn-copy" (click)="copyToken(bot.id)">
+                    {{ copiedId === bot.id ? '✓ Copied' : 'Copy' }}
+                  </button>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+</div>

src/app/pages/bots/bots.component.ts

@@ -0,0 +1,123 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BotService } from '../../services/bot.service';
+import { Bot, BotWithToken } from '../../models/bot.models';
+
+@Component({
+  selector: 'app-bots',
+  standalone: true,
+  imports: [CommonModule, RouterLink, FormsModule],
+  templateUrl: './bots.component.html',
+  styleUrl: './bots.component.css',
+})
+export class BotsComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly botService = inject(BotService);
+
+  bots: Bot[] = [];
+  loading = true;
+
+  showCreate = false;
+  newBotName = '';
+  creating = false;
+  createError: string | null = null;
+
+  revealedTokens: Record<string, string> = {};
+  revealingId: string | null = null;
+  copiedId: string | null = null;
+  deletingId: string | null = null;
+
+  ngOnInit(): void {
+    this.loadBots();
+  }
+
+  loadBots(): void {
+    this.loading = true;
+    this.botService
+      .list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (bots) => {
+          this.bots = bots;
+          this.loading = false;
+        },
+        error: () => {
+          this.loading = false;
+        },
+      });
+  }
+
+  openCreate(): void {
+    this.newBotName = '';
+    this.createError = null;
+    this.showCreate = true;
+  }
+
+  cancelCreate(): void {
+    this.showCreate = false;
+  }
+
+  submitCreate(): void {
+    const name = this.newBotName.trim();
+    if (!name) return;
+    this.creating = true;
+    this.createError = null;
+    this.botService.create(name).subscribe({
+      next: (bot: BotWithToken) => {
+        this.creating = false;
+        this.showCreate = false;
+        this.bots = [bot, ...this.bots];
+        this.revealedTokens[bot.id] = bot.token;
+      },
+      error: (err) => {
+        this.creating = false;
+        this.createError = err.error?.message ?? err.error?.error ?? 'Failed to create bot.';
+      },
+    });
+  }
+
+  revealToken(botId: string): void {
+    if (this.revealedTokens[botId]) {
+      delete this.revealedTokens[botId];
+      return;
+    }
+    this.revealingId = botId;
+    this.botService.rotateToken(botId).subscribe({
+      next: (token) => {
+        this.revealingId = null;
+        this.revealedTokens[botId] = token;
+      },
+      error: () => {
+        this.revealingId = null;
+      },
+    });
+  }
+
+  copyToken(botId: string): void {
+    const token = this.revealedTokens[botId];
+    if (!token) return;
+    navigator.clipboard.writeText(token).then(() => {
+      this.copiedId = botId;
+      setTimeout(() => {
+        this.copiedId = null;
+      }, 2000);
+    });
+  }
+
+  deleteBot(botId: string): void {
+    this.deletingId = botId;
+    this.botService.delete(botId).subscribe({
+      next: () => {
+        this.deletingId = null;
+        this.bots = this.bots.filter((b) => b.id !== botId);
+        delete this.revealedTokens[botId];
+      },
+      error: () => {
+        this.deletingId = null;
+      },
+    });
+  }
+}

src/app/pages/challenges/challenges.component.css

@@ -2,7 +2,14 @@
 
 .challenges-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
+  background: linear-gradient(
+    135deg,
+    #04000f 0%,
+    #0e0235 25%,
+    #2d0860 50%,
+    #0e0235 75%,
+    #04000f 100%
+  );
   color: #e0e0e0;
   padding: 20px;
   font-family: 'Space Mono', 'Courier New', monospace;

src/app/pages/challenges/challenges.component.html

@@ -1,102 +1,104 @@
 <div class="challenges-container">
-    <div class="challenges-header">
-        <h1>Active Challenges</h1>
-        <button type="button" class="back-btn" (click)="goBack()">← Back</button>
-    </div>
+  <div class="challenges-header">
+    <h1>Active Challenges</h1>
+    <button type="button" class="back-btn" (click)="goBack()">← Back</button>
+  </div>
 
-    <div *ngIf="errorMessage" class="error-banner">
-        {{ errorMessage }}
-    </div>
+  <div *ngIf="errorMessage" class="error-banner">
+    {{ errorMessage }}
+  </div>
 
-    <div class="challenges-grid">
-        <!-- Incoming Challenges -->
-        <div class="challenges-section">
-            <h2>Incoming Challenges</h2>
-            <div *ngIf="loading" class="loading-spinner">Loading...</div>
+  <div class="challenges-grid">
+    <!-- Incoming Challenges -->
+    <div class="challenges-section">
+      <h2>Incoming Challenges</h2>
+      <div *ngIf="loading" class="loading-spinner">Loading...</div>
 
-            <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
-                <p>No incoming challenges</p>
+      <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
+        <p>No incoming challenges</p>
+      </div>
+
+      <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
+        <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
+          <div class="challenge-header">
+            <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
+            <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+          </div>
+
+          <div class="challenge-details">
+            <div class="detail">
+              <span class="label">Status:</span>
+              <span class="value" [class]="'status-' + challenge.status">
+                {{ challenge.status | uppercase }}
+              </span>
             </div>
-
-            <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
-                <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
-                    <div class="challenge-header">
-                        <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
-                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
-                    </div>
-
-                    <div class="challenge-details">
-                        <div class="detail">
-                            <span class="label">Status:</span>
-                            <span class="value" [class]="'status-' + challenge.status">
-                                {{ challenge.status | uppercase }}
-                            </span>
-                        </div>
-                        <div class="detail">
-                            <span class="label">Expires in:</span>
-                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
-                        </div>
-                    </div>
-
-                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
-                        <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
-                            Decline
-                        </button>
-                        <button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
-                            Accept
-                        </button>
-                    </div>
-
-                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
-                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
-                            Play
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Outgoing Challenges -->
-        <div class="challenges-section">
-            <h2>Outgoing Challenges</h2>
-
-            <div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
-                <p>No outgoing challenges</p>
-            </div>
-
-            <div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
-                <div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
-                    <div class="challenge-header">
-                        <span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
-                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
-                    </div>
-
-                    <div class="challenge-details">
-                        <div class="detail">
-                            <span class="label">Status:</span>
-                            <span class="value" [class]="'status-' + challenge.status">
-                                {{ challenge.status | uppercase }}
-                            </span>
-                        </div>
-                        <div class="detail">
-                            <span class="label">Expires in:</span>
-                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
-                        </div>
-                    </div>
-
-                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
-                        <button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
-                            Cancel
-                        </button>
-                    </div>
-
-                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
-                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
-                            Play
-                        </button>
-                    </div>
-                </div>
+            <div class="detail">
+              <span class="label">Expires in:</span>
+              <span class="value">{{ getExpirationInfo(challenge) }}</span>
             </div>
+          </div>
+
+          <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+            <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
+              Decline
+            </button>
+            <button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
+              Accept
+            </button>
+          </div>
+
+          <div
+            class="challenge-actions"
+            *ngIf="challenge.status === 'accepted' && challenge.gameId"
+          >
+            <button type="button" class="btn btn-accept" (click)="openGame(challenge)">Play</button>
+          </div>
         </div>
+      </div>
     </div>
-</div>
+
+    <!-- Outgoing Challenges -->
+    <div class="challenges-section">
+      <h2>Outgoing Challenges</h2>
+
+      <div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
+        <p>No outgoing challenges</p>
+      </div>
+
+      <div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
+        <div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
+          <div class="challenge-header">
+            <span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
+            <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+          </div>
+
+          <div class="challenge-details">
+            <div class="detail">
+              <span class="label">Status:</span>
+              <span class="value" [class]="'status-' + challenge.status">
+                {{ challenge.status | uppercase }}
+              </span>
+            </div>
+            <div class="detail">
+              <span class="label">Expires in:</span>
+              <span class="value">{{ getExpirationInfo(challenge) }}</span>
+            </div>
+          </div>
+
+          <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+            <button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
+              Cancel
+            </button>
+          </div>
+
+          <div
+            class="challenge-actions"
+            *ngIf="challenge.status === 'accepted' && challenge.gameId"
+          >
+            <button type="button" class="btn btn-accept" (click)="openGame(challenge)">Play</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/challenges/challenges.component.ts

@@ -8,172 +8,177 @@ import { Challenge } from '../../models/challenge.models';
 import { getErrorMessage } from '../../core/http/error-message.util';
 
 @Component({
-    selector: 'app-challenges',
-    standalone: true,
-    imports: [CommonModule],
-    templateUrl: './challenges.component.html',
-    styleUrls: ['./challenges.component.css']
+  selector: 'app-challenges',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './challenges.component.html',
+  styleUrls: ['./challenges.component.css'],
 })
 export class ChallengesComponent implements OnInit, OnDestroy {
-    private readonly challengeService = inject(ChallengeService);
-    private readonly challengeEventService = inject(ChallengeEventService);
-    private readonly router = inject(Router);
-    private readonly destroyRef = inject(DestroyRef);
+  private readonly challengeService = inject(ChallengeService);
+  private readonly challengeEventService = inject(ChallengeEventService);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
 
-    incomingChallenges: Challenge[] = [];
-    outgoingChallenges: Challenge[] = [];
-    loading = false;
-    errorMessage = '';
+  incomingChallenges: Challenge[] = [];
+  outgoingChallenges: Challenge[] = [];
+  loading = false;
+  errorMessage = '';
 
-    private pollInterval: any = null;
-    private readonly pollIntervalMs = 5000; // Poll every 5 seconds
+  private pollInterval: any = null;
+  private readonly pollIntervalMs = 5000; // Poll every 5 seconds
 
-    ngOnInit(): void {
-        this.loadChallenges(true);
+  ngOnInit(): void {
+    this.loadChallenges(true);
 
-        // Subscribe to challenge events
-        this.challengeEventService.getChallengeReceived$()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-                this.loadChallenges();
-            });
+    // Subscribe to challenge events
+    this.challengeEventService
+      .getChallengeReceived$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.loadChallenges();
+      });
 
-        // Start polling for challenge updates
-        this.startPolling();
+    // Start polling for challenge updates
+    this.startPolling();
+  }
+
+  ngOnDestroy(): void {
+    this.stopPolling();
+  }
+
+  private startPolling(): void {
+    this.pollInterval = setInterval(() => {
+      this.loadChallenges(false);
+    }, this.pollIntervalMs);
+  }
+
+  private stopPolling(): void {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+  }
+
+  loadChallenges(showLoader = false): void {
+    if (showLoader) {
+      this.loading = true;
+      this.errorMessage = '';
     }
 
-    ngOnDestroy(): void {
-        this.stopPolling();
+    this.challengeService
+      .listChallenges()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (response) => {
+          this.incomingChallenges = response.in || response.incoming || [];
+          this.outgoingChallenges = response.out || response.outgoing || [];
+          if (showLoader) {
+            this.loading = false;
+          }
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
+          if (showLoader) {
+            this.loading = false;
+          }
+        },
+      });
+  }
+
+  acceptChallenge(challenge: Challenge): void {
+    this.challengeService
+      .acceptChallenge(challenge.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (acceptedChallenge) => {
+          this.challengeEventService.onChallengeAccepted(acceptedChallenge);
+          this.loadChallenges();
+          if (acceptedChallenge.gameId) {
+            void this.router.navigate(['/game', acceptedChallenge.gameId]);
+          } else {
+            this.errorMessage = 'Challenge accepted, but no game was created.';
+          }
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+        },
+      });
+  }
+
+  declineChallenge(challenge: Challenge): void {
+    this.challengeService
+      .declineChallenge(challenge.id, { reason: 'generic' })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.challengeEventService.removeChallenge(challenge.id);
+          this.loadChallenges();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+        },
+      });
+  }
+
+  cancelChallenge(challenge: Challenge): void {
+    this.challengeService
+      .cancelChallenge(challenge.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.loadChallenges();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
+        },
+      });
+  }
+
+  goBack(): void {
+    void this.router.navigate(['/']);
+  }
+
+  openGame(challenge: Challenge): void {
+    if (!challenge.gameId) {
+      this.errorMessage = 'Missing game id for this challenge.';
+      return;
+    }
+    void this.router.navigate(['/game', challenge.gameId]);
+  }
+
+  getTimeControlDisplay(challenge: Challenge): string {
+    const { limit, increment } = challenge.timeControl;
+    if (!limit || !increment) {
+      return 'Unlimited';
+    }
+    const minutes = Math.floor(limit / 60);
+    return `${minutes}+${increment}`;
+  }
+
+  getChallengerDisplay(challenge: Challenge): string {
+    return challenge.challenger.name;
+  }
+
+  getOpponentDisplay(challenge: Challenge): string {
+    return challenge.destUser.name;
+  }
+
+  getExpirationInfo(challenge: Challenge): string {
+    const expiresAt = new Date(challenge.expiresAt);
+    const now = new Date();
+    const diffMs = expiresAt.getTime() - now.getTime();
+
+    if (diffMs <= 0 || challenge.status === 'expired') {
+      return 'Expired';
     }
 
-    private startPolling(): void {
-        this.pollInterval = setInterval(() => {
-            this.loadChallenges(false);
-        }, this.pollIntervalMs);
+    const minutes = Math.floor(diffMs / 60000);
+    if (minutes > 60) {
+      const hours = Math.floor(minutes / 60);
+      return `${hours}h`;
     }
 
-    private stopPolling(): void {
-        if (this.pollInterval) {
-            clearInterval(this.pollInterval);
-            this.pollInterval = null;
-        }
-    }
-
-    loadChallenges(showLoader = false): void {
-        if (showLoader) {
-            this.loading = true;
-            this.errorMessage = '';
-        }
-
-        this.challengeService.listChallenges()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-                next: (response) => {
-                    this.incomingChallenges = response.in || response.incoming || [];
-                    this.outgoingChallenges = response.out || response.outgoing || [];
-                    if (showLoader) {
-                        this.loading = false;
-                    }
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
-                    if (showLoader) {
-                        this.loading = false;
-                    }
-                }
-            });
-    }
-
-    acceptChallenge(challenge: Challenge): void {
-        this.challengeService.acceptChallenge(challenge.id)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-                next: (acceptedChallenge) => {
-                    this.challengeEventService.onChallengeAccepted(acceptedChallenge);
-                    this.loadChallenges();
-                    if (acceptedChallenge.gameId) {
-                        void this.router.navigate(['/game', acceptedChallenge.gameId]);
-                    } else {
-                        this.errorMessage = 'Challenge accepted, but no game was created.';
-                    }
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
-                }
-            });
-    }
-
-    declineChallenge(challenge: Challenge): void {
-        this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-                next: () => {
-                    this.challengeEventService.removeChallenge(challenge.id);
-                    this.loadChallenges();
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
-                }
-            });
-    }
-
-    cancelChallenge(challenge: Challenge): void {
-        this.challengeService.cancelChallenge(challenge.id)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-                next: () => {
-                    this.loadChallenges();
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
-                }
-            });
-    }
-
-    goBack(): void {
-        void this.router.navigate(['/']);
-    }
-
-    openGame(challenge: Challenge): void {
-        if (!challenge.gameId) {
-            this.errorMessage = 'Missing game id for this challenge.';
-            return;
-        }
-        void this.router.navigate(['/game', challenge.gameId]);
-    }
-
-    getTimeControlDisplay(challenge: Challenge): string {
-        const { limit, increment } = challenge.timeControl;
-        if (!limit || !increment) {
-            return 'Unlimited';
-        }
-        const minutes = Math.floor(limit / 60);
-        return `${minutes}+${increment}`;
-    }
-
-    getChallengerDisplay(challenge: Challenge): string {
-        return challenge.challenger.name;
-    }
-
-    getOpponentDisplay(challenge: Challenge): string {
-        return challenge.destUser.name;
-    }
-
-    getExpirationInfo(challenge: Challenge): string {
-        const expiresAt = new Date(challenge.expiresAt);
-        const now = new Date();
-        const diffMs = expiresAt.getTime() - now.getTime();
-
-        if (diffMs <= 0 || challenge.status === 'expired') {
-            return 'Expired';
-        }
-
-        const minutes = Math.floor(diffMs / 60000);
-        if (minutes > 60) {
-            const hours = Math.floor(minutes / 60);
-            return `${hours}h`;
-        }
-
-        return `${minutes}m`;
-    }
+    return `${minutes}m`;
+  }
 }

src/app/pages/game/game.component.html

@@ -1,135 +1,317 @@
-<main class="game-shell" [class.theme-dark]="isDarkMode">
-  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
-    (closed)="facade.onPromotionClosed()" />
+<app-promotion-dialog
+  [isOpen]="facade.isPromotionDialogOpen"
+  (promotionSelected)="facade.onPromotionSelected($event)"
+  (closed)="facade.onPromotionClosed()"
+/>
 
-  <section class="game-card">
-    <header class="mb-3">
-      <a routerLink="/" class="back-link">Back</a>
-      <h1 class="mb-2">1 vs 1 Game</h1>
-      <p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
-    </header>
+<div class="game-shell">
+  <div class="page">
+    <!-- Breadcrumb -->
+    <nav class="crumb" aria-label="Breadcrumb">
+      <a routerLink="/" class="crumb-link">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">1 vs 1 Game</span>
+    </nav>
 
-    @if (facade.loading) {
-    <p>Loading game state...</p>
-    } @else if (facade.state) {
-    @if (facade.isGameFinished && facade.gameCompletionMessage) {
-    <div class="game-completion-alert alert alert-success mb-3">
-      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-      <p class="completion-subtitle mb-0">
-        <a routerLink="/" class="completion-link">Start a new game</a>
-      </p>
-    </div>
-    }
-    @if (facade.isGameFinished && facade.gameCompletionMessage) {
-    <div class="game-completion-alert alert alert-success mb-3">
-      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-      <p class="completion-subtitle mb-0">
-        <a routerLink="/" class="completion-link">Start a new game</a>
-      </p>
-    </div>
-    }
-    <div class="container-fluid">
-      <div class="row g-3">
-        <!-- Left Sidebar - Dummy Timers -->
-        <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-          <section class="timer-card">
-            <h2>Timers</h2>
-            <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
-              <p class="timer-label">White</p>
-              <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
-            </div>
-            <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
-              <p class="timer-label">Black</p>
-              <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
-            </div>
-          </section>
-        </div>
-
-        <!-- Center - Chess Board -->
-        <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
-          <section class="center-column d-flex flex-column h-100">
-            <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
-              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
-                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
-                (squareSelected)="facade.onBoardSquareSelected($event)" />
-            </div>
-
-            <section class="top-section">
-              <section class="board-theme-card" aria-label="Board design chooser">
-                <h3>Board Design</h3>
-                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
-                  <label class="board-theme-option">
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
-                      (change)="setBoardTheme('arabian')" />
-                    <span>Arabian</span>
-                  </label>
-
-                  <label class="board-theme-option">
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
-                      (change)="setBoardTheme('classic')" />
-                    <span>Classic</span>
-                  </label>
-                </div>
-              </section>
-
-              <app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
-                [value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
-                (valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
-            </section>
-          </section>
-        </div>
-
-        <!-- Right Sidebar - Export -->
-        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-          <section class="history-card">
-            <h2>Move History</h2>
-
-            @if (facade.state.moves.length === 0) {
-            <p class="history-empty">No moves yet.</p>
-            } @else {
-            <ol class="history-list">
-              @for (move of facade.state.moves; track $index) {
-              <li>
-                <span class="history-number">{{ $index + 1 }}.</span>
-                <span class="history-move">{{ move }}</span>
-              </li>
-              }
-            </ol>
-            }
-          </section>
-
-          <section class="export-card">
-            <h2>Export</h2>
-            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
-              <label class="export-mode-option">
-                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
-                  (change)="setExportType('fen')" />
-                <span>FEN</span>
-              </label>
-              <label class="export-mode-option">
-                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
-                  (change)="setExportType('pgn')" />
-                <span>PGN</span>
-              </label>
-            </div>
-
-            <textarea class="export-text" [value]="exportValue"
-              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
-              readonly></textarea>
-
-            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
-
-            @if (exportNotice) {
-            <p class="export-note">{{ exportNotice }}</p>
-            }
-          </section>
+    <!-- Game header -->
+    <header class="game-header">
+      <div class="game-title">
+        <h1>
+          1 vs 1 Game
+          @if (facade.game) {
+            <span class="tag-rated">Live</span>
+          }
+        </h1>
+        <div class="game-meta-strip">
+          <span class="game-id">
+            ID <strong>{{ facade.gameId }}</strong>
+            <button class="copy-btn" type="button" title="Copy game ID" (click)="copyGameId()">
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            </button>
+          </span>
+          @if (facade.state) {
+            <span class="meta-dot"></span>
+            <span>Move {{ moveNumber }}</span>
+          }
         </div>
       </div>
-    </div>
-    }
 
-    @if (facade.errorMessage) {
-    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
+      <div class="header-actions">
+        <button class="btn-ghost" type="button" (click)="flipBoard()">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.7"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="17 1 21 5 17 9" />
+            <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+            <polyline points="7 23 3 19 7 15" />
+            <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+          </svg>
+          Flip
+        </button>
+        <button class="btn" type="button" (click)="copyUrl()">Share</button>
+      </div>
+    </header>
+
+    <!-- Loading / error states -->
+    @if (facade.loading) {
+      <div class="state-message">
+        <span class="status-pulse"></span>
+        Loading game…
+      </div>
+    } @else if (facade.state) {
+      @if (facade.errorMessage) {
+        <div class="state-message state-error">{{ facade.errorMessage }}</div>
+      }
+
+      <!-- Game completed banner -->
+      @if (facade.isGameFinished && facade.gameCompletionMessage) {
+        <div class="completion-banner">
+          <div class="completion-left">
+            <span class="completion-icon">♟</span>
+            <div>
+              <div class="completion-title">{{ facade.gameCompletionMessage }}</div>
+              <div class="completion-sub">Game #{{ facade.gameId }}</div>
+            </div>
+          </div>
+          <div class="completion-actions">
+            <a routerLink="/games" class="completion-link">My games</a>
+            <a routerLink="/" class="btn btn-primary completion-new">New game</a>
+          </div>
+        </div>
+      }
+
+      @if (
+        !facade.isGameFinished &&
+        ((whiteTimerMs !== null && whiteTimerMs <= 0) ||
+          (blackTimerMs !== null && blackTimerMs <= 0))
+      ) {
+        <div class="completion-banner completion-banner--timeout">
+          <span class="completion-title">Time's up!</span>
+          <span class="completion-sub">Waiting for server to confirm result…</span>
+        </div>
+      }
+
+      <!-- Main layout -->
+      <div class="layout">
+        <!-- BOARD COLUMN -->
+        <div class="board-col">
+          <!-- Opponent (top) -->
+          <app-player-card
+            [name]="blackPlayerName"
+            [initial]="blackPlayerInitial"
+            color="black"
+            [isActive]="!flipped ? facade.state.turn === 'black' : facade.state.turn === 'white'"
+            [clockDisplay]="!flipped ? blackClock : whiteClock"
+            [isLowTime]="!flipped ? isLowTimeBlack : isLowTimeWhite"
+          />
+
+          <!-- Status strip -->
+          <div class="status-strip">
+            <div class="status-left">
+              <span class="status-pulse"></span>
+              <span class="status-text" [innerHTML]="statusMessage"></span>
+            </div>
+            <span class="status-side">
+              {{ facade.state.turn === 'white' ? 'WHITE' : 'BLACK' }} TO MOVE
+            </span>
+          </div>
+
+          <!-- Board -->
+          <div class="board-wrap" [class.reviewing]="facade.isReviewing">
+            <app-chess-board
+              [fen]="facade.displayFen"
+              [selectedSquare]="facade.isReviewing ? null : facade.selectedSquare"
+              [highlightedSquares]="facade.isReviewing ? [] : facade.highlightedSquares"
+              [boardTheme]="boardTheme"
+              (squareSelected)="facade.onBoardSquareSelected($event)"
+            />
+          </div>
+
+          <!-- Current player (bottom) -->
+          <app-player-card
+            [name]="whitePlayerName"
+            [initial]="whitePlayerInitial"
+            color="white"
+            [isActive]="!flipped ? facade.state.turn === 'white' : facade.state.turn === 'black'"
+            [clockDisplay]="!flipped ? whiteClock : blackClock"
+            [isLowTime]="!flipped ? isLowTimeWhite : isLowTimeBlack"
+          />
+
+          <!-- Board action buttons -->
+          <app-board-actions-bar
+            [undoAvailable]="facade.state.undoAvailable"
+            [isGameFinished]="facade.isGameFinished"
+            (takeback)="onTakeback()"
+            (offerDraw)="onOfferDraw()"
+            (resign)="onResign()"
+          />
+        </div>
+
+        <!-- SIDE COLUMN -->
+        <aside class="side">
+          <!-- Move history (collapsible) -->
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Move History</span>
+              <span class="side-card-meta">{{ facade.state.moves.length }} plies</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <app-move-history
+              [moves]="facade.state.moves"
+              [viewingPly]="facade.viewingPly"
+              (navigate)="facade.navigateHistory($event)"
+              (navigateToPly)="facade.navigateToPly($event)"
+            />
+          </details>
+
+          <!-- Play move (collapsible) -->
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Play Move</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <div class="side-card-body">
+              <div class="uci-row">
+                <input
+                  id="uci-input"
+                  type="text"
+                  class="uci-input"
+                  placeholder="e.g. e2e4"
+                  autocomplete="off"
+                  [value]="facade.moveInput"
+                  (input)="facade.moveInput = $any($event.target).value"
+                  (keydown.enter)="facade.submitMove()"
+                />
+                <button class="btn btn-primary" type="button" (click)="facade.submitMove()">
+                  Send
+                </button>
+              </div>
+              <p class="uci-hint">Click a piece on the board to see legal targets.</p>
+            </div>
+          </details>
+
+          <!-- Board design (collapsible) -->
+          <details class="side-card">
+            <summary class="side-card-summary">
+              <span class="side-card-title">Board Design</span>
+              <svg
+                class="chev"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </summary>
+            <div class="side-card-body">
+              <div class="seg" role="tablist" aria-label="Board theme">
+                <button
+                  class="seg-btn"
+                  [class.active]="boardTheme === 'arabian'"
+                  role="tab"
+                  (click)="setBoardTheme('arabian')"
+                >
+                  Arabian
+                </button>
+                <button
+                  class="seg-btn"
+                  [class.active]="boardTheme === 'classic'"
+                  role="tab"
+                  (click)="setBoardTheme('classic')"
+                >
+                  Classic
+                </button>
+              </div>
+            </div>
+          </details>
+
+          <!-- Export (collapsible) -->
+          <app-export-panel [fen]="facade.state.fen" [pgn]="facade.state.pgn" />
+        </aside>
+      </div>
     }
-  </section>
-</main>
+  </div>
+</div>
+
+<!-- Resign confirmation dialog -->
+@if (facade.resignConfirmPending) {
+  <div class="confirm-overlay" role="dialog" aria-modal="true" aria-label="Confirm resign">
+    <div class="confirm-box">
+      <p class="confirm-title">Resign this game?</p>
+      <p class="confirm-sub">Your opponent will be declared the winner.</p>
+      <div class="confirm-actions">
+        <button class="btn" type="button" (click)="facade.cancelResign()">Cancel</button>
+        <button class="btn btn-danger-solid" type="button" (click)="facade.confirmResign()">
+          Yes, resign
+        </button>
+      </div>
+    </div>
+  </div>
+}
+
+<!-- Toast notification -->
+@if (toastMessage) {
+  <div class="toast show">{{ toastMessage }}</div>
+}

src/app/pages/game/game.component.ts

@@ -1,52 +1,115 @@
-import { CommonModule } from '@angular/common';
 import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { BoardActionsBarComponent } from '../../components/board-actions-bar/board-actions-bar.component';
 import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
-import { InputCardComponent } from '../../components/input-card/input-card.component';
+import { ExportPanelComponent } from '../../components/export-panel/export-panel.component';
+import { MoveHistoryComponent } from '../../components/move-history/move-history.component';
+import { PlayerCardComponent } from '../../components/player-card/player-card.component';
 import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
 import { GameFacade } from './game.facade';
 
-type TimerTurn = 'white' | 'black';
 type BoardTheme = 'arabian' | 'classic';
 
-interface TimerSnapshot {
-  whiteSeconds: number;
-  blackSeconds: number;
-  turn: TimerTurn;
-  savedAt: number;
-}
+const LOW_TIME_THRESHOLD_MS = 60_000;
+const BOARD_THEME_KEY = 'nowchess.boardTheme';
 
 @Component({
   selector: 'app-game',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent, PromotionDialogComponent],
+  imports: [
+    RouterLink,
+    ChessBoardComponent,
+    PromotionDialogComponent,
+    PlayerCardComponent,
+    MoveHistoryComponent,
+    ExportPanelComponent,
+    BoardActionsBarComponent,
+  ],
   providers: [GameFacade],
   templateUrl: './game.component.html',
-  styleUrl: './game.component.css'
+  styleUrl: './game.component.css',
 })
 export class GameComponent implements OnInit, OnDestroy {
-  private static readonly TIMER_START_SECONDS = 10 * 60;
-  private static readonly BOARD_THEME_STORAGE_KEY = 'nowchess.boardTheme';
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
   readonly facade = inject(GameFacade);
-  whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
-  blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
-  exportType: 'fen' | 'pgn' = 'fen';
-  boardTheme: BoardTheme = 'arabian';
-  isDarkMode = false;
-  exportValue = '';
-  exportNotice = '';
-  private timerIntervalId: number | null = null;
-  private activeGameId = '';
 
+  whiteTimerMs: number | null = null;
+  blackTimerMs: number | null = null;
+  boardTheme: BoardTheme = 'arabian';
+  flipped = false;
+  toastMessage = '';
+
+  private timerIntervalId: number | null = null;
+  private toastTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // ── Player display ──────────────────────────────────────────
+  get whitePlayerName(): string {
+    return this.facade.game?.white.displayName ?? 'White';
+  }
+
+  get blackPlayerName(): string {
+    return this.facade.game?.black.displayName ?? 'Black';
+  }
+
+  get whitePlayerInitial(): string {
+    return this.whitePlayerName.charAt(0).toUpperCase();
+  }
+
+  get blackPlayerInitial(): string {
+    return this.blackPlayerName.charAt(0).toUpperCase();
+  }
+
+  // ── Clocks ──────────────────────────────────────────────────
+  get whiteClock(): string {
+    return this.formatTimer(this.whiteTimerMs);
+  }
+
+  get blackClock(): string {
+    return this.formatTimer(this.blackTimerMs);
+  }
+
+  get isLowTimeWhite(): boolean {
+    return this.whiteTimerMs !== null && this.whiteTimerMs < LOW_TIME_THRESHOLD_MS;
+  }
+
+  get isLowTimeBlack(): boolean {
+    return this.blackTimerMs !== null && this.blackTimerMs < LOW_TIME_THRESHOLD_MS;
+  }
+
+  // ── Status message ───────────────────────────────────────────
+  get statusMessage(): string {
+    const state = this.facade.state;
+    if (!state) return '';
+
+    if (state.status === 'check') {
+      const who = state.turn === 'white' ? 'White' : 'Black';
+      return `<b>${who}</b> is in check`;
+    }
+
+    if (state.status === 'drawOffered') {
+      return 'Draw offer pending';
+    }
+
+    const last = state.moves.length > 0 ? state.moves[state.moves.length - 1] : null;
+    if (last) {
+      const mover = state.turn === 'white' ? this.blackPlayerName : this.whitePlayerName;
+      return `${mover} played <b>${last}</b>`;
+    }
+
+    return 'Game started';
+  }
+
+  // ── Move number ──────────────────────────────────────────────
+  get moveNumber(): number {
+    return Math.ceil((this.facade.state?.moves.length ?? 0) / 2);
+  }
+
+  // ── Lifecycle ────────────────────────────────────────────────
   ngOnInit(): void {
-    this.applyIncomingTheme();
-    this.syncThemeFromDocument();
     this.boardTheme = this.resolveStoredBoardTheme();
-    this.startDummyTimers();
+    this.startClock();
 
     this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
       const id = paramMap.get('gameId');
@@ -55,11 +118,7 @@ export class GameComponent implements OnInit, OnDestroy {
         this.facade.loading = false;
         return;
       }
-
-      this.activeGameId = id;
-      this.restoreTimers(id);
       this.facade.setGameId(id);
-      this.syncExportValue();
     });
   }
 
@@ -67,192 +126,101 @@ export class GameComponent implements OnInit, OnDestroy {
     if (this.timerIntervalId !== null) {
       window.clearInterval(this.timerIntervalId);
     }
-
-    this.persistTimers(this.resolveCurrentTurn());
-  }
-
-  private syncThemeFromDocument(): void {
-    this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
-  }
-
-  private applyIncomingTheme(): void {
-    const incomingTheme = window.history.state?.theme;
-    if (incomingTheme === 'dark') {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      localStorage.setItem('theme', 'dark');
-      return;
-    }
-
-    if (incomingTheme === 'light') {
-      document.documentElement.removeAttribute('data-theme');
-      localStorage.removeItem('theme');
-    }
-  }
-
-  setExportType(type: 'fen' | 'pgn'): void {
-    this.exportType = type;
-    this.exportNotice = '';
-    this.syncExportValue();
   }
 
+  // ── Board theme ──────────────────────────────────────────────
   setBoardTheme(theme: BoardTheme): void {
     this.boardTheme = theme;
-    localStorage.setItem(GameComponent.BOARD_THEME_STORAGE_KEY, theme);
+    localStorage.setItem(BOARD_THEME_KEY, theme);
   }
 
-  completeExport(): void {
-    this.syncExportValue();
-    if (!this.exportValue.trim()) {
-      this.exportNotice = 'Nothing to export yet.';
-      return;
-    }
-
-    if (!navigator.clipboard?.writeText) {
-      this.exportNotice = 'Export is ready in the text box.';
-      return;
-    }
+  // ── Board flip ───────────────────────────────────────────────
+  flipBoard(): void {
+    this.flipped = !this.flipped;
+  }
 
+  // ── Copy helpers ─────────────────────────────────────────────
+  copyGameId(): void {
     void navigator.clipboard
-      .writeText(this.exportValue)
-      .then(() => {
-        this.exportNotice = 'Copied to clipboard.';
-      })
-      .catch(() => {
-        this.exportNotice = 'Export is ready in the text box.';
-      });
+      ?.writeText(this.facade.gameId)
+      .then(() => this.showToast('Game ID copied'));
   }
 
-  formatTimer(totalSeconds: number): string {
-    const safeSeconds = Math.max(0, totalSeconds);
-    const minutes = Math.floor(safeSeconds / 60)
+  copyUrl(): void {
+    void navigator.clipboard
+      ?.writeText(window.location.href)
+      .then(() => this.showToast('Link copied'));
+  }
+
+  // ── Board actions ─────────────────────────────────────────────
+  onTakeback(): void {
+    this.showToast('Takeback requested');
+  }
+
+  onOfferDraw(): void {
+    this.showToast('Draw offered');
+  }
+
+  onResign(): void {
+    this.facade.requestResign();
+  }
+
+  // ── Timer helpers ─────────────────────────────────────────────
+  private formatTimer(ms: number | null): string {
+    if (ms === null) return '--:--';
+    if (ms < 0) return '—';
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60)
       .toString()
       .padStart(2, '0');
-    const seconds = (safeSeconds % 60).toString().padStart(2, '0');
+    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
     return `${minutes}:${seconds}`;
   }
 
-  private startDummyTimers(): void {
-    if (this.timerIntervalId !== null) {
-      return;
-    }
-
-    this.timerIntervalId = window.setInterval(() => {
-      this.tickDummyTimers();
-      this.syncExportValue();
-    }, 1000);
+  // ── Private ───────────────────────────────────────────────────
+  private startClock(): void {
+    if (this.timerIntervalId !== null) return;
+    this.timerIntervalId = window.setInterval(() => this.tickClock(), 200);
   }
 
-  private tickDummyTimers(): void {
+  private tickClock(): void {
     const state = this.facade.state;
-    if (!state || this.facade.loading || this.facade.isGameFinished) {
+    const clock = state?.clock;
+    if (!clock || this.facade.isGameFinished) {
+      this.whiteTimerMs = null;
+      this.blackTimerMs = null;
       return;
     }
 
-    if (state.turn === 'white') {
-      this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - 1);
-      this.persistTimers('white');
-      return;
-    }
+    const elapsed = Math.max(0, Date.now() - this.facade.clockSyncedAt);
+    const activeIsWhite = state!.turn === 'white';
+    this.whiteTimerMs =
+      clock.whiteRemainingMs < 0
+        ? -1
+        : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
+    this.blackTimerMs =
+      clock.blackRemainingMs < 0
+        ? -1
+        : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
 
-    this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - 1);
-    this.persistTimers('black');
-  }
-
-  private syncExportValue(): void {
-    const state = this.facade.state;
-    if (!state) {
-      this.exportValue = '';
-      return;
-    }
-
-    this.exportValue = this.exportType === 'fen' ? state.fen : state.pgn;
-  }
-
-  private restoreTimers(gameId: string): void {
-    const fallbackTurn = this.resolveCurrentTurn();
-    const rawSnapshot = localStorage.getItem(this.getTimerStorageKey(gameId));
-    if (!rawSnapshot) {
-      this.resetTimers();
-      this.persistTimers(fallbackTurn);
-      return;
-    }
-
-    const snapshot = this.parseSnapshot(rawSnapshot);
-    if (!snapshot) {
-      this.resetTimers();
-      this.persistTimers(fallbackTurn);
-      return;
-    }
-
-    this.applySnapshot(snapshot);
-    this.persistTimers(snapshot.turn);
-  }
-
-  private parseSnapshot(rawSnapshot: string): TimerSnapshot | null {
-    try {
-      const parsed = JSON.parse(rawSnapshot) as Partial<TimerSnapshot>;
-      if (
-        typeof parsed.whiteSeconds !== 'number' ||
-        typeof parsed.blackSeconds !== 'number' ||
-        (parsed.turn !== 'white' && parsed.turn !== 'black') ||
-        typeof parsed.savedAt !== 'number'
-      ) {
-        return null;
-      }
-
-      return {
-        whiteSeconds: Math.max(0, Math.floor(parsed.whiteSeconds)),
-        blackSeconds: Math.max(0, Math.floor(parsed.blackSeconds)),
-        turn: parsed.turn,
-        savedAt: parsed.savedAt
-      };
-    } catch {
-      return null;
+    if (
+      (this.whiteTimerMs !== null && this.whiteTimerMs <= 0 && clock.whiteRemainingMs > 0) ||
+      (this.blackTimerMs !== null && this.blackTimerMs <= 0 && clock.blackRemainingMs > 0)
+    ) {
+      this.facade.errorMessage = '';
     }
   }
 
-  private applySnapshot(snapshot: TimerSnapshot): void {
-    const elapsedSeconds = Math.max(0, Math.floor((Date.now() - snapshot.savedAt) / 1000));
-    this.whiteTimerSeconds = snapshot.whiteSeconds;
-    this.blackTimerSeconds = snapshot.blackSeconds;
-
-    if (snapshot.turn === 'white') {
-      this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - elapsedSeconds);
-      return;
-    }
-
-    this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - elapsedSeconds);
-  }
-
-  private persistTimers(turn: TimerTurn): void {
-    if (!this.activeGameId) {
-      return;
-    }
-
-    const snapshot: TimerSnapshot = {
-      whiteSeconds: this.whiteTimerSeconds,
-      blackSeconds: this.blackTimerSeconds,
-      turn,
-      savedAt: Date.now()
-    };
-    localStorage.setItem(this.getTimerStorageKey(this.activeGameId), JSON.stringify(snapshot));
-  }
-
-  private resolveCurrentTurn(): TimerTurn {
-    return this.facade.state?.turn ?? 'white';
-  }
-
-  private resetTimers(): void {
-    this.whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
-    this.blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
-  }
-
-  private getTimerStorageKey(gameId: string): string {
-    return `nowchess.timer.${gameId}`;
+  private showToast(msg: string): void {
+    this.toastMessage = msg;
+    if (this.toastTimer !== null) clearTimeout(this.toastTimer);
+    this.toastTimer = setTimeout(() => {
+      this.toastMessage = '';
+    }, 1800);
   }
 
   private resolveStoredBoardTheme(): BoardTheme {
-    const stored = localStorage.getItem(GameComponent.BOARD_THEME_STORAGE_KEY);
+    const stored = localStorage.getItem(BOARD_THEME_KEY);
     return stored === 'classic' ? 'classic' : 'arabian';
   }
 }

src/app/pages/game/game.facade.ts

@@ -8,11 +8,13 @@ import { GameCompletionService } from '../../services/game-completion.service';
 import { GameImportService } from '../../services/game-import.service';
 import { BoardSelectionService, BoardSelection } from '../../services/board-selection.service';
 import { GameStreamService } from '../../services/game-stream.service';
+import { GameHistoryService } from '../../services/game-history.service';
 
 @Injectable()
 export class GameFacade implements OnDestroy {
   gameId = '';
   game: GameFull | null = null;
+  clockSyncedAt = 0;
   errorMessage = '';
   moveInput = '';
   fenInput = '';
@@ -21,11 +23,16 @@ export class GameFacade implements OnDestroy {
   gameCompletionMessage = '';
   isGameFinished = false;
   isPromotionDialogOpen = false;
+  resignConfirmPending = false;
+
+  private fenHistory: string[] = [];
+  private sessionStartPly = 0;
+  viewingPly: number | null = null;
 
   private boardSelection: BoardSelection = {
     selectedSquare: null,
     highlightedSquares: [],
-    selectedSquareMoves: []
+    selectedSquareMoves: [],
   };
   private pendingPromotionMoves: LegalMove[] = [];
 
@@ -36,6 +43,7 @@ export class GameFacade implements OnDestroy {
   private readonly importService = inject(GameImportService);
   private readonly boardSelectionService = inject(BoardSelectionService);
   private readonly streamService = inject(GameStreamService);
+  private readonly gameHistory = inject(GameHistoryService);
 
   get state(): GameState | null {
     return this.game?.state ?? null;
@@ -49,6 +57,54 @@ export class GameFacade implements OnDestroy {
     return this.boardSelection.highlightedSquares;
   }
 
+  get displayFen(): string {
+    if (this.viewingPly !== null) {
+      const historyIndex = this.viewingPly - this.sessionStartPly;
+      return this.fenHistory[historyIndex] ?? this.game?.state.fen ?? '';
+    }
+    return this.game?.state.fen ?? '';
+  }
+
+  get isReviewing(): boolean {
+    return this.viewingPly !== null;
+  }
+
+  navigateToPly(ply: number): void {
+    const historyIndex = ply - this.sessionStartPly;
+    if (historyIndex < 0 || historyIndex >= this.fenHistory.length) return;
+    this.viewingPly = ply;
+    this.boardSelection = this.boardSelectionService.clearSelection();
+  }
+
+  navigateHistory(direction: 'first' | 'prev' | 'next' | 'last'): void {
+    const totalPly = this.sessionStartPly + this.fenHistory.length - 1;
+    const current = this.viewingPly ?? totalPly;
+
+    let next: number;
+    switch (direction) {
+      case 'first':
+        next = this.sessionStartPly;
+        break;
+      case 'prev':
+        next = Math.max(this.sessionStartPly, current - 1);
+        break;
+      case 'next':
+        next = Math.min(totalPly, current + 1);
+        break;
+      case 'last':
+      default:
+        next = totalPly;
+        break;
+    }
+
+    if (next === totalPly) {
+      this.viewingPly = null;
+    } else {
+      this.viewingPly = next;
+    }
+    this.boardSelection = this.boardSelectionService.clearSelection();
+  }
+
   ngOnDestroy(): void {
     this.streamService.cleanup();
     this.botMoveService.cleanup();
@@ -60,17 +116,22 @@ export class GameFacade implements OnDestroy {
   }
 
   onBoardSquareSelected(square: string): void {
-    if (!this.state) {
+    if (!this.state || this.viewingPly !== null) {
       return;
     }
 
     // Handle move selection
-    if (this.boardSelection.selectedSquare && this.boardSelection.highlightedSquares.includes(square)) {
-      const selectedMove = this.boardSelection.selectedSquareMoves.find((move) => move.to === square);
+    if (
+      this.boardSelection.selectedSquare &&
+      this.boardSelection.highlightedSquares.includes(square)
+    ) {
+      const selectedMove = this.boardSelection.selectedSquareMoves.find(
+        (move) => move.to === square,
+      );
       if (selectedMove) {
         // If multiple promotion outcomes exist for the target, ask player to choose one.
         const promotionMoves = this.boardSelection.selectedSquareMoves.filter(
-          (move) => move.to === square && !!move.promotion
+          (move) => move.to === square && !!move.promotion,
         );
         if (promotionMoves.length > 0) {
           this.pendingPromotionMoves = promotionMoves;
@@ -94,13 +155,13 @@ export class GameFacade implements OnDestroy {
         this.boardSelection = {
           selectedSquare: square,
           highlightedSquares: moves.map((move) => move.to),
-          selectedSquareMoves: moves
+          selectedSquareMoves: moves,
         };
       },
       (error) => {
         this.errorMessage = error;
         this.boardSelection = this.boardSelectionService.clearSelection();
-      }
+      },
     );
     this.boardSelection = newSelection;
   }
@@ -119,6 +180,9 @@ export class GameFacade implements OnDestroy {
         next: (state) => {
           if (this.game) {
             this.game = { ...this.game, state };
+            this.clockSyncedAt = Date.now();
+            this.pushFen(state.fen);
+            this.viewingPly = null;
             this.updateGameCompletion();
           }
           this.moveInput = '';
@@ -136,17 +200,19 @@ export class GameFacade implements OnDestroy {
             },
             (error) => {
               this.errorMessage = error;
-            }
+            },
           );
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Move rejected.');
-        }
+        },
       });
   }
 
   onPromotionSelected(promotionPiece: 'queen' | 'rook' | 'bishop' | 'knight'): void {
-    const selectedPromotionMove = this.pendingPromotionMoves.find((move) => move.promotion === promotionPiece);
+    const selectedPromotionMove = this.pendingPromotionMoves.find(
+      (move) => move.promotion === promotionPiece,
+    );
     if (!selectedPromotionMove) {
       this.errorMessage = 'Selected promotion move is unavailable.';
       this.isPromotionDialogOpen = false;
@@ -167,6 +233,26 @@ export class GameFacade implements OnDestroy {
     this.pendingPromotionMoves = [];
   }
 
+  requestResign(): void {
+    this.resignConfirmPending = true;
+  }
+
+  cancelResign(): void {
+    this.resignConfirmPending = false;
+  }
+
+  confirmResign(): void {
+    this.resignConfirmPending = false;
+    this.gameApi
+      .resignGame(this.gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Could not resign.');
+        },
+      });
+  }
+
   importFen(): void {
     this.errorMessage = '';
     this.importService.importFen(
@@ -177,7 +263,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 
@@ -191,7 +277,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 
@@ -200,6 +286,8 @@ export class GameFacade implements OnDestroy {
     this.errorMessage = '';
     this.boardSelection = this.boardSelectionService.clearSelection();
     this.streamService.cleanup();
+    this.fenHistory = [];
+    this.viewingPly = null;
 
     this.gameApi
       .getGame(this.gameId)
@@ -207,15 +295,19 @@ export class GameFacade implements OnDestroy {
       .subscribe({
         next: (game) => {
           this.game = game;
+          this.clockSyncedAt = Date.now();
           this.loading = false;
+          this.sessionStartPly = game.state.moves.length;
+          this.fenHistory = [game.state.fen];
           this.updateGameCompletion();
+          this.gameHistory.recordGame(this.gameId);
           this.startStreaming();
           this.tryMakeBotMove();
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
           this.loading = false;
-        }
+        },
       });
   }
 
@@ -224,15 +316,19 @@ export class GameFacade implements OnDestroy {
       this.gameId,
       (event) => this.applyStreamEvent(event),
       () => {
-        this.errorMessage = 'Live stream disconnected. Falling back to polling.';
-      }
+        /* polling fallback — not an error */
+      },
     );
   }
 
   private applyStreamEvent(event: GameStreamEvent): void {
     if (event.type === 'gameFull') {
       this.game = event.game;
-      this.boardSelection = this.boardSelectionService.clearSelection();
+      this.clockSyncedAt = Date.now();
+      this.pushFen(event.game.state.fen);
+      if (this.viewingPly === null) {
+        this.boardSelection = this.boardSelectionService.clearSelection();
+      }
       this.updateGameCompletion();
       this.tryMakeBotMove();
       return;
@@ -241,8 +337,10 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameState' && this.game) {
       const moveCountBefore = this.game.state.moves.length;
       this.game = { ...this.game, state: event.state };
+      this.clockSyncedAt = Date.now();
+      this.pushFen(event.state.fen);
       this.updateGameCompletion();
-      if (event.state.moves.length !== moveCountBefore) {
+      if (event.state.moves.length !== moveCountBefore && this.viewingPly === null) {
         this.boardSelection = this.boardSelectionService.clearSelection();
         this.tryMakeBotMove();
       }
@@ -254,6 +352,13 @@ export class GameFacade implements OnDestroy {
     }
   }
 
+  private pushFen(fen: string): void {
+    const last = this.fenHistory[this.fenHistory.length - 1];
+    if (last !== fen) {
+      this.fenHistory.push(fen);
+    }
+  }
+
   private tryMakeBotMove(): void {
     this.botMoveService.tryMakeBotMove(
       this.gameId,
@@ -268,7 +373,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 

src/app/pages/games/games.component.css

@@ -0,0 +1,405 @@
+:host {
+  --nc-neon: #ff45c8;
+  --nc-bg: #06060d;
+  --nc-surface: rgba(20, 17, 42, 0.6);
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.08);
+  --nc-border-strong: rgba(255, 255, 255, 0.15);
+  --nc-success: #5ee5a1;
+  --nc-danger: #ff7a7a;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --nc-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  display: block;
+  min-height: 100vh;
+  background: var(--nc-bg);
+  font-family: var(--nc-sans);
+  color: var(--nc-text);
+}
+
+:host-context(html:not([data-theme='dark'])) {
+  --nc-neon: #c026d3;
+  --nc-bg: #f5f0fc;
+  --nc-surface: rgba(255, 255, 255, 0.88);
+  --nc-text: #0f0022;
+  --nc-text-muted: rgba(15, 0, 34, 0.65);
+  --nc-text-dim: rgba(15, 0, 34, 0.4);
+  --nc-border: rgba(15, 0, 34, 0.1);
+  --nc-border-strong: rgba(15, 0, 34, 0.2);
+  --nc-success: #16a34a;
+  --nc-danger: #dc2626;
+}
+
+.games-shell {
+  padding-top: 72px;
+  min-height: 100vh;
+}
+
+.page {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 32px 20px 64px;
+}
+
+/* ── Breadcrumb ─────────────────────────── */
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 28px;
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.06em;
+}
+
+.crumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--nc-text-dim);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.crumb-link:hover {
+  color: var(--nc-neon);
+}
+
+.crumb-sep {
+  opacity: 0.4;
+}
+
+.crumb-current {
+  color: var(--nc-text-muted);
+  font-weight: 500;
+}
+
+/* ── Header ─────────────────────────────── */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  flex-wrap: wrap;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--nc-text);
+}
+
+/* ── Tabs ───────────────────────────────── */
+.tabs {
+  display: flex;
+  gap: 2px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  padding: 3px;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  color: var(--nc-text-muted);
+  font-family: var(--nc-sans);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 6px 16px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.tab-btn:hover {
+  color: var(--nc-text);
+}
+
+.tab-btn.active {
+  background: var(--nc-neon);
+  color: #1a0014;
+}
+
+:host-context(html:not([data-theme='dark'])) .tab-btn.active {
+  color: #fff;
+}
+
+.tab-badge {
+  background: rgba(255, 255, 255, 0.25);
+  color: inherit;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 8px;
+  line-height: 1.4;
+}
+
+/* ── State messages ─────────────────────── */
+.state-msg {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--nc-text-dim);
+  font-size: 13px;
+  padding: 32px 0;
+}
+
+.pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--nc-neon);
+  animation: pulse-ring 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse-ring {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.6);
+  }
+}
+
+/* ── Empty state ────────────────────────── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 64px 20px;
+  text-align: center;
+}
+
+.empty-icon {
+  width: 56px;
+  height: 56px;
+  border: 1px solid var(--nc-border);
+  background: var(--nc-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nc-text-dim);
+  margin-bottom: 8px;
+}
+
+.empty-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--nc-text);
+}
+
+.empty-sub {
+  margin: 0;
+  font-size: 13px;
+  color: var(--nc-text-dim);
+}
+
+.btn-primary {
+  margin-top: 12px;
+  background: var(--nc-neon);
+  color: #1a0014;
+  border: none;
+  padding: 9px 22px;
+  font-family: var(--nc-sans);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-decoration: none;
+  display: inline-flex;
+  cursor: pointer;
+  transition: filter 0.15s;
+}
+
+:host-context(html:not([data-theme='dark'])) .btn-primary {
+  color: #fff;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.1);
+}
+
+/* ── Game list ──────────────────────────── */
+.game-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--nc-border);
+  background: var(--nc-surface);
+  overflow: hidden;
+}
+
+.game-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--nc-border);
+  transition: background 0.12s;
+}
+
+.game-row:last-child {
+  border-bottom: none;
+}
+
+.game-row:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+:host-context(html:not([data-theme='dark'])) .game-row:hover {
+  background: rgba(192, 38, 211, 0.04);
+}
+
+.game-row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+
+.game-players {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.player {
+  color: var(--nc-text);
+}
+
+.vs-sep {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.1em;
+}
+
+.game-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  font-family: var(--nc-mono);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.active-dot {
+  background: var(--nc-success);
+  box-shadow: 0 0 6px var(--nc-success);
+}
+
+.finished-dot {
+  background: var(--nc-text-dim);
+}
+
+.status-text {
+  color: var(--nc-text-muted);
+}
+
+.meta-sep {
+  opacity: 0.4;
+}
+
+.meta-item {
+  color: var(--nc-text-dim);
+}
+
+.game-id-label {
+  font-size: 10px;
+  color: var(--nc-text-dim);
+  opacity: 0.7;
+}
+
+/* ── Row actions ────────────────────────── */
+.game-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.btn-resume,
+.btn-view {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: none;
+  font-family: var(--nc-sans);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: filter 0.15s;
+}
+
+.btn-resume {
+  background: var(--nc-neon);
+  color: #1a0014;
+}
+
+:host-context(html:not([data-theme='dark'])) .btn-resume {
+  color: #fff;
+}
+
+.btn-resume:hover {
+  filter: brightness(1.1);
+}
+
+.btn-view {
+  background: transparent;
+  color: var(--nc-text-muted);
+  border: 1px solid var(--nc-border-strong);
+}
+
+.btn-view:hover {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon);
+}
+
+.btn-remove {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--nc-text-dim);
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.btn-remove:hover {
+  color: var(--nc-danger);
+  border-color: var(--nc-border);
+}

src/app/pages/games/games.component.html

@@ -0,0 +1,230 @@
+<div class="games-shell">
+  <div class="page">
+    <!-- Breadcrumb -->
+    <nav class="crumb" aria-label="Breadcrumb">
+      <a routerLink="/" class="crumb-link">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">Games</span>
+    </nav>
+
+    <!-- Header -->
+    <header class="page-header">
+      <h1 class="page-title">Games</h1>
+
+      <!-- Tabs -->
+      <div class="tabs" role="tablist">
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'active'"
+          role="tab"
+          (click)="setTab('active')"
+        >
+          Active
+          @if (activeGames.length > 0) {
+            <span class="tab-badge">{{ activeGames.length }}</span>
+          }
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'history'"
+          role="tab"
+          (click)="setTab('history')"
+        >
+          History
+        </button>
+      </div>
+    </header>
+
+    <!-- Content -->
+    @if (loading) {
+      <div class="state-msg">
+        <span class="pulse"></span>
+        Loading games…
+      </div>
+    } @else if (tab === 'active') {
+      @if (activeGames.length === 0) {
+        <div class="empty-state">
+          <div class="empty-icon">
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="2" y="2" width="20" height="20" rx="2" />
+              <path d="M8 12h8M12 8v8" />
+            </svg>
+          </div>
+          <p class="empty-title">No active games</p>
+          <p class="empty-sub">Start a new game from the lobby to see it here.</p>
+          <a routerLink="/" class="btn-primary">Go to lobby</a>
+        </div>
+      } @else {
+        <div class="game-list">
+          @for (game of activeGames; track game.gameId) {
+            <div class="game-row">
+              <div class="game-row-main">
+                <div class="game-players">
+                  <span class="player white-player">{{ game.white.displayName }}</span>
+                  <span class="vs-sep">vs</span>
+                  <span class="player black-player">{{ game.black.displayName }}</span>
+                </div>
+                <div class="game-meta">
+                  <span class="status-dot active-dot"></span>
+                  <span class="status-text">{{ statusLabel(game.state.status) }}</span>
+                  <span class="meta-sep">·</span>
+                  <span class="meta-item">{{ game.state.moves.length }} moves</span>
+                  <span class="meta-sep">·</span>
+                  <span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
+                </div>
+              </div>
+              <div class="game-row-actions">
+                <button type="button" class="btn-resume" (click)="resumeGame(game.gameId)">
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polygon points="5 3 19 12 5 21 5 3" />
+                  </svg>
+                  Resume
+                </button>
+                <button
+                  type="button"
+                  class="btn-remove"
+                  title="Remove from list"
+                  (click)="removeGame(game.gameId)"
+                >
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    } @else {
+      @if (finishedGames.length === 0) {
+        <div class="empty-state">
+          <div class="empty-icon">
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M14.5 17.5L3 6" />
+              <path d="M13 19l6-6" />
+              <path d="M16 16l4 4" />
+              <path d="M19 21l2-2" />
+              <path d="M15 5l4 4" />
+              <path d="M21 3l-3 1-4 4" />
+            </svg>
+          </div>
+          <p class="empty-title">No game history yet</p>
+          <p class="empty-sub">Completed games will appear here.</p>
+        </div>
+      } @else {
+        <div class="game-list">
+          @for (game of finishedGames; track game.gameId) {
+            <div class="game-row">
+              <div class="game-row-main">
+                <div class="game-players">
+                  <span class="player white-player">{{ game.white.displayName }}</span>
+                  <span class="vs-sep">vs</span>
+                  <span class="player black-player">{{ game.black.displayName }}</span>
+                </div>
+                <div class="game-meta">
+                  <span class="status-dot finished-dot"></span>
+                  <span class="status-text">{{ statusLabel(game.state.status) }}</span>
+                  <span class="meta-sep">·</span>
+                  <span class="meta-item">{{ game.state.moves.length }} moves</span>
+                  <span class="meta-sep">·</span>
+                  <span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
+                </div>
+              </div>
+              <div class="game-row-actions">
+                <button type="button" class="btn-view" (click)="resumeGame(game.gameId)">
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                  View
+                </button>
+                <button
+                  type="button"
+                  class="btn-remove"
+                  title="Remove from list"
+                  (click)="removeGame(game.gameId)"
+                >
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    }
+  </div>
+</div>

src/app/pages/games/games.component.ts

@@ -0,0 +1,113 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { forkJoin, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AuthService } from '../../services/auth.service';
+import { GameApiService } from '../../services/game-api.service';
+import { GameHistoryService } from '../../services/game-history.service';
+import { GameFull, GameStatus } from '../../models/game.models';
+
+type GamesTab = 'active' | 'history';
+
+const FINISHED_STATUSES: GameStatus[] = [
+  'checkmate',
+  'stalemate',
+  'resign',
+  'draw',
+  'insufficientMaterial',
+];
+
+@Component({
+  selector: 'app-games',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './games.component.html',
+  styleUrl: './games.component.css',
+})
+export class GamesComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly router = inject(Router);
+  private readonly authService = inject(AuthService);
+  private readonly gameApi = inject(GameApiService);
+  private readonly gameHistory = inject(GameHistoryService);
+
+  tab: GamesTab = 'active';
+  loading = true;
+  activeGames: GameFull[] = [];
+  finishedGames: GameFull[] = [];
+
+  ngOnInit(): void {
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
+      if (!user) void this.router.navigate(['/']);
+    });
+
+    this.loadGames();
+  }
+
+  setTab(tab: GamesTab): void {
+    this.tab = tab;
+  }
+
+  resumeGame(gameId: string): void {
+    void this.router.navigate(['/game', gameId]);
+  }
+
+  removeGame(gameId: string): void {
+    this.gameHistory.removeGame(gameId);
+    this.activeGames = this.activeGames.filter((g) => g.gameId !== gameId);
+    this.finishedGames = this.finishedGames.filter((g) => g.gameId !== gameId);
+  }
+
+  statusLabel(status: GameStatus): string {
+    const labels: Record<GameStatus, string> = {
+      started: 'In Progress',
+      check: 'Check',
+      checkmate: 'Checkmate',
+      stalemate: 'Stalemate',
+      resign: 'Resigned',
+      draw: 'Draw',
+      drawOffered: 'Draw Offered',
+      fiftyMoveAvailable: 'In Progress',
+      promotionPending: 'In Progress',
+      insufficientMaterial: 'Draw',
+    };
+    return labels[status] ?? status;
+  }
+
+  isFinished(status: GameStatus): boolean {
+    return FINISHED_STATUSES.includes(status);
+  }
+
+  private loadGames(): void {
+    const ids = this.gameHistory.getGameIds();
+    if (ids.length === 0) {
+      this.loading = false;
+      return;
+    }
+
+    const requests = ids.map((id) =>
+      this.gameApi.getGame(id).pipe(
+        catchError((err: unknown) => {
+          if (
+            typeof err === 'object' &&
+            err !== null &&
+            (err as { status: number }).status === 404
+          ) {
+            this.gameHistory.removeGame(id);
+          }
+          return of(null);
+        }),
+      ),
+    );
+
+    forkJoin(requests)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((results) => {
+        const valid = results.filter((g): g is GameFull => g !== null);
+        this.activeGames = valid.filter((g) => !FINISHED_STATUSES.includes(g.state.status));
+        this.finishedGames = valid.filter((g) => FINISHED_STATUSES.includes(g.state.status));
+        this.loading = false;
+      });
+  }
+}

src/app/pages/profile/profile.component.css

@@ -15,15 +15,24 @@
 }
 
 .building-structure {
-  background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--bldg-body) 0%,
+    var(--bldg-mid) 50%,
+    var(--bldg-lit) 100%
+  );
   border: 2px solid var(--dlg-border);
   border-radius: 8px;
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
+  box-shadow:
+    var(--bb-glow),
+    inset 0 0 20px rgba(0, 210, 255, 0.1);
   overflow: hidden;
 }
 
 .cityscape-shell.sunset .building-structure {
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
+  box-shadow:
+    var(--bb-glow),
+    inset 0 0 20px rgba(255, 120, 40, 0.1);
 }
 
 .building-top {
@@ -55,12 +64,24 @@
   gap: 0;
   padding: 20px;
   min-height: 200px;
-  background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 210, 255, 0.03) 0%,
+    transparent 15%,
+    transparent 85%,
+    rgba(0, 210, 255, 0.03) 100%
+  );
   align-items: center;
 }
 
 .cityscape-shell.sunset .building-main {
-  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 120, 40, 0.05) 0%,
+    transparent 15%,
+    transparent 85%,
+    rgba(255, 120, 40, 0.05) 100%
+  );
 }
 
 .building-side {
@@ -94,7 +115,9 @@
   background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
   border: 1px solid rgba(0, 210, 255, 0.5);
   border-radius: 2px;
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
+  box-shadow:
+    0 0 10px rgba(0, 210, 255, 0.4),
+    inset 0 0 8px rgba(0, 210, 255, 0.2);
   position: relative;
   animation: windowFlicker 4s ease-in-out infinite;
 }
@@ -102,25 +125,37 @@
 .cityscape-shell.sunset .window {
   background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
   border-color: rgba(255, 120, 40, 0.5);
-  box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  box-shadow:
+    0 0 10px rgba(255, 120, 40, 0.4),
+    inset 0 0 8px rgba(255, 120, 40, 0.2);
   animation: windowFlickerSunset 4s ease-in-out infinite;
 }
 
 @keyframes windowFlicker {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
+  0%,
+  100% {
+    box-shadow:
+      0 0 10px rgba(0, 210, 255, 0.4),
+      inset 0 0 8px rgba(0, 210, 255, 0.2);
   }
   50% {
-    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3);
+    box-shadow:
+      0 0 15px rgba(0, 210, 255, 0.6),
+      inset 0 0 12px rgba(0, 210, 255, 0.3);
   }
 }
 
 @keyframes windowFlickerSunset {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  0%,
+  100% {
+    box-shadow:
+      0 0 10px rgba(255, 120, 40, 0.4),
+      inset 0 0 8px rgba(255, 120, 40, 0.2);
   }
   50% {
-    box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
+    box-shadow:
+      0 0 15px rgba(255, 120, 40, 0.6),
+      inset 0 0 12px rgba(255, 120, 40, 0.3);
   }
 }
 
@@ -137,13 +172,17 @@
   border-radius: 4px;
   padding: 30px;
   text-align: center;
-  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1);
+  box-shadow:
+    0 0 20px rgba(0, 210, 255, 0.3),
+    inset 0 0 15px rgba(0, 210, 255, 0.1);
   min-width: 250px;
 }
 
 .cityscape-shell.sunset .player-display-window {
   background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
-  box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
+  box-shadow:
+    0 0 20px rgba(255, 64, 249, 0.3),
+    inset 0 0 15px rgba(255, 64, 249, 0.1);
 }
 
 .player-avatar {
@@ -154,7 +193,8 @@
 }
 
 @keyframes avatarPulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
@@ -332,7 +372,12 @@
 
 .building-door {
   height: 60px;
-  background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--bldg-mid) 0%,
+    var(--bldg-body) 50%,
+    var(--bldg-mid) 100%
+  );
   border-top: 1px solid rgba(0, 210, 255, 0.2);
   border-radius: 0 0 8px 8px;
   display: flex;
@@ -380,7 +425,8 @@
 }
 
 @keyframes handleGlow {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
   }
   50% {
@@ -389,7 +435,8 @@
 }
 
 @keyframes handleGlowSunset {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
   }
   50% {

src/app/pages/profile/profile.component.html

@@ -1,5 +1,4 @@
 <div class="cityscape-shell" [class.sunset]="isSunsetMode">
-
   <div class="scene">
     <div class="sky">
       <div class="stars-layer">
@@ -22,71 +21,85 @@
     <div class="main-layer">
       <div class="profile-building-container">
         @if (currentUser; as user) {
-        <!-- Player Building with Info Inside -->
-        <div class="building-wrapper">
-          <div class="building-structure">
-            <!-- Building top -->
-            <div class="building-top"></div>
-            
-            <!-- Building main section with user inside -->
-            <div class="building-main">
-              <!-- Left side windows -->
-              <div class="building-side left-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-              
-              <!-- Center section - User Info -->
-              <div class="building-center">
-                <div class="player-display-window">
-                  <div class="player-avatar">👤</div>
-                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
-                  <div class="player-id-label">PLAYER ID</div>
-                  <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
-                  @if (idCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
-                  @if (usernameCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
+          <!-- Player Building with Info Inside -->
+          <div class="building-wrapper">
+            <div class="building-structure">
+              <!-- Building top -->
+              <div class="building-top"></div>
+
+              <!-- Building main section with user inside -->
+              <div class="building-main">
+                <!-- Left side windows -->
+                <div class="building-side left-side">
+                  <div class="window"></div>
+                  <div class="window"></div>
+                  <div class="window"></div>
+                  <div class="window"></div>
+                </div>
+
+                <!-- Center section - User Info -->
+                <div class="building-center">
+                  <div class="player-display-window">
+                    <div class="player-avatar">👤</div>
+                    <div
+                      class="player-name"
+                      (click)="copyUsername(user.username)"
+                      [class.copied]="usernameCopied"
+                      title="Click to copy"
+                    >
+                      {{ user.username }}
+                    </div>
+                    <div class="player-id-label">PLAYER ID</div>
+                    <div
+                      class="player-id-value"
+                      (click)="copyPlayerId(user.id)"
+                      [class.copied]="idCopied"
+                      title="Click to copy"
+                    >
+                      {{ user.id }}
+                    </div>
+                    @if (idCopied) {
+                      <div class="copy-notification">✓ COPIED</div>
+                    }
+                    @if (usernameCopied) {
+                      <div class="copy-notification">✓ COPIED</div>
+                    }
+                  </div>
+                </div>
+
+                <!-- Right side windows -->
+                <div class="building-side right-side">
+                  <div class="window"></div>
+                  <div class="window"></div>
+                  <div class="window"></div>
+                  <div class="window"></div>
                 </div>
               </div>
-              
-              <!-- Right side windows -->
-              <div class="building-side right-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-            </div>
-            
-            <!-- Building base with stats -->
-            <div class="building-base">
-              <div class="stat-panel">
-                <div class="stat">
-                  <span class="stat-label">RATING</span>
-                  <span class="stat-value">{{ user.rating }}</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat">
-                  <span class="stat-label">MEMBER SINCE</span>
-                  <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
+
+              <!-- Building base with stats -->
+              <div class="building-base">
+                <div class="stat-panel">
+                  <div class="stat">
+                    <span class="stat-label">RATING</span>
+                    <span class="stat-value">{{ user.rating }}</span>
+                  </div>
+                  <div class="stat-divider"></div>
+                  <div class="stat">
+                    <span class="stat-label">MEMBER SINCE</span>
+                    <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
+                  </div>
                 </div>
               </div>
+
+              <!-- Building door -->
+              <div class="building-door">
+                <div class="door-handle"></div>
+              </div>
             </div>
-            
-            <!-- Building door -->
-            <div class="building-door">
-              <div class="door-handle"></div>
-            </div>
+
+            <!-- Back button -->
+            <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
           </div>
-          
-          <!-- Back button -->
-          <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
-        </div>
         }
       </div>
     </div>

src/app/pages/profile/profile.component.ts

@@ -19,7 +19,7 @@ interface BackgroundBuilding {
   standalone: true,
   imports: [CommonModule],
   templateUrl: './profile.component.html',
-  styleUrl: './profile.component.css'
+  styleUrl: './profile.component.css',
 })
 export class ProfileComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
@@ -36,14 +36,12 @@ export class ProfileComponent implements OnInit {
   bgBuildings: BackgroundBuilding[] = [];
 
   ngOnInit(): void {
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-        if (!user) {
-          this.router.navigate(['']);
-        }
-      });
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
+      this.currentUser = user;
+      if (!user) {
+        this.router.navigate(['']);
+      }
+    });
 
     this.themeService.darkMode$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -87,8 +85,8 @@ export class ProfileComponent implements OnInit {
           left: `${Math.random() * 100}%`,
           top: `${Math.random() * 62}%`,
           '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
-          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
-        }
+          '--dl': `${-(Math.random() * 6).toFixed(1)}s`,
+        },
       };
     });
   }
@@ -117,11 +115,11 @@ export class ProfileComponent implements OnInit {
       { l: '85.5%', w: '9%', h: '32vh' },
       { l: '88%', w: '5%', h: '20vh' },
       { l: '91%', w: '3%', h: '16vh' },
-      { l: '94%', w: '6%', h: '27vh' }
+      { l: '94%', w: '6%', h: '27vh' },
     ];
 
     this.bgBuildings = specs.map((spec) => ({
-      style: { left: spec.l, width: spec.w, height: spec.h }
+      style: { left: spec.l, width: spec.w, height: spec.h },
     }));
   }
 }

src/app/pages/tournaments/tournaments.component.css

@@ -0,0 +1,735 @@
+:host {
+  --nc-neon: #ff45c8;
+  --nc-bg: #06060d;
+  --nc-surface: rgba(20, 17, 42, 0.6);
+  --nc-text: #fff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
+  --nc-border: rgba(255, 255, 255, 0.08);
+  --nc-border-strong: rgba(255, 255, 255, 0.15);
+  --nc-success: #5ee5a1;
+  --nc-danger: #ff7a7a;
+  --nc-warn: #ffd166;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  display: block;
+  min-height: 100vh;
+  background: var(--nc-bg);
+  font-family: var(--nc-sans);
+  color: var(--nc-text);
+}
+
+:host-context(html:not([data-theme='dark'])) {
+  --nc-neon: #c026d3;
+  --nc-bg: #f5f0fc;
+  --nc-surface: rgba(255, 255, 255, 0.88);
+  --nc-text: #0f0022;
+  --nc-text-muted: rgba(15, 0, 34, 0.65);
+  --nc-text-dim: rgba(15, 0, 34, 0.4);
+  --nc-border: rgba(15, 0, 34, 0.1);
+  --nc-border-strong: rgba(15, 0, 34, 0.2);
+  --nc-success: #16a34a;
+  --nc-danger: #dc2626;
+  --nc-warn: #b45309;
+}
+
+.t-shell {
+  padding-top: 72px;
+  min-height: 100vh;
+}
+
+.page {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 32px 20px 64px;
+}
+
+/* Breadcrumb */
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 28px;
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.06em;
+}
+.crumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--nc-text-dim);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.crumb-link:hover {
+  color: var(--nc-neon);
+}
+.crumb-sep {
+  opacity: 0.35;
+}
+.crumb-current {
+  color: var(--nc-text-muted);
+}
+
+/* Header */
+.page-header {
+  margin-bottom: 28px;
+}
+.page-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.page-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.btn-new {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nc-neon);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-new:hover {
+  opacity: 0.85;
+}
+
+/* Create dialog */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.dialog-card {
+  background: var(--nc-bg);
+  border: 1px solid var(--nc-border-strong);
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  max-width: 420px;
+}
+.dialog-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.dialog-brand {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--nc-neon);
+}
+.dialog-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--nc-text-muted);
+  padding: 0 4px;
+}
+.dialog-close:hover {
+  color: var(--nc-text);
+}
+.dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+.dialog-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--nc-text-muted);
+}
+.dialog-input {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--nc-border-strong);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nc-text);
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.dialog-input:focus {
+  outline: 2px solid var(--nc-neon);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+.dialog-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.dialog-field:not(.dialog-row .dialog-field) {
+  margin-bottom: 16px;
+}
+.dialog-toggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  user-select: none;
+}
+.dialog-toggle input[type='checkbox'] {
+  display: none;
+}
+.toggle-track {
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--nc-border-strong);
+  flex-shrink: 0;
+  transition: background 0.2s;
+  position: relative;
+}
+.toggle-track::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--nc-text-muted);
+  transition:
+    transform 0.2s,
+    background 0.2s;
+}
+.dialog-toggle input:checked ~ .toggle-track {
+  background: var(--nc-neon);
+}
+.dialog-toggle input:checked ~ .toggle-track::after {
+  transform: translateX(16px);
+  background: #fff;
+}
+.toggle-label {
+  font-size: 14px;
+  color: var(--nc-text);
+}
+.dialog-error {
+  font-size: 13px;
+  color: var(--nc-danger);
+  background: rgba(255, 122, 122, 0.1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+}
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.btn-ghost {
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--nc-border-strong);
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+.btn-ghost:hover {
+  color: var(--nc-text);
+  border-color: var(--nc-text-muted);
+}
+.btn-primary {
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nc-neon);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 4px;
+}
+.tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.tab-btn:hover {
+  background: var(--nc-border);
+  color: var(--nc-text);
+}
+.tab-btn.active {
+  background: var(--nc-surface);
+  color: var(--nc-text);
+  border: 1px solid var(--nc-border-strong);
+}
+.tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--nc-border-strong);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--nc-text-muted);
+}
+.live-badge {
+  background: rgba(94, 229, 161, 0.2);
+  color: var(--nc-success);
+}
+
+/* States */
+.state-msg {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 24px 0;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+}
+.state-msg.small {
+  padding: 12px 0;
+}
+.pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--nc-neon);
+  flex-shrink: 0;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 64px 0;
+  text-align: center;
+}
+.empty-icon {
+  color: var(--nc-text-dim);
+  margin-bottom: 4px;
+}
+.empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+}
+.empty-sub {
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  margin: 0;
+}
+
+/* Tournament list */
+.t-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.t-card {
+  border: 1px solid var(--nc-border);
+  border-radius: 12px;
+  background: var(--nc-surface);
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.t-card:hover,
+.t-card.expanded {
+  border-color: var(--nc-border-strong);
+  background: rgba(255, 255, 255, 0.04);
+}
+.t-card:focus-visible {
+  outline: 2px solid var(--nc-neon);
+  outline-offset: 2px;
+}
+
+.t-action-btn {
+  padding: 5px 12px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+.t-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.t-btn-start {
+  background: var(--nc-success);
+  color: #0f0022;
+}
+.t-btn-start:hover:not(:disabled) {
+  opacity: 0.85;
+}
+.t-btn-join {
+  background: var(--nc-neon);
+  color: #fff;
+}
+.t-btn-join:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+/* Join dialog extras */
+.join-hint {
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  margin: 0 0 16px;
+  line-height: 1.5;
+}
+.join-empty {
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  margin: 0 0 8px;
+}
+.dialog-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  padding: 12px 0;
+}
+.bot-pick-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.bot-pick-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--nc-border);
+  background: var(--nc-surface);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.bot-pick-row:hover:not(:disabled) {
+  border-color: var(--nc-neon);
+  background: rgba(255, 69, 200, 0.06);
+}
+.bot-pick-row:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.bot-pick-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--nc-neon);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.bot-pick-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--nc-text);
+}
+.bot-pick-rating {
+  font-size: 12px;
+  color: var(--nc-text-muted);
+}
+.bot-pick-spinner {
+  font-size: 13px;
+  color: var(--nc-neon);
+}
+
+.t-card-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  gap: 12px;
+}
+.t-card-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.t-card-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.t-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-started {
+  background: var(--nc-success);
+  box-shadow: 0 0 6px var(--nc-success);
+}
+.dot-created {
+  background: var(--nc-warn);
+}
+.dot-finished {
+  background: var(--nc-text-dim);
+}
+
+.t-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.t-name {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-meta {
+  font-size: 11px;
+  color: var(--nc-text-muted);
+}
+
+.winner-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--nc-warn);
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: rgba(255, 209, 102, 0.12);
+}
+
+.chevron {
+  color: var(--nc-text-dim);
+  transition: transform 0.2s;
+}
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+/* Detail panel */
+.t-detail {
+  border-top: 1px solid var(--nc-border);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.detail-heading {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--nc-text-muted);
+  margin: 0;
+}
+
+.no-standings {
+  font-size: 12px;
+  color: var(--nc-text-dim);
+  margin: 0;
+}
+
+/* Standings table */
+.standings-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.standings-table th {
+  text-align: left;
+  padding: 6px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--nc-text-dim);
+  border-bottom: 1px solid var(--nc-border);
+}
+.standings-table td {
+  padding: 8px 8px;
+  border-bottom: 1px solid var(--nc-border);
+}
+.standings-table tr:last-child td {
+  border-bottom: none;
+}
+.top-row td {
+  color: var(--nc-text);
+}
+.standings-table tr:not(.top-row) td {
+  color: var(--nc-text-muted);
+}
+
+.col-rank {
+  width: 40px;
+  font-size: 14px;
+}
+.col-pts {
+  width: 48px;
+  font-weight: 700;
+  color: var(--nc-neon) !important;
+}
+.col-tb {
+  width: 52px;
+  color: var(--nc-text-dim) !important;
+  font-size: 12px;
+}
+.col-games {
+  width: 64px;
+}
+
+.wdl {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.w {
+  color: var(--nc-success);
+}
+.d {
+  color: var(--nc-text-muted);
+}
+.l {
+  color: var(--nc-danger);
+}
+
+/* Pairings */
+.pairings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.pairing-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.025);
+  font-size: 13px;
+  transition: background 0.15s;
+}
+.pairing-row.is-watchable {
+  cursor: pointer;
+}
+.pairing-row.is-watchable:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.pairing-white {
+  font-weight: 600;
+  flex: 1;
+}
+.pairing-vs {
+  color: var(--nc-text-dim);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.pairing-black {
+  flex: 1;
+}
+.pairing-result {
+  font-weight: 700;
+  font-size: 12px;
+  margin-left: auto;
+}
+.result-white {
+  color: var(--nc-success);
+}
+.result-black {
+  color: var(--nc-danger);
+}
+.result-draw {
+  color: var(--nc-text-muted);
+}
+.pairing-ongoing {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--nc-success);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.pairing-ongoing svg {
+  animation: pulse 1.4s ease-in-out infinite;
+}

src/app/pages/tournaments/tournaments.component.html

@@ -0,0 +1,374 @@
+<div class="t-shell">
+  <div class="page">
+    <nav class="crumb" aria-label="Breadcrumb">
+      <a routerLink="/" class="crumb-link">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">Tournaments</span>
+    </nav>
+
+    <header class="page-header">
+      <div class="page-title-row">
+        <h1 class="page-title">Tournaments</h1>
+        @if (currentUser) {
+          <button type="button" class="btn-new" (click)="openCreateDialog()">
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="12" y1="5" x2="12" y2="19" />
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            New tournament
+          </button>
+        }
+      </div>
+      <div class="tabs" role="tablist">
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'started'"
+          (click)="setTab('started')"
+        >
+          Live
+          @if (started.length > 0) {
+            <span class="tab-badge live-badge">{{ started.length }}</span>
+          }
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'created'"
+          (click)="setTab('created')"
+        >
+          Upcoming
+          @if (created.length > 0) {
+            <span class="tab-badge">{{ created.length }}</span>
+          }
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'finished'"
+          (click)="setTab('finished')"
+        >
+          Finished
+        </button>
+      </div>
+    </header>
+
+    @if (loading) {
+      <div class="state-msg"><span class="pulse"></span>Loading tournaments…</div>
+    } @else if (activeList.length === 0) {
+      <div class="empty-state">
+        <div class="empty-icon">
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+            <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+            <path d="M4 22h16" />
+            <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+            <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+            <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+          </svg>
+        </div>
+        <p class="empty-title">No tournaments here</p>
+        <p class="empty-sub">Check back later or look in another tab.</p>
+      </div>
+    } @else {
+      <div class="t-list">
+        @for (t of activeList; track t.id) {
+          <div
+            class="t-card"
+            [class.expanded]="selectedTournament?.id === t.id"
+            (click)="selectTournament(t)"
+            role="button"
+            tabindex="0"
+            (keydown.enter)="selectTournament(t)"
+          >
+            <div class="t-card-main">
+              <div class="t-card-left">
+                <span class="t-status-dot" [class]="'dot-' + t.status"></span>
+                <div class="t-info">
+                  <span class="t-name">{{ t.fullName }}</span>
+                  <span class="t-meta">
+                    {{ clockDisplay(t) }} · {{ t.nbRounds }} rounds ·
+                    @if (t.status === 'started') {
+                      Round {{ t.round }}/{{ t.nbRounds }} ·
+                    }
+                    {{ t.nbPlayers }} player{{ t.nbPlayers === 1 ? '' : 's' }}
+                    @if (t.rated) {
+                      · Rated
+                    }
+                  </span>
+                </div>
+              </div>
+              <div class="t-card-right">
+                @if (t.status === 'finished' && t.winner) {
+                  <span class="winner-badge">🏆 {{ t.winner.name }}</span>
+                }
+                @if (currentUser && t.status === 'created') {
+                  @if (t.createdBy === currentUser.id) {
+                    <button
+                      type="button"
+                      class="t-action-btn t-btn-start"
+                      [disabled]="startingId === t.id"
+                      (click)="startTournament($event, t)"
+                    >
+                      {{ startingId === t.id ? '…' : 'Start' }}
+                    </button>
+                  }
+                  <button
+                    type="button"
+                    class="t-action-btn t-btn-join"
+                    (click)="openJoinDialog($event, t.id)"
+                  >
+                    Join with bot
+                  </button>
+                }
+                <svg
+                  class="chevron"
+                  [class.open]="selectedTournament?.id === t.id"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </div>
+            </div>
+
+            @if (selectedTournament?.id === t.id) {
+              <div class="t-detail" (click)="$event.stopPropagation()">
+                <!-- Leaderboard -->
+                @if (t.standing.players.length > 0) {
+                  <section class="detail-section">
+                    <h3 class="detail-heading">Leaderboard</h3>
+                    <table class="standings-table">
+                      <thead>
+                        <tr>
+                          <th class="col-rank">#</th>
+                          <th class="col-name">Bot</th>
+                          <th class="col-pts">Pts</th>
+                          <th class="col-tb">Bkh</th>
+                          <th class="col-games">W/D/L</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (r of t.standing.players; track r.bot.id) {
+                          <tr [class.top-row]="r.rank <= 3">
+                            <td class="col-rank">{{ rankMedal(r.rank) }}</td>
+                            <td class="col-name">{{ r.bot.name }}</td>
+                            <td class="col-pts">{{ scoreDisplay(r) }}</td>
+                            <td class="col-tb">{{ r.tieBreak }}</td>
+                            <td class="col-games">
+                              <span class="wdl">
+                                <span class="w">{{ r.wins }}</span
+                                >/<span class="d">{{ r.draws }}</span
+                                >/<span class="l">{{ r.losses }}</span>
+                              </span>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  </section>
+                } @else {
+                  <p class="no-standings">No standings yet — waiting for games to complete.</p>
+                }
+
+                <!-- Current round pairings -->
+                @if (t.round > 0) {
+                  <section class="detail-section">
+                    <h3 class="detail-heading">Round {{ t.round }} pairings</h3>
+                    @if (pairingsLoading) {
+                      <div class="state-msg small"><span class="pulse"></span>Loading…</div>
+                    } @else if (pairings && pairings.pairings.length > 0) {
+                      <div class="pairings-list">
+                        @for (p of pairings.pairings; track p.id) {
+                          <div
+                            class="pairing-row"
+                            [class.is-watchable]="!!p.gameId"
+                            (click)="p.gameId && watchGame(p.gameId)"
+                          >
+                            <span class="pairing-white">{{ p.white?.name ?? 'Bye' }}</span>
+                            <span class="pairing-vs">vs</span>
+                            <span class="pairing-black">{{ p.black.name }}</span>
+                            @if (p.winner) {
+                              <span class="pairing-result" [class]="'result-' + p.winner">
+                                {{
+                                  p.winner === 'draw' ? '½–½' : p.winner === 'white' ? '1–0' : '0–1'
+                                }}
+                              </span>
+                            } @else if (p.gameId) {
+                              <span class="pairing-ongoing">
+                                <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor">
+                                  <circle cx="12" cy="12" r="10" />
+                                </svg>
+                                Watch
+                              </span>
+                            }
+                          </div>
+                        }
+                      </div>
+                    } @else {
+                      <p class="no-standings">No pairings recorded yet.</p>
+                    }
+                  </section>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+</div>
+
+@if (joinDialogTournamentId) {
+  <div class="dialog-overlay" (click)="closeJoinDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-head">
+        <span class="dialog-brand">Join with a bot</span>
+        <button type="button" class="dialog-close" (click)="closeJoinDialog()">×</button>
+      </div>
+      <p class="join-hint">
+        Select one of your bots to enter this tournament. Its token will be rotated to authenticate
+        the join.
+      </p>
+
+      @if (botsLoading) {
+        <div class="dialog-loading"><span class="pulse"></span>Loading bots…</div>
+      } @else if (userBots.length === 0) {
+        <p class="join-empty">
+          You have no bots yet. Go to <strong>Bots</strong> in the nav to create one first.
+        </p>
+      } @else {
+        <div class="bot-pick-list">
+          @for (bot of userBots; track bot.id) {
+            <button
+              type="button"
+              class="bot-pick-row"
+              [disabled]="!!joiningBotId"
+              (click)="joinWithBot(bot)"
+            >
+              <span class="bot-pick-avatar">{{ bot.name.charAt(0).toUpperCase() }}</span>
+              <span class="bot-pick-name">{{ bot.name }}</span>
+              <span class="bot-pick-rating">{{ bot.rating }}</span>
+              @if (joiningBotId === bot.id) {
+                <span class="bot-pick-spinner">…</span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      @if (joinError) {
+        <div class="dialog-error">{{ joinError }}</div>
+      }
+    </div>
+  </div>
+}
+
+@if (showCreateDialog) {
+  <div class="dialog-overlay" (click)="closeCreateDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-head">
+        <span class="dialog-brand">New tournament</span>
+        <button type="button" class="dialog-close" (click)="closeCreateDialog()">×</button>
+      </div>
+
+      <form [formGroup]="createForm" (ngSubmit)="submitCreate()">
+        <div class="dialog-field">
+          <label class="dialog-label">Name</label>
+          <input
+            type="text"
+            class="dialog-input"
+            formControlName="name"
+            placeholder="e.g. Friday Blitz Open"
+          />
+        </div>
+
+        <div class="dialog-row">
+          <div class="dialog-field">
+            <label class="dialog-label">Rounds</label>
+            <input type="number" class="dialog-input" formControlName="nbRounds" min="1" max="20" />
+          </div>
+          <div class="dialog-field">
+            <label class="dialog-label">Clock (min)</label>
+            <input
+              type="number"
+              class="dialog-input"
+              formControlName="clockLimitMinutes"
+              min="1"
+              max="60"
+            />
+          </div>
+          <div class="dialog-field">
+            <label class="dialog-label">Increment (s)</label>
+            <input
+              type="number"
+              class="dialog-input"
+              formControlName="clockIncrement"
+              min="0"
+              max="60"
+            />
+          </div>
+        </div>
+
+        <label class="dialog-toggle">
+          <input type="checkbox" formControlName="rated" />
+          <span class="toggle-track"></span>
+          <span class="toggle-label">Rated</span>
+        </label>
+
+        @if (createError) {
+          <div class="dialog-error">{{ createError }}</div>
+        }
+
+        <div class="dialog-actions">
+          <button type="button" class="btn-ghost" (click)="closeCreateDialog()">Cancel</button>
+          <button
+            type="submit"
+            class="btn-primary"
+            [disabled]="createLoading || createForm.invalid"
+          >
+            {{ createLoading ? 'Creating…' : 'Create' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+}

src/app/pages/tournaments/tournaments.component.ts

@@ -0,0 +1,257 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TournamentService } from '../../services/tournament.service';
+import { AuthService } from '../../services/auth.service';
+import { BotService } from '../../services/bot.service';
+import { Bot } from '../../models/bot.models';
+import { Tournament, TournamentResult, RoundPairings } from '../../models/tournament.models';
+import { CurrentUser } from '../../models/auth.models';
+
+type StatusTab = 'started' | 'created' | 'finished';
+
+@Component({
+  selector: 'app-tournaments',
+  standalone: true,
+  imports: [CommonModule, RouterLink, ReactiveFormsModule],
+  templateUrl: './tournaments.component.html',
+  styleUrl: './tournaments.component.css',
+})
+export class TournamentsComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly tournamentService = inject(TournamentService);
+  private readonly authService = inject(AuthService);
+  private readonly fb = inject(FormBuilder);
+  private readonly botService = inject(BotService);
+  private readonly router = inject(Router);
+
+  loading = true;
+  tab: StatusTab = 'started';
+  currentUser: CurrentUser | null = null;
+
+  started: Tournament[] = [];
+  created: Tournament[] = [];
+  finished: Tournament[] = [];
+
+  selectedTournament: Tournament | null = null;
+  pairings: RoundPairings | null = null;
+  pairingsLoading = false;
+
+  showCreateDialog = false;
+  createForm: FormGroup = this.fb.group({
+    name: ['', [Validators.required, Validators.minLength(3)]],
+    nbRounds: [4, [Validators.required, Validators.min(1), Validators.max(20)]],
+    clockLimitMinutes: [3, [Validators.required, Validators.min(1), Validators.max(60)]],
+    clockIncrement: [0, [Validators.required, Validators.min(0), Validators.max(60)]],
+    rated: [false],
+  });
+  createLoading = false;
+  createError: string | null = null;
+
+  startingId: string | null = null;
+
+  joinDialogTournamentId: string | null = null;
+  userBots: Bot[] = [];
+  botsLoading = false;
+  joiningBotId: string | null = null;
+  joinError: string | null = null;
+
+  ngOnInit(): void {
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((u) => {
+      this.currentUser = u;
+    });
+    this.loadTournaments();
+  }
+
+  openCreateDialog(): void {
+    this.createForm.reset({
+      name: '',
+      nbRounds: 4,
+      clockLimitMinutes: 3,
+      clockIncrement: 0,
+      rated: false,
+    });
+    this.createError = null;
+    this.showCreateDialog = true;
+  }
+
+  closeCreateDialog(): void {
+    this.showCreateDialog = false;
+  }
+
+  submitCreate(): void {
+    if (this.createForm.invalid) return;
+    this.createLoading = true;
+    this.createError = null;
+    this.tournamentService.create(this.createForm.value).subscribe({
+      next: (t) => {
+        this.createLoading = false;
+        this.showCreateDialog = false;
+        this.created = [t, ...this.created];
+        this.tab = 'created';
+        this.selectedTournament = null;
+      },
+      error: (err) => {
+        this.createLoading = false;
+        this.createError = err.error?.message ?? err.error?.error ?? 'Failed to create tournament.';
+      },
+    });
+  }
+
+  setTab(tab: StatusTab): void {
+    this.tab = tab;
+    this.selectedTournament = null;
+    this.pairings = null;
+  }
+
+  selectTournament(t: Tournament): void {
+    if (this.selectedTournament?.id === t.id) {
+      this.selectedTournament = null;
+      this.pairings = null;
+      return;
+    }
+    this.selectedTournament = t;
+    this.pairings = null;
+    if (t.round > 0) {
+      this.loadPairings(t.id, t.round);
+    }
+  }
+
+  get activeList(): Tournament[] {
+    return this[this.tab];
+  }
+
+  clockDisplay(t: Tournament): string {
+    const min = Math.floor(t.clock.limit / 60);
+    return `${min}+${t.clock.increment}`;
+  }
+
+  rankMedal(rank: number): string {
+    if (rank === 1) return '🥇';
+    if (rank === 2) return '🥈';
+    if (rank === 3) return '🥉';
+    return `${rank}.`;
+  }
+
+  scoreDisplay(r: TournamentResult): string {
+    return r.points % 1 === 0 ? `${r.points}` : `${r.points}`;
+  }
+
+  startTournament(event: MouseEvent, t: Tournament): void {
+    event.stopPropagation();
+    this.startingId = t.id;
+    this.tournamentService.start(t.id).subscribe({
+      next: (updated) => {
+        this.startingId = null;
+        const list = this.created.map((x) => (x.id === t.id ? updated : x));
+        this.created = list.filter((x) => x.status === 'created');
+        if (!this.started.find((x) => x.id === updated.id))
+          this.started = [updated, ...this.started];
+        this.selectedTournament = updated;
+        this.tab = 'started';
+      },
+      error: () => {
+        this.startingId = null;
+      },
+    });
+  }
+
+  watchGame(gameId: string): void {
+    void this.router.navigate(['/game', gameId]);
+  }
+
+  openJoinDialog(event: MouseEvent, tournamentId: string): void {
+    event.stopPropagation();
+    this.joinDialogTournamentId = tournamentId;
+    this.joinError = null;
+    this.botsLoading = true;
+    this.botService
+      .list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (bots) => {
+          this.userBots = bots;
+          this.botsLoading = false;
+        },
+        error: () => {
+          this.botsLoading = false;
+        },
+      });
+  }
+
+  closeJoinDialog(): void {
+    this.joinDialogTournamentId = null;
+    this.joiningBotId = null;
+    this.joinError = null;
+  }
+
+  joinWithBot(bot: Bot): void {
+    if (!this.joinDialogTournamentId || this.joiningBotId) return;
+    this.joiningBotId = bot.id;
+    this.joinError = null;
+    this.botService.rotateToken(bot.id).subscribe({
+      next: (token) => {
+        this.tournamentService.joinWithBotToken(this.joinDialogTournamentId!, token).subscribe({
+          next: () => {
+            this.joiningBotId = null;
+            const tid = this.joinDialogTournamentId!;
+            this.closeJoinDialog();
+            this.tournamentService
+              .get(tid)
+              .pipe(takeUntilDestroyed(this.destroyRef))
+              .subscribe((updated) => {
+                this.created = this.created.map((x) => (x.id === tid ? updated : x));
+                this.started = this.started.map((x) => (x.id === tid ? updated : x));
+                if (this.selectedTournament?.id === tid) this.selectedTournament = updated;
+              });
+          },
+          error: (err) => {
+            this.joiningBotId = null;
+            this.joinError = err.error?.message ?? err.error?.error ?? 'Failed to join tournament.';
+          },
+        });
+      },
+      error: () => {
+        this.joiningBotId = null;
+        this.joinError = 'Failed to get bot token.';
+      },
+    });
+  }
+
+  private loadTournaments(): void {
+    this.tournamentService
+      .list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (list) => {
+          this.started = list.started;
+          this.created = list.created;
+          this.finished = list.finished;
+          this.loading = false;
+          if (this.started.length === 0 && this.created.length > 0) this.tab = 'created';
+          else if (this.started.length === 0 && this.finished.length > 0) this.tab = 'finished';
+        },
+        error: () => {
+          this.loading = false;
+        },
+      });
+  }
+
+  private loadPairings(id: string, round: number): void {
+    this.pairingsLoading = true;
+    this.tournamentService
+      .roundPairings(id, round)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (p) => {
+          this.pairings = p;
+          this.pairingsLoading = false;
+        },
+        error: () => {
+          this.pairingsLoading = false;
+        },
+      });
+  }
+}

src/app/pages/welcome/Auth Dialog.html

@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NowChess — Auth Dialog</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+        --neon: #ff45c8;
+        --neon-soft: rgba(255, 69, 200, 0.55);
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #06060d;
+        font-family: var(--sans);
+        color: #fff;
+        overflow: hidden;
+        min-height: 100vh;
+      }
+      button,
+      input {
+        font-family: var(--sans);
+      }
+      input {
+        color: #fff;
+      }
+      input:-webkit-autofill,
+      input:-webkit-autofill:hover,
+      input:-webkit-autofill:focus {
+        -webkit-text-fill-color: #fff;
+        -webkit-box-shadow: 0 0 0px 1000px rgba(8, 5, 20, 0) inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 69, 200, 0.3);
+      }
+
+      @keyframes scanline {
+        0% {
+          transform: translateY(-100%);
+        }
+        100% {
+          transform: translateY(100%);
+        }
+      }
+      @keyframes pulse-glow {
+        0%,
+        100% {
+          opacity: 0.85;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+      @keyframes dialog-in {
+        from {
+          opacity: 0;
+          transform: translate(-50%, -48%) scale(0.96);
+        }
+        to {
+          opacity: 1;
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+      @keyframes backdrop-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes shake {
+        0%,
+        100% {
+          transform: translateX(0);
+        }
+        20%,
+        60% {
+          transform: translateX(-4px);
+        }
+        40%,
+        80% {
+          transform: translateX(4px);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script
+      src="https://unpkg.com/react@18.3.1/umd/react.development.js"
+      integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"
+      integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"
+      integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"
+      crossorigin="anonymous"
+    ></script>
+
+    <script type="text/babel" src="tweaks-panel.jsx"></script>
+    <script type="text/babel" src="auth-dialog.jsx"></script>
+  </body>
+</html>

src/app/pages/welcome/welcome.component.css

@@ -49,8 +49,8 @@
 
 .cityscape-shell.sunset {
   --sky-1: #4d3279;
-  --sky-2: #5A5485;
-  --sky-3: #996C96;
+  --sky-2: #5a5485;
+  --sky-3: #996c96;
   --sky-4: #e85040;
   --sky-5: #f07020;
   --horizon: #ffaa30;
@@ -93,7 +93,15 @@
 .sky {
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 22%, var(--sky-3) 48%, var(--sky-4) 70%, var(--sky-5) 85%, var(--horizon) 100%);
+  background: linear-gradient(
+    180deg,
+    var(--sky-1) 0%,
+    var(--sky-2) 22%,
+    var(--sky-3) 48%,
+    var(--sky-4) 70%,
+    var(--sky-5) 85%,
+    var(--horizon) 100%
+  );
   transition: background 1.6s ease;
 }
 
@@ -133,7 +141,9 @@
   height: 52px;
   border-radius: 50%;
   background: radial-gradient(circle at 36% 34%, #fffbe8, #f5d060 60%, #c8a020);
-  box-shadow: 0 0 28px rgba(245, 210, 80, 0.55), 0 0 70px rgba(240, 190, 40, 0.25);
+  box-shadow:
+    0 0 28px rgba(245, 210, 80, 0.55),
+    0 0 70px rgba(240, 190, 40, 0.25);
   opacity: var(--moon-vis);
   transition: opacity 1.6s ease;
 }
@@ -147,7 +157,10 @@
   height: 76px;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 50%, #fffce0, #ffd020 40%, #ff9000);
-  box-shadow: 0 0 40px rgba(255, 200, 0, 0.85), 0 0 90px rgba(255, 150, 0, 0.45), 0 0 200px rgba(255, 80, 0, 0.2);
+  box-shadow:
+    0 0 40px rgba(255, 200, 0, 0.85),
+    0 0 90px rgba(255, 150, 0, 0.45),
+    0 0 200px rgba(255, 80, 0, 0.2);
   opacity: var(--sun-vis);
   transition: opacity 1.6s ease;
   z-index: 4;
@@ -247,8 +260,21 @@
   content: '';
   position: absolute;
   inset: 0;
-  background-image: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(120, 120, 200, 0.08) 14px, rgba(120, 120, 200, 0.08) 16px),
-    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(120, 120, 200, 0.08) 12px, rgba(120, 120, 200, 0.08) 14px);
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 14px,
+      rgba(120, 120, 200, 0.08) 14px,
+      rgba(120, 120, 200, 0.08) 16px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 12px,
+      rgba(120, 120, 200, 0.08) 12px,
+      rgba(120, 120, 200, 0.08) 14px
+    );
 }
 
 .main-layer {
@@ -311,7 +337,9 @@
   height: 9px;
   border-radius: 1px;
   background: var(--win-off);
-  transition: background 0.4s ease, box-shadow 0.4s ease;
+  transition:
+    background 0.4s ease,
+    box-shadow 0.4s ease;
 }
 
 .w.lc {
@@ -357,7 +385,10 @@
   gap: 6px;
   text-align: center;
   pointer-events: auto;
-  transition: border-color 1.6s ease, box-shadow 1.6s ease, background 1.6s ease;
+  transition:
+    border-color 1.6s ease,
+    box-shadow 1.6s ease,
+    background 1.6s ease;
 }
 
 .bb-tag {
@@ -398,7 +429,11 @@
   letter-spacing: 1px;
   cursor: pointer;
   box-shadow: var(--btn-glow);
-  transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease,
+    background 1.6s ease,
+    box-shadow 1.6s ease;
 }
 
 .bb-btn:hover:enabled {
@@ -419,11 +454,15 @@
   border: 1px solid var(--bb-border);
   padding: 2px 7px;
   border-radius: 2px;
-  text-shadow: 0 0 8px currentColor, 0 0 20px currentColor;
+  text-shadow:
+    0 0 8px currentColor,
+    0 0 20px currentColor;
   box-shadow: 0 0 6px currentColor;
   animation: nflicker 9s ease-in-out infinite;
   display: inline-block;
-  transition: color 1.6s ease, border-color 1.6s ease;
+  transition:
+    color 1.6s ease,
+    border-color 1.6s ease;
 }
 
 @keyframes nflicker {
@@ -462,7 +501,9 @@
   height: 8px;
   border-radius: 50%;
   background: #ff2222;
-  box-shadow: 0 0 10px #ff2222, 0 0 20px rgba(255, 0, 0, 0.4);
+  box-shadow:
+    0 0 10px #ff2222,
+    0 0 20px rgba(255, 0, 0, 0.4);
   animation: blink 1.6s step-start infinite;
 }
 
@@ -517,7 +558,9 @@
   color: rgba(255, 255, 255, 0.85);
   cursor: pointer;
   backdrop-filter: blur(12px);
-  transition: background 0.3s, transform 0.2s;
+  transition:
+    background 0.3s,
+    transform 0.2s;
 }
 
 .tgl:hover {
@@ -652,240 +695,6 @@
   font-weight: 600;
 }
 
-/* Speech Bubble Styles */
-.speech-bubble-container {
-  position: fixed;
-  top: 35%;
-  left: 55%;
-  transform: translate(-50%, -50%);
-  z-index: 500;
-  cursor: pointer;
-  animation: slideInBubble 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes slideInBubble {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.5);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-.speech-bubble {
-  background: linear-gradient(135deg, #B9DAD1 0%, #B9C2DA 100%);
-  border: 2px solid #8b1270;
-  border-radius: 20px;
-  padding: 16px 24px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 18px;
-  font-weight: bold;
-  color: #5A2C28;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
-              inset 0 1px 3px rgba(255, 255, 255, 0.3);
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.speech-bubble:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3),
-              inset 0 1px 3px rgba(255, 255, 255, 0.5);
-}
-
-.bubble-text {
-  margin: 0;
-}
-
-.bubble-tail {
-  position: absolute;
-  bottom: -12px;
-  left: 20px;
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 0px solid transparent;
-  border-top: 12px solid #B9DAD1;
-}
-
-/* Zoom Overlay and Window */
-.zoom-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.3s ease;
-  cursor: pointer;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.zoom-window-wrapper {
-  cursor: auto;
-  animation: zoomInWindow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes zoomInWindow {
-  0% {
-    transform: scale(0.1);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.zoom-window-frame {
-  background: #13072a;
-  border: 8px solid #f26ae2;
-  border-radius: 16px;
-  padding: 40px 20px 20px 20px;
-  box-shadow: 0 0 40px rgba(242, 106, 226, 0.6),
-              inset 0 0 20px rgba(242, 106, 226, 0.2);
-  max-width: 90vw;
-  max-height: 90vh;
-  position: relative;
-}
-
-.zoom-player-2 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.player-2-gif {
-  max-width: 100%;
-  max-height: 70vh;
-  width: auto;
-  height: auto;
-  display: block;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.player-2-gif:hover {
-  transform: scale(1.02);
-}
-
-.second-speech-bubble {
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: linear-gradient(135deg, #C19EF5 0%, #E1EAA9 100%);
-  border: 2px solid #BA6D4B;
-  border-radius: 20px;
-  padding: 12px 18px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 16px;
-  font-weight: bold;
-  color: #5A2C28;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
-              inset 0 1px 3px rgba(255, 255, 255, 0.3);
-  animation: popInBubble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  z-index: 10;
-}
-
-@keyframes popInBubble {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.3);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-}
-
-.second-speech-bubble .bubble-tail {
-  top: 100%;
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top: 12px solid #C19EF5;
-}
-
-/* Happy Meow Bubble */
-.happy-speech-bubble {
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: linear-gradient(135deg, #F3C8A0 0%, #BA6D4B 100%);
-  border: 2px solid #5A2C28;
-  border-radius: 20px;
-  padding: 12px 18px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 16px;
-  font-weight: bold;
-  color: #fff;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
-              inset 0 1px 3px rgba(255, 255, 255, 0.4),
-              0 0 20px rgba(243, 200, 160, 0.5);
-  animation: popInBubble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  z-index: 10;
-}
-
-.happy-speech-bubble .bubble-tail {
-  top: 100%;
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top: 12px solid #F3C8A0;
-}
-
-/* Meat Emoji */
-.meat-emoji {
-  position: fixed;
-  font-size: 48px;
-  cursor: grab;
-  user-select: none;
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  animation: meatAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-  transition: transform 0.1s ease;
-}
-
-.meat-emoji:active {
-  cursor: grabbing;
-  transform: scale(1.1);
-  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
-}
-
-@keyframes meatAppear {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @media (max-width: 900px) {
   .bwrap {
     transform: scale(0.9);

src/app/pages/welcome/welcome.component.html

@@ -1,5 +1,4 @@
 <div class="cityscape-shell" [class.sunset]="isSunsetMode">
-
   <div class="scene">
     <div class="sky">
       <div class="stars-layer">
@@ -20,258 +19,301 @@
     </div>
 
     <div class="main-layer">
-      <div class="bwrap" style="left:2.5%;width:16%;">
-        <div class="ant" style="height:38px;"></div>
-        <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
-          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
+      <div class="bwrap" style="left: 2.5%; width: 16%">
+        <div class="ant" style="height: 38px"></div>
+        <div class="bpart" style="width: 55%; margin: 0 auto; height: 7vh">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(3, 1fr); height: 100%; align-content: start"
+          >
             <div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
-          <div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
+        <div class="bpart" style="width: 80%; margin: 0 auto; height: 9vh">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(4, 1fr); align-content: start; height: 100%"
+          >
             <div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="height:36vh;">
+        <div class="bpart" style="height: 36vh">
           <div>
             <div class="bb">
               <div class="bb-tag">JOIN</div>
               <div class="bb-title">JOIN<br />GAME</div>
-              <button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
+              <button
+                type="button"
+                class="app-btn"
+                (click)="openJoinDialog()"
+                [disabled]="joiningGame"
+              >
                 {{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
               </button>
             </div>
           </div>
-          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
+          <div class="wins" style="grid-template-columns: repeat(5, 1fr)">
             <div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
           </div>
         </div>
-
-        <!-- Draggable Meat Emoji -->
-        @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
-          🍖
-        </div>
-        }
       </div>
 
-      <div class="bwrap" style="left:21%;width:15%;">
-        <div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
-          <div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
+      <div class="bwrap" style="left: 21%; width: 15%">
+        <div class="bpart" style="height: 5vh; width: 90%; margin: 0 auto">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(4, 1fr); height: 100%; align-content: start"
+          >
             <div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="height:44vh;">
-          <div style="padding:5px 5px 0;">
-            <div style="text-align:center;padding:4px 0 6px;">
+        <div class="bpart" style="height: 44vh">
+          <div style="padding: 5px 5px 0">
+            <div style="text-align: center; padding: 4px 0 6px">
               <span class="neon">OPEN 24/7</span>
             </div>
             <div class="bb">
               <div class="bb-tag">BOT</div>
               <div class="bb-title">PLAY WITH<br />A BOT</div>
-              <button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
+              <button
+                type="button"
+                class="app-btn"
+                (click)="openDifficultyDialog()"
+                [disabled]="creating"
+              >
                 {{ creating ? 'CREATING...' : 'GET STARTED →' }}
               </button>
             </div>
           </div>
-          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
+          <div class="wins" style="grid-template-columns: repeat(5, 1fr)">
             <div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
           </div>
         </div>
       </div>
 
-      <div class="bwrap" style="left:39%;width:20%;">
+      <div class="bwrap" style="left: 39%; width: 20%">
         <img class="playerone-gif" src="/assets/arabian-chess/player-one.gif" alt="Player One" />
-        <div style="display:flex;justify-content:center;gap:16px;margin-bottom:0;">
-          <div class="ant" style="height:65px;margin-top:-15px;"></div>
+        <div style="display: flex; justify-content: center; gap: 16px; margin-bottom: 0">
+          <div class="ant" style="height: 65px; margin-top: -15px"></div>
         </div>
-        <div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
-          <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
+        <div
+          class="bpart"
+          style="height: 6vh; width: 70%; margin: 0 auto; border-radius: 2px 2px 0 0"
+        >
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(5, 1fr); height: 100%; align-content: start"
+          >
             <div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="height:10vh;">
-          <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
+        <div class="bpart" style="height: 10vh">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(6, 1fr); align-content: start; height: 100%"
+          >
             <div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="height:48vh;">
-          <div style="padding:6px 6px 0;">
-            <div class="bb" style="padding:14px 14px 12px;">
+        <div class="bpart" style="height: 48vh">
+          <div style="padding: 6px 6px 0">
+            <div class="bb" style="padding: 14px 14px 12px">
               <div class="bb-tag">WELCOME</div>
-              <div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
+              <div class="bb-title" style="font-size: clamp(16px, 1.8vw, 26px)">
+                WELCOME TO<br />NOWCHESS
+              </div>
               <div class="bb-subtitle">Play your next move from the skyline.</div>
               <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'START NOW →' }}
               </button>
             </div>
           </div>
-          <div class="wins" style="grid-template-columns:repeat(7,1fr);">
+          <div class="wins" style="grid-template-columns: repeat(7, 1fr)">
             <div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
           </div>
         </div>
       </div>
 
-      <div class="bwrap" style="left:63%;width:18%;">
-        <div class="ant" style="height:30px;"></div>
-        <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
-          <div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
+      <div class="bwrap" style="left: 63%; width: 18%">
+        <div class="ant" style="height: 30px"></div>
+        <div class="bpart" style="height: 5vh; width: 110%; margin-left: -5%">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(6, 1fr); height: 100%; align-content: start"
+          >
             <div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
           </div>
         </div>
-        <div class="bpart" style="height:42vh;">
-          <div style="padding:5px 5px 0;">
-            <div style="text-align:center;padding:4px 0 6px;">
+        <div class="bpart" style="height: 42vh">
+          <div style="padding: 5px 5px 0">
+            <div style="text-align: center; padding: 4px 0 6px">
               <span class="neon">MORE</span>
             </div>
             <div class="bb">
               <div class="bb-tag">OPTIONS</div>
               <div class="bb-title">MORE<br />OPTIONS</div>
-              <button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
+              <button type="button" class="app-btn" (click)="openOptionsDialog()">
+                OPEN MENU →
+              </button>
             </div>
           </div>
-          <div class="wins" style="grid-template-columns:repeat(6,1fr);">
+          <div class="wins" style="grid-template-columns: repeat(6, 1fr)">
             <div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
           </div>
         </div>
       </div>
 
-      <div class="bwrap" style="left:83%;width:10%;">
-        <div class="bpart" style="height:30vh;">
-          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
+      <div class="bwrap" style="left: 83%; width: 10%">
+        <div class="bpart" style="height: 30vh">
+          <div
+            class="wins"
+            style="grid-template-columns: repeat(3, 1fr); height: 100%; align-content: start"
+          >
             <div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Speech Bubble -->
-    @if (showSpeechBubble) {
-    <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
-      <div class="speech-bubble">
-        <div class="bubble-text">{{ bubbleMessage }}</div>
-        <div class="bubble-tail"></div>
-      </div>
-    </div>
-    }
-
-    <!-- Zoomed Window View -->
-    @if (isZoomedIn) {
-    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
-      (mouseleave)="onMouseUp()">
-      <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
-        <div class="zoom-window-frame">
-          <div class="zoom-player-2">
-            <img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
-              (click)="$event.stopPropagation()" />
-            @if (showSecondSpeechBubble) {
-            <div class="second-speech-bubble">
-              <div class="bubble-text">Feed me! 🍖</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-            @if (showHappyBubble) {
-            <div class="happy-speech-bubble">
-              <div class="bubble-text">Happy meow! 😸</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-          </div>
-        </div>
-
-        <!-- Draggable Meat Emoji -->
-        @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
-          🍖
-        </div>
-        }
-      </div>
-    </div>
-    }
-
     <div class="haze"></div>
     <div class="ground"></div>
   </div>
 
   @if (showDifficultyDialog) {
-  <div class="dialog-overlay" (click)="closeDifficultyDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">SELECT DIFFICULTY</div>
-      <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
-        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
-        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
+    <div class="dialog-overlay" (click)="closeDifficultyDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">SELECT DIFFICULTY</div>
+        <div class="dialog-actions">
+          <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">
+            EASY
+          </button>
+          <button
+            type="button"
+            class="app-btn"
+            (click)="startVsBot('medium')"
+            [disabled]="creating"
+          >
+            MEDIUM
+          </button>
+          <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">
+            HARD
+          </button>
+        </div>
       </div>
     </div>
-  </div>
   }
 
   @if (showOptionsDialog) {
-  <div class="dialog-overlay" (click)="closeOptionsDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">MORE OPTIONS</div>
-      <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
+    <div class="dialog-overlay" (click)="closeOptionsDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">MORE OPTIONS</div>
+        <div class="dialog-actions">
+          <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
+        </div>
       </div>
     </div>
-  </div>
   }
 
   @if (showJoinDialog) {
-  <div class="dialog-overlay" (click)="closeJoinDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">JOIN GAME</div>
-      <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
-        [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
-      <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitJoinGame()"
-          [disabled]="joiningGame || !gameIdInput.trim()">
-          {{ joiningGame ? 'JOINING...' : 'JOIN' }}
-        </button>
-        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
+    <div class="dialog-overlay" (click)="closeJoinDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">JOIN GAME</div>
+        <input
+          type="text"
+          class="dialog-input"
+          [(ngModel)]="gameIdInput"
+          placeholder="Paste game ID here"
+          [disabled]="joiningGame"
+          (keyup.enter)="submitJoinGame()"
+        />
+        <div class="dialog-actions">
+          <button
+            type="button"
+            class="app-btn"
+            (click)="submitJoinGame()"
+            [disabled]="joiningGame || !gameIdInput.trim()"
+          >
+            {{ joiningGame ? 'JOINING...' : 'JOIN' }}
+          </button>
+          <button
+            type="button"
+            class="app-btn"
+            (click)="closeJoinDialog()"
+            [disabled]="joiningGame"
+          >
+            CANCEL
+          </button>
+        </div>
       </div>
     </div>
-  </div>
   }
 
   @if (showImportDialog) {
-  <div class="dialog-overlay" (click)="closeImportDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">IMPORT GAME</div>
-      <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
-        <label class="import-mode-option">
-          <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
-            [disabled]="importing" />
-          <span>FEN</span>
-        </label>
-        <label class="import-mode-option">
-          <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
-            [disabled]="importing" />
-          <span>PGN</span>
-        </label>
-      </div>
-      <textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
-        [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
-        rows="5"></textarea>
-      <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
-          {{ importing ? 'IMPORTING...' : 'IMPORT' }}
-        </button>
-        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
+    <div class="dialog-overlay" (click)="closeImportDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">IMPORT GAME</div>
+        <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
+          <label class="import-mode-option">
+            <input
+              type="radio"
+              name="importMode"
+              [checked]="importMode === 'fen'"
+              (change)="setImportMode('fen')"
+              [disabled]="importing"
+            />
+            <span>FEN</span>
+          </label>
+          <label class="import-mode-option">
+            <input
+              type="radio"
+              name="importMode"
+              [checked]="importMode === 'pgn'"
+              (change)="setImportMode('pgn')"
+              [disabled]="importing"
+            />
+            <span>PGN</span>
+          </label>
+        </div>
+        <textarea
+          class="dialog-input dialog-textarea"
+          [(ngModel)]="importText"
+          [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
+          [disabled]="importing"
+          rows="5"
+        ></textarea>
+        <div class="dialog-actions">
+          <button
+            type="button"
+            class="app-btn"
+            (click)="submitImportGame()"
+            [disabled]="importing || !importText.trim()"
+          >
+            {{ importing ? 'IMPORTING...' : 'IMPORT' }}
+          </button>
+          <button
+            type="button"
+            class="app-btn"
+            (click)="closeImportDialog()"
+            [disabled]="importing"
+          >
+            CANCEL
+          </button>
+        </div>
       </div>
     </div>
-  </div>
   }
 
   @if (showChallengeDialog) {
-  <div class="dialog-overlay" (click)="closeChallengeDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+    <div class="dialog-overlay" (click)="closeChallengeDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <app-challenge-create-dialog
+          (closeChallengeDialog)="closeChallengeDialog()"
+        ></app-challenge-create-dialog>
+      </div>
     </div>
-  </div>
   }
 
   @if (errorMessage) {
-  <p class="error-banner">{{ errorMessage }}</p>
+    <p class="error-banner">{{ errorMessage }}</p>
   }
-</div>
+</div>

src/app/pages/welcome/welcome.component.ts

@@ -50,7 +50,7 @@ interface WindowCell {
   standalone: true,
   imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
   templateUrl: './welcome.component.html',
-  styleUrls: ['./welcome.component.css']
+  styleUrls: ['./welcome.component.css'],
 })
 export class WelcomeComponent implements OnInit, OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
@@ -79,28 +79,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   private authDialogState: 'login' | 'register' | null = null;
   private pendingAction: (() => void) | null = null;
 
-  // Speech bubble and zoom features
-  showSpeechBubble = false;
-  isZoomedIn = false;
-  showSecondSpeechBubble = false;
-  showHappyBubble = false;
-  showMeatEmoji = false;
-  bubbleMessage = 'meow';
-
-  // Meat emoji drag state
-  meatX = 0;
-  meatY = 0;
-  isDraggingMeat = false;
-  meatDragOffsetX = 0;
-  meatDragOffsetY = 0;
-
   stars: Star[] = [];
   bgBuildings: BackgroundBuilding[] = [];
   windows: Record<string, WindowCell[]> = {};
 
   private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
-  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
-  private zoomTimeoutId: ReturnType<typeof setTimeout> | undefined;
 
   private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
   private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
@@ -110,9 +93,8 @@ export class WelcomeComponent implements OnInit, OnDestroy {
 
   constructor(
     private readonly router: Router,
-    private readonly gameApi: GameApiService
-  ) {
-  }
+    private readonly gameApi: GameApiService,
+  ) {}
 
   ngOnInit(): void {
     this.themeService.darkMode$
@@ -122,12 +104,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
         this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
       });
 
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-        this.maybeRunPendingAction();
-      });
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
+      this.currentUser = user;
+      this.maybeRunPendingAction();
+    });
 
     this.authDialogService.dialogState$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -140,25 +120,14 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.generateBackgroundBuildings();
     this.generateWindowsForAllBuildings();
     this.startWindowFlicker();
-
-    // Show speech bubble after 5 seconds
-    this.speechBubbleTimeoutId = setTimeout(() => {
-      this.showSpeechBubble = true;
-    }, 5000);
   }
 
   ngOnDestroy(): void {
     this.stopWindowFlicker();
-    if (this.speechBubbleTimeoutId) {
-      clearTimeout(this.speechBubbleTimeoutId);
-    }
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
   }
 
   openDifficultyDialog(): void {
-    if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
+    if (!this.requireAuth(() => (this.showDifficultyDialog = true))) {
       return;
     }
 
@@ -182,7 +151,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openJoinDialog(): void {
-    if (!this.requireAuth(() => this.showJoinDialog = true)) {
+    if (!this.requireAuth(() => (this.showJoinDialog = true))) {
       return;
     }
 
@@ -200,7 +169,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openImportDialog(): void {
-    if (!this.requireAuth(() => this.showImportDialog = true)) {
+    if (!this.requireAuth(() => (this.showImportDialog = true))) {
       return;
     }
 
@@ -265,84 +234,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.performSubmitImportGame();
   }
 
-  onSpeechBubbleClick(): void {
-    this.showSpeechBubble = false;
-    this.isZoomedIn = true;
-    this.bubbleMessage = 'meow';
-    this.showMeatEmoji = true;
-    this.showHappyBubble = false;
-    this.showSecondSpeechBubble = true;
-
-    // Reset meat position
-    this.meatX = window.innerWidth / 2 - 100;
-    this.meatY = window.innerHeight / 2 + 150;
-  }
-
-  onZoomedViewClick(): void {
-    this.isZoomedIn = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = false;
-    this.showMeatEmoji = false;
-    this.bubbleMessage = 'meow';
-
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
-  }
-
-  onMeatMouseDown(event: MouseEvent): void {
-    this.isDraggingMeat = true;
-    const rect = (event.target as HTMLElement).getBoundingClientRect();
-    this.meatDragOffsetX = event.clientX - rect.left;
-    this.meatDragOffsetY = event.clientY - rect.top;
-  }
-
-  onMouseMove(event: MouseEvent): void {
-    if (!this.isDraggingMeat) {
-      return;
-    }
-
-    this.meatX = event.clientX - this.meatDragOffsetX;
-    this.meatY = event.clientY - this.meatDragOffsetY;
-
-    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
-    if (!gifElement) {
-      return;
-    }
-
-    const gifRect = gifElement.getBoundingClientRect();
-    const gifCenterX = gifRect.left + gifRect.width / 2;
-    const gifCenterY = gifRect.top + gifRect.height / 2;
-
-    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
-    if (!meatElement) {
-      return;
-    }
-
-    const meatRect = meatElement.getBoundingClientRect();
-    const meatCenterX = meatRect.left + meatRect.width / 2;
-    const meatCenterY = meatRect.top + meatRect.height / 2;
-
-    const distance = Math.sqrt(
-      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
-    );
-
-    if (distance < 50) {
-      this.onMeatFed();
-    }
-  }
-
-  onMouseUp(): void {
-    this.isDraggingMeat = false;
-  }
-
-  onMeatFed(): void {
-    this.showMeatEmoji = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = true;
-    this.isDraggingMeat = false;
-  }
-
   private requireAuth(action: () => void): boolean {
     if (this.authService.isLoggedIn()) {
       return true;
@@ -363,7 +254,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     action();
   }
 
-
   private performStartVsBot(difficulty: Difficulty): void {
     if (this.creating) {
       return;
@@ -379,12 +269,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       .subscribe({
         next: (game) => {
           void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+            state: { theme: this.isSunsetMode ? 'light' : 'dark' },
           });
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
-        }
+        },
       });
   }
 
@@ -404,12 +294,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
         next: (game) => {
           this.closeJoinDialog();
           void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+            state: { theme: this.isSunsetMode ? 'light' : 'dark' },
           });
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
-        }
+        },
       });
   }
 
@@ -423,19 +313,22 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.importing = true;
 
     const importRequest =
-      this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
+      this.importMode === 'fen'
+        ? this.gameApi.importFen(trimmedImport)
+        : this.gameApi.importPgn(trimmedImport);
 
     importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
       next: (game) => {
         this.closeImportDialog();
         void this.router.navigate(['/game', game.gameId], {
-          state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+          state: { theme: this.isSunsetMode ? 'light' : 'dark' },
         });
       },
       error: (error) => {
-        const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
+        const defaultMessage =
+          this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
         this.errorMessage = getErrorMessage(error, defaultMessage);
-      }
+      },
     });
   }
 
@@ -457,8 +350,8 @@ export class WelcomeComponent implements OnInit, OnDestroy {
           left: `${Math.random() * 100}%`,
           top: `${Math.random() * 62}%`,
           '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
-          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
-        }
+          '--dl': `${-(Math.random() * 6).toFixed(1)}s`,
+        },
       };
     });
   }
@@ -487,11 +380,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       { l: '85.5%', w: '9%', h: '32vh' },
       { l: '88%', w: '5%', h: '20vh' },
       { l: '91%', w: '3%', h: '16vh' }, // New building
-      { l: '94%', w: '6%', h: '27vh' }
+      { l: '94%', w: '6%', h: '27vh' },
     ];
 
     this.bgBuildings = specs.map((spec) => ({
-      style: { left: spec.l, width: spec.w, height: spec.h }
+      style: { left: spec.l, width: spec.w, height: spec.h },
     }));
   }
 
@@ -507,7 +400,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       wC3: this.generateWindows(7, 24, 0.6),
       wD1: this.generateWindows(6, 3, 0.6),
       wD2: this.generateWindows(6, 20, 0.5),
-      wE1: this.generateWindows(3, 16, 0.45)
+      wE1: this.generateWindows(3, 16, 0.45),
     };
   }
 
@@ -522,12 +415,14 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     let color: string | undefined;
     let glowColor: string | undefined;
 
-    if (random < litRate * 0.58) { // Cool color
+    if (random < litRate * 0.58) {
+      // Cool color
       state = 'on';
       const coolIndex = Math.floor(Math.random() * this.coolColors.length);
       color = this.coolColors[coolIndex];
       glowColor = this.coolGlowColors[coolIndex];
-    } else if (random < litRate) { // Warm color
+    } else if (random < litRate) {
+      // Warm color
       state = 'on';
       const warmIndex = Math.floor(Math.random() * this.warmColors.length);
       color = this.warmColors[warmIndex];
@@ -538,7 +433,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       return { state, style: {} };
     }
 
-    const baseDuration = (color && this.coolColors.includes(color)) ? 3 : 4;
+    const baseDuration = color && this.coolColors.includes(color) ? 3 : 4;
     return {
       state,
       color,
@@ -547,8 +442,8 @@ export class WelcomeComponent implements OnInit, OnDestroy {
         'background-color': color || '',
         'box-shadow': glowColor ? `0 0 6px ${glowColor}, 0 0 16px ${glowColor}35` : '',
         '--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
-        '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
-      }
+        '--wdl': `${-(Math.random() * 8).toFixed(1)}s`,
+      },
     };
   }
 
@@ -590,9 +485,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
         target.glowColor = glowColors[index];
         target.style = {
           'background-color': target.color || '',
-          'box-shadow': target.glowColor ? `0 0 6px ${target.glowColor}, 0 0 16px ${target.glowColor}35` : '',
+          'box-shadow': target.glowColor
+            ? `0 0 6px ${target.glowColor}, 0 0 16px ${target.glowColor}35`
+            : '',
           '--wd': `${(Math.random() * 4 + (isCool ? 3 : 4)).toFixed(1)}s`,
-          '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
+          '--wdl': `${-(Math.random() * 8).toFixed(1)}s`,
         };
       } else {
         target.state = 'off';

src/app/services/analysis.service.ts

@@ -0,0 +1,102 @@
+import { Injectable, inject } from '@angular/core';
+import { Observable, forkJoin, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { GameApiService } from './game-api.service';
+import { AnnotatedMove, AnalysisResponse, MoveQuality } from '../models/analysis.models';
+
+const DEFAULT_DEPTH = 14;
+
+@Injectable({ providedIn: 'root' })
+export class AnalysisService {
+  private readonly gameApi = inject(GameApiService);
+
+  analyzePosition(fen: string, depth = DEFAULT_DEPTH): Observable<AnalysisResponse> {
+    return this.gameApi.analyzePosition({ fen, depth });
+  }
+
+  /**
+   * Analyse a sequence of FEN positions (one per ply) and return annotated moves.
+   * fenHistory[0] is the starting position; fenHistory[n] is reached after move san[n-1].
+   */
+  analyzeGame(
+    sans: string[],
+    fenHistory: string[],
+    depth = DEFAULT_DEPTH,
+  ): Observable<AnnotatedMove[]> {
+    if (sans.length === 0 || fenHistory.length < 2) {
+      return of([]);
+    }
+
+    const requests = fenHistory.map((fen) => this.gameApi.analyzePosition({ fen, depth }));
+
+    return forkJoin(requests).pipe(
+      map((results) => this.buildAnnotations(sans, fenHistory, results)),
+    );
+  }
+
+  private buildAnnotations(
+    sans: string[],
+    fenHistory: string[],
+    results: AnalysisResponse[],
+  ): AnnotatedMove[] {
+    return sans.map((san, i) => {
+      const evalBefore = results[i]?.eval ?? null;
+      const winChanceBefore = results[i]?.winChance ?? null;
+      const evalAfter = results[i + 1]?.eval ?? null;
+      const winChanceAfter = results[i + 1]?.winChance ?? null;
+      const bestMove = results[i]?.bestMove ?? null;
+
+      const quality = this.classifyQuality(
+        evalBefore,
+        evalAfter,
+        winChanceBefore,
+        winChanceAfter,
+        san,
+        bestMove,
+      );
+
+      return {
+        san,
+        fen: fenHistory[i + 1] ?? fenHistory[i],
+        evalBefore,
+        evalAfter,
+        quality,
+        bestMove,
+        winChanceBefore,
+        winChanceAfter,
+      };
+    });
+  }
+
+  /**
+   * Classify move quality based on win-chance delta.
+   * Win-chance is from the engine's perspective (side to move before the move).
+   * After the move the side has flipped, so we invert the after value.
+   */
+  private classifyQuality(
+    _evalBefore: number | null,
+    _evalAfter: number | null,
+    winChanceBefore: number | null,
+    winChanceAfter: number | null,
+    san: string,
+    bestMove: string | null,
+  ): MoveQuality | null {
+    if (winChanceBefore === null || winChanceAfter === null) return null;
+
+    // The engine expresses win chance for the mover. After our move the mover
+    // has switched, so the opponent's win chance = winChanceAfter. Our remaining
+    // winning chance from our own perspective is 1 - winChanceAfter.
+    const wcAfterOurPerspective = 1 - winChanceAfter;
+    const delta = wcAfterOurPerspective - winChanceBefore; // negative = we lost win chance
+
+    if (bestMove && san === bestMove) {
+      if (delta >= -0.01) return 'brilliant';
+      return 'best';
+    }
+
+    if (delta >= -0.02) return 'good';
+    if (delta >= -0.05) return 'inaccuracy';
+    if (delta >= -0.1) return 'mistake';
+    return 'blunder';
+  }
+}

src/app/services/auth-dialog.service.ts

@@ -5,19 +5,19 @@ export type AuthDialogState = 'login' | 'register' | null;
 
 @Injectable({ providedIn: 'root' })
 export class AuthDialogService {
-    private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
+  private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
 
-    readonly dialogState$ = this.dialogStateSubject.asObservable();
+  readonly dialogState$ = this.dialogStateSubject.asObservable();
 
-    openLogin(): void {
-        this.dialogStateSubject.next('login');
-    }
+  openLogin(): void {
+    this.dialogStateSubject.next('login');
+  }
 
-    openRegister(): void {
-        this.dialogStateSubject.next('register');
-    }
+  openRegister(): void {
+    this.dialogStateSubject.next('register');
+  }
 
-    close(): void {
-        this.dialogStateSubject.next(null);
-    }
-}
+  close(): void {
+    this.dialogStateSubject.next(null);
+  }
+}

src/app/services/auth.interceptor.ts

@@ -8,13 +8,14 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
     req.url.includes('/api/account/bots') ||
     req.url.includes('/api/account/official-bots') ||
     req.url.includes('/api/board/game') ||
-    req.url.includes('/api/challenge');
+    req.url.includes('/api/challenge') ||
+    req.url.includes('/api/tournament');
 
-  if (token && isProtectedEndpoint) {
+  if (token && isProtectedEndpoint && !req.headers.has('Authorization')) {
     req = req.clone({
       setHeaders: {
-        Authorization: `Bearer ${token}`
-      }
+        Authorization: `Bearer ${token}`,
+      },
     });
   }
 

src/app/services/auth.service.ts

@@ -1,9 +1,15 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, switchMap, tap } from 'rxjs/operators';
 import { environment } from '../../environments/environment';
-import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
+import {
+  LoginRequest,
+  RegisterRequest,
+  RegisterResponse,
+  LoginResponse,
+  CurrentUser,
+} from '../models/auth.models';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
@@ -22,15 +28,15 @@ export class AuthService {
     return this.http
       .post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
         username,
-        password
+        password,
       })
       .pipe(
         tap((response) => {
-          localStorage.setItem('token', response.token);
+          localStorage.setItem('token', response.accessToken); //GRRRRRRRRRR
+          localStorage.setItem('refreshToken', response.refreshToken);
           localStorage.setItem('username', username);
-          // After login, fetch current user info
           this.getCurrentUser().subscribe();
-        })
+        }),
       );
   }
 
@@ -39,20 +45,9 @@ export class AuthService {
       .post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
         username,
         password,
-        email
+        email,
       })
-      .pipe(
-        tap((response) => {
-          localStorage.setItem('username', response.username);
-          localStorage.setItem('userId', response.id);
-          this.currentUserSubject.next({
-            id: response.id,
-            username: response.username,
-            rating: response.rating,
-            createdAt: response.createdAt
-          });
-        })
-      );
+      .pipe(switchMap((response) => this.login(username, password).pipe(map(() => response))));
   }
 
   getCurrentUser(): Observable<CurrentUser> {
@@ -61,12 +56,13 @@ export class AuthService {
         localStorage.setItem('username', user.username);
         localStorage.setItem('userId', user.id);
         this.currentUserSubject.next(user);
-      })
+      }),
     );
   }
 
   logout(): void {
     localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
     localStorage.removeItem('username');
     localStorage.removeItem('userId');
     this.currentUserSubject.next(null);
@@ -86,7 +82,7 @@ export class AuthService {
         error: () => {
           // Token is invalid, clear it
           this.logout();
-        }
+        },
       });
     }
   }

src/app/services/board-selection.service.ts

@@ -21,7 +21,7 @@ export class BoardSelectionService {
     state: GameState | null,
     currentSelection: BoardSelection,
     onMovesLoaded: (moves: LegalMove[]) => void,
-    onError: (error: string) => void
+    onError: (error: string) => void,
   ): BoardSelection {
     if (!state) {
       return currentSelection;
@@ -52,7 +52,7 @@ export class BoardSelectionService {
         },
         error: () => {
           onError('Could not load legal moves for selected square.');
-        }
+        },
       });
 
     return { selectedSquare: square, highlightedSquares: [], selectedSquareMoves: [] };

src/app/services/bot-move.service.ts

@@ -35,7 +35,7 @@ export class BotMoveService {
     game: GameFull | null,
     state: GameState | null,
     onSuccess: (updatedState: GameState) => void,
-    onError: (error: string) => void
+    onError: (error: string) => void,
   ): void {
     if (!this.isPlayingAgainstBot(game) || !this.isCurrentPlayerBot(game, state) || !state) {
       return;
@@ -44,10 +44,7 @@ export class BotMoveService {
     this.botMoveSubscription?.unsubscribe();
     this.botMoveSubscription = this.gameApi
       .getLegalMoves(gameId)
-      .pipe(
-        delay(1000),
-        takeUntilDestroyed(this.destroyRef)
-      )
+      .pipe(delay(1000), takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (response) => {
           if (response.moves.length === 0) {
@@ -63,12 +60,12 @@ export class BotMoveService {
               },
               error: (error) => {
                 onError(getErrorMessage(error, 'Bot move failed.'));
-              }
+              },
             });
         },
         error: () => {
           onError('Could not get legal moves for bot move.');
-        }
+        },
       });
   }
 

src/app/services/bot.service.ts

@@ -0,0 +1,28 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, map } from 'rxjs';
+import { Bot, BotWithToken } from '../models/bot.models';
+
+@Injectable({ providedIn: 'root' })
+export class BotService {
+  private readonly http = inject(HttpClient);
+  private readonly base = '/api/account/bots';
+
+  list(): Observable<Bot[]> {
+    return this.http.get<Bot[]>(this.base);
+  }
+
+  create(name: string): Observable<BotWithToken> {
+    return this.http.post<BotWithToken>(this.base, { name });
+  }
+
+  rotateToken(botId: string): Observable<string> {
+    return this.http
+      .post<{ token: string }>(`${this.base}/${botId}/rotate-token`, null)
+      .pipe(map((r) => r.token));
+  }
+
+  delete(botId: string): Observable<void> {
+    return this.http.delete<void>(`${this.base}/${botId}`);
+  }
+}