:root {
    --clr-smkid1: #0F88BF;
    --clr-smkid2: #1D2D49;

    --clr-wheelItem1: #303DEB;
    --clr-wheelItem2: #79218F;
    --clr-wheelItem3: #F6DA65;
    --clr-wheelItem4: #E63F47;
    --clr-wheelItem5: #0ED280;
    --clr-wheelItem6: #FC7323;
    --clr-wheelItem7: #008735;
    --clr-wheelItem8: #171749;

    /* controlled by main.js */
    --n: -1;
    --spin-duration: -1;

    /* spins */
    --spin: -1;
    --spin1: cubic-bezier(0.12, 0.85, 0.18, 1);
    --spin2: cubic-bezier(0.08, 0.92, 0.25, 1);
    --spin3: cubic-bezier(0.12, 0.9, 0.02, 1);
    --spin4: cubic-bezier(0.05, 0.98, 0.01, 1);
    --total-spins: 4;
}

#item {
    position: relative;
    z-index: 100;

    --size: 1.25rem;
    margin-bottom: calc(var(--size)*0.2);

    &::after {
        content: '';
        height: var(--size);
        width: var(--size);
        background-color: #1D2D49;
        position: absolute;
        bottom: calc(-1 * var(--size) / 2);
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

#wheel {
    --width: min(80dvh, 100%);

    aspect-ratio: 1/1;
    width: var(--width);
    user-select: none;
    transition: transform var(--spin-duration) var(--spin);
    transform: rotate(0deg);

    &[data-spinning] {
        cursor: not-allowed;
    }

    div {
        overflow: hidden;
        height: 50%;
        width: calc(pi * var(--width) / var(--n) + 5px);
        position: absolute;
        clip-path: polygon(100% 0, 50% 100%, 0 0);
        display: flex;
        justify-content: center;
        transform-origin: bottom;
        left: 50%;


        span {
            display: block;
            margin-top: 1.5em;
            text-wrap: pretty;
            writing-mode: vertical-rl;
            color: white;
            font-size: 0.6em;
            font-weight: 500;
            max-height: 35ch;
        }
    }
}