@keyframes rank-shimmer{
0%{background-position:-200px 0;}
100%{background-position:200px 0;}
}

@keyframes rank-glow{
0%,100%{box-shadow:0 0 18px rgba(212,175,55,.25);}
50%{box-shadow:0 0 30px rgba(212,175,55,.5);}
}

.ranking-list{
display:flex;
flex-direction:column;
gap:14px;
}

.rank-card{
background:#151124;
border:1px solid rgba(56,189,248,.15);
border-radius:20px;
padding:18px 22px;
display:flex;
align-items:center;
gap:18px;
position:relative;
overflow:hidden;
transition:.2s;
}

.rank-card:hover{
border-color:rgba(56,189,248,.4);
transform:translateY(-2px);
}

.rank-position{
width:48px;
height:48px;
min-width:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:800;
background:rgba(56,189,248,.08);
border:1px solid rgba(56,189,248,.2);
color:#94a3b8;
}

.rank-card.is-top1,
.rank-card.is-top2,
.rank-card.is-top3{
border-width:1px;
background:linear-gradient(135deg,#1a1530,#151124);
}

.rank-card.is-top1{
border-color:rgba(212,175,55,.5);
animation:rank-glow 2.4s ease-in-out infinite;
}

.rank-card.is-top2{
border-color:rgba(203,213,225,.4);
box-shadow:0 0 16px rgba(203,213,225,.12);
}

.rank-card.is-top3{
border-color:rgba(217,119,6,.4);
box-shadow:0 0 16px rgba(217,119,6,.12);
}

.rank-card.is-top1 .rank-position{
background:linear-gradient(135deg,#d4af37,#f4d878);
border-color:transparent;
color:#1a1400;
font-size:22px;
}

.rank-card.is-top2 .rank-position{
background:linear-gradient(135deg,#cbd5e1,#94a3b8);
border-color:transparent;
color:#1a1400;
font-size:22px;
}

.rank-card.is-top3 .rank-position{
background:linear-gradient(135deg,#d97706,#f59e0b);
border-color:transparent;
color:#1a1400;
font-size:22px;
}

.rank-player{
flex:1;
min-width:0;
}

.rank-name{
font-size:17px;
font-weight:800;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.rank-card.is-top1 .rank-name{
color:#f4d878;
}

.rank-wallet{
font-size:12px;
color:#64748b;
margin-top:2px;
}

.rank-stats{
display:flex;
align-items:center;
gap:24px;
}

.rank-elo-block{
text-align:right;
}

.rank-elo{
font-size:22px;
font-weight:800;
color:#38bdf8;
}

.rank-elo-label{
font-size:11px;
font-weight:700;
color:#64748b;
text-transform:uppercase;
letter-spacing:.05em;
margin-left:4px;
}

.rank-record{
font-size:12px;
color:#94a3b8;
margin-top:2px;
white-space:nowrap;
}

.rank-winrate-track{
width:70px;
height:6px;
border-radius:6px;
background:#0b0a14;
overflow:hidden;
margin-top:6px;
}

.rank-winrate-fill{
height:100%;
background:linear-gradient(90deg,#0ea5e9,#22d3ee);
border-radius:6px;
}

.rank-skeleton{
background:linear-gradient(90deg,#151124 25%,#1d1830 37%,#151124 63%);
background-size:400px 100%;
animation:rank-shimmer 1.4s infinite linear;
border-radius:20px;
height:78px;
}

.rank-empty{
text-align:center;
color:#64748b;
padding:60px 20px;
}

@media(max-width:640px){

.rank-card{
flex-wrap:wrap;
padding:16px;
}

.rank-stats{
width:100%;
justify-content:space-between;
margin-top:10px;
}

}