From 1a1478745a650c9294098210464afb16686d86c1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 28 Aug 2025 18:53:37 -0600
Subject: [PATCH] mejoras UI/UX

---
 client/src/components/AppCredits.vue | 21 +++++++++++++++++----
 client/src/views/DemoGame.vue        |  2 +-
 client/src/views/Game.vue            |  1 +
 client/src/views/games/G1.vue        |  1 -
 client/src/views/games/G2.vue        |  1 -
 client/src/views/games/G3.vue        |  1 -
 client/src/views/games/G4.vue        |  1 -
 client/src/views/games/G5.vue        |  1 -
 8 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/components/AppCredits.vue b/client/src/components/AppCredits.vue
index 2f821e3..4f378b5 100644
--- a/client/src/components/AppCredits.vue
+++ b/client/src/components/AppCredits.vue
@@ -6,7 +6,7 @@
       <template v-if="!collapsed">
         <span>Hecho por <strong>Nucleo Inteligencia</strong></span>
         <span class="sep">•</span>
-        <span>2025</span>
+        <span>2024</span>
         <span class="sep">•</span>
         <a href="mailto:firstcontact@nucleoriofrio.com" class="credits-link">firstcontact@nucleoriofrio.com</a>
         <span class="sep">•</span>
@@ -68,7 +68,7 @@ onUnmounted(() => {
 .app-credits.overlay { position: fixed; }
 .app-credits.bottom-right { right: 12px; bottom: 12px; }
 .app-credits.bottom-center { left: 50%; transform: translateX(-50%); bottom: 12px; position: fixed; }
-.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; }
+.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; width: 100%; }
 
 .credits-card {
   display: inline-flex;
@@ -85,6 +85,7 @@ onUnmounted(() => {
   border-radius: 10px;
   box-shadow: 0 6px 18px rgba(0,0,0,0.06);
   pointer-events: auto; /* allow clicking the mailto link */
+  max-width: 100%;
 }
 .credits-card.collapsed { gap: 6px; padding: 4px 6px; }
 .credits-card.collapsed > span:not(.sep),
@@ -94,7 +95,7 @@ onUnmounted(() => {
 .app-credits.inline .credits-card { background: rgba(255,255,255,0.14); border-color: rgba(0,0,0,0.04); }
 .credits-card strong { color: #475569; font-weight: 700; }
 .credits-card .sep { opacity: 0.55; }
-.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); }
+.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); overflow-wrap: anywhere; word-break: break-word; }
 .credits-link:hover { color: #334155; border-bottom-color: rgba(51,65,85,0.55); }
 .credits-link.icon { border-bottom: none; display: inline-flex; align-items:center; justify-content:center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); color:#334155; font-weight: 700; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
 .credits-link.icon:hover { background: rgba(255,255,255,0.9); }
@@ -105,6 +106,18 @@ onUnmounted(() => {
 .btn-toggle:focus { outline: none; }
 
 @media (max-width: 480px) {
-  .credits-card { font-size: 11px; padding: 6px 8px; }
+  .app-credits.inline { margin-top: 6px; }
+  .app-credits.inline .credits-card {
+    font-size: 10px;
+    padding: 4px 6px;
+    gap: 4px;
+    border-radius: 8px;
+    white-space: normal;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
+  .app-credits.inline .credits-card .sep { margin: 0 4px; }
+  .app-credits.inline .credits-link.icon { width: 16px; height: 16px; font-size: 11px; }
 }
 </style>
diff --git a/client/src/views/DemoGame.vue b/client/src/views/DemoGame.vue
index 22c2d06..fe7af68 100644
--- a/client/src/views/DemoGame.vue
+++ b/client/src/views/DemoGame.vue
@@ -455,7 +455,7 @@ async function leaveGame() {
 
 <style scoped>
 .game { min-height: calc(var(--app-vh, 1vh) * 100); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display:flex; align-items:center; justify-content:center; padding:20px; }
-.game-container { background: white; border-radius: 20px; padding: 24px; max-width: 1000px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
+.game-container { background: white; border-radius: 20px; padding: 24px; max-width: 1000px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin-bottom: 50px; }
 .game-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
 .game-header h1 { margin: 0; font-size: 20px; }
 .meta { display:flex; gap: 16px; font-size: 14px; }
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 96bef5b..f4e967e 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -242,6 +242,7 @@ function leaveGame() {
   max-width: 900px;
   width: 100%;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  margin-bottom: 50px;
 }
 
 .game-header {
diff --git a/client/src/views/games/G1.vue b/client/src/views/games/G1.vue
index a793b40..aa77cf1 100644
--- a/client/src/views/games/G1.vue
+++ b/client/src/views/games/G1.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="g">
-    <h3>G1 – Sin derechos de propiedad</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
     <OfferActions
       :state="state"
diff --git a/client/src/views/games/G2.vue b/client/src/views/games/G2.vue
index a3bf769..8cac50a 100644
--- a/client/src/views/games/G2.vue
+++ b/client/src/views/games/G2.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="g">
-    <h3>G2 – Regla contraproductiva (P2 puede forzar)</h3>
     <OfferControls 
       v-if="myRole==='P1' && !state.offer?.active && !state.g2ForcePending" 
       :my-role="myRole" 
diff --git a/client/src/views/games/G3.vue b/client/src/views/games/G3.vue
index 308823d..412d6dc 100644
--- a/client/src/views/games/G3.vue
+++ b/client/src/views/games/G3.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="g">
-    <h3>G3 – Token de repudio (vergüenza)</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
     <OfferActions
       :state="state"
diff --git a/client/src/views/games/G4.vue b/client/src/views/games/G4.vue
index a940d65..b5db3bc 100644
--- a/client/src/views/games/G4.vue
+++ b/client/src/views/games/G4.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="g">
-    <h3>G4 – Derechos mínimos de propiedad (juez)</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
     <OfferActions
       :state="state"
diff --git a/client/src/views/games/G5.vue b/client/src/views/games/G5.vue
index f62af22..e55093b 100644
--- a/client/src/views/games/G5.vue
+++ b/client/src/views/games/G5.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="g">
-    <h3>G5 – Cheap talk (chat previo no vinculante)</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
     <OfferActions
       :state="state"