/* Completion-only collection cosmetics. These selectors deliberately work on
   profile previews, public profiles, leaderboard avatars, live match avatars,
   Campaign runners and mini previews. The global header owns its own frame paint
   contract in profile-nav.css. */
.cosmetic-profile-preview[data-frame="frame-royal-menagerie"] .cosmetic-profile-avatar,
.cosmetic-mini-preview[data-frame="frame-royal-menagerie"] .cosmetic-mini-avatar,
.public-player-avatar[data-frame="frame-royal-menagerie"],
.match-shell-avatar[data-frame="frame-royal-menagerie"],
.campaign-route-runner[data-frame="frame-royal-menagerie"]{
  border-color:#e7b85a;box-shadow:0 0 18px rgba(231,184,90,.42),0 0 0 3px #31200b
}
.cosmetic-profile-preview[data-banner="banner-royal-menagerie"] .cosmetic-profile-banner,
.cosmetic-mini-preview[data-banner="banner-royal-menagerie"] .cosmetic-mini-banner{
  background:url('/assets/cosmetics/banners/royal-menagerie.webp') center / cover no-repeat
}
.public-profile-head:has(.cosmetic-profile-preview[data-banner="banner-royal-menagerie"])::before{
  background:url('/assets/cosmetics/banners/royal-menagerie.webp') center / cover no-repeat
}

.cosmetic-profile-preview[data-frame="frame-veiled-pantheon"] .cosmetic-profile-avatar,
.cosmetic-mini-preview[data-frame="frame-veiled-pantheon"] .cosmetic-mini-avatar,
.public-player-avatar[data-frame="frame-veiled-pantheon"],
.match-shell-avatar[data-frame="frame-veiled-pantheon"],
.campaign-route-runner[data-frame="frame-veiled-pantheon"]{
  border-color:#bc9cff;box-shadow:0 0 20px rgba(188,156,255,.46),0 0 0 3px #1c1130
}
.cosmetic-profile-preview[data-banner="banner-veiled-pantheon"] .cosmetic-profile-banner,
.cosmetic-mini-preview[data-banner="banner-veiled-pantheon"] .cosmetic-mini-banner{
  background:url('/assets/cosmetics/banners/veiled-pantheon-v2.webp') center / cover no-repeat
}
.public-profile-head:has(.cosmetic-profile-preview[data-banner="banner-veiled-pantheon"])::before{
  background:url('/assets/cosmetics/banners/veiled-pantheon-v2.webp') center / cover no-repeat
}

.cosmetic-profile-preview[data-frame="frame-enchanted-relics"] .cosmetic-profile-avatar,
.cosmetic-mini-preview[data-frame="frame-enchanted-relics"] .cosmetic-mini-avatar,
.public-player-avatar[data-frame="frame-enchanted-relics"],
.match-shell-avatar[data-frame="frame-enchanted-relics"],
.campaign-route-runner[data-frame="frame-enchanted-relics"]{
  border-color:#76dfc1;box-shadow:0 0 20px rgba(118,223,193,.42),0 0 0 3px #0b2825
}
.cosmetic-profile-preview[data-banner="banner-enchanted-relics"] .cosmetic-profile-banner,
.cosmetic-mini-preview[data-banner="banner-enchanted-relics"] .cosmetic-mini-banner{
  background:radial-gradient(circle at 70% 18%,rgba(118,223,193,.25),transparent 25%),radial-gradient(circle at 22% 75%,rgba(124,127,255,.19),transparent 30%),linear-gradient(135deg,#071b1c,#17433c,#0d152c)
}
.public-profile-head:has(.cosmetic-profile-preview[data-banner="banner-enchanted-relics"])::before{
  background:radial-gradient(circle at 70% 18%,rgba(118,223,193,.25),transparent 25%),radial-gradient(circle at 22% 75%,rgba(124,127,255,.19),transparent 30%),linear-gradient(135deg,#071b1c,#17433c,#0d152c)
}

/* Campaign map marker gets the same simple achievement rings as other current-player surfaces. */
.campaign-route-runner[data-frame="frame-founder"]{box-shadow:0 0 18px rgba(255,208,106,.42),0 0 0 3px #291d08}
.campaign-route-runner[data-frame="frame-unbeatable"]{box-shadow:0 0 19px rgba(183,144,255,.52),0 0 0 3px #170b2b}

/* Authored image frames use one geometry on live match/Campaign surfaces. */
.match-shell-avatar[data-frame="frame-primal-forces"],
.match-shell-avatar[data-frame="frame-prehistoric-crew"],
.match-shell-avatar[data-frame="frame-tideborn"],
.campaign-route-runner[data-frame="frame-primal-forces"],
.campaign-route-runner[data-frame="frame-prehistoric-crew"],
.campaign-route-runner[data-frame="frame-tideborn"]{
  overflow:visible;
  border-color:transparent;
  box-shadow:none;
  isolation:isolate
}
.match-shell-avatar[data-frame="frame-primal-forces"]::after,
.match-shell-avatar[data-frame="frame-prehistoric-crew"]::after,
.match-shell-avatar[data-frame="frame-tideborn"]::after,
.campaign-route-runner[data-frame="frame-primal-forces"]::after,
.campaign-route-runner[data-frame="frame-prehistoric-crew"]::after,
.campaign-route-runner[data-frame="frame-tideborn"]::after{
  content:"";
  position:absolute;
  inset:-28%;
  z-index:3;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none
}
.match-shell-avatar[data-frame="frame-primal-forces"]::after,
.campaign-route-runner[data-frame="frame-primal-forces"]::after{inset:-18%;background-image:url('/assets/cosmetics/frames/primal-forces.png')}
.match-shell-avatar[data-frame="frame-prehistoric-crew"]::after,
.campaign-route-runner[data-frame="frame-prehistoric-crew"]::after{background-image:url('/assets/cosmetics/frames/prehistoric-crew.webp')}
.match-shell-avatar[data-frame="frame-tideborn"]::after,
.campaign-route-runner[data-frame="frame-tideborn"]::after{background-image:url('/assets/cosmetics/frames/tideborn.png')}
.match-shell-avatar[data-frame="frame-primal-forces"] img,
.match-shell-avatar[data-frame="frame-prehistoric-crew"] img,
.match-shell-avatar[data-frame="frame-tideborn"] img,
.campaign-route-runner[data-frame="frame-primal-forces"] img,
.campaign-route-runner[data-frame="frame-prehistoric-crew"] img,
.campaign-route-runner[data-frame="frame-tideborn"] img,
.campaign-route-runner[data-frame="frame-primal-forces"] .campaign-current-avatar-initial,
.campaign-route-runner[data-frame="frame-prehistoric-crew"] .campaign-current-avatar-initial,
.campaign-route-runner[data-frame="frame-tideborn"] .campaign-current-avatar-initial{
  position:relative;
  z-index:1;
  border-radius:50%
}

/* Public/leaderboard avatars paint their avatar directly on the surface. Keep
   authored frames in normal paint order instead of creating a compositor layer. */
.leader-player-identity .public-player-avatar[data-frame="frame-primal-forces"],
.leader-player-identity .public-player-avatar[data-frame="frame-prehistoric-crew"],
.leader-player-identity .public-player-avatar[data-frame="frame-tideborn"]{
  overflow:visible!important;
  position:relative;
  isolation:auto
}

/* Tideborn uses the original supplied artwork as a transparent PNG frame. */
.cosmetic-profile-preview[data-frame="frame-tideborn"] .cosmetic-profile-avatar,
.cosmetic-mini-preview[data-frame="frame-tideborn"] .cosmetic-mini-avatar{
  overflow:visible;
  border-color:transparent;
  box-shadow:none;
  isolation:isolate
}
.public-player-avatar[data-frame="frame-tideborn"]{
  overflow:visible;
  border-color:transparent;
  box-shadow:none;
  position:relative;
  isolation:auto
}
.cosmetic-profile-preview[data-frame="frame-tideborn"] .cosmetic-profile-avatar::after,
.cosmetic-mini-preview[data-frame="frame-tideborn"] .cosmetic-mini-avatar::after{
  content:"";position:absolute;inset:-28%;z-index:3;background:url('/assets/cosmetics/frames/tideborn.png') center / contain no-repeat;pointer-events:none
}
.public-player-avatar[data-frame="frame-tideborn"]::after{
  content:"";position:absolute;inset:-28%;z-index:auto;background:url('/assets/cosmetics/frames/tideborn.png') center / contain no-repeat;pointer-events:none
}
.cosmetic-profile-preview[data-frame="frame-tideborn"] .cosmetic-profile-avatar img,
.cosmetic-mini-preview[data-frame="frame-tideborn"] .cosmetic-mini-avatar img{position:relative;z-index:0;border-radius:50%}

/* The Prehistoric Crew completion banner is an authored 4:1 panorama. */
.cosmetic-profile-preview[data-banner="banner-prehistoric-crew"] .cosmetic-profile-banner,
.cosmetic-mini-preview[data-banner="banner-prehistoric-crew"] .cosmetic-mini-banner{
  background:url('/assets/cosmetics/banners/prehistoric-crew.webp') center / cover no-repeat
}
.public-profile-head:has(.cosmetic-profile-preview[data-banner="banner-prehistoric-crew"])::before{
  background:url('/assets/cosmetics/banners/prehistoric-crew.webp') center / cover no-repeat
}

/* Prehistoric Crew uses the authentic authored WebP frame. */
.cosmetic-profile-preview[data-frame="frame-prehistoric-crew"] .cosmetic-profile-avatar,
.cosmetic-mini-preview[data-frame="frame-prehistoric-crew"] .cosmetic-mini-avatar{
  overflow:visible;border-color:transparent;box-shadow:none;isolation:isolate
}
.public-player-avatar[data-frame="frame-prehistoric-crew"]{
  overflow:visible;border-color:transparent;box-shadow:none;position:relative;isolation:auto
}
.cosmetic-profile-preview[data-frame="frame-prehistoric-crew"] .cosmetic-profile-avatar::after,
.cosmetic-mini-preview[data-frame="frame-prehistoric-crew"] .cosmetic-mini-avatar::after{
  content:"";position:absolute;inset:-28%;z-index:3;background:url('/assets/cosmetics/frames/prehistoric-crew.webp') center / contain no-repeat;pointer-events:none
}
.public-player-avatar[data-frame="frame-prehistoric-crew"]::after{
  content:"";position:absolute;inset:-28%;z-index:auto;background:url('/assets/cosmetics/frames/prehistoric-crew.webp') center / contain no-repeat;pointer-events:none
}
.cosmetic-profile-preview[data-frame="frame-prehistoric-crew"] .cosmetic-profile-avatar img,
.cosmetic-mini-preview[data-frame="frame-prehistoric-crew"] .cosmetic-mini-avatar img{position:relative;z-index:0;border-radius:50%}