/* ========== 1. БАЗА ========== */
*, *::before, *::after { box-sizing: border-box; }
/* Селектор * значит «все элементы». box-sizing:border-box — размер элемента
   считается ВМЕСТЕ с рамками и отступами: меньше сюрпризов при вёрстке. */

body {
  display: flex;
  flex-direction: column;   /* страница = вертикальная колонка: шапка, main, подвал */
  margin: 0;                              /* убрать стандартные отступы браузера */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
                                          /* СИСТЕМНЫЕ шрифты: не качаем ничего лишнего,
                                             на каждом устройстве свой родной шрифт = 0 КБ веса */
  color: #ece7da;                         /* цвет текста: тёплый светлый */
  background-color: #14101c;              /* тёмная подложка, пока картинка не загрузилась */
  background-image:
    linear-gradient(rgba(12, 9, 18, 0.78), rgba(12, 9, 18, 0.78)),
    url("../img/bg.avif");
  /* ДВА слоя фона, верхний первый:
     1) полупрозрачная тёмная плёнка-затемнение (rgba = цвет + прозрачность 0.78),
        чтобы текст читался поверх картинки;
     2) сама картинка. Путь "../" = «выйди из папки css на уровень вверх». */
  background-size: cover;                 /* растянуть на весь экран без полос */
  background-position: center;            /* центрировать */
  background-repeat: no-repeat;           /* не повторять плиткой */
  background-attachment: fixed;           /* ВОТ ЭТО и есть «статичный фон»:
                                             картинка НЕ едет при прокрутке страницы */
  min-height: 100vh;                      /* фон минимум во всю высоту экрана */
}

/* ========== 2. ШАПКА ========== */
.header {
  max-width: 1100px;      /* колонка сайта не шире 1100px: на огромных мониторах текст не расползается */
  margin: 0 auto;         /* магия центрирования: отступы сверху/снизу 0, слева/справа «авто» */
  padding: 32px 16px 0;   /* внутренние отступы: сверху 32, по бокам 16, снизу 0 */
  text-align: center;     /* лого и меню по центру, как на 2b2t */
  width: 100%;
}

.logo {
  display: inline-block;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 5px;                 /* разрядка букв — даёт «монументальность» */
  text-transform: uppercase;
  color: #d9c98c;                      /* песочно-золотой, привет Terraria */
  text-decoration: none;               /* убрать подчёркивание ссылки */
  text-shadow: 0 3px 0 #4a3a17, 0 7px 14px rgba(0, 0, 0, 0.65);
  /* Двойная тень делает объёмные буквы «как лого 2b2t», но весит 0 КБ,
     в отличие от картинки. Позже сможем заменить на <img> с твоим артом. */
}

.menu {
  margin-top: 20px;
  display: flex;                 /* выстроить ссылки в одну строку */
  justify-content: center;       /* по центру */
  flex-wrap: wrap;               /* на узком экране ссылки аккуратно перенесутся на 2-ю строку */
  gap: 6px;                      /* расстояние между ссылками */
  padding: 8px;
  background: rgba(22, 17, 30, 0.88);   /* полупрозрачная панель меню, как на референсе */
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-link {
  color: #cfc8bb;
  text-decoration: none;
  padding: 10px 20px;
}
.menu-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.menu-link.active {              /* класс active ставим ВРУЧНУЮ на ссылку текущей страницы */
  background: #ece7da;
  color: #14101c;
  font-weight: 700;
}

/* ========== 3. КОНТЕНТ ========== */
.content {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 16px;
  flex-grow: 1;             /* main растягивается и съедает всё свободное место страницы */
  width: 100%;
}

.card {
  padding: 32px;
  background: rgba(24, 19, 33, 0.92);   /* полупрозрачная подложка: текст читается на любом фоне */
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.about h1 { margin: 0 0 12px; font-size: 28px; color: #ece7da; }
.about p  { margin: 0; line-height: 1.6; color: #b9b2a6; }

/* ========== 4. БЛОК СЕРВЕРА ========== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* две равные колонки */
  gap: 32px;
}

.server-info {
  padding: 24px;
  background: rgba(35, 28, 45, 0.85);   /* чуть светлее основной карточки */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.server-info h2 {
  margin: 0 0 16px;
  font-size: 20px;
  color: #ece7da;
}

.server-address {
  font-family: "Courier New", monospace;   /* моноширинный шрифт для IP */
  font-size: 18px;
  font-weight: 700;
  color: #d9c98c;                          /* тот же золотой, что у лого */
  margin: 0 0 20px;
  padding: 12px;
  background: rgba(20, 15, 25, 0.9);
  border: 1px solid rgba(217, 201, 140, 0.3);
  border-radius: 4px;
  word-break: break-all;                   /* длинный адрес перенесётся */
  text-align: center;
}

.copy-btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #14101c;
  background: #d9c98c;
  border: none;
  border-radius: 4px;
  cursor: pointer;                         /* курсор-рука при наведении */
  transition: background 0.2s;
}
.copy-btn:hover {
  background: #e8d89c;                     /* светлее при наведении */
}

/* Ссылки на ресурсы */
.server-links {
  display: flex;
  flex-direction: row;      /* БЫЛО column: теперь ссылки в строку, а не в столбец */
  gap: 16px;
  margin-top: 24px;         /* отступ от первого ряда */
  flex-wrap: wrap;          /* на совсем узком экране кнопки перенесутся, а не сожмутся */
}

.link-btn {
  padding: 14px 24px;
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #ece7da;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  transition: background 0.2s;
  flex: 1;    /* каждая кнопка занимает равную долю строки: VK и Discord будут одной ширины */
}
.link-btn:hover {
  background: rgba(45, 38, 55, 0.95);
}

/* ========== 6. ГАЛЕРЕЯ ========== */
.gallery {
  margin-top: 32px;          /* отступ от карточки до галереи */
}

.gallery-title {
  margin: 0 0 20px;
  font-size: 20px;
  color: #ece7da;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* матрица 2x2: две колонки... */
  gap: 16px;                        /* ...равные промежутки и по горизонтали, и по вертикали */
}

.shot-link { display: block; }      /* ссылка-обёртка ведёт себя как блок */

.shot {
  display: block;                   /* убирает микро-щель под картинкой (особенность img) */
  width: 100%;                      /* растянуть на всю ячейку сетки */
  aspect-ratio: 16 / 9;             /* все "рамки" одинаковой пропорции, как кадры видео */
  object-fit: cover;                /* заполнить рамку, обрезав лишнее, НЕ искажая пропорции */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: opacity 0.2s;
}
.shot-link:hover .shot { opacity: 0.85; }   /* лёгкий отклик на наведение */

/* ========== 7. ПОДВАЛ ========== */
.footer {
  margin-top: 48px;                          /* воздух между галереей и подвалом */
  padding: 24px 16px;
  background: rgba(16, 12, 22, 0.92);        /* чуть темнее карточек: страница "закрывается" */
  border-top: 1px solid rgba(255, 255, 255, 0.08);   /* тонкая линия-граница сверху */
}

.footer-inner {
  max-width: 1100px;      /* та же ширина колонки, что у шапки и карточек: визуальная ровность */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;   /* копирайт прижат влево, ссылки вправо */
  align-items: center;              /* по одной вертикальной оси */
  gap: 16px;
  flex-wrap: wrap;                  /* если не помещаются в строку — аккуратно переносятся */
}

.footer-copy {
  margin: 0;
  font-size: 14px;        /* мельче основного текста: подвал не конкурирует с CTA */
  color: #8f887c;         /* приглушённый цвет: та же причина */
}

.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  font-size: 14px;
  color: #b9b2a6;
  text-decoration: none;
}
.footer-links a:hover { color: #ece7da; }

/* ========== 8. МАГАЗИН ========== */
.howto ol {
  margin: 12px 0 0;
  padding-left: 20px;
  line-height: 1.7;
  color: #b9b2a6;
}
.howto, .auto-note { margin-top: 32px; }

.shop-grid {
  display: grid;
  /* Умная витрина: браузер САМ считает, сколько колонок влезет.
     3 товара — 3 колонки; добавишь четвёртый — перестроится без медиазапросов;
     на телефоне — одна колонка. Ноль ручной работы на будущее. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.product {
  position: relative;        /* точка отсчёта для бейджа "временно" */
  display: flex;
  flex-direction: column;    /* карточка = колонка: имя, цена, список, кнопка */
  padding: 24px;
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.product-badge {             /* ярлык, висящий на верхней кромке карточки */
  position: absolute;        /* вырван из потока: не толкает соседей */
  top: -10px;                /* торчит наполовину над карточкой */
  right: 16px;
  padding: 4px 10px;
  background: #d9c98c;
  color: #14101c;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
}

.product-name  { margin: 0 0 12px; font-size: 18px; color: #ece7da; }
.product-price { margin: 0 0 16px; font-size: 32px; font-weight: 800; color: #d9c98c; }

.product-list { margin: 0 0 24px; padding-left: 18px; color: #b9b2a6; line-height: 1.6; }
.product-list li { margin-bottom: 6px; }

.buy-btn {
  margin-top: auto;          /* ГЛАВНЫЙ ТРЮК: прижимает кнопку к низу карточки,
                                какой бы длины ни был список выше */
  padding: 12px;
  text-align: center;
  background: #d9c98c;
  color: #14101c;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}
.buy-btn:hover { background: #e8d89c; }


/* ========== 9. СПОНСОРЫ ========== */
.sponsors-note { margin: 0 0 24px; color: #b9b2a6; line-height: 1.6; }

.sponsor-list {
  margin: 0;
  padding: 0;
  list-style: none;        /* убираем стандартные точки-маркеры списка */
  display: flex;
  flex-wrap: wrap;         /* имена текут строками, сколько влезет */
  gap: 12px;
}

.sponsor {
  padding: 10px 18px;
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid #d9c98c;   /* золотая полоса слева: фирменный знак отличия */
  border-radius: 4px;
  color: #ece7da;
  font-weight: 700;
}

/* ========== 10. ФИЧИ: 4 карточки ========== */
.features { margin-top: 32px; }

.section-title {
  margin: 0 0 24px;
  font-size: 20px;
  color: #ece7da;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-card {
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 24px;
  transition: border-color 0.15s, transform 0.15s;
}
.feature-card:hover {
  border-color: #d9c98c;
  transform: translateY(-3px);
}

.feature-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: rgba(20, 15, 25, 0.9);
  border: 1px solid rgba(217, 201, 140, 0.3);
  border-radius: 4px;
  margin-bottom: 14px;
}

.feature-card h3 { margin: 0 0 8px; font-size: 17px; color: #ece7da; }
.feature-card p  { margin: 0; color: #b9b2a6; font-size: 14px; line-height: 1.5; }

.feature-card code {
  background: rgba(20, 15, 25, 0.9);
  border: 1px solid rgba(217, 201, 140, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #d9c98c;
}

/* ========== 11. ОНБОРДИНГ: 3 шага ========== */
.steps { margin-top: 32px; }

.steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  counter-reset: step;        /* на случай, если захотим автоматическую нумерацию */
}

.steps-list li {
  display: flex;
  gap: 14px;
  padding: 20px;
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.step-num {
  flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #d9c98c;
  color: #14101c;
  font-weight: 700;
  font-size: 18px;
  border-radius: 50%;
}

.step-body h3 { margin: 0 0 6px; font-size: 16px; color: #ece7da; }
.step-body p  { margin: 0; font-size: 14px; line-height: 1.5; color: #b9b2a6; }

.step-body code {
  background: rgba(20, 15, 25, 0.9);
  border: 1px solid rgba(217, 201, 140, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #d9c98c;
}

.copy-btn-secondary {
  /* копия основной кнопки, но в обратных цветах — не перетягивает внимание от CTA */
  background: transparent;
  color: #d9c98c;
  border: 1px solid #d9c98c;
  width: auto;
  padding: 12px 28px;
  display: inline-block;
}
.copy-btn-secondary:hover {
  background: rgba(217, 201, 140, 0.1);
}

/* ========== 12. СТАТУС И ТАБЛИЦА МИРОВ ========== */
.status { margin-top: 32px; }

.status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.status-head .section-title { margin: 0; }

.status-online { text-align: right; }
.stat-value { font-size: 36px; font-weight: 800; color: #d9c98c; line-height: 1; }
.stat-label {
  display: block; font-size: 12px; color: #b9b2a6;
  text-transform: uppercase; letter-spacing: 1px; margin-top: 4px;
}

.world-legend { display: flex; gap: 18px; margin: 0 0 14px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #b9b2a6; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-empty    { background: #6f6a5f; }
.dot-occupied { background: #d9c98c; }
.dot-missing  { background: transparent; border: 1px dashed #55504a; }

/* Таблица миров: компактная сетка ячеек, длинный пул скроллится внутри,
   а не растягивает страницу */
.world-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(20, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.world-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  background: rgba(35, 28, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8f887c;
}
.world-cell b {
  font-family: "Courier New", monospace;   /* номера миров — моноширинно, как IP */
  font-size: 14px; letter-spacing: 0;
  color: #ece7da;
}

/* «Не пуст» — золотой акцент: это то, за чем охотятся и что ищут */
.world-cell.world-occupied { border-color: rgba(217, 201, 140, 0.45); color: #d9c98c; }
.world-cell.world-occupied b { color: #d9c98c; }

/* «Не загружен» — призрак: пунктир и приглушённый цвет */
.world-cell.world-missing {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.06);
  color: #55504a;
}
.world-cell.world-missing b { color: #6f6a5f; }

.world-table::-webkit-scrollbar { width: 8px; }
.world-table::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }

@media (min-width: 900px)  { .features-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .features-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .status-online { text-align: left; }
  .world-table { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); max-height: 260px; }
}

/* ========== 13. АДАПТИВНОСТЬ: новые блоки ========== */
@media (max-width: 768px) {
  .status-grid   { grid-template-columns: 1fr; }       /* статус-виджет столбиком */
  .copy-btn-secondary { width: 100%; }                 /* кнопка во всю ширину */
}

@media (max-width: 480px) {
  .steps-list    { grid-template-columns: 1fr; }
}

/* ========== 5. АДАПТИВНОСТЬ ========== */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;   /* мобильный: одна колонка */
  }
  .about {
    order: -1;                    /* на мобильном описание будет ВЫШЕ блока подключения:
                                     сначала читаем «что это», потом «как зайти» */
  }
  .logo { font-size: 32px; }
  .gallery-grid { grid-template-columns: 1fr; }   /* на телефоне матрица 2x2 становится столбиком */
  .footer-inner {
	flex-direction: column;   /* на телефоне: копирайт над ссылками, столбиком */
	text-align: center;
  }
}

.feature-icon img {
  width: 32px;                 /* иконки Terraria обычно 32×32 или кратные */
  height: 32px;
  object-fit: contain;         /* вписать без искажения пропорций */
  image-rendering: pixelated;  /* ГЛАВНОЕ: пиксели остаются квадратами,
                                  без мыла при масштабировании */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));  /* лёгкая тень, чтобы
                                  иконка не сливалась с тёмной плашкой */
}

/* персональная прибавка для узких/мелких спрайтов */
.feature-icon img.icon-xl {
  width: 48px;
  height: 48px;
}