#clubOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  overflow: hidden;
  background: transparent !important;
}

#clubOverlay .ball-chain {
  position: absolute;
  left: 50%;
  top: -180px;
  width: 3px;
  height: 238px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #8a8a8a, #f4f4f4 34%, #717171 67%, #d7d7d7);
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.18);
}

#clubOverlay .ball-chain::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 36px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 4px solid #868686;
  box-shadow: inset 0 0 0 2px #f1f1f1, 0 0 6px rgba(255, 255, 255, 0.18);
  background: transparent;
}

#clubOverlay .ball-chain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 15px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fff, #777 54%, #ddd);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.18);
}

#clubOverlay .disco-ball {
  position: absolute;
  left: 50%;
  top: -270px;
  width: clamp(96px, 22vmin, 152px);
  height: clamp(96px, 22vmin, 152px);
  border-radius: 50%;
  transform: translateX(-50%);
  background: transparent !important;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.22);
  filter: none;
  overflow: hidden;
  pointer-events: none !important;
}

#clubOverlay .beam {
  position: absolute;
  left: 50%;
  top: 58px;
  width: min(54vw, 620px);
  height: 88vh;
  transform-origin: 50% 0%;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(3px);
}

#clubOverlay .beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-top: 0;
  border-bottom: 80vh solid rgba(255, 255, 255, 0.14);
}

#clubOverlay .beam.a { transform: translateX(-50%) rotate(-28deg); }
#clubOverlay .beam.b { transform: translateX(-50%) rotate(-12deg); }
#clubOverlay .beam.c { transform: translateX(-50%) rotate(12deg); }
#clubOverlay .beam.d { transform: translateX(-50%) rotate(28deg); }
#clubOverlay .beam.a::before { border-bottom-color: rgba(86, 208, 255, 0.12); }
#clubOverlay .beam.b::before { border-bottom-color: rgba(255, 69, 180, 0.12); }
#clubOverlay .beam.c::before { border-bottom-color: rgba(175, 90, 255, 0.11); }
#clubOverlay .beam.d::before { border-bottom-color: rgba(255, 214, 74, 0.10); }

#clubOverlay .light-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#clubOverlay .light-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.35px);
  box-shadow: 0 0 14px currentColor, 0 0 32px currentColor;
}

#clubOverlay.show .ball-chain { animation: ballChainDrop 2.4s ease forwards; }
#clubOverlay.show .disco-ball { animation: discoBallDrop 2.7s cubic-bezier(.18,.84,.22,1) forwards, discoPulse 1.2s ease-in-out infinite .9s; }
#clubOverlay.show .beam { animation: beamPulse 1.1s ease-in-out infinite; }
#clubOverlay.show .beam.a { animation-delay: .05s; }
#clubOverlay.show .beam.b { animation-delay: .22s; }
#clubOverlay.show .beam.c { animation-delay: .1s; }
#clubOverlay.show .beam.d { animation-delay: .28s; }
#clubOverlay.show .light-dot { animation: partyLight 2.6s ease-in-out infinite; }

@keyframes ballChainDrop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes discoBallDrop {
  0% { top: -270px; }
  35% { top: -8px; }
  55% { top: 18px; }
  72% { top: 10px; }
  100% { top: 14px; }
}

@keyframes discoPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255,255,255,.16), 0 0 46px rgba(201,180,255,.08); }
  50% { box-shadow: 0 0 42px rgba(255,255,255,.26), 0 0 68px rgba(201,180,255,.16); }
}

@keyframes beamPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .36; }
}

@keyframes partyLight {
  0%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(.55); }
  18% { opacity: .95; }
  55% { opacity: .8; transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
  80% { opacity: .25; }
}

@media (max-width: 720px) {
  #clubOverlay .ball-chain { top: -162px; height: 210px; }
  #clubOverlay .beam { top: 54px; }
  #clubOverlay .disco-ball {
    width: clamp(112px, 38vmin, 168px);
    height: clamp(112px, 38vmin, 168px);
  }

  @keyframes discoBallDrop {
    0% { top: -230px; }
    35% { top: -2px; }
    55% { top: 24px; }
    72% { top: 16px; }
    100% { top: 20px; }
  }
}