/* ============================================================
   Telemetry: Apple-Watch-style activity rings, trace, meters, dims
   ============================================================ */
.score-panel { align-items: center; gap: var(--s-3); background: var(--well);
  border-color: var(--well-edge); box-shadow: var(--sh-hero); }
/* luminous halo bloom behind the instrument */
.score-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--glow-hero); z-index: 0; }
.score-panel > * { position: relative; z-index: 1; }

/* ---------- Activity rings ---------- */
.rings-wrap { position: relative; width: min(272px, 84%); aspect-ratio: 1; margin-top: var(--s-3);
  display: grid; place-items: center; }
.rings-wrap::before { content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, oklch(70% 0.18 150 / 0.12), transparent 68%); filter: blur(4px); }
.rings { width: 100%; height: 100%; position: relative; }
/* outer tick scale — turns the gauge into a real instrument dial */
.ring-ticks { fill: none; stroke: var(--hairline-strong); stroke-width: 5; stroke-dasharray: 2 13.2; opacity: 0.55; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 13; }
.ring-track-m { stroke-width: 16; stroke: oklch(100% 0 0 / 0.05); }
.ring { fill: none; stroke-width: 13; stroke-linecap: round; will-change: stroke-dashoffset; transition: stroke-dashoffset 300ms var(--spring), stroke var(--dur-2); }
.ring-momentum { stroke: url(#momGrad); stroke-width: 16; filter: drop-shadow(0 0 14px oklch(84% 0.18 152 / 0.55)); }
.ring-combo { stroke: var(--ring-c); filter: drop-shadow(0 0 6px oklch(76% 0.16 64 / 0.4)); }
.ring-xp { stroke: var(--ring-x); filter: drop-shadow(0 0 6px oklch(62% 0.19 256 / 0.4)); }

.rings-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rings-score { font-family: var(--font-display); font-size: var(--text-mega); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; will-change: transform; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--text), color-mix(in oklab, var(--text) 62%, var(--text-3))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rings-score.bump, .rings-grade.bump, .meter-value.bump { animation: num-pop 0.34s var(--spring); }
@keyframes num-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.rings-label { font-size: var(--text-2xs); color: var(--text-3); letter-spacing: 0.24em; margin-top: 4px; font-weight: 600; }
.rings-grade { font-family: var(--font-display); margin-top: 9px; font-weight: 700; font-size: var(--text-sm); padding: 3px 14px; border-radius: var(--r-pill); background: var(--card-solid); border: 1px solid var(--hairline); box-shadow: var(--sh-1); }

.ring-legend { display: flex; gap: var(--s-3); }
.lg { font-size: var(--text-2xs); color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.lg-m::before { background: var(--ring-m); }
.lg-c::before { background: var(--ring-c); }
.lg-x::before { background: var(--ring-x); }

/* ---------- Momentum trace ---------- */
.spark { width: 100%; }
.spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.spark-label { font-size: var(--text-2xs); color: var(--text-3); font-weight: 500; }
.spark-delta { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.spark-delta.up { color: var(--accent); }
.spark-delta.down { color: var(--danger); }
.spark-svg { width: 100%; height: 44px; display: block; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke var(--dur-2); }

/* ---------- Meters ---------- */
.meters-row { display: flex; gap: var(--s-2); width: 100%; }
.meter { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 13px 12px; background: linear-gradient(180deg, var(--card-solid), var(--card-2)); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 1px 0 var(--highlight) inset; transition: box-shadow var(--dur-2), border-color var(--dur-2), transform var(--dur-2); }
.meter-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
#comboMult { color: var(--orange); }
#sessionXp { color: var(--accent); }
.meter.hot { border-color: oklch(76% 0.16 64 / 0.5); box-shadow: 0 0 0 3px oklch(76% 0.16 64 / 0.12); }
.meter.hot #comboMult { animation: pop 0.5s var(--spring) infinite alternate; }
@keyframes pop { to { transform: scale(1.12); } }
.meter-label { font-size: var(--text-2xs); color: var(--text-3); }

/* ---------- Dimension rows ---------- */
.dim-bars { width: 100%; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; padding-right: 2px; flex: 1; min-height: 0; }
.dim { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.dim-name { font-size: var(--text-xs); color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim-val { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.dim-track { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; box-shadow: 0 1px 1px oklch(0% 0 0 / 0.06) inset; }
.dim-fill { height: 100%; width: 0%; border-radius: var(--r-pill); transition: width var(--dur-2) var(--ease), background var(--dur-2); }