{% extends "global/Page.html" %}

{{ block title }}
Main Study
{{ endblock }}

{{ block content }}
<div class="study-intro">
    <h2>You are now entering the main study</h2>
    <p>
        The practice round is complete.
        From now on, please take your time on each round.
    </p>
    <p>
        You complete <strong>{{ total_rounds }}</strong> rounds in the main study.
    </p>
    <p>
        In every round, your job is to guess the <strong>total</strong> number of <span class="text-danger fw-bold">RED</span> balls in the urn (out of 20).
        You are <strong>not</strong> guessing how many <span class="text-danger fw-bold">RED</span> balls are left after any draws.
    </p>
    <p>
        In some rounds, you draw the balls yourself (like in the practice).
        In other rounds, you see the three balls another participant drew, or you see their guess.
        That information is real and comes from the same urn.
    </p>
    <p>
        <strong>Important:</strong> Each round uses a brand-new urn.
        It has 20 balls with between 4 and 16 <span class="text-danger fw-bold">RED</span> balls.
    </p>
    <p>
        Click “Next” when you are ready to begin.
    </p>
    <div class="next-holder">{{ next_button }}</div>
</div>

<style>
    .study-intro { max-width: 720px; margin: 0 auto; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 24px; }
    .study-intro h2 { margin-top: 0; color: #1f2937; }
    .study-intro p { color: #374151; margin: 14px 0; }
    .next-holder { margin-top: 24px; }
</style>
{{ endblock }}