/* ============================================================
   «Слово дня» — тач-версия. Этап 5.

   Геометрия снята с эталона 10769:4499 («M1 · Игра · начало»)
   через get_metadata: 375 × 812, поля 16, содержимое 343.

   Это не уменьшенный десктоп. Главное отличие одно, и оно
   принципиальное: правой колонки нет. На экране остаются только
   поле и клавиатура — то, чем играют. Подсказки и лесенка очков
   уезжают в шторку снизу, а на месте свёрнутого блока стоит одна
   строка hint-bar над кнопкой проверки. Она же несёт эмоции
   персонажа, как и на десктопе.

   Тач-цели ≥ 44 везде. Это не эстетика: при 32 промах по иконке
   становится обычным делом, а среди игроков есть пожилые люди.

   Порог переключения — 900. Ниже него десктопное окно 880 + поля
   уже не помещается. Бриф §10 ширины между 375 и 960 не задаёт,
   так что порог выбран по габариту окна, а не по макету.
   ============================================================ */

/* На десктопе строки подсказки и шторок нет вовсе: список периода на
   широком экране выпадает под триггером и ни шапки, ни подложки не
   имеет. */
.hint-bar,
.sheet__head,
.period-backdrop,
.sheet-backdrop { display: none; }

@media (max-width: 899px) {

  /* ===================== Окно ===================== */

  /* Там, где макеты дают разный текст для широкого и узкого экрана,
     в разметке лежат оба варианта, а показывается один. */
  .copy--wide,
  .legend .copy--wide { display: none; }
  .copy--narrow,
  .legend .copy--narrow { display: inline; }

  /* Окно занимает экран целиком: на телефоне это не модалка поверх
     ленты, а сама игра. Верхние 44 под статус-бар, нижние 24 под
     системную полосу. */
  .backdrop { padding: 0; align-items: stretch; }

  .game-window {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    /* Боковое поле здесь 16, и полоса прокрутки отводится по нему:
       переменную читают прокручиваемые экраны (см. screens.css). */
    --window-pad: 16px;
    padding: 44px var(--window-pad) 24px;
    gap: 0;
  }

  #view-game { gap: 0; }

  /* ===================== Шапка ===================== */

  .win-header {
    height: 52px;
    align-items: flex-start;
  }
  /* Иконки 44 × 44 при значке 24 — тач-цель, а не размер иконки. */
  .header-icons { gap: 2px; }
  .icon-btn { width: 44px; height: 44px; }
  .header-right { gap: 8px; }

  /* Вход без подписи: шапка уже несёт две иконки, баланс и крестик, и
     слово «Войти» на 375 отнимает место у них (§5.1). Тап-цель при этом
     остаётся 44 — иконка вырастает до неё, а аватарка остаётся 32
     внутри 44, как в макете. */
  .header-left { gap: 4px; }
  .header-auth { height: 44px; }
  .header-auth__label { display: none; }
  .header-auth__icon { width: 44px; height: 44px; }
  #btn-profile { width: 44px; justify-content: center; }
  .balance-pill { height: 40px; margin-top: 2px; }

  /* ===================== Тема дня ===================== */

  /* Блоку темы отведено ровно 89, и это не круглое число, а остаток.
     Всё прочее на экране 375 × 812 стоит жёстко:

       поля окна 44 + 24        68
       шапка                    52
       поле 5 × 62 + 4 × 6     334
       строка подсказки         53
       кнопка проверки          52
       клавиатура              144
       два зазора низа          20
                              ————
                               723,  остаётся 89

     Потолок нужен, потому что содержимое блока переменное: заголовок
     темы и подпись приходят от редакции и оба могут встать в две
     строки. Тогда блок вырастал до 108, экран переставал помещаться в
     812 и уезжал вместе с клавиатурой — стенд ловит это на экране 24.

     Уступает подпись, а не заголовок: тема дня — то, ради чего экран
     открывают, а подпись её поясняет. Заголовку и сообщению игры
     запрещено сжиматься, подписи разрешено уменьшаться до нуля.
     Получается лесенка: место есть — подпись в две строки, заголовок
     занял две — подпись в одну, пришло ещё и сообщение — подпись
     уступает ему. Блок при этом не перерастает 89 никогда. */
  .theme-block {
    padding: 4px 0 12px;
    gap: 2px;
  }
  .theme-block__title {
    font-size: 20px;
    line-height: 26px;
    flex: none;
  }
  /* Две строки — предел и здесь: третья выдавила бы нижний ряд клавиш
     за край окна. min-height: 0 снимает флексовый запрет ужиматься ниже
     содержимого — без него подпись не отдаёт место и потолок выше
     просто обрезал бы её по живому. */
  .theme-block__sub {
    font-size: 14px;
    line-height: 19px;
    display: block;
    overflow: visible;
    min-height: 0;
  }
  /* Класс вешает fitThemeSub в app.js, когда после сжатия подписи
     осталась одна строка. Кламп в одну строку ставит многоточие туда,
     где его видно; кламп в две ставил его на второй строке, которую
     коробка уже обрезала, и текст обрывался без всякого знака. */
  /* ===================== Пустые состояния =====================
     Тройка «персонаж — заголовок — пояснение» одна на все случаи:
     слово недоступно (M21), пустой рейтинг. Кегли и размер персонажа
     тач-версии сняты с M21 — единственного макета, где такое
     состояние нарисовано. */
  .empty-state__head { font-size: 24px; line-height: 30px; }
  .empty-state__text { font-size: 16px; line-height: 22px; }
  .empty-state .mascot--160 { width: 116px; height: 79px; }

  /* Сообщение игры третьей строкой под темой (M10, M11). Появляясь,
     оно опускает поле на 22 — запас под ним для этого и оставлен. */
  .theme-block__status:not([hidden]) {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    /* Сообщению сжиматься нельзя: оно и так живёт одну реплику. Место
       под него отдаёт подпись — см. потолок блока выше. */
    flex: none;
  }

  /* ===================== Поле ===================== */

  /* Колонок больше нет: остаётся одно поле, по центру экрана.
     Клетка 62, зазор 6 — поле 334 × 334. Это максимум, при котором
     ниже помещаются строка подсказки, кнопка и клавиатура. */
  .columns { display: block; padding-top: 0; }
  .left-column { width: auto; }

  /* Радиус клетки в системе постоянный — 16 при любом размере
     (10782:5013 при 62, 10783:5318 при 44). Тач меняет только
     сторону и кегль, скругление остаётся из компонента. */
  .grid { row-gap: 6px; width: 334px; margin: 0 auto; }
  .grid__row { gap: 6px; justify-content: center; }
  .cell--66 { --cell: 62px; font-size: 26px; }

  /* ===================== Низ экрана ===================== */

  /* Между полем и подсказкой фиксированный шаг из макета. Свободный
     flex-остаток здесь растягивал экран на высоких телефонах и
     отрывал подсказку от поля. */
  .bottom { margin-top: 12px; padding-top: 0; gap: 10px; }

  .hint-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Высота зафиксирована на двух строках — 56 во всех макетах, от
       M1 до M24. Раньше она набиралась содержимым и гуляла между 53 и
       56: одна строка реплики давала 53, две — 56, и кнопка проверки
       под строкой подпрыгивала при смене реплики (§5.9).

       Поля разные слева и справа: 12 до персонажа, 16 после шеврона —
       но за вычетом обводки. В Figma она рисуется внутрь и в отступ не
       входит, в CSS с border-box — входит, и текст недосчитывался трёх
       пикселей: 214 вместо 217. Отсюда 10,5 и 14,5.

       Вертикальных полей нет вовсе — содержимое центрируется в
       фиксированной высоте, а не подпирает её снизу. */
    height: 56px;
    padding: 0 14.5px 0 10.5px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    font-family: var(--font-sans);
    cursor: pointer;
    text-align: left;
  }
  .hint-bar__line {
    /* Ширина не задаётся числом, а получается: 343 − 12 − 54 − 10 − 10
       − 24 − 16 = 217, ровно как в макетах. Это тот самый 217, на
       котором посчитан бюджет в 45 знаков (§9.4). */
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ink);
    /* Две строки и обрезка по концу — как maxLines в макете. Третья
       строка выдавила бы клавиатуру за край окна. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hint-bar.hint-revealed {
    height: auto;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .hint-bar.hint-revealed .hint-bar__line {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  .hint-bar__chevron { width: 24px; height: 24px; flex: none; color: var(--text-secondary); }
  .hint-bar__chevron svg { width: 24px; height: 24px; display: block; }
  .mascot--54 { width: 54px; height: 37px; }

  .btn--check { height: 52px; }

  /* Клавиатура: клавиша 25 × 44, зазор 3, ряды через 6. Ряды 12, 11
     и 10 плюс «удалить» 38 — ряд центрируется, а не тянется. */
  .keyboard { gap: 6px; }
  .keyboard__row { gap: 3px; justify-content: center; }
  .keyboard__row--2 { padding: 0; }
  .keyboard__row .key {
    flex: none;
    width: 25px;
    min-width: 0;
    height: 44px;
    padding: 0;
    font-size: 19px;
    border-radius: 6px;
  }
  .keyboard__row .key--wide { width: 38px; }
  .key__delete-icon { width: 20px; height: 20px; }

  /* ===================== Шторка ===================== */

  /* Правая колонка становится шторкой снизу. Верхние углы 24,
     фон затемняется на 45 %. */
  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 20;
  }

  .right-column {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    box-sizing: border-box;
    /* Сверху 10 под хват, снизу 28, по бокам 0 — так в M3 и M12.
       Боковое поле держат сами блоки внутри: шапка Navigation Bar
       по системе идёт во всю ширину, и крестик в ней стоит в 3 от
       края, а не в 16. */
    padding: 10px 0 28px;
    border-radius: 24px 24px 0 0;
    /* ⚠️ Расхождение макета и брифа. §8.2 требует --modal, а в M3 и M12
       заливка привязана к BG/Primary. В светлой теме они совпадают, в
       тёмной нет: BG/Modal #202022 против BG/Primary #18181a. Взят
       бриф: шторка — модальная поверхность, и в системе для неё есть
       отдельный токен. Если верен макет, здесь меняется одно слово. */
    background: var(--modal);
    gap: 12px;
    /* Закрыта — уехала за нижний край. Открывается классом is-open,
       чтобы движение было одно и то же в обе стороны. */
    transform: translateY(101%);
    transition: transform .2s ease;
  }
  .right-column.is-open { transform: translateY(0); }

  .sheet__head { display: flex; flex-direction: column; gap: 12px; }
  /* Хват 40 × 4 — единственный намёк, что шторку можно тянуть. */
  .sheet__grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    align-self: center;
  }
  /* Шапка шторки — компонент DS `Navigation Bar`: высота 56, левая зона
     выключена, справа один Tap icon с крестиком (§8.2). Была 44 со
     своим заголовком 24/28; системный — Headers/Title 19/24.

     Правая зона в макете 50 при иконке 44, то есть крестик стоит в 3 от
     края экрана, а не в 16. Поэтому шапка выходит за боковые поля
     шторки: у самой шторки их больше нет, а отступ в 3 даёт эта зона. */
  .sheet__title-row {
    height: 56px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .sheet__spacer { width: 44px; flex: none; }
  .sheet__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .12px;
    color: var(--ink);
    text-align: center;
    flex: 1;
  }

  /* Свёрнутый блок на таче не нужен: его роль играет строка hint-bar
     над кнопкой, а шторка открывается сразу с панелью покупок. */
  .hints-cta { display: none; }

  /* Панель внутри шторки теряет собственный фон, но не боковые поля:
     колодцем работает сама шторка, а 16 от края держит теперь тело —
     у шторки их больше нет, шапка идёт во всю ширину. */
  .hints-panel { height: auto; background: none; padding: 0 16px; }
  .hints-panel__head { padding: 0 4px; }

  /* Карточки меняют роль цвета: на белом фоне шторки они surface,
     тогда как на десктопе это paper на серой панели. Кнопка внутри
     карточки по содержимому — на 375 полноширинная не оставляла
     места названию. Карточка 343 × 76, padding 12, кнопка 91 × 40. */
  .buy-row { background: var(--surface); padding: 12px; min-height: 76px; }
  .buy-row__note { font-size: 13px; line-height: 18px; }
  .title-row { font-size: 15px; line-height: 20px; }
  .btn--buy { height: 40px; padding: 0 14.5px; }

  .points-widget { height: auto; }

  /* Шапка виджета перестроена: кикер остаётся в строке с плашкой
     «Попытка N из 5», а вниз отдельной строкой уходит только
     пояснение. Иначе на 375 они наезжают друг на друга.

     display: contents у head-copy нужен, чтобы кикер и пояснение
     стали прямыми детьми шапки и могли разъехаться по разным
     строкам: вложенными они переносятся только вместе. */
  .widget-head { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .head-copy { display: contents; }
  .kicker { order: 1; flex: 1; }
  .attempt-pill { order: 2; }
  .head-copy__note { order: 3; flex: 1 0 100%; }

  /* Первая строка шапки в шторке — 59 (10769:5168, 10782:30760):
     кикер и плашка стоят по её центру, пояснение уходит строкой ниже.
     Высоту задаёт кикер: вынести пояснение из шапки можно только
     раскладкой, а не разметкой — она общая с десктопом. */
  #right-column .widget-head .kicker {
    display: flex;
    align-items: center;
    min-height: 59px;
  }

  /* Заголовок «ПОДСКАЗКИ» в шторке лишний: он уже стоит в её шапке. */
  .hints-panel__head { display: none; }
  .hints-panel { gap: 12px; }

  /* Ступень 57 × 54 против десктопных 74 × 78. */
  .reward-step { height: 54px; }

  /* ===================== Разделы и финалы ===================== */

  /* ===================== Слово недоступно =====================
     Эталон 10783:5910. На таче экран устроен иначе десктопного 25:
     появляется персонаж, кикер «СЛОВО ДНЯ» уходит, а ссылка внизу
     становится второй кнопкой — на 375 текстовая ссылка теряется
     рядом с кнопкой и не держит тач-цель.

     Раскладка макета — две равные распорки по 163.44 вокруг блока
     «персонаж плюс текст», а кнопки прижаты к низу. Здесь это пара
     auto-отступов: свободная высота делится поровну. Отбивка 20
     сверху нужна, чтобы делилась ровно та же высота, что в макете, —
     распорка там начинается на 20 ниже шапки. */
  #view-unavailable { padding-top: 20px; gap: 20px; }
  #view-unavailable .empty-state__mascot {
    display: block;
    width: 116px;
    height: 79px;
    margin-top: auto;
  }
  #view-unavailable .empty-state__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: auto;
  }
  #view-unavailable .kicker { display: none; }

  /* Кнопки во всю ширину. Первая на таче основная, хотя в десктопном
     25 она вторичная: рядом с ней теперь стоит вторая кнопка, и
     макет разводит их по весу. */
  #view-unavailable .empty-state__actions { width: 100%; gap: 8px; }
  #view-unavailable .empty-state__actions .btn {
    height: 50px;
    border-radius: 24px;
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  #view-unavailable .empty-state__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 24px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
  }
  /* Шапка в M21 несёт только крестик: ни иконок, ни баланса. На
     десктопе (25) шапка остаётся полной, поэтому правило живёт
     только здесь. */
  .win-header--bare .header-left,
  .win-header--bare .balance-pill { display: none; }

  /* ===================== Правила =====================
     Эталон 10783:5308. Клетка примера 44 через 6 — против десктопных
     54 через 10. */
  .example-row { gap: 6px; }
  .example-row .cell--54 { --cell: 44px; font-size: 18px; }
  .example__caption { font-size: 13px; line-height: 18px; }

  /* Строка цены переносится: название с ценой сверху, условие
     отдельной строкой снизу. Так и в брифе §4 — «пояснение уехало во
     вторую строку». Ведущий интерпункт при переносе не нужен: он
     разделял части внутри строки, а тут они уже разделены. */
  .hint-line { flex-wrap: wrap; row-gap: 2px; }
  .hint-line__tail { flex: 1 0 100%; font-size: 13px; line-height: 18px; }
  .hint-line__sep { display: none; }

  .rules-intro { font-size: 16px; line-height: 21px; }
  /* Раздел идёт с шагом 8 против десктопных 20, а примеры — через 8
     против 10: на 375 иначе не помещается ничего. */
  #view-rules { gap: 8px; }
  .examples { gap: 8px; }
  /* Строка справки на таче — просто текст: ни карточки, ни отступов
     (10783:5380). Карточкой она становится только в «Наградах». */
  .info-line {
    min-height: 0;
    padding: 0;
    background: none;
    font-size: 15px;
    line-height: 22px;
  }
  /* Колодец справки 12 по кругу — 146 в высоту, как в макете. */
  .info-block { padding: 12px; }
  .link-row { padding: 12px 16px; }
  .link-row__sub { font-size: 13px; line-height: 19px; }

  /* ===================== Онбординг =====================
     Эталон 10771:4779. На таче это не уменьшенная копия десктопного:
     персонаж меньше, заголовок мельче, клетки 56, а легенда идёт
     столбиком — тремя строками в ряд она на 375 не помещается. */

  /* Шапка окна на таче выше и стоит под статус-баром: 44 поля плюс 52
     самой шапки, плюс 20 промежутка — 116, как в M6. Верхнее поле слоя
     после этого не нужно: его роль играет отступ сверху. */
  .onboarding {
    --onb-top: 116px;
    padding: 0 16px 24px;
    border-radius: 0;
  }
  .onboarding .empty-state { gap: 20px; }
  .onboarding .mascot { width: 116px; height: 79px; }

  .onb-title { font-size: 26px; line-height: 34px; }
  .onb-sub { font-size: 16px; line-height: 22px; }

  /* Клетка примера 56 через 6 — против десктопных 66 через 10. */
  .word-row { gap: 6px; }
  .word-row .cell { --cell: 56px; font-size: 24px; }

  /* M6 перечисляет статусы в обратном порядке: сперва «на своём
     месте», последним «нет в слове». Разметка остаётся десктопной,
     переворачивает ряд column-reverse. */
  .legend {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10px;
  }
  .legend .legend-item { gap: 10px; }
  .onb-head { gap: 4px; }

  /* В макете сверху и снизу от содержимого стоят равные распорки, а
     кнопки прижаты к низу. Одного margin-top: auto у кнопок мало: он
     забирает всё свободное место, и содержимое уезжает под шапку.
     Два автополя — над персонажем и под легендой — делят остаток
     поровну, и группа встаёт по центру оставшейся высоты. */
  .onboarding .mascot { margin-top: auto; }
  .onboarding .legend { margin-bottom: auto; }
  .onb-actions { width: 100%; padding-top: 0; gap: 8px; }
  .onb-actions .btn { height: 50px; }

  /* ===================== Разделы ===================== */

  /* Шаг один на все три вкладки «Результатов». Макеты дают разный —
     16 в M7, 14 в M16, 10 в M17, — но шапка и переключатель у вкладок
     общие: с разным шагом переключатель прыгал бы при смене вкладки.
     Взят шаг вкладки по умолчанию, «Статистики». */
  .section-view { gap: 16px; }
  .header-nested { height: 30px; gap: 10px; }
  .header-nested__title { font-size: 20px; line-height: 26px; }

  /* Настройки идут с шагом 10 (10783:5693) — как и «Награды». */
  #view-settings { gap: 10px; }

  /* ===================== Награды =====================
     Эталон 10783:5391. Колодцы на таче плотнее десктопных: 6 по
     вертикали против 16 и промежуток 8 против 12 и 10. Раздел идёт
     с шагом 10 — иначе четыре блока не укладываются в 744. */
  #view-rewards { gap: 10px; }
  #view-rewards .rules-intro { line-height: 22px; }
  #view-rewards .points-widget--legend,
  #view-rewards .info-widget--roomy { padding: 6px 12px; gap: 8px; }
  #view-rewards .info-widget--roomy .stella-line,
  #view-rewards .info-widget--roomy .info-line {
    min-height: 42px;
    padding: 10px 16px;
    background: var(--paper);
  }
  /* Число в ступени мельче десктопного: пять ступеней на 375 иначе
     не встают. Селекторы были на #view-rewards — раздел слился с
     «Правилами» на этапе 5, и правила с тех пор ни к чему не
     применялись. */
  #view-rules .reward-step__value { font-size: 17px; }
  /* Игровая ступень на таче 54, но в «Правилах» она с тремя строками
     и остаётся 88, как в M14. */
  #view-rules .reward-step--legend { height: 88px; }
  /* Монетки 11 против десктопных 13: на ступени шириной 62 больший
     кегль не влезает (§6.3). */
  #view-rules .reward-step__coins { font-size: 11px; line-height: 16px; }

  /* Мобильный вариант компонента DS: дорожка 52 против десктопных 44,
     сегмент 44 — он же тач-цель. Кегль не уменьшается: в системе у
     обоих вариантов подпись Body 16/20. */
  .segmented { height: 52px; }
  .segmented__item { height: 44px; }

  /* Снэкбар во всю ширину минус поля 16, 24 от нижнего края и поверх
     клавиатуры (§5.6 брифа). Ширину задаём полями, а не процентом:
     процент считается от окна, а поля должны остаться ровно 16. */
  .snackbar {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
  /* «Повторить» — такая же нажимаемая цель, как всё прочее, и правило
     §8.2 на неё распространяется: 40 на десктопе, 44 здесь. Плашка от
     этого вырастает с 72 до 76 — её высота числом нигде не закреплена,
     а тач-цель закреплена. */
  .snackbar__action { height: 44px; }

  /* Плитки статистики в две колонки, текст по левому краю: пять в ряд
     на 375 не читаются, а по центру короткие числа теряют связь с
     подписью.
     ⚠️ В макете плиток четыре — «лучшая серия» там убрана. Оставляю
     все пять: пятая занимает строку целиком, чтобы не висеть одна
     половинкой. */
  .stat-numbers { flex-wrap: wrap; gap: 10px; }
  .stat {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    height: 80px;
    padding: 14px 16px;
    align-items: flex-start;
    text-align: left;
    gap: 0;
  }
  .stat:last-child:nth-child(odd) { flex-basis: 100%; }
  .stat__value { font-size: 24px; line-height: 32px; }
  .stat__label { font-size: 13px; line-height: 18px; }

  /* Диаграмма на таче — отдельный блок с обводкой, как плитки:
     полосы line-2 на голом фоне не читались. */
  .distribution {
    box-sizing: border-box;
    padding: 14px 12px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    gap: 8px;
  }
  .bar-row { height: 26px; gap: 8px; }
  .bar-row__num { width: 14px; font-size: 15px; line-height: 19px; }
  .bar-row__track { height: 26px; border-radius: 8px; }
  .bar-row__fill { min-width: 26px; padding-right: 8px; font-size: 13px; }

  /* Полоса таймера на таче та же по высоте, что и на десктопе, — 57
     (10783:5602 и 10783:5689). Мельче только значение: 18/25 против
     20/25, и поля 12 вместо 20. */
  .timer-strip { padding: 0 12px; }
  .timer-strip__value { font-size: 18px; }

  /* ===================== Финал ===================== */

  /* Кнопки в столбик: рядом на 375 они не помещаются. 343 × 50 через 8. */
  .actions { flex-direction: column; gap: 8px; }
  /* flex: none обязателен: на десктопе кнопки делят строку через
     flex: 1, а в колонке это же правило съедает им высоту — вместо
     50 они схлопывались до высоты строки текста. */
  .actions .btn { flex: none; width: 100%; height: 50px; }

  /* Подвал остаётся двумя колонками и на таче — награда слева, таймер
     справа с выключкой вправо (§5.8). Раньше он разворачивался в две
     строки; в макете M4 колонки 105 и 112 через 16, и они помещаются.
     Подписи при этом сокращены: «Награда» и «Следующее слово» —
     полные в колонку 105 встают в три строки. */
  .card-footer { gap: 16px; }
  .card-footer__label { font-size: 13px; line-height: 16px; }
  /* Монетки на таче 13/16 против десктопных 16/20: колонка 105, и
     крупнее строка «+3 монетки» уже не встаёт в неё одной строкой. */
  .amount__coins { font-size: 13px; line-height: 16px; }

  /* В рейтинге колонка не фиксируется: на 375 её 80 съедали у имени, и
     длинные имена переносились на две строки. Ширину берёт содержимое,
     а кегль монеток падает до 11 — платформы расходятся намеренно
     (§6.3). */
  .rank-row__tail { width: auto; }
  .rank-row__coins { font-size: 11px; line-height: 14px; font-weight: 400; }

  /* Триггер периода в макете 24 и вырасти не может: над ним и под ним
     по 10 до сегмент-контрола и списка. Палец при этом должен попадать
     в 44, поэтому цель добирается псевдоэлементом — он лежит поверх, в
     раскладке места не занимает и соседей не двигает. По бокам взято по
     8: справа триггер у самого поля окна, и растягивать дальше некуда. */
  .period-trigger { position: relative; }
  .period-trigger::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }

  /* ===================== Период рейтинга (M23) =====================
     Выпадающего списка на таче нет: тот же элемент разворачивается в
     нижнюю шторку. Габариты её собственные — 375 × 276, поля 10 сверху
     и 34 снизу против 28 у шторки подсказок. Шесть пикселей разницы
     взяты из макета как есть: шторки нарисованы отдельными фреймами, а
     не инстансами одного компонента, и подгонять их друг под друга
     означало бы решать за макет. */
  /* Селектор из двух классов внутри строки — не украшение: на десктопе
     положение списка задаёт `.period-row .dropdown`, и оно же навязывало
     шторке `top`. С заданными сразу top и bottom высота перестаёт
     считаться по содержимому и становится «от края до края», то есть
     отрицательной, — шторка схлопывалась до одних полей. */
  .period-row .dropdown.dropdown--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 31;
    width: auto;
    padding: 10px 0 34px;
    border-radius: 24px 24px 0 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(101%);
    transition: transform .2s ease;
  }
  .period-row .dropdown.dropdown--sheet.is-open { transform: translateY(0); }
  /* Шапка со скрытием на десктопе живёт в общем правиле выше; здесь она
     возвращается вместе со всей шторкой. */
  .period-row .dropdown.dropdown--sheet .sheet__head { display: flex; }

  /* Список: боковые поля 16 держит он, ячейки идут во всю его ширину.
     Ячейка 48, а с галкой 52 — те же поля 14, разная правая зона. */
  .dropdown__list { padding: 0 16px; }
  .dropdown--sheet .dropdown__item { padding: 14px 0; }

  .period-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 30;
  }
  .amount__value { font-size: 24px; line-height: 28px; letter-spacing: .12px; }
  .foot-timer__value { font-size: 20px; line-height: 26px; }

  .above-fold { gap: 12px; padding-top: 12px; }
  .below-fold { gap: 12px; padding-top: 12px; }

  /* На таче кнопки прижаты к нижнему краю экрана, карточка стоит сразу
     под шапкой, свободное место — распоркой между ними: так большой
     палец достаёт до действий (§5.8). На десктопе иначе — там всё
     центрировано по вертикали. */
  #view-result { justify-content: flex-start; }
  .above-fold { flex: 1; }
  .actions { margin-top: auto; }

  .result-card { padding: 32px 20px 28px; gap: 24px; }
  .result-card__head { font-size: 24px; line-height: 28px; letter-spacing: .12px; }
  .result-card__emoji { font-size: 36px; line-height: 28px; }
  /* Клетка ответа 54 через 6 — против десктопных 96 через 12. */
  .cell--answer { --cell: 54px; font-size: 26px; }
  .answer-row { gap: 6px; }

  /* Обещание стеллы и приглашение войти стоят на финале парой и
     ужимаются одинаково. */
  .daily-stella,
  .signin-note { min-height: 46px; height: auto; padding: 12px 16px; }
  .daily-stella__text,
  .signin-note { font-size: 15px; line-height: 20px; }

  /* Обе вторичные строки под словом сжимаются одинаково. Комментарий
     редакции добавился позже подписи и остался на десктопных 16/22 —
     на таче он выходил крупнее подписи, стоящей прямо над ним, и
     иерархия между ними получалась вывернутой. */
  .answer-caption,
  .answer-note { font-size: 15px; line-height: 19px; }

  /* На таче поражение не ужимается. На десктопе оно несёт лишнюю
     строку и потому сжимает промежутки, а здесь у победы заголовок
     переносится в две строки, у поражения — одна плюс подпись под
     ответом: карточки выходят одной высоты сами (271 и 272).
     Десктопное сжатие тут только мешало бы. */
  .final-lost .result-card { gap: 10px; }
  .final-lost .related__card { height: 187px; }
  .final-lost .related__thumb { height: 89px; }

  /* Две карточки видны сразу, третья остаётся в той же горизонтальной
     ленте и доступна свайпом — отдельной сиротской строки нет. */
  .related {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
  }
  .related::-webkit-scrollbar { display: none; }
  .related__card {
    flex: 0 0 calc((100% - 8px) / 2);
    width: calc((100% - 8px) / 2);
    height: 187px;
    scroll-snap-align: start;
  }
  .related__thumb { height: 89px; }

  /* Клетка дня остаётся 83 высотой, как на десктопе: на таче меняется
     только ширина — 42 вместо 112. */
  .cal-day__num { font-size: 14px; }
  .cal-day__count { font-size: 17px; line-height: 22px; }

  /* Шапка календаря столбиком. В макете (10783:5473) месяц и подсказка
     стоят в строку, но подсказка вылезает за 343 на 56 — в одну строку
     на 375 она не помещается физически. */
  .cal-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Шаг раздела на таче 16, а подпись к сетке должна стоять через 8 —
     столько же, сколько на десктопе. */
  .cal-legend { margin-top: -8px; }

  /* Настройки: строка ниже, пояснение переносится в две-три строки,
     переключатель остаётся 52 × 30. Высота строки задаётся текстом —
     в макете это 80, 98 и 120 у разных пунктов.

     Промежуток между секциями в макетах разный: 8 в M14, 10 в M15 и
     M18, 14 в M16, 16 в M7 и M17. Системы за этим не видно, поэтому
     каждый раздел держит своё значение, а 16 остаётся значением по
     умолчанию для тех, где макет его подтверждает. */
  .settings-block { gap: 8px; }
  .setting-row { flex-wrap: wrap; min-height: 0; padding: 10px 16px; gap: 16px; }
  /* Текст занимает строку, переключатель остаётся рядом. Без flex: 1
     он не сжимался и выталкивал переключатель на свою строку, добавляя
     строке лишние 28 px. Переносится только кнопка аккаунта — она
     задана на всю ширину. */
  .setting-row__copy { flex: 1; min-width: 0; }
  .setting-row__note { font-size: 14px; line-height: 18px; }

  /* Блок аккаунта: кнопка под текстом на всю ширину, а не рядом —
     на 375 рядом с ней не остаётся места названию. */
  .setting-row .btn { width: 100%; height: 44px; }
  .setting-row { flex-wrap: wrap; }
  .theme-select { width: 100%; max-width: none; }
}

/* Встроенные браузеры (в частности Telegram на iPhone) отдают странице
   заметно меньше высоты из-за собственной верхней и нижней панелей. При
   прежних размерах исчезал промежуток между полем и подсказкой, а третий
   ряд клавиатуры попадал под панель браузера. Ужимаем только короткое
   мобильное окно; обычный Safari и desktop остаются без изменений. */
@media (max-width: 899px) and (max-height: 780px) {
  .game-window {
    padding-top: 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .win-header { height: 44px; }
  #view-game { gap: 6px; }
  .theme-block { padding: 2px 0 6px; }
  .theme-block__title { font-size: 18px; line-height: 23px; }
  .theme-block__sub {
    font-size: 13px;
    line-height: 17px;
    display: block;
    overflow: visible;
  }

  .grid { width: 294px; row-gap: 6px; }
  .grid__row { gap: 6px; }
  .cell--66 { --cell: 54px; font-size: 23px; }

  /* Вертикальный ритм между строкой подсказки, CTA и клавиатурой
     остаётся тем же, что в эталонах M9/M10. Невысокое окно компенсируем
     размерами поля и клавиш, а не склеиванием самостоятельных блоков. */
  .bottom { gap: 10px; }
  /* Высота остаётся фиксированной и здесь — просто меньшей: смысл
     правила в том, чтобы кнопка не прыгала при смене реплики, а не в
     самом числе 56. */
  .hint-bar { height: 46px; }
  .hint-bar.hint-revealed { height: auto; min-height: 46px; }
  .mascot--54 { width: 48px; height: 33px; }
  .btn--check { height: 46px; }
  /* Клавиатура остаётся 25 × 44 и на коротком экране. Место экономит
     уменьшенное поле выше, а не тач-цели и не расстояния рядов. */
}