Spaces:

Tantawi
/

khofo

Sleeping

App Files Files Community

Tantawi65 commited on Feb 20

Commit

c0f8abf

1 Parent(s): e07d173

Mobile fullscreen support and responsive layout improvements

Browse files

Files changed (7) hide show

client/index.html +6 -1
client/public/manifest.json +22 -0
client/src/components/screens/GameBoard.tsx +68 -32
client/src/components/screens/Lobby.tsx +12 -12
client/src/components/screens/MainMenu.tsx +17 -17
client/src/components/screens/Room.tsx +7 -7
client/src/index.css +47 -13

client/index.html CHANGED Viewed

@@ -3,13 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/Assests/ui_logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="screen-orientation" content="landscape" />
     <meta name="theme-color" content="#1a1a2e" />
-    <title>Mummy Card Game - هتتحنط هنا</title>
     <style>
       /* Prevent flash of unstyled content */
       body {

   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/Assests/ui_logo.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <!-- PWA / Fullscreen support -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="screen-orientation" content="landscape" />
     <meta name="theme-color" content="#1a1a2e" />
+    <meta name="msapplication-navbutton-color" content="#1a1a2e" />
+    <meta name="apple-mobile-web-app-title" content="Khofo" />
+    <link rel="apple-touch-icon" href="/Assests/ui_logo.png" />
+    <title>Khofo - هتتحنط هنا</title>
     <style>
       /* Prevent flash of unstyled content */
       body {

client/public/manifest.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "name": "Khofo Card Game",
+  "short_name": "Khofo",
+  "description": "Egyptian Mummy Card Game",
+  "start_url": "/",
+  "display": "fullscreen",
+  "orientation": "landscape",
+  "background_color": "#1a1a2e",
+  "theme_color": "#1a1a2e",
+  "icons": [
+    {
+      "src": "/Assests/ui_logo.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/Assests/ui_logo.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

client/src/components/screens/GameBoard.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useGameStore } from '../../store/gameStore';
 import { Card, CardBack } from '../game/Card';
@@ -6,6 +6,18 @@ import { emitDrawCard, emitPlayCard } from '../../socket/socket';
 import type { CardInstance, Player } from '@shared/types';
 import { CARD_DATABASE } from '@shared/types';
 export function GameBoard() {
   const gameState = useGameStore((state) => state.gameState);
   const myHand = useGameStore((state) => state.myHand);
@@ -19,6 +31,20 @@ export function GameBoard() {
   const reactionWindowActive = useGameStore((state) => state.reactionWindowActive);
   const [pendingCard, setPendingCard] = useState<CardInstance | null>(null);
   // Clear pendingCard when relevant modals close (not target-select or card-type-select)
   useEffect(() => {
@@ -119,15 +145,25 @@ export function GameBoard() {
   return (
     <div
-      className="game-board flex-1 flex flex-col"
       style={{
-        backgroundImage: 'url(/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
       {/* Top area - Other players */}
-      <div className="flex justify-center gap-4 p-2">
         {otherPlayers.map((player) => (
           <PlayerDisplay
             key={player.id}
@@ -138,16 +174,16 @@ export function GameBoard() {
       </div>
       {/* Middle area - Deck and discard */}
-      <div className="flex-1 flex items-center justify-center gap-8">
         {/* Deck */}
         <motion.div
-          className="deck-pile"
           data-count={gameState.deckCount}
           whileHover={isMyTurn ? { scale: 1.05 } : {}}
           onClick={handleDrawCard}
         >
           <CardBack size="large" />
-          <p className="text-center text-papyrus mt-2">Deck</p>
         </motion.div>
         {/* Turn info */}
@@ -156,13 +192,13 @@ export function GameBoard() {
             key={currentPlayer?.id}
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
-            className="bg-black/60 rounded-lg px-6 py-3"
           >
-            <p className="text-papyrus mb-1">
               {currentPlayer?.id === playerId ? "Your Turn!" : `${currentPlayer?.name}'s Turn`}
             </p>
             {turnsRemaining > 1 && (
-              <p className="text-egyptian-gold text-sm">
                 {turnsRemaining} turns remaining
               </p>
             )}
@@ -170,7 +206,7 @@ export function GameBoard() {
         </div>
         {/* Discard pile */}
-        <div className="relative">
           {gameState.discardPile.length > 0 ? (
             <Card
               cardId={gameState.discardPile[gameState.discardPile.length - 1]}
@@ -178,25 +214,25 @@ export function GameBoard() {
               disabled
             />
           ) : (
-            <div className="w-32 h-48 border-2 border-dashed border-papyrus/30 rounded-lg flex items-center justify-center">
-              <p className="text-papyrus/40 text-center text-sm">Discard</p>
             </div>
           )}
-          <p className="text-center text-papyrus mt-2">Discard ({gameState.discardPile.length})</p>
         </div>
       </div>
       {/* Bottom area - My hand */}
-      <div className="bg-black/50 backdrop-blur-sm p-4">
         {/* My player info */}
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <div className={`player-avatar ${isMyTurn ? 'current-turn' : ''}`}>
               {myPlayer?.name.charAt(0).toUpperCase()}
             </div>
-            <span className="text-papyrus">{myPlayer?.name} (You)</span>
           </div>
-          <span className="text-egyptian-gold">{myHand.length} cards</span>
         </div>
         {/* Hand */}
@@ -229,11 +265,11 @@ export function GameBoard() {
         {/* Draw button for mobile */}
         {isMyTurn && (
           <motion.button
-            className="btn btn-primary w-full mt-2"
             onClick={handleDrawCard}
             whileTap={{ scale: 0.95 }}
           >
-            Draw Card (End Turn)
           </motion.button>
         )}
       </div>
@@ -249,32 +285,32 @@ interface PlayerDisplayProps {
 function PlayerDisplay({ player, isCurrentTurn }: PlayerDisplayProps) {
   return (
     <motion.div
-      className={`bg-black/50 rounded-lg p-2 ${isCurrentTurn ? 'ring-2 ring-green-500' : ''}`}
       animate={isCurrentTurn ? { scale: [1, 1.02, 1] } : {}}
       transition={{ repeat: isCurrentTurn ? Infinity : 0, duration: 1.5 }}
     >
-      <div className="flex items-center gap-2 mb-2">
-        <div className={`player-avatar w-8 h-8 text-sm ${!player.isAlive ? 'eliminated' : ''} ${isCurrentTurn ? 'current-turn' : ''}`}>
           {player.name.charAt(0).toUpperCase()}
         </div>
         <div>
-          <p className={`text-sm ${player.isAlive ? 'text-papyrus' : 'text-papyrus/50 line-through'}`}>
             {player.name}
           </p>
-          {!player.isAlive && <p className="text-mummy-red text-xs">☠️ Mummified</p>}
         </div>
       </div>
       {player.isAlive && (
-        <div className="flex gap-1 justify-center">
-          {Array.from({ length: Math.min(player.cardCount, 8) }).map((_, i) => (
             <div
               key={i}
-              className="w-4 h-6 bg-gradient-to-br from-egyptian-gold to-sand rounded shadow-sm"
             />
           ))}
-          {player.cardCount > 8 && (
-            <span className="text-egyptian-gold text-xs">+{player.cardCount - 8}</span>
           )}
         </div>
       )}

+import { useState, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useGameStore } from '../../store/gameStore';
 import { Card, CardBack } from '../game/Card';
 import type { CardInstance, Player } from '@shared/types';
 import { CARD_DATABASE } from '@shared/types';
+// Fullscreen helper
+const requestFullscreen = () => {
+  const elem = document.documentElement;
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if ((elem as any).webkitRequestFullscreen) {
+    (elem as any).webkitRequestFullscreen();
+  } else if ((elem as any).msRequestFullscreen) {
+    (elem as any).msRequestFullscreen();
+  }
+};
 export function GameBoard() {
   const gameState = useGameStore((state) => state.gameState);
   const myHand = useGameStore((state) => state.myHand);
   const reactionWindowActive = useGameStore((state) => state.reactionWindowActive);
   const [pendingCard, setPendingCard] = useState<CardInstance | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  // Track fullscreen state
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+    };
+  }, []);
   // Clear pendingCard when relevant modals close (not target-select or card-type-select)
   useEffect(() => {
   return (
     <div
+      className="game-board flex-1 flex flex-col h-full"
       style={{
+        backgroundImage: 'url(/Assests/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
+      {/* Fullscreen button - mobile only */}
+      {!isFullscreen && (
+        <button
+          onClick={requestFullscreen}
+          className="fixed top-2 right-2 z-50 bg-black/60 text-papyrus px-2 py-1 rounded text-xs md:hidden"
+        >
+          ⛶ Fullscreen
+        </button>
+      )}
       {/* Top area - Other players */}
+      <div className="flex justify-center gap-2 md:gap-4 p-1 md:p-2 flex-shrink-0">
         {otherPlayers.map((player) => (
           <PlayerDisplay
             key={player.id}
       </div>
       {/* Middle area - Deck and discard */}
+      <div className="flex-1 flex items-center justify-center gap-4 md:gap-8 min-h-0">
         {/* Deck */}
         <motion.div
+          className="deck-pile scale-75 md:scale-100"
           data-count={gameState.deckCount}
           whileHover={isMyTurn ? { scale: 1.05 } : {}}
           onClick={handleDrawCard}
         >
           <CardBack size="large" />
+          <p className="text-center text-papyrus text-xs md:text-base mt-1">Deck</p>
         </motion.div>
         {/* Turn info */}
             key={currentPlayer?.id}
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
+            className="bg-black/60 rounded-lg px-3 py-2 md:px-6 md:py-3"
           >
+            <p className="text-papyrus text-xs md:text-base mb-1">
               {currentPlayer?.id === playerId ? "Your Turn!" : `${currentPlayer?.name}'s Turn`}
             </p>
             {turnsRemaining > 1 && (
+              <p className="text-egyptian-gold text-xs">
                 {turnsRemaining} turns remaining
               </p>
             )}
         </div>
         {/* Discard pile */}
+        <div className="relative scale-75 md:scale-100">
           {gameState.discardPile.length > 0 ? (
             <Card
               cardId={gameState.discardPile[gameState.discardPile.length - 1]}
               disabled
             />
           ) : (
+            <div className="w-24 h-36 md:w-32 md:h-48 border-2 border-dashed border-papyrus/30 rounded-lg flex items-center justify-center">
+              <p className="text-papyrus/40 text-center text-xs">Discard</p>
             </div>
           )}
+          <p className="text-center text-papyrus text-xs md:text-base mt-1">Discard ({gameState.discardPile.length})</p>
         </div>
       </div>
       {/* Bottom area - My hand */}
+      <div className="bg-black/50 backdrop-blur-sm p-2 md:p-4 flex-shrink-0">
         {/* My player info */}
+        <div className="flex items-center justify-between mb-1 md:mb-2">
+          <div className="flex items-center gap-1 md:gap-2">
+            <div className={`player-avatar w-6 h-6 md:w-12 md:h-12 text-xs md:text-lg ${isMyTurn ? 'current-turn' : ''}`}>
               {myPlayer?.name.charAt(0).toUpperCase()}
             </div>
+            <span className="text-papyrus text-xs md:text-base">{myPlayer?.name}</span>
           </div>
+          <span className="text-egyptian-gold text-xs md:text-base">{myHand.length} cards</span>
         </div>
         {/* Hand */}
         {/* Draw button for mobile */}
         {isMyTurn && (
           <motion.button
+            className="btn btn-primary w-full mt-1 md:mt-2 py-2 text-sm md:text-base"
             onClick={handleDrawCard}
             whileTap={{ scale: 0.95 }}
           >
+            Draw Card
           </motion.button>
         )}
       </div>
 function PlayerDisplay({ player, isCurrentTurn }: PlayerDisplayProps) {
   return (
     <motion.div
+      className={`bg-black/50 rounded-lg p-1 md:p-2 ${isCurrentTurn ? 'ring-2 ring-green-500' : ''}`}
       animate={isCurrentTurn ? { scale: [1, 1.02, 1] } : {}}
       transition={{ repeat: isCurrentTurn ? Infinity : 0, duration: 1.5 }}
     >
+      <div className="flex items-center gap-1 md:gap-2 mb-1">
+        <div className={`player-avatar w-5 h-5 md:w-8 md:h-8 text-xs md:text-sm ${!player.isAlive ? 'eliminated' : ''} ${isCurrentTurn ? 'current-turn' : ''}`}>
           {player.name.charAt(0).toUpperCase()}
         </div>
         <div>
+          <p className={`text-xs md:text-sm ${player.isAlive ? 'text-papyrus' : 'text-papyrus/50 line-through'}`}>
             {player.name}
           </p>
+          {!player.isAlive && <p className="text-mummy-red text-xs">☠️</p>}
         </div>
       </div>
       {player.isAlive && (
+        <div className="flex gap-0.5 justify-center">
+          {Array.from({ length: Math.min(player.cardCount, 6) }).map((_, i) => (
             <div
               key={i}
+              className="w-2 h-3 md:w-4 md:h-6 bg-gradient-to-br from-egyptian-gold to-sand rounded shadow-sm"
             />
           ))}
+          {player.cardCount > 6 && (
+            <span className="text-egyptian-gold text-xs">+{player.cardCount - 6}</span>
           )}
         </div>
       )}

client/src/components/screens/Lobby.tsx CHANGED Viewed

@@ -46,9 +46,9 @@ export function Lobby() {
   return (
     <div
-      className="flex-1 flex flex-col items-center justify-center p-4"
       style={{
-        backgroundImage: 'url(/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
@@ -56,24 +56,24 @@ export function Lobby() {
       <motion.div
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
-        className="bg-black/70 backdrop-blur-sm rounded-2xl p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto"
       >
         {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <button onClick={handleBack} className="text-egyptian-gold hover:text-yellow-400">
             ← Back
           </button>
-          <h1 className="text-2xl font-bold text-egyptian-gold">Lobby</h1>
-          <span className="text-papyrus">{playerName}</span>
         </div>
         {/* Tabs */}
-        <div className="flex border-b border-egyptian-gold/30 mb-6">
           {(['create', 'join', 'browse'] as const).map((tab) => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
-              className={`flex-1 py-2 text-center capitalize transition-colors ${
                 activeTab === tab
                   ? 'text-egyptian-gold border-b-2 border-egyptian-gold'
                   : 'text-papyrus/60 hover:text-papyrus'
@@ -90,10 +90,10 @@ export function Lobby() {
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
           >
-            <p className="text-papyrus mb-4">Create a new room for your friends to join.</p>
-            <div className="mb-4">
-              <label className="block text-papyrus mb-2">Room Name</label>
               <input
                 type="text"
                 value={roomName}

   return (
     <div
+      className="flex-1 flex flex-col items-center justify-center p-2 md:p-4 overflow-hidden"
       style={{
+        backgroundImage: 'url(/Assests/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
       <motion.div
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
+        className="bg-black/70 backdrop-blur-sm rounded-2xl p-3 md:p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto"
       >
         {/* Header */}
+        <div className="flex items-center justify-between mb-3 md:mb-6">
+          <button onClick={handleBack} className="text-egyptian-gold hover:text-yellow-400 text-sm md:text-base">
             ← Back
           </button>
+          <h1 className="text-lg md:text-2xl font-bold text-egyptian-gold">Lobby</h1>
+          <span className="text-papyrus text-xs md:text-base">{playerName}</span>
         </div>
         {/* Tabs */}
+        <div className="flex border-b border-egyptian-gold/30 mb-3 md:mb-6">
           {(['create', 'join', 'browse'] as const).map((tab) => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
+              className={`flex-1 py-1 md:py-2 text-center capitalize transition-colors text-sm md:text-base ${
                 activeTab === tab
                   ? 'text-egyptian-gold border-b-2 border-egyptian-gold'
                   : 'text-papyrus/60 hover:text-papyrus'
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
           >
+            <p className="text-papyrus text-sm md:text-base mb-2 md:mb-4">Create a new room for your friends to join.</p>
+            <div className="mb-3 md:mb-4">
+              <label className="block text-papyrus text-sm mb-1 md:mb-2">Room Name</label>
               <input
                 type="text"
                 value={roomName}

client/src/components/screens/MainMenu.tsx CHANGED Viewed

@@ -19,9 +19,9 @@ export function MainMenu() {
   return (
     <div
-      className="flex-1 flex flex-col items-center justify-center p-4"
       style={{
-        backgroundImage: 'url(/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
@@ -30,13 +30,13 @@ export function MainMenu() {
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
-        className="bg-black/60 backdrop-blur-sm rounded-2xl p-8 max-w-md w-full"
       >
         {/* Logo */}
         <motion.img
-          src="/ui_logo.png"
-          alt="Mummy Card Game"
-          className="w-48 h-48 mx-auto mb-6 object-contain"
           initial={{ scale: 0 }}
           animate={{ scale: 1, rotate: [0, -5, 5, 0] }}
           transition={{ duration: 0.5, delay: 0.2 }}
@@ -45,30 +45,30 @@ export function MainMenu() {
           }}
         />
-        <h1 className="text-3xl font-bold text-center text-egyptian-gold mb-2">
-          Mummy Card Game
         </h1>
-        <h2 className="text-xl text-center text-papyrus mb-8" dir="rtl">
           هتتحنط هنا
         </h2>
         {/* Connection status */}
-        <div className="flex items-center justify-center gap-2 mb-6">
-          <span className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-          <span className="text-sm text-papyrus">
-            {isConnected ? 'Connected to server' : 'Connecting...'}
           </span>
         </div>
         {/* Name input */}
-        <div className="mb-6">
-          <label className="block text-papyrus mb-2">Your Name</label>
           <input
             type="text"
             value={playerName}
             onChange={(e) => setPlayerName(e.target.value)}
             placeholder="Enter your name..."
-            className="w-full"
             maxLength={20}
             onKeyDown={(e) => e.key === 'Enter' && handlePlay()}
           />
@@ -76,7 +76,7 @@ export function MainMenu() {
         {/* Play button */}
         <motion.button
-          className="btn btn-primary w-full text-xl"
           onClick={handlePlay}
           disabled={!isConnected}
           whileHover={{ scale: 1.02 }}

   return (
     <div
+      className="flex-1 flex flex-col items-center justify-center p-2 md:p-4 overflow-hidden"
       style={{
+        backgroundImage: 'url(/Assests/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
+        className="bg-black/60 backdrop-blur-sm rounded-2xl p-4 md:p-8 max-w-md w-full"
       >
         {/* Logo */}
         <motion.img
+          src="/Assests/ui_logo.png"
+          alt="Khofo Card Game"
+          className="w-24 h-24 md:w-48 md:h-48 mx-auto mb-3 md:mb-6 object-contain"
           initial={{ scale: 0 }}
           animate={{ scale: 1, rotate: [0, -5, 5, 0] }}
           transition={{ duration: 0.5, delay: 0.2 }}
           }}
         />
+        <h1 className="text-xl md:text-3xl font-bold text-center text-egyptian-gold mb-1 md:mb-2">
+          Khofo Card Game
         </h1>
+        <h2 className="text-base md:text-xl text-center text-papyrus mb-4 md:mb-8" dir="rtl">
           هتتحنط هنا
         </h2>
         {/* Connection status */}
+        <div className="flex items-center justify-center gap-2 mb-3 md:mb-6">
+          <span className={`w-2 h-2 md:w-3 md:h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
+          <span className="text-xs md:text-sm text-papyrus">
+            {isConnected ? 'Connected' : 'Connecting...'}
           </span>
         </div>
         {/* Name input */}
+        <div className="mb-4 md:mb-6">
+          <label className="block text-papyrus text-sm md:text-base mb-1 md:mb-2">Your Name</label>
           <input
             type="text"
             value={playerName}
             onChange={(e) => setPlayerName(e.target.value)}
             placeholder="Enter your name..."
+            className="w-full text-sm md:text-base"
             maxLength={20}
             onKeyDown={(e) => e.key === 'Enter' && handlePlay()}
           />
         {/* Play button */}
         <motion.button
+          className="btn btn-primary w-full text-base md:text-xl py-2 md:py-3"
           onClick={handlePlay}
           disabled={!isConnected}
           whileHover={{ scale: 1.02 }}

client/src/components/screens/Room.tsx CHANGED Viewed

@@ -36,9 +36,9 @@ export function Room() {
   return (
     <div
-      className="flex-1 flex flex-col items-center justify-center p-4"
       style={{
-        backgroundImage: 'url(/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
@@ -46,15 +46,15 @@ export function Room() {
       <motion.div
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
-        className="bg-black/70 backdrop-blur-sm rounded-2xl p-6 max-w-lg w-full"
       >
         {/* Header */}
-        <div className="flex items-center justify-between mb-4">
-          <button onClick={handleLeave} className="text-egyptian-gold hover:text-yellow-400">
             ← Leave
           </button>
-          <h1 className="text-xl font-bold text-egyptian-gold">{currentRoom.name}</h1>
-          <span className="text-papyrus/60">
             {currentRoom.players.length}/{currentRoom.maxPlayers}
           </span>
         </div>

   return (
     <div
+      className="flex-1 flex flex-col items-center justify-center p-2 md:p-4 overflow-hidden"
       style={{
+        backgroundImage: 'url(/Assests/menu_background.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
       <motion.div
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
+        className="bg-black/70 backdrop-blur-sm rounded-2xl p-3 md:p-6 max-w-lg w-full"
       >
         {/* Header */}
+        <div className="flex items-center justify-between mb-2 md:mb-4">
+          <button onClick={handleLeave} className="text-egyptian-gold hover:text-yellow-400 text-sm md:text-base">
             ← Leave
           </button>
+          <h1 className="text-base md:text-xl font-bold text-egyptian-gold truncate max-w-[150px] md:max-w-none">{currentRoom.name}</h1>
+          <span className="text-papyrus/60 text-sm md:text-base">
             {currentRoom.players.length}/{currentRoom.maxPlayers}
           </span>
         </div>

client/src/index.css CHANGED Viewed

@@ -17,6 +17,8 @@ html, body {
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
 }
 body {
@@ -25,13 +27,23 @@ body {
   color: #f5f5dc;
   min-height: 100vh;
   min-height: 100dvh;
 }
 #root {
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
 }
 /* Landscape lock overlay */
@@ -144,16 +156,17 @@ body {
 .modal-overlay {
   @apply fixed inset-0 bg-black/70 flex items-center justify-center z-50;
   @apply backdrop-blur-sm;
 }
 .modal-content {
-  @apply bg-gradient-to-br from-nile-blue to-gray-900 rounded-xl p-6;
   @apply border-2 border-egyptian-gold shadow-2xl;
-  @apply max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto;
 }
 .modal-title {
-  @apply text-xl font-bold text-egyptian-gold mb-4 text-center;
 }
 /* Toast/Notification styles */
@@ -181,12 +194,12 @@ body {
 /* Player avatar */
 .player-avatar {
-  @apply w-12 h-12 rounded-full bg-egyptian-gold flex items-center justify-center;
-  @apply text-nile-blue font-bold text-lg;
 }
 .player-avatar.current-turn {
-  @apply ring-4 ring-green-500 animate-pulse;
 }
 .player-avatar.eliminated {
@@ -206,35 +219,56 @@ body {
 /* Game board */
 .game-board {
-  @apply flex-1 flex flex-col justify-between p-4;
   background-size: cover;
   background-position: center;
 }
 /* Hand area */
 .hand-area {
-  @apply flex justify-center items-end gap-1 p-2;
   max-width: 100%;
-  flex-wrap: wrap;
-  overflow: hidden;
 }
 .hand-area .card {
   @apply flex-shrink-0;
-  width: 60px;
-  max-width: 80px;
 }
 @media (min-width: 768px) {
   .hand-area {
     @apply gap-2 p-4;
-    flex-wrap: nowrap;
     overflow-x: auto;
   }
   .hand-area .card {
     width: 100px;
     max-width: 120px;
   }
 }

   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
+  /* Support safe areas for notch/home indicator */
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 body {
   color: #f5f5dc;
   min-height: 100vh;
   min-height: 100dvh;
+  /* Fullscreen mobile */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
 }
 #root {
   min-height: 100vh;
   min-height: 100dvh;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 /* Landscape lock overlay */
 .modal-overlay {
   @apply fixed inset-0 bg-black/70 flex items-center justify-center z-50;
   @apply backdrop-blur-sm;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 .modal-content {
+  @apply bg-gradient-to-br from-nile-blue to-gray-900 rounded-xl p-3 md:p-6;
   @apply border-2 border-egyptian-gold shadow-2xl;
+  @apply max-w-lg w-full mx-2 md:mx-4 max-h-[85vh] overflow-y-auto;
 }
 .modal-title {
+  @apply text-base md:text-xl font-bold text-egyptian-gold mb-2 md:mb-4 text-center;
 }
 /* Toast/Notification styles */
 /* Player avatar */
 .player-avatar {
+  @apply rounded-full bg-egyptian-gold flex items-center justify-center flex-shrink-0;
+  @apply text-nile-blue font-bold;
 }
 .player-avatar.current-turn {
+  @apply ring-2 md:ring-4 ring-green-500 animate-pulse;
 }
 .player-avatar.eliminated {
 /* Game board */
 .game-board {
+  @apply flex-1 flex flex-col justify-between;
   background-size: cover;
   background-position: center;
+  height: 100%;
+  overflow: hidden;
+  padding: 4px;
+  padding-top: max(4px, env(safe-area-inset-top));
+  padding-bottom: max(4px, env(safe-area-inset-bottom));
+  padding-left: max(4px, env(safe-area-inset-left));
+  padding-right: max(4px, env(safe-area-inset-right));
+}
+@media (min-width: 768px) {
+  .game-board {
+    padding: 16px;
+  }
 }
 /* Hand area */
 .hand-area {
+  @apply flex justify-center items-end gap-0 p-1;
   max-width: 100%;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.hand-area::-webkit-scrollbar {
+  display: none;
 }
 .hand-area .card {
   @apply flex-shrink-0;
+  width: 50px;
+  max-width: 60px;
+  margin: 0 -4px;
 }
 @media (min-width: 768px) {
   .hand-area {
     @apply gap-2 p-4;
     overflow-x: auto;
   }
   .hand-area .card {
     width: 100px;
     max-width: 120px;
+    margin: 0;
   }
 }