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,52 +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 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))
+- 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-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))
+- 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))
+- 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))
+- 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 ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
-* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
+- GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
-* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
+- 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 .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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))

angular.json

@@ -18,9 +18,7 @@
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
-            "polyfills": [
+            "polyfills": ["zone.js"],
-              "zone.js"
-            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
@@ -38,9 +36,7 @@
                 "output": "/assets/ChessAssets"
               }
             ],
-            "styles": [
+            "styles": ["src/styles.css"]
-              "src/styles.css"
-            ]
           },
           "configurations": {
             "production": {
@@ -106,10 +102,7 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": [
+            "polyfills": ["zone.js", "zone.js/testing"],
-              "zone.js",
-              "zone.js/testing"
-            ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               {
@@ -127,9 +120,7 @@
                 "output": "/assets/ChessAssets"
               }
             ],
-            "styles": [
+            "styles": ["src/styles.css"]
-              "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,9 @@
 {
+  "/api/analysis": {
+    "target": "http://localhost:8087",
+    "secure": false,
+    "changeOrigin": true
+  },
   "/api/tournament": {
     "target": "http://localhost:8089",
     "secure": false,

public/env.template.js

@@ -1,4 +1,4 @@
 window.__RUNTIME_CONFIG__ = {
-  API_URL: "${API_URL}",
+  API_URL: '${API_URL}',
-  WEBSOCKET_URL: "${WEBSOCKET_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 />
+<app-toolbar /> <router-outlet />
-<router-outlet />

src/app/app.routes.ts

@@ -6,6 +6,7 @@ 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 },
@@ -14,6 +15,7 @@ export const routes: Routes = [
   { 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

@@ -27,7 +27,10 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
 }
 
 .btn:hover:not(:disabled) {

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

@@ -1,26 +1,53 @@
 <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">
+    <svg
-      <path d="M21 7v6h-6"/>
+      width="12"
-      <path d="M3 17a9 9 0 0 0 15.5-6"/>
+      height="12"
-      <path d="M3 7a9 9 0 0 1 15.5 6"/>
+      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">
+    <svg
-      <path d="M5 12h14"/>
+      width="12"
-      <polyline points="12 5 19 12 12 19"/>
+      height="12"
-      <polyline points="12 19 5 12 12 5"/>
+      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">
+    <svg
-      <path d="M4 4l16 16"/>
+      width="12"
-      <path d="M4 20l16-16"/>
+      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>

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

@@ -5,7 +5,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './board-actions-bar.component.html',
-  styleUrl: './board-actions-bar.component.css'
+  styleUrl: './board-actions-bar.component.css',
 })
 export class BoardActionsBarComponent {
   @Input() undoAvailable = false;

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,91 +1,117 @@
 <div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
-    <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
+  <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
-        <div class="dialog-header">
+    <div class="dialog-header">
-            <h2>Create Challenge</h2>
+      <h2>Create Challenge</h2>
-            <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
+      <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" 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>
+
+    <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;
+  label: string;
-    limitSeconds: number;
+  limitSeconds: number;
-    incrementSeconds: number;
+  incrementSeconds: number;
 }
 
 @Component({
-    selector: 'app-challenge-create-dialog',
+  selector: 'app-challenge-create-dialog',
-    standalone: true,
+  standalone: true,
-    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
-    templateUrl: './challenge-create-dialog.component.html',
+  templateUrl: './challenge-create-dialog.component.html',
-    styleUrls: ['./challenge-create-dialog.component.css']
+  styleUrls: ['./challenge-create-dialog.component.css'],
 })
 export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
-    private readonly challengeService = inject(ChallengeService);
+  private readonly challengeService = inject(ChallengeService);
-    private readonly router = inject(Router);
+  private readonly router = inject(Router);
-    private readonly fb = inject(FormBuilder);
+  private readonly fb = inject(FormBuilder);
-    private readonly destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
 
-    @Output() closeChallengeDialog = new EventEmitter<void>();
+  @Output() closeChallengeDialog = new EventEmitter<void>();
 
-    form!: FormGroup;
+  form!: FormGroup;
-    loading = false;
+  loading = false;
-    errorMessage = '';
+  errorMessage = '';
-    selectedTimeMode: TimeMode = 'rapid';
+  selectedTimeMode: TimeMode = 'rapid';
 
-    timePresets: Record<TimeMode, TimePreset[]> = {
+  timePresets: Record<TimeMode, TimePreset[]> = {
-        blitz: [
+    blitz: [
-            { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
+      { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
-            { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
+      { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
-            { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
+      { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
-            { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
+      { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
-            { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
+      { label: '5+0', limitSeconds: 300, incrementSeconds: 0 },
-        ],
+    ],
-        rapid: [
+    rapid: [
-            { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
+      { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
-            { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
+      { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
-            { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
+      { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
-            { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
+      { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 },
-        ],
+    ],
-        classical: [
+    classical: [
-            { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
+      { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
-            { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
+      { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
-            { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
+      { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
-            { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
+      { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 },
-        ],
+    ],
-        unlimited: []
+    unlimited: [],
-    };
+  };
 
-    ttlOptions = [
+  ttlOptions = [
-        { label: '5 minutes', seconds: 300 },
+    { label: '5 minutes', seconds: 300 },
-        { label: '1 hour', seconds: 3600 },
+    { label: '1 hour', seconds: 3600 },
-        { label: '1 day', seconds: 86400 },
+    { label: '1 day', seconds: 86400 },
-        { label: 'No expiry', seconds: 0 }
+    { label: 'No expiry', seconds: 0 },
-    ];
+  ];
 
-    ngOnInit(): void {
+  ngOnInit(): void {
-        this.initializeForm();
+    this.initializeForm();
-    }
+  }
 
-    ngOnDestroy(): void {
+  ngOnDestroy(): void {}
-    }
 
-    private initializeForm(): void {
+  private initializeForm(): void {
-        this.form = this.fb.group({
+    this.form = this.fb.group({
-            targetUsername: ['', [Validators.required, Validators.minLength(1)]],
+      targetUsername: ['', [Validators.required, Validators.minLength(1)]],
-            color: ['random', Validators.required],
+      color: ['random', Validators.required],
-            timeMode: ['rapid'],
+      timeMode: ['rapid'],
-            limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
+      limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
-            incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
+      incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
-            ttlSeconds: [3600, Validators.required]
+      ttlSeconds: [3600, Validators.required],
-        });
+    });
 
-        this.form.get('timeMode')?.valueChanges
+    this.form
-            .pipe(takeUntilDestroyed(this.destroyRef))
+      .get('timeMode')
-            .subscribe((mode: unknown) => {
+      ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
-                const timeMode = mode as TimeMode;
+      .subscribe((mode: unknown) => {
-                this.selectedTimeMode = timeMode;
+        const timeMode = mode as TimeMode;
-                if (timeMode !== 'unlimited') {
+        this.selectedTimeMode = timeMode;
-                    const firstPreset = this.timePresets[timeMode][0];
+        if (timeMode !== 'unlimited') {
-                    if (firstPreset) {
+          const firstPreset = this.timePresets[timeMode][0];
-                        this.form.patchValue({
+          if (firstPreset) {
-                            limitMinutes: firstPreset.limitSeconds / 60,
+            this.form.patchValue({
-                            incrementSeconds: firstPreset.incrementSeconds
+              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();
+  selectPreset(preset: TimePreset): void {
-        if (!targetUsername) {
+    this.form.patchValue({
-            this.errorMessage = 'Please enter a valid username';
+      limitMinutes: preset.limitSeconds / 60,
-            return;
+      incrementSeconds: preset.incrementSeconds,
-        }
+    });
+  }
 
-        this.errorMessage = '';
+  getAvailablePresets(): TimePreset[] {
-        this.loading = true;
+    return this.timePresets[this.selectedTimeMode] || [];
-        this.form.disable();
+  }
 
-        const limitSeconds = Math.round((this.form.getRawValue().limitMinutes || 0) * 60);
+  submit(): void {
-        const { incrementSeconds, ttlSeconds, color: rawColor } = this.form.getRawValue();
+    if (this.form.invalid || this.loading) {
-        const color = (rawColor || 'random') as PlayerColor;
+      return;
-
-        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 {
+    const targetUsername = this.form.get('targetUsername')?.value?.trim();
-        this.form.reset();
+    if (!targetUsername) {
-        this.closeChallengeDialog.emit();
+      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-header">
-        <div class="notification-title">
+    <div class="notification-title">
-            <span class="badge">CHALLENGE</span>
+      <span class="badge">CHALLENGE</span>
-            <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
+      <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
-        </div>
+    </div>
-        <button type="button" class="close-btn" (click)="onClose()"
+    <button
-            [disabled]="acceptingChallenge || decliningChallenge">
+      type="button"
-            ×
+      class="close-btn"
-        </button>
+      (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="expiration">
-        <div class="time-control">
+      <span class="label">{{ getExpirationInfo() }}</span>
-            <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>
+
+    <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

@@ -7,102 +7,104 @@ import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
 
 @Component({
-    selector: 'app-challenge-notification',
+  selector: 'app-challenge-notification',
-    standalone: true,
+  standalone: true,
-    imports: [CommonModule],
+  imports: [CommonModule],
-    templateUrl: './challenge-notification.component.html',
+  templateUrl: './challenge-notification.component.html',
-    styleUrls: ['./challenge-notification.component.css']
+  styleUrls: ['./challenge-notification.component.css'],
 })
 export class ChallengeNotificationComponent {
-    @Input() challenge!: Challenge;
+  @Input() challenge!: Challenge;
-    @Output() accept = new EventEmitter<Challenge>();
+  @Output() accept = new EventEmitter<Challenge>();
-    @Output() decline = new EventEmitter<Challenge>();
+  @Output() decline = new EventEmitter<Challenge>();
-    @Output() close = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
 
-    private readonly challengeService = inject(ChallengeService);
+  private readonly challengeService = inject(ChallengeService);
-    private readonly router = inject(Router);
+  private readonly router = inject(Router);
 
-    acceptingChallenge = false;
+  acceptingChallenge = false;
-    decliningChallenge = false;
+  decliningChallenge = false;
-    errorMessage = '';
+  errorMessage = '';
 
-    onAccept(): void {
+  onAccept(): void {
-        if (this.acceptingChallenge || this.decliningChallenge) {
+    if (this.acceptingChallenge || this.decliningChallenge) {
-            return;
+      return;
-        }
-
-        this.acceptingChallenge = 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');
-                }
-            });
     }
 
-    onDecline(): void {
+    this.acceptingChallenge = true;
-        if (this.acceptingChallenge || this.decliningChallenge) {
+    this.errorMessage = '';
-            return;
-        }
 
-        this.decliningChallenge = true;
+    this.challengeService
-        this.errorMessage = '';
+      .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: 'generic' })
+  onDecline(): void {
-            .pipe(finalize(() => (this.decliningChallenge = false)))
+    if (this.acceptingChallenge || this.decliningChallenge) {
-            .subscribe({
+      return;
-                next: () => {
-                    this.decline.emit(this.challenge);
-                },
-                error: (error) => {
-                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
-                }
-            });
     }
 
-    onClose(): void {
+    this.decliningChallenge = true;
-        this.close.emit();
+    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 minutes = Math.floor(diffMs / 60000);
-        const { limit, increment } = this.challenge.timeControl;
+    if (minutes > 60) {
-        if (!limit || !increment) {
+      const hours = Math.floor(minutes / 60);
-            return 'Unlimited';
+      return `Expires in ${hours}h`;
-        }
-        const minutes = Math.floor(limit / 60);
-        return `${minutes}+${increment}`;
     }
 
-    getCreatedByDisplay(): string {
+    return `Expires in ${minutes}m`;
-        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`;
-    }
 }

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

@@ -66,7 +66,9 @@
   font-family: var(--nc-sans);
   letter-spacing: 0.08em;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
 .seg-btn.active {
@@ -115,7 +117,9 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  transition: background 0.15s, border-color 0.15s;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
 }
 
 .btn:hover {

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

@@ -2,8 +2,17 @@
   <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">
+      <svg
-        <polyline points="6 9 12 15 18 9"/>
+        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>
@@ -15,30 +24,60 @@
         [class.active]="exportKind === 'fen'"
         role="tab"
         [attr.aria-selected]="exportKind === 'fen'"
-        (click)="setKind('fen')">FEN</button>
+        (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>
+        (click)="setKind('pgn')"
+      >
+        PGN
+      </button>
     </div>
 
-    <textarea class="export-out" [value]="exportValue" [placeholder]="exportPlaceholder" rows="4" readonly></textarea>
+    <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">
+        <svg
-          <rect x="9" y="9" width="13" height="13" rx="2"/>
+          width="12"
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          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">
+        <svg
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          width="12"
-          <polyline points="7 10 12 15 17 10"/>
+          height="12"
-          <line x1="12" y1="15" x2="12" y2="3"/>
+          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>

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

@@ -8,7 +8,7 @@ type ExportKind = 'fen' | 'pgn';
   standalone: true,
   imports: [FormsModule],
   templateUrl: './export-panel.component.html',
-  styleUrl: './export-panel.component.css'
+  styleUrl: './export-panel.component.css',
 })
 export class ExportPanelComponent implements OnChanges {
   @Input() fen = '';

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;
+  background-color: lightcyan;
-    border: 3px solid var(--color-border);
+  border: 3px solid var(--color-border);
-        border-radius: var(--border-radius-sm);
+  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"
+    <textarea
-    (input)="onValueChange(textareaInput.value)" class="form-input"></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)"
+    <input
-    class="form-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>

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

@@ -22,7 +22,7 @@
   position: relative;
   width: min(420px, 100%);
   background:
-    radial-gradient(120% 80% at 50% 0%, rgba(255, 69, 200, 0.10), transparent 60%),
+    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;
@@ -60,14 +60,13 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background-image:
+  background-image: repeating-linear-gradient(
-    repeating-linear-gradient(
+    0deg,
-      0deg,
+    rgba(255, 255, 255, 0.012) 0px,
-      rgba(255, 255, 255, 0.012) 0px,
+    rgba(255, 255, 255, 0.012) 1px,
-      rgba(255, 255, 255, 0.012) 1px,
+    transparent 1px,
-      transparent 1px,
+    transparent 3px
-      transparent 3px
+  );
-    );
   border-radius: inherit;
 }
 
@@ -174,7 +173,10 @@ form {
   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;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease;
 }
 
 .dialog-input::placeholder {
@@ -185,7 +187,9 @@ form {
   outline: none;
   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);
+  box-shadow:
+    0 0 0 3px rgba(255, 69, 200, 0.15),
+    0 0 18px rgba(255, 69, 200, 0.18);
 }
 
 .text-danger {
@@ -303,26 +307,56 @@ form {
 }
 
 @keyframes scanline {
-  0% { transform: translateY(-100%); }
+  0% {
-  100% { transform: translateY(300%); }
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
 }
 @keyframes pulse-glow {
-  0%, 100% { opacity: 0.85; }
+  0%,
-  50% { opacity: 1; }
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 @keyframes dialog-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.96); }
+  from {
-  to { opacity: 1; transform: translateY(0) scale(1); }
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 @keyframes backdrop-in {
-  from { opacity: 0; }
+  from {
-  to { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
+  0%,
-  20%, 60% { transform: translateX(-4px); }
+  100% {
-  40%, 80% { transform: translateX(4px); }
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
 }
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -11,8 +11,14 @@
     <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
       <div class="field">
         <label for="username" class="field-label">Username</label>
-        <input id="username" type="text" class="dialog-input" formControlName="username"
+        <input
-          placeholder="your_handle" autocomplete="username" />
+          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>
         }
@@ -20,8 +26,14 @@
 
       <div class="field">
         <label for="password" class="field-label">Password</label>
-        <input id="password" type="password" class="dialog-input" formControlName="password"
+        <input
-          placeholder="••••••••" autocomplete="current-password" />
+          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>
         }
@@ -41,9 +53,7 @@
         </button>
       </div>
 
-      <div class="alt-line">
+      <div class="alt-line">New here?<a (click)="openRegister()">Create an account</a></div>
-        New here?<a (click)="openRegister()">Create an account</a>
-      </div>
     </form>
   </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)]],
     });
   }
 
@@ -51,7 +51,7 @@ export class LoginDialogComponent {
         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

@@ -26,7 +26,9 @@
   padding: 6px 10px;
   color: var(--nc-text);
   cursor: pointer;
-  transition: background 0.1s, color 0.1s;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .mv:hover {
@@ -35,7 +37,7 @@
 }
 
 .mv.current {
-  background: rgba(255, 69, 200, 0.10);
+  background: rgba(255, 69, 200, 0.1);
   color: var(--nc-neon);
 }
 
@@ -72,7 +74,9 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 }
 
 .icon-btn:hover {
@@ -93,7 +97,16 @@
   opacity: 1;
 }
 
-.moves::-webkit-scrollbar { width: 6px; }
+.moves::-webkit-scrollbar {
-.moves::-webkit-scrollbar-track { background: transparent; }
+  width: 6px;
-.moves::-webkit-scrollbar-thumb { background: var(--nc-border-strong); border-radius: 3px; }
+}
-.moves::-webkit-scrollbar-thumb:hover { background: var(--nc-neon-soft); }
+.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

@@ -4,13 +4,25 @@
   } @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"
+      <div
-           tabindex="0" (click)="clickWhite($index)" (keydown.enter)="clickWhite($index)">
+        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"
+      <div
-           [attr.tabindex]="pair.black ? 0 : null"
+        class="mv"
-           (click)="clickBlack($index, pair.black)" (keydown.enter)="clickBlack($index, pair.black)">
+        [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>
     }
@@ -20,23 +32,61 @@
 <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">
+      <svg
-        <polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/>
+        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">
+      <svg
-        <polyline points="15 18 9 12 15 6"/>
+        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">
+      <svg
-        <polyline points="9 18 15 12 9 6"/>
+        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">
+      <svg
-        <polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/>
+        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>

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

@@ -1,4 +1,12 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild,
+} from '@angular/core';
 
 export type MoveNavDirection = 'first' | 'prev' | 'next' | 'last';
 
@@ -12,7 +20,7 @@ interface MovePair {
   standalone: true,
   imports: [],
   templateUrl: './move-history.component.html',
-  styleUrl: './move-history.component.css'
+  styleUrl: './move-history.component.css',
 })
 export class MoveHistoryComponent implements OnChanges {
   @Input({ required: true }) moves: string[] = [];

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

@@ -7,12 +7,16 @@
   border: 1px solid var(--nc-border);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  transition: border-color 0.2s, box-shadow 0.2s;
+  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);
+  box-shadow:
+    0 0 0 1px rgba(255, 69, 200, 0.2),
+    0 0 20px rgba(255, 69, 200, 0.1);
 }
 
 .player-avatar {
@@ -74,7 +78,11 @@
   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;
+  transition:
+    color 0.2s,
+    border-color 0.2s,
+    background 0.2s,
+    text-shadow 0.2s;
 }
 
 .clock.clock-active {

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

@@ -1,5 +1,9 @@
 <div class="player" [class.is-turn]="isActive">
-  <div class="player-avatar" [class.avatar-black]="color === 'black'" [class.avatar-white]="color === 'white'">
+  <div
+    class="player-avatar"
+    [class.avatar-black]="color === 'black'"
+    [class.avatar-white]="color === 'white'"
+  >
     {{ initial }}
   </div>
 

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

@@ -5,7 +5,7 @@ import { Component, Input } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './player-card.component.html',
-  styleUrl: './player-card.component.css'
+  styleUrl: './player-card.component.css',
 })
 export class PlayerCardComponent {
   @Input({ required: true }) name = '';

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"
+      <button
-        style="padding:0.2rem 0.5rem;min-width:unset;">&times;</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,11 +17,16 @@
 
       <div class="promotion-options">
         @for (piece of promotionPieces; track piece.type) {
-        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
+          <button
-          (click)="selectPromotion(piece.type)" [title]="piece.label">
+            type="button"
-          <span class="piece-symbol">{{ piece.symbol }}</span>
+            class="app-btn promotion-choice"
-          <span class="piece-label">{{ piece.label }}</span>
+            [attr.data-piece]="piece.type"
-        </button>
+            (click)="selectPromotion(piece.type)"
+            [title]="piece.label"
+          >
+            <span class="piece-symbol">{{ piece.symbol }}</span>
+            <span class="piece-label">{{ piece.label }}</span>
+          </button>
         }
       </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

@@ -22,7 +22,7 @@
   position: relative;
   width: min(440px, 100%);
   background:
-    radial-gradient(120% 80% at 50% 0%, rgba(255, 69, 200, 0.10), transparent 60%),
+    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;
@@ -179,7 +179,10 @@ form {
   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;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease;
 }
 
 .dialog-input::placeholder {
@@ -190,7 +193,9 @@ form {
   outline: none;
   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);
+  box-shadow:
+    0 0 0 3px rgba(255, 69, 200, 0.15),
+    0 0 18px rgba(255, 69, 200, 0.18);
 }
 
 .text-danger {
@@ -308,26 +313,56 @@ form {
 }
 
 @keyframes scanline {
-  0% { transform: translateY(-100%); }
+  0% {
-  100% { transform: translateY(300%); }
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
 }
 @keyframes pulse-glow {
-  0%, 100% { opacity: 0.85; }
+  0%,
-  50% { opacity: 1; }
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 @keyframes dialog-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.96); }
+  from {
-  to { opacity: 1; transform: translateY(0) scale(1); }
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 @keyframes backdrop-in {
-  from { opacity: 0; }
+  from {
-  to { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
+  0%,
-  20%, 60% { transform: translateX(-4px); }
+  100% {
-  40%, 80% { transform: translateX(4px); }
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
 }
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -11,8 +11,14 @@
     <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
       <div class="field">
         <label for="username" class="field-label">Username</label>
-        <input id="username" type="text" class="dialog-input" formControlName="username"
+        <input
-          placeholder="your_handle" autocomplete="username" />
+          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>
         }
@@ -20,8 +26,14 @@
 
       <div class="field">
         <label for="email" class="field-label">Email</label>
-        <input id="email" type="email" class="dialog-input" formControlName="email"
+        <input
-          placeholder="you@domain.com" autocomplete="email" />
+          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>
         }
@@ -30,16 +42,28 @@
       <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"
+          <input
-            placeholder="••••••••" autocomplete="new-password" />
+            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"
+          <input
-            placeholder="••••••••" autocomplete="new-password" />
+            id="confirmPassword"
+            type="password"
+            class="dialog-input"
+            formControlName="confirmPassword"
+            placeholder="••••••••"
+            autocomplete="new-password"
+          />
         </div>
       </div>
 
@@ -49,7 +73,11 @@
 
       <div class="dialog-actions">
         <button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
-        <button type="submit" class="btn btn-primary" [disabled]="isLoading || registerForm.invalid">
+        <button
+          type="submit"
+          class="btn btn-primary"
+          [disabled]="isLoading || registerForm.invalid"
+        >
           @if (isLoading) {
             <span class="spinner" aria-hidden="true"></span>
           }
@@ -57,9 +85,7 @@
         </button>
       </div>
 
-      <div class="alt-line">
+      <div class="alt-line">Already have an account?<a (click)="openLogin()">Sign in</a></div>
-        Already have an account?<a (click)="openLogin()">Sign in</a>
-      </div>
     </form>
   </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]],
     });
   }
 
@@ -58,9 +58,8 @@ export class RegisterDialogComponent {
       error: (err) => {
         this.isLoading = false;
         this.registerForm.enable();
-        this.errorMessage =
+        this.errorMessage = err.error?.message || 'Registration failed. Please try again.';
-          err.error?.message || 'Registration failed. Please try again.';
+      },
-      }
     });
   }
 

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

@@ -1,46 +1,58 @@
 /* ============ THEME TOKENS ============ */
 :host {
   /* Light mode: warm sunset palette from background gradient */
-  --nc-accent:        #ff3dbb;
+  --nc-accent: #ff3dbb;
-  --nc-accent-hover:  rgba(255, 107, 61, 0.15);
+  --nc-accent-hover: rgba(255, 107, 61, 0.15);
-  --nc-accent-badge:  rgba(223, 61, 255, 0.9);
+  --nc-accent-badge: rgba(223, 61, 255, 0.9);
-  --nc-badge-text:    #1a0800;
+  --nc-badge-text: #1a0800;
-  --nc-surface:       rgba(26, 24, 56, 0.97);
+  --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-nav-bg: linear-gradient(
-  --nc-text:          #fff;
+    180deg,
-  --nc-text-muted:    rgba(255,255,255,0.7);
+    rgba(26, 24, 56, 0.88) 0%,
-  --nc-text-dim:      rgba(255,255,255,0.45);
+    rgba(46, 32, 80, 0.6) 70%,
-  --nc-border:        rgba(255,255,255,0.1);
+    rgba(74, 41, 98, 0) 100%
-  --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-text: #fff;
-  --nc-avatar-a:      #d44d4a;
+  --nc-text-muted: rgba(255, 255, 255, 0.7);
-  --nc-avatar-b:      #8b3a6b;
+  --nc-text-dim: rgba(255, 255, 255, 0.45);
-  --nc-danger:        #ff7a7a;
+  --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;
 }
 
 :host-context(html[data-theme='dark']) {
   /* Dark mode: blue neon palette */
-  --nc-accent:        #00d5ff;
+  --nc-accent: #00d5ff;
-  --nc-accent-hover:  rgba(0, 213, 255, 0.12);
+  --nc-accent-hover: rgba(0, 213, 255, 0.12);
-  --nc-accent-badge:  #00d5ff;
+  --nc-accent-badge: #00d5ff;
-  --nc-badge-text:    #04000f;
+  --nc-badge-text: #04000f;
-  --nc-surface:       rgba(8, 6, 28, 0.97);
+  --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-nav-bg: linear-gradient(
-  --nc-text:          #fff;
+    180deg,
-  --nc-text-muted:    rgba(255,255,255,0.65);
+    rgba(8, 5, 20, 0.88) 0%,
-  --nc-text-dim:      rgba(255,255,255,0.4);
+    rgba(8, 5, 20, 0.58) 70%,
-  --nc-border:        rgba(255,255,255,0.08);
+    rgba(8, 5, 20, 0) 100%
-  --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-text: #fff;
-  --nc-avatar-a:      #00d5ff;
+  --nc-text-muted: rgba(255, 255, 255, 0.65);
-  --nc-avatar-b:      #1a5fa8;
+  --nc-text-dim: rgba(255, 255, 255, 0.4);
-  --nc-danger:        #ff7a7a;
+  --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;
 }
 
 /* ============ NAV CONTAINER ============ */
 .nc-nav {
   position: fixed;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 56px;
   z-index: 100;
   display: flex;
@@ -49,7 +61,12 @@
   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;
+  font-family:
+    'Space Grotesk',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
 }
 
 /* ============ LOGO ============ */
@@ -63,7 +80,8 @@
 }
 
 .nc-logo-mark {
-  width: 24px; height: 24px;
+  width: 24px;
+  height: 24px;
   background: var(--nc-accent);
   display: flex;
   align-items: center;
@@ -105,19 +123,25 @@
   transition: color 0.15s;
 }
 
-.nc-link:hover { color: var(--nc-text); }
+.nc-link:hover {
+  color: var(--nc-text);
+}
 
 .nc-link::after {
-  content: "";
+  content: '';
   position: absolute;
-  bottom: 2px; left: 14px; right: 14px;
+  bottom: 2px;
+  left: 14px;
+  right: 14px;
   height: 1px;
   background: var(--nc-accent);
   opacity: 0;
   transition: opacity 0.15s;
 }
 
-.nc-link:hover::after { opacity: 1; }
+.nc-link:hover::after {
+  opacity: 1;
+}
 
 /* ============ RIGHT CLUSTER ============ */
 .nc-right {
@@ -130,7 +154,8 @@
 
 /* ============ BELL ============ */
 .nc-bell {
-  width: 36px; height: 36px;
+  width: 36px;
+  height: 36px;
   border: 1px solid var(--nc-border);
   background: transparent;
   color: var(--nc-text-muted);
@@ -139,7 +164,9 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
   font-family: inherit;
 }
 
@@ -152,8 +179,10 @@
 /* ============ BADGE ============ */
 .nc-badge {
   position: absolute;
-  top: 5px; right: 5px;
+  top: 5px;
-  min-width: 14px; height: 14px;
+  right: 5px;
+  min-width: 14px;
+  height: 14px;
   border-radius: 7px;
   background: var(--nc-accent-badge);
   color: var(--nc-badge-text);
@@ -181,7 +210,9 @@
   letter-spacing: 0.1em;
   text-transform: uppercase;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
 .nc-games-btn:hover {
@@ -201,7 +232,9 @@
   cursor: pointer;
   color: var(--nc-text-muted);
   font-family: inherit;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
 .nc-profile:hover,
@@ -216,7 +249,9 @@
   letter-spacing: 0.04em;
 }
 
-.nc-chevron { opacity: 0.5; }
+.nc-chevron {
+  opacity: 0.5;
+}
 
 /* ============ AVATAR ============ */
 .nc-avatar {
@@ -231,11 +266,21 @@
   flex-shrink: 0;
 }
 
-.nc-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
+.nc-avatar-sm {
-.nc-avatar-md { width: 40px; height: 40px; font-size: 17px; }
+  width: 26px;
+  height: 26px;
+  font-size: 11px;
+}
+.nc-avatar-md {
+  width: 40px;
+  height: 40px;
+  font-size: 17px;
+}
 
 /* ============ DROPDOWN WRAPPER ============ */
-.nc-dropdown-wrap { position: relative; }
+.nc-dropdown-wrap {
+  position: relative;
+}
 
 /* ============ POPOVERS ============ */
 .nc-popover {
@@ -252,11 +297,13 @@
 }
 
 /* ============ NOTIFICATIONS PANEL ============ */
-.nc-notif { width: 360px; }
+.nc-notif {
+  width: 360px;
+}
 
 .nc-notif-header {
   padding: 14px 18px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -270,7 +317,10 @@
   font-weight: 600;
 }
 
-.nc-notif-list { max-height: 420px; overflow-y: auto; }
+.nc-notif-list {
+  max-height: 420px;
+  overflow-y: auto;
+}
 
 .nc-notif-empty {
   padding: 24px 18px;
@@ -282,36 +332,44 @@
 
 .nc-notif-row {
   padding: 14px 18px;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  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 {
+  background: rgba(255, 255, 255, 0.03);
+}
 
 .nc-notif-row.is-unread::before {
-  content: "";
+  content: '';
   position: absolute;
-  left: 6px; top: 22px;
+  left: 6px;
-  width: 4px; height: 4px;
+  top: 22px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
   background: var(--nc-unread-dot);
 }
 
 .nc-notif-icon {
-  width: 32px; height: 32px;
+  width: 32px;
+  height: 32px;
   flex-shrink: 0;
-  background: rgba(255,255,255,0.04);
+  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255,255,255,0.12);
+  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-body {
+  flex: 1;
+  min-width: 0;
+}
 
 .nc-notif-text {
   font-size: 13px;
@@ -319,7 +377,9 @@
   line-height: 1.35;
 }
 
-.nc-notif-text b { font-weight: 600; }
+.nc-notif-text b {
+  font-weight: 600;
+}
 
 .nc-notif-meta {
   font-size: 10px;
@@ -360,7 +420,7 @@
 .nc-btn-decline {
   background: transparent;
   color: var(--nc-text-muted);
-  border: 1px solid rgba(255,255,255,0.15);
+  border: 1px solid rgba(255, 255, 255, 0.15);
 }
 
 .nc-btn-accept:disabled,
@@ -371,7 +431,7 @@
 
 .nc-notif-footer {
   padding: 10px 18px;
-  border-top: 1px solid rgba(255,255,255,0.06);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .nc-view-all {
@@ -388,14 +448,18 @@
   transition: color 0.15s;
 }
 
-.nc-view-all:hover { color: var(--nc-text-muted); }
+.nc-view-all:hover {
+  color: var(--nc-text-muted);
+}
 
 /* ============ PROFILE MENU ============ */
-.nc-menu { width: 250px; }
+.nc-menu {
+  width: 250px;
+}
 
 .nc-menu-header {
   padding: 16px 16px 14px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   gap: 12px;
   align-items: center;
@@ -417,10 +481,12 @@
   letter-spacing: 0.06em;
 }
 
-.nc-menu-group { padding: 6px 0; }
+.nc-menu-group {
+  padding: 6px 0;
+}
 
 .nc-menu-group + .nc-menu-group {
-  border-top: 1px solid rgba(255,255,255,0.06);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .nc-menu-item {
@@ -436,7 +502,9 @@
   border: none;
   width: 100%;
   text-align: left;
-  transition: background 0.12s, color 0.12s;
+  transition:
+    background 0.12s,
+    color 0.12s;
 }
 
 .nc-menu-item:hover {
@@ -444,35 +512,52 @@
   color: var(--nc-accent);
 }
 
-.nc-menu-item.danger { color: var(--nc-danger); }
+.nc-menu-item.danger {
-.nc-menu-item.danger:hover { background: rgba(255,122,122,0.08); color: var(--nc-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-icon {
-.nc-menu-label { flex: 1; }
+  opacity: 0.85;
+  display: inline-flex;
+}
+.nc-menu-label {
+  flex: 1;
+}
 
 /* ============ DARK MODE TOGGLE PILL ============ */
 .nc-toggle {
-  width: 28px; height: 16px;
+  width: 28px;
+  height: 16px;
   border-radius: 8px;
-  background: rgba(255,255,255,0.15);
+  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.is-on {
+  background: var(--nc-accent);
+}
 
 .nc-toggle::after {
-  content: "";
+  content: '';
   position: absolute;
-  top: 2px; left: 2px;
+  top: 2px;
-  width: 12px; height: 12px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: #fff;
   transition: left 0.2s;
 }
 
-.nc-toggle.is-on::after { left: 14px; }
+.nc-toggle.is-on::after {
+  left: 14px;
+}
 
 /* ============ AUTH BUTTONS (logged out) ============ */
 .nc-auth-btn {
@@ -486,11 +571,14 @@
   letter-spacing: 0.1em;
   text-transform: uppercase;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
 }
 
 .nc-auth-btn:hover {
-  background: rgba(255,255,255,0.06);
+  background: rgba(255, 255, 255, 0.06);
   color: var(--nc-text);
 }
 
@@ -506,6 +594,13 @@
 }
 
 /* ============ NOTIF SCROLLBAR ============ */
-.nc-notif-list::-webkit-scrollbar { width: 6px; }
+.nc-notif-list::-webkit-scrollbar {
-.nc-notif-list::-webkit-scrollbar-track { background: transparent; }
+  width: 6px;
-.nc-notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+}
+.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,5 +1,4 @@
 <nav class="nc-nav">
-
   <!-- Logo -->
   <div class="nc-logo" (click)="goToHome()" role="button" tabindex="0">
     <div class="nc-logo-mark">♞</div>
@@ -8,201 +7,315 @@
 
   <!-- Center links — only when logged in -->
   @if (currentUser) {
-  <div class="nc-links">
+    <div class="nc-links">
-    <button type="button" class="nc-link">
+      <button type="button" class="nc-link">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+        <svg
-        stroke-linecap="round" stroke-linejoin="round">
+          width="14"
-        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          height="14"
-        <circle cx="12" cy="12" r="3" />
+          viewBox="0 0 24 24"
-      </svg>
+          fill="none"
-      Watch
+          stroke="currentColor"
-    </button>
+          stroke-width="1.7"
-    <button type="button" class="nc-link" (click)="goToTournaments()">Tournaments</button>
+          stroke-linecap="round"
-    <button type="button" class="nc-link" (click)="goToBots()">Bots</button>
+          stroke-linejoin="round"
-  </div>
+        >
+          <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>
 
-    <!-- Notifications bell -->
+        @if (notifOpen) {
-    <div class="nc-dropdown-wrap" data-dropdown="notif">
+          <div class="nc-popover nc-notif" (click)="$event.stopPropagation()">
-      <button type="button" class="nc-bell" [class.is-open]="notifOpen" (click)="toggleNotif($event)"
+            <div class="nc-notif-header">
-        aria-label="Notifications">
+              <span class="nc-notif-header-title">Challenges</span>
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
+            </div>
-          stroke-linecap="round" stroke-linejoin="round">
+
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+            <div class="nc-notif-list">
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+              @if (incomingChallenges.length === 0) {
-        </svg>
+                <div class="nc-notif-empty">No pending challenges</div>
-        @if (incomingChallenges.length > 0) {
+              }
-        <span class="nc-badge">{{ incomingChallenges.length }}</span>
+              @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>
         }
-      </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>
 
-    <!-- Games quick-access -->
+      <!-- Games quick-access -->
-    <button type="button" class="nc-games-btn" (click)="goToGames()">
+      <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"
+        <svg
-        stroke-linecap="round" stroke-linejoin="round">
+          width="13"
-        <path d="M14.5 17.5L3 6"/>
+          height="13"
-        <path d="M13 19l6-6"/><path d="M16 16l4 4"/>
+          viewBox="0 0 24 24"
-        <path d="M19 21l2-2"/><path d="M15 5l4 4"/>
+          fill="none"
-        <path d="M21 3l-3 1-4 4"/>
+          stroke="currentColor"
-      </svg>
+          stroke-width="1.7"
-      Games
+          stroke-linecap="round"
-    </button>
+          stroke-linejoin="round"
-
+        >
-    <!-- Profile -->
+          <path d="M14.5 17.5L3 6" />
-    <div class="nc-dropdown-wrap" data-dropdown="profile">
+          <path d="M13 19l6-6" />
-      <button type="button" class="nc-profile" [class.is-open]="profileOpen" (click)="toggleProfile($event)">
+          <path d="M16 16l4 4" />
-        <div class="nc-avatar nc-avatar-sm">{{ getInitial() }}</div>
+          <path d="M19 21l2-2" />
-        <span class="nc-profile-name">{{ user.username }}</span>
+          <path d="M15 5l4 4" />
-        <svg class="nc-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          <path d="M21 3l-3 1-4 4" />
-          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9" />
         </svg>
+        Games
       </button>
 
-      @if (profileOpen) {
+      <!-- Profile -->
-      <div class="nc-popover nc-menu" (click)="$event.stopPropagation()">
+      <div class="nc-dropdown-wrap" data-dropdown="profile">
-        <div class="nc-menu-header">
+        <button
-          <div class="nc-avatar nc-avatar-md">{{ getInitial() }}</div>
+          type="button"
-          <div>
+          class="nc-profile"
-            <div class="nc-menu-user-name">{{ user.username }}</div>
+          [class.is-open]="profileOpen"
-            <div class="nc-menu-user-sub">{{ user.rating }} · &#64;{{ user.username }}</div>
+          (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>
+        }
-
-        <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 -->
-    <!-- Logged-out auth buttons -->
+      <button type="button" class="nc-auth-btn" (click)="openLoginDialog()">Login</button>
-    <button type="button" class="nc-auth-btn" (click)="openLoginDialog()">Login</button>
+      <button type="button" class="nc-auth-btn nc-auth-btn--primary" (click)="openRegisterDialog()">
-    <button type="button" class="nc-auth-btn nc-auth-btn--primary" (click)="openRegisterDialog()">Register</button>
+        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

@@ -18,7 +18,7 @@ import { Challenge } from '../../models/challenge.models';
   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);
@@ -46,35 +46,36 @@ export class ToolbarComponent implements OnInit {
   ngOnInit(): void {
     this.destroyRef.onDestroy(() => this.stopPolling());
 
-    this.authService.currentUser$
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      this.currentUser = user;
-      .subscribe(user => {
+      if (user) {
-        this.currentUser = user;
+        this.challengeWs.connect();
-        if (user) {
+        this.startPolling();
-          this.challengeWs.connect();
+      } else {
-          this.startPolling();
+        this.challengeWs.disconnect();
-        } else {
+        this.stopPolling();
-          this.challengeWs.disconnect();
+        this.navigatedChallengeIds.clear();
-          this.stopPolling();
+        this.challengeEventService.clear();
-          this.navigatedChallengeIds.clear();
+      }
-          this.challengeEventService.clear();
+    });
-        }
-      });
 
     this.authDialogService.dialogState$
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(state => {
+      .subscribe((state) => {
         this.showLoginDialog = state === 'login';
         this.showRegisterDialog = state === 'register';
       });
 
-    this.themeService.darkMode$
+    this.themeService.darkMode$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((isDark) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      this.isDarkMode = isDark;
-      .subscribe(isDark => { this.isDarkMode = isDark; });
+    });
 
-    this.challengeEventService.getIncomingChallenges$()
+    this.challengeEventService
+      .getIncomingChallenges$()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(challenges => { this.incomingChallenges = challenges; });
+      .subscribe((challenges) => {
+        this.incomingChallenges = challenges;
+      });
   }
 
   private startPolling(): void {
@@ -91,7 +92,7 @@ export class ToolbarComponent implements OnInit {
 
   private fetchChallenges(): void {
     this.challengeService.listChallenges().subscribe({
-      next: response => {
+      next: (response) => {
         const incoming = response.in ?? response.incoming ?? [];
         this.challengeEventService.setIncomingChallenges(incoming);
 
@@ -104,7 +105,7 @@ export class ToolbarComponent implements OnInit {
             }
           }
         }
-      }
+      },
     });
   }
 
@@ -197,6 +198,12 @@ export class ToolbarComponent implements OnInit {
     void this.router.navigate(['/bots']);
   }
 
+  goToAnalysis(): void {
+    this.profileOpen = false;
+    this.notifOpen = false;
+    void this.router.navigate(['/analysis']);
+  }
+
   onLoginSuccess(): void {
     this.closeLoginDialog();
   }
@@ -227,12 +234,14 @@ export class ToolbarComponent implements OnInit {
     if (this.acceptingId || this.decliningId) return;
     this.acceptingId = challenge.id;
     this.challengeService.acceptChallenge(challenge.id).subscribe({
-      next: accepted => {
+      next: (accepted) => {
         this.acceptingId = null;
         this.challengeEventService.onChallengeAccepted(accepted);
         if (accepted.gameId) void this.router.navigate(['/game', accepted.gameId]);
       },
-      error: () => { this.acceptingId = null; }
+      error: () => {
+        this.acceptingId = null;
+      },
     });
   }
 
@@ -245,7 +254,9 @@ export class ToolbarComponent implements OnInit {
         this.decliningId = null;
         this.challengeEventService.removeChallenge(challenge.id);
       },
-      error: () => { this.decliningId = null; }
+      error: () => {
+        this.decliningId = null;
+      },
     });
   }
 }

src/app/core/config.loader.ts

@@ -8,6 +8,6 @@ export function loadRuntimeConfig() {
   const derivedWsUrl = `${wsProtocol}://${window.location.host}`;
   return {
     apiUrl: config.API_URL || '',
-    wsUrl: config.WEBSOCKET_URL || derivedWsUrl
+    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/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;
+  id: string;
-    name: string;
+  name: string;
-    rating: number;
+  rating: number;
 }
 
 export interface TimeControl {
-    type: string | null;
+  type: string | null;
-    limit: number | null;
+  limit: number | null;
-    increment: number | null;
+  increment: number | null;
 }
 
 export interface Challenge {
-    id: string;
+  id: string;
-    challenger: Player;
+  challenger: Player;
-    destUser: Player;
+  destUser: Player;
-    variant: string;
+  variant: string;
-    color: PlayerColor;
+  color: PlayerColor;
-    timeControl: TimeControl;
+  timeControl: TimeControl;
-    status: ChallengeStatus;
+  status: ChallengeStatus;
-    declineReason: string | null;
+  declineReason: string | null;
-    gameId: string | null;
+  gameId: string | null;
-    expiresAt: string;
+  expiresAt: string;
-    createdAt: string;
+  createdAt: string;
 }
 
 export interface SendChallengeRequest {
-    timeControl: {
+  timeControl: {
-        limitSeconds: number;
+    limitSeconds: number;
-        incrementSeconds: number;
+    incrementSeconds: number;
-    };
+  };
-    color?: PlayerColor;
+  color?: PlayerColor;
-    ttlSeconds?: number;
+  ttlSeconds?: number;
 }
 
 export interface ListChallengesResponse {
-    'in'?: Challenge[];
+  in?: Challenge[];
-    'out'?: Challenge[];
+  out?: Challenge[];
-    incoming?: Challenge[];
+  incoming?: Challenge[];
-    outgoing?: Challenge[];
+  outgoing?: Challenge[];
 }
 
 export interface DeclineChallengeRequest {
-    reason?: string;
+  reason?: string;
 }

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

@@ -10,7 +10,7 @@
   --nc-success: #5ee5a1;
   --nc-danger: #ff7a7a;
   --nc-warn: #ffd166;
-  --nc-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 
   display: block;
   min-height: 100vh;
@@ -33,131 +33,352 @@
   --nc-warn: #b45309;
 }
 
-.b-shell { padding-top: 72px; min-height: 100vh; }
+.b-shell {
-.page { max-width: 680px; margin: 0 auto; padding: 32px 20px 64px; }
+  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;
+.crumb {
-  font-size: 11px; color: var(--nc-text-dim); letter-spacing: 0.06em; }
+  display: flex;
-.crumb-link { display: inline-flex; align-items: center; gap: 4px;
+  align-items: center;
-  color: var(--nc-text-dim); text-decoration: none; transition: color 0.15s; }
+  gap: 8px;
-.crumb-link:hover { color: var(--nc-neon); }
+  margin-bottom: 28px;
-.crumb-sep { opacity: 0.35; }
+  font-size: 11px;
-.crumb-current { color: var(--nc-text-muted); }
+  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; }
+.page-header {
-.title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+  margin-bottom: 24px;
-.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; }
+.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;
+  display: inline-flex;
-  padding: 7px 14px; border-radius: 8px; border: none;
+  align-items: center;
-  background: var(--nc-neon); color: #fff;
+  gap: 6px;
-  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
+  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;
 }
-.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;
+  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;
 }
-.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;
+  padding: 8px 16px;
-  background: var(--nc-neon); color: #fff; font-size: 13px; font-weight: 600;
+  border-radius: 8px;
-  cursor: pointer; white-space: nowrap; transition: opacity 0.15s;
+  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-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 .btn-ghost {
-  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--nc-border-strong);
+  padding: 8px 14px;
-  background: transparent; color: var(--nc-text-muted); font-size: 13px; cursor: pointer;
+  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;
 }
-.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* States */
-.state-msg { display: flex; align-items: center; gap: 10px;
+.state-msg {
-  padding: 24px 0; color: var(--nc-text-muted); font-size: 13px; }
+  display: flex;
-.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--nc-neon);
+  align-items: center;
-  flex-shrink: 0; animation: pulse 1.4s ease-in-out infinite; }
+  gap: 10px;
-@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
+  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;
+.empty-state {
-  gap: 8px; padding: 64px 0; text-align: center; }
+  display: flex;
-.empty-icon { color: var(--nc-text-dim); margin-bottom: 4px; }
+  flex-direction: column;
-.empty-title { font-size: 15px; font-weight: 600; margin: 0; }
+  align-items: center;
-.empty-sub { font-size: 13px; color: var(--nc-text-muted); margin: 0; }
+  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-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 .bot-card {
-  border: 1px solid var(--nc-border); border-radius: 12px;
+  border: 1px solid var(--nc-border);
-  background: var(--nc-surface); overflow: hidden;
+  border-radius: 12px;
+  background: var(--nc-surface);
+  overflow: hidden;
 }
 .bot-main {
-  display: flex; align-items: center; gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   padding: 14px 16px;
 }
 .bot-avatar {
-  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
+  width: 36px;
-  background: var(--nc-neon); color: #fff;
+  height: 36px;
-  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
-  font-size: 16px; font-weight: 700;
+  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;
 }
-.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;
+  display: inline-flex;
-  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--nc-border-strong);
+  align-items: center;
-  background: transparent; color: var(--nc-text-muted); font-size: 12px; cursor: pointer;
+  gap: 5px;
-  transition: background 0.15s, color 0.15s;
+  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-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);
+  padding: 6px 12px;
-  background: transparent; color: var(--nc-danger); font-size: 12px; cursor: pointer;
+  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:hover {
-.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
+  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;
+  border-top: 1px solid var(--nc-border);
-  display: flex; flex-direction: column; gap: 10px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 .token-warning {
-  display: flex; align-items: flex-start; gap: 8px;
+  display: flex;
-  font-size: 12px; color: var(--nc-warn);
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--nc-warn);
+}
+.token-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.token-row { display: flex; align-items: center; gap: 8px; }
 .token-value {
-  flex: 1; font-family: monospace; font-size: 11px;
+  flex: 1;
-  background: rgba(0,0,0,0.2); border-radius: 6px;
+  font-family: monospace;
-  padding: 8px 10px; word-break: break-all;
+  font-size: 11px;
-  color: var(--nc-text-muted); border: 1px solid var(--nc-border);
+  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);
+  padding: 6px 12px;
-  background: transparent; color: var(--nc-text-muted); font-size: 12px;
+  border-radius: 7px;
-  cursor: pointer; white-space: nowrap; transition: color 0.15s;
+  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); }
+.btn-copy:hover {
+  color: var(--nc-success);
+}

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

@@ -1,11 +1,18 @@
 <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"
+        <svg
-          stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+          width="11"
-          <polyline points="15 18 9 12 15 6"/>
+          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>
@@ -17,14 +24,26 @@
       <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"
+          <svg
-            stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+            width="13"
-            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+            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>
+      <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) {
@@ -32,11 +51,21 @@
         <div class="create-inner">
           <label class="field-label">Bot name</label>
           <div class="create-row">
-            <input type="text" class="text-input" [(ngModel)]="newBotName"
+            <input
-              placeholder="e.g. AlphaBot" (keydown.enter)="submitCreate()"
+              type="text"
-              [disabled]="creating" maxlength="40" />
+              class="text-input"
-            <button type="button" class="btn-primary" (click)="submitCreate()"
+              [(ngModel)]="newBotName"
-              [disabled]="creating || !newBotName.trim()">
+              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">
@@ -54,10 +83,19 @@
       <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"
+        <svg
-          stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
+          width="36"
-          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+          height="36"
-          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+          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>
@@ -70,29 +108,49 @@
               <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>
+                <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"
+                <button
+                  type="button"
+                  class="btn-token"
                   [class.active]="!!revealedTokens[bot.id]"
                   [disabled]="revealingId === bot.id"
-                  (click)="revealToken(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">
+                  <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
-                      <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"/>
+                        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"
-                      <line x1="1" y1="1" x2="23" y2="23"/>
+                      />
+                      <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"/>
+                      <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"/>
+                      <circle cx="12" cy="12" r="3" />
                     }
                   </svg>
-                  {{ revealingId === bot.id ? '…' : (revealedTokens[bot.id] ? 'Hide' : 'Token') }}
+                  {{ revealingId === bot.id ? '…' : revealedTokens[bot.id] ? 'Hide' : 'Token' }}
                 </button>
-                <button type="button" class="btn-danger"
+                <button
+                  type="button"
+                  class="btn-danger"
                   [disabled]="deletingId === bot.id"
-                  (click)="deleteBot(bot.id)">
+                  (click)="deleteBot(bot.id)"
+                >
                   {{ deletingId === bot.id ? '…' : 'Delete' }}
                 </button>
               </div>
@@ -101,10 +159,21 @@
             @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"
+                  <svg
-                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    width="13"
-                    <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"/>
+                    height="13"
-                    <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+                    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>
@@ -120,6 +189,5 @@
         }
       </div>
     }
-
   </div>
 </div>

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

@@ -11,7 +11,7 @@ import { Bot, BotWithToken } from '../../models/bot.models';
   standalone: true,
   imports: [CommonModule, RouterLink, FormsModule],
   templateUrl: './bots.component.html',
-  styleUrl: './bots.component.css'
+  styleUrl: './bots.component.css',
 })
 export class BotsComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
@@ -36,11 +36,17 @@ export class BotsComponent implements OnInit {
 
   loadBots(): void {
     this.loading = true;
-    this.botService.list()
+    this.botService
+      .list()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: bots => { this.bots = bots; this.loading = false; },
+        next: (bots) => {
-        error: () => { this.loading = false; }
+          this.bots = bots;
+          this.loading = false;
+        },
+        error: () => {
+          this.loading = false;
+        },
       });
   }
 
@@ -66,10 +72,10 @@ export class BotsComponent implements OnInit {
         this.bots = [bot, ...this.bots];
         this.revealedTokens[bot.id] = bot.token;
       },
-      error: err => {
+      error: (err) => {
         this.creating = false;
         this.createError = err.error?.message ?? err.error?.error ?? 'Failed to create bot.';
-      }
+      },
     });
   }
 
@@ -80,11 +86,13 @@ export class BotsComponent implements OnInit {
     }
     this.revealingId = botId;
     this.botService.rotateToken(botId).subscribe({
-      next: token => {
+      next: (token) => {
         this.revealingId = null;
         this.revealedTokens[botId] = token;
       },
-      error: () => { this.revealingId = null; }
+      error: () => {
+        this.revealingId = null;
+      },
     });
   }
 
@@ -93,7 +101,9 @@ export class BotsComponent implements OnInit {
     if (!token) return;
     navigator.clipboard.writeText(token).then(() => {
       this.copiedId = botId;
-      setTimeout(() => { this.copiedId = null; }, 2000);
+      setTimeout(() => {
+        this.copiedId = null;
+      }, 2000);
     });
   }
 
@@ -102,10 +112,12 @@ export class BotsComponent implements OnInit {
     this.botService.delete(botId).subscribe({
       next: () => {
         this.deletingId = null;
-        this.bots = this.bots.filter(b => b.id !== botId);
+        this.bots = this.bots.filter((b) => b.id !== botId);
         delete this.revealedTokens[botId];
       },
-      error: () => { this.deletingId = null; }
+      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">
+  <div class="challenges-header">
-        <h1>Active Challenges</h1>
+    <h1>Active Challenges</h1>
-        <button type="button" class="back-btn" (click)="goBack()">← Back</button>
+    <button type="button" class="back-btn" (click)="goBack()">← Back</button>
-    </div>
+  </div>
 
-    <div *ngIf="errorMessage" class="error-banner">
+  <div *ngIf="errorMessage" class="error-banner">
-        {{ errorMessage }}
+    {{ errorMessage }}
-    </div>
+  </div>
 
-    <div class="challenges-grid">
+  <div class="challenges-grid">
-        <!-- Incoming Challenges -->
+    <!-- Incoming Challenges -->
-        <div class="challenges-section">
+    <div class="challenges-section">
-            <h2>Incoming Challenges</h2>
+      <h2>Incoming Challenges</h2>
-            <div *ngIf="loading" class="loading-spinner">Loading...</div>
+      <div *ngIf="loading" class="loading-spinner">Loading...</div>
 
-            <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
+      <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
-                <p>No incoming challenges</p>
+        <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 class="detail">
-            <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
+              <span class="label">Expires in:</span>
-                <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
+              <span class="value">{{ getExpirationInfo(challenge) }}</span>
-                    <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>
+          </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>
+    </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',
+  selector: 'app-challenges',
-    standalone: true,
+  standalone: true,
-    imports: [CommonModule],
+  imports: [CommonModule],
-    templateUrl: './challenges.component.html',
+  templateUrl: './challenges.component.html',
-    styleUrls: ['./challenges.component.css']
+  styleUrls: ['./challenges.component.css'],
 })
 export class ChallengesComponent implements OnInit, OnDestroy {
-    private readonly challengeService = inject(ChallengeService);
+  private readonly challengeService = inject(ChallengeService);
-    private readonly challengeEventService = inject(ChallengeEventService);
+  private readonly challengeEventService = inject(ChallengeEventService);
-    private readonly router = inject(Router);
+  private readonly router = inject(Router);
-    private readonly destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
 
-    incomingChallenges: Challenge[] = [];
+  incomingChallenges: Challenge[] = [];
-    outgoingChallenges: Challenge[] = [];
+  outgoingChallenges: Challenge[] = [];
-    loading = false;
+  loading = false;
-    errorMessage = '';
+  errorMessage = '';
 
-    private pollInterval: any = null;
+  private pollInterval: any = null;
-    private readonly pollIntervalMs = 5000; // Poll every 5 seconds
+  private readonly pollIntervalMs = 5000; // Poll every 5 seconds
 
-    ngOnInit(): void {
+  ngOnInit(): void {
-        this.loadChallenges(true);
+    this.loadChallenges(true);
 
-        // Subscribe to challenge events
+    // Subscribe to challenge events
-        this.challengeEventService.getChallengeReceived$()
+    this.challengeEventService
-            .pipe(takeUntilDestroyed(this.destroyRef))
+      .getChallengeReceived$()
-            .subscribe(() => {
+      .pipe(takeUntilDestroyed(this.destroyRef))
-                this.loadChallenges();
+      .subscribe(() => {
-            });
+        this.loadChallenges();
+      });
 
-        // Start polling for challenge updates
+    // Start polling for challenge updates
-        this.startPolling();
+    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.challengeService
-        this.stopPolling();
+      .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 {
+    const minutes = Math.floor(diffMs / 60000);
-        this.pollInterval = setInterval(() => {
+    if (minutes > 60) {
-            this.loadChallenges(false);
+      const hours = Math.floor(minutes / 60);
-        }, this.pollIntervalMs);
+      return `${hours}h`;
     }
 
-    private stopPolling(): void {
+    return `${minutes}m`;
-        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: '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';
-        }
-
-        const minutes = Math.floor(diffMs / 60000);
-        if (minutes > 60) {
-            const hours = Math.floor(minutes / 60);
-            return `${hours}h`;
-        }
-
-        return `${minutes}m`;
-    }
 }

src/app/pages/game/game.component.css

@@ -23,8 +23,8 @@
   --nc-btn-bg: rgba(255, 255, 255, 0.03);
   --nc-btn-hover-bg: rgba(255, 255, 255, 0.07);
   --nc-seg-bg: rgba(0, 0, 0, 0.3);
-  --nc-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --nc-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+  --nc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
 }
 
 /* ============================================================
@@ -40,17 +40,17 @@
   --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.10);
+  --nc-border: rgba(255, 255, 255, 0.1);
   --nc-border-strong: rgba(255, 255, 255, 0.18);
   --nc-warning: #ffb13a;
-  --nc-warning-soft: rgba(255, 177, 58, 0.40);
+  --nc-warning-soft: rgba(255, 177, 58, 0.4);
   --nc-danger: #ff7a7a;
-  --nc-danger-soft: rgba(255, 122, 122, 0.30);
+  --nc-danger-soft: rgba(255, 122, 122, 0.3);
   --nc-danger-bg: rgba(255, 122, 122, 0.08);
   --nc-success: #5ee5a1;
-  --nc-clock-bg: rgba(0, 0, 0, 0.30);
+  --nc-clock-bg: rgba(0, 0, 0, 0.3);
   --nc-btn-bg: rgba(255, 255, 255, 0.05);
-  --nc-btn-hover-bg: rgba(255, 255, 255, 0.10);
+  --nc-btn-hover-bg: rgba(255, 255, 255, 0.1);
   --nc-seg-bg: rgba(0, 0, 0, 0.28);
 }
 
@@ -66,7 +66,7 @@
 }
 
 .game-shell::before {
-  content: "";
+  content: '';
   position: fixed;
   inset: 0;
   background:
@@ -78,7 +78,7 @@
 
 :host-context(html:not([data-theme='dark'])) .game-shell::before {
   background:
-    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.10), transparent 60%),
+    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.1), transparent 60%),
     radial-gradient(ellipse 60% 40% at 90% 0%, rgba(74, 41, 98, 0.22), transparent 60%);
 }
 
@@ -116,9 +116,16 @@
   transition: color 0.15s;
 }
 
-.crumb-link:hover { color: var(--nc-neon); }
+.crumb-link:hover {
-.crumb-sep { color: var(--nc-text-dim); opacity: 0.5; }
+  color: var(--nc-neon);
-.crumb-current { color: var(--nc-text-muted); }
+}
+.crumb-sep {
+  color: var(--nc-text-dim);
+  opacity: 0.5;
+}
+.crumb-current {
+  color: var(--nc-text-muted);
+}
 
 /* ============================================================
    GAME HEADER
@@ -177,7 +184,10 @@
   color: var(--nc-text-muted);
 }
 
-.game-id strong { color: var(--nc-text); font-weight: 500; }
+.game-id strong {
+  color: var(--nc-text);
+  font-weight: 500;
+}
 
 .meta-dot {
   width: 3px;
@@ -197,9 +207,15 @@
   transition: color 0.15s;
 }
 
-.copy-btn:hover { color: var(--nc-neon); }
+.copy-btn:hover {
+  color: var(--nc-neon);
+}
 
-.header-actions { display: flex; gap: 8px; align-items: center; }
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 
 /* ============================================================
    BUTTONS
@@ -218,7 +234,9 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  transition: background 0.15s, border-color 0.15s;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
 }
 
 .btn:hover {
@@ -236,7 +254,9 @@
   flex-shrink: 0;
 }
 
-.btn-primary:hover { box-shadow: 0 0 20px rgba(255, 69, 200, 0.5); }
+.btn-primary:hover {
+  box-shadow: 0 0 20px rgba(255, 69, 200, 0.5);
+}
 
 .btn-ghost {
   background: transparent;
@@ -253,7 +273,9 @@
   transition: color 0.15s;
 }
 
-.btn-ghost:hover { color: var(--nc-neon); }
+.btn-ghost:hover {
+  color: var(--nc-neon);
+}
 
 /* ============================================================
    STATE MESSAGES (loading / error)
@@ -324,11 +346,21 @@
 }
 
 @keyframes slideIn {
-  from { opacity: 0; transform: translateY(-10px); }
+  from {
-  to   { opacity: 1; transform: translateY(0); }
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.completion-title { font-size: 15px; font-weight: 700; color: var(--nc-neon); }
+.completion-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--nc-neon);
+}
 
 .completion-sub {
   font-family: var(--nc-mono);
@@ -347,11 +379,16 @@
   text-decoration: none;
   border-bottom: 1px solid var(--nc-border-strong);
   padding-bottom: 2px;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
   flex-shrink: 0;
 }
 
-.completion-link:hover { color: var(--nc-neon); border-color: var(--nc-neon-soft); }
+.completion-link:hover {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+}
 
 /* ============================================================
    MAIN GRID
@@ -387,10 +424,14 @@
 
 :host-context(html:not([data-theme='dark'])) .status-strip {
   background: rgba(255, 61, 187, 0.06);
-  border-color: rgba(255, 61, 187, 0.20);
+  border-color: rgba(255, 61, 187, 0.2);
 }
 
-.status-left { display: inline-flex; align-items: center; gap: 10px; }
+.status-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
 
 .status-pulse {
   width: 8px;
@@ -403,11 +444,22 @@
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
+  0%,
-  50%       { opacity: 0.35; transform: scale(0.7); }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(0.7);
+  }
 }
 
-.status-text { font-weight: 500; color: var(--nc-text); letter-spacing: 0.02em; }
+.status-text {
+  font-weight: 500;
+  color: var(--nc-text);
+  letter-spacing: 0.02em;
+}
 
 .status-side {
   font-family: var(--nc-mono);
@@ -425,22 +477,32 @@
   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);
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 69, 200, 0.06);
 }
 
 :host-context(html:not([data-theme='dark'])) .board-wrap {
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 61, 187, 0.08);
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(255, 61, 187, 0.08);
 }
 
 .board-wrap.reviewing {
   border-color: var(--nc-warning-soft);
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 177, 58, 0.18);
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 177, 58, 0.18);
 }
 
 /* ============================================================
    SIDE COLUMN
 ============================================================ */
-.side { display: flex; flex-direction: column; gap: 12px; }
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 
 .side-card {
   background: var(--nc-surface);
@@ -459,7 +521,9 @@
   user-select: none;
 }
 
-.side-card-summary::-webkit-details-marker { display: none; }
+.side-card-summary::-webkit-details-marker {
+  display: none;
+}
 
 .side-card-title {
   font-size: 11px;
@@ -477,9 +541,17 @@
   letter-spacing: 0.08em;
 }
 
-.chev { color: var(--nc-text-dim); flex-shrink: 0; transition: transform 0.2s; }
+.chev {
-.side-card[open] .chev { transform: rotate(180deg); }
+  color: var(--nc-text-dim);
-.side-card[open] .side-card-summary { border-bottom: 1px solid var(--nc-border); }
+  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;
@@ -491,7 +563,10 @@
 /* ============================================================
    UCI INPUT
 ============================================================ */
-.uci-row { display: flex; gap: 6px; }
+.uci-row {
+  display: flex;
+  gap: 6px;
+}
 
 .uci-input {
   flex: 1;
@@ -506,10 +581,19 @@
   transition: border-color 0.15s;
 }
 
-.uci-input:focus { border-color: var(--nc-neon-soft); }
+.uci-input:focus {
-.uci-input::placeholder { color: var(--nc-text-dim); }
+  border-color: var(--nc-neon-soft);
+}
+.uci-input::placeholder {
+  color: var(--nc-text-dim);
+}
 
-.uci-hint { margin: 0; font-size: 11px; color: var(--nc-text-dim); line-height: 1.4; }
+.uci-hint {
+  margin: 0;
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  line-height: 1.4;
+}
 
 /* ============================================================
    BOARD DESIGN SEGMENTED CONTROL
@@ -531,10 +615,16 @@
   font-family: var(--nc-sans);
   letter-spacing: 0.08em;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
-.seg-btn.active { background: var(--nc-neon); color: #fff; font-weight: 700; }
+.seg-btn.active {
+  background: var(--nc-neon);
+  color: #fff;
+  font-weight: 700;
+}
 
 /* ============================================================
    RESIGN CONFIRM OVERLAY
@@ -588,7 +678,9 @@
   font-weight: 700;
 }
 
-.btn-danger-solid:hover { opacity: 0.88; }
+.btn-danger-solid:hover {
+  opacity: 0.88;
+}
 
 /* ============================================================
    TOAST
@@ -607,23 +699,41 @@
   letter-spacing: 0.08em;
   z-index: 500;
   opacity: 0;
-  transition: opacity 0.2s, transform 0.2s;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
   pointer-events: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
-.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
 
 /* ============================================================
    RESPONSIVE
 ============================================================ */
 @media (max-width: 1100px) {
-  .layout { grid-template-columns: 1fr; }
+  .layout {
-  .board-col { max-width: 560px; margin: 0 auto; }
+    grid-template-columns: 1fr;
+  }
+  .board-col {
+    max-width: 560px;
+    margin: 0 auto;
+  }
 }
 
 @media (max-width: 640px) {
-  .page { padding: 16px 16px 48px; }
+  .page {
-  .game-header { flex-direction: column; align-items: flex-start; gap: 12px; }
+    padding: 16px 16px 48px;
-  .game-title h1 { font-size: 20px; }
+  }
+  .game-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .game-title h1 {
+    font-size: 20px;
+  }
 }

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

@@ -1,16 +1,25 @@
 <app-promotion-dialog
   [isOpen]="facade.isPromotionDialogOpen"
   (promotionSelected)="facade.onPromotionSelected($event)"
-  (closed)="facade.onPromotionClosed()" />
+  (closed)="facade.onPromotionClosed()"
+/>
 
 <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">
+        <svg
-          <polyline points="15 18 9 12 15 6"/>
+          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>
@@ -31,9 +40,18 @@
           <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">
+              <svg
-                <rect x="9" y="9" width="13" height="13" rx="2"/>
+                width="13"
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                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>
@@ -46,11 +64,20 @@
 
       <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">
+          <svg
-            <polyline points="17 1 21 5 17 9"/>
+            width="14"
-            <path d="M3 11V9a4 4 0 0 1 4-4h14"/>
+            height="14"
-            <polyline points="7 23 3 19 7 15"/>
+            viewBox="0 0 24 24"
-            <path d="M21 13v2a4 4 0 0 1-4 4H3"/>
+            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>
@@ -86,7 +113,11 @@
         </div>
       }
 
-      @if (!facade.isGameFinished && ((whiteTimerMs !== null && whiteTimerMs <= 0) || (blackTimerMs !== null && blackTimerMs <= 0))) {
+      @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>
@@ -95,10 +126,8 @@
 
       <!-- Main layout -->
       <div class="layout">
-
         <!-- BOARD COLUMN -->
         <div class="board-col">
-
           <!-- Opponent (top) -->
           <app-player-card
             [name]="blackPlayerName"
@@ -106,7 +135,8 @@
             color="black"
             [isActive]="!flipped ? facade.state.turn === 'black' : facade.state.turn === 'white'"
             [clockDisplay]="!flipped ? blackClock : whiteClock"
-            [isLowTime]="!flipped ? isLowTimeBlack : isLowTimeWhite" />
+            [isLowTime]="!flipped ? isLowTimeBlack : isLowTimeWhite"
+          />
 
           <!-- Status strip -->
           <div class="status-strip">
@@ -126,7 +156,8 @@
               [selectedSquare]="facade.isReviewing ? null : facade.selectedSquare"
               [highlightedSquares]="facade.isReviewing ? [] : facade.highlightedSquares"
               [boardTheme]="boardTheme"
-              (squareSelected)="facade.onBoardSquareSelected($event)" />
+              (squareSelected)="facade.onBoardSquareSelected($event)"
+            />
           </div>
 
           <!-- Current player (bottom) -->
@@ -136,7 +167,8 @@
             color="white"
             [isActive]="!flipped ? facade.state.turn === 'white' : facade.state.turn === 'black'"
             [clockDisplay]="!flipped ? whiteClock : blackClock"
-            [isLowTime]="!flipped ? isLowTimeWhite : isLowTimeBlack" />
+            [isLowTime]="!flipped ? isLowTimeWhite : isLowTimeBlack"
+          />
 
           <!-- Board action buttons -->
           <app-board-actions-bar
@@ -144,35 +176,55 @@
             [isGameFinished]="facade.isGameFinished"
             (takeback)="onTakeback()"
             (offerDraw)="onOfferDraw()"
-            (resign)="onResign()" />
+            (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">
+              <svg
-                <polyline points="6 9 12 15 18 9"/>
+                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)" />
+              (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">
+              <svg
-                <polyline points="6 9 12 15 18 9"/>
+                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">
@@ -185,8 +237,11 @@
                   autocomplete="off"
                   [value]="facade.moveInput"
                   (input)="facade.moveInput = $any($event.target).value"
-                  (keydown.enter)="facade.submitMove()" />
+                  (keydown.enter)="facade.submitMove()"
-                <button class="btn btn-primary" type="button" (click)="facade.submitMove()">Send</button>
+                />
+                <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>
@@ -196,25 +251,47 @@
           <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">
+              <svg
-                <polyline points="6 9 12 15 18 9"/>
+                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
-                <button class="seg-btn" [class.active]="boardTheme === 'classic'" role="tab" (click)="setBoardTheme('classic')">Classic</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>
     }
-
   </div>
 </div>
 
@@ -226,7 +303,9 @@
       <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>
+        <button class="btn btn-danger-solid" type="button" (click)="facade.confirmResign()">
+          Yes, resign
+        </button>
       </div>
     </div>
   </div>

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

@@ -28,7 +28,7 @@ const BOARD_THEME_KEY = 'nowchess.boardTheme';
   ],
   providers: [GameFacade],
   templateUrl: './game.component.html',
-  styleUrl: './game.component.css'
+  styleUrl: './game.component.css',
 })
 export class GameComponent implements OnInit, OnDestroy {
   private readonly route = inject(ActivatedRoute);
@@ -141,11 +141,15 @@ export class GameComponent implements OnInit, OnDestroy {
 
   // ── Copy helpers ─────────────────────────────────────────────
   copyGameId(): void {
-    void navigator.clipboard?.writeText(this.facade.gameId).then(() => this.showToast('Game ID copied'));
+    void navigator.clipboard
+      ?.writeText(this.facade.gameId)
+      .then(() => this.showToast('Game ID copied'));
   }
 
   copyUrl(): void {
-    void navigator.clipboard?.writeText(window.location.href).then(() => this.showToast('Link copied'));
+    void navigator.clipboard
+      ?.writeText(window.location.href)
+      .then(() => this.showToast('Link copied'));
   }
 
   // ── Board actions ─────────────────────────────────────────────
@@ -166,7 +170,9 @@ export class GameComponent implements OnInit, OnDestroy {
     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 minutes = Math.floor(totalSeconds / 60)
+      .toString()
+      .padStart(2, '0');
     const seconds = (totalSeconds % 60).toString().padStart(2, '0');
     return `${minutes}:${seconds}`;
   }
@@ -188,15 +194,19 @@ export class GameComponent implements OnInit, OnDestroy {
 
     const elapsed = Math.max(0, Date.now() - this.facade.clockSyncedAt);
     const activeIsWhite = state!.turn === 'white';
-    this.whiteTimerMs = clock.whiteRemainingMs < 0
+    this.whiteTimerMs =
-      ? -1
+      clock.whiteRemainingMs < 0
-      : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
+        ? -1
-    this.blackTimerMs = clock.blackRemainingMs < 0
+        : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
-      ? -1
+    this.blackTimerMs =
-      : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
+      clock.blackRemainingMs < 0
+        ? -1
+        : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
 
-    if ((this.whiteTimerMs !== null && this.whiteTimerMs <= 0 && clock.whiteRemainingMs > 0) ||
+    if (
-        (this.blackTimerMs !== null && this.blackTimerMs <= 0 && clock.blackRemainingMs > 0)) {
+      (this.whiteTimerMs !== null && this.whiteTimerMs <= 0 && clock.whiteRemainingMs > 0) ||
+      (this.blackTimerMs !== null && this.blackTimerMs <= 0 && clock.blackRemainingMs > 0)
+    ) {
       this.facade.errorMessage = '';
     }
   }

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

@@ -32,7 +32,7 @@ export class GameFacade implements OnDestroy {
   private boardSelection: BoardSelection = {
     selectedSquare: null,
     highlightedSquares: [],
-    selectedSquareMoves: []
+    selectedSquareMoves: [],
   };
   private pendingPromotionMoves: LegalMove[] = [];
 
@@ -82,11 +82,19 @@ export class GameFacade implements OnDestroy {
 
     let next: number;
     switch (direction) {
-      case 'first': next = this.sessionStartPly; break;
+      case 'first':
-      case 'prev':  next = Math.max(this.sessionStartPly, current - 1); break;
+        next = this.sessionStartPly;
-      case 'next':  next = Math.min(totalPly, current + 1); break;
+        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;
+      default:
+        next = totalPly;
+        break;
     }
 
     if (next === totalPly) {
@@ -113,12 +121,17 @@ export class GameFacade implements OnDestroy {
     }
 
     // Handle move selection
-    if (this.boardSelection.selectedSquare && this.boardSelection.highlightedSquares.includes(square)) {
+    if (
-      const selectedMove = this.boardSelection.selectedSquareMoves.find((move) => move.to === square);
+      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;
@@ -142,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;
   }
@@ -187,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;
@@ -234,7 +249,7 @@ export class GameFacade implements OnDestroy {
       .subscribe({
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Could not resign.');
-        }
+        },
       });
   }
 
@@ -248,7 +263,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 
@@ -262,7 +277,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 
@@ -292,7 +307,7 @@ export class GameFacade implements OnDestroy {
         error: (error) => {
           this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
           this.loading = false;
-        }
+        },
       });
   }
 
@@ -300,7 +315,9 @@ export class GameFacade implements OnDestroy {
     this.streamService.startStreaming(
       this.gameId,
       (event) => this.applyStreamEvent(event),
-      () => { /* polling fallback — not an error */ }
+      () => {
+        /* polling fallback — not an error */
+      },
     );
   }
 
@@ -356,7 +373,7 @@ export class GameFacade implements OnDestroy {
       },
       (error) => {
         this.errorMessage = error;
-      }
+      },
     );
   }
 

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

@@ -9,8 +9,8 @@
   --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-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --nc-mono: "JetBrains Mono", "Fira Code", monospace;
+  --nc-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
   display: block;
   min-height: 100vh;
@@ -63,9 +63,13 @@
   transition: color 0.15s;
 }
 
-.crumb-link:hover { color: var(--nc-neon); }
+.crumb-link:hover {
+  color: var(--nc-neon);
+}
 
-.crumb-sep { opacity: 0.4; }
+.crumb-sep {
+  opacity: 0.4;
+}
 
 .crumb-current {
   color: var(--nc-text-muted);
@@ -113,17 +117,23 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
-.tab-btn:hover { color: var(--nc-text); }
+.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; }
+:host-context(html:not([data-theme='dark'])) .tab-btn.active {
+  color: #fff;
+}
 
 .tab-badge {
   background: rgba(255, 255, 255, 0.25);
@@ -154,8 +164,15 @@
 }
 
 @keyframes pulse-ring {
-  0%, 100% { opacity: 1; transform: scale(1); }
+  0%,
-  50% { opacity: 0.4; transform: scale(0.6); }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.6);
+  }
 }
 
 /* ── Empty state ────────────────────────── */
@@ -210,9 +227,13 @@
   transition: filter 0.15s;
 }
 
-:host-context(html:not([data-theme='dark'])) .btn-primary { color: #fff; }
+:host-context(html:not([data-theme='dark'])) .btn-primary {
+  color: #fff;
+}
 
-.btn-primary:hover { filter: brightness(1.1); }
+.btn-primary:hover {
+  filter: brightness(1.1);
+}
 
 /* ── Game list ──────────────────────────── */
 .game-list {
@@ -234,9 +255,13 @@
   transition: background 0.12s;
 }
 
-.game-row:last-child { border-bottom: none; }
+.game-row:last-child {
+  border-bottom: none;
+}
 
-.game-row:hover { background: rgba(255, 255, 255, 0.03); }
+.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);
@@ -257,7 +282,9 @@
   font-weight: 600;
 }
 
-.player { color: var(--nc-text); }
+.player {
+  color: var(--nc-text);
+}
 
 .vs-sep {
   font-size: 10px;
@@ -291,11 +318,17 @@
   background: var(--nc-text-dim);
 }
 
-.status-text { color: var(--nc-text-muted); }
+.status-text {
+  color: var(--nc-text-muted);
+}
 
-.meta-sep { opacity: 0.4; }
+.meta-sep {
+  opacity: 0.4;
+}
 
-.meta-item { color: var(--nc-text-dim); }
+.meta-item {
+  color: var(--nc-text-dim);
+}
 
 .game-id-label {
   font-size: 10px;
@@ -332,9 +365,13 @@
   color: #1a0014;
 }
 
-:host-context(html:not([data-theme='dark'])) .btn-resume { color: #fff; }
+:host-context(html:not([data-theme='dark'])) .btn-resume {
+  color: #fff;
+}
 
-.btn-resume:hover { filter: brightness(1.1); }
+.btn-resume:hover {
+  filter: brightness(1.1);
+}
 
 .btn-view {
   background: transparent;
@@ -357,7 +394,9 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 }
 
 .btn-remove:hover {

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

@@ -1,11 +1,18 @@
 <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"
+        <svg
-          stroke-linecap="round" stroke-linejoin="round">
+          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
@@ -20,15 +27,25 @@
 
       <!-- Tabs -->
       <div class="tabs" role="tablist">
-        <button type="button" class="tab-btn" [class.active]="tab === 'active'" role="tab"
+        <button
-          (click)="setTab('active')">
+          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"
+        <button
-          (click)="setTab('history')">
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'history'"
+          role="tab"
+          (click)="setTab('history')"
+        >
           History
         </button>
       </div>
@@ -41,14 +58,21 @@
         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"
+            <svg
-              stroke-linecap="round" stroke-linejoin="round">
+              width="32"
-              <rect x="2" y="2" width="20" height="20" rx="2"/>
+              height="32"
-              <path d="M8 12h8M12 8v8"/>
+              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>
@@ -76,16 +100,38 @@
               </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"
+                  <svg
-                    stroke-linecap="round" stroke-linejoin="round">
+                    width="12"
-                    <polygon points="5 3 19 12 5 21 5 3"/>
+                    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)">
+                <button
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  type="button"
-                    stroke-linecap="round" stroke-linejoin="round">
+                  class="btn-remove"
-                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                  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>
@@ -93,18 +139,26 @@
           }
         </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"
+            <svg
-              stroke-linecap="round" stroke-linejoin="round">
+              width="32"
-              <path d="M14.5 17.5L3 6"/>
+              height="32"
-              <path d="M13 19l6-6"/><path d="M16 16l4 4"/>
+              viewBox="0 0 24 24"
-              <path d="M19 21l2-2"/><path d="M15 5l4 4"/>
+              fill="none"
-              <path d="M21 3l-3 1-4 4"/>
+              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>
@@ -131,17 +185,39 @@
               </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"
+                  <svg
-                    stroke-linecap="round" stroke-linejoin="round">
+                    width="12"
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    height="12"
-                    <circle cx="12" cy="12" r="3"/>
+                    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)">
+                <button
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  type="button"
-                    stroke-linecap="round" stroke-linejoin="round">
+                  class="btn-remove"
-                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                  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>
@@ -149,8 +225,6 @@
           }
         </div>
       }
-
     }
-
   </div>
 </div>

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

@@ -11,7 +11,11 @@ import { GameFull, GameStatus } from '../../models/game.models';
 type GamesTab = 'active' | 'history';
 
 const FINISHED_STATUSES: GameStatus[] = [
-  'checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'
+  'checkmate',
+  'stalemate',
+  'resign',
+  'draw',
+  'insufficientMaterial',
 ];
 
 @Component({
@@ -19,7 +23,7 @@ const FINISHED_STATUSES: GameStatus[] = [
   standalone: true,
   imports: [RouterLink],
   templateUrl: './games.component.html',
-  styleUrl: './games.component.css'
+  styleUrl: './games.component.css',
 })
 export class GamesComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
@@ -34,11 +38,9 @@ export class GamesComponent implements OnInit {
   finishedGames: GameFull[] = [];
 
   ngOnInit(): void {
-    this.authService.currentUser$
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      if (!user) void this.router.navigate(['/']);
-      .subscribe((user) => {
+    });
-        if (!user) void this.router.navigate(['/']);
-      });
 
     this.loadGames();
   }
@@ -68,7 +70,7 @@ export class GamesComponent implements OnInit {
       drawOffered: 'Draw Offered',
       fiftyMoveAvailable: 'In Progress',
       promotionPending: 'In Progress',
-      insufficientMaterial: 'Draw'
+      insufficientMaterial: 'Draw',
     };
     return labels[status] ?? status;
   }
@@ -87,12 +89,16 @@ export class GamesComponent implements OnInit {
     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) {
+          if (
+            typeof err === 'object' &&
+            err !== null &&
+            (err as { status: number }).status === 404
+          ) {
             this.gameHistory.removeGame(id);
           }
           return of(null);
-        })
+        }),
-      )
+      ),
     );
 
     forkJoin(requests)

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% {
+  0%,
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
+  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% {
+  0%,
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  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 -->
+          <!-- Player Building with Info Inside -->
-        <div class="building-wrapper">
+          <div class="building-wrapper">
-          <div class="building-structure">
+            <div class="building-structure">
-            <!-- Building top -->
+              <!-- Building top -->
-            <div class="building-top"></div>
+              <div class="building-top"></div>
 
-            <!-- Building main section with user inside -->
+              <!-- Building main section with user inside -->
-            <div class="building-main">
+              <div class="building-main">
-              <!-- Left side windows -->
+                <!-- Left side windows -->
-              <div class="building-side left-side">
+                <div class="building-side left-side">
-                <div class="window"></div>
+                  <div class="window"></div>
-                <div class="window"></div>
+                  <div class="window"></div>
-                <div class="window"></div>
+                  <div class="window"></div>
-                <div class="window"></div>
+                  <div class="window"></div>
-              </div>
+                </div>
 
-              <!-- Center section - User Info -->
+                <!-- Center section - User Info -->
-              <div class="building-center">
+                <div class="building-center">
-                <div class="player-display-window">
+                  <div class="player-display-window">
-                  <div class="player-avatar">👤</div>
+                    <div class="player-avatar">👤</div>
-                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
+                    <div
-                  <div class="player-id-label">PLAYER ID</div>
+                      class="player-name"
-                  <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
+                      (click)="copyUsername(user.username)"
-                  @if (idCopied) {
+                      [class.copied]="usernameCopied"
-                  <div class="copy-notification">✓ COPIED</div>
+                      title="Click to copy"
-                  }
+                    >
-                  @if (usernameCopied) {
+                      {{ user.username }}
-                  <div class="copy-notification">✓ COPIED</div>
+                    </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 -->
+              <!-- Building base with stats -->
-              <div class="building-side right-side">
+              <div class="building-base">
-                <div class="window"></div>
+                <div class="stat-panel">
-                <div class="window"></div>
+                  <div class="stat">
-                <div class="window"></div>
+                    <span class="stat-label">RATING</span>
-                <div class="window"></div>
+                    <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 base with stats -->
+            <!-- Back button -->
-            <div class="building-base">
+            <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
-              <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>
-          
-          <!-- 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$
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      this.currentUser = user;
-      .subscribe((user) => {
+      if (!user) {
-        this.currentUser = user;
+        this.router.navigate(['']);
-        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

@@ -10,7 +10,7 @@
   --nc-success: #5ee5a1;
   --nc-danger: #ff7a7a;
   --nc-warn: #ffd166;
-  --nc-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --nc-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 
   display: block;
   min-height: 100vh;
@@ -33,7 +33,10 @@
   --nc-warn: #b45309;
 }
 
-.t-shell { padding-top: 72px; min-height: 100vh; }
+.t-shell {
+  padding-top: 72px;
+  min-height: 100vh;
+}
 
 .page {
   max-width: 760px;
@@ -43,151 +46,341 @@
 
 /* Breadcrumb */
 .crumb {
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
-  margin-bottom: 28px; font-size: 11px;
+  align-items: center;
-  color: var(--nc-text-dim); letter-spacing: 0.06em;
+  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;
+  display: inline-flex;
-  color: var(--nc-text-dim); text-decoration: none;
+  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-link:hover {
-.crumb-sep { opacity: 0.35; }
+  color: var(--nc-neon);
-.crumb-current { color: var(--nc-text-muted); }
+}
+.crumb-sep {
+  opacity: 0.35;
+}
+.crumb-current {
+  color: var(--nc-text-muted);
+}
 
 /* Header */
-.page-header { margin-bottom: 28px; }
+.page-header {
+  margin-bottom: 28px;
+}
 .page-title-row {
-  display: flex; align-items: center; justify-content: space-between;
+  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; }
+.page-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
 
 .btn-new {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex;
-  padding: 7px 14px; border-radius: 8px; border: none;
+  align-items: center;
-  background: var(--nc-neon); color: #fff;
+  gap: 6px;
-  font-size: 13px; font-weight: 600; cursor: pointer;
+  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; }
+.btn-new:hover {
+  opacity: 0.85;
+}
 
 /* Create dialog */
 .dialog-overlay {
-  position: fixed; inset: 0; z-index: 200;
+  position: fixed;
-  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
+  inset: 0;
-  display: flex; align-items: center; justify-content: center;
+  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);
+  background: var(--nc-bg);
-  border-radius: 16px; padding: 24px; width: 100%; max-width: 420px;
+  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;
+  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-brand {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--nc-neon);
+}
 .dialog-close {
-  background: none; border: none; cursor: pointer;
+  background: none;
-  font-size: 20px; line-height: 1; color: var(--nc-text-muted);
+  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-close:hover {
-.dialog-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
+  color: var(--nc-text);
-.dialog-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
+}
-  letter-spacing: 0.06em; color: var(--nc-text-muted); }
+.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;
+  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);
+  background: rgba(255, 255, 255, 0.04);
-  font-size: 14px; box-sizing: border-box;
+  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-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;
+  display: flex;
-  margin-bottom: 20px; user-select: none;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  user-select: none;
+}
+.dialog-toggle input[type='checkbox'] {
+  display: none;
 }
-.dialog-toggle input[type=checkbox] { display: none; }
 .toggle-track {
-  width: 36px; height: 20px; border-radius: 10px;
+  width: 36px;
-  background: var(--nc-border-strong); flex-shrink: 0;
+  height: 20px;
-  transition: background 0.2s; position: relative;
+  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;
+  content: '';
-  width: 14px; height: 14px; border-radius: 50%;
+  position: absolute;
-  background: var(--nc-text-muted); transition: transform 0.2s, background 0.2s;
+  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-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);
+  font-size: 13px;
-  background: rgba(255,122,122,0.1); border-radius: 8px;
+  color: var(--nc-danger);
-  padding: 10px 12px; margin-bottom: 16px;
+  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;
 }
-.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);
+  padding: 8px 16px;
-  background: transparent; color: var(--nc-text-muted); font-size: 13px; cursor: pointer;
+  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-ghost:hover { color: var(--nc-text); border-color: var(--nc-text-muted); }
 .btn-primary {
-  padding: 8px 18px; border-radius: 8px; border: none;
+  padding: 8px 18px;
-  background: var(--nc-neon); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+  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; }
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 /* Tabs */
-.tabs { display: flex; gap: 4px; }
+.tabs {
+  display: flex;
+  gap: 4px;
+}
 .tab-btn {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex;
-  padding: 6px 14px; border-radius: 8px; border: none;
+  align-items: center;
-  background: transparent; color: var(--nc-text-muted);
+  gap: 6px;
-  font-size: 13px; font-weight: 500; cursor: pointer;
+  padding: 6px 14px;
-  transition: background 0.15s, color 0.15s;
+  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-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;
+  display: inline-flex;
-  min-width: 18px; height: 18px; padding: 0 5px;
+  align-items: center;
-  border-radius: 9px; background: var(--nc-border-strong);
+  justify-content: center;
-  font-size: 10px; font-weight: 700; color: var(--nc-text-muted);
+  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);
 }
-.live-badge { background: rgba(94, 229, 161, 0.2); color: var(--nc-success); }
 
 /* States */
 .state-msg {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
-  padding: 24px 0; color: var(--nc-text-muted); font-size: 13px;
+  align-items: center;
+  gap: 10px;
+  padding: 24px 0;
+  color: var(--nc-text-muted);
+  font-size: 13px;
+}
+.state-msg.small {
+  padding: 12px 0;
 }
-.state-msg.small { padding: 12px 0; }
 .pulse {
-  width: 8px; height: 8px; border-radius: 50%;
+  width: 8px;
-  background: var(--nc-neon); flex-shrink: 0;
+  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); }
+  0%,
-  50% { opacity: 0.4; transform: scale(0.85); }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
 }
 
 .empty-state {
-  display: flex; flex-direction: column; align-items: center;
+  display: flex;
-  gap: 8px; padding: 64px 0; text-align: center;
+  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;
 }
-.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-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
 .t-card {
   border: 1px solid var(--nc-border);
@@ -195,135 +388,348 @@
   background: var(--nc-surface);
   overflow: hidden;
   cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
 }
-.t-card:hover, .t-card.expanded {
+.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-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;
+  padding: 5px 12px;
-  cursor: pointer; border: none; transition: opacity 0.15s; white-space: nowrap;
+  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;
 }
-.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-hint {
-.join-empty { font-size: 13px; color: var(--nc-text-muted); margin: 0 0 8px; }
+  font-size: 13px;
-.dialog-loading { display: flex; align-items: center; gap: 8px;
+  color: var(--nc-text-muted);
-  font-size: 13px; color: var(--nc-text-muted); padding: 12px 0; }
+  margin: 0 0 16px;
-.bot-pick-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
+  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;
+  display: flex;
-  padding: 10px 12px; border-radius: 8px;
+  align-items: center;
-  border: 1px solid var(--nc-border); background: var(--nc-surface);
+  gap: 10px;
-  cursor: pointer; text-align: left; width: 100%;
+  padding: 10px 12px;
-  transition: border-color 0.15s, background 0.15s;
+  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-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);
+  width: 30px;
-  color: #fff; display: flex; align-items: center; justify-content: center;
+  height: 30px;
-  font-size: 13px; font-weight: 700; flex-shrink: 0;
+  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);
 }
-.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;
+  display: flex;
-  padding: 14px 16px; gap: 12px;
+  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-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;
+  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);
 }
-.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-info {
-.t-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  display: flex;
-.t-meta { font-size: 11px; color: var(--nc-text-muted); }
+  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);
+  font-size: 11px;
-  padding: 3px 8px; border-radius: 6px;
+  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 {
-.chevron.open { transform: rotate(180deg); }
+  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;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.detail-section { display: flex; flex-direction: column; gap: 10px; }
+.detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 .detail-heading {
-  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  font-size: 11px;
-  text-transform: uppercase; color: var(--nc-text-muted); margin: 0;
+  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; }
+.no-standings {
+  font-size: 12px;
+  color: var(--nc-text-dim);
+  margin: 0;
+}
 
 /* Standings table */
 .standings-table {
-  width: 100%; border-collapse: collapse; font-size: 13px;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
 }
 .standings-table th {
-  text-align: left; padding: 6px 8px;
+  text-align: left;
-  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
+  padding: 6px 8px;
-  text-transform: uppercase; color: var(--nc-text-dim);
+  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 td {
-.standings-table tr:last-child td { border-bottom: none; }
+  padding: 8px 8px;
-.top-row td { color: var(--nc-text); }
+  border-bottom: 1px solid var(--nc-border);
-.standings-table tr:not(.top-row) td { color: var(--nc-text-muted); }
+}
+.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-rank {
-.col-pts { width: 48px; font-weight: 700; color: var(--nc-neon) !important; }
+  width: 40px;
-.col-tb { width: 52px; color: var(--nc-text-dim) !important; font-size: 12px; }
+  font-size: 14px;
-.col-games { width: 64px; }
+}
+.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; }
+.wdl {
-.w { color: var(--nc-success); }
+  font-size: 12px;
-.d { color: var(--nc-text-muted); }
+  font-variant-numeric: tabular-nums;
-.l { color: var(--nc-danger); }
+}
+.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; }
+.pairings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
 .pairing-row {
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
-  padding: 8px 10px; border-radius: 8px;
+  align-items: center;
-  background: rgba(255,255,255,0.025);
+  gap: 8px;
-  font-size: 13px; transition: background 0.15s;
+  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-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;
+  display: inline-flex;
-  margin-left: auto; font-size: 10px; font-weight: 700;
+  align-items: center;
-  color: var(--nc-success); letter-spacing: 0.06em; text-transform: uppercase;
+  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;
 }
-.pairing-ongoing svg { animation: pulse 1.4s ease-in-out infinite; }

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

@@ -1,10 +1,17 @@
 <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"
+        <svg
-          stroke-linecap="round" stroke-linejoin="round">
+          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
@@ -18,24 +25,52 @@
         <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"
+            <svg
-              stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+              width="13"
-              <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+              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')">
+        <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> }
+          @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')">
+        <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> }
+          @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')">
+        <button
+          type="button"
+          class="tab-btn"
+          [class.active]="tab === 'finished'"
+          (click)="setTab('finished')"
+        >
           Finished
         </button>
       </div>
@@ -46,12 +81,22 @@
     } @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"
+          <svg
-            stroke-linecap="round" stroke-linejoin="round">
+            width="32"
-            <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"/>
+            height="32"
-            <path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
+            viewBox="0 0 24 24"
-            <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
+            fill="none"
-            <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
+            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>
@@ -60,10 +105,14 @@
     } @else {
       <div class="t-list">
         @for (t of activeList; track t.id) {
-          <div class="t-card" [class.expanded]="selectedTournament?.id === t.id"
+          <div
-            (click)="selectTournament(t)" role="button" tabindex="0"
+            class="t-card"
-            (keydown.enter)="selectTournament(t)">
+            [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>
@@ -71,9 +120,13 @@
                   <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 }} · }
+                    @if (t.status === 'started') {
+                      Round {{ t.round }}/{{ t.nbRounds }} ·
+                    }
                     {{ t.nbPlayers }} player{{ t.nbPlayers === 1 ? '' : 's' }}
-                    @if (t.rated) { · Rated }
+                    @if (t.rated) {
+                      · Rated
+                    }
                   </span>
                 </div>
               </div>
@@ -83,28 +136,42 @@
                 }
                 @if (currentUser && t.status === 'created') {
                   @if (t.createdBy === currentUser.id) {
-                    <button type="button" class="t-action-btn t-btn-start"
+                    <button
+                      type="button"
+                      class="t-action-btn t-btn-start"
                       [disabled]="startingId === t.id"
-                      (click)="startTournament($event, t)">
+                      (click)="startTournament($event, t)"
+                    >
                       {{ startingId === t.id ? '…' : 'Start' }}
                     </button>
                   }
-                  <button type="button" class="t-action-btn t-btn-join"
+                  <button
-                    (click)="openJoinDialog($event, t.id)">
+                    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"
+                <svg
-                  width="14" height="14" viewBox="0 0 24 24" fill="none"
+                  class="chevron"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  [class.open]="selectedTournament?.id === t.id"
-                  <polyline points="6 9 12 15 18 9"/>
+                  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">
@@ -128,7 +195,9 @@
                             <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 class="w">{{ r.wins }}</span
+                                >/<span class="d">{{ r.draws }}</span
+                                >/<span class="l">{{ r.losses }}</span>
                               </span>
                             </td>
                           </tr>
@@ -149,19 +218,24 @@
                     } @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"
+                          <div
-                            (click)="p.gameId && watchGame(p.gameId)">
+                            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' }}
+                                {{
+                                  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"/>
+                                  <circle cx="12" cy="12" r="10" />
                                 </svg>
                                 Watch
                               </span>
@@ -174,100 +248,127 @@
                     }
                   </section>
                 }
-
               </div>
             }
           </div>
         }
       </div>
     }
-
   </div>
 </div>
 
 @if (joinDialogTournamentId) {
-<div class="dialog-overlay" (click)="closeJoinDialog()">
+  <div class="dialog-overlay" (click)="closeJoinDialog()">
-  <div class="dialog-card" (click)="$event.stopPropagation()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-head">
+      <div class="dialog-head">
-      <span class="dialog-brand">Join with a bot</span>
+        <span class="dialog-brand">Join with a bot</span>
-      <button type="button" class="dialog-close" (click)="closeJoinDialog()">×</button>
+        <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>
-    }
+      <p class="join-hint">
+        Select one of your bots to enter this tournament. Its token will be rotated to authenticate
+        the join.
+      </p>
 
-    @if (joinError) {
+      @if (botsLoading) {
-      <div class="dialog-error">{{ joinError }}</div>
+        <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>
-</div>
 }
 
 @if (showCreateDialog) {
-<div class="dialog-overlay" (click)="closeCreateDialog()">
+  <div class="dialog-overlay" (click)="closeCreateDialog()">
-  <div class="dialog-card" (click)="$event.stopPropagation()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-head">
+      <div class="dialog-head">
-      <span class="dialog-brand">New tournament</span>
+        <span class="dialog-brand">New tournament</span>
-      <button type="button" class="dialog-close" (click)="closeCreateDialog()">×</button>
+        <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>
-
-    <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

@@ -17,7 +17,7 @@ type StatusTab = 'started' | 'created' | 'finished';
   standalone: true,
   imports: [CommonModule, RouterLink, ReactiveFormsModule],
   templateUrl: './tournaments.component.html',
-  styleUrl: './tournaments.component.css'
+  styleUrl: './tournaments.component.css',
 })
 export class TournamentsComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
@@ -45,7 +45,7 @@ export class TournamentsComponent implements OnInit {
     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]
+    rated: [false],
   });
   createLoading = false;
   createError: string | null = null;
@@ -59,14 +59,20 @@ export class TournamentsComponent implements OnInit {
   joinError: string | null = null;
 
   ngOnInit(): void {
-    this.authService.currentUser$
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((u) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      this.currentUser = u;
-      .subscribe(u => { this.currentUser = u; });
+    });
     this.loadTournaments();
   }
 
   openCreateDialog(): void {
-    this.createForm.reset({ name: '', nbRounds: 4, clockLimitMinutes: 3, clockIncrement: 0, rated: false });
+    this.createForm.reset({
+      name: '',
+      nbRounds: 4,
+      clockLimitMinutes: 3,
+      clockIncrement: 0,
+      rated: false,
+    });
     this.createError = null;
     this.showCreateDialog = true;
   }
@@ -80,17 +86,17 @@ export class TournamentsComponent implements OnInit {
     this.createLoading = true;
     this.createError = null;
     this.tournamentService.create(this.createForm.value).subscribe({
-      next: t => {
+      next: (t) => {
         this.createLoading = false;
         this.showCreateDialog = false;
         this.created = [t, ...this.created];
         this.tab = 'created';
         this.selectedTournament = null;
       },
-      error: err => {
+      error: (err) => {
         this.createLoading = false;
         this.createError = err.error?.message ?? err.error?.error ?? 'Failed to create tournament.';
-      }
+      },
     });
   }
 
@@ -137,15 +143,18 @@ export class TournamentsComponent implements OnInit {
     event.stopPropagation();
     this.startingId = t.id;
     this.tournamentService.start(t.id).subscribe({
-      next: updated => {
+      next: (updated) => {
         this.startingId = null;
-        const list = this.created.map(x => x.id === t.id ? updated : x);
+        const list = this.created.map((x) => (x.id === t.id ? updated : x));
-        this.created = list.filter(x => x.status === 'created');
+        this.created = list.filter((x) => x.status === 'created');
-        if (!this.started.find(x => x.id === updated.id)) this.started = [updated, ...this.started];
+        if (!this.started.find((x) => x.id === updated.id))
+          this.started = [updated, ...this.started];
         this.selectedTournament = updated;
         this.tab = 'started';
       },
-      error: () => { this.startingId = null; }
+      error: () => {
+        this.startingId = null;
+      },
     });
   }
 
@@ -158,11 +167,17 @@ export class TournamentsComponent implements OnInit {
     this.joinDialogTournamentId = tournamentId;
     this.joinError = null;
     this.botsLoading = true;
-    this.botService.list()
+    this.botService
+      .list()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: bots => { this.userBots = bots; this.botsLoading = false; },
+        next: (bots) => {
-        error: () => { this.botsLoading = false; }
+          this.userBots = bots;
+          this.botsLoading = false;
+        },
+        error: () => {
+          this.botsLoading = false;
+        },
       });
   }
 
@@ -177,38 +192,40 @@ export class TournamentsComponent implements OnInit {
     this.joiningBotId = bot.id;
     this.joinError = null;
     this.botService.rotateToken(bot.id).subscribe({
-      next: token => {
+      next: (token) => {
         this.tournamentService.joinWithBotToken(this.joinDialogTournamentId!, token).subscribe({
           next: () => {
             this.joiningBotId = null;
             const tid = this.joinDialogTournamentId!;
             this.closeJoinDialog();
-            this.tournamentService.get(tid)
+            this.tournamentService
+              .get(tid)
               .pipe(takeUntilDestroyed(this.destroyRef))
-              .subscribe(updated => {
+              .subscribe((updated) => {
-                this.created = this.created.map(x => x.id === tid ? updated : x);
+                this.created = this.created.map((x) => (x.id === tid ? updated : x));
-                this.started = this.started.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 => {
+          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()
+    this.tournamentService
+      .list()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: list => {
+        next: (list) => {
           this.started = list.started;
           this.created = list.created;
           this.finished = list.finished;
@@ -216,17 +233,25 @@ export class TournamentsComponent implements OnInit {
           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; }
+        error: () => {
+          this.loading = false;
+        },
       });
   }
 
   private loadPairings(id: string, round: number): void {
     this.pairingsLoading = true;
-    this.tournamentService.roundPairings(id, round)
+    this.tournamentService
+      .roundPairings(id, round)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: p => { this.pairings = p; this.pairingsLoading = false; },
+        next: (p) => {
-        error: () => { this.pairingsLoading = false; }
+          this.pairings = p;
+          this.pairingsLoading = false;
+        },
+        error: () => {
+          this.pairingsLoading = false;
+        },
       });
   }
 }

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

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -12,13 +12,16 @@
     />
     <style>
       :root {
-        --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+        --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
         --neon: #ff45c8;
         --neon-soft: rgba(255, 69, 200, 0.55);
       }
-      * { box-sizing: border-box; }
+      * {
-      html, body {
+        box-sizing: border-box;
+      }
+      html,
+      body {
         margin: 0;
         padding: 0;
         background: #06060d;
@@ -27,40 +30,83 @@
         overflow: hidden;
         min-height: 100vh;
       }
-      button, input { font-family: var(--sans); }
+      button,
-      input { color: #fff; }
+      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;
+        -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 {
-      ::-webkit-scrollbar-track { background: transparent; }
+        width: 8px;
-      ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
+        height: 8px;
-      ::-webkit-scrollbar-thumb:hover { background: rgba(255,69,200,0.3); }
+      }
+      ::-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%); }
+        0% {
-        100% { transform: translateY(100%); }
+          transform: translateY(-100%);
+        }
+        100% {
+          transform: translateY(100%);
+        }
       }
       @keyframes pulse-glow {
-        0%, 100% { opacity: 0.85; }
+        0%,
-        50% { opacity: 1; }
+        100% {
+          opacity: 0.85;
+        }
+        50% {
+          opacity: 1;
+        }
       }
       @keyframes dialog-in {
-        from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
+        from {
-        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+          opacity: 0;
+          transform: translate(-50%, -48%) scale(0.96);
+        }
+        to {
+          opacity: 1;
+          transform: translate(-50%, -50%) scale(1);
+        }
       }
       @keyframes backdrop-in {
-        from { opacity: 0; }
+        from {
-        to { opacity: 1; }
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
       @keyframes shake {
-        0%, 100% { transform: translateX(0); }
+        0%,
-        20%, 60% { transform: translateX(-4px); }
+        100% {
-        40%, 80% { transform: translateX(4px); }
+          transform: translateX(0);
+        }
+        20%,
+        60% {
+          transform: translateX(-4px);
+        }
+        40%,
+        80% {
+          transform: translateX(4px);
+        }
       }
     </style>
   </head>

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

@@ -49,8 +49,8 @@
 
 .cityscape-shell.sunset {
   --sky-1: #4d3279;
-  --sky-2: #5A5485;
+  --sky-2: #5a5485;
-  --sky-3: #996C96;
+  --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),
+  background-image:
-    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(120, 120, 200, 0.08) 12px, rgba(120, 120, 200, 0.08) 14px);
+    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 {

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,118 +19,156 @@
     </div>
 
     <div class="main-layer">
-      <div class="bwrap" style="left:2.5%;width:16%;">
+      <div class="bwrap" style="left: 2.5%; width: 16%">
-        <div class="ant" style="height:38px;"></div>
+        <div class="ant" style="height: 38px"></div>
-        <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
+        <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="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="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="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>
       </div>
 
-      <div class="bwrap" style="left:21%;width:15%;">
+      <div class="bwrap" style="left: 21%; width: 15%">
-        <div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
+        <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="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 class="bpart" style="height: 44vh">
-          <div style="padding:5px 5px 0;">
+          <div style="padding: 5px 5px 0">
-            <div style="text-align:center;padding:4px 0 6px;">
+            <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 style="display: flex; justify-content: center; gap: 16px; margin-bottom: 0">
-          <div class="ant" style="height:65px;margin-top:-15px;"></div>
+          <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
-          <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
+          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="bpart" style="height: 10vh">
-          <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
+          <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 class="bpart" style="height: 48vh">
-          <div style="padding:6px 6px 0;">
+          <div style="padding: 6px 6px 0">
-            <div class="bb" style="padding:14px 14px 12px;">
+            <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="bwrap" style="left: 63%; width: 18%">
-        <div class="ant" style="height:30px;"></div>
+        <div class="ant" style="height: 30px"></div>
-        <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
+        <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="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 class="bpart" style="height: 42vh">
-          <div style="padding:5px 5px 0;">
+          <div style="padding: 5px 5px 0">
-            <div style="text-align:center;padding:4px 0 6px;">
+            <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="bwrap" style="left: 83%; width: 10%">
-        <div class="bpart" style="height:30vh;">
+        <div class="bpart" style="height: 30vh">
-          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
+          <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>
@@ -143,84 +180,140 @@
   </div>
 
   @if (showDifficultyDialog) {
-  <div class="dialog-overlay" (click)="closeDifficultyDialog()">
+    <div class="dialog-overlay" (click)="closeDifficultyDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">SELECT DIFFICULTY</div>
+        <div class="dialog-title">SELECT DIFFICULTY</div>
-      <div class="dialog-actions">
+        <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('easy')" [disabled]="creating">
-        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
+            EASY
-        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
+          </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-overlay" (click)="closeOptionsDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">MORE OPTIONS</div>
+        <div class="dialog-title">MORE OPTIONS</div>
-      <div class="dialog-actions">
+        <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
+          <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-overlay" (click)="closeJoinDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">JOIN GAME</div>
+        <div class="dialog-title">JOIN GAME</div>
-      <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
+        <input
-        [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
+          type="text"
-      <div class="dialog-actions">
+          class="dialog-input"
-        <button type="button" class="app-btn" (click)="submitJoinGame()"
+          [(ngModel)]="gameIdInput"
-          [disabled]="joiningGame || !gameIdInput.trim()">
+          placeholder="Paste game ID here"
-          {{ joiningGame ? 'JOINING...' : 'JOIN' }}
+          [disabled]="joiningGame"
-        </button>
+          (keyup.enter)="submitJoinGame()"
-        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
+        />
+        <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-overlay" (click)="closeImportDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">IMPORT GAME</div>
+        <div class="dialog-title">IMPORT GAME</div>
-      <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
+        <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
-        <label class="import-mode-option">
+          <label class="import-mode-option">
-          <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
+            <input
-            [disabled]="importing" />
+              type="radio"
-          <span>FEN</span>
+              name="importMode"
-        </label>
+              [checked]="importMode === 'fen'"
-        <label class="import-mode-option">
+              (change)="setImportMode('fen')"
-          <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
+              [disabled]="importing"
-            [disabled]="importing" />
+            />
-          <span>PGN</span>
+            <span>FEN</span>
-        </label>
+          </label>
-      </div>
+          <label class="import-mode-option">
-      <textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
+            <input
-        [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
+              type="radio"
-        rows="5"></textarea>
+              name="importMode"
-      <div class="dialog-actions">
+              [checked]="importMode === 'pgn'"
-        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
+              (change)="setImportMode('pgn')"
-          {{ importing ? 'IMPORTING...' : 'IMPORT' }}
+              [disabled]="importing"
-        </button>
+            />
-        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
+            <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-overlay" (click)="closeChallengeDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
-      <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+        <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>

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);
@@ -93,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$
@@ -105,12 +104,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
         this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
       });
 
-    this.authService.currentUser$
+    this.authService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      this.currentUser = user;
-      .subscribe((user) => {
+      this.maybeRunPendingAction();
-        this.currentUser = user;
+    });
-        this.maybeRunPendingAction();
-      });
 
     this.authDialogService.dialogState$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -130,7 +127,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openDifficultyDialog(): void {
-    if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
+    if (!this.requireAuth(() => (this.showDifficultyDialog = true))) {
       return;
     }
 
@@ -154,7 +151,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openJoinDialog(): void {
-    if (!this.requireAuth(() => this.showJoinDialog = true)) {
+    if (!this.requireAuth(() => (this.showJoinDialog = true))) {
       return;
     }
 
@@ -172,7 +169,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openImportDialog(): void {
-    if (!this.requireAuth(() => this.showImportDialog = true)) {
+    if (!this.requireAuth(() => (this.showImportDialog = true))) {
       return;
     }
 
@@ -257,7 +254,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     action();
   }
 
-
   private performStartVsBot(difficulty: Difficulty): void {
     if (this.creating) {
       return;
@@ -273,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.');
-        }
+        },
       });
   }
 
@@ -298,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.');
-        }
+        },
       });
   }
 
@@ -317,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);
-      }
+      },
     });
   }
 
@@ -351,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`,
-        }
+        },
       };
     });
   }
@@ -381,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 },
     }));
   }
 
@@ -401,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),
     };
   }
 
@@ -416,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];
@@ -432,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,
@@ -441,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`,
-      }
+      },
     };
   }
 
@@ -484,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 {
+  openLogin(): void {
-        this.dialogStateSubject.next('login');
+    this.dialogStateSubject.next('login');
-    }
+  }
 
-    openRegister(): void {
+  openRegister(): void {
-        this.dialogStateSubject.next('register');
+    this.dialogStateSubject.next('register');
-    }
+  }
 
-    close(): void {
+  close(): void {
-        this.dialogStateSubject.next(null);
+    this.dialogStateSubject.next(null);
-    }
+  }
 }

src/app/services/auth.interceptor.ts

@@ -14,8 +14,8 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
   if (token && isProtectedEndpoint && !req.headers.has('Authorization')) {
     req = req.clone({
       setHeaders: {
-        Authorization: `Bearer ${token}`
+        Authorization: `Bearer ${token}`,
-      }
+      },
     });
   }
 

src/app/services/auth.service.ts

@@ -3,7 +3,13 @@ import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
 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,7 +28,7 @@ export class AuthService {
     return this.http
       .post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
         username,
-        password
+        password,
       })
       .pipe(
         tap((response) => {
@@ -30,7 +36,7 @@ export class AuthService {
           localStorage.setItem('refreshToken', response.refreshToken);
           localStorage.setItem('username', username);
           this.getCurrentUser().subscribe();
-        })
+        }),
       );
   }
 
@@ -39,13 +45,9 @@ export class AuthService {
       .post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
         username,
         password,
-        email
+        email,
       })
-      .pipe(
+      .pipe(switchMap((response) => this.login(username, password).pipe(map(() => response))));
-        switchMap((response) =>
-          this.login(username, password).pipe(map(() => response))
-        )
-      );
   }
 
   getCurrentUser(): Observable<CurrentUser> {
@@ -54,7 +56,7 @@ export class AuthService {
         localStorage.setItem('username', user.username);
         localStorage.setItem('userId', user.id);
         this.currentUserSubject.next(user);
-      })
+      }),
     );
   }
 
@@ -80,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(
+      .pipe(delay(1000), takeUntilDestroyed(this.destroyRef))
-        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

@@ -17,8 +17,9 @@ export class BotService {
   }
 
   rotateToken(botId: string): Observable<string> {
-    return this.http.post<{ token: string }>(`${this.base}/${botId}/rotate-token`, null)
+    return this.http
-      .pipe(map(r => r.token));
+      .post<{ token: string }>(`${this.base}/${botId}/rotate-token`, null)
+      .pipe(map((r) => r.token));
   }
 
   delete(botId: string): Observable<void> {

src/app/services/challenge-event.service.ts

@@ -8,71 +8,71 @@ import { Challenge } from '../models/challenge.models';
  */
 @Injectable({ providedIn: 'root' })
 export class ChallengeEventService {
-    private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
+  private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
-    private readonly challengeReceived$ = new Subject<Challenge>();
+  private readonly challengeReceived$ = new Subject<Challenge>();
-    private readonly challengeAccepted$ = new Subject<Challenge>();
+  private readonly challengeAccepted$ = new Subject<Challenge>();
-    private readonly challengeDeclined$ = new Subject<Challenge>();
+  private readonly challengeDeclined$ = new Subject<Challenge>();
 
-    getIncomingChallenges$(): Observable<Challenge[]> {
+  getIncomingChallenges$(): Observable<Challenge[]> {
-        return this.incomingChallenges$.asObservable();
+    return this.incomingChallenges$.asObservable();
-    }
+  }
 
-    getChallengeReceived$(): Observable<Challenge> {
+  getChallengeReceived$(): Observable<Challenge> {
-        return this.challengeReceived$.asObservable();
+    return this.challengeReceived$.asObservable();
-    }
+  }
 
-    getChallengeAccepted$(): Observable<Challenge> {
+  getChallengeAccepted$(): Observable<Challenge> {
-        return this.challengeAccepted$.asObservable();
+    return this.challengeAccepted$.asObservable();
-    }
+  }
 
-    getChallengeDeclined$(): Observable<Challenge> {
+  getChallengeDeclined$(): Observable<Challenge> {
-        return this.challengeDeclined$.asObservable();
+    return this.challengeDeclined$.asObservable();
-    }
+  }
 
-    /**
+  /**
-     * Called when a new challenge is received via WebSocket
+   * Called when a new challenge is received via WebSocket
-     */
+   */
-    onChallengeReceived(challenge: Challenge): void {
+  onChallengeReceived(challenge: Challenge): void {
-        const current = this.incomingChallenges$.value;
+    const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next([...current, challenge]);
+    this.incomingChallenges$.next([...current, challenge]);
-        this.challengeReceived$.next(challenge);
+    this.challengeReceived$.next(challenge);
-    }
+  }
 
-    /**
+  /**
-     * Called when a challenge is accepted
+   * Called when a challenge is accepted
-     */
+   */
-    onChallengeAccepted(challenge: Challenge): void {
+  onChallengeAccepted(challenge: Challenge): void {
-        const current = this.incomingChallenges$.value;
+    const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
+    this.incomingChallenges$.next(current.filter((c) => c.id !== challenge.id));
-        this.challengeAccepted$.next(challenge);
+    this.challengeAccepted$.next(challenge);
-    }
+  }
 
-    /**
+  /**
-     * Called when a challenge is declined or expires
+   * Called when a challenge is declined or expires
-     */
+   */
-    onChallengeRemoved(challengeId: string): void {
+  onChallengeRemoved(challengeId: string): void {
-        const current = this.incomingChallenges$.value;
+    const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
+    this.incomingChallenges$.next(current.filter((c) => c.id !== challengeId));
-    }
+  }
 
-    /**
+  /**
-     * Remove a challenge from the incoming list
+   * Remove a challenge from the incoming list
-     */
+   */
-    removeChallenge(challengeId: string): void {
+  removeChallenge(challengeId: string): void {
-        this.onChallengeRemoved(challengeId);
+    this.onChallengeRemoved(challengeId);
-    }
+  }
 
-    /**
+  /**
-     * Replace the full incoming list (used by HTTP polling)
+   * Replace the full incoming list (used by HTTP polling)
-     */
+   */
-    setIncomingChallenges(challenges: Challenge[]): void {
+  setIncomingChallenges(challenges: Challenge[]): void {
-        this.incomingChallenges$.next(challenges);
+    this.incomingChallenges$.next(challenges);
-    }
+  }
 
-    /**
+  /**
-     * Clear all incoming challenges (used on logout)
+   * Clear all incoming challenges (used on logout)
-     */
+   */
-    clear(): void {
+  clear(): void {
-        this.incomingChallenges$.next([]);
+    this.incomingChallenges$.next([]);
-    }
+  }
 }

src/app/services/challenge-websocket.service.ts

@@ -6,110 +6,114 @@ import { ChallengeService } from './challenge.service';
 
 @Injectable({ providedIn: 'root' })
 export class ChallengeWebSocketService {
-    private readonly challengeEventService = inject(ChallengeEventService);
+  private readonly challengeEventService = inject(ChallengeEventService);
-    private readonly challengeService = inject(ChallengeService);
+  private readonly challengeService = inject(ChallengeService);
-    private readonly router = inject(Router);
+  private readonly router = inject(Router);
 
-    private ws: WebSocket | null = null;
+  private ws: WebSocket | null = null;
-    private reconnectAttempts = 0;
+  private reconnectAttempts = 0;
-    private readonly maxReconnectAttempts = 5;
+  private readonly maxReconnectAttempts = 5;
-    private readonly reconnectDelay = 3000;
+  private readonly reconnectDelay = 3000;
-    private intentionalClose = false;
+  private intentionalClose = false;
 
-    connect(): void {
+  connect(): void {
-        if (this.ws) return;
+    if (this.ws) return;
 
-        const token = localStorage.getItem('token');
+    const token = localStorage.getItem('token');
-        if (!token) return;
+    if (!token) return;
 
-        const url = `${environment.userWsBaseUrl}/api/user/ws?token=${encodeURIComponent(token)}`;
+    const url = `${environment.userWsBaseUrl}/api/user/ws?token=${encodeURIComponent(token)}`;
 
-        try {
+    try {
-            this.intentionalClose = false;
+      this.intentionalClose = false;
-            this.ws = new WebSocket(url);
+      this.ws = new WebSocket(url);
 
-            this.ws.onopen = () => {
+      this.ws.onopen = () => {
-                this.reconnectAttempts = 0;
-            };
-
-            this.ws.onmessage = (event) => {
-                this.handleMessage(event.data as string);
-            };
-
-            this.ws.onerror = () => {
-                // onclose fires right after, handles reconnect
-            };
-
-            this.ws.onclose = () => {
-                this.ws = null;
-                if (!this.intentionalClose) {
-                    this.attemptReconnect();
-                }
-            };
-        } catch {
-            this.attemptReconnect();
-        }
-    }
-
-    disconnect(): void {
-        this.intentionalClose = true;
         this.reconnectAttempts = 0;
-        if (this.ws) {
+      };
-            this.ws.close();
+
-            this.ws = null;
+      this.ws.onmessage = (event) => {
+        this.handleMessage(event.data as string);
+      };
+
+      this.ws.onerror = () => {
+        // onclose fires right after, handles reconnect
+      };
+
+      this.ws.onclose = () => {
+        this.ws = null;
+        if (!this.intentionalClose) {
+          this.attemptReconnect();
         }
+      };
+    } catch {
+      this.attemptReconnect();
+    }
+  }
+
+  disconnect(): void {
+    this.intentionalClose = true;
+    this.reconnectAttempts = 0;
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  private handleMessage(data: string): void {
+    let message: Record<string, unknown>;
+    try {
+      message = JSON.parse(data) as Record<string, unknown>;
+    } catch {
+      return;
     }
 
-    private handleMessage(data: string): void {
+    switch (message['type']) {
-        let message: Record<string, unknown>;
+      case 'CONNECTED':
-        try {
+        break;
-            message = JSON.parse(data) as Record<string, unknown>;
+
-        } catch {
+      case 'challengeCreated': {
-            return;
+        const challengeId = message['challengeId'] as string | undefined;
+        if (challengeId) {
+          this.challengeService.getChallenge(challengeId).subscribe({
+            next: (challenge) => this.challengeEventService.onChallengeReceived(challenge),
+            error: () => {
+              /* challenge may have already expired */
+            },
+          });
         }
+        break;
+      }
 
-        switch (message['type']) {
+      case 'challengeAccepted': {
-            case 'CONNECTED':
+        const challengeId = message['challengeId'] as string | undefined;
-                break;
+        const gameId = message['gameId'] as string | undefined;
-
+        if (challengeId) {
-            case 'challengeCreated': {
+          this.challengeEventService.removeChallenge(challengeId);
-                const challengeId = message['challengeId'] as string | undefined;
-                if (challengeId) {
-                    this.challengeService.getChallenge(challengeId).subscribe({
-                        next: challenge => this.challengeEventService.onChallengeReceived(challenge),
-                        error: () => { /* challenge may have already expired */ }
-                    });
-                }
-                break;
-            }
-
-            case 'challengeAccepted': {
-                const challengeId = message['challengeId'] as string | undefined;
-                const gameId = message['gameId'] as string | undefined;
-                if (challengeId) {
-                    this.challengeEventService.removeChallenge(challengeId);
-                }
-                if (gameId) {
-                    void this.router.navigate(['/game', gameId]);
-                }
-                break;
-            }
-
-            case 'challengeDeclined':
-            case 'challengeExpired':
-            case 'challengeCancelled': {
-                const challengeId = message['challengeId'] as string | undefined;
-                if (challengeId) {
-                    this.challengeEventService.removeChallenge(challengeId);
-                }
-                break;
-            }
         }
-    }
+        if (gameId) {
+          void this.router.navigate(['/game', gameId]);
+        }
+        break;
+      }
 
-    private attemptReconnect(): void {
+      case 'challengeDeclined':
-        if (this.intentionalClose || this.reconnectAttempts >= this.maxReconnectAttempts) return;
+      case 'challengeExpired':
-        this.reconnectAttempts++;
+      case 'challengeCancelled': {
-        setTimeout(() => { this.connect(); }, this.reconnectDelay);
+        const challengeId = message['challengeId'] as string | undefined;
+        if (challengeId) {
+          this.challengeEventService.removeChallenge(challengeId);
+        }
+        break;
+      }
     }
+  }
+
+  private attemptReconnect(): void {
+    if (this.intentionalClose || this.reconnectAttempts >= this.maxReconnectAttempts) return;
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect();
+    }, this.reconnectDelay);
+  }
 }

src/app/services/challenge.service.ts

@@ -1,50 +1,39 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallengeRequest } from '../models/challenge.models';
+import {
+  Challenge,
+  DeclineChallengeRequest,
+  ListChallengesResponse,
+  SendChallengeRequest,
+} from '../models/challenge.models';
 
 @Injectable({ providedIn: 'root' })
 export class ChallengeService {
-    private readonly http = inject(HttpClient);
+  private readonly http = inject(HttpClient);
-    private readonly challengeBaseUrl = '/api/challenge';
+  private readonly challengeBaseUrl = '/api/challenge';
 
-    sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
+  sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
-        return this.http.post<Challenge>(
+    return this.http.post<Challenge>(`${this.challengeBaseUrl}/${username}`, request);
-            `${this.challengeBaseUrl}/${username}`,
+  }
-            request
-        );
-    }
 
-    listChallenges(): Observable<ListChallengesResponse> {
+  listChallenges(): Observable<ListChallengesResponse> {
-        return this.http.get<ListChallengesResponse>(
+    return this.http.get<ListChallengesResponse>(`${this.challengeBaseUrl}`);
-            `${this.challengeBaseUrl}`
+  }
-        );
-    }
 
-    getChallenge(challengeId: string): Observable<Challenge> {
+  getChallenge(challengeId: string): Observable<Challenge> {
-        return this.http.get<Challenge>(
+    return this.http.get<Challenge>(`${this.challengeBaseUrl}/${challengeId}`);
-            `${this.challengeBaseUrl}/${challengeId}`
+  }
-        );
-    }
 
-    acceptChallenge(challengeId: string): Observable<Challenge> {
+  acceptChallenge(challengeId: string): Observable<Challenge> {
-        return this.http.post<Challenge>(
+    return this.http.post<Challenge>(`${this.challengeBaseUrl}/${challengeId}/accept`, {});
-            `${this.challengeBaseUrl}/${challengeId}/accept`,
+  }
-            {}
-        );
-    }
 
-    declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
+  declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
-        return this.http.post<void>(
+    return this.http.post<void>(`${this.challengeBaseUrl}/${challengeId}/decline`, request || {});
-            `${this.challengeBaseUrl}/${challengeId}/decline`,
+  }
-            request || {}
-        );
-    }
 
-    cancelChallenge(challengeId: string): Observable<void> {
+  cancelChallenge(challengeId: string): Observable<void> {
-        return this.http.post<void>(
+    return this.http.post<void>(`${this.challengeBaseUrl}/${challengeId}/cancel`, {});
-            `${this.challengeBaseUrl}/${challengeId}/cancel`,
+  }
-            {}
-        );
-    }
 }

src/app/services/game-api.service.ts

@@ -7,8 +7,9 @@ import {
   GameState,
   GameStreamEvent,
   LegalMovesResponse,
-  PlayerInfo
+  PlayerInfo,
 } from '../models/game.models';
+import { AnalysisRequest, AnalysisResponse } from '../models/analysis.models';
 import { StreamHandlerService } from './stream-handler.service';
 
 @Injectable({ providedIn: 'root' })
@@ -28,11 +29,11 @@ export class GameApiService {
     const playerColor = Math.random() > 0.5 ? 'white' : 'black';
     const playerInfo: PlayerInfo = {
       id: `player-${Date.now()}`,
-      displayName: 'You'
+      displayName: 'You',
     };
     const botInfo: PlayerInfo = {
       id: `bot-${difficulty}`,
-      displayName: `Bot (${difficulty})`
+      displayName: `Bot (${difficulty})`,
     };
 
     const payload =
@@ -40,7 +41,7 @@ export class GameApiService {
         ? { white: playerInfo, black: botInfo }
         : { white: botInfo, black: playerInfo };
 
-    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}`, payload);
+    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}/vs-bot`, payload);
   }
 
   getGame(gameId: string): Observable<GameFull> {
@@ -56,7 +57,9 @@ export class GameApiService {
     if (square) {
       params = params.set('square', square);
     }
-    return this.http.get<LegalMovesResponse>(`${this.apiBase}${this.apiPath}/${gameId}/moves`, { params });
+    return this.http.get<LegalMovesResponse>(`${this.apiBase}${this.apiPath}/${gameId}/moves`, {
+      params,
+    });
   }
 
   importFen(fen: string): Observable<GameFull> {
@@ -75,6 +78,10 @@ export class GameApiService {
     return this.http.post<void>(`${this.apiBase}${this.apiPath}/${gameId}/draw/offer`, {});
   }
 
+  analyzePosition(request: AnalysisRequest): Observable<AnalysisResponse> {
+    return this.http.post<AnalysisResponse>(`${this.apiBase}/api/analysis/position`, request);
+  }
+
   private resolveWsBase(): string {
     if (this.wsBase) {
       return this.wsBase;

src/app/services/game-completion.service.ts

@@ -14,7 +14,13 @@ export class GameCompletionService {
     }
 
     const status = state.status;
-    const gameEndingStatuses: GameStatus[] = ['checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'];
+    const gameEndingStatuses: GameStatus[] = [
+      'checkmate',
+      'stalemate',
+      'resign',
+      'draw',
+      'insufficientMaterial',
+    ];
 
     if (!gameEndingStatuses.includes(status)) {
       return { isFinished: false, message: '' };
@@ -30,8 +36,18 @@ export class GameCompletionService {
   }
 
   private buildCompletionMessage(status: GameStatus, state: GameState, game: GameFull): string {
-    const winner = state.winner === 'white' ? game.white.displayName : state.winner === 'black' ? game.black.displayName : null;
+    const winner =
-    const loser  = state.winner === 'white' ? game.black.displayName : state.winner === 'black' ? game.white.displayName : null;
+      state.winner === 'white'
+        ? game.white.displayName
+        : state.winner === 'black'
+          ? game.black.displayName
+          : null;
+    const loser =
+      state.winner === 'white'
+        ? game.black.displayName
+        : state.winner === 'black'
+          ? game.white.displayName
+          : null;
 
     switch (status) {
       case 'checkmate':