способности

[html]<div class="demon-wrap">
<div class="demon-main">

<div class="demon-content">
<div class="demon-hero">
<div class="demon-logo">DEMONS</div> </div>

<div class="demon-panel-wrap">
<div class="demon-panel-title">о распределении способностей</div>
<div class="demon-box">
<div class="demon-scroll">
<div class="demon-intro">
<div class="demon-a">Здесь собраны демоны по типу угрозы, удобству контракта и общей разрушительности.</div>
<div class="demon-a">не все демоны пригодны для контракта. чем выше класс, тем меньше у тебя шансов что это вообще закончится хорошо</div>
</div>

<div class="demon-ranks">
<label class="demon-rank-label demon-lab-1" for="demon-rank-1"><span class="demons-caps">D</span>-уровень</label>
<label class="demon-rank-label demon-lab-2" for="demon-rank-2"><span class="demons-caps">C</span>-уровень</label>
<label class="demon-rank-label demon-lab-3" for="demon-rank-3"><span class="demons-caps">B</span>-уровень</label>
<label class="demon-rank-label demon-lab-4" for="demon-rank-4"><span class="demons-caps">A</span>-уровень</label>
<label class="demon-rank-label demon-lab-5" for="demon-rank-5"><span class="demons-caps">S</span>-уровень</label>
</div>

<div class="demon-rank-note demon-rank-note-1"><b>БЕСЫ.</b> >> Мелкие, жадные, странные, контрактятся охотно и дёшево. Обычно воплощают частные и нелепые страхи.</div>
<div class="demon-rank-note demon-rank-note-2"><b>ЦЕРБЕРЫ.</b> >> Более дикие и агрессивные. Контракты нестабильны, контроль силы слабый, а одержимость часто проблемная.</div>
<div class="demon-rank-note demon-rank-note-3"><b>БАФОМЕТЫ.</b> >> Осознанные, разговорчивые и опасные. Любят сделки, цену назначают высокую, но с ними ещё можно торговаться.</div>
<div class="demon-rank-note demon-rank-note-4"><b>АРХАНГЕЛЫ.</b> >> Высокоинтеллектуальные и разрушительные. Контракты редки, выбор сосуда почти всегда остаётся за ними.</div>
<div class="demon-rank-note demon-rank-note-5"><b>САТАНА.</b> >> Абсолютная угроза. Контракты не зафиксированы, появление почти всегда связано с катастрофой и разломами.</div>

<div class="demon-card">
<div class="demon-card-code">// D-1104 «SWEAT»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем<br>контракты разрешены</span>
</span> </div>
<div class="demon-desc">Частный страх вспотеть, опозориться запахом или выглядеть неопрятно. Даёт мелкое давление на тело и тревожность.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">HANA MORI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">HANA MORI</a>, <a href="#">RIN AOI</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-1724 «STAPLER»
<a href="#" class="demon-mark">nps
<span class="demon-mark-tip">используется сюжетным нпс</span>
</a> </div>
<div class="demon-desc">Рукотворный мелкий демон-инструмент. Усиливает страх случайной боли, уколов и нелепых бытовых травм.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">KAI TOUMA</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">KAI TOUMA</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-0843 «DUST»
<a href="#" class="demon-mark">act
<span class="demon-mark-tip">закреплено за акцией</span>
</a> </div>
<div class="demon-desc">Демон запущенных квартир, пыли и бытовой тоски. Давит на чувство вины, апатию и медленное разложение быта.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">YUI SHIN</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">YUI SHIN</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-2231 «MIRROR CUT»</div>
<div class="demon-desc">Паразит на мелких комплексах внешности. Шепчет о недостатках, усиливает стыд и фиксацию на отражении.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">SORA NAMI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">SORA NAMI</a>, <a href="#">MEI KUDO</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-5519 «QUEUE»</div>
<div class="demon-desc">Слабый роевой демон ожидания, раздражения и вязкого ощущения потерянного времени в очередях.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">AKI REN</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">AKI REN</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-6630 «WASH»</div>
<div class="demon-desc">Частный страх мытья, грязи и навязчивой телесной уязвимости. Вызывает липкость, брезгливость и дёрганую тревогу.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">NOA HIBI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">NOA HIBI</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-7012 «ECHO»</div>
<div class="demon-desc">Мелкий демон акустической тревоги. Искажает повторяющиеся звуки, заставляя подозревать присутствие кого-то рядом.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">REI TOUDA</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">REI TOUDA</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-8188 «ITCH»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем</span>
</span> </div>
<div class="demon-desc">Навязчивый зуд, ощущение неустранимого раздражителя и микроскопической телесной угрозы. Больше бесит, чем убивает.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">JIN SAE</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">JIN SAE</a>, <a href="#">MIKA YORU</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// D-9001 «SPILL»
<a href="#" class="demon-mark">act
<span class="demon-mark-tip">закреплено за акцией</span>
</a> </div>
<div class="demon-desc">Бытовой демон страха неловкости: пролить, уронить, испортить, облажаться на ровном месте. Любит подпитываться стыдом.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">ENA RIKU</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">ENA RIKU</a></div>
</div> </div> </div>

<div class="demon-card">
<div class="demon-card-code">// C-2202 «CROWD»
<a href="#" class="demon-mark">nps
<span class="demon-mark-tip">используется сюжетным нпс</span>
</a> </div>
<div class="demon-desc">Демон толпы и давки. Работает через животную панику, нехватку пространства и страх быть смятым.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">RAI KISARAGI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">RAI KISARAGI</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// C-3150 «BOX»</div>
<div class="demon-desc">Страх замкнутого пространства, нехватки воздуха и невозможности выбраться. Агрессивен, любит ломать сосуд.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">SHU KAGA</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">SHU KAGA</a>, <a href="#">MEI ASATO</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// C-4411 «PACK»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем</span>
</span> </div>
<div class="demon-desc">Демон своры и животного испуга. Привязан к страху преследования стаей, рычанию и укусам.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">TAO MIN</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">TAO MIN</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// C-5800 «PANIC»</div>
<div class="demon-desc">Чистый дикий испуг без логики. Поднимает сердце в горло, ломает дыхание и рвёт контроль у контрактника.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">NAGI ROU</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">NAGI ROU</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// C-6616 «HOWL»
<a href="#" class="demon-mark">act
<span class="demon-mark-tip">закреплено за акцией</span>
</a> </div>
<div class="demon-desc">Сильнее всего работает на инстинкте выживания. Активирует резкий рефлекс бегства и звериную дезориентацию.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">KEN AMAI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">KEN AMAI</a>, <a href="#">RUI KANA</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// C-7704 «HUNGER»</div>
<div class="demon-desc">Паразитирует на отчаянной тяге выжить любой ценой. Контракт полезный, но почти всегда плохо контролируется.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">YUTO SAI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">YUTO SAI</a></div>
</div> </div> </div>

<div class="demon-card">
<div class="demon-card-code">// B-1001 «OLD AGE»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем</span>
</span> </div>
<div class="demon-desc">Хронофаг старости. Давит через страх увядания, дряхлости и медленной утраты себя, но ещё допускает торг.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">AKIRA SEI</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">AKIRA SEI</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-2440 «SHADOW»</div>
<div class="demon-desc">Двойник страха слежки. Идёт по пятам, повторяет контуры тела и кормится ощущением преследования.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">YORI SATO</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">YORI SATO</a>, <a href="#">HARU NAGAI</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-3188 «CONSPIRACY»
<a href="#" class="demon-mark">nps
<span class="demon-mark-tip">используется сюжетным нпс</span>
</a> </div>
<div class="demon-desc">Концептуальный демон заговора. Очень живуч, питается конспирологией, шёпотом и недоверием к любой системе.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">KOU ARATA</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">KOU ARATA</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-4722 «FORGET»</div>
<div class="demon-desc">Хронофаг забвения. Не любит убивать напрямую, предпочитая стирать значимость людей, мест и самих событий.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">SENA KURO</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">SENA KURO</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-5903 «REFLECTION»
<a href="#" class="demon-mark">act
<span class="demon-mark-tip">закреплено за акцией</span>
</a> </div>
<div class="demon-desc">Демон-двойник отражений. Мимикрирует, копирует поведение и ломает психику через сомнение в подлинности себя.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">MIO REN</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">MIO REN</a>, <a href="#">KIRA DOE</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-6745 «FARCE»</div>
<div class="demon-desc">Демон-двойник лицемерия. Превращает все ваши движения в четкое и отработанное выступление.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">НЕТ ДАННЫХ</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="https://fatumiunget.rusff.me/profile.php?id=11">LEI MIN</a></div>
</div>

<div class="demon-card">
<div class="demon-card-code">// B-8110 «LEAK»</div>
<div class="demon-desc">Цифровой демон утечки данных. Силен в сети, охотно торгуется и прекрасно понимает цену человеческой уязвимости.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">REIJI KANE</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="#">REIJI KANE</a></div>
</div> </div> </div>

<div class="demon-card">
<div class="demon-card-code">// A-0007 «FUTURE»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем</span>
</span> </div>
<div class="demon-desc">Хронофаг будущего. Играет на страхе неизвестности и масштабе грядущего, почти всегда манипулирует через иллюзию контроля.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">ДОГОВОР ЗАКРЫТ</a></div>
<div class="demon-contracts">КОНТРАКТЫ: НЕТ ОТКРЫТЫХ ДАННЫХ</div>
</div>

<div class="demon-card">
<div class="demon-card-code">// A-0113 «BOMB»</div>
<div class="demon-desc">Рукотворный Архангел. Один из тех, через кого человечество впервые по-настоящему осознало масштаб демонической угрозы.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">НЕДОСТУПНО</a></div>
<div class="demon-contracts">КОНТРАКТЫ: <a href="https://fatumiunget.rusff.me/profile.php?id=5">VIVITT UENO</a> *</div>
</div>

<div class="demon-card">
<div class="demon-card-code">// A-455 «PARABELLUM»
<a href="#" class="demon-mark">act
<span class="demon-mark-tip">закреплено за акцией</span>
</a> </div>
<div class="demon-desc">Рукотворный демон огнестрельного оружия. Стреляет глазками, похабными шутками и обожает, когда мешки с мясом швыряют друг в друга свинцовые предметы со скоростью звука.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="https://fatumiunget.rusff.me/profile.php?id=6">JET WONG</a></div>
<div class="demon-contracts">КОНТРАКТЫ: ЗАКЛЮЧЕНЫ ИСКЛЮЧИТЕЛЬНО ДО 2003 ГОДА</div>
</div>

<div class="demon-card">
<div class="demon-card-code">// A-5881 «JUDGEMENT»
<a href="#" class="demon-mark">nps
<span class="demon-mark-tip">используется сюжетным нпс</span>
</a> </div>
<div class="demon-desc">Архангел судного дня. Насыщается ужасом перед концом света и легко превращает городскую тревогу в массовую истерию.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">ДОГОВОР ЗАКРЫТ</a></div>
<div class="demon-contracts">КОНТРАКТЫ: НЕТ ОТКРЫТЫХ ДАННЫХ</div> </div>
</div> </div>

<div class="demon-card">
<div class="demon-card-code">// S-0001 «TSUNAMI»
<span class="demon-mark demon-mark--star">✶
<span class="demon-mark-tip">уникальный, закреплен за персонажем</span>
</span>
</div>
<div class="demon-desc">Древний демон-катастрофа абсолютного класса. Не договаривается, не играет в сделки, оставляет после себя только масштабную разруху.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">КОНТРАКТ НЕВОЗМОЖЕН</a></div>
<div class="demon-contracts">КОНТРАКТЫ: НЕВОЗМОЖНЫ</div>
</div>

<div class="demon-card">
<div class="demon-card-code">// S-0044 «TYPHOON»</div>
<div class="demon-desc">Древний Сатана ливней и тайфунов. Пробуждение такого класса почти всегда означает скорый разлом и массовую гибель.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">КОНТРАКТ НЕВОЗМОЖЕН</a></div>
<div class="demon-contracts">КОНТРАКТЫ: НЕВОЗМОЖНЫ</div>
</div>

<div class="demon-card">
<div class="demon-card-code">// S-0710 «MOUNTAIN»
<a href="#" class="demon-mark">nps
<span class="demon-mark-tip">используется сюжетным нпс</span>
</a> </div>
<div class="demon-desc">Древний масштабный страх неумолимого рока. Не ищет пищу специально — люди кормят его самим фактом своего существования.</div>
<div class="demon-owner">ОДЕРЖИМЫЙ: <a href="#">КОНТРАКТ НЕВОЗМОЖЕН</a></div>
<div class="demon-contracts">КОНТРАКТЫ: НЕВОЗМОЖНЫ</div>
</div> </div> </div> </div> </div> </div> </div> </div>

<div class="demon-side">
<div class="demon-head">перед тем как брать демона</div>
<div class="demon-note">
помни, всё сложное, спорное и редкое лучше обсуждать заранее, а не после приёма анкеты
</div>

<div class="demon-rank-dots">
<label class="demon-rank-dot dot-1" for="demon-rank-1"></label>
<label class="demon-rank-dot dot-2" for="demon-rank-2"></label>
<label class="demon-rank-dot dot-3" for="demon-rank-3"></label>
<label class="demon-rank-dot dot-4" for="demon-rank-4"></label>
<label class="demon-rank-dot dot-5" for="demon-rank-5"></label>
</div> </div> </div></div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.demon-wrap{
width:900px;
margin:0 auto;
font-family:'Manrope', sans-serif;
color:#111;
overflow:visible;
}

.demon-main{
display:flex;
align-items:flex-start;
position:relative;
}

.demon-tab-input{
position:absolute;
top:120px;
left:0;
width:1px;
height:1px;
margin:0;
padding:0;
border:0;
opacity:0;
pointer-events:none;
clip:rect(0 0 0 0);
clip-path:inset(50%);
overflow:hidden;
}

.demon-content{
width:670px;
flex:0 0 670px;
padding:0 10px 0 0;
box-sizing:border-box;
position:relative;
z-index:2;
}

.demon-hero{
height:74px;
min-height:74px;
padding:0 0 0 135px;
box-sizing:border-box;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-start;
}
.demons-caps{
text-transform:uppercase !important;
}
.demon-logo{
font-family:'Dela Gothic One', sans-serif;
font-size:92px;
color:#2f2f2f;
letter-spacing:2px;
text-transform:uppercase;
transform:translateY(-8px);
white-space:nowrap;
user-select:none;
opacity:.9;
}

.demon-panel-wrap{
margin-top:2px;
padding-left:6px;
}

.demon-panel-title,
.demon-head,
.demon-card-code,
.demon-rank-label{
display:block;
background:#111111;
color:#9bcb01;
text-decoration:none;
text-align:left;
font-family:'Dela Gothic One', sans-serif;
line-height:1.1;
box-sizing:border-box;
text-transform:lowercase;
letter-spacing:.1px;
padding:7px 8px;
}

.demon-card-code a{
text-decoration:none;
color:#000000!important;
}

.demon-panel-title{
width: auto !important;
text-align: right;
font-size:10px;
margin:0 0 8px auto;
}

.demon-box{
width:calc(100% + 95px);
height:720px;
background:#efefef;
border:1px solid #2a2a2a;
padding:12px 12px 12px 0;
box-sizing:border-box;
position:relative;
margin-right:-95px;
z-index:3;
}

.demon-scroll{
height:694px;
overflow-y:auto;
overflow-x:visible;
padding-right:4px;
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:#4a4a4a transparent;
}

.demon-scroll::-webkit-scrollbar{width:4px;}
.demon-scroll::-webkit-scrollbar-track{background:transparent;}
.demon-scroll::-webkit-scrollbar-thumb{
background:#4a4a4a;
border:none;
border-radius:0;
}
.demon-scroll::-webkit-scrollbar-button{
display:none;
width:0;
height:0;
}

.demon-intro{
margin:0 0 12px;
padding:0 0 10px 12px;
border-bottom:1px solid rgba(0,0,0,.08);
}

.demon-a{
font-size:11px;
line-height:1.45;
text-transform:lowercase;
color:#3f3f3f;
}

.demon-a + .demon-a{margin-top:6px;}

.demon-ranks{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:0 0 10px 12px;
}

.demon-rank-label{
min-width:88px;
font-size:10px;
cursor:pointer;
border:1px solid #2a2a2a;
background:#9bcb01;
color:#111111;
}

#demon-rank-1:checked ~ .demon-content .demon-ranks .demon-lab-1,
#demon-rank-2:checked ~ .demon-content .demon-ranks .demon-lab-2,
#demon-rank-3:checked ~ .demon-content .demon-ranks .demon-lab-3,
#demon-rank-4:checked ~ .demon-content .demon-ranks .demon-lab-4,
#demon-rank-5:checked ~ .demon-content .demon-ranks .demon-lab-5{
background:#111111;
color:#ffffff;
}

.demon-rank-note{
display:none;
margin:0 0 12px 12px;
width:calc(100% - 12px);
background:#111111;
color:#ffffff;
font-size:9px;
line-height:1.3;
font-weight:700;
padding:8px 8px;
box-sizing:border-box;
text-transform:lowercase;
}

#demon-rank-1:checked ~ .demon-content .demon-rank-note-1,
#demon-rank-2:checked ~ .demon-content .demon-rank-note-2,
#demon-rank-3:checked ~ .demon-content .demon-rank-note-3,
#demon-rank-4:checked ~ .demon-content .demon-rank-note-4,
#demon-rank-5:checked ~ .demon-content .demon-rank-note-5{
display:block;
}

.demon-panels{
padding-left:12px;
}

.demon-panel{
display:none;
}

#demon-rank-1:checked ~ .demon-content .demon-panels .demon-panel-1,
#demon-rank-2:checked ~ .demon-content .demon-panels .demon-panel-2,
#demon-rank-3:checked ~ .demon-content .demon-panels .demon-panel-3,
#demon-rank-4:checked ~ .demon-content .demon-panels .demon-panel-4,
#demon-rank-5:checked ~ .demon-content .demon-panels .demon-panel-5{
display:block;
}

.demon-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px 20px;
padding:2px 0 12px;
}

.demon-card{
position:relative;
padding:0 0 10px;
border-bottom:1px solid rgba(0,0,0,.08);
}

.demon-card-code{
width:100%;
font-size:9px;
margin:0 0 8px 0;
text-transform: uppercase;
border:1px solid #2a2a2a;
padding:6px 34px 6px 7px;
position:relative;
}

.demon-mark{
position:absolute;
top:50%;
right:6px;
transform:translateY(-50%);
width:18px;
height:18px;
border:none;
border-radius:50%;
color:#111111;
background:#9bcb01;
display:flex;
align-items:center;
justify-content:center;
font-family:'Dela Gothic One', sans-serif;
font-size:8px;
line-height:1;
text-transform:lowercase;
box-sizing:border-box;
z-index:4;
text-decoration:none!important;
transition:.15s ease;
}

.demon-mark--star{
font-size:10px;
cursor:help;
}

a.demon-mark{
cursor:pointer;
}

a.demon-mark:hover{
color:#ffffff!important;
}

.demon-mark-tip{
position:absolute;
top:22px;
right:0;
min-width:150px;
max-width:190px;
background:#111111;
color:#ffffff;
border:1px solid #2a2a2a;
padding:7px 8px;
box-sizing:border-box;
font-family:'Manrope', sans-serif;
font-size:9px;
line-height:1.3;
font-weight:700;
text-transform:lowercase;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.15s ease;
}

.demon-mark:hover .demon-mark-tip{
opacity:1;
visibility:visible;
}

.demon-desc{
font-size:10px;
line-height:1.42;
color:#4a4a4a;
font-weight:700;
text-transform:lowercase;
margin:0 0 8px;
}

.demon-owner{
margin:0 0 6px;
font-size:9px;
line-height:1.3;
font-weight:800;
color:#111;
text-transform:uppercase;
}

.demon-owner a{
text-decoration:none;
text-transform:lowercase;
}

.demon-owner a:hover{
color:#646464!important;
}

.demon-contracts{
margin-top:0;
padding-left:0;
font-size:9px;
line-height:1.3;
font-weight:800;
color:#111;
text-transform:uppercase;
}

.demon-contracts a{
text-decoration:none;
text-transform:lowercase;
}

.demon-contracts a:hover{
color:#646464!important;
}

.demon-side{
width:230px;
flex:0 0 230px;
min-height:720px;
background:
linear-gradient(rgba(55,55,55,.78), rgba(55,55,55,.78)),
linear-gradient(rgba(215,215,215,.18), rgba(215,215,215,.18)),
url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
padding:14px 0 12px;
box-sizing:border-box;
text-align:left;
position:relative;
z-index:1;
}

.demon-head{
width:192px;
font-size:15px;
color:#ffffff;
margin:0 0 8px 0;
}

.demon-note{
width:192px;
margin:0 0 10px 10px;
color:#fff;
font-size:9px;
line-height:1.25;
font-weight:700;
text-align:left;
}

.demon-rank-dots{
position:absolute;
right:95px;
bottom:-119px;
display:flex;
flex-direction:column;
gap:8px;
z-index:5;
}

.demon-rank-dot{
width:122px;
height:122px;
border-radius:50%;
background:#9bcb01;
display:block;
cursor:pointer;
}

#demon-rank-1:checked ~ .demon-side .demon-rank-dots .dot-1,
#demon-rank-2:checked ~ .demon-side .demon-rank-dots .dot-2,
#demon-rank-3:checked ~ .demon-side .demon-rank-dots .dot-3,
#demon-rank-4:checked ~ .demon-side .demon-rank-dots .dot-4,
#demon-rank-5:checked ~ .demon-side .demon-rank-dots .dot-5{
background:#7a7a7a;
}
</style>
[/html][hideprofile]

✦ act/nps/*. можно вписывать уникальных демонов написанных для акций/нпс без разрешения (или с ним) на сторонние контракты/одержимости с этим демоном.
✦ если не знаете, что писать в описании - просто оставьте как есть.
Код:
уровень демона --> имя демона ---> тип (контракт/одержимость)
описание, если нужно и пометка act/nps/*, либо без неё.
<a href="ссылка">name surname</a>

fatum

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

способности

Сообщений 1 страница 1 из 1

Поделиться1Вчера 10:47:46

Быстрый ответ