feat: added dark and light mode

angular.json

@@ -53,6 +53,12 @@
               "outputHashing": "all"
             },
             "development": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ],
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -62,6 +68,9 @@
         },
         "serve": {
           "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "buildTarget": "nowchess-frontend:build:production"

docs/board-api-spec.yaml

@@ -1,6 +1,6 @@
 openapi: 3.0.3
 info:
-  title: NowChess API
+  title: NowChess Board API
   description: |
     REST API for the NowChess application. Designed to feel familiar to users
     of the [lichess API](https://lichess.org/api).
@@ -186,11 +186,8 @@ paths:
         currently to move.
 
         For promotion moves include the target piece as the fifth character:
-        `e7e8q`, `a2a1r`, etc.
-
-        If the move results in a pawn reaching the back rank and no promotion
-        character is supplied, the game enters `promotionPending` status and
-        the move is not yet applied — resubmit with the promotion character.
+        `e7e8q`, `a2a1r`, etc. Promotion moves without the fifth character
+        are rejected with `400 INVALID_MOVE`.
       security:
         - bearerAuth: []
       parameters:
@@ -630,7 +627,6 @@ components:
         | `draw` | Draw agreed or claimed — game over |
         | `drawOffered` | Waiting for the opponent to accept or decline a draw offer |
         | `fiftyMoveAvailable` | Fifty-move rule threshold reached; active player may claim draw |
-        | `promotionPending` | A pawn reached the back rank; awaiting promotion piece selection |
         | `insufficientMaterial` | Neither side has enough pieces to deliver checkmate — game over (draw) |
       enum:
         - started
@@ -641,7 +637,6 @@ components:
         - draw
         - drawOffered
         - fiftyMoveAvailable
-        - promotionPending
         - insufficientMaterial
 
     # -------------------------------------------------------------------------

proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/api": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "changeOrigin": true,
+    "ws": true
+  }
+}

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -7,5 +7,15 @@ import { RouterOutlet } from '@angular/router';
   templateUrl: './app.html',
   styleUrl: './app.css'
 })
-export class App {
+export class App implements OnInit {
+  ngOnInit(): void {
+    this.initTheme();
+  }
+
+  private initTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  }
 }

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

@@ -75,6 +75,54 @@ h2 {
   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(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.completion-title {
+  color: var(--color-text-primary);
+  font-size: 1.75rem;
+  margin: 0 0 var(--size-md) 0;
+  font-weight: 700;
+  text-align: center;
+}
+
+.completion-subtitle {
+  text-align: center;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
+
+.completion-link {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-text-primary);
+  transition: all 0.3s ease;
+  padding-bottom: 2px;
+}
+
+.completion-link:hover {
+  color: var(--color-secondary-blue);
+  border-bottom-color: var(--color-secondary-blue);
+}
+
 @media (max-width: 991px) {
   .game-card {
     padding: clamp(var(--size-md), 1.5vw, var(--size-lg));

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

@@ -9,6 +9,14 @@
     @if (facade.loading) {
       <p>Loading game state...</p>
     } @else if (facade.state) {
+      @if (facade.isGameFinished && facade.gameCompletionMessage) {
+        <div class="game-completion-alert alert alert-success mb-3">
+          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
+          <p class="completion-subtitle mb-0">
+            <a routerLink="/" class="completion-link">Start a new game</a>
+          </p>
+        </div>
+      }
       <div class="container-fluid">
         <div class="row g-3">
           <!-- Left Sidebar - FEN Import -->

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

@@ -4,7 +4,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
-import { InputCardComponent } from '../../components/input-card/input-card.component';
+  import { InputCardComponent } from '../../components/input-card/input-card.component';
 import { GameFacade } from './game.facade';
 
 @Component({

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

@@ -18,6 +18,8 @@ export class GameFacade implements OnDestroy {
   loading = true;
   selectedSquare: string | null = null;
   highlightedSquares: string[] = [];
+  gameCompletionMessage = '';
+  isGameFinished = false;
 
   private selectedSquareMoves: LegalMove[] = [];
   private readonly router = inject(Router);
@@ -27,6 +29,48 @@ export class GameFacade implements OnDestroy {
   private pollSubscription: Subscription | null = null;
   private botMoveSubscription: Subscription | null = null;
 
+  private getGameCompletionMessage(): void {
+    if (!this.game || !this.state) {
+      this.gameCompletionMessage = '';
+      this.isGameFinished = false;
+      return;
+    }
+
+    const status = this.state.status;
+    const gameEndingStatuses = ['checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'];
+
+    if (!gameEndingStatuses.includes(status)) {
+      this.gameCompletionMessage = '';
+      this.isGameFinished = false;
+      return;
+    }
+
+    this.isGameFinished = true;
+
+    switch (status) {
+      case 'checkmate':
+        const winner = this.state.winner === 'white' ? this.game.white.displayName : this.game.black.displayName;
+        this.gameCompletionMessage = `Checkmate! ${winner} wins!`;
+        break;
+      case 'stalemate':
+        this.gameCompletionMessage = 'Stalemate! The game is a draw.';
+        break;
+      case 'resign':
+        const resignedPlayer = this.state.winner === 'white' ? this.game.black.displayName : this.game.white.displayName;
+        const resignedWinner = this.state.winner === 'white' ? this.game.white.displayName : this.game.black.displayName;
+        this.gameCompletionMessage = `${resignedPlayer} resigned. ${resignedWinner} wins!`;
+        break;
+      case 'draw':
+        this.gameCompletionMessage = 'Draw! The game ended in a draw.';
+        break;
+      case 'insufficientMaterial':
+        this.gameCompletionMessage = 'Insufficient material! The game is a draw.';
+        break;
+      default:
+        this.gameCompletionMessage = 'Game ended!';
+    }
+  }
+
   ngOnDestroy(): void {
     this.streamSubscription?.unsubscribe();
     this.pollSubscription?.unsubscribe();
@@ -185,6 +229,7 @@ export class GameFacade implements OnDestroy {
         next: (game) => {
           this.game = game;
           this.loading = false;
+          this.getGameCompletionMessage();
           this.startStream();
           this.tryMakeBotMove();
         },
@@ -227,6 +272,7 @@ export class GameFacade implements OnDestroy {
         next: (game) => {
           const previousMoves = this.game?.state.moves.join(',') ?? '';
           this.game = game;
+          this.getGameCompletionMessage();
           if (previousMoves !== game.state.moves.join(',')) {
             this.clearSelection();
             this.tryMakeBotMove();
@@ -239,6 +285,7 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameFull') {
       this.game = event.game;
       this.clearSelection();
+      this.getGameCompletionMessage();
       this.tryMakeBotMove();
       return;
     }
@@ -246,6 +293,7 @@ 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.getGameCompletionMessage();
       if (event.state.moves.length !== moveCountBefore) {
         this.clearSelection();
         this.tryMakeBotMove();

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

@@ -1,8 +1,285 @@
 .welcome-shell {
   min-height: 100vh;
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: var(--size-xl);
+  position: relative;
+}
+
+.theme-toggle-container {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 100;
+}
+
+.switch {
+  display: inline-block;
+  position: relative;
+}
+
+.switch__input {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+.switch__label {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  height: 60px;
+  background-color: #2B2B2B;
+  border: 5px solid #5B5B5B;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
+}
+
+.switch__indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) translateX(-72%);
+  display: block;
+  width: 40px;
+  height: 40px;
+  background-color: #7B7B7B;
+  border-radius: 9999px;
+  box-shadow: 10px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
+  transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
+}
+
+.switch__indicator::before,
+.switch__indicator::after {
+  position: absolute;
+  content: '';
+  display: block;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+  transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
+}
+
+.switch__indicator::before {
+  top: 7px;
+  left: 7px;
+  width: 9px;
+  height: 9px;
+  opacity: 0.6;
+}
+
+.switch__indicator::after {
+  bottom: 8px;
+  right: 6px;
+  width: 14px;
+  height: 14px;
+  opacity: 0.8;
+}
+
+.switch__decoration {
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  display: block;
+  width: 5px;
+  height: 5px;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+  animation: twinkle-stars 0.8s infinite -0.6s;
+  transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
+}
+
+.switch__decoration::before,
+.switch__decoration::after {
+  position: absolute;
+  display: block;
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+}
+
+.switch__decoration::before {
+  top: -20px;
+  left: 10px;
+  opacity: 1;
+  animation: twinkle-stars 0.6s infinite;
+}
+
+.switch__decoration::after {
+  top: -7px;
+  left: 30px;
+  animation: twinkle-stars 0.6s infinite -0.2s;
+}
+
+@keyframes twinkle-stars {
+  50% { opacity: 0.2; }
+}
+
+.switch__input:checked + .switch__label {
+  background-color: #8FB5F5;
+  border-color: #347CF8;
+}
+
+.switch__input:checked + .switch__label .switch__indicator {
+  background-color: #ECD21F;
+  box-shadow: none;
+  transform: translate(-50%, -50%) translateX(72%);
+}
+
+.switch__input:checked + .switch__label .switch__indicator::before,
+.switch__input:checked + .switch__label .switch__indicator::after {
+  display: none;
+}
+
+.switch__input:checked + .switch__label .switch__decoration {
+  top: 50%;
+  transform: translate(0%, -50%);
+  animation: cloud 8s linear infinite;
+  width: 20px;
+  height: 20px;
+}
+
+.switch__input:checked + .switch__label .switch__decoration::before {
+  width: 10px;
+  height: 10px;
+  top: auto;
+  bottom: 0;
+  left: -8px;
+  animation: none;
+}
+
+.switch__input:checked + .switch__label .switch__decoration::after {
+  width: 15px;
+  height: 15px;
+  top: auto;
+  bottom: 0;
+  left: 16px;
+  animation: none;
+}
+
+.switch__input:checked + .switch__label .switch__decoration,
+.switch__input:checked + .switch__label .switch__decoration::before,
+.switch__input:checked + .switch__label .switch__decoration::after {
+  border-radius: 9999px 9999px 0 0;
+}
+
+.switch__input:checked + .switch__label .switch__decoration::after {
+  border-bottom-right-radius: 9999px;
+}
+
+@keyframes cloud {
+  0% { transform: translate(0%, -50%); }
+  50% { transform: translate(-50%, -50%); }
+  100% { transform: translate(0%, -50%); }
+}
+
+.clouds-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 60px;
+  width: 100%;
+  max-width: 900px;
+  margin-bottom: var(--size-xl);
+  position: relative;
+  z-index: 1;
+}
+
+.plane {
+  position: relative;
+  width: 320px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
+}
+
+.plane-body {
+  width: 240%;
+  height: 240%;
+  object-fit: contain;
+  position: absolute;
+}
+
+.plane-gif {
+  width: 70px;
+  height: 70px;
+  object-fit: contain;
+  z-index: 10;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+  position: relative;
+  transform: translateX(-25px) translateY(15px);
+}
+
+.cloud {
+  position: relative;
+  width: 220px;
+  height: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
+}
+
+.cloud::before {
+  content: '';
+  position: absolute;
+  width: 90px;
+  height: 90px;
+  background: #ffffff;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  box-shadow: 55px 0 0 9px #ffffff, 110px 0 0 5px #ffffff, 27px -18px 0 13px #ffffff, 82px -13px 0 11px #ffffff;
+}
+
+.cloud::after {
+  content: '';
+  position: absolute;
+  width: 220px;
+  height: 45px;
+  background: #ffffff;
+  border-radius: 50px;
+  bottom: 0;
+  left: 0;
+}
+
+.cloud-gif {
+  width: 120px;
+  height: 80px;
+  object-fit: contain;
+  z-index: 10;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+  position: relative;
+}
+
+.gif-with-halo {
+  position: relative;
+  display: inline-block;
+}
+
+.gif-with-halo::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 75px;
+  height: 15px;
+  border: 2px solid rgba(255, 215, 0, 0.7);
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+  z-index: 5;
 }
 
 .welcome-card {
@@ -69,11 +346,93 @@ p {
   margin-top: var(--size-xl);
 }
 
+.plane-left {
+  animation: float 3s ease-in-out infinite;
+}
+
+.cloud-left {
+  animation: float 3s ease-in-out infinite;
+  animation-delay: 0.25s;
+}
+
+.cloud-right {
+  animation: float 3s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
 @media (max-width: 768px) {
+  .theme-toggle-container {
+    top: 10px;
+    right: 10px;
+  }
+
+  .switch__label {
+    width: 100px;
+    height: 50px;
+  }
+
+  .switch__indicator {
+    width: 33px;
+    height: 33px;
+  }
+
   .welcome-shell {
     padding: var(--size-lg);
   }
 
+  .clouds-container {
+    gap: 30px;
+    margin-bottom: var(--size-lg);
+  }
+
+  .plane {
+    width: 240px;
+    height: 110px;
+  }
+
+  .plane-gif {
+    width: 55px;
+    height: 55px;
+    transform: translateX(-20px) translateY(12px);
+  }
+
+  .cloud {
+    width: 170px;
+    height: 75px;
+  }
+
+  .cloud::before {
+    width: 65px;
+    height: 65px;
+    box-shadow: 40px 0 0 7px #ffffff, 80px 0 0 3px #ffffff, 20px -13px 0 10px #ffffff, 60px -10px 0 8px #ffffff;
+  }
+
+  .cloud::after {
+    width: 170px;
+    height: 38px;
+  }
+
+  .cloud-gif {
+    width: 90px;
+    height: 80px;
+  }
+
+  .gif-with-halo::before {
+    top: -8px;
+    width: 80px;
+    height: 12px;
+    border: 1.5px solid rgba(255, 215, 0, 0.7);
+  }
+
   .welcome-card {
     padding: var(--size-xl);
   }

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

@@ -1,4 +1,27 @@
 <main class="welcome-shell">
+  <div class="theme-toggle-container">
+    <div class="switch">
+      <input type="checkbox" class="switch__input" id="themeToggle" (change)="toggleDarkMode()" [checked]="!isDarkMode()">
+      <label class="switch__label" for="themeToggle">
+        <span class="switch__indicator"></span>
+        <span class="switch__decoration"></span>
+      </label>
+    </div>
+  </div>
+  <div class="clouds-container">
+    <div class="cloud cloud-left">
+      <img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
+    </div>
+    <div class="plane plane-left">
+      <img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
+      <img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
+    </div>
+    <div class="cloud cloud-right">
+      <div class="gif-with-halo">
+        <img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
+      </div>
+    </div>
+  </div>
   <section class="welcome-card">
     <h1>Welcome to NowChess</h1>
     <p>Pick a mode to begin.</p>

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

@@ -24,7 +24,16 @@ export class WelcomeComponent {
   constructor(
     private readonly router: Router,
     private readonly gameApi: GameApiService
-  ) {}
+  ) {
+    this.initTheme();
+  }
+
+  private initTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  }
 
   startOneVsOne(): void {
     if (this.creating) {
@@ -108,4 +117,21 @@ export class WelcomeComponent {
     this.gameIdInput = '';
     this.errorMessage = '';
   }
+
+  toggleDarkMode(): void {
+    const htmlElement = document.documentElement;
+    const isDarkMode = htmlElement.getAttribute('data-theme') === 'dark';
+    
+    if (isDarkMode) {
+      htmlElement.removeAttribute('data-theme');
+      localStorage.removeItem('theme');
+    } else {
+      htmlElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  isDarkMode(): boolean {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  }
 }

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

@@ -15,11 +15,12 @@ import {
 export class GameApiService {
   private readonly apiBase = environment.apiBaseUrl;
   private readonly wsBase = environment.wsBaseUrl;
+  private readonly apiPath = environment.apiPath;
 
   constructor(private readonly http: HttpClient) {}
 
   createGame(): Observable<GameFull> {
-    return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, {});
+    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}`, {});
   }
 
   createGameVsBot(difficulty: 'easy' | 'medium' | 'hard' = 'medium'): Observable<GameFull> {
@@ -38,15 +39,15 @@ export class GameApiService {
         ? { white: playerInfo, black: botInfo }
         : { white: botInfo, black: playerInfo };
 
-    return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, payload);
+    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}`, payload);
   }
 
   getGame(gameId: string): Observable<GameFull> {
-    return this.http.get<GameFull>(`${this.apiBase}/api/board/game/${gameId}`);
+    return this.http.get<GameFull>(`${this.apiBase}${this.apiPath}/${gameId}`);
   }
 
   makeMove(gameId: string, uci: string): Observable<GameState> {
-    return this.http.post<GameState>(`${this.apiBase}/api/board/game/${gameId}/move/${uci}`, {});
+    return this.http.post<GameState>(`${this.apiBase}${this.apiPath}/${gameId}/move/${uci}`, {});
   }
 
   getLegalMoves(gameId: string, square?: string): Observable<LegalMovesResponse> {
@@ -54,21 +55,30 @@ export class GameApiService {
     if (square) {
       params = params.set('square', square);
     }
-    return this.http.get<LegalMovesResponse>(`${this.apiBase}/api/board/game/${gameId}/moves`, { params });
+    return this.http.get<LegalMovesResponse>(`${this.apiBase}${this.apiPath}/${gameId}/moves`, { params });
   }
 
   importFen(fen: string): Observable<GameFull> {
-    return this.http.post<GameFull>(`${this.apiBase}/api/board/game/import/fen`, { fen });
+    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}/import/fen`, { fen });
   }
 
   importPgn(pgn: string): Observable<GameFull> {
-    return this.http.post<GameFull>(`${this.apiBase}/api/board/game/import/pgn`, { pgn });
+    return this.http.post<GameFull>(`${this.apiBase}${this.apiPath}/import/pgn`, { pgn });
+  }
+
+  private resolveWsBase(): string {
+    if (this.wsBase) {
+      return this.wsBase;
+    }
+
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    return `${wsProtocol}://${window.location.host}`;
   }
 
   streamGame(gameId: string): Observable<GameStreamEvent> {
     return new Observable<GameStreamEvent>((observer) => {
-      const wsUrl = `${this.wsBase}/api/board/game/${gameId}/stream`;
-      const streamUrl = `${this.apiBase}/api/board/game/${gameId}/stream`;
+      const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/stream`;
+      const streamUrl = `${this.apiBase}${this.apiPath}/${gameId}/stream`;
       const ws = new WebSocket(wsUrl);
       const abortController = new AbortController();
       let connected = false;
@@ -101,6 +111,7 @@ export class GameApiService {
         }
 
         fallbackActive = true;
+        console.log(`[GameApiService] NDJSON fallback started for ${gameId}, URL:`, streamUrl);
 
         try {
           const response = await fetch(streamUrl, {
@@ -109,11 +120,13 @@ export class GameApiService {
           });
 
           if (!response.ok || !response.body) {
+            console.error(`[GameApiService] NDJSON fetch failed: HTTP ${response.status}`);
             emitErrorEvent(`Unable to open stream: HTTP ${response.status}`);
             observer.complete();
             return;
           }
 
+          console.log(`[GameApiService] NDJSON stream connected for ${gameId}`);
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
@@ -157,14 +170,17 @@ export class GameApiService {
         }
       };
 
-      ws.onerror = () => {
+      ws.onerror = (error) => {
+        console.warn(`[GameApiService] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
         if (!connected) {
           void startNdjsonFallback();
         }
       };
 
       ws.onclose = () => {
+        console.warn(`[GameApiService] WebSocket closed for ${gameId}, connected=${connected}`);
         if (!connected) {
+          console.log(`[GameApiService] Starting NDJSON fallback for ${gameId}`);
           void startNdjsonFallback();
         } else {
           observer.complete();

src/environments/environment.development.ts

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

src/environments/environment.ts

@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
-  apiBaseUrl: 'http://localhost:8080',
-  wsBaseUrl: 'ws://localhost:8080'
+  apiBaseUrl: '',
+  wsBaseUrl: 'ws://localhost:8080',
+  apiPath: '/api/board/game'
 };

src/styles-variables.css

@@ -2,19 +2,20 @@
    COLOR VARIABLES - Semantic Naming
    ======================================== */
 
-:root {
-  /* Primary Colors */
+/* Light Mode Colors (Default) */
+:root:not([data-theme='dark']) {
+  /* Primary Colors - Light Mode */
   --color-primary: #BA6D4B;
   --color-primary-dark: #5A2C28;
   --color-primary-light: #F3C8A0;
 
-  /* Secondary Colors */
+  /* Secondary Colors - Light Mode */
   --color-secondary-mint: #B9DAD1;
   --color-secondary-blue: #B9C2DA;
   --color-secondary-purple: #C19EF5;
   --color-secondary-lime: #E1EAA9;
 
-  /* Functional Colors */
+  /* Functional Colors - Light Mode */
   --color-bg-main: #F3C8A0;
   --color-bg-board: #B9DAD1;
   --color-bg-card: #E1EAA9;
@@ -26,6 +27,36 @@
   --color-text-primary: #5A2C28;
   --color-text-button-hover: #F3C8A0;
   --color-border: #5A2C28;
+}
+
+/* Dark Mode Colors */
+:root[data-theme='dark'] {
+  /* Primary Colors - Dark Mode */
+  --color-primary: #1a3a52;
+  --color-primary-dark: #0f1f2e;
+  --color-primary-light: #2d5a7b;
+
+  /* Secondary Colors - Dark Mode */
+  --color-secondary-mint: #4a7c7c;
+  --color-secondary-blue: #5a6fa5;
+  --color-secondary-purple: #7d5fa8;
+  --color-secondary-lime: #6b8e23;
+
+  /* Functional Colors - Dark Mode */
+  --color-bg-main: #1a2f47;
+  --color-bg-board: #2d5a7b;
+  --color-bg-card: #3d4e63;
+  --color-bg-input: #2d4a6f;
+  --color-bg-input-focus: #3d5a8f;
+  --color-bg-button: #5a7da5;
+  --color-bg-button-hover: #7a9dc5;
+
+  --color-text-primary: #e8f0f8;
+  --color-text-button-hover: #ffffff;
+  --color-border: #4a7c9c;
+}
+
+:root {
 
   /* ========================================
      TYPOGRAPHY SIZES

src/styles.css

@@ -5,13 +5,57 @@
   box-sizing: border-box;
 }
 
+/* Light Mode (Default) */
+html:not([data-theme='dark']),
+html:not([data-theme='dark']) body {
+  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
+  color: var(--color-text-primary);
+}
+
+html:not([data-theme='dark']) body::before {
+  display: none;
+}
+
+/* Dark Mode */
+html[data-theme='dark'],
+html[data-theme='dark'] body {
+  background: #0f1f2e;
+  background-image: 
+    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 90px 10px, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 130px 120px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 10px 90px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 40px 120px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+  background-repeat: repeat;
+  background-size: 150px 150px;
+  background-attachment: fixed;
+  color: var(--color-text-primary);
+}
+
+html[data-theme='dark'] body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(45, 90, 123, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(90, 111, 165, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(29, 53, 82, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: -1;
+}
+
 html,
 body {
   margin: 0;
   min-height: 100%;
   font-family: "Comic Sans MS", "Comic Sans", cursive;
-  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
-  color: var(--color-text-primary);
+  position: relative;
 }
 
 button,