/* ============================================
   FRAME2 - Меню с логотипом (используется везде)
   ============================================ */

:root {
    --frame2-bg: rgba(242, 242, 242, 0.98); /* Почти непрозрачный фон для лучшей видимости */
    --frame2-padding: 15px 20px;
    --frame2-z-index: 1000; /* Всегда выше контента (z-index < 1000) и парящих элементов (z-index: -1) */
    --frame2-logo-max-height: 156.25px;
    --frame2-subtitle-font-size: 50.4px;
}

/* Основной контейнер Frame2 */
.frame2 {
    /* Позиционирование управляется через grid в layout.css */
    background: transparent !important; /* Полностью прозрачный фон - никаких плашек */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0; /* Убираем padding сверху и по бокам, высота определяется только логотипом и фразой */
    /* Адаптивный отступ снизу */
    padding-bottom: clamp(30px, 5vh, 60px); /* Уменьшенный отступ */
    z-index: var(--z-index-frame-2); /* Используем стандартный z-index из base.css (1000) */
    position: relative; /* Явно указываем relative, чтобы z-index работал */
    border-bottom: none;
    box-shadow: none;
    width: 100%;
    overflow: visible; /* Разрешаем видимость, но содержимое не должно выходить за границы */
    /* Высота определяется только содержимым (логотип + фраза + gap) - без адаптивных ограничений */
    height: auto;
    min-height: auto;
    max-height: none; /* Убираем адаптивное ограничение */
    box-sizing: border-box;
    opacity: 1 !important;
    /* Высота складывается из высоты логотипа и фразы */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контент Frame2 */
.frame2-content {
    /* В развернутом виде: ширина как 2 карточки (≈1100px) */
    /* В свернутом виде: ширина как 1 карточка (≈90% экрана) */
    max-width: 90%; /* По умолчанию для мобильных */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0; /* Убираем gap, отступы только между логотипом и фразой */
    position: relative;
    min-height: auto; /* Высота определяется содержимым */
    box-sizing: border-box;
    padding: 0 24px; /* Фиксированные отступы от краев экрана */
    background: transparent !important; /* Полностью прозрачный фон - никаких плашек */
}

/* Убираем псевдоэлемент для фона - он перекрывает подпись */
.frame2-content::before,
.frame2-content::after {
    display: none !important; /* Полностью убираем все псевдоэлементы */
    content: none !important;
}

/* В развернутом виде (≥768px): ширина как 2 карточки */
@media (min-width: 768px) {
    .frame2-content {
        max-width: 1150px; /* Ширина как 2 карточки в grid */
    }
}

/* Секция с логотипом и фразой - они связаны вместе */
.frame2-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* relative - чтобы логотип и фраза были частью одного блока */
    left: auto;
    top: auto;
    transform: none;
    gap: clamp(8px, 1.5vw, 15px); /* Адаптивный gap между логотипом и фразой */
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
    padding-bottom: 0; /* Убираем padding снизу, отступ будет у Frame2 */
    margin-bottom: 0; /* Убираем margin снизу */
    box-sizing: border-box;
    z-index: 1; /* Поверх фона */
    background: transparent !important;
}

.frame2-logo-section * {
    pointer-events: auto;
}

.frame2-logo-section .logo {
    width: auto;
    height: auto;
    /* Немного уменьшенный адаптивный размер */
    /* В развернутом виде: больше, в свернутом: меньше */
    max-height: clamp(130px, 22vh, 280px); /* Немного меньше: минимум 130px, максимум 280px */
    max-width: clamp(220px, 55vw, 550px); /* Немного меньше: минимум 220px, максимум 550px */
    transform: rotate(-2deg);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 1; /* Поверх фона */
    background: transparent !important;
}

.frame2-logo-section .subtitle {
    font-family: 'Caveat', cursive;
    /* МАЛЕНЬКИЙ размер шрифта - соответствует размеру логотипа */
    /* В развернутом виде: больше, в свернутом: меньше */
    font-size: clamp(20px, 3vw, 40px); /* Маленький размер: минимум 20px, максимум 40px */
    color: #393639;
    margin: 0; /* Убираем все отступы - фраза связана с логотипом через gap в logo-section */
    margin-bottom: 0; /* Убираем отступ снизу */
    margin-top: 0; /* Убираем отступ сверху */
    padding: 0; /* Убираем padding */
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    /* Фраза является частью Frame2 и связана с логотипом */
    display: block;
    position: relative; /* relative - часть блока logo-section */
    z-index: 1; /* Поверх фона */
    background: transparent !important;
}

.frame2-logo-section {
    /* Убираем ограничение ширины, чтобы логотип и фраза могли быть больше */
    max-width: 100%;
    width: 100%;
}

/* Адаптивные отступы для разных размеров экрана - устойчивы к масштабированию */
@media (min-width: 768px) {
    .frame2 {
        padding-bottom: clamp(30px, 5vh, 60px); /* Уменьшенный отступ на больших экранах */
    }
}

@media (max-width: 767px) {
    .frame2 {
        padding-bottom: clamp(20px, 4vh, 50px); /* Уменьшенный отступ на мобильных */
        padding-top: 0 !important; /* Убираем отступ сверху - логотип ближе к кнопкам */
        margin-top: 0 !important;
    }
    
    .frame2-content {
        padding: 0 16px; /* Уменьшенные боковые отступы на мобильных */
        padding-top: 0 !important; /* Убираем отступ сверху */
    }
    
    .frame2-logo-section {
        padding-top: 0 !important; /* Убираем отступ сверху */
        margin-top: 0 !important;
    }
    
    .frame2-logo-section .logo {
        max-height: clamp(120px, 22vh, 240px) !important; /* Увеличенный размер логотипа на мобильных */
        max-width: clamp(220px, 60vw, 480px) !important;
    }
    
    .frame2-logo-section .subtitle {
        font-size: clamp(18px, 3vw, 32px); /* Меньший размер фразы на мобильных */
        white-space: normal; /* Разрешаем перенос текста на мобильных */
        text-align: center;
    }
}

@media (max-width: 480px) {
    .frame2 {
        padding-bottom: clamp(15px, 3vh, 40px); /* Минимальный отступ на очень маленьких экранах */
    }
    
    .frame2-content {
        padding: 0 12px;
    }
    
    .frame2-logo-section .logo {
        max-height: clamp(80px, 15vh, 150px);
        max-width: clamp(150px, 45vw, 300px);
    }
    
    .frame2-logo-section .subtitle {
        font-size: clamp(16px, 2.5vw, 28px);
    }
}

/* Контейнер для игроков в Frame2 */
.frame2-players-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px 0;
}

/* Иконки игроков в Frame2 */
.frame2-player-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    font-family: 'Days One', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    border: 2px solid;
    box-shadow: 
        0 2px 0px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    cursor: default;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s;
    min-width: auto;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.frame2-player-icon:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 0px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.15);
}

.frame2-player-icon.waiting {
    background: #ff7664;
    border-color: #ff7664;
}

.frame2-player-icon.ready {
    background: #00C159;
    border-color: #00C159;
}