/* Real Discord artwork, with a site-only premium finish for the Guardian. */
.role-emblem{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;flex:0 0 auto;vertical-align:middle}
.role-emblem img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 5px 12px #0006)}
.support-card:has(>.role-emblem){container-type:inline-size;--card-inset:35px;--support-emblem-size:clamp(72px,20cqw,104px)}
.support-card>.role-emblem{position:absolute;top:calc(var(--card-inset) + 50px);right:var(--card-inset);width:var(--support-emblem-size);height:var(--support-emblem-size);margin:0;pointer-events:none}
.support-card:has(>.role-emblem) h2{margin-top:40px;padding-right:calc(var(--support-emblem-size) + 24px);font-size:clamp(26px,9cqw,53px);min-height:var(--support-emblem-size)}
@media(max-width:1150px){.support-card:has(>.role-emblem){--card-inset:28px}}
@media(max-width:700px){.support-card:has(>.role-emblem){--card-inset:26px;--support-emblem-size:72px}.support-card:has(>.role-emblem) h2{font-size:clamp(26px,10cqw,44px);padding-right:88px}}
@media(max-width:360px){.support-card:has(>.role-emblem){--support-emblem-size:64px}.support-card:has(>.role-emblem) h2{font-size:24px;padding-right:80px}}
.role-emblem--guardian:before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#ffa12b40,transparent 68%);filter:blur(9px);animation:guardian-glow 5s ease-in-out infinite;z-index:0}
.role-emblem--guardian:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffc94d30 43%,#fff5c7d9 49%,#ffc94d55 54%,transparent 65%);background-size:320% 100%;background-position:150% 0;mask:url('./assets/role-guardian.png') center/contain no-repeat;-webkit-mask:url('./assets/role-guardian.png') center/contain no-repeat;mix-blend-mode:screen;animation:guardian-shine 6s ease-in-out infinite}
@keyframes guardian-shine{0%,16%{background-position:150% 0;opacity:0}25%{opacity:1}60%{background-position:-60% 0;opacity:1}70%,100%{background-position:-60% 0;opacity:0}}
@keyframes guardian-glow{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.vip-role-identity{display:flex;align-items:center;gap:22px;padding-top:24px}.vip-role-identity .vip-plan{padding-top:0}.vip-role-identity .role-emblem{width:86px;height:86px}.vip-role-identity .role-emblem[hidden]{display:none!important}
.vip-panel:not([data-vip-state=active]) .role-emblem{filter:grayscale(.65);opacity:.55}.vip-panel:not([data-vip-state=active]) .role-emblem:before,.vip-panel:not([data-vip-state=active]) .role-emblem:after{animation:none;opacity:0}
html[data-theme=light] .role-emblem img{filter:drop-shadow(0 3px 7px #0003)}
@media(max-width:600px){.role-emblem{width:88px;height:88px}.vip-role-identity{gap:15px}.vip-role-identity .role-emblem{width:70px;height:70px}.vip-role-identity .vip-plan strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.role-emblem--guardian:before,.role-emblem--guardian:after{animation:none}.role-emblem--guardian:before{opacity:.6}.role-emblem--guardian:after{opacity:0}}