/* r155 Mates Market visual unification. Shop art is separate from server-owned prices.
   Approved generated assets are hosted by Higgsfield, with fallback finishes below. */
:root{--market-gold:#f8d88d;--market-rim:#c68a32;--market-icon-sheet:url("https://d2ol7oe51mr4n9.cloudfront.net/user_3JceQ2q4Pbmaw4RS3mY0AgRBWsg/983fa34e-3fda-4c59-bf8e-352f16f5d299.png")}
.mates-credit-icon{
 background-image:var(--market-icon-sheet),radial-gradient(circle at 36% 25%,#ffeb9d,#83471b 65%,#291629)!important;
 background-size:400% 200%,cover;background-position:66.6667% 100%,center;
 border:2px solid #f1c874;box-shadow:inset 0 0 0 1px #654023,0 2px 9px #f4b14770;font-size:0;color:transparent;
}
.mates-credit-icon .shop-credit-count{font-size:10px;line-height:1.2;color:#ffebc2}
.mates-shop-dialog{
 border:2px solid #f2b956;
 background:linear-gradient(140deg,#22132a,#0e0c16 64%,#241229);
 box-shadow:0 0 0 2px #4a2432,0 25px 65px #000e,0 0 22px #b8415740
}
.mates-shop-dialog .shop-head{
 background:linear-gradient(175deg,#74304d 0%,#38152e 55%,#170e20 100%);
 border-bottom:2px solid #d3a359;box-shadow:inset 0 1px #ffd8a34d,0 6px 14px #0006
}
.mates-shop-dialog .shop-head h2{color:#ffe8b3;text-shadow:0 2px 0 #6b3514,0 0 15px #ffd56640;font-family:Georgia,serif;font-weight:900}
.mates-shop-dialog .shop-hero{
 background:radial-gradient(ellipse at 18% 0,#7e433d75,transparent 60%),linear-gradient(110deg,#4c242d,#251423 58%,#251a2d);
 border-bottom:1px solid #a77a41;box-shadow:inset 0 1px #ffd39a35
}
.mates-shop-dialog .shop-hero strong{color:#ffdb7e;text-shadow:0 1px #8b491c,0 0 14px #e5a64c6a}
.mates-shop-dialog .shop-next{background:#281826;color:#ffdfa1}
.mates-shop-dialog .shop-tabs{background:#160e1e;border-bottom:1px solid #986d43}
.mates-shop-dialog .shop-tab{
 color:#fce1b1;border:1px solid #806344;border-bottom:3px solid #624025;
 background:linear-gradient(#5a304a,#271a31 60%,#291b2a);
 box-shadow:inset 0 1px #ffcaa529;text-shadow:0 1px #140d16
}
.mates-shop-dialog .shop-tab[data-selected=true]{
 color:#fff1b5;border-color:#ffdf8b;border-bottom-color:#ba7225;
 background:linear-gradient(#92533c,#613021 52%,#43212d);
 box-shadow:0 0 9px #ffc45233,inset 0 1px #fff1b055
}
.mates-shop-dialog .shop-items{
 background:radial-gradient(ellipse at 50% 15%,#47203745,transparent 75%),#100d18;
}
.mates-shop-dialog .shop-card,
.mates-shop-dialog .shop-history{
 position:relative;isolation:isolate;
 background:linear-gradient(115deg,#4e2037,#30192c 45%,#241b2c 100%);
 border:1px solid #bd8446;border-bottom:2px solid #6f3e2c;border-radius:11px;
 box-shadow:inset 0 1px #fff0bc3c,inset 0 0 0 2px #43212a77,0 3px 7px #0007;
}
.mates-shop-dialog .shop-card:before{
 content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none;border-radius:8px;
 background:linear-gradient(180deg,#fff6d709,transparent 45%,#00000019);
}
.mates-shop-dialog .shop-card[data-product="recharge100000"],
.mates-shop-dialog .shop-card[data-product="boost25"]{
 background:radial-gradient(ellipse at 15% 0,#d7933f61,transparent 65%),linear-gradient(110deg,#724123,#392127 75%,#4a2537);
 border-color:#ffe49c;box-shadow:inset 0 1px #fff2bb82,0 0 14px #edba5452,0 4px 12px #0008;
}
.mates-shop-dialog .shop-card[data-category="vault"]{
 background:radial-gradient(circle at 10% 20%,#67244b6b,transparent 70%),linear-gradient(125deg,#492036,#2a1930);
}
.mates-shop-dialog .shop-symbol-art{
 background-image:var(--market-icon-sheet),radial-gradient(circle,#613556,#1b1220)!important;
 background-repeat:no-repeat;background-size:400% 200%,cover;
 border:1px solid #d8a751;border-radius:9px;
 box-shadow:inset 0 0 0 1px #ffefc72e,0 0 10px #e3a6443e;
 font-size:0;overflow:hidden;
}
.mates-shop-dialog .shop-art-free{background-position:0% 0%,center}
.mates-shop-dialog .shop-art-thousand{background-position:33.3333% 0%,center}
.mates-shop-dialog .shop-art-tenk{background-position:66.6667% 0%,center}
.mates-shop-dialog .shop-art-hundredk{background-position:100% 0%,center}
.mates-shop-dialog .shop-art-lock24{background-position:0% 100%,center}
.mates-shop-dialog .shop-art-unlock{background-position:0% 100%,center;filter:hue-rotate(95deg)}
.mates-shop-dialog .shop-art-skip{background-position:33.3333% 100%,center}
.mates-shop-dialog .shop-art-credit{background-position:66.6667% 100%,center}
.mates-shop-dialog .shop-art-mega{background-position:100% 100%,center}
.mates-shop-dialog .shop-card-copy small{color:#ffcf7a;text-transform:uppercase;letter-spacing:.045em;text-shadow:0 1px #130817}
.mates-shop-dialog .shop-card-copy strong{color:#fff2ce;text-shadow:0 1px 2px #1c1017}
.mates-shop-dialog .shop-card-copy p{color:#e5ccd0}
.mates-shop-dialog .shop-price{color:#ffe18b;text-shadow:0 1px #5e3618}
.mates-shop-dialog .shop-buy,
.mates-shop-dialog .shop-confirm-buy,
.mates-shop-dialog .shop-send-submit{
 border:1px solid #cde9b2;border-bottom:3px solid #306b3b;
 background:linear-gradient(180deg,#4eb775,#27774c 50%,#185735);
 box-shadow:inset 0 1px #e9ffb77d,0 2px 6px #0e281c9c;
 color:#fff4cc;text-shadow:0 1px #154527;
}
.mates-shop-dialog .shop-buy:not(:disabled):active,
.mates-shop-dialog .shop-confirm-buy:not(:disabled):active{transform:translateY(1px);box-shadow:inset 0 2px 5px #0005}
.mates-shop-dialog .shop-history{color:#fbe5c6;background:linear-gradient(100deg,#4c233a,#221829)}
.mates-shop-dialog .shop-players,
.mates-shop-dialog .shop-transfer-field select,
.mates-shop-dialog .shop-transfer-field input{
 background:linear-gradient(#301d32,#1e1525);border:1px solid #c69a58;color:#fff3df
}
.mates-shop-dialog .shop-confirm-card{
 border:2px solid #dca75f;
 background:linear-gradient(150deg,#603044,#221625 75%);
 box-shadow:inset 0 1px #ffd9a166,0 8px 25px #000b;
}
.mates-shop-dialog .shop-confirm-buttons .shop-cancel{background:linear-gradient(#38526d,#182d45);border-color:#8da9cc;color:#fff}
.mates-shop-dialog .shop-scroll-cue{background:linear-gradient(#4d2838,#2d1830);color:#ffe5b1}
.mates-shop-dialog .shop-footer{background:#160d1b;border-top:1px solid #936e4b;color:#d4b89c}
#vaultDialog .shop-premium-vault{display:grid;gap:9px;margin:12px 0}
#vaultDialog .shop-premium-option{
 display:grid;align-content:center;justify-items:center;gap:2px;
 min-width:0;width:100%;min-height:59px;padding:7px 10px!important;position:relative;overflow:hidden;
 background:radial-gradient(ellipse at 50% -15%,#d94a8b7a,transparent 65%),linear-gradient(#72304b,#351728 58%,#210d1e)!important;
 border:2px solid #dca850!important;border-bottom:4px solid #996125!important;border-radius:12px!important;
 color:#ffe6a2!important;box-shadow:inset 0 0 0 1px #f9d49c60,inset 0 1px 9px #ff72a24a,0 2px 9px #0008!important;
 text-shadow:0 1px 2px #1d0612!important;white-space:normal!important;
}
#vaultDialog .shop-premium-option:before,
#vaultDialog .shop-premium-option:after{
 content:"";position:absolute;top:10px;bottom:10px;width:3px;border-radius:3px;
 background:linear-gradient(#ffe8a0,#ff7eae,#ca812f);box-shadow:0 0 7px #f4a369b0
}
#vaultDialog .shop-premium-option:before{left:9px}
#vaultDialog .shop-premium-option:after{right:9px}
#vaultDialog .shop-premium-option strong{font:900 clamp(13px,3.8vw,18px)/1.1 system-ui;letter-spacing:.065em;color:#ffeabc;white-space:nowrap}
#vaultDialog .shop-premium-option small{font:900 clamp(11px,3vw,14px)/1.2 system-ui;color:#ffe19c;letter-spacing:.035em;white-space:normal}
#vaultDialog .shop-premium-option .shop-premium-detail{font:650 9px/1.1 system-ui;letter-spacing:.075em;color:#e0b9c8}
#vaultDialog .shop-premium-option:not(:disabled):active{transform:translateY(1px)}
#vaultDialog .vault-decision button{
 min-height:47px;border-radius:10px;border-width:2px;border-bottom-width:4px;
 box-shadow:inset 0 1px #ffffff3e,0 3px 8px #0007;color:#fff5de;font:900 14px system-ui;letter-spacing:.06em
}
#vaultDialog #vaultConfirm{border-color:#efbf64;border-bottom-color:#855022;background:linear-gradient(#a92c58,#75233b 50%,#4c1932);color:#ffe9ad;text-shadow:0 1px #431b20}
#vaultDialog #vaultCancel{border-color:#84a6d7;border-bottom-color:#385371;background:linear-gradient(#3d6088,#27415c 50%,#1b2e47);color:#e8f4ff}
#vaultDialog #vaultConfirm:disabled{opacity:.44}
@media(max-width:420px){
 .mates-shop-dialog .shop-card{grid-template-columns:40px minmax(0,1fr) minmax(70px,auto);gap:6px}
 .mates-shop-dialog .shop-symbol-art{width:38px;height:38px}
 .mates-shop-dialog .shop-tab{font-size:10px}
 #vaultDialog .shop-premium-option{min-height:53px;padding:5px 9px!important}
 #vaultDialog .shop-premium-option .shop-premium-detail{display:none}
 #vaultDialog .shop-premium-vault{gap:7px;margin:9px 0}
}
@media(prefers-reduced-motion:reduce){.mates-shop-dialog .shop-buy,.mates-shop-dialog .shop-tab,#vaultDialog .shop-premium-option{transition:none!important}}


/* r155b: Return the market to familiar top-to-bottom product rows.
   The responsive viewport stays fixed, with every enabled offer visible at once. */
.mates-shop-dialog .shop-items[data-shop-view="recharge"],
.mates-shop-dialog .shop-items[data-shop-view="vault"],
.mates-shop-dialog .shop-items[data-shop-view="boost"]{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 grid-auto-flow:row!important;
 gap:clamp(4px,1vh,9px)!important;
 align-content:stretch!important;
 min-height:0!important;
 overflow:hidden!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"]{
 grid-template-rows:repeat(4,minmax(0,1fr))!important;
}
.mates-shop-dialog .shop-items[data-shop-view="vault"]{
 grid-template-rows:repeat(3,minmax(0,1fr))!important;
}
.mates-shop-dialog .shop-items[data-shop-view="boost"]{
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card[data-product="unlockVault"]{
 display:grid!important;
 grid-column:1/-1!important;
 grid-template-columns:clamp(34px,9vw,52px) minmax(0,1fr) minmax(82px,max-content)!important;
 grid-template-rows:minmax(0,1fr)!important;
 align-items:center!important;
 justify-content:stretch!important;
 gap:clamp(4px,1.4vw,10px)!important;
 min-height:0!important;
 min-width:0!important;
 margin:0!important;
 padding:clamp(5px,1.2vh,11px)!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-symbol,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-symbol,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-symbol{
 width:clamp(33px,8vw,50px)!important;
 height:clamp(33px,8vw,50px)!important;
 flex:none!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card-copy,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card-copy,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card-copy{
 display:grid!important;gap:2px!important;align-content:center!important;min-width:0!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card-copy strong,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card-copy strong,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card-copy strong{
 font-size:clamp(11px,2.7vw,15px)!important;line-height:1.1!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-price,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-price,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-price{
 font-size:clamp(10px,2.6vw,13px)!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-buy,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-buy,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-buy{
 display:grid!important;place-items:center!important;
 grid-column:3!important;grid-row:1!important;
 width:100%!important;min-width:0!important;max-width:135px!important;
 min-height:34px!important;max-height:100%!important;
 margin:0!important;padding:4px 6px!important;
 font-size:clamp(9px,2.35vw,12px)!important;line-height:1.1!important;
 overflow-wrap:anywhere;white-space:normal!important;
}
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card[data-product="unlockVault"]{
 grid-template-rows:minmax(0,1fr) auto!important;
}
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card[data-product="unlockVault"] .shop-players{
 display:block!important;grid-column:2/4!important;grid-row:2!important;
 width:100%!important;min-width:0!important;min-height:27px!important;
 height:clamp(27px,4.2vh,38px)!important;margin:0!important;
 padding:3px 6px!important;font-size:clamp(12px,2.5vw,16px)!important;
}
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card[data-product="unlockVault"] .shop-buy{
 width:100%!important;max-width:135px!important;
}
@media(max-width:650px), (max-height:500px) and (max-width:950px){
 .mates-shop-dialog .shop-items[data-shop-view="recharge"],
 .mates-shop-dialog .shop-items[data-shop-view="vault"],
 .mates-shop-dialog .shop-items[data-shop-view="boost"]{
  padding:clamp(4px,.7vh,8px) max(7px,env(safe-area-inset-right)) clamp(4px,.7vh,8px) max(7px,env(safe-area-inset-left))!important;
 }
 .mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card,
 .mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card,
 .mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card{
  grid-template-columns:clamp(30px,8vw,42px) minmax(0,1fr) minmax(76px,26vw)!important;
  padding:clamp(3px,.9vh,7px)!important;
 }
 .mates-shop-dialog .shop-items .shop-card-copy small{
  font-size:clamp(8px,2vw,9px)!important;
 }
}
@media(max-height:500px) and (max-width:950px){
 .mates-shop-dialog .shop-items[data-shop-view="recharge"],
 .mates-shop-dialog .shop-items[data-shop-view="vault"],
 .mates-shop-dialog .shop-items[data-shop-view="boost"]{gap:3px!important;padding:3px 8px!important}
 .mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card,
 .mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card,
 .mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card{
  grid-template-columns:32px minmax(0,1fr) minmax(88px,25vw)!important;
  padding:2px 7px!important;gap:5px!important;
 }
 .mates-shop-dialog .shop-items .shop-card-copy small{display:none}
 .mates-shop-dialog .shop-items .shop-symbol{width:30px!important;height:30px!important}
 .mates-shop-dialog .shop-items .shop-buy{min-height:29px!important;padding:3px!important}
 .mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card[data-product="unlockVault"] .shop-players{height:26px!important;min-height:26px!important}
}

/* R156 consistent catalogue: every category reserves four equal-height rows,
   so changing tabs never inflates or shrinks the individual item cards. */
.mates-shop-dialog .shop-items[data-shop-view="recharge"],
.mates-shop-dialog .shop-items[data-shop-view="vault"],
.mates-shop-dialog .shop-items[data-shop-view="boost"]{
 grid-template-rows:repeat(4,minmax(0,1fr))!important;
 align-content:start!important;
}
.mates-shop-dialog .shop-items[data-shop-view="recharge"] .shop-card,
.mates-shop-dialog .shop-items[data-shop-view="vault"] .shop-card,
.mates-shop-dialog .shop-items[data-shop-view="boost"] .shop-card{
 height:100%!important;max-height:100%!important;box-sizing:border-box!important;
}
.mates-shop-dialog .shop-items .shop-card-copy strong{
 font-size:clamp(13px,3vw,17px)!important;line-height:1.14!important;
}
.mates-shop-dialog .shop-items .shop-card-copy small{font-size:clamp(9px,2.2vw,11px)!important}
.mates-shop-dialog .shop-items .shop-price{font-size:clamp(12px,2.7vw,15px)!important}
.mates-shop-dialog .shop-items .shop-buy{
 min-height:clamp(38px,6vh,53px)!important;
 max-height:100%!important;
 max-width:none!important;
 font-size:clamp(12px,2.8vw,15px)!important;
 border:2px solid #e5c578!important;
 border-bottom:4px solid #6f4219!important;
 border-radius:10px!important;
 background:linear-gradient(155deg,#6ec991 0%,#26805b 34%,#175b3b 100%)!important;
 box-shadow:inset 0 1px #fff4bd88,inset 0 0 8px #194e376e,0 3px 8px #0009!important;
 color:#fff7d5!important;
 text-shadow:0 1px #18482c!important;
}
.mates-shop-dialog .shop-items .shop-buy:disabled{
 background:linear-gradient(#645061,#322737)!important;
 border-color:#806b7e!important;
 color:#e5c8c7!important;
 box-shadow:inset 0 1px #e7c0d824!important;
 opacity:.85!important;
}
@media(max-width:650px),(max-height:500px) and (max-width:950px){
 .mates-shop-dialog .shop-items .shop-card-copy strong{font-size:clamp(12px,3vw,16px)!important}
 .mates-shop-dialog .shop-items .shop-card-copy small{font-size:clamp(8px,2.15vw,10px)!important}
 .mates-shop-dialog .shop-items .shop-price{font-size:clamp(11px,2.7vw,14px)!important}
 .mates-shop-dialog .shop-items .shop-buy{min-height:clamp(34px,5.6vh,46px)!important;font-size:clamp(11px,2.6vw,13px)!important}
}
@media(max-height:500px) and (max-width:950px){
 .mates-shop-dialog .shop-items .shop-card-copy small{display:none!important}
 .mates-shop-dialog .shop-items .shop-card-copy strong{font-size:clamp(11px,1.9vw,14px)!important}
 .mates-shop-dialog .shop-items .shop-price{font-size:clamp(10px,1.8vw,12px)!important}
 .mates-shop-dialog .shop-items .shop-buy{min-height:27px!important;max-height:36px!important;font-size:clamp(10px,1.8vw,12px)!important}
}

/* The purchase confirmation uses the same atlas icon as the corresponding list item. */
.mates-shop-dialog .shop-confirm-card .shop-confirm-symbol{
 width:clamp(56px,15vw,76px)!important;height:clamp(56px,15vw,76px)!important;
 margin:0 auto 8px;display:block;min-height:0;border-radius:12px!important;
}