@font-face {
  font-family: "CN Font";
  src: url("../font/cnfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light only;
  --black: #000000;
  --grey: #707070;
  --white: #ecf8ff;
  --active: #cc9d6a;
  --highlight: #604a36;
  --font: "Noto Sans SC", sans-serif;
  --font2: "Noto Serif SC", serif;
  --tltfont: "CN Font", sans-serif;

  --bdr_s: 5px;
  --navheight: 70px;
  --txt_l: 24px;
  --txt_body: 16px;
}

@media only screen and (max-width: 768px) {
  :root {
    --navheight: 65px;
    --txt_l: 20px;
    --txt_body: 14px;
  } 
}
/*---------------------------------------
   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);}
}
@keyframes float{
  0% {transform: translateY(0);}
  100% {transform: translateY(-5px);}
}


/*---------------------------------------
   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;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  background: #0e0e0e;
  overflow-x: hidden;
}
/* body.no-scroll {
  overflow: hidden;
} */

.maincontainer{
  width: 100%;
  max-width: 1400px;
}

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

b {
  font-size: var(--txt_body);
  line-height: calc(var(--txt_body) + 6px);
}

ol{
  padding-left: 18px;
}

hr{
  width: 100%;
}

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

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

input:not(.checkbox) {
  font-size: var(--txt_body);
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--bdr_s);
  border: 1px solid rgba(243, 196, 107, .2);
  background: white;
  outline: none;
}

.logo{
  height: 80px;
  max-width: 16vw;
  aspect-ratio: 247 / 97;
  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: unset;
    max-height: 45px;
    z-index: 9999;
  }
}

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

/*---------------------------------------
   Font
-----------------------------------------*/
h2{
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--txt_l);
  color: #fbf7e8;
}
.note{
  color: var(--highlight);
  font-weight: 500;
}

.txt_end{
  text-align: end;
}
.txt_smtlt{
  font-size: calc(var(--txt_body) + 2px);
  font-weight: 600;
}
.title{
  width: fit-content;
  max-width: 90vw;
  height: fit-content;
  margin: 0;
}

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

label{
  font-size: 14px;
  margin-bottom: 5px;
}
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;
}

.txt_date{
  position: relative;
  font-weight: 800 !important;
  color: #425e72 !important;
}

.txt_date::before, .txt_date::after{
  content: "";
  position: absolute;
  width: 15px;
  aspect-ratio: 1/1;
  background: url(../img/deco.png) center no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.txt_date::before{
  left: 105%;
}
.txt_date::after{
  right: 105%;
}

/*---------------------------------------
   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; 
} */

/*---------------------------------------
   NAVBAR
-----------------------------------------*/
.navigation{
  position: relative;
  padding: .75vw 2%;
  top: 0;
  position: fixed;
  z-index: 9999;
  max-width: 1920px;
  justify-self: center;
  color: var(--black);
  transition: color .35s;
}

.navigation.scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/kv/shade.png) bottom center no-repeat;
  background-size: 100% 100%;
  transform: scaleY(-1);
  z-index: -1;
  top: -1px;
}

.nav_wrapper{
  position: absolute;
  width: 100%;
  left: 50%;
  gap: 2.5vw;
  transform: translateX(-50%);
  padding-top: 15px;
}
.nav_link{
  font-family: var(--font2);
  color: var(--white);
  font-size: .75vw;
  font-weight: 600;
  text-indent: 12px;
  letter-spacing: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  gap: 0;
}
.nav_link span{
  font-size: .85vw;
  text-transform: uppercase;
  margin-top: -5px;
}
.nav_link:hover, .nav_link.active{
  color: var(--active);
}

@media only screen and (max-width: 768px) {
  .navigation{
    padding: 2vw 2%;
  }
  /* .navigation.scrolled{
    background: linear-gradient(to bottom, black , transparent);
  } */
  .nav_wrapper{
    display: none;
  }
}

/*---------------------------------------
  MODAL
-----------------------------------------*/
body.modal_open {
	overflow: hidden;
}

.site_modal {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 100000;
}

.site_modal.is_open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.site_modal_backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at center,
			rgba(34, 52, 60, 0.2),
			rgba(3, 8, 11, 0.9)
		);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}

.site_modal_dialog {
	position: relative;
	width: min(880px, 92vw);
	max-height: min(820px, 90vh);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding:
		clamp(40px, 5vw, 58px)
		clamp(22px, 5vw, 60px)
		clamp(26px, 4vw, 44px);
	background:
		url(../img/reward/scroll_bg.png)
		center / 100% 100%
		no-repeat;
	filter:
		drop-shadow(0 20px 30px rgba(0, 0, 0, 0.42))
		drop-shadow(0 2px 8px rgba(101, 131, 145, 0.3));
	transform: translateY(28px) scale(0.96);
	opacity: 0;
	overflow: hidden;
	z-index: 1;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.3s ease;
}

.site_modal.is_open .site_modal_dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.site_modal_dialog::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 220px;
	max-width: 28%;
	aspect-ratio: 251 / 189;
	background:
		url(../img/reward/scroll_deco.png)
		right bottom / contain
		no-repeat;
	opacity: 0.72;
	pointer-events: none;
}

.site_modal_close {
	position: absolute;
	top: 6%;
  right: 3%;
	z-index: 10;
}

.site_modal_header {
	position: relative;
	width: 100%;
	padding-bottom: 22px;
	text-align: center;
	z-index: 2;
}

.site_modal_title {
	margin: 0;
	color: #354e5d;
	font-family: var(--font2);
	font-size: clamp(25px, 3.5vw, 40px);
	font-weight: 700;
	line-height: 1.2;
}

.site_modal_description {
	margin: 8px 0 0;
	color: rgba(44, 68, 82, 0.74);
	font-family: var(--font);
  font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
}

.site_modal_body {
	position: relative;
	width: 100%;
	max-height: min(560px, 62vh);
	padding: 20px 6px;
	/* border-top: 1px solid rgba(67, 91, 105, 0.24); */
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 2;
}

.site_modal_body::-webkit-scrollbar {
	width: 4px;
}

.site_modal_body::-webkit-scrollbar-track {
	background: rgba(56, 78, 90, 0.08);
}

.site_modal_body::-webkit-scrollbar-thumb {
	background: rgba(56, 78, 90, 0.46);
	border-radius: 999px;
}

.site_modal_footer {
	position: relative;
	width: 100%;
	padding-top: 18px;
	text-align: center;
	z-index: 2;
}

.site_modal_note {
	margin: 0;
	padding: 0 22px;
	color: rgba(42, 65, 79, 0.7);
	font-size: 12px;
	line-height: 1.55;
	text-align: center;
}

.site_modal_dialog--small {
	width: min(600px, 92vw);
}

.site_modal_dialog--large {
	width: min(1080px, 94vw);
}

.site_modal_dialog--game {
	width: min(1000px, 95vw);
}

@media only screen and (max-width: 768px) {
	.site_modal {
		padding: 14px;
	}

	.site_modal_dialog,
	.site_modal_dialog--small,
	.site_modal_dialog--large,
	.site_modal_dialog--game {
		width: min(620px, 96vw);
		max-height: 92vh;
		padding: 44px 17px 24px;
		background-size: 115% 105%;
	}

	.site_modal_close {
		top: 21px;
		right: 14px;
	}

	.site_modal_body {
		max-height: 68vh;
		padding: 14px 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site_modal,
	.site_modal_dialog {
		transition: none;
	}
}

.popup_wrapper h5{
  font-family: var(--font);
  padding: 5px 15px;
  color: white;
  background: var(--highlight);
}
.popup_wrapper b{
  font-size: calc(var(--txt_body) + 5px);
  line-height: calc(var(--txt_body) + 8px);
  margin-bottom: 5px;
}
.popup_wrapper p, .popup_wrapper b{
  font-family: var(--font);
}

.txt_checkbox{
  font-size: 14px; 
  color: var(--highlight); 
  margin:0;
  font-weight: 500;
}
.txt_checkbox span{
  font-size: 14px; 
  color: var(--highlight); 
  cursor: pointer;
}
.txt_checkbox span:hover{
  color: var(--active); 
}

.tab_regis{
  width: 100%;
  position: relative;
  height: fit-content;
  padding-bottom: 10px;
  color: var(--black);
  font-weight: 600;
  font-size: var(--txt_l);
}

.tab_regis:hover, .tab_regis.active{
  color: var(--highlight);
}
.tab_regis.active::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: 25px;
  height: 2px;
  background: var(--highlight);
  pointer-events: none;
}
.g-recaptcha {
  transform: scale(0.7);
  transform-origin: center;
}
#preregisModal .g-recaptcha {
  transform-origin: left center;
}
.reward_wrapper{
  width: 100px;
  gap: 5px;
}
.reward_wrapper p, #eraReward p{
  font-size: 12px;
  line-height: 12px;
  text-align: center;
}

.regisBtn_wrapper{
  padding-bottom: 15px;
}

@media only screen and (max-width: 768px) {
  .regisBtn_wrapper{
    flex-direction: column;
  }
  .g-recaptcha {
    transform-origin: center !important;
  } 
}

/* 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%;
  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_info {
  position: fixed;
  top: -8%;
  right: 1%;
  width: 194px;
  max-width: 15vw;
  aspect-ratio: 194 / 275;
  background: url(../img/button/btn_info.png) center no-repeat;
  background-size: contain;
  z-index: 999;
  animation: 
    fadein_bottom .5s backwards, 
    popping 1s infinite alternate .5s;
}

.btn_info:hover{
  filter: drop-shadow(0 0 6px #80a8be) brightness(1.2);
  transition: filter .35s;
}

.btn_home, .btn_fb, .btn_lang{
  width: 35px;
  height: 35px;
  min-width: 25px;
  max-width: 3vw;
  aspect-ratio: 1/1;
  background: url(../img/button/btn_close.png) center no-repeat;
  background-size: contain;
}
.btn_home{
  background: url(../img/button/btn_home.png) center no-repeat;
  background-size: contain;
}
.btn_fb{
  background: url(../img/button/btn_fb.png) center no-repeat;
  background-size: contain;
}
.btn_lang{
  background: url(../img/button/btn_lang.png) center no-repeat;
  background-size: contain;
}

.btn_close{
  width: 25px;
  height: 25px;
  aspect-ratio: 1/1;
  background: url(../img/button/btn_close.png) center no-repeat;
  background-size: contain;
  filter: invert(1);
}
.btn_close:hover{
  transform: rotate(180deg);
  transition: transform .35s;
}


.btn_gameModal::after ,.btn_invFriend::after, .historyItem::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .5), transparent);
  translate: -120% 0;
  animation: shine 6s infinite;
  pointer-events: none;
}

@keyframes shine{
  0%, 45% {translate: -120% 0;}
  65%, 100% {translate: 120% 0;}
}
@keyframes popping{
  0% {transform: scale(1)}
  100% { transform: scale(.93)}
}
@keyframes poppingcenter{
  0% {transform: translate(-50%, -50%) scale(1)}
  100% { transform: translate(-50%, -50%) scale(.98)}
}

.btn_rule{
  position: fixed;
  right: 0;
  top: 20%;
  z-index: 99;
  width: 53px;
  max-width: 2.8vw;
  aspect-ratio: 53 / 161;
  background: url(../img/button/btn_rule.png) no-repeat;
  background-size: contain;
}

.btn_otp{
  background: var(--black);
  color: white;
  white-space: nowrap;
  height:  48px;
  padding: 10px 20px;
  border-radius: var(--bdr_s);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn_otp:hover{
  background: var(--active);
  color: black;
}

@media only screen and (max-width: 768px) {
  .btn_info {
    max-width: 35vw;
    right: 0;
  }
  .btn_dl{
    max-width: 28vw;
  }
  .btn_rule{
    max-width: 8vw;
  }
}
/*---------------------------------------
   KV
-----------------------------------------*/
#KV{
  position: relative;
  width: 100vw;
  max-width: 1920px;
  aspect-ratio:  1920/1000;
  background: url(../img/bg_kv.jpg) bottom center no-repeat;
  background-size: cover;
  justify-self: center;
}

/* #KV::before{
  content: "";
  position: absolute;
  width: 1920px;
  max-width: 100vw;
  aspect-ratio: 1920/150;
  background: url(../img/kv/stroke.png) bottom left no-repeat;
  background-size: 100% 100%;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
} */

.bgvideo{
  max-width: 100vw;
  position: absolute;
  /* top: -30px; */
}
.btn_wrapper{
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
  transition:  unset;
  padding-bottom: 6.5%;
  z-index:50;
}

.btn_cta, .btn_dl, .btn_register{
  width: 350px;
  max-width: 19vw;
  aspect-ratio: 427/108;
  background: url(../img/kv/btn_cta.png) center no-repeat;
  background-size: contain;
  transition: opacity .3s;
  animation: popping .75s infinite alternate;
}
.btn_dl{
  background: url(../img/kv/btn_dl.png) center no-repeat;
  background-size: contain;
}
.btn_register{
  width: 250px;
  max-width: 70vw;
  aspect-ratio: 427/108;
  background: url(../img/button/btn_register.png) center no-repeat;
  background-size: contain;
}
.btn_cta:hover, .btn_dl:hover, .btn_register:hover{
  filter: brightness(1.2);
}

@media only screen and (max-width: 768px) {
  #KV{
    aspect-ratio: 780 / 1450;
    background: url(../img/bg_kv_m.jpg) bottom center no-repeat;
    background-size: cover;
  }
  #KV::before{
    max-width: unset;
  }
  .bgvideo{
    display: none;
  }
  .btn_wrapper{
    flex-direction: column;
    align-items: center;
    justify-content: flex-end !important;
    padding-bottom: 25%;
    gap: 2px;
  }
  .btn_cta, .btn_dl{
    width: 70vw;
    max-width: 70vw;
  }
}

/*---------------------------------------
   Section
-----------------------------------------*/
.bg_white{
  position: relative;
  width: 100vw;
  background: url(../img/bg.jpg) top center no-repeat;
  justify-self: center;
  overflow: visible;
}

.bg_white::before{
  content: "";
  position: absolute;
  width: 1920px;
  max-width: 100vw;
  aspect-ratio: 1920/150;
  background: url(../img/kv/stroke.png) bottom left no-repeat;
  background-size: 100% 100%;
  bottom: calc(100% - 1px);
  left: 0;
  pointer-events: none;
}

.bg_dark{
  position: relative;
  width: 100vw;
  background: url(../img/bg_dark.jpg) top center no-repeat;
  justify-self: center;
  overflow: visible;
}
.bg_dark::before{
  content: "";
  position: absolute;
  width: 1920px;
  max-width: 100vw;
  aspect-ratio: 1920/150;
  background: url(../img/kv/stroke_dark.png) bottom left no-repeat;
  background-size: 100% 100%;
  bottom: calc(100% - 1px);
  left: 0;
  pointer-events: none;
}

.bg_white p{
  color: var(--black);
  font-family: var(--font2);
  font-weight: 500;
  font-size: 15px;
}
.rsp_mobile{
  max-width: 1920px;
  /* aspect-ratio:  1920/910; */
  height: fit-content;
  padding: 50px 0;
}
@media only screen and (max-width: 768px) {
  .rsp_mobile{
    max-width: 100vw;
    height: fit-content;
    aspect-ratio:  unset;
  }
}

/*---------------------------------------
   Tlt
-----------------------------------------*/
.tlt_wrapper{
  width:min(1400px, 75vw);
  z-index: 90;
}
@media only screen and (max-width: 768px) {
  .tlt_wrapper{
    width: 90vw;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .tlt_wrapper p{
    text-align: center;
  }
}

/*---------------------------------------
   User
-----------------------------------------*/
.user_wrapper, .user_wrapper p, .user_wrapper span {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 12px;
  margin: 0;
  color: var(--black);
  text-wrap: nowrap;
}
.user_wrapper{
  position: absolute;
  left: 0;
  top: 50px;
  max-width: 95vw;
  background: rgba(128, 128, 128, .35);
  padding: 10px 20px;
  padding-bottom: 12px;
  border-radius: 999px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  align-self: flex-start;
  z-index: 99;
}
.user_wrapper .user_email, .user_wrapper a{
  display: none;
}

.user_info{
  position: relative;
}
.user_wrapper.login .user_info::after{
  content: "|";
}

.user_wrapper a:hover{
  color: var(--active);
}

.user_wrapper.login .user_email, .user_wrapper.login a{
  display: unset;
}
.user_wrapper.login .user_status{
  display: none;
}


@media only screen and (max-width: 768px) {
  .user_wrapper{
    position: unset;
  }
  .user_wrapper, .user_wrapper p, .user_wrapper span{
    font-size: 14px; 
    line-height: 14px;
  }
}


.prereg_section {
  min-height: 100vh;
  padding-top: 15px;
  padding-bottom: 150px;
}

.campaign_btn {
	min-width: 180px;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--font2);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	transition:
		transform 0.25s ease,
		filter 0.25s ease,
		background-color 0.25s ease;
}

.campaign_btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

.campaign_btn_primary {
	color: #fff;
	background:
		linear-gradient(180deg, #b88a57 0%, #755035 100%);
	border-color: rgba(255, 244, 213, 0.75);
	box-shadow:
		0 8px 24px rgba(64, 38, 20, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.campaign_btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	filter: grayscale(0.4);
	transform: none;
}
.section_note {
	color: #766452 !important;
	font-size: 13px !important;
	text-align: center;
}

/*---------------------------------------
   Milestone
-----------------------------------------*/
.milestone_panel.hidden {
  position: relative;
  width: 0;
  max-width: 95vw;
  max-height: 550px;
  min-height: 30vw;
	margin: 15px auto;
  aspect-ratio: 1377/609;
  overflow: visible;
  align-self: flex-start;
  justify-self: flex-start;
}
.milestone_panel.show {
  width: 1350px;
  padding: clamp(22px, 5vw, 50px);
  padding-right: 25%;
}
.milestone_panel.hidden .panel_heading,
.milestone_panel.hidden .milestone_progress,
.milestone_panel.hidden .milestone_grid{
  opacity: 0;
}
.milestone_panel.show .panel_heading,
.milestone_panel.show .milestone_progress,
.milestone_panel.show .milestone_grid{
  animation: fadein 1s forwards .5s;
}
.milestone_panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	background: url(../img/reward/scroll_bg.png) center no-repeat;
  background-size: 100% 100%;
}
.milestone_panel::after{
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 105%;
  aspect-ratio: 38/647;
  background: url(../img/reward/scroll_side.png) center no-repeat;
  background-size: contain;
  pointer-events: none;
}

.milestone_panel .char.hidden{
  left: 50%;
  bottom: 0;
  position: absolute;
  width: 875px;
  max-width: 65vw;
  max-height: 110%;
  height: 674px;
  aspect-ratio: 875/674;
  background: url(../img/reward/char.png) bottom center no-repeat;
  background-size: contain;
  z-index: 0;
  transition: unset;
}

.milestone_panel .char.show{
  animation: fadein_top 1s backwards .5s;
}
.panel_eyebrow {
	margin-bottom: 6px !important;
	color: #9a6f42 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.panel_title, .reservation_total strong{
	color: #493527;
	font-family: var(--font2);
	font-size: clamp(22px, 2.5vw, 34px);
	font-weight: 700;
  line-height: 1;
}
.reservation_total strong{
	font-size: clamp(27px, 3vw, 50px);
  line-height: .8;
}

.reservation_total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	color: #574433;
}

.milestone_progress,
.cultivation_progress {
	position: relative;
	width: 100%;
	height: 9px;
	background: rgba(75, 59, 43, 0.18);
  border-radius: 6px;
	border: 1px solid rgba(87, 64, 42, 0.24);
	overflow: hidden;
}

.milestone_progress_fill,
.cultivation_progress_fill {
	height: 100%;
	background:
		linear-gradient(
			90deg,
			#8c633f,
			#deb77d,
			#f4d9a5
		);
	box-shadow: 0 0 16px rgba(219, 172, 100, 0.55);
	transition: width 0.8s ease;
}

.milestone_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
  z-index: 10;
}

.milestone_card {
  position: relative;
  display: flex;
  width: 295px;
  max-width: 100%;
  aspect-ratio: 295 / 317;
  padding: 12% 14px 21%;
  background: url(../img/reward/rewardbg.png) no-repeat;
  background-size: contain;
  text-align: center;
  filter: grayscale(0.85);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

}

.milestone_card.done {
	filter: none;
}

.milestone_reward{
  height: fit-content;
	height: 70%;
}
.milestone_reward img{
	position: relative;
	width: 200px;
	height: 100%;
	max-width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
  object-fit: contain;
}
.milestone_card::after {	
	content: "90天时装:万紫千红•龙影 x1 + 90天坐骑:幽澜夜潜 x1";
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 5px 15px;
	color: #fff4df;
	background: rgb(0, 0, 0);
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
	z-index: 4;
	pointer-events: none;
}
.milestone_card.r2::after {
	content: "紫金游龙卡・30天";
}
.milestone_card.r3::after {
	content: "梦满江湖礼包";
}
.milestone_card:has(.milestone_reward:hover)::after {
	opacity: 1;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.milestone_reward:hover::before,
.milestone_reward:focus-visible::before {
	filter:
		brightness(1.15)
		drop-shadow(0 0 10px rgba(226, 190, 126, 0.48));
}

.milestone_card strong {
	display: block;
	margin-bottom: 4px;
	color: #ffffff;
	font-family: var(--font2);
  font-size: clamp(12px, 2vw, 24px);
  opacity: .5;
}
.milestone_card.done strong {
  opacity: 1;
}

.milestone_card p {
	margin: 0;
	color: #fff2e5;
  font-size: clamp(9px, 1vw, 12px);
}

@media only screen and (max-width: 768px) {
  .prereg_section {
    padding-top: 15px;
    padding-bottom: 50px;
  }

	.panel_heading {
		flex-direction: column;
		align-items: flex-start !important;
    padding: 0;
	}
  .reservation_total {
    width: 100%;
    align-items: center;
    border-top: 1px solid rgba(96, 74, 54,.5);
    padding-top: 10px;
    margin-top: 10px;
  }
  .reservation_total strong {
    font-size: clamp(34px, 3vw, 50px);
    line-height: .8;
  }
  .milestone_panel::before {
    background: url(../img/reward/scroll_bg.png) no-repeat;
    background-position: center ;
    background-size: 110% 110%;
    border: 3px solid #556670;
  }
  .milestone_panel::after{
    all: unset;
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 251px;
    max-width: 30vw;
    aspect-ratio: 251/189;
    background: url(../img/reward/scroll_deco.png) center right no-repeat;
    background-size: contain;
    z-index: 99;
  }
  .milestone_panel.hidden{
    aspect-ratio: unset;
    max-height: fit-content;
  }
  .milestone_panel .char.hidden{
    display: none;
  }
  .milestone_panel.show {
    padding-right: unset;
    padding: clamp(22px, 5vw, 50px);
  }

  .milestone_grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .milestone_card{
    min-width: 140px;
    width: 45%;
    max-width: 295px;
    padding: 5% 14px 7%;
  }
  .milestone_card strong{
    /* font-size: clamp(22px, 2vw, 24px); */
    font-size: clamp(15px, 4vw, 24px);
  }
  .milestone_card p {
    font-size: clamp(6px, 4vw, 12px);
  }
}
@media only screen and (max-width: 500px) {
  .milestone_card{
    padding: 4% 14px 12%;
  }
  .milestone_card p {
    display: none;
  }
  .milestone_reward {
    height: 80%;
  }
}
@media only screen and (max-width: 350px) {
  .milestone_grid{
    gap: 0 10px;
  }
  .milestone_card{
    width: 48%;
    min-width: 120px;
    padding: 3% 0 10%;
  }
}

/*---------------------------------------
   Code Modal
-----------------------------------------*/

.code_form {
	width: min(560px, 100%);
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.code_form_label {
	margin-bottom: 8px;
	color: #354e5d;
	font-family: var(--font2);
	font-size: 15px;
	font-weight: 700;
}

.code_input_group {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.code_feedback {
	min-height: 24px;
	margin: 10px 0 0;
	color: #536876;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.code_feedback.is_success {
	color: #416a47;
}

.code_feedback.is_error {
	color: #9b3e39;
}

.code_help {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(53, 78, 93, 0.18);
	background: rgba(255, 255, 255, 0.25);
	text-align: center;
}

.code_help p {
	margin: 0;
	color: rgba(45, 67, 80, 0.76);
	line-height: 1.6;
  font-weight: 500;
  font-size: 14px;
}

.code_facebook_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 18px;
  border: 1px solid rgb(53, 78, 93);
  border-radius: 6px;
  color: #354e5d;
  background: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.code_facebook_link:hover {
	color: #fff;
	background: #354e5d;
}

@media only screen and (max-width: 560px) {
	.code_input_group {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.code_input {
		border-right: 1px solid rgba(53, 78, 93, 0.35) !important;
		border-radius: 4px !important;
	}

	.code_submit_button {
		width: 100%;
		border-radius: 4px;
	}
}

/*---------------------------------------
   Cultivation Completion Reward
-----------------------------------------*/
/* .cultivation_reward_action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 15px 18px;
	border: 1px solid rgba(218, 187, 120, 0.42);
	background: rgba(218, 187, 120, 0.08);
} */

.cultivation_reward_action  {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-height: 100%;
  width: 600px;
  max-width: 75vw;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.cultivation_reward_action[hidden] {
	display: none;
}

.cultivation_reward_unlocked {
  display: none;
	flex: 1;
	min-width: 220px;
	margin: 0 !important;
	color: #e8cf94;
	font-family: monospace;
	font-size: 15px;
	font-weight: 700;
  text-align: center;
  animation: float 1s infinite alternate;
}

.breakthrough_reward {
	width: min(540px, 100%);
	margin: 0 auto;
	text-align: center;
  color: #354e5d;
}

#cultivationRewardEligibilityText{
  font-weight: 600;
}

.breakthrough_reward_label {
	margin: 0 0 10px;
	color: #365163;
	font-family: var(--font2);
	font-size: 15px;
	font-weight: 700;
}

.breakthrough_code_box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.breakthrough_code {
	min-width: 0;
	height: 48px;
	display: flex;
	align-items: center;
	padding: 10px 15px;
	border: 1px solid rgba(53, 78, 93, 0.35);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	color: #294759;
	background: rgba(255, 255, 255, 0.72);
	font-family: monospace;
	font-size: clamp(14px, 3vw, 19px);
	font-weight: 700;
	letter-spacing: 1px;
	overflow-wrap: anywhere;
	text-align: left;

	/*
	 * 不允许用户在奖励码文字上拖动选择。
	 * 复制操作统一通过右侧复制按钮完成。
	 */
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}


.breakthrough_feedback {
	min-height: 22px;
	margin: 9px 0 0;
	color: #416a47;
	font-size: 13px;
	font-weight: 600;
}

.breakthrough_reward_note {
	margin: 16px 0 0;
	color: rgba(42, 65, 79, 0.7);
	font-size: 12px;
	line-height: 1.6;
}

@media only screen and (max-width: 560px) {
	.cultivation_reward_button {
		width: 100%;
	}

	.breakthrough_code_box {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.breakthrough_code {
		border-right: 1px solid rgba(53, 78, 93, 0.35);
		border-radius: 4px;
		justify-content: center;
		text-align: center;
	}

	.breakthrough_copy_button {
		width: 100%;
		min-height: 44px;
		border-radius: 4px;
	}
}

/*---------------------------------------
   Reward Modal
-----------------------------------------*/
.reward_modal_content {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(180px, 100%), 1fr)
	);
	gap: 16px;
}

.reward_modal_item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
}

.reward_modal_item_image {
	width: fit-content;
	max-width: 100%;
  max-height: fit-content;
	/* aspect-ratio: 1 / 1; */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 9px;
}

.reward_modal_item_image img {
	display: block;
  width: 100%;
	max-width: 280px;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 7px 8px rgba(35, 51, 61, 0.22));
}

.reward_modal_item_name {
	margin: 0;
	color: #29485a !important;
	font-family: var(--font2);
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.45;
}

.reward_modal_item_quantity {
	display: block;
	margin-top: 5px;
	color: #85603c;
	font-size: 13px;
	font-weight: 700;
}

@media only screen and (max-width: 768px) {
	.reward_modal_item {
		padding: 12px 7px;
	}

	.reward_modal_item_name {
		font-size: 13px !important;
	}

	.reward_modal_item_quantity {
		font-size: 12px;
	}
}

@media only screen and (max-width: 420px) {
	.reward_modal_content {
		grid-template-columns: 1fr;
	}


	.reward_modal_item_image {
		width: 90%;
		margin: 0;
		grid-row: 1 / span 2;
	}

	.reward_modal_item_name,
	.reward_modal_item_quantity {
		text-align: left;
	}
}

/*---------------------------------------
   Swiper
-----------------------------------------*/
.feature_section {
	margin-top: 25px;
	gap: 36px;
}

.feature_slider_shell {
	position: relative;
	width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 5px 80px;
	box-sizing: border-box;
}

.feature_slider_shell::before,
.feature_slider_shell::after,
.cultivation_task::before,
.cultivation_task::after{
	content: "";
	position: absolute;
	left: 50%;
	width: calc(100% - 110px);
  max-width: 98vw;
	max-height: 20px;
	aspect-ratio: 1260 / 20;
	background: url(../img/feature/border_top.png) center no-repeat;
	background-size: 100% 100%;
	transform: translateX(-50%);
	z-index: 10;
	pointer-events: none;
}

.feature_slider_shell::before {
	bottom: 0;
}

.feature_slider_shell::after {
	top: 0;
}

.featureSwiper {
	position: relative;
	width: 100%;
	overflow: hidden;
  border: 3px solid #e7c083;
}

.featureSwiper::before {
	content: "";
	position: absolute;
	right: 15px;
	bottom: 0;
	width: 158px;
	max-width: 16%;
	max-height: 78px;
	aspect-ratio: 158 / 78;
	background: url(../img/feature/deco.png) bottom center no-repeat;
	background-size: contain;
	z-index: 10;
	pointer-events: none;
}

.featureSwiper .swiper-wrapper {
	align-items: stretch;
}

.featureSwiper .swiper-slide {
	width: 100%;
	height: auto;
	opacity: 1;
	transform: none;
}

.featureSwiper .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.featureSwiper .swiper-pagination {
	bottom: 25px;
}

.featureSwiper .swiper-pagination-bullet {
	width: 6px;
	height: 3px;
	margin: 0 3px !important;
	border-radius: 90px;
	background: #ecc6a6;
	opacity: 0.35;
	transition:
		width 0.25s ease,
		opacity 0.25s ease;
}

.featureSwiper .swiper-pagination-bullet-active {
	width: 48px;
	opacity: 1;
}

.feature_arrow {
	position: absolute;
	top: 50%;
	width: 70px;
	aspect-ratio: 1 / 1;
	transform: translateY(-50%);
	background: url(../img/btn_next.png) center no-repeat;
	background-size: contain;
	z-index: 20;
	transition:
		filter 0.25s ease,
		transform 0.25s ease;
}

.feature_prev {
	left: 0;
	transform: translateY(-50%) scaleX(-1);
}

.feature_next {
	right: 0;
}

.feature_next:hover {
	filter: brightness(1.2);
	transform: translateY(-50%) scale(0.9);
}

.feature_prev:hover {
	filter: brightness(1.2);
	transform: translateY(-50%) scale(-0.9, 0.9);
}

.feature_arrow.swiper-button-disabled {
	cursor: default;
	opacity: 0.3;
}

@media only screen and (max-width: 768px) {
	.feature_slider_shell {
		width: 100%;
		padding: 0;
	}

	.featureSwiper {
		width: 92vw;
	}
  .feature_slider_shell::before,
  .feature_slider_shell::after {
    width: 95vw;
  }
	.feature_arrow {
		display: none;
	}
}

/*---------------------------------------
   Cultivation
-----------------------------------------*/
.cultivation_section {
	color: #eef3f1;
}
.cultivation_subtitle {
	margin-top: 10px !important;
	color: rgba(239, 244, 241, 0.72);
	font-family: var(--font2);
	letter-spacing: 2px;
	text-align: center;
}
.cultivation_subtitle img{
  max-width: 10vw;
}

.cultivation_panel {
	width: min(1400px, 92vw);
	margin: 0 auto;
	padding: clamp(22px, 3.5vw, 46px);
  overflow: visible;
}

.cultivation_overview {
	align-items: center;
}
.cultivation_info{
  z-index: 1;
}

.cultivation_art {
  height: fit-content;
	position: relative;
  overflow: visible;
}
.charbg {
	position: absolute;
	top: 50%;
	left: 50%;
  width: min(480px, 75vw);
	max-width: 100vw;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

@keyframes rotatecenter{
  0% {transform: translate(-50%, -50%) rotate(0)}
  100% { transform: translate(-50%, -50%) rotate(360deg)}
}

.charbg::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 116%;
  aspect-ratio: 1/1;
  background: url(../img/game/charbg_deco.png) center no-repeat;
  background-size: contain;
  animation: rotatecenter 9s infinite linear;
  pointer-events: none;
}

/* mask */
.charbg-progress {
  --progress: 0%;
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  -webkit-mask-image: url("../img/game/charbg.png");
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("../img/game/charbg.png");
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.charbg-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--progress);
  overflow: hidden;
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  
  mask-image: linear-gradient(to top, black 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 98%, transparent 100%);
}

.charbg-fill::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgb(75, 213, 255), rgba(255, 255, 255) , rgb(75, 213, 255), rgba(0, 0, 0, 0) 70%);
  filter: blur(3px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
  animation: glowshine 3s infinite linear;
  z-index: 5;
}

.is_complete .charbg-fill {
  mask-image: unset !important;
}


@keyframes glowshine {
	0% {transform: translateY(150%);}
	100% {transform: translateY(-150%);}
}

.charbg-fill-inner {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: url("../img/game/charbg.png") center bottom no-repeat;
	background-size: contain;
}

.charbg-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255), rgb(75, 213, 255), rgba(0, 0, 0, 0) 30%);
  filter: blur(3px);
  pointer-events: none;
  mix-blend-mode: screen;
}

.charbg-texture {
  position: absolute;
  inset: 0;
  background: url("../img/game/charbg.png") center no-repeat;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
}
/* mask */

.cultivation_art.lvl2::after, .cultivation_art.lvl3::after  {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  max-width: 150%;
  aspect-ratio: 1 / 1;
  background: url(../img/game/vfx.gif) center no-repeat;
  background-size: 120% 100%;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: .75;
  pointer-events: none;
}
.cultivation_char{
  max-width: 100%;
  max-height: 100%;
  width: 450px;
  aspect-ratio: 504/444;
  height: fit-content;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)) drop-shadow(0 0 12px rgba(255, 255, 255, .5));
  pointer-events: none;
  background: url(../img/game/char_lvl1.gif) center no-repeat;
  background-size: contain;
}
.cultivation_art.lvl2 .cultivation_char{
  width: 450px;
  aspect-ratio: 510/446;
  background: url(../img/game/char_lvl2.gif) center no-repeat;
  background-size: contain;
}
.cultivation_art.lvl3 .cultivation_char{
  width: 550px;
  aspect-ratio: 550/408;
  background: url(../img/game/char_lvl3.gif) center no-repeat;
  background-size: contain;
}

/*---------------------------------------
   Cultivation Character Speech
-----------------------------------------*/
@keyframes floatcenter{
  0% {transform: translateX(-50%) translateY(0);}
  100% {transform: translateX(-50%) translateY(-5px);}
}

.cultivation_speech {
	position: absolute;
	bottom: 45%;
	left: 50%;
	width: max-content;
	max-width: min(300px, 70vw);
  height: fit-content;
	padding: 13px 20px;
	border: 1px solid rgba(229, 199, 139, 0.72);
	border-radius: 14px;
	color: #263d4b;
	background:
		linear-gradient(
			180deg,
			rgba(255, 253, 242, 0.96),
			rgba(220, 235, 235, 0.94)
		);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), inset 0 0 12px rgba(255, 255, 255, 0.68);
	filter: drop-shadow(0 0 8px rgba(113, 202, 232, 0.2));
	/* visibility: hidden; */
	opacity: 1;
	pointer-events: none;
	z-index: 5;
	transition:
		opacity 0.28s ease,
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0.28s ease;
  animation: floatcenter 1s infinite alternate;
}

.cultivation_speech::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(229, 199, 139, 0.72);
  border-bottom: 1px solid rgba(229, 199, 139, 0.72);
  background: rgba(220, 235, 235, 0.96);
  transform: translateX(-50%) translateY(-9px) rotate(45deg);
}

.cultivation_speech p {
	position: relative;
	margin: 0;
	color: #284557;
	font-family: var(--font2);
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: 700;
	line-height: 1.5;
	white-space: wrap;
	z-index: 1;
  text-align: center;
}

.cultivation_speech.is_visible {
	visibility: visible;
	opacity: 1;
	transform:
    translateX(-50%)
		translateY(0)
		scale(1);
}

.cultivation_speech.is_complete {
	border-color: rgba(255, 218, 128, 0.92);
	background:
		linear-gradient(
			180deg,
			rgba(255, 249, 218, 0.98),
			rgba(228, 194, 117, 0.96)
		);
	box-shadow:
		0 8px 26px rgba(0, 0, 0, 0.28),
		0 0 20px rgba(255, 213, 112, 0.45);
}

.cultivation_speech.is_complete::before {
	border-color: rgba(255, 218, 128, 0.92);
	background: rgba(228, 194, 117, 0.96);
}

.cultivation_speech.is_complete p {
	color: #553a1e;
}

@media only screen and (max-width: 768px) {
	.cultivation_speech {
		max-width: 80vw;
		padding: 10px 15px;
	}

	.cultivation_speech.is_visible {
		transform:
			translate(-15%, 0)
			scale(1);
	}

	.cultivation_speech p {
	  font-size: clamp(10px, 2vw, 14px);
	}

}

@media only screen and (max-width: 480px) {
	.cultivation_speech {
		width: max-content;
		max-width: 86vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cultivation_speech {
		transition: none;
	}
}

.cultivation_art img {
  max-width: 100%;
  max-height: 100%;
  width: fit-content;
  height: fit-content;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)) drop-shadow(0 0 12px rgba(255, 255, 255, .5));
  pointer-events: none;
}

.cultivation_taskwrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-height: 100%;
  width: 600px;
  max-width: 75vw;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.cul_taskbtn, .cultivation_reward_button{
  font-family: var(--font2);
  font-size: clamp(12px, 6vw, 48px);
  line-height: 1.05;
  font-weight: 700;
  position: absolute;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  right: -10%;
  bottom: 0;
  max-width: 30vw;
  color: #f3faff;
  background: url(../img/button/btn_start.png) center no-repeat;
  background-size: contain;
  z-index: 999;
  animation: popping 1s infinite alternate;
}
.cul_taskbtn:hover, .cultivation_reward_button:hover{
  filter: brightness(1.2);
  transform: scale(.98);
  transition: transform .35s;
}

.cultivation_value {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: rgba(237, 246, 241, 0.6);
}

.cultivation_value strong:first-child {
	color: #d9bc7c;
}

.cultivation_value strong {
	font-family: var(--font2);
	font-size: clamp(30px, 4vw, 58px);
	line-height: 1;
}

.cultivation_value span {
	font-size: 20px;
}

.cultivation_progress {
	margin: 22px 0;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(189, 221, 209, 0.18);
}

.cultivation_description {
	color: rgba(235, 243, 239, 0.7);
	line-height: 1.8;
}

.cultivation_description p {
	margin: 7px 0;
}

.cultivation_description strong {
	color: #dabb78;
}

.cultivation_task_grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin-top: 42px;
}

.cultivation_task.hidden {
  position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
  justify-content: center;
	padding: 20px 25px 16px;
	background: rgba(240, 247, 243, 0.06);
  background: url(../img/reward/scroll_bg.png) center no-repeat;
  background-size: cover;
  border: 1px solid #e7c083;
	text-align: center;
	transition:
		transform 0.3s ease,
		background-color 0.3s ease;
}
.cultivation_task.show {
  animation: fadein .5s;
}

.cultivation_task::before, .cultivation_task::after {
  width: 105%;
  height: 10px;
  aspect-ratio: unset;
  top: -2px;
}
.cultivation_task::after {
  top: unset;
  bottom: -2px;
}

.cultivation_task:hover {
	transform: scale(.98);
}

.cultivation_task.done {
	position: relative;
}

.task_done_badge {
	display: none;
	width: 100%;
  min-width: 120px;
	min-height: 40px;
  aspect-ratio: 214/55;
	align-items: center;
	justify-content: center;
	margin: 15px 0 10px;
	padding: 8px 10px;
	color: rgb(241, 229, 206);
	background: rgba(209, 174, 106, 0.12);
  background: url(../img/button/btn_task.png) center no-repeat;
  background-size: contain;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
  filter: saturate(0) !important;
}

.cultivation_task.done .task_done_badge {
	display: flex;
}

.cultivation_task.done .task_icon {
	filter:
		brightness(1.08)
		drop-shadow(0 0 8px rgba(218, 187, 120, 0.45));
}

.cultivation_task.done .task_button {
	display: none;
}

.cultivation_task.done .task_button.openGame {
	display: unset;
}
.task_button:disabled {
	cursor: default;
	pointer-events: none;
	filter: saturate(0) !important;
}

.task_button.is-completed {
	opacity: 0.75;
}

.task_icon {
  display: none;
  width: 100px;
  max-width: 90%;
  aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 13px;
  padding-right: 2px;
	color: #201912;
	font-family: var(--tltfont);
	font-size: 22px;
  background: url(../img/button/btn-hover.png) center no-repeat;
  background-size:  contain;
}

.task_icon img, .cul_taskbtn img{
  width: 50%;
  max-width: 40px;
  aspect-ratio: 1/1;
  filter: invert(0.75) sepia(1) saturate(3) hue-rotate(156deg) brightness(0.5);
  margin-right: -2px;
}

.task_content {
	flex: 1;
}

.task_content h3 {
  margin: 0 0 9px;
  color: #17242f;
  font-family: var(--font2);
  font-weight: 700;
  font-size: clamp(17px, 4vw, 25px);
}

.task_content p {
	margin: 0 0 7px;
  color: #34597a;
	font-size: 14px;
	line-height: 1.15;
  font-weight: 500;
}

.task_content small {
	display: block;
  color: #5e6c79;
	font-size: 12px;
  font-weight: 500;
	line-height: 1.45;
}

.task_button {
	width: 100%;
  min-width: 120px;
	min-height: 40px;
  aspect-ratio: 214/55;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0 10px;
	padding: 8px 10px;
	color: rgb(241, 229, 206);
	background: rgba(209, 174, 106, 0.12);
  background: url(../img/button/btn_task.png) center no-repeat;
  background-size: contain;
	font-size: 13px;
	text-decoration: none;
	transition:
		background 0.25s ease,
		color 0.25s ease;
}

.task_button:hover {
	color: #201912;
  background: url(../img/button/btn_task-hover.png) center no-repeat;
  background-size: contain;
}

/* Responsive */
@media only screen and (max-width: 768px) {
	.cultivation_task_grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.cultivation_task.hidden {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 15px;
  }
	.task_icon {
    width: 75px;
    height: 75px;
		margin: 0;
	}
  .task_content {
    min-width: 150px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }
	.task_content h3 {
		margin-bottom: 4px;
	}

	.task_button, .task_done_badge {
		min-width: 88px;
    max-width: 214px;
		padding: 9px 12px;
    flex-grow: 1;
    margin: 0;
	}

	.game_placeholder_inner {
		padding: 32px 16px;
	}
}

@media only screen and (max-width: 480px) {
	.cultivation_task {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.cultivation_value {
		gap: 5px;
	}

	.cultivation_value strong {
		font-size: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cultivation_task,
	.campaign_btn {
		transition: none;
	}

	.featureSwiper .swiper-slide {
		transition: none;
	}
} 


img,
button,
a,
[role="button"] {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

/* html,
body {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
textarea,
[contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
	touch-action: auto;
}
select {
	touch-action: manipulation;
}
#cultivationCodeInput {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
	caret-color: currentColor;
} */


/*--------------------------------------- CULTIVATION PROGRESS REWARD -----------------------------------------*/

.cultivation_progress {
	position: relative;
	overflow: visible;
}

.cultivation_progress_reward {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: translate(-50%, -50%);
}

.cultivation_progress_reward--60000 {
	left: 46.5116%;
}

.cultivation_progress_reward--100000 {
	left: 77.5194%;
}

.cultivation_progress_reward img {
	display: block;
	width: clamp(60px, 5.2vw, 92px);
	height: auto;
	transition: transform .3s ease, filter .3s ease;
}

.cultivation_progress_reward span {
  display: none;
  position: absolute;
  bottom: 70%;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
  font-family: 'Noto Serif SC';
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgb(255 255 255 / 42%);
  animation: poppingcenter .5s infinite alternate;
  opacity: 0;
}

.cultivation_progress_reward:hover span {
  display: unset;
  opacity: 1;
  transition: opacity .3s;
}

.cultivation_progress_reward.is_unlocked img {
	transform: translateY(-3px) scale(1.05);
}

@media (max-width: 768px) {
	.cultivation_progress_reward img {
		width: 58px;
	}

	.cultivation_progress_reward span {
		font-size: 10px;
	}
}