/* ---- packopen.css: opening a pack of Goop Cards (js/packopen.js). A full-screen stage: a dark room lit by the best card
   in the pack, the pack itself, then the cards one at a time, then the spread. */
body.po-open{ overflow:hidden; }
.po{ position:fixed; inset:0; z-index:1000; display:grid; grid-template-rows:auto 1fr auto; color:#f6f1ff; font:500 15px/1.35 var(--f-body);
  --aa:#e8eef8; --ab:#9fb0c8; --ca:var(--aa); --cb:var(--ab); user-select:none; -webkit-user-select:none; touch-action:none; overflow:hidden; animation:poIn .35s ease-out both; }
@keyframes poIn{ from{ opacity:0; } }
.po-bg{ position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 45%, #1d1230, #07040d 75%); }
.po-bg::after{ content:''; position:absolute; inset:0; opacity:.35; background:radial-gradient(60% 45% at 50% 50%, color-mix(in srgb, var(--aa) 35%, transparent), transparent 70%); transition:opacity .6s; }
.po-rays{ position:absolute; left:50%; top:46%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax; opacity:0; transition:opacity .8s;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ca) 40%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask:radial-gradient(closest-side, #000 8%, transparent 62%); mask:radial-gradient(closest-side, #000 8%, transparent 62%); animation:poSpin 30s linear infinite; }
@keyframes poSpin{ to{ transform:rotate(360deg); } }
.po-vignette{ position:absolute; inset:0; box-shadow:inset 0 0 18vmin 6vmin #000; }
.po-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:30; pointer-events:none; }
.po.flash::before{ content:''; position:absolute; inset:0; z-index:40; pointer-events:none; background:radial-gradient(circle at 50% 46%, #fff, color-mix(in srgb, var(--ca) 60%, transparent) 40%, transparent 75%); animation:poFlash .7s ease-out both; }
@keyframes poFlash{ from{ opacity:1; } to{ opacity:0; } }

.po-top{ position:relative; z-index:35; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 6px; }
.po-title{ font:400 13px var(--f-label); letter-spacing:.14em; text-transform:uppercase; color:#c6ff5a; }
.po-count{ font:400 18px 'Lilita One', var(--f-head); color:#fff; }
.po-skip{ min-height:40px; padding:8px 16px; border-radius:99px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff; font:700 14px var(--f-head); cursor:pointer; }
.po-skip:focus-visible, .po button:focus-visible, .po-card:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.po[data-stage="spread"] .po-skip{ visibility:hidden; }

.po-stage{ position:relative; z-index:20; display:grid; place-items:center; min-height:0; perspective:1300px; }
.po-stage > .po-packwrap, .po-stage > .po-pile{ grid-area:1 / 1; }
.po-say{ position:absolute; left:0; right:0; bottom:4px; margin:0; text-align:center; font-size:13px; color:#cbbde6; padding:0 16px; }

/* ---------- 1. the pack */
.po-packwrap{ display:grid; justify-items:center; gap:14px; }
.po-pack{ --tear:0; --rx:0deg; --ry:0deg; --hx:50%; --hy:50%; position:relative; width:min(62vw, 300px, calc((100dvh - 230px) * .625)); aspect-ratio:600/960; padding:0; border:0; background:none; cursor:grab;
  transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .25s ease-out; animation:poFloat 4s ease-in-out infinite; touch-action:none; }
@keyframes poFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
.po-pack-face{ position:absolute; inset:0; border-radius:10px; background-size:100% 100%; box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  -webkit-mask:linear-gradient(#000, #000); clip-path:inset(4.8% 0 0 0 round 0 0 10px 10px); }
.po-pack-sheen{ position:absolute; inset:4.8% 0 0 0; border-radius:0 0 10px 10px; pointer-events:none; mix-blend-mode:screen; opacity:.45;
  background:linear-gradient(115deg, transparent 34%, rgba(255,140,230,.28) 43%, rgba(255,240,170,.36) 49%, rgba(150,240,255,.28) 55%, transparent 64%);
  background-size:260% 260%; background-position:var(--hx) var(--hy); transition:background-position .2s; }
.po-pack-edge{ position:absolute; inset:4.8% -3px 0 -3px; border-radius:0 0 12px 12px; pointer-events:none; box-shadow:inset 3px 0 2px rgba(255,255,255,.35), inset -3px 0 2px rgba(0,0,0,.4); }
/* the strip that tears off the top: the top 6% of the wrapper, cut along a zigzag that runs as far as the tear has gone */
.po-strip{ position:absolute; left:0; right:0; top:0; height:6.4%; border-radius:10px 10px 0 0; background-size:100% 1563%; background-position:0 0; transform-origin:0 100%;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transform:rotate(calc(var(--tear) * -6deg)) translateY(calc(var(--tear) * -6px)); }
.po-pack.from-right .po-strip{ transform-origin:100% 100%; transform:rotate(calc(var(--tear) * 6deg)) translateY(calc(var(--tear) * -6px)); }
.po-strip-glow{ position:absolute; left:0; bottom:-3px; height:6px; width:calc(var(--tear) * 100%); border-radius:3px; background:linear-gradient(90deg, transparent, #fff 40%, var(--aa));
  box-shadow:0 0 12px 3px var(--aa); opacity:calc(.25 + var(--tear)); }
.po-pack.from-right .po-strip-glow{ left:auto; right:0; background:linear-gradient(270deg, transparent, #fff 40%, var(--aa)); }
.po-pack:not(.from-right) .po-strip::after, .po-pack .po-strip::after{ content:''; position:absolute; inset:auto 6% -2px 6%; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 6px, transparent 6px 12px); opacity:calc(1 - var(--tear)); }
.po-leak{ position:absolute; left:4%; right:4%; top:3%; height:30%; border-radius:50%; opacity:0; pointer-events:none; background:radial-gradient(50% 40% at 50% 10%, #fff, var(--aa) 35%, transparent 70%); filter:blur(8px); transition:opacity .4s; }
.po.leak .po-leak{ opacity:1; animation:poLeak .5s ease-in-out infinite alternate; }
.po.leak .po-rays{ opacity:.6; }
.po[data-aura="mythic"].leak .po-leak, .po[data-aura="full"].leak .po-leak, .po[data-aura="shiny"].leak .po-leak{ background:radial-gradient(50% 40% at 50% 10%, #fff, #ff4fd8 25%, #ffd23f 40%, #3fe0ff 55%, transparent 72%); }
@keyframes poLeak{ to{ transform:scaleY(1.25); filter:blur(12px) brightness(1.3); } }
.po-hint{ display:flex; align-items:center; gap:10px; margin:0; font:700 14px var(--f-head); color:#e8ddff; }
.po-finger{ position:relative; width:52px; height:6px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; }
.po-finger::after{ content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; border-radius:3px; background:#c6ff5a; box-shadow:0 0 10px #c6ff5a; animation:poSwipe 1.4s ease-in-out infinite; }
@keyframes poSwipe{ to{ left:100%; } }

/* ---------- 3. the cards */
.po-pile{ position:relative; width:min(78vw, 360px, calc((100dvh - 250px) * .914)); aspect-ratio:1199/1312; }
.po-card{ position:absolute; inset:0; --rx:0deg; --ry:0deg; --hx:50%; --hy:50%; cursor:pointer; outline:none; border-radius:6%; }
.po-flip{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,1.4,.5,1); transform:rotateX(var(--rx)) rotateY(var(--ry)); border-radius:6%; }
.po-card.up .po-flip{ transform:rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.po-back, .po-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:6%; }
.po-back{ width:100%; height:100%; box-shadow:0 20px 40px rgba(0,0,0,.6); }
.po-face{ transform:rotateY(180deg); }
.po-face .gc{ height:100%; }
.po-face .gc .gc-holo{ --hx:var(--hx); }
.po-card.up .po-face .gc{ filter:drop-shadow(0 0 22px color-mix(in srgb, var(--aa) 70%, transparent)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
/* the hold before a rare card turns: a glow from behind, a tremble that grows */
.po-card.charge .po-back{ animation:poTremble .09s linear infinite; box-shadow:0 0 0 3px var(--aa), 0 0 40px 10px var(--aa), 0 0 90px 30px color-mix(in srgb, var(--ab) 60%, transparent); }
.po[data-charge] .po-rays{ opacity:.9; }
.po[data-charge="max"] .po-rays{ animation-duration:6s; }
.po[data-charge="max"] .po-bg::after{ opacity:.85; }
.po[data-charge="max"] .po-card.charge .po-back{ animation-duration:.05s; }
@keyframes poTremble{ 0%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-2px,1px) rotate(-.6deg); } 50%{ transform:translate(2px,-1px) rotate(.6deg); } 75%{ transform:translate(-1px,-2px) rotate(-.3deg); } }
.po-tag{ position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); z-index:5; padding:6px 14px; border-radius:99px; font:800 13px/1 var(--f-head); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 0 0 2px #120a1e, 0 6px 14px rgba(0,0,0,.5); opacity:0; }
.po-card.up .po-tag{ animation:poTag .5s .35s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes poTag{ from{ opacity:0; transform:translateX(-50%) scale(.3); } to{ opacity:1; transform:translateX(-50%) scale(1); } }
.po-tag.new{ background:#c6ff5a; color:#142400; } .po-tag.dup{ background:#2f2047; color:#fff; }
.po-tag.foil{ background:linear-gradient(100deg, #ff9ae0, #ffe27a 40%, #8fe6ff); color:#1b0c22; } .po-tag.full{ background:linear-gradient(100deg, #ffe9a3, #ffb52e); color:#2a1600; }
/* the big word when a rare card lands */
.po-callout{ position:absolute; left:0; right:0; top:2%; z-index:25; display:grid; justify-items:center; pointer-events:none; opacity:0; }
.po-callout b{ font:400 clamp(40px, 11vw, 84px)/1 var(--f-display); color:#fff; -webkit-text-stroke:7px #0d0716; paint-order:stroke fill; text-shadow:0 0 30px var(--ca), 0 6px 0 rgba(0,0,0,.5); }
.po-callout small{ font:700 15px var(--f-head); color:#efe6ff; text-shadow:0 2px 4px #000; }
.po-callout[data-k="mythic"] b, .po-callout[data-k="shiny"] b, .po-callout[data-k="full"] b{ background:linear-gradient(90deg, #ff6fe0, #ffe066, #b6ff5a, #6fe8ff, #c48aff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0; text-shadow:none; filter:drop-shadow(0 0 2px #0d0716) drop-shadow(0 0 2px #0d0716) drop-shadow(0 4px 0 #0d0716) drop-shadow(0 0 18px var(--ca)); }
.po-callout.show{ animation:poCall 1.8s cubic-bezier(.2,.9,.3,1) both; }
@keyframes poCall{ 0%{ opacity:0; transform:scale(2.2); } 12%{ opacity:1; transform:scale(.95); } 20%{ transform:scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translateY(-10px); } }

/* the tray of cards already turned */
.po-tray{ position:relative; z-index:22; display:flex; justify-content:center; gap:8px; min-height:74px; padding:8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.po-mini{ width:52px; padding:0; border:0; border-radius:5px; background:none; cursor:pointer; opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s cubic-bezier(.2,.9,.3,1.5); }
.po-mini.in{ opacity:1; transform:none; }
.po-mini img{ display:block; width:100%; border-radius:5px; box-shadow:0 4px 10px rgba(0,0,0,.6); }
.po-mini.gold img{ box-shadow:0 0 0 2px #ffd23f, 0 4px 10px rgba(0,0,0,.6); } .po-mini.platinum img{ box-shadow:0 0 0 2px #8fe9ff, 0 0 10px #3fd8ff; }
.po-mini.diamond img{ box-shadow:0 0 0 2px #c7a8ff, 0 0 12px #8a4dff; } .po-mini.mythic img, .po-mini.shiny img, .po-mini.full img{ box-shadow:0 0 0 2px #ffd76a, 0 0 14px #ff4fd8; }

/* ---------- 4. the spread */
.po-spread{ position:absolute; inset:0; z-index:28; display:grid; align-content:center; justify-items:center; gap:14px; padding:70px 14px calc(env(safe-area-inset-bottom, 0px) + 18px); overflow:auto; touch-action:pan-y; }
.po-h{ margin:0; font:400 clamp(30px, 7vw, 46px)/1 var(--f-display); color:#c6ff5a; text-shadow:0 3px 0 #2a1747; }
.po-cards{ display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 170px)); gap:24px 14px; width:min(100%, 960px); justify-content:center; }
.po-cards:has(> :nth-child(6)){ --n:4; }
.po-sc{ position:relative; padding:0; border:0; background:none; cursor:pointer; animation:poDeal .5s calc(var(--i) * 90ms) cubic-bezier(.2,.9,.3,1.3) both; border-radius:6%; }
.po-sc .gc{ transition:transform .2s; } .po-sc:hover .gc{ transform:translateY(-6px) rotate(-1deg); }
.po-sc.best{ z-index:2; } .po-sc.best .gc{ transform:scale(1.04); filter:drop-shadow(0 0 22px var(--aa)) drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.po-sc .po-tag{ opacity:1; bottom:-12px; font-size:11px; padding:5px 10px; }
@keyframes poDeal{ from{ opacity:0; transform:translateY(40px) rotate(6deg) scale(.8); } }
.po-sum{ margin:6px 0 0; display:grid; justify-items:center; gap:8px; text-align:center; font-size:15px; }
.po-sum b{ color:#fff; } .po-shiny{ background:linear-gradient(90deg, #ff9ae0, #ffe27a, #8fe6ff); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.po-up{ color:#c6ff5a; font-weight:800; }
.po-bar{ display:block; width:min(320px, 80vw); height:10px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.po-bar > i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #c6ff5a, #5af0ff, #c77dff, #ffd23f); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
.po-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

@media (max-width:640px){
  .po-cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px 10px; }
  .po-cards:has(> :nth-child(6)){ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .po-mini{ width:44px; }
}
@media (orientation:landscape) and (max-height:540px){
  .po-pack{ width:calc((100dvh - 120px) * .625); }
  .po-pile{ width:calc((100dvh - 150px) * .914); }
  .po-tray{ position:absolute; right:8px; top:60px; bottom:auto; flex-direction:column; min-height:0; padding:0; }
  .po-mini{ width:36px; }
  .po-cards{ grid-template-columns:repeat(8, minmax(0, 120px)); }
  .po-spread{ align-content:start; padding-top:56px; }
  .po-callout{ top:auto; bottom:30px; } .po-callout b{ font-size:30px; -webkit-text-stroke:5px #0d0716; } .po-callout small{ display:none; }
}
.po.calm *, .po.calm{ animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.01s !important; }
.po.calm .po-rays{ display:none; }

/* a card from the keeper's wishlist */
.po-tag.wish{ background:linear-gradient(100deg, #fff3b0, #ffd23f 50%, #ffb0e6); color:#2a1600; box-shadow:0 0 18px rgba(255,210,63,.6); }
.po-callout[data-k="wish"] b{ background:linear-gradient(90deg, #fff3b0, #ffd23f, #ff9ad8, #ffd23f); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0; text-shadow:none; filter:drop-shadow(0 0 2px #0d0716) drop-shadow(0 0 2px #0d0716) drop-shadow(0 4px 0 #0d0716) drop-shadow(0 0 18px #ffd23f); }