<style>

  body { font-family: sans-serif; background: #f3f3f3; padding: 10px; }

  .fantasy-box { max-width: 600px; margin: auto; background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

  h2 { text-align: center; }

  .player { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #eee; }

  .player:last-child { border-bottom: none; }

  .btn { padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 15px; }

  .btn:hover { background: #218838; }

  .selected { background-color: #d1e7dd; }

</style>

<div class="fantasy-box">

  <h2>Mini Fantasy Cricket</h2>

  <p>Select 3 players for your team:</p>

  <div id="playerList">

    <div class="player" onclick="selectPlayer(this)">Virat Kohli</div>

    <div class="player" onclick="selectPlayer(this)">Rohit Sharma</div>

    <div class="player" onclick="selectPlayer(this)">MS Dhoni</div>

    <div class="player" onclick="selectPlayer(this)">Hardik Pandya</div>

    <div class="player" onclick="selectPlayer(this)">Jasprit Bumrah</div>

  </div>

  <button class="btn" onclick="submitTeam()">Join Contest</button>

  <p id="result" style="margin-top: 10px; font-weight: bold;"></p>

</div>

<script>

  let selected = [];

  function selectPlayer(elem) {

    const name = elem.textContent;

    if (selected.includes(name)) {

      selected = selected.filter(p => p !== name);

      elem.classList.remove("selected");

    } else {

      if (selected.length >= 3) {

        alert("You can select only 3 players.");

        return;

      }

      selected.push(name);

      elem.classList.add("selected");

    }

  }

  function submitTeam() {

    if (selected.length !== 3) {

      alert("Please select exactly 3 players.");

      return;

    }

    document.getElementById("result").innerText =

      "Your Team: " + selected.join(", ") + " ✅";

  }

</script>