html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	
	background: #000000;
	color: white;
}
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
	z-index: 9999;
}

#loading-screen::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at 30% 50%, rgba(72, 50, 120, 0.15) 0%, transparent 50%),
	            radial-gradient(circle at 70% 50%, rgba(100, 50, 180, 0.1) 0%, transparent 50%);
	animation: bgShift 8s ease-in-out infinite alternate;
}

@keyframes bgShift {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(-2%, -2%) rotate(3deg); }
}

#loading-text {
	position: relative;
	font-family: 'montserrat-extrabold', sans-serif;
	font-size: 3em;
	color: #ffffff;
	letter-spacing: 0.08em;
	text-shadow: 0 0 30px rgba(100, 80, 200, 0.4);
}

#loading-text span {
	display: inline-block;
	animation: letterPop 2s ease-in-out infinite;
}

#loading-text span:nth-child(1) { animation-delay: 0s; }
#loading-text span:nth-child(2) { animation-delay: 0.1s; }
#loading-text span:nth-child(3) { animation-delay: 0.2s; }
#loading-text span:nth-child(4) { animation-delay: 0.3s; }
#loading-text span:nth-child(5) { animation-delay: 0.4s; }
#loading-text span:nth-child(6) { animation-delay: 0.5s; }
#loading-text span:nth-child(7) { animation-delay: 0.6s; }
#loading-text span:nth-child(8) { animation-delay: 0.7s; }
#loading-text span:nth-child(9) { animation-delay: 0.8s; }

@keyframes letterPop {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(-8px); opacity: 1; }
}

#loading-bar-wrap {
	position: relative;
	width: 200px;
	height: 3px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	margin-top: 2em;
	overflow: hidden;
}

#loading-bar {
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, #6c63ff, #a78bfa);
	border-radius: 2px;
	animation: barMove 1.5s ease-in-out infinite;
}

@keyframes barMove {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}
}

html, body, canvas {
	touch-action: none;
	touch-action-delay: none;
}

#notSupportedWrap {
	margin: 2em auto 1em auto;
	width: 75%;
	max-width: 45em;
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 2em;
	background-color: #f0f0f0;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	color: black;
}

#notSupportedTitle {
	font-size: 1.8em;
}

.notSupportedMessage {
	font-size: 1.2em;
}

.notSupportedMessage em {
	color: #888;
}


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

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

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

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

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

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