ci: bump version to v0.2.8

POST /api/board/game is @InternalOnly and returns 401 for browser clients.
Switch to /api/board/game/vs-bot which is @PermitAll and notifies the
official-bots service to play the bot side automatically.

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

.claude/commands/create-defect.md

@@ -0,0 +1,97 @@
+# 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,114 @@
+# 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,92 @@
+# 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,143 @@
+# 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,159 @@
+# 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,111 @@
+# 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

@@ -18,3 +18,41 @@
 * removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
 * size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
 * structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.1.0...0.0.0) (2026-05-12)
+
+### Features
+
+* NCS-69 Challenge request ([#3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/3)) ([bad7366](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bad7366bdbb048c20218257b30ac22efc9ecb6db))
+## [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))
+## [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))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.2...0.0.0) (2026-05-14)
+
+### Bug Fixes
+
+* added missing challenge routes ([61000f8](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/61000f8a22aff8b524664a756cc933834365f923))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.3...0.0.0) (2026-05-15)
+
+### Bug Fixes
+
+* build error ([51a363a](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/51a363a2432be111b804082df362975047dc8080))
+* NCWF-2 bugs and desing fixes ([#7](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/7)) ([c02414e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c02414ea40177b05a5e62dcf68dcb44efa6d3740))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.4...0.0.0) (2026-06-01)
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.5...0.0.0) (2026-06-02)
+
+### Bug Fixes
+
+* NCWF-4 Token Issues ([#8](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/8)) ([95eff42](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/95eff42dfe6d9c23ede08c7297614369a1b00d9f))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.6...0.0.0) (2026-06-06)
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.7...0.0.0) (2026-06-10)
+
+### Bug Fixes
+
+* route play-vs-bot to /vs-bot endpoint ([a620735](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/a62073511f2ac912ceb0f6b4730bef37545dd8ea))

Dockerfile

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

proxy.conf.json

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

src/app/app.routes.ts

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

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

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

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

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

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

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

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

@@ -15,7 +15,7 @@
             <div class="form-group">
                 <label for="targetUsername">Opponent Username</label>
                 <input type="text" id="targetUsername" formControlName="targetUsername"
-                    placeholder="Enter opponent's username" [disabled]="loading" required />
+                    placeholder="Enter opponent's username" required />
                 <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
                     Username is required
                 </small>
@@ -24,7 +24,7 @@
             <!-- Player Color Selection -->
             <div class="form-group">
                 <label for="color">Play as</label>
-                <select id="color" formControlName="color" [disabled]="loading">
+                <select id="color" formControlName="color">
                     <option value="white">White</option>
                     <option value="black">Black</option>
                     <option value="random">Random</option>
@@ -34,7 +34,7 @@
             <!-- Time Control Mode Selection -->
             <div class="form-group">
                 <label for="timeMode">Time Control</label>
-                <select id="timeMode" formControlName="timeMode" [disabled]="loading">
+                <select id="timeMode" formControlName="timeMode">
                     <option value="blitz">Blitz</option>
                     <option value="rapid">Rapid</option>
                     <option value="classical">Classical</option>
@@ -58,13 +58,11 @@
                 <div class="form-row">
                     <div class="form-col">
                         <label for="limitMinutes">Time (minutes)</label>
-                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000"
-                            [disabled]="loading" />
+                        <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"
-                            [disabled]="loading" />
+                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300" />
                     </div>
                 </div>
             </div>
@@ -72,7 +70,7 @@
             <!-- TTL (Time to Live) -->
             <div class="form-group">
                 <label for="ttlSeconds">Challenge Expires In</label>
-                <select id="ttlSeconds" formControlName="ttlSeconds" [disabled]="loading">
+                <select id="ttlSeconds" formControlName="ttlSeconds">
                     <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
                         {{ ttl.label }}
                     </option>

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

@@ -124,11 +124,11 @@ export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
 
         this.errorMessage = '';
         this.loading = true;
+        this.form.disable();
 
-        const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
-        const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
-        const ttlSeconds = this.form.get('ttlSeconds')?.value;
-        const color = (this.form.get('color')?.value || 'random') as PlayerColor;
+        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: {
@@ -138,7 +138,7 @@ export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
             color,
             ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
         })
-            .pipe(finalize(() => (this.loading = false)))
+            .pipe(finalize(() => { this.loading = false; this.form.enable(); }))
             .subscribe({
                 next: (challenge) => {
                     // Challenge sent successfully - navigate to challenges page to view status

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

@@ -1,5 +1,6 @@
 import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 import { Challenge } from '../../models/challenge.models';
 import { ChallengeService } from '../../services/challenge.service';
 import { finalize } from 'rxjs';
@@ -19,6 +20,7 @@ export class ChallengeNotificationComponent {
     @Output() close = new EventEmitter<void>();
 
     private readonly challengeService = inject(ChallengeService);
+    private readonly router = inject(Router);
 
     acceptingChallenge = false;
     decliningChallenge = false;
@@ -35,8 +37,13 @@ export class ChallengeNotificationComponent {
         this.challengeService.acceptChallenge(this.challenge.id)
             .pipe(finalize(() => (this.acceptingChallenge = false)))
             .subscribe({
-                next: () => {
-                    this.accept.emit(this.challenge);
+                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');
@@ -52,7 +59,7 @@ export class ChallengeNotificationComponent {
         this.decliningChallenge = true;
         this.errorMessage = '';
 
-        this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
+        this.challengeService.declineChallenge(this.challenge.id, { reason: 'generic' })
             .pipe(finalize(() => (this.decliningChallenge = false)))
             .subscribe({
                 next: () => {

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

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

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

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

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

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

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

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

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

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

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

@@ -38,15 +38,18 @@ export class LoginDialogComponent {
 
     this.isLoading = true;
     this.errorMessage = null;
+    this.loginForm.disable();
 
-    const { username, password } = this.loginForm.value;
+    const { username, password } = this.loginForm.getRawValue();
     this.authService.login(username, password).subscribe({
       next: () => {
         this.isLoading = false;
+        this.loginForm.enable();
         this.onSuccess.emit();
       },
       error: (err) => {
         this.isLoading = false;
+        this.loginForm.enable();
         this.errorMessage = err.error?.message || 'Login failed. Please try again.';
       }
     });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -46,15 +46,18 @@ export class RegisterDialogComponent {
 
     this.isLoading = true;
     this.errorMessage = null;
+    this.registerForm.disable();
 
-    const { username, email, password: pwd } = this.registerForm.value;
+    const { username, email, password: pwd } = this.registerForm.getRawValue();
     this.authService.register(username, pwd, email).subscribe({
       next: () => {
         this.isLoading = false;
+        this.registerForm.enable();
         this.onSuccess.emit();
       },
       error: (err) => {
         this.isLoading = false;
+        this.registerForm.enable();
         this.errorMessage =
           err.error?.message || 'Registration failed. Please try again.';
       }

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

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

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

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

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

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

src/app/core/config.loader.ts

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

src/app/models/auth.models.ts

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

src/app/models/bot.models.ts

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

src/app/models/game.models.ts

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

src/app/models/tournament.models.ts

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

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

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

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

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

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

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

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

@@ -104,7 +104,7 @@ export class ChallengesComponent implements OnInit, OnDestroy {
     }
 
     declineChallenge(challenge: Challenge): void {
-        this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
+        this.challengeService.declineChallenge(challenge.id, { reason: 'generic' })
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => {

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

@@ -1,419 +1,629 @@
-@import '../../button-template.css';
+/* ============================================================
+   DESIGN TOKENS — dark mode (default)
+============================================================ */
+:host {
+  --nc-neon: #ff45c8;
+  --nc-neon-soft: rgba(255, 69, 200, 0.55);
+  --nc-neon-clock-bg: rgba(255, 69, 200, 0.08);
+  --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-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.4);
+  --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-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+}
 
+/* ============================================================
+   LIGHT MODE TOKEN OVERRIDES  (sunset-gradient palette)
+============================================================ */
+:host-context(html:not([data-theme='dark'])) {
+  --nc-neon: #ff3dbb;
+  --nc-neon-soft: rgba(255, 61, 187, 0.55);
+  --nc-neon-clock-bg: rgba(255, 61, 187, 0.08);
+  --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.10);
+  --nc-border-strong: rgba(255, 255, 255, 0.18);
+  --nc-warning: #ffb13a;
+  --nc-warning-soft: rgba(255, 177, 58, 0.40);
+  --nc-danger: #ff7a7a;
+  --nc-danger-soft: rgba(255, 122, 122, 0.30);
+  --nc-danger-bg: rgba(255, 122, 122, 0.08);
+  --nc-success: #5ee5a1;
+  --nc-clock-bg: rgba(0, 0, 0, 0.30);
+  --nc-btn-bg: rgba(255, 255, 255, 0.05);
+  --nc-btn-hover-bg: rgba(255, 255, 255, 0.10);
+  --nc-seg-bg: rgba(0, 0, 0, 0.28);
+}
+
+/* ============================================================
+   SHELL & AMBIENT BG
+============================================================ */
 .game-shell {
   min-height: 100dvh;
-  padding: clamp(var(--size-md), 2vw, var(--size-xl));
-  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
-  color: var(--color-text-primary);
+  background: var(--nc-bg);
+  font-family: var(--nc-sans);
+  color: var(--nc-text);
+  position: relative;
 }
 
-:host-context(html[data-theme='dark']) .game-shell {
+.game-shell::before {
+  content: "";
+  position: fixed;
+  inset: 0;
   background:
-    radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
-    linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
+    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.08), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(74, 41, 98, 0.18), transparent 60%);
+  pointer-events: none;
+  z-index: 0;
 }
 
-.game-card {
-  max-width: 1400px;
+: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 60% 40% at 90% 0%, rgba(74, 41, 98, 0.22), transparent 60%);
+}
+
+/* ============================================================
+   PAGE CONTAINER
+============================================================ */
+.page {
+  position: relative;
+  z-index: 1;
+  max-width: 1320px;
   margin: 0 auto;
-  background: var(--color-bg-main);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-lg);
-  padding: clamp(var(--size-lg), 2vw, var(--size-xl));
-  box-shadow: var(--shadow-md);
+  padding: 28px 32px 60px;
 }
 
-:host-context(html[data-theme='dark']) .game-shell .game-card {
-  background: rgba(26, 47, 71, 0.88);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
+/* ============================================================
+   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;
 }
 
-header {
-  margin-bottom: var(--size-xl);
-  margin-bottom: var(--size-xl);
-}
-
-h1,
-h2 {
-  color: var(--color-text-primary);
-  margin: 0 0 var(--size-md);
-  font-size: var(--heading-h1);
-  color: var(--color-text-primary);
-  margin: 0 0 var(--size-md);
-  font-size: var(--heading-h1);
-}
-
-.meta {
-  color: var(--color-text-primary);
-  color: var(--color-text-primary);
-  font-size: 0.95rem;
-}
-
-.back-link {
-  display: inline-block;
-  margin-bottom: var(--size-sm);
-  color: var(--color-text-primary);
-  margin-bottom: var(--size-sm);
-  color: var(--color-text-primary);
+.crumb-link {
+  color: var(--nc-text-dim);
   text-decoration: none;
-  font-weight: 600;
-}
-
-.back-link:hover {
-  text-decoration: underline;
-}
-
-.top-section {
-  display: grid;
-  gap: var(--size-md);
-  margin-top: var(--size-sm);
-  flex: 0 0 auto;
-}
-
-.board-theme-card {
-  background: var(--color-bg-card);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: var(--size-md-padding);
-  display: grid;
-  gap: var(--size-sm);
-}
-
-.board-theme-card h3 {
-  margin: 0;
-  color: var(--color-text-primary);
-  font-size: 1rem;
-}
-
-.board-theme-group {
-  display: flex;
-  gap: var(--size-md);
-  flex-wrap: wrap;
-}
-
-.board-theme-option {
   display: inline-flex;
   align-items: center;
-  gap: var(--size-xs);
-  color: var(--color-text-primary);
-  font-weight: 600;
+  gap: 6px;
+  transition: color 0.15s;
 }
 
-.board-theme-option input {
-  accent-color: var(--color-primary);
-}
+.crumb-link:hover { color: var(--nc-neon); }
+.crumb-sep { color: var(--nc-text-dim); opacity: 0.5; }
+.crumb-current { color: var(--nc-text-muted); }
 
-.move-card {
-  padding: var(--size-lg-padding);
-}
-
-.move-card .btn {
-  align-self: flex-start;
-  width: auto;
-}
-
-.center-column {
-  width: 100%;
-}
-
-.board-section {
-  background: var(--color-bg-board);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
-  background: var(--color-bg-board);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
-  min-height: 400px;
-  container-type: size;
-}
-
-:host-context(html[data-theme='dark']) .game-shell .board-section,
-:host-context(html[data-theme='dark']) .game-shell .timer-card,
-:host-context(html[data-theme='dark']) .game-shell .history-card,
-:host-context(html[data-theme='dark']) .game-shell .export-card,
-:host-context(html[data-theme='dark']) .game-shell .board-theme-card,
-:host-context(html[data-theme='dark']) .game-shell .player-timer {
-  background: rgba(45, 74, 111, 0.72);
-}
-
-:host-context(html[data-theme='dark']) .game-shell .export-text {
-  background: rgba(26, 47, 71, 0.9);
-}
-
-:host-context(html[data-theme='dark']) .game-shell .game-completion-alert {
-  background: linear-gradient(135deg, rgba(74, 124, 124, 0.35) 0%, rgba(90, 111, 165, 0.35) 100%);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
-}
-
-.timer-card,
-.history-card,
-.export-card {
-  background: var(--color-bg-card);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: var(--size-lg-padding);
-  display: grid;
-  gap: var(--size-md);
-}
-
-.timer-card h2,
-.history-card h2,
-.export-card h2 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: var(--color-text-primary);
-}
-
-.history-list {
-  margin: 0;
-  padding-left: 1.1rem;
-  display: grid;
-  gap: var(--size-xs);
-  max-height: 180px;
-  overflow: auto;
-}
-
-.history-list li {
-  color: var(--color-text-primary);
+/* ============================================================
+   GAME HEADER
+============================================================ */
+.game-header {
   display: flex;
-  gap: var(--size-sm);
-  align-items: baseline;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--nc-border);
 }
 
-.history-number {
-  font-weight: 700;
-  min-width: 1.8rem;
-}
-
-.history-move {
-  font-family: monospace;
-}
-
-.history-empty {
-  margin: 0;
-  color: var(--color-text-primary);
-}
-
-.player-timer {
-  background: var(--color-bg-input);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: var(--size-md-padding);
-}
-
-.active-timer {
-  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.25);
-}
-
-.timer-label {
-  margin: 0;
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.timer-value {
-  margin: var(--size-xs) 0 0;
-  color: var(--color-text-primary);
-  font-size: 1.35rem;
-  font-weight: 700;
-}
-
-.export-mode-group {
+.game-title {
   display: flex;
-  gap: var(--size-lg);
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.export-mode-option {
+.game-title h1 {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--nc-text);
   display: inline-flex;
   align-items: center;
-  gap: var(--size-sm);
-  color: var(--color-text-primary);
-  font-weight: 600;
+  gap: 14px;
 }
 
-.export-mode-option input {
-  accent-color: var(--color-primary);
+.tag-rated {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: var(--nc-neon);
+  border: 1px solid var(--nc-neon-soft);
+  padding: 4px 10px;
+  text-transform: uppercase;
 }
 
-.export-text {
-  width: 100%;
-  min-height: 140px;
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  background: var(--color-bg-input);
-  color: var(--color-text-primary);
-  padding: var(--size-md-padding);
-  resize: vertical;
+.game-meta-strip {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.06em;
 }
 
-.export-button {
-  width: fit-content;
-  border: var(--button-border);
-  border-radius: var(--button-radius);
-  background: var(--color-bg-button);
-  color: var(--color-text-primary);
-  font-weight: 700;
-  padding: var(--button-padding);
+.game-id {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--nc-text-muted);
+}
+
+.game-id strong { color: var(--nc-text); font-weight: 500; }
+
+.meta-dot {
+  width: 3px;
+  height: 3px;
+  background: var(--nc-text-dim);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.copy-btn {
+  background: transparent;
+  border: none;
+  color: var(--nc-text-dim);
   cursor: pointer;
+  padding: 2px 4px;
+  display: inline-flex;
+  transition: color 0.15s;
 }
 
-.export-button:hover {
-  background: var(--color-bg-button-hover);
-  color: var(--color-text-button-hover);
-}
+.copy-btn:hover { color: var(--nc-neon); }
 
-.export-note {
-  margin: 0;
-  color: var(--color-text-primary);
+.header-actions { display: flex; gap: 8px; align-items: center; }
+
+/* ============================================================
+   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;
 }
 
-.alert {
-  border-radius: var(--border-radius-sm);
-  border: var(--border-width) solid var(--color-border);
+.btn:hover {
+  background: var(--nc-btn-hover-bg);
+  border-color: var(--nc-text-muted);
 }
 
-.game-completion-alert {
-  background: linear-gradient(135deg, var(--color-secondary-mint, #B9DAD1) 0%, var(--color-secondary-blue, #B9C2DA) 100%);
-  border: 2px solid var(--color-secondary-mint, #B9DAD1) !important;
-  border-radius: var(--border-radius-lg) !important;
-  padding: var(--size-xl-padding) !important;
-  box-shadow: 0 8px 16px rgba(185, 218, 209, 0.3);
-  animation: slideIn 0.4s ease-out;
+.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;
+  padding: 9px 14px;
+  flex-shrink: 0;
+}
+
+.btn-primary:hover { box-shadow: 0 0 20px rgba(255, 69, 200, 0.5); }
+
+.btn-ghost {
+  background: transparent;
+  border: none;
+  color: var(--nc-text-muted);
+  padding: 8px 12px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--nc-sans);
+  transition: color 0.15s;
+}
+
+.btn-ghost:hover { color: var(--nc-neon); }
+
+/* ============================================================
+   STATE MESSAGES (loading / error)
+============================================================ */
+.state-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px;
+  font-family: var(--nc-mono);
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  letter-spacing: 0.06em;
+}
+
+.state-error {
+  color: var(--nc-danger);
+  background: var(--nc-danger-bg);
+  border: 1px solid var(--nc-danger-soft);
+}
+
+/* ============================================================
+   COMPLETION BANNER
+============================================================ */
+.completion-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  margin-bottom: 24px;
+  background: rgba(255, 69, 200, 0.06);
+  border: 1px solid var(--nc-neon-soft);
+  animation: slideIn 0.35s ease-out;
+}
+
+.completion-banner--timeout {
+  background: rgba(255, 177, 58, 0.06);
+  border-color: var(--nc-warning-soft);
+}
+
+.completion-banner--timeout .completion-title {
+  color: var(--nc-warning);
+}
+
+.completion-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.completion-icon {
+  font-size: 22px;
+  opacity: 0.7;
+}
+
+.completion-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.completion-new {
+  font-size: 11px !important;
+  padding: 8px 14px !important;
+  text-decoration: none;
 }
 
 @keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
-.completion-title {
-  color: var(--color-text-primary);
-  font-size: 1.75rem;
-  margin: 0 0 var(--size-md) 0;
-  font-weight: 700;
-  text-align: center;
-}
+.completion-title { font-size: 15px; font-weight: 700; color: var(--nc-neon); }
 
-.completion-subtitle {
-  text-align: center;
-  color: var(--color-text-primary);
-  font-size: 1rem;
+.completion-sub {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  color: var(--nc-text-dim);
+  letter-spacing: 0.08em;
+  margin-top: 2px;
 }
 
 .completion-link {
-  color: var(--color-text-primary);
+  font-family: var(--nc-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--nc-text-muted);
   text-decoration: none;
-  font-weight: 600;
-  border-bottom: 2px solid var(--color-text-primary);
-  transition: all 0.3s ease;
+  border-bottom: 1px solid var(--nc-border-strong);
   padding-bottom: 2px;
+  transition: color 0.15s, border-color 0.15s;
+  flex-shrink: 0;
 }
 
-.completion-link:hover {
-  color: var(--color-secondary-blue);
-  border-bottom-color: var(--color-secondary-blue);
+.completion-link:hover { color: var(--nc-neon); border-color: var(--nc-neon-soft); }
+
+/* ============================================================
+   MAIN GRID
+============================================================ */
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 28px;
+  align-items: start;
 }
 
-@media (max-width: 991px) {
-  .game-card {
-    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
-    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
-  }
-
-  .board-section {
-    min-height: 350px;
-  }
-
-  h1,
-  h2 {
-    font-size: var(--heading-h1-tablet);
-    font-size: var(--heading-h1-tablet);
-  }
+/* ============================================================
+   BOARD COLUMN
+============================================================ */
+.board-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 520px;
+  width: 100%;
+  margin: 0 auto;
 }
 
-@media (max-width: 768px) {
-  .game-shell {
-    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
-    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
-  }
-
-  .game-card {
-    padding: clamp(var(--size-sm), 1vw, var(--size-md));
-    padding: clamp(var(--size-sm), 1vw, var(--size-md));
-  }
-
-  header {
-    margin-bottom: var(--size-lg);
-    margin-bottom: var(--size-lg);
-  }
-
-  h1,
-  h2 {
-    font-size: var(--heading-h1-mobile);
-    font-size: var(--heading-h1-mobile);
-  }
-
-  .meta {
-    font-size: 0.85rem;
-  }
-
-  .top-section {
-    gap: var(--size-xs);
-    margin-bottom: var(--size-xs);
-    gap: var(--size-xs);
-    margin-bottom: var(--size-xs);
-  }
-
-  .board-section {
-    min-height: 300px;
-  }
+.status-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: rgba(255, 69, 200, 0.05);
+  border: 1px solid rgba(255, 69, 200, 0.15);
+  font-size: 12px;
 }
 
-@media (max-width: 480px) {
-  .game-shell {
-    padding: var(--size-sm);
-    padding: var(--size-sm);
-  }
-
-  .game-card {
-    padding: var(--size-sm);
-    border-radius: var(--border-radius-md);
-    padding: var(--size-sm);
-    border-radius: var(--border-radius-md);
-  }
-
-  header {
-    margin-bottom: var(--size-md);
-    margin-bottom: var(--size-md);
-  }
-
-  h1 {
-    font-size: var(--heading-h1-small);
-    font-size: var(--heading-h1-small);
-  }
-
-  .meta {
-    font-size: 0.75rem;
-  }
-
-  .top-section {
-    gap: var(--size-xs-gap);
-    margin-bottom: var(--size-xs);
-    gap: var(--size-xs-gap);
-    margin-bottom: var(--size-xs);
-  }
-
-  .board-section {
-    min-height: 250px;
-  }
+:host-context(html:not([data-theme='dark'])) .status-strip {
+  background: rgba(255, 61, 187, 0.06);
+  border-color: rgba(255, 61, 187, 0.20);
+}
+
+.status-left { display: inline-flex; align-items: center; gap: 10px; }
+
+.status-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--nc-neon);
+  box-shadow: 0 0 6px var(--nc-neon);
+  animation: pulse 1.8s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+@keyframes pulse {
+  0%, 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-side {
+  font-family: var(--nc-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  color: var(--nc-text-dim);
+}
+
+/* container-type + aspect-ratio give cqw/cqh a defined size for the chess-board component */
+.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);
+}
+
+: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);
+}
+
+.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);
+}
+
+/* ============================================================
+   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;
+}
+
+/* ============================================================
+   UCI INPUT
+============================================================ */
+.uci-row { display: flex; gap: 6px; }
+
+.uci-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: 13px;
+  padding: 9px 12px;
+  letter-spacing: 0.04em;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.uci-input:focus { 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; }
+
+/* ============================================================
+   BOARD DESIGN SEGMENTED CONTROL
+============================================================ */
+.seg {
+  display: flex;
+  border: 1px solid var(--nc-border);
+  padding: 2px;
+  background: var(--nc-seg-bg);
+}
+
+.seg-btn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--nc-text-muted);
+  padding: 7px 10px;
+  font-size: 11px;
+  font-family: var(--nc-sans);
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.seg-btn.active { background: var(--nc-neon); color: #fff; font-weight: 700; }
+
+/* ============================================================
+   RESIGN CONFIRM OVERLAY
+============================================================ */
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 600;
+}
+
+.confirm-box {
+  background: var(--nc-surface-solid);
+  border: 1px solid var(--nc-danger-soft);
+  padding: 28px 32px;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.confirm-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--nc-text);
+}
+
+.confirm-sub {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--nc-text-muted);
+}
+
+.confirm-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.btn-danger-solid {
+  background: var(--nc-danger) !important;
+  color: #fff !important;
+  border-color: var(--nc-danger) !important;
+  font-weight: 700;
+}
+
+.btn-danger-solid:hover { opacity: 0.88; }
+
+/* ============================================================
+   TOAST
+============================================================ */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--nc-surface-solid);
+  border: 1px solid var(--nc-neon-soft);
+  color: var(--nc-text);
+  padding: 10px 18px;
+  font-size: 12px;
+  font-family: var(--nc-mono);
+  letter-spacing: 0.08em;
+  z-index: 500;
+  opacity: 0;
+  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); }
+
+/* ============================================================
+   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; }
+  .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,135 +1,238 @@
-<main class="game-shell" [class.theme-dark]="isDarkMode">
-  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
-    (closed)="facade.onPromotionClosed()" />
+<app-promotion-dialog
+  [isOpen]="facade.isPromotionDialogOpen"
+  (promotionSelected)="facade.onPromotionSelected($event)"
+  (closed)="facade.onPromotionClosed()" />
 
-  <section class="game-card">
-    <header class="mb-3">
-      <a routerLink="/" class="back-link">Back</a>
-      <h1 class="mb-2">1 vs 1 Game</h1>
-      <p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
-    </header>
+<div class="game-shell">
+  <div class="page">
 
-    @if (facade.loading) {
-    <p>Loading game state...</p>
-    } @else if (facade.state) {
-    @if (facade.isGameFinished && facade.gameCompletionMessage) {
-    <div class="game-completion-alert alert alert-success mb-3">
-      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-      <p class="completion-subtitle mb-0">
-        <a routerLink="/" class="completion-link">Start a new game</a>
-      </p>
-    </div>
-    }
-    @if (facade.isGameFinished && facade.gameCompletionMessage) {
-    <div class="game-completion-alert alert alert-success mb-3">
-      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-      <p class="completion-subtitle mb-0">
-        <a routerLink="/" class="completion-link">Start a new game</a>
-      </p>
-    </div>
-    }
-    <div class="container-fluid">
-      <div class="row g-3">
-        <!-- Left Sidebar - Dummy Timers -->
-        <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-          <section class="timer-card">
-            <h2>Timers</h2>
-            <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
-              <p class="timer-label">White</p>
-              <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
-            </div>
-            <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
-              <p class="timer-label">Black</p>
-              <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
-            </div>
-          </section>
-        </div>
+    <!-- Breadcrumb -->
+    <nav class="crumb" aria-label="Breadcrumb">
+      <a routerLink="/" class="crumb-link">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"/>
+        </svg>
+        Back to lobby
+      </a>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">1 vs 1 Game</span>
+    </nav>
 
-        <!-- Center - Chess Board -->
-        <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
-          <section class="center-column d-flex flex-column h-100">
-            <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
-              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
-                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
-                (squareSelected)="facade.onBoardSquareSelected($event)" />
-            </div>
-
-            <section class="top-section">
-              <section class="board-theme-card" aria-label="Board design chooser">
-                <h3>Board Design</h3>
-                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
-                  <label class="board-theme-option">
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
-                      (change)="setBoardTheme('arabian')" />
-                    <span>Arabian</span>
-                  </label>
-
-                  <label class="board-theme-option">
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
-                      (change)="setBoardTheme('classic')" />
-                    <span>Classic</span>
-                  </label>
-                </div>
-              </section>
-
-              <app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
-                [value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
-                (valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
-            </section>
-          </section>
-        </div>
-
-        <!-- Right Sidebar - Export -->
-        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-          <section class="history-card">
-            <h2>Move History</h2>
-
-            @if (facade.state.moves.length === 0) {
-            <p class="history-empty">No moves yet.</p>
-            } @else {
-            <ol class="history-list">
-              @for (move of facade.state.moves; track $index) {
-              <li>
-                <span class="history-number">{{ $index + 1 }}.</span>
-                <span class="history-move">{{ move }}</span>
-              </li>
-              }
-            </ol>
-            }
-          </section>
-
-          <section class="export-card">
-            <h2>Export</h2>
-            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
-              <label class="export-mode-option">
-                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
-                  (change)="setExportType('fen')" />
-                <span>FEN</span>
-              </label>
-              <label class="export-mode-option">
-                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
-                  (change)="setExportType('pgn')" />
-                <span>PGN</span>
-              </label>
-            </div>
-
-            <textarea class="export-text" [value]="exportValue"
-              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
-              readonly></textarea>
-
-            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
-
-            @if (exportNotice) {
-            <p class="export-note">{{ exportNotice }}</p>
-            }
-          </section>
+    <!-- Game header -->
+    <header class="game-header">
+      <div class="game-title">
+        <h1>
+          1 vs 1 Game
+          @if (facade.game) {
+            <span class="tag-rated">Live</span>
+          }
+        </h1>
+        <div class="game-meta-strip">
+          <span class="game-id">
+            ID <strong>{{ facade.gameId }}</strong>
+            <button class="copy-btn" type="button" title="Copy game ID" (click)="copyGameId()">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2"/>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+              </svg>
+            </button>
+          </span>
+          @if (facade.state) {
+            <span class="meta-dot"></span>
+            <span>Move {{ moveNumber }}</span>
+          }
         </div>
       </div>
-    </div>
+
+      <div class="header-actions">
+        <button class="btn-ghost" type="button" (click)="flipBoard()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="17 1 21 5 17 9"/>
+            <path d="M3 11V9a4 4 0 0 1 4-4h14"/>
+            <polyline points="7 23 3 19 7 15"/>
+            <path d="M21 13v2a4 4 0 0 1-4 4H3"/>
+          </svg>
+          Flip
+        </button>
+        <button class="btn" type="button" (click)="copyUrl()">Share</button>
+      </div>
+    </header>
+
+    <!-- Loading / error states -->
+    @if (facade.loading) {
+      <div class="state-message">
+        <span class="status-pulse"></span>
+        Loading game…
+      </div>
+    } @else if (facade.state) {
+      @if (facade.errorMessage) {
+        <div class="state-message state-error">{{ facade.errorMessage }}</div>
+      }
+
+      <!-- Game completed banner -->
+      @if (facade.isGameFinished && facade.gameCompletionMessage) {
+        <div class="completion-banner">
+          <div class="completion-left">
+            <span class="completion-icon">♟</span>
+            <div>
+              <div class="completion-title">{{ facade.gameCompletionMessage }}</div>
+              <div class="completion-sub">Game #{{ facade.gameId }}</div>
+            </div>
+          </div>
+          <div class="completion-actions">
+            <a routerLink="/games" class="completion-link">My games</a>
+            <a routerLink="/" class="btn btn-primary completion-new">New game</a>
+          </div>
+        </div>
+      }
+
+      @if (!facade.isGameFinished && ((whiteTimerMs !== null && whiteTimerMs <= 0) || (blackTimerMs !== null && blackTimerMs <= 0))) {
+        <div class="completion-banner completion-banner--timeout">
+          <span class="completion-title">Time's up!</span>
+          <span class="completion-sub">Waiting for server to confirm result…</span>
+        </div>
+      }
+
+      <!-- Main layout -->
+      <div class="layout">
+
+        <!-- BOARD COLUMN -->
+        <div class="board-col">
+
+          <!-- Opponent (top) -->
+          <app-player-card
+            [name]="blackPlayerName"
+            [initial]="blackPlayerInitial"
+            color="black"
+            [isActive]="!flipped ? facade.state.turn === 'black' : facade.state.turn === 'white'"
+            [clockDisplay]="!flipped ? blackClock : whiteClock"
+            [isLowTime]="!flipped ? isLowTimeBlack : isLowTimeWhite" />
+
+          <!-- Status strip -->
+          <div class="status-strip">
+            <div class="status-left">
+              <span class="status-pulse"></span>
+              <span class="status-text" [innerHTML]="statusMessage"></span>
+            </div>
+            <span class="status-side">
+              {{ facade.state.turn === 'white' ? 'WHITE' : 'BLACK' }} TO MOVE
+            </span>
+          </div>
+
+          <!-- Board -->
+          <div class="board-wrap" [class.reviewing]="facade.isReviewing">
+            <app-chess-board
+              [fen]="facade.displayFen"
+              [selectedSquare]="facade.isReviewing ? null : facade.selectedSquare"
+              [highlightedSquares]="facade.isReviewing ? [] : facade.highlightedSquares"
+              [boardTheme]="boardTheme"
+              (squareSelected)="facade.onBoardSquareSelected($event)" />
+          </div>
+
+          <!-- Current player (bottom) -->
+          <app-player-card
+            [name]="whitePlayerName"
+            [initial]="whitePlayerInitial"
+            color="white"
+            [isActive]="!flipped ? facade.state.turn === 'white' : facade.state.turn === 'black'"
+            [clockDisplay]="!flipped ? whiteClock : blackClock"
+            [isLowTime]="!flipped ? isLowTimeWhite : isLowTimeBlack" />
+
+          <!-- Board action buttons -->
+          <app-board-actions-bar
+            [undoAvailable]="facade.state.undoAvailable"
+            [isGameFinished]="facade.isGameFinished"
+            (takeback)="onTakeback()"
+            (offerDraw)="onOfferDraw()"
+            (resign)="onResign()" />
+
+        </div>
+
+        <!-- SIDE COLUMN -->
+        <aside class="side">
+
+          <!-- Move history (collapsible) -->
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Move History</span>
+              <span class="side-card-meta">{{ facade.state.moves.length }} plies</span>
+              <svg class="chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </summary>
+            <app-move-history
+              [moves]="facade.state.moves"
+              [viewingPly]="facade.viewingPly"
+              (navigate)="facade.navigateHistory($event)"
+              (navigateToPly)="facade.navigateToPly($event)" />
+          </details>
+
+          <!-- Play move (collapsible) -->
+          <details class="side-card" open>
+            <summary class="side-card-summary">
+              <span class="side-card-title">Play Move</span>
+              <svg class="chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </summary>
+            <div class="side-card-body">
+              <div class="uci-row">
+                <input
+                  id="uci-input"
+                  type="text"
+                  class="uci-input"
+                  placeholder="e.g. e2e4"
+                  autocomplete="off"
+                  [value]="facade.moveInput"
+                  (input)="facade.moveInput = $any($event.target).value"
+                  (keydown.enter)="facade.submitMove()" />
+                <button class="btn btn-primary" type="button" (click)="facade.submitMove()">Send</button>
+              </div>
+              <p class="uci-hint">Click a piece on the board to see legal targets.</p>
+            </div>
+          </details>
+
+          <!-- Board design (collapsible) -->
+          <details class="side-card">
+            <summary class="side-card-summary">
+              <span class="side-card-title">Board Design</span>
+              <svg class="chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </summary>
+            <div class="side-card-body">
+              <div class="seg" role="tablist" aria-label="Board theme">
+                <button class="seg-btn" [class.active]="boardTheme === 'arabian'" role="tab" (click)="setBoardTheme('arabian')">Arabian</button>
+                <button class="seg-btn" [class.active]="boardTheme === 'classic'" role="tab" (click)="setBoardTheme('classic')">Classic</button>
+              </div>
+            </div>
+          </details>
+
+          <!-- Export (collapsible) -->
+          <app-export-panel [fen]="facade.state.fen" [pgn]="facade.state.pgn" />
+
+        </aside>
+      </div>
     }
 
-    @if (facade.errorMessage) {
-    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
-    }
-  </section>
-</main>
+  </div>
+</div>
+
+<!-- Resign confirmation dialog -->
+@if (facade.resignConfirmPending) {
+  <div class="confirm-overlay" role="dialog" aria-modal="true" aria-label="Confirm resign">
+    <div class="confirm-box">
+      <p class="confirm-title">Resign this game?</p>
+      <p class="confirm-sub">Your opponent will be declared the winner.</p>
+      <div class="confirm-actions">
+        <button class="btn" type="button" (click)="facade.cancelResign()">Cancel</button>
+        <button class="btn btn-danger-solid" type="button" (click)="facade.confirmResign()">Yes, resign</button>
+      </div>
+    </div>
+  </div>
+}
+
+<!-- Toast notification -->
+@if (toastMessage) {
+  <div class="toast show">{{ toastMessage }}</div>
+}

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

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

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

@@ -8,11 +8,13 @@ import { GameCompletionService } from '../../services/game-completion.service';
 import { GameImportService } from '../../services/game-import.service';
 import { BoardSelectionService, BoardSelection } from '../../services/board-selection.service';
 import { GameStreamService } from '../../services/game-stream.service';
+import { GameHistoryService } from '../../services/game-history.service';
 
 @Injectable()
 export class GameFacade implements OnDestroy {
   gameId = '';
   game: GameFull | null = null;
+  clockSyncedAt = 0;
   errorMessage = '';
   moveInput = '';
   fenInput = '';
@@ -21,6 +23,11 @@ export class GameFacade implements OnDestroy {
   gameCompletionMessage = '';
   isGameFinished = false;
   isPromotionDialogOpen = false;
+  resignConfirmPending = false;
+
+  private fenHistory: string[] = [];
+  private sessionStartPly = 0;
+  viewingPly: number | null = null;
 
   private boardSelection: BoardSelection = {
     selectedSquare: null,
@@ -36,6 +43,7 @@ export class GameFacade implements OnDestroy {
   private readonly importService = inject(GameImportService);
   private readonly boardSelectionService = inject(BoardSelectionService);
   private readonly streamService = inject(GameStreamService);
+  private readonly gameHistory = inject(GameHistoryService);
 
   get state(): GameState | null {
     return this.game?.state ?? null;
@@ -49,6 +57,46 @@ export class GameFacade implements OnDestroy {
     return this.boardSelection.highlightedSquares;
   }
 
+  get displayFen(): string {
+    if (this.viewingPly !== null) {
+      const historyIndex = this.viewingPly - this.sessionStartPly;
+      return this.fenHistory[historyIndex] ?? this.game?.state.fen ?? '';
+    }
+    return this.game?.state.fen ?? '';
+  }
+
+  get isReviewing(): boolean {
+    return this.viewingPly !== null;
+  }
+
+  navigateToPly(ply: number): void {
+    const historyIndex = ply - this.sessionStartPly;
+    if (historyIndex < 0 || historyIndex >= this.fenHistory.length) return;
+    this.viewingPly = ply;
+    this.boardSelection = this.boardSelectionService.clearSelection();
+  }
+
+  navigateHistory(direction: 'first' | 'prev' | 'next' | 'last'): void {
+    const totalPly = this.sessionStartPly + this.fenHistory.length - 1;
+    const current = this.viewingPly ?? totalPly;
+
+    let next: number;
+    switch (direction) {
+      case 'first': next = this.sessionStartPly; break;
+      case 'prev':  next = Math.max(this.sessionStartPly, current - 1); break;
+      case 'next':  next = Math.min(totalPly, current + 1); break;
+      case 'last':
+      default:      next = totalPly; break;
+    }
+
+    if (next === totalPly) {
+      this.viewingPly = null;
+    } else {
+      this.viewingPly = next;
+    }
+    this.boardSelection = this.boardSelectionService.clearSelection();
+  }
+
   ngOnDestroy(): void {
     this.streamService.cleanup();
     this.botMoveService.cleanup();
@@ -60,7 +108,7 @@ export class GameFacade implements OnDestroy {
   }
 
   onBoardSquareSelected(square: string): void {
-    if (!this.state) {
+    if (!this.state || this.viewingPly !== null) {
       return;
     }
 
@@ -119,6 +167,9 @@ export class GameFacade implements OnDestroy {
         next: (state) => {
           if (this.game) {
             this.game = { ...this.game, state };
+            this.clockSyncedAt = Date.now();
+            this.pushFen(state.fen);
+            this.viewingPly = null;
             this.updateGameCompletion();
           }
           this.moveInput = '';
@@ -167,6 +218,26 @@ export class GameFacade implements OnDestroy {
     this.pendingPromotionMoves = [];
   }
 
+  requestResign(): void {
+    this.resignConfirmPending = true;
+  }
+
+  cancelResign(): void {
+    this.resignConfirmPending = false;
+  }
+
+  confirmResign(): void {
+    this.resignConfirmPending = false;
+    this.gameApi
+      .resignGame(this.gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Could not resign.');
+        }
+      });
+  }
+
   importFen(): void {
     this.errorMessage = '';
     this.importService.importFen(
@@ -200,6 +271,8 @@ export class GameFacade implements OnDestroy {
     this.errorMessage = '';
     this.boardSelection = this.boardSelectionService.clearSelection();
     this.streamService.cleanup();
+    this.fenHistory = [];
+    this.viewingPly = null;
 
     this.gameApi
       .getGame(this.gameId)
@@ -207,8 +280,12 @@ export class GameFacade implements OnDestroy {
       .subscribe({
         next: (game) => {
           this.game = game;
+          this.clockSyncedAt = Date.now();
           this.loading = false;
+          this.sessionStartPly = game.state.moves.length;
+          this.fenHistory = [game.state.fen];
           this.updateGameCompletion();
+          this.gameHistory.recordGame(this.gameId);
           this.startStreaming();
           this.tryMakeBotMove();
         },
@@ -223,16 +300,18 @@ export class GameFacade implements OnDestroy {
     this.streamService.startStreaming(
       this.gameId,
       (event) => this.applyStreamEvent(event),
-      () => {
-        this.errorMessage = 'Live stream disconnected. Falling back to polling.';
-      }
+      () => { /* polling fallback — not an error */ }
     );
   }
 
   private applyStreamEvent(event: GameStreamEvent): void {
     if (event.type === 'gameFull') {
       this.game = event.game;
-      this.boardSelection = this.boardSelectionService.clearSelection();
+      this.clockSyncedAt = Date.now();
+      this.pushFen(event.game.state.fen);
+      if (this.viewingPly === null) {
+        this.boardSelection = this.boardSelectionService.clearSelection();
+      }
       this.updateGameCompletion();
       this.tryMakeBotMove();
       return;
@@ -241,8 +320,10 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameState' && this.game) {
       const moveCountBefore = this.game.state.moves.length;
       this.game = { ...this.game, state: event.state };
+      this.clockSyncedAt = Date.now();
+      this.pushFen(event.state.fen);
       this.updateGameCompletion();
-      if (event.state.moves.length !== moveCountBefore) {
+      if (event.state.moves.length !== moveCountBefore && this.viewingPly === null) {
         this.boardSelection = this.boardSelectionService.clearSelection();
         this.tryMakeBotMove();
       }
@@ -254,6 +335,13 @@ export class GameFacade implements OnDestroy {
     }
   }
 
+  private pushFen(fen: string): void {
+    const last = this.fenHistory[this.fenHistory.length - 1];
+    if (last !== fen) {
+      this.fenHistory.push(fen);
+    }
+  }
+
   private tryMakeBotMove(): void {
     this.botMoveService.tryMakeBotMove(
       this.gameId,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -652,240 +652,6 @@
   font-weight: 600;
 }
 
-/* Speech Bubble Styles */
-.speech-bubble-container {
-  position: fixed;
-  top: 35%;
-  left: 55%;
-  transform: translate(-50%, -50%);
-  z-index: 500;
-  cursor: pointer;
-  animation: slideInBubble 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes slideInBubble {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.5);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-.speech-bubble {
-  background: linear-gradient(135deg, #B9DAD1 0%, #B9C2DA 100%);
-  border: 2px solid #8b1270;
-  border-radius: 20px;
-  padding: 16px 24px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 18px;
-  font-weight: bold;
-  color: #5A2C28;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
-              inset 0 1px 3px rgba(255, 255, 255, 0.3);
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.speech-bubble:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3),
-              inset 0 1px 3px rgba(255, 255, 255, 0.5);
-}
-
-.bubble-text {
-  margin: 0;
-}
-
-.bubble-tail {
-  position: absolute;
-  bottom: -12px;
-  left: 20px;
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 0px solid transparent;
-  border-top: 12px solid #B9DAD1;
-}
-
-/* Zoom Overlay and Window */
-.zoom-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.3s ease;
-  cursor: pointer;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.zoom-window-wrapper {
-  cursor: auto;
-  animation: zoomInWindow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes zoomInWindow {
-  0% {
-    transform: scale(0.1);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.zoom-window-frame {
-  background: #13072a;
-  border: 8px solid #f26ae2;
-  border-radius: 16px;
-  padding: 40px 20px 20px 20px;
-  box-shadow: 0 0 40px rgba(242, 106, 226, 0.6),
-              inset 0 0 20px rgba(242, 106, 226, 0.2);
-  max-width: 90vw;
-  max-height: 90vh;
-  position: relative;
-}
-
-.zoom-player-2 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.player-2-gif {
-  max-width: 100%;
-  max-height: 70vh;
-  width: auto;
-  height: auto;
-  display: block;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.player-2-gif:hover {
-  transform: scale(1.02);
-}
-
-.second-speech-bubble {
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: linear-gradient(135deg, #C19EF5 0%, #E1EAA9 100%);
-  border: 2px solid #BA6D4B;
-  border-radius: 20px;
-  padding: 12px 18px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 16px;
-  font-weight: bold;
-  color: #5A2C28;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
-              inset 0 1px 3px rgba(255, 255, 255, 0.3);
-  animation: popInBubble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  z-index: 10;
-}
-
-@keyframes popInBubble {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.3);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-}
-
-.second-speech-bubble .bubble-tail {
-  top: 100%;
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top: 12px solid #C19EF5;
-}
-
-/* Happy Meow Bubble */
-.happy-speech-bubble {
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: linear-gradient(135deg, #F3C8A0 0%, #BA6D4B 100%);
-  border: 2px solid #5A2C28;
-  border-radius: 20px;
-  padding: 12px 18px;
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
-  font-size: 16px;
-  font-weight: bold;
-  color: #fff;
-  white-space: nowrap;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
-              inset 0 1px 3px rgba(255, 255, 255, 0.4),
-              0 0 20px rgba(243, 200, 160, 0.5);
-  animation: popInBubble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  z-index: 10;
-}
-
-.happy-speech-bubble .bubble-tail {
-  top: 100%;
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top: 12px solid #F3C8A0;
-}
-
-/* Meat Emoji */
-.meat-emoji {
-  position: fixed;
-  font-size: 48px;
-  cursor: grab;
-  user-select: none;
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  animation: meatAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-  transition: transform 0.1s ease;
-}
-
-.meat-emoji:active {
-  cursor: grabbing;
-  transform: scale(1.1);
-  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
-}
-
-@keyframes meatAppear {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @media (max-width: 900px) {
   .bwrap {
     transform: scale(0.9);

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

@@ -94,8 +94,8 @@
               <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-subtitle">Play your next move from the skyline.</div>
-              <button type="button" class="app-btn" (click)="openChallengeDialog()" [disabled]="creating">
-                {{ creating ? 'CREATING...' : 'CREATE GAME →' }}
+              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
+                {{ creating ? 'CREATING...' : 'START NOW →' }}
               </button>
             </div>
           </div>
@@ -138,105 +138,6 @@
       </div>
     </div>
 
-    <!-- Speech Bubble -->
-    @if (showSpeechBubble) {
-    <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
-      <div class="speech-bubble">
-        <div class="bubble-text">{{ bubbleMessage }}</div>
-        <div class="bubble-tail"></div>
-      </div>
-
-    <!-- Speech Bubble -->
-    @if (showSpeechBubble) {
-    <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
-      <div class="speech-bubble">
-        <div class="bubble-text">{{ bubbleMessage }}</div>
-        <div class="bubble-tail"></div>
-      </div>
-    </div>
-    }
-
-    <!-- Zoomed Window View -->
-    @if (isZoomedIn) {
-    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
-      (mouseleave)="onMouseUp()">
-      <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
-        <div class="zoom-window-frame">
-          <div class="zoom-player-2">
-            <img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
-              (click)="$event.stopPropagation()" />
-            @if (showSecondSpeechBubble) {
-            <div class="second-speech-bubble">
-              <div class="bubble-text">Feed me! 🍖</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-            @if (showHappyBubble) {
-            <div class="happy-speech-bubble">
-              <div class="bubble-text">Happy meow! 😸</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-          </div>
-        </div>
-
-        <!-- Draggable Meat Emoji -->
-        @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
-          🍖
-        </div>
-        }
-      </div>
-    }
-
-    <!-- Zoomed Window View -->
-    @if (isZoomedIn) {
-    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
-      (mouseleave)="onMouseUp()">
-      <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
-        <div class="zoom-window-frame">
-          <div class="zoom-player-2">
-            <img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
-              (click)="$event.stopPropagation()" />
-            @if (showSecondSpeechBubble) {
-            <div class="second-speech-bubble">
-              <div class="bubble-text">Feed me! 🍖</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-            @if (showHappyBubble) {
-            <div class="happy-speech-bubble">
-              <div class="bubble-text">Happy meow! 😸</div>
-              <div class="bubble-tail"></div>
-            </div>
-            }
-          </div>
-        </div>
-
-        <!-- Draggable Meat Emoji -->
-        @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
-          🍖
-        </div>
-        }
-      </div>
-    </div>
-    }
-
-    <div class="haze"></div>
-    <div class="ground"></div>
-  </div>
-
-  @if (showDifficultyDialog) {
-  <div class="dialog-overlay" (click)="closeDifficultyDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <div class="dialog-title">SELECT DIFFICULTY</div>
-      <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
-        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
-        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
-    }
-
     <div class="haze"></div>
     <div class="ground"></div>
   </div>
@@ -259,7 +160,6 @@
     <div class="dialog-card" (click)="$event.stopPropagation()">
       <div class="dialog-title">MORE OPTIONS</div>
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openChallengeDialog()">START GAME</button>
         <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
       </div>
     </div>
@@ -313,13 +213,13 @@
   }
 
   @if (showChallengeDialog) {
-  <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+  <div class="dialog-overlay" (click)="closeChallengeDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+    </div>
+  </div>
   }
 
-  @if (errorMessage) {
-  <p class="error-banner">{{ errorMessage }}</p>
-  }
-</div>
   @if (errorMessage) {
   <p class="error-banner">{{ errorMessage }}</p>
   }

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

@@ -1,18 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
-import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getErrorMessage } from '../../core/http/error-message.util';
 import { CurrentUser } from '../../models/auth.models';
 import { AuthDialogService } from '../../services/auth-dialog.service';
 import { AuthService } from '../../services/auth.service';
-import { CurrentUser } from '../../models/auth.models';
-import { AuthDialogService } from '../../services/auth-dialog.service';
-import { AuthService } from '../../services/auth.service';
 import { GameApiService } from '../../services/game-api.service';
 import { ThemeService } from '../../services/theme.service';
 import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';
@@ -35,20 +30,28 @@ interface WindowCell {
   style: Record<string, string>;
 }
 
+interface Star {
+  style: Record<string, string>;
+}
+
+interface BackgroundBuilding {
+  style: Record<string, string>;
+}
+
+interface WindowCell {
+  state: 'off' | 'on';
+  color?: string;
+  glowColor?: string;
+  style: Record<string, string>;
+}
+
 @Component({
   selector: 'app-welcome',
   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);
-  private readonly authService = inject(AuthService);
-  private readonly authDialogService = inject(AuthDialogService);
-  private readonly themeService = inject(ThemeService);
-
 export class WelcomeComponent implements OnInit, OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
   private readonly authService = inject(AuthService);
@@ -58,19 +61,13 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   creating = false;
   joiningGame = false;
   importing = false;
-  showChallengeDialog = false;
   errorMessage = '';
 
   showDifficultyDialog = false;
   showOptionsDialog = false;
   showJoinDialog = false;
   showImportDialog = false;
-
-
-  showDifficultyDialog = false;
-  showOptionsDialog = false;
-  showJoinDialog = false;
-  showImportDialog = false;
+  showChallengeDialog = false;
 
   gameIdInput = '';
   importMode: ImportMode = 'fen';
@@ -82,65 +79,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   private authDialogState: 'login' | 'register' | null = null;
   private pendingAction: (() => void) | null = null;
 
-  // Speech bubble and zoom features
-  showSpeechBubble = false;
-  isZoomedIn = false;
-  showSecondSpeechBubble = false;
-  showHappyBubble = false;
-  showMeatEmoji = false;
-  bubbleMessage = 'meow';
-
-  // Meat emoji drag state
-  meatX = 0;
-  meatY = 0;
-  isDraggingMeat = false;
-  meatDragOffsetX = 0;
-  meatDragOffsetY = 0;
-
   stars: Star[] = [];
   bgBuildings: BackgroundBuilding[] = [];
   windows: Record<string, WindowCell[]> = {};
 
   private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
-  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
-  private zoomTimeoutId: ReturnType<typeof setTimeout> | undefined;
-
-  private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
-  private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
-
-  private warmColors = ['#ffe88a', '#ffcc30', '#f0ad4e', '#ec971f', '#ffb74d', '#ffa726'];
-  private warmGlowColors = ['#ffcc30', '#ffcc30', '#ec971f', '#ec971f', '#ff9800', '#fb8c00'];
-  importMode: ImportMode = 'fen';
-  importText = '';
-
-  isSunsetMode = false;
-  modeBadge = 'NIGHT MODE';
-  currentUser: CurrentUser | null = null;
-  private authDialogState: 'login' | 'register' | null = null;
-  private pendingAction: (() => void) | null = null;
-
-  // Speech bubble and zoom features
-  showSpeechBubble = false;
-  isZoomedIn = false;
-  showSecondSpeechBubble = false;
-  showHappyBubble = false;
-  showMeatEmoji = false;
-  bubbleMessage = 'meow';
-
-  // Meat emoji drag state
-  meatX = 0;
-  meatY = 0;
-  isDraggingMeat = false;
-  meatDragOffsetX = 0;
-  meatDragOffsetY = 0;
-
-  stars: Star[] = [];
-  bgBuildings: BackgroundBuilding[] = [];
-  windows: Record<string, WindowCell[]> = {};
-
-  private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
-  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
-  private zoomTimeoutId: ReturnType<typeof setTimeout> | undefined;
 
   private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
   private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
@@ -180,21 +123,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.generateBackgroundBuildings();
     this.generateWindowsForAllBuildings();
     this.startWindowFlicker();
-
-    // Show speech bubble after 5 seconds
-    this.speechBubbleTimeoutId = setTimeout(() => {
-      this.showSpeechBubble = true;
-    }, 5000);
   }
 
   ngOnDestroy(): void {
     this.stopWindowFlicker();
-    if (this.speechBubbleTimeoutId) {
-      clearTimeout(this.speechBubbleTimeoutId);
-    }
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
   }
 
   openDifficultyDialog(): void {
@@ -211,20 +143,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.errorMessage = '';
   }
 
-  openChallengeDialog(): void {
-    if (!this.requireAuth(() => this.showChallengeDialog = true)) {
-      return;
-    }
-
-    this.closeAllDialogs();
-    this.showChallengeDialog = true;
-  }
-
-  closeChallengeDialog(): void {
-    this.showChallengeDialog = false;
-    this.errorMessage = '';
-  }
-
   openOptionsDialog(): void {
     this.closeAllDialogs();
     this.showOptionsDialog = true;
@@ -278,11 +196,21 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   startOneVsOne(): void {
-    if (!this.requireAuth(() => this.performStartOneVsOne())) {
+    if (!this.requireAuth(() => this.openChallengeDialog())) {
       return;
     }
 
-    this.performStartOneVsOne();
+    this.openChallengeDialog();
+  }
+
+  openChallengeDialog(): void {
+    this.closeAllDialogs();
+    this.showChallengeDialog = true;
+  }
+
+  closeChallengeDialog(): void {
+    this.showChallengeDialog = false;
+    this.errorMessage = '';
   }
 
   startVsBot(difficulty: Difficulty): void {
@@ -309,84 +237,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.performSubmitImportGame();
   }
 
-  onSpeechBubbleClick(): void {
-    this.showSpeechBubble = false;
-    this.isZoomedIn = true;
-    this.bubbleMessage = 'meow';
-    this.showMeatEmoji = true;
-    this.showHappyBubble = false;
-    this.showSecondSpeechBubble = true;
-
-    // Reset meat position
-    this.meatX = window.innerWidth / 2 - 100;
-    this.meatY = window.innerHeight / 2 + 150;
-  }
-
-  onZoomedViewClick(): void {
-    this.isZoomedIn = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = false;
-    this.showMeatEmoji = false;
-    this.bubbleMessage = 'meow';
-
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
-  }
-
-  onMeatMouseDown(event: MouseEvent): void {
-    this.isDraggingMeat = true;
-    const rect = (event.target as HTMLElement).getBoundingClientRect();
-    this.meatDragOffsetX = event.clientX - rect.left;
-    this.meatDragOffsetY = event.clientY - rect.top;
-  }
-
-  onMouseMove(event: MouseEvent): void {
-    if (!this.isDraggingMeat) {
-      return;
-    }
-
-    this.meatX = event.clientX - this.meatDragOffsetX;
-    this.meatY = event.clientY - this.meatDragOffsetY;
-
-    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
-    if (!gifElement) {
-      return;
-    }
-
-    const gifRect = gifElement.getBoundingClientRect();
-    const gifCenterX = gifRect.left + gifRect.width / 2;
-    const gifCenterY = gifRect.top + gifRect.height / 2;
-
-    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
-    if (!meatElement) {
-      return;
-    }
-
-    const meatRect = meatElement.getBoundingClientRect();
-    const meatCenterX = meatRect.left + meatRect.width / 2;
-    const meatCenterY = meatRect.top + meatRect.height / 2;
-
-    const distance = Math.sqrt(
-      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
-    );
-
-    if (distance < 50) {
-      this.onMeatFed();
-    }
-  }
-
-  onMouseUp(): void {
-    this.isDraggingMeat = false;
-  }
-
-  onMeatFed(): void {
-    this.showMeatEmoji = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = true;
-    this.isDraggingMeat = false;
-  }
-
   private requireAuth(action: () => void): boolean {
     if (this.authService.isLoggedIn()) {
       return true;
@@ -407,163 +257,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     action();
   }
 
-  private performStartOneVsOne(): void {
-    if (!this.requireAuth(() => this.performStartOneVsOne())) {
-      return;
-    }
 
-    this.performStartOneVsOne();
-  }
-
-  startVsBot(difficulty: Difficulty): void {
-    if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
-      return;
-    }
-
-    this.performStartVsBot(difficulty);
-  }
-
-  submitJoinGame(): void {
-    if (!this.requireAuth(() => this.performSubmitJoinGame())) {
-      return;
-    }
-
-    this.performSubmitJoinGame();
-  }
-
-  submitImportGame(): void {
-    if (!this.requireAuth(() => this.performSubmitImportGame())) {
-      return;
-    }
-
-    this.performSubmitImportGame();
-  }
-
-  onSpeechBubbleClick(): void {
-    this.showSpeechBubble = false;
-    this.isZoomedIn = true;
-    this.bubbleMessage = 'meow';
-    this.showMeatEmoji = true;
-    this.showHappyBubble = false;
-    this.showSecondSpeechBubble = true;
-
-    // Reset meat position
-    this.meatX = window.innerWidth / 2 - 100;
-    this.meatY = window.innerHeight / 2 + 150;
-  }
-
-  onZoomedViewClick(): void {
-    this.isZoomedIn = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = false;
-    this.showMeatEmoji = false;
-    this.bubbleMessage = 'meow';
-
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
-  }
-
-  onMeatMouseDown(event: MouseEvent): void {
-    this.isDraggingMeat = true;
-    const rect = (event.target as HTMLElement).getBoundingClientRect();
-    this.meatDragOffsetX = event.clientX - rect.left;
-    this.meatDragOffsetY = event.clientY - rect.top;
-  }
-
-  onMouseMove(event: MouseEvent): void {
-    if (!this.isDraggingMeat) {
-      return;
-    }
-
-    this.meatX = event.clientX - this.meatDragOffsetX;
-    this.meatY = event.clientY - this.meatDragOffsetY;
-
-    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
-    if (!gifElement) {
-      return;
-    }
-
-    const gifRect = gifElement.getBoundingClientRect();
-    const gifCenterX = gifRect.left + gifRect.width / 2;
-    const gifCenterY = gifRect.top + gifRect.height / 2;
-
-    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
-    if (!meatElement) {
-      return;
-    }
-
-    const meatRect = meatElement.getBoundingClientRect();
-    const meatCenterX = meatRect.left + meatRect.width / 2;
-    const meatCenterY = meatRect.top + meatRect.height / 2;
-
-    const distance = Math.sqrt(
-      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
-    );
-
-    if (distance < 50) {
-      this.onMeatFed();
-    }
-  }
-
-  onMouseUp(): void {
-    this.isDraggingMeat = false;
-  }
-
-  onMeatFed(): void {
-    this.showMeatEmoji = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = true;
-    this.isDraggingMeat = false;
-  }
-
-  private requireAuth(action: () => void): boolean {
-    if (this.authService.isLoggedIn()) {
-      return true;
-    }
-
-    this.pendingAction = action;
-    this.authDialogService.openLogin();
-    return false;
-  }
-
-  private maybeRunPendingAction(): void {
-    if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
-      return;
-    }
-
-    const action = this.pendingAction;
-    this.pendingAction = null;
-    action();
-  }
-
-  private performStartOneVsOne(): void {
-    if (this.creating) {
-      return;
-    }
-
-    this.errorMessage = '';
-    this.creating = true;
-
-    this.gameApi
-      .createGame()
-      .pipe(finalize(() => (this.creating = false)))
-      .subscribe({
-        next: (game) => {
-          void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-          });
-          void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-          });
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
-        }
-      });
-  }
-
-  private performStartVsBot(difficulty: Difficulty): void {
   private performStartVsBot(difficulty: Difficulty): void {
     if (this.creating) {
       return;
@@ -572,7 +266,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.errorMessage = '';
     this.creating = true;
     this.showDifficultyDialog = false;
-    this.showDifficultyDialog = false;
 
     this.gameApi
       .createGameVsBot(difficulty)
@@ -582,9 +275,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
           void this.router.navigate(['/game', game.gameId], {
             state: { theme: this.isSunsetMode ? 'light' : 'dark' }
           });
-          void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-          });
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
@@ -592,9 +282,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       });
   }
 
-  private performSubmitJoinGame(): void {
-    const gameId = this.gameIdInput.trim();
-    if (this.joiningGame || !gameId) {
   private performSubmitJoinGame(): void {
     const gameId = this.gameIdInput.trim();
     if (this.joiningGame || !gameId) {
@@ -605,7 +292,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.joiningGame = true;
 
     this.gameApi
-      .getGame(gameId)
       .getGame(gameId)
       .pipe(finalize(() => (this.joiningGame = false)))
       .subscribe({
@@ -614,10 +300,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
           void this.router.navigate(['/game', game.gameId], {
             state: { theme: this.isSunsetMode ? 'light' : 'dark' }
           });
-          this.closeJoinDialog();
-          void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-          });
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
@@ -656,7 +338,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.showOptionsDialog = false;
     this.showJoinDialog = false;
     this.showImportDialog = false;
-    this.showChallengeDialog = false;
     this.errorMessage = '';
   }
 
@@ -774,159 +455,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   private stopWindowFlicker(): void {
     if (this.flickerIntervalId === undefined) {
       return;
-  private generateStars(count: number): void {
-    this.stars = Array.from({ length: count }, () => {
-      const size = Math.random() * 2 + 0.5;
-      return {
-        style: {
-          width: `${size}px`,
-          height: `${size}px`,
-          left: `${Math.random() * 100}%`,
-          top: `${Math.random() * 62}%`,
-          '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
-          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
-        }
-      };
-    });
-  }
-
-  private generateBackgroundBuildings(): void {
-    const specs = [
-      { l: '0%', w: '7%', h: '30vh' },
-      { l: '3%', w: '4%', h: '18vh' }, // New building
-      { l: '7%', w: '5%', h: '22vh' },
-      { l: '11%', w: '8%', h: '28vh' },
-      { l: '15%', w: '6%', h: '20vh' },
-      { l: '18.5%', w: '4%', h: '18vh' },
-      { l: '22.5%', w: '6%', h: '26vh' },
-      { l: '28%', w: '5%', h: '25vh' },
-      { l: '32%', w: '4%', h: '15vh' },
-      { l: '35.5%', w: '4.5%', h: '20vh' },
-      { l: '42%', w: '5%', h: '28vh' },
-      { l: '47%', w: '5%', h: '22vh' }, // New building
-      { l: '50%', w: '7%', h: '30vh' },
-      { l: '55%', w: '6%', h: '27vh' },
-      { l: '60.5%', w: '5%', h: '24vh' },
-      { l: '64.5%', w: '3.5%', h: '17vh' },
-      { l: '70%', w: '6%', h: '23vh' },
-      { l: '75%', w: '4%', h: '19vh' },
-      { l: '80.5%', w: '4%', h: '21vh' },
-      { 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' }
-    ];
-
-    this.bgBuildings = specs.map((spec) => ({
-      style: { left: spec.l, width: spec.w, height: spec.h }
-    }));
-  }
-
-  private generateWindowsForAllBuildings(): void {
-    this.windows = {
-      wA1: this.generateWindows(3, 4, 0.6),
-      wA2: this.generateWindows(4, 5, 0.55),
-      wA3: this.generateWindows(5, 18, 0.5),
-      wB1: this.generateWindows(4, 3, 0.6),
-      wB2: this.generateWindows(5, 20, 0.55),
-      wC1: this.generateWindows(5, 3, 0.7),
-      wC2: this.generateWindows(6, 5, 0.65),
-      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)
-    };
-  }
-
-  private generateWindows(cols: number, rows: number, litRate: number): WindowCell[] {
-    const total = cols * rows;
-    return Array.from({ length: total }, () => this.createWindowCell(litRate));
-  }
-
-  private createWindowCell(litRate: number): WindowCell {
-    const random = Math.random();
-    let state: WindowCell['state'] = 'off';
-    let color: string | undefined;
-    let glowColor: string | undefined;
-
-    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
-      state = 'on';
-      const warmIndex = Math.floor(Math.random() * this.warmColors.length);
-      color = this.warmColors[warmIndex];
-      glowColor = this.warmGlowColors[warmIndex];
-    }
-
-    if (state === 'off') {
-      return { state, style: {} };
-    }
-
-    const baseDuration = (color && this.coolColors.includes(color)) ? 3 : 4;
-    return {
-      state,
-      color,
-      glowColor,
-      style: {
-        '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`
-      }
-    };
-  }
-
-  private startWindowFlicker(): void {
-    this.flickerIntervalId = setInterval(() => {
-      this.randomFlicker();
-    }, 2800);
-  }
-
-  private stopWindowFlicker(): void {
-    if (this.flickerIntervalId === undefined) {
-      return;
-    }
-    clearInterval(this.flickerIntervalId);
-    this.flickerIntervalId = undefined;
-  }
-
-  private randomFlicker(): void {
-    const allWindows = Object.values(this.windows).flat();
-    if (allWindows.length === 0) {
-      return;
-    }
-
-    const pickCount = Math.floor(Math.random() * 6) + 1;
-    for (let i = 0; i < pickCount; i += 1) {
-      const target = allWindows[Math.floor(Math.random() * allWindows.length)];
-      if (!target) {
-        continue;
-      }
-
-      if (target.state === 'off') {
-        target.state = 'on';
-        const isCool = Math.random() < 0.5;
-        const colors = isCool ? this.coolColors : this.warmColors;
-        const glowColors = isCool ? this.coolGlowColors : this.warmGlowColors;
-        const index = Math.floor(Math.random() * colors.length);
-
-        target.color = colors[index];
-        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` : '',
-          '--wd': `${(Math.random() * 4 + (isCool ? 3 : 4)).toFixed(1)}s`,
-          '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
-        };
-      } else {
-        target.state = 'off';
-        target.color = undefined;
-        target.glowColor = undefined;
-        target.style = {};
-      }
     }
     clearInterval(this.flickerIntervalId);
     this.flickerIntervalId = undefined;

src/app/services/auth.interceptor.ts

@@ -3,14 +3,15 @@ import { HttpInterceptorFn } from '@angular/common/http';
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
   const token = localStorage.getItem('token');
 
-  // Add token to protected endpoints only (not registration or login)
   const isProtectedEndpoint =
     req.url.includes('/api/account/me') ||
     req.url.includes('/api/account/bots') ||
     req.url.includes('/api/account/official-bots') ||
-    req.url.includes('/api/challenge');
+    req.url.includes('/api/board/game') ||
+    req.url.includes('/api/challenge') ||
+    req.url.includes('/api/tournament');
 
-  if (token && isProtectedEndpoint) {
+  if (token && isProtectedEndpoint && !req.headers.has('Authorization')) {
     req = req.clone({
       setHeaders: {
         Authorization: `Bearer ${token}`

src/app/services/auth.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, switchMap, tap } from 'rxjs/operators';
 import { environment } from '../../environments/environment';
 import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
 
@@ -26,9 +26,9 @@ export class AuthService {
       })
       .pipe(
         tap((response) => {
-          localStorage.setItem('token', response.token);
+          localStorage.setItem('token', response.accessToken); //GRRRRRRRRRR
+          localStorage.setItem('refreshToken', response.refreshToken);
           localStorage.setItem('username', username);
-          // After login, fetch current user info
           this.getCurrentUser().subscribe();
         })
       );
@@ -42,16 +42,9 @@ export class AuthService {
         email
       })
       .pipe(
-        tap((response) => {
-          localStorage.setItem('username', response.username);
-          localStorage.setItem('userId', response.id);
-          this.currentUserSubject.next({
-            id: response.id,
-            username: response.username,
-            rating: response.rating,
-            createdAt: response.createdAt
-          });
-        })
+        switchMap((response) =>
+          this.login(username, password).pipe(map(() => response))
+        )
       );
   }
 
@@ -67,6 +60,7 @@ export class AuthService {
 
   logout(): void {
     localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
     localStorage.removeItem('username');
     localStorage.removeItem('userId');
     this.currentUserSubject.next(null);

src/app/services/bot.service.ts

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

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

@@ -61,4 +61,18 @@ export class ChallengeEventService {
     removeChallenge(challengeId: string): void {
         this.onChallengeRemoved(challengeId);
     }
+
+    /**
+     * Replace the full incoming list (used by HTTP polling)
+     */
+    setIncomingChallenges(challenges: Challenge[]): void {
+        this.incomingChallenges$.next(challenges);
+    }
+
+    /**
+     * Clear all incoming challenges (used on logout)
+     */
+    clear(): void {
+        this.incomingChallenges$.next([]);
+    }
 }

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

@@ -1,135 +1,115 @@
 import { Injectable, inject } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
 import { ChallengeEventService } from './challenge-event.service';
-import { Challenge } from '../models/challenge.models';
+import { ChallengeService } from './challenge.service';
 
-/**
- * Service to handle WebSocket connections for challenge events
- * Listens for incoming challenge notifications and emits them to ChallengeEventService
- */
 @Injectable({ providedIn: 'root' })
 export class ChallengeWebSocketService {
     private readonly challengeEventService = inject(ChallengeEventService);
+    private readonly challengeService = inject(ChallengeService);
+    private readonly router = inject(Router);
+
     private ws: WebSocket | null = null;
     private reconnectAttempts = 0;
     private readonly maxReconnectAttempts = 5;
     private readonly reconnectDelay = 3000;
+    private intentionalClose = false;
 
-    /**
-     * Initialize WebSocket connection for challenge events
-     */
     connect(): void {
-        if (this.ws) {
-            return; // Already connected
-        }
+        if (this.ws) return;
 
-        const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-        const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`;
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        const url = `${environment.userWsBaseUrl}/api/user/ws?token=${encodeURIComponent(token)}`;
 
         try {
-            this.ws = new WebSocket(wsUrl);
+            this.intentionalClose = false;
+            this.ws = new WebSocket(url);
 
             this.ws.onopen = () => {
-                console.log('Challenge WebSocket connected');
                 this.reconnectAttempts = 0;
             };
 
             this.ws.onmessage = (event) => {
-                this.handleMessage(event.data);
+                this.handleMessage(event.data as string);
             };
 
-            this.ws.onerror = (error) => {
-                console.error('Challenge WebSocket error:', error);
+            this.ws.onerror = () => {
+                // onclose fires right after, handles reconnect
             };
 
             this.ws.onclose = () => {
-                console.log('Challenge WebSocket disconnected');
                 this.ws = null;
-                this.attemptReconnect();
+                if (!this.intentionalClose) {
+                    this.attemptReconnect();
+                }
             };
-        } catch (error) {
-            console.error('Failed to create WebSocket:', error);
+        } catch {
             this.attemptReconnect();
         }
     }
 
-    /**
-     * Close the WebSocket connection
-     */
     disconnect(): void {
+        this.intentionalClose = true;
+        this.reconnectAttempts = 0;
         if (this.ws) {
             this.ws.close();
             this.ws = null;
         }
     }
 
-    /**
-     * Send a message through WebSocket
-     */
-    send(message: any): void {
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify(message));
-        }
-    }
-
-    /**
-     * Handle incoming WebSocket messages
-     */
     private handleMessage(data: string): void {
+        let message: Record<string, unknown>;
         try {
-            const message = JSON.parse(data);
-
-            if (!message.type) {
-                return;
-            }
-
-            switch (message.type) {
-                case 'challenge.received':
-                    if (message.challenge) {
-                        this.challengeEventService.onChallengeReceived(message.challenge as Challenge);
-                    }
-                    break;
-
-                case 'challenge.accepted':
-                    if (message.challenge) {
-                        this.challengeEventService.onChallengeAccepted(message.challenge as Challenge);
-                    }
-                    break;
-
-                case 'challenge.declined':
-                    if (message.challengeId) {
-                        this.challengeEventService.removeChallenge(message.challengeId);
-                    }
-                    break;
-
-                case 'challenge.expired':
-                    if (message.challengeId) {
-                        this.challengeEventService.removeChallenge(message.challengeId);
-                    }
-                    break;
-
-                default:
-                    console.debug('Unknown challenge message type:', message.type);
-            }
-        } catch (error) {
-            console.error('Failed to parse WebSocket message:', error);
-        }
-    }
-
-    /**
-     * Attempt to reconnect to WebSocket
-     */
-    private attemptReconnect(): void {
-        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-            console.error('Max WebSocket reconnection attempts reached');
+            message = JSON.parse(data) as Record<string, unknown>;
+        } catch {
             return;
         }
 
-        this.reconnectAttempts++;
-        console.log(`Attempting WebSocket reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+        switch (message['type']) {
+            case 'CONNECTED':
+                break;
 
-        setTimeout(() => {
-            this.connect();
-        }, this.reconnectDelay);
+            case 'challengeCreated': {
+                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;
+            }
+        }
+    }
+
+    private attemptReconnect(): void {
+        if (this.intentionalClose || this.reconnectAttempts >= this.maxReconnectAttempts) return;
+        this.reconnectAttempts++;
+        setTimeout(() => { this.connect(); }, this.reconnectDelay);
     }
 }

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

@@ -40,7 +40,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> {
@@ -67,6 +67,14 @@ export class GameApiService {
     return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}/import/pgn`, { pgn });
   }
 
+  resignGame(gameId: string): Observable<void> {
+    return this.http.post<void>(`${this.apiBase}${this.apiPath}/${gameId}/resign`, {});
+  }
+
+  offerDraw(gameId: string): Observable<void> {
+    return this.http.post<void>(`${this.apiBase}${this.apiPath}/${gameId}/draw/offer`, {});
+  }
+
   private resolveWsBase(): string {
     if (this.wsBase) {
       return this.wsBase;
@@ -77,8 +85,11 @@ export class GameApiService {
   }
 
   streamGame(gameId: string): Observable<GameStreamEvent> {
-    const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/stream`;
-    const fallbackUrl = `${this.apiBase}${this.apiPath}/${gameId}/stream`;
-    return this.streamHandler.createGameStream(wsUrl, fallbackUrl, gameId);
+    const token = localStorage.getItem('token');
+    let wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/ws`;
+    if (token) {
+      wsUrl += `?token=${encodeURIComponent(token)}`;
+    }
+    return this.streamHandler.createGameStream(wsUrl, gameId);
   }
 }

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

@@ -24,23 +24,28 @@ export class GameCompletionService {
     return { isFinished: true, message };
   }
 
+  isTimeOut(state: GameState | null): boolean {
+    if (!state?.clock) return false;
+    return state.clock.whiteRemainingMs <= 0 || state.clock.blackRemainingMs <= 0;
+  }
+
   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 loser  = state.winner === 'white' ? game.black.displayName : state.winner === 'black' ? game.white.displayName : null;
+
     switch (status) {
       case 'checkmate':
-        const winner = state.winner === 'white' ? game.white.displayName : game.black.displayName;
-        return `Checkmate! ${winner} wins!`;
+        return winner ? `Checkmate — ${winner} wins!` : 'Checkmate!';
       case 'stalemate':
-        return 'Stalemate! The game is a draw.';
+        return 'Stalemate — draw!';
       case 'resign':
-        const resignedPlayer = state.winner === 'white' ? game.black.displayName : game.white.displayName;
-        const resignedWinner = state.winner === 'white' ? game.white.displayName : game.black.displayName;
-        return `${resignedPlayer} resigned. ${resignedWinner} wins!`;
+        return loser && winner ? `${loser} resigned — ${winner} wins!` : 'Resigned.';
       case 'draw':
-        return 'Draw! The game ended in a draw.';
+        return 'Draw by agreement.';
       case 'insufficientMaterial':
-        return 'Insufficient material! The game is a draw.';
+        return 'Draw — insufficient material.';
       default:
-        return 'Game ended!';
+        return 'Game over.';
     }
   }
 }

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

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+
+const STORAGE_KEY = 'nowchess.games';
+const MAX_ENTRIES = 50;
+
+interface GameEntry {
+  id: string;
+  addedAt: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class GameHistoryService {
+  recordGame(gameId: string): void {
+    const entries = this.load().filter((e) => e.id !== gameId);
+    entries.unshift({ id: gameId, addedAt: Date.now() });
+    this.save(entries.slice(0, MAX_ENTRIES));
+  }
+
+  getGameIds(): string[] {
+    return this.load().map((e) => e.id);
+  }
+
+  removeGame(gameId: string): void {
+    this.save(this.load().filter((e) => e.id !== gameId));
+  }
+
+  private load(): GameEntry[] {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      return raw ? (JSON.parse(raw) as GameEntry[]) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  private save(entries: GameEntry[]): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+  }
+}

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

@@ -10,6 +10,7 @@ export class GameStreamService {
   private readonly destroyRef = inject(DestroyRef);
   private streamSubscription: Subscription | null = null;
   private pollSubscription: Subscription | null = null;
+  private lastGameStateHash: string | null = null;
 
   startStreaming(
     gameId: string,
@@ -20,7 +21,10 @@ export class GameStreamService {
       .streamGame(gameId)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: (event) => onEvent(event),
+        next: (event) => {
+          this.lastGameStateHash = JSON.stringify(event);
+          onEvent(event);
+        },
         error: () => {
           onStreamError();
           this.startPolling(gameId, onEvent);
@@ -37,7 +41,7 @@ export class GameStreamService {
       return;
     }
 
-    this.pollSubscription = interval(1500)
+    this.pollSubscription = interval(5000)
       .pipe(
         startWith(0),
         switchMap(() => this.gameApi.getGame(gameId)),
@@ -45,11 +49,16 @@ export class GameStreamService {
       )
       .subscribe({
         next: (game) => {
-          const event: GameStreamEvent = {
-            type: 'gameFull',
-            game
-          };
-          onEvent(event);
+          // Only emit if game state changed to avoid unnecessary updates
+          const stateHash = JSON.stringify(game.state);
+          if (this.lastGameStateHash !== stateHash) {
+            this.lastGameStateHash = stateHash;
+            const event: GameStreamEvent = {
+              type: 'gameFull',
+              game
+            };
+            onEvent(event);
+          }
         }
       });
   }
@@ -59,5 +68,6 @@ export class GameStreamService {
     this.pollSubscription?.unsubscribe();
     this.streamSubscription = null;
     this.pollSubscription = null;
+    this.lastGameStateHash = null;
   }
 }

src/app/services/stream-handler.service.ts

@@ -2,26 +2,14 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { GameStreamEvent, ErrorEvent } from '../models/game.models';
 
+const WS_CONNECT_TIMEOUT_MS = 3000;
+
 @Injectable({ providedIn: 'root' })
 export class StreamHandlerService {
-  createGameStream(wsUrl: string, fallbackUrl: string, gameId: string): Observable<GameStreamEvent> {
+  createGameStream(wsUrl: string, gameId: string): Observable<GameStreamEvent> {
     return new Observable<GameStreamEvent>((observer) => {
       const ws = new WebSocket(wsUrl);
-      const abortController = new AbortController();
       let connected = false;
-      let fallbackActive = false;
-
-      const parseEvent = (raw: string): GameStreamEvent | null => {
-        if (!raw.trim()) {
-          return null;
-        }
-
-        try {
-          return JSON.parse(raw) as GameStreamEvent;
-        } catch {
-          return null;
-        }
-      };
 
       const emitErrorEvent = (message: string): void => {
         const errorEvent: ErrorEvent = {
@@ -31,90 +19,51 @@ export class StreamHandlerService {
         observer.next(errorEvent);
       };
 
-      const startNdjsonFallback = async (): Promise<void> => {
-        if (fallbackActive) {
-          return;
-        }
-
-        fallbackActive = true;
-        console.log(`[StreamHandler] NDJSON fallback started for ${gameId}, URL:`, fallbackUrl);
-
-        try {
-          const response = await fetch(fallbackUrl, {
-            headers: { Accept: 'application/x-ndjson' },
-            signal: abortController.signal
-          });
-
-          if (!response.ok || !response.body) {
-            console.error(`[StreamHandler] NDJSON fetch failed: HTTP ${response.status}`);
-            emitErrorEvent(`Unable to open stream: HTTP ${response.status}`);
-            observer.complete();
-            return;
-          }
-
-          console.log(`[StreamHandler] NDJSON stream connected for ${gameId}`);
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let buffer = '';
-
-          while (true) {
-            const { value, done } = await reader.read();
-            if (done) {
-              break;
-            }
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split('\n');
-            buffer = lines.pop() ?? '';
-
-            for (const line of lines) {
-              const event = parseEvent(line);
-              if (event) {
-                observer.next(event);
-              }
-            }
-          }
-
-          observer.complete();
-        } catch (error) {
-          if ((error as Error).name !== 'AbortError') {
-            emitErrorEvent((error as Error).message);
-            observer.error(error);
-          }
-        }
+      const failAndComplete = (reason: string): void => {
+        console.warn(`[StreamHandler] WebSocket failed for ${gameId}: ${reason}`);
+        emitErrorEvent(reason);
+        observer.complete();
       };
 
+      const connectionTimeoutId = setTimeout(() => {
+        if (!connected) {
+          ws.close();
+          failAndComplete('WebSocket connection timed out — falling back to polling');
+        }
+      }, WS_CONNECT_TIMEOUT_MS);
+
       ws.onopen = () => {
         connected = true;
+        clearTimeout(connectionTimeoutId);
+        console.log(`[StreamHandler] WebSocket connected for ${gameId}`);
       };
 
       ws.onmessage = (message) => {
         const payload = typeof message.data === 'string' ? message.data : '';
-        const event = parseEvent(payload);
-        if (event) {
+        if (!payload.trim()) return;
+        try {
+          const event = JSON.parse(payload) as GameStreamEvent;
           observer.next(event);
+        } catch {
+          // ignore malformed frames
         }
       };
 
-      ws.onerror = (error) => {
-        console.warn(`[StreamHandler] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
+      ws.onerror = () => {
+        clearTimeout(connectionTimeoutId);
         if (!connected) {
-          void startNdjsonFallback();
+          failAndComplete('WebSocket connection error — falling back to polling');
         }
       };
 
       ws.onclose = () => {
-        console.warn(`[StreamHandler] WebSocket closed for ${gameId}, connected=${connected}`);
-        if (!connected) {
-          console.log(`[StreamHandler] Starting NDJSON fallback for ${gameId}`);
-          void startNdjsonFallback();
-        } else {
+        clearTimeout(connectionTimeoutId);
+        if (connected) {
           observer.complete();
         }
       };
 
       return () => {
-        abortController.abort();
         ws.close();
       };
     });

src/app/services/tournament.service.ts

@@ -0,0 +1,52 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Tournament, TournamentList, RoundPairings } from '../models/tournament.models';
+
+export interface CreateTournamentForm {
+  name: string;
+  nbRounds: number;
+  clockLimitMinutes: number;
+  clockIncrement: number;
+  rated: boolean;
+}
+
+@Injectable({ providedIn: 'root' })
+export class TournamentService {
+  private readonly http = inject(HttpClient);
+  private readonly base = '/api/tournament';
+
+  list(): Observable<TournamentList> {
+    return this.http.get<TournamentList>(this.base);
+  }
+
+  get(id: string): Observable<Tournament> {
+    return this.http.get<Tournament>(`${this.base}/${id}`);
+  }
+
+  create(form: CreateTournamentForm): Observable<Tournament> {
+    const body = new URLSearchParams();
+    body.set('name', form.name);
+    body.set('nbRounds', String(form.nbRounds));
+    body.set('clockLimit', String(form.clockLimitMinutes * 60));
+    body.set('clockIncrement', String(form.clockIncrement));
+    body.set('rated', String(form.rated));
+    return this.http.post<Tournament>(this.base, body.toString(), {
+      headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' })
+    });
+  }
+
+  start(id: string): Observable<Tournament> {
+    return this.http.post<Tournament>(`${this.base}/${id}/start`, null);
+  }
+
+  joinWithBotToken(id: string, botToken: string): Observable<void> {
+    return this.http.post<void>(`${this.base}/${id}/join`, null, {
+      headers: new HttpHeaders({ Authorization: `Bearer ${botToken}` })
+    });
+  }
+
+  roundPairings(id: string, round: number): Observable<RoundPairings> {
+    return this.http.get<RoundPairings>(`${this.base}/${id}/round/${round}`);
+  }
+}

src/environments/environment.development.ts

@@ -2,6 +2,7 @@ export const environment = {
   production: false,
   apiBaseUrl: '',
   accountServiceUrl: '',
-  wsBaseUrl: 'ws://localhost:8080',
+  wsBaseUrl: 'ws://localhost:8084',
+  userWsBaseUrl: 'ws://localhost:8084',
   apiPath: '/api/board/game'
 };

src/environments/environment.staging.ts

@@ -7,5 +7,6 @@ export const environment = {
   apiBaseUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
   accountServiceUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
   wsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
+  userWsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
   apiPath: '/api/board/game'
 };

src/environments/environment.ts

@@ -7,5 +7,6 @@ export const environment = {
   apiBaseUrl: runtimeConfig.apiUrl || '',
   accountServiceUrl: runtimeConfig.apiUrl || '',
   wsBaseUrl: runtimeConfig.wsUrl,
+  userWsBaseUrl: runtimeConfig.wsUrl,
   apiPath: '/api/board/game'
 };

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <script src="/env.js" defer></script>
 </head>
 <body>

src/styles.css

@@ -5,11 +5,12 @@
   box-sizing: border-box;
 }
 
-/* Light Mode (Default) */
+/* Light Mode (Default) — sunset gradient palette */
 html:not([data-theme='dark']),
 html:not([data-theme='dark']) body {
-  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
-  color: var(--color-text-primary);
+  background: linear-gradient(180deg, #1a1838 0%, #2e2050 25%, #4a2962 45%, #8b3a6b 65%, #d44d4a 85%, #ff6b3d 100%);
+  background-attachment: fixed;
+  color: #fff;
 }
 
 html:not([data-theme='dark']) body::before {

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=1
-PATCH=0
+MINOR=2
+PATCH=8