@font-face {
    font-family: Pompadur; /* Гарнитура шрифта */
    src: url('/static/font.otf'); /* Путь к файлу со шрифтом */
   }


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Pompadur;;
}

body, html {
    height: 100%;
    display: flex;
    flex-direction: column;
}


#main-container {
    display: flex;
    flex: 1; /* Занимает оставшееся пространство */
}

#menu-container {
    width: 200px; /* Ширина контейнера меню */
    background-color: #222; /* Темный фон для меню */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Начинаем выравнивание с верхней части */
    padding: 10px;
    position: relative; /* Устанавливаем относительное позиционирование для контейнера */
    height: 100%; /* Убедитесь, что контейнер имеет заданную высоту */
}

#game-container {
    flex: 1; /* Занимает оставшееся пространство */
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    background-color: #191919;
}

canvas {
    border: 1px solid #fff;
}

#shapes-container {
    display: flex;
    flex-direction: column;
    margin-left: 10px; /* Отступ между канвасом и контейнером фигур */
}

#next-shape-container, #hold-shape-container {
    margin-top: 10px;
    background-color: #333; /* Темный фон для контейнеров фигур */
    color: #fff; /* Белый текст */
    padding: 5px;
    text-align: center;
    width: 100px; /* Ширина контейнера для фигур */
    overflow: hidden; /* Скрываем переполнение */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем содержимое по горизонтали */
    box-sizing: border-box; /* Учитываем отступы в ширине контейнера */
}

#next-shape-container h3, #hold-shape-container h3 {
    font-size: 10px; /* Уменьшенный размер шрифта */
    margin: 0; /* Убираем отступы */
}

#next-shape, #hold-shape {
    background-color: #000; /* Черный фон */
    border: 2px solid #fff; /* Белая обводка */
    width: 100%; /* Занимает всю ширину контейнера */
    height: 100%; /* Занимает всю высоту контейнера */
    box-sizing: border-box; /* Учитываем обводку в размерах */
}

#chat-container {
    width: 300px; /* Ширина контейнера чата */
    height: 100vh; /* Высота контейнера чата на всю высоту экрана */
    background-color: #222; /* Темный фон для чата */
    color: #fff; /* Белый текст */
    display: flex;
    flex-direction: column;
    border: 1px solid #444; /* Темная рамка для контейнера */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
}

.chat-header {
    background-color: #444; /* Темный фон для заголовка */
    color: #fff; /* Белый текст */
    padding: 10px;
    text-align: center;
}

.chat-messages {
    flex: 1; /* Занимает оставшееся пространство */
    padding: 10px;
    overflow-y: auto; /* Прокрутка при переполнении */
    background-color: #333; /* Темный фон для области сообщений */
    color: #fff; /* Белый текст */
}

.chat-input-container {
    display: flex; /* Используем флекс для выравнивания по горизонтали */
    align-items: center; /* Центрируем элементы по вертикали */
    padding: 10px; /* Добавляем отступы */
    background-color: #444; /* Темный фон для контейнера ввода */
}

.chat-input {
    flex: 1; /* Поле ввода занимает оставшееся пространство */
    margin-right: 10px; /* Отступ между полем ввода и кнопкой */
    border: 1px solid #555; /* Темная рамка */
    padding: 10px; /* Отступы внутри поля ввода */
    background-color: #444; /* Темный фон для поля ввода */
    color: #fff; /* Белый текст */
}

.chat-input::placeholder {
    color: #aaa; /* Светло-серый цвет для плейсхолдера */
}

.send-button {
    background-color: #888; /* Серый фон для кнопки */
    color: #fff; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 10px; /* Отступы для кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    width: 80px; /* Ширина кнопки "Отправить" */
    transition: background-color 0.3s, transform 0.2s; /* Плавные переходы */
}

.send-button:hover {
    background-color: #aaa; /* Изменение цвета при наведении */
    transform: translateY(-2px); /* Легкий подъем кнопки при наведении */
}

.send-button:active {
    transform: translateY(0); /* Возвращаем кнопку на место при нажатии */
}


footer {
    height: 30px; /* Высота футера */
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-banner {
    text-align: center;
    font-size: 1em; /* Размер шрифта для рекламы */
}

/* Стили для кнопок */
button {
    background-color: #888; /* Серый фон для кнопок */
    color: #fff; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 10px 15px; /* Отступы для кнопок */
    margin: 5px 0; /* Отступы между кнопками */
    cursor: pointer; /* Курсор в виде указателя */
    width: 100%; /* Ширина кнопок на всю ширину контейнера */
    transition: background-color 0.3s, transform 0.2s; /* Плавные переходы */
}

button:hover {
    background-color: #aaa; /* Изменение цвета при наведении */
    transform: translateY(-2px); /* Легкий подъем кнопки при наведении */
}

button:active {
    transform: translateY(0); /* Возвращаем кнопку на место при нажатии */
}

/* Стили для полей ввода */
input[type="text"],
input[type="password"] {
    width: 100%; /* Ширина полей ввода на всю ширину контейнера */
    padding: 10px; /* Отступы внутри полей ввода */
    margin: 5px 0; /* Отступы между полями ввода */
    border: 1px solid #555; /* Темная рамка */
    background-color: #444; /* Темный фон для полей ввода */
    color: #fff; /* Белый текст */
    border-radius: 0; /* Убираем скругления */
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: #aaa; /* Светло-серый цвет для плейсхолдера */
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none; /* Убираем стандартную обводку при фокусе */
    border: 1px solid #888; /* Можно изменить цвет рамки при фокусе, если нужно */
}

/* Стили для страницы регистрации */
.registration-container {
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    height: 100vh; /* Занимаем всю высоту экрана */
    background-color: #111; /* Темный фон для страницы регистрации */
}

.registration-form {
    background-color: #222; /* Темный фон для формы */
    padding: 20px; /* Отступы внутри формы */
    border-radius: 5px; /* Скругление углов */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Тень для формы */
    width: 300px; /* Ширина формы */
}

.registration-form input {
    width: 100%; /* Ширина полей ввода на всю ширину формы */
    padding: 10px; /* Отступы внутри полей ввода */
    margin: 10px 0; /* Отступы между полями ввода */
    border: 1px solid #555; /* Темная рамка */
    background-color: #444; /* Темный фон для полей ввода */
    color: #fff; /* Белый текст */
    border-radius: 3px; /* Скругление углов */
}

.registration-form button {
    background-color: #888; /* Серый фон для кнопки */
    color: #fff; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 10px; /* Отступы для кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    width: 100%; /* Ширина кнопки на всю ширину формы */
    transition: background-color 0.3s, transform 0.2s; /* Плавные переходы */
}

.registration-form button:hover {
    background-color: #aaa; /* Изменение цвета при наведении */
    transform: translateY(-2px); /* Легкий подъем кнопки при наведении */
}

.registration-form button:active {
    transform: translateY(0); /* Возвращаем кнопку на место при нажатии */
}

/* Стили для контейнера с информацией о пользователе */
.user-info-container {
    background-color: #444; /* Более светлый фон для контейнера */
    color: #fff; /* Белый текст */
    padding: 10px; /* Отступы внутри контейнера */
    border-radius: 5px; /* Скругление углов */
    margin-bottom: 10px; /* Отступ снизу */
    text-align: center; /* Центрируем текст */
    width: 100%; /* Ширина контейнера на всю ширину родителя */
}

/* Стили для заголовков в контейнере пользователя */
.user-info-container h3 {
    margin: 5px 0; /* Отступы между заголовками */
    font-size: 14px; /* Размер шрифта для заголовков */
}

/* Стили для кнопки выхода */
.logout-button {
    background-color: #888; /* Более светлый фон для кнопки */
    color: #fff; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 10px; /* Отступы для кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    width: 100%; /* Ширина кнопки на всю ширину контейнера */
    transition: background-color 0.3s, transform 0.2s; /* Плавные переходы */
}

.logout-button:hover {
    background-color: #aaa; /* Изменение цвета при наведении */
    transform: translateY(-2px); /* Легкий подъем кнопки при наведении */
}

.logout-button:active {
    transform: translateY(0); /* Возвращаем кнопку на место при нажатии */
}

/* Стили для информации об управлении */
#controls-info {
    font-size: 12px; /* Уменьшенный размер шрифта */
}

#controls-info h4 {
    font-size: 14px; /* Размер шрифта для заголовка */
    margin-bottom: 5px; /* Отступ снизу для заголовка */
}

.ad-banner {
    background-color: #333; /* Темный фон для рекламы */
    color: #fff; /* Белый текст */
    display: flex;
    justify-content: center; /* Центрируем текст по горизонтали */
    align-items: center; /* Центрируем текст по вертикали */
    height: 50%; /* Высота баннера на половину высоты контейнера меню */
    width: 100%; /* Ширина на всю ширину контейнера меню */
    padding: 10px; /* Отступы внутри баннера */
    box-sizing: border-box; /* Учитываем отступы в размерах */
}

.alert{
    color: #814343;
    font-size: 9pt;
}

#play-button {
    background-color: #4CAF50; /* Зеленый фон */
    color: #fff; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 10px; /* Отступы для кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    width: 100%; /* Ширина кнопки на всю ширину контейнера */
    transition: background-color 0.3s, transform 0.2s; /* Плавные переходы */
}

#play-button:hover {
    background-color: #45a049; /* Более темный зеленый при наведении */
    transform: translateY(-2px); /* Легкий подъем кнопки при наведении */
}

#play-button:active {
    transform: translateY(0); /* Возвращаем кнопку на место при нажатии */
}