/* FREIHEITSPILOT — Freiheits-Check: Score-Gauge + Ergebnis-Zusatzelemente.
   Nur additive Styles fuer check.html. Basis (check-shell/-step/-opt/.form/
   .glass/.tag/.disclaimer) liegt in main.css/sections.css und bleibt unberuehrt.
   Motion ausschliesslich compositor-friendly (opacity/transform) + stroke-dashoffset
   fuer den Gauge-Draw; prefers-reduced-motion via html.no-motion abgefangen. */

/* ---------- Ergebnis-Kopf: Gauge + Meta ---------- */
.score-block {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.4rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 2.6rem);
}
.score-block__meta {
  display: grid;
  gap: 0.7rem;
  align-content: center;
  min-width: min(100%, 15rem);
  flex: 1 1 15rem;
}
.score-block__meta .tag { margin-bottom: 0; }
.score-block__hint {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--paper-muted);
  max-width: 34ch;
}

/* ---------- Tier-Badge ---------- */
.score-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: start;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid var(--line-dark);
  color: var(--gold-300);
  background: rgba(233, 196, 106, 0.08);
}
.score-tier::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(233, 196, 106, 0.14);
}
.score-tier--nurture {
  color: var(--paper-muted);
  border-color: var(--line-dark-soft);
  background: rgba(17, 29, 53, 0.5);
}
.score-tier--nurture::before { box-shadow: 0 0 0 4px rgba(151, 161, 184, 0.12); }

/* ---------- Score-Gauge (SVG-Ring) ---------- */
.score-gauge {
  position: relative;
  width: clamp(140px, 34vw, 176px);
  aspect-ratio: 1;
  flex: none;
}
.score-gauge svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);   /* Start am oberen Scheitel */
}
.score-gauge__track {
  fill: none;
  stroke: var(--line-dark-soft);
  stroke-width: 12;
}
.score-gauge__ring {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 12;
  stroke-linecap: round;
  /* Startwert; JS setzt dasharray/offset. Ohne JS bleibt der Ring leer,
     die Zahl (0) und das Tier-Label tragen die Aussage. */
  stroke-dashoffset: 528;
  stroke-dasharray: 528;
  transition: stroke var(--dur-med) var(--ease-out);
}
.score-gauge__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
}
.score-gauge__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  font-weight: 500;
  color: var(--paper);
}
.score-gauge__den {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--paper-faint);
}

/* Tier-Faerbung des Rings + der Zahl */
.score-gauge.is-hot .score-gauge__ring { stroke: var(--gold-400); }
.score-gauge.is-hot .score-gauge__num { color: var(--gold-300); }
.score-gauge.is-warm .score-gauge__ring { stroke: var(--gold-500); }
.score-gauge.is-nurture .score-gauge__ring { stroke: var(--paper-faint); }
.score-gauge.is-nurture .score-gauge__num { color: var(--paper-muted); }

/* ---------- Formular-Feinschliff ---------- */
.check-result .form label .opt {
  color: var(--paper-faint);
  font-weight: 400;
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .score-block { flex-direction: column; align-items: flex-start; text-align: left; }
  .score-block__meta { min-width: 100%; }
}