<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>QNM Theoretical Lab | Noetic Nourishment Game</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --neon-blue: #00f2ff;
            --neon-purple: #7000ff;
            --neon-green: #00ff99;
            --neon-red: #ff4d4d;
            --bg-deep: #050614;
            --glass-card: rgba(13, 15, 45, 0.9);
            --border-active: rgba(255, 255, 255, 0.15);
            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --font-mono: 'Courier New', monospace;
        }

        body { 
            margin: 0; font-family: var(--font-main); color: white; overflow: hidden; 
            background: var(--bg-deep); height: 100vh; width: 100vw;
            display: flex; justify-content: center; align-items: center;
        }

        canvas#bg-canvas { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 100%; }
        #haptic-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: background 0.3s; pointer-events: none; }

        .hud-wrapper {
            display: grid; grid-template-rows: auto 1fr auto; gap: 15px;
            width: 95%; max-width: 1100px; height: 95vh; padding: 20px; box-sizing: border-box;
            background: rgba(0,0,0,0.5); border-radius: 20px; border: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
        }

        .hud-card {
            background: var(--glass-card); backdrop-filter: blur(20px);
            border-radius: 12px; border: 1px solid var(--border-active);
            position: relative; overflow: hidden; transition: border-color 0.3s;
        }

        .hud-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
        h1#title { margin: 0; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--neon-blue); font-size: 1.1rem; }
        .stats-group { display: flex; gap: 15px; font-family: var(--font-mono); font-size: 1rem; }
        .stat-badge { background: rgba(0,0,0,0.4); border-radius: 6px; padding: 4px 12px; border: 1px solid var(--border-active); }

        .telemetry-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; min-height: 160px; opacity: 0; transition: opacity 0.5s; }
        .graph-label { position: absolute; top: 10px; left: 15px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; z-index: 5; }

        .interaction-card { padding: 25px; display: flex; flex-direction: column; justify-content: space-between; }
        #question { font-size: 1.3rem; margin-bottom: 20px; min-height: 60px; }
        .options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .option { padding: 15px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-active); border-radius: 8px; cursor: pointer; transition: 0.2s; }
        .option:hover { border-color: var(--neon-blue); background: rgba(0, 242, 255, 0.05); }
        
        .selected-correct { border-color: var(--neon-green) !important; background: rgba(0, 255, 153, 0.1) !important; }
        .selected-wrong { border-color: var(--neon-red) !important; background: rgba(255, 77, 77, 0.1) !important; }

        .hud-btn { 
            width: 100%; padding: 15px; border: none; border-radius: 10px; color: white; font-weight: bold;
            text-transform: uppercase; letter-spacing: 3px; cursor: pointer;
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
        }

        #report-screen { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
        .nai-value { font-size: 5rem; color: var(--neon-blue); font-weight: 800; text-shadow: 0 0 20px var(--neon-blue); }

        .shake-card { animation: shake 0.5s both; }
        @keyframes shake { 10%, 90% {transform: translateX(-2px);} 50% {transform: translateX(2px);} }
    </style>
</head>
<body>

<canvas id="bg-canvas"></canvas>
<div id="haptic-glow"></div>

<div class="hud-wrapper">
    <div class="hud-card hud-header">
        <h1 id="title">Noetic Nourishment v1.3</h1>
        <div class="stats-group">
            <div class="stat-badge">XP: <span id="xp">0</span></div>
            <div class="stat-badge">TIMER: <span id="timer">1800</span>s</div>
        </div>
    </div>

    <div class="telemetry-row" id="param-ui">
        <div class="hud-card"><span class="graph-label" style="color:var(--neon-blue)">Accuracy Index</span><canvas id="noeticChart"></canvas></div>
        <div class="hud-card"><span class="graph-label" style="color:var(--neon-purple)">Process Velocity</span><canvas id="learningChart"></canvas></div>
        <div class="hud-card"><span class="graph-label" style="color:var(--neon-green)">Flow State</span><canvas id="prodChart"></canvas></div>
    </div>

    <div class="hud-card interaction-card" id="game-card">
        <div id="start-view">
            <h2 style="color:var(--neon-blue)">Neural Calibration</h2>
            <p>50 Nodes | 30 Minutes | High-Stakes Accuracy Required.</p>
        </div>
        
        <div id="game-view" style="display:none;">
            <h3 id="question">Initializing...</h3>
            <div class="options-row" id="options"></div>
        </div>

        <div id="report-screen">
            <span style="opacity: 0.6; text-transform: uppercase;">Final Noetic Aptitude Index</span>
            <span class="nai-value" id="final-nai">0</span>
            <h2 id="rank" style="letter-spacing: 5px;"></h2>
            <button class="hud-btn" onclick="location.reload()" style="max-width: 300px;">Restart Circuit</button>
        </div>

        <button class="hud-btn" id="action-btn" onclick="handleAction()">Start Test Circuit</button>
    </div>
</div>

<script>
// --- CORE CONFIG ---
const TEST_SIZE = 50;
const INITIAL_TIME = 1800; // 30 minutes

const questionPool = [
    {q:"The basic functional unit of the brain is:", options:["Neuron","Glia","Axon","Dendrite"], answer:"Neuron"},
    {q:"Which part of the neuron receives signals?", options:["Dendrite","Axon","Myelin","Synapse"], answer:"Dendrite"},
    {q:"The brain region responsible for balance is:", options:["Cerebellum","Cerebrum","Medulla","Hypothalamus"], answer:"Cerebellum"},
    {q:"Which lobe controls vision?", options:["Occipital lobe","Frontal lobe","Temporal lobe","Parietal lobe"], answer:"Occipital lobe"},
    {q:"Neurotransmitters are:", options:["Chemical messengers","Electrical signals","Hormones","Proteins"], answer:"Chemical messengers"},
    {q:"The synapse is:", options:["Gap between neurons","Part of axon","Brain lobe","Hormone gland"], answer:"Gap between neurons"},
    {q:"Which ion is crucial for action potentials?", options:["Sodium","Iron","Calcium","Magnesium"], answer:"Sodium"},
    {q:"The resting membrane potential is about:", options:["-70 mV","0 mV","+30 mV","-10 mV"], answer:"-70 mV"},
    {q:"Myelin sheath function is:", options:["Insulation","Digestion","Hormone release","Signal blocking"], answer:"Insulation"},
    {q:"The largest part of the brain is:", options:["Cerebrum","Cerebellum","Brainstem","Thalamus"], answer:"Cerebrum"},
    {q:"Which lobe is responsible for decision making?", options:["Frontal lobe","Temporal lobe","Occipital lobe","Parietal lobe"], answer:"Frontal lobe"},
    {q:"Hippocampus is important for:", options:["Memory","Vision","Hearing","Movement"], answer:"Memory"},
    {q:"Amygdala regulates:", options:["Emotion","Vision","Balance","Speech"], answer:"Emotion"},
    {q:"Which structure relays sensory signals?", options:["Thalamus","Hypothalamus","Pons","Cerebellum"], answer:"Thalamus"},
    {q:"The hypothalamus controls:", options:["Homeostasis","Vision","Speech","Balance"], answer:"Homeostasis"},
    {q:"Neuroplasticity refers to:", options:["Brain adaptability","Neuron death","Signal blocking","Memory loss"], answer:"Brain adaptability"},
    {q:"Glial cells primarily:", options:["Support neurons","Transmit signals","Store memory","Produce hormones"], answer:"Support neurons"},
    {q:"The blood-brain barrier protects:", options:["Brain tissue","Spinal cord","Muscles","Bones"], answer:"Brain tissue"},
    {q:"Which neurotransmitter is linked to reward?", options:["Dopamine","Serotonin","GABA","Acetylcholine"], answer:"Dopamine"},
    {q:"Serotonin regulates:", options:["Mood","Vision","Hearing","Balance"], answer:"Mood"},
    {q:"GABA is primarily:", options:["Inhibitory","Excitatory","Hormonal","Structural"], answer:"Inhibitory"},
    {q:"Acetylcholine is important for:", options:["Muscle movement","Vision","Balance","Sleep"], answer:"Muscle movement"},
    {q:"The brainstem controls:", options:["Vital functions","Memory","Vision","Emotion"], answer:"Vital functions"},
    {q:"Medulla oblongata regulates:", options:["Breathing","Thinking","Hearing","Vision"], answer:"Breathing"},
    {q:"Pons is involved in:", options:["Sleep","Vision","Taste","Balance"], answer:"Sleep"},
    {q:"Spinal cord transmits:", options:["Neural signals","Hormones","Blood","Oxygen"], answer:"Neural signals"},
    {q:"The central nervous system includes:", options:["Brain and spinal cord","Nerves","Muscles","Organs"], answer:"Brain and spinal cord"},
    {q:"Peripheral nervous system includes:", options:["Nerves","Brain","Spinal cord","Cerebellum"], answer:"Nerves"},
    {q:"Sympathetic nervous system prepares for:", options:["Fight or flight","Rest","Digestion","Sleep"], answer:"Fight or flight"},
    {q:"Parasympathetic system promotes:", options:["Rest and digest","Stress","Alertness","Fear"], answer:"Rest and digest"},
    {q:"Action potential is:", options:["Electrical impulse","Chemical signal","Hormone","Protein"], answer:"Electrical impulse"},
    {q:"Depolarization involves:", options:["Sodium influx","Potassium influx","Calcium loss","Chloride loss"], answer:"Sodium influx"},
    {q:"Repolarization involves:", options:["Potassium efflux","Sodium influx","Calcium influx","Chloride influx"], answer:"Potassium efflux"},
    {q:"Threshold potential is:", options:["Minimum to fire","Maximum voltage","Resting state","Zero voltage"], answer:"Minimum to fire"},
    {q:"All-or-none law applies to:", options:["Action potentials","Hormones","Muscles","Glia"], answer:"Action potentials"},
    {q:"Which lobe processes sound?", options:["Temporal lobe","Frontal lobe","Parietal lobe","Occipital lobe"], answer:"Temporal lobe"},
    {q:"Parietal lobe processes:", options:["Touch","Vision","Sound","Emotion"], answer:"Touch"},
    {q:"Motor cortex controls:", options:["Movement","Vision","Hearing","Smell"], answer:"Movement"},
    {q:"Sensory cortex processes:", options:["Sensations","Movement","Speech","Emotion"], answer:"Sensations"},
    {q:"Corpus callosum connects:", options:["Hemispheres","Lobes","Neurons","Axons"], answer:"Hemispheres"},
    {q:"Left hemisphere specializes in:", options:["Language","Emotion","Music","Spatial"], answer:"Language"},
    {q:"Right hemisphere specializes in:", options:["Spatial skills","Language","Math","Logic"], answer:"Spatial skills"},
    {q:"Neurons communicate via:", options:["Synapses","Hormones","Blood","Oxygen"], answer:"Synapses"},
    {q:"EEG measures:", options:["Brain activity","Heart rate","Blood pressure","Hormones"], answer:"Brain activity"},
    {q:"MRI provides:", options:["Brain imaging","Electrical activity","Hormone levels","Blood flow only"], answer:"Brain imaging"},
    {q:"fMRI detects:", options:["Blood flow changes","Neuron count","Hormones","Synapses"], answer:"Blood flow changes"},
    {q:"Neurogenesis occurs in:", options:["Hippocampus","Cerebellum","Medulla","Pons"], answer:"Hippocampus"},
    {q:"Plasticity decreases with:", options:["Age","Learning","Exercise","Sleep"], answer:"Age"},
    {q:"Sleep is essential for:", options:["Memory consolidation","Vision","Taste","Hearing"], answer:"Memory consolidation"},
    {q:"REM sleep is associated with:", options:["Dreaming","Digestion","Breathing","Walking"], answer:"Dreaming"},
    {q:"Circadian rhythm regulates:", options:["Sleep cycle","Digestion","Vision","Movement"], answer:"Sleep cycle"},
    {q:"Melatonin is produced by:", options:["Pineal gland","Pituitary","Thalamus","Hypothalamus"], answer:"Pineal gland"},
    {q:"Pituitary gland is:", options:["Master gland","Digestive organ","Neuron","Synapse"], answer:"Master gland"},
    {q:"Alzheimer's disease affects:", options:["Memory","Vision","Hearing","Taste"], answer:"Memory"},
    {q:"Parkinson's disease involves:", options:["Dopamine loss","Serotonin loss","GABA increase","Acetylcholine excess"], answer:"Dopamine loss"},
    {q:"Stroke is caused by:", options:["Blood flow interruption","Neuron growth","Hormone excess","Sleep loss"], answer:"Blood flow interruption"},
    {q:"Reflex action is:", options:["Automatic response","Voluntary action","Hormonal action","Cognitive action"], answer:"Automatic response"},
    {q:"Reflex arc involves:", options:["Spinal cord","Cerebrum","Cerebellum","Hypothalamus"], answer:"Spinal cord"},
    {q:"Neural pathways strengthen with:", options:["Practice","Sleep loss","Stress","Injury"], answer:"Practice"},
    {q:"Long-term potentiation relates to:", options:["Learning","Sleep","Digestion","Breathing"], answer:"Learning"},
    {q:"Short-term memory lasts:", options:["Seconds to minutes","Hours","Days","Years"], answer:"Seconds to minutes"},
    {q:"Long-term memory lasts:", options:["Days to years","Seconds","Minutes","Hours"], answer:"Days to years"},
    {q:"Procedural memory involves:", options:["Skills","Facts","Events","Emotions"], answer:"Skills"},
    {q:"Declarative memory involves:", options:["Facts","Skills","Reflexes","Instincts"], answer:"Facts"},
    {q:"The limbic system controls:", options:["Emotion","Vision","Hearing","Movement"], answer:"Emotion"},
    {q:"Neurons fire due to:", options:["Electrical changes","Hormones","Blood","Oxygen"], answer:"Electrical changes"},
    {q:"Brain consumes most:", options:["Glucose","Protein","Fat","Iron"], answer:"Glucose"},
    {q:"Gray matter contains:", options:["Cell bodies","Axons","Myelin","Synapses only"], answer:"Cell bodies"},
    {q:"White matter contains:", options:["Myelinated axons","Cell bodies","Dendrites","Glia only"], answer:"Myelinated axons"},
    {q:"The default mode network is active during:", options:["Rest","Movement","Eating","Talking"], answer:"Rest"},
    {q:"Neurotransmitter reuptake is:", options:["Reabsorption","Release","Destruction","Creation"], answer:"Reabsorption"},
    {q:"Excitatory neurotransmitters:", options:["Increase firing","Decrease firing","Block signals","Destroy neurons"], answer:"Increase firing"},
    {q:"Inhibitory neurotransmitters:", options:["Decrease firing","Increase firing","Enhance memory","Increase blood"], answer:"Decrease firing"},
    {q:"Brain size relative to body is highest in:", options:["Humans","Elephants","Dogs","Cats"], answer:"Humans"},
    {q:"The autonomic nervous system controls:", options:["Involuntary actions","Voluntary actions","Thoughts","Speech"], answer:"Involuntary actions"},
    {q:"Somatic nervous system controls:", options:["Voluntary actions","Hormones","Emotions","Sleep"], answer:"Voluntary actions"},
    {q:"Neurons do not typically:", options:["Divide","Transmit signals","Communicate","Fire"], answer:"Divide"},
    {q:"Axon terminal releases:", options:["Neurotransmitters","Hormones","Proteins","Glucose"], answer:"Neurotransmitters"},
    {q:"Synaptic vesicles store:", options:["Neurotransmitters","Hormones","Enzymes","Proteins"], answer:"Neurotransmitters"},
    {q:"Metacognition is primarily defined as:", options:["Thinking about thinking","Memory loss","Acute stress","Instinctive reaction"], answer:"Thinking about thinking"},
    {q:"Deep Reading contributes most directly to:", options:["High Focus/Productivity","Physical stamina","Auditory processing","Sleep duration"], answer:"High Focus/Productivity"},
    {q:"The 'Flow State' is characterized by:", options:["Effortless concentration","Rapid fatigue","Constant distraction","Anxiety"], answer:"Effortless concentration"},
    {q:"Neuroplasticity refers to the brain's ability to:", options:["Adapt and Rewire","Remain static","Generate heat","Store oxygen"], answer:"Adapt and Rewire"},
    {q:"Which factor most severely disrupts Noetic focus?", options:["Multitasking","High XP Sync","Rapid Latency","Logic consistency"], answer:"Multitasking"}
];

let questions = [];
let currentQ = 0, xp = 0, timeLeft = INITIAL_TIME, answered = false, gameStarted = false;
let latencies = [], startT, charts = {};

// Helper: Shuffle Array
function shuffle(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]];
    }
    return array;
}

// Background Visuals
const canvasB=document.getElementById("bg-canvas"); const ctxB=canvasB.getContext("2d");
canvasB.width=window.innerWidth; canvasB.height=window.innerHeight;
function drawGrid() {
    ctxB.strokeStyle = "rgba(0, 242, 255, 0.05)"; ctxB.lineWidth = 0.5; ctxB.save();
    ctxB.transform(1, 0.5, -0.5, 1, 30, 10);
    for (let x = -canvasB.width; x < canvasB.width * 2; x += 40) {
        ctxB.beginPath(); ctxB.moveTo(x, -canvasB.height); ctxB.lineTo(x, canvasB.height*2); ctxB.stroke();
    }
    ctxB.restore();
}
drawGrid();

function triggerHaptic(type) {
    const glow = document.getElementById('haptic-glow');
    glow.style.background = type === 'correct' ? "radial-gradient(circle, rgba(0,255,153,0.15) 0%, transparent 70%)" : "radial-gradient(circle, rgba(255,77,77,0.15) 0%, transparent 70%)";
    setTimeout(() => glow.style.background = "transparent", 300);
}

function initCharts() {
    const cfg = (color) => ({
        type: 'line', data: { labels: ['0'], datasets: [{ data: [0], borderColor: color, fill: true, backgroundColor: color + '11' }] },
        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: false }, scales: { x: { display: false }, y: { display: false, min: 0, max: 100 } } }
    });
    charts.noetic = new Chart(document.getElementById('noeticChart'), cfg('#00f2ff'));
    charts.learning = new Chart(document.getElementById('learningChart'), cfg('#7000ff'));
    charts.prod = new Chart(document.getElementById('prodChart'), cfg('#00ff99'));
}

function handleAction() {
    if(!gameStarted) {
        gameStarted = true;
        // Select 50 random questions from pool
        questions = shuffle([...questionPool]).slice(0, TEST_SIZE);
        
        document.getElementById('start-view').style.display = 'none';
        document.getElementById('game-view').style.display = 'block';
        document.getElementById('action-btn').style.display = 'none';
        document.getElementById('param-ui').style.opacity = '1';
        initCharts();
        loadQuestion();
        
        setInterval(() => {
            if(timeLeft > 0 && currentQ < TEST_SIZE) {
                timeLeft--; document.getElementById('timer').innerText = timeLeft;
            } else if (timeLeft <= 0) { endGame(); }
        }, 1000);
    } else {
        currentQ++;
        if(currentQ < TEST_SIZE) loadQuestion();
        else endGame();
    }
}

function loadQuestion() {
    answered = false; startT = Date.now();
    document.getElementById('action-btn').style.display = "none";
    let q = questions[currentQ];
    document.getElementById('question').innerText = `NODE ${currentQ + 1}: ${q.q}`;
    // Shuffle options for this question
    let opts = shuffle([...q.options]);
    document.getElementById('options').innerHTML = opts.map(o => `<div class="option" onclick="selectAnswer(this, '${o.replace(/'/g, "\\'")}')">${o}</div>`).join('');
}

function selectAnswer(el, ans) {
    if(answered) return; answered = true;
    let latency = (Date.now() - startT) / 1000;
    latencies.push(latency);
    
    if(ans === questions[currentQ].answer) {
        xp += 10; el.classList.add('selected-correct'); triggerHaptic('correct');
    } else {
        xp -= 5; el.classList.add('selected-wrong'); triggerHaptic('wrong');
        document.getElementById('game-card').classList.add('shake-card');
        setTimeout(() => document.getElementById('game-card').classList.remove('shake-card'), 500);
    }

    // Update Graphs
    let acc = Math.max(0, (xp / ((currentQ + 1) * 10)) * 100);
    let vel = Math.max(0, 100 - (latency * 10));
    charts.noetic.data.labels.push(currentQ); charts.noetic.data.datasets[0].data.push(acc); charts.noetic.update();
    charts.learning.data.labels.push(currentQ); charts.learning.data.datasets[0].data.push(vel); charts.learning.update();
    charts.prod.data.labels.push(currentQ); charts.prod.data.datasets[0].data.push((acc*0.7) + (vel*0.3)); charts.prod.update();

    document.getElementById('xp').innerText = xp;
    document.getElementById('action-btn').innerText = (currentQ < TEST_SIZE - 1) ? "Next Question" : "Finalize Evaluation";
    document.getElementById('action-btn').style.display = "block";
}

function endGame() {
    document.getElementById('game-view').style.display = 'none';
    document.getElementById('report-screen').style.display = 'flex';
    document.getElementById('action-btn').style.display = 'none';
    
    let finalXP = Math.max(0, xp);
    let avgLat = latencies.length ? (latencies.reduce((a,b)=>a+b,0)/latencies.length) : 0;
    let nai = Math.round((finalXP * 2) - (avgLat * 5));
    
    document.getElementById('final-nai').innerText = nai;
    let r = "NEURAL TRAINEE", c = "#ff4d4d";
    if(nai > 150) { r = "NOETIC MASTER"; c = "#00f2ff"; }
    else if(nai > 80) { r = "COGNITIVE ARCHITECT"; c = "#00ff99"; }
    
    document.getElementById('rank').innerText = r;
    document.getElementById('rank').style.color = c;
}
</script>
</body>
</html>