feat: implement responsive dashboard layout with column-aware widget sizing

**Status Tab Layout Changes:**
- User Info widget: 1x2 vertical (left column) instead of 2x1 horizontal
- User Stats widget: scales from 1x3 (narrow) to 2x3 (wide)
- User Mood widget: 1x1 positioned below User Info
- User Attributes widget: scales from 2x4 (narrow) to 3x4 (wide), full width

**Technical Changes:**
- Update widget definitions to use column-aware defaultSize() functions
- userInfoWidget: Returns 1x2 for desktop, 1x1 for mobile
- userStatsWidget: Returns 1x3 for 2 cols, 2x3 for 3+ cols
- userAttributesWidget: Returns 2x4 for 2 cols, 3x4 for 3+ cols
- Remove autoLayout from resetLayout() to preserve default positions
- Add resetWidgetSizesToDefault() to apply column-aware sizes
- Update CSS for 1x1 compact avatar (round) and 1x2 wide avatar layouts

**User Info Widget Improvements:**
- 1x2 layout: Horizontal split with name left, level right over avatar
- 1x1 layout: Round avatar with bottom nameplate (flush positioning)
- Transparent glass-style backgrounds for better avatar visibility
- Proper aspect-ratio for circular avatar in compact mode

**Result:**
- Widgets scale intelligently based on panel width (2-4 columns)
- Desktop users get larger, more spacious layouts
- Mobile/narrow screens get efficient vertical stacking
- Reset Layout respects custom positions while applying responsive sizes
- Window resize triggers autoLayout via ResizeObserver for reflow

src/systems/dashboard/defaultLayout.js

@@ -39,45 +39,46 @@ export function generateDefaultDashboard() {
                 icon: 'fa-solid fa-user',
                 order: 0,
                 widgets: [
-                    // Row 0: User Info (left) + User Mood (top right in 3-col)
+                    // Row 0-1: User Info (left column, vertical)
                     {
                         id: 'widget-userinfo',
                         type: 'userInfo',
                         x: 0,
                         y: 0,
-                        w: 2,
-                        h: 1,
-                        config: {}
-                    },
-                    {
-                        id: 'widget-usermood',
-                        type: 'userMood',
-                        x: 2,
-                        y: 0,
                         w: 1,
-                        h: 1,
+                        h: 2,
                         config: {}
                     },
-                    // Row 1-2: User Stats (health/energy bars)
+                    // Row 0-2: User Stats (right side, tall, 2 cols wide)
                     {
                         id: 'widget-userstats',
                         type: 'userStats',
-                        x: 0,
-                        y: 1,
+                        x: 1,
+                        y: 0,
                         w: 2,
-                        h: 2,
+                        h: 3,
                         config: {
                             statBarGradient: true
                         }
                     },
-                    // Row 3-4: User Attributes
+                    // Row 2: User Mood (below user info, left column)
+                    {
+                        id: 'widget-usermood',
+                        type: 'userMood',
+                        x: 0,
+                        y: 2,
+                        w: 1,
+                        h: 1,
+                        config: {}
+                    },
+                    // Row 3-6: User Attributes (full width below everything, 3 cols wide)
                     {
                         id: 'widget-userattributes',
                         type: 'userAttributes',
                         x: 0,
                         y: 3,
-                        w: 2,
-                        h: 2,
+                        w: 3,
+                        h: 4,
                         config: {}
                     }
                 ]