/* ─── Stats Page ──────────────────────────────────────────── */
#page-stats { display: none; }
#page-stats.active { display: flex; flex-direction: column; gap: 14px; }

/* Win-rate ring */
.win-ring-wrap  { display: flex; align-items: center; gap: 20px; }
.ring-container {
  flex-shrink: 0;
  position: relative; width: 100px; height: 100px;
}
.ring-svg  { transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.ring-fill {
  fill: none; stroke: url(#ringGrad); stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-pct   { font-size: 20px; font-weight: 800; }
.ring-label { font-size: 10px; color: var(--text2); }

.ring-stats    { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ring-stat-row { display: flex; justify-content: space-between; align-items: center; }
.stat-dot      { width: 8px; height: 8px; border-radius: 50%; }
.stat-info     { display: flex; align-items: center; gap: 7px; }
.stat-info span { font-size: 13px; color: var(--text2); }
.stat-num      { font-size: 16px; font-weight: 700; }

/* Stat tiles grid */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.stat-tile {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
}
.stat-tile::after {
  content: attr(data-icon);
  position: absolute; right: 10px; bottom: 6px;
  font-size: 36px; opacity: .08;
}
.stat-tile-value { font-size: 24px; font-weight: 800; }
.stat-tile-label { font-size: 11px; color: var(--text2); }