From 0b9c121f73b2a1e54f44d2a3fe6b36ba4a6c0316 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 11 Aug 2025 00:03:15 -0600
Subject: [PATCH] mejoras de UI, mensajes del sistema y hints

---
 client/src/views/games/ChatWidget.vue    | 141 +++++++++++++++----
 client/src/views/games/OfferActions.vue  | 167 ++++++++++-------------
 client/src/views/games/OfferControls.vue |  59 +++++---
 server/src/rooms/GameRoom.ts             |  35 ++++-
 4 files changed, 262 insertions(+), 140 deletions(-)

diff --git a/client/src/views/games/ChatWidget.vue b/client/src/views/games/ChatWidget.vue
index 90ecd9e..7d12645 100644
--- a/client/src/views/games/ChatWidget.vue
+++ b/client/src/views/games/ChatWidget.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="chat-widget">
-    <TransitionGroup name="ephem" tag="div" class="ephemeral-stack" v-if="ephemeralBubbles.length">
-      <div class="bubble" :class="{ fading: e.fading }" v-for="e in ephemeralBubbles" :key="e.id">{{ e.text }}</div>
+    <!-- System bubbles: top-left, newest on top -->
+    <TransitionGroup name="ephem" tag="div" class="ephemeral-stack-sys" v-if="ephemeralBubblesSys.length">
+      <div class="bubble" :class="[ e.kind ? `k-${e.kind}` : null, { fading: e.fading } ]" v-for="e in ephemeralBubblesSys" :key="e.id">{{ e.text }}</div>
+    </TransitionGroup>
+
+    <!-- Chat bubbles: bottom-right, newest at bottom -->
+    <TransitionGroup name="ephem" tag="div" class="ephemeral-stack-chat" v-if="ephemeralBubblesChat.length">
+      <div class="bubble chat" :class="{ fading: e.fading }" v-for="e in ephemeralBubblesChat" :key="e.id" :style="{ background: e.bg, color: e.fg }">{{ e.text }}</div>
     </TransitionGroup>
 
     <div class="composer" :class="{ 'is-focused': isComposerFocused }">
@@ -27,7 +33,7 @@
           <div
             v-for="m in messages"
             :key="m.id"
-            :class="['msg', m.mine ? 'mine' : 'theirs']"
+            :class="['msg', m.system ? 'system' : (m.mine ? 'mine' : 'theirs'), m.kind ? `k-${m.kind}` : null]"
           >
             <div class="meta">
               <span class="author">{{ m.mine ? 'Tú' : m.from }}</span>
@@ -61,6 +67,9 @@ interface ChatMsg {
   text: string;
   ts: number;
   mine: boolean;
+  kind?: string;
+  system?: boolean;
+  color?: string;
 }
 
 const text = ref("");
@@ -68,9 +77,11 @@ const isComposerFocused = ref(false);
 const messages = ref<ChatMsg[]>([]);
 const showModal = ref(false);
 const messagesEl = ref<HTMLDivElement | null>(null);
-const ephemeralBubbles = ref<{ id: string; text: string; expiresAt: number; fading?: boolean }[]>([]);
+const ephemeralBubblesSys = ref<{ id: string; text: string; expiresAt: number; fading?: boolean; kind?: string }[]>([]);
+const ephemeralBubblesChat = ref<{ id: string; text: string; expiresAt: number; fading?: boolean; bg?: string; fg?: string }[]>([]);
 
-const ephemeralTimers = new Map<string, { fade?: any; remove?: any }>();
+const ephemeralTimersSys = new Map<string, { fade?: any; remove?: any }>();
+const ephemeralTimersChat = new Map<string, { fade?: any; remove?: any }>();
 let removeHandler: (() => void) | null = null;
 const FADE_MS = 500; // start leave transition this long before removal
 
@@ -114,50 +125,93 @@ function handleIncoming(payload: any) {
     text: payload.text || "",
     ts: payload.ts || Date.now(),
     mine,
+    kind: payload.kind,
+    system: payload.fromId === 'system',
+    color: payload.color,
   };
   messages.value.push(msg);
   scrollToBottomSoon();
 
-  if (!mine) {
-    queueEphemeral(msg.id, msg.text);
+  if (!mine && msg.system) {
+    queueEphemeralSystem(msg.id, msg.text, msg.kind);
+  } else if (!mine && !msg.system) {
+    queueEphemeralChat(msg.id, msg.text, msg.color);
   }
 }
 
 function openModal() { showModal.value = true; }
 function closeModal() { showModal.value = false; }
 
-function queueEphemeral(id: string, t: string) {
-  // Compute duration based on words: min 3s, +0.5s per word up to 15s
+function queueEphemeralSystem(id: string, t: string, kind?: string) {
+  // System: top-left, longer duration (min 4s, 0.7s/word, max 20s)
   const words = (t || '').trim().split(/\s+/).filter(Boolean).length;
-  const computed = Math.min(15, Math.max(3, words * 0.5));
+  const computed = Math.min(20, Math.max(4, words * 0.7));
   const now = Date.now();
-  const upperMax = ephemeralBubbles.value.length
-    ? Math.max(...ephemeralBubbles.value.map(e => e.expiresAt))
-    : 0;
-  const expiresAt = Math.max(now + computed * 1000, upperMax || 0);
+  const expiresAt = now + computed * 1000;
 
-  const bubble = { id, text: t, expiresAt };
-  ephemeralBubbles.value.push(bubble);
+  const bubble = { id, text: t, expiresAt, kind };
+  ephemeralBubblesSys.value.unshift(bubble); // newest on top
 
-  // Schedule removal when its time comes
-  // Clear old timers if any
-  if (ephemeralTimers.has(id)) {
-    const t = ephemeralTimers.get(id)!;
+  if (ephemeralTimersSys.has(id)) {
+    const t = ephemeralTimersSys.get(id)!;
     if (t.fade) clearTimeout(t.fade);
     if (t.remove) clearTimeout(t.remove);
   }
   const delay = Math.max(0, expiresAt - now);
   const startDelay = Math.max(0, delay - FADE_MS);
   const fadeTimer = setTimeout(() => {
-    const b = ephemeralBubbles.value.find(e => e.id === id);
+    const b = ephemeralBubblesSys.value.find(e => e.id === id);
     if (b) b.fading = true;
   }, startDelay);
   const removeTimer = setTimeout(() => {
-    const idx = ephemeralBubbles.value.findIndex(e => e.id === id);
-    if (idx !== -1) ephemeralBubbles.value.splice(idx, 1);
-    ephemeralTimers.delete(id);
+    const idx = ephemeralBubblesSys.value.findIndex(e => e.id === id);
+    if (idx !== -1) ephemeralBubblesSys.value.splice(idx, 1);
+    ephemeralTimersSys.delete(id);
   }, delay);
-  ephemeralTimers.set(id, { fade: fadeTimer, remove: removeTimer });
+  ephemeralTimersSys.set(id, { fade: fadeTimer, remove: removeTimer });
+}
+
+function queueEphemeralChat(id: string, t: string, bg?: string) {
+  // Chat: bottom-right, slightly shorter (min 3s, 0.5s/word, max 15s)
+  const words = (t || '').trim().split(/\s+/).filter(Boolean).length;
+  const computed = Math.min(15, Math.max(3, words * 0.5));
+  const now = Date.now();
+  const expiresAt = now + computed * 1000;
+
+  const fg = getReadableTextColor(bg || '#667eea');
+  const bubble = { id, text: t, expiresAt, bg: bg || '#667eea', fg };
+  ephemeralBubblesChat.value.push(bubble); // newest at bottom
+
+  if (ephemeralTimersChat.has(id)) {
+    const t = ephemeralTimersChat.get(id)!;
+    if (t.fade) clearTimeout(t.fade);
+    if (t.remove) clearTimeout(t.remove);
+  }
+  const delay = Math.max(0, expiresAt - now);
+  const startDelay = Math.max(0, delay - FADE_MS);
+  const fadeTimer = setTimeout(() => {
+    const b = ephemeralBubblesChat.value.find(e => e.id === id);
+    if (b) b.fading = true;
+  }, startDelay);
+  const removeTimer = setTimeout(() => {
+    const idx = ephemeralBubblesChat.value.findIndex(e => e.id === id);
+    if (idx !== -1) ephemeralBubblesChat.value.splice(idx, 1);
+    ephemeralTimersChat.delete(id);
+  }, delay);
+  ephemeralTimersChat.set(id, { fade: fadeTimer, remove: removeTimer });
+}
+
+function getReadableTextColor(hex?: string): string {
+  const c = (hex || '').trim();
+  const m = c.match(/^#?([a-fA-F0-9]{6})$/);
+  let r=102, g=126, b=234; // fallback to #667eea
+  if (m) {
+    const int = parseInt(m[1], 16);
+    r = (int >> 16) & 255; g = (int >> 8) & 255; b = int & 255;
+  }
+  // Perceived brightness formula
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 140 ? '#111111' : '#ffffff';
 }
 
 function formatTime(ts: number) {
@@ -187,11 +241,16 @@ onMounted(() => {
 
 onUnmounted(() => {
   if (removeHandler) removeHandler();
-  for (const [, obj] of ephemeralTimers) {
+  for (const [, obj] of ephemeralTimersSys) {
     if (obj.fade) clearTimeout(obj.fade);
     if (obj.remove) clearTimeout(obj.remove);
   }
-  ephemeralTimers.clear();
+  for (const [, obj] of ephemeralTimersChat) {
+    if (obj.fade) clearTimeout(obj.fade);
+    if (obj.remove) clearTimeout(obj.remove);
+  }
+  ephemeralTimersSys.clear();
+  ephemeralTimersChat.clear();
 });
 
 // Ensure modal autoscrolls when opened
@@ -213,11 +272,23 @@ watch(showModal, (v) => { if (v) scrollToBottomSoon(); });
 .btn.secondary { background:#f5f5f5; color:#333; }
 .btn.close { background:#f5f5f5; color:#333; }
 
-.ephemeral-stack { position:absolute; right: 0; bottom: 56px; display:flex; flex-direction: column; align-items:flex-end; gap:8px; pointer-events: none; width: clamp(220px, 50vw, 380px); }
+.ephemeral-stack-sys { position:fixed; left: 16px; top: 16px; display:flex; flex-direction: column; align-items:flex-start; gap:8px; pointer-events: none; width: clamp(220px, 50vw, 420px); z-index: 60; }
+.ephemeral-stack-chat { position:fixed; right: 16px; bottom: 70px; display:flex; flex-direction: column; align-items:flex-end; gap:8px; pointer-events: none; width: clamp(220px, 50vw, 420px); z-index: 60; }
 .bubble { max-width: 100%; background:#333; color:#fff; padding:8px 10px; border-radius:12px; box-shadow:0 8px 16px rgba(0,0,0,0.25); transition: opacity 0.5s ease; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
+.bubble.k-p2_accept { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+.bubble.k-p2_reject { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
+.bubble.k-p2_snatch { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
+.bubble.k-p1_shame { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
+.bubble.k-p1_no_shame { background: #6b7280; }
+.bubble.k-p1_report { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
+.bubble.k-p1_no_report { background: #6b7280; }
+.bubble.k-p1_no_offer { background: #6b7280; }
+.bubble.k-p1_propose { background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%); }
+.bubble.k-variant_change { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+.bubble.k-round_advance { background: linear-gradient(135deg, #2196f3 0%, #1e88e5 100%); }
 .bubble.fading { opacity: 0; }
 /* TransitionGroup animations for stacking upward smoothly and fading */
-.ephem-enter-from { opacity: 0; transform: translateY(10px); }
+.ephem-enter-from { opacity: 0; transform: translateY(-8px); }
 .ephem-enter-to { opacity: 1; transform: translateY(0); }
 .ephem-enter-active { transition: all 0.25s ease; }
 .ephem-leave-from { opacity: 1; transform: translateY(0); }
@@ -239,4 +310,16 @@ watch(showModal, (v) => { if (v) scrollToBottomSoon(); });
 .msg .body { white-space: pre-wrap; }
 .msg.mine { align-self: flex-end; background:#e3f2fd; }
 .msg.theirs { align-self: flex-start; background:#f5f5f5; }
+.msg.system { align-self: center; background:#fafafa; border:1px solid #eee; color:#333; }
+.msg.system.k-p2_accept { border-left: 4px solid #10b981; }
+.msg.system.k-p2_reject { border-left: 4px solid #f59e0b; }
+.msg.system.k-p2_snatch { border-left: 4px solid #ef4444; }
+.msg.system.k-p1_shame { border-left: 4px solid #f59e0b; }
+.msg.system.k-p1_no_shame { border-left: 4px solid #6b7280; }
+.msg.system.k-p1_report { border-left: 4px solid #7c3aed; }
+.msg.system.k-p1_no_report { border-left: 4px solid #6b7280; }
+.msg.system.k-p1_no_offer { border-left: 4px solid #6b7280; }
+.msg.system.k-p1_propose { border-left: 4px solid #667eea; }
+.msg.system.k-variant_change { border-left: 4px solid #764ba2; }
+.msg.system.k-round_advance { border-left: 4px solid #2196f3; }
 </style>
diff --git a/client/src/views/games/OfferActions.vue b/client/src/views/games/OfferActions.vue
index 22f663e..bc44540 100644
--- a/client/src/views/games/OfferActions.vue
+++ b/client/src/views/games/OfferActions.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="shouldShowComponent" class="offer-actions-card">
+  <div
+    v-if="shouldShowComponent"
+    class="offer-actions-card"
+    :style="({ '--p1': p1Color, '--p2': p2Color } as any)"
+  >
     <!-- G2: Force option for P2 -->
     <div v-if="myRole === 'P2' && currentVariant === 'G2' && !state.offer?.active" class="force-section">
       <label class="force-checkbox">
@@ -15,26 +19,36 @@
     <!-- Offer display when active -->
     <div v-if="state.offer?.active" class="offer-display">
       <div class="offer-summary">
-        <div class="offer-part giving" :style="{ '--p1-color': p1Color }">
+        <div class="offer-part giving">
           <span class="offer-label">P1 Ofrece</span>
           <div class="tokens-display">
-            <span v-if="state.offer.offerPavo > 0" class="token-item">🦃 {{ state.offer.offerPavo }}</span>
-            <span v-if="state.offer.offerPavo > 0 && state.offer.offerElote > 0" class="separator">/</span>
-            <span v-if="state.offer.offerElote > 0" class="token-item">🌽 {{ state.offer.offerElote }}</span>
-            <span v-if="state.offer.offerPavo === 0 && state.offer.offerElote === 0" class="no-tokens">Nada</span>
+            <span v-if="state.offer.offerPavo > 0" class="token-item pill">
+              <span class="icon">🦃</span>
+              <span class="val">{{ state.offer.offerPavo }}</span>
+            </span>
+            <span v-if="state.offer.offerElote > 0" class="token-item pill">
+              <span class="icon">🌽</span>
+              <span class="val">{{ state.offer.offerElote }}</span>
+            </span>
+            <span v-if="state.offer.offerPavo === 0 && state.offer.offerElote === 0" class="no-tokens pill subtle">Nada</span>
           </div>
         </div>
         <div class="exchange-arrows">
           <span class="arrow-p1" :style="{ color: p1Color }">→</span>
           <span class="arrow-p2" :style="{ color: p2Color }">←</span>
         </div>
-        <div class="offer-part requesting" :style="{ '--p2-color': p2Color }">
+        <div class="offer-part requesting">
           <span class="offer-label">P2 Entrega</span>
           <div class="tokens-display">
-            <span v-if="state.offer.requestPavo > 0" class="token-item">🦃 {{ state.offer.requestPavo }}</span>
-            <span v-if="state.offer.requestPavo > 0 && state.offer.requestElote > 0" class="separator">/</span>
-            <span v-if="state.offer.requestElote > 0" class="token-item">🌽 {{ state.offer.requestElote }}</span>
-            <span v-if="state.offer.requestPavo === 0 && state.offer.requestElote === 0" class="no-tokens">Nada</span>
+            <span v-if="state.offer.requestPavo > 0" class="token-item pill">
+              <span class="icon">🦃</span>
+              <span class="val">{{ state.offer.requestPavo }}</span>
+            </span>
+            <span v-if="state.offer.requestElote > 0" class="token-item pill">
+              <span class="icon">🌽</span>
+              <span class="val">{{ state.offer.requestElote }}</span>
+            </span>
+            <span v-if="state.offer.requestPavo === 0 && state.offer.requestElote === 0" class="no-tokens pill subtle">Nada</span>
           </div>
         </div>
       </div>
@@ -57,10 +71,19 @@
 
       <!-- P1 waiting for P2 decision -->
       <div v-else-if="myRole === 'P1' && !state.p2Action" class="waiting-state">
-        <div class="spinner"></div>
+        <div class="spinner spinner--p2"></div>
         <span class="waiting-text">Esperando decisión de P2...</span>
       </div>
 
+      <!-- P2 waiting for P1 punishment decision after snatch (G3/G4) -->
+      <div
+        v-else-if="myRole === 'P2' && state.p2Action === 'snatch' && (currentVariant === 'G3' || currentVariant === 'G4') && ((currentVariant === 'G3' && !state.shameAssigned) || (currentVariant === 'G4' && state.reported === false))"
+        class="waiting-state"
+      >
+        <div class="spinner spinner--p1"></div>
+        <span class="waiting-text">Esperando castigo de P1...</span>
+      </div>
+
       <!-- Show P2's decision -->
       <div v-else-if="state.p2Action && !showP1PostActions" class="decision-display">
         <div class="decision-badge" :class="state.p2Action">
@@ -102,7 +125,7 @@
 
     <!-- Waiting for offer from P1 (P2 perspective) -->
     <div v-else-if="myRole === 'P2' && !state.offer?.active && currentVariant !== 'G2'" class="waiting-state">
-      <div class="spinner"></div>
+      <div class="spinner spinner--p1"></div>
       <span class="waiting-text">Esperando oferta de P1...</span>
     </div>
   </div>
@@ -120,8 +143,8 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const p1Color = props.p1Color || '#667eea';
-const p2Color = props.p2Color || '#764ba2';
+const p1Color = props.p1Color || "#667eea";
+const p2Color = props.p2Color || "#764ba2";
 
 const showP1PostActions = computed(() => {
   if (props.myRole !== 'P1' || props.state.p2Action !== 'snatch') return false;
@@ -161,10 +184,11 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
 <style scoped>
 .offer-actions-card {
   background: #ffffff;
-  border: 1px solid #e5e9f0;
-  border-radius: 10px;
+  border: 1px solid #eeeeee;
+  border-radius: 12px;
   padding: 12px;
   margin-top: 10px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .force-section {
@@ -213,18 +237,18 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
   align-items: center;
   gap: 4px;
   padding: 10px 16px;
-  border-radius: 8px;
+  border-radius: 10px;
   border: 1px solid #e2e8f0;
 }
 
 .offer-part.giving {
-  background: color-mix(in srgb, var(--p1-color) 8%, white);
-  border-color: color-mix(in srgb, var(--p1-color) 30%, white);
+  background: color-mix(in srgb, var(--p1) 10%, white);
+  border-color: color-mix(in srgb, var(--p1) 30%, #e6e9ff);
 }
 
 .offer-part.requesting {
-  background: color-mix(in srgb, var(--p2-color) 8%, white);
-  border-color: color-mix(in srgb, var(--p2-color) 30%, white);
+  background: color-mix(in srgb, var(--p2) 10%, white);
+  border-color: color-mix(in srgb, var(--p2) 30%, #e6e9ff);
 }
 
 .offer-label {
@@ -244,15 +268,13 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
   color: #1e293b;
 }
 
-.token-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
+.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f7f7f7; border:1px solid #eee; }
+.pill.subtle { background:#fafafa; color:#666; }
+.token-item { display:flex; align-items:center; gap:4px; }
+.icon { font-size: 16px; }
+.val { font-weight: 700; color:#333; }
 
-.separator {
-  color: #cbd5e1;
-}
+/* separator removed in favor of pill grouping */
 
 .exchange-arrows {
   display: flex;
@@ -277,79 +299,59 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
 
 .action-buttons {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
+  gap: 8px;
 }
 
 .btn {
-  padding: 8px 14px;
+  padding: 8px 10px;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
-  font-weight: 700;
-  font-size: 13px;
+  font-weight: 600;
+  font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 4px;
   transition: all 0.2s ease;
   position: relative;
   overflow: hidden;
 }
 
 .btn-icon {
-  font-size: 16px;
+  font-size: 14px;
 }
 
-.btn.accept {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
-}
+.btn.accept { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; box-shadow: 0 10px 20px rgba(16,185,129,0.25); }
 
 .btn.accept:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
 }
 
-.btn.reject {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
-}
+.btn.reject { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; box-shadow: 0 10px 20px rgba(245,158,11,0.25); }
 
 .btn.reject:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
 }
 
-.btn.snatch {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
-}
+.btn.snatch { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; box-shadow: 0 10px 20px rgba(239,68,68,0.25); }
 
 .btn.snatch:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
 }
 
-.btn.shame {
-  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
-}
+.btn.shame { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #fff; box-shadow: 0 10px 20px rgba(251,191,36,0.25); }
 
 .btn.shame:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(251, 191, 36, 0.35);
 }
 
-.btn.report {
-  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
-}
+.btn.report { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff; box-shadow: 0 10px 20px rgba(139,92,246,0.25); }
 
 .btn.report:hover {
   transform: translateY(-2px);
@@ -381,14 +383,9 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
   color: #64748b;
 }
 
-.spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid #e2e8f0;
-  border-top: 3px solid #667eea;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
+.spinner { width: 24px; height: 24px; border: 3px solid #e2e8f0; border-radius: 50%; animation: spin 1s linear infinite; }
+.spinner--p1 { border-top: 3px solid var(--p1); }
+.spinner--p2 { border-top: 3px solid var(--p2); }
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
@@ -406,31 +403,13 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
   padding: 12px;
 }
 
-.decision-badge {
-  padding: 10px 20px;
-  border-radius: 10px;
-  font-weight: 700;
-  font-size: 14px;
-  text-align: center;
-}
+.decision-badge { padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; }
 
-.decision-badge.accept {
-  background: #d1fae5;
-  color: #065f46;
-  border: 1px solid #6ee7b7;
-}
+.decision-badge.accept { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; box-shadow: 0 6px 14px rgba(16,185,129,0.15); }
 
-.decision-badge.reject {
-  background: #fed7aa;
-  color: #92400e;
-  border: 1px solid #fb923c;
-}
+.decision-badge.reject { background: #fed7aa; color: #92400e; border: 1px solid #fb923c; box-shadow: 0 6px 14px rgba(245,158,11,0.15); }
 
-.decision-badge.snatch {
-  background: #fee2e2;
-  color: #991b1b;
-  border: 1px solid #fca5a5;
-}
+.decision-badge.snatch { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; box-shadow: 0 6px 14px rgba(239,68,68,0.15); }
 
 .p1-response {
   margin-top: 16px;
@@ -450,4 +429,4 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
     grid-template-columns: 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/views/games/OfferControls.vue b/client/src/views/games/OfferControls.vue
index cf414e7..210bba9 100644
--- a/client/src/views/games/OfferControls.vue
+++ b/client/src/views/games/OfferControls.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="offer-card">
+  <div class="offer-card" :class="{ disabled: isFinished }" :aria-disabled="isFinished ? 'true' : 'false'">
+    <div v-if="isFinished" class="banner finished">🏁 Juego finalizado</div>
     <div class="offer-grid">
       <div class="group">
         <div class="group-title">Ofrezco</div>
@@ -7,17 +8,17 @@
           <div class="token-ctrl">
             <span class="icon">🦃</span>
             <div class="ctrl">
-              <button class="step" @click="dec('offerPavo')" aria-label="-1 pavo" tabindex="-1">−</button>
-              <input type="number" min="0" :max="maxOfferPavo" v-model.number="offerPavo" />
-              <button class="step" @click="inc('offerPavo')" aria-label="+1 pavo" tabindex="-1">＋</button>
+              <button class="step" @click="dec('offerPavo')" :disabled="isFinished" aria-label="-1 pavo" tabindex="-1">−</button>
+              <input type="number" min="0" :max="maxOfferPavo" v-model.number="offerPavo" :disabled="isFinished" />
+              <button class="step" @click="inc('offerPavo')" :disabled="isFinished" aria-label="+1 pavo" tabindex="-1">＋</button>
             </div>
           </div>
           <div class="token-ctrl">
             <span class="icon">🌽</span>
             <div class="ctrl">
-              <button class="step" @click="dec('offerElote')" aria-label="-1 elote" tabindex="-1">−</button>
-              <input type="number" min="0" :max="maxOfferElote" v-model.number="offerElote" />
-              <button class="step" @click="inc('offerElote')" aria-label="+1 elote" tabindex="-1">＋</button>
+              <button class="step" @click="dec('offerElote')" :disabled="isFinished" aria-label="-1 elote" tabindex="-1">−</button>
+              <input type="number" min="0" :max="maxOfferElote" v-model.number="offerElote" :disabled="isFinished" />
+              <button class="step" @click="inc('offerElote')" :disabled="isFinished" aria-label="+1 elote" tabindex="-1">＋</button>
             </div>
           </div>
         </div>
@@ -29,17 +30,17 @@
           <div class="token-ctrl">
             <span class="icon">🦃</span>
             <div class="ctrl">
-              <button class="step" @click="dec('requestPavo')" aria-label="-1 pavo" tabindex="-1">−</button>
-              <input type="number" min="0" :max="maxRequestPavo" v-model.number="requestPavo" />
-              <button class="step" @click="inc('requestPavo')" aria-label="+1 pavo" tabindex="-1">＋</button>
+              <button class="step" @click="dec('requestPavo')" :disabled="isFinished" aria-label="-1 pavo" tabindex="-1">−</button>
+              <input type="number" min="0" :max="maxRequestPavo" v-model.number="requestPavo" :disabled="isFinished" />
+              <button class="step" @click="inc('requestPavo')" :disabled="isFinished" aria-label="+1 pavo" tabindex="-1">＋</button>
             </div>
           </div>
           <div class="token-ctrl">
             <span class="icon">🌽</span>
             <div class="ctrl">
-              <button class="step" @click="dec('requestElote')" aria-label="-1 elote" tabindex="-1">−</button>
-              <input type="number" min="0" :max="maxRequestElote" v-model.number="requestElote" />
-              <button class="step" @click="inc('requestElote')" aria-label="+1 elote" tabindex="-1">＋</button>
+              <button class="step" @click="dec('requestElote')" :disabled="isFinished" aria-label="-1 elote" tabindex="-1">−</button>
+              <input type="number" min="0" :max="maxRequestElote" v-model.number="requestElote" :disabled="isFinished" />
+              <button class="step" @click="inc('requestElote')" :disabled="isFinished" aria-label="+1 elote" tabindex="-1">＋</button>
             </div>
           </div>
         </div>
@@ -47,15 +48,18 @@
     </div>
 
     <div class="actions">
-      <button class="btn primary" @click="propose">Enviar oferta</button>
-      <button class="btn ghost" @click="noOffer" :disabled="disableNoOffer">No ofrecer</button>
+      <button class="btn primary" @click="propose" :disabled="isFinished || isNonsense">Enviar oferta</button>
+      <button class="btn ghost" @click="noOffer" :disabled="disableNoOffer || isFinished">No ofrecer</button>
     </div>
+    <div v-if="isNonsense && !isFinished" class="hint invalid">⚠️ La oferta no tiene sentido.</div>
+    <div v-if="!isFinished && disableNoOffer" class="hint blocked">🚫 "No ofrecer" no está disponible porque P2 te obliga a proponer.</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { colyseusService } from '../../services/colyseus';
+import { getStateCallbacks } from 'colyseus.js';
 const props = defineProps<{ disableNoOffer?: boolean; myRole?: string }>();
 const emit = defineEmits(['propose','no-offer']);
 const offerPavo = ref(0);
@@ -66,10 +70,12 @@ const requestElote = ref(0);
 const room = computed(() => colyseusService.gameRoom.value as any);
 const p1 = computed(() => room.value?.state ? room.value.state.players.get(room.value.state.p1Id) : null);
 const p2 = computed(() => room.value?.state ? room.value.state.players.get(room.value.state.p2Id) : null);
+const isFinished = ref(false);
 const maxOfferPavo = computed(() => (p1.value?.pavoTokens ?? Infinity));
 const maxOfferElote = computed(() => (p1.value?.eloteTokens ?? Infinity));
 const maxRequestPavo = computed(() => (p2.value?.pavoTokens ?? Infinity));
 const maxRequestElote = computed(() => (p2.value?.eloteTokens ?? Infinity));
+const isNonsense = computed(() => (offerPavo.value|0) === (requestPavo.value|0) && (offerElote.value|0) === (requestElote.value|0));
 
 function clampAll() {
   offerPavo.value = Math.max(0, Math.min(offerPavo.value | 0, maxOfferPavo.value));
@@ -79,6 +85,17 @@ function clampAll() {
 }
 watch([offerPavo, offerElote, requestPavo, requestElote, maxOfferPavo, maxOfferElote, maxRequestPavo, maxRequestElote], clampAll);
 
+onMounted(() => {
+  const r = room.value;
+  if (r?.state) {
+    isFinished.value = ((r.state.gameStatus || '').toLowerCase() === 'finished');
+    const $ = getStateCallbacks(r);
+    $(r.state).listen('gameStatus', (v: string) => {
+      isFinished.value = (v || '').toLowerCase() === 'finished';
+    });
+  }
+});
+
 function inc(key: 'offerPavo'|'offerElote'|'requestPavo'|'requestElote') {
   if (key === 'offerPavo') offerPavo.value = Math.min((offerPavo.value|0)+1, maxOfferPavo.value);
   else if (key === 'offerElote') offerElote.value = Math.min((offerElote.value|0)+1, maxOfferElote.value);
@@ -93,6 +110,7 @@ function dec(key: 'offerPavo'|'offerElote'|'requestPavo'|'requestElote') {
 }
 
 function propose() {
+  if (isFinished.value || isNonsense.value) return;
   // Always emit the proposal with current values
   const payload = {
     offerPavo: Math.max(0, Math.min(offerPavo.value|0, maxOfferPavo.value)),
@@ -110,6 +128,7 @@ function propose() {
 }
 
 function noOffer() {
+  if (isFinished.value) return;
   // Clear inputs
   offerPavo.value = 0;
   offerElote.value = 0;
@@ -121,6 +140,9 @@ function noOffer() {
 
 <style scoped>
 .offer-card { margin-top:10px; }
+.offer-card.disabled { opacity: 0.6; filter: grayscale(0.15); pointer-events: none; }
+.banner { margin-bottom:8px; padding:8px 10px; border-radius:10px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; }
+.banner.finished { background:#f8fafc; border:1px solid #e5e9f0; color:#334155; }
 .offer-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
 @media (min-width: 500px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
 
@@ -135,11 +157,16 @@ function noOffer() {
 .ctrl input[type=number] { -moz-appearance: textfield; }
 .step { width:28px; height:28px; border-radius:8px; border:1px solid #cbd5e1; background:#f1f5f9; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; }
 .step:hover { background:#e2e8f0; }
+.step:disabled { opacity: 0.6; cursor: not-allowed; }
 
 .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap: wrap; }
+.hint.invalid { margin-top:8px; font-size:13px; font-weight:600; background:#fff7ed; color:#92400e; border:1px solid #fed7aa; padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; }
+.hint.blocked { margin-top:6px; font-size:13px; font-weight:600; background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; }
 .btn { padding:10px 14px; border:none; border-radius:10px; cursor:pointer; font-weight:700; }
 .btn.primary { background:#667eea; color:#fff; box-shadow: 0 10px 20px rgba(102,126,234,0.35); }
 .btn.primary:hover { filter: brightness(1.05); }
 .btn.ghost { background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; }
 .btn.ghost:disabled { opacity:0.5; cursor:not-allowed; }
+.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
+.ctrl input:disabled { background: #f8fafc; color:#94a3b8; }
 </style>
diff --git a/server/src/rooms/GameRoom.ts b/server/src/rooms/GameRoom.ts
index b691e8c..20457c6 100644
--- a/server/src/rooms/GameRoom.ts
+++ b/server/src/rooms/GameRoom.ts
@@ -7,6 +7,17 @@ export class GameRoom extends Room<GameState> {
   maxClients = 2;
   private gameInterval?: NodeJS.Timeout;
 
+  private sysChat(text: string, kind: string) {
+    this.broadcast("chat", {
+      id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      text,
+      from: "Sistema",
+      fromId: "system",
+      ts: Date.now(),
+      kind,
+    } as any);
+  }
+
   onCreate(options: any) {
     this.setState(new GameState());
     this.state.roomId = this.roomId;
@@ -26,6 +37,7 @@ export class GameRoom extends Room<GameState> {
         this.state.forcedByP2 = true;
       }
       this.broadcast("variantChanged", { variant });
+      this.sysChat(`🔄 Variante cambiada a ${variant}`, 'variant_change');
     });
 
     // P1 proposes a variable offer (offer -> P2, request <- from P2)
@@ -56,6 +68,8 @@ export class GameRoom extends Room<GameState> {
       this.state.requestElote = rElote;
       this.state.offerActive = true; // Always set active when an offer is proposed
       this.state.p1Action = "offer";
+      // System chat with proposal summary
+      this.sysChat(`📨 P1 ofrece`, 'p1_propose');
     });
 
     // P1 decides to not offer
@@ -67,6 +81,8 @@ export class GameRoom extends Room<GameState> {
       
       this.state.resetRound();
       this.state.p1Action = "no_offer";
+      // System chat for no-offer
+      this.sysChat('⛔ P1 no ofrece', 'p1_no_offer');
       // Auto-advance to next round when P1 doesn't offer
       this.advanceRound();
     });
@@ -80,6 +96,8 @@ export class GameRoom extends Room<GameState> {
       // When forced, P1 must propose an offer; nothing automatic here.
     });
 
+    // System chat helper moved to class method this.sysChat
+
     // P2 action
     this.onMessage("p2Action", (client, action: string) => {
       const player = this.state.players.get(client.sessionId);
@@ -91,6 +109,11 @@ export class GameRoom extends Room<GameState> {
       
       this.state.p2Action = action; // accept | reject | snatch
       this.resolveP2Action();
+
+      // System chat feedback for both players
+      if (action === 'accept') this.sysChat('P2 aceptó', 'p2_accept');
+      else if (action === 'reject') this.sysChat('P2 rechazó la oferta', 'p2_reject');
+      else if (action === 'snatch') this.sysChat('👹 P2 robó', 'p2_snatch');
       
       // Auto-advance unless it's a snatch in G3 or G4 (need shame/report)
       if (action !== 'snatch' || (this.state.currentVariant !== 'G3' && this.state.currentVariant !== 'G4')) {
@@ -124,6 +147,9 @@ export class GameRoom extends Room<GameState> {
         // Clear offer now
         this.clearOffer();
       }
+      // System chat feedback
+      if (report) this.sysChat('⚖️ P1 denunció al juez y se confiscaron tokens', 'p1_report');
+      else this.sysChat('🤝 P1 decidió no denunciar al juez', 'p1_no_report');
       // Auto-advance after report decision
       this.advanceRound();
     });
@@ -135,10 +161,11 @@ export class GameRoom extends Room<GameState> {
       if (!text.trim()) return;
       const player = this.state.players.get(client.sessionId);
       const from = player?.name || "player";
+      const color = (player as any)?.color || "#667eea";
       const ts = Date.now();
       const id = (payload as any)?.id || `${ts}-${client.sessionId}`;
       // Broadcast to all (including sender) so both UIs render the same
-      this.broadcast("chat", { id, text, from, fromId: client.sessionId, ts });
+      this.broadcast("chat", { id, text, from, fromId: client.sessionId, ts, color });
     });
 
     // G3 shame token after snatch
@@ -152,6 +179,9 @@ export class GameRoom extends Room<GameState> {
         const p2 = this.state.p2Id ? this.state.players.get(this.state.p2Id) : undefined;
         if (p2) p2.shameTokens += 1;
       }
+      // System chat feedback
+      if (assign) this.sysChat('😶 P1 asignó un token de vergüenza a P2', 'p1_shame');
+      else this.sysChat('😌 P1 decidió no asignar vergüenza', 'p1_no_shame');
       // Auto-advance after shame decision
       this.advanceRound();
     });
@@ -249,6 +279,8 @@ export class GameRoom extends Room<GameState> {
       this.state.forcedByP2 = true;
     }
     this.broadcast("gameStart");
+    // System chat: start at round 1
+    this.sysChat(`▶️ Ronda ${this.state.currentRound}/3`, 'round_advance');
   }
 
   private pauseGame() {
@@ -380,6 +412,7 @@ export class GameRoom extends Room<GameState> {
       this.state.currentRound += 1;
       this.state.resetRound();
       this.broadcast("roundStarted", { round: this.state.currentRound });
+      this.sysChat(`▶️ Ronda ${this.state.currentRound}/3`, 'round_advance');
     } else {
       this.state.finishGame();
       this.endGame();