[html]
<style>
/* Скрываем технические радиокнопки */
.st-rules-radio { display: none; }

/* Стиль для кликабельных кнопок (вкладок) */
.st-rules-tabs {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 12px;
    border-bottom: 1px solid #c4bfbc;
    margin: 0 30px;
    color: #444;
}

/* Визуальный эффект при наведении на вкладку */
.st-rules-label {
    cursor: pointer;
    transition: color 0.3s ease;
}

.st-rules-label:hover {
    color: #8c2020;
}

/* Скрываем весь текст по умолчанию и задаем анимацию появления */
.st-rules-content {
    display: none;
    padding: 25px 40px 35px 40px;
    font-size: 13px;
    line-height: 1.6;
    text-align: justify;
    animation: fadeIn 0.5s ease;
}

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

/* Логика переключения: подсвечиваем активную кнопку красным цветом */
#tab-1:checked ~ .st-rules-tabs label[for="tab-1"],
#tab-2:checked ~ .st-rules-tabs label[for="tab-2"],
#tab-3:checked ~ .st-rules-tabs label[for="tab-3"] {
    color: #8c2020;
    font-weight: bold;
}

/* Показываем нужный блок текста в зависимости от нажатой кнопки */
#tab-1:checked ~ #content-1,
#tab-2:checked ~ #content-2,
#tab-3:checked ~ #content-3 {
    display: block;
}
</style>

<div style="max-width: 650px; margin: 20px auto; background-color: #e2dedb; border: 1px solid #111; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); font-family: Tahoma, Geneva, sans-serif; color: #222;">
   
    <div style="background-color: #0d0d0d; border-bottom: 2px solid #6b1515; padding: 30px 20px; text-align: center;">
         <span style="font-family: Georgia, serif; font-size: 26px; color: #8c2020; text-transform: uppercase; letter-spacing: 6px; text-shadow: 1px 1px 3px #000;">Правила ролевой</span>
    </div>

    <input type="radio" name="rules-tabs" id="tab-1" class="st-rules-radio" checked>
    <input type="radio" name="rules-tabs" id="tab-2" class="st-rules-radio">
    <input type="radio" name="rules-tabs" id="tab-3" class="st-rules-radio">

    <div class="st-rules-tabs">
        <label for="tab-1" class="st-rules-label">ОБЩИЕ ПОЛОЖЕНИЯ</label> <strong>|</strong>
        <label for="tab-2" class="st-rules-label">ПЕРСОНАЖИ И АНКЕТЫ</label> <strong>|</strong>
        <label for="tab-3" class="st-rules-label">ИГРОВОЙ ПРОЦЕСС</label>
    </div>

    <div id="content-1" class="st-rules-content">
        <p style="margin-top: 0; text-align: center; font-family: Georgia, serif; font-size: 16px; color: #6b1515;"><strong>ОСНОВЫ ВЫЖИВАНИЯ В ХОУКИНСЕ</strong></p>
        <ul style="padding-left: 20px; margin-bottom: 25px; line-height: 1.8;">
            <li>Уважайте других игроков. Конфликты между персонажами поощряются для создания драмы, но перенос негатива на личности авторов строго запрещен.</li>
            <li>Рейтинг проекта допускает наличие сцен насилия, жестокости и мрачной атмосферы. Если ваш пост содержит откровенно тяжелые описания, прописывайте предупреждения перед началом текста.</li>
            <li>Все организационные и спорные вопросы решаются в спокойном диалоге с администрацией в личных сообщениях или специальной теме.</li>
        </ul>
        <div style="text-align: center; color: #6b1515; font-family: Georgia, serif; font-size: 14px; margin-top: 20px;">
            Незнание правил не спасает от щупалец Изнанки.
        </div>
    </div>

    <div id="content-2" class="st-rules-content">
        <p style="margin-top: 0; text-align: center; font-family: Georgia, serif; font-size: 16px; color: #6b1515;"><strong>БЕЗ АНКЕТ И ОЖИДАНИЯ</strong></p>
        <p>Мы понимаем, как хочется быстрее влиться в историю, поэтому избавились от утомительной бюрократии. <strong>На проекте нет классических простыней-анкет.</strong></p>
        <ul style="padding-left: 20px; margin-bottom: 25px; line-height: 1.8;">
            <li>Для старта игры достаточно заполнить краткую информационную карточку профиля.</li>
            <li><strong style="color: #6b1515;">Неканоны будут!</strong> Вы можете создавать полностью оригинальных персонажей. Главное условие — они должны логично вписываться в реалии зараженного города.</li>
        </ul>
    </div>

    <div id="content-3" class="st-rules-content">
        <p style="margin-top: 0; text-align: center; font-family: Georgia, serif; font-size: 16px; color: #6b1515;"><strong>ВЛИЯНИЕ НА СЮЖЕТ И ВЫКУП ГГ</strong></p>
        <p>Ваши действия напрямую меняют расстановку сил на границе миров.</p>
        <ul style="padding-left: 20px; margin-bottom: 25px; line-height: 1.8;">
            <li><strong style="color: #6b1515;">Система выкупа:</strong> За высокую активность в эпизодах и скопленную форумную валюту (монеты), игроки получают <strong>возможность выкупа главных героев (канонов)</strong> для развития собственных сюжетных веток и влияния на глобальную игру.</li>
            <li>Стиль написания свободный (третье или первое лицо), жестких ограничений по символам нет. Важна динамика и развитие истории, а не "вода" в тексте.</li>
            <li>Каждый игрок может инициировать собственные квесты и предлагать идеи для общих катастроф — мы всегда открыты к предложениям.</li>
        </ul>
    </div>

</div>
[/html]