/* ═══════════════════════════════════════════════════════════════
   SCORE-RING.CSS — v2 Premium score rings
   Thicker strokes, minimum sizes, draw animation.
   ═══════════════════════════════════════════════════════════════ */

.rl-score-ring {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Sizes */
.rl-score-ring--sm { width: var(--rl-ring-sm-size); height: var(--rl-ring-sm-size); }
.rl-score-ring--md { width: var(--rl-ring-md-size); height: var(--rl-ring-md-size); }
.rl-score-ring--lg { width: var(--rl-ring-lg-size); height: var(--rl-ring-lg-size); }
.rl-score-ring--xl { width: var(--rl-ring-xl-size); height: var(--rl-ring-xl-size); }

.rl-score-ring__svg {
  width: 100%;
  height: 100%;
}

/* Track — background ring */
.rl-score-ring__track {
  fill: none;
  stroke: var(--rl-score-track);
}

/* Fill — progress arc */
.rl-score-ring__fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--rl-ease-out);
}

/* Strokes per size (override via attribute or class) */
.rl-score-ring--sm .rl-score-ring__track,
.rl-score-ring--sm .rl-score-ring__fill { stroke-width: var(--rl-ring-sm-stroke); }
.rl-score-ring--md .rl-score-ring__track,
.rl-score-ring--md .rl-score-ring__fill { stroke-width: var(--rl-ring-md-stroke); }
.rl-score-ring--lg .rl-score-ring__track,
.rl-score-ring--lg .rl-score-ring__fill { stroke-width: var(--rl-ring-lg-stroke); }
.rl-score-ring--xl .rl-score-ring__track,
.rl-score-ring--xl .rl-score-ring__fill { stroke-width: var(--rl-ring-xl-stroke); }

/* Semaphore colors — saturated */
.rl-score-ring--green .rl-score-ring__fill { stroke: var(--rl-score-green); }
.rl-score-ring--amber .rl-score-ring__fill { stroke: var(--rl-score-amber); }
.rl-score-ring--red .rl-score-ring__fill   { stroke: var(--rl-score-red); }

/* Value overlay */
.rl-score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.rl-score-ring--sm .rl-score-ring__number { font-size: var(--rl-ring-sm-font); }
.rl-score-ring--md .rl-score-ring__number { font-size: var(--rl-ring-md-font); }
.rl-score-ring--lg .rl-score-ring__number { font-size: var(--rl-ring-lg-font); }
.rl-score-ring--xl .rl-score-ring__number { font-size: var(--rl-ring-xl-font); }

.rl-score-ring__number {
  font-family: var(--rl-font-display);
  font-weight: 700;
  color: var(--rl-ink);
}

.rl-score-ring__max {
  font-size: 0.6em;
  font-weight: var(--rl-fw-medium);
  color: var(--rl-ink-muted);
}

/* Draw animation */
.rl-score-ring--animated .rl-score-ring__fill {
  stroke-dashoffset: var(--rl-ring-circumference);
}

.rl-score-ring--animated.rl-score-ring--visible .rl-score-ring__fill {
  stroke-dashoffset: var(--rl-ring-target-offset);
}

/* Score label below ring */
.rl-score-ring__label {
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-fw-medium);
  color: var(--rl-ink-muted);
  margin-top: var(--rl-space-2xs);
}