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

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

/* Стили для шапки приложения (маленькая монета со счётчиком) */

/* Контейнер для шапки (маленькая монета со счётчиком) */
.header {
  display: flex;
  align-items: center; /* Центрируем содержимое по вертикали */
  justify-content: center; /* Центрируем содержимое по горизонтали */
  position: fixed; /* Фиксированное позиционирование */
  top: 25%; /* Располагаем шапку на 10% от верхнего края */
  left: 50%; /* Центрируем по горизонтали */
  transform: translateX(-50%); /* Центрируем содержимое по горизонтали */
  z-index: 990; /* Располагаем выше других элементов */
}

/* Настройки для изображения внутри шапки (маленькая монета со счётчиком) */
.header img {
  width: 50px; /* Ширина изображения */
  height: 50px; /* Высота изображения */
  margin-right: 14px; /* Отступ справа от изображения */
}

/* Стили для отображения счёта на экране */
.score {
  font-size: 36px; /* Размер текста для счёта */
  font-weight: 800; /* Толстый шрифт */
  user-select: none; /* Отключаем возможность выделения текста */
  font-family: 'Lato', sans-serif; /* Шрифт для текста */
  text-align: center; /* Центрируем текст */
  background: linear-gradient(to top, #ffc74e 0%, #fff 100%); /* Градиент от жёлтого к белому */
  -webkit-background-clip: text; /* Для браузеров WebKit - делаем текст прозрачным с градиентом */
  background-clip: text; /* Для других браузеров - текст с градиентом */
  -webkit-text-fill-color: transparent; /* Текст становится прозрачным */
}

/* Стили для круга с большой монетой */

/* Контейнер для круга */
.circle {
  position: fixed; /* Фиксированное позиционирование */
  top: 40%; /* Смещаем круг на 30% от верхнего края */
  left: 50%; /* Центрируем по горизонтали */
  transform: translateX(-50%); /* Центрируем содержимое по горизонтали */
  z-index: 2; /* Круг всегда выше других элементов (например, фона) */
}

/* Настройки для изображения круга (вместо img используем div) */
#circle {
  width: 300px; /* Ширина круга */
  height: 300px; /* Высота круга */
  background-image: url('./assets/tap.png'); /* Картинка внутри круга */
  background-size: cover; /* Картинка растягивается на весь круг */
  background-position: center; /* Центрируем картинку внутри круга */
  border-radius: 50%; /* Скругляем углы для создания круга */
  box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.05); /* Лёгкая тень вокруг круга */
  transition: transform 0.2s ease; /* Плавное вращение при взаимодействии */
  --tiltX: 0deg;
  --tiltY: 0deg;
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY)); /* Вращение по осям X и Y */
  pointer-events: auto; /* Включаем взаимодействие с кругом */
  -webkit-user-drag: none; /* Отключаем перетаскивание изображения на iOS */
  -webkit-touch-callout: none; /* Отключаем контекстное меню на iOS */
  touch-action: none; /* Отключаем контекстное меню при долгом нажатии на мобильных устройствах */
  user-select: none; /* Отключаем выделение круга */
}

.home-play-area { display: contents; }

/* In a short Telegram Desktop window the track keeps its own row. Only the coin can shrink. */
@media (max-height: 760px) {
  .telegram-desktop .home-play-area {
    position: fixed;
    inset: calc(0.5% + 62px + 10px) 0 var(--progress-bar-bottom, 70px);
    display: grid;
    grid-template: auto auto minmax(0, 1fr) auto / minmax(0, 1fr);
    justify-items: center;
    row-gap: clamp(6px, 1.6vh, 12px);
  }
  .telegram-desktop .home-play-area .game { display: contents; }
  .telegram-desktop .home-play-area :is(.connect-button-container, .header, .circle, #p4) {
    position: static;
    transform: none;
  }
  .telegram-desktop .home-play-area .connect-button-container { height: auto; }
  .telegram-desktop .home-play-area .score { margin: 0; }
  .telegram-desktop .home-play-area .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
  }
  .telegram-desktop .home-play-area #circle {
    position: relative;
    flex: none;
    width: auto;
    height: min(100%, 300px, 94vw);
    aspect-ratio: 1;
    pointer-events: none;
  }
  /* Match the original 135 px tap radius on a 300 px image, at every rendered size. */
  .telegram-desktop .home-play-area #circle::before {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    pointer-events: auto;
  }
}

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

/* По умолчанию все страницы скрыты */
.page {
  display: none; /* Не отображаем страницы */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0; /* Прозрачность для плавного появления */
  transition: opacity 0.2s ease-in-out; /* Плавный переход с увеличенным временем */
}

/* The game viewport stays fixed; a short wallet sheet can still scroll internally. */
html, body.tc-disable-scroll {
  overflow: hidden !important;
  scrollbar-width: none;
}

tc-root [data-tc-modal] {
  inset: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body.tc-disable-scroll::-webkit-scrollbar,
tc-root [data-tc-modal]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#content-container {
  height: 100%;
}

/* Активные страницы */
.page.active {
  display: block; /* Показываем активную страницу */
  opacity: 1; /* Убираем прозрачность для активных страниц */
}

/* Анимация для отображения +1 при нажатии на монету */
.plus-one {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  font-size: 24px; /* Базовый размер, будет масштабироваться через JavaScript */
  font-weight: 800;
  color: #8d3502; /* Оранжевый цвет текста */
  text-shadow: 
  0px 0px 3px rgba(255, 255, 255, 1), /* Белая тень с меньшим размягчением и полной непрозрачностью */
  0px 0px 7px rgba(255, 165, 0, 0.8); /* Оранжевая тень с меньшим размягчением и высокой непрозрачностью */
  opacity: 1;
  z-index: 1000;
}

/* Анимация движения текста +1 */
@keyframes move-up {
  0% {
    opacity: 1; /* Полностью видимый текст */
    transform: translateY(0); /* Стартовая позиция текста */
  }
  100% {
    opacity: 0; /* Исчезновение текста */
    transform: translateY(-50px); /* Текст движется вверх на 50px */
  }
}

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

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

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

/* Новый стиль для центральных надписей на страницах */
.centered-text {
  font-size: 36px; /* Крупный размер текста */
  font-weight: 800; /* Жирный текст */
  user-select: none; /* Отключаем возможность выделения текста */
  font-family: 'Lato', sans-serif; /* Основной шрифт */
  text-align: center; /* Центрирование текста */
  background: linear-gradient(to top, #ffc74e 0%, #fff 100%); /* Градиент от жёлтого к белому */
  -webkit-background-clip: text; /* Для браузеров WebKit - делаем текст прозрачным с градиентом */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Прозрачный текст */
  position: absolute;
  top: 50%; /* Позиция по вертикали в центре */
  left: 50%; /* Позиция по горизонтали в центре */
  transform: translate(-50%, -50%); /* Центрирование текста по горизонтали и вертикали */
}

/* Основной контейнер для иконки и таймера */
.claim-info-container {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4%;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden; /* Скрываем контейнер до момента полной загрузки */
}

/* Иконка */
.claim-icon {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  user-select: none;
}

/* Текст таймера */
.claim-hours-text {
  font-size: 26px;
  font-weight: 800;
  font-family: 'Lato', sans-serif;
  background: linear-gradient(to top, #ffc74e 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  min-width: 50px; /* Фиксируем ширину */
  text-align: left;
  visibility: hidden; /* Скрыт, пока не отображается контейнер */
}