/* ============================================================
   Darts — Profil & progression
   ============================================================ */

.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 280px at 0% -30%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(500px 280px at 120% 130%, rgba(168, 85, 247, .18), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  background: var(--accent);
  box-shadow: var(--shadow-glow);
}

.profile-id { flex: 1; min-width: 0; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name { font-size: 1.4rem; font-weight: 900; }
.profile-edit {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong); cursor: pointer;
  background: rgba(255, 255, 255, .05); color: var(--muted); font-size: .85rem;
}
:root[data-theme="light"] .profile-edit { background: rgba(15,23,42,.04); }
.profile-since { font-size: .8rem; color: var(--muted); margin-top: 2px; }

.profile-name-input {
  width: 100%;
  max-width: 220px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cyan);
  background: var(--surface-3);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 800;
}

/* Records mis en avant */
.records-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 620px) { .records-grid { grid-template-columns: repeat(4, 1fr); } }

.record-card {
  padding: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  text-align: center;
}
.record-card .rc-icon { font-size: 1.5rem; }
.record-card .rc-value {
  font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.record-card .rc-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

/* Stats par mode */
.stat-block { margin-top: 22px; }
.stat-block h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.stat-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 620px) { .stat-rows { grid-template-columns: repeat(4, 1fr); } }
.stat-cell {
  padding: 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
}
:root[data-theme="light"] .stat-cell { background: rgba(15,23,42,.03); }
.stat-cell .sv { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-cell .sl { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Historique */
.history-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
}
:root[data-theme="light"] .history-item { background: rgba(15,23,42,.03); }
.history-item.win { border-color: rgba(52, 211, 153, .4); }
.hi-icon { font-size: 1.4rem; text-align: center; }
.hi-main { min-width: 0; }
.hi-title { font-weight: 800; font-size: .95rem; }
.hi-detail { font-size: .78rem; color: var(--muted); }
.hi-date { font-size: .72rem; color: var(--faint); white-space: nowrap; text-align: right; }
.history-empty { color: var(--faint); font-size: .9rem; text-align: center; padding: 24px 0; }

.profile-danger { margin-top: 24px; }