.rankEntry{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:#e9dbaf;border-inline:1px solid #c8b898}.rankEntry strong,.rankEntry small{display:block}.rankEntry strong{font-size:14px}.rankEntry small{font-size:11px;color:#6c604c;margin-top:5px}.rankEntry button{white-space:nowrap}
.rankHero{background:#254e27;color:#fff5dd;border:1px solid #17371b;border-radius:12px;padding:24px}.rankHero>div:first-child{display:flex;align-items:center;gap:18px}.rankEmblem{width:65px;height:76px;display:grid;place-items:center;flex-shrink:0;background:#e3c574;color:#254e27;clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);font:700 40px var(--font-display);padding-bottom:8px}.rankHero small{font-size:10px;color:#e3c574;letter-spacing:1px}.rankHero h3{font:700 42px var(--font-display);line-height:1;margin:6px 0 8px}.rankHero p{margin:0;font-size:13px}.rankHero p b{font-variant-numeric:tabular-nums;font-size:18px}.rankHero .rankProgress{margin-top:22px;padding-top:16px;border-top:1px solid #648059;color:#e8e4cd;font-size:13px}.rankStats{display:flex;gap:24px;margin-top:14px;font-size:11px;color:#d9e0c9}.rankStats b{color:#fff5dd;font-size:15px;margin-right:3px}
.rankLadder{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:18px 0;margin:0 0 16px;gap:6px;text-align:center;border-bottom:1px solid #c8b898}.rankLadder li>span{display:grid;place-items:center;width:30px;height:34px;background:#e4dbc6;color:#7b705a;border-radius:5px;margin:0 auto 6px;font-size:14px;font-weight:700}.rankLadder small{font-size:10px;color:#6c604c}.rankLadder [aria-current=step]>span{background:#2d5a27;color:#fff5dd}.rankLadder [aria-current=step] small{color:#2d5a27;font-weight:700}
.rankSearchIdle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:#f8f2e4;border:1px solid #bdb091;border-radius:10px}.rankSearchIdle strong{font-size:15px}.rankSearchIdle p{font-size:12px;color:#6c604c;margin:6px 0 0}.rankSearchIdle button{width:auto;white-space:nowrap;font-size:12px}.rankQueue{display:flex;align-items:center;gap:24px;padding:24px 20px;border:1px solid #899a6f;border-radius:12px;background:#eae9d7}.queueClock{width:104px;height:104px;position:relative;flex-shrink:0}.queueClock svg{width:100%;height:100%;transform:rotate(-90deg)}.queueClock circle{fill:none;stroke:#c9cdb2;stroke-width:5}.queueClock #queueArc{stroke:#2d5a27;stroke-dasharray:276.46;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .25s linear}.queueClock>span{position:absolute;inset:0;display:grid;place-items:center;font:700 35px var(--font-display);color:#254e27}.rankQueue small{font-size:10px;letter-spacing:1px;color:#2d5a27;font-weight:700}.rankQueue h3{font-size:20px;margin:5px 0 10px;line-height:1.2}.rankQueue p{font-size:12px;margin:6px 0}.rankQueue .textbtn{margin-top:10px}.queueNames{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.queueNames span{background:#fffaf080;border:1px solid #c8c5a8;border-radius:5px;padding:4px 8px;font-size:11px}
.rankedTabs{margin-top:28px}.onlineFilters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.onlineFilters button{min-height:44px;padding:9px 12px;border:1px solid #b7aa8c;border-radius:7px;color:#6c604c;background:#f8f2e4;font-size:12px;font-weight:600}.onlineFilters button[aria-pressed=true]{border-color:#2d5a27;color:#2d5a27;background:#e4e7d4}.onlineFilters span{padding-left:4px;opacity:.7}.onlinePlayer{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #c8b898}.onlinePlayer>div{flex:1;min-width:0}.onlinePlayer strong{display:block;font-size:14px;overflow-wrap:anywhere}.onlinePlayer small{display:block;font-size:11px;color:#6c604c;margin-top:4px}.onlinePlayer small.onlineFriend{display:inline-block;margin:0 0 0 6px;color:#2d5a27;font-size:10px;background:#e3e8d3;border-radius:4px;padding:2px 5px}.onlineState{display:flex;align-items:center;gap:5px;font-size:11px;color:#6c604c;margin-top:7px}.onlineState i{width:6px;height:6px;border-radius:50%;background:#7d876a}.onlineState.available i{background:#2d7d33}.onlineState.queued i{background:#a67a20}.onlineState.playing i{background:#8c6552}.onlineHint{margin-top:18px}.rankInvites{margin:24px 0}.rankInvites h3{font-size:18px}.rankInvites article{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f8f2e4;border:1px solid #bdb091;border-radius:10px;padding:16px;margin:10px 0}.rankInvites article>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.rankInvites strong,.rankInvites small{display:block}.rankInvites strong{font-size:15px}.rankInvites small{font-size:11px;color:#6c604c;margin-top:5px}.rankInvites .textbtn{font-size:12px}
.rankBoard{border-top:1px solid #c8b898}.rankBoard article{display:flex;align-items:center;gap:16px;border-bottom:1px solid #c8b898;padding:16px 12px}.rankBoard article.isMe{background:#e6e9d7}.rankBoard article>span{flex:1;min-width:0}.rankBoard strong{font-size:14px;display:block}.rankBoard small{display:block;color:#6c604c;font-size:11px;margin-top:4px}.rankBoard article>b:first-child{font-size:15px;min-width:24px;color:#6c604c}.rankBoard article>b:last-child{text-align:right;color:#2d5a27;font-size:17px;font-variant-numeric:tabular-nums}.rankRules{margin-top:28px;border-top:1px solid #c8b898;padding-top:8px}.rankRules summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:13px;color:#2d5a27;font-weight:700}.rankRules summary:after{content:'+';margin-left:auto;font-size:20px}.rankRules[open] summary:after{content:'−'}.rankRules p{font-size:12px;line-height:1.7;color:#6c604c}.rankResult{padding:20px;margin:20px 0;border:1px solid #71885b;border-radius:10px;background:#263e2b;color:#fff5dd}.rankResult strong{font:700 34px var(--font-display);color:#e3c574}.rankResult span,.rankResult>b{display:block;font-size:13px;margin-top:7px}
@media(max-width:600px){.rankEntry{padding:16px;flex-wrap:wrap}.rankEntry button{width:100%}.rankHero{padding:22px 18px}.rankHero h3{font-size:38px}.rankSearchIdle{flex-wrap:wrap;padding:18px}.rankSearchIdle button{width:100%;margin-top:6px}.rankQueue{flex-direction:column;text-align:center;gap:16px;padding:22px 18px}.queueNames{justify-content:center}.rankInvites article{flex-wrap:wrap}.rankInvites article>div:last-child{width:100%}.rankInvites article .primary{flex:1}.rankedTabs button{font-size:12px;padding-inline:12px}.onlineFilters{gap:6px}.onlineFilters button{font-size:11px;padding-inline:10px}.rankStats{gap:16px}}
@media(prefers-reduced-motion:reduce){.queueClock #queueArc{transition:none}}