[hideprofile][html]
<div class="banner"><div class="title">Список персонажей (NPC), живущих в Юнове.</div>
<p>С ними можно взаимодействовать в игровой форме: брать с собой в квесты, проводить с ними тренировочные или дружеские поединки. Они доступны как действующие лица для ваших постов, а также вы можете заказать их отыгрыш у АМС. Каждый NPC обладает своей историей, характером и покемонами, которые могут и будут изменяться по ходу их развития.</p>
</div>
<div class="cards">
<!-- КАРТОЧКА 1 -->
<div class="card" data-id="pc1">
<div class="card-header">
<h4>Кайден</h4>
<p class="sub">Школьник, знаток улиц</p>
</div>
<div class="card-image">
<img src="https://upforme.ru/uploads/001c/73/c0/2/463935.png" alt="Hero">
</div>
<div class="card-text">
<div class="diamond"><span>13</span></div>
<!-- Радио: уникальный префикс pc1 -->
<input class="sr-radio" type="radio" name="pc1" id="pc1-s1" checked>
<input class="sr-radio" type="radio" name="pc1" id="pc1-s2">
<input class="sr-radio" type="radio" name="pc1" id="pc1-s3">
<input class="sr-radio" type="radio" name="pc1" id="pc1-s4">
<!-- Три секции 1 / 3 / 1 -->
<div class="text-row">
<div class="col left">
<label class="nav for-s1" for="pc1-s4" title="prev">◀</label>
<label class="nav for-s2" for="pc1-s1" title="prev">◀</label>
<label class="nav for-s3" for="pc1-s2" title="prev">◀</label>
<label class="nav for-s4" for="pc1-s3" title="prev">◀</label>
</div>
<div class="col center">
<div class="slides">
<div class="slide s1"><p>12-летний пацан из Вирбанка. Часто шныряет тут и там, суёт нос не в свои дела. Знает все местные сплетни. Лучшего проводника по городу не найти, но лучше оставить молодому предпринимателю чаевые, а то можно обнаружить себя под конец экскурсии в не самом благоприятном районе в абсолютном одиночестве.</p></div>
<div class="slide s2"><p>Продаёт небольших покемонов. За 100 монет у него можно купить покемонов: диглет(10ур.), мяут(10ур.), эликид(12ур.), старли(11ур.). За 300 монет: трапинч(19ур.), бунири(17ур.), зоруа(20ур.). Ассортимент может меняться время от времени.</p></div>
<div class="slide s3"><p>Раньше мечтал вступить в Команду Плазма. Его посчитали слишком мелким и назойливым для рекрута. Впрочем, его вдохновили их идеи и он по сей день следует их своеобразной версии. Он часто следит за местными и приезжими тренерами. Если он замечает плохое обращение с покемонами, то он с проворностью профессионального карманника выкрадывает покеболы и перепродаёт их. Как он знает, что новый тренер будет лучше? Никак, но покемона всегда можно выкрасть дважды.</p></div>
<div class="slide s4">Команда:<br><br>
<img src="https://upforme.ru/uploads/001c/73/c0/2/892903.png" alt="11"><img src="https://upforme.ru/uploads/001c/73/c0/2/850037.png" alt="12">
<br><img src="https://upforme.ru/uploads/001c/73/c0/2/995720.png" alt="14"><br><br>
</div>
</div>
</div>
<div class="col right">
<label class="nav for-s1" for="pc1-s2" title="next">▶</label>
<label class="nav for-s2" for="pc1-s3" title="next">▶</label>
<label class="nav for-s3" for="pc1-s4" title="next">▶</label>
<label class="nav for-s4" for="pc1-s1" title="next">▶</label>
</div>
</div>
</div>
</div>
<!-- КАРТОЧКА 2 -->
<div class="card" data-id="pc2">
<div class="card-header">
<h4>Астрид</h4>
<p class="sub">Цветочница</p>
</div>
<div class="card-image">
<img src="https://upforme.ru/uploads/001c/73/c0/2/875338.png" alt="Hero">
</div>
<div class="card-text">
<div class="diamond"><span>29</span></div>
<input class="sr-radio" type="radio" name="pc2" id="pc2-s1" checked>
<input class="sr-radio" type="radio" name="pc2" id="pc2-s2">
<input class="sr-radio" type="radio" name="pc2" id="pc2-s3">
<input class="sr-radio" type="radio" name="pc2" id="pc2-s4">
<div class="text-row">
<div class="col left">
<label class="nav for-s1" for="pc2-s4">◀</label>
<label class="nav for-s2" for="pc2-s1">◀</label>
<label class="nav for-s3" for="pc2-s2">◀</label>
<label class="nav for-s4" for="pc2-s3">◀</label>
</div>
<div class="col center">
<div class="slides">
<div class="slide s1"><p>Работает в небольшом цветочном магазине. Владеет несколькими покемонами, но её мастерство и любовь к цветам часто привлекает много всевозможных травяных и не только покемонов из округи. Она часто безвозмездно заботится о раненных покемонах, а для травяных предлагает аромотерапию, которая по слухам временно повышает их способности.</p></div>
<div class="slide s2"><p>Могла бы посвятить себя боям, ведь у неё прямо таки талант стратега. Но это никогда не было её пристрастием. Впрочем, она не прочь сразиться с любым страждущим в тренировочном бою — ради забавы и разминки.</p></div>
<div class="slide s3"><p>Её магазинчик давно стал тихим уголком, куда заходят не только за цветами, но и за советом. Говорят, что после разговора с ней на душе становится легче, а покемоны чувствуют себя увереннее.</p></div>
<div class="slide s4">Команда:<br><br>
<img src="https://upforme.ru/uploads/001c/73/c0/2/820214.png" alt="25"><img src="https://upforme.ru/uploads/001c/73/c0/2/897522.png" alt="27">
<br><img src="https://upforme.ru/uploads/001c/73/c0/2/395586.png" alt="31"> <img src="https://upforme.ru/uploads/001c/73/c0/2/320343.png" alt="28"><br><br>
</div>
</div>
</div>
<div class="col right">
<label class="nav for-s1" for="pc2-s2">▶</label>
<label class="nav for-s2" for="pc2-s3">▶</label>
<label class="nav for-s3" for="pc2-s4">▶</label>
<label class="nav for-s4" for="pc2-s1">▶</label>
</div>
</div>
</div>
</div>
<!-- КАРТОЧКА 3 -->
<div class="card" data-id="pc3">
<div class="card-header">
<h4>Клаус</h4>
<p class="sub">Кузнец и мастер</p>
</div>
<div class="card-image">
<img src="https://upforme.ru/uploads/001c/73/c0/2/956932.png" alt="Hero">
</div>
<div class="card-text">
<div class="diamond"><span>41</span></div>
<input class="sr-radio" type="radio" name="pc3" id="pc3-s1" checked>
<input class="sr-radio" type="radio" name="pc3" id="pc3-s2">
<input class="sr-radio" type="radio" name="pc3" id="pc3-s3">
<input class="sr-radio" type="radio" name="pc3" id="pc3-s4">
<div class="text-row">
<div class="col left">
<label class="nav for-s1" for="pc3-s4">◀</label>
<label class="nav for-s2" for="pc3-s1">◀</label>
<label class="nav for-s3" for="pc3-s2">◀</label>
<label class="nav for-s4" for="pc3-s3">◀</label>
</div>
<div class="col center">
<div class="slides">
<div class="slide s1"><p>Кузнец из Вирбанка. Его профессия перестала быть востребованной ещё в молодости, но он нашёл способ сохранить ремесло в современном мире. К радости туристов, он открыл небольшую, рабочую кузню на окраинах Вирбанка, где за небольшой взнос проводит экскурсию по цехам и позволяет увидеть кузнечное дело изнутри.</p></div>
<div class="slide s2"><p>Очень любит детей, пусть и с виду суров. Часто хранит сладости для детворы или мастерит для них всевозможные приспособления, служащие скорее безделушками в современном мире.</p></div>
<div class="slide s3"><p>Ходят слухи, что он каким-то образом смог улучшить механизм ультрабола, чтобы шанс ни чем не уступал мастерболу. И это не единственное, что ему удалось воспроизвести. К нему не раз наведывались подозрительные типы, чтобы втянуть в тёмные дела. Говорят, Клаус всех прогнал взашей.</p></div>
<div class="slide s4">Команда:<br><br>
<img src="https://upforme.ru/uploads/001c/73/c0/2/837338.png" alt="34"><img src="https://upforme.ru/uploads/001c/73/c0/2/666889.png" alt="15">
<br><img src="https://upforme.ru/uploads/001c/73/c0/2/978512.png" alt="38"> <img src="https://upforme.ru/uploads/001c/73/c0/2/101303.png" alt="39"><br><br>
</div>
</div>
</div>
<div class="col right">
<label class="nav for-s1" for="pc3-s2">▶</label>
<label class="nav for-s2" for="pc3-s3">▶</label>
<label class="nav for-s3" for="pc3-s4">▶</label>
<label class="nav for-s4" for="pc3-s1">▶</label>
</div>
</div>
</div>
</div>
<!-- КАРТОЧКА 4 -->
<div class="card" data-id="pc4">
<div class="card-header">
<h4>Джен</h4>
<p class="sub">Бунтарка из Гумалау</p>
</div>
<div class="card-image">
<img src="https://upforme.ru/uploads/001c/73/c0/2/28437.png" alt="Hero">
</div>
<div class="card-text">
<div class="diamond"><span>47</span></div>
<input class="sr-radio" type="radio" name="pc4" id="pc4-s1" checked>
<input class="sr-radio" type="radio" name="pc4" id="pc4-s2">
<input class="sr-radio" type="radio" name="pc4" id="pc4-s3">
<input class="sr-radio" type="radio" name="pc4" id="pc4-s4">
<div class="text-row">
<div class="col left">
<label class="nav for-s1" for="pc4-s4">◀</label>
<label class="nav for-s2" for="pc4-s1">◀</label>
<label class="nav for-s3" for="pc4-s2">◀</label>
<label class="nav for-s4" for="pc4-s3">◀</label>
</div>
<div class="col center">
<div class="slides">
<div class="slide s1"><p>Когда-то её знали как одну из офицеров Дженни в Юнове. Она честно несла службу в Вирбанке, городе с заводами, музыкой и постоянными проблемами на улицах. Но чем дольше Дженни работала, тем сильнее чувствовала: её идеалы не совпадают с тем, что от неё требовала система.</p></div>
<div class="slide s2"><p>Крутится вокруг подпольных арен, баров и улиц. Ведёт себя так, будто ей всё равно, но на самом деле продолжает защищать слабых — только уже своими методами, без правил. Очень легка на подъём, особенно если есть шанс размяться.</p></div>
<div class="slide s3"><p>Пусть она выглядит очень бодро, она всё равно отрезана от своей семьи в Вирбанке. Для родственников она — позор семьи, неудавшийся офицер полиции, оставивший свой пост. У неё есть свои причины и она доверяет собственному выбору, но, если хотите остаться с ней в хороших отношениях, лучше звать её Джен, а не "Дженни", и не упоминать её родных.</p></div>
<div class="slide s4">Команда:<br><br>
<img src="https://upforme.ru/uploads/001c/73/c0/2/122619.png" alt="45"><img src="https://upforme.ru/uploads/001c/73/c0/2/660984.png" alt="47">
<img src="https://upforme.ru/uploads/001c/73/c0/2/752870.png" alt="47">
<br><img src="https://upforme.ru/uploads/001c/73/c0/2/275486.png" alt="44"> <img src="https://upforme.ru/uploads/001c/73/c0/2/811966.png" alt="49"><br><br>
</div>
</div>
</div>
<div class="col right">
<label class="nav for-s1" for="pc4-s2">▶</label>
<label class="nav for-s2" for="pc4-s3">▶</label>
<label class="nav for-s3" for="pc4-s4">▶</label>
<label class="nav for-s4" for="pc4-s1">▶</label>
</div>
</div>
</div>
</div>
</div>
<style>
:root{
--c-teal:#F5843D;
--c-teal-mid:#F67E28;
--c-teal-dark:#e6684d;
--c-white:#fff;
--c-text:#702e22;
--shadow:0 6px 16px rgba(0,0,0,.15);
--radius:14px;
}
.banner{
position:relative;
width: 740px;
margin: 0px auto 20px;
padding:22px 20px 10px;
border-radius:var(--radius);
color:var(--c-white);
box-shadow:var(--shadow);
border:2px solid var(--c-teal);
background:linear-gradient(135deg,var(--c-teal) 0%,var(--c-teal-mid) 60%,var(--c-teal-dark) 100%);
}
.banner::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:linear-gradient(-18deg,transparent 0 72%,rgba(255,255,255,.08) 72% 74%,transparent 74%);
}
.banner .title{
margin:0 0 10px;
font-size:24px;
font-family:var(--bold-font);
text-transform:uppercase;
letter-spacing:.03em;
}
.banner .desc{
margin:0;
font-size:14px;
line-height:1.55;
}
/* ===== раскладка 3 в ряд ===== */
.cards{
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:center;
}
/* ===== базовая карточка ===== */
.card{
width:180px;
background:#fff;
border:2px solid var(--accent);
border-radius:10px;
overflow:hidden;
position:relative;
box-shadow:0 4px 12px rgba(0,0,0,.2);
font-family:system-ui, Arial, sans-serif;
}
.card-header{
padding:6px 8px 4px;
background:#f7f7f7;
border-bottom:1px solid var(--accent);
text-align:center;
}
.card-header h4{
margin:0; font-size:16px; color:var(--dark-text); line-height:1.1;
font-family:var(--main-font); letter-spacing:.4px;
}
.card-header .sub{
margin:2px 0 0; font-size:12px; color:var(--dark-accent); font-weight:600;text-align:center;
}
.card-image{
width:100%; /* совпадает с .card */
height:auto;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(0deg,#efefef,#e7e7e7);
}
.card-image img{ max-width:100%; height:auto; object-fit:contain; display:block; }
.card-text{
position:relative;
padding:20px 10px;
border-top:1px solid var(--accent);
text-align:center;
}
/* ===== алмаз ===== */
.diamond{
width:28px; height:28px;
transform:translate(-50%,-50%) rotate(45deg);
position:absolute; left:50%; top:0;
background:linear-gradient(145deg,#FCD0B1,#F8954F);
border:3px solid rgba(255,255,255,.9);
box-shadow:0 3px 10px rgba(0,0,0,.15);
border-radius:6px; display:grid; place-items:center;
z-index:5;
}
.diamond > span{ transform:rotate(-45deg); font-size:12px; font-weight:700; color:#222; }
/* ===== полностью скрыть radio без наложения и фокуса ===== */
.sr-radio{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden;
pointer-events:none;
}
/* ===== строка 1/3/1 ===== */
.text-row{ display:flex; align-items:stretch; gap:0px; width: 220px;
transform: translateX(-30px);overflow:auto; z-index:999999; }
.text-row .col{ display:flex; align-items:center; justify-content:center; }
.text-row .left{ flex:1; }
.text-row .center{flex:3; }
.text-row .right{ flex:1; }
/* ===== скролл ТОЛЬКО у центра ===== */
.slides{
width:100%;
max-height:106px; /* окно просмотра текста */
overflow-y:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Firefox: скрыть полосу */
word-break:break-word; /* длинные слова не ломают верстку */
}
.slides::-webkit-scrollbar{ width:0; height:0; } /* WebKit: скрыть полосу */
/* ===== слайды ===== */
.slide{ display:none; }
.slide p{ margin:0; font-size:12px; color:#2a2a2a; line-height:1.25; }
.slide img{ max-width:100%; height:auto; display:block; }
.slide.s4 img {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
/* ===== стрелки ===== */
.nav{
width:24px; height:24px;
display:none; /* по умолчанию скрыты; показываем нужную */
justify-content:center; align-items:center;
border-radius:50%;
background:var(--accent); color:#fff;
border:1px solid var(--accent);
cursor:pointer; user-select:none; font-size:12px;
}
.nav:hover{ filter:brightness(1.06); }
/* ===== привязка к конкретной карточке через data-id ===== */
/* pc1 */
.card[data-id="pc1"] #pc1-s1:checked ~ .text-row .slides .s1{ display:block; }
.card[data-id="pc1"] #pc1-s2:checked ~ .text-row .slides .s2{ display:block; }
.card[data-id="pc1"] #pc1-s3:checked ~ .text-row .slides .s3{ display:block; }
.card[data-id="pc1"] #pc1-s4:checked ~ .text-row .slides .s4{ display:block; }
.card[data-id="pc1"] #pc1-s1:checked ~ .text-row .left .for-s1,
.card[data-id="pc1"] #pc1-s1:checked ~ .text-row .right .for-s1{ display:flex; }
.card[data-id="pc1"] #pc1-s2:checked ~ .text-row .left .for-s2,
.card[data-id="pc1"] #pc1-s2:checked ~ .text-row .right .for-s2{ display:flex; }
.card[data-id="pc1"] #pc1-s3:checked ~ .text-row .left .for-s3,
.card[data-id="pc1"] #pc1-s3:checked ~ .text-row .right .for-s3{ display:flex; }
.card[data-id="pc1"] #pc1-s4:checked ~ .text-row .left .for-s4,
.card[data-id="pc1"] #pc1-s4:checked ~ .text-row .right .for-s4{ display:flex; }
/* pc2 */
.card[data-id="pc2"] #pc2-s1:checked ~ .text-row .slides .s1{ display:block; }
.card[data-id="pc2"] #pc2-s2:checked ~ .text-row .slides .s2{ display:block; }
.card[data-id="pc2"] #pc2-s3:checked ~ .text-row .slides .s3{ display:block; }
.card[data-id="pc2"] #pc2-s4:checked ~ .text-row .slides .s4{ display:block; }
.card[data-id="pc2"] #pc2-s1:checked ~ .text-row .left .for-s1,
.card[data-id="pc2"] #pc2-s1:checked ~ .text-row .right .for-s1{ display:flex; }
.card[data-id="pc2"] #pc2-s2:checked ~ .text-row .left .for-s2,
.card[data-id="pc2"] #pc2-s2:checked ~ .text-row .right .for-s2{ display:flex; }
.card[data-id="pc2"] #pc2-s3:checked ~ .text-row .left .for-s3,
.card[data-id="pc2"] #pc2-s3:checked ~ .text-row .right .for-s3{ display:flex; }
.card[data-id="pc2"] #pc2-s4:checked ~ .text-row .left .for-s4,
.card[data-id="pc2"] #pc2-s4:checked ~ .text-row .right .for-s4{ display:flex; }
/* pc3 */
.card[data-id="pc3"] #pc3-s1:checked ~ .text-row .slides .s1{ display:block; }
.card[data-id="pc3"] #pc3-s2:checked ~ .text-row .slides .s2{ display:block; }
.card[data-id="pc3"] #pc3-s3:checked ~ .text-row .slides .s3{ display:block; }
.card[data-id="pc3"] #pc3-s4:checked ~ .text-row .slides .s4{ display:block; }
.card[data-id="pc3"] #pc3-s1:checked ~ .text-row .left .for-s1,
.card[data-id="pc3"] #pc3-s1:checked ~ .text-row .right .for-s1{ display:flex; }
.card[data-id="pc3"] #pc3-s2:checked ~ .text-row .left .for-s2,
.card[data-id="pc3"] #pc3-s2:checked ~ .text-row .right .for-s2{ display:flex; }
.card[data-id="pc3"] #pc3-s3:checked ~ .text-row .left .for-s3,
.card[data-id="pc3"] #pc3-s3:checked ~ .text-row .right .for-s3{ display:flex; }
.card[data-id="pc3"] #pc3-s4:checked ~ .text-row .left .for-s4,
.card[data-id="pc3"] #pc3-s4:checked ~ .text-row .right .for-s4{ display:flex; }
/* pc4 */
.card[data-id="pc4"] #pc4-s1:checked ~ .text-row .slides .s1{ display:block; }
.card[data-id="pc4"] #pc4-s2:checked ~ .text-row .slides .s2{ display:block; }
.card[data-id="pc4"] #pc4-s3:checked ~ .text-row .slides .s3{ display:block; }
.card[data-id="pc4"] #pc4-s4:checked ~ .text-row .slides .s4{ display:block; }
.card[data-id="pc4"] #pc4-s1:checked ~ .text-row .left .for-s1,
.card[data-id="pc4"] #pc4-s1:checked ~ .text-row .right .for-s1{ display:flex; }
.card[data-id="pc4"] #pc4-s2:checked ~ .text-row .left .for-s2,
.card[data-id="pc4"] #pc4-s2:checked ~ .text-row .right .for-s2{ display:flex; }
.card[data-id="pc4"] #pc4-s3:checked ~ .text-row .left .for-s3,
.card[data-id="pc4"] #pc4-s3:checked ~ .text-row .right .for-s3{ display:flex; }
.card[data-id="pc4"] #pc4-s4:checked ~ .text-row .left .for-s4,
.card[data-id="pc4"] #pc4-s4:checked ~ .text-row .right .for-s4{ display:flex; }
</style]
[/html]
