[hideprofile]
[html]
<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;
}
.rankinfo{
width:100%;
display:flex;
flex-direction:column;
gap:12px;
font-family:var(--main-font);
color:var(--c-text);
}
.rank-top{
display:flex;
gap:14px;
}
.rank-left{
width:28%;
display:flex;
justify-content:center;
align-items:center;
}
.rank-left img{
max-width:100%;
border-radius:var(--radius);
box-shadow:var(--shadow);
border:2px solid var(--c-teal);
min-height: 430px;
}
.rank-right{
flex:1;
display:flex;
max-height: 434px;
}
.rank-banner{
position:relative;
flex:1;
padding:22px 20px 28px;
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%);
}
.rank-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%);
}
.rank-banner .title{
margin:0 0 10px;
font-size:24px;
font-family:var(--bold-font);
text-transform:uppercase;
letter-spacing:.03em;
}
.rank-banner .desc{
margin:0;
font-size:14px;
line-height:1.55;
}
.players-list{
max-height:190px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:6px;
padding:10px;
border:2px solid var(--c-teal);
border-radius:var(--radius);
background: #F8F4F1;
box-shadow:var(--shadow);
}
.player{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
border:1px solid var(--c-teal);
border-radius:12px;
background: var(--c-white);
font-weight:700;
color:#A42B13;
}
.player .rank-name{
flex:1;
text-align:left;
}
.diamond{
width:28px;
height:28px;
flex:0 0 auto;
display:grid;
place-items:center;
transform:rotate(45deg);
border-radius:6px;
background:linear-gradient(145deg,#FCD0B1,#F8954F);
border:3px solid rgba(255,255,255,.9);
box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.diamond > span{
transform:rotate(-45deg);
font-size:13px;
font-weight:900;
color:#fff;
}
/* Адаптив: в столбик на узких экранах */
@media (max-width: 820px){
.rank-top{ flex-direction:column; }
.rank-left{ width:100%; }
}
</style>
<div class="rankinfo">
<div class="rank-top">
<div class="rank-left">
<img src="https://forumstatic.ru/files/001c/73/c0/83213.png" alt="Иллюстрация Ассоциации Тренеров Юновы">
</div>
<div class="rank-right">
<div class="rank-banner">
<div class="title">Ассоциация Тренеров Юновы:<br>Рейтинговая система</div>
<div class="desc">
<p>В регионе Юнова любое сражение покемонов — часть единого рейтинга славы, фиксирующего успехи и неудачи каждого тренера. Сотни боёв проходят ежедневно — в городских залах, на аренах стадионов, в лесах и пустынях, а порой даже в подворотнях.</p>
<p>Каждый победитель и каждый побеждённый оставляют свой след в истории. И каждый стремится взобраться выше ради титула Почётного Героя. Эта система стала символом справедливого соревнования и роста, объединяя тренеров — от новичков с их первыми партнёрами до мастеров, чьи имена известны по всей Юнове.</p>
<p>На нижних ступенях кипит поток новичков. На средних уровнях — напряжённая борьба, где каждое очко на вес золота. На вершине схватки редки и часто становятся предметом жарких обсуждений. Лишь немногие добираются до верхних позиций, и эти имена остаются в истории Юновы надолго.</p>
<p>Но со славой приходит ответственность. Достижение почётных рейтингов — показатель силы, закалённой в боях.</p>
</div>
</div>
</div>
</div>
<div class="players-list">
<div class="player"><span class="rank-name">Игрок 1</span><div class="diamond"><span>100</span></div></div>
<div class="player"><span class="rank-name">Игрок 2</span><div class="diamond"><span>95</span></div></div>
<div class="player"><span class="rank-name">Игрок 3</span><div class="diamond"><span>88</span></div></div>
<div class="player"><span class="rank-name">Игрок 4</span><div class="diamond"><span>80</span></div></div>
<div class="player"><span class="rank-name">Игрок 5</span><div class="diamond"><span>75</span></div></div>
</div>
</div>
[/html]
