/* Sealed pack ceremony. All motion is finite and scoped to the enhanced popup. */
.pack-opening {
 --opening-gold:#efd18c;--opening-brass:#b99653;--opening-dark:#0b201a;
 position:relative;min-width:0;isolation:isolate;text-align:center;
}
.pack-opening .reward-heading {margin:0 auto 14px;max-width:630px;padding:0 32px;animation:pack-opening-heading .5s ease-out both}
.pack-opening .reward-heading .reward-medal {width:48px;height:48px;margin-bottom:8px}
.pack-opening .reward-heading h2 {font-size:clamp(25px,3vw,36px);line-height:1.2}
.pack-opening .reward-heading p {font-size:12px;margin-top:8px}
.pack-opening-stage {
 position:relative;display:grid;place-items:center;min-width:0;height:246px;
 margin:0 auto 12px;perspective:1100px;transition:height .55s ease,margin .55s ease;
}
.pack-opening-stage::after {
 content:"";position:absolute;left:50%;bottom:13px;width:290px;max-width:85%;height:34px;
 border-radius:50%;background:#020b09;filter:blur(15px);opacity:.58;transform:translateX(-50%);pointer-events:none;
}
.pack-opening-case {
 position:relative;z-index:2;display:grid;place-items:center;max-width:100%;
 width:340px;min-height:214px;transform-style:preserve-3d;
 filter:drop-shadow(0 17px 15px #0009);animation:pack-case-arrive .65s cubic-bezier(.16,.78,.25,1) both;
}
.pack-opening-case > .sealed-pack-preview {
 position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;max-width:100%;width:230px;
 min-height:215px;margin:0;padding:22px 16px 18px;box-sizing:border-box;border:4px ridge #bd9c5a;
 border-radius:10px;color:#f6dfab;
 background:url('./assets/ui/card-wood-grain.svg?v=2') center/100% 100% no-repeat,
  radial-gradient(ellipse at 40% 0,#f8d78725,transparent 66%),
  linear-gradient(135deg,color-mix(in srgb,var(--clan,#396149) 48%,#685334),#172e24 58%,#0c1c17);
 box-shadow:inset 0 0 0 2px #15271b,inset 0 0 0 4px #ebd49a5c,inset 0 0 27px #020d0999,0 0 0 1px #efe0a766;
}
.pack-opening-case .sealed-pack-preview::before {
 content:"";position:absolute;inset:10px;border:1px solid #ecd59550;border-radius:3px;pointer-events:none;
}
.pack-opening-case .sealed-pack-emblem {
 width:94px;height:112px;border-color:#cfac6a;background:linear-gradient(150deg,#fff0bc20,#0d281c33);
 box-shadow:inset 0 0 0 1px #10261e,inset 0 0 0 3px #d9be8259,0 4px 9px #0006;
}
.pack-opening-case .sealed-pack-copy {position:relative;max-width:100%;min-width:0}
.pack-opening-case .sealed-pack-title {color:#fff0c4;font-size:19px;margin:0;line-height:1.22;text-shadow:0 2px 3px #0008}
.pack-opening-case .sealed-pack-preview small {color:#d9c79c;font-size:10px;line-height:1.5}
.pack-opening-seal {
 position:absolute;z-index:4;left:50%;top:54%;width:68px;height:68px;box-sizing:border-box;
 display:grid;place-items:center;border:3px ridge #e8c479;border-radius:50%;
 color:#3c351f;background:radial-gradient(circle at 30% 22%,#fff2bc,#d5af5e 48%,#95723b 86%,#e2bf6b);
 box-shadow:0 5px 14px #0009,inset 0 0 0 3px #514021,inset 0 0 0 4px #ead490,0 0 0 1px #f6e2a27a;
 transform:translate(-50%,-50%);pointer-events:none;
}
.pack-opening-seal::before {
 content:"";position:absolute;inset:8px;border:1px dashed #715227;border-radius:50%;
}
.pack-opening-seal::after {
 content:"";position:absolute;width:25px;height:25px;border:2px solid #604526;transform:rotate(45deg);
 background:linear-gradient(135deg,#f8dda4b0,#9e74385c);box-shadow:inset 0 0 0 4px #b7955266;
}
.pack-opening-seal svg {position:relative;z-index:1;width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6}
.pack-opening-seal:has(svg)::after {display:none}
.pack-opening-rays {
 position:absolute;z-index:0;left:50%;top:49%;width:490px;max-width:120%;aspect-ratio:1;
 opacity:0;pointer-events:none;transform:translate(-50%,-50%);
 background:repeating-conic-gradient(from 12deg,#ffe1a078 0deg 3deg,transparent 3deg 17deg);
 -webkit-mask-image:radial-gradient(circle,#000 0 15%,transparent 67%);
 mask-image:radial-gradient(circle,#000 0 15%,transparent 67%);
}
.pack-opening-sparks {position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.pack-opening-sparks i {
 position:absolute;left:50%;top:52%;display:block;width:4px;height:7px;border-radius:50%;
 opacity:0;background:#fff1bd;box-shadow:0 0 7px #ffcb75;
 transform:rotate(calc(var(--i,0)*20deg)) translateY(-20px);
}
.pack-opening[data-opening-phase='sealed'] .pack-opening-seal {animation:pack-seal-charge 1.9s .25s ease-in-out both}
.pack-opening[data-opening-phase='opening'] .pack-opening-seal {animation:pack-seal-break .9s cubic-bezier(.2,.78,.25,1) both}
.pack-opening[data-opening-phase='opening'] .pack-opening-case {animation:pack-case-unseal .9s ease-in both}
.pack-opening[data-opening-phase='opening'] .pack-opening-rays {animation:pack-rays-burst 1.45s ease-out both}
.pack-opening[data-opening-phase='opening'] .pack-opening-sparks i {animation:pack-spark-burst 1.2s calc(var(--i,0)*.015s) ease-out both}
.pack-opening[data-opening-phase='revealing'] .pack-opening-stage {height:62px;margin-bottom:5px}
.pack-opening[data-opening-phase='revealing'] .pack-opening-case,
.pack-opening[data-opening-phase='revealing'] .pack-opening-seal {opacity:0;visibility:hidden;pointer-events:none;animation:none}
.pack-opening[data-opening-phase='revealing'] .pack-opening-stage::after {opacity:0}
.pack-opening[data-opening-phase='revealing'] .pack-opening-rays {animation:pack-rays-afterglow 1.2s ease-out both}
.pack-opening[data-opening-phase='complete'] .pack-opening-stage {display:none}
.pack-opening[data-opening-phase='sealed'] .pack-reveal,
.pack-opening[data-opening-phase='opening'] .pack-reveal {
 max-height:0;margin:0!important;opacity:0;visibility:hidden;overflow:hidden;pointer-events:none;
}
.pack-opening[data-opening-phase='revealing'] .pack-reveal {animation:pack-grid-arrive .5s ease-out both}
.pack-opening .card-grid.pack-reveal {
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px;margin:18px 0 0;
 min-width:0;perspective:1200px;overflow:visible;
}
.pack-opening .card-grid.pack-reveal.campaign-stage-pack-reveal,
.pack-opening .card-grid.pack-reveal:has(.pack-reward-item:only-child) {
 grid-template-columns:minmax(0,270px);justify-content:center;max-width:400px;margin:18px auto 0;
}
.pack-opening .pack-reward-item {
 --reward-rarity:#74cc88;position:relative;min-width:0;animation:none;
 perspective:1100px;isolation:isolate;
}
.pack-opening .pack-reward-item[data-rarity='R'] {--reward-rarity:#64baf6}
.pack-opening .pack-reward-item[data-rarity='E'] {--reward-rarity:#c188ef}
.pack-opening .pack-reward-item[data-rarity='L'] {--reward-rarity:#ffd179}
.pack-opening .pack-reward-item[data-rarity='LEADER'] {--reward-rarity:#9ce9da}
.pack-opening .pack-reward-item::before {
 content:"";position:absolute;z-index:-1;inset:14px -8px 65px;border-radius:35px;
 background:radial-gradient(ellipse,var(--reward-rarity),transparent 68%);
 filter:blur(13px);opacity:0;transition:opacity .55s ease;pointer-events:none;
}
.pack-opening .pack-reward-item.revealed::before {opacity:.32}
.pack-opening .pack-flip {
 position:relative;width:100%;height:320px;min-width:0;transform-style:preserve-3d;
 transform:rotateY(0deg);transition:transform .8s cubic-bezier(.18,.75,.2,1);
}
.pack-opening .pack-reward-item.revealed .pack-flip {transform:rotateY(180deg)}
.pack-opening .pack-flip-back,
.pack-opening .pack-flip-front {
 position:absolute;inset:0;width:100%;height:100%;min-width:0;box-sizing:border-box;
 -webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:9px;
}
.pack-opening .pack-flip-back {
 pointer-events:none;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
 border:3px ridge #cbb173;color:#f0d69a;
 background:url('./assets/ui/card-wood-grain.svg?v=2') center/100% 100% no-repeat,
  radial-gradient(ellipse at 35% 20%,#f6de9e2e,transparent 65%),linear-gradient(140deg,#42664e,#17382c 55%,#0f201b);
 box-shadow:0 11px 19px #0009,inset 0 0 0 2px #0b2018,inset 0 0 0 4px #dfca8f70,inset 0 0 22px #030d0966;
}
.pack-opening .pack-flip-back::before {
 content:"";position:absolute;inset:9px;border:1px solid #d9c18670;border-radius:4px;
 background:linear-gradient(45deg,transparent 49.6%,#d5bc7130 49.7% 50.3%,transparent 50.4%),
  linear-gradient(-45deg,transparent 49.6%,#d5bc7130 49.7% 50.3%,transparent 50.4%);
 pointer-events:none;
}
.pack-opening .pack-flip-back::after {
 content:"";position:absolute;inset:18px;border:1px solid #e1c88533;border-radius:3px;pointer-events:none;
}
.pack-opening .pack-flip-back :is(svg,.card-clan-mark) {
 position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;
 padding:9px;box-sizing:border-box;border:3px ridge #d7b976;border-radius:50%;
 background:radial-gradient(circle at 30% 25%,#f4dea6,#c6a363 64%,#8c6a39);
 color:#2f4432;box-shadow:0 4px 12px #0008,inset 0 0 0 2px #775f33;
}
.pack-opening .pack-flip-back .card-clan-mark svg {
 width:38px;height:38px;padding:0;border:0;background:none;box-shadow:none;
}
.pack-opening .pack-flip-back svg {fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pack-opening .pack-flip-back :is(span,small,b):not(.card-clan-mark) {
 position:relative;z-index:1;color:#e4cf9c;font:700 10px/1.4 'Segoe UI',Tahoma,sans-serif;letter-spacing:2px;
}
.pack-opening .pack-flip-front {transform:rotateY(180deg);visibility:hidden;pointer-events:none}
.pack-opening .pack-reward-item.revealed .pack-flip-front {visibility:visible;pointer-events:auto}
.pack-opening .pack-flip-front .card-click {width:100%;height:100%;animation:none!important;transition:none}
.pack-opening .pack-flip-front .card-click:hover {transform:none;filter:none}
.pack-opening .pack-flip-front .hero-card.hero-card {
 width:100%;height:320px;box-shadow:0 10px 24px #000a,0 0 19px color-mix(in srgb,var(--reward-rarity) 35%,transparent);
}
.pack-opening .pack-reward-item.revealed .pack-flip-front .hero-card {animation:pack-rarity-light 1.4s .45s ease-out both}
.pack-opening .pack-reward-item[data-rarity='L'].revealed .pack-flip-front .hero-card {animation-duration:1.8s}
.pack-opening .pack-flip-front .hero-card.hero-card .portrait {flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto}
.pack-opening .pack-flip-front .hero-card.hero-card .card-body {flex:0 0 auto;border-width:18px 16px 16px;padding:3px 2px}
.pack-opening .pack-flip-front .hero-card.hero-card .card-name {
 display:flex;align-items:center;justify-content:center;min-height:34px;margin:0;padding:0;
 border:0;box-shadow:none;font-size:14px;line-height:1.2;overflow-wrap:anywhere;
}
.pack-opening .pack-flip-front .hero-card.hero-card :is(.card-ability,.card-clan) {display:none!important}
.pack-opening .pack-reward-item :is(.pack-copy-gain,.copy-progress) {
 opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .4s .45s ease,transform .4s .45s ease,visibility 0s .45s;
}
.pack-opening .pack-reward-item.revealed :is(.pack-copy-gain,.copy-progress) {opacity:1;visibility:visible;transform:translateY(0)}
.pack-opening .pack-copy-gain {color:#f4ddb0;font-size:12px;margin-top:11px;line-height:1.4}
.pack-opening .copy-progress {min-width:0;padding:9px;background:#0b201bd9;border-color:#bb9d5950}
.pack-opening .copy-progress-head {flex-wrap:wrap}
.pack-opening .copy-progress > small {color:#c8c8ac}
.pack-opening .copy-use-summary {display:none}
.pack-opening-footer {
 position:sticky;bottom:-1px;z-index:8;display:flex;align-items:center;justify-content:center;
 gap:10px;flex-wrap:wrap;padding:17px 8px 7px;margin:20px 0 0;min-width:0;
 border-top:1px solid #caad6852;background:linear-gradient(#152a2200,#152a22 19%,#152a22);
}
.pack-opening-footer .btn {min-height:44px;min-width:150px;max-width:100%;font-size:12px;white-space:normal}
.pack-opening-footer [data-pack-status] {flex:1 1 190px;min-width:0;margin:0;color:#ead8af;font-size:12px;line-height:1.5;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pack-opening-footer .reward-skip {margin:0;min-height:40px;color:#ded1b1}
.pack-opening-footer .btn:disabled {cursor:default;opacity:.5}
.pack-opening:not([data-opening-phase='complete']) .reward-actions {display:none}
.pack-opening :is(.btn,.reward-skip):focus-visible {outline:2px solid #ffe3a0;outline-offset:3px}
@keyframes pack-opening-heading {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pack-case-arrive {from{opacity:0;transform:translateY(16px) rotateX(8deg) scale(.9)}to{opacity:1;transform:translateY(0) rotateX(0deg) scale(1)}}
@keyframes pack-seal-charge {
 0%{filter:brightness(1);box-shadow:0 5px 14px #0009,inset 0 0 0 3px #514021,inset 0 0 0 4px #ead490}
 65%{filter:brightness(1.3);box-shadow:0 5px 14px #0009,0 0 36px #ffda887c,inset 0 0 0 3px #514021,inset 0 0 0 4px #ead490}
 100%{filter:brightness(1.1);box-shadow:0 5px 14px #0009,0 0 13px #ffda8850,inset 0 0 0 3px #514021,inset 0 0 0 4px #ead490}
}
@keyframes pack-seal-break {0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.13)}100%{opacity:0;transform:translate(-50%,-90%) rotate(15deg) scale(.5);filter:blur(3px)}}
@keyframes pack-case-unseal {0%{opacity:1;transform:translateY(0) scale(1)}28%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{opacity:0;transform:translateY(-26px) scale(.9);filter:blur(4px)}}
@keyframes pack-rays-burst {0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(.4)}30%{opacity:.95;transform:translate(-50%,-50%) rotate(4deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(14deg) scale(1.23)}}
@keyframes pack-rays-afterglow {from{opacity:.4;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes pack-spark-burst {0%{opacity:0;transform:rotate(calc(var(--i,0)*20deg)) translateY(-20px) scale(.5)}15%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--i,0)*20deg)) translateY(-165px) scale(.1)}}
@keyframes pack-grid-arrive {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes pack-rarity-light {0%{filter:brightness(1);box-shadow:0 10px 24px #000a}36%{filter:brightness(1.17);box-shadow:0 10px 24px #000a,0 0 38px color-mix(in srgb,var(--reward-rarity) 72%,transparent)}100%{filter:brightness(1);box-shadow:0 10px 24px #000a,0 0 19px color-mix(in srgb,var(--reward-rarity) 35%,transparent)}}
@media(max-width:900px) {
 .pack-opening .card-grid.pack-reveal {grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
 .pack-opening .pack-flip,.pack-opening .pack-flip-front .hero-card.hero-card {height:300px}
}
@media(max-width:660px) {
 .pack-opening .reward-heading {padding:0 26px;margin-bottom:10px}
 .pack-opening .reward-heading .reward-medal {width:40px;height:40px}
 .pack-opening .reward-heading h2 {font-size:25px}
 .pack-opening .reward-heading p {font-size:11px}
 .pack-opening-stage {height:224px;margin-bottom:8px}
 .pack-opening-case {min-height:195px;width:280px}
 .pack-opening-case > .sealed-pack-preview {width:207px;min-height:194px;padding:17px 13px 14px}
 .pack-opening-case .sealed-pack-emblem {width:83px;height:100px}
 .pack-opening-case .sealed-pack-preview::before {inset:10px}
 .pack-opening-case .sealed-pack-title {font-size:18px}
 .pack-opening-seal {width:61px;height:61px}
 .pack-opening .card-grid.pack-reveal {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 11px}
 .pack-opening .card-grid.pack-reveal.campaign-stage-pack-reveal,
 .pack-opening .card-grid.pack-reveal:has(.pack-reward-item:only-child) {grid-template-columns:minmax(0,240px)}
 .pack-opening .pack-flip,.pack-opening .pack-flip-front .hero-card.hero-card {height:280px}
 .pack-opening-footer {gap:8px;padding:14px 0 5px;margin-top:15px}
 .pack-opening-footer .btn {min-width:0;flex:1 1 130px;font-size:11px}
 .pack-opening-footer .reward-skip {min-height:38px;font-size:11px}
 .pack-opening-footer [data-pack-status] {font-size:11px;flex-basis:150px}
}
@media(max-width:390px) {
 .pack-opening .pack-flip-front .hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-stats>div {top:44px;width:43px;height:62px;padding:3px 1px}
 .pack-opening .pack-flip-front .hero-card.hero-card .card-stats b {font-size:26px}
 .pack-opening .pack-flip-front .hero-card.hero-card .card-stats .stat-icon {width:14px;height:14px}
 .pack-opening .reward-heading h2 {font-size:22px}
 .pack-opening .reward-heading .eyebrow {font-size:8px;letter-spacing:1.3px}
 .pack-opening .reward-heading p {font-size:10px;line-height:1.5}
 .pack-opening-stage {height:210px}
 .pack-opening-case {width:240px;min-height:183px}
 .pack-opening-case > .sealed-pack-preview {width:190px;min-height:180px;padding:15px 11px 12px}
 .pack-opening-case .sealed-pack-preview::before {inset:9px}
 .pack-opening-case .sealed-pack-title {font-size:16px}
 .pack-opening-case .sealed-pack-emblem {width:78px;height:91px}
 .pack-opening-case .sealed-pack-preview small {font-size:9px}
 .pack-opening .card-grid.pack-reveal {gap:14px 9px}
 .pack-opening .pack-flip,.pack-opening .pack-flip-front .hero-card.hero-card {height:245px}
 .pack-opening .pack-flip-front .hero-card.hero-card .card-body {border-width:16px 12px 13px;padding:2px 1px}
 .pack-opening .pack-flip-front .hero-card.hero-card .card-name {font-size:12px;min-height:31px}
 .pack-opening .pack-flip-back :is(svg,.card-clan-mark) {width:52px;height:52px;padding:6px}
 .pack-opening .pack-flip-back .card-clan-mark svg {width:31px;height:31px}
 .pack-opening .pack-flip-back :is(span,small,b):not(.card-clan-mark) {font-size:8px;letter-spacing:1.3px}
 .pack-opening .pack-copy-gain {font-size:10px;margin-top:9px}
 .pack-opening .copy-progress {padding:7px;margin-top:7px}
 .pack-opening .copy-progress-head {font-size:9px;gap:4px}
 .pack-opening .copy-progress>small {font-size:8px;line-height:1.5}
 .pack-opening-footer .btn {flex-basis:100%;min-height:39px}
 .pack-opening-footer {margin-top:13px;padding-top:11px}
 .pack-opening-footer [data-pack-status] {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
 .pack-opening,.pack-opening *,.pack-opening *::before,.pack-opening *::after {animation:none!important;transition:none!important}
 .pack-opening .pack-opening-rays,.pack-opening .pack-opening-sparks,.pack-opening .pack-opening-seal {display:none!important}
}