/* ==========================================================================
   12-mobile.css — интерфейс тач-устройства.

   Последний файл каскада: всё, что ниже, намеренно перекрывает мобильные
   правила из 08/10/11. Раньше мобильная раскладка была набором точечных
   поправок, разбросанных по шести файлам, и складывалась в другой экран, чем
   задумывалась: замер живого матча на 440x956 дал пять постоянных блоков
   поверх поля в четырёх углах и ещё пять всплывающих — до 40% площади в пике
   при том, что голова змейки центрирована ровно посередине.

   Здесь мобильный матч собран заново из одного правила: ОДНА полоса сверху,
   ОДНА кнопка чата снизу, поле — всё остальное.

   Признак — pointer: coarse, а не ширина окна: телефон в ландшафте шире иного
   ноутбука, оставаясь телефоном.
   ========================================================================== */

@media (pointer: coarse) {
  /* --- Матч: одна полоса вместо двух ------------------------------------
     Полоса состояния и ряд иконок стояли двумя этажами (8..62 и 68..132) и
     съедали 132px по вертикали у экрана, где вертикаль — единственный дефицит.
     Теперь это один этаж: полоса тянется во всю ширину, иконки лежат поверх
     её правого края, а padding-right держит под них место, чтобы текст под
     кнопки не заезжал. */
  body.inGame #topHud {
    left: calc(8px + var(--sa-left));
    right: calc(8px + var(--sa-right));
    top: calc(8px + var(--sa-top));
    width: auto;
    max-width: none;
    min-height: 48px;
    padding: 4px 156px 4px 14px;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.inGame #hud,
  body.inGame #hud:not(.lbPinned) {
    left: auto;
    right: calc(8px + var(--sa-right));
    top: calc(8px + var(--sa-top));
    opacity: 1;
  }

  .hudActions {
    gap: 4px;
  }

  /* Полоса заполнения дублирует процент, стоящий рядом цифрой. На узком
     экране повторение стоит дороже, чем даёт. */
  body.inGame #topHud .topHudBar {
    display: none;
  }

  .topHudRow {
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
  }

  .topHudRow > * {
    min-width: 0;
  }

  /* Чип фазы («Расширение») — самая длинная и самая необязательная надпись в
     полосе: о смене фазы и без того приходит тост. Метку охоты, наоборот,
     оставляем: она означает, что охотятся на тебя. */
  body.inGame #topHudPhase {
    display: none;
  }

  /* --- Правая колонка: снята целиком ------------------------------------
     На телефоне от неё оставался один аккордеон «Матч», и в спокойном матче
     он показывал буквально «Показано выше: задание и прогресс уже видны в
     верхней полосе» — панель размером 150x200 посреди поля ради ссылки на
     соседнюю панель. */
  body.inGame #rightSidebar {
    display: none;
  }

  /* --- Всплывающее: всё под верхнюю полосу -------------------------------
     Уведомления, поздравления и боевой чип жили в трёх разных местах экрана:
     тосты внизу по центру, баннер крупных событий — поверх поля на 12% высоты
     (то есть частью поверх самой полосы состояния), чип киллов — слева внизу,
     ровно под стопкой тостов. Три источника новостей в трёх углах, и все три
     появляются в самый занятый момент боя.

     Теперь новости приходят в одно место — сразу под полосой состояния. Верх
     экрана и без того служебный, а голова змейки центрирована на 50% высоты:
     чем выше уведомление, тем дальше оно от того, на что игрок смотрит. Низ
     остаётся под кнопку чата и подсказку — и всё. */
  #eventToasts {
    top: calc(8px + var(--sa-top) + 56px);
    bottom: auto;
    gap: 4px;
  }

  /* Два правила ниже отменяют подвинутый низ у тех же селекторов из 05 и 03.
     Перебить их короче нельзя: :has(#…) поднимает специфичность, и простой
     #eventToasts проиграл бы независимо от порядка файлов. Оставить как есть
     тоже нельзя — при заданном top доехавший bottom растягивает контейнер во
     весь экран вместо того, чтобы он обнимал единственный тост. */
  body:has(#chat:not(.collapsed)) #eventToasts,
  body:has(#hudCombo.isOn) #eventToasts {
    top: calc(8px + var(--sa-top) + 56px);
    bottom: auto;
  }

  #eventToasts > .eventToast:nth-child(n + 2) {
    display: none;
  }

  .eventToast {
    padding: 8px 12px;
    border-radius: 999px;
    align-items: center;
  }

  .eventToast .eventToastIcon,
  .eventToast .eventToastSub {
    display: none;
  }

  .eventToast .eventToastText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Баннер крупных событий («ПЕРВЫЙ ЗАХВАТ», джекпот) центрировался по
     вертикали относительно 12% высоты — то есть верхним краем заезжал на
     полосу состояния, а кеглем в 26px и иконкой в 30px занимал под 140px
     поля. Ставим его под тосты, без вертикального центрирования, и ужимаем:
     на телефоне поздравление должно читаться за долю секунды, а не
     перекрывать то, за что поздравляют. */
  #bigBanner {
    top: calc(8px + var(--sa-top) + 104px);
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
  }

  .bigBannerInner {
    grid-auto-flow: column;
    align-items: center;
    gap: 8px;
  }

  .bigBannerIcon,
  .bigBannerIcon img.emoji {
    font-size: 24px;
    width: auto;
    height: auto;
  }

  .bigBannerTitle {
    font-size: 20px;
    letter-spacing: 1px;
  }

  /* Боевой чип стоял на 52px от низа — ровно в стопке тостов, и в бою они
     накладывались. Тосты уехали наверх, чип занимает свободный нижний угол.
     С подсказкой про свайп он не столкнётся: чтобы получить килл, надо
     сначала поехать, а от первого же хода подсказка гаснет. */
  #hudCombo {
    left: calc(8px + var(--sa-left));
    bottom: calc(8px + var(--sa-bottom));
  }

  /* --- Подсказка управления: до первого хода ----------------------------
     Строка «Свайп по экрану — движение» висела весь матч и все следующие.
     Тот же признак, что гасит подсказку в меню: игрок, который уже поехал,
     управление знает. Класс ставит syncMenuOnboardingUi() (client_menu.js). */
  body.controlsSeen #helpTouch {
    display: none;
  }

  /* --- Чат: круглая кнопка ----------------------------------------------
     Свёрнутый чат был пилюлей со словом «Чат» шириной под 170px. В матче это
     кнопка, а не панель, и выглядеть она должна как кнопка. */
  #chat.collapsed {
    width: var(--control-h);
    min-width: var(--control-h);
    height: var(--control-h);
    border-radius: 50%;
    padding: 0;
    overflow: visible;
  }

  #chat.collapsed #chatHeader {
    width: 100%;
    height: 100%;
    padding: 0;
    justify-content: center;
  }

  #chat.collapsed #chatHeaderTitle {
    font-size: 0;
    line-height: 0;
  }

  #chat.collapsed #chatHeaderTitle::after {
    content: '💬';
    font-size: 20px;
    line-height: 1;
  }

  /* Стрелка раскрытия внутри круга — второй глиф в кнопке на 44px. Сам
     заголовок и так разворачивает чат по клику (client_chat.js), кнопка
     дублировала его на единственном экране, где место в дефиците. */
  #chat.collapsed .chatCollapseBtn {
    display: none;
  }

  /* Счётчик непрочитанных переезжает на угол круга: внутри 44px ему места
     нет, а пропасть он не должен — это единственный признак, что в чате
     что-то написали. */
  #chat.collapsed #chatUnread {
    position: absolute;
    top: -4px;
    right: -4px;
  }

  /* ======================================================================
     Оверлеи: лист во весь экран со шапкой и подвалом.

     Карточка занимала 932 из 956 px и всё равно не вмещала контент, а
     скроллилась при этом не везде: у .matchCard стоит overflow: hidden, и низ
     экрана итогов просто отрезался краем — вместе с кнопками «Играть
     дальше»/«Комнаты», которые лежат внутри отрезаемой сводки.

     Правило одно для всех оверлеев: карточка — колонка на всю высоту, шапка и
     подвал липнут к краям, скроллится ровно одна область между ними.
     ====================================================================== */
  .overlay .card,
  .endOverlay .matchCard {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  /* Скроллится тело, а не карточка: иначе липкий подвал уезжает вместе с
     содержимым, ради чего он и заводился. */
  .overlay .card {
    overflow: hidden;
  }

  .overlay .card > * {
    flex: 0 0 auto;
  }

  .overlay .card > .menuGrid,
  .overlay .card > .cosmeticsGrid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px;
  }

  .overlay .card > .menuHeader {
    padding: 14px 14px 10px;
    margin-bottom: 0;
  }

  /* Подвалы действий: «Закрыть» и «Сбросить» стояли в потоке в самом низу
     простыни, и на телефоне закрыть настройки можно было, только домотав до
     конца — клавиши Esc там нет. */
  .overlay .card > .menuActions,
  .overlay .card > .menuFooterActions,
  .overlay .card > .settingsFooterActions,
  .overlay .card > .overlayFooterActions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 10px 14px calc(10px + var(--sa-bottom));
    background: var(--panel-solid);
    border-top: 1px solid var(--border2);
  }

  /* --- Экран смерти и итогов -------------------------------------------- */
  .matchHeader {
    padding: 14px 14px 8px;
  }

  /* Тело результатов теперь единственная скроллящаяся область карточки.
     Вложенный скролл таблицы на тач-экране снят: две скроллящиеся друг в
     друге области на пальце неразличимы, и таблица перехватывала жест. */
  .matchResults {
    padding: 0 14px 12px;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .matchTableWrap {
    flex: 0 0 auto;
    overflow: visible;
  }

  .matchActions {
    padding: 10px 14px calc(10px + var(--sa-bottom));
    background: var(--panel-solid);
    border-top: 1px solid var(--border2);
  }

  /* Кнопки экрана итогов лежат внутри сводки, а штатный подвал там скрыт
     скриптом (client_endgame.js). Пока это так, липкость нужна им самим —
     иначе единственный способ продолжить игру приходится искать прокруткой. */
  .matchNextActions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-left: -14px;
    margin-right: -14px;
    padding: 10px 14px calc(6px + var(--sa-bottom));
    background: var(--panel-solid);
  }

  /* --- Экран смерти: короче на один экран -------------------------------
     Подряд шли заголовок, причина, две подсказки, пять плиток статистики,
     строка мотивации и таблица топ-5 — всё это между игроком и кнопкой
     «Играть снова». В момент смерти нужны место, очки и кнопка; разбор матча
     ждёт на экране итогов. */
  .deathOverlay .matchSub,
  .deathOverlay .matchTableWrap {
    display: none;
  }
}