{{ extends 'global/Page.html' }}
{{ block title }}Introduction{{ endblock }}

{{ block content }}

<style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

    body {
        background-color: #0a0a12 !important;
        color: #c8c8d8;
        font-family: 'Share Tech Mono', 'Courier New', monospace;
        margin: 0;
        padding: 0;
        transition: background-color 0.4s, color 0.4s;
    }

    .page-header, .otree-btn-next { display: none !important; }
    .hidden { display: none !important; }

    /* ═══════════════════════════════════════════
       BRIEFING (dark arcade mode)
    ═══════════════════════════════════════════ */
    .briefing-container {
        max-width: 680px;
        margin: 30px auto;
        padding: 32px 28px;
        background: linear-gradient(170deg, #101020, #0a0a15);
        border: 1px solid #2a2a4a;
        border-radius: 6px;
        box-shadow: 0 0 30px rgba(80, 60, 200, 0.12);
        line-height: 1.85;
        font-size: 0.88rem;
    }

    .arcade-title {
        font-family: 'Press Start 2P', monospace;
        color: #f0c040;
        font-size: 1rem;
        text-align: center;
        margin-bottom: 28px;
        letter-spacing: 2px;
        line-height: 1.6;
    }

    .highlight { color: #40dd80; font-weight: bold; }

    .section-title {
        font-family: 'Press Start 2P', monospace;
        color: #f0c040;
        font-size: 0.65rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 28px;
        margin-bottom: 12px;
        padding-bottom: 6px;
        border-bottom: 1px solid #1a1a2e;
    }

    .info-box {
        border: 1px solid #2a2a4a;
        padding: 18px 16px;
        margin: 20px 0;
        background: #0c0c1a;
        border-radius: 4px;
        border-left: 3px solid #f0c040;
    }
    .info-box h3 {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.6rem;
        color: #f0c040;
        margin: 0 0 10px 0;
        letter-spacing: 1px;
    }

    ul.phase-rules {
        padding-left: 18px;
        margin-top: 10px;
    }
    ul.phase-rules li {
        margin-bottom: 14px;
        line-height: 1.8;
    }
    ul.phase-rules li strong {
        color: #e0e0f0;
    }

    .btn-start {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 36px auto 0;
        background: #0c0c1a;
        color: #f0c040;
        border: 1px solid #f0c040;
        padding: 14px 24px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        letter-spacing: 1px;
        transition: all 0.2s;
    }
    .btn-start:hover {
        background: #1a1a10;
        box-shadow: 0 0 18px rgba(240, 192, 64, 0.15);
    }

    /* ═══════════════════════════════════════════
       QUIZ (light mode for readability)
    ═══════════════════════════════════════════ */
    .quiz-container {
        max-width: 680px;
        margin: 30px auto;
        background: #f5f5f8;
        padding: 36px 30px;
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        color: #2a2a3a;
        font-family: 'Share Tech Mono', 'Courier New', monospace;
    }

    .quiz-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.7rem;
        text-align: center;
        margin-bottom: 8px;
        color: #2a2a3a;
        letter-spacing: 2px;
    }
    .quiz-subtitle {
        text-align: center;
        color: #666680;
        font-size: 0.8rem;
        margin-bottom: 28px;
        padding-bottom: 18px;
        border-bottom: 1px solid #ddd;
    }

    .quiz-info {
        background: #e8eef4;
        border-left: 3px solid #4a7aaa;
        padding: 12px 16px;
        margin-bottom: 28px;
        border-radius: 3px;
        font-size: 0.82rem;
        color: #3a4a5a;
        line-height: 1.7;
    }

    .q-block {
        margin-bottom: 24px;
        padding: 18px 16px;
        border: 1px solid #e0e0e8;
        border-radius: 6px;
        background: #ffffff;
        transition: border-color 0.3s, background-color 0.3s;
    }
    .q-block.incorrect {
        border: 2px solid #dd4444;
        background: #fff8f8;
    }

    .q-label {
        font-size: 0.88rem;
        color: #2a2a3a;
        margin-bottom: 14px;
        display: block;
        font-weight: bold;
        line-height: 1.5;
    }

    .q-option {
        margin-bottom: 12px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .q-option input[type="radio"] {
        cursor: pointer;
        accent-color: #4a7aaa;
        transform: scale(1.2);
        flex-shrink: 0;
    }
    .q-option label {
        color: #3a3a4a;
        cursor: pointer;
        font-size: 0.84rem;
        line-height: 1.5;
    }

    .btn-submit {
        display: block;
        width: 100%;
        margin-top: 24px;
        background: #2a2a4a;
        color: #ffffff;
        border: none;
        padding: 14px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        letter-spacing: 0.5px;
        transition: background 0.2s;
    }
    .btn-submit:hover:not(:disabled) {
        background: #3a3a6a;
    }
    .btn-submit:disabled {
        background: #aaaaaa;
        cursor: not-allowed;
    }

    /* ═══════════════════════════════════════════
       ERROR BANNER
    ═══════════════════════════════════════════ */
    .popup-banner {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        background: #1a1208;
        border-bottom: 2px solid #f0c040;
        padding: 16px 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        z-index: 9999;
        color: #e0d0a0;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.82rem;
        line-height: 1.7;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }
    .popup-banner.show {
        transform: translateY(0);
    }
    .popup-banner h3 {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.55rem;
        margin: 0 0 10px 0;
        color: #f0c040;
        letter-spacing: 1px;
    }
    .popup-banner ul {
        margin: 8px 0 0 0;
        padding-left: 18px;
    }
    .popup-banner li {
        margin-bottom: 5px;
    }
    .popup-banner strong {
        color: #f0c040;
    }
    .popup-close {
        position: absolute;
        top: 10px; right: 16px;
        background: none;
        border: none;
        font-size: 1.3rem;
        color: #f0c040;
        cursor: pointer;
        font-weight: bold;
    }
    .popup-close:hover {
        color: #ffffff;
    }
</style>


<!-- ═══════════════════════════════════════════
     ERROR POPUP
═══════════════════════════════════════════ -->
<div id="popup-banner" class="popup-banner">
    <button class="popup-close" onclick="closePopup()">&times;</button>
    <h3>TRANSMISSION ERROR</h3>
    <p style="margin: 0;">One or more answers were incorrect. Highlighted questions need correction. Remember:</p>
    <ul>
        <li>Buying an upgrade uses Pocket Money — fewer coins reach your <strong>Bank</strong> (and fewer lottery tickets).</li>
        <li>Losing HP or failing the mini-game does <strong>not</strong> reduce your Bank balance.</li>
        <li>You win €5 if the random number is <strong>equal to or less than</strong> your tickets.</li>
    </ul>
</div>


<!-- ═══════════════════════════════════════════
     INSTRUCTION SECTION (dark mode)
═══════════════════════════════════════════ -->
<div id="instruction-section" class="briefing-container">
    <div class="arcade-title">MISSION BRIEFING<br>SPACE DEFENDER</div>

    <p>
        Welcome to <span class="highlight">Space Defender</span>.
        You will complete <strong style="color: #e0e0f0;">30 waves</strong> of combat across three sectors.
    </p>

    <div class="section-title">Core Task</div>
    <p>
        Before each wave, choose <strong style="color: #e0e0f0;">one of three sectors</strong>:
        <span class="highlight">Alpha</span>, <span class="highlight">Beta</span>, or <span class="highlight">Gamma</span>.
    </p>
    <p>
        Each sector works like a slot machine with two possible outcomes:
    </p>
    <ul class="phase-rules">
        <li>With some probability, you <strong>win</strong> a fixed number of coins.</li>
        <li>Otherwise, you <strong>win nothing</strong> (0 coins).</li>
    </ul>
    <p>
        Each sector has its own fixed probability and its own fixed reward. These values <strong style="color: #e0e0f0;">stay the same</strong> throughout all 30 waves, but they are <strong style="color: #e0e0f0;">hidden from you</strong>. Your job is to figure out which sector is best by trying them out.
    </p>

    <div style="background: #0c0c1a; border: 1px solid #2a2a4a; border-radius: 6px; padding: 16px 18px; margin: 20px 0;">
        <strong style="color: #f0c040; font-size: 0.85rem;">Example (for illustration only — not the actual values):</strong>
        <p style="margin: 10px 0 5px; color: #9999aa; font-size: 0.84rem;">Suppose one of the sectors had these hidden values:</p>
        <table style="width: 100%; border-collapse: collapse; margin: 8px 0;">
            <tr style="background: #12121f;">
                <th style="padding: 10px 14px; text-align: center; border-bottom: 1px solid #2a2a4a; color: #8888cc; font-size: 0.8rem; width: 50%;">Win Probability</th>
                <th style="padding: 10px 14px; text-align: center; border-bottom: 1px solid #2a2a4a; color: #8888cc; font-size: 0.8rem; width: 50%;">Reward When You Win</th>
            </tr>
            <tr>
                <td style="padding: 12px 14px; text-align: center; font-size: 1rem; font-weight: bold; color: #40dd80;">60%</td>
                <td style="padding: 12px 14px; text-align: center; font-size: 1rem; font-weight: bold; color: #f0c040;">15 coins</td>
            </tr>
        </table>
        <p style="margin: 8px 0 0; color: #777799; font-size: 0.8rem;">
            This means each time you choose this sector, you have a 60% chance of winning 15 coins and a 40% chance of winning nothing (0 coins).
            Each of the three sectors in your task works this way, but with its own hidden probability and reward.
        </p>
    </div>

    <div class="info-box">
        <h3>€5 PERSONAL LOTTERY</h3>
        <p style="margin-bottom: 0;">
            Every coin saved in your <strong style="color: #f0c040;">Bank</strong> becomes a <strong style="color: #f0c040;">lottery ticket</strong>. 
            At the end of this task, the computer will draw a random number between 1 and 5,000.<br><br>
            <strong style="color: #e0e0f0;">If the random number is equal to or less than your total tickets, you win €5.</strong> 
            If the random number is higher, you win nothing.<br><br>
            The more coins you save, the more tickets you collect — and the better your chance of winning.<br><br>
            This is your <strong style="color: #e0e0f0;">individual</strong> lottery — your result depends only on your own performance, not on other participants.
        </p>
    </div>

    <div class="section-title">The Mini-Game & Your Choice</div>
    <p>
        After choosing a sector and seeing your coins, those coins become your <strong style="color: #f0c040;">Pocket Money</strong> for that wave. Before the mini-game starts, you must decide:
    </p>

    <ul class="phase-rules">
        <li>
            <strong>Option A — Save your coins.</strong> Your Pocket Money goes straight into your Bank and becomes lottery tickets.
        </li>
        <li>
            <strong>Option B — Buy an upgrade.</strong> Spend some Pocket Money on a temporary weapon upgrade.
            <span style="color: #ff6666;">Spent coins do not go to your Bank and cannot become lottery tickets.</span>
        </li>
    </ul>

    <div class="section-title">Important Rule</div>
    <ul class="phase-rules">
        <li>
            <strong>Mini-game performance does NOT affect your reward.</strong>
            Losing HP or failing the mini-game will <strong>not</strong> reduce the coins already saved in your Bank.
        </li>
    </ul>

    <button type="button" class="btn-start" onclick="showQuiz()">
        PROCEED TO COMPREHENSION CHECK
    </button>
</div>


<!-- ═══════════════════════════════════════════
     QUIZ SECTION (light mode for readability)
═══════════════════════════════════════════ -->
<div id="quiz-section" class="quiz-container hidden">

    <div class="quiz-title">COMPREHENSION CHECK</div>
    <div class="quiz-subtitle">
        Answer all questions correctly to begin Space Defender.
    </div>

    <div class="quiz-info">
        If any answer is incorrect, the question will be highlighted and you will need to correct it before continuing.
    </div>

    <!-- Q1 -->
    <div class="q-block" id="q1-block">
        <label class="q-label">1. Buying a weapon upgrade means:</label>
        <div class="q-option">
            <input type="radio" name="p1_cq1" id="p1_cq1_1" value="Fewer coins saved and fewer lottery tickets">
            <label for="p1_cq1_1">Fewer coins saved in the Bank and fewer lottery tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq1" id="p1_cq1_2" value="More coins saved and more lottery tickets">
            <label for="p1_cq1_2">More coins saved in the Bank and more lottery tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq1" id="p1_cq1_3" value="No effect on coins or lottery tickets">
            <label for="p1_cq1_3">No effect on coins saved or lottery tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq1" id="p1_cq1_4" value="I am not sure">
            <label for="p1_cq1_4">I am not sure</label>
        </div>
    </div>

    <!-- Q2 -->
    <div class="q-block" id="q2-block">
        <label class="q-label">2. If you lose HP or fail the mini-game, this means:</label>
        <div class="q-option">
            <input type="radio" name="p1_cq2" id="p1_cq2_1" value="Your Bank balance is reduced">
            <label for="p1_cq2_1">Your Bank balance is reduced</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq2" id="p1_cq2_2" value="Your Bank balance is unchanged">
            <label for="p1_cq2_2">Your Bank balance is unchanged</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq2" id="p1_cq2_3" value="Your sector reward probabilities will change">
            <label for="p1_cq2_3">Your sector reward probabilities will change</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq2" id="p1_cq2_4" value="I am not sure">
            <label for="p1_cq2_4">I am not sure</label>
        </div>
    </div>

    <!-- Q3 -->
    <div class="q-block" id="q3-block">
        <label class="q-label">3. In this task, the sector reward patterns are:</label>
        <div class="q-option">
            <input type="radio" name="p1_cq3" id="p1_cq3_1" value="Fixed throughout the task">
            <label for="p1_cq3_1">Fixed throughout the task</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq3" id="p1_cq3_2" value="Changing every round">
            <label for="p1_cq3_2">Changing every round</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq3" id="p1_cq3_3" value="Chosen by the participant">
            <label for="p1_cq3_3">Chosen by the participant</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq3" id="p1_cq3_4" value="I am not sure">
            <label for="p1_cq3_4">I am not sure</label>
        </div>
    </div>

    <!-- Q4 -->
    <div class="q-block" id="q4-block">
        <label class="q-label">4. You win €5 if:</label>
        <div class="q-option">
            <input type="radio" name="p1_cq4" id="p1_cq4_1" value="The random number is equal to or less than my tickets">
            <label for="p1_cq4_1">The random number is equal to or less than my tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq4" id="p1_cq4_2" value="The random number is higher than my tickets">
            <label for="p1_cq4_2">The random number is higher than my tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq4" id="p1_cq4_3" value="Everyone wins regardless of their tickets">
            <label for="p1_cq4_3">Everyone wins regardless of their tickets</label>
        </div>
        <div class="q-option">
            <input type="radio" name="p1_cq4" id="p1_cq4_4" value="I am not sure">
            <label for="p1_cq4_4">I am not sure</label>
        </div>
    </div>

    <input type="hidden" name="p2_cq_errors" id="p2_cq_errors" value="0">

    <button type="button" class="btn-submit" id="submit-btn" onclick="checkAnswers()">
        SUBMIT ANSWERS
    </button>
</div>


<script>
    let p1FailCount = 0;

    function showQuiz() {
        document.body.style.backgroundColor = '#e8e8ef';
        document.body.style.color = '#2a2a3a';

        document.getElementById('instruction-section').classList.add('hidden');
        document.getElementById('quiz-section').classList.remove('hidden');
        window.scrollTo(0, 0);
    }

    function clearHighlights() {
        document.querySelectorAll('.q-block.incorrect').forEach(el => el.classList.remove('incorrect'));
    }

    function closePopup() {
        document.getElementById('popup-banner').classList.remove('show');
    }

    function checkAnswers() {
        const q1 = document.querySelector('input[name="p1_cq1"]:checked');
        const q2 = document.querySelector('input[name="p1_cq2"]:checked');
        const q3 = document.querySelector('input[name="p1_cq3"]:checked');
        const q4 = document.querySelector('input[name="p1_cq4"]:checked');

        if (!q1 || !q2 || !q3 || !q4) {
            alert("Please answer all questions before submitting.");
            return;
        }

        const q1Correct = q1.value === "Fewer coins saved and fewer lottery tickets";
        const q2Correct = q2.value === "Your Bank balance is unchanged";
        const q3Correct = q3.value === "Fixed throughout the task";
        const q4Correct = q4.value === "The random number is equal to or less than my tickets";

        clearHighlights();
        closePopup();

        if (!q1Correct) document.getElementById('q1-block').classList.add('incorrect');
        if (!q2Correct) document.getElementById('q2-block').classList.add('incorrect');
        if (!q3Correct) document.getElementById('q3-block').classList.add('incorrect');
        if (!q4Correct) document.getElementById('q4-block').classList.add('incorrect');

        if (q1Correct && q2Correct && q3Correct && q4Correct) {
            document.getElementById('submit-btn').disabled = true;
            document.getElementById('submit-btn').textContent = "LAUNCHING SPACE DEFENDER...";
            document.getElementById('form').submit();
        } else {
            p1FailCount++;
            document.getElementById('p2_cq_errors').value = p1FailCount;
            document.getElementById('popup-banner').classList.add('show');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
</script>

{{ endblock }}