.card-pack-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:24px}.card-pack-stage{position:relative;padding:24px;border:1px solid #d4c8e4;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#e2d7fb,transparent 65%),linear-gradient(120deg,#fbf8ff,#f0f8ff);text-align:center;overflow:hidden}.card-pack-stage-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#74568f;letter-spacing:1px}.card-pack-stage-top>b{font-weight:500;letter-spacing:0}.card-pack-preview{height:280px;position:relative;margin:20px 0 12px;perspective:900px}.card-pack-preview-bag{position:absolute;left:50%;top:20px;width:152px;height:230px;display:flex;flex-direction:column;align-items:center;padding:14px 10px;border:1px solid #b8a4d3;background:linear-gradient(120deg,#ece2fc,#fff 35%,#a88acb 70%,#ded0f1);border-radius:5px;box-shadow:3px 16px 23px #5a3f7833;transform:translateX(calc(-50% + var(--bag-order)*95px)) translateY(calc(var(--bag-order)*var(--bag-order)*15px)) rotate(calc(var(--bag-order)*14deg));z-index:calc(3 - var(--bag-order)*var(--bag-order))}.card-pack-preview-bag:before,.card-pack-preview-bag:after{content:'';position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,#8e74af44 0 2px,#ece3f4 2px 4px)}.card-pack-preview-bag:before{top:0}.card-pack-preview-bag:after{bottom:0}.card-pack-preview-bag>span{font-size:7px;letter-spacing:2px;color:#513569;margin:7px 0 11px}.card-pack-preview-bag>img{height:150px;min-height:0;width:100%;object-fit:contain}.card-pack-preview-bag>strong{margin-top:10px;font-size:12px;color:#513569;letter-spacing:2px}.card-pack-stage>h3{font-size:21px;color:#3b2e4b;margin:0 0 10px}.card-pack-stage>p{font-size:12px;color:#665774}.card-pack-process{display:flex;justify-content:center;gap:20px;margin:28px 0 8px}.card-pack-process>span{display:flex;align-items:center;gap:8px;font-size:11px;color:#635170}.card-pack-process b{display:grid;place-items:center;width:25px;height:25px;border:1px solid #c9b7dc;background:#ffffffbf;color:#80549f;border-radius:50%;font-size:9px}.card-pack-checkout h3{font-size:22px;color:#3a2d49;margin-bottom:21px}.card-pack-session{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-block:1px solid #ddd2e7;font-size:12px;color:#695c76}.card-pack-session b{font-size:22px;color:#714a95}.card-pack-session small{font-size:11px;font-weight:400}.card-pack-count-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#4f435e;margin:20px 0 12px}.card-pack-count-label>span{font-size:10px;color:#766384}.card-pack-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.card-pack-options button{border:1px solid #d1c4de;background:#fff;color:#5e4176;padding:12px 4px;border-radius:6px;font-size:18px;font-weight:600}.card-pack-options small{font-size:10px;font-weight:400}.card-pack-options button.selected{background:#f1e8fb;border:2px solid #9163b7;padding:11px 3px;color:#684087}.card-pack-options button:disabled{opacity:.5;cursor:default}.card-pack-summary{display:flex;justify-content:space-between;align-items:center;margin-top:19px;padding:11px 12px;background:#f6f0fc;border-radius:6px;color:#675078;font-size:12px}.card-pack-summary strong{font-size:17px;color:#704b96}.card-pack-checkout .checkout-total{margin-top:16px}.card-pack-checkout>p:last-of-type{font-size:11px;line-height:1.9}.card-pack-checkout>.card-pack-error{color:#9b3854}.card-pack-gallery .prize-image{height:245px}.card-pack-gallery .prize-image img{object-fit:contain}
.cardpack-result-group{text-align:left;margin-top:25px;border-top:1px solid #e3d9ed;padding-top:18px}.cardpack-result-group h3{display:flex;gap:12px;align-items:center;font-size:15px;color:#49345d;margin:0 0 17px}.cardpack-result-group h3>span{font-size:9px;letter-spacing:1px;background:#f0e9f7;border:1px solid #d6c4e6;color:#7b549a;padding:5px 7px;border-radius:4px}.cardpack-result-group h3>small{margin-left:auto;font-size:11px;color:#7a698a;font-weight:400}.cardpack-result-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.cardpack-result-card.result-chip{min-width:0;padding:11px 7px;display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;border:1px solid #d0c1de}.cardpack-result-card.result-chip>b{font-size:16px;color:#775098}.cardpack-result-card>img{width:100%;height:150px;object-fit:contain}.cardpack-result-card>span{font-size:10px;line-height:1.65;text-align:center;color:#5b4e68;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cardpack-results .result-actions{flex-wrap:wrap}
/* Foil wrappers and five card faces are drawn with CSS, source artwork stays intact. */
dialog.pack-animation-modal{width:min(1120px,96vw);max-height:94dvh;padding:0;border-color:#b7a2ce;background:#fff;overflow-x:hidden;overscroll-behavior:contain}dialog.pack-animation-modal>.close{display:none}.pack-opening{--pack-spread:155px;min-height:690px;padding:24px 30px;background:radial-gradient(ellipse at 50% 44%,#e7dcfa,#f9f6fe 47%,#f3f9ff);color:#30253e;text-align:center;overflow:hidden}.pack-animation-top{display:flex;justify-content:space-between;align-items:center;gap:15px;color:#795995;font-size:9px;letter-spacing:2px}.pack-animation-skip{background:#fff;border:1px solid #c6aedb;border-radius:20px;color:#6e448e;font-size:11px;padding:8px 15px;letter-spacing:0;white-space:nowrap}.pack-animation-title{font-size:29px;margin:29px 0 8px;color:#3a294d}.pack-animation-subtitle{font-size:12px;color:#6c5b7d;margin:0 0 18px}.pack-animation-bag{display:inline-block;font-size:11px;color:#74508f;background:#ffffffc4;border:1px solid #d9c9e9;border-radius:18px;padding:7px 17px}.pack-animation-stage{position:relative;height:385px;perspective:1000px}.pack-stage-halo{position:absolute;top:10px;left:50%;width:390px;height:340px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#d7c3f144,transparent 66%);border:1px solid #d6c7e84d}.pack-foil{position:absolute;top:45px;left:50%;width:190px;height:278px;transform:translateX(-50%);z-index:2;perspective:700px}.pack-foil-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;border:1px solid #b09acb;border-radius:5px;background:linear-gradient(125deg,#d9c7ee,#fff 31%,#b49ace 63%,#ede2fb);box-shadow:0 16px 23px #64498133;padding:30px 10px 20px;transition:transform .6s,opacity .5s}.pack-foil-body:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff8 40%,transparent 58%);pointer-events:none}.pack-foil-brand{font-size:9px;letter-spacing:2px;color:#5e4278;font-weight:700;margin-bottom:10px}.pack-foil-art{height:170px;width:100%;min-height:0;position:relative}.pack-foil-art img{width:100%;height:100%;object-fit:contain}.pack-foil-body>strong{color:#4d2c69;font-size:15px;letter-spacing:3px;margin-top:10px}.pack-foil-seal{font-size:6px;letter-spacing:1px;color:#614278;margin-top:9px}.pack-foil-top{position:absolute;left:0;top:0;right:0;height:22px;background:repeating-linear-gradient(90deg,#b8a1cd 0 2px,#e9ddf7 2px 4px);border:1px solid #b09acb;border-radius:4px 4px 0 0;z-index:3;transform-origin:right bottom}.pack-cut-line{position:absolute;top:20px;left:0;right:0;height:2px;border-bottom:2px dashed #8a61aa;z-index:4;transform:scaleX(0);transform-origin:left}.pack-scissors{position:absolute;top:-10px;left:-60px;width:70px;height:55px;opacity:0;z-index:6;filter:drop-shadow(0 3px 2px #624a7b33)}.pack-scissors svg{width:100%;height:100%}.pack-opening[data-phase="cut"] .pack-scissors{animation:pack-cut .95s linear forwards}.pack-opening:not([data-phase="prepare"]) .pack-cut-line{animation:pack-cut-line .9s linear forwards}.pack-opening:not([data-phase="prepare"]):not([data-phase="cut"]) .pack-foil-top{animation:pack-cap-away .65s ease-in forwards}.pack-opening:not([data-phase="prepare"]):not([data-phase="cut"]) .pack-foil-body{transform:translateY(105px) rotateX(15deg) rotateZ(-6deg);opacity:0}.pack-flying-card{position:absolute;left:50%;top:100px;width:137px;height:195px;opacity:0;z-index:5;perspective:900px;transform-style:preserve-3d}.pack-card-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1);border-radius:8px}.pack-card-back,.pack-card-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #ad91c7;border-radius:9px;box-shadow:0 11px 17px #573c7933;overflow:hidden}.pack-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#8e6ac2,#4a316f 75%);color:#fff}.pack-card-back:before,.pack-card-back:after{content:'';position:absolute;width:130px;height:74px;border:1px solid #bba1e5;border-radius:50%;transform:rotate(50deg)}.pack-card-back:after{transform:rotate(-50deg)}.pack-card-back>span{font-size:27px;color:#e8cfff}.pack-card-back>strong{font-size:25px;letter-spacing:3px;z-index:1;margin:5px 0}.pack-card-back>small{font-size:6px;letter-spacing:2px;color:#e4d7f4}.pack-card-front{transform:rotateY(180deg);background:#fff;padding:5px}.pack-card-front>img{width:100%;height:100%;object-fit:contain}.pack-card-front>b{position:absolute;top:3px;left:3px;font-size:10px;color:#fff;background:#795298;padding:3px 6px;border-radius:4px;box-shadow:0 2px 4px #0002}.pack-flying-card.is-revealed .pack-card-inner{transform:rotateY(180deg)}.pack-flying-name{position:absolute;left:-7px;right:-7px;top:calc(100% + 14px);font-size:10px;line-height:1.7;color:#554365;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transition:opacity .3s .3s}.is-revealed .pack-flying-name{opacity:1}.pack-animation-status{font-size:12px;color:#604971;margin:2px 0 18px;min-height:20px}.pack-animation-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.pack-animation-dots>span{border:1px solid #d5c5e2;border-radius:5px;padding:5px 8px;color:#7b648d;background:#fff;font-size:9px}.pack-animation-dots>span.active{background:#f0e5fa;color:#6c3e8f;border-color:#ab87c7}.pack-animation-dots>span.complete{background:#78519b;color:#fff;border-color:#78519b}.pack-animation-progress{height:3px;width:250px;max-width:90%;background:#e0d6eb;border-radius:3px;overflow:hidden;margin:16px auto}.pack-animation-progress>span{display:block;width:0;height:100%;background:var(--gradient);transition:width .3s}.pack-animation-note{font-size:10px;color:#796985;margin:15px 0 0}
@keyframes pack-cut{0%{left:-60px;opacity:1;transform:rotate(-8deg)}90%{opacity:1}100%{left:175px;opacity:0;transform:rotate(6deg)}}@keyframes pack-cut-line{to{transform:scaleX(1)}}@keyframes pack-cap-away{to{transform:translate(65px,-90px) rotate(45deg);opacity:0}}
@media(max-width:1000px){.card-pack-layout{grid-template-columns:minmax(0,1fr) 310px;gap:18px}.card-pack-stage{padding:20px}.card-pack-preview-bag{transform:translateX(calc(-50% + var(--bag-order)*65px)) translateY(calc(var(--bag-order)*var(--bag-order)*15px)) rotate(calc(var(--bag-order)*14deg))}.card-pack-stage>h3{font-size:18px}.card-pack-process{gap:12px}.card-pack-process>span{font-size:10px;gap:5px}.pack-opening{--pack-spread:125px}.pack-flying-card{width:115px;height:166px}}
@media(max-width:680px){.card-pack-layout{grid-template-columns:1fr;gap:16px}.card-pack-checkout{order:-1}.card-pack-stage{padding:19px}.card-pack-stage>h3{font-size:19px}.card-pack-preview{height:260px}.card-pack-preview-bag{width:140px;height:210px}.card-pack-preview-bag>img{height:135px}.card-pack-gallery .prize-image{height:180px}.cardpack-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cardpack-result-group h3{gap:8px;font-size:13px}.cardpack-result-group h3>small{font-size:10px}.cardpack-result-card>img{height:170px}.cardpack-result-card.result-chip{padding:11px}.cardpack-result-card.result-chip>b{font-size:15px}.cardpack-results .result-actions>.text-link{width:100%;margin-top:5px}.cardpack-result-group h3>span{font-size:8px}.pack-opening{--pack-spread:57px;min-height:620px;padding:18px 12px}.pack-animation-top{font-size:7px;letter-spacing:.6px;gap:8px}.pack-animation-skip{font-size:10px;padding:8px 10px}.pack-animation-title{font-size:23px;margin-top:27px}.pack-animation-subtitle{font-size:10px;margin-bottom:17px}.pack-animation-bag{font-size:10px}.pack-animation-stage{height:340px}.pack-stage-halo{width:280px;height:280px;top:30px}.pack-foil{width:170px;height:250px;top:35px}.pack-foil-art{height:145px}.pack-foil-brand{font-size:8px}.pack-foil-body>strong{font-size:13px}.pack-flying-card{width:65px;height:97px;top:105px}.pack-card-back,.pack-card-front{border-width:2px;border-radius:5px}.pack-card-front{padding:2px}.pack-card-back>strong{font-size:14px;letter-spacing:1px}.pack-card-back>small{font-size:4px;letter-spacing:.5px}.pack-card-back>span{font-size:20px}.pack-card-back:before,.pack-card-back:after{width:75px;height:40px}.pack-card-front>b{font-size:7px;padding:2px 3px;top:1px;left:1px}.pack-flying-name{font-size:8px;line-height:1.8;top:calc(100% + 11px);left:-1px;right:-1px;-webkit-line-clamp:3}.pack-animation-status{font-size:11px}.pack-animation-dots{gap:5px}.pack-animation-dots>span{font-size:8px;padding:4px 6px}}
@media(max-width:350px){.pack-opening{--pack-spread:46px;padding-inline:10px}.pack-flying-card{width:55px;height:81px}.pack-animation-title{font-size:20px}.pack-animation-top>span{font-size:6px}.pack-animation-skip{font-size:9px;padding:7px 9px}.pack-flying-name{font-size:7px}.card-pack-options{gap:6px}.card-pack-options button{font-size:17px}.card-pack-process{gap:8px}.card-pack-process>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.pack-opening *{animation:none!important;transition:none!important}}

.pack-opening:not([data-phase="prepare"]):not([data-phase="cut"]) .pack-cut-line{opacity:0;transition:opacity .3s}.pack-card-front.is-random-card{background:linear-gradient(150deg,#fff,#f3eafa)}.pack-card-front.is-random-card>img{height:72%;margin-top:8%}.pack-random-label{position:absolute;left:2px;right:2px;bottom:9px;text-align:center;color:#674183;font-size:10px;font-weight:600;letter-spacing:1px}@media(max-width:680px){.pack-flying-name{display:none}.pack-random-label{font-size:6px;bottom:5px;letter-spacing:0}}