/* =========================================================
   Mahjong Radar Version 95 — rebuilt member-card composition
   ========================================================= */

/* The directory cards now use live structural layers instead of trying to
   line up several independent labels over the artwork. */
#screen-members #member-list.player-card-grid{
  align-items:start!important;
  justify-items:stretch!important;
  gap:22px!important;
}

#screen-members #member-list .player-profile-card{
  --member-readable-ink:#123653;
  --member-readable-muted:#40556a;
  isolation:isolate!important;
  overflow:hidden!important;
  border-radius:6.6%/3.75%!important;
  background-clip:padding-box!important;
  box-shadow:0 16px 34px rgba(38,48,66,.14)!important;
}

/* The supplied Version 95 artwork has transparent outside corners. Keep the
   picture at its natural dimensions so no pale canvas or pasted-on edge can
   appear around the gold card outline. */
#screen-members #member-list .player-profile-card:is(
  .profile-style-blossom-mountain,
  .profile-style-celestial-dragon,
  .profile-style-pearl-circle,
  .profile-style-moonlit-four-winds,
  .profile-style-sakura-harmony,
  .profile-style-lotus-koi,
  .profile-style-bamboo-fan,
  .profile-style-porcelain-blossom,
  .profile-style-lantern-gathering,
  .profile-style-jade-pavilion
){
  border:0!important;
  outline:0!important;
  background-color:transparent!important;
  background-size:100% 100%!important;
  background-position:center!important;
}

/* One intentional portrait medallion. The old cover circles and radar ring
   are removed, preventing the double-circle / pasted-avatar appearance. */
#screen-members #member-list .player-profile-card .player-cover{
  height:32.96%!important;
  overflow:visible!important;
}
#screen-members #member-list .player-profile-card .player-cover::before,
#screen-members #member-list .player-profile-card .player-cover::after,
#screen-members #member-list .player-profile-card .radar-ring{
  display:none!important;
}
#screen-members #member-list .member-avatar-frame{
  position:relative!important;
  z-index:3!important;
  width:36.6%!important;
  aspect-ratio:1!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
}
#screen-members #member-list .player-profile-card .player-cover .member-avatar-frame .avatar{
  width:89%!important;
  height:89%!important;
  aspect-ratio:1!important;
  border:0!important;
  border-radius:50%!important;
  overflow:visible!important;
  background:#7775a6!important;
  color:#fff!important;
  font-size:clamp(20px,4.7vw,38px)!important;
  box-shadow:0 5px 13px rgba(40,35,55,.16)!important;
}
#screen-members #member-list .player-profile-card .player-cover .member-avatar-frame .avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}

/* Heritage Ivory has no baked medallion, so its single gold frame is created
   in CSS while the illustrated cards use the frame already in their art. */
#screen-members #member-list .player-profile-card.profile-style-ivory .member-avatar-frame{
  width:34.5%!important;
  border:3px solid #e2ba50!important;
  background:rgba(255,250,232,.12)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
}
#screen-members #member-list .player-profile-card.profile-style-ivory .player-cover .member-avatar-frame .avatar{
  width:84%!important;
  height:84%!important;
  background:#173b63!important;
  box-shadow:none!important;
}

/* Name, city and badges are now one identity unit. Moving the unit down keeps
   it clear of the illustration/body seam and preserves the same spacing on
   every card. */
#screen-members #member-list .player-profile-card .member-identity{
  position:absolute!important;
  top:41.35%!important;
  left:8%!important;
  right:8%!important;
  z-index:4!important;
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  gap:4px!important;
  margin:0!important;
  text-align:center!important;
}
#screen-members #member-list .player-profile-card .member-identity h3{
  position:static!important;
  width:100%!important;
  margin:0!important;
  color:var(--member-readable-ink)!important;
  font-size:clamp(16px,2.2vw,24px)!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
}
#screen-members #member-list .player-profile-card .member-identity .city-mark{
  position:static!important;
  display:block!important;
  width:max-content!important;
  max-width:92%!important;
  margin:0!important;
  padding:2px 8px!important;
  border:1px solid rgba(181,138,59,.22)!important;
  border-radius:999px!important;
  background:rgba(255,253,248,.94)!important;
  color:var(--member-readable-ink)!important;
  font-size:clamp(9px,1vw,12px)!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 2px 7px rgba(43,50,57,.05)!important;
}
#screen-members #member-list .player-profile-card .member-identity .chips{
  position:static!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  max-height:none!important;
  gap:5px!important;
  margin:0!important;
  overflow:hidden!important;
}
#screen-members #member-list .player-profile-card .member-identity .chip{
  min-width:0!important;
  padding:3px 6px!important;
  border:1px solid rgba(181,138,59,.36)!important;
  background:#fffdf8!important;
  color:var(--member-readable-ink)!important;
  font-size:clamp(7px,.72vw,9px)!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 2px 6px rgba(43,50,57,.05)!important;
}

/* Strong light/dark separation keeps every number and label readable over
   every pastel card style. */
#screen-members #member-list .player-profile-card .player-stats{
  top:70.25%!important;
  left:12.3%!important;
  right:12.3%!important;
  width:auto!important;
  height:9.2%!important;
  border:1px solid rgba(181,138,59,.32)!important;
  border-radius:14px!important;
  background:rgba(255,253,248,.96)!important;
  box-shadow:0 5px 13px rgba(52,39,21,.08)!important;
  z-index:4!important;
}
#screen-members #member-list .player-profile-card .player-stats span{
  color:transparent!important;
  font-size:0!important;
}
#screen-members #member-list .player-profile-card .player-stats span+span{
  border-left:1px solid rgba(181,138,59,.28)!important;
}
#screen-members #member-list .player-profile-card .player-stats b{
  color:var(--member-readable-ink)!important;
  font-size:clamp(15px,2vw,22px)!important;
  line-height:1!important;
}
#screen-members #member-list .player-profile-card .player-stats span::after{
  display:block!important;
  margin-top:3px!important;
  color:var(--member-readable-muted)!important;
  font-size:clamp(7px,.68vw,9px)!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}
#screen-members #member-list .player-profile-card .player-stats span:nth-child(1)::after{content:"Hosted"!important}
#screen-members #member-list .player-profile-card .player-stats span:nth-child(2)::after{content:"Joined"!important}
#screen-members #member-list .player-profile-card .player-stats span:nth-child(3)::after{content:"Rating"!important}

/* The Mahjong style sits above the artwork's decorative divider rather than
   on top of it. */
#screen-members #member-list .player-profile-card .formats-line{
  top:81.55%!important;
  left:11%!important;
  right:11%!important;
  color:var(--member-readable-ink)!important;
  font-size:clamp(9px,.9vw,12px)!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
  z-index:4!important;
}

#screen-members #member-list .player-profile-card .player-card-body>.btn{
  border:1px solid rgba(181,138,59,.48)!important;
  background:rgba(255,253,248,.70)!important;
  color:var(--member-readable-ink)!important;
  font-weight:800!important;
  text-shadow:none!important;
  box-shadow:0 3px 9px rgba(52,39,21,.07)!important;
  z-index:5!important;
}
#screen-members #member-list .player-profile-card .player-card-body>.btn:hover{
  background:#fffdf8!important;
}

#screen-members #member-list .player-profile-card .online-label{
  z-index:6!important;
  background:#16765d!important;
  color:#fff!important;
  box-shadow:0 2px 7px rgba(20,71,58,.20)!important;
}

@media(max-width:760px){
  #screen-members #member-list.player-card-grid{gap:12px!important}
  #screen-members #member-list .player-profile-card .member-identity{top:41.15%!important;gap:3px!important}
  #screen-members #member-list .player-profile-card .member-identity .chip{padding:2px 4px!important}
}

/* Illustrated portraits use one CSS-built medallion over the artwork's empty
   placeholder. This deliberately covers the artwork's extra concentric line,
   leaving one clean gold circle around the live member portrait. */
#screen-members #member-list .profile-style-blossom-mountain{--member-medallion:#ad8797}
#screen-members #member-list .profile-style-celestial-dragon{--member-medallion:#7775a6}
#screen-members #member-list .profile-style-pearl-circle{--member-medallion:#71958f}
#screen-members #member-list .profile-style-moonlit-four-winds{--member-medallion:#7180ad}
#screen-members #member-list .profile-style-sakura-harmony{--member-medallion:#bc8999}
#screen-members #member-list .profile-style-lotus-koi{--member-medallion:#78a098}
#screen-members #member-list .profile-style-bamboo-fan{--member-medallion:#879b82}
#screen-members #member-list .profile-style-porcelain-blossom{--member-medallion:#7890b4}
#screen-members #member-list .profile-style-lantern-gathering{--member-medallion:#ad7d68}
#screen-members #member-list .profile-style-jade-pavilion{--member-medallion:#718979}
#screen-members #member-list .player-profile-card:is(
  .profile-style-blossom-mountain,
  .profile-style-celestial-dragon,
  .profile-style-pearl-circle,
  .profile-style-moonlit-four-winds,
  .profile-style-sakura-harmony,
  .profile-style-lotus-koi,
  .profile-style-bamboo-fan,
  .profile-style-porcelain-blossom,
  .profile-style-lantern-gathering,
  .profile-style-jade-pavilion
) .member-avatar-frame{
  width:37.1%!important;
  border:3px solid #dfb64b!important;
  background:var(--member-medallion)!important;
  box-shadow:0 5px 13px rgba(40,35,55,.16)!important;
}
#screen-members #member-list .player-profile-card:is(
  .profile-style-blossom-mountain,
  .profile-style-celestial-dragon,
  .profile-style-pearl-circle,
  .profile-style-moonlit-four-winds,
  .profile-style-sakura-harmony,
  .profile-style-lotus-koi,
  .profile-style-bamboo-fan,
  .profile-style-porcelain-blossom,
  .profile-style-lantern-gathering,
  .profile-style-jade-pavilion
) .player-cover .member-avatar-frame .avatar{
  width:91%!important;
  height:91%!important;
  background:var(--member-medallion)!important;
  box-shadow:none!important;
}