/* Уютное лобби: отдельная область оформления, игровые экраны не меняются. */
#lobby.lc-screen {
  /* Копия table_carpetlight.webp: LANCZOS 36x80, WebP q25 method6.
     SHA-256 исходника: 2c6069b338885e46c32ff99cc40821c10d6784400340cc4c66c5dcf77abbed05 */
  --lc-bg-lqip: url("data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAAAwBQCdASokAFAAPyWMwFkuKKalJnqoAcAkiWMAABjJnmPqLXOoxSs9jNQ9KOh22ZBzIAD+31hrY9OfP57Yz2lnBCIMaBfyp8icowV6fNETUDb9ilZJARSon7pbqRpJK42lwDhBoJnUylKsedLR1uF5Q+W73FyQAAA=");
  --lc-ink: #38291f;
  --lc-muted: #66513e;
  --lc-cream: #fff2dd;
  --lc-bot: #f4c99f;
  --lc-friends: #fff0d8;
  --lc-search: #f3e7ee;
  --lc-edge: #fff8ec;
  --lc-press: #e7b780;
  --lc-shadow: #66341638;
  --lc-focus: #74420d;
  /* Текст #38291f / самая тёмная подложка #f4c99f: >8:1. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  display: block;
  background: var(--lc-bot);
  color: var(--lc-ink);
}
#lobby.lc-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--table-light, url("../assets/table_carpetlight@1080.webp?v=220")) center top / cover,
    var(--lc-bg-lqip) center top / cover;
  opacity: .24;
  pointer-events: none;
}
#lobby .lc-panel {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  width: min(100%, 480px);
  min-height: 688px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(clamp(64px, 10dvh, 100px) + env(safe-area-inset-top, 0px)) 16px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--table-light, url("../assets/table_carpetlight@1080.webp?v=220")) center top / 100% 100%,
    var(--lc-bg-lqip) center top / 100% 100%;
}
#lobby .lc-title {
  margin: 0 0 28px;
  text-align: center;
  font: 750 clamp(28px, 7.7vw, 36px)/1.12 var(--m-font);
  letter-spacing: -.025em;
  color: var(--lc-ink);
  text-shadow: none;
}
#lobby .lc-cards {
  display: grid;
  grid-template-rows: repeat(3, minmax(112px, 1fr));
  gap: clamp(22px, 3dvh, 30px);
  flex: 1;
  min-height: 380px;
}
#lobby .lc-card {
  --lc-surface: var(--lc-cream);
  position: relative;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 12px 25px 12px 46%;
  border: 1px solid var(--lc-edge);
  border-radius: 24px;
  background: var(--lc-surface);
  box-shadow: 0 3px 4px var(--lc-shadow), 0 10px 18px var(--lc-shadow), inset 0 1px 1px var(--lc-edge);
  color: var(--lc-ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms, box-shadow 150ms, transform 150ms;
  isolation: isolate;
}
#lobby .lc-card--bot { --lc-surface: var(--lc-bot); }
#lobby .lc-card--friends { --lc-surface: var(--lc-friends); }
#lobby .lc-card--search { --lc-surface: var(--lc-search); }
#lobby .lc-character {
  position: absolute;
  pointer-events: none;
  user-select: none;
  width: 48%;
  height: calc(100% + 28px);
  left: -3px;
  bottom: 0;
  object-fit: contain;
  object-position: center bottom;
  z-index: -1;
}
#lobby .lc-card--friends .lc-character { width: 47%; height: calc(100% + 22px); }
#lobby .lc-card-title {
  display: block;
  font: 750 clamp(20px, 5.5vw, 27px)/1.08 var(--m-font);
  letter-spacing: -.02em;
  text-wrap: balance;
}
#lobby .lc-card-hint,
#lobby .lc-card-warning {
  display: block;
  margin-top: 8px;
  font: 500 clamp(12px, 3.3vw, 16px)/1.24 var(--m-font);
  color: var(--lc-muted);
  text-wrap: balance;
}
#lobby .lc-card-warning { margin-top: 5px; font-size: clamp(11px, 3vw, 14px); }
#lobby .lc-chevron {
  position: absolute;
  width: 15px;
  height: 23px;
  right: 7px;
  top: calc(50% - 11px);
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#lobby .lc-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
  flex: 0 0 78px;
}
#lobby .lc-nav-button {
  margin: 0;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--lc-edge);
  border-radius: 20px;
  background: var(--lc-cream);
  box-shadow: 0 2px 3px var(--lc-shadow), 0 7px 12px var(--lc-shadow);
  color: var(--lc-ink);
  font: 650 clamp(13px, 3.5vw, 17px)/1.15 var(--m-font);
  transition: background-color 150ms, transform 150ms, box-shadow 150ms;
  touch-action: manipulation;
}
#lobby .lc-nav-button svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
#lobby .lc-card:active,
#lobby .lc-nav-button:active {
  background-color: var(--lc-press);
  transform: scale(.989);
  box-shadow: 0 2px 4px var(--lc-shadow);
}
#lobby .lc-card:focus-visible,
#lobby .lc-nav-button:focus-visible { outline: 3px solid var(--lc-focus); outline-offset: 4px; }
#lobby .lc-card:disabled { cursor: wait; opacity: .7; }
/* Сообщения существующего сетевого слоя доступны без лишней панели. */
#lobby .lc-info {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#lobby .lc-info.is-alert {
  position: fixed;
  z-index: 80;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 420px);
  height: auto;
  padding: 12px 16px;
  clip-path: none;
  border: 1px solid var(--lc-focus);
  border-radius: 14px;
  background: var(--lc-cream);
  color: var(--lc-ink);
  font: 600 14px/1.35 var(--m-font);
  box-shadow: 0 4px 12px var(--lc-shadow);
}
#lobby .lc-card,
#lobby .lc-nav { animation: lc-appear 220ms both; }
#lobby .lc-card:nth-child(2) { animation-delay: 35ms; }
#lobby .lc-card:nth-child(3) { animation-delay: 70ms; }
@keyframes lc-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (hover: hover) {
  #lobby .lc-card:hover,
  #lobby .lc-nav-button:hover { filter: brightness(1.025); }
}
@media (max-height: 720px) {
  #lobby .lc-panel { min-height: 620px; padding-top: calc(46px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  #lobby .lc-title { margin-bottom: 22px; font-size: 28px; }
  #lobby .lc-cards { min-height: 352px; gap: 22px; grid-template-rows: repeat(3, minmax(104px, 1fr)); }
  #lobby .lc-card { min-height: 104px; padding-top: 9px; padding-bottom: 9px; }
  #lobby .lc-card-title { font-size: clamp(19px, 5.2vw, 24px); }
  #lobby .lc-nav { flex-basis: 66px; margin-top: 18px; }
  #lobby .lc-nav-button { padding: 8px 4px; gap: 4px; }
  #lobby .lc-nav-button svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #lobby .lc-card,
  #lobby .lc-nav,
  #lobby .lc-nav-button { animation: none; transition: none; }
}
/* Выбор использует прежние контролы и обработчики, но помещён в окно. */
#bot-panel .lc-options,
#friends-panel .lc-options { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
#bot-panel .lc-options legend,
#friends-panel .lc-options legend { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
#bot-panel .switch,
#friends-panel .switch { width: 100%; height: 48px; margin: 0; border: 1px solid var(--control-border); border-radius: 14px; background: var(--item); box-shadow: none; }
#bot-panel .switch .thumb,
#friends-panel .switch .thumb { top: 3px; left: 3px; height: 40px; width: calc(50% - 3px); border: 0; border-radius: 11px; background: var(--accent-soft); box-shadow: none; }
#bot-panel .switch .opt,
#friends-panel .switch .opt { height: 100%; min-height: 44px; font-size: 14px; color: var(--text); text-shadow: none; }
#bot-panel .players { margin: 0; width: 100%; display: flex; gap: 8px; }
#bot-panel .players .num { min-height: 48px; height: 48px; width: auto; flex: 1; margin: 0; border: 1px solid var(--control-border); border-radius: 14px; background: var(--item); color: var(--text); font-size: 18px; box-shadow: none; }
#bot-panel .players .num.is-active { background: var(--accent-soft); color: var(--text); }
#bot-panel .players .num::before { display: none; }
#bot-panel .players .num::after,
#bot-panel .switch .opt::after,
#friends-panel .switch .opt::after { inset: 0; height: 100%; transform: none; }
#bot-panel #btn-ai-start { width: 100%; margin-top: 12px; }
#stats .lc-session { width: 90%; margin: 8px auto; text-align: center; }
#stats .lc-session h3 { margin: 0 0 4px; font: 650 16px var(--m-font); color: var(--ink); }
#stats .lc-session p { margin: 4px 0 8px; font: 14px/1.35 var(--m-font); color: var(--ink); }
#stats .sv-since { color: var(--ink); }
#stats .lc-session button { min-height: 44px; padding: 8px 14px; font: 600 14px var(--m-font); }

#lobby.lc-screen {
  --lc-shadow-deep: #4f230699;
  --lc-glow-clear: #ffdc7d00;
  --lc-glow-middle: #ffedb3cc;
  --lc-glow-edge: #ffdc7d70;
  --lc-glow-center: #fff6cceb;
  --lc-shadow-near: #4f230666;
  --lc-shadow-pressed: #4f230680;
  --lc-table-end: #f5e3c5;
  --lc-table-start: #fff8e9;
  --lc-table-border: #d8b887;
  --lc-cream-text: #fff9ef;
  --lc-warning-ink: #480e36;
  --lc-art-ink: #491602;
}
/* 27.10.2026: выбранный владельцем рабочий макет. */
/* Один и тот же файл шрифта на всех устройствах. Без зависимости от Google
   при открытии игры; лицензия и источники лежат рядом с файлами Rubik. */
@font-face {
  font-family: "Lobby Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/rubik/rubik-cyrillic-variable.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Lobby Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/rubik/rubik-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#lobby { --m-font: "Lobby Rubik", sans-serif; }

/* Фон из PSD владельца: сохраняем пропорции, верхний край всегда виден. */
#lobby.lc-screen::before,
#lobby .lc-panel {
  background-image: url("../assets/lobby/background-2026-10-24-1080-q60.webp"), var(--lc-bg-lqip);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* AVIF сохраняет размер 1080x2400 при меньшем весе. WebP — запасной формат. */
@supports (background-image: image-set(url("test.avif") type("image/avif"))) {
  #lobby.lc-screen::before,
  #lobby .lc-panel {
    background-image: image-set(
      url("../assets/lobby/background-2026-10-24-1080-q50.avif") type("image/avif"),
      url("../assets/lobby/background-2026-10-24-1080-q60.webp") type("image/webp")
    ), var(--lc-bg-lqip);
  }
}

#lobby,
#lobby :is(button, input, select, textarea) {
  font-family: var(--m-font);
}

/* Сдвигаем только верхнюю группу, сохраняя размеры карточек и нижний ряд. */
#lobby .lc-title,
#lobby .lc-cards {
  position: relative;
  top: -48px;
}

/* Дополнительный подъём только заголовка, без изменения потока и карточек. */
#lobby .lc-title {
  top: -72px;
  height: 1.12em;
  flex-shrink: 0;
  color: var(--lc-art-ink);
  isolation: isolate;
}

/* Тёплое свечение следует за заголовком и не меняет размеры его блока. */
#lobby .lc-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  max-width: 100vw;
  height: clamp(72px, 22vw, 98px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side,
    var(--lc-glow-center) 0%, var(--lc-glow-middle) 48%, var(--lc-glow-edge) 78%, var(--lc-glow-clear) 100%);
  pointer-events: none;
}

/* Дуга — живой текст в SVG. Размер заголовочного блока не сдвигает кнопки. */
#lobby .lc-title-curve {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 50%;
  /* Опускаем текст и штрихи, сохраняя положение отдельной подсветки. */
  transform: translateY(calc(-50% + 6px));
  overflow: visible;
  fill: currentColor;
  font: 800 36px var(--m-font);
  letter-spacing: -.7px;
}

/* Штрихи из PSD сохраняют исходный цвет и масштабируются вместе с заголовком. */
#lobby .lc-title-accents {
  pointer-events: none;
}

/* В короткой области прежний подъём на 72px уводил заголовок за экран.
   Меняем только его визуальный сдвиг, не положение кнопок и персонажей. */
@media (max-height: 720px) {
  #lobby .lc-title { top: -38px; }
}

/* На коротких экранах панель занимает доступную высоту без минимума 620px. */
@media (max-height: 619px) {
  #lobby .lc-panel { min-height: 0; }
}

/* Подложки 1520x620: высота карточки следует за шириной, а не растяжением сетки. */
#lobby .lc-cards {
  grid-template-rows: repeat(3, max-content);
  align-content: start;
}
#lobby .lc-card {
  box-sizing: border-box;
  aspect-ratio: 1520 / 620;
  min-height: 0;
}

/* На коротком экране уменьшаем карточки вместе с текстом и персонажами. */
@media (max-height: 619px) {
  #lobby .lc-cards {
    transform: scale(.82);
    transform-origin: center top;
  }
  #lobby .lc-nav {
    width: 82%;
    align-self: center;
  }
}

/* Названия трёх режимов: легче прежнего ExtraBold и на 8% крупнее. */
#lobby .lc-card-title {
  font-weight: 700;
  font-size: clamp(21.6px, 5.94vw, 29.16px);
}

@media (max-height: 720px) {
  #lobby .lc-card-title { font-size: clamp(20.52px, 5.616vw, 25.92px); }
}
#lobby .lc-card-hint { font-weight: 600; }
#lobby .lc-nav-button { font-weight: 600; }

/* Иконки остаются SVG; поля и окна меню используют ту же семью шрифта. */
#lobby .lc-info,
#lobby .sheet {
  font-family: var(--m-font);
}

/* Подложка отдельно от персонажа: мягкая подсветка меняет только бархат.
   Размеры, подъём карточек и выступающие за край шапки сохраняются. */
#lobby .lc-card {
  --velvet-rest: brightness(1) saturate(1);
  --velvet-hover: brightness(1.025) saturate(.96);
  --velvet-down: brightness(1.08) saturate(.8);
  --velvet-shadow: drop-shadow(0 3px 3px var(--lc-shadow-near)) drop-shadow(0 10px 7px var(--lc-shadow-deep));
  background: transparent;
  border-color: transparent;
  color: var(--lc-cream-text);
  text-shadow: none;
  box-shadow: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

#lobby .lc-card--bot {
  --velvet-image: url("../assets/velvet/1.webp");
  --character-left: 2.828947368%;
  --character-width: 39.144736842%;
  --character-height: 109.354838710%;
  --character-bottom: -0.322580645%;
}

#lobby .lc-card--friends {
  /* Сближаем карточки суммарно на 12px, сохраняя размер и нижнюю навигацию. */
  top: -12px;
  --velvet-image: url("../assets/velvet/2.webp");
  --character-left: -2.171052632%;
  --character-width: 55%;
  --character-height: 104.193548387%;
}

#lobby .lc-card--search {
  top: -24px;
  --velvet-image: url("../assets/velvet/3.webp");
  --character-left: -4.276315789%;
  --character-width: 54.078947368%;
  --character-height: 104.677419355%;
}

/* Координаты относительно кнопок 1520x620 — psd-import.json;
   обновлённый Прохор — prokhor-import-2026-10-22.json.
   Общая рамка совпадает с подложкой, включая её выход на 1px за границу. */
#lobby .lc-artwork {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: -1;
}

#lobby .lc-artwork .lc-character {
  width: var(--character-width);
  height: var(--character-height);
  left: var(--character-left);
  bottom: var(--character-bottom, 0);
  /* Сохраняем пропорции на любой высоте карточки и опору на её нижний край. */
  object-fit: contain;
  object-position: center bottom;
  z-index: auto;
}

#lobby .lc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: var(--velvet-image) center / 100% 100% no-repeat;
  pointer-events: none;
  /* Тень повторяет альфа-контур WebP: без светлых зазоров в углах.
     Цвет меняется до тени, поэтому подсветка не перекрашивает саму тень. */
  filter: var(--velvet-rest) var(--velvet-shadow);
  transition: filter 220ms ease-out;
}

#lobby .lc-card-hint,
#lobby .lc-card-warning {
  color: inherit;
}

/* Все надписи выровнены по вертикали второй кнопки, вне зелёного колпака. */
#lobby :is(.lc-card--bot, .lc-card--friends) :is(.lc-card-title, .lc-card-hint),
#lobby .lc-card--search :is(.lc-card-title, .lc-card-hint, .lc-card-warning) {
  position: relative;
  left: 36px;
}

#lobby :is(.lc-card--bot, .lc-card--friends, .lc-card--search) :is(.lc-card-title, .lc-card-hint, .lc-card-warning) {
  color: var(--lc-art-ink);
}

#lobby .lc-card--bot :is(.lc-card-title, .lc-card-hint) {
  white-space: nowrap;
  width: max-content;
  /* Заголовок и подпись в одну строку, с общим началом на 36px левее. */
  left: 0;
}

#lobby .lc-card--search .lc-card-warning {
  color: var(--lc-warning-ink);
  /* Перенос задан через br; обе части фразы сохраняем целиком. */
  white-space: nowrap;
}

#lobby .lc-card--search :is(.lc-card-hint, .lc-card-warning) {
  font: 500 clamp(12px, 3.3vw, 16px)/1.24 var(--m-font);
}

#lobby .lc-card--search .lc-card-hint {
  font-weight: 700;
}

/* Прежние эффекты всей кнопки не должны перекрашивать персонажа и текст. */
#lobby .lc-card:hover,
#lobby .lc-card:active {
  background: transparent;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* Поднимаем только нижний ряд, не меняя поток и размеры больших карточек. */
#lobby .lc-nav {
  position: relative;
  top: -24px;
  /* Сохраняем место ряда в потоке: квадраты растут вверх в свободный зазор. */
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
}

#lobby .lc-nav-button {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1;
}

/* Прячем прежние иконки, сохраняя их место для неизменного положения текста. */
#lobby .lc-nav-button > svg {
  visibility: hidden;
}

/* Подписи ниже; место иконок и геометрия плиток остаются прежними. */
#lobby .lc-nav-button > span {
  transform: translateY(calc(clamp(8px, 3vw, 16px) + 9px));
  font-size: calc(1em + 1px);
  line-height: calc(clamp(13px, 3.5vw, 17px) * 1.15);
  color: var(--lc-art-ink);
}

/* В компактных плитках оставляем ещё 5px до нижнего края подписи. */
@media (max-height: 619px) {
  #lobby .lc-nav-button > span {
    transform: translateY(calc(clamp(8px, 3vw, 16px) + 4px));
  }
}

/* Плитки и иконки экспортированы вместе из PSD: координаты на холсте 480x480 сохранены. */
#lobby #btn-rules { --nav-art: url("../assets/lobby/nav-rules-90-2026-10-24.webp"); }
#lobby #btn-stats { --nav-art: url("../assets/lobby/nav-stats-90-2026-10-24.webp"); }
#lobby #btn-menu { --nav-art: url("../assets/lobby/nav-settings-90-2026-10-24.webp"); }

#lobby .lc-nav-button {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#lobby .lc-nav-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--nav-art) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 3px var(--lc-shadow-near)) drop-shadow(0 9px 8px var(--lc-shadow-deep));
  pointer-events: none;
}

#lobby .lc-nav-button:active {
  background: transparent;
  box-shadow: none;
}

#lobby .lc-nav-button:active::before {
  filter: brightness(.97) drop-shadow(0 2px 4px var(--lc-shadow-pressed));
}

@media (hover: hover) {
  #lobby .lc-card:not(:disabled):hover::before {
    filter: var(--velvet-hover) var(--velvet-shadow);
  }
}

#lobby .lc-card:not(:disabled):is(:active, .is-pressed)::before {
  filter: var(--velvet-down) var(--velvet-shadow);
  transition-duration: 110ms;
}

@media (prefers-reduced-motion: reduce) {
  #lobby .lc-card::before { transition: none; }
}

/* Убираем старые отступы дорожки: подписи центрируются внутри её высоты 48px. */
#bot-panel #modeSwitch,
#friends-panel #friendsModeSwitch { padding: 0; align-items: center; }
#friends-panel #friendsPlayersLabel { font-size: 14px; font-weight: 400; color: var(--text-2); }
#bot-panel .sheet-title,
#friends-panel .sheet-title { margin-bottom: 4.67px; }
/* Центр строки совпадает с центром крестика: 16 + 2 + 32 / 2 = 12 + 44 / 2. */
#bot-panel .sheet-title,
#friends-panel .sheet-title { font-size: 24px; line-height: 32px; }
/* Равные поля центрируют заголовок; прирост строки компенсируем отступом. */
#friends-panel .sheet-title { padding: 0 32px; margin-bottom: 4.67px; }
#friends-panel #friends-hint:empty { display: none; }
#bot-panel #playersGroup .num,
#bot-panel #playersGroup .num span,
#friends-panel #friendsPlayersGroup button { text-shadow: none; }
#bot-panel #playersGroup .num {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 14px;
  line-height: 1.2;
}
#friends-panel #friendsPlayersGroup [aria-checked="true"] {
  background: var(--accent-soft);
  border-color: var(--control-border);
  outline: none;
}
/* Контур остаётся только для навигации с клавиатуры, а не для выбора числа. */
#friends-panel #friendsPlayersGroup button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Небольшая схема состава стола: декоративные места, подпись доступна для чтения. */
:is(#bot-panel, #friends-panel) .bot-table-preview {
  margin: 12px 0 4px;
  padding: 8px 12px 10px;
  border: 1px solid var(--lc-table-border);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--lc-table-start), var(--lc-table-end));
  color: var(--lc-art-ink);
  text-align: center;
}
/* Полный холст PSD: координаты слоёв масштабируются вместе с композицией. */
:is(#bot-panel, #friends-panel) .bot-table-scene { width: min(100%, 240px); aspect-ratio: 960 / 536; margin: auto; }
:is(#bot-panel, #friends-panel) .bot-table-art { display: none; width: 100%; height: auto; }
:is(#bot-panel, #friends-panel) .bot-table-preview[data-seats="2"] .bot-table-art[data-players="2"],
:is(#bot-panel, #friends-panel) .bot-table-preview[data-seats="3"] .bot-table-art[data-players="3"],
:is(#bot-panel, #friends-panel) .bot-table-preview[data-seats="4"] .bot-table-art[data-players="4"] { display: block; }
:is(#bot-panel, #friends-panel) .bot-table-preview figcaption { margin-top: 4px; font: 600 13px/1.3 var(--m-font); }
#friends-panel .group-seats { margin-bottom: 0; }
#bot-panel .lc-options:has(#playersGroup) { margin-top: 0; margin-bottom: 0; }
#friends-panel .bot-table-preview { margin-bottom: 8px; }
#bot-panel #btn-ai-start { margin-top: 4px; }
/* На коротком экране сокращаем пустые отступы, сохраняя размеры переключателей. */
@media (max-height: 619px), (max-width: 340px) and (max-height: 720px) {
  #bot-panel .sheet-title { margin-bottom: 2.67px; }
  #bot-panel .lc-options { margin: 8px 0; }
  #bot-panel .bot-table-preview { margin-top: 8px; }
  #bot-panel #btn-ai-start { margin-top: 2px; }
  /* В окне друзей дополнительно есть вход по коду: оставляем его в пределах экрана. */
  #friends-panel .sheet-title { margin-bottom: 2.67px; }
  #friends-panel .lc-options { margin: 8px 0; }
  #friends-panel .bot-table-preview { margin: 8px 0 6px; padding: 4px 12px 6px; }
  #friends-panel .bot-table-scene { width: min(100%, 180px); }
  #friends-panel .s2-or { margin: 6px 0; }
}

/* Мягкий общий отклик шести кнопок: scale не спорит с анимацией появления. */
#lobby :is(.lc-card, .lc-nav-button) {
  scale: 1;
  transform-origin: center;
  transition: scale 220ms cubic-bezier(.2, .8, .2, 1);
}
#lobby :is(.lc-card, .lc-nav-button):not(:disabled).is-pressed {
  scale: .96;
  transition-duration: 100ms;
}
#lobby .lc-nav-button:active { transform: none; }
#lobby .lc-nav-button::before { transition: filter 180ms ease-out; }
#lobby .lc-nav-button.is-pressed::before {
  filter: brightness(.97) drop-shadow(0 2px 4px var(--lc-shadow-pressed));
}
@media (prefers-reduced-motion: reduce) {
  #lobby :is(.lc-card, .lc-nav-button),
  #lobby :is(.lc-card, .lc-nav-button).is-pressed {
    scale: 1;
    transition: none;
  }
  #lobby .lc-nav-button::before { transition: none; }
}

/* Фото MAX накрывает временный круг в холсте 960x536; исходные координаты PSD. */
#lobby .bot-table-scene { position: relative; }
#lobby .bot-table-avatar { position: absolute; left: 41.041667%; top: 64.738806%; width: 17.916667%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
#lobby .bot-table-avatar[hidden] { display: none; }
/* Переводы могут занимать больше места: сохраняем полную фразу внутри кнопки. */
html:not([lang="ru"]) #lobby .lc-card--bot :is(.lc-card-title, .lc-card-hint),
html:not([lang="ru"]) #lobby .lc-card-warning { white-space: normal; }
html:not([lang="ru"]) #lobby .lc-card--bot :is(.lc-card-title, .lc-card-hint) { width: auto; }
html:not([lang="ru"]) #lobby .lc-card:not(.lc-card--bot) :is(.lc-card-title, .lc-card-hint, .lc-card-warning) { width: calc(100% - 20px); }
html:not([lang="ru"]) #lobby .lc-card-title { font-size: clamp(18px, 4.8vw, 24px); }
html:not([lang="ru"]) #lobby .lc-title-curve { font-size: 30px; }
html:not([lang="ru"]) #lobby .lc-nav-button > span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  transform: none;
  font-size: clamp(11px, 2.8vw, 14px);
  line-height: 1.05;
}

/* На 320px длинная строка режима остаётся внутри принятой карточки. */
@media (max-width: 340px) {
  #bot-panel .sheet-title, #friends-panel .sheet-title { font-size: 18px; padding: 0 32px; }
  #lobby .lc-card--bot :is(.lc-card-title, .lc-card-hint) { left: -4px; }
  #lobby .lc-card--search :is(.lc-card-hint, .lc-card-warning) { font-size: 11px; }
}

/* Rubik шире прежнего системного шрифта: на малом экране убираем пустые
   интервалы в справке, сохраняя размер и полный текст правил. */
@media (max-height: 650px) {
  #rules-panel .sheet-title, #about-panel .sheet-title { margin-bottom: 16px; }
  #rules-panel .s2-rules p { margin-bottom: 4px; line-height: 1.35; }
  #rules-panel .s2-rules p:last-child { margin-bottom: 0; }
  #about-panel .s2-info p { margin-bottom: 4px; }
}

/* В широкой, но короткой области сохраняем пропорции карточек и место плиток. */
@media (min-height: 620px) and (max-height: 820px) {
  #lobby .lc-panel { width: min(100%, 480px, 58vh); width: min(100%, 480px, 58dvh); }
}

/* Размер текста следует ширине сжатой композиции, а не ширине всего окна. */
@media (min-width: 341px) and (min-height: 620px) and (max-height: 820px) {
  #lobby { --lc-fit-width: min(100vw, 480px, 58vh); --lc-fit-width: min(100vw, 480px, 58dvh); }
  #lobby .lc-card-title { font-size: clamp(21.6px, calc(var(--lc-fit-width) * .0594), 29.16px); }
  #lobby .lc-card :is(.lc-card-hint, .lc-card-warning) { font-size: clamp(12px, calc(var(--lc-fit-width) * .033), 16px); }
}
@media (min-width: 341px) and (min-height: 620px) and (max-height: 720px) {
  #lobby .lc-card-title { font-size: clamp(20.52px, calc(var(--lc-fit-width) * .05616), 25.92px); }
}