{{ block title }}
{{ endblock }}

{{ block content }}

<style>
/* Ensure all text blocks share the same left edge */
.instr {
  max-width: 900px;   /* adjust as you like */
  margin: 0 auto;     /* centers the whole instruction block on the page */
}

/* Figure block spans the same width as paragraphs */
.fig {
  width: 100%;
  margin: 12px 0 18px 0;
  text-align: center; /* centers the image only, not the paragraphs */
}

/* Enlarge the image */
.fig-img {
  display: block;
  width: 80%;         /* make bigger/smaller: e.g. 90% or 70% */
  max-width: 750px;   /* cap so it doesn’t get absurdly large */
  height: auto;
  margin: 0 auto;
  float: none;        /* IMPORTANT: prevents text wrapping/misalignment */
}

  /* optional: emphasize color words */
  .green-word{ color: #2e9f3f; font-weight: 600; }
  .red-word{ color: #c43b3b; font-weight: 600; }
</style>
   <p>
You will now play the game. Note that every other player in your game will have
the same information as you have. They will also have seen the same instructions as you
have.</p>
<br>
<br>

    <p>
This is a brief summary of the rules:
    </p>
<p>
1) <b>At the start of the game</b> all 100 players (yourself included) are <span class="green-word">green</span>.
</p>
 <p>
2) <b>Before the first round only</b>, eight randomly selected players change into <span class="red-word">red</span> players.
</p>

<p>
3) <b>During each round</b>:
</p>
<ul>
  <li>Players are paired at random.</li>
  <li>Each player chooses an action and receives points (8 points for G, 40 points for H).</li>
  <li>
    A <span class="green-word">green</span> player that is paired with a
    <span class="red-word">red</span> player may change into a
    <span class="red-word">red</span> player (with a probability between 5% and 25%, see the figure below).
  </li>
  <li>
    A <span class="green-word">green</span> player that is paired with a
    <span class="green-word">green</span> player never changes color, no matter which actions are chosen.
  </li>
</ul>

<p>
4) <b>After 25 rounds</b>, at the end of the game, the payoff across all rounds for
<span class="green-word">green</span> players will be converted into bonus money.
<span class="red-word">Red</span> players will <b>not</b> receive bonus money for this task.
</p>
<br>
<br>
<p>
You will not have to wait for the other players (they may play the game before or after you).
</p>
<p>
We will collect your decisions and the decisions of 99 other players, then play out the game once to determine the results.
</p>
<p>
Afterwards, we will inform you about your color at the end of the game in a message when you receive your bonus payment for the entire survey.
</p>
<div class="wrap">
  <div class="instr">
    <div class="figure-label"></div>

    <div class="fig">
      <img src="{% static 'change.jpeg' %}" alt="Green player grid" class="fig-img">
    </div>

  </div>
</div>

<center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}