:where(.ui-wheel-of-fortune) {
    --_items: 5;
    all: unset;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    direction: ltr;
    display: grid;
    position: relative;
    width: 300px;
    font-weight: bold;
    &::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-spin {
      aspect-ratio: 1 / 1;
      background: hsla(0, 0%, 100%, .8);
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      font-size: 5cqi;
      text-align: center;
      place-self: center;
      width: 23cqi;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    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%);
        background: rgb(0,0,0);
        color: white;
        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; }
        &:nth-of-type(2) { --_idx: 2; }
        &:nth-of-type(3) { --_idx: 3; }
        &:nth-of-type(4) { --_idx: 4; }
        &:nth-of-type(5) { --_idx: 5; }
        &:nth-of-type(6) { --_idx: 6; }
        &:nth-of-type(7) { --_idx: 7; }
        &:nth-of-type(8) { --_idx: 8; }
        &:nth-of-type(9) { --_idx: 9; }
        &:nth-of-type(10) { --_idx: 10; }
        &:nth-of-type(11) { --_idx: 11; }
        &:nth-of-type(12) { --_idx: 12; }
      }
      li:nth-child(odd){
        background: rgb(246, 189, 4);
        color: black;
      }
      li:nth-child(4){position: relative;}
      li:nth-child(5):after{
        content: "";
              display: block;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              position: absolute;
              background-color: black;
        clip-path: polygon(0% 0.2%, 98% 0%, 100% 50%);
      }
    }
  }
  .spining .wheel-info{display: none;}
  .spining #wheel-message{width: 280px; font-weight: bold; margin: auto; text-align: center;}
  @media screen and (max-width: 767px){
    .spining #wheel-message{width: 100%;}
  }