<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noetic Mastery - QNM Lab Alpha</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --accent: #00f5a0;
            --neon-purple: #9d50bb;
            --warning: #ff4757;
            --glass: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            font-family: 'Inter', 'Segoe UI', sans-serif;
            color: white;
            background: radial-gradient(circle at top right, #2c003e, #0f0f1a),
                        radial-gradient(circle at bottom left, #001a1a, #0f0f1a);
            background-attachment: fixed;
        }

        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .container {
            max-width: 900px;
            margin: auto;
            padding: 40px 20px;
            position: relative;
            z-index: 1;
        }

        /* Timer Styling */
        .timer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            padding: 15px 25px;
            border-radius: 50px;
            border: 1px solid var(--glass-border);
            margin-bottom: 20px;
            position: sticky;
            top: 20px;
            z-index: 100;
        }

        #timer-val {
            font-family: 'Courier New', monospace;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--accent);
            text-shadow: 0 0 10px rgba(0, 245, 160, 0.5);
        }

        .q-progress-text {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0.7;
        }

        h1 {
            font-size: 2.5rem;
            letter-spacing: -1px;
            background: linear-gradient(to right, #fff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0;
        }

        .subtitle {
            opacity: 0.6;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            margin-bottom: 30px;
        }

        .card {
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            transition: transform 0.3s ease;
        }

        #question {
            font-size: 1.4rem;
            font-weight: 500;
            min-height: 2.5em;
            line-height: 1.4;
        }

        .btn-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 25px;
        }

        button {
            padding: 16px;
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            background: rgba(255,255,255,0.03);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        button:hover {
            background: var(--accent);
            color: #001a1a;
            border-color: var(--accent);
            box-shadow: 0 0 20px rgba(0, 245, 160, 0.3);
            transform: translateY(-2px);
        }

        .progress-wrapper {
            margin: 20px 0;
            text-align: left;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            margin-bottom: 8px;
            opacity: 0.8;
        }

        .progress-container {
            height: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--neon-purple), var(--accent));
            width: 0%;
            transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 0 15px var(--accent);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .stat-box {
            padding: 15px;
            background: rgba(0,0,0,0.2);
            border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .stat-val {
            display: block;
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--accent);
        }

        .stat-name {
            font-size: 0.7rem;
            text-transform: uppercase;
            opacity: 0.5;
            letter-spacing: 1px;
        }

        .chart-row {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .chart-row, .btn-container { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: 1fr; }
        }

        .reset-btn {
            background: transparent;
            color: #ff4757;
            border: 1px solid #ff475733;
            margin-top: 50px;
            padding: 10px 20px;
            font-size: 0.75rem;
        }

        .reset-btn:hover { background: #ff4757; color: white; }
    </style>
</head>
<body>

    <canvas id="particle-canvas"></canvas>

    <div class="container">
        <div class="timer-header">
            <div class="q-progress-text">Sequence: <span id="q-count">1</span> / 50</div>
            <div id="timer-val">10:00</div>
        </div>

        <header>
            <h1>Noetic Mastery</h1>
            <p class="subtitle">Quantum Theoretical Lab Interface</p>
        </header>

        <div class="card">
            <div id="question">Accessing the Noetic Field...</div>
            <div id="answers" class="btn-container"></div>
        </div>

        <div class="card">
            <div class="progress-wrapper">
                <div class="progress-label">
                    <span>Neural Level <strong id="level">1</strong></span>
                    <span id="streak-info">Streak: 0 🔥</span>
                </div>
                <div class="progress-container">
                    <div class="progress-bar" id="xpBar"></div>
                </div>
                <div style="font-size: 0.75rem; margin-top: 5px; opacity: 0.6;">XP: <span id="xp">0</span></div>
            </div>

            <div class="stats-grid">
                <div class="stat-box">
                    <span class="stat-name">Learning</span>
                    <span class="stat-val" id="learning">0.0</span>
                </div>
                <div class="stat-box">
                    <span class="stat-name">Productivity</span>
                    <span class="stat-val" id="productivity">0.0</span>
                </div>
                <div class="stat-box">
                    <span class="stat-name">Noetic Index</span>
                    <span class="stat-val" id="noetic">0.0</span>
                </div>
            </div>
        </div>

        <div class="chart-row">
            <div class="card"><canvas id="radarChart"></canvas></div>
            <div class="card"><canvas id="historyChart"></canvas></div>
        </div>

        <button class="reset-btn" onclick="resetGame()">Factory Reset Neural Path</button>
    </div>

<script>
// --- TIMER LOGIC ---
let timeLeft = 600; // 10 minutes in seconds
let timerId = null;
const totalCircuitQuestions = 50;
let currentCircuitIndex = 0;

function startTimer() {
    timerId = setInterval(() => {
        timeLeft--;
        const mins = Math.floor(timeLeft / 60);
        const secs = timeLeft % 60;
        const display = document.getElementById("timer-val");
        
        display.innerText = `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        
        if (timeLeft <= 60) {
            display.style.color = "var(--warning)";
        }

        if (timeLeft <= 0) {
            clearInterval(timerId);
            endGame("Temporal sync failed. Circuit collapsed.");
        }
    }, 1000);
}

function endGame(message) {
    document.getElementById("question").innerText = message;
    document.getElementById("answers").innerHTML = `<button onclick="location.reload()">Re-Initialize Interface</button>`;
}

// --- PARTICLE SYSTEM ---
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
let particles = [];

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

class Particle {
    constructor() {
        this.reset();
    }
    reset() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 2 + 0.5;
        this.speedX = Math.random() * 0.5 - 0.25;
        this.speedY = Math.random() * 0.5 - 0.25;
        this.opacity = Math.random() * 0.5 + 0.1;
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width || this.x < 0 || this.y > canvas.height || this.y < 0) this.reset();
    }
    draw() {
        ctx.fillStyle = `rgba(0, 245, 160, ${this.opacity})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

for (let i = 0; i < 100; i++) particles.push(new Particle());

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => { p.update(); p.draw(); });
    requestAnimationFrame(animate);
}
animate();

// --- GAME LOGIC ---
let questionBank = [
    { q:"Which strategy improves long‑term memory most?", a:["Spaced repetition","Cramming","Passive reading","Highlighting only"], correct:0 }, { q:"Best way to start focused learning?", a:["Clear goals","Random tasks","Multitasking","Watching videos only"], correct:0 }, { q:"What increases retention of new skills?", a:["Practice with feedback","Rereading notes","Listening passively","Guessing answers"], correct:0 }, { q:"Which habit lowers productivity?", a:["Frequent checking social media","Time blocking","Planning","Prioritizing tasks"], correct:0 }, { q:"Best way to get motivated daily?", a:["Set small achievable goals","Ignore progress","Work non‑stop","Compare to others"], correct:0 }, { q:"Which improves concentration?", a:["Single‑task focus","Switching tasks","Interruptions","Multitasking"], correct:0 }, { q:"What enhances cognitive skill growth?", a:["Deliberate practice","Avoiding challenge","Guessing","Passive review"], correct:0 }, { q:"Which reduces productivity?", a:["Frequent interruptions","Deep work sessions","Prioritized tasks","Structured breaks"], correct:0 }, { q:"Best strategy for deep understanding?", a:["Practice and reflection","Highlighting only","Skim reading","Guessing answers"], correct:0 }, { q:"Which increases learning efficiency?", a:["Active recall","Passive reading","Multitasking","Ignoring feedback"], correct:0 }, { q:"What strengthens expertise over time?", a:["Repeated deliberate effort","Spontaneous random effort","Avoiding mistakes","Guessing"], correct:0 }, { q:"Best for skill complexity growth?", a:["Feedback‑integrated practice","Repeating wrong actions","Avoiding tests","Guessing"], correct:0 }, { q:"Which distracts productivity most?", a:["Notifications","Time management","Batching tasks","Reducing clutter"], correct:0 }, { q:"Motivation increases when you:", a:["Track progress","Ignore errors","Avoid reflection","Skip goals"], correct:0 }, { q:"Best way to develop expertise:", a:["Practice + feedback","Random work","Passive reading","Avoid difficulty"], correct:0 }, { q:"Which improves cognitive performance?", a:["Breaks + focus cycles","Nonstop work","Skipping rest","Random tasks"], correct:0 }, { q:"Which raises learning retention?", a:["Teach others","Listening once","Highlighting only","Skipping revision"], correct:0 }, { q:"What enhances productivity rhythm?", a:["Task batching","Random tasks","Interruptions","Open‑ended work"], correct:0 }, { q:"What weakens skill development?", a:["Avoid feedback","Structured practice","Goal setting","Reflection"], correct:0 }, { q:"Best approach to motivation?", a:["Reward progress","Ignore milestones","Punish errors","Compare unfavorably"], correct:0 }, { q:"Which decreases distraction?", a:["Turning off notifications","Multitasking","Checking messages","Open loops"], correct:0 }, { q:"Best for long‑term retention?", a:["Spaced repetition + sleep","Cramming","Highlighting only","Listening passively"], correct:0 }, { q:"What builds cognitive resilience?", a:["Deliberate challenge","Avoiding difficult tasks","Guessing","Passive watching"], correct:0 }, { q:"Productivity improves with:", a:["Planning + execution","Ignoring priorities","Interruptions","Multitasking"], correct:0 }, { q:"Which informal habit increases skill?", a:["Structured practice","No practice","Random attempts","Guessing"], correct:0 }, { q:"Which learning pattern is most effective?", a:["Moderate + consistent","Very intense sporadic","All‑night cramming","Random studying"], correct:0 }, { q:"Which reduces mental fatigue?", a:["Adequate breaks","Nonstop work","Skipping rest","Forced focus"], correct:0 }, { q:"What is vital for cognitive growth?", a:["Reflective feedback","Avoid reflection","Passive watching","Minimal effort"], correct:0 }, { q:"Best way to stay organized?", a:["Task prioritization","Random work","Avoid planning","Guessing priorities"], correct:0 }, { q:"Which increases motivation sustainably?", a:["Visible progress","No tracking","Constant comparison","Random effort"], correct:0 }, { q:"Best way to master complexity?", a:["Incremental challenge","Avoid complexity","Guessing","Passive reading"], correct:0 }, { q:"What boosts productivity rituals?", a:["Consistent routines","Disruptions","Random scheduling","Open‑ended tasks"], correct:0 }, { q:"Which weakens learning?", a:["Cramming only","Active recall","Practice with feedback","Reflection"], correct:0 }, { q:"Best strategy to avoid procrastination?", a:["Break tasks into steps","Ignore tasks","Wait until late","Multitask"], correct:0 }, { q:"Which enhances cognitive adaptability?", a:["Varied practice","Routine only","Passive repetition","Guessing"], correct:0 }, { q:"Most effective way to embed knowledge?", a:["Sleep + spaced revision","Random revision","Highlighting only","Listening once"], correct:0 }, { q:"Which improves workflow clarity?", a:["List priorities","Open tasks without order","Multitasking","Ignore planning"], correct:0 }, { q:"Motivation decreases when you:", a:["Lack goals","Set milestones","Track success","Rest well"], correct:0 }, { q:"Which promotes expert performance?", a:["Feedback‑oriented training","Guessing","Passive reading","Avoid challenge"], correct:0 }, { q:"Which improves attention span?", a:["Structured focus intervals","Continuous distraction","No planning","Random work"], correct:0 }, { q:"Best way to prepare for learning sessions?", a:["Clear objective","No objective","Passive tasks","Guessing"], correct:0 }, { q:"Which slows productivity?", a:["Interruptions","Batch tasks","Structured pauses","Clear goals"], correct:0 }, { q:"Skill retention is best with:", a:["Practice + reflection","Highlighting only","Listening once","Random revision"], correct:0 }, { q:"Which habit undermines motivation?", a:["Negative comparison","Small wins","Positive feedback","Clear goals"], correct:0 }, { q:"Which enhances high‑order thinking?", a:["Reflective practice","Random effort","Passive reading","Skipping feedback"], correct:0 }, { q:"Which approach increases productivity?", a:["Time‑boxing","No plan","Disorganized work","Multitasking"], correct:0 }, { q:"Which weakens cognitive endurance?", a:["Nonstop work","Focused breaks","Clear goals","Reflection"], correct:0 }, { q:"Learning effectiveness grows by:", a:["Feedback + review","Passive reading","Highlighting only","Guessing"], correct:0 }, { q:"Which strategy reduces overwhelm?", a:["Task segmentation","Ignore tasks","Multitask","Random work"], correct:0 }, { q:"Which boosts motivation long‑term?", a:["Celebrating small wins","Self‑criticism","Comparing unfavorably","Ignoring progress"], correct:0 }, { q:"Best way to master new skills?", a:["Spaced deliberate practice","Random tasks","Passive review","No reflection"], correct:0 }, { q:"Which reduces cognitive load?", a:["Externalizing tasks","Multitasking","Ignoring organization","Continuous interruptions"], correct:0 }, { q:"Which improves problem‑solving?", a:["Reflective practice","Guessing","Passive reading","Highlighting only"], correct:0 }, { q:"What builds mental stamina?", a:["Balanced focus + rest","Nonstop work","Skipping breaks","Overworking"], correct:0 }, { q:"Best way to enhance retention?", a:["Sleep + active recall","Cramming","Listening once","No review"], correct:0 }, { q:"Which strengthens productivity habits?", a:["Consistent routines","Ad‑hoc work","Interruptions","Guessing tasks"], correct:0 }, { q:"Which weakens learning momentum?", a:["Long gaps between sessions","Consistent practice","Reflection","Feedback"], correct:0 }, { q:"What increases motivation daily?", a:["Daily reflection","Avoid tracking","Ignore wins","Skip goals"], correct:0 }, { q:"Which best improves focus?", a:["Single‑task work","Distractions","Multitasking","No planning"], correct:0 }, { q:"What enhances learning quality?", a:["Deliberate effort","Passive reading","Random tasks","Guessing"], correct:0 }, { q:"Which weakens productivity processes?", a:["Regular interruptions","Clear checkpoints","Task prioritization","Planning"], correct:0 }, { q:"Skill growth is best with:", a:["Progress feedback","Random revision","Passive watching","No reflection"], correct:0 }, { q:"Which fosters mastery?", a:["Challenging practice","Avoiding challenges","Guessing","Multitasking"], correct:0 }, { q:"Which reduces mental distractions?", a:["Focused time blocks","Notifications","Multitasking","No planning"], correct:0 }, { q:"What improves learning readiness?", a:["Clear intent","No intent","Passive reading","Random tasks"], correct:0 }, { q:"Which improves task execution?", a:["Prioritization","Multitasking","Open loops","No planning"], correct:0 }, { q:"What strengthens noetic growth?", a:["Applied reflection","Random effort","Passive watching","Guessing"], correct:0 }, { q:"Which weakens expertise development?", a:["Skipping feedback","Practice","Reflection","Structured challenges"], correct:0 }, { q:"Learning performance increases by:", a:["Consistent review","Random attempts","Guessing","No reflection"], correct:0 }, { q:"Best productivity habit involves:", a:["Defined goals","No planning","Interruptions","Guessing work"], correct:0 }, { q:"Which supports cognitive resilience?", a:["Balanced challenges","Avoid challenges","Passive watching","Random tasks"], correct:0 }, { q:"What enhances deep learning?", a:["Integration + reflection","Highlighting only","Passive listening","Guessing"], correct:0 }, { q:"Which lowers motivation over time?", a:["Lack of checkpoints","Track wins","Break tasks","Plan well"], correct:0 }, { q:"What improves mental clarity?", a:["Prioritized tasks","Multitasking","Distractions","No plan"], correct:0 }, { q:"Which creates effective expertise growth?", a:["Practice with reflection","Random tasks","Passive watching","Avoiding feedback"], correct:0 }, { q:"Which breaks productivity cycles?", a:["Interruptions","Task batching","Clear goals","Priorities"], correct:0 }, { q:"What boosts learning engagement?", a:["Active involvement","Passive reading","Guessing","Random tasks"], correct:0 }, { q:"Which reduces focus capacity?", a:["Multitasking","Time‑blocking","Breaks","Reflection"], correct:0 }, { q:"What sustains motivation long‑term?", a:["Visible progress","Lack of goals","Comparing negatively","No feedback"], correct:0 }
];

const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
};

const randomizeAnswers = (bank) => {
    bank.forEach(question => {
        let correctContent = question.a[question.correct];
        shuffleArray(question.a);
        question.correct = question.a.indexOf(correctContent);
    });
};

randomizeAnswers(questionBank);

let state = JSON.parse(localStorage.getItem("noeticGameV2")) || {
    level: 1, xp: 0, streak: 0, 
    learning: 0.2, capability: 0.2, motivation: 0.3,
    history: []
};

function xpRequired(level) { return Math.floor(100 * Math.pow(level, 1.4)); }

function updateUI() {
    document.getElementById("level").innerText = state.level;
    document.getElementById("xp").innerText = `${state.xp} / ${xpRequired(state.level)}`;
    document.getElementById("streak-info").innerText = `Streak: ${state.streak} 🔥`;

    let xpPercent = (state.xp / xpRequired(state.level)) * 100;
    document.getElementById("xpBar").style.width = xpPercent + "%";

    let l = Math.min(1, 0.1 + 0.4 * state.learning + 0.3 * state.capability + 0.3 * state.motivation);
    let p = Math.min(1, 0.05 + 0.5 * l + 0.3 * state.capability + 0.2 * state.motivation);
    let n = l * 0.4 + state.capability * 0.4 + p * 0.2;

    document.getElementById("learning").innerText = (l * 100).toFixed(1);
    document.getElementById("productivity").innerText = (p * 100).toFixed(1);
    document.getElementById("noetic").innerText = (n * 100).toFixed(1);

    state.history.push(n * 100);
    if (state.history.length > 15) state.history.shift();

    radarChart.data.datasets[0].data = [l * 100, p * 100, n * 100];
    radarChart.update();

    historyChart.data.labels = state.history.map((_, i) => i + 1);
    historyChart.data.datasets[0].data = state.history;
    historyChart.update();

    localStorage.setItem("noeticGameV2", JSON.stringify(state));
}

function nextQuestion() {
    currentCircuitIndex++;
    if (currentCircuitIndex > totalCircuitQuestions) {
        clearInterval(timerId);
        endGame("Circuit Complete. Neural synchronization finalized.");
        return;
    }
    
    document.getElementById("q-count").innerText = currentCircuitIndex;

    if (questionBank.length === 0) {
        clearInterval(timerId);
        endGame("Cognitive Saturation Reached. All sectors mapped.");
        return;
    }

    let qIndex = Math.floor(Math.random() * questionBank.length);
    let q = questionBank[qIndex];
    questionBank.splice(qIndex, 1);

    document.getElementById("question").innerText = q.q;
    let answersDiv = document.getElementById("answers");
    answersDiv.innerHTML = "";

    q.a.forEach((text, index) => {
        let btn = document.createElement("button");
        btn.innerText = text;
        btn.onclick = () => {
            if (index === q.correct) {
                state.streak++;
                state.xp += 15 + state.streak * 5;
                state.learning = Math.min(1, state.learning + 0.03);
            } else {
                state.streak = 0;
                state.motivation = Math.max(0, state.motivation - 0.05);
                state.xp = Math.max(0, state.xp - 10);
            }

            if (state.xp >= xpRequired(state.level)) {
                state.level++;
                state.xp = 0;
            }
            updateUI();
            nextQuestion();
        };
        answersDiv.appendChild(btn);
    });
}

function resetGame() {
    localStorage.removeItem("noeticGameV2");
    location.reload();
}

// --- CHARTS ---
Chart.defaults.color = 'rgba(255,255,255,0.6)';
const radarChart = new Chart(document.getElementById("radarChart"), {
    type: "radar",
    data: {
        labels: ["Learning", "Productivity", "Noetic"],
        datasets: [{
            label: "Cognitive Profile",
            data: [0, 0, 0],
            backgroundColor: "rgba(0, 245, 160, 0.2)",
            borderColor: "#00f5a0",
            pointBackgroundColor: "#fff"
        }]
    },
    options: {
        scales: { r: { beginAtZero: true, max: 100, grid: { color: 'rgba(255,255,255,0.1)' }, angleLines: { color: 'rgba(255,255,255,0.1)' } } }
    }
});

const historyChart = new Chart(document.getElementById("historyChart"), {
    type: "line",
    data: {
        labels: [],
        datasets: [{
            label: "Noetic Growth Trend",
            data: [],
            borderColor: "#9d50bb",
            borderWidth: 3,
            tension: 0.4,
            fill: true,
            backgroundColor: "rgba(157, 80, 187, 0.1)"
        }]
    },
    options: {
        scales: { y: { beginAtZero: true, max: 100, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } }
    }
});

updateUI();
startTimer(); // Timer starts on load
nextQuestion();
</script>
</body>
</html>