/* ========= ГЛОБАЛ ========= */
:root{
    /* общий масштаб интерфейса: 1 = как было; 1.6–2.0 — крупнее */
    --ui-scale: 1.6;
    /* отдельный масштаб персонажа (уменьшил до 0.8) */
    --player-scale: 0.4;
}

*{
    margin: 0;
    padding: 0;
    font-family: "Ubuntu", "Arial", sans-serif;
    box-sizing: border-box;
}

/* ===== BASE HTML BG ===== */
html {
    background-image: url('/assets/back/back3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #efe4c5 !important; /* Fallback цвет на случай если изображение не загрузится */
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh !important;
    overflow: hidden;
}

/* ===== GLOBAL BODY BACKGROUND ===== */
body {
    background-image: url('/assets/back/back3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #efe4c5 !important; /* Fallback цвет на случай если изображение не загрузится */
    font-family: "Ubuntu", Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh !important;
    overflow: hidden;
}

/* Базово держим слой карты контейнером для NPC */
.loadmap {
    position: relative !important;
    overflow: hidden !important;
}

/* Навбар: горизонтальный скролл без переносов, чтобы кнопки не пропадали */
.nav-list {
    overflow-x: auto;
    white-space: nowrap;
}
.nav-list::-webkit-scrollbar {
    display: none;
}

/* центрируем, как у тебя было */
.screen{
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 90vw;
    max-width: 1200px;
    height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
}

/* Адаптация для очень маленьких экранов (320px - 374px) */
@media (max-width: 374px) {
    :root {
        --ui-scale: 1.0;
        --player-scale: 0.5;
    }
    
    .navbar {
        height: auto !important;
        min-height: 50px !important;
        padding: 3px 5px !important;
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .navbar img {
        height: 35px !important;
        flex-shrink: 0 !important;
    }
    
    .nav-list {
        gap: 2px !important;
        font-size: 8px !important;
        flex-wrap: wrap !important;
        display: flex !important;
        flex-shrink: 0 !important;
    }
    
    .px-btn {
        padding: 2px 4px !important;
        font-size: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .wallet-address {
        display: none !important;
    }
    
    .screen {
        top: 60px !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: calc(100vh - 60px) !important;
        left: 0 !important;
        transform: none !important;
        padding: 0 !important;
    }
    
    .loadmap {
        flex-direction: column !important;
        gap: 5px !important;
        padding: 5px !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 48vh !important;
        max-height: 48vh !important;
    }
    
    .card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: calc(52vh - 65px) !important;
        overflow-y: auto !important;
        border-radius: 10px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar {
        height: 60px !important;
        padding: 5px !important;
    }
    
    .navbar img {
        height: 50px !important;
    }
    
    .nav-list {
        gap: 3px !important;
        font-size: 10px !important;
    }
    
    .px-btn {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    
    .wallet-address {
        display: none !important;
    }
    
    /* Кнопки движения - увеличиваем на очень маленьких экранах */
    #directions {
        padding: calc(12px * var(--ui-scale)) !important;
        margin: calc(8px * var(--ui-scale)) 0 !important;
    }
    
    #directions .m-move {
        width: calc(36px * var(--ui-scale)) !important;
        height: calc(36px * var(--ui-scale)) !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    #directions #dirsprite img {
        width: calc(36px * var(--ui-scale)) !important;
        height: calc(36px * var(--ui-scale)) !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    #directions .row {
        gap: calc(6px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем карточку покемона */
    .pokemon-card {
        padding: calc(12px * var(--ui-scale)) !important;
    }
    
    .pokemon-card img {
        width: calc(70px * var(--ui-scale)) !important;
        height: calc(70px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем кнопку Fight */
    #fight-btn {
        padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
        font-size: calc(14px * var(--ui-scale)) !important;
        min-height: calc(40px * var(--ui-scale)) !important;
    }
    
    /* Кнопка чата и Support */
    .mmorpg-chat-container .chat-toggle-btn {
        width: calc(48px * var(--ui-scale)) !important;
        height: calc(48px * var(--ui-scale)) !important;
        font-size: calc(24px * var(--ui-scale)) !important;
    }
    
    .support-btn {
        padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
        font-size: calc(14px * var(--ui-scale)) !important;
        min-width: calc(110px * var(--ui-scale)) !important;
    }
}

/* Дополнительная адаптация для всех устройств до 767px:
   - горизонтальный скролл меню
   - компактные кнопки
   - карта/панель остаются в пределах контейнера */
@media (max-width: 767px) {
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }
    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important; /* разрешаем 2 строки */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #0c0c0c !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
        padding: 12px 14px !important;
        min-height: 88px !important;
    }
    .nav-list {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        white-space: normal !important;
        gap: 6px !important;
        row-gap: 6px !important;
        display: flex !important;
    }
    .nav-list::-webkit-scrollbar {
        display: none;
    }
    .px-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-height: 28px !important;
        color: #fff !important;
        background: #1f5deb !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    }
    .navbar img {
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    .px-btn img {
        height: 14px !important;
    }
    .screen {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        transform: none !important;
        top: 90px !important;
        height: calc(100vh - 90px) !important;
    }
    .loadmap {
        position: relative !important;
        overflow: hidden !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 6px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
    }
    #npc-layer {
        pointer-events: none !important;
    }
    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 30vh !important;
        max-height: 30vh !important;
    }
    .card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 70vh !important;
        max-height: none !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 10px 110px !important; /* место под чат/саппорт */
        scroll-padding-bottom: 180px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .card-toggle-btn {
        display: none !important;
    }
    /* Делать панель управления видимой и компакной */
    #directions {
        display: flex !important;
        justify-content: center !important;
        padding: 8px 0 !important;
        margin: 8px 0 !important;
    }
    #directions .m-move {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    #directions #dirsprite img {
        width: 36px !important;
        height: 36px !important;
    }
    /* Чат + саппорт внутри панели */
    .mmorpg-chat-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: auto !important; /* прижимаем к низу панели */
        flex-wrap: wrap !important;
        position: sticky !important;
        bottom: 10px !important;
        background: #fff !important;
        padding-top: 8px !important;
    }
    .mmorpg-chat-container .chat-toggle-btn {
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }
    .mmorpg-chat-container #support-btn,
    #support-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        background: #4a90e2 !important;
        color: #fff !important;
        border: none !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }
    /* Поле ввода чата (если есть) */
    .mmorpg-chat-container input[type="text"],
    .mmorpg-chat-container textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #directions {
        pointer-events: auto !important;
    }
    #directions .m-move {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

/* Принудительный mobile-режим (по флагу ?mobile=1) */
.mobile-forced .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #0c0c0c !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    padding: 12px 14px !important;
    min-height: 88px !important;
}
.mobile-forced .nav-list {
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    white-space: normal !important;
    gap: 6px !important;
    row-gap: 6px !important;
    display: flex !important;
}
.mobile-forced .nav-list::-webkit-scrollbar {
    display: none;
}
.mobile-forced .px-btn {
    padding: 6px 9px !important;
    font-size: 12px !important;
    min-height: 28px !important;
    color: #fff !important;
}
.mobile-forced .navbar img {
    height: 32px !important;
    flex-shrink: 0 !important;
}
.mobile-forced .screen {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    top: 90px !important;
    height: calc(100vh - 90px) !important;
}
.mobile-forced .loadmap {
    position: relative !important;
    overflow: hidden !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
}
.mobile-forced #map,
.mobile-forced #gameCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 30vh !important;
    max-height: 30vh !important;
}
.mobile-forced .card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 70vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 12px 10px 110px !important;
    scroll-padding-bottom: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.mobile-forced #directions {
    display: flex !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    margin: 12px 0 !important;
}
.mobile-forced #directions .m-move {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}
.mobile-forced #directions #dirsprite img {
    width: 42px !important;
    height: 42px !important;
}
@media (min-width: 375px) and (max-width: 424px) {
    .screen {
        top: 75px !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: calc(100vh - 75px) !important;
        left: 0 !important;
        transform: none !important;
        padding: 0 !important;
    }
    
    .loadmap {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 50vh !important;
        max-height: 50vh !important;
    }
    
    .card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: calc(50vh - 85px) !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .navbar {
        height: 75px !important;
        padding: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .navbar img {
        height: 55px !important;
    }
    
    .nav-list {
        gap: 4px !important;
        font-size: 11px !important;
        flex-wrap: wrap !important;
    }
    
    .px-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    
    /* Кнопки движения - увеличиваем на маленьких мобильных */
    #directions {
        padding: calc(14px * var(--ui-scale)) !important;
        margin: calc(9px * var(--ui-scale)) 0 !important;
    }
    
    #directions .m-move {
        width: calc(38px * var(--ui-scale)) !important;
        height: calc(38px * var(--ui-scale)) !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    
    #directions #dirsprite img {
        width: calc(38px * var(--ui-scale)) !important;
        height: calc(38px * var(--ui-scale)) !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    
    #directions .row {
        gap: calc(7px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем карточку покемона */
    .pokemon-card {
        padding: calc(14px * var(--ui-scale)) !important;
    }
    
    .pokemon-card img {
        width: calc(75px * var(--ui-scale)) !important;
        height: calc(75px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем кнопку Fight */
    #fight-btn {
        padding: calc(11px * var(--ui-scale)) calc(22px * var(--ui-scale)) !important;
        font-size: calc(15px * var(--ui-scale)) !important;
        min-height: calc(42px * var(--ui-scale)) !important;
    }
    
    /* Кнопка чата и Support */
    .mmorpg-chat-container .chat-toggle-btn {
        width: calc(52px * var(--ui-scale)) !important;
        height: calc(52px * var(--ui-scale)) !important;
        font-size: calc(26px * var(--ui-scale)) !important;
    }
    
    .support-btn {
        padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)) !important;
        font-size: calc(16px * var(--ui-scale)) !important;
        min-width: calc(130px * var(--ui-scale)) !important;
    }
@media (min-width: 425px) and (max-width: 767px) {
    .screen {
        top: 80px !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: calc(100vh - 80px) !important;
        left: 0 !important;
        transform: none !important;
        padding: 10px !important;
    }
    
    .loadmap {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 0 !important;
        height: auto !important;
    }
    
    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 60vh !important;
        max-height: 60vh !important;
    }
    
    .card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        max-height: 35vh !important;
        overflow-y: auto !important;
    }
    
    .navbar {
        height: 80px !important;
        padding: 10px !important;
    }
    
    .navbar img {
        height: 60px !important;
    }
    
    .nav-list {
        gap: 5px !important;
        font-size: 12px !important;
    }
    
    .px-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .wallet-address {
        display: none !important;
    }
    
    /* Кнопки движения - увеличиваем на больших мобильных */
    #directions {
        padding: calc(15px * var(--ui-scale)) !important;
        margin: calc(10px * var(--ui-scale)) 0 !important;
    }
    
    #directions .m-move {
        width: calc(40px * var(--ui-scale)) !important;
        height: calc(40px * var(--ui-scale)) !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    #directions #dirsprite img {
        width: calc(40px * var(--ui-scale)) !important;
        height: calc(40px * var(--ui-scale)) !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    #directions .row {
        gap: calc(8px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем карточку покемона */
    .pokemon-card {
        padding: calc(15px * var(--ui-scale)) !important;
    }
    
    .pokemon-card img {
        width: calc(80px * var(--ui-scale)) !important;
        height: calc(80px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем кнопку Fight */
    #fight-btn {
        padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)) !important;
        font-size: calc(16px * var(--ui-scale)) !important;
        min-height: calc(44px * var(--ui-scale)) !important;
    }
    
    /* Кнопка чата и Support */
    .mmorpg-chat-container .chat-toggle-btn {
        width: calc(55px * var(--ui-scale)) !important;
        height: calc(55px * var(--ui-scale)) !important;
        font-size: calc(28px * var(--ui-scale)) !important;
    }
    
    .support-btn {
        padding: calc(14px * var(--ui-scale)) calc(28px * var(--ui-scale)) !important;
        font-size: calc(18px * var(--ui-scale)) !important;
        min-width: calc(140px * var(--ui-scale)) !important;
    }
}
    gap: calc(15px * var(--ui-scale)); /* Уменьшено с 30px для лучшей гармонии */
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем карту и панель вместе */
    width: 100%;
    flex: 1;
    padding: 20px 0;
    position: relative;
}

/* Скрываем все кнопки чата, которые могут отображаться на карте */
.loadmap .chat-toggle-btn,
#map + .chat-toggle-btn,
.loadmap > .chat-toggle-btn,
.screen .chat-toggle-btn:not(.mmorpg-chat-container .chat-toggle-btn),
button.chat-toggle-btn:not(.mmorpg-chat-container .chat-toggle-btn),
.chat-toggle-btn[style*="position: fixed"],
.chat-toggle-btn[style*="bottom"],
.chat-toggle-btn[style*="left"]:not(.mmorpg-chat-container .chat-toggle-btn),
button#chatToggleBtn:not(.mmorpg-chat-container button),
.loadmap button.chat-toggle-btn,
.loadmap #chatToggleBtn,
button[title*="Toggle Chat"]:not(.mmorpg-chat-container button),
button[title*="Chat"]:not(.mmorpg-chat-container button) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Дополнительно: скрываем любые кнопки с иконкой чата на карте */
.loadmap button:has(::before),
.loadmap button:has(::after),
.loadmap button[style*="bottom"]:not(.mmorpg-chat-container button),
.loadmap button[style*="left"]:not(.mmorpg-chat-container button) {
    display: none !important;
}

/* ========= КАРТА ========= */
#map{
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    width: 85%; /* 85% от контейнера */
    height: auto; /* пропорциональная высота */
    aspect-ratio: 1; /* квадратная карта */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    display: block;
    position: relative;
    flex-shrink: 0; /* не сжимается */
    max-height: calc(100vh - 120px); /* ограничиваем высоту */
}

/* ========= CANVAS КАРТА (для системы камеры) ========= */
#gameCanvas{
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    width: 95% !important; /* 95% от контейнера - увеличенная карта */
    height: auto !important;
    aspect-ratio: 1 !important; /* квадратная карта */
    image-rendering: auto;
    image-rendering: smooth;
    image-rendering: high-quality;
    display: block !important;
    position: relative !important;
    flex-shrink: 0 !important; /* не сжимается */
    max-height: calc(100vh - 120px) !important;
    z-index: 1;
    /* Рамка вокруг карты */
    border: 4px solid #2c3e50 !important;
    border-radius: 8px !important;
    background-color: #34495e !important; /* Темный фон за картой */
    padding: 4px !important;
    box-sizing: border-box !important;
    /* Центрирование по вертикали */
    margin: auto 0 !important; /* Автоматические отступы сверху и снизу */
    align-self: center !important; /* Центрируем в flex контейнере */
}


/* Персонаж поверх карты - СКРЫТ при использовании canvas */
#player{
    position: absolute;
    width:  calc(32px * var(--ui-scale) * var(--player-scale));
    height: calc(32px * var(--ui-scale) * var(--player-scale));
    pointer-events: none;
    image-rendering: pixelated;
    transition: left .1s linear, top .1s linear;
    display: none !important; /* Скрываем при использовании canvas */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========= ПРАВАЯ ПАНЕЛЬ ========= */
.card{
    border-radius: calc(20px * var(--ui-scale));
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background-color: #fff;
    /* Высота будет установлена через JavaScript чтобы совпадать с картой */
    width: calc(180px * var(--ui-scale)); /* Ширина фиксированная */
    max-height: calc(100vh - 120px) !important; /* Ограничение как у карты */
    overflow: hidden;
    display: flex !important; /* Flex для правильного размещения чата */
    flex-direction: column !important; /* Вертикальное расположение */
    flex-shrink: 0; /* не сжимается */
    align-self: center !important; /* Центрируем по вертикали вместе с картой */
    /* Минимальная высота на случай если JS не загрузился */
    min-height: calc(180px * var(--ui-scale));
}

/* Блок с сообщением/спрайтом покемона */
.card-info{
    background-color: #b7ffc7;
    transition: background-color 1000ms;
    /* Адаптивная высота - занимает ~45% от высоты панели */
    height: 45%;
    min-height: calc(150px * var(--ui-scale));
    padding: calc(12px * var(--ui-scale)) 0;
    display: flex;
    flex-direction: column;
    align-items: center;        /* <-- центр по горизонтали */
    justify-content: center;    /* <-- центр по вертикали */
    gap: calc(6px * var(--ui-scale));
    text-align: center;
    box-sizing: border-box;
}

/* Делаем саму "алёртку" гибкой и центрируем текст */
.alert{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#message{
    font-size: calc(14px * var(--ui-scale));
    font-weight: 700;
    line-height: 1.25;
    margin: 0;                  /* убираем любые внешние отступы */
}

/* карточка покемона (всегда видима) */
.pokemon-card{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pokemon-sprite{
    max-width:  calc(95px * var(--ui-scale));
    max-height: calc(95px * var(--ui-scale));
    image-rendering: pixelated;
}

#ball-sprite{
    max-width:  calc(23px * var(--ui-scale));
    max-height: calc(22px * var(--ui-scale));
    image-rendering: pixelated;
    margin-top: calc(6px * var(--ui-scale));
}

.poke-info{
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale));
    padding: calc(6px * var(--ui-scale)) 0;
    font-weight: 500;
    font-size: calc(12px * var(--ui-scale));
}

.btn-catch_action{
    margin: calc(10px * var(--ui-scale)) auto;
    color: #fff;
    background-color: #115DCB;
    display: inline-block;
    font-weight: bolder;
    font-variant: small-caps;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));
    font-size: calc(16px * var(--ui-scale));
    line-height: calc(18px * var(--ui-scale));
    border-radius: calc(5px * var(--ui-scale));
}

.type{
    margin: 0 calc(2px * var(--ui-scale));
    color: #fff;
    border-radius: calc(2px * var(--ui-scale));
    padding: calc(3px * var(--ui-scale));
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    font-size: calc(10px * var(--ui-scale));
}

/* анимация тряски спрайта покемона */
@keyframes shake{
    0%,100%{ transform: translateY(0) }
    20%,60%{ transform: translateY(-3px) }
    40%,80%{ transform: translateY(3px) }
}
.shake{ animation: shake .2s ease-in-out }

/* ========= КНОПКИ-СТРЕЛКИ ========= */
#directions{
    margin: calc(25px * var(--ui-scale)) 0;
    padding: calc(10px * var(--ui-scale)) 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(var(--ui-scale));
    transform-origin: top center;
    user-select: none;
}

.row{ 
    min-width: 110px; 
    text-align: center; 
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#directions>.row>a{
    cursor: pointer;
    display: inline-block;
    width: 32px; height: 32px;
}

/* Оригинальная реализация стрелок из DelugeRPG */
/* ========= D-PAD BUTTONS ========= */
a.dpad-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
a.dpad-btn.dpad-main {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #4a90e2, #2563eb);
    box-shadow: 0 3px 8px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    border: 1.5px solid rgba(255,255,255,0.2);
}
a.dpad-btn.dpad-diag {
    width: 36px; height: 36px;
    background: rgba(100,116,139,0.35);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.15);
}
a.dpad-btn:hover { transform: scale(1.12); }
a.dpad-btn:active { transform: scale(0.92); }
a.dpad-btn.dpad-main:active { background: linear-gradient(135deg,#2563eb,#1d4ed8); }

.m-move {
    background-image: url("/assets/dir.png");
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: 128px 128px;
    image-rendering: pixelated;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#dr-nw.m-move {
    background-position: -96px -96px;
}

#dr-n.m-move {
    background-position: -64px -96px;
}

#dr-ne.m-move {
    background-position: -32px -96px;
}

#dr-w.m-move {
    background-position: -96px -64px;
}

#dr-e.m-move {
    background-position: 0 -96px;
}

#dr-sw.m-move {
    background-position: -64px -32px;
}

#dr-s.m-move {
    background-position: -32px -64px;
}

#dr-se.m-move {
    background-position: 0 -64px;
}

/* Обычные CSS стрелки */
#dr-nw.m-move {
    background: none;
    position: relative;
}

#dr-nw.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid rgba(255,255,255,0.75);
}

#dr-n.m-move {
    background: none;
    position: relative;
}

#dr-n.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-ne.m-move {
    background: none;
    position: relative;
}

#dr-ne.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-w.m-move {
    background: none;
    position: relative;
}

#dr-w.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-e.m-move {
    background: none;
    position: relative;
}

#dr-e.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-sw.m-move {
    background: none;
    position: relative;
}

#dr-sw.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-s.m-move {
    background: none;
    position: relative;
}

#dr-s.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}

#dr-se.m-move {
    background: none;
    position: relative;
}

#dr-se.m-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.9);
}


#dirsprite{ height:32px; width:32px; text-align:center; display:inline-block; }

/* Movement buttons */
#move_nw, #move_n, #move_ne, #move_w, #move_e, #move_sw, #move_s, #move_se {
    display: inline-block !important;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    visibility: visible !important;
    opacity: 1 !important;
}

#move_nw:hover, #move_n:hover, #move_ne:hover, #move_w:hover, #move_e:hover, #move_sw:hover, #move_s:hover, #move_se:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

#move_nw:active, #move_n:active, #move_ne:active, #move_w:active, #move_e:active, #move_sw:active, #move_s:active, #move_se:active {
    transform: scale(0.95);
}

label{
    margin-top: calc(10px * var(--ui-scale));
    font-size: calc(11px * var(--ui-scale)) !important;
    text-align: center;
}

/* ===== Navbar enhancements ===== */
.navbar {
    background: linear-gradient(90deg,#0f0c29,#302b63,#24243e);
    padding: 0 16px;
    height: 62px;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 4px;
    align-items: center;
}
.nav-pill {
    background: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
    white-space: nowrap !important;
}
.nav-pill:hover {
    background: rgba(139,92,246,0.35) !important;
    border-color: rgba(139,92,246,0.8) !important;
    transform: translateY(-1px) !important;
}
.nav-item a, .dropdown-btn, .nav-item button {
    background-color: #115dcb;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #0d4aa3;
}
.nav-item a:hover, .dropdown-btn:hover, .nav-item button:hover {
    background-color: #0d4aa3;
}
.nav-item.dropdown .dropdown-btn {
    display: inline-block;
}
/* dropdown arrows color inversion */
.nav-item.dropdown .dropdown-btn::after {
    content: ' ▾';
}

/* Ensure dropdown items are on panel color */
.dropdown-content {
    background-color: #f7f2da;
}
.dropdown-content li {
    list-style: none;
}
.dropdown-content li a {
    color: #111;
}

/* ====== NAVBAR ====== */
.navbar {
    background: #2a2a2a;
    padding: 8px 16px;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 12px;
}
.nav-item a, .dropdown-btn {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    display: block;
}
.nav-item.active a, .dropdown-btn.active {
    background: #115dcb;
    border-radius: 4px;
}
.dropdown {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.3);
    z-index: 10000;
    top: 100%;
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    border: 1px solid rgba(139,92,246,0.35);
    padding: 4px 0;
    backdrop-filter: blur(8px);
}
.dropdown-content li {
    list-style: none;
}
.dropdown-content li a {
    color: #e0e7ff;
    padding: 9px 16px;
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-radius: 6px;
    margin: 2px 4px;
}
.dropdown-content li a:hover {
    background: rgba(139,92,246,0.3);
    color: #fff;
}
/* Dropdown opens on click, not hover */
.dropdown.active .dropdown-content {
    display: block;
}

/* Prevent navbar scroll, but allow dropdown to overflow */
.navbar {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow dropdown to overflow */
}

.nav-list {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow dropdown to overflow */
}
/* ====== REGION TABS ====== */
.region-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.region-tab {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
}
.region-tab.active {
    background: #115dcb;
    color: #fff;
    border-color: #0d4aa3;
}
/* ====== POKEMON LIST ====== */
#pokemon-table {
    border: 1px solid #ccc;
}
#pokemon-table th, #pokemon-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
#pokemon-table tr:nth-child(even) {
    background: #f9f9f9;
}
.filter-btn {
    background: #e0e0e0;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.filter-btn.active {
    background: #115dcb;
    color: #fff;
}
/* ====== PANELS & BUTTONS ====== */
.px-panel {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
}
.px-btn {
    background: #115dcb;
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.px-btn.alt { background: #999; }
.px-btn.green { background: #4caf50; }
.px-btn.green:hover { background: #45a049; }
.px-link {
    background: none;
    border: none;
    color: #115dcb;
    cursor: pointer;
    padding: 0;
    margin: 2px 0;
    font-size: 12px;
    text-decoration: underline;
}
/* ====== MODAL ====== */
#profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
#profile-modal .px-panel {
    max-width: 400px;
    width: 90%;
}
/* ====== TEAM SELECTION ====== */
.team-selection-grid {
    display: flex;
    gap: 16px;
}
.team-selection-grid .px-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
/* ====== BATTLE UI ====== */
#leader-battle-actions button, #player-moves label {
    margin: 4px;
}
#leader-info, #player-info {
    margin: 12px 0;
}
#items-list label {
    display: block;
    margin: 4px 0;
}

/* Override previous px-bg for non-map pages */
.px-bg {
    background-image: url('/assets/back/back3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #efe4c5 !important; /* Fallback цвет */
    min-height: 100vh !important;
}

/* Remove overlay for non-screen pages */
.px-overlay {
    display: none !important;
}

/* ========= PIXEL STYLE MODAL ========= */
#change-username-modal {
    font-family: 'Courier New', monospace !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

#change-username-modal .px-btn {
    font-family: 'Courier New', monospace !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    transition: all 0.1s ease !important;
}

#change-username-modal .px-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3) !important;
}

#change-username-modal .px-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.3) !important;
}

#change-username-modal input {
    font-family: 'Courier New', monospace !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

#change-username-modal input:focus {
    outline: none !important;
    border-color: #4a90e2 !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3) !important;
}

/* ========= WALLET ADDRESS HOVER ========= */
[onclick*="copyWalletAddress"]:hover {
    background-color: rgba(76, 175, 80, 0.1) !important;
    color: #2e7d32 !important;
}

/* ========= MOBILE ADAPTATION (max-width: 768px) ========= */
/* Адаптация для планшетов (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .screen {
        top: 80px !important;
        width: 95vw !important;
        max-width: 95vw !important;
        height: calc(100vh - 80px) !important;
        padding: 8px !important;
    }
    
    .loadmap {
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    
    #map, #gameCanvas {
        width: 60% !important;
        max-width: 60% !important;
        height: auto !important;
        max-height: calc(100vh - 200px) !important;
    }
    
    .card {
        width: 38% !important;
        max-width: 38% !important;
        height: calc(100vh - 200px) !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
}

/* Десктоп - сбрасываем мобильные стили для больших экранов */
@media (min-width: 1024px) {
    /* Восстанавливаем стандартные стили для десктопа */
    :root {
        --ui-scale: 1.3;
        --player-scale: 0.4;
    }
    .screen {
        top: 80px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 1200px !important;
        height: calc(100vh - 80px) !important;
        padding: 0 !important;
    }
    
    .loadmap {
        flex-direction: row !important;
        gap: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        width: 100% !important;
        height: calc(100vh - 100px) !important;
        display: flex !important;
        overflow: visible !important;
    }
    
    #map, #gameCanvas {
        width: auto !important;
        max-width: 60% !important;
        height: 90% !important;
        max-height: 90% !important;
        aspect-ratio: 1 !important;
        flex-shrink: 0 !important;
    }
    
    .card {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 300px !important;
        height: 90% !important;
        min-height: auto !important;
        max-height: 90% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: calc(16px * var(--ui-scale)) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        background-color: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }
    
    .navbar {
        height: 110px !important;
        padding: 10px 20px !important;
    }
    
    .navbar img {
        height: 100px !important;
    }
    
    .nav-list {
        gap: 12px !important;
        font-size: 14px !important;
    }
    
    .px-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .wallet-address {
        display: block !important;
    }
    
    /* Кнопки движения - стандартный размер */
    #directions {
        padding: calc(25px * var(--ui-scale)) 0 !important;
        margin: calc(25px * var(--ui-scale)) 0 !important;
    }
    
    #directions .m-move {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    #directions #dirsprite img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    #directions .row {
        gap: 8px !important;
    }
    
    /* Карточка покемона - стандартный размер */
    .pokemon-card {
        padding: calc(20px * var(--ui-scale)) 0 !important;
    }
    
    .pokemon-card img {
        width: auto !important;
        height: auto !important;
    }
    
    /* Кнопка Fight - стандартный размер */
    #fight-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: auto !important;
    }
    
    /* Кнопка чата и Support - стандартный размер */
    .mmorpg-chat-container .chat-toggle-btn {
        width: calc(40px * var(--ui-scale)) !important;
        height: calc(40px * var(--ui-scale)) !important;
        font-size: calc(20px * var(--ui-scale)) !important;
    }
    
    .support-btn {
        padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
        font-size: calc(14px * var(--ui-scale)) !important;
        min-width: calc(100px * var(--ui-scale)) !important;
    }
}

/* Адаптация для мобильных (до 768px) - общие правила */
@media (max-width: 767px) {
    /* Уменьшаем масштаб UI для мобильных */
    :root {
        --ui-scale: 1.2;
        --player-scale: 0.5;
    }
    
    /* Навигация - делаем компактнее и скроллируемой */
    .navbar {
        height: auto !important;
        min-height: 60px !important;
        max-height: 120px !important;
        padding: 5px 8px !important;
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .navbar img {
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    
    .nav-list {
        gap: 4px !important;
        font-size: 10px !important;
        flex-wrap: wrap !important;
        display: flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }
    
    .px-btn {
        padding: 4px 6px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .wallet-address {
        display: none !important; /* Скрываем адрес кошелька на мобильных */
    }
    
    /* Экран игры */
    .screen {
        top: 70px !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: calc(100vh - 70px) !important;
        padding: 10px !important;
    }
    
    .loadmap {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 0 !important;
        height: auto !important;
    }
    
    /* Карта и canvas занимают всю ширину и увеличиваем высоту */
    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 60vh !important;
        height: 60vh !important;
    }
    
    /* Правая панель - показываем всегда на мобильных внизу */
    .card {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        z-index: 10 !important;
        transition: none !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
        border-radius: calc(20px * var(--ui-scale)) calc(20px * var(--ui-scale)) 0 0 !important;
    }
    
    .card.open {
        right: auto !important;
    }
    
    /* Кнопка для открытия правой панели - скрываем на мобильных */
    .card-toggle-btn {
        display: none !important;
    }
    
    /* MMORPG Chat Container - адаптация для мобильных */
    .mmorpg-chat-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        max-height: none !important;
        z-index: 10 !important;
        transition: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: calc(8px * var(--ui-scale)) !important;
        padding: calc(15px * var(--ui-scale)) !important;
        margin-top: auto !important;
        flex-wrap: wrap !important;
    }
    
    .mmorpg-chat-container.open {
        bottom: auto !important;
    }
    
    /* Кнопка чата - увеличиваем на мобильных */
    .mmorpg-chat-container .chat-toggle-btn {
        width: calc(50px * var(--ui-scale)) !important;
        height: calc(50px * var(--ui-scale)) !important;
        font-size: calc(24px * var(--ui-scale)) !important;
    }
    
    /* Кнопки движения - увеличиваем на мобильных */
    #directions {
        padding: calc(15px * var(--ui-scale)) !important;
        margin: calc(10px * var(--ui-scale)) 0 !important;
    }
    
    #directions .m-move {
        width: calc(40px * var(--ui-scale)) !important;
        height: calc(40px * var(--ui-scale)) !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    #directions #dirsprite img {
        width: calc(40px * var(--ui-scale)) !important;
        height: calc(40px * var(--ui-scale)) !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    #directions .row {
        gap: calc(8px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем карточку покемона на мобильных */
    .pokemon-card {
        padding: calc(15px * var(--ui-scale)) !important;
    }
    
    .pokemon-card img {
        width: calc(80px * var(--ui-scale)) !important;
        height: calc(80px * var(--ui-scale)) !important;
    }
    
    /* Увеличиваем кнопку Fight */
    #fight-btn {
        padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)) !important;
        font-size: calc(16px * var(--ui-scale)) !important;
        min-height: calc(44px * var(--ui-scale)) !important;
    }
    
    /* Кнопка Support - прямоугольная */
    .support-btn {
        position: relative !important;
        background: #4a90e2 !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
        font-size: calc(14px * var(--ui-scale)) !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        min-width: calc(100px * var(--ui-scale)) !important;
        transition: all 0.2s ease !important;
    }
    
    .support-btn:hover {
        background: #357abd !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    
    .support-btn:active {
        transform: translateY(0) !important;
    }
    
    /* Кнопка репорта бага (старая, скрыта) */
    .mmorpg-report-btn {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mmorpg-report-btn:hover {
        background: #dc2626 !important;
        transform: scale(1.05) !important;
    }
    
    /* Поле ввода чата внутри панели */
    .mmorpg-chat-input {
        position: relative !important;
        display: flex !important;
        gap: 8px !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        background: rgba(0,0,0,0.8) !important;
        padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)) !important;
        border-radius: calc(20px * var(--ui-scale)) !important;
        border: 2px solid #4ade80 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .mmorpg-chat-input input {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: calc(12px * var(--ui-scale)) !important;
        padding: calc(4px * var(--ui-scale)) calc(8px * var(--ui-scale)) !important;
        outline: none !important;
        width: 100% !important;
        pointer-events: auto !important;
    }
    
    /* Кнопки управления - увеличиваем для удобства */
    .movement-controls {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        z-index: 999 !important;
    }
    
    .movement-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        margin: 5px !important;
        border-radius: 12px !important;
        touch-action: manipulation !important;
    }
    
    /* Модальные окна - адаптируем под мобильные */
    .case-modal-content,
    #profile-modal > div {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }
    
    /* Dropdown меню - адаптируем */
    .dropdown-content {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* ========= SMALL MOBILE (max-width: 480px) ========= */
@media (max-width: 480px) {
    :root {
        --ui-scale: 1.0;
        --player-scale: 0.6;
    }
    
    .navbar {
        height: 60px !important;
    }
    
    .navbar img {
        height: 50px !important;
    }
    
    .px-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .screen {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }
    
    #map {
        max-height: calc(100vh - 150px) !important;
    }
}


/* Desktop: Language dropdown appears above to prevent scroll */
@media (min-width: 1024px) {
    .nav-item.dropdown:last-child.active .dropdown-content {
        top: auto !important;
        bottom: 100% !important;
        margin-bottom: 5px !important;
    }
    
    /* Ensure navbar doesn't scroll */
    .navbar {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    
    .nav-list {
        overflow-x: hidden !important;
        flex-wrap: nowrap !important;
    }
}


/* ========= Desktop: Use fixed positioning for dropdown to be above everything ========= */
@media (min-width: 1024px) {
    .nav-item.dropdown.active .dropdown-content {
        position: fixed !important; /* Fixed to be above everything */
        z-index: 100000 !important; /* Very high z-index */
    }
    
    /* All dropdowns open below button - position handled by JavaScript */
    .nav-item.dropdown.active .dropdown-content {
        /* Position calculated by JavaScript */
    }
    
    /* Ensure navbar allows overflow */
    .navbar {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .nav-list {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .nav-item.dropdown {
        overflow: visible !important;
    }
}