/* V16.29.4 – Member profile repair / single-square VIP frame.
   Scoped to the personal profile only; other VIP frames, comments, admin, and galleries stay untouched.
   This stylesheet MUST load after vip-v157213.css and the profile styles. */
.tg293-shell .tg293-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,#161e2c,#0b111b);
}
.tg293-shell .tg293-banner{
  height:clamp(156px,17vw,208px);
  background-position:center 45%;
}
.tg293-shell .tg293-person{
  grid-template-columns:186px minmax(0,1fr) minmax(185px,216px);
  gap:22px;
  align-items:center;
  padding:0 clamp(16px,2.2vw,30px) 25px;
  position:relative;
  min-height:177px;
}
.tg293-shell .tg293-avatar-zone{
  box-sizing:border-box;
  width:186px;
  height:184px;
  min-height:0;
  margin-top:-58px;
  display:grid;
  place-items:center;
  justify-self:start;
  align-self:start;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
/* Without an earned/loaded VIP frame the plain avatar remains circular and centered. */
.tg293-shell .tg293-avatar-zone > .member-avatar{
  display:grid!important;
  width:122px!important;
  height:122px!important;
  color:#f5d997!important;
  font-size:40px!important;
  margin:0!important;
  border:3px solid #e5bb72!important;
  border-radius:50%!important;
  box-shadow:0 0 0 5px #231c17,0 6px 25px #0009!important;
  overflow:hidden!important;
}
/* Legacy VIP styles used a 230-260px tall square but V16.29.3 overrode width only.
   Force ONE consistent canvas size and keep the 512x512 VIP artwork ratio. */
.tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap:not(.tgvip-avatar-compact){
  --vip-frame-size:174px!important;
  box-sizing:border-box!important;
  display:block!important;
  width:var(--vip-frame-size)!important;
  height:var(--vip-frame-size)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:visible!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
  flex:none!important;
  position:relative!important;
}
.tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap:not(.tgvip-avatar-compact)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:var(--vip-art)!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  z-index:3!important;
  pointer-events:none!important;
}
/* Avatar centered in the transparent opening of each individual VIP artwork,
   including the off-center openings of VIP 6–10. */
.tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap > .member-avatar{
  position:absolute!important;
  top:var(--vip-hole-y,50%)!important;
  left:var(--vip-hole-x,50%)!important;
  width:var(--vip-hole-size,50%)!important;
  height:var(--vip-hole-size,50%)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:29px!important;
  line-height:1!important;
  color:#f6d78c!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid var(--vip-art-strong,#e6bd77)!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 45% 33%,#495069,#182030 65%,#101523)!important;
  box-shadow:0 0 9px rgba(211,176,110,.4)!important;
  overflow:hidden!important;
  z-index:1!important;
}
.tg293-shell .tg293-avatar-zone .member-avatar > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
}
.tg293-shell .tg293-avatar-zone .tgvip-avatar-medallion{
  position:absolute!important;
  right:2%!important;
  bottom:4%!important;
  z-index:5!important;
  max-width:90%!important;
  padding:3px 8px!important;
  font:700 11px/1.3 Georgia,serif!important;
  white-space:nowrap!important;
}
.tg293-shell .tg293-identity{
  position:relative;
  z-index:2;
  padding:15px 0 0;
  min-width:0;
}
.tg293-shell .tg293-identity h2{
  font-size:clamp(25px,2.6vw,36px)!important;
  line-height:1.18!important;
  margin:5px 0 8px!important;
  overflow-wrap:anywhere;
}
.tg293-shell .tg293-vip-chip{margin:4px 0 3px;max-width:100%;overflow-wrap:anywhere}
.tg293-shell .tg293-exp{max-width:540px;margin-top:12px}
.tg293-shell .tg293-hero-actions{position:relative;z-index:2;padding-top:10px;align-self:center}
.tg293-shell .tg293-hero-actions .gold-btn,
.tg293-shell .tg293-hero-actions .simple-btn{min-height:43px;font-size:13px}
@media (max-width:1050px) and (min-width:701px){
  .tg293-shell .tg293-person{grid-template-columns:170px minmax(0,1fr);column-gap:18px}
  .tg293-shell .tg293-avatar-zone{width:170px;height:172px;margin-top:-48px}
  .tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap:not(.tgvip-avatar-compact){--vip-frame-size:162px!important}
  .tg293-shell .tg293-hero-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 0 4px}
}
@media (max-width:700px){
  .tg293-shell .tg293-banner{height:150px}
  .tg293-shell .tg293-person{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    padding:0 16px 20px;
  }
  .tg293-shell .tg293-avatar-zone{
    width:166px;
    height:161px;
    margin-top:-68px;
    align-self:center;
    justify-self:center;
  }
  .tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap:not(.tgvip-avatar-compact){--vip-frame-size:154px!important}
  .tg293-shell .tg293-identity{width:100%;padding:3px 0 0}
  .tg293-shell .tg293-identity h2{font-size:clamp(25px,6.5vw,32px)!important}
  .tg293-shell .tg293-identity .member-subtitle{margin:6px 0}
  .tg293-shell .tg293-exp{width:100%;max-width:440px;margin:12px auto 0}
  .tg293-shell .tg293-hero-actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:12px}
  .tg293-shell .tg293-hero-actions .simple-btn,.tg293-shell .tg293-hero-actions .gold-btn{font-size:12px;min-height:46px;padding:8px 4px}
}
@media (max-width:400px){
  .tg293-shell .tg293-hero-actions{grid-template-columns:1fr 1fr}
  .tg293-shell .tg293-hero-actions a:last-child{grid-column:1/-1}
  .tg293-shell .tg293-avatar-zone{width:154px;height:154px;margin-top:-61px}
  .tg293-shell .tg293-avatar-zone > .tgvip-avatar-wrap:not(.tgvip-avatar-compact){--vip-frame-size:146px!important}
}