@import url('./cosmetic-atelier.css?__build=120c79300c59fc35ef3c32a8');
@import url('./lightning-nameplate.css?__build=120c79300c59fc35ef3c32a8');
/* Reserve the level suffix even in compact identity cards. Only the title may
 * truncate; custom labels and LV remain distinct and never inherit VIP colors. */
.vip-badge .nameplate-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vip-badge small.nameplate-meta{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap}
.vip-badge .nameplate-level{flex:none;font-variant-numeric:tabular-nums;letter-spacing:0}
.vip-badge .nameplate-custom+.nameplate-level{padding-left:5px;border-left:1px solid #baccf440}
@media(max-width:800px){.identity-card .nameplate-meta{gap:3px}.identity-card .nameplate-custom+.nameplate-level{padding-left:3px}}
/* Honor column is anchored to the avatar box, never baked into uploaded images. */
.vip-badge[data-style="klein"]{--badge:#e7edff;--badge-bg:#002fa7;color:#e7edff!important;background:linear-gradient(110deg,#002fa7,#002fa7 70%,#123fae);border-color:#5378dc;box-shadow:inset 0 0 0 1px #82a2ff16,0 0 9px #002fa72e}.vip-badge[data-style="klein"] small{color:#c9d6ff;border-left-color:#b4c6ff50}
.vip-badge[data-style="goldred"]{--badge:#ffe5a0;--badge-bg:#791b29;color:#ffe5a0!important;background:linear-gradient(110deg,#571321 0%,#a32936 48%,#711726 100%);border-color:#d7ac58;box-shadow:inset 0 1px 0 #ffdf9740,inset 0 -1px 0 #26030a70,0 0 10px #d2473528;text-shadow:0 1px 2px #330309}.vip-badge[data-style="goldred"] small{color:#f7d584;border-left-color:#efc97166}
.decorated-avatar{--frame:#a9bbcf;--frame-glow:#7795b22a;--portrait-size:112px;position:relative;display:inline-block;flex:none;width:var(--portrait-size);height:var(--portrait-size);padding:5px;border:1px solid var(--frame);border-radius:50%;background:linear-gradient(135deg,var(--frame),#101c2a 29%,#172131 69%,var(--frame));box-shadow:0 0 16px var(--frame-glow);isolation:isolate;vertical-align:middle}
.decorated-avatar[data-frame="2"]{--frame:#d4e5f7;--frame-glow:#a4cefb30}.decorated-avatar[data-frame="3"]{--frame:#66dbc5;--frame-glow:#3bccac35}.decorated-avatar[data-frame="4"]{--frame:#ed89cc;--frame-glow:#d946a835}.decorated-avatar[data-frame="5"]{--frame:#ebcb7d;--frame-glow:#bd913940}
.decorated-avatar::before,.decorated-avatar::after{content:"";position:absolute;inset:-3px;border:1px solid transparent;border-top-color:var(--frame);border-bottom-color:var(--frame);border-radius:50%;pointer-events:none;opacity:.65}.decorated-avatar::after{inset:-6px;border-bottom-color:transparent;transform:rotate(-36deg);opacity:.4}
.decorated-avatar[data-frame="0"]{padding:0;border:0;background:none;box-shadow:none}.decorated-avatar[data-frame="0"]::before,.decorated-avatar[data-frame="0"]::after{display:none}
#member-avatar,.decorated-avatar>img,#stats-page #stats-profile-title .decorated-avatar>img{display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;object-fit:cover;background:#0c1723}
.champion-star-column{position:absolute;top:7%;bottom:7%;right:3%;width:27%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2%;pointer-events:none}
.champion-avatar-star{display:block;width:100%;height:min(27%,calc((100% - (var(--honor-count) - 1)*2%)/var(--honor-count)));aspect-ratio:1;flex:none;filter:drop-shadow(0 1px 2px #000d) drop-shadow(0 0 3px #fbd56c66);pointer-events:auto}
.champion-avatar-star svg{display:block;width:100%;height:100%;overflow:visible}.champion-avatar-star.diamond{filter:drop-shadow(0 1px 2px #000e) drop-shadow(0 0 4px #77ceff80)}
#member-equipped-nameplate{margin-top:12px}.stats-equipped-nameplate{margin-top:8px}.stats-equipped-nameplate:empty{display:none}.champion-nameplate{--badge:#ecd28c!important;--badge-bg:#bd913923!important;background:linear-gradient(110deg,#5a472730,#15212d 40%,#9c783128)!important;border-color:#c2a36280!important;border-radius:3px;box-shadow:inset 0 0 0 2px #edd08b0a;letter-spacing:.4px}
#stats-page #stats-profile-title .decorated-avatar{--portrait-size:94px}#stats-page #stats-profile-title .vip-badge{font-size:11px;color:var(--badge)}#stats-page #stats-profile-title .vip-badge small{display:inline;font-size:9px;line-height:15px;margin:0}
@media(max-width:800px){.member-decorated-avatar{--portrait-size:76px}#stats-page #stats-profile-title .decorated-avatar{--portrait-size:66px}#member-equipped-nameplate{margin-top:10px}.decorated-avatar{padding:4px}.champion-star-column{right:1%;width:29%}#member-equipped-nameplate .vip-badge{font-size:10px}}
.decorated-avatar.has-custom-frame,.identity-avatar.has-custom-frame{background:none;border-color:transparent;box-shadow:none}.has-custom-frame::before,.has-custom-frame::after{display:none!important}.decorated-avatar>img.custom-frame-overlay,.identity-avatar>img.custom-frame-overlay{position:absolute;inset:var(--custom-frame-y,-5%) auto auto var(--custom-frame-x,-5%);width:var(--custom-frame-size,110%);height:var(--custom-frame-size,110%);border:0;border-radius:0;padding:0;object-fit:contain;background:transparent;pointer-events:none;z-index:3}.champion-star-column{z-index:4}
/* Prismatic overlay has a 52% aperture at (50%,44%), not the standard 66%.
 * Explicit metadata keeps every existing purchased frame on its original fit.
 * Enlarge the overlay AND its aperture together: 140% * 52% = 72.8%.
 * Overlay origin (-20%,-12%) puts the portrait at (13.6%,13.2%). This
 * restores the usual portrait size without letting it leak beyond the ring.
 * All decoration is static, and pointer events pass through to account controls. */
:is(.decorated-avatar,.identity-avatar):has(>.custom-frame-overlay[data-layout="prismatic"]){--custom-frame-size:140%;--custom-frame-x:-20%;--custom-frame-y:-12%}
:is(.decorated-avatar,.identity-avatar):has(>.custom-frame-overlay[data-layout="prismatic"])>img:not(.custom-frame-overlay){left:13.6%!important;top:13.2%!important;width:72.8%!important;height:72.8%!important}
.vip-badge.prismatic-nameplate{--badge:#eef1ff;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:4px 13px 4px 9px;border:0;border-radius:0;background:none;color:#eef1ff!important;line-height:18px;letter-spacing:1px;vertical-align:middle;box-shadow:none;text-shadow:none}
.prismatic-nameplate::before,.prismatic-nameplate::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.prismatic-nameplate::before{inset:0;z-index:-2;background:linear-gradient(115deg,#effbff,#7bcafa 13%,#e5d5ff 31%,#99a6e5 46%,#fedaff 64%,#aefff3 81%,#f9ebce 94%)}
.prismatic-nameplate::after{inset:1px;z-index:-1;background:linear-gradient(105deg,#235080,#24213e 36%,#33243e 75%,#638794);box-shadow:inset 0 2px 1px #dbeaff40,inset 0 -2px #95abff30}
.prismatic-emblem{width:17px;height:21px;flex:none}.prismatic-word{min-width:0;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(115deg,#eefbff,#c6edff 20%,#fbddff 65%,#fbf5e2);background-clip:text;-webkit-background-clip:text;color:transparent!important;font-weight:600}
.vip-badge.prismatic-nameplate small{flex:none;font-size:8px!important;letter-spacing:1px;color:#ccd5ec!important;border-left:1px solid #baccf440;opacity:1}
.prismatic-nameplate>i{position:absolute;right:-2px;top:1px;color:#e7f5ff;font:17px/1 Georgia}
@media(max-width:800px){.identity-card .vip-badge.prismatic-nameplate{padding:2px 9px 2px 5px;gap:3px;line-height:11px}.identity-card .prismatic-emblem{width:11px;height:14px}.identity-card .vip-badge.prismatic-nameplate small{font-size:6px!important;padding-left:3px}}
/* Klein-blue custom variant: static circuitry and cold silver edges. Uses the
 * same height as the prismatic plate; no animation, no VIP color inheritance. */
.vip-badge.prismatic-nameplate.klein-nameplate{--badge:#d7eaff;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none;padding-right:15px}
.klein-nameplate::before{clip-path:polygon(9px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 5px),calc(100% - 5px) 100%,9px 100%,0 calc(100% - 9px),0 9px);background:linear-gradient(125deg,#b7dfff,#3c7ae8 19%,#d1e6ff 42%,#3158aa 59%,#548dec 81%,#afdcff)}
.klein-nameplate::after{clip-path:polygon(8px 0,calc(100% - 10px) 0,100% 9px,100% calc(100% - 4px),calc(100% - 4px) 100%,8px 100%,0 calc(100% - 8px),0 8px);background:repeating-linear-gradient(135deg,#84adff09 0,#84adff09 1px,transparent 1px,transparent 6px),linear-gradient(110deg,#071c50,#002fa7 28%,#002fa7 64%,#092457);box-shadow:inset 0 2px 0 #cde4ff35,inset 0 -2px 0 #041238b0}
.klein-nameplate .prismatic-word{background-image:linear-gradient(180deg,#ffffff 5%,#dcecff 50%,#9bbdea 100%);font-weight:650;letter-spacing:.8px}
.vip-badge.klein-nameplate small{color:#c2ddff!important;border-left-color:#b1d6ff66}
.prismatic-nameplate.klein-nameplate>.klein-circuit{top:auto;bottom:4px;right:4px;width:6px;height:3px;border-top:1px solid #bfdfff;border-right:1px solid #bfdfff;transform:skewX(-28deg);box-shadow:0 -3px 0 -1px #81b8ff}
@media(max-width:800px){.identity-card .vip-badge.klein-nameplate{padding-right:9px}.identity-card .klein-nameplate .prismatic-word{letter-spacing:0}.identity-card .klein-circuit{display:none}}
/* Compact honors on the always-visible identity card and player rankings. */
.identity-avatar .champion-star-column{right:-2%;top:2%;bottom:2%;width:33%;z-index:5}
#stats-rankings .ranking-pending{visibility:hidden}
#ranking-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:78px;color:#c9b581;font-size:14px}
#ranking-loading[hidden]{display:none}
.ranking-loader-dot{width:18px;height:18px;border:2px solid #b99b4d40;border-top-color:#e4c476;border-radius:50%;animation:ranking-spin .8s linear infinite}
@keyframes ranking-spin{to{transform:rotate(360deg)}}
#stats-rankings .ranking-person .decorated-avatar{--portrait-size:46px;margin:5px 4px;flex-shrink:0}
#stats-rankings .ranking-person .decorated-avatar>img{width:100%;height:100%;border-radius:50%;margin:0;object-fit:cover}
/* A transparent ornament must not inherit the ranking's 1px image border. */
#stats-rankings .ranking-person .decorated-avatar>img.custom-frame-overlay{width:var(--custom-frame-size,110%);height:var(--custom-frame-size,110%);border:0;border-radius:0;object-fit:contain;background:transparent}
#stats-rankings .ranking-person .custom-frame-overlay[hidden]{display:none}
#stats-rankings .ranking-person .champion-star-column{width:34%;right:0}
#stats-rankings .ranking-name-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
#stats-rankings .ranking-name-copy .vip-badge{font-size:10px;line-height:15px;white-space:normal;overflow-wrap:anywhere}
#stats-rankings .ranking-name-copy .vip-badge small{white-space:nowrap}
#performance-podium .ranking-person{flex-direction:column;gap:8px}
#performance-podium .ranking-person .decorated-avatar{--portrait-size:70px}
#performance-podium .ranking-name-copy{align-items:center}
@media(prefers-reduced-motion:reduce){.ranking-loader-dot{animation:none}}
#performance-podium .ranking-name-copy>[data-vip-name]{font-size:16px;line-height:1.5}

/* Image frames reserve the outer ring for ornamentation. Keep the portrait
 * centered in the 72% aperture (66% of the 110% overlay), including compact
 * identity/ranking contexts. Honor stars remain a separate higher layer.
 * Built-in VIP frames and the uploaded image itself are never modified. */
.decorated-avatar.has-custom-frame>img:not(.custom-frame-overlay),
.decorated-avatar.has-custom-frame>#member-avatar,
.identity-avatar.has-custom-frame>img:not(.custom-frame-overlay),
#stats-page #stats-profile-title .decorated-avatar.has-custom-frame>img:not(.custom-frame-overlay),
#stats-rankings .ranking-person .decorated-avatar.has-custom-frame>img:not(.custom-frame-overlay){position:absolute;left:14%;top:14%;width:72%;height:72%;margin:0;padding:0;border:0;border-radius:50%;object-fit:cover}
#stats-page #stats-profile-title .decorated-avatar>img.custom-frame-overlay{position:absolute;inset:var(--custom-frame-y,-5%) auto auto var(--custom-frame-x,-5%);width:var(--custom-frame-size,110%);height:var(--custom-frame-size,110%);border-radius:0;padding:0;margin:0;border:0;object-fit:contain;background:transparent;pointer-events:none;z-index:3}