:root{
  /* COLORS */
  --tab-color: #191919;
  --white-color: #fff;
  --home-icon-color: #00bff3;
  --heart-icon-color: #ff0000;
  --plus-icon-color: #adff2f;
  --user-icon-color: #ee82ee;
  --bell-icon-color: #ffff00;
  
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;

}



li{
  display: inline-block;
}

body{
background: #252525;
height: 100vh;
	color: white;
	margin: auto;
	font-size:14px;
	 font-family: "Montserrat", sans-serif;
	
}

/* ------------ MENU ------------ */
.header {
display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    width: 97%;
    background: #262a2f;
    flex-direction: row;
    flex-wrap: wrap;
	padding: 6px;
    border-radius: 10px;
}.header-left {
  justify-content: flex-start;
}
.header-left, .header-right {
  align-items: center;
  display: flex;
}.header-right {
  justify-content: flex-end;
}.user-info {
  align-items: center;
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
}.user-info-avatar {
  background-color: #1c1f24;
  border-radius: 100%;
  flex: 0 0 40px;
  height: 40px;
  margin-right: 12px;
  overflow: hidden;
  width: 40px;
}.user-info p {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}.user-exchange {
  background: #2e2a20;
  border-radius: 16px;
  height: 40px;
  padding: 6px 10px;
}.user-exchange p.is-not-selected {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
}.user-exchange img {
  align-items: center;
  display: flex;
  height: 28px;
  justify-content: center;
  margin-right: 6px;
  width: 28px;
  overflow: hidden;
}

.coins {
display: flex;
    justify-content: center;
    align-items: center;
    height: 28vh;
    background-color: #2d324629;
}

.coins-container {
display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1c1f2e;
    border-radius: 10px;
    padding: 27px;
    color: white;
    width: 89%;
    font-family: Arial, sans-serif;
}

.money {
    display: flex;
    align-items: center;
    font-size: 2em;
}

.money-icon {
    margin-right: 10px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #444;
    border-radius: 5px;
    margin: 10px 0;
    position: relative;
}

.progress {
    width: 60%; /* Adjust width as needed */
    height: 100%;
    background: linear-gradient(to right, #a050ea, #ff5677); /* Gradient color */
    border-radius: 5px;
}

.status {
display: flex;
    justify-content: center;
    width: 100%;
    font-size: 1em;
    flex-direction: row;
	
    align-items: center;
}

.status-starter, .status-pro, .pro-value {
    margin: 0 5px;
}

/* ------------ MENU ------------ */
.nav{
    background: rgb(66,39,90);
    background: #272a2f;
    width: 98%;
	margin:auto;
	left: 4px;
    border-radius: 1em;
    padding: 10px 2em;
    box-shadow: 0 1em 1em rgb(0 0 0 / 20%);
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    bottom: 8px;
	position: fixed;
	z-index: 10;
}

.nav__links{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav__link a{
  color: var(--white-color);
      font-size: 30px;
  opacity: 0.5;
}
.nav__link a:hover{
  color: var(--white-color);

}

.nav__light{
position: absolute;
    top: 0;
    left: 0.8em;
    background-color: var(--white-color);
    width: 4em;
    height: 0.2em;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    transition: .3s ease;
}

.nav__light::before{
  content: '';
  width: 5em;
  height: 7em;
  position: absolute;
  top: .2em;
  background: linear-gradient(to bottom, rgba(255,255,255, .3) -50%, rgba(255,255,255, 0) 90%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
}
 .click-counter {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        display: none;
    }

.nav__link.active a{
  opacity: 1;
}

.nav__link.active a .bx-home-alt-2{
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(1).active ~ .nav__light{
  background-color: var(--home-icon-color);
}


.nav__link.active a .bx-task{
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(2).active ~ .nav__light{
  background-color: var(--home-icon-color);
}


.nav__link.active a .bx-bolt-circle{
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(3).active ~ .nav__light{
  background-color: var(--home-icon-color);
}



.nav__link.active a .bx-dollar{
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(4).active ~ .nav__light{
  background-color: var(--home-icon-color);
}


.nav__link.active a .bx-user-circle{
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(5).active ~ .nav__light{
  background-color: var(--home-icon-color);
}
.exyl{
	    font-family: "Palanquin Dark", sans-serif;
    color: #00bff3;
}

#particles-js {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.community-info {
    display: flex;
    align-items: center;
    background-color: #272a2f;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    width: 98%;
    max-width: 400px;
}

.community-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.community-details {
    flex-grow: 1;
    margin-left: 15px;
}

.community-name {
    font-size: 14px;
    font-weight: bold;
}

.community-stats {
    font-size: 12px;
    color: #aaa;
}

.community-badge {
    background-color: #444;
    padding: 5px 10px;
    border-radius: 5px;
}.community-badge a{ 
color: #ffd700; /* Gold color for Diamond badge */
    font-weight: bold;
	text-decoration: none;
}

.community-badge .badge {
    color: #ffd700; /* Gold color for Diamond badge */
    font-weight: bold;
}.modal {
    display: none; /* Başlangıçta gizli */
    position: fixed; /* Sabit pozisyon */
    z-index: 1000; /* Modal pencerenin üzerinde olması için yüksek z-index değeri */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Eğer modal içeriği sığmazsa scroll yapması için */
    background-color: rgba(0,0,0,0.5); /* Arkaplanı koyu saydam siyah yap */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Ortalanmış olarak yerleştir */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Modal pencere genişliği */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation-name: modalopen;
    animation-duration: 0.4s;
}

@keyframes modalopen {
    from {opacity: 0}
    to {opacity: 1}
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.content {
  display: none; 
}

.content.active {
  display: block; 
}.myButton {
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}

.myButton:active {
	position:relative;
	top:1px;
}.daily-bonus{
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    padding: 13px;
    margin: 5px;
    color: #333333;
    border-radius: 8px;
    width: 28%;
}.daily-bonus-day{
	font-size: 27px;
    font-weight: 700;
	color: rebeccapurple;
}.daily-bonus-text{
	color: #333333;
}.dailyBonusClaimed{
	 margin-bottom: 3px;
    font-weight: 500;
    padding: 10px 5px 10px 9px;
    background: #00b746;
    border-radius: 10px;
    margin-left: 5px;
    display: flex;
    margin-right: 5px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}.yesButton{
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:7px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}.scene
{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #01070a;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 1;
}
.scene .rocket
{
    position: relative;
    animation: animate 0.8s ease infinite;
}
@keyframes animate
{
    0%,100%
    {
        transform: translateY(-2px);
    }
    50%
    {
        transform: translateY(2px);
    }
}
.scene .rocket::before
{
    content: '';
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 200px;
    background: linear-gradient(#00d0ff,transparent);
}
.scene .rocket::after
{
    content: '';
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 200px;
    background: linear-gradient(#00d0ff,transparent);
    filter: blur(20px);
}
.scene i
{
    position: absolute;
    top: -250px;
    background: rgba(255,255,255,0.5);
    animation: animateStars linear infinite;
}
@keyframes animateStars
{
    0%
    {
        transform: translateY(0);
    }
    100%
    {
        transform: translateY(200vh);
    }
}.coin-icon {
  width: 30px;
  height: 30px;
}.big-stat {
  font-size: 24px;
  padding-left: 5px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}.modal-balance div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2rem;
}.blur-border {
  position: relative;
}
.modal-balance {
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}.earn-top-image {
  height: 106px;
  margin: 24px auto;
  position: relative;
  width: 106px;
}.earn-top-image .icon {
  height: 275px;
  left: 50%;
  position: absolute;
  top: 86%;
  transform: translate(-50%,-50%);
  width: 275px;
  z-index: 1;
}.earn-top-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 12px;
  margin-top: 77px;
  text-align: center;
}.earn-top-image img {
position: relative;
z-index: 2;
width: 120px;
top: 32px;
left: -7px;
}.task-nav.blur-border {
  align-items: stretch;
  background: #272a2f;
  border: 1px solid #1c1f24;
  border-radius: 10px;
  box-shadow: 0 0 4px 4px #1c1f2433;
  display: flex;
  min-height: 50px;
  justify-content: space-between;
  padding: 4px;
  position: sticky;
  top: 4px;
  margin-top: 20px;
  z-index: 20;
  box-sizing: border-box;
}
.task-nav {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  padding: 15px 0;
  margin: 0;
    margin-top: 0px;
  align-items: end;
  gap: 10px;
}
.blur-border {
  position: relative;
}.task-nav .action-btn.social.active {
  background: #1c1f24;
  border: 0;
}
.task-nav .action-btn.active {
  margin-bottom: 15px;
}
.task-nav .action-btn.dot {
  position: relative;
}
button.action-btn.active {
  margin: 0 !important;
  border: 1px solid #6569ff;
}
button.action-btn.social {
  background: #333;
  border-radius: 8px !important;
  padding: 8px;
  color: #fff !important;
  box-shadow: none;
  -webkit-text-stroke: unset;
  opacity: 1;
  width: 33%;
}
.task-nav .action-btn {
  border-radius: 13px;
  font-size: 14px;
  white-space: nowrap;
}
a.action-btn, button.action-btn {
  background: #5a60ff;
  border-radius: 8px !important;
  padding: 8px;
  color: #fff !important;
  box-shadow: none;
  -webkit-text-stroke: unset;
  opacity: 1;
}
.action-btn {
  background: linear-gradient(180deg,#24242400 0,#6d0561);
  opacity: .85;
  box-shadow: 0 4px 17.8px #000;
  border-radius: 13px;
  color: #fff !important;
}.task-nav .action-btn.dot::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #c90000;
  z-index: 99;
  border-radius: 100px;
}button.action-btn.social {
  background: #333;
  border-radius: 8px !important;
  padding: 8px;
  color: #fff !important;
  box-shadow: none;
  -webkit-text-stroke: unset;
  opacity: 1;
  width: 33%;
}button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: .6em 1em;
  font-family: Roboto Flex,sans-serif;
  font-size: 1em;
  font-weight: 500;
  background-color: #1a1a1a;
  cursor: pointer;
}.ref-bodys {
  padding: 15px 20px 36px !important;
  margin: 0 -20px;
}
.ref-body {
  text-align: left;
  padding: 15px 0 50px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}span.inter-text {
  padding: 5px 0;
}
.daily-cards-text {
  text-align: center;
}
.inter-text {
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 17px !important;
  color: #fff;
}.daily-cards {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 10px;
padding: 17px 17px 17px 17px;
place-items: center;
background: #333;
border-radius: 10px;
}.daily-cards .card.claimed {
  border: 2px solid #62cc6c;
}.daily-cards .card {
  width: 100%;
  box-sizing: border-box;
  background: #272a2f;
  border: 0px;
  border-radius: 11px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px;
  flex-direction: column !important;
  padding: 2px;
}.daily-cards .card.unclaimed {
  opacity: .4;
}.bg-modal {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 20px;
  max-height: calc(100dvh - 62px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overflow-x: hidden;
}.main-container.task .screen-content, .main-container.ref .screen-content, .main-container.boost .screen-content, .main-container.stats .screen-content {
  background: #000;
  border-radius: 0;
  border-top: 0;
  box-shadow: none;
  display: block;
  margin-top: 0;
}
.screen-content {
  background: #1c1f24;
  background-size: cover;
  border-radius: 40px 40px 0 0;
  border-top: 2px solid #f3ba2f;
  box-shadow: 0 -4px 64px #fab82299;
  margin-top: 12px;
  min-height: calc(100vh - 62px);
  flex: 1 1 auto;
  padding: 20px 15px 70px;
}
.screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin: 20px 0;
    margin-top: 20px;
}button.user-tap-button {
background-color: transparent;
height: 251px;
margin: 0 auto;
transition: none .25s ease;
padding: 50px 0;
-webkit-transition: none .25s ease;
-webkit-transition: none;
width: 100%;
position: relative;
left: 70%;
top: -8%;
}
.button {
  border: none;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  transition: all .25s ease;
  -webkit-transition: all .25s ease;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
}button.user-tap-button div {
  box-sizing: border-box;
}
.user-tap-button-inner {
background: linear-gradient(180deg,#ffcd7c,#a76b00 49.53%,#bc7014);
border-radius: 50%;
height: 282px;
padding: 15px;
position: relative;
width: 282px;
transform: scale(1) translateZ(0) rotateX(0) rotateY(0);
}.user-tap-button-inner::before {
  border: 1px solid rgb(255 169 22 / 40%);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}.user-tap-button-circle {
  align-items: center;
  background: #ce6d00de;
  border: 1px solid rgb(255 193 57 / 82%);
  border-radius: 50%;
  box-shadow: 0 0 15px #fda541;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 3;
}.user-tap-button-circle::before {
  background-color: #3763ff;
  background: radial-gradient(circle,#ffd74a 0,#c89e25 80%);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  left: right 0;
  opacity: .6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}.user-tap-button img {
display: block;
height: auto;
max-height: 99%;
max-width: 87%;
pointer-events: none;
position: relative;
width: auto;
z-index: 1;
}
.bounce {
  animation: bounce 1s infinite ease-in-out;
}@keyframes bounce {
 0%,
 to {
  transform:translateY(0)
 }
 50% {
  transform:translateY(-10px)
 }
}
.object {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 1px);
  background-size: 100% 100%;
}

.rockets {
  width: 30px;
  height: 50px;
  left: 10px;
  top: 175px;
  background-image: url("http://tweene.com/skin/Default/img/rocket-03.svg");
}

.planet {
  width: 160px;
  height: 90px;
  left: 160px;
  top: 200px;
  margin-left: -80px;
  margin-top: -45px;
  background-image: url("http://tweene.com/skin/Default/img/space-planet.svg");
}
#rm ul, #rm li{
  position: absolute;
  top: 40%;
  left: 50%;
}

#rm ul{
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  list-style: none;
  animation: breathe 5s infinite ease both;
}

#rm li{
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 20px;
  box-shadow: inset 0px 0px 5px rgb(100, 230, 255),
              0px 0px 2px rgba(255, 255, 255, 0.5),
              0px 0px 10px rgb(0, 191, 243);
  background: rgb(0, 191, 243);
  opacity: 0.60;
  animation-name: clockwise;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#rm li:nth-child(even){ 
  animation-direction: reverse;
}

#rm li:nth-child(3n+3){
  animation-duration: 40s; 
  opacity: 0.80;
}

#rm li:nth-child(4n+4){ 
  animation-duration: 30s; 
  opacity: 0.40;
}

@for $item from 1 through 40{
  li:nth-child(#{$item}){ 
    animation-delay: -#{$item}s; 
  }
} 

@keyframes breathe{
  0%  { transform: scale(0.75); }
  50% { transform: scale(1.25); }
  100%{ transform: scale(0.75); }
}

@keyframes clockwise{
  0% { 
        transform: rotate(0deg) 
                   translate(-100px)
                   rotate(0deg); 
  }
  
  100% { 
        transform: rotate(360deg) 
                   translate(-100px) 
                   rotate(-360deg); 
  }
}.ref-section .balance {
  padding: 0;
  display: block !important;
  margin: 0;
  text-align: center;
  justify-content: unset !important;
}.ref-section .balance p {
  font-size: 32px;
  font-weight: 700;
}.ref-section .balance {
  text-align: center;
}ul.friends-invite {
  padding: 0;
}.ref-section .balance span {
  font-size: 24px;
  text-shadow: 0px 2px 15px rgba(214,169,25,.47);
  color: #ffd337;
  font-weight: 700;
}.friends-invite li:last-child {
  margin-bottom: 0;
}
.friends-invite li {
  align-items: flex-start;
  background: #272a2f;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 12px;
}.ref-body div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.friends-invite-image {
  flex: 0 0 60px;
  margin-right: 12px;
  position: relative;
}.friends-invite-info {
  flex: 1 1 auto;
}.ref-body div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.friends-invite-info-title {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  margin-bottom: 12px;
  margin-top: 4px;
  text-align: left;
}.friends-invite-info-item {
  align-items: flex-start;
  display: flex;
  font-size: 14px;
}.friends-invite-info-item::before {
  background-color: #ffd337;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 6px;
  margin-top: 7px;
  width: 6px;
}.ref-body div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: #fff;
  font-weight: 700;
  position: relative;
}.friends-invite-info-item span {
  display: inline;
  margin-left: 5px;
}.referral-div {
  flex-wrap: wrap;
}.ref-body div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ref-btns {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}a.action-btn {
  text-decoration: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  height: 50px;
  box-sizing: border-box;
}
a.action-btn, button.action-btn {
  background: #5a60ff;
  border-radius: 8px !important;
  padding: 8px;
  color: #fff !important;
  box-shadow: none;
  -webkit-text-stroke: unset;
  opacity: 1;
  width:50%;
}.friends-bonuses-list li {
  align-items: center;
  background: #272a2f;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 12px 0;
}