fix: update Gitea release asset upload

- Remove direct push trigger from build-apk workflow
- Set build-apk to run only after version-assets completes
- Prevent race condition where APK is built with old asset hashes
- Ensure checkout fetches latest version from main branch

.gitea/workflows/1-version-assets.yml

@@ -10,7 +10,7 @@ on:
       - 'www/logo.png'
       - 'www/index.html'
       - 'version-assets.sh'
-      - '.gitea/workflows/version-assets.yml'
+      - '.gitea/workflows/1-version-assets.yml'
 
 jobs:
   version-assets:

.gitea/workflows/2-build-apk.yml

@@ -0,0 +1,150 @@
+name: Build Android APK
+
+on:
+  push:
+    branches:
+      - main
+  workflow_run:
+    workflows: ["Version Static Assets"]
+    types:
+      - completed
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # Only run if triggered by workflow_dispatch, push to main, or successful completion of version-assets
+    if: >
+      github.event_name == 'workflow_dispatch' ||
+      github.event_name == 'push' ||
+      (github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success')
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Setup Java
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'temurin'
+          java-version: '21'
+
+      - name: Setup Android SDK
+        uses: android-actions/setup-android@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Sync Capacitor
+        run: npx cap sync android
+
+      - name: Decode keystore
+        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
+        run: |
+          echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > android/impostor.keystore
+
+      - name: Create keystore.properties
+        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
+        run: |
+          cat > android/keystore.properties << EOF
+          storeFile=../impostor.keystore
+          storePassword=${{ secrets.KEYSTORE_PASSWORD }}
+          keyAlias=${{ secrets.KEY_ALIAS }}
+          keyPassword=${{ secrets.KEY_PASSWORD }}
+          EOF
+
+      - name: Build Release APK
+        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
+        working-directory: android
+        run: ./gradlew assembleRelease --no-daemon
+
+      - name: Build Debug APK (fallback)
+        if: ${{ secrets.KEYSTORE_BASE64 == '' }}
+        working-directory: android
+        run: ./gradlew assembleDebug --no-daemon
+
+      - name: Rename APK
+        run: |
+          if [ -f android/app/build/outputs/apk/release/app-release.apk ]; then
+            cp android/app/build/outputs/apk/release/app-release.apk impostor-game.apk
+          else
+            cp android/app/build/outputs/apk/debug/app-debug.apk impostor-game.apk
+          fi
+
+      - name: Update latest release (Gitea API)
+        env:
+          TOKEN: ${{ secrets.GITEA_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          API_BASE="${GITEA_API_URL:-${GITHUB_API_URL:-}}"
+          if [ -z "$API_BASE" ]; then
+            if [ -n "${GITEA_SERVER_URL:-}" ]; then
+              API_BASE="${GITEA_SERVER_URL}/api/v1"
+            elif [ -n "${GITHUB_SERVER_URL:-}" ]; then
+              API_BASE="${GITHUB_SERVER_URL}/api/v1"
+            else
+              echo "::error::Missing API base (GITEA_API_URL/GITHUB_API_URL)."
+              exit 1
+            fi
+          fi
+
+          TOKEN="${TOKEN:-${GITHUB_TOKEN:-}}"
+          if [ -z "$TOKEN" ]; then
+            echo "::error::Missing API token (GITHUB_TOKEN or secrets.GITEA_TOKEN)."
+            exit 1
+          fi
+
+          REPO="${GITHUB_REPOSITORY}"
+          TAG="latest"
+          NAME="Latest Build"
+          BODY=$'Última versión del APK generada automáticamente.\n\nCommit: '"${GITHUB_SHA}"
+          ASSET_NAME="impostor-game.apk"
+          AUTH_HEADER="Authorization: token ${TOKEN}"
+          export TAG NAME BODY ASSET_NAME
+
+          tmp_file="$(mktemp)"
+          status="$(curl -s -o "$tmp_file" -w "%{http_code}" -H "$AUTH_HEADER" \
+            "$API_BASE/repos/$REPO/releases/tags/$TAG")"
+
+          if [ "$status" = "200" ]; then
+            release_id="$(node -e 'const fs=require("fs");const r=JSON.parse(fs.readFileSync(0,"utf8"));console.log(r.id);' < "$tmp_file")"
+            update_payload="$(node -e 'console.log(JSON.stringify({name:process.env.NAME,body:process.env.BODY,prerelease:false,draft:false}))')"
+            curl -fsSL -X PATCH -H "$AUTH_HEADER" -H "Content-Type: application/json" \
+              -d "$update_payload" "$API_BASE/repos/$REPO/releases/$release_id" >/dev/null
+          elif [ "$status" = "404" ]; then
+            create_payload="$(node -e 'console.log(JSON.stringify({tag_name:process.env.TAG,name:process.env.NAME,body:process.env.BODY,prerelease:false,draft:false}))')"
+            release_id="$(curl -fsSL -X POST -H "$AUTH_HEADER" -H "Content-Type: application/json" \
+              -d "$create_payload" "$API_BASE/repos/$REPO/releases" \
+              | node -e 'const fs=require("fs");const r=JSON.parse(fs.readFileSync(0,"utf8"));console.log(r.id);')"
+          else
+            echo "::error::Failed to fetch release tag (${status})."
+            cat "$tmp_file"
+            exit 1
+          fi
+          rm -f "$tmp_file"
+
+          assets_json="$(curl -fsSL -H "$AUTH_HEADER" "$API_BASE/repos/$REPO/releases/$release_id/assets")"
+          asset_id="$(node -e 'const fs=require("fs");const assets=JSON.parse(fs.readFileSync(0,"utf8"));const name=process.env.ASSET_NAME;const match=assets.find(a=>a.name===name);if (match) console.log(match.id);' <<<"$assets_json")"
+
+          if [ -n "${asset_id:-}" ]; then
+            curl -fsSL -X DELETE -H "$AUTH_HEADER" \
+              "$API_BASE/repos/$REPO/releases/$release_id/assets/$asset_id" >/dev/null
+          fi
+
+          curl -fsSL -X POST -H "$AUTH_HEADER" \
+            -F "attachment=@${ASSET_NAME}" \
+            "$API_BASE/repos/$REPO/releases/$release_id/assets?name=${ASSET_NAME}" >/dev/null

.gitea/workflows/build-apk.yml

@@ -1,84 +0,0 @@
-name: Build Android APK
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-permissions:
-  contents: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-
-      - name: Setup Java
-        uses: actions/setup-java@v4
-        with:
-          distribution: 'temurin'
-          java-version: '21'
-
-      - name: Setup Android SDK
-        uses: android-actions/setup-android@v3
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Sync Capacitor
-        run: npx cap sync android
-
-      - name: Decode keystore
-        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
-        run: |
-          echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > android/impostor.keystore
-
-      - name: Create keystore.properties
-        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
-        run: |
-          cat > android/keystore.properties << EOF
-          storeFile=../impostor.keystore
-          storePassword=${{ secrets.KEYSTORE_PASSWORD }}
-          keyAlias=${{ secrets.KEY_ALIAS }}
-          keyPassword=${{ secrets.KEY_PASSWORD }}
-          EOF
-
-      - name: Build Release APK
-        if: ${{ secrets.KEYSTORE_BASE64 != '' }}
-        working-directory: android
-        run: ./gradlew assembleRelease --no-daemon
-
-      - name: Build Debug APK (fallback)
-        if: ${{ secrets.KEYSTORE_BASE64 == '' }}
-        working-directory: android
-        run: ./gradlew assembleDebug --no-daemon
-
-      - name: Rename APK
-        run: |
-          if [ -f android/app/build/outputs/apk/release/app-release.apk ]; then
-            cp android/app/build/outputs/apk/release/app-release.apk impostor-game.apk
-          else
-            cp android/app/build/outputs/apk/debug/app-debug.apk impostor-game.apk
-          fi
-
-      - name: Update latest release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: latest
-          name: Latest Build
-          body: |
-            Última versión del APK generada automáticamente.
-
-            Commit: ${{ github.sha }}
-          files: impostor-game.apk
-          prerelease: false
-          make_latest: true

README.md

@@ -82,3 +82,4 @@ This makes the game more interesting as impostors have a related word to work wi
 - State is saved in `localStorage` (`impostorGameStateV2`). Use "New match" to clear it.
 - Mobile optimized: **No scrolling required** on setup screen, reveal via swipe or tap, compact adaptive UI.
 - Pool selection grid has vertical scroll when needed to fit all 22 categories.
+

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.0590c814.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.0590c814.css">
     <link rel="icon" type="image/png" href="logo.78f51359.png">
     <link rel="manifest" href="manifest.webmanifest">
     <meta name="theme-color" content="#ff4444">
@@ -123,6 +123,12 @@
                 <div class="welcome-buttons">
                     <button onclick="showScreen('setup-screen')" class="btn-primary">Jugar</button>
                     <button onclick="showScreen('rules-screen')" class="btn-secondary">Reglas</button>
+                    <a href="https://git.dariosevilla.es/dasemu/web-imposter-game/releases/download/latest/impostor-game.apk"
+                       class="btn-download"
+                       id="download-app-btn"
+                       style="display: none;">
+                        📱 Descargar App Android
+                    </a>
                 </div>
                 <p class="welcome-credits">Creado por Darío Sevilla</p>
             </div>
@@ -183,6 +189,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 +209,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 +228,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 +235,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>
@@ -257,6 +274,16 @@
             <button id="confirm-vote-btn" disabled onclick="confirmCurrentVote()">Confirmar voto</button>
         </div>
 
+        <!-- Tie screen -->
+        <div id="tie-screen" class="screen">
+            <h1>EMPATE</h1>
+            <div class="tie-info">
+                <p class="info-text"><strong id="tie-eliminated-label">JUGADOR/ES ELIMINADOS:</strong></p>
+                <p class="eliminated-players" id="tie-eliminated-players"></p>
+            </div>
+            <button onclick="proceedToTiebreaker()">IR A DESEMPATE</button>
+        </div>
+
         <!-- Results screen -->
         <div id="results-screen" class="screen">
             <h1>Resultados</h1>
@@ -265,7 +292,7 @@
         </div>
     </div>
 
-    <script src="script.52beba25.js"></script>
+    <script src="script.0bc8c210.js"></script>
 </body>
 </html>
 

www/script.0bc8c210.js

@@ -1,3 +1,4 @@
+// Game configuration constants
 const STORAGE_KEY = 'impostorGameStateV2';
 const MAX_PLAYERS = 10;
 const MIN_PLAYERS = 3;
@@ -6,15 +7,20 @@ const POOLS_MANIFEST_URL = 'word-pools/manifest.json';
 const THEME_STORAGE_KEY = 'impostorGameTheme';
 const LANGUAGE_STORAGE_KEY = 'impostorGameLanguage';
 const SCREEN_LOCK_STORAGE_KEY = 'impostorGameScreenLock';
+const APP_VERSION = 1; // Simple incremental version number.
+const LATEST_VERSION_URL = 'https://git.dariosevilla.es/api/v1/repos/dasemu/web-imposter-game/releases/latest';
+const APK_DOWNLOAD_URL = 'https://git.dariosevilla.es/dasemu/web-imposter-game/releases/download/latest/impostor-game.apk';
 
 // Detect if running as a native app (Capacitor/Cordova)
+let isNativeApp = false;
 (function detectNativeApp() {
   const isCapacitor = window.Capacitor !== undefined;
   const isCordova = window.cordova !== undefined;
-  const isNativeApp = isCapacitor || isCordova;
+  isNativeApp = isCapacitor || isCordova;
 
   if (isNativeApp) {
     document.documentElement.classList.add('native-app');
+    checkAppVersion();
   }
 })();
 
@@ -88,7 +94,23 @@ 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)',
+    tie: 'EMPATE',
+    eliminatedPlayers: 'JUGADOR/ES ELIMINADOS:',
+    goToTiebreaker: 'IR A DESEMPATE',
+    downloadApp: 'Descargar App Android',
+    updateAvailable: 'Actualización disponible',
+    updateMessage: 'Hay una nueva versión de la app disponible. ¿Quieres actualizar ahora?',
+    update: 'Actualizar',
+    later: 'Más tarde'
   },
   en: {
     gameTitle: 'The Impostor Game',
@@ -158,7 +180,23 @@ 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)',
+    tie: 'TIE',
+    eliminatedPlayers: 'ELIMINATED PLAYER(S):',
+    goToTiebreaker: 'GO TO TIEBREAKER',
+    downloadApp: 'Download Android App',
+    updateAvailable: 'Update available',
+    updateMessage: 'A new version of the app is available. Do you want to update now?',
+    update: 'Update',
+    later: 'Later'
   }
 };
 
@@ -169,7 +207,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 +256,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();
 
@@ -216,6 +271,8 @@ async function updateUI() {
     renderVoting();
   } else if (state.phase === 'results') {
     showResults();
+  } else if (state.phase === 'tie') {
+    showTieScreen();
   }
 }
 
@@ -284,9 +341,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 +349,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');
@@ -320,6 +371,10 @@ function updateStaticTexts() {
   const votingTitle = document.querySelector('#voting-screen h1');
   if (votingTitle) votingTitle.textContent = t('secretVoting');
 
+  // Tie screen
+  const tieTitle = document.querySelector('#tie-screen h1');
+  if (tieTitle) tieTitle.textContent = t('tie');
+
   // Results screen
   const resultsTitle = document.querySelector('#results-screen h1');
   if (resultsTitle) resultsTitle.textContent = t('results');
@@ -344,11 +399,18 @@ function updateStaticTexts() {
     else if (btn.getAttribute('onclick') === 'skipToVoting()') btn.textContent = t('goToVoting') + ' →';
     else if (btn.id === 'confirm-vote-btn') btn.textContent = t('confirmVote');
     else if (btn.getAttribute('onclick') === 'newMatch()') btn.textContent = t('newMatch');
+    else if (btn.getAttribute('onclick') === 'proceedToTiebreaker()') btn.textContent = t('goToTiebreaker');
   });
 
   // Exit game button
   const exitText = document.querySelector('.exit-text');
   if (exitText) exitText.textContent = t('exitGame');
+
+  // Download app button
+  const downloadBtn = document.getElementById('download-app-btn');
+  if (downloadBtn && !isNativeApp) {
+    downloadBtn.textContent = `📱 ${t('downloadApp')}`;
+  }
 }
 
 // Embedded pools with impostor words [civilian_word, impostor_word]
@@ -388,7 +450,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 +597,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 +795,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 +1137,26 @@ 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 eliminated = state.executed || [];
+
+  // Skip eliminated players in tiebreaker
+  while (state.isTiebreak && eliminated.includes(state.votingPlayer) && state.votingPlayer < state.numPlayers) {
+    state.votingPlayer++;
+  }
+
+  if (state.votingPlayer >= state.numPlayers) {
+    handleVoteOutcome();
+    return;
+  }
+
   const voter = state.playerNames[state.votingPlayer];
   document.getElementById('voter-name').textContent = voter;
   document.getElementById('votes-needed').textContent = state.numImpostors;
@@ -1057,6 +1167,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 +1199,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,11 +1260,30 @@ 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 = [];
   saveState();
-  if (state.votingPlayer >= state.numPlayers) { handleVoteOutcome(); return; }
+
+  const eliminated = state.executed || [];
+
+  // Skip eliminated players in tiebreaker
+  while (state.isTiebreak && eliminated.includes(state.votingPlayer) && state.votingPlayer < state.numPlayers) {
+    state.votingPlayer++;
+  }
+
+  if (state.votingPlayer >= state.numPlayers) {
+    handleVoteOutcome();
+    return;
+  }
   renderVoting();
 }
 
@@ -1133,7 +1312,10 @@ function handleVoteOutcome() {
         showResults(true);
         return;
       }
-      startTiebreakDeliberation(group);
+      // Show tie screen with eliminated players
+      state.executed = executed;
+      state.tiebreakCandidates = group;
+      showTieScreen();
       return;
     }
   }
@@ -1170,6 +1352,28 @@ function showResults(isTiebreak = false) {
   showScreen('results-screen');
 }
 
+// ---------- Tie screen ----------
+function showTieScreen() {
+  state.phase = 'tie';
+  saveState();
+
+  const eliminated = state.executed || [];
+  const tieScreen = document.getElementById('tie-screen');
+  const eliminatedLabel = document.getElementById('tie-eliminated-label');
+  const eliminatedPlayers = document.getElementById('tie-eliminated-players');
+
+  eliminatedLabel.textContent = t('eliminatedPlayers');
+  eliminatedPlayers.textContent = eliminated.length > 0
+    ? eliminated.map(i => state.playerNames[i]).join(', ')
+    : t('nobody');
+
+  showScreen('tie-screen');
+}
+
+function proceedToTiebreaker() {
+  startTiebreakDeliberation(state.tiebreakCandidates);
+}
+
 // ---------- Utilities ----------
 function showScreen(id) {
   document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
@@ -1281,6 +1485,65 @@ function toggleScreenLock() {
 }
 
 // Event listener for theme and language buttons
+// ---------- App version checking ----------
+async function checkAppVersion() {
+  if (!isNativeApp) return;
+
+  try {
+    const response = await fetch(LATEST_VERSION_URL);
+    if (!response.ok) return;
+
+    const releaseData = await response.json();
+    const latestVersion = parseInt(releaseData.name) || 0;
+
+    if (latestVersion > APP_VERSION) {
+      showUpdateNotification();
+    }
+  } catch (error) {
+    console.error('Error checking app version:', error);
+  }
+}
+
+function showUpdateNotification() {
+  const message = t('updateMessage');
+  const updateBtn = t('update');
+  const laterBtn = t('later');
+
+  // Create custom notification overlay
+  const overlay = document.createElement('div');
+  overlay.className = 'update-notification-overlay';
+  overlay.innerHTML = `
+    <div class="update-notification">
+      <h2>${t('updateAvailable')}</h2>
+      <p>${message}</p>
+      <div class="update-buttons">
+        <button class="btn-update" onclick="downloadUpdate()">${updateBtn}</button>
+        <button class="btn-later" onclick="dismissUpdate()">${laterBtn}</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+}
+
+function downloadUpdate() {
+  window.location.href = APK_DOWNLOAD_URL;
+  dismissUpdate();
+}
+
+function dismissUpdate() {
+  const overlay = document.querySelector('.update-notification-overlay');
+  if (overlay) overlay.remove();
+}
+
+// Show download button only on web (not native app)
+function initDownloadButton() {
+  const downloadBtn = document.getElementById('download-app-btn');
+  if (downloadBtn && !isNativeApp) {
+    downloadBtn.style.display = 'inline-block';
+    downloadBtn.textContent = `📱 ${t('downloadApp')}`;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   const themeToggle = document.getElementById('theme-toggle');
   if (themeToggle) {
@@ -1302,6 +1565,9 @@ document.addEventListener('DOMContentLoaded', () => {
   currentLanguage = loadLanguage();
   setLanguage(currentLanguage);
 
+  // Initialize download button
+  initDownloadButton();
+
   // Detect system theme changes
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
     // Only apply automatically if user hasn't manually selected a theme
@@ -1345,6 +1611,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/script.js

@@ -1,3 +1,4 @@
+// Game configuration constants
 const STORAGE_KEY = 'impostorGameStateV2';
 const MAX_PLAYERS = 10;
 const MIN_PLAYERS = 3;
@@ -6,15 +7,20 @@ const POOLS_MANIFEST_URL = 'word-pools/manifest.json';
 const THEME_STORAGE_KEY = 'impostorGameTheme';
 const LANGUAGE_STORAGE_KEY = 'impostorGameLanguage';
 const SCREEN_LOCK_STORAGE_KEY = 'impostorGameScreenLock';
+const APP_VERSION = 1; // Simple incremental version number.
+const LATEST_VERSION_URL = 'https://git.dariosevilla.es/api/v1/repos/dasemu/web-imposter-game/releases/latest';
+const APK_DOWNLOAD_URL = 'https://git.dariosevilla.es/dasemu/web-imposter-game/releases/download/latest/impostor-game.apk';
 
 // Detect if running as a native app (Capacitor/Cordova)
+let isNativeApp = false;
 (function detectNativeApp() {
   const isCapacitor = window.Capacitor !== undefined;
   const isCordova = window.cordova !== undefined;
-  const isNativeApp = isCapacitor || isCordova;
+  isNativeApp = isCapacitor || isCordova;
 
   if (isNativeApp) {
     document.documentElement.classList.add('native-app');
+    checkAppVersion();
   }
 })();
 
@@ -88,7 +94,23 @@ 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)',
+    tie: 'EMPATE',
+    eliminatedPlayers: 'JUGADOR/ES ELIMINADOS:',
+    goToTiebreaker: 'IR A DESEMPATE',
+    downloadApp: 'Descargar App Android',
+    updateAvailable: 'Actualización disponible',
+    updateMessage: 'Hay una nueva versión de la app disponible. ¿Quieres actualizar ahora?',
+    update: 'Actualizar',
+    later: 'Más tarde'
   },
   en: {
     gameTitle: 'The Impostor Game',
@@ -158,7 +180,23 @@ 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)',
+    tie: 'TIE',
+    eliminatedPlayers: 'ELIMINATED PLAYER(S):',
+    goToTiebreaker: 'GO TO TIEBREAKER',
+    downloadApp: 'Download Android App',
+    updateAvailable: 'Update available',
+    updateMessage: 'A new version of the app is available. Do you want to update now?',
+    update: 'Update',
+    later: 'Later'
   }
 };
 
@@ -169,7 +207,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 +256,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();
 
@@ -216,6 +271,8 @@ async function updateUI() {
     renderVoting();
   } else if (state.phase === 'results') {
     showResults();
+  } else if (state.phase === 'tie') {
+    showTieScreen();
   }
 }
 
@@ -284,9 +341,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 +349,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');
@@ -320,6 +371,10 @@ function updateStaticTexts() {
   const votingTitle = document.querySelector('#voting-screen h1');
   if (votingTitle) votingTitle.textContent = t('secretVoting');
 
+  // Tie screen
+  const tieTitle = document.querySelector('#tie-screen h1');
+  if (tieTitle) tieTitle.textContent = t('tie');
+
   // Results screen
   const resultsTitle = document.querySelector('#results-screen h1');
   if (resultsTitle) resultsTitle.textContent = t('results');
@@ -344,11 +399,18 @@ function updateStaticTexts() {
     else if (btn.getAttribute('onclick') === 'skipToVoting()') btn.textContent = t('goToVoting') + ' →';
     else if (btn.id === 'confirm-vote-btn') btn.textContent = t('confirmVote');
     else if (btn.getAttribute('onclick') === 'newMatch()') btn.textContent = t('newMatch');
+    else if (btn.getAttribute('onclick') === 'proceedToTiebreaker()') btn.textContent = t('goToTiebreaker');
   });
 
   // Exit game button
   const exitText = document.querySelector('.exit-text');
   if (exitText) exitText.textContent = t('exitGame');
+
+  // Download app button
+  const downloadBtn = document.getElementById('download-app-btn');
+  if (downloadBtn && !isNativeApp) {
+    downloadBtn.textContent = `📱 ${t('downloadApp')}`;
+  }
 }
 
 // Embedded pools with impostor words [civilian_word, impostor_word]
@@ -388,7 +450,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 +597,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 +795,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 +1137,26 @@ 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 eliminated = state.executed || [];
+
+  // Skip eliminated players in tiebreaker
+  while (state.isTiebreak && eliminated.includes(state.votingPlayer) && state.votingPlayer < state.numPlayers) {
+    state.votingPlayer++;
+  }
+
+  if (state.votingPlayer >= state.numPlayers) {
+    handleVoteOutcome();
+    return;
+  }
+
   const voter = state.playerNames[state.votingPlayer];
   document.getElementById('voter-name').textContent = voter;
   document.getElementById('votes-needed').textContent = state.numImpostors;
@@ -1057,6 +1167,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 +1199,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,11 +1260,30 @@ 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 = [];
   saveState();
-  if (state.votingPlayer >= state.numPlayers) { handleVoteOutcome(); return; }
+
+  const eliminated = state.executed || [];
+
+  // Skip eliminated players in tiebreaker
+  while (state.isTiebreak && eliminated.includes(state.votingPlayer) && state.votingPlayer < state.numPlayers) {
+    state.votingPlayer++;
+  }
+
+  if (state.votingPlayer >= state.numPlayers) {
+    handleVoteOutcome();
+    return;
+  }
   renderVoting();
 }
 
@@ -1133,7 +1312,10 @@ function handleVoteOutcome() {
         showResults(true);
         return;
       }
-      startTiebreakDeliberation(group);
+      // Show tie screen with eliminated players
+      state.executed = executed;
+      state.tiebreakCandidates = group;
+      showTieScreen();
       return;
     }
   }
@@ -1170,6 +1352,28 @@ function showResults(isTiebreak = false) {
   showScreen('results-screen');
 }
 
+// ---------- Tie screen ----------
+function showTieScreen() {
+  state.phase = 'tie';
+  saveState();
+
+  const eliminated = state.executed || [];
+  const tieScreen = document.getElementById('tie-screen');
+  const eliminatedLabel = document.getElementById('tie-eliminated-label');
+  const eliminatedPlayers = document.getElementById('tie-eliminated-players');
+
+  eliminatedLabel.textContent = t('eliminatedPlayers');
+  eliminatedPlayers.textContent = eliminated.length > 0
+    ? eliminated.map(i => state.playerNames[i]).join(', ')
+    : t('nobody');
+
+  showScreen('tie-screen');
+}
+
+function proceedToTiebreaker() {
+  startTiebreakDeliberation(state.tiebreakCandidates);
+}
+
 // ---------- Utilities ----------
 function showScreen(id) {
   document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
@@ -1281,6 +1485,65 @@ function toggleScreenLock() {
 }
 
 // Event listener for theme and language buttons
+// ---------- App version checking ----------
+async function checkAppVersion() {
+  if (!isNativeApp) return;
+
+  try {
+    const response = await fetch(LATEST_VERSION_URL);
+    if (!response.ok) return;
+
+    const releaseData = await response.json();
+    const latestVersion = parseInt(releaseData.name) || 0;
+
+    if (latestVersion > APP_VERSION) {
+      showUpdateNotification();
+    }
+  } catch (error) {
+    console.error('Error checking app version:', error);
+  }
+}
+
+function showUpdateNotification() {
+  const message = t('updateMessage');
+  const updateBtn = t('update');
+  const laterBtn = t('later');
+
+  // Create custom notification overlay
+  const overlay = document.createElement('div');
+  overlay.className = 'update-notification-overlay';
+  overlay.innerHTML = `
+    <div class="update-notification">
+      <h2>${t('updateAvailable')}</h2>
+      <p>${message}</p>
+      <div class="update-buttons">
+        <button class="btn-update" onclick="downloadUpdate()">${updateBtn}</button>
+        <button class="btn-later" onclick="dismissUpdate()">${laterBtn}</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+}
+
+function downloadUpdate() {
+  window.location.href = APK_DOWNLOAD_URL;
+  dismissUpdate();
+}
+
+function dismissUpdate() {
+  const overlay = document.querySelector('.update-notification-overlay');
+  if (overlay) overlay.remove();
+}
+
+// Show download button only on web (not native app)
+function initDownloadButton() {
+  const downloadBtn = document.getElementById('download-app-btn');
+  if (downloadBtn && !isNativeApp) {
+    downloadBtn.style.display = 'inline-block';
+    downloadBtn.textContent = `📱 ${t('downloadApp')}`;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   const themeToggle = document.getElementById('theme-toggle');
   if (themeToggle) {
@@ -1302,6 +1565,9 @@ document.addEventListener('DOMContentLoaded', () => {
   currentLanguage = loadLanguage();
   setLanguage(currentLanguage);
 
+  // Initialize download button
+  initDownloadButton();
+
   // Detect system theme changes
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
     // Only apply automatically if user hasn't manually selected a theme
@@ -1345,6 +1611,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.0590c814.css

@@ -538,6 +538,146 @@ button:disabled {
   box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 78, 122, 0.3);
 }
 
+.btn-download {
+  display: inline-block;
+  padding: 14px 22px;
+  font-size: 0.95em;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--text-primary);
+  background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
+  border: 3px solid var(--accent-success);
+  border-radius: 0;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 204, 113, 0.3);
+  text-align: center;
+}
+
+.btn-download:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0px var(--bg-secondary), 0 0 30px rgba(46, 204, 113, 0.5);
+  filter: brightness(1.15);
+}
+
+.btn-download:active {
+  transform: translate(0, 0);
+  box-shadow: 3px 3px 0px var(--bg-secondary), 0 0 15px rgba(46, 204, 113, 0.3);
+}
+
+/* Hide download button in native app */
+.native-app .btn-download {
+  display: none !important;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   UPDATE NOTIFICATION
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.update-notification-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: overlayFadeIn 0.3s ease;
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.update-notification {
+  background: var(--surface-card);
+  border: 3px solid var(--accent-warning);
+  border-radius: 0;
+  padding: 30px;
+  max-width: 400px;
+  margin: 20px;
+  box-shadow: var(--shadow-harsh), 0 0 40px rgba(230, 167, 60, 0.5);
+  animation: notificationSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes notificationSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.update-notification h2 {
+  margin: 0 0 15px 0;
+  font-family: 'Bebas Neue', 'Crimson Text', Georgia, serif;
+  font-size: 1.8em;
+  letter-spacing: 3px;
+  color: var(--accent-warning);
+  text-align: center;
+}
+
+.update-notification p {
+  margin: 0 0 25px 0;
+  color: var(--text-primary);
+  line-height: 1.6;
+  text-align: center;
+}
+
+.update-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.btn-update,
+.btn-later {
+  padding: 12px 24px;
+  font-size: 0.9em;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  background: var(--surface-hover);
+  border: 3px solid var(--border-medium);
+  border-radius: 0;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-update {
+  background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
+  border-color: var(--accent-success);
+  color: var(--text-primary);
+}
+
+.btn-update:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0px var(--bg-secondary), 0 0 20px rgba(46, 204, 113, 0.5);
+  filter: brightness(1.15);
+}
+
+.btn-later:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0px var(--bg-secondary);
+  filter: brightness(1.1);
+}
+
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    WELCOME SCREEN
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@@ -740,7 +880,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 +1247,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 +1283,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;
@@ -1379,6 +1519,64 @@ button:disabled {
   text-transform: uppercase;
 }
 
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   TIE SCREEN
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+#tie-screen h1 {
+  font-size: 2.5em;
+  color: var(--accent-warning);
+  text-align: center;
+  margin-bottom: 20px;
+  animation: tieFlash 1s ease-in-out infinite alternate;
+}
+
+@keyframes tieFlash {
+  0% {
+    text-shadow: 0 0 10px var(--accent-warning);
+  }
+  100% {
+    text-shadow: 0 0 20px var(--accent-warning), 0 0 30px var(--accent-warning);
+  }
+}
+
+.tie-info {
+  background: var(--surface-card);
+  border: 2px solid var(--border-medium);
+  border-radius: 0;
+  padding: 20px;
+  margin: 20px 0;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+}
+
+.tie-info .info-text {
+  font-size: 1.1em;
+  margin-bottom: 15px;
+  color: var(--text-primary);
+}
+
+.eliminated-players {
+  font-size: 1.3em;
+  font-weight: 700;
+  color: var(--accent-danger);
+  margin-top: 10px;
+  letter-spacing: 1px;
+}
+
+#tie-screen button {
+  margin-top: 20px;
+  font-size: 1.1em;
+  padding: 15px 30px;
+  background: var(--accent-warning);
+  color: var(--text-primary);
+}
+
+#tie-screen button:hover {
+  background: var(--accent-warning);
+  filter: brightness(1.2);
+}
+
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    POOL SELECTION
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@@ -1455,6 +1653,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 +1909,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 +1969,23 @@ button:disabled {
   }
 
   .timer {
-    font-size: 2.5em;
-    padding: 16px;
+    font-size: 3em;
+    padding: 18px;
   }
 
   .welcome-title {
-    font-size: 1.8em;
+    font-size: 2.2em;
   }
 
   .role {
-    font-size: 1.6em;
-    padding: 10px 18px;
+    font-size: 2em;
+    padding: 12px 20px;
+    letter-spacing: 4px;
   }
 
   .word {
-    font-size: 1.3em;
-    padding: 12px 20px;
+    font-size: 1.8em;
+    padding: 14px 24px;
   }
 
   .form-group {
@@ -1754,34 +2007,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;
-    margin-bottom: 6px;
+    padding: 12px;
+    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;
-    min-height: 72px; /* Altura fija también en móvil */
-    font-size: 0.8em;
+    padding: 16px 12px;
+    min-height: 80px;
+    font-size: 1em;
   }
 
   .pool-btn {
-    padding: 10px 8px;
-    font-size: 0.75em;
+    padding: 12px 10px;
+    font-size: 0.95em;
   }
 
   .pool-buttons-wrapper {
@@ -1796,15 +2053,33 @@ button:disabled {
   }
 
   .info-text {
-    padding: 12px 14px;
-    font-size: 0.8em;
+    padding: 14px 16px;
+    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;
+  }
 }
 
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

www/styles.css

@@ -538,6 +538,146 @@ button:disabled {
   box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 78, 122, 0.3);
 }
 
+.btn-download {
+  display: inline-block;
+  padding: 14px 22px;
+  font-size: 0.95em;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--text-primary);
+  background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
+  border: 3px solid var(--accent-success);
+  border-radius: 0;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 204, 113, 0.3);
+  text-align: center;
+}
+
+.btn-download:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0px var(--bg-secondary), 0 0 30px rgba(46, 204, 113, 0.5);
+  filter: brightness(1.15);
+}
+
+.btn-download:active {
+  transform: translate(0, 0);
+  box-shadow: 3px 3px 0px var(--bg-secondary), 0 0 15px rgba(46, 204, 113, 0.3);
+}
+
+/* Hide download button in native app */
+.native-app .btn-download {
+  display: none !important;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   UPDATE NOTIFICATION
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.update-notification-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: overlayFadeIn 0.3s ease;
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.update-notification {
+  background: var(--surface-card);
+  border: 3px solid var(--accent-warning);
+  border-radius: 0;
+  padding: 30px;
+  max-width: 400px;
+  margin: 20px;
+  box-shadow: var(--shadow-harsh), 0 0 40px rgba(230, 167, 60, 0.5);
+  animation: notificationSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes notificationSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.update-notification h2 {
+  margin: 0 0 15px 0;
+  font-family: 'Bebas Neue', 'Crimson Text', Georgia, serif;
+  font-size: 1.8em;
+  letter-spacing: 3px;
+  color: var(--accent-warning);
+  text-align: center;
+}
+
+.update-notification p {
+  margin: 0 0 25px 0;
+  color: var(--text-primary);
+  line-height: 1.6;
+  text-align: center;
+}
+
+.update-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.btn-update,
+.btn-later {
+  padding: 12px 24px;
+  font-size: 0.9em;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  background: var(--surface-hover);
+  border: 3px solid var(--border-medium);
+  border-radius: 0;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-update {
+  background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
+  border-color: var(--accent-success);
+  color: var(--text-primary);
+}
+
+.btn-update:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0px var(--bg-secondary), 0 0 20px rgba(46, 204, 113, 0.5);
+  filter: brightness(1.15);
+}
+
+.btn-later:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0px var(--bg-secondary);
+  filter: brightness(1.1);
+}
+
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    WELCOME SCREEN
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@@ -740,7 +880,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 +1247,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 +1283,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;
@@ -1379,6 +1519,64 @@ button:disabled {
   text-transform: uppercase;
 }
 
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   TIE SCREEN
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+#tie-screen h1 {
+  font-size: 2.5em;
+  color: var(--accent-warning);
+  text-align: center;
+  margin-bottom: 20px;
+  animation: tieFlash 1s ease-in-out infinite alternate;
+}
+
+@keyframes tieFlash {
+  0% {
+    text-shadow: 0 0 10px var(--accent-warning);
+  }
+  100% {
+    text-shadow: 0 0 20px var(--accent-warning), 0 0 30px var(--accent-warning);
+  }
+}
+
+.tie-info {
+  background: var(--surface-card);
+  border: 2px solid var(--border-medium);
+  border-radius: 0;
+  padding: 20px;
+  margin: 20px 0;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+}
+
+.tie-info .info-text {
+  font-size: 1.1em;
+  margin-bottom: 15px;
+  color: var(--text-primary);
+}
+
+.eliminated-players {
+  font-size: 1.3em;
+  font-weight: 700;
+  color: var(--accent-danger);
+  margin-top: 10px;
+  letter-spacing: 1px;
+}
+
+#tie-screen button {
+  margin-top: 20px;
+  font-size: 1.1em;
+  padding: 15px 30px;
+  background: var(--accent-warning);
+  color: var(--text-primary);
+}
+
+#tie-screen button:hover {
+  background: var(--accent-warning);
+  filter: brightness(1.2);
+}
+
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    POOL SELECTION
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@@ -1455,6 +1653,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 +1909,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 +1969,23 @@ button:disabled {
   }
 
   .timer {
-    font-size: 2.5em;
-    padding: 16px;
+    font-size: 3em;
+    padding: 18px;
   }
 
   .welcome-title {
-    font-size: 1.8em;
+    font-size: 2.2em;
   }
 
   .role {
-    font-size: 1.6em;
-    padding: 10px 18px;
+    font-size: 2em;
+    padding: 12px 20px;
+    letter-spacing: 4px;
   }
 
   .word {
-    font-size: 1.3em;
-    padding: 12px 20px;
+    font-size: 1.8em;
+    padding: 14px 24px;
   }
 
   .form-group {
@@ -1754,34 +2007,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;
-    margin-bottom: 6px;
+    padding: 12px;
+    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;
-    min-height: 72px; /* Altura fija también en móvil */
-    font-size: 0.8em;
+    padding: 16px 12px;
+    min-height: 80px;
+    font-size: 1em;
   }
 
   .pool-btn {
-    padding: 10px 8px;
-    font-size: 0.75em;
+    padding: 12px 10px;
+    font-size: 0.95em;
   }
 
   .pool-buttons-wrapper {
@@ -1796,15 +2053,33 @@ button:disabled {
   }
 
   .info-text {
-    padding: 12px 14px;
-    font-size: 0.8em;
+    padding: 14px 16px;
+    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;
+  }
 }
 
 /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━