/* Profile effects v2. Every glow follows the glyph or avatar frame, so compact
   profile surfaces never expose a rectangular filter layer. */
.nickname-style{
  position:relative;z-index:0;padding:4px 5px;margin:-4px -5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background-repeat:repeat-x;background-origin:border-box;filter:none!important
}
.nickname-violet,.nickname-cyan,.nickname-rose,.nickname-fire,.nickname-frost,.nickname-neon{
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.nickname-violet{background-image:linear-gradient(100deg,#c6a0ff,#f0ddff 40%,#a978ff 72%,#d9c2ff);background-size:220% 100%;text-shadow:0 0 7px #a767ff3d,0 0 15px #7e4fe923;animation:nick-soft 7s ease-in-out infinite alternate}
.nickname-cyan{background-image:linear-gradient(100deg,#6edfff,#d9fbff 40%,#51c5ff 72%,#9ff5ff);background-size:220% 100%;text-shadow:0 0 7px #39d3ff3b,0 0 16px #2a97ff1f;animation:nick-soft 6.4s ease-in-out infinite alternate}
.nickname-rose{background-image:linear-gradient(100deg,#ff8dc7,#ffe2f2 40%,#ff70b6 72%,#ffc0e1);background-size:220% 100%;text-shadow:0 0 7px #ff54ab38,0 0 16px #d8399a1f;animation:nick-soft 7.4s ease-in-out infinite alternate}
.nickname-fire,.nickname-frost,.nickname-neon{background-size:240% 100%;animation-duration:4.2s,2.4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.nickname-fire{background-image:linear-gradient(100deg,#fff1a3,#ffbf38 18%,#ff5a36 38%,#ff2f79 54%,#ff8d2c 72%,#fff0a1);text-shadow:0 1px #741a0885,0 0 6px #ff5f1f5c,0 0 14px #ff342e2e;animation-name:nick-flow,nick-fire}
.nickname-frost{background-image:linear-gradient(100deg,#fff,#a8f7ff 18%,#62c8ff 38%,#9a9cff 56%,#ddfbff 74%,#fff);text-shadow:0 1px #23478973,0 0 6px #5be0ff52,0 0 15px #4778ff2b;animation-name:nick-flow,nick-frost;animation-duration:5s,3.1s}
.nickname-neon{background-image:linear-gradient(100deg,#ff8ceb,#d779ff 21%,#7b8cff 42%,#54efff 61%,#ac74ff 80%,#ff8ceb);text-shadow:0 0 2px #fffc,0 0 7px #b14fff6b,0 0 16px #3ddaff33;animation-name:nick-flow,nick-neon;animation-duration:3.6s,1.9s}
@keyframes nick-soft{to{background-position:100% 0}}
@keyframes nick-flow{to{background-position:100% 0}}
@keyframes nick-fire{50%{text-shadow:0 1px #741a088c,0 0 8px #ff821e7a,0 0 19px #ff302b40}}
@keyframes nick-frost{50%{text-shadow:0 1px #2347897a,0 0 8px #79efff70,0 0 20px #5c6fff3b}}
@keyframes nick-neon{50%{text-shadow:0 0 3px #ffffffe8,0 0 9px #d953ff85,0 0 21px #33ddff45}}

.avatar-effect{position:relative;isolation:isolate;overflow:visible!important;background-clip:padding-box;transform:translateZ(0);contain:layout style}
.avatar-effect>img,.avatar-effect>video{position:relative;z-index:1;border-radius:inherit}
.avatar-effect::before,.avatar-effect::after{content:"";position:absolute;pointer-events:none;border-radius:inherit}
.avatar-effect::before{z-index:-1;inset:-5px;border:2px solid transparent;background:none;filter:none}
.avatar-effect::after{z-index:2;filter:none}
.effect-halo{box-shadow:0 0 0 1px #c7b1ff85,0 0 13px #936fff40,inset 0 0 12px #9777ff17}
.effect-halo::before{border-color:#b99dffb8;background:conic-gradient(from 210deg,#775bffbf,#59d8ffc2,#eb8effb8,#775bffbf);box-shadow:0 0 15px #7e62ff57,inset 0 0 9px #68d3ff38;animation:fx-halo 3.8s ease-in-out infinite}
.effect-halo::after{inset:-9px;border:1px solid #bddeff2e;opacity:.52;animation:fx-spin 8s linear infinite}
.effect-sparkles{box-shadow:0 0 0 1px #e1cfff70,0 0 12px #a66fff33,inset 0 0 10px #ffffff14}
.effect-sparkles::before{border-color:#c5a2ff9e;box-shadow:0 0 13px #b677ff4d,inset 0 0 8px #ffffff24;animation:fx-frame 3.2s ease-in-out infinite}
.effect-sparkles::after{inset:-11px;background:radial-gradient(circle at 8% 18%,#fff 0 1.3px,transparent 2.2px),radial-gradient(circle at 88% 8%,#d8bdff 0 1.7px,transparent 2.6px),radial-gradient(circle at 98% 75%,#86eaff 0 1.3px,transparent 2.2px),radial-gradient(circle at 20% 96%,#f1dcff 0 1.5px,transparent 2.4px),radial-gradient(circle at 52% 3%,#fffc 0 1px,transparent 2px);animation:fx-sparkles 4.6s ease-in-out infinite alternate}
.effect-snow{box-shadow:0 0 0 1px #c2efffa6,0 0 15px #60c4ff40,inset 0 0 14px #d6f9ff1a}
.effect-snow::before{border-color:#abeaffc2;background:linear-gradient(145deg,#f4feffb8,#63c4ff7a 45%,#9781ff75);box-shadow:0 0 16px #63d2ff47,inset 0 0 8px #ffffff38;animation:fx-frost 4.4s ease-in-out infinite}
.effect-snow::after{inset:-12px;background:radial-gradient(circle at 13% 4%,#fff 0 1.1px,transparent 2px),radial-gradient(circle at 42% 12%,#d7f8ff 0 1px,transparent 2px),radial-gradient(circle at 86% 2%,#fff 0 1.4px,transparent 2.3px),radial-gradient(circle at 99% 38%,#9ee9ff 0 1.2px,transparent 2.1px),radial-gradient(circle at 73% 94%,#fff 0 1.2px,transparent 2.1px),radial-gradient(circle at 8% 77%,#bbf2ff 0 1px,transparent 2px);animation:fx-snow 5.8s linear infinite}
.effect-aurora{box-shadow:0 0 0 1px #7ff4e18c,0 0 17px #5b72ff47,inset 0 0 15px #69efe115;animation:none}
.effect-aurora::before{inset:-6px;background:conic-gradient(from 0deg,#64f2d9,#55a9ff,#9a70ff,#f074dc,#70e8ff,#64f2d9);box-shadow:0 0 18px #5e7fff52,inset 0 0 9px #72f2e22e;animation:fx-spin 7.5s linear infinite}
.effect-aurora::after{inset:-10px;border:1px solid #74f6e043;box-shadow:0 0 12px #ba60ff29;animation:fx-aurora 3.6s ease-in-out infinite}
.effect-fire{border-color:#ffa73ca3;box-shadow:0 0 0 1px #ff792bb8,0 0 16px #ff3e204a,inset 0 0 14px #ffab371f;animation:fx-fire 2.3s ease-in-out infinite}
.effect-fire::before{inset:-6px;background:conic-gradient(from 15deg,#ffe26c,#ff7a24 18%,#ff3459 34%,#7e42ff 48%,#ff4f35 63%,#ffb62e 82%,#ffe26c);box-shadow:0 0 15px #ff472059,inset 0 0 8px #ffe1682e;animation:fx-spin 3.5s linear infinite}
.effect-fire::after{inset:-11px;background:radial-gradient(circle at 18% 92%,#ffd453 0 1.5px,transparent 2.5px),radial-gradient(circle at 39% 100%,#ff642c 0 1.4px,transparent 2.4px),radial-gradient(circle at 67% 95%,#ffe47d 0 1.3px,transparent 2.3px),radial-gradient(circle at 88% 87%,#ff4b39 0 1.5px,transparent 2.5px),radial-gradient(circle at 5% 62%,#ff8a2d 0 1px,transparent 2px);animation:fx-embers 2.5s ease-in-out infinite}
.effect-water{border-color:#6febffb3;box-shadow:0 0 0 1px #4dd5ffbf,0 0 16px #288eff42,inset 0 0 14px #62eeff1c}
.effect-water::before{border-color:#6decffc7;background:linear-gradient(145deg,#aefaff7a,#38a3ff6b 48%,#6658ff66);box-shadow:0 0 15px #32beff4d,inset 0 0 8px #d6feff2e;animation:fx-water-frame 3.8s ease-in-out infinite}
.effect-water::after{inset:-7px;border:1px solid #98f5ffa6;box-shadow:0 0 10px #4bc8ff29;animation:fx-water 3.1s cubic-bezier(.18,.68,.34,1) infinite}
@keyframes fx-halo{50%{opacity:.78;transform:scale(1.035);box-shadow:0 0 20px #7e62ff6b,inset 0 0 11px #68d3ff45}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-frame{50%{border-color:#e8d7ffe0;box-shadow:0 0 18px #b77aff63,inset 0 0 10px #fff3}}
@keyframes fx-sparkles{50%{opacity:.55;transform:rotate(8deg) scale(.96)}to{transform:rotate(-5deg) scale(1.03)}}
@keyframes fx-frost{50%{border-color:#e5fcffeb;box-shadow:0 0 20px #69d6ff5c,inset 0 0 11px #ffffff47}}
@keyframes fx-snow{0%,100%{transform:translateY(-3px)}50%{transform:translate(2px,3px) rotate(3deg)}}
@keyframes fx-aurora{50%{opacity:.52;transform:scale(1.06);border-color:#e383ff52}}
@keyframes fx-fire{50%{box-shadow:0 0 0 1px #ffb436db,0 0 21px #ff371f61,inset 0 0 17px #ffb7352b}}
@keyframes fx-embers{0%,100%{opacity:.82;transform:translateY(2px) scale(.96)}50%{opacity:.46;transform:translateY(-5px) scale(1.04)}}
@keyframes fx-water-frame{50%{border-color:#d9fdfff2;box-shadow:0 0 20px #3fbbff5e,inset 0 0 11px #deffff40}}
@keyframes fx-water{0%{opacity:.7;transform:scale(.95)}72%,100%{opacity:0;transform:scale(1.16)}}

/* Compact surfaces keep the extra paint area but their layout size stays fixed. */
.profile-shortcut,.profile-card,.profile-identity,.profile-name-row,.profile-name-row h3,.public-profile-hero,.public-profile-hero>div,.global-message>header,.effect-preview{overflow:visible}
.profile-name-row h3,.public-profile-hero h3,.review-author-name,.global-message header button>span,.global-message header>span>span{padding-block:4px;margin-block:-4px}
.review-author-name .nickname-style{max-width:100%;padding-block:4px;margin-block:-4px}
@media(prefers-reduced-motion:reduce){.nickname-style,.avatar-effect,.avatar-effect::before,.avatar-effect::after{animation:none!important;background-position:50% 0!important;transform:none!important}}

/* The header shortcut has a fixed cell around the portrait. Keep every frame
   inside that cell so particles and animated rings have equal room on all sides. */
.topbar .avatar:not(.guest-login){overflow:hidden}
.topbar .avatar:not(.guest-login)>.avatar-effect{top:-1px;align-self:center;justify-self:center}
.topbar .avatar:not(.guest-login)>.avatar-effect::before{inset:-4px}
.topbar .avatar:not(.guest-login)>.avatar-effect::after{inset:-5px}
@media(max-width:700px){.topbar .avatar:not(.guest-login)>.avatar-effect::before,.topbar .avatar:not(.guest-login)>.avatar-effect::after{inset:-3px}}
/* One proportional frame on every surface. Paint only the ring, never a plate
   behind a rounded photo; rotate its colors rather than the rounded geometry. */
@property --avatar-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.avatar-effect{border-radius:28%!important}
.avatar-effect>img,.avatar-effect>video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar-effect::before,.topbar .avatar:not(.guest-login)>.avatar-effect::before{inset:-4%;border:0;padding:2%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.avatar-effect::after,.topbar .avatar:not(.guest-login)>.avatar-effect::after{inset:-7%}
.effect-aurora::before{background:conic-gradient(from var(--avatar-angle),#64f2d9,#55a9ff,#9a70ff,#f074dc,#70e8ff,#64f2d9);animation:fx-frame-colors 7.5s linear infinite}
.effect-fire::before{background:conic-gradient(from var(--avatar-angle),#ffe26c,#ff7a24,#ff3459,#7e42ff,#ff4f35,#ffb62e,#ffe26c);animation:fx-frame-colors 3.5s linear infinite}
.effect-halo::before{animation:fx-ring-pulse 3.8s ease-in-out infinite}
@keyframes fx-frame-colors{to{--avatar-angle:360deg}}
@keyframes fx-ring-pulse{50%{opacity:.65}}
.avatar-effect::before,.profile-avatar-editor>.avatar-effect::before{inset:-2%!important}
.avatar-effect::after{width:auto;height:auto}
.effect-fire::after{box-shadow:none}
/* Elemental Premium frames own their paint layer; old pseudo-effects stay off. */
.elemental-avatar.avatar-effect{animation:none!important;box-shadow:none!important;isolation:isolate;overflow:visible!important}
.elemental-avatar.avatar-effect::before,.elemental-avatar.avatar-effect::after{content:none!important;display:none!important}
.avatar-effect>.avatar-element-canvas{position:absolute;left:-33.333333%;top:-33.333333%;width:166.666667%!important;height:166.666667%!important;max-width:none!important;max-height:none!important;border:0;border-radius:0!important;pointer-events:none;z-index:2;object-fit:fill}
.topbar .avatar:not(.guest-login):has(>.elemental-avatar){overflow:visible}