:root{
  --wheel-size: 760px;
  --wheel-crop-height: 228px;
}

.ht-spin-icon{
  width: auto;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  object-fit: cover;
}

.btn-spin.is-spinning{
  animation: pulseSpin 650ms infinite ease-in-out;
}
@keyframes pulseSpin{
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%{ transform: scale(1.05); box-shadow: 0 10px 18px rgba(0,0,0,.18); }
  100%{ transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.wheel-win-glow #wheel{
  box-shadow: 0 0 0 0 rgba(40,167,69,.0);
  animation: winGlow 1.2s ease-out 1;
}
@keyframes winGlow{
  0%{ box-shadow: 0 0 0 0 rgba(40,167,69,.0); }
  30%{ box-shadow: 0 0 28px 6px rgba(40,167,69,.35); }
  100%{ box-shadow: 0 0 0 0 rgba(40,167,69,.0); }
}

.winner-banner{
  position: relative;
  margin: -6px 0 14px 0;
  overflow: hidden;
  height: 0;
  transition: height 280ms ease;
}
.winner-banner.show{ height: 64px; }
.winner-banner-inner{
  background: linear-gradient(90deg, rgba(40,167,69,.15), rgba(255,193,7,.18));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-18px);
  opacity: 0;
  transition: transform 280ms ease, opacity 280ms ease;
}
.winner-banner.show .winner-banner-inner{
  transform: translateY(0);
  opacity: 1;
}
.winner-badge{
  font-weight: 700;
  margin-right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,193,7,.35);
}
.winner-name{
  font-weight: 700;
  font-size: 1.2rem;
}

.confetti-canvas{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

#wheelViewport {
  width: var(--wheel-size);
  height: var(--wheel-size);
  overflow: hidden;
  border-radius: 12px;
  margin: 0 auto;
  transition: height 350ms ease-out;
}
#wheelViewport.zoom-crop { height: var(--wheel-crop-height); }

#wheelInner {
  width: var(--wheel-size);
  height: var(--wheel-size);
  transform-origin: 50% 0%;
  transition: transform 350ms ease-out;
  margin: 0 auto;
  will-change: transform;
}

#wheel {
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: block;
  margin: 0 auto;
}

.shake-once{ animation: shake 380ms ease-in-out 1; }
@keyframes shake{
  0%{ transform: translateX(0); }
  18%{ transform: translateX(-6px); }
  36%{ transform: translateX(6px); }
  54%{ transform: translateX(-4px); }
  72%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}