/* Pack and real card faces occupy the scene; controls appear only after opening. */
.opening-dialog{--accent:#b4d5df;--accent-rgb:180,213,223;--ink:#e9f4ff;--muted:#8fa9be;padding:0;isolation:isolate;background:radial-gradient(ellipse at 50% 43%,#fafcfd 0,#e4edf0 68%,#cbdce2 100%);color:var(--ink);overscroll-behavior:contain}
.opening-dialog::backdrop{background:#e4edf0}
.opening-dialog #opening-content{padding:0;min-height:100dvh;height:100dvh;justify-content:center;overflow:clip;gap:0}
.opening-dialog:not([data-phase=summary]) .opening-bottom,.opening-dialog:not([data-phase=summary])>.close-button,.opening-dialog .opening-skip{display:none!important}
.opening-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;perspective:1200px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pack-presentation{position:relative;display:grid;place-items:center;width:100%;height:100%;perspective:1200px;--pack-ratio:.625;--pack-width:min(86vw,560px,calc((100dvh - 80px)*var(--pack-ratio)));--deck-width:min(94vw,650px,calc((100dvh - 48px)*.7168))}
.tear-pack{--seal-y:13%;position:relative;width:var(--pack-width);aspect-ratio:var(--pack-ratio);transform:none;animation:none;transition:none;filter:drop-shadow(0 25px 22px #344b5630);z-index:3;touch-action:none;cursor:ew-resize}
.tear-pack.gpu-pack{--seal-y:18.5%}
.tear-pack .pack-body,.tear-pack.gpu-pack .pack-body{clip-path:var(--body-clip,inset(var(--seal-y) 0 0));position:absolute;inset:0;z-index:2}
.tear-pack .pack-lid,.tear-pack.gpu-pack .pack-lid{clip-path:var(--lid-clip,inset(0 0 calc(100% - var(--seal-y))));position:absolute;inset:0;transform-origin:92% var(--seal-y);transform:none;transition:none;z-index:4}
.tear-pack .pack-mouth{position:absolute;left:8%;right:8%;top:var(--seal-y);height:5px;background:#1a252a;z-index:1;clip-path:inset(0 var(--cut-end,100%) 0 var(--cut-start,0%));box-shadow:0 2px 2px #fff7}
.cut-mark{position:absolute;left:0;top:calc(var(--seal-y) - 3px);width:100%;height:6px;z-index:5;overflow:visible;pointer-events:none}
.cut-trace{fill:none;stroke:#182a30;stroke-width:1.1;stroke-linecap:round}.cut-shine{fill:none;stroke:#f4fcff;stroke-width:.32;transform:translateY(-.42px);stroke-linecap:round}
.tear-pack.unsealed .pack-lid{transform:translate(13%,-32%) rotate(-12deg);opacity:0;transition:transform .48s cubic-bezier(.2,.7,.3,1),opacity .5s}
.tear-pack.unsealed .cut-mark{opacity:0;transition:opacity .2s}
.opening-dialog[data-phase=extract] .tear-pack{transform:translateY(100dvh) rotate(4deg);opacity:0;transition:transform .72s .42s cubic-bezier(.5,0,.8,.3),opacity .35s .82s}
.extraction-stack{position:absolute;width:calc(var(--pack-width)*.84);aspect-ratio:367/512;z-index:2;transform:translateY(14%) scale(.94);clip-path:inset(100% -20% -30%);pointer-events:none}
.opening-dialog[data-phase=extract] .extraction-stack{width:var(--deck-width);transform:translateY(0) scale(1);clip-path:inset(-20%);animation:deck-extraction 1.2s cubic-bezier(.25,.7,.25,1) both;transition:width .35s .85s cubic-bezier(.25,.7,.25,1),clip-path .55s}
.reveal-stage{--deck-width:min(94vw,650px,calc((100dvh - 48px)*.7168));perspective:1200px}
.reveal-stack{position:relative;width:var(--deck-width);min-width:0;aspect-ratio:367/512;touch-action:none;perspective:none;cursor:grab;transform-style:preserve-3d;filter:none;outline:none;z-index:2}
.reveal-stack::before,.reveal-stack::after{display:none!important}
.card-deck{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--pitch,3deg)) rotateY(var(--yaw,-6deg));transition:transform .38s cubic-bezier(.2,.75,.3,1);--thickness:5px}
.card-deck::before{content:"";position:absolute;inset:5%;border-radius:6%;background:#243d4b26;filter:blur(15px);transform:translateZ(-35px) translateY(24px);pointer-events:none}
.card-deck.held{transition:none}
.stack-leaf{--edge:#cad0d1;position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--depth)*var(--thickness)*-1)) translate(var(--swipe-x,0px),var(--swipe-y,0px)) rotateZ(var(--swipe-z,0deg));transition:transform .3s cubic-bezier(.2,.75,.3,1);pointer-events:none}
.stack-leaf.held{transition:none}
.stack-leaf>.card,.reveal-stack .stack-leaf>.card{position:absolute;inset:0;width:100%;height:100%;animation:none;transition:none;transform:translateZ(2.5px)!important;backface-visibility:hidden;border:0;border-radius:4.5%/3.2%;box-shadow:none;cursor:inherit;pointer-events:auto;overflow:hidden}
.stack-leaf:last-child>.leaf-back{box-shadow:0 24px 32px #293d4840}
.leaf-back{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:4.5%/3.2%;backface-visibility:hidden;transform:rotateY(180deg) translateZ(2.5px);pointer-events:none}
.leaf-edge{position:absolute;display:block;backface-visibility:hidden;background-color:#d6d7d4;background-image:linear-gradient(90deg,var(--edge) 0 16%,#f3f1e9 20% 66%,#788387 81%,var(--edge) 94%);pointer-events:none}
.edge-left,.edge-right{width:5px;height:94%;top:3%;background-image:linear-gradient(90deg,transparent,#f8f6edbd 24% 68%,#21303c66 85%,transparent),var(--frame-art);background-size:100% 100%,var(--deck-width) 100%;background-position:center,right center}
.edge-left{left:-2.5px;transform:rotateY(-90deg);background-position:center,left center}
.edge-right{right:-2.5px;transform:rotateY(90deg)}
.edge-top,.edge-bottom{height:5px;left:4.5%;width:91%;background-image:linear-gradient(0deg,var(--edge) 0 18%,#f6f3e9 25% 66%,#77858b 84%,var(--edge) 95%)}
.edge-top{top:-2.5px;transform:rotateX(90deg)}.edge-bottom{bottom:-2.5px;transform:rotateX(-90deg)}
.stack-leaf[data-rarity=RR]{--edge:#d7c4a3}.stack-leaf:is([data-rarity=AR],[data-rarity=SR],[data-rarity=SAR]){--edge:#ccc0e8}.stack-leaf:is([data-rarity=S],[data-rarity=SSR]){--edge:#b6d6d3}.stack-leaf[data-rarity=UR]{--edge:#e0b148}
.stack-leaf.departing{transform:translateZ(55px) translateX(var(--depart-x)) rotateZ(var(--depart-z));transition:transform .32s ease-in;pointer-events:none}
/* Detail keeps the existing full card image and market quotation. */
.opening-dialog[data-phase=summary]{background:radial-gradient(ellipse at 50% 40%,#182c38,#08131d 75%);overflow:auto}
.opening-dialog[data-phase=summary] #opening-content{height:auto;overflow:visible;padding:80px 24px 20px;min-height:calc(100dvh - 90px)}
.opening-dialog .close-button{position:fixed;z-index:12;color:#b9d2e3;background:#132332b0;border:1px solid #48617880;width:38px;height:38px;top:20px;right:22px}
.opening-dialog .primary{background:#b7e9f5;color:#102c3a;border-radius:12px;min-width:180px;padding:14px 28px;font-size:14px}
.opening-dialog .secondary{border:1px solid #5b7c9480;background:#1b3243a0;border-radius:10px;color:#cfecf7;min-width:160px;padding:12px 25px;font-size:13px}
.opening-header{display:flex;justify-content:space-between;align-items:center;width:min(980px,100%);color:#89a8bb;font-size:11px}.opening-header b{font-weight:500}
.opening-dialog[data-phase=summary] #opening-content{justify-content:flex-start;min-height:calc(100dvh - 110px);padding-top:85px}.opening-dialog[data-phase=summary] .opening-header{width:min(980px,100%);margin-bottom:25px}.pull-summary-head{display:flex;align-items:center;justify-content:space-between;gap:30px;width:min(980px,100%);margin:0 auto 20px}.pull-summary-head h2{font-size:30px;font-weight:500;letter-spacing:2px;margin:7px 0}.pull-summary-head small{font-size:10px;letter-spacing:1px;color:#7e9bb1}.pull-total{text-align:right}.pull-total small{display:block}.pull-total b{font-size:34px;font-weight:500;letter-spacing:1px;color:#e5cc94;display:block;margin-top:6px;font-variant-numeric:tabular-nums}.pull-best{display:flex;align-items:center;gap:15px;width:min(980px,100%);padding:12px 16px;margin-bottom:25px;border:1px solid rgba(var(--accent-rgb),.23);background:rgba(var(--accent-rgb),.035);border-radius:9px;font-size:12px;color:#dce8ef}.pull-best small{color:#a88e60;font-size:9px;white-space:nowrap}.pull-best b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pull-best>span{margin-left:auto;color:#efcf90;white-space:nowrap}.opening-dialog .summary-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 18px;width:min(980px,100%);padding-bottom:25px;max-width:none}.opening-dialog .summary-card{width:100%;min-width:0;text-align:left;animation:summary-arrive .45s both;animation-delay:calc(var(--i)*.035s);background:none;color:#d0e4f0;border:0;border-radius:0}.summary-card .card{box-shadow:0 5px 15px #0007}.summary-card p{font-size:11px;margin:10px 0 5px;color:#b4c7d6}.summary-card>.rarity-mark{font-size:11px;color:#7596ae;letter-spacing:1px;white-space:nowrap}.summary-card.summary-rare>.rarity-mark{color:#dfbe83}.summary-value{display:block;font-size:16px;font-weight:500;color:#e6d2ac;margin-top:5px;letter-spacing:.5px;font-variant-numeric:tabular-nums}.summary-card .new-badge{z-index:8;background:#9ce8cc;color:#102a2b;font-size:8px;border-radius:3px;left:6px;top:6px;right:auto;padding:4px 6px}.opening-dialog .summary-actions{gap:12px}.opening-dialog[data-phase=summary] .opening-bottom{position:sticky;bottom:0;backdrop-filter:blur(12px);background:#08131de8;border-top:1px solid #28425270;padding:18px 24px;min-height:0}.opening-dialog #particles{position:fixed;height:100dvh;width:100vw;inset:0}
.card-market-price{font-variant-numeric:tabular-nums}.card-caption .card-market-price{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:9px;color:#e2c78c;font-size:13px;font-weight:500}.market-change{font-size:8px;white-space:nowrap;font-weight:400;letter-spacing:0}.market-change.up{color:#76c5a0}.market-change.down{color:#d68c83}.market-change.flat{color:#7896a2}.detail-market{padding:14px 0 7px}.detail-market>small{display:block;color:#788b99;font-size:10px;margin-bottom:7px}.detail-market .card-market-price{display:flex;align-items:center;gap:12px;font-size:27px;color:#755a2e;font-variant-numeric:tabular-nums}.detail-market .market-change{font-size:11px}.detail-market .market-change.up{color:#268968}.detail-market .market-change.down{color:#bd6252}

@keyframes deck-extraction{0%{transform:translateY(14%)}48%,70%{transform:translateY(-28%)}100%{transform:translateY(0)}}
@keyframes summary-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.opening-dialog .summary-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 11px}.pull-summary-head{gap:10px;margin-bottom:15px}.pull-summary-head h2{font-size:22px}.pull-summary-head small{font-size:8px;letter-spacing:.4px}.pull-total b{font-size:26px}.pull-best{padding:10px 11px;gap:10px;font-size:10px;margin-bottom:20px}.pull-best small{font-size:8px}.summary-card p{font-size:9px}.summary-card>.rarity-mark{font-size:9px;letter-spacing:0}.summary-value{font-size:13px}.opening-dialog[data-phase=summary] #opening-content{padding-top:74px}.opening-dialog[data-phase=summary] .opening-header{margin-bottom:20px}.card-caption .card-market-price{font-size:11px;flex-wrap:wrap;gap:3px}.card-caption .market-change{font-size:7px}.detail-market .card-market-price{justify-content:center}.opening-dialog .summary-actions button{min-width:130px;padding:12px 20px}}
@media(prefers-reduced-motion:reduce){.opening-dialog *{animation:none!important;transition:none!important}}

/* The wrapper halves and the visible incision share the measured finger path. */
.tear-pack .pack-mouth{display:none}.cut-mark{inset:0;width:100%;height:100%;overflow:hidden}
.cut-trace{stroke:#15252f;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.cut-shine{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;transform:translateY(-.25%);stroke-linejoin:round}
.opening-dialog #particles{display:block;pointer-events:none;z-index:5}.opening-dialog[data-phase=summary] #particles{display:none}
.reveal-aura,.reveal-ring{position:absolute;pointer-events:none;width:min(110vw,900px);aspect-ratio:1;border-radius:50%;opacity:0}
.reveal-aura{background:radial-gradient(ellipse,#b0eafa88,transparent 65%);animation:reveal-glow .85s ease-out both}
.reveal-ring{border:2px solid #fff9;box-shadow:0 0 30px #a0e9ff55,inset 0 0 25px #c6f4ff55;animation:reveal-ring .8s ease-out both}
.opening-dialog:is([data-rarity=AR],[data-rarity=SR],[data-rarity=SAR],[data-rarity=SSR],[data-rarity=IM]) .reveal-aura{background:conic-gradient(from 45deg,#d0adff77,#a5eeff88,#ffb3df66,#a4ffe077,#d0adff77);filter:blur(35px);animation:reveal-glow 1.25s ease-out both}
.opening-dialog[data-rarity=UR] .reveal-aura{background:radial-gradient(ellipse,#ffdc6bd9,#eab85c55 45%,transparent 70%);animation:reveal-glow 1.6s ease-out both}
.opening-dialog[data-rarity=UR] .reveal-ring{border-color:#fff1a9;box-shadow:0 0 50px #ffd76b88;animation-duration:1.25s}
@keyframes reveal-glow{0%{opacity:0;transform:scale(.55) rotate(-15deg)}25%{opacity:1}100%{opacity:0;transform:scale(1.2) rotate(15deg)}}
@keyframes reveal-ring{0%{opacity:.8;transform:scale(.45)}100%{opacity:0;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.reveal-aura,.reveal-ring,.opening-dialog #particles{display:none}}

.cut-tip{fill:#fff8df;filter:drop-shadow(0 0 3px #fff);display:none}.tear-pack[data-cutting=true] .cut-tip{display:block}
.opening-dialog[data-phase=reveal]:is([data-rarity=SR],[data-rarity=SAR],[data-rarity=SSR],[data-rarity=IM]){background:radial-gradient(ellipse at 50% 43%,#fafaff,#e8e3f2 65%,#cbd9eb)}
.opening-dialog[data-phase=reveal][data-rarity=UR]{background:radial-gradient(ellipse at 50% 43%,#fffdf1,#f1e6c9 65%,#d7d4c9)}
.opening-dialog[data-rarity=UR] .reveal-stage::before{content:'';position:absolute;inset:-60%;pointer-events:none;background:repeating-conic-gradient(from 12deg,transparent 0deg 18deg,#ffe4932b 20deg 22deg,transparent 25deg 40deg);animation:crown-rays 1.3s ease-out both}
@keyframes crown-rays{0%{opacity:0;transform:rotate(-9deg) scale(.7)}20%{opacity:1}100%{opacity:0;transform:rotate(9deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.opening-dialog[data-rarity=UR] .reveal-stage::before{display:none}}