.metric-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;	
}


.metric-card {
    background: #fff;
    border-radius: 8px;
    flex: 1 1 450px;
    padding: 14px 16px 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    max-width: 425px;
    min-width: 425px;
    box-sizing: border-box;   
    height: auto;
    min-height: 200px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;    
}

/* initial state: hidden & shifted down */
.metric-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* visible state */
.metric-card.visible {
    opacity: 1;
    transform: translateY(0);
}



.metric-card h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 6px;
}

.metric-bar {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: 8px;

    margin: 6px 0;
    font-size: 0.85rem;
}


.metric-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.metric-value {
    text-align: right;
    font-weight: 600;
    color: #222;
}


.metric-bar-fill {
    height: 11px;
    border-radius: 4px;
    opacity: 0.85;
    transition: width 0.4s ease, opacity 0.3s ease;
}


.metric-bar > div {
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}


.metric-bar-fill.metric-bar-positive {
    background: #444;
}

.metric-bar-fill.metric-bar-negative {
    background: #CC0000;
}

.metric-bar-fill.metric-bar-positive,
.metric-bar-fill.metric-bar-negative {
    transition: width 0.7s ease, opacity 0.7s ease;;
}

.metric-note {
	font-size: 0.6em;
	font-style: italic;
	margin-bottom: 8px;
    font-weight: 500;
    color: #444;
}


#composition-card .composition-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px; /* match SVG height or more for padding */
}

.composition-chart {
    width: 100%;
    height: 250px;        /* ensures card expands */
    display: flex;
    justify-content: center;
    align-items: center;   /* vertically center the SVG */
}

.composition-legend {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 0.7em/
}

.composition-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.composition-legend-color {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 2px;
}


.discipline-note {
    margin-top: 8px;
    color: #666;
    font-size: 0.75em;
    line-height: 1.2em;
}


/* ---------- Explanation Text ---------- */
.explanation-text {
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.5em;
    max-width: 900px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;    
}

/* Highlight dynamic values (position, percentages, components) */
.explanation-text .position-name,
.explanation-text .defence-percentage,
.explanation-text .attack-percentage,
.explanation-text .defence-components,
.explanation-text .attack-components {
    font-weight: bold;
    color: #000;  /* or use brand color if you prefer */
}

/* Optional: small emphasis for negative factors */
.explanation-text .negative-metrics {
    color: #CC0000;
    font-weight: bold;
}


/* When ready to show */
.explanation-text.show {
    opacity: 1;
    transform: translateY(0);
}



@media (max-width: 1000px) {
    .metric-card {
        flex: 1 1 100%; /* full width on small screens */
    }
}