*{box-sizing:border-box}html,body{margin:0;background:transparent;color:#f7fafc;font-family:Montserrat,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #2cd97d;outline-offset:3px}p,h1,h2{margin:0}[hidden]{display:none!important}.status-layout{display:grid;grid-template-columns:301px minmax(0,1fr);gap:13px;width:100%}.card{position:relative;overflow:hidden;background:#17222c;border:1px solid #5570864a;border-radius:12px;height:113px}.reward-card{box-shadow:inset 0 4px 15px #202f3c}.reward-art{position:absolute;left:-1px;top:17px;width:96px;height:96px;object-fit:contain}.rays{position:absolute;width:330px;height:330px;left:-120px;top:-97px;pointer-events:none}.reward-copy{position:absolute;left:109px;top:17px;white-space:nowrap}.reward-copy h1{font:900 16px/20px Arial,sans-serif;color:#2cd97d}.reward-copy p{font:italic 10px/16px Arial,sans-serif;margin-top:0}.rewards-cta{position:absolute;left:109px;right:18px;top:61px;border:0;border-radius:6px;background:#2cd97d;color:#07130d;height:32px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:2px;padding:0}.cta-arrow{width:10px;height:10px;display:none}.info,.prizes{border:0;background:transparent;color:#bdd4e8;padding:0}.info img,.prizes img{width:16px;height:16px}.reward-info{position:absolute;right:12px;top:9px}.vip-tag,.vip-word{display:none}.progress-card{padding:10px 13px 12px}.progress-card header{display:flex;align-items:center;justify-content:space-between;padding:0 3px;margin-bottom:10px}.progress-card h2{font-size:13px;font-weight:800;color:#2cd97d;line-height:16px}.prizes{display:flex;align-items:center;gap:10px;font-size:11px}.progress-content{height:65px;border-radius:12px;background:#202f3c;display:grid;grid-template-columns:minmax(150px,1fr) minmax(80px,2.5fr) minmax(150px,1fr);align-items:center;gap:24px;padding:10px 16px}.level{display:flex;align-items:center;gap:8px;min-width:0}.avatar{width:44px;height:44px;object-fit:cover;border-radius:50%}.level strong{display:block;font:600 13px/17px Arial,sans-serif;white-space:nowrap}.level small{display:block;color:#00ce7a;font-size:11px;margin-top:4px;white-space:nowrap}.next{flex-direction:row-reverse;text-align:right}.meter{position:relative;padding-bottom:6px}.track{height:10px;background:#17222c;border-radius:20px;position:relative}.track i{display:block;height:100%;width:var(--progress,0%);border-radius:20px;background:linear-gradient(90deg,#385cfe,#1295ff)}.track>img{position:absolute;width:29px;height:30px;object-fit:contain;left:var(--progress,0%);top:50%;transform:translate(-50%,-50%) rotate(7deg)}.meter p{position:absolute;top:19px;width:100%;text-align:center;font-size:11px;font-weight:700;white-space:nowrap}.meter b{color:#00ce7a}.perks,.manager-card{display:none}#status-message{font:13px/1.5 Montserrat,sans-serif;color:#bdd4e8;margin:12px}
.vip .status-layout{grid-template-columns:294px minmax(0,1fr) 251px;gap:12px}.vip .card{height:161px;background:#181819;border-color:#2cd97d6b}.vip .reward-card{box-shadow:inset 0 4px 15px #242425}.vip .rays{left:-104px;top:-122px;width:294px;height:418px}.vip .reward-art{left:-44px;top:0;width:169px;height:169px;transform:rotate(-16.73deg)}.vip .reward-copy{left:116px;top:39px}.vip .reward-copy p{margin-top:5px;font-size:9px}.vip .vip-word{display:inline;color:#f7fafc}.vip .rewards-cta{left:116px;right:13px;top:102px;border-radius:10px}.vip .cta-arrow{display:block}.vip-tag{position:absolute;right:13px;top:12px;background:linear-gradient(#f0b244,#ffd97d);color:#17120a;font-size:10px;font-weight:700;border-radius:6px;padding:2px 10px}.vip .vip-tag{display:block}.vip .reward-info{display:none}.vip .progress-card{box-shadow:inset 0 4px 20px #2cd97d30;padding:11px 19px}.vip .progress-content{background:linear-gradient(90deg,#242425,#3b423e00);margin-top:12px;height:64px;gap:12px;padding:9px 16px;grid-template-columns:minmax(145px,1fr) minmax(70px,1.7fr) minmax(145px,1fr)}.vip .level strong{font-size:12px}.vip .level small{font-size:10px}.vip .track{background:#3a3a3c}.vip .track i{background:linear-gradient(90deg,#2cd97d,#1b5c39 54%,#252525)}.vip .meter p{font-size:10px}.vip .perks{position:absolute;bottom:0;left:0;right:0;height:48px;border-top:1px solid #2cd97d38;background:#2cd97d08;display:flex;align-items:center;justify-content:space-around}.perks span{display:flex;align-items:center;gap:8px;font-size:10px;white-space:nowrap;padding:0 10px}.perks span+span{border-left:1px solid #3c4b43}.perks img{width:15px;height:15px}.vip .manager-card{display:block;box-shadow:inset 0 4px 15px #2cd97d66}.manager-card header{font-size:13px;color:#2cd97d;padding:9px 13px}.online-dot{float:right;width:8px;height:8px;border-radius:50%;background:#2cd97d;box-shadow:0 0 6px #2cd97d}.manager-content{display:flex;gap:9px;align-items:center;margin:17px 20px}.manager-avatar{width:86px;height:86px;object-fit:contain}.manager-copy strong{font-size:14px;font-weight:600;white-space:nowrap}.manager-copy small{display:block;color:#00ce7a;font-size:12px;white-space:nowrap}.contacts{display:flex;gap:8px;margin-top:17px}.contacts button{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#242425;border:1px solid #2cd97d33;padding:5px}.contacts img{width:19px;height:19px}.contacts button:disabled{opacity:.4;cursor:default}
@media(max-width:1100px) and (min-width:701px){.vip .status-layout{grid-template-columns:250px minmax(0,1fr) 210px}.vip .progress-content{grid-template-columns:100px minmax(50px,1fr) 100px;gap:8px;padding:9px 0}.vip .level{gap:4px}.vip .level strong{font-size:10px}.vip .avatar{width:32px;height:32px}.perks span{font-size:8px;padding:0 4px;gap:4px}.manager-content{margin:17px 12px;gap:7px}.manager-avatar{width:65px;height:65px}.manager-copy strong{font-size:12px}.manager-copy small{font-size:10px}.contacts{gap:5px}.vip .reward-copy{left:95px}.vip .rewards-cta{left:95px;font-size:10px}.vip .reward-copy h1{font-size:14px}.vip .reward-copy p{font-size:8px}}
@media(max-width:700px){.status-layout,.vip .status-layout{display:flex;flex-direction:column;gap:8px}.card{width:100%}.progress-card{order:0;height:125px;padding:8px 16px;border:0}.reward-card{order:1;height:113px}.progress-card header{padding:0;margin-bottom:11px}.progress-card h2{font-size:12px}.prizes span{display:none}.progress-content,.vip .progress-content{display:block;height:64px;background:transparent;padding:0;position:relative;margin:0}.level{position:absolute;left:0;top:6px;display:block}.next{left:auto;right:0;text-align:right}.avatar,.vip .avatar{width:24px;height:24px}.level>div{margin-top:4px}.level strong,.vip .level strong{font:600 10px/12px Montserrat,Arial,sans-serif;max-width:145px;overflow:hidden;text-overflow:ellipsis}.level small,.vip .level small{font-size:10px;margin-top:2px}.meter{position:absolute;top:14px;left:36px;right:36px;padding:0}.track{height:8px;background:#2a3a4e}.track>img{width:25px;height:26px}.meter p,.vip .meter p{top:17px;font-size:8px}.reward-art{left:-11px;top:-8px;width:136px;height:136px}.reward-copy{left:132px;top:17px}.rewards-cta{left:132px;right:16px;top:65px}.vip .reward-card{order:0;height:74px;background:#050a08;box-shadow:inset 0 4px 15px #202f3c}.vip .reward-art{left:-8px;top:-10px;width:95px;height:95px}.vip .rays{left:-80px;top:-80px;width:230px;height:230px}.vip .reward-copy{left:109px;top:16px}.vip .reward-copy h1{font-size:16px}.vip .reward-copy p{font-size:10px;margin-top:2px}.vip .rewards-cta{left:auto;right:12px;top:20px;width:89px;height:32px;font-size:10px;border-radius:8px}.vip .cta-arrow,.vip .vip-tag{display:none}.vip .progress-card{order:1;height:145px;padding:10px 15px;border:1px solid #2cd97d6b;box-shadow:none}.vip .progress-content{margin-top:13px}.vip .perks{height:33px;justify-content:center}.vip .perks span{font-size:10px;font-style:italic;color:#2cd97d;padding:0}.vip .perks span:nth-of-type(2){border:0;padding-left:3px}.vip .perks span:nth-of-type(2) img,.vip .perks span:nth-of-type(n+3){display:none}.vip .perks span:first-child:after{content:','}.vip .manager-card{order:2;height:74px;background:#050a08;box-shadow:inset 0 4px 15px #202f3c;border-color:#5570864a}.manager-card header{display:none}.manager-content{margin:14px 16px;gap:8px}.manager-avatar{width:44px;height:44px}.manager-copy{display:flex;flex-direction:column;flex:1}.manager-copy strong{font-size:14px}.manager-copy small{font-size:12px}.contacts{position:absolute;right:18px;top:21px;margin:0}.vip .manager-copy{padding-right:104px}}
@media(max-width:350px){.vip .reward-copy{left:85px}.vip .reward-copy h1{font-size:13px}.vip .reward-copy p{font-size:8px}.vip .rewards-cta{width:78px;font-size:9px}.manager-copy strong{font-size:12px}.manager-copy small{font-size:10px}.contacts{right:10px;gap:4px}.contacts button{width:27px;height:27px}.vip .manager-copy{padding-right:88px}.level strong{max-width:125px}}

.reward-card:before{content:"";position:absolute;left:-55px;top:-52px;width:200px;height:200px;background:url(status/c90b0.svg) center/100% 100%;pointer-events:none}.vip .reward-card:before{background-image:url(status/35254.svg);top:-30px}.cta-mobile{display:none}.contacts img{transform:none;object-fit:contain;display:block}
@media(max-width:700px){.vip .cta-desktop{display:none}.vip .cta-mobile{display:inline}.vip .reward-copy{right:106px}.vip .reward-copy p{font-size:0}.vip .reward-copy p:after{content:attr(data-mobile);font-size:10px}.vip .reward-copy h1{font-size:16px;letter-spacing:-.6px}.vip .reward-copy p:after{font-size:10px}}
@media(max-width:350px){.vip .reward-copy h1{font-size:13px}.vip .reward-copy p:after{font-size:8px}}

.track>img{margin-top:-4px}.meter span{white-space:pre}.reward-copy{white-space:normal}.reward-copy h1{overflow-wrap:anywhere}.reward-copy p{max-width:175px}.rewards-cta{white-space:normal;line-height:1.1;padding:3px 5px}.perks span{white-space:normal}.manager-copy strong,.manager-copy small{white-space:normal}.vip .reward-copy{right:10px}.vip .reward-copy h1{font-size:15px}.vip .reward-copy p{line-height:12px}.prizes{max-width:55%}.progress-card h2{max-width:45%}
@media(max-width:700px){.vip .reward-copy{right:106px;top:10px}.vip .reward-copy h1{font-size:13px;line-height:16px}.vip .reward-copy p:after{line-height:11px}.reward-copy{right:20px}.reward-copy h1{font-size:15px}.reward-copy p{line-height:12px}.manager-copy strong{font-size:12px}.manager-copy small{font-size:10px}}

/* A slow highlight travels around the manager portrait; the portrait stays still. */
.manager-avatar-ring{position:relative;display:block;flex:none;width:86px;height:86px;border-radius:50%;isolation:isolate}
.manager-avatar-ring:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,#2cd97d22 160deg,#2cd97d 290deg,#bdffe0 325deg,transparent 360deg);padding:1.5px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;animation:manager-ring-orbit 5s linear infinite;pointer-events:none}
.manager-avatar-ring .manager-avatar{display:block;width:100%;height:100%}
@keyframes manager-ring-orbit{to{transform:rotate(360deg)}}
@media(max-width:1100px) and (min-width:701px){.manager-avatar-ring{width:65px;height:65px}}
@media(max-width:700px){.manager-avatar-ring{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.manager-avatar-ring:before{animation:none}}

/* Each separator sits in the middle of the free space between labels. */
@media(min-width:701px){
 .vip .perks{justify-content:initial;padding:0 10px;gap:0}
 .vip .perks span{flex:none;padding:0;border:0}
 .vip .perks .perk-divider{display:flex;justify-content:center;flex:1;min-width:8px;height:16px}
 .vip .perks .perk-divider:before{content:"";width:1px;height:16px;background:#3c4b43}
}
@media(max-width:700px){.perk-divider{display:none}}

.perk-vip{color:#2cd97d;font-weight:inherit}
@media(min-width:701px){.vip .perks{padding-left:24px;padding-right:24px}}

#status-message:empty{display:none}

/* Supplied September status designs: full character artwork, compact progress. */
@media(min-width:701px){
 .progress-content{position:relative;grid-template-columns:minmax(180px,1fr) minmax(100px,2.5fr) minmax(135px,1fr);gap:20px;padding:0 16px 0 8px;overflow:visible}
 .current{height:65px;align-items:center;gap:10px}
 .current .avatar{width:62px;height:70px;object-fit:cover;object-position:center top;border:0;border-radius:0;align-self:flex-end;flex-shrink:0}
 body:not(.vip) .next{height:65px;gap:10px}body:not(.vip) .next .avatar{display:block;width:62px;height:70px;object-fit:cover;object-position:center top;border:0;border-radius:0;align-self:flex-end;flex-shrink:0}
 .level strong{white-space:normal;line-height:16px}
 .meter{padding:0 0 2px}.meter p{top:13px;margin:0}.track>img{margin-top:0;width:24px;height:24px}
 .vip .progress-content{height:64px;margin-top:12px;padding:0 8px;grid-template-columns:minmax(160px,1fr) minmax(90px,1.7fr) minmax(160px,1fr);gap:12px}
 .vip .current .avatar,.vip .next .avatar{width:62px;height:70px;object-fit:cover;object-position:center top;border:0;border-radius:0;align-self:flex-end;flex-shrink:0}
 .vip .next{height:64px;gap:10px}.vip .level strong{font-size:12px}.vip .progress-card{padding-left:19px;padding-right:19px}
 .vip .card{border-color:#2cd97d70;background:#181819}
 .vip .progress-card,.vip .manager-card{box-shadow:inset 0 0 18px #2cd97d35}
 .vip .reward-copy{top:39px}.vip .rewards-cta{top:102px}
 .vip .track i{background:linear-gradient(90deg,#2cd97d,#1b5c39 54%,#252525)}
}
@media(min-width:701px) and (max-width:1100px){
 .status-layout{grid-template-columns:250px minmax(0,1fr)}
 .progress-content{grid-template-columns:minmax(130px,1fr) minmax(70px,1.6fr) minmax(105px,1fr);gap:10px}
 .vip .status-layout{grid-template-columns:250px minmax(0,1fr)}
 .vip .manager-card{grid-column:1/-1;height:90px}.vip .manager-card header{display:none}.vip .manager-content{margin:12px 20px}.vip .manager-avatar-ring{width:62px;height:62px}.vip .contacts{position:absolute;right:20px;top:12px}
 .vip .progress-content{grid-template-columns:minmax(120px,1fr) minmax(60px,1.3fr) minmax(120px,1fr);gap:6px}
 .current .avatar,body:not(.vip) .next .avatar,.vip .current .avatar,.vip .next .avatar{width:42px}
}
@media(max-width:700px){
 .avatar,.vip .avatar{object-fit:contain;object-position:top;border-radius:0;border:0}
}

/* Keep the progress marker centered at every breakpoint. */
.track>img{top:50%;margin-top:0;transform:translate(-50%,-50%);object-fit:contain}

/* Supplied radial artwork, mirrored around the current and next portraits. */
@media(min-width:701px){
 .progress-content{isolation:isolate}
 .progress-content::before,.progress-content::after{content:"";position:absolute;top:0;bottom:0;width:min(245px,45%);background:url("status/level-rays.svg") right center/245px 100% no-repeat;pointer-events:none;z-index:-1}
 .progress-content::before{left:0;transform:scaleX(-1);border-radius:0 12px 12px 0}
 .progress-content::after{right:0;border-radius:0 12px 12px 0}
 .progress-content>.level,.progress-content>.meter{z-index:1}
}

/* Align the progress diamond with the supplied design. */
.track>img{margin-top:-4px}

/* Shared standard/VIP rewards button feedback without shifting layout. */
.rewards-cta{cursor:pointer;transition:filter 160ms ease-out}
@media(hover:hover){.rewards-cta:hover{filter:brightness(.9)}}
.rewards-cta:focus-visible{filter:brightness(.9);outline:2px solid #a0ffd0;outline-offset:3px}
.rewards-cta:active{filter:brightness(.82)}
@media(prefers-reduced-motion:reduce){.rewards-cta{transition:none}}

/* Subtle rays behind the level portraits. */
.progress-content::before,.progress-content::after{opacity:.75}

/* Keep the visible bottom gap inside the height measured for the parent. */
body{display:flow-root}
.status-layout:not([hidden]){margin-bottom:20px}

/* Mobile VIP status matches the portrait / centered meter reference. */
@media(max-width:700px){
 .vip .progress-card{height:clamp(196px,40vw,228px);padding:12px 14px 38px;border-radius:14px;background:#181b19;border-color:#24553b}
 .vip .progress-card header{margin:0 0 4px;padding:0}.vip .progress-card h2{font-size:16px;line-height:20px}
 .vip .prizes img{width:19px;height:19px}
 .vip .progress-content{position:relative;height:calc(100% - 24px);margin:0;padding:0;background:none}
 .vip .level{top:0;width:46%;display:flex;flex-direction:column;align-items:flex-start;gap:0}
 .vip .level.next{left:auto;right:0;align-items:flex-end;text-align:right}
 .vip .progress-content .level-portrait,.vip .level>.avatar{width:clamp(58px,13vw,75px);height:clamp(66px,15vw,86px);align-self:auto;mask-image:linear-gradient(#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(#000 65%,transparent 100%)}
 .vip .level>div{margin-top:0;width:100%}.vip .level strong{font-size:12px;line-height:16px;max-width:none;white-space:normal;overflow:visible}
 .vip .level small{font-size:12px;line-height:16px;margin-top:2px}
 .vip .meter{left:19%;right:19%;top:clamp(30px,6.5vw,42px);padding:0}
 .vip .track{height:9px;background:#3a3a3c}.vip .track>img{width:25px;height:25px;margin-top:0}
 .vip .meter p{top:17px;margin:0;font-size:10px;line-height:14px}
 .vip .perks{height:36px;background:#18302333;border-top-color:#287048;gap:0}
 .vip .perks span{font-size:12px;line-height:16px}.vip .perks img{width:18px;height:18px}
 .vip .manager-card{height:78px;background:radial-gradient(ellipse 40% 145% at 3% 50%,#16d67b99 0%,#08683f77 32%,transparent 78%),linear-gradient(100deg,#06110c,#020504 52%,#060a0c);box-shadow:inset 0 2px 10px #67819440;border-color:#355263}
 .vip .manager-content{height:100%;margin:0;padding:12px 14px;align-items:center}
 .vip .contacts{top:50%;transform:translateY(-50%);right:14px}
 .vip .manager-copy strong{font-size:13px;line-height:17px}.vip .manager-copy small{font-size:11px;line-height:16px}
 .vip .reward-copy{top:50%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center}
 .vip .reward-copy p{margin-top:3px}
}

/* Shared manager portrait, desktop and mobile. */
.manager-avatar-ring .manager-avatar{border-radius:50%;object-fit:cover;}

/* Keep the mobile comma attached to the label, not separated by the icon gap. */
@media(max-width:700px){.vip .perks span:first-of-type{column-gap:0}.vip .perks span:first-of-type>img{margin-right:8px}}

/* Keep the next rank portrait on the right in mobile status cards. */
@media(max-width:700px){.progress-content .level.next>.level-portrait,.progress-content .level.next>.avatar{margin-left:auto;margin-right:0;align-self:flex-end}}
