/**
 * ================================================================
 *  RoxyPiano v2.0 — Statistics & Gamification
 *  © 2026 Roxy Emanuel. All Rights Reserved.
 * ================================================================
 */

.stats-section { padding: 16px 20px; max-width: 1400px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-label { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.stat-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text); }
.stat-value.accent  { color: var(--accent); }
.stat-value.success { color: var(--success); }
.stat-value.error   { color: var(--error); }
.stat-value.warning { color: var(--warning); }

/* ── Accuracy Ring (SVG) ───────────────────────────────────────── */
.accuracy-ring { position: relative; width: 54px; height: 54px; margin: 0 auto 3px; }
.accuracy-ring svg { transform: rotate(-90deg); }
.ring-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 700; color: var(--accent);
}

/* ── Song Info ──────────────────────────────────────────────────── */
.song-info {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.song-name { font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.song-meta { display: flex; gap: 12px; font-size: .72rem; color: var(--text-muted); }

/* ── Recent Notes Bar Chart ────────────────────────────────────── */
.recent-notes-bar { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.rn-bar { width: 10px; border-radius: 2px 2px 0 0; transition: height .3s; }
.rn-bar.ok { background: var(--success); }
.rn-bar.ng { background: var(--error); }