perf: make module loading synchronous, flip right panel layout

- Remove unnecessary async/await from loadModules (static imports)
- Move game controls to top of right panel
- Move preview header below controls, above preview
- Flip inset shadow to top of preview section

src/app.js

@@ -115,7 +115,7 @@ function toggleExpectedResult() {
 
 // ================= LANGUAGE TOGGLE =================
 
-async function toggleLanguage() {
+function toggleLanguage() {
 	const currentLang = getLanguage();
 	const newLang = currentLang === "en" ? "de" : "en";
 
@@ -130,7 +130,7 @@ async function toggleLanguage() {
 	const currentModuleId = engineState.module?.id;
 	const currentLessonIndex = engineState.lessonIndex;
 
-	const modules = await loadModules(newLang);
+	const modules = loadModules(newLang);
 	lessonEngine.setModules(modules);
 	renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
 
@@ -261,9 +261,9 @@ function clearLoadingTimeout() {
 	}
 }
 
-async function initializeModules() {
+function initializeModules() {
 	try {
-		const modules = await loadModules(getLanguage());
+		const modules = loadModules(getLanguage());
 		lessonEngine.setModules(modules);
 
 		// Use the new renderModuleList function with both callbacks
@@ -684,7 +684,7 @@ function init() {
 	loadingTimeout = setTimeout(showLoadingFallback, 3000);
 
 	// Load modules after editor is ready
-	initializeModules().catch(console.error);
+	initializeModules();
 
 	// Sidebar controls
 	elements.menuBtn.addEventListener("click", openSidebar);

src/config/lessons.js

@@ -86,9 +86,9 @@ const moduleStoreDE = [
 /**
  * Load all available modules for a given language
  * @param {string} language - Language code ('en' or 'de')
- * @returns {Promise<Array>} Promise resolving to array of modules
+ * @returns {Array} Array of modules
  */
-export async function loadModules(language = "en") {
+export function loadModules(language = "en") {
 	const store = language === "de" ? moduleStoreDE : moduleStoreEN;
 	return store.map((module) => ({
 		...module,

src/index.html

@@ -60,18 +60,6 @@
 
 				<!-- Right Panel: Preview + Navigation -->
 				<div class="right-panel">
-					<div class="preview-section">
-						<div class="preview-wrapper">
-							<div class="preview-frame" id="preview-area"></div>
-							<div class="expected-overlay" id="expected-overlay">
-								<div class="expected-frame" id="preview-expected"></div>
-							</div>
-						</div>
-						<div class="preview-header">
-							<span class="preview-label" data-i18n="yourOutput">Your Output</span>
-							<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
-						</div>
-					</div>
 					<div class="game-controls">
 						<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
 						<span class="module-pill" id="module-pill">
@@ -80,6 +68,18 @@
 						</span>
 						<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
 					</div>
+					<div class="preview-section">
+						<div class="preview-header">
+							<span class="preview-label" data-i18n="yourOutput">Your Output</span>
+							<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
+						</div>
+						<div class="preview-wrapper">
+							<div class="preview-frame" id="preview-area"></div>
+							<div class="expected-overlay" id="expected-overlay">
+								<div class="expected-frame" id="preview-expected"></div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</main>
 

src/main.css

@@ -496,7 +496,7 @@ code, kbd {
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
-	box-shadow: inset 0 -40px 30px -30px rgba(0, 0, 0, 0.08);
+	box-shadow: inset 0 40px 30px -30px rgba(0, 0, 0, 0.08);
 }
 
 .preview-header {
@@ -607,7 +607,7 @@ code, kbd {
 	align-items: center;
 	padding: var(--spacing-md);
 	background: var(--panel-bg);
-	border-top: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
 }
 
 /* ================= SIDEBAR ================= */