Что нового?

Под каждым опытом теперь спрятан спойлер с заголовком «Список техник ниндзюцу».

Внутри спойлера — интерактивный список анкор-ссылок, ведущих к полноценным описаниям техник в библиотеке.

Благодаря этому пользователям больше не нужно вручную редактировать описания техник, переходя по ссылке, они сразу получают актуальную информацию.

[html]
<div class="character-card">
  <!-- Блок с аватаром -->
  <div class="character-image-container">
    <img src="https://upforme.ru/uploads/001c/83/b6/7/664189.jpg" alt="Character Image" class="character-image">
    <div class="character-image-text">куноити D-ранга из клана Узумаки</div>
  </div>

  <!-- Основной контент -->
  <div class="character-info">
    <div class="profile-title"><span class="first-letter">U</span>zumaki <span class="first-letter">H</span>aruko</div>

    <!-- Базовые параметры -->
    <div class="character-stats">
      <div class="stat-cell">Nin</div>
      <div class="stat-cell">Tai</div>
      <div class="stat-cell">Gen</div>
      <div class="stat-cell">Ken</div>
      <div class="stat-cell">Riki</div>
      <div class="stat-cell">Soku</div>
      <div class="stat-cell">Sei</div>
      <div class="stat-cell">In</div>
      <div class="stat-cell">Сумма</div>

      <div class="stat-cell">3</div>
      <div class="stat-cell">2.5</div>
      <div class="stat-cell">1</div>
      <div class="stat-cell">1</div>
      <div class="stat-cell">2</div>
      <div class="stat-cell">1.5</div>
      <div class="stat-cell">1.5</div>
      <div class="stat-cell">3</div>
      <div class="stat-cell">15.5</div>
    </div>

    <!-- Второй блок -->
    <div class="extra-stats">
      <!-- Левая колонка -->
<div class="character-secondary">
  <!-- Строка 1 -->
  <div class="row left bold">Побочные параметры</div>
  <div class="row center bold"></div>
  <div class="row right bold">Список техник ниндзюцу</div>

  <!-- Строка 2 -->
  <div class="row left">Запас чакры</div>
  <div class="row center">50 (+25)</div>
  <div class="row right" data-collapsible>
  <a href="https://shinobilegacy.f-rpg.me/viewtopic.php?id=53#внешность%20цунаде">Прямая ссылка на какую-то технику (в этом варианте на внешность Цунаде)</a>, Doton: Ressenga, Doton: Moguragakure no Jutsu,
  Doton: Doroku Gaeshi, Fūton: Toppa  Doton: Shinjū Zanshu no Jutsu, Doton: Ressenga, Doton: Moguragakure no Jutsu,
  Doton: Doroku Gaeshi, Fūton: Toppa  Doton: Shinjū Zanshu no Jutsu, Doton: Ressenga, Doton: Moguragakure no Jutsu,
  Doton: Doroku Gaeshi, Fūton: Toppa  Doton: Shinjū Zanshu no Jutsu, Doton: Ressenga, Doton: Moguragakure no Jutsu,
  Doton: Doroku Gaeshi, Fūton: Toppa
</div>

  <!-- Строка 3 -->
  <div class="row left">Мастерство ниндзюцу</div>
  <div class="row center">12</div>
  <div class="row right bold">Стили тайдзюцу</div>

  <!-- Строка 4 -->
  <div class="row left">Мастерство гендзюцу</div>
  <div class="row center">4</div>
  <div class="row right">Kenjutsu</div>

  <!-- Строка 5 -->
  <div class="row left">Ближний бой</div>
  <div class="row center">9</div>
  <div class="row right bold">Снаряжение</div>

  <!-- Строка 6 -->
  <div class="row left">Дальний бой</div>
  <div class="row center">8</div>
  <div class="row right">Катана, 5 кунаев, 10 сюрикенов, 2 взрывные печати, 1 дымовая бомба</div>

  <!-- Строка 7 -->
  <div class="row left">Физическая стойкость</div>
  <div class="row center">7</div>
  <div class="row right bold">Способности</div>

  <!-- Строка 8 -->
  <div class="row left">Ментальная стойкость</div>
  <div class="row center">4</div>
  <div class="row right"> </div>

  <!-- Строка 9 -->
  <div class="row left">Медицина</div>
  <div class="row center">—</div>
  <div class="row right">Жизненная энергия Узумаки</div>

  <!-- Строка 10 -->
  <div class="row left bold">Показатель ловкости</div>
  <div class="row center bold">8</div>
  <div class="row right bold"></div>
</div>

    </div>
  </div>
</div>

<!--- спойлер для техник --->
<script type="text/javascript" src="https://forumstatic.ru/files/001c/83/b6/41997.js?v=2" charset="UTF-8"></script>

[/html]

[html]<!-- ===== PROFILE CARD — clean compact (≤12px) ===== -->
<style>
:root{
  --accent: var(--amscolor, #6f9bff);
  --ink: var(--textcolor, #1f2430);
  --muted: #6a7280;
  --panel: var(--bg2, #eef2f7);
  --paper: #ffffff;
  --stroke: var(--bordercolor, #cfd8e6);
  --radius: 12px;
  --fs: 12px;      /* базовый размер ≤12px */
}

/* оболочка */
.card{
  max-width: 760px;
  margin: 10px auto;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  color: var(--ink);
  font-size: var(--fs);
  font-family: var(--font-base, Verdana, Tahoma, sans-serif);
  overflow: hidden;
}
.card *{ box-sizing: border-box; }

/* верх */
.card-header{
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--stroke);
  background:
    linear-gradient(#fff8,#fff0),
    repeating-linear-gradient(0deg,#e7edf7 0 1px,#fff 1px 24px);
}
.card-avatar{ width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--stroke);background:#fff; }
.card-avatar img{ width:100%;height:100%;object-fit:cover; }

.card-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.card-title .name{ font-weight:700; font-family: var(--rus, inherit); }
.card-title .handle{ color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.card-badges{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.badge{
  display:inline-flex; gap:6px; align-items:center;
  padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--stroke); font-weight:700;
}
.badge .tag{ padding:2px 6px; border-radius:999px; background:#a1b3d1; }

/* тело */
.card-body{
  padding: 12px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:12px;
}

/* панели */
.panel{
  background: var(--paper);
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:10px;
}

/* заголовки внутри панелей — “неубиваемые” */
.panel h3{
  display:inline-block;           /* безопасно для линии ниже */
  margin: 0 0 8px;
  font-family: Verdana, Tahoma, sans-serif;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #2b2f3a;
  background: transparent;
  border: 0;
}
.panel h3 + .rule{ height:1px; background: var(--stroke); margin:-4px 0 8px; }

/* текст и списки */
.panel p{ margin:0 0 8px; line-height:1.55; }
.muted{ color: var(--muted); }
.list{ margin:0; padding:0; list-style:none; }
.list li{ padding:6px 0; border-top:1px dashed var(--stroke); }
.list li:first-child{ border-top:0; }

/* цитата */
.card-quote{
  border-top:1px solid var(--stroke);
  background:#fff;
  padding:10px 12px;
  text-align:center;
  color: var(--muted);
  font-style: italic;
}

/* адаптив */
@media (max-width:540px){
  .card-header{ grid-template-columns:60px 1fr; }
  .card-badges{ grid-column:1 / -1; justify-content:flex-start; }
  .card-body{ grid-template-columns:1fr; }
}
</style>

<div class="card">
  <!-- top -->
  <div class="card-header">
    <div class="card-avatar">
      <img src="https://i.pinimg.com/1200x/54/89/e9/5489e9525c432d27dcd8e8526ec46ff9.jpg" alt="">
    </div>
    <div class="card-title">
      <div class="name">моя тгшчка</div>
      <div class="handle">@makesmebad</div>
    </div>
    <div class="card-badges">
      <div class="badge">~ <span class="tag">тян</span></div>
      <div class="badge"><span class="tag">31</span> yrs • infp-t</div>
    </div>
  </div>

  <!-- body -->
  <div class="card-body">
    <!-- left -->
    <div class="panel">
      <h3>Обо мне</h3>
      <div class="rule"></div>
      <p>Люблю боевые сцены, способности и стихийную магию. Давно играю по «Наруто», присматриваюсь к «Аватару: Легенда об Аанге / Корре».</p>

      <h3>Игровое</h3>
      <div class="rule"></div>
      <ul class="list">
        <li>посты <span class="muted">от 3к до 10к</span>, многое зависит от соигрока и настроения</li>
        <li>люблю описание эмоций и внутреннего мира</li>
        <li>иногда сухой/неловкий старт</li>
        <li>тяжело играть на новых проектах без компании</li>
        <li><b>не играла</b> на кроссах</li>
        <li><b>ирл</b> форумы — не моё</li>
      </ul>

      <h3>мы не подружимся, если ты:</h3>
      <div class="rule"></div>
      <ul class="list">
        <li>токсичный</li>
        <li>задеваешь чужие триггеры ради шутки</li>
        <li>высмеиваешь чужие интересы</li>
      </ul>
    </div>

    <!-- right -->
    <div class="panel">
      <h3>Интересы</h3>
      <div class="rule"></div>
      <p><b>2d рисование</b>, аниме, манга, <b>html и css</b>, создание концептов для будущей игры.</p>

      <h3>Вдохновляюсь</h3>
      <div class="rule"></div>
      <p>ло-фи, <b>ambient mix</b>, пинтерест, <b>арт-концепты</b>.</p>

      <h3>Фавы и планы</h3>
      <div class="rule"></div>
      <ul class="list">
        <li><b>любимое:</b> наруто, аватар легенда об аанге / корре, гуррен лаганн, пожиратель душ</li>
        <li><b>недавно посмотрела:</b> сверхъестественное, уэнсдей, дандадан, доктор стоун</li>
        <li><b>в планах глянуть:</b> голубоглазого самурая, любовь смерть и роботы, чёрное зеркало, гачиакута, дни сakamoto</li>
      </ul>
    </div>
  </div>

  <!-- bottom -->
  <div class="card-quote">“когда-нибудь я точно повзрослею, но не сегодня”</div>
</div>
[/html]