/* ==========================================================================
   DropHub — мобильная версия

   Один файл на весь сайт, подключается ПОСЛЕДНИМ: он правит то, что уже
   разложили страничные стили, и спорить с ними ему приходится часто.

   ---------- ОБЩЕЕ ПРАВИЛО ИГРОВЫХ СТРАНИЦ ----------

   На телефоне порядок один и тот же: СВЕРХУ ИГРА, СНИЗУ ЕЁ НАСТРОЙКИ.
   На широком экране игры разложены в две колонки — панель слева, поле
   справа. При сужении колонки схлопываются в одну, и панель с кнопками
   оказывалась ПЕРЕД полем: человек открывал игру и видел форму ставки,
   а саму игру нужно было искать прокруткой.

   Порядок задаётся не переписыванием разметки, а order у flex/grid —
   так игра и её панель остаются на своих местах в коде.

   ---------- ПОРОГ ----------

   760px. Не 480: на планшете в портрете две колонки тоже не помещаются,
   а одноколоночная раскладка там уже уместна.
   ========================================================================== */

/* Нижняя полоса и панель создаются скриптом и остаются в разметке после
   того, как окно растянули обратно. Без этого правила на широком экране
   внизу висела бы полоса вкладок: все их стили лежат внутри @media, а сам
   узел — нет. Правило стоит ДО медиазапроса: селекторы одинаковой силы,
   и побеждает тот, что ниже. */
.kz-tabbar, .kz-menu, .kz-menu__back { display: none; }

@media (max-width: 760px) {

  /* ═══════════ ЛЕНТА ДРОПОВ ═══════════
     На телефоне — узкая версия образца: без кнопок сортировки и карточки
     лучшего дропа, ряд карточек 70×45 только с картинкой. */
  /* Размеры как у образца на телефоне: полоса 45px, карточка 70×45,
     картинка 38px, без сортировки, лучшего дропа и подписей. */
  .kz-dh { height: 45px; padding-left: 0; }
  .kz-dh__sort, .kz-dh__top { display: none; }
  .kz-dh__items { height: 45px; }
  .kz-dh__it { width: 70px; height: 45px; border-radius: 0 0 5px 5px; }
  .kz-dh__pic { padding-top: 2px; }
  .kz-dh__pic img { height: 38px; max-width: 64px; }
  .kz-dh__name, .kz-dh__tipwrap { display: none; }
  .kz-dh__it:hover .kz-dh__inner { transform: none; }

  /* ═══════════ ШАПКА ═══════════ */

  .kz-header {
    height: 56px; gap: 10px; padding: 0 12px;
    display: flex; align-items: center;
  }
  .kz-logo { flex: none; }
  .kz-logo__word { height: 39px; width: auto; }

  /* Меню и правая группа уезжают в выдвижную панель (kraze.mobile.js). */
  .kz-header .kz-nav,
  .kz-header .kz-header__end { display: none; }

  /* ─── НИЖНЯЯ ПОЛОСА: Меню · Игры · Бонусы ───
     Как у мобильных букмекеров: навигация под большим пальцем, шапка
     только с логотипом и балансом. Полоса поверх всего и не прокручивается,
     страница получает отступ снизу ровно в её высоту (см. body ниже). */
  .kz-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: rgba(8, 8, 10, .92); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .kz-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 58px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--text-mute); text-decoration: none;
    font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: color .14s;
  }
  .kz-tab__i { display: grid; place-items: center; width: 24px; height: 24px; }
  .kz-tab__i svg { width: 22px; height: 22px; }
  /* Активная вкладка — та страница, где стоим; «Меню» горит, пока панель
     открыта. Цвет один и тот же, лаймовый акцент сайта. */
  .kz-tab.is-on, .kz-tab:hover { color: var(--accent); }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  /* Кнопка чата и до этого стояла в правом нижнем углу — поднимаем над
     полосой, иначе они друг друга перекрывают. */
  .kz-chat { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* Между логотипом и правым краем стоит ровно одно: гостю — вход,
     вошедшему — баланс. Оба узла лежат в строке, лишний скрыт. */
  .kz-header .kz-wallet {
    display: flex; order: 2; height: 34px; padding: 3px 3px 3px 8px;
    gap: 4px; border-radius: 9px; margin-left: auto;
  }
  .kz-header .kz-wallet .kz-btn { display: none; }        /* «Пополнить» и «Вывод» — в панели */
  .kz-header .kz-balance { font-size: 13px; padding-right: 2px; }
  .kz-header .kz-balance__coin { width: 18px; height: 18px; margin-left: 0; }

  /* Кнопка входа на месте баланса. home.css прячет её на узкой шапке
     селектором .kz-header__end .kz-btn--ghost — здесь родитель другой,
     и правило мимо; метку «Войти» он же прячет с 900px, возвращаем. */
  .kz-header > .kz-btn--ghost {
    display: inline-flex; order: 2; margin-left: auto;
    height: 34px; padding: 0 12px; font-size: 12px; white-space: nowrap;
  }
  .kz-header > .kz-btn--ghost span { display: inline; }
  /* Вошёл — kraze.auth.js ставит кнопке hidden. Свой display сильнее
     браузерного правила для [hidden], и без этого кнопка входа висела
     бы в шапке у вошедшего. */
  .kz-header > [hidden] { display: none !important; }
  /* Гость вошёл — kraze.auth.js ставит кнопке hidden, и в строке
     остаётся кошелёк. Пока кнопка видна, кошелька в строке нет. */
  .kz-header > .kz-btn--ghost:not([hidden]) ~ .kz-wallet { display: none; }

  /* ─── ШТОРКА СЛЕВА ───
     Во весь рост экрана, на четыре пятых ширины, выезжает слева; справа
     от неё страница гаснет, и в углу затемнения стоит крестик. Открывает
     «Меню» в нижней полосе, закрывают крестик, затемнение и Escape. */

  .kz-menu {
    position: fixed; z-index: 200; left: 0; top: 0; bottom: 0;
    width: min(82vw, 340px); overflow: auto; overscroll-behavior: contain;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #0e0f12; border-right: 1px solid var(--line);
    box-shadow: 18px 0 44px rgba(0, 0, 0, .55);
    display: flex; flex-direction: column; gap: 10px;
    animation: kz-menu-in .22s cubic-bezier(.2, .8, .3, 1);
  }
  @keyframes kz-menu-in { from { transform: translateX(-100%); } to { transform: none; } }
  /* Затемнение под панелью. display здесь обязателен: правило перед
     медиазапросом гасит подложку на широком экране, и без него она
     оставалась погашенной и на телефоне — меню открывалось поверх
     страницы, ничем от неё не отделённое. */
  .kz-menu__back {
    display: block; position: fixed; inset: 0; z-index: 199;
    background: rgba(3, 4, 6, .66); backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: kz-back-in .16s ease-out;
  }
  @keyframes kz-back-in { from { opacity: 0; } to { opacity: 1; } }
  .kz-menu__x {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    display: grid; place-items: center;
  }
  .kz-menu__x svg { width: 20px; height: 20px; }
  body.is-drawer { overflow: hidden; }
  /* Кнопка чата и нижняя полоса уходят под затемнение вместе со
     страницей: открытая штора — единственное, что сейчас на экране. */
  body.is-drawer .kz-chat, body.is-drawer .kz-tabbar { z-index: 1; }
  /* У панели задан свой display, а он сильнее браузерного [hidden] —
     без !important она открыта сразу при загрузке страницы. */
  .kz-menu[hidden], .kz-menu__back[hidden] { display: none !important; }

  /* ── кто вошёл ── */
  .kz-menu__user { display: flex; flex-direction: column; gap: 10px; }
  .kz-menu__me, .kz-menu__user > .kz-menu__ava { text-decoration: none; color: inherit; }
  .kz-menu__me { display: flex; align-items: center; gap: 12px; }
  .kz-menu__user:not(:has(.kz-menu__me)) { flex-direction: row; align-items: center; gap: 12px; }
  .kz-menu__ava {
    flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
    background: var(--panel-3); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--text-dim);
    font-family: var(--f-cond); font-size: 20px; font-weight: 700;
  }
  .kz-menu__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .kz-menu__ava i { display: block; width: 26px; height: 26px; }
  .kz-menu__ava svg { width: 100%; height: 100%; }
  .kz-menu__who { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .kz-menu__who b { font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kz-menu__who i { font-style: normal; font-size: 12px; color: var(--text-mute); }
  .kz-menu__chev { flex: none; width: 20px; height: 20px; color: var(--text-mute); display: grid; place-items: center; }
  .kz-menu__chev svg { width: 18px; height: 18px; }
  .kz-menu__login {
    flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--lime); color: #10160A; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .kz-menu__bal {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 10px; border-radius: 12px; background: var(--panel-3); border: 1px solid var(--line);
  }
  .kz-menu__bal-v { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-family: var(--f-cond); font-size: 16px; font-weight: 700; color: var(--text); }
  .kz-menu__bal-v .kz-balance__coin { width: 18px; height: 18px; margin: 0; }
  .kz-menu__bal .kz-btn { display: inline-flex; height: 32px; padding: 0 12px; font-size: 12px; }

  /* ── баннер бонусов ── */
  .kz-menu__promo {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
    min-height: 66px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--text);
    background: linear-gradient(105deg, #1a2a12 0%, #10150d 55%, #0f1020 100%);
    border: 1px solid color-mix(in srgb, var(--lime) 28%, var(--line));
  }
  .kz-menu__promo-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .kz-menu__promo-t b { font-size: 15px; font-weight: 700; }
  .kz-menu__promo-t i { font-style: normal; font-size: 12px; color: var(--text-mute); }
  .kz-menu__promo-i { flex: none; width: 44px; height: 44px; color: var(--lime); display: grid; place-items: center; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lime) 55%, transparent)); }
  .kz-menu__promo-i svg { width: 34px; height: 34px; }

  /* ── список строк ── */
  .kz-menu__list { display: flex; flex-direction: column; gap: 2px; }
  .kz-menu__row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 48px; padding: 0 10px; margin: 0; border: 0; border-radius: 12px;
    background: none; color: var(--text); text-decoration: none; text-align: left; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600;
  }
  .kz-menu__row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kz-menu__row:active, .kz-menu__row.is-on { background: var(--panel-3); }
  .kz-menu__row.is-on { color: var(--accent); }
  .kz-menu__ico { flex: none; width: 26px; height: 26px; object-fit: contain; }
  .kz-menu__ico--svg { display: grid; place-items: center; color: var(--text-dim); }
  .kz-menu__ico--svg svg { width: 22px; height: 22px; }
  .kz-menu__row.is-on .kz-menu__ico--svg { color: var(--accent); }
  .kz-menu__badge {
    flex: none; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 11px;
    display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    background: var(--panel-2); color: var(--text);
  }
  .kz-menu__badge.is-hot { background: #FF6A2C; color: #fff; }
  .kz-menu__hr { width: auto; margin: 8px 6px; border: 0; border-top: 1px solid var(--line); }

  /* раскрывающийся пункт «Игры»: стрелка поворачивается, список внутри
     с отступом слева, чтобы читался как вложенный */
  .kz-menu__chev--down svg { transition: transform .18s; }
  .kz-menu__group.is-open .kz-menu__chev--down svg { transform: rotate(180deg); }
  .kz-menu__group.is-open .kz-menu__fold { background: var(--panel-3); }
  .kz-menu__sub { display: none; flex-direction: column; gap: 1px; padding: 4px 0 4px 10px; }
  .kz-menu__group.is-open .kz-menu__sub { display: flex; }
  .kz-menu__sub .kz-menu__row { min-height: 42px; font-size: 14px; }
  .kz-menu__sub .kz-menu__ico { width: 28px; height: 28px; }

  /* ── канал, соцсети, поддержка ── */
  /* Карточки «Канал DropHub» в шторе больше нет — просили убрать; соцсети
     прижаты к низу вместо неё. */
  .kz-menu__social { margin-top: auto; display: flex; align-items: center; gap: 8px; }
  .kz-menu__soc, .kz-menu__tools > .kz-iconbtn {
    display: inline-flex !important; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin: 0; border-radius: 12px; background: var(--panel-3); border: 1px solid var(--line);
    color: var(--text); text-decoration: none;
  }
  .kz-menu__soc svg { width: 22px; height: 22px; }
  .kz-menu__tools { display: flex; gap: 8px; margin-left: auto; }
  .kz-menu__support {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px;
    border-radius: 12px; text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600;
  }
  .kz-menu__support-i { flex: none; width: 26px; height: 26px; color: var(--text-dim); display: grid; place-items: center; }
  .kz-menu__support-i svg { width: 22px; height: 22px; }
  .kz-menu__support span { flex: 1; }
  .kz-menu__support b { padding: 3px 9px; border-radius: 10px; background: #2E7BFF; color: #fff; font-size: 12px; font-weight: 700; }

  /* Остаток правой группы шапки (аватар с его меню, Register) в шторе
     не показывается: кто вошёл, видно в верхней карточке. */
  .kz-menu__end { display: none; }
  .kz-menu [hidden] { display: none !important; }

  /* ═══════════ ГЛАВНАЯ ═══════════ */

  /* Верхняя карусель разделов на телефоне не нужна: те же разделы лежат
     в панели, а полоса забирала первый экран целиком. */
  .gg-bar, .kz-gbar { display: none; }

  /* Баннер: min-height 420px оставляла под кадром triста пикселей пустоты —
     на телефоне картинка высотой всего 126. Плюс отрицательный отступ
     -86px поднимал баннер под ряд разделов, а ряд на телефоне скрыт, и
     кадр уезжал под шапку. */
  .gg-banner { min-height: 0 !important; height: auto; width: calc(100% - 24px); margin: 0 auto; border-radius: 14px; overflow: hidden; }
  .gg-banner img { width: 100%; height: auto; object-fit: cover; }
  .gg-page--top { display: none; }   /* пустой контейнер скрытого ряда разделов */

  .gg-page { padding-left: 12px; padding-right: 12px; }
  .gg-cat__head { flex-direction: column; align-items: stretch; gap: 12px; }
  .gg-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ═══════════ ИГРЫ: ИГРА СВЕРХУ, НАСТРОЙКИ СНИЗУ ═══════════

     На широком экране игры разложены в две колонки: панель со ставкой
     слева, поле справа. При сужении колонки схлопываются, и в разметке
     панель идёт ПЕРВОЙ — человек открывал игру и упирался в форму, а
     саму игру искал прокруткой.

     Порядок правится order, а не переносом узлов: разметка остаётся
     осмысленной, и на широком экране ничего не меняется. */

  .cr-page, .cfl-page, .pl-page, .hl-page, .mn-page,
  .up-page, .tr-page, .sl-page, .cf-page {
    display: flex; flex-direction: column; gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Краш. Настоящая пара «игра — настройки» лежит глубже: .cr-row внутри
     .cr-panel держит .cr-side (ставка) и .cr-game (холст с ракетой).
     Переставляем именно их, а список чужих ставок уводим вниз. */
  .cr-panel { order: 1; }
  .cr-bets  { order: 2; }
  .cr-about { order: 3; }

  /* ═══════════ КРАШ ═══════════

     Порядок сверху вниз: поле с анимацией (полоса прошлых обрывов
     лежит по его нижнему краю, там же, где и на широком экране),
     ставка, выбор скина. Всё это должно умещаться в один экран —
     иначе кнопку «Поставить» ищут прокруткой, а раунд идёт двенадцать
     секунд.

     Раньше поле занимало 420px, а панель разворачивалась под ним на
     473px: до кнопки было полтора экрана. */
  /* Страница шире: было 20px внешнего отступа плюс 12px внутреннего с
     каждой стороны — поле получалось 311px из 375, в рамке шириной с
     палец. Оставляем 8px. */
  .cr-page {
    /* width: min(1400px, calc(100% - 40px)) забирал 40px по бокам ещё
       до внутреннего отступа: поле выходило 311px из 375. */
    width: 100%; margin-left: 0; margin-right: 0;
    padding-left: 6px; padding-right: 6px;
  }

  /* Одна колонка без внешней рамки: поле, ставка и выбор скина идут
     подряд. Общая тёмная обёртка вокруг них давала карточку внутри
     карточки — своя подложка есть у каждой части, и снаружи она только
     съедала ширину. */
  .cr-row {
    display: flex; flex-direction: column; gap: 8px; height: auto; min-height: 0;
    padding: 0; border: 0; background: none;
  }
  /* flex: none обязателен: у поля flex: 1 1 0%, и в колонке высотой по
     содержимому оно схлопывалось в двухпиксельную полоску — свою height
     основа с нулевым базисом не читает. */
  /* Название игры со значком — первой строкой (перенос в kraze.mobile.js). */
  .cr-row > .cr-side__head { order: 0; padding: 0 2px; }
  .cr-game { order: 1; flex: none; min-height: 0; height: 270px; }
  .cr-side { order: 2; }

  /* Панель ставки — сетка в две колонки: слева множитель авто-вывода с
     быстрыми целями, справа главная кнопка во всю высоту этой пары.
     Так это устроено в образце, и так кнопка остаётся крупной, не
     занимая отдельной строки. */
  .cr-side {
    display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px;
    align-content: start; padding: 0; border: 0; background: none;
  }
  .cr-side > * { grid-column: 1 / -1; }
  .cr-side__head { margin: 0; }
  .cr-side__title { font-size: 15px; }

  .cr-hero { min-height: 56px; grid-template-columns: 70px minmax(0, 1fr); }
  .cr-hero__art { width: 70px; height: 48px; }
  .cr-cap { margin-top: 0; }

  /* Авто-вывод переехал НАД предметом (crash.html), и пара «поле + кнопка»
     в одной строке распалась: между ними теперь плита с предметом.
     Поэтому оба во всю ширину — как на широком экране. */
  .cr-autobar { grid-column: 1 / -1; grid-template-columns: 92px minmax(0, 1fr); gap: 5px; }
  .cr-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  /* Кнопка в узкой колонке: подпись переносится по словам. С исходным
     white-space: nowrap «Выберите скин» вылезало за край кнопки. */
  .cr-state {
    grid-column: 1 / -1; height: 46px;
    margin: 0; padding: 0 12px; font-size: 14px; line-height: 1.15;
    white-space: normal; text-align: center;
  }

  /* Выбор скина — нижний блок, как вторая ставка в образце. Высота
     фиксированная: без неё сетка тянулась на весь инвентарь и уводила
     всё остальное за экран. Рамка своя: это единственная часть панели,
     которая прокручивается, и границу прокрутки видно. */
  .cr-inv { flex: none; height: 168px; min-height: 0; background: var(--panel-2); }

  /* коинфлип: монета в .cfl-main, ставка в .cfl-panel */
  .cfl-top  { order: 1; }
  .cfl-main { order: 2; }
  .cfl-panel { order: 3; }

  /* плинко, минер: поле в *-main, ставка в *-panel */
  .pl-main, .mn-main { order: 1; }
  .pl-panel, .mn-panel { order: 2; }

  /* ─── ПЛИНКО В ОДИН ЭКРАН ───
     Доска, ставка, риск, ползунки и «Играть» должны помещаться без
     прокрутки. Доска уже — 300px (высота идёт от ширины), на телефоне по
     умолчанию 12 рядов (plinko.main.js); карточки панели ужаты: ставка
     и инвентарь одной полосой, риск в строку с подписью, ползунки в две
     колонки, суммы в одну строку; подсказка про край доски и Provably
     fair на телефоне не показываются. */
  .pl-page { gap: 8px; }
  .pl-main { gap: 6px; }
  /* Доска ниже: высоту режет plinko.main.js (layout) — треть экрана.
     Рамка остаётся во всю ширину, пирамида в ней по центру. */
  .pl-stage .pl-board { padding: 6px 6px 8px; }
  /* Панель — сетка в две колонки: карточки во всю ширину, а суммы и
     «Играть» стоят рядом в одной строке внизу. */
  .gm-body .pl-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0; column-gap: 8px;
    position: static; padding: 6px 12px 12px;
    border: 0; border-radius: 16px;
    background: rgba(8, 10, 16, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .pl-panel > .pl-card, .pl-panel > .pl-hint, .pl-panel > .pl-fair { grid-column: 1 / -1; }
  /* Секции внутри блока разделены тонкими линиями (см. .pl-card ниже),
     а не коробками; строка сумм и «Играть» отступает от последней. */
  .pl-panel > .pl-sums, .pl-panel > .pl-play { margin-top: 10px; }
  /* Без подложек: кнопки риска, ползунки и суммы лежат прямо на странице,
     карточки под ними на телефоне только дробили панель на коробки.
     games.css красит .pl-card через .gm-body — селектор той же силы. */
  .gm-body .pl-panel > .pl-card, .gm-body .pl-panel > .pl-sums {
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  .gm-body .pl-panel > .pl-card { border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .pl-card { padding: 10px 0; }
  .pl-lab { margin-bottom: 6px; }
  /* Ставка деньгами: подпись, поле и быстрые суммы одной строкой. */
  .pl-card:has(.pl-money) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 6px; }
  .pl-card:has(.pl-money) .pl-lab { grid-column: 1 / -1; margin: 0; }
  .pl-money { height: 38px; }
  .pl-qbets { margin: 0; gap: 4px; }
  .pl-qbets button { height: 38px; min-width: 44px; padding: 0 8px; font-size: 12px; }
  /* Порядок на телефоне: риск, ползунки, ставка, потом суммы и «Играть». */
  .pl-card:has(.pl-risks) { order: 1; }
  .pl-card:has(.pl-range) { order: 2; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) { order: 3; }
  .pl-panel > .pl-sums { order: 4; }
  .pl-panel > .pl-play { order: 5; }
  .pl-panel > .pl-hint { order: 6; }
  .pl-panel > .pl-fair { order: 7; }

  /* ─── МИНЕР В ОДИН ЭКРАН ───
     Поле меньше, панель — один блок в стиле сайта; порядок тот же, что
     на десктопе: баланс, мины, сумма, «Играть». */
  .mn-page { gap: 8px; }
  .mn-main { gap: 6px; }
  .mn-boardwrap { padding: 10px; }
  /* .mn-boardwrap впереди ради силы селектора: ниже общее правило полей
     игр ставит .mn-board во всю ширину. */
  .mn-boardwrap .mn-board { width: min(100%, 240px); gap: 5px; }
  .mn-ladder { margin-top: 6px; }
  .gm-body .mn-panel {
    gap: 8px; position: static;
    padding: 10px 12px 12px;
    border: 0; border-radius: 16px;
    background: rgba(8, 10, 16, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .gm-body .mn-panel { gap: 6px; padding: 8px 10px 10px; }
  .mn-title { font-size: 16px; }
  .mn-wallet { height: 44px; }
  .mn-bet, .mn-quick button { height: 38px; }
  .mn-wallet__txt b { font-size: 16px; }
  .mn-cap { margin: 2px 0 0; font-size: 10px; }
  /* мины — одной строкой: плитка с числом слева, шесть кнопок справа */
  .mn-minesrow { grid-template-columns: 56px minmax(0, 1fr); gap: 4px; }
  .mn-minepick { font-size: 14px; }
  .mn-panel .mn-mines { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .mn-mine { height: 34px; font-size: 12px; }
  .mn-bet { height: 40px; }
  .mn-quick button { min-width: 44px; height: 40px; padding: 0 8px; font-size: 13px; }
  .mn-panel .mn-go, .mn-panel .mn-take { height: 44px; }
  /* подсказки и Provably fair на телефоне не показываем — не помещаются */
  .mn-panel .mn-hint, .mn-panel .mn-fair { display: none; }

  /* риск: подпись и три кнопки в одной строке */
  .pl-card:has(.pl-risks) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .pl-card:has(.pl-risks) .pl-lab { margin: 0; }
  .pl-risk { height: 34px; font-size: 12px; }
  .pl-note { display: none; }
  /* ползунки: подпись слева, дорожка справа, две строки */
  .pl-card:has(.pl-range) { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; }
  .pl-card:has(.pl-range) .pl-lab { margin: 0; }
  .pl-lab--gap { margin-top: 0; }
  /* суммы — две строки в левой колонке, «Играть» — правая колонка */
  .pl-sums { display: grid; gap: 2px; padding: 4px 6px; height: 50px; align-content: center; }
  .pl-sums span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .pl-sums span:last-child { text-align: left; }
  .pl-sums i { font-size: 9px; }
  .pl-sums b { font-size: 13px; }
  .pl-play { height: 50px; font-size: 17px; }
  .pl-hint:empty, .pl-fair { display: none; }

  /* ═══════════ HILO ═══════════

     Игра была разложена на четыре плиты в три тысячи пикселей высотой:
     полоса раундов, стол с картой, «Сделать ставку», исходы со
     статистикой. Чтобы поставить, приходилось листать от карты к
     кнопкам и обратно, а исходы с их множителями лежали ниже экрана —
     то есть выбор делали вслепую.

     Теперь это одна панель: полоса раундов — её шапка, дальше стол,
     ставка и исходы. Отдельной остаётся только таблица чужих ставок:
     это список, а не орган управления, и место ему под игрой.

     Панель собрана из двух соседей — .hl-histbar и .hl-table, — а не
     обёрнута общим блоком: обёртку пришлось бы вставлять скриптом,
     который на широком экране её же и убирал бы. Здесь у первой скруглён
     верх, у второй низ, и стыка между ними нет. */
  /* Всё в один экран, как в плинко и минере: карта, ставка, «выше/ниже»
     и остальные исходы помещаются без прокрутки; ниже остаётся только
     список чужих ставок. Блок в стиле сайта — чёрный полупрозрачный. */
  .hl-page { gap: 0; padding-top: 8px; }
  .gm-body .hl-histbar {
    order: 1; margin: 0; padding: 0 0 8px; border: 0; background: none;
  }
  .hl-hist { min-height: 34px; }
  /* Стол без своей подложки: на телефоне игра лежит прямо на фоне
     страницы, блоком оформлены только карта и плитки. */
  .gm-body .hl-table {
    order: 2; padding: 0; gap: 6px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .hl-betsblock { order: 3; margin-top: 10px; }

  /* Внутренние рамки убираем: внутри общей панели они читались как
     отдельные карточки, ради чего панель и собиралась. */
  .hl-table .hl-betbox,
  .hl-table .hl-stats { border: 0; background: none; padding: 0; }
  /* games.css красит .hl-left и .hl-right как отдельные панели — внутри
     общего блока это ещё один чёрный прямоугольник за ставкой. Снимаем. */
  .gm-body .hl-table .hl-left, .gm-body .hl-table .hl-right {
    border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0;
  }
  .hl-left, .hl-right { gap: 6px; }
  .hl-left .hl-h2, .hl-fair, .hl-stats { display: none; }

  /* Стол: карта меньше, окно без лишних полей. */
  .hl-centre { min-height: 0; padding: 10px 10px 8px; gap: 6px; border-radius: 10px; }
  .hl-deck { --cw: min(104px, 28vw); }
  .hl-verdict { min-height: 18px; font-size: 15px; }

  /* Ставка: подпись, поле и быстрые кнопки — компактной колонкой. */
  .hl-lab { margin-bottom: 4px; font-size: 11px; }
  .hl-money { height: 38px; }
  .hl-qbets { margin-top: 6px; gap: 4px; }
  .hl-qbets button { height: 30px; font-size: 12px; }
  .hl-staked { padding: 4px 0; font-size: 12px; }
  .hl-hint:empty { display: none; }

  /* «Выше» и «ниже» — рядом в одной строке. */
  .hl-sides { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hl-sides .hl-t--hi, .hl-sides .hl-t--lo { padding: 8px 10px 9px; }
  .hl-sides .hl-t__m { font-size: 18px; }

  /* Остальные исходы — плитки по четыре в ряд, джокер на две клетки:
     семь исходов ложатся ровно в два ряда. */
  .hl-tiles { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .hl-tiles .hl-t { padding: 6px 7px 7px; gap: 1px; border-radius: 9px; }
  .hl-tiles .hl-t__top b { font-size: 10.5px; }
  .hl-tiles .hl-t__pl { display: none; }
  .hl-tiles .hl-t__m { font-size: 15px; }
  .hl-tiles .hl-t__p { font-size: 10px; }
  .hl-tiles .hl-t__mine { right: 6px; bottom: 5px; font-size: 10px; }
  .hl-t--joker { grid-column: span 2; }

  /* апгрейд: круг шанса сверху, инвентарь и таблицы ниже.
     Полоса вкладок вставляется скриптом и своего порядка не имеет —
     без него она всплывала в самый верх страницы, выше круга. */
  .up-head { order: 1; }
  .up-stage { order: 2; }
  .up-mtabs { order: 3; }
  .up-msrc { order: 4; }
  .up-tables { order: 5; }

  /* слот: барабаны сверху */
  .sl-stage { order: 1; }
  .sl-bar { order: 2; }
  .sl-pay { order: 3; }

  /* рулетка: история раундов над колесом, ставки под ним, игроки внизу */
  .cf-gamebar { order: 1; }
  .cf-toprow { order: 2; padding: 4px 0 2px; }
  .cf-wheel-wrap { order: 3; }
  .cf-betrow { order: 4; }
  .cf-zones { order: 5; }
  .cf-players { order: 6; }
  /* история — одной строкой с прокруткой вбок, статистика над ней */
  .cf-hist-block { width: 100%; min-width: 0; }
  .cf-history { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cf-history::-webkit-scrollbar { display: none; }
  /* ставки игроков: три группы в ряд, как на десктопе, чтобы цвет
     группы читался сразу; шапка компактная — иконка, под ней число
     игроков и сумма столбиком; строки уже и мельче */
  .cf-players { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cf-col { gap: 4px; min-width: 0; }
  .cf-col__head {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 6px; row-gap: 3px; align-items: center;
    height: auto; padding: 8px; font-size: 11px;
  }
  .cf-col__icon { width: 22px; height: 22px; }
  .cf-col__count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* сумма — второй строкой на всю ширину шапки, иначе с иконкой в одной
     строке она не помещалась и вылезала за блок */
  .cf-col__total { grid-column: 1 / -1; min-width: 0; font-size: 12px; overflow: hidden; }
  .cf-col__total .coin-ico { font-size: 13px; }
  .cf-col__list { max-height: 260px; overflow-y: auto; scrollbar-width: none; }
  .cf-col__list::-webkit-scrollbar { display: none; }
  .cf-prow { height: 34px; padding: 0 8px; gap: 6px; font-size: 11px; }
  .cf-av { width: 18px; height: 18px; }
  .cf-betbox { width: 100%; }
  .cf-money { height: 38px; }
  .cf-qbets { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .cf-chip { height: 32px; font-size: 12px; }

  /* Панели во всю ширину: фиксированные колонки в 320–360px на телефоне
     вылезали за край и давали горизонтальную прокрутку. */
  .cr-panel, .cfl-panel, .pl-panel, .mn-panel, .up-panel,
  .hl-betsblock, .sl-bar, .cf-betrow { width: 100%; min-width: 0; max-width: none; }

  /* ─── краш: слои поверх холста не должны налезать друг на друга ───
     На широком экране статистика слева, таймер по центру и наблюдение
     справа стоят в один ряд. На 375px их суммарная ширина больше экрана,
     и они наезжали: банк с числом игроков перекрывался множителем. */
  .cr-stats { left: 10px; top: 10px; gap: 4px; }
  .cr-stat { height: 34px; padding: 0 9px 0 8px; font-size: 11px; }
  .cr-watch { left: 10px; right: auto; top: 52px; height: 34px; }
  .cr-timer { top: 96px; }
  /* Обрыв: поле 270px, и счётчик со 96px наезжает на плашку по центру.
     На телефоне счётчик на время обрыва уходит, число показывает плашка. */
  .cr-panel[data-phase="over"] .cr-timer { display: none; }
  .cr-bust span { display: block; }
  .cr-history { left: 10px; right: 10px; }

  /* Поля игр вписываем в ширину экрана. */
  .cr-canvas, .pl-board, .mn-board, .sl-board, .cf-wheel-wrap, .hl-table {
    max-width: 100%; width: 100%;
  }
  .cfl-stage, .pl-stage, .up-stage { max-width: 100%; }

  /* ─── слот ───
     Ширина автомата считается как «вся сцена минус 190px» — запас под
     боковые отступы в 84px с каждой стороны. На 375px от неё оставалось
     113px: название обрезалось, барабаны превращались в марки. Убираем
     отступы и отдаём автомату всю ширину. */
  .sl-stage {
    padding: 14px 10px 16px;
    --board-w: min(100%, calc((100dvh - 300px) * 1.2)) !important;
  }
  .sl-cabinet { width: 100%; padding: 10px; }

  /* ─── апгрейд ───
     Порядок как в привычных апгрейдерах: сверху круг шанса, под ним два
     блока рядом — что ставлю и на что меняю, — затем кнопка. Круг первым
     потому, что он и есть результат выбора: держать его под блоками
     значит прятать главное число под формой.

     Flex, а не grid с именованными областями: upgrade.css в своём блоке
     @media 720px задаёт детям order 1-2-3, и области конфликтовали с ним.
     Здесь порядок задаётся тем же свойством, что и там, поэтому побеждает
     последний подключённый файл — этот. */
  .up-duel {
    display: flex !important; flex-wrap: wrap;
    gap: 10px 8px; align-items: flex-start; justify-content: center;
  }
  /* Круг обязан остаться квадратом: с height:auto он схлопывался в ноль. */
  .up-dial {
    order: 0 !important; flex: 0 0 100%;
    width: min(220px, 62vw) !important; height: min(220px, 62vw) !important;
    margin: 0 auto;
  }
  .up-slot--stake  { order: 1 !important; }
  .up-slot--target { order: 2 !important; }
  .up-duel > .up-slot {
    flex: 1 1 0; min-width: 0; justify-self: auto;
    /* Оба блока одной высоты: «Цель не выбрана» переносилась на две
       строки, «Ставка пуста» помещалась в одну, и блоки различались на
       8px — соседние плиты выглядели съехавшими. */
    align-self: stretch;
  }
  .up-duel > .up-slot .up-slot__body { min-height: 96px; }

  /* Подпись пустой плиты осталась одной строкой — она и говорит, что
     сюда класть. Раньше здесь пряталось два абзаца: заголовок и пояснение
     под ним забирали высоту и различались длиной у соседних плит. */
  .up-slot__empty b { font-size: 11px; letter-spacing: .05em; }
  .up-slot__ghost { width: 80px; }

  /* Кнопка действия во всю ширину, «турбо» под ней — как в референсе,
     где «Прокачать» занимает всю строку. */
  .up-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .up-go { flex: 1 1 100%; }
  /* Кнопка турбо-режима на телефоне убрана: она висела отдельной плиткой
     под основной кнопкой и читалась как второе, непонятное действие. */
  .up-turbo { display: none; }
  /* Порядок внутри сцены как в референсе: круг, два блока, кнопка.
     Быстрые множители уходят под кнопку — это подсказка, а не шаг
     основного пути. */
  .up-stage { display: flex; flex-direction: column; }
  .up-duel { order: 1; }
  .up-actions { order: 2; }
  /* Ряд множителей ×1.5 … ×20 на телефоне скрыт: он дублирует то, что
     и так задаётся выбором цели, и занимал строку под кнопкой. */
  .up-quick { display: none; }

  /* Вкладки складов (ставит kraze.mobile.js) */
  /* без width: 100% — ширину задаёт margin в блоке карточки ниже,
     иначе плашка растягивалась на весь блок и вылезала за поля */
  .up-mtabs { display: flex; gap: 4px; }
  .up-mtab {
    flex: 1; height: 42px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--text-mute);
    font: inherit; font-size: 13px; font-weight: 700;
    transition: background-color .14s, color .14s;
  }
  /* Уровень 1 — текстовые вкладки, активная просто ярче: так в образце,
     и так они не спорят с жёлтыми пилюлями уровня 2 под ними. */
  .up-mtab.is-on { background: var(--panel-3); color: var(--text); }

  /* Уровень 2 — источник цели, жёлтая пилюля у активного */
  .up-msrc { order: 4; display: flex; flex-wrap: wrap; gap: 6px; }
  .up-msrc[hidden] { display: none !important; }
  .up-mpill {
    height: 34px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--panel-3); color: var(--text-dim);
    font: inherit; font-size: 13px; font-weight: 700;
    transition: background-color .14s, color .14s;
  }
  .up-mpill.is-on { background: var(--accent); color: #14160A; }
  .up-shelf > [hidden] { display: none !important; }

  /* Шапка склада: значок, название и фильтр в одну строку не влезают —
     строка вырастала до 398px при окне 375 и уезжала за край. Фильтр
     переносим на свою строку: поле названия во всю ширину, «от» и «до»
     рядом. */
  .up-panel__head {
    width: 100%; max-width: 100%; box-sizing: border-box;
    flex-wrap: wrap; row-gap: 8px; overflow: hidden;
    /* Своя заливка и линия снизу здесь лишние: панель уже лежит внутри
       общей карточки страницы, и шапка со своим фоном читалась как
       вставленный чужой блок, к тому же не во всю ширину. */
    background: transparent; border-bottom: 0; padding: 12px 0 10px;
  }

  /* Карточки скинов мельче: по две в ряд они занимали пол-экрана каждая.
     Три в ряд — и список видно, а не два предмета. Вид карточки общий,
     как в инвентаре краша (см. home.css). */
  .up-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .up-tile { padding: 5px 4px 4px; }
  .up-tile__weapon { font-size: 10px; }
  .up-tile__finish { font-size: 11px; }
  .up-tile__price { font-size: 11px; }
  .up-filter {
    flex: 1 1 100%; width: 100%; min-width: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .up-filter > :first-child { grid-column: 1 / -1; }
  .up-filter input, .up-filter label, .up-filter > * { min-width: 0; width: 100%; box-sizing: border-box; }

  /* ─── всё одним блоком ───
     На широком экране сцена, склады и история — самостоятельные карточки
     в ряд. На телефоне они выстраиваются друг под другом, и три рамки
     подряд читаются как три разных раздела, хотя это один экран одной
     игры. Рамку, фон и тень оставляем ТОЛЬКО у страницы, а внутренним
     блокам снимаем — получается одна карточка с разделителями. */
  /* Фон только наш — камуфляж страницы. Собственная заливка карточки и
     затемняющая плёнка сцены давали поверх него ещё два полупрозрачных
     слоя, и узор превращался в мутное пятно. Остаются рамка и скругление:
     они держат раздел одним блоком, ничего не перекрывая. */
  /* Без скругления: карточка раздела идёт во всю ширину экрана, и
     закруглённые углы у края отрезали от неё уголки, а сверху под шапкой
     давали заметный изгиб. Прямые края читаются как продолжение экрана. */
  .up-page {
    border: 1px solid var(--line); border-radius: 0;
    background: transparent; overflow: hidden;
    padding: 0; gap: 0;
  }
  .up-stage__bg, .up-stage__tint { display: none !important; }
  /* Собственный кадр раздела (assets/upgrade_page_bg.webp) рисуется двумя
     слоями на самой странице. На телефоне он перекрывал камуфляж своим
     фиолетово-зелёным небом. */
  .up-page::before, .up-page::after { display: none !important; }
  /* Размытие сцены без фона размывало то, что под ней, — камуфляж
     превращался в кашу. */
  .up-stage { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

  /* Плашка честной игры теперь без подложки и на широком экране
     (см. upgrade.css) — правило про срезанные углы стало лишним. */
  .up-stage {
    margin: 0; border: 0; border-radius: 0; background: transparent;
    padding: 16px 12px 14px;
  }
  /* Строка «выигрыш вернёт … при ставке …» на телефоне убрана: те же два
     числа стоят прямо под предметами, на плитах ставки и цели. */
  .up-note { display: none; }
  /* ─── ОДИН БЛОК ПОД КНОПКОЙ ───

     Всё, что ниже «Апгрейда», — это один инструмент: чем платим, откуда
     берём, что берём. Тремя отдельными плашками он читался как три
     несвязанные полосы, и взгляд каждый раз заново искал, где начинается
     список. Собираем в одну карточку: у верхней части скруглён верх, у
     нижней — низ, границы между ними нет.

     Порядок внутри карточки сверху вниз:
       вкладки     — что набираем: свою ставку или цель;
       пилюли      — откуда берём ставку: склад или магазин;
       список      — сами предметы с шапкой и листалкой. */
  .up-mtabs {
    margin: 12px 12px 0; padding: 10px 10px 8px;
    border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0;
    background: var(--panel); box-shadow: none;
  }
  .up-msrc {
    margin: 0 12px; padding: 0 10px 10px;
    border: 1px solid var(--line); border-top: 0; border-bottom: 0; border-radius: 0;
    background: var(--panel);
  }
  /* Заливка возвращена сюда из games.css: там её сняли с .up-tables ради
     широкого экрана (сетка закрашивала скруглённые углы панелей внутри),
     а на телефоне панели прозрачные и весь тёмный фон списков держит
     именно она. Верхняя волосяная линия отделяет управление от содержимого
     внутри одной карточки — это разделитель, а не край блока. */
  .up-tables {
    margin: 0 12px 16px; padding: 0 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .up-tables > .up-panel {
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  .up-tables { display: block !important; }
  .up-tables > .up-panel[hidden] { display: none !important; }

  /* ─── коинфлип ───
     Сцена с монетой держала ширину левой колонки (202px) и жалась к
     краю, оставляя половину экрана пустой. Верхняя полоса с балансом и
     названием не помещалась в строку и обрезалась справа. */
  .cfl-main, .cfl-stage { width: 100%; max-width: none; }
  .cfl-stage { margin: 0 auto; }
  .cfl-top {
    display: flex; flex-wrap: wrap; gap: 8px; row-gap: 6px;
    width: 100%; min-width: 0; padding: 0;
  }
  .cfl-top > * { min-width: 0; }

  /* ═══════════ ФИЛЬТРЫ ═══════════

     Панели фильтров в кейсах и баттлах на телефоне открывались поверх
     содержимого во весь экран: раздел начинался с формы, а не с товара.
     Состоянием управляет класс is-folded на странице (cases.list.js,
     battles.lobby.js) — на телефоне его ставит kraze.mobile.js, а здесь
     свёрнутая панель просто убирается из потока.

     У Market своей кнопки сворачивания нет, поэтому его фильтр не
     прячется, а уезжает под товар. */

  .cx-page, .bt-page, .mk-page { grid-template-columns: minmax(0, 1fr); }

  .cx-page.is-folded .cx-filter,
  .bt-page.is-folded .bt-filters { display: none !important; }

  /* Шапка батлов: заголовок в одну строку, «Честная игра» убрана — на
     телефоне вместе с кнопкой она не помещалась и уезжала за край. */
  .bt-top { gap: 10px; }
  .bt-title { gap: 8px; min-width: 0; }
  .bt-title__badge { width: 28px; height: 28px; }
  .bt-title h1 { font-size: 16px; white-space: nowrap; }
  .bt-fair { display: none; }
  .bt-top__tools { gap: 8px; flex: none; }
  .bt-btn--create { height: 42px; padding: 0 16px; font-size: 13px; }
  .bt-iconbtn--filters { width: 42px; height: 42px; }

  /* Развёрнутая панель на телефоне — во всю ширину, а не плавающей
     колонкой поверх содержимого.

     order: -1 обязателен. В колонке панель — последний элемент сетки, и
     без него она вставала ПОД списком, а список длиной в три экрана:
     нажимаешь «Фильтры», панель честно разворачивается за две с
     половиной тысячи пикселей ниже, и кнопка выглядит сломанной. */
  .cx-filter, .bt-filters {
    position: static !important; width: 100% !important;
    max-width: none; transform: none !important; opacity: 1 !important;
    order: -1;
  }

  .mk-filters { position: static; width: 100%; order: 2; }
  .mk-col-main { order: 1; }

  /* ═══════════ КЕЙС: ВЫИГРЫШ ═══════════

     Слой с выпавшими предметами лежит абсолютом поверх ленты — то есть
     ростом с ленту, 252px. Карточки в нём были шириной 156px и вставали
     по две в ряд: при открытии пяти кейсов слой вырастал до 587px и
     вылезал за ленту вверх и вниз, накрывая кнопку «Открыть за» и
     заголовок содержимого. Это и была каша на экране.

     Три колонки вместо двух и карточка вдвое ниже: пять предметов
     умещаются в две строки внутри ленты. Прокрутка у сетки — на случай,
     если предметов станет больше, чем строк. */
  .cs-overlay { padding: 5px; gap: 4px; justify-content: flex-start; overflow: hidden; }
  .cs-prizes {
    /* auto-fit, а не жёсткие три колонки: один выпавший предмет иначе
       прижимался к левому верхнему углу ленты. Так ряд всегда по центру,
       сколько бы их ни было. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 100px));
    justify-content: center; gap: 4px;
    /* max-content обязателен: у сетки задана высота, и на строках auto
       браузер ужимал их до неё — карточка обрезалась ровно по кнопкам
       «Продать» и «Оставить», а у неё overflow: hidden. Пусть лучше
       прокрутится сетка, чем пропадут кнопки. */
    grid-auto-rows: max-content;
    /* safe center: обычно ряды стоят по центру ленты, но если предметов
       станет больше, чем помещается, центрирование уводит первый ряд
       выше края прокрутки — safe в этом случае возвращает start. */
    width: 100%; flex: 1; min-height: 0; overflow-y: auto; align-content: safe center;
  }
  .cs-prize { width: auto; padding: 4px 4px 5px; gap: 0; border-radius: 9px; }
  .cs-prize img { height: 30px; }
  .cs-prize b { font-size: 10px; line-height: 1.15; }
  .cs-prize u { font-size: 9px; }
  .cs-prize__sum { margin-top: 1px; font-size: 11px; }
  .cs-prize__act { gap: 3px; margin-top: 3px; }
  .cs-prize__act button { height: 20px; font-size: 10px; padding: 0; }
  .cs-prize__stamp { height: 20px; font-size: 10px; margin-top: 3px; }
  /* «Продать всё» не уезжает вместе с сеткой: она под ней и не сжимается. */
  .cs-result { flex: none; }
  .cs-sell-all { height: 26px; padding: 0 12px; font-size: 11px; }

  /* ═══════════ СЕТКИ ═══════════ */

  .cs-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-page .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-inv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-top { grid-template-columns: minmax(0, 1fr); }
  .ks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 190px; }
  .cr-inv__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ═══════════ ОБЩЕЕ ═══════════ */

  /* Ничто не должно вылезать за край окна: на телефоне это даёт
     горизонтальную прокрутку всей страницы. */
  html, body { overflow-x: hidden; }
  main { padding-left: 12px; padding-right: 12px; }
}