/* ==================== АНИМАЦИИ СУНДУКА ==================== */

/* Основная анимация открытия с плавным выпрыгиванием */
@keyframes chestBounceOpen {
  0% {
    transform: scale(0.3) translateY(0) rotate(0);
    filter: brightness(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  15% {
    transform: scale(0.35) translateY(-8px) rotate(-1deg);
    filter: brightness(1.05) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
  }
  30% {
    transform: scale(0.42) translateY(-20px) rotate(-3deg);
    filter: brightness(1.15) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.25));
  }
  45% {
    transform: scale(0.54) translateY(-38px) rotate(6deg);
    filter: brightness(1.3) drop-shadow(0 15px 25px rgba(255, 215, 0, 0.4));
  }
  55% {
    transform: scale(0.52) translateY(-32px) rotate(4deg);
    filter: brightness(1.25) drop-shadow(0 12px 20px rgba(255, 215, 0, 0.35));
  }
  65% {
    transform: scale(0.49) translateY(-18px) rotate(-2deg);
    filter: brightness(1.15) drop-shadow(0 8px 15px rgba(255, 215, 0, 0.25));
  }
  75% {
    transform: scale(0.51) translateY(-8px) rotate(1deg);
    filter: brightness(1.1) drop-shadow(0 6px 12px rgba(255, 215, 0, 0.2));
  }
  85% {
    transform: scale(0.495) translateY(-3px) rotate(-0.5deg);
    filter: brightness(1.05) drop-shadow(0 4px 10px rgba(255, 215, 0, 0.15));
  }
  92% {
    transform: scale(0.502) translateY(-1px) rotate(0.2deg);
    filter: brightness(1.02) drop-shadow(0 3px 8px rgba(255, 215, 0, 0.1));
  }
  100% {
    transform: scale(0.5) translateY(0) rotate(0);
    filter: brightness(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  }
}

/* Анимация магического свечения */
@keyframes magicGlow {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
    filter: blur(0px);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-10px) scale(0.8);
    filter: blur(2px);
  }
  40% {
    opacity: 1;
    transform: translateY(-25px) scale(1.2);
    filter: blur(3px);
  }
  70% {
    opacity: 0.6;
    transform: translateY(-45px) scale(1.5);
    filter: blur(5px);
  }
  100% {
    opacity: 0;
    transform: translateY(-70px) scale(2);
    filter: blur(8px);
  }
}

/* Анимация частиц света */
@keyframes sparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 2), calc(var(--ty) * 2)) scale(0);
  }
}

/* Плавная idle-анимация */
@keyframes chestIdleEnhanced {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
  }
}

/* ==================== КЛАССЫ СУНДУКА ==================== */


.chest-initial-animation {
  max-width: 150px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: chestIdleEnhanced 3.5s ease-in-out infinite;
  will-change: transform;
  position: relative;
}

.chest-initial-animation:hover {
  transform: scale(1.1) translateY(-4px);
  filter: brightness(1.2) drop-shadow(0 10px 20px rgba(255, 215, 0, 0.3));
}

.chest-open-bounce {
  animation: chestBounceOpen 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chest-final-open {
  /* transform: scale(0.5); */
    max-width: 150px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: brightness(1.1) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
  position: relative;
}

/* Эффект магического свечения */
.chest-final-open::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 165, 0, 0.4) 40%,
    transparent 70%
  );
  animation: magicGlow 2s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

.chest-final-open::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 215, 0, 0.5) 50%,
    transparent 80%
  );
  animation: magicGlow 1.8s ease-out 0.1s forwards;
  pointer-events: none;
  z-index: 11;
}

/* ==================== GAME OVERLAY (ИСПРАВЛЕН) ==================== */

#game-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Используем привязку ко всем краям */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999; /* Поднимаем слой максимально высоко */
  pointer-events: none;
  animation: fadeIn 0.4s ease;
  overflow: hidden; /* Скрываем полосы прокрутки самого фона */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ГЛАВНОЕ ИСПРАВЛЕНИЕ: Центрирование */
#game-overlay.active {
  display: flex !important; /* Принудительно включаем Flex */
  align-items: center; /* Центр по вертикали */
  justify-content: center; /* Центр по горизонтали */
  flex-direction: column;
}

/* Центральная панель с вопросом */
#overlay-text {
  /* background: rgba(255, 255, 255, 0.08); */
  backdrop-filter: blur(30px);
  /* border: 2px solid rgba(17, 141, 145, 0.5); */
  border-radius: var(--border-radius-md);
  padding: 20px 20px;

  /* Размеры и адаптивность */
  width: 90%;
  max-width: 800px;
  max-height: 50vh; /* Чтобы окно не вылезало за пределы экрана по высоте */
  overflow-y: auto; /* Добавляем скролл внутри окна, если текст слишком длинный */

  /* Центрирование самого блока (страховка) */
  margin: auto;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 1.5rem;
  /* font-weight: 700; */
  text-align: center;
  line-height: 1.5;
  animation: slideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  pointer-events: auto;
  z-index: 10000;
  overflow-x: hidden;

   background: linear-gradient(
    45deg,
    rgba(17, 141, 145, 0.6),
    rgba(121, 69, 133, 0.6),
    rgba(197, 217, 46, 0.6)
  );

}

/* Стилизация скроллбара для оверлея (если текст длинный) */
#overlay-text::-webkit-scrollbar {
  width: 8px;
}
#overlay-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
#overlay-text::-webkit-scrollbar-thumb {
  background: rgba(17, 141, 145, 0.6);
  border-radius: 4px;
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Эффект свечения панели */
#overlay-text::before {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  /* background: linear-gradient(
    45deg,
    rgba(17, 141, 145, 0.4),
    rgba(121, 69, 133, 0.4),
    rgba(197, 217, 46, 0.4)
  ); */
  border-radius: var(--border-radius-md);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none; /* Чтобы свечение не мешало кликам */
}