/* ==========================================================================
   1. СБРОС СТИЛЕЙ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Inter, Montserrat, sans-serif;
}

body {
    background-color: #ebebeb;
    color: #fff;
    overflow-x: hidden;
    padding-top: 70px; /* Отступ под липкую шапку */
}
body.modal-open {
    overflow: hidden;
}
/* Общий контейнер для центрирования контента */
.fixed-size {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* ==========================================================================
   2. НАВИГАЦИОННАЯ ШАПКА (STICKY HEADER)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Прозрачная шапка на главном экране */
.navigation-transparent {
    background-color: #cc1818;
}

/* Белая шапка при прокрутке */
.site-header.sticky {
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Инверсия цветов при прокрутке */
.site-header.sticky .navigation-item,
.site-header.sticky .navigation-authorization-login-button {
    color: #111;
}
.site-header.sticky .arrow-icon path {
    fill: #111;
}
.site-header.sticky .navigation-authorization-line line {
    stroke: #000;
    opacity: 0.15;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.navigation-side {
    display: flex;
    align-items: center;
    gap: 30px;
}

.navigation-item {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.navigation-item:hover {
    color: #ff5722;
}

.arrow-icon {
    transition: transform 0.2s ease;
}

/* Выпадающее меню "Ресурсы" */
.navigation-menu {
    position: relative;
    padding: 10px 0;
}

.navigation-menu-wrapper {
    position: absolute;
    top: 100%;
    left: -20px;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.navigation-menu:hover .navigation-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navigation-menu:hover .arrow-icon {
    transform: rotate(180deg);
}

.navigation-menu-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 10px 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.navigation-menu-item {
    padding: 12px 20px;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.navigation-menu-item:hover {
    background-color: #f9f9f9;
    color: #ff5722;
}

/* Правая часть шапки */
.navigation-authorization-login-button {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.navigation-authorization-login-button:hover {
    color: #ff5722;
}

.navigation-authorization-line {
    display: flex;
    align-items: center;
}

.navigation-authorization-start-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #049619;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(4, 150, 25, 0.2);
    transition: background-color 0.2s;
}

.navigation-authorization-start-button:hover {
    background-color: #037a14;
}
.donate-page-body {
    background-color: #fff; /* Делаем белым только для доната */
}
/* --- ОБЩИЕ СТИЛИ ДЛЯ ОБЕИХ ПЛАШЕК ШАПКИ --- */
.header-profile-dropdown {
    position: absolute !important;
    top: calc(100% + 15px) !important;
    right: 0 !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.header-profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   ОРИГИНАЛЬНЫЕ СТИЛИ ВСПЛЫВАЮЩЕГО ОКНА ИЗ КОДА AMAZING ONLINE
   ========================================================================== */
/* Кастомный чекбокс - улучшенные стили */
.custom-checkbox {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.custom-checkbox:hover {
    border-color: #ff5722 !important;
}

.custom-checkbox svg {
    display: none !important;
    width: 12px !important;
    height: 12px !important;
}

.custom-checkbox.checked {
    border-color: #ff5722 !important;
    background: #ff5722 !important;
}

.custom-checkbox.checked svg {
    display: block !important;
}

.custom-checkbox.checked svg path {
    fill: #ffffff !important;
}

/* Стили для лейбла чекбокса */
.custom-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.custom-checkbox-label:hover .custom-checkbox:not(.checked) {
    border-color: #ff5722 !important;
}
/* Контейнер выпадающего меню из твоего кода */
.navigation-authorization-account-info-menu {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: 32px !important; /* [ИСПРАВЛЕНО] Сдвигаем плашку строго под блок имени, а не под 3 точки */
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    width: auto !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* Состояние скрытия */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Эффект стрелочки-уголка, парящей ровно над аватаркой */
.navigation-authorization-account-info-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    right: 22px !important; /* Выравнивание треугольника четко по центру фото */
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #ffffff !important;
}

/* Состояние активации */
.navigation-authorization-account-info-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Пункты меню (Элементы из оригинального кода) */
.navigation-authorization-account-info-menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    text-decoration: none !important;
    color: #4b5563 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background-color 0.15s, color 0.15s !important;
    cursor: pointer !important;
}

/* Ховер-эффект для ссылок */
.navigation-authorization-account-info-menu-item:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
}

/* [ТОЧНЫЙ РАЗМЕР ИЗ КОДА] Круглая маленькая аватарка внутри выпадающего списка */
.navigation-authorization-account-info-avatar.avatar-circle {
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* Серый цвет для названия сервера внутри выпадающей плашки */
.navigation-authorization-account-info-menu-item .hdr-drop-server {
    color: #9ca3af !important;
    font-weight: 600 !important;
    margin-left: 5px !important;
}

/* Пункт: Войти в другой аккаунт (Нижняя строка) */
.navigation-authorization-account-info-menu-item.sign-in-another {
    border-top: 1px solid #f3f4f6 !important;
    color: #10b981 !important; /* Принудительно оригинальный мягкий зеленый цвет текста */
}
.navigation-authorization-account-info-menu-item.sign-in-another:hover {
    background-color: #f0fdf4 !important;
    color: #047857 !important;
}

/* Элементы компактного списка трех точек */
.hdr-dots-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 20px !important;
    color: #4b5563 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s !important;
    text-align: left !important;
}
.hdr-dots-item:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
}

/* Цветные контурные иконки из твоего скриншота */
.hdr-dots-icon {
    width: 16px !important;
    height: 16px !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
}
/* Подключите ваши иконки (шестеренка, кошелек, выход) */
.icon-blue-set { background-image: url('/assets/images/icons/set-pass.svg'); filter: drop-shadow(0 0 0 #0076ff); }
.icon-orange-wallet { background-image: url('/assets/images/icons/set-email.svg'); }
.icon-red-exit { background-image: url('/assets/images/icons/set-server.svg'); }
/* ==========================================
   1. ГЛАВНЫЙ ЭКРАН (ИСПРАВЛЕНИЕ НАПЛЫВА ФОНА)
   ========================================== */
.index-preview {
    position: relative;
    /* Зафиксировали точную высоту, чтобы контент не растягивался бесконечно вниз */
    height: calc(100vh - 70px); 
    min-height: 500px; /* Минимальный порог для мелких экранов */
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #0b0202;
}
.index-preview-title-container {
    max-width: 360px;
    width: 100%;
    margin-bottom: 30px;
    display: block;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.4));
    
    /* [НОВОЕ] Смещаем логотип вправо на 20 пикселей */
    margin-left: 30px; 
}
.index-preview-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Чтобы фоны не мешали кликам по кнопкам */
}

.index-preview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-preview-background.event { z-index: 2; mix-blend-mode: lighten; }
.index-preview-background.red-1 { z-index: 3; opacity: 0.8; }
.index-preview-background.red-2 { z-index: 4; }

.index-preview-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.index-preview-section.info {
    max-width: 540px;
    position: relative;
    z-index: 15;
}

.index-preview-title {
    max-width: 340px;
    margin-bottom: 25px;
    display: block;
}

.index-preview-text-box-title { display: none; }

.index-preview-text-box-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    margin-bottom: 35px;
    display: block;
}

/* Кнопки главного экрана */
.index-preview-actions {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 45px;
}

.index-preview-action-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.index-button-start {
    background-color: #049619;
    color: #fff;
    text-decoration: none;
    padding: 16px 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(4, 150, 25, 0.4);
    transition: transform 0.2s, background-color 0.2s;
}

.index-button-start:hover {
    transform: translateY(-2px);
    background-color: #037a14;
}

.index-preview-action-button-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.index-preview-action-button-label--text {
    color: #3baf58;
    font-size: 0.75rem;
    font-weight: 600;
}

.button-video {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    margin-top: 4px;
    transition: transform 0.2s;
}

.button-video:hover { transform: translateY(-2px); }

.button-video-circle {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-video-text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.button-video-text--transparent {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Панель мониторинга */
.app-online-monitoring-banner {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    padding: 14px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.monitoring-section { display: flex; align-items: center; }
.section__inner { display: flex; align-items: center; gap: 12px; position: relative; }

.section__value {
    font-size: 1.7rem;
    font-weight: 900;
    color: #000;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section__value-marker {
    width: 6px;
    height: 6px;
    background-color: rgb(132, 202, 19);
    border-radius: 50%;
}

.section__label {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
}

.monitoring-divider {
    width: 1px;
    height: 32px;
    background-color: #e5e7eb;
    margin: 0 20px;
}

/* Тултип онлайна */
.section__hint { position: relative; display: flex; align-items: center; cursor: pointer; color: #9ca3af; margin-left: 4px; }
.hint-icon { width: 14px; height: 14px; }

.section__hint-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #111827;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
}

.section__hint:hover .section__hint-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Персонаж и элементы главного экрана */
.char-holder {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
}

.index-preview-char { height: 90vh; width: auto; object-fit: contain; align-self: flex-end; }
.button-age__absolute { position: absolute; left: 40px; bottom: 30px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 4px 8px; color: rgba(255,255,255,0.4); font-size: 0.75rem; font-weight: 700; z-index: 50; }

/* ==========================================================================
   4. ВСПЛЫВАЮЩИЙ МЕДИА-ВЬЮЕР СОБЫТИЯ
   ========================================================================== */
.index-event-wrapper {
    position: absolute;
    right: 40px;
    bottom: 40px;
    background: rgba(11, 2, 2, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 12px;
    z-index: 60;
    text-align: center;
    width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.index-event__img img { max-width: 100%; height: auto; margin-bottom: 15px; }
.index-event__about.large { display: block; background: #ff5722; color: #fff; text-decoration: none; padding: 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; }
.index-event__footer { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-top: 10px; text-transform: uppercase; }

/* Всплывающее окно на весь экран */
.index-event-about-wrapper {
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 2, 2, 0.96);
    z-index: 9999;display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Состояние активации всплывающего промо-окна */
.index-event-about-wrapper.active {
    opacity: 1;
    visibility: visible;
}

.index-event-about {
    width: 90%;
    max-width: 850px;
    text-align: center;
    position: relative;
}

.index-event-about--title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ff5722;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.index-event-about--description {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Медиа-плеер внутри промо-окна */
.index-event-about--media-viewer {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.event-popup-close-cross {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #a0aec0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}

.event-popup-close-cross:hover {
    color: #ff5722; /* Оранжевый при наведении */
}
.viewer-overflow {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.viewer-player-area {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}

.viewer-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease-in-out;
}

/* Лента миниатюр промо-окна */
.viewer-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.viewer-player-area-item {
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.viewer-player-area-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.viewer-player-area-item:hover {
    transform: scale(1.04);
    opacity: 0.8;
}

.viewer-player-area-item.selected {
    border-color: #ff5722;
    opacity: 1;
}

/* ==========================================================================
   3. СЕКЦИЯ ТРЕХРЯДНОЙ ГАЛЕРЕИ (ИСПРАВЛЕНО)
   ========================================================================== */
.gallery-section {
    background-color: #fcfcfc;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
}

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-header h2 {
    font-size: 1.8rem;
    font-weight: 900;
    color: #111;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.gallery-header p {
    font-size: 0.95rem;
    color: #666;
}

/* Общая стена для всех лент */
.gallery-marquee-wall {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.gallery-marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
}

.gallery-marquee-track {
    display: flex !important;
    flex-direction: row !important;
    /* [КРИТИЧЕСКИЙ ФИКС] Запрещаем картинкам переноситься на новую строку, */
    /* заставляя их выстроиться в одну бесконечную горизонтальную линию */
    flex-wrap: nowrap !important; 
    width: max-content !important; /* Убеждаемся, что ширина трека рассчитывается по контенту */
    gap: 15px !important;
    padding: 5px 0 !important;
}

/* При наведении курсора на ВСЮ стену прокрутка останавливается */
.gallery-marquee-wall:hover .gallery-marquee-track {
    animation-play-state: paused;
}

/* Привязываем бесконечную анимацию ко всем трем лентам */
.gallery-marquee-wall .gallery-marquee-container:nth-child(1) .gallery-marquee-track,
.gallery-marquee-wall .gallery-marquee-container:nth-child(3) .gallery-marquee-track {
    animation: scrollLeft 55s linear infinite;
}

/* Ряд 2 (средний) получает отрицательный делей для красивого шахматного сдвига */
.gallery-marquee-wall .gallery-marquee-container:nth-child(2) .gallery-marquee-track {
    animation: scrollLeft 55s linear infinite;
    animation-delay: -15s; /* Разрывает вертикальные линии карточек */
}

/* Карточки картинок */
.gallery-marquee-track .grid-item {
    width: 320px; 
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.gallery-marquee-track .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-marquee-track .grid-item:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
/* ==========================================================================
   ОКНО АВТОРИЗАЦИИ (ОБНОВЛЕНО ПОД ОРИГИНАЛ 730px x 830px)
   ========================================================================== */

/* Базовый оверлей */
#auth-modal.modal-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 200000;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
#auth-modal.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Контейнер в стиле Amazing [ОБНОВЛЕНО ПОД ФИКСИРОВАННЫЙ РАЗМЕР] */
.sign-in-overlay {
    background: #ffffff;
    border-radius: 24px;
    
    /* Устанавливаем точные размеры из оригинала */
    width: 730px !important;
    height: 830px !important;
    max-width: 95%; /* Защита для средних экранов ноутбуков */
    
    display: flex;
    overflow: visible; /* Чтобы выпадающий список серверов не обрезался */
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* Картинка персонажа слева [ОБНОВЛЕНО] */
.sign-in-image {
    width: 290px !important; /* Фиксированная оригинальная ширина левой части */
    height: 100% !important; /* Растягиваем на полные 830px высоты */
    object-fit: cover; /* Заставляем арт заполнить блок без деформации */
    object-position: center bottom;
    align-self: flex-end;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

/* Правый контент формы [ОБНОВЛЕНО] */
.sign-in-content {
    flex: 1 !important; /* Автоматически занимает оставшиеся 440px ширины */
    height: 100% !important;
    padding: 45px !important; /* Больше отступов для свободного дыхания элементов */
    box-sizing: border-box;
    
    /* Распределяем элементы по вертикали, чтобы они красиво заняли всю высоту 830px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; 
}

/* Шапка окна */
.sign-in-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0 !important; /* Убираем жесткий маргин, им теперь управляет сетка */
}
.sign-in-header-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
}
.sign-in-header-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #9ca3af;
    cursor: pointer;
}

/* Поля формы [ОБНОВЛЕНО] */
.sign-in-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important; /* Умеренный шаг между полями ввода */
    width: 100%;
}

.sign-in-form-input {
    margin-bottom: 0 !important; /* Отступами управляет gap у формы */
    width: 100%;
}
.sign-in-form-input-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 8px;
}

.amazing-auth-input {
    width: 100%;
    padding: 16px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
}
.amazing-auth-input:focus {
    border-color: #ff5722;
}

/* Принудительное выравнивание капчи, чтобы она не зажималась */
.g-recaptcha {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ==========================================================================
   АДkeywordАПТИВНОСТЬ ПОД ТЕЛЕФОНЫ (СБРОС ФИКСИРОВАННЫХ РАЗМЕРОВ)
   ========================================================================== */



/* ==========================================================================
   ОРИГИНАЛЬНЫЙ СЕЛЕКТОР СЕРВЕРОВ
   ========================================================================== */
.custom-select-container {
    position: relative;
    width: 100%;
}

.selector-server {
    width: 100%;
    padding: 16px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

.custom-select-container.active .selector-server {
    border-color: #ff5722;
}

.selector-server-placeholder {
    font-size: 0.95rem;
    font-weight: 600;
    color: #9ca3af;
}
.selector-server-placeholder.shown {
    color: #111827; /* Цвет выбранного значения */
}

/* ==========================================================================
   ОРИГИНАЛЬНАЯ СТИЛИЗАЦИЯ ИНПУТА ВЫБОРА СЕРВЕРА (ОБНОВЛЕНО)
   ========================================================================== */
.selector-server {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 22px !important;
    background-color: #fcfcfc !important; /* Легкий чистый светлый фон */
    border: 2px solid #E8E8E8 !important;   /* [ИСПРАВЛЕНО] Тонкая аккуратная рамка из оригинала */
    box-sizing: border-box !important;
    border-radius: 3px !important;          /* [ИСПРАВЛЕНО] Строгое скругление 3px как на Amazing */
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Эффект при активации/открытии списка */
.custom-select-container.active .selector-server {
    border-color: #ff5722 !important; /* Подсветка фирменным оранжевым при клике */
    background-color: #ffffff !important;
}

/* Подгоняем выпадающий список вариантов под новый строгий стиль */
.selector-server-variants {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #E8E8E8 !important; /* Такая же рамка, как у инпута */
    border-radius: 3px !important;        /* Скругление 3px для гармонии */
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
    z-index: 9999 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    
    /* Состояние скрытия */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-5px) !important;
    transition: all 0.2s ease !important;
}

.custom-select-container.active .selector-server-variants {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Корректируем отступы элементов внутри списка */
.selector-server-variant {
    padding: 12px 22px !important; /* Выравниваем внутренний отступ по кнопке */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.selector-server-variant:hover {
    background: #fdfdfd !important;
}

/* Цветной кружок сервера */
.selector-server-variant-figure {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.selector-server-variant-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
.selector-server-icon {
    min-width: 13px !important;
    min-height: 13px !important;
    margin-left: 20px !important;
    transform: rotate(90deg) !important; /* В оригинале она изначально повернута боком */
    transition: opacity .1s linear, transform .2s linear !important;
    background-image: url('/assets/images/icons/arrow.svg') !important; /* Путь к файлу картинки */
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: .3 !important; /* Полупрозрачная по умолчанию */
}

/* Эффект при наведении на селектор: стрелочка становится ярче */
.selector-server:hover .selector-server-icon {
    opacity: .7 !important;
}

/* Эффект при открытии списка: стрелочка плавно поворачивается вниз и горит на 100% */
.custom-select-container.active .selector-server-icon {
    transform: rotate(270deg) !important; /* [ИСПРАВЛЕНО] 270 градусов развернут стрелочку ровно вниз */
    opacity: 1 !important;
}
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}
/* ==========================================================================
   ФИКС БЕСШОВНОГО ДВИЖЕНИЯ (МАТЕМАТИЧЕСКИЙ РАСЧЕТ)
   ========================================================================== */
@keyframes scrollLeft {
    0% { 
        /* Используем translate3d вместо translateX для включения аппаратного */
        /* ускорения видеокарты, чтобы анимация шла плавно без микро-дерганий */
        transform: translate3d(0, 0, 0); 
    }
    100% { 
        /* [ИСПРАВЛЕНО] Строго -50%. Контейнер сдвигается ровно на длину первой */
        /* группы оригинальных картинок, а дубли бесшовно встают на их место. */
        transform: translate3d(-50%, 0, 0); 
    }
}

/* ==========================================
   4. СЕКЦИЯ СЛАЙДЕРА (МАТРИЦА СТИЛЕЙ СНИМКА)
   ========================================== */
.atmosphere-section {
    background-color: #fcfcfc;
    width: 100%;
    padding: 70px 0;
    font-family: inherit;
}

.atmosphere-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.atmo-content {
    flex: 1;
    max-width: 420px;
}

/* Квадратный скругленный бэйдж значка из скриншота */
.atmo-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.svg-icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
}

.svg-icon-holder svg {
    width: 20px;
    height: 20px;
}

/* Заголовок в нижнем регистре с высокой плотностью */
.atmo-title {
    font-size: 2.3rem;
    font-weight: 900;
    color: #1a1d20;
    line-height: 1.05;
    margin-bottom: 25px;
    text-transform: lowercase; /* Принудительный нижний регистр как на фото */
    letter-spacing: -0.5px;
}

.atmo-text {
    font-size: 0.95rem;
    color: #8c92ac; /* Приглушенный серо-голубой цвет текста со скриншота */
    line-height: 1.6;
    margin-bottom: 40px;
    min-height: 60px;
}

/* Круглые серые кнопки управления со скриншота */
.slider-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.slider-btn {
    width: 44px;
    height: 44px;
    border: none;
    background-color: #f3f4f7;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1d20;
    font-weight: 300;
    transition: background-color 0.2s, transform 0.1s;
}

.slider-btn:hover {
    background-color: #e5e7eb;
}
.slider-btn:active {
    transform: scale(0.96);
}

.slider-counter {
    font-size: 0.85rem;
    font-weight: 700;
    color: #babecf;
    letter-spacing: 2px;
}

#current-slide-num {
    color: #1a1d20;
}

/* Плоская прямоугольная оранжевая кнопка действия */
.btn-play-free {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: linear-gradient(90deg, #ff5c26, #ff7439);
    color: #fff;
    padding: 18px 36px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(255, 92, 38, 0.25);
    transition: transform 0.2s, filter 0.2s;
}

.btn-play-free:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-grid-icon {
    opacity: 0.9;
}

/* Правая сторона плеера */
.atmo-slider-display {
    flex: 1.3;
}

.slider-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.slide-image {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

/* Контейнер таймера в углу картинки */
.circle-timer {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.25); /* Полупрозрачная темная подложка */
    backdrop-filter: blur(4px);
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-timer svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Поворачиваем, чтобы заполнение шло строго сверху */
}


/* Фоновый круг (незаполненная часть) */
.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3.5;
}

/* Активный круг (заполняющаяся линия) */
.circle {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3.5;
    stroke-linecap: round;
    
    stroke-dasharray: 100;
    stroke-dashoffset: 100; /* 100 — пустой круг, 0 — полностью заполненный */
    
    /* Убрали transition и animation, чтобы код управлял линией мгновенно и без задержек */
}

/* ==========================================
   5. СЕКЦИЯ "КАК НАЧАТЬ ИГРАТЬ" (ФИКС ПО МАКЕТУ)
   ========================================== */
.how-to-start {
    background-color: #fcfcfc;
    width: 100%;
    padding: 70px 0;
    border-top: 1px solid #f1f1f1;
}

/* Шапка блока */
.how-to-start-header {
    text-align: center;
    margin-bottom: 50px;
}

.how-to-start-header h2 {
    font-size: 2rem;
    font-weight: 900;
    color: #111;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.how-to-start-header p {
    font-size: 0.95rem;
    color: #8c92ac;
    font-weight: 600;
}

/* Сетка шагов по макету */
.steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.step {
    flex: 1;
    max-width: 350px;
}

/* Нумерация "Шаг 1 / Шаг 2" */
.step-number {
    font-size: 0.8rem;
    font-weight: 800;
    color: #babecf;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.step-title {
    font-size: 1.9rem;
    font-weight: 900;
    color: #1a1d20;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Стилизация внутренних оригинальных текстовых спанов */
.step-description {
    font-size: 0.9rem;
    line-height: 1.6;
}

.step-description .dark-gray { color: #1a1d20; }
.step-description .gray { color: #8c92ac; }
.step-description .medium { font-weight: 600; }
.step-description .semibold { font-weight: 800; }
.step-description .regular { font-weight: 500; }

/* Кнопка "Скачать игру" Шага 1 */
.download-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #049619;
    color: #fff;
    text-decoration: none;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(4, 150, 25, 0.3);
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 25px;
    margin-bottom: 20px;
}

.download-button:hover {
    background-color: #037a14;
    transform: translateY(-2px);
}

/* Мета-панель под кнопкой */
.for-windows-and-safely {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.for-windows, .safely {
    display: flex;
    align-items: center;
    gap: 6px;
}

.for-windows--text, .safely--text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #babecf;
}

.separator {
    width: 1px;
    height: 12px;
    background-color: #e5e7eb;
}

.privacy {
    font-size: 0.75rem;
    color: #babecf;
    line-height: 1.4;
    font-weight: 600;
}

.privacy a {
    color: #8c92ac;
    text-decoration: underline;
}

/* Кнопка "Правила игры" Шага 2 */
.step-footer-link {
    display: inline-block;
    text-decoration: none;
    color: #1a1d20;
    border: 1px solid #e5e7eb;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    margin-top: 30px;
}

.step-footer-link:hover {
    background-color: #ff5722;
    color: #fff;
    border-color: #ff5722;
}

/* Центральный блок с изображением */
.img {
    flex: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img img {
    max-width: 110%;
    height: auto;
    display: block;
}

/* ==========================================
   БЛОК ТЕХПОДДЕРЖКИ (ИДЕАЛЬНАЯ КОПИЯ СНИМКА)
   ========================================== */
.contact-support-banner {
    max-width: 1200px;
    margin: 50px auto 0 auto;
    background-color: #f4f4f4; /* Точный мягкий серый фон плашки */
    border-radius: 10px;
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-support-banner .text-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.text-box__text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #797979; /* Приглушенный благородный серый цвет текста */
    user-select: none;
}

.contact-support-banner .actions {
    display: flex;
    gap: 15px;
}

.actions__button {
    text-decoration: none;
    padding: 14px 45px 14px 30px; /* Больше отступа справа, чтобы освободить место стрелке */
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    position: relative; /* Нужно для фиксации стрелочки в углу */
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.actions__button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Стилизация иконок-уголков в кнопках */
.arrow-corner {
    position: absolute;
    top: 10px;
    right: 12px;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.actions__button:hover .arrow-corner {
    transform: translate(1px, -1px); /* Легкий интерактивный сдвиг стрелки при наведении */
}

/* Ярко-голубой градиент из скриншота */
.actions__button.write-chat {
    background: linear-gradient(135deg, #00b0ff 0%, #008be3 100%);
    box-shadow: 0 4px 15px rgba(0, 160, 255, 0.15);
}

/* Сочный красно-оранжевый градиент из скриншота */
.actions__button.write-to-support {
    background: linear-gradient(135deg, #ff2a14 0%, #ff7324 100%);
    box-shadow: 0 4px 15px rgba(255, 60, 20, 0.2);
}

/* Адаптация под планшеты и мобильные телефоны */
@media (max-width: 900px) {
    .contact-support-banner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 25px 20px;
    }
    .contact-support-banner .actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .actions__button {
        width: 100%;
        justify-content: center;
        padding: 14px 30px;
    }
    .arrow-corner {
        right: 20px;
        top: 16px;
    }
}

/* ==========================================
   6. СЕКЦИЯ СИСТЕМНЫХ ТРЕБОВАНИЙ (ФИКС ШАПКИ)
   ========================================== */
.requirements-section {
    background-color: #fcfcfc;
    width: 100%;
    padding: 40px 0 60px 0;
}

.req-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Флекс-контейнер шапки для правильного распределения по краям */
.system-requirements-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding-bottom: 35px;
}

.system-requirements-header-title-box {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.system-requirements-header-border {
    width: 36px;
    height: 36px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.system-requirements-header-border-img {
    width: 12px;
    height: 12px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Вращение оригинальной картинки-плюса при разворачивании аккордеона */
.system-requirements-header:not(.closed) .system-requirements-header-border-img {
    transform: rotate(45deg);
}

.system-requirements-header-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1d20 !important; /* Гарантированный темный цвет */
    letter-spacing: -0.5px;
    user-select: none;
}

/* Зеленая плашка */
.system-requirements-header-compatible {
    background-color: #dcfce7 !important;
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.system-requirements-header-compatible-text {
    color: #15803d !important;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Анимационный Grid-контейнер */
.accordion-animator {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    overflow: hidden;
}

.accordion-animator.active {
    grid-template-rows: 1fr;
}

.accordion-content {
    min-height: 0;
}

/* Табличная сетка */
.system-requirements-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.system-requirements-row {
    display: table-row;
}

.system-requirements-cell {
    display: table-cell;
    width: 25%;
    padding: 20px 15px 20px 25px;
    border-bottom: 1px solid #f5f6f8;
    vertical-align: middle;
    font-size: 0.85rem;
    text-align: left;
    background-color: #ffffff;
}

.system-requirements-row.table-header .system-requirements-cell {
    border-bottom: 2px solid #1a1d20;
    padding-top: 25px;
    padding-bottom: 22px;
}

.system-requirements-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.system-requirements-item-header-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #1a1d20;
}

.bar-icon {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: -2.5px;
    margin-right: 2px;
    font-weight: 900;
}
.orange-bars { color: #ffae73; }
.red-bars { color: #ff7360; }
.badge-icon-diamond { font-size: 1.1rem; }

.system-requirements-cell.param-name {
    color: #babecf;
    font-weight: 600;
    padding-left: 30px;
}

.system-requirements-cell.param-val {
    color: #1a1d20;
    font-weight: 800;
}

@media (max-width: 800px) {
    .system-requirements-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* ==========================================
   7. ПОДВАЛ САЙТА (FOOTER)
   ========================================== */
.main-footer {
    background-color: #fcfcfc;
    width: 100%;
    padding-top: 80px;
    border-top: 1px solid #f1f1f1;
    color: #000;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-top: 30px;
}

.footer-info {
    max-width: 460px;
}

.footer-logo {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    color: #1a1d20;
}

.footer-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* ==========================================
   СОЦИАЛЬНЫЕ СЕТИ - СЕТКА 3x2 (НОВЫЕ СТИЛИ)
   ========================================== */
.footer-navigation__section__networks {
    display: grid !important;
    grid-template-rows: repeat(2, 84px) !important;
    grid-template-columns: repeat(3, 84px) !important;
    row-gap: 16px !important;
    column-gap: 16px !important;
    margin-top: 25px !important;
    justify-content: flex-start !important;
}

.footer-navigation__section__networks__item {
    display: flex !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    background-size: 42px 42px, cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    text-decoration: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-navigation__section__networks__item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Цветные градиенты для иконок */
.footer-navigation__section__networks__item.network-telegram {
    background-image: url('/assets/images/icons/telegram.svg'), linear-gradient(-45deg, #03a9f4 0%, #42c4ff 100%);
}

.footer-navigation__section__networks__item.network-vk {
    background-image: url('/assets/images/icons/vk-white.svg'), linear-gradient(-45deg, #4a76a8 0%, #73b4fd 100%);
}

.footer-navigation__section__networks__item.network-ok {
    background-image: url('/assets/images/icons/ok-normal.svg'), linear-gradient(-45deg, #f80 0%, #f80 100%);
}

.footer-navigation__section__networks__item.network-discord {
    background-image: url('/assets/images/icons/discord.svg'), linear-gradient(0deg, #7289da 0%, #b9c8ff 100%);
}

.footer-navigation__section__networks__item.network-youtube {
    background-image: url('/assets/images/icons/youtube.svg'), linear-gradient(-45deg, #e53935 0%, #e5356a 100%);
}

.footer-navigation__section__networks__item.network-tiktok {
    background-image: url('/assets/images/icons/tiktok.svg'), linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%);
}

/* ==========================================
   КОЛОНКИ ССЫЛОК
   ========================================== */
.footer-links-col h3 {
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
}

.footer-links-col ul { 
    list-style: none; 
    padding: 0; 
}

.footer-links-col li { 
    margin-bottom: 10px; 
}

.footer-links-col a {
    text-decoration: none;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 700;
    transition: color 0.2s;
}

.footer-links-col a:hover { 
    color: #ff5722; 
}

/* ==========================================
   НИЖНЯЯ ЮРИДИЧЕСКАЯ ПОЛОСА
   ========================================== */
.footer-bottom {
    background-color: #f9fafb;
    width: 100%;
    padding: 22px 0;
    border-top: 1px solid #f1f1f1;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.legal-links a {
    text-decoration: none;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
    transition: color 0.2s;
}

.legal-links a:hover { 
    color: #ff5722;
    text-decoration: underline; 
}

.legal-divider { 
    color: #e5e7eb; 
}

.copyright-info {
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
}

.copyright-info .years {
    font-weight: 800;
    color: #4b5563;
    margin-top: 2px;
}

/* ==========================================
   АДАПТИВНОСТЬ
   ========================================== */
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        align-items: center;
    }
    
    .footer-info {
        max-width: 100%;
        text-align: center;
    }
    
    .footer-navigation__section__networks {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .footer-links-col {
        text-align: center;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    
    .copyright-info {
        text-align: center;
    }
    
    .legal-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer-navigation__section__networks {
        grid-template-rows: repeat(2, 60px) !important;
        grid-template-columns: repeat(3, 60px) !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
    }
    
    .footer-navigation__section__networks__item {
        width: 60px !important;
        height: 60px !important;
        background-size: 30px 30px, cover !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .footer-navigation__section__networks {
        grid-template-rows: repeat(2, 50px) !important;
        grid-template-columns: repeat(3, 50px) !important;
        row-gap: 10px !important;
        column-gap: 10px !important;
    }
    
    .footer-navigation__section__networks__item {
        width: 50px !important;
        height: 50px !important;
        background-size: 24px 24px, cover !important;
        border-radius: 10px !important;
    }
}
/* ==========================================
   8. СТИЛИ МОДАЛЬНОГО ОКНА ГАЛЕРЕИ (LIGHTBOX)
   ========================================== */
.lightbox-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.93);
    z-index: 11000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-modal.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 85%;
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform 0.3s ease;
}

.lightbox-modal.open .lightbox-content img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 25px; right: 35px;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    user-select: none;
}

.lightbox-close:hover { 
    opacity: 1; 
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 2.2rem;
    width: 54px; 
    height: 54px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, opacity 0.2s;
    opacity: 0.6;
    user-select: none;
}

.lightbox-nav:hover { 
    background-color: rgba(255, 255, 255, 0.15); 
    opacity: 1; 
}

.lightbox-prev { 
    left: 35px; 
}

.lightbox-next { 
    right: 35px; 
}

body.modal-open { 
    overflow: hidden; 
}


/* ==========================================
   10. АДАПТИВНОСТЬ (МЕДИА-ЗАПРОСЫ)
   ========================================== */
/* 1. ДЛЯ ПЛАНШЕТОВ И МАЛЕНЬКИХ НОУТБУКОВ (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Главный экран */
    .index-preview {
        height: auto;
        min-height: 100vh;
        padding: 90px 0 40px 0;
    }
    .index-preview-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .index-preview-section.info {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .index-preview-title-container {
        margin: 0 auto 25px auto; /* Центрируем логотип Legends */
    }
    .index-preview-actions {
        justify-content: center;
    }
    
    /* Персонаж ППС справа */
    .char-holder {
        position: relative;
        height: 50vh;
        width: 100%;
        justify-content: center;
    }
    .index-preview-char {
        height: 100%;
    }

    /* Секция "Удивительная атмосфера" (Слайдер) */
    .atmosphere-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .atmo-content {
        max-width: 100%;
    }
    .atmo-icon-badge {
        margin: 0 auto 20px auto; /* Центрируем иконку слайдера */
    }
    .slider-controls {
        justify-content: center;
    }

    /* Секция "Как начать играть" */
    .steps {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .step {
        max-width: 100%;
        text-align: center;
    }
    .step-info-box {
        border-left: none;
        border-top: 3px solid #ff5722;
        padding: 15px 0 0 0;
    }
    .for-windows-and-safely {
        justify-content: center;
    }
    .img img {
        max-width: 90%;
    }

    /* Трехколоночная сетка системных требований */
    .system-requirements-items-grid {
        flex-direction: column;
        gap: 35px;
    }
}

/* 2. ДЛЯ СМАРТФОНОВ (max-width: 768px) */
@media (max-width: 768px) {
    /* [ИСПРАВЛЕНО] Корректируем высоту и внутренние отступы мобильной шапки */
    .site-header .navigation {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    /* Управляем левой стороной меню (Главная / Личный кабинет) */
    .site-header .navigation-side.left {
        display: flex;
        flex-direction: row; /* Выстраиваем ссылки строго в ОДНУ линию */
        gap: 15px; /* Задаем аккуратный отступ между ними */
        align-items: center;
        flex-wrap: nowrap; /* Запрещаем перенос текста на вторую строку */
    }

    /* Настраиваем размер шрифта для мобильных ссылок, чтобы они не теснились */
    .site-header .navigation-item,
    .site-header .navigation-authorization-login-button {
        font-size: 0.8rem !important;
        white-space: nowrap; /* Защита от разрыва слов */
    }

    /* Отрезаем выпадающее меню ресурсы на смартфонах, чтобы не ломать экран */
    .navigation-menu {
        display: none !important;
    }

    /* Оптимизируем размер большой зеленой кнопки "Скачать игру" в шапке */
    .navigation-authorization-start-button {
        padding: 8px 14px !important; /* Уменьшили внутренние отступы */
        font-size: 0.7rem !important; /* Сделали текст кнопки чуть компактнее */
        gap: 6px !important;
    }
    
    .navigation-authorization-start-icon {
        width: 12px;
        height: 12px;
    }
    
    /* Сдвигаем первый экран чуть выше, так как мобильная шапка стала тоньше */
    .index-preview {
        padding-top: 60px;
    }
    /* Навигационная шапка */
    .navigation-side.left .navigation-item:not(:first-child),
    .navigation-menu, 
    .navigation-authorization-line {
        display: none; /* Скрываем громоздкие ссылки, оставляя кнопку "Скачать" */
    }

    /* Главный экран: Кнопочная зона */
    .index-preview-actions {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .app-online-monitoring-banner {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    .monitoring-divider {
        width: 60px;
        height: 1px;
        margin: 5px 0;
    }

    /* Плашка праздничного события */
    .index-event-wrapper, 
    .index-event-about-wrapper {
        display: none !important; /* Отключаем тяжелые всплывающие окна на мобилках */
    }

    /* Бегущие строки скриншотов */
    .gallery-marquee-track .grid-item {
        width: 240px; /* Уменьшаем карточки, чтобы помещались на экран телефона */
    }

    /* Панель техподдержки */
    .contact-support-banner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px;
    }
    .contact-support-banner .text-box {
        flex-direction: column;
        gap: 8px;
    }
    .contact-support-banner .actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .actions__button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
    .arrow-corner {
        right: 20px;
        top: 15px;
    }

    /* Системные требования */
    .system-requirements-header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        text-align: center;
    }
    
    /* [ВАЖНО] Карточная адаптация таблицы */
    .accordion-content {
        overflow-x: auto; /* Добавляет аккуратную пальцевую прокрутку для таблицы */
        -webkit-overflow-scrolling: touch;
    }
    .system-requirements-table {
        min-width: 650px; /* Защита текста от сплющивания */
    }

    /* Подвал сайта */
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .social-grid {
        justify-content: center;
        flex-wrap: wrap;
    }
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .copyright-info {
        text-align: center;
    }
}

/* ==========================================================================
   ФИКС МОДАЛЬНОГО ОКНА АВТОРИЗАЦИИ (ПРИНУДИТЕЛЬНОЕ ЦЕНТРИРОВАНИЕ)
   ========================================================================== */

/* 1. Делаем контейнер фиксированным поверх всего сайта */
#auth-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Полупрозрачный темный фон */
    backdrop-filter: blur(8px) !important;    /* Размытие заднего плана */
    z-index: 999999 !important;               /* Поверх шапки и подвала */
    
    /* Центрируем белое окошко внутри экрана */
    display: none; /* Переключается на flex через JS */
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Класс для отображения окна */
#auth-modal.active {
    display: flex !important;
}

/* Контейнер в стиле Amazing */
.sign-in-overlay {
    background: #ffffff;
    border-radius: 24px;
    
    /* Устанавливаем точные размеры из оригинала */
    width: 730px !important;
    height: 830px !important;
    max-width: 95%; 
    
    display: flex;
    /* [ИСПРАВЛЕНО] Заменяем visible на hidden, чтобы принудительно обрезать */
    /* выпирающие углы картинки под скругления главного бокса (24px) */
    overflow: hidden !important; 
    
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* Картинка персонажа слева */
.sign-in-image {
    width: 290px !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* [ИСПРАВЛЕНО] Меняем center bottom на top left. 
       Это принудительно прижмет картинку к самому верхнему и левому углам, 
       полностью ликвидировав белую щель сверху */
    object-position: left top !important; 
    
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block !important;
}
/* ==========================================================================
   ОРИГИНАЛЬНЫЙ КАСТОМНЫЙ ЧЕКБОКС СОГЛАСИЯ AMAZING
   ========================================================================== */

/* 1. АВТОМАТИЧЕСКАЯ ПОКРАСКА: когда невидимый инпут нажат — красим квадрат в оранжевый */
/* ==========================================================================
   АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ЧЕКБОКСА ЧЕРЕЗ ЧИСТЫЙ CSS
   ========================================================================== */

/* 1. Покраска: когда невидимый инпут нажат — красим квадрат в оригинальный оранжевый */
/* Когда скрытый инпут нажат — красим соседний квадрат в оранжевый */


/* Сброс цвета для ссылок соглашения */
.amazing-checkbox-text a {
    color: #9ca3af !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    display: inline !important;
}
.amazing-checkbox-text a:hover {
    color: #4b5563 !important;
}

/* ==========================================================================
   КОНТЕНТНАЯ ЧАСТЬ СПРАВА (ВАШ КОД БЕЗ ИЗМЕНЕНИЙ)
   ========================================================================== */

/* Контентная часть справа */
.sign-in-content {
    width: 55% !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Шапка внутри окна */
.sign-in-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

.sign-in-header-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 !important;
}

.sign-in-header-close {
    background: none !important;
    border: none !important;
    font-size: 1.4rem !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    padding: 0 !important;
}
.sign-in-header-close:hover { color: #ff5722 !important; }

/* 3. Поля ввода текста */
.sign-in-form-input {
    margin-bottom: 20px !important;
    width: 100% !important;
}

.sign-in-form-input-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #4b5563 !important;
    margin-bottom: 8px !important;
}

.amazing-auth-input {
    width: 100% !important;
    padding: 16px 20px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.amazing-auth-input:focus { border-color: #ff5722 !important; }

.amazing-auth-input,
.selector-server {
    padding: 12px 20px !important;
}

/* Кнопка Войти */
.auth-submit-btn {
    width: 100% !important;
    padding: 14px !important;
    background: linear-gradient(135deg, #ff5722, #f4511e) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(244, 81, 30, 0.2) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    margin-top: 10px !important;
}
.auth-submit-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(244, 81, 30, 0.35) !important; }

/* Мини-меню под тремя точками */
/* Всплывающее меню под тремя точками */
.mini-dropdown-content {
    position: absolute !important; /* Насильно вырываем из общего потока шапки */
    top: 35px !important;         /* Сдвигаем строго под иконку трех точек */
    right: 0 !important;          /* Прижимаем к правому краю */
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* Мягкая тень */
    padding: 8px 0 !important;
    min-width: 170px !important;  /* Фиксированная ширина окна */
    display: flex !important;
    flex-direction: column !important; /* Ссылки встанут строго друг под другом */
    z-index: 999999 !important;    /* Поверх всего контента сайта */
    
    /* Состояние скрытия по умолчанию */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-5px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
}

/* Класс активации меню при клике */
.mini-dropdown-content.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Ссылки внутри выпадающего меню */
.mini-dropdown-content a {
    padding: 10px 20px !important;
    color: #111827 !important;   /* Насыщенный темный цвет для читаемости на белом */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;
    text-align: left !important;
    transition: background 0.15s, color 0.15s !important;
}

/* Эффект наведения на пункт меню */
.mini-dropdown-content a:hover {
    background: #f9fafb !important;
    color: #ff5722 !important;   /* Фирменный оранжевый при наведении */
}
/* ==========================================================================
   ОРИГИНАЛЬНОЕ УВЕДОМЛЕНИЕ ОБ ОШИБКЕ С ТАЙМЕРОМ (8 СЕКУНД)
   ========================================================================== */

.amazing-toast-error {
    position: absolute !important;
    bottom: 120px !important; /* Позиционируем над кнопкой "Войти", как в оригинале */
    left: 45px !important;
    width: calc(100% - 90px) !important; /* Растягиваем по ширине контента формы */
    background: linear-gradient(135deg, #d32f2f, #b71c1c) !important; /* Сочный красный градиент */
    border-radius: 16px !important; /* Красивые скругления */
    padding: 16px 24px 20px 24px !important;
    box-shadow: 0 10px 30px rgba(211, 47, 47, 0.25) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
    
    /* Состояние скрытия по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
}

/* Класс активации (вызывается при ошибке из PHP или JS) */
.amazing-toast-error.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Верхняя строка: Заголовок и Крестик */
.toast-header-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.toast-title {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
}

.toast-close-x {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    font-size: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-weight: 700 !important;
    transition: background 0.15s !important;
}
.toast-close-x:hover { background: rgba(255, 255, 255, 0.35) !important; }

/* Текст самого сообщения */
.toast-message-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

/* Полоса-таймер на дне плашки */
.toast-progress-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.4) !important; /* Полупрозрачная белая полоса */
    width: 100% !important;
}

/* Запускаем уменьшение полосы только тогда, когда нотификация активна */
.amazing-toast-error.active .toast-progress-bar {
    animation: shrink-progress 8s linear forwards !important; /* Ровно 8 секунд */
}

/* Анимация убывания полосы слева направо (до 0%) */
@keyframes shrink-progress {
    0% { width: 100%; }
    100% { width: 0%; }
}
/* ==========================================================================
   КОРРЕКТИРОВКА ВЫСОТЫ И ОТСТУПОВ ДЛЯ ОКНА 2FA
   ========================================================================== */

/* Перебиваем глобальное распределение space-between только для формы 2FA */
#auth-2fa-form {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Прижимает элементы к верху */
    gap: 0 !important; /* Управляем каждым отступом вручную */
    margin-top: 50px !important; /* Регулируем зазор от заглавного текста */
    height: auto !important; /* Убираем растяжение на всю высоту */
}

/* Настраиваем оригинальный отступ над инпутом */
#auth-2fa-form .sign-in-form-input {
    margin-bottom: 24px !important; /* Зазор между инпутом и оранжевой кнопкой */
}

/* Принудительно убираем нижний маргин, чтобы кнопка не улетала вниз */
#auth-2fa-form .auth-submit-btn {
    margin-top: 0 !important;
}
/* ==========================================================================
   //ОБЩИЕ СТИЛИ ОРИГИНАЛЬНОГО ВЫПАДАЮЩЕГО МЕНЮ МИНИ-ИГР
   ========================================================================== 

 1. Общие настройки для элементов с иконками */
.mini-games-content .navigation-menu-item.with-icon {
    position: relative !important;
    padding-left: 56px !important; /* Отодвигаем текст вправо под иконку */
    display: flex !important;
    align-items: center !important;
}

/* 2. Контейнер, который выводит сам SVG-файл слева от текста */
.mini-games-content .navigation-menu-item.with-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important; /* Отступ иконки от левого края белой плашки */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Центрируем по вертикали */
    width: 20px !important;  /* Оригинальный размер иконки */
    height: 20px !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================================
   3. ПОДКЛЮЧЕНИЕ ПУТЕЙ К ТВОИМ SVG-ФАЙЛАМ НА СЕРВЕРЕ
   ========================================================================== */

/* Бесплатная рулетка */
.mini-games-content .item-roulette::before {
    background-image: url('/assets/images/icons/roulette.svg') !important;
    filter: invert(1) !important; 
}

/* Золотая рулетка */
.mini-games-content .item-roulette-gold::before {
    background-image: url('/assets/images/icons/roulette-gold.svg') !important;
}

/* Бриллиантовая рулетка */
.mini-games-content .item-roulette-brilliant::before {
    background-image: url('/assets/images/icons/roulette-brilliant.svg') !important;
}

/* Коинфлип */
.mini-games-content .item-coinflip::before {
    background-image: url('/assets/images/icons/coinflip.svg') !important;
}
/* Адаптивность для мобильных телефонов */
/* ==========================================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ТЕЛЕФОНОВ (ТОЧЕЧНАЯ КОРРЕКТИРОВКА РАЗМЕРОВ)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Намертво убираем картинку персонажа, чтобы освободить место */
    .sign-in-image { 
        display: none !important; 
    }
    
    /* 2. Настраиваем размеры главного мобильного окна */
    .sign-in-overlay { 
        flex-direction: column !important; 
        max-width: 420px !important; 
        width: 92% !important; /* Чтобы оставались аккуратные зазоры по бокам экрана телефона */
        
        /* [НОВОЕ] Сбрасываем жесткие оригинальные 830px высоты на авто-размер по контенту */
        height: auto !important; 
        
        /* [НОВОЕ] Защита: ограничиваем максимальную высоту окна и разрешаем внутренний скролл, 
           чтобы кнопка "Войти" гарантированно влезала, даже если открыта клавиатура смартфона */
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
    }
    
    /* 3. Оптимизируем отступы внутри правой колонки, чтобы сэкономить пространство */
    .sign-in-content { 
        width: 100% !important; 
        /* [ИСПРАВЛЕНО] Чуть уменьшили нижний паддинг (с 30px до 24px), чтобы прижать контент компактнее */
        padding: 30px 24px 24px 24px !important; 
        
        /* [НОВОЕ] Выстраиваем элементы плотно друг за другом, предотвращая их хаотичное разлетание по вертикали */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    /* 4. Принудительно уменьшаем лишние пустые зазоры у полей формы на мобильных */
    .sign-in-form {
        gap: 12px !important;
        height: auto !important;
    }
    
    .sign-in-form-input {
        margin-bottom: 0 !important;
    }
}
/* Класс для моментального скрытия неактивной формы */
.sign-in-form.hidden-form {
    display: none !important;
}
/* [МЕГА-ФИКС] Полностью изолируем и скрываем форму, обходя любые конфликты с flex */
.hidden-form {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.navigation-menu-item.with-icon {
    position: relative;
    padding-left: 40px;
}

.navigation-menu-item.with-icon::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.item-help::before { background-image: url('/assets/images/icons/header/resources/help.svg'); }
.item-forum::before { background-image: url('/assets/images/icons/header/resources/forum.svg'); }
.item-rules::before { background-image: url('/assets/images/icons/header/resources/rules.svg'); }
.item-top::before { background-image: url('/assets/images/icons/header/resources/top.svg'); }
.item-wiki::before { background-image: url('/assets/images/icons/header/resources/wiki.svg'); }