@font-face {
  font-family: 'Involve';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Involve-Regular.woff2') format('woff2'),
    url('../fonts/Involve-Regular.woff') format('woff'),
    url('../fonts/Involve-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Involve';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Involve-Medium.woff2') format('woff2'),
    url('../fonts/Involve-Medium.woff') format('woff'),
    url('../fonts/Involve-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Involve';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Involve-SemiBold.woff2') format('woff2'),
    url('../fonts/Involve-SemiBold.woff') format('woff'),
    url('../fonts/Involve-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Involve';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/Involve-Bold.woff2') format('woff2'),
    url('../fonts/Involve-Bold.woff') format('woff'),
    url('../fonts/Involve-Bold.ttf') format('truetype');
}
.user-info__rank-progress {
  background: #1b1a2c;
  height: 10px;

  -webkit-border-radius: 8rem;
  -moz-border-radius: 8rem;
  border-radius: 8rem;
  position: relative;
  padding: 4px;
  margin: 10px 0;
}
*{
  -webkit-tap-highlight-color: transparent;
}
.user-info__rank-progress span {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  width: 0;
  height: 10px;
  display: block;
  -webkit-border-radius: 8rem;
  -moz-border-radius: 8rem;
  border-radius: 8rem;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  overflow: hidden;
}
button{
  cursor: pointer;
}
.country {
  background: url('../img/usa.svg') no-repeat;
  width: 24px;
  min-height: 17px;
}
.lang-select{
  position: absolute;
  background-color: #1b1a2c;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  left: 0;
  top: calc(100% + 15px);
}
.lang-select li{
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
}
.lang-select li p{
  margin: 0;
}
.lang-select li img{
  width: 24px;
  height: 18px;
}
.sidebar {
  display: flex;
  bottom: 0;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  background-color: #1c1c1e;
  padding: 12px 16px;
  box-sizing: border-box;
  width: 100%;
}
.sidebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background-color: transparent;
  padding: 0;
  width: 55px;
}
.sidebar__item.current svg path {
  stroke: #5056d2;
}
.sidebar__image {
  height: 30px;
  width: 30px;
}
.sidebar__text {
  margin: 4px 0 0;
  color: #fff;
  font-family: 'Involve', sans-serif;
}
.sidebar__text_first {
  color: #5056d2;
}
.sidebar__item:active .sidebar__text {
  color: #5056d2;
}
.sidebar__item:active svg path {
  stroke: #5056d2;
}

/* Enter */
.enter {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.enter__bot {
  margin: 2px 0 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  color: #8b8b8b;
}

.enter__text {
  margin: 0;
}

.enter__title {
  margin: 0;
  font-size: 28px;
}

.enter__subtitle {
  margin: 5px 0 24px;
  font-size: 14px;
  font-weight: 400;
  color: #959595;
}

.enter__form {
  background-color: #1b1a2c;
  padding: 14px 10px;
  border-radius: 14px;
  width: 265px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.enter__contain {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enter__form-text {
  margin: 0;
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
}

.enter__form-button {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  height: 40px;
}

.enter__form-button:hover {
  background-color: #333;
}

.enter__string {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enter__img {
  height: 24px;
  width: 24px;
  opacity: 0; /* Начальное состояние — скрыто */
  animation: fadeIn 1s ease-in-out forwards; /* Анимация появления */
}

.enter__string:nth-child(1) .enter__img {
  animation-delay: 0.5s; /* Задержка для первой галочки */
}

.enter__string:nth-child(2) .enter__img {
  animation-delay: 1s; /* Задержка для второй галочки */
}

.enter__string:nth-child(3) .enter__img {
  animation-delay: 1.5s; /* Задержка для третьей галочки */
}

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

/* Develop */
.develop {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}
.develop-list {
  padding: 0;
  margin: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.develop-item {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 18px 10px;
  background-color: #1b1a2c;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  width: calc(50% - 25px);
  position: relative;
}
.develop-item-info{
  padding: 10px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: none;
  border: none;
}
.develop-item__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
}
.develop-item__block {
  display: flex;
  align-items: center;
  gap: 4px;
}
.develop-item__number {
  margin: 0;
}
.develop-proton__icon {
  width: 84px;
}
.develop-button {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  width: 107px;
  height: 34px;
  color: #fff;
  border: none;
  border-radius: 8px;
}
svg {
  height: 30px;
  width: 30px;
}
.develop__text {
  text-align: center;
  margin: 24px 0 14px;
}
.develop__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}
.develop__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #959595;
  margin: 0 auto;
  max-width: 280px;
  line-height: 14px;
}

/* Friends */
.friends {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}
.friends-list__second {
  padding: 0;
  padding-bottom: 80px;
}

.friends-item__second {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 28px 10px;
  background-color: #1b1a2c;
  border-radius: 14px;
  margin: 0 16px 10px;
}

.friends-item__title_second {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
}

.friends-item__block_second {
  display: flex;
  align-items: center;
  gap: 4px;
}
.friends-item__block_second img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.friends-item__number_second {
  margin: 0;
  font-size: 14px;
  line-height: 14px;
}

.friends-list {
  padding: 0 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.friends-item {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 14px 62px;
  background-color: #1b1a2c;
  border-radius: 14px;
  text-align: center;
  flex: 1;
}
.friends-item__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
}
.friends-item__block {
  display: flex;
}
.friends-item__number {
  margin: 0;
  color: #5056d2;
}
svg {
  height: 30px;
  width: 30px;
}
.friends-task__text {
  text-align: center;
  margin: 24px 0 14px;
}
.friends-task__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}
.friends-task__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #959595;
  margin: 0 auto;
  max-width: 330px;
  line-height: 14px;
}
.invite-buttons-container{
  width: calc(100% - 32px);
  position: fixed;
  left: 16px;
  bottom: 86px;
  display: flex;
  gap: 8px;
  height: 50px;
  align-items: stretch;
}
.copy-invite-link{
  flex: 1;
  display: flex;
  background: none;
  border: 1.5px solid #6b47c8;
  /* border-image: linear-gradient(270deg, #aa23af, #6b47c8, #2a6bdf) 1; */
  border-radius: 8px;
  overflow: hidden;
  gap: 4px;
  align-items: center;
  backdrop-filter: blur(4px);
}
.copy-invite-link p{
  color: white;
  flex: 1;
  font-family: 'Involve', sans-serif;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.share-invite-link{
  width: 50px;
  height: 50px;
  
}
.share-invite-link svg, .copy-invite-link svg{
  width: 20px;
  height: 20px;
}
/* Game */
.game {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  min-height: 100vh;
  margin: 0;
  /*     display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px; */
}
.game__img-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #1b1a2c;
  border-radius: 8px;
  padding: 8px;
}
.game__logo {
  height: 30px;
  align-items: center;
}
.game-block {
  max-width: 390px;
  margin: 0;
}
.game-avatar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  gap: 30px;
  margin-top: 24px;
}
.game-avatar__status {
  display: flex;
}
.game-avatar__img {
  width: 40px;
  margin-right: 4px;
  border-radius: 50%;
}
.game-avatar__title {
  margin: 0;
}
.game-avatar__name {
  margin: 10px 0 16px;
  font-size: 20px;
}
.game-avatar__text {
  margin: 0;
}
.game-avatar__block {
  display: flex;
  align-items: center;
  gap: 2px;
}
.game-avatar__button {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  width: 107px;
  height: 34px;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
}
.game-energy {
  margin-top: 8px;
  padding: 0 16px;
}
.game-energy__contain {
  display: flex;
  margin: 10px 0;
  gap: 2px;
}
.game-energy__title {
  margin: 0;
}
.game-energy__subtitle {
  margin: 0;
  font-weight: 400;
  color: #959595;
}
.game-energy__count {
  margin: 0;
  display: flex;
  justify-content: end;
  min-width: fit-content;
}
.game-button {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
  height: 50px;
  color: #fff;
  border: none;
  border-radius: 14px;
}
.game-button.game-button-pending {
  padding: 2px;
}

.game-button-pending div{
  background-color: #010014;
  border-radius: inherit;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: 'Involve', sans-serif;

}
svg {
  height: 30px;
  width: 30px;
}
.game-contain {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 88vh;
}
.game-field{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  flex: 1;
}
.game-particle-atom{
  width: 54px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px dashed white;
}
.game-particle-atom svg{
  width: 15px;
  height: 15px;
}
.game-wall {
  width: 111px;
  margin: 0 auto;
  transition: 0.1s;
  user-select: none;
}
.game-wall.active-game {
  animation: rotateAtom 5s linear infinite;
}
.game-wall img:not(.proton-dot){
  position: absolute;
  width: inherit;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  height: inherit;
}
.proton-dot{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
@keyframes rotateAtom {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.game-wall.active-game:hover{
  transform: scale(0.9);
}
.game-wall.active-game:active{
  transform: scale(1.1);
}
.popup__close div{
  transform: translateY(-3px);
}
.popup {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);

}

.popup__content {
  border: 1.5px solid;
  border-image: linear-gradient(270deg, #aa23af, #6b47c8, #2a6bdf) 1;
  padding: 20px;
  border-radius: 10px;
  max-width: 320px;
}

.popup__close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  width: 30px;
  text-align: center;
  border-radius: 8px;
}
.popup__text {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
}

/* Main */
.main {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  min-height: 100vh;
  margin: 0;
}

.main-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: 24px;
}
.main__img-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #1b1a2c;
  border-radius: 8px;
  padding: 8px;
  position: relative;
}
.main__logo {
  height: 30px;
  align-items: center;
}
.main-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
}
.avatar-photo{
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.main-avatar__name {
  margin: 6px 0 6px;
  font-size: 20px;
  font-weight: 700;
}
.main-avatar__text {
  margin: 0;
  font-size: 14px;
}
.main-avatar__contain {
  display: flex;
  gap: 10px;
}
.main-avatar__block {
  display: flex;
  align-items: center;
  gap: 2px;
}
.main-energy {
  max-width: 350px;
  margin: 0 auto;
}
.main-energy__contain {
  margin-top: 24px;
  display: flex;
  gap: 2px;
}
.main-energy__title {
  margin: 0;
  font-size: 14px;
}
.main-energy__subtitle {
  margin: 0;
  font-weight: 400;
  color: #959595;
  font-size: 12px;
}
.main-statistics {
  max-width: 370px;
  margin: 0 auto;
}
.main-statistics__contain {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.main-statistics__title {
  display: flex;
  align-items: center;
  margin: 0;
}
.main-statistics__contain-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px; /* Расстояние между карточками */
}
.main-statistics__item {
  padding: 14px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1b1a2c;
  border-radius: 14px;
}
svg {
  height: 24px;
  width: 24px;
}
.main-statistics__item-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
}
.main-statistics__item-subtitle {
  margin: 0;
  color: #5056d2;
  font-size: 20px;
  font-weight: 700;
}

.main-statistics__button {
  background: linear-gradient(270deg, #aa23af 0%, #6b47c8 50%, #2a6bdf 100%);
  width: 100%;
  height: 50px;
  color: #fff;
  border: none;
  border-radius: 14px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 14px;
}
.main-farming-btn{
  background: none;
  border: 1px solid #5056d2;
  }
.main-form {
  padding: 0 16px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Tasks */
.tasks {
  background-color: #010014;
  color: #fff;
  font-family: 'Involve', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

.tasks-contain {
  margin: 24px auto 0;
}
.task-list {
  padding: 0;
}
.task-item {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 21px 10px;
  background-color: #1b1a2c;
  border-radius: 14px;
  margin: 0 16px 10px;
}
.task-item__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
}
.task-item__block {
  display: flex;
}
.task-item__number {
  margin: 0;
}
.task-item .loading{
  animation: taskPending 1.5s linear infinite;
}
@keyframes taskPending {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);

  }
}
.tasks-energy {
  padding: 0 16px;
  margin: 0 auto;
  max-width: 390px;
}
.tasks-energy__contain {
  display: flex;
  gap: 2px;
}
.tasks-energy__title {
  margin: 0;
}
.tasks-energy__subtitle {
  margin: 0;
  font-weight: 400;
  color: #959595;
  font-size: 12px;
}
.task__text {
  text-align: center;
  margin: 20px 0 24px;
}
.task__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}
.task__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #959595;
  margin: 0 auto;
  max-width: 252px;
}
.everyday-counter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.levels-table td{
  padding: 5px;
  
}
.levels-table td div{
  display: flex;
  gap: 5px;
  align-items: center;
}