.site-account-link.profile-entry{
  gap:8px;
  padding:4px 10px 4px 5px;
  min-height:40px;
}
.site-profile-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(119,188,255,.28);
  background:linear-gradient(145deg,rgba(31,140,255,.28),rgba(54,209,255,.12));
  color:#eef7ff;
  font-size:11px;
  font-weight:950;
  line-height:1;
  box-shadow:inset 0 0 0 2px rgba(7,17,28,.35);
  position:relative;
  overflow:visible;
  isolation:auto;
}
.site-account-link.profile-entry .site-profile-avatar{
  isolation:auto;
}
.site-profile-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
  position:static;
  z-index:auto;
}
.site-profile-name{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.site-account-link.profile-entry.signed-in .site-profile-avatar{
  border-color:rgba(90,180,255,.46);
  background:linear-gradient(145deg,rgba(31,140,255,.42),rgba(54,209,255,.18));
}
.site-profile-avatar[data-frame="frame-founder"]{
  border-color:#ffd06a;
  box-shadow:0 0 12px rgba(255,208,106,.38),0 0 0 2px #291d08;
}
.site-profile-avatar[data-frame="frame-royal-menagerie"]{
  border-color:#e7b85a;
  box-shadow:0 0 12px rgba(231,184,90,.4),0 0 0 2px #31200b;
}
.site-profile-avatar[data-frame="frame-veiled-pantheon"]{
  border-color:#bc9cff;
  box-shadow:0 0 12px rgba(188,156,255,.44),0 0 0 2px #1c1130;
}
.site-profile-avatar[data-frame="frame-enchanted-relics"]{
  border-color:#76dfc1;
  box-shadow:0 0 12px rgba(118,223,193,.4),0 0 0 2px #0b2825;
}

/* The header owns its own frame paint contract. Authored image frames stay in
   normal paint order: avatar first, frame pseudo-element second, no compositor
   isolation or positioned z-index layer. Other cosmetic surfaces are styled by
   their dedicated stylesheets. */
.site-profile-avatar[data-frame="frame-primal-forces"],
.site-profile-avatar[data-frame="frame-prehistoric-crew"],
.site-profile-avatar[data-frame="frame-tideborn"],
.site-profile-avatar[data-frame="frame-unbeatable"]{
  border-color:transparent;
  box-shadow:none;
}
.site-account-link.profile-entry .site-profile-avatar[data-frame="frame-primal-forces"],
.site-account-link.profile-entry .site-profile-avatar[data-frame="frame-prehistoric-crew"],
.site-account-link.profile-entry .site-profile-avatar[data-frame="frame-tideborn"],
.site-account-link.profile-entry .site-profile-avatar[data-frame="frame-unbeatable"]{
  overflow:visible;
  position:relative;
  isolation:auto;
}
.site-profile-avatar[data-frame="frame-primal-forces"]::after,
.site-profile-avatar[data-frame="frame-prehistoric-crew"]::after,
.site-profile-avatar[data-frame="frame-tideborn"]::after,
.site-profile-avatar[data-frame="frame-unbeatable"]::after{
  content:"";
  position:absolute;
  inset:-28%;
  z-index:auto;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
}
.site-profile-avatar[data-frame="frame-primal-forces"]::after{inset:-18%;background-image:url('/assets/cosmetics/frames/primal-forces.png')}
.site-profile-avatar[data-frame="frame-prehistoric-crew"]::after{background-image:url('/assets/cosmetics/frames/prehistoric-crew.webp')}
.site-profile-avatar[data-frame="frame-tideborn"]::after{background-image:url('/assets/cosmetics/frames/tideborn.png')}
.site-profile-avatar[data-frame="frame-unbeatable"]::after{background-image:url('/assets/cosmetics/frames/unbeatable.webp')}

/* Avatar-specific crop metadata. Brakk's source artwork contains transparent
   padding at the bottom. Image elements can be cropped directly; flat painted
   header/leaderboard avatars get a second, tightly cropped paint layer so later
   inline background resets cannot reintroduce the empty crescent. */
.cosmetic-profile-avatar[data-avatar-ref="avatar.tideborn.brakk.01"] img,
.appearance-item[data-appearance-id="avatar.tideborn.brakk.01"] .appearance-avatar-thumb img,
.match-shell-avatar img[data-match-avatar="avatar.tideborn.brakk.01"],
.campaign-route-runner img[data-avatar-preset="avatar.tideborn.brakk.01"]{
  transform:scale(1.12);
  transform-origin:50% 46%;
}
.site-profile-avatar[data-avatar-kind="preset"][data-avatar-ref="avatar.tideborn.brakk.01"]::before,
.public-player-avatar[data-avatar-kind="preset"][data-avatar-ref="avatar.tideborn.brakk.01"]::before{
  content:""!important;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:inherit;
  background-repeat:no-repeat;
  background-size:112%;
  background-position:50% 46%;
  pointer-events:none;
}

/* Preset leaderboard avatars are painted as images. Never overlay the username
   initial on top of an actual preset avatar. Brakk's more-specific rule above
   deliberately reuses ::before as an empty image layer, never as text. */
.public-player-avatar[data-avatar-kind="preset"]::before{
  content:none!important;
}
.public-player-avatar[data-avatar-kind="preset"][data-avatar-ref="avatar.tideborn.brakk.01"]::before{
  content:""!important;
}

.site-credit-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:4px 10px 4px 5px;
  border:1px solid rgba(255,207,91,.24);
  border-radius:999px;
  background:rgba(9,19,31,.78);
  color:#f7f4e8;
  text-decoration:none;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.site-credit-link:hover{
  border-color:rgba(255,207,91,.5);
  background:rgba(30,31,28,.9);
  transform:translateY(-1px);
}
.site-credit-link:focus-visible{
  outline:2px solid rgba(255,207,91,.72);
  outline-offset:2px;
}
/* Credits have one canonical visual everywhere. Keep the legacy text in the DOM
   for compatibility, but paint only the authored token asset. */
.site-credit-coin{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-block;
  background-color:transparent!important;
  background-image:url('/assets/credit-token.svg')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  clip-path:none;
  color:transparent!important;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:0;
  line-height:0;
  text-shadow:none;
}
.site-credit-balance{
  min-width:1.4ch;
  text-align:right;
  font-size:13px;
  letter-spacing:.01em;
}
.profile-card [hidden]{
  display:none!important;
}
@media(max-width:700px){
  .site-account-link.profile-entry{
    position:relative;
    padding:3px;
    width:38px;
    min-width:38px;
    min-height:38px;
    border-radius:50%;
  }
  /* Android/PWA Chromium may briefly composite a newly hydrated avatar node at
     a flex-relative position. Anchor the visual to the fixed circular button so
     snapshot paint and refreshed paint share the exact same center. */
  .site-account-link.profile-entry > .site-profile-avatar.site-profile-avatar{
    position:absolute;
    left:50%;
    top:50%;
    margin:0;
    transform:translate(-50%,-50%);
    width:28px;
    height:28px;
    flex-basis:28px;
  }
  .site-profile-avatar{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
  .site-profile-name{display:none}
  .site-credit-link{
    min-height:36px;
    padding:3px 8px 3px 4px;
    gap:5px;
  }
  .site-credit-coin{
    width:27px;
    height:27px;
    flex-basis:27px;
  }
  .site-credit-balance{font-size:12px}
}