diff --git a/chess/public/styles.css b/chess/public/styles.css
index 442c3b1..4c7a4b5 100644
--- a/chess/public/styles.css
+++ b/chess/public/styles.css
@@ -1,113 +1,250 @@
-:root{
-  --bg:#171512;
-  --panel:#211e1a;
-  --panel2:#28231e;
-  --text:#f2eee7;
-  --muted:#a9a197;
-  --line:#3b342d;
-  --accent:#c79a5b;
-  --accent2:#e0bc84;
-  --light:#e7d8c0;
-  --dark:#8d6847;
-  --danger:#b9685e;
-  --shadow:0 18px 60px rgba(0,0,0,.28);
-}
-*{box-sizing:border-box}
-html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
-button,input,select{font:inherit}
-button{cursor:pointer}
-body{padding:20px}
-.app{max-width:1180px;margin:auto}
-.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
-.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent2)}
-h1,h2,h3,p{margin:0}
-h1{font-size:25px;margin-top:4px}
-h2{font-size:clamp(36px,6vw,72px);line-height:.96;letter-spacing:-.045em;margin:20px 0}
-h3{font-size:20px}
-.top-actions,.controls,.form-row{display:flex;gap:10px;flex-wrap:wrap}
-.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:10px;min-height:42px}
-.btn:hover{border-color:#635548;background:var(--panel2)}
-.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a1510}
-.btn.danger{background:transparent;border-color:#70423e;color:#e3aaa3}
-.panel,.hero{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:16px}
-.hero{padding:clamp(24px,5vw,54px);display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:end}
-.hero p{max-width:650px;color:var(--muted);font-size:16px;line-height:1.6}
-.pill{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--accent2);font-size:12px}
-.home-grid{display:grid;gap:10px}
-.mode-card{display:flex;flex-direction:column;text-align:left;gap:6px;padding:18px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px}
-.mode-card:hover{border-color:var(--accent)}
-.mode-card span{color:var(--muted);font-size:13px}
-.party-panel{margin-top:14px;padding:20px}
-.form-row{align-items:end;margin-top:14px}
-label{display:grid;gap:6px;color:var(--muted);font-size:12px;min-width:180px}
-input,select{height:42px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#171512;color:var(--text);outline:none}
-input:focus,select:focus{border-color:var(--accent)}
-.error{color:#df9d95;margin-top:10px;min-height:18px}
-.game-layout{display:grid;grid-template-columns:minmax(0,760px) 330px;gap:18px;align-items:start}
-.left-panel{padding:14px}
-.right-column{display:grid;gap:12px}
-.player-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:7px 4px 12px}
-.player-row:last-child{padding:12px 4px 7px}
-.avatar{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;border-radius:9px;background:var(--panel2)}
-.player-row strong,.player-row span{display:block}
-.player-row span{font-size:12px;color:var(--muted);margin-top:2px}
-.clock{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}
-.board-wrap{width:100%;aspect-ratio:1;max-width:760px;margin:auto}
-.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border-radius:8px;user-select:none;touch-action:manipulation}
-.square{position:relative;display:grid;place-items:center;font-size:clamp(27px,7vw,70px);line-height:1}
-.square.light{background:var(--light);color:#251e18}
-.square.dark{background:var(--dark);color:#17120f}
-.square.last-from::after,.square.last-to::after{content:"";position:absolute;inset:0;background:rgba(230,184,92,.26);pointer-events:none}
-.square.selected{box-shadow:inset 0 0 0 4px rgba(255,239,202,.75)}
-.square.legal::before{content:"";position:absolute;width:18%;height:18%;border-radius:50%;background:rgba(40,30,20,.35);z-index:1}
-.square.capture::before{content:"";position:absolute;inset:8%;border:5px solid rgba(70,40,20,.42);border-radius:50%;z-index:1}
-.square.trajectory{box-shadow:inset 0 0 0 3px rgba(255,245,210,.28)}
-.piece{position:relative;z-index:2;font-family:"DejaVu Sans","Segoe UI Symbol",serif;text-shadow:0 1px 0 rgba(0,0,0,.15)}
-.coord{position:absolute;font-size:9px;font-weight:700;opacity:.7;z-index:3;pointer-events:none}
-.coord.file{right:4px;bottom:2px}
-.coord.rank{left:4px;top:2px}
-.panel{padding:14px}
-.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
-.status{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px}
-.material{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--muted);min-height:23px}
-.material span{letter-spacing:2px}
-.controls{display:grid;grid-template-columns:1fr 1fr}
-.controls .btn{width:100%}
-.moves-panel{min-height:180px}
-.moves-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:10px;max-height:260px;overflow:auto}
-.move{display:grid;grid-template-columns:32px 1fr 1fr;padding:6px 7px;border-radius:7px;color:var(--muted);font-size:13px}
-.move:nth-child(odd){background:#1a1714}
-.move-number{color:#70675e}
-.chat-messages{height:180px;overflow:auto;margin-top:10px;display:grid;align-content:start;gap:8px}
-.chat-message{font-size:13px}
-.chat-message b{color:var(--accent2)}
-.chat-message span{color:var(--muted)}
-.chat-form{display:flex;gap:7px;margin-top:10px}
-.chat-form input{min-width:0;flex:1}
-.hidden{display:none!important}
-.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:20px;z-index:20}
-.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(430px,100%)}
-.promotion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
-.promotion-grid button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:12px;font-size:34px}
-.promotion-grid span{display:block;font-size:11px;color:var(--muted)}
-.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#2a251f;border:1px solid var(--line);padding:10px 14px;border-radius:9px;transition:.2s;z-index:30}
-.toast.show{opacity:1;transform:translate(-50%,0)}
-@media(max-width:920px){
-  body{padding:10px}
-  .hero{grid-template-columns:1fr}
-  .game-layout{grid-template-columns:1fr}
-  .right-column{grid-template-columns:1fr 1fr}
-  .moves-panel,.chat-panel{grid-column:span 2}
-}
-@media(max-width:560px){
-  .topbar{align-items:flex-start}
-  .top-actions{justify-content:flex-end}
-  .top-actions .btn{padding:8px 10px}
-  .game-layout{gap:10px}
-  .left-panel{padding:7px}
-  .right-column{grid-template-columns:1fr}
-  .moves-panel,.chat-panel{grid-column:auto}
-  .controls{grid-template-columns:1fr 1fr}
-  .square{font-size:clamp(24px,10vw,46px)}
+: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;
 }
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+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;
+}
+
+.hidden { display: none !important; }
+
+.page-shell { max-width: 1280px; margin: 0 auto; }
+
+.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);
+}
+.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);
+}
+.primary-button:hover {
+  background-color: var(--primary-hover); transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+}
+.secondary-button { background-color: var(--secondary); border: 1px solid var(--border-subtle); color: #fff; }
+.secondary-button:hover { background-color: var(--secondary-hover); }
+
+.ghost-button { background: transparent; color: #ff5c5c; border: 1px solid rgba(255, 92, 92, 0.5); width: 100%; }
+.ghost-button:hover { background: rgba(255, 92, 92, 0.15); color: #ff7676; }
+
+.icon-button { background-color: var(--secondary); border: 1px solid var(--border-subtle); color: #fff; padding: 10px; }
+.icon-button:hover { background-color: var(--secondary-hover); }
+
+.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);
+}
+.mode-button { flex: 1; background: transparent; color: var(--text-muted); padding: 8px; border: none; }
+.mode-button.active { background: var(--secondary-hover); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+
+.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
+.field span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
+.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+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;
+}
+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; }
+
+.board-toolbar {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);
+}
+.toolbar-actions { display: flex; gap: 8px; }
+
+.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);
+}
+
+.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;
+}
+
+/* =========================================
+   ИСПРАВЛЕННЫЕ СТИЛИ ДОСКИ И ФИГУР
+========================================= */
+.square {
+  width: 100%; height: 100%; border: none; padding: 0; margin: 0;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; position: relative;
+}
+
+.square.light { background-color: var(--board-light); }
+.square.dark { background-color: var(--board-dark); }
+
+.square.selected { background-color: rgba(234, 230, 93, 0.7); }
+.square.last-move { background-color: rgba(234, 230, 93, 0.4); }
+.square.check-square { background-color: rgba(239, 68, 68, 0.6); }
+
+.square.legal-target::after {
+  content: ''; width: 25%; height: 25%; border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.25); position: absolute;
+}
+.square.capture-target::after {
+  content: ''; width: 80%; height: 80%; border-radius: 50%;
+  border: 5px solid rgba(0, 0, 0, 0.25); position: absolute; background: transparent;
+}
+
+.piece {
+  font-size: clamp(28px, 6vw, 65px);
+  user-select: none; z-index: 10;
+  line-height: 1; pointer-events: none;
+}
+.piece.white { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
+.piece.black { color: #000; text-shadow: 0 2px 4px rgba(255,255,255,0.4); }
+
+/* =========================================
+   СТАТУС И ЧАСЫ
+========================================= */
+.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; }
+.status-meta { display: flex; gap: 8px; }
+.status-chip {
+  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
+}
+.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; }
+
+.roster-grid { 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);
+}
+.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-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; }
+
+.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;
+}
+.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);
+}
+.player-clock.low { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }
+
+.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; }
+
+.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;
+}
+.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;
+}
+.promotion-options { display: flex; gap: 16px; justify-content: center; margin-top: 24px; }
+.promotion-options button {
+  font-size: 32px; padding: 16px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-subtle); color: #fff;
+}
+.promotion-options button:hover { background: var(--primary); border-color: var(--primary); }
+
+.toast-host {
+  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.toast {
+  background: var(--bg-panel); backdrop-filter: blur(10px);
+  padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
+  color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  animation: slide-up 0.3s ease-out;
+}
+.toast.success { border-color: var(--primary); }
+.toast.error { border-color: #ef4444; }
+
+@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+@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; }
+}