{{ extends 'global/Page.html' }}
{{ block title }}Encounter{{ 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: #e0e0e0;
        font-family: 'Share Tech Mono', 'Courier New', monospace;
        margin: 0;
        padding: 0;
    }

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

    .game-container {
        width: 100%;
        max-width: 640px;
        margin: 10px auto;
        position: relative;
        border: 2px solid #2a2a4a;
        border-radius: 6px;
        box-shadow: 0 0 30px rgba(80, 60, 200, 0.15), inset 0 0 60px rgba(0,0,0,0.5);
        overflow: hidden;
        background: #08080f;
    }

    @media (min-width: 769px) {
        .game-container {
            max-width: 960px;
        }
    }

    /* ── HUD ── */
    .hud {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0;
        background: linear-gradient(180deg, #12121f 0%, #0d0d18 100%);
        border-bottom: 1px solid #2a2a4a;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
    }
    .hud-cell {
        padding: 10px 8px;
        text-align: center;
        border-right: 1px solid #1a1a2e;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .hud-cell:last-child { border-right: none; }
    .hud-label { color: #555577; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px; }
    .hud-value { font-family: 'Press Start 2P', monospace; font-size: 0.8rem; }
    .hud-wave { color: #8888cc; }
    .hud-shield { color: #40dd80; }
    .hud-shield.critical { color: #ff4444; animation: pulse-red 0.6s infinite; }
    .hud-time { color: #60bbff; }


    @keyframes pulse-red { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

    /* ── CANVAS ── */
    canvas {
        display: block;
        width: 100%;
        height: auto;
        background: #050510;
        cursor: crosshair;
        touch-action: none;
    }

    /* ── SHOP OVERLAY ── */
    #shop-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(5, 5, 15, 0.97);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .shop-box {
        border: 1px solid #2a2a4a;
        padding: 28px 24px;
        text-align: center;
        width: 82%;
        max-width: 420px;
        background: linear-gradient(170deg, #101020, #0a0a15);
        border-radius: 8px;
        box-shadow: 0 0 40px rgba(60, 40, 160, 0.1);
    }

    .shop-title {
        font-family: 'Press Start 2P', monospace;
        color: #f0c040;
        font-size: 1rem;
        margin-bottom: 6px;
        letter-spacing: 2px;
    }
    .shop-subtitle {
        color: #555577;
        font-size: 0.7rem;
        margin-bottom: 18px;
        letter-spacing: 1px;
    }

    .shop-pocket {
        background: #0c0c1a;
        border: 1px solid #1a3a2a;
        border-left: 3px solid #40dd80;
        color: #40dd80;
        padding: 10px 14px;
        margin-bottom: 18px;
        font-size: 0.85rem;
        border-radius: 3px;
        display: flex;
        justify-content: space-between;
    }

    .shop-weapon-info {
        background: #0c0c1a;
        border: 1px solid #2a2a4a;
        padding: 14px;
        margin-bottom: 18px;
        border-radius: 4px;
    }
    .shop-weapon-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    .shop-weapon-desc {
        color: #777799;
        font-size: 0.75rem;
        line-height: 1.5;
    }

    .shop-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .btn-buy, .btn-skip {
        background: #0c0c1a;
        color: #e0e0e0;
        border: 1px solid #3a3a5a;
        padding: 12px 18px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.85rem;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s;
        flex: 1;
    }
    .btn-buy:hover:not(:disabled) {
        background: #1a3a1a;
        border-color: #40dd80;
        color: #40dd80;
        box-shadow: 0 0 15px rgba(64, 221, 128, 0.15);
    }
    .btn-skip:hover {
        background: #2a1a1a;
        border-color: #cc4444;
        color: #ff6666;
    }
    .btn-buy:disabled {
        border-color: #1a1a2a;
        color: #333355;
        background: #08080f;
        cursor: not-allowed;
    }

    .wc-1 { color: #40ff80; }
    .wc-2 { color: #ffaa30; }
    .wc-3 { color: #40ccff; }
    .wc-4 { color: #ff40ff; }
    .wc-5 { color: #ff4060; }
    .wc-6 { color: #80ff40; }
</style>

<div class="game-container">
    <div class="hud">
        <div class="hud-cell">
            <span class="hud-label">Wave</span>
            <span class="hud-value hud-wave" id="ui-wave">{{ round }}/30</span>
        </div>
        <div class="hud-cell">
            <span class="hud-label">Shield</span>
            <span class="hud-value hud-shield" id="hp-display"><span id="ui-hp">5</span>/5</span>
        </div>
        <div class="hud-cell">
            <span class="hud-label">Time</span>
            <span class="hud-value hud-time" id="ui-time">--</span>
        </div>
    </div>

    <canvas id="gameCanvas" width="640" height="440"></canvas>

    <!-- SHOP -->
    <div id="shop-overlay">
        <div class="shop-box">
            <div class="shop-title">ARMORY</div>
            <div class="shop-subtitle" id="shop-wave-label">WAVE {{ round }} / 30</div>

            <div class="shop-pocket">
                <span>Pocket Money</span>
                <span style="color: #f0c040; font-weight: bold;">{{ pocket_money }} ¢</span>
            </div>

            <div class="shop-weapon-info">
                <div class="shop-weapon-name" id="shop-weapon-name" style="color: #40ff80;">
                    {{ weapon_name }}
                </div>
                <div class="shop-weapon-desc" id="shop-weapon-desc"></div>
            </div>

            <div class="shop-buttons">
                <button type="button" id="btn-buy" class="btn-buy" onclick="startGame(true)">
                    UPGRADE (−{{ upgrade_cost }} ¢)
                </button>
                <button type="button" id="btn-skip" class="btn-skip" onclick="startGame(false)">
                    STANDARD WEAPON
                </button>
            </div>
        </div>
    </div>
</div>

<!-- oTree hidden fields -->
<input type="hidden" name="upgrade_bought" id="in_upgrade" value="False">
<input type="hidden" name="spent_credits" id="in_spent" value="0">
<input type="hidden" name="hp_lost" id="in_hp" value="0">
<div style="display: none;">
    {{ formfield_errors 'upgrade_bought' }} {{ formfield_errors 'spent_credits' }}
    {{ formfield_errors 'hp_lost' }}
</div>

<script>
(function() {
    "use strict";

    /* ═══════════════════════════════════════════
       CONFIG FROM oTREE
    ═══════════════════════════════════════════ */
    const CFG = {
        startingBank: parseInt("{{ starting_bank }}") || 0,
        pocketMoney:  parseInt("{{ pocket_money }}") || 0,
        upgradeCost:  parseInt("{{ upgrade_cost }}") || 0,
        round:        parseInt("{{ round }}") || 1,
        weaponType:   parseInt("{{ weapon_type }}") || 1,
        weaponName:   "{{ weapon_name }}",
        enemyTypes:   "{{ enemy_types }}".split(","),
        isBoss:       "{{ is_boss }}" === "True",
        timeLimit:    (parseInt("{{ time_limit }}") || 8) + 2,
    };

    const IS_BOSS_ROUND = CFG.isBoss;

    /* ═══════════════════════════════════════════
       WEAPON DESCRIPTORS
    ═══════════════════════════════════════════ */
    const WEAPON_INFO = {
        1: { name: "Dual Laser",     desc: "Twin rapid beams. High DPS, focused fire.", color: "#40ff80" },
        2: { name: "Spread Gun",     desc: "Three-way fan. Wide coverage for clearing bullets.", color: "#ffaa30" },
        3: { name: "Plasma Beam",    desc: "Piercing continuous beam. Cuts through everything.", color: "#40ccff" },
        4: { name: "Wave Cannon",    desc: "Five-bolt arc. Maximum screen control.", color: "#ff40ff" },
        5: { name: "Homing Missile", desc: "Auto-locks nearest target. Focus on dodging.", color: "#ff4060" },
        6: { name: "Ricochet Bolt",  desc: "Wall-bouncing shots. Clears corners and dense patterns.", color: "#80ff40" },
    };

    /* ═══════════════════════════════════════════
       SHOP UI INIT
    ═══════════════════════════════════════════ */
    (function initShop() {
        const wi = WEAPON_INFO[CFG.weaponType] || WEAPON_INFO[1];
        const nameEl = document.getElementById('shop-weapon-name');
        nameEl.textContent = wi.name;
        nameEl.style.color = wi.color;
        document.getElementById('shop-weapon-desc').textContent = wi.desc;

        if (CFG.pocketMoney < CFG.upgradeCost) {
            const btn = document.getElementById('btn-buy');
            btn.disabled = true;
            btn.textContent = "INSUFFICIENT FUNDS";
        }
    })();

    /* ═══════════════════════════════════════════
       GAME STATE
    ═══════════════════════════════════════════ */
    let totalBank = CFG.startingBank;
    let hasUpgrade = false;
    let maxHP = 5;
    let currentHP = maxHP;
    let hpLost = 0;
    let enemiesDestroyed = 0;
    let gameActive = false;

    /* ═══════════════════════════════════════════
       START GAME
    ═══════════════════════════════════════════ */
    window.startGame = function(bought) {
        hasUpgrade = bought;
        document.getElementById('btn-buy').disabled = true;
        document.getElementById('btn-skip').disabled = true;

        document.getElementById('in_upgrade').value = bought ? 'True' : 'False';

        if (bought) {
            document.getElementById('in_spent').value = CFG.upgradeCost;
            totalBank = CFG.startingBank + CFG.pocketMoney - CFG.upgradeCost;
        } else {
            document.getElementById('in_spent').value = 0;
            totalBank = CFG.startingBank + CFG.pocketMoney;
        }
        document.getElementById('shop-overlay').style.display = 'none';

        gameActive = true;
        initGameEngine();
    };

    /* ═══════════════════════════════════════════
       GAME ENGINE
    ═══════════════════════════════════════════ */
    function initGameEngine() {
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const W = canvas.width, H = canvas.height;

        let timeLeft = CFG.timeLimit;
        document.getElementById('ui-time').textContent = timeLeft;

        const gameSpeed = 1.0 + Math.log(CFG.round) * 0.13;

        /* ── Player ── */
        const player = {
            x: W / 2, y: H - 50,
            size: 13, color: '#40ccff',
            targetX: W / 2, targetY: H - 50,
        };
        const PLAYER_LERP = 0.25;

        /* ── Arrays ── */
        let bullets = [], enemies = [], stars = [], particles = [], pickups = [];
        let danmaku = []; /* enemy bullets — separate array for clarity */

        /* ═══════════════════════════════════════
           COMBO MULTIPLIER SYSTEM
        ═══════════════════════════════════════ */
        let combo = 0;
        let comboTimer = 0;
        const COMBO_DECAY_TIME = 90;  /* frames (~1.5s) before combo resets */
        let comboMultiplier = 1;      /* 1x, 1.5x, 2x, 3x */
        let comboFlashTimer = 0;
        let comboText = '';

        function addCombo() {
            combo++;
            comboTimer = COMBO_DECAY_TIME;
            let oldMult = comboMultiplier;
            if (combo >= 15)     comboMultiplier = 3;
            else if (combo >= 8) comboMultiplier = 2;
            else if (combo >= 4) comboMultiplier = 1.5;
            else                 comboMultiplier = 1;

            if (comboMultiplier > oldMult) {
                comboFlashTimer = 40;
                if (comboMultiplier === 1.5)     comboText = 'COMBO x1.5';
                else if (comboMultiplier === 2)  comboText = 'COMBO x2';
                else if (comboMultiplier === 3)  comboText = 'COMBO x3!';
            }
        }

        function decayCombo(ts) {
            if (combo > 0) {
                comboTimer -= ts;
                if (comboTimer <= 0) {
                    combo = 0;
                    comboMultiplier = 1;
                }
            }
        }

        /* ═══════════════════════════════════════
           POWERUP SYSTEM (no coin effect)
        ═══════════════════════════════════════ */
        /* Active powerup timers */
        let powerFireRate = 0;   /* remaining frames of 2x fire rate */
        let powerSlow = 0;       /* remaining frames of time-slow (enemy bullets slower) */
        let powerShield = 0;     /* remaining frames of shield bubble (immune) */

        /* ═══════════════════════════════════════
           STARFIELD
        ═══════════════════════════════════════ */
        for (let i = 0; i < 60; i++) {
            stars.push({
                x: Math.random() * W,
                y: Math.random() * H,
                speed: Math.random() * 1.5 + 0.5,
                brightness: Math.random() * 0.5 + 0.3
            });
        }

        /* ── Input ── */
        function getScale() {
            const r = canvas.getBoundingClientRect();
            return { x: W / r.width, y: H / r.height };
        }
        canvas.addEventListener('mousemove', (e) => {
            const s = getScale();
            const r = canvas.getBoundingClientRect();
            player.targetX = (e.clientX - r.left) * s.x;
            player.targetY = (e.clientY - r.top) * s.y;
        });
        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const s = getScale();
            const r = canvas.getBoundingClientRect();
            player.targetX = (e.touches[0].clientX - r.left) * s.x;
            player.targetY = (e.touches[0].clientY - r.top) * s.y;
        }, { passive: false });
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            const s = getScale();
            const r = canvas.getBoundingClientRect();
            player.targetX = (e.touches[0].clientX - r.left) * s.x;
            player.targetY = (e.touches[0].clientY - r.top) * s.y;
        }, { passive: false });

        function clampPlayer() {
            const m = player.size + 2;
            player.targetX = Math.max(m, Math.min(W - m, player.targetX));
            player.targetY = Math.max(m, Math.min(H - m, player.targetY));
        }

        /* ═══════════════════════════════════════
           PLAYER SHOOTING — adjusted for combo & powerups
        ═══════════════════════════════════════ */
        let baseCooldown = 160;
        if (hasUpgrade) {
            switch (CFG.weaponType) {
                case 1: baseCooldown = 80; break;   /* Dual: very fast */
                case 2: baseCooldown = 140; break;   /* Spread: moderate */
                case 3: baseCooldown = 55; break;    /* Plasma: rapid pierce */
                case 4: baseCooldown = 200; break;   /* Wave: slow but wide */
                case 5: baseCooldown = 190; break;   /* Homing: slow, auto-aim */
                case 6: baseCooldown = 110; break;   /* Ricochet: moderate */
            }
        }

        let shootAccumulator = 0;

        function firePlayerBullets() {
            const px = player.x, py = player.y;
            /* Combo multiplier: at x2+, bullets deal more damage */
            const dmgBonus = comboMultiplier >= 2 ? 2 : 1;

            if (!hasUpgrade) {
                bullets.push({ x: px, y: py, vx: 0, vy: -8, color: '#aaaacc', type: 'normal', dmg: dmgBonus });
            } else {
                switch (CFG.weaponType) {
                    case 1: /* Dual Laser — fast twin shots */
                        bullets.push({ x: px - 7, y: py, vx: 0, vy: -14, color: '#40ff80', type: 'normal', dmg: dmgBonus });
                        bullets.push({ x: px + 7, y: py, vx: 0, vy: -14, color: '#40ff80', type: 'normal', dmg: dmgBonus });
                        /* At combo x3, add center shot */
                        if (comboMultiplier >= 3) {
                            bullets.push({ x: px, y: py - 4, vx: 0, vy: -16, color: '#80ffb0', type: 'normal', dmg: 1 });
                        }
                        break;
                    case 2: /* Spread Gun — 3-way, combo widens to 5-way */
                        bullets.push({ x: px, y: py, vx: 0, vy: -12, color: '#ffaa30', type: 'normal', dmg: dmgBonus });
                        bullets.push({ x: px, y: py, vx: -3.5, vy: -11, color: '#ffaa30', type: 'normal', dmg: 1 });
                        bullets.push({ x: px, y: py, vx: 3.5, vy: -11, color: '#ffaa30', type: 'normal', dmg: 1 });
                        if (comboMultiplier >= 2) {
                            bullets.push({ x: px, y: py, vx: -6, vy: -9, color: '#ffcc60', type: 'normal', dmg: 1 });
                            bullets.push({ x: px, y: py, vx: 6, vy: -9, color: '#ffcc60', type: 'normal', dmg: 1 });
                        }
                        break;
                    case 3: /* Plasma Beam — piercing */
                        bullets.push({ x: px, y: py, vx: 0, vy: -24, color: '#40ccff', type: 'laser', dmg: dmgBonus });
                        if (comboMultiplier >= 3) {
                            bullets.push({ x: px - 10, y: py, vx: 0, vy: -20, color: '#30aadd', type: 'laser', dmg: 1 });
                            bullets.push({ x: px + 10, y: py, vx: 0, vy: -20, color: '#30aadd', type: 'laser', dmg: 1 });
                        }
                        break;
                    case 4: /* Wave Cannon — 5-bolt arc */
                        for (let a = -2; a <= 2; a++) {
                            bullets.push({ x: px, y: py, vx: a * 4, vy: -13 + Math.abs(a), color: '#ff40ff', type: 'normal', dmg: dmgBonus });
                        }
                        break;
                    case 5: /* Homing Missile */
                        bullets.push({ x: px, y: py, vx: 0, vy: -5, color: '#ff4060', type: 'homing', dmg: 1 + dmgBonus, age: 0 });
                        if (comboMultiplier >= 2) {
                            bullets.push({ x: px - 12, y: py + 5, vx: -2, vy: -4, color: '#ff6080', type: 'homing', dmg: 1, age: 0 });
                        }
                        break;
                    case 6: /* Ricochet Bolt */
                        bullets.push({ x: px, y: py, vx: (Math.random() - 0.5) * 7, vy: -14, color: '#80ff40', type: 'ricochet', dmg: dmgBonus, bounces: 3 });
                        if (comboMultiplier >= 3) {
                            bullets.push({ x: px, y: py, vx: (Math.random() - 0.5) * 8, vy: -12, color: '#a0ff60', type: 'ricochet', dmg: 1, bounces: 2 });
                        }
                        break;
                }
            }
        }

        /* ═══════════════════════════════════════
           ENEMY DANMAKU (弹幕) PATTERNS
           Small enemies: simple, slow, infrequent
           Boss: elaborate multi-pattern
        ═══════════════════════════════════════ */
        const DANMAKU_COLOR = '#ff6633';
        const DANMAKU_COLOR_LITE = '#ffaa66';
        const slowFactor = () => powerSlow > 0 ? 0.35 : 1.0;

        function enemyShoot(e) {
            const sf = slowFactor();
            const bSpd = (1.5 + CFG.round * 0.04) * sf;

            switch (e.type) {
                case 'basic':
                case 'mini':
                    /* Single aimed shot toward player, slow, gentle */
                    if (e.shootTimer > 80 + Math.random() * 40) {
                        e.shootTimer = 0;
                        const ang = Math.atan2(player.y - e.y, player.x - e.x);
                        danmaku.push({
                            x: e.x, y: e.y,
                            vx: Math.cos(ang) * bSpd,
                            vy: Math.sin(ang) * bSpd,
                            size: 3, color: DANMAKU_COLOR_LITE
                        });
                    }
                    break;

                case 'fast':
                    /* Twin parallel shots downward — easy to sidestep */
                    if (e.shootTimer > 60 + Math.random() * 30) {
                        e.shootTimer = 0;
                        danmaku.push({ x: e.x - 5, y: e.y, vx: 0, vy: bSpd * 1.2, size: 2.5, color: '#ff9930' });
                        danmaku.push({ x: e.x + 5, y: e.y, vx: 0, vy: bSpd * 1.2, size: 2.5, color: '#ff9930' });
                    }
                    break;

                case 'tank':
                    /* 3-way spread, slow, telegraphed */
                    if (e.shootTimer > 100 + Math.random() * 30) {
                        e.shootTimer = 0;
                        const baseAng = Math.atan2(player.y - e.y, player.x - e.x);
                        for (let i = -1; i <= 1; i++) {
                            const a = baseAng + i * 0.3;
                            danmaku.push({
                                x: e.x, y: e.y,
                                vx: Math.cos(a) * bSpd * 0.8,
                                vy: Math.sin(a) * bSpd * 0.8,
                                size: 4, color: '#bb60ff'
                            });
                        }
                    }
                    break;

                case 'sine':
                    /* Ring of 4 bullets outward — pretty but easy to weave through */
                    if (e.shootTimer > 90 + Math.random() * 30) {
                        e.shootTimer = 0;
                        for (let i = 0; i < 4; i++) {
                            const a = (i / 4) * Math.PI * 2 + e.age * 0.03;
                            danmaku.push({
                                x: e.x, y: e.y,
                                vx: Math.cos(a) * bSpd * 0.7,
                                vy: Math.sin(a) * bSpd * 0.7,
                                size: 3, color: '#40ffcc'
                            });
                        }
                    }
                    break;

                case 'splitter':
                    /* Aimed burst of 2 */
                    if (e.shootTimer > 70 + Math.random() * 40) {
                        e.shootTimer = 0;
                        const ang = Math.atan2(player.y - e.y, player.x - e.x);
                        for (let i = -1; i <= 1; i += 2) {
                            danmaku.push({
                                x: e.x, y: e.y,
                                vx: Math.cos(ang + i * 0.15) * bSpd,
                                vy: Math.sin(ang + i * 0.15) * bSpd,
                                size: 3, color: '#ff6090'
                            });
                        }
                    }
                    break;

                case 'stealth':
                    /* Single sneaky shot — only when visible */
                    if (e._visible && e.shootTimer > 100 + Math.random() * 50) {
                        e.shootTimer = 0;
                        const ang = Math.atan2(player.y - e.y, player.x - e.x);
                        danmaku.push({
                            x: e.x, y: e.y,
                            vx: Math.cos(ang) * bSpd * 1.1,
                            vy: Math.sin(ang) * bSpd * 1.1,
                            size: 3, color: '#88aacc'
                        });
                    }
                    break;

                case 'boss':
                    bossDanmaku(e, sf);
                    break;
            }
        }

        /* ── Boss danmaku — elaborate multi-phase ── */
        function bossDanmaku(e, sf) {
            const bSpd = (1.8 + CFG.round * 0.03) * sf;
            e.bossPhase = e.bossPhase || 0;
            e.bossPatternTimer = (e.bossPatternTimer || 0);

            /* Phase rotates every ~3 seconds */
            e.bossPhase = Math.floor(e.age / 180) % 3;

            if (e.bossPhase === 0) {
                /* SPIRAL: rotating stream of bullets */
                if (e.shootTimer > 8) {
                    e.shootTimer = 0;
                    const a = e.age * 0.07;
                    danmaku.push({
                        x: e.x, y: e.y + e.size * 0.5,
                        vx: Math.cos(a) * bSpd,
                        vy: Math.sin(a) * bSpd * 0.6 + bSpd * 0.5,
                        size: 3.5, color: '#ff4020'
                    });
                    /* Mirror spiral */
                    danmaku.push({
                        x: e.x, y: e.y + e.size * 0.5,
                        vx: Math.cos(a + Math.PI) * bSpd,
                        vy: Math.sin(a + Math.PI) * bSpd * 0.6 + bSpd * 0.5,
                        size: 3.5, color: '#ff8800'
                    });
                }
            } else if (e.bossPhase === 1) {
                /* RADIAL BURST: periodic ring of bullets */
                if (e.shootTimer > 35) {
                    e.shootTimer = 0;
                    const count = 8 + Math.floor(CFG.round / 8);
                    const offset = e.age * 0.02;
                    for (let i = 0; i < count; i++) {
                        const a = (i / count) * Math.PI * 2 + offset;
                        danmaku.push({
                            x: e.x, y: e.y,
                            vx: Math.cos(a) * bSpd * 0.75,
                            vy: Math.sin(a) * bSpd * 0.75,
                            size: 3.5, color: '#ff2040'
                        });
                    }
                }
            } else {
                /* AIMED SHOTGUN: fan of bullets toward player */
                if (e.shootTimer > 28) {
                    e.shootTimer = 0;
                    const baseAng = Math.atan2(player.y - e.y, player.x - e.x);
                    const count = 5;
                    const spread = 0.5;
                    for (let i = 0; i < count; i++) {
                        const a = baseAng - spread / 2 + (i / (count - 1)) * spread;
                        danmaku.push({
                            x: e.x, y: e.y + e.size * 0.5,
                            vx: Math.cos(a) * bSpd,
                            vy: Math.sin(a) * bSpd,
                            size: 3, color: '#ffaa00'
                        });
                    }
                }
            }
        }

        /* ═══════════════════════════════════════
           ENEMY SPAWNING
        ═══════════════════════════════════════ */
        const baseSpawnInterval = Math.max(32, 65 - CFG.round * 1.0);
        let spawnTimer = 0;
        const activeEnemyTypes = CFG.enemyTypes.map(s => s.trim());

        function spawnEnemy() {
            const type = activeEnemyTypes[Math.floor(Math.random() * activeEnemyTypes.length)];
            let eSize = 13, eSpeed = 1.3 + Math.sqrt(CFG.round) * 0.22, eHp = 1, eColor = '#ff4444', eBehavior = 'straight';

            switch (type) {
                case 'fast':
                    eSpeed *= 1.6; eColor = '#ff9930'; eSize = 10; break;
                case 'tank':
                    eSpeed *= 0.55; eColor = '#bb40ff'; eSize = 20; eHp = 3; break;
                case 'sine':
                    eColor = '#40ffcc'; eBehavior = 'sine'; break;
                case 'splitter':
                    eColor = '#ff6090'; eSize = 16; eHp = 2; break;
                case 'stealth':
                    eColor = '#6688aa'; eBehavior = 'stealth'; eSpeed *= 0.9; break;
            }

            enemies.push({
                x: Math.random() * (W - eSize * 4) + eSize * 2,
                y: -25,
                size: eSize,
                speed: eSpeed,
                hp: eHp,
                maxHp: eHp,
                color: eColor,
                behavior: eBehavior,
                startX: 0,
                type: type || 'basic',
                age: 0,
                shootTimer: Math.random() * 40, /* stagger first shots */
            });
            enemies[enemies.length - 1].startX = enemies[enemies.length - 1].x;
        }

        let bossSpawned = false;
        function spawnBoss() {
            const bossHp = 10 + Math.floor(CFG.round * 0.5);
            enemies.push({
                x: W / 2, y: -50,
                size: 40,
                speed: 0.4 + CFG.round * 0.02,
                hp: bossHp, maxHp: bossHp,
                color: '#ff2020',
                behavior: 'boss',
                startX: W / 2,
                type: 'boss',
                age: 0,
                shootTimer: 0,
                bossPhase: 0,
                bossPatternTimer: 0,
            });
            bossSpawned = true;
        }

        /* ── Timer ── */
        const timerInterval = setInterval(() => {
            if (!gameActive) return;
            timeLeft--;
            document.getElementById('ui-time').textContent = Math.max(0, timeLeft);
            if (timeLeft <= 0) endGame(true);
        }, 1000);

        /* ── Damage ── */
        function takeDamage(amount) {
            if (!gameActive) return;
            if (powerShield > 0) {
                /* Shield bubble absorbs hit */
                powerShield = 0;
                screenFlash = 4;
                explode(player.x, player.y, '#40ddff', 10);
                return;
            }
            const dmg = amount || 1;
            hpLost += dmg;
            currentHP -= dmg;
            /* Getting hit breaks combo */
            combo = 0; comboMultiplier = 1; comboTimer = 0;
            document.getElementById('ui-hp').textContent = Math.max(0, currentHP);
            if (currentHP <= 2) document.getElementById('hp-display').classList.add('critical');
            screenFlash = 8;
            if (currentHP <= 0) endGame(false);
        }

        let screenFlash = 0;

        /* ── Particles ── */
        function explode(x, y, color, count) {
            count = count || 6;
            for (let i = 0; i < count; i++) {
                particles.push({
                    x: x, y: y,
                    vx: (Math.random() - 0.5) * 8,
                    vy: (Math.random() - 0.5) * 8,
                    life: 1.0,
                    color: color,
                    size: Math.random() * 3 + 1,
                });
            }
        }

        /* ── End Game ── */
        function endGame(survived) {
            gameActive = false;
            clearInterval(timerInterval);
            document.getElementById('in_hp').value = hpLost;
            showEndSplash(survived);
        }

        function showEndSplash(survived) {
            ctx.fillStyle = "rgba(5,5,15,0.88)";
            ctx.fillRect(0, 0, W, H);
            ctx.textAlign = "center";
            ctx.font = "bold 20px 'Press Start 2P', monospace";
            ctx.fillStyle = survived ? "#40dd80" : "#ff4444";
            ctx.fillText(survived ? "WAVE CLEAR" : "SHIELD DESTROYED", W / 2, H / 2 - 5);
            ctx.font = "12px 'Share Tech Mono', monospace";
            ctx.fillStyle = "#555577";
            ctx.fillText("Proceeding...", W / 2, H / 2 + 25);
            setTimeout(() => { document.forms[0].submit(); }, 1600);
        }

        /* ═══════════════════════════════════════
           POWERUP SPAWN — on enemy death
        ═══════════════════════════════════════ */
        function trySpawnPickup(x, y, enemyType) {
            if (enemyType === 'boss_bullet' || enemyType === 'mini') return;

            const roll = Math.random();

            if (roll < 0.08 && currentHP < maxHP) {
                /* Shield restore (green cross) — 8% */
                pickups.push({ x, y, vy: 1.5, type: 'shield', life: 140, color: '#40ff80' });
            } else if (roll < 0.14) {
                /* Fire rate boost (orange bolt) — 6% */
                pickups.push({ x, y, vy: 1.3, type: 'firerate', life: 140, color: '#ffaa30' });
            } else if (roll < 0.19) {
                /* Time slow (blue diamond) — 5% */
                pickups.push({ x, y, vy: 1.3, type: 'slow', life: 140, color: '#40ccff' });
            } else if (roll < 0.23) {
                /* Shield bubble (cyan circle) — 4% */
                pickups.push({ x, y, vy: 1.3, type: 'bubble', life: 140, color: '#40ddff' });
            }
        }

        /* ═══════════════════════════════════════
           MAIN LOOP
        ═══════════════════════════════════════ */
        let lastTime = performance.now();

        function gameLoop(now) {
            if (!gameActive) return;
            if (!now) now = performance.now();

            let dt = now - lastTime;
            lastTime = now;
            if (dt > 100) dt = 16.66;
            const ts = (dt / 16.666) * gameSpeed;

            /* ── Powerup timers ── */
            if (powerFireRate > 0) powerFireRate -= ts;
            if (powerSlow > 0) powerSlow -= ts;
            if (powerShield > 0) powerShield -= ts;

            /* ── Shooting accumulator ── */
            const effectiveCooldown = (baseCooldown / gameSpeed) * (powerFireRate > 0 ? 0.5 : 1.0);
            shootAccumulator += dt;
            while (shootAccumulator >= effectiveCooldown) {
                shootAccumulator -= effectiveCooldown;
                firePlayerBullets();
            }

            /* ── Clear ── */
            ctx.fillStyle = '#050510';
            ctx.fillRect(0, 0, W, H);

            /* ── Screen flash ── */
            if (screenFlash > 0) {
                ctx.fillStyle = "rgba(255,30,30," + (screenFlash * 0.05) + ")";
                ctx.fillRect(0, 0, W, H);
                screenFlash -= ts;
            }

            /* ── Stars ── */
            for (const s of stars) {
                s.y += s.speed * ts;
                if (s.y > H) { s.y = 0; s.x = Math.random() * W; }
                ctx.globalAlpha = s.brightness;
                ctx.fillStyle = '#8888bb';
                ctx.fillRect(s.x, s.y, 1.5, 1.5);
            }
            ctx.globalAlpha = 1;

            /* ── Player position ── */
            clampPlayer();
            player.x += (player.targetX - player.x) * PLAYER_LERP;
            player.y += (player.targetY - player.y) * PLAYER_LERP;

            /* ── Spawn enemies ── */
            if (IS_BOSS_ROUND && !bossSpawned && timeLeft <= CFG.timeLimit - 1) {
                spawnBoss();
            }
            spawnTimer += ts;
            if (spawnTimer >= baseSpawnInterval) {
                spawnTimer = 0;
                spawnEnemy();
            }

            /* ── Particles ── */
            for (let i = particles.length - 1; i >= 0; i--) {
                const p = particles[i];
                p.x += p.vx * ts;
                p.y += p.vy * ts;
                p.life -= 0.04 * ts;
                if (p.life <= 0) { particles.splice(i, 1); continue; }
                ctx.globalAlpha = p.life;
                ctx.fillStyle = p.color;
                ctx.fillRect(p.x, p.y, p.size, p.size);
            }
            ctx.globalAlpha = 1;

            /* ── Player bullets ── */
            for (let i = bullets.length - 1; i >= 0; i--) {
                const b = bullets[i];

                if (b.type === 'homing') {
                    b.age += ts;
                    let nearest = null, nearDist = Infinity;
                    for (const e of enemies) {
                        const d = Math.hypot(e.x - b.x, e.y - b.y);
                        if (d < nearDist) { nearDist = d; nearest = e; }
                    }
                    if (nearest && b.age > 5) {
                        const ang = Math.atan2(nearest.y - b.y, nearest.x - b.x);
                        b.vx += Math.cos(ang) * 0.8;
                        b.vy += Math.sin(ang) * 0.8;
                        const cur = Math.hypot(b.vx, b.vy);
                        const spd = 10;
                        if (cur > spd) { b.vx *= spd / cur; b.vy *= spd / cur; }
                    }
                }

                b.x += b.vx * ts;
                b.y += b.vy * ts;

                if (b.type === 'ricochet') {
                    if (b.x < 4 || b.x > W - 4) { b.vx *= -1; b.bounces--; if (b.bounces < 0) { bullets.splice(i, 1); continue; } }
                    if (b.y < 4) { b.vy *= -1; b.bounces--; if (b.bounces < 0) { bullets.splice(i, 1); continue; } }
                }

                if (b.y < -30 || b.y > H + 30 || b.x < -30 || b.x > W + 30) { bullets.splice(i, 1); continue; }

                ctx.fillStyle = b.color;
                if (b.type === 'laser') {
                    ctx.fillRect(b.x - 2, b.y, 4, 28);
                    ctx.globalAlpha = 0.3;
                    ctx.fillRect(b.x - 5, b.y + 2, 10, 24);
                    ctx.globalAlpha = 1;
                } else if (b.type === 'homing') {
                    ctx.beginPath();
                    ctx.arc(b.x, b.y, 3, 0, Math.PI * 2);
                    ctx.fill();
                    explode(b.x, b.y, b.color, 1);
                } else {
                    ctx.fillRect(b.x - 2, b.y - 2, 4, 5);
                }
            }

            /* ═══════════════════════════════════
               DANMAKU (enemy bullets)
            ═══════════════════════════════════ */
            for (let i = danmaku.length - 1; i >= 0; i--) {
                const d = danmaku[i];
                d.x += d.vx * ts;
                d.y += d.vy * ts;

                /* Off-screen */
                if (d.y < -20 || d.y > H + 20 || d.x < -20 || d.x > W + 20) {
                    danmaku.splice(i, 1); continue;
                }

                /* Draw — small glowing circle */
                ctx.beginPath();
                ctx.arc(d.x, d.y, d.size, 0, Math.PI * 2);
                ctx.fillStyle = d.color;
                ctx.fill();
                ctx.globalAlpha = 0.3;
                ctx.beginPath();
                ctx.arc(d.x, d.y, d.size + 2, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1;

                /* Hit player */
                if (Math.hypot(d.x - player.x, d.y - player.y) < d.size + player.size * 0.7) {
                    takeDamage(1);
                    explode(player.x, player.y, '#ff6633', 6);
                    danmaku.splice(i, 1);
                }
            }

            /* ═══════════════════════════════════
               ENEMIES
            ═══════════════════════════════════ */
            for (let i = enemies.length - 1; i >= 0; i--) {
                const e = enemies[i];
                e.age += ts;
                e.shootTimer = (e.shootTimer || 0) + ts;
                e.y += e.speed * ts;

                if (e.behavior === 'sine') {
                    e.x = e.startX + Math.sin(e.y / 28) * 55;
                } else if (e.behavior === 'stealth') {
                    e._visible = Math.sin(e.age * 0.08) > -0.3;
                } else if (e.behavior === 'boss') {
                    e.x = W / 2 + Math.sin(e.age * 0.02) * (W * 0.3);
                    e.y = Math.min(e.y, 70);
                }

                /* All enemies shoot danmaku */
                if (e.type !== 'boss_bullet') {
                    enemyShoot(e);
                }

                /* Off bottom */
                if (e.y - e.size > H) {
                    if (e.type !== 'boss') takeDamage(1);
                    enemies.splice(i, 1);
                    continue;
                }

                /* Draw enemy */
                const isVisible = e.behavior !== 'stealth' || e._visible !== false;
                if (isVisible) {
                    ctx.fillStyle = e.color;
                    if (e.type === 'boss') {
                        ctx.beginPath();
                        for (let a = 0; a < 6; a++) {
                            const ang = (a / 6) * Math.PI * 2 - Math.PI / 2;
                            const px = e.x + Math.cos(ang) * e.size;
                            const py = e.y + Math.sin(ang) * e.size;
                            a === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);
                        }
                        ctx.closePath();
                        ctx.fill();
                        ctx.strokeStyle = '#ff6600';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        /* Boss HP bar */
                        const barW = e.size * 2.5;
                        ctx.fillStyle = '#220000';
                        ctx.fillRect(e.x - barW / 2, e.y - e.size - 12, barW, 5);
                        ctx.fillStyle = '#ff2020';
                        ctx.fillRect(e.x - barW / 2, e.y - e.size - 12, barW * (e.hp / e.maxHp), 5);
                    } else {
                        /* Draw diamond shape for danmaku-shooting enemies */
                        ctx.save();
                        ctx.translate(e.x, e.y);
                        ctx.rotate(Math.PI / 4);
                        ctx.fillRect(-e.size * 0.7, -e.size * 0.7, e.size * 1.4, e.size * 1.4);
                        ctx.restore();
                        if (e.maxHp > 1) {
                            ctx.fillStyle = '#220022';
                            ctx.fillRect(e.x - e.size, e.y - e.size - 7, e.size * 2, 3);
                            ctx.fillStyle = e.color;
                            ctx.fillRect(e.x - e.size, e.y - e.size - 7, (e.size * 2) * (e.hp / e.maxHp), 3);
                        }
                    }
                }

                /* Player-enemy collision */
                if (Math.abs(e.x - player.x) < e.size + player.size &&
                    Math.abs(e.y - player.y) < e.size + player.size) {
                    takeDamage(e.type === 'boss' ? 2 : 1);
                    explode(player.x, player.y, player.color, 8);
                    if (e.type !== 'boss') { enemies.splice(i, 1); }
                    continue;
                }

                /* Bullet-enemy collision */
                for (let j = bullets.length - 1; j >= 0; j--) {
                    const b = bullets[j];
                    const hitDist = e.type === 'boss' ? e.size + 6 : e.size + 4;
                    if (Math.abs(e.x - b.x) < hitDist && Math.abs(e.y - b.y) < hitDist) {
                        e.hp -= b.dmg;
                        explode(e.x, e.y, b.color, 2);
                        if (b.type !== 'laser') { bullets.splice(j, 1); }
                        break;
                    }
                }

                /* Enemy death */
                if (e.hp <= 0) {
                    enemiesDestroyed++;
                    explode(e.x, e.y, e.color, e.type === 'boss' ? 20 : 6);

                    /* Combo */
                    addCombo();

                    /* Powerup drop */
                    trySpawnPickup(e.x, e.y, e.type);

                    /* Splitter spawns minis */
                    if (e.type === 'splitter') {
                        for (let s = -1; s <= 1; s += 2) {
                            enemies.push({
                                x: e.x + s * 15, y: e.y,
                                size: 7, speed: e.speed * 1.2,
                                hp: 1, maxHp: 1,
                                color: '#ff90b0', behavior: 'straight',
                                startX: e.x + s * 15, type: 'mini', age: 0,
                                shootTimer: Math.random() * 60,
                            });
                        }
                    }
                    enemies.splice(i, 1);
                }
            }

            /* ═══════════════════════════════════
               PICKUPS — draw & collect
            ═══════════════════════════════════ */
            for (let i = pickups.length - 1; i >= 0; i--) {
                const pk = pickups[i];
                pk.y += pk.vy * ts;
                pk.life -= ts;
                if (pk.life <= 0 || pk.y > H) { pickups.splice(i, 1); continue; }

                const pulse = 0.6 + Math.sin(pk.life * 0.2) * 0.3;
                ctx.globalAlpha = pulse;
                ctx.fillStyle = pk.color;

                if (pk.type === 'shield') {
                    /* Green cross */
                    ctx.fillRect(pk.x - 2, pk.y - 6, 4, 12);
                    ctx.fillRect(pk.x - 6, pk.y - 2, 12, 4);
                } else if (pk.type === 'firerate') {
                    /* Orange bolt — arrow shape */
                    ctx.beginPath();
                    ctx.moveTo(pk.x, pk.y - 7);
                    ctx.lineTo(pk.x + 5, pk.y);
                    ctx.lineTo(pk.x + 2, pk.y);
                    ctx.lineTo(pk.x + 2, pk.y + 7);
                    ctx.lineTo(pk.x - 2, pk.y + 7);
                    ctx.lineTo(pk.x - 2, pk.y);
                    ctx.lineTo(pk.x - 5, pk.y);
                    ctx.closePath();
                    ctx.fill();
                } else if (pk.type === 'slow') {
                    /* Blue diamond */
                    ctx.save();
                    ctx.translate(pk.x, pk.y);
                    ctx.rotate(Math.PI / 4);
                    ctx.fillRect(-5, -5, 10, 10);
                    ctx.restore();
                } else if (pk.type === 'bubble') {
                    /* Cyan circle outline */
                    ctx.beginPath();
                    ctx.arc(pk.x, pk.y, 6, 0, Math.PI * 2);
                    ctx.strokeStyle = pk.color;
                    ctx.lineWidth = 2;
                    ctx.stroke();
                }
                ctx.globalAlpha = 1;

                /* Collect */
                if (Math.abs(pk.x - player.x) < 20 && Math.abs(pk.y - player.y) < 20) {
                    explode(pk.x, pk.y, pk.color, 8);
                    switch (pk.type) {
                        case 'shield':
                            currentHP = Math.min(maxHP, currentHP + 1);
                            document.getElementById('ui-hp').textContent = currentHP;
                            if (currentHP > 2) document.getElementById('hp-display').classList.remove('critical');
                            break;
                        case 'firerate':
                            powerFireRate = 300; /* ~5 seconds */
                            break;
                        case 'slow':
                            powerSlow = 360; /* ~6 seconds */
                            break;
                        case 'bubble':
                            powerShield = 240; /* ~4 seconds, absorbs 1 hit */
                            break;
                    }
                    pickups.splice(i, 1);
                }
            }

            /* ── Combo decay ── */
            decayCombo(ts);

            /* ── Combo flash text ── */
            if (comboFlashTimer > 0) {
                comboFlashTimer -= ts;
                ctx.textAlign = 'center';
                ctx.font = "bold 14px 'Press Start 2P', monospace";
                ctx.globalAlpha = Math.min(1, comboFlashTimer / 12);
                const yOff = (40 - comboFlashTimer) * 0.6;
                ctx.fillStyle = '#f0c040';
                ctx.fillText(comboText, W / 2, H / 2 - 50 - yOff);
                ctx.globalAlpha = 1;
            }

            /* ── Active powerup indicators (bottom-left) ── */
            let piY = H - 16;
            ctx.font = "9px 'Share Tech Mono', monospace";
            ctx.textAlign = 'left';
            if (powerFireRate > 0) {
                ctx.fillStyle = '#ffaa30';
                ctx.globalAlpha = 0.8;
                ctx.fillText('◆ RAPID FIRE', 8, piY);
                piY -= 14;
            }
            if (powerSlow > 0) {
                ctx.fillStyle = '#40ccff';
                ctx.globalAlpha = 0.8;
                ctx.fillText('◆ TIME SLOW', 8, piY);
                piY -= 14;
            }
            if (powerShield > 0) {
                ctx.fillStyle = '#40ddff';
                ctx.globalAlpha = 0.8;
                ctx.fillText('◆ SHIELD', 8, piY);
            }
            ctx.globalAlpha = 1;

            /* ── Player ── */
            ctx.fillStyle = player.color;
            ctx.beginPath();
            ctx.moveTo(player.x, player.y - player.size);
            ctx.lineTo(player.x - player.size, player.y + player.size);
            ctx.lineTo(player.x + player.size, player.y + player.size);
            ctx.closePath();
            ctx.fill();

            /* Shield bubble visual */
            if (powerShield > 0) {
                ctx.strokeStyle = '#40ddff';
                ctx.lineWidth = 1.5;
                ctx.globalAlpha = 0.4 + Math.sin(now * 0.008) * 0.2;
                ctx.beginPath();
                ctx.arc(player.x, player.y, player.size + 8, 0, Math.PI * 2);
                ctx.stroke();
                ctx.globalAlpha = 1;
            }

            /* Engine glow */
            ctx.fillStyle = hasUpgrade ? WEAPON_INFO[CFG.weaponType].color : '#4466aa';
            ctx.globalAlpha = 0.4 + Math.random() * 0.3;
            ctx.fillRect(player.x - 4, player.y + player.size, 8, 6 + Math.random() * 4);
            ctx.globalAlpha = 1;

            /* Combo glow aura around player at high combo */
            if (comboMultiplier >= 2) {
                ctx.strokeStyle = comboMultiplier >= 3 ? '#f0c040' : '#f0c04066';
                ctx.lineWidth = comboMultiplier >= 3 ? 2 : 1;
                ctx.globalAlpha = 0.2 + Math.sin(now * 0.006) * 0.15;
                ctx.beginPath();
                ctx.arc(player.x, player.y, player.size + 14, 0, Math.PI * 2);
                ctx.stroke();
                ctx.globalAlpha = 1;
            }

            if (gameActive) requestAnimationFrame(gameLoop);
        }

        requestAnimationFrame(gameLoop);
    }

})();
</script>

{{ endblock }}