@import url('./cosmetic-gallery.css?v=6.5.35');
/* V6.5.35 — transparent RO-inspired contract sigils.
   Static, inexpensive layers anchored to the portrait's foot area. */
#character[data-gold-tier="3"]>.hero,
#character[data-gold-tier="4"]>.hero,
#companion[data-gold-tier="4"]>.hero{
  --sigil-art-height:clamp(118px,14vh,170px);
  --sigil-color:rgba(255,208,93,.34);
  --sigil-asset:url("./assets/gold-royal-sigil.svg");
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#companion[data-gold-tier="4"]>.hero{
  --sigil-color:rgba(126,193,255,.26);
  --sigil-asset:url("./assets/gold-pact-sigil.svg");
}
#character[data-gold-tier="3"]>.hero::before,
#character[data-gold-tier="4"]>.hero::before,
#companion[data-gold-tier="4"]>.hero::before{
  content:"";
  pointer-events:none;
  position:absolute;
  z-index:0;
  left:50%;
  top:9px;
  width:min(90%,190px);
  height:var(--sigil-art-height);
  transform:translateX(-50%);
  background:radial-gradient(ellipse 47% 67% at 50% 60%,var(--sigil-color),transparent 86%);
  opacity:.76;
}
#character[data-gold-tier="3"]>.hero::after,
#character[data-gold-tier="4"]>.hero::after,
#companion[data-gold-tier="4"]>.hero::after{
  content:"";
  pointer-events:none;
  position:absolute;
  z-index:1;
  left:50%;
  top:calc(9px + var(--sigil-art-height) - 62px);
  width:min(94%,188px);
  height:94px;
  transform:translateX(-50%);
  background:var(--sigil-asset) center/contain no-repeat;
  filter:drop-shadow(0 0 5px var(--sigil-color));
}
#character[data-gold-tier="3"]>.hero .art-hero,
#character[data-gold-tier="4"]>.hero .art-hero,
#companion[data-gold-tier="4"]>.hero .art-hero{
  position:relative!important;
  z-index:2;
  /* The extra gap keeps names beneath the projected ground circle. */
  margin-bottom:39px!important;
}
#character[data-gold-tier="3"]>.hero>:not(.art-hero),
#character[data-gold-tier="4"]>.hero>:not(.art-hero),
#companion[data-gold-tier="4"]>.hero>:not(.art-hero){
  position:relative;
  z-index:3;
}
#character[data-gold-tier="3"]>.hero .character-name,
#character[data-gold-tier="4"]>.hero .character-name,
#companion[data-gold-tier="4"]>.hero .pet-nickname,
#companion[data-gold-tier="4"]>.hero strong{
  text-shadow:0 1px 3px #0c1724,0 0 5px rgba(12,23,36,.75);
}
@media(min-width:1001px) and(max-height:700px){
  #character[data-gold-tier="3"]>.hero,
  #character[data-gold-tier="4"]>.hero,
  #companion[data-gold-tier="4"]>.hero{--sigil-art-height:70px}
  #character[data-gold-tier="3"]>.hero::before,
  #character[data-gold-tier="4"]>.hero::before,
  #companion[data-gold-tier="4"]>.hero::before{
    left:38px;top:4px;width:78px;height:70px;transform:translateX(-50%);
  }
  #character[data-gold-tier="3"]>.hero::after,
  #character[data-gold-tier="4"]>.hero::after,
  #companion[data-gold-tier="4"]>.hero::after{
    left:38px;top:48px;width:78px;height:39px;transform:translateX(-50%);
  }
  #character[data-gold-tier="3"]>.hero .art-hero,
  #character[data-gold-tier="4"]>.hero .art-hero,
  #character[data-gold-tier="3"]>.hero .art-hero,
  #character[data-gold-tier="4"]>.hero .art-hero,
  #companion[data-gold-tier="4"]>.hero .art-hero{position:absolute!important;margin-bottom:0!important}
}
@media(max-width:700px){
  #character[data-gold-tier="3"]>.hero::after,
  #character[data-gold-tier="4"]>.hero::after,
  #companion[data-gold-tier="4"]>.hero::after{width:min(88%,182px)}
}