<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Genshin Impact Team Randomizer</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

    :root {
      --primary-color: #f5e7d3;
      --secondary-color: #6a5c55;
      --accent-color: #c7b299;
      --text-color: #2c2c2c;
      --background-color: #f9f5f0;
      --dendro-color: #66cc33;
      --pyro-color: #fa0505;
      --cryo-color: #99ccff;
      --hydro-color: #3366cc;
      --geo-color: #ffcc00;
      --electro-color: #9966cc;
      --anemo-color: #66ccaa;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: var(--background-color);
      color: var(--text-color);
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      flex: 1;
    }

    h1 {
      text-align: center;
      color: var(--secondary-color);
      font-size: 2.5rem;
      margin-bottom: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    h2 {
      text-align: center;
      color: var(--secondary-color);
      font-size: 1.5rem;
      margin-bottom: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .nav-link {
      text-decoration: none;
      color: var(--text-color);
    }

    .character-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .character {
      background-color: var(--primary-color);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .character:hover {
      transform: translateY(-5px);
    }

    .character-portrait {
      width: 100%;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .character img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .character-name {
      padding: 0.5rem;
      text-align: center;
      font-size: 0.9rem;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .team {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .team-member {
      background-color: var(--accent-color);
      border-radius: 10px;
      overflow: hidden;
      width: 150px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .team-member-portrait {
      width: 100%;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .team-member img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .team-member p {
      padding: 0.5rem;
      text-align: center;
      font-size: 0.9rem;
      background-color: rgba(255, 255, 255, 0.8);
      width: 100%;
    }

    button {
      display: inline-block;
      margin: 0 0.5rem 1rem 0;
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
      font-weight: bold;
      color: white;
      background-color: var(--secondary-color);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #8a7a72;
    }

    .button-container {
      text-align: center;
      margin-bottom: 2rem;
    }

    .new {
      position: absolute;
      top: 5px;
      left: 5px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #ff0055;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 0.8rem;
      font-weight: bold;
    }

    .rarity {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #FFD700;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 0.8rem;
      font-weight: bold;
    }

    .region {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #FFFFFF;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 0.8rem;
    }

    select {
      padding: 0.8rem;
      font-size: 1rem;
      border: 1px solid var(--secondary-color);
      border-radius: 5px;
      background-color: white;
      color: var(--text-color);
      cursor: pointer;
      margin-right: 0.5rem;
    }

    select:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--accent-color);
    }

    .character.selected {
      outline: 3px solid var(--accent-color);
    }

    @media (max-width: 768px) {
      .character-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      }

      .team {
        flex-wrap: wrap;
      }

      .team-member {
        width: calc(50% - 0.5rem);
      }

      .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      button,
      select {
        margin-bottom: 0.5rem;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Genshin Impact Team Randomizer - 6.5 Nodkrai</h1>
    <h2>- Lunar Reactions Teams ! Enjoy ! -</h2>
    <div class="team" id="team">
      <div class="team-member" id="member1"></div>
      <div class="team-member" id="member2"></div>
      <div class="team-member" id="member3"></div>
      <div class="team-member" id="member4"></div>
    </div>
    <div class="button-container">
      <button onclick="clearTeam()">Clear Team</button>
      <button onclick="generateRandomTeam()">Random Team</button>
      <button onclick="generateFourStarTeam()">4★ Random Team</button>
      <button onclick="generateOptimizedTeam()">Optimized Team</button>
      <button onclick="generateOptimized4sTeam()">4★ Optimized Team</button>
      <div>
        <div class="button-container">
          <button onclick="generateReactionTeam('melt')">Melt Team</button>
          <button onclick="generateReactionTeam('vaporize')">Vaporize Team</button>
          <button onclick="generateReactionTeam('overload')">Overload Team</button>
          <button onclick="generateReactionTeam('aggravate')">Aggravate Team</button>
          <button onclick="generateReactionTeam('bloom')">Bloom Team</button>
          <button onclick="generateReactionTeam('hyperbloom')">Hyperbloom Team</button>
          <div>
            <div class="button-container">
              <button onclick="generateLunarTeam('lunar_charge')">Lunar Charge Team</button>
              <button onclick="generateLunarTeam('lunar_bloom')">Lunar Bloom Team</button>
              <button onclick="generateLunarTeam('lunar_crystallize')">Lunar Crystallize Team</button>
              <div>
                <div class="button-container">
                  <select id="elementFilter" onchange="filterCharacters()">
                    <option value="">Filter by Element</option>
                    <option value="anemo">anemo</option>
                    <option value="cryo">cryo</option>
                    <option value="dendro">dendro</option>
                    <option value="electro">electro</option>
                    <option value="geo">geo</option>
                    <option value="hydro">hydro</option>
                    <option value="pyro">pyro</option>
                  </select>
                  <select id="rarityFilter" onchange="filterCharacters()">
                    <option value="">Filter by Rarity</option>
                    <option value="4">4★</option>
                    <option value="5">5★</option>
                  </select>
                  <select id="regionFilter" onchange="filterCharacters()">
                    <option value="">Filter by Region</option>
                    <option value="Mondstadt">Mondstadt</option>
                    <option value="Liyue">Liyue</option>
                    <option value="Inazuma">Inazuma</option>
                    <option value="Sumeru">Sumeru</option>
                    <option value="Fontaine">Fontaine</option>
                    <option value="Natlan">Natlan</option>
                    <option value="Nodkrai">Nodkrai</option>
                    <option value="Snezhnaya">Snezhnaya</option>
                    <option value="Other">Other</option>
                  </select>
                </div>
                <div class="character-grid" id="characterGrid"></div>
                <h2>Designed by <a class="nav-link" href="https://www.marasco.fr/" target="_blank">GhurdylN1</a></h2>
              </div>

              <script>
                const characters = [
                  { name: "Aino", element: "hydro", rarity: 4, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Albedo", element: "geo", rarity: 5, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Alhaitham", element: "dendro", rarity: 5, region: "Sumeru", role: "mdps", isLunar: false },
                  { name: "Aloy", element: "cryo", rarity: 5, region: "Other", role: "subdps", isLunar: false },
                  { name: "Amber", element: "pyro", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Arlecchino", element: "pyro", rarity: 5, region: "Snezhnaya", role: "mdps", isLunar: false },
                  { name: "Ayaka", element: "cryo", rarity: 5, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Ayato", element: "hydro", rarity: 5, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Baizhu", element: "dendro", rarity: 5, region: "Liyue", role: "support", isLunar: false },
                  { name: "Barbara", element: "hydro", rarity: 4, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Beidou", element: "electro", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Bennett", element: "pyro", rarity: 4, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Candace", element: "hydro", rarity: 4, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Charlotte", element: "cryo", rarity: 4, region: "Fontaine", role: "support", isLunar: false },
                  { name: "Chasca", element: "anemo", rarity: 5, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Chevreuse", element: "pyro", rarity: 4, region: "Fontaine", role: "support", isLunar: false },
                  { name: "Chiori", element: "geo", rarity: 5, region: "Inazuma", role: "subdps", isLunar: false },
                  { name: "Chongyun", element: "cryo", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Clorinde", element: "electro", rarity: 5, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Collei", element: "dendro", rarity: 4, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Columbina", element: "hydro", rarity: 5, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Cyno", element: "electro", rarity: 5, region: "Sumeru", role: "mdps", isLunar: false },
                  { name: "Dahlia", element: "hydro", rarity: 4, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Dehya", element: "pyro", rarity: 5, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Diluc", element: "pyro", rarity: 5, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Diona", element: "cryo", rarity: 4, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Dori", element: "electro", rarity: 4, region: "Sumeru", role: "support", isLunar: false },
                  { name: "Durin", element: "pyro", rarity: 5, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Emilie", element: "dendro", rarity: 5, region: "Fontaine", role: "subdps", isLunar: false },
                  { name: "Eula", element: "cryo", rarity: 5, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Faruzan", element: "anemo", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Fischl", element: "electro", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Flins", element: "electro", rarity: 5, region: "Nodkrai", role: "mdps", isLunar: true },
                  { name: "Freminet", element: "cryo", rarity: 4, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Furina", element: "hydro", rarity: 5, region: "Fontaine", role: "subdps", isLunar: false },
                  { name: "Gaming", element: "pyro", rarity: 4, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Ganyu", element: "cryo", rarity: 5, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Gorou", element: "geo", rarity: 4, region: "Inazuma", role: "subdps", isLunar: false },
                  { name: "Heizou", element: "anemo", rarity: 4, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Hu Tao", element: "pyro", rarity: 5, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Iansan", element: "electro", rarity: 4, region: "Natlan", role: "subdps", isLunar: false },
                  { name: "Ifa", element: "anemo", rarity: 4, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Illuga", element: "geo", rarity: 4, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Ineffa", element: "electro", rarity: 5, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Itto", element: "geo", rarity: 5, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Jahoda", element: "anemo", rarity: 4, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Jean", element: "anemo", rarity: 5, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Kachina", element: "geo", rarity: 4, region: "Natlan", role: "subdps", isLunar: false },
                  { name: "Kazuha", element: "anemo", rarity: 5, region: "Inazuma", role: "subdps", isLunar: false },
                  { name: "Kaeya", element: "cryo", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Kaveh", element: "dendro", rarity: 4, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Keqing", element: "electro", rarity: 5, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Kinich", element: "dendro", rarity: 5, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Kirara", element: "dendro", rarity: 4, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Klee", element: "pyro", rarity: 5, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Kokomi", element: "hydro", rarity: 5, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Kuki Shinobu", element: "electro", rarity: 4, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Lan Yan", element: "anemo", rarity: 4, region: "Liyue", role: "support", isLunar: false },
                  { name: "Lauma", element: "dendro", rarity: 5, region: "Nodkrai", role: "subdps", isLunar: true },
                  { name: "Layla", element: "cryo", rarity: 4, region: "Sumeru", role: "support", isLunar: false },
                  { name: "Linnea", element: "geo", rarity: 5, region: "Nodkrai", role: "support", isLunar: true },
                  { name: "Lisa", element: "electro", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Lynette", element: "anemo", rarity: 4, region: "Fontaine", role: "subdps", isLunar: false },
                  { name: "Lyney", element: "pyro", rarity: 5, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Mavuika", element: "pyro", rarity: 5, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Mika", element: "cryo", rarity: 4, region: "Mondstadt", role: "support", isLunar: false },
                  { name: "Mona", element: "hydro", rarity: 5, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Mualani", element: "hydro", rarity: 5, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Nahida", element: "dendro", rarity: 5, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Navia", element: "geo", rarity: 5, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Nefer", element: "dendro", rarity: 5, region: "Nodkrai", role: "mdps", isLunar: true },
                  { name: "Neuvillette", element: "hydro", rarity: 5, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Nilou", element: "hydro", rarity: 5, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Ningguang", element: "geo", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Noelle", element: "geo", rarity: 4, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Ororon", element: "electro", rarity: 4, region: "Natlan", role: "subdps", isLunar: false },
                  { name: "Qiqi", element: "cryo", rarity: 5, region: "Liyue", role: "support", isLunar: false },
                  { name: "Raiden", element: "electro", rarity: 5, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Razor", element: "electro", rarity: 4, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Rosaria", element: "cryo", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Sara", element: "electro", rarity: 4, region: "Inazuma", role: "subdps", isLunar: false },
                  { name: "Sayu", element: "anemo", rarity: 4, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Sethos", element: "electro", rarity: 4, region: "Sumeru", role: "subdps", isLunar: false },
                  { name: "Shenhe", element: "cryo", rarity: 5, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Sigewinne", element: "hydro", rarity: 5, region: "Fontaine", role: "support", isLunar: false },
                  { name: "Skirk", element: "cryo", rarity: 5, region: "Other", role: "mdps", isLunar: false },
                  { name: "Sucrose", element: "anemo", rarity: 4, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Tartaglia", element: "hydro", rarity: 5, region: "Snezhnaya", role: "mdps", isLunar: false },
                  { name: "Thoma", element: "pyro", rarity: 4, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Tighnari", element: "dendro", rarity: 5, region: "Sumeru", role: "mdps", isLunar: false },
                  { name: "Traveler", element: "Various", rarity: 5, region: "Other", role: "subdps", isLunar: false },
                  { name: "Varesa", element: "electro", rarity: 5, region: "Natlan", role: "mdps", isLunar: false },
                  { name: "Varka", element: "anemo", rarity: 5, region: "Mondstadt", role: "mdps", isLunar: false },
                  { name: "Venti", element: "anemo", rarity: 5, region: "Mondstadt", role: "subdps", isLunar: false },
                  { name: "Wanderer", element: "anemo", rarity: 5, region: "Sumeru", role: "mdps", isLunar: false },
                  { name: "Wriothesley", element: "cryo", rarity: 5, region: "Fontaine", role: "mdps", isLunar: false },
                  { name: "Xiangling", element: "pyro", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Xianyun", element: "anemo", rarity: 5, region: "Liyue", role: "support", isLunar: false },
                  { name: "Xiao", element: "anemo", rarity: 5, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Xilonen", element: "geo", rarity: 5, region: "Natlan", role: "support", isLunar: false },
                  { name: "Xingqiu", element: "hydro", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Xinyan", element: "pyro", rarity: 4, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Yae Miko", element: "electro", rarity: 5, region: "Inazuma", role: "subdps", isLunar: false },
                  { name: "Yanfei", element: "pyro", rarity: 4, region: "Liyue", role: "mdps", isLunar: false },
                  { name: "Yaoyao", element: "dendro", rarity: 4, region: "Sumeru", role: "support", isLunar: false },
                  { name: "Yelan", element: "hydro", rarity: 5, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Yoimiya", element: "pyro", rarity: 5, region: "Inazuma", role: "mdps", isLunar: false },
                  { name: "Mizuki", element: "anemo", rarity: 5, region: "Inazuma", role: "support", isLunar: false },
                  { name: "Yun Jin", element: "geo", rarity: 4, region: "Liyue", role: "subdps", isLunar: false },
                  { name: "Zhongli", element: "geo", rarity: 5, region: "Liyue", role: "support", isLunar: false },
                  { name: "Zibai", element: "geo", rarity: 5, region: "Liyue", role: "mdps", isLunar: true }
                ];

                const characterGrid = document.getElementById('characterGrid');
                const team = document.getElementById('team');
                let selectedCharacters = [];

                function getCharacterImageUrl(character) {
                  const specialCases = {
                    "Kuki Shinobu": "avatars_img/Kuki_Shinobu_Avatar.webp",
                    "Traveler": "avatars_img/Travelers.png",
                    "Ayaka": "avatars_img/Kamisato_Ayaka_Avatar.webp",
                    "Ayato": "avatars_img/Kamisato_Ayato_Avatar.webp",
                    "Heizou": "avatars_img/Shikanoin_Heizou_Avatar.webp",
                    "Itto": "avatars_img/Arataki_Itto_Avatar.webp",
                    "Kazuha": "avatars_img/Kaedehara_Kazuha_Avatar.webp",
                    "Kokomi": "avatars_img/Sangonomiya_Kokomi_Avatar.webp",
                    "Raiden": "avatars_img/Raiden_Shogun_Avatar.webp",
                    "Sara": "avatars_img/Kujou_Sara_Avatar.webp",
                    "Mizuki": "avatars_img/Yumemizuki_Mizuki_Avatar.webp"
                  };

                  if (character.name in specialCases) {
                    return specialCases[character.name];
                  }

                  return `avatars_img/${character.name.replace(/\s+/g, '_')}_Avatar.webp`;
                }

                function getElementColor(element) {
                  const elementColors = {
                    dendro: 'var(--dendro-color)',
                    pyro: 'var(--pyro-color)',
                    cryo: 'var(--cryo-color)',
                    hydro: 'var(--hydro-color)',
                    geo: 'var(--geo-color)',
                    electro: 'var(--electro-color)',
                    anemo: 'var(--anemo-color)',
                    Various: 'var(--background-color)'
                  };
                  return elementColors[element] || 'var(--background-color)';
                }

                function createCharacterElement(character) {
                  const div = document.createElement('div');
                  div.className = 'character';
                  const imageUrl = getCharacterImageUrl(character);
                  const backgroundColor = getElementColor(character.element);
                  div.innerHTML = `
        <div class="character-portrait" style="background-color: ${backgroundColor};">
          <img alt="${character.name} - ${character.element} character artwork" src="${imageUrl}" width="120" height="160">
          <div class="rarity">${character.rarity}★</div>
          <div class="region">${character.region}</div>
        </div>
        <div class="character-name">${character.name}</div>
      `;
                  div.addEventListener('click', () => toggleCharacter(character, div));
                  return div;
                }

                function toggleCharacter(character, div) {
                  const index = selectedCharacters.findIndex(c => c.name === character.name);
                  if (index !== -1) {
                    selectedCharacters.splice(index, 1);
                    div.classList.remove('selected');
                  } else if (selectedCharacters.length < 4) {
                    selectedCharacters.push(character);
                    div.classList.add('selected');
                  }
                  updateTeamDisplay();
                }

                function updateTeamDisplay() {
                  for (let i = 0; i < 4; i++) {
                    const memberDiv = document.getElementById(`member${i + 1}`);
                    if (selectedCharacters[i]) {
                      const character = selectedCharacters[i];
                      const imageUrl = getCharacterImageUrl(character);
                      const backgroundColor = getElementColor(character.element);
                      memberDiv.innerHTML = `
            <div class="team-member-portrait" style="background-color: ${backgroundColor};">
              <img alt="${character.name} - ${character.element} character artwork" src="${imageUrl}" width="120" height="160">
              <div class="rarity">${character.rarity}★</div>
              <div class="region">${character.region}</div>
            </div>
            <p>${character.name}</p>
          `;
                    } else {
                      memberDiv.innerHTML = '<p>★</p>';
                    }
                  }
                }

                function generateOptimizedTeam() {
                  selectedCharacters = [];

                  const mdpsList = characters.filter(c => c.role === "mdps");
                  const supportList = characters.filter(c => c.role === "support");
                  const subdpsList = characters.filter(c => c.role === "subdps");

                  function getRandom(list) {
                    return list[Math.floor(Math.random() * list.length)];
                  }

                  // Sécurité pour éviter les erreurs
                  if (!mdpsList.length || !supportList.length || subdpsList.length < 2) {
                    console.error("Pas assez de personnages pour générer une équipe !");
                    return;
                  }

                  const mdps = getRandom(mdpsList);
                  const support = getRandom(supportList);

                  let subdps1, subdps2;

                  do {
                    subdps1 = getRandom(subdpsList);
                  } while (subdps1 === mdps || subdps1 === support);

                  do {
                    subdps2 = getRandom(subdpsList);
                  } while (
                    subdps2 === mdps ||
                    subdps2 === support ||
                    subdps2 === subdps1
                  );

                  selectedCharacters.push(subdps1, mdps, subdps2, support);

                  updateTeamDisplay();
                }

                function generateRandomTeam() {
                  selectedCharacters = [];
                  while (selectedCharacters.length < 4) {
                    const randomCharacter = characters[Math.floor(Math.random() * characters.length)];
                    if (!selectedCharacters.includes(randomCharacter)) {
                      selectedCharacters.push(randomCharacter);
                    }
                  }
                  updateTeamDisplay();
                }

                function generateOptimized4sTeam() {
                  selectedCharacters = [];

                  const fourStarCharacters = characters.filter(c => c.rarity === 4);

                  const mdpsList = fourStarCharacters.filter(c => c.role === "mdps");
                  const supportList = fourStarCharacters.filter(c => c.role === "support");
                  const subdpsList = fourStarCharacters.filter(c => c.role === "subdps");

                  function getRandom(list) {
                    return list[Math.floor(Math.random() * list.length)];
                  }

                  const mdps = getRandom(mdpsList);
                  const support = getRandom(supportList);

                  // Pour éviter les doublons
                  let subdps1, subdps2;

                  do {
                    subdps1 = getRandom(subdpsList);
                  } while (subdps1 === mdps || subdps1 === support);

                  do {
                    subdps2 = getRandom(subdpsList);
                  } while (
                    subdps2 === mdps ||
                    subdps2 === support ||
                    subdps2 === subdps1
                  );

                  selectedCharacters.push(subdps1, mdps, subdps2, support);

                  updateTeamDisplay();
                }

                function generateFourStarTeam() {
                  selectedCharacters = [];
                  const fourStarCharacters = characters.filter(character => character.rarity === 4);
                  while (selectedCharacters.length < 4) {
                    const randomCharacter = fourStarCharacters[Math.floor(Math.random() * fourStarCharacters.length)];
                    if (!selectedCharacters.includes(randomCharacter)) {
                      selectedCharacters.push(randomCharacter);
                    }
                  }
                  updateTeamDisplay();
                }

                function clearTeam() {
                  selectedCharacters = [];
                  updateTeamDisplay();
                  updateCharacterGrid(characters);
                }

                const reactions = {
                  melt: ["pyro", "cryo"],
                  vaporize: ["pyro", "hydro"],
                  overload: ["pyro", "electro"],
                  aggravate: ["electro", "dendro"],
                  bloom: ["hydro", "dendro"],
                  hyperbloom: ["hydro", "dendro", "electro"]
                };


                function generateReactionTeam(reactionName) {
                  selectedCharacters = [];

                  const elements = reactions[reactionName];
                  if (!elements) {
                    console.error("Réaction inconnue");
                    return;
                  }

                  const filtered = characters.filter(c => elements.includes(c.element));

                  const mdpsList = filtered.filter(c => c.role === "mdps");
                  const supportList = filtered.filter(c => c.role === "support");
                  const subdpsList = filtered.filter(c => c.role === "subdps");

                  function getRandom(list) {
                    return list[Math.floor(Math.random() * list.length)];
                  }

                  if (!mdpsList.length || !supportList.length || subdpsList.length < 2) {
                    console.error("Pas assez de personnages pour cette réaction !");
                    return;
                  }

                  // Pour Hyperbloom
                  if (reactionName === "hyperbloom") {
                    const electroList = filtered.filter(c => c.element === "electro");
                    const dendroList = filtered.filter(c => c.element === "dendro");
                    const hydroList = filtered.filter(c => c.element === "hydro");

                    if (!electroList.length || !dendroList.length || !hydroList.length) {
                      console.error("Il faut au moins 1 Electro, 1 Dendro et 1 Hydro !");
                      return;
                    }

                    // On force 3 éléments différents
                    const electro = getRandom(electroList);
                    const dendro = getRandom(dendroList);
                    const hydro = getRandom(hydroList);

                    // Pour le 4e slot on complète intelligemment
                    const remainingPool = filtered.filter(
                      c => c !== electro && c !== dendro && c !== hydro
                    );

                    if (!remainingPool.length) {
                      console.error("Pas assez de personnages pour compléter l'équipe !");
                      return;
                    }

                    const extra = getRandom(remainingPool);

                    selectedCharacters.push(electro, dendro, hydro, extra);

                    selectedCharacters.sort(() => Math.random() - 0.5);

                    updateTeamDisplay();
                    return;
                  }

                  // Autres réactions (melt, vape, etc.)
                  const mdps = getRandom(mdpsList);

                  const otherElement = elements.find(e => e !== mdps.element);

                  const supportCandidates = supportList.filter(c => c.element === otherElement);
                  const subdpsCandidates = subdpsList.filter(c => c.element === otherElement);

                  const finalSupportList = supportCandidates.length ? supportCandidates : supportList;
                  const finalSubdpsList = subdpsCandidates.length >= 2 ? subdpsCandidates : subdpsList;

                  const support = getRandom(finalSupportList);

                  let subdps1, subdps2;

                  do {
                    subdps1 = getRandom(finalSubdpsList);
                  } while (subdps1 === mdps || subdps1 === support);

                  do {
                    subdps2 = getRandom(finalSubdpsList);
                  } while (
                    subdps2 === mdps ||
                    subdps2 === support ||
                    subdps2 === subdps1
                  );

                  selectedCharacters.push(mdps, support, subdps1, subdps2);

                  selectedCharacters.sort(() => Math.random() - 0.5);

                  updateTeamDisplay();
                }

                const lunarReactions = {
                  lunar_bloom: ["hydro", "dendro"],
                  lunar_charge: ["hydro", "electro"],
                  lunar_crystallize: ["hydro", "geo"]
                };

                function generateLunarTeam(reactionName) {
                  selectedCharacters = [];

                  const elements = lunarReactions[reactionName];
                  if (!elements) {
                    console.error("Réaction lunaire inconnue");
                    return;
                  }

                  // 🔹 Pools globaux filtrés par éléments
                  const pool = characters.filter(c => elements.includes(c.element));

                  const mdpsList = pool.filter(c => c.role === "mdps");
                  const supportList = pool.filter(c => c.role === "support");
                  const subdpsList = pool.filter(c => c.role === "subdps");

                  function getRandom(list) {
                    return list[Math.floor(Math.random() * list.length)];
                  }

                  // 🔒 Sécurité rôles
                  if (!mdpsList.length || !supportList.length || subdpsList.length < 2) {
                    console.error("Pas assez de personnages pour respecter les rôles !");
                    return;
                  }

                  // 🔒 Sécurité éléments (au moins 1 perso par élément)
                  for (let el of elements) {
                    if (!pool.some(c => c.element === el)) {
                      console.error(`Aucun personnage pour l'élément ${el}`);
                      return;
                    }
                  }

                  // 🎯 1. Sélection MDPS
                  const mdps = getRandom(mdpsList);

                  // 🎯 2. Sélection SUPPORT (éviter doublon)
                  let support;
                  do {
                    support = getRandom(supportList);
                  } while (support === mdps);

                  // 🎯 3. Sélection SUBDPS
                  let subdps1, subdps2;

                  do {
                    subdps1 = getRandom(subdpsList);
                  } while (subdps1 === mdps || subdps1 === support);

                  do {
                    subdps2 = getRandom(subdpsList);
                  } while (
                    subdps2 === mdps ||
                    subdps2 === support ||
                    subdps2 === subdps1
                  );

                  selectedCharacters.push(subdps1, mdps, subdps2, support);

                  // 🔥 4. CONTRAINTE LUNAR (min 2)
                  const lunarCount = selectedCharacters.filter(c => c.isLunar).length;

                  if (lunarCount < 2) {
                    const lunarPool = pool.filter(c => c.isLunar);

                    if (lunarPool.length < 2) {
                      console.error("Pas assez de personnages Lunar !");
                      return;
                    }

                    // Remplacer des persos non Lunar
                    for (let i = 0; i < selectedCharacters.length &&
                      selectedCharacters.filter(c => c.isLunar).length < 2; i++) {

                      if (!selectedCharacters[i].isLunar) {
                        let replacement;
                        do {
                          replacement = getRandom(lunarPool);
                        } while (selectedCharacters.includes(replacement));

                        selectedCharacters[i] = replacement;
                      }
                    }
                  }

                  // 🔥 5. CONTRAINTE ÉLÉMENTS (au moins 1 de chaque)
                  const teamElements = selectedCharacters.map(c => c.element);

                  for (let el of elements) {
                    if (!teamElements.includes(el)) {
                      // remplacer un perso pour injecter cet élément
                      const candidates = pool.filter(
                        c => c.element === el && !selectedCharacters.includes(c)
                      );

                      if (!candidates.length) {
                        console.error(`Impossible d'ajouter l'élément ${el}`);
                        return;
                      }

                      const replacement = getRandom(candidates);

                      // remplace un perso "moins utile" (priorité: subdps)
                      const indexToReplace = selectedCharacters.findIndex(
                        c => c.role === "subdps"
                      );

                      if (indexToReplace !== -1) {
                        selectedCharacters[indexToReplace] = replacement;
                      }
                    }
                  }

                  updateTeamDisplay();
                }

                function filterCharacters() {
                  const elementFilter = document.getElementById('elementFilter').value;
                  const rarityFilter = document.getElementById('rarityFilter').value;
                  const regionFilter = document.getElementById('regionFilter').value;

                  const filteredCharacters = characters.filter(character => {
                    return (!elementFilter || character.element === elementFilter) &&
                      (!rarityFilter || character.rarity === parseInt(rarityFilter)) &&
                      (!regionFilter || character.region === regionFilter);
                  });

                  updateCharacterGrid(filteredCharacters);
                }

                function updateCharacterGrid(charactersToDisplay) {
                  characterGrid.innerHTML = '';
                  charactersToDisplay.forEach(character => {
                    characterGrid.appendChild(createCharacterElement(character));
                  });
                }

                characters.forEach(character => {
                  characterGrid.appendChild(createCharacterElement(character));
                });

                updateTeamDisplay();
              </script>
</body>

</html>