/* ============================================================
   dash-shop.css — متجر الكردت المطوّر
   ============================================================ */
.sx{display:flex;flex-direction:column;gap:30px}
.sx-sec{position:relative}
.sx-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sx-h span{font-family:"Alexandria",sans-serif;font-size:1.25rem;font-weight:800;color:#fff}
.sx-h small{color:#8fa597;font-size:.8rem}
.sx-h small b{color:#5dff8a}
.sx-empty{grid-column:1/-1;text-align:center;padding:40px;color:#8fa597}

/* ---------- الهيرو ---------- */
.sx-hero{position:relative;overflow:hidden;display:grid;gap:16px;padding:26px 28px;border-radius:26px;border:1px solid rgba(0,214,50,.32);
  background:linear-gradient(160deg,rgba(0,214,50,.12),rgba(0,214,50,.02) 60%),#06100a;box-shadow:0 30px 70px -40px rgba(0,214,50,.7)}
.sx-orb{position:absolute;inset-inline-start:-80px;top:-100px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(0,214,50,.35),transparent 65%);filter:blur(20px);pointer-events:none;animation:sxFloat 9s ease-in-out infinite alternate}
@keyframes sxFloat{to{transform:translate(40px,30px) scale(1.15)}}
.sx-bal{position:relative;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sx-bal small{color:#8fa597;font-size:.82rem;width:100%}
.sx-bal b{font-family:"Alexandria",sans-serif;font-size:clamp(2.2rem,6vw,3.4rem);font-weight:900;line-height:1;background:linear-gradient(110deg,#0b8f2e,#5dff8a 40%,#fff 55%,#5dff8a 70%,#0b8f2e);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.sx-bal span{color:#cfe9d6;font-weight:700}
.sx-pills{position:relative;display:flex;gap:8px;flex-wrap:wrap}
.sx-pill{padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:.82rem;color:#cfe9d6}
.sx-pill b{color:#fff}
.sx-pill.hot{border-color:rgba(255,140,40,.5);background:rgba(255,140,40,.1)}
.sx-pill.boost{border-color:rgba(255,210,74,.55);background:rgba(255,210,74,.1);animation:sxPulse 1.6s ease-in-out infinite}
@keyframes sxPulse{50%{box-shadow:0 0 18px -2px rgba(255,210,74,.7)}}
.sx-goal{position:relative;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.sx-goal.empty{color:#8fa597;font-size:.85rem;border-style:dashed}
.sx-goal-t{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem;color:#e8f3ea;margin-bottom:8px}
.sx-goal-t span{color:#8fa597}
.sx-goal-s{margin-top:8px;font-size:.8rem;color:#8fa597}.sx-goal-s b{color:#5dff8a}
.sx-hero-actions{position:relative;display:flex;gap:10px}
.sx-bar{height:9px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.sx-bar>i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#0b8f2e,#00d632,#5dff8a);box-shadow:0 0 12px rgba(0,214,50,.6);transition:width .8s cubic-bezier(.22,1,.36,1)}
.sx-bar.big{height:14px;margin-bottom:14px}

/* ---------- بطاقات العناصر (إضافات) ---------- */
.sx-card{position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.sx-card:hover{transform:translateY(-5px)}
.sx-card.rar-epic{box-shadow:0 0 22px -10px var(--rar)}
.sx-card.rar-legendary{box-shadow:0 0 30px -8px var(--rar)}
.sx-card.rar-mythic{box-shadow:0 0 36px -6px var(--rar);animation:sxMythic 3s ease-in-out infinite}
@keyframes sxMythic{50%{box-shadow:0 0 50px -2px var(--rar)}}
.sx-disc{position:absolute;top:10px;inset-inline-end:10px;background:linear-gradient(110deg,#ff3b3b,#ff8a3b);color:#fff;font-size:.72rem;font-weight:900;padding:3px 9px;border-radius:99px;z-index:2;box-shadow:0 6px 16px -6px rgba(255,80,60,.8)}
.sx-star{position:absolute;top:8px;inset-inline-start:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:#8fa597;font-size:1.05rem;cursor:pointer;transition:.2s;z-index:2}
.sx-star:hover{background:rgba(255,210,74,.2);color:#ffd24a;transform:scale(1.15)}
.sx-star.on{color:#ffd24a;background:rgba(255,210,74,.18);text-shadow:0 0 10px rgba(255,210,74,.8)}
.sx-need{position:relative;height:18px;border-radius:9px;background:rgba(255,255,255,.06);overflow:hidden;margin:6px 0 4px}
.sx-need i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(0,214,50,.35),rgba(0,214,50,.12))}
.sx-need span{position:relative;display:block;text-align:center;font-size:.68rem;line-height:18px;color:#cfe9d6}
.shop-buy s{opacity:.55;margin-inline-end:4px}

/* ---------- الصناديق ---------- */
.sx-crates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.sx-crates{grid-template-columns:1fr}}
.sx-crate{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:24px;border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--cc) 20%,transparent),transparent 60%),#07100a;box-shadow:0 24px 60px -34px var(--cc);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sx-crate:hover{transform:translateY(-6px)}
.sx-crate-ic{font-size:3.6rem;text-align:center;filter:drop-shadow(0 8px 20px var(--cc));animation:sxBob 3s ease-in-out infinite}
@keyframes sxBob{50%{transform:translateY(-8px) rotate(-3deg)}}
.sx-crate-n{text-align:center;font-weight:900;font-size:1.1rem;color:var(--cc)}
.sx-odds{display:grid;gap:5px}
.sx-odd{position:relative;display:grid;grid-template-columns:54px 1fr 40px;align-items:center;gap:8px;font-size:.72rem;color:#9db0a2}
.sx-odd i{display:block;height:6px;border-radius:6px;background:var(--rar);box-shadow:0 0 8px var(--rar)}
.sx-odd em{font-style:normal;color:#fff;text-align:end}
.sx-pity{position:relative;height:20px;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden}
.sx-pity i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 55%,transparent),color-mix(in srgb,var(--cc) 20%,transparent))}
.sx-pity span{position:relative;display:block;text-align:center;font-size:.68rem;line-height:20px;color:#e8f3ea}

/* ---------- المهام ---------- */
.sx-quests{display:grid;gap:10px}
.sx-quest{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:.25s}
.sx-quest.done{border-color:rgba(0,214,50,.5);background:rgba(0,214,50,.07);box-shadow:0 0 24px -12px rgba(0,214,50,.8)}
.sx-quest.claimed{opacity:.55}
.sx-quest.bonus{border-style:dashed;border-color:rgba(255,210,74,.4)}
.sx-quest.bonus.done{border-color:#ffd24a;background:rgba(255,210,74,.08);box-shadow:0 0 26px -10px rgba(255,210,74,.8)}
.sx-q-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:rgba(255,255,255,.05);flex-shrink:0}
.sx-q-b{flex:1;min-width:0;display:grid;gap:6px}
.sx-q-n{font-weight:700;font-size:.92rem;color:#eef7f0}
.sx-q-b small{color:#8fa597}

/* ---------- مراحل السلسلة ---------- */
.sx-track{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative}
@media(max-width:700px){.sx-track{grid-template-columns:repeat(3,1fr)}}
.sx-ms{display:grid;justify-items:center;gap:4px;padding:14px 6px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);text-align:center}
.sx-ms.reached{border-color:rgba(255,140,40,.55);background:rgba(255,140,40,.08)}
.sx-ms-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.06);color:#9db0a2}
.sx-ms.reached .sx-ms-dot{background:linear-gradient(135deg,#ff8a3b,#ffd24a);color:#2a1300;box-shadow:0 0 18px rgba(255,160,40,.6)}
.sx-ms-d{font-size:.78rem;font-weight:700;color:#cfe9d6}
.sx-ms-r{font-size:.74rem;color:#5dff8a;font-weight:700}

/* ---------- المضاعفات والمجموعة ---------- */
.sx-boosts{display:grid;gap:10px}
.sx-boost{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,210,74,.28);background:rgba(255,210,74,.04)}
.sx-boost.note{border-style:dashed;border-color:rgba(255,255,255,.12);background:transparent;color:#9db0a2;font-size:.85rem}
.sx-boost-ic{font-size:1.7rem}
.sx-boost-b{flex:1;display:grid}.sx-boost-b small{color:#8fa597}
.sx-coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sx-coll-i{display:grid;gap:6px;font-size:.82rem;color:#cfe9d6}
.sx-coll-i small{color:#8fa597}

/* ---------- فلاتر الكتالوج ---------- */
.sx-filters{display:grid;gap:10px;margin-bottom:16px}
.sx-chips{display:flex;gap:6px;flex-wrap:wrap}
.sx-chip{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#9db0a2;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s}
.sx-chip:hover{color:#fff;border-color:rgba(0,214,50,.5)}
.sx-chip.on{background:linear-gradient(110deg,#0b8f2e,#00d632);color:#031a09;border-color:transparent}
.sx-chip.rar.on{background:var(--rar,#00d632);color:#0a0a0a}
.sx-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sx-row input[type=search]{flex:1;min-width:180px}
.sx-aff{display:flex;gap:6px;align-items:center;font-size:.82rem;color:#cfe9d6;cursor:pointer}

/* ---------- نافذة الصندوق ---------- */
.sx-ov{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:20px;background:radial-gradient(60vmax 40vmax at 50% 20%,rgba(0,214,50,.14),transparent 60%),rgba(2,6,4,.93);backdrop-filter:blur(14px);animation:sxFade .3s}
@keyframes sxFade{from{opacity:0}}
.sx-modal{width:min(640px,100%);display:grid;gap:18px;text-align:center}
.sx-modal-t{font-family:"Alexandria",sans-serif;font-size:1.5rem;font-weight:900;color:var(--cc)}
.sx-reel-wrap{position:relative;overflow:hidden;direction:ltr;height:140px;border-radius:20px;border:1px solid color-mix(in srgb,var(--cc) 50%,transparent);background:#050b07;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sx-reel{display:flex;height:100%;align-items:center;padding-inline:0;transition:transform 4.4s cubic-bezier(.08,.62,.1,1);will-change:transform}
.sx-reel-c{flex:0 0 112px;height:112px;margin:0 3px;display:grid;place-items:center;border-radius:16px;border:2px solid var(--rar);background:linear-gradient(160deg,color-mix(in srgb,var(--rar) 18%,#0a120d),#070c09)}
.sx-reel-c .shop-cardprev,.sx-reel-c .shop-frameprev,.sx-reel-c .shop-swatch{transform:scale(.8)}
.sx-reel-mark{position:absolute;inset-block:0;left:50%;width:3px;transform:translateX(-50%);background:linear-gradient(transparent,#fff,transparent);z-index:3;box-shadow:0 0 16px #fff}
.sx-reveal{min-height:0;opacity:0;transform:translateY(20px) scale(.96);transition:.6s cubic-bezier(.22,1,.36,1)}
.sx-reveal.show{opacity:1;transform:none}
.sx-win{display:grid;gap:8px;justify-items:center;padding:22px;border-radius:24px;border:2px solid var(--rar);background:radial-gradient(100% 100% at 50% 0%,color-mix(in srgb,var(--rar) 24%,transparent),transparent 70%),#070d09;box-shadow:0 0 70px -10px var(--rar);animation:sxWin 2s ease-in-out infinite alternate}
@keyframes sxWin{to{box-shadow:0 0 100px -4px var(--rar)}}
.sx-win-r{font-weight:900;letter-spacing:.1em;font-size:.9rem}
.sx-win-p{transform:scale(1.5);margin:14px 0}
.sx-win-n{font-family:"Alexandria",sans-serif;font-size:1.4rem;font-weight:900;color:#fff}
.sx-win small{color:#9db0a2}
.sx-win-b{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ---------- قصاصات الاحتفال ---------- */
.sx-confetti{position:fixed;inset:0;pointer-events:none;z-index:3000;overflow:hidden}
.sx-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:sxFall linear forwards}
@keyframes sxFall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
@media(prefers-reduced-motion:reduce){.sx-orb,.sx-crate-ic,.sx-card.rar-mythic,.sx-win,.sx-pill.boost,.sx-bal b{animation:none}.sx-reel{transition-duration:.01s}}
@media(max-width:700px){.sx-hero{padding:20px 16px}.sx-quest{flex-wrap:wrap}.sx-reel-c{flex-basis:92px;height:92px}}
/* أزرار الشراء: سطر واحد، خط أصغر، سعر العرض واضح */
.sx-card .btn,.sx-crate .btn,.sx-boost .btn,.sx-quest .btn{white-space:nowrap}
.sx-card .shop-buy{font-size:.78rem;padding:8px 10px;gap:4px;display:inline-flex;align-items:center;justify-content:center;width:100%}
.sx-card .btn-sm{width:100%}
.sx-card .shop-buy s{font-size:.72rem}
.sx-win-p{width:150px;display:grid;place-items:center;transform:scale(1.25);margin:18px 0}
.sx-win-p .shop-cardprev{width:140px}