/* V6.4.1: child-chosen Mystery Pack reveal */

.sticker-home-thumb{
  position:relative;
}
.sticker-waiting-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:23px;
  height:23px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:999px;
  background:#f05b72;
  color:#fff;
  font-size:11px;
  font-style:normal;
  font-weight:950;
  line-height:1;
  box-shadow:0 4px 10px rgba(101,43,77,.24);
}

.pack-waiting-banner{
  max-width:1000px;
  margin:0 auto 16px;
  padding:13px 15px;
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border:2px solid #efd28d;
  border-radius:20px;
  background:rgba(255,250,226,.97);
  box-shadow:0 10px 26px rgba(70,46,97,.08);
}
.pack-waiting-image{
  width:62px;
  height:70px;
  display:grid;
  place-items:center;
}
.pack-waiting-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(105,72,84,.14));
}
.pack-waiting-banner strong,
.pack-waiting-banner small{
  display:block;
}
.pack-waiting-banner strong{
  font-size:18px;
}
.pack-waiting-banner small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}

.sticker-collection-card.pending{
  border-color:#efd28d;
  background:rgba(255,250,229,.96);
}
.sticker-collection-card.pending .sticker-image-zone{
  background:#fff8df;
}
.sticker-collection-card.pending.ready{
  box-shadow:0 12px 30px rgba(192,132,30,.16);
}
.sticker-collection-card.pending.queued{
  opacity:.78;
}

.pack-choice-copy{
  padding:4px 8px 0;
}
.pack-choice-copy h2{
  margin:3px 0 5px;
  font-size:30px;
  line-height:1.08;
}
.pack-choice-copy>p:not(.eyebrow){
  margin:0;
  color:var(--muted);
}
.mystery-pack-options{
  margin:17px 0 13px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.mystery-pack-button{
  min-width:0;
  min-height:174px;
  padding:9px 6px 10px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  place-items:center;
  gap:6px;
  border:2px solid #ead7a5;
  border-radius:17px;
  background:#fff9e8;
  color:#60475f;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  transform-origin:center bottom;
  transition:transform .2s ease,opacity .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mystery-pack-button img{
  display:block;
  width:100%;
  height:128px;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 7px 6px rgba(96,57,83,.14));
}
.mystery-pack-button:hover:not(:disabled),
.mystery-pack-button:focus-visible{
  transform:translateY(-3px);
  border-color:#f0ad45;
  outline:0;
  box-shadow:0 10px 22px rgba(118,76,91,.14);
}
.mystery-pack-button.chosen{
  z-index:1;
  border-color:#f2ab32;
  box-shadow:0 0 0 5px rgba(255,207,94,.25),0 15px 30px rgba(118,76,91,.2);
  animation:pack-open-choice .7s ease both;
}
.mystery-pack-button.not-chosen{
  opacity:.18;
  transform:scale(.88);
}
.pack-later-button{
  width:100%;
}
.paw-result.pack-earned{
  border-color:#efd28d;
  background:#fff9df;
}
.paw-open-pack{
  min-height:34px;
  margin-top:8px;
  padding:6px 13px;
  font-size:11px;
}

@keyframes pack-open-choice{
  0%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-7px) rotate(-2deg) scale(1.04)}
  58%{transform:translateY(-7px) rotate(2deg) scale(1.06)}
  100%{transform:translateY(-5px) rotate(0) scale(1.08)}
}

@media(max-width:560px){
  .pack-waiting-banner{
    grid-template-columns:55px minmax(0,1fr);
    gap:10px;
  }
  .pack-waiting-image{
    width:50px;
    height:58px;
  }
  .pack-waiting-banner .primary-button{
    grid-column:1/-1;
    width:100%;
  }
  .pack-choice-copy h2{
    font-size:26px;
  }
  .mystery-pack-options{
    gap:6px;
  }
  .mystery-pack-button{
    min-height:148px;
    padding:7px 3px 8px;
    border-radius:14px;
    font-size:10px;
  }
  .mystery-pack-button img{
    height:108px;
  }
}

@media(max-width:360px), (max-height:650px){
  .mystery-pack-options{
    margin:12px 0 10px;
  }
  .mystery-pack-button{
    min-height:126px;
  }
  .mystery-pack-button img{
    height:90px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mystery-pack-button{
    transition:none;
  }
  .mystery-pack-button.chosen{
    animation:none;
    transform:scale(1.03);
  }
  .mystery-pack-button.not-chosen{
    transform:none;
  }
}