.pack-opening[hidden] { display:none!important; }
.pack-opening { position:fixed; inset:0; z-index:1070; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% 42%,#fff 0%,#f8fbff 40%,#edf4ff 100%); color:#1e3a8a; }
.pack-opening::before { content:''; position:absolute; inset:18px; border:1px solid #d7e5f8; border-radius:22px; pointer-events:none; }
.pack-opening-header { position:absolute; top:max(42px,env(safe-area-inset-top)); left:24px; right:24px; text-align:center; }
.pack-opening-header span { display:block; color:#6483b0; font-size:9px; font-weight:700; line-height:1.6; letter-spacing:2.6px; }
.pack-opening-header strong { display:block; font-size:clamp(14px,2vw,21px); font-weight:600; margin-top:12px; letter-spacing:-.5px; color:#17376b; }
.pack-rig { --pack-scale:1; width:290px; height:400px; position:absolute; top:48%; left:50%; transform:translate(-50%,-50%) scale(var(--pack-scale)); perspective:1400px; isolation:isolate; }
.pack-wrapper { position:absolute; inset:0; z-index:4; transform-style:preserve-3d; filter:drop-shadow(0 20px 18px #163a8a25); }
.pack-body { position:absolute; inset:0; border-radius:8px; background:#235abb; overflow:hidden; box-shadow:inset 3px 0 2px #ffffffb3,inset -3px 0 2px #081f6099; }
.pack-artwork { position:absolute; inset:0; width:100%; height:100%; }
.pack-brand { position:absolute; top:54px; left:18px; right:18px; text-align:center; color:#fff; font-size:23px; font-weight:800; letter-spacing:-1px; text-shadow:0 1px 1px #0a2968; }
.pack-brand span { display:block; font-size:6px; letter-spacing:2.1px; font-weight:600; margin-top:5px; }
.pack-edition { position:absolute; top:125px; left:50%; transform:translateX(-50%); border:1px solid #e0efff80; border-radius:20px; color:#e0efff; padding:4px 9px; font-size:6px; letter-spacing:1.7px; font-weight:700; white-space:nowrap; }
.pack-title { position:absolute; top:276px; left:0; right:0; color:#fff; text-align:center; font-weight:700; font-size:24px; line-height:1.02; letter-spacing:-1.1px; text-shadow:0 1px 1px #173776; }
.pack-title span { display:block; }
.pack-detail { position:absolute; bottom:41px; left:0; right:0; color:#e5f1ff; text-align:center; font-size:7px; font-weight:700; letter-spacing:1.5px; }
.pack-detail span { display:block; font-size:5px; letter-spacing:.4px; font-weight:500; margin-top:6px; }
.pack-serial { position:absolute; left:15px; bottom:15px; color:#dbeafe; font-size:6px; letter-spacing:1.6px; z-index:2; }
.pack-bottom-seal,.pack-tear-strip { background:repeating-linear-gradient(90deg,#edf5ff55 0px,#071f6e66 1px,#b4d5ff66 2px,#28539966 3px,#abcfff55 4px),linear-gradient(90deg,#3e69b3,#adc9ed 16%,#406db2 24%,#83ace4 54%,#204783 82%,#adc9ed); }
.pack-bottom-seal { position:absolute; left:0; right:0; bottom:0; height:29px; border-top:1px solid #fff6; box-shadow:inset 0 2px 4px #0b235a66; }
.pack-foil-light { position:absolute; top:-30%; left:0; width:95%; height:180%; background:linear-gradient(90deg,transparent 10%,#ffffff08 35%,#ffffff70 47%,#ffffff18 53%,transparent 68%); mix-blend-mode:screen; pointer-events:none; }
.pack-creases { position:absolute; inset:0; opacity:calc(var(--crease,0) * .85); background:conic-gradient(from 120deg at 94% 10%,transparent 0deg,#fff7 6deg,#00194470 12deg,transparent 18deg,transparent 28deg,#ffffff55 32deg,transparent 38deg),conic-gradient(from -30deg at 5% 45%,transparent 0deg,#0004 4deg,#fff6 8deg,transparent 14deg); mix-blend-mode:soft-light; }
.pack-tear-strip { position:absolute; top:0; left:0; width:100%; height:41px; border-radius:6px 6px 0 0; transform-origin:5% 0%; z-index:7; box-shadow:inset 0 1px 0 #ffffffaa,0 3px 4px #09245450; border-bottom:1px dashed #ddeaff99; }
.pack-tear-strip span { position:absolute; top:15px; left:38px; right:38px; font-size:5px; font-weight:700; letter-spacing:2px; text-align:center; color:#eaf3ff; }
.pack-tear-notch { position:absolute; right:0; top:30px; width:9px; height:10px; background:#f6faff; clip-path:polygon(100% 0,0 50%,100% 100%); }
.pack-mouth { position:absolute; left:4px; right:4px; top:20px; height:33px; border-radius:50%; background:linear-gradient(#dce6f4,#4e607b 18%,#081226 48%,#273a57 70%,#b7cadf); opacity:0; z-index:0; box-shadow:0 -1px 0 #fff; }
.pack-lip { position:absolute; left:1px; right:1px; top:24px; height:24px; transform-origin:center bottom; background:linear-gradient(#f1f5f9,#8b9db6 35%,#d8e4f5 60%,#53657e); clip-path:polygon(0 0,5% 6%,10% 0,16% 8%,22% 0,28% 7%,35% 1%,42% 8%,50% 0,59% 8%,66% 0,74% 6%,81% 0,87% 8%,94% 0,100% 8%,100% 100%,0 100%); z-index:1; opacity:0; }
.pack-torn-edge { position:absolute; top:36px; left:0; right:0; height:8px; background:linear-gradient(#fff,#a4b5d0 50%,#deeaff); clip-path:polygon(0 60%,3% 0,7% 85%,12% 8%,16% 70%,22% 0,28% 65%,33% 13%,39% 85%,44% 0,50% 65%,56% 0,61% 90%,67% 8%,72% 70%,77% 0,83% 60%,88% 0,94% 85%,100% 8%,100% 100%,0 100%); z-index:5; opacity:0; }
.pack-card-holder { position:absolute; top:36px; left:21px; width:248px; height:334px; z-index:2; perspective:1200px; opacity:0; }
.pack-card-rotor { width:100%; height:100%; transform-style:preserve-3d; position:relative; }
.pack-card-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:19px; }
.pack-card-front { transform:rotateY(180deg); }
.pack-card-front .pull-card { width:248px; height:334px; box-sizing:border-box; }
.pack-card-front .pull-card .instrument-photo { height:173px; }
.pack-card-back { overflow:hidden; border:3px solid #b4d0f8; background:repeating-linear-gradient(45deg,#ffffff05 0 1px,transparent 1px 13px),radial-gradient(ellipse at 32% 20%,#4b83df,#163a85 65%); box-shadow:0 10px 22px #112b6630,inset 0 0 0 5px #ffffff12,inset 0 0 0 6px #c8ddff50; color:#eff6ff; }
.pack-back-brand { position:absolute; top:24px; left:0; right:0; text-align:center; font-size:10px; letter-spacing:3px; font-weight:800; }
.pack-back-mark { position:absolute; inset:0; display:grid; place-items:center; font-family:Georgia,serif; font-size:90px; font-weight:700; color:#e0efff; text-shadow:0 2px 0 #fff5,0 4px 10px #0f245a; transform:rotate(-12deg); }
.pack-back-orbit { position:absolute; width:140px; height:140px; border:1px solid #c3dcff77; border-radius:50%; top:83px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 8px #ffffff05,0 0 0 9px #d4e5ff22,0 0 0 25px #ffffff03,0 0 0 26px #d4e5ff11; }
.pack-back-label { position:absolute; bottom:53px; left:0; right:0; font-size:6px; font-weight:600; letter-spacing:2px; text-align:center; }
.pack-back-footer { position:absolute; bottom:22px; left:0; right:0; font-size:5px; font-weight:600; letter-spacing:1.1px; color:#c5d9fc; text-align:center; }
.pack-floor-shadow { position:absolute; bottom:-34px; left:50%; width:235px; height:35px; border-radius:50%; background:#2a4f863d; filter:blur(16px); z-index:0; }
.pack-reveal-glow { position:absolute; inset:-85px; border-radius:50%; background:radial-gradient(circle,#bfdbfe80,transparent 65%); opacity:0; z-index:0; transition:opacity 700ms; }
.is-pack-revealed .pack-reveal-glow { opacity:1; }
.pack-particles { position:absolute; left:50%; top:48%; z-index:7; }
.pack-spark { position:absolute; width:3px; height:3px; border-radius:50%; background:#60a5fa; opacity:0; }
.is-pack-revealed .pack-spark { animation:pack-discovery-spark 650ms var(--spark-delay) cubic-bezier(.12,.7,.25,1) both; }
@keyframes pack-discovery-spark { 0% { opacity:0; transform:rotate(var(--spark-angle)) translateX(80px) scale(.5); } 25% { opacity:.9; } 100% { opacity:0; transform:rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(0); } }
.pack-opening-caption { position:absolute; bottom:max(44px,env(safe-area-inset-bottom)); left:24px; right:24px; text-align:center; }
.pack-opening-caption>span { display:block; font-size:8px; color:#5a7ca9; font-weight:700; letter-spacing:2.2px; }
.pack-opening-caption>strong { display:block; font-size:clamp(17px,2vw,25px); font-weight:600; letter-spacing:-.6px; color:#17376b; margin-top:10px; }
.pack-opening-steps { display:flex; justify-content:center; gap:24px; margin-top:20px; }
.pack-opening-steps span { color:#9eb1cc; font-size:7px; font-weight:700; letter-spacing:1.5px; position:relative; transition:color 350ms; }
.pack-opening-steps span+span::before { content:''; position:absolute; left:-17px; top:4px; width:8px; height:1px; background:#d1def0; }
.pack-opening-steps .is-active { color:#2563eb; }
.pack-opening[data-finish=gold] .pack-body { background:#bb8729; }
.pack-opening[data-finish=gold] .pack-brand,.pack-opening[data-finish=gold] .pack-title { color:#fff8da; text-shadow:0 1px 1px #815607; }
.pack-opening[data-finish=gold] .pack-edition { color:#783c07; background:#fef3c78a; border-color:#fff4ba; }
.pack-opening[data-finish=gold] .pack-bottom-seal,.pack-opening[data-finish=gold] .pack-tear-strip { background:repeating-linear-gradient(90deg,#fff7bd80 0px,#83540d77 1px,#fbd87580 2px,#a76e1666 3px,#ffe4a355 4px),linear-gradient(90deg,#a66b12,#ffedb0 16%,#c28a24 24%,#f2ca68 54%,#a36a12 82%,#fff0b8); }
.pack-card-back[data-finish=gold] { border-color:#eaca7d; background:repeating-linear-gradient(45deg,#ffffff09 0 1px,transparent 1px 13px),radial-gradient(ellipse at 32% 20%,#b58631,#52360f 75%); }
.pack-opening[data-finish=gold] .pack-back-orbit { border-color:#fff0ac77; }
.pack-opening[data-finish=gold] .pack-back-mark { color:#fff0bf; text-shadow:0 2px 0 #fff5,0 4px 10px #513609; }
.pack-opening[data-finish=gold] .pack-reveal-glow { background:radial-gradient(circle,#fef3c7dd,transparent 68%); }
.pack-opening[data-finish=gold] .pack-spark { background:#e0a62e; box-shadow:0 0 7px #facc15; }
@media(max-height:520px) { .pack-opening-header { top:25px; } .pack-opening-header strong { display:none; } .pack-opening-caption { bottom:24px; } .pack-opening-caption>strong { font-size:15px; margin-top:6px; } .pack-opening-steps { margin-top:8px; } .pack-rig { top:45%; } }
@media(prefers-reduced-motion:reduce) { .pack-opening * { animation:none!important; transition:none!important; } }
.pack-opening.auto-rolling .pack-opening-caption { bottom:110px; }
@media(max-height:520px) { .pack-opening.auto-rolling .pack-opening-caption { display:none; } }

.pack-opening { transition:opacity 220ms ease; }
.pack-opening.is-departing { opacity:0; }
.pack-confetti { width:5px; height:9px; border-radius:1px; }
.is-pack-revealed .pack-confetti { animation:pack-confetti-burst 420ms var(--spark-delay) cubic-bezier(.12,.7,.25,1) both; }
@keyframes pack-confetti-burst { from { opacity:1; transform:rotate(var(--spark-angle)) translateX(65px) rotate(0deg); } to { opacity:0; transform:rotate(var(--spark-angle)) translateX(var(--spark-distance)) rotate(330deg); } }

/* The finish continues across the foil wrapper and the card back. */
.pack-card-back[data-finish=rainbow]{border-color:#ddd6fe;background:repeating-linear-gradient(45deg,#ffffff24 0 1px,transparent 1px 13px),linear-gradient(135deg,#fb7185,#fbbf24 22%,#4ade80 43%,#38bdf8 65%,#818cf8 82%,#c084fc);box-shadow:inset 0 0 0 3px #ffffff99,0 12px 35px #7c3aed33;}
.pack-opening[data-finish=rainbow] .pack-back-orbit{border-color:#ffffffa6;}.pack-opening[data-finish=rainbow] .pack-back-mark{color:white;text-shadow:0 2px 0 #fff5,0 4px 14px #7c3aed77;}
.pack-opening[data-finish=rainbow] .pack-back-brand,.pack-opening[data-finish=rainbow] .pack-back-label,.pack-opening[data-finish=rainbow] .pack-back-footer{color:#fff;text-shadow:0 1px 3px #33415566;}
.pack-card-back[data-finish=galactic]{border-color:#93c5fd;background:radial-gradient(circle at 15% 21%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 43%,#bfdbfe 0 1px,transparent 2px),radial-gradient(circle at 70% 14%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 26% 76%,#c4b5fd 0 1px,transparent 2px),radial-gradient(ellipse at 72% 25%,#7c3aed77,transparent 55%),radial-gradient(ellipse at 20% 70%,#2563eb66,transparent 60%),linear-gradient(145deg,#172554,#020617);box-shadow:inset 0 0 0 3px #bfdbfe33,0 0 35px #818cf166;}
.pack-opening[data-finish=galactic] .pack-back-orbit{border-color:#a5b4fc88;box-shadow:0 0 24px #818cf144;}.pack-opening[data-finish=galactic] .pack-back-mark{color:#e0f2fe;text-shadow:0 0 22px #a5b4fc;}
.pack-opening[data-finish=galactic] .pack-back-brand,.pack-opening[data-finish=galactic] .pack-back-label,.pack-opening[data-finish=galactic] .pack-back-footer{color:#bfdbfe;}

/* Center back ornaments proportionally on every card size. */
.pack-back-orbit{top:50%;left:50%;width:56%;height:auto;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;}
.pack-back-mark{inset:0;transform:none;display:grid;place-items:center;line-height:1;}
.pack-back-brand{top:6%;}.pack-back-label{bottom:13%;}.pack-back-footer{bottom:5%;}
.pack-card-holder{height:347px;}.pack-card-front .pull-card{height:347px;}

/* Keep card shadows inside its face while it is held in the packet. */
.pack-card-holder .pack-card-front{overflow:hidden;}

.pack-card-back[data-finish=spooked]{border-color:#f8b34e;color:#ffedc6;background:repeating-linear-gradient(120deg,#ffd1950b 0 1px,transparent 1px 14px),radial-gradient(ellipse at 25% 20%,#cf6d24,#442048 65%,#24112c);box-shadow:inset 0 0 0 5px #ea8c3022,inset 0 0 0 6px #ffcf7866,0 10px 22px #28122e55}.pack-card-back[data-finish=spooked] .pack-back-orbit{border-color:#fbbb6a99;box-shadow:0 0 0 8px #ffb34d08,0 0 0 9px #ffbf5c44,0 0 0 25px #ffbb6606,0 0 0 26px #ffba6122}.pack-card-back[data-finish=spooked] .pack-back-mark img{width:85%;height:75%;object-fit:contain;filter:drop-shadow(0 0 8px #ff9b3244)}.pack-card-back[data-finish=spooked] .pack-back-brand{font-family:Candal,sans-serif;font-weight:400;letter-spacing:2px}.pack-card-back[data-finish=spooked] .pack-back-footer{color:#ffd391}.pack-card-back[data-finish=spooked] .pack-back-label{color:#ffe7bf}
:is(.sealed-pack.finish-spooked,.pack-opening[data-finish=spooked]) .pack-body{background:#c96520;box-shadow:inset 3px 0 2px #ffe2a9b3,inset -3px 0 2px #60202d99}
:is(.sealed-pack.finish-spooked,.pack-opening[data-finish=spooked]) :is(.pack-bottom-seal,.pack-tear-strip){background:repeating-linear-gradient(90deg,#ffe6b580 0px,#8d341c77 1px,#ffc57480 2px,#b7642666 3px,#ffe0a155 4px),linear-gradient(90deg,#ad571f,#ffe0a2 16%,#cb7229 24%,#ffc26f 54%,#8d3e1e 82%,#ffe0a2);color:#612331;box-shadow:inset 0 2px 4px #7b361b66}
:is(.sealed-pack.finish-spooked,.pack-opening[data-finish=spooked]) .pack-brand{color:#fff0ce;text-shadow:0 1px 1px #702a27}
:is(.sealed-pack.finish-spooked,.pack-opening[data-finish=spooked]) .pack-title{color:#512039;text-shadow:none}
:is(.sealed-pack.finish-spooked,.pack-opening[data-finish=spooked]) .pack-edition{color:#fff0cb;border-color:#ffe4ad80}