.rank-badge{display:inline-flex;align-items:center;gap:7px;color:#dbc58d;vertical-align:middle;max-width:100%}
.rank-emblem{display:block;object-fit:contain;object-position:center;width:32px;height:32px;flex:none;margin:0}
.rank-name{font:14px/1.3 'Literata',Georgia,serif}
.rank-art{position:relative;display:grid;place-items:center;isolation:isolate}
.rank-art:before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(ellipse,#d5af5e38,transparent 70%);z-index:-1}
.rank-art .rank-emblem{filter:drop-shadow(0 3px 4px #0007) drop-shadow(0 0 9px #d1ad5a33)}
[data-rank=expert]{--rank-accent:#b2c59a}[data-rank=player]{--rank-accent:#dba066}[data-rank=legend]{--rank-accent:#dfba66}
.rank-card{--rank-accent:#ddc38c;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;margin:6px 0 20px;padding:18px 16px;border:1px solid #baa168a6;border-radius:9px;background:radial-gradient(ellipse at 0 50%,#b3954630,transparent 52%),linear-gradient(125deg,#173226e8,#0c231beb);box-shadow:inset 0 1px #f4dfa517,0 7px 22px #0002;text-align:left;min-width:0}
.rank-card .rank-art .rank-emblem{width:88px;height:88px}
.rank-card-copy{display:grid;gap:5px;min-width:0}
.rank-card-name{font:23px/1.25 'Literata',Georgia,serif;color:#f0e2bd;overflow-wrap:anywhere}
.rank-card-score{font:19px/1.3 'Literata',Georgia,serif;color:var(--rank-accent);font-variant-numeric:tabular-nums}
.rank-track{height:9px;box-sizing:border-box;margin:7px 0 3px;overflow:hidden;border-radius:10px;background:#08180f88;border:1px solid #af98636b;box-shadow:inset 0 1px 3px #0008}
.rank-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(0deg,#af9152,#e2ca89);box-shadow:inset 0 1px #fff3,0 0 8px #d6b76a55;transform-origin:left}
.rank-distance{font:13px/1.4 Arial,sans-serif;color:#ded9c3}
.rank-distance b{font-weight:400;white-space:nowrap}
.rank-max{color:#dcc38b}
body #app .account-summary .menu-renown{display:inline-flex;align-items:center;gap:7px}
body #app .account-summary .menu-renown .rank-emblem{width:28px;height:28px;margin:0;filter:drop-shadow(0 0 5px #d7ae5233)}
body #app .account-summary .menu-renown .rank-name{font-size:16px;line-height:1.2}
body #app .account-summary>span>small{display:block;line-height:1}
.profile-overview>.rank-card{width:100%;box-sizing:border-box;grid-template-columns:1fr;gap:8px;text-align:center;padding:15px 12px}
.profile-overview .rank-card .rank-art .rank-emblem{width:80px;height:80px}
.profile-overview .rank-card-name{font-size:21px}
.profile-overview .rank-card-score{font-size:18px}
.rank-ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rank-ladder>li{position:relative;display:flex;align-items:center;gap:16px;min-width:0;padding:9px 14px;border:1px solid #a7925d4d;border-radius:7px;background:linear-gradient(110deg,#1d362970,#0c211bb3);transition:border-color .18s,background-color .18s}
.rank-ladder .rank-emblem{width:64px;height:64px}
.rank-ladder strong{font:20px/1.3 'Literata',Georgia,serif;color:#e8dbb5}
.rank-ladder small{display:block;margin-top:5px;font-size:13px;color:#c3c1ab}
.rank-ladder .is-current{border-color:#d5b775;background:radial-gradient(ellipse at 0 50%,#c5a65733,transparent 65%),#152c20;box-shadow:inset 0 0 12px #d8b85e13}
.rank-current-label{display:block;margin-top:4px;color:#e0c383;font-size:11px;letter-spacing:.02em}
.rank-explainer{margin-top:18px}
.rank-explainer summary{cursor:pointer}
.leaderboard .leader-rank{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.leaderboard .rank-badge{flex-direction:column;gap:3px}
.leaderboard .rank-emblem{width:42px;height:42px}
.leaderboard .rank-name{font-size:12px}
.leaderboard .leader-points{font:19px/1.3 'Literata',Georgia,serif;color:#e4d2a1;font-variant-numeric:tabular-nums}
.leaderboard>li{border-radius:6px}
.leaderboard>li:first-child{background:linear-gradient(100deg,#b499492c,#13291d77);border-block:1px solid #beaa6d66}
.leaderboard>li.is-self{box-shadow:inset 3px 0 #d8b875;background:#aa97521c}
.friend-renown .rank-emblem{width:36px;height:36px}
body #app .rank-navigation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:8px 0 16px}
body #app .rank-navigation button{margin:0!important;white-space:nowrap;padding-inline:8px}
body #app .home-menu .home-primary:hover,body #app .home-menu .home-primary:focus-visible{background:#193024!important;color:#d6bd7f!important;border-color:#d6bd7f!important}
body #app .game .opponent .name{display:flex!important;align-items:center;justify-content:center;gap:7px}
body #app .game .opponent .name .opponent-nickname{min-width:0;overflow:hidden;text-overflow:ellipsis}
body #app .game .opponent .name .rank-badge{display:inline-flex;align-items:center;flex:none;line-height:1;gap:4px;margin:0}
.game .opponent-renown .rank-emblem{width:24px;height:24px}
.game .opponent-renown .rank-name{font-size:12px}
html.flat-table body #app .game .result .panel:has(.rank-result){width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;box-sizing:border-box;padding:24px!important;background:radial-gradient(ellipse at 50% 30%,#48603a66,transparent 65%),linear-gradient(145deg,#193b2b,#0c241b)!important;border:1px solid #c1a56b!important;box-shadow:0 20px 60px #0008,inset 0 0 0 4px #b59c6110!important;border-radius:12px}
html.flat-table body #app .game .result .panel:has(.rank-result)>.result-avatar{display:none}
html.flat-table body #app .game .result .panel:has(.rank-result)>h2{margin:0 0 8px;color:#f1dc9f;text-shadow:0 0 20px #d4b05b33;font-size:32px}
html.flat-table body #app .game .result .panel:has(.rank-result)>p{font-size:13px;margin:0 0 8px;color:#c1c7ad}
.rank-result{text-align:center;margin:8px 0 20px;padding-top:10px;border-top:1px solid #bfa46144}
.rank-result>.rank-art .rank-emblem{width:108px;height:108px}
.rank-result h3{font:19px/1.3 'Literata',Georgia,serif;color:#e5c887;margin:0 0 4px}
.rank-transition{font-size:13px;color:#ddd2b3;margin:0 0 6px}
.result-rank-name{display:block;font:19px/1.3 'Literata',Georgia,serif;color:#e8dab1;margin-top:3px}
.rank-delta{display:grid;gap:5px;margin:10px 0 16px}
.rank-delta>strong{font:30px/1.3 'Literata',Georgia,serif;color:#f0d28d;font-variant-numeric:tabular-nums}
.rank-delta>span{font-size:17px;color:#d8d6bc;font-variant-numeric:tabular-nums}
.rank-result.is-loss .rank-delta>strong{color:#dda389}
.rank-result.is-draw .rank-delta>strong{color:#d1c9ad}
.rank-result .rank-distance{display:block;margin-top:8px;font-size:14px}
html.flat-table body #app .game .result #again{background:linear-gradient(#cdb67d,#aa9058)!important;color:#17271c!important;border:1px solid #e0ca92!important}
html.flat-table body #app .game .result #again:hover{background:#1b3427!important;color:#e0ca92!important}
html.flat-table body #app .game .result #back-home{background:transparent!important;border:1px solid #b59c6155!important;color:#d8d2b8!important}
@media(prefers-reduced-motion:no-preference){.rank-result .rank-art{animation:rank-arrive .65s ease-out both}.rank-result .rank-track>span{animation:rank-fill .8s ease-out both}.rank-ladder>li:hover{border-color:#d1b77788;background-color:#29432d66}@keyframes rank-arrive{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes rank-fill{from{transform:scaleX(.2)}to{transform:scaleX(1)}}}
@media(max-width:650px){.rank-card{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:15px 12px}.rank-card .rank-art .rank-emblem{width:76px;height:76px}.rank-card-name{font-size:21px}.rank-card-score{font-size:18px}.rank-distance{font-size:12px}.profile-overview>.rank-card{grid-column:1/-1;grid-template-columns:76px minmax(0,1fr);gap:12px;text-align:left}.profile-overview .rank-card .rank-art .rank-emblem{width:76px;height:76px}.rank-ladder>li{gap:12px;padding:8px 10px}.rank-ladder .rank-emblem{width:58px;height:58px}.rank-ladder strong{font-size:18px}.rank-ladder small{font-size:12px}.leaderboard .leader-rank{gap:6px}.leaderboard .rank-emblem{width:36px;height:36px}.leaderboard .rank-name{display:none}.leaderboard .leader-points{font-size:15px}.game .opponent-renown .rank-name{display:none}body #app .game .opponent .name{gap:3px}body #app .rank-navigation button{font-size:14px}}
@media(max-width:350px){.rank-card{grid-template-columns:64px minmax(0,1fr);gap:10px}.rank-card .rank-art .rank-emblem{width:64px;height:64px}.rank-card-name{font-size:19px}.rank-card-score{font-size:17px}.rank-distance{font-size:12px}.leaderboard .leader-rank{flex-direction:column;gap:0}.leaderboard .leader-points{font-size:13px}}

/* Identical score and emblem columns across every leaderboard row. */
body #app .leaderboard li{display:grid;grid-template-columns:26px 42px minmax(0,1fr) 150px;gap:12px;align-items:center}
body #app .leaderboard .leader-rank{display:grid;grid-template-columns:60px 78px;gap:12px;align-items:center;justify-content:end;width:150px}
body #app .leaderboard .leader-points{text-align:right;white-space:nowrap}
body #app .leaderboard .leader-rank .rank-badge{justify-self:center;align-items:center;width:78px;min-width:0}
@media(max-width:650px){body #app .leaderboard li{grid-template-columns:20px 36px minmax(0,1fr) 88px;gap:8px}body #app .leaderboard .avatar-art{width:36px;height:36px}body #app .leaderboard .leader-rank{grid-template-columns:46px 36px;gap:6px;width:88px}body #app .leaderboard .leader-rank .rank-badge{width:36px}body #app .leaderboard li>div:not(.leader-rank)>strong{font-size:16px}body #app .leaderboard li>div:not(.leader-rank)>small{font-size:10px}body #app .leaderboard .leader-points{font-size:15px}}