diff --git a/src/App.css b/src/App.css
index 29219be..8edba32 100644
--- a/src/App.css
+++ b/src/App.css
@@ -643,23 +643,45 @@
.rarity-border-rare { border: 2px solid var(--rarity-rare); }
.rarity-border-legendary { border: 2px solid var(--rarity-legendary); }
-/* ===== GAME LOG ===== */
-.game-log {
- padding: 8px 16px;
+/* ===== STATS BAR (header HUD) ===== */
+.stats-bar {
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ padding: 8px 0 4px;
border-top: 1px solid rgba(255,255,255,0.06);
+ margin-top: 8px;
}
-.stats-bar {
+.stat-item {
display: flex;
- justify-content: center;
- gap: 16px;
- padding: 6px 0;
- font-size: 0.75rem;
+ flex-direction: column;
+ align-items: center;
+ gap: 1px;
+}
+
+.stat-value {
+ font-size: 0.85rem;
+ font-weight: 700;
+ color: var(--text-primary);
+ letter-spacing: 0.5px;
+}
+
+.stat-label {
+ font-size: 0.6rem;
color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* ===== GAME LOG ===== */
+.game-log {
+ padding: 4px 16px 6px;
+ border-top: 1px solid rgba(255,255,255,0.06);
}
.log-entries {
- max-height: 100px;
+ max-height: 72px;
overflow-y: auto;
display: flex;
flex-direction: column;
diff --git a/src/App.tsx b/src/App.tsx
index ba81985..4819e4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
import { useConvexAuth } from 'convex/react';
import { useAuthActions } from '@convex-dev/auth/react';
import { GameProvider } from './context/GameContext';
+import { useGame } from './context/GameContext';
import PlanetView from './components/PlanetView';
import StarMap from './components/StarMap';
import Inventory from './components/Inventory';
@@ -39,6 +40,7 @@ const TABS: Tab[] = [
function GameUI() {
const { t } = useTranslation();
+ const { stats } = useGame();
const [activeTab, setActiveTab] = useState('planet');
const ActiveComponent = TABS.find(t => t.id === activeTab)!.component;
const haptics = useHaptics();
@@ -53,6 +55,20 @@ function GameUI() {