/* ========== ЦЕНТРАЛИЗАЦИЯ ТОЛЬКО ДЛЯ РЕГИСТРАЦИИ И ВЫБОРА ПРЕДМЕТОВ ========== */

/* Централизация только для экранов приветствия, регистрации, гостя */
#welcomeScreen,
#registrationScreen,
#guestScreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: white;
    overflow: hidden !important;
}

/* Экран выбора предметов - НЕ ТРОГАЕМ, оставляем как есть */
#subjectSelectScreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: white;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Активные экраны - ДЛЯ ПРИВЕТСТВИЯ, РЕГИСТРАЦИИ, ГОСТЯ */
#welcomeScreen.active,
#registrationScreen.active,
#guestScreen.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

/* Экран предметов - НЕ МЕНЯЕМ, оставляем его собственные стили */
#subjectSelectScreen.active {
    display: flex !important;
    flex-direction: column !important;
    /* Убираем центрирование, так как у него своя структура */
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Централизация содержимого ДЛЯ ЭКРАНОВ ПРИВЕТСТВИЯ, РЕГИСТРАЦИИ, ГОСТЯ */
#welcomeScreen.active .welcome-content,
#registrationScreen.active .registration-container,
#guestScreen.active .guest-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 90vh !important;
    padding: 20px !important;
    overflow-y: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

/* Для экрана предметов - ВОССТАНАВЛИВАЕМ ИСХОДНЫЕ СТИЛИ */
#subjectSelectScreen.active .subject-selection {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Градиентная шапка для экрана предметов - фиксированная сверху */
#subjectSelectScreen.active .gradient-header-strip {
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Контейнер с сеткой предметов - скроллится */
#subjectSelectScreen.active .subject-grid-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 20px 30px !important;
    min-height: 0 !important;
}

/* Сетка предметов */
#subjectSelectScreen.active .subject-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* ========== АДАПТИВНОСТЬ ТОЛЬКО ДЛЯ ЭКРАНОВ РЕГИСТРАЦИИ ========== */

/* Для очень высоких экранов добавляем отступы сверху и снизу */
@media (min-height: 800px) {
    #welcomeScreen.active .welcome-content,
    #registrationScreen.active .registration-container,
    #guestScreen.active .guest-container {
        padding: 40px 20px !important;
    }
}

/* Для экранов с маленькой высотой - уменьшаем отступы и включаем скролл */
@media (max-height: 700px) {
    #welcomeScreen.active .welcome-content,
    #registrationScreen.active .registration-container,
    #guestScreen.active .guest-container {
        padding: 20px 15px !important;
        max-height: 85vh !important;
    }
}

@media (max-height: 600px) {
    #welcomeScreen.active .welcome-content,
    #registrationScreen.active .registration-container,
    #guestScreen.active .guest-container {
        padding: 15px 12px !important;
        max-height: 90vh !important;
        justify-content: flex-start !important;
    }
}

@media (max-height: 500px) {
    #welcomeScreen.active .welcome-content,
    #registrationScreen.active .registration-container,
    #guestScreen.active .guest-container {
        padding: 10px !important;
        max-height: 95vh !important;
        justify-content: flex-start !important;
    }
    
    .welcome-logo {
        margin-bottom: 15px !important;
        padding: 12px !important;
    }
    
    .logo-emoji {
        font-size: 36px !important;
    }
    
    .logo-text {
        font-size: 20px !important;
    }
}

/* Гарантируем, что чат не показывается на этих экранах */
#welcomeScreen.active ~ .chat-container,
#welcomeScreen.active ~ .chat-header,
#welcomeScreen.active ~ .app-message,
#registrationScreen.active ~ .chat-container,
#registrationScreen.active ~ .chat-header,
#registrationScreen.active ~ .app-message,
#guestScreen.active ~ .chat-container,
#guestScreen.active ~ .chat-header,
#guestScreen.active ~ .app-message,
#subjectSelectScreen.active ~ .chat-container,
#subjectSelectScreen.active ~ .chat-header,
#subjectSelectScreen.active ~ .app-message {
    display: none !important;
}

/* Оставляем скролл для выпадающих списков */
.dropdown-list.active {
    overflow-y: auto !important;
    max-height: 250px !important;
}

/* Скрываем математические меню из этого файла - они управляются своими стилями */
#mainMenuScreen,
#quickCountMenu,
#arithmeticMenu,
#trigonometryMenu,
#multiplicationMenu,
#divisionMenu,
#exponentiationMenu,
#rootMenu,
#trigValuesMenu,
#reductionFormulasMenu,
#trainingScreen {
    /* Не трогаем эти экраны - они управляются math.css */
}

/* Дополнительные фиксы для центрирования экранов регистрации */
.welcome-content {
    animation: fadeIn 0.5s ease;
    margin: auto !important;
}

.registration-container {
    margin: auto !important;
}

.guest-container {
    margin: auto !important;
}

/* Поддержка ландшафтной ориентации ТОЛЬКО ДЛЯ ЭКРАНОВ РЕГИСТРАЦИИ */
@media (max-height: 500px) and (orientation: landscape) {
    #welcomeScreen.active .welcome-content,
    #registrationScreen.active .registration-container,
    #guestScreen.active .guest-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        max-height: 90vh !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .welcome-logo {
        margin-bottom: 0 !important;
        min-width: 200px !important;
    }
    
    .buttons-container {
        min-width: 180px !important;
    }
}

/* Адаптивность для экрана предметов - оставляем как было */
@media (max-width: 500px) {
    #subjectSelectScreen.active .subject-grid-container {
        padding: 15px 15px 25px !important;
    }
    
    #subjectSelectScreen.active .subject-grid {
        grid-template-columns: 1fr !important;
        max-width: 300px !important;
        gap: 15px !important;
    }
}

@media (max-height: 700px) {
    #subjectSelectScreen.active .subject-grid-container {
        padding: 15px 15px 20px !important;
    }
}