: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;
  user-select:none;-webkit-user-select:none;} /* выделение элементов игры запрещено (треб. 1.6.2.7) */
input,textarea{user-select:text;-webkit-user-select:text;}
/* Браузерная прокрутка запрещена (треб. 1.10.2): экран вписывается масштабом (fitScreen) */
html,body{overscroll-behavior:none;overflow:hidden;height:100%;}
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;-webkit-tap-highlight-color:transparent;}

/* Прелоадер до определения языка через SDK (треб. 2.14) */
#preloader{position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s;}
#preloader.hide{opacity:0;pointer-events:none;}
.pl-spin{width:44px;height:44px;border-radius:50%;
  border:4px solid var(--surface2);border-top-color:var(--p1);
  animation:plspin .8s linear infinite;}
@keyframes plspin{to{transform:rotate(360deg);}}

/* Онлайн скрыт, пока игровой сервер не прошёл CSP-проверку (внутри Яндекса).
   Класс no-online снимается автоматически, если stenki.site достижим. */
.no-online #mc-online{display:none!important;}
.no-online #onlineSection{display:none!important;}

/* Внутри Яндекса приглашение только по КОДУ: ссылка ведёт на домен Яндекса,
   а не на игру, а clipboard/QR в их iframe ненадёжны. Прячем ссылку и QR,
   даём копировать сам код — им и делятся в мессенджере вручную. Вне Яндекса
   код не нужен отдельной кнопкой (там есть прямая ссылка и QR). */
#copyCodeBtn{display:none;}
.yandex-env #copyCodeBtn{display:inline-flex;}
.yandex-env #copyLinkBtn,.yandex-env #qrBtn{display:none;}
.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);}
/* Строка статуса подключения: пока пустая — не занимает место (раньше её
   min-height оставлял мёртвый зазор перед кнопкой «Играть») */
#roomStatus{color:var(--muted2);font-size:.8rem;min-height:20px;margin-top:6px;}
#roomStatus:empty{min-height:0;margin-top:0;}
.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:#ff4d4d;color:#fff;background:#e53935;
  font-size:.95rem;padding:5px 14px;
  box-shadow:0 0 14px rgba(255,60,60,.75),0 0 30px rgba(255,60,60,.35);
  animation:pulse .6s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}

/* Кнопка ориентации стены */
.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-wrap{position:relative;width:96px;height:96px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;}
.ov-emoji{font-size:3.4rem;position:relative;z-index:1;line-height:1;}
/* Лучи света за иконкой (видны только в режиме победы) */
.ov-rays{position:absolute;inset:-30px;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,
    rgba(255,213,79,.0) 0deg, rgba(255,213,79,.35) 18deg, rgba(255,213,79,.0) 36deg,
    rgba(255,213,79,.0) 45deg, rgba(255,213,79,.35) 63deg, rgba(255,213,79,.0) 81deg,
    rgba(255,213,79,.0) 90deg, rgba(255,213,79,.35) 108deg, rgba(255,213,79,.0) 126deg,
    rgba(255,213,79,.0) 135deg, rgba(255,213,79,.35) 153deg, rgba(255,213,79,.0) 171deg,
    rgba(255,213,79,.0) 180deg, rgba(255,213,79,.35) 198deg, rgba(255,213,79,.0) 216deg,
    rgba(255,213,79,.0) 225deg, rgba(255,213,79,.35) 243deg, rgba(255,213,79,.0) 261deg,
    rgba(255,213,79,.0) 270deg, rgba(255,213,79,.35) 288deg, rgba(255,213,79,.0) 306deg,
    rgba(255,213,79,.0) 315deg, rgba(255,213,79,.35) 333deg, rgba(255,213,79,.0) 351deg);
  mask:radial-gradient(circle,transparent 30%,#000 38%,#000 70%,transparent 78%);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 38%,#000 70%,transparent 78%);}
/* Режим победы: трофей подпрыгивает, лучи крутятся, пульсирует свечение */
.ov-emoji-wrap.win .ov-rays{opacity:1;animation:ovSpin 7s linear infinite;}
.ov-emoji-wrap.win .ov-emoji{animation:ovBounce 1s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(255,213,79,.6));}
@keyframes ovSpin{to{transform:rotate(360deg);}}
@keyframes ovBounce{
  0%,100%{transform:translateY(0) scale(1) rotate(-6deg);}
  50%{transform:translateY(-12px) scale(1.12) rotate(6deg);}
}
/* Режим поражения: иконка слегка опускается */
.ov-emoji-wrap.lose .ov-emoji{animation:ovDroop 2.4s ease-in-out infinite;}
@keyframes ovDroop{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(3px) rotate(-3deg);}}
.ov-title{font-size:1.7rem;font-weight:800;margin-bottom:6px;}
.ov-sub{color:var(--muted2);font-size:.88rem;margin-bottom:16px;}
.ov-brag{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 auto 22px;padding:11px 16px;border-radius:14px;font-weight:800;font-size:.95rem;
  color:#ffe9a8;background:linear-gradient(135deg,rgba(255,213,79,.16),rgba(255,138,101,.12));
  border:1.5px solid rgba(255,213,79,.45);box-shadow:0 0 22px rgba(255,213,79,.18);}
.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);}

/* Разделитель в онлайн-секции */
.online-divider{display:flex;align-items:center;gap:10px;width:100%;color:var(--muted);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin:4px 0;}
.online-divider::before,.online-divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* Кнопка подсказки (активное состояние) */
.btn#hintBtn.active{border-color:var(--wall);color:var(--wall);background:var(--surface2);}

/* Эмодзи-реакции */
.emoji-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.emoji-btn{min-height:40px;min-width:40px;font-size:1.2rem;border-radius:10px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;
  transition:all .12s;line-height:1;padding:4px 8px;}
.emoji-btn:hover{border-color:var(--muted2);background:var(--surface2);}
.emoji-btn:active{transform:scale(.9);}
.emoji-bubble{position:absolute;transform:translate(-50%,-100%) scale(.4);
  font-size:3.4rem;opacity:0;pointer-events:none;transition:none;z-index:5;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));}
.emoji-bubble.show{animation:emojiPop 1.8s ease-out forwards;}
@keyframes emojiPop{
  0%{opacity:0;transform:translate(-50%,-100%) scale(.4);}
  15%{opacity:1;transform:translate(-50%,-100%) scale(1.15);}
  30%{transform:translate(-50%,-100%) scale(1);}
  80%{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1);}
  100%{opacity:0;transform:translate(-50%,calc(-100% - 28px)) scale(.9);}
}
/* Вариант «вниз» — когда фишка у верхнего края и пузырь не помещается сверху */
.emoji-bubble.below{transform:translate(-50%,0) scale(.4);}
.emoji-bubble.below.show{animation:emojiPopDown 1.8s ease-out forwards;}
@keyframes emojiPopDown{
  0%{opacity:0;transform:translate(-50%,0) scale(.4);}
  15%{opacity:1;transform:translate(-50%,0) scale(1.15);}
  30%{transform:translate(-50%,0) scale(1);}
  80%{opacity:1;transform:translate(-50%,10px) scale(1);}
  100%{opacity:0;transform:translate(-50%,28px) scale(.9);}
}

/* Туториал */
.tut-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:40;padding:16px;}
.tut-overlay.show{display:flex;}
.tut-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:24px;
  padding:32px 28px;text-align:center;max-width:340px;width:100%;}
.tut-step{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.tut-emoji{font-size:3.4rem;margin-bottom:14px;}
.tut-title{font-size:1.4rem;font-weight:800;margin-bottom:10px;}
.tut-text{color:var(--muted2);font-size:.9rem;line-height:1.6;margin-bottom:26px;}
.tut-btns{display:flex;gap:10px;}
.tut-skip{flex:1;min-height:46px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--muted2);font-family:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;transition:all .14s;}
.tut-skip:hover{border-color:var(--muted2);color:var(--text);}
.tut-next{flex:2;min-height:46px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--p1),#7986cb);color:#fff;font-family:inherit;
  font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .14s;}
.tut-next:hover{filter:brightness(1.1);}

/* Порядок панели на узких экранах (колонка): доска стоит в разметке ПОСЛЕ
   .gs-panel (нужно для широкой раскладки, см. ниже), поэтому визуальный
   порядок на телефонах восстанавливаем через flex order — без этого доска
   уехала бы в самый низ, под кнопки. */
.scoreboard{order:1}
.invite-block{order:2}
.mode-bar{order:3}
.orient-bar{order:4}
.board-wrap{order:5}
.emoji-bar{order:6}
.status-bar{order:7}
.game-actions{order:8}

/* ── ШИРОКАЯ РАСКЛАДКА (десктоп / ландшафтный планшет) ──
   На широких экранах вертикальная колонка оставляла огромные пустые поля
   по бокам (и геймплей <70% кадра на скриншотах — замечание 5.1.1.2).
   Панель управления (gs-panel) — карточкой слева, доска — крупная — справа.
   Телефоны (в т.ч. ландшафтные <980px) остаются на колонке + fitScreen. */
@media (min-width: 980px) and (min-aspect-ratio: 13/10) {
  #gameScreen.active{display:grid;grid-template-columns:360px minmax(0,auto);
    column-gap:44px;align-items:center;align-content:center;justify-content:center;}
  #gameScreen .gs-panel{display:flex;flex-direction:column;gap:16px;
    background:var(--surface);border:1.5px solid var(--border);border-radius:22px;
    padding:26px;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
  /* Карточки игроков в столбик — рядом в узкой 360px-панели текст обрезался */
  #gameScreen .scoreboard{margin-bottom:0;flex-direction:column;}
  #gameScreen .invite-block{margin-bottom:0;}
  #gameScreen .mode-bar{margin-bottom:0;}
  #gameScreen .orient-bar{margin-bottom:0;max-width:none;}
  #gameScreen .emoji-bar{margin-top:0;}
  #gameScreen .status-bar{margin-top:0;}
  #gameScreen .game-actions{margin-top:0;}
  #gameScreen .board-wrap{width:auto;}
}
.gs-panel{display:contents;}

/* ── ШИРОКОЕ МЕНЮ (десктоп / планшет) ──
   Одной колонкой 400px меню висело узкой полоской посреди пустого экрана.
   На широких экранах: слева лого-«герой», справа карточка с управлением.
   Порог ниже игрового (880px, без требования к пропорциям), т.к. меню
   компактнее доски и две колонки помещаются даже в почти квадратном окне.
   Обёртки на узких экранах — display:contents, разметка остаётся как была. */
.menu-hero,.menu-panel{display:contents;}

@media (min-width: 880px) and (min-height: 560px) {
  #menuScreen.active{display:grid;max-width:none;
    grid-template-columns:minmax(260px,360px) minmax(0,400px);
    column-gap:56px;align-items:center;justify-content:center;}
  #menuScreen .menu-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;}
  #menuScreen .logo-wrap{margin-bottom:0;}
  /* Лого крупнее — оно теперь несёт всю левую половину */
  #menuScreen .logo-grid{grid-template-columns:repeat(5,24px);grid-template-rows:repeat(5,24px);gap:5px;}
  #menuScreen .lg{width:24px;height:24px;border-radius:4px;}
  #menuScreen .game-title{font-size:3.2rem;}
  #menuScreen .game-tagline{font-size:.95rem;}

  #menuScreen .menu-panel{display:flex;flex-direction:column;align-items:center;
    background:var(--surface);border:1.5px solid var(--border);border-radius:22px;
    padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
  /* Внутри карточки секции уже не нуждаются в большом нижнем отступе */
  #menuScreen .menu-panel .menu-section{margin-bottom:20px;}
  #menuScreen .menu-panel > *:last-child{margin-bottom:0;}
  /* Правила раскрываются под карточкой, не растягивая её */
  #menuScreen .rules-box{text-align:left;}
}