/* ================= mystery slabs =================
   Sealed foil sleeves in a rack you spin past, then one you tear open with your
   thumb. Everything here is the sleeve — the slab that comes out is the same
   component the case and the binder already use. */

.mystview{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;
  gap:0;padding:4px 0 12px}
/* the foil palette on the screen itself, so the plaque and the stub can be cut
   from the same material as the pack without duplicating the colours */
.mystview.bronze {--f1:#8a6438;--f2:#5b4022;--f3:#2e2011;--accent:#f0b978}
.mystview.silver {--f1:#6f7a94;--f2:#3b4356;--f3:#1a1e28;--accent:#dfe7ff}
.mystview.gold   {--f1:#c9a02c;--f2:#8a6c12;--f3:#3d2f06;--accent:#ffe07a}
.mystview.black  {--f1:#31343e;--f2:#1a1c22;--f3:#08080b;--accent:#cfd6ff}
.mystview.diamond{--f1:#5f7fa8;--f2:#2e4460;--f3:#101a28;--accent:#bfe6ff}
.my-kick{font-family:'Bebas Neue';font-size:15px;letter-spacing:.26em;color:#9aa2d2;margin-top:2px}
.my-sub{margin-top:4px;font-size:12px;color:#767ea6;text-align:center;padding:0 20px}
.my-hint{margin-top:10px;font-size:11.5px;letter-spacing:.05em;color:#6b729b;text-align:center}

/* ---- the wrapper ----
   Crimped seals top and bottom, a punched peg hole, foil weave under a holo
   sweep, and a seam down the back. Four finishes: kraft, brushed steel, mirror
   gold, matte black with a prism edge. */
/* box-shadow, not drop-shadow: a filter forces its own layer and repaints the
   whole pack every frame while the rack is moving. */
.mp{position:relative;width:100%;aspect-ratio:63/108;border-radius:5px;
  display:flex;flex-direction:column;isolation:isolate;
  box-shadow:0 22px 30px -10px rgba(0,0,0,.9);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  --f1:#3a4270;--f2:#232a4e;--f3:#141936;--ink:#e8ecff;--accent:#8f9ad8;
  --holo:.28;--sheen:.4}
.mp.bronze{--f1:#8a6438;--f2:#5b4022;--f3:#2e2011;--ink:#fff3e2;--accent:#f0b978;
  --holo:.16;--sheen:.4}
/* Silver was a pale grey base with a white sheen AND a rainbow band sliding over
   it at different speeds — two bright overlays crossing on a light background,
   which beats against itself and reads as flicker. Real silver foil is dark
   chrome with bright highlights anyway, so the base drops and the overlays are
   pulled right back. */
.mp.silver{--f1:#6f7a94;--f2:#3b4356;--f3:#1a1e28;--ink:#ffffff;--accent:#dfe7ff;
  --holo:.16;--sheen:.24}
.mp.gold  {--f1:#c9a02c;--f2:#8a6c12;--f3:#3d2f06;--ink:#fffaea;--accent:#ffe07a;
  --holo:.34;--sheen:.36}
.mp.black {--f1:#31343e;--f2:#1a1c22;--f3:#08080b;--ink:#f2f4ff;--accent:#cfd6ff;
  --holo:.5;--sheen:.4}
/* the top sleeve: icy prism, the only one that throws real colour */
.mp.diamond{--f1:#5f7fa8;--f2:#2e4460;--f3:#101a28;--ink:#ffffff;--accent:#bfe6ff;
  --holo:.62;--sheen:.34}

/* the crimped seal — the single detail that makes it read as packaging */
.mp-crimp{position:relative;flex:none;height:7.5%;z-index:3;
  background:linear-gradient(180deg,var(--f1),var(--f2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mp-crimp i{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.22) 2px 3px,transparent 3px 4px)}
.mp-crimp.top{border-radius:5px 5px 0 0}
.mp-crimp.bot{border-radius:0 0 5px 5px;
  background:linear-gradient(0deg,var(--f1),var(--f3))}
/* torn-off teeth along the seals */
.mp-crimp.top::after,.mp-crimp.bot::after{content:'';position:absolute;left:0;right:0;height:4px;
  background:var(--f3);
  clip-path:polygon(0 0,3% 100%,6% 0,9% 100%,12% 0,15% 100%,18% 0,21% 100%,24% 0,27% 100%,
    30% 0,33% 100%,36% 0,39% 100%,42% 0,45% 100%,48% 0,51% 100%,54% 0,57% 100%,60% 0,
    63% 100%,66% 0,69% 100%,72% 0,75% 100%,78% 0,81% 100%,84% 0,87% 100%,90% 0,93% 100%,
    96% 0,99% 100%,100% 0)}
.mp-crimp.top::after{bottom:-3px}
.mp-crimp.bot::after{top:-3px;transform:scaleY(-1)}
/* punched for the peg hook */
.mp-hole{position:absolute;top:2.2%;left:50%;transform:translateX(-50%);z-index:4;
  width:13%;aspect-ratio:1.7;border-radius:99px;background:#05060c;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.16)}

.mp-body{position:relative;flex:1;overflow:hidden;
  background:linear-gradient(163deg,var(--f1),var(--f2) 54%,var(--f3))}
/* brushed foil under everything */
.mp-weave{position:absolute;inset:0;opacity:.44;
  background:repeating-linear-gradient(74deg,rgba(255,255,255,.13) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(-62deg,rgba(0,0,0,.2) 0 2px,transparent 2px 9px)}
/* The colour foil throws. A blurred conic on mix-blend-mode:screen looked best
   but repainted every frame on a phone, which is what made the rack flash while
   you swiped. A soft-edged band that only ever moves by transform composites on
   the GPU and never repaints. */
.mp-holo{position:absolute;top:-12%;bottom:-12%;left:-26%;width:118%;
  opacity:var(--holo);pointer-events:none;
  background:linear-gradient(104deg,
    transparent 0 14%,rgba(255,95,109,.55) 22%,rgba(255,195,113,.5) 30%,
    rgba(126,232,250,.55) 38%,rgba(160,108,255,.5) 46%,transparent 56% 100%);
  will-change:transform;animation:mpholo 6.5s ease-in-out infinite}
@keyframes mpholo{0%,100%{transform:translate3d(-8%,0,0)}50%{transform:translate3d(18%,0,0)}}
/* the fold running down the back of the pack */
.mp-seam{position:absolute;top:0;bottom:0;left:17%;width:12%;
  background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 40%,rgba(255,255,255,.16))}
.mp-sheen{position:absolute;inset:-25% -40%;pointer-events:none;will-change:transform;
  opacity:var(--sheen);
  background:linear-gradient(74deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  animation:mpsheen 4.4s ease-in-out infinite}
@keyframes mpsheen{0%,100%{transform:translate3d(-26%,0,0)}50%{transform:translate3d(26%,0,0)}}

.mp-brand{position:absolute;top:5%;left:0;right:0;text-align:center;z-index:3;
  font-family:'Outfit';font-size:7px;font-weight:800;letter-spacing:.3em;color:rgba(255,255,255,.66)}
.mp-brand i{display:block;font-style:normal;font-size:5px;letter-spacing:.42em;
  color:rgba(255,255,255,.4);margin-top:2px}
/* stamped foil type: a bright face with a hard shadow twin behind it */
.mp-tier{position:relative;margin-top:15%;text-align:center;z-index:3;
  font-family:'Bebas Neue';font-size:34px;letter-spacing:.09em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--accent) 46%,var(--f2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mp-tier::before{content:attr(data-t);position:absolute;inset:0;z-index:-1;
  color:rgba(0,0,0,.5);transform:translate(1.5px,2px)}
.mp-word{margin-top:1px;text-align:center;z-index:3;position:relative;
  font-family:'Outfit';font-size:7.5px;font-weight:800;letter-spacing:.34em;
  color:rgba(255,255,255,.58)}
/* the emblem, struck into the foil rather than drawn on it */
.mp-emblem{position:relative;z-index:3;width:40%;aspect-ratio:1;margin:7% auto 0;
  border-radius:50%;background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.95),transparent 42%),
    linear-gradient(180deg,var(--accent) 0 46%,rgba(255,255,255,.85) 46% 54%,var(--f2) 54% 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.5);
  opacity:.92}
.mp-emblem span{position:absolute;inset:0;margin:auto;width:27%;height:27%;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff,rgba(255,255,255,.65));
  box-shadow:0 0 0 2.5px var(--f3),0 0 0 4px rgba(255,255,255,.6)}
.mp-rule{position:relative;z-index:3;width:56%;height:1px;margin:8% auto 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.mp-line{position:relative;z-index:3;margin-top:5%;text-align:center;
  font-family:'Outfit';font-size:6px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.5)}
.mp-price{position:absolute;bottom:7%;left:0;right:0;text-align:center;z-index:3;
  font-family:'Bebas Neue';font-size:26px;letter-spacing:.02em;color:var(--ink);
  text-shadow:0 2px 8px rgba(0,0,0,.75)}
.mp-code{position:absolute;bottom:2.5%;left:0;right:0;text-align:center;z-index:3;
  font-family:ui-monospace,Menlo,monospace;font-size:5.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.32)}
.mp-qmark{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:60px;color:rgba(255,255,255,.3);
  text-shadow:0 3px 12px rgba(0,0,0,.6)}
/* glass over the whole thing */
.mp-gloss{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:5px;
  background:linear-gradient(118deg,rgba(255,255,255,.17) 0 20%,transparent 40%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 -18px 26px -18px rgba(0,0,0,.8)}

/* ---- the rack you swipe ---- */
.my-railwrap{position:relative;width:100%;margin-top:12px}
.my-rail{width:100%;padding:14px 30% 10px;display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;perspective:1200px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.my-rail.grabbing{cursor:grabbing;scroll-snap-type:none}
.my-rail::-webkit-scrollbar{display:none}
.my-slot{flex:none;width:100%;scroll-snap-align:center;position:relative;
  transform:rotateY(var(--turn,0deg)) translateZ(var(--z,0px)) translateY(var(--lift,0px));
  opacity:var(--dim,1);transition:opacity .16s linear;
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* nothing animates on a pack you aren't looking at — that's most of the work
   saved while the rack is in motion */
.my-slot:not(.front) .mp-holo,
.my-slot:not(.front) .mp-sheen{animation:none;opacity:calc(var(--holo) * .4)}
/* the one you're on breathes; the rest sit still */
.my-slot.front .mp{animation:mpfloat 3.6s ease-in-out infinite}
@keyframes mpfloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.5deg)}}
.my-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(10,12,26,.72);border:1px solid rgba(255,255,255,.14);color:#cdd2f5;
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.15s}
.my-arrow:hover{background:rgba(255,203,5,.18);border-color:rgba(255,203,5,.45);color:var(--gold)}
.my-arrow.left{left:4px}
.my-arrow.right{right:4px}
.my-dots{display:flex;gap:7px;margin-top:8px}
.my-dots i{width:6px;height:6px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);transition:.2s}
.my-dots i.on{width:20px;border-radius:99px;background:var(--gold);
  box-shadow:0 0 10px rgba(255,203,5,.7)}

/* ---- the five sleeves you choose from ----
   Dealt onto felt, face down, bobbing out of sync. Tapping one lifts it out and
   sweeps the rest off the table. */
.my-table{position:relative;width:100%;height:300px;margin-top:10px;
  display:flex;align-items:center;justify-content:center}
.my-felt{position:absolute;left:6%;right:6%;top:22%;bottom:8%;border-radius:50%/22%;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),transparent 68%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.my-fan{position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;perspective:900px}
.my-fanslot{position:absolute;width:104px;padding:0;border:none;background:none;cursor:pointer;
  transform:translateX(calc((var(--i) - 2) * 58px)) rotate(calc((var(--i) - 2) * 7deg));
  transition:transform .5s cubic-bezier(.2,1.2,.3,1),opacity .45s;
  animation:myfloat 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .28s)}
@keyframes myfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.my-fanslot:hover{transform:translateX(calc((var(--i) - 2) * 58px))
  rotate(calc((var(--i) - 2) * 7deg)) translateY(-16px) scale(1.04);z-index:6}
.my-fanslot:active{transform:translateX(calc((var(--i) - 2) * 58px))
  rotate(calc((var(--i) - 2) * 7deg)) translateY(-10px) scale(.99)}
/* a glint crosses a random sleeve now and then — means nothing, feels like a lot */
.my-glint{position:absolute;inset:0;border-radius:5px;pointer-events:none;overflow:hidden}
.my-glint::after{content:'';position:absolute;inset:-30% -60%;
  background:linear-gradient(74deg,transparent 44%,rgba(255,255,255,.5) 50%,transparent 56%);
  animation:myglint 7s ease-in-out infinite;animation-delay:calc(var(--i) * 1.3s)}
@keyframes myglint{0%,72%,100%{transform:translate3d(-60%,0,0)}86%{transform:translate3d(60%,0,0)}}
/* dealt in, one at a time */
.my-fan.dealing .my-fanslot{animation:mydeal .62s cubic-bezier(.2,1.1,.3,1) both;
  animation-delay:calc(var(--i) * .09s)}
@keyframes mydeal{
  from{opacity:0;transform:translateX(180px) rotate(24deg) scale(.8)}
  to{opacity:1;transform:translateX(calc((var(--i) - 2) * 58px)) rotate(calc((var(--i) - 2) * 7deg))}}
/* the one you took comes to the front; the rest leave the table */
.my-fan.chosen .my-fanslot{animation:none;pointer-events:none}
.my-fanslot.taken{transform:translateX(0) rotate(0) translateY(-10px) scale(1.22);z-index:8}
.my-fanslot.taken .mp{animation:mytaken .6s cubic-bezier(.2,1.3,.35,1)}
@keyframes mytaken{0%{transform:rotate(0)}45%{transform:rotate(-4deg) scale(1.04)}100%{transform:none}}
.my-fanslot.away{opacity:0;
  transform:translateX(calc((var(--i) - 2) * 230px)) rotate(calc((var(--i) - 2) * 26deg)) translateY(90px)}

/* ---- tearing it open ---- */
.my-ripstage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  padding:18px 0 6px}
.my-glow{position:absolute;width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--tglow,rgba(255,203,5,.22)),transparent 66%);
  opacity:calc(.3 + var(--tear,0) * .9);transition:opacity .1s linear}
.my-ripwrap{position:relative;width:196px;touch-action:none;cursor:grab;--tear:0}
.my-ripwrap.held{cursor:grabbing}
.my-ripwrap .mp{transform:rotate(calc(var(--tear) * -2deg))}
/* the seal peels with your finger */
.my-ripwrap .mp-crimp.top{z-index:7;
  transform:translateX(calc(var(--tear) * 112%)) rotate(calc(var(--tear) * 15deg));
  transform-origin:0 50%}
.my-ripwrap .mp-hole{opacity:calc(1 - var(--tear) * 2.6)}
.my-ripwrap.springback .mp-crimp.top{transition:transform .26s cubic-bezier(.3,1.5,.4,1)}
/* light spilling out of the opening as it widens */
.my-ripwrap .mp-body::before{content:'';position:absolute;top:0;left:0;right:0;height:26px;z-index:6;
  pointer-events:none;opacity:calc(var(--tear) * 1.4);
  background:linear-gradient(180deg,rgba(255,255,255,.85),transparent)}
/* the grip you actually put your thumb on */
.my-grip{position:absolute;top:1%;right:-14px;z-index:8;display:flex;align-items:center;gap:4px;
  pointer-events:none;opacity:calc(1 - var(--tear) * 2.2);
  transform:translateX(calc(var(--tear) * 112%))}
.my-notch{width:13px;height:13px;border-radius:3px;
  background:linear-gradient(180deg,#ffd447,#e8a800);
  box-shadow:0 2px 8px rgba(255,180,0,.85)}
.my-chev{display:flex;gap:2px}
.my-chev i{width:5px;height:5px;border-right:2px solid var(--gold);border-top:2px solid var(--gold);
  transform:rotate(45deg);opacity:.35;animation:mychev 1.3s ease-in-out infinite}
.my-chev i:nth-child(2){animation-delay:.14s}
.my-chev i:nth-child(3){animation-delay:.28s}
@keyframes mychev{0%,100%{opacity:.25}50%{opacity:1}}
/* the line it will tear along */
.my-dash{position:absolute;left:4px;right:4px;top:8.4%;height:1px;z-index:6;pointer-events:none;
  opacity:calc(.55 - var(--tear));
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 4px,transparent 4px 8px)}
/* foil crinkling off as it opens */
.my-flecks{position:absolute;left:0;right:0;top:7%;height:0;z-index:9;pointer-events:none}
.my-flecks i{position:absolute;left:var(--x);width:4px;height:5px;border-radius:1px;
  background:var(--accent,#fff);opacity:.9;
  animation:myfleck .65s ease-out forwards}
@keyframes myfleck{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.my-ripwrap.torn .mp-crimp.top{transition:transform .55s cubic-bezier(.4,.1,.2,1),opacity .55s;
  transform:translateX(170%) rotate(34deg);opacity:0}
.my-ripwrap.torn{animation:myshake .5s ease}
@keyframes myshake{0%,100%{transform:none}
  20%{transform:translateX(-5px) rotate(-1.4deg)}60%{transform:translateX(5px) rotate(1.1deg)}}

/* ---- the reveal ----
   Nothing sits behind the slab. The sleeve you opened is a stub pinned in the
   corner, the rarity rides a foil ribbon, and the numbers sit on a crimped
   plaque cut from the same foil as the pack. */
.reveal{position:relative;padding-top:6px}
.r-common   {--rc:#9aa3bd;--rc2:#5b6178;--rc3:#3a3f50}
.r-uncommon {--rc:#5fe39a;--rc2:#2b8657;--rc3:#1a5537}
.r-rare     {--rc:#63a7ff;--rc2:#2c5f9e;--rc3:#1b3d66}
.r-epic     {--rc:#c07bff;--rc2:#6f409c;--rc3:#472765}
.r-legendary{--rc:#ffb340;--rc2:#9c661a;--rc3:#65420f}
.r-grail    {--rc:#ff5f9e;--rc2:#9c2f5c;--rc3:#651d3b}

/* ---- the rarity ribbon ---- */
.my-ribbon{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;
  margin-top:12px;opacity:0;transform:translateY(-8px) scale(.9);
  transition:opacity .32s,transform .38s cubic-bezier(.2,1.6,.4,1)}
.my-ribbon.in{opacity:1;transform:none}
/* two explicit stops per rarity rather than color-mix, which older mobile
   Safari does not support and would render as no background at all */
.mr-face{position:relative;padding:5px 26px;
  background:linear-gradient(180deg,var(--rc),var(--rc2,#555));
  box-shadow:0 6px 18px -8px var(--rc),inset 0 1px 0 rgba(255,255,255,.55)}
.mr-face b{font-family:'Bebas Neue';font-size:19px;letter-spacing:.3em;
  color:#0b0d18;text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* the folded tails either side, the way a real ribbon sits */
.mr-tail{width:14px;height:26px;
  background:linear-gradient(180deg,var(--rc2,#555),var(--rc3,#333))}
.mr-tail.left {clip-path:polygon(100% 0,100% 100%,0 100%,42% 50%,0 0)}
.mr-tail.right{clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%)}
.reveal.r-legendary .mr-face,.reveal.r-grail .mr-face{animation:myrib 1.7s ease-in-out infinite}
@keyframes myrib{0%,100%{box-shadow:0 6px 18px -8px var(--rc),inset 0 1px 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 6px 30px -4px var(--rc),inset 0 1px 0 rgba(255,255,255,.75)}}

/* ---- the slab, front and centre ---- */
.my-stage{position:relative;margin-top:14px;display:flex;align-items:center;justify-content:center}
.my-rays{position:absolute;width:300px;height:300px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--rc),transparent 62%);
  animation:myrays 4s ease-in-out infinite}
@keyframes myrays{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:.55;transform:scale(1.05)}}
.reveal.r-common .my-rays,.reveal.r-uncommon .my-rays{opacity:.18;animation:none}
/* foil motes for a pull worth shouting about */
.my-spark{position:absolute;inset:0;pointer-events:none;z-index:4}
.my-spark i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:1px;
  background:var(--rc);box-shadow:0 0 8px var(--rc);
  animation:myspark 1.1s var(--d,0s) cubic-bezier(.15,.7,.3,1) forwards;
  transform:scale(var(--s,1))}
@keyframes myspark{from{opacity:1;transform:translate(0,0) scale(var(--s,1))}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0) rotate(180deg)}}
/* THE bit that was missing: perspective, so dragging actually turns the slab */
.my-slabhold{position:relative;width:min(64vw,252px);perspective:900px;
  touch-action:none;cursor:grab;
  animation:myslide .7s cubic-bezier(.2,1.15,.3,1) both}
.my-slabhold.turning{cursor:grabbing}
.my-slabhold .slab{transition:transform .16s ease;will-change:transform}
/* it breathes on its own until you take hold of it */
.my-slabhold:not(.turning) .slab{animation:myslabfloat 5s ease-in-out infinite}
@keyframes myslabfloat{0%,100%{transform:rotateX(2deg) rotateY(-3deg)}
  50%{transform:rotateX(-2deg) rotateY(3deg)}}
@keyframes myslide{from{opacity:0;transform:translateY(-52px) scale(.86)}to{opacity:1;transform:none}}
.my-frost{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:8px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  background:linear-gradient(150deg,rgba(226,232,255,.42),rgba(150,163,214,.3));
  transition:opacity .75s ease,backdrop-filter .75s ease}
.my-frost.clear{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.my-hidden{opacity:0}
.my-stamp{animation:mystamp .42s cubic-bezier(.2,1.7,.4,1) both}
@keyframes mystamp{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}

/* ---- the numbers, cut from the same foil ---- */
.my-plaque{width:min(92%,340px);margin:20px auto 0;border-radius:4px;overflow:hidden;
  box-shadow:0 14px 24px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(10px);transition:opacity .34s,transform .34s}
.my-plaque.in{opacity:1;transform:none}
.mq-crimp{position:relative;height:9px;background:linear-gradient(180deg,var(--f1),var(--f2))}
.mq-crimp i{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.22) 2px 3px,transparent 3px 4px)}
.mq-body{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px 12px;
  background:linear-gradient(168deg,var(--f2),var(--f3) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.mq-body::before{content:'';position:absolute;inset:0;opacity:.26;pointer-events:none;
  background:repeating-linear-gradient(74deg,rgba(255,255,255,.1) 0 1px,transparent 1px 4px)}
.mq-cell{position:relative;display:flex;flex-direction:column;gap:1px}
.mq-cell i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.mq-cell b{font-family:'Bebas Neue';font-size:27px;letter-spacing:.02em;line-height:1;color:#fff}
.mq-cell b.up{color:#5fe39a}
.mq-cell b.down{color:#ff8f75}
/* an arrow struck into the foil rather than a text character */
.mq-arrow{position:relative;flex:none;width:20px;height:2px;margin-top:9px;
  background:rgba(255,255,255,.3)}
.mq-arrow::after{content:'';position:absolute;right:-1px;top:-3px;
  width:7px;height:7px;border-right:2px solid rgba(255,255,255,.5);
  border-top:2px solid rgba(255,255,255,.5);transform:rotate(45deg)}
.mq-net{position:relative;margin-left:auto;padding:4px 10px;border-radius:3px;
  font-family:'Bebas Neue';font-size:20px;letter-spacing:.04em}
.mq-net.up{color:#5fe39a;background:rgba(31,160,83,.18);box-shadow:inset 0 0 0 1px rgba(47,213,115,.4)}
.mq-net.down{color:#ff8f75;background:rgba(227,53,13,.16);box-shadow:inset 0 0 0 1px rgba(227,53,13,.4)}

.my-acts{display:flex;gap:8px;width:min(94%,380px);margin:12px auto 0;
  opacity:0;transform:translateY(8px);transition:opacity .32s .06s,transform .32s .06s}
.my-acts.in{opacity:1;transform:none}
.my-act{flex:1;padding:11px 8px;border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:'Outfit';font-size:11px;font-weight:800;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#dfe3ff;
  transition:.15s}
.my-act i{font-style:normal;font-family:'Bebas Neue';font-size:15px;letter-spacing:.02em;opacity:.9}
.my-act:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.my-act:active{transform:scale(.97)}
.my-act:disabled{opacity:.45;cursor:default;transform:none}
.my-act.sell{border-color:rgba(47,213,115,.45);color:#5fe39a;background:rgba(31,160,83,.12)}
.my-act.sell:hover{background:rgba(31,160,83,.24)}
.my-act.again{border-color:rgba(255,203,5,.45);color:var(--gold);background:rgba(255,203,5,.1)}
.my-act.again:hover{background:rgba(255,203,5,.2)}
.my-note{margin-top:9px;text-align:center;font-size:9.5px;letter-spacing:.04em;color:#5d648c}

/* ---- the odds panel ----
   The back of the wrapper. Same foil colours as the pack you're on, the same
   crimped seal along the top, segmented meters like a printed spec box, and a
   barcode in the margin. It changes finish as you swipe, so it belongs to that
   sleeve instead of sitting under it as a separate card. */
.my-odds{position:relative;width:min(92%,352px);margin-top:14px;border-radius:5px;
  overflow:hidden;box-shadow:0 16px 28px -14px rgba(0,0,0,.9);
  --f1:#8a6438;--f2:#5b4022;--f3:#2e2011;--accent:#f0b978}
.my-odds.silver{--f1:#6f7a94;--f2:#3b4356;--f3:#1a1e28;--accent:#dfe7ff}
.my-odds.gold  {--f1:#c9a02c;--f2:#8a6c12;--f3:#3d2f06;--accent:#ffe07a}
.my-odds.black {--f1:#31343e;--f2:#1a1c22;--f3:#08080b;--accent:#cfd6ff}
.my-odds.diamond{--f1:#5f7fa8;--f2:#2e4460;--f3:#101a28;--accent:#bfe6ff}
/* the same seal that runs along the top of the pack */
.mo-crimp{position:relative;height:11px;background:linear-gradient(180deg,var(--f1),var(--f2))}
.mo-crimp i{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.22) 2px 3px,transparent 3px 4px)}
.mo-crimp::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:4px;
  background:var(--f3);
  clip-path:polygon(0 0,3% 100%,6% 0,9% 100%,12% 0,15% 100%,18% 0,21% 100%,24% 0,27% 100%,
    30% 0,33% 100%,36% 0,39% 100%,42% 0,45% 100%,48% 0,51% 100%,54% 0,57% 100%,60% 0,
    63% 100%,66% 0,69% 100%,72% 0,75% 100%,78% 0,81% 100%,84% 0,87% 100%,90% 0,93% 100%,
    96% 0,99% 100%,100% 0)}
.mo-body{position:relative;padding:10px 13px 9px;
  background:linear-gradient(168deg,var(--f2),var(--f3) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
/* the foil weave carries over from the front */
.mo-body::before{content:'';position:absolute;inset:0;opacity:.3;pointer-events:none;
  background:repeating-linear-gradient(74deg,rgba(255,255,255,.1) 0 1px,transparent 1px 4px)}
.mo-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding-bottom:7px;margin-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.16)}
.mo-head span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:7px;letter-spacing:.24em;color:rgba(255,255,255,.5);white-space:nowrap}
.mo-head b{font-size:10px;font-weight:700;color:var(--accent);text-align:right;letter-spacing:.01em}
.mo-row{position:relative;display:flex;align-items:center;gap:8px;padding:2.5px 0;overflow:hidden}
.mo-pct{flex:none;width:34px;text-align:right;font-family:'Bebas Neue';font-size:15px;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.mo-pct i{font-style:normal;font-size:9px;color:rgba(255,255,255,.5);margin-left:1px}
/* a printed meter: discrete cells, not a smooth bar */
.mo-meter{flex:none;width:44px;height:7px;position:relative;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,transparent 3px 5px)}
.mo-meter i{position:absolute;inset:0;width:var(--w);
  background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 5px);
  animation:mometer .55s steps(9,end) both}
@keyframes mometer{from{width:0}}
.mo-lab{flex:1;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.mo-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;color:rgba(255,255,255,.52);white-space:nowrap}
/* the rarity ladder — the same colours every collector already reads without
   being told, so the shape of the odds lands before you read a number */
.mo-row.r-common   {--r:#9aa3bd}
.mo-row.r-uncommon {--r:#5fe39a}
.mo-row.r-rare     {--r:#63a7ff}
.mo-row.r-epic     {--r:#c07bff}
.mo-row.r-legendary{--r:#ffb340}
.mo-row.r-grail    {--r:#ff5f9e}
.mo-row .mo-lab{color:var(--r,#fff)}
.mo-row .mo-meter i{background:repeating-linear-gradient(90deg,var(--r,#fff) 0 3px,transparent 3px 5px)}
/* the one everybody is actually buying */
.mo-row.r-grail{margin-top:4px;padding:5px 6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}
.mo-row.r-grail .mo-lab{
  background:linear-gradient(94deg,#ff5f6d,#ffc371,#7ee8fa,#a06cff,#ff5f6d);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mograil 5s linear infinite}
@keyframes mograil{to{background-position:280% 0}}
.mo-row.r-grail .mo-meter i{background:repeating-linear-gradient(90deg,#ff9ec4 0 3px,transparent 3px 5px)}
.mo-row.r-grail .mo-val{color:rgba(255,255,255,.85)}
.mo-row.r-grail::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(74deg,transparent 44%,rgba(255,255,255,.16) 50%,transparent 56%);
  will-change:transform;animation:mochase 3.6s ease-in-out infinite}
@keyframes mochase{0%,100%{transform:translate3d(-60%,0,0)}50%{transform:translate3d(60%,0,0)}}
.mo-foot{position:relative;display:flex;align-items:center;gap:8px;margin-top:8px;
  padding-top:7px;border-top:1px solid rgba(255,255,255,.13)}
.mo-code{flex:none;width:52px;height:13px;opacity:.6;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.85) 0 1px,transparent 1px 2px,
    rgba(255,255,255,.85) 2px 4px,transparent 4px 5px,
    rgba(255,255,255,.85) 5px 6px,transparent 6px 8px)}
.mo-foot i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:6.5px;letter-spacing:.16em;color:rgba(255,255,255,.4)}
.my-go{width:min(92%,352px);margin-top:12px}

/* ---- the slot in the machine ----
   Not a banner across the top — one more slot in the rack, the same size as
   every product, except this one is behind glass. The sleeve hangs off a coil
   and sways; the light above it catches the foil as it turns. */
.mystcell{background:linear-gradient(180deg,#14141c,#0b0b12)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.35),0 0 0 1px rgba(255,203,5,.5),
             0 0 18px -6px rgba(255,203,5,.55)!important;
  overflow:hidden}
.mystcell:hover{transform:translateY(-2px)}
.mc-case{position:relative;width:100%;height:100%;display:flex;align-items:flex-start;
  justify-content:center;perspective:420px}
/* the little lamp in the roof of the slot */
.mc-lamp{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:74px;height:56px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0,rgba(255,220,120,.5),transparent 70%);
  animation:mclamp 5.5s ease-in-out infinite}
@keyframes mclamp{0%,100%{opacity:.75}47%{opacity:1}52%{opacity:.6}}
/* the coil it hangs from */
.mc-hook{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:34px;height:7px;border-radius:4px;
  background:repeating-linear-gradient(72deg,#8f96bd 0 2px,#4a5079 2px 5px);
  box-shadow:0 2px 4px rgba(0,0,0,.7);transform-origin:50% 50%}
.mc-hang{position:absolute;top:9px;left:50%;margin-left:-20px;width:40px;
  transform-origin:50% -6px;animation:mcsway 4.4s ease-in-out infinite}
@keyframes mcsway{0%,100%{transform:rotate(-3.4deg)}50%{transform:rotate(3.4deg)}}
/* the sealed sleeve itself, turning slowly so the foil catches the lamp */
.mc-sleeve{position:relative;width:100%;aspect-ratio:63/104;border-radius:4px;overflow:hidden;
  background:linear-gradient(163deg,#7a6222,#4e3f14 54%,#2a220a);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.18);
  transform-style:preserve-3d;animation:mcturn 6.2s ease-in-out infinite}
@keyframes mcturn{0%,100%{transform:rotateY(-17deg)}50%{transform:rotateY(17deg)}}
.mc-foil{position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(70deg,rgba(255,255,255,.14) 0 1.5px,transparent 1.5px 5px)}
.mc-shine{position:absolute;inset:-40% -70%;
  background:linear-gradient(74deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  animation:mcshine 3.4s ease-in-out infinite}
@keyframes mcshine{0%,100%{transform:translateX(-40%)}50%{transform:translateX(40%)}}
/* a die-cut window in the wrapper, with nothing behind it */
.mc-win{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-family:'Bebas Neue';font-size:21px;color:#120e04;
  text-shadow:0 1px 0 rgba(255,255,255,.28)}
/* the glass front of the slot */
.mc-glass{position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(128deg,rgba(255,255,255,.16) 0 22%,transparent 42%);
  box-shadow:inset 0 0 14px rgba(0,0,0,.7)}
.mc-name{color:#ffcb05!important;font-weight:800!important;letter-spacing:.06em}
.mc-price{color:#b9ab77!important}
/* tapping turns the coil and drops it, the way the machine would */
.mystcell.vend .mc-hook{animation:mccoil .34s ease}
@keyframes mccoil{to{transform:translateX(-50%) rotate(180deg)}}
.mystcell.vend .mc-hang{animation:mcdrop .34s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes mcdrop{to{transform:translateY(64px) rotate(14deg);opacity:0}}
.mystcell.vend{box-shadow:0 1px 5px rgba(0,0,0,.35),0 0 0 1px rgba(255,203,5,.9),
  0 0 26px -4px rgba(255,203,5,.85)!important}

@media (max-width:400px){
  .my-rail{padding:10px 28% 6px}
  .my-fanslot{width:92px}
  .my-name{font-size:26px}
}