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

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

/* Задаём глобальные переменные для кнопок farm-button, claim, earnsol_text и нижнего меню */
:root {
  --farm-button-height: 48px;
  --menu-height: 48px;
  --offset-above-farm: 30px; /* Настоящий отступ */
  --farm-position: calc(var(--menu-height) + var(--offset-above-farm)); /* Правильное положение */
  --adjusted-claim-position: calc(var(--menu-height) + var(--farm-button-height) + 22px);
  --header-height: 55px;
}

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

/* Контейнер для круга (с DogeGrinch) */
.circle {
  position: fixed;
  top: 17%; /* Подкорректируйте при необходимости */
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 390px;
  max-height: 58vh;
  z-index: 2;
  overflow: hidden; 
}

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

/* Внутренний блок #circle больше НЕ имеет background-image, а служит лишь контейнером под <img> */
#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;
}

/* Каждая часть собранного DogeGrinch */
.doge-part {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  pointer-events: none; /* Чтобы клики шли именно на #circle */
  user-select: none;
}

/* Можно при необходимости выставить z-index, чтобы руки
   перекрывали туловище и ноги. Здесь делаем руки самыми верхними. */
.left-arm,
.right-arm {
  z-index: 10; /* Самый верх */
}

/* Туловище DogeGrinch_1.png */
.part1 {
  z-index: 7; /* Выше ног, но ниже рук */
}

/* Верхние части ног (DogeGrinch_4 и DogeGrinch_7) */
.part4,
.part7 {
  z-index: 5; /* Ниже туловища, выше нижних частей ног */
}

/* Нижние части ног (DogeGrinch_5 и DogeGrinch_8) */
.part5,
.part8 {
  z-index: 4; /* Самый нижний уровень ног */
}

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

/* По умолчанию все страницы скрыты */
.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;
}

/* Настройки для холста со звёздочками */
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Стили для слоя со снегом */
.t971__snowfall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.t971__snowflake {
  position: absolute;
  opacity: 0.8;
  pointer-events: none;
}