From fc229f0ca6b48cf28f60515510e935be9c88d823 Mon Sep 17 00:00:00 2001
From: Ronnie <github.cranial@nothingemail.com>
Date: Tue, 27 May 2025 21:35:39 -0400
Subject: [PATCH] Add mode and difficulty badges to death screen; update styles
 for improved visibility

---
 game.js    |  4 ++++
 index.html | 10 +++++++++
 styles.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/game.js b/game.js
index bb018d0..8fdf7f0 100644
--- a/game.js
+++ b/game.js
@@ -142,6 +142,10 @@ function showDeathScreen() {
         levelRow.style.display = 'flex';
     }
     
+    // Update mode and difficulty badges
+    document.querySelector('.mode-text').textContent = gameState.selectedMode;
+    document.querySelector('.difficulty-text').textContent = gameState.selectedDifficulty;
+    
     // Show death screen
     deathScreen.classList.add('show');
 }
diff --git a/index.html b/index.html
index 4cd6113..8310367 100644
--- a/index.html
+++ b/index.html
@@ -124,6 +124,16 @@
                         <i class="fas fa-clock"></i>
                         <span>Time Survived: <span class="final-time">0:00</span></span>
                     </div>
+                    <div class="game-info">
+                        <div class="mode-badge">
+                            <i class="fas fa-gamepad"></i>
+                            <span class="mode-text">Levels</span>
+                        </div>
+                        <div class="difficulty-badge">
+                            <i class="fas fa-trophy"></i>
+                            <span class="difficulty-text">Medium</span>
+                        </div>
+                    </div>
                 </div>
                 <button class="restart-btn">
                     <i class="fas fa-redo"></i> Play Again
diff --git a/styles.css b/styles.css
index 3575c69..fa84874 100644
--- a/styles.css
+++ b/styles.css
@@ -687,4 +687,66 @@ button:hover {
 .notification-content .bonus-change {
     color: #ffd93d;
     font-weight: 600;
+}
+
+.game-info {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(96, 165, 250, 0.2);
+}
+
+.mode-badge, .difficulty-badge {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    transition: all 0.3s ease;
+}
+
+.mode-badge {
+    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.1));
+    border: 1px solid rgba(96, 165, 250, 0.3);
+}
+
+.difficulty-badge {
+    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
+    border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+.mode-badge i, .difficulty-badge i {
+    font-size: 1.2rem;
+}
+
+.mode-badge i {
+    color: #60a5fa;
+}
+
+.difficulty-badge i {
+    color: #fbbf24;
+}
+
+.mode-badge .mode-text, .difficulty-badge .difficulty-text {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #fff;
+    text-transform: capitalize;
+}
+
+.mode-badge:hover, .difficulty-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.mode-badge:hover {
+    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.2));
+}
+
+.difficulty-badge:hover {
+    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.2));
 } 
\ No newline at end of file