polish: responsive grid, radial gradient background, better bento card scaling

- Dashboard grid is now responsive: 1 col mobile, 2 cols tablet, 4 cols desktop
- BentoCard span classes converted to responsive variants
- Subtle radial gradient on main background for depth (as per design system §7.7)
- All production builds passing

src/components/BentoCard.tsx

@@ -9,6 +9,18 @@ interface BentoCardProps {
   className?: string;
 }
 
+// Convert desktop spans like "col-span-2 row-span-1" into responsive spans
+// On mobile (1 col): everything is col-span-1
+// On tablet (2 cols): col-span-2 stays, col-span-1 stays
+// On desktop (4 cols): original spans
+function responsiveSpan(span: string): string {
+  return span
+    .replace("col-span-2", "sm:col-span-2 lg:col-span-2 col-span-1")
+    .replace("row-span-2", "sm:row-span-2 lg:row-span-2 row-span-1")
+    .replace("col-span-1", "col-span-1")
+    .replace("row-span-1", "row-span-1");
+}
+
 export function BentoCard({
   title,
   icon,
@@ -16,9 +28,11 @@ export function BentoCard({
   children,
   className = "",
 }: BentoCardProps) {
+  const responsive = responsiveSpan(span);
+
   return (
     <motion.div
-      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
+      className={`glass-card flex flex-col overflow-hidden p-4 ${responsive} ${className}`}
       whileHover={{ scale: 1.005 }}
       whileTap={{ scale: 0.985 }}
       transition={{ type: "spring", stiffness: 400, damping: 25 }}

src/components/Dashboard.tsx

@@ -20,7 +20,7 @@ interface DashboardProps {
 
 export function Dashboard({ onNavigate }: DashboardProps) {
   return (
-    <div className="grid grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
       {/* World Map — 2×2 */}
       <BentoCard title="World Builder" icon={<Map size={16} />} span="col-span-2 row-span-2">
         <div className="flex flex-col h-full">

src/index.css

@@ -103,6 +103,7 @@ body,
   width: 100%;
   overflow: hidden;
   background: var(--color-bg-deep);
+  background: radial-gradient(ellipse at 50% 0%, #141e33 0%, var(--color-bg-deep) 70%);
   color: var(--color-text-primary);
   font-family: var(--font-sans);
   font-size: 14px;