:root {
  color-scheme: light only;
  --black: #271d13;
  --grey: #707070;
  --white: #ecf8ff;
  --active: #f7d29b;
  --highlight: #474137;
  --font: "Noto Sans SC", sans-serif;
  --font2: "DM Sans", sans-serif;
  --font3: "Noto Serif SC", serif;
  --navheight: 70px;
  --txt_l: 20px;
  --txt_heading: 24px;
}

@media only screen and (max-width: 768px) {
  :root {
    --navheight: 65px;
  } 
}
/*---------------------------------------
   Animation
-----------------------------------------*/
@keyframes fadein{
	from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadein_top{
	from {transform: translateY(300px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}
@keyframes fadein_bottom{
	from {transform: translateY(-300px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}
@keyframes fadein_left{
	from {transform: translateX(-500px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}
@keyframes fadein_right{
	from {transform: translateX(500px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}
@keyframes popin{
  0% {transform: scale(2); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}
@keyframes popout{
  0% {transform: scale(0); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}
@keyframes rotate{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes toleft{
  0% {transform: translateX(0);}
  100% {transform: translateX(-3000px);}
}

/*---------------------------------------
   Normalize    
-----------------------------------------*/
body{
  position: relative;
  width: 100%;
  margin: 0px;
  padding: 0px;
  color: var(--black);
  font-size:  var(--txt_s);
  font-family: var(--font);
  font-weight: 500;
  text-wrap: pretty;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--black);
  background: #0e0e0e;

}

.maincontainer{
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: auto;
  padding-bottom: 150px;
  z-index: 15;
}

p, li {
  font-size: var(--txt_body);
  line-height: calc(var(--txt_body) + 5px);
  font-weight: 400;
}

ol{
  padding-left: 18px;
}

button, a{
  pointer-events: all;
  cursor: pointer;
}

.divider.verti{
  margin: 0;
  width: 0;
  height: 100px;
  border-left: 1.5px solid white;
}

input{
  padding: 1rem;
}

.logo{
  width: 180px;
  max-width: 12%;
  aspect-ratio: 189 / 104;
  background: url(../img/logo.png) top center no-repeat;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .maincontainer{
    padding-bottom: 200px;
  }
  .draggable-scroll{
    cursor: grab;
  }
  .logo{
    max-width: 30vw;
    z-index: 9999;
  }
}

.helper{
  font-size: small;
  color: var(--grey);
}

/*---------------------------------------
   Font
-----------------------------------------*/
.tab-pane h2:not(.tlttxt){
  color: white;
  font-size: calc(var(--txt_l) -2px);
}
h2.tlttxt{
  --txt_l: 30px;
  --tltcolor:#1681b6;
  font-family: var(--font3);
  color: var(--black);
  padding: 9px 5px;
  border-top: var(--black) 1px solid;
  border-bottom: var(--black) 1px solid;
  width: fit-content;
  font-weight: 900;
}

.txt_highlight, .red{
  color: #ff2b44 !important;
}

.divider{
  border-bottom: 1px dotted var(--highlight);
}

table{
  width: 99.5%;
  border-spacing: 1px;
  color: #3c414a;
  margin: 1rem auto 1.5rem;
}
table tr:first-child td{
  padding: .8rem .5rem;
  background-color: var(--highlight);
  text-align: center;
  font-weight: 400;
  color: #fbf7e8;
}
table tr:nth-child(odd) {
  background-color: rgba(108,148,188,.35);
}
table tr:nth-child(even) {
  background-color: rgba(137,167,200,.35);
}
table td {
  font-size: 14px;
  line-height: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  word-break: break-all;
  padding: .5rem .5rem;
  /* background-color: rgba(74, 74, 134, .3); */
  text-align: center;
}

/*---------------------------------------
   Scroll Effect       
-----------------------------------------*/
/* ::-webkit-scrollbar {
  width: 6px;
  height: 3.5px;
} */
::-webkit-scrollbar-track {
  opacity: 0;
}
/* ::-webkit-scrollbar-thumb {
  background: rgba(67, 169, 233, 0.7);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #45adee;
} */

body.modal-open {
  overflow-y: scroll; /* Ensures the scrollbar stays visible */
}

/*---------------------------------------
   NAVBAR
-----------------------------------------*/
.navigation{
  padding: 15px 2%;
  top: 0;
  position: fixed;
  z-index: 9999;
  max-width: 1920px;
  justify-self: center;
}

#navbarNav{
  position: relative;
  max-height: fit-content;
  width: 100vw;
}

.navbar-toggler{
  position: absolute;
  right: 2%;
  top: 10%;
  aspect-ratio: 1/1;
  width: 15%;
  min-width: 40px;
  max-width: 50px;
  background: url(../img/btn_close.png) no-repeat center;
  background-size: contain;
  z-index: 9999;
  filter: saturate(0) brightness(10);
  opacity: 0.7;
}
.navbar-toggler:hover{
  opacity: 1;
}
.navbar-toggler.collapsed{
  background: url(../img/btn_navopen.png) no-repeat center;
  background-size: contain;
}

.navbutton_wrapper{
  position: relative;
  max-height: fit-content;
  width: 100%;
  gap: 1%;
  margin-top: .5%;
}
.tabbutton_wrapper{
  display: none;
}

.btn_nav {
  padding: .25% 1.5%;
  border-radius: 50px;
  background: var(--highlight);
  color: var(--active);
  font-size: .85vw;
}

.btn_nav:hover{
  background: var(--active);
  color: var(--highlight);
}

.btn_fb:hover{
  filter: brightness(1.2);
}

@media only screen and (max-width: 768px) {
  .navigation.scrolled{
    background: linear-gradient(to bottom, black , transparent);
  }
  #navbarNav {
    position: fixed;
    top: 0;
    right: -200px;
    margin: 0;
    aspect-ratio: unset;
    width: 0;
    min-height: 100vh;
    max-height: 100vh;
    gap: 15px;
    padding: 80px 20px;
    background-color: rgba(25, 30, 50, .9);
    background: linear-gradient(to top, var(--active), #76add1);
    transition: all 0.5s ease-in-out;
    overflow-y: scroll;
    z-index: 999;
  }
  #navbarNav.nav-open {
    right: 0;
    width: 100vw;
    padding: 125px 0;
  }
  .navbutton_wrapper {
    max-width: fit-content;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: fit-content;
    padding: 0 15px;
  }
  .tabbutton_wrapper {
    display: flex;
    min-height: fit-content;
    padding: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(56, 136, 187, 0.5);
  }
  .btn_nav{
    --txt_s: 14px;
    min-height: 30px;
    padding: 5px 25px;
    font-size: var(--txt_s);
    text-wrap: nowrap;
    border-radius: 50px;
  }
}

/*---------------------------------------
   VIDEO MODAL
-----------------------------------------*/
/* Overlay */
.videoModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  padding: 24px;
}
.videoModal.is-open { display: flex; }

/* Dialog */
.videoModal_dialog {
  width: min(100%, 960px);
  filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.5));
  position: relative;
}

.btn_closeVideo.btn_close, .btn_closePopup.btn_close{
  top: -80px !important;
  left: 50%;
  transform: scale(1) translateX(-50%) !important;
}

/* .videoModal_wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 15px;
  overflow: hidden;
} */
.videoModal_wrapper {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 70vh;
  margin: auto;
  background: #000;
  border-radius: 15px;
  overflow: hidden;
}
.videoModal_wrapper > * {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
  background: #000;
}

/*---------------------------------------
   Button
-----------------------------------------*/
.btn{
  all: unset;
}
.btn_wrapper{
  width: 100%;
  max-width: 1920px;
  position: relative;
  pointer-events: none;
  z-index: 50;
  max-height: fit-content;
  padding: 3vw;
  align-items: flex-end;
}

.btn_appstore{
  width: 182px;
  max-width: 10vw;
  aspect-ratio: 182 / 59;
}
.btn_appstore.apple{
  background: url(../img/kv/btn_apple.png) no-repeat;
  background-size: contain;
}
.btn_appstore.google{
  background: url(../img/kv/btn_google.png) no-repeat;
  background-size: contain;
}

@keyframes popping{
  0% {transform: scale(1)}
  100% { transform: scale(.93)}
}
@keyframes poppingcenter{
  0% {transform: translateX(-50%) scale(1)}
  100% { transform: translateX(-50%) scale(.98)}
}
.btn_cta{
  width: 17%;
  max-width: 324px;
  aspect-ratio: 324/104;
  background: url(../img/kv/btn_cta.png) no-repeat;
  background-size: contain;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.65));
  transition: 0s;
}

.btn_cta span{
  position: absolute;
  width: 50%;
  max-width: 118px;
  aspect-ratio: 118/88;
  background: url(../img/gift.gif) no-repeat;
  background-size: contain;
  left: 0;
  top: 0;
  z-index: 10;
  animation: gift 1s steps(2) infinite forwards; 
}

.btn_submit{
  width: 60%;
  min-width: 180px;
  max-width: 324px;
  aspect-ratio: 324/104;
  background: url(../img/preregister/btn_submit.png) no-repeat;
  background-size: contain;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.65));
  transition: 0s;
  margin-bottom: 10px;
}
.btn_submit.check{
  background: url(../img/preregister/btn_submit2.png) no-repeat;
  background-size: contain;
}
.btn_cta:hover, .btn_submit:hover{
  filter: hue-rotate(-5deg) saturate(1.05) brightness(1.05);
  transform: scale(.95);
}

@keyframes gift{
  0% { transform: rotate(0)}
  100% { transform: rotate(-15deg)}
}
@keyframes spin{
  0% {transform: rotate(0)}
  100% { transform: rotate(360deg)}
}

.btn_play {
  position: absolute;
  width: 18%;
  max-width: 147px;
  aspect-ratio: 106 / 103;
  right: 11%;
  top: 12%;
  background: url(../img/btn_play.png) no-repeat;
  background-size: contain;
  z-index: -5;
}
.btn_cta, .btn_play{
  opacity: 0;
  animation: popout .5s forwards  1s, popping .5s linear infinite alternate 1.5s;
}
.btn_cta.preregister{
  position: absolute;
  left: 50%;
  animation: popout .5s forwards  1s, poppingcenter .5s linear infinite alternate 1.5s;
}
.btn_play:hover{
  filter: hue-rotate(358deg) saturate(1.5) brightness(1.05);
  transform: scale(.95);
}
@media only screen and (max-width: 768px) {
  .btn_wrapper{
    flex-direction: column;
    max-width: 100vw;
    align-items: center;
    padding-bottom: 5vw;
  }
  .btn_cta{
    width: 55%;
  }
  .btn_appstore{
    max-width: 25vw;
  }   
  .btn_cta.preregister{
    position: unset;
    left: unset;
    animation: popout .5s forwards  1s, popping .5s linear infinite alternate 1.5s;
  } 
}

.hidden .btn_sm{
  width: 20%;
  max-width: 98px;
  aspect-ratio: 98/219;
  background: url(../img/btn_facebook.png) no-repeat;
  background-size: contain;
  transform: translateY(150px);
  opacity: 0;
}
.show .btn_sm{
  transform: translateY(0);
  opacity: 1;
}
.btn_sm.fb:hover{
  background: url(../img/btn_facebook-hover.png) no-repeat;
  background-size: contain;
}
.btn_sm.dc{
  background: url(../img/btn_discord.png) no-repeat;
  background-size: contain;
}
.btn_sm.fb{
  margin-top: 20%;
}
.btn_sm.dc:hover{
  background: url(../img/btn_discord-hover.png) no-repeat;
  background-size: contain;
}
.btn_sm:hover{
  transform: scale(.95);
  transition: all .3s;
}

.btn_close{
  width: 60px;
  max-width: 15%;
  aspect-ratio: 1/1;
  animation: popout .5s forwards;
  z-index: 99;
  filter: drop-shadow(0 0 6px rgb(255, 161, 107));
  position: absolute;
  right: -3%;
  top: 2%;
  display: none;
  background: url(../img/btn_close.png) no-repeat;
  background-size: contain;
}

.active .btn_close, .videoModal .btn_close, .btn_closePopup{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.btn_close:hover{
  filter: drop-shadow(0 0 6px rgb(218, 100, 21));
}

.btn_share, .btn_fb{
  width: 80px;
  max-width: 15%;
  min-width: 50px;
  aspect-ratio: 1/1;
  animation: popout .5s forwards;
  z-index: 99;
  background: url(../img/btn_share.png) center no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgb(255, 161, 107));
}
.btn_fb{
  background: url(../img/btn_fb.png) center no-repeat;
  background-size: contain;
}
.btn_share:hover, .btn_fb:hover{
  filter: drop-shadow(0 0 6px rgb(218, 100, 21)) saturate(1.1) brightness(120%);
}

/*---------------------------------------
   Tab
-----------------------------------------*/
.btn_tab{
  position: relative;
  min-width: 150px;
  max-width: fit-content;
  font-weight: 600;
  padding: 10px 25px;
  background: linear-gradient(to top, var(--active), var(--white));
  color: var(--highlight);
  overflow: visible;
  text-wrap: nowrap;
  transition: 0s;
}
.btn_tab::before, .btn_tab::after{
  content: "";
  position: absolute;
  width: 6%;
  aspect-ratio: 1/1;
  top: 50%;
  transform: translateY( -50%);
  background: linear-gradient(to top, var(--black), var(--highlight));
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 0);
}
.btn_tab::before{
  left: 5%;
}
.btn_tab::after{
  right: 5%;
}
.btn_tab:hover::before, .btn_tab.active::before, .btn_tab:hover::after, .btn_tab.active::after{
  background: white;
}
.btn_tab:hover, .btn_tab.active{
  color: var(--white);
  background: linear-gradient(to top, #a15542, #de7c52);
  transition: 0s;
}
@media only screen and (max-width: 768px) {
  .btn_tab{
    min-width: fit-content;
  }
}

/*---------------------------------------
   KV
-----------------------------------------*/
#KV, .rsp_mobile{
  position: relative;
  width: 100vw;
  max-width: 1920px;
  aspect-ratio:  1920/910;
  background: url(../img/kv/bg_3.jpg) bottom center no-repeat;
  background-size: cover;
  justify-self: center;
}
#KV{
  align-items: flex-end;
}
#KV::before{
  content: "";
  position: absolute;
  width: 100%;
  max-width: 100vw;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0,0,0,0) 75%);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}
/* #KV::after{
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  background: linear-gradient(245deg, rgba(16, 79, 128, 0.95), rgba(0,0,0,0) 50%);
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 8;
} */

.slogan.hidden{
  position: absolute;
  width: 22%;
  max-width: 492px;
  aspect-ratio: 492 / 623;
  right: 5%;
  top: 12%;
  transform-origin: center;
  background: url(../img/kv/slogan-v.png) center no-repeat;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.65));
  background-size: contain;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
}
.slogan_h.hidden {
  position: relative;
  width: 33%;
  max-width: 679px;
  aspect-ratio: 679 / 356;
  background: url(../img/kv/slogan-h.png) bottom no-repeat;
  /* filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.65)); */
  background-size: contain;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  margin-bottom: -2%;
  margin-left: -2%;
}

.kvwrapper.play .slogan.show, .kvwrapper.play .slogan_h.show{
  opacity: 1;
  transition: opacity .3s ease;
}

.ground{
  position: absolute;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  background: url(../img/kv/ground.png) bottom center no-repeat;
  background-size: contain;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}

@keyframes float{
  0% {transform: translateY(0px)}
  100% { transform: translateY(25px)}
}
.char{
  --char_w: 475px;
  position: absolute;
  width: 25vw;
  max-width: var(--char_w);
  aspect-ratio: 475 / 885;
  bottom: -15%;
  right: 36%;
  z-index: 9;
  background: url(../img/kv/char.png) center no-repeat;
  background-size: contain;
}
.kvwrapper.play .char{
  animation: fadein_top 1s ease forwards;
}

#cloud {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0px;
  pointer-events: none;
  top: 0;
  mix-blend-mode: screen;
  z-index: 1;
}
#cloud > span {
  width: 100%;
  min-height: 130px;
  position: absolute;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: 100%;
  mix-blend-mode: screen;
  left: 90vw;
  top: 5%;
  background: url(../img/kv/cloud1.png) bottom no-repeat; 
  background-size: contain;
  opacity: 0.5;
  -moz-animation: 30s linear infinite forwards running toleft;
  -webkit-animation: 30s linear infinite forwards running toleft;
  -o-animation: 30s linear infinite forwards running toleft;
  -ms-animation: 30s linear infinite forwards running toleft;
  animation: 30s linear infinite forwards running toleft;
}
#cloud > span:nth-child(2) {
  top: 25%;
  opacity: 0.7;
  background: url(../img/kv/cloud2.png) bottom no-repeat;
  background-size: contain;
  -moz-animation: 15s linear 1s infinite forwards running toleft;
  -webkit-animation: 15s linear 1s infinite forwards running toleft;
  -o-animation: 15s linear 1s infinite forwards running toleft;
  -ms-animation: 15s linear 1s infinite forwards running toleft;
  animation: 15s linear 1s infinite forwards running toleft;
}
#cloud > span:nth-child(3) {
  top: 40%;
  opacity: 0.8;
  background: url(../img/kv/cloud3.png) bottom no-repeat;
  background-size: contain;
  -moz-animation: 20s linear 0.8s infinite forwards running toleft;
  -webkit-animation: 20s linear 0.8s infinite forwards running toleft;
  -o-animation: 20s linear 0.8s infinite forwards running toleft;
  -ms-animation: 20s linear 0.8s infinite forwards running toleft;
  animation: 20s linear 0.8s infinite forwards running toleft;
}

@media only screen and (max-width: 768px) {
  #KV, .rsp_mobile{
    padding-bottom: 20px;
    aspect-ratio: 780 / 1450;
  }
  #KV::before{
    height: 50%;
  }
  .ground{
    height: 50%;
    background: url(../img/kv/ground.png) bottom center no-repeat;
    background-size: cover;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  #KV::after{
    width: 100vw;
  }

  .slogan.hidden{
    top: 8%;
    width: 40%;
  }
  .slogan_h.hidden{
    width: 100%;
    margin-bottom: -8%;
  }
  .char{
    top: 15%;
    right: 12%;
    bottom: -5%;
    width: 70vw;
  }
  .app_wrapper{
    order: 3;
  }
}

/*---------------------------------------
   Feature
-----------------------------------------*/
#feature, #heros, #reward{
  position: relative;
  width: 100vw;
  max-width: 1920px;
  min-height: 500px;
  background: url(../img/bg_s2.jpg) top center no-repeat;
  background-size: cover;
  justify-self: center;
  padding: 8% 0;
}
#feature{
  padding-bottom: 0;
}
#feature::before, #feature::after, #heros::before, #footer::after{
  content: "";
  position: absolute;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
#feature::before{
  top: 0;
  background: url(../img/divider_s2.png) top center no-repeat;
  background-size: contain;
}
/* #feature::after{
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0,0,0,0) 80%);
  bottom: 0;
  z-index: 0;
} */
#heros::before{
  background: linear-gradient(to left, rgba(0, 0, 0, .7), rgba(0,0,0,0) 80%);
  bottom: 0;
  right: 0;
}
#footer{
  overflow: visible;
}
#footer::after{
  bottom: 100%;
  background: url(../img/divider_footer.png) bottom center no-repeat;
  background-size: contain;
}
#carouselFeature{
  max-height: 70vh;
  aspect-ratio: 9/16;
}
.feature_wrapper{
  position: relative;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/popup.png) bottom center no-repeat;
  background-size: 100% 100%;
  padding: 80px 50px 90px 50px;
  z-index: 2;
}
.feature_wrapper::after {
  content: "";
  position: absolute;
  width: 25%;
  max-width: 170px;
  aspect-ratio: 170 / 497;
  background: url(../img/title_feature.png) no-repeat center;
  background-size: contain;
  top: 0;
  left: 90%;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  #feature{
    padding-top: 15%;
  }
  #feature::before, #feature::after{
    min-width: 200vw;
  }
  #heros::before{
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0,0,0,0) 50%);
    right: unset;
  }
  #carouselFeature{
    max-height: unset;
    max-width: 55vw;
    aspect-ratio: 9/16;
  }
  .feature_wrapper{
    max-width: 75vw;
    padding: 15% 10%;
  }
}
.char2 {
  --char_w: 758px;
  position: absolute;
  width: 490px;
  max-width: var(--char_w);
  aspect-ratio: 758 / 1043;
  bottom: -35%;
  right: 80%;
  z-index: 5;
  background: url(../img/char_feature.png) left bottom no-repeat;
  background-size: contain;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .char2 {
    width: 30vw;
    min-width: 50vw;
    right: unset;
    left: -35%;
    bottom: -20%;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-image: url("../img/btn_arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 6px rgb(255, 161, 107));
  pointer-events: all;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 6px rgb(218, 100, 21)) saturate(1.1) brightness(120%);
}


.carousel-control-next-icon{
  transform: rotate(180deg);
}
.carousel-control-next, 
.carousel-control-prev{
  width: unset;
  opacity: 1;
}
.carousel-control-prev:not(.btn_prev){
  left: -14%;
}

.carousel-control-next:not(.btn_next){
  right: -14%;
}

.carousel{
  overflow: visible;
}

/*---------------------------------------
   heros
-----------------------------------------*/
#heros{
  background: url(../img/bg_char.jpg) top center no-repeat;
  background-size: cover;
  border-top: #f8e5d1 3px solid;
  padding: 2% 0;
}
#heros #char-tab{
  position: absolute;
  width: 600px;
  max-width: 95vw;
  height: fit-content;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  gap: 2vw;
}
#char-tabContent, #c1, #c2, #c3, #c4, #c5 {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100vh;
}
.char-tab_btn {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  height: 100%;
  max-width: 95vw;
  pointer-events: none;
  flex-wrap: wrap;
  align-content: flex-end;
  padding: 5% 0;
}

#heros .nav-link{
  width: 100px;
  aspect-ratio: 100/153;
  transform: translateY(-30%);
}
#heros .nav-link:hover,#heros .nav-link.active{
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, .7)) saturate(2) hue-rotate(6deg);
  transform: translateY(-10px);
  transition: transform .3s;
}
#c1-tab{
  background: url(../img/cha/btn_c1.png) no-repeat top center;
  background-size: contain;
}
#c1-tab:hover,#c1-tab.active{
  background: url(../img/cha/btn_c1-hover.png) no-repeat top center;
  background-size: contain;
}
#c2-tab{
  background: url(../img/cha/btn_c2.png) no-repeat top center;
  background-size: contain;
}
#c2-tab:hover,#c2-tab.active{
  background: url(../img/cha/btn_c2-hover.png) no-repeat top center;
  background-size: contain;
}
#c3-tab{
  background: url(../img/cha/btn_c3.png) no-repeat top center;
  background-size: contain;
}
#c3-tab:hover,#c3-tab.active{
  background: url(../img/cha/btn_c3-hover.png) no-repeat top center;
  background-size: contain;
}
#c4-tab{
  background: url(../img/cha/btn_c4.png) no-repeat top center;
  background-size: contain;
}
#c4-tab:hover,#c4-tab.active{
  background: url(../img/cha/btn_c4-hover.png) no-repeat top center;
  background-size: contain;
}
#c5-tab{
  background: url(../img/cha/btn_c5.png) no-repeat top center;
  background-size: contain;
}
#c5-tab:hover,#c5-tab.active{
  background: url(../img/cha/btn_c5-hover.png) no-repeat top center;
  background-size: contain;
}

.char_img{
  z-index: 1;
  max-height: 100%;
  max-width: 150vw;
  animation: fadein_top 1s ease;
  margin-top: 3vh;
}
.char_titlewrapper {
  position: relative;
  width: 100%;
  max-width: fit-content;
  max-height: fit-content;
}
.char_title{
  width: fit-content;
  max-width: 60%;
  animation: popin .25s ease-in;
}
.char_desc{
  font-size: var(--txt_body);
  color: white;
  text-wrap: pretty;
  width: 90%;
  max-width: 700px;
  margin-left: 20px;
}
.char_desc.mobile{
  --txt_body: 18px;
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  /* font-style: italic; */
}
.char_content{
  position: relative;
  z-index: 10;
  pointer-events: none;
  max-height: 100vh;
}

.char_tag{
  height: fit-content;
  gap: 5px;
  margin-bottom: 5%;
  margin-right: 5vw;
}
.char_tag span{
  writing-mode: vertical-lr;
  color: white;
  background: #611813;
  border-radius: 3px;
  padding: 6px 2px;
}
@media screen and (max-width: 1080px) {
  .c2 {
    grid-column: span 2;
  }
}
@media only screen and (max-width: 768px) {
  #heros {
    padding-bottom: 20px;
    aspect-ratio: 780 / 1450;
    max-height: unset;
  }
  #char-tabContent, #c1, #c2, #c3, #c4, #c5 {
    max-height: unset;
  }
  #c1, #c2, #c3, #c4, #c5 {
    align-items: center;
    justify-content: flex-start;
  }
  .c2 {
    grid-column: 1/-1;
  }
  .char_img{
    margin-top: 0;
  }
  .char_titlewrapper {
    align-items: flex-end;
    margin: 0 auto;
  }
  .char_title {
    max-width: 70vw;
  }
  .char_content{
    position: absolute;
    justify-content: flex-end !important;
    padding: 0 2vw;
    height: 100%;
    max-height: unset;
  }
  .char_desc:not(.mobile){
    display: none;
  }
  .char_desc.mobile{
    margin-left: 0;
    --txt_body: 1rem;
    width: 100%;
    padding: 0 10vw;
    text-align: center;
  }
  .char_content::after{
    position: absolute;
    content: '';
    width: 100%;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 869/475;
    background: url(../img/cha/txt_bg.png) center no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: .75;
    mix-blend-mode: multiply;
  }
}

/*---------------------------------------
  reward
-----------------------------------------*/
#reward{
  min-height: unset;
  max-height: fit-content;
  padding-top: 0;
  background: #000;
}
.reward_wrapper{
  position: relative;
  width: 100%;
  padding-bottom: 5%;
}
.reward{
  position: relative;
  width: fit-content;
  max-width: 90vw;
  z-index: 999;
  animation: popout .5s forwards  1s, popping .5s linear infinite alternate 1.5s;
}
.reward_bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 500px;
  max-width: 100vw;
  height: 100%;
  /* aspect-ratio: 192 / 81; */
  background: url(../img/reward_bg.png) top no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 768px) {
  #reward{
    padding-bottom: 10%;
  }
}

.char_phone_wrap {
	position: relative;
	display: inline-block;
}

.char_phone_btn {
  position: absolute;
  left: 7%;
  top: 18%;
  z-index: 999;
  width: 12%;
  aspect-ratio: 1 / 1;
  opacity: 1;
  transition: all .3s ease;
  mix-blend-mode: screen;
}
.char_phone_btn::before, .char_phone_btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  z-index: 999;
}
.char_phone_btn::before {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgb(255, 234, 175) 0%, rgb(248, 203, 126) 35%, rgba(255,190,80,0) 72%);
  filter: blur(4px);
  animation: pointerGlow 1.4s ease-in-out infinite;
}
.char_phone_btn::after {
  width: 130%;
  height: 130%;
  border: 2px solid rgba(255,220,140,1);
  animation: pointerRing 1.6s ease-out infinite;
}
@keyframes pointerGlow {
  0%, 100% {
    opacity: .45;
    transform: translate(-50%, -50%) scale(.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes pointerRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
  }
  25% {
    opacity: .75;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.phone_popup {
	position: fixed;
	left: 50%;
  top: 25px;
	width: min(500px, 90vw);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-12px) scale(.96);
	transition: all .28s ease;
	z-index: 9999;
	pointer-events: none;
}

.phone_popup.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
	pointer-events: auto;
}

.phone_popup_inner {
  position: relative;
  background: linear-gradient(to top, rgba(255, 255, 255, .35), rgb(255 255 255 / 85%));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.phone_popup_close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 28px;
	height: 28px;
	color: #333;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.phone_chat {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.phone_chat::after {
	content: "now";
  text-align: end;
  font-size: 9px;
  opacity: .6;
} 

.phone_icon{
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background: url(../img/icon.png) center no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  .char_phone_btn {   
    top: 25%;
  }
}

/*---------------------------------------
   Download
-----------------------------------------*/
#download_popup{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, .5);
  color: white;
}

#download_popup.hide{
  display: none;
}

.download_wrapper{
  position: relative;
  max-width:  90vw;
  height: fit-content;
  background: url(../img/countdown_bg.png) center no-repeat;
  background-size: 100% 100%;
  color: var(--highlight);
  padding: 25px;
  width: fit-content;
  animation: fadein_top 1s ease;
}

.download_wrapper::before, .download_wrapper::after{
  content: '';
  position: absolute;
  height: 125%;
  aspect-ratio: 23 / 191;
  background: url(../img/countdown_side.png) center no-repeat;
  background-size: contain;
}
.download_wrapper::before{
  transform: scaleX(-1);
  left: 98%;
}
.download_wrapper::after{
  right: 98%;
}

/*---------------------------------------
   Countdown Timer
-----------------------------------------*/
#countdown {
  position: relative;
  gap: 1.15vw;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
}
.countdown_note{
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  text-align: center;
  text-wrap: nowrap;
}
.countdown_time{
  --time: clamp(2.5vw, 3.5vw, 80px);
  position: relative;
  width: 5vw;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1%;
  border-radius: 10%;
  color: var(--black);
}
.countdown_time:not(:last-child)::after{
  content: ":";
  position: absolute;
  left: 100%;
  top: -25%;
  font-size: var(--time);
}

.countdown_time *{
  text-align: center;
  color: var(--black);
  font-family: var(--font2);
}
.countdown_time h1{
  font-size: var(--time);
  line-height: var(--time);
}
.countdown_time span{
  font-size: .65vw;
  text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
  #countdown{
    gap: 3vw;
  }
  .countdown_tlt{
    font-size: 12px;
  }
  .countdown_time{
    --time:  clamp(30px, 10vw, 80px);
    width: 15vw;
  }
  .countdown_time span{
    font-size: 2vw;
    text-transform: uppercase;
  }
}