From 05be868ec2a3d87e66bc8d7ab06146d33c5ca760 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 19:51:05 +0100
Subject: [PATCH] style: move module pill to nav bar with lesson counter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Module pill now in game-controls between prev/next buttons
- Level indicator (e.g. "1 of 3") inside the pill
- Updated pill styling for nav bar context

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/index.html |  6 ++++--
 src/main.css   | 26 +++++++++++++++-----------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/index.html b/src/index.html
index 7aef829..89ce972 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,7 +31,6 @@
 				<div class="left-panel">
 					<section class="instructions">
 						<h2 id="lesson-title" data-i18n="loading">Loading...</h2>
-						<span class="module-pill" id="module-pill" data-i18n="loading">Loading...</span>
 						<div class="task-instruction" id="task-instruction"></div>
 						<div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
 							Please select a lesson to begin.
@@ -77,7 +76,10 @@
 					</div>
 					<div class="game-controls">
 						<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
-						<div class="level-indicator" id="level-indicator">Level 0/0</div>
+						<span class="module-pill" id="module-pill">
+							<span class="module-name" data-i18n="loading">Loading...</span>
+							<span class="level-indicator" id="level-indicator">1 of 3</span>
+						</span>
 						<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
 					</div>
 				</div>
diff --git a/src/main.css b/src/main.css
index eec08a2..d7518fe 100644
--- a/src/main.css
+++ b/src/main.css
@@ -231,18 +231,28 @@ code, kbd {
 }
 
 .module-pill {
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
 	background: var(--primary-bg-medium);
 	color: var(--primary-color);
-	padding: 2px 10px;
-	border-radius: 12px;
-	font-size: 0.75rem;
+	padding: 4px 12px;
+	border-radius: 16px;
+	font-size: 0.8rem;
 	font-weight: 600;
-	margin-bottom: var(--spacing-xs);
+}
+
+.module-name {
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
 }
 
+.module-pill .level-indicator {
+	color: var(--primary-dark);
+	font-weight: 500;
+	opacity: 0.8;
+}
+
 #lesson-title {
 	font-size: 1.25rem;
 	color: var(--primary-dark);
@@ -554,12 +564,6 @@ code, kbd {
 	border-top: 1px solid var(--border-color);
 }
 
-.level-indicator {
-	font-size: 0.9rem;
-	color: var(--light-text);
-	font-weight: 500;
-}
-
 /* ================= SIDEBAR ================= */
 .sidebar-backdrop {
 	position: fixed;