.opening-stage { position: fixed; inset: 0; z-index: var(--z-stage); pointer-events: none; }
.opening-stage[hidden] { display: none; }
.opening-pack { position: absolute; top: 50%; left: 50%; width: var(--pack-width); height: var(--pack-height); transform: translate(-50%,-50%); border-radius: var(--r-pack); pointer-events: auto; user-select: none; touch-action: none; }
.opening-pack:focus-visible { outline: 1px solid var(--ui-color-36); outline-offset: var(--s-2); box-shadow: 0 0 0 3px var(--glass); }
.opening-glass, .opening-foil { opacity: 0; }
.opening-glass { transition: opacity var(--t-fast) var(--ease-out); }
.opening-glass .pack-ground-shadow { opacity: .4; }
.opening-glass .pack-reflection { display: none; }
.opening-glass .pack-wrapper { opacity: 0; }
.opening-glass .pack-fluid { opacity: 1; }
.opening-glass .pack-body::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid var(--highlight); box-shadow: inset 0 0 12px var(--hairline-strong),0 0 20px var(--glass-strong); opacity: var(--charge-leak,0); pointer-events: none; }
.opening-foil { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; box-shadow: inset 0 1px 0 var(--hairline-strong),var(--shadow-2); }
.opening-foil .pack-wrapper { opacity: 1; border: 1px solid var(--hairline-strong); border-radius: inherit; }
.opening-foil .pack-shine { background: linear-gradient(135deg,var(--hairline-strong),transparent 50%); opacity: .5; }
.opening-silhouette { position: absolute; inset: var(--s-5) var(--s-4); border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: inset 0 1px 3px var(--ui-color-4); background: var(--ui-color-76); }
.opening-foil .pack-brand { font-size: 23px; color: var(--text-dim); }
.opening-half { transform-origin: center; }
.opening-seams, .opening-particles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.opening-cut-seam, .opening-cut-glint, .opening-light-gap { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.opening-cut-seam { stroke: var(--keyline); }
.opening-cut-guide, .opening-cut-track { display: none; fill: none; stroke-linecap: round; }
[data-phase="cutting"] .opening-cut-guide, [data-phase="cutting"] .opening-cut-track { display: block; }
.opening-cut-track { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 5; }
.opening-cut-guide { stroke: var(--highlight); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--glass-strong)); }
.opening-cut-glint { stroke: var(--highlight); }
.opening-light-gap { stroke: var(--highlight); opacity: 0; filter: drop-shadow(0 0 4px var(--hairline-strong)); }
.opening-particle { position: absolute; top: 0; left: 0; background: var(--highlight); pointer-events: none; }
.opening-hint { position: absolute; top: 50%; right: calc(100% + var(--s-5)); pointer-events: none; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.opening-keycap { display: block; padding: var(--s-1) var(--s-2); border-radius: var(--s-1); border: 1px solid var(--hairline); background: var(--glass); color: var(--text-dim); box-shadow: 0 2px 0 var(--surface-2); font: 10px var(--font-mono); transition: transform var(--t-fast) var(--ease-out); }
.is-held .opening-keycap { transform: translateY(2px); box-shadow: inset 0 1px 3px var(--ui-color-77); }
.opening-cut-hint { display: none; }
[data-phase="charging"] .opening-hint, [data-phase="draining"] .opening-hint { opacity: 1; }
[data-phase="dissolving"] .opening-hint, [data-phase="tearing"] .opening-hint { opacity: 0; }
[data-phase="cutting"] .opening-hint { top: calc(var(--s-5) * -1); left: var(--s-3); right: var(--s-3); text-align: center; }
[data-phase="cutting"] .opening-keycap { display: none; }
[data-phase="cutting"] .opening-cut-hint { display: block; color: var(--text-dim); font: 500 11px/1.5 var(--font-ui); letter-spacing: .02em; }
.opening-enter-hint { position: absolute; top: calc(100% + var(--s-5)); width: 100%; text-align: center; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); color: var(--text-dim); font: 11px/1.5 var(--font-mono); pointer-events: none; }
.opening-error { position: fixed; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); text-align: center; z-index: var(--z-toast); pointer-events: none; color: var(--text-dim); font: 12px var(--font-ui); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.menu-shell { transition: opacity var(--t-ui) var(--ease-out); }
.is-opening .menu-shell > * { opacity: 0; pointer-events: none; }
.is-collecting #inventory-affordance { opacity: 1; }
.is-opening .cursor-glow.is-present:not(.is-blade) { opacity: var(--opening-chrome-opacity) !important; }
.cursor-glow__blade { position: absolute; top: 50%; left: 50%; width: var(--blade-length); height: var(--blade-width); opacity: 0; background: linear-gradient(90deg,transparent,var(--hairline-strong) 20%,var(--highlight) 65%,transparent); border-radius: var(--r-chip); box-shadow: 0 0 8px var(--hairline-strong); }
.is-blade .cursor-glow__blade { opacity: 1; }
.is-blade .cursor-glow__light, .is-blade .cursor-glow__ring { opacity: 0; }
.is-opening .cursor-glow.is-blade.is-present { opacity: 1 !important; }
.cursor-glow.is-reveal-hidden, .is-opening .cursor-glow.is-reveal-hidden:not(.is-blade) { opacity: 0 !important; transition: none; }
[data-phase="cutting"] .opening-pack.has-blade { cursor: none; }
[data-phase="tearing"] .opening-pack:focus-visible { outline: none; box-shadow: none; }
[data-phase="tearing"] .opening-cut-seam { opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reduced-motion .opening-keycap { transform: none; transition-property: opacity; }
.reduced-motion .opening-particle { display: none; }
.reduced-motion .opening-keycap { transform: none; transition-property: opacity; }
.reduced-motion .opening-particle { display: none; }
@media (max-height: 540px) { .opening-pack { top: 45%; } }

.opening-reveal { position: absolute; left: 50%; top: 50%; width: var(--reveal-width); height: var(--reveal-height); margin-left: calc(var(--reveal-width) / -2); margin-top: calc(var(--reveal-height) / -2); pointer-events: none; }
.opening-reveal[hidden], .opening-keep[hidden] { display: none; }
.opening-card-mount { position: absolute; inset: 0; pointer-events: auto; }
.opening-bloom { position: absolute; inset: -12%; border-radius: var(--ui-radius-1); background: radial-gradient(ellipse,var(--reveal-accent,white),transparent 65%); opacity: 0; transform: scale(var(--bloom-scale)); filter: blur(30px); pointer-events: none; mix-blend-mode: screen; }
.opening-dust { position: absolute; inset: 0; pointer-events: none; }
.opening-card-note { position: absolute; top: calc(100% + var(--s-3)); width: 100%; text-align: center; font: 10px var(--font-mono); color: var(--text-dim); }
.opening-keep { position: absolute; top: calc(100% + var(--s-7)); left: 50%; transform: translateX(-50%); padding: var(--s-2) var(--s-6); border: 1px solid var(--hairline); border-radius: var(--r-button); color: var(--text); font: 12px var(--font-ui); pointer-events: auto; }
.opening-keep:hover { border-color: var(--hairline-strong); background: var(--glass-strong); }
.opening-keep-key { margin-left: var(--s-3); padding: 2px var(--s-1); border: 1px solid var(--hairline-strong); border-radius: var(--s-1); color: var(--text-dim); font: 9px/1 var(--font-mono); }
.opening-keep:focus-visible { outline: 1px solid var(--highlight); outline-offset: var(--s-1); }
.collection-flight { position: fixed; left: 0; top: 0; transform-origin: center; pointer-events: none; overflow: hidden; border-radius: var(--thumbnail-radius); }
.collection-toast { position: fixed; left: 50%; bottom: calc(var(--s-6) + var(--s-7)); transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-button); pointer-events: none; max-width: calc(calc(var(--layout-width,100vw) * 1) - var(--s-6) * 2); }
.collection-toast[hidden] { display: flex; visibility: hidden; }
.collection-toast-thumb { flex-shrink: 0; aspect-ratio: 5 / 7; overflow: hidden; border-radius: var(--thumbnail-radius); }
.collection-toast .collectible-card, .collection-flight .collectible-card { border-radius: var(--thumbnail-radius); }
.collection-toast-text { min-width: 0; }
.collection-toast-name { font: 12px var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.collection-toast-detail { font: 10px var(--font-mono); color: var(--text-dim); margin-top: var(--s-1); }
[data-phase="rising"] .opening-pack, [data-phase="preFlip"] .opening-pack, [data-phase="flipping"] .opening-pack, [data-phase="settling"] .opening-pack, [data-phase="revealed"] .opening-pack, [data-phase="collecting"] .opening-pack { pointer-events: none; }
.is-collecting .opening-card-note { opacity: 0 !important; }
.reduced-motion .card__reveal-shine { inset: 0; width: 100%; height: 100%; background: radial-gradient(ellipse,var(--ui-color-13),transparent 70%); }
/* The charge shell and cut fragments retain the sealed foil design. */
.opening-pack { border-radius: 0; }
.opening-glass .pack-wrapper { opacity: 1; }
.opening-glass .pack-fluid { opacity: .65; }
.opening-foil { border-radius: 0; clip-path: var(--wrapper-shape); }
.opening-foil .pack-wrapper { border: 0; border-radius: 0; }
.opening-foil .pack-shine { background: radial-gradient(ellipse at var(--shine-x,40%) var(--shine-y,35%),var(--ui-color-78),transparent 56%); }
.opening-half { clip-path: none; }
.opening-half .pack-wrapper, .opening-half .pack-print { clip-path: var(--wrapper-shape); }