/* =========================================================
   Mahjong Radar Version 88 — illustrated profile-card collection
   ========================================================= */

/* The ten supplied designs remain exact artwork. These variables let the
   same selection add a restrained matching tint wherever a full portrait
   card would not fit, such as the points hero and the public profile sheet. */
.profile-style-blossom-mountain{--profile-card-art:url("profile-cards/blossom-mountain.webp");--profile-card-ink:#6f4e5a;background:linear-gradient(145deg,#fffafb,#f3dfe5)!important;border-color:#c78fa3!important}
.profile-style-celestial-dragon{--profile-card-art:url("profile-cards/celestial-dragon.webp");--profile-card-ink:#53618f;background:linear-gradient(145deg,#f7f9ff,#dfe4fb)!important;border-color:#899bd4!important}
.profile-style-pearl-circle{--profile-card-art:url("profile-cards/pearl-circle.webp");--profile-card-ink:#547f79;background:linear-gradient(145deg,#fbffff,#dff4ef)!important;border-color:#88beb3!important}
.profile-style-moonlit-four-winds{--profile-card-art:url("profile-cards/moonlit-four-winds.webp");--profile-card-ink:#4e6095;background:linear-gradient(145deg,#f8f9ff,#e0e5fa)!important;border-color:#8299db!important}
.profile-style-sakura-harmony{--profile-card-art:url("profile-cards/sakura-harmony.webp");--profile-card-ink:#8b5965;background:linear-gradient(145deg,#fffafa,#f8dfe5)!important;border-color:#dda0b0!important}
.profile-style-lotus-koi{--profile-card-art:url("profile-cards/lotus-koi.webp");--profile-card-ink:#4c837e;background:linear-gradient(145deg,#fbfffd,#dff1eb)!important;border-color:#78b8aa!important}
.profile-style-bamboo-fan{--profile-card-art:url("profile-cards/bamboo-fan.webp");--profile-card-ink:#577663;background:linear-gradient(145deg,#fefff9,#e4ecda)!important;border-color:#91ad83!important}
.profile-style-porcelain-blossom{--profile-card-art:url("profile-cards/porcelain-blossom.webp");--profile-card-ink:#526f9d;background:linear-gradient(145deg,#fbfdff,#e2ebf8)!important;border-color:#8faed4!important}
.profile-style-lantern-gathering{--profile-card-art:url("profile-cards/lantern-gathering.webp");--profile-card-ink:#91604f;background:linear-gradient(145deg,#fffdf8,#fbe3d3)!important;border-color:#e2a17c!important}
.profile-style-jade-pavilion{--profile-card-art:url("profile-cards/jade-pavilion.webp");--profile-card-ink:#536f60;background:linear-gradient(145deg,#fffef8,#e4ecdf)!important;border-color:#8eaa96!important}

/* Compact reward catalogue: the artwork teaser stays small, and the full
   portrait is reserved for the explicit Preview Card action. */
.reward-catalog-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:12px!important;align-items:stretch}
.reward-item-card{border-radius:15px!important}
.reward-item-card>img,.reward-item-card>.reward-placeholder{height:118px!important}
.reward-item-card.profile-card-reward>img{height:132px!important;object-fit:cover!important;object-position:center top!important;background:#fffaf3}
.reward-item-copy{padding:11px!important;gap:7px!important}
.reward-item-copy h3{font-size:17px!important;line-height:1.08!important}
.reward-item-copy>p{font-size:11.5px!important;line-height:1.35!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.profile-card-reward .reward-item-copy>p{-webkit-line-clamp:2}
.reward-catalog-title{gap:7px!important;align-items:flex-start!important}
.reward-catalog-title>span{width:30px!important;height:30px!important;font-size:15px!important;border-width:1px!important}
.reward-cost{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;padding-top:7px!important}
.reward-cost b{font-size:13px!important}
.reward-cost span{font-size:9px!important}
.reward-item-card .btn{min-height:35px;padding:8px 9px!important;font-size:12px!important}

/* Full preview appears before the redemption confirmation. */
.profile-card-preview-sheet{text-align:center;padding:2px 0 4px}
.profile-card-preview-sheet h2{font-size:clamp(25px,5vw,36px);line-height:1.05;margin:3px auto 7px;color:#173b63}
.profile-card-preview-sheet>.meta{max-width:560px;margin:0 auto 12px;line-height:1.45}
.profile-card-full-preview{display:flex;justify-content:center;align-items:center;width:100%;padding:8px;border:1px solid rgba(181,138,59,.36);border-radius:20px;background:linear-gradient(145deg,#fffdf8,#f2e8d4)}
.profile-card-full-preview img{display:block;width:min(100%,390px);height:auto;max-height:68dvh;object-fit:contain;border-radius:17px;box-shadow:0 16px 36px rgba(23,59,99,.16)}
.profile-preview-description{max-width:570px;margin:12px auto;color:#6c6250;font-size:13px;line-height:1.45}
.profile-preview-actions{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(170px,1.3fr);gap:9px;max-width:570px;margin:0 auto}
.reward-redeem-thumb{display:block;width:94px;height:167px;object-fit:cover;object-position:top;margin:10px auto;border:1px solid rgba(181,138,59,.45);border-radius:13px;box-shadow:0 8px 22px rgba(23,59,99,.13)}

/* On member-directory cards, use the supplied portrait artwork as the real
   card shell and place the existing live information into its reserved areas. */
#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
){
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:941/1672!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:7.5%/4.2%!important;
  background-image:var(--profile-card-art)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  box-shadow:0 16px 34px rgba(38,48,66,.16)!important;
  color:var(--profile-card-ink)!important;
}
#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{
  position:absolute!important;
  inset:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:34.5%!important;
  min-height:0!important;
  background:transparent!important;
  overflow:visible!important;
}
#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::before,
#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::after,
#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
) .radar-ring{display:none!important}
#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 .avatar{
  width:31%!important;
  height:auto!important;
  aspect-ratio:1!important;
  border:3px solid #e3bd55!important;
  background:#9c90a8!important;
  color:#fff!important;
  font-size:clamp(20px,4.7vw,38px)!important;
  box-shadow:0 7px 18px rgba(47,38,55,.18)!important;
}
#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-card-body{position:static!important;padding:0!important;text-align:center!important}
#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-card-body h3{
  position:absolute!important;top:37.2%!important;left:8%!important;right:8%!important;
  margin:0!important;color:var(--profile-card-ink)!important;font-size:clamp(15px,2.2vw,24px)!important;
  line-height:1.08!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
#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-card-body>.city-mark{
  position:absolute!important;top:41.7%!important;left:12%!important;right:12%!important;
  margin:0 auto!important;padding:2px 7px!important;border:0!important;background:rgba(255,255,255,.58)!important;
  color:var(--profile-card-ink)!important;font-size:clamp(9px,1vw,12px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
#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-card-body>.chips{
  position:absolute!important;top:46.5%!important;left:9%!important;right:9%!important;max-height:9%!important;
  display:flex!important;justify-content:center!important;gap:3px!important;margin:0!important;overflow:hidden!important
}
#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-card-body>.chips .chip{padding:2px 5px!important;background:rgba(255,255,255,.62)!important;border-color:rgba(181,138,59,.35)!important;color:var(--profile-card-ink)!important;font-size:clamp(7px,.72vw,9px)!important}
#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
) .formats-line{
  position:absolute!important;top:57%!important;left:11%!important;right:11%!important;min-height:0!important;
  margin:0!important;color:var(--profile-card-ink)!important;font-size:clamp(9px,.9vw,12px)!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
#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-stats{
  position:absolute!important;top:70.7%!important;left:12.3%!important;right:12.3%!important;height:8.5%!important;
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;align-items:center!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important
}
#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-stats span{padding:0!important;border:0!important;color:transparent!important;font-size:0!important}
#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-stats b{color:var(--profile-card-ink)!important;font-size:clamp(15px,2vw,22px)!important;line-height:1!important}
#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-card-body>.btn{
  position:absolute!important;left:12.5%!important;right:12.5%!important;bottom:3.3%!important;width:75%!important;height:7.2%!important;
  min-height:0!important;margin:0!important;padding:0 8px!important;border:0!important;border-radius:999px!important;
  background:transparent!important;color:var(--profile-card-ink)!important;box-shadow:none!important;font-size:clamp(9px,.9vw,12px)!important
}
#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
) .online-label{top:3%!important;right:5%!important}
#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>.reward-feather-rail{left:6%!important;right:6%!important;bottom:1%!important;justify-content:center!important;max-width:none!important}

/* Wider profile surfaces receive a softly veiled crop of the chosen artwork,
   keeping all existing controls and text legible. */
.member-public-profile: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
),
#screen-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
),
.rewards-hero: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
){background-image:linear-gradient(rgba(255,253,248,.88),rgba(255,253,248,.94)),var(--profile-card-art)!important;background-size:cover!important;background-position:center 16%!important}

.collection-card[class*="profile-style-"] .collection-art img{object-position:top!important}

@media(max-width:620px){
  .reward-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .reward-item-card.profile-card-reward>img{height:116px!important}
  .reward-item-copy{padding:9px!important}
  .reward-item-copy h3{font-size:15px!important}
  .reward-item-copy>p{font-size:10.5px!important;-webkit-line-clamp:2}
  .reward-catalog-title>span{width:27px!important;height:27px!important;font-size:13px!important}
  .profile-preview-actions{grid-template-columns:1fr}
  .profile-card-full-preview img{width:min(100%,330px);max-height:62dvh}
}

@media(max-width:360px){
  .reward-catalog-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .reward-item-card.profile-card-reward>img{height:104px!important}
  .reward-item-copy>p{display:none!important}
}