.shot-chart-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}
.shot-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shot-chart-legend-color {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
}
.shot-chart-court-container {
    display: flex;
    justify-content: center;
    height: 470px;
}
.shot-chart-zone-label {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
    fill: white;
    pointer-events: none; /* Make text non-interactive */
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.shot-chart-percentage-text {
    font-size: 18px;
    font-weight: bold;
    text-anchor: middle;
    fill: white;
    pointer-events: none; /* Make text non-interactive */
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.shot-chart-court-line {
    stroke: #1a1a1a;
    stroke-width: 2;
    fill: none;
}
.shot-chart-zone-area {
    stroke: none; /* No stroke on the colored areas themselves */
    opacity: 0.85;
}