* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-repeat: no-repeat;
    background-color: #070711;
    background-position: center;
    background-size: 2000px 950px;
    min-height: 0;
    margin: 0;
    padding: 0 0 0 0; /* Только верхний отступ 80px, остальные 0 */
    gap: 10px;
}

body::before {
    content: '';
    position: absolute;
    top: 0px; /* Поднимаем фон выше верха страницы (на 100px) */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    width: 2000px;
    height: 950px;
    background-image: url('/static/bg.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Или cover, в зависимости от желаемого эффекта */
    z-index: -1; /* Отправляем фон под контент */
}


/* Класс для блокировки прокрутки */
.no-scroll {
  overflow: hidden;
  position: fixed; /* Фиксируем положение, чтобы избежать «дрожания» */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* Основные стили для модальных окон */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Изначально прозрачный */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Для Safari */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Полностью прозрачно */
    transition: opacity 0.4s ease;
}

.modal.show {
    opacity: 1; /* При появлении — полная непрозрачность */
}

.modal-content {
    background-color: #2a5298;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.8); /* Изначально уменьшено */
    opacity: 0; /* Изначально невидимо */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal.show .modal-content {
    transform: scale(1); /* Возвращаем к нормальному размеру */
    opacity: 1; /* Делаем видимым */
}

.close-btn {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #000;
}

/* Стили для кнопок открытия модального окна */
.btn-open-modal {
    background: #4169E1;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-open-modal:hover {
    background: #335ea8;
}

/* Дополнительные стили для разделов доната */
.donate-page {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.donate-section {
    margin-bottom: 40px;
}

.package {
    border: 1px solid #ddd;  
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.package:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.icon {
    background: #4169E1;
    color: white;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
}

.news-section {
    margin-bottom: 30px;
    color: #ffffff; /* Белый цвет текста */
}

.news-tiles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.news-tile {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 200px;
    overflow: hidden;
    box-shadow: 0 100px 200px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(220, 230, 240, 0.4);
    position: relative;
}

.no-news {
    text-align: center;
    padding: 20px;
    background: #fff3cd;
    border-radius: 8px;
    margin-top: 20px;
}

.server-info-container {
    display: flex;
    align-items: stretch; /* Растягивает дочерние блоки на всю высоту контейнера */
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.server-image {
    flex: 0 0 120px; /* Фиксированная ширина блока */
    display: flex;
    justify-content: center; /* Горизонтальное выравнивание внутри блока */
    align-items: center;   /* Вертикальное выравнивание внутри блока */
    overflow: hidden;       /* Скрывает «лишние» части изображения */
}

.version-image {
    width: 100%;      /* Занимает всю ширину родительского блока */
    height: auto;     /* Высота подстраивается под пропорции */
    max-height: 100%; /* Не превышает высоту контейнера */
    object-fit: contain; /* Сохраняет пропорции, не обрезает */
    border: #fff;
}

.server-info {
    flex: 1;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 1px;
}

.server-info h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5em;
}

.server-info ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.server-info li {
    margin-bottom: 12px;
    line-height: 1;
    color: #444;
}

.server-info p {
    margin-top: 15px;
    color: #666;
    line-height: 1.4;
}

.header-nav-container {
    border-radius: 10px;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 6px;
   /* z-index: 100;*/
    background: #0a1a3a; /* Тёмно‑синий фон */
    position: relative;
    display: block;
    min-height: 2px; /* Уменьшенная высота */
}


.news-tile {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(220, 230, 240, 0.4);
}

.tile-image {
    position: relative;
    width: 100%;
    height: 305px; /* Фиксированная высота для единообразия */
    overflow: hidden;
}

.tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Контейнер для текста поверх изображения */
.image-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 25px 15px;
    /* Полупрозрачный градиент снизу */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 100%
    );
    color: white;
}

.image-text-overlay h3 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 600;
}

.image-text-overlay p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.9;
}

.tile-content {
    padding: 4px;
}

.read-more {
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(
    45deg,
    rgba(128, 128, 128, 0.6),  /* серый с 60% прозрачности */
    rgba(169, 169, 169, 0.7)   /* чуть светлее серый с 70% прозрачности */
  );
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);  /* тёмная тень для объёма */
}

.read-more:hover {
  background: linear-gradient(
    45deg,
    rgba(105, 105, 105, 0.8),  /* темнее при наведении */
    rgba(128, 128, 128, 0.9)
  );
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}


.wiki-button-container {
  position: relative; /* Создаём контекст позиционирования для дочерних элементов */
  display: inline-block; /* Сохраняем поведение кнопки как inline-элемента */
}

.sublist {
  display: none; /* Скрываем подсписок по умолчанию */
  position: absolute; /* Позиционируем относительно .wiki-button-container */
  top: 100%; /* Размещаем под кнопкой */
  left: 0;
  background-color: #091a3b; /* Фон подсписка */
  border: 5px solid #0a1a3a; /* Граница */
  padding: 5px 0; /* Отступы внутри списка */
  min-width: 150px; /* Минимальная ширина */
  z-index: 1000; /* Убеждаемся, что подсписок поверх других элементов */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень для эффекта всплытия */
  opacity: 0; /* начальная прозрачность — элемент невидим */
  transform: translateY(-10px); /* смещение вверх на 10px — начальная позиция анимации */
  transition: opacity 0.3s ease, transform 0.3s ease; /* задаём плавность анимации */
}

.sublist-item {
  display: block; /* Каждый пункт — блочный элемент */
  padding: 5px 10px; /* Отступы внутри пункта */
  text-decoration: none; /* Убираем подчёркивание ссылок */
  color: #f0f0f0; /* Цвет текста */
}

.sublist-item:hover {
  background-color: #264c8d; /* Подсветка при наведении */
}

/* Показываем подсписок при наведении на контейнер */
.wiki-button-container:hover .sublist {
  display: block; /* Показываем подсписок */
  opacity: 1; /* делаем полностью непрозрачным */
  transform: translateY(0); /* возвращаем в исходное положение (без смещения) */
}

.tile-footer {
    background: rgba(245, 247, 250, 0.9);
    padding: 10px 15px;
    font-size: 13px;
    color: #6c7a89;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(220, 230, 240, 0.5);
}

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 1rem 0;
}

.nav-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  background-color: transparent; /* Полностью прозрачный фон */
  color: white; /* Основной цвет текста */
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  
  text-decoration: none;
  outline: none;
  user-select: none;
}

.nav-btn.image-only {
  width: 60px;
  height: 60px;
  padding: 0;
  margin-left: 600px;
  background-image: url('static/givemoney.png'); /* Укажите путь к иконке */
  background-size: contain;
  background-position: center right; /* Центр по вертикали + прижим вправо */
  background-repeat: no-repeat;
  border: 2px solid transparent; /* Прозрачная рамка */
}

.nav-btn:hover {
  color: #ffd700; /* Золотой цвет текста при наведении */
}

.nav-btn:active {
  color: #ffab00; /* Более насыщенный оттенок при клике */
  transform: translateY(0);
  box-shadow: none;
}

.nav-btn img {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  transition: filter 0.3s ease;
}

/* Дополнительно: можно подсветить иконку при наведении */
.nav-btn:hover img {
  filter: brightness(120%);
}

.header-wrapper {
    display: flex;
    align-items: center;
    gap: 30px; /* Уменьшили огромный отступ 500px до разумного */
    padding: 10px 0;
    margin-left: 500px; /* Отступ слева от контейнера */
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px; /* 16px → гибкий отступ */
  padding: 0 1rem;
}


.discord-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: left;
  
  /* Ключевое: автоматический отступ слева → блок уходит вправо */
  margin-left: 0;
  margin-right: auto;
  
  /* Убираем жёсткий padding справа */
  padding: 0 1rem; /* небольшие внутренние отступы */
}

.discord-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px → 0.5rem */
  max-width: 200px;
}


.discord-text {
  margin: 0;
  color: white;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: right;
  
  /* Ключевые свойства для одной линии */
  white-space: nowrap;    /* Запрещает переносы */
  overflow: hidden;       /* Скрывает выходящий за границы текст */
  text-overflow: ellipsis; /* Добавляет "..." в конце обрезанного текста (опционально) */
}

.discord-btn {
  display: inline-block;
  color: gold;
  padding: 1px 0.2rem; /* 2px 5px → 0.125 0.3125rem */
  font-size: 0.8125rem; /* 13px → 0.8125rem */
  text-decoration: none;
  text-align: right;
  width: 100%;
}

.discord-btn:hover {
  transform: translateY(-1px);
}

.discord-btn:active {
  transform: translateY(0);
}

.discord-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Если нужно, чтобы ссылка занимала всю ширину */
  width: 100%;
}

.discord-icon {
  width: 5.125rem; /* 50px → 3.125rem */
  height: 5.125rem;
  object-fit: contain;
  filter: brightness(100%);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.discord-icon:hover {
  transform: scale(1.1);
  filter: brightness(80%);
}


.ip-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: 0;
  gap: 0.125rem; /* 1px → 2px (0.125rem) */
  padding: 0 3.125rem 0; /* 50px → 3.125rem */
  max-width: 100%; /* Не шире родителя */
}

.ip-icon {
  width: 3.125rem; /* 50px → 3.125rem */
  height: 3.125rem;
  object-fit: contain;
  flex-shrink: 0;
}

.ip-content {
  display: flex;
  align-items: center; /* Исправлено: было 500px */
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0; /* Позволяет сжиматься при нехватке места */
}

.ip-info {
  margin: 0;
  color: white;
  font-size: 1.25rem; /* 20px → 1.25rem */
  white-space: nowrap; /* Текст в одну строку */
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-btn {
  background: transparent;
  color: gold;
  border:  rgba(255, 255, 255, 0.3); /* Исправлено: добавлен стиль border */
  padding: 0.5rem 0.3125rem; /* 8px 5px → 0.5 0.3125rem */
  font-size: 0.75rem; /* 12px → 0.75rem */
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
  width: fit-content;
  outline: none;
  white-space: nowrap; /* Кнопка не сжимается */
}

.ip-btn:hover {
  transform: translateY(-1px);
}

.ip-btn:active {
  transform: translateY(0);
}

header {
  display: flex;
  align-items: center;          /* Вертикальное выравнивание по центру */
  justify-content: center;      /* Горизонтальное выравнивание по центру */
  max-width: 220px;
  margin: 0 auto;                 /* Центрирует сам header в родителе */
  padding: 1rem 0;               /* Добавили отступы сверху/снизу */
  margin-top: 0;
}

.header-icon-only {
  display: flex;                 /* flex, а не center */
  justify-content: center;
  align-items: center;
  width: 100%;                   /* Занимает всю ширину контейнера */
  padding: 10px 0;
}

.header-image-icon {
  width: 250px;
  height: 250px;
  object-fit: contain;
  filter: brightness(100%);
  transition: transform 0.2s ease, filter 0.2s ease;
  max-width: 100%;             /* Не выходит за границы родителя */
}

/* Эффект при наведении */
.header-image-icon:hover {
  transform: scale(1.1);
  filter: brightness(80%);
}

header h1 {
  font-size: 2.5rem;
  margin: 0;                    /* Убрали margin-bottom, чтобы не было лишнего пространства */
  line-height: 1.2;         /* Улучшает читаемость */
}

header p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0.5rem 0 0 0;     /* Контролируемые отступы */
}
main {
    flex: 1; /* Занимаем оставшееся пространство */
    max-width: 5000px;
    margin: 0;
    padding: 2rem;
    background: #0a1a3a; /* Тёмно‑синий фон */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


footer {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    
    /* Ключевые свойства для размещения внизу */
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    gap: 20px;
}


.section-title {
  grid-column: 1 / -1; /* Занимает всю ширину сетки */
  margin: 0 0 1.5rem 0; /* Отступ снизу — чтобы отделить от блоков */
  padding: 0.5rem 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  background-color: rgba(42, 82, 152, 0.1); /* Лёгкий фон (опционально) */
  border-radius: 8px;
}


/* Управление раскладкой — на родительском контейнере */
.donate-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
  gap: 1rem; /* Отступы между блоками (горизонталь/вертикаль) */
  padding: 0 1rem; /* Внутренний отступ по бокам */
  margin: 1rem 0; /* Внешний отступ секции */
  text-align: left; 
}

.donate-page {
  color: white;
  margin: 0 20px;
}

.benefits-truncated {
  margin: 5px 0;
  width: 100%;
  /* Основные свойства для обрезки текста */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Ограничить 3 строками */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.6em; /* 3 строки × line-height */
}

.benefit-item {
  margin: 5px 0;
  font-size: 0.95rem;
  color: #555;
  /* Гарантирует, что текст не выйдет за границы */
  white-space: normal; /* Разрешает переносы */
  line-height: 1.4;
}

/* Дополнительно: стили для маркеров (если нужны) */
.benefit-item::before {
  content: "• ";
  color: #007bff;
  font-weight: bold;
  margin-right: 8px;
}


.package {
  border: 2px solid #e0e0e0;
  border-radius: 0;
  padding: 1.5rem;
  margin: 0;
  transition: transform 0.3s, box-shadow 0.3s;
  background: white;
  border-radius: 5px;
  
  min-width: 230px;
  min-height: 280px;
  max-width: 230px;
  max-height: 280px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box; /* Важно! */
}

.package-image {
    display: block;
    max-width: 75%;
    height: auto;
    margin: 0 auto 8px;
    border-radius: 8px;
}

.package:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.1);
}

.package h3 {
  color: #2a5298;
  margin-bottom: 0.9rem;
  font-size: 1.3rem;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.package p {
  margin: 0.1rem 0;
  color: #555;
  max-width: 80%;
  text-align: left; /* Или center, если нужно */
  overflow-wrap: break-word;
  word-break: break-word;
}

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: #2a5298;
    color: white;
    font-weight: bold;
    margin-right: 10px;
}

form {
    margin-top: 1.2rem;
}

form input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

form button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #c0392b;
}

.messages {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: 8px;
}

.messages .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.messages .error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.page-container {
    width: 100%;
    max-width: 1460px;
    display: flex;
    flex-direction: row;          /* Элементы идут в ряд (горизонтально) */
    flex-wrap: nowrap;           /* Запрещаем перенос на новую строку */
    gap: 20px;                   /* Отступы между элементами (можно менять) */
    padding: 0 20px;             /* Боковые отступы */
    box-sizing: border-box;
    margin: 0 auto;              /* Центрируем контейнер */
    align-items: flex-start;   /* Выравниваем элементы по верхнему краю */
}

.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Больше пространства между блоками */
  flex: 0 0 220px;
  height: auto;
}

.sidebar-left-1,
.sidebar-left-2 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px; /* Скругление чуть больше */
  padding: 20px; /* Оптимальный отступ внутри блока */
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  /* Убираем display: flex — он не нужен для текста */
}

.sidebar-left-1 {
  background: rgba(255, 255, 255, 0.15);
}

.sidebar-left-2 {
  background: rgba(255, 255, 255, 0.1);
}

/* Стили для заголовков */
.sidebar-left-1 h3,
.sidebar-left-2 h3 {
  margin: 0 0 10px 0; /* Отступ снизу от заголовка */
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  text-align: center; /* Центрируем заголовок */
}

/* Стили для абзацев */
.sidebar-left-1 p,
.sidebar-left-2 p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  word-wrap: break-word; /* Перенос длинных слов */
  text-align: center; /* Центрируем текст абзаца */
}


/* Адаптивность: на малых экранах делаем блоки вертикальными */
@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
    align-items: center;
  }

  .sidebar-wrapper,
  main {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .news-tiles-container {
    grid-template-columns: 1fr;
  }

  .header-wrapper,
  nav {
    flex-direction: column;
    text-align: center;
  }

  .nav-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Мобильные телефоны (480px и меньше) */
@media (max-width: 480px) {
  body {
    padding: 1rem 0.75rem;
    gap: 0.5rem;
  }

  header h1 {
    font-size: 1.75rem;
  }

  header p {
    font-size: 0.9rem;
  }

  .news-tiles-container {
    gap: 0.75rem;
    padding: 0.75rem 0;
  }

  .tile-image {
    height: 150px;
  }

  .image-text-overlay {
    padding: 0.75rem;
  }

  .read-more {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
  }

  footer {
    padding: 0.75rem 0;
    font-size: 0.8rem;
  }

  form input,
  form button {
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
  }
  
  .discord-container,
  .ip-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
   gap: 1rem;
  }
}

@media (max-width: 480px) {
  .flex-row {
    padding: 0.75rem;
    gap: 1rem;
  }

  .ip-container,
  .discord-container {
    padding: 0.5rem 0;
  }

  .ip-icon,
  .discord-icon {
    width: 40px;
    height: 40px;
  }

  .ip-btn,
  .discord-btn {
    font-size: 0.875rem; /* ~14px */
    padding: 0.5rem 1rem;
  }

  .discord-text p {
    font-size: 0.9rem; /* Немного уменьшаем текст */
    margin: 0;
  }

  header {
    margin-bottom: 0.75rem;
  }
}

/* Для очень узких экранов (например, портретный режим на смартфонах) */
@media (max-width: 360px) {
  .flex-row {
    padding: 0.5rem;
  }

  .ip-btn,
  .discord-btn {
    font-size: 0.8rem; /* ~13px */
    padding: 0.4rem 0.8rem;
  }

  .discord-text p {
    font-size: 0.85rem;
  }
}