/* ════════════════════════════════════════════════════════════════
   Мобильный слой. Грузится ПОСЛЕДНИМ — переопределяет базу.
   Десктоп не трогает: всё либо no-op на мыши, либо под @media/.is-touch.
   ════════════════════════════════════════════════════════════════ */

/* Safe-area (челка, домашний индикатор) — как переменные, чтобы дальше
   использовать точечно в HUD, не сдвигая полноэкранный канвас. */
:root {
    --sa-top:    env(safe-area-inset-top, 0px);
    --sa-right:  env(safe-area-inset-right, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left:   env(safe-area-inset-left, 0px);
}

html, body {
    /* Гасит pull-to-refresh и «резинку» — иначе свайп в бою тянет страницу. */
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}

body {
    /* iOS: 100vh считается БЕЗ учёта адресной строки, поэтому низ уезжает
       под неё. dvh — честная динамическая высота. Где dvh не поддержан,
       правило игнорируется и остаётся 100vh из style.1-base.css. */
    height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Канвас забирает все жесты себе: без этого свайп скроллит страницу,
   а двойной тап зумит. Меню/списки НЕ трогаем — там скролл нужен. */
#gameCanvas {
    touch-action: none;
}

/* Тач-устройства: убираем hover-артефакты и мелкие тап-таргеты */
.is-touch button,
.is-touch .menu-btn {
    min-height: 44px;               /* минимальный комфортный тап-таргет */
}

/* ── Оверлей «поверни телефон» ─────────────────────────────────────
   Top-down танки в портрете нечитаемы: видно полторы клетки поля. */
.rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0e1108;
    padding: calc(16px + var(--sa-top)) calc(16px + var(--sa-right))
             calc(16px + var(--sa-bottom)) calc(16px + var(--sa-left));
}

.rotate-box {
    text-align: center;
    max-width: 320px;
}

/* Прямоугольник-«телефон», который поворачивается — вместо иконки-эмодзи */
.rotate-phone {
    width: 54px;
    height: 92px;
    margin: 0 auto 18px;
    border: 3px solid #c9b978;
    border-radius: 10px;
    animation: rotate-hint 2.2s ease-in-out infinite;
}

@keyframes rotate-hint {
    0%, 40%   { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
}

.rotate-text {
    font-size: 17px;
    line-height: 1.5;
    color: #d4cdb8;
}

.rotate-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #8a8570;
}

/* ── Подсказка про фуллскрин на iPhone ─────────────────────────────
   Fullscreen API в Safari на iPhone не существует: единственный путь —
   «Поделиться → На экран Домой». Показываем только там, где это нужно. */
.ios-install-hint {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #8a8570;
}

html.is-touch.is-ios:not(.is-standalone) .ios-install-hint {
    display: block;
}

/* В standalone (установлено на домашний экран) статус-бар прозрачный и
   контент уходит под него — поджимаем верхнюю панель на safe-area. */
html.is-standalone #globalTopbar {
    padding-top: var(--sa-top);
}

/* Редактор карт на телефоне не нужен: он рассчитан на мышь, точные клики
   по тайлам и большой экран. Кнопку показывает main.js по своим условиям,
   поэтому глушим её жёстко. */
html.is-touch #btnEditor { display: none !important; }

/* ── Скругления экрана ─────────────────────────────────────────────
   У iPhone углы дисплея закруглены, и элемент, прижатый вплотную к краю,
   срезается по диагонали. safe-area закрывает челку и home-индикатор, но
   на скруглениях нужен ещё небольшой запас, иначе углы интерфейса
   «подъедаются». */
html.is-touch .screen {
    padding-left: calc(var(--sa-left) + 6px);
    padding-right: calc(var(--sa-right) + 6px);
    padding-bottom: calc(var(--sa-bottom) + 4px);
}

/* ── Виртуальные стики ─────────────────────────────────────────────
   Слой не ловит события сам (pointer-events:none) — тачи слушает
   document в TouchControls.js, иначе слой перехватывал бы тапы по HUD. */
.tc-layer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    display: none;              /* включается только в бою (TouchControls) */
}

/* Базы видны ВСЕГДА, пока идёт бой: на пустом экране иначе непонятно,
   куда класть пальцы — стики «то есть, то нет» сбивают. */
.tc-stick {
    position: absolute;
    /* 2 × RADIUS из TouchControls.js — база совпадает с ходом стика */
    width: 136px;
    height: 136px;
    margin: 0;
    border-radius: 50%;
    border: 2px solid rgba(201, 185, 120, 0.28);
    background: rgba(20, 26, 18, 0.18);
    transition: border-color 0.15s, background 0.15s;
}

.tc-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: rgba(201, 185, 120, 0.55);
    border: 2px solid rgba(232, 222, 176, 0.8);
}

/* Правый стик — «боевой», подсвечиваем теплее, чтобы не путать половины */
.tc-aim { border-color: rgba(224, 150, 90, 0.5); }
.tc-aim .tc-knob {
    background: rgba(224, 150, 90, 0.55);
    border-color: rgba(245, 190, 140, 0.85);
}

/* ════════════════════════════════════════════════════════════════
   ЛАНДШАФТНЫЙ ТЕЛЕФОН: широко, но НИЗКО.
   Ловим по ВЫСОТЕ, а не по ширине: у айфона в ландшафте ширина
   844-1280px — для max-width-запросов это «десктоп», поэтому старые
   брейкпоинты не срабатывали. Реальный дефицит — вертикаль (~430px).
   ════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 620px) {

    /* ── Топбар: было 73px из 430 (17% экрана) → ужимаем вдвое ── */
    #globalTopbar,
    .menu-topbar {
        min-height: 40px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
    }
    .topbar-rank-emblem { width: 32px !important; height: 32px !important; }
    .topbar-callsign-text { font-size: 12px; }
    #globalTopbar > .topbar-xpbar { min-width: 130px !important; }
    .topbar-xpbar-text { font-size: 10px; }

    /* ── Горизонталь: min-width распирали колонки до 1120px при
         вьюпорте 932px, лишнее просто обрезалось (overflow:hidden). ── */
    .panel-battle    { min-width: 0; }
    .battle-showcase { min-width: 0; }
    .battle-settings { min-width: 0; }
    .panel-side {
        flex: 0 1 200px;
        min-width: 0;
        max-width: 200px;
    }

    /* ── Уплотняем отступы: на 430px высоты каждый пиксель на счету ── */
    .menu-columns { padding: 6px 8px; gap: 8px; }
    .battle-grid  { gap: 8px; }
    .menu-panel   { padding: 8px 10px; }

    /* ── Канвасы превью заданы фиксированными width/height в HTML.
         Без max-width они не ужимаются и вылезают за рамку. ── */
    #battleTankPreview,
    #battleMapPreviewCanvas {
        max-width: 100%;
        height: auto;
    }

    /* Мелкая типографика заголовков — иначе съедают вертикаль */
    .showcase-header,
    .side-block-title,
    .mode-label { font-size: 11px; }

    /* ── Баланс колонок боя. Дефолт: лобби жёстко 320px, из-за чего
         настройкам оставалось 158px и дропдауны схлопывались в «С…». ── */
    .battle-showcase { flex: 0 1 150px; }
    .battle-settings { flex: 1 1 200px; }
    .battle-lobby    { flex: 1 1 220px; }

    /* Рамка танка: min-height 220px не влезала в колонку 261px вместе
       с шапкой, подписью и кнопкой «В АНГАР» — танк вылезал наружу. */
    .showcase-frame { min-height: 0; }

    /* Панель боя переполнялась на 76px: разрешаем детям ужиматься. */
    .panel-battle { min-height: 0; }

    /* Метки лежат в grid-колонках. Перенос делал «РЕЖИМ / ИГРЫ» в две
       строки, а голый nowrap выталкивал текст в соседнюю колонку
       («РЕЖИМ ИГРЫТИП БОЯ»). Одна строка + аккуратное усечение. */
    .mode-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .custom-select { min-width: 0; }

    /* «В АНГАР» переносился на две строки и съедал вертикаль у превью */
    .btn-hangar {
        white-space: nowrap;
        padding: 6px 8px;
        font-size: 12px;
    }
    .showcase-label { font-size: 13px; }
    .showcase-sub   { font-size: 10px; }

    /* Освободившееся место отдаём танку — иначе превью схлопывается */
    .showcase-frame { min-height: 92px; }
}

/* ════════════════════════════════════════════════════════════════
   ГЛАВНЫЙ ЭКРАН НА ТЕЛЕФОНЕ — перекомпоновка, а не ужатие.
   Задача экрана на мобиле одна: быстро попасть в бой. Поэтому друзья
   и взвод уезжают в выдвижную панель, а освободившееся место получают
   танк, выбор боя и крупная кнопка. Всё под .is-touch — десктоп цел.
   ════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 620px) {

    /* Друзья/взвод — выдвижная панель слева вместо третьей колонки.
       Селектор с #mainMenu намеренно: у стенсильных оверрайдов фон задан
       через #mainMenu .menu-panel, и без ID наш фон проигрывал по
       специфичности — панель выезжала прозрачной. */
    html.is-touch #mainMenu .panel-side {
        position: fixed;
        left: 0;
        /* Начинаем ПОД топбаром: он fixed и выше по стеку, иначе заголовок
           «ДРУЗЬЯ» уезжал под него и обрезался. */
        top: calc(42px + var(--sa-top));
        bottom: 0;
        width: min(300px, 78vw);
        max-width: none;
        flex: none;
        z-index: 600;
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        padding: 10px 12px 12px calc(12px + var(--sa-left));
        box-shadow: 6px 0 26px rgba(0, 0, 0, 0.5);
        /* !important здесь вынужденно: стенсильные оверрайды задают
           «#mainMenu .menu-panel { background: transparent !important }»,
           и специфичностью это не перебить. В раскладке прозрачность
           уместна, но как оверлей поверх контента панель просвечивала
           насквозь и выглядела сломанной. */
        background: #141a12 !important;
        border-right: 1px solid #4a5a3a;
    }
    html.is-touch body.m-drawer #mainMenu .panel-side { transform: translateX(0); }

    html.is-touch #mainMenu .m-backdrop {
        position: fixed; inset: 0; z-index: 590;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0; pointer-events: none;
        transition: opacity 0.22s ease;
    }
    html.is-touch body.m-drawer #mainMenu .m-backdrop { opacity: 1; pointer-events: auto; }

    /* Кнопка вызова панели */
    html.is-touch .m-drawer-btn {
        position: fixed;
        left: calc(8px + var(--sa-left));
        top: calc(46px + var(--sa-top));
        z-index: 580;
        min-height: 44px;
        padding: 8px 12px;
        background: rgba(26, 36, 24, 0.92);
        color: #c9b978;
        border: 1px solid #4a5a3a;
        border-radius: 8px;
        font: 12px system-ui, sans-serif;
    }

    /* Освободившееся место — основному блоку */
    html.is-touch .panel-battle { flex: 1 1 auto; }

    /* Три колонки с человеческими пропорциями вместо давки. Лобби —
       фиксированное: там живёт главная кнопка, и в 150px она ломалась
       на две строки. */
    html.is-touch .battle-showcase { flex: 0 0 150px; }
    html.is-touch .battle-settings { flex: 1 1 auto; min-width: 0; }
    html.is-touch .battle-lobby    { flex: 0 0 232px; }

    /* Вертикаль в обрез: подрезаем то, что можно, без потери читаемости */
    html.is-touch .battle-map-preview { max-height: 84px; }
    html.is-touch .panel-battle > h3 { margin: 0 0 2px; font-size: 13px; }
    html.is-touch .menu-columns { padding-top: 4px; }
    html.is-touch .battle-grid { gap: 10px; }

    /* Главное действие экрана — крупно и заметно */
    html.is-touch #btnCreateBattle {
        min-height: 54px;
        font-size: 17px;
        letter-spacing: 1px;
    }

    /* Тач-таргеты: выпадающие списки и кнопки не меньше 44px */
    html.is-touch .custom-select-trigger,
    html.is-touch .custom-select-value,
    html.is-touch .btn { min-height: 44px; }
}

/* ── Совсем низкие экраны (iPhone 14/15 в ландшафте ≈390px и меньше).
     На 620px-брейкпоинте контент ещё переполнялся на ~16px. ── */
@media (orientation: landscape) and (max-height: 440px) {
    #globalTopbar,
    .menu-topbar { min-height: 34px !important; padding: 2px 6px !important; }
    .topbar-rank-emblem { width: 26px !important; height: 26px !important; }

    .menu-columns { padding: 4px 6px; gap: 6px; }
    .menu-panel   { padding: 6px 8px; }
    .battle-grid  { gap: 6px; }

    .showcase-frame { min-height: 72px; }
    .btn-hangar { padding: 4px 6px; font-size: 11px; }
    .showcase-header,
    .side-block-title,
    .mode-label { font-size: 10px; }

    .topbar-btn { font-size: 11px; }

    /* Заголовок «БИТВА» занимал 29px вертикали */
    .panel-battle > h3 { font-size: 12px; margin: 0 0 2px; }

    /* Подпись танка под превью */
    .showcase-info { gap: 0; }
    .showcase-label { font-size: 12px; }
    .showcase-sub { font-size: 9px; }

    /* Остаток контента (~16px) всё равно не влезает, а body{overflow:hidden}
       просто режет его. Даём панелям внутренний скролл — надёжнее, чем
       вылизывать пиксели под каждую модель телефона. */
    .panel-battle,
    .panel-side {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}