<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IdleClans Raid Planner (Gemstone Priority + Name Click)</title>

  <style>
    /*-------------------------------------------
      1) Root Variables for easy theme switching
    -------------------------------------------*/
    :root {
      --bg-color: #f5f5f5;
      --text-color: #2c3e50;
      --sidebar-bg: #2c3e50;
      --sidebar-text: #ecf0f1;
      --sidebar-hover: #34495e;
      --sidebar-button: #c0392b;
      --sidebar-button-hover: #a93226;
      --content-bg: #ffffff;
      --content-heading: #2c3e50;
      --input-border: #ccc;
      --input-bg: #fff;
      --table-header-bg: #f0f0f0;
      --table-border: #eee;
      --info-border: #3498db;
      --highlight-bg: #fffbdd;
      --gem-border: #ccc;
      --gem-cell-border: #ddd;
      --gem-header-bg: #f9f9f9;
      --shadow-color: rgba(0,0,0,0.1);
      --shadow-color-light: rgba(0,0,0,0.05);
    }

    /*-------------------------------------------
      2) Dark Theme overrides
         We toggle .dark-theme on the <body>
         to override variable values.
    -------------------------------------------*/
    .dark-theme {
      --bg-color: #242424;
      --text-color: #cccccc;
      --sidebar-bg: #1a1a1a;
      --sidebar-text: #eeeeee;
      --sidebar-hover: #333333;
      --sidebar-button: #bd3025;
      --sidebar-button-hover: #99251c;
      --content-bg: #2e2e2e;
      --content-heading: #ffffff;
      --input-bg: #3c3c3c;
      --table-header-bg: #3c3c3c;
      --table-border: #555555;
      --info-border: #2980b9;
      --highlight-bg: #48422c; /* A darker "highlight" style */
      --gem-border: #555555;
      --gem-cell-border: #666666;
      --gem-header-bg: #4b4b4b;
      --shadow-color: rgba(255,255,255,0.1);
      --shadow-color-light: rgba(255,255,255,0.05);
    }

    /*-------------------------------------------
      3) Global & Layout
    -------------------------------------------*/
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background 0.3s, color 0.3s;
    }

    h1, h2, h3 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 16px;
      color: var(--content-heading);
    }

    /*-------------------------------------------
      4) Sidebar
    -------------------------------------------*/
    .sidebar {
      width: 240px;
      background: var(--sidebar-bg);
      color: var(--sidebar-text);
      padding: 16px;
      box-shadow: 2px 0 8px var(--shadow-color);
      overflow-y: auto;
      height: 100vh;
    }
    .sidebar h3 {
      margin-top: 0;
      margin-bottom: 12px;
    }
    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }
    .sidebar li {
      margin-bottom: 8px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .sidebar li:hover {
      background: var(--sidebar-hover);
    }
    .sidebar button {
      background: var(--sidebar-button);
      color: #fff;
      border: none;
      padding: 6px 12px;
      cursor: pointer;
      margin-top: 10px;
      border-radius: 4px;
    }
    .sidebar button:hover {
      background: var(--sidebar-button-hover);
    }

    /*-------------------------------------------
      5) Main Content Area
    -------------------------------------------*/
    .main-container {
      flex: 1;
      padding: 20px;
      background: var(--bg-color);
    }

    /* Player input card */
    .player-inputs {
      max-width: 600px;
      margin: 0 auto 20px;
      background: var(--content-bg);
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 2px 5px var(--shadow-color);
      transition: background 0.3s;
    }
    .player-inputs label {
      font-weight: bold;
      margin-right: 6px;
    }
    .player-inputs input[type="number"],
    .player-inputs input[type="text"] {
      padding: 6px;
      font-size: 14px;
      margin-bottom: 8px;
      border: 1px solid var(--input-border);
      background: var(--input-bg);
      color: var(--text-color);
      transition: background 0.3s, color 0.3s;
    }
    .player-inputs button {
      margin-top: 8px;
      background: #2980b9;
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .player-inputs button:hover {
      background: #1f6a91;
    }

    /* Info box */
    .info-box {
      background: var(--content-bg);
      border-left: 6px solid var(--info-border);
      padding: 12px;
      margin-bottom: 16px;
      border-radius: 4px;
      box-shadow: 0 2px 4px var(--shadow-color-light);
      transition: background 0.3s, border-left-color 0.3s;
    }
    .info-box h3 {
      margin-top: 0;
    }

    /* Tables */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      background: var(--content-bg);
      transition: background 0.3s;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid var(--table-border);
    }
    th {
      background: var(--table-header-bg);
      transition: background 0.3s;
    }
    .highlight {
      background: var(--highlight-bg);
    }

    .role {
      font-weight: bold;
    }

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .locked {
      filter: grayscale(100%);
      opacity: 0.6;
    }

    .item-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    /* Gem priority table */
    .gem-priority-table {
      width: auto;
      margin: 0 auto;
      border: 1px solid var(--gem-border);
      border-radius: 4px;
      overflow: hidden;
      margin-top: 16px;
    }
    .gem-priority-table th,
    .gem-priority-table td {
      border: 1px solid var(--gem-cell-border);
      padding: 6px 10px;
      transition: border-color 0.3s;
    }
    .gem-priority-table th {
      background: var(--gem-header-bg);
    }

    /*-------------------------------------------
      6) Theme Toggle (checkbox)
    -------------------------------------------*/
    .theme-toggle {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      align-items: center;
      color: var(--sidebar-text);
      font-size: 14px;
      user-select: none;
    }
    .theme-toggle input {
      margin-right: 6px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Light/Dark Toggle -->
    <div class="theme-toggle">
      <input type="checkbox" id="themeSwitch"/>
      <label for="themeSwitch">Dark Mode</label>
    </div>

    <h3>Previously Used</h3>
    <ul id="historyList"></ul>
    <button onclick="clearAllHistory()">Clear All Saved</button>
  </div>

  <!-- Main Container -->
  <div class="main-container">
    <h1>IdleClans Raid Planner</h1>
    <div class="player-inputs" id="inputsBox">
      <div>
        <label>Your Username:</label>
        <input type="text" id="yourUsername">
      </div>
      <br/>
      <div>
        <label>How many other players?</label>
        <input type="number" id="otherCount" min="0" max="5" value="2">
        <button onclick="generateOtherFields()">Confirm</button>
      </div>
      <div id="othersContainer" style="margin-top:10px;"></div>
      <button id="fetchBtn" style="display:none;" onclick="fetchAll()">Fetch &amp; Calculate</button>
    </div>

    <div id="resultsContainer"></div>
  </div>

  <script>
  /************************************************************
   * 1) localStorage for user history
   ************************************************************/
  let userHistory = []; // store unique usernames

  function loadHistory() {
    const saved = localStorage.getItem("usernameHistory");
    if (saved) {
      try {
        userHistory = JSON.parse(saved);
        if (!Array.isArray(userHistory)) userHistory = [];
      } catch(e) {
        userHistory = [];
      }
    }

    // load myUserName from storage
    const myU = localStorage.getItem("myUserName");
    if (myU) {
      document.getElementById("yourUsername").value = myU;
    }
    updateHistoryList();
  }

  function saveHistory() {
    localStorage.setItem("usernameHistory", JSON.stringify(userHistory));
  }

  function updateHistoryList() {
    const ul = document.getElementById("historyList");
    ul.innerHTML = "";
    userHistory.forEach(name => {
      const li = document.createElement("li");
      li.textContent = name;
      li.addEventListener("click", () => onHistoryNameClick(name));
      ul.appendChild(li);
    });
  }

  function addToHistory(name) {
    name = name.trim();
    if (name && !userHistory.includes(name)) {
      userHistory.push(name);
      saveHistory();
      updateHistoryList();
    }
  }

  function clearAllHistory() {
    localStorage.removeItem("usernameHistory");
    localStorage.removeItem("myUserName");
    userHistory = [];
    document.getElementById("yourUsername").value = "";
    updateHistoryList();
  }

  /************************************************************
   * 2) On clicking a previously used name in the sidebar
   ************************************************************/
  function onHistoryNameClick(name) {
    // We want to fill the next empty "other" player slot if:
    //  - It's not already "Your Username"
    //  - It's not already in any other slot
    const you = document.getElementById("yourUsername").value.trim();
    if (you.toLowerCase() === name.toLowerCase()) return; // already me

    const oc = parseInt(document.getElementById("otherCount").value) || 0;
    for (let i = 0; i < oc; i++){
      const f = document.getElementById("other" + i);
      if (f && f.value.trim().toLowerCase() === name.toLowerCase()) {
        // already in that slot, skip
        return;
      }
    }
    // find the first empty slot
    for (let i = 0; i < oc; i++){
      const f = document.getElementById("other" + i);
      if (f && !f.value.trim()) {
        f.value = name;
        break;
      }
    }
  }

  /************************************************************
   * 3) XP => Level data
   ************************************************************/
  const levelXPData = {
    1:0,2:75,3:151,4:227,5:303,6:380,7:531,8:683,9:836,
    10:988,11:1141,12:1294,13:1447,14:1751,15:2054,16:2358,
    17:2663,18:2967,19:3272,20:3577,21:4182,22:4788,23:5393,
    24:5999,25:6606,26:7212,27:7819,28:9026,29:10233,30:11441,
    31:12648,32:13856,33:15065,34:16273,35:18682,36:21091,
    37:23500,38:25910,39:28319,40:30729,41:33140,42:37950,
    43:42761,44:47572,45:52383,46:57195,47:62006,48:66818,
    49:76431,50:86043,51:95656,52:105269,53:114882,54:124496,
    55:134109,56:153323,57:172538,58:191752,59:210967,60:230182,
    61:249397,62:268613,63:307028,64:345444,65:383861,66:422277,
    67:460694,68:499111,69:537528,70:614346,71:691163,72:767981,
    73:844800,74:921618,75:998437,76:1075256,77:1228875,78:1382495,
    79:1536114,80:1689734,81:1843355,82:1996975,83:2150596,84:2457817,
    85:2765038,86:3072260,87:3379481,88:3686703,89:3993926,90:4301148,
    91:4915571,92:5529994,93:6144417,94:6758841,95:7373264,
    96:7987688,97:8602113,98:9830937,99:11059762,100:12288587,
    101:13517412,102:14746238,103:15975063,104:17203889,105:19661516,
    106:22119142,107:24576769,108:27034396,109:29492023,110:31949651,
    111:34407278,112:39322506,113:44237735,114:49152963,115:54068192,
    116:58983421,117:63898650,118:68813880,119:78644309,120:88474739
  };

  function getLevelFromXP(xp) {
    let level = 1;
    for (const lvl in levelXPData) {
      if (xp >= levelXPData[lvl]) level = parseInt(lvl);
      else break;
    }
    return level;
  }

  /************************************************************
   * 4) Gemstones & Gear
   ************************************************************/
  const BASE_URL = "https://warscrolls.net/files/"; // or your actual URL
  const gemstoneData = [
    { name: "Refined Gemstone",     file: "refined_gemstone.png",    reqSkill: "Crafting", reqLevel: 10 },
    { name: "Great Gemstone",       file: "great_gemstone.png",      reqSkill: "Crafting", reqLevel: 25 },
    { name: "Elite Gemstone",       file: "elite_gemstone.png",      reqSkill: "Crafting", reqLevel: 40 },
    { name: "Superior Gemstone",    file: "superior_gemstone.png",   reqSkill: "Crafting", reqLevel: 50 },
    { name: "Outstanding Gemstone", file: "outstanding_gemstone.png",reqSkill: "Crafting", reqLevel: 70 },
    { name: "Godlike Gemstone",     file: "godlike_gemstone.png",    reqSkill: "Crafting", reqLevel: 85 }
  ];

  // cursed => Magic>=80, black => Arch>=40
  const gearData = [
    { name: "Cursed Robe",              file: "cursed_robe.png",            reqSkill: "Magic",   reqLevel: 80 },
    { name: "Cursed Trousers",          file: "cursed_trousers.png",        reqSkill: "Magic",   reqLevel: 80 },
    { name: "Black Leather Coat",       file: "black_leather_coat.png",     reqSkill: "Archery", reqLevel: 40 },
    { name: "Black Leather Trousers",   file: "black_leather_trousers.png", reqSkill: "Archery", reqLevel: 40 }
  ];

  /************************************************************
   * 5) Generate fields for "other" players
   ************************************************************/
  function generateOtherFields() {
    const cnt = parseInt(document.getElementById("otherCount").value) || 0;
    const box = document.getElementById("othersContainer");
    box.innerHTML = "";

    for (let i = 0; i < cnt; i++) {
      const d = document.createElement("div");
      d.innerHTML = `
        <label>Player ${i+2} Username:</label>
        <input type="text" id="other${i}" style="margin-bottom:8px;" />
        <br/>
      `;
      box.appendChild(d);
    }
    if (cnt > 0) box.innerHTML += "<br/>";
    document.getElementById("fetchBtn").style.display = (cnt >= 0) ? "inline-block" : "none";
  }

  /************************************************************
   * 6) Fetch data from IdleClans for each user
   ************************************************************/
  async function fetchAll() {
    const yourU = document.getElementById("yourUsername").value.trim();
    if (!yourU) {
      alert("Please enter your username.");
      return;
    }

    localStorage.setItem("myUserName", yourU);

    const oc = parseInt(document.getElementById("otherCount").value) || 0;
    const total = 1 + oc;
    if (total > 6) {
      alert("Max 6 players.");
      return;
    }

    const players = [];
    try {
      const youData = await fetchOne(yourU);
      players.push({ username: yourU, skillLevels: youData });
      addToHistory(yourU);

      for (let i = 0; i < oc; i++) {
        const nm = document.getElementById("other" + i).value.trim();
        if (!nm) {
          alert("Missing username for player " + (i + 2));
          return;
        }
        const dataObj = await fetchOne(nm);
        players.push({ username: nm, skillLevels: dataObj });
        addToHistory(nm);
      }
      assignRolesAndDisplay(players, yourU);

    } catch (err) {
      alert("Error fetching data: " + err.message);
      console.error(err);
    }
  }

  async function fetchOne(name) {
    const url = `https://query.idleclans.com/api/Player/profile/simple/${encodeURIComponent(name)}`;
    const resp = await fetch(url);
    if (!resp.ok) {
      if (resp.status === 404) {
        throw new Error(`User "${name}" not found (404).`);
      } else {
        throw new Error(`HTTP Error: ${resp.status}`);
      }
    }
    const js = await resp.json();
    const xp = JSON.parse(js.skillExperiences || "{}");
    return {
      Attack: getLevelFromXP(xp["Rigour"] || 0),
      Strength: getLevelFromXP(xp["Strength"] || 0),
      Defence: getLevelFromXP(xp["Defence"] || 0),
      Magic: getLevelFromXP(xp["Magic"] || 0),
      Archery: getLevelFromXP(xp["Archery"] || 0),
      Health: getLevelFromXP(xp["Health"] || 0),
      Fishing: getLevelFromXP(xp["Fishing"] || 0),
      Cooking: getLevelFromXP(xp["Cooking"] || 0),
      Plundering: getLevelFromXP(xp["Plundering"] || 0),
      Crafting: getLevelFromXP(xp["Crafting"] || 0)
    };
  }

  /************************************************************
   * 7) Assign roles + display
   ************************************************************/
  function assignRolesAndDisplay(players, yourName) {
    const count = players.length;

    // (A) Support roles
    let wPlund = 1, wFish = 1, wCook = 0;
    if (count === 3) { wPlund = 1; wFish = 1; wCook = 1; }
    else if (count === 4) { wPlund = 2; wFish = 1; wCook = 1; }
    else if (count === 5) { wPlund = 2; wFish = 2; wCook = 1; }
    else if (count === 6) { wPlund = 3; wFish = 2; wCook = 1; }

    let unassigned = [...players];
    unassigned.forEach(p => p.supportRole = "");

    // plund
    unassigned.sort((a, b) => b.skillLevels.Plundering - a.skillLevels.Plundering);
    const plArr = unassigned.slice(0, wPlund);
    plArr.forEach(u => u.supportRole = "Plundering");
    unassigned = unassigned.slice(wPlund);

    if (count === 2) {
      // leftover => fish+Cook
      if (unassigned[0]) unassigned[0].supportRole = "Fish+Cook";
    } else {
      unassigned.sort((a, b) => b.skillLevels.Fishing - a.skillLevels.Fishing);
      const fi = unassigned.slice(0, wFish);
      fi.forEach(x => x.supportRole = "Fishing");
      unassigned = unassigned.slice(wFish);

      unassigned.sort((a, b) => b.skillLevels.Cooking - a.skillLevels.Cooking);
      const co = unassigned.slice(0, wCook);
      co.forEach(x => x.supportRole = "Cooking");
      unassigned = unassigned.slice(wCook);
    }

    // (B) Combat
    let roleSlots = (count <= 2) ? 1 : (count <= 4 ? 2 : 3);
    let remainArch = roleSlots, remainMelee = roleSlots, remainMagic = roleSlots;
    players.forEach(p => p.combatRole = "");

    // Archery first
    players.sort((a, b) => b.skillLevels.Archery - a.skillLevels.Archery);
    for (let i = 0; i < players.length && remainArch > 0; i++) {
      if (!players[i].combatRole) {
        players[i].combatRole = "Archery";
        remainArch--;
      }
    }

    // Others => melee or magic
    const bigGap = 20;
    players.forEach(p => {
      if (!p.combatRole) {
        const s = p.skillLevels;
        const meleeScore = s.Attack + s.Strength + s.Defence;
        const magicScore = s.Magic;
        if (magicScore - meleeScore >= bigGap && remainMagic > 0) {
          p.combatRole = "Magic";
          remainMagic--;
        } else if (remainMelee > 0) {
          p.combatRole = "Melee";
          remainMelee--;
        } else if (remainMagic > 0) {
          p.combatRole = "Magic";
          remainMagic--;
        } else {
          p.combatRole = "Melee";
        }
      }
    });

    displayResults(players, yourName);
  }

  /************************************************************
   * 8) Display
   ************************************************************/
  function displayResults(players, yourName) {
    const container = document.getElementById("resultsContainer");
    container.innerHTML = "";

    const count = players.length;
    let itemCount = (count <= 2) ? 1 : ((count <= 4) ? 2 : 3);
    let bosses = (count <= 2) ? 1 : ((count <= 4) ? 2 : 3);
    let monsters = 2 * count;

    // summary
    const summary = document.createElement("div");
    summary.className = "info-box";
    summary.innerHTML = `
      <h3>Raid Summary</h3>
      <p>Group Size: ${count}</p>
      <p>Item Drops Each: ${itemCount}</p>
      <p>Bosses: ${bosses}, Monsters: ${monsters}</p>
      <p>Max Weapons (Bow/Hammer/Staff): ${itemCount}</p>
    `;
    container.appendChild(summary);

    // main table
    const table = document.createElement("table");
    table.innerHTML = `
      <thead>
        <tr>
          <th>Username</th>
          <th>Combat Role</th>
          <th>Support Role</th>
          <th>Levels</th>
          <th>Equipment Access</th>
        </tr>
      </thead>
    `;
    const tbody = document.createElement("tbody");

    const skillOrder = ["Attack","Strength","Defence","Magic","Archery","Fishing","Cooking","Plundering"];
    const skillIcons = {
      Attack: "Rigour.png",
      Strength: "Strength.png",
      Defence: "Defence.png",
      Magic: "Magic.png",
      Archery: "Archery.png",
      Fishing: "Fishing.png",
      Cooking: "Cooking.png",
      Plundering: "Plundering.png"
    };

    players.forEach(p => {
      const s = p.skillLevels;
      const isYou = (p.username.toLowerCase() === yourName.toLowerCase());

      // level string
      const levelStr = skillOrder.map(sk => {
        return `<img class="icon" src="${BASE_URL}${skillIcons[sk]}" alt="${sk}"/>${s[sk]}`;
      }).join(" / ");

      // weapon icon
      let wepFile = "";
      if (p.combatRole === "Archery") {
        wepFile = "thunderbolt_bow.png";
      } else if (p.combatRole === "Magic") {
        wepFile = "godlike_staff.png";
      } else {
        if (s.Attack < 90) wepFile = "godlike_staff.png";
        else wepFile = "godlike_heavy_hammer.png";
      }
      const wepIcon = `<img class="icon" src="${BASE_URL}${wepFile}" alt="Weapon" />`;

      // gem + gear
      const itemHTML = [];
      gemstoneData.forEach(g => {
        const meetsReq = s[g.reqSkill] >= g.reqLevel;
        itemHTML.push(`
          <img class="icon ${!meetsReq ? 'locked' : ''}"
               src="${BASE_URL}${g.file}"
               alt="${g.name}"
               title="${g.name} (Req ${g.reqSkill} ${g.reqLevel})">
        `);
      });
      gearData.forEach(g => {
        const meetsReq = s[g.reqSkill] >= g.reqLevel;
        itemHTML.push(`
          <img class="icon ${!meetsReq ? 'locked' : ''}"
               src="${BASE_URL}${g.file}"
               alt="${g.name}"
               title="${g.name} (Req ${g.reqSkill} ${g.reqLevel})">
        `);
      });

      const tr = document.createElement("tr");
      if (isYou) tr.classList.add("highlight");
      tr.innerHTML = `
        <td>${p.username}</td>
        <td class="role">${p.combatRole}</td>
        <td>${p.supportRole || "None"}</td>
        <td>${levelStr}</td>
        <td class="item-list">${wepIcon}${itemHTML.join("")}</td>
      `;
      tbody.appendChild(tr);
    });

    table.appendChild(tbody);
    container.appendChild(table);

    // Gem Priority section
    const gemBox = document.createElement("div");
    gemBox.className = "info-box";
    gemBox.innerHTML = `<h3>Gemstone Priority</h3>`;
    container.appendChild(gemBox);

    // Build a table that shows each gem, columns = 1st, 2nd, etc
    const sortedByCraft = [...players].sort((a,b) => b.skillLevels.Crafting - a.skillLevels.Crafting);
    const maxSlots = sortedByCraft.length; // up to 6

    const gemTable = document.createElement("table");
    gemTable.className = "gem-priority-table";
    let headerRow = `<tr><th>Gem</th>`;
    for (let i = 1; i <= maxSlots; i++) {
      // nth label (1st, 2nd, 3rd...) is just a quick hack
      let suffix = "th";
      if (i === 1) suffix = "st";
      else if (i === 2) suffix = "nd";
      else if (i === 3) suffix = "rd";
      headerRow += `<th>${i}${suffix}</th>`;
    }
    headerRow += `</tr>`;
    gemTable.innerHTML = `<thead>${headerRow}</thead>`;

    const gemBody = document.createElement("tbody");
    gemstoneData.forEach(g => {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>
          <img class="icon" src="${BASE_URL}${g.file}" alt="${g.name}"/>
          ${g.name}
        </td>
      `;
      sortedByCraft.forEach(pl => {
        const user = pl.username;
        const isYou = (user.toLowerCase() === yourName.toLowerCase());
        const meetsReq = pl.skillLevels[g.reqSkill] >= g.reqLevel;
        let displayUser = meetsReq ? user : "(locked)";
        let styleCell = isYou ? `style="background: var(--highlight-bg);"` : "";
        row.innerHTML += `<td ${styleCell}>${displayUser}</td>`;
      });
      gemBody.appendChild(row);
    });
    gemTable.appendChild(gemBody);
    gemBox.appendChild(gemTable);

    // Etiquette
    const note = document.createElement("div");
    note.className = "info-box";
    note.innerHTML = `
      <h3>General Etiquette & Tips</h3>
      <ul>
        <li>Archers get gloves first; Melee gets plate boots, etc.</li>
        <li>Heavy Hammer users have priority on Outstanding/Godlike Gems.</li>
        <li>Try to skip gem tiers if it helps the team overall.</li>
        <li>2 players => 1 plundering, 1 fish+cook. More players => advanced distribution.</li>
        <li>Cursed gear requires Magic ≥80; black leather requires Archery ≥40.</li>
        <li>Click a previously used name to fill the next empty slot (avoiding duplicates).</li>
      </ul>
    `;
    container.appendChild(note);
  }

  /************************************************************
   * 9) Theme Toggle
   ************************************************************/
  document.addEventListener("DOMContentLoaded", () => {
    // Load user history
    loadHistory();

    // Theme switch
    const themeSwitch = document.getElementById("themeSwitch");
    themeSwitch.addEventListener("change", () => {
      document.body.classList.toggle("dark-theme", themeSwitch.checked);
    });
  });
  </script>
</body>
</html>