Implement mobile-responsive UI with automatic device detection

app/components/CookieClickerGame.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, type Dispatch, type SetStateAction } fro
 import NotificationModal from './NotificationModal';
 import PopupModal from './PopupModal';
 import { abbreviateNumber } from '../utils/numberFormatter';
+import { useMobileDetection } from '../hooks/useMobileDetection';
 
 interface Upgrade {
   id: string;
@@ -44,6 +45,7 @@ export default function CookieClickerGame({
   upgrades, setUpgrades, notification, setNotification, popup, setPopup,
   initialUpgrades
 }: CookieClickerGameProps) {
+  const isMobile = useMobileDetection();
 
   const handleCookieClick = () => {
     setClicks(prevClicks => prevClicks + clickPower);
@@ -112,53 +114,63 @@ export default function CookieClickerGame({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center flex-grow p-4 bg-gray-900 text-white min-h-screen" onContextMenu={(e) => e.preventDefault()}>
-      <h1 className="text-4xl font-bold mb-6 text-blue-400">MixClick</h1>
+    <div className={`flex flex-col items-center justify-center flex-grow ${isMobile ? 'p-2' : 'p-4'} bg-gray-900 text-white min-h-screen`} onContextMenu={(e) => e.preventDefault()}>
+      <h1 className={`${isMobile ? 'text-2xl' : 'text-4xl'} font-bold mb-4 text-blue-400`}>MixClick</h1>
       <title>MixClick</title>
+
+      {/* Main click button */}
       <button
-        className="px-8 py-4 bg-blue-500 text-white text-2xl font-bold rounded-full shadow-lg hover:bg-blue-600 transition-all duration-100 ease-in-out transform active:scale-95 mb-6"
+        className={`${isMobile ? 'px-6 py-3 text-xl' : 'px-8 py-4 text-2xl'} bg-blue-500 text-white font-bold rounded-full shadow-lg hover:bg-blue-600 transition-all duration-100 ease-in-out transform active:scale-95 mb-4`}
         onClick={handleCookieClick}
       >
         Click Me!
       </button>
+
+      {/* Convert button */}
       <button
-        className="px-6 py-3 bg-green-500 text-white text-lg rounded-lg shadow hover:bg-green-600 transition-colors mb-10"
+        className={`${isMobile ? 'px-4 py-2 text-base mb-4' : 'px-6 py-3 text-lg mb-10'} bg-green-500 text-white rounded-lg shadow hover:bg-green-600 transition-colors`}
         onClick={convertClicksToCash}
       >
         Convert Clicks to Cash
       </button>
 
-      <div className="w-full max-w-md bg-gray-800 p-6 rounded-lg shadow-xl border border-blue-400 mb-8">
-        <h2 className="text-3xl font-bold mb-5 text-blue-400">Shop Upgrades</h2>
-        <div className="space-y-4">
-          {upgrades.map(upgrade => (
-            <div key={upgrade.id} className="flex flex-col sm:flex-row justify-between items-center p-4 bg-gray-700 rounded-md shadow-sm border border-blue-300">
-              <div className="text-left mb-2 sm:mb-0">
-                <span className="text-lg font-semibold text-white">{upgrade.name}</span>
-                <p className="text-sm text-gray-300">{upgrade.description}</p>
-                <p className="text-sm text-blue-200">Cost: ${abbreviateNumber(upgrade.cost)} | Owned: {abbreviateNumber(upgrade.count)}</p>
+      {/* Container for upgrades and lucky crates */}
+      <div className={`${isMobile ? 'w-full space-y-4' : 'w-full max-w-md space-y-8'}`}>
+        {/* Shop Upgrades */}
+        <div className={`bg-gray-800 ${isMobile ? 'p-4' : 'p-6'} rounded-lg shadow-xl border border-blue-400`}>
+          <h2 className={`${isMobile ? 'text-xl mb-3' : 'text-3xl mb-5'} font-bold text-blue-400`}>Shop Upgrades</h2>
+          <div className="space-y-3">
+            {upgrades.map(upgrade => (
+              <div key={upgrade.id} className={`flex ${isMobile ? 'flex-col space-y-2' : 'flex-col sm:flex-row justify-between items-center'} p-3 bg-gray-700 rounded-md shadow-sm border border-blue-300`}>
+                <div className="text-left">
+                  <span className={`${isMobile ? 'text-base' : 'text-lg'} font-semibold text-white`}>{upgrade.name}</span>
+                  <p className={`${isMobile ? 'text-xs' : 'text-sm'} text-gray-300`}>{upgrade.description}</p>
+                  <p className={`${isMobile ? 'text-xs' : 'text-sm'} text-blue-200`}>Cost: ${abbreviateNumber(upgrade.cost)} | Owned: {abbreviateNumber(upgrade.count)}</p>
+                </div>
+                <button
+                  onClick={() => purchaseUpgrade(upgrade.id)}
+                  disabled={cash < upgrade.cost}
+                  className={`${isMobile ? 'w-full px-4 py-2 text-sm' : 'px-5 py-2'} bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:bg-gray-500 disabled:cursor-not-allowed`}
+                >
+                  Buy
+                </button>
               </div>
-              <button
-                onClick={() => purchaseUpgrade(upgrade.id)}
-                disabled={cash < upgrade.cost}
-                className="px-5 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:bg-gray-500 disabled:cursor-not-allowed"
-              >
-                Buy
-              </button>
-            </div>
-          ))}
+            ))}
+          </div>
+        </div>
+
+        {/* Lucky Crates */}
+        <div className={`bg-gray-800 ${isMobile ? 'p-4' : 'p-6'} rounded-lg shadow-xl border border-yellow-400`}>
+          <h2 className={`${isMobile ? 'text-xl mb-3' : 'text-3xl mb-5'} font-bold text-yellow-400`}>Lucky Crates</h2>
+          <p className={`${isMobile ? 'text-base mb-3' : 'text-lg mb-4'}`}>Cost: <span className="font-semibold text-yellow-300">${abbreviateNumber(luckyCrateCost)}</span></p>
+          <button
+            className={`w-full ${isMobile ? 'px-4 py-2 text-sm' : 'px-5 py-2'} bg-yellow-500 text-gray-900 font-semibold rounded-md hover:bg-yellow-600 transition-colors disabled:bg-gray-500 disabled:cursor-not-allowed`}
+            onClick={purchaseLuckyCrate}
+            disabled={cash < luckyCrateCost}
+          >
+            Buy Lucky Crate
+          </button>
         </div>
-      </div>
-      <div className="w-full max-w-md bg-gray-800 p-6 rounded-lg shadow-xl border border-yellow-400">
-        <h2 className="text-3xl font-bold mb-5 text-yellow-400">Lucky Crates</h2>
-        <p className="text-lg mb-4">Cost: <span className="font-semibold text-yellow-300">${abbreviateNumber(luckyCrateCost)}</span></p>
-        <button
-          className="w-full px-5 py-2 bg-yellow-500 text-gray-900 font-semibold rounded-md hover:bg-yellow-600 transition-colors disabled:bg-gray-500 disabled:cursor-not-allowed"
-          onClick={purchaseLuckyCrate}
-          disabled={cash < luckyCrateCost}
-        >
-          Buy Lucky Crate
-        </button>
       </div>
     </div>
   );

app/components/NotificationModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useMobileDetection } from '../hooks/useMobileDetection';
 
 interface NotificationProps {
   message: string;
@@ -10,6 +11,7 @@ interface NotificationProps {
 const NotificationModal: React.FC<NotificationProps> = ({ message, type, duration = 3000, onClose }) => {
   const [isVisible, setIsVisible] = useState(false);
   const [animationClass, setAnimationClass] = useState('slide-in-notification');
+  const isMobile = useMobileDetection();
 
   useEffect(() => {
     setIsVisible(true); // Show immediately when component mounts
@@ -43,11 +45,11 @@ const NotificationModal: React.FC<NotificationProps> = ({ message, type, duratio
   };
 
   return (
-    <div className={`fixed top-16 right-4 w-80 p-4 rounded-lg shadow-xl text-white z-50 border-l-8 ${typeClasses[type]} ${animationClass}`}>
+    <div className={`fixed ${isMobile ? 'top-20 left-2 right-2 w-auto' : 'top-16 right-4 w-80'} p-4 rounded-lg shadow-xl text-white z-50 border-l-8 ${typeClasses[type]} ${animationClass}`}>
       <div className="flex items-center">
-        <i className={`fas ${iconClasses[type]} text-2xl mr-3`}></i>
-        <p className="flex-grow text-lg font-semibold">{message}</p>
-        <button onClick={() => { setAnimationClass('slide-out-notification'); setTimeout(() => { setIsVisible(false); onClose(); }, 500); }} className="ml-4 text-xl font-bold opacity-75 hover:opacity-100 transition-opacity">
+        <i className={`fas ${iconClasses[type]} ${isMobile ? 'text-xl mr-2' : 'text-2xl mr-3'}`}></i>
+        <p className={`flex-grow ${isMobile ? 'text-base' : 'text-lg'} font-semibold`}>{message}</p>
+        <button onClick={() => { setAnimationClass('slide-out-notification'); setTimeout(() => { setIsVisible(false); onClose(); }, 500); }} className={`${isMobile ? 'ml-2 text-lg' : 'ml-4 text-xl'} font-bold opacity-75 hover:opacity-100 transition-opacity`}>
           &times;
         </button>
       </div>

app/components/PopupModal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useMobileDetection } from '../hooks/useMobileDetection';
 
 interface PopupModalProps {
   title: string;
@@ -17,21 +18,23 @@ const PopupModal: React.FC<PopupModalProps> = ({
   confirmText = 'Confirm',
   cancelText = 'Cancel',
 }) => {
+  const isMobile = useMobileDetection();
+
   return (
     <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
-        <h2 className="text-xl font-bold mb-4 text-gray-900">{title}</h2>
-        <p className="text-gray-700 mb-6">{message}</p>
-        <div className="flex justify-end space-x-4">
+      <div className={`bg-white ${isMobile ? 'p-4 mx-4 max-w-xs' : 'p-6 max-w-sm'} w-full rounded-lg shadow-xl`}>
+        <h2 className={`${isMobile ? 'text-lg mb-3' : 'text-xl mb-4'} font-bold text-gray-900`}>{title}</h2>
+        <p className={`text-gray-700 ${isMobile ? 'mb-4 text-sm' : 'mb-6'}`}>{message}</p>
+        <div className={`flex ${isMobile ? 'flex-col space-y-2' : 'justify-end space-x-4'}`}>
           <button
             onClick={onCancel}
-            className="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors"
+            className={`${isMobile ? 'w-full px-3 py-2 text-sm' : 'px-4 py-2'} bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors`}
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+            className={`${isMobile ? 'w-full px-3 py-2 text-sm' : 'px-4 py-2'} bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors`}
           >
             {confirmText}
           </button>

app/components/SettingsModal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useMobileDetection } from '../hooks/useMobileDetection';
 
 interface SettingsModalProps {
   isOpen: boolean;
@@ -7,22 +8,24 @@ interface SettingsModalProps {
 }
 
 const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, onResetSave }) => {
+  const isMobile = useMobileDetection();
+
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
-        <h2 className="text-xl font-bold mb-4 text-gray-900">Settings</h2>
-        <div className="space-y-4">
+      <div className={`bg-white ${isMobile ? 'p-4 mx-4 max-w-xs' : 'p-6 max-w-sm'} w-full rounded-lg shadow-xl`}>
+        <h2 className={`${isMobile ? 'text-lg mb-3' : 'text-xl mb-4'} font-bold text-gray-900`}>Settings</h2>
+        <div className="space-y-3">
           <button
             onClick={onResetSave}
-            className="w-full px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+            className={`w-full ${isMobile ? 'px-3 py-2 text-sm' : 'px-4 py-2'} bg-red-600 text-white rounded hover:bg-red-700 transition-colors`}
           >
             Reset Save
           </button>
           <button
             onClick={onClose}
-            className="w-full px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors"
+            className={`w-full ${isMobile ? 'px-3 py-2 text-sm' : 'px-4 py-2'} bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors`}
           >
             Close
           </button>

app/components/TopBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { abbreviateNumber } from '../utils/numberFormatter';
+import { useMobileDetection } from '../hooks/useMobileDetection';
 
 interface TopBarProps {
   onSaveGame: () => void;
@@ -13,6 +14,32 @@ interface TopBarProps {
 }
 
 export default function TopBar({ onSaveGame, onLoadGame, onRebirth, onOpenSettings, clicks, cash, rebirths, prestigeCurrency }: TopBarProps) {
+  const isMobile = useMobileDetection();
+
+  if (isMobile) {
+    return (
+      <div className="bg-gray-800 text-white shadow-md">
+        {/* Top row with buttons */}
+        <div className="flex justify-between items-center p-2">
+          <div className="flex space-x-2">
+            <button onClick={onSaveGame} className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">Save</button>
+            <button onClick={onLoadGame} className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">Load</button>
+          </div>
+          <div className="flex space-x-2">
+            <button onClick={onRebirth} className="px-3 py-1 bg-purple-600 text-white text-sm rounded hover:bg-purple-700 transition-colors">Rebirth</button>
+            <button onClick={onOpenSettings} className="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700 transition-colors">Settings</button>
+          </div>
+        </div>
+        {/* Stats row */}
+        <div className="grid grid-cols-2 gap-1 p-2 pt-0 text-xs">
+          <p className="text-center">Clicks: <span className="font-semibold text-blue-300">{abbreviateNumber(clicks)}</span></p>
+          <p className="text-center">Cash: <span className="font-semibold text-green-400">${abbreviateNumber(cash)}</span></p>
+          <p className="text-center">Rebirths: <span className="font-semibold text-purple-300">{abbreviateNumber(rebirths)}</span></p>
+          <p className="text-center">Prestige: <span className="font-semibold text-yellow-400">{abbreviateNumber(prestigeCurrency)}</span></p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="flex justify-between items-center p-4 bg-gray-800 text-white shadow-md">

app/hooks/useMobileDetection.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook to detect if the user is on a mobile device
+ * Returns true for mobile devices, false for desktop
+ */
+export const useMobileDetection = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      // Check screen width (mobile breakpoint)
+      const screenWidth = window.innerWidth <= 768;
+
+      // Check user agent for mobile devices
+      const userAgent = navigator.userAgent.toLowerCase();
+      const mobileKeywords = [
+        'mobile', 'android', 'iphone', 'ipad', 'tablet', 
+        'blackberry', 'windows phone', 'webos'
+      ];
+      const userAgentMobile = mobileKeywords.some(keyword => 
+        userAgent.includes(keyword)
+      );
+
+      // Check for touch capability
+      const hasTouchScreen = 'ontouchstart' in window || 
+        navigator.maxTouchPoints > 0;
+
+      // Consider it mobile if any of these conditions are true
+      const mobile = screenWidth || (userAgentMobile && hasTouchScreen);
+      setIsMobile(mobile);
+    };
+
+    // Check on mount
+    checkMobile();
+
+    // Listen for window resize
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  return isMobile;
+};