/* Velkar MU ranking: data-led adaptation of the supplied reference */
.ranking-page{background:#101116;color:#eee9e6;font-family:Inter,sans-serif;min-width:320px}
.ranking-page .skip{position:absolute;left:-9999px}.ranking-page .skip:focus{left:12px;top:90px;z-index:100;background:#ffc174;color:#211502;padding:10px}
.ranking-page main{padding-top:80px;min-height:100vh}
.ranking-wrap{width:min(100% - 64px,1400px);margin-inline:auto}
.ranking-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 10%,#67431d22,transparent 50%),linear-gradient(110deg,#070809,#0b0d13 75%,#070809);border-bottom:1px solid #624a2f88}
.ranking-hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#d89d3f77,transparent)}
.ranking-hero-inner{min-height:236px;display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:35px}
.rank-kicker{display:flex;align-items:center;gap:10px;color:#d4a45e;font:700 10px/1.3 'Space Grotesk',sans-serif;letter-spacing:.13em}
.rank-kicker span{background:#592327;color:#ffd0ae;padding:4px 7px;font-size:8px}.rank-kicker i{width:5px;height:5px;border-radius:50%;background:#20c781;box-shadow:0 0 9px #20c781}
.ranking-hero h1{margin:8px 0 10px;color:#f5f1ed;font:800 clamp(34px,4vw,58px)/1 Sora,sans-serif;letter-spacing:-.045em}
.ranking-hero h1 em{color:#f3ad51;font-style:normal}
.rank-intro{max-width:660px;color:#c1b9b2;font:400 13px/1.6 Inter,sans-serif}
.rank-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:0;flex:0 0 min(440px,38%);background:#16191f;border:1px solid #6a534040}
.rank-hero-stats>div{padding:15px 13px;display:flex;flex-direction:column;gap:7px;border-right:1px solid #745f4433}.rank-hero-stats>div:last-child{border-right:0}
.rank-hero-stats small{color:#ac947f;font:700 9px/1.25 'Space Grotesk',sans-serif;letter-spacing:.04em}.rank-hero-stats strong{color:#f8bd63;font:800 clamp(16px,1.5vw,24px)/1.2 Sora,sans-serif}
.ranking-content{padding-block:0 54px}.rank-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;border-bottom:1px solid #594b3a67}
.rank-tabs{display:flex;align-items:stretch;align-self:stretch;gap:0;overflow-x:auto}.rank-tabs button{position:relative;flex:0 0 auto;padding:5px 18px 0;border:0;background:transparent;color:#aaa6a8;font:700 11px 'Space Grotesk',sans-serif;white-space:nowrap;letter-spacing:.03em}
.rank-tabs button:hover{color:#f6c36d}.rank-tabs button[aria-selected=true]{color:#ffc174}.rank-tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:2px;background:#efa63f}
.rank-search{display:flex;align-items:center;gap:8px;min-width:240px;width:300px;padding:0 12px;background:#0b0d12;border:1px solid #5b4c3b}.rank-search .material-symbols-outlined{font-size:17px;color:#ad976f}.rank-search input{min-width:0;width:100%;height:36px;background:none;border:0;outline:0;color:#eee;font:500 11px Inter,sans-serif}.rank-search input::placeholder{color:#857e79}.rank-search:focus-within{border-color:#e2a956}
.rank-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding-top:25px}.rank-primary{min-width:0}
.rank-section-heading,.rank-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.rank-section-heading h2,.rank-list-heading h2{display:flex;align-items:center;gap:7px;margin:0;color:#f0ece9;font:800 16px/1.3 Sora,sans-serif;letter-spacing:-.02em}
.rank-section-heading h2 .material-symbols-outlined,.rank-list-heading h2 .material-symbols-outlined{font-size:19px;color:#f6b74d}.rank-section-heading>span,.rank-list-heading>span{font:700 9px 'Space Grotesk',sans-serif;color:#aa8d64;letter-spacing:.07em;text-align:right}
.rank-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:14px;min-height:248px;margin-bottom:27px}
.rank-podium .rank-loading{grid-column:1/-1}.podium-card{position:relative;min-width:0;height:208px;padding:22px 17px 14px;background:#1b1e26;border:1px solid #594b3b;box-shadow:0 11px 25px #0005}
.podium-card.is-first{height:240px;background:linear-gradient(145deg,#292520,#1c1f27 65%);border-color:#ae8149;box-shadow:0 10px 32px #e3a13c16}
.podium-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.podium-place{font:800 26px Sora,sans-serif;color:#c9c6c7}.is-first .podium-place{font-size:35px;color:#ffc36f}.podium-badge{padding:4px 6px;background:#322516;color:#ffd08a;font:700 8px 'Space Grotesk',sans-serif;white-space:nowrap}.podium-card:nth-child(1) .podium-badge{background:#182b35;color:#9bdffa}.podium-card:nth-child(3) .podium-badge{background:#302824;color:#eec29b}
.podium-player{display:flex;align-items:center;gap:9px;margin:12px 0;min-width:0}.podium-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #73604a;background:#0e1118;color:#eeb861}.podium-icon .material-symbols-outlined{font-size:23px}.podium-player h3{overflow:hidden;margin:0;color:#fff;font:800 clamp(13px,1.3vw,20px) Sora,sans-serif;white-space:nowrap;text-overflow:ellipsis}.is-first .podium-player h3{color:#ffc06c}.podium-player p{color:#b9b0a8;font:600 10px Inter,sans-serif}.podium-player small{color:#a59d99;font:500 9px Inter,sans-serif}
.podium-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#0e1016;border:1px solid #424047;padding:9px 7px}.podium-stats span{min-width:0;color:#f3eeee;font:800 11px 'Space Grotesk',sans-serif}.podium-stats small{display:block;margin-bottom:3px;color:#a78e70;font:700 8px 'Space Grotesk',sans-serif}.podium-stats span:last-child{color:#eaa75e}
.rank-list{border:1px solid #544637;background:#171a21}.rank-list-heading{padding:14px 16px;margin:0;border-bottom:1px solid #6a513460}.rank-list-heading h2{font-size:13px}.rank-table-scroll{overflow-x:auto}
.rank-list table{width:100%;border-collapse:collapse;min-width:720px}.rank-list th{padding:11px 12px;text-align:left;background:#0f1117;color:#a99783;border-bottom:1px solid #554b42;font:700 9px 'Space Grotesk',sans-serif;letter-spacing:.05em}.rank-list td{padding:11px 12px;border-bottom:1px solid #ffffff11;color:#c7c0bd;font:600 11px Inter,sans-serif}.rank-list tr:hover td{background:#e8a94512}.rank-list td:first-child{color:#fac174;font:800 16px Sora,sans-serif}.rank-list td:nth-child(2){color:#f3eae0;font-weight:700}.rank-list td .class-icon{display:inline-grid;place-items:center;width:23px;height:23px;margin-right:6px;background:#30323c;color:#ffc174;font-size:14px;vertical-align:middle}.rank-list td .class-icon .material-symbols-outlined{font-size:15px}.rank-list td .muted{color:#867e79}.rank-list td .level{color:#f3bb64}.rank-empty{text-align:center;padding:31px!important;color:#bbb2a9!important}.rank-list-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 15px;color:#a79d96;font:500 10px Inter,sans-serif}.rank-pagination{display:flex;align-items:center;gap:6px}.rank-pagination button,.rank-pagination span{display:grid;place-items:center;min-width:24px;height:23px;border:1px solid #544737;color:#dac8b1;background:#13151c}.rank-pagination button:disabled{opacity:.35;cursor:default}.rank-pagination span{color:#33200d;background:#f2ae4d;border-color:#f2ae4d;font-weight:800}
.rank-sidebar{display:flex;flex-direction:column;gap:13px}.rank-side-card{padding:17px;background:#1b1e26;border:1px solid #554637;box-shadow:0 8px 19px #0004}.rank-side-card h3{margin:0 0 13px;color:#f0b762;font:800 11px 'Space Grotesk',sans-serif;letter-spacing:.04em}.rank-side-card p{color:#c2b8ad;font:500 11px/1.5 Inter,sans-serif}.rank-side-card>a{display:block;margin-top:11px;padding-top:10px;border-top:1px solid #ffffff18;color:#e9ac61;font:700 10px 'Space Grotesk',sans-serif;text-decoration:none}.rank-side-card>a:hover{text-decoration:underline}
.rank-class-list{display:grid;gap:9px}.rank-class-row{display:grid;grid-template-columns:104px 1fr 24px;align-items:center;gap:7px;color:#c8c0bc;font:600 10px Inter,sans-serif}.rank-class-row .bar{height:7px;background:linear-gradient(90deg,var(--tint) var(--fill),#0e1015 var(--fill))}.rank-class-row .bar i{display:block;height:100%;width:var(--fill);background:var(--tint)}.rank-class-row b{text-align:right;color:var(--tint);font:800 10px 'Space Grotesk',sans-serif}
.rank-guild-card{background:linear-gradient(120deg,#252324,#1b1e26)}.rank-guild-card strong{display:block;color:#ffcb78;font:800 18px Sora,sans-serif}.rank-side-data{display:flex;justify-content:space-between;gap:10px;margin:8px 0;padding:8px 0;border-bottom:1px solid #ffffff12;color:#c4b8ad;font:600 10px Inter,sans-serif}.rank-side-data b{color:#e8bd7c}.rank-loading{color:#9f9691;font:500 11px Inter,sans-serif}
.rank-footer{border-top:1px solid #5c4b38;background:#111318}.rank-footer-inner{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;padding-block:32px}.rank-footer h3{margin:0 0 12px;color:#ebb366;font:800 10px 'Space Grotesk',sans-serif}.rank-footer p,.rank-footer a:not(.footer-brand){display:block;margin:0 0 7px;color:#bbb2ad;font:500 11px/1.5 Inter,sans-serif;text-decoration:none}.rank-footer a:hover{color:#ffc174}.footer-brand{display:block;margin-bottom:10px;color:#f0b765;font:800 21px Sora,sans-serif;text-decoration:none}.footer-brand small{display:inline-block;vertical-align:middle;padding:3px;background:#5c3522;color:#f7d2a4;font:700 7px 'Space Grotesk',sans-serif}.rank-footer .rank-discord{display:inline-flex!important;padding:7px 11px;border:1px solid #716254;color:#f2e7d9!important}.rank-copyright{padding:15px 0 21px;border-top:1px solid #ffffff15;color:#827b78;font:500 10px Inter,sans-serif}
@media(max-width:1100px){.rank-main-grid{grid-template-columns:minmax(0,1fr) 245px}.ranking-hero-inner{align-items:flex-start;flex-direction:column;gap:18px}.rank-hero-stats{flex:auto;width:min(100%,480px)}.rank-toolbar{flex-wrap:wrap;padding-top:9px}.rank-search{margin-bottom:10px}}
@media(max-width:850px){.rank-main-grid{grid-template-columns:1fr}.rank-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.rank-podium{gap:8px}.podium-card{padding:15px 10px}.podium-player{gap:5px}.rank-footer-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ranking-page main{padding-top:72px}.ranking-wrap{width:min(100% - 28px,1400px)}.ranking-hero-inner{padding-block:26px;min-height:0}.ranking-hero h1{font-size:35px}.rank-intro{font-size:12px}.rank-hero-stats{width:100%}.rank-hero-stats>div{padding:10px 7px}.rank-hero-stats small{font-size:7px}.rank-hero-stats strong{font-size:17px}.rank-toolbar{display:block;padding-top:0}.rank-tabs{height:56px}.rank-tabs button{padding-inline:12px;font-size:10px}.rank-tabs button[aria-selected=true]:after{left:12px;right:12px}.rank-search{width:100%;margin:0 0 11px}.rank-main-grid{padding-top:18px}.rank-section-heading h2{font-size:13px}.rank-section-heading>span{font-size:8px}.rank-podium{grid-template-columns:1fr;min-height:0;align-items:stretch}.podium-card,.podium-card.is-first{height:auto;min-height:136px}.podium-card.is-first{grid-row:1}.podium-card:nth-child(1){grid-row:2}.podium-card:nth-child(3){grid-row:3}.podium-player{margin:5px 0}.podium-stats{margin-top:9px}.rank-sidebar{grid-template-columns:1fr}.rank-footer-inner{grid-template-columns:repeat(2,1fr);gap:20px}.rank-footer-inner>div:first-child{grid-column:1/-1}}
@media(max-width:400px){.rank-footer-inner{grid-template-columns:1fr}.rank-footer-inner>div:first-child{grid-column:auto}.rank-kicker{font-size:8px}}

/* Class art and stronger color cues */
.podium-card{border-top:3px solid var(--class-tint,#c89b59);background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--class-tint,#c89b59) 13%,transparent),transparent 58%),#1b1e26}
.podium-card.is-first{background:radial-gradient(circle at 32% 17%,color-mix(in srgb,var(--class-tint,#c89b59) 24%,transparent),transparent 60%),linear-gradient(145deg,#292520,#1c1f27 65%);box-shadow:0 11px 32px color-mix(in srgb,var(--class-tint,#c89b59) 22%,transparent)}
.podium-card .podium-place,.podium-card .podium-player h3{color:var(--class-tint,#ffc174)}
.podium-card .podium-badge{border:1px solid color-mix(in srgb,var(--class-tint,#ffc174) 55%,transparent);color:var(--class-tint,#ffc174);background:#11141c}
.podium-icon{width:52px;height:52px;flex-basis:52px;overflow:hidden;border:1px solid var(--class-tint,#eeb861);box-shadow:0 0 13px color-mix(in srgb,var(--class-tint,#eeb861) 25%,transparent)}
.podium-icon img,.class-icon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.podium-stats span:last-child{color:var(--class-tint,#eaa75e)}
.rank-list td .class-icon{width:27px;height:27px;overflow:hidden;vertical-align:middle;border:1px solid var(--class-tint,#ffc174);background:#10131b}
.rank-donut-layout{display:flex;align-items:center;gap:17px}.rank-donut{width:94px;height:94px;flex:0 0 94px;display:grid;place-items:center;border-radius:50%;box-shadow:0 0 16px #0008}.rank-donut>div{display:flex;flex-direction:column;align-items:center;justify-content:center;width:69px;height:69px;border-radius:50%;background:#171922;border:2px solid #393943}.rank-donut strong{color:#f8eee4;font:800 21px/1 Sora,sans-serif}.rank-donut small{margin-top:4px;color:#a7a0a0;font:700 7px 'Space Grotesk',sans-serif}
.rank-legend{flex:1;min-width:0;display:grid;gap:6px}.rank-legend .rank-class-row{display:flex;justify-content:space-between;gap:6px;color:#dfd9d6;font-size:10px}.rank-legend .rank-class-row span{display:flex;align-items:center;min-width:0;white-space:nowrap}.rank-legend .rank-class-row span:before{content:"";width:7px;height:7px;margin-right:6px;background:var(--tint);flex:0 0 7px}.rank-legend .rank-class-row b{color:var(--tint);font-size:10px}
@media(max-width:620px){.podium-icon{width:48px;height:48px;flex-basis:48px}.rank-donut-layout{justify-content:flex-start}}

/* CSP-safe class colors and SVG distribution */
[data-archetype="knight"]{--class-tint:#f07863}[data-archetype="wizard"]{--class-tint:#62c9ef}[data-archetype="elf"]{--class-tint:#76dbd6}[data-archetype="gladiator"]{--class-tint:#f2aa51}[data-archetype="lord"]{--class-tint:#e9cc65}[data-archetype="summoner"]{--class-tint:#c599f0}[data-archetype="fighter"]{--class-tint:#f17c95}[data-archetype="other"]{--class-tint:#e3b966}
.rank-legend [data-archetype]{--tint:var(--class-tint)}
.rank-donut{position:relative;background:none}.rank-donut svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px #f0a14733)}.rank-donut>div{position:relative;z-index:1}