feat: show app icon and version in mobile header

package.json

@@ -1,6 +1,6 @@
 {
   "name": "random-teams",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "packageManager": "pnpm@11.1.1",
   "engines": {
     "node": ">=22.13.0"

src/app/app.component.html

@@ -70,13 +70,20 @@
   <!-- ── Main content area ─────────────────────────────────────────────── -->
   <div class="main-area">
     <header class="page-header">
+      <div class="header-brand">
+        <span class="material-icons brand-icon">sports_soccer</span>
+        <span class="brand-name">RandomTeams</span>
+      </div>
       <h1 class="page-title">{{ title }}</h1>
-      <button
-        class="header-theme-btn"
-        (click)="toggleDarkMode()"
-        [attr.aria-label]="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'">
-        <span class="material-icons">{{ isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
-      </button>
+      <div class="header-right">
+        <span class="header-version">v{{ version }}</span>
+        <button
+          class="header-theme-btn"
+          (click)="toggleDarkMode()"
+          [attr.aria-label]="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+          <span class="material-icons">{{ isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
+        </button>
+      </div>
     </header>
 
     <main class="page-content">

src/app/app.component.scss

@@ -167,6 +167,48 @@
     color: var(--brand-text);
     margin: 0;
     letter-spacing: -0.01em;
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  }
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  .brand-icon {
+    color: var(--primary);
+    font-size: 1.4rem;
+  }
+
+  .brand-name {
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--brand-text);
+    letter-spacing: -0.02em;
+  }
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-version {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.6);
+
+  @media (min-width: 768px) {
+    display: none;
   }
 }
 
@@ -195,7 +237,7 @@
   }
 
   @media (min-width: 768px) {
-    display: none; /* desktop uses sidebar toggle */
+    display: none;
   }
 }