/* =========================================================
   Mahjong Radar Version 89 — accurate rewards experience
   ========================================================= */

/* The redeemed collection now presents the real reward rather than a small
   generic thumbnail. Profile cards use their full portrait artwork and the
   member's live identity/statistics in the same visual positions as the card. */
.redeemed-experience{padding:26px!important;background:radial-gradient(circle at 91% 7%,rgba(218,173,74,.22),transparent 25%),linear-gradient(145deg,#fffdf9,#f5ead3 54%,#fffdf8)!important}
.collection-head{margin-bottom:22px!important}
.collection-head>span{border:2px solid #d1a446!important;box-shadow:inset 0 0 0 5px rgba(244,211,127,.38),0 10px 24px rgba(11,49,75,.15)!important}
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(410px,1fr))!important;gap:18px!important;align-items:stretch!important}
.collection-card{display:grid!important;grid-template-columns:164px minmax(0,1fr)!important;align-items:center!important;gap:18px!important;min-height:308px!important;padding:16px!important;border-radius:23px!important;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,252,244,.78))!important;box-shadow:0 14px 32px rgba(7,54,87,.09)!important}
.collection-card.is-active{border-color:#2c8a70!important;box-shadow:0 0 0 2px rgba(44,138,112,.16),0 16px 34px rgba(7,54,87,.13)!important}
.collection-showcase{width:164px;min-width:0;display:grid;place-items:center;align-self:center}
.collection-profile-preview{--collection-card-ink:var(--profile-card-ink,#674f52);position:relative;width:160px;max-width:100%;aspect-ratio:941/1672;overflow:hidden;border:1.5px solid #d7aa45;border-radius:11px;background:#fffaf3;box-shadow:0 13px 27px rgba(45,38,28,.18);color:var(--collection-card-ink)}
.collection-profile-template{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.collection-profile-preview.heritage{--collection-card-ink:#173b63;background:linear-gradient(180deg,#f1d688 0 34.5%,#fffaf0 34.5% 100%)!important;border-color:#c89932!important}
.collection-profile-preview.heritage:before{content:"";position:absolute;left:-24%;right:-24%;top:-8%;height:42%;border-radius:50%;background:radial-gradient(circle at center,rgba(231,198,112,.22) 0 24%,transparent 25% 37%,rgba(227,194,104,.20) 38% 38.8%,transparent 39%),linear-gradient(145deg,#17486e,#0a2f50);box-shadow:inset 0 -1px 0 rgba(245,211,124,.75)}
.collection-profile-preview.heritage:after{content:"MAHJONG RADAR";position:absolute;left:10%;right:10%;top:31.1%;text-align:center;color:#f3d27d;font:700 6px/1.2 "Inter",sans-serif;letter-spacing:.16em}
.collection-profile-photo{position:absolute;z-index:3;top:8.8%;left:35%;width:30%;aspect-ratio:1;border:2px solid #e1b94e;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#9c90a8;color:#fff;font:700 18px/1 "Cormorant Garamond",serif;box-shadow:0 5px 13px rgba(37,31,34,.18)}
.collection-profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.collection-profile-name{position:absolute;z-index:3;left:7%;right:7%;top:37.2%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--collection-card-ink);font:700 12px/1.1 "Cormorant Garamond",serif;letter-spacing:.02em;text-transform:capitalize}
.collection-profile-city{position:absolute;z-index:3;left:11%;right:11%;top:41.8%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--collection-card-ink);font:600 6.5px/1.2 "Inter",sans-serif}
.collection-profile-stats{position:absolute;z-index:3;left:12%;right:12%;top:70.5%;height:9%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;color:var(--collection-card-ink)}
.collection-profile-stats span{min-width:0;text-align:center;border-right:1px solid rgba(184,136,40,.55)}
.collection-profile-stats span:last-child{border-right:0}
.collection-profile-stats b{display:block;color:inherit;font:700 11px/1 "Cormorant Garamond",serif}
.collection-profile-stats small{display:block;margin-top:3px;color:inherit;font:700 4.7px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.collection-profile-action{position:absolute;z-index:3;left:12.5%;right:12.5%;bottom:3.5%;height:7%;display:grid;place-items:center;overflow:hidden;color:var(--collection-card-ink);font:700 5.5px/1 "Inter",sans-serif;white-space:nowrap}
.collection-profile-preview.heritage .collection-profile-action{border:1px solid #c4942e;border-radius:999px;background:linear-gradient(90deg,#f2dfa6,#fffaf0,#ecd182)}

/* Image-less digital recognition is shown as a finished token/plaque. */
.collection-reward-preview{position:relative;width:160px;max-width:100%;min-height:212px;padding:20px 13px;border:1px solid rgba(181,138,59,.5);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 28%,#fffdf5,#f1dfb8 62%,#e4c177);box-shadow:0 12px 27px rgba(45,38,28,.15)}
.collection-reward-preview:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.72);border-radius:15px;pointer-events:none}
.collection-token-rings{position:absolute;width:134px;height:134px;top:13px;border:1px solid rgba(23,59,99,.13);border-radius:50%;box-shadow:0 0 0 16px rgba(255,255,255,.17),0 0 0 17px rgba(181,138,59,.16)}
.collection-token-icon{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#17486e,#082e4d);border:3px solid #d8aa40;color:#f5d577;font-size:34px;box-shadow:0 9px 19px rgba(7,54,87,.24),inset 0 0 0 3px rgba(255,255,255,.1)}
.collection-reward-preview small{position:relative;z-index:2;margin-top:17px;color:#9c6812;font:800 7px/1.2 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.collection-reward-preview strong{position:relative;z-index:2;margin-top:6px;color:#173b63;font:700 14px/1.12 "Cormorant Garamond",serif}
.collection-reward-preview.token-star .collection-token-icon{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 93%,50% 71%,21% 93%,32% 57%,2% 35%,39% 35%);border-radius:0;border:0;background:linear-gradient(145deg,#f6dc85,#bd8016);color:#173b63}
.collection-reward-preview.token-badge{background:radial-gradient(circle at 50% 28%,#f7fbff,#dce8f4 62%,#bdcede)}
.collection-reward-preview.token-title,.collection-reward-preview.token-city_role{background:radial-gradient(circle at 50% 28%,#fff9ed,#ead19b 62%,#c99a3f)}
.collection-reward-preview.has-image{padding:0;background:#fff;min-height:230px}
.collection-reward-preview.has-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.collection-reward-preview.has-image .collection-token-icon{position:absolute;right:10px;bottom:10px;width:46px;height:46px;font-size:21px}

.collection-copy{align-self:stretch!important;padding:3px 0;justify-content:center!important}
.collection-copy h3{font-size:24px!important;line-height:1.05!important;margin:5px 0 8px!important}
.collection-copy p{font-size:13px!important;line-height:1.45!important;margin-bottom:10px!important}
.collection-copy small{margin-top:auto!important;margin-bottom:9px!important;color:#8f6e2e!important}
.collection-switch{min-height:42px!important}
.collection-empty{grid-column:auto!important;align-self:center!important;min-height:132px!important;padding:20px!important;display:flex!important;align-items:center!important;gap:15px!important;text-align:left!important;background:rgba(255,255,255,.62)!important}
.collection-empty>span{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#173b63;color:#f3d274!important;font-size:25px!important}
.collection-empty h3{margin:0 0 3px;color:#173b63;font-size:20px}
.collection-empty p{margin:0;color:#6f6658;font-size:12px;line-height:1.4}

/* Clear, persistent catalogue states for one-time digital redemptions. */
.reward-item-card.has-redemption-state{border-color:rgba(39,125,97,.55)!important;box-shadow:0 0 0 1px rgba(39,125,97,.10),0 10px 25px rgba(23,59,99,.09)!important}
.reward-state-copy{font-weight:800!important;line-height:1.3!important}
.reward-state-copy.waiting{color:#9b6811!important}
.reward-state-copy.redeemed{color:#24745e!important}
.reward-item-card .btn.reward-state-waiting,.profile-preview-actions .btn.reward-state-waiting{background:linear-gradient(145deg,#f3dfae,#e4bb61)!important;border-color:#b9821f!important;color:#5f430d!important}
.reward-item-card .btn.reward-state-redeemed,.profile-preview-actions .btn.reward-state-redeemed{background:linear-gradient(145deg,#e1f3eb,#bee0d2)!important;border-color:#358f72!important;color:#17604b!important}
.reward-item-card .btn.reward-state-waiting:disabled,.reward-item-card .btn.reward-state-redeemed:disabled,.profile-preview-actions .btn.reward-state-waiting:disabled,.profile-preview-actions .btn.reward-state-redeemed:disabled{opacity:1!important;cursor:default!important}
.reward-preview-state{max-width:570px;margin:0 auto 11px;padding:10px 13px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px}
.reward-preview-state b{font-size:13px}
.reward-preview-state.waiting{background:#fff4d8;border:1px solid #dfb252;color:#6f4f13}
.reward-preview-state.redeemed{background:#e8f5ef;border:1px solid #71b49e;color:#185e4b}
.redemption-state-sheet{text-align:center;padding:12px 4px}
.redemption-state-sheet>span{width:82px;height:82px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;font-size:34px;border:2px solid #c69732;background:linear-gradient(145deg,#fff9e8,#ead08c);color:#6f4a08}
.redemption-state-sheet.redeemed>span{border-color:#3b987a;background:linear-gradient(145deg,#edf9f4,#c1e5d7);color:#17604b}
.redemption-state-sheet h2{font-size:32px;color:#173b63;margin:3px 0 8px}
.redemption-state-sheet p{max-width:470px;margin:0 auto 17px;color:#695f52;line-height:1.5}

@media(max-width:760px){
  .redeemed-experience{padding:18px 13px!important}
  .collection-grid{grid-template-columns:1fr!important;gap:13px!important}
  .collection-card{grid-template-columns:112px minmax(0,1fr)!important;gap:12px!important;min-height:218px!important;padding:12px!important;border-radius:19px!important}
  .collection-showcase{width:112px}
  .collection-profile-preview{width:108px;border-radius:8px}
  .collection-profile-photo{font-size:13px;border-width:1.5px}
  .collection-profile-name{font-size:8.5px}
  .collection-profile-city{font-size:4.6px}
  .collection-profile-stats b{font-size:8px}
  .collection-profile-stats small{font-size:3.5px;margin-top:2px}
  .collection-profile-action{font-size:4px}
  .collection-profile-preview.heritage:after{font-size:4px}
  .collection-reward-preview{width:108px;min-height:174px;padding:14px 8px;border-radius:16px}
  .collection-token-rings{width:92px;height:92px;top:11px}
  .collection-token-icon{width:56px;height:56px;font-size:25px}
  .collection-reward-preview small{font-size:5.5px;margin-top:13px}
  .collection-reward-preview strong{font-size:11px}
  .collection-reward-preview.has-image{min-height:180px}
  .collection-copy h3{font-size:19px!important}
  .collection-copy p{font-size:11px!important;line-height:1.36!important}
  .collection-copy small{font-size:9px!important}
  .collection-switch{min-height:38px!important;font-size:11px!important}
  .collection-empty{min-height:108px!important;padding:15px!important}
  .collection-empty>span{width:44px;height:44px;font-size:20px!important}
  .collection-empty h3{font-size:17px}
  .collection-empty p{font-size:10px}
}

@media(max-width:390px){
  .collection-card{grid-template-columns:96px minmax(0,1fr)!important;gap:10px!important;padding:10px!important}
  .collection-showcase{width:96px}
  .collection-profile-preview,.collection-reward-preview{width:92px}
  .collection-reward-preview{min-height:154px}
  .collection-copy h3{font-size:17px!important}
}
