#tsRank{
  position:fixed;inset:0;z-index:100000;display:none;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
}
#tsRank.show{display:block;}
.tsr-mask{position:absolute;inset:0;background:rgba(2,4,14,.8);}
.tsr-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94vw,400px);
  height:auto;max-height:min(94vh,760px);
  display:flex;flex-direction:column;
  color:#eef4ff;overflow:hidden;border-radius:18px;
  background:#0a1428 url(rank/rank-bg.webp) center top / 100% auto no-repeat;
  box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 2px rgba(255,206,90,.3),0 0 0 5px rgba(14,30,64,.95);
}
.tsr-panel:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,16,36,.42) 0%,rgba(8,16,36,.14) 26%,rgba(7,13,28,.72) 62%,rgba(6,11,24,.94) 100%);
}
.tsr-hd,.tsr-seg,.tsr-slot,.tsr-podium,.tsr-body,.tsr-self{position:relative;z-index:2;}

.tsr-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:12px 12px 6px;
}
.tsr-back,.tsr-hist{
  border:0;cursor:pointer;color:#fff;flex:0 0 auto;
  background:linear-gradient(180deg,#2c5390,#14285180);
  box-shadow:0 0 0 1px rgba(255,214,120,.35),0 4px 10px rgba(0,0,0,.4);
}
.tsr-back{width:34px;height:34px;border-radius:50%;font-size:24px;line-height:34px;padding:0;}
.tsr-hist{height:30px;border-radius:15px;padding:0 12px;font-size:12px;font-weight:800;color:#ffe1a0;}
.tsr-title{
  flex:1;text-align:center;
  font-size:22px;font-weight:900;letter-spacing:4px;
  background:linear-gradient(180deg,#fff6cf,#ffd24a 46%,#d59a12);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(60,30,0,.5));
}

.tsr-seg{display:flex;padding:0 12px 8px;gap:0;}
.tsr-seg.sub{padding-bottom:8px;}
.tsr-seg button{
  flex:1;border:0;cursor:pointer;height:34px;
  background:rgba(11,23,48,.82);color:#a9c0e4;
  font-size:13px;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(96,148,225,.26);
}
.tsr-seg button:first-child{border-radius:9px 0 0 9px;}
.tsr-seg button:last-child{border-radius:0 9px 9px 0;}
.tsr-seg button.on{color:#fff;}
#tsrPages button.on{
  background:linear-gradient(180deg,#ffd863,#d99a12);
  color:#3d2a05;
  box-shadow:inset 0 1px 0 rgba(255,250,220,.7),0 3px 10px rgba(210,150,20,.4);
}
#tsrTabs button.on{
  background:linear-gradient(180deg,#4f83ff,#1e46c8);
  box-shadow:inset 0 1px 0 rgba(220,235,255,.5),0 3px 10px rgba(40,90,220,.4);
}

.tsr-slot{display:flex;align-items:center;gap:6px;padding:0 12px 4px;}
.tsr-slot button{
  flex:0 0 30px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(11,23,48,.82);color:#cfe0ff;font-size:16px;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(96,148,225,.26);
}
.tsr-slot select{
  flex:1;height:30px;border:0;border-radius:8px;
  background:rgba(11,23,48,.82);color:#ffe1a0;font-size:12px;font-weight:800;padding:0 8px;
  box-shadow:inset 0 0 0 1px rgba(255,206,90,.24);
}
.tsr-note{
  position:relative;z-index:2;
  padding:2px 14px 0;color:#93b4dd;font-size:11px;text-align:center;
}

.tsr-podium{
  display:grid;grid-template-columns:1fr 1.14fr 1fr;
  align-items:end;gap:4px;padding:6px 10px 0;
}
.tsr-p{display:flex;flex-direction:column;align-items:center;min-width:0;}
.tsr-fig{
  position:relative;height:82px;width:100%;
  display:flex;align-items:flex-end;justify-content:center;
}
.tsr-p1 .tsr-fig{height:108px;}
.tsr-char{
  max-width:100%;height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));
}
.tsr-p.empty .tsr-char{opacity:.3;filter:grayscale(1) brightness(.7);}
.tsr-crown{
  position:absolute;left:50%;top:-6px;width:38px;
  transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(255,190,60,.6));
}
.tsr-plate{
  width:100%;margin-top:4px;padding:4px 2px 5px;
  border-radius:8px;text-align:center;
  background:linear-gradient(180deg,rgba(16,34,70,.9),rgba(9,19,42,.92));
  box-shadow:inset 0 0 0 1px rgba(96,148,225,.3);
}
.tsr-p1 .tsr-plate{box-shadow:inset 0 0 0 1px rgba(255,206,90,.55);}
.tsr-p2 .tsr-plate{box-shadow:inset 0 0 0 1px rgba(196,214,240,.45);}
.tsr-p3 .tsr-plate{box-shadow:inset 0 0 0 1px rgba(226,160,108,.45);}
.tsr-plate .nm{
  font-size:12px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;
}
.tsr-p.empty .tsr-plate .nm{color:#7e97bd;font-weight:700;}
.tsr-plate .sc{
  display:inline-flex;align-items:center;gap:3px;margin-top:3px;
  font-size:12px;font-weight:900;color:#ffe9b0;
}
.tsr-ped{
  position:relative;width:100%;height:30px;margin-top:2px;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#e8f1ff 0,#c3d2e8 5px,#8b9db8 22%,#5a6a84 100%);
}
.tsr-p1 .tsr-ped{
  height:44px;
  background:linear-gradient(180deg,#fff4c8 0,#ffdf7d 5px,#d9a316 24%,#8a5a08 100%);
}
.tsr-p3 .tsr-ped{
  height:24px;
  background:linear-gradient(180deg,#ffe2c4 0,#f0bf98 5px,#c07f4c 24%,#8a5222 100%);
}
.tsr-medal{
  position:absolute;left:50%;bottom:2px;width:34px;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.tsr-p1 .tsr-medal{width:42px;}

.tsr-body{
  flex:1 1 auto;min-height:70px;overflow:auto;
  display:flex;flex-direction:column;
  padding:10px 12px 12px;-webkit-overflow-scrolling:touch;
}
.tsr-row{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  min-height:46px;margin-bottom:7px;padding:5px 8px;
  color:#fff;font-size:14px;border-radius:9px;
  background:linear-gradient(90deg,rgba(17,36,74,.92),rgba(10,21,46,.86));
  box-shadow:inset 0 0 0 1px rgba(96,148,225,.28);
}
.tsr-row.r1{
  background:linear-gradient(90deg,#f5dd8f,#fff3cb 52%,#eccf72);
  color:#3d2a05;box-shadow:inset 0 0 0 1px #d9a316;
}
.tsr-row.r2{
  background:linear-gradient(90deg,#c3d2e8,#eef4ff 52%,#b8c8e0);
  color:#1e2c48;box-shadow:inset 0 0 0 1px #8b9db8;
}
.tsr-row.r3{
  background:linear-gradient(90deg,#e3b591,#f7dcc4 52%,#d6a077);
  color:#3f2712;box-shadow:inset 0 0 0 1px #c07f4c;
}
.tsr-row.me{box-shadow:inset 0 0 0 2px #ffd24a;}
.tsr-badge{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#dce9ff;
  background:linear-gradient(180deg,#2e5aa8,#173672);
  box-shadow:inset 0 1px 0 rgba(190,215,255,.4);
}
.tsr-row.r1 .tsr-badge,.tsr-row.r2 .tsr-badge,.tsr-row.r3 .tsr-badge{
  background:none;box-shadow:none;
}
img.tsr-badge{
  width:30px;height:30px;flex:0 0 30px;border-radius:0;
  background:none;box-shadow:none;object-fit:contain;
}
.tsr-gid{
  width:auto;min-width:38px;padding:0 6px;border-radius:7px;
  font-size:11px;font-weight:800;
}
.tsr-av{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.tsr-name{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tsr-row .tsr-name .sub{display:block;font-size:10px;font-weight:700;opacity:.62;}
.tsr-score{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  flex:0 0 auto;width:auto;min-width:0;
  background:linear-gradient(180deg,#7a4dff,#4c22c9);
  color:#fff;font-weight:900;font-size:13px;
  padding:5px 8px;border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(220,205,255,.45);
}
.tsr-row.r1 .tsr-score,.tsr-row.r2 .tsr-score,.tsr-row.r3 .tsr-score{
  background:linear-gradient(180deg,rgba(46,20,96,.9),rgba(28,10,66,.9));color:#fff;
}
.tsr-gem{width:15px;height:15px;flex:0 0 15px;object-fit:contain;}
.tsr-sec{
  flex:0 0 auto;margin:4px 0 8px;padding-top:8px;
  color:#ffe1a0;font-size:12px;letter-spacing:1px;font-weight:800;text-align:center;
  border-top:1px solid rgba(96,148,225,.24);
}
.tsr-sec:first-child{border-top:0;padding-top:0;margin-top:0;}
.tsr-muted{margin:auto;color:#8eaad2;padding:18px 8px;text-align:center;font-size:13px;}

.tsr-self{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  min-height:0;padding:8px 12px;
  background:linear-gradient(180deg,#16305e,#0c1c3c);
  box-shadow:0 -1px 0 rgba(255,206,90,.4),0 -10px 24px rgba(0,0,0,.35);
}
.tsr-self .tsr-badge{
  width:32px;height:32px;flex:0 0 32px;font-size:15px;
  background:linear-gradient(180deg,#ffd863,#d99a12);color:#3d2a05;
  box-shadow:inset 0 1px 0 rgba(255,250,220,.7);
}
.tsr-self .tsr-name{
  color:#ffe1a0;font-size:13px;letter-spacing:1px;line-height:1.1;
}
.tsr-self .tsr-name .bal{
  display:block;margin-top:3px;
  color:#fff;font-size:19px;font-weight:900;letter-spacing:0;line-height:1.1;
}
.tsr-self .tsr-score{
  min-width:0;font-size:15px;padding:6px 10px;border-radius:9px;
}
.tsr-self .tsr-gem{width:17px;height:17px;flex:0 0 17px;}

#tsRankFab{
  position:fixed;z-index:9990;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:.28em;
  padding:0 .45em;border:0;border-radius:8px;
  background:rgba(16,18,24,.55);color:#fff;
  font-weight:700;letter-spacing:1px;line-height:1;white-space:nowrap;
}
#tsRankFab .tsr-ico{display:flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;flex:0 0 auto;}
#tsRankFab .tsr-ico svg{display:block;width:100%;height:100%;}