@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

/* Переменные по умолчанию (Темная тема) */
:root {
    --bg-gradient: linear-gradient(to bottom, #000000 0%, #0b0e14 40%, #2e1a4e 100%);
    --panel-bg: rgba(15, 18, 25, 0.5);
    --accent-color: #6c5ce7;
    --accent-hover: #5849c4;
    --text-main: #f5f6fa;
    --text-dim: #b9bbbe;
    --border-style: 1px solid rgba(255, 255, 255, 0.15);
    --warning: #f1c40f;
    --success: #3ba55c;
    --danger: #ed4245;
}

/* Применяем градиент из переменной */
body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-main);
    transition: background 0.3s ease; /* Плавный переход фона */
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    min-height: 100vh; /* Гарантирует, что градиент растянется на весь экран */
}

/* СЕТКА (LAYOUT) */
.layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 25px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.container, .sidebar, .frame, .modal-content, .login-box, .mapping-form, .logs-window {
    background: var(--panel-bg) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: var(--border-style) !important;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    padding: 25px;
    box-sizing: border-box;
}

.sidebar {
    position: sticky;
    top: 20px;
    width: 320px;
}

/* ШАПКА */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    margin-bottom: 30px;
}

.brand h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 30%, #a29bfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* КНОПКИ */
.btn, .boss-btn, .dkp-main-btn, .tab-btn {
    background: rgba(108, 92, 231, 0.2);
    border: 1px solid rgba(108, 92, 231, 0.4);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 11px;
}

.btn:hover, .boss-btn:hover, .dkp-main-btn:hover {
    transform: translateY(-2px);
    background: rgba(108, 92, 231, 0.4);
    border-color: white;
    box-shadow: 0 5px 15px rgba(108,92,231,0.4);
}

.tab-btn.active {
    background: var(--accent-color);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
}

/* ТАБЛИЦЫ */
.dkp-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow: hidden;
}

.dkp-table th, .dkp-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dkp-table th {
    background: rgba(0,0,0,0.3);
    color: var(--text-dim);
    font-size: 12px;
    text-transform: uppercase;
}

/* КАРТОЧКИ И ЭЛЕМЕНТЫ СПИСКОВ */
.row-card, .log-entry, .map-item, .cd-card, .user-row, .auto-msg-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    transition: 0.2s;
}

.row-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
}

/* ИНПУТЫ */
.inp, .boss-input, select, .login-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    padding: 12px 15px;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
}

.inp:focus, .boss-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(108,92,231,0.2);
}

/* МОДАЛЬНЫЕ ОКНА */
.modal-overlay, .login-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden { display: none !important; }

/* СКРОЛЛБАР */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }

/* СПЕЦИФИЧЕСКИЕ СТИЛИ РУЛЕТКИ */
.stage { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.pointer { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid white; filter: drop-shadow(0 4px 10px black); }

/* ТОСТЫ (УВЕДОМЛЕНИЯ) */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; }
.toast { background: #2f3136; border-left: 4px solid var(--accent-color); padding: 15px 25px; border-radius: 8px; margin-top: 10px; animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Улучшенные теги админов */
.admin-tag {
    background: rgba(108, 92, 231, 0.2);
    border: 1px solid rgba(108, 92, 231, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.admin-tag.me {
    background: rgba(59, 165, 92, 0.2);
    border-color: var(--success);
}

/* Стили переключателя (Switch) */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #4f545c;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px; width: 14px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: var(--danger); }
input:checked + .slider:before { transform: translateX(20px); }

/* Анимация появления контента */
.tab-view {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Контейнер логов */
.log-entry {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 6px 15px;
    margin-bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    font-size: 13px;
    transition: 0.2s;
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
}

/* Колонка: Время */
.log-time {
    color: var(--text-dim);
    width: 90px;
    flex-shrink: 0;
    font-family: monospace;
    font-size: 12px;
}

/* Колонка: Админ */
.log-admin-name {
    color: var(--warning);
    width: 140px;
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

/* Колонка: Тип действия */
.log-action-type {
    width: 160px;
    flex-shrink: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Колонка: Цель (Ник игрока) */
.log-target-nick {
    width: 180px;
    flex-shrink: 0;
    font-weight: bold;
    color: #a29bfe; /* Приятный светло-фиолетовый для ников */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Колонка: Детали (все остальное место) */
.log-details-text {
    color: var(--text-dim);
    flex-grow: 1;
    font-size: 12px;
    opacity: 0.8;
    padding-left: 15px;
}

/* Группировка заявок */
.group-wrapper {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

/* Плавный переход для таймера бэкапа */
#backup-display {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--accent-color);
    font-family: monospace;
}

/* Улучшаем контейнер модального окна */
.modal-content {
    overflow-x: hidden; /* Полностью запрещаем горизонтальный скролл */
    width: 100%;
    max-width: 500px; /* Для ника лучше сделать окно поуже, чем для статов */
}

/* Сетка для характеристик (2х2) */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

/* Сетка для редактирования снаряжения (3 колонки) */
.gear-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.gear-edit-item {
    display: flex;
    flex-direction: column;
}

.gear-edit-item label {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.gear-edit-item input {
    padding: 6px 10px;
    font-size: 12px;
}

/* Исправляем шапку профиля, чтобы время не накладывалось */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    text-align: center;
}

.profile-time {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 4px;
    opacity: 0.7;
}

/* Компактная сетка снаряжения в просмотре профиля (3 колонки) */
.profile-gear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.profile-gear-box {
    font-size: 11px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Глобальное правило, чтобы padding не расширял элементы */
* {
    box-sizing: border-box;
}

/* Фикс для контента модального окна */
.modal-content {
    overflow-x: hidden; /* Полностью запрещаем горизонтальный скролл */
    width: 100%;
    max-width: 500px; /* Для ника лучше сделать окно поуже, чем для статов */
}

/* Фикс для инпутов, чтобы они не вылезали за края */
.inp {
    width: 100% !important;
    display: block;
    margin-right: 0;
    margin-left: 0;
}

/* Контейнер строки ввода КД */
.cooldown-form-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 15px;
}

/* Общий сброс для инпутов внутри этой строки, чтобы они не раздувались */
.cooldown-form-row .inp {
    width: auto !important; /* Отменяем 100% ширину */
    margin: 0 !important;
}

/* 1. Поле выбора игрока */
.select-field {
    flex: 0.7;          /* Занимает 2 части пространства */
    min-width: 180px; /* Чтобы не сжималось слишком сильно */
    height: 42px;
}

/* 2. Поле ввода предмета */
.name-field {
    flex: 2;          /* Занимает тоже 2 части пространства */
    min-width: 180px;
    height: 42px;
}

/* 3. Поле КД в часах (УЗКОЕ) */
.hours-field {
    width: 80px !important; /* Фиксированная узкая ширина */
    flex: 0 0 80px;         /* Запрещаем растягиваться или сжиматься */
    text-align: center;
    height: 42px;
}

/* 4. Кнопка добавить */
.add-btn {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 20px !important;
    background: var(--accent-color) !important;
}

/* Фикс текста внутри Select */
select.select-field {
    padding-left: 10px !important;
    color: white !important;
}

/* Сетка для карточек КД внизу (2 колонки) */
.cooldowns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

/* Фикс для выпадающих списков (чтобы текст был виден) */
select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    padding-right: 40px !important;
}

/* Центровка выпадающего списка */
#member-select {
    display: block;
    margin: 0 auto 20px auto; /* Центрируем и добавляем отступ снизу */
    width: 100%;
    max-width: 450px;
    text-align: center;
}

/* Добавляем отступы в модальном окне редактирования ника */
.nick-edit-container {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между инпутом и кнопкой */
}

/* Исправляем дату в профиле */
.profile-time {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 10px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    display: inline-block; /* Чтобы фон облегал текст */
}

/* Отступ между сеткой шмоток и кнопкой закрыть */
.profile-gear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 25px; /* Увеличиваем отступ снизу, чтобы не касалось кнопки */
}

/* Стили для галочек ролей в DKP */
.role-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
    transition: transform 0.2s;
}

.role-checkbox:hover {
    transform: scale(1.2);
}

/* Зеленый для хила */
.role-healer {
    accent-color: var(--success);
}

/* Золотой для офицера */
.role-officer {
    accent-color: var(--warning);
}

/* Контейнер строки автобота */
.auto-msg-row {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}

/* Сброс ширины для инпутов внутри автобота */
.auto-msg-row .inp {
    width: auto !important;
    margin: 0 !important;
    height: 40px;
}

/* Чекбокс ВКЛ/ВЫКЛ */
.am-toggle {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ID Канала */
.am-chid {
    width: 180px !important;
    flex-shrink: 0;
}

/* Режим (Ежедневно/Одна дата) */
.am-mode {
    width: 130px !important;
    flex-shrink: 0;
    cursor: pointer;
}

/* Время */
.am-time {
    width: 100px !important;
    flex-shrink: 0;
    text-align: center;
}

/* ПОЛЕ СООБЩЕНИЯ (Самое важное - тянется) */
.am-text {
    flex: 1 !important; /* Занимает всё оставшееся место */
    min-width: 200px;
}

/* Кнопки действий */
.auto-msg-row .btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0 !important;
}

/* Центрирование контейнера на странице таблицы */
.container {
    margin-left: auto;
    margin-right: auto;
}

/* Стили для самой таблицы боссов */
.dkp-table {
    margin: 0 auto; /* Центрируем саму таблицу внутри блока */
    width: 100%;
}

/* Центрируем иконки и чекбоксы в ячейках */
.dkp-table td {
    vertical-align: middle;
}

.dkp-table th:nth-child(3), 
.dkp-table th:nth-child(4),
.dkp-table td:nth-child(3), 
.dkp-table td:nth-child(4) {
    text-align: center; /* Центрируем колонки с чекбоксами */
}

/* Немного увеличим размер чекбоксов для удобства */
.role-checkbox, .dkp-table input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Фикс для сцены казино */
.roulette-stage {
    position: relative;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
}

/* Белая стрелка сверху */
.wheel-arrow {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid white;
    filter: drop-shadow(0 5px 15px black);
    z-index: 10;
}

/* Контейнер списка участников внутри сайдбара */
#user-list-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 10px;
    height: 250px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.user-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.user-checkbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.user-checkbox-item input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

/* Контейнер для барабанов слотов */
.slots-wrapper {
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slot-reels-container {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* Сами блоки с никами (барабаны) */
.reel-box {
    width: 160px;
    height: 90px;
    background: rgba(26, 28, 35, 0.9); /* Темный фон как на сайте */
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: white;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(108, 92, 231, 0.2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
    padding: 0 10px;
}

/* Подсветка победителя в слотах */
.reel-box.winner {
    border-color: var(--warning);
    box-shadow: 0 0 25px var(--warning);
    transform: scale(1.05);
}

/* Размытие при вращении */
.blur-text {
    filter: blur(2px);
    opacity: 0.7;
}

/* Контейнер для списка активных ивентов */
#active-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* Карточка активного ивента */
.active-ev-card {
    background: rgba(59, 165, 92, 0.1);
    border: 1px solid var(--success);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    animation: slideIn 0.3s ease-out;
}

.active-ev-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.active-ev-title {
    font-weight: 800;
    color: white;
    font-size: 14px;
    margin: 0;
    flex: 1;
}

.active-ev-timer {
    font-family: monospace;
    color: var(--danger);
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 13px;
}

.active-ev-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

/* Красивый скроллбар для всех блоков и модалок */
#history-list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 6px;
}

#history-list::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#history-list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

#history-list::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--warning);
}

.dkp-table th {
    cursor: pointer;
    user-select: none; /* Чтобы текст не выделялся при частом клике */
}

.dkp-table th:hover {
    color: var(--accent-color); /* Подсветка при наведении */
}

/* Кнопки форматирования */
.btn-tool {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s;
}
.btn-tool:hover { background: var(--accent-color); }

/* Сетка для чекбоксов */
.checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}
.check-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

/* СЕТКА РЕДАКТОРА ОБЪЯВЛЕНИЙ */
.announce-editor-layout {
    display: grid;
    grid-template-columns: 1fr 300px; /* 1 часть для текста, 300px для настроек */
    gap: 30px;
    margin-top: 20px;
}

.field-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-dim);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* Стили для текстовых полей */
.forum-inp {
    width: 100% !important;
    height: 45px;
    margin-bottom: 20px !important;
    font-size: 16px;
    background: rgba(0,0,0,0.4) !important;
}

.forum-area {
    width: 100% !important;
    height: 300px;
    font-family: 'Consolas', monospace;
    font-size: 15px;
    line-height: 1.6;
    background: rgba(0,0,0,0.4) !important;
    resize: vertical;
}

/* Панель настроек справа */
.editor-settings {
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: fit-content;
}

.settings-group {
    margin-bottom: 25px;
}

.settings-title {
    margin-top: 0;
    color: var(--warning);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.btn-send {
    width: 100%;
    height: 60px;
    background: var(--accent-color) !important;
    font-size: 16px !important;
    border-radius: 15px !important;
}

.publish-box small {
    display: block;
    text-align: center;
    color: var(--text-dim);
    font-size: 10px;
    margin-top: 10px;
    line-height: 1.4;
}

/* Адаптивность для узких экранов */
@media (max-width: 1000px) {
    .announce-editor-layout {
        grid-template-columns: 1fr;
    }
    .editor-settings {
        order: -1; /* Настройки будут сверху на мобилах */
    }
}

/* РЕДАКТОР ОБЪЯВЛЕНИЙ (ФОРУМНЫЙ СТИЛЬ) */
.announce-forum-container {
    display: grid;
    grid-template-columns: 1fr 300px; /* Текст слева, настройки справа */
    gap: 25px;
    padding: 10px;
    width: 100%;
}

.announce-main-workarea {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Растягиваем поля на всю ширину */
.ann-full-width {
    width: 100% !important;
    height: 45px;
    font-size: 16px;
    background: rgba(0,0,0,0.4) !important;
}

.ann-textarea {
    width: 100% !important;
    height: 400px; /* Высота как на форуме */
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 15px;
    line-height: 1.5;
    background: rgba(0,0,0,0.4) !important;
    resize: vertical;
}

/* Настройки справа */
.announce-side-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: fit-content;
}

.side-title {
    margin: 0 0 15px 0;
    color: var(--warning);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

.send-massive-btn {
    width: 100%;
    height: 60px;
    background: var(--accent-color) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-top: 20px;
}

/* Специальный класс для скрытия сайдбара, когда открыты объявления */
.layout.full-width-mode {
    grid-template-columns: 1fr !important; /* Убираем колонку 320px */
}

.layout.full-width-mode .sidebar {
    display: none !important; /* Прячем пустой сайдбар */
}

/* Уточняем размеры редактора */
.announce-forum-container {
    display: grid;
    grid-template-columns: 1fr 320px; /* Текст / Настройки */
    gap: 30px;
    width: 100%;
}

.ann-textarea {
    min-height: 450px !important; /* Увеличиваем высоту поля ввода */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Вкладка объявления */
#view-announce {
    width: 100%;
}

/* Растягиваем фрейм внутри объявления */
#view-announce .frame {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; /* Убираем лишние падинги, чтобы сетка редактора сама рулила */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Сама сетка редактора */
.announce-forum-container {
    display: grid;
    grid-template-columns: 1fr 300px; /* Текст / Настройки */
    gap: 20px;
    width: 100%;
    background: var(--panel-bg);
    padding: 25px;
    border-radius: 24px;
    border: var(--border-style);
}

/* Список чекбоксов строго в столбик */
.checkbox-list {
    display: flex;
    flex-direction: column; /* Выстраивает элементы вертикально */
    gap: 14px;              /* Расстояние между строками */
    margin-bottom: 5px;
}

.check-row {
    display: flex;
    align-items: center;    /* Выравнивает чекбокс и текст по центру */
    gap: 12px;              /* Расстояние от чекбокса до текста */
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    transition: 0.2s;
    user-select: none;      /* Чтобы текст не выделялся при клике */
}

.check-row:hover {
    color: var(--accent-color);
}

.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;         /* Чтобы чекбокс не сплющивался при длинном тексте */
    accent-color: var(--accent-color);
    cursor: pointer;
}

/* Стили заголовков внутри панели настроек */
.side-title {
    margin: 0 0 15px 0;
    color: var(--warning);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

/* Кнопка-родитель для подсказки */
.btn-tool {
    position: relative; /* Чтобы подсказка позиционировалась относительно кнопки */
}

/* Сама подсказка */
.btn-tool::after {
    content: attr(data-tooltip); /* Берем текст из атрибута data-tooltip */
    position: absolute;
    bottom: 130%; /* Появляется над кнопкой */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* Оформление */
    background: #1a1c23;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap; /* Чтобы текст не переносился */
    border: 1px solid var(--accent-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
    /* Анимация скрытия */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Чтобы подсказка не мешала кликать */
    z-index: 1000;
}

/* Маленький треугольник-стрелочка под подсказкой */
.btn-tool::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent;
    border-top-color: var(--accent-color);
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Появление при наведении */
.btn-tool:hover::after,
.btn-tool:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* СТИЛИ ПРЕДПРОСМОТРА DISCORD */
.discord-preview-container {
    background: #36393f; /* Цвет фона Discord */
    padding: 15px;
    border-radius: 4px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 100%;
}

.discord-embed {
    background: #2f3136; /* Цвет Embed */
    border-left: 4px solid var(--accent-color); /* Та самая полоска */
    padding: 12px 16px;
    border-radius: 4px;
}

.discord-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.discord-author-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.discord-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.discord-description {
    font-size: 14px;
    color: #dcddde;
    line-height: 1.375;
    white-space: pre-wrap; /* Чтобы работали переносы строк */
}

/* Имитация Markdown внутри превью */
.discord-description b { color: #fff; font-weight: 700; }
.discord-description i { font-style: italic; }
.discord-description u { text-decoration: underline; }
.discord-description strike { text-decoration: line-through; opacity: 0.6; }
.discord-description h3 { font-size: 18px; color: #fff; margin: 10px 0 5px 0; }
.discord-description code { background: #202225; padding: 2px 4px; border-radius: 4px; font-family: monospace; }
.discord-description pre { background: #202225; padding: 10px; border-radius: 4px; font-family: monospace; margin: 10px 0; }
.discord-description blockquote { border-left: 4px solid #4f545c; padding-left: 10px; margin: 5px 0; color: #b9bbbe; }
.discord-description .spoiler-text { background: #202225; color: #202225; border-radius: 3px; padding: 0 2px; }
.discord-description .link-text { color: #00a8fc; text-decoration: none; }

/* Фикс для опций внутри выпадающего списка (чтобы они были темными) */
select.inp option {
    background: #1a1c23;
    color: white;
    padding: 10px;
}

/* Гарантируем, что основная колонка не сожмется в 0 */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* Важно для grid-контейнеров */
    width: 100%;
}

/* Если сайдбар мешает, когда открыты объявления */
.layout:has(#view-announce:not(.hidden)) {
    grid-template-columns: 1fr; /* Временно убираем колонку 320px */
}

.layout:has(#view-announce:not(.hidden)) .sidebar {
    display: none; /* Скрываем правый сайдбар, так как в объявлениях есть свой */
}

.announce-forum-container {
    display: grid;
    /* Указываем minmax для левой колонки, чтобы она не схлопывалась */
    grid-template-columns: minmax(400px, 1fr) 300px; 
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
}

/* Исправляем инпуты, чтобы они не вылезали и не схлопывались */
.ann-full-width, .ann-textarea {
    width: 100% !important;
    max-width: 100%;
    display: block;
    box-sizing: border-box; /* Чтобы padding не раздувал ширину */
}

.header-logo-center img {
            filter: drop-shadow(0 0 15px rgba(108, 92, 231, 0.4)); /* Мягкое фиолетовое свечение */
            transition: transform 0.3s ease;
        }
		
.char-stats-row { 
            display: flex; 
            gap: 3px; /* Уменьшили зазор между статами */
            font-size: 8px; 
            color: #888; 
            font-weight: 700; 
            white-space: nowrap; /* Запрещаем перенос */
        }
        
        /* Иконки статов */
        .ico-atk { color: #ff4d4d; margin-right: 1px; } 
        .ico-def { color: #4d94ff; margin-right: 1px; } 
        .ico-acc { color: #d14dff; margin-right: 1px; }
		
.group-total-gs {
            font-size: 10px;
            color: #5eff5e;
            background: rgba(94, 255, 94, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 10px;
            font-family: monospace;
            border: 1px solid rgba(94, 255, 94, 0.2);
            display: flex;
            align-items: center;
            gap: 3px;
        }

/* Главный контейнер фонового слоя */
.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100; /* Глубоко под контентом */
    background: #050608; /* Теперь основной цвет живет здесь */
    overflow: hidden;
    pointer-events: none;
}

/* Настройка BODY, чтобы он не перекрывал фон */
body {
    background: transparent !important; /* Делаем само тело страницы прозрачным */
}

/* ОБЩИЙ СТИЛЬ ДЛЯ СФЕР */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3; /* Увеличил до 0.3, чтобы точно увидеть результат */
    will-change: transform;
}

/* Те же сферы, но с более яркими цветами для проверки */
.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #6c5ce7, transparent);
    top: -100px;
    left: -100px;
    animation: drift-1 20s infinite alternate ease-in-out;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #00cec9, transparent);
    bottom: -50px;
    right: -50px;
    animation: drift-2 25s infinite alternate ease-in-out;
}

.orb-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #0984e3, transparent);
    top: 20%;
    left: 30%;
    animation: drift-3 30s infinite alternate ease-in-out;
}

/* Траектории (без изменений) */
@keyframes drift-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(150px, 100px) scale(1.1); }
}
@keyframes drift-2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-100px, -150px) scale(1.1); }
}
@keyframes drift-3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
}

.purple-item-row {
    background: rgba(162, 155, 254, 0.05);
    border-left: 3px solid #a29bfe;
    padding: 12px 18px;
    margin-bottom: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}
.purple-item-row:hover { background: rgba(162, 155, 254, 0.1); }

.purple-text {
    color: #efedff;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(162, 155, 254, 0.5);
    letter-spacing: 0.5px;
}

/* Стиль карточки игрока в списке ФИОЛ */
#purple-members-list .user-card-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

#purple-members-list .user-card-wrapper:hover {
    background: rgba(162, 155, 254, 0.1);
    border-color: #a29bfe;
    transform: translateX(5px);
}

/* Круглый счетчик количества фиола */
.purple-badge {
    background: #a29bfe;
    color: #000;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 0 10px rgba(162, 155, 254, 0.4);
}

/* Строка предмета в истории */
.purple-history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid #a29bfe;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.purple-history-item:hover {
    background: rgba(162, 155, 254, 0.05);
    border-color: rgba(162, 155, 254, 0.2);
}

/* Текст предмета (читабельный) */
.purple-item-name {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 4px;
}

.purple-item-date {
    color: var(--text-dim);
    font-size: 11px;
    opacity: 0.6;
}

/* Элемент в левом списке ФИОЛ */
.purple-member-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.purple-member-item:hover {
    background: rgba(162, 155, 254, 0.1);
    border-color: rgba(162, 155, 254, 0.3);
}

.purple-member-item.selected {
    background: rgba(162, 155, 254, 0.2);
    border-color: #a29bfe;
    box-shadow: inset 0 0 10px rgba(162, 155, 254, 0.1);
}

/* Маленький круглый счетчик */
.purple-badge-mini {
    background: #a29bfe;
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
}

/* Анимация переливания для фиол-предметов */
@keyframes purple-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.purple-item-name {
    /* Базовый цвет (светло-фиолетовый для читаемости) */
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    
    /* Настройка градиента (Фиолетовый -> Белый/Светлый -> Фиолетовый) */
    background: linear-gradient(
        to right, 
        #a29bfe 0%, 
        #ffffff 50%, 
        #a29bfe 100%
    );
    background-size: 200% auto;
    
    /* Магия: обрезаем фон по контуру текста */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Запуск анимации */
    animation: purple-shimmer 5s linear infinite;
    
    /* Тень для объема, чтобы текст "выпрыгивал" из фона */
    filter: drop-shadow(0 0 8px rgba(162, 155, 254, 0.4));
    
    display: inline-block;
}

/* Улучшаем контейнер для лучшей видимости эффекта */
.purple-history-item {
    background: rgba(0, 0, 0, 0.3) !important; /* Делаем подложку чуть темнее */
    border-left: 4px solid #a29bfe;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Стиль спойлера сортировки */
.purple-sort-details {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    color: var(--text-dim);
}

.purple-sort-details summary {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none; /* Убираем стандартную стрелочку */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
}

.purple-sort-details summary::-webkit-details-marker { display: none; }

.purple-sort-details[open] {
    border-color: rgba(162, 155, 254, 0.3);
}

.sort-options {
    padding: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sort-opt {
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.sort-opt:hover {
    background: rgba(162, 155, 254, 0.2);
    color: #fff;
}

/* Контейнер для кнопок-фильтров */
.guild-filter-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    margin-top: 10px;
}

/* Общий стиль кнопок */
.guild-filter-btn {
    padding: 15px 45px;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #111;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 250px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Когда активна Ludomanity (Зеленая) */
.guild-filter-btn.ludo.active {
    background: linear-gradient(180deg, #74b843 0%, #4a8a2a 100%);
    border-color: #5eff5e;
    box-shadow: 0 0 25px rgba(94, 255, 94, 0.4);
}

/* Когда активно Тихое Место (Черная) */
.guild-filter-btn.tm.active {
    background: linear-gradient(180deg, #333 0%, #000 100%);
    border-color: #ffffff;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}

/* Эффект при наведении на неактивную кнопку */
.guild-filter-btn:hover:not(.active) {
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.05);
}

.group-wrapper .row-card {
    min-height: 55px; /* Чтобы заголовок был выше и кнопки не жались */
}

.group-wrapper .admin-tag {
    background: rgba(108, 92, 231, 0.2);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

/* Контейнер бренда (лого + ник) */
.brand {
    display: flex;
    flex-direction: column; /* Ник будет строго под картинкой */
    align-items: flex-start;
    gap: 0px; /* Небольшой отступ между Пепе и твоим ником */
}

/* Настройка самой картинки */
.header-logo-main {
    max-height: 80px; /* Ограничиваем высоту, чтобы она не раздвигала всё вокруг */
    width: auto;      /* Сохраняем пропорции */
    display: block;
    filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.4));
}

/* Если в оригинальном CSS был .brand h1, убедись, что он скрыт */
.brand h1 {
    display: none !important;
}

/* Мета-данные пользователя (ник + выход) */
.user-meta {
    display: flex;
    align-items: center;
    line-height: 1.2;
}

/* Контейнер навигации */
.nav-container {
    position: relative;
    z-index: 1000;
}

.sections-dropdown {
    position: relative;
    display: inline-block;
}

/* Кнопка РАЗДЕЛЫ */
.dropdown-trigger {
    min-width: 150px;
    justify-content: space-between;
    transition: background 0.3s, transform 0.2s;
}

.sections-dropdown:hover .dropdown-trigger {
    background: var(--accent-color);
    transform: scale(1.02);
}

.arrow {
    font-size: 10px;
    margin-left: 10px;
    transition: transform 0.3s;
}

.sections-dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* Выпадающее меню */
.dropdown-content {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgba(15, 18, 25, 0.95);
    backdrop-filter: blur(10px); /* Блюр внутри самого меню */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 10px;
    margin-top: 10px; /* Небольшой отступ от кнопки */
    
    /* Скрываем по дефолту */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Чтобы меню не закрывалось, когда мышь идет по пустому месту между кнопкой и списком */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

/* Показ при наведении */
.sections-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Элементы списка */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px;
    transition: 0.2s;
    margin-bottom: 5px;
}

.dropdown-item:last-child { margin-bottom: 0; }

.dropdown-item:hover {
    background: rgba(108, 92, 231, 0.2);
    padding-left: 20px; /* Эффект смещения вправо при наведении */
    color: var(--warning);
}

/* ЭФФЕКТ БЛЮРА ДЛЯ САЙТА */
.layout {
    transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Класс, который будет вешаться через JS */
.content-blur {
    filter: blur(5px);
    opacity: 0.6;
    pointer-events: none; /* Чтобы нельзя было кликнуть сквозь блюр */
}

/* Фиксированная навигация поверх всего */
.top-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* Центрируем меню сверху */
    z-index: 9999; /* Самый высокий слой */
}

.sections-dropdown {
    position: relative;
    display: inline-block;
}

/* Кнопка */
.dropdown-trigger {
    min-width: 160px;
    background: rgba(108, 92, 231, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Список разделов */
.dropdown-content {
    position: absolute;
    top: calc(100% + 10px); /* Отступ от кнопки */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 200px;
    background: rgba(20, 22, 30, 0.95);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 15px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    
    /* Скрытие */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

/* Элементы меню */
.dropdown-item {
    display: flex;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    border-radius: 10px;
    transition: 0.2s;
}

.dropdown-item:hover {
    background: rgba(108, 92, 231, 0.3);
    color: var(--warning);
}

/* ПОКАЗ МЕНЮ */
.sections-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* "МОСТИК" — невидимая область, чтобы мышь не теряла меню при переходе вниз */
.sections-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

/* БЛЮР КОНТЕНТА */
#main-layout {
    transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Класс для JS */
.is-blurred {
    filter: blur(8px) grayscale(0.3);
    opacity: 0.4;
    transform: scale(0.98); /* Легкое отдаление для эффекта глубины */
    pointer-events: none; /* Блокируем клики под меню */
}

/* Позиционируем навигацию в шапке, но отдельно от сетки */
.top-navigation {
    position: absolute; /* Или fixed, если хочешь чтобы меню ездило при скролле */
    top: 35px;
    left: 50%;
    transform: translateX(-50%); /* Центрируем кнопку ровно посередине */
    z-index: 9999; /* Выше всех */
}

/* Стабильное выпадающее меню */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Центрируем список относительно кнопки */
    min-width: 200px;
    background: rgba(15, 18, 25, 0.98);
    border: 1px solid rgba(108, 92, 231, 0.4);
    border-radius: 15px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
}

/* Показ меню */
.sections-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(20px);
}

/* Тот самый "Мостик", чтобы меню не закрывалось при переносе курсора */
.sections-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px; /* Заполняет пустоту между кнопкой и списком */
}

/* Эффект Блюра для контента */
#blur-target {
    transition: filter 0.4s ease, transform 0.4s ease;
}

.is-blurred {
    filter: blur(10px) brightness(0.7); /* Сильный блюр + затемнение */
    transform: scale(0.99); /* Легкое уменьшение для эффекта глубины */
    pointer-events: none; /* Запрещаем кликать по контенту, пока меню открыто */
}

/* Позиционирование кнопки разделов */
.header-navigation {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* Кнопка */
.dropdown-trigger {
    min-width: 180px;
    height: 45px;
    background: rgba(108, 92, 231, 0.2) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    font-size: 12px !important;
    letter-spacing: 1px;
}

/* Выпадающее меню */
.dropdown-content {
    position: absolute;
    top: 55px; /* Чуть ниже кнопки */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 220px;
    background: rgba(15, 18, 25, 0.98);
    border: 1px solid rgba(108, 92, 231, 0.5);
    border-radius: 15px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
}

.sections-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Эффект Блюра */
#blur-target {
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    will-change: filter;
}

/* Класс, который добавляет JS */
.is-blurred {
    filter: blur(12px) brightness(0.5) !important; /* Усиленный блюр и затемнение */
    opacity: 0.5;
    transform: scale(0.98);
    pointer-events: none; /* Чтобы нельзя было кликать по заблюренному */
}

/* Невидимая область под кнопкой, чтобы меню не закрывалось при движении мыши */
.sections-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

/* Класс для блокировки скролла */
body.modal-open {
    overflow: hidden;
}

/* Лайтбокс и все модалки должны быть выше навигации */
.modal-overlay, #lightbox {
    z-index: 100000 !important;
}

/* Контейнер лайтбокса */
.lightbox-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
	pointer-events: none;
    padding: 20px; /* Отступы от краев экрана */
    box-sizing: border-box;
}

/* Ник игрока над скриншотом */
#lb-nick {
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    margin-bottom: 15px;
    flex-shrink: 0; /* Чтобы текст не сжимался */
}

/* САМОЕ ВАЖНОЕ: Настройка изображения */
#lightbox-img {
    max-width: 90vw;    /* Максимум 90% ширины экрана */
    max-height: 70vh;   /* Максимум 70% высоты (оставляем место под кнопки и ник) */
    object-fit: contain; /* Сохраняет пропорции, вписывая в область */
    border-radius: 12px;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 40px rgba(0,0,0,1);
    background: #000;    /* Черный фон, если картинка прозрачная */
}

/* Блок кнопок под скриншотом */
.lightbox-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    flex-shrink: 0; /* Чтобы кнопки не уезжали вниз */
}

#lb-counter {
    font-weight: bold;
    background: rgba(0,0,0,0.6);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    font-family: monospace;
}

/* Обертка самого контента (фото + кнопки) */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* А здесь клики СНОВА работают (для кнопок и фото) */
    max-width: 95%;
    max-height: 95%;
}

/* Контейнер лайтбокса (прозрачный слой для центровки) */
.lightbox-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Пропускаем клики сквозь контейнер */
}

/* Обертка самого контента (фото + кнопки) */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* А здесь клики СНОВА работают (для кнопок и фото) */
    max-width: 95%;
    max-height: 95%;
}

/* Остальные стили (img, nick, controls) остаются без изменений из прошлого шага */
#lightbox-img {
    max-width: 90vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 40px rgba(0,0,0,1);
}

/* Оверлей на весь экран */
#lightbox {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контейнер, который держит всё внутри */
.lightbox-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

/* Картинка */
#lightbox-img {
    max-width: 90vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 40px rgba(0,0,0,1);
    /* Чтобы клик по картинке не закрывал окно, 
       убеждаемся, что она "перехватывает" клик */
    pointer-events: auto; 
}

/* Кнопки */
.lightbox-controls {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    pointer-events: auto; /* Кнопки должны быть кликабельны */
}