/* Homepage server cards: equal-height grid, region filters, visitor ping. */

.server-grid {
  display: grid;
  align-items: stretch;
}

.server-block {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  gap: 0;
}

.server-block > .server-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.server-card .sname,
.server-card .mapstrip,
.server-card .server-facts,
.server-card .server-card-badges,
.server-card .server-live-row,
.server-card .server-card-meta-line {
  flex: 0 0 auto;
}

.server-card .progress {
  display: none !important;
}

.server-card .server-id-copy,
.server-card .server-id-copy-label,
.server-card .server-players-badge,
.server-card .server-slot-badge {
  word-spacing: 0.16em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.server-region-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.server-region-filters button {
  appearance: none;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.04);
  color: var(--mist-200, #e5e7eb);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
}

.server-region-filters button.is-active {
  border-color: rgb(242 169 0 / 0.55);
  color: #f2a900;
  background: rgb(242 169 0 / 0.08);
}

.server-card-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.server-region-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-300, #d1d5db);
  border: 1px solid rgb(255 255 255 / 0.1);
  padding: 2px 7px;
  border-radius: 2px;
}

.server-ping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #86efac;
}

.server-ping.is-mid { color: #fbbf24; }
.server-ping.is-high { color: #f87171; }

.server-ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.7);
  animation: server-ping-pulse 1.6s ease-out infinite;
}

@keyframes server-ping-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.65); }
  70% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}

.server-facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 10px;
}

.server-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  word-spacing: 0.12em;
  text-transform: none;
}

.server-fact-k {
  flex: 0 0 6.75em;
  color: var(--mist-400, #9ca3af);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.server-fact-sep {
  flex: 0 0 auto;
  color: var(--mist-500, #6b7280);
}

.server-fact-v {
  min-width: 0;
  color: var(--mist-100, #f3f4f6);
  text-transform: none;
  letter-spacing: 0.01em;
}

.server-fact-v b {
  color: var(--mist-100, #f3f4f6);
  font-weight: 600;
}

.server-fact .restart-est {
  margin-left: 0.35em;
  color: var(--mist-400, #9ca3af);
  font-weight: 400;
  font-size: 12px;
}

.server-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.server-card .mapstrip span {
  display: none;
}