/* Pack presentation is independent of the committed reward transaction. */
.rarity-common { --rarity:#bfd0d7; --rarity-glow:#bed9ec36; }
.rarity-rare { --rarity:#64bdff; --rarity-glow:#479dff66; }
.rarity-epic { --rarity:#d19aff; --rarity-glow:#b958ff88; }
.pack-opening-stage { position:relative; isolation:isolate; border:1px solid #839ab334; border-radius:14px; padding:30px 25px 25px; min-height:440px; background:radial-gradient(ellipse at 50% 42%,#344466a6,transparent 70%),#0d1624; overflow:hidden; }
.pack-opening-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:760px; margin:0 auto; perspective:1100px; }
.pack-pull { min-width:0; position:relative; }
.pack-flip { display:block; width:100%; padding:0; background:none; color:#eef3fa; text-align:left; perspective:1000px; border-radius:10px; }
.pack-flip:focus-visible { outline:3px solid #f3d59a; outline-offset:5px; }
.pack-flip-inner { position:relative; display:grid; transform-style:preserve-3d; height:355px; width:100%; transform:rotateY(0); }
.pack-back,.pack-front { grid-area:1/1; display:flex; width:100%; height:100%; flex-direction:column; border-radius:10px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid #a6b9d48a; box-shadow:0 5px 0 #060b14,0 12px 25px #0008; }
.pack-back { align-items:center; justify-content:center; position:relative; background:repeating-linear-gradient(45deg,#a0bcf00b 0 1px,transparent 1px 12px),linear-gradient(155deg,#283952,#111a2b); color:#e2c590; }
.pack-back::before,.pack-back::after { content:''; position:absolute; inset:10px; border:1px solid #c6b58a70; border-radius:5px; pointer-events:none; }
.pack-back::after { inset:18px; border-color:#c6b58a25; }
.pack-back i { font-style:normal; font-size:20px; color:#bba576; }
.pack-back b { font:400 78px/1.5 Georgia,serif; text-shadow:0 0 25px #e6ba5e55; }
.pack-back small { letter-spacing:4px; font-size:11px; }
.pack-back em { position:absolute; bottom:25px; font-style:normal; font-size:9px; letter-spacing:1px; color:#b0c2dc; }
.pack-front { transform:rotateY(180deg); background:#172538; border-color:var(--rarity); box-shadow:0 5px 0 #060b14,0 0 22px var(--rarity-glow); }
.pack-rarity { height:24px; flex:none; display:flex; align-items:center; justify-content:center; gap:5px; color:var(--rarity); background:#050d19bb; font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.pack-front .pack-result-art { height:170px; flex:none; }
.pack-front .pack-result-body { min-height:0; padding:5px 12px 10px; }
.pack-front .pack-result-body>strong { font-size:20px; margin:4px 0 9px; }
.pack-front .pack-card-stats { margin-bottom:7px; }
.pack-pull-reward { display:flex; flex-wrap:wrap; flex:none; align-items:center; justify-content:center; gap:6px; min-height:39px; padding:7px; background:#182f30; color:#bce8d6; font-size:12px; border-top:1px solid #7fbcaa33; }
.pack-pull-reward .icon { width:15px; height:15px; }
.pack-pull-reward.is-duplicate { background:#362e20; color:#ffe0a0; }
.pack-pull-reward small { display:block; width:100%; text-align:center; font-size:8px; letter-spacing:.7px; }
.pack-inspect,.pack-inspect-space { display:flex; width:100%; min-height:44px; justify-content:center; align-items:center; color:#b3c8e1; gap:5px; }
.pack-inspect .icon { width:12px; height:12px; }
.pack-pull.is-revealed .pack-flip-inner { transform:rotateY(180deg); }
.pack-pull.is-flipping .pack-flip-inner { animation:pack-turn 650ms cubic-bezier(.22,.7,.24,1) both; animation-delay:var(--flip-delay,0ms); }
.pack-opening-actions { text-align:center; position:relative; z-index:2; }
.pack-opening-actions>p { min-height:22px; color:#c7d6e9; font-size:13px; margin:13px 0; }
.pack-opening-actions>div { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pack-opening-actions .button { min-width:160px; }
.pack-burst { display:none; position:absolute; inset:0; z-index:3; align-items:center; justify-content:center; pointer-events:none; }
.pack-burst>.pack-object { width:148px; height:208px; animation:pack-break 1000ms cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--phase-delay,0ms); }
.pack-rays { position:absolute; width:min(560px,120vw); aspect-ratio:1; border-radius:50%; background:repeating-conic-gradient(from 15deg,transparent 0deg 19deg,#e7cb854d 21deg 23deg,transparent 26deg 42deg); mask-image:radial-gradient(circle,transparent 9%,#000 29%,transparent 67%); animation:pack-flare 1000ms ease-out both; animation-delay:var(--phase-delay,0ms); }
.phase-opening .pack-burst { display:flex; }
.phase-opening .pack-opening-cards { opacity:0; }
.phase-opening .pack-opening-actions { opacity:.4; }
.phase-closing .pack-opening-cards { animation:pack-gather 480ms ease-in both; animation-delay:var(--phase-delay,0ms); }
.phase-closing .pack-opening-actions { opacity:.4; }
.pack-odds { margin-top:25px; padding:0 3px; }
.pack-odds h2 { font:400 23px/1.2 Georgia,serif; margin:0 0 15px; }
.pack-odds>div { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pack-odds>div>span { display:grid; grid-template-columns:1fr auto; gap:5px; align-items:center; color:var(--rarity); padding:13px 16px; border:1px solid var(--rarity-glow); border-radius:7px; background:#101d2d; }
.pack-odds i { font-style:normal; letter-spacing:2px; font-size:11px; }
.pack-odds strong { grid-row:2; font-size:12px; font-weight:500; }
.pack-odds b { grid-column:2; grid-row:1/3; font-size:23px; font-weight:550; }
.pack-odds>p { color:#9eb2cd; font-size:11px; line-height:1.6; max-width:700px; }
@keyframes pack-break { 0% { transform:scale(.85) rotate(-7deg); } 35% { transform:scale(1.07) rotate(4deg); filter:brightness(1.3); } 57% { transform:scale(1.02) rotate(-4deg); } 72% { opacity:1; transform:scale(1.1); filter:brightness(2.2); } 100% { opacity:0; transform:scale(1.6); filter:brightness(3); } }
@keyframes pack-flare { 0%,30% { opacity:0; transform:scale(.4) rotate(-25deg); } 70% { opacity:1; } 100% { opacity:0; transform:scale(1.4) rotate(20deg); } }
@keyframes pack-turn { 0% { transform:rotateY(0) translateY(0); } 45% { transform:rotateY(80deg) translateY(-10px) scale(1.04); } 100% { transform:rotateY(180deg) translateY(0); } }
@keyframes pack-gather { to { opacity:0; transform:translateY(35px) scale(.86); } }
@media (hover:hover) and (pointer:fine) { .pack-pull:not(.is-revealed) .pack-flip:hover { filter:brightness(1.2); } }
@media (max-width:700px) {
 .pack-opening-stage { padding:22px 10px 19px; min-height:0; margin:0 -4px; }
 .pack-opening-cards { gap:8px; }
 .pack-flip-inner { height:285px; }
 .pack-back b { font-size:54px; }
 .pack-back small { letter-spacing:2px; font-size:9px; }
 .pack-back em { bottom:27px; font-size:7px; letter-spacing:0; text-align:center; max-width:65px; }
 .pack-rarity { font-size:8px; height:23px; letter-spacing:0; }
 .pack-front .pack-result-art { height:115px; }
 .pack-front .pack-result-body { padding:4px 6px 6px; }
 .pack-front .pack-result-body>strong { font-size:15px; line-height:1.1; margin:2px 0 7px; }
 .pack-front .pack-card-stats { gap:9px; }
 .pack-front .pack-card-keywords .keyword { font-size:8px; padding:2px; gap:2px; }
 .pack-pull-reward { min-height:43px; padding:5px 2px; font-size:10px; gap:3px; }
 .pack-pull-reward small { font-size:6px; letter-spacing:.3px; }
 .pack-pull-reward .icon { width:12px; height:12px; }
 .pack-opening-actions .button { min-width:0; flex:1; }
 .pack-opening-actions>p { font-size:12px; }
 .pack-odds>div { gap:7px; }
 .pack-odds>div>span { display:flex; flex-direction:column; gap:6px; padding:12px 5px; }
 .pack-odds strong { font-size:11px; }
 .pack-odds b { font-size:22px; }
}
.reduced-motion .pack-opening-stage *, .reduced-motion .pack-opening-stage *::before { animation:none!important; }
@media (prefers-reduced-motion:reduce) { .pack-opening-stage *, .pack-opening-stage *::before { animation:none!important; } }

.pack-offers { display: grid; gap: 20px; min-width: 0; }
.pack-offer .pack-odds { margin-top: 18px; padding: 0; }
.pack-offer .pack-odds > div { gap: 8px; flex-wrap: wrap; }