:where(.ui-wheel-of-fortune) {
  --_items: 12;
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  direction: ltr;
  display: grid;
  position: relative;
  width: 95vh;
  max-width: 95vw;
  margin: auto;
  &::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;
  }

  & > * { position: absolute; }

  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;
  }

  ul {
    all: unset;
    clip-path: inset(0 0 0 0 round 50%);
    display: grid;
    inset: 0;
    place-content: center start;

    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;

      &:nth-of-type(1) { --_idx: 1; background: #FF5252; }
      &:nth-of-type(2) { --_idx: 2; background: #FF9800; }
      &:nth-of-type(3) { --_idx: 3; background: #FFEB3B; }
      &:nth-of-type(4) { --_idx: 4; background: #8BC34A; }
      &:nth-of-type(5) { --_idx: 5; background: #4CAF50; }
      &:nth-of-type(6) { --_idx: 6; background: #009688; }
      &:nth-of-type(7) { --_idx: 7; background: #03A9F4; }
      &:nth-of-type(8) { --_idx: 8; background: #2196F3; }
      &:nth-of-type(9) { --_idx: 9; background: #3F51B5; }
      &:nth-of-type(10) { --_idx: 10; background: #673AB7; }
      &:nth-of-type(11) { --_idx: 11; background: #9C27B0; }
      &:nth-of-type(12) { --_idx: 12; background: #E91E63; }
    }
  }
}

/* for demo */
* { box-sizing: border-box; }
body {
	font-family: system-ui, sans-serif;
	padding: 0;
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}