{{ block title }}
    Results
{{ endblock }}
{{ block content }}

    <div class="result-shell">
        <div class="result-card">
            <div class="result-box result-box-info">
                {{ if player.lottery == 2 }}
                    <p>You chose the lottery where you could win 0.50 points with an 80% probability.</p>
                {{ endif }}
                {{ if player.lottery == 3 }}
                    <p>You chose the lottery where you could win 0.75 points with a 70% probability.</p>
                {{ endif }}
                {{ if player.lottery == 4 }}
                    <p>You chose the lottery where you could win 1.00 points with a 60% probability.</p>
                {{ endif }}
                {{ if player.lottery == 5 }}
                    <p>You chose the lottery where you could win 1.25 points with a 50% probability.</p>
                {{ endif }}
                {{ if player.lottery == 6 }}
                    <p>You chose the lottery where you could win 1.50 points with a 40% probability.</p>
                {{ endif }}
                {{ if player.lottery == 7 }}
                    <p>You chose the lottery where you could win 1.75 points with a 30% probability.</p>
                {{ endif }}
            </div>

            {{ if player.risk_earnings == 0.0 }}
                <div class="result-box result-box-warning">
                    <p><b>You lost the lottery.</b></p>
                </div>
            {{ else }}
                <div class="result-box result-box-highlight">
                    <p><b>You won the lottery. The recorded outcome is {{ player.risk_earnings|to2 }} points.</b></p>
                </div>
            {{ endif }}

            <div class="result-actions">
                <button class="otree-btn-next btn btn-primary">Continue</button>
            </div>
        </div>
    </div>

{{ endblock }}

{{ block styles }}
    <style>
        body {
            background: #eef3f7;
        }

        .result-shell {
            max-width: 860px;
            margin: 0 auto;
        }

        .result-card {
            background: #fbfdff;
            border: 1px solid #d4dde6;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(30, 48, 66, 0.06);
            padding: 22px 24px;
        }

        .result-box {
            margin: 14px 0;
            padding: 12px 14px;
            border-radius: 8px;
        }

        .result-box p {
            margin-bottom: 0;
            line-height: 1.7;
            text-align: justify;
        }

        .result-box-info {
            background: #edf4fa;
            border-left: 4px solid #4e6f8c;
            color: #355066;
        }

        .result-box-highlight {
            background: #f6f1e7;
            border-left: 4px solid #b79a62;
            color: #57451f;
        }

        .result-box-warning {
            background: #fff1ef;
            border-left: 4px solid #c64b3c;
            color: #7c4f48;
        }

        .result-actions {
            margin-top: 20px;
        }
    </style>
{{ endblock }}