/* ============================================================
   Players Counter CSS
   ============================================================ */

/* ── Contador en el hero ───────────────────────────────── */
.hero-players-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: .4rem 1rem .4rem .7rem;
  backdrop-filter: blur(8px);
  width: fit-content;
}
.players-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}
.dot-online  { background: #6abf69; box-shadow: 0 0 6px rgba(106,191,105,.6); animation: pulse-dot 2s ease-in-out infinite; }
.dot-offline { background: #444; }

@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 4px rgba(106,191,105,.5); }
  50%      { box-shadow: 0 0 10px rgba(106,191,105,.9); }
}

.hero-players-badge .players-count {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hero-players-badge .players-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.players-updated {
  font-size: .65rem;
  color: rgba(255,255,255,.3);
}

/* ── Contador en las tabs (badge pequeño) ──────────────── */
.tab-players {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 100px;
  background: rgba(106,191,105,.12);
  color: var(--mc);
  border: 1px solid rgba(106,191,105,.2);
  margin-left: .3rem;
  vertical-align: middle;
}
.tab-players .players-dot { width: 6px; height: 6px; }

/* ── Contador en el header de cada modalidad ───────────── */
.mode-players-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .65rem 2rem;
  background: rgba(106,191,105,.04);
  border-top: 1px solid rgba(106,191,105,.1);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mode-players-stat {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mode-players-stat .pstat-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mc);
  line-height: 1;
}
.mode-players-stat .pstat-max {
  font-size: .75rem;
  color: var(--muted);
}
.mode-players-stat .pstat-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mode-players-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}