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

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

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

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

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

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

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

@media (max-width: 760px) {

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

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

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

  .kz-burger {
    margin-left: auto; flex: none;
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: var(--panel-3); color: var(--text);
    display: grid; place-content: center; gap: 4px; cursor: pointer;
  }
  .kz-burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

  /* Баланс остаётся в строке — он нужен всегда, но мельче. */
  .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; }
  .kz-burger { order: 3; margin-left: 0; }

  /* ─── выдвижная панель ─── */

  .kz-drawer {
    position: fixed; z-index: 200; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--panel); border-left: 1px solid var(--line);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .6);
    display: flex; flex-direction: column;
    animation: kz-drawer-in .22s cubic-bezier(.3, 1, .4, 1);
  }
  @keyframes kz-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
  .kz-drawer__back { position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, .55); }
  body.is-drawer { overflow: hidden; }
  /* У панели задан свой display, а он сильнее браузерного [hidden] —
     без !important она открыта сразу при загрузке страницы. */
  .kz-drawer[hidden], .kz-drawer__back[hidden] { display: none !important; }

  .kz-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .kz-drawer__x {
    width: 40px; height: 40px; border: 0; background: none;
    color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer;
  }
  .kz-drawer__body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }

  /* меню внутри панели — столбиком, крупными строками */
  .kz-drawer .kz-nav { display: flex; flex-direction: column; gap: 2px; width: 100%; }
  .kz-drawer .kz-nav > li { width: 100%; }
  .kz-drawer .kz-nav a, .kz-drawer .kz-nav > li > button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 46px; padding: 0 12px; border-radius: 10px; font-size: 15px;
  }
  .kz-drawer .kz-nav a:hover, .kz-drawer .kz-nav > li > button:hover { background: var(--panel-3); }

  /* правая группа шапки: кошелёк и вход — в столбик */
  .kz-drawer .kz-header__end {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    width: 100%; margin: 0; position: static;
  }
  .kz-drawer .kz-wallet { display: flex; height: auto; flex-wrap: wrap; padding: 10px; }
  .kz-drawer .kz-wallet .kz-btn { display: inline-flex; flex: 1; }
  .kz-drawer .kz-btn--steam, .kz-drawer .kz-btn--ghost, .kz-drawer .kz-btn--accent { width: 100%; }
  .kz-drawer .kz-acct { position: static; width: 100%; box-shadow: none; }

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

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

  /* Баннер: min-height 420px оставляла под кадром triста пикселей пустоты —
     на телефоне картинка высотой всего 126. Плюс отрицательный отступ
     -86px поднимал баннер под ряд разделов, а ряд на телефоне скрыт, и
     кадр уезжал под шапку. */
  .gg-banner { min-height: 0 !important; height: auto; margin-top: 0; 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; }
  .cr-row { display: flex; flex-direction: column; }
  .cr-game { order: 1; }
  .cr-side { order: 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; }

  /* HiLo: карты сверху, ставки под ними */
  .hl-histbar { order: 1; }
  .hl-table { order: 2; }
  .hl-betsblock { order: 3; }

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

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

  /* рулетка: колесо сверху, ставки под ним */
  .cf-gamebar { order: 1; }
  .cf-wheel-wrap { order: 2; }
  .cf-betrow { order: 3; }
  .cf-zones { order: 4; }
  .cf-toprow { order: 5; }
  .cf-players { order: 6; }

  /* Панели во всю ширину: фиксированные колонки в 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; }
  .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, .up-slot__empty em { display: none; }

  /* Кнопка действия во всю ширину, «турбо» под ней — как в референсе,
     где «Прокачать» занимает всю строку. */
  .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) */
  .up-mtabs {
    display: flex; gap: 4px; width: 100%; margin-bottom: 10px;
    padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  }
  .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: 3; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 12px 10px;
  }
  .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: 16px;
    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; }

  /* Плашка честной игры: срезанные углы (clip-path со скосом в 10px)
     на телефоне читались как обрубленный край блока. Делаем прямой
     прямоугольник со скруглением, как у остальных плашек. */
  .up-fairbtn { clip-path: none; border-radius: 10px; }
  .up-stage {
    margin: 0; border: 0; border-radius: 0; background: transparent;
    padding: 16px 12px 14px;
  }
  .up-mtabs {
    margin: 0; border: 0; border-radius: 0; background: transparent;
    padding: 10px 12px 6px;
  }
  .up-tables { padding: 0 12px 14px; }
  .up-tables > .up-panel {
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  .up-hist {
    margin: 0; border: 0; border-radius: 0; background: transparent;
    padding: 12px;
  }
  .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; }

  /* Развёрнутая панель на телефоне — во всю ширину, а не плавающей
     колонкой поверх содержимого. */
  .cx-filter, .bt-filters {
    position: static !important; width: 100% !important;
    max-width: none; transform: none !important; opacity: 1 !important;
  }

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

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

  .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; }
}