/* ==========================================================================
🎨 ЦВЕТОВАЯ ПАЛИТРА ОРГАНИЗАЦИИ WTF (CSS-ПЕРЕМЕННЫЕ)
========================================================================== */
:root {
/* Основные фоны приложения */
--bg-pc: #050210; /* Самый темный черный фон на ПК вокруг телефона */
--bg-app: #0c0a12; /* Глубокий темно-фиолетовый, почти черный фон самого приложения */
--bg-panel: #141122; /* Темно-фиолетовый фон для панелей: шапки, футера и карточек */
--bg-main: #0F0722;

/* Цвета для рамок и границ */
--border-color: #261f3e; /* Фиолетовая приглушенная рамка для разделения блоков */
--border-neon: #4c3a85; /* Яркая неоновая фиолетовая рамка для киберспортивного объема */

/* Фирменные цвета для шрифтов и кнопок */
--color-text-main: #F0E6FF; /* Основной белый цвет для всех главных надписей */
--color-text-muted: #9B7DD4;/* Приглушенный фиолетово-серый цвет для неактивного текста */

--color-accent: #B366FF; /* Фирменный золотой / темно-оранжевый цвет для баланса и активного меню */
--color-accent-hover: #9B4FE6; /* Цвет золотого акцента при наведении мышки или тапе */

--color-money: #FFB800; /* Насыщенный зеленый цвет для призовых фондов и денег */
--color-predict: #FF4F8B; /* Огненно-рыжий цвет для интерактивных прогнозов */
--color-predict-hover: #E63A75; /* Цвет кнопки прогнозов при наведении */

--color-shop-title: #eaeaea; /* Цвет описания карточки в магазине */
}

/* ==========================================================================
1. ОБНУЛЕНИЕ СТИЛЕЙ И БАЗОВЫЕ НАСТРОЙКИ
========================================================================== */

/* Звёздочка означает «применить ко всем тегам на странице» */
* {
margin: 0; /* Убираем стандартные внешние отступы, которые ставит браузер */
padding: 0; /* Убираем стандартные внутренние отступы браузера */
box-sizing: border-box; /* Рамки и отступы теперь входят в размер элемента, а не раздувают его */
}

/* Настройки для главных контейнеров, где лежит весь сайт */
html, body {
height: 100%; /* Растягиваем страницу на 100% высоты экрана смартфона или монитора */
background-color: var(--bg-pc); /* Заливаем фон вокруг телефона самым темным черным цветом */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Современный и читаемый шрифт */
color: var(--color-text-main); /* По умолчанию весь текст в нашей лиге будет белым */
overflow: hidden; /* Жестко запрещаем общий скролл страницы, чтобы приложение не дергалось */
}

/* ============================================================================
1.5. Система экранов (управляется JS)
=============================================================================== */

/* Обертка вокруг всех экранов */
.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Каждый экран по умолчанию */
.screen {
    display: none;
}

/* Только активные экраны */
.screen.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex: 1; /* Растягивает на все место */
    overflow-y: auto; /* скролл елси много контента */
    padding: 16px;
}

/* ==========================================================================
2. ГЛАВНЫЙ КОНТЕЙНЕР ПРИЛОЖЕНИЯ
========================================================================== */

/* Наш виртуальный мобильный телефон на экране компьютера */
.app-container {
max-width: 420px; /* На ПК приложение не растянется шире обычного экрана смартфона */
width: 100%; /* На реальном телефоне приложение займет ровно 100% ширины */
height: 100%; /* Приложение займет всю высоту мобильного дисплея */
margin: 0 auto; /* Магия: идеально выравнивает контейнер по центру монитора ПК */
background-color: var(--bg-main); /* Задаем глубокий темно-фиолетовый фон приложения */
display: flex; /* Включаем Flexbox для управления внутренними крупными blocks */
flex-direction: column; /* Элементы внутри строятся вертикально: Шапка ➡️ Контент ➡️ Меню */
position: relative; /* Позволяет позиционировать элементы абсолютно внутри этого экрана */
border-left: 1px solid var(--border-color); /* Тонкая левая фиолетовая граница для красоты на ПК */
border-right: 1px solid var(--border-color); /* Тонкая правая фиолетовая граница для красоты на ПК */
}

/* ==========================================================================
3. ВЕРХНЯЯ ЧАСТЬ (HEADER)
========================================================================== */

/* Сама верхняя панель шапки */
#header {
width: 100%; /* Растягиваем шапку на всю ширину мобильного экрана */
height: 60px; /* Жестко фиксируем высоту верхней панели в пикселях */
background-color: var(--bg-panel); /* Делаем фон шапки чуть светлее основного фона приложения */
display: flex; /* Включаем Flexbox, чтобы выстроить элементы в горизонтальный ряд */
align-items: center; /* Идеально выравниваем аватарку, ник и баланс по центру вертикали */
justify-content: space-between; /* Магия: инфо игрока прижимает к левому краю, а баланс — к правому */
padding: 0 16px; /* Внутренние боковые отступы, чтобы элементы не липли к краям дисплея */
border-bottom: 1px solid var(--border-color); /* Тонкая полоска снизу шапки, отделяющая её от контента */
}

/* Блок, объединяющий круглую аватарку и никнейм */
.user-info {
display: flex; /* Включаем Flexbox, чтобы аватарка с волком и ник встали в один ряд */
align-items: center; /* Выравниваем аватарку и ник ровно по центру относительно друг друга */
gap: 12px; /* Жесткий зазор в 12 пикселей между авой и текстом никнейма */
}

/* Круглая рамка для аватарки организации с волком */
#ava {
width: 36px; /* Ширина аватарки */
height: 36px; /* Высота аватарки */
border: 2px solid var(--color-accent); /* Наша фирменная оранжево-желтая рамка вокруг аватарки */
border-radius: 50%; /* Скругляет квадратную картинку на 50%, превращая её в идеальный круг */
background-color: #221f33; /* Временный темно-фиолетовый фон, пока не подгрузился аватар */
}

/* Текст никнейма игрока */
.username {
font-weight: 600; /* Делаем шрифт текста полужирным для читаемости */
font-size: 15px; /* Размер букв никнейма на экране */
}

/* Овальная плашка с балансом WTF-коинов */
.balance {
background: #1c1830; /* Собственный темно-фиолетовый фон для плашки баланса */
padding: 6px 12px; /* Внутренние отступы: 6px сверху/снизу и 12px справа/слева */
border-radius: 20px; /* Закругляем углы плашки на 20px, делая её аккуратной и овальной */
font-size: 14px; /* Размер шрифта для цифр баланса */
font-weight: bold; /* Делаем текст баланса максимально жирным */
color: var(--color-text-main); /* Баланс ярко горит нашим фирменным золотым цветом */
}

/* ==========================================================================
4. ЗОНА ОСНОВНОГО КОНТЕНТА (MAIN)
========================================================================== */

/* Стили перенесены в 1.5 */

/* ==========================================================================
5. НИЖНЕЕ МЕНЮ НАВИГАЦИИ (FOOTER / NAV)
========================================================================== */

/* Общая нижняя панель меню */
#footer {
width: 100%; /* Растягиваем нижнее меню на всю ширину мобильного экрана */
height: 65px; /* Жестко фиксируем высоту нижнего меню в пикселях */
background-color: var(--bg-panel); /* Фон меню такой же, как у шапки — темно-фиолетовый */
border-top: 1px solid var(--border-color); /* Тонкая разделительная линия над меню */
display: grid; /* Включаем Flexbox, чтобы выстроить кнопки в горизонтальный ряд */
grid-template-columns: repeat(5, 1fr);
align-items: center; /* Выравниваем все кнопки меню ровно по центру вертикали */
gap: 8px; /* Расстояние (зазор) в 8 пикселей между кнопками вкладок */
padding: 0 8px; /* Небольшие отступы справа и слева внутри самого футера */
}

/* Стили для каждой отдельной кнопки-вкладки в меню */
.nav-item {
display: inline-flex; /* Включаем гибкий контекст для эмодзи и текста внутри кнопки */
flex-direction: column; /* Иконка сверху, текст снизу */
align-items: center; /* Центрируем эмодзи и текст внутри кнопки по вертикали */
justify-content: center; /* Центрируем эмодзи и текст внутри кнопки по горизонтали */
gap: 4px; 
padding: 8px 4px; /* Внутренние объемные отступы кнопки: 10px верх/низ, 16px лево/право */
background: #1c1830; /* Темный фиолетово-серый фон для обычной неактивной кнопки */
border-radius: 12px; /* Красивые скругленные уголки у кнопок меню */
font-size: 11px; /* Размер шрифта текста на кнопках */
font-weight: 600; /* Средняя жирность шрифта для аккуратности */
letter-spacing: 0.5px; /* легкий разряд между буквами */
cursor: pointer; /* При наведении мышки курсор превратится в палец (как на ссылку) на ПК */
color: var(--color-accent); /* Серый, приглушенный цвет текста для неактивных вкладок */
transition: all 0.2s ease; /* Плавный переход: изменения стиля кнопки произойдут мягко за 0.2 секунды */
border: 1px solid var(--border-color);
overflow: hidden;
}

/* Стиль той кнопки меню, на которой игрок находится прямо сейчас */
.nav-item.active {
background: var(--color-accent); /* Активная кнопка загорается фирменным оранжево-желтым фоном */
color: #000; /* Текст активной кнопки становится черным для идеального контраста на желтом */
font-weight: bold; /* Текст активной кнопки становится очень жирным */
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* иконка не сжимается, если места мало */
}

/* ==========================================================================
6. КАРТОЧКА ТУРНИРА (WTF LEAGUE)
========================================================================== */

/* Первый баннер лиги с призовым фондом */
.tournament-card {
width: 100%; /* Карточка растягивается на всю ширину центральной зоны контента */
height: 160px; /* Жестко задаем высоту баннера лиги */
/* Фирменный благородный градиент от темно-фиолетового к глубокому черному */
background: linear-gradient(135deg, #1b132e, #08060c);
padding: 16px; /* Внутренний отступ: контент внутри карточки отступит от её краев на 16px */
border-radius: 16px; /* Красивые скругленные углы самого баннера лиги */
border: 1px solid var(--border-neon); /* Наша яркая неоновая фиолетовая рамка лиги для объема */
display: flex; /* Включаем Flexbox внутри карточки */
flex-direction: column; /* Элементы внутри строятся вертикально друг под другом */
justify-content: space-between; /* Расталкивает контент по краям: шапку карточки вверх, кнопку вниз */
}

/* Верхняя строка внутри карточки лиги */
.card-header {
display: flex;
justify-content: space-between; /* Номер сезона улетает влево, сумма денег — вправо */
align-items: center; /* Выравнивает их ровно по центру относительно друг друга */
}

/* Полупрозрачная плашка с номером сезона */
.league-tag {
background: rgba(255, 153, 0, 0.1); /* 10% прозрачности нашего фирменного оранжевого цвета */
color: var(--color-accent); /* Текст горит фирменным оранжево-желтым цветом */
padding: 4px 8px; /* Небольшие внутренние отступы плашки */
border-radius: 6px; /* Слегка скругляем уголки плашки сезона */
font-size: 12px;
font-weight: bold; /* Делаем текст плашки жирным */
}

/* Текст призового фонда лиги */
.prize-pool {
font-weight: bold;
color: var(--color-money); /* Насыщенный зеленый цвет денег, который отлично сочетается с фиолетовым */
font-size: 16px;
}

/* Крупный заголовок внутри карточки лиги */
.tournament-title {
font-size: 18px;
font-weight: bold;
margin-top: 4px; /* Небольшой зазор сверху, чтобы заголовок не лип к номеру сезона */
}

/* Желтая кнопка «Участвовать» */
.register-btn {
width: 100%; /* Растягиваем кнопку на всю доступную ширину баннера */
background: var(--color-accent); /* Фирменный оранжево-желтый фон кнопки */
color: #000; /* Текст кнопки делаем черным для лучшей читаемости */
border: none; /* Полностью убираем стандартную серую рамку кнопки браузера */
padding: 10px; /* Делаем кнопку объемной и удобной для нажатия пальцем на смартфоне */
border-radius: 10px; /* Скругляем углы кнопки */
font-size: 14px;
font-weight: bold; /* Делаем текст кнопки очень жирным */
cursor: pointer; /* На ПК превращает курсор мышки в палец при наведении */
transition: background 0.2s ease; /* Мягкое и плавное изменение цвета кнопки за 0.2 секунды */
}

/* Что происходит с желтой кнопкой при наведении мышки или тапе */
.register-btn:hover {
background: var(--color-accent-hover); /* Желтый цвет плавно становится чуть темнее и глубже */
}

/* ==========================================================================
7. БАННЕР ИНТЕРАКТИВНЫХ ПРОГНОЗОВ
========================================================================== */

/* Второй баннер прогнозов в нашей вертикальной ленте */
.prediction-card {
width: 100%;
height: 160px; /* Сохраняем высоту в 160px для идеальной симметрии Главного экрана */
/* Контрастный темно-серый/черный градиент, чтобы визуально разбавить фиолетовую тему */
background: linear-gradient(135deg, #121016, #060508);
padding: 16px; /* Внутренний отступ от краев карточки */
border-radius: 16px; /* Скругление углов баннера */
border: 1px solid var(--border-color); /* Приглушенная фиолетовая рамка, чтобы карточка не кричала */
display: flex; /* Включаем Flexbox внутри карточки прогнозов */
flex-direction: column; /* Элементы строились строго вертикально друг под другом */
justify-content: space-between; /* Распределяем элементы по высоте карточки */
}

/* Шапка карточки прогнозов */
.predict-header {
display: flex;
justify-content: space-between; /* Название фичи улетает влево, награда — вправо */
align-items: center; /* Выравнивание по центру горизонтали */
}

/* Название карточки прогнозов */
.predict-title {
font-weight: bold;
font-size: 14px;
color: var(--color-text-muted); /* Фирменный приглушенный фиолетово-серый текст */
}

/* Плашка с наградой в WTF-коинах */
.predict-coin-badge {
background: rgba(255, 85, 0, 0.1); /* 10% прозрачности нашего фирменного огненно-рыжего цвета */
color: var(--color-predict); /* Текст горит сочным огненно-рыжим цветом */
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: bold;
}

/* Блок с названиями команд матча */
.match-preview {
display: flex;
align-items: center;
justify-content: center; /* Центрируем превью матча ровно по горизонтали */
gap: 12px; /* Расстояние между названиями клубов и плашкой VS */
margin: 4px 0; /* Небольшие внешние отступы сверху и снизу */
}

/* Шрифты для названий команд (Navi, Zeta) */
.match-team-name {
font-size: 16px;
font-weight: 600; /* Полужирный текст для названий команд */
}

/* Маленькая серая плашка со словом VS по центру */
.vs {
font-size: 12px;
color: var(--color-text-muted); /* Текст VS делаем приглушенным фиолетово-серым */
font-weight: bold;
background: #181524; /* Темная подложка под буквы VS */
padding: 2px 6px; /* Внутренние отступы плашки */
border-radius: 4px; /* Закругляем углы плашки */
}

/* Огненно-оранжевая кнопка прогноза */
.predict-btn {
width: 100%;
background: var(--color-predict); /* Заливаем кнопку нашим фирменным огненно-рыжим цветом */
color: #fff; /* Текст внутри кнопки делаем белым для контраста */
border: none; /* Убираем рамку браузера */
padding: 10px; /* Сделай кнопку объемной для тапов */
border-radius: 10px; /* Скругление углов кнопки */
font-weight: bold; /* Очень жирный текст на кнопке */
font-size: 14px;
cursor: pointer; /* Курсор превращается в палец на ПК */
transition: background 0.2s ease; /* Мягкое изменение цвета при наведении за 0.2 секунды */
}

/* Что происходит с кнопкой прогнозов при наведении мышки или тапе */
.predict-btn:hover {
background: var(--color-predict-hover); /* Оранжевый цвет плавно становится чуть темнее и глубже */
}

/* ======================================================
8. БАННЕР WTF-SHOP
========================================================= */

/* Карточка шопа */
.shop-banner-card {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #141122, #08060c);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Шапка карточки магазина */
.shop-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Текст названия магазина */
.shop-title {
    font-weight: bold;
    font-size: 14px;
    color: var(--color-text-main);
}

/* Скидки */
.shop-discount-badge {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-money);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Блок описания товаров */
.shop-content {
    margin: 4px 0;
}

/* Сам текст описания */
.shop-text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4; /* Расстояние между строчка текста для легко чтения */
}

/* Кнопка перехода в магазин */
.shop-btn {
    width: 100%;
    background: transparent; /* Делаем кнопку полностью прозрачной внутри */
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: 9px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Эффект инверсии */
.shop-btn:hover {
    background: var(--color-accent);
    color: #000;
}

/* ==============================================================
9. ЭКРАН ПРОФИЛЯ И КАРТОЧКА ИГРОКА 
=================================================================*/

/* Общий контейнер экрана профиля */
.profile-screen {
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

/* Карточка игрока */
.player-card {
    width: 100%;
    background: linear-gradient(135deg, #141122, #050508);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Контейнер для аватарки бравлера и значка верификации */
.player-avatar-container {
    position: relative;
    width: 64px;
    height: 64px;
}

/* Квадратная аватарка бравлера как в самой игре */
.player-brawl-img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid var(--border-neon);
    background-color: #1c1830; /* Временный фон */
}

/* Зеленый значок верфикации в углу аватарки */
.player-status-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--color-money);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid #0c0a12;
    text-transform: uppercase; /* Делает все буквы заглавными */
}

/* Блок с текстом никнейма и тега */
.player-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-main);
}

.player-tag {font-size: 13px; color: var(--color-text-muted); font-family: 'Courier New', Courier, monospace; letter-spacing: 1px;}

/* ============================================================
10. ПЛИТКИ БАЗОВОЙ СТАТИСТИКИ 
===============================================================*/

/* Общий контейнер сетки, который объединяет все 4 плитки */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Делим экран ровно на 2 колонки одинаковой ширины (1fr - это 1 равная часть) */
    gap: 12px; /* Зазор между плиткаии по вертикали и горизонтали */
    width: 100%;
}

/* Каждая отдельная плитка статистики */
.stat-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Эмодзи занчок внутри */
.stat-icon {
    font-size: 24px;
}

/* Контейнер для текстов внутри плитки */
.stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Цифры кубков, ранг и тд */
.stat-value {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-text-main);
}

/* Подпиь под значениями */
.stat-label {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ===================================================================
11. БЛОК ПРОДВИНУТОЙ АНАЛИТИКИ 
======================================================================*/

/* Общий контейнер, который держит внутри и скрытый текст и замочек сверху */
.premium-analytics-container {
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, #141122, #08060c);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden; /* Чтобы размытый текст не вылезал за скругленные углы карточки */
}

/* Сам блок со статистикой, который будет размыт */
.analytics-blur-block {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    filter: blur(5px); /* Размывает этот блок на 5 пискселей */
    user-select: none; /* Запрещает игроку копировать и выделять заблюренный текст */
    pointer-events: none; /* Запрещает кликать по элементам внутри размытого блока */
}

.analytics-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-accent);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}

/* Строчка внутри аналитики */
.analytics-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-main);
}

.analytics-value {
    font-weight: bold;
}

/* ПЛАШКА С ЗАМКОМ, КОТОРАЯ НАКЛАДЫВАЕТСЯ ПОВЕРХ БЛЮРА */
.analytics-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 10, 18, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

/* Иконка замка */
.lock-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

/* Заголовок плашки блокировки */
.lock-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

/* Мелкое рекламное описание под заголовком */
.lock-text {
    font-size: 11px;
    color: var(--color-text-muted);
    max-width: 280px; /* Чтоб текст красиво переносился на смартфонах на 2-3 строки */
    margin-bottom: 12px;
}

/* Кнопка покупки аналитики */
.unlock-btn {
    background: var(--color-accent);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Эффект при наведении на кнопку разблокировки */
.unlock-btn:hover {
    background: var(--color-accent-hover);
}

/* ================================================================================
12. ЭКРАН КОМАНДЫ
=================================================================================== */

/* Общий контейнер экрана команды */
.team-screen {
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

/* Карточка-визитка Команды */
.team-card {
    width: 100%;
    background: linear-gradient(135deg, #1b132e, #050508);
    border: 1px solid var(--border-neon);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Контейнер для лого */
.team-logo-container {
    width: 74px;
    height: 74px;
}

/* Логотип организации */
.team-img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 2px solid var(--color-accent);
    background-color: #141122; /* Временный фон подложки */
}

/* Блокс с текстовой информацией о команде */
.team-info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Название команды */
.team-club-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text-main);
}

/* Строка с никнеймом лидера */
.team-cap {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Плашка с дивизионом: Элементы выстраиваются ВЕРТЕКАЛЬНО */
.team-division-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255, 153, 0, 0.05);
    padding: 6px 12px;
    border-radius: 8px;
    margin-top: 4px;
    width: fit-content;
    border: 1px solid rgba(255, 153, 0, 0.1);
}

/* Настройки для картинки дивизиона */
.division-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain; /* Картинка идеально впишется в размеры без искажений и растягиваний */
}

/* Текст под картинкой дивизона */
.division-text {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-accent);
    text-transform: uppercase; /* Все буквы автоматически заглавные */
    letter-spacing: 0.5px; /* Расстояние между буквами */
}

/* =================================================================
13. СПИСОК УЧАСТНИКОВ КООМАНДЫ (ROSTER) 
====================================================================*/

/* Обший контейнер для всего списка игроков команды */
.team-roster {
    width: 100%;
    background: linear-gradient(135deg, #141122, #08060c);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Заголовок блока ростера */
.roster-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

/* Строка каждого отдельного игрока */
.roster-item {
    width: 100%;
    background: #1c1830;
    border: 1px solid transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    padding: 8px 12px;
}

/* Особый стиль для плашки Капитана, чтобы выделить лидера */
.roster-item.player-cap {
    border: 1px solid rgba(255, 153, 0, 0.2);
    background: linear-gradient(90deg, #1c1830, #221a2e);
}

/* Левая часть: Объединяет бейдж роли и никнейм */
.roster-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Базовый стиль для маленьких бейджей роли (cap / pro) */
.role-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Бейдж для капитана */
.cap-badge {
    background: rgba(255, 153, 0, 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(255, 153, 0, 0.2);
}

/* Бейдж для обычных игроков */
.player-badge {
    background: rgba(76, 58, 133, 0.2);
    color: #9d8ecf;
    border: 1px solid rgba(76, 58, 133, 0.3);
}

/* Текст никнейма игрока */
.roster-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
}

/* Правая часть: текстовое название роли в трио (Саппорт, Драфтер) */
.roster-role-text {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Контейнер для правого блока (объединяет текст роли и крестик удаления) */
.roster-right-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Кнопка исключения игрока */
.kick-btn {
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1; /* Чтобы крестик стоял ровно по центру */
    transition: color 0.2s ease;
}

/* Эффект при наведении */
.kick-btn:hover {
    color: #ef4444;
}

/* Кнопка пригласить тиммейта */
.invite-btn {
    width: 100%;
    background: transparent;
    color: var(--color-accent);
    border: 1px dashed var(--color-accent);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
}

/* Эффект кнопки */
.invite-btn:hover {
    background: rgba(255, 153, 0, 0.1);
    border-style: solid;
}

/* ============================================================================
14. БЛОК КОМАНДНОЙ СТАТИСТИКИ
=============================================================================== */

/* Общий контейнер */
.team-analytics-container {
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, #141122, #08060c);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden; 
    min-height: 150px; /* Минимальная высота блока, чтобы он не сжимался слишком сильно */
}

/* Блок со статистикой */
.team-analytics-blur {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.team-analytics-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-accent);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}

/* Строчка внутри аналитики */
.team-analytics-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-main);
}

.team-analytics-value {
    font-weight: bold;
}

/* Плашка с замком */
.team-analytics-lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 10, 18, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

/* Иконка замка */
.team-lock-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

/* Заголовок плашки блокировки */
.team-lock-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

/* Описание приемущества под заголовком */
.team-lock-text {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

/* Кнопка покупки командной аналитики */
.team-unlock-btn {
    background: var(--color-accent);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Эффект при наведении на кнопку разблокировки */
.team-unlock-btn:hover {
    background: var(--color-accent-hover);
}

/* ================================================================
15. ЭКРАН МАГАЗИНА WTF-SHOP И БЛОК БАЛАНСА
=================================================================== */

/* Общий контейнер экрана магазина */
.shop-screen {
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

/* Крупная премиальная карточка баланса в магазине */
.shop-balance-card {
    width: 100%;
    background: linear-gradient(135deg, #1e153a, #050508);
    border: 1px solid var(--border-neon);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(76, 58, 133, 0.15); /* Мягкое фиолетовое свечение под карточкой */
}

/* Левая текстовая часть карточки */
.shop-balance-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Мелкая фиолетово-серая подпись над цифрами */
.shop-balance-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-muted);
}

/* Огромные золотые цифры баланса */
.shop-balance-value {
    font-size: 26px;
    font-weight: bold;
    color: var(--color-text-main);
}

/* Маленькая кодерская приписка WTF после цифр */
.shop-currency-tag {
    font-size: 14px;
    color: var(--color-text-main);
    font-family: 'Courier New', Courier, monospace;
    font-weight: normal;
    margin-left: 4px;
}

/* Правая часть: круглая мини-эмблема с волком */
.shop-balance-logo {
    width: 46px;
    height: 46px;
}

.shop-mini-wolf {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    background-color: #141122;
}

/* ===========================================================================
16. ВИТРИНА ТОВАРОВ КАСТОМИЗАЦИИ (CSS GRID 2x3)
============================================================================== */

/* Сетка для отображения товаров в две колнки */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Ровно 2 колонки одинаковой ширины */
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

/* Каждая отдельная карточка товара */
.shop-item {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* Окошко превью эффекта внутри карточки */
.item-preview-box {
    width: 100%;
    height: 70px;
    background: #0c0a12;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Стили заголовков и описаний товаров */
.item-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.item-desc {
    font-size: 10px;
    color: var(--color-shop-title);
    line-height: 1.3;
    margin-bottom: 12px;
    flex-grow: 1; /* Позволяет описаниям разной длины ровно растягивать карточки */
}

/* Кнопка покупки товара за коины лиги */
.buy-btn {
    width: 100%;
    background: #1c1830;
    color: var(--color-text-main);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-btn:hover {
    background: var(--color-accent);
    color: #000;
}

/* ============================================================================
СТИЛИ РЕДКОСТЕЙ (ЗОЛОТОЙ/ПЛАТИНА/РАДУЖНЫЙ)
=============================================================================== */

/* Золотые эффекты */
.text-gold {
    color: #ffb700;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 183, 0, 0.4);
}

.border-gold {
    width: 40px;
    height: 40px;
    border: 2px solid #ffb700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255, 183, 0, 0.4);
}

/* Платиновык эффекты */
.text-platinum {
    color: #e2e8f0;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(226, 232, 240, 0.4);
}

.border-platinum {
    width: 40px;
    height: 40px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(226, 232, 240, 0.4);
}

/* Радужные эффекты */
.text-rainbow {
    background: linear-gradient(90deg, #ff0055, #00ff55, #0055ff, #ff0055);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    animation: rainbow-shift 4s linear infinite;
}

.border-rainbow {
    width: 40px;
    height: 40px;
    border: 2px solid #ff0055;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: rainbow-shift 4s linear infinite;
}

/* Эффект анимации для плавного перелива градиента */
@keyframes rainbow-shift {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg); /* начальный цвет рамки */
    }
    100% {
        background-position: 100% 50%;
        filter: hue-rotate(360deg); /* Круговой перелив рамки всеми цветами */
    }
}

/* ===============================================
ЛАКИ БОКСЫ
================================================== */

.shop-item.lucky-box {
    border: 1px solid #00ff55;
    background: linear-gradient(135deg, #0f5234, #051a11);
}

.buy-btn.lucky-box-btn {
    background: #0d3d28;
    border: 1px solid #00ff55;
    color: #fff;
}

.buy-btn.lucky-box-btn:hover {
    background: #0b3322;  
}

.shop-item.premium-lbox {
    border: 1px solid #ef0a66;
    background: linear-gradient(135deg, #740e37, #3b0219);
}

.buy-btn.premium-lbox-btn {
    background: #540625;
    border: 1px solid #ef0a66;
    color: #fff;
}

.buy-btn.premium-lbox-btn:hover {
    background: #470721;
}

/* ===================================================================
17. ОТДЕЛ СО ЗВЕЗДАМИ
====================================================================== */

/* Стили для мягкого видимого разделителя магазинов */
.shop-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 20px 0 8px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-neon), transparent);
}

/* Текст внутри разделителя */
.divider-text {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Новая сетка 2на2 для товаров за звезды */
.shop-grid-stars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

/* Иконка-эмодзи внутри превью премиум-товаров */
.premium-badge-icon {
    font-size: 22px;
    font-weight: bold;
}

/* Кнопки покупки за звезды */
.buy-btn.star-btn {
    color: #60a5fa;
    border: 1px solid #1e3a8a;
}

.buy-btn.star-btn:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

/* Стиль для комбо карточки */
.shop-item.combo-item {
    border: 1px solid #ff0055;
    background: linear-gradient(135deg, #1e1112, #0c0a12);
    box-shadow: 0 0 10px rgba(255, 85, 0, 0.1);
}

.item-preview-box.combo-preview {
    background: linear-gradient(135deg, #ff5500, #ff9900);
}

.premium-badge-icon.combo-icon {
    color: #000;
    font-size: 11px;
}

/* Кнопка для комбо пакета */
.buy-btn.combo-btn {
    background: #ff5500;
    color: #fff;
    border: none;
}

.buy-btn.combo-btn:hover {
    background: #cc4400;
    box-shadow: 0 0 12px rgba(255, 85, 0, 0.4);
}

/* ========================================================
17.5. Общий блок для экранов вкладки турниров
=========================================================== */

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ======================================================
18. ЭКРАН ТУРНИРОВ И ВЕРХНЕЕ МЕНЮ ВКЛАДОК
========================================================= */

/* Общий контейнер экрана турниров */
.tournaments-screen {
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

/* Панель с четырьмя кнопками переключателей */
.tournaments-tabs {
    display: flex;
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

/* Каждая отдельная кнопка переключателя табов */
.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Стиль активной вкладки */
.tab-btn.active {
    background: #1c1830;
    color: var(--color-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Контейнер для содержимого вкладок */
.tabs-content {
    width: 100%;
}

/* STYLE CARDS */

/* Базовый каркас карточки лиги */
.tour-card {
    width: 100%;
    background: linear-gradient(135deg, #141122, #050508);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Для разделения уровня турнира */
.tour-card.wtfl {
    border: 1px solid var(--border-neon);
}

.tour-card.wtfs {
    border: 1px solid #22c55e;
}

/* Шапка внутри карточки */
.tour-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-wtfl {
    background: rgba(76, 58, 133, 0.2);
    color: #9d8ecf;
    border: 1px solid rgba(76, 58, 133, 0.4);
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.data-wtfs {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* текст пф */
.prize-text {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
}

/* Заголовок и описание */
.tour-card-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-main);
}

.tour-card-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Кнопки действия регистрации */
.action-btn-wtfs, .action-btn-wtfl {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.action-btn-wtfl {
    background: #4c3a85;
    color: #fff;
}
.action-btn-wtfl:hover {
    background: #42346f;
}

.action-btn-wtfs {
    background: #22c55e;
    color: #fff;
}

.action-btn-wtfs:hover {
    background: #16a34a;
}

/* ==========================================================
19. ВКЛАДКА 2: РЕЗУЛЬТАТЫ ПРОШЕДШИХ ТУРНИРОВ
=============================================================*/

.results-selection-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Карточка прошедшего турнира */
.history-tour-card {
    width: 100%;
    background: linear-gradient(135deg, #141122, #050508);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Шапка архивной карточки */
.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.history-tour-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-main);
}

.history-tour-title .season-text {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: normal;
}

/* Призовой фонд */
.history-prize {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-money);
    background: rgba(34, 197, 94, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Список призеров */
.podium-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Строка одного призера */
.podium-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1830;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
}

/* Маленькие компактные бейджи мест */
.place-badge {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Название команды-призера */
.podium-team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
}

.podium-item.place-1 {
    border: 1px solid rgba(255, 153, 0, 0.3);
    background: linear-gradient(90deg,  #1c1830, #2b1f11);
}

.podium-item.place-1 .podium-team-name {
    color: var(--color-accent);
    font-size: 14px;
    font-weight: bold;
}

/* ===========================================================
20. ВКЛАДКА 3: ПРОГНОЗЫ
============================================================== */

.predict-selection-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Картчока одного матча для прогнозов */
.predict-match-card {
    width: 100%;
    background: linear-gradient(135deg, #141122, #050508);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Верхний горизонтальный ряд команд */
.predict-teams-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.p-team-left, .p-team-right {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-text-main);
    flex: 1;
}
.p-team-left { text-align: left; }
.p-team-right { text-align: right; }

.p-vs {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-muted);
    background: #0c0a12;
    padding: 12px 8px;
    border-radius: 4px;
}

/* Контейнер для полоски процентов ставок */
.vote-progress-container {
    width: 100%;
    height: 18px;
    background: #1c1830;
    border-radius: 9px;
    display: flex;
    overflow: hidden;
    border: 1px solid #0c0a12;
}

/* Общий стиль половинок полосы */
.vote-bar {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    transition: width 0.3s ease;
}

/* Левая команда фиолетовым */
.vote-bar.bar-left {
    background: var(--border-neon);
    padding-left: 10px;
    justify-content: flex-start;
}

/* Правая кнопка горит огненно-режим */
.vote-bar.bar-right {
    background: var(--color-predict);
    padding-right: 10px;
    justify-content: flex-end;
}

/* Ряд нижних кнопок ставки */
.predict-choice-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Общий стиль кнопок выбора */
.vote-btn {
    flex: 1;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Контурная фиолетовая кнопка для левой команды */
.vote-btn.btn-left {
    color: #9d8ecf;
    border: 1px solid var(--border-neon);
}
.vote-btn.btn-left:hover {
    background: var(--border-neon);
    color: #fff;
}

/* Контурна рыжая кнопка для правой команды */
.vote-btn.btn-right {
    color: var(--color-predict);
    border: 1px solid var(--color-predict);
}

.vote-btn.btn-right:hover {
    background: var(--color-predict);
    color: #fff;
}

/* ====================================================================
21. ВКЛАДКА 4: ИГРОВОЕ ЛОББИ И ЧАТ КАПИТАНОВ
======================================================================= */

/* Карточка таймера и кода */
.lobby-match-card {
    width: 100%;
    background: linear-gradient(135deg, #141122, #050508);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Блок таймера */
.lobby-timer-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 85, 0, 0.05);
    border: 1px solid rgba(255, 85, 0, 0.1);
    padding: 10px 12px;
    border-radius: 10px;
}

.lobby-timer-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
}

.lobby-timer-countdown {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-predict);
    font-family: 'Courier New', Courier, monospace;
}

/* Поле вывода кода комнаты */
.lobby-code-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-code-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.lobby-code-input-row {
    display: flex;
    gap: 8px;
}

/* Инпут с кодом лобби */
.lobby-code-value {
    flex: 1;
    background: #0c0a12;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    color: var(--color-accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

/* Кнопка скопировать код */
.copy-code-btn {
    background: var(--color-accent);
    color: #000;
    border: none;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.copy-code-btn:hover { background: var(--color-accent-hover); }

/* Контейнер чата */
.lobby-chat-container {
    width: 100%;
    background: #141122;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lobby-chat-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-muted);
    border-bottom: 1px solid #1c1830;
    padding-bottom: 6px;
}

/* Зона вывода сообщений */
.lobby-chat-messages {
    height: 110px;
    overflow-y: auto; /* Включит скролл, если сообщений станет много */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Одиночное сообщение */
.chat-msg {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 85%;
    line-height: 1.4;
}

/* Сообщение от соперников */
.chat-msg.msg-opponent {
    background: #1c1830;
    color: var(--color-text-main);
    align-self: flex-start;
}

/* Твое собсвенное сообщение */
.chat-msg.msg-own {
    background: #0c0a12;
    color: #cbd5e1;
    align-self: flex-end;
    border: 1px solid var(--border-color);
}

.msg-author {
    font-weight: bold;
    margin-right: 4px;
}

/* Нижняя строка ввода текста в чат */
.lobby-chat-input-row {
    display: flex;
    gap: 8px;
}

.chat-input {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: #000;
    font-size: 12px;
}

.chat-send-btn {
    background: #1c1830;
    color: var(--color-accent);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0px 14px;
    cursor: pointer;
    font-weight: bold;
}
.chat-send-btn:hover {
    background: var(--color-accent);
    color: #000;
}

/* Кнопка заявки на тп */
.report-tp-btn {
    width: 100%;
    background: transparent;
    color: #ef4444;
    border: 1px dashed #ef4444;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.report-tp-btn:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* ==============================================================
22. ЗАГРУЗОЧНЫЙ ЭКРАН
================================================================= */

#splash-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Центрирование по горизонтали */
    width: 100%;
    max-width: 420px; /* Ограничение максимальной ширины */
    z-index: 9999; /* Поверх всего */
    background: var(--bg-main);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Когда js добавит класс 'hidden' - экран исчезнет */
#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.splash-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-accent);
    box-shadow: 0 0 40px rgba(179, 102, 255, 0.5);
    animation: splash-pulse 1.5s ease-in-out infinite;
}

.splash-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.splash-loader {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.splash-loader span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: splash-dot 1.2s ease-in-out infinite;
}

/* Задержка для 2-й и 3-й точек - эффетк волны */
.splash-loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.splash-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes splash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes splash-dot {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-6px); opacity: 1; }
}

/* ======================================================================
23. Модальные окна
========================================================================= */

/* Overlay -темный фон на весь экран приложения */
.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Центрирование по горизонтали */
    width: 100%;
    max-width: 420px;
    z-index: 1000; /* ниже splash (9999), но выше контента */
    background: rgba(5, 2, 16, 0.85); 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;

    /* Скрыта по умолчанию */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Когда js делает модалку активной */
.modal.active {
    opacity: 1;
    visibility: visible;
}

/* Окно контента */
.modal-window {
    width: 100%;
    max-width: 360px;
    background: var(--bg-panel);
    border: 1px solid var(--border-neon);
    border-radius: 16px;
    padding: 20px;
    position: relative;

    /* Планвый "подъезд" снизу */
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

/* При активной модалке окно приподнимается на место */
.modal.active .modal-window {
    transform: translateY(0)
}

/* Кнопка-крестик */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}
.modal-close:hover {
    color: #ef4444;
}

/* Заголовок модалки */
.modal-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 16px;
    text-align: center;
}

/* Матч: две команды с VS по центру */
.modal-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

/* Подсказка под матчем */
.modal-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Ряд кнопок выбора команды */
.modal-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Кнопка подтверждения снизу */
.modal-confirm-btn {
    width: 100%;
    background: var(--color-accent);
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}
.modal-confirm-btn:hover {
    background: var(--color-accent-hover);
}