credits mejorado, ahora se acepta feedback en la app

client/src/views/Lobby.vue

@@ -31,6 +31,16 @@
       </h1>
       <div class="subtitle">Arena de intercambio social</div>
 
+      <!-- Error notification for reconnection issues -->
+      <div v-if="reconnectionError" class="error-notification">
+        <div class="error-icon">⚠️</div>
+        <div class="error-content">
+          <div class="error-title">No se pudo reconectar a la partida</div>
+          <div class="error-message">{{ reconnectionErrorMessage }}</div>
+        </div>
+        <button @click="dismissError" class="btn-dismiss-error">✕</button>
+      </div>
+
       <div class="player-section">
         <div class="name-input-group" v-if="!nameConfirmed || editingName">
           <input
@@ -107,6 +117,10 @@ const inputName = ref('');
 const isJoining = ref(false);
 const colorInput = ref('#667eea');
 const qrCanvas = ref<HTMLCanvasElement>();
+
+// Reconnection error state
+const reconnectionError = ref(false);
+const reconnectionErrorMessage = ref('');
 const showInstallBanner = ref(false);
 const canPromptInstall = ref(false);
 let deferredPrompt: any = null;
@@ -204,8 +218,18 @@ onMounted(async () => {
           colyseusService.lobbyRoom.value = null;
         }
         await router.push(`/${routeUuid.value}/demo`);
-      } catch (error) {
+      } catch (error: any) {
         console.error('Reconnection failed:', error);
+        
+        // Check if it's a reconnection token error
+        const errorMessage = error?.message || String(error);
+        if (errorMessage.includes('reconnection token invalid') || errorMessage.includes('expired')) {
+          reconnectionError.value = true;
+          reconnectionErrorMessage.value = 'Otro jugador ya está usando este UUID. Si eres tú en otro dispositivo, cierra esa sesión primero.';
+        } else {
+          reconnectionError.value = true;
+          reconnectionErrorMessage.value = 'Error al reconectar: ' + errorMessage;
+        }
       }
     });
 
@@ -447,6 +471,11 @@ function goToSelector() {
   router.push('/');
 }
 
+function dismissError() {
+  reconnectionError.value = false;
+  reconnectionErrorMessage.value = '';
+}
+
 async function triggerInstall() {
   try {
     if (!deferredPrompt) return;
@@ -591,6 +620,56 @@ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   font-size: 1.2rem;
 }
 
+/* Error notification styles */
+.error-notification {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 20px 0;
+  padding: 16px;
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border: 1px solid #fca5a5;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
+}
+
+.error-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.error-content {
+  flex: 1;
+}
+
+.error-title {
+  font-weight: 700;
+  color: #991b1b;
+  margin-bottom: 4px;
+}
+
+.error-message {
+  color: #dc2626;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.btn-dismiss-error {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #dc2626;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-dismiss-error:hover {
+  background: rgba(220, 38, 38, 0.1);
+}
+
 .player-section {
   margin: 30px 0;
   padding: 20px;