feat(ui): center avatar as hero, ~1/3 viewport height; tools grid below

- Avatar now centered in its own row above the tools grid (was crammed in column 1)
- KiraAvatar container: min-height 33vh, canvas up to 500px wide
- Tools reorganized into 4 columns below: Chat, Timer+Music, Notes+Noise, Clock+Pets+Wardrobe
- WelcomeScreen restored to full (not compact) for first-time users

frontend/src/components/KiraAvatar.tsx

@@ -55,8 +55,9 @@ export default function KiraAvatar(props: Props) {
         // Cast needed due to pixi-live2d-display expecting older Ticker type
         (Live2DModel as any).registerTicker(Ticker as any);
 
-        // Responsive sizing
-        const size = Math.min(container.clientWidth || 260, 260);
+        // Responsive sizing — fill the container, target ~1/3 viewport
+        const containerW = container.clientWidth || 400;
+        const size = Math.min(containerW, 500);
         const app = new Application({
           width: size,
           height: size * 1.25,
@@ -198,12 +199,12 @@ export default function KiraAvatar(props: Props) {
   }, [props.accessory, live2dReady]);
 
   return (
-    <div className="glass-card p-4 flex flex-col items-center" style={{ minHeight: 360 }}>
+    <div className="glass-card p-6 flex flex-col items-center w-full" style={{ minHeight: '33vh' }}>
       {/* Live2D canvas */}
       <div
         ref={canvasRef}
         className={`relative w-full ${live2dReady ? 'block' : 'hidden'}`}
-        style={{ maxWidth: 260, height: 325 }}
+        style={{ maxWidth: 500, height: '30vh', minHeight: 250 }}
       />
 
       {/* SVG fallback */}