feat: add voting mode selector and update styles for improved UI

www/index.html

@@ -77,10 +77,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600;700&family=Courier+Prime:wght@400;700&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.3a5cdf49.css">
+    <link rel="stylesheet" href="styles.715a864d.css">
     <link rel="icon" type="image/png" href="logo.78f51359.png">
     <link rel="sitemap" type="application/xml" href="/www/sitemap.xml">
-    <link rel="stylesheet" href="styles.3a5cdf49.css">
+    <link rel="stylesheet" href="styles.715a864d.css">
     <link rel="icon" type="image/png" href="logo.78f51359.png">
     <link rel="manifest" href="manifest.webmanifest">
     <meta name="theme-color" content="#ff4444">
@@ -183,6 +183,19 @@
                 <label for="deliberation-time">Deliberación (seg):</label>
                 <input type="number" id="deliberation-time" min="30" max="300" step="10" value="170">
             </div>
+            <div class="form-group compact">
+                <label id="voting-mode-label">Modo de votación:</label>
+                <div class="voting-mode-selector" id="voting-mode-selector">
+                    <button type="button" class="voting-mode-btn selected" id="voting-mode-individual" onclick="setVotingMode('individual')">
+                        <span class="voting-mode-icon">🗳️</span>
+                        <span class="voting-mode-name">Individual</span>
+                    </button>
+                    <button type="button" class="voting-mode-btn" id="voting-mode-raisedHand" onclick="setVotingMode('raisedHand')">
+                        <span class="voting-mode-icon">✋</span>
+                        <span class="voting-mode-name">Mano alzada</span>
+                    </button>
+                </div>
+            </div>
             <button onclick="goToPools()">Siguiente</button>
             <button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
         </div>
@@ -190,7 +203,6 @@
         <!-- Pools selection screen -->
         <div id="pools-screen" class="screen">
             <h1>Selección de Pools</h1>
-            <p class="info-text">Toca para seleccionar las categorías de palabras que quieres usar en la partida.</p>
             <div class="pool-buttons-wrapper">
                 <div id="pool-buttons" class="pool-buttons"></div>
             </div>
@@ -210,7 +222,6 @@
         <div id="pre-reveal-screen" class="screen">
             <h1>Listo para revelar</h1>
             <div class="info-text" id="config-summary"></div>
-            <p class="info-text">Cada jugador debe ver su rol en secreto. Desliza la cortina hacia arriba para revelar.</p>
             <button onclick="showScreen('reveal-screen'); loadCurrentReveal();">Empezar revelación</button>
             <button class="ghost" onclick="showScreen('names-screen')">← Volver</button>
         </div>
@@ -218,7 +229,7 @@
         <!-- Revelation screen -->
         <div id="reveal-screen" class="screen">
             <h1>Revelación</h1>
-            <p class="info-text">Turno de: <strong><span id="current-player-name">Jugador 1</span></strong><br><small>Los demás, no miréis. Mantén levantada la cortina para ver tu rol.</small></p>
+            <p class="info-text">Turno de: <strong><span id="current-player-name">Jugador 1</span></strong></p>
             <div class="curtain" id="curtain">
                 <div class="curtain-cover" id="curtain-cover">
                     <div class="curtain-icon">▲</div>
@@ -265,7 +276,7 @@
         </div>
     </div>
 
-    <script src="script.52beba25.js"></script>
+    <script src="script.8a765c63.js"></script>
 </body>
 </html>
 

www/script.js

@@ -88,7 +88,15 @@ const TRANSLATIONS = {
     everydayObjects: 'Objetos Cotidianos',
     exitGame: 'Salir de la partida',
     poolsSelection: 'Selección de Pools',
-    poolsSelectionText: 'Toca para seleccionar las categorías de palabras que quieres usar en la partida.'
+    poolsSelectionText: 'Toca para seleccionar las categorías de palabras que quieres usar en la partida.',
+    votingMode: 'Modo de votación',
+    individualVoting: 'Individual',
+    individualVotingDesc: 'Cada jugador vota en secreto',
+    raisedHandVoting: 'Mano alzada',
+    raisedHandVotingDesc: 'Votación grupal única',
+    groupVotingTitle: 'Votación a mano alzada',
+    groupVotingInstruction: 'Decidid en grupo a quién eliminar. Seleccionad',
+    groupVotingSuspects: 'sospechoso(s)'
   },
   en: {
     gameTitle: 'The Impostor Game',
@@ -158,7 +166,15 @@ const TRANSLATIONS = {
     everydayObjects: 'Everyday Objects',
     exitGame: 'Exit Game',
     poolsSelection: 'Pool Selection',
-    poolsSelectionText: 'Tap to select the word categories you want to use in the game.'
+    poolsSelectionText: 'Tap to select the word categories you want to use in the game.',
+    votingMode: 'Voting mode',
+    individualVoting: 'Individual',
+    individualVotingDesc: 'Each player votes secretly',
+    raisedHandVoting: 'Raised hand',
+    raisedHandVotingDesc: 'Single group vote',
+    groupVotingTitle: 'Raised hand voting',
+    groupVotingInstruction: 'Decide as a group who to eliminate. Select',
+    groupVotingSuspects: 'suspect(s)'
   }
 };
 
@@ -169,7 +185,21 @@ function getBrowserLanguage() {
   return lang.startsWith('es') ? 'es' : 'en';
 }
 
+function getUrlLanguage() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const lang = urlParams.get('lang');
+  if (lang === 'en' || lang === 'es') {
+    return lang;
+  }
+  return null;
+}
+
 function loadLanguage() {
+  // Priority: URL param > localStorage > browser language
+  const urlLang = getUrlLanguage();
+  if (urlLang) {
+    return urlLang;
+  }
   const saved = localStorage.getItem(LANGUAGE_STORAGE_KEY);
   return saved || getBrowserLanguage();
 }
@@ -204,6 +234,9 @@ async function updateUI() {
   // Update all static text elements
   updateStaticTexts();
 
+  // Update voting mode buttons
+  updateVotingModeButtons();
+
   // Reload pools for the new language (wait for it to complete)
   await loadPoolsList();
 
@@ -284,9 +317,6 @@ function updateStaticTexts() {
   const poolsTitle = document.querySelector('#pools-screen h1');
   if (poolsTitle) poolsTitle.textContent = t('poolsSelection');
 
-  const poolsText = document.querySelector('#pools-screen .info-text');
-  if (poolsText) poolsText.textContent = t('poolsSelectionText');
-
   // Names screen
   const namesTitle = document.querySelector('#names-screen h1');
   if (namesTitle) namesTitle.textContent = t('playerNames');
@@ -295,9 +325,6 @@ function updateStaticTexts() {
   const preRevealTitle = document.querySelector('#pre-reveal-screen h1');
   if (preRevealTitle) preRevealTitle.textContent = t('readyToReveal');
 
-  const preRevealText = document.querySelector('#pre-reveal-screen .info-text:not(#config-summary)');
-  if (preRevealText) preRevealText.textContent = t('eachPlayerSecret');
-
   // Reveal screen
   const revealTitle = document.querySelector('#reveal-screen h1');
   if (revealTitle) revealTitle.textContent = t('revelation');
@@ -388,7 +415,8 @@ let state = {
   selectedPools: [], // Now it's an array for multiple pools, will be populated based on language
   votingPool: null,
   isTiebreak: false,
-  tiebreakCandidates: []
+  tiebreakCandidates: [],
+  votingMode: 'individual' // 'individual' or 'raisedHand'
 };
 
 const saveState = () => localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
@@ -534,6 +562,33 @@ async function pickWords() {
   return { civilian: wordPair[0], impostor: wordPair[1] };
 }
 
+// ---------- Voting Mode ----------
+function setVotingMode(mode) {
+  state.votingMode = mode;
+  saveState();
+  updateVotingModeButtons();
+}
+
+function updateVotingModeButtons() {
+  const individualBtn = document.getElementById('voting-mode-individual');
+  const raisedHandBtn = document.getElementById('voting-mode-raisedHand');
+
+  if (individualBtn && raisedHandBtn) {
+    individualBtn.classList.toggle('selected', state.votingMode === 'individual');
+    raisedHandBtn.classList.toggle('selected', state.votingMode === 'raisedHand');
+
+    // Update text based on language
+    individualBtn.querySelector('.voting-mode-name').textContent = t('individualVoting');
+    raisedHandBtn.querySelector('.voting-mode-name').textContent = t('raisedHandVoting');
+  }
+
+  // Update label
+  const label = document.getElementById('voting-mode-label');
+  if (label) {
+    label.textContent = t('votingMode') + ':';
+  }
+}
+
 function renderPoolButtons() {
   const container = document.getElementById('pool-buttons');
   if (!container) return;
@@ -705,7 +760,7 @@ function loadCurrentReveal() {
   // Update curtain text
   const revealText = document.querySelector('#reveal-screen .info-text');
   if (revealText) {
-    revealText.innerHTML = `${t('turnOf')}: <strong><span id="current-player-name">${name}</span></strong><br><small>${t('othersLookAway')}</small>`;
+    revealText.innerHTML = `${t('turnOf')}: <strong><span id="current-player-name">${name}</span></strong>`;
   }
 
   const curtainText = document.querySelector('.curtain-cover div:last-child');
@@ -1047,6 +1102,14 @@ function startTiebreakDeliberation(candidates) {
 // ---------- Secret voting ----------
 function renderVoting() {
   const pool = state.votingPool || Array.from({length: state.numPlayers}, (_, i) => i);
+
+  // Check if we're in raised hand mode
+  if (state.votingMode === 'raisedHand') {
+    renderRaisedHandVoting(pool);
+    return;
+  }
+
+  // Individual voting mode
   const voter = state.playerNames[state.votingPlayer];
   document.getElementById('voter-name').textContent = voter;
   document.getElementById('votes-needed').textContent = state.numImpostors;
@@ -1057,6 +1120,12 @@ function renderVoting() {
     votingInfo.innerHTML = `${t('passMobileTo')} <strong id="voter-name">${voter}</strong>. ${t('chooseSuspects')} <span id="votes-needed">${state.numImpostors}</span> ${t('suspect')}.`;
   }
 
+  // Update title
+  const votingTitle = document.querySelector('#voting-screen h1');
+  if (votingTitle) {
+    votingTitle.textContent = t('secretVoting');
+  }
+
   state.selections = state.selections || [];
   const list = document.getElementById('vote-list'); list.innerHTML = '';
   pool.forEach(i => {
@@ -1083,6 +1152,50 @@ function renderVoting() {
   updateConfirmButton();
 }
 
+function renderRaisedHandVoting(pool) {
+  // Update title
+  const votingTitle = document.querySelector('#voting-screen h1');
+  if (votingTitle) {
+    votingTitle.textContent = t('groupVotingTitle');
+  }
+
+  // Update voting instruction text
+  const votingInfo = document.querySelector('#voting-screen .info-text');
+  if (votingInfo) {
+    votingInfo.innerHTML = `${t('groupVotingInstruction')} <span id="votes-needed">${state.numImpostors}</span> ${t('groupVotingSuspects')}.`;
+  }
+
+  state.selections = state.selections || [];
+  const list = document.getElementById('vote-list');
+  list.innerHTML = '';
+
+  pool.forEach(i => {
+    const item = document.createElement('div');
+    item.className = 'player-item';
+    item.textContent = state.playerNames[i];
+
+    if (state.selections.includes(i)) {
+      item.classList.add('selected');
+    }
+
+    item.onclick = () => toggleRaisedHandSelection(i);
+    list.appendChild(item);
+  });
+
+  updateConfirmButton();
+}
+
+function toggleRaisedHandSelection(idx) {
+  if (state.selections.includes(idx)) {
+    state.selections = state.selections.filter(x => x !== idx);
+  } else {
+    if (state.selections.length >= state.numImpostors) return;
+    state.selections.push(idx);
+  }
+  saveState();
+  renderVoting();
+}
+
 function toggleSelection(idx, el) {
   if (idx === state.votingPlayer) return;
   if (state.selections.includes(idx)) state.selections = state.selections.filter(x => x !== idx);
@@ -1100,6 +1213,14 @@ function updateConfirmButton() {
 }
 
 function confirmCurrentVote() {
+  // Raised hand mode: direct execution
+  if (state.votingMode === 'raisedHand') {
+    state.executed = [...state.selections];
+    showResults();
+    return;
+  }
+
+  // Individual mode: count votes
   state.selections.forEach(t => { state.votes[t] = (state.votes[t] || 0) + 1; });
   state.votingPlayer++;
   state.selections = [];
@@ -1345,6 +1466,10 @@ if ('serviceWorker' in navigator) {
     document.getElementById('deliberation-time').value = defaultDTime;
   }
 
+  // Initialize voting mode buttons
+  if (!state.votingMode) state.votingMode = 'individual';
+  updateVotingModeButtons();
+
   // Determine initial screen
   if (!restored || state.phase === 'setup' || state.phase === 'welcome') {
     // If no saved state or we're in setup/welcome, show welcome

www/styles.css

@@ -740,7 +740,7 @@ button:disabled {
   margin: 8px 0;
   color: var(--text-secondary);
   line-height: 1.7;
-  font-size: 0.85em;
+  font-size: 1em;
   letter-spacing: 0.3px;
 }
 
@@ -1107,7 +1107,7 @@ button:disabled {
 .info-text {
   text-align: center;
   margin: 14px 0;
-  font-size: 0.85em;
+  font-size: 1em;
   line-height: 1.7;
   background: var(--surface-card);
   padding: 14px 16px;
@@ -1143,14 +1143,14 @@ button:disabled {
 
 .player-item {
   padding: 18px 14px;
-  min-height: 80px; /* Altura fija para evitar cambios de tamaño con vote-count */
+  min-height: 80px;
   background: var(--surface-card);
   border-radius: 0;
   text-align: center;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
   font-weight: 800;
-  font-size: 0.85em;
+  font-size: 1em;
   border: 3px solid var(--border-medium);
   box-shadow: var(--shadow-sm);
   letter-spacing: 0.5px;
@@ -1455,6 +1455,60 @@ button:disabled {
   box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3), 3px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   VOTING MODE SELECTOR
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.voting-mode-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.voting-mode-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 14px 10px;
+  border: 2px solid var(--border-medium);
+  background: var(--surface-card);
+  color: var(--text-primary);
+  font-weight: 700;
+  font-size: 0.9em;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: var(--shadow-sm);
+  margin: 0;
+  width: 100%;
+  clip-path: none;
+}
+
+.voting-mode-btn:hover {
+  background: var(--surface-hover);
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
+  filter: brightness(1.05);
+}
+
+.voting-mode-btn.selected {
+  border-color: var(--text-primary);
+  background: var(--accent-warning);
+  color: var(--text-inverted);
+  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3), 3px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+.voting-mode-icon {
+  font-size: 1.5em;
+}
+
+.voting-mode-name {
+  font-size: 0.85em;
+}
+
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FIXED UI CONTROLS (Theme, Language, Exit)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@@ -1657,11 +1711,11 @@ button:disabled {
 @media (max-width: 600px) {
   body {
     padding: 60px 10px 10px 10px;
-    font-size: 13px;
+    font-size: 16px;
   }
 
   h1 {
-    font-size: 1.7em;
+    font-size: 2em;
     margin-bottom: 14px;
   }
 
@@ -1717,22 +1771,23 @@ button:disabled {
   }
 
   .timer {
-    font-size: 2.5em;
+    font-size: 3em;
-    padding: 16px;
+    padding: 18px;
   }
 
   .welcome-title {
-    font-size: 1.8em;
+    font-size: 2.2em;
   }
 
   .role {
-    font-size: 1.6em;
+    font-size: 2em;
-    padding: 10px 18px;
+    padding: 12px 20px;
+    letter-spacing: 4px;
   }
 
   .word {
-    font-size: 1.3em;
+    font-size: 1.8em;
-    padding: 12px 20px;
+    padding: 14px 24px;
   }
 
   .form-group {
@@ -1754,34 +1809,38 @@ button:disabled {
   }
 
   .rule-section h3 {
-    font-size: 0.85em;
+    font-size: 1em;
     margin-bottom: 10px;
   }
 
   .rule-section p {
-    font-size: 0.8em;
+    font-size: 0.95em;
     margin: 6px 0;
   }
 
   .player-name-item {
-    padding: 10px;
+    padding: 12px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
   }
 
   .player-name-item span {
-    font-size: 0.75em;
+    font-size: 0.9em;
     min-width: 70px;
   }
 
+  .player-name-item input {
+    font-size: 1em;
+  }
+
   .player-item {
-    padding: 14px 10px;
+    padding: 16px 12px;
-    min-height: 72px; /* Altura fija también en móvil */
+    min-height: 80px;
-    font-size: 0.8em;
+    font-size: 1em;
   }
 
   .pool-btn {
-    padding: 10px 8px;
+    padding: 12px 10px;
-    font-size: 0.75em;
+    font-size: 0.95em;
   }
 
   .pool-buttons-wrapper {
@@ -1796,15 +1855,33 @@ button:disabled {
   }
 
   .info-text {
-    padding: 12px 14px;
+    padding: 14px 16px;
-    font-size: 0.8em;
+    font-size: 1em;
     margin: 10px 0;
   }
 
   .curtain {
-    height: 240px;
+    height: 260px;
     margin: 10px 0;
   }
+
+  .curtain-cover {
+    font-size: 1.3em;
+  }
+
+  .curtain-icon {
+    font-size: 2em;
+  }
+
+  /* Labels más grandes en móvil */
+  label {
+    font-size: 0.95em;
+  }
+
+  /* Botones más grandes */
+  button {
+    font-size: 1em;
+  }
 }
 
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━