.pack-box-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0 12px}
.pack-box-choice{padding:8px 3px 12px;background:#17161e;border:1px solid #403747;border-radius:10px;color:#e7dceb;font:inherit;min-width:0;transition:background .2s,border-color .2s}
.pack-box-choice img{display:block;width:100%;height:auto;aspect-ratio:500/520;object-fit:contain;pointer-events:none}
.pack-box-choice b{font-size:12px;font-weight:600}.pack-box-choice[aria-pressed=true]{background:#292030;border-color:#cfafed;box-shadow:0 0 24px #af76dc1a}
.pack-box-choice:hover{border-color:#c8aadf}.pack-box-choice:focus-visible{outline:2px solid #ead8ff;outline-offset:3px}
#reveal-dialog.pack-opening{overflow:hidden;padding:0}
#reveal-dialog.pack-opening #reveal-content{position:absolute;inset:0;padding:0;min-height:0;display:block}
.pack-opening .reveal-header{position:absolute;top:0;left:0;right:0;z-index:30}
.pack-opening #fx-canvas,.pack-opening .reveal-ambient,.pack-opening #reveal-actions{display:none}
#pack-opening-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.pack-instruction{position:absolute;bottom:max(30px,6vh);left:20px;right:20px;text-align:center;z-index:5;color:#eae0d4;pointer-events:none;text-shadow:0 2px 12px #000;font-size:14px;letter-spacing:.04em}
.pack-keyboard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pack-keyboard:focus-within{clip-path:none;width:auto;height:auto;left:20px;right:20px;bottom:16px;padding:12px;background:#24202e;z-index:31}
.pack-keyboard input{width:min(240px,50vw);margin-left:12px}
#pack-stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#03040b;visibility:hidden;z-index:3}
.pack-opening[data-phase=rarity] #pack-stage-video,.pack-opening[data-phase=music] #pack-stage-video{visibility:visible}
#pack-color-bridge{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .28s linear}
.pack-opening .video-recovery{z-index:10}
.pack-opening [hidden]{display:none!important}
.pack-opening .cinema-status{position:absolute;left:24px;right:24px;bottom:24px;z-index:6;display:flex;justify-content:space-between;gap:20px}
#reveal-speed{min-width:38px;margin-right:18px;padding:5px 9px;border:1px solid #665474;border-radius:6px;font-variant-numeric:tabular-nums}
#reveal-speed[aria-pressed=true]{color:#ffe19a;border-color:#b5995d;background:#463c25}
#reveal-dialog[data-speed="2"] .prestige-card{animation-duration:.6s}
#pack-media-layer{position:fixed;inset:0;z-index:4;visibility:hidden;pointer-events:none;overflow:hidden;background:#03040b}
.pack-opening[data-phase=rarity] #pack-media-layer,.pack-opening[data-phase=music] #pack-media-layer,.card-backdrop #pack-media-layer{visibility:visible}
.pack-opening[data-phase=rarity] #reveal-content,.pack-opening[data-phase=music] #reveal-content{pointer-events:none}
.pack-opening .video-recovery,.pack-opening #pack-stage-video[controls]{pointer-events:auto}
#pack-media-layer #pack-stage-video{transition:filter .8s ease,transform 1.5s cubic-bezier(.16,1,.3,1),opacity 1.8s ease}
.pack-backdrop-shade{position:absolute;inset:0;z-index:3;opacity:0;background:radial-gradient(ellipse at 50% 43%,transparent 15%,#06071266 60%,#060712cc 100%),linear-gradient(#06071280,transparent 35%,#06071299);transition:opacity .85s ease}
.card-backdrop #pack-stage-video{visibility:visible;object-fit:cover;filter:blur(14px) saturate(.85) brightness(.66);transform:scale(1.09)}
.card-backdrop .pack-backdrop-shade{opacity:1}
.card-backdrop.backdrop-ended #pack-stage-video{opacity:.38}
.card-backdrop .reveal-ambient{z-index:4;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--fx) 14%,transparent),transparent 65%)}
.card-backdrop .reveal-header{position:relative;z-index:12}
.card-backdrop .prestige-stage{perspective:1200px}
#reveal-dialog.card-backdrop .prestige-card{animation:musicCardArrival 1.05s cubic-bezier(.16,1,.3,1) both;filter:drop-shadow(0 22px 28px #0009) drop-shadow(0 0 18px color-mix(in srgb,var(--fx) 32%,transparent))}
#reveal-dialog.card-backdrop[data-grade=SSR] .prestige-card{animation-duration:1.2s;filter:drop-shadow(0 22px 28px #0009) drop-shadow(0 0 28px #ffd66266)}
.card-backdrop .prestige-stage:before{content:'';position:absolute;inset:8% -30%;border:2px solid color-mix(in srgb,var(--fx) 70%,transparent);border-radius:50%;box-shadow:0 0 55px color-mix(in srgb,var(--fx) 65%,transparent),inset 0 0 45px color-mix(in srgb,var(--fx) 35%,transparent);animation:musicCardWave 1.2s ease-out both;pointer-events:none}
#reveal-dialog.card-backdrop .prestige-heading,#reveal-dialog.card-backdrop .prestige-caption{animation:musicCardLabels .8s .2s both;text-shadow:0 2px 20px #000c}
#reveal-dialog.card-backdrop[data-speed="2"] .prestige-card,.card-backdrop[data-speed="2"] .prestige-stage:before{animation-duration:.6s}
@keyframes musicCardArrival{0%{opacity:0;transform:translateY(56px) translateZ(-240px) rotateY(-22deg) scale(.72)}35%{opacity:1}68%{transform:translateY(-8px) translateZ(22px) rotateY(4deg) scale(1.035)}100%{opacity:1;transform:none}}
@keyframes musicCardWave{0%{opacity:0;transform:scale(.45)}22%{opacity:.85}100%{opacity:0;transform:scale(1.8)}}
@keyframes musicCardLabels{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#reveal-dialog.card-backdrop .prestige-card,.card-backdrop .prestige-heading,.card-backdrop .prestige-caption{animation:none}.card-backdrop .prestige-stage:before{display:none}#pack-media-layer #pack-stage-video,.pack-backdrop-shade{transition:opacity .25s}}
@media(max-width:500px){.pack-instruction{font-size:12px;bottom:7vh}.pack-opening .cinema-status{font-size:10px;left:16px;right:16px}.pack-box-choice b{font-size:11px}}

/* Rank sits above the card on every viewport, with room reserved for the face. */
#reveal-dialog.scene-finished:not(.batch-summary) #reveal-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:0 22px 14px;min-height:calc(100dvh - 152px);max-width:1000px}
#reveal-dialog:not(.batch-summary) .prestige-heading{text-align:center;justify-self:auto;width:100%;z-index:8}
#reveal-dialog:not(.batch-summary) .prestige-heading>span{font-size:8px;letter-spacing:.22em}
#reveal-dialog:not(.batch-summary) .rarity-word{font-size:clamp(36px,5.5vh,62px);line-height:1.04;letter-spacing:.08em;margin:6px 0 0;text-align:center}
#reveal-dialog:not(.batch-summary) .prestige-heading>p{display:none}
#reveal-dialog:not(.batch-summary) .prestige-card{width:clamp(180px,calc((100dvh - 310px)*.647),310px)}
#reveal-dialog:not(.batch-summary) .prestige-caption{text-align:center;z-index:8}
#reveal-dialog:not(.batch-summary) .prestige-caption h2{font-size:20px;margin:0 0 4px}
#reveal-dialog:not(.batch-summary) .prestige-caption p{font-size:11px;line-height:1.4;margin:0}
#reveal-dialog:not(.batch-summary) .prestige-caption>span{max-width:none;font-size:8px;margin-top:6px}
#reveal-dialog[data-grade=SR] .rarity-word{text-shadow:0 0 22px #b37dff99,0 0 55px #8b3af766}
#reveal-dialog[data-grade=SSR] .rarity-word{background:linear-gradient(#fffdeb 10%,#ffde7c 46%,#a96615 56%,#ffeeb4 83%);background-clip:text;color:transparent;filter:drop-shadow(0 0 12px #f8c55588)}
#reveal-dialog.high-rarity:not(.batch-summary) .rarity-word:before,#reveal-dialog.high-rarity:not(.batch-summary) .rarity-word:after{content:'✧';display:inline-block;font-size:.37em;margin:0 15px;vertical-align:middle;color:var(--fx);-webkit-text-fill-color:var(--fx)}
#reveal-dialog[data-grade=SSR]:not(.batch-summary) .rarity-word:before,#reveal-dialog[data-grade=SSR]:not(.batch-summary) .rarity-word:after{content:'✦'}
#reveal-dialog.high-rarity .prestige-stage:after{content:'';position:absolute;inset:-12% -45%;z-index:0;pointer-events:none;background:repeating-conic-gradient(from 12deg,transparent 0deg 14deg,color-mix(in srgb,var(--fx) 22%,transparent) 15deg 17deg,transparent 20deg 30deg);mask:radial-gradient(ellipse,transparent 23%,#0008 46%,transparent 70%);animation:rareCorona 10s linear infinite}
#reveal-dialog[data-grade=SSR].high-rarity .prestige-stage:after{inset:-20% -60%;background:repeating-conic-gradient(from 12deg,transparent 0deg 8deg,#ffde8644 10deg 12deg,transparent 14deg 24deg);animation-duration:14s}
#reveal-dialog.high-rarity .prestige-card{filter:drop-shadow(0 12px 35px #000b) drop-shadow(0 0 24px color-mix(in srgb,var(--fx) 48%,transparent))}
#reveal-dialog.standard-reveal{--fx:#b9c8dd}
#reveal-dialog.standard-reveal .prestige-card{animation:normalCardDeal .44s cubic-bezier(.16,1,.3,1) both;filter:drop-shadow(0 16px 28px #0008)}
#reveal-dialog.standard-reveal[data-speed="2"] .prestige-card{animation-duration:.24s}
#reveal-dialog.standard-reveal .rarity-word{font-size:25px;color:#d8e1ed;letter-spacing:.2em;text-shadow:none}
#reveal-dialog.standard-reveal .prestige-heading>span{color:#9caec1}
#reveal-dialog.standard-reveal .stage-orbit,#reveal-dialog.standard-reveal .prestige-stage:after{display:none}
#reveal-dialog.standard-reveal #reveal-content{cursor:pointer;outline:none;gap:13px}
#reveal-dialog.standard-reveal #reveal-content:focus-visible .prestige-card{outline:2px solid #d3dfef;outline-offset:8px;border-radius:14px}
#reveal-dialog.standard-reveal .r-card-hint{color:#c4cfdf;font-size:12px;letter-spacing:.025em;margin:0;display:flex;align-items:center;gap:16px}
.r-card-hint span{font-size:20px;line-height:1}
#reveal-dialog.standard-reveal .prestige-caption>span{display:none}
#reveal-dialog.standard-reveal .prestige-stage:before{content:'';position:absolute;inset:10% -25%;z-index:0;background:radial-gradient(ellipse,#c4d8ff16,transparent 70%);pointer-events:none}
@keyframes normalCardDeal{0%{opacity:0;transform:translateY(45px) rotateY(-72deg) rotateZ(-5deg) scale(.88)}40%{opacity:1}78%{transform:translateY(-4px) rotateY(4deg) rotateZ(1deg)}100%{opacity:1;transform:none}}
@keyframes rareCorona{to{transform:rotate(360deg)}}
@media(max-width:500px){#reveal-dialog:not(.batch-summary) .prestige-caption h2{font-size:18px}#reveal-dialog:not(.batch-summary) .prestige-caption p{font-size:10px}#reveal-dialog:not(.batch-summary) .prestige-card{width:clamp(175px,calc((100dvh - 300px)*.647),270px)}}
@media(prefers-reduced-motion:reduce){#reveal-dialog.standard-reveal .prestige-card,#reveal-dialog.high-rarity .prestige-stage:after{animation:none!important}}