/* Глобальные стили */
* {
    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 должен идти ПОСЛЕ .visible-* потому что при одинаковой специфичности
   побеждает та !important-правила что определена позже в CSS. Иначе если на элементе
   есть оба класса (.visible-flex + .hidden) - победит visible-flex и элемент будет виден.
   Это вылезало багом в КБ-ожидании: arena-content имел visible-flex, добавление hidden
   не скрывало его - кнопки арены и логотип оставались видимы под "Ожидайте партнёра". */
.visible-flex {
    display: flex !important; /* Показываем элемент как flex-контейнер с приоритетом */
}

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

.hidden {
    display: none !important; /* Скрываем элемент полностью с приоритетом - перебивает visible-* выше */
}

/* ============================================================================
   БЛОК "Ожидание партнёра в КБ" - подмена #opponent-stats
   ----------------------------------------------------------------------------
   Показывается когда игрок в waiting-режиме клан-боя (clan_battle_waiting).
   Вместо стат-блока соперника (которого ещё нет) - инфа о вражеском клане:
   лого, имя, счётчик "alive_my vs alive_enemy". Управляется JS:
   renderClanBattleWaitingInfo / hideClanBattleWaiting (см. app.js).

   РАЗМЕРЫ И ПОЗИЦИЯ: точно как у #opponent-stats - полная ширина внизу
   экрана, фиксированный bottom (над меню), тот же фон и рамка. Контент
   внутри центрирован. Так визуально не возникает "прыжка" макета между
   waiting и активной парой - обе панели одного размера и положения.
   ============================================================================ */
.cb-waiting-info {
    /* Те же fixed-параметры что у #opponent-stats - блок прикрыт к нижней
       части экрана (над меню), полная ширина. */
    position: fixed;
    bottom: 70px;
    left: 0;
    width: 100%;
    margin: 0;
    border: 1px solid #333333;
    background-color: #2a2a2a;
    /* Контент центрируем по горизонтали и вертикали внутри панели. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    box-sizing: border-box;
    z-index: 98;
    color: #ffcc00;
    text-align: center;
}
.cb-waiting-info-title {
    font-size: 12px;
    color: #b0c0e0;
    margin-bottom: 4px;
}
.cb-waiting-clan-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}
.cb-waiting-clan-row:active { transform: scale(0.98); }
.cb-waiting-clan-logo,
.cb-waiting-clan-logo-empty {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #1a1a1a;
    border: 1px solid #444;
}
.cb-waiting-clan-name {
    color: #ffcc00; /* тот же что в .cb-top-name / других "имя клана" блоках */
}
.cb-waiting-counters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ddd;
}
.cb-waiting-cnt {
    font-weight: bold;
    font-size: 15px;
    min-width: 22px;
    text-align: center;
}
.cb-waiting-cnt-my    { color: #4caf50; } /* зелёный для своих */
.cb-waiting-cnt-enemy { color: #f44336; } /* красный для врага */
.cb-waiting-cnt-vs    { color: #888; font-size: 11px; }

/* Стили для основного контента страницы */
#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; /* Плавные переходы для цвета и масштаба */
}

/* Стили для иконок внутри кнопок меню.
   Оригинальные SVG-иконки меню (farm, inventory, arena, market, info) - монохромные
   с зашитым чёрным fill. Чтобы получить серый цвет для неактивного состояния и оранжевый
   для активного, используется CSS filter (работает и с <img>, и с inline <svg>).
   Так сохраняется визуал, который был у проекта до перехода на SVG-спрайт. */
#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) */
}

/* Стили для блока ресурсов.
   --rs (resource scale) - единый коэффициент пропорционального масштабирования
   ВСЕХ размеров внутри блока (иконки, текст, gaps). На узких экранах его значение
   уменьшается через media queries в конце файла - и иконки, и числа, и расстояния
   уменьшаются вместе с одинаковыми пропорциями. */
#resources-box {
    --rs: 1; /* Базовое значение - 100%. На мобильных уменьшается через media queries */
    display: flex; /* Flexbox для ресурсов */
    justify-content: center; /* Центрируем элементы */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    padding: calc(5px * var(--rs)); /* Внутренние отступы (масштабируются) */
    margin-bottom: 8px; /* Отступ снизу */
    width: 100%; /* Полная ширина */
    gap: calc(17px * var(--rs)); /* Расстояние между элементами (масштабируется) */
}

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

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

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


/* Перебиваем .resource-item span (специфичность 0.1.1) - оба селектора имеют 0.2.0,
   так что #ffb84d побеждает над #e0e0e0. Без этого числа выглядели белыми. */
.resource-item .resource-rate,
.regen-row .resource-rate {
    font-size: calc(12px * var(--rs)); /* Масштабируется вместе с блоком ресурсов */
    color: #ffb84d;
    line-height: 1.1;
    margin-top: calc(2px * var(--rs));
    text-align: center;
    white-space: nowrap;
}

/* Блок регенерации H/E слева от ресурсов: две строки (energy сверху, health снизу). */
#regen-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(4px * var(--rs));
}

.regen-row {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--rs));
}

.regen-icon {
    width: calc(20px * var(--rs));
    height: calc(20px * var(--rs));
    display: block;
}

/* Большой пробел-разделитель между блоком регенерации и ресурсами. */
.regen-spacer {
    width: calc(8px * var(--rs));
    flex-shrink: 0;
}



/* Специфичные стили для лимита хранения */
#storage-limit {
    font-size: calc(14px * var(--rs)); /* Размер шрифта числа масштабируемый */
    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; /* Скругленные углы */
    /* Игра mobile-first, поэтому компактные отступы карточек применяются НА ВСЕХ экранах,
       а не только в @media (max-width: 420px). Раньше отдельный медиа-блок дублировал
       эти значения - теперь они здесь. */
    padding: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Тень для объёма */
    color: #ffffff; /* Белый текст */
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    justify-content: flex-start; /* Контент прижат к верху: картинка → заголовок → требования → бонусы → время → кнопка идут друг за другом без растяжения. Раньше тут было space-between, и при короткой карточке (мало требований) кнопка и таймер уезжали далеко вниз. */
    align-self: flex-start; /* Не растягиваем карточку под высоту самой высокой в ряду. Каждая карточка - своей естественной высоты, без пустого места внизу. */
    box-sizing: border-box; /* Учитываем padding в размерах */
    min-width: 0 !important; /* Предотвращаем сжатие меньше 0 */
    max-width: none !important; /* Отключаем ограничение максимальной ширины */
}

.card .card-icon-wrap {
    /* Обёртка над .card-icon - нужна как position:relative якорь для
       .count-badge (бейдж количества в стопке). Сама обёртка занимает ту же
       площадь что и иконка - никаких визуальных отступов не добавляет. */
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 0;
}
.card .card-icon-wrap .card-icon {
    height: 100%;
}

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

.card .card-title {
    font-size: 18px; /* Размер шрифта заголовка */
    font-weight: bold; /* Жирный шрифт */
    text-align: center; /* Центрирование текста */
    margin-top: 3px;    /* гасим браузерный margin-top у <h2> (~15px) */
    margin-bottom: 3px; /* было 10px */
}

/* ============================================================================
   ТРЕБОВАНИЯ КАРТОЧКИ - после рефакторинга разделены на ДВА суб-блока:
     .card-req-resources - ресурсы и уровень игрока, в РЯД (компактно).
     .card-req-items     - другие вещи как требования, в СТОЛБЕЦ (каждая - кликабельная
                           строка с маленькой картинкой "_s", названием и нужным уровнем,
                           по тапу - попап с увеличенной картинкой).
   Сам .card-requirements теперь flex-column, который их собирает.
   ============================================================================ */
.card-requirements {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 3px;  /* было 10px */
    font-size: 10.67px;
    padding-bottom: 3px; /* было 8px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Ресурсы + уровень игрока - в ряд, как было раньше у .card-requirements */
.card-req-resources {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Другие вещи - в столбец под линией-разделителем */
.card-req-items {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Расстояние между строками-требованиями */
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Одна строка-требование: иконка вещи слева, текст справа. Целая строка кликабельна. */
.card-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.card-req-item:hover,
.card-req-item:active {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Маленькая картинка "_s" вещи слева в строке требования */
.card-req-item-img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Заглушка для требуемой вещи: используется когда у игрока нет данных по этой вещи
   (нет в кэше playerData.cards) или картинка _s ещё не сгенерирована.
   Серый квадрат с "?" - визуально явно отличается от настоящих картинок. */
.card-req-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

/* Текстовая часть строки требования: имя и круглый значок уровня (svgLevel) в один ряд */
.card-req-item-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}
.card-req-item-name {
    font-weight: bold;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* чтобы ellipsis работал в flex-row */
}
/* SVG-значок уровня (svgLevel) рядом с именем - не сжимаем */
.card-req-item-text .level-svg {
    flex-shrink: 0;
}

/* Подсветка для нехватающего уровня требуемой вещи:
   - Имя вещи - красным (#ff0000), как и для нехватающих ресурсов в карточке.
   - Число внутри SVG-кружочка уровня - тот же приглушённый розовый (#ffb3bf),
     что и в .requirement-item.missing.player-level (см. ниже в файле) - так
     значки уровня и у игрока, и у требуемой вещи красятся одинаково. */
.card-req-item.missing .card-req-item-name {
    color: #ff0000;
}
.card-req-item.missing svg.level-svg text {
    fill: #ffb3bf;
}

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

.card-req-resources .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 (flex-column) > N × .bonus-row (flex-wrap с .bonus-item внутри).
   - Между .bonus-row отступы УПРАВЛЯЮТСЯ парой "padding-top + border-top" у каждой
     последующей .bonus-row (как у .card-requirements → .card-bonuses) - даёт ОДИНАКОВЫЕ
     отступы между группами и между секциями. Раньше использовались flat-дети с
     .bonus-separator + negative margin, но row-gap родителя в разных браузерах
     обрабатывал negative margin неконсистентно - визуальные отступы между группами
     отличались от отступов между секциями (требования/бонусы/время). Сейчас всё через
     обычный border-top + padding-top, без negative margin. */
.card-bonuses {
    display: flex;
    flex-direction: column;
    gap: 0; /* отступы делает border-top + padding-top у второй и последующих .bonus-row */
    margin-bottom: 3px;
    font-size: 10.67px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Группа бонусов: flex-wrap, иконки переносятся при нехватке ширины. */
.card-bonuses .bonus-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* Все .bonus-row, кроме первой - получают линию-разделитель сверху + отступ.
   Те же значения что у .card-requirements (padding-bottom: 3 + border: 1 + margin-bottom: 3 =
   7px между секциями) - 7px и здесь между группами. Визуально одинаково. */
.card-bonuses .bonus-row + .bonus-row {
    padding-top: 3px;
    margin-top: 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.card-bonuses .bonus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Вертикальная чёрточка справа между соседними .bonus-item ВНУТРИ одной .bonus-row.
   Селектор работает только если .bonus-item не последний В СВОЁМ РОДИТЕЛЕ (.bonus-row),
   что естественным образом не показывает чёрточку у последнего элемента группы. */
.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-flag-badge - бейдж-флаг "Используется в бою" / "Артефакт" НА КАРТИНКЕ вещи.
   ----------------------------------------------------------------------------
   Раньше эти флаги шли отдельной строкой в .card-bonuses снизу. Теперь они
   крепятся прямо к .card-icon-wrap как полупрозрачные круглые бейджи в углах
   картинки - не занимают места под текстом, виднее с первого взгляда.

   Позиционирование:
     - "В бою" (мечи) - top-right угла картинки (.card-flag-battle)
     - "Артефакт" (звезда) - bottom-right угла картинки (.card-flag-art)
     - Отступы 4px от краёв (как у .count-badge--md), чтобы не сливаться с
       count-badge слева сверху.

   Дизайн подложки: чёрный полупрозрачный круг с тонкой светлой обводкой и
   мягкой тенью - универсально читается на любой картинке вещи. Иконка внутри
   на ~80% размера круга (с padding для воздуха).
   ============================================================================ */
.card-flag-badge {
    position: absolute;
    /* Размер бейджа 39px (= 58/1.5, уменьшено от исходного 58 в 1.5 раза вместе
       с иконкой внутри). */
    width: 39px;
    height: 39px;
    border-radius: 50%;
    /* overflow: hidden - страховка от выхода иконки за круглую форму. Квадратная
       иконка не помещается в круг по диагонали (углы выпирают), особенно у swords
       где кончики мечей идут к углам и у artifact где маленькие искры разбросаны
       по углам. Обрезка по border-radius предотвращает "выпирание" даже если
       размер иконки рассчитан с запасом. */
    overflow: hidden;
    /* Подложка плотнее (0.55 → 0.78) - меньше "просвечивает" пёстрый фон
       картинки, иконка контрастнее. */
    background: rgba(0, 0, 0, 0.78);
    /* Цветная рамка задаётся в подклассе .card-flag-battle / .card-flag-art -
       сразу читается тип вещи по цвету ободка периферийным зрением. */
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Сильная многослойная тень: внутренний светлый rim для отделения от фона,
       внешний тёмный для глубины, цветной glow задаётся в подклассе. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 2;
}
/* "В бою" - вверху справа. Красный обод и красный glow подчёркивают
   "боевой" характер (как кровь/опасность). */
.card-flag-battle {
    top: 4px;
    right: 4px;
    border-color: #d44545;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(212, 69, 69, 0.55);
}
/* "Артефакт" - внизу справа. Золотой обод и тёплый glow - "сокровище". */
.card-flag-art {
    bottom: 4px;
    right: 4px;
    background: rgba(40, 25, 0, 0.82);
    border-color: #ffcc00;
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 100, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(255, 204, 0, 0.55);
}
/* Иконка внутри. Размер 27px (= 40/1.5) в 39px бейдже - то же соотношение что
   было у 40/58. Пропорция икона/бейдж ~69%, ~3px воздуха до линии круга со
   всех сторон. */
.card-flag-badge .card-flag-icon {
    width: 27px;
    height: 27px;
    display: block;
    opacity: 1;
    /* Лёгкий drop-shadow на самой иконке - выделяет силуэт меча/самоцвета
       от тёмной подложки. Без размывания, просто 1px смещения тени. */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.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; /* Жирный шрифт для доступных значений */
    line-height: 1; /* плотно обжимает текст, выравнивая верх/низ глифа с иконкой */
}

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

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

/* Красный стиль для bonus_upgrade_time_percent в карточках, когда суммарный потолок 90% достигнут.
   Тот же визуал, что у нехватающих ресурсов в .card-requirements .missing.
   Добавлено для .card-bonuses (карточка вещи) и .regen-row (третья строка в #regen-box). */
.card-bonuses .missing,
.card-bonuses .missing span,
.regen-row .missing {
    color: #ff0000;
    font-weight: bold;
}

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

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

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

.card-level-icon {
    width: 28px;  /* было 40px - компактнее */
    height: 28px;
    display: inline-block; /* Встраиваем в строку */
    vertical-align: middle; /* Выравнивание по вертикали */
}
/* svgLevel(item.level, 40) рендерит <svg width="40" height="40"> инлайн-атрибутами -
   CSS их перебивает, и значок уровня сжимается вместе с обёрткой. */
.card-level-icon svg {
    width: 100%;
    height: 100%;
}

.card-action {
    width: 90%; /* Ширина кнопки действия */
    padding: 4px; /* было 6px */
    border-radius: 20px; /* Скругленные углы */
    border: none; /* Без границы */
    font-size: 13px; /* было 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,
.stats-right .coin svg.status-icon {
    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; /* Уровень слоя ниже меню */
}








/* Кнопки +/- управления бонусами */
.bonus-control {
	width: 22px;
	height: 22px;
	background: linear-gradient(45deg, #0066cc, #3399ff);
	border: 1px solid #003366;
	border-radius: 5px;
	color: #ffffff;
	font-size: clamp(11px, 3.2vw, 14px);
	line-height: 18px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-width: 22px;
	max-width: 22px;
	overflow: hidden;
	flex-shrink: 0;
}

.bonus-control:hover {
	background: linear-gradient(45deg, #0077e6, #4da8ff);
}

.bonus-control:active {
	background: linear-gradient(45deg, #0055b3, #2e88e6);
	transform: scale(0.95);
}

/* Кнопка +/- переключения режима распределения бонусов */
.bonus-btn {
	width: 21px;
	height: 21px;
	background: linear-gradient(45deg, #0066cc, #3399ff);
	border: none;
	border-radius: 5px;
	color: white;
	font-size: clamp(11px, 3.2vw, 14px);
	line-height: 21px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bonus-btn:hover {
	transform: scale(1.05);
}

.bonus-btn:active {
	transform: scale(0.95);
}

.bonus-btn.save {
	background: linear-gradient(45deg, #00cc00, #66ff66);
}







/* ============================================================================
   Блок характеристик (#player-stats) — табличная раскладка
   Таблица автоматически выравнивает колонки по самому широкому содержимому.
   Работает идеально при любом количестве цифр (1-9999+).
   ============================================================================ */




#stats-table {
    border-spacing: 4px 4px;
    border-collapse: separate;
    width: 100% !important;
    table-layout: auto;
    margin: 0 auto;
}

/* Ячейка иконки */
.tc-icon {
    padding: 0 0px 0 0px;
    width: 22px;
    min-width: 22px;
    vertical-align: middle;
    text-align: center;
}

.tc-icon .status-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.tc-icon img, .tc-icon button {
    width: 22px;
    height: 22px;
}

/* Ячейка полоски (bar) */
.tc-bar {
    padding: 0 0px;
    width: 112px;
    min-width: 110px;
    vertical-align: middle;
}

.tc-bar .bar {
    width: 110px;
    max-width: 110px;
    height: 18px;
}

/* Ячейка числового значения — text-align: right чтобы числа прижимались к кнопкам [+] */
.tc-val {
    padding: 0 2px 0 0px;           /* левый отступ чуть больше для красоты */
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: bold;
    color: #e0e0e0;

    width: 1%;                      /* важно */
    min-width: 0;                   /* разрешает сжиматься */
    max-width: 999px;               /* защита от слишком большого растяжения */
}

/* .stat-value внутри .tc-val (вставляется JS) */
.tc-val .stat-value {
	font-size: inherit;
	font-weight: inherit;
}

/* Ячейка кнопок [+][-] */
.tc-btn {
    padding: 0 2px 0 1px;           /* очень маленький отступ слева */
    white-space: nowrap;
    vertical-align: middle;
    width: auto;
    min-width: 0;
}

/* Зазор между группами — увеличенный */
.tc-gap {
    width: 12px;                    /* можно чуть увеличить/уменьшить */
    min-width: 12px;
    padding: 0;
}

/* В режиме бонусов bar сужается чтобы дать место кнопкам.
   padding:0 - без горизонтального padding'а: бар прижат к левому краю
   ячейки = такое же расстояние от иконки до бара, как и в обычном режиме
   (только 4px от border-spacing таблицы). Раньше тут был padding:0 3px,
   из-за чего бар "уезжал" вправо от иконки в bonus-mode. */
#player-stats.bonus-mode .tc-bar {
    width: 54px;
    min-width: 54px;
    padding: 0;
}

/* Дополнительно: заставляем таблицу плотнее сжиматься */
#player-stats .tc-bar,
#player-stats .tc-val,
#player-stats .tc-btn {
    box-sizing: border-box;
}

#player-stats.bonus-mode .tc-bar .bar {
    width: 100%;
}


#player-stats td {
    box-sizing: border-box;
}

#player-stats .tc-bar .bar {
    width: 100% !important;
}


/* ============================================================================
   Адаптация для узких экранов (320-360px)
   ============================================================================ */
@media only screen and (max-width: 360px) {
	#stats-table {
		border-spacing: 1px 4px;
	}
	.tc-icon .status-icon {
		width: 18px;
		height: 18px;
	}
	.tc-bar .bar {
		width: 50px;
	}
	.tc-gap {
		width: 3px;
	}
	.bonus-control {
		width: 18px;
		height: 18px;
		min-width: 18px;
		max-width: 18px;
		font-size: 11px;
		line-height: 18px;
	}
	.bonus-btn {
		width: 18px;
		height: 18px;
		font-size: 11px;
		line-height: 18px;
	}
	.bar-value {
		font-size: 8px;
	}
	#player-stats.bonus-mode .tc-bar .bar {
		width: 50px;
	}
	
	/* Дополнительная стабилизация высоты строк в bonus-mode */
    #player-stats.bonus-mode #stats-table tr {
        height: 18px;                    /* фиксируем высоту строки */
        line-height: 1;
    }
}





/* Таблица характеристик противника — идентична по ячейкам #stats-table */
.opponent-stats-table {
	border-spacing: 4px 4px;
	border-collapse: separate;
	width: max-content; /* Ширина строго по контенту, не растягивается */
	max-width: 100%;
	align-self: flex-start; /* Прижатие влево внутри flex-контейнера #opponent-stats */
	margin-left: 0;
}




/* Стили для контейнера арены */
#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-block {
    background-color: #2a2a2a;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 6px 20px;
    margin-bottom: 7px;
    text-align: center;
}
#arena-players-count {
    font-size: 14px; /* было 18 - уменьшили на 2 кегля как раз 14 */
    font-weight: bold;
    color: #e0e0e0;
    /* фон/тень/отступы вынесены в #arena-players-count-block, чтобы две строки
       читались как один блок с двумя строчками */
    text-align: center;
}

#start-battle-btn {
    padding: 8px 12px; /* было 12 12 - чуть уже по высоте */
    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;
}

/* Блок "Ваши достижения" под логотипом арены - компактнее */
#arena-stats {
    margin-top: 5px; /* было 14 - в 3 раза меньше (от логотипа до достижений) */
    width: 100%;
    max-width: 320px;
    padding: 5px 14px; /* было 10 14 - сверху/снизу в 2 раза меньше */
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-align: center;
}

#arena-stats-title {
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 3px; /* было 6 - в 2 раза меньше (между строками внутри блока) */
}

#arena-stats-row {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.arena-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #e0e0e0;
}

.arena-stat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Единые цвета побед/поражений во всей игре (арена, турнир, кланы, инфо-блоки).
   Применяются к span'у с иконкой и числом - и иконка (через currentColor в SVG),
   и текст получают один цвет. Раньше были разные дубли (.arena-stat-win,
   .clan-wl-win, .cb-top-win) - объединено в один источник правды. */
.wl-win  { color: #ffcc00; }
.wl-loss { color: #cccccc; }

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

/* Стили для контейнера боя */
/* Высота определяется содержимым (#battle-area со своим min-height: calc(100vh - 317px)) */
/* плюс небольшой padding-bottom — оставляет лёгкий скролл и маленькую пустоту под аватаркой. */
/* Раньше был height:100vh + padding-bottom:240px — это создавало лишнюю прокрутку ~177px */
/* и под аватаркой открывалось пустое пространство на половину экрана. */
/* #opponent-stats имеет position:fixed и в потоке #battle место не занимает, */
/* padding нужен только для регулировки высоты #battle относительно видимой зоны. */
#battle {
    display: flex; /* Flexbox для содержимого */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    width: 100%; /* Полная ширина */
    padding-bottom: 120px; /* Небольшой запас: лёгкий скролл (~20px) и маленький зазор аватарки до блока противника */
    box-sizing: border-box; /* Учитываем padding */
    background-color: #000000; /* Чёрный фон */
    position: relative; /* Относительное позиционирование (на случай абсолютных потомков) */
}

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

/* Когда блок предметов боя виден (нет класса .hidden), сдвигаем содержимое #battle-area вниз, */
/* чтобы аватарка не оказывалась под фиксированным #battle-items сверху. */
/* Сосед "+ #battle-area" — battle-area идёт сразу за battle-items в HTML. */
/* 85px = max-height битл-айтемс (60px) + увеличенный зазор 25px между плашкой и аватаркой */
/* (раньше зазор был 10px - аватарка слипалась к плашке). */
#battle-items:not(.hidden) + #battle-area {
    padding-top: 85px;
}

#battle-items {
    position: fixed; /* Фиксируем блок предметов */
    top: 117px; /* Отступ сверху */
    left: 1; /* Прижимаем к левому краю */
    width: 99%; /* Полная ширина */
    max-height: 60px; /* Максимальная высота */
    display: flex; /* Flexbox для предметов */
    overflow-x: auto; /* Горизонтальная прокрутка */
    overflow-y: hidden; /* Вертикальная прокрутка не нужна */
    /* Плавный momentum-scroll на iOS WebKit (Telegram iOS WKWebView) - без
       этого свайп на iPhone дёргается, особенно когда вещей много. */
    -webkit-overflow-scrolling: touch;
    /* Защита от случайного перехвата свайпа жестом закрытия WebApp в Telegram -
       когда игрок свайпает по краю иконок горизонтально, мы не даём системе
       трактовать это как "закрыть WebApp" / "назад". */
    overscroll-behavior-x: contain;
    /* Скрываем системный scrollbar - в мобильном WebView его всё равно нет,
       а на десктопе он занимает 15px высоты, и иконки 40px ужимались бы. */
    scrollbar-width: none; /* Firefox */
    gap: 10px; /* Расстояние между предметами */
    padding: 10px; /* Внутренние отступы */
    background-color: #2a2a2a; /* Тёмно-серый фон */
    border-radius: 15px; /* Скругленные углы */
    z-index: 99; /* Высокий уровень слоя */
    box-sizing: border-box; /* Учитываем padding */
    border: 1px solid #ff0000; /* Красная граница */
    /* Курсор-"схватить" - сигнал десктоп-пользователю что блок можно тянуть мышью. */
    cursor: grab;
}
#battle-items::-webkit-scrollbar { display: none; } /* WebKit */
#battle-items.dragging { cursor: grabbing; }
#battle-items.dragging .battle-item { pointer-events: none; }

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

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

/* Плашка уровня вещи в правом нижнем углу картинки в боевом блоке.
   Тот же svgLevel что в инвентаре, только мельче. Указывает: вещь данного
   уровня даёт такие-то бонусы при активации (уровень = сила эффекта). */
.battle-item-level {
    position: absolute;
    right: -2px;
    bottom: -2px;
    pointer-events: none;
    line-height: 0; /* убрать inline-spacing у svg */
}

/* ============================================================================
   .count-badge - универсальный оранжевый бейдж с числом на иконке вещи.
   ----------------------------------------------------------------------------
   Используется ВЕЗДЕ где нужно показать количество одинаковых вещей у игрока:
     * .battle-item (блок вещей для боя на арене) - размер --lg
     * .card-icon в инвентаре "Мои вещи" (ферма/рюкзак) - размер --md
     * (позже в маркете) - размер --sm
   Бейдж сам растёт по ширине под число (1-знач=круг, 2-4=pill). Контейнер,
   к которому крепится бейдж, должен иметь position:relative.
   ============================================================================ */
.count-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: #ff9500;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    border-radius: 9999px; /* pill - под 2+ цифр растёт в овал */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* min-width = height чтобы 1-знач. число было кругом */
}
/* Размер --lg: блок вещей для боя на арене (на иконке 40x40). */
.count-badge--lg {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    padding: 0 5px;
}
/* Размер --md: инвентарь "Мои вещи" (на card-icon, который крупнее).
   pointer-events: auto - перекрываем родительский .count-badge { pointer-events: none }
   чтобы по тапу на бейдже работал делегат initIconTooltips и показывал тост
   "Количество в стопке". У .count-badge--lg (боевой блок арены) клик должен
   проходить НАСКВОЗЬ к родителю .battle-item (использование вещи), поэтому
   там pointer-events: none остаётся. */
.count-badge--md {
    min-width: 22px;
    height: 22px;
    font-size: 13px;
    padding: 0 6px;
    top: 4px;
    left: 4px;
    pointer-events: auto;
    cursor: help;
}
/* Размер --sm: для будущего маркета. Сейчас не используется, оставлен
   как контракт чтобы потом не плодить стили. */
.count-badge--sm {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    padding: 0 4px;
}

#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-items:not(.hidden) + #battle-area" (85px). */
    padding-top: 20px;
}

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

/* Обёртка аватарки противника — нужна для наложения прицела и подписи поверх */
#opponent-avatar-wrap {
    position: relative; /* Точка отсчёта для абсолютного позиционирования прицела */
    width: 300px; /* Ширина равна аватарке */
    height: 300px; /* Высота равна аватарке */
}

/* SVG-прицел поверх аватарки. Двойные линии: тёмный контур + светлая центральная линия. */
/* Так читается и на тёмных, и на светлых аватарках. pointer-events:none — клик уходит в img. */
#opponent-crosshair {
    position: absolute; /* Накладываем поверх аватарки */
    top: 0; /* Прижимаем к верху обёртки */
    left: 0; /* Прижимаем к левому краю обёртки */
    width: 100%; /* На всю ширину аватарки */
    height: 100%; /* На всю высоту аватарки */
    pointer-events: none; /* Прозрачен для кликов — клик идёт в аватарку */
    border-radius: 50%; /* Скругление под форму аватарки */
}

/* Подпись "click for fight" в центре прицела. Снимается классом .hidden после первого удара. */
#opponent-crosshair-label {
    position: absolute; /* Абсолютное позиционирование над аватаркой */
    top: 50%; /* Центр по вертикали */
    left: 50%; /* Центр по горизонтали */
    transform: translate(-50%, -50%); /* Точное центрирование */
    color: rgba(255, 255, 255, 0.85); /* Белый полупрозрачный */
    font-size: 16px; /* Размер шрифта подписи */
    font-weight: bold; /* Жирный шрифт */
    letter-spacing: 1px; /* Чуть разрежённые буквы */
    text-transform: uppercase; /* Капс — читается строже */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9); /* Тень для читаемости на светлом фоне */
    pointer-events: none; /* Не мешает клику по аватарке */
    white-space: nowrap; /* В одну строку */
    user-select: none; /* Не выделяется */
}

.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; } /* Конечное состояние */
}

/* Звезда-всплеск (burst) при клике по аватару противника в бою */
.click-burst {
    position: absolute;
    z-index: 11;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: burstAnimation 0.6s ease-out forwards;
}

@keyframes burstAnimation {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Стили для контейнера информации */
#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; /* Отступы сверху и снизу */
}

/* Вкладки в разделе "Информация" */
#info-tabs {
    /* flex-wrap: разрешаем перенос табов на следующую строку, если их слишком много
       для одной строки на узких экранах (5 табов: Новости/Энциклопедия/Об игре/Бонусы/Кланы). */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background-color: #1a1a1a;
    border-radius: 5px 5px 0 0;
}

.info-tab {
    /* flex-basis + min-width: каждая кнопка не уже 100px - чтобы самое длинное слово
       ("Энциклопедия") точно вписалось без обрезки и не вылезало за рамки кнопки.
       Когда 5 кнопок * 100px + gap'ы > ширины экрана, flex-wrap переносит их на
       следующую строку (раньше начинал переносить при 80px, и в одну строку
       пытались уместиться 5 - текст выходил за рамку).
       Горизонтальный padding сокращён с 6px до 3px - симметрично слева/справа,
       чтобы текст имел больше места внутри кнопки. */
    flex: 1 1 100px;
    min-width: 100px;
    padding: 8px 3px;
    background-color: #2a2a2a;
    color: #cccccc;
    border: 1px solid #444444;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    /* Чтобы текст не обрезался сбоку при ограничении контейнера, разрешаем
       выйти на 2 строки в крайнем случае (но обычно min-width не даст). */
    white-space: normal;
    word-break: keep-all;
}

.info-tab.active {
    background-color: #4a6a4a;
    color: #ffffff;
    border-color: #5a8a5a;
}

/* Блок контента в разделе "Информация" */
.info-block {
    margin-bottom: 12px;
    padding: 10px;
    background-color: #2a2a2a;
    border-radius: 4px;
}

.info-block:last-child {
    margin-bottom: 0;
}

.info-block-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: #ffffff;
}

.info-block-date {
    font-size: 10px;
    color: #888888;
    margin-bottom: 6px;
}

.info-block-text {
    font-size: 12px;
    color: #e0e0e0;
    line-height: 1.5;
    word-break: break-word;
}

.info-block-image {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin: 8px auto;
    border-radius: 4px;
}

.info-block-iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    border: 1px solid #444444;
    border-radius: 4px;
    background-color: #ffffff;
}

.info-loading,
.info-empty {
    padding: 20px;
    text-align: center;
    color: #888888;
    font-size: 12px;
}

/* === Вкладка "Формулы боя и игры" ===
   Две области: .info-formulas - карточки с пояснениями формул,
   .info-formulas-raw - сырая таблица всех настроек.
   Стилизация под общий тёмный фон #info-content. */

/* Хардкод-надпись наверху раздела - "Видит только админ". Красный фон чтобы
   визуально отличаться от .formula-admin-note (DB-баннер, оранжевый). */
.formula-admin-only-banner {
    background-color: #3a1414;
    border: 1px solid #6a2020;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #ffaaaa;
    line-height: 1.4;
    font-weight: bold;
}
.formula-admin-note {
    background-color: #3a2a14;
    border: 1px solid #6a5020;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #ffcc99;
    line-height: 1.4;
}
.info-formulas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.formula-card {
    background-color: #2a2a2a;
    border: 1px solid #444444;
    border-radius: 8px;
    padding: 12px 14px;
}
.formula-card h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #ffcc66;
}
.formula-line {
    background-color: #1a1a1a;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-family: monospace;
    font-size: 13px;
    color: #e0e0e0;
    word-break: break-word;
}
.formula-explain {
    font-size: 12px;
    color: #c0c0c0;
    line-height: 1.5;
}
.formula-explain > div {
    margin-bottom: 3px;
}
.info-formulas-raw {
    background-color: #2a2a2a;
    border: 1px solid #444444;
    border-radius: 8px;
    padding: 12px 14px;
}
.info-formulas-raw h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #ffcc66;
}
.formula-group {
    margin-bottom: 12px;
}
.formula-group:last-child { margin-bottom: 0; }
.formula-group-title {
    font-size: 12px;
    color: #888888;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #3a3a3a;
}
.formula-row {
    padding: 6px 0;
    border-bottom: 1px solid #2f2f2f;
}
.formula-row:last-child { border-bottom: none; }
.formula-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.formula-key {
    font-family: monospace;
    font-size: 12px;
    color: #99ccff;
}
.formula-val {
    font-family: monospace;
    font-size: 13px;
    color: #ffcc66;
    font-weight: bold;
}
.formula-desc {
    font-size: 11px;
    color: #999999;
    line-height: 1.4;
    margin-top: 3px;
}

/* Пагинация в разделе "Информация" */
#info-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px;
}

.info-page-btn {
    min-width: 28px;
    padding: 4px 8px;
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444444;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.info-page-btn.active {
    background-color: #4a6a4a;
    border-color: #5a8a5a;
}

/* Таблица бонусов за уровни (вкладка "Бонусы" в разделе "Информация") */
.bonus-level-wrap {
    width: 100%;
    /* Компенсация большого отступа сверху от #info-content (padding 20px).
       По требованию: уменьшить расстояние между табами и текстом в 3 раза
       (20px → ~7px эффективных). Применяется только в табе "Бонусы". */
    margin-top: -13px;
}

.bonus-level-intro {
    font-size: 12px;
    color: #cccccc;
    line-height: 1.4;
    margin-bottom: 10px;
}

.bonus-level-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #e0e0e0;
}

.bonus-level-table th,
.bonus-level-table td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid #3a3a3a;
}

.bonus-level-table th {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: normal;
    font-size: 11px;
}

.bonus-level-row.bonus-level-got {
    background-color: #2a3a2a; /* уже получен - зеленоватый */
    color: #b0d0b0;
}

.bonus-level-row.bonus-level-ready {
    background-color: #3a3a2a; /* достижим, но ещё не выдан - желтоватый */
    color: #e0e0a0;
}

.bonus-level-num {
    font-weight: bold;
}

.bonus-level-mark {
    margin-right: 4px;
    font-weight: bold;
}

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

/* Стили для полосок здоровья и энергии */
#player-health-bar,
#player-energy-bar,
#opponent-health-bar,
#opponent-energy-bar {
    width: 80px; /* Ширина полоски */
    height: 16px; /* Высота полоски */
    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%; /* Полосы всегда полные в режиме бонусов */
}





/* Стили для экрана загрузки */
#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-popup) и в попапе результата боя (.battle-result).
   Размер увеличен до 80x80 (раньше 50x50 - игроки жаловались на мелкие иконки).
   Отступ снизу 7px вместо 20px - одна строка между иконкой и текстом (по требованию). */
.error-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 7px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Тематика трёх типов уведомлений. Класс на .error-icon переключается из app.js
   (showErrorPopup/showInfoPopup/showWinPopup). Сам SVG-рисунок берётся из
   svg_icons.php через <use href=...> - тут только акцентная подложка/обводка кнопки,
   чтобы цвет окна совпадал со смыслом. */
.notify-error .error-ok-themed { background: linear-gradient(45deg, #b71c1c, #e53935); }
.notify-info  .error-ok-themed { background: linear-gradient(45deg, #0d47a1, #2196f3); }
.notify-win   .error-ok-themed { background: linear-gradient(45deg, #bf8f00, #ffd54f); color: #4a2c0d; }

#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; /* Отступ снизу заголовка */
    margin-top: 0; /* Иконка над h2 даёт свой отступ; собственный margin-top убираем */
}

.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 без дополнительных настроек) */
}

/* Адаптивное уменьшение блока ресурсов для узких экранов.
   Изменение --rs пропорционально уменьшает иконки, текст и отступы внутри #resources-box.
   Брейкпоинты подобраны под 4-дюймовые экраны (320-380px) и средние (380-420px). */
@media (max-width: 420px) {
    #resources-box { --rs: 0.85; }
}
@media (max-width: 380px) {
    #resources-box { --rs: 0.75; }
}
@media (max-width: 340px) {
    #resources-box { --rs: 0.65; }
}

/* ============================================================================
   КАРТОЧКИ ВЕЩЕЙ - ПЛОТНЫЕ ОТСТУПЫ
   ----------------------------------------------------------------------------
   Игра mobile-first, поэтому компактные отступы карточек теперь в БАЗОВЫХ
   селекторах (.card, .card-title, .card-requirements, .card-bonuses, .card-time,
   .card-action-container, .card-level-icon, .card-action) - см. выше в файле.
   Раньше здесь дублировался @media (max-width: 420px) с теми же значениями,
   но это значило, что на десктопе/планшетах карточки были излишне просторными.
   ============================================================================ */
/* ============================================================================
   ПОПАП УВЕЛИЧЕННОЙ КАРТИНКИ ТРЕБУЕМОЙ ВЕЩИ
   ----------------------------------------------------------------------------
   Открывается тапом по строке в .card-req-items, закрывается тапом в любое
   место (включая саму картинку - простой и предсказуемый сценарий на мобилке).
   Скрытие через .hidden (display:none) - используется общий класс из проекта.
   Контент - не во весь экран: max 80vmin, чтобы было видно подпись и было ясно,
   что попап можно закрыть тапом по тёмному полю.
   ============================================================================ */
#item-image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    /* По требованию "поднять картинку выше в 2 раза" - НЕ центрируем по вертикали,
       а прижимаем к верху с padding-top: 15vh. Раньше align-items: center
       размещал блок ровно на середине экрана. Теперь блок начинается на 15% от
       верха - визуально это в ~2 раза выше прежнего центра (50vh → 15vh).
       overflow: auto - на случай если контент попап-каскада станет высоким. */
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    box-sizing: border-box;
    overflow: auto;
    cursor: pointer; /* По всему оверлею - чтобы было ясно, что закрывается тапом */
}

.item-image-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Раньше gap:10px - картинка висела высоко над текстом. По требованию
       "картинку поднять выше в 2 раза" - уменьшаем зазор до 5px. Это сдвигает
       картинку ближе к подписи (визуально она оказывается "выше" в общем блоке). */
    gap: 5px;
    max-width: 80vmin;
    max-height: 80vmin;
    padding: 10px;
}

#item-image-popup-img {
    /* По требованию: картинка занимает 80% экрана, но НЕ БОЛЬШЕ 200px.
       min(80vw, 200px) - современный CSS, работает в Safari iOS 11.1+,
       Android Chrome всех актуальных версий. Для очень маленьких файлов
       (например клан с 64x64 логотипом) - не растягиваем сверх натуральной
       ширины: width:auto + max-width = картинка займёт min из (natural, 80vw, 200px).
       До этого было 60vmin/300px - "потолок" был выше, картинки иногда
       перекрывали полэкрана. Новый предел компактнее для попапа клана. */
    width: auto;
    height: auto;
    max-width: min(80vw, 200px);
    max-height: min(80vw, 200px);
    object-fit: contain;
    border-radius: 8px;
    background-color: #1a1a1a;
}

#item-image-popup-caption {
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    /* Имя и значок уровня в одну строку с небольшим отступом и центрированием */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.popup-item-name {
    font-weight: bold;
    color: #ffd23f;
}

/* Префикс "Требуется:" в попапе требуемой вещи. Отделяет визуально от имени.
   Цвет приглушённый - акцент остаётся на имени вещи. */
.popup-item-req-label {
    color: #b0b0b0;
    font-weight: normal;
}

/* Когда попап показывает ТРЕБУЕМУЮ вещь (есть класс .requirement у caption) -
   число уровня внутри SVG красим тем же светло-красным, что и недостающий
   уровень игрока в карточках (см. .requirement-item.missing.player-level svg
   text). Это унифицирует визуал "недостающего/требуемого" по всему интерфейсу. */
#item-image-popup-caption.requirement .level-svg text {
    fill: #ffb3bf;
}

/* SVG-значок уровня в подписи попапа - не сжимаем */
#item-image-popup-caption .level-svg {
    flex-shrink: 0;
}

/* ============================================================================
   КЛАН-РЕЖИМ caption: column layout вместо row + плотный межстрочный.
   Активируется добавлением класса .clan-mode из showClanInfoPopup. По требованию:
   - Имя клана, "Глава:", "Участников:", "Победы/Поражения" - 4 ОТДЕЛЬНЫЕ строки
   - Межстрочный интервал в 2 раза меньше дефолта (1.4 → 0.7)
   ============================================================================ */
#item-image-popup-caption.clan-mode {
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    line-height: 0.7; /* было 1.4 - в 2 раза меньше */
}
#item-image-popup-caption.clan-mode .clan-popup-name,
#item-image-popup-caption.clan-mode .clan-popup-owner-row,
#item-image-popup-caption.clan-mode .clan-popup-stat-row {
    /* Тонкий вертикальный отступ между строками. Раньше у .clan-popup-* был
       margin-bottom 4-8px - отменяем общим правилом, ставим 2px единый зазор. */
    margin: 2px 0;
}

/* ============================================================================
   #news-popup - попап непрочитанных новостей при входе в игру.
   ----------------------------------------------------------------------------
   Открывается из app.js при наличии новостей с id > players.last_id_news.
   Внутри - карусель до 3 новостей. Контент собирается renderNewsBlockForPopup
   из таких же DOM-блоков, как в Информации → Новости (.info-block-*), -
   так что специфичных стилей для контента почти нет, только обёртка попапа
   и кнопки навигации внизу.
   ============================================================================ */
#news-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 250; /* выше item-image-popup (200), ниже error (1000+) */
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Клик в подложку НЕ закрывает попап (см. ТЗ - закрывается кнопкой "Закрыть"
       или "Далее" - чтобы игрок не закрыл случайно). */
}

.news-popup-content {
    background-color: #1f1f1f;
    border-radius: 12px;
    border: 1px solid #3a3a3a;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#news-popup-body {
    padding: 12px;
    /* Содержимое - готовые блоки .info-block-* (приходят из renderInfoBlock-
       подобной функции). Их собственные отступы дают читабельный вид. */
}
/* Картинку новости в попапе ограничиваем 200x200 - такой и хранится файл
   (images/news/{id}.{ext}). Дублируем явно, чтобы при возможной разнице
   с .info-block-image размер был предсказуемым. */
#news-popup-body .info-block-image {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    display: block;
    margin: 8px auto;
    border-radius: 8px;
}

.news-popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #3a3a3a;
    background-color: #181818;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

#news-popup-counter {
    color: #aaaaaa;
    font-size: 12px;
}

#news-popup-next,
#news-popup-close {
    background-color: #2a2a2a;
    color: #ffcc00;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}
#news-popup-next:hover,
#news-popup-close:hover {
    background-color: #353535;
}
#news-popup-next {
    /* Кнопка "Далее" акцентная - желтоватая, чтобы игрок понимал что есть ещё. */
    background-color: #3a2f0a;
}

/* ============================================================================
   #icon-tip-toast - мини-тоаст подсказок для иконок.
   ============================================================================
   Показывается JS-делегатом initIconTooltips() при клике/тапе на любую иконку
   с атрибутом data-tip="...". Координаты ставит JS (showIconTip): тоаст
   появляется НАД иконкой по которой кликнули (если не помещается сверху -
   ПОД ней). Автоскрытие через 1.8 сек (контролируется в JS, через таймер).
   z-index 800 - под error/confirm/item-image (1000+), но над обычным UI. */
#icon-tip-toast {
    position: fixed;
    /* left/top задаёт JS через .style. Дефолты на случай первого кадра. */
    left: 0;
    top: 0;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.2;
    max-width: 240px;
    text-align: center;
    pointer-events: none; /* клик через него идёт ниже к UI - важно */
    opacity: 0;
    z-index: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease;
    white-space: nowrap; /* короткий tooltip - не разбиваем на 2 строки */
    transform: translateY(2px);
}
#icon-tip-toast.show {
    opacity: 1;
    transform: translateY(0);
}
/* ============================================================================
   Экран первичной регистрации (выбор имени игрока).
   Показывается только при первом входе - когда tg_id ещё нет в базе или
   name_player не задан. После регистрации - больше не появляется.
   Чёрный фон под цвет всей игры, по центру логотип + поле + кнопка.
   z-index выше игрового UI, но равен loading-screen - один из них показан.
   ============================================================================ */
#register-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

#register-screen.hidden {
    display: none !important;
}

.register-logo {
    max-width: 70%;
    max-height: 35vh;
    height: auto;
    object-fit: contain;
    margin-bottom: 30px;
}

#register-form {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#register-name-input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #1c1c1c;
    color: #e0e0e0;
    border: 1px solid #333333;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    text-align: center;
}

#register-name-input:focus {
    outline: none;
    border-color: #ff9500;
}

/* Подсказка под полем: правила имени */
#register-hint {
    color: #888888;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}

/* Сообщение об ошибке - красное, под подсказкой; min-height чтобы кнопка
   не прыгала при появлении/исчезновении текста */
#register-error {
    color: #ff5555;
    font-size: 13px;
    text-align: center;
    min-height: 18px;
    line-height: 1.3;
}

#register-start-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #ff9500;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

#register-start-btn:active {
    transform: scale(0.98);
    background-color: #e08400;
}

#register-start-btn:disabled {
    background-color: #555555;
    cursor: not-allowed;
}
/* ============================================================================
   ТУРНИРЫ (на арене + новости)
   ============================================================================ */

/* Контейнер кнопок "Турнир" и "Начать бой!" — flex row.
   Когда турнир-кнопка скрыта (.hidden) - "Начать бой!" остаётся одна
   и растягивается на всю ширину. */
#arena-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 380px;
    margin: 4px 0;
}
#arena-buttons > button {
    flex: 1 1 0;
    min-width: 0; /* чтоб flex реально делил пополам */
}
/* Кнопка "Турнир" - тот же базовый размер что у "Начать бой!".
   padding 8x12 как у start-battle-btn (сужена по высоте). */
#tournament-btn {
    padding: 8px 12px;
    background: linear-gradient(45deg, #2196f3, #03a9f4);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.5);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-bottom: 0; /* отступы даёт #arena-buttons */
}
#tournament-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.7);
}
#tournament-btn:active {
    transform: scale(0.96);
}
/* Нажатое состояние - игрок в турнире */
#tournament-btn.tournament-active {
    background: linear-gradient(45deg, #2e7d32, #4caf50);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4),
                0 2px 6px rgba(76, 175, 80, 0.6);
    transform: translateY(1px);
}
#tournament-btn.tournament-active:hover {
    background: linear-gradient(45deg, #388e3c, #66bb6a);
}

/* Блок с информацией о турнире (название/таймер/победы-поражения).
   3 РАЗНЫХ строки по вертикали - каждая <div> на своей строке. */
#tournament-block {
    margin-top: 3px; /* было 6 - в 2 раза меньше (от мигающего сообщения до блока) */
    /* Ширина 90% (а не 100%) - чтобы блок не упирался в края экрана,
       оставались поля по бокам как у #arena-players-count-block. */
    width: 90%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 7px; /* было 10 14 - внутренние отступы в 2 раза меньше */
    background-color: #1f2a1f;
    border: 1px solid #4caf50;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-align: center;
}
/* Каждая строка блока - отдельный div блочного типа.
   Без display: block — оборачивались в одну строку, если родитель flex. */
#tournament-block-title,
#tournament-block-timer,
#tournament-block-stats {
    display: block;
    width: 100%;
}
#tournament-block-title {
    font-size: 14px;
    font-weight: bold;
    color: #c8e6c9;
    margin-bottom: 2px; /* было 4 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Обратный таймер до конца турнира. */
#tournament-block-timer {
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
    margin-bottom: 3px; /* было 6 - в 2 раза меньше */
    color: #66bb6a; /* зелёный по умолчанию */
}
#tournament-block-timer.timer-danger {
    color: #ef5350; /* красный когда осталось < 1 часа */
}
/* Строка с победами/поражениями (3-я строка) - flex внутри блочного контейнера. */
#tournament-block-stats {
    display: flex !important; /* перебивает display:block выше */
    justify-content: center;
    gap: 24px;
}

/* Мигающее сообщение ожидания / завершения турнирного боя.
   Под кнопками. В 2 раза меньше отступы и расстояние до блока таймера. */
#tournament-waiting {
    margin: 2px 0 3px; /* было 4 0 8 - в 2 раза меньше */
    padding: 4px 12px; /* было 8 12 - в 2 раза меньше (сверху/снизу) */
    background: #1f2a1f;
    border: 1px solid #4caf50;
    border-radius: 8px;
    color: #c8e6c9;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    animation: tournament-waiting-pulse 1.4s ease-in-out infinite;
}
@keyframes tournament-waiting-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ТОП-список игроков турнира под блоком статистики.
   Стиль строк - как opponent-stats в бою: аватар, имя, уровень, потом
   небольшая строчка с stat-иконками. Бары не используем (только числа). */
#tournament-top {
    margin-top: 4px; /* было 8 */
    width: 90%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px 6px; /* было 5 12 - в 2 раза меньше отступы от края плашки со всех сторон */
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
#tournament-top .ttop-title {
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 3px;
    text-align: center;
}
/* Строка одного игрока: 2 подстроки.
   1) шапка (аватар, имя+уровень, побед, "в бою"); 2) характеристики.
   Раньше всё было в одной flex-row с переносом и большим отступом -
   теперь компактные подстроки с минимальным расстоянием. */
#tournament-top .ttop-row {
    padding: 2px 4px; /* было 5 4 - в 2+ раза меньше (расстояние между участниками) */
    border-top: 1px solid #353535;
}
#tournament-top .ttop-row:first-of-type {
    border-top: none;
}
/* Подстрока 1: аватар + имя + уровень (рядом) + победы + "в бою" */
#tournament-top .ttop-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
#tournament-top .ttop-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* Имя + уровень оборачиваем в один inline-flex чтобы уровень был ПРИЖАТ
   к имени, а не уезжал на правый край из-за flex:1 у соседа. */
#tournament-top .ttop-name-block {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
#tournament-top .ttop-name {
    font-size: 13px;
    font-weight: bold;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tournament-top .ttop-level {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
#tournament-top .ttop-wins {
    /* Контейнер прижат margin-left:auto к правому краю строки .ttop-head.
       Внутри - flex: иконка кубка СЛЕВА (default flex-start), число СРАЗУ
       за ним через gap:4, далее свободное место до правой границы.
       min-width:50px = иконка(14) + gap(4) + слот под 4 цифры(32). Этот
       резерв гарантирует, что:
         1) Иконка кубка всегда стоит на одной вертикали во всех строках
            (контейнер не сжимается уже 50px, левый край = parent_right-50);
         2) Число всегда вплотную к кубку (через gap родителя), а пустое
            место сдвигается ВПРАВО (между числом и правым краем плашки) -
            не между кубком и числом;
         3) Для 3-значного числа справа остаётся ровно "+1 цифра" воздуха;
            для коротких чисел воздуха больше; 4-значное помещается впритык.
       tabular-nums - одинаковая ширина цифр.
       Цвет - через общий класс .wl-win в HTML span'е. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 50px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
#tournament-top .ttop-wins-num {
    /* Число прижато к кубку через gap родителя (без своих отступов).
       Свободное место уходит вправо внутри min-width:50 родителя. */
}
/* Иконка "сейчас в бою" — те же мечи что и used_in_battle у вещей */
#tournament-top .ttop-in-battle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ff8a65;
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0;
}
#tournament-top .ttop-in-battle svg {
    width: 14px;
    height: 14px;
}
/* Подстрока 2: характеристики (сила/защита/hp/энергия) - под аватаром. */
#tournament-top .ttop-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #cfd6dd;
    margin-top: 1px; /* было через row gap - теперь близко к строке имени */
    margin-left: 32px; /* отступ под аватаром (26+6) */
}
#tournament-top .ttop-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#tournament-top .ttop-stat svg {
    width: 14px;
    height: 14px;
}

/* ============================================================================
   КЛАНОВЫЕ ТУРНИРЫ - ТОП кланов на арене (под блоком статистики турнира)
   ============================================================================
   Структурно повторяет #tournament-top, но рендерит кланы вместо игроков.
   Показывается только когда активен клановый турнир (state.is_clan_tournament).
   #tournament-top и #clan-tournament-top взаимоисключающие - applyTournamentState
   показывает только один.

   ДИЗАЙН: точно совпадает с #tournament-top (обычный ТОП игроков турнира) -
   та же ширина 90%/max-380px, тот же тёмно-серый фон #2a2a2a, БЕЗ рамки,
   те же размеры шрифтов и иконок. Так "Турнир" и "Клан-турнир" выглядят
   одинаково в визуальной системе. */
#clan-tournament-top {
    margin-top: 4px;
    width: 90%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px 6px;
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    font-size: 13px;
    color: #e0e0e0;
}
#clan-tournament-top .ttop-title {
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 3px;
    text-align: center;
}
#clan-tournament-top .ctop-row {
    /* padding по вертикали увеличен (было 2px) - больше воздуха между строками
       кланов в топе. Просил пользователь "межстрочный интервал увеличь на 1pt". */
    padding: 4px 4px;
    border-top: 1px solid #353535;
}
#clan-tournament-top .ctop-row:first-of-type {
    border-top: none;
}
#clan-tournament-top .ctop-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
#clan-tournament-top .ctop-clan-logo {
    /* Лого клана увеличено (26 → 36px) - просил пользователь "картинку кланов
       увеличь". Аватар главы остаётся 16x16 - визуальная иерархия: клан-лого
       доминирует, аватар главы - вторичная инфа. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #2a2a30;
}
#clan-tournament-top .ctop-clan-logo-empty {
    /* Если логотипа нет - тёмный квадрат, не "битая картинка" */
    background: #2a2a30;
    border: 1px dashed #4a4a55;
    border-radius: 50%;
}
#clan-tournament-top .ctop-clan-name-block {
    /* Колонкой: имя клана сверху, инфо о главе - следующей строкой.
       Раньше было inline-flex со wrap - но при узких именах главы инфа уходила
       вправо, ломая макет. Колонка - проще и предсказуемее.
       gap=3px (было 1px) - чуть больше воздуха между именем клана и строкой
       "Глава: ...". Просил пользователь "межстрочный интервал увеличь на 1pt". */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
#clan-tournament-top .ctop-clan-name {
    font-size: 13px;
    font-weight: bold;
    /* Жёлто-оранжевый - тот же что используется для имён кланов везде в игре
       (.cb-top-name в Информация → Топ кланы, .cb-app-name в КБ-заявках). */
    color: #ffcc00;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
#clan-tournament-top .ctop-owner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #b6c5e2;
    font-size: 11px;
}
#clan-tournament-top .ctop-owner-label {
    color: #888;
    font-size: 11px;
}
#clan-tournament-top .ctop-owner-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}
#clan-tournament-top .ctop-wins {
    /* Та же логика что у .ttop-wins в обычном турнире:
       margin-left:auto прижимает к правому краю, min-width=50 фиксирует
       вертикаль иконки кубка между строками. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 50px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
#clan-tournament-top .ctop-wins svg {
    width: 14px;
    height: 14px;
}
#clan-tournament-top .ctop-wins-num {
    font-variant-numeric: tabular-nums;
}
#clan-tournament-top .ctop-stats {
    /* Как .ttop-stats: подстрока с характеристиками под аватаром клана. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #cfd6dd;
    margin-top: 2px; /* было 1, чуть больше воздуха перед статами */
    /* Отступ под лого клана (36+6=42) - визуально привязка стат к строке имени.
       Раньше было 32px при лого 26x26 - увеличен синхронно с лого. */
    margin-left: 42px;
    padding-left: 0;
}
#clan-tournament-top .ctop-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#clan-tournament-top .ctop-stat svg {
    width: 14px;
    height: 14px;
}

/* ============================================================================
   ТУРНИРНЫЕ НОВОСТИ (block_type='tournament_result' в разделе Новости)
   ============================================================================ */
/* Базовый стиль (без модификаторов) - используется как фоллбэк для старых
   новостей без поля status. Конкретные цвета задаются ниже через классы
   .info-block-tournament-planned / -live / -done. */
.info-block-tournament {
    background: #1f2a1f;
    border: 1px solid #4caf50;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
}

/* --- Запланирован (в будущем): синие/серые тона --- */
.info-block-tournament-planned {
    background: #1f242e;
    border-color: #5c8ad6;
}
.info-block-tournament-planned .tour-meta b { color: #b6c5e2; }

/* --- Идёт сейчас: зелёный, с пульсацией бордюра для динамичности --- */
.info-block-tournament-live {
    background: #1a2a1a;
    border-color: #66bb6a;
    box-shadow: 0 0 12px rgba(102, 187, 106, 0.35);
    animation: tour-live-glow 2.2s ease-in-out infinite;
}
@keyframes tour-live-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(102, 187, 106, 0.25); }
    50%      { box-shadow: 0 0 16px rgba(102, 187, 106, 0.55); }
}

/* --- Завершён: тёмные тона, золотой/серый бордюр (победа в истории) --- */
.info-block-tournament-done {
    background: #221d18;
    border-color: #b89668;
}

/* Бейджик статуса в правом верхнем углу блока */
.tour-status-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Поверх содержимого блока, чтобы при перекрытии всё равно был виден. */
    z-index: 1;
}

/* Заголовок турнирной новости имеет правый отступ под бейджик "Идёт сейчас" /
   "Запланирован" / "Завершён" - чтобы длинное название не заходило под него.
   ~110px = max ширина бейджа ("ИДЁТ СЕЙЧАС" ~95px) + небольшой gap. */
.info-block-tournament .info-block-title {
    padding-right: 110px;
}
.tour-status-planned {
    background: #2a3450;
    color: #b6c5e2;
    border: 1px solid #5c8ad6;
}
.tour-status-live {
    background: #1f3a1f;
    color: #b3e5b3;
    border: 1px solid #66bb6a;
}
.tour-status-done {
    background: #3a2e1a;
    color: #e2cda0;
    border: 1px solid #b89668;
}

.info-block-tournament .tour-meta {
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 8px;
    margin-top: 18px; /* отступ под бейджик */
    line-height: 1.5;
}
.info-block-tournament .tour-meta b {
    color: #d0d0d0;
}
.info-block-tournament .tour-prize {
    background: #2a2a1a;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #e0e0e0;
}
.info-block-tournament .tour-prize-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.info-block-tournament .tour-prize-item img {
    /* Размер иконки приза-вещи (например, "яйцо") в новости о турнире.
       Раньше 24x24 - визуально терялась рядом с текстом приза. По требованию
       чуть-чуть увеличено до 30x30 - заметнее, не доминирует. */
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
}
.info-block-tournament .tour-prize-coin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.info-block-tournament .tour-prize-coin svg {
    width: 20px;
    height: 20px;
}
.info-block-tournament .tour-winners-title {
    font-size: 14px;
    font-weight: bold;
    color: #c8e6c9;
    margin: 6px 0;
}
.info-block-tournament .tour-medal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}
.info-block-tournament .tour-medal-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.info-block-tournament .tour-winner-name {
    font-size: 14px;
    color: #e0e0e0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.info-block-tournament .tour-winner-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
/* Подпись справа: число побед + иконка кубка победителя.
   - margin-left:auto в flex-контейнере .tour-medal-row прижимает блок к правому краю.
   - flex-direction задаёт порядок: ЧИСЛО ВПЕРЕДИ, кубок справа от него.
   - Цвет берётся от класса .wl-win (#ffcc00) - единый цвет побед во всей игре.
   - При flex-wrap (узкий экран) - блок переходит на новую строку, оставаясь справа.
   Цели:
   1) Кубки разных рядов выровнены по вертикали (стоят у правого края контейнера).
   2) Числа справа от имён, но слева от кубков; tabular-nums + min-width дают
      одинаковую ширину для 1-, 2-, 3- и 4-значных чисел побед. */
.info-block-tournament .tour-winner-wins {
    font-size: 13px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}
.info-block-tournament .tour-winner-wins-num {
    font-variant-numeric: tabular-nums; /* моноширинные цифры */
    text-align: right;
    min-width: 4ch; /* запас под 4-значное число побед (до 9999) */
    font-weight: bold;
}

/* Подпись справа в строке победителей: иконка кубка + число побед.
   Иконка чуть смещена вниз, чтобы выровняться с глифом числа. */
.info-block-tournament .tour-winner-wins-icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
}

/* Подстрока правил распределения призов (под строкой "Приз: ..."). Мелким
   шрифтом, серым - не отвлекает от основного приза, но информирует. */
.info-block-tournament .tour-prize-distr {
    font-size: 11px;
    color: #a0a0a0;
    margin-top: 2px;
    margin-left: 38px; /* выравнено по тексту приза справа от лейбла "Приз:" */
    line-height: 1.4;
}

/* Что именно получил победитель (рядом с его именем в строке медали).
   Маленький "+ N монет" или "+ N монет + вещь" для золота. */
.info-block-tournament .tour-winner-recv {
    color: #ffcc00;
    font-size: 12px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.info-block-tournament .tour-winner-recv-icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}
.info-block-tournament .tour-winner-recv-img {
    /* Иконка приза-вещи рядом с именем победителя (например "яйцо" в строке
       выданных призов). Раньше 14x14 - терялась в плотной строке. Увеличено
       до 22x22 чтобы яйцо/вещь были заметнее в списке выданных призов. */
    width: 22px;
    height: 22px;
    vertical-align: -5px;
    border-radius: 2px;
}

/* === КЛАНОВЫЕ ТУРНИРЫ - победители в новости (.tour-medal-row-clan) ===
   Структура отличается от обычного турнира: каждая медаль - КЛАН со списком
   участников-получателей призов. На одной медали может быть несколько кланов
   (равные wins), они идут друг за другом через flex-wrap. */
.info-block-tournament .tour-medal-row-clan {
    /* На основе .tour-medal-row, но вертикальная компоновка - кланы идут
       друг под другом, а каждый клан внутри содержит лого + имя + получено + участников. */
    align-items: flex-start;
}
.info-block-tournament .tour-winner-clan {
    /* Один клан-победитель: лого, имя, выдача, кубок (справа), список участников.
       flex-basis:100% - каждый клан-блок занимает ОТДЕЛЬНУЮ ПОЛНУЮ строку медали.
       Раньше блок был flex:1 1 auto - размер зависел от контента (имя длиннее → блок
       шире), и блоки разных кланов получались разной формы. С flex-basis:100% все
       клан-блоки выровнены и одинаковы по ширине. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: rgba(74, 58, 138, 0.15);
    border: 1px solid rgba(214, 196, 255, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 2px 0;
    flex-basis: 100%;
    min-width: 0;
}
.info-block-tournament .tour-winner-clan-logo {
    /* Лого клана - заметнее обычной аватарки победителя. */
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    background: #2a2a30;
    flex-shrink: 0;
}
.info-block-tournament .tour-winner-clan-logo-empty {
    /* Дефолт если файла лого нет - тёмный квадрат с пунктиром, не битая картинка. */
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #2a2a30;
    border: 1px dashed #4a4a55;
    border-radius: 4px;
}
.info-block-tournament .tour-winner-clan-name {
    font-size: 14px;
    font-weight: bold;
    color: #d6c4ff;  /* фиолетовый - "клановость" */
}
.info-block-tournament .tour-clan-participants {
    /* Список участников клана - компактные плашки с аватаркой+именем.
       Полная ширина (flex-basis 100%) - идёт на отдельной строке под клан-шапкой,
       чтобы при многих участниках строка не растягивалась горизонтально. */
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 4px;
    flex-basis: 100%;
}
.info-block-tournament .tour-clan-participant {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #c8c8c8;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 5px;
    border-radius: 10px;
}
.info-block-tournament .tour-clan-participant-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================================
   КЛАН - стили раздела "Клан" (внутри #cards-container, по вкладке clan-tab-btn).
   Структура: #clan-section > .clan-block (логотип, инфо, кнопки) | .clan-create-form
   | .clan-recruit. Цветовая схема согласована с остальным проектом (жёлтый акцент
   #ffcc00, тёмный фон).
   ============================================================================ */
#clan-section {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #e0e0e0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#clan-section::-webkit-scrollbar { display: none; }

.clan-block {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    /* flex-wrap: wrap НА ВСЕХ экранах - нужно для того, чтобы развёрнутый
       список "Состав клана" (.clan-members-list) автоматически уходил на новую строку
       вместо того, чтобы сжимать инфо-колонку. Раньше wrap включался только на узких
       экранах (@media max-width: 380px) - и при открытии Состава на десктопе/планшете
       инфо-колонка сжималась до 1 символа в строку. */
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
/* Жёлтая рамка для блока "мой клан" - визуально отличает от остальных */
.clan-block-my {
    border: 1px solid #ffcc00;
    background-color: rgba(255, 204, 0, 0.08);
}

.clan-info {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

.clan-name {
    font-weight: bold;
    font-size: 14px;
    color: #ffcc00;
    margin-bottom: 4px;
    word-break: break-word;
}

.clan-owner {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    color: #cccccc;
    font-size: 11px;
}
.clan-owner img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.clan-members-count {
    color: #b0b0b0;
    font-size: 11px;
    margin-bottom: 4px;
}

.clan-desc {
    color: #d0d0d0;
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
}

.clan-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.clan-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: transform 0.1s;
}
.clan-btn:active { transform: scale(0.97); }

.clan-btn-primary { background: linear-gradient(45deg, #ff9500, #ffcc00); }
.clan-btn-danger  { background: linear-gradient(45deg, #b32424, #e84545); }
.clan-btn-neutral { background: linear-gradient(45deg, #4a4a4a, #6a6a6a); }
.clan-btn-disabled {
    background: #555555;
    cursor: not-allowed;
    opacity: 0.7;
    display: inline-block;
}

.clan-btn-badge {
    display: inline-block;
    background-color: #ff3030;
    color: white;
    border-radius: 10px;
    padding: 0 5px;
    font-size: 10px;
    margin-left: 4px;
    min-width: 16px;
    text-align: center;
}

.clan-separator {
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    margin: 12px 0;
}

/* Форма создания клана */
.clan-create-form {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}
.clan-create-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #d0d0d0;
}
.clan-create-form input[type="text"],
.clan-create-form textarea {
    width: 100%;
    padding: 6px 8px;
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #555555;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 12px;
    margin-top: 3px;
}
.clan-create-form textarea {
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
}
.clan-create-form input[type="file"] {
    font-size: 11px;
    color: #cccccc;
    margin-top: 3px;
}
.clan-create-hint {
    font-size: 10px;
    color: #888888;
    margin-top: 2px;
    margin-bottom: 6px;
}
.clan-create-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Список заявок (рекрутов) */
.clan-recruit {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
}
.clan-recruit-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #2a2a2a;
    flex-shrink: 0;
}
.clan-recruit-info { flex: 1; min-width: 0; }
.clan-recruit-name {
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}
.clan-recruit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #d0d0d0;
}
.clan-recruit-stat {
    display: flex;
    align-items: center;
    gap: 2px;
}
.clan-recruit-stat svg {
    width: 14px;
    height: 14px;
}
.clan-recruit-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================================
   ПОПАП ПОДТВЕРЖДЕНИЯ (универсальный, см. showConfirmPopup в app.js).
   Используется в опасных действиях (выход из клана, удаление клана и т.п.).
   Похож на #error-popup, но с двумя кнопками "Да"/"Отмена".
   ============================================================================ */
#confirm-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}
.confirm-content {
    background-color: #222222;
    border-radius: 15px;
    padding: 20px;
    width: 85%;
    max-width: 360px;
    text-align: center;
}
#confirm-message {
    color: #e0e0e0;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.4;
}
.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.confirm-yes, .confirm-no {
    padding: 10px 22px;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}
.confirm-yes { background: linear-gradient(45deg, #b32424, #e84545); }
.confirm-no  { background: linear-gradient(45deg, #555555, #777777); }

/* Адаптация для узких экранов: на узких экранах действия идут под блоком в ряд,
   а не в столбец справа. flex-wrap уже включён в базовых стилях .clan-block. */
@media only screen and (max-width: 380px) {
    .clan-action {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
    }
    .clan-btn { font-size: 10px; padding: 5px 10px; }
}

/* ============================================================================
   КЛАН - доп. стили: action-табы, поиск, пагинация, логотип с SVG-инициалами.
   Добавлено после внедрения пагинации и переноса кнопок "Создать клан"/"Заявки"
   в ряд табов (.menu-tab-action).
   ============================================================================ */

/* Action-табы в ряду #cards-menu (после "Новые"). Отличаются фоном от основных табов:
   тёмно-синий градиент вместо серого. Активным никогда не становятся - это кнопки-действия. */
.menu-tab-action {
    background: linear-gradient(45deg, #1a5490, #2a72c0) !important;
    color: white !important;
    font-size: 13px;
}
.menu-tab-action:hover {
    background: linear-gradient(45deg, #2065aa, #3287d5) !important;
}

/* Поиск по списку кланов: строка с input и кнопкой "Найти" */
.clan-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    align-items: center;
}
.clan-search-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #555555;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 12px;
}

/* Пагинация по страницам списка кланов */
.clan-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 10px 0 4px 0;
}
.clan-page-btn {
    min-width: 28px;
    padding: 4px 8px;
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444444;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}
.clan-page-btn.active {
    background-color: #4a6a4a;
    border-color: #5a8a5a;
}

/* Логотип клана: обёртка с SVG-инициалами под IMG. Если файл картинки отсутствует
   (onerror у IMG), то картинка прячется и видны инициалы - надёжный фолбэк. */
.clan-logo-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #3a3a3a;
    overflow: hidden;
    flex-shrink: 0;
}
.clan-logo-initials {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffcc00;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}
.clan-logo-img {
    /* Абсолютное позиционирование - картинка полностью покрывает обёртку.
       inset: 0 = top/right/bottom/left = 0 (более явная альтернатива top+left+width+height).
       display: block - убираем неявный baseline-промежуток, который браузер оставляет
       у инлайновых <img> (из-за чего картинка визуально "съезжала вниз" внутри обёртки).
       object-fit: cover - масштабируем с обрезкой; object-position: center - центруем
       по обеим осям (default, но указываем явно для надёжности). */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
}

/* На узких экранах action-табы могут не помещаться, делаем меньше */
@media only screen and (max-width: 380px) {
    .menu-tab-action { font-size: 11px; padding: 8px 12px; }
    .clan-logo-wrap { width: 50px; height: 50px; }
    .clan-logo-initials { font-size: 20px; }
}


/* ============================================================================
   КЛАНОВЫЕ БОИ
   ----------------------------------------------------------------------------
   - Кнопка "Создать клановый бой" в арена-кнопках (с состоянием .active = заявка активна)
   - Строка "Из моего клана: N" под счётчиком игроков на арене
   - Список заявок на КБ (#clan-battle-apps-list) с записями .cb-app
   - Оверлей "Ожидайте партнёра" поверх battle-area (мигающий)
   - Попап "Напарник сбежал" (#partner-left-popup)
   - W/L бейджи в клан-блоках (Ферма > Кланы)
   - Топ-10 кланов в Информация > Кланы
   ============================================================================ */

/* Допускаем перенос кнопок арены на новую строку (т.к. появилась 3-я кнопка). */
#arena-buttons {
    flex-wrap: wrap;
    gap: 6px;
}

/* Вторая строка внутри #arena-players-count-block - "Из моего клана: N".
   Чуть меньше шрифт и без своих отступов снаружи, чтобы две строки выглядели
   как единый блок. */
#arena-clan-count {
    font-size: 12px;
    color: #ffcc00;
    text-align: center;
    margin-top: 2px;
}

/* Кнопка "Создать клановый бой" - стиль аналогичен start-battle-btn, но другой цвет
   (сине-фиолетовый), чтобы визуально отличать от обычных боевых кнопок. */
#clan-battle-app-btn {
    padding: 10px 14px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(45deg, #5a3aa0, #8a64d6);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.1s;
}
#clan-battle-app-btn:active { transform: scale(0.97); }

/* Активное состояние - заявка создана (выглядит "нажато"). */
#clan-battle-app-btn.active {
    background: linear-gradient(45deg, #2a7a2a, #4dbf4d);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}

/* Список заявок на КБ под кнопками арены. Карточки заявок занимают всю ширину. */
#clan-battle-apps-list {
    /* Ширина 90% (а не 100%) - чтобы блок выглядел согласованно с
       #arena-players-count-block и #tournament-block. */
    width: 90%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Заголовок списка заявок - сверху, неяркий и не крупный. */
.cb-app-title {
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
    margin-bottom: 2px;
}

/* Одна заявка в списке: лого слева, инфо посередине, кнопка справа.
   Все заявки имеют тонкую рамку - чтобы карточки чётко отделялись на тёмном фоне арены. */
.cb-app {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 6px 8px;
}
.cb-app-mine {
    /* Своя заявка выделена фиолетовой рамкой - чтобы владелец её сразу отличал
       среди чужих. Толщина 1px - такая же как у других карточек, цвет более насыщенный. */
    background-color: rgba(90, 58, 160, 0.22);
    border: 1px solid #a685f0;
}
.cb-app-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #2a2a2a;
    flex-shrink: 0;
}
.cb-app-info { flex: 1; min-width: 0; }
.cb-app-name {
    font-weight: bold;
    color: #ffcc00;
    font-size: 12px;
    margin-bottom: 2px;
    word-break: break-word;
}
.cb-app-count {
    font-size: 11px;
    color: #b0e0b0;
}
.cb-app-action { flex-shrink: 0; }
.cb-app-fight-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #b32424, #e84545);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.1s;
}
.cb-app-fight-btn:active { transform: scale(0.97); }
.cb-app-fight-btn:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Оверлей "Ожидайте партнёра" - чёрный фон поверх battle-area с мигающим текстом.
   Текст пульсирует плавно (анимация opacity), курсор/аватарка под ним - скрыты
   через .cb-waiting-mode на родителе. */
#clan-battle-waiting-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: inherit;
}
.cb-waiting-text {
    color: #ffcc00;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    animation: cb-waiting-blink 1.4s ease-in-out infinite;
}
@keyframes cb-waiting-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* battle-area должен быть position:relative, чтобы overlay прижался к нему.
   Если родитель уже relative - этот override не вреден. */
#battle-area { position: relative; }

/* В режиме ожидания скрываем кросс-курсор и подпись "click for fight",
   чтобы они не маячили из-под оверлея (мерцает чуть-чуть и видно). */
#opponent-avatar-wrap.cb-waiting-mode #opponent-crosshair,
#opponent-avatar-wrap.cb-waiting-mode #opponent-crosshair-label {
    display: none;
}

/* Попап "Напарник сбежал" - вид как у confirm-popup, но с одной кнопкой ОК. */
#partner-left-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1002;
}
#partner-left-popup .confirm-content {
    background-color: #222222;
    border-radius: 15px;
    padding: 20px;
    width: 85%;
    max-width: 320px;
    text-align: center;
}
#partner-left-popup p {
    color: #ffcc00;
    font-size: 16px;
    margin-bottom: 16px;
}

/* W/L бейджи в карточке клана (Ферма > Кланы). Маленькие, рядом с числом участников. */
.clan-wl-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
}
.clan-wl-icon { vertical-align: -2px; width: 14px; height: 14px; }

/* ============================================================================
   ИНФОРМАЦИЯ → КЛАНЫ - топ-10 кланов.
   ============================================================================ */
.cb-top-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Внешние отступы списка - небольшие, чтобы список занимал больше ширины
       (часть #info-content). Отрицательный margin сжимает родительский padding (20px)
       до 4px по горизонтали - список становится шире, как просил пользователь. */
    padding: 6px 4px;
    margin-left: -16px;
    margin-right: -16px;
}
.cb-top-item {
    display: flex;
    /* align-items: center - номер клана и логотип по центру вертикально внутри карточки.
       Раньше было flex-start, но это создавало визуальный дисбаланс: номер прижимался
       к верху, а логотип к низу из-за разной высоты текстового блока справа.
       Сейчас все элементы выровнены по центру. */
    align-items: center;
    /* gap=12px (было 8) - больше воздуха между картинкой клана и блоком инфо
       с именем главы. Просил пользователь "между картинкой клана и Глава нужен пробел". */
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    /* Внутренние отступы карточки уменьшены, чтобы влезало больше информации. */
    padding: 6px 8px;
}

/* Иконки в статистике (cup/helmet/clan) - того же размера и выравниваем с числом
   на baseline (vertical-align: middle сбивает - используем text-bottom). */
.cb-top-stat-icon {
    vertical-align: -2px;
    width: 14px;
    height: 14px;
}
.cb-top-place {
    font-size: 16px;
    font-weight: bold;
    color: #ffcc00;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    /* align-self: center - номер по центру по вертикали внутри строки, независимо
       от высоты логотипа/инфо-блока. Совпадает с align-items: center на родителе,
       но указываем явно для надёжности. */
    align-self: center;
}
/* Лого клана в топе - прямой <img> 48x48 (без обёртки .clan-logo-wrap).
   Сделано по образцу .cb-app-logo (заявки КБ), который рендерится корректно.
   object-fit: cover + object-position: center гарантируют, что картинка
   заполняет 48x48 без зазоров. cursor: pointer т.к. клик открывает попап. */
.cb-top-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    background-color: #3a3a3a;
    flex-shrink: 0;
    align-self: center;
    cursor: pointer;
    display: block;
}
/* Когда у клана нет лого (или картинка не загрузилась) - тот же блок 48x48,
   но вместо картинки - инициалы клана по центру. */
.cb-top-logo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffcc00;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}
.cb-top-info { flex: 1; min-width: 0; }
.cb-top-name {
    font-weight: bold;
    color: #ffcc00;
    font-size: 13px;
    margin-bottom: 1px;
    word-break: break-word;
}
.cb-top-owner {
    color: #cccccc;
    /* Имя главы 1.5× от прежнего (11 → 16px). По просьбе пользователя -
       глава клана важный персонаж, его имя должно быть читаемее. */
    font-size: 16px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cb-top-stats {
    display: flex;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}
.cb-top-members { color: #b0c0e0; }

/* ============================================================================
   СПИСОК УЧАСТНИКОВ КЛАНА (Состав)
   Открывается под блоком клана у владельца. Управление - JS toggleClanMembers.
   ============================================================================ */
.clan-members-list {
    /* flex-basis: 100% + flex-shrink: 0 - принудительно отправляем блок на ПОЛНУЮ
       новую строку внутри flex-wrap родителя (.clan-block). Без этого блок
       пытался встать в один ряд с лого/инфо/действиями и сжимал инфо-колонку
       до 1 символа в строку. */
    flex-basis: 100%;
    width: 100%;
    flex-shrink: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clan-members-title {
    font-weight: bold;
    color: #ffcc00;
    font-size: 12px;
    margin-bottom: 4px;
}
.clan-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.clan-member-avatar,
.clan-member-avatar-empty {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #444;
    flex-shrink: 0;
    object-fit: cover;
}
.clan-member-info { flex: 1; min-width: 0; }
.clan-member-name {
    font-size: 12px;
    color: #e0e0e0;
    word-break: break-word;
}
.clan-member-level {
    font-size: 10px;
    color: #aaa;
}
.clan-member-owner-badge {
    margin-left: 4px;
    font-size: 12px;
}
.clan-member-action { flex-shrink: 0; }
.clan-btn-small {
    padding: 4px 8px !important;
    font-size: 10px !important;
}

/* Переключатель сортировки списка кланов в Ферма > Кланы.
   Маленькие кнопки в ряд, активная подсвечена. */
.clan-sort-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
}
.clan-sort-label { color: #aaa; margin-right: 4px; }
.clan-sort-btn {
    padding: 4px 8px;
    border: 1px solid #444;
    border-radius: 12px;
    background-color: #2a2a2a;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
}
.clan-sort-btn.active {
    background-color: #4a6a4a;
    color: #fff;
    border-color: #5a8a5a;
}

/* ============================================================================
   КЛАН: ценник в форме РЕГИСТРАЦИИ КЛАНА (платное создание)
   ----------------------------------------------------------------------------
   Стоит между заголовком "Регистрация клана" и полями формы.
   Жёлтое число + иконка монеты выровнены по центру по вертикали.
   ============================================================================ */
.clan-create-price {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.clan-create-price-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffcc00;
    font-size: 16px;
}
.clan-create-price-icon {
    flex-shrink: 0;
}
/* Подсказка о нехватке монет под ценником. Красноватый цвет - чтобы сразу
   привлекал внимание; точные числа (сколько есть / сколько нужно / сколько
   не хватает) позволяют игроку понять что делать. */
.clan-create-shortage {
    color: #ff6060;
    font-size: 13px;
    margin: -6px 0 10px 0;
    padding: 6px 10px;
    background: rgba(255, 60, 60, 0.08);
    border-left: 3px solid #ff6060;
    border-radius: 4px;
}

/* ============================================================================
   БЭЙДЖ КЛАНА на аватарке игрока
   ----------------------------------------------------------------------------
   Универсальная обёртка + маленький угловой бэйдж с SVG-иконкой клана.
   Применяется в:
     - Турнирный топ (.ttop-avatar 26px - бэйдж 11px)
     - Большая аватарка боя (#opponent-avatar 300px - бэйдж 48px)
     - Маленькая аватарка соперника (.opponent-avatar 30px - бэйдж 12px)
     - Победители турнира (.tour-winner-avatar 22px - бэйдж 10px)
   Размер бэйджа задаётся inline style (width/height в px) из JS - универсально
   для любых размеров аватарок.
   ============================================================================ */
.avatar-clan-wrap {
    position: relative;
    /* НЕ ставим display:inline-block - этот класс может оборачивать img,
       находящийся внутри flex-контейнера (.stats-left и т.п.). Если задать
       inline-block, span становится строчным блоком и НЕ влияет на родительский
       flex - но если по ошибке класс попадёт на сам flex-контейнер, его flex
       сломается. Также НЕ ставим line-height:0 - inline-блоки внутри текстовых
       строк (например, аватар + ник) выравниваются по baseline и любые правки
       line-height ломают вертикальное выравнивание соседнего текста.
       Span с position:relative и без других правил display корректно служит
       якорем для absolute-позиционирования бэйджа. */
    flex-shrink: 0;
}
.avatar-clan-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    background-color: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden; /* картинка-лого клана обрезается по кругу бэйджа */
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.avatar-clan-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.avatar-clan-badge svg {
    width: 70%;
    height: 70%;
    display: block;
}

/* ============================================================================
   ИНЛАЙН-ИКОНКА КЛАНА в шапке игрока и в строке статов противника.
   ----------------------------------------------------------------------------
   Самостоятельная кругляшка ~25px (как иконка уровня) рядом с .player-level.
   Не бэйдж на чужой аватарке - это отдельная клик-цель.
   Клик → showItemImagePopup(clan_logo_url_full, clan_name, 0) - попап с
   увеличенным лого и названием клана. Если у игрока нет клана - span пуст
   (display:none через :empty).
   ============================================================================ */
.clan-inline-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.clan-inline-icon:empty {
    /* Пустой контейнер - не занимает места (нет клана у игрока). */
    display: none;
}
.clan-inline-icon img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    background-color: #1a1a1a;
    /* Лёгкий обвод чтобы кружок был виден на любом фоне */
    border: 1px solid #444;
}
.clan-inline-icon img:active {
    transform: scale(0.92);
}

/* ============================================================================
   Инлайн-кружок клана для HTML-шаблонов (тур-топ, новость победителей).
   Используется через clanInlineIconHtml() в app.js. Размер задаётся inline
   style (width/height в px) под конкретное место - 16-22px типично.
   ============================================================================ */
.clan-inline-icon-img {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: cover;
    background-color: #1a1a1a;
    border: 1px solid #444;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px; /* небольшой отступ от иконки уровня перед ним */
}
.clan-inline-icon-img:active {
    transform: scale(0.92);
}

/* ============================================================================
   ПОПАП ИНФО О КЛАНЕ (showClanInfoPopup)
   ----------------------------------------------------------------------------
   Содержимое caption: название + строка "Глава: <аватар> Имя" + участники +
   побед/поражений. Использует #item-image-popup-caption, расширяя его новыми
   классами .clan-popup-* (специфика выше итемных дефолтов).
   ============================================================================ */
.clan-popup-name {
    font-size: 18px;
    font-weight: bold;
    color: #ffcc00;
    margin: 0;
    text-align: center;
}
.clan-popup-owner-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: #ccc;
}
.clan-popup-label {
    color: #888;
}
.clan-popup-owner-name {
    color: #fff;
    font-weight: 500;
}
.clan-popup-owner-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #444;
    background: #1a1a1a;
}
.clan-popup-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: #ddd;
}
.clan-popup-stat-row.clan-popup-wl {
    gap: 14px;
}
.clan-popup-icon {
    vertical-align: middle;
}
.clan-popup-loading,
.clan-popup-error {
    color: #888;
    text-align: center;
    padding: 10px;
}
.clan-popup-error { color: #ff6060; }

/* ============================================================================
   Аватар главы клана в Информация → Кланы (.cb-top-owner-avatar)
   и в Ферма → Кланы (.clan-owner img - уже есть базовые стили).
   ============================================================================ */
.cb-top-owner-avatar {
    /* 18px → 27px (1.5×) по просьбе пользователя - аватар главы клана
       был "слишком маленький" в Информация → Топ кланы. Этот же класс
       используется в Ферма → Кланы (loadAllClans), там тоже теперь крупнее. */
    width: 27px;
    height: 27px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 4px;
    border: 1px solid #444;
    background: #1a1a1a;
}
/* Подпись "Глава:" перед аватаркой в Ферма → Кланы. Светло-серая, чтобы
   не доминировать в строке - аватар и имя главы выделяются. */
.clan-owner-label {
    color: #888;
    font-size: 13px;
}

/* ============================================================================
   МАРКЕТ — стили (см. market.php / app.js market*).
   Визуальный язык согласован с остальной игрой: пилюли-табы как .menu-tab,
   карточки лотов используют .card (ширина 50% в .market-cards), кнопки —
   .card-action (градиент/серый-inactive наследуются). Mobile-first.
   ============================================================================ */
#market {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#market::-webkit-scrollbar { display: none; }

/* Верхние режимы Купить/Продать/История + кнопка правил. */
#market-modes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.market-mode-tab {
    padding: 8px 16px;
    background-color: #333333;
    color: #e0e0e0;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.market-mode-tab:hover { background-color: #444444; }
.market-mode-tab.active {
    background: linear-gradient(45deg, #ff9500, #ffcc00);
    color: #fff;
    box-shadow: 0 4px 8px rgba(255, 149, 0, 0.5);
    transform: scale(1.05);
}
/* Кнопка-«i» правил — круглая, синяя. */
.market-rules-btn {
    width: 34px;
    padding: 8px 0;
    font-weight: 700;
    font-style: italic;
    background-color: #2b6cb0;
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.market-rules-btn:hover { background-color: #3b7cc0; }

/* Разделы (пилюли поменьше). */
#market-sections {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.market-section-tab {
    padding: 6px 12px;
    background-color: #2a2a2a;
    color: #cfcfcf;
    border: 1px solid #444;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
}
.market-section-tab.active {
    background: linear-gradient(45deg, #ff9500, #ffcc00);
    color: #fff;
    border-color: transparent;
}

/* Хлебные крошки внутри группы. */
#market-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: #e0e0e0;
}
.market-back-btn,
.market-sort-btn,
.market-mini-btn {
    padding: 5px 10px;
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px;
}
.market-back-btn:hover,
.market-sort-btn:hover,
.market-mini-btn:hover { background-color: #444; }
.market-bc-title { font-weight: 700; color: #fff; }
.market-bc-spacer { flex: 1 1 auto; }
.market-batch { display: inline-flex; align-items: center; gap: 6px; }

/* Сетка групп лотов. */
.market-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}
.market-group {
    width: calc(33.333% - 6px);
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s;
}
.market-group:active { transform: scale(0.97); }
.market-group-iconwrap {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.market-group-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
}
.market-group-icon-empty {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: #444; color: #aaa; border-radius: 8px; font-size: 28px;
}
.market-group-name {
    margin-top: 4px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 1.15;
    word-break: break-word;
}
.market-group-price {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #ffd700;
    white-space: nowrap;
}
.market-group-price .resource-icon { width: 14px; height: 14px; }

/* Карточки лотов — как в рюкзаке (2 в ряд). */
.market-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}
/* Цена лота рядом с кнопкой. */
.market-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 2px 0 4px;
    color: #ffd700;
    font-weight: 700;
    font-size: 14px;
}
.market-card-price .resource-icon { width: 16px; height: 16px; }
.market-seller {
    margin-top: 4px;
    font-size: 11px;
    color: #bdbdbd;
    text-align: center;
    word-break: break-word;
}
.market-onsale-tag {
    margin-top: 4px;
    font-size: 11px;
    color: #ff9500;
    font-weight: 700;
    text-align: center;
}

/* Ресурсные строки (покупка/продажа). */
.market-res-free {
    color: #cfcfcf;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: center;
}
.market-res-free b { color: #ff9500; }
.market-res-list { display: flex; flex-direction: column; gap: 8px; }
.market-res-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 8px 10px;
}
.market-res-row .resource-icon { width: 36px; height: 36px; flex-shrink: 0; }
.market-res-info { flex: 1 1 auto; min-width: 0; }
.market-res-name { color: #fff; font-weight: 700; font-size: 14px; }
.market-res-sub {
    color: #cfcfcf; font-size: 12px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.market-res-sub .resource-icon { width: 13px; height: 13px; }
.market-res-seller { color: #bdbdbd; font-size: 11px; }
.market-onsale-tag-inline { color: #ff9500; }
.market-res-btn {
    width: auto !important;
    flex-shrink: 0;
    padding: 6px 14px !important;
    font-size: 13px !important;
}

/* История сделок. */
.market-history { display: flex; flex-direction: column; gap: 6px; }
.market-hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 7px 10px;
}
.market-hist-icon { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.market-hist-icon-svg { width: 30px; height: 30px; flex-shrink: 0; color: #cfcfcf; }
.market-hist-info { flex: 1 1 auto; min-width: 0; }
.market-hist-line1 { color: #fff; font-size: 13px; }
.market-hist-line2 {
    color: #bdbdbd; font-size: 12px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.market-hist-line2 .resource-icon { width: 12px; height: 12px; }
.market-hist-role {
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    margin-right: 4px;
}
.market-hist-buy  { background: #2f6f3f; color: #d6ffd6; }
.market-hist-sell { background: #6f2f2f; color: #ffd6d6; }

/* Пустые состояния / загрузка. */
.market-empty, .market-loading {
    text-align: center;
    color: #aaa;
    padding: 24px 10px;
    font-size: 14px;
}

/* Пагинация. */
#market-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding-bottom: 6px;
}
.market-page-btn {
    width: 40px;
    padding: 6px 0;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(45deg, #ff9500, #ffcc00);
    box-shadow: 0 3px 6px rgba(255,149,0,0.4);
}
.market-page-btn.inactive {
    background: #555;
    box-shadow: none;
    cursor: not-allowed;
}
.market-page-num { color: #e0e0e0; min-width: 24px; text-align: center; }

/* Попап ввода чисел маркета (использует общий .confirm-content / .visible-flex). */
#market-input-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
#market-input-popup .confirm-content { max-width: 320px; }
.market-input-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 8px 0;
    text-align: left;
}
.market-input-field label { color: #cfcfcf; font-size: 13px; }
.market-int-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #555;
    background: #1f1f1f;
    color: #fff;
    font-size: 15px;
}
#market-batch-qty.market-int-input { width: 64px; padding: 5px 8px; }
.market-input-hint { color: #9aa0a6; font-size: 12px; margin: 4px 0; line-height: 1.3; }
.market-input-error { color: #ff6b6b; font-size: 13px; min-height: 16px; margin-top: 4px; }

/* Узкие экраны: группы по 3 остаются, карточки по 2 (как в игре). */
@media (max-width: 360px) {
    .market-group-iconwrap, .market-group-icon, .market-group-icon-empty { width: 52px; height: 52px; }
    .market-group-name { font-size: 11px; }
    .market-mode-tab { padding: 7px 12px; }
}


/* Попап правил маркета: затемнение на весь экран, центрированная карточка,
   прокручиваемое тело — текст НЕ вылезает за фон (фикс переполнения). */
#market-rules-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.market-rules-box {
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #1f2733;
    border: 1px solid #33415a;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
.market-rules-header {
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: linear-gradient(45deg, #2b6cb0, #4a90d9);
    flex: 0 0 auto;
}
.market-rules-body {
    padding: 12px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
.market-rules-item {
    position: relative;
    padding: 7px 0 7px 18px;
    color: #dfe6f0;
    font-size: 13.5px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.market-rules-item:last-child { border-bottom: none; }
.market-rules-item::before {
    content: '';
    position: absolute;
    left: 3px; top: 13px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff9500;
}
.market-rules-item b { color: #ffd166; }
.market-rules-ok {
    flex: 0 0 auto;
    margin: 12px;
    padding: 10px;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(45deg, #ff9500, #ffcc00);
    box-shadow: 0 4px 8px rgba(255,149,0,0.5);
}

/* ============================================================================
   ЛОКАЛИЗАЦИЯ — Этап 1
   ============================================================================
   Иконка настроек ⋮ в шапке игрока (перед аватаркой) + попап настроек
   с выбором языка + селектор языка на экране регистрации.
   ============================================================================ */

/* Иконка-кнопка "⋮" (три вертикальные точки, HTML-сущность U+22EE)
   в .stats-left перед .player-avatar. По клику открывает попап настроек.
   Размер сравним с аватаркой (30px), вертикально центрирован за счёт
   align-items на родителе. Цвет приглушённый - не должен спорить с именем
   игрока и иконкой клана. На активном/hover - чуть ярче. */
.settings-icon {
    width: 24px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #b8b8b8;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}
.settings-icon:hover,
.settings-icon:active {
    color: #ff9500;
    background-color: rgba(255, 149, 0, 0.1);
}

/* Селектор языка на экране регистрации.
   Лежит между логотипом и полем ввода имени - в .register-form (gap:10px
   уже задан родителем, поэтому отступы не нужны). Стилизация под общий
   тёмный шаблон формы регистрации (#1c1c1c фон, #333 граница). */
#register-lang-select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #1c1c1c;
    color: #e0e0e0;
    border: 1px solid #333333;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    text-align: center;
    /* Стандартный нативный <select> на тёмном фоне выглядит ОК, не отключаем
       appearance: каждый WebView (iOS/Android/desktop) рисует свой контрол.
       На клике откроется системная карусель/выпадайка - привычное поведение. */
}
#register-lang-select:focus {
    outline: none;
    border-color: #ff9500;
}

/* Попап настроек. Структурно копирует #error-popup / #confirm-popup -
   fixed-фон на весь экран + центрированный контейнер. z-index 1000
   (как у других попапов). */
#settings-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
#settings-popup.hidden {
    display: none !important;
}

.settings-content {
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background-color: #222222;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Заголовок попапа с крестиком закрытия в углу. */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333333;
}
.settings-title {
    font-size: 18px;
    font-weight: bold;
    color: #e0e0e0;
}
.settings-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #b8b8b8;
    cursor: pointer;
    user-select: none;
    border-radius: 50%;
    transition: color 0.15s, background-color 0.15s;
}
.settings-close:hover,
.settings-close:active {
    color: #ff5555;
    background-color: rgba(255, 85, 85, 0.1);
}

/* Группа настроек: подпись + контент. По мере добавления новых настроек
   (звук, уведомления и т.п.) - каждая будет своим .settings-group. */
.settings-group {
    margin-bottom: 15px;
}
.settings-group-label {
    display: block;
    font-size: 14px;
    color: #aaaaaa;
    margin-bottom: 8px;
}

/* Список языков в попапе настроек - вертикальный список кнопок-радио.
   Активный язык - подсвечен оранжевым. */
.settings-lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-lang-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    background-color: #1c1c1c;
    color: #e0e0e0;
    border: 1px solid #333333;
    border-radius: 8px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
}
.settings-lang-btn:hover {
    border-color: #ff9500;
}
.settings-lang-btn.active {
    background-color: #ff9500;
    color: #ffffff;
    border-color: #ff9500;
    font-weight: bold;
}