cambio de G desactivado bajo easterEgg

client/src/views/DemoGame.vue

@@ -14,14 +14,21 @@
     />
     <div class="game-container">
       <div class="game-header">
-        <h1>🧪 Demo Room</h1>
+        <h1 @click="onTitleClick" :title="titleUnlockTitle">💼 Sala de negocios</h1>
         <div class="meta">
           <div>Room: <code>{{ roomId }}</code></div>
           <div>Round: {{ currentRound }}/3</div>
           <div>Status: <span class="badge">{{ gameStatus }}</span></div>
         </div>
         <div class="variant-selector">
-          <button v-for="g in variants" :key="g" @click="setVariant(g)" :class="['btn', 'btn-variant', { active: currentVariant === g }]">
+          <button
+            v-for="g in variants"
+            :key="g"
+            @click="setVariant(g)"
+            :disabled="!adminUnlockedHeader"
+            :title="adminUnlockedHeader ? 'Cambiar variante' : 'Bloqueado — haz 5 clics en el título'"
+            :class="['btn', 'btn-variant', { active: currentVariant === g }]"
+          >
             {{ g }}
           </button>
         </div>
@@ -112,6 +119,21 @@ const outcomeP2 = ref(0);
 
 const variants = ['G1','G2','G3','G4','G5'];
 
+// Hidden admin unlock via 5-clicks on title
+const adminUnlockedHeader = ref(false);
+const headerClickCount = ref(0);
+let headerClickResetTimer: any = null;
+function onTitleClick() {
+  if (headerClickResetTimer) { clearTimeout(headerClickResetTimer); headerClickResetTimer = null; }
+  headerClickCount.value += 1;
+  if (headerClickCount.value >= 5) {
+    adminUnlockedHeader.value = true;
+  } else {
+    headerClickResetTimer = setTimeout(() => { headerClickCount.value = 0; }, 1200);
+  }
+}
+const titleUnlockTitle = computed(() => adminUnlockedHeader.value ? 'Controles de variante desbloqueados' : `Clicks: ${headerClickCount.value}/5 para desbloquear`);
+
 // End-of-game modal visibility
 const endModalVisible = ref(false);
 function showEndModal() { if (!endModalVisible.value) endModalVisible.value = true; }
@@ -216,6 +238,11 @@ const componentMap: Record<string, any> = { G1, G2, G3, G4, G5 };
 const currentComponent = computed(() => componentMap[currentVariant.value]);
 
 onMounted(() => {
+  // Reset header unlock state on mount
+  adminUnlockedHeader.value = false;
+  headerClickCount.value = 0;
+  if (headerClickResetTimer) { clearTimeout(headerClickResetTimer); headerClickResetTimer = null; }
+
   let room = colyseusService.gameRoom.value;
   if (!room) {
     router.push(`/${routeUuid.value}`);
@@ -417,6 +444,7 @@ async function leaveGame() {
 .btn { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; }
 .btn-variant { background: #f2f2f2; }
 .btn-variant.active { background: #667eea; color: white; }
+.btn-variant:disabled { opacity: 0.55; cursor: default; filter: grayscale(0.2) brightness(0.98); box-shadow: none; }
 .btn-next { background:#2196f3; color:white; margin-top: 12px; }
 .btn-leave { background:#f44336; color:white; }
 .players-section { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }