{{ block title }}{{ endblock }}
{{ block content }}
<div class="card bg-mid m-0">
    <h2 class="card-header">🟦 Welcome to the Experiment!</h2>
    <div class="card-body">

        <div class="key-message">
            <p><strong>🎯 Your Role</strong></p>
            <p>You are one of four Research Team members at a Space Station. Together with a Mission Commander,
            your team's goal is to learn which type of robot collects the highest-quality samples from the
            surface of Venus. Each mission, one robot type is sent to the surface, and every Research Team
            member receives their own sample from that robot.</p>
            <p>First, there is training to help you get familar with the task. Then, if you choose to join the main experiment, you will take part in 60 missions. </p>
        </div>

        <h5><strong>What You'll Do Each Round</strong></h5>

        <div class="decision-box">
            <h6>🔹 Question 1: Which robot do you personally think is best for this mission?</h6>
            <p>The four robot types available are: Robot K3M, Robot V2X, Robot N7P, and Robot Z5B.
            The best robot for a mission depends on the weather conditions on the surface of Venus, so which robot is best may change over time.</p>
            <p>To help you decide, each robot will display an estimated sample quality (e.g. "Est. Quality: 76").
            These estimates are not always accurate — their reliability also varies depending on the current
            weather conditions on Venus.</p>
            <p>Your personal vote is kept private from the rest of the team, but all personal votes are
            recorded. The team member whose personal choices best match the actual sample quality rankings
            wins a bonus of $20.</p>
        </div>

        <div class="decision-box">
            <h6>🔹 Question 2: Which robot do you vote for as a Research Team member?</h6>
            <p>Now vote as part of the Research Team. Your team vote can be the same as or different from
            your personal opinion. <p>For the Research Team to reach a decision, at least three out of four
            members must vote for the same robot. If no robot receives three or more votes, the team must
            vote again, which incurs a penalty.</p>
        </div>

        <div class="decision-box">
            <h6>🔹 Question 3: Who should make the final decision for this mission?</h6>
            <p>The final choice of which robot to send can be made either by the Research Team or by the
            Mission Commander.</p>
            <p>If the Research Team decides, the majority vote above determines which robot is sent — but
            this requires at least three votes, and disagreement leads to revoting and a penalty.</p>
            <p>If the Mission Commander decides, revoting is avoided, but the Commander is not required to
            follow the team's votes. Their choice may be better or worse than what the team voted for.</p>
        </div>

        <div class="payment-help">
            💰 <strong>Your Payment:</strong> You earn a base payment for completing the missions, plus
            bonuses based on the quality of the samples your chosen robot collects. Better robot choices
            lead to higher sample quality and higher pay!
        </div>
        <br>
        {{ formfields }}
        <button class="next-button" type="submit">Next</button>

    </div>
</div>
{{ endblock }}

{{ block styles }}
<style>
.key-message {
    margin: 15px 0;
    background-color: #e8f5e8;
    padding: 20px;
    border-left: 5px solid #28a745;
    border-radius: 6px;
    text-align: center;
}
.payment-help {
    margin: 15px 0;
    background-color: #fff3e0;
    padding: 15px;
    border-left: 5px solid #ff9800;
    border-radius: 6px;
}
.decision-box {
    margin: 15px 0;
    background-color: #e7f3ff;
    padding: 15px;
    border-left: 5px solid #007bff;
    border-radius: 6px;
}
.decision-box h6 {
    margin-top: 0;
    font-weight: bold;
    color: #333;
}
.next-button {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    font-size: 16px;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
}
.next-button:hover {
    background-color: #008CBA;
    color: white;
}
.next-button:active {
    background-color: #005f8b;
    color: white;
    border: 2px solid #005f8b;
}
@media (max-width: 768px) {
    .decision-box h6 { font-size: 14px; }
}
</style>
{{ endblock }}