/* Сброс отступов и полей для всех элементов */
* {
    margin: 0;
    /* Убираем внешние отступы у всех элементов */
    padding: 0;
    /* Убираем внутренние отступы у всех элементов */
    box-sizing: border-box;
    /* Учитываем padding и border в размерах элемента */
}

/* Основные стили для body */
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* Устанавливаем шрифт */
    background: linear-gradient(40deg, #ffffff, #ffae83);
    /* Задаём цвет фона */
    display: flex;
    /* Включаем flex-контейнер для центрирования */
    justify-content: center;
    /* Центрируем содержимое по горизонтали */
    align-items: center;
    /* Центрируем содержимое по вертикали */
    height: 100vh;
    /* Задаём высоту body на весь экран */
    color: #333;
    /* Устанавливаем цвет текста */
}

/* Контейнер игры */
.game-container {
    text-align: center;
    /* Выравниваем текст по центру */
    background-color: #ffffffa8;
    /* Задаём белый фон контейнера */
    padding: 20px;
    /* Добавляем внутренние отступы */
    border-radius: 10px;
    /* Скругляем углы контейнера */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Добавляем тень */
    max-width: 400px;
    /* Ограничиваем максимальную ширину */
    width: 100%;
    /* Задаём ширину на 100% от родителя */
    margin: 0 auto;
    /* Центрируем контейнер по горизонтали */
}

/* Заголовок игры */
h1 {
    margin-bottom: 20px;
    /* Отступ снизу для заголовка */
    font-size: 32px;
    /* Размер шрифта */
    color: rgb(75, 45, 0);
    /* Цвет текста (зелёный) */
}

/* Выбор режима игры */
.mode-selector {
    margin-bottom: 20px;
    /* Отступ снизу для блока выбора режима */
}

/* Стили для кнопок выбора режима */
.mode-selector button {
    padding: 10px 20px;
    /* Внутренние отступы кнопок */
    margin: 0 10px;
    /* Внешние отступы между кнопками */
    font-size: 16px;
    /* Размер шрифта */
    background-color: #b67c56;
    /* Цвет фона кнопок (зелёный) */
    color: white;
    /* Цвет текста */
    border: none;
    /* Убираем границу */
    border-radius: 5px;
    /* Скругляем углы */
    cursor: pointer;
    /* Меняем курсор на указатель */
    transition: background-color 0.3s ease;
    /* Плавное изменение цвета фона */
}

/* Стили для кнопок при наведении */
.mode-selector button:hover {
    background-color: #9b6a49;
    /* Цвет фона при наведении (тёмно-коричневый) */
}

/* Игровое поле */
.board {
    display: grid;
    /* Используем grid-раскладку */
    grid-template-columns: repeat(3, 100px);
    /* 3 колонки по 100px */
    grid-template-rows: repeat(3, 100px);
    /* 3 строки по 100px */
    gap: 5px;
    /* Расстояние между ячейками */
    margin: 0 auto 20px;
    /* Центрируем поле по горизонтали и отступ снизу */
    justify-content: center;
    /* Центрируем ячейки внутри поля */
}

/* Ячейки игрового поля */
.cell {
    width: 100px;
    /* Ширина ячейки */
    height: 100px;
    /* Высота ячейки */
    background-color: #ffffff;
    /* Цвет фона ячейки */
    border: 2px solid #9b6a49;
    /* Граница ячейки (зелёная) */
    display: flex;
    /* Включаем flex-контейнер для центрирования содержимого */
    justify-content: center;
    /* Центрируем содержимое по горизонтали */
    align-items: center;
    /* Центрируем содержимое по вертикали */
    font-size: 36px;
    /* Размер шрифта */
    font-weight: bold;
    /* Жирный шрифт */
    cursor: pointer;
    /* Меняем курсор на указатель */
    transition: background-color 0.3s ease;
    /* Плавное изменение цвета фона */
}

/* Стили для ячейки при наведении */
.cell:hover {
    background-color: #f0f0f0;
    /* Цвет фона при наведении */
}

/* Стили для ячейки с крестиком */
.cell.X {
    color: #ff4d4d;
    /* Красный цвет для крестиков */
}

/* Стили для ячейки с ноликом */
.cell.O {
    color: #4d94ff;
    /* Синий цвет для ноликов */
}

/* Статус игры */
.status {
    margin-bottom: 20px;
    /* Отступ снизу */
    font-size: 20px;
    /* Размер шрифта */
    color: #9b6a49;
    /* Цвет текста (зелёный) */
}

/* Кнопка "Новая игра" */
#reset-button {
    padding: 10px 20px;
    /* Внутренние отступы */
    font-size: 16px;
    /* Размер шрифта */
    background-color: #b67c56;
    /* Цвет фона (зелёный) */
    color: white;
    /* Цвет текста */
    border: none;
    /* Убираем границу */
    border-radius: 5px;
    /* Скругляем углы */
    cursor: pointer;
    /* Меняем курсор на указатель */
    transition: background-color 0.3s ease;
    /* Плавное изменение цвета фона */
}

/* Стили для кнопки при наведении */
#reset-button:hover {
    background-color: #9b6a49;
    /* Цвет фона при наведении (тёмно-зелёный) */
}