/* V11 effects (owner requests of 2026-09-25), loaded last. Reveals grow with each tier from Rare; the
   rarest cards move and sparkle wherever they are shown. Effects that must follow a trembling card are
   drawn inside it. Everything here stops with reduced motion. */

/* ---- Cards: a slow moving gradient over the frame (Legendary and up, and every Shiny). The layer sits
   between the frame art and the picture, so it lights the frame only, and stays inside the card edges. */
.meme-card.card-refit>.card-aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
/* Grids stay still (the V10 rule, restored on 2026-09-25): a drifting band on every Legendary+ card of a
   grid meant dozens of blended layers five times the card's size, and the GPU dropped tiles (black bands,
   cut glows). In a grid the band rests; it drifts only on the one card in focus (detail, reveal, results). */
.meme-card.card-refit>.card-aura:before{content:'';position:absolute;inset:-8% -55%;background:linear-gradient(105deg,transparent 30%,var(--aura-1) 41%,var(--aura-2) 50%,var(--aura-3) 59%,transparent 70%);opacity:var(--aura-opacity,.34);transform:translateX(-14%)}
:is(.detail-art,.stack-front,.bulk-discovery,.forge-result-card,.tradeup-result-card,.enchant-target,.is-spotlight) .meme-card.card-refit>.card-aura:before{animation:card-aura-drift var(--aura-speed,10s) ease-in-out infinite alternate}
@keyframes card-aura-drift{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
.meme-card.card-refit.rarity-legendary>.card-aura{--aura-1:#fff3c450;--aura-2:#f4c95d90;--aura-3:#fff3c450;--aura-speed:12s}
.meme-card.card-refit.rarity-mythic>.card-aura{--aura-1:#ffc7ae50;--aura-2:#ff775e90;--aura-3:#ffd29a50;--aura-speed:11s}
.meme-card.card-refit.rarity-iridescent>.card-aura{--aura-1:#ffd3f680;--aura-2:#c46bffb0;--aura-3:#ee94ff90;--aura-speed:8s;--aura-opacity:.6}
.meme-card.card-refit.rarity-prismatic>.card-aura{--aura-1:#9b5cffc0;--aura-2:#5fd8ffc0;--aura-3:#c7f4ffa0;--aura-speed:7s;--aura-opacity:.66}
.meme-card.card-refit.rarity-diamond>.card-aura{--aura-1:#bdf3ffc0;--aura-2:#4fd2ffd0;--aura-3:#1f8fffb0;--aura-speed:6s;--aura-opacity:.7}
.meme-card.card-refit.rarity-secret>.card-aura{--aura-1:#fff1bd60;--aura-2:#d8b66aa0;--aura-3:#fff1bd60;--aura-speed:10s;--aura-opacity:.4}
.meme-card.card-refit.variant-shiny>.card-aura{--aura-1:#fff6d070;--aura-2:#ffd967a0;--aura-3:#fff6d070;--aura-speed:9s;--aura-opacity:.46}
/* Iridescent and up also breathe: the frame's own colour pulses slowly, inside the card. */
.meme-card.card-refit:is(.rarity-iridescent,.rarity-prismatic,.rarity-celestial,.rarity-diamond)>.card-aura:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 3cqw 1cqw var(--aura-2);opacity:.38}
:is(.detail-art,.stack-front,.bulk-discovery,.forge-result-card,.tradeup-result-card,.enchant-target,.is-spotlight) .meme-card.card-refit:is(.rarity-iridescent,.rarity-prismatic,.rarity-celestial,.rarity-diamond)>.card-aura:after{animation:card-aura-breathe 3.6s ease-in-out infinite alternate}
@keyframes card-aura-breathe{from{opacity:.18}to{opacity:.55}}

/* Twinkling diamond stars on the frame of Iridescent, Prismatic and Pearlescent cards. */
.meme-card.card-refit>.card-twinkles{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:inherit}
.card-twinkles i{position:absolute;width:7cqw;height:7cqw;margin:-3.5cqw 0 0 -3.5cqw;background:radial-gradient(circle,#fff 0 22%,var(--twinkle,#fff) 48%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:card-twinkle 4.2s ease-in-out var(--t) infinite}
@keyframes card-twinkle{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:.35;transform:scale(.55) rotate(80deg)}}
.meme-card.rarity-iridescent .card-twinkles{--twinkle:#ffc6f5}.meme-card.rarity-prismatic .card-twinkles{--twinkle:#aee9ff}.meme-card.rarity-diamond .card-twinkles{--twinkle:#c8f6ff}

/* ---- Reveals. Diamond sparkles thrown out of the card (Rare and up, every Shiny). */
.fx-burst{position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none;z-index:8}
.fx-burst i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);background:linear-gradient(135deg,#fff 0 18%,var(--c) 46%,color-mix(in srgb,var(--c) 70%,#10091a) 100%);box-shadow:0 0 6px var(--c),0 0 14px color-mix(in srgb,var(--c) 55%,transparent);opacity:0;transform:rotate(var(--a)) translateX(10px) rotate(45deg) scale(.3);animation:fx-diamond 1.3s cubic-bezier(.15,.7,.3,1) var(--t) both}
@keyframes fx-diamond{0%{opacity:0;transform:rotate(var(--a)) translateX(10px) rotate(45deg) scale(.3)}16%{opacity:1}72%{opacity:.9}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) rotate(225deg) scale(.55)}}
.fx-burst.is-gold i{box-shadow:0 0 8px #ffd967,0 0 18px #ffcf5a99}
/* A ring of light from Super Rare, two from Mythic. */
.fx-ring{position:absolute;left:50%;top:48%;width:46%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:1;border:3px solid var(--c);box-shadow:0 0 18px var(--c),inset 0 0 16px var(--c2);opacity:0;transform:translate(-50%,-50%) scale(.3);animation:fx-ring 1s ease-out .05s both}
.fx-ring.is-late{animation-delay:.3s;animation-duration:1.2s}
@keyframes fx-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}
/* A glint across the revealed face; it is clipped to the card. */
.stack-card.fx-glint .stack-front,.bulk-dealt-card.fx-glint .bulk-front{overflow:hidden;border-radius:5.3%}
.stack-card.fx-glint .stack-front:after,.bulk-dealt-card.fx-glint .bulk-front:after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(115deg,transparent 32%,#ffffff00 38%,#ffffffa0 48%,#ffffff00 58%,transparent 66%);transform:translateX(-130%);animation:fx-glint .95s cubic-bezier(.3,.6,.3,1) .1s forwards}
.stack-card.fx-glint.fx-level-1 .stack-front:after,.bulk-dealt-card.fx-glint.fx-level-1 .bulk-front:after{background:linear-gradient(115deg,transparent 36%,#ffffff70 48%,transparent 60%)}
@keyframes fx-glint{to{transform:translateX(130%)}}

/* The charge before a card turns over. Super Rare and Epic glow and swell; Legendary and Mythic
   tremble; Iridescent and up tremble harder while cracks of light spread and embers rush in. */
.opening-v10 .stack-card.is-charging.charge-soft{animation:fx-charge-soft .42s ease-in-out infinite alternate!important;filter:drop-shadow(0 0 10px var(--charge-color)) drop-shadow(0 0 26px color-mix(in srgb,var(--charge-color) 60%,transparent))}
@keyframes fx-charge-soft{from{transform:scale(1)}to{transform:scale(1.03)}}
.opening-v10 .stack-card.is-charging.charge-strong{animation:v10-charge .09s linear infinite!important;filter:drop-shadow(0 0 16px var(--charge-color)) drop-shadow(0 0 40px var(--charge-color))}
.opening-v10 .stack-card.is-charging.charge-omen{animation:fx-jitter .08s linear infinite,fx-swell var(--charge-ms,1800ms) ease-in forwards!important;filter:drop-shadow(0 0 16px var(--charge-color)) drop-shadow(0 0 46px var(--charge-color))}
@keyframes fx-jitter{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px) rotate(-.5deg)}50%{transform:translate(2px,-1px) rotate(.45deg)}75%{transform:translate(-1px,-2px)}100%{transform:translate(1px,2px)}}
@keyframes fx-swell{from{scale:1}to{scale:1.05}}
/* The omen dims everything but the card, gently (the Secret goes fully dark). */
dialog#modal.rarity-omen::backdrop{background:rgba(3,2,9,.94);transition:background .5s ease}
#modal.rarity-omen :is(.stack-layer,.stack-remaining,.stack-controls,.modal-close){opacity:.22!important;transition:opacity .45s ease}
.stack-back>.fx-cracks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
.fx-cracks path{fill:none;stroke:color-mix(in srgb,var(--c2) 45%,#fff);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px var(--c));animation:fx-crack .5s cubic-bezier(.6,0,.4,1) forwards;animation-delay:calc(.3s + var(--i) * .17s)}
@keyframes fx-crack{to{stroke-dashoffset:0}}
.stack-card>.fx-embers{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx-embers i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:var(--c);box-shadow:0 0 8px var(--c),0 0 16px var(--c);opacity:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(45deg);animation:fx-ember 1.1s ease-in var(--t) infinite}
@keyframes fx-ember{0%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(45deg) scale(1)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(10px) rotate(45deg) scale(.35)}}
/* Shiny: the card back turns gold from the bottom up, golden cracks spread, then it flips. */
.stack-back>.fx-gild{position:absolute;inset:0;z-index:2;display:block;pointer-events:none;overflow:hidden;border-radius:inherit;font-style:normal}
.fx-gild-sheen{position:absolute;inset:0;display:block;background:linear-gradient(160deg,#fff6d0 0%,#f3cf6b 28%,#c8912c 55%,#ffe9a3 80%,#b87c1f 100%);clip-path:inset(100% 0 0 0);opacity:.94;animation:fx-gild 1.15s cubic-bezier(.5,.1,.3,1) .1s forwards}
.fx-gild-sheen:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffffb0 48%,transparent 60%);transform:translateX(-120%);animation:fx-glint .9s ease-out 1.05s forwards}
@keyframes fx-gild{to{clip-path:inset(0 0 0 0)}}
.fx-gild-cracks{position:absolute;inset:0;width:100%;height:100%}
.fx-gild-cracks path{fill:none;stroke:#fffbe6;stroke-width:.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px #fff3c4) drop-shadow(0 0 9px #ffcf5a);animation:fx-crack .45s ease-out forwards;animation-delay:calc(.4s + var(--i) * .12s)}
.opening-v10 .stack-card.is-charging:has(.fx-gild){filter:drop-shadow(0 0 14px #ffd967) drop-shadow(0 0 38px #f3b43c99)}

/* ---- Recycling: Sparks fly up from the button. */
.recycle-coins{position:fixed;z-index:60;pointer-events:none;width:0;height:0}
.recycle-coins i{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#f4c95d 55%,#b77f1d);box-shadow:0 0 10px #f4c95d;animation:recycle-coin 1.1s cubic-bezier(.2,.7,.3,1) var(--t) both}
@keyframes recycle-coin{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
.recycle-bar.is-paid .recycle-bar-sparks{animation:recycle-pop .6s ease-out}
@keyframes recycle-pop{30%{transform:scale(1.25);color:#fff}}

@media(prefers-reduced-motion:reduce){.meme-card.card-refit>.card-aura:before,.meme-card.card-refit>.card-aura:after,.card-twinkles,.fx-burst,.fx-ring,.fx-embers,.fx-cracks,.recycle-coins{animation:none!important;display:none}.stack-card.fx-glint .stack-front:after,.bulk-dealt-card.fx-glint .bulk-front:after{display:none}}
.reduce-motion :is(.meme-card.card-refit>.card-aura:before,.meme-card.card-refit>.card-aura:after){animation:none!important}
.reduce-motion :is(.card-twinkles,.fx-burst,.fx-ring,.fx-embers,.fx-cracks,.recycle-coins){display:none!important}
.reduce-motion :is(.stack-card.fx-glint .stack-front:after,.bulk-dealt-card.fx-glint .bulk-front:after){display:none}
.wallet.is-paid{animation:recycle-pop .6s ease-out}
/* The image rim of Iridescent, Prismatic and Pearlescent cards glows in its colours; it breathes only on the
   card in focus (a box-shadow animation repaints every frame, too much for a whole grid). */
.meme-card.card-refit:is(.rarity-iridescent,.rarity-prismatic,.rarity-celestial,.rarity-diamond) .card-image{box-shadow:0 0 0 .45cqw var(--rim-a),0 0 2cqw var(--rim-a),0 .6cqw 2cqw #0006}
:is(.detail-art,.stack-front,.bulk-discovery,.forge-result-card,.tradeup-result-card,.enchant-target,.is-spotlight) .meme-card.card-refit:is(.rarity-iridescent,.rarity-prismatic,.rarity-celestial,.rarity-diamond) .card-image{animation:card-rim-breathe 3.2s ease-in-out infinite alternate}
.meme-card.card-refit.rarity-iridescent .card-image{--rim-a:#ee94ff;--rim-b:#c46bff}.meme-card.card-refit.rarity-prismatic .card-image{--rim-a:#9b5cff;--rim-b:#5fd8ff}.meme-card.card-refit.rarity-diamond .card-image{--rim-a:#4fd2ff;--rim-b:#bdf3ff}
@keyframes card-rim-breathe{from{box-shadow:0 0 0 .45cqw var(--rim-a),0 0 1.2cqw var(--rim-a),0 .6cqw 2cqw #0006}to{box-shadow:0 0 0 .45cqw var(--rim-b),0 0 3cqw var(--rim-b),0 .6cqw 2cqw #0006}}
@media(prefers-reduced-motion:reduce){.meme-card.card-refit .card-image{animation:none!important}}
.reduce-motion .meme-card.card-refit .card-image{animation:none!important}

/* V11: a running match is announced on every other page (owner request 2026-09-25). */
.battle-banner{position:sticky;top:8px;z-index:25;display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 12px 10px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--v10-ruby) 45%,var(--v10-line));background:var(--v10-panel);box-shadow:0 10px 28px #0008}
.battle-banner-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#f4769c22;color:var(--v10-ruby);flex:none}
.battle-banner-icon .icon{width:18px;height:18px}
.battle-banner-copy{display:grid;gap:2px;min-width:0;flex:1}
.battle-banner-copy b{font-size:14px}.battle-banner-copy small{color:var(--muted);font-size:12px;line-height:1.4}
.battle-banner-copy [data-turn-time]{color:var(--v10-gold);font-weight:800}
.battle-banner .btn{flex:none}
.battle-banner.is-your-turn{border-color:var(--v10-gold);animation:battle-banner-pulse 1.6s ease-in-out infinite alternate}
@keyframes battle-banner-pulse{from{box-shadow:0 10px 28px #0008,0 0 0 0 #d8b66a00}to{box-shadow:0 10px 28px #0008,0 0 0 4px #d8b66a44}}
@media(max-width:640px){.battle-banner{flex-wrap:wrap}.battle-banner .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.battle-banner.is-your-turn{animation:none}}
.reduce-motion .battle-banner.is-your-turn{animation:none}
[data-theme="light"] .battle-banner{background:#fbf8fe;border-color:#e7b3c3}

/* V11 leaderboard percentile rewards. */
.pct-rewards{padding:18px;margin:16px 0}
.pct-case-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.pct-case{position:relative;display:grid;justify-items:center;gap:4px;padding:12px 10px;border-radius:16px;border:1px solid var(--v10-line);background:#ffffff06;text-align:center}
.pct-case.is-yours{border-color:var(--pct-color);box-shadow:0 0 0 1px var(--pct-color),0 0 22px color-mix(in srgb,var(--pct-color) 30%,transparent)}
.pct-case .case-art{width:min(140px,100%);height:auto}
.pct-case b{font:18px/1.1 var(--display)}
.pct-case small,.pct-case span{color:var(--muted);font-size:11px}
.pct-case em{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--pct-color);color:#140f1c;font:800 10px Inter,sans-serif;font-style:normal}
.pct-case em .icon{width:11px;height:11px}
.pct-footnote{margin:12px 0 0;font-size:11px}
@media(max-width:640px){.pct-case-row{grid-template-columns:minmax(0,1fr)}.pct-case{grid-template-columns:auto 1fr;justify-items:start;text-align:left}.pct-case .case-art{grid-row:span 4;width:90px}}
[data-theme="light"] .pct-case{background:#fff;border-color:#d9cde5}
/* Shiny from Iridescent up (owner request 2026-09-25): the omen cracks run in from every edge, so the gold
   creeps in from the edges too, instead of rising from the bottom with its own cracks. The mask's clear
   centre shrinks until the whole back is gold; without @property support the gold simply appears at the end. */
@property --gild-hole{syntax:'<percentage>';inherits:false;initial-value:150%}
.fx-gild.from-sides .fx-gild-sheen{clip-path:none;--gild-hole:150%;-webkit-mask-image:radial-gradient(closest-side,transparent var(--gild-hole),#000 calc(var(--gild-hole) + 26%));mask-image:radial-gradient(closest-side,transparent var(--gild-hole),#000 calc(var(--gild-hole) + 26%));animation:fx-gild-sides calc(var(--charge-ms,1500ms) * .78) cubic-bezier(.45,.05,.35,1) .1s forwards}
.fx-gild.from-sides .fx-gild-sheen:after{animation-delay:calc(var(--charge-ms,1500ms) * .8)}
@keyframes fx-gild-sides{to{--gild-hole:-30%}}
@media(prefers-reduced-motion:reduce){.fx-gild.from-sides .fx-gild-sheen{animation:none;--gild-hole:-30%}}
/* The hover sweep (v10.css) blends normally: a blend mode on a large masked layer is what some GPUs
   break into bands while it moves. The light is white with alpha, so it reads the same on the dark frames. */
.meme-card.card-refit .card-shine{mix-blend-mode:normal}

/* ---- Vault opening (owner requests 2026-09-25), in the spirit of CS:GO cases. One stage of fixed size holds
   both steps, so the dialog never changes size while it plays: the sealed case opens (longer and brighter
   for rarer cases), then the strip rolls under a gold marker. */
.cs-opening{display:grid;justify-items:center;gap:10px;padding:8px 0 4px;text-align:center}
.cs-opening>h2{margin:0;font:clamp(26px,4vw,40px)/1.05 var(--display);text-shadow:0 0 24px color-mix(in srgb,var(--vault-color) 45%,transparent)}
.cs-opening>p{margin:0;color:#b9afc9;font-size:13px}.cs-opening>small{color:#9d93ad}
.cs-stage{position:relative;width:min(1000px,100%);height:clamp(300px,52vh,440px);border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--vault-color) 20%,transparent),transparent 68%),linear-gradient(180deg,#140f1c,#0b0810);box-shadow:inset 0 0 0 1px #ffffff12,0 24px 60px #0009}
.vault-unlock{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .45s ease,transform .5s ease;animation:vault-rise .5s cubic-bezier(.2,.8,.25,1) backwards}
.vault-unlock{grid-template:100% / 100%}.vault-unlock>*{grid-area:1/1}
.cs-stage.is-rolling .vault-unlock{opacity:0;transform:scale(1.08);pointer-events:none}
.vault-box{position:relative;width:min(430px,74%);aspect-ratio:900/650;z-index:2}
.vault-box>img,.vault-box>.vault-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.vault-unlock.is-whole .vault-box{aspect-ratio:3/4;width:min(260px,52%)}
.vault-unlock.is-whole .vault-box:has(img[src*="caisses-rang"]){aspect-ratio:18/13;width:min(400px,70%)}
.vault-lid{clip-path:inset(0 0 51.7% 0);transform-origin:30% 48%}
.vault-body{clip-path:inset(48.3% 0 0 0)}
.vault-seam{position:absolute;left:17%;right:19%;top:47.6%;height:3px;border-radius:3px;background:#fff;box-shadow:0 0 10px 3px var(--vault-color),0 0 34px 8px color-mix(in srgb,var(--vault-color) 60%,transparent);opacity:0;transform:scaleX(.15)}
.vault-halo{width:min(560px,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--vault-color) 70%,#fff 10%),transparent 62%);opacity:.12;filter:blur(18px);transform:scale(.7);z-index:1}
.vault-rays{width:150%;aspect-ratio:1;z-index:0;opacity:0;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--vault-color) 55%,transparent) 0deg 5deg,transparent 5deg 16deg);-webkit-mask:radial-gradient(circle,#000 12%,transparent 60%);mask:radial-gradient(circle,#000 12%,transparent 60%)}
.vault-embers{position:relative;width:0;height:0;z-index:3}
.vault-embers i{position:absolute;width:6px;height:6px;margin:-3px;background:var(--vault-color);box-shadow:0 0 8px var(--vault-color),0 0 16px var(--vault-color);opacity:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(45deg)}
.vault-cracks{position:absolute;inset:6% 8% 10%;width:84%;height:84%;z-index:3;overflow:visible}
.vault-cracks path{fill:none;stroke:#fff;stroke-width:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--vault-color)) drop-shadow(0 0 14px var(--vault-color))}
.vault-beam{position:absolute;left:30%;right:30%;bottom:50%;height:0;z-index:1;background:linear-gradient(0deg,#fff,color-mix(in srgb,var(--vault-color) 70%,transparent) 40%,transparent);filter:blur(6px);opacity:0}
.vault-flash{position:absolute;inset:0;z-index:5;background:radial-gradient(circle at 50% 48%,#fff,color-mix(in srgb,var(--vault-color) 50%,transparent) 45%,transparent 75%);opacity:0;pointer-events:none}
.vault-ring{width:120px;height:120px;border-radius:50%;border:3px solid var(--vault-color);box-shadow:0 0 24px var(--vault-color),inset 0 0 18px var(--vault-color);opacity:0;z-index:4}
/* Charging: the case trembles harder and glows brighter until it gives way. */
.cs-stage.is-unlocking .vault-box{animation:vault-tremble var(--unlock-ms) cubic-bezier(.5,0,1,1) .2s both}
.cs-stage.is-unlocking .vault-halo{animation:vault-halo var(--unlock-ms) ease-in .2s both}
.cs-stage.is-unlocking .vault-seam{animation:vault-seam var(--unlock-ms) ease-in .3s both}
.cs-stage.is-unlocking .vault-rays{animation:vault-rays var(--unlock-ms) ease-in .2s both,vault-spin 14s linear infinite}
.cs-stage.is-unlocking .vault-embers i{animation:vault-ember 1s ease-in infinite;animation-delay:var(--t)}
.cs-stage.is-unlocking .vault-cracks path{animation:vault-crack .45s cubic-bezier(.6,0,.4,1) forwards;animation-delay:calc(var(--unlock-ms) * .35 + var(--i) * .16s)}
.cs-stage.is-unlocking .vault-unlock.is-shiny .vault-box:after{content:'';position:absolute;inset:8% 14% 10% 14%;background:linear-gradient(110deg,transparent 30%,#fff3c4aa 48%,transparent 66%) no-repeat;background-size:260% 100%;animation:vault-gild calc(var(--unlock-ms) * .9) ease-in-out .3s both;border-radius:12px;pointer-events:none}
/* Opening: the lid flies off, light bursts out, the case sinks away. */
.cs-stage.is-open .vault-box{animation:none}
.cs-stage.is-open .vault-lid{animation:vault-lid-off .75s cubic-bezier(.2,.7,.25,1) forwards}
.cs-stage.is-open .vault-body{animation:vault-body-away .7s ease-in .12s forwards}
.cs-stage.is-open .vault-whole{animation:vault-whole-away .7s ease-in forwards}
.cs-stage.is-open .vault-seam{animation:none;opacity:0}
.cs-stage.is-open .vault-beam{animation:vault-beam .8s ease-out forwards}
.cs-stage.is-open .vault-flash{animation:vault-flash .7s ease-out forwards}
.cs-stage.is-open .vault-ring{animation:vault-ring .9s ease-out forwards}
.cs-stage.is-open .vault-cracks,.cs-stage.is-open .vault-embers{opacity:0;transition:opacity .25s}
@keyframes vault-rise{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes vault-tremble{0%{transform:none}10%{transform:translate(calc(var(--shake) * -.2),0) rotate(-.3deg)}20%{transform:translate(calc(var(--shake) * .25),calc(var(--shake) * -.1))}30%{transform:translate(calc(var(--shake) * -.35),calc(var(--shake) * .1)) rotate(.4deg)}40%{transform:translate(calc(var(--shake) * .45),0)}50%{transform:translate(calc(var(--shake) * -.55),calc(var(--shake) * -.15)) rotate(-.6deg)}60%{transform:translate(calc(var(--shake) * .65),calc(var(--shake) * .12))}70%{transform:translate(calc(var(--shake) * -.75),0) rotate(.7deg)}80%{transform:translate(var(--shake),calc(var(--shake) * -.2)) scale(1.02)}90%{transform:translate(calc(var(--shake) * -1),calc(var(--shake) * .15)) rotate(-.9deg) scale(1.03)}100%{transform:translate(calc(var(--shake) * .6),0) scale(1.04)}}
@keyframes vault-halo{to{opacity:.95;transform:scale(1.15)}}
@keyframes vault-seam{0%{opacity:0;transform:scaleX(.15)}60%{opacity:.9}100%{opacity:1;transform:scaleX(1)}}
@keyframes vault-rays{from{opacity:0;transform:scale(.6)}to{opacity:.9;transform:scale(1)}}
@keyframes vault-spin{to{rotate:360deg}}
@keyframes vault-ember{0%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(45deg) scale(1)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(14px) rotate(45deg) scale(.4)}}
@keyframes vault-crack{to{stroke-dashoffset:0}}
@keyframes vault-gild{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes vault-lid-off{0%{transform:none;opacity:1}35%{transform:translate(-2%,-26%) rotate(-9deg);opacity:1}100%{transform:translate(-6%,-95%) rotate(-24deg);opacity:0}}
@keyframes vault-body-away{to{transform:translateY(14%) scale(.94);opacity:0}}
@keyframes vault-whole-away{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.08);filter:brightness(1.8)}100%{transform:scale(1.2);filter:brightness(2.4);opacity:0}}
@keyframes vault-beam{0%{height:0;opacity:0}25%{height:120%;opacity:1}100%{height:170%;opacity:0}}
@keyframes vault-flash{0%{opacity:0}18%{opacity:var(--flash)}100%{opacity:0}}
@keyframes vault-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(4.2)}}
/* The strip: dark window, tiles with a rarity bar, a gold marker in the middle, fading edges. */
.cs-reels{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:0 16px;opacity:0;transform:scale(.97);transition:opacity .45s ease .12s,transform .45s ease .12s;--tile-w:164px;--tile-h:218px}
.cs-reels.is-multi{--tile-w:104px;--tile-h:128px;gap:8px}
.cs-reels.is-dense{--tile-w:78px;--tile-h:calc((clamp(300px,52vh,440px) - 40px - (var(--lanes) - 1) * 6px) / var(--lanes));gap:6px}
.cs-stage.is-rolling .cs-reels{opacity:1;transform:none}
.cs-lane{position:relative;display:flex;align-items:center;gap:8px;min-width:0}
.cs-lane-label{flex:0 0 18px;font:800 11px Inter,sans-serif;color:#9d93ad}
.cs-window{position:relative;flex:1;min-width:0;height:var(--tile-h);overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#1b1524,#0c0911);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 10px 24px #0009;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cs-strip{display:flex;gap:6px;height:100%;padding:7px 0;box-sizing:border-box;will-change:transform}
.reel-tile{flex:0 0 var(--tile-w);height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#221a2d 0%,color-mix(in srgb,var(--rarity) 26%,#171220) 100%);box-shadow:inset 0 -4px 0 var(--rarity),inset 0 0 0 1px #ffffff12;text-align:left;transition:opacity .45s ease,transform .4s ease,box-shadow .4s ease}
.reel-tile-art{display:block;min-height:0;margin:6px 6px 0;border-radius:6px;overflow:hidden;background:#120e18}
.reel-tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.reel-tile-name{padding:5px 8px 0;font:700 11px/1.2 Inter,sans-serif;color:#f3eefa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel-tile-rarity{padding:1px 8px 9px;font:700 9px/1.2 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--rarity),#fff 30%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-reels.is-dense .reel-tile-name,.cs-reels.is-dense .reel-tile-rarity{display:none}.cs-reels.is-dense .reel-tile-art{margin:4px 4px 6px}
.reel-tile.is-shiny{background:linear-gradient(180deg,#2d2312,#5b4519);box-shadow:inset 0 -4px 0 #f3ce71,inset 0 0 0 1px #f3ce7170}
.cs-marker{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:2;background:linear-gradient(#ffd967,#fff6d6 50%,#ffd967);box-shadow:0 0 10px #ffd967,0 0 24px #ffb84499}
.cs-marker:before,.cs-marker:after{content:'';position:absolute;left:50%;margin-left:-7px;border:7px solid transparent}
.cs-marker:before{top:-1px;border-top-color:#ffd967}.cs-marker:after{bottom:-1px;border-bottom-color:#ffd967}
.cs-window.is-settled .reel-tile:not(.is-winner){opacity:.35}
.reel-tile.is-winner{transform:scale(1.05);box-shadow:inset 0 -4px 0 var(--rarity),0 0 0 2px var(--rarity),0 0 26px color-mix(in srgb,var(--rarity) 80%,transparent)}
@media(max-width:640px){.cs-stage{height:clamp(280px,58vh,420px)}.cs-reels{--tile-w:104px;--tile-h:150px;padding:0 8px}.cs-reels.is-multi{--tile-w:78px;--tile-h:104px}.vault-box{width:min(340px,86%)}}
@media(prefers-reduced-motion:reduce){.cs-stage *{animation:none!important;transition:none!important}}
.reduce-motion .cs-stage *{animation:none!important;transition:none!important}
/* Shiny tiles in the strip show the meme in gold, like Shiny cards in the collection (refit.css). */
.reel-tile.is-shiny .reel-tile-art img{filter:sepia(1) saturate(1.75) hue-rotate(1deg) contrast(1.06)}
.reel-tile.is-shiny .reel-tile-art{box-shadow:inset 0 0 0 1px #f3ce7199,0 0 10px #f3ce7155}
.reel-tile.is-shiny .reel-tile-rarity{color:#ffe7a0}

/* The owner's designs in the opening (2026-09-25): a square vault whose lid lifts at the seam between its lid
   band and its front, and portrait rewards (booster, display, case) that burst open whole. */
.vault-unlock.is-design .vault-box{aspect-ratio:1;width:min(400px,64%)}
.vault-unlock.is-design.is-reward .vault-box{aspect-ratio:4/5;width:min(300px,50%)}
.vault-unlock.is-design .vault-lid{clip-path:inset(0 0 49.6% 0);transform-origin:40% 50%}
.vault-unlock.is-design .vault-body{clip-path:inset(50.4% 0 0 0)}
.vault-unlock.is-design .vault-seam{left:14.8%;right:31.4%;top:50%}
/* Vault hover: the designs carry their own light sweep, so the page's sweep stays off them. */
.vault-product .case-art-v10.dz-art:after{display:none}
.case-art.dz-art{aspect-ratio:auto!important}
.vault-product .case-art.dz-vault{max-width:250px}
.inventory-slot.inventory-crate .inventory-art .case-art.packaged-crate.dz-art{aspect-ratio:auto!important;scale:1!important;max-width:150px!important}
.drop-card .drop-art .packaged-crate.dz-art{aspect-ratio:auto!important;scale:1!important;width:78px!important}

/* New cards (owner request 2026-09-25): a NEW tag on every card won since the last look, gone on hover; the
   notification after an opening closed early; the sort order button of the collection. */
.collection-slot{position:relative}
.card-new-badge{position:absolute;top:-8px;right:-6px;z-index:6;padding:4px 8px 3px;border-radius:999px;background:linear-gradient(135deg,#ff8ad8,#b98cff 55%,#7cc8ff);color:#170d22;font:800 10px/1 Inter,sans-serif;letter-spacing:.09em;box-shadow:0 0 0 2px #17111f,0 4px 14px #ff7ad966;pointer-events:none;animation:card-new-in .35s cubic-bezier(.2,.9,.3,1.3) both}
.card-new-badge.is-leaving{animation:card-new-out .28s ease forwards}
@keyframes card-new-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes card-new-out{to{transform:scale(.55);opacity:0}}
.collection-slot.is-fresh>.meme-card{box-shadow:0 0 0 2px #ff8ad866,0 8px 22px #0006}
.new-cards-toast{text-align:left;border-color:#ff8ad8;cursor:pointer}
.new-cards-toast span{display:flex;flex-direction:column;gap:4px}
.new-cards-toast b{color:#ffd1f1}.new-cards-toast small{color:var(--muted)}
.filter-bar .sort-direction{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:40px}
@media(prefers-reduced-motion:reduce){.card-new-badge,.card-new-badge.is-leaving{animation:none}.card-new-badge.is-leaving{opacity:0}}
.reduce-motion .card-new-badge{animation:none}.reduce-motion .card-new-badge.is-leaving{animation:none;opacity:0}
.results-label .fresh-clear{margin-left:12px;font-size:12px;color:#ffb8ea}

/* The owner's boosters in the tear stage (2026-09-25): the tilted pack stands upright (the still design, turned
   back by its 6 degrees), and the tear follows its frame, measured on the designs: pack 139..341 x 136..504 of
   480 x 640, sealed down to y 157; leaderboard boosters 134..346 x 108..492 of 480 x 600, fitted by width in 3:4. */
.tear-pack-stage.is-design{--pack-l:28.9%;--pack-r:71.1%;--pack-t:21.2%;--cut:25.4%}
.tear-pack-stage.is-design.is-reward{--pack-l:27.9%;--pack-r:72.1%;--pack-t:20%;--cut:26.3%}
.tear-pack-stage.is-design .dz-art,.tear-pack-stage.is-design .dz-art img{width:100%;height:100%}
.tear-pack-stage.is-design .dz-art img{object-fit:contain;transform:rotate(6deg)}

/* Reveal all (2026-09-25): a rare pull flashes in place instead of holding the spotlight. */
.bulk-dealt-card.is-flash-pull{animation:bulk-flash-pull .45s ease-out}
@keyframes bulk-flash-pull{0%{scale:1.14;filter:brightness(2) drop-shadow(0 0 16px var(--rarity))}100%{scale:1;filter:none}}

/* Ten reels (Top 1% crates): two columns of five lanes. */
.cs-reels.is-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:6px;--tile-h:calc((clamp(300px,52vh,440px) - 40px - (var(--rows) - 1) * 6px) / var(--rows));--tile-w:calc(var(--tile-h) * .78)}

/* Display unboxing (owner request 2026-09-25): the box stays at the bottom, its five boosters rise out of it and
   fade, then the cards are dealt. Designs lift their own boosters (.dz-pack); image displays send booster art up
   from behind the closed box. */
.unbox-modal .display-unbox{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:end;gap:12px;height:min(640px,82vh);padding:28px 16px 20px;overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}
.display-unbox{--rim:50%}.display-unbox.is-image{--rim:15%}
.unbox-stage{position:relative;width:min(340px,62vw,calc((82vh - 250px) * .78));transition:opacity .45s ease,scale .45s ease}
.unbox-box{position:relative;z-index:1;animation:unbox-arrive .55s cubic-bezier(.2,.8,.2,1) both}
.unbox-box>*{display:block;width:100%!important;height:auto!important;margin:0!important;transform:none!important}
.unbox-box img{display:block;width:100%;height:auto}
.unbox-glow{position:absolute;left:50%;top:var(--rim);width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--unbox-color) 55%,transparent) 0,transparent 62%);opacity:.28;filter:blur(6px);transition:opacity .8s ease;pointer-events:none;z-index:0}
.unbox-beam{position:absolute;left:50%;bottom:calc(100% - var(--rim));width:46%;height:95%;translate:-50% 0;transform-origin:50% 100%;scale:1 .15;background:linear-gradient(0deg,color-mix(in srgb,var(--unbox-color) 45%,#fff) 0,color-mix(in srgb,var(--unbox-color) 30%,transparent) 42%,transparent 100%);opacity:0;filter:blur(12px);mix-blend-mode:screen;pointer-events:none;z-index:2;transition:opacity .5s ease,scale .9s cubic-bezier(.2,.8,.2,1)}
.unbox-sparks{position:absolute;left:50%;top:var(--rim);width:0;height:0;z-index:3;pointer-events:none}
.unbox-sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px var(--unbox-color);opacity:0}
.unbox-packs{position:absolute;inset:0;z-index:0;pointer-events:none}
.unbox-pack{position:absolute;left:50%;top:30%;width:25%;translate:-50% 0}
.unbox-pack .booster-art{width:100%!important;height:auto!important;margin:0!important}
.unbox-pack img{display:block;width:100%;height:auto}
.display-unbox.is-design .dz-pack{transform-box:fill-box;transform-origin:50% 100%}
.display-unbox.is-rising .unbox-glow{opacity:.85}
.display-unbox.is-rising .unbox-beam{opacity:.75;scale:1 1}
.display-unbox.is-rising .unbox-sparks i{animation:unbox-spark 1.25s ease-out var(--t) both}
.display-unbox.is-rising .dz-pack{animation:unbox-pack 1.3s cubic-bezier(.2,.75,.25,1) calc(var(--pk) * 90ms) both}
.display-unbox.is-rising .unbox-pack{animation:unbox-pack-image 1.3s cubic-bezier(.2,.75,.25,1) calc(var(--pk) * 90ms) both}
.display-unbox.is-fading .unbox-stage{opacity:0;scale:.96}
.display-unbox.is-fading .unbox-copy,.display-unbox.is-fading .unbox-actions{opacity:0;transition:opacity .4s ease}
.unbox-copy{display:grid;justify-items:center;gap:4px;text-align:center}
.unbox-copy b{font:400 22px/1.1 'North Kids',Outfit,sans-serif;letter-spacing:.03em}
.unbox-actions{min-height:44px}
@keyframes unbox-arrive{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes unbox-pack{0%{transform:translate(0,0) scale(1);opacity:1}55%{opacity:1}100%{transform:translate(calc((var(--pk) - 2) * 34px),-250px) scale(1.25);opacity:0}}
@keyframes unbox-pack-image{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}62%{opacity:1}100%{transform:translate(calc((var(--pk) - 2) * 62%),-165%) rotate(calc((var(--pk) - 2) * 7deg)) scale(1.18);opacity:0}}
@keyframes unbox-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1)}}

/* The God Crate cinematic (owner request 2026-09-25): the rarest container of the game gets its own show.
   Phases, added one by one: .is-awake .is-charged .is-held .is-burst .is-revealed; then the deal. */
.god-modal .god-open{position:relative;height:min(640px,82vh);overflow:hidden;border-radius:20px;isolation:isolate;color:#fff;background:radial-gradient(ellipse 80% 70% at 50% 56%,#1d1233 0%,#0b0714 58%,#040208 100%)}
.god-sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 56%,#ffcf6b40 0,#b77dff22 30%,transparent 62%);opacity:0;transition:opacity 2.6s ease}
.god-open.is-awake .god-sky{opacity:1}
.god-open.is-burst .god-sky{background:radial-gradient(circle at 50% 56%,#fff3c8 0,#ffcf6b80 22%,#b77dff30 48%,transparent 75%)}
.god-stars{position:absolute;inset:0}
.god-stars i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;animation:god-twinkle 3.2s ease-in-out var(--t) infinite}
.god-rays{position:absolute;left:50%;top:56%;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe8a6 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,#0008 16%,transparent 44%);mask:radial-gradient(circle,#000 0,#0008 16%,transparent 44%);opacity:0;scale:.3;transition:opacity 2s ease,scale 3s cubic-bezier(.2,.7,.2,1);animation:god-spin 24s linear infinite;pointer-events:none}
.god-rays.is-back{background:repeating-conic-gradient(from 7deg,#c9a2ff 0 2deg,transparent 2deg 11deg);animation-direction:reverse;animation-duration:34s}
.god-open.is-awake .god-rays{opacity:.24;scale:1}
.god-open.is-charged .god-rays{opacity:.45}
.god-open.is-held .god-rays{opacity:.9;scale:.14;transition:scale .38s cubic-bezier(.6,0,.9,.4),opacity .38s}
.god-open.is-burst .god-rays{opacity:.8;scale:1.55;transition:scale 1.3s cubic-bezier(.1,.8,.2,1),opacity 1.3s}
.god-open.is-revealed .god-rays{opacity:.42}
.god-vortex,.god-orbit,.god-shock,.god-cards,.god-confetti{position:absolute;left:50%;top:56%;width:0;height:0;pointer-events:none}
.god-vortex{opacity:0;transition:opacity 1s ease}
.god-open.is-awake .god-vortex{opacity:1}
.god-open.is-burst .god-vortex{opacity:0;transition:opacity .15s}
.god-vortex i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff3c4;box-shadow:0 0 10px 2px #ffcf6b;opacity:0;animation:god-suck 1.7s cubic-bezier(.5,0,.9,.6) var(--t) infinite}
.god-open.is-charged .god-vortex i{animation-duration:1s}
.god-orbit{opacity:0;scale:1.3;transition:opacity 1.2s ease,scale 2.4s cubic-bezier(.5,0,.3,1);animation:god-spin 5s linear infinite}
.god-open.is-awake .god-orbit{opacity:1;scale:1}
.god-open.is-charged .god-orbit{scale:.62}
.god-open.is-held .god-orbit{scale:.3;transition:scale .4s ease-in}
.god-open.is-burst .god-orbit{opacity:0;scale:2.8;transition:scale .8s cubic-bezier(.1,.8,.2,1),opacity .8s}
.god-orbit i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffe38f 40%,#ff9f2e00 72%);box-shadow:0 0 18px 4px #ffd36a99;transform:rotate(var(--a)) translateX(min(230px,34vw))}
.god-crate-box{position:absolute;left:50%;top:56%;width:min(320px,56vw);aspect-ratio:1;translate:-50% -46%;opacity:0;scale:.6;transition:opacity .9s ease,scale 2.4s cubic-bezier(.16,.84,.24,1)}
.god-open.is-awake .god-crate-box{opacity:1;scale:1}
.god-open.is-charged .god-crate-box{animation:god-shake .08s linear infinite}
.god-open.is-held .god-crate-box{animation:none;scale:1.08;filter:brightness(1.7) saturate(1.3) drop-shadow(0 0 40px #ffd97a);transition:scale .35s ease-in,filter .35s}
.god-open.is-burst .god-crate-box{filter:none;transition:filter 1.2s ease}
.god-aura{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,#ffd97a55 0,#b77dff22 40%,transparent 65%);opacity:0;transition:opacity 1.5s}
.god-open.is-awake .god-aura{opacity:1;animation:god-pulse 1.6s ease-in-out infinite}
.god-open.is-charged .god-aura{animation-duration:.55s}
.god-crate-body,.god-crate-lid{position:absolute;inset:0}
.god-crate-box .dz-art :is(svg,img){display:block;width:100%;height:100%}
.god-crate-lid{clip-path:inset(0 0 49.8% 0)}
.god-crate-body{clip-path:inset(50.2% 0 0 0)}
.god-open.is-burst .god-crate-lid{translate:0 -95%;rotate:-16deg;opacity:0;transition:translate 1s cubic-bezier(.15,.75,.25,1),rotate 1s ease-out,opacity .6s ease .4s}
.god-open.is-burst .god-crate-body{translate:0 7%;transition:translate 1.1s cubic-bezier(.2,.8,.2,1)}
.god-open.is-revealed .god-crate-body{opacity:.55;transition:opacity 1.6s ease,translate 1.1s}
.god-cracks{position:absolute;left:15%;top:39%;width:54%;height:37%;overflow:visible;pointer-events:none}
.god-cracks path{fill:none;stroke:#fff8dc;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #ffd36a) drop-shadow(0 0 6px #ffb52e);opacity:0}
.god-open.is-charged .god-cracks path{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease calc(var(--i) * .11s),opacity .2s calc(var(--i) * .11s)}
.god-open.is-burst .god-cracks{opacity:0;transition:opacity .2s}
.god-seam{position:absolute;left:14%;width:56%;top:50.2%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#fff6d0 12%,#fff 50%,#fff6d0 88%,transparent);box-shadow:0 0 12px 3px #ffd36a,0 0 30px 8px #ffb52e88;opacity:0;scale:.3 1;transition:opacity .4s,scale .8s}
.god-open.is-charged .god-seam{opacity:.9;scale:1 1}
.god-open.is-held .god-seam{box-shadow:0 0 18px 6px #fff2b8,0 0 60px 16px #ffcf6b}
.god-open.is-burst .god-seam{opacity:0;transition:opacity .3s}
.god-core{position:absolute;left:30%;top:30%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff3c4 30%,#ffcf6b55 55%,transparent 70%);opacity:0;scale:.3}
.god-open.is-held .god-core{opacity:1;scale:1.25;transition:opacity .35s,scale .35s ease-in}
.god-open.is-burst .god-core{opacity:0;scale:4.5;transition:opacity .9s ease,scale .9s cubic-bezier(.1,.8,.2,1)}
.god-shock i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid #fff3c4;box-shadow:0 0 30px #ffcf6b,inset 0 0 30px #ffcf6b;opacity:0}
.god-open.is-burst .god-shock i{animation:god-shock 1.2s cubic-bezier(.1,.7,.3,1) forwards}
.god-open.is-burst .god-shock i:nth-child(2){border-color:#fff;animation-delay:.12s;animation-duration:1.4s}
.god-open.is-burst .god-shock i:nth-child(3){border-color:#c9a2ff;animation-delay:.26s;animation-duration:1.6s}
.god-cards i{position:absolute;left:-30px;top:-42px;width:60px;height:84px;border-radius:6px;overflow:hidden;opacity:0;box-shadow:0 0 14px #ffd36a88}
.god-open.is-burst .god-cards i{animation:god-card 1.9s cubic-bezier(.12,.72,.3,1) var(--t) forwards}
.god-confetti i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0}
.god-open.is-burst .god-confetti i{animation:god-confetti 2.3s cubic-bezier(.1,.75,.35,1) var(--t) forwards}
.god-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 56%,#fff 0,#fff8e0 35%,#ffd97acc 60%,#ffd97a00 100%);opacity:0;pointer-events:none;z-index:4}
.god-open.is-burst .god-flash{animation:god-flash 1.1s ease-out forwards}
.god-title{position:absolute;left:16px;right:16px;top:8%;z-index:5;text-align:center;opacity:0;translate:0 -10px;scale:1.25;pointer-events:none}
.god-title .eyebrow{display:block;text-align:center;color:#ffe7a0;letter-spacing:.3em}
.god-title h2{margin:.12em 0 .12em;font:400 clamp(40px,7vw,72px)/1 'North Kids',Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(100deg,#fff4c8 0%,#ffd46b 30%,#fff 45%,#ffcf6b 60%,#f7b6ff 85%,#fff4c8 100%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #ffcf6b88) drop-shadow(0 4px 0 #6a3f00);animation:god-shine 3s linear infinite}
.god-title p{margin:0;color:#f6e9ff;font-weight:700;letter-spacing:.06em}
.god-open.is-revealed .god-title{opacity:1;translate:0 0;scale:1;transition:opacity .6s ease,translate .9s cubic-bezier(.2,.9,.2,1),scale .9s cubic-bezier(.2,.9,.2,1)}
.god-actions{position:absolute;left:0;right:0;bottom:18px;z-index:6;display:flex;justify-content:center}
@keyframes god-twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.8;transform:scale(1.4)}}
@keyframes god-spin{to{rotate:360deg}}
@keyframes god-suck{0%{transform:rotate(var(--a)) translateX(var(--r)) scale(1.2);opacity:0}15%{opacity:1}100%{transform:rotate(calc(var(--a) + 140deg)) translateX(12px) scale(.2);opacity:0}}
@keyframes god-shake{0%{translate:-50% -46%}20%{translate:calc(-50% + 2px) calc(-46% - 1.5px)}40%{translate:calc(-50% - 2.5px) calc(-46% + 1.5px)}60%{translate:calc(-50% + 2.5px) calc(-46% + 1px)}80%{translate:calc(-50% - 1.5px) calc(-46% - 2px)}100%{translate:-50% -46%}}
@keyframes god-pulse{0%,100%{scale:1}50%{scale:1.08}}
@keyframes god-shock{0%{opacity:1;scale:.2}100%{opacity:0;scale:9}}
@keyframes god-card{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot))}}
@keyframes god-confetti{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}6%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 120px)) rotate(calc(var(--rot) * 3)) scale(1)}}
@keyframes god-flash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
@keyframes god-shine{to{background-position:-220% 0}}
@media(max-width:640px){.unbox-stage{width:min(300px,70vw)}.god-crate-box{width:min(280px,64vw)}.god-rays{width:1000px;height:1000px;margin:-500px 0 0 -500px}}

/* Boosters are always alive (owner request 2026-09-25), like the vaults: a slow float, a light sweep over the pack
   itself (masked by its artwork) and a few twinkles. Art out of view pauses; reduced motion keeps it still. The
   wrapper carries the motion because refit.css pins .booster-art.packaged-art in place. */
.pack-live{position:relative;display:block;animation:pack-float 5.8s ease-in-out calc(var(--pack-delay,0s) * -1) infinite}
.pack-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:var(--pack-mask) center/100% 100% no-repeat;mask:var(--pack-mask) center/100% 100% no-repeat}
.pack-sweep::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff59 45%,#fffc 50%,#ffffff59 55%,transparent);transform:translateX(-40%) skewX(-12deg);mix-blend-mode:screen;animation:pack-sweep 7s ease-in-out calc(var(--pack-delay,0s) * -1) infinite}
.pack-twinkles{position:absolute;inset:0;pointer-events:none}
.pack-twinkles i{position:absolute;width:11px;height:11px;background:radial-gradient(circle,#fff 0 22%,transparent 62%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 4px var(--pack-glint));opacity:0;animation:pack-twinkle 3.6s ease-in-out infinite}
.pack-twinkles i:nth-child(1){left:14%;top:16%;animation-delay:-.4s}
.pack-twinkles i:nth-child(2){right:12%;top:38%;animation-delay:-1.6s;scale:.8}
.pack-twinkles i:nth-child(3){left:60%;bottom:12%;animation-delay:-2.7s;scale:1.2}
@keyframes pack-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes pack-sweep{0%,58%{transform:translateX(-40%) skewX(-12deg)}88%,100%{transform:translateX(420%) skewX(-12deg)}}
@keyframes pack-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}
.pack-live.is-offscreen,.pack-live.is-offscreen *,.pack-live.is-offscreen .pack-sweep::before{animation-play-state:paused}
.tear-layers .pack-live,.tear-pack .pack-live,.unbox-pack .pack-live{animation:none}
.tear-layers .pack-sweep,.tear-layers .pack-twinkles{display:none}
@media (prefers-reduced-motion: reduce){.pack-live,.pack-live *,.pack-live .pack-sweep::before{animation:none!important}.pack-twinkles{display:none}}
.reduce-motion .pack-live,.reduce-motion .pack-live *,.reduce-motion .pack-live .pack-sweep::before{animation:none!important}.reduce-motion .pack-twinkles{display:none}