/* Глобальные стили */
* {
    box-sizing: border-box; /* Включаем границы и padding в ширину/высоту */
}
/* Устанавливаем общие стили для всего документа */
body {
    margin: 0; /* Убираем внешние отступы по умолчанию */
    font-family: Arial, sans-serif; /* Задаём шрифт Arial с запасным вариантом sans-serif */
    background-color: #000000; /* Устанавливаем чёрный фон страницы */
    color: #e0e0e0; /* Задаём светло-серый цвет текста */
    overflow-y: auto; /* Включаем вертикальную прокрутку при необходимости */
    overflow-x: hidden; /* Отключаем горизонтальную прокрутку */
}

/* Стили для основного контейнера игры */
#game-container {
    display: flex; /* Используем flexbox для компоновки */
    flex-direction: column; /* Элементы располагаются вертикально */
    height: 100vh; /* Контейнер занимает всю высоту видимой области */
}

/* Стили для фиксированного блока характеристик игрока вверху */
#player-stats-container {
    position: fixed; /* Фиксируем позицию вверху экрана */
    top: 0; /* Прижимаем к верхнему краю */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* Занимает всю ширину экрана */
    z-index: 100; /* Высокий уровень слоя для перекрытия других элементов */
    padding: 0px 0; /* Устанавливаем нулевые внутренние отступы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Добавляем тень снизу */
    height: 107px; /* Явно задаём фиксированную высоту контейнера */
}

/* Классы для управления видимостью элементов */
.hidden {
    display: none !important; /* Скрываем элемент полностью с приоритетом */
}

.visible-flex {
    display: flex !important; /* Показываем элемент как flex-контейнер с приоритетом */
}

.visible-block {
    display: block !important; /* Показываем элемент как блочный с приоритетом */
}

/* Стили для основного контента страницы */
#main-content {
    flex: 1; /* Контент растягивается, занимая доступное пространство */
    padding-top: 107px; /* Отступ сверху равен высоте #player-stats-container */
    padding-bottom: 70px; /* Отступ снизу для меню навигации */
    overflow-y: auto; /* Включаем вертикальную прокрутку */
    overflow-x: hidden; /* Отключаем горизонтальную прокрутку */
    background-color: #000000; /* Чёрный фон контента */
    position: relative; /* Относительное позиционирование для дочерних элементов */
    scrollbar-width: none; /* Убираем ширину полосы прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
}

#main-content::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки в Webkit-браузерах (Chrome, Safari) */
}

/* Стили для нижнего фиксированного меню */
#menu {
    position: fixed; /* Фиксируем меню внизу экрана */
    bottom: 0; /* Прижимаем к нижнему краю */
    left: 0; /* Прижимаем к левому краю */
    right: 0; /* Растягиваем до правого края */
    display: flex; /* Используем flexbox для кнопок */
    justify-content: space-around; /* Равномерно распределяем кнопки */
    background-color: #1c1c1c; /* Тёмно-серый фон меню */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    width: 100%; /* Занимает всю ширину экрана */
    box-sizing: border-box; /* Учитываем padding в ширине */
    z-index: 99; /* Высокий уровень слоя, но ниже #player-stats-container */
}

/* Стили для кнопок в нижнем меню */
#menu .icon-button {
    width: 50px; /* Фиксированная ширина кнопки */
    height: 50px; /* Фиксированная высота кнопки */
    background-color: #333333; /* Серый фон кнопки */
    border-radius: 10px; /* Скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Тень для объёма */
    display: flex; /* Flexbox для центрирования иконки */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.2s, transform 0.1s; /* Плавные переходы для цвета и масштаба */
}

/* Стили для иконок внутри кнопок меню */
#menu .icon-button .menu-icon {
    width: 30px; /* Ширина иконки */
    height: 30px; /* Высота иконки */
    filter: invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%); /* Фильтр для неактивного состояния */
    transition: filter 0.2s; /* Плавный переход для фильтра */
}

/* Стили для активных или наведённых иконок в меню */
#menu .icon-button.active .menu-icon,
#menu .icon-button:hover .menu-icon {
    filter: invert(61%) sepia(72%) saturate(1278%) hue-rotate(0deg) brightness(105%) contrast(103%); /* Фильтр для активного состояния */
}

/* Стили для нажатой кнопки меню */
#menu .icon-button:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
    background-color: #444444; /* Более светлый фон при нажатии */
}

/* Стили для заблокированных кнопок меню */
#menu.blocked .icon-button {
    cursor: not-allowed; /* Курсор "запрещено" */
    opacity: 0.5; /* Полупрозрачность для эффекта отключения */
}

/* Стили для контейнера карточек */
#cards-container {
    display: flex; /* Flexbox для карточек */
    flex-wrap: wrap; /* Перенос карточек на новую строку */
    gap: 10px; /* Расстояние между карточками */
    padding: 10px; /* Внутренние отступы */
    justify-content: space-between; /* Распределяем карточки по ширине */
    width: 100%; /* Занимает всю ширину контейнера */
    box-sizing: border-box; /* Учитываем padding в ширине */
    overflow-y: auto; /* Вертикальная прокрутка */
    overflow-x: hidden; /* Без горизонтальной прокрутки */
    scrollbar-width: none; /* Убираем полосу прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
}

#cards-container::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки (Webkit) */
}

/* Стили для блока ресурсов */
#resources-box {
    display: flex; /* Flexbox для ресурсов */
    justify-content: center; /* Центрируем элементы */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    padding: 5px; /* Внутренние отступы */
    margin-bottom: 8px; /* Отступ снизу */
    width: 100%; /* Полная ширина */
    gap: 17px; /* Расстояние между элементами */
}

.resource-item {
    display: flex; /* Flexbox для иконки и числа */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center; /* Центрирование по вертикали */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
}

.resource-icon {
    width: 24px; /* Ширина иконки ресурса */
    height: 24px; /* Высота иконки ресурса */
    margin-bottom: 5px; /* Отступ между иконкой и числом */
    display: block; /* Убеждаемся, что иконка блочная */
}

.resource-item span {
    font-size: 14px; /* Размер шрифта числа */
    color: #e0e0e0; /* Светло-серый цвет текста */
    margin: 0; /* Убираем отступы */
    padding: 0; /* Убираем внутренние отступы */
    text-align: center; /* Центрируем текст */
    line-height: 1; /* Убираем лишние промежутки */
}

/* Специфичные стили для лимита хранения */
#storage-limit {
    font-size: 14px; /* Размер шрифта */
    color: #ff9500; /* Оранжевый цвет текста */
    font-weight: bold; /* Жирный шрифт */
    margin: 0; /* Без отступов */
    padding: 0; /* Без внутренних отступов */
    text-align: center; /* Центрирование текста */
    line-height: 1; /* Убираем лишние промежутки */
}

/* Стили для меню выбора типа карточек */
#cards-menu {
    display: flex; /* Flexbox для вкладок */
    justify-content: center; /* Центрируем вкладки */
    margin-bottom: 10px; /* Отступ снизу */
    width: 95%; /* Ширина с небольшим отступом от краёв */
    margin-left: auto; /* Автоматический отступ слева */
    margin-right: auto; /* Автоматический отступ справа */
}

.menu-tab {
    padding: 10px 20px; /* Внутренние отступы */
    background-color: #333333; /* Серый фон */
    color: #e0e0e0; /* Светло-серый текст */
    border: none; /* Без границы */
    border-radius: 20px; /* Скругленные углы */
    cursor: pointer; /* Курсор указателя */
    margin: 0 5px; /* Отступы между вкладками */
    transition: background-color 0.2s, transform 0.1s; /* Плавные переходы */
}

.menu-tab.active {
    background: linear-gradient(45deg, #ff9500, #ffcc00); /* Градиент для активной вкладки */
    color: white; /* Белый текст */
    box-shadow: 0 4px 8px rgba(255, 149, 0, 0.5); /* Тень оранжевого оттенка */
    transform: scale(1.05); /* Лёгкое увеличение */
}

.menu-tab:hover {
    background-color: #444444; /* Более светлый фон при наведении */
}

/* Стили для карточек предметов */
.card {
    width: calc(50% - 5px) !important; /* Ширина половины контейнера минус половина gap */
    background-color: rgba(255, 255, 255, 0.2); /* Полупрозрачный белый фон */
    border-radius: 15px; /* Скругленные углы */
    padding: 15px; /* Внутренние отступы */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Тень для объёма */
    color: #ffffff; /* Белый текст */
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    justify-content: space-between; /* Равномерное распределение */
    box-sizing: border-box; /* Учитываем padding в размерах */
    min-width: 0 !important; /* Предотвращаем сжатие меньше 0 */
    max-width: none !important; /* Отключаем ограничение максимальной ширины */
}

.card .card-icon {
    width: 100%; /* Иконка занимает всю ширину карточки */
    height: 150px; /* Фиксированная высота иконки */
    border-radius: 15px; /* Скругленные углы */
    object-fit: cover; /* Обрезаем изображение по размеру */
    margin-bottom: 8px; /* Отступ снизу */
}

.card .card-title {
    font-size: 18px; /* Размер шрифта заголовка */
    font-weight: bold; /* Жирный шрифт */
    text-align: center; /* Центрирование текста */
    margin-bottom: 10px; /* Отступ снизу */
}

/* Стили для блока требований карточки */
.card-requirements {
    display: flex; /* Flexbox для требований */
    justify-content: center; /* Центрируем элементы */
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    gap: 6px; /* Расстояние между элементами */
    margin-bottom: 10px; /* Отступ снизу */
    font-size: 10.67px; /* Размер шрифта */
    padding-bottom: 8px; /* Внутренний отступ снизу */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Разделительная линия */
}

.card-requirements .requirement-item {
    display: flex; /* Flexbox для элемента требования */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    position: relative; /* Относительное позиционирование для псевдоэлементов */
}

.card-requirements .requirement-item:not(:last-child)::after {
    content: ''; /* Пустой контент для разделителя */
    position: absolute; /* Абсолютное позиционирование */
    right: -3px; /* Отступ справа */
    top: 0; /* Начало сверху */
    height: 100%; /* Полная высота элемента */
    width: 1px; /* Ширина линии */
    background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачная белая линия */
}

/* Стили для блока бонусов карточки */
.card-bonuses {
    display: flex; /* Flexbox для бонусов */
    justify-content: center; /* Центрируем элементы */
    flex-wrap: wrap; /* Перенос на новую строку */
    gap: 6px; /* Расстояние между элементами */
    margin-bottom: 10px; /* Отступ снизу */
    font-size: 10.67px; /* Размер шрифта */
    padding-bottom: 8px; /* Внутренний отступ снизу */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Разделительная линия */
}

.card-bonuses .bonus-item {
    display: flex; /* Flexbox для элемента бонуса */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    position: relative; /* Относительное позиционирование для псевдоэлементов */
}

.card-bonuses .bonus-item:not(:last-child)::after {
    content: ''; /* Пустой контент для разделителя */
    position: absolute; /* Абсолютное позиционирование */
    right: -3px; /* Отступ справа */
    top: 0; /* Начало сверху */
    height: 100%; /* Полная высота элемента */
    width: 1px; /* Ширина линии */
    background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачная белая линия */
}

.card-requirements .resource-icon,
.card-bonuses .resource-icon {
    width: 16px; /* Ширина иконки ресурса или бонуса */
    height: 16px; /* Высота иконки */
}

.card-requirements span:not(.missing),
.card-bonuses span:not(.missing) {
    font-weight: bold; /* Жирный шрифт для доступных значений */
}

.card-requirements .missing,
.card-requirements .missing span {
    color: #ff0000; /* Красный цвет для недостающих ресурсов */
    font-weight: bold; /* Жирный шрифт */
}

.card-requirements .missing svg text {
    fill: #ff0000; /* Красный цвет текста в SVG для недостающих уровней */
}

/* Стили для блока времени улучшения */
.card-time {
    display: flex; /* Flexbox для времени */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    gap: 3px; /* Расстояние между иконкой и текстом */
    margin-bottom: 10px; /* Отступ снизу */
    font-size: 10.67px; /* Размер шрифта */
}

.card-time img {
    width: 16px; /* Ширина иконки времени */
    height: 16px; /* Высота иконки времени */
}

/* Стили для блока уровня и кнопки действия */
.card-action-container {
    display: flex; /* Flexbox для уровня и кнопки */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Вертикальное центрирование */
    margin-top: 0; /* Без отступа сверху */
    gap: 10px; /* Расстояние между элементами */
    padding-top: 8px; /* Отступ сверху */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Разделительная линия сверху */
}

.card-level-icon {
    width: 40px; /* Ширина иконки уровня */
    height: 40px; /* Высота иконки уровня */
    display: inline-block; /* Встраиваем в строку */
    vertical-align: middle; /* Выравнивание по вертикали */
}

.card-action {
    width: 90%; /* Ширина кнопки действия */
    padding: 6px; /* Внутренние отступы */
    border-radius: 20px; /* Скругленные углы */
    border: none; /* Без границы */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Курсор указателя */
    color: white; /* Белый текст */
}

.card-action.inactive {
    background-color: #555555; /* Серый фон для неактивной кнопки */
    border: 2px solid #333333; /* Тёмно-серая граница */
    cursor: not-allowed; /* Курсор "запрещено" */
    box-shadow: none; /* Без тени */
}

.card-action:not(.inactive) {
    background: linear-gradient(45deg, #ff9500, #ffcc00); /* Градиент для активной кнопки */
    box-shadow: 0 4px 8px rgba(255, 149, 0, 0.5); /* Тень оранжевого оттенка */
}

/* Стили для начального экрана */
#default-screen {
    display: flex; /* Flexbox для центрирования */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    height: 100%; /* Полная высота контейнера */
    width: 100%; /* Полная ширина контейнера */
    overflow-y: auto; /* Вертикальная прокрутка */
    overflow-x: hidden; /* Без горизонтальной прокрутки */
    scrollbar-width: none; /* Убираем полосу прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
}

#default-screen::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки (Webkit) */
}

.logo {
    max-width: 80%; /* Максимальная ширина логотипа */
    height: auto; /* Автоматическая высота */
    object-fit: contain; /* Сохраняем пропорции изображения */
}

/* Стили для заголовка характеристик игрока */
#player-stats-header {
    background-color: #000000; /* Чёрный фон */
    display: flex; /* Flexbox для компоновки */
    align-items: center; /* Вертикальное центрирование */
    justify-content: space-between; /* Распределяем элементы по краям */
    padding: 7px; /* Внутренние отступы */
    border-bottom: 1px solid #333333; /* Нижняя граница */
}

.stats-left {
    display: flex; /* Flexbox для левой части */
    align-items: center; /* Вертикальное центрирование */
    gap: 10px; /* Расстояние между элементами */
}

#opponent-stats .opponent-avatar {
    width: 30px; /* Ширина аватара противника */
    height: 30px; /* Высота аватара противника */
    border-radius: 50%; /* Круглая форма */
    object-fit: cover; /* Обрезаем изображение */
    cursor: default; /* Курсор по умолчанию (не кликабельно) */
    padding: 4px; /* Внутренние отступы */
}

.player-avatar {
    width: 30px; /* Ширина аватара игрока */
    height: 30px; /* Высота аватара игрока */
    border-radius: 50%; /* Круглая форма */
    object-fit: cover; /* Обрезаем изображение */
}

.stats-left .username,
.opponent-name {
    font-size: 18px; /* Размер шрифта имени */
    font-weight: bold; /* Жирный шрифт */
}

.stats-right {
    display: flex; /* Flexbox для правой части */
    align-items: center; /* Вертикальное центрирование */
    gap: 5px; /* Расстояние между элементами */
}

.stats-right .coin {
    display: flex; /* Flexbox для монет */
    align-items: center; /* Вертикальное центрирование */
    gap: 5px; /* Расстояние между иконкой и числом */
}

.stats-right .coin img {
    width: 24px; /* Ширина иконки монеты */
    height: 24px; /* Высота иконки монеты */
}

.stats-right .coin span {
    font-size: 16px; /* Размер шрифта числа монет */
}

#player-stats,
#opponent-stats {
    background-color: #000000; /* Чёрный фон */
    padding: 7px; /* Внутренние отступы */
    width: 100%; /* Полная ширина */
    box-sizing: border-box; /* Учитываем padding в ширине */
    flex-direction: column; /* Вертикальное расположение */
}

#opponent-stats {
    position: fixed; /* Фиксируем внизу над меню */
    bottom: 70px; /* Отступ от низа равен высоте меню */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* Полная ширина */
    margin: 0; /* Без внешних отступов */
    border: 1px solid #333333; /* Граница */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование элементов */
    padding: 4px; /* Внутренние отступы */
    box-sizing: border-box; /* Учитываем padding */
    z-index: 98; /* Уровень слоя ниже меню */
}

.stats-row {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    gap: 2px;
    justify-content: flex-start;
    align-items: center;
}

.stat-group {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0; /* Предотвращаем сжатие групп */
}

.stat-group img {
    width: 24px; /* Ширина иконки характеристики */
    height: 24px; /* Высота иконки характеристики */
}

.stat-group .bar {
    width: 80px; /* Ширина полоски */
    height: 14px; /* Высота полоски */
    position: relative; /* Относительное позиционирование */
}

/* Числа характеристик */
.stat-value {
    display: inline-block;
    min-width: 30px; /* Фиксированная ширина для чисел (достаточно для 3-4 цифр) */
    text-align: left; /* Выравнивание вправо для стабильности */
    font-size: 14px;
    font-weight: bold;
}





/* Стили для кнопок управления бонусами */
.bonus-control {
    width: 20px; /* Ширина кнопки */
    height: 20px; /* Высота кнопки */
    background: linear-gradient(45deg, #0066cc, #3399ff);
    border: 1px solid #003366;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    min-width: 20px; /* Устанавливаем минимальную ширину */
    max-width: 20px; /* Фиксируем максимальную ширину */
    overflow: hidden; /* Скрываем переполнение */
}

/* Убираем правую границу у кнопки "+" перед кнопкой "-" */
.bonus-buttons .bonus-control:first-child {
    border-right: none; /* Убираем правую границу у первой кнопки (+) */
	margin-right: 0px; 
}

/* Убираем левую границу у кнопки "-" после кнопки "+" */
.bonus-buttons .bonus-control:last-child {
    border-left: none; /* Убираем левую границу у последней кнопки (-) */
    margin-left: 0px; 
}

.bonus-control:hover {
    background: linear-gradient(45deg, #0077e6, #4da8ff); /* Более светлый градиент при наведении */
}

.bonus-control:active {
    background: linear-gradient(45deg, #0055b3, #2e88e6); /* Более тёмный градиент при нажатии */
    transform: scale(0.95); /* Уменьшение при нажатии */
}

/* Стили для контейнера кнопок "+" и "-" */
.bonus-buttons {
    display: flex; /* Flexbox для кнопок */
    gap: 6px; /* Устанавливаем расстояние между кнопками 0px */
}

.bonus-btn {
    width: 21px; /* Ширина кнопки переключения режима */
    height: 21px; /* Высота кнопки */
    background: linear-gradient(45deg, #0066cc, #3399ff); /* Синий градиент */
    border: none; /* Без границы */
    border-radius: 5px; /* Скругленные углы */
    color: white; /* Белый текст */
    font-size: 14px; /* Размер шрифта */
    line-height: 21px; /* Высота строки для центрирования */
    text-align: center; /* Горизонтальное центрирование */
    cursor: pointer; /* Курсор указателя */
    transition: transform 0.2s; /* Плавный переход для масштаба */
    display: flex; /* Flexbox для центрирования */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
}

.bonus-btn:hover {
    transform: scale(1.05); /* Увеличение при наведении */
}

.bonus-btn:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
}

.bonus-btn.save {
    background: linear-gradient(45deg, #00cc00, #66ff66); /* Зелёный градиент для кнопки сохранения */
}

/* Стили для контейнера арены */
#arena {
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    width: 100%; /* Полная ширина */
    box-sizing: border-box; /* Учитываем padding в размерах */
    overflow-y: auto; /* Вертикальная прокрутка */
    overflow-x: hidden; /* Без горизонтальной прокрутки */
    scrollbar-width: none; /* Убираем полосу прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
}

#arena::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки (Webkit) */
}

#arena-content {
    display: flex; /* Flexbox для содержимого арены */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: flex-start; /* Выравнивание сверху */
    width: 100%; /* Полная ширина */
    height: auto; /* Автоматическая высота */
    margin-top: 10px; /* Отступ сверху */
    padding: 1px; /* Минимальные внутренние отступы */
    box-sizing: border-box; /* Учитываем padding */
    gap: 1px; /* Расстояние между элементами */
}

#arena-players-count {
    font-size: 18px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #e0e0e0; /* Светло-серый текст */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    padding: 10px 20px; /* Внутренние отступы */
    border-radius: 15px; /* Скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Тень */
    text-align: center; /* Центрирование текста */
    margin-bottom: 20px; /* Отступ снизу */
}

#start-battle-btn {
    padding: 12px 12px; /* Внутренние отступы */
    background: linear-gradient(45deg, #ff9500, #ffcc00); /* Оранжевый градиент */
    color: white; /* Белый текст */
    border: none; /* Без границы */
    border-radius: 25px; /* Скругленные углы */
    font-size: 18px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer; /* Курсор указателя */
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.5); /* Тень */
    transition: transform 0.2s, box-shadow 0.2s; /* Плавные переходы */
    margin-bottom: 2px; /* Отступ снизу */
}

#start-battle-btn:hover {
    transform: scale(1.05); /* Увеличение при наведении */
    box-shadow: 0 6px 16px rgba(255, 149, 0, 0.7); /* Увеличенная тень */
}

#start-battle-btn:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4); /* Уменьшенная тень */
}

.arena-logo {
    width: 70%; /* Ширина логотипа арены */
    height: auto; /* Автоматическая высота */
    object-fit: contain; /* Сохраняем пропорции */
    margin: 0; /* Без отступов */
    display: block; /* Блочный элемент */
}

#players-list {
    display: flex; /* Flexbox для списка игроков */
    flex-wrap: wrap; /* Перенос на новую строку */
    gap: 10px; /* Расстояние между элементами */
    justify-content: space-between; /* Распределяем по ширине */
    width: 100%; /* Полная ширина */
}

.arena-player {
    display: flex; /* Flexbox для игрока */
    align-items: center; /* Вертикальное центрирование */
    padding: 10px; /* Внутренние отступы */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    border-radius: 10px; /* Скругленные углы */
    margin: 5px; /* Внешние отступы */
    width: calc(100% - 10px); /* Ширина с учётом отступов */
    cursor: pointer; /* Курсор указателя */
}

.arena-player-avatar {
    width: 50px; /* Ширина аватара */
    height: 50px; /* Высота аватара */
    border-radius: 50%; /* Круглая форма */
    object-fit: cover; /* Обрезаем изображение */
    margin-right: 10px; /* Отступ справа */
}

.arena-player-info {
    flex: 1; /* Занимает всё доступное пространство */
}

.arena-player-header {
    display: flex; /* Flexbox для заголовка */
    align-items: center; /* Вертикальное центрирование */
    gap: 5px; /* Расстояние между элементами */
    margin-bottom: 5px; /* Отступ снизу */
}

.player-level {
    display: flex; /* Flexbox для уровня */
    align-items: center; /* Вертикальное центрирование */
    font-size: 8px; /* Размер шрифта */
}

.arena-player-stats {
    font-size: 6.67px; /* Размер шрифта характеристик */
}

.arena-player-stats .stats-row {
    gap: 5px; /* Расстояние между элементами строки */
}

.arena-player-stats .status-icon {
    width: 16px; /* Ширина иконки статуса */
    height: 16px; /* Высота иконки статуса */
}

.arena-player-stats .bar {
    width: 22px; /* Ширина полоски */
    height: 3.33px; /* Высота полоски */
}

/* Стили для контейнера боя */
#battle {
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    width: 100%; /* Полная ширина */
    height: 100vh; /* Полная высота экрана */
    overflow-y: auto; /* Вертикальная прокрутка */
    scrollbar-width: none; /* Убираем полосу прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
    padding-bottom: 240px; /* Отступ снизу для характеристик */
    box-sizing: border-box; /* Учитываем padding */
    background-color: #000000; /* Чёрный фон */
    position: relative; /* Относительное позиционирование */
}

#battle.visible-flex {
    display: flex !important; /* Принудительное отображение как flex */
}

#battle::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки (Webkit) */
}

#battle-items {
    position: fixed; /* Фиксируем блок предметов */
    top: 117px; /* Отступ сверху */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* Полная ширина */
    max-height: 60px; /* Максимальная высота */
    display: flex; /* Flexbox для предметов */
    overflow-x: auto; /* Горизонтальная прокрутка */
    gap: 10px; /* Расстояние между предметами */
    padding: 10px; /* Внутренние отступы */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    z-index: 99; /* Высокий уровень слоя */
    box-sizing: border-box; /* Учитываем padding */
    border: 1px solid #ff0000; /* Красная граница */
}

.battle-item {
    position: relative; /* Относительное позиционирование для счётчика */
    flex-shrink: 0; /* Предотвращаем сжатие */
}

.battle-item img {
    width: 40px; /* Ширина изображения предмета */
    height: 40px; /* Высота изображения предмета */
    border-radius: 10px; /* Скругленные углы */
}

.battle-item-count {
    position: absolute; /* Абсолютное позиционирование счётчика */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Прижимаем к левому краю */
    background-color: #ff9500; /* Оранжевый фон */
    color: white; /* Белый текст */
    border-radius: 50%; /* Круглая форма */
    width: 16px; /* Ширина счётчика */
    height: 16px; /* Высота счётчика */
    display: flex; /* Flexbox для центрирования */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    font-size: 10px; /* Размер шрифта */
}

#battle-area {
    display: flex; /* Flexbox для области боя */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    flex-grow: 1; /* Растягиваем область */
    width: 100%; /* Полная ширина */
    min-height: calc(100vh - 317px); /* Минимальная высота с учётом отступов */
    height: 100%; /* Полная высота контейнера */
    position: relative; /* Относительное позиционирование */
}

#battle-area #opponent-avatar {
    width: 300px; /* Ширина аватара противника */
    height: 300px; /* Высота аватара противника */
    border-radius: 50%; /* Круглая форма */
    cursor: pointer; /* Курсор указателя */
    object-fit: cover; /* Обрезаем изображение */
}

#damage-indicator {
    position: absolute; /* Абсолютное позиционирование индикатора урона */
    top: -20px; /* Отступ сверху */
    left: 50%; /* Центрируем по горизонтали */
    transform: translateX(-50%); /* Смещаем влево на половину ширины */
    color: #ff4d4d; /* Красный цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    opacity: 0; /* Начальная прозрачность */
    animation: damageFade 1s ease-out; /* Анимация исчезновения */
}

@keyframes damageFade {
    0% { opacity: 1; top: -20px; } /* Начальное состояние анимации */
    100% { opacity: 0; top: -50px; } /* Конечное состояние анимации */
}

.damage-popup {
    position: absolute; /* Абсолютное позиционирование всплывающего урона */
    color: red; /* Красный цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    pointer-events: none; /* Отключаем взаимодействие */
    animation: damageFade 1s ease-out; /* Анимация исчезновения */
    z-index: 1000; /* Высокий уровень слоя */
}

.damage-popup.critical {
    color: orange; /* Оранжевый цвет для критического урона */
    font-size: 24px; /* Увеличенный размер шрифта */
}

.damage-text {
    position: absolute; /* Абсолютное позиционирование текста урона */
    color: red; /* Красный цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    animation: damageAnimation 1s ease-out forwards; /* Анимация движения и исчезновения */
    z-index: 11; /* Уровень слоя выше полосок */
    pointer-events: none; /* Отключаем взаимодействие */
}

.damage-text.critical {
    color: orange; /* Оранжевый цвет для критического урона */
    font-size: 24px; /* Увеличенный размер шрифта */
}

@keyframes damageAnimation {
    0% { transform: translateX(-50%) translateY(0); opacity: 1; } /* Начальное состояние */
    100% { transform: translateX(-50%) translateY(-30px); opacity: 0; } /* Конечное состояние */
}

.click-text {
    position: absolute; /* Абсолютное позиционирование текста клика */
    color: orange; /* Оранжевый цвет текста */
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    animation: clickAnimation 0.5s ease-out forwards; /* Анимация клика */
    z-index: 11; /* Уровень слоя выше полосок */
    pointer-events: none; /* Отключаем взаимодействие */
}

@keyframes clickAnimation {
    0% { transform: translateX(-50%) scale(1); opacity: 1; } /* Начальное состояние */
    100% { transform: translateX(-50%) scale(1.5); opacity: 0; } /* Конечное состояние */
}

.player-stats, .opponent-stats {
    position: relative; /* Относительное позиционирование для текста урона */
    z-index: 10; /* Уровень слоя ниже текста урона */
}

/* Стили для кнопки обновления списка игроков на арене */
#refresh-arena {
    position: absolute; /* Абсолютное позиционирование */
    top: 70px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    padding: 5px 10px; /* Внутренние отступы */
    background-color: #333333; /* Серый фон */
    color: #e0e0e0; /* Светло-серый текст */
    border: 1px solid #444444; /* Граница */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Курсор указателя */
}

#refresh-arena:hover {
    background-color: #444444; /* Более светлый фон при наведении */
}

/* Стили для контейнера информации */
#info {
    width: 100%; /* Полная ширина */
    overflow-y: auto; /* Вертикальная прокрутка */
    scrollbar-width: none; /* Убираем полосу прокрутки (Firefox) */
    -ms-overflow-style: none; /* Убираем полосу прокрутки (IE/Edge) */
}

#info::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки (Webkit) */
}

#info-content {
    padding: 20px; /* Внутренние отступы */
    background-color: #222222; /* Тёмно-серый фон */
    border-radius: 5px; /* Скругленные углы */
    width: 100%; /* Полная ширина */
    box-sizing: border-box; /* Учитываем padding */
}

#info-content img {
    max-width: 100%; /* Максимальная ширина изображений */
    height: auto; /* Автоматическая высота */
    margin: 10px 0; /* Отступы сверху и снизу */
}

/* Полоски прогресса */
.bar {
    width: 80px; /* Фиксированная ширина вне режима редактирования */
    height: 14px;
    background-color: #444444;
    border: 1px solid #ffffff;
    border-radius: 6px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Устаревшие стили для заливки полосок (для совместимости) */
.bar-fill {
    height: 100%; /* Полная высота полоски */
    border-radius: 3px; /* Скругленные углы заливки */
    transition: width 0.3s ease; /* Плавное изменение ширины */
    position: relative; /* Относительное позиционирование */
}

.bar-fill::after {
    content: attr(data-value) "/" attr(data-max); /* Отображаем значение/максимум */
    position: absolute; /* Абсолютное позиционирование текста */
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Смещаем для точного центрирования */
    font-size: 10px; /* Размер шрифта текста */
    color: #ffffff; /* Белый цвет текста */
    text-shadow: 1px 1px 1px #000000; /* Тень текста для читаемости */
}

.bar-fill.health { background-color: #00cc00; } /* Зелёный цвет для здоровья */
.bar-fill.energy { background-color: #3399ff; } /* Синий цвет для энергии */
.bar-fill.health.low { background-color: #ff0000; } /* Красный для низкого здоровья */
.bar-fill.energy.low { background-color: #ff0000; } /* Красный для низкой энергии */
.bar-fill.health.medium { background-color: #ffff00; } /* Жёлтый для среднего здоровья */
.bar-fill.energy.medium { background-color: #ffff00; } /* Жёлтый для средней энергии */

/* Стили для полосок здоровья и энергии */
#player-health-bar,
#player-energy-bar,
#opponent-health-bar,
#opponent-energy-bar {
    width: 80px; /* Ширина полоски */
    height: 14px; /* Высота полоски */
    background-color: #444444; /* Серый фон пустой части */
    border: 1px solid #ffffff; /* Белая граница */
    border-radius: 6px; /* Скругленные углы */
    position: relative; /* Относительное позиционирование */
    overflow: hidden; /* Скрываем переполнение */
}

#player-health-bar::before,
#player-energy-bar::before,
#opponent-health-bar::before,
#opponent-energy-bar::before {
    content: ''; /* Пустой контент для заливки */
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Прижимаем к левому краю */
    height: 100%; /* Полная высота */
    width: var(--bar-width, 0%); /* Ширина из CSS-переменной */
    transition: width 0.5s ease; /* Плавное изменение ширины */
    background-color: var(--fill-color, #f44336); /* Цвет из CSS-переменной */
    z-index: 0; /* Уровень слоя ниже текста */
}

/* Значение внутри полоски */
.bar-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 10px;
    text-shadow: 1px 1px 2px black;
    z-index: 1;
    min-width: 30px; /* Фиксируем ширину текста внутри полоски */
    text-align: center;
}

/* Фиксация ширины полос в режиме редактирования бонусов */
#player-stats.bonus-mode #player-health-bar::before,
#player-stats.bonus-mode #player-energy-bar::before {
    width: 100%; /* Полосы всегда полные в режиме бонусов */
}

/* В режиме редактирования бонусов */
#player-stats.bonus-mode .bar {
    width: 50px; /* Уменьшенная фиксированная ширина в режиме редактирования */
}

/* Выравнивание в режиме редактирования бонусов */
#player-stats.bonus-mode .stats-row {
    justify-content: flex-start; /* Выравнивание по левому краю */
}

/* В режиме редактирования */
#player-stats.bonus-mode .stat-group {
    min-width: 70px; /* Фиксированная ширина для каждой группы в режиме бонусов */
}

/* Стили для экрана загрузки */
#loading-screen {
    position: fixed; /* Фиксируем на весь экран */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* Полная ширина */
    height: 100vh; /* Полная высота экрана */
    background-color: #000000; /* Чёрный фон */
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    z-index: 1000; /* Максимальный уровень слоя */
}

.loader {
    width: 50px; /* Ширина индикатора загрузки */
    height: 50px; /* Высота индикатора загрузки */
    border: 5px solid #1c1c1c; /* Тёмно-серая граница */
    border-top: 5px solid #ff9500; /* Оранжевая верхняя часть */
    border-radius: 50%; /* Круглая форма */
    animation: spin 1s linear infinite; /* Анимация вращения */
}

#loading-screen p {
    color: #e0e0e0; /* Светло-серый текст */
    margin-top: 20px; /* Отступ сверху */
    font-size: 18px; /* Размер шрифта */
}

@keyframes spin {
    0% { transform: rotate(0deg); } /* Начальное положение */
    100% { transform: rotate(360deg); } /* Полный поворот */
}

/* Стили для всплывающего окна ошибок */
#error-popup {
    position: fixed; /* Фиксируем на весь экран */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* Полная ширина */
    height: 100vh; /* Полная высота экрана */
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный чёрный фон */
    display: flex; /* Flexbox для содержимого */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    z-index: 1000; /* Высокий уровень слоя */
    transition: opacity 0.3s; /* Плавное изменение прозрачности */
}

.error-content {
    width: 90%; /* Ширина 90% от экрана */
    height: 50%; /* Высота 50% от экрана */
    background-color: #222222; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    padding: 20px; /* Внутренние отступы */
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: space-between; /* Равномерное распределение */
}

.error-icon {
    margin-bottom: 20px; /* Отступ снизу */
}

#error-message {
    text-align: center; /* Центрирование текста */
    font-size: 16px; /* Размер шрифта */
    color: #e0e0e0; /* Светло-серый цвет текста */
}

.error-ok {
    padding: 10px 20px; /* Внутренние отступы */
    background: linear-gradient(45deg, #ff9500, #ffcc00); /* Оранжевый градиент */
    color: white; /* Белый текст */
    border: none; /* Без границы */
    border-radius: 20px; /* Скругленные углы */
    cursor: pointer; /* Курсор указателя */
    font-size: 16px; /* Размер шрифта */
}

/* Стили для окна результата боя */
.battle-result {
    position: fixed; /* Фиксируем в центре экрана */
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Смещаем для точного центрирования */
    width: 90%; /* Ширина 90% от экрана */
    background-color: #222222; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    padding: 20px; /* Внутренние отступы */
    z-index: 1000; /* Высокий уровень слоя */
    color: #e0e0e0; /* Светло-серый текст */
    text-align: center; /* Центрирование текста */
}

.battle-result h2 {
    margin-bottom: 10px; /* Отступ снизу заголовка */
}

.result-ok {
    padding: 10px 20px; /* Внутренние отступы */
    background: linear-gradient(45deg, #ff9500, #ffcc00); /* Оранжевый градиент */
    color: white; /* Белый текст */
    border: none; /* Без границы */
    border-radius: 20px; /* Скругленные углы */
    cursor: pointer; /* Курсор указателя */
    margin-top: 20px; /* Отступ сверху */
}

/* Стили для недостающего уровня игрока в требованиях */
.requirement-item.missing.player-level svg text {
    fill: #ffb3bf !important; /* Розовый цвет текста для SVG */
    background: white; /* Белый фон (но он не отображается в SVG без дополнительных настроек) */
}


@media only screen and (max-width: 768px) {
    .bonus-control {
        width: 20px !important; /* Принудительно фиксируем ширину */
        min-width: 20px !important;
        max-width: 20px !important;
        font-size: 14px; /* Оставляем шрифт неизменным */
        padding: 0 !important; /* Убираем возможные отступы */
    }
}



@media only screen and (max-width: 360px) {
    /* Уменьшаем размеры элементов */
    .stat-group {
        gap: 2px; /* Уменьшаем расстояние между элементами */
        margin-right: 5px; /* Уменьшаем отступ справа */
    }

    .stat-value {
        min-width: 30px; /* Уменьшаем ширину чисел */
        font-size: 12px; /* Уменьшаем шрифт */
    }

    .bar {
        width: 50px; /* Уменьшаем полоски вне режима */
    }

    #player-stats.bonus-mode .bar {
        width: 40px; /* Уменьшаем полоски в режиме бонусов */
    }

    .bonus-control {
        width: 18px; /* Уменьшаем кнопки */
        height: 18px;
        font-size: 12px;
        line-height: 16px;
    }

    .bonus-btn {
        width: 20px; /* Уменьшаем кнопку +/- */
        height: 20px;
        font-size: 12px;
        line-height: 20px;
    }

    /* Уменьшаем шрифт внутри полосок */
    .bar-value {
        font-size: 8px;
        min-width: 20px;
    }
}