/* OVERLAY LAYER */
.gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.gift-box {
  background: rgba(0,0,0,.6);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  color: #fff;
}

.gift-box video {
  width: 200px;
  border-radius: 12px;
}


/* ANIMATION WRAPPER */
.gift-anim{
  position:absolute;
  bottom:25%;
  display:flex;
  align-items:center;
  gap:10px;
  animation:floatUp 2.8s ease forwards;
}

/* MEDIA */
.gift-anim img,
.gift-anim video{
  max-width:160px;
  max-height:160px;
  object-fit:contain;
}

/* LABEL */
.gift-label{
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
}

/* BIG GIFTS */
.gift-anim.big{
  animation:zoomShow 3.2s ease forwards;
}

.gift-anim.big img,
.gift-anim.big video{
  max-width:60vw;
  max-height:60vh;
}

/* ANIMATIONS */
@keyframes floatUp{
  0%{transform:translateY(40px);opacity:0}
  15%{opacity:1}
  100%{transform:translateY(-120px);opacity:0}
}

@keyframes zoomShow{
  0%{
    transform: scale(.25);
    opacity: 0;
  }
  20%{
    transform: scale(1.05);
    opacity: 1;
  }
  70%{
    transform: scale(1.15);
    opacity: 1;
  }
  100%{
    transform: scale(1.3);
    opacity: 0;
  }
}

.gift-anim.legendary{
  text-align: center;
}

/* =========================
   📱 MOBILE LEGENDARY FIX
   ========================= */
@media (max-width: 768px){

  .gift-anim.legendary{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* MEDIA FULL POWER */
  .gift-anim.legendary img,
  .gift-anim.legendary video{
    max-width: 96vw;
    max-height: 65vh;
    transform-origin: center center;

    filter:
      drop-shadow(0 0 25px gold)
      drop-shadow(0 0 60px rgba(255,215,0,.9))
      drop-shadow(0 0 120px rgba(255,215,0,.6));
  }

  /* 👑 TITLE BIGGER */
  .legendary-title{
    font-size: 20px;
    padding: 0 14px;
    line-height: 1.35;
  }

  .legendary-title span{
    display:block;
    font-size: 24px;
    margin-top: 6px;
  }

}


/* ===== LEGENDARY OVERLAY ===== */
.gift-overlay.legendary {
  background: radial-gradient(circle at center, rgba(255,215,0,.25), rgba(0,0,0,.85));
  animation: legendaryFade 3.5s ease forwards;
}

/* BIG CENTER ANIM */
.gift-legendary {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
  pointer-events: none;
}

.gift-legendary-media {
  width: min(78vw, 320px);
  max-height: 60vh;
  animation: legendaryZoom 3s ease forwards;
  filter: drop-shadow(0 0 40px gold);
}

/* LABEL */
.gift-legendary-label {
  margin-top: 18px;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 800;
  color: #ffd700;
  text-align: center;
  text-shadow: 0 0 12px rgba(255,215,0,.8);
}

/* SCREEN SHAKE */
body.legendary-shake {
  animation: shake .4s ease 2;
}

/* ANIMATIONS */
@keyframes legendaryZoom {
  0% { transform: scale(.2); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes legendaryFade {
  0% { opacity: 0 }
  10% { opacity: 1 }
  90% { opacity: 1 }
  100% { opacity: 0 }
}

@keyframes shake {
  0%{transform:translate(0)}
  25%{transform:translate(-4px,4px)}
  50%{transform:translate(4px,-4px)}
  75%{transform:translate(-3px,3px)}
  100%{transform:translate(0)}
}

.flame-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,80,0,.35), transparent 55%);
  animation: flamePulse 1.5s infinite alternate;
}

@keyframes flamePulse {
  from { opacity:.4 }
  to { opacity:.8 }
}
.angel-wings {
  position:absolute;
  width:120%;
  max-width:420px;
  animation:wingsOpen 2.4s ease forwards;
}

@keyframes wingsOpen {
  0%{transform:scale(.4);opacity:0}
  40%{opacity:1}
  100%{transform:scale(1)}
}
.confetti-layer {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,0,0,.8),
      rgba(255,255,0,.8) 10px,
      rgba(0,255,255,.8) 20px
    );
  animation:confettiFall 2.6s linear forwards;
}

@keyframes confettiFall {
  from{transform:translateY(-100%)}
  to{transform:translateY(100%)}
}

.combo-badge{
  margin-top:10px;
  padding:8px 18px;
  background:linear-gradient(135deg,#ff9800,#ff2d55);
  border-radius:999px;
  font-weight:900;
  font-size:15px;
}