* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0f1115; color: #e6e6e6; }
/* === shared wood background for room/menu/chat === */
:root{
  --mm-wood-bg:
    linear-gradient(180deg, rgba(46,18,8,.26) 0%, rgba(28,11,5,.34) 100%),
    url("./assets/ui/fon.webp") center / cover no-repeat;
}

#app { display: grid; grid-template-columns: 1fr 360px; height: 100vh; }
#left { position: relative; }
#c { width: 100%; height: 100%; display: block; background: #0b0d11; }
#hint { position: absolute; left: 12px; bottom: 12px; padding: 8px 10px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; font-size: 12px; }
#right { padding: 14px; overflow: auto; border-left: 1px solid rgba(255,255,255,0.08); background: #111521; }
h2 { margin: 0 0 10px; font-size: 18px; }
.card { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; background: rgba(255,255,255,0.03); margin-bottom: 10px; }
.card.small { font-size: 12px; opacity: 0.9; }
.row { display: flex; gap: 8px; margin-top: 10px; }
button { padding: 10px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #e6e6e6; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
pre { margin: 10px 0 0; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); min-height: 180px; white-space: pre-wrap; }

.turnTimer{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.turnTimer.urgent{
  border-color: rgba(255,120,120,0.45);
}
/* dev-only блоки скрыты по умолчанию */
.dev-only { display: none !important; }

/* если включили dev-режим — показываем */
html.dev .dev-only { display: block !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#app {
  height: var(--app-height, 100dvh);      /* фиксируем высоту, чтобы клавиатура не дёргала доску */
  display: flex;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

#left {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

#right {
  flex: 0 0 360px;     /* ширина панели на ПК */
  max-width: 420px;
  min-width: 300px;
  overflow: auto;
}

/* canvas должен реально занимать место */
#c {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* МОБИЛА / Telegram: делаем колонкой, чтобы доска была сверху */
@media (max-width: 900px) {
  #app {
    flex-direction: column;
    padding: 0;   /* было 12px */
    gap: 0;       /* было 12px */
  }

  #left {
    height: 58dvh;     /* доска сверху */
  }

  #right {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 42dvh;     /* панель снизу */
  }
}

/* Canvas must receive touch */
#c {
  touch-action: none;           /* ключевое */
  -webkit-user-select: none;
  user-select: none;
}
html, body {
  overscroll-behavior: none;
}

#hint { pointer-events: none; }

.hidden{ display:none !important; }
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:9999; }

.mm-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10000;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
}
.mm-fab:active{ transform: scale(0.98); }

/* --- HUD (поверх доски) --- */
.hud{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 5000; /* ниже оверлеев (9999), но выше доски */
  width: min(520px, 96vw);
  background: rgba(17,17,17,.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px;
  backdrop-filter: blur(6px);
}

.hudTop{
  display:flex;
  justify-content:center;
  gap:8px;
  font-size: 13px;
  opacity: .9;
  margin-bottom: 8px;
  user-select: none;
}

.hudDot{ opacity:.6; }

.hudRow{
  display:flex;
  gap:10px;
}

.hudRow button{
  flex: 1;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #e6e6e6;
  cursor: pointer;
  font-size: 16px;
}

.hudRow button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* --- legacy panel: скрыта визуально, но жива для game.js --- */
#right.legacyHidden{
  position: fixed !important;
  left: -100000px !important;
  top: -100000px !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Добиваем любые "мигания" скрытой панели в Telegram WebView */
#right.legacyHidden{
  z-index: -1 !important;
  contain: strict !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* HUD на отдельном слое (меньше артефактов с blur/opacity) */
.hud{
  transform: translateX(-50%) translateZ(0);
  will-change: transform;
}

/* навсегда прячем старый таймер, чтобы не мигал рядом с HUD */
#turnTimer { display: none !important; }

/* === UI tweak: hide Buyback button (выкуп) in both old and HUD UI === */
#btnBuyback, #hudBuyback { display: none !important; }

/* Make HUD actions single-button layout when buyback hidden */
.hudBottom .actions { grid-template-columns: 1fr !important; }
.hudBottom .actions button { width: 100%; }

/* === HUD indicator: bigger, clearer, 2-line layout === */
.hudTop{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  justify-content: stretch;
  font-size: 16px;
  line-height: 1.15;
}
.hudDot{ display: none !important; }
#hudCur{ grid-column: 1; grid-row: 1; font-weight: 800; }
#hudDice{ grid-column: 1; grid-row: 2; font-weight: 700; }
#hudTimer{ grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-weight: 800; opacity: .9; }

.hudLabel{ font-weight: 700; opacity: .20; margin-right: 6px; }
.eq{ opacity: .8; margin: 0 6px; }
.startWrap{ display:flex; flex-wrap:wrap; gap: 6px 12px; }
.startItem{ display:inline-flex; gap:6px; align-items: baseline; }

.c-name{ font-weight: 900; }
.c-gray{ color: #cfd3d8; }
.c-red{ color: #ff6b6b; }
.c-yellow{ color: #ffd34d; }
.c-green{ color: #56e07b; }

.dicePair{ font-weight: 900; font-size: 18px; letter-spacing: .5px; }
.die.used{ opacity: .35; }
.noMove{ opacity: .8; font-weight: 700; font-size: 13px; margin-left: 8px; }

/* === FULLSCREEN BOARD (Contain) === */
#app{
  padding: 0 !important;
  gap: 0 !important;
  height: var(--app-height, 100dvh) !important;
}

#left{
  border-radius: 0 !important;  /* чтобы доска прям от края до края */
}

/* мобилка / Telegram: не ограничиваем доску 58dvh */
@media (max-width: 900px){
  #left{
    height: auto !important;
    flex: 1 1 auto !important;
  }
}


/* =========================================================
   ROLL ORB BUTTON (board overlay)
   White semi-transparent "fog ball" with spinning dice icon.
   Shows only when roll is available (controlled by index.html).
   ========================================================= */
#hudRoll { display: none !important; } /* old visible button; logic stays in #btnRoll */

.roll-orb{
  position: absolute;
  left: var(--roll-orb-x, 18px);
  top: var(--roll-orb-y, 18px);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 6000;

  /* если у тебя уже есть --roll-orb-size — будет масштабироваться;
     если нет — будет как раньше 92px */
  width: var(--roll-orb-size, 92px);
  height: var(--roll-orb-size, 92px);

  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 999px;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* почти прозрачный шар (без размытия, чтобы тигр был чёткий) */
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255,255,255,0.42),
      rgba(255,255,255,0.29) 55%,
      rgba(255,255,255,0.095) 78%,
      rgba(255,255,255,0.00) 100%
    );

  /* КЛЮЧЕВОЕ: убираем “матовое стекло”, иначе будет мутно */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow:
    0 6px 16px rgba(0,0,0,0.12),
    inset 0 1px 8px rgba(255,255,255,0.08);
}

/* Лёгкий контур вокруг шара (не влияет на анимацию orbPulse) */
.roll-orb::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* белый тонкий контур */
  border: 1px solid rgba(255,255,255,0.22);

  /* лёгкий тёмный “обвод” снаружи для читаемости на светлом тигре */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
}


.roll-orb.is-visible{
  display: flex;
}

.roll-orb__glow{
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 70%);
  filter: blur(3px);
  opacity: .10;
  pointer-events:none;
}

.roll-orb__dice{
  position: relative;
  width: calc(var(--roll-orb-size, 92px) * 0.73);
  height: calc(var(--roll-orb-size, 92px) * 0.73);
  display: grid;
  place-items: center;
  opacity: .95;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35));

  /* было diceSpin... — убираем вращение */
  animation: none;
}

.roll-orb__dice-img{
  width: 100%;
  height: 100%;
  display: block;        /* убирает лишний “зазор” снизу у img */
  object-fit: contain;   /* вписывает без обрезки */
  pointer-events: none;  /* чтобы клик всегда был по кнопке */
  user-select: none;
}

.roll-orb.is-active{
  animation: orbPulse 1.55s ease-in-out infinite;
}

.roll-orb:active{
  transform: translate(-50%, -50%) scale(0.98);
}

@keyframes orbPulse{
  0%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 8px rgba(255,255,255,0.08); }
  50%  { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,0.16), inset 0 1px 10px rgba(255,255,255,0.10); }
  100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 8px rgba(255,255,255,0.08); }
}

@keyframes diceSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* === HUD: показываем кнопку "Готов" в лобби; в игре HUD прячется через JS (syncHud) === */
/* === таймер над доской === */
.boardTimer{
  position: relative;
  left: auto;
  top: auto;
  z-index: 6500;
  pointer-events: none;
  align-self: flex-start;
  margin: 0 0 4px 12px;

  /* меньше примерно в 2 раза */
  font-size: 12px;
  padding: 3px 7px;
  gap: 6px;
  border-radius: 8px;
  line-height: 1.15;
}


/* Online (mmFab) больше не используем */
.mm-fab{ display:none !important; }


/* ===========================
   Boot / Loading overlay
   Fullscreen splash (single image) + rounded progress bar
   =========================== */
.bootOverlay{
  position: fixed;
  inset: 0;
  z-index: 10000; /* выше всех overlay */
  background: #050607; /* важно: чтобы не было белого/пустого фона пока картинка грузится */
}

/* сама картинка заставки */
.bootBg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
}

/* затемнение/градиент поверх картинки для читаемости шкалы */
.bootShade{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.78) 100%
  );
}

.bootBottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.bootBar{
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.bootBarFill{
  height: 100%;
  width: 1%;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  transition: width .15s linear;
}
.bootText{
  color: #fff;
  font-family: system-ui;
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}
/* ===========================
   Main menu: wood background + plank buttons
   =========================== */
#menuOverlay.menuWood{
  background: #201510 url("./assets/ui/fon.webp") center / cover no-repeat;
  overflow: hidden;
}
#menuOverlay.menuWood::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.30);
}
#menuOverlay.menuWood > *{
  position: relative;
  z-index: 1;
}

.menuMain{
  width: min(640px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuTitle{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
  margin: 0 0 6px;
}


.menuLogo{
  width: min(520px, 86vw);
  height: 110px;
  margin: 0 0 2px;
  background: url("./assets/ui/logo_dice.webp?v=1") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
  transform: translateZ(0);
}

@media (max-height: 720px){
  .menuLogo{ height: 115px; }
}
.menuBtns{
  width: min(560px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.plankBtn{
  width: min(560px, 96vw);
  max-width: 560px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plankBtn img{
  width: 100%;
  height: auto;

  transform-origin: 50% 50%;
  transition: transform 140ms ease;
  will-change: transform;
  display: block;
  transform: translateZ(0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
.plankBtn:hover img{
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.45));
}
.plankBtn:active img{
  transform: translateY(1px) scale(0.99);
}
.plankBtn:disabled{
  cursor: not-allowed;
}
.plankBtn:disabled img{
  opacity: 0.55;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25)) grayscale(0.25);
}

.menuCard{
  max-width: 420px;
  width: min(420px, 92vw);
  text-align: center;
}

@media (max-height: 720px){
  .menuTitle{ font-size: 30px; }
  .menuBtns{ gap: 6px; }
}


/* ===========================
   Play menu: square wood tiles
   =========================== */
.srOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menuPlay{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuPlayInner{
  width: min(280px, 85vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.menuTiles{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* TUNE: Play tiles position (screen scrPlay) */
#scrPlay .menuTiles{
  transform: translateY(12px);
}

/* опустить только плитку "Играть против людей" */
#scrPlay #mVsPeople.tileBtn{
  margin-top: 14px;
  transition: transform 80ms ease;
}


.tileBtn{
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transform: translateZ(0);
  outline: none;
}

.tileBtn img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  /* FIX: убираем тонкую "прозрачную" рамку по краям (антиалиас клипа) */
  transform: scale(1.02) translateZ(0);
  will-change: transform;
}

.tileBtn:hover{
  box-shadow: none;
}
.tileBtn:active{
  transform: translateY(1px) scale(0.99);
}

/* scrPlay: заметный эффект "просадки" у плиток */
#scrPlay .tileBtn:active{
  transform: translateY(2px) scale(0.985) translateZ(0);
}
#scrPlay .tileBtn:active img{
  filter: brightness(0.96);
}

.tileBtn:focus,
.tileBtn:focus-visible{
  outline: none !important;
}

.tileBtn:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  filter: grayscale(0.15);
}

.menuBackBtn{
  width: min(560px, 96vw);
  max-width: 360px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menuBackBtn:active{
  transform: translateY(1px);
}

@media (max-width: 420px){
  .menuTiles{
    grid-template-columns: 1fr;
  }
}
/* === TUNE: Back button (Play screen) ===
   Это ТОЛЬКО для кнопки "Назад" на экране:
   Главн.меню -> Играть -> (Играть против людей / Играть с ботом) -> Назад
   HTML: <div id="scrPlay"> ... <button id="mBack1" class="menuBackBtn">...</button>
   Крути тут цифры (max-width / width / margin-top) сколько хочешь.
*/
#scrPlay #mBack1.menuBackBtn{
  /* Размер (ширина кнопки). Примеры для экспериментов:
     180px, 200px, 220px, 240px, 260px
  */
  width: min(180px, 70vw);
  max-width: 220px;

  /* Центрирование по горизонтали + отступ сверху */
  display: block;
  margin: -18px auto 0;

  /* УБИРАЕМ серую рамку/фон вокруг деревянной картинки */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  /* чтобы вокруг картинки не было “поля” */
  padding: 0 !important;
  border-radius: 0 !important;

  -webkit-appearance: none;
  appearance: none;
}

#scrPlay #mBack1.menuBackBtn:focus,
#scrPlay #mBack1.menuBackBtn:focus-visible{
  outline: none !important;
}

/* Если захочешь отдельно уменьшать саму картинку внутри кнопки — можно трогать тут.
   Обычно НЕ нужно, достаточно ширины кнопки выше. */
#scrPlay #mBack1.menuBackBtn img{
  width: 100%;
  height: auto;
  display: block;
}


/* ===========================
   People menu: two big plaques (Invite / Find) like screenshot
   (offsets tuned to match scrPlay: "Играть против людей / Играть с ботом")
   =========================== */
.menuPeople{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuPeopleInner{
  width: min(280px, 85vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.menuPeopleTiles{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px; /* расстояние между 2 табличками */
}

/* как в экране "Играть" (scrPlay) — лёгкий сдвиг плиток вниз */
#scrPeople .menuPeopleTiles{
  transform: translateY(12px);
}

/* как "Играть против людей" в scrPlay — чуть опускаем верхнюю плитку */
#scrPeople #mInvite.tileBtn{
  margin-top: 14px;
  transition: transform 80ms ease;
}

/* Back: те же отступы/размеры, что #scrPlay #mBack1 */
#scrPeople #mBack2.menuBackBtn{
  width: min(180px, 70vw);
  max-width: 220px;

  display: block;
  margin: -18px auto 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  border-radius: 0 !important;

  -webkit-appearance: none;
  appearance: none;

  opacity: 0.98;
}
#scrPeople #mBack2.menuBackBtn img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-height: 720px){
  #scrPeople .menuPeopleTiles{ gap: 16px; }
  #scrPeople #mBack2.menuBackBtn{ margin: -12px auto 0; }
}


/* ===========================
   Bot difficulty menu: two wood buttons + back
   =========================== */
.menuBot{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuBotInner{
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.menuBotBtns{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: translateY(8px);
}

/* ВАЖНО:
   у этих двух кнопок визуальный размер сильно зависит от прозрачных полей внутри webp.
   Чтобы движение реально чувствовалось, жёстко убираем "воздух" у самой кнопки
   и слегка подрезаем картинку сверху/снизу отрицательными margin у img.
*/
#scrBot .botModeBtn{
  width: min(320px, 84vw);
  max-width: 320px;

  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;

  line-height: 0;
  overflow: hidden;

  -webkit-appearance: none;
  appearance: none;
}

#scrBot .botModeBtn img{
  width: 100%;
  height: auto;
  display: block;

  /* немного убираем прозрачный холст сверху/снизу у webp,
     чтобы кнопки реагировали на отступы предсказуемо */
  margin: -10px 0;
}

#scrBot #mBotEasy.botModeBtn{
  margin-top: 12px;
}

#scrBot #mBotHard.botModeBtn{
  margin-top: -10px;
}

#scrBot #mBackBot.menuBackBtn{
  width: min(180px, 70vw);
  max-width: 220px;

  display: block;
  margin: -24px auto 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  border-radius: 0 !important;

  -webkit-appearance: none;
  appearance: none;

  opacity: 0.98;
}

#scrBot #mBackBot.menuBackBtn img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-height: 720px){
  #scrBot .botModeBtn img{ margin: -8px 0; }
  #scrBot #mBackBot.menuBackBtn{ margin: -18px auto 0; }
}


/* ===========================
   Invite menu: choose 2/3/4 + Invite + Back
   =========================== */
.menuInvite{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuInviteInner{
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.inviteSizeBox{
width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 12px;


}

.inviteSizeBtn{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  border-radius: 18px;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;

  outline: none;
  box-shadow: none;

  /* 👇 важно: тап только в пределах таблички, без “лишнего поля” */
  clip-path: inset(6px round 18px);

  /* тень переносим на кнопку, чтобы clip-path не резал тень у картинки */

  /* removed: shadow around 2/3/4 buttons */
  filter: none;
transition: transform 120ms ease, filter 120ms ease;
  transform: translateZ(0);
}

.inviteSizeBtn img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: none;
  transform: translateZ(0);
}

.inviteSizeBtn:focus,
.inviteSizeBtn:focus-visible{
  outline: none;
  box-shadow: none;
}


.inviteSizeBtnTop{
  width: calc((100% - 14px)/2);
  max-width: 240px;


}

.inviteSizeRow{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.inviteSizeRow .inviteSizeBtn{
  width: 100%;
}

.inviteSizeBtn:active img{
  transform: translateY(1px) scale(0.99);
}

/* ВЫБРАНО: без белой обводки — просто лёгкое увеличение таблички */
.inviteSizeBtn[aria-pressed="true"]{
  transform: scale(1.17) translateZ(0);
  filter: none;
z-index: 2;
  outline: none;
  box-shadow: none;
}



.inviteHiddenSelect{
  position: absolute;
  left: -100000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inviteActionBtn{
  width: min(320px, 84vw);
  max-width: 320px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;

  /* тап только по дощечке */
  clip-path: inset(6px round 18px);

  /* тень — на кнопку (чтобы не резалась) */
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.42));
}

.inviteActionBtn img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: none;
}



.inviteActionBtn:active img{
  transform: translateY(1px) scale(0.99);
}

.inviteHint{
  min-height: 18px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Back button in menu is an image plank */
.menuBackBtn{
  width: min(360px, 92vw);
  max-width: 360px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.menuBackBtn img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.menuBackBtn:active img{
  transform: translateY(1px) scale(0.99);
}

.menuBackBtn:disabled img{
  opacity: 0.55;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25)) grayscale(0.25);
}


/* Invite screen back button should match other menus */
.menuInvite .inviteBackBtn,
.menuFind .inviteBackBtn{
  width: min(180px, 70vw);
  max-width: 220px;
  display: block;
  margin: -18px auto 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  /* тап только по кнопке-табличке */
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  clip-path: inset(6px round 18px);

  /* тень — на кнопку */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

/* иначе тень у img будет обрезаться clip-path-ом */
.menuInvite .inviteBackBtn img,
.menuFind .inviteBackBtn img{
  filter: none !important;
}




/* ----------------------------
   FIND (Искать соперника): тонкая подгонка
   - "Искать" чуть меньше
   - блок 2/3/4 чуть ниже (как в Invite)
----------------------------- */
.menuFind #mFindGo.inviteActionBtn{
  width: min(280px, 78vw);
  max-width: 280px;
}

.menuFind .inviteSizeBox{
  margin-top: 26px; /* было 12px */
}


/* Matchmaking search overlay (wood style) */

#mmOverlay.menuWood{
  background: #201510 url("./assets/ui/fon.webp") center / cover no-repeat;
  overflow: hidden;
}
#mmOverlay.menuWood::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.30);
}
#mmOverlay.menuWood > *{
  position: relative;
  z-index: 1;
}

.mmSearchWrap{
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mmSearchTitle{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  margin-top: 10px;
}

.mmDots{
  display: inline-flex;
  gap: 6px;
  transform: translateY(2px);
}

.mmDots i{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  opacity: 0.25;
  animation: mmDotBlink 1.15s infinite ease-in-out;
}

.mmDots i:nth-child(2){ animation-delay: .15s; }
.mmDots i:nth-child(3){ animation-delay: .30s; }

@keyframes mmDotBlink{
  0%, 80%, 100% { opacity: 0.20; transform: translateY(0); }
  30% { opacity: 0.95; transform: translateY(-2px); }
}

.mmFound{
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}

.mmQueueStatus{
  min-height: 18px;
  text-align: center;
  font-size: 15px;
  opacity: .92;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.mmQueueError{
  color: #ff6b6b;
  white-space: pre-wrap;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.mmCancelBtn{ margin-top: 6px; }

.mmHiddenControls{
  position: absolute;
  left: -100000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


/* ===========================
   Inventory screen (boards list)
   =========================== */
.menuInventory{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.menuInventoryInner{
  width: min(640px, 92vw);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invHeader{
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
.invTitle{
  font-size: 26px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}
.invSub{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}

.invGrid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 2px 2px 2px 2px;
  overflow: auto;
  max-height: min(56vh, 520px);
}

.invCard{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.invCard:active{
  transform: translateY(1px);
  background: rgba(0,0,0,0.36);
}

.invCard.isSelected{
  border-color: rgba(255,255,255,0.40);
  background: rgba(0,0,0,0.44);
}

/* Inventory: switching overlay on card (board смена без "boot") */
.invSwitchOverlay{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.46);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
  z-index: 5;
}

.invCard.isSwitching .invSwitchOverlay{
  display: flex;
}

.invCard.isSwitching{
  pointer-events: none;
}

.invThumb{
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08) center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.14);
  flex: 0 0 auto;
}

.invMeta{
  min-width: 0;
  flex: 1 1 auto;
}

.invName{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.15;
}

.invDesc{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.86;
  line-height: 1.2;
}

.invCheck{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
}

.invHint{
  min-height: 18px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  opacity: 0.85;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

#scrInventory #mBackInv.menuBackBtn{
  width: min(180px, 70vw);
  max-width: 220px;

  display: block;
  margin: 6px auto 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  border-radius: 0 !important;

  -webkit-appearance: none;
  appearance: none;
}

#scrInventory #mBackInv.menuBackBtn:focus,
#scrInventory #mBackInv.menuBackBtn:focus-visible{
  outline: none !important;
}


/* Inventory: "Посмотреть" button */
.invViewBtn{
  flex: 0 0 auto;
  align-self: center;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 10px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.95);

  font-weight: 900;
  font-size: 12px;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.invViewBtn:active{
  transform: translateY(1px) scale(0.99);
  background: rgba(0,0,0,0.32);
}

.invViewBtn:focus,
.invViewBtn:focus-visible{
  outline: none;
}

.invEye{
  font-size: 14px;
  line-height: 1;
}

.invViewTxt{
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 360px){
  .invViewTxt{ display: none; }
  .invViewBtn{ padding: 8px; }
}

/* Inventory: board preview screen (uses menu wood background) */
.menuBoardPreview{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.boardPreviewInner{
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 20px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.boardPreviewStage{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Кнопка поворота под доской (картинкой) */
.previewRotateImageBtn{
  width: min(150px, 58vw);
  max-width: 170px;

  display: block;
  margin: 0 auto;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 0;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.previewRotateImageBtn:focus,
.previewRotateImageBtn:focus-visible{
  outline: none !important;
}

.previewRotateImageBtn img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.previewRotateImageBtn:active img{
  transform: translateY(1px) scale(0.99);
}

.boardPreviewImg{
  width: 100%;
  box-sizing: border-box;
max-width: 100%;
height: auto;

  /* оставляем место под кнопку поворота и кнопку назад */
  max-height: calc(100vh - 280px);
  object-fit: contain;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}

/* Кнопка "Назад" как в инвентаре (картинкой) */
#scrBoardPreview #mBackPreview.menuBackBtn{
  width: min(180px, 70vw);
  max-width: 220px;

  display: block;
  margin: -6px auto 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  border-radius: 0 !important;

  -webkit-appearance: none;
  appearance: none;
}

#scrBoardPreview #mBackPreview.menuBackBtn:focus,
#scrBoardPreview #mBackPreview.menuBackBtn:focus-visible{
  outline: none !important;
}

#scrBoardPreview #mBackPreview.menuBackBtn img{
  width: 100%;
  height: auto;
  display: block;
}




/* === PLAYER PLATES ABOVE BOARD === */
.player-plates{
  --plate-max-width: 620px;
  --plate-height: 125px;
  --plate-gap-x: 12px;
  --plate-gap-y: 14px;
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  column-gap: var(--plate-gap-x);
  row-gap: var(--plate-gap-y);
  justify-items: center;
  align-content: start;
  align-items: stretch;
  padding: 10px 12px 8px;
  background: transparent;
}

.player-plates:empty{
  display: none;
}

.player-plates[data-count="1"]{
  grid-template-columns: minmax(0, 1fr);
  --plate-max-width: min(96vw, 820px);
}

.player-plates[data-count="2"]{
  grid-template-columns: minmax(0, 1fr);
  --plate-max-width: min(96vw, 820px);
}

.player-plates[data-count="3"]{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --plate-max-width: min(48vw, 580px);
}

.player-plates[data-count="3"] .player-plate:first-child{
  grid-column: 1 / -1;
  width: min(100%, min(96vw, 820px));
}

.player-plates[data-count="4"]{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --plate-max-width: min(48vw, 580px);
}

.player-plate{
  position: relative;
  width: min(100%, var(--plate-max-width));
  min-height: var(--plate-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 60px 18px 44px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: url("./assets/ui/player_plate.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
  --plate-shift-y: 0px;
  transform: translateY(var(--plate-shift-y)) translateZ(0);
  transition:
    transform .18s ease,
    filter .18s ease,
    opacity .18s ease;
}

.player-plates[data-count="2"] .player-plate,
.player-plates[data-count="1"] .player-plate{
  width: min(100%, min(96vw, 820px));
}

.player-plate::before,
.player-plate::after{
  display: none;
}



.player-plate.is-active{
  transform: translateY(calc(var(--plate-shift-y) - 1px)) scale(1.012) translateZ(0);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.34));
}

.player-plate.is-waiting{
  opacity: .76;
}

.player-plate__badge{
  display: none !important;
}

.player-plate__name{
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: clamp(22px, 2.65vw, 33px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .015em;
  color: #31180d;
  text-shadow:
    0 1px 0 rgba(255,225,180,.25),
    0 2px 3px rgba(59,28,10,.22),
    0 0 1px rgba(59,28,10,.24);
}

.player-plates[data-count="2"] .player-plate__name,
.player-plates[data-count="1"] .player-plate__name,
.player-plates[data-count="3"] .player-plate:first-child .player-plate__name{
  font-size: clamp(24px, 3.3vw, 36px);
}

.player-plates[data-count="4"] .player-plate__name,
.player-plates[data-count="3"] .player-plate__name{
  font-size: clamp(20px, 2.35vw, 31px);
}

.player-plate__name--waiting{
  color: rgba(57,28,13,.78);
}

.player-plate__turn{
  display: none !important;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(92,42,11,.96);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,220,170,.18);
  box-shadow: none;
  transition:
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.player-plate__turn::before{
  display: none;
}

.player-plate__turn:empty{
  display: none;
}

.player-plate.is-active .player-plate__turn{
  display: none !important;
  color: rgba(92,42,11,.96);
}

@media (max-width: 900px){
  .player-plates{
    --plate-height: 103px;
    --plate-gap-x: 8px;
    --plate-gap-y: 4px;
    padding: calc(20px + env(safe-area-inset-top)) 8px 0;
    position: relative;
    top: 24px;
    margin-bottom: -24px;
  }

  .player-plates[data-count="3"],
  .player-plates[data-count="4"]{
    --plate-max-width: min(47.5vw, 372px);
  }

  .player-plates[data-count="2"],
  .player-plates[data-count="1"]{
    --plate-max-width: min(96vw, 470px);
  }

  /* Поднимаем только нижнюю табличку в режиме 1x1 на мобилке.
     Через transform, а не через top/margin у контейнера — поэтому верхняя табличка
     и остальная вёрстка больше никуда не уезжают. */
  .player-plates[data-count="2"] .player-plate:last-child{
    --plate-shift-y: -14px;
  }

  .player-plates[data-count="3"] .player-plate:first-child{
    width: min(100%, min(96vw, 470px));
  }

  .player-plate{
    border-radius: 24px;
    padding: 17px 50px 17px 34px;
  }

  .player-plates[data-count="2"] .player-plate__name,
  .player-plates[data-count="1"] .player-plate__name,
  .player-plates[data-count="3"] .player-plate:first-child .player-plate__name{
    font-size: clamp(20px, 5.8vw, 30px);
  }

  .player-plates[data-count="4"] .player-plate__name,
  .player-plates[data-count="3"] .player-plate__name{
    font-size: clamp(17px, 4.25vw, 25px);
  }

  .player-plate__turn{
    display: none !important;
    right: 14px;
    font-size: 11px;
  }
}


/* === ROOM CHAT BOTTOM + TIMER ABOVE BOARD === */
#left{
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mm-wood-bg);
}

#boardStage{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--mm-wood-bg);
}

#c{
  width: 100%;
  height: 100%;
}

.room-chat{
  --room-mobile-chat-height: clamp(184px, 26dvh, 220px);
  --room-mobile-lobby-height: var(--room-mobile-chat-height);
  --room-mobile-title-width: min(158px, calc(100vw - 208px));
  --room-mobile-toggle-width: min(142px, calc(100vw - 222px));
  --room-mobile-invite-width: min(154px, calc(100vw - 210px));

  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(46,18,8,.26) 0%, rgba(28,11,5,.34) 100%),
    url("./assets/ui/fon.webp") center / cover no-repeat;
  border-top: 1px solid rgba(255,220,170,.08);
  border-bottom: 0;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.16);
}

.room-chat--bottom{
  margin-top: 0;
}

.room-chat--lobby{
  gap: 0;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  justify-content: center;
  overflow: hidden;
}

.room-lobby{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
}

.room-lobby__title{
  width: min(204px, 58vw);
  line-height: 0;
  overflow: hidden;
  margin: 4px 0 -18px;
}

.room-lobby__title img{
  width: 100%;
  height: auto;
  display: block;
  margin: -10px 0 -14px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.30));
}

.room-lobby__toggle{
  width: min(182px, 52vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: -2px;
}

.room-lobby__btn{
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 0;
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
}

.room-lobby__btn img{
  width: 100%;
  height: auto;
  display: block;
  margin: -6px 0 -8px;
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.30));
}

.room-lobby__btn.is-active img{
  transform: translateY(-1px) scale(1.01);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.36)) saturate(1.03);
}

.room-lobby__btn:active img{
  transform: translateY(1px) scale(0.988);
}

.room-lobby__btn:disabled img{
  opacity: 0.7;
}

.room-lobby__btn.is-active:disabled img{
  opacity: 1;
}

.room-lobby__btn--invite{
  width: min(170px, 48vw);
  margin-top: -4px;
}

.room-chat__messages{
  height: 118px;
  flex: 0 0 118px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(12,6,4,0.10);
  border-radius: 10px;
}

.room-chat__empty{
  font-size: 16px;
  line-height: 1.35;
  opacity: .52;
}

.room-chat__msg{
  font-size: 16px;
  line-height: 1.3;
  color: rgba(255,255,255,.96);
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}

.room-chat__name{
  font-weight: 800;
  color: rgba(255,248,235,.99);
  margin-right: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.room-chat__text{
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}

.room-chat__composer{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
}

.room-chat__input{
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,245,220,0.12);
  background: rgba(18,10,6,0.48);
  color: #fff;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.room-chat__input::placeholder{ color: rgba(255,235,215,.46); }
.room-chat__input:focus{
  border-color: rgba(255,220,170,0.24);
  background: rgba(22,12,7,0.60);
}

.room-chat__send{
  width: 132px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  line-height: 0;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.room-chat__send img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.room-chat__send:active img{
  transform: translateY(1px) scale(0.985);
}

.room-chat__send:disabled img{
  filter: grayscale(0.2);
}

.room-chat__messages::-webkit-scrollbar{ width: 6px; }
.room-chat__messages::-webkit-scrollbar-thumb{
  background: rgba(255,220,170,0.24);
  border-radius: 999px;
}

@media (max-width: 900px){
  #left{
    height: var(--app-height, 100dvh) !important;
    justify-content: flex-end;
  }

  .boardTimer{
    margin: 0 0 2px 10px;
  }

  #boardStage{
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .room-chat{
    padding: 4px 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
    gap: 4px;
  }

  .room-chat--lobby{
    flex: 0 0 var(--room-mobile-chat-height);
    height: var(--room-mobile-chat-height);
    min-height: var(--room-mobile-chat-height);
    max-height: var(--room-mobile-chat-height);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) 8px !important;
    gap: 0 !important;
    justify-content: center;
  }

  .room-lobby{
    height: 100%;
    gap: 0;
    justify-content: center;
  }

  .room-lobby__title{
    width: var(--room-mobile-title-width);
    max-width: 100%;
    margin: 8px 0 -16px;
  }

  .room-lobby__toggle{
    width: var(--room-mobile-toggle-width);
    gap: 4px;
    margin-top: 0;
  }

  .room-lobby__btn--invite{
    width: var(--room-mobile-invite-width);
    margin-top: -2px;
  }

  .room-lobby__title img,
  .room-lobby__btn img{
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.26));
  }

  .room-lobby__title img{
    margin: -10px 0 -12px;
  }

  .room-lobby__btn img{
    margin: -6px 0 -8px;
  }

  .room-chat__messages{
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    flex: 0 0 108px;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .room-chat__messages::before{
    content: none;
  }

  .room-chat__messages > *{
    flex-shrink: 0;
  }

  .room-chat__messages > :first-child{
    margin-top: 0 !important;
  }

  .room-chat__composer{
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 0;
    align-items: end;
    margin: 0 !important;
    padding: 0 !important;
  }

  .room-chat__input,
  .room-chat__send{
    align-self: end;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .room-chat__input{
    transform: none !important;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    height: 40px;
    border-radius: 14px;
    font-size: 16px;
    padding: 0 18px;
  }

  .room-chat__send{
    width: 136px;
    height: 62px;
    border-radius: 18px;
    justify-self: end;
    margin-right: -8px;
    overflow: hidden;
    transform: translateY(12px) !important;
  }

  .room-chat__send img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transform-origin: center;
  }

  .room-chat__send:active img{
    transform: translateY(1px) scale(1.05);
  }
}


/* === CHAT GAP FIX: compact mobile room chat, remove inherited <pre> spacing === */
.room-chat__messages,
pre.room-chat__messages{
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 4px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px){
  .room-chat{
    gap: 0 !important;
    padding: 3px 8px calc(6px + env(safe-area-inset-bottom)) 8px !important;
  }

  .room-chat--lobby{
    flex: 0 0 var(--room-mobile-chat-height) !important;
    height: var(--room-mobile-chat-height) !important;
    min-height: var(--room-mobile-chat-height) !important;
    max-height: var(--room-mobile-chat-height) !important;
    padding: 0 8px calc(6px + env(safe-area-inset-bottom)) 8px !important;
    justify-content: center !important;
  }

  .room-chat__messages,
  pre.room-chat__messages{
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
  }
}

/* === LOBBY ALIGNMENT FIX v2 ===
   В лобби нижняя панель должна занимать ту же высоту, что и нижняя чат-панель в игре,
   чтобы доска и верхние таблички не прыгали по экрану между состояниями.
   =============================================================== */
@media (max-width: 900px){
  .room-chat{
    --room-mobile-panel-height: clamp(150px, 21.5dvh, 168px);
    --room-mobile-chat-height: var(--room-mobile-panel-height);
    --room-mobile-lobby-height: var(--room-mobile-panel-height);
  }

  .room-chat--bottom,
  .room-chat--lobby{
    flex: 0 0 var(--room-mobile-panel-height) !important;
    height: var(--room-mobile-panel-height) !important;
    min-height: var(--room-mobile-panel-height) !important;
    max-height: var(--room-mobile-panel-height) !important;
  }

  .room-chat--lobby{
    padding: 2px 6px calc(6px + env(safe-area-inset-bottom)) 6px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .room-lobby{
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .room-lobby__title{
    margin: -4px 0 -18px !important;
  }

  .room-lobby__toggle{
    margin-top: -2px !important;
    gap: 4px !important;
  }

  .room-lobby__btn--invite{
    margin-top: -4px !important;
  }
}

/* === LOBBY NICKNAMES + CHAT BOTTOM SPACING FIX v3 ===
   1) В лобби чуть поднимаем блок верхних табличек, чтобы он совпал с игровым режимом.
   2) В игровом чате возвращаем нижний отступ у поля ввода и кнопки "Отправить".
   Делаем только мобильные overrides, без ломания десктопа.
*/
@media (max-width: 900px){
  /* ЛОББИ: верхние таблички с никнеймами должны стоять так же, как в игре */
  #left:has(.room-chat--lobby) .player-plates{
    top: 12px !important;
    margin-bottom: -12px !important;
  }

  /* ИГРА: возвращаем нормальный отступ снизу у поля и кнопки */
  #left:has(.room-chat--bottom) .room-chat--bottom{
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  #left:has(.room-chat--bottom) .room-chat--bottom .room-chat__composer{
    padding-bottom: 2px !important;
  }

  #left:has(.room-chat--bottom) .room-chat--bottom .room-chat__send{
    transform: translateY(6px) !important;
  }
}

/* === FINAL MICRO FIX v4 ===
   1) В лобби таблички с никнеймами возвращаем обратно и чуть опускаем,
      потому что прошлый сдвиг был сделан не в ту сторону.
   2) В игровом чате сохраняем удачный отступ у кнопки "Отправить"
      и отдельно поднимаем поле ввода, чтобы снизу появился такой же воздух.
*/
@media (max-width: 900px){
  #left:has(.room-chat--lobby) .player-plates[data-count="2"]{
    top: 12px !important;
    margin-bottom: -12px !important;
  }

  #left:has(.room-chat--bottom) .room-chat--bottom .room-chat__input{
    margin-bottom: 10px !important;
  }
}