
/* Golden Reward Wheel v17 — circle/orbit fix, original JS/data hooks preserved */
.hero .image-bg.hero-wheel-shell{
  width:min(100%,620px)!important;
  max-width:620px!important;
  margin:10px auto 38px!important;
  overflow:visible!important;
  background:none!important;
  box-shadow:none!important;
}
.hero-wheel-embed{position:relative;width:100%!important;overflow:visible!important}
.hero-wheel-stage{
  position:relative!important;
  width:min(100%,560px)!important;
  max-width:560px!important;
  aspect-ratio:1/1!important;
  margin:0 auto!important;
  overflow:visible!important;
  isolation:isolate;
  filter:none!important;
}
.hero-wheel-stage::before{
  content:"";
  position:absolute;
  left:50%; bottom:-24px;
  width:78%; height:58px;
  transform:translateX(-50%);
  z-index:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(250,217,100,.92) 0 5%,transparent 6%),
    linear-gradient(180deg,#0b5b3c 0 40%,#063a28 41% 68%,#03281c 69% 100%);
  border:3px solid #d8a92d;
  box-shadow:
    0 10px 0 -2px #0a442f,
    0 15px 0 -1px #b4861e,
    0 26px 28px rgba(2,44,29,.28),
    inset 0 4px 7px rgba(255,255,255,.16);
}
.hero-wheel-stage::after{
  content:"";
  position:absolute;
  inset:3% 3% 2%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(26,199,121,.18) 0 45%,rgba(244,207,89,.10) 58%,transparent 73%);
  filter:blur(12px);
}
.hero-wheel-disc{
  --hero-wheel-rotation:0deg;
  position:absolute!important;
  inset:12px!important;
  z-index:2!important;
  border-radius:50%!important;
  transform:translateZ(0) rotate(var(--hero-wheel-rotation))!important;
  transition:transform 6.2s cubic-bezier(.12,.92,.18,1)!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  transform-origin:50% 50%!important;
  filter:drop-shadow(0 18px 28px rgba(1,36,24,.25));
}
.hero-wheel-disc.is-spinning{pointer-events:none}
.hero-wheel-ring{
  aspect-ratio:1/1!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  z-index:2!important;
  border-radius:50%!important;
  image-rendering:auto!important;
}
/* The new disk already contains its own wedges, gold separators, labels and bulbs. */
.hero-wheel-core,.hero-wheel-shine,.hero-wheel-labels{display:none!important}
.hero-wheel-pointer{
  position:absolute!important;
  top:-26px!important;
  left:50%!important;
  width:74px!important;
  height:106px!important;
  transform:translateX(-50%)!important;
  z-index:7!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  pointer-events:none!important;
  filter:drop-shadow(0 8px 8px rgba(67,46,5,.25));
}
.hero-wheel-pointer img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
.hero-wheel-center{
  position:absolute!important;
  top:50%!important; left:50%!important;
  width:174px!important; height:174px!important;
  transform:translate(-50%,-50%)!important;
  z-index:8!important;
  padding:0!important; border:0!important; background:none!important;
  cursor:pointer!important;
  animation:golden-wheel-pulse 2s ease-in-out infinite!important;
  appearance:none!important;-webkit-appearance:none!important;
}
.hero-wheel-center img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  border-radius:50%!important;
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.30))!important;
}
.hero-wheel-center span{display:none!important}
.hero-wheel-center:hover{transform:translate(-50%,-50%) scale(1.045)!important}
.hero-wheel-center:active{transform:translate(-50%,-50%) scale(.98)!important}
@keyframes golden-wheel-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.025)}
}
.hero-wheel-fab{
  position:fixed!important;left:16px!important;bottom:16px!important;
  width:72px!important;height:72px!important;padding:0!important;border:0!important;background:none!important;
  cursor:pointer!important;z-index:80!important;
  animation:hero-wheel-fab-rotate 18s linear infinite!important;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.28))!important;
}
.hero-wheel-fab img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important}
/* Modal uses the same upgraded wheel, but remains inside the existing functional dialog. */
.hero-wheel-overlay__dialog{width:min(94vw,620px)!important;padding:28px 24px 36px!important;overflow:visible!important}
.hero-wheel-overlay .hero-wheel-stage{width:min(100%,520px)!important}
.hero-wheel-overlay .hero-wheel-stage::before{bottom:-20px;height:52px}
@media (max-width:1024px){
  .hero .image-bg.hero-wheel-shell{max-width:560px!important}
  .hero-wheel-stage{width:min(100%,500px)!important;max-width:500px!important}
  .hero-wheel-center{width:160px!important;height:160px!important}
  .hero-wheel-pointer{top:-22px!important;width:66px!important;height:96px!important}
}
@media (max-width:767px){
  .hero .image-bg.hero-wheel-shell{width:100%!important;max-width:410px!important;margin:12px auto 28px!important}
  .hero-wheel-stage{width:min(100%,356px)!important;max-width:356px!important}
  .hero-wheel-disc{inset:8px!important}
  .hero-wheel-center{width:122px!important;height:122px!important}
  .hero-wheel-pointer{top:-15px!important;width:50px!important;height:74px!important}
  .hero-wheel-stage::before{bottom:-14px;width:76%;height:38px;border-width:2px;box-shadow:0 7px 0 -1px #0a442f,0 11px 0 -1px #b4861e,0 18px 20px rgba(2,44,29,.24),inset 0 3px 5px rgba(255,255,255,.15)}
  .hero-wheel-fab{display:none!important}
  .hero-wheel-overlay__dialog{width:min(96vw,430px)!important;padding:22px 14px 28px!important}
  .hero-wheel-overlay .hero-wheel-stage{width:min(100%,340px)!important}
}

/* v18 close icon polish */
.hero-wheel-overlay__close,.hero-wheel-result__close{
  background:rgba(10,92,61,.08)!important;
  border:1px solid rgba(15,143,90,.18)!important;
  box-shadow:0 6px 14px rgba(2,44,29,.12)!important;
}
.hero-wheel-overlay__close img,.hero-wheel-result__close img{
  width:22px!important;
  height:22px!important;
}
.hero-wheel-overlay__close:hover,.hero-wheel-result__close:hover{
  background:rgba(21,147,95,.12)!important;
}

/* v22 spin button swap */
.hero-wheel-center img{image-rendering:auto!important;filter:drop-shadow(0 12px 18px rgba(0,0,0,.34))!important}
