/* Общие стили кнопок */
button {
    background-color: var(--background-color); /* Фон кнопки совпадает с фоном страницы */
    color: var(--menu-text-color); /* Цвет текста соответствует тексту меню */
    border: 2px solid var(--menu-text-color); /* Обводка в цвет текста меню */
    border-radius: 12px; /* Закруглённые края кнопки */
    padding: 10px 20px; /* Внутренние отступы для удобства */
    font-size: 16px; /* Размер текста */
    font-family: var(--menu-font-family); /* Шрифт из меню */
    cursor: pointer; /* Указатель мыши для кликабельности */
    transition: all 0.3s ease; /* Анимация для интерактивных эффектов */
}

/* Эффект при наведении */
button:hover {
    background-color: var(--menu-text-color); /* Меняем фон на цвет текста меню */
    color: var(--background-color); /* Текст становится цветом фона */
    border-color: var(--background-color); /* Меняем цвет обводки на фон страницы */
}

/* Дополнительные стили для кнопок, если нужно сделать их шире */
button.wide {
    width: 100%; /* Кнопка занимает всю ширину контейнера */
}

/* Если кнопка отключена */
button:disabled {
    background-color: #ccc; /* Серый фон для отключённой кнопки */
    color: #666; /* Цвет текста для отключённой кнопки */
    border-color: #666; /* Цвет обводки для отключённой кнопки */
    cursor: not-allowed; /* Указатель мыши для отключённой кнопки */
}

.start-game-button {
    position: fixed; /* Фиксированное позиционирование */
    top: 25px; /* Отступ от верхнего края */
    left: 25px; /* Отступ от левого края */
    background-color: var(--menu-text-color); /* Основной фон кнопки */
    color: var(--background-color); /* Основной цвет текста */
    border: 2px solid var(--background-color); /* Основной цвет обводки */
    border-radius: 12px; /* Закруглённые углы */
    text-align: center; /* Центрируем текст */
    font-family: var(--menu-font-family); /* Используем шрифт меню */
    cursor: pointer; /* Указатель мыши */
    z-index: 1002; /* Поверх всего */
    transition: all 0.3s ease; /* Плавные изменения */
    pointer-events: auto; /* Включаем взаимодействие с элементами внутри (например, ссылки или кнопки) */
}

/* Эффект при наведении */
.start-game-button:hover {
    background-color: var(--background-color); /* Инверсия: фон становится основным цветом фона страницы */
    color: var(--menu-text-color); /* Инверсия: текст становится цветом меню */
    border-color: var(--menu-text-color); /* Инверсия: обводка становится цветом меню */
}

/* Контейнер для кнопок авторизации */
.auth-buttons {
    position: absolute;
    top: 50px;
    right: 25px;
    display: flex;
    gap: 10px;
    z-index: 1002; /* Поверх всего */
}

/* Стили для кнопок авторизации */
.auth-button {
    background-color: var(--menu-text-color);
    color: var(--background-color);
    border: 2px solid var(--background-color);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: var(--menu-font-family);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.auth-button.large {
    padding: 12px 20px;       /* Увеличенные отступы */
    font-size: 16px;          /* Крупный шрифт */
    border-radius: 10px;      /* Более плавные углы */
    flex: 1;                  /* Равномерное распределение ширины */
}

/* Эффект при наведении */
.auth-button:hover {
    background-color: var(--background-color);
    color: var(--menu-text-color);
    border-color: var(--menu-text-color);
}

/* Стили для блока информации о пользователе */
.user-info {
    position: absolute;
    top: 10px;
    right: 25px;
    color: var(--menu-text-color);
    font-size: 14px;
    font-family: var(--menu-font-family);
    z-index:1002;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
    .start-game-button {
        bottom: 10px; /* Уменьшаем отступы на маленьких экранах */
        left: 10px;
        padding: 8px 16px; /* Уменьшаем размер кнопки */
        font-size: 14px;
    }
}