.v33-wheel .wheel-orb {
  position: relative !important;
  width: 360px !important;
  height: 360px !important;
  margin: 24px auto 30px !important;
  overflow: hidden !important;

  border:
    3px solid #d4ad19 !important;

  border-radius: 50% !important;

  box-shadow:
    0 0 0 1px rgba(255,220,80,.25),
    0 16px 38px rgba(0,0,0,.42),
    0 0 34px rgba(212,173,25,.09);
}

/*
 * Hide the original bundled wheel label layer.
 * The V2 override supplies the literal ticket slots.
 */
.v33-wheel
.wheel-orb
> div:first-child:not(.jwf-v2-label-layer):not(.jwf-v2-hub) {
  display: none !important;
}

/*
 * Fixed winner pointer.
 * It stays still while the wheel is the moving object.
 */
.v33-wheel .wheel-orb::before {
  content: "";
  position: absolute;
  z-index: 20;
  left: 50%;
  top: -1px;

  width: 0;
  height: 0;

  transform:
    translateX(-50%);

  border-left:
    14px solid transparent;

  border-right:
    14px solid transparent;

  border-top:
    30px solid #ffe268;

  filter:
    drop-shadow(
      0 2px 3px rgba(0,0,0,.85)
    );

  pointer-events: none;
}

.jwf-v2-label-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;

  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

/*
 * Wallet ID on each physical ticket slot.
 * Used only when there are <= 12 slots.
 */
.jwf-v2-slot-label {
  position: absolute;

  left: 50%;
  top: calc(50% - 10px);

  width: 46%;
  height: 20px;

  transform-origin:
    0 50%;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding-right: 18px;

  pointer-events: none;
}

.jwf-v2-slot-label span {
  display: inline-block;

  max-width: 92px;
  padding: 3px 6px;

  border-radius: 5px;

  background:
    rgba(0,0,0,.44);

  color: #fff;

  font-size: 10px;
  font-weight: 900;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-shadow:
    0 1px 2px #000;
}

/*
 * Center cap: makes the object read as an actual
 * wheel rather than a pie/data visualization.
 */
.jwf-v2-hub {
  position: absolute;

  z-index: 10;

  left: 50%;
  top: 50%;

  width: 112px;
  height: 112px;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    3px solid #d4ad19;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      #292313,
      #090806 68%
    );

  box-shadow:
    0 4px 16px rgba(0,0,0,.6),
    inset 0 0 20px rgba(212,173,25,.08);

  color: #ffe268;

  text-align: center;

  pointer-events: none;
}

.jwf-v2-hub strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .04em;
}

.jwf-v2-hub span {
  margin-top: 7px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #f4e3a0;
}

.jwf-v2-wheel-meta {
  max-width: 700px;

  margin:
    -5px auto 14px;

  padding:
    8px 12px;

  border:
    1px solid rgba(212,173,25,.35);

  border-radius: 8px;

  color: #cdbd78;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;

  text-align: center;
}

.jwf-v2-policy {
  margin: 10px 0 15px;

  padding: 10px 12px;

  border:
    1px solid #745719;

  border-radius: 9px;

  font-size: 11px;
  line-height: 1.5;
}

@media(max-width:760px) {
  .v33-wheel .wheel-orb {
    width: 280px !important;
    height: 280px !important;

    margin:
      20px auto 26px !important;
  }

  .jwf-v2-hub {
    width: 92px;
    height: 92px;
  }

  .jwf-v2-hub strong {
    font-size: 13px;
  }

  .jwf-v2-slot-label {
    padding-right: 12px;
  }

  .jwf-v2-slot-label span {
    max-width: 70px;
    padding: 2px 4px;
    font-size: 8px;
  }
}

/* ==========================================================
   JWF literal-ticket wheel positioning correction
   The original bundle styles .wheel-orb child DIVs.
   Force the V2 overlay and hub to own their geometry.
   ========================================================== */

.v33-wheel .wheel-orb
> div:not(.jwf-v2-label-layer):not(.jwf-v2-hub) {
  display: none !important;
}


/* Full-wheel transparent ticket-label overlay */
.v33-wheel .wheel-orb
> .jwf-v2-label-layer {
  position: absolute !important;

  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: hidden !important;

  z-index: 6 !important;

  pointer-events: none !important;
}


/* Each label arm starts at the exact center */
.v33-wheel .wheel-orb
> .jwf-v2-label-layer
> .jwf-v2-slot-label {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  right: auto !important;
  bottom: auto !important;

  width: 46% !important;
  height: 20px !important;

  margin: -10px 0 0 0 !important;
  padding: 0 16px 0 0 !important;

  transform-origin: 0 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;

  pointer-events: none !important;
}


/* Wallet text itself */
.v33-wheel .wheel-orb
.jwf-v2-slot-label > span {
  position: static !important;

  display: inline-block !important;

  width: auto !important;
  height: auto !important;
  max-width: 82px !important;

  margin: 0 !important;
  padding: 3px 5px !important;

  border: 0 !important;
  border-radius: 5px !important;

  background:
    rgba(0, 0, 0, .58) !important;

  box-shadow: none !important;

  color: #fff !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* Actual center hub — force exact wheel center */
.v33-wheel .wheel-orb
> .jwf-v2-hub {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  right: auto !important;
  bottom: auto !important;

  width: 104px !important;
  height: 104px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform:
    translate(-50%, -50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  border:
    3px solid #d4ad19 !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #292313,
      #090806 68%
    ) !important;

  box-shadow:
    0 4px 16px rgba(0,0,0,.65),
    inset 0 0 18px rgba(212,173,25,.10) !important;

  overflow: hidden !important;

  color: #ffe268 !important;

  text-align: center !important;

  z-index: 14 !important;

  pointer-events: none !important;
}


.v33-wheel .wheel-orb
> .jwf-v2-hub > strong,
.v33-wheel .wheel-orb
> .jwf-v2-hub > span {
  position: static !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


.v33-wheel .wheel-orb
> .jwf-v2-hub > strong {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  color: #ffe268 !important;
}


.v33-wheel .wheel-orb
> .jwf-v2-hub > span {
  margin-top: 7px !important;

  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;

  color: #f4e3a0 !important;
}


@media(max-width:760px) {
  .v33-wheel .wheel-orb
  > .jwf-v2-hub {
    width: 86px !important;
    height: 86px !important;
  }

  .v33-wheel .wheel-orb
  .jwf-v2-slot-label > span {
    max-width: 62px !important;
    font-size: 7px !important;
  }
}


/* JWF replay history control */
.jwf-replay-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.jwf-replay-select,
.jwf-replay-button {
  min-height: 38px;
  border: 1px solid #745719;
  border-radius: 7px;
  background: #0d0c08;
  color: #f2d75c;
  font: inherit;
  font-weight: 800;
}

.jwf-replay-select {
  flex: 1;
  padding: 0 10px;
}

.jwf-replay-button {
  padding: 0 14px;
  cursor: pointer;
}

.jwf-replay-button:hover {
  border-color: #d4ad19;
}

.jwf-replay-link {
  display: none !important;
}

@media(max-width:760px) {
  .jwf-replay-controls {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ==========================================================
   FINAL JWF WALLET-PROPORTIONAL WHEEL
   One wallet = one contiguous colored section.
   Ticket count controls section size only.
   ========================================================== */

.v33-wheel .wheel-orb {
  position: relative !important;

  width: 360px !important;
  height: 360px !important;

  margin: 24px auto 30px !important;

  overflow: hidden !important;

  border:
    3px solid #d4ad19 !important;

  border-radius:
    50% !important;

  box-shadow:
    0 0 0 1px rgba(255,220,80,.22),
    0 14px 34px rgba(0,0,0,.42) !important;
}


/* Kill the old ticket-by-ticket junk and badge. */
.v33-wheel .wheel-orb
> div:not(.jwf-v2-label-layer) {
  display: none !important;
}

.v33-wheel .jwf-v2-hub,
.v33-wheel .jwf-v2-wheel-meta,
.v33-wheel .jwf-v2-slot-label {
  display: none !important;
}


/* Wallet labels only. */
.v33-wheel .wheel-orb
> .jwf-v2-label-layer {
  display: block !important;

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: hidden !important;

  z-index: 6 !important;

  pointer-events: none !important;
}


.v33-wheel .wheel-orb
.jwf-v2-slice-label {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 46% !important;
  height: 22px !important;

  margin:
    -11px 0 0 0 !important;

  padding:
    0 8px 0 38px !important;

  transform-origin:
    0 50% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;

  pointer-events: none !important;
}


.v33-wheel .wheel-orb
.jwf-v2-slice-label > span {
  position: static !important;

  display: inline-block !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 3px 5px !important;

  border: 0 !important;
  border-radius: 4px !important;

  background:
    rgba(0,0,0,.34) !important;

  box-shadow: none !important;

  color: #fff !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  text-shadow:
    0 1px 2px #000,
    0 0 4px #000 !important;
}


/* Fixed winner pointer. */
.v33-wheel .wheel-orb::before {
  content: "";

  position: absolute;

  z-index: 20;

  left: 50%;
  top: -1px;

  width: 0;
  height: 0;

  transform:
    translateX(-50%);

  border-left:
    14px solid transparent;

  border-right:
    14px solid transparent;

  border-top:
    28px solid #ffe268;

  filter:
    drop-shadow(
      0 2px 3px rgba(0,0,0,.85)
    );

  pointer-events: none;
}


/* Tiny real center pin. No badge. No text. */
.v33-wheel .wheel-orb::after {
  content: "";

  position: absolute;

  z-index: 15;

  left: 50%;
  top: 50%;

  width: 28px;
  height: 28px;

  transform:
    translate(-50%, -50%);

  border:
    2px solid #d4ad19;

  border-radius:
    50%;

  background:
    #11100c;

  box-shadow:
    0 2px 6px rgba(0,0,0,.75);

  pointer-events: none;
}


@media(max-width:760px) {
  .v33-wheel .wheel-orb {
    width: 280px !important;
    height: 280px !important;
  }

  .v33-wheel .wheel-orb
  .jwf-v2-slice-label {
    padding-left:
      31px !important;
  }

  .v33-wheel .wheel-orb
  .jwf-v2-slice-label > span {
    font-size:
      9px !important;
  }

  .v33-wheel .wheel-orb::after {
    width: 22px;
    height: 22px;
  }
}