/* My Packs page and pack-opening animation. Loaded inside the store theme via the app proxy. */
.mp-page, .mp-stage {
  --mp-ink: #14141a;
  --mp-muted: #6b6b76;
  --mp-surface: #ffffff;
  --mp-line: #e4e4ea;
  --mp-base: #9aa0a6;
  --mp-uncommon: #2fa36b;
  --mp-rare: #2f6fe0;
  --mp-epic: #8b46e0;
  --mp-chase: #e0a21a;
  --mp-legendary: #e8630a;
}
/* The theme's root font size is 10px, so set a real base size and use the theme's heading font. */
.mp-page, .mp-stage { font-size: 16px; --mp-heading: var(--font-heading-family, "Oswald"), "Oswald", "Arial Narrow", sans-serif; }
.mp-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  color: var(--mp-ink);
  font-family: inherit;
}
.mp-page h1 { margin: 0 0 4px; }
.mp-sub { color: var(--mp-muted); margin: 0 0 24px; }
.mp-section-title { margin: 32px 0 12px; font-size: 1.1em; }
.mp-empty { color: var(--mp-muted); }
.mp-error { color: #b42318; }

.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

/* Unopened pack tile: a crimped foil pack in Poke-Collect colors. Sizes follow the tile width. */
.mp-pack {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
  font-family: inherit;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 42%, rgba(255, 210, 120, .28), transparent 60%),
    linear-gradient(165deg, #2a0f4f 0%, #120a2e 48%, #3b0d1c 100%);
  box-shadow: 0 10px 24px rgba(20, 20, 26, .28), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .2s ease;
}
/* Crimped seals top and bottom */
.mp-pack::before, .mp-pack::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7%; z-index: 3;
  background:
    linear-gradient(90deg, #8d8f99, #f4f4f8 20%, #a9abb5 40%, #ffffff 60%, #9a9ca6 80%, #e9e9ef),
    #ccc;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.55) 3px 6px);
          mask: repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.55) 3px 6px);
}
.mp-pack::before { top: 0; }
.mp-pack::after { bottom: 0; }
/* Holographic foil that sweeps across the pack */
.mp-pack-foil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) -200% 0 / 300% 100% no-repeat,
    conic-gradient(from 200deg at 50% 45%, #ff4d6d33, #ffd16633, #4dd4ff33, #b06bff33, #ff4d6d33);
  animation: mp-shine 3.5s ease-in-out infinite;
}
.mp-pack-brand {
  position: absolute; z-index: 2; left: 0; right: 0; top: 11%;
  font-size: 7.2cqw; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: #f2f2f7; text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.mp-pack-emblem {
  position: absolute; z-index: 2; left: 50%; top: 40%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: conic-gradient(from 0deg, #fff6c9, #f2c94c, #b8860b, #ffe9a3, #f2c94c, #fff6c9);
  filter: drop-shadow(0 0 6px rgba(242, 201, 76, .8));
}
.mp-pack-series {
  position: absolute; z-index: 2; left: 8%; right: 8%; top: 61%;
  font-size: 9.5cqw; line-height: 1.05; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff7d6 0%, #f2c94c 55%, #c48a12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.mp-pack-label {
  position: absolute; z-index: 2; left: 50%; bottom: 11%; transform: translateX(-50%);
  padding: 1.6cqw 5cqw; border-radius: 999px; white-space: nowrap;
  font-size: 5.6cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
}
.mp-stage .mp-pack-label { display: none; }
.mp-pack:hover, .mp-pack:focus-visible { transform: translateY(-4px) rotate(-1deg); }
.mp-pack:focus-visible { outline: 3px solid var(--mp-ink); outline-offset: 3px; }
@keyframes mp-shine { 0%, 60% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }

/* Revealed card tile */
.mp-card {
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  background: var(--mp-surface);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.mp-card img { width: 100%; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 8px; background: #f4f4f7; }
.mp-card-title { font-weight: 600; font-size: .9em; line-height: 1.25; }
.mp-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: .8em; color: var(--mp-muted); }
.mp-tier { font-weight: 700; text-transform: uppercase; font-size: .7em; letter-spacing: .06em; }
.mp-tier[data-tier="base"] { color: var(--mp-base); }
.mp-tier[data-tier="uncommon"] { color: var(--mp-uncommon); }
.mp-tier[data-tier="rare"] { color: var(--mp-rare); }
.mp-tier[data-tier="epic"] { color: var(--mp-epic); }
.mp-tier[data-tier="chase"] { color: var(--mp-chase); }
.mp-tier[data-tier="poke"] { color: #e3350d; }
.mp-tier[data-tier="great"] { color: var(--mp-rare); }
.mp-tier[data-tier="ultra"] { color: var(--mp-chase); }
.mp-tier[data-tier="master"] { color: var(--mp-epic); }
.mp-tier[data-tier="legendary"] { color: var(--mp-legendary); }

/* Opening stage */
.mp-stage {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #2b2140 0%, #0b0a12 70%);
  overflow: hidden;
}
.mp-stage-inner { position: relative; width: min(300px, 70vw, 42vh); aspect-ratio: 5 / 7; perspective: 1200px; }
/* Opening: the pack (body + a top strip built from slices) wraps the card, which starts small and low. */
.mp-open-pack {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2;
}
.mp-open-pack.mp-shaking { animation: mp-shake .6s ease-in-out infinite; }
.mp-open-body, .mp-open-slice { position: absolute; top: 0; left: 0; }
.mp-open-body { width: 100%; height: 100%; }
.mp-open-face { position: absolute; top: 0; left: 0; overflow: hidden; }
.mp-open-plain { background: linear-gradient(165deg, #2a0f4f 0%, #120a2e 48%, #3b0d1c 100%); }
.mp-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-open-slice .mp-edge { opacity: 0; }
/* Shadow just under the tear, where the pack opens up */
.mp-open-shade {
  position: absolute; left: 0; top: 0; width: 0; height: 16%; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .45) 55%, transparent 80%);
}
.mp-fleck {
  position: absolute; width: 3px; height: 2px; border-radius: 1px; z-index: 5; pointer-events: none;
  animation: mp-fleck .85s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes mp-fleck {
  40% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) / 2)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.6), 60px) rotate(var(--r)); opacity: 0; }
}
@keyframes mp-shake {
  0%, 100% { transform: translateX(-50%) rotate(0); } 20% { transform: translateX(-50%) rotate(-3deg); }
  40% { transform: translateX(-50%) rotate(3deg); } 60% { transform: translateX(-50%) rotate(-2deg); } 80% { transform: translateX(-50%) rotate(2deg); }
}

.mp-reveal-card {
  position: absolute; inset: 0; z-index: 1; border-radius: 4.5% / 3.2%; overflow: hidden;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 18px 40px rgba(0,0,0,.5);
}
.mp-reveal-card img { width: 100%; height: 100%; object-fit: contain; }
.mp-reveal-card strong { padding: 16px; text-align: center; color: #14141a; }
/* Holo sweep across big pulls */
.mp-reveal-card.mp-holo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, rgba(160,220,255,.4) 52%, transparent 65%) -200% 0 / 300% 100% no-repeat;
  animation: mp-shine 1.6s .2s ease-in-out 2;
}
.mp-glow { position: absolute; inset: -18%; border-radius: 50%; filter: blur(30px); opacity: 0; z-index: 0; }
.mp-glow.mp-peek { opacity: .4; transform: translateY(-38%) scale(.55); transition: opacity .5s, transform .5s; }
.mp-glow.mp-on { animation: mp-glow 1.6s ease-out forwards; }
@keyframes mp-glow { 0% { opacity: .4; transform: translateY(-38%) scale(.55); } 40% { opacity: .95; } 100% { opacity: .6; transform: scale(1); } }

.mp-result {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px);
  text-align: center; color: #fff; opacity: 0; transition: opacity .4s .5s;
}
.mp-result.mp-show { opacity: 1; }
.mp-result h2 { margin: 6px 0 4px; font-size: 1.2em; color: #fff; }
.mp-result p { margin: 0 0 14px; color: #c9c6d8; font-size: .9em; }
.mp-actions { display: flex; gap: 8px; justify-content: center; }
.mp-btn {
  appearance: none; border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: #fff; color: #14141a;
}
.mp-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.mp-skip { position: absolute; top: 16px; right: 16px; }

.mp-confetti { position: absolute; width: 8px; height: 14px; top: -20px; border-radius: 2px; animation: mp-fall linear forwards; }
@keyframes mp-fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  .mp-pack-foil, .mp-open-pack.mp-shaking, .mp-reveal-card.mp-holo::after { animation: none; }
  .mp-confetti { display: none; }
}

/* Pack product artwork in place of the CSS foil pack. Product photos are square bag mockups on a
   light background, so the tile is clipped to the bag itself and the photo backdrop disappears. */
.mp-pack-art { background: transparent; box-shadow: none; overflow: visible; }
.mp-pack-art::before, .mp-pack-art::after, .mp-pack-art .mp-pack-foil { display: none; }
.mp-pack-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(4.2% 16.5% 4.2% 16.5% round 1.5%);
  transform: scale(1.09);
  filter: drop-shadow(0 10px 18px rgba(20, 20, 26, .35));
}
.mp-pack-art .mp-pack-label { bottom: -2%; color: #14141a; background: #fff; border-color: rgba(20,20,26,.15); box-shadow: 0 2px 8px rgba(0,0,0,.15); }


/* "Open More Packs?" shelf: a big feature panel under the pulled cards */
.mp-more {
  margin: 44px 0 8px; padding: clamp(22px, 4vw, 40px); border-radius: 22px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, rgba(227,53,13,.35), transparent 55%), linear-gradient(135deg, #14141a 0%, #241030 60%, #3b0d1c 100%);
  box-shadow: 0 18px 40px rgba(20,20,26,.25);
}
.mp-more-title { margin: 0 0 6px; font-size: clamp(1.8em, 4.5vw, 2.8em); line-height: 1.05; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.mp-more-sub { margin: 0 0 26px; color: #d6d2e4; font-size: clamp(1em, 2vw, 1.15em); }
.mp-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 20px; }
.mp-more-item { display: flex; gap: clamp(16px, 3vw, 28px); align-items: center; padding: clamp(14px, 2.5vw, 22px); border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.mp-more-art { flex: none; width: clamp(130px, 22vw, 210px); aspect-ratio: 1 / 1.6; border-radius: 12px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 28px rgba(255,40,90,.35); transition: transform .2s; }
.mp-more-art:hover { transform: translateY(-4px) rotate(-1.5deg); }
.mp-more-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.mp-more-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-more-name { font-weight: 800; font-size: clamp(1.15em, 2.6vw, 1.6em); color: #fff !important; text-decoration: none !important; line-height: 1.15; }
.mp-more-meta { font-size: clamp(.95em, 2vw, 1.1em); color: #d6d2e4; }
.mp-more-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; }
.mp-btn-dark { background: #e3350d; color: #fff !important; text-decoration: none !important; padding: 14px 28px; font-size: 1.05em; font-weight: 800; box-shadow: 0 8px 20px rgba(227,53,13,.4); }
.mp-btn-dark:hover { background: #ff4a22; }
.mp-more-link { font-size: .95em; color: #fff !important; opacity: .85; }
.mp-login-hint { margin: -4px 0 12px; color: var(--mp-muted); font-size: .9em; }

/* Shipping status on each pulled card */
.mp-ship-wrap { display: flex; align-items: center; gap: 8px; }
.mp-ship { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75em; font-weight: 700; background: #fff4e5; color: #9a5b00; }
.mp-ship::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mp-ship[data-state="shipped"], .mp-ship[data-state="picked_up"] { background: #e7f6ec; color: #1f7a45; }
.mp-ship[data-state="pickup_ready"] { background: #e8f0ff; color: #2456c4; }
.mp-ship[data-state="pickup_preparing"] { background: #fff4e0; color: #9a5b00; }
.mp-track { font-size: .8em; font-weight: 600; color: var(--mp-ink); }

/* How your card ships */
.mp-info { margin-top: 36px; }
.mp-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.mp-info-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid var(--mp-line); background: var(--mp-surface); }
.mp-info-item p { margin: 4px 0 0; font-size: .88em; color: var(--mp-muted); line-height: 1.45; }
.mp-info-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e3350d; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9em; }
.mp-info-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(227,53,13,.08); font-weight: 600; font-size: .9em; }

/* You Might Also Like */
.mp-recs { margin-top: 36px; }
.mp-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mp-rec { display: flex; flex-direction: column; gap: 6px; color: var(--mp-ink) !important; text-decoration: none !important; }
.mp-rec-img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f4f4f7; border: 1px solid var(--mp-line); }
.mp-rec-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.mp-rec:hover .mp-rec-img img { transform: scale(1.04); }
.mp-rec-title { font-size: .85em; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-rec-price { font-size: .85em; color: var(--mp-muted); }

/* Bigger, bolder labels */
.mp-section-title { font-family: var(--mp-heading); font-size: 1.7em !important; font-weight: 700; letter-spacing: .01em; margin: 36px 0 14px; }
.mp-card-title { font-family: var(--mp-heading); font-size: 1.05em; font-weight: 600; line-height: 1.25; }
.mp-card-meta { font-size: .9em; }
.mp-tier { font-family: var(--mp-heading); font-size: .95em; font-weight: 700; letter-spacing: .06em; }
.mp-ship { font-family: var(--mp-heading); font-size: .9em; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; }
.mp-track { font-size: .9em; }
.mp-sub { font-size: 1.1em; }
.mp-info-item strong { font-family: var(--mp-heading); font-size: 1.15em; font-weight: 700; }
.mp-info-item p { font-size: .95em; }
.mp-info-note { font-size: 1em; }
.mp-login-hint { font-size: 1em; }
/* Reveal result */
.mp-result .mp-tier { font-size: 1.35em; letter-spacing: .1em; text-shadow: 0 0 18px currentColor; }
.mp-result h2 { font-family: var(--mp-heading); font-size: 1.7em; font-weight: 700; line-height: 1.15; margin: 8px auto 6px; max-width: 30ch; }
.mp-result p { font-size: 1.05em; }
.mp-btn { font-family: var(--mp-heading); font-size: 1.1em; letter-spacing: .03em; padding: 12px 26px; }
.mp-theme-recs { margin: 40px 0 0; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.mp-theme-recs .pc-product-row, .mp-theme-recs .pr-section { width: 100%; }

/* Quantity stepper on "Buy & Open" */
.mp-more-buy { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mp-more-buy .mp-more-actions { margin-top: 0; }
.mp-qty { display: inline-flex; align-items: center; height: 52px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.mp-qty-btn { appearance: none; border: 0; background: transparent; color: #fff; width: 46px; height: 100%; font-size: 1.4em; font-weight: 700; cursor: pointer; border-radius: 999px; }
.mp-qty-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.mp-qty-btn:disabled { opacity: .35; cursor: default; }
.mp-qty-n { min-width: 2ch; text-align: center; font-family: var(--mp-heading); font-size: 1.3em; font-weight: 700; }
.mp-more-buy .mp-btn-dark { height: 52px; display: inline-flex; align-items: center; }
.mp-qty-hint { font-size: .9em; color: #d6d2e4; }
.mp-qty-hint-on { color: #7ee2a8; font-weight: 700; }

/* Merchant preview banner (?demo=) */
.mp-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 24px; padding: 14px 18px; border: 2px dashed #e3350d; border-radius: 12px; background: rgba(227,53,13,.06); }
.mp-demo p { flex: 1 1 260px; margin: 0; font-size: 1.05em; font-weight: 600; }

/* Opening stage: size the card so the card plus the result (tier, name, buttons) always fit on screen,
   and lift the card so the pair is centered. */
.mp-stage { --mp-result-space: 250px; }
.mp-stage-inner {
  width: min(300px, 74vw, calc((100vh - var(--mp-result-space) - 90px) * 5 / 7));
  width: min(300px, 74vw, calc((100dvh - var(--mp-result-space) - 90px) * 5 / 7));
  margin-bottom: var(--mp-result-space);
}
.mp-result { top: calc(100% + 14px); left: 50%; right: auto; width: min(92vw, 520px); transform: translateX(-50%); }
.mp-result h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .mp-stage { --mp-result-space: 230px; }
  .mp-result .mp-tier { font-size: 1.15em; }
  .mp-result h2 { font-size: 1.3em; margin: 4px auto; }
  .mp-result p { margin-bottom: 10px; }
  .mp-btn { padding: 10px 22px; font-size: 1em; }
}
/* Keep Close clear of the phone's status bar / in-app browser bar. */
.mp-skip { top: calc(env(safe-area-inset-top, 0px) + 14px); }
.mp-stage { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); box-sizing: border-box; }
/* Phones: a compact Close in the corner, and the card starts below it. */
.mp-stage { --mp-top-space: 84px; padding-top: calc(env(safe-area-inset-top, 0px) + var(--mp-top-space)); }
.mp-stage-inner {
  width: min(300px, 74vw, calc((100vh - var(--mp-result-space) - var(--mp-top-space) - 28px) * 5 / 7));
  width: min(300px, 74vw, calc((100dvh - var(--mp-result-space) - var(--mp-top-space) - 28px) * 5 / 7));
}
@media (max-width: 600px) {
  .mp-stage { --mp-top-space: 64px; }
  .mp-skip { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; padding: 7px 16px; font-size: .95em; }
}

/* Pack glow lives on the body only (a filter on the whole pack left a ghost of the torn strip's
   glow behind on iPhone). It slides away with the body. */
.mp-open-glow { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 10px 10px; pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 40, 90, .38), 0 14px 26px rgba(0, 0, 0, .5); }

/* Digital rain behind the opening: black and red, with a dark spotlight so the pack and card stay readable. */
.mp-stage { background: #050306; }
.mp-matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
.mp-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(5,3,6,.85) 0%, rgba(5,3,6,.55) 45%, rgba(5,3,6,0) 75%); }
.mp-stage-inner, .mp-skip { z-index: 1; }
.mp-stage .mp-confetti { z-index: 2; }

/* Multi-card packs: a counter while cards are revealed one by one, then a strip of every card. */
.mp-stage.mp-multi { --mp-result-space: 330px; }
.mp-result.mp-quick { transition-delay: 0s; transition-duration: .25s; }
.mp-count { display: block; margin-bottom: 2px; font-family: var(--mp-heading); font-size: .85em; letter-spacing: .14em; text-transform: uppercase; color: #c9c6d8; }
.mp-multi .mp-reveal-card.mp-revealed { cursor: pointer; }
.mp-fan { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 0 auto 14px; padding-top: 6px; }
.mp-fan-card {
  appearance: none; padding: 0; border: 2px solid var(--mp-c); border-radius: 6px; overflow: hidden; cursor: pointer;
  width: 48px; aspect-ratio: 5 / 7; background: #fff; display: grid; place-items: center;
  transform: rotate(calc(var(--mp-k) * 5deg)) translateY(calc(var(--mp-k) * var(--mp-k) * 2px));
  box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: transform .2s, box-shadow .2s;
}
.mp-fan-card img { width: 100%; height: 100%; object-fit: contain; }
.mp-fan-card span { font-size: 7px; line-height: 1.1; color: #14141a; padding: 2px; overflow: hidden; }
.mp-fan-card.mp-on { transform: translateY(-8px) scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 16px var(--mp-c); }
@media (max-width: 600px) {
  .mp-stage.mp-multi { --mp-result-space: 300px; }
  .mp-fan-card { width: 42px; }
}

/* Card vault: everything pulled waits here until the customer ships it. */
.mp-ship[data-state="vault"] { background: #f1ecff; color: #5b3cc4; }
.mp-ship[data-state="awaiting_payment"] { background: #fff4e0; color: #9a5b00; }
.mp-vault {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; border: 2px solid #14141a; background: #fff;
}
.mp-vault-text strong { display: block; font-family: var(--mp-heading); font-size: 1.25em; }
.mp-vault-text p { margin: 2px 0 0; color: var(--mp-muted); }
.mp-vault-btn { background: #e3350d; color: #fff; padding: 12px 26px; font-size: 1.05em; text-decoration: none; }
.mp-vault-btn[disabled] { opacity: .6; cursor: default; }

/* My Packs header: title, status and Ship My Cards in one banner (also used on the logged-out page). */
.mp-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px 32px; align-items: center;
  margin: 8px 0 28px; padding: 28px 32px; border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 90% 0%, rgba(226,47,57,.55), transparent 55%), linear-gradient(120deg, #14141a 0%, #2a0f2e 55%, #3b0d1c 100%);
  box-shadow: 0 10px 28px rgba(20,20,26,.28);
}
.mp-hero-text { min-width: 0; }
.mp-hero-kicker { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #ffb3b8; }
.mp-hero h1 { margin: 0 0 6px; font-family: var(--mp-heading); font-size: clamp(2.2em, 5vw, 3.2em); line-height: 1; color: #fff; }
.mp-hero-sub { margin: 0 0 14px; font-size: 1.05em; color: #d6d2e4; max-width: 46ch; }
.mp-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-hero-stat { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .9em; color: #fff; }
.mp-hero-stat b { font-family: var(--mp-heading); font-size: 1.15em; margin-right: 2px; }
.mp-hero-ship { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.mp-hero-ship p { margin: 0; color: #d6d2e4; font-size: .95em; }
.mp-hero-ship-title { font-family: var(--mp-heading); font-size: 1.3em; }
.mp-hero-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.mp-hero-bar span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.mp-hero .mp-vault-btn { width: 100%; text-align: center; justify-content: center; display: inline-flex; box-shadow: 0 6px 16px rgba(226,47,57,.4); }
.mp-hero .mp-vault-btn[disabled] { opacity: .5; }
.mp-pickup-btn { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: inherit; font: inherit; font-size: .9em; font-weight: 700; cursor: pointer; }
.mp-pickup-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: inherit; }
.mp-pickup-btn[disabled] { opacity: .5; cursor: default; }
.mp-hero .mp-btn-ghost { width: 100%; text-align: center; text-decoration: none; display: inline-flex; justify-content: center; }
@media (max-width: 749px) {
  .mp-hero { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 16px; margin-top: 0; }
  .mp-hero h1 { font-size: 2.4em; }
  .mp-hero-sub { font-size: 1em; }
}
.mp-hero a.mp-btn, .mp-hero a.mp-btn:hover { color: #fff !important; text-decoration: none !important; }
.mp-hero a.mp-btn::before, .mp-hero a.mp-btn::after { display: none !important; }
.mp-hero .mp-btn { box-sizing: border-box; }

/* Shipped history under the vault: collapsed once everything has arrived. */
.mp-history { margin: 28px 0 0; border-top: 1px solid rgba(0,0,0,.1); padding-top: 8px; }
.mp-history-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 10px 0; }
.mp-history-summary::-webkit-details-marker { display: none; }
.mp-history-summary .mp-section-title { margin: 0; }
.mp-history-summary .mp-section-title::after { content: " ▾"; font-size: .7em; opacity: .6; }
.mp-history[open] .mp-history-summary .mp-section-title::after { content: " ▴"; }
.mp-history-count { color: var(--mp-muted); font-size: .95em; white-space: nowrap; }

.mp-market-link { display: inline-block; margin-top: 14px; text-decoration: none !important; }

/* Vault cards are tapped to pick which ones ship or get picked up. */
.mp-card-pick { position: relative; cursor: pointer; transition: opacity .15s, box-shadow .15s, border-color .15s; }
.mp-card-pick[aria-checked="false"] { opacity: .55; }
.mp-card-pick[aria-checked="true"] { border-color: #e3350d; box-shadow: 0 0 0 1px #e3350d; }
.mp-card-pick:focus-visible { outline: 3px solid var(--mp-ink); outline-offset: 3px; }
.mp-pick-check { position: absolute; top: 16px; right: 16px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--mp-surface); border: 2px solid var(--mp-line); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mp-card-pick[aria-checked="true"] .mp-pick-check { background: #e3350d; border-color: #e3350d; }
.mp-card-pick[aria-checked="true"] .mp-pick-check::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mp-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 14px; color: var(--mp-muted); font-size: .92em; }
.mp-pick-bar button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--mp-ink); text-decoration: underline; cursor: pointer; }
.mp-pick-bar button:disabled { opacity: .4; cursor: default; text-decoration: none; }

/* Your Vault is split into cards ready to ship and cards listed on Vault Market. */
.mp-vault-group { margin: 22px 0 10px; }
.mp-vault-group-title { font-family: var(--mp-heading); font-size: 1.25em; font-weight: 700; margin: 0 0 4px; }
.mp-vault-group-title span { color: var(--mp-muted); font-weight: 600; }
.mp-vault-group-sub { margin: 0; color: var(--mp-muted); font-size: .92em; }
.mp-vault-group-sub a { color: var(--mp-ink); font-weight: 700; }
.mp-ship[data-state="vault"] { background: #e7f6ec; color: #1f7a45; }
.mp-ship[data-state="market"] { background: #fdeceb; color: #b52a0b; }
.mp-grid-listed .mp-card { background: #fbfbfc; border-style: dashed; }

/* 3D pack opening: the pack floats and tilts like a real foil pack, tears open along the top
   with a swipe, and big hits come out face down and charge up before they turn over. */
.mp-stage { touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.mp-stage-inner { perspective: 900px; }
.mp-pack3d {
  position: absolute; left: 50%; top: 0; z-index: 2;
  transform: translateX(-50%); will-change: transform;
}
.mp-pack3d .mp-open-pack { left: 0; transform: none; width: 100%; height: 100%; }
/* Thickness behind the artwork and a plain back, so the edges show when the pack turns. */
.mp-pack-edge {
  position: absolute; left: 50%; top: 0; z-index: 0; pointer-events: none; will-change: transform;
  border-radius: 6% / 3.4%; transform: translateX(-50%);
  background: linear-gradient(90deg, #0b1a3a, #1c3a78 50%, #0b1a3a); box-shadow: 0 0 0 1px rgba(90, 160, 255, .35);
}
.mp-glare {
  position: absolute; inset: 0.4% 0.6%; border-radius: 6% / 3.4%; overflow: hidden; pointer-events: none; z-index: 5;
  transition: opacity .2s;
}
.mp-glare.mp-off { opacity: 0; }
/* Foil glare that slides across the artwork as the pack tilts. */
.mp-sheen {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 10%, transparent 22%),
    linear-gradient(115deg, transparent 38%, rgba(140,200,255,.12) 46%, rgba(255,140,220,.1) 50%, transparent 56%);
}
/* Soft shadow on the "floor" under the floating pack. */
.mp-floor {
  position: absolute; left: 50%; bottom: -6%; width: 62%; height: 7%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,.3) 60%, transparent); transform: translateX(-50%); will-change: transform, opacity;
  transition: opacity .4s;
}
.mp-floor.mp-off { opacity: 0 !important; }

/* Swipe hint: a dotted cut line across the top with a glowing dot running along it. */
.mp-swipe-hint {
  position: absolute; left: 4%; right: 4%; height: 0; z-index: 6; pointer-events: none;
  border-top: 2px dashed rgba(255,255,255,.85);
  transition: opacity .25s;
}
.mp-swipe-hint.mp-off { opacity: 0; }
/* The dot runs along the line by transform (moving it by `left` redrew the whole stage every frame). */
.mp-swipe-run {
  position: absolute; top: 0; left: 0; width: calc(100% - 16px); height: 0;
  animation: mp-swipe-run 1.6s cubic-bezier(.5,0,.3,1) infinite; will-change: transform;
}
.mp-swipe-dot {
  position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 0 16px 4px rgba(120,190,255,.9);
  animation: mp-swipe-dot 1.6s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes mp-swipe-run { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mp-swipe-dot {
  0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); }
}
.mp-result .mp-swipe-text { font-family: var(--mp-heading); font-size: 1.2em; font-weight: 700; letter-spacing: .06em; color: #fff; margin: 4px 0 12px; animation: mp-breathe 1.8s ease-in-out infinite; }
@keyframes mp-breathe { 50% { opacity: .55; } }
.mp-tap-open { opacity: 0; pointer-events: none; transition: opacity .4s; }
.mp-tap-open.mp-on { opacity: 1; pointer-events: auto; }

/* Card back for a big hit, glowing in the tier color while it charges. */
.mp-reveal-card.mp-back { background: #1d3f8f; cursor: pointer; --mp-c: #e0a21a;
  box-shadow: 0 0 0 2px var(--mp-c), 0 0 28px var(--mp-c), 0 18px 40px rgba(0,0,0,.5); }
.mp-reveal-card.mp-back img.mp-back-img { width: 100%; height: 100%; object-fit: cover; }
.mp-reveal-card.mp-charging { animation: mp-charge 1.4s ease-in infinite; }
@keyframes mp-charge {
  0%, 100% { transform: scale(1) rotate(0); } 10% { transform: scale(1.01) rotate(-1.2deg); } 20% { transform: scale(1.02) rotate(1.2deg); }
  30% { transform: scale(1.02) rotate(-.8deg); } 40% { transform: scale(1.03) rotate(.8deg); } 50% { transform: scale(1.04) rotate(0); }
}
.mp-glow { will-change: transform, opacity; }
.mp-glow.mp-charge { animation: mp-glow-charge 1.4s ease-in-out infinite; }
@keyframes mp-glow-charge { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.mp-result .mp-tap { display: inline-block; font-family: var(--mp-heading); font-size: 1.35em; font-weight: 700; letter-spacing: .08em; color: #fff; animation: mp-breathe 1.2s ease-in-out infinite; }

/* Light rays behind a big hit: faint while it charges, full when it turns over. */
.mp-rays {
  position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; z-index: 0; pointer-events: none; will-change: transform;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .6s; --mp-c: #e0a21a;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--mp-c) 70%, #fff) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 70%); mask: radial-gradient(closest-side, #000 15%, transparent 70%);
  animation: mp-rays 14s linear infinite;
}
.mp-rays.mp-on { opacity: .35; }
.mp-rays.mp-burst { opacity: .8; }
@keyframes mp-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mp-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen; }

/* The finished card leans toward the finger and its shine follows. */
.mp-reveal-card.mp-revealed { touch-action: none; }
.mp-reveal-card.mp-leaning { transition: transform .12s ease-out; }
.mp-reveal-card.mp-leaning::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,.45), transparent 45%);
}
.mp-reveal-card.mp-holo.mp-leaning::before {
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,.5), transparent 40%),
    linear-gradient(125deg, rgba(255,0,140,.18), rgba(0,200,255,.18), rgba(255,230,0,.18), rgba(140,0,255,.18)) 0 0 / 200% 200%;
  background-position: 0 0, var(--hx, 50%) var(--hy, 50%);
}

@media (prefers-reduced-motion: reduce) {
  .mp-swipe-run, .mp-swipe-dot, .mp-reveal-card.mp-charging, .mp-glow.mp-charge, .mp-rays, .mp-result .mp-swipe-text, .mp-result .mp-tap { animation: none; }
}

/* Digital tear: a glowing red laser line, a bright head that runs along the cut, red sparks. */
.mp-laser {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 25%, #ff2d55 45%, rgba(255,45,85,0) 70%);
  box-shadow: 0 0 14px 6px rgba(255,45,85,.75); transition: opacity .12s; will-change: transform;
}
.mp-laser.mp-on { opacity: 1; }
.mp-fleck { width: 3px; height: 3px; border-radius: 0; }
.mp-cancel-ship { border-color: transparent; text-decoration: underline; font-weight: 600; opacity: .85; }

/* ---------- Vault Market look ----------
   My Packs wears the same night-vault style as Vault Market: deep ink panels, card art up front,
   a holo foil accent on the heading, and the brand red kept for the one main action. The page sits
   inside the store theme, so the dark background is painted edge to edge behind it. */
.mp-page {
  --mp-ink: #eef1fa;
  --mp-muted: #98a1c0;
  --mp-surface: #11172b;
  --mp-line: #283252;
  --mp-pocket: #19213b;
  --mp-signal: #ff4b2b;
  --mp-signal-hi: #ff6a4d;
  --mp-trade: #67d5c0;
  --mp-gold: #f2c35b;
  --mp-foil: linear-gradient(110deg, #9fe6ff 0%, #c6a8ff 28%, #ffd7a1 52%, #a7ffdc 76%, #9fe6ff 100%);
  --mp-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --mp-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --mp-heading: var(--mp-display);
  --mp-poke: #ff5a4a; --mp-great: #5b8dff; --mp-ultra: #f2c35b; --mp-master: #b07cff; --mp-legendary: #ff9a3c;
  color-scheme: dark;
  max-width: 1320px;
  padding: 36px 20px 72px;
  color: var(--mp-ink);
  font-family: var(--mp-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(176, 124, 255, .16), transparent 60%),
    radial-gradient(700px 420px at -10% 10%, rgba(91, 141, 255, .12), transparent 60%),
    #0a0e1d;
  box-shadow: 0 0 0 100vmax #0a0e1d;
  clip-path: inset(0 -100vmax);
}
.mp-page a { color: inherit; }
.mp-page :focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; }
.mp-page .mp-section-title,
.mp-page .mp-history-summary .mp-section-title,
.mp-page .mp-vault-group-title,
.mp-page .mp-more-title {
  font-family: var(--mp-display); font-weight: 700; letter-spacing: -.01em; color: var(--mp-ink);
}
.mp-page .mp-section-title { font-size: 1.25em; margin: 40px 0 14px; }
.mp-page .mp-sub, .mp-page .mp-empty, .mp-page .mp-vault-group-sub, .mp-page .mp-history-count,
.mp-page .mp-more-sub, .mp-page .mp-login-hint, .mp-page .mp-info-note, .mp-page .mp-card-meta { color: var(--mp-muted); }
.mp-page .mp-history-count { font-family: var(--mp-mono); font-size: .8em; }
.mp-page .mp-vault-group-sub a, .mp-page .mp-login-hint a { color: var(--mp-trade); }
.mp-page .mp-error { color: var(--mp-signal-hi); }

/* Hero: a vault panel with the foil heading and mono stats, like the market's front page. */
.mp-page .mp-hero {
  border-radius: 22px; padding: 36px 40px; margin: 0 0 32px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(176, 124, 255, .22), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(255, 75, 43, .12), transparent 60%),
    linear-gradient(160deg, #141b33 0%, #10162b 60%, #160f2a 100%);
  border: 1px solid var(--mp-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.mp-page .mp-hero-kicker { color: var(--mp-gold); font-family: var(--mp-body); font-weight: 700; letter-spacing: .22em; font-size: 11px; }
.mp-page .mp-hero h1 {
  font-family: var(--mp-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(2.2em, 5.4vw, 3.6em);
  background: linear-gradient(90deg, #fff 0%, #fff 38%, #9fe6ff 55%, #c6a8ff 70%, #ffd7a1 85%, #a7ffdc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mp-page .mp-hero-sub { color: #c3c9de; }
.mp-page .mp-hero-stat {
  background: var(--mp-pocket); border-color: var(--mp-line); color: var(--mp-muted);
  font-size: .8em; letter-spacing: .04em; text-transform: uppercase;
}
.mp-page .mp-hero-stat b { font-family: var(--mp-mono); color: var(--mp-ink); font-size: 1.25em; text-transform: none; }
.mp-page .mp-hero-ship {
  background: rgba(10, 14, 29, .55); border: 1px solid var(--mp-line); border-radius: 16px;
  backdrop-filter: blur(8px);
}
.mp-page .mp-hero-ship-title { font-family: var(--mp-display); font-weight: 700; }
.mp-page .mp-hero-ship p { color: var(--mp-muted); }
.mp-page .mp-hero-bar { background: var(--mp-pocket); }
.mp-page .mp-hero-bar span { background: var(--mp-foil); }

/* Buttons: one red action, everything else quiet pills. */
.mp-page .mp-btn {
  font-family: var(--mp-body); font-weight: 700; letter-spacing: .01em; font-size: 1em;
  border-radius: 999px; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mp-page .mp-btn:hover { transform: translateY(-1px); }
.mp-page .mp-vault-btn, .mp-page .mp-hero .mp-vault-btn, .mp-page .mp-pick-bar button:not(:disabled):first-child {
  background: var(--mp-signal); color: #fff; border: 0;
  box-shadow: 0 8px 24px rgba(255, 75, 43, .28);
}
.mp-page .mp-vault-btn:hover:not([disabled]) { background: var(--mp-signal-hi); }
.mp-page .mp-btn-ghost, .mp-page .mp-pickup-btn, .mp-page .mp-hero .mp-btn-ghost {
  background: var(--mp-pocket); color: var(--mp-ink); border: 1px solid var(--mp-line);
}
.mp-page .mp-btn-ghost:hover, .mp-page .mp-pickup-btn:hover { border-color: #3a4672; background: #1e2745; }
.mp-page .mp-btn-dark, .mp-page a.mp-btn-dark {
  background: var(--mp-signal); color: #fff; box-shadow: 0 8px 24px rgba(255, 75, 43, .28);
}
.mp-page .mp-btn-dark:hover, .mp-page a.mp-btn-dark:hover { background: var(--mp-signal-hi); color: #fff; }
.mp-page .mp-market-link {
  background: var(--mp-pocket); border: 1px solid var(--mp-line); color: var(--mp-ink);
}

/* Card tiles: art up front, no white frame, a slight lift on hover. */
.mp-page .mp-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px; }
.mp-page .mp-card {
  background: transparent; border: 0; padding: 0; gap: 8px; border-radius: 0;
}
.mp-page .mp-card img {
  background: var(--mp-pocket); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mp-page .mp-card:hover img { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.mp-page .mp-card-title { font-family: var(--mp-body); font-weight: 600; font-size: .92em; color: var(--mp-ink); }
.mp-page .mp-tier { font-family: var(--mp-mono); letter-spacing: .08em; }
.mp-page .mp-tier[data-tier="poke"] { color: var(--mp-poke); }
.mp-page .mp-tier[data-tier="great"] { color: var(--mp-great); }
.mp-page .mp-tier[data-tier="ultra"] { color: var(--mp-ultra); }
.mp-page .mp-tier[data-tier="master"] { color: var(--mp-master); }
.mp-page .mp-tier[data-tier="legendary"] { color: var(--mp-legendary); }
.mp-page .mp-grid-listed .mp-card { background: transparent; }
.mp-page .mp-grid-listed .mp-card img { opacity: .82; outline: 1px dashed var(--mp-line); outline-offset: 4px; }

/* Pick-to-ship tiles: the selection ring is the brand red, like the market's main action. */
.mp-page .mp-card-pick { padding: 8px; border-radius: 14px; background: var(--mp-surface); border: 1px solid var(--mp-line); }
.mp-page .mp-card-pick[aria-checked="true"] { border-color: var(--mp-signal); box-shadow: 0 0 0 1px var(--mp-signal), 0 12px 30px rgba(255, 75, 43, .18); }
.mp-page .mp-card-pick[aria-checked="false"] { opacity: .6; }
.mp-page .mp-card-pick:focus-visible { outline-color: var(--mp-gold); }
.mp-page .mp-pick-check { background: var(--mp-pocket); border-color: var(--mp-line); }
.mp-page .mp-card-pick[aria-checked="true"] .mp-pick-check { background: var(--mp-signal); border-color: var(--mp-signal); }
.mp-page .mp-pick-bar button { background: var(--mp-pocket); color: var(--mp-ink); border: 1px solid var(--mp-line); }

/* Status chips, in the market's tinted-chip style. */
.mp-page .mp-ship {
  font-family: var(--mp-body); font-weight: 700; font-size: .78em; letter-spacing: .01em;
  border-radius: 7px; padding: 3px 9px; background: rgba(242, 195, 91, .12); color: var(--mp-gold);
}
.mp-page .mp-ship[data-state="shipped"], .mp-page .mp-ship[data-state="picked_up"] { background: rgba(103, 213, 192, .12); color: var(--mp-trade); }
.mp-page .mp-ship[data-state="pickup_ready"] { background: rgba(91, 141, 255, .14); color: #8fb0ff; }
.mp-page .mp-ship[data-state="vault"] { background: rgba(176, 124, 255, .14); color: #c6a8ff; }
.mp-page .mp-ship[data-state="market"] { background: rgba(103, 213, 192, .12); color: var(--mp-trade); }
.mp-page .mp-ship[data-state="awaiting_payment"] { background: rgba(255, 75, 43, .14); color: var(--mp-signal-hi); }
.mp-page .mp-track { color: var(--mp-trade); }

.mp-page .mp-history { border-top-color: var(--mp-line); }
.mp-page .mp-vault-group { border-color: var(--mp-line); }

/* Panels: open more packs, how shipping works, demo note. */
.mp-page .mp-more, .mp-page .mp-info-item, .mp-page .mp-demo, .mp-page .mp-vault {
  background: var(--mp-surface); border: 1px solid var(--mp-line); color: var(--mp-ink); border-radius: var(--mp-radius, 16px);
}
.mp-page .mp-more { background: linear-gradient(160deg, #141b33, #10162b); }
.mp-page .mp-more-art { background: var(--mp-pocket); border-radius: 12px; }
.mp-page .mp-more-name { font-family: var(--mp-display); font-weight: 700; }
.mp-page .mp-qty { background: var(--mp-pocket); border-color: var(--mp-line); }
.mp-page .mp-info-num { background: var(--mp-foil); color: #0a0e1d; font-family: var(--mp-mono); }
.mp-page .mp-info-item strong { color: var(--mp-ink); }
.mp-page .mp-info-item p { color: var(--mp-muted); }

/* The theme's "You Might Also Like" row keeps the store's own light look, set apart below the vault. */
.mp-page .mp-theme-recs { background: #fff; color: #14141a; margin-top: 56px; padding: 8px 0 24px; color-scheme: light; }
.mp-page .mp-recs { color: var(--mp-ink); }

@media (max-width: 749px) {
  .mp-page { padding: 20px 14px 56px; }
  .mp-page .mp-hero { padding: 24px 18px; border-radius: 18px; }
  .mp-page .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Loading placeholder from the page shell, until the packs arrive. */
.mp-page .mp-skel-hero, .mp-page .mp-skel-title, .mp-page .mp-skel-card {
  border-radius: 14px;
  background: linear-gradient(100deg, #11172b 30%, #1b2442 50%, #11172b 70%) 0 0 / 300% 100%;
  animation: mp-skel 1.4s ease-in-out infinite;
}
.mp-page .mp-skel-hero { height: 220px; border-radius: 22px; border: 1px solid var(--mp-line); }
.mp-page .mp-skel-title { width: 200px; height: 26px; margin: 40px 0 14px; border-radius: 8px; }
.mp-page .mp-skel-card { aspect-ratio: 5 / 7; border-radius: 10px; }
@keyframes mp-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mp-page .mp-skel-hero, .mp-page .mp-skel-title, .mp-page .mp-skel-card { animation: none; } }
@media (max-width: 749px) { .mp-page .mp-skel-hero { height: 300px; } }

/* While the opening stage is up, the page under it stops drawing. */
.mp-stage-open .mp-page { visibility: hidden; }

/* "Your Card Sold" notice (Vault Market sales) */
.mp-sold { margin: 18px 0 8px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, #0f2a24, #13213a); color: #fff; border: 1px solid rgba(103, 213, 192, .45); display: grid; gap: 14px; }
.mp-sold-head { display: grid; gap: 4px; }
.mp-sold-head strong { font-size: 1.25em; color: #67d5c0; }
.mp-sold-head span { opacity: .9; }
.mp-sold-list { display: grid; gap: 10px; }
.mp-sold-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; min-width: 0; }
.mp-sold-item img { width: 44px; height: 62px; object-fit: cover; border-radius: 6px; }
.mp-sold-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mp-sold-price { font-weight: 700; color: #f2c35b; white-space: nowrap; }
.mp-sold-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mp-sold-actions .mp-btn, .mp-sold-actions .mp-pickup-btn { width: auto; margin: 0; }

/* The 3D pack's WebGL canvas: full screen over the code rain, under the page's card and buttons. */
.mp-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }