reaccion del frontend

client/src/views/games/PlayerStats.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="player-card" :class="{ 'current-player': highlight }" :style="{ '--primary': primary } as any">
+  <div 
+    class="player-card" 
+    :class="{ 'current-player': highlight, 'shamed': hasShame }" 
+    :style="{ '--primary': primary } as any"
+    :aria-label="hasShame ? 'Jugador con vergüenza' : 'Jugador'"
+  >
     <div class="header">
       <div class="name">{{ player.name || '—' }}</div>
       <div class="role" :class="player.role">{{ player.role || '—' }}</div>
+      <div v-if="hasShame" class="shame-badge" :title="`Vergüenza: ${player.shameTokens}`">😶 × {{ player.shameTokens }}</div>
     </div>
     <div class="tokens">
       <div class="token pill">
@@ -14,7 +20,7 @@
         <span class="val"><AnimatedNumber :value="player.eloteTokens ?? 0" /></span>
       </div>
       <Transition name="pop">
-        <div v-if="(player.shameTokens ?? 0) > 0" class="token pill subtle shame-pill">
+        <div v-if="hasShame" class="token pill shame-pill" aria-label="Vergüenza">
           <span class="icon">😶</span>
           <span class="val"><AnimatedNumber :value="player.shameTokens ?? 0" :pulseOnFirst="true" /></span>
         </div>
@@ -42,6 +48,7 @@ interface PlayerView {
 
 const props = defineProps<{ player: PlayerView & { color?: string }; highlight?: boolean }>();
 const highlight = computed(() => !!props.highlight);
+const hasShame = computed(() => (props.player.shameTokens || 0) > 0);
 
 const scoreAsP1 = computed(() => (props.player.pavoTokens || 0) * 1 + (props.player.eloteTokens || 0) * 2);
 const scoreAsP2 = computed(() => (props.player.eloteTokens || 0) * 1 + (props.player.pavoTokens || 0) * 2);
@@ -50,16 +57,22 @@ const primary = computed(() => props.player.color || '#667eea');
 </script>
 
 <style scoped>
-.player-card { background:#fff; border-radius:12px; padding:12px; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
+.player-card { position:relative; background:#fff; border-radius:12px; padding:12px; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
 .player-card.current-player { outline: 0.5px solid b; box-shadow:0 1px 7px  var(--primary); }
+.player-card.shamed { border-color:#fca5a5; box-shadow: 0 6px 24px rgba(239,68,68,0.25); background: linear-gradient(180deg, #fff 0%, #fff5f5 100%); }
+.player-card.shamed::after { content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none; box-shadow: 0 0 0 2px rgba(239,68,68,0.25) inset; }
+.player-card.shamed { animation: shamePulse 1.6s ease-in-out 2; }
+@keyframes shamePulse { 0%{ transform:scale(1); } 50%{ transform:scale(1.01); } 100%{ transform:scale(1); } }
 .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
 .name { font-weight: 700; color:#333; }
 .role { font-size:12px; padding:2px 8px; border-radius:10px; background:#f0f0f0; color:#555; }
 .role.P1 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
 .role.P2 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
+.shame-badge { margin-left:8px; margin-right:0; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px; display:flex; align-items:center; gap:6px; }
 .tokens { display:flex; gap:10px; margin:8px 0; }
 .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; }
+.shame-pill { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
 .icon { font-size: 16px; }
 .val { font-weight: 600; color:#333; display:inline-block; min-width: 1ch; }
 .score { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding:8px; border-radius:10px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white) 0%, #ffffff 100%); border:1px solid color-mix(in srgb, var(--primary) 30%, #e6e9ff); }