/* ============================================================================
 * Activity Tracker — Badge-Komponente für "Tage seit letztem Match"
 * ----------------------------------------------------------------------------
 * Multi-System wiederverwendbar (Mordheim, Blood Bowl, AoS, Pathfinder).
 * Adressiert die Mordheim-Krise mit visuellem Awareness-Signal.
 *
 * Verwendet als Token-Vorbild für das kommende Design-System:
 * Farben über CSS-Variablen, mit Fallback-Hex.
 * ========================================================================== */

:root {
  --activity-active-color:    #4ade80;
  --activity-slowing-color:   #fbbf24;
  --activity-inactive-color:  #f97316;
  --activity-never-color:     #9ca3af;
}

.activity-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 0.67rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.activity-active {
  color: var(--activity-active-color, #4ade80);
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}
.activity-active .activity-dot { background: var(--activity-active-color, #4ade80); }

.activity-slowing {
  color: var(--activity-slowing-color, #fbbf24);
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.activity-slowing .activity-dot { background: var(--activity-slowing-color, #fbbf24); }

.activity-inactive {
  color: var(--activity-inactive-color, #f97316);
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.08);
}
.activity-inactive .activity-dot { background: var(--activity-inactive-color, #f97316); }

.activity-never {
  color: var(--activity-never-color, #9ca3af);
  border-color: rgba(156, 163, 175, 0.25);
  background: rgba(156, 163, 175, 0.06);
  opacity: 0.7;
}
.activity-never .activity-dot { background: var(--activity-never-color, #9ca3af); }

/* Touch-Optimierung: etwas größere Pillen auf Touch-Geräten */
@media (hover: none) and (pointer: coarse) {
  .activity-badge { padding: 3px 9px; font-size: 0.72rem; }
}