feat: added a cat not sure about it tho

angular.json

@@ -28,8 +28,13 @@
               },
               {
                 "glob": "**/*",
-                "input": "arabian-chess",
-                "output": "/arabian-chess"
+                "input": "assets/arabian-chess",
+                "output": "/assets/arabian-chess"
+              },
+              {
+                "glob": "**/*",
+                "input": "assets/ChessAssets",
+                "output": "/assets/ChessAssets"
               }
             ],
             "styles": [
@@ -46,13 +51,19 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "12kB",
+                  "maximumError": "20kB"
                 }
               ],
               "outputHashing": "all"
             },
             "development": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ],
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -62,6 +73,9 @@
         },
         "serve": {
           "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "buildTarget": "nowchess-frontend:build:production"
@@ -90,8 +104,13 @@
               },
               {
                 "glob": "**/*",
-                "input": "arabian-chess",
-                "output": "/arabian-chess"
+                "input": "assets/arabian-chess",
+                "output": "/assets/arabian-chess"
+              },
+              {
+                "glob": "**/*",
+                "input": "assets/ChessAssets",
+                "output": "/assets/ChessAssets"
               }
             ],
             "styles": [

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/components/chess-board/chess-board.component.css

@@ -7,10 +7,10 @@
 .board-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  border: 2px solid #5A2C28;
-  border-radius: 10px 10px 0 0;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   overflow: hidden;
-  background: #5A2C28;
+  background: var(--color-text-primary);
 }
 
 .square {
@@ -27,12 +27,56 @@
   cursor: pointer;
 }
 
+.square[draggable='true'] {
+  cursor: grab;
+}
+
+.square.drag-source {
+  opacity: 0.65;
+  cursor: grabbing;
+}
+
+.square.drag-over {
+  outline: 3px dashed var(--color-primary);
+  outline-offset: -4px;
+}
+
 .square.light {
-  background-image: url('/arabian-chess/sprites/board/board_square_white.png');
+  background-image: url('/assets/arabian-chess/sprites/board/board_square_white.png');
 }
 
 .square.dark {
-  background-image: url('/arabian-chess/sprites/board/board_square_black.png');
+  background-image: url('/assets/arabian-chess/sprites/board/board_square_black.png');
+}
+
+.board-grid--classic {
+  border-radius: var(--border-radius-md);
+}
+
+.board-grid--classic .square {
+  background-image: none;
+  transition: filter 160ms ease;
+}
+
+.board-grid--classic .square.light {
+  background-color: #f3c8a0;
+}
+
+.board-grid--classic .square.dark {
+  background-color: #ba6d4b;
+}
+
+.board-grid--classic .square.drag-over {
+  outline-color: #5a2c28;
+}
+
+.board-grid--classic .square.selected {
+  outline-color: #5a2c28;
+}
+
+.board-grid--classic .square.highlighted::after {
+  background: #b9dad1;
+  border-color: #5a2c28;
 }
 
 .square.highlighted::after {
@@ -41,12 +85,13 @@
   width: 28%;
   height: 28%;
   border-radius: 50%;
-  background: rgba(193, 158, 245, 0.75);
-  border: 2px solid #5A2C28;
+  background: var(--color-secondary-purple);
+  opacity: 0.75;
+  border: var(--border-width) solid var(--color-border);
 }
 
 .square.selected {
-  outline: 3px solid #BA6D4B;
+  outline: 3px solid var(--color-primary);
   outline-offset: -3px;
 }
 
@@ -55,7 +100,7 @@
   width: 100%;
   display: block;
   object-fit: fill;
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
   border-top: 0;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
 }

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

@@ -1,5 +1,5 @@
 <div class="board-shell">
-  <div class="board-grid">
+  <div class="board-grid" [class.board-grid--classic]="boardTheme === 'classic'" [class.board-grid--arabian]="boardTheme === 'arabian'">
     @for (square of squares; track trackByCoordinate($index, square)) {
       <button
         type="button"
@@ -8,13 +8,25 @@
         [class.dark]="!square.isLight"
         [class.selected]="isSelected(square)"
         [class.highlighted]="isHighlighted(square)"
+        [class.drag-source]="isDraggingSource(square)"
+        [class.drag-over]="isDragOver(square)"
         [attr.data-square]="square.coordinate"
         (click)="onSquareClick(square)"
+        (dragover)="onSquareDragOver($event, square)"
+        (drop)="onSquareDrop($event, square)"
       >
-        <app-chess-piece [pieceCode]="square.pieceCode" />
+        <app-chess-piece
+          [pieceCode]="square.pieceCode"
+          [boardTheme]="boardTheme"
+          [draggable]="!!square.pieceCode"
+          (pieceDragStart)="onPieceDragStart($event, square)"
+          (pieceDragEnd)="onSquareDragEnd()"
+        />
       </button>
     }
   </div>
 
-  <img class="board-bottom" src="/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
+  @if (boardTheme === 'arabian') {
+    <img class="board-bottom" src="/assets/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
+  }
 </div>

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

@@ -7,6 +7,8 @@ interface BoardSquare {
   pieceCode: string | null;
 }
 
+type BoardTheme = 'arabian' | 'classic';
+
 @Component({
   selector: 'app-chess-board',
   standalone: true,
@@ -18,10 +20,14 @@ export class ChessBoardComponent implements OnChanges {
   @Input({ required: true }) fen = '';
   @Input() selectedSquare: string | null = null;
   @Input() highlightedSquares: string[] = [];
+  @Input() boardTheme: BoardTheme = 'arabian';
   @Output() squareSelected = new EventEmitter<string>();
 
   squares: BoardSquare[] = [];
   private highlightedSquareSet = new Set<string>();
+  private draggingFromSquare: string | null = null;
+  private dragOverSquare: string | null = null;
+  private suppressNextClick = false;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['fen']) {
@@ -38,9 +44,61 @@ export class ChessBoardComponent implements OnChanges {
   }
 
   onSquareClick(square: BoardSquare): void {
+    if (this.suppressNextClick) {
+      this.suppressNextClick = false;
+      return;
+    }
+
     this.squareSelected.emit(square.coordinate);
   }
 
+  onPieceDragStart(event: DragEvent, square: BoardSquare): void {
+    if (!square.pieceCode) {
+      event.preventDefault();
+      return;
+    }
+
+    this.draggingFromSquare = square.coordinate;
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('text/plain', square.coordinate);
+      event.dataTransfer.effectAllowed = 'move';
+    }
+    this.squareSelected.emit(square.coordinate);
+  }
+
+  onSquareDragOver(event: DragEvent, square: BoardSquare): void {
+    if (!this.draggingFromSquare) {
+      return;
+    }
+
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    this.dragOverSquare = square.coordinate === this.draggingFromSquare ? null : square.coordinate;
+  }
+
+  onSquareDrop(event: DragEvent, square: BoardSquare): void {
+    event.preventDefault();
+    if (!this.draggingFromSquare) {
+      return;
+    }
+
+    const fromSquare = this.draggingFromSquare;
+    this.clearDragState();
+
+    if (fromSquare === square.coordinate) {
+      return;
+    }
+
+    this.suppressNextClick = true;
+    this.squareSelected.emit(square.coordinate);
+  }
+
+  onSquareDragEnd(): void {
+    this.clearDragState();
+  }
+
   isSelected(square: BoardSquare): boolean {
     return this.selectedSquare === square.coordinate;
   }
@@ -49,6 +107,14 @@ export class ChessBoardComponent implements OnChanges {
     return this.highlightedSquareSet.has(square.coordinate);
   }
 
+  isDraggingSource(square: BoardSquare): boolean {
+    return this.draggingFromSquare === square.coordinate;
+  }
+
+  isDragOver(square: BoardSquare): boolean {
+    return this.dragOverSquare === square.coordinate;
+  }
+
   private buildSquares(fen: string): BoardSquare[] {
     const placement = fen.split(' ')[0] ?? '';
     const rows = placement.split('/');
@@ -87,4 +153,9 @@ export class ChessBoardComponent implements OnChanges {
       pieceCode
     };
   }
+
+  private clearDragState(): void {
+    this.draggingFromSquare = null;
+    this.dragOverSquare = null;
+  }
 }

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

@@ -1,9 +1,17 @@
 .piece {
   width: clamp(50px, 11cqh, 160px);
-  height: clamp(50px, 11cqh, 160px);
+  height: clamp(40px, 8cqh, 120px);
   display: block;
   object-fit: contain;
-  pointer-events: none;
+  pointer-events: auto;
+}
+
+.piece[draggable='true'] {
+  cursor: grab;
+}
+
+.piece[draggable='true']:active {
+  cursor: grabbing;
 }
 
 @media (max-width: 991px) {

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

@@ -1,3 +1,10 @@
 @if (pieceCode) {
-  <img class="piece" [src]="spriteUrl" [alt]="pieceCode" />
+  <img
+    class="piece"
+    [src]="spriteUrl"
+    [alt]="pieceCode"
+    [attr.draggable]="draggable ? 'true' : null"
+    (dragstart)="onDragStart($event)"
+    (dragend)="onDragEnd()"
+  />
 }

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

@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+type BoardTheme = 'arabian' | 'classic';
 
 @Component({
   selector: 'app-chess-piece',
@@ -8,18 +10,44 @@ import { Component, Input } from '@angular/core';
 })
 export class ChessPieceComponent {
   @Input({ required: true }) pieceCode: string | null = null;
+  @Input() boardTheme: BoardTheme = 'arabian';
+  @Input() draggable = false;
+  @Output() pieceDragStart = new EventEmitter<DragEvent>();
+  @Output() pieceDragEnd = new EventEmitter<void>();
+
+  onDragStart(event: DragEvent): void {
+    if (!this.draggable) {
+      event.preventDefault();
+      return;
+    }
+
+    this.pieceDragStart.emit(event);
+  }
+
+  onDragEnd(): void {
+    this.pieceDragEnd.emit();
+  }
 
   get spriteUrl(): string {
     if (!this.pieceCode) {
       return '';
     }
 
-    const color = this.pieceCode === this.pieceCode.toUpperCase() ? 'white' : 'black';
-    const pieceName = this.getPieceName(this.pieceCode.toLowerCase());
-    return `/arabian-chess/sprites/pieces/${color}_${pieceName}.png`;
+    const isWhite = this.pieceCode === this.pieceCode.toUpperCase();
+    const pieceCode = this.pieceCode.toLowerCase();
+
+    if (this.boardTheme === 'classic') {
+      const colorPrefix = isWhite ? 'w' : 'b';
+      const classicPieceName = this.getClassicPieceName(pieceCode);
+      return `/assets/ChessAssets/${colorPrefix}_${classicPieceName}.png`;
+    }
+
+    const arabianColor = isWhite ? 'white' : 'black';
+    const arabianPieceName = this.getArabianPieceName(pieceCode);
+    return `/assets/arabian-chess/sprites/pieces/${arabianColor}_${arabianPieceName}.png`;
   }
 
-  private getPieceName(piece: string): string {
+  private getArabianPieceName(piece: string): string {
     switch (piece) {
       case 'k':
         return 'king';
@@ -37,4 +65,23 @@ export class ChessPieceComponent {
         return 'pawn';
     }
   }
+
+  private getClassicPieceName(piece: string): string {
+    switch (piece) {
+      case 'k':
+        return 'King';
+      case 'q':
+        return 'Queen';
+      case 'r':
+        return 'Rook';
+      case 'b':
+        return 'Bishop';
+      case 'n':
+        return 'Knight';
+      case 'p':
+        return 'Pawn';
+      default:
+        return 'Pawn';
+    }
+  }
 }

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

@@ -0,0 +1,63 @@
+.input-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: flex;
+  flex-direction: column;
+  gap: var(--size-lg-gap);
+}
+
+.move-card {
+  padding: var(--size-sm-padding);
+  gap: var(--size-sm-gap);
+}
+
+.move-card input {
+  min-height: 45px;
+  padding: var(--size-md-padding);
+}
+
+.input-card label {
+  color: var(--color-text-primary);
+  font-weight: 700;
+  margin-bottom: var(--size-xs);
+}
+
+.input-card textarea {
+  resize: vertical;
+  height: 40px;
+  background-color:lightcyan;
+  border: 3px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+}
+
+.input-card input {
+  min-width: unset;
+  background-color:lightcyan;
+    border: 3px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+
+}
+
+.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);
+  font-size: 0.9rem;
+}

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

@@ -0,0 +1,31 @@
+<section [ngClass]="['input-card', cardClass]">
+  <label>{{ label }}</label>
+
+  @if (inputType === 'textarea') {
+    <textarea
+      #textareaInput
+      [placeholder]="placeholder"
+      [value]="value"
+      [rows]="rows"
+      (input)="onValueChange(textareaInput.value)"
+      class="form-input"
+    ></textarea>
+  } @else {
+    <input
+      #textInput
+      type="text"
+      [placeholder]="placeholder"
+      [value]="value"
+      (input)="onValueChange(textInput.value)"
+      class="form-input"
+    />
+  }
+
+  <button type="button" class="btn w-100" (click)="onButtonClick()">
+    {{ buttonLabel }}
+  </button>
+
+  @if (hintText) {
+    <p class="hint-text">{{ hintText }}</p>
+  }
+</section>

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

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-input-card',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './input-card.component.html',
+  styleUrl: './input-card.component.css',
+})
+export class InputCardComponent {
+  @Input() label: string = '';
+  @Input() placeholder: string = '';
+  @Input() buttonLabel: string = 'Send';
+  @Input() inputType: 'input' | 'textarea' = 'input';
+  @Input() value: string = '';
+  @Input() cardClass: string = '';
+  @Input() hintText: string = '';
+  @Input() rows: number = 4;
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() buttonClick = new EventEmitter<void>();
+
+  onValueChange(newValue: string): void {
+    this.value = newValue;
+    this.valueChange.emit(newValue);
+  }
+
+  onButtonClick(): void {
+    this.buttonClick.emit();
+  }
+}

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

@@ -0,0 +1,131 @@
+.promotion-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  z-index: 1000;
+
+  &.open {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.promotion-dialog {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 90%;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.promotion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #e0e0e0;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    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;
+    }
+  }
+}
+
+.promotion-body {
+  padding: 20px;
+}
+
+.promotion-prompt {
+  margin: 0 0 20px 0;
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}
+
+.promotion-options {
+  display: grid;
+  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

@@ -0,0 +1,26 @@
+<div class="promotion-dialog-overlay" [class.open]="isOpen">
+  <div class="promotion-dialog">
+    <div class="promotion-header">
+      <h3>Pawn Promotion</h3>
+      <button class="close-btn" (click)="close()" aria-label="Close">&times;</button>
+    </div>
+    
+    <div class="promotion-body">
+      <p class="promotion-prompt">Choose a piece to promote your pawn to:</p>
+      
+      <div class="promotion-options">
+        @for (piece of promotionPieces; track piece.type) {
+          <button
+            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>
+        }
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+type PromotionPieceType = 'queen' | 'rook' | 'bishop' | 'knight';
+interface PromotionPieceOption {
+  type: PromotionPieceType;
+  label: string;
+  symbol: string;
+}
+
+@Component({
+  selector: 'app-promotion-dialog',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './promotion-dialog.component.html',
+  styleUrl: './promotion-dialog.component.css'
+})
+export class PromotionDialogComponent {
+  @Input() isOpen = false;
+  @Output() promotionSelected = new EventEmitter<PromotionPieceType>();
+  @Output() closed = new EventEmitter<void>();
+
+  promotionPieces: PromotionPieceOption[] = [
+    { type: 'queen', label: 'Queen', symbol: '♕' },
+    { type: 'rook', label: 'Rook', symbol: '♖' },
+    { type: 'bishop', label: 'Bishop', symbol: '♗' },
+    { type: 'knight', label: 'Knight', symbol: '♘' }
+  ];
+
+  selectPromotion(type: PromotionPieceType): void {
+    this.promotionSelected.emit(type);
+    this.isOpen = false;
+  }
+
+  close(): void {
+    this.closed.emit();
+    this.isOpen = false;
+  }
+}

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

@@ -1,38 +1,51 @@
 .game-shell {
   min-height: 100dvh;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
+  padding: clamp(var(--size-md), 2vw, var(--size-xl));
+  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
+  color: var(--color-text-primary);
+}
+
+:host-context(html[data-theme='dark']) .game-shell {
+  background:
+    radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
+    linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
 }
 
 .game-card {
   max-width: 1400px;
   margin: 0 auto;
-  background: #F3C8A0;
-  border: 2px solid #5A2C28;
-  border-radius: 12px;
-  padding: clamp(1rem, 2vw, 1.5rem);
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  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 {
+  background: rgba(26, 47, 71, 0.88);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
 }
 
 header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--size-xl);
 }
 
 h1,
 h2 {
-  color: #5A2C28;
-  margin: 0 0 0.5rem;
-  font-size: clamp(1.5rem, 4vw, 2rem);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--size-md);
+  font-size: var(--heading-h1);
 }
 
 .meta {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-size: 0.95rem;
 }
 
 .back-link {
   display: inline-block;
-  margin-bottom: 0.5rem;
-  color: #5A2C28;
+  margin-bottom: var(--size-sm);
+  color: var(--color-text-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -42,25 +55,52 @@ h2 {
 }
 
 .top-section {
-  background: #F3C8A0;
-  padding: 0.75rem;
-  border-radius: 8px;
-  border: 1px solid #5A2C28;
+  display: grid;
+  gap: var(--size-md);
+  margin-top: var(--size-sm);
+  flex: 0 0 auto;
 }
 
-.move-form {
-  align-items: center;
+.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);
 }
 
-.move-form label {
-  color: #5A2C28;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.board-hint {
-  color: #5A2C28;
+.board-theme-card h3 {
   margin: 0;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
+
+.board-theme-group {
+  display: flex;
+  gap: var(--size-md);
+  flex-wrap: wrap;
+}
+
+.board-theme-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-xs);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.board-theme-option input {
+  accent-color: var(--color-primary);
+}
+
+.move-card {
+  padding: var(--size-lg-padding);
+}
+
+.move-card .btn {
+  align-self: flex-start;
+  width: auto;
 }
 
 .center-column {
@@ -68,72 +108,212 @@ h2 {
 }
 
 .board-section {
-  background: #B9DAD1;
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: clamp(0.5rem, 1vw, 1rem);
+  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;
 }
 
-.import-card {
-  background: #E1EAA9;
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: 1rem;
+: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;
-  flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--size-sm);
+  align-items: baseline;
 }
 
-.import-card label {
-  color: #5A2C28;
+.history-number {
   font-weight: 700;
-  margin-bottom: 0.25rem;
+  min-width: 1.8rem;
 }
 
-.import-card textarea {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  resize: vertical;
-  min-height: 100px;
-  font-family: inherit;
+.history-move {
+  font-family: monospace;
 }
 
-.import-card input {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  font-family: inherit;
+.history-empty {
+  margin: 0;
+  color: var(--color-text-primary);
 }
 
-.btn {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #C19EF5;
-  color: #5A2C28;
-  padding: 0.6rem 1rem;
-  cursor: pointer;
+.player-timer {
+  background: var(--color-bg-input);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-md-padding);
+}
+
+.active-timer {
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.25);
+}
+
+.timer-label {
+  margin: 0;
+  color: var(--color-text-primary);
   font-weight: 600;
-  transition: background-color 0.2s, color 0.2s;
 }
 
-.btn:hover {
-  background: #BA6D4B;
-  color: #F3C8A0;
+.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: var(--size-sm);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.export-mode-option input {
+  accent-color: var(--color-primary);
+}
+
+.export-text {
+  width: 100%;
+  min-height: 140px;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-input);
+  color: var(--color-text-primary);
+  padding: var(--size-md-padding);
+  resize: vertical;
+}
+
+.export-button {
+  width: fit-content;
+  border: var(--button-border);
+  border-radius: var(--button-radius);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  font-weight: 700;
+  padding: var(--button-padding);
+  cursor: pointer;
+}
+
+.export-button:hover {
+  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: 8px;
-  border: 2px solid #5A2C28;
+  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(-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(0.75rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
   }
 
   .board-section {
@@ -142,26 +322,26 @@ h2 {
 
   h1,
   h2 {
-    font-size: clamp(1.25rem, 3vw, 1.75rem);
+    font-size: var(--heading-h1-tablet);
   }
 }
 
 @media (max-width: 768px) {
   .game-shell {
-    padding: clamp(0.5rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
   }
 
   .game-card {
-    padding: clamp(0.5rem, 1vw, 0.75rem);
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
   }
 
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--size-lg);
   }
 
   h1,
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   .meta {
@@ -169,61 +349,31 @@ h2 {
   }
 
   .top-section {
-    padding: 0.5rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .move-form {
-    flex-wrap: wrap;
-  }
-
-  .move-form label {
-    flex-basis: 100%;
-    margin-bottom: 0.5rem;
+    gap: var(--size-xs);
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {
     min-height: 300px;
   }
-
-  .import-card {
-    padding: 0.75rem;
-    gap: 0.5rem;
-  }
-
-  .import-card label {
-    font-size: 0.9rem;
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 70px;
-    font-size: 0.9rem;
-    padding: 0.5rem;
-  }
-
-  .btn {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
-  }
 }
 
 @media (max-width: 480px) {
   .game-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .game-card {
-    padding: 0.5rem;
-    border-radius: 8px;
+    padding: var(--size-sm);
+    border-radius: var(--border-radius-md);
   }
 
   header {
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--size-md);
   }
 
   h1 {
-    font-size: 1.1rem;
+    font-size: var(--heading-h1-small);
   }
 
   .meta {
@@ -231,23 +381,11 @@ h2 {
   }
 
   .top-section {
-    padding: 0.4rem;
-    margin-bottom: 0.5rem;
+    gap: var(--size-xs-gap);
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {
     min-height: 250px;
   }
-
-  .import-card {
-    padding: 0.5rem;
-    gap: 0.35rem;
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 50px;
-    font-size: 0.8rem;
-    padding: 0.4rem;
-  }
 }

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

@@ -1,4 +1,10 @@
-<main class="game-shell">
+<main class="game-shell" [class.theme-dark]="isDarkMode">
+  <app-promotion-dialog
+    [isOpen]="facade.isPromotionDialogOpen"
+    (promotionSelected)="facade.onPromotionSelected($event)"
+    (closed)="facade.onPromotionClosed()"
+  />
+
   <section class="game-card">
     <header class="mb-3">
       <a routerLink="/" class="back-link">Back</a>
@@ -9,65 +15,141 @@
     @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 -->
+          <!-- Left Sidebar - Dummy Timers -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-            <aside class="import-card fen-card h-100">
-              <label for="fenImport">Import FEN</label>
-              <textarea
-                id="fenImport"
-                name="fenImport"
-                [(ngModel)]="facade.fenInput"
-                rows="4"
-                placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-              ></textarea>
-              <button type="button" class="btn w-100" (click)="facade.importFen()">Load FEN</button>
-            </aside>
+            <section class="timer-card">
+              <h2>Timers</h2>
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
+                <p class="timer-label">White</p>
+                <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
+              </div>
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
+                <p class="timer-label">Black</p>
+                <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
+              </div>
+            </section>
           </div>
 
           <!-- Center - Chess Board -->
           <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
             <section class="center-column d-flex flex-column h-100">
-              <div class="top-section mb-3">
-                <form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
-                  <label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
-                  <input 
-                    id="uciMove" 
-                    name="uciMove" 
-                    class="form-control flex-grow-1"
-                    [(ngModel)]="facade.moveInput" 
-                    placeholder="e2e4" 
-                  />
-                  <button type="submit" class="btn">Send Move</button>
-                </form>
-                <p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
-              </div>
-
               <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
                 <app-chess-board
                   [fen]="facade.state.fen"
                   [selectedSquare]="facade.selectedSquare"
                   [highlightedSquares]="facade.highlightedSquares"
+                  [boardTheme]="boardTheme"
                   (squareSelected)="facade.onBoardSquareSelected($event)"
                 />
               </div>
+
+              <section class="top-section">
+                <section class="board-theme-card" aria-label="Board design chooser">
+                  <h3>Board Design</h3>
+                  <div class="board-theme-group" role="radiogroup" aria-label="Board design">
+                    <label class="board-theme-option">
+                      <input
+                        type="radio"
+                        name="boardTheme"
+                        [checked]="boardTheme === 'arabian'"
+                        (change)="setBoardTheme('arabian')"
+                      />
+                      <span>Arabian</span>
+                    </label>
+
+                    <label class="board-theme-option">
+                      <input
+                        type="radio"
+                        name="boardTheme"
+                        [checked]="boardTheme === 'classic'"
+                        (change)="setBoardTheme('classic')"
+                      />
+                      <span>Classic</span>
+                    </label>
+                  </div>
+                </section>
+
+                <app-input-card
+                  label="Play move (UCI)"
+                  placeholder="e2e4"
+                  buttonLabel="Send Move"
+                  inputType="input"
+                  [value]="facade.moveInput"
+                  cardClass="move-card"
+                  hintText="Click your piece to highlight legal targets."
+                  (valueChange)="facade.moveInput = $event"
+                  (buttonClick)="facade.submitMove()"
+                />
+              </section>
             </section>
           </div>
 
-          <!-- Right Sidebar - PGN Import -->
+          <!-- Right Sidebar - Export -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <aside class="import-card pgn-card h-100">
-              <label for="pgnImport">Import PGN</label>
+            <section class="history-card">
+              <h2>Move History</h2>
+
+              @if (facade.state.moves.length === 0) {
+                <p class="history-empty">No moves yet.</p>
+              } @else {
+                <ol class="history-list">
+                  @for (move of facade.state.moves; track $index) {
+                    <li>
+                      <span class="history-number">{{ $index + 1 }}.</span>
+                      <span class="history-move">{{ move }}</span>
+                    </li>
+                  }
+                </ol>
+              }
+            </section>
+
+            <section class="export-card">
+              <h2>Export</h2>
+              <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
+                <label class="export-mode-option">
+                  <input
+                    type="radio"
+                    name="exportType"
+                    [checked]="exportType === 'fen'"
+                    (change)="setExportType('fen')"
+                  />
+                  <span>FEN</span>
+                </label>
+                <label class="export-mode-option">
+                  <input
+                    type="radio"
+                    name="exportType"
+                    [checked]="exportType === 'pgn'"
+                    (change)="setExportType('pgn')"
+                  />
+                  <span>PGN</span>
+                </label>
+              </div>
+
               <textarea
-                id="pgnImport"
-                name="pgnImport"
-                [(ngModel)]="facade.pgnInput"
-                rows="4"
-                placeholder="1. e4 e5 2. Nf3 Nc6 *"
+                class="export-text"
+                [value]="exportValue"
+                [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'"
+                rows="8"
+                readonly
               ></textarea>
-              <button type="button" class="btn w-100" (click)="facade.importPgn()">Load PGN</button>
-            </aside>
+
+              <button type="button" class="export-button" (click)="completeExport()">Done</button>
+
+              @if (exportNotice) {
+                <p class="export-note">{{ exportNotice }}</p>
+              }
+            </section>
           </div>
         </div>
       </div>

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

@@ -1,25 +1,53 @@
 import { CommonModule } from '@angular/common';
-import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+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 { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
+import { InputCardComponent } from '../../components/input-card/input-card.component';
+import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
 import { GameFacade } from './game.facade';
 
+type TimerTurn = 'white' | 'black';
+type BoardTheme = 'arabian' | 'classic';
+
+interface TimerSnapshot {
+  whiteSeconds: number;
+  blackSeconds: number;
+  turn: TimerTurn;
+  savedAt: number;
+}
+
 @Component({
   selector: 'app-game',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent],
+  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent, PromotionDialogComponent],
   providers: [GameFacade],
   templateUrl: './game.component.html',
   styleUrl: './game.component.css'
 })
-export class GameComponent implements OnInit {
+export class GameComponent implements OnInit, OnDestroy {
+  private static readonly TIMER_START_SECONDS = 10 * 60;
+  private static readonly BOARD_THEME_STORAGE_KEY = 'nowchess.boardTheme';
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
   readonly facade = inject(GameFacade);
+  whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  exportType: 'fen' | 'pgn' = 'fen';
+  boardTheme: BoardTheme = 'arabian';
+  isDarkMode = false;
+  exportValue = '';
+  exportNotice = '';
+  private timerIntervalId: number | null = null;
+  private activeGameId = '';
 
   ngOnInit(): void {
+    this.applyIncomingTheme();
+    this.syncThemeFromDocument();
+    this.boardTheme = this.resolveStoredBoardTheme();
+    this.startDummyTimers();
+
     this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
       const id = paramMap.get('gameId');
       if (!id) {
@@ -28,7 +56,203 @@ export class GameComponent implements OnInit {
         return;
       }
 
+      this.activeGameId = id;
+      this.restoreTimers(id);
       this.facade.setGameId(id);
+      this.syncExportValue();
     });
   }
+
+  ngOnDestroy(): void {
+    if (this.timerIntervalId !== null) {
+      window.clearInterval(this.timerIntervalId);
+    }
+
+    this.persistTimers(this.resolveCurrentTurn());
+  }
+
+  private syncThemeFromDocument(): void {
+    this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+
+  private applyIncomingTheme(): void {
+    const incomingTheme = window.history.state?.theme;
+    if (incomingTheme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+      return;
+    }
+
+    if (incomingTheme === 'light') {
+      document.documentElement.removeAttribute('data-theme');
+      localStorage.removeItem('theme');
+    }
+  }
+
+  setExportType(type: 'fen' | 'pgn'): void {
+    this.exportType = type;
+    this.exportNotice = '';
+    this.syncExportValue();
+  }
+
+  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(GameComponent.BOARD_THEME_STORAGE_KEY);
+    return stored === 'classic' ? 'classic' : 'arabian';
+  }
 }

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

@@ -1,11 +1,13 @@
 import { DestroyRef, Injectable, OnDestroy, inject } from '@angular/core';
-import { Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { interval, startWith, Subscription, switchMap } from 'rxjs';
-import { getPieceAtSquare, isPieceColor } from '../../core/chess/fen.utils';
 import { getErrorMessage } from '../../core/http/error-message.util';
 import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
 import { GameApiService } from '../../services/game-api.service';
+import { BotMoveService } from '../../services/bot-move.service';
+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';
 
 @Injectable()
 export class GameFacade implements OnDestroy {
@@ -16,25 +18,42 @@ export class GameFacade implements OnDestroy {
   fenInput = '';
   pgnInput = '';
   loading = true;
-  selectedSquare: string | null = null;
-  highlightedSquares: string[] = [];
+  gameCompletionMessage = '';
+  isGameFinished = false;
+  isPromotionDialogOpen = false;
+
+  private boardSelection: BoardSelection = {
+    selectedSquare: null,
+    highlightedSquares: [],
+    selectedSquareMoves: []
+  };
+  private pendingPromotionMoves: LegalMove[] = [];
 
-  private selectedSquareMoves: LegalMove[] = [];
-  private readonly router = inject(Router);
   private readonly gameApi = inject(GameApiService);
   private readonly destroyRef = inject(DestroyRef);
-  private streamSubscription: Subscription | null = null;
-  private pollSubscription: Subscription | null = null;
-
-  ngOnDestroy(): void {
-    this.streamSubscription?.unsubscribe();
-    this.pollSubscription?.unsubscribe();
-  }
+  private readonly botMoveService = inject(BotMoveService);
+  private readonly completionService = inject(GameCompletionService);
+  private readonly importService = inject(GameImportService);
+  private readonly boardSelectionService = inject(BoardSelectionService);
+  private readonly streamService = inject(GameStreamService);
 
   get state(): GameState | null {
     return this.game?.state ?? null;
   }
 
+  get selectedSquare(): string | null {
+    return this.boardSelection.selectedSquare;
+  }
+
+  get highlightedSquares(): string[] {
+    return this.boardSelection.highlightedSquares;
+  }
+
+  ngOnDestroy(): void {
+    this.streamService.cleanup();
+    this.botMoveService.cleanup();
+  }
+
   setGameId(gameId: string): void {
     this.gameId = gameId;
     this.loadGame();
@@ -45,36 +64,45 @@ export class GameFacade implements OnDestroy {
       return;
     }
 
-    if (this.selectedSquare && this.highlightedSquares.includes(square)) {
-      const selectedMove = this.selectedSquareMoves.find((move) => move.to === square);
+    // Handle move selection
+    if (this.boardSelection.selectedSquare && this.boardSelection.highlightedSquares.includes(square)) {
+      const selectedMove = this.boardSelection.selectedSquareMoves.find((move) => move.to === square);
       if (selectedMove) {
+        // If multiple promotion outcomes exist for the target, ask player to choose one.
+        const promotionMoves = this.boardSelection.selectedSquareMoves.filter(
+          (move) => move.to === square && !!move.promotion
+        );
+        if (promotionMoves.length > 0) {
+          this.pendingPromotionMoves = promotionMoves;
+          this.isPromotionDialogOpen = true;
+          return;
+        }
         this.moveInput = selectedMove.uci;
         this.submitMove();
       }
       return;
     }
 
-    const piece = getPieceAtSquare(this.state.fen, square);
-    if (!piece || !isPieceColor(piece, this.state.turn)) {
-      this.clearSelection();
-      return;
-    }
-
+    // Load moves for selected square
     this.errorMessage = '';
-    this.gameApi
-      .getLegalMoves(this.gameId, square)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: (response) => {
-          this.selectedSquare = square;
-          this.selectedSquareMoves = response.moves;
-          this.highlightedSquares = response.moves.map((move) => move.to);
-        },
-        error: () => {
-          this.clearSelection();
-          this.errorMessage = 'Could not load legal moves for selected square.';
-        }
-      });
+    const newSelection = this.boardSelectionService.handleSquareSelection(
+      square,
+      this.gameId,
+      this.state,
+      this.boardSelection,
+      (moves) => {
+        this.boardSelection = {
+          selectedSquare: square,
+          highlightedSquares: moves.map((move) => move.to),
+          selectedSquareMoves: moves
+        };
+      },
+      (error) => {
+        this.errorMessage = error;
+        this.boardSelection = this.boardSelectionService.clearSelection();
+      }
+    );
+    this.boardSelection = newSelection;
   }
 
   submitMove(): void {
@@ -91,9 +119,25 @@ export class GameFacade implements OnDestroy {
         next: (state) => {
           if (this.game) {
             this.game = { ...this.game, state };
+            this.updateGameCompletion();
           }
           this.moveInput = '';
-          this.clearSelection();
+          this.boardSelection = this.boardSelectionService.clearSelection();
+          this.botMoveService.tryMakeBotMove(
+            this.gameId,
+            this.game,
+            this.state,
+            (updatedState) => {
+              if (this.game) {
+                this.game = { ...this.game, state: updatedState };
+                this.updateGameCompletion();
+              }
+              this.boardSelection = this.boardSelectionService.clearSelection();
+            },
+            (error) => {
+              this.errorMessage = error;
+            }
+          );
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Move rejected.');
@@ -101,59 +145,61 @@ export class GameFacade implements OnDestroy {
       });
   }
 
-  importFen(): void {
-    const fen = this.fenInput.trim();
-    if (!fen) {
-      this.errorMessage = 'Please provide a FEN string.';
+  onPromotionSelected(promotionPiece: 'queen' | 'rook' | 'bishop' | 'knight'): void {
+    const selectedPromotionMove = this.pendingPromotionMoves.find((move) => move.promotion === promotionPiece);
+    if (!selectedPromotionMove) {
+      this.errorMessage = 'Selected promotion move is unavailable.';
+      this.isPromotionDialogOpen = false;
+      this.pendingPromotionMoves = [];
       return;
     }
 
+    this.moveInput = selectedPromotionMove.uci;
+    this.isPromotionDialogOpen = false;
+    this.boardSelection = this.boardSelectionService.clearSelection();
+    this.pendingPromotionMoves = [];
+    this.submitMove();
+  }
+
+  onPromotionClosed(): void {
+    this.isPromotionDialogOpen = false;
+    this.boardSelection = this.boardSelectionService.clearSelection();
+    this.pendingPromotionMoves = [];
+  }
+
+  importFen(): void {
     this.errorMessage = '';
-    this.gameApi
-      .importFen(fen)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: (game) => {
-          this.fenInput = '';
-          this.pgnInput = '';
-          void this.router.navigate(['/game', game.gameId]);
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'FEN import failed.');
-        }
-      });
+    this.importService.importFen(
+      this.fenInput,
+      () => {
+        this.fenInput = '';
+        this.pgnInput = '';
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
   }
 
   importPgn(): void {
-    const pgn = this.pgnInput.trim();
-    if (!pgn) {
-      this.errorMessage = 'Please provide a PGN string.';
-      return;
-    }
-
     this.errorMessage = '';
-    this.gameApi
-      .importPgn(pgn)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: (game) => {
-          this.pgnInput = '';
-          this.fenInput = '';
-          void this.router.navigate(['/game', game.gameId]);
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'PGN import failed.');
-        }
-      });
+    this.importService.importPgn(
+      this.pgnInput,
+      () => {
+        this.pgnInput = '';
+        this.fenInput = '';
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
   }
 
   private loadGame(): void {
     this.loading = true;
     this.errorMessage = '';
-    this.clearSelection();
-    this.streamSubscription?.unsubscribe();
-    this.pollSubscription?.unsubscribe();
-    this.pollSubscription = null;
+    this.boardSelection = this.boardSelectionService.clearSelection();
+    this.streamService.cleanup();
 
     this.gameApi
       .getGame(this.gameId)
@@ -162,7 +208,9 @@ export class GameFacade implements OnDestroy {
         next: (game) => {
           this.game = game;
           this.loading = false;
-          this.startStream();
+          this.updateGameCompletion();
+          this.startStreaming();
+          this.tryMakeBotMove();
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
@@ -171,57 +219,32 @@ export class GameFacade implements OnDestroy {
       });
   }
 
-  private startStream(): void {
-    this.streamSubscription = this.gameApi
-      .streamGame(this.gameId)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: (event) => this.applyStreamEvent(event),
-        error: () => {
-          this.errorMessage = 'Live stream disconnected. Falling back to polling.';
-          this.startPolling();
-        },
-        complete: () => {
-          this.errorMessage = 'Live stream ended. Falling back to polling.';
-          this.startPolling();
-        }
-      });
-  }
-
-  private startPolling(): void {
-    if (this.pollSubscription) {
-      return;
-    }
-
-    this.pollSubscription = interval(1500)
-      .pipe(
-        startWith(0),
-        switchMap(() => this.gameApi.getGame(this.gameId)),
-        takeUntilDestroyed(this.destroyRef)
-      )
-      .subscribe({
-        next: (game) => {
-          const previousMoves = this.game?.state.moves.join(',') ?? '';
-          this.game = game;
-          if (previousMoves !== game.state.moves.join(',')) {
-            this.clearSelection();
-          }
-        }
-      });
+  private startStreaming(): void {
+    this.streamService.startStreaming(
+      this.gameId,
+      (event) => this.applyStreamEvent(event),
+      () => {
+        this.errorMessage = 'Live stream disconnected. Falling back to polling.';
+      }
+    );
   }
 
   private applyStreamEvent(event: GameStreamEvent): void {
     if (event.type === 'gameFull') {
       this.game = event.game;
-      this.clearSelection();
+      this.boardSelection = this.boardSelectionService.clearSelection();
+      this.updateGameCompletion();
+      this.tryMakeBotMove();
       return;
     }
 
     if (event.type === 'gameState' && this.game) {
       const moveCountBefore = this.game.state.moves.length;
       this.game = { ...this.game, state: event.state };
+      this.updateGameCompletion();
       if (event.state.moves.length !== moveCountBefore) {
-        this.clearSelection();
+        this.boardSelection = this.boardSelectionService.clearSelection();
+        this.tryMakeBotMove();
       }
       return;
     }
@@ -231,9 +254,27 @@ export class GameFacade implements OnDestroy {
     }
   }
 
-  private clearSelection(): void {
-    this.selectedSquare = null;
-    this.selectedSquareMoves = [];
-    this.highlightedSquares = [];
+  private tryMakeBotMove(): void {
+    this.botMoveService.tryMakeBotMove(
+      this.gameId,
+      this.game,
+      this.state,
+      (updatedState) => {
+        if (this.game) {
+          this.game = { ...this.game, state: updatedState };
+          this.updateGameCompletion();
+        }
+        this.boardSelection = this.boardSelectionService.clearSelection();
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
+  }
+
+  private updateGameCompletion(): void {
+    const completion = this.completionService.getGameCompletion(this.game, this.state);
+    this.gameCompletionMessage = completion.message;
+    this.isGameFinished = completion.isFinished;
   }
 }

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

@@ -1,27 +1,332 @@
-<main class="welcome-shell">
-  <section class="welcome-card">
-    <h1>Welcome to NowChess</h1>
-    <p>Pick a mode to begin.</p>
+<div class="cityscape-shell" [class.sunset]="isSunsetMode">
+  <div class="mode-badge">{{ modeBadge }}</div>
 
-    <div class="mode-grid">
-      <button type="button" class="mode mode-disabled" disabled>
-        <span>Bot</span>
-        <small>Coming soon</small>
-      </button>
+  <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>
 
-      <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
-        <span>1 vs 1</span>
-        <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
-      </button>
-
-      <button type="button" class="mode mode-disabled" disabled>
-        <span>Future Technique</span>
-        <small>Placeholder</small>
-      </button>
+  <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>
 
-    @if (errorMessage) {
-      <p class="error">{{ errorMessage }}</p>
+    <div class="bg-layer">
+      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
+    </div>
+
+    <div class="main-layer">
+      <div class="bwrap" style="left:2.5%;width:16%;">
+        <div class="ant" style="height:38px;"></div>
+        <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
+          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
+            <div
+              class="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>
+        </div>
+        <div class="bpart" style="height:36vh;">
+          <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="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>
+        </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>
+        </div>
+        <div class="bpart" style="height:44vh;">
+          <div style="padding:5px 5px 0;">
+            <div style="text-align:center;padding:4px 0 6px;">
+              <span class="neon">OPEN 24/7</span>
+            </div>
+            <div class="bb">
+              <div class="bb-tag">BOT</div>
+              <div class="bb-title">PLAY WITH<br />A BOT</div>
+              <button type="button" class="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>
+        </div>
+      </div>
+
+      <div class="bwrap" style="left:39%;width:20%;">
+        <img class="playerone-gif" src="/assets/arabian-chess/player-one.gif" alt="Player One" />
+        <div style="display:flex;justify-content:center;gap:16px;margin-bottom:0;">
+          <div class="ant" style="height:65px;margin-top:-15px;"></div>
+        </div>
+        <div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
+          <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
+            <div
+              class="w"
+              *ngFor="let win of windows['wC1']"
+              [ngStyle]="win.style"
+            ></div>
+          </div>
+        </div>
+        <div class="bpart" style="height:10vh;">
+          <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
+            <div
+              class="w"
+              *ngFor="let win of windows['wC2']"
+              [ngStyle]="win.style"
+            ></div>
+          </div>
+        </div>
+        <div class="bpart" style="height:48vh;">
+          <div style="padding:6px 6px 0;">
+            <div class="bb" style="padding:14px 14px 12px;">
+              <div class="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="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>
+        </div>
+      </div>
+
+      <div class="bwrap" style="left:63%;width:18%;">
+        <div class="ant" style="height:30px;"></div>
+        <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
+          <div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
+            <div
+              class="w"
+              *ngFor="let win of windows['wD1']"
+              [ngStyle]="win.style"
+            ></div>
+          </div>
+        </div>
+        <div class="bpart" style="height:42vh;">
+          <div style="padding:5px 5px 0;">
+            <div style="text-align:center;padding:4px 0 6px;">
+              <span class="neon">MORE</span>
+            </div>
+            <div class="bb">
+              <div class="bb-tag">OPTIONS</div>
+              <div class="bb-title">MORE<br />OPTIONS</div>
+              <button type="button" class="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>
+        </div>
+      </div>
+
+      <div class="bwrap" style="left:83%;width:10%;">
+        <div class="bpart" style="height:30vh;">
+          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
+            <div
+              class="w"
+              *ngFor="let win of windows['wE1']"
+              [ngStyle]="win.style"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Speech Bubble -->
+    @if (showSpeechBubble) {
+      <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
+        <div class="speech-bubble">
+          <div class="bubble-text">{{ bubbleMessage }}</div>
+          <div class="bubble-tail"></div>
+        </div>
+      </div>
     }
-  </section>
-</main>
+
+    <!-- Zoomed Window View -->
+    @if (isZoomedIn) {
+      <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="onMouseUp()">
+        <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
+          <div class="zoom-window-frame">
+            <div class="zoom-player-2">
+              <img 
+                src="/assets/arabian-chess/player-two.gif" 
+                alt="Player 2" 
+                class="player-2-gif"
+                (click)="$event.stopPropagation()"
+              />
+              @if (showSecondSpeechBubble) {
+                <div class="second-speech-bubble">
+                  <div class="bubble-text">Feed me! 🍖</div>
+                  <div class="bubble-tail"></div>
+                </div>
+              }
+              @if (showHappyBubble) {
+                <div class="happy-speech-bubble">
+                  <div class="bubble-text">Happy meow! 😸</div>
+                  <div class="bubble-tail"></div>
+                </div>
+              }
+            </div>
+          </div>
+
+          <!-- Draggable Meat Emoji -->
+          @if (showMeatEmoji) {
+            <div 
+              class="meat-emoji"
+              [style.left.px]="meatX"
+              [style.top.px]="meatY"
+              (mousedown)="onMeatMouseDown($event)"
+            >
+              🍖
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <div class="haze"></div>
+    <div class="ground"></div>
+  </div>
+
+  @if (showDifficultyDialog) {
+    <div class="dialog-overlay" (click)="closeDifficultyDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">SELECT DIFFICULTY</div>
+        <div class="dialog-actions">
+          <button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
+          <button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
+          <button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (showOptionsDialog) {
+    <div class="dialog-overlay" (click)="closeOptionsDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">MORE OPTIONS</div>
+        <div class="dialog-actions">
+          <button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (showJoinDialog) {
+    <div class="dialog-overlay" (click)="closeJoinDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">JOIN GAME</div>
+        <input
+          type="text"
+          class="dialog-input"
+          [(ngModel)]="gameIdInput"
+          placeholder="Paste game ID here"
+          [disabled]="joiningGame"
+          (keyup.enter)="submitJoinGame()"
+        />
+        <div class="dialog-actions">
+          <button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
+            {{ joiningGame ? 'JOINING...' : 'JOIN' }}
+          </button>
+          <button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (showImportDialog) {
+    <div class="dialog-overlay" (click)="closeImportDialog()">
+      <div class="dialog-card" (click)="$event.stopPropagation()">
+        <div class="dialog-title">IMPORT GAME</div>
+        <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
+          <label class="import-mode-option">
+            <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
+            <span>FEN</span>
+          </label>
+          <label class="import-mode-option">
+            <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
+            <span>PGN</span>
+          </label>
+        </div>
+        <textarea
+          class="dialog-input dialog-textarea"
+          [(ngModel)]="importText"
+          [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
+          [disabled]="importing"
+          rows="5"
+        ></textarea>
+        <div class="dialog-actions">
+          <button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
+            {{ importing ? 'IMPORTING...' : 'IMPORT' }}
+          </button>
+          <button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (errorMessage) {
+    <p class="error-banner">{{ errorMessage }}</p>
+  }
+</div>

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

@@ -1,25 +1,179 @@
 import { CommonModule } from '@angular/common';
-import { Component } 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 { getErrorMessage } from '../../core/http/error-message.util';
 import { GameApiService } from '../../services/game-api.service';
 
+type Difficulty = 'easy' | 'medium' | 'hard';
+type ImportMode = 'fen' | 'pgn';
+
+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],
+  imports: [CommonModule, FormsModule],
   templateUrl: './welcome.component.html',
-  styleUrl: './welcome.component.css'
+  styleUrls: ['./welcome.component.css']
 })
-export class WelcomeComponent {
+export class WelcomeComponent implements OnInit, OnDestroy {
   creating = false;
+  joiningGame = false;
+  importing = false;
   errorMessage = '';
 
+  showDifficultyDialog = false;
+  showOptionsDialog = false;
+  showJoinDialog = false;
+  showImportDialog = false;
+
+  gameIdInput = '';
+  importMode: ImportMode = 'fen';
+  importText = '';
+
+  isSunsetMode = false;
+  modeBadge = 'NIGHT MODE';
+
+  // Speech bubble and zoom features
+  showSpeechBubble = false;
+  isZoomedIn = false;
+  showSecondSpeechBubble = false;
+  showHappyBubble = false;
+  showMeatEmoji = false;
+  bubbleMessage = 'meow';
+
+  // Meat emoji drag state
+  meatX = 0;
+  meatY = 0;
+  isDraggingMeat = false;
+  meatDragOffsetX = 0;
+  meatDragOffsetY = 0;
+
+  stars: Star[] = [];
+  bgBuildings: BackgroundBuilding[] = [];
+  windows: Record<string, WindowCell[]> = {};
+
+  private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
+  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
+  private zoomTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
+  private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
+
+  private warmColors = ['#ffe88a', '#ffcc30', '#f0ad4e', '#ec971f', '#ffb74d', '#ffa726'];
+  private warmGlowColors = ['#ffcc30', '#ffcc30', '#ec971f', '#ec971f', '#ff9800', '#fb8c00'];
+
   constructor(
     private readonly router: Router,
     private readonly gameApi: GameApiService
-  ) {}
+  ) {
+    this.initTheme();
+  }
+
+  ngOnInit(): void {
+    this.generateStars(220);
+    this.generateBackgroundBuildings();
+    this.generateWindowsForAllBuildings();
+    this.startWindowFlicker();
+    
+    // Show speech bubble after 5 seconds
+    this.speechBubbleTimeoutId = setTimeout(() => {
+      this.showSpeechBubble = true;
+    }, 5000);
+  }
+
+  ngOnDestroy(): void {
+    this.stopWindowFlicker();
+    if (this.speechBubbleTimeoutId) {
+      clearTimeout(this.speechBubbleTimeoutId);
+    }
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
+  }
+
+  toggleTheme(): void {
+    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;
+  }
+
+  closeDifficultyDialog(): void {
+    this.showDifficultyDialog = false;
+    this.errorMessage = '';
+  }
+
+  openOptionsDialog(): void {
+    this.closeAllDialogs();
+    this.showOptionsDialog = true;
+  }
+
+  closeOptionsDialog(): void {
+    this.showOptionsDialog = false;
+    this.errorMessage = '';
+  }
+
+  openJoinDialog(): void {
+    this.closeAllDialogs();
+    this.showJoinDialog = true;
+  }
+
+  closeJoinDialog(): void {
+    if (this.joiningGame) {
+      return;
+    }
+    this.showJoinDialog = false;
+    this.gameIdInput = '';
+    this.errorMessage = '';
+  }
+
+  openImportDialog(): void {
+    this.closeAllDialogs();
+    this.showImportDialog = true;
+  }
+
+  closeImportDialog(): void {
+    if (this.importing) {
+      return;
+    }
+    this.showImportDialog = false;
+    this.importText = '';
+    this.importMode = 'fen';
+    this.errorMessage = '';
+  }
+
+  setImportMode(mode: ImportMode): void {
+    this.importMode = mode;
+    this.errorMessage = '';
+  }
 
   startOneVsOne(): void {
     if (this.creating) {
@@ -34,11 +188,347 @@ export class WelcomeComponent {
       .pipe(finalize(() => (this.creating = false)))
       .subscribe({
         next: (game) => {
-          void this.router.navigate(['/game', game.gameId]);
+          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.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.');
+        }
+      });
+  }
+
+  submitJoinGame(): 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.');
+        }
+      });
+  }
+
+  submitImportGame(): 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);
+      }
+    });
+  }
+
+  onSpeechBubbleClick(): void {
+    this.showSpeechBubble = false;
+    this.isZoomedIn = true;
+    this.bubbleMessage = 'meow';
+    this.showMeatEmoji = true;
+    this.showHappyBubble = false;
+    this.showSecondSpeechBubble = true;
+    
+    // Reset meat position
+    this.meatX = window.innerWidth / 2 - 100;
+    this.meatY = window.innerHeight / 2 + 150;
+  }
+
+  onZoomedViewClick(): void {
+    this.isZoomedIn = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = false;
+    this.showMeatEmoji = false;
+    this.bubbleMessage = 'meow';
+    
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
+  }
+
+  onMeatMouseDown(event: MouseEvent): void {
+    this.isDraggingMeat = true;
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    this.meatDragOffsetX = event.clientX - rect.left;
+    this.meatDragOffsetY = event.clientY - rect.top;
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    if (!this.isDraggingMeat) {
+      return;
+    }
+
+    this.meatX = event.clientX - this.meatDragOffsetX;
+    this.meatY = event.clientY - this.meatDragOffsetY;
+
+    // Get gif element position
+    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
+    if (!gifElement) {
+      return;
+    }
+
+    const gifRect = gifElement.getBoundingClientRect();
+    const gifCenterX = gifRect.left + gifRect.width / 2;
+    const gifCenterY = gifRect.top + gifRect.height / 2;
+
+    // Get meat center position
+    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
+    if (!meatElement) {
+      return;
+    }
+
+    const meatRect = meatElement.getBoundingClientRect();
+    const meatCenterX = meatRect.left + meatRect.width / 2;
+    const meatCenterY = meatRect.top + meatRect.height / 2;
+
+    // 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();
+    }
+  }
+
+  onMouseUp(): void {
+    this.isDraggingMeat = false;
+  }
+
+  onMeatFed(): void {
+    this.showMeatEmoji = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = true;
+    this.isDraggingMeat = false;
+  }
+
+  private closeAllDialogs(): void {
+    this.showDifficultyDialog = false;
+    this.showOptionsDialog = false;
+    this.showJoinDialog = false;
+    this.showImportDialog = false;
+    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;
+      return {
+        style: {
+          width: `${size}px`,
+          height: `${size}px`,
+          left: `${Math.random() * 100}%`,
+          top: `${Math.random() * 62}%`,
+          '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
+          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
+        }
+      };
+    });
+  }
+
+  private generateBackgroundBuildings(): void {
+    const specs = [
+      { l: '0%', w: '7%', h: '30vh' },
+      { l: '3%', w: '4%', h: '18vh' }, // New building
+      { l: '7%', w: '5%', h: '22vh' },
+      { l: '11%', w: '8%', h: '28vh' },
+      { l: '15%', w: '6%', h: '20vh' },
+      { l: '18.5%', w: '4%', h: '18vh' },
+      { l: '22.5%', w: '6%', h: '26vh' },
+      { l: '28%', w: '5%', h: '25vh' },
+      { l: '32%', w: '4%', h: '15vh' },
+      { l: '35.5%', w: '4.5%', h: '20vh' },
+      { l: '42%', w: '5%', h: '28vh' },
+      { l: '47%', w: '5%', h: '22vh' }, // New building
+      { l: '50%', w: '7%', h: '30vh' },
+      { l: '55%', w: '6%', h: '27vh' },
+      { l: '60.5%', w: '5%', h: '24vh' },
+      { l: '64.5%', w: '3.5%', h: '17vh' },
+      { l: '70%', w: '6%', h: '23vh' },
+      { l: '75%', w: '4%', h: '19vh' },
+      { l: '80.5%', w: '4%', h: '21vh' },
+      { l: '85.5%', w: '9%', h: '32vh' },
+      { l: '88%', w: '5%', h: '20vh' },
+      { l: '91%', w: '3%', h: '16vh' }, // New building
+      { l: '94%', w: '6%', h: '27vh' }
+    ];
+
+    this.bgBuildings = specs.map((spec) => ({
+      style: { left: spec.l, width: spec.w, height: spec.h }
+    }));
+  }
+
+  private generateWindowsForAllBuildings(): void {
+    this.windows = {
+      wA1: this.generateWindows(3, 4, 0.6),
+      wA2: this.generateWindows(4, 5, 0.55),
+      wA3: this.generateWindows(5, 18, 0.5),
+      wB1: this.generateWindows(4, 3, 0.6),
+      wB2: this.generateWindows(5, 20, 0.55),
+      wC1: this.generateWindows(5, 3, 0.7),
+      wC2: this.generateWindows(6, 5, 0.65),
+      wC3: this.generateWindows(7, 24, 0.6),
+      wD1: this.generateWindows(6, 3, 0.6),
+      wD2: this.generateWindows(6, 20, 0.5),
+      wE1: this.generateWindows(3, 16, 0.45)
+    };
+  }
+
+  private generateWindows(cols: number, rows: number, litRate: number): WindowCell[] {
+    const total = cols * rows;
+    return Array.from({ length: total }, () => this.createWindowCell(litRate));
+  }
+
+  private createWindowCell(litRate: number): WindowCell {
+    const random = Math.random();
+    let state: WindowCell['state'] = 'off';
+    let color: string | undefined;
+    let glowColor: string | undefined;
+
+    if (random < litRate * 0.58) { // Cool color
+      state = 'on';
+      const coolIndex = Math.floor(Math.random() * this.coolColors.length);
+      color = this.coolColors[coolIndex];
+      glowColor = this.coolGlowColors[coolIndex];
+    } else if (random < litRate) { // Warm color
+      state = 'on';
+      const warmIndex = Math.floor(Math.random() * this.warmColors.length);
+      color = this.warmColors[warmIndex];
+      glowColor = this.warmGlowColors[warmIndex];
+    }
+
+    if (state === 'off') {
+      return { state, style: {} };
+    }
+
+    const baseDuration = (color && this.coolColors.includes(color)) ? 3 : 4;
+    return {
+      state,
+      color,
+      glowColor,
+      style: {
+        'background-color': color || '',
+        'box-shadow': glowColor ? `0 0 6px ${glowColor}, 0 0 16px ${glowColor}35` : '',
+        '--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
+        '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
+      }
+    };
+  }
+
+  private startWindowFlicker(): void {
+    this.flickerIntervalId = setInterval(() => {
+      this.randomFlicker();
+    }, 2800);
+  }
+
+  private stopWindowFlicker(): void {
+    if (this.flickerIntervalId === undefined) {
+      return;
+    }
+    clearInterval(this.flickerIntervalId);
+    this.flickerIntervalId = undefined;
+  }
+
+  private randomFlicker(): void {
+    const allWindows = Object.values(this.windows).flat();
+    if (allWindows.length === 0) {
+      return;
+    }
+
+    const pickCount = Math.floor(Math.random() * 6) + 1;
+    for (let i = 0; i < pickCount; i += 1) {
+      const target = allWindows[Math.floor(Math.random() * allWindows.length)];
+      if (!target) {
+        continue;
+      }
+
+      if (target.state === 'off') {
+        target.state = 'on';
+        const isCool = Math.random() < 0.5;
+        const colors = isCool ? this.coolColors : this.warmColors;
+        const glowColors = isCool ? this.coolGlowColors : this.warmGlowColors;
+        const index = Math.floor(Math.random() * colors.length);
+
+        target.color = colors[index];
+        target.glowColor = glowColors[index];
+        target.style = {
+          'background-color': target.color || '',
+          'box-shadow': target.glowColor ? `0 0 6px ${target.glowColor}, 0 0 16px ${target.glowColor}35` : '',
+          '--wd': `${(Math.random() * 4 + (isCool ? 3 : 4)).toFixed(1)}s`,
+          '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
+        };
+      } else {
+        target.state = 'off';
+        target.color = undefined;
+        target.glowColor = undefined;
+        target.style = {};
+      }
+    }
+  }
 }

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

@@ -0,0 +1,64 @@
+import { Injectable, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { GameApiService } from './game-api.service';
+import { getPieceAtSquare, isPieceColor } from '../core/chess/fen.utils';
+import { GameState, LegalMove } from '../models/game.models';
+
+export interface BoardSelection {
+  selectedSquare: string | null;
+  highlightedSquares: string[];
+  selectedSquareMoves: LegalMove[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class BoardSelectionService {
+  private readonly gameApi = inject(GameApiService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  handleSquareSelection(
+    square: string,
+    gameId: string,
+    state: GameState | null,
+    currentSelection: BoardSelection,
+    onMovesLoaded: (moves: LegalMove[]) => void,
+    onError: (error: string) => void
+  ): BoardSelection {
+    if (!state) {
+      return currentSelection;
+    }
+
+    // If clicking on a highlighted square, it's a move
+    if (currentSelection.selectedSquare && currentSelection.highlightedSquares.includes(square)) {
+      const selectedMove = currentSelection.selectedSquareMoves.find((move) => move.to === square);
+      if (selectedMove) {
+        return { selectedSquare: null, highlightedSquares: [], selectedSquareMoves: [] };
+      }
+      return currentSelection;
+    }
+
+    // Check if square has a piece of the correct color
+    const piece = getPieceAtSquare(state.fen, square);
+    if (!piece || !isPieceColor(piece, state.turn)) {
+      return { selectedSquare: null, highlightedSquares: [], selectedSquareMoves: [] };
+    }
+
+    // Load legal moves for this square
+    this.gameApi
+      .getLegalMoves(gameId, square)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (response) => {
+          onMovesLoaded(response.moves);
+        },
+        error: () => {
+          onError('Could not load legal moves for selected square.');
+        }
+      });
+
+    return { selectedSquare: square, highlightedSquares: [], selectedSquareMoves: [] };
+  }
+
+  clearSelection(): BoardSelection {
+    return { selectedSquare: null, highlightedSquares: [], selectedSquareMoves: [] };
+  }
+}

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

@@ -0,0 +1,78 @@
+import { Injectable, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { delay, Subscription } from 'rxjs';
+import { GameApiService } from './game-api.service';
+import { getErrorMessage } from '../core/http/error-message.util';
+import { GameFull, GameState } from '../models/game.models';
+
+@Injectable({ providedIn: 'root' })
+export class BotMoveService {
+  private readonly gameApi = inject(GameApiService);
+  private readonly destroyRef = inject(DestroyRef);
+  private botMoveSubscription: Subscription | null = null;
+
+  private isBotPlayer(playerId: string): boolean {
+    return playerId.startsWith('bot-');
+  }
+
+  isPlayingAgainstBot(game: GameFull | null): boolean {
+    if (!game) {
+      return false;
+    }
+    return this.isBotPlayer(game.white.id) || this.isBotPlayer(game.black.id);
+  }
+
+  isCurrentPlayerBot(game: GameFull | null, state: GameState | null): boolean {
+    if (!game || !state) {
+      return false;
+    }
+    const currentPlayer = state.turn === 'white' ? game.white : game.black;
+    return this.isBotPlayer(currentPlayer.id);
+  }
+
+  tryMakeBotMove(
+    gameId: string,
+    game: GameFull | null,
+    state: GameState | null,
+    onSuccess: (updatedState: GameState) => void,
+    onError: (error: string) => void
+  ): void {
+    if (!this.isPlayingAgainstBot(game) || !this.isCurrentPlayerBot(game, state) || !state) {
+      return;
+    }
+
+    this.botMoveSubscription?.unsubscribe();
+    this.botMoveSubscription = this.gameApi
+      .getLegalMoves(gameId)
+      .pipe(
+        delay(1000),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (response) => {
+          if (response.moves.length === 0) {
+            return;
+          }
+          const botMove = response.moves[Math.floor(Math.random() * response.moves.length)];
+          this.gameApi
+            .makeMove(gameId, botMove.uci)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+              next: (updatedState) => {
+                onSuccess(updatedState);
+              },
+              error: (error) => {
+                onError(getErrorMessage(error, 'Bot move failed.'));
+              }
+            });
+        },
+        error: () => {
+          onError('Could not get legal moves for bot move.');
+        }
+      });
+  }
+
+  cleanup(): void {
+    this.botMoveSubscription?.unsubscribe();
+  }
+}

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

@@ -1,32 +1,54 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
 import {
-  ErrorEvent,
   GameFull,
   GameState,
   GameStreamEvent,
-  LegalMovesResponse
+  LegalMovesResponse,
+  PlayerInfo
 } from '../models/game.models';
+import { StreamHandlerService } from './stream-handler.service';
 
 @Injectable({ providedIn: 'root' })
 export class GameApiService {
   private readonly apiBase = environment.apiBaseUrl;
   private readonly wsBase = environment.wsBaseUrl;
+  private readonly apiPath = environment.apiPath;
+  private readonly streamHandler = inject(StreamHandlerService);
 
   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> {
+    const playerColor = Math.random() > 0.5 ? 'white' : 'black';
+    const playerInfo: PlayerInfo = {
+      id: `player-${Date.now()}`,
+      displayName: 'You'
+    };
+    const botInfo: PlayerInfo = {
+      id: `bot-${difficulty}`,
+      displayName: `Bot (${difficulty})`
+    };
+
+    const payload =
+      playerColor === 'white'
+        ? { white: playerInfo, black: botInfo }
+        : { white: botInfo, black: playerInfo };
+
+    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> {
@@ -34,127 +56,29 @@ 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 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 {
-          const parsed = JSON.parse(raw) as GameStreamEvent;
-          return parsed;
-        } catch {
-          return null;
-        }
-      };
-
-      const emitErrorEvent = (message: string): void => {
-        const errorEvent: ErrorEvent = {
-          type: 'error',
-          error: { code: 'STREAM_ERROR', message }
-        };
-        observer.next(errorEvent);
-      };
-
-      const startNdjsonFallback = async (): Promise<void> => {
-        if (fallbackActive) {
-          return;
-        }
-
-        fallbackActive = true;
-
-        try {
-          const response = await fetch(streamUrl, {
-            headers: { Accept: 'application/x-ndjson' },
-            signal: abortController.signal
-          });
-
-          if (!response.ok || !response.body) {
-            emitErrorEvent(`Unable to open stream: HTTP ${response.status}`);
-            observer.complete();
-            return;
-          }
-
-          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;
-      };
-
-      ws.onmessage = (message) => {
-        const payload = typeof message.data === 'string' ? message.data : '';
-        const event = parseEvent(payload);
-        if (event) {
-          observer.next(event);
-        }
-      };
-
-      ws.onerror = () => {
-        if (!connected) {
-          void startNdjsonFallback();
-        }
-      };
-
-      ws.onclose = () => {
-        if (!connected) {
-          void startNdjsonFallback();
-        } else {
-          observer.complete();
-        }
-      };
-
-      return () => {
-        abortController.abort();
-        ws.close();
-      };
-    });
+    const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/stream`;
+    const fallbackUrl = `${this.apiBase}${this.apiPath}/${gameId}/stream`;
+    return this.streamHandler.createGameStream(wsUrl, fallbackUrl, gameId);
   }
 }

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

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { GameFull, GameState, GameStatus } from '../models/game.models';
+
+export interface GameCompletion {
+  isFinished: boolean;
+  message: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class GameCompletionService {
+  getGameCompletion(game: GameFull | null, state: GameState | null): GameCompletion {
+    if (!game || !state) {
+      return { isFinished: false, message: '' };
+    }
+
+    const status = state.status;
+    const gameEndingStatuses: GameStatus[] = ['checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'];
+
+    if (!gameEndingStatuses.includes(status)) {
+      return { isFinished: false, message: '' };
+    }
+
+    const message = this.buildCompletionMessage(status, state, game);
+    return { isFinished: true, message };
+  }
+
+  private buildCompletionMessage(status: GameStatus, state: GameState, game: GameFull): string {
+    switch (status) {
+      case 'checkmate':
+        const winner = state.winner === 'white' ? game.white.displayName : game.black.displayName;
+        return `Checkmate! ${winner} wins!`;
+      case 'stalemate':
+        return 'Stalemate! The game is a draw.';
+      case 'resign':
+        const resignedPlayer = state.winner === 'white' ? game.black.displayName : game.white.displayName;
+        const resignedWinner = state.winner === 'white' ? game.white.displayName : game.black.displayName;
+        return `${resignedPlayer} resigned. ${resignedWinner} wins!`;
+      case 'draw':
+        return 'Draw! The game ended in a draw.';
+      case 'insufficientMaterial':
+        return 'Insufficient material! The game is a draw.';
+      default:
+        return 'Game ended!';
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+import { Injectable, DestroyRef, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { GameApiService } from './game-api.service';
+import { getErrorMessage } from '../core/http/error-message.util';
+
+@Injectable({ providedIn: 'root' })
+export class GameImportService {
+  private readonly gameApi = inject(GameApiService);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  importFen(
+    fen: string,
+    onSuccess: () => void,
+    onError: (error: string) => void
+  ): void {
+    const trimmedFen = fen.trim();
+    if (!trimmedFen) {
+      onError('Please provide a FEN string.');
+      return;
+    }
+
+    this.gameApi
+      .importFen(trimmedFen)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          onSuccess();
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          onError(getErrorMessage(error, 'FEN import failed.'));
+        }
+      });
+  }
+
+  importPgn(
+    pgn: string,
+    onSuccess: () => void,
+    onError: (error: string) => void
+  ): void {
+    const trimmedPgn = pgn.trim();
+    if (!trimmedPgn) {
+      onError('Please provide a PGN string.');
+      return;
+    }
+
+    this.gameApi
+      .importPgn(trimmedPgn)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          onSuccess();
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          onError(getErrorMessage(error, 'PGN import failed.'));
+        }
+      });
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Injectable, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { interval, startWith, Subscription, switchMap } from 'rxjs';
+import { GameApiService } from './game-api.service';
+import { GameStreamEvent } from '../models/game.models';
+
+@Injectable({ providedIn: 'root' })
+export class GameStreamService {
+  private readonly gameApi = inject(GameApiService);
+  private readonly destroyRef = inject(DestroyRef);
+  private streamSubscription: Subscription | null = null;
+  private pollSubscription: Subscription | null = null;
+
+  startStreaming(
+    gameId: string,
+    onEvent: (event: GameStreamEvent) => void,
+    onStreamError: () => void
+  ): void {
+    this.streamSubscription = this.gameApi
+      .streamGame(gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (event) => onEvent(event),
+        error: () => {
+          onStreamError();
+          this.startPolling(gameId, onEvent);
+        },
+        complete: () => {
+          onStreamError();
+          this.startPolling(gameId, onEvent);
+        }
+      });
+  }
+
+  startPolling(gameId: string, onEvent: (event: GameStreamEvent) => void): void {
+    if (this.pollSubscription) {
+      return;
+    }
+
+    this.pollSubscription = interval(1500)
+      .pipe(
+        startWith(0),
+        switchMap(() => this.gameApi.getGame(gameId)),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (game) => {
+          const event: GameStreamEvent = {
+            type: 'gameFull',
+            game
+          };
+          onEvent(event);
+        }
+      });
+  }
+
+  cleanup(): void {
+    this.streamSubscription?.unsubscribe();
+    this.pollSubscription?.unsubscribe();
+    this.streamSubscription = null;
+    this.pollSubscription = null;
+  }
+}

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

@@ -0,0 +1,122 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { GameStreamEvent, ErrorEvent } from '../models/game.models';
+
+@Injectable({ providedIn: 'root' })
+export class StreamHandlerService {
+  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 = {
+          type: 'error',
+          error: { code: 'STREAM_ERROR', message }
+        };
+        observer.next(errorEvent);
+      };
+
+      const startNdjsonFallback = async (): Promise<void> => {
+        if (fallbackActive) {
+          return;
+        }
+
+        fallbackActive = true;
+        console.log(`[StreamHandler] NDJSON fallback started for ${gameId}, URL:`, fallbackUrl);
+
+        try {
+          const response = await fetch(fallbackUrl, {
+            headers: { Accept: 'application/x-ndjson' },
+            signal: abortController.signal
+          });
+
+          if (!response.ok || !response.body) {
+            console.error(`[StreamHandler] NDJSON fetch failed: HTTP ${response.status}`);
+            emitErrorEvent(`Unable to open stream: HTTP ${response.status}`);
+            observer.complete();
+            return;
+          }
+
+          console.log(`[StreamHandler] NDJSON stream connected for ${gameId}`);
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = '';
+
+          while (true) {
+            const { value, done } = await reader.read();
+            if (done) {
+              break;
+            }
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() ?? '';
+
+            for (const line of lines) {
+              const event = parseEvent(line);
+              if (event) {
+                observer.next(event);
+              }
+            }
+          }
+
+          observer.complete();
+        } catch (error) {
+          if ((error as Error).name !== 'AbortError') {
+            emitErrorEvent((error as Error).message);
+            observer.error(error);
+          }
+        }
+      };
+
+      ws.onopen = () => {
+        connected = true;
+      };
+
+      ws.onmessage = (message) => {
+        const payload = typeof message.data === 'string' ? message.data : '';
+        const event = parseEvent(payload);
+        if (event) {
+          observer.next(event);
+        }
+      };
+
+      ws.onerror = (error) => {
+        console.warn(`[StreamHandler] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
+        if (!connected) {
+          void startNdjsonFallback();
+        }
+      };
+
+      ws.onclose = () => {
+        console.warn(`[StreamHandler] WebSocket closed for ${gameId}, connected=${connected}`);
+        if (!connected) {
+          console.log(`[StreamHandler] Starting NDJSON fallback for ${gameId}`);
+          void startNdjsonFallback();
+        } else {
+          observer.complete();
+        }
+      };
+
+      return () => {
+        abortController.abort();
+        ws.close();
+      };
+    });
+  }
+}

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

@@ -0,0 +1,125 @@
+/* ========================================
+   COLOR VARIABLES - Semantic Naming
+   ======================================== */
+
+/* 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 - Light Mode */
+  --color-secondary-mint: #B9DAD1;
+  --color-secondary-blue: #B9C2DA;
+  --color-secondary-purple: #C19EF5;
+  --color-secondary-lime: #E1EAA9;
+
+  /* Functional Colors - Light Mode */
+  --color-bg-main: #F3C8A0;
+  --color-bg-board: #B9DAD1;
+  --color-bg-card: #E1EAA9;
+  --color-bg-input: #B9DAD1;
+  --color-bg-input-focus: #B9C2DA;
+  --color-bg-button: #C19EF5;
+  --color-bg-button-hover: #ba4ba7;
+
+  --color-text-primary: #5A2C28;
+  --color-text-button-hover: #F3C8A0;
+  --color-border: #5a2843;
+}
+
+/* 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
+     ======================================== */
+
+  /* Header Sizes */
+  --heading-h1: clamp(1.5rem, 4vw, 2rem);
+  --heading-h1-tablet: clamp(1.25rem, 3vw, 1.75rem);
+  --heading-h1-mobile: 1.25rem;
+  --heading-h1-small: 1.1rem;
+
+  --heading-h2: clamp(1.5rem, 4vw, 2rem);
+
+  /* ========================================
+     SPACING SIZES (XS, SM, MD, LG, XL)
+     ======================================== */
+
+  /* Extra Small - Minimal spacing */
+  --size-xs: 0.25rem;
+  --size-xs-padding: 0.4rem;
+  --size-xs-gap: 0.15rem;
+
+  /* Small - Compact spacing */
+  --size-sm: 0.5rem;
+  --size-sm-padding: 0.5rem;
+  --size-sm-gap: 0.35rem;
+
+  /* Medium - Default spacing */
+  --size-md: 0.75rem;
+  --size-md-padding: 0.6rem 0.75rem;
+  --size-md-gap: 0.5rem;
+
+  /* Large - Generous spacing */
+  --size-lg: 1rem;
+  --size-lg-padding: 1rem;
+  --size-lg-gap: 0.75rem;
+
+  /* Extra Large - Maximum spacing */
+  --size-xl: 1.5rem;
+  --size-xl-padding: 1.5rem;
+  --size-xl-gap: 1rem;
+
+  /* ========================================
+     BORDER & RADIUS
+     ======================================== */
+  --border-width: 2px;
+  --border-radius-sm: 8px;
+  --border-radius-md: 10px;
+  --border-radius-lg: 12px;
+
+  /* ========================================
+     FORM ELEMENTS
+     ======================================== */
+  --form-input-padding: 0.6rem 0.75rem;
+  --form-input-border: var(--border-width) solid var(--color-border);
+  --form-input-radius: var(--border-radius-md);
+
+  --button-padding: 0.6rem 1rem;
+  --button-border: var(--border-width) solid var(--color-border);
+  --button-radius: var(--border-radius-sm);
+
+  /* ========================================
+     SHADOWS
+     ======================================== */
+  --shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
+}

src/styles.css

@@ -1,29 +1,315 @@
+@import 'styles-variables.css';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 
-:root {
-  --warm-primary: #BA6D4B;
-  --warm-dark: #5A2C28;
-  --warm-light: #F3C8A0;
-  --cool-mint: #B9DAD1;
-  --cool-blue: #B9C2DA;
-  --cool-purple: #C19EF5;
-  --cool-lime: #E1EAA9;
-}
-
 * {
   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(--warm-light), var(--cool-mint));
-  color: var(--warm-dark);
+  position: relative;
 }
 
 button,
 input {
   font: inherit;
 }
+
+.welcome-shell .import-game-form {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+  display: grid;
+  gap: var(--size-md);
+}
+
+.welcome-shell .import-game-form p {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.welcome-shell .import-mode-group {
+  display: flex;
+  gap: var(--size-lg);
+  flex-wrap: wrap;
+}
+
+.welcome-shell .import-mode-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.welcome-shell .import-mode-option input {
+  accent-color: var(--color-primary);
+}
+
+.welcome-shell .import-game-text {
+  width: 100%;
+  resize: vertical;
+  min-height: 110px;
+  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);
+}
+
+.welcome-shell .import-game-text:focus {
+  outline: none;
+  border-color: var(--color-secondary-mint);
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.2);
+}
+
+.welcome-shell .theme-toggle-container {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 100;
+}
+
+.welcome-shell .switch {
+  display: inline-block;
+  position: relative;
+}
+
+.welcome-shell .switch__input {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+.welcome-shell .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);
+}
+
+.welcome-shell .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);
+}
+
+.welcome-shell .switch__indicator::before,
+.welcome-shell .switch__indicator::after {
+  position: absolute;
+  content: '';
+  display: block;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+  transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
+}
+
+.welcome-shell .switch__indicator::before {
+  top: 7px;
+  left: 7px;
+  width: 9px;
+  height: 9px;
+  opacity: 0.6;
+}
+
+.welcome-shell .switch__indicator::after {
+  bottom: 8px;
+  right: 6px;
+  width: 14px;
+  height: 14px;
+  opacity: 0.8;
+}
+
+.welcome-shell .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);
+}
+
+.welcome-shell .switch__decoration::before,
+.welcome-shell .switch__decoration::after {
+  position: absolute;
+  display: block;
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+}
+
+.welcome-shell .switch__decoration::before {
+  top: -20px;
+  left: 10px;
+  opacity: 1;
+  animation: twinkle-stars 0.6s infinite;
+}
+
+.welcome-shell .switch__decoration::after {
+  top: -7px;
+  left: 30px;
+  animation: twinkle-stars 0.6s infinite -0.2s;
+}
+
+@keyframes twinkle-stars {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+.welcome-shell .switch__input:checked + .switch__label {
+  background-color: #8FB5F5;
+  border-color: #347CF8;
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__indicator {
+  background-color: #ECD21F;
+  box-shadow: none;
+  transform: translate(-50%, -50%) translateX(72%);
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__indicator::before,
+.welcome-shell .switch__input:checked + .switch__label .switch__indicator::after {
+  display: none;
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration {
+  top: 50%;
+  transform: translate(0%, -50%);
+  animation: cloud 8s linear infinite;
+  width: 20px;
+  height: 20px;
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration::before {
+  width: 10px;
+  height: 10px;
+  top: auto;
+  bottom: 0;
+  left: -8px;
+  animation: none;
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration::after {
+  width: 15px;
+  height: 15px;
+  top: auto;
+  bottom: 0;
+  left: 16px;
+  animation: none;
+}
+
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration,
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration::before,
+.welcome-shell .switch__input:checked + .switch__label .switch__decoration::after {
+  border-radius: 9999px 9999px 0 0;
+}
+
+.welcome-shell .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%);
+  }
+}
+
+@media (max-width: 768px) {
+  .welcome-shell .theme-toggle-container {
+    top: 10px;
+    right: 10px;
+  }
+
+  .welcome-shell .switch__label {
+    width: 100px;
+    height: 50px;
+  }
+
+  .welcome-shell .switch__indicator {
+    width: 33px;
+    height: 33px;
+  }
+}