/* ==========================================================================
   МОБИЛЬНАЯ ВЁРСТКА

   Подключается последней и собирает в одном месте всё, что касается узких
   экранов. ВСЕ новые мобильные правила пишутся сюда, а не блоком @media в
   styles.css: там они уже были размазаны шестнадцатью @media с
   пересекающимися брейкпоинтами, и правка в одном месте молча ломала другое.

   Брейкпоинты:
     850px — телефон и узкий планшет: шторка вместо колонок, нижняя панель;
     480px — телефон;
     360px — узкие аппараты вроде SE и старых Android.

   850px выбран не на глаз: ровно на этой ширине .dashboard-layout в styles.css
   схлопывается в одну колонку. Пока оболочка включалась на 768, между 769 и 850
   был провал — колонок уже нет, а гамбургера и нижней панели ещё нет, и левая
   колонка ложилась блоком под шапкой. Телефон в альбомной ориентации (iPhone 12
   в горизонте — 844px) попадает как раз туда.

   Значение продублировано в app.js (MOBILE_QUERY): на этой же ширине скрипт
   переносит кнопку бонуса в шторку. Менять — сразу в обоих местах.
   ========================================================================== */

:root {
    --m-gutter: 14px;          /* боковые поля контента */
    --m-header: 56px;          /* высота залипающей шапки */
    --m-bottom-nav: 62px;      /* высота нижней панели без safe-area */
}

/* Айфон в альбомной ориентации сам увеличивает шрифт — из-за этого подписи
   разъезжаются относительно посчитанных на макете размеров. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* clip, а не hidden: hidden сделал бы body контейнером прокрутки и сломал
   position: sticky у шапки. clip просто обрезает и на sticky не влияет.
 *
 * touch-action: manipulation отключает зум по двойному тапу. В играх это
 * особенно мешало: быстрые нажатия по соседним клеткам браузер принимал за
 * двойной тап и увеличивал поле. Пинч-зум двумя пальцами при этом остаётся —
 * в отличие от user-scalable=no, которым такое обычно чинят, отбирая у
 * человека возможность приблизить мелкий текст.
 *
 * Без @media: на десктопе свойство ни на что не влияет, а внутри
 * медиазапроса его пришлось бы держать в двух местах. */
body {
    overflow-x: clip;
    touch-action: manipulation;
}


/* ==========================================================================
   1. ОБОЛОЧКА
   ========================================================================== */

@media (max-width: 850px) {

    /* На телефоне белая «карточка» приложения занимает весь экран: рамки,
       скругления и тени по краям только съедали ширину. */
    body {
        padding: 0;
        background: var(--surface);
    }

    .app-container {
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        min-height: 100dvh;
        /* Длинными сторонами padding пользоваться нельзя: снизу нужен запас
           под фиксированную панель. НЕ сокращайте до `padding: 0`: короткая
           запись перебьёт нижний отступ, и последний экран любой страницы
           уедет под панель — до кнопок внизу будет не добраться. */
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: calc(var(--m-bottom-nav) + 12px + env(safe-area-inset-bottom));
    }

    .dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 16px var(--m-gutter) 0;
    }

    /* Правая колонка встаёт ПОД контент, а не гасится display: none: вместе
       с ней с телефона пропали бы счётчик фриспинов и блоки статистики. */
    .sidebar-right {
        display: flex;
        gap: 16px;
    }
}

/* ==========================================================================
   2. ШАПКА
   ========================================================================== */

@media (max-width: 850px) {

    .top-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        min-height: var(--m-header);
        margin-bottom: 0;

        /*
         * Отступ сверху с запасом под вырез.
         *
         * Со включённым viewport-fit=cover страница занимает весь экран,
         * включая зону выреза и панели браузера. Без этого отступа шапка
         * начиналась прямо под ними: логотип и баланс уезжали под чёлку, а
         * над шапкой просвечивало содержимое страницы.
         *
         * env даёт ноль там, где вырезать нечего (Android, компьютер), —
         * тогда остаётся обычные 8px.
         */
        padding: calc(8px + env(safe-area-inset-top)) var(--m-gutter) 8px;

        position: sticky;
        top: 0;
        border-bottom: 1px solid var(--border);

        /* Фон непрозрачный, без backdrop-filter — и это принципиально.
           Элемент с backdrop-filter становится containing block для потомков
           с position: fixed, а шторка меню и затемнение лежат внутри <header>.
           С размытием они позиционировались не от окна, а от полоски шапки:
           меню открывалось шириной с хедер, а затемнение накрывало только его.
           Заодно уходит подтормаживание прокрутки на слабых телефонах. */
        background: var(--surface);

        /* Шапка выше нижней панели: у sticky с z-index свой контекст
           наложения, и всё, что внутри неё (шторка, затемнение), не может
           подняться над соседями выше по z-index. При 900 против 950 у панели
           та перекрывала открытое меню снизу. */
        z-index: 1000;
    }

    .logo {
        font-size: 17px;
        gap: 8px;
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
        white-space: nowrap;
    }

    .logo img {
        height: 24px;
        flex: none;
    }

    .hamburger {
        display: flex;
        order: -1;                 /* гамбургер слева от логотипа */
        padding: 8px;
        margin-left: -4px;
        flex: none;
    }

    .nav-right {
        margin-left: auto;
        gap: 8px;
        flex: none;
    }

    /* Отступы съедены кнопками кассы: они сами по 30 px и держат высоту */
    .balance-pill {
        padding: 3px 4px;
        gap: 3px;
    }

    .balance-pill__btn {
        width: 28px;
        height: 28px;
    }

    /*
     * Сумма НЕ обрезается. Раньше здесь стояли max-width: 92px и
     * text-overflow: ellipsis, и крупный баланс превращался в «1 234 5…» —
     * то есть в бессмысленное число. Обрезать деньги нельзя: это главная
     * цифра в шапке, ради неё туда и смотрят.
     *
     * flex: none закрепляет это: под давлением ужимается ЛОГОТИП (у него
     * flex: 0 1 auto и overflow: hidden), а не баланс. Обрезанное «CASIN»
     * читается, обрезанная сумма — нет.
     *
     * Запас есть: на экране 390px под сумму остаётся около 100px, а самый
     * длинный реальный баланс «1 234 567,89 ₽» занимает ~95px.
     */
    .balance-pill__sum {
        min-width: 0;
        padding: 0 4px;
        white-space: nowrap;
        flex: none;
    }

    .avatar {
        width: 38px;
        height: 38px;
        font-size: 15px;
        flex: none;
    }
}

/* ==========================================================================
   3. ШТОРКА МЕНЮ

   Одна панель на всё: ссылки шапки, категории игр и «Ежедневный бонус».
   Узел .sidebar-left переносит сюда app.js — см. syncMobileDrawer().
   ========================================================================== */

@media (max-width: 850px) {

    .nav-center {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: min(86vw, 330px);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: var(--surface);
        border-radius: 0;
        /* Сверху — с запасом под вырез: шторка занимает весь экран, и со
           включённым viewport-fit=cover её первый пункт оказался бы под
           чёлкой. Слева тот же расчёт для альбомной ориентации. */
        padding: calc(12px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
        overflow-y: auto;
        overscroll-behavior: contain;      /* прокрутка не «пробивает» на страницу */
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
        z-index: 1200;
    }

    .nav-center.mobile-open {
        transform: translateX(0);
    }

    /* Закрытая шторка не должна ловить тапы и попадать в поиск по странице */
    .nav-center:not(.mobile-open) {
        visibility: hidden;
    }

    .mobile-overlay {
        z-index: 1100;
    }

    .nav-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--surface);
        color: var(--text-dim);
        cursor: pointer;
        flex: none;
        transition: all 0.2s ease;
    }

    .nav-close-btn:active {
        background: var(--surface-3);
        color: var(--accent);
    }

    /* Класс вешает toggleMobileMenu(): при открытой шторке гамбургер убираем,
       закрывают её крестик внутри или тап по затемнению. */
    .hamburger-hidden {
        display: none !important;
    }

    .nav-link {
        width: 100%;
        /* Ширина 100% вместе с боковыми margin давала перелив за край шторки
           и горизонтальную прокрутку внутри меню. */
        margin: 0;
        padding: 14px 16px;
        font-size: 15px;
        justify-content: flex-start;
        gap: 12px;
        border-radius: 14px;
        flex: none;
    }

    .nav-link.active {
        background: var(--surface-accent);
        color: var(--accent);
        box-shadow: none;
    }

    /* --- левая колонка --- */

    /* На телефоне левой колонки нет совсем. Её категории — это те же Мины,
       Бабл, Дайс и Партнёрка, что уже стоят в нижней панели: дублировать одни
       и те же пункты в двух меню незачем, читать их от этого не начинают.
       Единственное, чего в панели нет, — кнопку «Ежедневный бонус», — app.js
       переносит в шторку отдельным узлом (см. syncMobileDrawer). */
    .sidebar-left {
        display: none;
    }

    /* Крестовина левой колонки не нужна: закрывают шторку .nav-close-btn
       сверху и тап по затемнению. */
    .sidebar-close-btn {
        display: none;
    }

    /* Перенесённая в шторку кнопка бонуса */
    .nav-center .promo-block {
        width: 100%;
        margin-top: 14px;
        flex: none;
    }
}

/* ==========================================================================
   3.1 МЕНЮ ПРОФИЛЯ

   На телефоне выпадашка шириной 292px, прижатая к аватару, занимает почти всю
   ширину и всё равно упирается в край. Показываем шторкой снизу — и до пунктов
   дотягивается большой палец, а не только верх экрана.
   ========================================================================== */

@media (max-width: 850px) {

    .pmenu {
        position: fixed;
        /* Шторка садится НА нижнюю панель, а не поверх неё: z-index у меню
           1500 против 950 у панели, и при bottom: 0 оно её просто закрывало —
           из открытого меню не было видно, где ты находишься, и переключиться
           на другую игру можно было только закрыв его.
           Инлайновых top/left тут не бывает: placeMenu() на этой же ширине
           выходит раньше и позицию не трогает. */
        inset: auto 0 calc(var(--m-bottom-nav) + env(safe-area-inset-bottom)) 0;
        width: auto;
        /* safe-area снизу больше не нужен — его держит панель под шторкой */
        padding: 10px 12px 14px;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.22);
        animation: pmenuUp 0.22s ease;

        /* Меню длиннее экрана прокручивается внутри себя, а не уезжает под
           шапку: считаем от высоты окна за вычетом панели и запаса сверху. */
        max-height: calc(100vh - var(--m-bottom-nav) - env(safe-area-inset-bottom) - 24px);
        max-height: calc(100dvh - var(--m-bottom-nav) - env(safe-area-inset-bottom) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    @keyframes pmenuUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Ручка шторки — привычный признак того, что панель снизу */
    .pmenu::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 4px;
        background: var(--border);
    }

    .pmenu__item,
    .pmenu__pay-btn {
        min-height: 48px;
    }
}

/* ==========================================================================
   3.2 МЕНЮ ИГР

   Открывается по кнопке «Игры» в нижней панели. Внешне повторяет профильное
   меню: шторка снизу, ручка сверху, прокрутка внутри.
   ========================================================================== */

@media (max-width: 850px) {

    .gmenu {
        position: fixed;
        inset: auto 0 calc(var(--m-bottom-nav) + env(safe-area-inset-bottom)) 0;
        width: auto;
        padding: 10px 12px 14px;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.22);
        animation: gmenuUp 0.22s ease;
        max-height: calc(100vh - var(--m-bottom-nav) - env(safe-area-inset-bottom) - 24px);
        max-height: calc(100dvh - var(--m-bottom-nav) - env(safe-area-inset-bottom) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    @keyframes gmenuUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .gmenu::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 4px;
        background: var(--border);
    }

    .gmenu .category-list {
        gap: 6px;
    }

    .gmenu .category-item {
        padding: 14px 16px;
        border-radius: 16px;
    }

    .gmenu .promo-block {
        margin-top: 10px;
    }
}

/* ==========================================================================
   4. НИЖНЯЯ ПАНЕЛЬ
   ========================================================================== */

@media (max-width: 850px) {

    .mobile-bottom-nav {
        display: flex;
        align-items: stretch;
        gap: 2px;
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        z-index: 950;

        /*
         * Фон непрозрачный, без размытия.
         *
         * Базовое правило в styles.css рисует панель полупрозрачной с
         * backdrop-filter. На iOS размытие у position: fixed отрисовывается
         * с запаздыванием: при прокрутке и при появлении панели браузера
         * сквозь неё видно страницу, а сама панель будто отрывается от
         * нижнего края. То же самое пришлось выключить у окна бонуса.
         *
         * Полупрозрачность здесь и без того вредна: под панелью проезжают
         * карточки игр, и текст пунктов читается по пёстрому фону.
         */
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /*
     * Заплатка «дорисовать фон ниже панели» отсюда убрана.
     *
     * Она не работала в принципе: элементы position: fixed обрезаются
     * границей окна, и всё, что выходит за неё, отсекается — закрасить
     * область снаружи нельзя.
     *
     * Настоящее решение — viewport-fit=cover в index.html: страница
     * получает весь экран, и bottom: 0 попадает на его настоящий низ.
     * Место под полосу-индикатор отводит padding-bottom ниже.
     */

    .mobile-nav-item {
        /* min-width: 0 обязателен: без него flex-элемент не сжимается меньше
           содержимого, и шесть пунктов раздвигают панель шире экрана. */
        min-width: 0;
        gap: 4px;
        padding: 6px 2px;
        font-size: 10px;
        line-height: 1.2;
    }

    .mobile-nav-item span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-item img,
    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
        flex: none;
    }
}

/* ==========================================================================
   5. ГЛАВНАЯ
   ========================================================================== */

@media (max-width: 850px) {

    /* Друг под другом, как и было: узкая колонка на телефоне превратилась
       бы в две нечитаемые полоски. */
    .promo-banners {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    /*
     * Компактный вид баннера.
     *
     * С десктопных пропорций пара баннеров занимала на телефоне почти два
     * экрана: заголовок в две строки, описание в три, строка награды и
     * кнопка — всё столбиком. До «Популярных игр», ради которых на главную
     * и заходят, надо было прокручивать мимо них.
     *
     * Ужимаем не только отступы, но и сам состав: описание в одну строку,
     * кнопка в строку с текстом, картинка вдвое меньше. Высота каждого
     * баннера падает примерно вдвое, при этом заголовок, суть и кнопка
     * остаются на месте.
     */
    .promo-banner {
        min-height: 0;
        padding: 13px 14px;
        border-radius: 16px;
        gap: 10px;
        align-items: center;
    }

    .promo-banner__title {
        font-size: 15.5px;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    /*
     * Описание в одну строку.
     *
     * Три строки мелкого текста на баннере всё равно никто не дочитывает —
     * решение принимают по заголовку. Обрезаем, а не убираем совсем: первая
     * строка договаривает, о чём речь.
     */
    .promo-banner__desc {
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 0;
        max-width: none;

        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /*
     * Партнёрскому баннеру — две строки вместо одной.
     *
     * Там два числа сразу (процент и фриспины), а на строку рядом с кнопкой
     * влезает около тридцати символов: в одну строку второе число обрезалось
     * до «+ 20 …». Это ПОТОЛОК, а не фиксированная высота — на широком
     * экране фраза остаётся в одну строку, и баннер не растёт.
     *
     * Кнопка лежит в своей колонке сетки (grid-area: btn) и на всю высоту
     * ряда, поэтому вторая строка описания её не сдвигает.
     *
     * Соседнему баннеру Telegram двух строк не надо: там одно предложение,
     * и первой строки хватает, чтобы понять, о чём речь.
     */
    .promo-banner--ref .promo-banner__desc {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    /*
     * Текст и кнопка — в строку, а не столбиком.
     *
     * Кнопка под текстом добавляла баннеру целый ряд высоты. Сбоку она
     * занимает ту же строку, что и описание, и по ширине там свободно:
     * заголовок короткий.
     */
    .promo-banner__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        /* Третий ряд — под строку награды у бонуса Telegram. У баннера
           рефералки её нет, и ряд просто схлопывается в ноль: пустая
           область высоты не занимает. */
        grid-template-areas:
            'title  btn'
            'desc   btn'
            'stat   btn';
        align-items: center;
        column-gap: 12px;
        width: 100%;
    }

    .promo-banner__title { grid-area: title; align-self: end; }
    .promo-banner__desc  { grid-area: desc; }

    .promo-banner__btn {
        grid-area: btn;
        min-height: 34px;
        padding: 8px 14px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    /* Награда уточняет, а не зовёт нажать, — поэтому мелко и под описанием. */
    .promo-banner__stat {
        grid-area: stat;
        align-self: start;
        margin-bottom: 0;
        font-size: 11.5px;
    }

    /* Ховера на тач-экране нет, а «залипшее» состояние после тапа выглядит
       как застрявший баннер. */
    .promo-banner:hover {
        transform: none;
    }

    .promo-banner:active {
        transform: scale(0.99);
    }

    /*
     * Картинка убрана с телефона.
     *
     * Именно она задавала баннеру высоту: 76–88 пикселей плюс отступы, то
     * есть больше, чем весь текст вместе с кнопкой после ужатия. Смысла
     * при этом не несёт — самолётик и монеты повторяют то, что написано
     * заголовком.
     *
     * На компьютере остаётся: там места хватает, и баннер без картинки
     * выглядит пустым.
     */
    .promo-banner__art {
        display: none;
    }

    /* Картинок на телефоне больше нет, поэтому и особая раскладка баннера
       рефералки не нужна: тело занимает всю ширину. */
    .promo-banner--ref {
        flex-direction: row;
        align-items: center;
    }

    .banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 18px;
        padding: 26px 22px;
        border-radius: 22px;
        margin-bottom: 24px;
    }

    .banner-content {
        margin-bottom: 0;
        max-width: 100%;
    }

    .banner-image {
        align-self: center;
    }

    .banner-image img {
        width: 132px;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
        margin-bottom: 18px;
    }

    .section-header-left h2 {
        font-size: 19px;
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .quick-start-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .card {
        padding: 18px;
        border-radius: 20px;
    }
}

/* ==========================================================================
   6. ТАБЛИЦЫ

   Пять колонок в карточке шириной ~330px не помещаются никак. Вместо
   горизонтальной прокрутки убираем на телефоне колонки, которые дублируются
   или наименее полезны, — остальное остаётся читаемым.
   ========================================================================== */

@media (max-width: 480px) {

    .history-table td {
        padding: 10px 0;
        font-size: 12px;
    }

    /* История раундов: процент шанса дублирует множитель в соседней колонке */
    .sidebar-right .history-table td:nth-child(3) {
        display: none;
    }

    /* Операции в профиле — не таблица на пять колонок: отсюда
       пряталась лишняя. Теперь это список (.pf-tx) — прятать нечего. */
}

/* ==========================================================================
   7. ПРОФИЛЬ
   ========================================================================== */

@media (max-width: 850px) {

    /* Шапка профиля в одну колонку: баланс справа от имени не помещается,
       а перенос его под имя ломал бы выравнивание по правому краю. */
    .pf-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .pf-hero__wallet {
        text-align: left;
    }

    .pf-hero__balance {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .pf-hero__actions {
        justify-content: stretch;
    }

    .pf-hero__actions .pf-btn {
        flex: 1;
    }

    .pf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pf-tile {
        padding: 13px 14px;
        border-radius: 16px;
    }

    .pf-tile__value {
        font-size: 17px;
    }

    .pf-card {
        padding: 18px;
        border-radius: 18px;
    }

    /* Кнопка под полем, а не рядом: вдвоём в строку они оставляют полю
       ~120px, и код перестаёт помещаться целиком. */
    .promo-form {
        flex-direction: column;
    }

    /*
     * Сброс flex у поля — обязателен при смене направления.
     *
     * На десктопе у него flex: 1 1 200px, где 200px — желаемая ШИРИНА:
     * главная ось строки горизонтальна. Здесь ось стала вертикальной, и
     * то же самое число превратилось в желаемую ВЫСОТУ, да ещё с
     * flex-grow: 1 сверху. Поле раздувалось в коробку на пол-экрана и
     * выглядело как многострочное.
     */
    .promo-input {
        flex: 0 0 auto;
        width: 100%;
    }

    .promo-form .pf-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .pf-hero__avatar {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .pf-hero__name {
        font-size: 19px;
    }

    /* Дата регистрации уводит мета-строку на второй ряд и рвёт её посередине;
       на узком экране достаточно почты. */
    .pf-hero__meta {
        font-size: 12px;
    }

    .pf-tx__meta {
        font-size: 11px;
    }

    .pf-tx__icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
}

/* ==========================================================================
   8. МОДАЛКИ

   На телефоне окна показываем «шторкой» снизу: так они гарантированно
   помещаются по высоте и прокручиваются, а не обрезаются. У .auth-modal
   не было ни max-height, ни overflow — длинная форма регистрации просто
   уходила за нижний край без возможности доскроллить.
   ========================================================================== */

@media (max-width: 850px) {

    /* Класс вешает initModalScrollLock() из app.js. Только на телефоне: на
       десктопе скрытие прокрутки убирает полосу и дёргает вёрстку вбок. */
    body.modal-open {
        overflow: hidden;
    }

    .auth-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .auth-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 24px 24px 0 0;
        transform: translateY(24px);
    }

    .auth-modal-overlay.open .auth-modal {
        transform: translateY(0);
    }

    .auth-container {
        padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
        gap: 16px;
    }

    /* iOS увеличивает страницу при фокусе на поле мельче 16px и обратно уже
       не отматывает. 16px — не косметика, а единственный способ это отключить. */
    .auth-input,
    .promo-input,
    .input-group input,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }

    .auth-submit {
        min-height: 50px;
    }

    /* Касса: колонки друг под друга. Способы оплаты идут первыми — сначала
       выбирают, чем платить, и только потом сколько. */
    .cashier {
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    }

    .cashier__head {
        margin-bottom: 18px;
    }

    .cashier__title {
        font-size: 19px;
    }

    .cashier__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* На узком экране способы встают плиткой: вертикальным списком три
       карточки съедали бы пол-экрана до того, как видно поле суммы. */
    .cashier-methods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .cashier-method {
        padding: 10px 12px;
        gap: 10px;
    }

    .cashier-method__icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .cashier-total__value {
        font-size: 26px;
    }

    .cashier-facts b {
        font-size: 12.5px;
    }

    .cashier-submit {
        min-height: 52px;
    }

    /* История операций. Свёрнута — открывается кнопкой «Показать»; закрытое
       состояние выставляет setCashierHistoryOpen() из app.js по тому же
       порогу 850px, что и этот медиазапрос. Правите порог — правьте и там,
       иначе список будет то раскрыт под кнопкой «Скрыть», то наоборот.

       Строку раскрывашки растягиваем по высоте: 44px — минимальная цель для
       пальца, а сам по себе заголовок в 11px её не даёт. */
    .cashier-history {
        margin-top: 18px;
        padding-top: 14px;
    }

    .cashier-history__toggle {
        min-height: 44px;
    }

    /* Список ниже, чем на десктопе: окно кассы на телефоне листается
       целиком, и высокая вторая прокрутка внутри него мешает больше, чем
       экономит высоту. */
    .cashier-history__list {
        max-height: 180px;
    }

    /* «Все операции» — во всю ширину и с той же целью в 44px: на телефоне
       в неё целятся пальцем, а не курсором. */
    .cashier-history__foot {
        text-align: center;
    }

    .cashier-history__all {
        width: 100%;
        min-height: 44px;
    }

    /* Колесо бонуса: у модалки своя разметка в bonus-enhanced.css, здесь
       только приводим её к тем же правилам шторки. */
    .bonus-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .bonus-modal.enhanced {
        width: 100%;
        max-width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 24px 24px 0 0;
        /* Прокрутку здесь не включаем: её держит .bonus-content, чтобы шапка
           с крестиком оставалась на месте, а конфетти не растягивали окно. */
    }

    /*
     * Жёсткая рамка по ширине для всего содержимого окна.
     *
     * На телефоне содержимое выезжало за края: счётчик вращений и кнопка
     * оказывались обрезаны слева, а справа не доходили до края окна.
     * Виновата не одна конкретная строка, а то, что нигде не было запрета
     * вылезать: у flex-элементов min-width по умолчанию auto, то есть они
     * отказываются сжиматься меньше своего содержимого и молча раздвигают
     * родителя. Плюс padding без box-sizing добавляется К ширине.
     *
     * Поэтому ограничение ставится не точечно, а на всё поддерево окна:
     * так следующий добавленный блок не повторит ту же историю.
     */
    .bonus-modal.enhanced,
    .bonus-modal.enhanced .bonus-content,
    .bonus-modal.enhanced .bonus-wheel-side,
    .bonus-modal.enhanced .bonus-info-side,
    .bonus-modal.enhanced .bonus-info-side > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Прокрутка окна только вертикальная. Горизонтальная означала бы, что
       что-то опять не влезло, — пусть лучше подрежется, чем разъедется. */
    .bonus-modal.enhanced .bonus-content {
        overflow-x: hidden;
    }

    /*
     * Размытие подложки на телефоне выключаем.
     *
     * На iOS backdrop-filter у position: fixed вместе с transform на
     * дочернем окне (у модалки анимация scale) сдвигает отрисовку
     * содержимого — картинка уезжает относительно своей же геометрии.
     * Заодно это самый дорогой эффект на странице: на слабом телефоне
     * из-за него заметно дёргается появление окна.
     *
     * Подложку делаем плотнее, чтобы без размытия она так же отделяла
     * окно от страницы.
     */
    .bonus-overlay,
    .bonus-overlay.enhanced {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 23, 42, 0.72);
    }
}

@media (max-width: 480px) {

    .deposit-preview-amount,
    .withdraw-preview-amount {
        font-size: 32px;
    }
}

/* ==========================================================================
   9. ИГРЫ

   Сами игровые страницы построены на container queries (games.css) и на узком
   экране перестраиваются сами. Здесь — только то, что до них не дотягивается.
   ========================================================================== */

@media (max-width: 850px) {

    .game-wrapper {
        padding: 0;
    }

    /* Старые правила для bubbles задавали полю фиксированные 220px под
       разметку, которой больше нет (.bubbles-game заменили на .bx). Новой
       шкале эта высота мала — она обрезала подписи делений. */
    .bubbles.game-field {
        height: auto;
        min-height: 0;
        padding-bottom: 0;
    }

    .gx-head__side {
        width: 100%;
        justify-content: space-between;
    }

    /* ---- ПОЛЕ ВЫШЕ НАСТРОЕК ----
       В разметке панель управления идёт первой, и на десктопе она стоит
       слева — там это верно. На телефоне колонки схлопываются в одну, и
       поле оказывалось под ставкой, количеством мин, коэффициентом и
       плитками: чтобы вообще увидеть, во что играешь, надо было скроллить
       мимо всех настроек. Меняем местами. */
    .gx-layout > .gx-stage { order: -1; }

    /* ---- КНОПКА ДЕЙСТВИЯ СРАЗУ ПОД ПОЛЕМ ----
       «Начать игру» и «Забрать выигрыш» лежат в разметке после ставки,
       количества мин и коэффициента — на десктопе это нормально, там вся
       панель видна целиком. На телефоне из-за этого между полем и кнопкой,
       которую жмут каждый раунд, оказывалось три блока настроек.

       order, а не position: sticky — липкую кнопку удерживает родитель,
       а .gx-panel на телефоне лежит ниже экрана, и прилипать ей негде.

       Дайса это не касается: его «Меньше/Больше» лежат внутри .gx-stage и
       после перестановки и так оказываются сразу под шкалой. */
    .gx-panel > .gx-action { order: -1; }

    /* ---- ПЛОТНЕЕ ----
       Экран узкий, и каждый лишний отступ отодвигает поле от кнопки. */
    .gx-layout { gap: 12px; }

    .gx-panel { gap: 14px; }

    .gx-block__head { margin-bottom: 8px; }

    /* Плитки со статистикой раунда — в строку по три и мельче: на телефоне
       это справка, а не то, ради чего сюда пришли. */
    .gx-tiles { gap: 8px; }

    .gx-tile { padding: 9px 8px; }

    .gx-tile__label { font-size: 10px; }

    /* Лента коэффициентов и без того прокручивается вбок — отступ сверху
       ей нужен меньший, чем на десктопе. */
    .gx-coeffs { margin-top: 2px; }
}

/* Совсем узкие экраны: поле должно помещаться целиком вместе с кнопкой */
@media (max-width: 480px) {

    .gx-stage { padding: 12px 10px; }

    .gx .game-board {
        padding: 8px;
        border-radius: 18px;
        gap: 6px;
    }

    .gx .cell { border-radius: 12px; }

    /* Никаких bottom/top: у .gx-action в games.css стоит position: relative
       (под блик в ::after), и смещение уводило бы кнопку со своего места —
       вверх, под доску, которая перекрывает её как более поздняя в разметке. */
    .gx-action { min-height: 46px; }

    .gx-action__sub { font-size: 11px; }
}

/* ==========================================================================
   10. МЕЛОЧИ ПОД ПАЛЕЦ
   ========================================================================== */

@media (max-width: 850px) {

    /* 44px — минимальный размер цели по гайдлайнам обеих платформ */
    .btn-primary,
    .btn-ghost,
    .btn-show-all,
    .btn-details,
    .mini-btn,
    .category-item,
    .quick-item {
        min-height: 44px;
    }

    .btn-primary {
        padding: 13px 22px;
    }

    /* Ховер на тач-экране «залипает» после тапа: состояние остаётся до тапа
       по другому элементу. Заменяем его на подсветку в момент нажатия. */
    .card:hover,
    .card-interactive:hover,
    .game-card:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .game-card:active {
        transform: scale(0.98);
    }
}

/* ==========================================================================
   11. УЗКИЕ ЭКРАНЫ
   ========================================================================== */

@media (max-width: 480px) {

    :root {
        --m-gutter: 12px;
    }

    .promo-banner {
        padding: 20px 18px;
    }

    /* Ниже 480px картинка и текст в строке дерутся за место: заголовок
       начинает ломаться по слогам. Картинку убираем, текст важнее. */
    .promo-banner--ref .promo-banner__art {
        display: none;
    }

    .promo-banner__plane {
        width: 72px;
        height: 72px;
        padding: 15px;
    }

    .banner {
        padding: 22px 18px;
    }

    .banner-title {
        font-size: 24px;
    }

    .banner-image img {
        width: 108px;
    }

    /* Две колонки, а не одна: карточка во всю ширину с пропорцией 3/4
       занимает почти весь экран, и до списка игр приходится прокручивать. */
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .game-card {
        aspect-ratio: 3 / 4;
        border-radius: 16px;
    }

    .game-card h4 {
        font-size: 14px;
    }

    /* Описание и характеристики на узком экране мельче: карточка вдвое уже
       десктопной, а строк в ней теперь три. */
    .game-card .game-desc {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .game-card .game-stat {
        font-size: 10.5px;
    }

    /* «Играть сейчас» на телефоне НЕ ПОКАЗЫВАЕТСЯ НИКОГДА: подсказка
       появляется по наведению, а наведения на тач-экране нет. При этом место
       в потоке она занимала всегда — около тридцати пикселей внизу каждой
       карточки, ровно та пустота, из-за которой они и выглядели
       недоделанными. Убираем совсем: карточка целиком и так кликабельна. */
    .game-card .play-hint {
        display: none;
    }

    .game-card-content {
        padding: 12px;
    }

    .card {
        padding: 16px;
        border-radius: 18px;
    }

    /* Режимов шесть: на узком экране три в ряд дают два ровных ряда,
       четыре — ряд и половину. */
    .quick-start-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

@media (max-width: 360px) {

    .logo {
        font-size: 15px;
    }

    .balance-pill {
        padding: 2px 3px;
        gap: 1px;
    }

    .balance-pill__btn {
        width: 25px;
        height: 25px;
    }

    .balance-pill__btn svg {
        width: 12px;
        height: 12px;
    }

    /* max-width здесь тоже был — и резал сумму ещё раньше. Уменьшаем только
       кегль и отступы, ширину сумма берёт по содержимому. */
    .balance-pill__sum {
        font-size: 12px;
        padding: 0 2px;
    }

    .avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .mobile-nav-item {
        font-size: 9px;
    }

    .mobile-nav-item img,
    .mobile-nav-item svg {
        width: 20px;
        height: 20px;
    }

    .games-grid {
        gap: 8px;
    }
}

/* ==========================================================================
   12. АЛЬБОМНАЯ ОРИЕНТАЦИЯ

   Телефон на боку: высоты мало, поэтому шторка и модалки не должны
   рассчитывать на полный экран, а нижняя панель — занимать треть высоты.
   ========================================================================== */

@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {

    .auth-modal,
    .bonus-modal.enhanced {
        max-height: 96vh;
        max-height: 96dvh;
    }

    /* В альбомной ориентации пункты панели ложатся в строку и она становится
       примерно вдвое ниже. Переопределяем высоту здесь же, иначе шторка
       профиля (она отсчитывает отступ снизу от этой переменной) повисла бы
       над панелью с заметным зазором. */
    :root {
        --m-bottom-nav: 36px;
    }

    .mobile-bottom-nav {
        padding: 3px 4px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .mobile-nav-item {
        flex-direction: row;
        gap: 6px;
        font-size: 11px;
    }

    .mobile-nav-item img,
    .mobile-nav-item svg {
        width: 18px;
        height: 18px;
    }

    .mobile-nav-item.active::before {
        display: none;
    }
}

/* ==========================================================================
   ICE FISHING НА ТЕЛЕФОНЕ

   До этого блока у режима не было НИ ОДНОГО мобильного правила: экран просто
   стекался в ленту и прокручивался целиком. Играть в это было нельзя, и вот
   почему — раунд общий, приём ставок идёт двенадцать секунд, а порядок
   блоков в ленте обратен порядку действий:

       колесо · демо · множители · история · ПОЛЯ · все бонусы · ФИШКИ

   Чтобы поставить, надо было промотать вниз к фишкам, выбрать номинал,
   вернуться вверх к полям и успеть нажать — и всё это вслепую, потому что
   таймер с фазой уезжал за верхний край вместе с колесом.

   РЕШЕНИЕ: экран делится на три части, и две из них никуда не деваются.

       сверху   .ice-live — фаза, таймер и колесо, липнут под шапкой
       середина поля, прокручиваются
       снизу    .ice-bar — фишки и кнопки, прибиты над нижней панелью

   Ставка теперь делается не сходя с места: номинал внизу, поле посередине,
   таймер сверху — всё видно разом.

   ПОРЯДОК БЛОКОВ ПЕРЕСОБРАН СВОЙСТВОМ order, А НЕ ПЕРЕСТАНОВКОЙ В РАЗМЕТКЕ.
   Разметка одна на все экраны, и на компьютере её порядок правильный: там
   всё помещается сразу и читается сверху вниз как страница. Переставь мы
   теги — пришлось бы возвращать порядок обратно медиазапросом уже для
   больших экранов, то есть держать две вёрстки вместо одной.
   ========================================================================== */

@media (max-width: 720px) {

    /* Прокручивается страница целиком (у html стоит overflow: clip), поэтому
       sticky считается от окна. Но только если ни один предок не стал
       контейнером прокрутки — а .gx-stage именно такой: у него overflow:
       hidden. Внутри такого предка sticky липнет к его собственным границам,
       то есть не липнет вовсе.

       Отпускаем обрезку только здесь и только у этого режима: она нужна
       другим играм, чтобы их слои не вылезали за скругление карточки. */
    .ice .gx-stage {
        overflow: visible;
        justify-content: flex-start;

        /* Поле карточки задаём ЗДЕСЬ и переменной, хотя games.css его уже
           задал (18px, а ниже 560px — 14px). Причина не в значении: липкая
           верхушка выходит за поле отрицательным margin, и это число ей
           обязано совпадать с точностью до пикселя. Держи мы его копией —
           на узких экранах верхушка вылезала бы за карточку на четыре точки
           и растягивала страницу вбок. Теперь число одно на обоих. */
        --ice-pad: 14px;
        padding: var(--ice-pad);
        padding-bottom: 10px;
    }

    /* Место под прибитую панель ставки — иначе последние поля окажутся под
       ней и до них будет не достать. Переменная объявлена на .ice, потому
       что читают её ДВОЕ: отступ здесь и min-height самой панели. Объяви её
       на панели — сюда она бы не досталась: переменные наследуются вниз, а
       .ice-bar лежит глубже. */
    /* 131 = поля панели 8 + 8, рейка фишек 12 + 46 + 8, зазор 8,
       ряд действий 1 + 6 + 34.

       Не «примерно столько получается»: под это число зарезервировано место
       внизу страницы, и разойдись они — нижний ряд полей уедет под панель
       насовсем. Меняешь поля рейки, размер фишки или высоту кнопки —
       пересчитай здесь.

       Было 146. Панель занимала седьмую часть экрана телефона под шесть
       кружков и три кнопки — при том что играют не в неё, а в поля выше.
       Сняли 15 точек полями и высотой кнопки; фишка ужалась с 48 до 46 и
       ниже не пойдёт — под сорока шестью начинается зона промахов пальцем,
       а ошибиться номиналом дороже, чем полем. */
    .ice { --ice-bar-h: 131px; }

    .ice .gx-layout {
        padding-bottom: calc(var(--ice-bar-h) + 10px);
    }

    /* ---------------------------------------------------- ЛИПКАЯ ВЕРХУШКА */

    .ice-live {
        position: sticky;
        /* Шапка сайта тоже липкая и стоит на нуле. Её высота — переменная из
           шапки этого файла, вырез телефона добавляется отдельно: у самой
           шапки он уже в padding, и без него блок залез бы под неё. */
        top: calc(var(--m-header) + env(safe-area-inset-top));
        z-index: 20;

        /* Выходим за поля карточки, чтобы полоса шла от края до края и под
           ней не просвечивал прокручиваемый контент. Отрицательный margin
           берётся из той же переменной, что и само поле, — иначе полоса
           разъедется с карточкой на узких экранах. */
        margin: calc(var(--ice-pad) * -1) calc(var(--ice-pad) * -1) 12px;
        padding: 10px var(--ice-pad) 12px;
        background: var(--gx-card, var(--surface));
        border-bottom: 1px solid var(--gx-line, var(--border));
    }

    /* КОЛЕСО: ВЫСОТА И РАДИУС ПРАВЯТСЯ ТОЛЬКО ВМЕСТЕ.
     *
     * Кадр показывает верхний сегмент диска, и доля видимого задаётся
     * отношением высоты к радиусу. По всему games.css оно держится около
     * 0.52 — это срез по внутреннему краю долек: видна вся полоса с
     * множителями и рыбами, и не вылезает белая ступица.
     *
     * ЗДЕСЬ ОНО БЫЛО СЛОМАНО. Высоту на телефоне переопределили (50cqw),
     * а радиус остался базовым: диск 240% даёт R = 1.2 ширины, и отношение
     * падало до 0.42. Полосу долек срезало нижним краем кадра — то самое
     * «колесо занимает полэкрана, а смотреть в нём не на что».
     *
     * Считается так: width — ДИАМЕТР в процентах ширины кадра, значит
     * R = width/2. Берём высоту 41.6% ширины и радиус 80% (диск 160%):
     * 0.416 / 0.8 = 0.52 — ровно норма.
     *
     * Заодно колесо стало на 29 точек ниже: каждый его пиксель отнимается
     * у полей, ради которых игрок сюда и пришёл. Дольки при меньшем
     * радиусе мельче, но их больше в кадре, и обрезанных среди них нет.
     *
     * Бонусной сцене это не мешает: она подбирает высоту кадра под
     * пропорции окна сама (см. geom() в ice-scene.js). */
    .ice-live .ice-wheel {
        height: clamp(120px, 41.6cqw, 175px);
    }

    .ice-live .ice-wheel__disc { width: 160%; }

    /* УКАЗАТЕЛЬ — ПОСТОЯННАЯ ДОЛЯ ДИСКА, А НЕ САМОСТОЯТЕЛЬНЫЙ РАЗМЕР.
     *
     * Остриё обязано заходить на дольки на одну и ту же глубину при любой
     * ширине экрана, а глубина эта считается от толщины обода — то есть от
     * радиуса. Поэтому во всех пяти зонах games.css указатель и диск
     * меняются парой, и их отношение там постоянно:
     *
     *     диск 240% — указатель 11.8cqw     11.8 / 240 = 4.9%
     *     диск 195% —            9.6cqw      9.6 / 195 = 4.9%
     *     диск 132% —            6.5cqw      6.5 / 132 = 4.9%
     *     диск 112% —            5.5cqw      5.5 / 112 = 4.9%
     *
     * Выше мы ужали диск до 160%, а указатель остался базовым — 11.8cqw от
     * диска 240%. Доля выросла до 7.4% вместо 4.9%, и стрелка стала в
     * полтора раза крупнее положенного: она закрывала соседние дольки и
     * читалась как отдельная деталь поверх колеса, а не как его часть.
     *
     * 7.8cqw — та самая доля от 160%. Совпадение с зоной 560px не
     * случайно: там диск ровно такой же.
     *
     * Границы clamp опущены против базовых 30 и 56: они рассчитаны на
     * крупный диск, и нижняя из них (30px) не дала бы указателю ужаться
     * до положенных ему на телефоне 27. */
    .ice-live .ice-wheel__pointer { width: clamp(22px, 7.8cqw, 44px); }

    .ice-live .ice-phase { margin-bottom: 8px; }

    /* ------------------------------------------------------ ПОРЯДОК БЛОКОВ */

    .ice-live    { order: 1; }
    .ice-board   { order: 2; }
    .ice-allbet  { order: 3; }
    .ice-mults   { order: 4; }
    .ice-history { order: 5; }
    .ice-demo    { order: 6; }

    /* Поля идут первыми после колеса и компактнее: три строки по две плитки
       должны попадать в остаток экрана целиком. */
    .ice-board { gap: 8px; margin-top: 0; }

    /* Поля и просветы поджаты против прежних 9 и 5 — ровно на те 8 точек,
       которые забрала двухстрочная плашка своей ставки (см. ниже). Без
       этого три ряда полей со ставками перестают помещаться в остаток
       экрана, и нижний ряд приходится доскручивать во время приёма
       ставок — а он идёт двенадцать секунд. */
    .ice-spot { padding: 8px 10px; gap: 4px; border-radius: 12px; }

    /* НАЗВАНИЕ И МНОЖИТЕЛЬ — В ОДНУ СТРОКУ, А НЕ В ДВЕ.
     *
     * На столе они стоят колонкой, и это правильно: там ширины вдоволь, а
     * множитель — главное число плитки, ему положена своя строка.
     *
     * На телефоне та же колонка съедала 34 точки на плитку, то есть сотню
     * на три ряда полей — при том что строка занята едва наполовину.
     * Разворачиваем в строку: название слева, множитель справа, по общей
     * базовой линии. Плитка теряет 15 точек высоты и ничего не теряет по
     * смыслу — оба числа на виду.
     *
     * Название ужимается многоточием, а множитель не ужимается никогда
     * (flex: none). Приоритет именно такой: поле опознаётся по цвету
     * плитки, а вот «до ×10000» подменить нечем — ради него сюда и
     * смотрят. */
    .ice-spot__head {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
    }

    .ice-spot__name {
        min-width: 0;
        font-size: 11.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ice-spot__mult {
        flex: none;
        font-size: 16px;
    }

    /* Живая строка мельче: сколько народу стоит на поле — справка, а не
       то, по чему принимают решение. */
    .ice-spot__live { font-size: 10.5px; }

    /* Наведение на телефоне не существует, а подъём плитки при нажатии
       смазывает попадание пальцем: палец уже на плитке, а она уезжает. */
    .ice-spot:hover { transform: none; box-shadow: 0 1px 0 rgba(9, 24, 44, .06); }

    /* СВОЯ СТАВКА НА ПЛИТКЕ — ДВЕ СТРОКИ ПО СЕТКЕ, А НЕ ПЕРЕНОС ПО МЕСТУ.
     *
     * Полоса собирается из трёх кусков — «200 ₽», стрелка, «до 10 200 ₽»
     * (mineMarkup в icefishing.js). На столе они помещаются в строку, на
     * телефоне плитка вдвое уже, и в одну строку они не влезают НИКОГДА:
     * на красной рыбе с потолком ×10000 выплата семизначная.
     *
     * Строкой с переносом это уже пробовали, и вышло хуже поломки: место
     * разрыва решал браузер, стрелка оставалась висеть в конце первой
     * строки указывающей в пустоту, а белая плашка разъезжалась на
     * половину плитки.
     *
     * Поэтому раскладка ЗАДАНА, а не отдана на усмотрение переноса:
     *
     *     ○  200 ₽
     *        до 10 200 ₽
     *
     * Фишка — на обе строки слева, ставка и выплата — колонкой справа.
     * Стрелка убрана: она означала «превратится в» при чтении слева
     * направо, а сверху вниз эту роль выполняет сам порядок строк.
     *
     * ПЛАТИМ ЗА ЭТО ВЫСОТОЙ: плашка выше однострочной на 12 точек, а на
     * трёх рядах полей это 36 — больше, чем остаётся свободного места на
     * телефоне высотой 844. Поэтому ниже поджаты поля и просветы самой
     * плитки: минус 8 точек с каждой возвращают ряды в габарит. Меняешь
     * тут строки или кегль — пересчитай и там.
     *
     * Читается при любой длине суммы, потому что ничего не зависит от
     * того, сколько знаков влезло. Плитка не разъезжается: полоса
     * появляется только со своей ставкой, без неё :empty убирает её
     * вовсе (games.css). */
    .ice-spot__mine {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
        padding: 4px 9px 4px 4px;
        border-radius: 10px;
        font-size: 11.5px;
        line-height: 1.15;
    }

    /* Фишка слева от обеих строк сразу. grid-row на псевдоэлементе
       работает как на обычном элементе сетки — он и есть её первый
       элемент. */
    .ice-spot__mine::before {
        grid-row: 1 / -1;
        width: 17px;
        height: 17px;
    }

    .ice-spot__mine b {
        grid-column: 2;
        white-space: nowrap;
    }

    /* Выплата — второй строкой, мельче и бледнее ставки: поставленное это
       факт, выплата — возможность, и весом они равны быть не должны. Тот
       же порядок, что и на столе, только по вертикали. */
    .ice-spot__mine span {
        grid-column: 2;
        white-space: nowrap;
        font-size: 10.5px;
        font-weight: 700;
        opacity: .6;
    }

    /* Стрелка нужна была строке, а не колонке. */
    .ice-spot__mine i { display: none; }

    .ice-allbet { margin-top: 8px; }

    /* Второстепенное — мельче: множители и история нужны между раундами, а
       не во время ставки. */
    .ice-mults, .ice-history { margin-top: 8px; }

    /* --------------------------------------------------- ПРИБИТАЯ ПАНЕЛЬ */

    .ice-bar {
        /* Ровно та высота, под которую выше зарезервировано место. Не
           «примерно столько получается» из содержимого: набежит на пару
           точек больше — и нижний ряд полей навсегда уедет под панель. */
        min-height: var(--ice-bar-h);
        box-sizing: border-box;

        position: fixed;
        left: 0;
        right: 0;
        /* Над нижней панелью навигации, а не поверх неё. */
        bottom: calc(var(--m-bottom-nav) + env(safe-area-inset-bottom));
        /* Ниже панели навигации (950) и ниже шторки меню, но выше карточки. */
        z-index: 940;

        margin: 0;
        gap: 8px;
        padding: 8px var(--m-gutter) 8px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        /* Фон непрозрачный: под панелью едет контент. */
        background: var(--surface);
        /* Светлая грань по верхнему краю и тень вниз — панель читается как
           отдельный ярус, лежащий НАД страницей, а не как её последний блок,
           случайно прилипший к низу. */
        border-top: 1px solid var(--gx-line, var(--border));
        box-shadow:
            inset 0 1px 0 var(--gx-gloss, rgba(255, 255, 255, .9)),
            0 -8px 22px rgba(9, 24, 44, .18);
    }

    /* Подпись «Фишка · выберите и нажмите на поле» на телефоне лишняя:
       строка занимает высоту, а объясняет то, что и так понятно после
       первого нажатия. */
    .ice-bar .ice-rack__head { display: none; }

    /* Рейка и прокрутка приходят из games.css — здесь только поджимаем поля
       под телефон.

       ВЕРХНЕЕ ПОЛЕ — 12, И МЕНЬШЕ ОДИННАДЦАТИ ЕГО СТАВИТЬ НЕЛЬЗЯ. Выбранная
       фишка поднимается на 6 точек (translateY) и обводится кольцом ещё в 5
       (box-shadow 0 0 0 5px) — вместе это ровно 11, которые обязаны
       поместиться над её обычным положением.

       Спрятаться им некуда: overflow-x: auto делает контейнер прокручиваемым
       ПО ОБЕИМ осям — это правило CSS, а не причуда браузера, — и всё, что
       вылезло вверх, срезается краем. Проверено на себе: с полем в 9 точек
       кольцо выбранной фишки срезало на два пикселя, и монета выглядела
       заезжающей под панель.

       Нижнее поле меньше намеренно: снизу фишка никуда не уходит. */
    .ice-rack {
        gap: 8px;
        padding: 12px 10px 8px;
    }

    /* Сорок шесть — нижняя граница уверенного попадания пальцем. Ошибиться
       номиналом дороже, чем полем: поле видно на плитке, а лишний ноль в
       ставке замечают уже после раунда. */
    .ice-chip { width: 46px; height: 46px; }

    /* Ряд действий отбит от фишек линией: два ряда без неё слипаются в одну
       пёструю кашу, и панель выглядит недоделанной. */
    .ice-acts {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 6px;
        border-top: 1px solid var(--gx-line-2, var(--border-soft, var(--border)));
    }

    /* Кнопки забирают весь остаток строки и делят его поровну. Прижатые
       вправо, они оставляли слева пустоту, когда ставок ещё нет: строка
       выглядела наполовину забытой. */
    .ice-acts .gx-chips {
        flex: 1;
        gap: 7px;
    }

    /* 38 — та же высота, что и на столе. Ниже делать нельзя: это последний
       ряд перед нижней навигацией, и промах по нему уводит из игры. */
    .ice-acts .gx-chip {
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }

    /* Итог ставки — слева, компактной колонкой: подпись мельче, сумма
       крупная. В строке он занимает ровно своё и не растягивается. */
    .ice-total {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-right: 0;
        line-height: 1.15;
    }

    .ice-total__label { font-size: 9.5px; letter-spacing: .5px; }
    .ice-total__sum { font-size: 16px; }
}

/* Низкий экран в альбомной ориентации: липкое колесо съело бы его целиком.
   Там честнее вернуть обычную ленту — прокрутка на широком экране короче, и
   поля с фишками попадают в кадр и без прибитых полос. */
@media (max-width: 720px) and (max-height: 480px) {
    .ice-live { position: static; margin: 0 0 12px; padding: 0; border-bottom: 0; }
    .ice-bar { position: static; }
    .ice .gx-layout { padding-bottom: 0; }
    .ice .gx-stage { overflow: hidden; }
}