:root {
  --bg:#0d0d14; --surface:#16161f; --surface2:#1e1e2c; --border:#28283a;
  --p1:#4fc3f7; --p1-glow:rgba(79,195,247,0.3);
  --p2:#f06292; --p2-glow:rgba(240,98,146,0.3);
  --wall:#ffd54f; --text:#e8e8f0; --muted:#5a5a78; --muted2:#8888aa;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:16px;user-select:none;overflow-x:hidden;overflow-y:auto;}
.screen{display:none;flex-direction:column;align-items:center;}
.screen.active{display:flex;}

/* ── МЕНЮ ── */
#menuScreen{gap:0;max-width:400px;width:100%;text-align:center;}
.logo-wrap{margin-bottom:40px;}
.logo-grid{display:grid;grid-template-columns:repeat(5,18px);grid-template-rows:repeat(5,18px);
  gap:4px;margin:0 auto 20px;width:fit-content;opacity:.85;}
.lg{width:18px;height:18px;border-radius:3px;background:var(--surface2);}
.lg.a{background:var(--p1);box-shadow:0 0 8px var(--p1);}
.lg.b{background:var(--p2);box-shadow:0 0 8px var(--p2);}
.game-title{font-size:2.4rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,var(--p1),var(--p2));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;}
.game-tagline{color:var(--muted2);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;}
.menu-section{width:100%;margin-bottom:28px;}
.menu-label{color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.mode-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.mode-card{flex:1;min-width:80px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:18px 12px;cursor:pointer;transition:all .18s;text-align:center;}
.mode-card:hover{border-color:var(--muted2);background:var(--surface2);}
.mode-card.selected{border-color:var(--wall);background:var(--surface2);}
.mc-icon{font-size:1.8rem;margin-bottom:8px;filter:grayscale(.4);}
.mode-card.selected .mc-icon{filter:none;}
.mc-title{font-size:.9rem;font-weight:700;margin-bottom:3px;}
.mc-sub{font-size:.7rem;color:var(--muted2);}
.diff-row{display:flex;gap:8px;}
.diff-btn{flex:1;min-height:44px;padding:9px 0;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--muted2);font-family:inherit;font-size:.8rem;
  font-weight:600;cursor:pointer;transition:all .15s;}
.diff-btn:hover{border-color:var(--muted2);color:var(--text);}
.diff-btn.selected{border-color:var(--wall);color:var(--wall);background:var(--surface2);}
.online-controls{display:flex;flex-direction:column;gap:10px;align-items:center;}
.online-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;}
.online-row input{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;
  padding:8px 12px;color:var(--text);font-family:inherit;font-size:.9rem;flex:1;min-width:0;}
.online-row input:focus{outline:none;border-color:var(--p1);}
.play-btn{width:100%;padding:16px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#4fc3f7,#7986cb);color:#fff;font-family:inherit;
  font-size:1.1rem;font-weight:800;cursor:pointer;letter-spacing:.04em;
  transition:filter .15s,transform .1s;margin-bottom:16px;}
.play-btn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.rules-toggle{color:var(--muted2);font-size:.78rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;margin-top:4px;}
.menu-foot{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:4px;}

/* Статистика игрока в меню */
.stats-block{display:flex;gap:8px;justify-content:center;width:100%;margin-bottom:16px;}
.stat-item{flex:1;background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.stat-val{font-size:1.3rem;font-weight:800;color:var(--text);line-height:1;}
.stat-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.rules-box{display:none;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px;text-align:left;font-size:.78rem;color:var(--muted2);
  line-height:1.8;margin-top:12px;width:100%;}
.rules-box.open{display:block;}
.rules-box b{color:var(--text);}

/* ── ИГРОВОЙ ЭКРАН ── */
#gameScreen{gap:0;width:100%;align-items:center;}
.scoreboard{display:flex;gap:10px;margin-bottom:14px;width:100%;max-width:560px;}
.player-card{flex:1;background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;padding:10px 14px;transition:border-color .2s,box-shadow .2s;position:relative;}
.player-card.active-p1{border-color:var(--p1);box-shadow:0 0 16px var(--p1-glow);}
.player-card.active-p2{border-color:var(--p2);box-shadow:0 0 16px var(--p2-glow);}
.pc-name{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:5px;}
.pc-row{display:flex;align-items:center;gap:8px;}
.pdot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.p1-dot{background:var(--p1);box-shadow:0 0 6px var(--p1);}
.p2-dot{background:var(--p2);box-shadow:0 0 6px var(--p2);}
.wall-pips{display:flex;gap:2px;flex-wrap:wrap;max-width:90px;}
.wpip{width:7px;height:7px;border-radius:2px;background:var(--wall);opacity:.75;}
.turn-badge{position:absolute;top:8px;right:10px;font-size:.6rem;background:var(--wall);
  color:#0d0d14;font-weight:700;padding:2px 7px;border-radius:20px;
  letter-spacing:.06em;text-transform:uppercase;display:none;}
.player-card.active-p1 .turn-badge,.player-card.active-p2 .turn-badge{display:block;}
.pc-score{position:absolute;bottom:8px;right:12px;font-size:1.4rem;font-weight:800;
  color:var(--muted2);line-height:1;letter-spacing:-.02em;}
#card1 .pc-score{color:var(--p1);}
#card2 .pc-score{color:var(--p2);}

/* Invite блок */
.invite-block{display:none;background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;width:100%;max-width:560px;text-align:center;}
.invite-block.visible{display:block;}
.invite-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;}
.invite-code{font-size:1.6rem;font-weight:800;letter-spacing:.18em;color:var(--wall);margin-bottom:10px;}
.invite-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.invite-btn{padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:inherit;font-size:.78rem;
  font-weight:600;cursor:pointer;transition:all .14s;}
.invite-btn:hover{border-color:var(--muted2);}
.invite-btn.copied{border-color:#64dc78;color:#64dc78;}

/* Mode bar */
.mode-bar{display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.mbar-btn{min-height:44px;padding:6px 16px;border-radius:20px;border:1.5px solid var(--border);
  background:transparent;color:var(--muted2);cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:600;transition:all .14s;}
.mbar-btn.active{border-color:var(--wall);color:var(--wall);background:var(--surface2);}
.mbar-btn:disabled{opacity:.35;cursor:default;}

/* Таймер хода */
.turn-timer{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:20px;
  background:var(--surface2);border:1.5px solid var(--border);color:var(--muted2);
  letter-spacing:.02em;transition:all .2s;}
.turn-timer.low{border-color:#f05050;color:#f05050;background:rgba(240,80,80,.12);
  animation:pulse .6s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* Кнопка ориентации стены */
.orient-bar{display:none;gap:6px;margin-bottom:8px;width:100%;max-width:360px;}
.orient-bar.visible{display:flex;}
.orient-btn{flex:1;min-height:48px;padding:8px 12px;border-radius:10px;
  border:2px solid var(--wall);background:var(--surface2);color:var(--wall);
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:all .15s;letter-spacing:.01em;}
.orient-btn:active{opacity:.75;}

canvas{display:block;border-radius:10px;touch-action:none;cursor:pointer;}
.board-wrap{position:relative;width:100%;display:flex;justify-content:center;overflow:hidden;}

.status-bar{margin-top:10px;font-size:.8rem;color:var(--muted2);text-align:center;min-height:20px;padding:0 8px;}
.status-bar.hi{color:var(--text);}
.bot-thinking{display:inline-flex;align-items:center;gap:6px;}
.dot-anim span{display:inline-block;width:5px;height:5px;background:var(--p2);
  border-radius:50%;animation:blink 1s infinite;}
.dot-anim span:nth-child(2){animation-delay:.2s;}
.dot-anim span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}

.game-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.btn{min-height:44px;padding:8px 18px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;
  font-size:.8rem;font-weight:600;transition:all .14s;}
.btn:hover{border-color:var(--muted2);}
.btn.yellow{border-color:var(--wall);color:var(--wall);}
.btn.yellow:hover{background:var(--surface2);}
.btn-danger{border-color:#f05050;color:#f05050;}
.btn-danger:hover{background:rgba(240,80,80,.12);}

/* Индикатор соединения */
.conn-badge{display:none;font-size:.65rem;padding:2px 8px;border-radius:20px;font-weight:700;letter-spacing:.06em;}
.conn-badge.connected{display:inline-block;background:rgba(100,220,120,.15);color:#64dc78;}
.conn-badge.disconnected{display:inline-block;background:rgba(240,80,80,.15);color:#f05050;}
.conn-badge.waiting{display:inline-block;background:rgba(255,213,79,.15);color:var(--wall);}

/* Win overlay */
.overlay{display:none;position:fixed;inset:0;background:rgba(8,8,16,.88);
  backdrop-filter:blur(8px);align-items:center;justify-content:center;z-index:20;}
.overlay.show{display:flex;}
.overlay-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:24px;
  padding:40px 44px;text-align:center;max-width:320px;width:90%;}
.ov-emoji{font-size:3.2rem;margin-bottom:12px;}
.ov-title{font-size:1.7rem;font-weight:800;margin-bottom:6px;}
.ov-sub{color:var(--muted2);font-size:.88rem;margin-bottom:26px;}
.ov-btns{display:flex;flex-direction:column;gap:10px;}
.ov-btn{min-height:44px;padding:13px;border-radius:12px;border:none;font-family:inherit;
  font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .15s;}
.ov-btn.primary{background:linear-gradient(135deg,var(--p1),#7986cb);color:#fff;}
.ov-btn.secondary{background:var(--surface);border:1.5px solid var(--border);color:var(--text);}
.ov-btn:hover{filter:brightness(1.1);}

/* QR overlay */
.qr-overlay{display:none;position:fixed;inset:0;background:rgba(8,8,16,.92);
  backdrop-filter:blur(10px);align-items:center;justify-content:center;z-index:30;}
.qr-overlay.show{display:flex;}
.qr-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:20px;
  padding:32px 28px;text-align:center;max-width:300px;width:90%;}
.qr-title{font-size:1rem;font-weight:700;margin-bottom:4px;}
.qr-sub{font-size:.75rem;color:var(--muted2);margin-bottom:20px;}
.qr-wrap{background:#fff;border-radius:12px;padding:12px;display:inline-block;margin-bottom:16px;}
.qr-close{width:100%;padding:11px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;}
.qr-close:hover{border-color:var(--muted2);}

/* Лидерборд */
.lb-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-height:50vh;overflow-y:auto;}
.lb-row{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;}
.lb-rank{font-weight:800;color:var(--wall);min-width:26px;text-align:center;}
.lb-name{flex:1;text-align:left;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-score{font-weight:700;color:var(--p1);}