/* =========================================================================
   Galaxy 71 — мобильная оболочка (Ф1). Активна ТОЛЬКО ≤768px.
   Десктоп (>768px) не затрагивается. Слой-оверлей поверх /play:
   меню-первым + нижний таб-бар. main.js/DOM не ломаем — только показываем.
   ========================================================================= */
/* База (любая ширина): мобильные элементы скрыты, пока не активирована оболочка.
   Защита, чтобы оверлей не появился на десктопе. */
.m-top, .m-menu, .m-map-top, .m-tabbar, .m-langpop, .m-screen, .m-starov { display: none; }
.m-tile-price { display: none; }  /* показывается только на плитке витрины ≤768px (см. ниже) */

@media (max-width: 768px) {
  body.m-on.m-page-play { overflow: hidden; }   /* фуллскрин-карта только на /play */
  body.m-on .m-menu { display: block; }
  body.m-on .m-tabbar { display: flex; }
  body.m-on .m-top { display: flex; }

  /* app-страницы на _base (cabinet/craft/gallery): общий шелл поверх их контента */
  body.m-on.m-base .auth-topbar,
  body.m-on.m-base .auth-footer { display: none !important; }
  body.m-on.m-base .auth-main {
    padding-top: calc(52px + env(safe-area-inset-top) + 14px) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom) + 18px) !important;
    box-sizing: border-box;
  }
  /* убрать широкий grid .auth-main (кабинет 860px, крафт 280+340+1fr) → нет гориз. overflow + модули стопкой */
  body.m-on.m-base .auth-main { display: block !important; }
  /* модалки приложения (.dep-modal) — НАД шеллом (был z-1000) и ЖЁСТКО по центру */
  body.m-on .dep-modal { z-index: 2000 !important; }
  body.m-on .dep-modal .dep-card { max-width: 340px !important; box-sizing: border-box; }
  /* iOS не зумит поле ввода при фокусе, если шрифт ≥16px (иначе «крупнит» + сдвиг) */
  body.m-on .dep-modal input, body.m-on .dep-modal select, body.m-on .mk-price-inp, body.m-on .m-starov input { font-size: 16px !important; }

  /* спрятать десктоп-хром на телефоне */
  body.m-on .topbar,
  body.m-on .bottombar,
  body.m-on .debug-panel { display: none !important; }

  /* карта на весь экран под оболочкой */
  body.m-on .app { display: block; height: 100svh; }
  body.m-on .main { display: block; padding: 0; gap: 0; height: 100svh; }
  body.m-on .map-wrap { position: fixed; inset: 0; border-radius: 0; box-shadow: none; }
  body.m-on .sidebar { display: none !important; }

  /* ---------- общий верх ---------- */
  .m-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: 52px;
    display: flex; align-items: center; gap: 10px; padding: 0 14px;
    background: linear-gradient(180deg,#0d1220,#07090f); border-bottom: 1px solid #1e2634;
    padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
  .m-top .m-logo { font-weight: 800; color: #58a6ff; font-size: 16px; }
  .m-top .m-biz { background: linear-gradient(90deg,#1f6feb,#2ea043); color: #fff;
    font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
  .m-top .m-sp { flex: 1; }
  .m-top .m-lang { background: #0a0f18; border: 1px solid #1e2634; color: #e5e7eb;
    border-radius: 8px; padding: 6px 10px; font-size: 13px; min-height: 36px; }
  /* попап выбора языка */
  body.m-on .m-langpop { position: fixed; top: calc(48px + env(safe-area-inset-top)); right: 10px; z-index: 1400;
    display: none; background: #0d1424; border: 1px solid #1e2634; border-radius: 12px; padding: 6px;
    min-width: 124px; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
  body.m-on .m-langpop.show { display: block; }
  .m-langpop .m-langopt { display: block; padding: 11px 12px; color: #e5e7eb; text-decoration: none;
    border-radius: 8px; font-size: 14px; }
  .m-langpop .m-langopt.on { background: rgba(88,166,255,.15); color: #58a6ff; font-weight: 700; }
  .m-langpop .m-langopt:active { background: #1e2634; }

  /* ---------- меню-оверлей ---------- */
  .m-menu { position: fixed; left: 0; right: 0; z-index: 1100; overflow-y: auto;
    top: calc(52px + env(safe-area-inset-top));
    bottom: calc(60px + env(safe-area-inset-bottom));
    background: #05080d; padding: 16px 14px 24px; -webkit-overflow-scrolling: touch; }
  .m-menu.hidden { display: none; }
  .m-hello { font-size: 13px; color: #9ba3af; margin: 2px 0 14px; }
  .m-hello b { color: #e5e7eb; }
  .m-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; }
  .m-stat { background: #0d1424; border: 1px solid #1e2634; border-radius: 12px; padding: 10px 8px; text-align: center; }
  .m-stat .l { font-size: 9px; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; }
  .m-stat .v { font-size: 17px; font-weight: 800; margin-top: 3px; }
  .m-stat .v.cool { color: #3fb950; } .m-stat .v.hot { color: #f0b300; }
  .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .m-card { display: flex; flex-direction: column; gap: 6px; min-height: 104px; justify-content: center;
    background: #0d1424; border: 1px solid #1e2634; border-radius: 16px; padding: 16px;
    text-decoration: none; color: #e5e7eb; }
  .m-card:active { transform: scale(.98); }
  .m-card .ic { font-size: 30px; line-height: 1; }
  .m-card .ti { font-size: 16px; font-weight: 700; }
  .m-card .su { font-size: 12px; color: #9ba3af; }
  .m-card.map { grid-column: 1 / -1; min-height: 84px; flex-direction: row; align-items: center; gap: 14px;
    background: linear-gradient(135deg,#13233f,#0a1426); border-color: #244; }
  .m-card.map .ic { font-size: 34px; }
  .m-card.cab .ti { color: #8ab4ff; } .m-card.craft .ti { color: #ffd369; } .m-card.show .ti { color: #ff8ab4; }
  .m-logout { margin: 18px auto 0; display: block; background: transparent; border: 1px solid #1e2634;
    color: #9ba3af; border-radius: 10px; padding: 10px 18px; font-size: 13px; }

  /* ---------- режим КАРТА: иммерсивно, БЕЗ нижнего таб-бара (как в мокапе) ---------- */
  body.m-on.m-map .m-menu { display: none; }
  body.m-on.m-map .m-top { display: none; }
  body.m-on.m-map .m-tabbar { display: none; }   /* на карте нижнего меню нет */
  body.m-on:not(.m-map) .map-wrap { visibility: hidden; }  /* в меню карту не показываем */
  .m-map-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; display: none;
    align-items: center; gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top));
    background: linear-gradient(180deg,rgba(3,5,9,.85),transparent); }
  body.m-on.m-map .m-map-top { display: flex; }
  .m-mbtn { background: rgba(13,20,36,.92); border: 1px solid #1e2634; color: #e5e7eb;
    border-radius: 9px; width: 38px; height: 38px; min-width: 38px; font-size: 16px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; }
  .m-mode { display: flex; background: rgba(13,20,36,.92); border: 1px solid #1e2634; border-radius: 9px; overflow: hidden; height: 38px; }
  .m-mode button { background: none; border: 0; color: #9ba3af; padding: 0 10px; height: 38px; font-size: 12px; font-weight: 600; }
  .m-mode button.on { background: #58a6ff; color: #06101f; }
  .m-mode button.on.click { background: #f0b300; color: #1a0c00; }

  /* ---------- нижний таб-бар ---------- */
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; height: 60px;
    display: flex; border-top: 1px solid #1e2634; background: #070b13;
    padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); }
  .m-tab { flex: 1; background: none; border: 0; color: #6b7280; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; min-height: 44px; }
  .m-tab .ic { font-size: 21px; line-height: 1; }
  .m-tab.active { color: #58a6ff; }

  /* ---------- мобильный контент-экран (cabinet и др.) ---------- */
  body.m-on .m-screen { display: block; position: fixed; left: 0; right: 0;
    top: calc(52px + env(safe-area-inset-top)); bottom: calc(60px + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch; background: #05080d; padding: 16px 14px 24px; }
  body.m-on.m-page-cab .cab-card,
  body.m-on.m-page-cab .nft-aside { display: none !important; }

  .m-balcard { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,#13233f,#0a1426);
    border: 1px solid #244; border-radius: 16px; padding: 16px; margin-bottom: 14px; }
  .m-balcard .l { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; }
  .m-balcard .v { font-size: 26px; font-weight: 800; color: #f0b300; }
  .m-balcard .m-dep { margin-left: auto; background: #3fb950; color: #04140a; border: 0; border-radius: 10px;
    padding: 12px 16px; font-size: 14px; font-weight: 700; min-height: 44px; }
  .m-subtabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px; }
  .m-subtabs .m-stab { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #0d1424;
    border: 1px solid #1e2634; color: #9ba3af; border-radius: 12px; padding: 7px 3px; font-size: 11px; line-height: 1.1; min-height: 48px; }
  .m-subtabs .m-stab .i { font-size: 17px; line-height: 1; }
  .m-subtabs .m-stab.active { background: #58a6ff; color: #06101f; border-color: #58a6ff; font-weight: 700; }
  .m-pane[hidden] { display: none; }
  .m-empty { color: #6b7280; text-align: center; padding: 30px 10px; font-style: italic; font-size: 13px; }
  .m-stargrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-startile { background: #0d1424; border: 1px solid #1e2634; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
  .m-startile .m-rb { align-self: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; background: rgba(154,166,178,.15); color: #9aa6b2; }
  .m-startile .m-nm { font-size: 14px; font-weight: 700; color: #e5e7eb; }
  .m-startile .m-ch { font-size: 11px; color: #6b7280; font-family: monospace; }
  .m-r-common { background: rgba(154,166,178,.15); color: #9aa6b2; }
  .m-r-uncommon { background: rgba(63,185,80,.15); color: #3fb950; }
  .m-r-rare { background: rgba(88,166,255,.15); color: #58a6ff; }
  .m-r-epic { background: rgba(163,113,247,.15); color: #a371f7; }
  .m-r-legendary { background: rgba(240,179,0,.15); color: #f0b300; }
  .m-r-mythic { background: rgba(255,110,199,.15); color: #ff6ec7; }
  .m-r-grand { background: rgba(255,77,109,.15); color: #ff4d6d; }
  .m-invrow { display: flex; align-items: center; justify-content: space-between; background: #0d1424; border: 1px solid #1e2634; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; color: #e5e7eb; }
  .m-invrow .m-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }
  .m-invrow b { font-size: 16px; }
  .m-txrow { background: #0d1424; border: 1px solid #1e2634; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
  .m-txrow .top { display: flex; justify-content: space-between; align-items: center; }
  .m-txrow .m-sum { font-weight: 800; } .m-txrow .m-sum.pl { color: #3fb950; } .m-txrow .m-sum.mn { color: #ff8ab4; }
  .m-txrow .m-date { font-size: 11px; color: #6b7280; margin-top: 3px; }
  .m-txbadge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(88,166,255,.12); color: #8ab4ff; }
  .m-prow { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #1e2634; font-size: 14px; gap: 12px; }
  .m-prow .k { color: #9ba3af; flex: 0 0 auto; } .m-prow .v { color: #e5e7eb; font-weight: 600; text-align: right; }
  .m-profbtns { display: flex; gap: 8px; margin-top: 14px; }
  .m-profbtns button { flex: 1; background: #0d1424; border: 1px solid #1e2634; color: #e5e7eb; border-radius: 10px; padding: 12px; font-size: 13px; min-height: 44px; }

  .m-subtabs.m-subtabs-3 { grid-template-columns: repeat(3,1fr); }
  /* фильтр-чипсы редкости (в Звёздах) */
  .m-rchips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; scrollbar-width: none; }
  .m-rchips::-webkit-scrollbar { display: none; }
  .m-rchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: #0d1424; border: 1px solid #1e2634;
    color: #cdd6e0; border-radius: 20px; padding: 8px 12px; font-size: 13px; min-height: 40px; white-space: nowrap; }
  .m-rchip .dot { width: 9px; height: 9px; border-radius: 50%; }
  .m-rchip i { font-style: normal; color: #6b7280; font-size: 12px; }
  .m-rchip.active { background: #58a6ff; color: #06101f; border-color: #58a6ff; font-weight: 700; }
  .m-rchip.active i { color: #06101f; }
  /* модалка карточки звезды */
  body.m-on .m-starov { display: none; position: fixed; inset: 0; z-index: 1500; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding: 16px; }
  body.m-on .m-starov.show { display: flex; }
  .m-starov-bd { position: fixed; inset: 0; background: rgba(4,5,12,.82); backdrop-filter: blur(3px); }
  .m-starov-x { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 3; width: 40px; height: 40px;
    border-radius: 50%; background: rgba(13,20,36,.95); border: 1px solid #1e2634; color: #e5e7eb; font-size: 22px; }
  /* margin:auto в flex-контейнере центрирует и НЕ режет верх при скролле; без overflow на body — рамка/свечение целые */
  .m-starov-body { position: relative; z-index: 1; margin: auto; max-width: 300px; width: 100%; }
  .m-starov-body #nft-preview-stack { display: block !important; }
  .m-starov-body #nft-preview-stack .nft-card { width: 100%; max-width: 300px; margin: 0 auto 12px; }

  /* ---------- мобильный Крафт: те же реальные элементы в мобильной раскладке ---------- */
  body.m-on.m-page-craft .tier-tabs-v { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
  body.m-on.m-page-craft .tier-tabs-v::-webkit-scrollbar { display: none; }
  body.m-on.m-page-craft .tier-tabs-v .tier-tab { flex: 0 0 auto; white-space: nowrap; }
  body.m-on.m-page-craft .cards-grid { grid-template-columns: 1fr 1fr !important; }
  body.m-on.m-page-craft .cab-card { margin-bottom: 14px; }
  /* слоты «На крафт» — компактная сетка, заполняют ряд (было 140-200px вразнобой) */
  body.m-on.m-page-craft .craft-slots { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
  body.m-on.m-page-craft .craft-slot,
  body.m-on.m-page-craft .craft-card-filled { width: auto !important; height: auto !important; aspect-ratio: 3 / 4; min-width: 0; }

  /* ---------- мобильная Витрина ---------- */
  /* убить горизонтальный overflow (страницу ужимало/зумило) — клампим контейнеры по ширине экрана */
  body.m-on.m-page-show .gallery-wrap, body.m-on.m-page-show .stars-row,
  body.m-on.m-page-show .filter-side, body.m-on.m-page-show .stars-content,
  body.m-on.m-page-show .auth-card { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  /* обрезку только на внешнем + боковые отступы, чтобы цветные рамки/свечение карт не резались по краю */
  body.m-on.m-page-show .gallery-wrap { overflow-x: hidden; padding-left: 12px !important; padding-right: 12px !important; }
  /* фильтр-чипсы + карты-плитки */
  body.m-on.m-page-show .tier-tabs-v { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
  body.m-on.m-page-show .tier-tabs-v::-webkit-scrollbar { display: none; }
  body.m-on.m-page-show .tier-tabs-v .tier-tab { flex: 0 0 auto !important; width: auto !important; white-space: nowrap; }
  body.m-on.m-page-show .filter-side { width: auto !important; margin-bottom: 12px; }
  /* карты-ПЛИТКИ 2-в-ряд (визуал+имя); мета/кнопки скрыты — полная карточка по тапу (раскрытие) */
  body.m-on.m-page-show .cards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; min-width: 0; }
  body.m-on.m-page-show .cards-grid .card-mount,
  body.m-on.m-page-show .cards-grid .nft-card { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0; cursor: pointer; }
  body.m-on.m-page-show .cards-grid .nft-card-visual,
  body.m-on.m-page-show .cards-grid .nft-card canvas { width: 100% !important; min-width: 0 !important; height: auto !important; }
  body.m-on.m-page-show .cards-grid .nft-card-meta,
  body.m-on.m-page-show .cards-grid .nft-card-actions,
  body.m-on.m-page-show .cards-grid .nft-card-action-row,
  body.m-on.m-page-show .cards-grid .mk-row,
  body.m-on.m-page-show .cards-grid .nft-card-brand { display: none !important; }
  /* плитка меньше → текст/бейдж/отступы пропорционально меньше (имя было 20px, info 18/20) */
  body.m-on.m-page-show .cards-grid .nft-card-name { font-size: 13px !important; line-height: 1.25 !important; margin: 0 !important; }
  body.m-on.m-page-show .cards-grid .nft-card-info { padding: 10px 12px 12px !important; }
  body.m-on.m-page-show .cards-grid .nft-rarity-badge { font-size: 8.5px !important; padding: 4px 9px !important; letter-spacing: .8px !important; }
  body.m-on.m-page-show .cards-grid .nft-card-visual .nft-rarity-badge { top: 8px !important; left: 8px !important; }
  /* ценник «на продаже» под именем (variant B 2026-06-09) — только на плитке грида */
  body.m-on.m-page-show .cards-grid .m-tile-price { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
  body.m-on.m-page-show .cards-grid .m-tile-price .p { font-size: 14px; font-weight: 800; color: #22c55e; }
  body.m-on.m-page-show .cards-grid .m-tile-price .tag { font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #22c55e; background: rgba(34,197,94,.14); padding: 2px 6px; border-radius: 5px; }
  /* карта в модалке (как в ЛК) — полная, по центру */
  .m-starov-body .nft-card, .m-starov-body .card-mount { width: 100% !important; max-width: 300px !important; min-width: 0 !important; margin: 0 auto; }
}