.rankings-body { background: radial-gradient(circle at 85% 12%, rgba(255, 220, 228, .62), transparent 28%), linear-gradient(180deg, #fff 0%, #fff8fa 100%); }
.rankings-body::before { position: fixed; z-index: -1; right: -110px; top: 130px; width: 460px; height: 460px; border: 1px solid rgba(246, 164, 182, .28); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255, 231, 237, .42), 0 0 0 48px rgba(255, 242, 246, .7); content: ""; }
.rank-shell { width: min(90%, 1240px); margin: 0 auto; padding: 34px 0 54px; }
.rank-hero { position: relative; overflow: hidden; margin-bottom: 17px; padding: 42px 48px 38px; border: 1px solid #f3d8e0; border-radius: 4px; background: linear-gradient(110deg, rgba(255,255,255,.98), rgba(255,245,248,.92)); box-shadow: 4px 4px 0 rgba(196,53,92,.11), 0 14px 34px rgba(214,103,128,.10); }
.rank-hero::after { position: absolute; right: -62px; top: -130px; width: 430px; height: 430px; border: 1px solid rgba(246,166,183,.30); border-radius: 50%; box-shadow: 0 0 0 21px rgba(255,231,237,.37), 0 0 0 42px rgba(255,241,245,.58); content: ""; }
.rank-hero p { position: relative; z-index: 1; margin: 0 0 12px; color: #ef7187; font-size: 11px; font-weight: 700; letter-spacing: 4px; }
.rank-hero h1 { position: relative; z-index: 1; margin: 0 0 10px; color: #a52e50; font-family: "Ark Pixel", "Microsoft YaHei", sans-serif; font-size: clamp(36px, 4vw, 54px); font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.rank-hero > span { position: relative; z-index: 1; color: #75676e; font-size: 15px; }
.rank-error { margin: 0 0 17px; padding: 13px 16px; border: 1px solid #f2c6d0; border-left: 3px solid #e3677e; border-radius: 12px; color: #a7485e; background: #fff0f4; font-size: 13px; }
.rank-tabs { display: flex; gap: 8px; margin-bottom: -1px; padding: 0 6px; }
.rank-tabs button { min-width: 160px; padding: 13px 23px; border: 1px solid #f3d8e0; border-radius: 4px 4px 0 0; color: #a16b78; background: #fff8fa; font: 400 14px "Ark Pixel", "Microsoft YaHei", sans-serif; cursor: pointer; transition: .2s ease; }
.rank-tabs button:hover { color: #df4568; background: #fff; }
.rank-tabs button.active { border-color: #f3c1cd; border-bottom-color: #fff; color: #fff; background: linear-gradient(135deg, #ff8292, #f44e6d); box-shadow: 0 7px 16px rgba(239,71,104,.14); }
.rank-panel { display: none; padding: 27px 30px 24px; border: 1px solid #f3d8e0; border-radius: 0 4px 4px 4px; background: rgba(255,255,255,.95); box-shadow: 4px 4px 0 rgba(196,53,92,.09), 0 14px 34px rgba(214,103,128,.08); }
.rank-panel.active { display: block; }
.rank-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.rank-title small { color: #ef7187; font-size: 10px; font-weight: 700; letter-spacing: 3px; }
.rank-title h2 { margin: 6px 0 0; color: #a52e50; font-family: "Ark Pixel", "Microsoft YaHei", sans-serif; font-size: 28px; font-weight: 400; }
.rank-title p { margin: 0; color: #8e7d85; font-size: 12px; text-align: right; }
.rank-title p b, .rank-title p span { display: block; }
.rank-title p b { margin-bottom: 5px; color: #29ad77; font-weight: 700; }
.rule { margin: 19px 0; padding: 11px 14px; border-left: 3px solid #ff8499; border-radius: 0 9px 9px 0; color: #88757d; background: #fff5f7; font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid #f4e1e6; border-radius: 13px; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #f5e7ea; text-align: left; white-space: nowrap; }
th { color: #a08e96; background: #fff9fa; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
tbody tr:last-child td { border-bottom: 0; }
td { color: #75666e; }
.player { color: #43373e; font-weight: 700; }
.place { display: inline-grid; place-items: center; min-width: 27px; height: 27px; border-radius: 50%; color: #9f8d94; background: #fff4f6; }
.gold { background: linear-gradient(90deg, rgba(255, 225, 176, .27), transparent); }
.silver { background: linear-gradient(90deg, rgba(224, 232, 236, .33), transparent); }
.bronze { background: linear-gradient(90deg, rgba(238, 202, 183, .27), transparent); }
.gold .place { color: #c28328; background: #fff0c9; }
.silver .place { color: #8799a5; background: #eef4f6; }
.bronze .place { color: #ae704e; background: #f9e8df; }
td strong { color: #d34b68; font-size: 16px; }
.empty { padding: 42px !important; color: #a18f96 !important; text-align: center !important; }
.rank-footer { padding: 22px 10px 0; color: #a08f96; font-size: 12px; text-align: center; }

@media (max-width: 840px) {
  .rank-shell { width: calc(100% - 28px); padding-top: 22px; }
  .rank-hero { padding: 33px 24px 29px; }
  .rank-panel { padding: 23px 15px 18px; }
}
@media (max-width: 520px) {
  .rank-hero h1 { font-size: 37px; }
  .rank-hero > span { font-size: 13px; }
  .rank-tabs { overflow-x: auto; padding-inline: 0; }
  .rank-tabs button { min-width: 50%; padding-inline: 10px; }
  .rank-panel { border-radius: 0 16px 16px 16px; }
  .rank-title { align-items: flex-start; flex-direction: column; }
  .rank-title p { text-align: left; }
  th, td { padding: 11px 10px; }
}