From 43b7f5ccd320a8a322c40186ea4eade3ec194f15 Mon Sep 17 00:00:00 2001
From: Shahd Lala <shosho996@blackhole.local>
Date: Fri, 15 May 2026 02:15:10 +0200
Subject: [PATCH] fix: cleanup

---
 src/app/pages/welcome/Game (1).html | 1065 ---------------------------
 1 file changed, 1065 deletions(-)
 delete mode 100644 src/app/pages/welcome/Game (1).html
diff --git a/src/app/pages/welcome/Game (1).html b/src/app/pages/welcome/Game (1).html
deleted file mode 100644
index e9ba7a5..0000000
--- a/src/app/pages/welcome/Game (1).html	
+++ /dev/null
@@ -1,1065 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>NowChess — Game</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-
-<style>
-/* ============================================================
-   TOKENS
-============================================================ */
-:root {
-  --neon: #ff45c8;
-  --neon-soft: rgba(255, 69, 200, 0.55);
-  --neon-glow: 0 0 6px var(--neon);
-  --bg: #06060d;
-  --bg-1: #0c0a1c;
-  --bg-2: #14112a;
-  --text: #fff;
-  --text-muted: rgba(255, 255, 255, 0.65);
-  --text-dim: rgba(255, 255, 255, 0.45);
-  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.15);
-  --surface: rgba(20, 17, 42, 0.6);
-  --surface-solid: rgba(10, 8, 22, 0.95);
-  --warning: #ffb13a;
-  --danger: #ff7a7a;
-  --success: #5ee5a1;
-  --light-sq: #f0d9b5;
-  --dark-sq: #b58863;
-  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
-}
-
-* { box-sizing: border-box; }
-html, body {
-  margin: 0; padding: 0;
-  background: var(--bg);
-  font-family: var(--sans);
-  color: var(--text);
-  min-height: 100vh;
-}
-button { font-family: inherit; }
-
-/* faint ambient skyline color spill, far behind everything */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background:
-    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.12), transparent 60%),
-    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(74, 41, 98, 0.25), transparent 60%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* ============================================================
-   NAV (carried over from welcome — minimal)
-============================================================ */
-.nc-nav {
-  position: sticky; top: 0;
-  height: 56px;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  background: linear-gradient(180deg, rgba(8,5,20,0.92) 0%, rgba(8,5,20,0.75) 100%);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid var(--border);
-}
-.nc-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
-.nc-logo-mark {
-  width: 22px; height: 22px;
-  background: var(--neon);
-  display: flex; align-items: center; justify-content: center;
-  font-weight: 800; color: #1a0014; font-size: 13px;
-}
-.nc-logo-text { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
-
-.nc-links { flex: 1; display: flex; justify-content: center; gap: 4px; }
-.nc-link {
-  background: transparent; border: none;
-  color: var(--text-muted);
-  padding: 8px 14px; font-size: 12px;
-  letter-spacing: 0.08em; font-weight: 500;
-  cursor: pointer;
-  display: inline-flex; align-items: center; gap: 6px;
-  position: relative;
-  transition: color 0.15s;
-}
-.nc-link:hover, .nc-link.is-active { color: var(--text); }
-.nc-link::after {
-  content: ""; position: absolute;
-  bottom: 2px; left: 14px; right: 14px;
-  height: 1px; background: var(--neon);
-  box-shadow: var(--neon-glow);
-  opacity: 0; transition: opacity 0.15s;
-}
-.nc-link:hover::after, .nc-link.is-active::after { opacity: 1; }
-
-.nc-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
-.nc-bell, .nc-profile {
-  height: 36px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: rgba(255,255,255,0.85);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.nc-bell {
-  width: 36px;
-  display: flex; align-items: center; justify-content: center;
-  position: relative;
-}
-.nc-bell:hover { background: rgba(255, 69, 200, 0.12); }
-.nc-badge {
-  position: absolute; top: 6px; right: 6px;
-  min-width: 14px; height: 14px;
-  border-radius: 7px;
-  background: var(--neon); color: #1a0014;
-  font-size: 9px; font-weight: 700;
-  display: flex; align-items: center; justify-content: center;
-  padding: 0 4px;
-  box-shadow: 0 0 6px rgba(255,69,200,0.6);
-}
-.nc-profile {
-  display: flex; align-items: center; gap: 8px;
-  padding: 4px 10px 4px 4px;
-}
-.nc-profile:hover { background: rgba(255, 69, 200, 0.12); }
-.nc-profile-name { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
-.nc-avatar {
-  border-radius: 50%;
-  background: linear-gradient(135deg, #ff45c8 0%, #7a2fd6 100%);
-  display: flex; align-items: center; justify-content: center;
-  color: #fff; font-weight: 700;
-  flex-shrink: 0;
-}
-.nc-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
-
-/* ============================================================
-   PAGE LAYOUT
-============================================================ */
-.page {
-  position: relative;
-  z-index: 1;
-  max-width: 1320px;
-  margin: 0 auto;
-  padding: 28px 32px 60px;
-}
-
-.crumb {
-  display: flex; align-items: center; gap: 10px;
-  margin-bottom: 18px;
-  font-family: var(--mono);
-  font-size: 11px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-.crumb a {
-  color: var(--text-dim);
-  text-decoration: none;
-  transition: color 0.15s;
-  display: inline-flex; align-items: center; gap: 6px;
-}
-.crumb a:hover { color: var(--neon); }
-.crumb .sep { color: var(--text-dim); opacity: 0.5; }
-.crumb .current { color: var(--text-muted); }
-
-/* Header strip */
-.game-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 28px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border);
-}
-.game-title {
-  display: flex; flex-direction: column; gap: 8px;
-}
-.game-title h1 {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  display: inline-flex; align-items: center; gap: 14px;
-}
-.tag-rated {
-  font-family: var(--mono);
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  color: var(--neon);
-  border: 1px solid var(--neon-soft);
-  padding: 4px 10px;
-  text-transform: uppercase;
-  text-shadow: 0 0 8px rgba(255, 69, 200, 0.4);
-}
-.game-meta-strip {
-  display: flex; align-items: center;
-  gap: 14px;
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--text-dim);
-  letter-spacing: 0.06em;
-}
-.game-meta-strip .dot {
-  width: 3px; height: 3px;
-  background: var(--text-dim);
-  border-radius: 50%;
-}
-.game-id {
-  display: inline-flex; align-items: center; gap: 6px;
-  color: var(--text-muted);
-}
-.game-id b { color: #fff; font-weight: 500; }
-.copy-btn {
-  background: transparent; border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 2px 4px;
-  display: inline-flex;
-  transition: color 0.15s;
-}
-.copy-btn:hover { color: var(--neon); }
-
-/* Right side of header */
-.header-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.btn {
-  font-family: var(--sans);
-  font-size: 11px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  font-weight: 600;
-  padding: 9px 14px;
-  cursor: pointer;
-  border: 1px solid var(--border-strong);
-  background: rgba(255,255,255,0.03);
-  color: var(--text);
-  display: inline-flex; align-items: center; gap: 6px;
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-}
-.btn:hover { background: rgba(255,255,255,0.07); border-color: var(--text-muted); }
-.btn.danger { color: var(--danger); border-color: rgba(255, 122, 122, 0.3); }
-.btn.danger:hover { background: rgba(255, 122, 122, 0.08); border-color: var(--danger); }
-.btn.primary {
-  background: var(--neon);
-  color: #1a0014;
-  border-color: var(--neon);
-  box-shadow: 0 0 14px rgba(255, 69, 200, 0.35);
-  font-weight: 700;
-}
-.btn.primary:hover { box-shadow: 0 0 20px rgba(255, 69, 200, 0.55); }
-.btn-ghost {
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  padding: 8px 12px;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  cursor: pointer;
-  display: inline-flex; align-items: center; gap: 6px;
-}
-.btn-ghost:hover { color: var(--neon); }
-
-/* ============================================================
-   MAIN GRID
-============================================================ */
-.layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 340px;
-  gap: 28px;
-  align-items: start;
-}
-
-@media (max-width: 1100px) {
-  .layout { grid-template-columns: 1fr; }
-}
-
-/* ============================================================
-   BOARD COLUMN
-============================================================ */
-.board-col {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 520px;
-  width: 100%;
-  margin: 0 auto;
-  position: relative;
-}
-
-/* Player cards (above + below board) */
-.player {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px 16px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  position: relative;
-  z-index: 1;
-  transition: border-color 0.2s;
-}
-.player.is-turn {
-  border-color: var(--neon-soft);
-  box-shadow: 0 0 0 1px rgba(255, 69, 200, 0.25), 0 0 20px rgba(255, 69, 200, 0.12);
-}
-.player-avatar {
-  width: 42px; height: 42px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 17px; font-weight: 700;
-  color: #fff;
-}
-.player.black .player-avatar { background: linear-gradient(135deg, #2a2a40 0%, #0a0a14 100%); border: 1px solid var(--border-strong); }
-.player.white .player-avatar { background: linear-gradient(135deg, #ff45c8 0%, #7a2fd6 100%); }
-
-.player-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
-.player-line {
-  display: flex; align-items: center; gap: 8px;
-  font-size: 14px; font-weight: 600;
-}
-.player-rating {
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--text-dim);
-  font-weight: 500;
-}
-.captured {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 16px;
-  font-size: 13px;
-  line-height: 1;
-  color: var(--text-muted);
-  font-family: var(--mono);
-}
-.captured .pc { opacity: 0.85; }
-.captured .adv {
-  font-size: 10px;
-  color: var(--success);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.clock {
-  font-family: var(--mono);
-  font-size: 22px;
-  font-weight: 600;
-  padding: 8px 14px;
-  min-width: 92px;
-  text-align: center;
-  background: rgba(0,0,0,0.4);
-  border: 1px solid var(--border);
-  color: var(--text);
-  letter-spacing: 0.02em;
-  transition: all 0.2s;
-}
-.player.is-turn .clock {
-  color: var(--neon);
-  border-color: var(--neon-soft);
-  background: rgba(255, 69, 200, 0.08);
-  text-shadow: 0 0 8px rgba(255, 69, 200, 0.4);
-}
-.clock.low { color: var(--warning); border-color: rgba(255, 177, 58, 0.4); }
-
-/* Status above board */
-.status-strip {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  background: rgba(255, 69, 200, 0.06);
-  border: 1px solid rgba(255, 69, 200, 0.18);
-  font-size: 12px;
-}
-.status-left { display: inline-flex; align-items: center; gap: 10px; }
-.status-pulse {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--neon);
-  box-shadow: 0 0 8px var(--neon);
-  animation: pulse 1.8s ease-in-out infinite;
-}
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.4; transform: scale(0.75); }
-}
-.status-text { font-weight: 500; letter-spacing: 0.02em; }
-.status-text b { color: var(--neon); font-weight: 600; }
-
-/* Board */
-.board-wrap {
-  position: relative;
-  z-index: 1;
-  padding: 10px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  backdrop-filter: blur(8px);
-  max-width: 520px;
-  width: 100%;
-  margin: 0 auto;
-}
-.board {
-  width: 100%;
-  aspect-ratio: 1;
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-template-rows: repeat(8, 1fr);
-  border: 1px solid rgba(0,0,0,0.4);
-  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255, 69, 200, 0.08);
-}
-.sq {
-  display: flex; align-items: center; justify-content: center;
-  font-size: clamp(28px, 5vw, 56px);
-  line-height: 1;
-  user-select: none;
-  position: relative;
-  cursor: pointer;
-}
-.sq.light { background: var(--light-sq); }
-.sq.dark { background: var(--dark-sq); }
-.sq .pc { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
-.sq.white-pc { color: #fff; }
-.sq.black-pc { color: #1a1a1a; }
-.sq.highlight::after {
-  content: ""; position: absolute; inset: 0;
-  background: rgba(255, 69, 200, 0.35);
-  pointer-events: none;
-}
-.sq.last-move::before {
-  content: ""; position: absolute; inset: 0;
-  background: rgba(255, 230, 80, 0.28);
-  pointer-events: none;
-}
-
-/* Board action bar */
-.board-actions {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  gap: 6px;
-  padding: 8px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-}
-.board-actions .btn {
-  flex: 1;
-  justify-content: center;
-  padding: 8px 10px;
-  font-size: 10px;
-  letter-spacing: 0.16em;
-}
-
-/* ============================================================
-   SIDE COLUMN
-============================================================ */
-.side {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-.card-head {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-}
-.card-title {
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-.card-body { padding: 14px 16px; }
-
-/* Move history */
-.moves {
-  display: grid;
-  grid-template-columns: 38px 1fr 1fr;
-  font-family: var(--mono);
-  font-size: 12px;
-  max-height: 260px;
-  overflow-y: auto;
-}
-.moves > div {
-  padding: 6px 10px;
-}
-.moves .mv-num {
-  color: var(--text-dim);
-  text-align: right;
-  padding-right: 12px;
-  border-right: 1px solid var(--border);
-}
-.moves .mv {
-  cursor: pointer;
-  color: var(--text);
-  transition: background 0.1s, color 0.1s;
-}
-.moves .mv:hover { background: rgba(255, 69, 200, 0.08); color: var(--neon); }
-.moves .mv.current {
-  background: rgba(255, 69, 200, 0.12);
-  color: var(--neon);
-}
-.moves .mv.empty { color: var(--text-dim); }
-
-.moves-foot {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 12px;
-  border-top: 1px solid var(--border);
-}
-.moves-nav { display: flex; gap: 2px; }
-.icon-btn {
-  background: transparent; border: 1px solid transparent;
-  color: var(--text-muted);
-  width: 26px; height: 26px;
-  display: inline-flex; align-items: center; justify-content: center;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.icon-btn:hover { color: var(--neon); border-color: var(--border); }
-
-/* Compact actions */
-.action-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
-.action-grid .btn { width: 100%; justify-content: center; }
-.action-row { display: flex; gap: 6px; margin-top: 6px; }
-.action-row .btn { flex: 1; justify-content: center; }
-
-/* Game tools (collapsible) */
-.disclose summary {
-  list-style: none;
-  cursor: pointer;
-  padding: 14px 16px;
-  display: flex; align-items: center; justify-content: space-between;
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-.disclose summary::-webkit-details-marker { display: none; }
-.disclose summary .chev {
-  transition: transform 0.2s;
-  color: var(--text-dim);
-}
-.disclose[open] summary .chev { transform: rotate(180deg); }
-.disclose[open] summary { border-bottom: 1px solid var(--border); }
-
-.tool-section + .tool-section { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
-.tool-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  letter-spacing: 0.06em;
-  margin-bottom: 8px;
-}
-.seg {
-  display: flex;
-  border: 1px solid var(--border);
-  padding: 2px;
-  background: rgba(0,0,0,0.3);
-}
-.seg-btn {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  padding: 7px 10px;
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.seg-btn.active {
-  background: var(--neon);
-  color: #1a0014;
-  font-weight: 700;
-}
-
-.export-out {
-  margin-top: 10px;
-  width: 100%;
-  background: rgba(0,0,0,0.4);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 11px;
-  padding: 10px;
-  resize: vertical;
-  min-height: 70px;
-  line-height: 1.5;
-}
-.export-out:focus { outline: none; border-color: var(--neon-soft); }
-.export-row { display: flex; gap: 6px; margin-top: 8px; }
-.export-row .btn { flex: 1; justify-content: center; }
-
-/* UCI input (small, secondary) */
-.uci-row {
-  display: flex; gap: 6px;
-}
-.uci-row input {
-  flex: 1;
-  background: rgba(0,0,0,0.4);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 13px;
-  padding: 9px 12px;
-  letter-spacing: 0.04em;
-}
-.uci-row input:focus { outline: none; border-color: var(--neon-soft); }
-.uci-row input::placeholder { color: var(--text-dim); }
-.uci-row .btn { flex: 0 0 auto; padding: 9px 14px; }
-.uci-hint {
-  font-size: 11px;
-  color: var(--text-dim);
-  margin-top: 8px;
-  letter-spacing: 0.02em;
-}
-
-/* Scrollbars */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255, 69, 200, 0.3); }
-
-/* Toast */
-.toast {
-  position: fixed;
-  bottom: 24px; left: 50%;
-  transform: translateX(-50%) translateY(20px);
-  background: var(--surface-solid);
-  border: 1px solid var(--neon-soft);
-  color: var(--text);
-  padding: 10px 18px;
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  z-index: 500;
-  opacity: 0;
-  transition: opacity 0.2s, transform 0.2s;
-  pointer-events: none;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-}
-.toast.show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-</style>
-</head>
-<body>
-
-<!-- ============================================================
-     NAV (same minimal nav as welcome page)
-============================================================ -->
-<nav class="nc-nav">
-  <div class="nc-logo">
-    <div class="nc-logo-mark">♞</div>
-    <div class="nc-logo-text">NowChess</div>
-  </div>
-  <div class="nc-links">
-    <button class="nc-link is-active">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
-      Play
-    </button>
-    <button class="nc-link">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-      Watch
-    </button>
-    <button class="nc-link">Leaderboard</button>
-  </div>
-  <div class="nc-right">
-    <button class="nc-bell" aria-label="Notifications">
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
-        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
-      </svg>
-      <span class="nc-badge">3</span>
-    </button>
-    <button class="nc-profile">
-      <div class="nc-avatar nc-avatar-sm">S</div>
-      <span class="nc-profile-name">Sha</span>
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5;"><polyline points="6 9 12 15 18 9"/></svg>
-    </button>
-  </div>
-</nav>
-
-<!-- ============================================================
-     PAGE
-============================================================ -->
-<main class="page">
-
-  <!-- Breadcrumb -->
-  <nav class="crumb" aria-label="Breadcrumb">
-    <a href="#">
-      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
-      Back to lobby
-    </a>
-    <span class="sep">/</span>
-    <span class="current">1 vs 1 Game</span>
-  </nav>
-
-  <!-- Header -->
-  <header class="game-header">
-    <div class="game-title">
-      <h1>
-        Rapid · 10|0
-        <span class="tag-rated">Rated</span>
-      </h1>
-      <div class="game-meta-strip">
-        <span class="game-id">
-          ID <b>bDc1rDUF</b>
-          <button class="copy-btn" data-copy="bDc1rDUF" title="Copy game ID">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-          </button>
-        </span>
-        <span class="dot"></span>
-        <span>Move 3</span>
-        <span class="dot"></span>
-        <span>Started 4m ago</span>
-      </div>
-    </div>
-    <div class="header-actions">
-      <button class="btn btn-ghost" data-flip>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
-        Flip
-      </button>
-      <button class="btn">Share</button>
-    </div>
-  </header>
-
-  <!-- Grid -->
-  <div class="layout">
-
-    <!-- BOARD COLUMN -->
-    <div class="board-col">
-
-      <!-- Opponent (black, top) -->
-      <div class="player black">
-        <div class="player-avatar">M</div>
-        <div class="player-info">
-          <div class="player-line">
-            magnus_42
-            <span class="player-rating">1840</span>
-          </div>
-          <div class="captured">
-            <!-- captured white pieces by black -->
-            <span class="pc">♙</span>
-          </div>
-        </div>
-        <div class="clock" data-clock="black">09:42</div>
-      </div>
-
-      <!-- Status -->
-      <div class="status-strip">
-        <div class="status-left">
-          <span class="status-pulse"></span>
-          <span class="status-text">Your turn — <b>magnus_42 played h2h4</b></span>
-        </div>
-        <span style="font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em;">YOU PLAY WHITE</span>
-      </div>
-
-      <!-- Board -->
-      <div class="board-wrap">
-        <div class="board" id="board"></div>
-      </div>
-
-      <!-- You (white, bottom) -->
-      <div class="player white is-turn">
-        <div class="player-avatar">S</div>
-        <div class="player-info">
-          <div class="player-line">
-            Sha (you)
-            <span class="player-rating">1842</span>
-          </div>
-          <div class="captured">
-            <span class="pc">♟</span>
-          </div>
-        </div>
-        <div class="clock" data-clock="white">09:38</div>
-      </div>
-
-      <!-- Board actions -->
-      <div class="board-actions">
-        <button class="btn">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 0 15.5 -6"/><path d="M3 7a9 9 0 0 1 15.5 6"/></svg>
-          Takeback
-        </button>
-        <button class="btn">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><polyline points="12 5 19 12 12 19"/><polyline points="12 19 5 12 12 5"/></svg>
-          Offer Draw
-        </button>
-        <button class="btn danger">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 16"/><path d="M4 20l16 -16"/></svg>
-          Resign
-        </button>
-      </div>
-
-    </div>
-
-    <!-- SIDE COLUMN -->
-    <aside class="side">
-
-      <!-- Move history -->
-      <div class="card">
-        <div class="card-head">
-          <div class="card-title">Move History</div>
-          <span style="font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em;">3 plies</span>
-        </div>
-        <div class="moves" id="moves">
-          <div class="mv-num">1</div>
-          <div class="mv">e2e4</div>
-          <div class="mv">g7g5</div>
-          <div class="mv-num">2</div>
-          <div class="mv current">h2h4</div>
-          <div class="mv empty">…</div>
-        </div>
-        <div class="moves-foot">
-          <div class="moves-nav">
-            <button class="icon-btn" title="First"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg></button>
-            <button class="icon-btn" title="Prev"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg></button>
-            <button class="icon-btn" title="Next"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg></button>
-            <button class="icon-btn" title="Last"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg></button>
-          </div>
-          <span style="font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em;">LIVE</span>
-        </div>
-      </div>
-
-      <!-- Send move (UCI) — kept but compacted -->
-      <div class="card">
-        <div class="card-head"><div class="card-title">Play move</div></div>
-        <div class="card-body">
-          <div class="uci-row">
-            <input id="uci" type="text" placeholder="e.g. e2e4" autocomplete="off" />
-            <button class="btn primary" data-send>Send</button>
-          </div>
-          <div class="uci-hint">Tip: click a piece on the board to see legal targets.</div>
-        </div>
-      </div>
-
-      <!-- Game tools (collapsed by default) -->
-      <details class="card disclose">
-        <summary>
-          Game Tools
-          <span class="chev">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
-          </span>
-        </summary>
-        <div class="card-body">
-
-          <div class="tool-section">
-            <div class="tool-label">Board design</div>
-            <div class="seg" role="tablist">
-              <button class="seg-btn active" data-board="arabian">Arabian</button>
-              <button class="seg-btn" data-board="classic">Classic</button>
-            </div>
-          </div>
-
-          <div class="tool-section">
-            <div class="tool-label">Export position</div>
-            <div class="seg" role="tablist">
-              <button class="seg-btn active" data-export="fen">FEN</button>
-              <button class="seg-btn" data-export="pgn">PGN</button>
-            </div>
-            <textarea class="export-out" id="exportOut" readonly>rnbqkbnr/pppppp1p/8/6p1/4P2P/8/PPPP1PP1/RNBQKBNR b KQkq h3 0 2</textarea>
-            <div class="export-row">
-              <button class="btn" data-copy-export>
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                Copy
-              </button>
-              <button class="btn">Download</button>
-            </div>
-          </div>
-
-        </div>
-      </details>
-
-    </aside>
-
-  </div>
-</main>
-
-<!-- Toast -->
-<div class="toast" id="toast">Copied</div>
-
-<script>
-/* ============================================================
-   BOARD RENDER (static demo position matching the screenshot)
-============================================================ */
-const PIECES = {
-  K: '♔', Q: '♕', R: '♖', B: '♗', N: '♘', P: '♙',
-  k: '♚', q: '♛', r: '♜', b: '♝', n: '♞', p: '♟',
-};
-// FEN-ish (rank 8 → rank 1) from screenshot: black pieces top, white below, pawn h4 (white) advanced
-// Approx: rnbqkbnr / pppppp1p / 8 / 6p1 / 4P2P / 8 / PPPP1PP1 / RNBQKBNR
-const FEN = 'rnbqkbnr/pppppp1p/8/6p1/4P2P/8/PPPP1PP1/RNBQKBNR';
-const LAST_MOVE = ['h2', 'h4']; // highlight from/to
-
-function fileRankToCoord(file, rank) {
-  return 'abcdefgh'[file] + (8 - rank);
-}
-
-function renderBoard() {
-  const board = document.getElementById('board');
-  board.innerHTML = '';
-  const rows = FEN.split('/');
-  for (let r = 0; r < 8; r++) {
-    let f = 0;
-    for (const ch of rows[r]) {
-      if (/\d/.test(ch)) { f += parseInt(ch, 10); continue; }
-      const file = f;
-      const coord = fileRankToCoord(file, r);
-      // Emit empty sqs up to current file
-      while (board.children.length < r * 8 + file) {
-        const idx = board.children.length;
-        const er = Math.floor(idx / 8), ef = idx % 8;
-        board.appendChild(makeSquare(er, ef, fileRankToCoord(ef, er), null));
-      }
-      board.appendChild(makeSquare(r, file, coord, ch));
-      f++;
-    }
-    // Fill remaining empties on row
-    while (board.children.length < (r + 1) * 8) {
-      const idx = board.children.length;
-      const er = Math.floor(idx / 8), ef = idx % 8;
-      board.appendChild(makeSquare(er, ef, fileRankToCoord(ef, er), null));
-    }
-  }
-}
-
-function makeSquare(row, file, coord, piece) {
-  const el = document.createElement('div');
-  const isLight = (row + file) % 2 === 0;
-  el.className = 'sq ' + (isLight ? 'light' : 'dark');
-  el.dataset.sq = coord;
-  if (LAST_MOVE.includes(coord)) el.classList.add('last-move');
-  if (piece) {
-    const isWhite = piece === piece.toUpperCase();
-    el.classList.add(isWhite ? 'white-pc' : 'black-pc');
-    const span = document.createElement('span');
-    span.className = 'pc';
-    span.textContent = PIECES[piece];
-    el.appendChild(span);
-  }
-  el.addEventListener('click', () => {
-    document.querySelectorAll('.sq.highlight').forEach(s => s.classList.remove('highlight'));
-    if (piece) el.classList.add('highlight');
-  });
-  return el;
-}
-
-renderBoard();
-
-/* ============================================================
-   COPY, TOAST
-============================================================ */
-const toast = document.getElementById('toast');
-let toastT;
-function showToast(msg) {
-  toast.textContent = msg;
-  toast.classList.add('show');
-  clearTimeout(toastT);
-  toastT = setTimeout(() => toast.classList.remove('show'), 1600);
-}
-
-document.querySelectorAll('[data-copy]').forEach(btn => {
-  btn.addEventListener('click', () => {
-    navigator.clipboard?.writeText(btn.dataset.copy);
-    showToast('Game ID copied');
-  });
-});
-
-document.querySelector('[data-copy-export]')?.addEventListener('click', () => {
-  const out = document.getElementById('exportOut');
-  out.select();
-  navigator.clipboard?.writeText(out.value);
-  showToast('Position copied');
-});
-
-/* ============================================================
-   SEGMENTED CONTROLS
-============================================================ */
-function wireSeg(attr, onChange) {
-  document.querySelectorAll(`[${attr}]`).forEach(btn => {
-    btn.addEventListener('click', () => {
-      const group = btn.parentElement;
-      group.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      onChange?.(btn.getAttribute(attr));
-    });
-  });
-}
-wireSeg('data-board');
-wireSeg('data-export', (kind) => {
-  const out = document.getElementById('exportOut');
-  if (kind === 'fen') {
-    out.value = 'rnbqkbnr/pppppp1p/8/6p1/4P2P/8/PPPP1PP1/RNBQKBNR b KQkq h3 0 2';
-  } else {
-    out.value = '1. e4 g5 2. h4';
-  }
-});
-
-/* ============================================================
-   FLIP BOARD
-============================================================ */
-let flipped = false;
-document.querySelector('[data-flip]')?.addEventListener('click', () => {
-  flipped = !flipped;
-  const board = document.getElementById('board');
-  board.style.transform = flipped ? 'rotate(180deg)' : '';
-  board.querySelectorAll('.pc').forEach(p => p.style.transform = flipped ? 'rotate(180deg)' : '');
-});
-
-/* ============================================================
-   UCI SEND (no-op demo)
-============================================================ */
-document.querySelector('[data-send]')?.addEventListener('click', () => {
-  const v = document.getElementById('uci').value.trim();
-  if (!v) return;
-  showToast(`Sent: ${v}`);
-  document.getElementById('uci').value = '';
-});
-document.getElementById('uci')?.addEventListener('keydown', e => {
-  if (e.key === 'Enter') document.querySelector('[data-send]').click();
-});
-
-/* ============================================================
-   FAKE CLOCK TICK (visual only)
-============================================================ */
-let wSecs = 9 * 60 + 38;
-const clockEl = document.querySelector('[data-clock="white"]');
-function fmt(s) { return `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`; }
-setInterval(() => {
-  wSecs = Math.max(0, wSecs - 1);
-  clockEl.textContent = fmt(wSecs);
-  if (wSecs < 60) clockEl.classList.add('low');
-}, 1000);
-</script>
-
-</body>
-</html>
