/* --- Змінні та Базові стилі --- */
:root {
  --bg-color-dark: #1a1e23; /* Темно-сіро-синій */
  --text-color-dark: #e0e0e0;
  --card-bg-dark: #2c313a;
  --border-color-dark: #444c56;
  --accent-color-dark: #007bff; /* Синій (Україна) */
  --secondary-accent-dark: #ffc107; /* Жовтий (Україна) */
  --minecraft-green-dark: #59A95C; /* Зелений, як трава в Minecraft */
  --minecraft-brown-dark: #8B4513; /* Коричневий, як земля/дерево */
  --accent-color-focus: rgba(0, 123, 255, 0.25);
  --bg-color-light: #f4f6f8;
  --text-color-light: #212529;
  --card-bg-light: #ffffff;
  --border-color-light: #dee2e6;
  --accent-color-light: #0056b3;
  --secondary-accent-light: #d9a406;
  --minecraft-green-light: #6BCB77;
  --minecraft-brown-light: #A0522D;

  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-minecraft: 'Minecraftia', 'Press Start 2P', cursive; /* Приклад піксельного шрифту, якщо є */
}

html[data-theme="dark"] {
  --bg-color: var(--bg-color-dark);
  --text-color: var(--text-color-dark);
  --card-bg: var(--card-bg-dark);
  --border-color: var(--border-color-dark);
  --accent-color: var(--accent-color-dark);
  --secondary-accent: var(--secondary-accent-dark);
  --minecraft-green: var(--minecraft-green-dark);
  --minecraft-brown: var(--minecraft-brown-dark);
  --link-hover-color: var(--secondary-accent-dark);
}

html[data-theme="light"] {
  --bg-color: var(--bg-color-light);
  --text-color: var(--text-color-light);
  --card-bg: var(--card-bg-light);
  --border-color: var(--border-color-light);
  --accent-color: var(--accent-color-light);
  --secondary-accent: var(--secondary-accent-light);
  --minecraft-green: var(--minecraft-green-light);
  --minecraft-brown: var(--minecraft-brown-light);
  --link-hover-color: var(--accent-color-light); /* Можна зробити інший колір для світлої теми */
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
  display: flex; /* Для притискання футера */
  flex-direction: column; /* Для притискання футера */
  min-height: 100vh; /* Для притискання футера */
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}


main {
  flex-grow: 1; /* Дозволяє main зайняти доступний простір, притискаючи футер */
}



h1, h2, h3 {
  color: var(--text-color); /* Або specific color if needed */
}
h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5em;
}

.ukraine-blue { color: var(--accent-color); }
.ukraine-yellow { color: var(--secondary-accent); }

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--secondary-accent);
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Забирає зайвий відступ знизу */
}
/* --- Header --- */
header {
  background-color: var(--card-bg);
  padding: 10px 0;
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header .container {
  display: flex;
  justify-content: space-between; /* Розтягує лого вліво, решту вправо */
  align-items: center;
  position: relative;
}
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 1001;
 margin-right: auto; /* Забезпечить, щоб лого було зліва, а гамбургер справа */
}
.logo {
  height: 35px; /* Зменшено для мобільних */
  margin-right: 8px;
}
header h1 {
  font-size: 1.4em; /* Зменшено для мобільних */
  margin: 0;
  color: var(--text-color);
}

/* --- Desktop Navigation (показується за замовчуванням) --- */
.primary-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center; /* Вирівнюємо кнопку теми по центру з посиланнями */
  gap: 20px;
}
.primary-navigation ul li a {
  font-size: 1em; /* Трохи зменшимо */
  font-weight: 500;
  padding: 5px 0;
  color: var(--text-color); /* Забезпечимо, щоб колір був згідно теми */
}
.primary-navigation ul li a:hover,
.primary-navigation ul li a.active {
  color: var(--secondary-accent);
}
.primary-navigation ul li a.active {
  border-bottom: 2px solid var(--secondary-accent);
}

.primary-navigation #theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-size: 1.3em; /* Розмір іконки */
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex; /* Для іконки і тексту, якщо буде */
  align-items: center;
}
.primary-navigation #theme-toggle:hover {
  background-color: var(--border-color);
}
.primary-navigation #theme-toggle .theme-text {
  display: none; /* Текст кнопки теми прихований на десктопі */
}

/* --- Mobile Navigation Toggle (гамбургер) --- */
.mobile-nav-toggle {
  display: none; /* Приховано на десктопі */
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.6rem; /* Трохи зменшимо, якщо потрібно */
  cursor: pointer;
  padding: 0.5em;
  z-index: 1002;
  margin-left: 10px; /* Невеликий відступ від правого краю, якщо потрібно */
}
.mobile-nav-toggle .open-icon,
.mobile-nav-toggle .close-icon {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.mobile-nav-toggle .close-icon {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#theme-toggle { /* Кнопка теми */
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-size: 1.3em; /* Трохи зменшимо */
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 15px; /* Відступ від навігації або лого */
}
#theme-toggle:hover {
  background-color: var(--border-color);
}


/* --- Top Players Section --- */
#top-players {
  padding: 60px 0;
  background-color: var(--bg-color); /* Або var(--card-bg) для контрасту */
  border-bottom: 1px solid var(--border-color);
}
#top-players h2 {
  margin-bottom: 40px;
}

.leaderboard-container {
  width: 100%;
}
.loading-placeholder,
.error-placeholder {
  text-align: center;
  font-size: 1.2em;
  padding: 40px;
  color: var(--text-color);
}
.error-placeholder {
  color: #ff6b6b;
}

/* --- Подіум для Топ-3 --- */
.leaderboard-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Вирівнюємо по нижньому краю */
  gap: 15px;
  margin-bottom: 40px;
}

.leaderboard-player {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 20px 15px;
  text-align: center;
  width: 160px;
  border: 1px solid var(--border-color);
  position: relative;
  transition: transform 0.2s ease-in-out;
}
.leaderboard-player:hover {
  transform: translateY(-5px);
}

.player-rank-podium {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--text-color);
  color: var(--bg-color);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.1em;
  border: 2px solid var(--bg-color);
}

.player-letter-avatar { /* Для подіуму */
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Можна залишити круглим, це виглядає стильно */
  margin: 15px auto 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.player-letter-avatar-list { /* Для списку */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  flex-shrink: 0; /* Щоб не стискався */
}

.player-name {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-balance {
  font-size: 1em;
  font-weight: 500;
  color: var(--secondary-accent);
}

.podium-crown {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5em;
  color: #ffd700;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

/* Різна висота для п'єдесталу */
.podium-place.place-1 {
  order: 2; /* По центру */
  height: 220px;
  border-color: var(--secondary-accent);
}
.podium-place.place-2 {
  order: 1; /* Зліва */
  height: 200px;
  border-color: var(--accent-color);
}
.podium-place.place-3 {
  order: 3; /* Справа */
  height: 180px;
  border-color: var(--accent-color);
}

/* --- Список для решти гравців --- */
.leaderboard-list {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leaderboard-player-list-item {
  display: flex;
  align-items: center;
  background-color: var(--card-bg);
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  transition: background-color 0.2s;
}
.leaderboard-player-list-item:hover {
  background-color: var(--border-color);
}

.player-rank-list {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-color);
  opacity: 0.8;
  width: 40px;
  text-align: center;
}


.player-name-list {
  font-weight: 500;
  color: var(--text-color);
  flex-grow: 1; /* Займає доступний простір */
}

.player-balance-list {
  font-weight: bold;
  color: var(--accent-color);
}

/* --- Адаптивність для Топ Гравців --- */
@media (max-width: 600px) {
  .leaderboard-podium {
    flex-direction: column; /* Складаємо п'єдестал в стовпчик */
    align-items: center;
    gap: 30px; /* Збільшимо відступ, бо тепер вони один під одним */
  }
  .podium-place {
    width: 80%; /* Розширимо на мобільних */
    max-width: 250px;
  }
  .podium-place.place-1,
  .podium-place.place-2,
  .podium-place.place-3 {
    order: 0; /* Скидаємо порядок */
    height: auto; /* Автоматична висота */
  }
}

/* --- Mobile Navigation Styles --- */
@media (max-width: 850px) { /* Точка перелому, можеш налаштувати */
  header .container {
    /* Не змінюємо flex-direction, лого і кнопки будуть в ряд */
  }
  .logo {
    height: 35px;
  }
  header h1 {
    font-size: 1.3em; /* Можна ще трохи зменшити */
  }
  .primary-navigation {
    display: block; /* Потрібно для роботи transform */
    position: fixed; /* Або absolute, якщо хедер не sticky */
    inset: 0 0 0 30%; /* Зверху, справа, знизу, зліва (30% - ширина меню) */
    /* Альтернатива: top: 0; right: 0; bottom: 0; width: 70%; */

    background-color: hsl(var(--card-bg-hsl, 220 13% 18%) / 0.7); /* Напівпрозорий фон для області поза меню */
    backdrop-filter: blur(0.5rem); /* Трохи зменшив розмиття */
    -webkit-backdrop-filter: blur(0.5rem);

    padding: min(20vh, 10rem) 2em; /* Відступи всередині меню */
    transform: translateX(100%); /* Сховати меню за межами екрану справа */
    transition: transform 350ms ease-out;
    z-index: 999; /* Нижче кнопки гамбургера, але вище основного контенту */
  }
  /* Стиль для меню, коли воно видиме */
  .primary-navigation[data-visible="true"] {
    transform: translateX(0%);
  }

  .primary-navigation ul {
    flex-direction: column; /* Пункти меню в стовпчик */
    gap: 1.5em; /* Більший відступ між пунктами */
  }
  .primary-navigation ul li a {
    font-size: 1.2em; /* Збільшимо шрифт для мобільного меню */
  }

  .mobile-nav-toggle {
    display: block; /* Показати кнопку гамбургера */
    order: 2; /* Кнопка гамбургера після лого, перед кнопкою теми */
  }
  #theme-toggle {
    order: 3; /* Кнопка теми остання */
    margin-left: auto; /* Притискаємо кнопку теми до правого краю, якщо гамбургер посередині */
  }
  /* Якщо треба гамбургер і кнопку теми поруч справа:
 .logo-link { margin-right: auto; }
 #theme-toggle { margin-left: 10px; }
 */
  .mobile-nav-controls {
    margin-top: 2em; /* Відступ від списку посилань */
    padding-top: 1.5em;
    border-top: 1px solid var(--border-color); /* Розділювач */
    display: flex;
    justify-content: center; /* Центруємо кнопку теми */
  }

  /* Стилі для самої кнопки теми всередині мобільного меню */
  .primary-navigation #theme-toggle {
    background: var(--bg-color); /* Фон як у основного тіла сайту, або інший */
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.5em; /* Можна зробити більшою для зручності */
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* margin-left: 0; /* Скидаємо старий margin */
    /* order: unset; /* Скидаємо старий order */
  }
  .primary-navigation #theme-toggle:hover {
    background-color: var(--border-color);
  }


  /* Перемикання іконок гамбургера */
  .mobile-nav-toggle[aria-expanded="true"] .open-icon { display: none; }
  .mobile-nav-toggle[aria-expanded="true"] .close-icon { display: block; }

  /* Щоб уникнути прокрутки сторінки, коли мобільне меню відкрите */
  body.nav-open {
    overflow: hidden;
  }
}

html {
  scroll-padding-top: 50px; /* Скоригуй висоту хедера */
}


/* --- Hero Section --- */
#hero {
  background: url('../images/hero-background.jpg') no-repeat center center/cover;
  background-color: var(--minecraft-brown);
  text-align: center;
  padding: 60px 0; /* Зменшено падінг */
  min-height: 55vh; /* Зменшено висоту */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Для оверлея */
  color: #fff; /* Текст тепер завжди білий на hero */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55); /* Напівпрозорий темний оверлей */
  z-index: 1;
}

.hero-content {
  position: relative; /* Щоб контент був над оверлеєм */
  z-index: 2;
}
#hero h2 {
  font-size: 2.8em; /* Трохи зменшено */
  margin-bottom: 15px;
  color: #fff;
}
#hero p {
  font-size: 1.2em;
  margin-bottom: 25px;
  color: #eee; /* Трохи світліше для підзаголовку */
}
.ip-container {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 15px 25px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px; /* Відступ до кнопки */
  font-size: 1.2em;
  border: 2px solid var(--secondary-accent-dark); /* Завжди жовта рамка для контрасту */
}
.ip-container span {
  margin-right: 10px;
}
#server-ip {
  font-weight: bold;
  color: var(--secondary-accent-dark); /* Завжди жовтий для IP */
}
#copy-ip-btn {
  background-color: var(--accent-color-dark); /* Завжди синя для кнопки */
  color: white;
  border: none;
  padding: 8px 15px;
  margin-left: 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s;
}
#copy-ip-btn:hover {
  background-color: var(--minecraft-green-dark); /* Зелений при наведенні */
}
#copy-ip-btn i {
  margin-right: 5px;
}
.hero-cta-button { /* Окремий блок для кнопки "Дізнатися більше" */
  margin-top: 15px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s, color 0.3s, border-color 0.3s;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn i { /* Стилі для іконок в кнопках */
  margin-left: 5px;
}
.btn-primary {
  background-color: var(--accent-color);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--secondary-accent);
  color: var(--bg-color-dark);
  transform: translateY(-2px);
}
.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.btn-secondary:hover {
  background-color: var(--accent-color);
  color: #fff; /* Для темної теми текст на кнопці має стати світлим */
}
html[data-theme="light"] .btn-secondary:hover {
  color: #fff; /* Для світлої теж */
}

/* --- Sections --- */
section {
  padding: 60px 0;
}
#about, #news, #links, #guides-content, #article-content {
  border-bottom: 1px solid var(--border-color);
}
#about p {
  font-size: 1.1em;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* --- News Section --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.news-item {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.news-item img.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 15px;
}
.news-item h3 {
  margin-top: 0;
  color: var(--accent-color); /* Тепер береться з змінних */
  font-size: 1.4em;
}
.news-date {
  font-size: 0.9em;
  color: var(--text-color); /* Змінено для кращої читабельності */
  opacity: 0.8;
  margin-bottom: 10px;
}
.news-item p {
  flex-grow: 1;
  margin-bottom: 20px;
}

/* --- Links Section --- */
.links-columns {
  display: flex;
  flex-wrap: wrap; /* Для адаптивності */
  gap: 40px; /* Відстань між колонками */
  justify-content: space-around; /* Розподілити простір */
}
.links-column {
  flex: 1; /* Колонки займають однакову ширину */
  min-width: 280px; /* Мінімальна ширина колонки */
  background-color: var(--card-bg);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.links-column h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: var(--accent-color);
  border-bottom: 2px solid var(--secondary-accent);
  padding-bottom: 10px;
}
.links-column h3 i {
  margin-right: 10px;
}
.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links-list li {
  margin-bottom: 12px;
}
.links-list li a {
  display: flex; /* Для вирівнювання іконки та тексту */
  align-items: center;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.2s, color 0.2s;
  font-size: 1.1em;
  border: 1px solid transparent; /* Для ефекту при наведенні */
}
.links-list li a:hover {
  background-color: var(--border-color); /* Легкий фон при наведенні */
  color: var(--link-hover-color); /* Використовуємо змінну для кольору при наведенні */
  border-color: var(--accent-color);
}
.links-list li a i {
  margin-right: 12px;
  font-size: 1.2em; /* Розмір іконки */
  width: 20px; /* Фіксована ширина для вирівнювання */
  text-align: center;
  color: var(--secondary-accent); /* Іконки жовті */
}
html[data-theme="light"] .links-list li a i {
  color: var(--accent-color-light); /* На світлій темі іконки можуть бути синіми */
}

/* --- Gallery Section --- */
#gallery-section {
  padding-bottom: 60px;
}
.gallery-intro {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-loading {
  text-align: center;
  font-size: 1.2em;
  padding: 40px;
  color: var(--text-color);
}

.gallery-grid {
  display: grid;
  /* 3 колонки, кожна займає мінімум 280px, максимум 1fr (рівномірно) */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
/* Для кращого вигляду на різних екранах, можна уточнити кількість колонок */
@media (min-width: 600px) { /* 2 колонки на планшетах */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) { /* 3 колонки на десктопах */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


.gallery-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column; /* Щоб підпис був під картинкою */
  height: 300px; /* Фіксована висота для картки, можна налаштувати */
}
.gallery-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.gallery-item img {
  width: 100%;
  height: 75%; /* Зображення займає більшу частину картки */
  object-fit: cover; /* Обрізає зображення, щоб воно заповнило контейнер */
  display: block;
}
.gallery-item-info {
  padding: 12px 15px;
  font-size: 0.9em;
  text-align: center;
  color: var(--text-color);
  border-top: 1px solid var(--border-color);
  flex-grow: 1; /* Займає решту простору */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gallery-item-info .author {
  font-weight: bold;
  color: var(--accent-color);
  display: block; /* Щоб був з нового рядка */
  margin-bottom: 3px;
}
.gallery-item-info .title {
  display: block;
  font-style: italic;
  opacity: 0.8;
}

/* --- Pagination Controls --- */
.pagination-controls {
  text-align: center;
  margin-top: 30px;
}
.pagination-controls button, .pagination-controls span {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 18px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s;
}
.pagination-controls button:hover:not(:disabled) {
  background-color: var(--secondary-accent);
  color: var(--bg-color-dark);
}
.pagination-controls button:disabled {
  background-color: var(--border-color);
  color: var(--text-color);
  opacity: 0.7;
  cursor: not-allowed;
}
.pagination-controls .page-number {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  cursor: default;
}
.pagination-controls .page-number.current-page {
  background-color: var(--secondary-accent);
  color: var(--bg-color-dark);
  font-weight: bold;
  border-color: var(--secondary-accent);
}

/* --- Lightbox Modal --- */
.lightbox-modal {
  display: none; /* Приховано за замовчуванням */
  position: fixed;
  z-index: 1001; /* Вище за інші елементи */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Якщо зображення велике */
  background-color: rgba(0, 0, 0, 0.9); /* Затемнення фону */
  align-items: center; /* Вертикальне центрування */
  justify-content: center; /* Горизонтальне центрування */
  padding: 20px; /* Відступи, щоб контент не прилипав до країв */
  box-sizing: border-box;
}
.lightbox-modal.active {
  display: flex; /* Показуємо як flex для центрування */
}
.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh; /* Максимальна висота зображення */
  animation: lightboxZoom 0.3s ease-out;
}
@keyframes lightboxZoom {
  from {transform: scale(0.7); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}
.lightbox-caption {
  text-align: center;
  color: #ccc;
  padding: 15px 0;
  font-size: 1.1em;
  position: absolute; /* Позиціонування підпису */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
.lightbox-caption .author {
  font-weight: bold;
  color: var(--secondary-accent-dark);
}
.lightbox-caption .title {
  font-style: italic;
}
.lightbox-close-btn {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1002;
}
.lightbox-close-btn:hover,
.lightbox-close-btn:focus {
  color: #bbb;
  text-decoration: none;
}

/* Стрілки для лайтбоксу */
.lightbox-prev,
.lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -30px; /* Половина висоти стрілки */
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 1002;
  background-color: rgba(0,0,0,0.3);
}
.lightbox-prev {
  left: 20px;
  border-radius: 3px 0 0 3px;
}
.lightbox-next {
  right: 20px;
  border-radius: 0 3px 3px 0;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(255,255,255,0.2);
}

/* --- About Section Specific Styles --- */
#about {
  padding-top: 40px; /* Можливо, менший верхній падінг, якщо вже є h2 */
  line-height: 1.7; /* Для кращої читабельності довгого тексту */
}

#about h2 { /* Головний заголовок секції "Про сервер" */
  font-size: 2.8em;
  margin-bottom: 30px;
}

#about h3 { /* Підзаголовки типу "Два Світи", "Чому обирають" */
  font-size: 2em;
  color: var(--accent-color);
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid var(--secondary-accent);
  padding-bottom: 10px;
}
#about h3 i {
  margin-right: 10px;
  color: var(--secondary-accent);
}

#about h4 { /* Заголовки для "Захищена Зона", "Дикі Землі" */
  font-size: 1.6em;
  color: var(--text-color);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color);
}
#about h4 i {
  margin-right: 8px;
  width: 25px; /* Для вирівнювання іконок */
}

#about h5 { /* Заголовки для переваг у "Чому обирають" */
  font-size: 1.3em;
  color: var(--secondary-accent);
  margin-bottom: 10px;
}
#about h5 i {
  margin-right: 8px;
}

.about-intro {
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-color);
}
.about-intro-details {
  font-size: 1.1em;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 30px auto;
}

.section-subtitle {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-color);
  opacity: 0.9;
}

.about-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 50px auto; /* Відступи зверху/знизу */
  width: 80%;
  opacity: 0.5;
}

/* --- Worlds Section --- */
.worlds-container {
  display: flex;
  flex-wrap: wrap; /* Для адаптивності */
  gap: 30px; /* Відстань між блоками */
  margin-top: 20px;
}
.world-zone {
  flex: 1; /* Розтягуються, щоб заповнити простір */
  min-width: 300px; /* Мінімальна ширина для кожного блоку */
  padding: 25px;
  border-radius: 8px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}
.world-zone.protected-zone h4 i { color: #28a745; } /* Зелений для захищеної */
.world-zone.wild-lands h4 i { color: #dc3545; } /* Червоний для диких */

.world-zone p {
  margin-bottom: 12px;
}
.world-zone p strong i { /* Іконки в параграфах "Територія", "Призначення" */
  margin-right: 6px;
  color: var(--secondary-accent); /* Або інший колір для акценту */
  width: 18px;
  display: inline-block;
  text-align: center;
}
.world-zone ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 15px;
}
.world-zone ul li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 8px;
}
.world-zone ul li::before {
  content: "\f105"; /* Font Awesome angle-right */
  font-family: "Font Awesome 5 Free"; /* Або 6 залежно від версії */
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent-color);
}

/* --- Features Grid --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  margin-top: 20px;
}
.feature-item {
  background-color: var(--card-bg);
  padding: 20px 25px;
  border-radius: 8px;
  border-left: 4px solid var(--accent-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.feature-item ul {
  list-style: disc;
  padding-left: 20px;
}
.feature-item ul li {
  margin-bottom: 5px;
}

/* --- Playstyles & Conclusion --- */
.playstyles-list {
  list-style: none;
  padding-left: 0;
  text-align: center; /* Або можна зробити колонками */
  margin-bottom: 20px;
}
.playstyles-list li {
  display: inline-block; /* Або flex для кращого контролю */
  margin: 5px 10px;
  padding: 8px 15px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px; /* Овальні "теги" */
  font-size: 1em;
}
.playstyles-list li strong {
  color: var(--secondary-accent);
}
.about-conclusion {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 20px;
}

/* --- Join Us Section --- */
.join-us-section {
  background-color: var(--card-bg);
  padding: 30px;
  border-radius: 8px;
  margin-top: 30px;
  text-align: center;
  border: 2px solid var(--accent-color);
}
.join-us-section h3 {
  margin-top: 0; /* Скидаємо верхній відступ для h3 всередині */
  border-bottom: none; /* Прибираємо лінію під заголовком */
  padding-bottom: 0;
}
.server-info-box {
  background-color: var(--bg-color); /* Трохи інший фон для виділення */
  border: 1px solid var(--border-color);
  padding: 15px 20px;
  border-radius: 6px;
  margin: 20px auto;
  display: inline-block; /* Щоб не розтягувався на всю ширину */
  text-align: left;
}
.server-info-box p {
  margin-bottom: 10px;
  font-size: 1.1em;
}
.server-info-box p:last-child {
  margin-bottom: 0;
}
.server-info-box code {
  background-color: var(--border-color);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--secondary-accent);
  font-weight: bold;
}
.server-info-box i {
  margin-right: 8px;
  color: var(--accent-color);
}
.final-cta {
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 20px;
  color: var(--secondary-accent);
}

/* --- Links Reminder --- */
.about-links-reminder {
  margin-top: 40px;
  padding: 15px;
  background-color: var(--card-bg-light); /* Може бути світлішим */
  border-left: 5px solid var(--accent-color-light);
  border-radius: 0 5px 5px 0;
  font-size: 0.95em;
  text-align: center;
}
html[data-theme="dark"] .about-links-reminder {
  background-color: var(--card-bg); /* Або #343a40 для темного варіанту */
  border-left-color: var(--accent-color);
}
.about-links-reminder p i {
  margin-right: 8px;
}
.about-links-reminder .btn { /* Якщо додавати кнопки */
  margin: 10px 5px 0 5px;
}


/* Адаптивність для секції "Про сервер" */
@media (max-width: 768px) {
  #about h2 {
    font-size: 2.2em;
  }
  #about h3 {
    font-size: 1.8em;
  }
  #about h4 {
    font-size: 1.4em;
  }
  .worlds-container {
    flex-direction: column; /* Блоки один під одним */
  }
  .features-grid {
    grid-template-columns: 1fr; /* Один стовпець на мобільних */
  }
  .playstyles-list li {
    display: block; /* Кожен стиль з нового рядка */
    margin-left: auto;
    margin-right: auto;
    max-width: 250px; /* Щоб не були надто широкими */
  }
}

/* --- Guides Page --- */
#guides-content h2 {
  margin-bottom: 40px;
}

.collapsible-guide { /* Замість .guide-item, якщо він був */
  background-color: var(--card-bg);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.collapsible-guide .guide-summary {
  padding: 20px 25px;
  cursor: pointer;
  display: block; /* Важливо для правильної роботи summary */
  font-weight: bold;
  color: var(--accent-color);
  transition: background-color 0.2s;
  position: relative; /* Для кастомної стрілки */
}

.collapsible-guide .guide-summary h3 { /* Заголовок всередині summary */
  margin: 0;
  font-size: 1.5em;
  color: inherit; /* Успадковує колір від .guide-summary */
}

.collapsible-guide .guide-summary:hover {
  background-color: var(--border-color);
}

/* Кастомна стрілка для details/summary (опціонально, браузери мають свою) */
.collapsible-guide .guide-summary::marker,
.collapsible-guide .guide-summary::-webkit-details-marker {
  /* display: none; /* Якщо хочеш повністю кастомну стрілку */
}
.collapsible-guide .guide-summary::before { /* Кастомна стрілка */
  content: '\25B6'; /* ► */
  position: absolute; /* Можна налаштувати позицію */
  right: 25px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease-in-out;
  font-size: 1em; /* Розмір стрілки */
  color: var(--text-color); /* Колір стрілки */
}
.collapsible-guide[open] > .guide-summary::before {
  transform: translateY(-50%) rotate(90deg); /* ▼ */
}
/* --- Alert Boxes for Guides --- */
.alert {
  padding: 15px 20px;
  margin: 20px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.95em;
}
.alert i { /* Іконка в сповіщенні */
  margin-right: 10px;
  font-size: 1.2em;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
html[data-theme="dark"] .alert-info {
  color: #90e0ef;
  background-color: #1a505c;
  border-color: #2a607c;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
html[data-theme="dark"] .alert-warning {
  color: #ffc107;
  background-color: #5d4918;
  border-color: #7c6028;
}

/* Стилі для тегу <pre> в гайдах (для прикладів табличок) */
.guide-content-wrapper pre {
  background-color: var(--bg-color); /* Відрізняється від --card-bg */
  padding: 15px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  overflow-x: auto; /* Горизонтальна прокрутка, якщо текст не влазить */
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--text-color);
  white-space: pre-wrap; /* Дозволяє переносити рядки, якщо це можливо */
}
html[data-theme="light"] .guide-content-wrapper pre {
  background-color: #e9ecef; /* Світліший фон для світлої теми */
}

.guide-content-wrapper { /* Вміст гайду */
  padding: 0px 25px 25px 25px;
  border-top: 1px solid var(--border-color); /* Лінія під заголовком */
}

/* Стилі для вкладених ЧаПів (якщо вони є) */
.guide-content-wrapper details {
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(0,0,0,0.05); /* Легкий фон, щоб відрізняти */
  border-radius: 4px;
}
html[data-theme="light"] .guide-content-wrapper details {
  background-color: rgba(0,0,0,0.02);
}
.guide-content-wrapper details summary {
  font-weight: bold;
  cursor: pointer;
  padding: 8px 0;
  font-size: 1.1em;
}
.guide-content-wrapper details p {
  padding-left: 20px;
  margin-top: 10px;
}
.guide-image {
  max-width: 80%;
  margin: 20px auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 1px solid var(--border-color);
}

/* --- All News Page (news.html) --- */
#all-news-section {
  padding-bottom: 60px;
}
#all-news-section h2 { /* Заголовок сторінки всіх новин */
  font-size: 2.5em; /* Такий же, як інші заголовки секцій */
  margin-bottom: 40px;
}

.news-list-full .full-news-article-item {
  background-color: var(--card-bg);
  padding: 30px 35px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 40px; /* Відстань між новинами */
}
.news-list-full .full-news-article-item:last-child {
  margin-bottom: 0;
}

.news-list-full .article-title-list {
  font-size: 2em; /* Трохи менше, ніж заголовок окремої сторінки статті */
  color: var(--accent-color);
  margin-bottom: 8px;
  text-align: left;
}
.news-list-full .article-meta-list {
  font-size: 0.9em;
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 10px;
}
.news-list-full .article-date { /* Спадкується з .article-meta */
  font-weight: bold;
}
.news-list-full .article-image-list {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 25px;
  border: 1px solid var(--border-color);
}
.news-list-full .article-body-list {
  line-height: 1.7;
}
.news-list-full .article-body-list h3, /* Заголовки всередині новини */
.news-list-full .article-body-list h4 {
  color: var(--secondary-accent);
  margin-top: 25px;
  margin-bottom: 10px;
}
.news-list-full .article-body-list p {
  margin-bottom: 15px;
}
.news-list-full .article-body-list ul,
.news-list-full .article-body-list ol {
  margin-bottom: 15px;
  padding-left: 30px; /* Або 25px */
}
.news-list-full .article-body-list li {
  margin-bottom: 8px;
}
.news-list-full .article-body-list a {
  text-decoration: underline;
  color: var(--accent-color);
}
.news-list-full .article-body-list a:hover {
  color: var(--secondary-accent);
}

/* Адаптивність для списку новин */
@media (max-width: 768px) {
  .news-list-full .article-title-list {
    font-size: 1.7em;
  }
  .news-list-full .full-news-article-item {
    padding: 20px 25px;
  }
}


/* --- Footer --- */
footer {
  background-color: var(--card-bg-dark); /* Завжди темний футер, або var(--card-bg) */
  color: var(--text-color-dark); /* Завжди світлий текст, або var(--text-color) */
  text-align: center;
  padding: 30px 0;
  margin-top: auto; /* Притискає футер донизу, якщо контенту мало */
  border-top: 2px solid var(--accent-color);
}
footer p {
  margin: 5px 0;
  font-size: 0.9em;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {

  #hero {
    min-height: 60vh; /* Трохи більше на мобільних для контенту */
    padding: 40px 0;
  }
  #hero h2 {
    font-size: 2em;
  }
  #hero p {
    font-size: 1em;
  }
  .ip-container {
    font-size: 1em;
    padding: 10px 15px;
    flex-direction: column; /* IP та кнопка копіювання стовпчиком */
    align-items: center;
  }
  #copy-ip-btn {
    margin-left: 0;
    margin-top: 10px;
    padding: 8px 12px;
  }

  h2 { /* Загальний розмір заголовків секцій */
    font-size: 2em;
  }
  p { /* Загальний розмір заголовків секцій */
    font-size: 1em;
  }
  #about h3 { /* Загальний розмір заголовків секцій */
    font-size: 1.5em;
  }
  #about h2 { /* Загальний розмір заголовків секцій */
    font-size: 2em;
  }
  #about p { /* Загальний розмір заголовків секцій */
    font-size: 1em;
  }

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

  .links-columns {
    flex-direction: column; /* Колонки посилань одна під одною */
    gap: 25px;
  }
  .links-column {
    min-width: auto; /* Забираємо мінімальну ширину */
  }

  .guide-image {
    max-width: 100%; /* На мобільних зображення в гайдах на всю ширину */
  }

  .full-news-article {
    padding: 20px;
  }
  .article-title {
    font-size: 1.8em;
  }

  /* --- Guides Content - Mobile Adjustments --- */
  #guides-content h2 { /* Заголовок сторінки гайдів */
    font-size: 2em; /* Якщо вже є, можна не дублювати */
  }

  .collapsible-guide .guide-summary h3 { /* Заголовок самого гайду (в summary) */
    font-size: 1.3em; /* Трохи зменшимо */
  }
  .collapsible-guide .guide-summary {
    padding: 15px 20px; /* Зменшимо падінги summary */
  }
  .collapsible-guide .guide-summary::before { /* Стрілочка */
    right: 20px;
  }


  .guide-content-wrapper {
    padding: 15px 20px 20px 20px; /* Зменшимо внутрішні відступи контенту гайду */
  }

  .guide-content-wrapper p,
  .guide-content-wrapper li {
    font-size: 0.95em; /* Зменшимо основний текст гайдів */
    line-height: 1.6; /* Можна трохи збільшити міжрядковий інтервал для читабельності */
  }

  .guide-content-wrapper h4 { /* Підзаголовки всередині гайду */
    font-size: 1.2em;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .guide-content-wrapper h5 { /* Ще менші підзаголовки */
    font-size: 1.1em;
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .guide-content-wrapper ul,
  .guide-content-wrapper ol {
    padding-left: 20px; /* Зменшимо відступ для списків */
    margin-bottom: 15px;
  }
  .guide-content-wrapper ul li::before { /* Маркер для списків, якщо використовується Font Awesome */
    top: 2px; /* Можливо, треба буде підкоригувати позицію маркера */
  }

  .guide-content-wrapper code {
    font-size: 0.85em; /* Зменшимо розмір коду */
    padding: 2px 5px;
  }

  .guide-content-wrapper pre { /* Блоки з прикладами коду/табличок */
    font-size: 0.8em;
    padding: 10px;
  }

  .guide-image {
    max-width: 100%; /* Зображення на всю доступну ширину */
    margin: 15px auto; /* Зменшимо відступи для зображень */
  }

  /* Стилі для вкладених details/summary (ЧаПи всередині гайдів) */
  .guide-content-wrapper details {
    padding: 8px; /* Зменшимо падінги */
    margin-bottom: 10px;
  }
  .guide-content-wrapper details summary {
    font-size: 1em; /* Зменшимо summary для ЧаПів */
    padding: 6px 0;
  }
  .guide-content-wrapper details p { /* Текст всередині ЧаПів */
    padding-left: 15px; /* Зменшимо відступ */
    font-size: 0.9em; /* Можна ще трохи зменшити, якщо ЧаПи дуже детальні */
  }

  /* Стилі для Alert-блоків у гайдах на мобільних */
  .guide-content-wrapper .alert {
    padding: 10px 15px;
    font-size: 0.9em;
  }
  .guide-content-wrapper .alert i {
    font-size: 1.1em; /* Відносний розмір іконки */
  }
}