'+title+'

```html
<div id="eco-game">
  <style>
    #eco-game {
      --green:#48C774; --yellow:#FFD93D; --blue:#45B7F7;
      --red:#FF6B6B; --orange:#FF9F43; --purple:#A66CFF;
      --ink:#263238; --cream:#FFFDF5;
      font-family:Arial,Helvetica,sans-serif;
      color:var(--ink); background:var(--cream);
      width:100%; min-height:600px; border-radius:18px;
      overflow:hidden; box-sizing:border-box;
    }
    #eco-game * {box-sizing:border-box}
    #eco-game button,#eco-game input,#eco-game select {
      font:inherit;
    }
    #eco-game button {
      border:2px solid var(--ink); border-radius:12px;
      padding:11px 15px; font-weight:bold; cursor:pointer;
      color:var(--ink); background:white;
      transition:transform .12s,filter .12s;
    }
    #eco-game button:hover {transform:translateY(-2px);filter:brightness(.97)}
    #eco-game button:focus-visible,#eco-game input:focus-visible {
      outline:3px solid #174EA6;outline-offset:2px;
    }
    #eco-game .primary {background:var(--yellow)}
    #eco-game .green {background:var(--green)}
    #eco-game .blue {background:#D9F2FF}
    #eco-game .red {background:#FFDAD8}
    #eco-game .purple {background:#E9DFFF}
    #eco-game .orange {background:#FFE0BB}
    #eco-game .top {
      background:var(--green);padding:16px 18px;
      border-bottom:4px solid var(--ink);
    }
    #eco-game .brand {font-size:clamp(21px,4vw,32px);font-weight:900}
    #eco-game .tagline {font-size:13px;margin-top:5px}
    #eco-game .stats {
      display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
    }
    #eco-game .pill {
      background:white;border:2px solid var(--ink);
      border-radius:30px;padding:6px 10px;font-size:13px;font-weight:bold;
    }
    #eco-game .content {padding:18px;max-width:850px;margin:auto}
    #eco-game h1 {font-size:clamp(26px,5vw,40px);line-height:1.12;margin:5px 0 12px}
    #eco-game h2 {font-size:23px;margin:4px 0 12px}
    #eco-game h3 {font-size:18px;margin:5px 0 8px}
    #eco-game p {line-height:1.55}
    #eco-game .muted {color:#52616A;font-size:14px}
    #eco-game .hero {
      background:#D9F2FF;border:3px solid var(--ink);
      border-radius:18px;padding:22px;text-align:center;
    }
    #eco-game .sun {font-size:42px}
    #eco-game .big-garden {
      background:#A7E99C;border:3px solid var(--ink);
      border-radius:16px;padding:15px;text-align:center;
      font-size:42px;margin:14px 0;
    }
    #eco-game .panel {
      background:white;border:2px solid var(--ink);
      border-radius:15px;padding:15px;margin:12px 0;
    }
    #eco-game .grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    #eco-game .three {grid-template-columns:repeat(3,minmax(0,1fr))}
    #eco-game .tile {
      border:2px solid var(--ink);border-radius:13px;
      padding:12px;text-align:center;background:white;
    }
    #eco-game .tile .emoji {font-size:35px;display:block;margin-bottom:6px}
    #eco-game .actions {display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
    #eco-game .actions button {flex:1 1 145px}
    #eco-game label {display:block;font-weight:bold;margin:12px 0 5px}
    #eco-game input,#eco-game select {
      width:100%;padding:11px;border:2px solid #819099;
      border-radius:9px;background:white;color:var(--ink);
    }
    #eco-game .notice {
      padding:12px;border-radius:10px;background:#FFF1AD;
      margin:12px 0;line-height:1.5;
    }
    #eco-game .success {background:#D9F7E3}
    #eco-game .error {background:#FFDAD8}
    #eco-game .bar {
      height:12px;border:1px solid var(--ink);border-radius:20px;
      overflow:hidden;background:white;margin:12px 0;
    }
    #eco-game .bar span {display:block;height:100%;background:var(--green)}
    #eco-game .garden-grid {
      display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
      gap:4px;background:#C9E8B8;border:3px solid var(--ink);
      padding:7px;border-radius:12px;margin:12px 0;
    }
    #eco-game .plot {
      aspect-ratio:1;background:#83C76A;border:2px solid #386B34;
      border-radius:5px;display:grid;place-items:center;font-size:clamp(17px,4vw,28px);
      padding:0;
    }
    #eco-game .plot.selected {background:#FFF1AD;border:3px solid #263238}
    #eco-game .plot.growing {background:#B5F0A7}
    #eco-game .plot.ready {background:#D9F2FF}
    #eco-game .chart {
      height:180px;max-width:300px;width:100%;margin:12px auto;
      border:2px solid var(--ink);border-radius:50%;
      background:conic-gradient(#FF6B6B 0% 40%,#FFD93D 40% 70%,
        #FF9F43 70% 90%,#A66CFF 90% 100%);
    }
    #eco-game .legend {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:13px}
    #eco-game .dot {display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px}
    #eco-game .answer {
      display:block;width:100%;text-align:left;margin:8px 0;
      background:white;
    }
    #eco-game .answer.chosen {background:#FFF1AD}
    #eco-game .footer {
      text-align:center;background:#D9F2FF;padding:12px;font-size:12px;
      border-top:2px solid var(--ink);
    }
    @media(max-width:480px) {
      #eco-game .content {padding:12px}
      #eco-game .grid.three {grid-template-columns:repeat(2,minmax(0,1fr))}
      #eco-game .top {padding:13px}
    }
  </style>

  <div class="top">
    <div class="brand">🌱 ECO-GARDEN</div>
    <div class="tagline">THE DATA-DRIVEN GARDENER · DESIGN • GROW • ANALYSE</div>
    <div class="stats" id="eco-stats"></div>
  </div>
  <div class="content" id="eco-screen" aria-live="polite"></div>
  <div class="footer">🌻 Eco-Garden Maths Quest · Year 5 Mathematics</div>

  <script>
  (function(){
    const root=document.getElementById('eco-game');
    if(!root || root.dataset.started) return;
    root.dataset.started='yes';

    const $=id=>root.querySelector('#'+id);
    const crops={
      Corn:{emoji:'🌽',color:'#FFD93D'},
      Tomato:{emoji:'🍅',color:'#FF6B6B'},
      Chilli:{emoji:'🌶️',color:'#FF9F43'},
      Eggplant:{emoji:'🍆',color:'#A66CFF'}
    };
    const daily=[6,8,8,10,13];
    const state={
      page:'home',name:'',cls:'',character:'👨‍🌾',
      stars:0,round:1,plots:Array(6).fill(null),
      length:6,width:4,area:24,perimeter:20,
      watered:false,fertilised:false,harvested:false,sold:false,
      planted:{},harvest:{},sales:{},missionDone:false,
      statsDone:false,decision:'',decisionReason:'',
      quizIndex:0,quizAnswers:[],quizDone:false
    };

    function esc(v){
      return String(v).replace(/[&<>"']/g,c=>({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
      }[c]));
    }
    function save(){
      try{
        localStorage.setItem('ecoGardenEmbedV1',JSON.stringify({
          name:state.name,cls:state.cls,character:state.character,
          stars:state.stars,round:state.round,page:state.page
        }));
      }catch(e){}
    }
    function header(){
      $('eco-stats').innerHTML=state.name
        ? '<span class="pill">'+esc(state.character)+' '+esc(state.name)+'</span>'+
          '<span class="pill">⭐ '+state.stars+'</span>'+
          '<span class="pill">Round '+state.round+'/2</span>'
        :'';
    }
    function render(){
      header();save();
      const s=$('eco-screen');
      const pages={
        home,register,character,mission,garden,seeds,growing,harvest,review,
        statistics,decision,second,finalReview,quiz,result,knowledge,help
      };
      (pages[state.page]||home)(s);
      root.scrollIntoView({behavior:'smooth',block:'nearest'});
    }
    function shell(title,subtitle,body,buttons=''){
      $('eco-screen').innerHTML=
        '<h1>'+title+'</h1><p class="muted">'+subtitle+'</p>'+
        body+(buttons?'<div class="actions">'+buttons+'</div>':'');
    }
    function btn(text,act,cls='primary'){
      return '<button type="button" class="'+cls+'" data-act="'+act+'">'+text+'</button>';
    }
    function field(label,id,value,type='text',min=''){
      return '<label for="'+id+'">'+label+'</label><input id="'+id+'" type="'+type+'" value="'+esc(value)+'" '+(min!==''?'min="'+min+'"':'')+' required>';
    }
    function home(){
      shell('Your garden adventure starts here!','A colourful mathematics farming game for Year 5.',
        '<div class="hero"><div class="sun">☀️</div>'+
        '<div class="big-garden">🌽 🍅 🌶️ 🍆</div>'+
        '<h2>Design. Grow. Harvest. Analyse.</h2>'+
        '<p>Build a garden, grow vegetables, help your customers and use statistics to make smarter decisions!</p>'+
        '<p>First, build your garden physically with your A3 grid and puzzle pieces. Then enter your dimensions here.</p></div>',
        btn('START ADVENTURE →','register')+
        btn('📚 Maths Knowledge','knowledge','blue')+
        btn('❔ How to Play','help','orange'));
    }
    function register(){
      shell('Welcome, young gardener!','Enter a nickname to begin.',
        '<div class="panel">'+field('Player nickname','eco-name',state.name)+
        field('Class','eco-class',state.cls)+
        '<div id="eco-error"></div></div>',
        btn('CONTINUE →','register-next')+btn('← Home','home','blue'));
    }
    function character(){
      shell('Choose your gardener','Both characters have the same abilities and rewards.',
        '<div class="grid">'+
        '<button class="tile '+(state.character==='👨‍🌾'?'selected':'')+'" data-act="male"><span class="emoji">👨‍🌾</span><strong>Male Gardener</strong><p>Ready to grow!</p></button>'+
        '<button class="tile '+(state.character==='👩‍🌾'?'selected':'')+'" data-act="female"><span class="emoji">👩‍🌾</span><strong>Female Gardener</strong><p>Ready to grow!</p></button></div>'+
        '<div class="notice">Your character choice is just for fun. All pupils receive the same challenges.</div>',
        btn('CONFIRM CHARACTER →','character-next'));
    }
    function mission(){
      shell('📋 Customer Mission #'+(state.round===1?'001':'002'),
        'Read the customer order carefully.',
        '<div class="panel"><h2>👩‍🌾 Customer says:</h2>'+
        (state.round===1
          ?'<p>“Welcome, gardener! I need <strong>6 baskets of tomatoes</strong> and <strong>4 baskets of corn</strong>. Please design a garden, grow the requested vegetables and deliver my order.”</p>'
          :'<p>“Welcome back! Customer demand is strongest for tomatoes and corn. Study the sales data, plan your garden and deliver at least 4 baskets of tomatoes and 2 baskets of corn.”</p>')+
        '<div class="notice">Your mission: plan the garden → calculate area and perimeter → plant → care for crops → harvest → sell.</div></div>',
        btn('ACCEPT MISSION →','garden')+btn('📚 Formula Help','knowledge','blue'));
    }
    function garden(){
      shell('🧩 Garden Builder','Use your physical A3 grid and puzzle pieces before entering your dimensions.',
        '<div class="notice">Build a garden on your physical grid. Count the squares and trace the outside boundary. Then enter the dimensions below.</div>'+
        '<div class="panel">'+
        field('Length (metres)','eco-length',state.length,'number','1')+
        field('Width (metres)','eco-width',state.width,'number','1')+
        '<p>For this first garden, use a rectangle.</p>'+
        '<div class="grid"><div class="tile"><span class="emoji">📐</span><strong>Area</strong><p id="eco-area">—</p></div>'+
        '<div class="tile"><span class="emoji">📏</span><strong>Perimeter</strong><p id="eco-perimeter">—</p></div></div>'+
        '<div class="garden-grid" id="eco-grid"></div>'+
        '<div class="notice">Area = length × width.<br>Perimeter = 2 × (length + width).</div>'+
        '<div id="eco-geo-feedback"></div></div>',
        btn('CHECK & CONTINUE →','garden-next')+
        btn('📚 Formula Help','knowledge','blue'));
      updateGardenPreview();
    }
    function updateGardenPreview(){
      const l=Math.max(1,Math.min(20,Number($('eco-length')?.value)||1));
      const w=Math.max(1,Math.min(20,Number($('eco-width')?.value)||1));
      const a=l*w,p=2*(l+w);
      if($('eco-area')) $('eco-area').textContent=a+' m²';
      if($('eco-perimeter')) $('eco-perimeter').textContent=p+' m';
      if($('eco-grid')){
        const cols=Math.min(6,l),rows=Math.min(4,w);
        $('eco-grid').innerHTML=Array.from({length:cols*rows},()=>'<div class="plot">🌱</div>').join('');
      }
    }
    function seeds(){
      const cards=Object.entries(crops).map(([name,c])=>
        '<div class="tile"><span class="emoji">'+c.emoji+'</span><strong>'+name+'</strong>'+
        '<p class="muted">1 plot produces 2 baskets in this game.</p>'+
        '<button type="button" data-act="toggle-crop" data-crop="'+name+'" class="'+(state.planted[name]?'green':'primary')+'">'+
        (state.planted[name]?'Selected: '+(state.planted[name])+' plots':'Select crop')+'</button>'+
        '<label>Plots</label><input aria-label="'+name+' plots" type="number" min="0" max="6" value="'+(state.planted[name]||0)+'" data-crop-input="'+name+'"></div>'
      ).join('');
      shell('🌱 Choose Your Seeds','Select crops that match your customer order.',
        '<div class="notice">Each plot produces 2 baskets when cared for properly. The six-plot garden limits how much you can grow.</div>'+
        '<div class="grid">'+cards+'</div><div id="eco-seed-feedback"></div>',
        btn('CONFIRM PLANTING →','plant')+btn('← Garden','garden','blue'));
    }
    function growing(){
      const plots=Object.entries(state.planted).filter(([,n])=>n>0);
      shell('💧 Grow Your Crops','Complete both care actions before harvesting.',
        '<div class="garden-grid">'+Array.from({length:6},(_,i)=>{
          const crop=plots.reduce((acc,[name,n])=>i< n?name:acc,null);
          return '<div class="plot '+(state.harvested?'ready':state.watered&&state.fertilised?'growing':'')+'">'+
            (state.harvested?'🧺':crop?crops[crop].emoji:'🟩')+'</div>';
        }).join('')+'</div>'+
        '<div class="grid"><div class="tile"><span class="emoji">'+(state.watered?'💧':'🪣')+'</span><strong>Water</strong><p>'+(state.watered?'Completed':'Not yet completed')+'</p></div>'+
        '<div class="tile"><span class="emoji">'+(state.fertilised?'🌿':'🧴')+'</span><strong>Fertilise</strong><p>'+(state.fertilised?'Completed':'Not yet completed')+'</p></div></div>'+
        '<div class="notice">'+(state.watered&&state.fertilised?'Your crops are ready to harvest!':'Water and fertilise your plants to help them grow.')+'</div>',
        btn(state.watered?'WATERED ✓':'💧 WATER PLANTS','water',state.watered?'green':'blue')+
        btn(state.fertilised?'FERTILISED ✓':'🌿 FERTILISE','fertilise',state.fertilised?'green':'orange')+
        btn('HARVEST →','harvest',state.watered&&state.fertilised?'primary':'blue'));
    }
    function harvest(){
      const items=Object.entries(state.planted).filter(([,n])=>n>0);
      const total=items.reduce((sum,[,n])=>sum+n*2,0);
      shell('🧺 Harvest & Sell','Your plants have grown! Review the harvest.',
        '<div class="grid">'+items.map(([name,n])=>
          '<div class="tile"><span class="emoji">'+crops[name].emoji+'</span><strong>'+name+'</strong>'+
          '<p>'+n+' plots</p><p><strong>'+(n*2)+' baskets</strong></p></div>'
        ).join('')+'</div>'+
        '<div class="panel"><h3>Harvest total: '+total+' baskets</h3>'+
        '<p>Each planted plot produces 2 baskets in this game.</p>'+
        '<div id="eco-harvest-message">'+(state.harvested?'Harvest recorded.':'Harvest your crops first.')+'</div></div>',
        btn(state.harvested?'HARVEST RECORDED ✓':'HARVEST CROPS','harvest-do',state.harvested?'green':'primary')+
        btn(state.sold?'SOLD ✓':'SELL TO CUSTOMER →','sell',state.sold?'green':'orange'));
    }
    function review(){
      const required=state.round===1?{Tomato:6,Corn:4}:{Tomato:4,Corn:2};
      const delivered=Object.fromEntries(Object.entries(state.planted).map(([n,v])=>[n,v*2]));
      const fulfilled=Object.entries(required).every(([n,v])=>(delivered[n]||0)>=v);
      const stars=fulfilled?5:3;
      shell('⭐ Customer Review','The customer checks your delivery.',
        '<div class="hero"><div class="sun">😊</div><h2>'+(fulfilled?'Wonderful work!':'Good effort, gardener!')+'</h2>'+
        '<div style="font-size:34px">'+(fulfilled?'⭐⭐⭐⭐⭐':'⭐⭐⭐')+'</div>'+
        '<p>'+(fulfilled?'You met the requested quantities!':'You completed the harvest. Review the order and see what you could improve next time.')+'</p></div>'+
        '<div class="panel"><h3>Delivery summary</h3>'+
        Object.entries(required).map(([n,v])=>'<p>'+crops[n].emoji+' '+n+': requested '+v+', available '+(delivered[n]||0)+' baskets</p>').join('')+
        '<p><strong>Order fulfilled:</strong> '+(fulfilled?'Yes':'Not yet')+'</p></div>',
        btn('CONTINUE TO STATISTICS →','statistics'));
    }
    function statistics(){
      shell('📊 Statistics Laboratory','Use the data to understand customer demand and daily sales.',
        '<div class="panel"><h2>🥧 Crop Demand</h2>'+
        '<p>Example customer demand: Tomato 16, Corn 12, Chilli 8, Eggplant 4 baskets.</p>'+
        '<div class="chart" role="img" aria-label="Pie chart: tomato 40%, corn 30%, chilli 20%, eggplant 10%"></div>'+
        '<div class="legend"><span><i class="dot" style="background:#FF6B6B"></i>Tomato 16</span>'+
        '<span><i class="dot" style="background:#FFD93D"></i>Corn 12</span>'+
        '<span><i class="dot" style="background:#FF9F43"></i>Chilli 8</span>'+
        '<span><i class="dot" style="background:#A66CFF"></i>Eggplant 4</span></div>'+
        '<p>Which crop has the highest demand?</p>'+
        '<select id="eco-demand-answer"><option value="">Choose an answer</option><option>Tomato</option><option>Corn</option><option>Chilli</option><option>Eggplant</option></select>'+
        '<h2>📈 Daily Sales</h2><p>Monday 6 · Tuesday 8 · Wednesday 8 · Thursday 10 · Friday 13</p>'+
        '<p>Calculate the mean, median, mode and range.</p>'+
        field('Mean','eco-mean','','number')+
        field('Median','eco-median','','number')+
        field('Mode','eco-mode','','number')+
        field('Range','eco-range','','number')+
        '<div id="eco-stats-feedback"></div></div>',
        btn('CHECK STATISTICS →','stats-check')+
        btn('📚 Review Formulas','knowledge','blue'));
    }
    function decision(){
      shell('💡 Make a Data-Based Decision','Use the crop-demand chart to plan the next round.',
        '<div class="panel"><p>Tomatoes have the highest demand in the example dataset. Choose a crop to prioritise, then explain why.</p>'+
        '<label for="eco-decision">Which crop will you prioritise?</label>'+
        '<select id="eco-decision"><option value="">Choose a crop</option>'+Object.keys(crops).map(n=>'<option>'+n+'</option>').join('')+'</select>'+
        '<label for="eco-reason">Why did you choose it?</label>'+
        '<select id="eco-reason"><option value="">Choose a reason</option>'+
        '<option value="highest">It has the highest demand in the chart.</option>'+
        '<option value="lowest">It has the lowest demand in the chart.</option>'+
        '<option value="random">I chose it without using the data.</option></select>'+
        '<div id="eco-decision-feedback"></div></div>',
        btn('SUBMIT DECISION →','decision-check')+btn('← Statistics','statistics','blue'));
    }
    function second(){
      shell('🌻 Round Two: Improve Your Garden','Use what you learned to plan a better harvest.',
        '<div class="hero"><div class="sun">🌞</div><h2>New customer order!</h2>'+
        '<p>“Please deliver at least 4 baskets of tomatoes and 2 baskets of corn. Use the demand data to plan your garden.”</p></div>'+
        '<div class="notice">You have completed the statistics challenge. Now apply your knowledge to a new farming round.</div>',
        btn('START ROUND TWO →','second-start'));
    }
    function finalReview(){
      shell('🏆 Final Customer Review','Compare your farming progress.',
        '<div class="hero"><div class="sun">🏆</div><h2>Well done, '+esc(state.name)+'!</h2>'+
        '<p>You have completed both farming rounds. Now show what you have learned.</p>'+
        '<p>Total stars earned: <strong>'+state.stars+'</strong></p></div>',
        btn('TAKE FINAL MATHS QUIZ →','quiz'));
    }
    const questions=[
      {q:'A rectangle is 6 m long and 4 m wide. What is its area?',a:['10 m²','20 m²','24 m²','24 m'],correct:2,topic:'Geometry',why:'Area = length × width = 6 × 4 = 24 m².'},
      {q:'A square has sides of 5 m. What is its perimeter?',a:['10 m','20 m','25 m²','15 m'],correct:1,topic:'Geometry',why:'Perimeter = 4 × side = 4 × 5 = 20 m.'},
      {q:'A rectangle has an area of 32 m². A triangle adds 6 m². What is the total area?',a:['26 m²','38 m²','64 m²','38 m'],correct:1,topic:'Geometry',why:'Add the two areas: 32 + 6 = 38 m².'},
      {q:'A composite shape has outside edges of 8, 8, 4, 3 and 5 m. What is its perimeter?',a:['24 m','28 m','38 m²','32 m'],correct:1,topic:'Geometry',why:'Add the outside edges: 8 + 8 + 4 + 3 + 5 = 28 m.'},
      {q:'Which crop has the highest demand in the example pie chart?',a:['Chilli','Eggplant','Corn','Tomato'],correct:3,topic:'Statistics',why:'Tomato has 16 baskets, the highest value.'},
      {q:'Find the mean of 6, 8, 8, 10, 13.',a:['8','9','10','7'],correct:1,topic:'Statistics',why:'The total is 45. Divide by 5: 45 ÷ 5 = 9.'},
      {q:'Find the median of 6, 8, 8, 10, 13.',a:['6','10','8','9'],correct:2,topic:'Statistics',why:'The ordered middle value is 8.'},
      {q:'Find the mode of 6, 8, 8, 10, 13.',a:['6','8','10','13'],correct:1,topic:'Statistics',why:'8 occurs most frequently.'},
      {q:'Find the range of 6, 8, 8, 10, 13.',a:['5','7','8','13'],correct:1,topic:'Statistics',why:'Range = highest − lowest = 13 − 6 = 7.'},
      {q:'Tomato demand is 16 baskets and eggplant demand is 4. How many more tomato baskets are needed?',a:['10','12','20','4'],correct:1,topic:'Reasoning',why:'16 − 4 = 12 baskets more.'}
    ];
    function quiz(){
      if(state.quizIndex>=questions.length){state.page='result';render();return}
      const q=questions[state.quizIndex];
      const chosen=state.quizAnswers[state.quizIndex];
      shell('🎯 Final Maths Challenge','Question '+(state.quizIndex+1)+' of '+questions.length,
        '<div class="bar"><span style="width:'+((state.quizIndex+1)/questions.length*100)+'%"></span></div>'+
        '<div class="panel"><span class="pill">'+q.topic+'</span><h2>'+q.q+'</h2>'+
        q.a.map((a,i)=>'<button type="button" class="answer '+(chosen===i?'chosen':'')+'" data-act="quiz-answer" data-answer="'+i+'">'+String.fromCharCode(65+i)+'. '+a+'</button>').join('')+
        '<div id="eco-quiz-feedback"></div></div>',
        btn(state.quizIndex===questions.length-1?'FINISH QUIZ →':'NEXT QUESTION →','quiz-next')+
        btn('📚 Review Formulas','knowledge','blue'));
    }
    function result(){
      const correct=state.quizAnswers.filter((a,i)=>a===questions[i].correct).length;
      const pct=Math.round(correct/questions.length*100);
      const rank=pct>=90?'DATA-DRIVEN MASTER GARDENER':pct>=70?'SKILLED GARDEN DESIGNER':pct>=50?'GROWING MATHEMATICIAN':'BEGINNER GARDENER';
      shell('🎉 Adventure Complete!','Here is your final result.',
        '<div class="hero"><div class="sun">🏆</div><h2>'+esc(rank)+'</h2>'+
        '<p style="font-size:28px"><strong>'+correct+' / '+questions.length+'</strong></p>'+
        '<p>'+pct+'% correct</p></div>'+
        '<div class="panel"><h3>Review your answers</h3>'+
        questions.map((q,i)=>'<p>'+(state.quizAnswers[i]===q.correct?'✅':'❌')+' <strong>'+q.topic+':</strong> '+q.q+'<br><span class="muted">'+q.why+'</span></p>').join('')+
        '</div>',
        btn('PLAY AGAIN','restart')+btn('📚 Maths Knowledge','knowledge','blue'));
    }
    function knowledge(){
      shell('📚 Maths Knowledge Garden','Use these reminders whenever you need help.',
        '<div class="panel"><h2>Geometry</h2>'+
        '<p><strong>Rectangle area:</strong> length × width</p>'+
        '<p><strong>Rectangle perimeter:</strong> 2 × (length + width)</p>'+
        '<p><strong>Square area:</strong> side × side</p>'+
        '<p><strong>Square perimeter:</strong> 4 × side</p>'+
        '<p><strong>Triangle area:</strong> ½ × base × perpendicular height</p>'+
        '<p><strong>Composite area:</strong> add the areas of the parts.</p>'+
        '<p><strong>Composite perimeter:</strong> add only the outside boundary edges.</p>'+
        '<div class="notice">Remember: area uses square units, such as m². Perimeter uses length units, such as m.</div>'+
        '<h2>Statistics</h2>'+
        '<p><strong>Mean:</strong> total ÷ number of values.</p>'+
        '<p><strong>Median:</strong> middle value after arranging the data in order.</p>'+
        '<p><strong>Mode:</strong> most frequent value.</p>'+
        '<p><strong>Range:</strong> highest value − lowest value.</p>'+
        '</div>',
        btn('← Back to Game','back')+btn('How to Play','help','blue'));
    }
    function help(){
      shell('❔ How to Play','Follow the stages to complete your gardening adventure.',
        '<div class="panel"><p>1. Enter a nickname and class.</p>'+
        '<p>2. Choose a gardener.</p>'+
        '<p>3. Read the customer mission.</p>'+
        '<p>4. Build your garden using your physical A3 grid, then enter the dimensions.</p>'+
        '<p>5. Select crops and plant them.</p>'+
        '<p>6. Water and fertilise your plants.</p>'+
        '<p>7. Harvest and sell the vegetables.</p>'+
        '<p>8. Study the customer-demand chart and calculate statistics.</p>'+
        '<p>9. Use the data to plan your second round.</p>'+
        '<p>10. Complete the final quiz.</p></div>',
        btn('START / CONTINUE →','back')+btn('📚 Formula Help','knowledge','blue'));
    }

    function startPlanting(){
      const inputs=root.querySelectorAll('[data-crop-input]');
      const planted={};let total=0;
      inputs.forEach(el=>{
        const n=Math.max(0,Math.min(6,Math.floor(Number(el.value)||0)));
        planted[el.dataset.crop]=n;total+=n;
      });
      if(total>6){
        $('eco-seed-feedback').innerHTML='<div class="notice error">You have only 6 garden plots. Please choose 6 plots or fewer.</div>';return;
      }
      const req=state.round===1?{Tomato:3,Corn:2}:{Tomato:2,Corn:1};
      const enough=Object.entries(req).every(([n,v])=>(planted[n]||0)>=v);
      if(!enough){
        $('eco-seed-feedback').innerHTML='<div class="notice error">Your order needs at least '+Object.entries(req).map(([n,v])=>v+' plots of '+n).join(' and ')+'. Please adjust your selection.</div>';return;
      }
      state.planted=planted;state.watered=false;state.fertilised=false;
      state.harvested=false;state.sold=false;state.page='growing';render();
    }
    function statsCheck(){
      const mean=Number($('eco-mean').value),med=Number($('eco-median').value),
        mode=Number($('eco-mode').value),range=Number($('eco-range').value);
      const demand=$('eco-demand-answer').value;
      if(!['Tomato'].includes(demand)||!$('eco-mean').value||!$('eco-median').value||!$('eco-mode').value||!$('eco-range').value){
        $('eco-stats-feedback').innerHTML='<div class="notice error">Please answer all five questions before checking.</div>';return;
      }
      const answers=[mean===9,med===8,mode===8,range===7,demand==='Tomato'];
      const score=answers.filter(Boolean).length;
      state.stars+=score;
      state.statsDone=true;
      $('eco-stats-feedback').innerHTML='<div class="notice '+(score===5?'success':'')+'"><strong>You scored '+score+'/5.</strong><br>'+
        'Mean: 9 (45 ÷ 5). Median: 8. Mode: 8. Range: 13 − 6 = 7. Highest demand: Tomato.</div>';
      const b=$('eco-screen').querySelector('[data-act="stats-check"]');
      if(b){b.textContent='CONTINUE TO DECISION →';b.dataset.act='to-decision';}
      header();save();
    }
    function checkDecision(){
      const crop=$('eco-decision').value,reason=$('eco-reason').value;
      if(!crop||!reason){$('eco-decision-feedback').innerHTML='<div class="notice error">Please choose a crop and a reason.</div>';return;}
      const correct=crop==='Tomato'&&reason==='highest';
      if(correct)state.stars+=2;
      state.decision=crop;state.decisionReason=reason;
      $('eco-decision-feedback').innerHTML='<div class="notice '+(correct?'success':'')+'">'+
        (correct?'Good reasoning! Your answer matches the example demand data.':'Review the chart. Tomatoes have the highest demand at 16 baskets. Choose a crop and reason that match the data.')+'</div>';
      const b=$('eco-screen').querySelector('[data-act="decision-check"]');
      if(b){b.textContent='START SECOND ROUND →';b.dataset.act='decision-next';}
      header();save();
    }
    function harvestDo(){
      if(!state.watered||!state.fertilised){state.page='growing';render();return;}
      state.harvested=true;
      state.harvest=Object.fromEntries(Object.entries(state.planted).map(([n,v])=>[n,v*2]));
      state.sales={...state.harvest};
      state.page='harvest';render();
    }
    function sell(){
      if(!state.harvested){state.page='growing';render();return;}
      if(!state.sold){
        state.sold=true;
        state.missionDone=true;
        const required=state.round===1?{Tomato:6,Corn:4}:{Tomato:4,Corn:2};
        const fulfilled=Object.entries(required).every(([n,v])=>(state.sales[n]||0)>=v);
        state.stars+=fulfilled?5:3;
      }
      state.page='review';render();
    }
    function handle(act,el){
      switch(act){
        case 'home':state.page='home';break;
        case 'register':state.page='register';break;
        case 'register-next':{
          const n=$('eco-name').value.trim(),c=$('eco-class').value.trim();
          if(!n||!c){$('eco-error').innerHTML='<div class="notice error">Please enter your nickname and class.</div>';return;}
          state.name=n;state.cls=c;state.page='character';break;
        }
        case 'male':state.character='👨‍🌾';break;
        case 'female':state.character='👩‍🌾';break;
        case 'character-next':state.page='mission';break;
        case 'garden':state.page='garden';break;
        case 'garden-next':{
          const l=Number($('eco-length').value),w=Number($('eco-width').value);
          if(!Number.isInteger(l)||!Number.isInteger(w)||l<1||w<1||l>20||w>20){
            $('eco-geo-feedback').innerHTML='<div class="notice error">Enter whole-number dimensions from 1 to 20 metres.</div>';return;
          }
          if(l*w>6){
            $('eco-geo-feedback').innerHTML='<div class="notice error">For this prototype, the garden can contain at most 6 plots. Choose dimensions whose product is 6 or less.</div>';return;
          }
          state.length=l;state.width=w;state.area=l*w;state.perimeter=2*(l+w);
          state.page='seeds';break;
        }
        case 'knowledge':state.page='knowledge';break;
        case 'help':state.page='help';break;
        case 'back':state.page=state.name?'mission':'home';break;
        case 'toggle-crop':{
          const name=el.dataset.crop;
          const input=root.querySelector('[data-crop-input="'+name+'"]');
          input.value=Number(input.value)>0?0:1;break;
        }
        case 'plant':startPlanting();return;
        case 'water':state.watered=true;state.page='growing';break;
        case 'fertilise':state.fertilised=true;state.page='growing';break;
        case 'harvest':state.page='harvest';break;
        case 'harvest-do':harvestDo();return;
        case 'sell':sell();return;
        case 'statistics':state.page='statistics';break;
        case 'stats-check':statsCheck();return;
        case 'to-decision':state.page='decision';break;
        case 'decision':state.page='decision';break;
        case 'decision-check':checkDecision();return;
        case 'decision-next':state.round=2;state.planted={};state.harvest={};state.sales={};state.watered=false;state.fertilised=false;state.harvested=false;state.sold=false;state.page='second';break;
        case 'second-start':state.page='mission';break;
        case 'review':state.page='review';break;
        case 'quiz':state.quizIndex=0;state.quizAnswers=[];state.page='quiz';break;
        case 'quiz-answer':state.quizAnswers[state.quizIndex]=Number(el.dataset.answer);render();return;
        case 'quiz-next':
          if(state.quizAnswers[state.quizIndex]===undefined){$('eco-quiz-feedback').innerHTML='<div class="notice error">Choose an answer before continuing.</div>';return;}
          if(state.quizIndex<questions.length-1)state.quizIndex++;else state.page='result';
          break;
        case 'result':state.page='result';break;
        case 'restart':
          state.page='home';state.name='';state.cls='';state.round=1;state.stars=0;
          state.planted={};state.harvest={};state.sales={};state.watered=false;
          state.fertilised=false;state.harvested=false;state.sold=false;
          state.statsDone=false;state.quizAnswers=[];state.quizIndex=0;break;
      }
      render();
    }

    root.addEventListener('click',function(e){
      const el=e.target.closest('button[data-act]');
      if(!el)return;
      handle(el.dataset.act,el);
    });
    root.addEventListener('input',function(e){
      if(e.target.id==='eco-length'||e.target.id==='eco-width')updateGardenPreview();
    });
    render();
  })();
  </script>
</div>
```