.ranking-dialog .ranking-list>li{animation:rank-arrive .42s both;animation-delay:var(--rank-delay,0ms);transition:border-color .2s,box-shadow .2s,transform .2s}
.ranking-dialog .ranking-list>li:hover{border-color:#9bc9e2;box-shadow:0 6px 20px #163d6010;transform:translateY(-2px)}
.ranking-dialog .ranking-place{flex-shrink:0}
.ranking-dialog .rank-medal{width:44px;height:50px;display:grid;place-items:center;position:relative;color:#725116;isolation:isolate}
.rank-medal:before{content:'';position:absolute;inset:0 5px 5px;clip-path:polygon(0 0,100% 0,92% 76%,50% 100%,8% 76%);background:linear-gradient(130deg,#ffebaf,#deb65b);z-index:-1}
.rank-medal span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffffa6;border-radius:50%;font-size:18px;box-shadow:inset 0 1px 3px #ffffff85}
.ranking-dialog .rank-medal-2{color:#476175}.rank-medal-2:before{background:linear-gradient(130deg,#f0f6ff,#9aafc2)}
.ranking-dialog .rank-medal-3{color:#854c27}.rank-medal-3:before{background:linear-gradient(130deg,#ffe2c8,#c38b66)}
.rank-level-ready{--level-color:#607b91;--level-bg:#edf3f7;--level-border:#d4e1e9}
.rank-level-first{--level-color:#08795d;--level-bg:#e4f7ee;--level-border:#bce8d4}
.rank-level-rise{--level-color:#006eb0;--level-bg:#e4f4ff;--level-border:#b7dff6}
.rank-level-flow{--level-color:#6742b5;--level-bg:#f1eaff;--level-border:#d6c5f5}
.rank-level-pro{--level-color:#91600e;--level-bg:#fff4d8;--level-border:#edcf88}
.ranking-dialog .rank-level{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--level-color);background:var(--level-bg);border:1px solid var(--level-border);border-radius:9px;padding:3px 8px 3px 4px;margin:7px 0}
.rank-emblem{display:inline-grid;place-items:center;width:27px;height:29px;background:var(--level-bg);color:var(--level-color);flex-shrink:0}
.rank-emblem svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ranking-dialog .ranking-progress{height:5px;max-width:260px}.rank-next{display:block;font-size:10px;color:#657e91;margin-top:5px}
.rank-achievements{border:1px solid #dce8f1;border-radius:16px;background:white;padding:16px;margin-bottom:20px}
.rank-achievements-title{font-size:10px;letter-spacing:1.2px;font-weight:700;color:#315671;display:flex;justify-content:space-between}.rank-achievements-title span{letter-spacing:0;font-weight:400;color:#738999}
.rank-achievement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.rank-achievement{text-align:center;color:var(--level-color);min-width:0}.rank-achievement .rank-emblem{width:52px;height:56px;clip-path:polygon(50% 0,95% 18%,88% 76%,50% 100%,12% 76%,5% 18%);background:linear-gradient(140deg,var(--level-bg),var(--level-border));filter:drop-shadow(0 3px 3px #143f5915)}
.rank-achievement .rank-emblem svg{width:28px;height:28px}.rank-achievement strong{display:block;font-size:11px;margin-top:7px}.rank-achievement small{font-size:10px;display:block;margin-top:2px}.rank-achievement.is-locked{--level-color:#8394a3;--level-bg:#f4f6f8;--level-border:#e1e7ec}
.ranking-dialog .ranking-hero{position:relative;overflow:hidden}.rank-unlocked{background:#e7f8ee;color:#08734f;border:1px solid #b6e1ca;border-radius:12px;text-align:center;padding:12px;font-weight:700;margin:-8px 0 18px;animation:rank-arrive .4s both}
.rank-burst{position:absolute;left:50%;top:50%;pointer-events:none}.rank-burst i{position:absolute;width:6px;height:10px;border-radius:2px;background:#83ddf9;animation:rank-spark 1.1s ease-out both}.rank-burst i:nth-child(3n){background:#ffd277}.rank-burst i:nth-child(3n+1){background:#b5acff}
@keyframes rank-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes rank-spark{from{opacity:1;transform:rotate(var(--angle)) translateY(0)}to{opacity:0;transform:rotate(var(--angle)) translateY(var(--travel)) rotate(140deg)}}
@media(prefers-reduced-motion:reduce){.ranking-dialog .ranking-list>li,.rank-unlocked,.rank-burst i{animation:none!important;transition:none!important}.ranking-dialog .ranking-list>li:hover{transform:none}}