:root {
    /* --wuxing-wood: #4CAF50;
    --wuxing-fire: #F44336;
    --wuxing-earth: #FFC107;
    --wuxing-metal: #9E9E9E;
    --wuxing-water: #2196F3;  */

    --color-wood: #4CAF50;
    --color-fire: #F44336;
    --color-earth: #795548;
    --color-metal: #607D8B;
    --color-water: #2196F3;
    }
    
    #wuxing-svg {
        max-width: 100%;
        max-height: 100%; 
        margin: 0 auto;
    }

    .tenGods {
        font-size: 12px;
        fill: #7d7676;
    }

/* Круг баланса ИНЬ/ЯН */

    .center-circle {
        fill: none;
        stroke: #626161;
        stroke-width: 1;
        opacity: 0.8;
    }

    .fill-center {
        opacity: 0.5;
    }
    
    .fill-in {fill: #007bff;}
    .fill-yan {fill: #f44336;}
    
    .fill-yan:hover { opacity: 0.9; fill: #ef5350; }
    .fill-in:hover { opacity: 0.9; fill: #64b5f6; }

        
/* линии пораждения */
    .cycle-line {
        stroke: #bbb;
        stroke-width: 1.5;
        fill: none;
    }
    .cycle-arrow {fill: #bbb}

/* линии угнетения */
    .pentagram-line {
        stroke: #e5c0c0;
        stroke-width: 1;
        stroke-dasharray: 3,3;
        fill: none;
    }
    .pentagram-arrow {fill: #e5c0c0;}


/* Круги 5 стихий */
    .element-circle {
        fill: #fffcf6;
        stroke-width: 2.5;
    }

    .wave-divider {
        stroke-width: 1;
        fill: none;
    }

    .right-half {opacity: 0.1;}
    .fill-percent {opacity: 0.5;}

    .corner-var {
        font-size: 14px;
        pointer-events: none;
        text-anchor: middle;
        dominant-baseline: middle;
    }

    .top-left-var {transform: translate(-15px, -15px);}
    .top-right-var {transform: translate(25px, -15px);}
    .bottom-left-var {transform: translate(-25px, 15px);}
    .bottom-right-var {transform: translate(15px, 15px);}


.left-half {
    cursor: pointer;
    transition: opacity 0.3s;
    fill: var(--bg-color);
}

.right-half {
    cursor: pointer;
    transition: opacity 0.3s;
}

.left-half:hover,
.right-half:hover {
    opacity: 0.2 !important;
}

.wuxing-tooltip {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    pointer-events: none;
    z-index: 100;
    min-width: 150px;
    box-shadow: var(--box-shadow);
}

.tooltip-title {
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid #555;
    padding-bottom: 4px;
}

.tooltip-item {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}

.tooltip-item.current {
    color: #ffcc00;
    font-weight: bold;
}

.element-name {
    margin-right: 10px;
}

.element-percent {
    font-weight: bold;
}