.scorebar {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
            radial-gradient(closest-side, #efefef 64%, transparent 66%),
            conic-gradient(#085596 75%, transparent 0);

    /* 0 and 100 should be at the bottom */
    transform: rotate(-136deg);
}

.scorebar progress {
    visibility: hidden;
    height: 0;
    width: 0;
}

.scorebar {
    --value: 0;
    --bg-value: #efefef;
    background:
            radial-gradient(closest-side, var(--bg-value) 64%, transparent 66%),
            conic-gradient(#085596 var(--value), #08559633 var(--evalue), #08559633 75%, transparent 75%);
}

.scorebar-on-white {
    --bg-value: #fff;
}

/* value: (data-value / 10 * 75) */
/* evalue: value + 0.3 */

.scorebar[data-value="10"] { --value: 75%; --evalue: 75.3%; }
.scorebar[data-value="9"] { --value: 67.5%; --evalue: 67.9%; }
.scorebar[data-value="8"] { --value: 60%; --evalue: 60.3%; }
.scorebar[data-value="7"] { --value: 52.5%; --evalue: 52.9%; }
.scorebar[data-value="6"] { --value: 45%; --evalue: 45.3%; }
.scorebar[data-value="5"] { --value: 37.5%; --evalue: 37.9%; }
.scorebar[data-value="4"] { --value: 30%; --evalue: 30.3%; }
.scorebar[data-value="3"] { --value: 22.5%; --evalue: 22.9%; }
.scorebar[data-value="2"] { --value: 15%; --evalue: 15.3%; }
.scorebar[data-value="1"] { --value: 7.5%; --evalue: 7.9%; }
.scorebar[data-value="0"] { --value: 0%; --evalue: 0.3%; }

.scorebar[data-value="0"] {
    background:
            radial-gradient(closest-side, #efefef 64%, transparent 66%),
            conic-gradient(#08559633 0%, #08559633 75%, transparent 75%)
}

.scorebar::before {
    transform: rotate(136deg);
    translate: 0 -1px;
    font-size: 28px;
    font-weight: bold;
    color: #085596;
}

.scorebar:has(progress):before {
    content: attr(score);
}