.product-opening {
  position: absolute;
  inset: 0;
  z-index: 228;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: var(--paper);
}
.product-opening[hidden] { display: none; }
.product-opening__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(169, 120, 255, .2), transparent 35%),
    linear-gradient(120deg, rgba(240, 68, 59, .18), transparent 46%),
    rgba(3, 4, 7, .94);
  backdrop-filter: blur(8px) saturate(.7);
}
.product-opening__scene {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: max(28px, env(safe-area-inset-top)) clamp(22px, 5cqw, 54px) max(30px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(116deg, transparent 0 17%, rgba(240, 68, 59, .14) 17.2% 42%, transparent 42.2%),
    radial-gradient(circle, rgba(242, 234, 220, .075) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    radial-gradient(circle at 50% 51%, rgba(169, 120, 255, .13), transparent 42%),
    #05070b;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
}
.product-opening__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background:
    linear-gradient(164deg, transparent 0 56%, rgba(67, 215, 211, .08) 56.2% 64%, transparent 64.2%),
    linear-gradient(14deg, transparent 0 68%, rgba(240, 68, 59, .1) 68.2% 77%, transparent 77.2%);
}
.product-opening__head {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}
.product-opening__head span {
  color: var(--electric);
  font: italic 900 9px/1 var(--font-condensed);
  letter-spacing: .16em;
}
.product-opening__head strong {
  max-width: 90%;
  font: italic 900 clamp(30px, 5cqw, 46px)/.92 var(--font-condensed);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .52);
}
.product-opening__canvas {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 900px;
}
.product-opening__aura,
.product-opening__flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(64cqw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.product-opening__aura {
  background:
    radial-gradient(circle, rgba(242, 234, 220, .42) 0 4%, rgba(169, 120, 255, .28) 20%, transparent 66%),
    conic-gradient(from 20deg, transparent, rgba(67, 215, 211, .45), transparent 22%, rgba(240, 68, 59, .5), transparent 48%, rgba(244, 201, 63, .46), transparent 74%);
  filter: blur(2px);
}
.product-opening__flash {
  z-index: 7;
  background: radial-gradient(circle, #fff 0 8%, rgba(244, 201, 63, .95) 15%, rgba(67, 215, 211, .64) 30%, transparent 67%);
  mix-blend-mode: screen;
}
.product-opening__product {
  position: relative;
  z-index: 3;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 12px rgba(0, 0, 0, .7));
}
.product-opening__product--pack {
  width: clamp(210px, 32cqw, 290px);
  aspect-ratio: 1 / 2;
}
.product-opening__product--box {
  width: clamp(340px, 60cqw, 520px);
  aspect-ratio: 1.1;
}
.product-opening__slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
}
.product-opening__slice--pack-top { clip-path: inset(0 0 47% 0); }
.product-opening__slice--pack-bottom { clip-path: inset(47% 0 0 0); }
.product-opening__slice--box-lid { clip-path: inset(0 0 64% 0); transform-origin: 50% 32%; }
.product-opening__slice--box-body { clip-path: inset(26% 0 0 0); }
.product-opening__cards,
.product-opening__packets {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 54%;
  width: 1px;
  height: 1px;
}
.product-opening__card {
  position: absolute;
  left: -50px;
  top: -76px;
  width: 100px;
  height: 150px;
  border: 3px solid var(--paper);
  background:
    linear-gradient(135deg, transparent 35%, rgba(67, 215, 211, .48) 36% 40%, transparent 41%),
    radial-gradient(circle at 50% 50%, var(--signal) 0 7%, transparent 8%),
    repeating-radial-gradient(circle, rgba(242, 234, 220, .12) 0 1px, transparent 1px 7px),
    #11141a;
  box-shadow: 5px 6px 0 var(--signal);
  clip-path: polygon(4% 0, 100% 2%, 96% 100%, 0 95%);
}
.product-opening__packet {
  position: absolute;
  left: -48px;
  top: -105px;
  width: 96px;
  height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 9px 6px rgba(0, 0, 0, .72));
}
.product-opening__actions {
  position: relative;
  z-index: 10;
  width: min(100%, 520px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.product-opening__actions.has-again {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
.product-opening__trigger,
.product-opening__again {
  position: relative;
  width: 100%;
  min-height: 58px;
  margin: 0;
  clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 94%);
  font: 900 25px/1 var(--font-ui);
  letter-spacing: -.025em;
  cursor: pointer;
}
.product-opening__trigger {
  color: var(--ink);
  border: 3px solid var(--paper);
  background: var(--punch);
  box-shadow: 6px 6px 0 var(--signal);
}
.product-opening__again {
  color: var(--paper);
  border: 3px solid var(--paper);
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--electric);
  font-size: clamp(16px, 3cqw, 21px);
}
.product-opening[data-kind='box'] .product-opening__trigger {
  color: var(--paper);
  background: var(--shop-violet);
  box-shadow: 6px 6px 0 var(--electric);
}
.product-opening__trigger:focus-visible,
.product-opening__again:focus-visible { outline: 3px solid var(--electric); outline-offset: 4px; }

.product-opening__scene.is-idle .product-opening__product {
  animation: productOpeningIdle 4.8s ease-in-out infinite;
}
.product-opening__scene.is-idle .product-opening__aura {
  opacity: .26;
  transform: translate(-50%, -50%) scale(.82);
  animation: productOpeningAura 4.8s ease-in-out infinite;
}
.product-opening__scene.is-idle .product-opening__flash,
.product-opening__scene.is-idle .product-opening__cards,
.product-opening__scene.is-idle .product-opening__packets {
  opacity: 0;
  visibility: hidden;
}

@keyframes productOpeningIdle {
  0%, 100% { transform: translate3d(0, 5px, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(.35deg); }
}
@keyframes productOpeningAura {
  0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.78); }
  50% { opacity: .34; transform: translate(-50%, -50%) scale(.94); }
}

.product-opening__scene.is-results {
  background:
    linear-gradient(116deg, transparent 0 14%, rgba(240, 68, 59, .2) 14.2% 38%, transparent 38.2%),
    radial-gradient(circle, rgba(242, 234, 220, .075) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    radial-gradient(circle at 50% 52%, rgba(67, 215, 211, .13), transparent 52%),
    #05070b;
}
.product-opening__scene.is-results .product-opening__head strong {
  font: 900 clamp(30px, 5.5cqw, 48px)/.95 var(--font-ui);
  letter-spacing: -.035em;
  text-transform: none;
}
.product-opening__results {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding-top: clamp(10px, 2cqh, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}
.product-opening__leader {
  width: min(100%, 620px);
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  overflow: hidden;
  border-left: 6px solid var(--punch);
  background: linear-gradient(100deg, rgba(244, 201, 63, .19), rgba(8, 9, 12, .82) 74%);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 94%);
}
.product-opening__leader img { width: 108px; height: 88px; object-fit: cover; object-position: center 20%; }
.product-opening__leader > span { padding: 12px 15px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.product-opening__leader small { color: var(--punch); font: italic 900 8px/1 var(--font-condensed); letter-spacing: .13em; }
.product-opening__leader strong { margin-top: 5px; font: italic 900 23px/1 var(--font-condensed); }
.product-opening__leader i { margin-top: 4px; color: var(--paper-dim); font: italic 900 9px/1 var(--font-condensed); }
.product-opening__result-cards {
  --reveal-card-width: clamp(164px, 23cqw, 220px);
  width: auto;
  min-height: 0;
  margin-inline: calc(clamp(22px, 5cqw, 54px) * -1);
  padding: 28px clamp(22px, 5cqw, 54px) 24px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2cqw, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--signal) rgba(242, 234, 220, .12);
}
.product-opening__result-cards .shop-reveal-card.card {
  --w-unit: var(--reveal-card-width);
  --card-label-size: clamp(19px, calc(var(--reveal-card-width) * .16), 33px);
  --power-gem-height: clamp(30px, calc(var(--reveal-card-width) * .22), 44px);
  --power-gem-width: clamp(41px, calc(var(--reveal-card-width) * .3), 58px);
  flex: 0 0 var(--reveal-card-width);
  width: var(--reveal-card-width);
  height: auto;
  aspect-ratio: 9 / 16;
  opacity: 1;
  animation: none;
  scroll-snap-align: center;
}

@container stage (max-width: 520px) {
  .product-opening__scene { padding: max(20px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom)); }
  .product-opening__product--pack { width: clamp(190px, 50cqw, 250px); }
  .product-opening__product--box { width: min(88cqw, 390px); }
  .product-opening__card { left: -42px; top: -64px; width: 84px; height: 126px; }
  .product-opening__packet { left: -38px; top: -83px; width: 76px; height: 166px; }
  .product-opening__result-cards { --reveal-card-width: 158px; width: auto; margin-inline: -14px; padding-inline: 14px; }
  .product-opening__leader { grid-template-columns: 88px minmax(0, 1fr); min-height: 76px; }
  .product-opening__leader img { width: 88px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-opening__scene,
  .product-opening__scene.is-idle .product-opening__product,
  .product-opening__scene.is-idle .product-opening__aura,
  .product-opening__trigger { animation: none; transition: none; }
}