/* MAWBORN shared design system (site + game).
   Language: hand-inked cartoon. Thick ink outlines, glossy toy-like buttons, rift-night backdrop.
   Theme: single dark "rift night" theme on purpose; the brand art is built around it.
   Radius scale: panels 22px, buttons 16px, chips/pills full, card art 12px. */
@font-face{font-family:'Lilita One';src:url('fonts/lilita-one.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
 /* Palette sampled from the Grumble's Crossing backdrop (img/grumbles-crossing.webp).
    Surfaces: moss-soil neutrals from the grass shadows and ink lines (the --plum names are legacy).
    One action colour: amber path. Small accents only: orange sky, olive grass, mushroom pink.
    Purple appears only where the cards own it (Storm / Void elements, holo foil). */
 --ink:#17150f;--ink-2:#24221a;
 --night:#1b1a12;--night-2:#24231a;--plum:#302f22;--plum-2:#3e3d2c;--plum-3:#535239;
 --cream:#fbf1dc;--cream-2:#ecdcbc;--muted:#d6d2b8;--muted-2:#a3a087;
 --gold:#ffb43c;--gold-hi:#ffdc8f;--gold-lo:#d47f17;
 --lime:#a9bc35;--lime-hi:#d8e47e;--lime-lo:#6b7a1b;
 --coral:#ff7424;--coral-hi:#ffb487;--coral-lo:#c4500c;
 --teal:#e0728a;--teal-hi:#f7bcc8;--teal-lo:#a3405a;
 --scrim:27 26 18;
 --el-wild:#8cc94a;--el-ember:#ff8a3d;--el-tide:#4fb2ff;--el-storm:#b48bff;--el-void:#8e5bd6;--el-neutral:#b9b2a4;
 --r-art:12px;--r-btn:16px;--r-panel:22px;
 --display:'Lilita One','Arial Rounded MT Bold','Arial Black',sans-serif;
 --body:'Fredoka','Trebuchet MS',Arial,sans-serif;
 --pop:cubic-bezier(.2,1.4,.4,1);--out:cubic-bezier(.16,1,.3,1);
 /* Strong UI curves: ease-out for enter/feedback, ease-in-out for on-screen moves */
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
 color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-weight:500;color:var(--cream);background:var(--night);-webkit-font-smoothing:antialiased}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Icons (Phosphor fill, see icons.js) */
.ic{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.18em;overflow:visible;
 /* Monster ink: every glyph gets the same thick hand-inked outline as the card art, painted under the fill */
 stroke:var(--ic-ink,var(--ink));stroke-width:var(--ic-stroke,15px);stroke-linejoin:round;paint-order:stroke fill}
.ic.flat{stroke:none}

/* Maw tiles: icon badges grow little ink horns and cream fangs, so every tile reads as a tiny Mawling.
   Horns and fangs are decorative ornaments (the glyph inside is still Phosphor). */
.maw,.dock-ic,.rule-ic,.step-ic,.task-ic,.el-ic,.result-icon{position:relative;rotate:var(--maw-tilt,-3deg)}
.maw::before,.dock-ic::before,.rule-ic::before,.step-ic::before,.task-ic::before,.el-ic::before,.result-icon::before,
.maw::after,.dock-ic::after,.rule-ic::after,.step-ic::after,.task-ic::after,.el-ic::after,.result-icon::after{
 content:"";position:absolute;left:50%;translate:-50% 0;pointer-events:none;background:center/100% 100% no-repeat;transition:transform .3s var(--pop)}
.maw::before,.dock-ic::before,.rule-ic::before,.step-ic::before,.task-ic::before,.el-ic::before,.result-icon::before{
 width:80%;aspect-ratio:64/22;bottom:calc(100% - 5px);transform-origin:50% 100%;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cg fill='%2317150f'%3E%3Cpath d='M7 22C7 14 5 7 1.5 1.5C11 4 18 12 21 22Z'/%3E%3Cpath d='M57 22C57 14 59 7 62.5 1.5C53 4 46 12 43 22Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%237a7856' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 17C9 12 7.6 8.6 5.6 5.6'/%3E%3Cpath d='M55 17C55 12 56.4 8.6 58.4 5.6'/%3E%3C/g%3E%3C/svg%3E")}
.maw::after,.dock-ic::after,.rule-ic::after,.step-ic::after,.task-ic::after,.el-ic::after,.result-icon::after{
 width:60%;aspect-ratio:64/19;top:calc(100% - 4px);transform-origin:50% 0;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 19'%3E%3Cg fill='%23fff3d6' stroke='%2317150f' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M8 1.8H28L18.6 17Z'/%3E%3Cpath d='M36 1.8H56L46.6 17Z'/%3E%3C/g%3E%3C/svg%3E")}
:nth-child(even)>:is(.dock-ic,.rule-ic,.step-ic,.task-ic,.el-ic),.maw:nth-child(even){--maw-tilt:3deg}
/* Round badges sit their horns lower on the curve */
.el-ic::before,.result-icon::before,.maw.round::before{width:72%;bottom:calc(100% - 9px)}
.el-ic::after,.result-icon::after,.maw.round::after{top:calc(100% - 6px)}
/* Alive on hover: horns wiggle, jaw drops */
@media (hover:hover) and (pointer:fine){
 :is(.dock-btn,.step,.el-tab,.task,.rule,.maw):hover :is(.dock-ic,.step-ic,.el-ic,.task-ic,.rule-ic,.maw)::before,.maw:hover::before{animation:horn-wiggle .5s ease-in-out}
 :is(.dock-btn,.step,.el-tab,.task,.rule,.maw):hover :is(.dock-ic,.step-ic,.el-ic,.task-ic,.rule-ic,.maw)::after,.maw:hover::after{transform:translateY(2px) scaleY(1.15)}
}
.step.active .step-ic::after,.dock-btn.glow .dock-ic::after{transform:translateY(1px) scaleY(1.1)}
@keyframes horn-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}65%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.maw::before,.dock-ic::before,.step-ic::before,.el-ic::before,.task-ic::before,.rule-ic::before{animation:none!important}}

/* Toon text: cream/gold fill with a hard ink stroke and drop */
.toon{font-family:var(--display);font-weight:400;letter-spacing:.02em;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;text-shadow:0 .12em 0 var(--ink)}
.toon-gold{color:var(--gold)}.toon-coral{color:var(--coral)}.toon-lime{color:var(--lime)}.toon-cream{color:var(--cream)}

/* ---------- Hand-inked buttons ----------
   Same language as the card art: flat cel fill, darker lower shade, thick ink line, slightly
   hand-cut corners, a white highlight streak, and the MAWBORN logo's brush ticks on hover. */
.btn{--c:var(--plum-2);--hi:var(--plum-3);--lo:#262519;--fg:var(--cream);--wob:17px 13px 19px 12px/13px 19px 12px 17px;--lift:5px;
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;
 padding:.72em 1.35em .66em;border:3px solid var(--ink);border-radius:var(--wob);
 font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);text-decoration:none;
 background-color:var(--c);
 box-shadow:inset 0 -.32em 0 var(--lo),inset 0 3px 0 var(--hi),0 var(--lift) 0 var(--ink);
 transition:transform .2s var(--pop),box-shadow .2s,background-color .2s}
/* highlight streak + dot, like the shine drawn on the monsters */
.btn::before{content:"";position:absolute;left:11px;top:5px;width:min(42%,84px);height:5px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.8) 0 70%,transparent 70% 80%,rgba(255,255,255,.8) 80%);pointer-events:none;rotate:-2deg}
/* brush ticks that burst out on hover */
.btn::after{content:"";position:absolute;inset:-6px -26px;z-index:-1;pointer-events:none;opacity:0;scale:.5;transition:opacity .2s,scale .35s var(--pop);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg stroke='%23fff3d6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M13 8 4 3'/%3E%3Cpath d='M12 14H2'/%3E%3Cpath d='M13 20l-9 5'/%3E%3C/g%3E%3C/svg%3E") left center/16px 28px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg stroke='%23fff3d6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 8l9-5'/%3E%3Cpath d='M4 14h10'/%3E%3Cpath d='M3 20l9 5'/%3E%3C/g%3E%3C/svg%3E") right center/16px 28px no-repeat}
/* Hover lift only for real pointers, so taps on phones never leave a button stuck "hovered" */
@media (hover:hover) and (pointer:fine){
 .btn:hover{--lift:8px;transform:translateY(-3px);animation:btn-wiggle .45s var(--pop)}
 .btn:hover::after{opacity:1;scale:1}
 .btn:hover .ic{transform:rotate(-10deg) scale(1.15)}
 .btn-sm:hover{--lift:5px}
 .btn-lg:hover{--lift:10px}
 .btn-shine:hover{animation:btn-wiggle .45s var(--pop),btn-shine 4.2s ease-in-out infinite}
}
/* Press is fast (the system answering); release springs back on the slower pop curve */
.btn:active{--lift:1px;transform:translateY(4px) scale(1.04,.92);animation:none;transition-duration:90ms;transition-timing-function:var(--ease-out)}
.btn:disabled,.btn[aria-disabled="true"]{--c:#4f4e3e;--lo:#3c3b2e;--hi:#626150;--fg:#bdbaa4;--lift:3px;cursor:not-allowed;transform:none;animation:none}
.btn:disabled::after,.btn[aria-disabled="true"]::after,.btn:disabled::before{display:none}
.btn .ic{width:1.25em;height:1.25em;filter:drop-shadow(0 2px 0 rgba(26,24,16,.35));transition:transform .25s var(--pop)}
/* dark buttons get the logo's inked lettering */
.btn:not(.btn-gold):not(.btn-lime):not(.btn-coral):not(.btn-teal):not(.btn-cream){-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.btn-gold{--c:var(--gold);--hi:var(--gold-hi);--lo:var(--gold-lo);--fg:var(--ink)}
.btn-lime{--c:var(--lime);--hi:var(--lime-hi);--lo:var(--lime-lo);--fg:var(--ink)}
.btn-coral{--c:var(--coral);--hi:var(--coral-hi);--lo:var(--coral-lo);--fg:var(--ink)}
.btn-teal{--c:var(--teal);--hi:var(--teal-hi);--lo:var(--teal-lo);--fg:var(--ink)}
.btn-cream{--c:var(--cream-2);--hi:#fffaf0;--lo:#d9c18f;--fg:var(--ink)}
.btn-sm{font-size:.8rem;padding:.52em .95em .48em;--lift:3px;--wob:13px 10px 14px 9px/10px 14px 9px 13px}
.btn-sm::before{left:8px;top:4px;height:4px}
.btn-lg{font-size:1.35rem;padding:.62em 1.5em .56em;border-width:4px;--lift:7px;--wob:24px 17px 26px 16px/17px 26px 16px 24px}
.btn-lg::before{left:16px;top:7px;height:6px}
.btn-round{width:3.1rem;height:3.1rem;padding:0;--wob:52% 48% 50% 46%/48% 52% 46% 50%}
.btn-round::before{left:24%;top:12%;width:34%;height:4px;rotate:-24deg;background:rgba(255,255,255,.8)}
.btn-round::after{inset:-10px -22px}
/* travelling glint, painted inside the button's own shape (no clipping box needed) */
.btn-shine{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 58%);background-size:300% 100%;background-repeat:no-repeat;background-position:150% 0;animation:btn-shine 4.2s ease-in-out infinite}
@keyframes btn-shine{0%,62%{background-position:150% 0}84%,100%{background-position:-50% 0}}
@keyframes btn-wiggle{0%{rotate:0deg}30%{rotate:-2.5deg}60%{rotate:2deg}100%{rotate:0deg}}

/* ---------- Panels, chips, ribbons ---------- */
.panel{position:relative;background:linear-gradient(180deg,var(--plum),var(--night-2));border:4px solid var(--ink);border-radius:var(--r-panel);box-shadow:0 8px 0 var(--ink),0 24px 50px rgba(16,14,9,.55)}
.panel::after{content:"";position:absolute;inset:3px;border-radius:calc(var(--r-panel) - 6px);border:2px solid rgba(255,255,255,.07);pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border:3px solid var(--ink);border-radius:999px;background:var(--ink-2);font-family:var(--display);font-size:.85rem;letter-spacing:.04em;color:var(--cream);box-shadow:0 3px 0 var(--ink)}
.ribbon{position:relative;display:inline-block;padding:.45em 1.6em;font-family:var(--display);letter-spacing:.05em;color:var(--ink);background:linear-gradient(var(--gold-hi),var(--gold) 55%,var(--gold-lo));border:3px solid var(--ink);border-radius:12px;box-shadow:0 5px 0 var(--ink);rotate:-1.5deg}

/* Element tints, used by tokens, chips and gallery cards */
.el-wild{--el:var(--el-wild)}.el-ember{--el:var(--el-ember)}.el-tide{--el:var(--el-tide)}.el-storm{--el:var(--el-storm)}.el-void{--el:var(--el-void)}.el-neutral{--el:var(--el-neutral)}

/* ---------- Rift night backdrop (scene.js) ---------- */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,#9a4614 0%,#4c3a1a 36%,#2a2a17 64%,#181710 100%)}
.scene-crack{position:absolute;left:50%;top:44%;height:min(120vh,1300px);aspect-ratio:9/16;translate:-50% -50%;background:url('img/rift.webp') center/cover;mix-blend-mode:screen;filter:hue-rotate(115deg) saturate(1.15);opacity:.55;-webkit-mask:radial-gradient(ellipse 40% 45% at 50% 50%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 40% 45% at 50% 50%,#000 30%,transparent 72%);animation:crack-breathe 6s ease-in-out infinite}
.scene-swirl{position:absolute;left:50%;top:44%;width:min(150vw,1700px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(rgba(255,140,60,.07) 0 8deg,transparent 8deg 21deg);-webkit-mask:radial-gradient(circle,#000 0 10%,transparent 58%);mask:radial-gradient(circle,#000 0 10%,transparent 58%);animation:swirl 90s linear infinite}
.scene-ridge{position:absolute;left:-2%;width:104%;bottom:0}
.scene-ridge path{stroke:var(--ink);stroke-width:5px;stroke-linejoin:round}
.scene-ridge.back{height:40vh;animation:ridge 16s ease-in-out infinite alternate}.scene-ridge.back path{fill:#454b1c}
.scene-ridge.front{height:26vh;animation:ridge 11s ease-in-out infinite alternate-reverse}.scene-ridge.front path{fill:#2e3314}
.scene-rock{position:absolute;overflow:visible}
.scene-rock polygon{fill:#58524a;stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.scene-rock polyline{fill:none;stroke:#8a8270;stroke-width:5;stroke-linecap:round}
.scene-rock.r1{left:5%;top:16%;width:74px;animation:float 7s ease-in-out infinite}
.scene-rock.r2{right:7%;top:11%;width:54px;animation:float 9s ease-in-out -3s infinite}
.scene-rock.r3{right:20%;top:52%;width:34px;opacity:.75;animation:float 8s ease-in-out -5s infinite}
.scene-rock.r4{left:16%;top:60%;width:28px;opacity:.6;animation:float 10s ease-in-out -2s infinite}
.spore{position:absolute;bottom:-24px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--ink),0 0 14px var(--c);opacity:.85;animation:spore var(--d) linear var(--w) infinite}
.scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(17,15,10,.72) 100%)}
@keyframes crack-breathe{50%{opacity:.75;scale:1.04}}
@keyframes swirl{to{rotate:360deg}}
@keyframes ridge{to{transform:translateX(-18px)}}
@keyframes float{50%{transform:translateY(-16px) rotate(7deg)}}
@keyframes spore{0%{transform:translate(0,0)}50%{transform:translate(24px,-52vh)}100%{transform:translate(-12px,-106vh);opacity:0}}

/* Holo foil sheen for showcase cards; pointer position arrives as --mx/--my from JS */
.holo{position:relative;transform-style:preserve-3d;transition:transform .5s var(--out)}
.holo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:color-dodge;opacity:.5;
 background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 38%),linear-gradient(115deg,transparent 30%,rgba(255,120,220,.32) 42%,rgba(110,230,255,.32) 52%,rgba(255,240,120,.3) 62%,transparent 74%);background-size:100% 100%,250% 250%;background-position:center,var(--mx,50%) var(--my,50%)}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .spore{display:none}
}

/* ---------- First Rift booster pack (pack.js) ----------
   Printed-wrapper look: pinched pillow edges and crimped seals (clip-path), metallic crimp bands,
   full-bleed key art, pillow shading + seal wrinkles, and a specular highlight that follows the pointer.
   Front and back faces flip in 3D; the front's top strip tears off when opened. */
.booster{--mx:50%;--my:30%;
 --zig:polygon(0% 0%,1.92% 1.6%,3.85% 0%,5.77% 1.6%,7.69% 0%,9.62% 1.6%,11.54% 0%,13.46% 1.6%,15.38% 0%,17.31% 1.6%,19.23% 0%,21.15% 1.6%,23.08% 0%,25% 1.6%,26.92% 0%,28.85% 1.6%,30.77% 0%,32.69% 1.6%,34.62% 0%,36.54% 1.6%,38.46% 0%,40.38% 1.6%,42.31% 0%,44.23% 1.6%,46.15% 0%,48.08% 1.6%,50% 0%,51.92% 1.6%,53.85% 0%,55.77% 1.6%,57.69% 0%,59.62% 1.6%,61.54% 0%,63.46% 1.6%,65.38% 0%,67.31% 1.6%,69.23% 0%,71.15% 1.6%,73.08% 0%,75% 1.6%,76.92% 0%,78.85% 1.6%,80.77% 0%,82.69% 1.6%,84.62% 0%,86.54% 1.6%,88.46% 0%,90.38% 1.6%,92.31% 0%,94.23% 1.6%,96.15% 0%,98.08% 1.6%,100% 0%,98.6% 6%,100% 11%,100% 89%,98.6% 94%,100% 100%,98.08% 98.4%,96.15% 100%,94.23% 98.4%,92.31% 100%,90.38% 98.4%,88.46% 100%,86.54% 98.4%,84.62% 100%,82.69% 98.4%,80.77% 100%,78.85% 98.4%,76.92% 100%,75% 98.4%,73.08% 100%,71.15% 98.4%,69.23% 100%,67.31% 98.4%,65.38% 100%,63.46% 98.4%,61.54% 100%,59.62% 98.4%,57.69% 100%,55.77% 98.4%,53.85% 100%,51.92% 98.4%,50% 100%,48.08% 98.4%,46.15% 100%,44.23% 98.4%,42.31% 100%,40.38% 98.4%,38.46% 100%,36.54% 98.4%,34.62% 100%,32.69% 98.4%,30.77% 100%,28.85% 98.4%,26.92% 100%,25% 98.4%,23.08% 100%,21.15% 98.4%,19.23% 100%,17.31% 98.4%,15.38% 100%,13.46% 98.4%,11.54% 100%,9.62% 98.4%,7.69% 100%,5.77% 98.4%,3.85% 100%,1.92% 98.4%,0% 100%,1.4% 94%,0% 89%,0% 11%,1.4% 6%);
 position:relative;display:block;width:270px;aspect-ratio:5/8.2;container-type:inline-size;perspective:1400px;
 filter:drop-shadow(0 0 1px rgba(17,15,10,.9)) drop-shadow(0 6px 6px rgba(17,15,10,.45)) drop-shadow(0 22px 26px rgba(17,15,10,.55));
 transition:transform .5s var(--out);animation:bp-idle 4.2s ease-in-out infinite}
.booster span,.booster b,.booster i,.booster small,.booster em{display:block;font-style:normal}
.bp-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.25,.4,1)}
.booster.flipped .bp-inner{transform:rotateY(180deg)}
.bp-face{position:absolute;inset:0;overflow:hidden;clip-path:var(--zig);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#2a140b}
.bp-back{transform:rotateY(180deg)}
.bp-ground{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.07) 0 .35cqw,transparent .5cqw) 0 0/3cqw 3cqw,radial-gradient(120% 70% at 50% 46%,#c4561a 0%,#6e2c12 52%,#2a140b 100%)}
.bp-ground.back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 3cqw,transparent 3cqw 6cqw),radial-gradient(90% 60% at 50% 38%,#8a3a14,#3a1a0c 70%,#1c0e08)}
.bp-art{position:absolute;left:-8%;right:-8%;top:15%;height:70%;background:center 32%/cover no-repeat;-webkit-mask:linear-gradient(transparent 0,#000 15%,#000 70%,transparent 100%);mask:linear-gradient(transparent 0,#000 15%,#000 70%,transparent 100%);transform-origin:50% 40%;animation:bp-art 9s ease-in-out infinite alternate}
.bp-head{position:absolute;left:0;right:0;top:6.4%;z-index:2;display:grid;justify-items:center;gap:1.2cqw}
.bp-logo{display:block;width:78%;filter:drop-shadow(0 .5cqw 0 #17150f) drop-shadow(.5cqw 0 0 #17150f) drop-shadow(-.5cqw 0 0 #17150f) drop-shadow(0 -.5cqw 0 #17150f) drop-shadow(0 1.6cqw 2cqw rgba(0,0,0,.6))}
.bp-logo.small{position:absolute;left:50%;top:8%;width:40%;translate:-50% 0;z-index:2}
.bp-kicker{display:flex!important;align-items:center;gap:2cqw;font:700 3.1cqw/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,243,214,.9);text-shadow:0 .3cqw 0 rgba(17,15,10,.8)}
.bp-kicker::before,.bp-kicker::after{content:"";width:7cqw;height:.4cqw;background:var(--gold);border-radius:1cqw}
.bp-seal{position:absolute;right:4%;top:21%;z-index:3;width:24cqw;aspect-ratio:1;display:grid!important;place-content:center;text-align:center;color:#2a1600;rotate:12deg;
 clip-path:polygon(100% 50%,93.62% 55.74%,98.3% 62.94%,90.65% 66.84%,93.3% 75%,84.91% 76.79%,85.36% 85.36%,76.79% 84.91%,75% 93.3%,66.84% 90.65%,62.94% 98.3%,55.74% 93.62%,50% 100%,44.26% 93.62%,37.06% 98.3%,33.16% 90.65%,25% 93.3%,23.21% 84.91%,14.64% 85.36%,15.09% 76.79%,6.7% 75%,9.35% 66.84%,1.7% 62.94%,6.38% 55.74%,0% 50%,6.38% 44.26%,1.7% 37.06%,9.35% 33.16%,6.7% 25%,15.09% 23.21%,14.64% 14.64%,23.21% 15.09%,25% 6.7%,33.16% 9.35%,37.06% 1.7%,44.26% 6.38%,50% 0%,55.74% 6.38%,62.94% 1.7%,66.84% 9.35%,75% 6.7%,76.79% 15.09%,85.36% 14.64%,84.91% 23.21%,93.3% 25%,90.65% 33.16%,98.3% 37.06%,93.62% 44.26%);
 background:radial-gradient(circle,transparent 58%,rgba(120,60,0,.55) 60%,transparent 63%),linear-gradient(135deg,#fff6c8 0%,#ffd45a 28%,#e59a14 55%,#ffe58a 72%,#b86d06 100%)}
.bp-seal::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 48%,transparent 60%);background-size:300% 100%;animation:btn-shine 3.6s ease-in-out infinite;background-repeat:no-repeat}
.bp-seal b{font:12cqw/.78 var(--display);letter-spacing:-.02em;text-shadow:0 .4cqw 0 rgba(255,255,255,.5)}
.bp-seal small{font:2.9cqw var(--display);letter-spacing:.12em;text-transform:uppercase}
.bp-foot{position:absolute;left:0;right:0;bottom:7.6%;z-index:2;display:grid;justify-items:center;gap:1.1cqw}
.bp-set{font:15.5cqw/.9 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--gold);-webkit-text-stroke:1.5cqw #17150f;paint-order:stroke fill;text-shadow:0 1.1cqw 0 #17150f,0 2.4cqw 3cqw rgba(0,0,0,.55)}
.bp-kind{display:flex!important;align-items:center;gap:2.4cqw;font:700 3.3cqw/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--cream)}
.bp-kind::before,.bp-kind::after{content:"";width:9cqw;height:.45cqw;border-radius:1cqw;background:linear-gradient(90deg,transparent,var(--gold))}
.bp-kind::after{background:linear-gradient(90deg,var(--gold),transparent)}
.bp-meta{display:flex!important;align-items:center;justify-content:space-between;width:80%;margin-top:1.4cqw;font:600 2.5cqw var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,243,214,.7)}
.bp-symbol{display:grid!important;place-items:center;width:6.4cqw;height:6.4cqw;border:.5cqw solid var(--gold);border-radius:50%;color:var(--gold)}
.bp-symbol .ic{width:70%;height:70%}
.bp-crimp{position:absolute;left:0;right:0;z-index:3;height:6.6%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 .9cqw,rgba(30,25,15,.28) .9cqw 2cqw),linear-gradient(180deg,#f3f1ea 0%,#a8a596 40%,#e2dfd2 66%,#878472 100%)}
.bp-crimp.top{top:0;box-shadow:inset 0 -.6cqw 0 rgba(17,15,10,.35)}
.bp-crimp.bottom{bottom:0;box-shadow:inset 0 .6cqw 0 rgba(17,15,10,.35)}
.bp-shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(17,15,10,.6) 0%,rgba(17,15,10,0) 9%,rgba(255,255,255,.16) 22%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 66%,rgba(255,255,255,.07) 80%,rgba(17,15,10,0) 89%,rgba(17,15,10,.65) 100%),linear-gradient(180deg,rgba(17,15,10,.35) 6%,rgba(17,15,10,0) 14%,rgba(17,15,10,0) 86%,rgba(17,15,10,.4) 94%)}
.bp-wrinkle{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;background:repeating-linear-gradient(78deg,transparent 0 6%,rgba(255,255,255,.9) 7%,transparent 9%,rgba(0,0,0,.6) 11%,transparent 13%),repeating-linear-gradient(104deg,transparent 0 9%,rgba(255,255,255,.7) 10%,transparent 12%);-webkit-mask:linear-gradient(#000 4%,transparent 20%,transparent 80%,#000 96%);mask:linear-gradient(#000 4%,transparent 20%,transparent 80%,#000 96%)}
.bp-spec{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 45%),linear-gradient(112deg,transparent 38%,rgba(255,255,255,.35) 47%,transparent 56%);background-size:100% 100%,300% 100%;background-repeat:no-repeat;animation:bp-sweep 5s ease-in-out infinite}
.bp-strip{position:absolute;left:0;right:0;top:0;height:11%;z-index:2;overflow:hidden;background:#3a1a0c;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(1px);
 clip-path:polygon(0% 0%,1.92% 14.55%,3.85% 0%,5.77% 14.55%,7.69% 0%,9.62% 14.55%,11.54% 0%,13.46% 14.55%,15.38% 0%,17.31% 14.55%,19.23% 0%,21.15% 14.55%,23.08% 0%,25% 14.55%,26.92% 0%,28.85% 14.55%,30.77% 0%,32.69% 14.55%,34.62% 0%,36.54% 14.55%,38.46% 0%,40.38% 14.55%,42.31% 0%,44.23% 14.55%,46.15% 0%,48.08% 14.55%,50% 0%,51.92% 14.55%,53.85% 0%,55.77% 14.55%,57.69% 0%,59.62% 14.55%,61.54% 0%,63.46% 14.55%,65.38% 0%,67.31% 14.55%,69.23% 0%,71.15% 14.55%,73.08% 0%,75% 14.55%,76.92% 0%,78.85% 14.55%,80.77% 0%,82.69% 14.55%,84.62% 0%,86.54% 14.55%,88.46% 0%,90.38% 14.55%,92.31% 0%,94.23% 14.55%,96.15% 0%,98.08% 14.55%,100% 0%,98.6% 54.55%,100% 82%,95% 100%,90% 85.6%,85% 94.6%,80% 91%,75% 98.2%,70% 83.8%,65% 100%,60% 87.4%,55% 92.8%,50% 82%,45% 96.4%,40% 89.2%,35% 100%,30% 85.6%,25% 94.6%,20% 83.8%,15% 98.2%,10% 87.4%,5% 100%,0% 82%,1.4% 54.55%);
 transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .5s .25s}
.bp-strip .bp-crimp.top{height:60%}
.bp-cut{position:absolute;left:5%;right:5%;top:76%;border-top:.5cqw dashed rgba(255,243,214,.35)}
.bp-strip .bp-shade{background:linear-gradient(90deg,rgba(17,15,10,.6) 0%,rgba(17,15,10,0) 9%,rgba(255,255,255,.16) 22%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 66%,rgba(17,15,10,0) 89%,rgba(17,15,10,.65) 100%)}
.bp-back-title{position:absolute;left:0;right:0;top:15%;z-index:2;text-align:center;font:6.4cqw/1 var(--display);color:var(--cream);text-transform:uppercase;letter-spacing:.02em;-webkit-text-stroke:1cqw #17150f;paint-order:stroke fill;text-shadow:0 .8cqw 0 #17150f}
.bp-fan{position:absolute;left:0;right:0;top:20%;height:17%;z-index:2}
.bp-fan img{position:absolute;left:50%;bottom:0;width:17cqw;border-radius:1.6cqw;transform-origin:50% 120%;translate:-50% 0;rotate:calc((var(--i) - 1) * 14deg);box-shadow:0 1.4cqw 2.4cqw rgba(0,0,0,.55),0 0 0 .5cqw #17150f}
.bp-fan img:nth-child(2){z-index:1;width:18.5cqw;bottom:1.4cqw}
.bp-odds{position:absolute;left:6%;right:6%;top:64.6%;z-index:2;display:grid!important;grid-template-columns:repeat(5,1fr);gap:1cqw;padding:1.8cqw 1.4cqw;border-radius:2.4cqw;background:rgba(17,15,10,.45);box-shadow:inset 0 0 0 .4cqw rgba(255,243,214,.12)}
.bp-odds>span{display:grid!important;justify-items:center;gap:1cqw;text-align:center}
.bp-odds i{width:4.4cqw;height:4.4cqw;rotate:45deg;border:.5cqw solid #17150f;border-radius:.8cqw;background:var(--c)}
.bp-odds b{font:600 2.2cqw/1.1 var(--body);color:rgba(255,243,214,.85)}
.bp-odds em{font:3.6cqw var(--display);color:var(--c)}
.bp-copy{position:absolute;left:9%;right:9%;top:75.6%;z-index:2;text-align:center;font:500 2.6cqw/1.4 var(--body);color:rgba(255,243,214,.86)}
.bp-legal{position:absolute;left:8%;right:8%;bottom:8.6%;z-index:2;display:flex!important;align-items:center;gap:3cqw}
.bp-barcode{display:grid!important;gap:.6cqw;padding:1.4cqw 1.8cqw 1cqw;border-radius:1cqw;background:#f6f2e8}
.bp-barcode i{width:24cqw;height:6cqw;background:repeating-linear-gradient(90deg,#17150f 0 .35cqw,transparent .35cqw .7cqw,#17150f .7cqw 1.5cqw,transparent 1.5cqw 1.8cqw,#17150f 1.8cqw 2cqw,transparent 2cqw 2.6cqw,#17150f 2.6cqw 3.4cqw,transparent 3.4cqw 3.7cqw)}
.bp-barcode small{font:700 1.8cqw var(--body);letter-spacing:.2em;color:#17150f;text-align:center}
.bp-age{display:grid!important;place-items:center;flex:none;width:8cqw;height:8cqw;border:.5cqw solid var(--cream);border-radius:50%;font:3.2cqw var(--display);color:var(--cream)}
.bp-legal>small{font:500 1.9cqw/1.45 var(--body);color:rgba(255,243,214,.6);letter-spacing:.06em}
.bp-burst{position:absolute;left:50%;top:9%;width:200%;aspect-ratio:1;translate:-50% -50%;z-index:-1;opacity:0;scale:.3;pointer-events:none;border-radius:50%;background:repeating-conic-gradient(rgba(255,228,138,.95) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 62%);mask:radial-gradient(circle,#000 6%,transparent 62%);transition:opacity .3s,scale .8s var(--pop)}
.booster.shaking{animation:bp-shake .62s ease-in-out}
.booster.torn{animation:bp-drop .9s .35s ease-in forwards}
.booster.torn .bp-strip{transform:translate(55%,-190%) rotate(30deg);opacity:0}
.booster.torn .bp-front{clip-path:polygon(0% 9.02%,5% 11%,10% 9.61%,15% 10.8%,20% 9.22%,25% 10.41%,30% 9.42%,35% 11%,40% 9.81%,45% 10.6%,50% 9.02%,55% 10.21%,60% 9.61%,65% 11%,70% 9.22%,75% 10.8%,80% 10.01%,85% 10.41%,90% 9.42%,95% 11%,100% 9.02%,100% 89%,98.6% 94%,100% 100%,98.08% 98.4%,96.15% 100%,94.23% 98.4%,92.31% 100%,90.38% 98.4%,88.46% 100%,86.54% 98.4%,84.62% 100%,82.69% 98.4%,80.77% 100%,78.85% 98.4%,76.92% 100%,75% 98.4%,73.08% 100%,71.15% 98.4%,69.23% 100%,67.31% 98.4%,65.38% 100%,63.46% 98.4%,61.54% 100%,59.62% 98.4%,57.69% 100%,55.77% 98.4%,53.85% 100%,51.92% 98.4%,50% 100%,48.08% 98.4%,46.15% 100%,44.23% 98.4%,42.31% 100%,40.38% 98.4%,38.46% 100%,36.54% 98.4%,34.62% 100%,32.69% 98.4%,30.77% 100%,28.85% 98.4%,26.92% 100%,25% 98.4%,23.08% 100%,21.15% 98.4%,19.23% 100%,17.31% 98.4%,15.38% 100%,13.46% 98.4%,11.54% 100%,9.62% 98.4%,7.69% 100%,5.77% 98.4%,3.85% 100%,1.92% 98.4%,0% 100%,1.4% 94%,0% 89%)}
.booster.torn .bp-burst{opacity:1;scale:1}
.pack-flip{margin-top:14px}
@keyframes bp-idle{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -10px;rotate:-1deg}}
@keyframes bp-art{to{transform:scale(1.06)}}
@keyframes bp-sweep{0%,55%{background-position:center,150% 0}85%,100%{background-position:center,-50% 0}}
@keyframes bp-shake{0%,100%{rotate:0deg}15%{rotate:-7deg;scale:1.04}30%{rotate:6deg}45%{rotate:-5deg;scale:1.06}60%{rotate:4deg}75%{rotate:-2deg;scale:1.03}}
@keyframes bp-drop{0%{translate:0 0;rotate:0deg}30%{translate:0 -14px}100%{translate:0 70vh;rotate:8deg;opacity:0}}
@media (prefers-reduced-motion:reduce){.booster,.bp-art,.bp-spec,.bp-seal::after{animation:none}}
/* Back-side detail blocks: section labels, how-to-play steps, element badges */
.bp-label{position:absolute;left:0;right:0;z-index:2;display:flex!important;align-items:center;justify-content:center;gap:2cqw;font:700 2.2cqw/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.bp-label::before,.bp-label::after{content:"";width:8cqw;height:.35cqw;border-radius:1cqw;background:linear-gradient(90deg,transparent,var(--gold))}
.bp-label::after{background:linear-gradient(90deg,var(--gold),transparent)}
.bp-label.l-play{top:39.4%}.bp-label.l-el{top:53.2%}.bp-label.l-odds{top:62.6%}
.bp-steps{position:absolute;left:6%;right:6%;top:41.6%;z-index:2;display:grid!important;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.bp-steps>span{display:grid!important;justify-items:center;align-content:start;gap:.7cqw;padding:1.6cqw 1cqw;border-radius:2.2cqw;background:rgba(17,15,10,.45);box-shadow:inset 0 0 0 .4cqw rgba(255,243,214,.12);text-align:center}
.bp-steps i{display:grid!important;place-items:center;width:6.6cqw;height:6.6cqw;border:.5cqw solid #17150f;border-radius:50%;background:var(--gold);color:#17150f}
.bp-steps i .ic{width:60%;height:60%}
.bp-steps b{font:3cqw/1 var(--display);color:var(--cream)}
.bp-steps small{font:500 1.9cqw/1.3 var(--body);color:rgba(255,243,214,.75)}
.bp-elements{position:absolute;left:5%;right:5%;top:55.3%;z-index:2;display:grid!important;grid-template-columns:repeat(6,1fr);gap:.8cqw}
.bp-elements>span{display:grid!important;justify-items:center;gap:.6cqw;text-align:center}
.bp-elements i{display:grid!important;place-items:center;width:6.4cqw;height:6.4cqw;border:.5cqw solid #17150f;border-radius:50%;background:var(--c);color:#17150f;box-shadow:0 .5cqw 0 #17150f}
.bp-elements i .ic{width:58%;height:58%}
.bp-elements b{font:600 2cqw/1 var(--body);color:rgba(255,243,214,.88)}