.server-numbers {
  width: 100%;
  margin: 0 0 clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid rgba(201, 162, 75, .42);
  background: linear-gradient(110deg, rgba(201, 162, 75, .12), rgba(16, 16, 16, .76) 32%, rgba(16, 16, 16, .66));
  box-shadow: inset 1px 0 0 rgba(201, 162, 75, .44), 0 .65rem 1.35rem rgba(0, 0, 0, .2);
  padding: clamp(.9rem, 2vw, 1.3rem);
  text-align: left;
}
.server-numbers h2 {
  margin: 0 0 .85rem;
  color: var(--gold);
  font: 800 .78rem/1.2 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.server-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}
.server-number {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: .14rem .55rem;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(244, 234, 213, .11);
  background: rgba(8, 9, 9, .36);
  padding: .72rem .75rem;
}
a.server-number {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.server-number:hover,
a.server-number:focus-visible {
  border-color: rgba(201, 162, 75, .86);
  background-color: rgba(201, 162, 75, .12);
  box-shadow: 0 .65rem 1.35rem rgba(0, 0, 0, .22), inset 1px 0 0 rgba(201, 162, 75, .58);
  transform: translateY(-1px);
}
a.server-number:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.server-number-icon { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
.server-number-icon img { display: block; width: 2rem; height: 2rem; object-fit: contain; }
.server-number-value {
  min-width: 0;
  color: var(--ivory);
  font: 800 clamp(1.05rem, 2.1vw, 1.5rem)/1.1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.server-number-value > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.server-number-unit { font-size: .55em; color: var(--muted); }
.server-number-label {
  color: var(--muted);
  font: 800 .64rem/1.25 system-ui, sans-serif;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.server-numbers-status { display: block; min-height: 0; color: var(--muted); font: .75rem/1.3 system-ui, sans-serif; }
.server-numbers-status:not(:empty) { margin-top: .65rem; }
@media (max-width: 740px) {
  .server-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .server-number { padding: .6rem .5rem; gap: .12rem .35rem; }
  .server-number-icon { width: 1.75rem; height: 1.75rem; }
  .server-number-icon img { width: 1.55rem; height: 1.55rem; }
  .server-number-label { font-size: .57rem; }
}
