#wheelWrap{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
}
#wheelBox{
  width:320px; height:320px; position:relative;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 28px rgba(124,92,255,.22), inset 0 0 24px rgba(0,229,255,.10);
  overflow:hidden;
}
#wheelSvg{
  width:100%; height:100%;
  transform: rotate(0deg);
}
#wheelNeedle{
 transform: rotate(180deg);
    position: absolute;
    left: 46%;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 26px solid rgba(255, 0, 51, .95);
    filter: drop-shadow(0 0 10px rgba(255, 0, 51, .55)) drop-shadow(0 0 22px rgba(255, 0, 51, .35));
}
#wheelCenter{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
#wheelCenter .pill{
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  font-weight:900;
  box-shadow: 0 0 18px rgba(0,229,255,.18);
}



/* === VISUAL UPGRADE: NEON WHEEL === */
:root{
  --segPurple1:#5B3BFF;
  --segPurple2:#24104F;
  --segTeal1:#00E5FF;
  --segTeal2:#003C4A;
}

.wheel{
  background:
    conic-gradient(
      from -90deg,
      var(--segPurple1),
      var(--segTeal1),
      var(--segPurple1),
      var(--segTeal1),
      var(--segPurple1),
      var(--segTeal1),
      var(--segPurple1),
      var(--segTeal1)
    );
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 30px rgba(90,60,255,.45),
    0 0 45px rgba(0,229,255,.35);
  position:relative;
}

.wheel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 50% 70%, rgba(0,0,0,.35), transparent 60%);
  pointer-events:none;
}

.wheel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(255,255,255,.12) 0deg 1deg,
      transparent 1deg 45deg
    );
  opacity:.4;
  pointer-events:none;
}
/* === END VISUAL UPGRADE === */



/* === VISUAL UPGRADE v2: PREMIUM NEON WHEEL (SVG) === */
:root{
  /* B style: blue-cyan, very bright */
  --wheelPurple1:#00F6FF;   /* bright cyan */
  --wheelPurple2:#005BFF;   /* electric blue */
  --wheelTeal1:#00E5FF;     /* cyan */
  --wheelTeal2:#001B3D;     /* deep navy */
  --wheelRimA: rgba(0, 246, 255, .55);
  --wheelRimB: rgba(0, 91, 255, .45);
  --wheelRimC: rgba(255, 255, 255, .12);
}

#wheelBox{
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.20) 45%, rgba(0,0,0,.35) 70%),
    rgba(0,0,0,.18);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 26px var(--wheelRimA),
    0 0 40px var(--wheelRimB),
    inset 0 0 26px rgba(0,0,0,.35);
}

#wheelBox::after{
  /* glass highlight */
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.20), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.38), rgba(0,0,0,0) 55%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.60;
}

#wheelBox::before{
  /* subtle rim & vignette */
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:
    0 0 0 10px rgba(0,0,0,.22) inset,
    0 0 0 1px rgba(255,255,255,.08) inset;
  pointer-events:none;
}

#wheelSvg path{
  stroke: rgba(255,255,255,.14);
  stroke-width: .8;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25));
}

#wheelSvg text{
  filter: drop-shadow(0 0 8px rgba(0,0,0,.35));
}
/* === END VISUAL UPGRADE v2 === */


/* === PREMIUM NEON WHEEL (B STYLE FX): blue-cyan, very bright === */
#wheelBox{
  isolation:isolate;
}

#wheelBox .wheelFx{
  position:absolute;
  inset:-18px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  opacity:.0;
  mix-blend-mode: screen;
  background:
    conic-gradient(from -90deg,
      rgba(0,246,255,.0) 0deg,
      rgba(0,246,255,.35) 22deg,
      rgba(0,91,255,.10) 45deg,
      rgba(0,246,255,.28) 70deg,
      rgba(0,0,0,0) 110deg),
    radial-gradient(circle at 50% 50%,
      rgba(0,246,255,.10) 0%,
      rgba(0,91,255,.06) 38%,
      rgba(0,0,0,0) 70%);
  filter: blur(0.2px) drop-shadow(0 0 22px rgba(0,246,255,.25)) drop-shadow(0 0 44px rgba(0,91,255,.18));
}

#wheelSvg{
  position:relative;
  z-index:1;
}

#wheelNeedle, #wheelCenter{
  z-index:3;
}

@keyframes wheelBreath{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.06) inset,
      0 0 34px rgba(0,246,255,.60),
      0 0 64px rgba(0,91,255,.42),
      inset 0 0 28px rgba(0,0,0,.40);
    filter: saturate(1.05);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.08) inset,
      0 0 44px rgba(0,246,255,.78),
      0 0 86px rgba(0,91,255,.56),
      inset 0 0 28px rgba(0,0,0,.40);
    filter: saturate(1.25);
  }
}

#wheelBox.breath{
  animation: wheelBreath 2.6s ease-in-out infinite;
}

@keyframes fxSpin{
  from{ transform: rotate(0deg); opacity: .10; }
  to{ transform: rotate(360deg); opacity: .10; }
}
#wheelBox.spinning .wheelFx{
  opacity:.78;
  animation: fxSpin .95s linear infinite;
}

@keyframes stopFlash{
  0%{ opacity: .0; transform: scale(1); }
  20%{ opacity: .9; transform: scale(1.01); }
  100%{ opacity: .0; transform: scale(1.0); }
}
#wheelBox.stopFlash .wheelFx{
  animation: stopFlash .55s ease-out 1;
  opacity:.0;
}

/* Needle bounce on stop */
@keyframes needleBounce{
  0%{ transform: rotate(180deg) translateY(0); }
  40%{ transform: rotate(180deg) translateY(-3px); }
  70%{ transform: rotate(180deg) translateY(1px); }
  100%{ transform: rotate(180deg) translateY(0); }
}
#wheelNeedle.bounce{
  animation: needleBounce .45s ease-out 1;
}

/* Label reveal */
@keyframes labelPop{
  0%{ transform: translateY(6px) scale(.96); opacity: 0; filter: blur(1px); }
  60%{ transform: translateY(-1px) scale(1.02); opacity: 1; filter: blur(0); }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
#wheelLabel.reveal{
  animation: labelPop .35s ease-out 1;
}

/* Make center pill brighter for B */
#wheelCenter .pill{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(0,246,255,.14) inset,
    0 0 18px rgba(0,246,255,.30),
    0 0 34px rgba(0,91,255,.20);
}
/* === END PREMIUM NEON WHEEL (B STYLE FX) === */


/* === LED RING (B STYLE): running light segments (not bulbs) === */
#wheelBox{
  --ledSpeed: 3.2s; /* default running speed (more visible) */
}
#wheelBox.spinning{
  --ledSpeed: 0.65s; /* faster while spinning (show) */
}
#wheelBox.stopFlash{
  --ledBright: 1.45;
}
#wheelBox{
  --ledBright: 1.0;
}

#wheelBox .ledRing{
  position:absolute;
  inset:4px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  opacity:.95;
  mix-blend-mode: screen;
  filter: saturate(1.35) brightness(calc(var(--ledBright) * 1.08)) drop-shadow(0 0 16px rgba(0,246,255,.35)) drop-shadow(0 0 28px rgba(0,91,255,.22));
  background:
    repeating-conic-gradient(from -90deg,
      rgba(255,255,255,0) 0deg 7deg,
      rgba(0,246,255,.95) 7deg 10deg,
      rgba(0,91,255,.65) 10deg 12deg,
      rgba(255,255,255,0) 12deg 20deg);
  /* keep only a ring slice */
  -webkit-mask: radial-gradient(circle,
      transparent 0 67%,
      #000 67% 74%,
      transparent 74% 100%);
  mask: radial-gradient(circle,
      transparent 0 67%,
      #000 67% 74%,
      transparent 74% 100%);
  animation: ledRun var(--ledSpeed) linear infinite;
}

@keyframes ledRun{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* === END LED RING === */
/* === MICRO-ZOOM (camera feel) === */
@keyframes wheelZoomIn{
  from{ transform: scale(.96); }
  to{ transform: scale(1); }
}
@keyframes wheelZoomOut{
  from{ transform: scale(1.02); }
  to{ transform: scale(1); }
}
#wheelBox.spinZoom{ animation: wheelZoomIn .22s ease-out 1; }
#wheelBox.stopZoom{ animation: wheelZoomOut .28s ease-out 1; }
/* === END MICRO-ZOOM === */

/* === WINNER COLOR LED LAP === */
#wheelBox{
  --winnerC1: rgba(0,246,255,.95);
  --winnerC2: rgba(0,91,255,.70);
}
#wheelBox.ledWinner .ledRing{
  /* one bright lap in the winner color, then JS removes this class */
  animation: ledRun .55s linear 1;
  filter: saturate(1.6) brightness(1.35) drop-shadow(0 0 18px rgba(255,255,255,.12))
          drop-shadow(0 0 26px var(--winnerC1))
          drop-shadow(0 0 44px var(--winnerC2));
  background:
    repeating-conic-gradient(from -90deg,
      rgba(255,255,255,0) 0deg 6deg,
      var(--winnerC1) 6deg 10deg,
      var(--winnerC2) 10deg 12deg,
      rgba(255,255,255,0) 12deg 20deg);
}
/* === END WINNER COLOR LED LAP === */



/* === FINAL SHOW SET (Winner capture + Shockwave + Parallax) === */

/* Parallax: FX layer rotates a bit faster while spinning */
@keyframes fxSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#wheelBox.spinning .wheelFx{
  opacity: .75;
  animation: fxSpin 1.35s linear infinite;
}

/* Winner color capture: rim + LED recolor briefly */
#wheelBox{
  --winnerC1: rgba(0,246,255,1);
  --winnerC2: rgba(0,91,255,1);
}
#wheelBox.stopFlash{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 24px var(--winnerC1),
    0 0 54px var(--winnerC2),
    inset 0 0 26px rgba(0,0,0,.35);
}

/* Shockwave ring */
#wheelBox .shockwave{
  position:absolute;
  inset:18px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transform: scale(.35);
  border: 2px solid rgba(255,255,255,.0);
  box-shadow: 0 0 18px rgba(0,0,0,0);
}
@keyframes shockWave{
  0%   { opacity:.85; transform: scale(.35); border-color: color-mix(in srgb, var(--winnerC1) 72%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--winnerC1) 55%, transparent); }
  70%  { opacity:.35; transform: scale(1.05); border-color: color-mix(in srgb, var(--winnerC2) 55%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--winnerC2) 35%, transparent); }
  100% { opacity:0;   transform: scale(1.18); border-color: transparent; box-shadow:none; }
}
#wheelBox.shock .shockwave{
  animation: shockWave .58s ease-out 1;
}

/* LED winner lap already exists; make it take winner colors */
#wheelBox .ledRing{
  background:
    repeating-conic-gradient(
      from -90deg,
      color-mix(in srgb, var(--winnerC1) 72%, transparent) 0deg 6deg,
      rgba(255,255,255,0) 6deg 12deg
    );
}
#wheelBox.spinning .ledRing{
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(0,246,255,.55) 0deg 6deg,
      rgba(255,255,255,0) 6deg 12deg
    );
}
#wheelBox.ledWinner .ledRing{
  background:
    repeating-conic-gradient(
      from -90deg,
      color-mix(in srgb, var(--winnerC1) 92%, white 8%) 0deg 7deg,
      rgba(255,255,255,0) 7deg 12deg
    );
}
/* === END FINAL SHOW SET === */