Host disconnected

App.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { useAuth } from 'react-oidc-context';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { RefreshCw, LogOut } from 'lucide-react';
 import { useGame } from './hooks/useGame';
 import { useQuizLibrary } from './hooks/useQuizLibrary';
 import { useUserConfig } from './hooks/useUserConfig';
@@ -328,6 +330,40 @@ function App() {
         ) : null}
 
         {gameState === 'DISCONNECTED' && currentPlayerName && gamePin ? (
+          role === 'HOST' ? (
+            // Host disconnected - show reconnecting state or allow ending game
+            <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
+              <motion.div
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-md w-full"
+              >
+                <motion.div
+                  animate={{ rotate: 360 }}
+                  transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
+                  className="bg-blue-500 p-6 rounded-full inline-block mb-6 shadow-lg"
+                >
+                  <RefreshCw size={48} className="text-white" />
+                </motion.div>
+
+                <h1 className="text-3xl font-black font-display mb-4">Reconnecting...</h1>
+                
+                <p className="text-lg opacity-70 mb-8">
+                  Restoring your game session for <span className="font-mono font-bold">{gamePin}</span>
+                </p>
+
+                <motion.button
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={goHomeFromDisconnected}
+                  className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
+                >
+                  <LogOut size={20} />
+                  Cancel & End Game
+                </motion.button>
+              </motion.div>
+            </div>
+          ) : (
             <DisconnectedScreen
               playerName={currentPlayerName}
               gamePin={gamePin}
@@ -335,6 +371,7 @@ function App() {
               onReconnect={attemptReconnect}
               onGoHome={goHomeFromDisconnected}
             />
+          )
         ) : null}
 
         {gameState === 'WAITING_TO_REJOIN' && currentPlayerName ? (