/* Общие стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background-color: #1a1a1a;
  color: #fff;
  position: relative;
  /* overflow: hidden;  - если скрыть прокрутку, то фиксированные элементы могут вести себя странно */
}

/* Контейнер приложения */
#app-container {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Фон */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("images/forest-background.jpg") no-repeat center center/cover;
  z-index: -1;
}

/* Header — баланс и меню */
#header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  background: transparent;  /* убрано затемнение */
  padding-top: 10px;
  height: 80px;
  z-index: 100;
}

/* Баланс игрока */
#currency-container {
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
  /* Если нужно, можно добавить тень */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
  z-index: 10;
}

.coin-icon,
.diamond-icon {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain;
}

/* Меню */
#menu {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 80px; /* отступ под header */
  padding: 10px;
  position: relative;
  z-index: 5;
}

.menu-button {
  background: rgba(254, 72, 0, 0.7);
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 50px;
  height: 50px;
}

.map-button {
  padding: 15px;
  font-size: 1.5rem;
  width: 60px;
  height: 60px;
}

.menu-button.active {
  background: linear-gradient(145deg, #ff540b, #d41c00);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.5);
}

.menu-button:hover:not(.active) {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 87, 51, 0.7);
}

/* Основное содержимое */
#main-content {
  margin-top: 120px;  /* место для header */
  padding: 20px;
  box-sizing: border-box;
}

/* Вкладки */
.tab-content {
  display: none;
  margin: 20px auto;
  max-width: 800px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.tab-content.active {
  display: block;
  opacity: 1;
  
  transform: translateY(0);
}

/* Карта порталов */
#portal-map {
  position: relative;
  width: 100%;
  height: 600px;
  background: transparent;
  border: none;
  /* Добавляем внутренние отступы, чтобы порталы не доходили до края */
  padding: 20px;
  margin: 20px auto;
}

/* Порталы на карте */
.portal-image {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}

.portal-image:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 20px rgba(255, 87, 51, 0.7);
}

/* Вкладки "Просмотр портала" и "Уничтожение портала" */
#view-portal-tab
 {
  display: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

#view-portal-tab.active,
#destroy-portal-tab.active {
display: block;
}
#destroy-portal-tab {
  display: none;
  margin: 0 auto; /* Убираем лишние отступы */
  max-width: 600px;
  text-align: center;
  padding-top: 20px; /* Отступ сверху */
  position: static; /* Убедитесь, что позиционирование стандартное */
  z-index: 10; /* Убедитесь, что блок выше других элементов */
}

/* Уменьшенная картинка портала */
#portal-image-small {
  width: 100px; /* Фиксированный размер */
  height: 100px; /* Квадратный контейнер */
  background-size: cover; /* Масштабируем изображение */
  background-position: center; /* Центрируем изображение */
  border-radius: 50%; /* Делаем круглой */
  margin: 0 auto 10px; /* Центрируем по горизонтали */
  display: block; /* Убедимся, что элемент блочный */
  overflow: hidden; /* Скрываем все, что выходит за пределы круга */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Базовое свечение */
  position: relative;
  transform: none;
}
/* Большое изображение портала (просмотр) */
#portal-image-large {
  display: block;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin: 0 auto 20px;
  position: relative;
  transform: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Маленькое изображение портала (уничтожение) */
#portal-image-small {
  display: block;
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin: 20px auto;
  transform: none;
}

/* Прогресс-бар здоровья портала */
#portal-health-bar-large,
#portal-health-bar {
  width: 80%;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px auto;
  position: relative;
}

#health-bar-fill-large,
#health-bar-fill {
  height: 100%;
  background: #4caf50;
  width: 100%;
  transition: width 0.5s, background 0.5s;
}

#portal-health-bar-large .hp-text,
#portal-health-bar .hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  z-index: 1;
}

/* Кнопки */
#go-to-destroy,
#select-characters,
#attack-button {
  background: linear-gradient(145deg, #f44336, #d32f2f);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  margin: 10px auto;
  display: block;
}

#go-to-destroy:hover,
#select-characters:hover,
#attack-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 87, 51, 0.7);
}

/* Коллекция персонажей */
#character-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 20px auto;
  max-width: 600px;
}

.character-card {
  position: relative;
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.character-card:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 87, 51, 0.7);
}

.character-card.selected {
  border: 2px solid #00ff00;
  box-shadow: 0 0 20px #00ff00;
}

.character-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.character-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.8rem;
  text-align: center;
  padding: 5px;
}

.character-damage {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #ff9800;
  font-size: 0.8rem;
  padding: 3px 5px;
  border-radius: 5px;
}

/* Магазин */
#shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 20px auto;
  max-width: 800px;
}

.shop-item {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  padding: 10px;
  transition: transform 0.3s;
}

.shop-item:hover {
  transform: scale(1.05);
}

.shop-item img {
  width: 100%;
  border-radius: 10px;
}

.shop-item h3 {
  margin: 10px 0 5px;
  font-size: 1rem;
}

.shop-item p {
  font-size: 0.9rem;
}

.shop-item button {
  background: linear-gradient(145deg, #f44336, #d32f2f);
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 5px;
}

.shop-item button:hover {
  transform: scale(1.05);
}

/* Для вкладок characters, collection, shop, guilds */
#characters,
#collection,
#shop,
#guilds {
  display: none;
}

#characters.active,
#collection.active,
#shop.active,
#guilds.active,
#map.active {
  display: block;
}