/* ═══════════════════════════════════════════════════════════════
   ДУРАК КЛАССИКА — экраны МЕНЮ (лобби и ожидание)
   ═══════════════════════════════════════════════════════════════

   ЭТО ЕДИНСТВЕННЫЙ ЖИВОЙ ФАЙЛ СТИЛЕЙ МЕНЮ.
   Его же грузит стенд demo/menu/index.html — правишь здесь, обновляешь
   стенд, видишь ровно то, что увидит игрок. Копий нет.

   ЧТО ГДЕ
     0. Переменные (цвета, шрифт, масштаб)   ← менять вид тут
     1. Экраны меню: фон-стол, прокрутка
     2. Панель (фон, рамка, текстура, блики)
     3. Логотип
     4. Кнопки: сброс и фокус с клавиатуры
     5. Главная кнопка «Найти соперника»
     6. Подписи секций с точками
     7. Переключатель «Режим игры»
     8. Кнопки количества игроков
     9. Светлые кнопки и круглая «…» в углу
    10. Информационная строка (онлайн / ошибки)
    11. Подвал: ссылка «О приложении»
    12. Шторки: игра с друзьями, настройки
    13. Экран ожидания
    14. Hover для мыши и prefers-reduced-motion

   О МАСШТАБЕ
   Макет нарисован на сетке 743 × 1192, высота панели с 12.08.2026 — 1127.
   Единица --u = 1 «пиксель макета», размеры вида calc(var(--u) * 623)
   читаются как «623 пикселя макета».
   Ширину 743 менять не стоит — на неё завязана вся сетка. Высота 1127
   встречается ДВАЖДЫ (делитель в --u здесь и height у .panel) и меняться
   обязана парой: делитель отвечает за «панель вписалась в экран», а height —
   за саму панель. Разъедутся — панель либо вылезет за край, либо не дотянет.

   --u вписывает панель в экран по ОБЕИМ осям и упирается в потолок
   --u-max сверху и в пол --u-min снизу. Поэтому пропорции композиции
   одинаковы везде — от 320 × 640 до складня 10″: меняется только общий
   масштаб. Ниже пола не ужимаемся: вместо этого экран прокручивается
   (альбомная ориентация, разделённый экран).

   ВСЁ ЗДЕСЬ ПОД .menu-screen — стили не текут на экран партии, где своя
   вёрстка в <style> внутри index.html.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   0. ПЕРЕМЕННЫЕ — главное место настройки внешнего вида
   ─────────────────────────────────────────────────────────────── */
:root{
  /* Поле вокруг панели: 16px с каждой стороны + вырезы экрана (чёлка,
     скруглённые углы, жестовая полоса). env() всегда с фолбэком 0px — без
     него в браузере без поддержки вся строка --u стала бы невалидной. */
  --pad: 16px;
  --gap-x: calc(var(--pad) * 2 + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  --gap-y: calc(var(--pad) * 2 + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));

  /* Потолок масштаба: на планшете и складне панель перестаёт расти,
     иначе кнопки уезжают в «плакатный» размер. 0.9 → панель 669 × 1014. */
  --u-max: .9px;
  /* Пол читаемости: ниже — не ужимаемся, включаем прокрутку. 0.4 держит
     половинку переключателя на 44.8px (пальцевый порог 44px). */
  --u-min: .4px;

  /* Базовая единица масштаба. vh — фолбэк для старых WebView; ниже
     @supports заменяет его на svh (высота при ПОКАЗАННЫХ панелях
     браузера). Именно svh, не dvh: dvh меняется, когда всплывает
     клавиатура или прячется адресная строка, и панель дышала бы
     прямо под пальцем — а под пальцем в этот момент кнопка. */
  --u: min(
        calc((100vw - var(--gap-x)) / 743),
        max(calc((100vh - var(--gap-y)) / 1127), var(--u-min)),
        var(--u-max)
       );

  /* Шрифт меню */
  --m-font: -apple-system, BlinkMacSystemFont, "Roboto", system-ui,
            Avenir, Helvetica, Arial, sans-serif;

  /* ── Страница ── */
  /* Фон меню — ТОТ ЖЕ кадр стола, что в партии (assets/table_light.webp,
     1440 × 3200; ночная пара table_dark.webp) и в той же посадке
     (cover, center top): при переходе меню → стол картинка не дёргается.
     Цвет виден только пока кадр качается — взят замером песка в кадре. */
  --page-bg:      #e9b877;
  --page-bg-dark: #131a20;

  /* ── Панель ── */
  --panel-1:      #fadfb9;   /* градиент панели: верх */
  --panel-mid:    #f8d8ac;   /* градиент панели: середина */
  --panel-2:      #f6d2a5;   /* градиент панели: низ */
  --panel-rim:    #fdeed6;   /* тонкая светлая рамка панели */

  /* ── Тексты ── */
  --ink:          #63360d;   /* подписи «Режим игры», «Количество игроков» */
  --ink-strong:   #5b2e0a;   /* активный текст переключателя */
  --ink-muted:    #7a5530;   /* неактивный текст переключателя */
  --num-text:     #5f3810;   /* цифры 2 / 3 / 4 */
  --soft-text:    #693d11;   /* текст светлых кнопок */
  --dot:          #c9a468;   /* декоративные точки у подписей */

  /* ── Главная кнопка (кожа) и янтарь цифр ── */
  --lea-1:        #c98a3e;   /* кожа: верх */
  --lea-2:        #b06c1e;   /* кожа: середина */
  --lea-3:        #93540e;   /* кожа: низ */
  --lea-lip:      #6b3d08;   /* нижняя «губа» кнопки */
  --gold-frame:   #c9a34c;   /* золотая рамка кнопки */
  --stitch:       rgba(255,230,180,.55); /* пунктирная «стежка» */
  --btn-text:     #fff7e6;   /* надпись */

  /* ── Переключатель режима ── */
  --track-top:    #efd0a9;
  --track-bg:     #f3d6b2;
  --track-bot:    #f6dcbb;
  --capsule-1:    #fdedd0;
  --capsule-2:    #f8dcab;
  --capsule-brd:  #ecd0a0;

  /* ── Светлые (кремовые) кнопки ── */
  --cream-1:      #f8e3c7;
  --cream-2:      #f0d2ab;
  --cream-brd:    #e8c795;
  --cream-lip:    #ddb583;

  /* ── Информационная строка ── */
  --green-1:      #f4ecca;   /* градиент: верх */
  --green-2:      #e6dba8;   /* градиент: низ */
  --green-brd:    #d9cf9c;   /* рамка */
  --green-text:   #4e6013;   /* текст */
  --alert-1:      #f6e2c6;   /* та же строка в режиме подсказки/ошибки */
  --alert-2:      #efd0a4;
  --alert-brd:    #e0b881;
  --alert-text:   #8a4b12;

  /* ── Юр-блок «О приложении» и опасная кнопка ──
     Вынесены из правил в токены 11.08.2026: обе заливки НЕпрозрачные, и в
     ночной теме оставались светлыми пятнами. Остальные литералы файла —
     полупрозрачные блики и тени, они работают в обеих темах сами. */
  --box-1:        rgba(255,250,240,.75);
  --box-2:        rgba(250,236,214,.75);
  --box-gloss:    rgba(255,255,255,.8);
  --danger-1:     #fbe6d8;
  --danger-2:     #f3cdb6;
  --danger-brd:   #d7a58a;
  --danger-ink:  #8a3a12;

  /* Тёплые блики и тени, вынесенные из правил 11.08.2026. В светлой теме
     значения ДОСЛОВНО прежние — тема обязана совпасть попиксельно. */
  --gloss-panel:     rgba(255,243,219,.75);
  --sh-panel-1:      rgba(158,104,40,.35);
  --sh-panel-2:      rgba(158,104,40,.22);
  --sh-panel-3:      rgba(198,140,64,.18);
  --sh-panel-4:      rgba(186,126,52,.14);
  --gloss-panel-2:   rgba(255,246,226,.35);
  --gloss-lea:       rgba(255,235,205,.30);
  --sh-lea-1:        rgba(120,70,20,.38);
  --sh-lea-2:        rgba(120,70,20,.28);
  --sh-lea-3:        rgba(120,70,20,.32);
  --sh-lea-4:        rgba(120,70,20,.4);
  --sh-lea-5:        rgba(120,70,20,.35);
  --sh-lea-6:        rgba(120,70,20,.34);
  --gloss-track:     rgba(255,246,228,.85);
  --sh-track-1:      rgba(158,102,42,.30);
  --sh-track-2:      rgba(140,90,35,.30);
  --sh-caps-1:       rgba(150,95,35,.35);
  --sh-caps-2:       rgba(150,95,35,.25);
  --gloss-num:       rgba(255,240,210,.35);
  --gloss-num-2:     rgba(255,240,210,.5);
  --gloss-info:      rgba(255,255,250,.7);
  --sh-info:         rgba(190,180,122,.55);
  --gloss-alert:     rgba(255,248,235,.7);
  --sh-alert:        rgba(198,158,110,.55);
  --sh-info-2:       rgba(160,120,50,.22);

  /* ── Прочее ── */
  --shadow-warm:  rgba(163,110,45,.30);  /* тёплая тень под кнопками */
  --focus:        #7c4d12;               /* обводка фокуса с клавиатуры */
  /* Затемнение под шторкой во всю ширину («Настройки», «Радио»). Заведено
     токеном 12.08.2026: до этого в правиле стоял литерал rgba(60,34,10,.45),
     один на ОБЕ темы, и в ночном лобби подложка отдавала янтарём.
     Сила .72 — БОЛЬШЕ ночной (.62), и это не описка. Днём под шторкой светлая
     пёстрая панель на ворсистом столе, ночью — угольная на почти чёрном:
     одинаковая альфа гасит их по-разному, и дневной фон при .50 продолжал
     спорить с листом за внимание (жалоба Максима по виду на устройстве).
     Пара окнам: у центрированных свой --scrim-strong в settings.css (.76),
     он темнее — окно обязано лежать «выше» листа. */
  --sheet-scrim:  rgba(18,16,14,.72);
  --snap-ms:      250ms;                 /* фиксация капсулы: 220–280 мс */
}

/* ───────────────────────────────────────────────────────────────
   0б. НОЧНАЯ ПАЛИТРА МЕНЮ (11.08.2026)
   Значения взяты из тёмной темы макета «Настройки 2.0»
   (demo/Settings 2.0/files/v6-settings.css) и разложены по ролям
   меню: лист → панель, пункт → кремовая кнопка, акцент → кожа
   главной кнопки, text/text-2 → ink/ink-muted.

   ПЕРЕОПРЕДЕЛЯЕМ ТОЛЬКО ЦВЕТА. Сетка (--u, --pad, --u-max/min) и
   шрифт остаются общими: тема меняет палитру, а не геометрию, и
   разъехавшаяся вёрстка между темами — отдельный класс дефектов,
   который здесь заводить незачем.

   ⚠️ ЯНТАРЯ ЗДЕСЬ НЕТ, и это решение Максима 11.08.2026: янтарь —
   примета СВЕТЛОЙ темы, ночью лобби угольное. Первая редакция брала
   акцент прямо из макета, и главная кнопка выходила оранжевым пятном
   на угольном фоне. Теперь она держится объёмом, а не цветом.

   ⚠️ ЛИТЕРАЛЫ ВЫНОСИЛИСЬ ПО ФАКТУ, А НЕ СПИСКОМ. Из 92 цветовых
   литералов, вбитых прямо в правила ниже, в токены ушли 32 в 25 имён —
   ровно те, что мешали: непрозрачные заливки (юр-блок, опасная кнопка)
   и тёплые блики с тенями (--gloss-*, --sh-*). Коричневая тень на
   угольном фоне не читается вовсе, и объём кнопок пропадал; тёплый
   блик давал оранжевый ореол вокруг панели и переключателя.
   Остальные литералы — нейтральные белые блики и уже тёмные внутренние
   тени: они работают в обеих темах сами, и заводить им имена значило бы
   удваивать словарь ради того, что глазом не отличить.

   СВЕТЛЫЕ значения всех новых токенов — ДОСЛОВНО прежние литералы.
   Проверено попиксельно: лобби в светлой теме до и после выноса совпало
   байт в байт (0 отличий из 2 397 330, md5 равны). Любая правка здесь
   обязана это свойство сохранять.
   ─────────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --page-bg:      #121316;

  /* Затемнение под шторкой — угольное, без следа тепла. Прежний общий литерал
     rgba(60,34,10,.45) был коричневым и в ночном лобби давал вокруг листа
     янтарный ореол (жалоба Максима по скрину 12.08.2026). Ночью подложка
     глубже дневной: под ней не песочная панель, а почти чёрный стол, и при
     .50 край листа терялся в фоне. */
  --sheet-scrim:  rgba(0,0,0,.62);

  /* Панель — лист, лежащий на ночном столе. Светлее фона на пару
     ступеней, иначе край панели исчезает (в макете ровно та же
     причина у кромки листа: фон и лист различаются на 1,08). */
  --panel-1:      #22242A;
  --panel-mid:    #1D1F24;
  --panel-2:      #191B20;
  --panel-rim:    #33363D;

  --ink:          #E8E9EC;
  --ink-strong:   #FFFFFF;
  --ink-muted:    #9AA0A8;
  --num-text:     #E8E9EC;
  --soft-text:    #E8E9EC;
  --dot:          #5A6069;

  /* Главная кнопка — ТЁМНАЯ КОЖА, а не янтарь (решение Максима 11.08.2026).
     Янтарь остаётся приметой светлой темы; ночью кнопка держится не цветом,
     а объёмом: градиент, стальная рамка и глубокая губа. Пятном экрана она
     быть перестала, но самой крупной и самой контрастной по краю — осталась. */
  --lea-1:        #3A3E46;
  --lea-2:        #31353C;
  --lea-3:        #282B31;
  --lea-lip:      #16181C;
  /* Рамка стальная, а не золотая. Значение подобрано ПО ЗАМЕРУ: при #5A6069
     контраст рамки к панели давал 2,60 при норме 3,0 (WCAG 1.4.11, граница
     элемента управления), и кнопка теряла край на тёмном. #6B7280 даёт 3,41. */
  --gold-frame:   #6B7280;
  --stitch:       rgba(255,255,255,.14);
  --btn-text:     #F2F4F7;

  --track-top:    #1A1C21;
  --track-bg:     #1D1F24;
  --track-bot:    #202329;
  --capsule-1:    #383C44;
  --capsule-2:    #31353C;
  --capsule-brd:  #4A4F58;

  --cream-1:      #292C33;
  --cream-2:      #232629;
  --cream-brd:    #3A3E46;
  --cream-lip:    #141619;

  /* Информационная строка: приглушённая зелень и песок вместо прежних
     ярких — на угольном фоне светящаяся плашка читалась как ошибка. */
  --green-1:      #232823;
  --green-2:      #1E221E;
  --green-brd:    #333A33;
  --green-text:   #A8C08A;
  --alert-1:      #2E2A24;
  --alert-2:      #282420;
  --alert-brd:    #4A423A;
  --alert-text:   #D8C09A;

  /* Юр-блок: тёмная плашка внутри тёмного листа. Светлее панели на ступень,
     иначе он сливается с ней и перестаёт читаться как отдельный блок. */
  --box-1:        rgba(255,255,255,.05);
  --box-2:        rgba(255,255,255,.03);
  --box-gloss:    rgba(255,255,255,.06);

  /* Опасная кнопка остаётся тёплой и заметной, но перестаёт быть светлым
     пятном: заливка тёмная, а красным теперь горит текст и рамка. */
  --danger-1:     #3A2119;
  --danger-2:     #331C15;
  --danger-brd:   #7A4632;
  --danger-ink:  #FF9B72;

  /* Ночью блики почти гасим, тёплые тени делаем угольными: коричневая
     тень на угольном фоне не читается, и объём кнопок пропадал. */
  --gloss-panel:     rgba(255,255,255,.05);
  --sh-panel-1:      rgba(0,0,0,.55);
  --sh-panel-2:      rgba(0,0,0,.40);
  --sh-panel-3:      rgba(0,0,0,.30);
  --sh-panel-4:      rgba(0,0,0,.25);
  --gloss-panel-2:   rgba(255,255,255,.05);
  --gloss-lea:       rgba(255,255,255,.07);
  --sh-lea-1:        rgba(0,0,0,.60);
  --sh-lea-2:        rgba(0,0,0,.45);
  --sh-lea-3:        rgba(0,0,0,.50);
  --sh-lea-4:        rgba(0,0,0,.55);
  --sh-lea-5:        rgba(0,0,0,.50);
  --sh-lea-6:        rgba(0,0,0,.50);
  --gloss-track:     rgba(255,255,255,.08);
  --sh-track-1:      rgba(0,0,0,.55);
  --sh-track-2:      rgba(0,0,0,.40);
  --sh-caps-1:       rgba(0,0,0,.50);
  --sh-caps-2:       rgba(0,0,0,.35);
  --gloss-num:       rgba(255,255,255,.07);
  --gloss-num-2:     rgba(255,255,255,.09);
  --gloss-info:      rgba(255,255,255,.06);
  --sh-info:         rgba(0,0,0,.40);
  --gloss-alert:     rgba(255,255,255,.06);
  --sh-alert:        rgba(0,0,0,.40);
  --sh-info-2:       rgba(0,0,0,.35);

  /* Тени угольные, а не тёплые: коричневая тень на угольном фоне не читается
     вовсе, и объём кнопок пропадал. */
  --shadow-warm:  rgba(0,0,0,.55);
  --focus:        #9FB2C9;
}

/* Точная высота окна: svh не «дышит» при показе панелей браузера и при
   всплытии клавиатуры (в отличие от dvh). WebView без svh остаётся на
   vh-фолбэке выше — там панель просто немного меньше, композиция та же. */
@supports (height: 100svh){
  :root{
    --u: min(
          calc((100vw - var(--gap-x)) / 743),
          max(calc((100svh - var(--gap-y)) / 1127), var(--u-min)),
          var(--u-max)
         );
  }
}

/* Узкий экран (обложка складня, разделённый экран, старые 320px): поля
   16px → 12px, каждый пиксель идёт в размер кнопок, а не в воздух. */
@media (max-width: 359.98px){
  :root{ --pad: 12px; }
}


/* ───────────────────────────────────────────────────────────────
   1. ЭКРАНЫ МЕНЮ
   body.menu ставит client.js на лобби и ожидание. Он гасит шапку и
   строку статуса (их место занял логотип) и кладёт фон-стол, а сам
   экран .menu-screen становится собственным контейнером прокрутки —
   так центрирование остаётся безопасным даже когда панель выше окна.
   ─────────────────────────────────────────────────────────────── */
body.menu{
  margin: 0;         /* поля страницы задаёт только .menu-screen (safe-area) */
  padding: 0;
  max-width: none;
  height: 100%;      /* страница целиком в экране: прокручивается .menu-screen */
  overflow: hidden;
  background-color: var(--page-bg);
  /* Второй слой — крошечная размытая копия того же кадра (LQIP), она уже
     зашита в index.html для сплэша партии. Фолбэк `none` обязателен: без него
     страница без этого блока (стенд demo/menu) получила бы недействительное
     значение и осталась БЕЗ фона вообще, а не без одной подложки. */
  /* Вариант фона — ТОТ ЖЕ, что выбрал бутстрап в index.html (`--table-light`
     ставится там по фактическим пикселям экрана и трём сигналам слабости).
     До 02.08.2026 здесь стоял жёсткий ОРИГИНАЛ 1440×3200 (834 КБ), а вся
     машинерия @720/@1080 включалась только по `body.playing` — то есть ПОСЛЕ
     посадки за стол. Бюджетник, ради которого ступени и заводились, качал
     оригинал ещё до меню, а потом ВТОРОЙ фон @720 за столом: два файла вместо
     одного. Заодно уходит третий адрес того же семейства — тут был `?v=147`
     против `?v=<текущая>` у бутстрапа, и браузер считал их разными файлами.
     С 09.08.2026 фолбэк — не оригинал, а `@1080?v=<BG_V>`: тот же адрес, что
     ставит бутстрап по умолчанию. Прежний «лучше тяжёлый фон, чем пустой экран»
     стоил стенду demo/menu лишних 160 КБ и, главное, четвёртого адреса на то же
     семейство. Число обязано совпадать с BG_V в index.html — сверяет Gate V. */
  background-image: var(--table-light, url("../assets/table_light@1080.webp?v=219")), var(--splash-bg-light, none);
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
body.menu h1,
body.menu #statusline{ display: none; }

/* Ночная тема: MAX отдаёт prefers-color-scheme в WebView (проверено на
   телефоне 2026-07-07), партия по нему же меняет стол.
   С 11.08.2026 запрос prefers-color-scheme здесь БОЛЬШЕ НЕ СПРАШИВАЕТСЯ: тему
   решает единственный писатель — инлайновый скрипт в шапке index.html, он кладёт
   выбор в data-theme на <html>. Причина в его комментарии: с появлением ручного
   выбора в настройках источников стало бы два, и меню с фоном стола разъехались бы
   молча. Спрашивать систему напрямую отсюда — значит завести второго писателя заново.
   Панель пока остаётся песочной — это предмет, лежащий на столе, а не сам стол;
   тёмная пара для неё приезжает этапом 3. */
:root[data-theme="dark"] body.menu{
  background-color: var(--page-bg-dark);
  background-image: var(--table-dark, url("../assets/table_dark@1080.webp?v=219")), var(--splash-bg-dark, none);
}

/* Границы и поля входят в заданный размер. Иначе рамка панели (2.5u) и рамки
   кнопок добавлялись бы СВЕРХУ к сетке макета: панель становилась 748 × 1197
   вместо 743 × 1192 и на большом экране вылезала за край на пару пикселей.
   В игре глобального сброса нет — задаём свой, только внутри меню. */
.menu-screen,
.menu-screen *,
.menu-screen *::before,
.menu-screen *::after{ box-sizing: border-box; }

.menu-screen{
  flex: 1 1 auto;
  /* Высоту экран задаёт себе САМ, а не берёт у родителя: в игре он живёт
     внутри body-колонки, а на стенде demo/menu — сам по себе. Именно height,
     не min-height: с min-height блок растёт под содержимое, прокручивать
     становится нечего, и в альбомной ориентации низ панели просто обрезался
     бы родителем. svh — высота при показанных панелях браузера, как в --u. */
  height: 100vh;
  height: 100svh;
  display: flex;                   /* центрируем через margin:auto у панели */
  font-family: var(--m-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;  /* без серой вспышки при тапе */
  /* Прокрутка по вертикали разрешена, но в портрете её нет: панель вписана
     в экран. Включается только когда упёрлись в пол читаемости --u-min. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;       /* без «оттяжки» и pull-to-refresh */
  /* Меню — набор кнопок, а не текст: длинный тап не выделяет надписи и не
     зовёт лупу. Поле ввода кода стола исключено отдельно (блок 12). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding-top:    calc(var(--pad) + env(safe-area-inset-top, 0px));
  padding-right:  calc(var(--pad) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(var(--pad) + env(safe-area-inset-left, 0px));
}


/* ───────────────────────────────────────────────────────────────
   2. ПАНЕЛЬ 743 × 1127 (в единицах --u)
   ─────────────────────────────────────────────────────────────── */
.menu-screen .panel{
  position: relative;
  margin: auto;            /* центрирование, безопасное при прокрутке */
  flex: 0 0 auto;          /* размер задаёт только --u, флекс не жмёт */
  width: calc(var(--u) * 743);
  /* 1192 → 1127 (12.08.2026). Содержимое идёт сверху, а подвал прижат к низу
     через margin-top:auto — значит ВЕСЬ неиспользованный остаток высоты
     собирается в один зазор перед подвалом. После переезда настроек вниз и
     подъёма логотипа этот зазор вырос до 121 единицы при соседних 22–57
     (замер), и подвал читался оторванным хвостом. Лечится только самой
     высотой: сдвинуть подвал отступом нельзя — воздух переехал бы ПОД него.
     Убрано 65 единиц, зазор стал 56 — в ряд с соседними. Число парное
     делителю в формуле --u выше: оно там ровно для того, чтобы панель
     вписывалась в экран по высоте, и разъехаться им нельзя. */
  height: calc(var(--u) * 1127);
  border-radius: calc(var(--u) * 48);
  border: calc(var(--u) * 2.5) solid var(--panel-rim);
  background:
    radial-gradient(120% 55% at 50% -6%, var(--gloss-panel), rgba(255,243,219,0) 60%),
    linear-gradient(180deg, var(--panel-1) 0%, var(--panel-mid) 55%, var(--panel-2) 100%);
  box-shadow:
    0 calc(var(--u)*26) calc(var(--u)*52) var(--sh-panel-1),
    0 calc(var(--u)*8)  calc(var(--u)*18) var(--sh-panel-2),
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.55),
    inset 0 calc(var(--u)*-14) calc(var(--u)*26) var(--sh-panel-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* содержимое от верха: воздух копится снизу */
  /* overflow:hidden сознательно НЕ ставим: он срезал невидимую зону касания
     кнопки «…» у кромки. Видимые слои скруглены своим border-radius. */
}

/* Лёгкая бумажно-песочная текстура — плитка assets/menu/texture-noise.png.
   Заметность регулируется opacity: 0 — выключить совсем. */
.menu-screen .panel::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("../assets/menu/texture-noise.png");
  background-size: calc(var(--u) * 230);
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Неоднородность освещения: блик слева-сверху, тепло снизу */
.menu-screen .panel::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(90% 34% at 24% 12%, var(--gloss-panel-2), transparent 70%),
    radial-gradient(120% 55% at 50% 108%, var(--sh-panel-4), transparent 58%);
  pointer-events: none;
}

.menu-screen .panel > *{ position: relative; z-index: 1; flex-shrink: 0; }


/* ───────────────────────────────────────────────────────────────
   3. ЛОГОТИП (assets/menu/logo.png)
   Ширина задаётся здесь, высота считается по пропорциям картинки —
   файл можно подменить без правки стилей.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .logo{
  /* 150 → 64 единиц (12.08.2026). Прежний отступ держался ради круглой «…» в
     верхнем углу: логотип уходил вниз, чтобы кнопка не села ему на листик.
     Кнопка переехала в подвал, повод исчез, и остался только воздух. 64 —
     это поле подвала (30) плюс высота его строки: верх и низ панели дышат
     одинаково, композиция читается симметрично. */
  margin-top: calc(var(--u) * 64);
  width: calc(var(--u) * 620);
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}


/* ───────────────────────────────────────────────────────────────
   4. КНОПКИ: ОБЩИЙ СБРОС И ФОКУС
   Сброс перебивает глобальные button-правила экрана партии
   (margin/padding/font-size в <style> внутри index.html).
   ─────────────────────────────────────────────────────────────── */
.menu-screen button{
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;   /* без задержки двойного тапа */
  -webkit-tap-highlight-color: transparent;
}
.menu-screen button:focus{ outline: none; }
.menu-screen button:active{ transform: none; }  /* гасим общий scale(.97) */

/* Видимая обводка ТОЛЬКО при навигации с клавиатуры */
.menu-screen button:focus-visible,
.menu-screen .switch:focus-visible,
.menu-screen a:focus-visible{
  outline: max(2px, calc(var(--u)*3)) solid var(--focus);
  outline-offset: max(2px, calc(var(--u)*3));
}


/* ───────────────────────────────────────────────────────────────
   5. ГЛАВНАЯ КНОПКА «НАЙТИ СОПЕРНИКА»
   Объём собран из: градиент + внутренние блики (inset) + нижняя
   «губа» + мягкие тени. При нажатии кнопка опускается, «губа» и
   тени укорачиваются.

   ⚠️ РАЗМЕР ТЕНЕЙ УБАВЛЕН НА ТРЕТЬ (12.08.2026, решение Максима по виду в
   светлой теме: «слишком большая и расплывчатая»). Правило одно на все кнопки
   лобби, поэтому и правились все разом: главная 18/28 → 12/18 и 6/10 → 4/7,
   светлые кнопки и цифры 13/18 → 8/12, круглая «…», строки шторок и станций
   10/14 → 7/10, информационная строка 10/16 → 7/11, нажатые состояния в той
   же пропорции. Цвет тени (--sh-*, --shadow-warm) НЕ трогали — менялись
   только смещение и размытие, поэтому ночная тема получила ту же правку
   формы при своих чёрных тенях.
   «Губа» (слой со смещением и нулевым размытием) оставлена как была: объём
   держится на ней, и без неё кнопка становится плоской наклейкой. ─────── */
.menu-screen .btn-main{
  position: relative;
  margin-top: calc(var(--u) * 48);
  width: calc(var(--u) * 623);
  height: calc(var(--u) * 142);
  border-radius: calc(var(--u) * 36);
  border: calc(var(--u) * 2.5) solid var(--gold-frame);
  background:
    url("../assets/menu/texture-noise.png"),
    linear-gradient(180deg, var(--lea-1) 0%, var(--lea-2) 50%, var(--lea-3) 100%);
  background-size: calc(var(--u) * 180), 100% 100%;
  background-blend-mode: soft-light, normal;   /* зернистость кожи */
  box-shadow:
    inset 0 calc(var(--u)*2)  calc(var(--u)*3)  var(--gloss-lea),
    inset 0 calc(var(--u)*-8) calc(var(--u)*14) calc(var(--u)*-4) rgba(60,32,4,.45),
    0 calc(var(--u)*8)  0 var(--lea-lip),
    0 calc(var(--u)*12) calc(var(--u)*18) var(--sh-lea-1),
    0 calc(var(--u)*4)  calc(var(--u)*7)  var(--sh-lea-2);
  display: flex;
  align-items: center;
  padding-left: calc(var(--u) * 58);
  gap: calc(var(--u) * 26);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
/* Пунктирная «стежка» по периметру (декор, клики пропускает) */
.menu-screen .btn-main::after{
  content: "";
  position: absolute;
  inset: calc(var(--u) * 8);
  border: calc(var(--u) * 1.6) dashed var(--stitch);
  border-radius: calc(var(--u) * 27);
  pointer-events: none;
}
.menu-screen .btn-main .txt{
  font-size: calc(var(--u) * 40);
  font-weight: 700;
  letter-spacing: calc(var(--u) * .6);
  color: var(--btn-text);
  text-shadow: 0 calc(var(--u)*2.5) calc(var(--u)*2) rgba(101,50,0,.5);
  white-space: nowrap;
}
.menu-screen .btn-main .ic-cards{
  width: calc(var(--u) * 112);
  height: calc(var(--u) * 96);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*4) rgba(90,45,0,.35));
}
.menu-screen .btn-main:active{
  transform: translateY(calc(var(--u) * 5));
  box-shadow:
    inset 0 calc(var(--u)*2)  calc(var(--u)*3)  var(--gloss-lea),
    inset 0 calc(var(--u)*-8) calc(var(--u)*14) calc(var(--u)*-4) rgba(60,32,4,.45),
    0 calc(var(--u)*3)  0 var(--lea-lip),
    0 calc(var(--u)*5)  calc(var(--u)*9)  var(--sh-lea-3);
}


/* ───────────────────────────────────────────────────────────────
   6. ПОДПИСИ СЕКЦИЙ («Режим игры», «Количество игроков»)
   Точки по бокам рисуются псевдоэлементами ::before / ::after.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .label{
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  font-size: calc(var(--u) * 27);
  font-weight: 600;
  letter-spacing: calc(var(--u) * .4);
  color: var(--ink);
  line-height: calc(var(--u) * 32);
  text-shadow: 0 calc(var(--u)*1) 0 rgba(255,248,232,.6);
}
.menu-screen .label::before,
.menu-screen .label::after{
  content: "";
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 calc(var(--u)*1) calc(var(--u)*1) rgba(120,80,30,.35);
}
.menu-screen .label--mode{    margin-top: calc(var(--u) * 57); }
.menu-screen .label--players{ margin-top: calc(var(--u) * 32); }


/* ───────────────────────────────────────────────────────────────
   7. ПЕРЕКЛЮЧАТЕЛЬ «РЕЖИМ ИГРЫ»
   Дорожка (.switch) утоплена внутренними тенями, капсула (.thumb)
   выпуклая и ездит ТОЛЬКО через transform: translateX. Во время
   перетаскивания класс .is-dragging отключает transition, после
   отпускания капсула плавно фиксируется за var(--snap-ms).
   ─────────────────────────────────────────────────────────────── */
.menu-screen .switch{
  margin-top: calc(var(--u) * 9);
  position: relative;
  width: calc(var(--u) * 555);
  height: calc(var(--u) * 112);
  border-radius: calc(var(--u) * 56);
  padding: calc(var(--u) * 12);
  background: linear-gradient(180deg, var(--track-top) 0%, var(--track-bg) 45%, var(--track-bot) 100%);
  box-shadow:
    inset 0 calc(var(--u)*4) calc(var(--u)*8) var(--sh-track-1),
    inset 0 calc(var(--u)*1) calc(var(--u)*2) var(--sh-track-2),
    0 calc(var(--u)*2) 0 var(--gloss-track);
  display: flex;
  touch-action: pan-y;   /* вертикальный скролл — экрану, горизонталь — нам */
}
.menu-screen .switch .thumb{
  position: absolute;
  top: calc(var(--u) * 12);
  bottom: calc(var(--u) * 12);
  left: calc(var(--u) * 12);
  width: calc(50% - var(--u) * 12);
  border-radius: calc(var(--u) * 44);
  border: calc(var(--u) * 2) solid var(--capsule-brd);
  background: linear-gradient(180deg, var(--capsule-1) 0%, var(--capsule-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.85),
    0 calc(var(--u)*5) calc(var(--u)*9) var(--sh-caps-1),
    0 calc(var(--u)*2) calc(var(--u)*3) var(--sh-caps-2);
  transform: translateX(0);
  transition: transform var(--snap-ms) cubic-bezier(.22,.7,.3,1);
  will-change: transform;
  z-index: 1;
}
.menu-screen .switch .thumb.is-dragging{ transition: none; }

.menu-screen .switch .opt{
  position: relative;
  z-index: 2;                  /* текст поверх капсулы */
  flex: 1 1 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--u) * 44);
  font-size: calc(var(--u) * 29);
  font-weight: 700;   /* вес одинаковый у активного и неактивного: анимация
                         font-weight на вариативном шрифте растягивала буквы */
  color: var(--ink-muted);
  transition: color .2s ease;
  white-space: nowrap;
}
.menu-screen .switch .opt.is-active{ color: var(--ink-strong); }
/* Половинка ростом 88u: на самом маленьком экране это 35px — меньше
   пальцевых 44px. Расширяем зону касания невидимо, внутри дорожки. */
.menu-screen .switch .opt::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}


/* ───────────────────────────────────────────────────────────────
   8. КНОПКИ КОЛИЧЕСТВА ИГРОКОВ (2 / 3 / 4)
   Активная перекрашивается в кожу главной кнопки (--lea-* + золотая
   рамка), текст белеет — цифра выглядит отлитой из того же материала.
   Кожаный слой лежит в ::before и проявляется через opacity.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .players{
  margin-top: calc(var(--u) * 22);
  display: flex;
  gap: calc(var(--u) * 31);
}
.menu-screen .players .num{
  position: relative;
  width: calc(var(--u) * 124);
  height: calc(var(--u) * 78);
  border-radius: calc(var(--u) * 20);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.8),
    0 calc(var(--u)*7) 0 var(--cream-lip),
    0 calc(var(--u)*8) calc(var(--u)*12) var(--shadow-warm);
  font-size: calc(var(--u) * 35);
  font-weight: 700;
  color: var(--num-text);
  transition: transform .12s ease, box-shadow .25s ease,
              border-color .25s ease, color .25s ease;
}
.menu-screen .players .num::before{
  content: "";
  position: absolute; inset: calc(var(--u) * -2);
  border-radius: inherit;
  border: calc(var(--u) * 2) solid var(--gold-frame);
  background:
    url("../assets/menu/texture-noise.png"),
    linear-gradient(180deg, var(--lea-1) 0%, var(--lea-2) 50%, var(--lea-3) 100%);
  background-size: calc(var(--u) * 120), 100% 100%;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 calc(var(--u)*2)  calc(var(--u)*3) var(--gloss-lea),
    inset 0 calc(var(--u)*-5) calc(var(--u)*9) calc(var(--u)*-3) rgba(60,32,4,.4);
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-screen .players .num span{ position: relative; }  /* цифра поверх слоя */

.menu-screen .players .num.is-active{
  border-color: var(--gold-frame);
  color: var(--btn-text);
  text-shadow: 0 calc(var(--u)*2) calc(var(--u)*1.5) rgba(60,30,4,.5);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) var(--gloss-num),
    0 calc(var(--u)*7) 0 var(--lea-lip),
    0 calc(var(--u)*8) calc(var(--u)*12) var(--sh-lea-4);
}
.menu-screen .players .num.is-active::before{ opacity: 1; }

.menu-screen .players .num:active{
  transform: translateY(calc(var(--u) * 4));
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.7),
    0 calc(var(--u)*3) 0 var(--cream-lip),
    0 calc(var(--u)*4) calc(var(--u)*6) var(--shadow-warm);
}
.menu-screen .players .num.is-active:active{
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) var(--gloss-num),
    0 calc(var(--u)*3) 0 var(--lea-lip),
    0 calc(var(--u)*4) calc(var(--u)*6) var(--sh-lea-5);
}


/* ───────────────────────────────────────────────────────────────
   9. СВЕТЛЫЕ КНОПКИ И КРУГЛАЯ «…» В УГЛУ
   ─────────────────────────────────────────────────────────────── */
.menu-screen .btn-soft{
  position: relative;
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.8),
    0 calc(var(--u)*7) 0 var(--cream-lip),
    0 calc(var(--u)*8) calc(var(--u)*12) var(--shadow-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
  font-size: calc(var(--u) * 27);
  font-weight: 700;
  color: var(--soft-text);
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.menu-screen .btn-soft .ic{
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  object-fit: contain;
  flex-shrink: 0;
}
.menu-screen .btn-soft:active{
  transform: translateY(calc(var(--u) * 4));
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.7),
    0 calc(var(--u)*3) 0 var(--cream-lip),
    0 calc(var(--u)*4) calc(var(--u)*6) var(--shadow-warm);
}
.menu-screen .btn-soft:disabled{
  opacity: .55;
  box-shadow: inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.6);
  transform: none;
}

/* Невидимое расширение зоны касания: щёлкается область не ниже 44px по
   высоте, даже когда сама кнопка на экране меньше. Пункты подвала здесь
   же: текстом они 17px, пальцем — 44px. */
.menu-screen .players .num::after,
.menu-screen .footer-item::after,
.menu-screen .toggle-row::after,
.menu-screen .btn-soft::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

/* Ряд «ИИ + друзья» */
.menu-screen .duo{
  margin-top: calc(var(--u) * 48);
  display: flex;
  gap: calc(var(--u) * 29);
}
.menu-screen .btn-ai{      width: calc(var(--u) * 297); }
.menu-screen .btn-friends{ width: calc(var(--u) * 350); }
/* Высота «Играть с ИИ»/«Играть с друзьями» = высоте зоны «Режим игры» (.switch,
   112u): просьба Максима 23.07 — были 84u (заметно ниже переключателя). Правим
   ТОЛЬКО эти две (в .duo); общий .btn-soft (кнопки шторок, «Позвать друга»/
   «Отмена» на экране ожидания) остаётся 84u. Контент центрируется флексом
   (.btn-soft align/justify center) — иконка и текст останутся по центру. */
.menu-screen .duo .btn-soft{ height: calc(var(--u) * 112); }

/* `.btn-gear` здесь БОЛЬШЕ НЕТ (12.08.2026). Круглая «…» в правом верхнем
   углу панели открывала настройки; теперь вход живёт в подвале рядом с
   «О приложением» (раздел 11 ниже, разметка — .footer-row в index.html).
   Верхний угол панели освободился целиком, вместе с ним ушёл и воздух над
   логотипом, который держался ради этой кнопки.
   Пара растровых иконок dots.png/dots_dark.png при этом ОСТАВЛЕНА, хотя в
   клиенте носителя у неё больше нет. Проверка читателей по всему репозиторию
   нашла живого: стенд demo/menu/index.html:95 ссылается на dots.png напрямую.
   demo/ лежит вне git (мастерская Максима, без бэкапа), поэтому удаление
   файла сломало бы стенд молча и без возможности откатить. С gear.png 12.08
   было иначе — там читателей не нашлось ни одного. */


/* ───────────────────────────────────────────────────────────────
   10. ИНФОРМАЦИОННАЯ СТРОКА
   Одно место для двух вещей: обычно это «сейчас играют: N», а когда
   игре есть что сказать (нет кода стола, матч истёк, стол занят) —
   та же строка на несколько секунд становится подсказкой (.is-alert)
   и возвращается к счётчику. Отдельной строки ошибок в макете нет —
   и не нужно: два сообщения одновременно всё равно не читают.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .info{
  margin-top: calc(var(--u) * 50);
  max-width: calc(var(--u) * 640);   /* длинная подсказка не вылезет за панель */
  padding: 0 calc(var(--u) * 32);
  height: calc(var(--u) * 65);
  border-radius: calc(var(--u) * 18);
  border: calc(var(--u) * 2) solid var(--green-brd);
  background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) 0 var(--gloss-info),
    0 calc(var(--u)*5) 0 var(--sh-info),
    0 calc(var(--u)*7) calc(var(--u)*11) var(--sh-info-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.menu-screen .info .txt{
  font-size: calc(var(--u) * 25);
  font-weight: 700;
  color: var(--green-text);
  text-shadow: 0 calc(var(--u)*1) 0 rgba(255,255,240,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-screen .info.is-alert{
  border-color: var(--alert-brd);
  background: linear-gradient(180deg, var(--alert-1) 0%, var(--alert-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) 0 var(--gloss-alert),
    0 calc(var(--u)*5) 0 var(--sh-alert),
    0 calc(var(--u)*7) calc(var(--u)*11) var(--sh-info-2);
}
.menu-screen .info.is-alert .txt{ color: var(--alert-text); }


/* ───────────────────────────────────────────────────────────────
   11. ПОДВАЛ: «НАСТРОЙКИ │ О ПРИЛОЖЕНИИ»
   margin-top:auto прижимает ряд к низу панели, весь свободный воздух
   собирается над ним — подвал всегда в самом низу.
   С 12.08.2026 входов здесь два: настройки переехали сюда из круглой
   кнопки «…» в верхнем углу. Подчёркивания больше нет — это кнопки, а
   не ссылки, и опознаются они иконкой.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .footer-row{
  margin-top: auto;
  margin-bottom: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}
.menu-screen .footer-item{
  position: relative;                   /* опора для зоны касания ::after */
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: calc(var(--u) * 25);
  /* Высота строки задана явно, в единицах макета: иначе браузер считает её
     от метрик шрифта и округляет до целых пикселей — подвал получался
     разной высоты на разных экранах, и композиция переставала совпадать. */
  line-height: calc(var(--u) * 30);
  font-weight: 600;
  color: var(--ink-muted);
  border-radius: calc(var(--u) * 10);
  transition: color .15s ease;
}
/* Иконка тянет цвет из текста кнопки (stroke="currentColor" в разметке):
   отдельной ночной пары ей не нужно, тему она получает вместе с --ink-muted. */
.menu-screen .footer-item .fi-ico{
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  flex: none;
}
.menu-screen .footer-item:active{ color: var(--ink); }
/* Разделитель — тонкая черта между двумя входами. Отдельным элементом, а не
   границей соседа: у границы нет своей высоты, и она тянулась бы на всю
   кнопку вместе с её зоной касания. */
.menu-screen .footer-sep{
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 1);
  background: var(--dot);
  opacity: .8;
}


/* ───────────────────────────────────────────────────────────────
   12. ШТОРКИ: «ИГРА С ДРУЗЬЯМИ» И «НАСТРОЙКИ»
   Выезжают снизу поверх меню. Всё, что не поместилось в макет
   (код стола, оповещения о ходе), живёт здесь: главный экран
   остаётся из пяти решений, а не из пятнадцати.
   Закрываются тапом по затемнению, кнопкой «Закрыть» и Esc.
   ─────────────────────────────────────────────────────────────── */
/* Обёртка для шторки, вынесенной НА КОРЕНЬ страницы (index.html: #radio-panel
   должна открываться и ПОВЕРХ ПАРТИИ, а #lobby в игре display:none). Класс
   menu-screen на обёртке нужен селекторам ниже («.menu-screen .sheet…» —
   каскад не трогаем), а display:contents стирает её собственный бокс: ни
   высоты 100svh, ни flex — к детям доезжают только правила потомков и
   наследуемый шрифт меню. Поддержка display:contents в Chromium давняя,
   WebView MAX включительно. */
.menu-screen.sheet-layer{ display: contents; }

.menu-screen .sheet{
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Затемнение фона — ТОЛЬКО на контейнере (background-color), НЕ через opacity
     всей шторки. Раньше был `opacity: 0→1` на .sheet: он фейдил ВСЁ разом —
     и фон, и саму карточку, поэтому открытие читалось как «проявление сквозь
     прозрачность», а не выезд, а закрытие давало «прозрачный эффект» (жалоба
     Максима 23.07). Теперь карточка всегда непрозрачна и только едет (ниже),
     а тут гасим/зажигаем лишь подложку. */
  background-color: transparent;
  transition: background-color .24s ease;
  /* Жесты на затемнении браузеру и платформе не отдаём. Экран меню защищён
     overscroll-behavior, но шторка — отдельный fixed-слой поверх него: без
     этой строки потяг вниз мимо карточки MAX считал своим и закрывал
     мини-приложение в бот (жалоба с телефона 21.07). Прокрутка внутри
     карточки не страдает — она сама контейнер прокрутки со своим
     touch-action, и цепочка touch-action обрывается на ней. */
  touch-action: none;
  overscroll-behavior: none;
}
/* `.sheet[hidden]` здесь БОЛЬШЕ НЕТ (09.08.2026). Это была точечная заплата на
   общую болезнь: авторский `display` перебивает браузерное `[hidden]`, и лечить
   надо было контракт, а не одного носителя. Второй носитель — блок ссылки на
   стол — прожил с дефектом до жалобы игрока. Общее правило стоит в шапке
   index.html (инлайновый <style>), там же разбор, почему именно там. */
/* Цвет затемнения — ТОКЕНОМ, а не литералом: литерал был один на обе темы,
   и ночью подложка отдавала коричневым. Значения и разбор — у --sheet-scrim
   в блоках палитры выше. */
.menu-screen .sheet.is-open{ background-color: var(--sheet-scrim); }

.menu-screen .sheet-card{
  width: min(calc(var(--u) * 743), 100%);
  max-height: 88%;
  overflow-y: auto;
  /* Прокрутка внутри карточки не «протекает» наружу: без этого докрутка до
     края отдавала жест платформе, а MAX закрывает мини-приложение потягом
     вниз (жалоба с телефона 21.07). Тот же жест на ручке перехватывает
     .sheet-grip ниже — там touch-action выключен полностью. */
  overscroll-behavior: contain;
  /* Внутри карточки вертикальная прокрутка разрешена явно: родительский
     `touch-action: none` иначе погасил бы и её. */
  touch-action: pan-y;
  will-change: transform;   /* карточку двигает палец — просим слой заранее */
  padding: calc(var(--u) * 40) calc(var(--u) * 40)
           calc(var(--u) * 40 + env(safe-area-inset-bottom, 0px));
  border-radius: calc(var(--u) * 48) calc(var(--u) * 48) 0 0;
  border: calc(var(--u) * 2.5) solid var(--panel-rim);
  border-bottom: 0;
  background:
    radial-gradient(120% 55% at 50% -6%, var(--gloss-panel), rgba(255,243,219,0) 60%),
    linear-gradient(180deg, var(--panel-1) 0%, var(--panel-mid) 55%, var(--panel-2) 100%);
  box-shadow: 0 calc(var(--u)*-10) calc(var(--u)*40) rgba(80,45,10,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
  /* Стартовая позиция — ПОЛНОСТЬЮ под нижним краем (translateY(100%) = вся
     собственная высота карточки). Открытие едет 100%→0 — явный выезд снизу
     вверх, а не прежний еле заметный сдвиг 6%. Закрытие/свайп уводит обратно
     к 100% (карточка целиком уходит за край), fade нет — только движение.
     opacity карточки НЕ трогаем нигде: она всегда непрозрачна. */
  transform: translateY(100%);
  transition: transform .30s cubic-bezier(.22,.7,.3,1);
}
.menu-screen .sheet.is-open .sheet-card{ transform: translateY(0); }

/* Полоска-«ручка» сверху: намёк, что шторку можно закрыть — и настоящая
   зона захвата. Раньше её рисовал ::before, а псевдоэлемент событий не ловит:
   палец тянул не шторку, а всё мини-приложение (MAX закрывался в бот).
   Теперь это элемент с выключенным touch-action — браузер и платформа жест
   не трогают, его целиком разбирает menu.js. Полоска нарисована ::after,
   чтобы область захвата (44px по высоте) была больше видимой черты. */
.menu-screen .sheet-grip{
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  height: calc(var(--u) * 44);
  margin: calc(var(--u) * -18) 0 calc(var(--u) * -8);
  touch-action: none;
  cursor: grab;
}
.menu-screen .sheet-grip::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: rgba(122,85,48,.35);
}
/* Пока шторку тянут — без перехода, иначе карточка «догоняет» палец */
.menu-screen .sheet-card.is-dragging{ transition: none; }
.menu-screen .sheet-title{
  margin: 0;
  font-size: calc(var(--u) * 34);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: calc(var(--u) * .4);
}
.menu-screen .sheet-row{ width: 100%; }
.menu-screen .sheet-or{
  font-size: calc(var(--u) * 25);
  font-weight: 600;
  color: var(--ink-muted);
}
.menu-screen .sheet-hint{
  margin: 0;
  min-height: calc(var(--u) * 30);
  font-size: calc(var(--u) * 24);
  font-weight: 600;
  color: var(--alert-text);
  text-align: center;
}

/* Строка ввода кода стола */
.menu-screen .field{
  display: flex;
  gap: calc(var(--u) * 16);
  width: 100%;
}
.menu-screen .field input{
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--u) * 84);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  background: linear-gradient(180deg, #fff8ec 0%, #fdefdc 100%);
  box-shadow: inset 0 calc(var(--u)*3) calc(var(--u)*6) rgba(158,102,42,.18);
  font-family: var(--m-font);
  font-size: calc(var(--u) * 30);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 2);
  color: var(--ink-strong);
  text-transform: uppercase;
  /* Поле ввода — единственное место меню, где выделение текста нужно. */
  user-select: text;
  -webkit-user-select: text;
}
.menu-screen .field input::placeholder{
  color: rgba(122,85,48,.55);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.menu-screen .field input:focus{
  outline: none;
  border-color: var(--gold-frame);
}
.menu-screen .field .btn-soft{ width: calc(var(--u) * 190); }

/* — Тумблеры настроек: строка + капсула ————————————————————————
   Раньше это были системные галочки в белом диалоге «О приложении». Капсула
   собрана из того же материала, что переключатель «Режим игры», только вдвое
   мельче: включено — кожа главной кнопки, выключено — утопленная дорожка. */
.menu-screen .toggle-row{
  position: relative;
  width: 100%;
  height: calc(var(--u) * 84);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.8),
    0 calc(var(--u)*5) 0 var(--cream-lip),
    0 calc(var(--u)*7) calc(var(--u)*10) var(--shadow-warm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.menu-screen .toggle-row:active{
  transform: translateY(calc(var(--u) * 3));
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.7),
    0 calc(var(--u)*2) 0 var(--cream-lip),
    0 calc(var(--u)*3) calc(var(--u)*5) var(--shadow-warm);
}
.menu-screen .toggle-name{
  font-size: calc(var(--u) * 27);
  font-weight: 700;
  color: var(--soft-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Дорожка */
.menu-screen .toggle{
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  border: calc(var(--u) * 2) solid var(--capsule-brd);
  background: linear-gradient(180deg, var(--track-top) 0%, var(--track-bot) 100%);
  box-shadow: inset 0 calc(var(--u)*3) calc(var(--u)*6) var(--sh-track-1);
  transition: background .2s ease, border-color .2s ease;
}
/* Кругляш */
.menu-screen .toggle-knob{
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: calc(var(--u) * 2) solid var(--capsule-brd);
  background: linear-gradient(180deg, var(--capsule-1) 0%, var(--capsule-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.85),
    0 calc(var(--u)*3) calc(var(--u)*5) var(--sh-caps-1);
  transition: transform var(--snap-ms) cubic-bezier(.22,.7,.3,1), border-color .2s ease;
}
.menu-screen .toggle-row[aria-checked="true"] .toggle{
  border-color: var(--gold-frame);
  background: linear-gradient(180deg, var(--lea-1) 0%, var(--lea-3) 100%);
  box-shadow: inset 0 calc(var(--u)*3) calc(var(--u)*6) rgba(60,32,4,.35);
}
.menu-screen .toggle-row[aria-checked="true"] .toggle-knob{
  transform: translateX(calc(var(--u) * 44));
  border-color: var(--gold-frame);
}

/* — «О приложении»: юр-блок, ссылки, удаление данных ————————————— */
.menu-screen .about-box{
  width: 100%;
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  /* Вынесено в токены 11.08.2026. Почти все литералы в этом файле —
     полупрозрачные блики и тени, и в ночной теме они работают сами. Этот —
     исключение: заливка непрозрачна на три четверти, поверх тёмной панели она
     оставалась светло-серым пятном, а текст поверх неё уже светлый — строка с
     ИНН читалась хуже фона. Поймано скриншотом, а не чтением кода. */
  background: linear-gradient(180deg, var(--box-1) 0%, var(--box-2) 100%);
  box-shadow: inset 0 calc(var(--u)*2) calc(var(--u)*2) var(--box-gloss);
}
.menu-screen .about-lead{
  margin: 0 0 calc(var(--u) * 10);
  font-size: calc(var(--u) * 29);
  font-weight: 700;
  color: var(--ink);
}
.menu-screen .about-line{
  margin: calc(var(--u) * 6) 0 0;
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 34);
  font-weight: 600;
  color: var(--soft-text);
  /* Реквизиты иногда переписывают — пусть их можно выделить и скопировать. */
  user-select: text;
  -webkit-user-select: text;
}
.menu-screen .about-dim{ color: var(--ink-muted); font-weight: 600; }
.menu-screen .about-box a,
.menu-screen .about-links a{
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 3);
  text-decoration-color: rgba(122,85,48,.5);
}
.menu-screen .about-links{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: calc(var(--u) * 25);
  font-weight: 600;
}
.menu-screen .about-links a{ padding: calc(var(--u) * 6) calc(var(--u) * 10); }
/* Опасная зона: единственное необратимое действие — визуально отделено чертой */
.menu-screen .about-danger{
  width: 100%;
  padding-top: calc(var(--u) * 20);
  border-top: calc(var(--u) * 2) solid rgba(200,164,104,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 12);
}
.menu-screen .btn-danger{
  border-color: var(--danger-brd);
  background: linear-gradient(180deg, var(--danger-1) 0%, var(--danger-2) 100%);
  color: var(--danger-ink);
}
.menu-screen .btn-danger:not(:disabled):active{
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.7),
    0 calc(var(--u)*3) 0 var(--danger-brd),
    0 calc(var(--u)*4) calc(var(--u)*6) var(--shadow-warm);
}

.menu-screen .sheet-close{
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 10) calc(var(--u) * 20);
  font-size: calc(var(--u) * 25);
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 3);
  text-decoration-color: rgba(122,85,48,.5);
}


/* ───────────────────────────────────────────────────────────────
   13. ЭКРАН ОЖИДАНИЯ (поиск соперника, стол друзей)
   Та же панель, тот же логотип — переход из меню читается как смена
   содержимого, а не как прыжок в другое приложение.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .wait-box{
  /* Свободная высота делится поровну над и под блоком: карты с текстом
     встают в оптический центр между логотипом и кнопками, а не прижимаются
     к логотипу с провалом под собой. */
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 50);
  text-align: center;
}
.menu-screen .wait-cards{
  width: calc(var(--u) * 168);
  height: calc(var(--u) * 144);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u)*6) calc(var(--u)*8) rgba(90,45,0,.30));
  animation: menu-wait-breathe 2.4s ease-in-out infinite;
}
@keyframes menu-wait-breathe{
  50%{ transform: translateY(calc(var(--u) * -10)) rotate(-2deg); }
}
.menu-screen #waiting-text{
  margin: 0;
  font-size: calc(var(--u) * 32);
  font-weight: 700;
  line-height: calc(var(--u) * 42);
  color: var(--ink);
  text-shadow: 0 calc(var(--u)*1) 0 rgba(255,248,232,.6);
}
.menu-screen .wait-actions{
  margin-bottom: calc(var(--u) * 60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
}
/* Высота 112, а не базовые 84 — ровно как у пары «ИИ / друзья» в .duo. При 84
   кнопка на просторном экране ожидания читалась плоской полосой: вокруг неё
   пусто, сравнивать не с чем, и глаз меряет её высоту по ширине панели
   (жалоба Максима 12.08.2026). Ставим ряду целиком, а не одной «Отмене»:
   разнобой высот в одном столбце заметнее, чем низкая кнопка. */
.menu-screen .wait-actions .btn-soft{
  width: calc(var(--u) * 420);
  height: calc(var(--u) * 112);
}
/* Второй путь приглашения (30.07.2026): показывается только когда мост MAX не
   ответил. Живёт в том же ритме, что кнопки ожидания — своя типографика тут
   лишняя, это не новый блок интерфейса, а продолжение существующего. Верхний
   отступ отрицательный, потому что .wait-actions уже несёт margin-bottom 60:
   без этого между кнопками и ссылкой зияла бы дыра в две высоты кнопки. */
.menu-screen .wait-fallback{
  margin-top: calc(var(--u) * -40);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 16);
}
.menu-screen .wait-fallback-text{
  margin: 0;
  max-width: calc(var(--u) * 460);
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 32);
  color: var(--ink-muted);
  text-align: center;
  /* Ссылка длиннее строки: рвём по любому символу, иначе код стола уезжает за
     край экрана (пол диапазона — 360 px, там это заметно). */
  overflow-wrap: anywhere;
}
.menu-screen .wait-fallback-text #invite-link{
  font-weight: 700;
  color: var(--ink);
}
/* `.btn-ghost` здесь БОЛЬШЕ НЕТ (12.08.2026), и возвращать его в прежнем виде
   нельзя. Класс приглушал «Отмену» и «Скопировать ссылку» тремя цветовыми
   ЛИТЕРАЛАМИ: золотистая рамка rgba(200,164,104,.55), почти белая заливка
   rgba(255,247,232,.5) и белый внутренний блик. Вынос литералов в токены
   11.08.2026 шёл «по факту, а не списком» — этот блок в перечень не попал, и
   тема его не переопределяла ничем: ночью на угольной панели получалась
   бежевая плашка с золотой рамкой и еле читаемым текстом (жалоба Максима со
   скрина). Обе кнопки теперь обычные `.btn-soft` — он весь на токенах и в
   ночной теме угольный сам.
   Приглушение НЕ восстановлено осознанно: на экране ожидания кнопок две, и
   тише делать одну из двух нечего. Понадобится второстепенная кнопка — брать
   токены, а не литералы. */


/* ───────────────────────────────────────────────────────────────
   14. HOVER ДЛЯ МЫШИ И УВАЖЕНИЕ К НАСТРОЙКАМ АНИМАЦИИ
   ─────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine){
  .menu-screen .btn-main:hover:not(:active),
  .menu-screen .btn-soft:hover:not(:active):not(:disabled),
  .menu-screen .players .num:hover:not(:active){
    filter: brightness(1.035);
  }
  .menu-screen .footer-item:hover,
  .menu-screen .sheet-close:hover{
    color: var(--ink-strong);
    text-decoration-color: var(--ink-strong);
  }
}

@media (prefers-reduced-motion: reduce){
  .menu-screen *,
  .menu-screen *::before,
  .menu-screen *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   РАДИО: строка входа в «Настройках» + список станций в своей шторке
   Единицы --u и палитра — те же, что у соседних песочных строк, чтобы
   раздел не выбивался из меню. Список строит client.js из RADIO_STATIONS.
   ─────────────────────────────────────────────────────────────── */

/* Строка «Радио: <станция> ›» в шторке «Настройки». База .toggle-row даёт
   ей песочный вид; здесь только правая часть — значение и стрелка-намёк. */
.menu-screen .nav-row .nav-value{
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-width: 0;
  font-size: calc(var(--u) * 25);
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
}
.menu-screen .nav-row #radio-station-name{
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-screen .nav-row .nav-arrow{
  flex: 0 0 auto;
  font-size: calc(var(--u) * 34);
  line-height: 1;
  color: var(--gold-frame);
}

/* Список станций — вертикальный стек с тем же зазором, что между
   тумблерами настроек. */
.menu-screen .station-list{
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  width: 100%;
}

/* Строка станции: имя + жанр слева, пометка «звучит» справа. Вид — как у
   .toggle-row, но выше: две строки текста. */
.menu-screen .station-row{
  position: relative;
  width: 100%;
  min-height: calc(var(--u) * 96);
  padding: calc(var(--u) * 14) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid var(--cream-brd);
  background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.8),
    0 calc(var(--u)*5) 0 var(--cream-lip),
    0 calc(var(--u)*7) calc(var(--u)*10) var(--shadow-warm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-screen .station-row:active{
  transform: translateY(calc(var(--u) * 3));
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,255,255,.7),
    0 calc(var(--u)*2) 0 var(--cream-lip),
    0 calc(var(--u)*3) calc(var(--u)*5) var(--shadow-warm);
}
.menu-screen .station-text{
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  min-width: 0;
}
.menu-screen .station-name{
  font-size: calc(var(--u) * 27);
  font-weight: 700;
  color: var(--soft-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-screen .station-genre{
  font-size: calc(var(--u) * 21);
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Выбранная, но молчит — только золотая рамка (станция запомнена). */
.menu-screen .station-row.is-active{
  border-color: var(--gold-frame);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) var(--gloss-num-2),
    0 calc(var(--u)*5) 0 var(--cream-lip),
    0 calc(var(--u)*7) calc(var(--u)*10) var(--shadow-warm);
}
/* Играет ПРЯМО СЕЙЧАС — золотистая заливка, видно с одного взгляда, какая
   станция звучит (просьба Максима 22.07). Перебивает .is-active, поэтому
   идёт после неё. Текст темнеет для контраста на золоте. */
.menu-screen .station-row.is-playing{
  border-color: var(--gold-frame);
  background: linear-gradient(180deg, #f7d98d 0%, #eec96a 100%);
  box-shadow:
    inset 0 calc(var(--u)*2) calc(var(--u)*2) rgba(255,248,225,.6),
    0 calc(var(--u)*5) 0 var(--lea-lip, #d3a24e),
    0 calc(var(--u)*10) calc(var(--u)*14) var(--sh-lea-6);
}
.menu-screen .station-row.is-playing .station-name{ color: #4a2600; }
.menu-screen .station-row.is-playing .station-genre{ color: #6b3f12; }
.menu-screen .station-row.is-playing .station-mark{ color: #7a4a12; }
/* Значок «♪» у играющей станции. */
.menu-screen .station-mark{
  flex: 0 0 auto;
  font-size: calc(var(--u) * 30);
  line-height: 1;
  color: var(--gold-frame);
  min-width: calc(var(--u) * 24);
  text-align: center;
}


/* ───────────────────────────────────────────────────────────────
   16. ЭКРАН «МОЯ ИГРА» (личная статистика, компоновка К2)
   Та же панель и тот же логотип, что в лобби и ожидании. Вёрстка
   НАРОЧНО скупая и на существующих единицах: экран сперва обязан
   показать верные числа, а внешний вид Максим делает отдельным
   заходом. Красота, построенная раньше проверки чисел, переделывается
   дважды.
   ─────────────────────────────────────────────────────────────── */
.menu-screen .stats-box{
  margin: auto 0;
  width: 100%;
  padding: 0 calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
  text-align: center;
}
.menu-screen .stats-main{
  margin: 0;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 40);
  color: var(--ink);
}
.menu-screen .stats-main b{
  display: block;
  font-size: calc(var(--u) * 72);
  line-height: calc(var(--u) * 80);
  font-weight: 800;
}
/* Четыре ячейки в ряд, а не две строки по две: на 375 px это ~85 px на
   ячейку — тесно, но читаемо, и весь состав виден одним взглядом. Если
   добавится пятое число, ряд придётся пересобирать, а не ужимать шрифт. */
.menu-screen .stats-strip{
  width: 100%;
  display: flex;
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: rgba(255,248,232,.55);
}
.menu-screen .stats-strip > div{
  flex: 1;
  padding: calc(var(--u) * 14) calc(var(--u) * 6);
  border-right: 1px solid rgba(122,85,48,.18);
}
.menu-screen .stats-strip > div:last-child{ border-right: 0; }
.menu-screen .stats-strip span{
  display: block;
  font-size: calc(var(--u) * 20);
  color: rgba(74,55,40,.75);
}
.menu-screen .stats-strip b{
  font-size: calc(var(--u) * 30);
  font-weight: 700;
  color: var(--ink);
}
.menu-screen .stats-records{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}
.menu-screen .stats-records li{
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 34);
  color: var(--ink);
}
.menu-screen .stats-records b{ font-weight: 800; }
.menu-screen .stats-since,
.menu-screen .stats-note{
  margin: 0;
  padding: 0 calc(var(--u) * 40);
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 32);
  color: rgba(74,55,40,.75);
  text-align: center;
}
.menu-screen .stats-note{ margin: auto 0; }