Enhance game settings UI with improved button styles and icons; update difficulty and mode selection logic to show relevant information dynamically.

game.js

@@ -142,9 +142,12 @@ function showDeathScreen() {
         levelRow.style.display = 'flex';
     }
     
-    // Update mode and difficulty badges
+    // Update mode and difficulty badges with proper capitalization
-    document.querySelector('.mode-text').textContent = gameState.selectedMode;
+    const modeText = gameState.selectedMode.charAt(0).toUpperCase() + gameState.selectedMode.slice(1);
-    document.querySelector('.difficulty-text').textContent = gameState.selectedDifficulty;
+    const difficultyText = gameState.selectedDifficulty.charAt(0).toUpperCase() + gameState.selectedDifficulty.slice(1);
+    
+    document.querySelector('.mode-text').textContent = modeText;
+    document.querySelector('.difficulty-text').textContent = difficultyText;
     
     // Show death screen
     deathScreen.classList.add('show');
@@ -178,6 +181,11 @@ difficultyButtons.forEach(button => {
         button.classList.add('active');
         gameState.selectedDifficulty = button.dataset.difficulty;
         setCookie('difficulty', gameState.selectedDifficulty, 365);
+        
+        // Update info text visibility
+        document.querySelectorAll('.difficulty-info .info-text').forEach(info => info.style.display = 'none');
+        document.querySelector(`.${gameState.selectedDifficulty}-info`).style.display = 'block';
+        
         restartGame();
     });
 });
@@ -188,6 +196,11 @@ modeButtons.forEach(button => {
         button.classList.add('active');
         gameState.selectedMode = button.dataset.mode;
         setCookie('mode', gameState.selectedMode, 365);
+        
+        // Update info text visibility
+        document.querySelectorAll('.mode-info .info-text').forEach(info => info.style.display = 'none');
+        document.querySelector(`.${gameState.selectedMode}-info`).style.display = 'block';
+        
         restartGame();
     });
 });

index.html

@@ -58,28 +58,30 @@
             <i class="fas fa-cog"></i>
             <div class="settings-menu">
                 <h2>Game Settings</h2>
-                <div class="difficulty">
+                <div class="settings-grid">
-                    <h3>Select Difficulty</h3>
+                    <div class="difficulty">
-                    <div class="difficulty-options">
+                        <h3>Select Difficulty</h3>
-                        <button class="difficulty-btn" data-difficulty="easy">Easy</button>
+                        <div class="difficulty-options">
-                        <button class="difficulty-btn" data-difficulty="medium">Medium</button>
+                            <button class="difficulty-btn" data-difficulty="easy"><i class="fas fa-leaf"></i> Easy</button>
-                        <button class="difficulty-btn" data-difficulty="hard">Hard</button>
+                            <button class="difficulty-btn" data-difficulty="medium"><i class="fas fa-bolt"></i> Medium</button>
+                            <button class="difficulty-btn" data-difficulty="hard"><i class="fas fa-skull-crossbones"></i> Hard</button>
+                        </div>
+                        <div class="difficulty-info">
+                            <p class="info-text easy-info">Easy: 10 squares, slower speed, infinite lives</p>
+                            <p class="info-text medium-info">Medium: 15 squares, medium speed, 5 lives</p>
+                            <p class="info-text hard-info">Hard: 20 squares, fast speed, 3 lives</p>
+                        </div>
                     </div>
-                    <div class="difficulty-info">
+                    <div class="game-mode">
-                        <p class="info-text easy-info">Easy: 10 squares, slower speed, infinite lives</p>
+                        <h3>Game Mode</h3>
-                        <p class="info-text medium-info">Medium: 15 squares, medium speed, 5 lives</p>
+                        <div class="mode-options">
-                        <p class="info-text hard-info">Hard: 20 squares, fast speed, 3 lives</p>
+                            <button class="mode-btn" data-mode="levels"><i class="fas fa-layer-group"></i> Levels</button>
-                    </div>
+                            <button class="mode-btn" data-mode="endless"><i class="fas fa-infinity"></i> Endless</button>
-                </div>
+                        </div>
-                <div class="game-mode">
+                        <div class="mode-info">
-                    <h3>Game Mode</h3>
+                            <p class="info-text levels-info">Levels: Clear all squares to advance. Lives matter!</p>
-                    <div class="mode-options">
+                            <p class="info-text endless-info">Endless: Keep clearing squares for high score</p>
-                        <button class="mode-btn" data-mode="levels">Levels</button>
+                        </div>
-                        <button class="mode-btn" data-mode="endless">Endless</button>
-                    </div>
-                    <div class="mode-info">
-                        <p class="info-text levels-info">Levels: Clear all squares to advance. Lives matter!</p>
-                        <p class="info-text endless-info">Endless: Keep clearing squares for high score</p>
                     </div>
                 </div>
                 <button id="restart-game" class="restart-btn">

styles.css

@@ -74,32 +74,148 @@ h3 {
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
+    margin-bottom: 20px;
+    width: 100%;
 }
 
-button {
+.difficulty-btn, .mode-btn {
-    padding: 10px 20px;
+    width: 100%;
-    border: none;
+    padding: 12px 20px 12px 18px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
-    cursor: pointer;
+    background: rgba(255, 255, 255, 0.05);
-    font-size: 1rem;
-    transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.1);
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.1);
     font-weight: 500;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    font-size: 1.05rem;
 }
 
-button:hover {
+.difficulty-btn i, .mode-btn i {
-    background: rgba(255, 255, 255, 0.15);
+    font-size: 1.15rem;
+    opacity: 0.85;
+    margin-right: 2px;
+    margin-left: 2px;
+    display: flex;
+    align-items: center;
+}
+
+.difficulty-btn[data-difficulty="easy"] i {
+    color: #4ecca3;
+}
+
+.difficulty-btn[data-difficulty="medium"] i {
+    color: #fbbf24;
+}
+
+.difficulty-btn[data-difficulty="hard"] i {
+    color: #f87171;
+}
+
+.mode-btn[data-mode="levels"] i {
+    color: #60a5fa;
+}
+
+.mode-btn[data-mode="endless"] i {
+    color: #60a5fa;
+}
+
+.difficulty-btn:hover, .mode-btn:hover {
     transform: translateY(-2px);
     border-color: rgba(96, 165, 250, 0.3);
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .difficulty-btn.active, .mode-btn.active {
-    background: #60a5fa;
+    color: #fff;
-    color: #0f172a;
-    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
     border-color: transparent;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+}
+
+.difficulty-btn[data-difficulty="easy"].active {
+    background: linear-gradient(135deg, #4ecca3, #34d399);
+}
+
+.difficulty-btn[data-difficulty="medium"].active {
+    background: linear-gradient(135deg, #fbbf24, #f59e0b);
+}
+
+.difficulty-btn[data-difficulty="hard"].active {
+    background: linear-gradient(135deg, #f87171, #ef4444);
+}
+
+.mode-btn[data-mode="levels"].active {
+    background: linear-gradient(135deg, #60a5fa, #3b82f6);
+}
+
+.mode-btn[data-mode="endless"].active {
+    background: linear-gradient(135deg, #60a5fa, #3b82f6);
+}
+
+.difficulty-btn.active i, .mode-btn.active i {
+    color: #fff;
+    opacity: 1;
+}
+
+/* Remove the old ::after pseudo-elements */
+.difficulty-btn::after, .mode-btn::after {
+    display: none;
+}
+
+.difficulty-info, .mode-info {
+    margin-top: 15px;
+    font-size: 0.9rem;
+    color: #94a3b8;
+    text-align: center;
+    padding: 12px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.info-text {
+    display: none;
+    padding: 8px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    margin: 5px 0;
+    transition: all 0.3s ease;
+    line-height: 1.5;
+}
+
+.difficulty-btn.active + .difficulty-info .info-text,
+.mode-btn.active + .mode-info .info-text {
+    display: block;
+    animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Add icons to buttons */
+.difficulty-btn::after, .mode-btn::after {
+    content: '';
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    vertical-align: middle;
+    opacity: 0.7;
 }
 
 .start-btn {
@@ -195,16 +311,13 @@ button:hover {
     padding: 25px;
     border-radius: 20px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-    width: 350px;
+    width: 600px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s ease;
     margin-top: 10px;
     border: 1px solid rgba(96, 165, 250, 0.2);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }
 
 .settings-icon:hover .settings-menu {
@@ -229,15 +342,6 @@ button:hover {
     text-align: center;
 }
 
-.difficulty-options, .mode-options {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-    width: 100%;
-}
-
 .difficulty-options button, .mode-options button {
     min-width: 100px;
     text-align: center;
@@ -388,28 +492,6 @@ button:hover {
     animation: pulse 1s infinite;
 }
 
-.difficulty-info, .mode-info {
-    margin-top: 10px;
-    font-size: 0.9rem;
-    color: #fff;
-    opacity: 0.8;
-    text-align: center;
-}
-
-.info-text {
-    display: none;
-    padding: 8px;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    margin: 5px 0;
-    transition: all 0.3s ease;
-}
-
-.difficulty-btn.active + .difficulty-info .info-text,
-.mode-btn.active + .mode-info .info-text {
-    display: block;
-}
-
 /* Death Screen */
 .death-screen {
     position: fixed;
@@ -750,3 +832,141 @@ button:hover {
 .difficulty-badge:hover {
     background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.2));
 }
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.difficulty, .game-mode {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 20px;
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.difficulty h3, .game-mode h3 {
+    color: #60a5fa;
+    font-size: 1.2rem;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.difficulty-options, .mode-options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.difficulty-btn, .mode-btn {
+    width: 100%;
+    padding: 12px 20px 12px 18px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    font-size: 1.05rem;
+}
+
+.difficulty-btn i, .mode-btn i {
+    font-size: 1.15rem;
+    opacity: 0.85;
+    margin-right: 2px;
+    margin-left: 2px;
+    display: flex;
+    align-items: center;
+}
+
+.difficulty-btn[data-difficulty="easy"] i {
+    color: #4ecca3;
+}
+
+.difficulty-btn[data-difficulty="medium"] i {
+    color: #fbbf24;
+}
+
+.difficulty-btn[data-difficulty="hard"] i {
+    color: #f87171;
+}
+
+.mode-btn[data-mode="levels"] i {
+    color: #60a5fa;
+}
+
+.mode-btn[data-mode="endless"] i {
+    color: #60a5fa;
+}
+
+.difficulty-btn:hover, .mode-btn:hover {
+    transform: translateY(-2px);
+    border-color: rgba(96, 165, 250, 0.3);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.difficulty-btn.active, .mode-btn.active {
+    color: #fff;
+    border-color: transparent;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+}
+
+.difficulty-btn[data-difficulty="easy"].active {
+    background: linear-gradient(135deg, #4ecca3, #34d399);
+}
+
+.difficulty-btn[data-difficulty="medium"].active {
+    background: linear-gradient(135deg, #fbbf24, #f59e0b);
+}
+
+.difficulty-btn[data-difficulty="hard"].active {
+    background: linear-gradient(135deg, #f87171, #ef4444);
+}
+
+.mode-btn[data-mode="levels"].active {
+    background: linear-gradient(135deg, #60a5fa, #3b82f6);
+}
+
+.mode-btn[data-mode="endless"].active {
+    background: linear-gradient(135deg, #60a5fa, #3b82f6);
+}
+
+.difficulty-btn.active i, .mode-btn.active i {
+    color: #fff;
+    opacity: 1;
+}
+
+.difficulty-info, .mode-info {
+    margin-top: 15px;
+    font-size: 0.9rem;
+    color: #94a3b8;
+    text-align: center;
+    padding: 12px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.info-text {
+    display: none;
+    padding: 8px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    margin: 5px 0;
+    transition: all 0.3s ease;
+    line-height: 1.5;
+}
+
+.difficulty-btn.active + .difficulty-info .info-text,
+.mode-btn.active + .mode-info .info-text {
+    display: block;
+    animation: fadeIn 0.3s ease forwards;
+}