/* ==========================================================================
   Плашка режима сервера — «Тактический минимум»
   ==========================================================================
   Одна разметка на все состояния: переезд и техработы отличаются только
   цветом акцента (модификаторами --relocation / --maintenance), а режим,
   объявленный заранее, — компактной раскладкой (--announced).

   В обычном режиме контейнер пуст и схлопнут в ноль: плашка не должна
   занимать место, когда сказать нечего.
   ========================================================================== */

.server-mode-banner {
  /* Появление и исчезновение — плавные (см. .is-open ниже). Схлопываем через
     grid-template-rows, а не через height: высота плашки зависит от длины
     текста, и фиксировать её нельзя. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.32s ease, opacity 0.24s ease;
}

.server-mode-banner.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.server-mode-banner__inner {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .server-mode-banner {
    transition: none;
  }
}

/* ── Полоса ──────────────────────────────────────────────────────────────── */

.server-mode {
  /* Цвета заданы готовыми значениями, а не через color-mix: браузер, который
     его не понимает, отбросил бы всю декларацию — вместе с рамкой и фоном. */
  --smode-accent: var(--t-red, #dc3545);
  --smode-accent-bright: var(--t-red-bright, #ff4d4d);
  --smode-edge: rgba(220, 53, 69, 0.35);
  --smode-wash-top: rgba(220, 53, 69, 0.1);
  --smode-wash-bottom: rgba(220, 53, 69, 0.03);

  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 56px;
  border-bottom: 1px solid var(--smode-edge);
  background: linear-gradient(180deg, var(--smode-wash-top), var(--smode-wash-bottom));
  font-family: var(--t-font-body, 'PT Sans', Arial, sans-serif);
  color: var(--t-text, #e8eaef);
}

.server-mode--maintenance {
  /* Янтарный — предупреждение из палитры стилегида. Красный оставлен переезду:
     по цвету должно быть видно, грозит игроку потеря имущества или нет. */
  --smode-accent: #f59e0b;
  --smode-accent-bright: #f59e0b;
  --smode-edge: rgba(245, 158, 11, 0.35);
  --smode-wash-top: rgba(245, 158, 11, 0.1);
  --smode-wash-bottom: rgba(245, 158, 11, 0.03);
}

.server-mode__rule {
  flex-shrink: 0;
  align-self: stretch;
  width: 3px;
  background: var(--smode-accent);
}

.server-mode__icon {
  flex-shrink: 0;
  color: var(--smode-accent-bright);
}

.server-mode__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.server-mode__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.server-mode__title {
  font-family: var(--t-font-display, 'Russo One', sans-serif);
  font-size: 17px;
  text-transform: uppercase;
  color: #ffffff;
}

.server-mode__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--smode-accent);
  background: var(--smode-accent);
  font-family: var(--t-font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
}

.server-mode--maintenance .server-mode__tag {
  /* На янтарной заливке белый текст не читается — оставляем контурный тег. */
  background: transparent;
  color: var(--smode-accent);
}

.server-mode__text {
  font-size: 14px;
  line-height: 1.55;
  color: #c9ced8;
  text-wrap: pretty;
}

.server-mode__spacer {
  flex-grow: 1;
}

.server-mode__timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.server-mode__timer-label,
.server-mode__timer-at {
  font-family: var(--t-font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t-text-faint, #6b7280);
}

.server-mode__timer-at {
  color: var(--t-text-muted, #9ca3af);
}

.server-mode__countdown {
  font-family: var(--t-font-display, 'Russo One', sans-serif);
  font-size: 26px;
  line-height: 1;
  color: var(--smode-accent-bright);
  font-variant-numeric: tabular-nums;
}

.server-mode__more {
  flex-shrink: 0;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--t-font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t-text, #e8eaef);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.server-mode__more:hover {
  border-color: var(--smode-accent);
  color: var(--smode-accent-bright);
}

/* ── Компактный вид: режим объявлен, но ещё не начался ───────────────────── */

.server-mode--announced {
  padding: 13px 56px;
  gap: 16px;
}

.server-mode--announced .server-mode__body {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.server-mode--announced .server-mode__title {
  font-family: var(--t-font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--smode-accent-bright);
  white-space: nowrap;
}

.server-mode--announced .server-mode__divider {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--t-panel-border, rgba(255, 255, 255, 0.12));
}

.server-mode--announced .server-mode__timer {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.server-mode--announced .server-mode__countdown {
  font-size: 18px;
}

.server-mode--announced .server-mode__timer-at {
  display: none;
}

.server-mode--announced .server-mode__more {
  padding: 8px 14px;
  font-size: 10px;
}

/* ── Узкие экраны ────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .server-mode,
  .server-mode--announced {
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }

  .server-mode__spacer {
    display: none;
  }

  .server-mode__body,
  .server-mode--announced .server-mode__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .server-mode--announced .server-mode__divider {
    display: none;
  }

  .server-mode__timer,
  .server-mode--announced .server-mode__timer {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
  }

  .server-mode__countdown {
    font-size: 20px;
  }

  .server-mode__more,
  .server-mode--announced .server-mode__more {
    align-self: flex-start;
    margin-top: 4px;
  }
}

/* ── Индикатор в герое главной ───────────────────────────────────────────── */

.server-status-inline.is-server-mode .status-indicator {
  background: var(--t-red, #dc3545);
  box-shadow: none;
}

.server-status-inline.is-server-mode--maintenance .status-indicator {
  background: #f59e0b;
}

.server-status-inline.is-server-mode .server-name {
  color: var(--t-red-bright, #ff4d4d);
}

.server-status-inline.is-server-mode--maintenance .server-name {
  color: #f59e0b;
}