/* =========================================================
   MICROSOFT FLUENT 3D EMOJI CSS
   ========================================================= */

.fluent-emoji {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

/* Adjust size for smaller contexts */
.game-stats .fluent-emoji, .stat-badge .fluent-emoji {
  width: 22px;
  height: 22px;
}

/* Adjust size for larger contexts like victory titles */
h2 .fluent-emoji {
  width: 36px;
  height: 36px;
  transform: translateY(-2px);
}

/* Pulse animation on hover */
@keyframes emojiBounce {
  0% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
  50% { transform: scale(1.15) translateY(-3px); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25)); }
  100% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
}

button:hover .fluent-emoji, 
a:hover .fluent-emoji, 
.stat-badge:hover .fluent-emoji {
  animation: emojiBounce 1.5s infinite ease-in-out;
}