/* ── Feed d'activité ──────────────────────────────────────────────────────── */

.act-hero {
  padding    : 4rem 0 2.5rem;
  text-align : center;
}
.act-title {
  font-size  : clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin     : .5rem 0 .75rem;
}
.act-sub {
  color    : var(--text-muted);
  max-width: 520px;
  margin   : 0 auto;
  font-size: .95rem;
}

.act-feed-section { padding-top: 0; }
.act-container    { max-width: 720px; }

.act-feed {
  display       : flex;
  flex-direction: column;
  gap           : .75rem;
}

/* ── Card de base ──────────────────────────────────────────────────────────── */
.act-card {
  position      : relative;
  display       : flex;
  gap           : 1rem;
  align-items   : flex-start;
  padding       : 1rem 1.25rem;
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : 12px;
  overflow      : hidden;
  transition    : border-color .2s, transform .15s;
}
.act-card:hover { border-color: rgba(129,140,248,.35); transform: translateY(-1px); }

/* ── Variantes ─────────────────────────────────────────────────────────────── */
.act-card-win  { border-left: 3px solid #22c55e; }
.act-card-ach  { border-left: 3px solid #818cf8; }
.act-card-rare { border-left: 3px solid #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.06) 0%, transparent 60%); }

/* Glow rare */
.act-rare-glow {
  position : absolute;
  inset    : 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(245,158,11,.12), transparent 60%);
  pointer-events: none;
}

/* ── Avatar + badge ────────────────────────────────────────────────────────── */
.act-card-left    { flex-shrink: 0; }
.act-avatar-wrap  { position: relative; width: 48px; height: 48px; }
.act-avatar {
  width        : 48px;
  height       : 48px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid var(--border);
}
.act-event-badge {
  position    : absolute;
  bottom      : -4px;
  right       : -4px;
  font-size   : .85rem;
  background  : var(--bg-card);
  border-radius: 50%;
  line-height : 1.4;
  padding     : 0 1px;
  border      : 1px solid var(--border);
}

/* ── Corps de card ─────────────────────────────────────────────────────────── */
.act-card-body   { flex: 1; min-width: 0; }
.act-card-top    { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.act-username    { font-weight: 700; color: var(--text); text-decoration: none; font-size: .95rem; }
.act-username:hover { color: var(--accent); }

.act-card-type {
  display     : inline-block;
  padding     : .1rem .5rem;
  border-radius: 999px;
  font-size   : .7rem;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.act-type-win  { background: rgba(34,197,94,.15);  color: #22c55e; }
.act-type-ach  { background: rgba(129,140,248,.15); color: #818cf8; }
.act-type-rare { background: rgba(245,158,11,.18);  color: #f59e0b; }

.act-card-desc {
  font-size: .88rem;
  color    : var(--text-muted);
  margin   : 0 0 .4rem;
  line-height: 1.5;
}
.act-card-desc strong { color: var(--text); }
.act-mmr-gain { color: #22c55e; }

.act-card-meta { display: flex; align-items: center; gap: .75rem; }
.act-meta-link {
  font-size : .78rem;
  color     : var(--accent);
  text-decoration: none;
}
.act-meta-link:hover { text-decoration: underline; }
.act-time {
  font-size : .75rem;
  color     : var(--text-muted);
  margin-left: auto;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.act-empty {
  text-align : center;
  padding    : 4rem 1rem;
  color      : var(--text-muted);
}
.act-empty-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .act-card    { padding: .75rem 1rem; }
  .act-avatar  { width: 40px; height: 40px; }
  .act-avatar-wrap { width: 40px; height: 40px; }
}