/* ========= ГЛОБАЛ ========= */
: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;
}

/* Принудительный mobile-режим (по флагу ?mobile=1) — делегирует стили в @media (max-width: 767px) */

/* Скрываем все кнопки чата, которые могут отображаться на карте */
.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(16px * var(--ui-scale));
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    background-color: #fdfcff;
    /* Высота будет установлена через 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{
    /* Encounter sprite: explicit size so small native sprites (e.g. 64×64
       Showdown gifs) don't render tiny next to the pokéball + dex badge. */
    width:      calc(110px * var(--ui-scale));
    height:     calc(110px * var(--ui-scale));
    max-width:  calc(140px * var(--ui-scale));
    max-height: calc(140px * var(--ui-scale));
    object-fit: contain;
    image-rendering: pixelated;
}

#ball-sprite{
    /* "In Pokédex" indicator — kept compact so it never visually
       outweighs the encountered Pokémon sprite. */
    width:      calc(18px * var(--ui-scale));
    height:     calc(18px * var(--ui-scale));
    max-width:  calc(20px * var(--ui-scale));
    max-height: calc(20px * var(--ui-scale));
    object-fit: contain;
    image-rendering: pixelated;
    margin-top: calc(4px * 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;
    /* The transform: scale + the 25px outer margin make the layout box
       of #directions taller than its visible d-pad content. Without an
       explicit stacking context here, the layout box silently overlapped
       the FISH and SUPPORT buttons below in flex order — and because
       #directions is mostly empty space outside the d-pad sprites, the
       browser routed clicks meant for FISH/SUPPORT to #directions. The
       z-index combined with the higher z-index on #fishing-panel below
       puts the buttons on top in the stacking order. */
    position: relative;
    z-index: 1;
}
/* FISH and SUPPORT must sit ABOVE #directions's stacking order so the
   d-pad's layout-box bleed doesn't intercept their clicks. */
#fishing-panel,
#fishing-panel button {
    position: relative;
    z-index: 5;
}
button[onclick*="support"],
button#support-btn,
.support-btn,
#bell-button,
#bellButton {
    position: relative;
    z-index: 5;
}

.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 ====== */
.navbar {
    display: flex;
    align-items: center;
    gap: 0;
    /* Solid bg — backdrop-filter removed because it creates a stacking context
       that clips position:fixed children (dropdowns would be clipped to navbar height) */
    background: linear-gradient(90deg, #0f0c29, #242050, #141230);
    padding: 0 16px;
    height: 62px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 2px 16px rgba(0,0,0,0.35);
    overflow: visible;
    /* Ensure dropdowns render above everything */
    z-index: 9000;
    position: relative;
}
.navbar img {
    height: 42px;
    margin-right: 10px;
    flex-shrink: 0;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 4px;
    align-items: center;
    overflow-y: visible;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-pill {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(226,232,240,0.9) !important;
    border: 1px solid rgba(139,92,246,0.22) !important;
    border-radius: 18px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, color 0.18s !important;
    white-space: nowrap !important;
}
.nav-pill:hover {
    background: rgba(139,92,246,0.18) !important;
    border-color: rgba(139,92,246,0.55) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.nav-item a, .dropdown-btn, .nav-item button {
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.nav-item a:hover, .dropdown-btn:hover, .nav-item button:hover {
    background-color: rgba(139,92,246,0.2);
}
.nav-item.active a, .dropdown-btn.active {
    background: #115dcb;
    border-radius: 4px;
}
.nav-item.dropdown .dropdown-btn::after {
    content: ' ▾';
}
.dropdown {
    position: relative;
    overflow: visible;
}
.nav-item.dropdown {
    overflow: visible;
}
/* Navbar nav must not clip menus (was overflow:hidden inline) */
.navbar .main-nav {
    overflow: visible;
}
.dropdown-content {
    display: none;
    /* fixed so it floats over map/card — works because navbar has no backdrop-filter */
    position: fixed;
    background: rgba(14,12,30,0.98);
    min-width: 160px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.22);
    z-index: 99999;
    border-radius: 12px;
    border: 1px solid rgba(139,92,246,0.25);
    padding: 5px 0;
    /* height is natural — no max-height, no overflow scroll */
    max-height: none;
    overflow: visible;
}
.dropdown.active .dropdown-content,
.nav-item.dropdown.active .dropdown-content {
    display: block;
}
.dropdown-content li {
    list-style: none;
}
.dropdown-content li a,
.dropdown-content li button {
    color: #e0e7ff !important;
    padding: 9px 16px !important;
    display: block !important;
    text-decoration: none;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s;
    border-radius: 6px !important;
    margin: 2px 4px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: calc(100% - 8px) !important;
    text-align: left !important;
    cursor: pointer;
    white-space: nowrap;
    min-height: auto !important;
}
.dropdown-content li a:hover,
.dropdown-content li button:hover {
    background: rgba(139,92,246,0.3) !important;
    color: #fff !important;
}
.dropdown.active .dropdown-content {
    display: block;
}

/* Portaled to <body> so position:fixed is vs viewport (navbar backdrop-filter breaks fixed) */
/* ====== 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;
}
/* ====== SOLKEMON 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;
}

/* ========= TABLET (768px - 1023px) ========= */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar {
        height: 56px !important;
        padding: 0 14px !important;
        min-height: 56px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    .navbar img { height: 38px !important; }
    .nav-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 4px !important;
        scrollbar-width: none !important;
    }
    .nav-list::-webkit-scrollbar { display: none; }
    .nav-pill {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .screen {
        top: 56px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 56px) !important;
        left: 0 !important;
        transform: none !important;
        padding: 8px !important;
    }
    .loadmap {
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        height: 100% !important;
    }
    #map, #gameCanvas {
        width: 58% !important;
        max-width: 58% !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
    }
    .card {
        width: 40% !important;
        max-width: 40% !important;
        height: calc(100vh - 80px) !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        padding: 12px !important;
        background-color: #fdfcff !important;
        border-radius: 16px !important;
    }
}

/* Hide settings rows that only make sense on touch devices. Desktop
   players don't accidentally rapid-tap a d-pad, so the encounter-pause
   toggle is only relevant on mobile. */
@media (min-width: 768px) {
    .mobile-only-setting,
    .mobile-only-btn {
        display: none !important;
    }
}

/* Show the mobile-only Skip button on touch viewports. Inline style
   keeps it hidden by default so desktop never flashes it. */
@media (max-width: 767px) {
    #skip-btn.mobile-only-btn {
        display: inline-flex !important;
    }
}

/* Defense-in-depth for the encounter pause. The JS hard-block in
   movePlayer() should already swallow taps while a wild solkemon is
   on screen, but in practice some users still walked past — likely
   because of stale cached scripts or buffered-tap quirks. Pinning
   pointer-events:none on the d-pad while body.encounter-active is
   set makes the buttons literally unclickable until Fight/Skip
   resolves the encounter. Touch-targeted via (pointer: coarse) so
   tablets and large-screen phones in landscape are also covered;
   the (max-width: 1023px) branch catches non-coarse browsers that
   still report a tablet/phone-sized viewport. Desktop keyboard
   play is never affected. */
@media (max-width: 1023px), (pointer: coarse) {
    body.encounter-active #directions,
    html.encounter-active #directions {
        pointer-events: none !important;
        opacity: 0.45 !important;
        filter: grayscale(0.4);
        transition: opacity 0.15s ease;
    }
    body.encounter-active #directions *,
    html.encounter-active #directions * {
        pointer-events: none !important;
    }
}

/* Десктоп - сбрасываем мобильные стили для больших экранов */
@media (min-width: 1024px) {
    /* Восстанавливаем стандартные стили для десктопа */
    :root {
        --ui-scale: 1.3;
        --player-scale: 0.4;
    }
    .screen {
        top: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 1200px !important;
        height: calc(100vh - 60px) !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 - 80px) !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: 60px !important;
        padding: 0 20px !important;
        min-height: 60px !important;
    }
    
    .navbar img {
        height: 46px !important;
    }
    
    .nav-list {
        gap: 5px !important;
        font-size: 13px !important;
    }
    
    .px-btn {
        padding: 6px 12px !important;
        font-size: 13px !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/Skip — одинаковый размер на тач и десктопе */
    #fight-btn,
    #skip-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: auto !important;
        flex: 1 1 0 !important;
        min-width: 90px !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;
    }
}

/* ========= MOBILE (<768px) ========= */
@media (max-width: 767px) {
    :root {
        --ui-scale: 1.0;
        --player-scale: 0.5;
    }

    html, body {
        overflow: hidden !important;
        height: 100% !important;
    }

    /* Navbar — single compact row */
    .navbar {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9000 !important;
        background: linear-gradient(90deg, #0c0a23, #1c1841) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .navbar img { height: 32px !important; flex-shrink: 0 !important; margin-right: 6px !important; }
    .nav-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 3px !important;
        display: flex !important;
        align-items: center !important;
        scrollbar-width: none !important;
    }
    .nav-list::-webkit-scrollbar { display: none; }
    .nav-pill {
        font-size: 11px !important;
        padding: 5px 9px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 30px !important;
    }
    .px-btn {
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .wallet-address { display: none !important; }

    /* Game screen — fills below navbar */
    .screen {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: calc(100vh - 50px) !important;
        height: calc(100dvh - 50px) !important;
        transform: none !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Map + Card vertical stack */
    .loadmap {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #map, #gameCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 48% !important;
        max-height: 48% !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        aspect-ratio: auto !important;
    }

    /* Side panel — fills remaining space, scrolls internally */
    .card {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.12) !important;
        border-radius: 14px 14px 0 0 !important;
        background-color: #fdfcff !important;
        padding: 10px 12px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .card.open { right: auto !important; }

    .card-toggle-btn { display: none !important; }

    /* Solkemon card info — compact */
    .card-info {
        padding: 8px 0 !important;
        min-height: auto !important;
        height: auto !important;
    }
    .pokemon-card img {
        max-width: 72px !important;
        max-height: 72px !important;
    }
    #message { font-size: 13px !important; }

    /* D-pad — floating overlay on mobile */
    #directions {
        position: fixed !important;
        bottom: 12px !important;
        right: 12px !important;
        z-index: 500 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: scale(0.8) !important;
        transform-origin: bottom right !important;
        opacity: 0.85 !important;
        pointer-events: auto !important;
        background: rgba(0,0,0,0.3) !important;
        border-radius: 20px !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
    #directions:active {
        opacity: 1 !important;
    }

    /* D-pad buttons — 44px touch targets */
    #directions .dpad-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    #directions .m-move {
        width: 40px !important;
        height: 40px !important;
    }

    /* Fight/Skip — touch-friendly, identical size on phones */
    #fight-btn,
    #skip-btn {
        padding: 10px 20px !important;
        font-size: 15px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        flex: 1 1 0 !important;
        min-width: 100px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    /* Chat container — compact row */
    .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;
        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: 8px !important;
        padding: 8px 4px !important;
        margin-top: auto !important;
        flex-wrap: wrap !important;
    }
    .mmorpg-chat-container.open { bottom: auto !important; }

    .mmorpg-chat-container .chat-toggle-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    /* Touch targets — 44px minimum for game area buttons */
    .card button, .card .px-btn, #wb-attack, #wb-catch, #wb-run,
    #profile-modal button, #pokeball-shop-modal button,
    .support-btn, .chat-toggle-btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    /* Navbar pills get slightly smaller touch target to fit the bar */
    .nav-pill {
        min-height: 32px !important;
        touch-action: manipulation !important;
    }

    /* Support button */
    .support-btn {
        background: #4a90e2 !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        min-height: 44px !important;
        min-width: 90px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Chat input */
    .mmorpg-chat-input {
        position: relative !important;
        display: flex !important;
        gap: 6px !important;
        background: rgba(0,0,0,0.75) !important;
        padding: 6px 10px !important;
        border-radius: 16px !important;
        border: 1.5px solid #4ade80 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .mmorpg-chat-input input {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 13px !important;
        padding: 4px 6px !important;
        outline: none !important;
        width: 100% !important;
    }

    .mmorpg-report-btn { display: none !important; }

    /* ---- Profile modal ---- */
    #profile-modal > div {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    #profile-modal > div > div:last-child {
        max-height: calc(100vh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
    }
    #profile-modal [style*="grid-template-columns:1fr 1fr"],
    #profile-modal [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #profile-modal [style*="grid-template-columns:repeat(4"],
    #profile-modal [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    #profile-modal [style*="grid-template-columns:repeat(3"],
    #profile-modal [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #profile-modal h2 { font-size: 20px !important; }
    #profile-modal h3 { font-size: 16px !important; }

    /* ---- SolOrb Shop modal ---- */
    #pokeball-shop-modal > div {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
    }
    #pokeball-shop-modal [style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ---- Battle modal ---- */
    #wild-battle-modal > div {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        position: fixed !important;
        border-radius: 0 !important;
        border: none !important;
    }
    /* Arena: taller on mobile so sprites have breathing room and the
       compact HP cards in the corners don't crash into them. */
    #wild-battle-modal [style*="height:220px"] {
        height: 240px !important;
    }
    #wb-attack, #wb-catch, #wb-run {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 10px 8px !important;
    }
    #wb-player-moves {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    #wb-player-moves button {
        min-height: 40px !important;
        font-size: 12px !important;
    }

    /* Bottom panel inside #wb-container — the inline max-height
       calc(92vh - 210px - 72px) was meant for a 92vh modal, but on mobile
       we force the modal to 100dvh, and the inline calc was clipping the
       stats / moves below the fold. Override so it grows to fit. */
    #wb-container > div:last-child[style*="max-height:calc(92vh"],
    #wb-container > div:last-child[style*="max-height: calc(92vh"] {
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* HP cards: tight pills clamped to the corners. Each one explicitly
       resets all four offset properties so a stale inline value can't
       stretch it across the arena (an earlier bug pinned both top and
       bottom on the player card and hid the sprite). */
    #wb-wild-hpcard {
        top: 10px !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 145px !important;
        padding: 3px 7px !important;
    }
    #wb-player-hpcard {
        bottom: 8px !important;
        right: 8px !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: 145px !important;
        padding: 3px 7px !important;
    }

    /* Hide wrapping lines that ballooned the cards on mobile. Status and
       ability info still surfaces in the battle log below the arena. */
    #wb-wild-ability-line,
    #wb-player-ability-line,
    #wb-wild-status,
    #wb-player-status {
        display: none !important;
    }

    /* Larger sprites so the pokemon are the focal point, not the cards. */
    #wb-wild-sprite {
        width: 104px !important;
        height: 104px !important;
    }
    #wb-player-sprite {
        width: 124px !important;
        height: 124px !important;
    }

    /* ---- PvP modal ---- */
    #pvp-modal > div {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* ---- JS-created modals (leaderboard, pokedex, battle pass) ---- */
    #lb-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    #lb-header { padding: 14px 16px 10px !important; }
    #lb-header h2 { font-size: 17px !important; }

    #dex-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    #bp-modal-inner {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .dropdown-content {
        max-width: calc(100vw - 16px) !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ========= SMALL MOBILE (max-width: 480px) ========= */
@media (max-width: 480px) {
    :root {
        --ui-scale: 1.0;
        --player-scale: 0.55;
    }
    .navbar { height: 46px !important; min-height: 46px !important; max-height: 46px !important; }
    .navbar img { height: 28px !important; }
    .nav-pill { font-size: 10px !important; padding: 4px 7px !important; min-height: 26px !important; }
    .screen { top: 46px !important; height: calc(100vh - 46px) !important; height: calc(100dvh - 46px) !important; }
    #map, #gameCanvas { height: 45% !important; max-height: 45% !important; }
    #directions { transform: scale(0.75) !important; }
}


/* ========= Desktop ========= */
@media (min-width: 1024px) {
    .navbar {
        overflow: visible !important;
    }
    .nav-list {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
    }
}

/* ============================================================
   MOBILE UX IMPROVEMENTS — added 2026-05
   - z-index fix: modals must sit ABOVE navbar (was 1000 vs 9000)
   - iOS safe-area for d-pad / chat / nav (notch + home indicator)
   - Landscape battle layout
   - Disable iOS tap highlight + better touch behavior
   ============================================================ */

/* Modals above navbar on every screen size */
#profile-modal,
#pokeball-shop-modal,
#wild-battle-modal,
#pvp-modal,
#lb-modal,
#dex-modal,
#bp-modal,
#bp-modal-inner,
#case-modal,
#player-profile-modal,
#trade-modal,
#duel-modal,
#raid-modal,
#egg-lab-modal,
#auction-modal,
#gyms-modal {
    z-index: 10000 !important;
}

/* Keep modal backdrops clean like Evolution Incubators */
#gyms-modal,
#pvp-modal,
#pokeball-shop-modal,
#profile-modal {
    background: rgba(0, 0, 0, 0.01) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Disable tap highlight + tweak text selection on the game UI */
.navbar, .card, .screen, .nav-pill, .px-btn,
#fight-btn, #directions, .dpad-btn,
.mmorpg-chat-container button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

@media (max-width: 767px) {
    /* iOS safe-area: keep d-pad above home indicator */
    #directions {
        bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
        right: max(12px, env(safe-area-inset-right, 12px)) !important;
    }
    .navbar {
        padding-left: max(8px, env(safe-area-inset-left, 8px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 8px)) !important;
    }
    .mmorpg-chat-container {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    }

    /* Generic close-button hit area for any modal */
    [id$="-close"], [id^="close-"], button[aria-label="Close"] {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
    }

    /* Prevent body scroll bleed-through when modal is open */
    body.modal-open {
        position: fixed !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Smooth momentum scrolling inside modals */
    #profile-modal, #pokeball-shop-modal, #wild-battle-modal,
    #pvp-modal, #lb-modal, #dex-modal, #bp-modal-inner {
        -webkit-overflow-scrolling: touch;
    }

    /* Disable double-tap zoom on the map area */
    #map, #gameCanvas, .loadmap {
        touch-action: pan-x pan-y !important;
    }
}

/* Landscape phones — battle screen needs different proportions */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .navbar {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
    .navbar img { height: 26px !important; }
    .nav-pill { font-size: 10px !important; padding: 3px 6px !important; min-height: 28px !important; }

    .screen {
        top: 40px !important;
        height: calc(100vh - 40px) !important;
        height: calc(100dvh - 40px) !important;
    }

    /* Side-by-side map + card in landscape */
    .loadmap {
        flex-direction: row !important;
    }
    #map, #gameCanvas {
        height: 100% !important;
        max-height: 100% !important;
        width: 60% !important;
        max-width: 60% !important;
    }
    .card {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
        border-radius: 14px 0 0 14px !important;
    }

    #directions {
        transform: scale(0.65) !important;
    }

    /* Battle modal — compact landscape layout */
    #wild-battle-modal [style*="height:220px"],
    #wild-battle-modal [style*="height:180px"] {
        height: 130px !important;
    }
    #wb-attack, #wb-catch, #wb-run {
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}

/* ============================================================
   MOBILE PASS 2 — added 2026-05-04
   Covers modals previously missing mobile rules:
     #incubators-modal, #support-modal, #guide-modal,
     #trade-modal, #duel-modal, #raid-modal, #egg-lab-modal,
     #auction-modal, plus PvP inner buttons + NPC dialog bubble.
   Goal: every modal goes full-screen on phones; grids collapse;
   inner buttons hit 44px; text scales down.
   ============================================================ */
@media (max-width: 767px) {

    /* ---- Generic full-screen for inline-styled modals ---- */
    #incubators-modal > div,
    #support-modal > div,
    #guide-modal > div,
    #trade-modal > div,
    #duel-modal > div,
    #raid-modal > div,
    #egg-lab-modal > div,
    #auction-modal > div,
    #player-profile-modal > div {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Incubators / Evolve: light sheet (match desktop inline), no GPU blur dimming */
    #incubators-modal {
        background: rgba(0, 0, 0, 0.02) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Support: slightly stronger dim so the form stays readable */
    #support-modal {
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* DS modals (SolOrb shop, profile, gyms) — same light overlay on phones */
    #pokeball-shop-modal.ds-modal-backdrop,
    #profile-modal.ds-modal-backdrop,
    #gyms-modal.ds-modal-backdrop {
        background: rgba(0, 0, 0, 0.02) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ---- Incubators: 3-col grid → 1-col stack ---- */
    #incubators-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        min-height: 0 !important;
    }
    #incubator-pokemon-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    #incubators-modal h2 { font-size: 20px !important; }
    #incubators-modal h3 { font-size: 15px !important; }

    /* ---- Support modal: form inputs full width ---- */
    #support-modal h2 { font-size: 20px !important; }
    #support-modal input,
    #support-modal textarea,
    #support-modal select {
        width: 100% !important;
        font-size: 16px !important;        /* 16px prevents iOS auto-zoom */
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    #support-modal button {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* ---- Guide modal: stack sidebar + content ---- */
    #guide-modal [style*="grid-template-columns:260px"],
    #guide-modal [style*="grid-template-columns: 260px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #guide-modal h2 { font-size: 20px !important; }
    #guide-modal h3 { font-size: 16px !important; }

    /* ---- PvP modal inner ---- */
    #pvp-modal h2 { font-size: 18px !important; }
    #pvp-modal h3 { font-size: 14px !important; }
    .pvp-tab-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
        flex: 1 !important;
    }
    #pvp-refresh-rooms,
    #pvp-create-room-btn {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    /* ---- Trade / Duel / Raid / Egg Lab / Auction: collapse multi-col grids ---- */
    #trade-modal [style*="grid-template-columns:repeat(2"],
    #duel-modal [style*="grid-template-columns:repeat(2"],
    #raid-modal [style*="grid-template-columns:repeat(2"],
    #egg-lab-modal [style*="grid-template-columns:repeat(2"],
    #auction-modal [style*="grid-template-columns:repeat(2"],
    #trade-modal [style*="grid-template-columns: repeat(2"],
    #duel-modal [style*="grid-template-columns: repeat(2"],
    #raid-modal [style*="grid-template-columns: repeat(2"],
    #egg-lab-modal [style*="grid-template-columns: repeat(2"],
    #auction-modal [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #trade-modal [style*="grid-template-columns:repeat(3"],
    #duel-modal [style*="grid-template-columns:repeat(3"],
    #raid-modal [style*="grid-template-columns:repeat(3"],
    #egg-lab-modal [style*="grid-template-columns:repeat(3"],
    #auction-modal [style*="grid-template-columns:repeat(3"],
    #trade-modal [style*="grid-template-columns: repeat(3"],
    #duel-modal [style*="grid-template-columns: repeat(3"],
    #raid-modal [style*="grid-template-columns: repeat(3"],
    #egg-lab-modal [style*="grid-template-columns: repeat(3"],
    #auction-modal [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ---- NPC dialog bubble: shrink + recenter on phone ---- */
    #npc-dialog-box,
    .npc-speech-bubble,
    [id^="npc-dialog"] {
        max-width: calc(100vw - 24px) !important;
        width: auto !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        padding: 10px 12px !important;
    }
    .npc-quest-accept-btn,
    [id^="npc-quest"] button {
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* ---- All inline-modal close buttons hit 44px ---- */
    #incubators-close-btn,
    #pvp-close-btn,
    #support-modal button[id*="close"],
    #guide-modal button[id*="close"] {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 24px !important;
    }

    /* ---- Prevent iOS form-zoom across the board ---- */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ============================================================
   LANDSCAPE PASS 2 — moves grid 4-col so player can see arena
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    #wb-player-moves {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
    #wb-player-moves button {
        min-height: 32px !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
}

/* ============================================================
   MOBILE PASS 3 — added 2026-05-04
   Fixes from real device test in Telegram WebApp:
     - D-pad collided with Support / Starter-Pack buttons
     - Support button too wide, broke chat row layout
     - Mobile bottom-sheet (chat/raid/event) was dark-on-dark
   ============================================================ */
@media (max-width: 767px) {

    /* D-pad floats bottom-right, lifted high enough to clear the chat
       row (FAB icons + input + Support chip ~ 100-120px tall with
       safe-area). 140px gives clear breathing room from the chat row. */
    #directions {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
        right: 8px !important;
        transform: scale(0.72) !important;
        transform-origin: bottom right !important;
    }

    /* Compact chat container — single row, no wrapping when starter pack hidden */
    .mmorpg-chat-container {
        gap: 6px !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom, 8px)) !important;
        flex-wrap: wrap !important;
    }

    /* Support button → icon-only chip so the chat row fits horizontally */
    .mmorpg-chat-container .support-btn,
    #supportBtn {
        min-width: 44px !important;
        max-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 18px !important;
        gap: 0 !important;
        overflow: hidden !important;
        text-indent: -9999px !important;        /* hide "Support" text */
        position: relative !important;
    }
    .mmorpg-chat-container .support-btn::before,
    #supportBtn::before {
        content: '💬';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        text-indent: 0 !important;
    }

    /* Starter Pack banner — when visible, give it its own tight row */
    #starterPackBtn {
        font-size: 13px !important;
        padding: 10px 12px !important;
        order: 99 !important;                   /* push to end of flex row */
    }

    /* When starter-pack is hidden (display:none), chat row stays compact;
       chat input grows to fill remaining space */
    .mmorpg-chat-input,
    #mmorpgChatInput {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

/* Very small phones (≤380px) — even tighter d-pad */
@media (max-width: 380px) {
    #directions {
        transform: scale(0.65) !important;
        right: 4px !important;
    }
}

/* ============================================================
   TG WebApp — push modal contents down so they clear the
   close-bar (~60px). tg-webapp.js adds body.tg-webapp on TG.
   We pad INSIDE the modal card, not the backdrop, so layout
   stays simple and doesn't conflict with mobile full-screen rules.
   ============================================================ */
@media (max-width: 767px) {
    /* Wild battle: pad inside container so HUD clears close-bar */
    body.tg-webapp #wb-container {
        padding-top: 50px !important;
        box-sizing: border-box !important;
    }

    /* Other full-screen modals — pad their inner card */
    body.tg-webapp .ds-modal-card,
    body.tg-webapp #profile-modal > div,
    body.tg-webapp #pokeball-shop-modal > div,
    body.tg-webapp #pvp-modal > div,
    body.tg-webapp #incubators-modal > div,
    body.tg-webapp #support-modal > div,
    body.tg-webapp #guide-modal > div,
    body.tg-webapp #trade-modal > div,
    body.tg-webapp #duel-modal > div,
    body.tg-webapp #raid-modal > div,
    body.tg-webapp #egg-lab-modal > div,
    body.tg-webapp #auction-modal > div,
    body.tg-webapp #lb-modal,
    body.tg-webapp #dex-modal,
    body.tg-webapp #bp-modal-inner {
        padding-top: 50px !important;
    }
}