/* ════════════════════════════════════════════════════════════════
   Главный экран под телефон. Собственный каркас, не адаптация:
   десктопной шапки нет, три колонки не ужимаются, друзья живут в
   выезжающей панели. Всё под html.mm-on — класс ставит MobileMenu.js
   только на тач-устройствах, десктоп этих правил не видит вовсе.
   ════════════════════════════════════════════════════════════════ */

/* Десктопный каркас на мобиле не показываем — он заменён целиком */
html.mm-on #globalTopbar,
html.mm-on #mainMenu .menu-columns,
html.mm-on .m-drawer-btn { display: none !important; }

html.mm-on #mainMenu {
    padding: 0 !important;
    overflow: hidden;
}

.mm-root {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--sa-top) + 6px) calc(var(--sa-right) + 10px)
             calc(var(--sa-bottom) + 8px) calc(var(--sa-left) + 10px);
    gap: 8px;
}

/* ── Верхняя строка. Не шапка: тонкая полоса с позывным и иконками ── */
.mm-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 40px;
}

.mm-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mm-id .topbar-rank-emblem { width: 30px !important; height: 30px !important; flex: 0 0 auto; }
.mm-id .topbar-callsign { padding: 0 !important; background: none !important; border: 0 !important; }
.mm-id .topbar-callsign-text { font-size: 14px; }

.mm-spacer { flex: 1 1 auto; }

.mm-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
/* Кнопки навигации на телефоне — компактные плитки, не десктопные капсулы */
.mm-nav .topbar-btn,
.mm-nav .crystals-display,
.mm-nav .mm-friends-btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    white-space: nowrap;
}

.mm-friends-btn {
    background: rgba(26, 36, 24, 0.95);
    color: #c9b978;
    border: 1px solid #4a5a3a;
    letter-spacing: 0.5px;
}

/* ── Тело: карточка танка + карточка боя ── */
.mm-body {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    min-height: 0;
}

.mm-card {
    background: rgba(18, 26, 15, 0.72);
    border: 1px solid #3a4a2e;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mm-tank {
    flex: 0 0 34%;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mm-tank-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.mm-tank-view canvas { max-width: 100%; max-height: 100%; height: auto; }

.mm-tank-meta { text-align: center; line-height: 1.25; }
.mm-tank-meta .showcase-label { font-size: 15px; }
.mm-tank-meta .showcase-sub { font-size: 10px; opacity: 0.75; }

.mm-tank-act { width: 100%; }
.mm-tank-act .btn { width: 100%; min-height: 42px; font-size: 12px; white-space: nowrap; }

/* ── Карточка боя: поля сверху, крупная кнопка снизу ── */
.mm-battle { flex: 1 1 auto; gap: 8px; }

.mm-fields {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    align-content: start;
    overflow-y: auto;
}
/* Карта — во всю ширину, она важнее остальных полей */
.mm-fields .custom-select:first-child { grid-column: 1 / -1; }
.mm-fields .mode-label { font-size: 10px; letter-spacing: 0.5px; opacity: 0.8; }
.mm-fields .custom-select-trigger { min-height: 44px; }

/* Активные бои — вся карточка целиком, без сетки полей */
.mm-fields { display: flex; flex-direction: column; }

.mm-lobby {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mm-lobby .battle-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.mm-go { flex: 0 0 auto; }

/* ── Полноэкранное окно настроек боя ───────────────────────────────
   На телефоне выбор карты и режима — отдельный шаг, а не поля,
   зажатые рядом со списком боёв. */
.mm-create {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: none;
    flex-direction: column;
    background: #0e1108;
    padding: calc(var(--sa-top) + 10px) calc(var(--sa-right) + 14px)
             calc(var(--sa-bottom) + 12px) calc(var(--sa-left) + 14px);
}
body.mm-create-open .mm-create { display: flex; }

.mm-create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #c9b978;
    font-size: 14px;
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3a4a2e;
    flex: 0 0 auto;
}

.mm-create-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mm-create-body .battle-selectors {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mm-create-body .custom-select { width: 100%; min-width: 0; }
.mm-create-body .cs-trigger { min-height: 48px; width: 100%; font-size: 15px; }
.mm-create-body .mode-label { font-size: 11px; letter-spacing: 0.5px; }

.mm-create-foot { flex: 0 0 auto; padding-top: 10px; }
.mm-create-foot .btn { width: 100%; min-height: 56px; font-size: 18px; letter-spacing: 1.5px; }

/* Списки раскрываются ВНИЗ. В десктопной вёрстке .cs-panel открывается
   вверх (bottom: 100%), потому что там поля стоят внизу экрана — на
   телефоне в окне это уводило список за верхний край. */
.mm-create-body .cs-panel {
    top: calc(100% + 4px);
    bottom: auto;
    max-height: 46vh;
    overflow-y: auto;
    width: 100%;
}
.mm-go .btn {
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    letter-spacing: 1.5px;
}

/* ── Выезжающая панель друзей ── */
.mm-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 82vw);
    z-index: 700;
    display: flex;
    flex-direction: column;
    background: #141a12;
    border-left: 1px solid #4a5a3a;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55);
    transform: translateX(102%);
    transition: transform 0.22s ease;
    padding: calc(var(--sa-top) + 10px) calc(var(--sa-right) + 12px)
             calc(var(--sa-bottom) + 10px) 12px;
}
body.mm-panel-open .mm-panel { transform: translateX(0); }

.mm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #c9b978;
    font-size: 12px;
    letter-spacing: 1px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a4a2e;
}
.mm-panel-close {
    background: none;
    border: 0;
    color: #8a8570;
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
    min-height: 44px;
}

.mm-panel-body { flex: 1 1 auto; overflow-y: auto; padding-top: 8px; }
.mm-panel-body .side-block { margin-bottom: 14px; }

.mm-scrim {
    position: fixed;
    inset: 0;
    z-index: 690;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
body.mm-panel-open .mm-scrim { opacity: 1; pointer-events: auto; }

/* Портрет: карточки в столбик — рядом они становятся слишком узкими */
@media (orientation: portrait) {
    .mm-body { flex-direction: column; }
    .mm-tank { flex: 0 0 42%; }
}

/* ════════════════════════════════════════════════════════════════
   АНГАР ПОД ТЕЛЕФОН. Тот же принцип: свой каркас вместо десктопного.
   Пустой полосы под несуществующую шапку нет, припасы вынесены в
   выезжающую панель — на экране они не помещались.
   ════════════════════════════════════════════════════════════════ */
html.mh-on #garageScreen .hangar-panel,
html.mh-on #garageScreen .hangar-preview-zone,
html.mh-on #garageScreen .hangar-supplies-zone,
html.mh-on #garageScreen .hangar-bottom,
html.mh-on #garageScreen .hangar-bg,
html.mh-on #garageScreen .hangar-arena { display: none !important; }

html.mh-on #garageScreen {
    padding: 0 !important;
    overflow: hidden;
}

/* Канвас арены в десктопной вёрстке — absolute inset:0 на весь экран.
   Перенесённый в карточку он продолжал растягиваться и перекрывал весь
   каркас, поэтому загоняем его в поток контейнера. */
.mh-arena #hangarCanvas {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
}

.mh-root {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: calc(var(--sa-top) + 6px) calc(var(--sa-right) + 10px)
             calc(var(--sa-bottom) + 8px) calc(var(--sa-left) + 10px);
}

.mh-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 40px;
}
.mh-bar-left { display: flex; align-items: center; gap: 8px; }
.mh-bar .hangar-back-btn {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
}
.mh-crystals {
    color: #c9b978;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.mh-supplies-btn {
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 8px;
    background: rgba(26, 36, 24, 0.95);
    color: #c9b978;
    border: 1px solid #4a5a3a;
    white-space: nowrap;
}

.mh-body {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    min-height: 0;
}

/* Арена с вращающимся танком — левая треть, это витрина */
.mh-arena {
    flex: 0 0 36%;
    min-width: 0;
    border: 1px solid #3a4a2e;
    border-radius: 12px;
    background: rgba(18, 26, 15, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mh-arena canvas { max-width: 100%; max-height: 100%; display: block; }

.mh-side {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* Имя, звёзды, характеристики — компактной сводкой, без десктопных полей */
.mh-info {
    flex: 0 0 auto;
    background: rgba(18, 26, 15, 0.72);
    border: 1px solid #3a4a2e;
    border-radius: 12px;
    padding: 8px 10px;
    max-height: 34%;
    overflow-y: auto;
}
.mh-info .hangar-preview-name { font-size: 15px; }
.mh-info .hangar-preview-desc { font-size: 11px; opacity: 0.8; }
.mh-info .hangar-pane-title { font-size: 10px; letter-spacing: 0.5px; }

.mh-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.mh-actions > button {
    flex: 1 1 0;
    min-height: 46px;
    font-size: 13px;
}

/* Вкладки — сегментный переключатель, а не размазанный по ширине текст:
   на телефоне это привычный и попадаемый пальцем элемент. */
.mh-tabs { flex: 0 0 auto; }
.mh-tabs .hangar-tabs {
    display: flex;
    gap: 4px;
    background: rgba(18, 26, 15, 0.72);
    border: 1px solid #3a4a2e;
    border-radius: 10px;
    padding: 4px;
}
.mh-tabs .hangar-tab {
    flex: 1 1 0;
    min-height: 38px;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: #8a8570;
}
.mh-tabs .hangar-tab.active {
    background: #2f4326;
    color: #e8dfb0;
}

/* Карточки — горизонтальная лента с прокруткой пальцем */
.mh-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.mh-cards .item-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.mh-cards .item-cards > * { flex: 0 0 auto; }
.mh-cards .hangar-pane-hidden { display: none !important; }

/* Припасы — выезжающая панель справа */
.mh-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    z-index: 700;
    display: flex;
    flex-direction: column;
    background: #141a12;
    border-left: 1px solid #4a5a3a;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55);
    transform: translateX(102%);
    transition: transform 0.22s ease;
    padding: calc(var(--sa-top) + 10px) calc(var(--sa-right) + 12px)
             calc(var(--sa-bottom) + 10px) 12px;
}
body.mh-panel-open .mh-panel { transform: translateX(0); }
body.mh-panel-open .mh-root .mm-scrim { opacity: 1; pointer-events: auto; }

.mh-panel-body { flex: 1 1 auto; overflow-y: auto; padding-top: 8px; }

@media (orientation: portrait) {
    .mh-body { flex-direction: column; }
    .mh-arena { flex: 0 0 34%; }
}