/* =============================================
   Squash v2 — D3 Score Ring (3-segment)
   ============================================= */

.score-ring-svg {
    width: 100%;
    height: 100%;
}

/* All arc segments get a subtle shadow */
.score-ring-seg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

[data-theme="light"] .score-ring-seg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

/* Opponent segment — no shadow, dimmer */
.score-ring-seg--opp {
    filter: none;
    opacity: 0.7;
}

.score-ring-text {
    font-weight: 800;
    fill: var(--sv2-text);
    font-family: inherit;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}

.score-ring-serve {
    font-weight: 700;
    fill: #22c55e;
    font-family: inherit;
    letter-spacing: 0.06em;
}

.score-ring-serve-bg {
    fill: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .score-ring-serve-bg {
    fill: rgba(0, 0, 0, 0.75);
}

.score-ring-stat {
    font-weight: 600;
    fill: var(--sv2-text-dim);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.score-ring-stat--par {
    opacity: 0.7;
}

/* ============================================
   Mobile — ensure ring SVG fills available space
   ============================================ */
@media (max-width: 768px) {
    .score-ring-svg {
        max-width: 100%;
        max-height: 100%;
    }
}

/* Landscape mobile — compact stat labels */
@media (max-height: 500px) and (orientation: landscape) {
    .score-ring-stat,
    .score-ring-stat--par {
        font-size: 0.5rem;
    }
}