body.landing {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background: var(--main-bg);
}

body.landing img {
	max-width: 400px;
	width: 100%;
	height: auto;
}
:root {
	--main-bg: #ececec;
}
#global-reset, * { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body { padding: 0; margin: 0; overflow: hidden; }
#page-wrapper { display:flex; justify-content:flex-start; align-items:center; flex-direction:column; height:100vh; padding-top:12px; max-width:100%; box-sizing: border-box; }
#hyper-container { position: relative; display:flex; flex-direction:column; align-items:center; margin-bottom: 12px; }
#hyper-container.hyper-mobile { position: fixed; width: 100%; height: 100% }
#hyper-canvas { background: var(--main-bg); display:block; max-width:100%; height:auto; }
.hyper-mobile #hyper-canvas { width: 100%; height: 100% }
#hyper-loading-bar {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

.hyper-loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#hyper-logo {
	width: 308px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	margin-bottom: 8px;
}

#hyper-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.simple-loading-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #ef7023 0%, #f4d002 100%);
	/* border-radius: 6px 0 0 6px; */
	transition: width 0.3s ease;
}

.simple-loading-bar {
	width: 308px;
	height: 8px;
	background: #7b7b7b;
	/* border-radius: 6px; */
	overflow: hidden;
	margin: 12px auto 0 auto;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

#hyper-footer {
	position: relative; /* sit under the canvas in the document flow */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 0 12px 0; /* tighter padding */
	background: transparent;
	margin-top: 6px; /* smaller space between canvas and footer */
}
.hyper-mobile #hyper-footer { display: none }

/* Hide footer when container switches to mobile mode (class added by JS). Also provide a viewport fallback. */
#hyper-container.hyper-mobile ~ #hyper-footer { display: none; }

@media (max-width: 768px) {
	#hyper-footer { display: none; }
}

body.hyper-mobile #hyper-footer { display: none !important; }

#hyper-logo-title-footer {
	width: 40%; /* relative by default, JS adjusts to match canvas */
	max-width: 360px;
	min-width: 120px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}

#hyper-logo-title-footer img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

#hyper-build-title { display: none }
#hyper-fullscreen-button { display: none }
#hyper-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }