/* XP Bar */
#xpBarContainer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 8px;
  background: #222;
  z-index: 1000;
}
#xpBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, limegreen, gold, red);
  transition: width 0.5s ease;
}
#xpLabel {
  position: fixed;
  top: 12px; left: 12px;
  color: #fff; font-weight: bold;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: #333; color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  animation: popIn 0.5s ease;
}
.toast.hidden { display: none; }
@keyframes popIn { from {transform: scale(0.8); opacity:0;} to {transform: scale(1); opacity:1;} }

/* Avatars */
.avatar {
  width: 64px; height: 64px;
  background: url('pixel-avatar.png') center/cover no-repeat;
  border: 2px solid #3aa856;
  border-radius: 8px;
  transition: transform 0.3s;
}
.avatar:hover { transform: rotate(10deg) scale(1.2); }