:root {
 --segment-width: 12%;
 --segment-height: 40%;
}

#disk_mask {
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    background-color: rgb(236, 236, 236);
    border: 8px inset rgb(125, 0, 77);
}

#close_disk {
    height: fit-content;
    padding: 20px 40px;
    flex-grow: 0;
}

#disk_container {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#disk {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

#center_circle {
    position: absolute;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: rgb(236, 236, 236);
    z-index: 3;
}

.subsegment {
    border: 1px solid black;
    background-color: rgb(18, 179, 168);
    width: 50%;
    height: 100%;
}

.supersegment {
    position: absolute;
    display: flex;
    flex-direction: row;
    transform-origin: 50% 150%; /* Pivot point for rotation: bottom center of the segment */
    box-sizing: border-box;
    border: 1px solid black; /* Outer black outline */
    z-index: 2;
    width: var(--segment-width);
    height: var(--segment-height);
    left: calc(50% - calc(1/2*var(--segment-width)));
    bottom: calc(50% + calc(1/2*var(--segment-height)));

    /* Clip-path for the trapezoidal/sector shape */
    /* This creates a trapezoid (or a slice if visualized from the center) */
    /* Adjust these percentages based on desired segment width and inner/outer radii */
    clip-path: polygon(
        0% 0%,       /* Top-left */
        100% 0%,      /* Top-right */
        70% 100%,     /* Bottom-right, indented */
        30% 100%      /* Bottom-left, indented */
    );
}