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

/* Контейнер для игры */
.game-container {
    text-align: center;
    /* Текст по центру */
    background-color: #ffffff;
    /* Белый фон */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    /* Тень для контейнера */
    border-radius: 15px;
    /* Закругленные углы */
    padding: 20px;
    /* Внутренние отступы */
    max-width: 800px;
    /* Максимальная ширина контейнера */
    width: 100%;
    /* Ширина на все доступное пространство (но до 800 пкс) */
}

/* Заголовок игры */
.game-container h1 {
    margin-bottom: 20px;
    /* Внешний отступ снизу */
    font-size: 36px;
    /* Размер шрифта */
    color: rgb(75, 45, 0);
    /* Цвет текста */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Тень текста */
    font-weight: bold;
    /* Жирный шрифт */
    letter-spacing: 2px;
    /* Расстояние между буквами */
     background: linear-gradient(40deg,  rgb(75, 45, 0), #ffae83);
    /* Цвет фона поля текста */
    -webkit-background-clip: text;
    /* Применяем градиент к тексту (для WebKit) */
    background-clip: text;
    /* Применяем градиент к тексту (для современных браузеров) */
    -webkit-text-fill-color: transparent;
    /* Делаем текст полупрозрачным */
}

/* Блок с информацией по игре */
.game-info {
    margin-bottom: 20px;
    /* Внешний отступ снизу */
    font-size: 24px;
    /* Размер шрифта */
    color: rgb(75, 45, 0);
    /* Цвет текста */
    display: flex;
    /* flexbox для выравнивания */
    justify-content: space-between;
    /* Распределяем элементы по ширине */
    padding: 0 20px;
    /* Внутренние отступы по бокам */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* Тень текста */
}

/* Параграфы внутри блока с информацией */
.game-info p {
    padding: 10px;
    /* Внутренние отступы */
    background-color: rgb(255, 247, 234);
    /* Легкий белый фон */
    border-radius: 10px;
    /* Закругленные углы*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Тень для блоков текста */
}

/* Элементы span внутри блоков с информацией */
.game-info span {
    font-weight: bold;
    /* Жирный шрифт */
    color: #ff4d4d;
    /* Красный цвет для чисел */
}

/* Игровое поле */
.game-area {
    position: relative;
    /* Относительное позиционирование */
    width: 600px;
    /* Ширина */
    height: 400px;
    /* Высота */
    background-color: #e0f7fa;
    /* Цвет фона */
    border: 2px solid #b47756;
    /* Рамка */
    overflow: hidden;
    /* Скрываем содержимое, выходящее за пределы */
    margin: 0 auto 20px;
    /* Центрируем поле по горизонтали и добавляем внешний отступ снизу */
}

/* Ракетка */
#paddle {
    position: absolute;
    /* Абсолютное позиционирование */
    bottom: 10px;
    /* Позиция снизу */
    left: 250px;
    /* Начальная позиция по X */
    width: 100px;
    /* Ширина ракетки */
    height: 25px;
    /* Высота ракетки */
    background-color: #faa77b;
    /* Цвет ракетки */
    border-radius: 10px;
    /* Закругленные углы */
}

/* Мячик */
#ball {
    position: absolute;
    /* Абсолютное позиционирование */
    top: 190px;
    /* Начальная позиция по Y */
    left: 290px;
    /* Начальная позиция по X */
    width: 20px;
    /* Ширина мячика */
    height: 20px;
    /* Высота мячика */
    background-color: #ff4d4d;
    /* Цвет мячика */
    border-radius: 50%;
    /* Делаем мяч круглым */    
}

/* Кнопка "Начать игру" */
#start-button {
    padding: 10px 20px;
    /* Внутренние отступы (10 пкс сверху и снизу, 20 пкс по бокам) */
    font-size: 16px;
    /* Размер шрифта */
    background-color: #faa77b;
    /* Цвет фона */
    color: rgb(75, 45, 0);
    /* Цвет текста */
    border: none;
    /* Убираем рамку */
    border-radius: 5px;
    /* Закругленные углы */
    cursor: pointer;
    /* Курсор в виде указателя */
    transition: background-color 300ms ease;
    /* Плавное изменение цвета фона */
}

/* Кнопка "Начать игру" при наведении курсором */
#start-button:hover {
    background-color: #c58461;
    /* Изменение цвета фона */
}