/* -----------------------------------[ DEBUG ]--------------------------------------- */
/*! #debug */
.debug-button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 150px;
	height: 50px;
	background-color: rgb(50, 136, 185);
	background-image: linear-gradient(to bottom right, #00000028, #00000083);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}
#inner-size {
	position: absolute;
	border: 1px solid rgba(128, 128, 128, 0.486);
	text-align: center;
	margin: 10px;
	padding: 2px;
	font-family: "Courier New", Courier, monospace;
	font-size: 3vw;
	background-color: rgba(238, 238, 238, 0.2);
	font-weight: bold;
	color: rgba(0, 0, 0, 0.377);
}
/*! #/debug */

/* ----------------------------------------------------------------------------------- */
@viewport {
	width: device-width;
}

#top-panel {
	position: fixed;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
	/*flex-wrap: nowrap;*/

	/*flex-wrap: wrap;*/
	background-image: linear-gradient(to bottom, #06455c, #033649);
	border-radius: 2.5vh;
	border: 2px solid rgb(0, 117, 133);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	padding: 10px;
	/* line-height: 10px; */

	font-size: 0.7em;
	color: rgb(175, 175, 175);
	line-height: 1.0em;
}

#game-stat {
	text-align: center;
	margin-bottom: 0.3em;
}

#last-guessed-word-panel {
	font-size: 0.85em;
	color: white;
	text-align: center;
}

#last-guessed-word {
	color: yellow;
	font-weight: bold;
	font-size: 1.5em;
}

#coinsbar {
	z-index: 1;
	position: fixed;
	display: none;
	/* display: flex; */
	justify-content: center;
	/* align-items: center; */
	/* align-content: center; */
	border: calc( var( --min-axis-size ) * 0.006 ) solid rgb(100, 163, 172);
	border-radius: 2.5vh;
	background-color: #033649;
	color: white;
	line-height: 1.5em;
}

#word-list {
	position: fixed;
	display: flex;
	justify-content: center;

	/* align-content: flex-start; */
	align-content: center;
	align-items: flex-start;

	flex-wrap: wrap;
	background-image: linear-gradient(to bottom, #06455c, #033649);
	border-radius: 2.5vh;
	border: 2px solid rgb(0, 117, 133);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	/* left: 1.5vw; */
	/* top: calc(97vh - (90vw * 0.55) - 90vw * 1 - 1vh); */
	/* width: 96vw; */
	/* height: calc(50vw * 1); */
	box-sizing: border-box;
	padding: 10px;
	/* line-height: 10px; */
}

#word-list > div {
	display: flex;
	/* justify-content: center; */
	/* align-items: flex-start; */
	align-items: center;
	box-sizing: border-box;
	font-size: 40%;
	font-weight: bold;
	color: rgb(202, 202, 202);
	/* border: 1px solid white; */
	border-bottom: 1px dotted rgba(155, 155, 155, 0.568);
	cursor: pointer;
}

#chars-panel {
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* align-content: center; */
	/* flex-wrap: wrap; */
	background-image: linear-gradient(to bottom, #06455c, #033649);
	border-radius: 2.5vh;
	border: 2px solid rgb(0, 117, 133);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	/* left: 1.5vw;
	top: calc(97vh - (90vw * 0.55));
	width: 96vw;
	height: calc(90vw * 0.55); */
	box-sizing: border-box;
}

#user-answer {
	display: flex;
	/* background-color: blue; */
	width: 94%;
	height: 23%;
	margin-bottom: 0.5vh;
}
#user-answer__remove-all-chars {
	/* background-color: rgb(253, 105, 105); */
	background-image: linear-gradient(to bottom, #da6464, #af4f4f);
	width: 14%;
	min-width: 14%;
	max-width: 14%;
	height: 100%;
	cursor: poiner;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15%;
	color: rgb(255, 166, 166);
	cursor: pointer;
	font-size: 60%;
}
#user-answer__text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 80%;
	letter-spacing: 0.3rem;
	/* line-height: 75%; */
	font-weight: bold;
	color: rgb(255, 238, 87);
	text-shadow: 1px 2px 2px black;
	text-align: center;
	line-height: 0.8em;
}
#user-answer__remove-last-char {
	/* background-color: green; */
	background-image: linear-gradient(to bottom, #da6464, #af4f4f);
	width: 14%;
	min-width: 14%;
	max-width: 14%;
	height: 100%;
	display: flex;
	justify-content: center;
	/* align-items: center; */
	border-radius: 15%;
	color: rgb(255, 166, 166);
	cursor: pointer;
	font-size: 80%;
	line-height: 0.95em;
}

#source-chars {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	/* background-color: yellow; */
	width: 100%;
	height: 70%;
}
#source-chars > div {
	display: flex;
	justify-content: center;
	/* align-items: center; */
	background-image: linear-gradient(to bottom, #4ccf2c, #37960b);
	border-radius: 2vw;
	border: 2px solid green;
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	margin: 0.6%;
	font-size: 100%;
	font-weight: bold;
	color: white;
	text-shadow: 1px 2px 2px black;
	width: 14%;
	height: 45%;
	cursor: pointer;
}

.source-char__removed {
	background-image: linear-gradient(to bottom, #4dcf2c2a, #37960b25) !important;
	border: 2px solid rgba(89, 143, 46, 0.233) !important;
}

#pager {
	position: fixed;
	text-align: center;
	z-index: 10;
	/* background-color: blue; */
	font-size: 0px;
}
.circle {
	display: inline-block;
	background-color: rgba(184, 184, 184, 0.651);
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid rgba(255, 255, 255, 0.507);
}
.circle-active {
	background-color: rgba(255, 102, 0, 0.719);
}

#nav-button-prev {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 150px;
	height: 50px;
	background-color: rgb(50, 136, 185);
	background-image: linear-gradient(to bottom right, #00000028, #00000083);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	font-size: 5vh;
	left: 180px;
	top: 60px;
	background-color: rgb(0, 255, 191);
}

#nav-button-next {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 150px;
	height: 50px;
	background-color: rgb(50, 136, 185);
	background-image: linear-gradient(to bottom right, #00000028, #00000083);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	font-size: 5vh;
	left: 180px;
	top: 60px;
	background-color: rgb(0, 255, 191);
}


/* --------------------[ INDEXPAGE SCENE ]----------------------- */
#indexpage_scene {
	z-index: 2;
	position: absolute;
	display: none;
	/* display: flex; */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/* background-color: rgba(226, 110, 255, 0.7); */
	/* mix-blend-mode: overlay; */
}
@media ( orientation: portrait ) {
	#indexpage_scene .body {
		width: calc( var( --screen-width ) * 0.92 );
		margin-top: calc( var( --min-axis-size ) * 0.02 );
		margin-bottom: calc( var( --min-axis-size ) * 0.02 );
	}
}
@media ( orientation: landscape ) {
	#indexpage_scene .body {
		width: calc( var( --screen-width ) * 0.8 );
		margin-top: calc( var( --min-axis-size ) * 0.02 );
		margin-bottom: calc( var( --min-axis-size ) * 0.02 );
	}
}
#indexpage_scene .subtitle {
	color: white;
	font-size: calc( var( --min-axis-size ) * 0.08 );
	font-weight: bold;
	text-align: center;
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) black;
}
#indexpage_scene .description {
	color: white;
	font-size: calc( var( --min-axis-size ) * 0.05 );
	line-height: 0.8em;
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) black;
}
.indexpage_startgame_btn {
	--w: calc( var( --min-axis-size ) * 0.65 );
	--h: calc( var( --w ) * 0.2 );
	width: var( --w );
	height: var( --h );
	margin-top: calc( var( --min-axis-size ) * 0.025 );
	font-size: calc( var( --h ) * 0.5 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(255, 255, 255);
	border-radius: calc( var( --w ) * 0.4 );
	color: white;
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) rgba(0, 0, 0, 0.432);
	text-align: center;
	line-height: 1.43em;
	cursor: pointer;
}
#indexpage_singleplayer_btn {
	background-image: linear-gradient(to bottom, #47e04f, #669200);
}
#indexpage_multiplayer_btn {
	background-image: linear-gradient(to bottom, #57a1e6, #6831b1);
}



/* --------------------[ MULTIPLAYER SCENE ]----------------------- */
#multiplayer_scene {
	z-index: 3;
	position: absolute;
	display: none;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.7); */
}
#multiplayer_dialog {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: calc( var( --min-axis-size ) * 0.7 );
	/* height: calc( var( --min-axis-size ) * 0.5 ); */
	background-image: linear-gradient(to bottom, #176a88, #084e68);
	border-radius: calc( var( --min-axis-size ) * 0.03 );
	border: calc( var( --min-axis-size ) * 0.004 ) solid rgb(14, 120, 134);
	box-shadow: inset calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.08 ) rgba(0, 0, 0, 0.3);
	padding-top: calc( var( --min-axis-size ) * 0.04 );
	padding-bottom: calc( var( --min-axis-size ) * 0.02 );
	box-shadow: calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.04 ) rgba(0, 0, 0, 0.644);
}
#multiplayer_title {
	position: absolute;
	display: flex;
	justify-content: center;
	/* align-items: center; */
	width: 65%;
	--h: calc( var( --min-axis-size ) * 0.09 );
	top: calc( -1.0 * var( --h ) * 0.6 );
	height: var( --h );
	border: calc( var( --min-axis-size ) * 0.0025 ) solid white;
	border-radius: calc( var( --min-axis-size ) * 0.05 );
	/* font-size: calc( var( --min-axis-size ) * 0.02 ); */
	font-size: calc( var( --h ) * 0.7 );
	color: white;
	line-height: 1.1em;
	background-image: linear-gradient(to bottom, #06455c, #033649);
	box-shadow: inset calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.008 ) calc( var( --min-axis-size ) * 0.08 ) rgba(0, 0, 0, 0.3);
}
#multiplayer_body {
	/*
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%; */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* border: 2px solid blue; */

}
.multiplayer_playername_item {
	display: flex;
	justify-content: center;
	align-items: center;
	/* align-items: center; */
	flex-direction: row;
	/* border: 2px solid lime; */
	margin-top: calc( var( --min-axis-size ) * 0.01 );
	margin-bottom: calc( var( --min-axis-size ) * 0.01 );
}
.playername_input {
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(121, 93, 245);
	border-radius: calc( var( --min-axis-size ) * 0.05 );
	text-align: center;
	--h: calc( var( --min-axis-size ) * 0.09 );
	height: var( --h );
	width: 65%;
	font-size: calc( var( --h ) * 0.65 );
	font-family: Font0, Arial, Helvetica, Verdana, sans-serif;
	padding-bottom: calc( var( --h ) * 0.2 );
	color: rgb(50, 136, 185);
	caret-color: rgb(111, 0, 255);
	text-shadow: calc( var( --min-axis-size ) * 0.002 ) calc( var( --min-axis-size ) * 0.002 ) calc( var( --min-axis-size ) * 0.002*0 ) rgba(0, 0, 0, 0.1);
}
.playername_remove_btn {
	--w: calc( var( --min-axis-size ) * 0.08 );
	width: var( --w );
	height: var( --w );
	font-size: calc( var( --w ) * 0.65 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(255, 126, 126);
	border-radius: calc( var( --min-axis-size ) * 0.03 );
	color: rgb(255, 166, 166);
	background-image: linear-gradient(to bottom, #da6464, #af4f4f);
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) rgba(0, 0, 0, 0.432);
	text-align: center;
	line-height: 1.0em;
	cursor: pointer;
	margin-left: calc( var( --w ) * 0.2 );
}
#multiplayer_addplayer_btn {
	--w: calc( var( --min-axis-size ) * 0.085 );
	width: var( --w );
	height: var( --w );
	font-size: calc( var( --w ) * 1.0 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(255, 255, 255);
	border-radius: 50%;
	color: white;
	background-image: linear-gradient(to bottom, #85da64, #57af4f);
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) rgba(0, 0, 0, 0.432);
	text-align: center;
	line-height: 0.64em;
	cursor: pointer;
}
#multiplayer_continuegame {
	display: none;
	/* display: block; */
	position: absolute;
	background-color: rgba(0, 0, 0, 0.6);
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	border-radius: calc( var( --min-axis-size ) * 0.02 );
}
#multiplayer_continue_laststat {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: calc( var( --min-axis-size ) * 0.15 );
	font-size: calc( var( --min-axis-size ) * 0.05 );
	line-height: 0.8em;
}
#multiplayer_continue_btn {
	position: absolute;
	--w: calc( var( --min-axis-size ) * 0.45 );
	--h: calc( var( --w ) * 0.25 );
	width: var( --w );
	height: var( --h );
	left: calc( 50% - ( var( --w ) * 0.5 ) );
	bottom: calc( var( --h ) * 0.2 );
	font-size: calc( var( --w ) * 0.15 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(255, 255, 255);
	border-radius: calc( var( --w ) * 0.4 );
	color: white;
	background-image: linear-gradient(to bottom, #85da64, #57af4f);
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) rgba(0, 0, 0, 0.432);
	text-align: center;
	line-height: 1.15em;
	cursor: pointer;
}
#multiplayer_newgame_btn {
	margin-top: calc( var( --min-axis-size ) * 0.025 );
	--w: calc( var( --min-axis-size ) * 0.45 );
	--h: calc( var( --w ) * 0.25 );
	width: var( --w );
	height: var( --h );
	font-size: calc( var( --w ) * 0.15 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgb(255, 255, 255);
	border-radius: calc( var( --w ) * 0.4 );
	color: white;
	background-image: linear-gradient(to bottom, #daa364, #af7a4f);
	text-shadow: calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.003 ) calc( var( --min-axis-size ) * 0.004 ) rgba(0, 0, 0, 0.432);
	text-align: center;
	line-height: 1.15em;
	cursor: pointer;
}