/* ============================================================
   Golden Bouzelouf — Legendary loot drop event
   ============================================================ */

/* ---- Container ---- */
#golden-bouzelouf {
  position: fixed;
  display: none;
  top: -150px;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
  z-index: 9500;
  pointer-events: none;
  cursor: pointer;
  user-select: none;
}

#golden-bouzelouf.falling {
  display: block;
  pointer-events: auto;
  animation: gb-fall var(--gb-duration, 15s) linear forwards;
}

@keyframes gb-fall {
  from { top: -150px; }
  to   { top: calc(100vh + 150px); }
}

/* ---- Image — golden filter + pulse glow ---- */
#golden-bouzelouf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    sepia(1) saturate(6) hue-rotate(5deg) brightness(1.4)
    drop-shadow(0 0 8px #ffd700)
    drop-shadow(0 0 24px #ffaa00)
    drop-shadow(0 0 48px rgba(255, 180, 0, 0.6));
  animation:
    gb-glow-pulse 1.2s ease-in-out infinite alternate,
    gb-spin 8s linear infinite;
  pointer-events: none;
}

@keyframes gb-glow-pulse {
  from {
    filter:
      sepia(1) saturate(6) hue-rotate(5deg) brightness(1.4)
      drop-shadow(0 0 8px #ffd700)
      drop-shadow(0 0 24px #ffaa00)
      drop-shadow(0 0 48px rgba(255, 180, 0, 0.6));
  }
  to {
    filter:
      sepia(1) saturate(8) hue-rotate(10deg) brightness(1.8)
      drop-shadow(0 0 16px #ffe066)
      drop-shadow(0 0 40px #ffcc00)
      drop-shadow(0 0 80px rgba(255, 200, 0, 0.9));
  }
}

@keyframes gb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Glow ring behind the image ---- */
.gb-glow-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.45) 0%,
    rgba(255, 140, 0, 0.25) 40%,
    transparent 72%
  );
  pointer-events: none;
  animation: gb-ring-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes gb-ring-pulse {
  from { transform: scale(0.85); opacity: 0.6; }
  to   { transform: scale(1.2);  opacity: 1;   }
}

/* ---- Sparkle particles ---- */
#golden-bouzelouf::before,
#golden-bouzelouf::after {
  content: '✦';
  position: absolute;
  font-size: 1.2rem;
  color: #ffd700;
  pointer-events: none;
  animation: gb-sparkle 1.8s ease-in-out infinite;
  text-shadow: 0 0 8px #ffd700, 0 0 16px #ffaa00;
}
#golden-bouzelouf::before {
  top: -10px;
  left: -14px;
  animation-delay: 0s;
}
#golden-bouzelouf::after {
  bottom: -8px;
  right: -14px;
  animation-delay: 0.9s;
  content: '✧';
}

@keyframes gb-sparkle {
  0%   { opacity: 0;   transform: scale(0.5) rotate(0deg);   }
  40%  { opacity: 1;   transform: scale(1.4) rotate(180deg); }
  100% { opacity: 0;   transform: scale(0.5) rotate(360deg); }
}

/* ---- Claimed burst ---- */
#golden-bouzelouf.claimed {
  pointer-events: none;
}
#golden-bouzelouf.claimed img {
  animation: gb-burst 0.5s ease-out forwards !important;
}
#golden-bouzelouf.claimed .gb-glow-ring {
  animation: gb-ring-burst 0.5s ease-out forwards !important;
}

@keyframes gb-burst {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(2.2); opacity: 0.8; }
  100% { transform: scale(3);   opacity: 0; }
}
@keyframes gb-ring-burst {
  0%   { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(4);   opacity: 0; }
}

/* ---- Expired fade-out ---- */
#golden-bouzelouf.expired img {
  animation: gb-expire 0.8s ease-in forwards !important;
}
#golden-bouzelouf.expired .gb-glow-ring {
  animation: gb-expire 0.8s ease-in forwards !important;
}

@keyframes gb-expire {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4) translateY(-30px); }
}

/* ============================================================
   Winner Banner
   ============================================================ */
#gb-winner-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

#gb-winner-banner.visible {
  animation: gb-banner-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
             gb-banner-out 0.6s ease-in 3.4s forwards;
}

@keyframes gb-banner-in {
  from { opacity: 0; transform: translateY(-80px) scaleX(0.7); }
  to   { opacity: 1; transform: translateY(0)     scaleX(1);   }
}

@keyframes gb-banner-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-40px); }
}

.gb-banner-inner {
  margin-top: 70px; /* below site-header */
  background: linear-gradient(135deg, #1a0e00 0%, #2d1a00 40%, #1a0e00 100%);
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 14px 28px 12px;
  text-align: center;
  box-shadow:
    0 0 24px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 180, 0, 0.3),
    inset 0 0 20px rgba(255, 215, 0, 0.08);
}

.gb-banner-title {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffcc44;
  opacity: 0.85;
  margin-bottom: 4px;
}

.gb-banner-winner {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 12px #ffd700, 0 0 28px #ffaa00;
  letter-spacing: 0.05em;
}

.gb-banner-prize {
  display: block;
  font-size: 0.85rem;
  color: #ffe066;
  opacity: 0.9;
  margin-top: 2px;
}

/* ---- Shimmer sweep on the banner ---- */
.gb-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 200, 0.15) 50%,
    transparent 70%
  );
  animation: gb-shimmer 1.8s linear infinite;
  pointer-events: none;
}
.gb-banner-inner {
  position: relative;
  overflow: hidden;
}

@keyframes gb-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%);  }
}