diff --git a/src/App.component-integration.test.tsx b/src/App.component-integration.test.tsx
index d8b85d9..9436151 100644
--- a/src/App.component-integration.test.tsx
+++ b/src/App.component-integration.test.tsx
@@ -292,7 +292,7 @@ describe("Component Integration Tests", () => {
       const muteButton = screen.getByTestId("mute-button");
       
       // Initially unmuted
-      expect(muteButton).toHaveTextContent("Mute");
+      expect(muteButton).toHaveTextContent("🔊");
       
       // Mute
       await user.click(muteButton);
@@ -300,7 +300,7 @@ describe("Component Integration Tests", () => {
       await waitFor(() => {
         expect(mockSetMuted).toHaveBeenCalledWith(true);
       });
-      expect(muteButton).toHaveTextContent("Unmute");
+      expect(muteButton).toHaveTextContent("🔇");
       
       // Audio status indicator should hide
       expect(screen.queryByText(/Sound enabled/i)).not.toBeInTheDocument();
diff --git a/src/App.css b/src/App.css
index 9bf3235..fb945c0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,4 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
+/* Animation for logo effects */
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -41,55 +35,6 @@
   color: #888;
 }
 
-.app-container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  background-color: #0d1117;
-  color: white;
-  overflow: hidden;
-}
-
-.app-container h1 {
-  font-size: 2.5em;
-  line-height: 1.1;
-  margin: 0;
-  color: #646cff;
-  margin: 10px 0;
-  font-size: 24px;
-}
-
-.app-container canvas {
-  border: 2px solid #646cff;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  display: block;
-  width: 100% !important;
-  height: calc(100vh - 100px) !important;
-  max-height: none;
-  max-width: none;
-  border: none;
-}
-
-.instructions {
-  color: #888;
-  font-style: italic;
-  margin: 0;
-  margin: 8px 0;
-  font-size: 14px;
-  color: #8b949e;
-}
-
 /* Ensure fullscreen across different devices */
 html,
 body,
@@ -99,6 +44,7 @@ body,
   margin: 0;
   padding: 0;
   overflow: hidden;
+  position: fixed;
 }
 
 body,
@@ -114,31 +60,36 @@ html {
 .app-container {
   width: 100%;
   height: 100vh;
+  height: 100dvh; /* Use dynamic viewport height for mobile browsers */
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;
+  position: relative;
+  overflow: hidden;
 }
 
 .app-container h1 {
-  margin: 10px 0;
-  font-size: 24px;
+  margin: 5px 0;
+  font-size: 20px;
   color: #646cff;
+  flex-shrink: 0;
 }
 
 .app-container canvas {
   display: block;
   width: 100% !important;
-  height: calc(100vh - 100px) !important;
+  height: 100% !important;
   max-height: none !important;
   max-width: none !important;
   cursor: crosshair;
 }
 
 .instructions {
-  margin: 8px 0;
-  font-size: 14px;
+  margin: 5px 0;
+  font-size: 12px;
   color: #8b949e;
+  flex-shrink: 0;
 }
 
 /* Animation for pulse effect */
@@ -163,13 +114,46 @@ html {
   }
 }
 
-@media (max-width: 900px) {
-  .app-container {
-    padding: 1rem;
+/* Mobile-specific adjustments */
+@media (max-width: 768px) {
+  .app-container h1 {
+    font-size: 16px;
+    margin: 3px 0;
+  }
+
+  .instructions {
+    font-size: 10px;
+    margin: 3px 0;
+  }
+}
+
+/* Portrait mode specific adjustments */
+@media (max-width: 768px) and (orientation: portrait) {
+  .app-container h1 {
+    font-size: 14px;
+    margin: 2px 0;
+  }
+
+  .instructions {
+    display: none; /* Hide instructions in portrait mode to save space */
+  }
+}
+
+/* Landscape mode specific adjustments */
+@media (max-width: 900px) and (orientation: landscape) {
+  .app-container h1 {
+    font-size: 16px;
+  }
+}
+
+/* Very small screens */
+@media (max-height: 600px) {
+  .app-container h1 {
+    font-size: 14px;
+    margin: 2px 0;
   }
 
-  .app-container canvas {
-    max-width: 100%;
-    height: auto;
+  .instructions {
+    display: none;
   }
 }
diff --git a/src/App.interaction.test.tsx b/src/App.interaction.test.tsx
index 9c4407b..b947699 100644
--- a/src/App.interaction.test.tsx
+++ b/src/App.interaction.test.tsx
@@ -174,14 +174,14 @@ describe("App Component Interactions", () => {
       render(<App />);
       
       const muteButton = screen.getByTestId("mute-button");
-      expect(muteButton).toHaveTextContent("Mute");
+      expect(muteButton).toHaveTextContent("🔊");
       
       await user.click(muteButton);
       
       await waitFor(() => {
         expect(mockSetMuted).toHaveBeenCalledWith(true);
       });
-      expect(muteButton).toHaveTextContent("Unmute");
+      expect(muteButton).toHaveTextContent("🔇");
     });
 
     it("should unmute audio when mute button is clicked again", async () => {
@@ -201,7 +201,7 @@ describe("App Component Interactions", () => {
       await waitFor(() => {
         expect(mockSetMuted).toHaveBeenCalledWith(false);
       });
-      expect(muteButton).toHaveTextContent("Mute");
+      expect(muteButton).toHaveTextContent("🔊");
     });
 
     it("should hide audio status when muted", async () => {
diff --git a/src/App.test.tsx b/src/App.test.tsx
index bdeb8e3..20ebc6c 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -110,7 +110,7 @@ describe("App Component", () => {
   it("canvas has correct inline styles", () => {
     render(<App />);
     const canvasContainer = screen.getByTestId("threejs-canvas-container");
-    expect(canvasContainer).toHaveStyle({ width: "100%", height: "600px" });
+    expect(canvasContainer).toHaveStyle({ width: "100%", height: "100%" });
   });
 
   it("renders all Three.js scene elements", () => {
diff --git a/src/App.tsx b/src/App.tsx
index fbf399a..cbb949f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,16 +23,20 @@ const OVERLAY_STYLES = {
 
 const INSTRUCTIONS_STYLES = {
   ...OVERLAY_STYLES,
-  bottom: "80px",
+  bottom: "10px",
   left: "50%",
   transform: "translateX(-50%)",
-  fontSize: "16px",
+  fontSize: "14px",
   textAlign: "center" as const,
+  maxWidth: "90%",
+  whiteSpace: "nowrap" as const,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
 };
 
 const AUDIO_STATUS_STYLES = {
   position: "absolute" as const,
-  bottom: "40px",
+  bottom: "35px",
   left: "50%",
   transform: "translateX(-50%)",
   zIndex: 10,
@@ -40,7 +44,11 @@ const AUDIO_STATUS_STYLES = {
   padding: "6px 12px",
   borderRadius: "8px",
   color: "#00ff88",
-  fontSize: "12px",
+  fontSize: "11px",
+  maxWidth: "90%",
+  whiteSpace: "nowrap" as const,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
 };
 
 const VOLUME_CONTROL_STYLES = {
@@ -522,44 +530,78 @@ function App(): JSX.Element {
 
   return (
     <div className="app-container" data-testid="app-container">
-      <h1 data-testid="app-title">🎯 Target Shooter</h1>
+      <h1 data-testid="app-title" style={{ margin: "5px 0", fontSize: "20px" }}>🎯 Target Shooter</h1>
       
       {/* HUD Overlay for testing - outside canvas */}
-      <div style={{ position: "absolute", top: "60px", left: "20px", zIndex: 10, display: "flex", gap: "20px" }}>
-        <div data-testid="timer-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "10px 20px", borderRadius: "8px", backdropFilter: "blur(10px)" }}>
-          <div style={{ color: "#7d8590", fontSize: "10px", marginBottom: "4px" }}>TIME</div>
-          <div style={{ color: gameState.timeLeft <= 10 ? "#ff4444" : "#00ff88", fontSize: "24px", fontWeight: "bold" }}>{gameState.timeLeft}s</div>
+      <div 
+        style={{ 
+          position: "absolute", 
+          top: "60px", 
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 10, 
+          display: "flex", 
+          gap: "10px",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          maxWidth: "95%",
+          padding: "0 10px"
+        }}
+      >
+        <div data-testid="timer-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 12px", borderRadius: "8px", backdropFilter: "blur(10px)", minWidth: "60px" }}>
+          <div style={{ color: "#7d8590", fontSize: "9px", marginBottom: "2px" }}>TIME</div>
+          <div style={{ color: gameState.timeLeft <= 10 ? "#ff4444" : "#00ff88", fontSize: "18px", fontWeight: "bold" }}>{gameState.timeLeft}s</div>
         </div>
         
-        <div data-testid="score-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "10px 20px", borderRadius: "8px", backdropFilter: "blur(10px)" }}>
-          <div data-testid="score-label" style={{ color: "#7d8590", fontSize: "10px", marginBottom: "4px" }}>SCORE</div>
-          <div data-testid="score-value" style={{ color: "#00ff88", fontSize: "24px", fontWeight: "bold" }}>{gameState.score}</div>
-          {gameState.combo > 0 && <div style={{ color: "#ffa500", fontSize: "12px" }}>🔥 COMBO x{gameState.combo}</div>}
+        <div data-testid="score-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 12px", borderRadius: "8px", backdropFilter: "blur(10px)", minWidth: "70px" }}>
+          <div data-testid="score-label" style={{ color: "#7d8590", fontSize: "9px", marginBottom: "2px" }}>SCORE</div>
+          <div data-testid="score-value" style={{ color: "#00ff88", fontSize: "18px", fontWeight: "bold" }}>{gameState.score}</div>
+          {gameState.combo > 0 && <div style={{ color: "#ffa500", fontSize: "10px" }}>🔥 x{gameState.combo}</div>}
         </div>
         
-        <div data-testid="level-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "10px 20px", borderRadius: "8px", backdropFilter: "blur(10px)" }}>
-          <div style={{ color: "#7d8590", fontSize: "10px", marginBottom: "4px" }}>LEVEL</div>
-          <div style={{ color: "#646cff", fontSize: "24px", fontWeight: "bold" }}>{gameState.level}</div>
-          {gameState.highScore > 0 && <div style={{ color: "#ffa500", fontSize: "10px" }}>HIGH: {gameState.highScore}</div>}
+        <div data-testid="level-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 12px", borderRadius: "8px", backdropFilter: "blur(10px)", minWidth: "60px" }}>
+          <div style={{ color: "#7d8590", fontSize: "9px", marginBottom: "2px" }}>LEVEL</div>
+          <div style={{ color: "#646cff", fontSize: "18px", fontWeight: "bold" }}>{gameState.level}</div>
+          {gameState.highScore > 0 && <div style={{ color: "#ffa500", fontSize: "9px" }}>HI: {gameState.highScore}</div>}
         </div>
         
-        <div data-testid="accuracy-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "10px 20px", borderRadius: "8px", backdropFilter: "blur(10px)" }}>
-          <div style={{ color: "#7d8590", fontSize: "10px", marginBottom: "4px" }}>ACCURACY</div>
-          <div style={{ color: "#00ffff", fontSize: "24px", fontWeight: "bold" }}>
+        <div data-testid="accuracy-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 12px", borderRadius: "8px", backdropFilter: "blur(10px)", minWidth: "70px" }}>
+          <div style={{ color: "#7d8590", fontSize: "9px", marginBottom: "2px" }}>ACC</div>
+          <div style={{ color: "#00ffff", fontSize: "18px", fontWeight: "bold" }}>
             {gameState.totalClicks > 0 ? Math.round((gameState.successfulHits / gameState.totalClicks) * 100) : 100}%
           </div>
-          <div style={{ color: "#7d8590", fontSize: "10px" }}>{gameState.successfulHits}/{gameState.totalClicks}</div>
+          <div style={{ color: "#7d8590", fontSize: "9px" }}>{gameState.successfulHits}/{gameState.totalClicks}</div>
         </div>
         
-        <div data-testid="targets-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "10px 20px", borderRadius: "8px", backdropFilter: "blur(10px)" }}>
-          <div style={{ color: "#7d8590", fontSize: "10px", marginBottom: "4px" }}>TARGETS</div>
-          <div style={{ color: "#ff66ff", fontSize: "24px", fontWeight: "bold" }}>{gameState.targets.length}</div>
+        <div data-testid="targets-display" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 12px", borderRadius: "8px", backdropFilter: "blur(10px)", minWidth: "60px" }}>
+          <div style={{ color: "#7d8590", fontSize: "9px", marginBottom: "2px" }}>TARGETS</div>
+          <div style={{ color: "#ff66ff", fontSize: "18px", fontWeight: "bold" }}>{gameState.targets.length}</div>
         </div>
       </div>
       
       {/* Game Status and Controls */}
-      <div style={{ position: "absolute", top: "60px", right: "20px", zIndex: 10, display: "flex", gap: "10px", alignItems: "center" }}>
-        <div data-testid="game-status" style={{ background: "rgba(33, 38, 45, 0.7)", padding: "8px 16px", borderRadius: "8px", backdropFilter: "blur(10px)", color: gameState.isPlaying && gameState.timeLeft > 0 ? "#00ff88" : "#ffa500", fontSize: "14px", fontWeight: "bold" }}>
+      <div style={{ 
+        position: "absolute", 
+        top: "5px", 
+        right: "5px", 
+        zIndex: 10, 
+        display: "flex", 
+        gap: "5px", 
+        alignItems: "center",
+        flexWrap: "wrap",
+        justifyContent: "flex-end",
+        maxWidth: "95%"
+      }}>
+        <div data-testid="game-status" style={{ 
+          background: "rgba(33, 38, 45, 0.7)", 
+          padding: "6px 10px", 
+          borderRadius: "8px", 
+          backdropFilter: "blur(10px)", 
+          color: gameState.isPlaying && gameState.timeLeft > 0 ? "#00ff88" : "#ffa500", 
+          fontSize: "12px", 
+          fontWeight: "bold",
+          whiteSpace: "nowrap"
+        }}>
           {gameState.timeLeft <= 0 ? "⏱️ Time's Up!" : gameState.isPlaying ? "🎯 Active" : "⏸️ Paused"}
         </div>
         <button
@@ -570,14 +612,15 @@ function App(): JSX.Element {
             background: gameState.timeLeft <= 0 ? "#666666" : gameState.isPlaying ? "#ff6b35" : "#00c851",
             color: "white",
             border: "none",
-            padding: "8px 16px",
+            padding: "6px 10px",
             borderRadius: "8px",
             cursor: gameState.timeLeft <= 0 ? "not-allowed" : "pointer",
             fontWeight: "bold",
-            fontSize: "14px",
+            fontSize: "12px",
+            whiteSpace: "nowrap"
           }}
         >
-          {gameState.isPlaying ? "⏸️ Pause" : "▶️ Resume"}
+          {gameState.isPlaying ? "⏸️" : "▶️"}
         </button>
         <button
           onClick={resetGame}
@@ -586,14 +629,15 @@ function App(): JSX.Element {
             background: "#7c3aed",
             color: "white",
             border: "none",
-            padding: "8px 16px",
+            padding: "6px 10px",
             borderRadius: "8px",
             cursor: "pointer",
             fontWeight: "bold",
-            fontSize: "14px",
+            fontSize: "12px",
+            whiteSpace: "nowrap"
           }}
         >
-          🔄 Reset
+          🔄
         </button>
         <button
           onClick={handleMuteToggle}
@@ -602,17 +646,21 @@ function App(): JSX.Element {
             background: isMuted ? "#666666" : "#10b981",
             color: "white",
             border: "none",
-            padding: "8px 16px",
+            padding: "6px 10px",
             borderRadius: "8px",
             cursor: "pointer",
             fontWeight: "bold",
-            fontSize: "14px",
+            fontSize: "12px",
+            whiteSpace: "nowrap"
           }}
         >
-          {isMuted ? "🔇 Unmute" : "🔊 Mute"}
+          {isMuted ? "🔇" : "🔊"}
         </button>
-        <div style={VOLUME_CONTROL_STYLES}>
-          <label htmlFor="volume-slider" style={{ color: "white", fontSize: "14px", fontWeight: "bold" }}>
+        <div style={{
+          ...VOLUME_CONTROL_STYLES,
+          padding: "6px 10px",
+        }}>
+          <label htmlFor="volume-slider" style={{ color: "white", fontSize: "12px", fontWeight: "bold" }}>
             🔊
           </label>
           <input
@@ -626,11 +674,11 @@ function App(): JSX.Element {
             onInput={handleVolumeChange}
             data-testid="volume-slider"
             style={{
-              width: "100px",
+              width: "60px",
               cursor: "pointer",
             }}
           />
-          <span style={{ color: "white", fontSize: "12px", minWidth: "35px" }}>
+          <span style={{ color: "white", fontSize: "10px", minWidth: "30px" }}>
             {Math.round(volume * 100)}%
           </span>
         </div>
@@ -676,7 +724,13 @@ function App(): JSX.Element {
       
       <div
         data-testid="threejs-canvas-container"
-        style={{ width: "100%", height: "600px", position: "relative" }}
+        style={{ 
+          width: "100%", 
+          height: "100%", 
+          position: "relative",
+          flex: 1,
+          minHeight: 0
+        }}
       >
         {/* Hidden DOM element for Cypress testing - indicates target sphere exists */}
         {gameState.isPlaying && gameState.timeLeft > 0 && (
@@ -696,7 +750,11 @@ function App(): JSX.Element {
         )}
         <Canvas
           camera={{ position: [0, 2, 8], fov: 50 }}
-          style={{ background: "linear-gradient(135deg, #0d1117 0%, #1a1f2e 100%)" }}
+          style={{ 
+            background: "linear-gradient(135deg, #0d1117 0%, #1a1f2e 100%)",
+            width: "100%",
+            height: "100%"
+          }}
           data-testid="threejs-canvas"
           shadows
         >
@@ -709,7 +767,11 @@ function App(): JSX.Element {
           />
         </Canvas>
       </div>
-      <p className="instructions" data-testid="app-instructions">
+      <p className="instructions" data-testid="app-instructions" style={{ 
+        margin: "5px 0", 
+        fontSize: "12px",
+        display: window.innerHeight < 600 ? "none" : "block"
+      }}>
         An immersive 3D target shooting game with combos, levels, and time pressure!
       </p>
     </div>