/* =====================================================================
   DONATION SHOWCASE — one morphing rank viewer (replaces the 3-card layout)
   3D crystal that grows + recolours per rank · odometer price · text decrypt ·
   power meters · shockwave on switch · magnetic CTA · auto-demo
   ===================================================================== */
@property --dx-a{ syntax:'<color>'; inherits:true; initial-value:#4ade80; }
@property --dx-b{ syntax:'<color>'; inherits:true; initial-value:#22c55e; }

#page-store .rank-includes{ background:none; border:0; box-shadow:none; padding:0; max-width:1040px; margin:0 auto 40px; }
#page-store .rank-includes::before, #page-store .rank-includes::after{ display:none; }
#page-store .rank-includes p{ text-align:center; margin:0 0 12px; }
#page-store .rank-includes ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; padding:0; }
#page-store .rank-includes li{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:30px; font-size:13px; font-weight:700; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#page-store .rank-includes .icon{ width:16px; height:16px; }

.dx{ --dx-a:#4ade80; --dx-b:#22c55e; transition:--dx-a .8s ease, --dx-b .8s ease;
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:10px; max-width:1060px; margin:0 auto 56px; padding:34px; border-radius:34px; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, rgba(150,135,255,.08), rgba(70,90,210,.03) 50%, rgba(8,10,30,.5));
  box-shadow:0 30px 90px rgba(2,3,18,.6), 0 0 90px -20px color-mix(in srgb, var(--dx-b) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.dx[data-tier="2"]{ --dx-a:#4aa8ff; --dx-b:#2f6bff; }
.dx[data-tier="3"]{ --dx-a:#b98cff; --dx-b:#7d4bff; }
/* each panel keeps its own accent so it never changes colour mid cross-fade; --ic-h re-tints the (gold) site icons to match */
.dx-panel[data-tier="1"]{ --dx-a:#4ade80; --dx-b:#22c55e; --ic-h:97deg; }
.dx-panel[data-tier="2"]{ --dx-a:#4aa8ff; --dx-b:#2f6bff; --ic-h:172deg; }
.dx-panel[data-tier="3"]{ --dx-a:#b98cff; --dx-b:#7d4bff; --ic-h:222deg; }
.dx-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 420px at 22% 38%, color-mix(in srgb, var(--dx-a) 26%, transparent), transparent 70%), radial-gradient(520px 420px at 92% 85%, color-mix(in srgb, var(--dx-b) 20%, transparent), transparent 70%); }

/* ---------- left: the crystal stage ---------- */
.dx-stage{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.dx-core{ position:relative; width:100%; height:340px; perspective:1000px; }
.dx-aura{ position:absolute; left:50%; top:46%; width:280px; height:280px; transform:translate(-50%,-50%); border-radius:50%; filter:blur(30px); opacity:.55;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--dx-a) 70%, transparent), color-mix(in srgb, var(--dx-b) 30%, transparent) 60%, transparent); animation:dxPulse 4s ease-in-out infinite; }
@keyframes dxPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.45; } 50%{ transform:translate(-50%,-50%) scale(1.08); opacity:.7; } }
.dx-orbit{ position:absolute; left:50%; top:46%; width:0; height:0; transform-style:preserve-3d;
  transform:scale(var(--k,1)) rotateX(calc(-16deg + var(--py,0) * 16deg)) rotateY(calc(var(--px,0) * 28deg)); transition:transform .25s ease-out; animation:dxFloat 5s ease-in-out infinite; }
@keyframes dxFloat{ 0%,100%{ translate:0 -6px; } 50%{ translate:0 8px; } }
.dx-layer{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.34,1.7,.64,1), opacity .5s ease; }
.dx[data-tier="1"] .dx-layer[data-min="2"], .dx[data-tier="1"] .dx-layer[data-min="3"], .dx[data-tier="2"] .dx-layer[data-min="3"]{ transform:scale3d(.01,.01,.01); opacity:0; }
.dx-cube{ position:absolute; width:var(--s); height:var(--s); left:calc(var(--s) / -2); top:calc(var(--s) / -2); transform-style:preserve-3d; }
.dx-cube i{ position:absolute; inset:0; border:1.5px solid color-mix(in srgb, var(--dx-a) 85%, #fff); background:linear-gradient(135deg, color-mix(in srgb, var(--dx-a) 20%, transparent), color-mix(in srgb, var(--dx-b) 8%, transparent));
  box-shadow:inset 0 0 30px color-mix(in srgb, var(--dx-a) 40%, transparent), 0 0 22px color-mix(in srgb, var(--dx-b) 45%, transparent); }
.dx-cube i:nth-child(1){ transform:translateZ(calc(var(--s) / 2)); }
.dx-cube i:nth-child(2){ transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.dx-cube i:nth-child(3){ transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.dx-cube i:nth-child(4){ transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.dx-cube i:nth-child(5){ transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.dx-cube i:nth-child(6){ transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dx-cube.c1{ --s:176px; animation:dxSpinA 22s linear infinite; }
.dx-cube.c1 i{ background:linear-gradient(135deg, color-mix(in srgb, var(--dx-a) 10%, transparent), transparent 70%); border-width:1px; }
.dx-cube.c2{ --s:112px; animation:dxSpinB 15s linear infinite; }
.dx-cube.c3{ --s:64px; animation:dxSpinA 7s linear infinite; }
.dx-cube.c3 i{ border-color:#fff; background:radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--dx-a) 80%, #fff) 45%, var(--dx-b)); box-shadow:0 0 34px 6px color-mix(in srgb, var(--dx-a) 70%, transparent), inset 0 0 14px rgba(255,255,255,.7); }
@keyframes dxSpinA{ from{ transform:rotateX(0) rotateY(0) rotateZ(0); } to{ transform:rotateX(360deg) rotateY(360deg) rotateZ(0); } }
@keyframes dxSpinB{ from{ transform:rotateX(360deg) rotateY(0) rotateZ(0); } to{ transform:rotateX(0) rotateY(-360deg) rotateZ(360deg); } }
.dx-ring{ position:absolute; border-radius:50%; border:2px solid color-mix(in srgb, var(--dx-a) 90%, #fff); box-shadow:0 0 18px color-mix(in srgb, var(--dx-b) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--dx-a) 40%, transparent); }
.dx-ring.r1{ width:236px; height:236px; left:-118px; top:-118px; animation:dxRingA 9s linear infinite; }
.dx-ring.r2{ width:290px; height:290px; left:-145px; top:-145px; border-style:dashed; animation:dxRingB 13s linear infinite; }
.dx-ring.r3{ width:340px; height:340px; left:-170px; top:-170px; border-color:color-mix(in srgb, var(--dx-b) 90%, #fff); animation:dxRingC 18s linear infinite; }
@keyframes dxRingA{ from{ transform:rotateX(74deg) rotateZ(0); } to{ transform:rotateX(74deg) rotateZ(360deg); } }
@keyframes dxRingB{ from{ transform:rotateY(70deg) rotateZ(0); } to{ transform:rotateY(70deg) rotateZ(-360deg); } }
@keyframes dxRingC{ from{ transform:rotateX(58deg) rotateY(32deg) rotateZ(0); } to{ transform:rotateX(58deg) rotateY(32deg) rotateZ(360deg); } }
.dx-spark{ position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2); border-radius:50%; background:#fff; box-shadow:0 0 12px 3px var(--dx-a);
  transform:rotate(var(--a)) translateX(var(--r)); animation:dxSpark 4.5s ease-in-out infinite; animation-delay:var(--d); opacity:0; transition:opacity .6s; }
.dx[data-tier="1"] .dx-spark[data-min="1"], .dx[data-tier="2"] .dx-spark:is([data-min="1"],[data-min="2"]), .dx[data-tier="3"] .dx-spark{ opacity:1; }
@keyframes dxSpark{ 0%,100%{ transform:rotate(var(--a)) translateX(var(--r)) translateY(0) scale(.6); } 50%{ transform:rotate(var(--a)) translateX(calc(var(--r) + 26px)) translateY(-34px) scale(1.2); } }
.dx-wave{ position:absolute; left:50%; top:46%; width:120px; height:120px; margin:-60px; border-radius:50%; border:3px solid var(--dx-a); opacity:0; pointer-events:none; }
.dx-wave.go{ animation:dxWave .9s ease-out; }
@keyframes dxWave{ 0%{ transform:scale(.3); opacity:.95; } 100%{ transform:scale(3.2); opacity:0; } }
.dx-pedestal{ position:absolute; left:50%; bottom:6px; width:250px; height:46px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--dx-a) 65%, transparent), color-mix(in srgb, var(--dx-b) 20%, transparent) 65%, transparent); filter:blur(2px); }
.dx-pedestal::after{ content:''; position:absolute; inset:10px 36px; border-radius:50%; border:1px solid rgba(255,255,255,.35); }

/* ---------- tab switcher with sliding indicator ---------- */
.dx-tabs{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); width:100%; max-width:380px; padding:5px; margin-top:18px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.dx-tab{ appearance:none; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 6px; border:0; border-radius:15px; background:none; cursor:pointer; color:var(--cream-dim); font:inherit; transition:color .3s; }
.dx-tab b{ font-size:14px; font-weight:800; } .dx-tab small{ font-size:11.5px; font-weight:600; opacity:.85; }
.dx-tab.is-on{ color:#fff; }
.dx-tab-best{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); padding:2px 7px; border-radius:10px; white-space:nowrap; font-size:8.5px; font-weight:800; letter-spacing:.9px; color:#fff;
  background:linear-gradient(120deg,#4aa8ff,#2f6bff); border:1px solid rgba(255,255,255,.35); box-shadow:0 4px 12px -2px rgba(47,107,255,.7); pointer-events:none; }
.dx-tab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dx-ind{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / 3); border-radius:15px; transform:translateX(calc((var(--ti, 0)) * 100%));
  background:linear-gradient(135deg, var(--dx-a), var(--dx-b)); box-shadow:0 8px 26px -4px color-mix(in srgb, var(--dx-b) 80%, transparent); transition:transform .55s cubic-bezier(.34,1.4,.64,1); }
.dx[data-tier="2"] .dx-ind{ --ti:1; } .dx[data-tier="3"] .dx-ind{ --ti:2; }
.dx-hint{ margin:12px 0 0; font-size:12px; color:var(--cream-dim); letter-spacing:.4px; }

/* ---------- right: info panels (stacked, crossfade) ---------- */
.dx-info{ display:grid; min-width:0; align-items:start; }
.dx-panel{ grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(18px) scale(.985); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; padding:6px 8px 4px 14px; min-width:0; }
.dx-panel.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.dx-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dx-kicker span{ padding:4px 12px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:2.4px; color:#fff; background:linear-gradient(120deg, var(--dx-a), var(--dx-b)); }
.dx-kicker em{ font-style:normal; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--cream-dim); }
.dx-name{ font-size:clamp(30px,4vw,42px); line-height:1.08; margin:2px 0 4px; background:none !important; -webkit-text-fill-color:#fff; color:#fff; filter:none; font-variant-ligatures:none;
  text-shadow:0 0 22px color-mix(in srgb, var(--dx-a) 80%, transparent), 0 0 54px color-mix(in srgb, var(--dx-b) 50%, transparent); }
.dx-tag{ margin:0 0 14px; font-size:13.5px; color:var(--cream-dim); }
.dx-price{ display:flex; align-items:flex-end; gap:4px; line-height:1; margin-bottom:20px; }
.dx-price sup{ font-size:24px; font-weight:800; color:var(--cream); margin-bottom:22px; }
.dx-price b{ display:inline-flex; font-size:64px; font-weight:800; letter-spacing:-2px; color:#fff; -webkit-text-fill-color:#fff; background:none;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--dx-a) 80%, transparent)) drop-shadow(0 0 34px color-mix(in srgb, var(--dx-b) 55%, transparent)); }
.dx-price span.od-wrap, .dx-price b .od{ display:inline-block; height:1em; line-height:1; overflow:hidden; }
.dx-price b .od span{ display:block; height:1em; width:max-content; }
.dx-price b .od-strip{ display:block; transition:transform 1.1s cubic-bezier(.2,.9,.2,1); transition-delay:calc(var(--k) * 90ms); }
.dx-price > span{ margin:0 0 10px 6px; font-size:13px; font-weight:600; color:var(--cream-dim); }

/* BEST VALUE badge (Citizen+) */
.dx-best{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:4px 11px 4px 8px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:1.6px; color:#fff;
  background:linear-gradient(120deg,#4aa8ff,#2f6bff); border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 18px -4px rgba(47,107,255,.8), 0 0 16px rgba(74,168,255,.35); }
.dx-best .icon{ width:14px; height:14px; filter:hue-rotate(172deg) brightness(1.5); }

/* sections: Statistics and Other Perks are separate blocks */
.dx-sec{ margin:0 0 16px; padding:14px 14px 12px; border-radius:16px; background:rgba(8,10,30,.38); border:1px solid color-mix(in srgb, var(--dx-a) 26%, rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px -14px var(--dx-a); }
.dx-sec-t{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:color-mix(in srgb, var(--dx-a) 70%, #fff); background:none; -webkit-text-fill-color:currentColor; }
.dx-sec-t::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--dx-a) 45%, transparent), transparent); }
.dx-note{ margin:10px 0 0; font-size:11.5px; line-height:1.4; color:var(--cream-dim); }

/* statistics: one aligned row per stat (icon · label · value) with a relative bar underneath */
.dx-stats{ list-style:none; display:grid; grid-template-columns:1fr; gap:6px; margin:0; padding:0; }
.dx-stat{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; column-gap:12px; row-gap:6px; align-items:center; padding:9px 11px 10px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  opacity:0; transform:translateX(18px); }
.dx-panel.is-on .dx-stat{ animation:dxPerk .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i) * 70ms + .15s); }
.dx-sico, .dx-perks .dn-pico{ flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(145deg, color-mix(in srgb, var(--dx-a) 32%, transparent), rgba(255,255,255,.04)); border:1px solid color-mix(in srgb, var(--dx-a) 40%, rgba(255,255,255,.12)); }
.dx-sico .icon, .dx-perks .dn-pico .icon{ width:18px; height:18px; filter:hue-rotate(var(--ic-h, 0deg)) saturate(1.15); }
.mc-stat-ico{ width:22px; height:22px; object-fit:contain; image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)) !important; -webkit-filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)) !important; mix-blend-mode:normal !important; opacity:1 !important; display:block; }
.dx-sl{ font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--cream-dim); text-transform:uppercase; }
.dx-sv{ font-size:17px; font-weight:800; line-height:1.1; color:#fff; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:0 0 14px color-mix(in srgb, var(--dx-a) 60%, transparent); }
.dx-sv small{ font-size:12px; font-weight:700; color:var(--cream-dim); text-shadow:none; }
.dx-stat i{ grid-column:1 / -1; position:relative; display:block; height:5px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.dx-stat i::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--dx-a), var(--dx-b)); box-shadow:0 0 12px var(--dx-a);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 90ms + .25s); }
.dx-panel.is-on .dx-stat i::after{ width:calc(var(--p) * 100%); }

/* other perks: plain list, same icon tile size so rows line up with the statistics */
.dx-perks{ list-style:none; display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; }
.dx-perks li{ display:flex; align-items:center; gap:12px; min-height:34px; font-size:14px; color:var(--cream-dim); line-height:1.4; opacity:0; transform:translateX(18px); }
.dx-panel.is-on .dx-perks li{ animation:dxPerk .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i) * 70ms + .45s); }
@keyframes dxPerk{ to{ opacity:1; transform:none; } }
.dx-perks .dn-ptxt{ flex:1; min-width:0; overflow-wrap:anywhere; }
.dx-perks .dn-ptxt b{ color:#fff; }

/* CTA: magnetic, with ripple */
.dx-cta{ position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; padding:17px 20px; border-radius:18px; color:#fff; text-decoration:none; font-weight:800; font-size:15px;
  background:linear-gradient(120deg, var(--dx-a), var(--dx-b), var(--dx-a)); background-size:200% 100%; animation:dxFlow 5s linear infinite;
  border:1px solid rgba(255,255,255,.3); box-shadow:0 14px 38px -8px color-mix(in srgb, var(--dx-b) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  transform:translate(var(--mx,0), var(--my,0)); transition:transform .25s ease-out, box-shadow .25s; }
@keyframes dxFlow{ to{ background-position:200% 0; } }
.dx-cta:hover{ box-shadow:0 20px 48px -6px color-mix(in srgb, var(--dx-b) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.dx-cta-t{ flex:1; } .dx-cta-p{ padding:5px 12px; border-radius:20px; font-size:12.5px; background:rgba(0,0,0,.28); }
.dx-cta svg{ transition:transform .25s; } .dx-cta:hover svg{ transform:translateX(6px); }
.dx-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.dx-rip{ position:absolute; border-radius:50%; width:20px; height:20px; margin:-10px; background:rgba(255,255,255,.55); pointer-events:none; animation:dxRip .7s ease-out forwards; }
@keyframes dxRip{ to{ transform:scale(24); opacity:0; } }

/* no-JS: show all three ranks stacked */
.dx:not(.dx-js) .dx-info{ display:flex; flex-direction:column; gap:30px; }
.dx:not(.dx-js) .dx-panel{ opacity:1; visibility:visible; transform:none; }
.dx:not(.dx-js) .dx-perks li, .dx:not(.dx-js) .dx-stat{ opacity:1; transform:none; }
.dx:not(.dx-js) .dx-stat i::after{ width:calc(var(--p) * 100%); }

@media (max-width:900px){
  .dx{ grid-template-columns:1fr; padding:22px 16px 26px; border-radius:26px; gap:6px; }
  .dx-core{ height:290px; --k:.82; }
  .dx-panel{ padding:6px 4px; }
  .dx-stats{ grid-template-columns:1fr 1fr; }
  .dx-perks{ grid-template-columns:1fr 1fr; }
  .dx-price b{ font-size:56px; }
}
@media (max-width:620px){
  .dx-stats, .dx-perks{ grid-template-columns:1fr; }
  .dx-sec{ padding:12px 10px 10px; }
  .dx-price b{ font-size:52px; }
  .dx-best{ margin-left:0; }
  .dx-kicker{ flex-wrap:wrap; }
}
@media (max-width:420px){ .dx-sv small{ display:block; text-align:right; margin-top:2px; } }
@media (max-width:380px){ .dx-core{ --k:.7; height:260px; } .dx-sl{ font-size:11px; letter-spacing:.3px; } .dx-sv{ font-size:15px; } .dx-sv small{ font-size:11px; } .dx-stat{ column-gap:9px; } }
@media (prefers-reduced-motion: reduce){
  .dx-orbit, .dx-aura, .dx-cube, .dx-ring, .dx-spark, .dx-cta{ animation:none !important; }
  .dx-panel, .dx-layer, .dx-ind, .dx-stat i::after, .dx-price b .od-strip{ transition:none !important; }
  .dx-perks li, .dx-stat{ opacity:1; transform:none; animation:none !important; }
}

/* =====================================================================
   SHARD STORE — one-time Shard packages, shown under the monthly ranks.
   Uses the site's own Shard gem (assets/icons/diamond.svg), unfiltered.
   ===================================================================== */
.ss{ --ss-a:#8b7bff; --ss-b:#4aa8ff; max-width:1060px; margin:0 auto 56px; }
.ss-head{ margin-bottom:34px; }
.ss-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px; }
.ss-card{ grid-column:span 2; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 18px 20px; border-radius:22px; isolation:isolate;
  background:linear-gradient(165deg, rgba(150,135,255,.09), rgba(14,18,44,.88) 46%, rgba(8,10,28,.94));
  border:1px solid rgba(160,150,255,.2); box-shadow:0 18px 44px -18px rgba(2,3,18,.85), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s; }
.ss-card:nth-child(4){ grid-column:2 / span 2; }
.ss-card:nth-child(5){ grid-column:4 / span 2; }
.ss-card::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.7; transition:opacity .28s;
  background:radial-gradient(260px 180px at 50% 22%, rgba(120,110,255,.2), transparent 70%); }
.ss-card:hover, .ss-card:focus-within{ transform:translateY(-4px); border-color:rgba(130,170,255,.5);
  box-shadow:0 26px 54px -18px rgba(2,3,18,.9), 0 0 36px -10px rgba(110,130,255,.55), inset 0 1px 0 rgba(255,255,255,.1); }
.ss-card:hover::before, .ss-card:focus-within::before{ opacity:1; }

.ss-label{ display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#d9d3ff;
  background:rgba(139,123,255,.16); border:1px solid rgba(160,150,255,.38); }
.ss-label-plain{ color:var(--cream-dim); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.ss-label .icon{ width:13px; height:13px; }
.ss-label-pop{ color:#fff; background:linear-gradient(120deg,#8b5cf6,#2f6bff); border-color:rgba(255,255,255,.35); box-shadow:0 6px 18px -4px rgba(99,102,255,.8), 0 0 16px rgba(139,123,255,.35); }

.ss-art{ position:relative; display:grid; place-items:center; width:112px; height:112px; margin:14px 0 8px; }
.ss-art::before{ content:''; position:absolute; inset:6px; border-radius:50%; background:radial-gradient(closest-side, rgba(130,120,255,.38), rgba(74,168,255,.12) 62%, transparent); transition:transform .35s ease, opacity .35s; }
.ss-img{ position:relative; width:84px; height:84px; object-fit:contain; image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; filter:drop-shadow(0 6px 16px rgba(168,85,247,.6)) drop-shadow(0 0 8px rgba(139,92,246,.45)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.shard-icon{ width:20px; height:20px; vertical-align:-0.18em; object-fit:contain; image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; filter:drop-shadow(0 2px 6px rgba(168,85,247,.6)) !important; display:inline-block; }
.ss-card:hover .ss-img, .ss-card:focus-within .ss-img{ transform:translateY(-3px) scale(1.07); }
.ss-card:hover .ss-art::before{ transform:scale(1.12); }

.ss-amt{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.ss-amt b{ font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.5px; color:#fff; -webkit-text-fill-color:#fff; background:none; font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(139,123,255,.55); }
.ss-amt span{ font-size:11.5px; font-weight:800; letter-spacing:3px; color:#b7c4ff; }
.ss-price{ margin:14px 0 16px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-variant-numeric:tabular-nums; position:relative; }
.ss-price small{ display:block; margin-top:1px; font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--cream-dim); }
.ss-old-price{ position:relative; font-size:22px; font-weight:800; color:rgba(255,255,255,0.85); display:inline-block; vertical-align:middle; transition:transform .55s cubic-bezier(.2,.8,.2,1), font-size .55s cubic-bezier(.2,.8,.2,1), color .55s ease, opacity .55s ease; }
.ss-old-price::after{ content:''; position:absolute; left:-4px; right:-4px; top:50%; height:2.6px; background:#f43f5e; box-shadow:0 0 10px rgba(244,63,94,0.95); border-radius:2px; transform:scaleX(0); transform-origin:left center; transition:transform .42s cubic-bezier(.2,.8,.2,1); }
.ss-curr-price{ display:inline-block; vertical-align:middle; opacity:0; transform:translateY(14px) scale(0.8); font-size:26px; font-weight:800; color:#fff; transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }

/* Activated state when Shard Store is scrolled into view */
.ss-card.ss-animated .ss-old-price::after{ transform:scaleX(1); transition-delay:.25s; }
.ss-card.ss-animated .ss-old-price{ transform:translateY(-5px) scale(0.8); font-size:15px; color:rgba(255,255,255,0.45); transition-delay:.48s; }
.ss-card.ss-animated .ss-curr-price{ opacity:1; transform:translateY(0) scale(1); filter:drop-shadow(0 0 12px rgba(139,92,246,0.75)); transition-delay:.48s; }
.ss-card:hover .ss-curr-price{ transform:scale(1.06); filter:drop-shadow(0 0 14px rgba(96,165,250,0.7)); transition:transform .25s ease, filter .25s ease; }

@media (prefers-reduced-motion: reduce){
  .ss-old-price::after{ transform:scaleX(1); transition:none; }
  .ss-old-price{ transform:none; font-size:15px; color:rgba(255,255,255,0.45); transition:none; }
  .ss-curr-price{ opacity:1; transform:none; transition:none; }
}

/* Member Default Rank Card */
.member-rank-wrap{ margin:32px 0 0; padding:24px 26px; border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); box-shadow:0 12px 32px -10px rgba(0,0,0,.5); }
.member-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.member-badge-group{ display:flex; align-items:center; gap:12px; }
.member-tag{ font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.08); color:var(--cream-dim); border:1px solid rgba(255,255,255,.12); }
.member-title{ font-size:22px; font-weight:800; color:#fff; margin:0; }
.member-free-pill{ font-size:12px; font-weight:800; letter-spacing:.5px; color:#4ade80; background:rgba(74,222,128,.14); border:1px solid rgba(74,222,128,.3); padding:5px 12px; border-radius:20px; }
.member-stats{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:0; padding:0; }
@media (max-width:980px){
  .member-stats{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:540px){
  .member-stats{ grid-template-columns:1fr; }
}
.member-stat{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.member-stat .dx-sico{ width:36px; height:36px; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.member-stat-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.member-stat-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--cream-dim); }
.member-stat-val{ font-size:18px; font-weight:800; color:#fff; }
.member-note{ margin:16px 0 0; font-size:12px; line-height:1.5; color:var(--cream-dim); display:flex; align-items:center; gap:8px; }
.member-note svg{ flex-shrink:0; color:#4ade80; }

@media (max-width:768px){
  .member-stats{ grid-template-columns:1fr; }
}
.ss-btn{ margin-top:auto; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 14px; border-radius:14px; text-decoration:none;
  background:linear-gradient(120deg,#6d5cf0,#3a7bff); border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 26px -10px rgba(80,100,255,.8), inset 0 1px 0 rgba(255,255,255,.28); }
.ss-btn svg{ transition:transform .25s; } .ss-btn:hover svg{ transform:translateX(4px); }
.ss-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* the 2,500-Shard pack stands out */
.ss-card.is-popular{ border-color:rgba(150,140,255,.65); background:linear-gradient(165deg, rgba(139,92,246,.2), rgba(16,20,52,.9) 46%, rgba(8,10,30,.95));
  box-shadow:0 22px 56px -18px rgba(2,3,18,.9), 0 0 44px -12px rgba(139,92,246,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.ss-card.is-popular .ss-btn{ background:linear-gradient(120deg,#8b5cf6,#2f6bff); }
.ss-note{ max-width:700px; margin:26px auto 0; text-align:center; font-size:12.5px; line-height:1.55; color:var(--cream-dim); }
.ss-note strong{ color:var(--cream); }

@media (max-width:900px){
  .ss-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
  .ss-card:nth-child(4){ grid-column:span 2; }
  .ss-card:nth-child(5){ grid-column:2 / span 2; }
}
@media (max-width:560px){
  .ss-grid{ grid-template-columns:1fr; gap:14px; }
  .ss-card, .ss-card:nth-child(4), .ss-card:nth-child(5){ grid-column:auto; }
  .ss-card{ display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-areas:"art label" "art amt" "art price" "btn btn"; column-gap:14px; align-items:center; justify-items:start; text-align:left; padding:18px 16px 16px; }
  .ss-label{ grid-area:label; }
  .ss-art{ grid-area:art; width:84px; height:84px; margin:0; } .ss-img{ width:64px; height:64px; }
  .ss-amt{ grid-area:amt; align-items:flex-start; margin-top:6px; } .ss-amt b{ font-size:30px; }
  .ss-price{ grid-area:price; margin:6px 0 0; font-size:21px; } .ss-price small{ display:inline; margin-left:8px; }
  .ss-btn{ grid-area:btn; margin-top:14px; }
}
@media (prefers-reduced-motion: reduce){
  .ss-card, .ss-img, .ss-art::before, .ss-btn svg{ transition:none !important; }
  .ss-card:hover, .ss-card:focus-within, .ss-card:hover .ss-img, .ss-card:focus-within .ss-img{ transform:none; }
}