feat: implement variable token offers and auto-round advancement

- Add variable offer system where P1 can offer any amount of tokens
- Players start with 10 tokens each (P1: pavos, P2: elotes)
- Implement offer/request mechanism with token validation
- Auto-advance rounds after P2 actions or P1 no-offer
- G2: Force offer by default, disable no-offer button when forced
- G3: Wait for shame decision after snatch before advancing
- G4: Implement inverse sanction (P1 gets requested without giving offered)
- Reset rounds to 1 when changing game variants
- Fix OfferControls responsiveness issues
- Hide offer controls after active offer
- Update all G1-G5 components with proper offer flow

client/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Lobby from '../views/Lobby.vue';
 import Game from '../views/Game.vue';
 import Dashboard from '../views/Dashboard.vue';
+import DemoGame from '../views/DemoGame.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -16,6 +17,11 @@ const router = createRouter({
       name: 'Game',
       component: Game
     },
+    {
+      path: '/demo',
+      name: 'DemoGame',
+      component: DemoGame
+    },
     {
       path: '/dashboard',
       name: 'Dashboard',
@@ -24,4 +30,4 @@ const router = createRouter({
   ]
 });
 
-export default router;
+export default router;

client/src/services/colyseus.ts

@@ -145,6 +145,55 @@ class ColyseusService {
     }
   }
 
+  // Demo game helpers
+  setVariant(variant: string): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("setVariant", variant);
+    }
+  }
+
+  p2Force(force: boolean): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("p2Force", force);
+    }
+  }
+
+  p1Action(action: 'offer' | 'no_offer' | 'forced_offer'): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("p1Action", action);
+    }
+  }
+
+  p2Action(action: 'accept' | 'reject' | 'snatch'): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("p2Action", action);
+    }
+  }
+
+  report(report: boolean): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("report", report);
+    }
+  }
+
+  assignShame(assign: boolean): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("assignShame", assign);
+    }
+  }
+
+  proposeOffer(offerPavo: number, offerElote: number, requestPavo: number, requestElote: number): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("proposeOffer", { offerPavo, offerElote, requestPavo, requestElote });
+    }
+  }
+
+  noOffer(): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("noOffer");
+    }
+  }
+
   leaveLobby(): void {
     console.log('leaveLobby called');
     if (this.lobbyRoom.value) {

client/src/views/DemoGame.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="game">
+    <div class="game-container">
+      <div class="game-header">
+        <h1>🧪 Demo Room</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 }]">
+            {{ g }}
+          </button>
+        </div>
+      </div>
+
+      <div class="players-section">
+        <div v-for="p in players" :key="p.sessionId" class="player-card" :class="{ 'current-player': p.sessionId === sessionId }">
+          <div class="player-name">{{ p.name }}</div>
+          <div class="player-role">Role: {{ p.role || '—' }}</div>
+          <div class="player-tokens">
+            <span>🦃 {{ p.pavoTokens }}</span>
+            <span>🌽 {{ p.eloteTokens }}</span>
+            <span v-if="p.shameTokens">😶 {{ p.shameTokens }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="gameStatus === 'waiting'" class="waiting-area">
+        <div class="waiting-message">
+          <div class="spinner"></div>
+          <h2>Waiting for opponent...</h2>
+          <p>Players in room: {{ players.length }}/2</p>
+        </div>
+      </div>
+
+      <div v-else class="gameplay">
+        <component :is="currentComponent"
+                   :state="roundState"
+                   :my-role="myRole"
+                   @p2Force="onP2Force"
+                   @p1Action="onP1Action"
+                   @p2Action="onP2Action"
+                   @report="onReport"
+                   @assignShame="onAssignShame"
+                   @proposeOffer="onProposeOffer"
+        />
+
+        <div class="outcome" v-if="outcomeP1 || outcomeP2">
+          <div class="outcome-box">
+            <div>Outcome P1: <strong>{{ outcomeP1 }}</strong></div>
+            <div>Outcome P2: <strong>{{ outcomeP2 }}</strong></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="game-footer">
+        <button @click="leaveGame" class="btn btn-leave">Leave Game</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { colyseusService } from '../services/colyseus';
+import { getStateCallbacks } from 'colyseus.js';
+
+import G1 from './games/G1.vue';
+import G2 from './games/G2.vue';
+import G3 from './games/G3.vue';
+import G4 from './games/G4.vue';
+import G5 from './games/G5.vue';
+
+const router = useRouter();
+
+const players = ref<any[]>([]);
+const gameStatus = ref('waiting');
+const roomId = ref('');
+const currentVariant = ref<'G1'|'G2'|'G3'|'G4'|'G5'>('G1');
+const currentRound = ref(1);
+const p1Action = ref('');
+const p2Action = ref('');
+const forcedByP2 = ref(false);
+const reported = ref(false);
+const shameAssigned = ref(false);
+const outcomeP1 = ref(0);
+const outcomeP2 = ref(0);
+
+const variants = ['G1','G2','G3','G4','G5'];
+
+const sessionId = computed(() => colyseusService.sessionId.value);
+const myRole = computed(() => {
+  const me = players.value.find(p => p.sessionId === sessionId.value);
+  return me?.role || '';
+});
+
+  const roundState = computed(() => ({
+    currentVariant: currentVariant.value,
+    currentRound: currentRound.value,
+    p1Action: p1Action.value,
+    p2Action: p2Action.value,
+    forcedByP2: forcedByP2.value,
+    reported: reported.value,
+    shameAssigned: shameAssigned.value,
+    offer: {
+      offerPavo: roomOffer('offerPavo'),
+      offerElote: roomOffer('offerElote'),
+      requestPavo: roomOffer('requestPavo'),
+      requestElote: roomOffer('requestElote'),
+      active: roomOffer('offerActive')
+    }
+  }));
+
+const componentMap: Record<string, any> = { G1, G2, G3, G4, G5 };
+const currentComponent = computed(() => componentMap[currentVariant.value]);
+
+onMounted(() => {
+  const room = colyseusService.gameRoom.value;
+  if (!room) {
+    router.push('/');
+    return;
+  }
+
+  const $ = getStateCallbacks(room);
+
+  room.onStateChange.once((state: any) => {
+    gameStatus.value = state.gameStatus || 'waiting';
+  });
+
+  $(room.state).listen("gameStatus", (value: string) => { gameStatus.value = value; });
+  $(room.state).listen("roomId", (value: string) => { roomId.value = value; });
+  $(room.state).listen("currentVariant", (value: string) => { currentVariant.value = value as any; });
+  $(room.state).listen("currentRound", (value: number) => { currentRound.value = value; });
+  $(room.state).listen("p1Action", (value: string) => { p1Action.value = value; });
+  $(room.state).listen("p2Action", (value: string) => { p2Action.value = value; });
+  $(room.state).listen("forcedByP2", (value: boolean) => { forcedByP2.value = value; });
+  $(room.state).listen("reported", (value: boolean) => { reported.value = value; });
+  $(room.state).listen("shameAssigned", (value: boolean) => { shameAssigned.value = value; });
+  // Offer fields
+  $(room.state).listen("offerPavo", () => forceUpdate());
+  $(room.state).listen("offerElote", () => forceUpdate());
+  $(room.state).listen("requestPavo", () => forceUpdate());
+  $(room.state).listen("requestElote", () => forceUpdate());
+  $(room.state).listen("offerActive", () => forceUpdate());
+
+  $(room.state).players.onAdd((player: any, key: string) => {
+    const idx = players.value.findIndex(p => p.sessionId === key);
+    if (idx === -1) {
+      players.value.push({
+        sessionId: key,
+        name: player.name,
+        role: player.role,
+        pavoTokens: player.pavoTokens,
+        eloteTokens: player.eloteTokens,
+        shameTokens: player.shameTokens,
+      });
+    }
+    $(player).listen("role", (v: string) => { const p = players.value.find(x => x.sessionId === key); if (p) p.role = v; });
+    $(player).listen("pavoTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.pavoTokens = v; });
+    $(player).listen("eloteTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.eloteTokens = v; });
+    $(player).listen("shameTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.shameTokens = v; });
+  });
+  $(room.state).players.onRemove((player: any, key: string) => {
+    const i = players.value.findIndex(p => p.sessionId === key);
+    if (i !== -1) players.value.splice(i, 1);
+  });
+
+  room.onMessage("playerInfo", (info: any) => {
+    colyseusService.sessionId.value = info.sessionId;
+    colyseusService.playerName.value = info.name;
+  });
+});
+
+function roomOffer<K extends string>(key: K): any {
+  const room = colyseusService.gameRoom.value as any;
+  return room?.state?.[key as any];
+}
+
+const refreshTick = ref(0);
+function forceUpdate() { refreshTick.value++; }
+
+function setVariant(g: string) { colyseusService.setVariant(g); }
+function onP2Force(force: boolean) { colyseusService.p2Force(force); }
+function onP1Action(action: 'no_offer') { colyseusService.noOffer(); }
+function onProposeOffer(payload: { offerPavo:number; offerElote:number; requestPavo:number; requestElote:number; }) { colyseusService.proposeOffer(payload.offerPavo, payload.offerElote, payload.requestPavo, payload.requestElote); }
+function onP2Action(action: 'accept'|'reject'|'snatch') { colyseusService.p2Action(action); }
+function onReport(val: boolean) { colyseusService.report(val); }
+function onAssignShame(val: boolean) { colyseusService.assignShame(val); }
+
+function leaveGame() { colyseusService.leaveGame();
+  router.push('/'); }
+</script>
+
+<style scoped>
+.game { min-height: 100vh; 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-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.game-header h1 { margin: 0; font-size: 20px; }
+.meta { display:flex; gap: 16px; font-size: 14px; }
+.badge { background:#e3f2fd; color:#2196f3; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
+.variant-selector { display:flex; gap: 8px; }
+.btn { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; }
+.btn-variant { background: #f2f2f2; }
+.btn-variant.active { background: #667eea; color: white; }
+.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; }
+.player-card { padding: 12px; background:#f8f9fa; border-radius: 10px; }
+.player-card.current-player { outline: 2px solid #667eea; }
+.player-role { color:#666; margin-top: 4px; }
+.player-tokens { display:flex; gap: 12px; margin-top: 8px; }
+.waiting-area { text-align:center; padding: 24px 0; }
+.spinner { width:40px; height:40px; border: 4px solid #eee; border-top:4px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 8px; }
+@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
+.outcome-box { display:flex; gap: 24px; background:#f5f5f5; padding: 12px; border-radius: 8px; }
+</style>

client/src/views/Lobby.vue

@@ -23,7 +23,7 @@
 
       <div class="main-actions">
         <button @click="handleQuickPlay" class="btn btn-primary btn-large" :disabled="isJoining">
-          <span v-if="!isJoining">⚡ Quick Play</span>
+          <span v-if="!isJoining">🧪 Demo Play</span>
           <span v-else>Finding match...</span>
         </button>
       </div>
@@ -156,8 +156,8 @@ async function handleQuickPlay() {
       colyseusService.lobbyRoom.value = null;
     }
     
-    console.log('Navigating to /game...');
-    await router.push('/game');
+    console.log('Navigating to /demo...');
+    await router.push('/demo');
     console.log('Navigation complete');
   } catch (error) {
     console.error('Failed to join game:', error);
@@ -421,4 +421,4 @@ async function joinRoom(roomId: string) {
   color: #666;
   font-size: 14px;
 }
-</style>
+</style>

client/src/views/games/G1.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="g">
+    <h3>G1 – Sin derechos de propiedad</h3>
+    <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
+    <div v-if="state.offer?.active" class="controls">
+      <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
+      <div v-if="myRole === 'P2'">
+        <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
+        <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
+        <button class="btn" @click="$emit('p2Action', 'snatch')">P2: Robar</button>
+      </div>
+      <div v-else class="hint">Esperando decisión de P2…</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OfferControls from './OfferControls.vue';
+const props = defineProps<{ state: any; myRole: string }>();
+const emit = defineEmits(['p1Action','p2Action','proposeOffer']);
+function onPropose(payload: any) { 
+  emit('proposeOffer', payload); 
+}
+function onNoOffer() {
+  emit('p1Action', 'no_offer');
+}
+</script>
+
+<style scoped>
+.g { background:#fff; padding:12px; border-radius:8px; }
+.controls { display:flex; gap:8px; margin:8px 0; }
+.btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.offer-view { font-size: 14px; color:#333; }
+.hint { color:#666; }
+</style>

client/src/views/games/G2.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="g">
+    <h3>G2 – Regla contraproductiva (P2 puede forzar)</h3>
+    <div class="controls" v-if="myRole === 'P2'">
+      <label><input type="checkbox" :checked="state.forcedByP2" @change="$emit('p2Force', ($event.target as HTMLInputElement).checked)"/> Forzar oferta</label>
+    </div>
+    <OfferControls v-if="myRole==='P1' && !state.offer?.active" :disable-no-offer="state.forcedByP2" @propose="onPropose" @no-offer="onNoOffer"/>
+    <div v-if="state.offer?.active" class="note">Oferta activa</div>
+    <div v-if="state.offer?.active" class="controls">
+      <div v-if="myRole === 'P2'">
+        <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
+        <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
+        <button class="btn" @click="$emit('p2Action', 'snatch')">P2: Robar</button>
+      </div>
+      <div v-else class="hint">Esperando decisión de P2…</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OfferControls from './OfferControls.vue';
+const props = defineProps<{ state: any; myRole: string }>();
+const emit = defineEmits(['p2Force','p1Action','p2Action','proposeOffer']);
+function onPropose(payload: any) { 
+  emit('proposeOffer', payload); 
+}
+function onNoOffer() {
+  if (!props.state.forcedByP2) {
+    emit('p1Action', 'no_offer');
+  }
+}
+</script>
+
+<style scoped>
+.g { background:#fff; padding:12px; border-radius:8px; }
+.controls { display:flex; gap:8px; margin:8px 0; }
+.btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.note { color:#1565c0; font-weight:600; }
+.hint { color:#666; }
+</style>

client/src/views/games/G3.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="g">
+    <h3>G3 – Token de repudio (vergüenza)</h3>
+    <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
+    <div v-if="state.offer?.active" class="controls">
+      <div v-if="myRole === 'P2'">
+        <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
+        <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
+        <button class="btn" @click="$emit('p2Action', 'snatch')">P2: Robar</button>
+      </div>
+      <div v-else class="hint">Esperando decisión de P2…</div>
+    </div>
+    <div v-if="state.p2Action === 'snatch' && myRole === 'P1'" class="controls">
+      <button class="btn warn" @click="$emit('assignShame', true)">Asignar vergüenza</button>
+      <button class="btn" @click="$emit('assignShame', false)">No asignar</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OfferControls from './OfferControls.vue';
+const props = defineProps<{ state: any; myRole: string }>();
+const emit = defineEmits(['p1Action','p2Action','assignShame','proposeOffer']);
+function onPropose(payload: any) { 
+  emit('proposeOffer', payload); 
+}
+function onNoOffer() {
+  emit('p1Action', 'no_offer');
+}
+</script>
+
+<style scoped>
+.g { background:#fff; padding:12px; border-radius:8px; }
+.controls { display:flex; gap:8px; margin:8px 0; }
+.btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.btn.warn { background:#ffecb3; color:#8d6e63; }
+.hint { color:#666; }
+</style>

client/src/views/games/G4.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="g">
+    <h3>G4 – Derechos mínimos de propiedad (juez)</h3>
+    <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
+    <div v-if="state.offer?.active" class="controls">
+      <div v-if="myRole === 'P2'">
+        <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
+        <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
+        <button class="btn" @click="$emit('p2Action', 'snatch')">P2: Robar</button>
+      </div>
+      <div v-else class="hint">Esperando decisión de P2…</div>
+    </div>
+    <div v-if="state.p2Action === 'snatch' && myRole === 'P1'" class="controls">
+      <button class="btn warn" @click="$emit('report', true)">Denunciar (confiscar tokens)</button>
+      <button class="btn" @click="$emit('report', false)">No denunciar</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OfferControls from './OfferControls.vue';
+const props = defineProps<{ state: any; myRole: string }>();
+const emit = defineEmits(['p1Action','p2Action','report','proposeOffer']);
+function onPropose(payload: any) { 
+  emit('proposeOffer', payload); 
+}
+function onNoOffer() {
+  emit('p1Action', 'no_offer');
+}
+</script>
+
+<style scoped>
+.g { background:#fff; padding:12px; border-radius:8px; }
+.controls { display:flex; gap:8px; margin:8px 0; }
+.btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.btn.warn { background:#ffe0e0; color:#b71c1c; }
+.hint { color:#666; }
+</style>

client/src/views/games/G5.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="g">
+    <h3>G5 – Cheap talk (chat previo no vinculante)</h3>
+    <div class="chat">
+      <input v-model="msg" placeholder="Mensaje (no vinculante)" />
+      <button class="btn" @click="send">Enviar</button>
+    </div>
+    <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
+    <div v-if="state.offer?.active" class="controls">
+      <div v-if="myRole === 'P2'">
+        <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
+        <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
+        <button class="btn" @click="$emit('p2Action', 'snatch')">P2: Robar</button>
+      </div>
+      <div v-else class="hint">Esperando decisión de P2…</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { colyseusService } from '../../services/colyseus';
+import OfferControls from './OfferControls.vue';
+
+const props = defineProps<{ state: any; myRole: string }>();
+const emit = defineEmits(['p1Action','p2Action','proposeOffer']);
+
+const msg = ref('');
+function send() {
+  // For MVP, just log locally; can be wired to room message later
+  console.log('cheap talk:', msg.value);
+  msg.value = '';
+}
+
+function onPropose(payload: any) { 
+  emit('proposeOffer', payload); 
+}
+function onNoOffer() {
+  emit('p1Action', 'no_offer');
+}
+</script>
+
+<style scoped>
+.g { background:#fff; padding:12px; border-radius:8px; }
+.controls { display:flex; gap:8px; margin:8px 0; }
+.chat { display:flex; gap:8px; margin:8px 0; }
+.chat input { flex:1; padding:8px; border-radius:6px; border:1px solid #ddd; }
+.btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.hint { color:#666; }
+</style>

client/src/views/games/OfferControls.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="offer">
+    <div class="row">
+      <label>Ofrezco:</label>
+      <input type="number" min="0" v-model.number="offerPavo" /> 🦃
+      <input type="number" min="0" v-model.number="offerElote" /> 🌽
+    </div>
+    <div class="row">
+      <label>A cambio:</label>
+      <input type="number" min="0" v-model.number="requestPavo" /> 🦃
+      <input type="number" min="0" v-model.number="requestElote" /> 🌽
+    </div>
+    <div class="controls">
+      <button class="btn primary" @click="propose">Enviar oferta</button>
+      <button class="btn" @click="noOffer" :disabled="disableNoOffer">No ofrecer</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const props = defineProps<{ disableNoOffer?: boolean }>();
+const emit = defineEmits(['propose','no-offer']);
+const offerPavo = ref(0);
+const offerElote = ref(0);
+const requestPavo = ref(0);
+const requestElote = ref(0);
+
+function propose() {
+  // Always emit the proposal with current values
+  const payload = {
+    offerPavo: Math.max(0, offerPavo.value|0),
+    offerElote: Math.max(0, offerElote.value|0),
+    requestPavo: Math.max(0, requestPavo.value|0),
+    requestElote: Math.max(0, requestElote.value|0)
+  };
+  emit('propose', payload);
+  
+  // Clear inputs after sending
+  offerPavo.value = 0;
+  offerElote.value = 0;
+  requestPavo.value = 0;
+  requestElote.value = 0;
+}
+
+function noOffer() {
+  // Clear inputs
+  offerPavo.value = 0;
+  offerElote.value = 0;
+  requestPavo.value = 0;
+  requestElote.value = 0;
+  emit('no-offer');
+}
+</script>
+
+<style scoped>
+.offer { background:#f9fafb; padding:10px; border-radius:8px; }
+.row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+label { width:70px; color:#555; }
+input { width:80px; padding:6px; border:1px solid #ddd; border-radius:6px; }
+.controls { display:flex; gap:8px; }
+.btn { padding:6px 10px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.btn:disabled { opacity:0.5; cursor:not-allowed; }
+.btn.primary { background:#667eea; color:#fff; }
+</style>