.rank-bronze{--rank:#d8a06a;--rank-deep:#583c29}.rank-silver{--rank:#d0deea;--rank-deep:#3a4b59}.rank-gold{--rank:#ffd778;--rank-deep:#685124}.rank-platinum{--rank:#9be5d5;--rank-deep:#285951}.rank-diamond{--rank:#91d9ff;--rank-deep:#274c70}.rank-stellar{--rank:#d6afff;--rank-deep:#523775}.rank-king{--rank:#ffe299;--rank-deep:#252317}
.rank-shield{display:block;width:24px;height:28px;color:var(--rank);flex:none;filter:drop-shadow(0 2px 2px #0005)}.rank-shield-base{fill:var(--rank-deep);stroke:var(--rank);stroke-width:1.4}
.rank-badge{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--rank);font:750 11px/1.1 system-ui;vertical-align:middle;white-space:nowrap}.rank-badge .rank-shield{width:16px;height:19px}.rank-badge>span{color:inherit!important;font:inherit!important;margin:0!important}
.game-table .seat-name{min-width:0}.game-table .seat-name strong{display:flex;align-items:center;gap:5px}.seat-nickname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}.seat-name .rank-badge{font-size:10px}.seat-name .rank-badge .rank-shield{width:14px;height:17px}
.progression-profile{margin:24px 0;padding:28px;border:1px solid color-mix(in srgb,var(--rank) 55%,transparent);border-radius:18px;background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--rank) 12%,transparent),transparent 65%),linear-gradient(130deg,#263d2f,#13251c);box-shadow:inset 0 1px #ffffff14,0 10px 30px #0002;color:#e9ecdc}.progression-top{display:flex;gap:20px;align-items:center}.rank-medallion{display:grid;place-items:center;flex:none;width:80px;height:90px;background:radial-gradient(ellipse,var(--rank-deep),transparent 70%)}.rank-medallion .rank-shield{width:62px;height:73px}.progression-title{flex:1;min-width:0}.progression-title small{font-size:12px;color:#acbea8;letter-spacing:2px}.progression-title h2{font-size:28px;color:var(--rank);margin:6px 0}.progression-title h2 span{font:700 17px system-ui;margin-left:10px}.progression-title p{font-size:13px;margin:6px 0;color:#c0ceb6}.progression-total{text-align:right}.progression-total span{display:block;color:#acbea8;font-size:12px}.progression-total strong{display:block;font:750 27px system-ui;color:var(--rank);margin-top:5px;font-variant-numeric:tabular-nums}
.xp-track{height:9px;background:#07170f;border-radius:20px;overflow:hidden;margin:20px 0 8px;box-shadow:inset 0 1px 3px #0008}.xp-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rank-deep),var(--rank));min-width:0}.xp-caption{display:flex;gap:12px;justify-content:space-between;color:#b7c7ad;font-size:12px}.rank-road{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin-top:26px}.rank-milestone{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0;padding:14px 3px;border:1px solid transparent;border-radius:10px;background:#0d20194d}.rank-milestone .rank-shield{width:30px;height:35px}.rank-milestone strong{font-size:12px;color:var(--rank);white-space:nowrap}.rank-milestone small{font-size:10px;color:#a8b6a3}.rank-milestone.locked{opacity:.45}.rank-milestone.current{border-color:var(--rank);background:color-mix(in srgb,var(--rank) 9%,transparent)}.xp-rules{margin-top:22px;padding-top:16px;border-top:1px solid #ffffff14}.xp-rules summary{cursor:pointer;font-size:13px;color:#d7c697}.xp-rules p{font-size:12px;line-height:1.8;color:#b9c6b0}
.experience-result{border:1px solid #a49b6044;background:#14281e;border-radius:12px;padding:16px 20px;margin:18px 0;--rank:#e6c67f;--rank-deep:#685124}.experience-earned{display:flex;align-items:center;gap:18px}.experience-earned>.rank-badge{font-size:14px}.experience-earned>.rank-badge .rank-shield{width:30px;height:36px}.experience-result strong{font-size:19px;color:#f1d294}.experience-result p{margin:6px 0 0;font-size:12px;line-height:1.6;color:#bacab0}.experience-result small{font-size:12px;color:#a8bda2}.experience-result .xp-track{margin-top:12px}.level-up-copy{padding:10px 0 0;color:#ffe3a1;font-size:17px;font-weight:750}.experience-result.level-up{animation:rank-rise .8s ease-out}.account-nav-copy .rank-badge{font-size:10px;letter-spacing:0}.account-nav-copy .rank-badge .rank-shield{width:12px;height:14px}
@keyframes rank-rise{from{box-shadow:0 0 0 2px #ffe19688,0 0 25px #eebc5b55;transform:translateY(5px)}to{box-shadow:none;transform:none}}
@media(prefers-reduced-motion:reduce){.experience-result.level-up{animation:none}}
@media(max-width:600px){.progression-profile{padding:18px;margin:18px 0}.progression-top{gap:10px;flex-wrap:wrap}.rank-medallion{width:52px;height:64px}.rank-medallion .rank-shield{width:43px;height:51px}.progression-title h2{font-size:23px}.progression-title h2 span{font-size:14px;margin-left:5px}.progression-total{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid #ffffff12}.progression-total strong{font-size:19px;margin:0}.xp-track{margin-top:10px}.xp-caption{font-size:11px;flex-wrap:wrap;gap:5px}.rank-road{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:20px}.rank-milestone{padding:10px 2px}.rank-milestone strong{font-size:11px}.experience-result{padding:13px}.experience-earned{gap:12px}.experience-result strong{font-size:17px}}
@container seat (max-width:270px){.seat-name .rank-badge{font-size:9px;gap:2px}.seat-name .rank-badge .rank-shield{width:12px;height:14px}.game-table .seat-name strong{gap:3px}}
@container seat (max-height:90px){.seat-name .rank-badge{font-size:8px}.seat-name .rank-badge .rank-shield{width:10px;height:12px}}
.experience-result a{color:#f2d18b;text-underline-offset:3px}.account-nav-copy small>span{letter-spacing:0}
/* Approved two-character metal crests. One alpha atlas, shared by every surface. */
.rank-platinum{--rank:#ffe09a;--rank-deep:#66502a}.rank-diamond{--rank:#91d4b0;--rank-deep:#20523e}.rank-stellar{--rank:#f4b09b;--rank-deep:#662e29}.rank-king{--rank:#dac5ff;--rank-deep:#534079}.rank-guest{--rank:#bac1c7;--rank-deep:#343a3e}
.rank-art{display:block;flex:none;overflow:hidden;aspect-ratio:1;width:40px;height:40px;filter:drop-shadow(0 2px 2px #0008)}
.rank-badge .rank-art{width:36px;height:36px}.rank-medallion{width:104px;height:104px;background:none}.rank-medallion .rank-art{width:104px;height:104px}.rank-milestone .rank-art{width:64px;height:64px}.rank-milestone.locked{opacity:.65}.experience-earned>.rank-badge .rank-art{width:52px;height:52px}.account-nav-copy .rank-badge .rank-art{width:26px;height:26px}
.game-table .seat-card:not(.empty-seat){position:relative;overflow:visible}
.game-table .seat-card .seat-rank-badge{position:absolute;top:-16px;left:-10px;z-index:2;display:block;width:66px;height:66px;pointer-events:none}
.game-table .seat-rank-badge .rank-art{width:100%;height:100%;filter:drop-shadow(0 2px 2px #07120ce0)}
.game-table .seat-card .seat-header{padding-left:28px;flex-wrap:nowrap}
.game-table .seat-card .seat-name strong{display:block}.game-table .seat-card .seat-nickname{display:block;overflow:hidden;text-overflow:ellipsis}
@container seat (max-height:270px){.game-table .seat-card .seat-rank-badge{width:58px;height:58px;top:-14px;left:-9px}.game-table .seat-card .seat-header{padding-left:21px!important}}
@container seat (max-width:220px){.game-table .seat-card .seat-rank-badge{width:48px;height:48px;top:-11px;left:-8px}.game-table .seat-card .seat-header{padding-left:17px!important;gap:5px!important}}
@container seat (max-height:140px){.game-table .seat-card .seat-rank-badge{width:40px;height:40px;top:-10px;left:-7px}.game-table .seat-card .seat-header{padding-left:17px!important}.game-table .seat-card .seat-header .avatar{display:grid!important;width:18px!important;height:18px!important}}
@container seat (max-height:90px){.game-table .seat-card .seat-rank-badge{width:32px;height:32px;top:-7px;left:-5px}.game-table .seat-card .seat-header{padding-left:13px!important;gap:3px!important}.game-table .seat-card .seat-header .avatar{width:14px!important;height:14px!important}}
@media(max-width:600px){.rank-medallion,.rank-medallion .rank-art{width:76px;height:76px}.rank-milestone .rank-art{width:58px;height:58px}}
/* Four-card rank gallery and a shared, gradual size progression. */
.rank-bronze,.rank-guest{--rank-scale:.82}.rank-silver{--rank-scale:.89}.rank-gold{--rank-scale:.96}.rank-platinum{--rank-scale:1.03}.rank-diamond{--rank-scale:1.10}.rank-stellar{--rank-scale:1.17}.rank-king{--rank-scale:1.24}
.rank-medallion{width:150px;height:150px}.rank-medallion .rank-art{width:calc(118px * var(--rank-scale));height:calc(118px * var(--rank-scale))}
.rank-gallery{margin-top:30px;min-width:0}.rank-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.rank-gallery-heading small{font-size:12px;letter-spacing:1px;color:#aebda0}.rank-gallery-heading h3{margin:5px 0 0;font-size:22px;color:#f1d598}.rank-gallery-nav{display:flex;align-items:center;gap:8px}.rank-gallery-range{font:650 12px system-ui;color:#afbdab;font-variant-numeric:tabular-nums;margin-right:5px;min-width:58px}.rank-gallery-nav button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #bba16a66;border-radius:50%;background:#11241b;color:#f2d18b;font-size:22px;cursor:pointer}.rank-gallery-nav button:hover:not(:disabled){background:#40503b;border-color:#e7ca85}.rank-gallery-nav button:disabled{opacity:.3;cursor:default}
.rank-gallery .rank-road{--rank-visible:4;--rank-gap:14px;display:flex;position:relative;gap:var(--rank-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0;padding:3px 0 8px;outline-offset:3px}.rank-road::-webkit-scrollbar{display:none}.rank-gallery .rank-milestone{flex:0 0 calc((100% - (var(--rank-visible) - 1)*var(--rank-gap))/var(--rank-visible));box-sizing:border-box;scroll-snap-align:start;position:relative;gap:0;padding:14px 10px 20px;border:1px solid color-mix(in srgb,var(--rank) 28%,transparent);border-radius:14px;background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--rank) 13%,transparent),transparent 66%),linear-gradient(160deg,#23392c,#10231a);box-shadow:inset 0 1px #ffffff0d;opacity:1;overflow:hidden}.rank-gallery .rank-milestone.current{border-color:var(--rank);background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--rank) 24%,transparent),transparent 72%),linear-gradient(160deg,#304732,#14291e);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank) 28%,transparent)}
.rank-card-top{display:flex;width:100%;align-items:center;justify-content:space-between;padding:0 2px;font:600 11px system-ui;color:#849781}.rank-card-top>span{letter-spacing:2px}.rank-card-top b{font-size:10px;font-weight:600;color:#a0b399}.current .rank-card-top b{color:var(--rank)}.rank-emblem-stage{height:180px;width:100%;display:grid;place-items:center;position:relative}.rank-emblem-stage:after{content:'';position:absolute;bottom:8px;width:60%;height:9px;background:radial-gradient(ellipse,#0006,transparent 72%);pointer-events:none}.rank-gallery .rank-milestone .rank-art{width:calc(130px * var(--rank-scale));height:calc(130px * var(--rank-scale));max-width:100%;filter:drop-shadow(0 5px 5px #0008)}.rank-gallery .rank-milestone strong{font-size:23px;letter-spacing:3px;line-height:1.3}.rank-gallery .rank-milestone>small{font:650 12px system-ui;color:#abb99e;margin-top:6px}.rank-gallery .rank-milestone>p{margin:15px 0 0;padding-top:13px;border-top:1px solid #ffffff14;width:100%;color:#ced5bb;font-size:13px;line-height:1.7;text-wrap:balance}
.game-table .seat-card .seat-rank-badge{--seat-rank-base:62px;width:calc(var(--seat-rank-base)*var(--rank-scale));height:calc(var(--seat-rank-base)*var(--rank-scale))}
@container seat (max-height:270px){.game-table .seat-card .seat-rank-badge{--seat-rank-base:54px}}
@container seat (max-width:220px){.game-table .seat-card .seat-rank-badge{--seat-rank-base:44px}}
@container seat (max-height:140px){.game-table .seat-card .seat-rank-badge{--seat-rank-base:36px}}
@container seat (max-height:90px){.game-table .seat-card .seat-rank-badge{--seat-rank-base:28px}}
@media(max-width:700px){.rank-gallery .rank-road{--rank-visible:2;--rank-gap:10px}.rank-gallery-heading h3{font-size:18px}.rank-gallery-heading small{font-size:10px;letter-spacing:0}.rank-gallery-nav{gap:5px}.rank-gallery-nav button{width:34px;height:34px;min-height:34px;font-size:20px}.rank-gallery-range{min-width:0;font-size:10px;margin-right:0}.rank-gallery .rank-milestone{padding:12px 8px 16px}.rank-emblem-stage{height:140px}.rank-gallery .rank-milestone .rank-art{width:calc(90px * var(--rank-scale));height:calc(90px * var(--rank-scale))}.rank-gallery .rank-milestone strong{font-size:20px}.rank-gallery .rank-milestone>p{font-size:12px;max-width:100%;margin-top:12px}.rank-medallion{width:102px;height:102px}.rank-medallion .rank-art{width:calc(82px * var(--rank-scale));height:calc(82px * var(--rank-scale))}}
.achievement-medal{width:84px;height:84px;flex:none;filter:drop-shadow(0 4px 8px #061a1255)}
.profile-achievement{display:flex;align-items:center;gap:20px;border:1px solid #bfa26988;border-radius:18px;padding:22px 26px;margin:0 0 24px;background:linear-gradient(120deg,#3d4930,#172d21);color:#ebd298}
.profile-achievement small{color:#bfc39e;font-size:12px}.profile-achievement h2{font-size:23px;font-weight:800;margin:4px 0}.profile-achievement p{font-size:13px;color:#b8cbb0;margin:0}.profile-achievement>a{margin-left:auto;font-size:13px;font-weight:700;color:#edcd8c;text-decoration:none}
@media(max-width:560px){.profile-achievement{padding:18px;gap:13px;flex-wrap:wrap}.profile-achievement .achievement-medal{width:65px;height:65px}.profile-achievement h2{font-size:20px}.profile-achievement>a{margin-left:78px}}