/*
* This is the stylesheet for all the new scenes.
*/


:root {
	--neon-color: rgba(255, 0, 0, 0.4);             /* Red neon color */
	--neon-color-hover: rgba(255, 0, 0, 0.6);       /* More opaque red neon color for hover */
	--scrollbar-thumb-color: rgba(255, 0, 0, 0.4);  /* Semi-transparent red to match neon */
	--scrollbar-track-color: rgba(0, 0, 0, 0.4); /* Darker background like .message */
}

.DIAS_infoCont {
	position: relative;
	height: 14vh;
	width: 100%;
	min-width: 90vh;
	/* background-color: rgba(0, 0, 0, 0.2); */
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.4));
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-right: 30vh;
	padding: 0.5vh;
}

.DIAS_infoChar {
	height: 12vh;
	min-width: 27vh;
	max-width: 35vh;
	border: solid 0.2vh rgba(255, 0, 0, 0.4);
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 2vh;
	padding: 0.5vh 0.5vh;
	justify-content: space-around;
	display: flex;
	overflow: hidden;
	align-items: center;
	cursor: pointer;
	margin-left: 0.7vh;
	transition: box-shadow 0.3s ease;
}
.DIAS_infoChar: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);
}
.DIAS_infoCharImgCont {
	position: relative;
	height: 90%;
	aspect-ratio: 1/1;
}
.DIAS_infoCharImgCont > img {
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: solid 0.4vh rgba(255, 0, 0, 0.6);
}
.DIAS_infoCharImgCont > .phase {
	position: absolute;
	top: 0;
	right: -1vh;
	height: 40%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.8);
	border: solid 0.4vh rgba(255, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.DIAS_infoCharImgCont > .phase > img {
	height: 80%;
}
.DIAS_infoRight {
	height: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	padding: 0.6vh
}
.DIAS_infoRight > .statsCont {
	height: 64%;
	width: 100%;
	display: flex;
	font-size: 2vh;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 1vh;
}
.DIAS_infoRight > .statsCont > div {
	height: 50%;
	display: flex;
	align-items: center;
	font-weight: bold;
	margin-bottom: 0.2em;
}
.DIAS_infoRight > .statsCont > div > img {
	height: 90%;
	margin-right: 0.4em;
}
.DIAS_infoRight > .infoName {
	font-size: 2.5vh;
	line-height: 0.8;
	margin: 0.2em;
	font-weight: bold;
	text-transform: uppercase;

	white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
.charismaVirus {
	width: 70% !important;
	height: 35% !important;
}
.DIAS_infoStats {
	height: 90%;
	width: 40vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.DIAS_infoStats > div {
	position: relative;
	height: 48%;
	width: 100%;
	display: flex;
}
.DIAS_infoStats > div > div.lust {
	--diasC1: rgb(255,48,118);
}
.DIAS_infoStats > div > div.trust {
	--diasC1: rgb(224,31,39);
}
.DIAS_infoStats > div > div.charisma {
	--diasC1: rgb(65, 75, 251);
}
.DIAS_infoStats > div > div.virus {
	--diasC1: rgb(23,186,22);
}
.DIAS_infoStats > div > div {
	/* --diasC1 */ /* used for: Border */
	--diasC2: color-mix(in srgb, var(--diasC1), DimGray 50%); /* used for: vertical line */
	--diasC3: color-mix(in srgb, var(--diasC1), black 20%);

	/* background-image: linear-gradient(to right, var(--diasC3) 33%, rgba(0, 0, 0, 0.8) 33%); */ /* exemple. set in js */

	border-style: solid;
	border-width: 0.6vh;
	border-color: var(--diasC1);

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

	filter: drop-shadow(0 0 0.5vh var(--diasC1));
}
.DIAS_infoStats > div > div.complete {
	background: var(--diasC1) !important;
	z-index: 1;
	animation: DIAS_infoStats_glow 1s infinite alternate;
}
@keyframes DIAS_infoStats_glow {
	0% {
		box-shadow:
		0 0 1vh var(--diasC1),
		0 0 2vh var(--diasC1);
	} to {
		box-shadow:
		0 0 2vh var(--diasC1),
		0 0 3vh var(--diasC1);
	}
}
.DIAS_infoStats > div > div > div {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.DIAS_infoStats > div > div.left {
	height: 100%;
	width: 100%;
	border-radius: 10vh 0 0 10vh;
	border-left-width: 3.7vh;
}
.DIAS_infoStats > div > div.right {
	height: 100%;
	width: 100%;
	border-radius: 0 10vh 10vh 0;
	border-right-width: 3.7vh;
}
.DIAS_infoStats > div > img {
	position: absolute;
	z-index: 2;
	height: 100%;
}
.DIAS_infoStats > div > div > hr {
	height: 100%;
	width: 0.5vh;
	background-color: var(--diasC2);

	transition: opacity 0.5s;
}
.DIAS_infoStats > div > div.complete > hr {
	opacity: 0;
}

.DIAS_container {
	max-width: 100%;
	padding: 2vh 0;
	font-size: 1.8vh;

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

@media (max-width: 920px) {
    .DIAS_container {
        font-size: 3vh !important;
    }
  }

.DIAS_containerCont {
	position: relative;
	top: 0;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	/* height: 75vh; */
	flex: 1;
}
.DIAS_containerScroll {
	position: absolute;
	top: 0;
	left: 0;

	overflow: auto;
	height: 100%;
	width: 100%;

	padding: 0 2vh;

	transition: transform 1s;
}
.DIAS_containerScroll.hideRight {
	pointer-events: none;
	transform: translateX(150%);
}
.DIAS_containerScroll.hideLeft {
	pointer-events: none;
	transform: translateX(-150%);
}

.DIAS_containerV3 {
	width: 100%;

	padding: 2vh 0;
	font-size: 1.8vh;

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

@media (max-width: 920px) {
    .DIAS_containerV3 {
        font-size: 3vh !important;
    }
  }

.DIAS_message {
	/* width: 100vh; */
	max-width: min(100vh, 100%);
	margin-bottom: 2vh;
	opacity: 0;
	display: none;
	align-items: flex-start;
	border-radius: 0.8vh;
	padding: 1vh;
	transition-property: opacity, transform, box-shadow, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease;

	background-color: rgba(0, 0, 0, 0.8);
	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);
}
.DIAS_message:hover {
	background-color: rgba(0, 0, 0, 0.9);
	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);
}
body[highContrast] .DIAS_message {
	background-color: rgba(0, 0, 0, 0.9);
}
body[highContrast] .DIAS_message:hover {
	background-color: rgba(0, 0, 0, 0.95);
}

.DIAS_desactive {
	pointer-events: none; /* diactivate the buttons */
	opacity: 1; /* for the animation */
	animation: DIAS_fade-out 0.3s ease forwards;
	overflow: hidden; /* for the animation */
}

@keyframes DIAS_fade-in {
	0% {
		transform: scale(0.5);
		opacity: 0;
	} to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes DIAS_fade-out {
	0% {
		opacity: 1;
		max-height: 100vh; /* anim start point */
	} to {
		opacity: 0;
		max-height: 0;
		margin-bottom: 0;
	}
}

.DIAS_message.centered {
	/* width: fit-content; */
	/* margin-left: auto; */
	/* margin-right: auto; */
}

.DIAS_message.right {
	width: 90vh;
	/* margin-left: 10vh; */
	margin-left: min(max(calc(100% - 90vh), 0px), 10vh); /* gigabrain */
	/* min(max(calc(100% - WIDTH), 0px), MARGIN) */
	flex-direction: row-reverse;
}

.DIAS_message.left {
	width: 90vh;
	/* margin-right: 10vh; */
	margin-right: min(max(calc(100% - 90vh), 0px), 10vh);
}

.DIAS_message_extended {
	max-width: 100%;
	margin-bottom: 2vh;
	opacity: 0;
	display: none;
	flex-wrap: wrap;
    flex-direction: row;
	align-items: flex-start;
	align-items: center;
    justify-content: center;
	border-radius: 0.8vh;
	padding: 1vh;
	gap: 1.5vh;
	transition-property: opacity, transform, box-shadow, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease;

	background-color: rgba(0, 0, 0, 0.8);
	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);
}
.DIAS_message:hover {
	background-color: rgba(0, 0, 0, 0.9);
	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);
}

.DIAS_image {
	height: 45vh;
	max-width: 100%;
	object-fit: contain;
}

.DIAS_content_image {
	height: 45vh;
	object-fit: contain;
}

.DIAS_video {
	height: 45vh;
	max-width: 100%;
}

.DIAS_content_video {
	height: 45vh;
}

.DIAS_text {
	flex-grow: 1;
	margin-left: 1.4vh;
	/*hmmm*/
	margin-right: 1vh;
	/*hmmm*/
	margin-bottom: 1em;
}

.DIAS_text>name {
	font-weight: bold;
	display: block;
	margin-top: 0.4vh;
	color: var(--neon-color);
	font-size: 1.3em;
	text-shadow: 0 0 0.15em rgb(0 0 0);
}

.DIAS_text>p {
	margin-block-end: unset;
}

.DIAS_text>inner,
.DIAS_text>action {
	display: block;
	margin-top: 1em;
	padding: 0.5vh 1vh;
	border-style: solid;
	border-width: 0 0 0 0.4vh;
	font-style: italic;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	box-sizing: border-box;
}
body[highContrast] .DIAS_text>inner,
body[highContrast] .DIAS_text>action {
	background-color: rgba(0, 0, 0, 0.9);
	border-width: 1px 0 1px 0.4vh;
}

.DIAS_text>action {
	border-color: rgba(109, 109, 109, 0.4);
	color: rgb(135, 135, 135);
}
body[highContrast] .DIAS_text>action {
	color: rgb(255, 255, 255);
}

.DIAS_text>inner {
	border-color: rgba(255, 0, 0, 0.4);
	color: rgb(165 0 0);
	border-radius: 0.5vw;
}
body[highContrast] .DIAS_text>inner {
	color: rgb(255, 240, 240);
}

.DIAS_avatar {
	width: 8vh;
	height: 8vh;
	object-fit: cover;
	margin: 0.6vh;
	border-radius: 10%;
	border: 0.3vh solid rgba(255, 0, 0, 0.4);
}

@media (max-width: 920px) {
    .DIAS_avatar {
		width: 12vh !important;
		height: 12vh !important;
    }
  }

.DIAS_message.left .DIAS_avatar {
	margin-right: 0;
}

.DIAS_message.right .DIAS_avatar {
	margin-left: 0;
}

.DIAS_buttonCont {
	display: none;
	opacity: 0; /* for the animation */
	/*set to flex when needed*/
	justify-content: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2vh;

	flex-direction: column;
}
.DIAS_buttonContV3 {
	position: relative;
	height: 13vh;
	padding: 0.5vh;
	/* height: fit-content; */
	
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	max-width: 100%;

	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.4));

	display: flex;
	flex-direction: row;
	align-items: center;

	transition: opacity 0.6s ease, height 0.3s ease;

	@starting-style {
		opacity: 0;
		height: 10vh;
	}
}
.DIAS_buttonContV3[empty] {
	pointer-events: none;
	height: 10vh;
}
.DIAS_buttonContV3[empty] > .DIAS_buttonV3 {
	opacity: 0;
}

.DIAS_button {
	/* flex-grow: 1; */
	/* flex-basis: 100%;       shie le button exit des fights         */
	/* max-width: 40%; */
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 55vh;
	font-size: 3vh;
	padding: 1.2vh;
	margin: 1vh;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	cursor: pointer;
	border-radius: 0.8vh;
	border-style: solid;
	border-width: 0.06em;
	border-color: rgba(255, 0, 0, 0.4);
	text-shadow:
		0 0 1vh rgba(255, 0, 0, 0.4),
		0 0 1.5vh rgba(255, 0, 0, 0.4),
		0 0 2vh rgba(255, 0, 0, 0.4);
	animation: DIAS_glow-animation 1.5s infinite alternate;
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
.DIAS_button:hover {
	/* Scale the button */
	transform: scale(1.05);
	background-color: rgba(0, 0, 0, 0.8);
	text-shadow:
		0 0 1vh rgba(255, 0, 0, 0.6),
		0 0 1.5vh rgba(255, 0, 0, 0.6),
		0 0 2vh rgba(255, 0, 0, 0.6);
}
.DIAS_buttonV3 {
	position: relative;

	/* --dias2C1 */ /* used for: Background */
	--dias2C2: color-mix(in srgb, var(--dias2C1), black 30%); /* used for: boxShadow */

	height: calc(100% - 2vh);
	margin: 0 1vh;
	margin-bottom: 1vh;
	width: 15vh;
	border-radius: 2vh;

	background-color: var(--dias2C1);
	color: white;
	text-shadow: 0 0 0.2em black;

	cursor: pointer;

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

	transition: translate 0.15s, box-shadow 0.15s, opacity 0.3s;
	box-shadow: 0 1vh 0 var(--dias2C2);

	filter: drop-shadow(0 0 0.5vh var(--dias2C2));
}
.DIAS_buttonV3:not([disable]):hover {
	translate: 0 0.2vh;
	box-shadow: 0 0.8vh 0 var(--dias2C2);
}
.DIAS_buttonV3:not([disable]):active {
	translate: 0 0.6vh;
	box-shadow: 0 0.4vh 0 var(--dias2C2);
}
.DIAS_buttonV3[disable] {
	cursor: not-allowed;
	filter: grayscale(100%);
}
/* .DIAS_buttonV3[disable]::after {
	content: "___";
	font-size: 5em;
	position: absolute;
	font-weight: 900;
	transform: translate(-18%, -23%) rotate(-30deg);
} */
.DIAS_buttonV3 > img {
	height: 50%;
	filter: drop-shadow(0 0.3vh 0.3vh black);
}
.DIAS_buttonV3 > .title {
	font-size: 2.5vh;
	font-weight: bold;
	text-align: center;
}
.DIAS_buttonV3 > .desc {
	position: absolute;
	pointer-events: none;
	top: -0.5vh;
	width: 20vh;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 0.5vh 1vh;
	border-radius: 0.5vh;
	transform: translateY(-100%);

	opacity: 0;
	transition: opacity 0.3s;
}
.DIAS_buttonV3:hover > .desc {
	opacity: 1;
}

.DIAS_button.DIAS_button-grayed {
	border-color: rgba(109, 109, 109, 0.4);
	text-shadow:
		0 0 1vh rgba(109, 109, 109, 0.4),
		0 0 1.5vh rgba(109, 109, 109, 0.4),
		0 0 2vh rgba(109, 109, 109, 0.4);
	animation: DIAS_glow-animation-grayed 1.5s infinite alternate;
}
.DIAS_button.DIAS_button-grayed:hover {
	transform: scale(1);
	background-color: rgba(0, 0, 0, 0.4);
	text-shadow:
		0 0 1vh rgba(109, 109, 109, 0.6),
		0 0 1.5vh rgba(109, 109, 109, 0.6),
		0 0 2vh rgba(109, 109, 109, 0.6);
}

.DIAS_button_choice:hover {
	background-color: rgba(0, 0, 0, 0.8);
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	color: rgba(255, 255, 255, 0)
}

.DIAS_button_choice_requirements {
	position: absolute;
	opacity: 0;
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-height: 100%;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	text-shadow:
		0 0 1vh rgba(255, 0, 0, 0.4),
		0 0 1.5vh rgba(255, 0, 0, 0.4),
		0 0 2vh rgba(255, 0, 0, 0.4);
}

.DIAS_button_choice:hover .DIAS_button_choice_requirements {
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	opacity: 1;
	color: white;
	text-shadow:
		0 0 1vh rgba(255, 0, 0, 0.4),
		0 0 1.5vh rgba(255, 0, 0, 0.4),
		0 0 2vh rgba(255, 0, 0, 0.4);
}

.DIAS_button_choice_requirements > img {
	height: 4vh;
	margin-left: 1.5vh;
	margin-right: 3vh;
	pointer-events: none;
	filter: drop-shadow(0 0 0.5vh rgba(255, 255, 255, 1));
}

@keyframes DIAS_glow-animation {
	0% {
		box-shadow:
		0 0 8px rgba(255, 0, 0, 0.4),
		0 0 16px rgba(255, 0, 0, 0.4),
		0 0 24px rgba(255, 0, 0, 0.4);
	} to {
		box-shadow:
		0 0 12px rgba(255, 0, 0, 0.4),
		0 0 24px rgba(255, 0, 0, 0.4),
		0 0 36px rgba(255, 0, 0, 0.4);
	}
}
@keyframes DIAS_glow-animation-grayed {
	0% {
		box-shadow:
		0 0 8px rgba(109, 109, 109, 0.4),
		0 0 16px rgba(109, 109, 109, 0.4),
		0 0 24px rgba(109, 109, 109, 0.4);
	} to {
		box-shadow:
		0 0 12px rgba(109, 109, 109, 0.4),
		0 0 24px rgba(109, 109, 109, 0.4),
		0 0 36px rgba(109, 109, 109, 0.4);
	}
}

.DIAS_popupCont {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.7);

	opacity: 0;
	pointer-events: none;

	transition: opacity 0.3s ease;
}
.DIAS_popup {
	position: relative;
	width: 90vh;
	max-width: 100%;
	/* height: 50vh; */
	background-color: rgba(0, 0, 0, 0.8);
	border: solid 0.4vh rgb(144, 0, 0);
	border-radius: 2vh;
	padding: 2vh;
	display: flex;
	flex-direction: column;
    align-items: center;
}
.DIAS_popup > .DIAS_popupTitle {
	font-size: 3.5vh;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1vh;
}
.DIAS_popup > .DIAS_popupImgs {
	height: 20vh;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.DIAS_popup > .DIAS_popupImgs > img {
	height: 100%;
	object-fit: contain;
}
.DIAS_popup > .DIAS_popupImgs > img.sides {
	height: 60%;
	cursor: pointer;
	filter: drop-shadow(0 0 0.5vh rgb(144, 0, 0));
	transition: transform 0.3s, filter 0.3s;
}
.DIAS_popup > .DIAS_popupImgs > img.sides:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 1vh rgb(144, 0, 0));
}
.DIAS_popup > .DIAS_popupText {
	font-size: 2.2vh;
	margin-bottom: 1vh;
	text-align: center;
}
.DIAS_popup > .DIAS_popupInput {
	display: flex;
	gap: 1vh;
}
.DIAS_popup > .DIAS_popupInput > input {
	width: 100%;
	padding: 0.5vh 1vh;
	font-size: 2.5vh;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	border: solid 0.2vh rgb(144, 0, 0);
	border-radius: 0.5vh;
}
.DIAS_popup > .DIAS_popupInput > div {
	padding: 0.5vh 1vh;
	font-size: 2.5vh;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	border: solid 0.2vh rgb(144, 0, 0);
	border-radius: 0.5vh;
	cursor: pointer;
}

.DIAS_popupExit {
	position: absolute;
	
	top: -1em;
	right: -1em;
	padding: 0.5em 1.5em; 
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.9);
	border: solid 0.4vh rgb(144, 0, 0);
	color: rgb(144, 0, 0);
	border-radius: 0.5em;
}

.DIAS_active {
	opacity: 0; /* for the animation */
	display: flex;
	animation: DIAS_fade-in 0.3s ease forwards;
}