.pack-scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; color: #faf4f5; background: radial-gradient(ellipse at 50% 47%,#782d3a55,transparent 65%),#100d13; }
.pack-scene-heading { position: absolute; top: max(35px,8%); left: 20px; right: 20px; text-align: center; z-index: 4; }
.pack-scene-heading small { color: #b77d89; font: 800 10px var(--font-body); letter-spacing: .16em; }
.pack-scene-heading h2 { margin: 8px 0; font: 700 24px var(--font-body); letter-spacing: -.03em; }
.pack-scene-orbit { position: absolute; width: min(80vw,410px); aspect-ratio: 1; border: 1px solid #c8768a22; border-radius: 50%; box-shadow: 0 0 0 35px #c8768a05,0 0 0 70px #c8768a03; }
.pack-seal { position: relative; display: block; width: min(340px,76vw,48dvh); height: min(540px,121vw,76dvh); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 2; transform: rotate(-5deg); filter: drop-shadow(0 12px 22px #0008); }
.pack-seal > :is(img,svg),.pack-seal-tear { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pack-seal-art { clip-path: inset(27% 0 0); }
.pack-seal-vector { padding: 16% 10%; box-sizing: border-box; fill: #2b1620; stroke: #be7184; stroke-width: 1.5; }
.pack-seal-vector .pack-rune { fill: none; stroke: #f3ced5; stroke-width: 7; }
.pack-seal-vector text { fill: #e5a9b6; stroke: none; font: 800 22px sans-serif; }
.pack-seal.has-art .pack-seal-vector { visibility: hidden; }
#pack-request-stage { position: fixed; inset: 0; z-index: 4000; background: #100d13; }
.pack-request-fold { position: absolute; top: max(16px,env(safe-area-inset-top)); right: 16px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff20; border-radius: 50%; color: #ece3e8; background: #ffffff0a; }
.pack-request-fold svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pack-request-status { position: absolute; top: 55%; left: 20px; right: 20px; margin: 0; color: #e0cdd5; font: 500 14px var(--font-body); text-align: center; }
.pack-request-waiting .pack-scene-heading h2 { opacity: .65; }
.pack-request-waiting .pack-seal { pointer-events: none; }
.pack-seal-tear { clip-path: inset(0 0 73%); z-index: 3; }
.pack-seal-tear img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pack-seal-light { position: absolute; top: 27%; left: 10%; right: 10%; height: 2px; background: #ffe5eb; box-shadow: 0 0 15px 3px #f4b1c3; opacity: 0; }
.pack-scene-burst { position: absolute; top: 50%; left: 50%; width: min(65vw,300px); height: min(65vw,300px); transform: translate(-50%,-50%) scale(.25); fill: #ffdbe5; opacity: 0; z-index: 1; }
.pack-scene-hint { position: absolute; bottom: max(28px,8%); left: 16px; right: 16px; margin: 0; color: #b39da7; font: 500 12px var(--font-body); text-align: center; }
.pack-opening-active .pack-seal { animation: pack-unseal .76s cubic-bezier(.16,.75,.3,1) both; }
.pack-opening-active .pack-seal-tear { animation: pack-tear .65s .08s ease-out both; }
.pack-opening-active .pack-seal-light { animation: pack-light .65s .08s both; }
.pack-opening-active .pack-scene-burst { animation: pack-burst .65s .16s ease-out both; }
.pack-opening-active .pack-scene-hint { animation: pack-hint .3s .3s both; }
#card-modal .cr-pack-opening { pointer-events: auto; background: #100d13; }
#card-modal .cr-pack-opening.is-finishing { opacity: 0; transition: opacity .14s ease-out; pointer-events: none; }
#card-modal.new-card-mode,#card-modal.new-card-mode .modal-sheet.reveal-sheet { background: #100d13 !important; }
#card-modal.new-card-mode .modal-sheet.reveal-sheet::after { background: radial-gradient(ellipse at 50% 38%,var(--reveal-rank-glow,#b55c7633),transparent 65%),#100d13; }
#card-modal.new-card-mode.card-in-flight .cr-card { animation: pack-card-arrival .3s cubic-bezier(.2,.75,.2,1) both; }
#card-modal.new-card-mode .cr-card { background: radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--rank) 20%,#18141f),#18141f); }
#pack-reveal #pr-seal { padding: 0; }
#pack-reveal .pack-scene { height: 100dvh; }
#pack-reveal .pr-card-frame { background: #1b1721; }
#pack-reveal .pr-skip { z-index: 20; min-height: 44px; border-radius: 999px; }
#pack-reveal .pr-top { z-index: 5; }
#pack-reveal .pack-scene-heading { top: 11%; }
#pack-reveal .pr-done { min-height: 48px; border: 0; background: #f5f1f5; color: #19151d; font-weight: 700; border-radius: 999px; }
.pack-seal:focus-visible { outline: 2px solid #efacbc; outline-offset: -30px; border-radius: 20px; }
@keyframes pack-unseal { 0% { transform: rotate(-5deg) scale(.9); opacity: 1; } 24% { transform: rotate(2deg) scale(1.04); } 58% { transform: rotate(-2deg) scale(1); opacity: 1; } 100% { transform: translateY(30px) rotate(3deg) scale(.91); opacity: 0; } }
@keyframes pack-tear { 0%,20% { transform: translate(0,0); } 70%,100% { transform: translate(45px,-65px) rotate(18deg); opacity: 0; } }
@keyframes pack-light { 0% { opacity: 0; transform: scaleX(.1); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.3); } }
@keyframes pack-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(0); } 38% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8) rotate(20deg); } }
@keyframes pack-hint { to { opacity: 0; } }
@keyframes pack-card-arrival { from { opacity: .4; transform: translateY(35px) scale(.9); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { .pack-opening-active :is(.pack-seal,.pack-seal-tear,.pack-seal-light,.pack-scene-burst,.pack-scene-hint) { animation: none; } #card-modal.new-card-mode.card-in-flight .cr-card { animation: none; } }