#s-rankings .loyalty-rankings { max-width:1280px; }
.loyalty-rank-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 38px; border:1px solid #b2535945; border-radius:16px; background:radial-gradient(ellipse at 95% 20%,#9b29463b,transparent 60%),linear-gradient(115deg,#23151e,#10141d); }
.loyalty-eyebrow { color:#e6a5a1; font-size:.65rem; font-weight:600; letter-spacing:1.8px; }
.loyalty-rank-hero h2 { font-family:var(--font-title); color:#f6e9d5; font-size:clamp(1.8rem,3.5vw,2.8rem); line-height:1.3; margin:12px 0; }.loyalty-rank-hero h2 em { color:#e6bc7b; font-style:normal; }
.loyalty-rank-hero p { color:#c8b7c6; font-size:.9rem; line-height:1.7; }
.loyalty-rank-seal { width:104px; height:114px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; flex-shrink:0; color:#e6bf7b; border:1px solid #c49a5a6b; border-radius:40px 40px 16px 16px; background:linear-gradient(145deg,#cda45f13,#8b243122); box-shadow:inset 0 0 0 7px #c39b5c08; }.loyalty-rank-seal i { font-size:2rem; }.loyalty-rank-seal span { font-size:.56rem; letter-spacing:2px; }
.loyalty-rank-demo { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:17px 0 25px; color:#e3bb86; font-size:.62rem; letter-spacing:.6px; }.loyalty-rank-demo>span { width:6px; height:6px; border-radius:50%; background:#db9a71; }.loyalty-rank-demo small { font-size:.73rem; letter-spacing:0; color:#bbaabc; }
.loyalty-rank-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:31px; }
.loyalty-rank-tab { display:flex; gap:12px; align-items:center; min-height:72px; padding:14px; text-align:left; background:#11151e; color:#c4b8c8; border:1px solid #b8a07b22; border-radius:9px; cursor:pointer; font:inherit; transition:background .2s,border-color .2s,transform .2s; }
.loyalty-rank-tab>i { color:#c8a575; width:22px; font-size:1.12rem; text-align:center; flex-shrink:0; }.loyalty-rank-tab span { min-width:0; }.loyalty-rank-tab strong { display:block; font-size:.75rem; font-weight:500; line-height:1.5; }.loyalty-rank-tab small { display:block; color:#9b889c; font-size:.61rem; margin-top:4px; }
.loyalty-rank-tab:hover { border-color:#c46b6666; background:#251722; transform:translateY(-2px); }.loyalty-rank-tab.is-active { border-color:#c3676c9c; background:linear-gradient(120deg,#70243855,#25181f); box-shadow:inset 0 -2px #d8ae72; color:#ffe2b5; }.loyalty-rank-tab.is-active>i { color:#f0b09c; }.loyalty-rank-tab.is-active small { color:#dfa9a1; }
.loyalty-rank-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; margin:0 0 22px; }.loyalty-rank-heading h3 { color:#efdbbe; font-family:var(--font-ui); font-size:1.5rem; margin:7px 0 10px; }.loyalty-rank-heading p { font-size:.84rem; color:#c1b2c5; line-height:1.8; }.loyalty-season { flex-shrink:0; font-size:.57rem; letter-spacing:1px; color:#bba17e; border:1px solid #c2a16e33; padding:9px 12px; border-radius:5px; }
.loyalty-champions { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:13px; margin-bottom:24px; }.loyalty-champions[hidden] { display:none; }
.loyalty-champion { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:23px; border:1px solid #b89d7433; border-radius:11px; background:linear-gradient(130deg,#1c1a24,#11151e); }
.loyalty-champion::after { content:''; position:absolute; width:90px; height:90px; border:1px solid #b8995824; border-radius:50%; right:-25px; top:-35px; box-shadow:0 0 0 14px #b8995805,0 0 0 28px #b8995803; pointer-events:none; }
.loyalty-champion.is-leader { background:radial-gradient(ellipse at top right,#bd8c3826,transparent 70%),linear-gradient(120deg,#381b25,#18151c); border-color:#d1a06068; }
.loyalty-champion-label { color:#deaa92; text-transform:uppercase; letter-spacing:1.4px; font-size:.57rem; }.loyalty-champion-name { color:#f1ddbd; font-family:var(--font-ui); font-size:1.1rem; font-weight:600; margin:15px 0 7px; overflow-wrap:anywhere; }.loyalty-champion-meta { color:#baadbf; font-size:.72rem; line-height:1.6; }.loyalty-champion-score { color:#e8c182; font-size:1.45rem; margin:20px 0 5px; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.loyalty-champion small { color:#b39ba5; font-size:.65rem; }
.loyalty-leaderboard { border:1px solid #ad5a5738; border-radius:12px; overflow:hidden; background:#10131ced; }
.loyalty-rank-filters { display:flex; flex-wrap:wrap; align-items:end; gap:13px; padding:21px; border-bottom:1px solid #af606226; background:#ac344407; }
.loyalty-rank-filters label { display:flex; flex:1 1 140px; flex-direction:column; gap:8px; color:#c2a8ba; font-size:.68rem; }.loyalty-rank-filters label[hidden] { display:none; }.loyalty-rank-filters .loyalty-rank-search { flex:2 1 240px; }
.loyalty-rank-filters input,.loyalty-rank-filters select { width:100%; min-width:0; height:42px; border:1px solid #ae82613b; border-radius:6px; background:#0e111a; color:#e4d8e0; padding:0 12px; font:inherit; font-size:.78rem; color-scheme:dark; }
.loyalty-rank-filters button,.loyalty-rank-footer button { border:1px solid #b97b6654; color:#e6c498; background:#241820; border-radius:6px; font:inherit; font-size:.72rem; cursor:pointer; padding:12px; transition:background .2s; }.loyalty-rank-filters button:hover,.loyalty-rank-footer button:hover:not(:disabled) { background:#6c2a3a55; }
.loyalty-table-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#61424b #10131c; }
.loyalty-rank-table { width:100%; text-align:left; border-collapse:collapse; font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap; }.loyalty-rank-table th,.loyalty-rank-table td { padding:17px 18px; border-bottom:1px solid #ffffff07; }.loyalty-rank-table thead th { color:#d6a59d; font-size:.63rem; text-transform:uppercase; letter-spacing:.6px; background:#ffffff02; font-weight:500; }.loyalty-rank-table td { color:#c9bece; }.loyalty-rank-table tbody tr:hover { background:#b94e5f0b; }.loyalty-rank-table .loyalty-score { color:#eac98f; font-weight:600; }.loyalty-identity strong { display:block; color:#e9dce7; font-size:.82rem; font-weight:500; }.loyalty-identity small { display:block; color:#a28ca7; font-size:.65rem; margin-top:5px; font-weight:400; }
.loyalty-position { display:grid; place-items:center; width:29px; height:29px; border:1px solid #ad8e5a2b; border-radius:5px; font-size:.7rem; color:#a79cae; }.loyalty-position.is-top { color:#f1cd8e; background:#ba8f3812; border-color:#c59c5a4f; }.loyalty-rank-table .loyalty-capella { color:#e4b983; }.loyalty-rank-table .loyalty-procyon { color:#c5a5e3; }.loyalty-rank-empty { padding:40px!important; text-align:center; }
.loyalty-rank-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:17px 21px; color:#b5a4bd; font-size:.72rem; }.loyalty-rank-footer>div { display:flex; align-items:center; gap:15px; }.loyalty-rank-footer button { padding:7px 12px; }.loyalty-rank-footer button:disabled { opacity:.35; cursor:default; }
.loyalty-rankings :is(button,input,select):focus-visible,.loyalty-table-scroll:focus-visible { outline:2px solid #eb9b9d; outline-offset:3px; }
@media(max-width:1050px) { .loyalty-rank-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }.loyalty-champions { grid-template-columns:repeat(3,minmax(0,1fr)); }.loyalty-champion { padding:18px; }.loyalty-champion-score { font-size:1.15rem; } }
@media(max-width:650px) { .loyalty-rank-hero { padding:25px; }.loyalty-rank-seal { display:none; }.loyalty-rank-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }.loyalty-rank-tab { padding:11px; gap:9px; }.loyalty-champions { grid-template-columns:1fr 1fr; }.loyalty-champion.is-leader { grid-column:1/-1; }.loyalty-rank-heading { align-items:start; }.loyalty-season { display:none; }.loyalty-rank-heading h3 { font-size:1.3rem; }.loyalty-rank-table td,.loyalty-rank-table th { padding:14px; }.loyalty-rank-demo small { width:100%; } }
.loyalty-arena[hidden],.arena-section-heading[hidden] { display:none; }
.arena-week { display:flex; align-items:center; gap:18px; border:1px solid #c6a34450; border-radius:13px; padding:23px; margin:12px 0 36px; background:linear-gradient(110deg,#4a35101f,#15131a); }
.arena-week>i { display:grid; place-items:center; width:48px; height:50px; flex-shrink:0; font-size:1.35rem; color:#f2c45e; border:1px solid #d7ac324d; border-radius:10px; background:#cc9c1210; }
.arena-week-copy { flex:1; }.arena-eyebrow { display:block; color:#e2b95e; font-size:.6rem; letter-spacing:1.5px; margin-bottom:7px; }.arena-week-copy>strong { color:#f6e7cd; font-size:1.1rem; font-weight:600; }.arena-week-copy p { color:#bbadbd; font-size:.73rem; line-height:1.8; margin-top:5px; }
.arena-reset { border:1px solid #d2ab4b29; padding:14px 17px; border-radius:9px; flex-shrink:0; background:#06080a33; }.arena-reset small { display:block; color:#b7a68d; font-size:.54rem; letter-spacing:1.5px; margin-bottom:6px; }.arena-reset strong { color:#f3ca6e; font-size:.95rem; font-variant-numeric:tabular-nums; }
.arena-section-heading { border-left:3px solid #dca65e; padding-left:16px; margin:30px 0 22px; }.arena-section-heading h4 { font-family:var(--font-ui); font-size:1.2rem; color:#eed8ba; font-weight:600; margin-bottom:8px; }.arena-section-heading p { color:#bba4ba; font-size:.68rem; line-height:1.8; }
.arena-class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:35px; }
.arena-class-card { position:relative; display:flex; align-items:center; gap:16px; padding:22px 18px; border:1px solid #b9796b40; border-radius:14px; overflow:hidden; background:repeating-linear-gradient(0deg,transparent 0 4px,#fff3 5px,transparent 6px),linear-gradient(125deg,#48203142,#11151e 75%); background-blend-mode:soft-light,normal; transition:border-color .2s,transform .2s; }
.arena-class-card:hover { border-color:#dc97817d; transform:translateY(-2px); }
.arena-class-crest { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; width:64px; height:103px; flex-shrink:0; border:1px solid #d3a46047; border-radius:28px 28px 8px 8px; color:#e5bd82; background:linear-gradient(160deg,#bb3c4d20,#be943d09); }.arena-class-crest i { font-size:1.7rem; }.arena-class-crest span { font-size:.65rem; letter-spacing:2px; color:#d19496; }
.arena-class-info { flex:1; min-width:0; }.arena-class-badge { display:inline-block; color:#f3bcac; background:#b8465c20; border:1px solid #bf5b6a35; border-radius:4px; font-size:.57rem; padding:4px 7px; }.arena-class-name { display:block; color:#f3e1ce; font-family:var(--font-ui); font-size:1rem; margin:9px 0 5px; overflow-wrap:anywhere; }.arena-class-guild { display:block; color:#aa95ae; font-size:.62rem; overflow-wrap:anywhere; }
.arena-class-stats { border-top:1px solid #c6905c26; margin-top:13px; padding-top:9px; }.arena-class-stats>div { display:flex; align-items:baseline; justify-content:space-between; gap:9px; padding:5px 0; }.arena-class-stats dt { color:#b29bab; font-size:.59rem; }.arena-class-stats dd { margin:0; color:#f0cc94; font-size:.75rem; font-variant-numeric:tabular-nums; }.arena-class-stats>div:nth-child(2) dd { color:#e6a5ac; }
@media(max-width:1050px) { .arena-class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .arena-week { flex-wrap:wrap; padding:18px; gap:12px; }.arena-week-copy { min-width:180px; }.arena-reset { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; }.arena-reset small { margin-bottom:0; }.arena-class-grid { grid-template-columns:1fr; }.arena-class-crest { width:76px; }.arena-class-card { padding:21px; } }
@media(prefers-reduced-motion:reduce) { .loyalty-rankings * { transition:none!important; animation:none!important; }.loyalty-rank-tab:hover,.arena-class-card:hover { transform:none; } }

/* Ranking emblem */
.loyalty-rank-hero { position:relative; overflow:hidden; background:radial-gradient(ellipse at 96% 50%,#75223526,transparent 42%),linear-gradient(110deg,#19151b,#11131a 70%); border-color:#9f6f4e44; box-shadow:inset 0 1px 0 #edc99508,0 12px 35px #00000020; }
.loyalty-rank-seal { position:relative; isolation:isolate; width:118px; height:118px; gap:0; border-radius:50%; border:1px solid #c69b565c; background:radial-gradient(circle at 50% 32%,#4a2129,#22151d 70%); box-shadow:inset 0 0 0 5px #131218,inset 0 0 0 6px #a17a4442,0 6px 20px #00000030; }
.loyalty-rank-seal::before { content:""; position:absolute; inset:10px; border-radius:50%; border:1px solid #d8b47616; pointer-events:none; }
.loyalty-rank-seal::after { content:none; }
.loyalty-rank-seal i { display:block; flex-shrink:0; width:82px; height:68px; margin-top:-5px; font-size:0; background:url('/assets/icons/ranking-emblem.svg') center/contain no-repeat; mask:none; -webkit-mask:none; }
.loyalty-rank-seal i::before { content:none; }
.loyalty-rank-seal span { margin-top:-1px; color:#e5c390; font-size:.51rem; font-weight:600; letter-spacing:2px; line-height:1.4; text-shadow:0 1px 3px #000; }