:root {
    --bullseye-size: 400px; /* Diameter of the outermost ring */
    --outline-thickness: 2px; /* Thickness of the outline */

    /* Dark Theme Colors */
    --medium-dark-bg: #393E46; /* Dark grey */
    --border-color: #4A4A4A;   /* Darker border color */

    /* Bullseye Dark Mode Colors */
    --bullseye-dark-green-dm: #002d10;
    --bullseye-light-green-dm: #1A7057;
    --bullseye-center-green-dm: #1A7057;
    --bullseye-bg-semi-transparent-dm: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    --fully-transparent-bg-dm: rgba(0, 0, 0, 0); /* Fully transparent background */
    --bullseye-outline-dm: #6AFFAF;    /* Bright minty outline */
    --bullseye-axes-trace-dm: #1A8F7F;

}

.category-names-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; /* Ensure it's above the bullseye rings */
    overflow: visible;
}

.graph-cat-name {
    font-size: 9px;
    fill: var(--light-grey-text, #EEEEEE);
    /* shadow to make outline */
    text-shadow: 
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
        1.5px  1.5px 0 #000,
        0px  2px 3px rgba(0,0,0,0.5);
}

.category-warning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20; /* Higher than other elements */
    opacity: 0; /* Hidden by default */
}

.warning-text {
    font-size: 12px;
    fill: var(--light-grey-text, #EEEEEE);
    text-anchor: middle; /* Centers text horizontally */
    dominant-baseline: middle; /* Centers text vertically */
    /* shadow to make outline */
    text-shadow: 
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
        1.5px  1.5px 0 #000,
        0px  2px 3px rgba(0,0,0,0.5);
}

.category-warning.show {
    opacity: 1; /* Visible when 'show' class is added */
}

.bullseye-container {
    position: relative;
    padding-left: 140px;
    padding-right: 140px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px; 
    /* border: 1px solid var(--border-color); */
    background-color: var(--bullseye-bg-semi-transparent-dm);
    border-radius: 40px;
    box-shadow: inset 0 0 50px var(--fully-transparent-bg-dm);
    box-sizing: border-box;
    flex-shrink: 0;
}

.bullseye-shape-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through to elements behind it */
    overflow: visible;
}

#bullseyeShapeOverlay polygon {
    stroke: var(--bullseye-axes-trace-dm);
    stroke-width: 1.5;
    fill: transparent; /* Or a semi-transparent fill */
}

#bullseyeShapeOverlay line {
    stroke: var(--bullseye-axes-trace-dm);
    stroke-width: 1.5;
}

.bullseye {
    position: relative;
    width: var(--bullseye-size);
    height: var(--bullseye-size);
    border-radius: 50%;
    background-color: var(--bullseye-dark-green-dm); /* DARK MODE */
    border: var(--outline-thickness) solid var(--bullseye-outline-dm); /* DARK MODE */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: visible;
}

.ring { /* Common styles for all inner rings */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.bullseye .ring1 {
    width: calc(var(--bullseye-size) * 0.75);
    height: calc(var(--bullseye-size) * 0.75);
    background-color: var(--bullseye-light-green-dm); /* DARK MODE */
}

.bullseye .ring2 {
    width: calc(var(--bullseye-size) * 0.5);
    height: calc(var(--bullseye-size) * 0.5);
    background-color: var(--bullseye-dark-green-dm); /* DARK MODE */
}

.bullseye .ring3 {
    width: calc(var(--bullseye-size) * 0.25);
    height: calc(var(--bullseye-size) * 0.25);
    background-color: var(--bullseye-center-green-dm); /* DARK MODE */
}