/* Общие стили для всей страницы */

/* Подключаем шрифт */
@font-face {
  font-family: 'SourceSans3';
  src: url('../assets/fonts/SourceSans3-Regular.woff2') format('woff2'),
       url('../assets/fonts/SourceSans3-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Используем swap для улучшения загрузки */
}

/* Задаём глобальные переменные для кнопок farm-button, claim, earnsol_text и нижнего меню */
:root {
  --menu-height: 70px; /* Исправлено с 48px на реальную высоту меню (30px иконки + 16px padding + 17px текст) */
  --header-height: 55px;
}

/* Убираем отступы и делаем страницу на 100% ширины и высоты */
html, body {
  margin: 0;
  height: 100%; /* Задаём высоту на 100% от экрана */
  padding: 0;
  width: 100%; /* Задаём ширину на 100% от экрана */
  display: flex; /* Используем Flexbox для макета */
  font-family: 'SourceSans3', sans-serif; /* Обновлено: Используем SourceSans3 как основной шрифт */
  flex-direction: column; /* Элементы располагаются в колонку */
  justify-content: center; /* Центрирование содержимого по вертикали */
  align-items: center; /* Центрирование содержимого по горизонтали */
  background-color: #020303; /* Задаём тёмный фон для всего приложения */
  overflow: hidden; /* Отключаем скроллинг */
  -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапах на iOS/Android */
}

/* НОВЫЙ КОММЕНТАРИЙ: Уточняем стили для #content-container, чтобы он управлял анимацией всех вложенных элементов */
#content-container {
  position: relative;
  width: 100%;
  height: 100vh;
  opacity: 0; /* Изначально скрыт */
  transition: opacity 0.2s ease-in-out; /* Синхронная анимация для всех вложенных элементов */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Контейнер для круга (3D-сфера в центре) */
/* НОВЫЙ КОММЕНТАРИЙ: Теперь занимает всю ширину и высоту до меню, убраны боковые ограничения */
.circle {
  position: fixed;
  top: 0; /* Начинается с верха экрана */
  left: 0; /* Начинается с левого края */
  width: 100vw; /* Полная ширина экрана */
  height: calc(100vh - var(--menu-height)); /* Высота до нижнего меню */
  z-index: 2;
  overflow: visible; /* Убираем обрезку, чтобы шар не обрезался */
}

/* Приём для сохранения пропорций 390:500 (если вам нужно).
   Псевдоэлемент создаёт "прямоугольник" нужной высоты.
   500/390 ~ 1.282 => ~128.2% */
.circle::before {
  content: none; /* Удаляем псевдоэлемент */
}

/* Внутренний блок #circle теперь содержит canvas */
#circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* Включаем взаимодействие (для тач-жестов / мыши) */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
}

/* Сбрасываем для нашего canvas */
#sphereCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Стили для страниц приложения */

/* По умолчанию все страницы скрыты */
.page {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Активная страница */
.page.active {
  display: block;
  opacity: 1;
}

/* Отключаем выделение текста и перетаскивание изображений */
body, img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Изображения не обрабатывают клики */
img {
  pointer-events: none;
}