Implementado logo

client/src/views/Lobby.vue

@@ -6,7 +6,9 @@
           ← UUIDs
         </button>
       </div>
-      <h1 class="title">🎮 Snatch Game</h1>
+      <h1 class="title">
+        <GameLogo size="large" /> Snatch Game
+      </h1>
       <div class="subtitle">Arena de intercambio social</div>
 
       <div class="player-section">
@@ -35,7 +37,7 @@
 
       <div class="main-actions">
         <button @click="handleQuickPlay" class="btn btn-primary btn-large" :disabled="isJoining || !nameConfirmed">
-          <span v-if="!isJoining">🧪 Juego Demo</span>
+          <span v-if="!isJoining">🧪 Jugar</span>
           <span v-else>Buscando partida...</span>
         </button>
         <div v-if="!nameConfirmed" class="hint">Antes de jugar, presiona "Confirmar Nombre" para confirmar tu nombre.</div>
@@ -68,6 +70,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
 import PlayerStats from './games/PlayerStats.vue';
+import GameLogo from '../components/GameLogo.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { colyseusService } from '../services/colyseus';
 import { getStateCallbacks } from 'colyseus.js';
@@ -430,6 +433,10 @@ function goToSelector() {
 }
 
 .title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
   font-size: 3rem;
   text-align: center;
   margin: 0;