/* ============ STAGE ============ */
.stage {
  position: relative;
  width: min(360px, 90vw);
  height: min(540px, 76vh);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  z-index: 10;
}

/* ============ PACK ============ */
.pack-container {
  position: absolute;
  width: 230px;
  height: 360px;
  transform-style: preserve-3d;
  animation: packBob 4s ease-in-out infinite;
}
@keyframes packBob {
  0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(-3deg); }
  50%      { transform: translateY(-14px) rotateX(-2deg) rotateY(3deg); }
}

.pack {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      #1a1138 0%,
      #2d1a5e 15%,
      #5a2d8c 38%,
      #8c2d6e 62%,
      #4a1d68 85%,
      #1a1138 100%
    );
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08) inset,
    0 0 0 6px rgba(120, 60, 200, 0.18),
    0 30px 80px -10px rgba(80, 30, 160, 0.5),
    0 60px 100px -20px rgba(0,0,0,0.7);
  overflow: hidden;
  transform-style: preserve-3d;
}

/* Pack foil shine */
.pack::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 220, 255, 0.0) 38%,
    rgba(255, 220, 255, 0.6) 50%,
    rgba(255, 220, 255, 0.0) 62%,
    transparent 75%
  );
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  animation: packShine 4.5s linear infinite;
  pointer-events: none;
}
@keyframes packShine {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

/* Pack pattern */
.pack::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.4), transparent 50%);
  pointer-events: none;
}

/* Pack tear edge at top */
.pack-tear {
  position: absolute;
  top: 22px; left: 0; right: 0;
  height: 6px;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}
.pack-tear::before, .pack-tear::after {
  content: ""; position: absolute; left: 8px; right: 8px;
  height: 1px;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 4px, transparent 4px 7px);
}
.pack-tear::before { top: 0; }
.pack-tear::after  { bottom: 0; }

/* Pack logo */
.pack-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 4;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.pack-logo .infinity-symbol {
  font-family: 'Cinzel', serif;
  font-size: 84px;
  font-weight: 900;
  background: linear-gradient(90deg, #ffd9ff, #fff, #d9ffff, #fff, #ffd9ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.8;
  animation: rainbowShift 6s linear infinite;
}
.pack-logo .label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.42em;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
  padding-left: 0.42em;
}
.pack-logo .sub {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  padding-left: 0.4em;
}

/* Pack glow ring */
.pack-glow {
  position: absolute;
  inset: -30px;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  filter: blur(30px);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.pack-glow.normal   { background: radial-gradient(circle, var(--c-normal-2) 0%, transparent 70%); }
.pack-glow.rare     { background: radial-gradient(circle, var(--c-rare-1) 0%, transparent 70%); }
.pack-glow.super    { background: radial-gradient(circle, var(--c-super-1) 0%, transparent 70%); }
.pack-glow.infinite { background: conic-gradient(from 0deg, var(--c-inf-1), var(--c-inf-2), var(--c-inf-3), var(--c-inf-4), var(--c-inf-5), var(--c-inf-1)); animation: rotateGlow 3s linear infinite; }
@keyframes rotateGlow { to { transform: rotate(360deg); } }

/* Pack states */
.pack-container.shake {
  animation: packShake 0.06s ease-in-out infinite;
}
@keyframes packShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-3px, 1px) rotate(-1deg); }
  40%  { transform: translate(2px, -2px) rotate(1.2deg); }
  60%  { transform: translate(-1px, 3px) rotate(-0.8deg); }
  80%  { transform: translate(3px, 1px) rotate(0.6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.pack-container.shake.intense {
  animation: packShakeBig 0.05s ease-in-out infinite;
}
@keyframes packShakeBig {
  0%   { transform: translate(0,0) rotate(0); }
  20%  { transform: translate(-8px, 3px) rotate(-2deg) scale(1.02); }
  40%  { transform: translate(6px, -4px) rotate(2.4deg) scale(1.04); }
  60%  { transform: translate(-4px, 6px) rotate(-1.6deg) scale(1.03); }
  80%  { transform: translate(7px, 2px) rotate(1.6deg) scale(1.05); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
.pack-container.burst {
  animation: packBurst 0.55s cubic-bezier(.5,0,.7,0) forwards;
}
@keyframes packBurst {
  0%   { transform: scale(1); opacity: 1; filter: blur(0) brightness(1); }
  35%  { transform: scale(1.18); opacity: 1; filter: blur(2px) brightness(1.6); }
  70%  { transform: scale(0.4); opacity: 0.6; filter: blur(8px) brightness(2.5); }
  100% { transform: scale(0.05); opacity: 0; filter: blur(20px) brightness(3); }
}
.pack-container.gone { display: none; }

/* Rip line / opening crack */
.pack-rip {
  position: absolute;
  top: 0; left: 50%;
  width: 4px; height: 0;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0));
  transform: translateX(-50%);
  filter: blur(2px);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.pack-rip.active {
  animation: ripGrow 0.5s ease-out forwards;
}
@keyframes ripGrow {
  0%   { height: 0; opacity: 0; }
  20%  { height: 40px; opacity: 1; }
  100% { height: 360px; opacity: 1; }
}