* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html, .modal-content {
    height: 100%;
    width: 100%;
    font-family: "Russo One", sans-serif;
  }

  

  #main-image-container {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 90vh;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.torn-edge-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.7));
    clip-path: polygon(
        5% 0%, 95% 0%, 100% 5%, 
        100% 95%, 95% 100%, 
        5% 100%, 0% 95%, 
        0% 5%
    );
}

.claim-button {
  position: absolute;
  top: calc(29% + 60px); /* Располагаем кнопку ниже счетчика с отступом */
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 30px;
  background: linear-gradient(135deg, #aeaf4e, #a3a542);
  color: white;
  border: 3px solid rgba(255,255,255,0.5);
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.claim-button:hover {
  background: linear-gradient(135deg, #aeaf4e, #6a6b2c);
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 15px 25px rgba(0,0,0,0.4);
}

/* Адаптивность для маленьких экранов */
@media (max-width: 600px) {
  .dc-coins-counter {
    font-size: 30px; /* Уменьшаем размер текста на маленьких экранах */
    top: 25%; /* Корректируем положение счетчика */
  }

  .claim-button {
    top: calc(25% + 50px); /* Корректируем отступ для кнопки */
    padding: 8px 20px; /* Уменьшаем размер кнопки */
    font-size: 14px; /* Уменьшаем шрифт */
  }
}

/* Адаптивность для средних экранов */
@media (max-width: 900px) and (min-width: 601px) {
  .dc-coins-counter {
    font-size: 35px;
    top: 27%;
  }

  .claim-button {
    top: calc(27% + 55px);
    padding: 9px 25px;
    font-size: 15px;
  }
}

.dc-coins-counter {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,1.5);
  z-index: 10;
  user-select: none;
}



.main-modal-navigation {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 2;
  
}

.main-modal-nav-btn {
  padding: 8px 15px;
  background: rgba(82, 82, 82, 0.8);
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.main-modal-nav-btn:hover {
  background: rgba(100, 100, 100, 0.9);
  transform: scale(1.05);
}

.main-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.main-modal.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

.main-modal-content {
  background-color: rgba(90, 90, 90, 1.2);
  margin: 5% auto;
  padding: 20px;
  border: 2px solid white;
  width: 95%;
  max-width: 900px;
  border-radius: 10px;
  position: relative;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.main-modal.show .main-modal-content {
  opacity: 1;
  transform: scale(1);
}

.main-modal-nav-btn {
  -webkit-tap-highlight-color: transparent; /* Убираем подсветку для iOS */
  -moz-background-inline-policy: transparent; /* Убираем подсветку для Android */
  outline: none; /* Убираем outline */
  user-select: none; /* Запрещаем выделение */
}

.main-modal-nav-btn:focus {
  outline: none;
  box-shadow: none;
}

.main-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 15px;
}

.main-modal-close:hover,
.main-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
  
  #main-screen {
    position: relative;
    background: url('/images/background.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Убедимся, что элементы не выходят за пределы экрана */
  }
  
  #top-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
  }
  
  #currency-container {
    position: absolute; /* Изменили на absolute */
    top: 3%; /* Подняли выше */
    left: 2%; /* Сместили левее */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: fit-content;
    z-index: 2; /* Добавили z-index для корректного наложения */
}
  
#dc-currency {
  width: auto; /* Автоматическая ширина */
  overflow: hidden; /* Скрываем лишнее */
  display: flex;
  align-items: center;
}

#ton-currency {
  width: auto; /* Автоматическая ширина */
  overflow: hidden; /* Скрываем лишнее */
  display: flex;
  align-items: center;
}



  
  #ton-icon {
    width: 30px;  /* Фиксированная ширина */
    height: auto; /* Сохранение пропорций */
    margin-right: 8px;
}

#dc-icon {
  width: 30px;  /* Фиксированная ширина */
  height: auto; /* Сохранение пропорций */
  margin-right: 8px;
}
  
.ton-info, .dc-info {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 5px 10px;
  gap: 2px;
  border: 2px solid white;
  min-width: 5%; /* Одинаковая минимальная ширина */
  justify-content: center; /* Центрирование содержимого */
}

#ton-count, #dc-count {
  font-size: 12px;
  color: white;
  text-align: center;
}

.income-stats {
  position: absolute;
  top: 1%;
  right: 20px;
  display: flex;
  flex-direction: column;
  background-color: rgba(82, 82, 82, 0.8);
  border-radius: 10px;
  padding: 10px;
  gap: 5px;
  z-index: 2;
}

.income-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}

.income-label {
  color: white;
  font-size: 14px;
  margin-right: 10px;
}

.income-value {
  color: #4CAF50;
  font-size: 13px;
  font-weight: bold;
}

#menu-buttons {
  position: fixed; /* Фиксированное положение */
  bottom: 1vh; /* Отступ от низа */
  left: 50%; /* Центрирование по горизонтали */
  transform: translateX(-50%); /* Точное центрирование */
  display: flex;
  justify-content: center; /* Центрируем кнопки внутри */
  align-items: center;
  gap: 1.5vw; /* Увеличили отступ между кнопками для читаемости */
  z-index: 100;
  width: auto; /* Ширина по содержимому */
  max-width: 97%; /* Ограничение ширины */
  padding: 2px 2px; /* Увеличили внутренние отступы */

  border-radius: 10px; /* Закругленные углы */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Тень */
}

#menu-buttons button {
  width: clamp(100px, 18vw, 120px); /* Увеличили: мин 60px, макс 100px */
  height: clamp(100px, 18vw, 120px); /* Та же высота для квадратных кнопок */
  background-color: transparent; /* Прозрачный фон кнопок */
  border: 2px solid #ccc; /* Граница */
  border-radius: 5px;
  text-align: center;
  transition: transform 0.2s ease; /* Эффект при наведении */
  background-color: rgba(68, 68, 68, 0.8); /* Фон контейнера */
}

#menu-buttons button:hover {
  transform: scale(1.1); /* Увеличение при наведении */
}

#menu-buttons img {
  width: 100%; /* Иконка занимает всю ширину кнопки */
  height: auto; /* Сохраняем пропорции */
  display: block;
}

/* Медиа-запросы для маленьких экранов */
@media (max-width: 600px) {
  #menu-buttons {
    gap: 1.5vw; /* Уменьшенный, но все еще заметный отступ */
    padding: 2px 2px; /* Меньшие отступы */
  }
  
  #menu-buttons button {
    width: clamp(70px, 17vw, 110px); /* Мин 60px, макс 100px для мобильных */
    height: clamp(70px, 17vw, 110px);
    border: 2px solid #ccc; /* Возвращаем стандартную толщину границы */
    border-radius: 6px; /* Чуть меньше углы */
  }

  #menu-buttons img {
    width: 100%; /* Изображение занимает всю ширину кнопки */
    height: 100%; /* Изображение занимает всю высоту кнопки */
    object-fit: contain; /* Сохраняем пропорции изображения, не растягивая */
    display: block;
  }
}
  
  #loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Темный фон с прозрачностью */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Убедитесь, что экран загрузки находится поверх всех других элементов */
  }
  
  #loading-screen img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  #loading-text {
    color: white;
    font-size: 24px;
  }
  
  #loading-text span {
    animation: dots 1.5s steps(1, end) infinite;
  }
  
  /* Анимация появления точек */
  @keyframes dots {
    0% {
      content: '';
    }
    33% {
      content: '.';
    }
    66% {
      content: '..';
    }
    100% {
      content: '...';
    }
  }
  
  /* Кнопки */
  .button-ton {
    background-color: #007BFF; /* Синий фон */
    color: white; /* Белый текст */
    padding: 5px 20px; /* Отступы */
    border: none; /* Убираем стандартную рамку */
    border-radius: 4px; /* Закругленные углы */
    cursor: pointer; /* Курсор при наведении */
    font-size: 15px; /* Размер шрифта */
    margin: 5px; /* Отступы между кнопками */
    border: 2px solid rgb(8, 0, 114); /* Белая рамка */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Объемный эффект */
    transition: transform 0.1s, box-shadow 0.1s; /* Анимация нажатия */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Тень для текста */
  }
  
  /* Эффект при наведении на кнопку */
  .button-ton:hover {
    background-color: #0056b3; /* Темно-синий фон при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
  }
  
  .button-container {
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Распределяем кнопки по краям */
    gap: 0px; /* Расстояние между кнопками */
    margin-top: 15px; /* Отступ сверху */
  }
  
  .button-tonS {
    background-color: #007BFF; /* Синий фон */
    color: white; /* Белый текст */
    padding: 10px 15px; /* Отступы */
    border: none; /* Убираем стандартную рамку */
    border-radius: 4px; /* Закругленные углы */
    cursor: pointer; /* Курсор при наведении */
    font-size: 20px; /* Размер шрифта */
    margin: 5px; /* Отступы между кнопками */
    transition: background-color 0.3s, transform 0.3s; /* Плавные анимации */
    border: 2px solid white; /* Белая рамка */
  }
  
  /* Эффект при наведении на кнопку */
  .button-tonS:hover {
    background-color: #0056b3; /* Темно-синий фон при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
  }
  

  
/* Контейнер для кнопки TON Connect */
#ton-connect {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  z-index: 1050; /* Задаем, чтобы кнопка отображалась поверх, если нужно */
}

/* Всплывающее окно TON Connect */
[data-tc-wallets-modal-container="true"] {
  position: fixed;
  z-index: 1051; /* Убедитесь, что это значение выше вашего модального окна */
}

  
  /* Анимация появления модального окна */
  @keyframes fadeIn {
    from {
        opacity: 0; /* Начальная прозрачность */
    }
    to {
        opacity: 1; /* Конечная прозрачность */
    }
  }
  
  h2 {
    color: white;
    margin-bottom: 20px;
  }
  
  
  /* Стили для кнопки добавления */
  .add-button {
    background-color: #66bb6a; /* Салатовый цвет */
    color: white; /* Цвет текста */
    border: none; /* Без рамки */
    border-radius: 4px; /* Закругленные углы */
    padding: 3px; /* Отступы */
    font-size: 15px; /* Размер шрифта */
    cursor: pointer; /* Указатель мыши */
    margin-left: 10px; /* Отступ слева */
    display: flex; /* Используем Flexbox для центрирования содержимого */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    transition: background-color 0.3s; /* Плавная анимация цвета */
  }
  
  
  
/* Основной стиль модального окна */
.modal {
  display: none;
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  animation: fadeIn 0.5s;
}

.modal.show {
  display: flex;
  opacity: 1;
}

.modalBT {
  background: rgba(211, 211, 211, 0.9);
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 80%;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.modal.show .modalBT {
  transform: translate(-50%, -50%) scale(1);
}

/* Модальное окно для вывода */
.withdraw-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.withdraw-modal.show {
  display: flex;
}

.withdraw-modal-content {
  background: rgba(211, 211, 211, 0.9); /* Полупрозрачный серый фон */
  padding: 20px;
  border: 2px solid white; /* Белая рамка */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  width: 90%; /* Ширина 90% от окна */
  max-width: 600px; /* Максимальная ширина */
  max-height: 80%; /* Максимальная высота */
  overflow: auto; /* Прокрутка при необходимости */
  position: absolute; /* Позиционирование для центрирования */
  top: 50%; /* Центр по вертикали */
  left: 50%; /* Центр по горизонтали */
  transform: translate(-50%, -50%); /* Смещение для центрирования */
}

.withdraw-modal h2 {
  margin-bottom: 20px;
  font-size: 24px;
}

.withdraw-modal label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.withdraw-modal input[type="text"],
.withdraw-modal input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.withdraw-modal-button {
  background: rgba(255, 255, 255, 0.5); /* Полупрозрачный фон для кнопок */
  color: #333; /* Темный цвет текста для читаемости */
  cursor: pointer;
  transition: background 0.3s ease;
  border: 2px solid white; /* Белая рамка */
  border-radius: 5px; /* Закругленные углы */
  padding: 10px;
  margin-top: 10px; /* Отступ сверху */
  width: calc(100% - 24px); /* Учитываем рамки и отступы */
}

.withdraw-modal-button:hover {
  background-color: #bebebe; /* Темнее при наведении */
}

/* Стили для истории заявок на вывод */
.withdraw-request-history-section {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
}

.withdraw-request-history-container {
  max-height: 300px;
  overflow-y: auto;
}

.withdraw-request-item {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.withdraw-request-details {
  font-size: 0.8em;
  display: flex;
  align-items: center;
}

.withdraw-request-details p {
  margin: 5px;
}

.withdraw-request-details .date-column {
  flex-grow: 1;
  text-align: left;
}

.withdraw-request-details .info-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

#converted-ton-display {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

#converted-ton-value {
  font-weight: bold;
  color: #2c2c2c; /* Зеленый цвет */
}

/* Кнопка закрытия */
.close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: white; /* Цвет текста кнопки */
  cursor: pointer;
  float: right; /* Выравнивание вправо */
}

.close:hover,
.close:focus {
  color: black; /* Черный цвет при наведении */
  text-decoration: none; /* Убираем подчеркивание */
  cursor: pointer; /* Курсор при наведении */
}

/* Контейнер вкладок */
.tab-containerBT {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px; /* Отступ снизу */
}

/* Кнопки вкладок */
.tab-button, .tab-buttonBT, .tab-button.activeBT {
  background: transparent;
  border: 2px solid rgb(68, 68, 68); /* Белая рамка */
  border-radius: 5px; /* Закругленные углы */
  color: white; /* Цвет текста кнопки */
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  transition: background 0.3s ease, color 0.3s ease;
}

.tab-button {
  background: rgba(255, 255, 255, 0.2); /* Легкая заливка для активной вкладки */
}

.tab-button.activeBT {
  background: rgba(49, 49, 49, 0.2); /* Легкая заливка для активной вкладки */
}

/* Содержимое вкладок */
.tab-contentBT {
  margin-top: 20px;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  display: flex; /* Используйте flexbox для выравнивания содержимого */
  flex-direction: column; /* Вертикальное направление */
  align-items: center; /* Центрирование по горизонтали */
  justify-content: center; /* Центрирование по вертикали, если необходимо */
  text-align: center; /* Выравнивание текста по центру */
}

/* Скрытый контент */
.hiddenBT {
  display: none; /* Скрыто по умолчанию */
}

/* Контейнер для обмена валюты */
.currency-exchangeBT {
  margin-top: 30px;
  background: rgba(220, 220, 220, 0.5); /* Полупрозрачный серый фон */
  padding: 10px;
  border-radius: 8px;
  border: 2px solid white; /* Белая рамка */
  display: flex; /* Включаем Flexbox */
  flex-direction: column; /* Устанавливаем вертикальное направление для элементов */
  align-items: center; /* Центрируем элементы по горизонтали */
}

/* Стиль для инпутов и кнопок в обмене */
input[type="number"], #depositButton, #exchangeButton {
  border: 2px solid white; /* Белая рамка */
  border-radius: 5px; /* Закругленные углы */
  padding: 10px;
  margin-top: 10px; /* Отступ сверху */
  width: calc(100% - 24px); /* Учитываем рамки и отступы */
  background: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон для инпутов */
  color: #333; /* Темный цвет текста для читаемости */
}

/* Кнопки для депозитов и обмена */
#depositButton, #exchangeButton {
  background: rgba(255, 255, 255, 0.5); /* Полупрозрачный фон для кнопок */
  color: #333; /* Темный цвет текста для читаемости */
  cursor: pointer;
  transition: background 0.3s ease;
}

#depositButton:hover, #exchangeButton:hover {
  background: rgba(255, 255, 255, 0.7); /* Ярче при наведении */
}

#maintenance-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}
.modal-content112 {
  text-align: center;
  padding: 20px;
  background: #333;
  border-radius: 8px;
}

/* Стили для сетки кристаллов энергии */

.energy-crystal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0%;
}

.energy-crystal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(34, 34, 34, 0.7);
  border-radius: 10px;
  padding: 5%;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.energy-crystal-item:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.energy-crystal-item img {
  width: 80px; /* Уменьшили размер картинки */
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 10px;
}

.energy-crystal-label {
  color: white;
  font-size: 10px;
  margin-bottom: 5px;
}

.energy-crystal-value {
  color: #4CAF50;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.energy-crystal-upgrade {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.energy-crystal-upgrade:hover {
  background-color: #0056b3;
}

.energy-crystal-item.purchased {
  opacity: 0.3;
  filter: grayscale(90%);
  pointer-events: none;
}

.energy-crystal-item.unavailable {
  opacity: 0.6;
  filter: grayscale(70%);
  pointer-events: none;
}

.energy-crystal-item.next-available {
  border: 2px solid green;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.energy-crystal-item.next-available .energy-crystal-upgrade {
  background-color: #4CAF50;
  color: white;
  border-color: #45a049;
}

.energy-crystal-upgrade.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #cccccc;
}

.energy-progress-container {
  width: 100%;
  position: absolute;
  top: 72%; /* Позиционируем сразу после картинки */
  left: 0;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: -8px; /* Сдвигаем вверх */
  
}

.energy-progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgb(255, 205, 140); /* Белая рамка */
  
  
}

.energy-progress-fill {
  width: 0%; /* Начальная ширина 0 */
  height: 100%;
  background-color: #4CAF50; /* Зеленый цвет */
  transition: width 0.5s ease-in-out;
}

.energy-progress-text {
  text-align: center;
  margin-top: 5px;
  color: white;
  font-size: 14px;
}

#main-crystal-image {
  transition: opacity 0.3s ease-in-out;
}

/*Сетка гномов*/

.workers-gnomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0%;
}

.workers-gnomes-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(34, 34, 34, 0.7);
  border-radius: 10px;
  padding: 5%;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workers-gnomes-item img {
  width: 80px; /* Уменьшили размер картинки */
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 10px;
}

.workers-gnomes-label {
  color: white;
  font-size: 10px;
  margin-bottom: 5px;
}

.workers-gnomes-value {
  color: #4CAF50;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.workers-gnomes-upgrade {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.workers-gnomes-upgrade:hover {
  background-color: #2980b9;
}

.workers-gnomes-item.unavailable {
  opacity: 0.6;
  filter: grayscale(70%);
  pointer-events: none;
}

.workers-gnomes-item.purchased {
  opacity: 0.3;
  filter: grayscale(90%);
  pointer-events: none;
}


.workers-gnomes-item.next-available {
  border: 2px solid rgb(3, 0, 156);
  box-shadow: 0 0 10px rgba(2, 0, 102, 0.5);
}

.workers-gnomes-upgrade.button-disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

#main-workers-gnomes-container {
  position: absolute;
  top: 53%;
  left: 20%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex; /* Добавляем flex для управления расположением элементов */
  flex-direction: column; /* Устанавливаем вертикальное направление */
  align-items: center; /* Центрируем элементы по горизонтали */
}

#main-workers-gnomes-image {
  max-width: 200px;
  max-height: 200px;
  transition: all 0.3s ease;
}

.dragons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0%;
}

.dragons-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(34, 34, 34, 0.7);
  border-radius: 10px;

  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  min-height: 200px;
}

.dragons-item:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.dragons-item-locked {
  background-color: rgba(50, 50, 50, 0.5);
  cursor: not-allowed;
}

.dragons-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  border-radius: 10px;
  z-index: 10;
}

.dragons-item img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 10px;
}

.dragons-item-name {
  color: white;
  font-size: 13px;
  margin-bottom: 5px;
}

.dragons-item-level {
  color: #4CAF50;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dragons-item-action {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dragons-item-action:hover {
  background-color: #0056b3;
}

.dragons-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: transparent;
}

.dragons-modal-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.dragons-shop-button, 
.dragons-merge-button {
  background-color: #2a2a2a; /* Темный фон */
  color: #ff9800; /* Оранжевый шрифт */
  border: 2px solid white; /* Белая рамка */
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative; /* Для позиционирования сияния */
  overflow: hidden; /* Для корректного отображения сияния */
}

.dragons-shop-button:hover, 
.dragons-merge-button:hover {
  background-color: #3a3a3a; /* Чуть светлее при наведении */
  transform: translateY(-3px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.dragons-shop-button:active, 
.dragons-merge-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Добавляем сияние для кнопки "Слияние" */
.dragons-merge-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255, 152, 0, 0.3) 10%, rgba(255, 152, 0, 0) 70%);
  transform: translate(-50%, -50%) scale(0.8);
  animation: glowPulse 2s infinite ease-in-out;
  z-index: -1;
}

@keyframes glowPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
}


.dragons-shop-modal {
  display: none;
  position: fixed;
  z-index: 2000;  /* Выше, чем основное модальное окно */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.dragons-shop-modal.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

.dragons-shop-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.95);
  color: white;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto; /* Добавить прокрутку */
  display: flex;
  flex-direction: column;
}

.dragons-shop-modal-content h3 {
  text-align: center;
  margin-bottom: 20px;
}

.dragons-shop-modal.show .dragons-shop-modal-content {
  opacity: 1;
  transform: scale(1);
}

.dragons-shop-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 15px;
}

.dragon-eggs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: stretch;
  padding: 0 10px; /* Небольшие отступы по краям */
}

.dragon-egg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 5%;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  max-width: 300px; /* Максимальная ширина плитки */
  margin: 0 auto; /* Центрирование */
}

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

.dragon-egg-item img {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 15px;
  object-fit: contain;
}

.dragon-egg-name {
  font-size: 12px;
  margin-bottom: 10px;
  color: white;
}

.dragon-egg-price {
  font-size: 12px;
  color: #4CAF50;
  margin-bottom: 15px;
}

.buy-dragon-egg {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 7px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.buy-dragon-egg:hover {
  background-color: #1976D2;
}

.dragon-egg-open-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.dragon-egg-image-wrapper {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative; /* Добавлено для позиционирования свечения */
}

.dragon-egg-image-wrapper::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  animation: egg-glow 1.5s infinite alternate;
}

.dragon-egg-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes egg-glow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

.pulsating-egg {
  animation: egg-pulse 1.5s infinite alternate;
}

@keyframes egg-pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

#dragon-egg-open-image.fade-out {
  opacity: 0;
  transform: scale(0.6);
  transition: all 1s ease-out;
}

.dragon-egg-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dragon-egg-result-container {
  margin-top: 20px;
  color: white;
  font-size: 18px;
  text-align: center;
}

#dragon-egg-claim-btn {
  margin-top: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#dragon-egg-claim-btn:hover {
  background-color: #45a049;
}

/* Анимация для смены яйца на дракона */
#dragon-egg-open-image {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
}

#dragon-egg-open-image::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  z-index: -1;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#dragon-egg-open-image.fade-out {
  opacity: 0;
  transform: scale(0.4);
  transition: all 2.5s ease-out;
}

#dragon-egg-open-image.fade-in {
  opacity: 1;
  transform: scale(1);
  transition: all 2.5s ease-in;
}

#dragon-egg-open-image.fade-in::before,
#dragon-egg-open-image.fade-out::before {
  opacity: 1;
  transform: scale(1.2);
}

@keyframes softPulseShadow {
  0%, 100% { 
    transform: scale(1.2);
    opacity: 0.7;
  }
  50% { 
    transform: scale(1.3);
    opacity: 1;
  }
}

#dragon-egg-open-image.pulse::before {
  animation: softPulseShadow 2s ease-in-out infinite;
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dragon-reveal {
  0% { 
      opacity: 0; 
      transform: scale(0.5); 
  }
  100% { 
      opacity: 1; 
      transform: scale(1); 
  }
}

.fade-out {
  animation: fade-out 1s ease-out forwards;
}

.dragon-reveal {
  animation: dragon-reveal 1s ease-out forwards;
}

/*подгрузка драконов в ячейки*/

.dragons-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(50, 50, 50, 0.8);
    border-radius: 10px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.dragons-item-locked {
    background-color: rgba(100, 100, 100, 0.5);
    cursor: not-allowed;
}

.dragons-item-locked .dragons-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    z-index: 10;
}

.dragons-item img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 10px;
}

.dragons-item .dragon-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 11px;
    padding: 0 2px;
}

/*инфо о драконах*/

.dragon-eggs-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 5px;
  padding: 5px;
  justify-content: center;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.dragon-eggs-info-block {
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 10px;
  padding: 10px;
  color: white;
  width: 100%;
  box-sizing: border-box;
}

.dragon-eggs-info-block h3 {
  text-align: center;
  margin-bottom: 10px;
  color: #4CAF50;
}

.dragon-eggs-info-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.dragon-eggs-info-block th, 
.dragon-eggs-info-block td {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px;
  text-align: center;
}

.dragon-eggs-info-block th {
  background-color: rgba(100, 100, 100, 0.5);
}

.dragons-shop-info-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dragons-shop-info-btn:hover {
  background-color: #1976D2;
}

/*,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,Страница тех обслуживания,,,,,,,,,,,,,,,,,,,,,,,,,,,,,*/

.maintenance-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/maintenance.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 40%;
  z-index: 9999;
}

.maintenance-content {
  text-align: center;
  max-width: 600px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: -50px;
}

.maintenance-content h2 {
  color: #333;
  margin-bottom: 10px;
}

.maintenance-content p {
  color: #666;
}

/*,,,,,,,,,,,,,,,,,,,,,,Экран загрузки,,,,,,,,,,,,,,,,,,,,,,,,,*/
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/maintenance.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 40%;
  z-index: 9999;
  color: black;
}

@supports (background-image: url('/images/maintenance.webp')) {
  .loading-screen {
    background-image: url('/images/maintenance.webp');
  }
}

.loading-content {
  text-align: center;
  max-width: 600px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
}

.loading-progress {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  margin: 15px 0;
  overflow: hidden;
}

.loading-progress-bar {
  width: 0;
  height: 100%;
  background-color: #313131;
  transition: width 0.5s ease-in-out;
}

.loading-content h2,
.loading-content p {
  color: black !important; /* Явное указание черного цвета для заголовка и параграфа */
  margin-bottom: 10px; /* Добавлен отступ для лучшей читаемости */
}

/* Кнопка вернуться в инвентарь */

#go-to-inventory-btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 15px;
  background-color: #4CAF50; /* Зеленый цвет */
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#go-to-inventory-btn:hover {
  background-color: #45a049; /* Немного темнее при наведении */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

#go-to-inventory-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Кнопка открыть яйцо */

.open-dragon-egg-btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  margin-top: 10px;
  background-color: #2196F3; /* Синий цвет */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.open-dragon-egg-btn:hover {
  background-color: #1E88E5; /* Немного темнее при наведении */
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.open-dragon-egg-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.dragon-egg-info {
  color: white;
  text-align: center;
  padding: 5px;
}

.dragon-egg-info span {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.workers-gnomes-efficiency {
  margin-top: -13px; /* Отступ от картинки */
  margin-left: 27px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  width: auto;
  white-space: nowrap;
  text-align: center; /* Центрируем текст внутри поля */
}


.energy-reset-text {
  position: absolute; /* Делаем текст независимым от заполнения */

  left: 0; /* Растягиваем от левого края */
  width: 100%; /* Занимает всю ширину шкалы */
  transform: translateY(-100%); /* Корректируем вертикальное положение */
  z-index: 2; /* Текст поверх заполнения */
  font-size: 12px;
  color: #ffffff; /* Белый цвет для контраста */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Тень для читаемости */
  text-align: center; /* Центрируем текст по горизонтали */
}

#energy-reset-countdown {
  font-weight: bold;
}

.energy-progress-text {
  text-align: center;
  margin-top: 5px;
  color: white;
  font-size: 14px;
}

.dragon-card {
  position: relative;
}

.dragon-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.dragon-delete-btn:hover {
  background-color: rgba(255, 0, 0, 0.9);
}

.delete-confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Полная высота экрана */
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center; /* Вертикальное центрирование */
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.delete-confirmation-modal .modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 3px solid #444444; 
  max-width: 300px;
  width: 80%;
  height: 70%;

  transform: scale(0.7);
  transition: transform 0.3s ease;
  top: 10%;
}

.delete-confirmation-modal.show .modal-content {
  transform: scale(1);
}

.delete-confirmation-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.delete-confirmation-modal input {
  width: 100%;
  padding: 10px;
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.delete-confirmation-modal .modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.delete-confirmation-modal button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.delete-confirmation-modal #confirm-delete-btn {
  background-color: #4CAF50;
  color: white;
}

.delete-confirmation-modal #cancel-delete-btn {
  background-color: #f44336;
  color: white;
}

.dragons-item-locked {
  position: relative;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed #999;
  opacity: 5.1;
}

.dragons-item-locked .slot-lock-overlay {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dragons-item-locked .slot-lock-overlay span:first-child {
  font-weight: bold;
  color: #666;
}

.dragons-item-locked .slot-lock-overlay span:nth-child(2) {
  color: #4CAF50;
  font-size: 14px;
}

.dragons-item-locked .unlock-slot-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dragons-item-locked .unlock-slot-btn:hover {
  background-color: #45a049;
}

.modalAD {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  
}

.modalAD-content {
  background-color: rgb(231, 231, 231);
  position: fixed; /* Фиксированное позиционирование */
  top: 50%; /* Сдвигаем на 50% от верха */
  left: 50%; /* Сдвигаем на 50% от левого края */
  transform: translate(-50%, -50%); /* Смещаем обратно на половину ширины и высоты */
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень для лучшего визуального эффекта */
}

.modalAD-button {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  border: 2px solid white; /* Белая рамка */
  border-radius: 5px;
  background-color: #414141;
  color: white;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Тень для объема */
  transition: all 0.3s ease; /* Плавные анимации при наведении */
}

.closeAD {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 20px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

/* Окно настроек */

.modalset {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9000;
}

.modalset.show {
  opacity: 1;
}

.modalset-content {
  background-color: white; /* Белый фон для элементов поверх картинки */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 100%; /* Занимает всю доступную ширину */
  height: 100%; /* Занимает всю доступную высоту */
  position: relative;

  /* Настройки фона */
  background: url('/images/background.jpg') no-repeat center center; /* Центрируем и убираем повтор */
  background-size: cover; /* Масштабируем изображение, чтобы оно покрывало весь контейнер */
}

.closeset {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 40px;
  cursor: pointer;
}

/* Общие стили для блока */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 10px; /* Отступ между текстом и выпадающим списком */
}

/* Стили для текста */
.label {
  font-size: 17px;
}

.flag-icon {
  width: 20px;
  height: 15px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: none;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.lang-option:hover {
  background-color: #eaeaea;
}

/* Стили для выпадающего списка */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #3a3a3a;
  background-color: #fff;
  border-radius: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.dropdown-content button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  text-align: left;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

.dropdown-content button:hover {
  background-color: #f0f0f0;
}



/* Показать содержимое выпадающего списка при наведении */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Модальное окно с дорожной картой */
.modalRoad {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,1.4);
  padding-top: 60px;
  z-index: 9001;
}

.modalRoad-content {
  background-color: #aaaaaa;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  height: 98%;
  max-width: 600px;
  border-radius: 10px;
}

.closeRoad {
  color: #272727;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeRoad:hover,
.closeRoad:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #ccc;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: 40%;
}

.event {
  padding: 10px 20px;
  position: relative;
  background-color: inherit;
  width: 80%;
}

.event::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -20%;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -13px;
}

/* Класс для затемнения этапов */
.event.completed {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Исправляем имя класса контейнера */
.button-container {
  display: block; /* Блочный контейнер */
  width: 100%; /* Занимает всю ширину */
}

/* Стиль для кнопок */
.styled-button {
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #4a4a4a; /* Темно-серый фон */
  color: #ffffff; /* Белый текст */
  border: 2px solid #ffffff; /* Белая обводка */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  outline: none;
  text-align: center; /* Центрируем текст внутри кнопки */
}

/* Ховер эффект */
.styled-button:hover {
  background-color: #5e5e5e;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Активное состояние */
.styled-button:active {
  background-color: #3a3a3a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

/* Стиль для блочных кнопок */
.styled-button.block-button {
  display: block; /* Делаем кнопки блочными элементами */
  width: 100%; /* Кнопки занимают всю ширину контейнера */
  margin-top: 10px; /* Отступ между кнопками */
}

/* Стиль для первой кнопки (чтобы не было отступа сверху) */
.button-container .styled-button.block-button:first-child {
  margin-top: 0;
}

/* Модальное окно Белой бумаги */
.modalWhite {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,1.4);
  padding-top: 60px;
  z-index: 9001;
}

.modalWhite-content {
  background-color: #aaaaaa;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  height: auto;
  max-width: 600px;
  border-radius: 10px;
}

.closeWhite {
  color: #070707;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.closeWhite:hover,
.closeWhite:focus {
  color: black;
  text-decoration: none;
}

.modalWhite h2 {
  text-align: center;
  color: #ff7f50;
  text-shadow: 
  -1px -1px 0 #000, /* Верхний левый угол */
   1px -1px 0 #000, /* Верхний правый угол */
  -1px 1px 0 #000,  /* Нижний левый угол */
   1px 1px 0 #000;  /* Нижний правый угол */
}

.modalWhite section {
  margin-bottom: 20px;
}

.modalWhite h3 {
  color: #e66b41;
  margin-top: 20px;
  text-shadow: 
    -1px -1px 0 #000, /* Верхний левый угол */
     1px -1px 0 #000, /* Верхний правый угол */
    -1px 1px 0 #000,  /* Нижний левый угол */
     1px 1px 0 #000;  /* Нижний правый угол */
}

.modalWhite ul, .modalWhite ol {
  padding-left: 20px;
}

/* Круглая кнопка */
.contest-button-container {
  position: fixed;
  bottom: 43%;
  right: 20px;
  z-index: 2;
}

.contest-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff9800; /* Оранжевый фон */
  border: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
  position: relative; /* Для позиционирования псевдоэлемента */
  animation: buttonPulse 1.5s infinite ease-in-out; /* Лёгкая пульсация кнопки */
}

.contest-button:hover {
  transform: scale(1.1); /* Эффект при наведении остаётся */
}

.contest-button-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Эффект пульсирующего золотого света */
.contest-button::after {
  content: '';
  position: absolute;
  top: 47%;
  left: 51%;
  width: 80px; /* Увеличиваем размер для большего рассеивания */
  height: 80px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0)); /* Более мягкий и рассеянный градиент */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; /* Под кнопкой */
  animation: pulse 1.5s infinite ease-in-out; /* Пульсация света */
}

/* Анимация пульсации света */
@keyframes pulse {
  0% {
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0.2; /* Меньшая начальная яркость для рассеянности */
  }
  50% {
      transform: translate(-50%, -50%) scale(1.3); /* Чуть больше масштаб для рассеивания */
      opacity: 0.5; /* Мягкий пик яркости */
  }
  100% {
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0.2;
  }
}

/* Анимация пульсации кнопки */
@keyframes buttonPulse {
  0% {
      transform: scale(0.95); /* Лёгкое сжатие */
  }
  50% {
      transform: scale(1.05); /* Лёгкое расширение */
  }
  100% {
      transform: scale(0.95); /* Возврат */
  }
}

/* Модальное окно */
.contest-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000; /* Меньше, чем у кнопки (2000), чтобы кнопка оставалась поверх */
  align-items: center;
  justify-content: center;
}

.contest-modal-content {
  background-color: #1a1a1a; /* Тёмный фон */
  border-radius: 15px;
  padding: 50px 20px 20px 20px;
  width: 100%;
  max-width: 500px;
  max-height: 100vh;
  overflow-y: auto;
  color: #fff;
  position: relative;
}

.ticket-header-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.contest-description h2 {
  color: #ff9800;
  text-align: center;
  margin: 10px 0;
}

.contest-description p {
  font-size: 14px;
  line-height: 1.5;
}

.contest-description ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.contest-description li {
  margin: 5px 0;
}

.ticket-purchase {
  text-align: center;
  margin: 20px 0;
}

.ticket-price {
  font-size: 16px;
  color: #ff9800;
  margin-bottom: 10px;
}

#ticket-quantity {
  padding: 10px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid #ff9800;
  background-color: #333;
  color: #fff;
  margin-bottom: 10px;
}

#buy-tickets-button {
  padding: 10px 20px;
  background-color: #ff9800;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

#buy-tickets-button:hover {
  background-color: #e68900;
}

/* Стили для лидерборда */
.leaderboard {
  margin-top: 20px;
}

#player-position {
  margin-bottom: 10px; /* Отступ от текущего места до заголовка */
  padding: 10px;
  background-color: #ff980033; /* Тот же фон, что у лидера */
  border-radius: 5px;
}

.leaderboard h3 {
  text-align: center;
  color: #ff9800;
  margin-top: 0; /* Убираем верхний отступ, чтобы заголовок был ближе к текущему месту */
}

#leaderboard-list {
  max-height: 200px;
  overflow-y: auto;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #333;
}

.leaderboard-item:first-child {
  background-color: #ff980033; /* Лёгкий оранжевый фон для лидера */
}

.leaderboard-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.leaderboard-item span {
  flex-grow: 1;
}

.leaderboard-position {
  margin-right: 10px;
  font-weight: bold;
  color: #ff9800; /* Оранжевый цвет для номера места */
}

/* Стили для крестика */
.contest-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #fff; /* Белый цвет */
  font-size: 30px; /* Размер крестика */
  font-weight: bold;
  cursor: pointer;
  z-index: 1100; /* Поверх содержимого окна */
  transition: color 0.2s;
}

.contest-close:hover {
  color: #ff9800; /* Оранжевый при наведении */
}

.total-participants {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 10px 0;
}

/* Модальное окно мини-игр */
.mini-games-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.mini-games-modal-content {
  background-color: #1a1a1a; /* Тёмный фон, как у других модалок */
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px; /* Ограничиваем ширину */
  position: relative;
  text-align: center;
  color: #fff;
}

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

.mini-games-close:hover {
  color: #ff9800; /* Оранжевый при наведении */
}

.mini-games-modal-content h2 {
  color: #ff9800; /* Оранжевый заголовок */
  margin-bottom: 5px;
}

.mini-games-modal-content p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
}

.mini-games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 кнопки в ряд */
  gap: 10px;
}

.mini-game-button {
  padding: 15px;
  background-color: #ff9800; /* Оранжевый фон */
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mini-game-button:hover {
  background-color: #e68900; /* Темнее при наведении */
}

.dragon-merge-content {
  max-width: 600px;
  padding: 20px;
  text-align: center;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 5.1);
}

.merge-container {
  margin: 20px 0;
}

.merge-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.merge-slot {
  width: 100px;
  height: 100px;
  border: 2px dashed #FFD700;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 5.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s;
  overflow: hidden; /* Предотвращаем выход изображения за пределы */
}

.merge-slot img {
  max-width: 100%; /* Ограничиваем ширину изображения */
  max-height: 100%; /* Ограничиваем высоту изображения */
  object-fit: contain; /* Сохраняем пропорции изображения */
  display: block;
}

.merge-slot:hover {
  border-color: #FF4500;
}

.merge-slot.filled {
  border-style: solid;
  border-color: #00FF00;
}

#merge-result-slot {
  width: 120px;
  height: 120px;
  overflow: hidden; /* Предотвращаем выход изображения за пределы */
}

#merge-result-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#merge-info {
  font-size: 16px;
  color: #FFD700;
  margin: 10px 0;
}

#merge-dragons-btn {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #FF4500;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#merge-dragons-btn:hover {
  background-color: #FF6347;
}

#merge-dragons-btn:disabled {
  background-color: #808080;
  cursor: not-allowed;
}

.player-dragons-grid {
  margin-top: 20px;
}

.player-dragons-grid h3 {
  color: #FFD700;
}

#player-dragons-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: auto;
  overflow-y: auto;
}

/* Анимация ожидания */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.merge-loading {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #FF4500;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

/* Затемнение выбранного дракона */
.dragons-item.selected {
  opacity: 0.5;
  pointer-events: none; /* Отключаем повторный клик */
}

/* Стили для кнопки отмены в ячейках */
.merge-slot .cancel-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: #FF4500;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  transition: background-color 0.3s;
}

.merge-slot .cancel-btn:hover {
  background-color: #FF6347;
}

.dragon-egg-stock {
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
  text-align: center;
}