/* --- 0. ГЛОБАЛЬНІ ЗМІННІ (ДОДАТИ АБО ПЕРЕВІРИТИ) --- */
:root {
    --button-active: rgba(175, 152, 255, 0.1);
    --bottom-line-table: rgba(175, 152, 255, 0.05);
    /* Додані змінні для повної роботи коду: */
    --text-custom: #c0c0c0;
    --span: #af98ff;
    --text-default: #ffffff;
    --text-secondary: #aaaaaa;
    --card: #1f1f3a;
    --span-strong: #9955ff;
    --background-dark: #1e2430;
    --color-error: #ff4757; /* Використовуємо один червоний колір */
}

/* --- 1. ЗАГОЛОВОК СТОРІНКИ: rules_header --- */
.rules_header {
    margin: 30px 0;
    border-left: 3px solid var(--span); 
    border-right: 3px solid var(--span);
    position: relative;
    padding: 20px;
    background: #252525;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.rules_header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(176, 107, 255, 0.1) 50%, 
        transparent 100%);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.rules_header h5 {
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    /* Градієнтний текст: */
    background: var(--text-default);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rules_header h6 {
    margin-top: 5px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    position: relative;
}

/* --- 2. КАРТКИ (НАВІГАЦІЯ ТА КОНТЕНТ): rules_card --- */
.rules_card {
    background: var(--card);
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px; /* Відступ між навігаційними картками */
}

.rules_card:hover {
    transform: none; /* Прибираємо трансформацію при наведенні для уникнення надмірного руху */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Залишаємо тінь */
}

.rules_sticky {
    position: sticky;
    height: fit-content;
    top: 25px;
}

/* --- 3. ЗАГОЛОВКИ РОЗДІЛІВ (ВНУТРІШНІ): rules_chapter, rules_title --- */

/* Заголовок розділу в навігації */
.rules_chapter {
    display: flex;
    align-items: center; /* Вирівнювання іконки та тексту */
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-default);
    margin: 15px 12px 20px; 
    font-size: 16px;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 8px;
}
.rules_chapter i {
    vertical-align: middle;
    margin-right: 8px;
}

.rules_chapter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--span);
}

/* Заголовок розділу контенту */
.rules_title {
    font-family: var(--font-family-header); /* Unbounded, якщо ви його використовуєте */
    font-weight: var(--font-weight-9); 
    text-transform: uppercase; 
    color: var(--text-default); 
    padding-bottom: 10px; 
    font-size: var(--font-size-l); /* 24px */
    margin: 0; 
    position: relative;
}

.rules_title::after {
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 70px; 
    height: 3px; 
    background: linear-gradient(to right, var(--span-strong), var(--span)); 
    border-radius: 3px;
}


/* --- 4. НАВІГАЦІЙНІ ПУНКТИ: rules_menu --- */

.rules_menu {
    display: block;
    color: var(--text-custom);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 8px; /* Невеликий відступ між пунктами */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid transparent; /* Додано, щоб уникнути стрибків при активації */
}

.rules_menu:hover {
    color: var(--span);
    background: var(--bottom-line-table);
    transform: none; /* Прибираємо трансформацію при наведенні */
}

.rules_menu i {
    vertical-align: middle;
    margin-right: 8px;
}

/* --- Активний елемент меню (Виправлення синьої лінії!) --- */
.rules_active {
    background: var(--button-active) !important; /* !important, щоб перекрити hover */
    color: var(--span) !important;
    border-left: 3px solid var(--span) !important; /* Активна синя лінія */
}


/* --- 5. КОНТЕНТ (ПРАВИЛА): rules_block, rules_list --- */
.rules_block {
    color: var(--text-default);
    font-size: 14px;
    padding: 0 35px;
    margin: 15px 0;
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease-out;
}

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

.rules_list {
    padding: 0 15px;
}

.rules_list p, .rules_list ul {
    color: var(--text-custom);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    list-style: none; /* Для правил у вигляді <ul> */
    padding-left: 0;
}
.rules_list ul li {
    margin-bottom: 15px; 
    padding-left: 0; 
    display: flex; 
    align-items: flex-start;
}

/* --- 6. НОМЕРА ПРАВИЛ ТА ПОКАРАННЯ --- */

.rules_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Фіолетовий градієнт замість простого синього */
    background: linear-gradient(135deg, var(--span), var(--span-strong)); 
    color: white;
    width: 40px; 
    height: 30px; 
    border-radius: var(--br-4); 
    font-weight: var(--font-weight-7);
    font-size: 14px;
    /* Тінь для виділення */
    box-shadow: 0 2px 8px rgba(153, 85, 255, 0.4); 
    flex-shrink: 0;
}

.rules_text_punishment {
    display: block; 
    color: #ff6f61;
    font-size: 13px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: -15px;
    padding: 7px 15px;
    padding-left: 30px; 
    background-color: rgba(255, 71, 87, 0.1); 
    border: none;
    border-left: 3px solid #ff4757; 
    border-radius: 4px; 
    line-height: 1.4;
    width: calc(100% + 15px); 
}

/* --- 7. ТАБЛИЦЯ КОМАНДИ (Team Table) --- */
.rules_team_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 20px;
}

.rules_team_table th {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    padding: 0 10px 10px;
}

.rules_team_table tbody td {
    background-color: var(--background-dark); 
    padding: 15px 10px;
    vertical-align: middle;
    border: none;
}

.rules_team_table tbody tr td:first-child {
    border-radius: 8px 0 0 8px;
}
.rules_team_table tbody tr td:last-child {
    border-radius: 0 8px 8px 0;
}

/* Уніфікація ролей та вирівнювання (Виправлення Куратора) */
.rules_team_table td span[class^="rules_"] {
    display: inline-block;
    background: none !important;
    border-left: none !important;
    padding-left: 10px; /* Додатковий відступ для вирівнювання */
    font-weight: 600;
}

/* Кольори ролей (замість інлайн-стилів) */
.rules_unban { /* Создатель */
    color: #e91e63; 
}
.rules_warning { /* Заместитель */
    color: #9b59b6; 
}
.rules_active { /* Куратор */
    color: #88ff88;
}

/* Стиль контактів */
.rules_team_table .contact_link {
    color: var(--span);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.rules_team_table .contact_link:hover {
    color: var(--text-default); /* Білий при наведенні */
    text-decoration: underline;
}

/* --- 8. ІНШІ СТИЛІ --- */

.rules_text {
    color: var(--text-custom);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
}

.rules_warning {
    color: #ffb158;
    font-weight: 600;
    font-size: 14px;
}

/* --- 9. БІНДИ (КОНСОЛЬНІ КОМАНДИ) --- */

/* Заголовки "Для VIP игроков:" та "Для администрации:" */
.rules_block h4 {
    font-weight: var(--font-weight-7); 
    font-size: 18px; /* Трохи більший розмір */
    color: var(--text-default); 
    margin-top: 25px; /* Відступ зверху */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

/* Обгортка для пари "Етикетка + Команда" */
.bind_item {
    display: flex; 
    align-items: center; 
    margin-bottom: 15px; 
    gap: 15px; /* Проміжок між етикеткою і командою */
}

/* Етикетка/назва бінда ("Быстро возродиться") */
.bind_label {
    /* Фіолетовий фон, як на скріншоті */
    background: linear-gradient(135deg, var(--span), var(--span-strong));
    color: white; 
    padding: 8px 12px; 
    border-radius: var(--br-4); 
    font-weight: var(--font-weight-6); 
    white-space: nowrap; 
    flex-shrink: 0; /* Щоб етикетка не стискалася */
    box-shadow: 0 3px 10px rgba(153, 85, 255, 0.3);
}

/* Сама команда */
.bind_command {
    color: var(--text-custom); 
    font-size: var(--font-size-m); 
    font-weight: var(--font-weight-5);
    line-height: 1.5;
    flex-grow: 1;
}

/* Виділення важливого тексту в команді (якщо використовуєш <b>) */
.bind_command b {
    color: var(--span); 
    font-weight: var(--font-weight-7);
}

/* Особливий стиль для "Паутинка" (якщо має бути темним) */
.bind_item.spiderweb .bind_label {
    background: var(--card-background); /* Темний фон картки */
    color: var(--span); /* Фіолетовий текст */
    border: 1px solid var(--span); /* Фіолетова рамка */
    box-shadow: none;
}
/* --- 9. БІНДИ (КОНСОЛЬНІ КОМАНДИ) --- */

/* Заголовки "Для VIP игроков:" та "Для администрации:" */
.rules_block h4 {
    font-weight: var(--font-weight-7); 
    font-size: 18px; /* Трохи більший розмір */
    color: var(--text-default); 
    margin-top: 25px; /* Відступ зверху */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05); /* Легка роздільна лінія */
}

/* Обгортка для пари "Етикетка + Команда" */
.bind_item {
    display: flex; 
    align-items: center; 
    margin-bottom: 15px; 
    gap: 15px; /* Проміжок між етикеткою і командою */
}

/* Етикетка/назва бінда ("Быстро возродиться") */
.bind_label {
    /* Фіолетовий градієнт, як на скріншоті */
    background: linear-gradient(135deg, var(--span), var(--span-strong));
    color: white; 
    padding: 8px 12px; 
    border-radius: var(--br-4); 
    font-weight: var(--font-weight-6); 
    white-space: nowrap; 
    flex-shrink: 0; /* Щоб етикетка не стискалася */
    box-shadow: 0 3px 10px rgba(153, 85, 255, 0.3);
}

/* Сама команда */
.bind_command {
    color: var(--text-custom); 
    font-size: var(--font-size-m); 
    font-weight: var(--font-weight-5);
    line-height: 1.5;
    flex-grow: 1;
}

/* Виділення важливого тексту в команді (якщо використовуєш <b>) */
.bind_command b {
    color: var(--span); 
    font-weight: var(--font-weight-7);
}

/* Особливий стиль для "Паутинка" */
.bind_item.spiderweb .bind_label {
    background: var(--card-background); /* Темний фон картки */
    color: var(--span); /* Фіолетовий текст */
    border: 1px solid var(--span); /* Фіолетова рамка */
    box-shadow: none;
}
/* --- 10. ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ (FAQ) --- */

.faq_question_label {
    display: inline-block; /* Щоб займав лише необхідну ширину */
    background: linear-gradient(135deg, var(--span), var(--span-strong)); /* Фіолетовий градієнт */
    color: white; 
    padding: 8px 15px; 
    margin-top: 15px;
    margin-bottom: 5px; 
    border-radius: var(--br-4); 
    font-weight: var(--font-weight-6); 
    font-size: var(--font-size-m);
    box-shadow: 0 3px 10px rgba(153, 85, 255, 0.3); /* Легка тінь */
}

/* Стиль для тексту відповіді, щоб він не був занадто близько */
.rules_block p.rules_text {
    margin-top: 10px;
    margin-bottom: 25px; 
}