From 2dfea24f42cc82224b2cef97e338847a020e8cd5 Mon Sep 17 00:00:00 2001
From: admin01 <cuken107@proton.me>
Date: Sat, 22 Aug 2026 18:21:04 +0000
Subject: [PATCH] Update chess/public/styles.css

---
 chess/public/styles.css | 1875 +++++++++++++++++++++++++++++++--------
 1 file changed, 1512 insertions(+), 363 deletions(-)

diff --git a/chess/public/styles.css b/chess/public/styles.css
index 4b6392b..a852bb4 100644
--- a/chess/public/styles.css
+++ b/chess/public/styles.css
@@ -1,476 +1,1625 @@
+/* =========================================================
+   ROOT
+========================================================= */
+
 :root {
-  --bg-body: #0f172a;
-  --bg-panel: rgba(30, 41, 59, 0.55);
-  --bg-input: rgba(15, 23, 42, 0.6);
-  --border-subtle: rgba(255, 255, 255, 0.12);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08);
-  
-  --border-focus: #10b981;
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  
-  --primary: #10b981;
-  --primary-hover: #059669;
-  
-  --secondary: rgba(255, 255, 255, 0.1);
-  --secondary-hover: rgba(255, 255, 255, 0.2);
-  
-  --board-light: #ebecd0;
-  --board-dark: #739552;
-  
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
+    --bg-body: #171411;
+
+    --bg-panel: rgba(35, 31, 27, 0.72);
+    --bg-panel-strong: rgba(28, 25, 22, 0.88);
+    --bg-input: rgba(15, 13, 11, 0.72);
+
+    --border-subtle: rgba(255, 255, 255, 0.12);
+
+    --text-main: #f7f2e9;
+    --text-muted: #b9b0a4;
+
+    --primary: #c8955a;
+    --primary-hover: #d5a66d;
+
+    --secondary: rgba(255, 255, 255, 0.08);
+    --secondary-hover: rgba(255, 255, 255, 0.14);
+
+    /*
+     * Шахматные клетки.
+     *
+     * Они теперь задаются напрямую
+     * классами .light и .dark.
+     */
+    --board-light: #f0d9b5;
+    --board-dark: #b58863;
+
+    --board-border: #211c17;
+
+    --piece-white: #fffaf0;
+    --piece-black: #17130f;
+
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+
+    --glass-shadow:
+        0 12px 40px rgba(0, 0, 0, 0.34),
+        inset 0 1px 1px rgba(255, 255, 255, 0.08);
 }
 
+
+/* =========================================================
+   RESET
+========================================================= */
+
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
+
+html {
+    min-height: 100%;
+}
+
+
 body {
-  background-color: var(--bg-body);
-  /* Замените на свою картинку-фон */
-  background-image: url('https://images.unsplash.com/photo-1529699211952-734e80c4d42b?q=80&w=2000&auto=format&fit=crop');
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
-  color: var(--text-main);
-  font-family: 'Inter', sans-serif;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  padding: 20px;
-  min-height: 100vh;
+    min-height: 100vh;
+
+    background-color: var(--bg-body);
+
+    background-image:
+        linear-gradient(
+            rgba(20, 16, 12, 0.48),
+            rgba(20, 16, 12, 0.58)
+        ),
+        url("https://images.unsplash.com/photo-1529699211952-734e80c4d42b?q=80&w=2000&auto=format&fit=crop");
+
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+
+    color: var(--text-main);
+
+    font-family:
+        "Inter",
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    line-height: 1.5;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    padding: 20px;
 }
 
-.hidden { display: none !important; }
 
-.page-shell {
-  max-width: 1280px;
-  margin: 0 auto;
+button,
+input,
+select {
+    font: inherit;
 }
 
-.main-header {
-  margin-bottom: 24px;
-  text-align: left;
-}
-
-.main-header h1 {
-  font-size: 28px;
-  font-weight: 800;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
-}
-
-.chess-icon {
-  color: var(--primary);
-  font-size: 32px;
-}
-
-.app-grid {
-  display: grid;
-  grid-template-columns: 1fr 360px;
-  gap: 24px;
-  align-items: start;
-}
-
-.panel {
-  background: var(--bg-panel);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  box-shadow: var(--glass-shadow);
-}
-
-.panel-head { margin-bottom: 20px; }
-
-.label {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 700;
-  color: var(--text-muted);
-  margin-bottom: 4px;
-}
-
-h3 { font-size: 18px; font-weight: 600; color: #fff; }
-h2 { font-size: 20px; font-weight: 700; }
 
 button {
-  font-family: inherit;
-  cursor: pointer;
-  border: none;
-  border-radius: var(--radius-sm);
-  font-weight: 600;
-  font-size: 14px;
-  transition: all 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 16px;
-  backdrop-filter: blur(4px);
+    -webkit-tap-highlight-color: transparent;
 }
 
+
+.hidden {
+    display: none !important;
+}
+
+
+/* =========================================================
+   PAGE
+========================================================= */
+
+.page-shell {
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+}
+
+
+.main-header {
+    margin-bottom: 24px;
+}
+
+
+.main-header h1 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    font-size: 28px;
+    font-weight: 800;
+
+    color: #fff;
+
+    text-shadow:
+        0 2px 12px rgba(0, 0, 0, 0.55);
+}
+
+
+.chess-icon {
+    color: var(--primary);
+    font-size: 34px;
+    line-height: 1;
+}
+
+
+/* =========================================================
+   LAYOUT
+========================================================= */
+
+.app-grid {
+    display: grid;
+
+    grid-template-columns:
+        minmax(0, 1fr)
+        360px;
+
+    gap: 24px;
+
+    align-items: start;
+}
+
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+
+/* =========================================================
+   PANELS
+========================================================= */
+
+.panel {
+    background: var(--bg-panel);
+
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+
+    border: 1px solid var(--border-subtle);
+
+    border-radius: var(--radius-lg);
+
+    padding: 24px;
+
+    box-shadow: var(--glass-shadow);
+}
+
+
+.panel-head {
+    margin-bottom: 20px;
+}
+
+
+.label {
+    margin-bottom: 5px;
+
+    font-size: 12px;
+    line-height: 1.2;
+
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+
+    font-weight: 700;
+
+    color: var(--text-muted);
+}
+
+
+h2 {
+    font-size: 20px;
+    font-weight: 700;
+}
+
+
+h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+}
+
+
+/* =========================================================
+   BUTTONS
+========================================================= */
+
+button {
+    cursor: pointer;
+
+    border: 0;
+
+    border-radius: var(--radius-sm);
+
+    font-weight: 600;
+    font-size: 14px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 10px 16px;
+
+    color: #fff;
+
+    transition:
+        background-color 0.18s ease,
+        border-color 0.18s ease,
+        transform 0.18s ease,
+        box-shadow 0.18s ease,
+        color 0.18s ease;
+
+    user-select: none;
+}
+
+
+button:active {
+    transform: translateY(1px);
+}
+
+
+button:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+
 .primary-button {
-  background-color: var(--primary);
-  color: #fff;
-  width: 100%;
-  padding: 12px;
-  font-size: 15px;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    width: 100%;
+
+    padding: 12px;
+
+    background: var(--primary);
+    color: #fff;
+
+    box-shadow:
+        0 5px 18px rgba(200, 149, 90, 0.25);
 }
+
+
 .primary-button:hover {
-  background-color: var(--primary-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+    background: var(--primary-hover);
+
+    box-shadow:
+        0 7px 22px rgba(200, 149, 90, 0.32);
 }
 
+
 .secondary-button {
-  background-color: var(--secondary);
-  border: 1px solid var(--border-subtle);
-  color: #fff;
+    background: var(--secondary);
+
+    border: 1px solid var(--border-subtle);
+
+    color: #fff;
 }
-.secondary-button:hover { background-color: var(--secondary-hover); }
+
+
+.secondary-button:hover {
+    background: var(--secondary-hover);
+}
+
 
 .ghost-button {
-  background: transparent;
-  color: #ff5c5c;
-  border: 1px solid rgba(255, 92, 92, 0.5);
-  width: 100%;
+    width: 100%;
+
+    background: transparent;
+
+    color: #ff8c82;
+
+    border: 1px solid rgba(255, 120, 110, 0.45);
 }
-.ghost-button:hover { background: rgba(255, 92, 92, 0.15); color: #ff7676; }
+
+
+.ghost-button:hover {
+    background: rgba(255, 100, 90, 0.12);
+}
+
 
 .icon-button {
-  background-color: var(--secondary);
-  border: 1px solid var(--border-subtle);
-  color: #fff;
-  padding: 10px;
+    width: 42px;
+    height: 42px;
+
+    padding: 0;
+
+    background: var(--secondary);
+
+    border: 1px solid var(--border-subtle);
+
+    color: #fff;
 }
-.icon-button:hover { background-color: var(--secondary-hover); }
+
+
+.icon-button:hover {
+    background: var(--secondary-hover);
+}
+
+
+/* =========================================================
+   MODE SWITCHER
+========================================================= */
 
 .mode-switcher {
-  display: flex;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: var(--radius-sm);
-  padding: 4px;
-  margin-bottom: 20px;
-  border: 1px solid var(--border-subtle);
+    display: flex;
+
+    padding: 4px;
+    margin-bottom: 20px;
+
+    background: rgba(0, 0, 0, 0.25);
+
+    border: 1px solid var(--border-subtle);
+
+    border-radius: var(--radius-sm);
 }
 
+
 .mode-button {
-  flex: 1;
-  background: transparent;
-  color: var(--text-muted);
-  padding: 8px;
-  border: none;
+    flex: 1;
+
+    padding: 9px 8px;
+
+    background: transparent;
+
+    color: var(--text-muted);
+
+    border: 0;
 }
+
+
+.mode-button:hover {
+    color: #fff;
+}
+
+
 .mode-button.active {
-  background: var(--secondary-hover);
-  color: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    background: var(--secondary-hover);
+
+    color: #fff;
+
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.18);
 }
 
+
+/* =========================================================
+   FORMS
+========================================================= */
+
+.control-stack {
+    display: flex;
+    flex-direction: column;
+}
+
+
 .field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 20px;
-}
-.field span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
+    display: flex;
+    flex-direction: column;
 
-.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    gap: 8px;
 
-input[type="text"], select {
-  width: 100%;
-  background: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  color: #fff;
-  padding: 12px;
-  border-radius: var(--radius-sm);
-  font-family: inherit;
-  font-size: 14px;
-  outline: none;
-  transition: all 0.2s;
+    margin-bottom: 18px;
+}
+
+
+.field > span {
+    font-size: 13px;
+    font-weight: 500;
+
+    color: var(--text-muted);
+}
+
+
+.field-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(2, minmax(0, 1fr));
+
+    gap: 12px;
+}
+
+
+input[type="text"],
+select {
+    width: 100%;
+
+    min-width: 0;
+
+    background: var(--bg-input);
+
+    border: 1px solid var(--border-subtle);
+
+    color: #fff;
+
+    padding: 12px;
+
+    border-radius: var(--radius-sm);
+
+    outline: none;
+
+    font-size: 14px;
+
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+
+input[type="text"]:focus,
+select:focus {
+    border-color: var(--primary);
+
+    background: rgba(15, 13, 11, 0.88);
+
+    box-shadow:
+        0 0 0 3px rgba(200, 149, 90, 0.1);
+}
+
+
+input::placeholder {
+    color: rgba(255, 255, 255, 0.32);
+}
+
+
+select option {
+    background: #211c18;
+    color: #fff;
+}
+
+
+.join-row {
+    display: flex;
+    gap: 8px;
+}
+
+
+.join-row input {
+    flex: 1;
 }
-input[type="text"]:focus, select:focus {
-  border-color: var(--border-focus);
-  background: rgba(15, 23, 42, 0.8);
-}
-input::placeholder { color: rgba(255,255,255,0.3); }
 
-.join-row { display: flex; gap: 8px; }
-.join-row input { flex: 1; }
 
 .muted-copy {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-top: 12px;
-  text-align: center;
+    margin-top: 10px;
+
+    text-align: center;
+
+    font-size: 12px;
+
+    color: var(--text-muted);
 }
 
+
+/* =========================================================
+   BOARD HEADER
+========================================================= */
+
 .board-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+
+    gap: 16px;
+
+    margin-bottom: 24px;
+
+    padding-bottom: 16px;
+
+    border-bottom:
+        1px solid var(--border-subtle);
 }
-.toolbar-actions { display: flex; gap: 8px; }
+
+
+.toolbar-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+
+/* =========================================================
+   BOARD STAGE
+========================================================= */
 
 .board-stage {
-  width: 100%;
-  max-width: 640px;
-  margin: 0 auto;
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(8px);
-  padding: 12px;
-  border-radius: var(--radius-md);
-  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
-  border: 1px solid var(--border-subtle);
+    width: 100%;
+
+    max-width: 700px;
+
+    margin: 0 auto;
+
+    padding: 12px;
+
+    background:
+        rgba(0, 0, 0, 0.32);
+
+    border:
+        1px solid rgba(255, 255, 255, 0.1);
+
+    border-radius: var(--radius-md);
+
+    box-shadow:
+        inset 0 2px 12px rgba(0, 0, 0, 0.55),
+        0 10px 30px rgba(0, 0, 0, 0.22);
 }
 
+
+/* =========================================================
+   CHESS BOARD
+========================================================= */
+
 .board {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-template-rows: repeat(8, 1fr);
-  border: 4px solid rgba(15, 23, 42, 0.8);
-  border-radius: var(--radius-sm); 
-  overflow: hidden;
+    width: 100%;
+
+    aspect-ratio: 1 / 1;
+
+    display: grid;
+
+    grid-template-columns:
+        repeat(8, minmax(0, 1fr));
+
+    grid-template-rows:
+        repeat(8, minmax(0, 1fr));
+
+    overflow: hidden;
+
+    border:
+        5px solid var(--board-border);
+
+    border-radius: 5px;
+
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.08),
+        0 10px 30px rgba(0, 0, 0, 0.3);
+
+    /*
+     * Убираем любые промежутки между клетками.
+     */
+    gap: 0;
+
+    isolation: isolate;
 }
 
-.board > div:nth-child(even) { background-color: var(--board-dark); }
-.board > div:nth-child(odd) { background-color: var(--board-light); }
-.board > div:nth-child(16n+9), .board > div:nth-child(16n+11), .board > div:nth-child(16n+13), .board > div:nth-child(16n+15),
-.board > div:nth-child(16n+2), .board > div:nth-child(16n+4), .board > div:nth-child(16n+6), .board > div:nth-child(16n+8) {
-  background-color: var(--board-dark);
+
+/* =========================================================
+   BOARD SQUARES
+========================================================= */
+
+/*
+ * ЭТО ГЛАВНОЕ ИСПРАВЛЕНИЕ.
+ *
+ * JS создаёт:
+ *
+ * <button class="square light">
+ * <button class="square dark">
+ *
+ * Поэтому нельзя использовать:
+ *
+ * .board > div
+ *
+ * как было раньше.
+ */
+
+.board .square {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    min-width: 0;
+    min-height: 0;
+
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    border: 0;
+
+    border-radius: 0;
+
+    overflow: hidden;
+
+    appearance: none;
+    -webkit-appearance: none;
+
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+
+    line-height: 1;
+
+    transition:
+        filter 0.12s ease,
+        box-shadow 0.12s ease;
 }
-.board > div:nth-child(16n+1), .board > div:nth-child(16n+3), .board > div:nth-child(16n+5), .board > div:nth-child(16n+7),
-.board > div:nth-child(16n+10), .board > div:nth-child(16n+12), .board > div:nth-child(16n+14), .board > div:nth-child(16n+16) {
-  background-color: var(--board-light);
+
+
+/*
+ * Светлая клетка.
+ */
+
+.board .square.light {
+    background-color: var(--board-light);
 }
 
+
+/*
+ * Тёмная клетка.
+ */
+
+.board .square.dark {
+    background-color: var(--board-dark);
+}
+
+
+/*
+ * Никаких browser default button styles.
+ */
+
+.board .square:hover {
+    filter: brightness(1.05);
+}
+
+
+/* =========================================================
+   PIECES
+========================================================= */
+
+.board .piece {
+    position: relative;
+
+    z-index: 5;
+
+    display: block;
+
+    /*
+     * Большой размер фигур.
+     * clamp хорошо работает и на телефоне,
+     * и на компьютере.
+     */
+    font-size: clamp(
+        30px,
+        7vw,
+        62px
+    );
+
+    line-height: 0.9;
+
+    font-family:
+        "DejaVu Sans",
+        "Noto Sans Symbols 2",
+        "Segoe UI Symbol",
+        "Arial Unicode MS",
+        serif;
+
+    font-weight: 400;
+
+    pointer-events: none;
+
+    user-select: none;
+
+    transform:
+        translateY(-1px);
+
+    /*
+     * Улучшает рендеринг Unicode-шахматных символов.
+     */
+    text-rendering: geometricPrecision;
+
+    -webkit-font-smoothing: antialiased;
+}
+
+
+/*
+ * БЕЛЫЕ ФИГУРЫ
+ *
+ * Белая фигура не должна быть просто #fff:
+ * на светлой клетке она теряется.
+ *
+ * Поэтому добавляем тёмную обводку/тень.
+ */
+
+.board .piece.white {
+    color: var(--piece-white);
+
+    text-shadow:
+        -1px -1px 0 rgba(40, 28, 18, 0.8),
+         1px -1px 0 rgba(40, 28, 18, 0.8),
+        -1px  1px 0 rgba(40, 28, 18, 0.8),
+         1px  1px 0 rgba(40, 28, 18, 0.8),
+         0 3px 5px rgba(0, 0, 0, 0.42);
+}
+
+
+/*
+ * ЧЁРНЫЕ ФИГУРЫ
+ *
+ * Это второе важное исправление.
+ */
+
+.board .piece.black {
+    color: var(--piece-black);
+
+    text-shadow:
+        0 1px 1px rgba(255, 255, 255, 0.18),
+        0 3px 5px rgba(0, 0, 0, 0.35);
+}
+
+
+/* =========================================================
+   SELECTED SQUARE
+========================================================= */
+
+.board .square.selected {
+    box-shadow:
+        inset 0 0 0 4px
+        rgba(255, 214, 102, 0.95);
+
+    z-index: 3;
+}
+
+
+/* =========================================================
+   LAST MOVE
+========================================================= */
+
+.board .square.last-move::before {
+    content: "";
+
+    position: absolute;
+
+    inset: 0;
+
+    background:
+        rgba(255, 214, 102, 0.28);
+
+    pointer-events: none;
+
+    z-index: 1;
+}
+
+
+/* =========================================================
+   LEGAL MOVES
+========================================================= */
+
+.board .square.legal-target::after {
+    content: "";
+
+    position: absolute;
+
+    width: 22%;
+    height: 22%;
+
+    border-radius: 50%;
+
+    background:
+        rgba(30, 25, 20, 0.28);
+
+    pointer-events: none;
+
+    z-index: 2;
+}
+
+
+/* =========================================================
+   CAPTURE TARGET
+========================================================= */
+
+.board .square.capture-target {
+    box-shadow:
+        inset 0 0 0 5px
+        rgba(190, 58, 46, 0.58);
+}
+
+
+/* =========================================================
+   CHECK
+========================================================= */
+
+.board .square.check-square {
+    background:
+        radial-gradient(
+            circle,
+            rgba(220, 55, 42, 0.9) 0%,
+            rgba(220, 55, 42, 0.6) 45%,
+            rgba(220, 55, 42, 0.18) 100%
+        ) !important;
+}
+
+
+/* =========================================================
+   STATUS
+========================================================= */
+
 .status-strip {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 24px;
-  padding: 16px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-}
-.status-message { font-weight: 500; font-size: 15px; }
+    display: flex;
 
-.status-meta { display: flex; gap: 8px; }
-.status-chip {
-  padding: 4px 10px;
-  border-radius: 20px; 
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
+    justify-content: space-between;
+    align-items: center;
+
+    gap: 16px;
+
+    margin-top: 24px;
+
+    padding: 16px;
+
+    background:
+        rgba(25, 22, 19, 0.68);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-md);
 }
-.turn-white { background: rgba(255, 255, 255, 0.9); color: #000; }
-.turn-black { background: rgba(0, 0, 0, 0.8); color: #fff; border: 1px solid var(--border-subtle); }
-.connection-solo { background: var(--secondary); color: #fff; }
-.connection-party { background: var(--primary); color: #fff; }
+
+
+.status-message {
+    font-weight: 600;
+    font-size: 15px;
+}
+
+
+.status-meta {
+    display: flex;
+    gap: 8px;
+
+    flex-wrap: wrap;
+
+    justify-content: flex-end;
+}
+
+
+.status-chip {
+    padding: 5px 10px;
+
+    border-radius: 999px;
+
+    font-size: 12px;
+
+    font-weight: 700;
+
+    white-space: nowrap;
+}
+
+
+.turn-white {
+    background: #f4efe5;
+    color: #1b1713;
+}
+
+
+.turn-black {
+    background: #15120f;
+    color: #fff;
+
+    border:
+        1px solid rgba(255, 255, 255, 0.18);
+}
+
+
+.connection-solo {
+    background:
+        rgba(255, 255, 255, 0.09);
+
+    color: #fff;
+}
+
+
+.connection-party {
+    background:
+        rgba(200, 149, 90, 0.85);
+
+    color: #20170e;
+}
+
+
+/* =========================================================
+   ROSTER
+========================================================= */
 
 .roster-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 12px;
-  margin-bottom: 20px;
+    display: grid;
+
+    grid-template-columns: 1fr;
+
+    gap: 12px;
+
+    margin-bottom: 20px;
 }
 
+
 .roster-card {
-  background: rgba(0, 0, 0, 0.2);
-  padding: 12px 16px;
-  border-radius: var(--radius-sm);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--border-subtle);
+    display: flex;
+
+    flex-direction: row;
+
+    justify-content: space-between;
+    align-items: center;
+
+    gap: 12px;
+
+    padding: 13px 16px;
+
+    background:
+        rgba(0, 0, 0, 0.22);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-sm);
 }
-.roster-card.white-player { border-left: 4px solid rgba(255,255,255,0.8); }
-.roster-card.black-player { border-left: 4px solid rgba(0,0,0,0.8); }
+
+
+.roster-card.white-player {
+    border-left:
+        4px solid rgba(255, 255, 255, 0.85);
+}
+
+
+.roster-card.black-player {
+    border-left:
+        4px solid rgba(0, 0, 0, 0.8);
+}
+
 
 .roster-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.roster-role {
-  font-size: 11px;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
-.roster-card strong { font-size: 14px; }
+    display: flex;
 
-/* ЧАСЫ */
-.player-clock {
-  font-family: monospace, sans-serif;
-  font-size: 20px;
-  font-weight: 700;
-  background: rgba(0, 0, 0, 0.4);
-  color: var(--text-main);
-  padding: 6px 12px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
-  letter-spacing: 1px;
-  transition: all 0.3s ease;
-  min-width: 80px;
-  text-align: center;
+    flex-direction: column;
+
+    gap: 2px;
+
+    min-width: 0;
 }
 
+
+.roster-role {
+    font-size: 11px;
+
+    text-transform: uppercase;
+
+    color: var(--text-muted);
+}
+
+
+.roster-card strong {
+    font-size: 14px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+}
+
+
+/* =========================================================
+   CLOCKS
+========================================================= */
+
+.player-clock {
+    flex-shrink: 0;
+
+    min-width: 82px;
+
+    padding: 6px 10px;
+
+    text-align: center;
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+
+    font-size: 19px;
+
+    font-weight: 800;
+
+    letter-spacing: 1px;
+
+    background:
+        rgba(0, 0, 0, 0.42);
+
+    color: var(--text-main);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-sm);
+
+    transition:
+        color 0.2s ease,
+        border-color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+
 .player-clock.active {
-  background: rgba(16, 185, 129, 0.2);
-  border-color: var(--primary);
-  color: var(--primary);
-  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
+    background:
+        rgba(200, 149, 90, 0.16);
+
+    border-color:
+        var(--primary);
+
+    color:
+        #e3b77d;
+
+    box-shadow:
+        0 0 12px rgba(200, 149, 90, 0.2);
 }
 
+
+.player-clock.low {
+    color: #ffcc76;
+}
+
+
 .player-clock.danger {
-  background: rgba(239, 68, 68, 0.2);
-  border-color: #ef4444;
-  color: #ef4444;
-  animation: pulse-danger 1s infinite;
+    color: #ff7167;
+
+    border-color:
+        rgba(255, 90, 80, 0.7);
+
+    background:
+        rgba(150, 30, 20, 0.2);
+
+    animation:
+        pulse-danger 1s infinite;
 }
 
+
 @keyframes pulse-danger {
-  0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0.4); }
-  50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
-  100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
+    0% {
+        box-shadow:
+            0 0 0 rgba(255, 80, 70, 0);
+    }
+
+    50% {
+        box-shadow:
+            0 0 14px rgba(255, 80, 70, 0.35);
+    }
+
+    100% {
+        box-shadow:
+            0 0 0 rgba(255, 80, 70, 0);
+    }
 }
 
-/* ЗРИТЕЛИ */
+
+/* =========================================================
+   SPECTATORS
+========================================================= */
+
 .spectator-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-.badge {
-  background: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-.spectator-list { list-style: none; font-size: 13px; color: var(--text-muted); }
-.empty-state { font-style: italic; opacity: 0.7; }
+    display: flex;
 
-.captured-grid { display: flex; flex-direction: column; gap: 16px; }
-.captured-box {
-  background: rgba(0, 0, 0, 0.2);
-  padding: 12px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
+    justify-content: space-between;
+    align-items: center;
+
+    margin-bottom: 8px;
 }
-.captured-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
-.captured-row { min-height: 24px; display: flex; gap: 4px; font-size: 20px; }
+
+
+.badge {
+    padding: 3px 8px;
+
+    border-radius: 999px;
+
+    font-size: 11px;
+
+    font-weight: 700;
+
+    color: var(--text-muted);
+
+    background:
+        var(--bg-input);
+
+    border:
+        1px solid var(--border-subtle);
+}
+
+
+.spectator-list {
+    list-style: none;
+
+    font-size: 13px;
+
+    color: var(--text-muted);
+}
+
+
+.spectator-list li {
+    padding: 4px 0;
+}
+
+
+.empty-state {
+    font-style: italic;
+    opacity: 0.7;
+}
+
+
+/* =========================================================
+   CAPTURED
+========================================================= */
+
+.captured-grid {
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 12px;
+}
+
+
+.captured-box {
+    padding: 12px;
+
+    background:
+        rgba(0, 0, 0, 0.2);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-sm);
+}
+
+
+.captured-label {
+    margin-bottom: 8px;
+
+    font-size: 12px;
+
+    color: var(--text-muted);
+}
+
+
+.captured-row {
+    min-height: 28px;
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 4px;
+
+    font-family:
+        "DejaVu Sans",
+        "Noto Sans Symbols 2",
+        sans-serif;
+
+    font-size: 22px;
+}
+
+
+.captured-row::first-letter {
+    color: #fff;
+}
+
+
+/* =========================================================
+   MOVE HISTORY
+========================================================= */
 
 .move-history {
-  list-style-position: inside;
-  font-size: 14px;
-  color: var(--text-muted);
-  max-height: 200px;
-  overflow-y: auto;
-  background: rgba(0, 0, 0, 0.2);
-  border: 1px solid var(--border-subtle);
-  padding: 12px;
-  border-radius: var(--radius-sm);
+    max-height: 220px;
+
+    overflow-y: auto;
+
+    list-style-position: inside;
+
+    font-size: 14px;
+
+    color: var(--text-muted);
+
+    background:
+        rgba(0, 0, 0, 0.2);
+
+    border:
+        1px solid var(--border-subtle);
+
+    padding: 12px;
+
+    border-radius: var(--radius-sm);
 }
-.move-history li { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
-.move-history li:last-child { border-bottom: none; color: #fff; font-weight: 500;}
+
+
+.move-history li {
+    padding: 5px 0;
+
+    border-bottom:
+        1px solid rgba(255, 255, 255, 0.05);
+}
+
+
+.move-history li:last-child {
+    border-bottom: 0;
+
+    color: #fff;
+
+    font-weight: 600;
+}
+
+
+/* =========================================================
+   FOOTER
+========================================================= */
 
-/* ФУТЕР И GITHUB */
 .footer {
-  text-align: center;
-  margin-top: 40px;
-  padding: 20px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 40px;
+
+    padding: 20px 0;
 }
+
+
 .github-link {
-  display: inline-block;
-  opacity: 0.6;
-  transition: all 0.3s ease;
+    display: inline-flex;
+
+    opacity: 0.6;
+
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
 }
+
+
 .github-link:hover {
-  opacity: 1;
-  transform: translateY(-3px) scale(1.05);
-  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
+    opacity: 1;
+
+    transform:
+        translateY(-3px)
+        scale(1.05);
 }
+
+
 .github-icon {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-  filter: invert(1); /* Делает черную иконку белой. Уберите, если иконка цветная. */
+    width: 32px;
+    height: 32px;
+
+    object-fit: contain;
+
+    filter: invert(1);
 }
 
+
+/* =========================================================
+   PROMOTION MODAL
+========================================================= */
+
 .modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(6px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+    position: fixed;
+
+    inset: 0;
+
+    z-index: 1000;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: 20px;
+
+    background:
+        rgba(0, 0, 0, 0.66);
+
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
+
+
 .modal-card {
-  background: var(--bg-panel);
-  backdrop-filter: blur(20px);
-  padding: 32px;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
-  box-shadow: var(--glass-shadow);
-  text-align: center;
-  min-width: 300px;
+    min-width: 300px;
+
+    padding: 30px;
+
+    text-align: center;
+
+    background:
+        var(--bg-panel-strong);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-lg);
+
+    box-shadow:
+        0 20px 60px rgba(0, 0, 0, 0.5);
 }
+
+
 .promotion-options {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-  margin-top: 24px;
+    display: flex;
+
+    justify-content: center;
+
+    gap: 12px;
+
+    margin-top: 24px;
 }
-.promotion-options button {
-  font-size: 32px;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--border-subtle);
+
+
+.promotion-button {
+    width: 62px;
+    height: 62px;
+
+    padding: 0;
+
+    font-family:
+        "DejaVu Sans",
+        "Noto Sans Symbols 2",
+        serif;
+
+    font-size: 38px;
+
+    background:
+        rgba(0, 0, 0, 0.3);
+
+    border:
+        1px solid var(--border-subtle);
 }
-.promotion-options button:hover {
-  background: var(--primary);
-  border-color: var(--primary);
+
+
+.promotion-button:hover {
+    background:
+        var(--primary);
+
+    border-color:
+        var(--primary);
 }
 
+
+/* =========================================================
+   TOAST
+========================================================= */
+
 .toast-host {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+    position: fixed;
+
+    right: 20px;
+    bottom: 20px;
+
+    z-index: 9999;
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 10px;
+
+    max-width: min(
+        380px,
+        calc(100vw - 40px)
+    );
 }
 
+
+.toast {
+    padding: 12px 16px;
+
+    background:
+        rgba(25, 22, 19, 0.94);
+
+    border:
+        1px solid var(--border-subtle);
+
+    border-radius: var(--radius-md);
+
+    color: #fff;
+
+    font-size: 14px;
+
+    box-shadow:
+        0 10px 30px rgba(0, 0, 0, 0.35);
+
+    backdrop-filter: blur(12px);
+}
+
+
+.toast.success {
+    border-color:
+        rgba(110, 180, 120, 0.45);
+}
+
+
+.toast.error {
+    border-color:
+        rgba(255, 100, 90, 0.55);
+}
+
+
+/* =========================================================
+   MOBILE
+========================================================= */
+
 @media (max-width: 960px) {
-  .app-grid { grid-template-columns: 1fr; }
-  .board-toolbar { flex-direction: column; gap: 16px; align-items: stretch; }
-  .toolbar-actions { justify-content: stretch; }
-  .toolbar-actions button { flex: 1; }
+
+    body {
+        padding: 12px;
+    }
+
+
+    .app-grid {
+        grid-template-columns: 1fr;
+
+        gap: 18px;
+    }
+
+
+    .sidebar {
+        gap: 18px;
+    }
+
+
+    .board-toolbar {
+        flex-direction: column;
+
+        align-items: stretch;
+    }
+
+
+    .toolbar-actions {
+        width: 100%;
+    }
+
+
+    .toolbar-actions button {
+        flex: 1;
+    }
+
+
+    .board-stage {
+        padding: 8px;
+    }
+
+
+    .panel {
+        padding: 18px;
+    }
+
 }
 
+
+@media (max-width: 560px) {
+
+    body {
+        padding: 8px;
+    }
+
+
+    .main-header {
+        margin-bottom: 14px;
+    }
+
+
+    .main-header h1 {
+        font-size: 23px;
+    }
+
+
+    .chess-icon {
+        font-size: 28px;
+    }
+
+
+    .panel {
+        padding: 14px;
+
+        border-radius: 11px;
+    }
+
+
+    .board-stage {
+        padding: 6px;
+
+        border-radius: 8px;
+    }
+
+
+    .board {
+        border-width: 3px;
+    }
+
+
+    /*
+     * На телефоне фигуры немного меньше,
+     * чтобы не упирались в соседние клетки.
+     */
+
+    .board .piece {
+        font-size: clamp(
+            27px,
+            10vw,
+            48px
+        );
+    }
+
+
+    .status-strip {
+        flex-direction: column;
+
+        align-items: stretch;
+
+        margin-top: 14px;
+    }
+
+
+    .status-meta {
+        justify-content: flex-start;
+    }
+
+
+    .field-grid {
+        grid-template-columns: 1fr;
+    }
+
+
+    .toolbar-actions {
+        display: grid;
+
+        grid-template-columns:
+            1fr
+            auto
+            1fr;
+    }
+
+
+    .icon-button {
+        width: 44px;
+    }
+
+
+    .roster-card {
+        padding: 11px 12px;
+    }
+
+
+    .player-clock {
+        min-width: 76px;
+
+        font-size: 17px;
+    }
+
+
+    .toast-host {
+        right: 10px;
+        bottom: 10px;
+
+        max-width:
+            calc(100vw - 20px);
+    }
+
+}
+
+
+/* =========================================================
+   TOUCH DEVICES
+========================================================= */
+
+@media (hover: none) {
+
+    .board .square:hover {
+        filter: none;
+    }
+
+}