:root {
  --lotto-gold:#f5c542;
  --lotto-purple:#8064ff;
  --lotto-bg:rgba(9,9,13,.92);
}

/* Overlay */
#preloader {
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--lotto-bg);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
#preloader.active { opacity:1; pointer-events:auto; }

/* Loader */
#preloader .loader { display:grid; gap:1rem; place-items:center; }

/* Balls */
#preloader .preloader-balls { display:flex; gap:1rem; align-items:end; }
#preloader .preloader-ball {
  --size:72px;
  width:var(--size); height:var(--size); border-radius:50%;
  background:#fff;
  position:relative; isolation:isolate;
  animation: float 1.2s ease-in-out infinite;
  box-shadow: inset 0 0 0 4px #fff, inset 0 -8px 18px rgba(0,0,0,.25),
              0 6px 18px rgba(0,0,0,.35);
}
#preloader .preloader-ball:nth-child(2){ animation-delay:.12s; --size:80px; }
#preloader .preloader-ball:nth-child(3){ animation-delay:.24s; --size:70px; }
#preloader .preloader-ball::after{
  content:attr(data-num);
  position:absolute; inset:0; display:grid; place-items:center;
  font:700 28px/1 sans-serif; color:#111;
}
#preloader .preloader-ball::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:4px solid var(--lotto-gold);
  box-shadow:0 0 16px rgba(245,197,66,.6);
}

/* Jackpot text */
#preloader .loading-message {
  font:900 28px/1 sans-serif; letter-spacing:.2em;
  color:transparent;
  background:linear-gradient(90deg,#fff,var(--lotto-gold),#fff);
  -webkit-background-clip:text; background-clip:text;
  animation:shine 1.75s linear infinite;
}

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes shine { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #preloader .preloader-ball,#preloader .loading-message{ animation:none!important; }
}