/* v15.9.5 custom frames: the media owns the border, never the avatar. */
.custom-frame-host{isolation:isolate;background:transparent!important;padding:0!important;box-shadow:none!important;animation:none!important;border:0!important}
.custom-frame-host::before,.custom-frame-host::after{display:none!important}
.cos-owned-frame.custom-frame-host .base-avatar{width:70%;height:70%;border-radius:50%}
.profile-avatar-wrap.custom-frame-host{display:grid;place-items:center}
.profile-avatar-wrap.custom-frame-host .profile-avatar{width:82%;height:82%;border-radius:50%;object-fit:cover}
.custom-frame-host .frame-overlay,.custom-frame-host .profile-custom-frame-overlay{object-fit:contain;pointer-events:none}
.legacy-frame-cutout{-webkit-mask-image:radial-gradient(ellipse 34% 34% at center,transparent 97%,#000 100%);mask-image:radial-gradient(ellipse 34% 34% at center,transparent 97%,#000 100%)}
.frame-art-motion{animation:frame-art-glow 4s ease-in-out infinite}
@keyframes frame-art-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2) drop-shadow(0 0 3px #a6ff4640)}}
@media(prefers-reduced-motion:reduce){.frame-art-motion{animation:none}}

/* v15.9.11: one square coordinate system for frame and avatar. */
.custom-frame-host{position:relative;display:block!important;aspect-ratio:1;flex-shrink:0}
.custom-frame-host>.base-avatar,.profile-avatar-wrap.custom-frame-host>.profile-avatar{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);width:74%;height:74%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;display:block;object-fit:cover;border-radius:50%;content-visibility:visible}
.custom-frame-host>.frame-overlay,.custom-frame-host>.profile-custom-frame-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none;max-height:none;margin:0;display:block;object-fit:contain;content-visibility:visible}
.custom-frame-host.legacy-aperture>.base-avatar,.custom-frame-host.legacy-aperture>.profile-avatar{width:70%;height:70%}
/* v15.9.12: background spans the profile and comments; banner stays on the card. */
.profile-stage>.profile-custom-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;content-visibility:visible}
.profile-shell>.profile-banner{height:150px;overflow:hidden}
.profile-banner>.profile-custom-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;content-visibility:visible}

/* Equipped banner covers the player card; equipped background stays on the stage. */
.profile-shell.profile-full-banner{isolation:isolate;align-self:start;min-width:0;padding-top:150px}
.profile-shell.profile-full-banner>.profile-banner{position:absolute;inset:0;height:100%;width:100%;z-index:0}
.profile-shell.profile-full-banner>.profile-body{position:relative;z-index:1;background:linear-gradient(180deg,rgba(8,12,9,.25),rgba(8,12,9,.85));padding-bottom:24px}
.profile-shell.profile-full-banner>.profile-banner>.profile-custom-banner{object-fit:cover;object-position:center}

/* v15.9.15: preserve the complete artwork; ambient layer fills differing aspect ratios. */
.cosmetic-fitted-background,.cosmetic-fitted-banner{isolation:isolate}
.profile-stage>.cosmetic-ambient,.profile-banner>.cosmetic-ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.65);transform:scale(1.04);z-index:0;pointer-events:none;content-visibility:visible}
.profile-stage>.profile-custom-background,.profile-shell.profile-full-banner>.profile-banner>.profile-custom-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;z-index:1!important;pointer-events:none;content-visibility:visible}
.profile-stage>.social-grid,.profile-stage>.comment-box{position:relative;z-index:2}

/* New landscape background artwork fills the whole stage, as with legacy scenic backgrounds. */
.profile-stage.profile-landscape-background>.profile-custom-background{object-fit:cover;object-position:center top}
/* Uniform banner brightness across the card; legibility comes from text shadow. */
.profile-shell.profile-full-banner>.profile-body{background:transparent}
.profile-full-banner .profile-name,.profile-full-banner .profile-meta,.profile-full-banner .profile-bio,.profile-full-banner .friend-count{text-shadow:0 1px 3px #000,0 0 5px #000}

/* v15.9.18: banners fill their card without blurred padding. */
.profile-shell.profile-full-banner>.profile-banner>.profile-custom-banner{object-fit:cover;object-position:center}
.profile-banner>.cosmetic-ambient{display:none}

/* v15.9.19: clear artwork above the avatar and readable player details. */
.profile-shell.profile-full-banner:not(.sz-product-only-card){padding-top:210px}
.profile-full-banner .profile-avatar-wrap>.profile-premium-badge{
 position:absolute;right:-5px;top:-8px;z-index:8;display:grid;place-items:center;
 width:30px;height:34px;margin:0;padding:0;border:2px solid #ffdb6d;border-radius:7px;
 background:linear-gradient(145deg,#62430f,#211a0b);color:#ffdb6d;font-size:23px;line-height:1;
 box-shadow:0 2px 8px #0009;text-shadow:0 1px 3px #000;pointer-events:auto;
}
.profile-full-banner .profile-name{width:fit-content;max-width:100%;box-sizing:border-box;padding:3px 9px;border-radius:7px;background:#080e0ad9;color:#fff;overflow-wrap:anywhere}
.profile-full-banner .profile-meta{width:fit-content;max-width:100%;padding:3px 8px;border-radius:5px;background:#080e0ad9;color:#d8e0d9}
.profile-full-banner .profile-bio{padding:12px 14px;border:1px solid #d3eddb30;border-radius:10px;background:linear-gradient(135deg,#09120bd9,#09120ba8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#f3f7f3;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:0 4px 16px #0002}
.profile-full-banner .friend-count{width:fit-content;padding:4px 9px;border-radius:6px;background:#080e0ad9}

/* v15.9.20: centered identity; same avatar/art alignment in profile and previews. */
.profile-shell.profile-full-banner:not(.sz-product-only-card){padding-top:156px;min-height:495px;border-radius:16px}
.profile-full-banner>.profile-body>.profile-avatar-wrap{margin-left:auto;margin-right:auto}
.profile-full-banner>.profile-body>.profile-name,.profile-full-banner>.profile-body>.profile-meta,.profile-full-banner>.profile-body>.friend-count{margin-left:auto;margin-right:auto;text-align:center}
.profile-full-banner>.profile-body>.profile-bio{text-align:center}
.profile-shell.profile-full-banner>.profile-banner>.profile-custom-banner{object-position:center top}

/* v15.9.21: compact footer and gold premium medallion. */
.profile-shell.profile-full-banner:not(.sz-product-only-card){display:flex;flex-direction:column}
.profile-shell.profile-full-banner>.profile-body{display:flex;flex:1;flex-direction:column;min-width:0;padding-bottom:12px}
.profile-full-banner>.profile-body>.profile-avatar-wrap{flex-shrink:0}
.profile-full-banner>.profile-body>.profile-name{flex-shrink:0}
.profile-full-banner .profile-card-footer{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:9px}
.profile-full-banner .profile-card-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0}
.profile-full-banner .profile-card-actions:empty{display:none}
.profile-full-banner .profile-card-actions>.social-btn{font-size:12px;line-height:1.25;padding:7px 10px;min-height:30px;border-radius:6px;margin:0;font-weight:600}
.profile-full-banner .profile-card-footer>.friend-count{font-size:12px;line-height:1.4;font-weight:500;padding:3px 8px;margin:0;text-align:center;color:#d7e5ce;background:#081009b8;border:1px solid #d9edca26;border-radius:20px}
.profile-full-banner .profile-avatar-wrap>.profile-premium-badge{right:-4px;top:-5px;width:28px;height:28px;border-radius:50%;border:1px solid #f9db7d;background:radial-gradient(circle at 30% 20%,#5e4316,#241805 70%);color:#ffda66;font-size:20px;line-height:1;box-shadow:0 0 0 2px #191407,0 2px 7px #0009,inset 0 0 0 2px #bb8d3855;text-shadow:0 1px 0 #996414,0 0 5px #ffce4d66}

/* v15.9.22: preserve a visible avatar inside every image/video frame. */
.profile-avatar-wrap{isolation:isolate}
.profile-avatar-wrap>.profile-avatar{display:block;content-visibility:visible!important;opacity:1;visibility:visible}
.profile-avatar-wrap.pf-frame>.profile-avatar{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);margin:0;z-index:2;object-fit:cover}
.frame-safe-aperture{-webkit-mask-image:radial-gradient(ellipse 34% 34% at center,transparent 97%,#000 100%);mask-image:radial-gradient(ellipse 34% 34% at center,transparent 97%,#000 100%)}
.custom-frame-host>.frame-overlay,.custom-frame-host>.profile-custom-frame-overlay{z-index:5}
.profile-full-banner .profile-avatar-wrap>.profile-premium-badge{background:none;border:0;border-radius:0;box-shadow:none;padding:0;width:27px;height:27px;right:-5px;top:-6px;color:#ffdb64;font-size:27px;text-shadow:0 1px 2px #493000,0 0 3px #000b}

/* Avatar pixels sit above decorative art; the ring stays around the face. */
.profile-avatar-wrap>.profile-avatar,.custom-frame-host>.base-avatar{z-index:6!important;content-visibility:visible!important;image-rendering:pixelated;isolation:isolate}
.profile-avatar-wrap.custom-frame-host>.profile-avatar,.custom-frame-host>.base-avatar{width:66%;height:66%;border-radius:50%;background:#202820}
.custom-frame-host>.legacy-frame-cutout{clip-path:circle(50% at 50% 50%)}

/* v26 one complete artwork, identical geometry in real profile and previews. */
.profile-avatar-wrap{box-sizing:border-box;border-radius:16px}
.profile-avatar-wrap.complete-frame-host{background:#202820!important;border-radius:16px;padding:5px!important;overflow:visible}
.profile-avatar-wrap>.profile-avatar,.profile-avatar-wrap.complete-frame-host>.profile-avatar{position:absolute!important;left:5px!important;top:5px!important;right:5px!important;bottom:5px!important;transform:none!important;width:calc(100% - 10px)!important;height:calc(100% - 10px)!important;border-radius:12px!important;object-fit:cover;z-index:6!important;background:#202820}
.complete-frame-host>.complete-frame-art{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:129%!important;height:129%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;aspect-ratio:1!important;border-radius:0!important;background:transparent!important;content-visibility:visible!important;pointer-events:none;z-index:5;mask:none!important;-webkit-mask:none!important;clip-path:none!important}
.profile-avatar-wrap.illustrated-frame-host>.complete-frame-art{width:170%!important;height:170%!important}
.cos-owned-frame.complete-frame-host>.base-avatar{width:78px!important;height:78px!important;border-radius:10px!important;z-index:6!important}
.cos-owned-frame.complete-frame-host>.complete-frame-art{width:107%!important;height:107%!important}
.cos-owned-frame.illustrated-frame-host>.complete-frame-art{width:141%!important;height:141%!important}
.complete-frame-animated{animation:completeFrameGlow 4s ease-in-out infinite alternate}
@keyframes completeFrameGlow{from{filter:drop-shadow(0 0 1px #ffffff22)}to{filter:drop-shadow(0 0 4px #ffffff66)}}
@media(prefers-reduced-motion:reduce){.complete-frame-animated{animation:none}}

.profile-avatar-wrap.illustrated-frame-host>.complete-frame-art{width:calc((100% - 10px) * var(--frame-scale))!important;height:auto!important;transform:translate(var(--frame-anchor-x),var(--frame-anchor-y))!important}
.cos-owned-frame.illustrated-frame-host>.complete-frame-art{width:calc(78px * var(--frame-scale))!important;height:auto!important;transform:translate(var(--frame-anchor-x),var(--frame-anchor-y))!important}
.profile-full-banner>.profile-body>.complete-frame-host{margin-bottom:16px}
.profile-full-banner>.profile-body>.illustrated-frame-host{margin-bottom:40px}