feat: added a cat not sure about it tho

.dockerignore

@@ -1,12 +0,0 @@
-node_modules
-dist
-tmp
-*.log
-.git
-.gitignore
-Dockerfile
-docker-compose*.yml
-^\.env$
-.idea
-vscode
-coverage

CHANGELOG.md

@@ -1,46 +0,0 @@
-## 0.0.0 (2026-05-12)
-
-### Features
-
-* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
-* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
-* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
-* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
-
-### Bug Fixes
-
-* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
-* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
-* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
-* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
-* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
-* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
-* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
-* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
-* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
-## [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))

Dockerfile

@@ -1,26 +0,0 @@
-FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN npm install
-COPY . .
-RUN npm run build
-
-FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
-
-RUN apk add --no-cache gettext
-
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/nowchess-frontend/browser /usr/share/nginx/html
-
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-COPY public/env.template.js /usr/share/nginx/html/env.template.js
-COPY docker-entrypoint.sh /docker-entrypoint.sh
-RUN chmod +x /docker-entrypoint.sh
-
-EXPOSE 80
-ENTRYPOINT ["/docker-entrypoint.sh"]
-#

angular.json

@@ -2,8 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm",
+    "packageManager": "npm"
-    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -47,25 +46,17 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1MB",
+                  "maximumWarning": "500kB",
-                  "maximumError": "5MB"
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "1MB",
+                  "maximumWarning": "12kB",
-                  "maximumError": "5MB"
+                  "maximumError": "20kB"
                 }
               ],
               "outputHashing": "all"
             },
-            "staging": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.staging.ts"
-                }
-              ]
-            },
             "development": {
               "fileReplacements": [
                 {
@@ -83,17 +74,12 @@
         "serve": {
           "builder": "@angular/build:dev-server",
           "options": {
-            "proxyConfig": "proxy.conf.json",
+            "proxyConfig": "proxy.conf.json"
-            "host": "0.0.0.0",
-            "port": 4200
           },
           "configurations": {
             "production": {
               "buildTarget": "nowchess-frontend:build:production"
             },
-            "staging": {
-              "buildTarget": "nowchess-frontend:build:staging"
-            },
             "development": {
               "buildTarget": "nowchess-frontend:build:development"
             }

docker-entrypoint.sh

@@ -1,18 +0,0 @@
-#!/bin/sh
-set -e
-
-# Replace placeholders in env.template.js with environment variables and write env.js
-TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
-TARGET_PATH="/usr/share/nginx/html/env.js"
-
-if [ -f "$TEMPLATE_PATH" ]; then
-  echo "Rendering runtime config from $TEMPLATE_PATH"
-  echo "Using environment variables:"
-  printenv
-  echo "----"
-  envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
-else
-  echo "No runtime template found at $TEMPLATE_PATH, skipping"
-fi
-
-exec nginx -g 'daemon off;'

nginx.conf

@@ -1,22 +0,0 @@
-server {
-    listen       80;
-    server_name  localhost;
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    location /env.js {
-        root /usr/share/nginx/html;
-        default_type application/javascript;
-        expires -1;
-        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-    }
-
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-}

package-lock.json

@@ -458,6 +458,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz",
       "integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -474,6 +475,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz",
       "integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -487,6 +489,7 @@
       "integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -519,6 +522,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz",
       "integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -562,6 +566,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz",
       "integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -628,6 +633,7 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1601,6 +1607,7 @@
       "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.2.1",
         "@inquirer/confirm": "^5.1.14",
@@ -3531,6 +3538,7 @@
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -3887,6 +3895,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -4902,6 +4911,7 @@
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -5343,6 +5353,7 @@
       "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -5839,7 +5850,8 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
       "integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jose": {
       "version": "6.2.2",
@@ -5941,6 +5953,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -6408,6 +6421,7 @@
       "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
@@ -7920,6 +7934,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -7955,6 +7970,7 @@
       "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -8574,7 +8590,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "4.1.0",
@@ -8612,6 +8629,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8741,6 +8759,7 @@
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9538,6 +9557,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -9556,7 +9576,8 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }

package.json

@@ -4,8 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --configuration production",
+    "build": "ng build",
-    "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },

proxy.conf.json

@@ -1,20 +1,4 @@
 {
-  "/api/account": {
-    "target": "http://localhost:8083",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/api/challenge": {
-    "target": "http://localhost:8083",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/api/user/ws": {
-    "target": "http://localhost:8084",
-    "secure": false,
-    "changeOrigin": true,
-    "ws": true
-  },
   "/api": {
     "target": "http://localhost:8080",
     "secure": false,

public/env.template.js

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

src/app/app.config.ts

@@ -1,15 +1,14 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { authInterceptor } from './services/auth.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideHttpClient(withInterceptors([authInterceptor])),
+    provideHttpClient(),
     provideRouter(routes)
   ]
 };

src/app/app.html

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

src/app/app.routes.ts

@@ -1,15 +1,9 @@
 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';
 
 export const routes: Routes = [
   { path: '', component: WelcomeComponent },
-  { path: 'profile', component: ProfileComponent },
-  { path: 'games', component: GamesComponent },
-  { path: 'challenges', component: ChallengesComponent },
   { path: 'game/:gameId', component: GameComponent },
   { path: '**', redirectTo: '' }
 ];

src/app/app.ts

@@ -1,18 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { ToolbarComponent } from './components/toolbar/toolbar.component';
-import { ThemeService } from './services/theme.service';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, ToolbarComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })
 export class App implements OnInit {
-  constructor(private readonly themeService: ThemeService) { }
-
   ngOnInit(): void {
-    this.themeService.initTheme();
+    this.initTheme();
+  }
+
+  private initTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
   }
 }

src/app/button-template.css

@@ -1,69 +0,0 @@
-/* Shared Button Template - All Button Styles Consolidated */
-
-.app-btn {
-  background: var(--btn-bg);
-  color: var(--btn-fg);
-  border: none;
-  border-radius: 2px;
-  padding: 0.6rem 1rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  cursor: pointer;
-  box-shadow: var(--btn-glow);
-  transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  text-transform: uppercase;
-}
-
-.app-btn:hover:enabled {
-  transform: scale(1.05);
-  filter: brightness(1.15);
-}
-
-.app-btn:active:enabled {
-  transform: scale(0.98);
-}
-
-.app-btn:disabled {
-  opacity: 0.65;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.app-btn.w-100 {
-  width: 100%;
-}
-
-/* Dialog Button Layouts */
-.dialog-actions {
-  display: flex;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-}
-
-.dialog-actions .app-btn {
-  flex: 1;
-  min-width: 120px;
-}
-
-/* Promotion Dialog Button Variant */
-.promotion-choice {
-  flex-direction: column;
-  height: auto;
-  padding: 16px;
-  gap: 8px;
-}
-
-.promotion-choice .piece-symbol {
-  font-size: 32px;
-  line-height: 1;
-}
-
-.promotion-choice .piece-label {
-  font-size: 11px;
-}

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

@@ -1,51 +0,0 @@
-.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

@@ -1,27 +0,0 @@
-<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

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

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

@@ -1,261 +0,0 @@
-@import '../../button-template.css';
-
-.challenge-create-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  backdrop-filter: blur(3px);
-
-  &.loading {
-    pointer-events: none;
-    opacity: 0.7;
-  }
-}
-
-.challenge-create-dialog {
-  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
-  border: 2px solid #00d5ff;
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  padding: 24px;
-  color: #e0e0e0;
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
-
-  h2 {
-    margin: 0;
-    color: #00d5ff;
-    font-size: 24px;
-    font-weight: 600;
-    letter-spacing: 1px;
-  }
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 28px;
-  color: #00d5ff;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    color: #ffffff;
-    transform: scale(1.1);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.dialog-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  label {
-    color: #b0b0d0;
-    font-size: 13px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  input,
-  select {
-    background-color: rgba(15, 20, 50, 0.8);
-    border: 1px solid rgba(0, 213, 255, 0.3);
-    border-radius: 4px;
-    color: #e0e0e0;
-    padding: 10px 12px;
-    font-size: 14px;
-    font-family: 'Space Mono', monospace;
-    transition: all 0.2s ease;
-
-    &:focus {
-      outline: none;
-      border-color: #00d5ff;
-      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    option {
-      background-color: #0a0e27;
-      color: #e0e0e0;
-    }
-  }
-
-  small {
-    color: #ff6b6b;
-    font-size: 12px;
-    margin-top: 4px;
-  }
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.form-col {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  label {
-    color: #b0b0d0;
-    font-size: 13px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  input {
-    background-color: rgba(15, 20, 50, 0.8);
-    border: 1px solid rgba(0, 213, 255, 0.3);
-    border-radius: 4px;
-    color: #e0e0e0;
-    padding: 10px 12px;
-    font-size: 14px;
-    font-family: 'Space Mono', monospace;
-    transition: all 0.2s ease;
-
-    &:focus {
-      outline: none;
-      border-color: #00d5ff;
-      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.preset-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.preset-btn {
-  padding: 8px 16px;
-  background-color: rgba(0, 213, 255, 0.1);
-  border: 1px solid #00d5ff;
-  border-radius: 4px;
-  color: #00d5ff;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background-color: rgba(0, 213, 255, 0.2);
-    box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.error-message {
-  background-color: rgba(255, 107, 107, 0.1);
-  border: 1px solid #ff6b6b;
-  border-radius: 4px;
-  padding: 12px;
-  color: #ff9999;
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-
-.dialog-buttons {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid rgba(0, 213, 255, 0.2);
-
-  button {
-    padding: 10px 24px;
-    font-size: 13px;
-    font-weight: 600;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-
-    &.btn-secondary {
-      background-color: transparent;
-      border: 1px solid rgba(0, 213, 255, 0.3);
-      color: #00d5ff;
-
-      &:hover:not(:disabled) {
-        background-color: rgba(0, 213, 255, 0.1);
-        border-color: #00d5ff;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    &.btn-primary {
-      background-color: #00d5ff;
-      border: none;
-      color: #0a0e27;
-
-      &:hover:not(:disabled) {
-        box-shadow: 0 0 20px rgba(0, 213, 255, 0.6);
-        transform: translateY(-2px);
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-  }
-}

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

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

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

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

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

@@ -1,194 +0,0 @@
-@import '../../button-template.css';
-
-.challenge-notification {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  max-width: 400px;
-  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
-  border: 2px solid #00d5ff;
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
-  padding: 16px;
-  color: #e0e0e0;
-  z-index: 2000;
-  animation: slideInRight 0.3s ease-out;
-
-  &.error {
-    border-color: #ff6b6b;
-    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
-  }
-
-  @media (max-width: 768px) {
-    top: 10px;
-    right: 10px;
-    left: 10px;
-    max-width: none;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(450px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.notification-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
-}
-
-.notification-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-
-  .badge {
-    background-color: rgba(0, 213, 255, 0.2);
-    border: 1px solid #00d5ff;
-    border-radius: 3px;
-    padding: 4px 8px;
-    font-size: 10px;
-    font-weight: 700;
-    color: #00d5ff;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    white-space: nowrap;
-  }
-
-  .title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #d4f4ff;
-  }
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #00d5ff;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    color: #ffffff;
-    transform: scale(1.15);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.notification-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.time-control {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13px;
-
-  .label {
-    color: #b0b0d0;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .value {
-    background-color: rgba(0, 213, 255, 0.1);
-    border: 1px solid rgba(0, 213, 255, 0.3);
-    border-radius: 3px;
-    padding: 4px 12px;
-    color: #00d5ff;
-    font-family: 'Space Mono', monospace;
-    font-weight: 600;
-  }
-}
-
-.expiration {
-  font-size: 12px;
-  color: #b0b0d0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.error-message {
-  background-color: rgba(255, 107, 107, 0.1);
-  border: 1px solid #ff6b6b;
-  border-radius: 3px;
-  padding: 8px 10px;
-  color: #ff9999;
-  font-size: 12px;
-}
-
-.notification-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-
-  button {
-    padding: 8px 16px;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 3px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    border: none;
-
-    &.btn-decline {
-      background-color: transparent;
-      border: 1px solid rgba(0, 213, 255, 0.3);
-      color: #00d5ff;
-
-      &:hover:not(:disabled) {
-        background-color: rgba(0, 213, 255, 0.1);
-        border-color: #00d5ff;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    &.btn-accept {
-      background-color: #00d5ff;
-      color: #0a0e27;
-
-      &:hover:not(:disabled) {
-        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
-        transform: translateY(-1px);
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-  }
-}

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

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

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

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

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

@@ -1,132 +0,0 @@
-.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

@@ -1,51 +0,0 @@
-<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

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

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

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .input-card {
   background: var(--color-bg-card);
   border: var(--border-width) solid var(--color-border);
@@ -42,6 +40,22 @@
 
 }
 
+.input-card .btn {
+  border: var(--button-border);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  padding: var(--button-padding);
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.input-card .btn:hover {
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
+}
+
 .hint-text {
   margin: 0;
   color: var(--color-text-primary);

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

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

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

@@ -1,68 +0,0 @@
-@import '../../button-template.css';
-
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(2, 2, 10, 0.58);
-  display: grid;
-  place-items: center;
-  z-index: 350;
-  padding: 1rem;
-}
-
-.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;
-  display: grid;
-  gap: 0.7rem;
-}
-
-.dialog-title {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 22px;
-  letter-spacing: 2px;
-  color: var(--bb-title);
-  text-align: center;
-}
-
-.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;
-  font-size: 13px;
-}
-
-.dialog-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
-}
-
-.dialog-textarea {
-  min-height: 120px;
-  resize: vertical;
-}
-
-.text-danger {
-  color: #dc3545;
-  font-size: 0.875rem;
-}
-
-.sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}

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

@@ -1,34 +0,0 @@
-<div class="dialog-overlay" (click)="closeDialog()">
-  <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-title">LOGIN</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" />
-      @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
-      <small class="text-danger">Username must be at least 3 characters</small>
-      }
-
-      <label for="password" class="sr-only">Password</label>
-      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password" />
-      @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
-      <small class="text-danger">Password must be at least 6 characters</small>
-      }
-
-      @if (errorMessage) {
-      <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">
-          @if (isLoading) {
-          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-          }
-          Login
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,65 +0,0 @@
-import { Component, EventEmitter, Output, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { AuthService } from '../../services/auth.service';
-import { AuthDialogService } from '../../services/auth-dialog.service';
-
-@Component({
-  selector: 'app-login-dialog',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
-  templateUrl: './login-dialog.component.html',
-  styleUrl: './login-dialog.component.css'
-})
-export class LoginDialogComponent {
-  @Output() onClose = new EventEmitter<void>();
-  @Output() onSuccess = new EventEmitter<void>();
-
-  private readonly authService = inject(AuthService);
-  private readonly authDialogService = inject(AuthDialogService);
-  private readonly formBuilder = inject(FormBuilder);
-
-  loginForm: FormGroup;
-  errorMessage: string | null = null;
-  isLoading = false;
-
-  constructor() {
-    this.loginForm = this.formBuilder.group({
-      username: ['', [Validators.required, Validators.minLength(3)]],
-      password: ['', [Validators.required, Validators.minLength(6)]]
-    });
-  }
-
-  onSubmit(): void {
-    if (this.loginForm.invalid) {
-      this.errorMessage = 'Please fill in all fields correctly';
-      return;
-    }
-
-    this.isLoading = true;
-    this.errorMessage = null;
-    this.loginForm.disable();
-
-    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.';
-      }
-    });
-  }
-
-  closeDialog(): void {
-    this.onClose.emit();
-  }
-
-  openRegister(): void {
-    this.authDialogService.openRegister();
-  }
-}

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

@@ -1,94 +0,0 @@
-.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;
-}
-
-.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

@@ -1,43 +0,0 @@
-<div class="moves" role="list">
-  @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]="currentWhiteIndex === $index" role="listitem">
-        {{ pair.white }}
-      </div>
-      <div class="mv" [class.current]="currentBlackIndex === $index" [class.mv-empty]="!pair.black" role="listitem">
-        {{ 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" (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">LIVE</span>
-  }
-</div>

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

@@ -1,52 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output } 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[] = [];
-  @Output() navigate = new EventEmitter<MoveNavDirection>();
-
-  movePairs: MovePair[] = [];
-
-  get plyCount(): number {
-    return this.moves.length;
-  }
-
-  get currentWhiteIndex(): number {
-    const lastPairIndex = this.movePairs.length - 1;
-    if (lastPairIndex < 0) return -1;
-    const lastMove = this.moves.length - 1;
-    return lastMove % 2 === 0 ? lastPairIndex : -1;
-  }
-
-  get currentBlackIndex(): number {
-    const lastPairIndex = this.movePairs.length - 1;
-    if (lastPairIndex < 0) return -1;
-    const lastMove = this.moves.length - 1;
-    return lastMove % 2 === 1 ? lastPairIndex : -1;
-  }
-
-  ngOnChanges(): void {
-    this.movePairs = this.buildPairs(this.moves);
-  }
-
-  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

@@ -1,90 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-<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

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

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

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .promotion-dialog-overlay {
   position: fixed;
   top: 0;
@@ -22,10 +20,9 @@
 }
 
 .promotion-dialog {
-  background: var(--dlg-bg, white);
+  background: white;
-  border: 1.5px solid var(--dlg-border, #ddd);
+  border-radius: 8px;
-  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  box-shadow: var(--bb-glow, 0 4px 16px rgba(0, 0, 0, 0.2));
   max-width: 400px;
   width: 90%;
   animation: slideUp 0.3s ease;
@@ -47,14 +44,32 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid var(--bb-border, #e0e0e0);
+  border-bottom: 1px solid #e0e0e0;
 
   h3 {
     margin: 0;
-    font-family: 'Bebas Neue', sans-serif;
     font-size: 18px;
     font-weight: 600;
-    color: var(--bb-title, #333);
+    color: #333;
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #999;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #333;
+    }
   }
 }
 
@@ -65,8 +80,7 @@
 .promotion-prompt {
   margin: 0 0 20px 0;
   text-align: center;
-  color: var(--bb-title);
+  color: #666;
-  opacity: 0.8;
   font-size: 14px;
 }
 
@@ -75,3 +89,43 @@
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
+
+.promotion-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  background: #f5f5f5;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+
+  &:hover {
+    background: #e8e8e8;
+    border-color: #999;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  .piece-symbol {
+    font-size: 32px;
+    line-height: 1;
+  }
+
+  .piece-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+}

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

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

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

@@ -1,68 +0,0 @@
-@import '../../button-template.css';
-
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(2, 2, 10, 0.58);
-  display: grid;
-  place-items: center;
-  z-index: 350;
-  padding: 1rem;
-}
-
-.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;
-  display: grid;
-  gap: 0.7rem;
-}
-
-.dialog-title {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 22px;
-  letter-spacing: 2px;
-  color: var(--bb-title);
-  text-align: center;
-}
-
-.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;
-  font-size: 13px;
-}
-
-.dialog-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
-}
-
-.dialog-textarea {
-  min-height: 120px;
-  resize: vertical;
-}
-
-.text-danger {
-  color: #dc3545;
-  font-size: 0.875rem;
-}
-
-.sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}

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

@@ -1,40 +0,0 @@
-<div class="dialog-overlay" (click)="closeDialog()">
-  <div class="dialog-card" (click)="$event.stopPropagation()">
-    <div class="dialog-title">CREATE ACCOUNT</div>
-
-    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
-      <input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username" />
-      @if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
-      <small class="text-danger">Username must be at least 3 characters</small>
-      }
-
-      <input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email" />
-      @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
-      <small class="text-danger">Please enter a valid email</small>
-      }
-
-      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password" />
-      @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" />
-
-      @if (errorMessage) {
-      <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">
-          @if (isLoading) {
-          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-          }
-          Register
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,74 +0,0 @@
-import { Component, EventEmitter, Output, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { AuthService } from '../../services/auth.service';
-import { AuthDialogService } from '../../services/auth-dialog.service';
-
-@Component({
-  selector: 'app-register-dialog',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
-  templateUrl: './register-dialog.component.html',
-  styleUrl: './register-dialog.component.css'
-})
-export class RegisterDialogComponent {
-  @Output() onClose = new EventEmitter<void>();
-  @Output() onSuccess = new EventEmitter<void>();
-
-  private readonly authService = inject(AuthService);
-  private readonly authDialogService = inject(AuthDialogService);
-  private readonly formBuilder = inject(FormBuilder);
-
-  registerForm: FormGroup;
-  errorMessage: string | null = null;
-  isLoading = false;
-
-  constructor() {
-    this.registerForm = this.formBuilder.group({
-      username: ['', [Validators.required, Validators.minLength(3)]],
-      email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required, Validators.minLength(6)]],
-      confirmPassword: ['', [Validators.required]]
-    });
-  }
-
-  onSubmit(): void {
-    if (this.registerForm.invalid) {
-      this.errorMessage = 'Please fill in all fields correctly';
-      return;
-    }
-
-    const { password, confirmPassword } = this.registerForm.value;
-    if (password !== confirmPassword) {
-      this.errorMessage = 'Passwords do not match';
-      return;
-    }
-
-    this.isLoading = true;
-    this.errorMessage = null;
-    this.registerForm.disable();
-
-    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.';
-      }
-    });
-  }
-
-  closeDialog(): void {
-    this.onClose.emit();
-  }
-
-  openLogin(): void {
-    this.authDialogService.openLogin();
-  }
-}

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

@@ -1,511 +0,0 @@
-/* ============ 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;
-}
-
-: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;
-}
-
-/* ============ 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;
-}
-
-/* ============ 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;
-}
-
-/* ============ BELL ============ */
-.nc-bell {
-  width: 36px; height: 36px;
-  border: 1px solid var(--nc-border);
-  background: transparent;
-  color: var(--nc-text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: background 0.15s, color 0.15s;
-  font-family: inherit;
-}
-
-.nc-bell:hover,
-.nc-bell.is-open {
-  background: var(--nc-accent-hover);
-  color: var(--nc-text);
-}
-
-/* ============ BADGE ============ */
-.nc-badge {
-  position: absolute;
-  top: 5px; right: 5px;
-  min-width: 14px; height: 14px;
-  border-radius: 7px;
-  background: var(--nc-accent-badge);
-  color: var(--nc-badge-text);
-  font-size: 9px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 3px;
-}
-
-/* ============ GAMES BUTTON ============ */
-.nc-games-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 36px;
-  padding: 0 14px;
-  border: 1px solid var(--nc-border);
-  background: transparent;
-  color: var(--nc-text-muted);
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.nc-games-btn:hover {
-  background: var(--nc-accent-hover);
-  color: var(--nc-text);
-}
-
-/* ============ PROFILE BUTTON ============ */
-.nc-profile {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 10px 4px 4px;
-  height: 36px;
-  border: 1px solid var(--nc-border);
-  background: transparent;
-  cursor: pointer;
-  color: var(--nc-text-muted);
-  font-family: inherit;
-  transition: background 0.15s, color 0.15s;
-}
-
-.nc-profile:hover,
-.nc-profile.is-open {
-  background: var(--nc-accent-hover);
-  color: var(--nc-text);
-}
-
-.nc-profile-name {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-}
-
-.nc-chevron { opacity: 0.5; }
-
-/* ============ AVATAR ============ */
-.nc-avatar {
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--nc-avatar-a) 0%, var(--nc-avatar-b) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-.nc-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
-.nc-avatar-md { width: 40px; height: 40px; font-size: 17px; }
-
-/* ============ DROPDOWN WRAPPER ============ */
-.nc-dropdown-wrap { position: relative; }
-
-/* ============ POPOVERS ============ */
-.nc-popover {
-  position: absolute;
-  top: calc(100% + 10px);
-  right: 0;
-  background: var(--nc-surface);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--nc-border);
-  box-shadow: var(--nc-popover-glow);
-  z-index: 200;
-  overflow: hidden;
-}
-
-/* ============ NOTIFICATIONS PANEL ============ */
-.nc-notif { width: 360px; }
-
-.nc-notif-header {
-  padding: 14px 18px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.nc-notif-header-title {
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  color: var(--nc-text-muted);
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.nc-notif-list { max-height: 420px; overflow-y: auto; }
-
-.nc-notif-empty {
-  padding: 24px 18px;
-  text-align: center;
-  font-size: 13px;
-  color: var(--nc-text-dim);
-  letter-spacing: 0.04em;
-}
-
-.nc-notif-row {
-  padding: 14px 18px;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  position: relative;
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.nc-notif-row.is-unread { background: rgba(255,255,255,0.03); }
-
-.nc-notif-row.is-unread::before {
-  content: "";
-  position: absolute;
-  left: 6px; top: 22px;
-  width: 4px; height: 4px;
-  border-radius: 50%;
-  background: var(--nc-unread-dot);
-}
-
-.nc-notif-icon {
-  width: 32px; height: 32px;
-  flex-shrink: 0;
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--nc-accent);
-}
-
-.nc-notif-body { flex: 1; min-width: 0; }
-
-.nc-notif-text {
-  font-size: 13px;
-  color: var(--nc-text);
-  line-height: 1.35;
-}
-
-.nc-notif-text b { font-weight: 600; }
-
-.nc-notif-meta {
-  font-size: 10px;
-  color: var(--nc-text-dim);
-  margin-top: 4px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.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,207 +0,0 @@
-<nav class="nc-nav">
-
-  <!-- Logo -->
-  <div class="nc-logo" (click)="goToHome()" role="button" tabindex="0">
-    <div class="nc-logo-mark">♞</div>
-    <span class="nc-logo-text">NowChess</span>
-  </div>
-
-  <!-- Center links — only when logged in -->
-  @if (currentUser) {
-  <div class="nc-links">
-    <button type="button" class="nc-link">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
-        stroke-linecap="round" stroke-linejoin="round">
-        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-      Watch
-    </button>
-    <button type="button" class="nc-link">Leaderboard</button>
-  </div>
-  }
-
-  <!-- Right cluster -->
-  <div class="nc-right">
-
-    @if (currentUser; as user) {
-
-    <!-- Notifications bell -->
-    <div class="nc-dropdown-wrap" data-dropdown="notif">
-      <button type="button" class="nc-bell" [class.is-open]="notifOpen" (click)="toggleNotif($event)"
-        aria-label="Notifications">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
-          stroke-linecap="round" stroke-linejoin="round">
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-        </svg>
-        @if (incomingChallenges.length > 0) {
-        <span class="nc-badge">{{ incomingChallenges.length }}</span>
-        }
-      </button>
-
-      @if (notifOpen) {
-      <div class="nc-popover nc-notif" (click)="$event.stopPropagation()">
-        <div class="nc-notif-header">
-          <span class="nc-notif-header-title">Challenges</span>
-        </div>
-
-        <div class="nc-notif-list">
-          @if (incomingChallenges.length === 0) {
-          <div class="nc-notif-empty">No pending challenges</div>
-          }
-          @for (challenge of incomingChallenges; track challenge.id) {
-          <div class="nc-notif-row is-unread">
-            <div class="nc-notif-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
-                stroke-linecap="round" stroke-linejoin="round">
-                <line x1="14.5" y1="17.5" x2="3" y2="6" />
-                <path d="M13 19l6 -6" /><path d="M16 16l4 4" />
-                <path d="M19 21l2 -2" /><path d="M15 5l4 4" />
-                <path d="M21 3l-3 1l-4 4" />
-              </svg>
-            </div>
-            <div class="nc-notif-body">
-              <div class="nc-notif-text">
-                <b>{{ challenge.challenger.name }}</b> challenged you to a
-                {{ getTimeControlDisplay(challenge) }} game.
-              </div>
-              <div class="nc-notif-meta">
-                {{ challenge.challenger.rating }} · {{ challenge.timeControl.type ?? 'Custom' }} · {{ getExpirationInfo(challenge) }}
-              </div>
-              <div class="nc-notif-actions">
-                <button type="button" class="nc-btn-accept"
-                  [disabled]="acceptingId === challenge.id || !!decliningId"
-                  (click)="acceptChallenge($event, challenge)">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
-                    stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="20 6 9 17 4 12" />
-                  </svg>
-                  {{ acceptingId === challenge.id ? '...' : 'Accept' }}
-                </button>
-                <button type="button" class="nc-btn-decline"
-                  [disabled]="!!acceptingId || decliningId === challenge.id"
-                  (click)="declineChallenge($event, challenge)">
-                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
-                    stroke-linecap="round" stroke-linejoin="round">
-                    <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
-                  </svg>
-                  {{ decliningId === challenge.id ? '...' : 'Decline' }}
-                </button>
-              </div>
-            </div>
-          </div>
-          }
-        </div>
-
-        <div class="nc-notif-footer">
-          <button type="button" class="nc-view-all" (click)="goToChallenges()">View all challenges</button>
-        </div>
-      </div>
-      }
-    </div>
-
-    <!-- Games quick-access -->
-    <button type="button" class="nc-games-btn" (click)="goToGames()">
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
-        stroke-linecap="round" stroke-linejoin="round">
-        <path d="M14.5 17.5L3 6"/>
-        <path d="M13 19l6-6"/><path d="M16 16l4 4"/>
-        <path d="M19 21l2-2"/><path d="M15 5l4 4"/>
-        <path d="M21 3l-3 1-4 4"/>
-      </svg>
-      Games
-    </button>
-
-    <!-- Profile -->
-    <div class="nc-dropdown-wrap" data-dropdown="profile">
-      <button type="button" class="nc-profile" [class.is-open]="profileOpen" (click)="toggleProfile($event)">
-        <div class="nc-avatar nc-avatar-sm">{{ getInitial() }}</div>
-        <span class="nc-profile-name">{{ user.username }}</span>
-        <svg class="nc-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </button>
-
-      @if (profileOpen) {
-      <div class="nc-popover nc-menu" (click)="$event.stopPropagation()">
-        <div class="nc-menu-header">
-          <div class="nc-avatar nc-avatar-md">{{ getInitial() }}</div>
-          <div>
-            <div class="nc-menu-user-name">{{ user.username }}</div>
-            <div class="nc-menu-user-sub">{{ user.rating }} · &#64;{{ user.username }}</div>
-          </div>
-        </div>
-
-        <div class="nc-menu-group">
-          <button type="button" class="nc-menu-item" (click)="goToProfile()">
-            <span class="nc-menu-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
-                stroke-linecap="round" stroke-linejoin="round">
-                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                <circle cx="12" cy="7" r="4" />
-              </svg>
-            </span>
-            <span class="nc-menu-label">My profile</span>
-          </button>
-
-          <button type="button" class="nc-menu-item" (click)="goToChallenges()">
-            <span class="nc-menu-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
-                stroke-linecap="round" stroke-linejoin="round">
-                <line x1="14.5" y1="17.5" x2="3" y2="6" />
-                <path d="M13 19l6 -6" /><path d="M16 16l4 4" />
-                <path d="M19 21l2 -2" /><path d="M15 5l4 4" />
-                <path d="M21 3l-3 1l-4 4" />
-              </svg>
-            </span>
-            <span class="nc-menu-label">Challenges</span>
-          </button>
-
-          <button type="button" class="nc-menu-item" (click)="toggleTheme($event)">
-            <span class="nc-menu-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
-                stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
-              </svg>
-            </span>
-            <span class="nc-menu-label">{{ isDarkMode ? 'Light mode' : 'Dark mode' }}</span>
-            <span class="nc-toggle" [class.is-on]="isDarkMode"></span>
-          </button>
-        </div>
-
-        <div class="nc-menu-group">
-          <button type="button" class="nc-menu-item danger" (click)="logout()">
-            <span class="nc-menu-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
-                stroke-linecap="round" stroke-linejoin="round">
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                <polyline points="16 17 21 12 16 7" />
-                <line x1="21" y1="12" x2="9" y2="12" />
-              </svg>
-            </span>
-            <span class="nc-menu-label">Log out</span>
-          </button>
-        </div>
-      </div>
-      }
-    </div>
-
-    } @else {
-
-    <!-- Logged-out auth buttons -->
-    <button type="button" class="nc-auth-btn" (click)="openLoginDialog()">Login</button>
-    <button type="button" class="nc-auth-btn nc-auth-btn--primary" (click)="openRegisterDialog()">Register</button>
-
-    }
-  </div>
-</nav>
-
-@if (showLoginDialog) {
-<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
-}
-
-@if (showRegisterDialog) {
-<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
-}

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

@@ -1,227 +0,0 @@
-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';
-import { AuthService } from '../../services/auth.service';
-import { AuthDialogService } from '../../services/auth-dialog.service';
-import { CurrentUser } from '../../models/auth.models';
-import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
-import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
-import { ThemeService } from '../../services/theme.service';
-import { ChallengeEventService } from '../../services/challenge-event.service';
-import { ChallengeService } from '../../services/challenge.service';
-import { ChallengeWebSocketService } from '../../services/challenge-websocket.service';
-import { Challenge } from '../../models/challenge.models';
-
-@Component({
-  selector: 'app-toolbar',
-  standalone: true,
-  imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
-  templateUrl: './toolbar.component.html',
-  styleUrl: './toolbar.component.css'
-})
-export class ToolbarComponent implements OnInit {
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly authService = inject(AuthService);
-  private readonly authDialogService = inject(AuthDialogService);
-  private readonly themeService = inject(ThemeService);
-  private readonly challengeEventService = inject(ChallengeEventService);
-  private readonly challengeService = inject(ChallengeService);
-  private readonly challengeWs = inject(ChallengeWebSocketService);
-  private readonly router = inject(Router);
-
-  private pollHandle: ReturnType<typeof setInterval> | null = null;
-
-  currentUser: CurrentUser | null = null;
-  showLoginDialog = false;
-  showRegisterDialog = false;
-  isDarkMode = false;
-  profileOpen = false;
-  notifOpen = false;
-  incomingChallenges: Challenge[] = [];
-  acceptingId: string | null = null;
-  decliningId: string | null = null;
-
-  ngOnInit(): void {
-    this.destroyRef.onDestroy(() => this.stopPolling());
-
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(user => {
-        this.currentUser = user;
-        if (user) {
-          this.challengeWs.connect();
-          this.startPolling();
-        } else {
-          this.challengeWs.disconnect();
-          this.stopPolling();
-          this.challengeEventService.clear();
-        }
-      });
-
-    this.authDialogService.dialogState$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(state => {
-        this.showLoginDialog = state === 'login';
-        this.showRegisterDialog = state === 'register';
-      });
-
-    this.themeService.darkMode$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(isDark => { this.isDarkMode = isDark; });
-
-    this.challengeEventService.getIncomingChallenges$()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(challenges => { this.incomingChallenges = challenges; });
-  }
-
-  private startPolling(): void {
-    this.fetchIncoming();
-    this.pollHandle = setInterval(() => this.fetchIncoming(), 5000);
-  }
-
-  private stopPolling(): void {
-    if (this.pollHandle !== null) {
-      clearInterval(this.pollHandle);
-      this.pollHandle = null;
-    }
-  }
-
-  private fetchIncoming(): void {
-    this.challengeService.listChallenges().subscribe({
-      next: response => {
-        const incoming = response.in ?? response.incoming ?? [];
-        this.challengeEventService.setIncomingChallenges(incoming);
-      }
-    });
-  }
-
-  @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();
-  }
-
-  closeLoginDialog(): void {
-    this.authDialogService.close();
-  }
-
-  openRegisterDialog(): void {
-    this.profileOpen = false;
-    this.notifOpen = false;
-    this.authDialogService.openRegister();
-  }
-
-  closeRegisterDialog(): void {
-    this.authDialogService.close();
-  }
-
-  logout(): void {
-    this.profileOpen = false;
-    this.notifOpen = false;
-    this.authService.logout();
-  }
-
-  toggleTheme(event: MouseEvent): void {
-    event.stopPropagation();
-    this.themeService.toggleTheme();
-  }
-
-  goToHome(): void {
-    void this.router.navigate(['/']);
-  }
-
-  goToProfile(): void {
-    this.profileOpen = false;
-    this.notifOpen = false;
-    void this.router.navigate(['/profile']);
-  }
-
-  goToGames(): void {
-    this.profileOpen = false;
-    this.notifOpen = false;
-    void this.router.navigate(['/games']);
-  }
-
-  goToChallenges(): void {
-    this.profileOpen = false;
-    this.notifOpen = false;
-    void this.router.navigate(['/challenges']);
-  }
-
-  onLoginSuccess(): void {
-    this.closeLoginDialog();
-  }
-
-  onRegisterSuccess(): void {
-    this.closeRegisterDialog();
-  }
-
-  getInitial(): string {
-    return this.currentUser?.username?.charAt(0).toUpperCase() ?? '?';
-  }
-
-  getTimeControlDisplay(challenge: Challenge): string {
-    const { limit, increment } = challenge.timeControl;
-    if (!limit || !increment) return 'Unlimited';
-    return `${Math.floor(limit / 60)}+${increment}`;
-  }
-
-  getExpirationInfo(challenge: Challenge): string {
-    const diff = new Date(challenge.expiresAt).getTime() - Date.now();
-    if (diff <= 0) return 'Expired';
-    const min = Math.floor(diff / 60000);
-    return min > 60 ? `${Math.floor(min / 60)}h` : `${min}m`;
-  }
-
-  acceptChallenge(event: MouseEvent, challenge: Challenge): void {
-    event.stopPropagation();
-    if (this.acceptingId || this.decliningId) return;
-    this.acceptingId = challenge.id;
-    this.challengeService.acceptChallenge(challenge.id).subscribe({
-      next: accepted => {
-        this.acceptingId = null;
-        this.challengeEventService.onChallengeAccepted(accepted);
-        if (accepted.gameId) void this.router.navigate(['/game', accepted.gameId]);
-      },
-      error: () => { this.acceptingId = null; }
-    });
-  }
-
-  declineChallenge(event: MouseEvent, challenge: Challenge): void {
-    event.stopPropagation();
-    if (this.acceptingId || this.decliningId) return;
-    this.decliningId = challenge.id;
-    this.challengeService.declineChallenge(challenge.id, { reason: 'generic' }).subscribe({
-      next: () => {
-        this.decliningId = null;
-        this.challengeEventService.removeChallenge(challenge.id);
-      },
-      error: () => { this.decliningId = null; }
-    });
-  }
-}

src/app/core/config.loader.ts

@@ -1,11 +0,0 @@
-/**
- * Load runtime configuration from window.__RUNTIME_CONFIG__
- * This is injected by docker-entrypoint.sh at container startup
- */
-export function loadRuntimeConfig() {
-  const config = (window as any).__RUNTIME_CONFIG__ || {};
-  return {
-    apiUrl: config.API_URL || '',
-    wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
-  };
-}

src/app/models/auth.models.ts

@@ -1,28 +0,0 @@
-export interface LoginRequest {
-  username: string;
-  password: string;
-}
-
-export interface RegisterRequest {
-  username: string;
-  password: string;
-  email?: string;
-}
-
-export interface RegisterResponse {
-  id: string;
-  username: string;
-  rating: number;
-  createdAt: string;
-}
-
-export interface LoginResponse {
-  token: string;
-}
-
-export interface CurrentUser {
-  id: string;
-  username: string;
-  rating: number;
-  createdAt: string;
-}

src/app/models/challenge.models.ts

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

src/app/models/game.models.ts

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

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

@@ -1,222 +0,0 @@
-@import '../../button-template.css';
-
-.challenges-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
-  color: #e0e0e0;
-  padding: 20px;
-  font-family: 'Space Mono', 'Courier New', monospace;
-}
-
-.challenges-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-  border-bottom: 2px solid rgba(0, 213, 255, 0.3);
-
-  h1 {
-    margin: 0;
-    color: #00d5ff;
-    font-size: 32px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-  }
-}
-
-.back-btn {
-  background: transparent;
-  border: 1px solid rgba(0, 213, 255, 0.3);
-  color: #00d5ff;
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: rgba(0, 213, 255, 0.1);
-    border-color: #00d5ff;
-  }
-}
-
-.error-banner {
-  background-color: rgba(255, 107, 107, 0.1);
-  border: 1px solid #ff6b6b;
-  border-radius: 4px;
-  padding: 15px;
-  color: #ff9999;
-  margin-bottom: 20px;
-}
-
-.challenges-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 30px;
-
-  @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.challenges-section {
-  h2 {
-    color: #00d5ff;
-    font-size: 20px;
-    margin: 0 0 20px 0;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(0, 213, 255, 0.2);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-}
-
-.loading-spinner {
-  text-align: center;
-  padding: 40px;
-  color: #00d5ff;
-  font-size: 16px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 40px;
-  color: #b0b0d0;
-  font-size: 14px;
-  background-color: rgba(0, 213, 255, 0.05);
-  border: 1px dashed rgba(0, 213, 255, 0.2);
-  border-radius: 4px;
-}
-
-.challenge-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.challenge-card {
-  background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 26, 62, 0.8) 100%);
-  border: 1px solid rgba(0, 213, 255, 0.3);
-  border-radius: 8px;
-  padding: 16px;
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: rgba(0, 213, 255, 0.6);
-    box-shadow: 0 0 15px rgba(0, 213, 255, 0.2);
-  }
-}
-
-.challenge-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(0, 213, 255, 0.1);
-
-  .challenger-name {
-    color: #d4f4ff;
-    font-weight: 600;
-    font-size: 14px;
-  }
-
-  .time-control {
-    background-color: rgba(0, 213, 255, 0.15);
-    border: 1px solid rgba(0, 213, 255, 0.3);
-    color: #00d5ff;
-    padding: 4px 12px;
-    border-radius: 3px;
-    font-weight: 600;
-    font-size: 12px;
-  }
-}
-
-.challenge-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 12px;
-
-  .detail {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 12px;
-
-    .label {
-      color: #b0b0d0;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .value {
-      color: #00d5ff;
-      font-weight: 600;
-
-      &.status-pending {
-        color: #ffcc30;
-      }
-
-      &.status-accepted {
-        color: #4ade80;
-      }
-
-      &.status-declined {
-        color: #ff6b6b;
-      }
-
-      &.status-expired {
-        color: #b0b0d0;
-      }
-    }
-  }
-}
-
-.challenge-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-
-  .btn {
-    padding: 8px 16px;
-    border: 1px solid rgba(0, 213, 255, 0.3);
-    border-radius: 4px;
-    background-color: transparent;
-    color: #00d5ff;
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 213, 255, 0.1);
-      border-color: #00d5ff;
-    }
-
-    &.btn-accept {
-      background-color: #00d5ff;
-      color: #04000f;
-      border: none;
-
-      &:hover {
-        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
-      }
-    }
-
-    &.btn-decline,
-    &.btn-cancel {
-      color: #ff6b6b;
-      border-color: rgba(255, 107, 107, 0.3);
-
-      &:hover {
-        background-color: rgba(255, 107, 107, 0.1);
-        border-color: #ff6b6b;
-      }
-    }
-  }
-}

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

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

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

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

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

@@ -1,529 +1,391 @@
-/* ============================================================
-   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
-============================================================ */
-:host-context(html:not([data-theme='dark'])) {
-  --nc-neon: #c026d3;
-  --nc-neon-soft: rgba(192, 38, 211, 0.45);
-  --nc-neon-clock-bg: rgba(192, 38, 211, 0.07);
-  --nc-bg: #f5f0fc;
-  --nc-surface: rgba(255, 255, 255, 0.88);
-  --nc-surface-solid: rgba(255, 255, 255, 0.98);
-  --nc-text: #0f0022;
-  --nc-text-muted: rgba(15, 0, 34, 0.65);
-  --nc-text-dim: rgba(15, 0, 34, 0.40);
-  --nc-border: rgba(15, 0, 34, 0.10);
-  --nc-border-strong: rgba(15, 0, 34, 0.20);
-  --nc-warning: #d97706;
-  --nc-warning-soft: rgba(217, 119, 6, 0.35);
-  --nc-danger: #dc2626;
-  --nc-danger-soft: rgba(220, 38, 38, 0.25);
-  --nc-danger-bg: rgba(220, 38, 38, 0.06);
-  --nc-success: #059669;
-  --nc-clock-bg: rgba(0, 0, 0, 0.04);
-  --nc-btn-bg: rgba(0, 0, 0, 0.03);
-  --nc-btn-hover-bg: rgba(0, 0, 0, 0.06);
-  --nc-seg-bg: rgba(0, 0, 0, 0.06);
-}
-
-/* ============================================================
-   SHELL & AMBIENT BG
-============================================================ */
 .game-shell {
   min-height: 100dvh;
-  background: var(--nc-bg);
+  padding: clamp(var(--size-md), 2vw, var(--size-xl));
-  font-family: var(--nc-sans);
+  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
-  color: var(--nc-text);
+  color: var(--color-text-primary);
-  position: relative;
 }
 
-.game-shell::before {
+:host-context(html[data-theme='dark']) .game-shell {
-  content: "";
-  position: fixed;
-  inset: 0;
   background:
-    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.08), transparent 60%),
+    radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
-    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(74, 41, 98, 0.18), transparent 60%);
+    linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
-  pointer-events: none;
-  z-index: 0;
 }
 
-:host-context(html:not([data-theme='dark'])) .game-shell::before {
+.game-card {
-  background:
+  max-width: 1400px;
-    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(192, 38, 211, 0.06), transparent 60%),
-    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(120, 40, 180, 0.08), transparent 60%);
-}
-
-/* ============================================================
-   PAGE CONTAINER
-============================================================ */
-.page {
-  position: relative;
-  z-index: 1;
-  max-width: 1320px;
   margin: 0 auto;
-  padding: 28px 32px 60px;
+  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);
 }
 
-/* ============================================================
+:host-context(html[data-theme='dark']) .game-shell .game-card {
-   BREADCRUMB
+  background: rgba(26, 47, 71, 0.88);
-============================================================ */
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
-.crumb {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 18px;
-  font-family: var(--nc-mono);
-  font-size: 11px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
 }
 
-.crumb-link {
+header {
-  color: var(--nc-text-dim);
+  margin-bottom: var(--size-xl);
+}
+
+h1,
+h2 {
+  color: var(--color-text-primary);
+  margin: 0 0 var(--size-md);
+  font-size: var(--heading-h1);
+}
+
+.meta {
+  color: var(--color-text-primary);
+  font-size: 0.95rem;
+}
+
+.back-link {
+  display: inline-block;
+  margin-bottom: var(--size-sm);
+  color: var(--color-text-primary);
   text-decoration: none;
-  display: inline-flex;
+  font-weight: 600;
-  align-items: center;
-  gap: 6px;
-  transition: color 0.15s;
 }
 
-.crumb-link:hover { color: var(--nc-neon); }
+.back-link:hover {
-.crumb-sep { color: var(--nc-text-dim); opacity: 0.5; }
+  text-decoration: underline;
-.crumb-current { color: var(--nc-text-muted); }
-
-/* ============================================================
-   GAME HEADER
-============================================================ */
-.game-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 28px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--nc-border);
 }
 
-.game-title {
+.top-section {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  gap: var(--size-md);
-  gap: 8px;
+  margin-top: var(--size-sm);
+  flex: 0 0 auto;
 }
 
-.game-title h1 {
+.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;
-  font-size: 26px;
+  color: var(--color-text-primary);
-  font-weight: 600;
+  font-size: 1rem;
-  letter-spacing: -0.01em;
-  color: var(--nc-text);
-  display: inline-flex;
-  align-items: center;
-  gap: 14px;
 }
 
-.tag-rated {
+.board-theme-group {
-  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;
-}
-
-.game-meta-strip {
   display: flex;
-  align-items: center;
+  gap: var(--size-md);
-  gap: 14px;
+  flex-wrap: wrap;
-  font-family: var(--nc-mono);
-  font-size: 11px;
-  color: var(--nc-text-dim);
-  letter-spacing: 0.06em;
 }
 
-.game-id {
+.board-theme-option {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--size-xs);
-  color: var(--nc-text-muted);
+  color: var(--color-text-primary);
-}
-
-.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;
-}
-
-.copy-btn:hover { color: var(--nc-neon); }
-
-.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;
 }
 
-.btn:hover {
+.board-theme-option input {
-  background: var(--nc-btn-hover-bg);
+  accent-color: var(--color-primary);
-  border-color: var(--nc-text-muted);
 }
 
-.btn-primary {
+.move-card {
-  background: var(--nc-neon) !important;
+  padding: var(--size-lg-padding);
-  color: #fff !important;
+}
-  border-color: var(--nc-neon) !important;
+
-  box-shadow: 0 0 14px rgba(255, 69, 200, 0.3);
+.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));
+  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);
+  display: flex;
+  gap: var(--size-sm);
+  align-items: baseline;
+}
+
+.history-number {
   font-weight: 700;
-  padding: 9px 14px;
+  min-width: 1.8rem;
-  flex-shrink: 0;
 }
 
-.btn-primary:hover { box-shadow: 0 0 20px rgba(255, 69, 200, 0.5); }
+.history-move {
+  font-family: monospace;
+}
 
-.btn-ghost {
+.history-empty {
-  background: transparent;
+  margin: 0;
-  border: none;
+  color: var(--color-text-primary);
-  color: var(--nc-text-muted);
+}
-  padding: 8px 12px;
+
-  font-size: 12px;
+.player-timer {
-  letter-spacing: 0.04em;
+  background: var(--color-bg-input);
-  cursor: pointer;
+  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 {
+  display: flex;
+  gap: var(--size-lg);
+  flex-wrap: wrap;
+}
+
+.export-mode-option {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--size-sm);
-  font-family: var(--nc-sans);
+  color: var(--color-text-primary);
-  transition: color 0.15s;
+  font-weight: 600;
 }
 
-.btn-ghost:hover { color: var(--nc-neon); }
+.export-mode-option input {
-
+  accent-color: var(--color-primary);
-/* ============================================================
-   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 {
+.export-text {
-  color: var(--nc-danger);
+  width: 100%;
-  background: var(--nc-danger-bg);
+  min-height: 140px;
-  border: 1px solid var(--nc-danger-soft);
+  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;
 }
 
-/* ============================================================
+.export-button {
-   COMPLETION BANNER
+  width: fit-content;
-============================================================ */
+  border: var(--button-border);
-.completion-banner {
+  border-radius: var(--button-radius);
-  display: flex;
+  background: var(--color-bg-button);
-  align-items: center;
+  color: var(--color-text-primary);
-  justify-content: space-between;
+  font-weight: 700;
-  gap: 16px;
+  padding: var(--button-padding);
-  padding: 16px 20px;
+  cursor: pointer;
-  margin-bottom: 24px;
+}
-  background: rgba(255, 69, 200, 0.06);
+
-  border: 1px solid var(--nc-neon-soft);
+.export-button:hover {
-  animation: slideIn 0.35s ease-out;
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
+}
+
+.export-note {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.alert {
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width) solid var(--color-border);
+}
+
+.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;
 }
 
 @keyframes slideIn {
-  from { opacity: 0; transform: translateY(-10px); }
+  from {
-  to   { opacity: 1; transform: translateY(0); }
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.completion-title { font-size: 16px; font-weight: 600; color: var(--nc-neon); }
+.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-subtitle {
+  text-align: center;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
 
 .completion-link {
-  font-family: var(--nc-mono);
+  color: var(--color-text-primary);
-  font-size: 11px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--nc-text-muted);
   text-decoration: none;
-  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(--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;
-}
-
-/* ============================================================
-   BOARD COLUMN
-============================================================ */
-.board-col {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 520px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.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;
-}
-
-:host-context(html:not([data-theme='dark'])) .status-strip {
-  background: rgba(192, 38, 211, 0.04);
-  border-color: rgba(192, 38, 211, 0.18);
-}
-
-.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.1);
-}
-
-/* ============================================================
-   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;
+  border-bottom: 2px solid var(--color-text-primary);
+  transition: all 0.3s ease;
+  padding-bottom: 2px;
 }
 
-.side-card-meta {
+.completion-link:hover {
-  font-family: var(--nc-mono);
+  color: var(--color-secondary-blue);
-  font-size: 10px;
+  border-bottom-color: var(--color-secondary-blue);
-  color: var(--nc-text-dim);
-  letter-spacing: 0.08em;
 }
 
-.chev { color: var(--nc-text-dim); flex-shrink: 0; transition: transform 0.2s; }
+@media (max-width: 991px) {
-.side-card[open] .chev { transform: rotate(180deg); }
+  .game-card {
-.side-card[open] .side-card-summary { border-bottom: 1px solid var(--nc-border); }
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
-
-.side-card-body {
-  padding: 14px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
   }
 
-/* ============================================================
+  .board-section {
-   UCI INPUT
+    min-height: 350px;
-============================================================ */
-.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); }
+  h1,
-.uci-input::placeholder { color: var(--nc-text-dim); }
+  h2 {
-
+    font-size: var(--heading-h1-tablet);
-.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 {
+@media (max-width: 768px) {
-  flex: 1;
+  .game-shell {
-  background: transparent;
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
-  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; }
+  .game-card {
-
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
-/* ============================================================
-   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); }
+  header {
-
+    margin-bottom: var(--size-lg);
-/* ============================================================
-   RESPONSIVE
-============================================================ */
-@media (max-width: 1100px) {
-  .layout { grid-template-columns: 1fr; }
-  .board-col { max-width: 560px; margin: 0 auto; }
   }
 
-@media (max-width: 640px) {
+  h1,
-  .page { padding: 16px 16px 48px; }
+  h2 {
-  .game-header { flex-direction: column; align-items: flex-start; gap: 12px; }
+    font-size: var(--heading-h1-mobile);
-  .game-title h1 { font-size: 20px; }
+  }
+
+  .meta {
+    font-size: 0.85rem;
+  }
+
+  .top-section {
+    gap: var(--size-xs);
+    margin-bottom: var(--size-xs);
+  }
+
+  .board-section {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 480px) {
+  .game-shell {
+    padding: var(--size-sm);
+  }
+
+  .game-card {
+    padding: var(--size-sm);
+    border-radius: var(--border-radius-md);
+  }
+
+  header {
+    margin-bottom: var(--size-md);
+  }
+
+  h1 {
+    font-size: var(--heading-h1-small);
+  }
+
+  .meta {
+    font-size: 0.75rem;
+  }
+
+  .top-section {
+    gap: var(--size-xs-gap);
+    margin-bottom: var(--size-xs);
+  }
+
+  .board-section {
+    min-height: 250px;
+  }
 }

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

@@ -1,206 +1,162 @@
+<main class="game-shell" [class.theme-dark]="isDarkMode">
   <app-promotion-dialog
     [isOpen]="facade.isPromotionDialogOpen"
     (promotionSelected)="facade.onPromotionSelected($event)"
-  (closed)="facade.onPromotionClosed()" />
+    (closed)="facade.onPromotionClosed()"
+  />
 
-<div class="game-shell">
+  <section class="game-card">
-  <div class="page">
+    <header class="mb-3">
-
+      <a routerLink="/" class="back-link">Back</a>
-    <!-- Breadcrumb -->
+      <h1 class="mb-2">1 vs 1 Game</h1>
-    <nav class="crumb" aria-label="Breadcrumb">
+      <p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
-      <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>
-
-    <!-- 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 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">
+      <p>Loading game state...</p>
-        <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="game-completion-alert alert alert-success mb-3">
-          <span class="completion-title">{{ facade.gameCompletionMessage }}</span>
+          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-          <a routerLink="/" class="completion-link">Start new game</a>
+          <p class="completion-subtitle mb-0">
+            <a routerLink="/" class="completion-link">Start a new game</a>
+          </p>
         </div>
       }
-
+      <div class="container-fluid">
-      <!-- Main layout -->
+        <div class="row g-3">
-      <div class="layout">
+          <!-- Left Sidebar - Dummy Timers -->
-
+          <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-        <!-- BOARD COLUMN -->
+            <section class="timer-card">
-        <div class="board-col">
+              <h2>Timers</h2>
-
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
-          <!-- Opponent (top) -->
+                <p class="timer-label">White</p>
-          <app-player-card
+                <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
-            [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">
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
-              {{ facade.state.turn === 'white' ? 'WHITE' : 'BLACK' }} TO MOVE
+                <p class="timer-label">Black</p>
-            </span>
+                <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
+              </div>
+            </section>
           </div>
 
-          <!-- Board -->
+          <!-- Center - Chess Board -->
-          <div class="board-wrap">
+          <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)" />
+                  (squareSelected)="facade.onBoardSquareSelected($event)"
+                />
               </div>
 
-          <!-- Current player (bottom) -->
+              <section class="top-section">
-          <app-player-card
+                <section class="board-theme-card" aria-label="Board design chooser">
-            [name]="whitePlayerName"
+                  <h3>Board Design</h3>
-            [initial]="whitePlayerInitial"
+                  <div class="board-theme-group" role="radiogroup" aria-label="Board design">
-            color="white"
+                    <label class="board-theme-option">
-            [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"
-              (navigate)="onMoveNavigate($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="radio"
-                  type="text"
+                        name="boardTheme"
-                  class="uci-input"
+                        [checked]="boardTheme === 'arabian'"
-                  placeholder="e.g. e2e4"
+                        (change)="setBoardTheme('arabian')"
-                  autocomplete="off"
+                      />
+                      <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"
-                  (input)="facade.moveInput = $any($event.target).value"
+                  cardClass="move-card"
-                  (keydown.enter)="facade.submitMove()" />
+                  hintText="Click your piece to highlight legal targets."
-                <button class="btn btn-primary" type="button" (click)="facade.submitMove()">Send</button>
+                  (valueChange)="facade.moveInput = $event"
+                  (buttonClick)="facade.submitMove()"
+                />
+              </section>
+            </section>
           </div>
-              <p class="uci-hint">Click a piece on the board to see legal targets.</p>
-            </div>
-          </details>
 
-          <!-- Board design (collapsible) -->
+          <!-- Right Sidebar - Export -->
-          <details class="side-card">
+          <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <summary class="side-card-summary">
+            <section class="history-card">
-              <span class="side-card-title">Board Design</span>
+              <h2>Move History</h2>
-              <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"/>
+              @if (facade.state.moves.length === 0) {
-              </svg>
+                <p class="history-empty">No moves yet.</p>
-            </summary>
+              } @else {
-            <div class="side-card-body">
+                <ol class="history-list">
-              <div class="seg" role="tablist" aria-label="Board theme">
+                  @for (move of facade.state.moves; track $index) {
-                <button class="seg-btn" [class.active]="boardTheme === 'arabian'" role="tab" (click)="setBoardTheme('arabian')">Arabian</button>
+                    <li>
-                <button class="seg-btn" [class.active]="boardTheme === 'classic'" role="tab" (click)="setBoardTheme('classic')">Classic</button>
+                      <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="export-button" (click)="completeExport()">Done</button>
+
+              @if (exportNotice) {
+                <p class="export-note">{{ exportNotice }}</p>
+              }
+            </section>
           </div>
         </div>
-          </details>
-
-          <!-- Export (collapsible) -->
-          <app-export-panel [fen]="facade.state.fen" [pgn]="facade.state.pgn" />
-
-        </aside>
       </div>
     }
 
-  </div>
+    @if (facade.errorMessage) {
-</div>
+      <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
-
-<!-- Toast notification -->
-@if (toastMessage) {
-  <div class="toast show">{{ toastMessage }}</div>
     }
+  </section>
+</main>

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

@@ -1,115 +1,52 @@
+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 { ExportPanelComponent } from '../../components/export-panel/export-panel.component';
+import { InputCardComponent } from '../../components/input-card/input-card.component';
-import { MoveHistoryComponent, MoveNavDirection } 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';
 
-const LOW_TIME_THRESHOLD_MS = 60_000;
+interface TimerSnapshot {
-const BOARD_THEME_KEY = 'nowchess.boardTheme';
+  whiteSeconds: number;
+  blackSeconds: number;
+  turn: TimerTurn;
+  savedAt: number;
+}
 
 @Component({
   selector: 'app-game',
   standalone: true,
-  imports: [
+  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent, PromotionDialogComponent],
-    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;
-  whiteTimerMs: number | null = null;
+  blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
-  blackTimerMs: number | null = null;
+  exportType: 'fen' | 'pgn' = 'fen';
   boardTheme: BoardTheme = 'arabian';
-  flipped = false;
+  isDarkMode = false;
-  toastMessage = '';
+  exportValue = '';
-
+  exportNotice = '';
   private timerIntervalId: number | null = null;
-  private toastTimer: ReturnType<typeof setTimeout> | null = null;
+  private activeGameId = '';
 
-  // ── 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.startClock();
+    this.startDummyTimers();
 
     this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
       const id = paramMap.get('gameId');
@@ -118,7 +55,11 @@ export class GameComponent implements OnInit, OnDestroy {
         this.facade.loading = false;
         return;
       }
+
+      this.activeGameId = id;
+      this.restoreTimers(id);
       this.facade.setGameId(id);
+      this.syncExportValue();
     });
   }
 
@@ -126,91 +67,192 @@ export class GameComponent implements OnInit, OnDestroy {
     if (this.timerIntervalId !== null) {
       window.clearInterval(this.timerIntervalId);
     }
+
+    this.persistTimers(this.resolveCurrentTurn());
   }
 
-  // ── Board theme ──────────────────────────────────────────────
+  private syncThemeFromDocument(): void {
-  setBoardTheme(theme: BoardTheme): void {
+    this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
-    this.boardTheme = theme;
-    localStorage.setItem(BOARD_THEME_KEY, theme);
   }
 
-  // ── Board flip ───────────────────────────────────────────────
+  private applyIncomingTheme(): void {
-  flipBoard(): void {
+    const incomingTheme = window.history.state?.theme;
-    this.flipped = !this.flipped;
+    if (incomingTheme === 'dark') {
-  }
+      document.documentElement.setAttribute('data-theme', 'dark');
-
+      localStorage.setItem('theme', 'dark');
-  // ── 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.showToast('Resigned');
-  }
-
-  // ── Move history navigation ───────────────────────────────────
-  onMoveNavigate(_direction: MoveNavDirection): void {
-    // Visual-only for now; board always reflects live position.
-  }
-
-  // ── 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 ───────────────────────────────────────────────────
-  private startClock(): void {
-    if (this.timerIntervalId !== null) return;
-    this.timerIntervalId = window.setInterval(() => this.tickClock(), 200);
-  }
-
-  private tickClock(): void {
-    const state = this.facade.state;
-    const clock = state?.clock;
-    if (!clock || this.facade.isGameFinished) {
-      this.whiteTimerMs = null;
-      this.blackTimerMs = null;
       return;
     }
 
-    const elapsed = Math.max(0, Date.now() - this.facade.clockSyncedAt);
+    if (incomingTheme === 'light') {
-    const activeIsWhite = state!.turn === 'white';
+      document.documentElement.removeAttribute('data-theme');
-    this.whiteTimerMs = clock.whiteRemainingMs < 0
+      localStorage.removeItem('theme');
-      ? -1
+    }
-      : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
-    this.blackTimerMs = clock.blackRemainingMs < 0
-      ? -1
-      : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
   }
 
-  private showToast(msg: string): void {
+  setExportType(type: 'fen' | 'pgn'): void {
-    this.toastMessage = msg;
+    this.exportType = type;
-    if (this.toastTimer !== null) clearTimeout(this.toastTimer);
+    this.exportNotice = '';
-    this.toastTimer = setTimeout(() => {
+    this.syncExportValue();
-      this.toastMessage = '';
+  }
-    }, 1800);
+
+  setBoardTheme(theme: BoardTheme): void {
+    this.boardTheme = theme;
+    localStorage.setItem(GameComponent.BOARD_THEME_STORAGE_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.';
+      });
+  }
+
+  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');
+    return `${minutes}:${seconds}`;
+  }
+
+  private startDummyTimers(): void {
+    if (this.timerIntervalId !== null) {
+      return;
+    }
+
+    this.timerIntervalId = window.setInterval(() => {
+      this.tickDummyTimers();
+      this.syncExportValue();
+    }, 1000);
+  }
+
+  private tickDummyTimers(): void {
+    const state = this.facade.state;
+    if (!state || this.facade.loading || this.facade.isGameFinished) {
+      return;
+    }
+
+    if (state.turn === 'white') {
+      this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - 1);
+      this.persistTimers('white');
+      return;
+    }
+
+    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;
+    }
+  }
+
+  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 resolveStoredBoardTheme(): BoardTheme {
-    const stored = localStorage.getItem(BOARD_THEME_KEY);
+    const stored = localStorage.getItem(GameComponent.BOARD_THEME_STORAGE_KEY);
     return stored === 'classic' ? 'classic' : 'arabian';
   }
 }

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

@@ -8,13 +8,11 @@ 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 = '';
@@ -38,7 +36,6 @@ 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;
@@ -122,7 +119,6 @@ export class GameFacade implements OnDestroy {
         next: (state) => {
           if (this.game) {
             this.game = { ...this.game, state };
-            this.clockSyncedAt = Date.now();
             this.updateGameCompletion();
           }
           this.moveInput = '';
@@ -211,10 +207,8 @@ export class GameFacade implements OnDestroy {
       .subscribe({
         next: (game) => {
           this.game = game;
-          this.clockSyncedAt = Date.now();
           this.loading = false;
           this.updateGameCompletion();
-          this.gameHistory.recordGame(this.gameId);
           this.startStreaming();
           this.tryMakeBotMove();
         },
@@ -229,14 +223,15 @@ export class GameFacade implements OnDestroy {
     this.streamService.startStreaming(
       this.gameId,
       (event) => this.applyStreamEvent(event),
-      () => { /* polling fallback — not an error */ }
+      () => {
+        this.errorMessage = 'Live stream disconnected. Falling back to polling.';
+      }
     );
   }
 
   private applyStreamEvent(event: GameStreamEvent): void {
     if (event.type === 'gameFull') {
       this.game = event.game;
-      this.clockSyncedAt = Date.now();
       this.boardSelection = this.boardSelectionService.clearSelection();
       this.updateGameCompletion();
       this.tryMakeBotMove();
@@ -246,7 +241,6 @@ 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.updateGameCompletion();
       if (event.state.moves.length !== moveCountBefore) {
         this.boardSelection = this.boardSelectionService.clearSelection();

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

@@ -1,366 +0,0 @@
-: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

@@ -1,156 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-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(() => of(null)))
-    );
-
-    forkJoin(requests)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((results) => {
-        const valid = results.filter((g): g is GameFull => g !== null);
-        this.activeGames = valid.filter((g) => !FINISHED_STATUSES.includes(g.state.status));
-        this.finishedGames = valid.filter((g) => FINISHED_STATUSES.includes(g.state.status));
-        this.loading = false;
-      });
-  }
-}

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

@@ -1,478 +0,0 @@
-@import '../welcome/welcome.component.css';
-
-.profile-building-container {
-  position: absolute;
-  bottom: 10%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 15;
-}
-
-.building-wrapper {
-  position: relative;
-  width: clamp(300px, 80vw, 600px);
-  margin: 0 auto;
-}
-
-.building-structure {
-  background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
-  border: 2px solid var(--dlg-border);
-  border-radius: 8px;
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
-  overflow: hidden;
-}
-
-.cityscape-shell.sunset .building-structure {
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
-}
-
-.building-top {
-  height: 30px;
-  background: linear-gradient(180deg, var(--bldg-mid) 0%, var(--bldg-body) 100%);
-  border-bottom: 1px solid rgba(0, 210, 255, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  color: var(--bb-tag);
-  font-family: 'Bebas Neue', sans-serif;
-  letter-spacing: 2px;
-  position: relative;
-}
-
-.cityscape-shell.sunset .building-top {
-  border-bottom-color: rgba(255, 120, 40, 0.3);
-}
-
-.building-top::after {
-  content: 'MY PROFILE';
-  font-size: 12px;
-}
-
-.building-main {
-  display: grid;
-  grid-template-columns: 80px 1fr 80px;
-  gap: 0;
-  padding: 20px;
-  min-height: 200px;
-  background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%);
-  align-items: center;
-}
-
-.cityscape-shell.sunset .building-main {
-  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
-}
-
-.building-side {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  justify-content: center;
-}
-
-.building-side.left-side {
-  border-right: 1px solid rgba(0, 210, 255, 0.2);
-  padding-right: 15px;
-}
-
-.cityscape-shell.sunset .building-side.left-side {
-  border-right-color: rgba(255, 120, 40, 0.2);
-}
-
-.building-side.right-side {
-  border-left: 1px solid rgba(0, 210, 255, 0.2);
-  padding-left: 15px;
-}
-
-.cityscape-shell.sunset .building-side.right-side {
-  border-left-color: rgba(255, 120, 40, 0.2);
-}
-
-.window {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
-  border: 1px solid rgba(0, 210, 255, 0.5);
-  border-radius: 2px;
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
-  position: relative;
-  animation: windowFlicker 4s ease-in-out infinite;
-}
-
-.cityscape-shell.sunset .window {
-  background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
-  border-color: rgba(255, 120, 40, 0.5);
-  box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
-  animation: windowFlickerSunset 4s ease-in-out infinite;
-}
-
-@keyframes windowFlicker {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
-  }
-  50% {
-    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3);
-  }
-}
-
-@keyframes windowFlickerSunset {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
-  }
-  50% {
-    box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
-  }
-}
-
-.building-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 20px;
-}
-
-.player-display-window {
-  background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.05) 100%);
-  border: 2px solid var(--bb-tag);
-  border-radius: 4px;
-  padding: 30px;
-  text-align: center;
-  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1);
-  min-width: 250px;
-}
-
-.cityscape-shell.sunset .player-display-window {
-  background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
-  box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
-}
-
-.player-avatar {
-  font-size: 4rem;
-  margin-bottom: 15px;
-  display: block;
-  animation: avatarPulse 3s ease-in-out infinite;
-}
-
-@keyframes avatarPulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-.player-name {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 28px;
-  font-weight: bold;
-  color: var(--bb-title);
-  letter-spacing: 1px;
-  margin-bottom: 20px;
-  text-transform: uppercase;
-  background: linear-gradient(90deg, var(--bb-title), var(--bb-tag));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  padding: 8px 12px;
-  border-radius: 4px;
-  position: relative;
-}
-
-.player-name:hover {
-  filter: brightness(1.2);
-  background: linear-gradient(90deg, var(--bb-tag), var(--bb-title));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transform: scale(1.05);
-}
-
-.player-name.copied {
-  background: linear-gradient(90deg, #4caf50, #66bb6a);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
-}
-
-.player-id-label {
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--bb-tag);
-  margin-bottom: 8px;
-  opacity: 0.8;
-}
-
-.player-id-value {
-  font-family: 'Space Mono', monospace;
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: 2px;
-  color: var(--bb-tag);
-  background: rgba(0, 210, 255, 0.15);
-  padding: 12px 16px;
-  border: 1.5px solid var(--bb-tag);
-  border-radius: 2px;
-  word-break: break-all;
-  box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
-  text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  user-select: text;
-}
-
-.cityscape-shell.sunset .player-id-value {
-  background: rgba(182, 64, 255, 0.15);
-  box-shadow: 0 0 15px rgba(255, 64, 249, 0.4);
-  text-shadow: 0 0 10px rgba(255, 64, 249, 0.5);
-}
-
-.player-id-value:hover {
-  background: rgba(0, 210, 255, 0.25);
-  box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
-  transform: scale(1.02);
-}
-
-.cityscape-shell.sunset .player-id-value:hover {
-  background: rgba(182, 64, 255, 0.25);
-  box-shadow: 0 0 20px rgba(255, 64, 249, 0.6);
-}
-
-.player-id-value.copied {
-  background: rgba(76, 175, 80, 0.2);
-  border-color: #4caf50;
-  color: #4caf50;
-  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
-}
-
-.copy-notification {
-  font-family: 'Space Mono', monospace;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  color: #4caf50;
-  margin-top: 12px;
-  animation: copyNotification 2s ease-in-out forwards;
-}
-
-@keyframes copyNotification {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  80% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
-
-.building-base {
-  padding: 20px;
-  background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(0, 210, 255, 0.02) 100%);
-  border-top: 1px solid rgba(0, 210, 255, 0.2);
-}
-
-.cityscape-shell.sunset .building-base {
-  background: linear-gradient(180deg, rgba(255, 120, 40, 0.05) 0%, rgba(255, 120, 40, 0.02) 100%);
-  border-top-color: rgba(255, 120, 40, 0.2);
-}
-
-.stat-panel {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  gap: 20px;
-}
-
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.stat-label {
-  font-family: 'Space Mono', monospace;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: var(--bb-tag);
-  opacity: 0.7;
-}
-
-.stat-value {
-  font-family: 'Space Mono', monospace;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--bb-title);
-  text-align: center;
-}
-
-.stat-divider {
-  width: 1px;
-  height: 30px;
-  background: rgba(0, 210, 255, 0.2);
-}
-
-.cityscape-shell.sunset .stat-divider {
-  background: rgba(255, 120, 40, 0.2);
-}
-
-.building-door {
-  height: 60px;
-  background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
-  border-top: 1px solid rgba(0, 210, 255, 0.2);
-  border-radius: 0 0 8px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.cityscape-shell.sunset .building-door {
-  border-top-color: rgba(255, 120, 40, 0.2);
-}
-
-.building-door::before {
-  content: '';
-  position: absolute;
-  width: 90%;
-  height: 100%;
-  border: 1.5px solid rgba(0, 210, 255, 0.3);
-  border-radius: 4px;
-  background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02));
-}
-
-.cityscape-shell.sunset .building-door::before {
-  border-color: rgba(255, 120, 40, 0.3);
-  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05), rgba(255, 120, 40, 0.02));
-}
-
-.door-handle {
-  width: 12px;
-  height: 12px;
-  background: radial-gradient(circle at 30% 30%, rgba(0, 210, 255, 0.8), rgba(0, 210, 255, 0.4));
-  border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
-  position: relative;
-  z-index: 2;
-  margin-left: 80px;
-  animation: handleGlow 2s ease-in-out infinite;
-}
-
-.cityscape-shell.sunset .door-handle {
-  background: radial-gradient(circle at 30% 30%, rgba(255, 120, 40, 0.8), rgba(255, 120, 40, 0.4));
-  box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
-  animation: handleGlowSunset 2s ease-in-out infinite;
-}
-
-@keyframes handleGlow {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);
-  }
-}
-
-@keyframes handleGlowSunset {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(255, 120, 40, 0.9);
-  }
-}
-
-.back-btn {
-  position: absolute;
-  top: -50px;
-  left: 0;
-  background: transparent;
-  color: var(--bb-title);
-  border: 1px solid var(--dlg-border);
-  border-radius: 2px;
-  padding: 0.5rem 1rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.back-btn:hover {
-  background: rgba(0, 210, 255, 0.1);
-  border-color: var(--bb-tag);
-  color: var(--bb-tag);
-  box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
-}
-
-.cityscape-shell.sunset .back-btn:hover {
-  background: rgba(182, 64, 255, 0.1);
-  box-shadow: 0 0 15px rgba(255, 64, 249, 0.3);
-}
-
-@media (max-width: 600px) {
-  .building-structure {
-    border-radius: 4px;
-  }
-
-  .building-main {
-    grid-template-columns: 50px 1fr 50px;
-    padding: 15px;
-    gap: 8px;
-  }
-
-  .window {
-    width: 30px;
-    height: 30px;
-  }
-
-  .player-display-window {
-    min-width: 180px;
-    padding: 20px;
-  }
-
-  .player-avatar {
-    font-size: 3rem;
-    margin-bottom: 10px;
-  }
-
-  .player-name {
-    font-size: 20px;
-    margin-bottom: 15px;
-  }
-
-  .player-id-value {
-    font-size: 14px;
-    padding: 8px 12px;
-  }
-
-  .building-base {
-    padding: 15px;
-  }
-
-  .stat-panel {
-    gap: 10px;
-  }
-
-  .back-btn {
-    top: -45px;
-    font-size: 9px;
-    padding: 0.4rem 0.8rem;
-  }
-}

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

@@ -1,97 +0,0 @@
-<div class="cityscape-shell" [class.sunset]="isSunsetMode">
-
-  <div class="scene">
-    <div class="sky">
-      <div class="stars-layer">
-        <div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
-      </div>
-      <div class="sun"></div>
-      <div class="cloud-wrap">
-        <div class="cloud cloud-a"></div>
-        <div class="cloud cloud-b"></div>
-        <div class="cloud cloud-c"></div>
-        <div class="cloud cloud-d"></div>
-        <div class="cloud cloud-e"></div>
-      </div>
-    </div>
-
-    <div class="bg-layer">
-      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
-    </div>
-
-    <div class="main-layer">
-      <div class="profile-building-container">
-        @if (currentUser; as user) {
-        <!-- Player Building with Info Inside -->
-        <div class="building-wrapper">
-          <div class="building-structure">
-            <!-- Building top -->
-            <div class="building-top"></div>
-            
-            <!-- Building main section with user inside -->
-            <div class="building-main">
-              <!-- Left side windows -->
-              <div class="building-side left-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-              
-              <!-- Center section - User Info -->
-              <div class="building-center">
-                <div class="player-display-window">
-                  <div class="player-avatar">👤</div>
-                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
-                  <div class="player-id-label">PLAYER ID</div>
-                  <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
-                  @if (idCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
-                  @if (usernameCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
-                </div>
-              </div>
-              
-              <!-- Right side windows -->
-              <div class="building-side right-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-            </div>
-            
-            <!-- Building base with stats -->
-            <div class="building-base">
-              <div class="stat-panel">
-                <div class="stat">
-                  <span class="stat-label">RATING</span>
-                  <span class="stat-value">{{ user.rating }}</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat">
-                  <span class="stat-label">MEMBER SINCE</span>
-                  <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
-                </div>
-              </div>
-            </div>
-            
-            <!-- Building door -->
-            <div class="building-door">
-              <div class="door-handle"></div>
-            </div>
-          </div>
-          
-          <!-- Back button -->
-          <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="haze"></div>
-    <div class="ground"></div>
-  </div>
-</div>

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

@@ -1,127 +0,0 @@
-import { Component, OnInit, DestroyRef, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AuthService } from '../../services/auth.service';
-import { ThemeService } from '../../services/theme.service';
-import { CurrentUser } from '../../models/auth.models';
-
-interface Star {
-  style: Record<string, string>;
-}
-
-interface BackgroundBuilding {
-  style: Record<string, string>;
-}
-
-@Component({
-  selector: 'app-profile',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './profile.component.html',
-  styleUrl: './profile.component.css'
-})
-export class ProfileComponent implements OnInit {
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly authService = inject(AuthService);
-  private readonly themeService = inject(ThemeService);
-  private readonly router = inject(Router);
-
-  currentUser: CurrentUser | null = null;
-  isSunsetMode = false;
-  idCopied = false;
-  usernameCopied = false;
-
-  stars: Star[] = [];
-  bgBuildings: BackgroundBuilding[] = [];
-
-  ngOnInit(): void {
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-        if (!user) {
-          this.router.navigate(['']);
-        }
-      });
-
-    this.themeService.darkMode$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((isDarkMode) => {
-        this.isSunsetMode = !isDarkMode;
-      });
-
-    this.generateStars(220);
-    this.generateBackgroundBuildings();
-  }
-
-  goBack(): void {
-    this.router.navigate(['']);
-  }
-
-  copyPlayerId(id: string): void {
-    navigator.clipboard.writeText(id).then(() => {
-      this.idCopied = true;
-      setTimeout(() => {
-        this.idCopied = false;
-      }, 2000);
-    });
-  }
-
-  copyUsername(username: string): void {
-    navigator.clipboard.writeText(username).then(() => {
-      this.usernameCopied = true;
-      setTimeout(() => {
-        this.usernameCopied = false;
-      }, 2000);
-    });
-  }
-
-  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' },
-      { 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' },
-      { 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' },
-      { l: '94%', w: '6%', h: '27vh' }
-    ];
-
-    this.bgBuildings = specs.map((spec) => ({
-      style: { left: spec.l, width: spec.w, height: spec.h }
-    }));
-  }
-}

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

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 :host {
   display: block;
 }

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

@@ -1,4 +1,15 @@
 <div class="cityscape-shell" [class.sunset]="isSunsetMode">
+  <div class="mode-badge">{{ modeBadge }}</div>
+
+  <button
+    type="button"
+    class="tgl"
+    (click)="toggleTheme()"
+    [attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
+    title="Toggle theme"
+  >
+    <span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
+  </button>
 
   <div class="scene">
     <div class="sky">
@@ -24,41 +35,50 @@
         <div class="ant" style="height:38px;"></div>
         <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
           <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
-            <div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wA1']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
           <div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
-            <div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wA2']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="height:36vh;">
-          <div>
+          <div style="padding:5px 5px 0;">
             <div class="bb">
               <div class="bb-tag">JOIN</div>
               <div class="bb-title">JOIN<br />GAME</div>
-              <button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
+              <button type="button" class="bb-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
                 {{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
               </button>
             </div>
           </div>
           <div class="wins" style="grid-template-columns:repeat(5,1fr);">
-            <div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wA3']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
-
-        <!-- Draggable Meat Emoji -->
-        @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
-          🍖
-        </div>
-        }
       </div>
 
       <div class="bwrap" style="left:21%;width:15%;">
         <div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
           <div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
-            <div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wB1']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="height:44vh;">
@@ -69,13 +89,17 @@
             <div class="bb">
               <div class="bb-tag">BOT</div>
               <div class="bb-title">PLAY WITH<br />A BOT</div>
-              <button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
+              <button type="button" class="bb-btn" (click)="openDifficultyDialog()" [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'GET STARTED →' }}
               </button>
             </div>
           </div>
           <div class="wins" style="grid-template-columns:repeat(5,1fr);">
-            <div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wB2']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
       </div>
@@ -87,12 +111,20 @@
         </div>
         <div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
           <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
-            <div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wC1']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="height:10vh;">
           <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
-            <div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wC2']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="height:48vh;">
@@ -101,13 +133,17 @@
               <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)="startOneVsOne()" [disabled]="creating">
+              <button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'START NOW →' }}
               </button>
             </div>
           </div>
           <div class="wins" style="grid-template-columns:repeat(7,1fr);">
-            <div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wC3']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
       </div>
@@ -116,7 +152,11 @@
         <div class="ant" style="height:30px;"></div>
         <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
           <div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
-            <div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wD1']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
         <div class="bpart" style="height:42vh;">
@@ -127,11 +167,15 @@
             <div class="bb">
               <div class="bb-tag">OPTIONS</div>
               <div class="bb-title">MORE<br />OPTIONS</div>
-              <button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
+              <button type="button" class="bb-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
             </div>
           </div>
           <div class="wins" style="grid-template-columns:repeat(6,1fr);">
-            <div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wD2']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
       </div>
@@ -139,7 +183,11 @@
       <div class="bwrap" style="left:83%;width:10%;">
         <div class="bpart" style="height:30vh;">
           <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
-            <div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
+            <div
+              class="w"
+              *ngFor="let win of windows['wE1']"
+              [ngStyle]="win.style"
+            ></div>
           </div>
         </div>
       </div>
@@ -157,13 +205,16 @@
 
     <!-- Zoomed Window View -->
     @if (isZoomedIn) {
-    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
+      <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="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"
+              <img 
-              (click)="$event.stopPropagation()" />
+                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>
@@ -181,7 +232,12 @@
 
           <!-- Draggable Meat Emoji -->
           @if (showMeatEmoji) {
-        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
+            <div 
+              class="meat-emoji"
+              [style.left.px]="meatX"
+              [style.top.px]="meatY"
+              (mousedown)="onMeatMouseDown($event)"
+            >
               🍖
             </div>
           }
@@ -198,9 +254,9 @@
       <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="dialog-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="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
-        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
+          <button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
         </div>
       </div>
     </div>
@@ -211,7 +267,7 @@
       <div class="dialog-card" (click)="$event.stopPropagation()">
         <div class="dialog-title">MORE OPTIONS</div>
         <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
+          <button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
         </div>
       </div>
     </div>
@@ -221,14 +277,19 @@
     <div class="dialog-overlay" (click)="closeJoinDialog()">
       <div class="dialog-card" (click)="$event.stopPropagation()">
         <div class="dialog-title">JOIN GAME</div>
-      <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
+        <input
-        [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
+          type="text"
+          class="dialog-input"
+          [(ngModel)]="gameIdInput"
+          placeholder="Paste game ID here"
+          [disabled]="joiningGame"
+          (keyup.enter)="submitJoinGame()"
+        />
         <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitJoinGame()"
+          <button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
-          [disabled]="joiningGame || !gameIdInput.trim()">
             {{ joiningGame ? 'JOINING...' : 'JOIN' }}
           </button>
-        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
+          <button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
         </div>
       </div>
     </div>
@@ -240,37 +301,31 @@
         <div class="dialog-title">IMPORT GAME</div>
         <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
           <label class="import-mode-option">
-          <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
+            <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
-            [disabled]="importing" />
             <span>FEN</span>
           </label>
           <label class="import-mode-option">
-          <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
+            <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
-            [disabled]="importing" />
             <span>PGN</span>
           </label>
         </div>
-      <textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
+        <textarea
-        [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
+          class="dialog-input dialog-textarea"
-        rows="5"></textarea>
+          [(ngModel)]="importText"
+          [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
+          [disabled]="importing"
+          rows="5"
+        ></textarea>
         <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
+          <button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
             {{ importing ? 'IMPORTING...' : 'IMPORT' }}
           </button>
-        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
+          <button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
         </div>
       </div>
     </div>
   }
 
-  @if (showChallengeDialog) {
-  <div class="dialog-overlay" (click)="closeChallengeDialog()">
-    <div class="dialog-card" (click)="$event.stopPropagation()">
-      <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
-    </div>
-  </div>
-  }
-
   @if (errorMessage) {
     <p class="error-banner">{{ errorMessage }}</p>
   }

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

@@ -1,16 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit } 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 { 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 { GameApiService } from '../../services/game-api.service';
-import { ThemeService } from '../../services/theme.service';
-import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';
 
 type Difficulty = 'easy' | 'medium' | 'hard';
 type ImportMode = 'fen' | 'pgn';
@@ -30,34 +24,14 @@ 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],
+  imports: [CommonModule, FormsModule],
   templateUrl: './welcome.component.html',
   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);
-
   creating = false;
   joiningGame = false;
   importing = false;
@@ -67,7 +41,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   showOptionsDialog = false;
   showJoinDialog = false;
   showImportDialog = false;
-  showChallengeDialog = false;
 
   gameIdInput = '';
   importMode: ImportMode = 'fen';
@@ -75,9 +48,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
 
   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;
@@ -112,30 +82,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     private readonly router: Router,
     private readonly gameApi: GameApiService
   ) {
+    this.initTheme();
   }
 
   ngOnInit(): void {
-    this.themeService.darkMode$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((isDarkMode) => {
-        this.isSunsetMode = !isDarkMode;
-        this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
-      });
-
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-        this.maybeRunPendingAction();
-      });
-
-    this.authDialogService.dialogState$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((state) => {
-        this.authDialogState = state;
-        this.maybeRunPendingAction();
-      });
-
     this.generateStars(220);
     this.generateBackgroundBuildings();
     this.generateWindowsForAllBuildings();
@@ -157,11 +107,21 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     }
   }
 
-  openDifficultyDialog(): void {
+  toggleTheme(): void {
-    if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
+    this.isSunsetMode = !this.isSunsetMode;
+    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+
+    if (!this.isSunsetMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
       return;
     }
 
+    document.documentElement.removeAttribute('data-theme');
+    localStorage.removeItem('theme');
+  }
+
+  openDifficultyDialog(): void {
     this.closeAllDialogs();
     this.showDifficultyDialog = true;
   }
@@ -182,10 +142,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openJoinDialog(): void {
-    if (!this.requireAuth(() => this.showJoinDialog = true)) {
-      return;
-    }
-
     this.closeAllDialogs();
     this.showJoinDialog = true;
   }
@@ -200,10 +156,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   openImportDialog(): void {
-    if (!this.requireAuth(() => this.showImportDialog = true)) {
-      return;
-    }
-
     this.closeAllDialogs();
     this.showImportDialog = true;
   }
@@ -224,45 +176,101 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   }
 
   startOneVsOne(): void {
-    if (!this.requireAuth(() => this.openChallengeDialog())) {
+    if (this.creating) {
       return;
     }
 
-    this.openChallengeDialog();
-  }
-
-  openChallengeDialog(): void {
-    this.closeAllDialogs();
-    this.showChallengeDialog = true;
-  }
-
-  closeChallengeDialog(): void {
-    this.showChallengeDialog = false;
     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' }
+          });
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
+        }
+      });
   }
 
   startVsBot(difficulty: Difficulty): void {
-    if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
+    if (this.creating) {
       return;
     }
 
-    this.performStartVsBot(difficulty);
+    this.errorMessage = '';
+    this.creating = true;
+    this.showDifficultyDialog = false;
+
+    this.gameApi
+      .createGameVsBot(difficulty)
+      .pipe(finalize(() => (this.creating = false)))
+      .subscribe({
+        next: (game) => {
+          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.');
+        }
+      });
   }
 
   submitJoinGame(): void {
-    if (!this.requireAuth(() => this.performSubmitJoinGame())) {
+    const gameId = this.gameIdInput.trim();
+    if (this.joiningGame || !gameId) {
       return;
     }
 
-    this.performSubmitJoinGame();
+    this.errorMessage = '';
+    this.joiningGame = true;
+
+    this.gameApi
+      .getGame(gameId)
+      .pipe(finalize(() => (this.joiningGame = false)))
+      .subscribe({
+        next: (game) => {
+          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.');
+        }
+      });
   }
 
   submitImportGame(): void {
-    if (!this.requireAuth(() => this.performSubmitImportGame())) {
+    const trimmedImport = this.importText.trim();
+    if (this.importing || !trimmedImport) {
       return;
     }
 
-    this.performSubmitImportGame();
+    this.errorMessage = '';
+    this.importing = true;
+
+    const importRequest =
+      this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
+
+    importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
+      next: (game) => {
+        this.closeImportDialog();
+        void this.router.navigate(['/game', game.gameId], {
+          state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+        });
+      },
+      error: (error) => {
+        const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
+        this.errorMessage = getErrorMessage(error, defaultMessage);
+      }
+    });
   }
 
   onSpeechBubbleClick(): void {
@@ -305,6 +313,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.meatX = event.clientX - this.meatDragOffsetX;
     this.meatY = event.clientY - this.meatDragOffsetY;
 
+    // Get gif element position
     const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
     if (!gifElement) {
       return;
@@ -314,6 +323,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     const gifCenterX = gifRect.left + gifRect.width / 2;
     const gifCenterY = gifRect.top + gifRect.height / 2;
 
+    // Get meat center position
     const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
     if (!meatElement) {
       return;
@@ -323,10 +333,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     const meatCenterX = meatRect.left + meatRect.width / 2;
     const meatCenterY = meatRect.top + meatRect.height / 2;
 
+    // Calculate distance
     const distance = Math.sqrt(
       Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
     );
 
+    // If meat is close enough to gif center (within 50px), trigger the interaction
     if (distance < 50) {
       this.onMeatFed();
     }
@@ -343,102 +355,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     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 performStartVsBot(difficulty: Difficulty): void {
-    if (this.creating) {
-      return;
-    }
-
-    this.errorMessage = '';
-    this.creating = true;
-    this.showDifficultyDialog = false;
-
-    this.gameApi
-      .createGameVsBot(difficulty)
-      .pipe(finalize(() => (this.creating = false)))
-      .subscribe({
-        next: (game) => {
-          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.');
-        }
-      });
-  }
-
-  private performSubmitJoinGame(): void {
-    const gameId = this.gameIdInput.trim();
-    if (this.joiningGame || !gameId) {
-      return;
-    }
-
-    this.errorMessage = '';
-    this.joiningGame = true;
-
-    this.gameApi
-      .getGame(gameId)
-      .pipe(finalize(() => (this.joiningGame = false)))
-      .subscribe({
-        next: (game) => {
-          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.');
-        }
-      });
-  }
-
-  private performSubmitImportGame(): void {
-    const trimmedImport = this.importText.trim();
-    if (this.importing || !trimmedImport) {
-      return;
-    }
-
-    this.errorMessage = '';
-    this.importing = true;
-
-    const importRequest =
-      this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
-
-    importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
-      next: (game) => {
-        this.closeImportDialog();
-        void this.router.navigate(['/game', game.gameId], {
-          state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-        });
-      },
-      error: (error) => {
-        const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
-        this.errorMessage = getErrorMessage(error, defaultMessage);
-      }
-    });
-  }
-
   private closeAllDialogs(): void {
     this.showDifficultyDialog = false;
     this.showOptionsDialog = false;
@@ -447,6 +363,19 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.errorMessage = '';
   }
 
+  private initTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+    this.isSunsetMode = savedTheme !== 'dark';
+    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+
+    if (!this.isSunsetMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      return;
+    }
+
+    document.documentElement.removeAttribute('data-theme');
+  }
+
   private generateStars(count: number): void {
     this.stars = Array.from({ length: count }, () => {
       const size = Math.random() * 2 + 0.5;

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

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-export type AuthDialogState = 'login' | 'register' | null;
-
-@Injectable({ providedIn: 'root' })
-export class AuthDialogService {
-    private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
-
-    readonly dialogState$ = this.dialogStateSubject.asObservable();
-
-    openLogin(): void {
-        this.dialogStateSubject.next('login');
-    }
-
-    openRegister(): void {
-        this.dialogStateSubject.next('register');
-    }
-
-    close(): void {
-        this.dialogStateSubject.next(null);
-    }
-}

src/app/services/auth.interceptor.ts

@@ -1,22 +0,0 @@
-import { HttpInterceptorFn } from '@angular/common/http';
-
-export const authInterceptor: HttpInterceptorFn = (req, next) => {
-  const token = localStorage.getItem('token');
-
-  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/board/game') ||
-    req.url.includes('/api/challenge');
-
-  if (token && isProtectedEndpoint) {
-    req = req.clone({
-      setHeaders: {
-        Authorization: `Bearer ${token}`
-      }
-    });
-  }
-
-  return next(req);
-};

src/app/services/auth.service.ts

@@ -1,86 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
-import { environment } from '../../environments/environment';
-import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
-
-@Injectable({ providedIn: 'root' })
-export class AuthService {
-  private readonly apiBase = environment.apiBaseUrl;
-  private readonly accountServiceUrl = environment.accountServiceUrl;
-  private readonly http = inject(HttpClient);
-
-  private currentUserSubject = new BehaviorSubject<CurrentUser | null>(null);
-  public currentUser$ = this.currentUserSubject.asObservable();
-
-  constructor() {
-    this.loadCurrentUser();
-  }
-
-  login(username: string, password: string): Observable<LoginResponse> {
-    return this.http
-      .post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
-        username,
-        password
-      })
-      .pipe(
-        tap((response) => {
-          localStorage.setItem('token', response.token);
-          localStorage.setItem('username', username);
-          // After login, fetch current user info
-          this.getCurrentUser().subscribe();
-        })
-      );
-  }
-
-  register(username: string, password: string, email?: string): Observable<RegisterResponse> {
-    return this.http
-      .post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
-        username,
-        password,
-        email
-      })
-      .pipe(
-        switchMap((response) =>
-          this.login(username, password).pipe(map(() => response))
-        )
-      );
-  }
-
-  getCurrentUser(): Observable<CurrentUser> {
-    return this.http.get<CurrentUser>(`${this.accountServiceUrl}/api/account/me`).pipe(
-      tap((user) => {
-        localStorage.setItem('username', user.username);
-        localStorage.setItem('userId', user.id);
-        this.currentUserSubject.next(user);
-      })
-    );
-  }
-
-  logout(): void {
-    localStorage.removeItem('token');
-    localStorage.removeItem('username');
-    localStorage.removeItem('userId');
-    this.currentUserSubject.next(null);
-  }
-
-  isLoggedIn(): boolean {
-    return !!localStorage.getItem('token');
-  }
-
-  private loadCurrentUser(): void {
-    const token = localStorage.getItem('token');
-    const username = localStorage.getItem('username');
-    const userId = localStorage.getItem('userId');
-    if (token && username && userId) {
-      // Try to verify token is still valid by fetching current user
-      this.getCurrentUser().subscribe({
-        error: () => {
-          // Token is invalid, clear it
-          this.logout();
-        }
-      });
-    }
-  }
-}

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

@@ -1,78 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { Challenge } from '../models/challenge.models';
-
-/**
- * Service to manage challenge events via WebSocket
- * Listens for incoming challenges and emits them to subscribers
- */
-@Injectable({ providedIn: 'root' })
-export class ChallengeEventService {
-    private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
-    private readonly challengeReceived$ = new Subject<Challenge>();
-    private readonly challengeAccepted$ = new Subject<Challenge>();
-    private readonly challengeDeclined$ = new Subject<Challenge>();
-
-    getIncomingChallenges$(): Observable<Challenge[]> {
-        return this.incomingChallenges$.asObservable();
-    }
-
-    getChallengeReceived$(): Observable<Challenge> {
-        return this.challengeReceived$.asObservable();
-    }
-
-    getChallengeAccepted$(): Observable<Challenge> {
-        return this.challengeAccepted$.asObservable();
-    }
-
-    getChallengeDeclined$(): Observable<Challenge> {
-        return this.challengeDeclined$.asObservable();
-    }
-
-    /**
-     * Called when a new challenge is received via WebSocket
-     */
-    onChallengeReceived(challenge: Challenge): void {
-        const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next([...current, challenge]);
-        this.challengeReceived$.next(challenge);
-    }
-
-    /**
-     * Called when a challenge is accepted
-     */
-    onChallengeAccepted(challenge: Challenge): void {
-        const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
-        this.challengeAccepted$.next(challenge);
-    }
-
-    /**
-     * Called when a challenge is declined or expires
-     */
-    onChallengeRemoved(challengeId: string): void {
-        const current = this.incomingChallenges$.value;
-        this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
-    }
-
-    /**
-     * Remove a challenge from the incoming list
-     */
-    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,115 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { Router } from '@angular/router';
-import { environment } from '../../environments/environment';
-import { ChallengeEventService } from './challenge-event.service';
-import { ChallengeService } from './challenge.service';
-
-@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;
-
-    connect(): void {
-        if (this.ws) return;
-
-        const token = localStorage.getItem('token');
-        if (!token) return;
-
-        const url = `${environment.userWsBaseUrl}/api/user/ws?token=${encodeURIComponent(token)}`;
-
-        try {
-            this.intentionalClose = false;
-            this.ws = new WebSocket(url);
-
-            this.ws.onopen = () => {
-                this.reconnectAttempts = 0;
-            };
-
-            this.ws.onmessage = (event) => {
-                this.handleMessage(event.data as string);
-            };
-
-            this.ws.onerror = () => {
-                // onclose fires right after, handles reconnect
-            };
-
-            this.ws.onclose = () => {
-                this.ws = null;
-                if (!this.intentionalClose) {
-                    this.attemptReconnect();
-                }
-            };
-        } catch {
-            this.attemptReconnect();
-        }
-    }
-
-    disconnect(): void {
-        this.intentionalClose = true;
-        this.reconnectAttempts = 0;
-        if (this.ws) {
-            this.ws.close();
-            this.ws = null;
-        }
-    }
-
-    private handleMessage(data: string): void {
-        let message: Record<string, unknown>;
-        try {
-            message = JSON.parse(data) as Record<string, unknown>;
-        } catch {
-            return;
-        }
-
-        switch (message['type']) {
-            case 'CONNECTED':
-                break;
-
-            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/challenge.service.ts

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

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

@@ -77,7 +77,8 @@ export class GameApiService {
   }
 
   streamGame(gameId: string): Observable<GameStreamEvent> {
-    const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/ws`;
+    const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/stream`;
-    return this.streamHandler.createGameStream(wsUrl, gameId);
+    const fallbackUrl = `${this.apiBase}${this.apiPath}/${gameId}/stream`;
+    return this.streamHandler.createGameStream(wsUrl, fallbackUrl, gameId);
   }
 }

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

@@ -1,39 +0,0 @@
-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,7 +10,6 @@ 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,
@@ -21,10 +20,7 @@ export class GameStreamService {
       .streamGame(gameId)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: (event) => {
+        next: (event) => onEvent(event),
-          this.lastGameStateHash = JSON.stringify(event);
-          onEvent(event);
-        },
         error: () => {
           onStreamError();
           this.startPolling(gameId, onEvent);
@@ -41,7 +37,7 @@ export class GameStreamService {
       return;
     }
 
-    this.pollSubscription = interval(5000)
+    this.pollSubscription = interval(1500)
       .pipe(
         startWith(0),
         switchMap(() => this.gameApi.getGame(gameId)),
@@ -49,17 +45,12 @@ export class GameStreamService {
       )
       .subscribe({
         next: (game) => {
-          // 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);
         }
-        }
       });
   }
 
@@ -68,6 +59,5 @@ export class GameStreamService {
     this.pollSubscription?.unsubscribe();
     this.streamSubscription = null;
     this.pollSubscription = null;
-    this.lastGameStateHash = null;
   }
 }

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

@@ -2,14 +2,26 @@ 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, gameId: string): Observable<GameStreamEvent> {
+  createGameStream(wsUrl: string, fallbackUrl: 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 = {
@@ -19,51 +31,90 @@ export class StreamHandlerService {
         observer.next(errorEvent);
       };
 
-      const failAndComplete = (reason: string): void => {
+      const startNdjsonFallback = async (): Promise<void> => {
-        console.warn(`[StreamHandler] WebSocket failed for ${gameId}: ${reason}`);
+        if (fallbackActive) {
-        emitErrorEvent(reason);
+          return;
-        observer.complete();
-      };
-
-      const connectionTimeoutId = setTimeout(() => {
-        if (!connected) {
-          ws.close();
-          failAndComplete('WebSocket connection timed out — falling back to polling');
         }
-      }, WS_CONNECT_TIMEOUT_MS);
+
+        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);
+          }
+        }
+      };
 
       ws.onopen = () => {
         connected = true;
-        clearTimeout(connectionTimeoutId);
-        console.log(`[StreamHandler] WebSocket connected for ${gameId}`);
       };
 
       ws.onmessage = (message) => {
         const payload = typeof message.data === 'string' ? message.data : '';
-        if (!payload.trim()) return;
+        const event = parseEvent(payload);
-        try {
+        if (event) {
-          const event = JSON.parse(payload) as GameStreamEvent;
           observer.next(event);
-        } catch {
-          // ignore malformed frames
         }
       };
 
-      ws.onerror = () => {
+      ws.onerror = (error) => {
-        clearTimeout(connectionTimeoutId);
+        console.warn(`[StreamHandler] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
         if (!connected) {
-          failAndComplete('WebSocket connection error — falling back to polling');
+          void startNdjsonFallback();
         }
       };
 
       ws.onclose = () => {
-        clearTimeout(connectionTimeoutId);
+        console.warn(`[StreamHandler] WebSocket closed for ${gameId}, connected=${connected}`);
-        if (connected) {
+        if (!connected) {
+          console.log(`[StreamHandler] Starting NDJSON fallback for ${gameId}`);
+          void startNdjsonFallback();
+        } else {
           observer.complete();
         }
       };
 
       return () => {
+        abortController.abort();
         ws.close();
       };
     });

src/app/services/theme.service.ts

@@ -1,34 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({ providedIn: 'root' })
-export class ThemeService {
-    private readonly darkModeSubject = new BehaviorSubject<boolean>(false);
-
-    readonly darkMode$ = this.darkModeSubject.asObservable();
-
-    initTheme(): void {
-        const savedTheme = localStorage.getItem('theme');
-        this.applyDarkMode(savedTheme === 'dark');
-    }
-
-    toggleTheme(): void {
-        this.applyDarkMode(!this.darkModeSubject.value);
-    }
-
-    setDarkMode(isDarkMode: boolean): void {
-        this.applyDarkMode(isDarkMode);
-    }
-
-    private applyDarkMode(isDarkMode: boolean): void {
-        if (isDarkMode) {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            localStorage.setItem('theme', 'dark');
-        } else {
-            document.documentElement.removeAttribute('data-theme');
-            localStorage.removeItem('theme');
-        }
-
-        this.darkModeSubject.next(isDarkMode);
-    }
-}

src/environments/environment.development.ts

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

src/environments/environment.staging.ts

@@ -1,12 +0,0 @@
-import { loadRuntimeConfig } from '../app/core/config.loader';
-
-const runtimeConfig = loadRuntimeConfig();
-
-export const environment = {
-  production: true,
-  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

@@ -1,12 +1,6 @@
-import { loadRuntimeConfig } from '../app/core/config.loader';
-
-const runtimeConfig = loadRuntimeConfig();
-
 export const environment = {
-  production: false,
+  production: true,
-  apiBaseUrl: runtimeConfig.apiUrl || '',
+  apiBaseUrl: '',
-  accountServiceUrl: runtimeConfig.apiUrl || '',
+  wsBaseUrl: 'ws://localhost:8080',
-  wsBaseUrl: runtimeConfig.wsUrl,
-  userWsBaseUrl: runtimeConfig.wsUrl,
   apiPath: '/api/board/game'
 };

src/index.html

@@ -6,10 +6,6 @@
   <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>
   <app-root></app-root>

src/styles-variables.css

@@ -1,3 +1,6 @@
+/* ========================================
+   COLOR VARIABLES - Semantic Naming
+   ======================================== */
 
 /* Light Mode Colors (Default) */
 :root:not([data-theme='dark']) {
@@ -119,15 +122,4 @@
      SHADOWS
      ======================================== */
   --shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
-   /* Neon dialog / card variables (used by welcome dialogs, toolbar, login/register) */
-   --bb-bg: rgba(8, 6, 28, 0.92);
-   --bb-border: #00d5ff;
-   --bb-glow: 0 0 18px rgba(0, 210, 255, 0.5), inset 0 0 10px rgba(0, 210, 255, 0.05);
-   --bb-tag: #00d5ff;
-   --bb-title: #d4f4ff;
-   --btn-bg: #00d5ff;
-   --btn-fg: #04000f;
-   --btn-glow: 0 0 14px rgba(0, 210, 255, 0.9);
-   --dlg-bg: rgba(8, 6, 28, 0.95);
-   --dlg-border: #00d5ff;
 }

src/styles.css

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

versions.env

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