feat: add exit game button with confirmation dialog

- Add exit game button in top-left corner (door icon)
- Button only visible during active game phases (not in welcome/setup)
- Confirmation dialog prevents accidental exits
- Clears localStorage state and returns to welcome screen
- Fully responsive with mobile-optimized styling
- Bilingual support with Spanish/English confirmation messages

index.html

@@ -17,6 +17,11 @@
         <span class="language-text">EN</span>
     </button>
 
+    <button id="exit-game" class="exit-game" onclick="confirmExitGame()">
+        <span class="exit-icon">🚪</span>
+        <span class="exit-text" data-i18n="exitGame">Salir de la partida</span>
+    </button>
+
     <div class="container">
         <!-- Welcome screen -->
         <div id="welcome-screen" class="screen active">

script.js

@@ -73,7 +73,8 @@ const TRANSLATIONS = {
     counterclockwise: 'Antihorario',
     impostorsMustBeLess: 'Impostores debe ser menor que jugadores',
     animalsNature: 'Animales y Naturaleza',
-    everydayObjects: 'Objetos Cotidianos'
+    everydayObjects: 'Objetos Cotidianos',
+    exitGame: 'Salir de la partida'
   },
   en: {
     gameTitle: 'The Impostor Game',
@@ -140,7 +141,8 @@ const TRANSLATIONS = {
     counterclockwise: 'Counterclockwise',
     impostorsMustBeLess: 'Impostors must be less than players',
     animalsNature: 'Animals and Nature',
-    everydayObjects: 'Everyday Objects'
+    everydayObjects: 'Everyday Objects',
+    exitGame: 'Exit Game'
   }
 };
 
@@ -322,6 +324,10 @@ function updateStaticTexts() {
     else if (btn.id === 'confirm-vote-btn') btn.textContent = t('confirmVote');
     else if (btn.getAttribute('onclick') === 'newMatch()') btn.textContent = t('newMatch');
   });
+
+  // Exit game button
+  const exitText = document.querySelector('.exit-text');
+  if (exitText) exitText.textContent = t('exitGame');
 }
 
 // Embedded pools with impostor words [civilian_word, impostor_word]
@@ -994,6 +1000,7 @@ function showScreen(id) {
   document.getElementById(id).classList.add('active');
   state.phase = id.replace('-screen','');
   saveState();
+  updateExitButtonVisibility();
 }
 
 function newMatch() {
@@ -1003,6 +1010,26 @@ function newMatch() {
   showScreen('welcome-screen');
 }
 
+function confirmExitGame() {
+  const confirmMessage = currentLanguage === 'es'
+    ? '¿Estás seguro de que quieres salir de la partida? Se perderá todo el progreso actual.'
+    : 'Are you sure you want to exit the game? All current progress will be lost.';
+
+  if (confirm(confirmMessage)) {
+    newMatch();
+  }
+}
+
+function updateExitButtonVisibility() {
+  const exitBtn = document.getElementById('exit-game');
+  // Show exit button in all phases except welcome and setup
+  if (state.phase !== 'welcome' && state.phase !== 'setup') {
+    exitBtn.classList.add('visible');
+  } else {
+    exitBtn.classList.remove('visible');
+  }
+}
+
 // ---------- Theme system ----------
 function getSystemTheme() {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -1099,4 +1126,7 @@ document.addEventListener('DOMContentLoaded', () => {
       default: showScreen('welcome-screen');
     }
   }
+
+  // Initialize exit button visibility
+  updateExitButtonVisibility();
 })();

styles.css

@@ -377,6 +377,47 @@ button.ghost { background: var(--button-ghost-bg); color: var(--text-primary); f
   letter-spacing: 0.5px;
 }
 
+/* Exit game button */
+.exit-game {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: auto;
+  height: 50px;
+  padding: 0 15px;
+  border-radius: 25px;
+  border: 2px solid var(--border-color);
+  background: var(--container-bg);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 0.9em;
+  font-weight: 600;
+  box-shadow: 0 4px 12px var(--shadow-color);
+  transition: transform 0.2s ease, background 0.3s ease, border 0.3s ease;
+  z-index: 1000;
+  color: var(--text-primary);
+}
+.exit-game.visible {
+  display: inline-flex;
+}
+.exit-game:hover {
+  transform: scale(1.05);
+  background: var(--card-hover);
+}
+.exit-game:active {
+  transform: scale(0.95);
+}
+.exit-icon {
+  font-size: 1.2em;
+}
+.exit-text {
+  font-size: 0.85em;
+}
+
 /* Mobile optimization */
 @media (max-width: 600px) {
   body {
@@ -407,5 +448,21 @@ button.ghost { background: var(--button-ghost-bg); color: var(--text-primary); f
   .language-text {
     font-size: 0.85em;
   }
+
+  .exit-game {
+    top: 10px;
+    left: 10px;
+    height: 45px;
+    padding: 0 12px;
+    font-size: 0.85em;
+  }
+
+  .exit-icon {
+    font-size: 1.1em;
+  }
+
+  .exit-text {
+    font-size: 0.8em;
+  }
 }