/* ============================================
   VIEWPORT FIX
   Исправление проблемы со скроллом и дерганием экрана
   ============================================ */

/* Запрещаем скролл на всей странице */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000 !important; /* Черный фон вместо синего */
}

/* Фиксим canvas-wrapper - убираем overflow: auto */
.canvas-wrapper {
    overflow: hidden !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background-color: #000000 !important; /* Черный фон для полос */
}

/* Canvas центрируется и сохраняет пропорции */
#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

/* Запрещаем выделение текста и перетаскивание на игровом экране */
.canvas-wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Предотвращаем bounce эффект на iOS */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* Черный фон для игровых элементов */
.canvas-wrapper {
    background: #000000 !important;
}

#game-canvas {
    background: #000000 !important;
}

/* Черный фон для body на игровой странице */
body:has(.canvas-wrapper) {
    background: #000000 !important;
}

/* Разрешаем скролл только в определенных меню */
.skill-menu .canvas-wrapper,
.settings-menu .canvas-wrapper,
.colony-menu .canvas-wrapper,
.stat-menu .canvas-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important; /* Меняем с fixed на relative для скролла */
    height: 100vh;
    max-height: 100vh;
}

/* Дополнительно для stat-menu - разрешаем скролл на самом контейнере */
.stat-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Фикс для мобильных устройств */
@media (max-width: 768px) {
    html, body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    
    .canvas-wrapper {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Скролл в меню на мобильных тоже работает */
    .skill-menu .canvas-wrapper,
    .settings-menu .canvas-wrapper,
    .colony-menu .canvas-wrapper,
    .stat-menu .canvas-wrapper {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .stat-menu {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}