/* ==========================================================================
   1. ПЕРЕМЕННЫЕ (Цвета, взятые прямо из твоего логотипа)
   ========================================================================== */
:root {
    --bg-space: #0d1b2a;       /* Глубокий темно-синий космос */
    --bg-card: #1b263b;        /* Чуть более светлый синий */
    --gold: #dfb15b;           /* Благородное золото */
    --gold-hover: #f1c40f;     /* Яркое золото при наведении */
    --text-main: #f5f6fa;      /* Чистый контрастный текст */
    --text-muted: #8d99ae;     /* Приглушенный серый текст */
}
/* ==========================================================================
   2. ОБЩИЕ СТИЛИ (Глобальный сброс и шрифты)
   ========================================================================== */
body {
    margin: 0;
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-space);
    color: var(--text-main);
    line-height: 1.6;
}
/* Общие правила для всех заголовков */
h1, h2, h3, h4 {
    margin-top: 0;         /* Убираем верхний отступ браузера */
    margin-bottom: 0.5em;  /* Оставляем аккуратный отступ снизу */
    color: var(--gold);    /* Все заголовки по умолчанию будут золотыми */
    font-weight: 700;      /* Делаем их жирными */
}
/* Вычищаем дефолтные стили браузера для ВСЕХ кнопок на сайте */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    cursor: pointer;
    text-transform: uppercase;  /* Все кнопки по умолчанию капсом */
    font-weight: 600;           /* Все кнопки по умолчанию полужирные */
    letter-spacing: 0.5px;      /* Одинаковый игровой межбуквенный отступ */
    transition: all 0.2s ease;  /* Плавная анимация для ховеров и фокусов */
    -webkit-appearance: none; /* Для старых мобильных браузеров */
    appearance: none;
}
/* Общие правила для абзацев текста */
p {
    margin-top: 0;
    margin-bottom: 1em;    /* Отступ после абзаца */
    color: var(--text-main);
}
/* Общие правила для списков */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none; /* Автоматически убирает круглые маркеры (точки) у всех списков */
}
/* Общие правила для всех ссылок */
a {
    color: var(--text-main);
    text-decoration: none; /* Убирает стандартное нижнее подчеркивание */
    transition: color 0.2s ease; /* Любое изменение цвета ссылки будет плавным */
}
a:hover {
    color: var(--gold); /* Ссылка плавно окрашивается в золото */
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}
/* Ограничитель ширины сайта */
.container {
    max-width: 1100px;
    margin: 0 auto;     /* Центрирует блок по экрану */
    padding: 0 20px;    /* Внутренние защитные отступы по бокам */
}
/* ==========================================================================
   3. СТИЛИ ШАПКИ (HEADER)
   ========================================================================== */
header {
    background-color: var(--bg-card); /* Делаем шапку чуть светлее общего фона */
    border-bottom: 3px solid rgba(223, 177, 91, 0.2); /* Тонкая полоска снизу шапки с прозрачностью 20% */
    padding: 15px 0; /* Внутренние отступы сверху и снизу */
}
/* Флекс-контейнер, который управляет расположением элементов внутри шапки */
.header-wrap {
    display: flex;
    justify-content: space-between; /* Логотип улетает влево, меню — вправо */
    align-items: center;            /* Выравнивает логотип и текст меню строго по центру по вертикали */
}
.logo a {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px; /* Раздвигаем буквы */
    color: var(--text-main);
}
.logo a:hover {
    color: var(--gold);
}
.logo-img {
    height: 1.8em;
    width: auto;
    margin-right: 4px;
    object-fit: contain;
}
/* Меню навигации */
header nav ul {
    display: flex;  /* Выстраивает элементы меню <li> в горизонтальную строчку */
    gap: 25px;      /* Задает фиксированное расстояние между кнопками меню */
    align-items: center;
}
/* Редактируем кнопки и ссылки в шапке */
header nav a, 
header nav button {
    color: var(--text-main);
    font-size: 1rem;
    padding: 8px 12px; /* Пространство вокруг, чтобы легче кликалось */
    border: none;      /* Жестко гарантируем отсутствие рамок (фикс бага со скрина) */
}
/* Находим кнопки входа/регистрации в шапке */
header nav a:hover, 
header nav button:hover {
    color: var(--gold); 
}
/* ==========================================================================
   4. ГЛАВНЫЙ БЛОК (MAIN & HERO)
   ========================================================================== */
/* Секция приветствия */
.hero-section {
    padding: 60px 0;
    text-align: center; /* Центрируем заголовок и подзаголовок по горизонтали */
}
.hero-section h1 {
    font-size: 2.5rem; /* Делаем главное приветствие крупным */
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
/* Подзаголовок приветствия */
.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted); /* Делаем этот текст более мягким, серым */
    max-width: 600px; /* Чтобы текст не растягивался на всю ширину, а красиво ложился в две строки */
    margin: 0 auto 50px auto; /* Центрируем сам блок текста (0 сверху, auto по бокам, 50px отступ снизу до следующего блока) */
}
/* Блок выбора разделов */
.navigation-choice {
    margin-top: 40px;
}
.navigation-choice h2 {
    font-size: 1.6rem;
    color: var(--text-main); /* Делаем этот заголовок белым, чтобы он отличался от h1 */
    margin-bottom: 30px;
}
/* Настройки сетки (родитель) */
.sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ровно две колонки одинакового размера */
    gap: 25px;                      /* Расстояние между карточками */
    max-width: 800px;               /* Сжимаем сетку карточек, чтобы они не были слишком вытянутыми на весь экран */
    margin: 0 auto;                 /* Центрируем сетку по центру экрана */
}
/* Стили для карточек (так как они у нас ссылки) */
.sections-grid > a {
    display: flex;
    flex-direction: column;                         /* Элементы внутри карточки строятся сверху вниз */
    justify-content: space-between;                 /* Распределяет контент так, чтобы "Перейти" всегда было в самом низу карточки */
    background-color: var(--bg-card);               /* Прописанный в :root цвет карточки */
    padding: 30px;
    border-radius: 12px;
    border: 2px solid rgba(223, 177, 91, 0.1);    /* Едва заметная золотая рамка */
    text-align: left;                               /* Текст внутри самой карточки выравниваем по левому краю */
    min-height: 160px;                              /* Задаем минимальную высоту, чтобы карточки были строго одинаковыми */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    backface-visibility: hidden;                    /* Принудительно включает аппаратное 3D-ускорение для карточки */
    transform: translateZ(0);                       /* Подсказывает видеокарте постоянно держать блок в режиме высокой четкости */
}
/* Стили заголовков внутри карточек */
.sections-grid h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--gold);
}
/* Текст описания внутри карточки */
.sections-grid p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
/* Наша импровизированная стрелочка/кнопка внизу карточки */
.sections-grid span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.25s ease;
}
/* ==========================================================================
   5. ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (HOVER)
   ========================================================================== */
.sections-grid > a:hover {
    transform: scale(1.02); /* Плавное увеличение на 3% */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Глубокая темная космическая тень */
    border-color: rgba(223, 177, 91, 0.4); /* Делаем золотую рамку карточки ярче при наведении */
}
/* При наведении на карточку, текст "Перейти" внутри нее станет еще ярче */
.sections-grid > a:hover span {
    color: var(--gold-hover);
}
/* ==========================================================================
   6. ПОДВАЛ САЙТА (FOOTER)
   ========================================================================== */
footer {
    background-color: var(--bg-card); /* Такой же фон, как у шапки, для симметрии */
    border-top: 3px solid rgba(223, 177, 91, 0.15); /* Мягкая золотая линия сверху подвала */
    padding: 40px 0; /* Внутренние отступы, чтобы футер не казался зажатым */
    margin-top: 60px; /* Отступ сверху, чтобы оттолкнуться от карточек main */
    font-size: 0.9rem; /* В футере текст традиционно делают чуть-чуть мельче */
}
/* Делаем флекс-контейнер для содержимого подвала */
footer .container {
    display: flex;
    justify-content: space-between; /* Копирайт — налево, контакты — направо */
    align-items: flex-start; /* Выравниваем блоки по их верхнему краю */
}
/* Блок с копирайтом (левый div) */
footer .container > div:first-child p {
    margin-bottom: 5px; /* Уплотняем строчки копирайта между собой */
}
footer .container > div:first-child p:last-child {
    color: var(--text-muted); /* Фразу "От игрока игрокам" делаем приглушенной */
    font-style: italic; /* И добавим легкий курсив для атмосферы */
}
/* Блок с контактами (правый div) */
footer .container > div:last-child p {
    font-weight: 600;
    color: var(--gold); /* Заголовок "Связь с автором:" делаем золотым */
    margin-bottom: 10px;
}
/* Список контактов */
footer ul {
    display: flex;
    flex-direction: column; /* Выстраиваем Discord и Telegram друг под другом */
    gap: 8px; /* Расстояние между строчками контактов */
}
footer ul li {
    color: var(--text-main);
    display: flex;
    align-items: center;
}
/* Стилизуем ссылку на Telegram */
footer ul a {
    color: var(--text-main);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3); /* Красивое пунктирное подчеркивание */
    padding-bottom: 2px;
}
/* Особый ховер для ссылки в футере */
footer ul a:hover {
    color: var(--gold-hover);
    border-bottom-color: var(--gold-hover); /* Пунктир тоже станет золотым */
}
/* ==========================================================================
   7. МОДАЛЬНОЕ ОКНО АВТОРИЗАЦИИ
   ========================================================================== */
/* Задний фон на весь экран */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(13, 27, 42, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
/* Само окошко */
.modal-window {
    background-color: var(--bg-card);
    border: 1px solid rgba(223, 177, 91, 0.25);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 360px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal-overlay.active .modal-window {
    transform: scale(1);
}
/* Кнопка-крестик. Находим её по ID, так как она одна на окно */
#close-modal {
    position: absolute;
    top: 15px; right: 15px;
    color: var(--text-muted);
    font-size: 1.8rem; 
    line-height: 1;
}
#close-modal:hover { color: var(--gold); }
/* Единственный вспомогательный класс, который скрывает вторую форму */
.hidden { display: none; }
/* Заголовки внутри ЛЮБОЙ формы в модалке */
.modal-window form h2 {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 25px;
}
/* ТЕ САМЫЕ ДИВЫ, которые заменяют input-group */
.modal-window form > div {
    margin-bottom: 20px; /* Просто делаем отступ между блоками полей */
    position: relative;
}
/* Текст над инпутами (Логин, Пароль...) */
.modal-window form label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Сами поля ввода внутри дивов */
.modal-window form input {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--bg-space);
    border: 1px solid rgba(223, 177, 91, 0.15);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-window form input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(223, 177, 91, 0.15);
}
/* Кнопка-глазик внутри инпута */
.eye-btn {
    position: absolute;
    right: 12px; /* Отодвигаем от правого края инпута */
    bottom: 11px; /* Выравниваем по центру инпута (подбирается под padding инпута) */
    font-size: 1.1rem;
    color: var(--text-muted);
    z-index: 2; /* Чтобы кнопка была поверх инпута и кликалась */
}
/* Чтобы текст в инпуте не залезал под сам глазик при вводе */
.modal-window form input[type="password"],
.modal-window form input[type="text"] {
    padding-right: 40px; /* Делаем увеличенный правый отступ внутри инпута */
}
/* Главная кнопка внизу формы (Войти / Зарегистрироваться) */
.modal-window form button[type="submit"] {
    width: 100%;
    padding: 14px;
    background-color: var(--gold);
    color: var(--bg-space);
    border-radius: 8px;
    letter-spacing: 1px;
    margin-top: 10px;
}
.modal-window form button[type="submit"]:hover { background-color: var(--gold-hover); }
.modal-window form button[type="submit"]:active { transform: scale(0.98); }
/* Абзац с переключателем в самом низу формы */
.modal-window form p {
    text-align: center;
    margin-top: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* Кнопки-переключатели в самом низу форм */
.modal-window form p button {
    font-size: inherit;
    color: var(--gold);
    border-bottom: 1px dashed rgba(223, 177, 91, 0.4);
    margin-left: 5px;
    text-transform: none;
}
/* Эффект при наведении — текст и пунктир становятся ярче */
.modal-window form p button:hover {
    color: var(--gold-hover);
    border-bottom-color: var(--gold-hover);
}
/* СТИЛИ ДЛЯ ОШИБОК АВТОРИЗАЦИИ / РЕГИСТРАЦИИ */
.error-message {
    background-color: rgba(220, 53, 69, 0.15); /* Полупрозрачный красный фон */
    color: #ff4d4f; /* Ярко-красный текст для контраста */
    border: 1px solid rgba(255, 77, 79, 0.5); /* Аккуратная рамка */
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
}
/* ==========================================================================
   8. ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ
   ========================================================================== */
/* Главная сетка, которая сама адаптирует колонки */
.profile-grid {
    display: grid;
    /* Карточки будут иметь ширину от 350px. Если экран широкий, они встанут в ряд */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    align-items: start; /* Чтобы карточки не растягивались в высоту */
    margin-top: 20px;
}

.profile-card {
    background-color: var(--bg-card);
    border: 1px solid rgba(223, 177, 91, 0.15); /* Легкий золотистый контур */
    border-radius: 8px;
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

/* Группировка Имени и Email */
.info-grouped {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.empty-state {
    text-align: center;
    padding: 20px 0;
}

.text-muted {
    color: var(--text-muted);
}

.mt-15 {
    margin-top: 15px;
}

/* Новые кнопки */
.btn-primary {
    background: var(--gold);
    color: var(--bg-space);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-primary:hover {
    background: var(--gold-hover);
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.profile-card h3 {
    border-bottom: 1px dashed rgba(223, 177, 91, 0.3);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Строки с информацией (Имя: Astro) */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-space);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.info-row:hover {
    border-color: rgba(223, 177, 91, 0.2);
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}
.info-value {
    font-size: 1.05rem;
    color: var(--text-main);
    font-weight: 500;
}

/* Кнопка-карандаш (редактировать) */
.edit-btn {
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 5px;
}
.edit-btn:hover {
    color: var(--gold);
    transform: scale(1.1);
}

/* Скрытый блок с формой редактирования */
.profile-form-block {
    background-color: var(--bg-space);
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed var(--gold);
    margin-bottom: 15px;
}

/* Инпуты внутри формы профиля */
.profile-form-block input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    background-color: var(--bg-card);
    border: 1px solid rgba(223, 177, 91, 0.15);
    border-radius: 8px;
    color: var(--text-main);
    box-sizing: border-box;
}
.profile-form-block input:focus {
    outline: none;
    border-color: var(--gold);
}

/* Кнопки "Сохранить" и "Отмена" */
.form-actions {
    display: flex;
    gap: 10px;
}
.form-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}
.btn-save {
    background-color: var(--gold);
    color: var(--bg-space);
}
.btn-save:hover { background-color: var(--gold-hover); }

.btn-cancel {
    background-color: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}
.btn-cancel:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}
/* Сообщение об успешном сохранении (зеленое) */
.success-message {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.5);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
}

/* Стили для выпадающего списка (select) в профиле */
.profile-select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    background-color: var(--bg-card);
    border: 1px solid rgba(223, 177, 91, 0.15);
    border-radius: 8px;
    color: var(--text-main);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.profile-select:focus {
    border-color: var(--gold);
}

.profile-select option {
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* Если нужно выровнять текст по центру внутри окна успеха */
.success-window {
    text-align: center;
}

/* Отступ перед блоком кнопок */
.modal-note {
    margin-bottom: 20px;
}

/* Контейнер для кнопок в ряд */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.verify-action-block {
    margin-top: 15px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05); /* Легкий контрастный фон под форму */
    border-radius: 6px;
}
.verify-note {
    font-size: 14px;
    margin-bottom: 8px;
    color: #ccc;
}
/* Расставляем лейблы и инпуты в формах друг под другом */
.profile-form-block .form-group {
    margin-bottom: 15px;
}
.profile-form-block label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Причесываем блок ввода кода подтверждения */
.verify-input-group input {
    flex-grow: 1;
    max-width: 200px;
    padding: 10px 14px;
    background-color: var(--bg-space);
    border: 1px solid rgba(223, 177, 91, 0.3);
    border-radius: 6px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.verify-input-group input:focus {
    border-color: var(--gold);
}

/* Кнопка "Подтвердить" рядом с полем ввода */
.verify-input-group button {
    padding: 10px 16px;
    border-radius: 6px;
    background-color: var(--gold);
    color: var(--bg-space);
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}
.verify-input-group button:hover {
    background-color: var(--gold-hover);
}