[html]<style>
.game-container {
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.game-block {
  border: 1px solid #543668;
  border-radius: 8px;
  padding: 15px;
  margin: 12px 0;
}

.game-block a {
  color: #543668;
  text-decoration: none;
  border-bottom: 1px dotted rgba(107,76,165,0.4);
}
.game-block a:hover {
  border-bottom-color: #543668;
}

/* tabs */
.tabs {
  margin-top: 15px;
}
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tabs-nav label {
  cursor: pointer;
  padding: 6px 14px;
  border: 1px solid #543668;
  border-radius: 20px;
  font-weight: bold;
  user-select: none;
}
.tabs input {
  display: none;
}
.tab-content {
  display: none;
  text-align: center;
}
#tab-masks:checked ~ .tabs-body #masks,
#tab-bonuses:checked ~ .tabs-body #bonuses,
#tab-list:checked ~ .tabs-body #list {
  display: block;
}
#tab-masks:checked ~ .tabs-nav label[for="tab-masks"],
#tab-bonuses:checked ~ .tabs-nav label[for="tab-bonuses"],
#tab-list:checked ~ .tabs-nav label[for="tab-list"] {
  background: #543668;
  color: #fff;
}

/* spoiler */
.spoiler summary {
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}
.spoiler-content {
  margin-top: 10px;
  text-align: left;
}
</style>

<div class="game-container">

  <!-- Картинка + описание -->
  <div class="game-block">
    <img src="https://forumstatic.ru/files/001a/2e/af/50617.gif" alt="">
    <p>
      В этой теме вы сможете найти соигрока или внести свои предложения по поводу сюжета.<br>
      Также здесь будет осуществляться набор желающих в сюжетные эпизоды.
    </p>
  </div>

  <!-- Tabs -->
  <div class="game-block tabs">
    <input type="radio" name="tabs" id="tab-masks">
    <input type="radio" name="tabs" id="tab-bonuses">
    <input type="radio" name="tabs" id="tab-list" checked>

    <div class="tabs-nav">
      <label for="tab-masks">Маски</label>
      <label for="tab-bonuses">Бонусы</label>
      <label for="tab-list">Сюжетные эпизоды</label>
    </div>

    <div class="tabs-body">
      <!-- Маски -->
      <div class="tab-content" id="masks">
        <b>Grey Lady</b> — 10<br>
        <b>Willa Weholt</b> — 8<br>
        <b>Bridget Bhatia</b> — 6<br>
        <b>Jake Farley</b> — 4<br>
        <b>Sophie Fawcett</b> — 3<br>
        <b>Anabelle</b> — 3<br>
        <b>Sophie Roper</b> — 3<br>
        <b>Gregory Goyle</b> — 2<br>
        <b>Kinjal Bhatia</b> — 1<br>
        <b>Christopher Garland</b> — 1<br>
        <b>Aiden O`Connor</b> — 1<br>
        <b>Eurig Cadwallader</b> — 1<br>
        <b>Ginny Weasley</b> — 1<br>
        <b>Jason Samuels</b> — 1<br>
   </div>

      <!-- Бонусы -->
      <div class="tab-content" id="bonuses">
      <div style="text-align:center"><br>
<b>Rionach O'Neal</b> — ±2 до 19.10<br>
<br>
<b>  Неактивированные бонусы:</b><br>
<b>до 01.11.26</b>:<br></div>
  <b>Christopher Garland</b> — <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4908&p=6#p806735">
    бонус ±2 на один месяц</a> (2) + <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4908&p=6#p806735">
    бонус ±2 на одну неделю
  </a> (3)
<br>
<b>Gabriel Tate</b> — 
  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5041&p=5#p821132">бонус ±2 на одну неделю </a> <br>
  <b>Dennis Moon</b> —
<a href="https://drinkbutterbeer.ru/viewtopic.php?id=5041&p=5#p821132"> бонус ±2 на одну неделю</a>
<br>
  <b>Anabelle</b> — 
  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4908&p=6#p806966">
    бонус ±2 на один месяц
  </a>
<br>
  <b>Seamus Finnigan</b> —
  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4908&p=6#p806878">
    бонус ±2 на один месяц
  </a>
<br>
  <b>Sophie Fawcett</b> —
  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4908&p=6#p806730">
    бонус ±2 на один месяц
  </a>
<br><br>
<b>до 01.01.27</b>:
<br>
<b>Gabriel Tate</b> —
<a href="https://drinkbutterbeer.ru/viewtopic.php?id=5091&p=3#p826046">бонус ±2 на один день</a><br>
<b>Luca Caruso</b> — <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5091&p=3#p826046"> бонус ±2 на один день</a><br>
  <b>Eurig Cadwallader </b> — <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5091&p=3#p826046"> бонус ±2 на один день</a>
<br>
<b>Gregory Goyle</b> — <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5091&p=3#p826046">бонус ±2 на один день</a><br>
<br><b>до 01.03.27</b><br>
<b>Darius Higgs </b> —  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5142&p=8#p833635">бонус ±2 на одну неделю</a><br>
<b>Felicity Eastchurch</b> —  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5142&p=8#p833635">бонус ±2 на одну неделю</a><br>
<b>Gabriel Tate</b> — <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5142&p=8#p833635">бонус ±2 на одну неделю</a><br>
<b>Luca Caruso</b> —  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5142&p=8#p833635">бонус ±2 на одну неделю</a><br>
<b>Luke Cholderton</b> —  <a href="https://drinkbutterbeer.ru/viewtopic.php?id=5142&p=8#p833635">бонус ±2 на одну неделю</a><br>
<br>
         </div>

      <!-- Список -->
      <div class="tab-content" id="list">
<b>Список занятых масок<br>
в сюжетных эпизодах с 01.10 по 31.10</b>:<br><br>
<b><a href="https://drinkbutterbeer.ru/viewtopic.php?id=5158"> Урок Зельеварения, шестой курс [с]</a></b><br>
Alison Denshaw (Mika Abdalla) — за <a href="https://drinkbutterbeer.ru/profile.php?id=7">Luca Caruso</a><br>
Nick Alas (Stephen Kalyn) — за <a href="https://drinkbutterbeer.ru/profile.php?id=947">Gabriel Tate</a><br>
Harper (Michael Cimino) — за <a href="https://drinkbutterbeer.ru/profile.php?id=938">Gregory Goyle</a><br>
David Boorman (Jared Gilmore) — за <a href="https://drinkbutterbeer.ru/profile.php?id=154">Jason Samuels</a><br>
Ella Wilkins (Hailee Steinfeld) — за <a href="https://drinkbutterbeer.ru/profile.php?id=1008">Sage Kelleen</a><br>
Roderick Murphy (Freddie Thorp) — за <a href="https://drinkbutterbeer.ru/profile.php?id=979">Jake Farley</a><br>

<br>
<a href="https://drinkbutterbeer.ru/viewtopic.php?id=5159">23.10.97. Урок Нумерологии, седьмой курс [с]</a></b><br>
Daphne Greengrass (Dove Cameron) — за <a href="https://drinkbutterbeer.ru/profile.php?id=1024">Penelope Padgett</a><br>
Harrison Pike (Jack Alcott) — за <a href="https://drinkbutterbeer.ru/profile.php?id=1013">Darius Higgs</a><br>
Heather Bishop (Johnny Sequoyah) — за <a href="https://drinkbutterbeer.ru/profile.php?id=810">Bridget Bhatia</a><br>
Joan Kerridge (Jane De Leon) — за <a href="https://drinkbutterbeer.ru/profile.php?id=938">Gregory Goyle</a><br>
Pansy Parkinson (Scarlett Byrne) — за <a href="https://drinkbutterbeer.ru/profile.php?id=503">Kinjal Bhatia</a><br>
Michael Corner (Moritz Hau) — за <a href="https://drinkbutterbeer.ru/profile.php?id=154">Jason Samuels</a><br>

<br>
</div>
<details class="spoiler game-block">
  <summary>При бронировании маски, пожалуйста, используйте этот код</summary>

  <div class="spoiler-content" style="max-width:600px; margin:auto; text-align:left;">

    <!-- кнопка -->
    <div onclick="
      const t = this.nextElementSibling;
      t.select();
      document.execCommand('copy');
      this.innerText='Скопировано';
      setTimeout(()=>this.innerText='Скопировать',1500);
    "
    style="
      cursor:pointer;
      font-size:11px;
      text-align:left;
      margin-bottom:3px;
      opacity:0.6;
    "
    onmouseover="this.style.opacity='1'"
    onmouseout="this.style.opacity='0.6'"
    >      Скопировать
    </div>

    <!-- код -->
    <textarea readonly
    style="
      width:100%;
      border:none;
      outline:none;
      background:transparent;
      font-family:monospace;
      font-size:13px;
      resize:none;
      overflow:hidden;
    "
    onclick="this.select();"
    >Имя персонажа (Внешность персонажа) — за &lt;a href="ССЫЛКА НА ВАШ ПРОФИЛЬ"&gt;ВАШЕ ИМЯ&lt;/a&gt;&lt;br&gt;</textarea>

  </div>
</details>
  <!-- Spoiler -->
  <details class="spoiler game-block">
    <summary>Условия мастеров для сюжетных эпизодов</summary>
    <div class="spoiler-content">
      <p>Все сюжетные эпизоды начинаются 1-го числа, и мастера сами устанавливают длительность и количество кругов. Внимательно читайте посты мастера!
</p>
    </div>
  </details>
</div>
[/html]