/* =========================================================
   FIX: wheel must be a true square (prevents oval while rotating)
   + FIX: ring alignment (no negative inset)
   PASTE LAST in styles/wheel-logic/wheel-spin-physics.css
   ========================================================= */

/* 1) Always force a square size (beats grid/flex stretch) */
:root{
  --sc-wheel-size: min(620px, 96vw); /* <850 untouched for now */
}

/* 850px -> 1920px: smooth wheel scaling (no 1024 jump)
   300px @850  →  760px @1920 (capped above 1920) */
@media (min-width: 850px){
  :root{
    --sc-wheel-size: clamp(300px, calc(300px + (100vw - 850px) * 0.4299), 760px);
  }
}
@media (min-width: 1024px){
  :root{
    --sc-wheel-size: clamp(560px, 40vw, 760px);
  }
}

.wheel-wrapper{
  width: var(--sc-wheel-size) !important;
  height: var(--sc-wheel-size) !important; /* ✅ key: force square */
  aspect-ratio: auto !important;           /* avoid parent stretch weirdness */
  margin: 18px auto 1.1rem !important;     /* your "18 auto" was invalid */
  align-self: center;
  justify-self: center;
}

/* 2) Make sure rotating element is also square + no inline quirks */
#wheelCanvas,
.wheel{
  width: 100%;
  height: 100%;
  display: block;
  line-height: 0;
}

/* 3) Outer ring removed: keep the wheel edge perfectly clean */
.hero__wheel .wheel-wrapper::after{
  content: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero__wheel .wheel-wrapper.is-empty-wheel::after{
  content: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* =========================================================
   MOBILE FIX: remove blue tap highlight on wheel
   ========================================================= */
@media (hover: none), (pointer: coarse) {
  .wheel,
  #wheelCanvas,
  .wheel-wrapper {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }

  .wheel:active,
  .wheel:focus,
  .wheel:focus-visible,
  #wheelCanvas:active,
  #wheelCanvas:focus,
  #wheelCanvas:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}