.server-list {
  width: 98%;
  max-width: 1250px;
  min-width: 470px;
  margin: 30px auto;
}

.server-card {
  border: 2px solid var(--server-border);
  border-radius: 2px;
  margin-bottom: 8px;
  background: var(--server-bg);
  overflow: hidden;
  box-shadow: 0 2px 6px -2px var(--server-shadow);
}

.server-card--red {
  border-color: #ff0000 !important;
  background-color: #ff000085;
  box-shadow: 0 2px 6px -2px #ff0000;
}
.server-card--green {
  border-color: #00ff00 !important;
  background-color: #00ff0085;
  box-shadow: 0 2px 6px -2px #00ff00;
}
.server-card--blue {
  border-color: #0000ff !important;
  background-color: #0000ff85;
  box-shadow: 0 2px 6px -2px #0000ff;
}
.server-card--yellow {
  border-color: #ffff00 !important;
  background-color: #ffff0085;
  box-shadow: 0 2px 6px -2px #ffff00;
}
.server-card--magenta {
  border-color: #ff00ff !important;
  background-color: #ff00ff85;
  box-shadow: 0 2px 6px -2px #ff00ff;
}

.server-card__header {
  display: flex; align-items: center;
  border-bottom: 1.5px solid var(--server-border);
  background: var(--server-header-bg);
  font-size: 17px; padding: 7px 12px; gap: 18px;
}
.server-card__pos { min-width: 38px; text-align: center; font-weight: bold; color: var(--server-header-text); font-size: 20px; }
.server-card__name { font-weight: 600; color: var(--server-header-text); flex: 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 18px;}
.server-card__address { font-size: 16px; color: var(--server-address-text); font-family: consolas,monospace; background: var(--server-address-bg); padding: 3px 13px; border-radius: 5px; display: flex; align-items: center;}

.server-card__stats-block {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: var(--server-header-bg);
  min-height: 60px;
}
.server-card__banner {
  width: 468px;
  min-width: 468px;
  max-width: 468px;
  height: auto;
  display: flex; align-items: center; justify-content: center;
}
.server-card__banner img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  background: var(--server-bg);
  border-radius: 2px;
  display: block;
}
.server-card__banner-placeholder {
  width: 100%;
  height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: var(--banner-placeholder); background: var(--banner-bg);
  font-size: 1.3em; border-radius: 6px;
  border: 2px dashed var(--banner-placeholder);
}

.server-card__info-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--server-info-block-bg);
  min-height: 60px;
}
.server-card__stats-row {
  width: 100%;
  display: flex;
  background: none;
  min-height: 30px;
}
.server-card__stat {
  flex: 1 1 33.3333%;
  max-width: 33.3333%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.server-card__stat i.fa { color: var(--stat-icon); margin-right: 5px; font-size: 18px; vertical-align: middle;}
.server-card__stat i.fa-thumbs-up { color: var(--stat-likes);}
.server-card__stat i.fa-users { color: var(--stat-users);}
.server-card__stat i.fa-star { color: var(--stat-icon);}
.server-card__versions-row {
  width: 100%;
  display: flex;
  background: none;
  min-height: 30px;
}
.server-card__version {
  flex: 1 1 50%;
  max-width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.server-card__version--java i.fa-laptop {
  color: var(--version-java);
  margin-right: 3px;
}
.server-card__version--bedrock i.fa-mobile-alt {
  color: var(--version-bedrock);
  margin-right: 3px;
}
.server-card__version--inactive {
  color: var(--version-inactive);
  text-decoration: line-through;
}

/* Адаптив: баннер и вся правая инфа друг под другом */
@media(max-width: 800px) {
  .server-card__stats-block { flex-direction: column; }
  .server-card__banner,
  .server-card__info-block { min-height:unset; }
  .server-card__stats-row,
  .server-card__versions-row { font-size:14px; min-height:38px;}
  .server-card__stat,
  .server-card__version { min-height:38px;}
  .server-card__banner {
    width: 100%;
    min-width: unset;
    max-width: unset;
    height: auto; /* Ключевая строка */
    padding: 0;
    display: flex;
    align-items: stretch; /* Важно! */
    justify-content: center;
    background: none;
    border-right: none;
  }
  .server-card__banner img,
  .server-card__banner-placeholder {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    display: block;
  }
}