/* Все элементы */
* {
    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;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Блок с информацией по игре */
.game-info {
    margin-bottom: 20px;
    font-size: 24px;
    color: rgb(75, 45, 0);
    display: flex;
    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: 100%; /* ИЗМЕНЕНО: Занимает всю ширину на мобильном */
    max-width: 600px; /* ИЗМЕНЕНО: Не расширяется больше 600px на компьютере */
    height: 400px; /* Высота */
    background-color: #e0f7fa;
    /* Цвет фона */
    border: 2px solid #b47756;
    /* Рамка */
    overflow: hidden;
    /* Скрываем содержимое, выходящее за пределы */
    margin: 0 auto 20px;
    /* Центрируем поле по горизонтали и добавляем внешний отступ снизу */
    touch-action: none; /* ДОБАВЛЕНО: Блокирует прокрутку страницы свайпами на мобильном */
}

/* Ракетка */
#paddle {
    position: absolute;
    bottom: 10px;
    left: 250px;
    width: 100px;
    height: 25px;
    background-color: #faa77b;
    border-radius: 10px;
}

/* Мячик */
#ball {
    position: absolute;
    top: 190px;
    left: 290px;
    width: 20px;
    height: 20px;
    background-color: #ff4d4d;
    border-radius: 50%;
}

/* Кнопка "Начать игру" */
#start-button {
    padding: 10px 20px;
    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;
}

/* =========================================================
   ДОБАВЛЕНО: Адаптация под мобильные устройства (до 600px) 
   ========================================================= */
@media (max-width: 600px) {
    .game-container {
        padding: 10px; /* Уменьшаем отступы по краям экрана, чтобы поле было шире */
    }

    .game-info {
        font-size: 18px; /* Уменьшаем шрифт счета, чтобы он влез в одну строку */
        padding: 0 5px;
    }

    .game-area {
        height: 60vh; /* На телефонах поле будет занимать 60% от высоты экрана (удобнее играть) */
        max-height: 400px; /* Но не больше 400 пикселей */
    }

    #start-button {
        padding: 15px 30px; /* Делаем кнопку толще для удобного нажатия пальцем */
        font-size: 18px; /* Увеличиваем шрифт на кнопке */
        width: 100%; /* Кнопка во всю ширину */
    }
}