<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English Hero: Tournament Arena</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;900&display=swap');
        
        :root {
            --accent: #6366f1;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: #020617;
            color: #f8fafc;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .bg-dynamic {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover;
            background-position: center;
            transition: background-image 1.2s ease-in-out;
            filter: brightness(0.2) contrast(1.2);
        }

        .glass {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .heartbeat-timer {
            animation: heart-pulse 0.5s infinite;
        }

        @keyframes heart-pulse {
            0% { transform: scale(1); color: #fff; }
            50% { transform: scale(1.15); color: #ef4444; text-shadow: 0 0 20px #ef4444; }
            100% { transform: scale(1); color: #fff; }
        }

        .monster-float {
            animation: float 4s infinite ease-in-out;
            filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.4));
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .option-btn {
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .option-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.02) translateX(10px);
            border-color: white;
        }

        .eliminated {
            opacity: 0.2;
            filter: grayscale(1);
            pointer-events: none;
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center p-6">

    <!-- Background -->
    <div id="main-bg" class="bg-dynamic" style="background-image: url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?q=80&w=1920&auto=format&fit=crop')"></div>

    <!-- UI Header -->
    <div id="game-ui-header" class="hidden w-full max-w-6xl z-10 flex justify-between items-end mb-8">
        <div>
            <h1 id="stage-text" class="text-5xl font-black uppercase italic tracking-tighter">Round 1: Qualifying</h1>
            <p class="text-indigo-400 font-bold tracking-[0.3em] text-xs uppercase mt-2">English Hero Tournament Arena</p>
        </div>
        <div class="glass px-10 py-4 rounded-3xl border-b-4 border-indigo-500 text-right">
            <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Question Progress</span>
            <p id="q-count" class="text-2xl font-black italic">01 / 12</p>
        </div>
    </div>

    <!-- Scoreboard -->
    <div id="scoreboard" class="hidden w-full max-w-6xl z-10 grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8"></div>

    <!-- Main Arena -->
    <main id="game-container" class="w-full max-w-6xl glass rounded-[4rem] p-12 relative z-10 min-h-[600px] flex flex-col justify-center border border-white/10">
        
        <!-- Welcome Screen -->
        <div id="start-screen" class="text-center">
            <h2 class="text-9xl font-black mb-6 uppercase italic tracking-tighter leading-none">
                ENGLISH<br><span class="text-indigo-500">HERO</span>
            </h2>
            <p class="text-gray-400 text-xl mb-12 italic font-light tracking-widest uppercase">Master Must, Mustn't, & Should</p>
            <button onclick="startGame()" class="bg-white text-black font-black py-8 px-24 rounded-full text-3xl hover:scale-110 active:scale-95 transition-all shadow-2xl uppercase">
                Enter Arena
            </button>
        </div>

        <!-- Gameplay Screen -->
        <div id="play-screen" class="hidden grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
            <!-- Monster Side -->
            <div class="lg:col-span-4 text-center">
                <div id="monster-icon" class="text-[10rem] mb-8 monster-float">👺</div>
                <div class="w-full bg-white/5 rounded-full h-5 mb-10 overflow-hidden p-1 border border-white/10">
                    <div id="monster-hp" class="h-full bg-gradient-to-r from-red-600 via-indigo-600 to-blue-600 transition-all duration-1000 rounded-full" style="width: 100%"></div>
                </div>
                <div class="glass p-10 rounded-[3rem]">
                    <p class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Timer</p>
                    <div id="timer-text" class="text-8xl font-black italic">15</div>
                </div>
            </div>

            <!-- Question Side -->
            <div class="lg:col-span-8">
                <div class="mb-10">
                    <span id="q-cat" class="inline-block px-5 py-2 rounded-xl bg-indigo-600/20 text-indigo-400 text-xs font-black uppercase mb-6 italic border border-indigo-500/30">Category</span>
                    <h3 id="q-content" class="text-4xl font-bold leading-tight italic">Loading Challenge...</h3>
                </div>
                <div id="options-grid" class="grid grid-cols-1 md:grid-cols-2 gap-5"></div>
                
                <div class="mt-14 pt-10 border-t border-white/10 flex justify-between items-center">
                    <div class="flex items-center gap-5">
                        <div id="team-dot" class="w-5 h-16 rounded-full"></div>
                        <div>
                            <p class="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Current Turn</p>
                            <p id="active-team-display" class="text-3xl font-black uppercase italic"></p>
                        </div>
                    </div>
                    <div id="hit-feedback" class="text-3xl font-black italic uppercase tracking-tighter"></div>
                </div>
            </div>
        </div>

        <!-- Result Screen -->
        <div id="status-screen" class="hidden text-center">
            <h2 id="status-title" class="text-8xl font-black mb-6 uppercase italic">Round Over</h2>
            <p id="status-msg" class="text-3xl text-red-500 mb-16 font-bold uppercase italic"></p>
            <button id="status-btn" class="bg-indigo-600 py-6 px-20 rounded-full font-black text-2xl hover:bg-indigo-500 shadow-xl transition-all uppercase"></button>
        </div>
    </main>

    <script>
        // --- AUDIO ENGINE ---
        const audio = new (window.AudioContext || window.webkitAudioContext)();
        
        function playSfx(freq, type, dur, vol = 0.2) {
            const osc = audio.createOscillator();
            const gain = audio.createGain();
            osc.type = type;
            osc.frequency.setValueAtTime(freq, audio.currentTime);
            gain.gain.setValueAtTime(vol, audio.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + dur);
            osc.connect(gain);
            gain.connect(audio.destination);
            osc.start();
            osc.stop(audio.currentTime + dur);
        }

        const SFX = {
            tick: () => playSfx(800, 'sine', 0.1, 0.05),
            heartbeat: () => {
                playSfx(60, 'sine', 0.4, 0.7); 
                setTimeout(() => playSfx(50, 'sine', 0.4, 0.5), 150);
            },
            correct: () => {
                [523, 659, 783].forEach((f, i) => setTimeout(() => playSfx(f, 'triangle', 0.5, 0.1), i * 100));
            },
            wrong: () => playSfx(110, 'sawtooth', 0.8, 0.15)
        };

        // --- GAME DATA ---
        const teams = [
            { id: 0, name: "Red Dragon", score: 0, lives: 2, color: "#ef4444", eliminated: false },
            { id: 1, name: "Blue Kraken", score: 0, lives: 2, color: "#3b82f6", eliminated: false },
            { id: 2, name: "Green Hydra", score: 0, lives: 2, color: "#22c55e", eliminated: false },
            { id: 3, name: "Gold Phoenix", score: 0, lives: 2, color: "#eab308", eliminated: false }
        ];

        // Sebalanced set of questions (Answers are mixed now)
        const quizData = {
            part1: [
                { q: "You ... pay the taxes on time.", o: ["must", "mustn't", "shouldn't", "can"], a: 0, c: "Obligation" },
                { q: "Drivers ... stop when the traffic light is red.", o: ["should", "must", "may", "can"], a: 1, c: "Obligation" },
                { q: "To graduate, students ... pass all final exams.", o: ["might", "should", "must", "could"], a: 2, c: "Obligation" },
                { q: "In a library, you ... keep silence.", o: ["can", "may", "shouldn't", "must"], a: 3, c: "Obligation" },
                { q: "You ... park your car in front of the fire exit.", o: ["mustn't", "should", "must", "can"], a: 0, c: "Prohibition" },
                { q: "Visitors ... feed the animals in the zoo.", o: ["should", "mustn't", "can", "must"], a: 1, c: "Prohibition" },
                { q: "You ... use your phone during the flight takeoff.", o: ["may", "should", "mustn't", "might"], a: 2, c: "Prohibition" },
                { q: "People ... walk on the grass in this park.", o: ["can", "should", "must", "mustn't"], a: 3, c: "Prohibition" },
                { q: "You look tired. You ... go to bed early tonight.", o: ["should", "mustn't", "must", "can"], a: 0, c: "Advice" },
                { q: "If you want to be healthy, you ... eat more vegetables.", o: ["must", "should", "can", "mustn't"], a: 1, c: "Advice" },
                { q: "You ... be more careful when using a sharp knife.", o: ["must", "mustn't", "should", "shall"], a: 2, c: "Advice" },
                { q: "I think you ... apologize for what you said.", o: ["must", "can't", "mustn't", "should"], a: 3, c: "Advice" }
            ],
            part2: [
                { q: "To stay safe, everyone ... wear a helmet while riding a bike.", o: ["must", "should", "can", "may"], a: 0, c: "Obligation" },
                { q: "You ... drink that water! It's polluted.", o: ["should", "must not", "must", "can"], a: 1, c: "Prohibition" },
                { q: "It's raining. You ... take an umbrella with you.", o: ["must", "can't", "should", "mustn't"], a: 2, c: "Advice" },
                { q: "Soldiers ... follow the orders of their commander.", o: ["may", "could", "should", "must"], a: 3, c: "Obligation" },
                { q: "You ... be late for your own wedding!", o: ["mustn't", "should", "can", "must"], a: 0, c: "Prohibition" },
                { q: "I think we ... save some money for the future.", o: ["must", "should", "mustn't", "can't"], a: 1, c: "Advice" }
            ],
            part3: [
                { q: "All passengers ... show their tickets before boarding.", o: ["should", "could", "must", "may"], a: 2, c: "Obligation" },
                { q: "You ... tell anyone my secret! Promise me.", o: ["must not", "should", "can", "might"], a: 0, c: "Prohibition" },
                { q: "You have a high fever. You ... see a doctor immediately.", o: ["mustn't", "can", "may", "should"], a: 3, c: "Advice" }
            ]
        };

        const imageTheme = {
            "Obligation": "1450107567758-204b6f273291",
            "Prohibition": "1532938911079-1b06ac7ceec7",
            "Advice": "1516321318423-fdd9f8573c89",
            "Default": "1534796636912-3b95b3ab5986"
        };

        let state = {
            part: 1,
            turn: 0,
            qIdx: 0,
            hp: 100,
            timer: 15,
            interval: null,
            active: false,
            currentQuestions: []
        };

        function startGame() {
            if (audio.state === 'suspended') audio.resume();
            document.getElementById('start-screen').classList.add('hidden');
            document.getElementById('game-ui-header').classList.remove('hidden');
            document.getElementById('scoreboard').classList.remove('hidden');
            document.getElementById('play-screen').classList.remove('hidden');
            renderScoreboard();
            initPart();
        }

        function renderScoreboard() {
            const sb = document.getElementById('scoreboard');
            sb.innerHTML = '';
            teams.forEach((t, i) => {
                const card = document.createElement('div');
                card.className = `glass p-5 rounded-[2rem] border-l-8 transition-all ${t.eliminated ? 'eliminated' : ''}`;
                card.style.borderLeftColor = t.color;
                card.innerHTML = `
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-[10px] font-black uppercase mb-1" style="color: ${t.color}">${t.name}</p>
                            <p class="text-3xl font-black italic">${t.score}</p>
                        </div>
                        <div class="text-xl">${"❤️".repeat(Math.max(0, t.lives))}</div>
                    </div>`;
                sb.appendChild(card);
            });
        }

        function initPart() {
            state.qIdx = 0;
            state.hp = 100;
            state.currentQuestions = [...quizData[`part${state.part}`]].sort(() => Math.random() - 0.5);
            document.getElementById('stage-text').innerText = `Round ${state.part}: ${['','Qualifying','Semi-Final','Grand Final'][state.part]}`;
            loadQuestion();
        }

        function loadQuestion() {
            if (state.qIdx >= state.currentQuestions.length || state.hp <= 0) {
                endPart();
                return;
            }

            const q = state.currentQuestions[state.qIdx];
            const imgId = imageTheme[q.c] || imageTheme.Default;
            document.getElementById('main-bg').style.backgroundImage = `url('https://images.unsplash.com/photo-${imgId}?q=80&w=1920&auto=format&fit=crop')`;
            
            document.getElementById('q-cat').innerText = q.c;
            document.getElementById('q-content').innerText = q.q;
            document.getElementById('q-count').innerText = `${String(state.qIdx + 1).padStart(2,'0')} / ${state.currentQuestions.length}`;
            
            const curTeam = teams[state.turn];
            document.getElementById('active-team-display').innerText = curTeam.name;
            document.getElementById('active-team-display').style.color = curTeam.color;
            document.getElementById('team-dot').style.backgroundColor = curTeam.color;

            const grid = document.getElementById('options-grid');
            grid.innerHTML = '';
            q.o.forEach((opt, i) => {
                const btn = document.createElement('button');
                btn.className = "option-btn p-8 rounded-3xl text-left font-bold text-xl flex items-center gap-5";
                btn.innerHTML = `<span class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center text-xs font-black">${String.fromCharCode(65+i)}</span> ${opt}`;
                btn.onclick = () => handleAnswer(i === q.a, btn);
                grid.appendChild(btn);
            });

            state.active = true;
            state.timer = 15;
            runTimer();
        }

        function runTimer() {
            const display = document.getElementById('timer-text');
            display.innerText = state.timer;
            display.classList.remove('heartbeat-timer');
            clearInterval(state.interval);
            
            state.interval = setInterval(() => {
                state.timer--;
                display.innerText = state.timer;

                if (state.timer <= 5 && state.timer > 0) {
                    display.classList.add('heartbeat-timer');
                    SFX.heartbeat();
                } else if (state.timer > 5) {
                    SFX.tick();
                }

                if (state.timer <= 0) {
                    clearInterval(state.interval);
                    handleFail("TIME'S UP!");
                }
            }, 1000);
        }

        function handleAnswer(correct, btn) {
            if (!state.active) return;
            state.active = false;
            clearInterval(state.interval);

            const fb = document.getElementById('hit-feedback');
            if (correct) {
                SFX.correct();
                teams[state.turn].score += (10 + state.timer);
                state.hp -= (100 / state.currentQuestions.length);
                btn.classList.add('bg-green-500/20', 'border-green-500');
                fb.innerText = "HIT!";
                fb.style.color = "#22c55e";
                document.getElementById('monster-hp').style.width = state.hp + "%";
                confetti({ particleCount: 100, spread: 70, origin: { y: 0.7 }, colors: [teams[state.turn].color] });
            } else {
                handleFail("MISS!");
                btn.classList.add('bg-red-500/20', 'border-red-500');
            }
            setTimeout(nextTurn, 1500);
        }

        function handleFail(msg) {
            SFX.wrong();
            const fb = document.getElementById('hit-feedback');
            fb.innerText = msg;
            fb.style.color = "#ef4444";
            teams[state.turn].lives--;
            renderScoreboard();
        }

        function nextTurn() {
            state.qIdx++;
            document.getElementById('hit-feedback').innerText = "";
            
            let loopGuard = 0;
            do {
                state.turn = (state.turn + 1) % teams.length;
                loopGuard++;
            } while (teams[state.turn].eliminated && loopGuard < 10);
            
            loadQuestion();
        }

        function endPart() {
            document.getElementById('play-screen').classList.add('hidden');
            document.getElementById('status-screen').classList.remove('hidden');
            
            const activeTeams = teams.filter(t => !t.eliminated).sort((a,b) => a.score - b.score);
            
            if (state.part < 3) {
                const elim = activeTeams[0];
                elim.eliminated = true;
                document.getElementById('status-msg').innerText = `TEAM ${elim.name.toUpperCase()} ELIMINATED!`;
                document.getElementById('status-btn').innerText = "PROCEED TO NEXT ROUND";
                document.getElementById('status-btn').onclick = () => {
                    state.part++;
                    document.getElementById('status-screen').classList.add('hidden');
                    document.getElementById('play-screen').classList.remove('hidden');
                    initPart();
                };
            } else {
                const winner = teams.filter(t => !t.eliminated).sort((a,b) => b.score - a.score)[0];
                document.getElementById('status-title').innerText = "ULTIMATE HERO";
                document.getElementById('status-msg').innerText = `${winner.name.toUpperCase()} IS THE CHAMPION!`;
                document.getElementById('status-btn').innerText = "PLAY AGAIN";
                document.getElementById('status-btn').onclick = () => location.reload();
            }
            renderScoreboard();
        }
    </script>
</body>
</html>