/* Crown shop and invite pages. */

/* ---------- Shop ---------- */

.shop__notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--info) 10%, var(--bg-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 28%, transparent);
}
.shop__notice-icon { display: grid; color: var(--info); margin-top: 1px; }
.shop__notice p { color: var(--text-2); margin-top: 2px; }
.shop__notice a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.shop__notice a:hover { color: var(--accent); }

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 16px;
}
.pack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 18px 20px;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  text-align: center;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.pack--loading { height: 320px; }
.pack.is-tagged { box-shadow: var(--shadow-1), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.pack:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.42), inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.pack__tag {
  position: absolute;
  top: -10px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The art reaches up to the card's top edge and clips there, so dropped coins appear from that edge. */
.pack__visual { width: 100%; margin-top: -18px; padding-top: 18px; overflow: clip; }
.pack__art { display: block; width: 100%; height: auto; overflow: visible; }
.pack__glow { opacity: 0.75; transition: opacity 300ms var(--ease-out); }

/* ---------- Entrance: the coins fall onto their stacks ----------
   Per coin (set by armDrop): --from how far above it starts, --drift and --tilt a little wobble,
   --dur and --delay. The fall takes the first 62%, accelerating like a dropped object; the rest is
   the squash on impact and a short rebound. Scaling happens around the coin's bottom edge. */
.pack__coin-drop, .pack__ground, .pack__stack { transform-box: fill-box; transform-origin: 50% 100%; }
.pack__ground { transform-origin: 50% 50%; }
.pack__visual.is-dropping .pack__coin-drop { animation: coin-fall var(--dur) linear var(--delay) both; }
.pack__visual.is-dropping .pack__ground { animation: ground-in var(--ground-dur) var(--ease-out) var(--ground-delay) both; }
@keyframes coin-fall {
  0% {
    transform: translate(var(--drift), var(--from)) rotate(var(--tilt)) scale(1, 1);
    animation-timing-function: cubic-bezier(0.45, 0, 1, 0.55);
  }
  62% { transform: translate(0, 0) rotate(0deg) scale(1.1, 0.7); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  77% { transform: translate(0, -4px) rotate(0deg) scale(0.96, 1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  89% { transform: translate(0, 0) rotate(0deg) scale(1.03, 0.95); animation-timing-function: var(--ease-out); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
}
/* The shadow under the hoard spreads as the coins pile up. */
@keyframes ground-in { from { transform: scale(0.3, 0.5); opacity: 0; } }

/* Last coin down: the figure pops and the glow flares once. */
.pack.is-full .pack__amount strong { animation: amount-pop 460ms var(--ease-spring); }
.pack.is-full .pack__glow { animation: glow-flare 800ms var(--ease-out); }
@keyframes amount-pop { 40% { transform: scale(1.14); color: var(--accent); } }
@keyframes glow-flare { 30% { opacity: 1; } }

/* ---------- Hover: the card lifts, the glow brightens and a wave runs across the stacks ---------- */
.pack:hover .pack__glow { opacity: 1; }
.pack:hover .pack__stack { animation: stack-hop 560ms var(--ease-out) calc(var(--s, 0) * 60ms); }
@keyframes stack-hop {
  35% { transform: translateY(-9px) scale(1, 1.03); }
  70% { transform: translateY(1px) scale(1.02, 0.98); }
}
.pack__name { font-size: 15px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.pack__amount { display: flex; align-items: center; gap: 8px; }
.pack__amount strong { display: inline-block; font-family: var(--font-display); font-size: 26px; font-weight: 900; text-align: left; }
.pack__coin .icon, .pack__coin svg { width: 24px; height: 24px; }
.pack__bonus {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--win) 16%, transparent);
  color: var(--win);
  font-size: 12px;
  font-weight: 800;
}
.pack__bonus.is-empty { background: var(--bg-3); color: var(--text-3); }
.pack__buy { margin-top: 10px; }
.shop__fine { margin-top: 18px; color: var(--text-3); font-size: 12.5px; text-align: center; }

/* ---------- Invite ---------- */

.invite__body { display: grid; gap: 16px; max-width: 820px; }
.invite__skeleton { height: 220px; }
.invite__hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(420px 200px at 0% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg-1);
}
.invite__reward { display: grid; justify-items: center; padding: 8px 16px; }
.invite__reward strong { font-family: var(--font-display); font-size: 40px; font-weight: 900; color: var(--accent); line-height: 1; }
.invite__reward span { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.invite__link { display: grid; gap: 8px; min-width: 0; }
.invite__link input { width: 100%; }
.invite__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.invite__earned { grid-column: 1 / -1; color: var(--text-2); font-size: 13.5px; padding-top: 14px; border-top: 1px solid var(--line); }
.invite__earned strong { color: var(--text); }

.invite__steps, .invite__list { padding: 22px 24px; display: grid; gap: 16px; }
.invite__steps h2, .invite__list h2 { font-size: 17px; font-weight: 800; }
.invite__steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.invite__steps li { display: flex; gap: 12px; align-items: flex-start; }
.invite__steps p { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.invite__step {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--accent);
  font-weight: 800;
}

.invite__friends { display: grid; gap: 2px; }
.invite__friend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: var(--radius-m);
}
.invite__friend:hover { background: var(--bg-2); }
.invite__friend strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite__friend div > span { color: var(--text-3); font-size: 12px; }
.invite__checks { display: flex; gap: 10px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.invite__checks > span { display: inline-flex; align-items: center; gap: 4px; }
.invite__checks .is-done { color: var(--win); }
.invite__status { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.invite__status.is-ok { background: color-mix(in srgb, var(--win) 16%, transparent); color: var(--win); }
.invite__status.is-wait { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.invite__status.is-off { background: var(--bg-3); color: var(--text-3); }

.auth__invited {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-2);
  font-size: 13.5px;
  animation: rise-in 300ms var(--ease-out);
}
.auth__invited > span:first-child { display: grid; color: var(--accent); }
.auth__invited strong { color: var(--text); }

@media (max-width: 700px) {
  .invite__hero { grid-template-columns: minmax(0, 1fr); }
  .invite__friend { grid-template-columns: auto minmax(0, 1fr) auto; }
  .invite__checks { grid-column: 2 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pack__visual.is-dropping .pack__coin-drop, .pack__visual.is-dropping .pack__ground,
  .pack:hover .pack__stack, .pack.is-full .pack__amount strong, .pack.is-full .pack__glow { animation: none; }
}

/* ---------- Buying ---------- */

.modal--buy { width: min(480px, 100%); }
.buy { display: grid; gap: 14px; }
.buy__summary {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 6px;
  border-radius: var(--radius-m);
  background: var(--bg-2);
}
.buy__summary strong { display: block; font-size: 15px; }
.buy__summary span { color: var(--text-2); font-size: 13px; }
.buy__secure { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.buy .check a, .shop__fine a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Purchases and limits (settings) ---------- */

.spend { display: grid; gap: 6px; }
.spend__head { display: flex; justify-content: space-between; color: var(--text-2); font-size: 13px; }
.spend__head strong { color: var(--text); }
.spend__bar { height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.spend__bar span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); transition: width 400ms var(--ease-out); }
.purchases { display: grid; gap: 2px; }
.purchase { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px; border-radius: var(--radius-m); }
.purchase:hover { background: var(--bg-2); }
.purchase div > span { display: block; color: var(--text-3); font-size: 12px; }
.invite__status.is-bad { background: color-mix(in srgb, var(--loss) 16%, transparent); color: var(--loss); }

/* ---------- Currency switch ---------- */

.shop__head { flex-wrap: wrap; }
.shop__head > div:not(.shop__currency) { flex: 1 1 240px; min-width: 0; }
.shop__currency { margin-left: auto; flex: none; }
.shop__currency button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 13px; }
.shop__currency-symbol { color: var(--accent); font-weight: 800; }
.shop__currency button:not([aria-selected="true"]) .shop__currency-symbol { color: inherit; }
@media (max-width: 640px) {
  .shop__currency { margin-left: 0; width: 100%; }
}