/* ================================================================
   MOBILE.CSS — адаптация под телефоны (portrait ≤ 600px)
   Подключается ПОСЛЕ style.css, переопределяет только нужное.
   НЕ ТРОГАТЬ style.css — все мобильные правила только здесь.
   ================================================================ */

/* ================================================================
   ГЛОБАЛЬНЫЕ ФИКСЫ — работают на iOS и Android без media query
   ================================================================ */

/* Запрет pull-to-refresh и случайного скролла страницы (Android + iOS) */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    min-height: unset !important;
}

/* Убираем задержку 300ms на тап (все мобильные браузеры) */
* {
    touch-action: manipulation;
}

/* Видео на мобиле — cover заполняет весь экран */
#bg-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    transform: none !important;
}

/* Запрет выделения текста при тапе (особенно важно на Android) */
.battle-fighter, .map-monster, .map-npc,
.menu-icon, .float-icon, .tactics-slot,
.dialog-option-btn, .battle-log-entry {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari: фикс высоты — 100vh не учитывает адресную строку */
#game-screen {
    height: 100dvh;          /* современные браузеры */
    height: -webkit-fill-available; /* старый iOS Safari */
}

/* iOS: фикс position:fixed внутри трансформированных элементов */
.battle-screen {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Явно скрываем игровой экран когда он не активен */
#game-screen:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ================================================================
   ЭКРАН ВХОДА
   ================================================================ */
/* Экран входа перекрывает все fixed-элементы игры */
#login-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none;
    background: rgba(0,0,0,0.5) !important;
}
#login-screen.active {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 40px !important;
}

#login-screen.active .login-box {
    margin-top: 0 !important;
}

@media (max-width: 768px) {

    /* ══════════════════════════════════════════════════════════════
       ОБЩИЙ ИГРОВОЙ ЭКРАН
    ══════════════════════════════════════════════════════════════ */
    #game-screen {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #0a0a0f !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ВЕРХНЯЯ ПАНЕЛЬ — 2 строки: статы + меню
    ══════════════════════════════════════════════════════════════ */
    #ui-top-bar {
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        padding: env(safe-area-inset-top, 4px) 8px 2px !important;
        flex-shrink: 0 !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        z-index: 100 !important;
        gap: 4px 0 !important;
    }

    /* Левая группа (аватар + статы) — вся ширина в первой строке */
    #left-group {
        flex: 0 0 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    #avatar-frame {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }
    #player-avatar-emoji { font-size: 22px !important; }

    #player-stats-vertical {
        flex: 1 !important;
        gap: 2px !important;
    }
    #player-name-row { font-size: 11px !important; gap: 4px !important; }
    #player-level { font-size: 10px !important; }
    .stat-row { gap: 4px !important; }
    .stat-label { font-size: 9px !important; width: 22px !important; }
    .stat-bar-container { flex: 1 !important; min-width: 0 !important; }
    .stat-text { font-size: 9px !important; }
    .stat-pct { font-size: 9px !important; min-width: 30px !important; }

    /* Меню иконок — вторая строка, горизонтальный скролл */
    #ui-main-menu {
        flex: 0 0 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }
    #ui-main-menu::-webkit-scrollbar { display: none !important; }
    /* touch-action: manipulation глобально отключает пан-скролл — возвращаем для меню */
    #ui-main-menu { touch-action: pan-x !important; }

    .menu-icon {
        flex-shrink: 0 !important;
        padding: 2px 8px !important;
        min-width: 50px !important;
        border-radius: 6px !important;
    }
    .menu-icon-img { width: 24px !important; height: 24px !important; margin-bottom: 1px !important; }
    .menu-icon span { font-size: 9px !important; }

    /* ══════════════════════════════════════════════════════════════
       КАРТА — полная высота, горизонтальный скролл
    ══════════════════════════════════════════════════════════════ */
    #game-main-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }

    /* Карта — по высоте весь экран, по ширине — 2814/1536 пропорция */
    #map-container {
        aspect-ratio: 2814 / 1536 !important;
        height: 100% !important;
        width: auto !important;
        max-height: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    #map-parallax-inner {
        position: absolute !important;
        inset: 0 !important;
    }

    #map-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ПРАВАЯ КОЛОНКА — поверх карты
    ══════════════════════════════════════════════════════════════ */
    #right-column {
        z-index: 55 !important;
        bottom: 6px !important;
        gap: 4px !important;
    }

    /* НПЦ-панель — компактная */
    #actions-panel {
        display: block !important;
        max-height: 130px !important;
        font-size: 11px !important;
        opacity: 0.95 !important;
    }

    /* Иконки карты — чуть меньше */
    .map-action-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ЧАТ — фиксируется внизу, тонкая полоска
    ══════════════════════════════════════════════════════════════ */
    #chat-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 140px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        transform: translateY(0) !important;
        z-index: 150 !important;
    }

    #chat-panel.chat-hidden {
        transform: translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Кнопка чата — снизу слева */
    #chat-toggle-btn {
        left: 6px !important;
        bottom: 6px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(201,169,110,0.4) !important;
        width: 34px !important;
        height: 34px !important;
        z-index: 160 !important;
    }
    #chat-panel:not(.chat-hidden) ~ #chat-toggle-btn,
    body.chat-open #chat-toggle-btn {
        left: 6px !important;
        bottom: 146px !important; /* над открытым чатом */
    }

    .chat-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; touch-action: pan-x !important; }
    #game-main-area { touch-action: pan-x !important; }
    .chat-tabs::-webkit-scrollbar { display: none !important; }
    .chat-tab { padding: 4px 10px !important; font-size: 11px !important; flex-shrink: 0 !important; }
    .chat-messages { font-size: 11px !important; }
    .chat-input-area input { font-size: 13px !important; }

    /* ══════════════════════════════════════════════════════════════
       НИЖНЯЯ ПАНЕЛЬ (bottom-bar)
    ══════════════════════════════════════════════════════════════ */
    #bottom-bar {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ВСЕ UI-ОКНА — компактные, от top-bar вниз, фон виден снизу
    ══════════════════════════════════════════════════════════════ */
    .ui-window {
        position: fixed !important;
        top: var(--ui-win-top, 110px) !important;
        left: 4vw !important;
        right: 4vw !important;
        bottom: 20px !important;
        width: 92vw !important;
        max-width: 92vw !important;
        height: var(--ui-win-maxh, calc(100vh - 130px)) !important;
        max-height: var(--ui-win-maxh, calc(100vh - 130px)) !important;
        transform: none !important;
        border-radius: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1000 !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    /* Когда JS открывает окно через display:block — переключаем на flex */
    .ui-window[style*="display: block"],
    .ui-window[style*="display:block"] {
        display: flex !important;
    }

    /* Шапка — не сжимается */
    .ui-window > .window-header {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    /* Последний дочерний div — главный контент, скроллится */
    .ui-window > div:last-child,
    .ui-window > form:last-child {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }
    /* Не-последние div'ы (табы, подзаголовки) — не растягиваются */
    .ui-window > div:not(:last-child):not(.window-header) {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    /* Шапка окна */
    .window-header {
        flex-shrink: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── ИНВЕНТАРЬ ── */
    /* Табы "Все / Квест" — компактные */
    #inventory-window > div:first-of-type {
        padding: 4px 8px 0 !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    .inv-tab-btn {
        padding: 2px 10px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    .inventory-grid-wrap {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px !important;
    }
    .inventory-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5px !important;
    }
    .inventory-slot {
        font-size: 18px !important;
    }
    /* Количество предметов в ячейке */
    .inv-qty, .slot-qty, .item-qty {
        font-size: 9px !important;
        padding: 0 2px !important;
    }

    /* ── ГИЛЬДИЯ ── */
    /* JS ставит display:flex напрямую через openGuildWindow */
    #guild-window[style*="display: flex"],
    #guild-window[style*="display:flex"] {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Табы — одна строка, компактные */
    .guild-tabs {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scrollbar-width: none !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .guild-tabs::-webkit-scrollbar { display: none !important; }
    .guild-tab {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        min-width: max-content !important;
        touch-action: pan-x !important;
        pointer-events: auto !important;
    }
    /* Контент табов — растягивается и скроллится (ID-селекторы бьют universal rule) */
    #guild-tab-info,
    #guild-tab-members,
    #guild-tab-buffs,
    #guild-tab-log,
    #guild-tab-search,
    #guild-tab-storage {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
    }

    /* ── ПЕРСОНАЖ ── */
    #character-window .character-content {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-direction: column !important;
        padding: 8px 10px !important;
        gap: 10px !important;
    }
    #character-window .character-left {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }
    #character-window .character-portrait,
    #char-portrait-img,
    #char-portrait-placeholder {
        width: 80px !important;
        height: 80px !important;
        font-size: 40px !important;
    }
    #character-window .character-stats {
        flex: 1 !important;
        font-size: 11px !important;
        gap: 2px !important;
    }
    #character-window .stat-row {
        gap: 4px !important;
        font-size: 11px !important;
    }
    #character-window .equipment-grid-simple {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    .slot-cell {
        padding: 6px 4px !important;
        font-size: 10px !important;
        min-height: 44px !important;
    }
    .slot-icon { font-size: 18px !important; }

    /* ── КВЕСТЫ ── */
    #quests-list {
        max-height: none !important;
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 10px !important;
    }

    /* ── МАГАЗИН ── */
    .shop-content {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .shop-tabs { flex-shrink: 0 !important; overflow-x: auto !important; touch-action: pan-x !important; }
    .shop-tab { flex-shrink: 0 !important; padding: 8px 16px !important; }

    /* ── АУКЦИОН ── */
    .auction-tabs { flex-shrink: 0 !important; overflow-x: auto !important; touch-action: pan-x !important; }
    .auction-tab { flex-shrink: 0 !important; padding: 6px 10px !important; font-size: 11px !important; }
    #auction-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px !important;
    }



    /* ── КРАФТ / ЗАЧАРОВАНИЕ / ТРЕНИРОВКА ── */
    #craft-window > div:not(.window-header),
    #enchant-window > div:not(.window-header),
    #training-window > div:not(.window-header) {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 10px !important;
    }

    /* ── ПАТИ ── */
    #party-panel {
        /* наследует из .ui-window */
    }

    /* ── ПРОФИЛЬ ИГРОКА / МОДАЛКИ ── */
    #player-profile-modal,
    #frame-selector-modal,
    #monster-action-modal {
        /* наследует из .ui-window */
        overflow-y: auto !important;
    }

    /* ── ОКНО МОНСТРА — компактный попап ── */
    #monster-action-modal {
        height: auto !important;
        bottom: auto !important;
        overflow: visible !important;
        width: 70vw !important;
        max-width: 300px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .monster-action-content {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 6px 8px !important;
    }
    .monster-action-content img {
        width: 90px !important;
        height: 90px !important;
        object-fit: contain !important;
    }
    /* ID-специфичность бьёт universal last-child rule */
    #monster-action-modal > .monster-action-buttons {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 8px !important;
        padding: 8px 10px 12px !important;
        min-height: 50px !important;
    }
    #monster-action-modal .modal-action-btn {
        flex: 1 !important;
        padding: 10px 6px !important;
        font-size: 13px !important;
    }

    /* ── МОНСТРЫ / ЛОКАЦИИ / ИГРОКИ ── */
    #monsters-window > div:not(.window-header),
    #locations-window > div:not(.window-header),
    #players-window > div:not(.window-header) {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
    }

    /* Общий скролл для дочерних блоков с фикс. высотой */
    .ui-window [style*="max-height"] {
        max-height: none !important;
    }
    .ui-window [style*="overflow-y"] {
        overflow-y: visible !important;
    }

    /* Старые panel-window (если используются) */
    .game-panel, .panel-window, #inventory-panel, #character-panel,
    #quests-panel, #pets-panel, #legendary-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    /* ══════════════════════════════════════════════════════════════
       МОНСТРЫ НА КАРТЕ — крупнее для тача
    ══════════════════════════════════════════════════════════════ */
    .map-monster {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
    .map-monster::after {
        content: '';
        position: absolute;
        inset: -14px; /* увеличиваем зону нажатия */
    }

    /* НПЦ на карте */
    .map-npc { transform: scale(0.85) !important; transform-origin: bottom center !important; }

    /* ══════════════════════════════════════════════════════════════
       ДИАЛОГ НПЦ
    ══════════════════════════════════════════════════════════════ */
    #npc-dialog-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .npc-dialog-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }
    .dialog-option-btn {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* ══════════════════════════════════════════════════════════════
       БОЕВОЙ ЭКРАН
    ══════════════════════════════════════════════════════════════ */

    /* Звуковая панель — маленькая кнопка, слайдеры скрыты на мобиле */
    .battle-sound-panel { top: 4px !important; right: 4px !important; }
    .sound-mute-btn { width: 28px !important; height: 28px !important; font-size: 14px !important; }
    .sound-sliders { display: none !important; }
    .battle-sound-panel.open .sound-sliders { display: none !important; }

    .battle-arena {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        padding: 4px 2px 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .battle-fighter {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Player fighter — нулевой отступ */
    .player-fighter {
        padding: 0 !important;
        margin: 0 !important;
    }

    .player-action-circles { display: none !important; }

    /* ── Карточка игрока (новая структура) ── */
    .player-battle-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Аватар игрока — чуть меньше половины экрана */
    .player-card-avatar {
        width: calc(38vw) !important;
        height: calc(38vw) !important;
        min-height: calc(38vw) !important;
        max-height: calc(38vw) !important;
        aspect-ratio: unset !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        border-width: 2px !important;
    }

    /* Имя игрока на аватаре */
    .player-card-name {
        font-size: 10px !important;
        height: 28px !important;
    }

    /* Бары игрока — под аватаром, на всю ширину аватара */
    .player-card-info {
        width: calc(38vw) !important;
        align-self: flex-start !important;
        margin-top: 4px !important;
        gap: 4px !important;
    }
    .player-card-info .css-bar-wrap {
        width: 100% !important;
        height: 22px !important;
    }
    .player-card-info .css-bar-track {
        flex: 1 1 0 !important;
        height: 14px !important;
        min-width: 0 !important;
    }
    .player-card-info .css-bar-icon {
        font-size: 12px !important;
        width: 16px !important;
    }
    .player-card-info .custom-bar-val {
        font-size: 9px !important;
    }

    /* Monster card wrapper — никаких отступов */
    .monster-fighter .monster-card {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
    }

    /* Аватар монстра — то же что игрок */
    .monster-fighter .monster-card-avatar {
        width: calc(38vw) !important;
        height: calc(38vw) !important;
        min-height: calc(38vw) !important;
        max-height: calc(38vw) !important;
        aspect-ratio: unset !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        border-width: 2px !important;
    }

    /* Бары монстра — под аватаром */
    .monster-card-info {
        width: calc(38vw) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-top: 4px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
    }
    .monster-card-info .css-bar-wrap {
        width: 100% !important;
        height: 22px !important;
    }
    .monster-card-info .css-bar-track {
        flex: 1 1 0 !important;
        height: 14px !important;
        min-width: 0 !important;
    }
    .monster-card-info .css-bar-icon {
        font-size: 12px !important;
        width: 16px !important;
    }
    .monster-card-info .custom-bar-val {
        font-size: 9px !important;
    }

    /* Имя монстра внизу аватара */
    .monster-fighter .monster-card-avatar .monster-card-name {
        font-size: 10px !important;
        height: 28px !important;
    }

    /* ── НЕСКОЛЬКО МОНСТРОВ: компактные миниатюры в столбик ── */
    .monster-fighter.monsters-compact,
    .monster-fighter.monsters-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    /* Каждая карточка — компактная */
    .monster-fighter.monsters-compact .monster-card,
    .monster-fighter.monsters-grid .monster-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: calc(50vw - 16px) !important;
        background: rgba(10,5,2,0.6) !important;
        border-radius: 10px !important;
        border: 2px solid rgba(80,60,20,0.5) !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
    }

    /* Аватар монстра — маленький */
    .monster-fighter.monsters-compact .monster-card-avatar,
    .monster-fighter.monsters-grid .monster-card-avatar {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* Картинка монстра внутри маленького аватара */
    .monster-fighter.monsters-compact .monster-card-img,
    .monster-fighter.monsters-grid .monster-card-img {
        position: absolute !important;
        inset: 10% !important;
        width: 80% !important;
        height: 80% !important;
        object-fit: contain !important;
    }

    /* Имя внутри маленького аватара */
    .monster-fighter.monsters-compact .monster-card-avatar .monster-card-name,
    .monster-fighter.monsters-grid .monster-card-avatar .monster-card-name {
        font-size: 8px !important;
        bottom: 2px !important;
        left: 2px !important;
        right: 2px !important;
    }

    /* Рамка (ramka.png) скрываем в компактном виде */
    .monster-fighter.monsters-compact .portrait-frame-overlay,
    .monster-fighter.monsters-grid .portrait-frame-overlay {
        display: none !important;
    }

    /* Правая часть: имя + HP бар */
    .monster-fighter.monsters-compact .monster-card-info,
    .monster-fighter.monsters-grid .monster-card-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Имя монстра над баром */
    .monster-fighter.monsters-compact .monster-card-name:not(.monster-card-avatar .monster-card-name),
    .monster-fighter.monsters-grid .monster-card-name:not(.monster-card-avatar .monster-card-name) {
        font-size: 10px !important;
        color: #e8d5a0 !important;
        font-weight: bold !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* HP/MP бары — компактные */
    .monster-fighter.monsters-compact .custom-bar-wrap,
    .monster-fighter.monsters-grid .custom-bar-wrap {
        aspect-ratio: 300 / 60 !important;
    }
    .monster-fighter.monsters-compact .custom-bar-val,
    .monster-fighter.monsters-grid .custom-bar-val {
        font-size: 8px !important;
    }

    /* Цель — выделяется золотой рамкой и свечением */
    .monster-fighter.monsters-compact .monster-card.monster-card-target,
    .monster-fighter.monsters-grid .monster-card.monster-card-target {
        border-color: #c9a84b !important;
        box-shadow: 0 0 12px rgba(200,168,75,0.7), inset 0 0 6px rgba(200,168,75,0.15) !important;
    }

    /* Мёртвый монстр — полупрозрачный */
    .monster-fighter.monsters-compact .monster-card.monster-card-dead,
    .monster-fighter.monsters-grid .monster-card.monster-card-dead {
        opacity: 0.35 !important;
        transform: none !important;
        filter: grayscale(1) !important;
    }

    /* Стрелка цели — скрываем (рамка говорит сама за себя) */
    .monster-fighter.monsters-compact .monster-target-arrow,
    .monster-fighter.monsters-grid .monster-target-arrow {
        display: none !important;
    }

    /* monster-row-back/front — убираем в столбик */
    .monster-fighter.monsters-grid .monster-row-back,
    .monster-fighter.monsters-grid .monster-row-front {
        display: contents !important;
    }

    /* VS fixed блок — по центру горизонтально, посередине портретов вертикально */
    .battle-vs-fixed {
        position: fixed !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        top: calc(env(safe-area-inset-top, 0px) + 16px + (50vw - 24px) / 2) !important;
        width: 90px !important;
        right: auto !important;
        gap: 4px !important;
        align-items: center !important;
    }

    /* Таймер внутри VS-блока */
    .battle-vs-fixed .timer-circle {
        width: 48px !important;
        height: 48px !important;
    }
    .battle-vs-fixed .timer-circle svg { width: 48px !important; height: 48px !important; }
    .battle-vs-fixed .timer-circle span { font-size: 18px !important; }

    /* VS надпись — убираем, таймер говорит сам за себя */
    .battle-vs-badge { display: none !important; }

    /* Чей ход — маленький текст под таймером */
    #battle-turn-indicator {
        display: block !important;
        font-size: 9px !important;
        font-weight: bold !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }
    #battle-turn-indicator.player-turn {
        color: #5ddd5d !important;
        text-shadow: 0 0 6px rgba(60,200,60,0.6) !important;
        background: rgba(20,60,20,0.7) !important;
    }
    #battle-turn-indicator.monster-turn {
        color: #ff7070 !important;
        text-shadow: 0 0 6px rgba(200,40,40,0.6) !important;
        background: rgba(60,15,15,0.7) !important;
    }

    /* VS колонка в арене — не используется на мобиле */
    .battle-vs-col { display: none !important; }

    /* Метка "VS" — поменьше */
    .battle-vs-label { font-size: 16px !important; }

    /* Таймер */
    .battle-timer-center { top: 4px !important; right: 4px !important; }
    .timer-circle { width: 40px !important; height: 40px !important; }
    .timer-circle svg { width: 40px !important; height: 40px !important; }
    .timer-circle span { font-size: 15px !important; }

    /* Нижняя секция */
    .battle-bottom-row {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 4px 4px !important;
        gap: 3px !important;
    }

    .battle-log-panel {
        width: 100% !important;
        height: 90px !important;
        order: 2 !important;
    }
    .battle-log-header { font-size: 10px !important; padding: 3px 8px !important; }
    .battle-log-entry { font-size: 10px !important; padding: 1px 0 !important; }
    .battle-chat-panel { display: none !important; }

    .battle-center-bottom {
        order: 1 !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .tactics-presets { gap: 4px !important; }
    .tactics-preset-btn {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    .tactics-slots { gap: 4px !important; }
    .tactics-slot {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }
    .tactics-slot.locked,
    .tactics-slot-locked {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
    .tactics-slot-name { font-size: 7px !important; }

    .bact-submit { font-size: 12px !important; padding: 7px 14px !important; }

    .battle-effects-row { gap: 3px !important; flex-wrap: wrap !important; }
    .effect-badge { font-size: 9px !important; padding: 1px 4px !important; }

    .slot-picker { width: 200px !important; max-height: 200px !important; font-size: 12px !important; }
    .slot-picker-item { padding: 5px 8px !important; font-size: 12px !important; }

    /* ══════════════════════════════════════════════════════════════
       ЭКРАН ПЕРСОНАЖА
    ══════════════════════════════════════════════════════════════ */
    .equipment-grid-simple { gap: 3px !important; padding: 4px !important; }
    .slot-cell { min-height: 40px !important; }
    .slot-icon { font-size: 14px !important; }
    .slot-item { font-size: 8px !important; }

    /* ══════════════════════════════════════════════════════════════
       ИНВЕНТАРЬ — сетка крупнее
    ══════════════════════════════════════════════════════════════ */
    .inventory-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ВСПЛЫВАЮЩИЕ ОКНА / МОДАЛКИ — на всю ширину
    ══════════════════════════════════════════════════════════════ */
    .modal-box, .popup-box, .window-box {
        width: 96% !important;
        max-width: 100% !important;
        margin: auto !important;
    }

    /* ══════════════════════════════════════════════════════════════
       iOS SAFE AREA — отступы для чёлки и Home Bar (iPhone X+)
    ══════════════════════════════════════════════════════════════ */
    #ui-top-bar {
        padding-top: max(4px, env(safe-area-inset-top)) !important;
    }
    #bottom-bar,
    #chat-panel,
    #chat-toggle-btn,
    #right-column {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        margin-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    /* Чат открытый — тоже учитываем */
    #chat-panel {
        bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    #chat-toggle-btn {
        bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #chat-panel:not(.chat-hidden) ~ #chat-toggle-btn,
    body.chat-open #chat-toggle-btn {
        bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ================================================================
   ANDROID — запрет системного pull-to-refresh в Chrome
   ================================================================ */
@media (max-width: 768px) {
    #game-screen, #game-main-area {
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }
}

/* ================================================================
   iOS LANDSCAPE — дополнительные safe area отступы по бокам
   ================================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    #game-screen {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* Скрываем панель пати во время боя */
.battle-screen-active #party-panel { display: none !important; }

/* Скрываем party-hud во время боя */
body.in-battle #party-hud, body.in-battle #party-panel { display: none !important; }

/* ── Оптимизация производительности на мобиле ───────────────── */

/* Отключаем тяжёлые CSS анимации — основная причина нагрева */
@media (max-width: 600px) {
    /* Класс персонажа — убираем пульсацию, оставляем цвет */
    #player-class-display {
        animation: none !important;
    }
    /* Звёздный фон — отключаем если есть canvas анимация */
    #stars-canvas {
        display: none !important;
    }
    /* Все keyframe анимации кроме критичных — упрощаем */
    .battle-vs-fixed,
    .hp-fill, .mp-fill,
    .guild-tab,
    .quick-travel-item {
        transition: none !important;
    }
    /* Отключаем box-shadow пульсацию цели, но НЕ трогаем fighter-анимации */
    .monster-card-target:not(.fighter-attack):not(.fighter-hit):not(.fighter-crit):not(.fighter-dead) {
        animation: none !important;
    }
    /* Переходы баров — упрощаем */
    .hud-hp-bar, .hud-mp-bar {
        transition: width 0.1s linear !important;
    }
}