/* ============================================================
 * FEATURE CSS: Store (v1 + v2 premium)
 * Merged bundle — built 2026-07-03 (reorg). Original cascade order:
 *   - css/store-2026-07-02.css
 *   - store-v2.css
 * ============================================================ */

/* ─────────── SOURCE: css/store-2026-07-02.css ─────────── */
/* ============================================================
   Store — متجر كوكب الاشكيف — 2026-07-02
   1) Store / Inventory / Studio / Profile page UI
   2) Cosmetic classes (frames / name effects / badges / game fx)
   3) Entrance & Victory animation overlays
   All additive — loaded last.
   ============================================================ */

/* ---------- 1) STORE UI ---------- */
.st-wrap{max-width:1200px;margin:0 auto;padding:24px 16px 60px}
.st-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.st-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;background:linear-gradient(120deg,var(--gold-light,#E7D5AF),var(--gold,#C6A16B) 55%,var(--gold-dark,#9B6B3D));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-wallet{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-coin{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:14px;font-weight:800;font-size:1.05rem;border:1px solid var(--glass-border,rgba(198,161,107,.25));background:var(--glass-bg,rgba(24,19,13,.8))}
.st-coin .st-coin-ic{font-size:1.2rem}
.st-coin.stars{color:#ffd76b}.st-coin.planets{color:#b7a4ff}
.st-daily-btn{padding:8px 16px;border-radius:14px;font-weight:800;cursor:pointer;border:1px solid var(--gold,#C6A16B);background:linear-gradient(120deg,var(--gold-dark,#9B6B3D),var(--gold,#C6A16B));color:#171003;transition:transform .15s, box-shadow .15s}
.st-daily-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(198,161,107,.35)}
.st-daily-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.st-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.st-tab{padding:8px 18px;border-radius:12px;font-weight:700;cursor:pointer;border:1px solid var(--glass-border,rgba(198,161,107,.25));background:transparent;color:var(--ma-parchment,#E7D5AF);transition:all .15s}
.st-tab:hover{border-color:var(--gold,#C6A16B)}
.st-tab.active{background:linear-gradient(120deg,var(--gold-dark,#9B6B3D),var(--gold,#C6A16B));color:#171003;border-color:var(--gold,#C6A16B)}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.st-card{position:relative;border-radius:18px;padding:18px;border:1px solid var(--glass-border,rgba(198,161,107,.22));background:linear-gradient(165deg,var(--dark-card,#1A1610),var(--dark-light,#181614));display:flex;flex-direction:column;gap:10px;transition:transform .18s, border-color .18s, box-shadow .18s;overflow:hidden}
.st-card:hover{transform:translateY(-4px);border-color:var(--gold,#C6A16B);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.st-card.owned{opacity:.92}
.st-rarity{position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.st-rarity.common{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid rgba(148,163,184,.4)}
.st-rarity.rare{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.4)}
.st-rarity.epic{background:rgba(192,132,252,.12);color:#d8b4fe;border:1px solid rgba(192,132,252,.45)}
.st-rarity.legendary{background:rgba(250,204,21,.12);color:#fde047;border:1px solid rgba(250,204,21,.5);box-shadow:0 0 14px rgba(250,204,21,.25)}
.st-hot{position:absolute;top:12px;right:12px;font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.st-preview{height:110px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(198,161,107,.10),transparent 70%)}
.st-item-name{font-weight:800;font-size:1.05rem;color:var(--gold-light,#E7D5AF)}
.st-item-desc{font-size:.82rem;color:rgba(231,213,175,.65);line-height:1.6;min-height:2.6em}
.st-price-row{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.st-buy{flex:1;min-width:100px;padding:9px 10px;border-radius:12px;font-weight:800;font-size:.9rem;cursor:pointer;border:none;transition:transform .12s, box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:6px}
.st-buy:hover{transform:translateY(-2px)}
.st-buy.stars{background:linear-gradient(120deg,#8a6d1f,#e3b93e);color:#181103}
.st-buy.planets{background:linear-gradient(120deg,#4c3e9e,#8b7bf0);color:#0e0a24}
.st-buy.owned-label{background:rgba(74,222,128,.12);color:#86efac;border:1px solid rgba(74,222,128,.35);cursor:default;transform:none}
.st-buy.equip{background:transparent;border:1px solid var(--gold,#C6A16B);color:var(--gold,#C6A16B)}
.st-buy.equip.on{background:linear-gradient(120deg,var(--gold-dark,#9B6B3D),var(--gold,#C6A16B));color:#171003}
.st-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:rgba(231,213,175,.55)}
.st-login-note{text-align:center;padding:16px;border:1px dashed var(--glass-border,rgba(198,161,107,.3));border-radius:14px;color:rgba(231,213,175,.7);margin-bottom:18px}
.st-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px}
.st-pack{border:1px solid rgba(139,123,240,.35);border-radius:16px;padding:16px;text-align:center;background:linear-gradient(160deg,rgba(30,24,58,.7),rgba(20,15,40,.7))}
.st-pack b{display:block;font-size:1.25rem;color:#b7a4ff}
.st-pack span{font-size:.8rem;color:rgba(231,213,175,.6)}
.st-section-title{font-size:1.2rem;font-weight:800;color:var(--gold,#C6A16B);margin:28px 0 12px;display:flex;align-items:center;gap:8px}
.st-tx-table{width:100%;border-collapse:collapse;font-size:.85rem}
.st-tx-table td{padding:7px 10px;border-bottom:1px solid rgba(198,161,107,.12);color:rgba(231,213,175,.8)}
.st-tx-plus{color:#86efac;font-weight:800}.st-tx-minus{color:#fca5a5;font-weight:800}
/* studio */
.st-plan{border:1px solid var(--glass-border,rgba(198,161,107,.22));border-radius:18px;padding:20px;background:linear-gradient(165deg,var(--dark-card,#1A1610),var(--dark-light,#181614));display:flex;flex-direction:column;gap:8px}
.st-plan h4{font-size:1.15rem;font-weight:800;color:var(--gold-light,#E7D5AF)}
.st-plan .price{font-size:1rem;color:var(--gold,#C6A16B);font-weight:800}
.st-plan ul{margin:6px 0;padding-right:18px;font-size:.85rem;color:rgba(231,213,175,.75);line-height:1.9}
.st-theme-card{border:1px solid var(--glass-border,rgba(198,161,107,.22));border-radius:16px;padding:14px;cursor:pointer;transition:all .15s;position:relative}
.st-theme-card:hover{border-color:var(--gold,#C6A16B);transform:translateY(-3px)}
.st-theme-card.active-theme{border-color:#4ade80;box-shadow:0 0 16px rgba(74,222,128,.25)}
.st-swatches{display:flex;gap:5px;margin-top:8px}
.st-swatch{width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.2)}
.st-overlay-link{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(198,161,107,.07);border:1px solid rgba(198,161,107,.18);margin-bottom:8px;font-size:.82rem}
.st-overlay-link code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:left;color:#93c5fd}
.st-copy-btn{padding:5px 12px;border-radius:9px;border:1px solid var(--gold,#C6A16B);background:transparent;color:var(--gold,#C6A16B);cursor:pointer;font-size:.78rem;font-weight:700}
.st-copy-btn:hover{background:var(--gold,#C6A16B);color:#171003}
.st-status-chip{display:inline-flex;padding:4px 14px;border-radius:999px;font-weight:800;font-size:.8rem}
.st-status-chip.active{background:rgba(74,222,128,.14);color:#86efac}
.st-status-chip.pending{background:rgba(250,204,21,.12);color:#fde047}
.st-status-chip.none{background:rgba(148,163,184,.12);color:#cbd5e1}
/* profile */
.st-profile-head{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.st-profile-items{display:flex;flex-wrap:wrap;gap:10px}
.st-mini-item{padding:8px 14px;border-radius:12px;border:1px solid var(--glass-border,rgba(198,161,107,.22));background:var(--glass-bg,rgba(24,19,13,.8));font-size:.85rem;display:flex;align-items:center;gap:7px}

/* ---------- 2) COSMETIC AVATAR FRAMES ---------- */
.cf-avatar-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.cf-avatar-wrap img,.cf-avatar-core{border-radius:50%;display:block}
.cf-frame{position:absolute;inset:-6px;border-radius:50%;pointer-events:none}
.cf-frame-wood{border:3.5px solid #8B5A2B;box-shadow:inset 0 0 5px #5c3a1a, 0 0 6px rgba(139,90,43,.5)}
.cf-frame-silver{border:3.5px solid #cbd5e1;box-shadow:0 0 10px rgba(203,213,225,.6), inset 0 0 4px rgba(255,255,255,.5)}
.cf-frame-neon{border:3px solid #22d3ee;box-shadow:0 0 12px #22d3ee,inset 0 0 8px rgba(34,211,238,.4)}
.cf-frame-fire{border:3.5px solid #f97316;box-shadow:0 0 14px #f97316,0 0 26px rgba(249,115,22,.5);animation:cfFfirePulse 1.1s ease-in-out infinite}
@keyframes cfFirePulse{0%,100%{box-shadow:0 0 12px #f97316,0 0 22px rgba(249,115,22,.45);border-color:#f97316}50%{box-shadow:0 0 20px #fbbf24,0 0 38px rgba(251,191,36,.6);border-color:#fbbf24}}
.cf-frame-royal{border:4px solid #FFD700;box-shadow:0 0 14px rgba(255,215,0,.7),inset 0 0 6px rgba(255,215,0,.5);animation:cfRoyalShine 2.4s linear infinite}
@keyframes cfRoyalShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}
.cf-frame-galaxy{border:3.5px solid transparent;background:conic-gradient(#a78bfa,#22d3ee,#f0abfc,#a78bfa) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cfGalaxySpin 3.2s linear infinite;box-shadow:0 0 16px rgba(167,139,250,.55)}
@keyframes cfGalaxySpin{to{transform:rotate(360deg)}}

/* ---------- NAME EFFECTS ---------- */
.cf-name-gradient{background:linear-gradient(120deg,#E7D5AF,#C6A16B 45%,#FFB15E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.cf-name-glow{color:#FFB15E;text-shadow:0 0 8px rgba(255,177,94,.9),0 0 18px rgba(255,177,94,.5);font-weight:800}
.cf-name-dance{display:inline-block;font-weight:800;color:#f0abfc}
.cf-name-dance>span{display:inline-block;animation:cfDance 1s ease-in-out infinite}
@keyframes cfDance{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cf-title-tag{display:inline-flex;align-items:center;padding:1px 8px;margin-inline-end:5px;border-radius:8px;font-size:.72em;font-weight:800;background:linear-gradient(120deg,var(--gold-dark,#9B6B3D),var(--gold,#C6A16B));color:#171003;vertical-align:middle}

/* ---------- BADGES ---------- */
.cf-badge{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:4px;font-size:.9em;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(198,161,107,.5))}

/* ---------- GAME FX ---------- */
.cf-fx-goldpen{filter:drop-shadow(0 0 6px #FFD700)}
.cf-fx-royalcell{background:linear-gradient(135deg,#B8860B,#FFD700)!important;color:#171003!important}
.cf-fx-goldpawn{filter:drop-shadow(0 0 8px #FFD700) saturate(1.6)}

/* ---------- 3) ENTRANCE / VICTORY OVERLAYS ---------- */
#cf-overlay-stage{position:fixed;inset:0;pointer-events:none;z-index:9990;overflow:hidden}
.cf-ent-banner{position:absolute;top:22%;left:50%;transform:translateX(-50%) scale(.6);opacity:0;padding:16px 34px;border-radius:20px;border:2px solid var(--gold,#C6A16B);background:linear-gradient(160deg,rgba(15,14,13,.95),rgba(36,26,17,.95));color:var(--gold-light,#E7D5AF);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.7rem);box-shadow:0 10px 50px rgba(0,0,0,.7);animation:cfEntPop 3.2s cubic-bezier(.2,1.3,.35,1) forwards;text-align:center;white-space:nowrap}
@keyframes cfEntPop{0%{opacity:0;transform:translateX(-50%) scale(.6)}12%{opacity:1;transform:translateX(-50%) scale(1.04)}18%{transform:translateX(-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(.92)}}
.cf-ent-banner .cf-ent-icon{font-size:1.6em;display:block;margin-bottom:4px}
.cf-ent-bolt-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(147,197,253,.55),transparent 55%);animation:cfBoltFlash .55s ease-out forwards}
@keyframes cfBoltFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.cf-fw-p{position:absolute;width:8px;height:8px;border-radius:50%;animation:cfFw 1.5s ease-out forwards}
@keyframes cfFw{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.cf-red-carpet{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:34vh;background:linear-gradient(180deg,rgba(220,38,38,.0),rgba(220,38,38,.55));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:cfCarpet 3s ease-out forwards}
@keyframes cfCarpet{0%{width:0;opacity:0}20%{width:44vw;opacity:1}80%{opacity:1}100%{width:44vw;opacity:0}}
.cf-conf-p{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cfConfFall linear forwards}
@keyframes cfConfFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(105vh) rotate(720deg)}}
.cf-vic-banner{position:absolute;top:30%;left:50%;transform:translateX(-50%) scale(.5);opacity:0;font-size:clamp(1.4rem,4vw,2.4rem);font-weight:900;color:#FFD700;text-shadow:0 0 22px rgba(255,215,0,.8);animation:cfVicPop 3.4s cubic-bezier(.2,1.3,.35,1) forwards;text-align:center}
@keyframes cfVicPop{0%{opacity:0;transform:translateX(-50%) scale(.5)}14%{opacity:1;transform:translateX(-50%) scale(1.08)}22%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.cf-trophy-drop{position:absolute;top:-90px;left:50%;transform:translateX(-50%);font-size:76px;animation:cfTrophy 2.8s cubic-bezier(.3,1.4,.4,1) forwards;filter:drop-shadow(0 0 18px rgba(255,215,0,.7))}
@keyframes cfTrophy{0%{top:-90px}35%{top:38%}45%{top:34%}55%{top:36%}85%{top:36%;opacity:1}100%{top:36%;opacity:0}}
.cf-volcano-p{position:absolute;bottom:8vh;left:50%;width:10px;height:10px;border-radius:50%;background:#FFB15E;animation:cfVolc 1.6s ease-out forwards}
@keyframes cfVolc{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.cf-dancer{position:absolute;bottom:14vh;left:50%;transform:translateX(-50%);font-size:70px;animation:cfDancer 3s ease-in-out forwards}
@keyframes cfDancer{0%{opacity:0;transform:translateX(-50%) scale(.4)}15%{opacity:1;transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) rotate(-12deg)}45%{transform:translateX(-50%) rotate(12deg)}60%{transform:translateX(-50%) rotate(-12deg)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(.8)}}
.cf-falcon{position:absolute;top:18%;right:-120px;font-size:64px;animation:cfFalcon 2.6s ease-in-out forwards}
@keyframes cfFalcon{0%{right:-120px;transform:rotate(8deg)}45%{right:48%;transform:rotate(-4deg)}60%{right:50%;transform:translateY(10px)}100%{right:115%;transform:rotate(-10deg)}}
.cf-smoke-puff{position:absolute;top:32%;left:50%;transform:translateX(-50%);width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(148,163,184,.5),transparent 70%);animation:cfSmoke 2.2s ease-out forwards}
@keyframes cfSmoke{0%{opacity:0;transform:translateX(-50%) scale(.4)}25%{opacity:.9}100%{opacity:0;transform:translateX(-50%) scale(2.4)}}

@media (prefers-reduced-motion: reduce){
  .cf-frame-fire,.cf-frame-royal,.cf-frame-galaxy,.cf-name-dance>span{animation:none!important}
  #cf-overlay-stage *{animation-duration:.4s!important}
}
@media (max-width:640px){
  .st-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
  .st-card{padding:12px}
  .st-preview{height:84px}
}


/* ─────────── SOURCE: store-v2.css ─────────── */
/* ============================================================
   Store V2 CSS — متجر كوكب الاشكيف الفاخر — 2026-07-02
   Loaded AFTER /css/store-2026-07-02.css (additive premium layer)
   ============================================================ */

:root {
  --st-bg-deep: #070510;
  --st-bg-card: rgba(20, 16, 38, .85);
  --st-gold: #E8B730;
  --st-gold-soft: #f5d989;
  --st-nebula: #7c3aed;
  --st-cyan: #22d3ee;
  --rar-common: #8b95a5;
  --rar-rare: #3b82f6;
  --rar-epic: #a855f7;
  --rar-legendary: #E8B730;
  --rar-mythic: #ff3b6b;
}

/* ---------- HERO BANNER ---------- */
.stv2-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 26px;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(232, 183, 48, .25);
  box-shadow: 0 12px 50px rgba(0, 0, 0, .55), inset 0 0 120px rgba(7, 5, 16, .35);
}
.stv2-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(1.1);
}
.stv2-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,5,16,.05) 20%, rgba(7,5,16,.82) 88%);
}
.stv2-hero-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 22px 26px; flex-wrap: wrap;
}
.stv2-hero-title {
  font-size: 2rem; font-weight: 900; color: #fff;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .8); margin: 0; line-height: 1.25;
}
.stv2-hero-sub { font-size: .85rem; color: rgba(245, 217, 137, .9); margin-top: 4px; }
.stv2-season {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(120deg, rgba(232,183,48,.22), rgba(124,58,237,.22));
  border: 1px solid rgba(232,183,48,.45);
  color: var(--st-gold-soft); font-size: .72rem; font-weight: 800;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
  backdrop-filter: blur(6px);
}

/* ---------- FEATURED STRIP (عرض اليوم) ---------- */
.stv2-featured {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(232,183,48,.10));
  border: 1px solid rgba(232, 183, 48, .3);
  padding: 18px;
  margin-bottom: 28px;
}
.stv2-featured-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.stv2-featured-title {
  font-size: 1.15rem; font-weight: 900; color: var(--st-gold-soft);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.stv2-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: rgba(7,5,16,.6); border: 1px solid rgba(255,255,255,.14);
  padding: 5px 12px; border-radius: 999px; direction: ltr;
}
.stv2-featured-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.stv2-off-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: auto; max-width: max-content;
  background: linear-gradient(135deg, #ff3b6b, #ff7c3b);
  color: #fff; font-weight: 900; font-size: .74rem;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(255, 59, 107, .35);
  animation: stv2-pulse 1.8s ease-in-out infinite;
}
.stv2-price-old {
  text-decoration: line-through;
  color: rgba(231, 213, 175, .45);
  font-size: .78rem; margin-inline-end: 6px;
}

/* ---------- ITEM CARDS (image-first premium) ---------- */
.stv2-card {
  --rar: var(--rar-common);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--st-bg-card);
  border: 1px solid color-mix(in srgb, var(--rar) 38%, transparent);
  border-radius: 18px;
  padding: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.stv2-card.rar-common    { --rar: var(--rar-common); }
.stv2-card.rar-rare      { --rar: var(--rar-rare); }
.stv2-card.rar-epic      { --rar: var(--rar-epic); }
.stv2-card.rar-legendary { --rar: var(--rar-legendary); }
.stv2-card.rar-mythic    { --rar: var(--rar-mythic); }
.stv2-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 110% 65% at 50% 14%, color-mix(in srgb, var(--rar) 10%, transparent), transparent 75%);
  pointer-events: none;
  transition: opacity .3s;
}
.stv2-card:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 34px color-mix(in srgb, var(--rar) 35%, transparent);
  border-color: color-mix(in srgb, var(--rar) 75%, transparent);
  z-index: 2;
}
.stv2-card > * { position: relative; z-index: 1; }
/* chips must stay absolutely-positioned (override the generic rule above) */
.stv2-card > .stv2-off-badge,
.stv2-card > .stv2-owned-chip,
.stv2-card > .stv2-hot-chip { position: absolute; align-self: flex-start; }

.stv2-img-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 150px; margin-bottom: 10px;
  cursor: pointer;
}
.stv2-img-wrap img.stv2-item-img {
  max-width: 128px; max-height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 16px color-mix(in srgb, var(--rar) 26%, transparent));
  transition: transform .3s ease;
}
.stv2-card:hover .stv2-img-wrap img.stv2-item-img { transform: scale(1.07) translateY(-3px); }

/* rotating legendary/mythic sunray behind image — soft, blurred, edge-faded */
.stv2-card.rar-legendary .stv2-img-wrap::before,
.stv2-card.rar-mythic .stv2-img-wrap::before {
  content: ''; position: absolute; inset: -8%;
  background: conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--rar) 11%, transparent) 12%, transparent 18%, transparent 30%, color-mix(in srgb, var(--rar) 9%, transparent) 36%, transparent 42%, transparent 58%, color-mix(in srgb, var(--rar) 11%, transparent) 64%, transparent 70%, transparent 84%, color-mix(in srgb, var(--rar) 9%, transparent) 90%, transparent 96%);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
          mask: radial-gradient(circle, #000 25%, transparent 68%);
  filter: blur(7px);
  opacity: .85;
  animation: stv2-spin 12s linear infinite;
  pointer-events: none;
}
@keyframes stv2-spin { to { transform: rotate(360deg); } }
@keyframes stv2-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.stv2-name { font-weight: 900; font-size: .98rem; color: #fff; margin-bottom: 3px; }
.stv2-desc {
  font-size: .74rem; color: rgba(231, 213, 175, .62);
  line-height: 1.55; min-height: 34px; margin-bottom: 8px;
}

/* rarity chip */
.stv2-rar {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 900;
  padding: 3px 10px; border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--rar) 26%, rgba(7,5,16,.6));
  border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent);
  margin-bottom: 8px;
}
.stv2-rar.mythic, .st-rarity.mythic {
  background: linear-gradient(120deg, #ff3b6b, #b40a41, #ff3b6b);
  background-size: 200% 100%;
  border: 1px solid #ff7396;
  color: #fff;
  animation: stv2-mythic-flow 2.4s linear infinite;
  box-shadow: 0 0 14px rgba(255, 59, 107, .55);
}
@keyframes stv2-mythic-flow { to { background-position: 200% 0; } }

/* v1 rarity chip glow upgrades (applies to old .st-rarity too) */
.st-rarity.legendary { box-shadow: 0 0 12px rgba(232,183,48,.4); }
.st-rarity.epic { box-shadow: 0 0 10px rgba(168,85,247,.35); }

.stv2-price-row { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.stv2-buy {
  flex: 1; min-width: 100px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 900; font-size: .85rem;
  padding: 9px 12px; border-radius: 12px;
  transition: transform .15s, box-shadow .2s, filter .2s;
  color: #171003;
}
.stv2-buy:hover { transform: translateY(-2px); filter: brightness(1.1); }
.stv2-buy.stars { background: linear-gradient(135deg, #FFB15E, #E8B730); box-shadow: 0 4px 16px rgba(232,183,48,.3); }
.stv2-buy.planets { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; box-shadow: 0 4px 16px rgba(124,58,237,.35); }
.stv2-buy.equip { background: rgba(74, 222, 128, .14); color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.stv2-buy.equip.on { background: rgba(74, 222, 128, .28); }
.stv2-buy.preview { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); flex: 0 0 auto; min-width: 44px; }
.stv2-owned-chip {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(74,222,128,.18); border: 1px solid rgba(74,222,128,.5);
  color: #4ade80; font-size: .68rem; font-weight: 900;
  padding: 3px 9px; border-radius: 999px;
}
.stv2-hot-chip {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(255, 122, 24, .2); border: 1px solid rgba(255,140,60,.55);
  color: #ffb15e; font-size: .66rem; font-weight: 900;
  padding: 3px 9px; border-radius: 999px;
}

/* ---------- premium orb for non-image items ---------- */
.stv2-orb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 118px; height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), transparent 45%),
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--rar) 42%, transparent), transparent 62%),
    radial-gradient(circle, color-mix(in srgb, var(--rar) 20%, rgba(10,7,22,.9)) 0%, rgba(10,7,22,.92) 78%);
  border: 1.5px solid color-mix(in srgb, var(--rar) 55%, transparent);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--rar) 38%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--rar) 24%, transparent),
    0 14px 26px rgba(0,0,0,.5);
  animation: stv2-orb-float 3.6s ease-in-out infinite;
}
/* rotating halo ring around the orb */
.stv2-orb::before {
  content: ''; position: absolute; inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 12%, color-mix(in srgb, var(--rar) 85%, #fff) 18%, transparent 26%,
    transparent 48%, color-mix(in srgb, var(--rar) 65%, transparent) 56%, transparent 64%,
    transparent 86%, color-mix(in srgb, var(--rar) 75%, #fff) 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
          mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
  animation: stv2-spin 5.5s linear infinite;
  pointer-events: none;
}
/* light pedestal under the orb */
.stv2-orb::after {
  content: ''; position: absolute; bottom: -18px; left: 50%;
  width: 96px; height: 18px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--rar) 45%, transparent), transparent 72%);
  filter: blur(2px);
  animation: stv2-pedestal 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stv2-orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes stv2-pedestal {
  0%, 100% { opacity: .95; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: .55; transform: translateX(-50%) scaleX(.82); }
}
.stv2-card:hover .stv2-orb {
  box-shadow:
    0 0 40px color-mix(in srgb, var(--rar) 60%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--rar) 34%, transparent),
    0 16px 30px rgba(0,0,0,.55);
}

/* emoji inside the orb */
.stv2-emoji {
  font-size: 54px; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 12px color-mix(in srgb, var(--rar) 55%, transparent));
  transition: transform .3s ease;
}
.stv2-card:hover .stv2-emoji { transform: scale(1.12); }

/* name_effect text preview stage */
.stv2-name-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 14px;
  background: radial-gradient(ellipse 80% 70% at 50% 60%, color-mix(in srgb, var(--rar) 14%, transparent), transparent 75%);
}

/* image pedestal — same light platform under real image items */
.stv2-img-wrap img.stv2-item-img { position: relative; z-index: 1; }
.stv2-card .stv2-img-wrap::after {
  content: ''; position: absolute; bottom: 2px; left: 50%;
  width: 110px; height: 14px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--rar) 24%, transparent), transparent 72%);
  filter: blur(4px);
  pointer-events: none;
}

/* shine sweep across the card on hover */
.stv2-card .stv2-img-wrap { overflow: visible; }
.stv2-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -75%;
  width: 50%; z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.09) 50%, transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}
.stv2-card:hover::after { left: 130%; }

/* ---------- GRID ---------- */
.stv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

/* ---------- PACKS SECTION ---------- */
.stv2-packs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-top: 12px;
}
.stv2-pack {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(167,139,250,.3);
  background: var(--st-bg-card);
  transition: transform .25s, box-shadow .3s;
  cursor: pointer;
}
.stv2-pack:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(124,58,237,.3); }
.stv2-pack img { width: 100%; height: 140px; object-fit: cover; display: block; }
.stv2-pack-body { padding: 12px 14px; text-align: center; }
.stv2-pack-amount { font-size: 1.25rem; font-weight: 900; color: #c4b5fd; }
.stv2-pack-usd { font-size: .85rem; color: rgba(231,213,175,.7); margin-top: 2px; }
.stv2-pack-tag {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, #E8B730, #FFB15E);
  color: #171003; font-size: .66rem; font-weight: 900;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(232,183,48,.5);
}

/* ---------- PREVIEW MODAL ---------- */
.stv2-modal-back {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4, 2, 12, .82);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: stv2-fade .25s ease;
}
@keyframes stv2-fade { from { opacity: 0; } }
.stv2-modal {
  --rar: var(--rar-common);
  position: relative;
  width: 100%; max-width: 440px;
  background: radial-gradient(ellipse 120% 70% at 50% 0%, color-mix(in srgb, var(--rar) 16%, #0d0a1e), #0a0716 70%);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
  border-radius: 24px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 60px color-mix(in srgb, var(--rar) 25%, transparent);
  animation: stv2-modal-in .3s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes stv2-modal-in { from { transform: scale(.85) translateY(24px); opacity: 0; } }
.stv2-modal.rar-common    { --rar: var(--rar-common); }
.stv2-modal.rar-rare      { --rar: var(--rar-rare); }
.stv2-modal.rar-epic      { --rar: var(--rar-epic); }
.stv2-modal.rar-legendary { --rar: var(--rar-legendary); }
.stv2-modal.rar-mythic    { --rar: var(--rar-mythic); }
.stv2-modal-close {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 1rem; cursor: pointer;
}
.stv2-modal-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 210px; margin-bottom: 14px;
}
.stv2-modal-avatar {
  position: relative; width: 150px; height: 150px;
  border-radius: 50%;
}
.stv2-modal-avatar .core {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
  background: linear-gradient(135deg, #241A11, #3B281D);
}
.stv2-modal-avatar .core-fallback {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, #9B6B3D, #C6A16B);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 900; color: #171003;
}
.stv2-modal-avatar .frame-over {
  position: absolute; inset: -18%; width: 136%; height: 136%;
  pointer-events: none;
}
.stv2-modal-img-big {
  max-width: 190px; max-height: 190px; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px color-mix(in srgb, var(--rar) 45%, transparent));
}
.stv2-modal h3 { font-size: 1.3rem; font-weight: 900; color: #fff; margin: 0 0 4px; }
.stv2-modal p  { font-size: .8rem; color: rgba(231,213,175,.7); margin: 0 0 16px; line-height: 1.6; }
.stv2-modal .stv2-price-row { justify-content: center; }
.stv2-modal .stv2-buy { flex: 0 1 170px; }

/* ---------- UNBOXING ANIMATION ---------- */
.stv2-unbox-back {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(3, 1, 10, .9);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  animation: stv2-fade .2s;
}
.stv2-unbox-box {
  font-size: 92px;
  animation: stv2-shake .9s ease-in-out 2;
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--rar, #E8B730) 60%, transparent));
}
@keyframes stv2-shake {
  0%,100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-9deg) scale(1.03); }
  30% { transform: rotate(8deg) scale(1.05); }
  45% { transform: rotate(-7deg) scale(1.07); }
  60% { transform: rotate(6deg) scale(1.1); }
  80% { transform: rotate(-4deg) scale(1.12); }
}
.stv2-unbox-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--rar, #E8B730), transparent 62%);
  opacity: 0;
  animation: stv2-flash .7s ease-out 1.8s forwards;
  pointer-events: none;
}
@keyframes stv2-flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
.stv2-unbox-reveal {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: scale(.5);
  animation: stv2-reveal .55s cubic-bezier(.2,1.5,.4,1) 2s forwards;
}
@keyframes stv2-reveal { to { opacity: 1; transform: scale(1); } }
.stv2-unbox-reveal img { max-width: 200px; max-height: 200px; object-fit: contain;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--rar, #E8B730) 65%, transparent)); }
.stv2-unbox-reveal .nm { font-size: 1.25rem; font-weight: 900; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--rar, #E8B730) 60%, transparent); }
.stv2-unbox-reveal .emoji-big { font-size: 110px; }
@keyframes stv2-screen-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-5px,3px); } 40% { transform: translate(5px,-3px); }
  60% { transform: translate(-4px,-3px); } 80% { transform: translate(4px,3px); }
}
body.stv2-shaking { animation: stv2-screen-shake .45s linear; }

/* ---------- SECTION TITLES ---------- */
.stv2-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 900; color: var(--st-gold-soft);
  margin: 30px 0 14px;
}
.stv2-sec-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(232,183,48,.4), transparent);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .stv2-hero { min-height: 160px; }
  .stv2-hero-title { font-size: 1.35rem; }
  .stv2-grid, .stv2-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stv2-packs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stv2-img-wrap { height: 110px; }
  .stv2-img-wrap img.stv2-item-img { max-width: 92px; max-height: 92px; }
  .stv2-desc { min-height: 0; }
  .stv2-buy { font-size: .76rem; padding: 8px 8px; min-width: 0; }
  .stv2-modal { padding: 22px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .stv2-card, .stv2-card *, .stv2-modal, .stv2-unbox-box, .stv2-off-badge,
  .stv2-rar.mythic, .st-rarity.mythic,
  .stv2-orb, .stv2-orb::before, .stv2-orb::after,
  .stv2-img-wrap::before, .stv2-card::after { animation: none !important; transition: none !important; }
}