/* Shards on the site: Daily Shard row, Item Bag, header bag, the pop-ups and the combine
   animation. Sits on ez-final.css (.e-ov / .e-md / .e-x / .e-btn). ez-final.css turns every
   animation off under prefers-reduced-motion, so each element's plain style here is its
   FINISHED look: with no animation the combine pop-up is simply the key and the text. */

/* ---------- Header bag ---------- */
.sh-bagbtn { position: relative; }
.sh-bagn {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  font-size: .64rem; font-weight: 800; line-height: 1; color: #fff; background: var(--grad); box-shadow: 0 0 0 2px rgba(12, 10, 26, .95);
}
.sh-bagn.gold { color: #2a1a00; background: var(--gold); }

/* ---------- Daily Shard row ---------- */
.sh-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; text-align: left;
  border: 1px solid var(--bd); background: rgba(124, 60, 255, .1);
}
.tier-card .sh-row { margin-top: 1.25rem; }
.sh-row-art { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 8px rgba(124, 60, 255, .7)); }
.sh-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sh-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; }
.sh-row-sub { font-size: .8rem; color: var(--t2); }
.sh-row-sub b { color: var(--t); white-space: nowrap; }
.sh-row .e-btn { flex: none; }
.sh-start { margin: 0; flex: none; }
.sh-dots { display: inline-flex; gap: 5px; }
.sh-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bdh); background: rgba(10, 8, 22, .7); }
.sh-dots i.on { border-color: transparent; background: linear-gradient(135deg, var(--pb), var(--c)); box-shadow: 0 0 8px rgba(34, 211, 238, .7); }

/* The one line after a free key is issued */
.sh-line { display: flex; justify-content: center; margin: .9rem 0 0; }
.sh-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--c); text-decoration: underline; text-underline-offset: 3px;
}
.sh-link svg { width: 16px; height: 16px; flex: none; }
.sh-link[disabled] { opacity: .6; cursor: default; }

/* Premium product page, under the price */
.sh-try { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--gold); }
a.sh-try:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-try svg { width: 16px; height: 16px; flex: none; }
.ez-btn-gold { color: var(--gold); border-color: rgba(255, 207, 110, .5); background: rgba(255, 207, 110, .08); }
.ez-btn-gold:hover { border-color: var(--gold); background: rgba(255, 207, 110, .14); }

/* ---------- Item Bag ---------- */
.sh-bag { scroll-margin-top: 84px; }
.sh-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sh-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 104px; padding: 8px 4px; border-radius: 13px;
  border: 1px solid var(--bd); background: rgba(20, 18, 40, .55); color: var(--t); font: inherit; text-align: center;
}
.sh-slot-empty { border-style: dashed; border-color: rgba(139, 92, 246, .32); background: none; }
.sh-slot-art { width: 42px; height: 42px; filter: drop-shadow(0 0 8px rgba(124, 60, 255, .6)); }
.sh-slot-name { font-size: .74rem; font-weight: 700; line-height: 1.2; }
.sh-slot-sub { font-size: .7rem; color: var(--t2); }
.sh-slot-key { cursor: pointer; border-color: rgba(255, 207, 110, .4); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sh-slot-key .sh-slot-art { filter: drop-shadow(0 0 8px rgba(255, 207, 110, .55)); }
.sh-slot-key:hover { border-color: var(--gold); transform: translateY(-2px); }
.sh-slot-key[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 207, 110, .1); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(255, 207, 110, .3); }
.sh-bag-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.sh-bag-hint { font-size: .84rem; color: var(--t2); }

/* ---------- Pop-ups, shared ---------- */
.sh-ov { z-index: 112; }
.sh-wide { width: 100%; }
.sh-later { display: block; margin: 8px auto 0; padding: 6px 10px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .82rem; color: var(--t2); }
.sh-later:hover { color: var(--t); }
.sh-hl {
  margin: 0; font-size: clamp(2rem, 10.8vw, 4.3rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase;
  background: linear-gradient(95deg, #fff 10%, #d6c4ff 45%, var(--c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Assign pop-up ---------- */
.sh-as { width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; }
.sh-as-art { display: block; width: 52px; height: 52px; margin: 0 auto; filter: drop-shadow(0 0 12px rgba(255, 207, 110, .55)); }
.sh-as h3 { margin: 8px 0 4px; }
.sh-as-p { margin: 0; color: var(--t2); font-size: .9rem; overflow-wrap: anywhere; }
.sh-as-p b { color: var(--t); }
.sh-as .e-btn { margin-top: 12px; }
.sh-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; }
.sh-pick-row {
  width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--bd); background: var(--gl2); color: var(--t); font: inherit; font-size: .9rem; font-weight: 700; text-align: left; transition: border-color .2s, background .2s;
}
.sh-pick-row:hover { border-color: var(--bdh); background: rgba(124, 60, 255, .16); }
.sh-warn {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .86rem; font-weight: 600; color: var(--gold);
  border: 1px solid rgba(255, 207, 110, .35); background: rgba(255, 207, 110, .08);
}
.sh-er { margin: 10px 0 0; font-size: .84rem; color: var(--red); }
.sh-keybox { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--bd); background: rgba(4, 4, 10, .75); text-align: left; }
.sh-keybox code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; color: var(--t); }
.sh-as .sh-keybox .e-btn { margin-top: 0; flex: none; }

/* ---------- WANT PREMIUM FOR FREE? ---------- */
.sh-md {
  position: relative; width: min(600px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 30px 16px; text-align: center;
  border: 1px solid var(--bdh); border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 80px rgba(124, 60, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  background: radial-gradient(90% 60% at 50% 0, rgba(124, 60, 255, .38), transparent 70%), radial-gradient(70% 45% at 100% 100%, rgba(34, 211, 238, .13), transparent 70%), rgba(12, 10, 26, .97);
  animation: sh-rise .4s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes sh-rise { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.sh-hero { display: flex; align-items: center; justify-content: center; gap: 12px; height: 74px; }
.sh-hero-k { width: 66px; height: 66px; filter: drop-shadow(0 0 16px rgba(255, 207, 110, .65)); animation: sh-bob 3.4s ease-in-out infinite; }
.sh-hero-s { width: 28px; height: 28px; opacity: .9; filter: drop-shadow(0 0 8px rgba(124, 60, 255, .85)); animation: sh-bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes sh-bob { 50% { transform: translateY(-6px); } }
.sh-lead { margin: 10px 0 0; color: var(--t2); font-size: .98rem; }
.sh-promo-dots { margin-top: 14px; }
.sh-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-steps li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px;
  border: 1px solid var(--bd); background: rgba(20, 18, 40, .6); font-size: .84rem; font-weight: 700; line-height: 1.25;
}
.sh-n { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: .8rem; font-weight: 800; color: #fff; background: var(--grad); }
.sh-promo form { margin: 0; }
.sh-go { width: 100%; margin-top: 16px; padding: 14px 20px; font-size: 1.04rem; border-radius: 14px; }

/* ---------- Combine pop-up ----------
   0.0-0.9s the five shards pop in around the ring. 0.9-1.9s they spiral in, faster and faster.
   1.9s flash and shockwave. 2.0s the key lands. 2.5s the words. */
.sh-combine { z-index: 115; overflow: hidden auto; background: rgba(2, 2, 8, .86); }
.sh-cb { width: min(420px, 100%); text-align: center; }
.sh-stage { --r: min(116px, 30vw); position: relative; width: min(300px, 74vw); height: min(300px, 74vw); margin: 0 auto; }
.sh-stage > * { position: absolute; left: 50%; top: 50%; }
.sh-bigkey {
  width: 150px; height: 150px; margin: -75px 0 0 -75px; filter: drop-shadow(0 0 26px rgba(255, 207, 110, .8));
  animation: sh-key-in .8s 2s cubic-bezier(.2, 1.5, .4, 1) both, sh-key-float 3.6s 2.8s ease-in-out infinite;
}
@keyframes sh-key-in { from { opacity: 0; transform: scale(.1) rotate(-200deg); } }
@keyframes sh-key-float { 50% { transform: translateY(-8px) rotate(3deg); } }
.sh-rays {
  width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(rgba(255, 207, 110, .28) 0 9deg, transparent 9deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: sh-rays-in .7s 2s ease-out both, sh-spin 22s 2s linear infinite;
}
@keyframes sh-rays-in { from { opacity: 0; scale: .3; } }
@keyframes sh-spin { to { rotate: 360deg; } }
/* The orbit carries all five together so they close in evenly. Each shard pops in on its
   own beat inside it, and they all finish at 1.95s. */
.sh-orb { width: 0; height: 0; animation: sh-orbit 1.95s cubic-bezier(.55, 0, .8, .55) forwards; }
@keyframes sh-orbit {
  0% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); }
  30% { transform: rotate(calc(var(--a) + 24deg)) translateY(calc(var(--r) * -1)); }
  100% { transform: rotate(calc(var(--a) + 640deg)) translateY(0); }
}
.sh-fly {
  position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0; filter: drop-shadow(0 0 12px rgba(124, 60, 255, .95));
  animation: sh-fly calc(1.95s - var(--i) * 90ms) calc(var(--i) * 90ms) linear forwards;
}
@keyframes sh-fly {
  0% { opacity: 0; scale: 0; }
  14% { opacity: 1; scale: 1.25; }
  24% { opacity: 1; scale: 1; }
  90% { opacity: 1; scale: .6; }
  100% { opacity: 0; scale: .2; }
}
.sh-flash {
  width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0, rgba(255, 233, 180, .9) 26%, rgba(168, 85, 247, .5) 52%, transparent 72%);
  animation: sh-flash .75s 1.92s ease-out both;
}
@keyframes sh-flash { 0% { opacity: 0; transform: scale(.2); } 22% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.7); } }
.sh-wave {
  width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; opacity: 0; border: 3px solid var(--gold);
  animation: sh-wave .9s 1.96s ease-out forwards;
}
@keyframes sh-wave { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
.sh-spark {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; background: var(--gold); box-shadow: 0 0 10px var(--gold);
  animation: sh-spark .95s calc(1.96s + var(--i) * 12ms) cubic-bezier(.1, .7, .3, 1) forwards;
}
.sh-spark:nth-of-type(3n) { background: var(--c); box-shadow: 0 0 10px var(--c); }
@keyframes sh-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.3); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.2); }
}
.sh-cb-txt { animation: sh-rise .55s 2.5s ease-out both; }
.sh-cb-txt p { margin: 8px 0 14px; color: var(--t2); font-size: .95rem; }
.sh-tag {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: var(--gold); background: rgba(255, 207, 110, .1); border: 1px solid rgba(255, 207, 110, .35);
}
.sh-hl-cb { font-size: clamp(2rem, 9vw, 3rem); background-image: linear-gradient(95deg, #fff4cf, var(--gold) 55%, #f7a54a); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  /* The bag is one icon more than the header row holds on a phone. */
  .sh-au { gap: 2px; }
  .sh-au .e-util { width: 30px; padding: 0; justify-content: center; }
  .sh-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-md { padding: 18px 18px 10px; }
  .sh-hero { height: 60px; gap: 8px; }
  .sh-hero-k { width: 54px; height: 54px; }
  .sh-hero-s { width: 22px; height: 22px; }
  .sh-lead { font-size: .9rem; }
  .sh-steps { grid-template-columns: 1fr; gap: 6px; margin-top: 14px; }
  .sh-steps li { flex-direction: row; gap: 10px; padding: 8px 10px; text-align: left; }
  .sh-bag-act { flex-wrap: wrap; }
  .sh-bag-act .e-btn { width: 100%; }
}
@media (max-width: 420px) {
  .sh-row { flex-wrap: wrap; }
  .sh-row-main { flex-basis: calc(100% - 46px); }
  .sh-row .e-btn, .sh-start { width: 100%; }
}
@media (max-height: 640px) { .sh-hero, .sh-stage .sh-rays { display: none; } .sh-stage { height: 190px; } }