/* 2026 • ASKIR Games® • All Right Seserved */

@font-face {
	font-family: 'Main';
	src: url('../fonts/main.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {

	/* Background Image */
	background-image: url('../IMG/back.png');

	/* Repeat Bckground */
	background-repeat: repeat;

	/* Fixed Background */
	background-attachment: fixed;

	/* Set Size Background */
	background-size: 200px auto;

	width: 100% !important;

	margin: 0;

	padding: 0;
}

* {

	box-sizing: border-box;

	margin: 0;

	padding: 0;
}

/****************************************************************************/
/****************************************************************************/



/****************************************************************************/
/****************************************************************************/

.DIV_HEADER {

	width: 100%;

	height: 60px;

	position: fixed;

	top: var(--tg-safe-area-inset-top, 0px);

	left: 0;

	background-color: none;

	display: flex;

	justify-content: center;

	align-items: center;
}

.IMG_LOGO {

	height: 60px;

	width: auto;

	position : center;
}

.DIV_CONTENT {

	position: fixed;

	height: calc(100% - 60px);

	width: 100%;

	max-width: 600px;

	margin-top: calc(var(--tg-safe-area-inset-top, 0px) + 60px);

	left: 50%;

	transform: translateX(-50%);

	overflow-y: auto;

	scrollbar-width: none;

}

.DIV_CONTENT::-webkit-scrollbar {

	display: none;
}

.DIV_USER_PROFILE {

	height: 100px;

	width: calc(100% - 20px);

	position: relative;

	left: 10px;

}

.IMG_TG_USER_PIC {

	height: 100px;

	width: 100px;

	border-radius : 50px;
}

.DIV_TG_USER_MAIN {

	height: 100px;

	width: calc(100% - 110px);

	position: relative;

	left: 110px;

	background-color: rgba(120, 120, 120, 0.3);

	transform: translateY(-100%);

	border-radius: 6px;

	display: flex;

	justify-content: space-around;

	align-items: center;

	flex-direction : column;
}

.DIV_TG_USER_DATA_BLOCK {

	background-color: rgba(30, 30, 30, 0.6);

	width : calc(100% - 10px);

	height: 20px;

	left : 5px;

	top : 5px;

	border-radius: 3px;
}

.TEXT_MAIN {

	font-family : Main;

	color : white;

	font-size : 18px;

	display: flex;

	justify-content: center;

	align-items: center;

}

.DIV_PROMO_SCREEN {

	background-color: burlywood;

	width : calc(100% - 20px);

	max-width : 580px;

	aspect-ratio : 16/9;

	position : relative;

	left : 10px;

	top : 10px;

	border-radius: 10px
}

.DIV_USER_INVENTORY {

	background-color: burlywood;

	width : calc(100% - 20px);

	max-width : 580px;

	height : 580px;

	position : relative;

	left : 10px;

	top : 20px;

	border-radius: 10px;

	background-color: rgba(120, 120, 120, 0.3);

}

.DIV_INVENTORY_LABLE {

	background-color: rgba(30, 30, 30, 0.6);

	width : calc(100% - 10px);

	height: 70px;

	position : relative;

	left : 5px;

	top : 5px;

	display : flex;

	justify-content: center;

	align-items: center;

	border-radius : 5px;
}

.LABLE {

	font-size : 50px;

}

.DIV_EMPTY_INVENTORY {

	position : relative;

	width : 100%;

	height : calc(100% - 80px);

	display : flex;

	justify-content: center;

	align-items: center;

	flex-direction : column;

	gap: 20px;
}

.IMG_EPMTY {
	width: 150px;
	height: auto;
}

.DIV_CONTROLL_PANEL_BLOCK {

	position : relative;

	width : 100%;

	height : 100px;

	max-width : 600px;

	bottom : 0px;

	left : 0px;

}

.DIV_CONTROLL_PANEL {

	position : fixed;

	width : 100%;

	height : 80px;

	max-width : 600px;

	bottom : 0px;

	left : 0px;

	left: 50%;

	transform: translateX(-50%);

	display : flex;

	justify-content: center;

	align-items: center;

}

.DIV_MAIN_PANNEL {

	width : calc(100% - 20px);

	height : 60px;

	background-color: rgba(120, 120, 120, 0.3);

	border-radius : 30px;

	display : flex;

	justify-content: space-between;

	align-items: center;

}

.NAV_BUTTON {

	width: 60px;

	height: 60px;

	border: none;

	border-radius: 10px;

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 0;

	-webkit-appearance: none;

    appearance: none;

	overflow: hidden;

	background : none;

}

.NAV_BUTTON:nth-child(3) {

	border-radius: 30px;

	width: 50px;

	height: 50px;

}

.NAV_BUTTON img:nth-child(3) {

	width: 50px;

	height: 50px;

	object-fit: cover;

}
	
.NAV_BUTTON img {

	width: 60px;

	height: 60px;

	object-fit: cover;

}