.elementor-1943 .elementor-element.elementor-element-9431b7b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1943 .elementor-element.elementor-element-4128ee7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-13a50f8 *//* === FFT Genesis Styling === */
#fft-player-hub {
  background: radial-gradient(circle at top, #003842 0%, #001F24 80%);
  animation: fadeIn 1s ease-in-out both;
}
#fft-avatars .avatar-card img:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(218,165,32,.8);
}
button:hover {
  opacity: 0.9;
  box-shadow: 0 0 16px rgba(218,165,32,.5);
  transform: translateY(-2px);
  transition: all .3s ease;
}
@keyframes fadeIn {
  from {opacity:0;transform:translateY(10px);}
  to {opacity:1;transform:translateY(0);}
}
#fft-avatars img {
  opacity: 0;
  transform: scale(0.95);
  animation: avatarFade .6s ease forwards;
}
#fft-avatars img:nth-child(1){animation-delay:.1s;}
#fft-avatars img:nth-child(2){animation-delay:.2s;}
#fft-avatars img:nth-child(3){animation-delay:.3s;}
#fft-avatars img:nth-child(4){animation-delay:.4s;}
#fft-avatars img:nth-child(5){animation-delay:.5s;}
#fft-avatars img:nth-child(6){animation-delay:.6s;}
#fft-avatars img:nth-child(7){animation-delay:.7s;}
#fft-avatars img:nth-child(8){animation-delay:.8s;}
@keyframes avatarFade{
  to{opacity:1;transform:scale(1);}
}
<script>
// Highlight selected avatar
document.querySelectorAll("#fft-avatars .avatar-card").forEach(card => {
  card.addEventListener("click", () => {
    document.querySelectorAll("#fft-avatars .avatar-card").forEach(c => {
      c.style.outline = "none";
    });
    card.style.outline = "3px solid #DAA520";
    card.style.outlineOffset = "4px";
  });
});

// Allow user-uploaded avatar (mockup style)
const uploadBtn = document.createElement("div");
uploadBtn.innerHTML = `
  <div style="text-align:center;margin-top:30px;">
    <label for="fft-upload" style="cursor:pointer;color:#DAA520;text-decoration:underline;font-family:'Montserrat';font-weight:500;">
      or Upload Your Own Avatar
    </label>
    <input id="fft-upload" type="file" accept="image/*" style="display:none;">
  </div>
`;
document.querySelector("#fft-player-hub").appendChild(uploadBtn);

document.getElementById("fft-upload").addEventListener("change", e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(event) {
    const imgUrl = event.target.result;
    const newCard = document.createElement("div");
    newCard.classList.add("avatar-card");
    newCard.innerHTML = `<img src="${imgUrl}" alt="Custom Avatar" style="width:100%;border-radius:16px;box-shadow:0 0 12px rgba(0,0,0,.4);">`;
    document.querySelector("#fft-avatars").prepend(newCard);
    alert("Custom avatar added!");
  };
  reader.readAsDataURL(file);
});
</script>
#fft-player-hub label {
  color: #EAEAEA !important;
  font-weight: 500;
}
#fft-player-hub input,
#fft-player-hub select {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
#fft-player-hub input::placeholder {
  color: #ccc !important;
}/* End custom CSS */