/* ----------------------------------------------------- Quest ---------------- */
/* ---------------------------- Quest Info ---- */
/* quest template 0 */
.qt_center_right_block {
	height: 60vh;
	width: 60vh;
	aspect-ratio: 1/1;
	border-radius: 7vh;
	display: flex;
	border:solid 1vh rgba(44, 133, 160, 0.973);
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	transition: all 0.1s ease-in-out;
	position: relative;
	top: 1vh;
	font-weight: bold;
	background-color: rgb(27, 27, 27);
	font-family: 'Teko', sans-serif;
}
.qt_all_of_left_side {
	height: 100%;
	width: 65%;
	border: solid;
	border-color: transparent;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.qt_all_of_title_and_description {
	height: 65%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.qt_title {
	height: 30%;
	width: 90%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	align-items: flex-end;
	font-size: 5vh;
	color: rgb(155, 154, 152);
}
.qt_description {
	height: 70%;
	width: 80%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	font-size: 2vh;
	text-align: left;
	color: rgb(155, 154, 152);
	position: relative;
	left: 1vh;
}
.qt_all_of_ressources_to_obtain_1_and_2 {
	height: 35%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	contain: content;
}
.qt_all_of_ressources_to_obtain_1 {
	height: 100%;
	max-width: 23%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1;
	font-size: 1vh;
	margin: 0.3vh;
	font-size: 1.5vh;
}
.qt_all_of_ressources_to_obtain_1_img {
	position: relative;
	height: 45%;
	aspect-ratio: 1/1;
	border: solid 0.5vh transparent;
	background-color: rgb(51, 51, 51);
	border-radius: 50%;
	background-clip: padding-box;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1vh;
}
.qt_all_of_ressources_to_obtain_1_img::after {
	position: absolute;
	top: -0.5vh; bottom: -0.5vh;
	left: -0.5vh; right: -0.5vh;
	background: linear-gradient(to top, rgb(5, 122, 15) 30%, rgb(255, 196, 0) 30%);
	content: '';
	z-index: -1;
	border-radius: 50%;
	display: none
}
.qt_all_of_ressources_to_obtain_1_img img {
	height: 70%;
	border-radius: 20%;
}
.qt_all_of_ressources_to_obtain_2 {
	height: 100%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	line-height: 1;
	font-size: 1vh;
}
.qt_all_of_ressources_to_obtain_2_img {
	height: 60%;
}

.qt_all_of_right_side {
	height: 100%;
	width: 35%;
	border: solid;
	border-color: transparent transparent transparent rgb(255, 0, 0); ;
	border-width: 0 0 0 1vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.qt_all_of_reward_icon {
	height: 22%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-around;
	justify-content: space-around;
	font-size: 2.5vh;
	margin-top: 2vh;
}
.qt_all_of_reward_icon img {
	height: 60%;
}

.qt_all_of_ressources_won {
	height: 35%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	align-content: space-around;
	justify-content: center;
	font-size: 2vh;
}
.qt_all_of_unlocked_items {
	height: 45%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	align-content: space-around;
	justify-content: space-around;
}
.qt_all_of_ressources_won_2 {
	width: 30%;
	height: 30%;
	margin: 0.5vh !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: space-around;
	justify-content: center;
	font-size: 2.5vh;
	margin: 0.2vh;
	/*max-height: 70%;*/ /*cant make this work bruh*/
}
.qt_all_of_ressources_won_2 img {
	height: 80%;
	margin-left: 0.75vh;
}
.qt_all_of_unlocked_items_2 {
	height: 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-around;
	justify-content: center;
	text-align: center;
	font-size: 1.7vh;
	line-height: 1;
	margin-top: -1.2vh;
	border-radius: 50%;
}
.qt_all_of_unlocked_items_2 img {
	height: 75%;
	border-radius: 50%;
	padding: 1vh;
}

.qt_upper_left_block_container {
	height: 25%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-top: 1vh;
	position: relative;
	user-select: none;
}
#qt_upper_left_button {
	height: 12%;
	aspect-ratio: 1.1/1;
	left: -3vh;
	top: -3vh;
	z-index: 100;
	position:absolute;
	border: solid 0.75vh rgb(124, 153, 91, 0.973);
	border-radius: 125vh;
	background-color: rgba(27, 27, 27);
	transition: all 0.1s ease-in-out;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}
#qt_upper_left_block {
	height: 75%;
	left: 8vh;
	top: 1vh;
	aspect-ratio: 1/1;
	position:absolute;
	border: solid 0.75vh rgb(255, 196, 0);
	border-radius: 125vh;
	background-color: rgba(44, 133, 160, 0);
	transition: all 0.1s ease-in-out;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}
#qt_upper_left_block img {
	height: 60%;
}
#qt_upper_left_block2 {
	height: 20%;
	left: 30vh;
	aspect-ratio: 7/2.5;
	position:absolute;
	border-radius: 1.25vh;
	border: solid 0.75vh;
	background-color: rgba(44, 133, 160, 0);
	transition: all 0.1s ease-in-out;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	font-size: 3vh;
	border-color: rgb(255, 196, 0);
	padding-top: 0.35vh;
}
#qt_upper_right_block {
	height: 6.5vh;
	padding-top: 0.5vw;
	right: 8vh;
	width: 22vh;
	position:absolute;
	border-radius: 2vh;
	font-size: 5vh;
	border:solid 0.75vh rgb(255, 196, 0);
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	font-family: 'Teko', sans-serif;
	transition: all 0.1s ease-in-out;
	cursor: pointer;
	background-color: #3c3c3c;
}
#qt_upper_right_block:hover {
	transform: translate(0.25vh, -0.25vh);
	box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5);
}
#qt_center_left_block {
	height: 6vh;
	width: 7vh;
	left: 12vh;
	border:solid 0.5vh rgba(124, 153, 91, 0.973);
	border-radius: 1.2vh;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#qt_center_left_block:hover {
	background-color: rgba(230, 233, 233, 0.363);
	transform: translate(0.375vh, -0.375vh);
}
#qt_center_left_block img {
	height: 85%;
}
#qt_upper_left_button:hover {
	background-color: rgb(189, 185, 185);
	transform: translate(0.375vh, -0.375vh);
}
#qt_upper_left_button img {
	height: 80%;
}
.qt_txt_addup1 {
	height: 5vh;
	font-size: 1.5vh;
	color: rgb(155, 154, 152);
	min-width: 15vh;
}
.qt_txt_addup2 {
	font-size: 2.5vh;
	padding-top: 0.6vh;
	color: rgb(155, 154, 152);
}
.qt_txt_addup {
	font-size: 1.5vh;
	color: rgb(155, 154, 152);
}


/* ---------------------------- Quest Pop-up completed ---- */
/* quest template 1 */
.qc_template {
	color: white;
	font-family: 'Teko', sans-serif;

	height: 65vh;
	aspect-ratio: 1/1;
	border-radius: 7vh;
	display: flex;
	border:solid 1vh green;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	transition: all 0.1s ease-in-out;
	position: relative;
	background-color: rgb(22, 34, 11);
}
.qc_upper_div {
	width: 75%;
	height: 60%;
	border: solid;
	border-color: transparent transparent green transparent;
	border-width: 0 0 0.75vh 0;
}
.qc_lower_div {
	width: 100%;
	height: 40%;
	border-radius: 6vh 0 6vh 6vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: space-around;
}
.qc_upper_div_title {
	width: 100%;
	height: 45%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 9vh;
}
.qc_upper_div_content {
	width: 100%;
	height: 55%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 5vh;
	text-align: center;
	color: white;
}
.qc_upper_div_content img {
	height: 15vh;
	margin-left: 8vh;
}
.qc_ressources_obtained {
	width: 25vh;
	height: 100%;
	border-radius: 0 0 0 6vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	align-content: center;
	margin-left: 2vh;
	flex-direction: row-reverse;
}
.qc_ressources_obtained1 {
	width: 12.3vh;
	margin-right: 4vh;
	flex-direction: column;
}
.qc_ressources_obtained2 {
	width: 25vh;
}
.qc_objects_obtained {
	height: 100%;
	border-radius: 0 0 6vh 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	margin-left: 1vh;
}
.qc_objects_obtained1 {
	width: 12.3vh;
}
.qc_objects_obtained2 {
	width: 24.6vh;
}
.qc_objects_obtained3 {
	width: 37vh;
}
.qc_ressources {
	height: 50%;
	width: 40%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	color: white;
	position: relative
}
.qc_ressources img {
	width: auto;
	height: 45%;
	margin: 1vh;
}
.qc_objects {
	height: 100%;
	width: 12.3vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	color: white;
	align-content: center;
	text-align: center;
}
.qc_objects img {
	width: auto;
	height: 35%;
}
.qc_ressources p {
	font-size: 3vh;
}
.qc_objects p {
	width: 100%;
	height: 4.5vh;
	font-size: 2vh;
	margin: 1vh;
}


/* ----------------------------------------------------- Achievement ---------------- */
/* ---------------------------- Achievement Pop-up (Unlocked) ---- */
.achievementPopUpDiv {
	background-color: rgba(27,27,27);

	opacity: 0;

	pointer-events: all;
	/*--achievementPopUpDiv_color: rgb(255, 230, 0);*/
	font-size: 1.6vh;
	line-height: 1.3;
	font-weight: bold;

	margin-top: 0.8vh;
	height: 15vh;
	width : 60vh;
	border-style: solid;
	border-width: 3px;
	border-radius: 2vh;
	border-color: var(--achievementPopUpDiv_color);

	box-shadow: inset 0 0 0.5em var(--achievementPopUpDiv_color), 0 0 0.5em var(--achievementPopUpDiv_color);

	background-color: rgba(0, 0, 0, 0.8);
	background-image: none;

	padding: 0.4em 0.7em;

	display: flex;
	flex-direction: row;
	justify-content: space-between;

	transition-property: opacity, box-shadow, text-shadow;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	z-index: 10000;
}
.achievementPopUpDiv:hover {
	box-shadow: inset 0 0 1em var(--achievementPopUpDiv_color), 0 0 1em var(--achievementPopUpDiv_color), 0 0 1.5em var(--achievementPopUpDiv_color);
	text-shadow: 0 0 0.5em var(--achievementPopUpDiv_color);
}

.achievementPopUpDiv > left {
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.achievementPopUpDiv > left > rarity {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 1;
	text-align: left;
	color: var(--achievementPopUpDiv_color);
}
.achievementPopUpDiv > left > info {
	margin: auto 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.achievementPopUpDiv > left > info > name {
	text-align: left;
	font-size: 1.5em;
	font-weight: bold;
}
.achievementPopUpDiv > left > info > desc {
	text-align: left;
}

.achievementPopUpDiv > right {
	height: 100%;
	width: 20%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.achievementPopUpDiv > right > img {
	height: 65%;
	object-fit: contain;
}
.achievementPopUpDiv > right > qty {
	font-size: 2em;
	line-height: 1;
	font-weight: bold;
	text-align: center;
	color: var(--achievementPopUpDiv_color);
}


/* ----------------------------------------------------- Warning ---------------- */
#WarningPopUp {
	height: 50%;
	bottom: 0;
	overflow: hidden;
}
.WarningPopUpDiv {
	pointer-events: none;
	margin: 0.25vh 0.5vh;
	/* min-height: 15vh; */
	width : 35vh;
	border: solid 1vh;
	border-radius: 2vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 1s ease-in-out;

	border-color: rgb(194, 0, 0);
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 2vh;
	transition: all 1s ease-in-out;
	/*animation: WarningPopUpDivFadeOut 1s forwards;*/ /*set via js*/
}
@keyframes WarningPopUpDivFadeOut {
	0% {opacity: 1}
	to {opacity: 0}
}
.WarningPopUpDiv > div {
	text-align: center;
	color: rgb(194, 0, 0);
	text-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.8);
}
.WarningPopUpDivTitle {
	font-size: 3.5vh;
	text-decoration: underline;
	line-height: 1em;
}
.WarningPopUpDivDesc {
	font-style: oblique;
	font-size: 2.3vh;
	line-height: 1em;
}


/* ----------------------------------------------------- Reward ---------------- */
#RewardPopUpDiv {
	pointer-events: all;
	margin: 0.25vh 0.5vh;
	padding: 0.5vh 1vh;
	min-height: 5vh;
	max-height: 43vh;
	width : 35vh;
	border-radius: 2vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;

	border-style: solid;
	border-color: rgb(140, 43, 43);
	background-color: rgba(0, 0, 0, 0.9);
	border-width: 0.2vh;

	opacity: 0;
	transition:
	height 1s ease,
	opacity 1s ease,
	box-shadow 0.3s ease;

	overflow: hidden;

	/*animation: RewardPopUpDivFadeOut 1s forwards;*/ /*set via js*/
	box-shadow:
	0 0 0.25vh var(--neon-color),
	0 0 0.5vh var(--neon-color),
	inset 0 0 0.25vh var(--neon-color),
	inset 0 0 0.5vh var(--neon-color);
}
#RewardPopUpDiv:hover {
	box-shadow:
	0 0 0.5vh var(--neon-color-hover),
	0 0 1.5vh var(--neon-color-hover),
	inset 0 0 0.5vh var(--neon-color-hover),
	inset 0 0 1.5vh var(--neon-color-hover);
}
#RewardPopUpDiv > hr {
	margin: 0.5vh 0;
	width: 100%;
	border: solid 0.2vh rgb(140, 43, 43);
}

.RewardPopUpDivReward {
	opacity: 0;
	height: 0;

	width: 100%;
	display: flex;
	align-items: center;
	transition:
	height 0.3s ease,
	opacity 0.8s ease;
}

.RewardPopUpDivReward:not(:last-child) {
	margin-bottom: 0.5vh;
}


.RewardPopUpDivReward.active {
	opacity: 1;
	height: 8vh;
}

.RewardPopUpDivReward.disappear {
	opacity: 0;
	height: 0;
	transition:
	height 0.5s ease,
	opacity 0.5s ease;
}

.RewardPopUpDivReward > .RewardPopUpDivRewardimg {
	height: 1vh;
	aspect-ratio: 1;
	border: solid 0.3vh rgb(140, 43, 43);
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow:
	0 0 0.25vh var(--neon-color),
	0 0 0.5vh var(--neon-color),
	inset 0 0 0.25vh var(--neon-color),
	inset 0 0 0.5vh var(--neon-color);

	transition: height 0.3s ease;
}

.RewardPopUpDivReward.active > .RewardPopUpDivRewardimg {
	height: 8vh;
}

.RewardPopUpDivReward.disappear > .RewardPopUpDivRewardimg {
	height: 0;
}

.RewardPopUpDivReward > .RewardPopUpDivRewardimg > img:not([data-fill]) {
	height: 75%;
	border-radius: 20%;
}
.RewardPopUpDivReward > .RewardPopUpDivRewardimg > img[data-fill] {
	height: 100%;
	border-radius: 50%;
}

.RewardPopUpDivReward > .RewardPopUpDivRewardDescription {
	margin-left: 1vh;
	margin-right: auto;
	font-size: 1.5vh;
	color: rgb(140, 43, 43);
	text-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.8);

	text-align: left;
	display: flex;
	align-items: center;
}

/* ----------------------------------------------------- Random Events ---------------- */
#RET_popupMain {
	pointer-events: none;
	opacity: 0;

	background-color: rgba(0, 0, 0, 0.5);
}

.RET_popupCont {
	position: relative;
	width: 70vh;
	max-width: 100%;

	border-radius: 0.8vh;
	box-shadow: 0 0 0.8vh rgb(163, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
	padding: 2vh;

	display: flex;
	flex-direction: column;

	font-size: 2.3vh; /* GOOD */
}

.RET_popupCont > exit {
	position: absolute;
	z-index: 1;
	top: -4vh;
	right: -5vh;
	padding: 0.5em 3em;
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	border-radius: 0.5em;
	--test_color: rgb(255, 0, 0, 0.6);

	background-color: rgba(0, 0, 0, 0.8);
	border: 0.1vh solid var(--test_color);
	border-radius: 1vh;
	text-shadow: 0 0 0.2em var(--test_color),
	0 0 0.4em var(--test_color);
	box-shadow: inset 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 2vh var(--test_color);

	cursor: pointer;
	transition: text-shadow 0.3s, box-shadow 0.3s;
}
.RET_popupCont > exit:hover {
	text-shadow: 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 1vh var(--test_color);
	box-shadow: inset 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 2vh var(--test_color),
	0 0 4vh var(--test_color);
}

.RET_popupCont > hr {
	width: 100%;
	border: none;
	height: 0.2vh;
	/* background-image: linear-gradient(to right, rgb(163, 0, 0), transparent, rgb(163, 0, 0)); */
	margin: 1.5vh 0;
}

.RET_title {
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

.RET_text {

}

.RET_requirements {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	/* margin: 1vh 0; */
}
.RET_requirements > div {
	width: 100%;
	height: 6vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
}
.RET_requirements > div > img {
	height: 100%;
	border-radius: 50%;
	border: solid 0.2vh rgb(163, 0, 0);
}
.RET_requirements > div > div {
	height: 90%;
	width: 100%;
	border-radius: 5vh;
	border-style: solid;
	border-width: 0.2vh;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}
.RET_requirements > div.RET_reqStat > div {
	border-color: rgb(163, 0, 0);
	/* background: linear-gradient(to right, rgb(163, 0, 0) 30%, rgba(0, 0, 0, 0.4) 30%); */
}
.RET_requirements > div.RET_reqFight > div {
	background-color: rgb(150, 0, 0);
	border-color: rgb(219, 0, 0);
}
.RET_requirements > div.RET_reqFightWon > div {
	background-color: rgb(0, 150, 0);
	border-color: rgb(0, 219, 0);
}
.RET_requirements > div > div > img{
	height: 1.5em;
	filter: drop-shadow(0 0 0.2em rgb(0, 0, 0));
}

.RET_buttons {
	display: flex;
	justify-content: center;
}
.RET_buttons > div {
	background-color: rgb(92, 0, 0);
	border: solid 0.3vh rgb(163, 0, 0);
	color: white;
	border: none;
	margin: 1vh;
	padding: 0.2em 1.4em;
	border-radius: 1vh;
	font-size: 1.5em;
	transition: background-color 0.3s, transform 0.3s;
}
.RET_buttons > div[disabled] {
	background-color: rgb(69, 60, 60);
}
.RET_buttons > div:not([disabled]):hover {
	background-color: rgb(163, 0, 0);
	transform: scale(1.1);
	cursor: pointer;
}


/* ----------------------------------------------------- RoadMap ---------------- */
#RoadMapPopUp {
	pointer-events: none;
	opacity: 0;

	background-color: rgba(0, 0, 0, 0.5);
}

#RoadMapPopUp > exit {
	position: absolute;
	z-index: 1;
	top: 2vh;
	right: 2vh;
	padding: 0.5em 3em;
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
	border-radius: 0.5em;
	--test_color: rgb(255, 0, 0, 0.6);

	background-color: rgba(0, 0, 0, 0.8);
	border: 0.1vh solid var(--test_color);
	border-radius: 1vh;
	text-shadow: 0 0 0.2em var(--test_color),
	0 0 0.4em var(--test_color);
	box-shadow: inset 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 2vh var(--test_color);

	cursor: pointer;
	transition: text-shadow 0.3s, box-shadow 0.3s;
}
#RoadMapPopUp > exit:hover {
	text-shadow: 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 1vh var(--test_color);
	box-shadow: inset 0 0 1vh var(--test_color),
	0 0 1vh var(--test_color),
	0 0 2vh var(--test_color),
	0 0 4vh var(--test_color);
}

.RoadMapPopUp {
	position: relative;
	background-color: rgba(0, 0, 0, 0.5);
	height: 90%;
	aspect-ratio: 1;
	max-width: 100%;

	overflow-y: auto;
	overflow-x: hidden;

	padding: 4em 0;

	display: flex;
	flex-direction: column;

	font-size: 2.3vh; /* GOOD */

	/* SHOULD BE DEFINED IN THE SIDEBAR HTML, idk */
	--RmapPopUp_W : 0.7em;
	--RmapPopUp_H : 8em;
	--RmapPopUp_H_big : 12em;

	--RmapPopUp_color_lust_1: rgb(183, 11, 166); /* lust */
	--RmapPopUp_color_lust_2: rgb(110, 20, 110); /* lust */

	--RmapPopUp_color_trust_1: rgb(183, 11, 11); /* trust */
	--RmapPopUp_color_trust_2: rgb(110, 20, 20); /* trust */

	--RmapPopUp_color_transition: rgb(255, 217, 0); /* transition */

	--RmapPopUp_color_chosen_1: var(--RmapPopUp_color_trust_1); /* TODO */
	--RmapPopUp_color_chosen_2: var(--RmapPopUp_color_trust_2); /* TODO */

	--RmapPopUp_color_lock_1: rgb(100, 100, 100); /* lock */
	--RmapPopUp_color_lock_2: rgb(60, 60, 60); /* lock */
}

.RoadMapPopUp > left {
	position: absolute;
	width: 8em; /* match with the right padding */
}

.RoadMapPopUp > left > .namesCont {
	position: absolute;
	height: 0;
	font-size: 1.3em;

	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > left > .namesCont > div {
	position: relative;
	width: 100%;
	height: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > left > .namesCont > div > div.name {
	position: absolute;
	text-shadow: 0 0 0.1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0), 0 0 0.3em rgb(0, 0, 0);
	margin-bottom: 3em;
}

.RoadMapPopUp > left > .namesCont > div > div.imgCont {
	position: absolute;
	width: 60%;
	aspect-ratio: 1;

	display: flex;
}

.RoadMapPopUp > left > .namesCont > div > img {
	width: 100%;
}

.RoadMapPopUp > left > .metersCont {
	width: 100%;
	margin: 0 auto;
	height: 0;

	display: flex;
	justify-content: space-around;
}

.RoadMapPopUp > left > .metersCont > .meter {
	width: 45%;
	height: 100%;
	border-radius: 4em;
	border: solid 0.2em var(--RmapPopUp_color_chosen_1);

	--RmapPopUp_meter_value: 0em;

	background: linear-gradient(to bottom, var(--RmapPopUp_color_chosen_2) var(--RmapPopUp_meter_value), var(--RmapPopUp_color_lock_2) var(--RmapPopUp_meter_value));
}
.RoadMapPopUp > left > .metersCont > .meter[data-type="lust"] {
	--RmapPopUp_color_chosen_1: var(--RmapPopUp_color_lust_1);
	--RmapPopUp_color_chosen_2: var(--RmapPopUp_color_lust_2);
}
.RoadMapPopUp > left > .metersCont > .meter[data-type="trust"] {
	--RmapPopUp_color_chosen_1: var(--RmapPopUp_color_trust_1);
	--RmapPopUp_color_chosen_2: var(--RmapPopUp_color_trust_2);
}

.RoadMapPopUp > left > .phase {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);

	top: 0;
	width: 80%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: solid 0.2em rgb(150, 0, 0);
	background-color: color-mix(in srgb, rgb(100, 0, 0) 100%, transparent 20%);

	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

.RoadMapPopUp > left > .phase > img {
	width: 80%;
}

.RoadMapPopUp > left > .phase > name {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	pointer-events: none;
	opacity: 0;

	background-color: rgba(0, 0, 0, 0.8);

	display: flex;
	justify-content: center;
	align-items: center;

	transition: opacity 0.3s;
}
.RoadMapPopUp > left > .phase:hover > name {
	opacity: 1;
}

.RoadMapPopUp > Rmap {
	height: 100%;
	width: 100%;
	padding: 0 8em; /* match with the left width */
}

.RoadMapPopUp > Rmap > phase {
	width: 100%;
	height: var(--RmapPopUp_H);

	display: flex;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > Rmap > phase[big] {
	--RmapPopUp_H : var(--RmapPopUp_H_big);
}

.RoadMapPopUp > Rmap > phase[right] {
	flex-direction: row-reverse;
}

.RoadMapPopUp > Rmap > phase > bobble {
	width: 0;
	height: 0;
	padding: calc(var(--RmapPopUp_W) / 2);

	background-color: rgba(0, 255, 255, 0.125);
}

.RoadMapPopUp > Rmap > phase > bobble > div {
	height: calc(var(--RmapPopUp_H) + 2em);
	width: calc(var(--RmapPopUp_H) + 2em);
	transform: translate(-50%, -50%);
	border-radius: 50%;

	padding: 1em;

	border-style: solid;
	border-width: 0.2em;
	border-color: rgb(150, 0, 0);
	background-color: rgb(100, 0, 0);

	display: flex;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > Rmap > phase[big] > bobble > div {
	box-shadow: 0 0 5vh 2vh gold;
	border-color: gold;
	background-color: rgb(208, 181, 31);
}

.RoadMapPopUp > Rmap > phase[locked] > bobble > div {
	border-color: var(--RmapPopUp_color_lock_1);
	background-color: var(--RmapPopUp_color_lock_2);
}

.RoadMapPopUp > Rmap > phase > corner {
	display: block;
	width: 8em;
	height: var(--RmapPopUp_W);
}

.RoadMapPopUp > Rmap > phase > corner > div {
	height: var(--RmapPopUp_H);
	width: 100%;

	border-style: solid;
	border-top-color: var(--RmapPopUp_color_chosen_1);
	border-left-color: var(--RmapPopUp_color_chosen_1); /* overwriten if next is locked */
	border-right-color: var(--RmapPopUp_color_chosen_1); /* overwriten if next is locked */
}

.RoadMapPopUp > Rmap > phase[right] > corner > div {
	border-width: var(--RmapPopUp_W) var(--RmapPopUp_W) 0 0;
	border-top-right-radius: calc(var(--RmapPopUp_W) * 3);
}

.RoadMapPopUp > Rmap > phase[left] > corner > div {
	border-width: var(--RmapPopUp_W) 0 0 var(--RmapPopUp_W);
	border-top-left-radius: calc(var(--RmapPopUp_W) * 3);
}

.RoadMapPopUp > Rmap > phase[locked] > corner > div {
	border-top-color: var(--RmapPopUp_color_lock_1);
	border-left-color: var(--RmapPopUp_color_lock_1);
	border-right-color: var(--RmapPopUp_color_lock_1);
}

.RoadMapPopUp > Rmap > phase[nextLocked] > corner > div {
	border-top-color: var(--RmapPopUp_color_lock_1);
	border-left-color: var(--RmapPopUp_color_lock_1);
	border-right-color: var(--RmapPopUp_color_lock_1);
}

.RoadMapPopUp > right {
	position: absolute;
	right: 0;
	width: 8em; /* match with the right padding */
}

.RoadMapPopUp > right > div {
	position: absolute;
	height: 0;
	width: 100%;
	top: 20vh; /* set in js */

	display: flex;
	justify-content: center;
}

.RoadMapPopUp > right > div > .arrowCont {
	height: 0;
	width: 0.4em;

	display: flex;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > right > div > .arrowCont > arrow {
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 1em 1em 1em 0;
	border-color: transparent rgb(150, 0, 0) transparent transparent;
}

.RoadMapPopUp > right > div > .imageCont {
	height: 0;
	width: 50%;

	display: flex;
	justify-content: center;
	align-items: center;
}

.RoadMapPopUp > right > div > .imageCont > img {
	width: 100%;
	border: solid 0.2em rgb(150, 0, 0);
	border-radius: 50%;
}

.RoadMapPopUp > right > div > .name {
	position: absolute;
	bottom: 4.2em;
	height: 0;
	width: 100%;
	padding-left: 0.4em;

	text-align: center;
	line-height: 1;
}


/* ----------------------------------------------------- WipPopup ---------------- */
.WipPopupDiv {
	font-size: 4.5vh;
	user-select: none;

	position: relative;
	/* height: 65vh; */
	padding: 1em 0.4em;
	width: 65vh;
	max-width: 100%;
	border-radius: 7vh;
	border: solid 1vh rgb(117, 51, 51);

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	background-color: rgb(27, 27, 27);
}
.WipPopupDiv > desc {
	font-size: 1.5em;
	margin: 1em 0;
	line-height: normal;
	text-align: center;
	color: rgb(117, 51, 51);
	text-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.8);
}
.WipPopupDiv > desc2 {
	font-size: 0.6em;
	line-height: normal;
	text-shadow: 0.05em 0.05em 0.1em rgba(168, 24, 24);
}
.WipPopupDiv li {
    text-align: left;
}
.WipPopupDiv > support {
	height: 10vh;
	margin: 1em auto;
	width: 65%;
	padding: 1vh;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;

	border-style: solid;
	border-color: rgb(117, 51, 51);
	border-width: 0 0 0.5vh 0;
}
.WipPopupDiv > support > div {
	font-size: 0.7em;
	margin: 0 1vh;
}
.WipPopupDiv > support > img {
	border-radius: 50%;
	height: 100%;
	transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
	cursor: pointer;
	filter:
		drop-shadow(0 0 0.5vh rgb(117, 51, 51));
}
.WipPopupDiv > support > img:hover {
	filter:
		drop-shadow(0 0 0.5vh rgb(117, 51, 51))
		drop-shadow(0 0 1vh rgb(117, 51, 51));
}
.WipPopupDiv > support > img:first-child:hover {
	transform: scale(1.05) rotate(-5deg);
}
.WipPopupDiv > support > img:last-child:hover {
	transform: scale(1.05) rotate(5deg);
}


/* ----------------------------------------------------- Start Warning ---------------- */
.startWarning {
	font-family: 'Teko', sans-serif;
	font-size: 5vh;
	user-select: none;
	color: rgb(255, 255, 255);

	position: relative;
	min-height: 65vh;
	max-height: 100vh;
	width: 90vh;
	max-width: 100%;
	border-radius: 7vh;
	border: solid 1vh rgb(117, 51, 51);


	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	background-color: rgb(44, 9, 9);
}
.startWarning > header {
	width: 100%;
	height: 10vh;
	padding: 1vh 0;
	font-size: 8vh;

	border-style: solid;
	border-width: 0 0 0.5vh 0;
	border-color: rgb(117, 51, 51);

	display: flex;
	justify-content: center;
	align-items: center;
}
.startWarning > header > img {
	height: 100%;
	margin: 0 5vh;
}
.startWarning > desc {
	text-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.8);
	padding: 6vh;
	line-height: 1.2;
	font-size: 0.8em;

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.startWarning > desc > ul {
	font-size: 2.8vh;
	text-align: left;
}
.startWarning > desc > ul > li {
	margin-left: 2vh;
	margin-top: 0.6em;
}


/* ----------------------------------------------------- Other ---------------- */
/* SECONDARY SCENE PHASE OVERLAY */
/* INSIDE THE ScreenOverlayContPerma CONT */
#ScreenOverlayContPerma > #scenePhaseIndicator {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 12vh;
	margin: 2em 4em;
	border-radius: 50%;
	z-index: 100;
	display: flex;
	justify-content: center;
	transition: transform 0.15s ease-in-out;
	flex-direction: column;
}
#ScreenOverlayContPerma > #scenePhaseIndicator > img {
	width: 100%;
	filter:
		drop-shadow(0 0 0.3em rgb(0, 0, 0))
		drop-shadow(0 0 0.3em rgb(0, 0, 0))
		drop-shadow(0 0 0.3em rgb(0, 0, 0));
}
#ScreenOverlayContPerma > #scenePhaseIndicator > .infoStat {
	pointer-events: all;
	position: relative;
	width: 100%;
	height: 7vh;
	padding: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, transparent, #000000a8 20%, #000000a8 80%, transparent);
}
#ScreenOverlayContPerma > #scenePhaseIndicator > .infoStat > div {
	font-size: 2vh;
}
#ScreenOverlayContPerma > #scenePhaseIndicator > .infoStat > img {
	position: absolute;
	height: 100%;
	padding: 0.5em;

	transition: opacity 0.2s;
}
#ScreenOverlayContPerma > #scenePhaseIndicator > .infoStat:hover > img {
	opacity: 0.1;
}



/* christmas update */
#christmasCandyCanesCounter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* display: flex; */
	display: none;
	align-items: flex-end;
    justify-content: flex-start;
}

.christmasCandyCanesCounter {
	font-size: 2.5vh;
	color: white;
	background-color: rgba(0, 0, 0, 0.8);
	margin: 2vh;
	margin-top: 18vh;
	margin-right: 4.8vh;
	border-radius: 1vh;
	padding: 2vh 2vh;
	display: flex;
	align-items: center;
	box-shadow:
		0 0 0.25vh var(--neon-color),
		0 0 0.5vh var(--neon-color),
		inset 0 0 0.25vh var(--neon-color),
		inset 0 0 0.5vh var(--neon-color);
}

.christmasCandyCanesCounterText {
	font-size: 2.5vh;
	color: white;
}

.christmasCandyCaneCounterImg {
	width: 5vh;
    height: 5vh;
	margin-right: 2vh;
	filter: drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.5));
}

.christmasCandyCanesTitle {
	position: absolute;
	margin-bottom: 9vh;
	font-size: 1.2vh;
	color: white;
	text-align: center;
}