.ui-wheel-of-fortune {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 35vw;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  min-width: 200px;
}

.ui-wheel-of-fortune ul {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.ui-wheel-of-fortune button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

:where(.ui-wheel-of-fortune) {
  --_items: 12;
  all: unset;
  aspect-ratio: 1/calc(2*tan(180deg/var(--_items)));
  container-type: inline-size;
  direction: ltr;
  display: grid;
  position: relative;
  width: 100%;
  width: 600px;
  height: 100%;
}

:where(.ui-wheel-of-fortune)::after {
  aspect-ratio: 1/cos(30deg);
  background-color: crimson;
  clip-path: polygon(50% 100%,100% 0,0 0);
  content: "";
  height: 4cqi;
  position: absolute;
  place-self: start center;
  scale: 1.4;
}

:where(.ui-wheel-of-fortune) > * {
  position: absolute;
}

:where(.ui-wheel-of-fortune) button {
  aspect-ratio: 1 / 1;
  background: hsla(0, 0%, 100%, .8);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 5cqi;
  place-self: center;
  width: 20cqi;
}

:where(.ui-wheel-of-fortune) ul {
  all: unset;
  clip-path: inset(0 0 0 0 round 50%);
  display: grid;
  inset: 0;
  place-content: center start;
}

:where(.ui-wheel-of-fortune) ul li {
  align-content: center;
  aspect-ratio: 1 / calc(2 * tan(180deg / var(--_items)));
  background: hsl(calc(360deg / var(--_items) * calc(var(--_idx))), 100%, 75%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  display: grid;
  font-size: 5cqi;
  grid-area: 1 / -1;
  padding-left: 1ch;
  rotate: calc(360deg / var(--_items) * calc(var(--_idx) - 1));
  transform-origin: center right;
  user-select: none;
  width: 50cqi;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(1) {
  --_idx: 1;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(2) {
  --_idx: 2;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(3) {
  --_idx: 3;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(4) {
  --_idx: 4;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(5) {
  --_idx: 5;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(6) {
  --_idx: 6;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(7) {
  --_idx: 7;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(8) {
  --_idx: 8;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(9) {
  --_idx: 9;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(10) {
  --_idx: 10;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(11) {
  --_idx: 11;
}

:where(.ui-wheel-of-fortune) ul li:nth-of-type(12) {
  --_idx: 12;
}