/* ============================================================
   gift-modal.css v2
   ============================================================ */

/* ── Pastille header ── */
.gift-bell-wrap { position:relative; display:inline-flex; align-items:center; }

.gift-bell-btn {
  background:none; border:none; cursor:pointer; font-size:1.35rem;
  padding:.2rem .3rem; border-radius:8px; transition:transform .2s; position:relative; line-height:1;
}
.gift-bell-btn:hover { transform:scale(1.15) rotate(-8deg); }

.gift-bell-badge {
  position:absolute; top:-4px; right:-5px;
  background:#f5c842; color:#000; font-size:.65rem; font-weight:800;
  min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  animation:giftPulse 1.6s ease-in-out infinite; pointer-events:none;
}
@keyframes giftPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(245,200,66,.7); }
  50%      { transform:scale(1.15); box-shadow:0 0 0 6px rgba(245,200,66,0); }
}

/* ── Overlay ── */
.gift-overlay {
  position:fixed; inset:0;
  background:rgba(5,3,20,.88); backdrop-filter:blur(6px);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.gift-overlay.open { opacity:1; pointer-events:all; }

/* ── Modale ── */
.gift-modal {
  background:linear-gradient(145deg,#12102a 0%,#1a1035 50%,#0e1c30 100%);
  border:1px solid rgba(245,200,66,.25);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(245,200,66,.08),inset 0 1px 0 rgba(255,255,255,.06);
  width:min(560px,94vw);
  max-height:90vh;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:2.2rem 2rem 1.8rem;
  position:relative;
  transform:scale(.9) translateY(20px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.gift-overlay.open .gift-modal { transform:scale(1) translateY(0); }

.gift-modal::before {
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:260px; height:260px;
  background:radial-gradient(circle,rgba(124,77,255,.3) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Close ── */
.gift-close-btn {
  position:absolute; top:1rem; right:1.1rem;
  background:rgba(255,255,255,.07); border:none; color:#888;
  font-size:1.1rem; width:30px; height:30px; border-radius:50%; cursor:pointer;
  transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.gift-close-btn:hover { background:rgba(255,255,255,.15); color:#fff; }

/* ── Screens ── */
.gift-screen { display:none; flex:1; overflow:hidden; flex-direction:column; }
.gift-screen.active { display:flex; }

/* ── Intro ── */
.gift-intro { text-align:center; padding:1rem 1rem .5rem; }
.gift-intro-emoji {
  font-size:4.5rem; display:block; margin-bottom:.8rem;
  animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bounceIn {
  0% { transform:scale(0) rotate(-20deg); opacity:0; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
.gift-intro h2 { font-size:1.5rem; font-weight:800; color:#f5c842; margin-bottom:.4rem; }
.gift-intro p  { color:#a0a0c0; font-size:.92rem; line-height:1.5; }
.gift-intro-count {
  display:inline-block; background:rgba(245,200,66,.15); color:#f5c842;
  border-radius:8px; padding:.3rem .9rem; font-weight:700; font-size:.88rem; margin-top:.7rem;
}
.gift-start-btn {
  margin-top:1.6rem;
  background:linear-gradient(135deg,#f5c842 0%,#e6a800 100%);
  color:#000; font-weight:800; font-size:1rem; border:none; border-radius:12px;
  padding:.85rem 2rem; cursor:pointer; width:100%;
  transition:transform .15s, opacity .15s;
}
.gift-start-btn:hover { transform:translateY(-2px); opacity:.92; }

/* ── Reveal — single slide ── */
.gift-reveal-single {
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:.2rem .1rem;
  margin-bottom:1rem;
  /* scrollbar stylée */
  scrollbar-width:thin;
  scrollbar-color:rgba(124,77,255,.4) transparent;
}
.gift-reveal-single::-webkit-scrollbar { width:4px; }
.gift-reveal-single::-webkit-scrollbar-thumb { background:rgba(124,77,255,.4); border-radius:2px; }

/* ── Reward Card ── */
.gift-reward-card {
  background:linear-gradient(135deg,rgba(124,77,255,.12) 0%,rgba(245,200,66,.06) 100%);
  border:1px solid rgba(245,200,66,.2);
  border-radius:14px;
  padding:1rem 1.2rem;
  animation:cardSlideIn .35s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes cardSlideIn {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.gift-reward-card-head {
  display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.75rem;
}
.gift-reward-card-emoji { font-size:2rem; line-height:1; flex-shrink:0; }
.gift-reward-card-info  { flex:1; }
.gift-reward-card-title { font-size:.98rem; font-weight:700; color:#f5c842; margin-bottom:.15rem; }
.gift-reward-card-msg   { font-size:.8rem; color:#8888aa; line-height:1.4; }

.gift-reward-items { display:flex; flex-wrap:wrap; gap:.4rem; }
.gift-reward-item {
  background:rgba(124,77,255,.22);
  color:#c4a8ff;
  border-radius:7px;
  padding:.28rem .65rem;
  font-size:.8rem;
  font-weight:600;
  border:1px solid rgba(124,77,255,.3);
}

/* ── Claim All btn ── */
.gift-claim-all-btn {
  flex-shrink:0;
  background:linear-gradient(135deg,#7c4dff 0%,#5c2ddf 100%);
  color:#fff; font-weight:800; font-size:1rem; border:none; border-radius:12px;
  padding:.85rem; width:100%; cursor:pointer;
  transition:transform .15s, opacity .15s;
  box-shadow:0 4px 20px rgba(124,77,255,.4);
}
.gift-claim-all-btn:hover  { transform:translateY(-2px); opacity:.92; }
.gift-claim-all-btn:disabled { opacity:.5; cursor:wait; transform:none; }

/* ── Done ── */
.gift-done { text-align:center; padding:1.5rem 1rem; }
.gift-done-emoji { font-size:4rem; display:block; margin-bottom:1rem; animation:bounceIn .6s ease; }
.gift-done h2 { font-size:1.4rem; font-weight:800; color:#f5c842; margin-bottom:.5rem; }
.gift-done p  { color:#8888aa; font-size:.9rem; margin-bottom:1.5rem; }
.gift-done-close {
  background:linear-gradient(135deg,#f5c842 0%,#e6a800 100%);
  color:#000; font-weight:800; font-size:.95rem; border:none; border-radius:10px;
  padding:.75rem 2rem; cursor:pointer; transition:opacity .15s; width:100%;
}
.gift-done-close:hover { opacity:.9; }

/* ── Confetti canvas ── */
#giftConfettiCanvas { position:fixed; inset:0; pointer-events:none; z-index:10001; }

/* ── Orbes ── */
.gift-orb {
  position:absolute; border-radius:50%; pointer-events:none; opacity:.12;
  animation:orbFloat linear infinite;
}
@keyframes orbFloat {
  0%   { transform:translateY(0) scale(1); opacity:.12; }
  50%  { opacity:.2; }
  100% { transform:translateY(-100px) scale(.6); opacity:0; }
}