/* Animated avatar container */
.avatar {
  width: 64px; height: 64px; border-radius: 16px; position: relative;
  overflow: hidden; flex-shrink: 0;
  background: rgba(0,0,0,0.3); border: 2px solid rgba(14,165,233,0.3);
}
.avatar-sm { width: 36px; height: 36px; border-radius: 10px; }
.avatar-lg { width: 96px; height: 96px; border-radius: 20px; }

.avatar-inner {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; position: relative;
}
.avatar-sm .avatar-inner { font-size: 18px; }
.avatar-lg .avatar-inner { font-size: 48px; }

/* MINECRAFT HEAD */
.avatar-minecraft .avatar-inner {
  background: #8B6914;
}
.avatar-minecraft .mc-face {
  width: 70%; height: 70%; position: relative;
  background: #C8956C; border: 2px solid #5D4037;
  animation: mcBob 2s ease-in-out infinite;
}
.avatar-minecraft .mc-eye {
  position: absolute; width: 18%; height: 18%; background: #fff;
  top: 30%; border: 1px solid #333;
}
.avatar-minecraft .mc-eye.left { left: 20%; }
.avatar-minecraft .mc-eye.right { right: 20%; }
.avatar-minecraft .mc-eye::after {
  content: ''; position: absolute; width: 50%; height: 50%;
  background: #4a90d9; bottom: 0; right: 0;
}
.avatar-minecraft .mc-mouth {
  position: absolute; bottom: 20%; left: 25%; width: 50%; height: 12%;
  background: #5D4037;
}

@keyframes mcBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* STANDOFF AK */
.avatar-standoff_ak .avatar-inner { background: linear-gradient(180deg, #1a1a2e, #16213e); }
.avatar-standoff_ak .ak-gun {
  font-size: 28px; animation: akRecoil 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,100,0,0.5));
}
.avatar-standoff_ak .ak-flash {
  position: absolute; top: 30%; right: 10%; width: 8px; height: 8px;
  background: #ff6600; border-radius: 50%; opacity: 0;
  animation: akFlash 3s ease-in-out infinite;
}
@keyframes akRecoil { 0%,85%,100%{transform:rotate(0)} 88%{transform:rotate(-8deg) translateX(-2px)} 92%{transform:rotate(2deg)} }
@keyframes akFlash { 0%,85%,100%{opacity:0;transform:scale(0)} 88%{opacity:1;transform:scale(2)} 92%{opacity:0} }

/* SHARK */
.avatar-shark .avatar-inner { background: linear-gradient(180deg, #0369a1, #0c4a6e); }
.avatar-shark .shark-emoji { animation: sharkSwim 2s ease-in-out infinite; }
@keyframes sharkSwim { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(4px) rotate(5deg)} 75%{transform:translateX(-4px) rotate(-5deg)} }

/* DOLPHIN */
.avatar-dolphin .avatar-inner { background: linear-gradient(180deg, #0284c7, #0369a1); }
.avatar-dolphin .dolphin-emoji { animation: dolphinJump 2.5s ease-in-out infinite; }
@keyframes dolphinJump { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px) rotate(-10deg)} 60%{transform:translateY(-4px)} }

/* WAVE */
.avatar-wave .avatar-inner { background: linear-gradient(180deg, #0ea5e9, #0369a1); overflow: hidden; }
.avatar-wave .wave-layer {
  position: absolute; bottom: 0; left: -10%; width: 120%; height: 40%;
  background: rgba(255,255,255,0.2); border-radius: 50% 50% 0 0;
  animation: waveMove 2s ease-in-out infinite;
}
.avatar-wave .wave-layer:nth-child(2) { height: 30%; animation-delay: 0.5s; opacity: 0.5; }
@keyframes waveMove { 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }

/* FIRE */
.avatar-fire .avatar-inner { background: #1a0a00; }
.avatar-fire .fire-emoji { animation: fireFlicker 0.5s ease-in-out infinite alternate; }
@keyframes fireFlicker { 0%{transform:scale(1) rotate(-3deg);filter:brightness(1)} 100%{transform:scale(1.1) rotate(3deg);filter:brightness(1.3)} }

/* LIGHTNING */
.avatar-lightning .avatar-inner { background: #1e1b4b; }
.avatar-lightning .bolt { animation: boltStrike 2s ease-in-out infinite; color: #fbbf24; font-size: 36px; }
@keyframes boltStrike { 0%,90%,100%{opacity:0.3;transform:scale(0.8)} 92%,96%{opacity:1;transform:scale(1.2);filter:drop-shadow(0 0 8px #fbbf24)} }

/* CROWN */
.avatar-crown .avatar-inner { background: linear-gradient(180deg, #451a03, #78350f); }
.avatar-crown .crown-emoji { animation: crownGlow 2s ease-in-out infinite; }
@keyframes crownGlow { 0%,100%{filter:drop-shadow(0 0 2px #fbbf24)} 50%{filter:drop-shadow(0 0 10px #fbbf24) brightness(1.3)} }

/* NINJA */
.avatar-ninja .avatar-inner { background: #111; }
.avatar-ninja .ninja-face {
  width: 60%; height: 50%; background: #222; border-radius: 50% 50% 40% 40%;
  position: relative; border: 2px solid #333;
}
.avatar-ninja .ninja-eye {
  position: absolute; top: 35%; width: 20%; height: 8%; background: #fff;
}
.avatar-ninja .ninja-eye.left { left: 18%; }
.avatar-ninja .ninja-eye.right { right: 18%; }
.avatar-ninja .ninja-band {
  position: absolute; top: 25%; left: -10%; width: 120%; height: 15%;
  background: #ef4444; animation: ninjaBlink 4s ease-in-out infinite;
}
@keyframes ninjaBlink { 0%,48%,52%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.1)} }

/* ROBOT */
.avatar-robot .avatar-inner { background: linear-gradient(180deg, #374151, #1f2937); }
.avatar-robot .robot-head {
  width: 65%; height: 60%; background: #6b7280; border-radius: 8px;
  position: relative; border: 2px solid #9ca3af;
  animation: robotTick 1s steps(2) infinite;
}
.avatar-robot .robot-eye {
  position: absolute; top: 25%; width: 22%; height: 22%;
  background: #22d3ee; border-radius: 50%;
  animation: robotEye 2s ease-in-out infinite;
}
.avatar-robot .robot-eye.left { left: 15%; }
.avatar-robot .robot-eye.right { right: 15%; }
.avatar-robot .robot-mouth {
  position: absolute; bottom: 15%; left: 20%; width: 60%; height: 8%;
  background: #374151; border-radius: 2px;
}
@keyframes robotTick { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
@keyframes robotEye { 0%,100%{background:#22d3ee} 50%{background:#06b6d4} }

/* DRAGON */
.avatar-dragon .avatar-inner { background: linear-gradient(180deg, #7f1d1d, #450a0a); }
.avatar-dragon .dragon-emoji { animation: dragonBreath 3s ease-in-out infinite; }
@keyframes dragonBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15);filter:drop-shadow(0 0 6px #ef4444)} }

/* PHOENIX */
.avatar-phoenix .avatar-inner { background: linear-gradient(180deg, #431407, #7c2d12); }
.avatar-phoenix .phoenix-emoji { animation: phoenixFly 2s ease-in-out infinite; }
@keyframes phoenixFly { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(5deg)} }

/* ICE */
.avatar-ice .avatar-inner { background: linear-gradient(180deg, #dbeafe, #93c5fd); }
.avatar-ice .ice-crystal { animation: iceShimmer 2s ease-in-out infinite; font-size: 30px; }
@keyframes iceShimmer { 0%,100%{opacity:0.8;transform:rotate(0)} 50%{opacity:1;transform:rotate(10deg)} }

/* TIGER */
.avatar-tiger .avatar-inner { background: linear-gradient(180deg, #ea580c, #c2410c); }
.avatar-tiger .tiger-emoji { animation: tigerPounce 2.5s ease-in-out infinite; }
@keyframes tigerPounce { 0%,100%{transform:scale(1)} 60%{transform:scale(1.1) translateY(-3px)} }

/* WOLF */
.avatar-wolf .avatar-inner { background: linear-gradient(180deg, #374151, #111827); }
.avatar-wolf .wolf-emoji { animation: wolfHowl 3s ease-in-out infinite; }
@keyframes wolfHowl { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-8deg) translateY(-2px)} }

/* SKULL */
.avatar-skull .avatar-inner { background: #1a1a1a; }
.avatar-skull .skull-emoji { animation: skullPulse 2s ease-in-out infinite; }
@keyframes skullPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.4) drop-shadow(0 0 6px #a855f7)} }