feat: add mobile-responsive UI for all views

- Add useIsMobile hook (768px breakpoint with matchMedia)
- Add BottomSheet component (swipe up/down, optional tabs, handle bar)
- Add MobileTabBar component (bottom nav with icons + labels)
- Sandbox mobile: compact toolbar, hamburger menu, action bar with
  START button, bottom sheet with module grid tiles
- World Map mobile: compact header, single-column level list,
  bottom tab bar (JUEGO/SANDBOX/CONFIG)
- Puzzle View mobile: icon-only top bar buttons, sidebar replaced
  by bottom sheet with 3 tabs (MISION/OBJETIVOS/MODULOS)
- ~200 lines of CSS media queries: touch targets 44px, port dots
  18px, zoom controls larger, modals full-width, level complete
  full-width buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/BottomSheet.jsx

@@ -0,0 +1,49 @@
+import { useState, useRef, useCallback } from 'react';
+
+export default function BottomSheet({ tabs, activeTab, onTabChange, children, className = '' }) {
+  const [expanded, setExpanded] = useState(false);
+  const startY = useRef(0);
+  const sheetRef = useRef(null);
+
+  const handleTouchStart = useCallback((e) => {
+    startY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleTouchEnd = useCallback((e) => {
+    const deltaY = e.changedTouches[0].clientY - startY.current;
+    if (deltaY < -40) setExpanded(true);
+    if (deltaY > 40) setExpanded(false);
+  }, []);
+
+  return (
+    <div
+      ref={sheetRef}
+      className={`bottom-sheet ${expanded ? 'expanded' : ''} ${className}`}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+    >
+      <div className="bottom-sheet-handle" onClick={() => setExpanded(e => !e)}>
+        <div className="bottom-sheet-handle-bar" />
+      </div>
+
+      {tabs && tabs.length > 0 && (
+        <div className="bottom-sheet-tabs">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              className={`bottom-sheet-tab ${activeTab === tab.id ? 'active' : ''}`}
+              onClick={() => onTabChange?.(tab.id)}
+            >
+              {tab.label}
+              {activeTab === tab.id && <div className="bottom-sheet-tab-line" />}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="bottom-sheet-content">
+        {children}
+      </div>
+    </div>
+  );
+}