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

{{ block title }}
Instructions
{{ endblock }}

{{ block content }}
<div class="instructions">
    <div class="instructions__columns">
        <div class="instructions__rules">
            <h2>How the Game Works</h2>
            <p>
                In each round, you see a new urn with exactly <strong>20</strong> balls.
                Some balls are <span class="text-danger fw-bold">RED</span> and some are white.
                There are between <strong>4</strong> and <strong>16</strong> <span class="text-danger fw-bold">RED</span> balls.
            </p>
            <p>
                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 the draws.
            </p>
            <p>
                To help you guess, you draw balls in <strong>two steps</strong>:
            </p>
            <p>
                <strong>Step 1:</strong> Draw <strong>3</strong> balls (one at a time), see their colors, then enter your first guess.
                Then the balls go back into the urn.
            </p>
            <p>
                <strong>Step 2:</strong> Draw <strong>3</strong> more balls, then update your guess.
                Use what you see to make your best guess.
            </p>
            <p>
                When you are ready, click “Next” to continue.
            </p>
            <div class="instructions-next">
                {{ next_button }}
            </div>
        </div>

        <div class="instructions__animation">
            <div class="urn-visual">
                <iframe
                    class="urn-visual__frame"
                    src="{% static 'org_learning/urn_experiment.html' %}"
                    title="Urn animation"
                    loading="lazy"
                ></iframe>
            </div>
        </div>
    </div>
</div>

<style>
    .instructions__columns {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        position: relative;
    }

    .instructions__rules {
        flex: 1 1 360px;
        min-width: 280px;
        position: relative;
        z-index: 2;
    }

    .instructions__animation {
        flex: 0 1 440px;
        min-width: 320px;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    /* On wide screens (two-column layout), vertically center the rules
       relative to the animation so the page feels balanced at start. */
    @media (min-width: 861px) {
        .instructions__columns {
            align-items: center;
        }

        .instructions__rules {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: min(720px, 80vh);
        }
    }

    .urn-visual {
        display: flex;
        justify-content: center;
        margin: 12px 0 18px;
    }

    .urn-visual__frame {
        width: 100%;
        max-width: 400px;
        height: min(720px, 80vh);
        border: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    @media (max-width: 860px) {
        .instructions__animation {
            flex-basis: 100%;
        }
        .urn-visual__frame {
            max-width: 420px;
        }
    }
</style>
{{ endblock }}