.gardone .ui-wheel-of-fortune {
    all: unset;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    direction: ltr;
    display: grid;
    position: absolute;
    /* تغییر به absolute */
    top: 50%;
    /* وسط صفحه عمودی */
    left: 50%;
    /* وسط صفحه افقی */
    transform: translate(-50%, -50%);
    /* جابجایی برای دقیقاً وسط قرار گرفتن */
    width: 25%;
    border: 10px solid red;
    /* نوار قرمز دور گردونه */
    border-radius: 50%;
    /* گرد کردن گوشه‌ها */
}

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

@media only screen and (max-width: 600px) {
    .gardone .ui-wheel-of-fortune {
        width: 80%;
    }

    .gardone .ui-wheel-of-fortune li {
        font-size: 8px;
    }
}

.gardone .ui-wheel-of-fortune::after {
    aspect-ratio: 1/cos(30deg);
    content: "";
    height: 10cqi;
    position: absolute;
    place-self: center start;
    scale: 1.4;
    rotate: -90deg;
    background-image: url('../img/spins.png');
    /* جایگزینی تصویر */
    background-size: cover;
    /* برای پوشاندن کامل مثلث */
    width: 10cqi;
    /* تنظیم اندازه تصویر */
    margin-left: -35px;
}


.gardone .ui-wheel-of-fortune>* {
    position: absolute;
}

.gardone .ui-wheel-of-fortune button {
    aspect-ratio: 1 / 1;
    background: #570000;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 5cqi;
    place-self: center;
    width: 20cqi;
}

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

/* رنگ قرمز برای خونه‌های فرد */
.gardone .ui-wheel-of-fortune li:nth-child(odd) {
    background: #cd0f00;
}

/* رنگ زرد برای خونه‌های زوج */
.gardone .ui-wheel-of-fortune li:nth-child(even) {
    background: #ffee9a;
    color: black;
}


.gardone .ui-wheel-of-fortune * {
    box-sizing: border-box;
}