/* ============================================================
   Major Public — карточка игрового сервера
   ------------------------------------------------------------
   Переменные --mp-slope и --mp-mono приходят из модуля оформления.
   ============================================================ */

.mp-block-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: var(--font-size-xxl);
  color: var(--text-default);
}

.mp-block-head h2::before {
  content: "";
  flex: none;
  width: 5px;
  height: 18px;
  background: var(--span);
  transform: skewX(calc(-1 * var(--mp-slope)));
}

/* Две колонки: слева рисунок, справа живые данные. На узком — в столбик. */
.mp-server {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--transparent-4-w);
  border-radius: var(--br-16);
  background: var(--card);
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .mp-server { grid-template-columns: 1fr; }
}

/* ---------- Левая половина: рисунок ---------- */

/* Высота выбрана по пропорции самого рисунка (1600×900): при колонке
   вдвое уже страницы кадр совпадает и ничего не срезается. Раньше
   карточка была ниже, и `cover` рубил каску. */
.mp-server__art {
  position: relative;
  min-height: 320px;
  background: #0b0c0e 50% 30% / cover no-repeat;
}

@media (max-width: 900px) {
  .mp-server__art { min-height: 200px; }
}

/* Затемнение снизу и слева — под плашку режима и название. */
.mp-server__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(11, 12, 14, .92) 0 12%, rgba(11, 12, 14, .1) 55%, transparent 78%),
    linear-gradient(90deg, rgba(11, 12, 14, .55), transparent 45%);
}

.mp-server__mode {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border: 1px solid var(--span-half);
  border-radius: var(--br-20);
  background: var(--span-low);
  color: var(--span);
  font-family: var(--mp-mono);
  font-size: var(--font-size-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mp-server__name {
  position: absolute;
  left: 22px;
  bottom: 18px;
  right: 22px;
  font-family: var(--font-family-1);
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: var(--font-weight-7);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-default);
}

/* ---------- Правая половина: данные ---------- */

/* Название сервера целиком — заголовком колонки. На рисунке слева
   стоит короткая форма, здесь полная, с режимом. */
/* Режим и название разделены чертой, как в имени сервера в игре. */
.mp-server__sep {
  margin: 0 .35em;
  color: var(--span);
  font-weight: var(--font-weight-4);
}

.mp-server__title {
  margin: 0 0 2px;
  font-family: var(--font-family-1);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: var(--font-weight-6);
  letter-spacing: .02em;
  color: var(--text-default);
}

/* Содержимое идёт подряд и стоит по центру высоты: прижатые к низу
   кнопки оставляли посреди колонки пустое поле. */
.mp-server__live {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
}

.mp-server__state {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mp-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: var(--font-size-m);
  color: var(--green);
}

.mp-server__state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.mp-server__state--off {
  color: var(--text-secondary);
}

.mp-server__state--off i {
  background: var(--text-secondary);
  box-shadow: none;
}

.mp-server__meta {
  color: var(--text-custom);
  font-size: var(--font-size-default);
}

.mp-server__meta b {
  font-family: var(--mp-mono);
  color: var(--text-default);
  font-weight: var(--font-weight-4);
}

.mp-server__slots {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mp-server__bar {
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: var(--transparent-5-w);
  overflow: hidden;
}

.mp-server__bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--span);
  box-shadow: 0 0 12px rgba(255, 64, 32, .35);
  transition: width .6s ease;
}

.mp-server__cnt {
  flex: none;
  font-family: var(--mp-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-default);
  color: var(--text-custom);
}

.mp-server__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-default);
}

.mp-server__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.mp-server__ip {
  padding: 9px 14px;
  border-radius: var(--br-8);
  background: var(--transparent-4-w);
  font-family: var(--mp-mono);
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

/* ---------- Кнопки ---------- */

.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-12);
  background: transparent;
  color: var(--text-custom);
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-6);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.mp-btn:hover {
  color: var(--text-default);
  border-color: var(--transparent-20-w);
  transform: translateY(-1px);
}

/* Главная кнопка — с бликом под уклоном логотипа, как у остальных. */
.mp-btn--solid {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: var(--span);
  color: #1a0703;
  box-shadow: 0 6px 22px rgba(255, 64, 32, .28);
}

.mp-btn--solid:hover {
  color: #1a0703;
  border-color: transparent;
}

.mp-btn--solid::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 36%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(var(--mp-slope));
  animation: mp-sheen 5.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mp-btn--solid::after { animation: none; }
}