{{ block title }}{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>

<div class="content-box box-neutral">
    <h2 class="section-title">Part II - Games</h2>
    <hr class="section-divider">

    <p style="text-align:center; color:#555; font-size:1.05em;">
        The main part of the experiment is complete!
    </p>

    <!-- Payment rule — shown FIRST so participants know before any game -->
    <div class="section-box box-warn" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">🎲</div>
            <h3>Payment Rule — Please read carefully</h3>
        </div>
        <p>
            You will play <strong>7 games</strong> in total. At the end,
            <strong>one game will be randomly selected</strong> to determine your payment for this part.
            Each game is equally likely to be chosen, so it is in your best interest to
            <strong>treat every game as if it counts.</strong>
        </p>
        <p style="margin-top:10px; padding:10px 14px; background:#f0f7ff; border-left:3px solid #5B9BD5; border-radius:4px; font-size:0.92em; color:#333;">
            ℹ️ ECs from the first two rounds, Part I (previous part), and Part II (this part) will be added together to determine your final payment.
        </p>
    </div>

    <!-- Games overview -->
    <div class="section-box box-info" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">🎮</div>
            <h3>What you will do</h3>
        </div>
        <p>In this part, you will play various games with other participants.</p>
        <ul style="margin-top:8px;">
            <li>First, you will play two games <strong>with your group</strong> (the same 2 people from Part I).</li>
            <li>Later, we will match you with <strong>participants from other groups</strong>.</li>
        </ul>
        <p style="margin-top:10px;">Please read the instructions for each game carefully before making your decisions.</p>
    </div>

    <div class="buttons-container" style="margin-top:30px;">
        <div></div>
        <button id="NextButton" class="btn btn-primary">Begin &rarr;</button>
    </div>
</div>

{{ endblock }}