/**********************************************/
/* FONTS */
/**********************************************/

@font-face {
	font-family: 'Pentory';
	src: local('Pentory'), url('../fonts/Pentory.ttf') format('truetype');
}

/**********************************************/
/* BASE TAGS */
/**********************************************/

*, *::after, *::before {
	box-sizing: border-box !important;
	line-height: 1.5 !important;
}

html {
	aspect-ratio: 9 / 18;
	background: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	font-family: Pentory;
	font-size: 2.6cqh;
	height: 100dvh;
	hyphens: auto;
	left: 50%;
	overflow-wrap: break-word;
	overflow: hidden;
	position: fixed;
	text-align: justify;
	text-overflow: clip;
	text-rendering: optimizeLegibility;
	-webkit-touch-callout: none;
	transform: translateX(-50%);
	transform-origin: center center;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	white-space: normal;
    word-break: break-word;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
	html {
		font-size: 2.5cqw;
		height: 100dvw;
		transform: translate(-50%, -50%) rotate(270deg);
	}
}

html article {
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

html aside {
	background: rgba(0, 0, 0, 0.975);
	border-right: 0.05rem solid rgba(255, 255, 255, 0.900);
	box-shadow: 0 0 0.8rem rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: calc(100% - 3.6rem);
	z-index: 2;
}

html body {
	height: 100%;
	width: 100%;
}

html button {
	background: rgba(0, 0, 0, 0.900);
	border: none;
	box-shadow: 0.04rem 0.04rem 0.08rem rgba(0, 0, 0, 0.900), -0.04rem -0.04rem 0.08rem rgba(255, 255, 255, 0.900);
	color: rgb(255, 255, 255);
	display: block;
	height: 2rem;
	margin: auto;
	width: 55%;
}

html dialog {
	background: rgba(0, 0, 0, 0.700);
	box-sizing: border-box;
	border: none;
	display: block;
	height: 100%;
	overflow: hidden;
	padding: 0;
	position: fixed;
	width: 100%;
	z-index: 3;
}

html footer {
	background: rgb(0, 0, 0);
	box-shadow: 0 0 0.8rem rgb(0, 0, 0);
	bottom: 0;
	height: 7.2rem;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 1;
}

html header {
	background: rgb(0, 0, 0);
	box-shadow: 0 0 0.8rem rgb(0, 0, 0);
	height: 2.8rem;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

html h1 {
	font-size: 1.4rem;
	margin: 0;
}

html h2 {
    font-size: 1.4rem;
	margin: 0;
}

html h3 {
	font-size: 1.4rem;
	margin: 0;
}

html h4 {
	font-size: 1.0rem;
	margin: 0;
}

html h5 {
	color: rgb(150, 150, 150);
	font-size: 1.0rem;
	margin: 0;
}

html h6 {
	color: rgb(150, 150, 150);
	font-size: 0.8rem;
	margin: 0;
}

html hr {
	background: rgba(255, 255, 255, 0.900);
	height: 0.05rem;
	border: none;
	margin: 0.8rem 0;
}

html img {
	display: block;
}

html input {
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
}

html label {
	display: block;
	font-size: 0.8rem;
	margin: 0 0 0.4rem;
}

html main {
	bottom: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

html ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

html p {
	font-size: 0.8rem;
	margin: 0;
}

html section {
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

html select {
	display: block;
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
}

html ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**********************************************/
/* BASE MODIFIERS */
/**********************************************/

html .container {
	background: rgba(0, 0, 0, 0.975);
	color: rgb(255, 255, 255);
	left: 50%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}

html .container .close {
	background: url('../images/UI/IconClose.webp') center center no-repeat;
	background-size: contain;
	height: 1.6rem;
	position: absolute;
	right: 0.8rem;
	top: 1rem;
	width: 1.6rem;
}

html .container .content {
	padding: 0 1.2rem 1.2rem;
}

html .container .content h2 {
	margin: 0.8rem 0;
}

html .container .content h2:has(+ h6) {
	margin: 0.8rem 0 0;
}

html .container .content h2 + h6 {
	margin: 0 0 0.8rem;
}

html .container .content h3 {
	margin: 0.8rem 0;
}

html .container .content h3:has(+ h6) {
	margin: 0.8rem 0 0;
}

html .container .content h3 + h6 {
	margin: 0 0 0.8rem;
}

html .container .content input:not(:last-child) {
	margin: 0 0 0.8rem;
}

html .container .content li:not(:last-child) {
	margin: 0 0 0.4rem;
}

html .container .content li li:not(:last-child) {
	margin: 0;
}

html .container .content p:not(:last-child) {
	margin: 0 0 0.8rem;
}

html .container .content select:not(:last-child) {
	margin: 0 0 0.8rem;
}

html .container .content li.item:not(:last-child) {
	margin: 0 0 0.8rem 0;
}

html .container .content li.item:not(:last-child) {
	margin: 0 0 0.8rem 0;
}

html .container .content li.skill:not(:last-child) {
	margin: 0 0 0.8rem 0;
}

html .container .content li.item img {
	float: left;
	height: 1.8rem;
	margin: 0.4rem 1.2rem 0 0;
	width: 1.8rem;
}

html .container .content li.skill img {
	float: left;
	height: 1.8rem;
	margin: 0.4rem 1.2rem 0 0;
	width: 1.8rem;
}

html .container .content span:not(:last-child) {
	margin: 0 0.4rem 0 0;
}

html .bright {
	color: rgb(255, 255, 0);
}

html .disabled {
	opacity: 0.25;
	pointer-events: none;
}

html .fx:not(.active) {
  	pointer-events: none;
}

html .fx.fade {
	transition: opacity 0.25s ease;
}

html .fx.fade:not(.active) {
	opacity: 0;
}

html .fx.slide {
	transition: transform 0.25s ease;
}

html .horizontal {
	overflow: hidden;
	text-align: center;
	width: 100%;
}

html .horizontal > * {
	display: inline-block;
}

html .horizontal > .left {
	float: left;
}

html .horizontal > .right {
	float: right;
}

html .horizontal button {
	width: 35%;
}

html .horizontal button:not(:last-child) {
	margin: 0 1.2rem 0 0;
}

html .italic {
	font-style: italic;
}

html .text {
	overflow: hidden;
}

html .vertical {
	overflow: hidden;
	text-align: center;
	width: 100%;
}

html .vertical > * {
	display: inline-block;
}

html .vertical button {
	width: 70%;
}

html .vertical input {
	width: 55%;
}

html .vertical select {
	width: 55%;
}

html .vertical.buttons:not(:empty) {
	margin: 0.8rem 0 0;
}

html aside:not(.active) {
	transform: translateX(calc(-100% - 0.85rem));
}

html button:active:not([disabled]) {
	box-shadow: inset 0.04rem 0.04rem 0.08rem rgba(0, 0, 0, 0.900), inset -0.04rem -0.04rem 0.08rem rgba(255, 255, 255, 0.900);
}

html button[disabled] {
	color: rgb(150, 150, 150);
}

html button.inverse {
	background: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}

html button.inverse[disabled] {
	color: rgb(150, 150, 150);
}

html dialog .container {
	border: 0.05rem solid rgba(255, 255, 255, 0.900);
	box-shadow: 0 0 0.8rem rgb(0, 0, 0);
	height: auto;
	max-height: calc(100% - 3.2rem);
	width: calc(100% - 3.2rem);
}

html dialog .container h6 {
	margin: 0.8rem 0 0;
}

html dialog .container .close {
	right: 0.4rem;
	top: 0.4rem;
}

html footer > div {
	border-top: 0.05rem solid rgba(255, 255, 255, 0.900);
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%
}

html footer:not(.active) {
	display: none;
}

html header > div {
	border-bottom: 0.05rem solid rgba(255, 255, 255, 0.900);
	height: 100%;
	overflow: hidden;
	padding: 0 0.8rem;
	position: absolute;
	width: 100%
}

html header h1 {
	float: left;
	height: 2rem;
	margin: 0.4rem 0.6rem;
}

html header:not(.active) {
	display: none;
}

html header.active + main {
	top: 2.8rem;
}

html input[type="range"] {
	padding: 0;
}

html main:has(+ footer.active) {
	bottom: 7.2rem;
}

/**********************************************/
/* SCREEN - MAIN */
/**********************************************/

/* ARTICLE */

#MainArticle {
	background: url('../images/UI/MainBackground.webp') center center no-repeat;
	background-color: rgb(0, 0, 0);
	background-size: cover;
}

#MainArticle button:not(:last-child) {
	margin: 0 auto 0.8rem;
}

#MainArticle #MainContentLogo {
	background: url('../images/UI/MainLogo.webp') center center no-repeat;
	background-size: contain;
	height: 14rem;
	margin: 1.6rem auto 3.2rem;
}

#MainArticle #MainContentDev {
	bottom: 1rem;
	left: 1.8rem;
	position: absolute;
}

#MainArticle #MainContentDev img {
	height: 2rem;
}

#MainArticle #MainContentMenu,
#MainArticle #MainContentMode {
	position: absolute;
	width: 100%;
}

#MainArticle #MainContentVersion {
	bottom: 1.2rem;
	font-size: 0.7rem;
	position: absolute;
	right: 1.8rem;
	text-shadow: 0 0 0.4rem rgb(0, 0, 0);
}

/**********************************************/
/* SCREEN - ARCHETYPE */
/**********************************************/

/* HEADER */

#ArchetypeHeader #ArchetypeButtonSettings {
	background: url('../images/UI/IconSettings.webp') center center no-repeat;
	background-size: contain;
	float: right;
	height: 1.6rem;
	margin: 0.6rem 0.4rem;
	width: 1.6rem;
}

/* ARTICLE */

#ArchetypeArticle {
	background: url('../images/UI/ArchetypeBackground.webp') center center no-repeat;
	background-color: rgb(0, 0, 0);
	background-size: cover;
}

#ArchetypeArticle #ArchetypeButtonInfo {
	background: url('../images/UI/IconInfo.webp') center center no-repeat;
	background-size: contain;
	height: 2.8rem;
	left: 50%;
	position: absolute;
	top: 1.2rem;
	transform: translateX(-50%);
	width: 2.8rem;
}

#ArchetypeArticle #ArchetypeButtonNext {
	background: url('../images/UI/IconArrowRight.webp') center center no-repeat;
	background-size: contain;
	height: 2.8rem;
	position: absolute;
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.8rem;
}

#ArchetypeArticle #ArchetypeButtonNext.active {
	pointer-events: none;
}

#ArchetypeArticle #ArchetypeButtonPrevious {
	background: url('../images/UI/IconArrowLeft.webp') center center no-repeat;
	background-size: contain;
	height: 2.8rem;
	left: 1.2rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.8rem;
}

#ArchetypeArticle #ArchetypeButtonPrevious.active {
	pointer-events: none;
}

#ArchetypeArticle #ArchetypeListGenders {
	bottom: 1.2rem;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

#ArchetypeArticle #ArchetypeListGenders li {
	float: left;
	height: 2.8rem;
	width: 2.8rem;
}

#ArchetypeArticle #ArchetypeListGenders li:not(:last-child) {
	margin: 0 1.2rem 0 0;
}

#ArchetypeArticle #ArchetypeListGenders li:not(.active) {
	opacity: 0.5;
	pointer-events: inherit;
}

#ArchetypeArticle #ArchetypeListGenders #ArchetypeItemGenderFemale {
	background: url('../images/UI/IconGenderFemale.webp') center center no-repeat;
	background-size: contain;
}

#ArchetypeArticle #ArchetypeListGenders #ArchetypeItemGenderMale {
	background: url('../images/UI/IconGenderMale.webp') center center no-repeat;
	background-size: contain;
}

#ArchetypeArticle #ArchetypeList {
	height: 100%;
	position: absolute;
	width: 100%;
}

#ArchetypeArticle #ArchetypeList li {
	height: 100%;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 100%;
}

#ArchetypeArticle #ArchetypeList li.fx.fade {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#ArchetypeArticle #ArchetypeList li:not(.active) + li:has(+ li:not(.active)) {
	opacity: 1;
}

#ArchetypeArticle #ArchetypeList li.active + li:not(.active) {
	transform: translateX(-38%);
}

#ArchetypeArticle #ArchetypeList li:not(.active):has(+ li.active) {
	transform: translateX(-62%);
}

#ArchetypeArticle #ArchetypeList li:first-child:not(.active),
#ArchetypeArticle #ArchetypeList li:not(:first-child):not(:last-child).active,
#ArchetypeArticle #ArchetypeList li:last-child:not(.active) {
	transition: opacity 0.001s step-start;
}

#ArchetypeArticle #ArchetypeList li img {
	height: 100%;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

#ArchetypeArticle #ArchetypeList li img.active {
	transition: opacity 0.25s ease 0.25s;
}

/* FOOTER */

#ArchetypeFooter .buttons {
	margin: 2.6rem 0;
}

#ArchetypeFooter .input {
	margin: 1.2rem 0;
}

#ArchetypeFooter .input + .buttons {
	margin: 1.2rem 0;
}

/**********************************************/
/* SCREEN - SCENE */
/**********************************************/

/* HEADER */

#SceneHeader ul {
	float: left;
	margin: 0.6rem 0.4rem;
	overflow: hidden;
}

#SceneHeader ul li {
	float: left;
	height: 1.6rem;
	transition: opacity 0.25s ease;
	width: 1.6rem;
}

#SceneHeader ul li:not(:last-child) {
	margin: 0 0.8rem 0 0;
}

#SceneHeader ul li:not(.active) {
	opacity: 0.5;
	pointer-events: inherit;
}

#SceneHeader #SceneItemBackpack {
	background: url('../images/UI/IconBackpack.webp') center center no-repeat;
	background-size: contain;
}

#SceneHeader #SceneItemCharacter {
	background: url('../images/UI/IconCharacter.webp') center center no-repeat;
	background-size: contain;
}

#SceneHeader #SceneItemFlashlight {
	background: url('../images/UI/IconFlashlight.webp') center center no-repeat;
	background-size: contain;
}

#SceneHeader #SceneButtonSettings {
	background: url('../images/UI/IconSettings.webp') center center no-repeat;
	background-size: contain;
	float: right;
	height: 1.6rem;
	margin: 0.6rem 0.4rem;
	width: 1.6rem;
}

/* ARTICLE */

#SceneArticle {
	background: url('../images/UI/MainBackground.webp') center center no-repeat;
	background-color: rgb(0, 0, 0);
	background-size: cover;
}

/**********************************************/
/* SCREEN - SPLASH */
/**********************************************/

/* ARTICLE */

#SplashArticle {
	background: rgb(255, 255, 255);
}

#SplashArticle #SplashSectionDev {
	background: url('../images/UI/SplashDev.webp') center center no-repeat;
	background-size: contain;
	width: 80%;
}

#SplashArticle #SplashSectionEngine {
	background: url('../images/UI/SplashEngine.webp') center center no-repeat;
	background-size: contain;
	width: 80%;
}

/**********************************************/
/* ASIDE - CHARACTER */
/**********************************************/

/* ASIDE */