:root {
	color-scheme: dark;
}

html,
body {
	background: #121212;
}

#status {
	background: #121212;
	box-sizing: border-box;
	color: #f5f5f5;
	font-family: Arial, sans-serif;
	gap: clamp(14px, 3vh, 24px);
	padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

#status::before {
	color: #f5f5f5;
	content: "SUPER CARTRIDGE";
	font-size: clamp(24px, 7vw, 42px);
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1;
	order: 1;
	text-align: center;
	text-shadow: 0 4px 0 #080808;
}

#status-splash {
	animation: sc-splash-bob 1.8s ease-in-out infinite;
	filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.32));
	height: auto;
	max-height: 44vh;
	max-width: min(68vw, 300px);
	order: 2;
	position: static;
	width: min(68vw, 300px);
}

#status-progress {
	appearance: none;
	background: #202020;
	border: 3px solid #3d3d3d;
	border-radius: 999px;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.26);
	height: 14px;
	margin: 0;
	order: 3;
	overflow: hidden;
	position: static;
	width: min(78vw, 360px);
}

#status-progress::-webkit-progress-bar {
	background: #202020;
	border-radius: 999px;
}

#status-progress::-webkit-progress-value {
	background: #e6b450;
	border-radius: 999px;
	transition: width 160ms ease-out;
}

#status-progress::-moz-progress-bar {
	background: #e6b450;
	border-radius: 999px;
}

#status::after {
	color: #c4c4c4;
	content: "13 GAMES  •  PLAY OFFLINE";
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	order: 4;
	text-align: center;
}

#status-notice {
	background: #202020;
	border: 3px solid #3d3d3d;
	border-radius: 14px;
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
	color: #f5f5f5;
	font-family: Arial, sans-serif;
	order: 5;
}

@keyframes sc-splash-bob {
	0%,
	100% {
		transform: translateY(0) rotate(-1deg);
	}
	50% {
		transform: translateY(-7px) rotate(1deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	#status-splash {
		animation: none;
	}
}