/* style.css */

/* Общие стили для всего документа */
body {
    font-family: 'Arial', sans-serif; /* Шрифт для всего текста */
    background-color: #1a1a2e; /* Основной темно-синий фон */
    color: #e0e0f0; /* Светлый текст по умолчанию */
    margin: 0; /* Убираем стандартные отступы у body */
    padding: 20px; /* Внутренний отступ вокруг содержимого страницы */
    box-sizing: border-box; /* Учитываем padding и border в общей ширине/высоте элемента */
    overflow-x: hidden; /* Предотвращаем горизонтальную прокрутку, если содержимое выходит за рамки */
}

/* Анимированный градиентный фон для создания "лунной" атмосферы */
body::before {
    content: ''; /* Обязательное свойство для ::before */
    position: fixed; /* Фиксированное позиционирование, чтобы фон не прокручивался */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Градиент из трех цветов, которые будут анимироваться */
    background: linear-gradient(45deg, #1a1a2e, #0f0f1c, #2b2b4c);
    background-size: 400% 400%; /* Увеличиваем размер фона для плавной анимации */
    animation: gradientAnimation 15s ease infinite; /* Применяем анимацию */
    z-index: -1; /* Отправляем фон за основной контент */
    opacity: 0.7; /* Делаем фон немного прозрачным */
}

/* Определение ключевых кадров для анимации градиента */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; } /* Начальное положение градиента */
    50% { background-position: 100% 50%; } /* Середина анимации */
    100% { background-position: 0% 50%; } /* Возвращение в начальное положение */
}

/* Контейнер для основного содержимого страницы */
.container {
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
    padding: 20px; /* Внутренний отступ */
    background-color: #0f0f1c; /* Чуть светлее фон для контейнера */
    border-radius: 15px; /* Скругленные углы */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Тень для выделения контейнера */
}

/* Стили для заголовков */
h1, h2, h3 {
    color: #8a2be2; /* Фиолетовый цвет для заголовков */
    text-align: center; /* Центрируем текст заголовков */
    margin-bottom: 25px; /* Отступ снизу */
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.7); /* Свечение для заголовков */
}

/* Стили для хедера (шапки сайта) */
header {
    display: flex; /* Используем flexbox для выравнивания элементов */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    padding: 15px 0; /* Внутренние отступы */
    border-bottom: 2px solid #8a2be2; /* Фиолетовая нижняя граница */
    margin-bottom: 30px; /* Отступ снизу */
}

/* Стили для логотипа */
.logo {
    font-size: 2.5em; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #e0e0f0; /* Цвет текста */
    text-shadow: 0 0 10px rgba(224, 224, 240, 0.7); /* Свечение */
}

/* Стили для навигационного меню */
nav ul {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; /* Убираем стандартные отступы */
    padding: 0;
    display: flex; /* Используем flexbox для горизонтального расположения элементов */
}

nav ul li {
    margin-left: 25px; /* Отступ между пунктами меню */
}

nav ul li a {
    color: #e0e0f0; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    font-weight: bold; /* Жирный шрифт */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Плавный переход при наведении */
}

nav ul li a:hover {
    color: #8a2be2; /* Цвет при наведении */
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.7); /* Свечение при наведении */
}

/* Стили для строки поиска */
.search-bar {
    display: flex;
    justify-content: center; /* Центрируем строку поиска */
    margin-bottom: 40px; /* Отступ снизу */
}

.search-bar input {
    width: 60%; /* Ширина поля ввода */
    padding: 15px; /* Внутренний отступ */
    border: none; /* Убираем границу */
    border-radius: 10px; /* Скругленные углы */
    background-color: #2b2b4c; /* Темный фон поля ввода */
    color: #e0e0f0; /* Цвет текста */
    font-size: 1.1em; /* Размер шрифта */
    outline: none; /* Убираем обводку при фокусе */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Тень */
}

.search-bar input::placeholder {
    color: #a0a0c0; /* Цвет плейсхолдера */
}

/* Стили для отображения баланса валюты Rage */
.currency-display {
    text-align: right; /* Выравнивание текста по правому краю */
    font-size: 1.2em; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #00bcd4; /* Голубой цвет для валюты */
    margin-bottom: 20px; /* Отступ снизу */
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.7); /* Свечение */
}

/* Стили для сетки игр */
.game-grid {
    display: grid; /* Используем CSS Grid для раскладки */
    /* Адаптивная сетка с минимальной шириной колонки, достаточной для изображения 156px + отступы */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 30px; /* Расстояние между элементами сетки */
    margin-bottom: 40px; /* Отступ снизу */
}

/* Стили для отдельной карточки игры */
.game-card {
    background-color: #2b2b4c; /* Темный фон карточки */
    border-radius: 15px; /* Скругленные углы */
    overflow: hidden; /* Обрезаем содержимое, которое выходит за границы */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавный переход при наведении */
    cursor: pointer; /* Курсор в виде указателя */
    text-align: center; /* Центрируем содержимое карточки */
    padding-bottom: 15px; /* Отступ снизу внутри карточки */
}

.game-card:hover {
    transform: translateY(-8px); /* Поднимаем карточку вверх при наведении */
    box-shadow: 0 10px 25px rgba(138, 43, 226, 0.5); /* Усиленная тень с фиолетовым свечением */
}

.game-card img {
    width: 156px;       /* Фиксированная ширина изображения */
    height: 156px;      /* Фиксированная высота изображения */
    object-fit: cover;  /* Обрезает изображение, чтобы оно заполнило контейнер, сохраняя пропорции */
    border-bottom: 2px solid #8a2be2; /* Нижняя граница изображения */
    display: block;     /* Гарантируем, что это блочный элемент */
    margin: 0 auto 15px auto; /* Центрируем блочный элемент по горизонтали и добавляем отступ снизу */
}

.game-card h3 {
    margin: 15px 0 10px; /* Отступы для заголовка игры */
    color: #e0e0f0; /* Цвет текста */
    font-size: 1.3em; /* Размер шрифта */
    text-shadow: none; /* Отключаем тень для заголовка в карточке */
}

.game-card p {
    color: #a0a0c0; /* Цвет текста для описания/создателя */
    font-size: 0.9em; /* Размер шрифта */
}

/* Стили для отображения цены/статуса игры на карточке */
.game-card .game-price {
    margin-top: 10px; /* Отступ сверху */
    font-size: 1.1em; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #00bcd4; /* Голубой цвет для цены */
    text-shadow: 0 0 5px rgba(0, 188, 212, 0.5); /* Свечение */
}

.game-card .game-price.free {
    color: #4CAF50; /* Зеленый цвет для бесплатных игр */
    text-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Зеленое свечение */
}

/* Разделительная линия */
hr {
    border: none;
    border-top: 2px dashed #8a2be2; /* Пунктирная фиолетовая линия */
    margin: 50px 0; /* Отступы сверху и снизу */
    opacity: 0.7;
}

/* --- Стили для game-details.html (если используется как отдельная страница) ---
   В данном проекте детали игры отображаются в модальном окне, но эти стили могут быть полезны,
   если вы решите использовать отдельную страницу. */
.game-details {
    background-color: #2b2b4c;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-details img {
    max-width: 80%;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}

.game-details h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.game-info p {
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: center;
}

.game-actions {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

/* Стили для кнопок */
.btn {
    display: inline-block; /* Отображение как строчно-блочный элемент */
    padding: 15px 30px; /* Внутренние отступы */
    background-color: #8a2be2; /* Фиолетовый фон */
    color: white; /* Белый текст */
    text-decoration: none; /* Убираем подчеркивание */
    border-radius: 10px; /* Скругленные углы */
    font-weight: bold; /* Жирный шрифт */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Плавный переход при наведении */
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4); /* Тень с фиолетовым свечением */
}

.btn:hover {
    background-color: #9932cc; /* Изменение цвета при наведении */
    transform: translateY(-3px); /* Поднимаем кнопку вверх при наведении */
}

.btn-secondary {
    background-color: #00bcd4; /* Голубой фон для второстепенных кнопок */
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.4); /* Тень с голубым свечением */
}

.btn-secondary:hover {
    background-color: #0097a7; /* Изменение цвета при наведении */
}

/* --- Стили для codes.html --- */
.code-section {
    text-align: center; /* Центрируем содержимое */
    margin-top: 50px; /* Отступ сверху */
}

.code-section input {
    width: 50%; /* Ширина поля ввода */
    padding: 15px;
    border: none;
    border-radius: 10px;
    background-color: #2b2b4c;
    color: #e0e0f0;
    font-size: 1.1em;
    margin-right: 15px; /* Отступ справа от кнопки */
    outline: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.code-section button {
    padding: 15px 30px;
    background-color: #00bcd4; /* Голубая кнопка */
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.4);
}

.code-section button:hover {
    background-color: #0097a7;
}

#code-message {
    margin-top: 20px; /* Отступ сверху */
    font-size: 1.2em;
    font-weight: bold;
    color: #00bcd4; /* Голубой цвет для сообщения */
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.7); /* Свечение */
}

/* --- Стили для модального окна (game-modal) --- */
.modal {
    display: none; /* КЛЮЧЕВО: Скрыто по умолчанию. Показывается JS при необходимости */
    position: fixed; /* Оставаться на месте при прокрутке */
    z-index: 100; /* Высокий z-index, чтобы окно было поверх всего */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    overflow: auto; /* Включить прокрутку, если содержимое слишком большое */
    background-color: rgba(0,0,0,0.8); /* Черный фон с прозрачностью */
    backdrop-filter: blur(5px); /* Размытие фона под модальным окном */
    /* justify-content и align-items работают, когда display: flex,
       которое устанавливается через JavaScript для центрирования содержимого. */
    justify-content: center; /* Центрирование содержимого по горизонтали */
    align-items: center; /* Центрирование содержимого по вертикали */
}

.modal-content {
    background-color: #2b2b4c; /* Темный фон содержимого модального окна */
    margin: auto; /* Центрируем по вертикали и горизонтали */
    padding: 30px;
    border: 2px solid #8a2be2; /* Фиолетовая рамка */
    border-radius: 15px;
    width: 90%; /* Ширина содержимого */
    max-width: 700px; /* Максимальная ширина */
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7); /* Тень с фиолетовым свечением */
    position: relative; /* Для позиционирования кнопки закрытия */
    text-align: center; /* Центрируем текст внутри */
    animation: fadeIn 0.3s ease-out; /* Анимация появления */
}

/* Анимация появления модального окна */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.close-button {
    color: #e0e0f0; /* Цвет кнопки закрытия */
    position: absolute; /* Абсолютное позиционирование относительно .modal-content */
    top: 10px;
    right: 25px;
    font-size: 35px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer; /* Курсор в виде указателя */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

.close-button:hover,
.close-button:focus {
    color: #8a2be2; /* Цвет при наведении */
    text-decoration: none;
    cursor: pointer;
}

.modal-content img {
    max-width: 90%; /* Максимальная ширина изображения в модальном окне */
    height: auto; /* Автоматическая высота */
    border-radius: 10px;
    margin-bottom: 20px;
}

.modal-content h2 {
    font-size: 2em;
    color: #e0e0f0;
    margin-bottom: 15px;
    text-shadow: none; /* Убираем свечение для заголовка в модальном окне */
}

.modal-content p {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #a0a0c0;
}

.modal-label {
    color: #00bcd4; /* Цвет для подписей (например, "Описание:", "Дата выхода:") */
    font-weight: bold;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Меньший отступ на маленьких экранах */
    }

    .container {
        padding: 15px;
    }

    header {
        flex-direction: column; /* Элементы хедера в колонку */
        text-align: center;
    }

    nav ul {
        margin-top: 15px;
        flex-wrap: wrap; /* Разрешаем пунктам меню переноситься на новую строку */
        justify-content: center;
    }

    nav ul li {
        margin: 5px 10px; /* Меньшие отступы между пунктами меню */
    }

    .logo {
        font-size: 2em;
    }

    .currency-display {
        text-align: center;
        margin-top: 15px;
    }

    .search-bar input {
        width: 90%; /* Шире поле поиска на мобильных */
    }

    .game-grid {
        /* На мобильных 156px - это хороший размер. */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Чуть больше 156px для отступов */
        gap: 20px;
    }

    .game-card img {
        width: 156px; /* Сохраняем 156px на мобильных */
        height: 156px;
        margin-bottom: 10px;
    }

    .code-section input {
        width: 80%;
        margin-right: 0;
        margin-bottom: 15px;
        display: block; /* Поле ввода и кнопка в столбик */
        margin-left: auto;
        margin-right: auto;
    }

    .code-section button {
        width: 80%; /* Кнопка на всю ширину */
    }

    .modal-content {
        width: 95%; /* Модальное окно чуть шире на мобильных */
        padding: 20px;
    }

    .close-button {
        font-size: 30px;
        right: 15px;
    }

    .btn {
        padding: 12px 20px; /* Меньшие кнопки на мобильных */
        font-size: 0.9em;
    }
}