/* v1.2 卡片式角色排行榜 */
.rank-hero{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin:6px 0 22px}
.rank-kicker{font-size:12px;font-weight:900;letter-spacing:2.8px;color:#7f8fa6;margin-bottom:8px}
.rank-hero h1{font-size:42px;line-height:1;margin:0 0 10px;color:#fff}
.rank-hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.rank-order-note{min-width:330px;padding:14px 16px;border:1px solid #344158;border-radius:10px;background:#101621;text-align:right}
.rank-order-note span{display:block;color:#7f8fa6;font-size:12px;margin-bottom:5px}
.rank-order-note b{font-size:14px;color:var(--gold2)}

.rank-panel{padding:14px 16px;margin-bottom:16px}
.rank-filter-bar{display:flex;justify-content:space-between;gap:18px;align-items:center}
.rank-filter-controls{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.rank-select-wrap{display:flex;align-items:center;gap:7px;color:#8795a8;font-size:12px;white-space:nowrap}
.rank-select-wrap select{width:86px;padding:9px 9px}
.rank-search{width:190px;padding:9px 11px}
.rank-filter-controls .btn{padding:9px 14px}

.rank-list{display:grid;gap:14px}
.rank-card{
    position:relative;display:grid;
    grid-template-columns:128px minmax(360px,1fr) 390px;
    min-height:225px;
    border:1px solid #293445;
    background:
      linear-gradient(90deg,rgba(17,22,31,.98),rgba(14,18,25,.98));
    border-radius:12px;overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.22)
}
.rank-card:hover{border-color:#4a596e;transform:translateY(-1px)}
.rank-card.rank-top1{border-color:#705926;box-shadow:0 15px 40px rgba(155,111,24,.12)}
.rank-card.rank-top2{border-color:#4d586a}
.rank-card.rank-top3{border-color:#69482e}

.rank-position{
    position:absolute;top:0;left:0;z-index:5;
    width:58px;height:32px;display:flex;align-items:center;justify-content:center;
    clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
    background:#263245;color:#fff;font-size:17px;font-weight:900
}
.rank-top1 .rank-position{background:linear-gradient(135deg,#f7c82b,#c68c00);color:#171000}
.rank-top2 .rank-position{background:linear-gradient(135deg,#c5d0df,#77879c);color:#10151d}
.rank-top3 .rank-position{background:linear-gradient(135deg,#d98943,#955126);color:#fff}

.rank-avatar{
    position:relative;overflow:hidden;min-height:225px;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    padding:20px 14px 14px;border-right:1px solid #2a3444;
    background:#131925
}
.rank-avatar:before,.rank-avatar:after{content:"";position:absolute;border-radius:50%;filter:blur(0)}
.rank-avatar:before{width:170px;height:170px;left:-50px;top:-35px;opacity:.55}
.rank-avatar:after{width:125px;height:125px;right:-65px;bottom:5px;opacity:.25}
.rank-avatar.class-wizard{background:linear-gradient(160deg,#21183c,#101724 67%)}
.rank-avatar.class-wizard:before{background:radial-gradient(circle,#7356ff 0,transparent 66%)}
.rank-avatar.class-knight{background:linear-gradient(160deg,#3b1717,#16171c 67%)}
.rank-avatar.class-knight:before{background:radial-gradient(circle,#d7492f 0,transparent 66%)}
.rank-avatar.class-elf{background:linear-gradient(160deg,#143a2e,#101b18 67%)}
.rank-avatar.class-elf:before{background:radial-gradient(circle,#3adf9b 0,transparent 66%)}
.rank-avatar.class-mg{background:linear-gradient(160deg,#40213e,#18131d 67%)}
.rank-avatar.class-mg:before{background:radial-gradient(circle,#e445ba 0,transparent 66%)}
.rank-avatar.class-dl{background:linear-gradient(160deg,#3f3415,#1c1910 67%)}
.rank-avatar.class-dl:before{background:radial-gradient(circle,#f2c044 0,transparent 66%)}
.rank-avatar.class-summoner{background:linear-gradient(160deg,#2f1942,#171120 67%)}
.rank-avatar.class-summoner:before{background:radial-gradient(circle,#b766ef 0,transparent 66%)}
.rank-avatar.class-rf{background:linear-gradient(160deg,#14333b,#10191c 67%)}
.rank-avatar.class-rf:before{background:radial-gradient(circle,#39c9e5 0,transparent 66%)}
.rank-avatar-rune{
    position:relative;z-index:2;margin:auto 0;
    width:74px;height:74px;border:1px solid rgba(255,255,255,.22);border-radius:18px;
    background:rgba(5,8,14,.34);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    font-size:35px;font-weight:900;color:#fff;text-shadow:0 5px 22px rgba(0,0,0,.55);
    transform:rotate(-5deg)
}
.rank-avatar-class{position:relative;z-index:2;font-weight:800;color:#dde5ef;font-size:13px;letter-spacing:1px}

.rank-character-info{padding:18px 20px;min-width:0;display:flex;flex-direction:column}
.rank-name-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.rank-character-name{font-size:21px;font-weight:900;color:#fff}
.rank-character-name:hover{color:var(--gold2)}
.rank-class-name{color:#95a7bd;font-size:13px}
.rank-title-badge{font-size:11px;padding:3px 7px;border-radius:999px;border:1px solid}
.rank-title-badge{color:#86c7ff;border-color:#345b7c;background:#102132}
.rank-online{margin-left:auto;font-size:11px;color:#738094;display:flex;align-items:center;gap:5px}
.rank-online i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#5b6370}
.rank-online.on{color:#83dbaa}.rank-online.on i{background:#42d982;box-shadow:0 0 9px rgba(66,217,130,.7)}

.rank-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2a3341;border:1px solid #2a3341;border-radius:9px;overflow:hidden}
.rank-stat-grid>div{background:#101620;padding:10px 12px;display:flex;justify-content:space-between;gap:9px}
.rank-stat-grid span{font-size:12px;color:#8391a5}
.rank-stat-grid b{font-size:14px;color:#e8edf4}
.rank-meta-line{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;color:#7f8da0;font-size:12px}
.rank-meta-line b{color:#cfd8e5;font-weight:700}
.rank-card-actions{margin-top:auto;padding-top:10px}
.rank-detail-link{font-size:12px;color:#d8b868}

.rank-equipment{border-left:1px solid #293445;background:#0b1017;padding:14px}
.rank-equipment-title{font-size:12px;color:#8492a5;margin-bottom:9px;font-weight:800;letter-spacing:1px}
.rank-paperdoll{
    position:relative;height:322px;border:1px solid #293445;border-radius:10px;
    background:
      radial-gradient(circle at 50% 35%,rgba(72,113,177,.12),transparent 28%),
      linear-gradient(180deg,rgba(18,24,34,.98),rgba(10,14,21,.98));
    overflow:hidden;
}
.rank-paperdoll:before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:28px 28px;pointer-events:none
}
.rank-paperdoll-body{position:absolute;left:50%;top:50%;width:112px;height:212px;transform:translate(-50%,-46%);opacity:.22;pointer-events:none}
.rank-paperdoll-body i{position:absolute;display:block;border:1px solid rgba(148,179,223,.48);background:rgba(98,130,179,.12);box-shadow:0 0 18px rgba(100,142,210,.06) inset;border-radius:14px}
.rank-paperdoll-body .pd-head{width:38px;height:38px;border-radius:50%;left:37px;top:0}
.rank-paperdoll-body .pd-body{width:56px;height:88px;left:28px;top:46px;border-radius:20px}
.rank-paperdoll-body .pd-arm{width:18px;height:82px;top:54px;border-radius:12px}
.rank-paperdoll-body .pd-arm.left{left:4px;transform:rotate(10deg)}
.rank-paperdoll-body .pd-arm.right{right:4px;transform:rotate(-10deg)}
.rank-paperdoll-body .pd-leg{width:20px;height:84px;top:126px;border-radius:12px}
.rank-paperdoll-body .pd-leg.left{left:31px}
.rank-paperdoll-body .pd-leg.right{right:31px}
.rank-eq-slot{
    position:absolute;min-width:0;border:1px solid #4f3c16;border-radius:8px;
    background:linear-gradient(180deg,#140f08,#090d13);display:flex;align-items:center;justify-content:center;
    overflow:hidden;transition:.15s ease;box-shadow:0 0 0 1px rgba(211,165,65,.16) inset,0 8px 18px rgba(0,0,0,.28)
}
.rank-eq-slot:hover{border-color:#e0b75b;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(231,195,104,.24) inset,0 12px 22px rgba(0,0,0,.34)}
.rank-eq-slot.has-item{background:radial-gradient(circle at 50% 35%,rgba(63,88,121,.95),rgba(14,18,24,.98) 78%);border-color:#836323}
.rank-eq-slot.empty{background:linear-gradient(180deg,#110d0b,#0a0d13);border-style:solid;border-color:#3b2d13}
.rank-eq-slot-label{position:absolute;left:4px;bottom:3px;color:#8e7341;font-size:9px;white-space:nowrap;letter-spacing:.5px}
.rank-eq-glyph{font-size:22px;color:#f5e8b1;text-shadow:0 0 14px rgba(228,207,134,.18);font-weight:800}
.rank-eq-icon{max-width:88%;max-height:88%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.rank-eq-level{position:absolute;right:4px;bottom:4px;color:#63e19a;font-size:11px;font-weight:900;text-shadow:0 0 8px rgba(34,255,145,.16)}
.rank-eq-empty{color:#5f4a24;font-size:18px;font-weight:800;opacity:.9}
.rank-eq-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.rank-eq-slot .rank-eq-dot{position:absolute;top:5px;left:5px}
.rank-eq-slot .rank-eq-dot.exc{top:14px}
.rank-eq-dot.set{background:#478ee8;box-shadow:0 0 6px #478ee8}
.rank-eq-dot.exc{background:#39d67b;box-shadow:0 0 6px #39d67b}
.rank-eq-sample{width:11px;height:11px;border:1px solid #7f6630;background:#12100d;border-radius:3px;display:inline-block}
.rank-eq-legend{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px;color:#687589;font-size:9px}
.rank-eq-legend span{display:flex;align-items:center;gap:4px}
.rank-slot-pet{width:56px;height:56px;left:14px;top:14px}
.rank-slot-necklace{width:44px;height:44px;left:98px;top:26px}
.rank-slot-helm{width:58px;height:58px;left:148px;top:12px}
.rank-slot-wing{width:68px;height:68px;right:12px;top:10px}
.rank-slot-right-hand{width:58px;height:74px;left:12px;top:92px}
.rank-slot-ring1{width:40px;height:40px;left:104px;top:112px}
.rank-slot-armor{width:72px;height:84px;left:144px;top:86px}
.rank-slot-ring2{width:40px;height:40px;right:106px;top:112px}
.rank-slot-left-hand{width:58px;height:74px;right:12px;top:92px}
.rank-slot-glove{width:54px;height:54px;left:52px;bottom:46px}
.rank-slot-leg{width:66px;height:78px;left:148px;bottom:28px}
.rank-slot-boot{width:58px;height:58px;right:38px;bottom:28px}

@media(max-width:1100px){
  .rank-card{grid-template-columns:105px 1fr 315px}
  .rank-equipment{padding:11px}
  .rank-stat-grid{grid-template-columns:repeat(2,1fr)}
  .rank-paperdoll{height:306px}
}
@media(max-width:860px){
  .rank-hero{align-items:flex-start;flex-direction:column}
  .rank-order-note{min-width:0;width:100%;text-align:left}
  .rank-filter-bar{align-items:stretch;flex-direction:column}
  .rank-filter-controls{width:100%;flex-wrap:wrap}
  .rank-search{flex:1;min-width:160px}
  .rank-card{grid-template-columns:92px 1fr}
  .rank-equipment{grid-column:1/-1;border-left:0;border-top:1px solid #293445}
  .rank-paperdoll{height:320px}
  .rank-avatar{min-height:200px}
}
@media(max-width:570px){
  .rank-card{grid-template-columns:1fr}
  .rank-avatar{min-height:120px;border-right:0;border-bottom:1px solid #293445}
  .rank-avatar-rune{width:58px;height:58px;font-size:27px}
  .rank-character-info{padding:15px}
  .rank-stat-grid{grid-template-columns:1fr 1fr}
  .rank-online{margin-left:0}
  .rank-paperdoll{height:290px;transform:scale(.94);transform-origin:top center}
}

.rank-slot-wing .rank-eq-icon{max-width:96%;max-height:96%}
.rank-slot-right-hand .rank-eq-icon,.rank-slot-left-hand .rank-eq-icon{max-width:92%;max-height:92%}