:root{--rank-gold:#e7c98a;--rank-blue:#81c3e9;--rank-line:rgba(128,189,229,.23)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{min-width:320px;background:#040a11;color:#e9f1f7}
.ranking-main{min-height:100vh;background:linear-gradient(180deg,#06101a,#04090f 70%)}
.ranking-hero{position:relative;isolation:isolate;min-height:460px;padding:163px max(28px,calc((100vw - 1200px)/2)) 90px;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;background:radial-gradient(ellipse at 76% 20%,rgba(124,82,43,.23),transparent 36%),#07101a}
.ranking-hero:before{content:"";z-index:-2;position:absolute;inset:0;background:url("assets/home/realm-concept.webp") center 54%/cover;opacity:.27;filter:grayscale(.4)}
.ranking-hero:after{content:"";z-index:-1;position:absolute;inset:0;background:linear-gradient(90deg,#050b12 0%,rgba(5,11,18,.92) 38%,rgba(5,11,18,.28) 100%),linear-gradient(0deg,#050a10,transparent 53%)}
.ranking-hero-copy{max-width:640px}
.rank-eyebrow{margin:0 0 15px;color:var(--rank-blue);font:700 10px/1.5 "Trebuchet MS",Arial,sans-serif;letter-spacing:.25em}
.ranking-hero h1{margin:0 0 20px;font:500 clamp(3rem,5.8vw,5.4rem)/.98 Georgia,"Times New Roman",serif;letter-spacing:-.03em}
.ranking-hero h1 em{color:var(--rank-gold);font-style:normal}
.ranking-hero-copy>p:not(.rank-eyebrow){max-width:540px;color:#b5c5d0;font-size:clamp(14px,1.25vw,17px);line-height:1.75}
.rank-alpha-label{display:inline-flex;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid rgba(224,189,118,.3);background:rgba(20,19,17,.5);color:#d9bc83;font-size:9px;font-weight:700;letter-spacing:.15em}
.rank-hero-emblem{display:grid;justify-items:center;gap:14px;min-width:210px;padding:31px;border:1px solid rgba(220,190,130,.24);background:rgba(5,13,19,.48)}
.rank-hero-emblem img{filter:drop-shadow(0 0 26px rgba(228,177,96,.22))}
.rank-hero-emblem span{color:#b5a184;font-size:9px;letter-spacing:.24em}
.ranking-content{width:min(1160px,calc(100% - 40px));margin:0 auto;padding:66px 0 52px}
.rank-section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:26px}
.rank-section-head h2{margin:0;font:500 clamp(2rem,3vw,2.9rem) Georgia,serif}
.rank-head-note{max-width:270px;color:#8ca2b4;font-size:12px;line-height:1.6;text-align:right}
.rank-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px}
.rank-tab{display:grid;justify-items:start;gap:8px;padding:19px 21px;border:1px solid var(--rank-line);background:rgba(10,23,35,.72);font:700 14px "Trebuchet MS",Arial,sans-serif;text-align:left;color:#d4e2ec;cursor:pointer;transition:background .2s,border-color .2s}
.rank-tab span{font-size:9px;letter-spacing:.12em;color:#8199ab}
.rank-tab.is-selected{border-color:rgba(231,201,138,.78);background:linear-gradient(120deg,rgba(67,50,31,.55),rgba(15,25,37,.8));color:#f8e9cc}
.rank-tab.is-selected span{color:#e7ca8d}
.rank-tab:focus-visible,.rank-class-filter select:focus-visible{outline:2px solid #9dd8ff;outline-offset:3px}
.rank-tab:not(.is-selected):hover{border-color:rgba(161,211,246,.6);background:rgba(20,43,62,.8)}
.ranking-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0 20px}
.ranking-toolbar h3{font:500 1.5rem Georgia,serif;margin:0 0 5px}
.ranking-toolbar p{font-size:12px;color:#91a8b8;line-height:1.6;margin:0}
.rank-class-filter{display:grid;gap:7px;min-width:192px;color:#bcd2e0;font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.rank-class-filter select{width:100%;min-height:40px;padding:7px 11px;color:#e3f1fb;background:#0a1824;border:1px solid rgba(131,193,234,.4)}
.rank-alpha-notice{margin:0 0 23px;padding:13px 17px;border-left:2px solid var(--rank-gold);background:rgba(145,110,58,.12);font-size:12px;line-height:1.65;color:#b8b9b4}
.rank-alpha-notice strong{color:#f4da9f}
.rank-status{margin:25px 0;padding:32px 24px;border:1px dashed rgba(140,193,226,.25);text-align:center;color:#9cb5c6;font-size:13px;line-height:1.6}
.rank-status.is-error{border-color:rgba(235,139,135,.35);color:#ffb6b0}
.rank-podium{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0 0 28px;padding:0}
.rank-leader{position:relative;min-width:0;padding:20px;border:1px solid rgba(131,195,231,.25);background:linear-gradient(160deg,rgba(20,43,59,.7),rgba(6,14,22,.94))}
.rank-leader:first-child{border-color:rgba(231,201,138,.6);background:linear-gradient(145deg,rgba(69,52,32,.5),rgba(11,20,29,.93))}
.rank-leader .leader-number{display:block;color:#8cc4e8;font:500 28px Georgia,serif}
.rank-leader:first-child .leader-number{color:var(--rank-gold)}
.rank-leader strong{display:block;margin:12px 0 8px;overflow-wrap:anywhere;font:500 clamp(16px,2vw,22px) Georgia,serif}
.rank-leader small{color:#90afc3;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.rank-leader .leader-level{margin-top:16px;font-size:12px;font-weight:700;color:#e7c98a}
.rank-table-wrap{overflow-x:auto;border:1px solid rgba(124,188,224,.23);background:rgba(6,15,24,.9)}
.rank-table{border-collapse:collapse;width:100%;min-width:480px;text-align:left}
.rank-table th{padding:17px 21px;color:#9fb9cc;border-bottom:1px solid var(--rank-line);background:#0a1a27;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.rank-table td{padding:15px 21px;border-bottom:1px solid rgba(128,189,229,.12);font-size:13px;color:#b8c9d7}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table tbody tr:hover{background:rgba(84,145,184,.09)}
.rank-table .rank-name{font-weight:700;color:#f0f4f6}
.rank-table .rank-pos{color:#dfc189;font-variant-numeric:tabular-nums}
.rank-number{text-align:right;font-variant-numeric:tabular-nums}
.rank-upcoming{padding:58px 24px;min-height:320px;border:1px solid var(--rank-line);background:radial-gradient(circle at center top,rgba(43,83,120,.15),transparent 45%),rgba(5,13,22,.85);text-align:center}
.coming-emblem{font:46px Georgia,serif;color:#dfc58b}
.rank-upcoming h3{font:500 clamp(1.8rem,3vw,2.8rem) Georgia,serif;margin:10px 0 16px}
.rank-upcoming>p:not(.rank-eyebrow){max-width:550px;margin:0 auto;color:#a9becb;font-size:13px;line-height:1.75}
.rank-upcoming .coming-footnote{margin-top:16px!important;color:#8499a8!important;font-size:11px!important}
.ranking-end{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:22px;padding:15px 24px 80px;text-align:center}
.ranking-end p{color:#b1c1cf;font:500 1.5rem Georgia,serif}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1100px){.ranking-hero{padding-left:5%;padding-right:5%}}
@media(max-width:760px){.ranking-hero{min-height:400px;padding:140px 24px 65px}.rank-hero-emblem{display:none}.ranking-content{padding:44px 0 32px}.rank-section-head{display:block}.rank-head-note{text-align:left;max-width:none}.rank-tabs{gap:7px}.rank-tab{padding:13px 10px;font-size:12px}.rank-tab span{font-size:8px;letter-spacing:.04em}.rank-podium{gap:8px}.rank-leader{padding:13px}}
@media(max-width:480px){.ranking-hero h1{font-size:clamp(2.8rem,11vw,4rem)}.ranking-hero{padding:132px 18px 52px}.rank-alpha-label{font-size:8px}.ranking-content{width:calc(100% - 26px)}.ranking-toolbar{align-items:stretch;flex-direction:column;gap:13px}.rank-class-filter{min-width:0}.rank-tabs{grid-template-columns:minmax(0,1fr)}.rank-tab{display:flex;align-items:center;justify-content:space-between;gap:9px}.rank-podium{grid-template-columns:1fr}.rank-leader{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 14px}.rank-leader .leader-number{font-size:23px}.rank-leader strong,.rank-leader .leader-level{margin:0}.rank-leader small{display:none}.ranking-end{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.rank-tab{transition:none}}