.ranks-page{padding-block:48px}
.ranks-eyebrow{margin:0 0 14px;color:#9fdb67;font:11px 'IBM Plex Mono',monospace;letter-spacing:.16em}
.ranks-intro{max-width:650px;margin:12px 0 32px;color:var(--muted);font-size:16px;line-height:1.8}
.ranks-providers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}
.ranks-provider{display:flex;align-items:center;justify-content:center;min-height:64px;min-width:0;padding:16px;text-align:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.ranks-provider strong{margin:0;font-size:18px;font-weight:600;line-height:1.3}
.ranks-provider[aria-pressed=true]{border-color:#8ccb50;background:#1d2918;box-shadow:inset 0 3px #8ccb50}
.ranks-provider[aria-pressed=true] strong{color:#bbef8b}
.ranks-panel{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ranks-panel-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px}
.ranks-panel-header h2{margin:6px 0 0;font-size:24px;line-height:1.25}
.ranks-overall{color:#a9c892;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ranks-tools{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.ranks-tools label{margin:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}
.ranks-tools select,.ranks-tools button,.ranks-pagination button,#ranks-retry{min-height:40px;line-height:normal;max-width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.ranks-page button:disabled{opacity:.4;cursor:default}
.ranks-status{margin:0;padding:0 24px 18px;color:var(--muted);font-size:12px;line-height:1.6}
.ranks-status:empty{display:none}
#ranks-retry{margin:0 24px 18px}
.ranks-table-wrap{max-width:100%;overflow-x:auto}
.ranks-table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:start;font-size:13px}
.ranks-table th{white-space:nowrap;padding:14px 18px;border-block:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.06em;text-align:start;text-transform:uppercase}
.ranks-table th:first-child{width:76px}
.ranks-table th:nth-child(2){width:196px}
.ranks-table th:nth-child(3){width:104px}
.ranks-table td{min-width:0;padding:20px 18px;border-bottom:1px solid #ffffff0d;vertical-align:middle}
.rank-position{color:var(--muted);font:16px 'IBM Plex Mono',monospace;white-space:nowrap}
.ranks-table tr[data-podium="1"] .rank-position{color:#ebd688}
.ranks-table tr[data-podium="2"] .rank-position{color:#c7d1e3}
.ranks-table tr[data-podium="3"] .rank-position{color:#d9b08d}
.rank-player{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0}
.rank-player strong{min-width:0;font-size:13px;font-weight:500;overflow-wrap:anywhere;line-height:1.5}
.rank-player:hover strong{text-decoration:underline}
.rank-avatar{display:block;flex:0 0 32px;width:32px;height:32px;overflow:hidden;border-radius:5px;background:#ffffff08}
.rank-player img{display:block;width:100%;height:100%;image-rendering:pixelated}
.rank-score{font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-score small,.rank-retired{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.5;white-space:normal}
.rank-retired{margin-inline-start:42px}
.rank-kits{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;min-width:0}
.rank-kit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;min-height:46px;padding:8px 10px;border-radius:8px}
.rank-kit .mcpvp-kit-name{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;line-height:1.35}
.rank-kit .mcpvp-kit-name>span:last-child{min-width:0;overflow-wrap:normal;word-break:normal}
.rank-kit-icons{display:flex;align-items:center;flex:0 0 auto;gap:0}
.rank-kit .mcpvp-kit-name img{display:block;flex:none;width:24px;height:24px}
.rank-kit-icons img+img{margin-inline-start:-10px}
.rank-kit .mcpvp-tier-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:5px;font-size:11px;line-height:1}
.rank-country{font-size:12px;line-height:1.5}
.ranks-pagination{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:24px}
.ranks-pagination span{color:var(--muted);font-size:12px}
.ranks-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0 12px;color:var(--muted);font-size:11px;line-height:1.6}
.ranks-meta a{color:#b6d998}
.ranks-page :is(button,a,select,.ranks-table-wrap):focus-visible{outline:2px solid #8ccb50;outline-offset:4px}
@media(max-width:1100px) and (min-width:901px){.ranks-table th:first-child{width:60px}.ranks-table th:nth-child(2){width:164px}.ranks-table th:nth-child(3){width:90px}.ranks-table :is(th,td){padding-inline:12px}}
@media(max-width:900px){
 .ranks-page{padding-top:30px}.ranks-intro{font-size:14px}
 .ranks-table,.ranks-table thead,.ranks-table tbody{display:block}
 .ranks-table tr{display:grid;grid-template-columns:56px minmax(0,1fr) 104px}
 .ranks-table th:first-child,.ranks-table th:nth-child(2),.ranks-table th:nth-child(3){width:auto}
 .ranks-table th:nth-child(4){display:none}
 .ranks-table th{border:0}.ranks-table thead{border-block:1px solid var(--line)}
 .ranks-table td{border:0;padding:18px 16px}
 .ranks-table tbody tr{border-bottom:1px solid #ffffff12}
 .ranks-table td:nth-child(4){grid-column:1/-1;padding:0 16px 18px}
 .rank-position{font-size:14px}.rank-kits{grid-template-columns:repeat(3,minmax(0,1fr))}
 .rank-score{text-align:end}.ranks-table th:nth-child(3){text-align:end}
}
@media(max-width:600px){
 .ranks-providers{gap:8px;margin-bottom:20px}.ranks-provider{min-height:54px;padding:12px 7px}.ranks-provider strong{font-size:13px}
 .ranks-panel-header{gap:16px;padding:20px 16px}.ranks-panel-header h2{font-size:22px}.ranks-tools{gap:8px}.ranks-tools select,.ranks-tools button{padding-inline:12px}
 .ranks-status{padding-inline:16px}
 .ranks-table tr{grid-template-columns:48px minmax(0,1fr) 82px}
 .ranks-table :is(th,td){padding:16px 10px}.ranks-table td:nth-child(4){padding:0 10px 16px}
 .rank-player{gap:7px}.rank-player strong{font-size:12px}.rank-avatar{flex-basis:26px;width:26px;height:26px}.rank-score{font-size:16px}.rank-score small{font-size:9px}.rank-retired{margin-inline-start:33px}
 .rank-kits{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .rank-kit{min-height:46px;padding:7px;gap:5px}.rank-kit .mcpvp-kit-name{gap:5px;font-size:10px}.rank-kit .mcpvp-kit-name img{width:20px;height:20px}.rank-kit .mcpvp-tier-badge{min-width:30px;height:26px;font-size:10px}
 .ranks-pagination{gap:12px;padding:20px 10px}.ranks-pagination button{padding-inline:11px}
}

.ranks-tools select,.ranks-tools button{height:40px}