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

.LW-preloader 
{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #000;
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	align-items: center;
	z-index: 999999999999999999999999999;
}
#quibble-splash
{
	width: 100px;
	height: 100px;
	background-image: url('/favicon.png');
	background-position: center;
	background-size: contain;
}
.pxn {
	width: 275px;
	height: 5px;
	background-color: #C0C0C038;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	animation: fillFrame 15s ease-in-out forwards;
}

.pxn-bar {
	height: 5px;
	background-color: goldenrod;
	width: 0;
	animation: fillProgress 15s ease-in-out forwards;
}

@keyframes fillProgress {
	0% {
		width: 0;
		opacity: 0;
		box-shadow: 0 0 0px goldenrod;
	}
  
	12% {
		width: 45px;
		opacity: 0.6;
		box-shadow: 0 0 4px goldenrod;
	}
  
	18% {
		width: 43px;
		opacity: 0.7;
		box-shadow: 0 0 6px goldenrod;
	}
  
	24% {
		width: 46px;
		opacity: 0.8;
		box-shadow: 0 0 5px goldenrod;
	}
  
	30% {
		width: 90px;
		opacity: 0.85;
		box-shadow: 0 0 6px goldenrod;
	}
  
	38% {
		width: 100px;
		opacity: 0.88;
		box-shadow: 0 0 5px goldenrod;
	}
  
	52% {
		width: 140px;
		opacity: 0.9;
		box-shadow: 0 0 7px goldenrod;
	}
  
	58% {
		width: 136px;
		opacity: 0.92;
		box-shadow: 0 0 6px goldenrod;
	}
  
	63% {
		width: 140px;
		opacity: 0.94;
		box-shadow: 0 0 7px goldenrod;
	}
  
	70% {
		width: 180px;
		opacity: 0.96;
		box-shadow: 0 0 8px goldenrod;
	}
  
	78% {
		width: 210px;
		opacity: 0.98;
		box-shadow: 0 0 10px goldenrod;
	}
  
	81% {
		width: 213px;
		opacity: 0.98;
		box-shadow: 0 0 12px goldenrod;
	}
  
	85% {
		width: 210px;
		opacity: 0.99;
		box-shadow: 0 0 10px goldenrod;
	}
	
	95% {
		display: block;
	}
	100% {
		display: none;
	  	width: 270px;
	  	opacity: 1;
	  	box-shadow: 0 0 15px goldenrod;
	}
}

@keyframes fillFrame {
	0%{
		display: block;
	}
	95% {
		display: block;
	}
	100% {
		display: none;
	}
}

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

/* generic game loadscreen */
.game-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 10, 0.85);
	color: white;
	font-family: nunito;
	z-index: 9999999999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.bouncy-dots span {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background: white;
	border-radius: 50%;
	animation: bounce 1.4s infinite ease-in-out both;
}
  
.bouncy-dots span:nth-child(1) { animation-delay: -0.32s; }
.bouncy-dots span:nth-child(2) { animation-delay: -0.16s; }
  
@keyframes bounce {
	0%, 80%, 100% { transform: scale(0); }
	40% { transform: scale(1); }
}

.in-game{
	display: none;
	/* display: flex; */
}

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

.slow-network-prompt
{
	transition: opacity 0.5s ease-in-out;
}
.show-slow-prompt
{
	animation: showSlowPrompt 10s linear 0.1s 1 normal forwards;
}

@keyframes showSlowPrompt{
	0%{
		display: none;
		opacity: 0;
	}
	49%{
		opacity: 0;
		display: none;
	}
	50% {
		opacity: 1;
		display: block;
	}
	100%{
		opacity: 1;
		display: block;
	}
}

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

#spinner {
	width: 50px;
	height: 50px;
	border: 5px solid rgba(255, 215, 0, 0.2);
	border-top-color: gold;

	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* ////////////////////////////////// */