html,
body {
    margin: 0;
    padding: 0;
    font-family: Inter, system-ui, sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

#participants {
    scrollbar-width: thin;
    scrollbar-color: #3f3f46 transparent;
}

#participants::-webkit-scrollbar {
    width: 7px;
}

#participants::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 999px;
}

.player {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;

    border-bottom: 1px solid rgb(39 39 42);

    transition: background .15s;
}

.player:last-child {
    border-bottom: 0;
}

.player:hover {
    background: rgba(255, 255, 255, .025);
}

.player span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgb(228 228 231);

    font-size: .95rem;
}

.player button {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: rgb(161 161 170);

    transition: .15s;
}

.player button:hover {
    color: white;
    background: rgba(255,255,255,.06);
}

#wheel {
    width: 100%;
    height: 100%;

    overflow: visible;

    transition: transform 6s cubic-bezier(.15,.95,.15,1);

    filter:
        drop-shadow(0 20px 50px rgba(0,0,0,.55));

    pointer-events: none;
}

#wheelContent path {
    stroke: rgb(15 15 16);
    stroke-width: 2;
}

#wheelContent text {
    fill: white;

    font-size: 17px;
    font-weight: 600;

    letter-spacing: .2px;

    user-select: none;
    pointer-events: none;
}

#wheelContainer {
    width: min(600px, 80vw);
}

#pointer {
    width: 0;
    height: 0;

    margin-bottom: 18px;

    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 24px solid white;

    filter: drop-shadow(0 4px 12px rgba(255,255,255,.15));

    z-index: 20;
}

#winner {
    letter-spacing: -.02em;
}

#spinBtn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 1024px) {
    body > div {
        flex-direction: column;
        gap: 4rem;
    }

    aside {
        max-width: 100% !important;
    }

    #wheelContainer {
        max-width: 440px !important;
    }
}

@media (max-width: 640px) {
    #wheelContent text {
        font-size: 13px;
    }
}