/* ============================================================
   COMMON.CSS — общее для всех страниц
   (шапка, мобильное меню, фон сайта)
   ============================================================ */

/* ===== ФОН САЙТА =====
   Раньше фон был прибит к <body> через background-attachment: fixed —
   именно из-за этого он "лагал" при скролле: браузер перерисовывал
   картинку на каждый кадр прокрутки.
   Теперь фон вынесен в отдельный фиксированный слой, который
   composited на GPU и при скролле вообще не перерисовывается. */
html {
  background: #0b1020;
}

/* app.css задаёт body{background-color:#1f1f2f !important} и свою картинку —
   их нужно погасить, иначе фон body закрашивает слой ниже */
body {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;

  background-image: url('../images/bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  /* выносим слой на GPU — скролл остаётся гладким */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
}

/* ===== МОБИЛЬНОЕ МЕНЮ (бургер) ===== */
.menu-container {
  display: none;
}

.menu-container.active {
  display: block;
}

.mobile-menu-icon.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.mobile-menu-icon.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-icon.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* ===== ПОЛНОЭКРАННОЕ МОБИЛЬНОЕ МЕНЮ ===== */
.mobile-fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  transition: opacity .3s ease;
}

.mobile-fullscreen-menu.active {
  display: flex;
}

.mobile-fullscreen-menu .menu-content {
  text-align: center;
  position: relative;
}

.menu-content nav a {
  display: block;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  margin: 20px 0;
  transition: color .3s ease;
}

.menu-content nav a:hover {
  color: #00bfff;
}

.menu-logo {
  font-size: 36px;
  color: #fff;
  margin-bottom: 30px;
}

.menu-logo span {
  color: #00bfff;
}

.close-menu {
  position: absolute;
  top: -60px;
  right: 20px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

@media (min-width: 992px) {
  .mobile-fullscreen-menu {
    display: none !important;
  }
}

/* ===== ФИКС "РЕЗИНОВОГО" СКРОЛЛА НА КРАЯХ СТРАНИЦЫ =====
   Раньше вверху/внизу страницы можно было "оттянуть" её ещё дальше
   (overscroll/bounce), и вместе с фоновым слоем это давало лаг.
   Отключаем оттяжку за края — сайт упирается в верх/низ чётко. */
html, body {
  height: 100%;
  overscroll-behavior-y: none;
}

/* ===== СОЦСЕТИ В ФУТЕРЕ =====
   Столбик из иконок, прижатый к самому правому краю. Без подписи
   и без кружков вокруг — просто иконки, которые подсвечиваются
   фирменным цветом при наведении. */
.footer .social-block {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.social-links {
  flex-direction: column !important;
  align-items: flex-end;
  gap: 14px;
}

@media (max-width: 991.98px) {
  .footer .social-block {
    justify-content: center;
  }

  .social-links {
    flex-direction: row !important;
    align-items: center;
  }
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .75);
  text-decoration: none !important;
  transition: color .25s ease, transform .25s ease;
}

.social-link:hover {
  transform: scale(1.15);
}

.social-link[data-social="discord"]:hover { color: #5865f2; }
.social-link[data-social="telegram"]:hover { color: #29a9eb; }
.social-link[data-social="youtube"]:hover { color: #ff0033; }

/* ===== АНИМИРОВАННЫЙ КРЕСТИК ЗАКРЫТИЯ МОДАЛКИ ===== */
.close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.close svg path {
  transition: stroke .25s ease;
}

.close:hover {
  background: rgba(255, 59, 59, .12);
  transform: rotate(90deg);
}

.close:hover svg path {
  stroke: #ff4d4d;
}

/* ===== ЛОГОТИП — КЛИКАБЕЛЬНЫЙ ===== */
.logo#brandLogoLink {
  cursor: pointer;
  user-select: none;
}

/* ===== МОДАЛКА БРЕНДА (VEROTIX V2) ===== */
.brand-modal-text {
  margin-top: 10px;
  color: #dbe3ff;
  font-size: 15px;
  line-height: 1.6;
}

.brand-modal-text p {
  margin: 0;
}

/* ===== ОБЩИЕ АНИМАЦИИ ===== */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== ПАДАЮЩИЕ ЛИСТЬЯ ===== */
.falling-leaves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.falling-leaf {
  position: absolute;
  top: -80px;
  left: var(--start-left);
  width: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) rotate(var(--rot-start));
  animation: leaf-fall linear forwards;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
}

/* Плавное падение с покачиванием из стороны в сторону — анимируется только transform/opacity (без reflow) */
@keyframes leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--rot-start));
  }
  6% {
    opacity: 0.85;
  }
  25% {
    transform: translate3d(var(--sway), 28vh, 0) rotate(calc(var(--rot-start) + var(--rot-delta) * 0.3));
  }
  50% {
    transform: translate3d(calc(var(--sway) * -1), 55vh, 0) rotate(calc(var(--rot-start) + var(--rot-delta) * 0.6));
  }
  75% {
    transform: translate3d(var(--sway), 80vh, 0) rotate(calc(var(--rot-start) + var(--rot-delta) * 0.85));
  }
  94% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 108vh, 0) rotate(calc(var(--rot-start) + var(--rot-delta)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .falling-leaves {
    display: none;
  }
}

/* ===== ВКЛАДКА «СКАЧАТЬ ИГРУ» В МЕНЮ =====
   Обычная голубая кнопка (class="menu-download") — в шапке и в мобильном меню. */
.header .wrap .menu-container .menu a.menu-download,
.menu-content nav a.menu-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #50abff;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .2s ease;
}

.header .wrap .menu-container .menu a.menu-download {
  align-self: center;
  margin-left: 10px;
  padding: 12px 24px;
}

.header .wrap .menu-container .menu a.menu-download:after {
  display: none;
}

.menu-content nav a.menu-download {
  padding: 14px 34px;
  font-size: 22px;
  margin: 26px auto 0;
}

.header .wrap .menu-container .menu a.menu-download:hover,
.menu-content nav a.menu-download:hover {
  background: #3f98ec;
  color: #fff;
}

@media (max-width: 1199px) {
  .header .wrap .menu-container .menu a.menu-download {
    margin: 4px 0 0;
    width: 100%;
  }
}


/* ===== ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА RU / EN (создаётся в assets/js/i18n.js) ===== */
.lang-switch {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 3px;
  margin-left: 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(19, 19, 19, .35);
}
.lang-switch button {
  background: none;
  border: 0;
  color: #fff;
  opacity: .65;
  font: 600 13px Montserrat, sans-serif;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button.active { background: #50abff; opacity: 1; }
@media (max-width: 1199px) {
  .header .wrap .menu-container .menu .lang-switch { margin: 8px 0 0; }
}
.menu-content nav .lang-switch { margin: 22px auto 0; display: flex; width: max-content; }

/* пока i18n.js подставляет перевод, страница скрыта (чтобы не мигал русский текст) */
.i18n-wait body { visibility: hidden; }