// ——— REMAINING GAMES — all bundled to keep things simple ———

// ============================================================
// COUNT GARDEN — count the flowers and tap the right number
// ============================================================
function CountGardenGame() {
  const [round, setRound]     = React.useState(1);
  const [count, setCount]     = React.useState(0);
  const [choices, setChoices] = React.useState([]);
  const [score, setScore]     = React.useState(0);
  useReportScore(score);
  const [feedback, setFeedback] = React.useState(null);
  const [chosen, setChosen]   = React.useState(null);
  const [seed, setSeed]       = React.useState(0);

  const ROUNDS = 10;

  const next = () => {
    const n = 2 + Math.floor(Math.random() * 9); // 2-10
    const wrongs = new Set();
    while (wrongs.size < 2) {
      const w = Math.max(1, n + (Math.floor(Math.random() * 5) - 2));
      if (w !== n) wrongs.add(w);
    }
    setCount(n);
    setChoices([...wrongs, n].sort(() => Math.random() - 0.5));
    setFeedback(null); setChosen(null);
    setSeed(s => s + 1);
  };

  React.useEffect(() => { next(); }, []);

  const answer = (v) => {
    if (feedback) return;
    setChosen(v);
    const correct = v === count;
    setFeedback(correct ? 'correct' : 'wrong');
    if (correct) setScore(s => s + 1);
    setTimeout(() => {
      if (round >= ROUNDS) { setRound(ROUNDS + 1); }
      else { setRound(r => r + 1); next(); }
    }, 1100);
  };

  if (round > ROUNDS) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 8 ? '🏆' : '🌷'}</div>
      <h2>You counted {score} / {ROUNDS} right!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={() => { setScore(0); setRound(1); next(); }}>Play again</button>
    </div>
  );

  const FLOWERS = ['🌸','🌼','🌻','🌷','🌹'];
  const flower = FLOWERS[seed % FLOWERS.length];

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Round {round}/{ROUNDS}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <div style={{ background: 'oklch(0.88 0.06 145)', border: 'var(--border-thick)',
        borderRadius: 24, padding: 24, marginBottom: 20, minHeight: 240 }}>
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 22, marginBottom: 16 }}>
          How many flowers?
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 8 }}>
          {[...Array(count)].map((_, i) => (
            <span key={i} style={{ fontSize: 'clamp(36px, 7vw, 56px)', lineHeight: 1 }}>{flower}</span>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
        {choices.map((v, i) => {
          const colors = ['var(--c-sun)','var(--c-coral)','var(--c-sky)'];
          let bg = colors[i];
          if (feedback) {
            if (v === count) bg = 'oklch(0.75 0.15 145)';
            else if (v === chosen) bg = 'oklch(0.72 0.17 25)';
            else bg = 'var(--bg-warm)';
          }
          return (
            <button key={v} onClick={() => answer(v)} style={{
              padding: 'clamp(20px,5vw,32px)', fontSize: 'clamp(32px,6vw,52px)',
              fontFamily: 'var(--font-display)', fontWeight: 900,
              background: bg, border: 'var(--border-thick)', borderRadius: 18,
              boxShadow: feedback ? 'none' : '4px 4px 0 var(--ink)', cursor: feedback ? 'default' : 'pointer',
            }}>{v}</button>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// QUIZ QUEST — multiple choice trivia
// ============================================================
function QuizQuestGame({ animalsOnly }) {
  const ALL_QUESTIONS = [
    { q: 'Which animal lays eggs but is a mammal?', a: ['Platypus','Penguin','Shark','Cat'], c: 0 },
    { q: 'How many legs does a spider have?', a: ['6','8','10','4'], c: 1 },
    { q: 'What is a baby kangaroo called?', a: ['Pup','Cub','Joey','Kit'], c: 2 },
    { q: 'Which is the biggest planet?', a: ['Earth','Mars','Saturn','Jupiter'], c: 3 },
    { q: 'How many continents are there?', a: ['5','6','7','8'], c: 2 },
    { q: 'Which animal is the fastest?', a: ['Cheetah','Lion','Horse','Eagle'], c: 0 },
    { q: 'What do bees make?', a: ['Milk','Honey','Bread','Cheese'], c: 1 },
    { q: 'Which is NOT a mammal?', a: ['Whale','Bat','Snake','Dog'], c: 2 },
    { q: 'What colour do you get mixing red + blue?', a: ['Green','Purple','Orange','Pink'], c: 1 },
    { q: 'How many sides does a triangle have?', a: ['2','3','4','5'], c: 1 },
    { q: 'Which animal has stripes?', a: ['Lion','Zebra','Bear','Frog'], c: 1 },
    { q: 'Which is the smallest?', a: ['Mouse','Cat','Dog','Horse'], c: 0 },
    { q: 'What do plants need to grow?', a: ['Coke','Sunlight','Sand','Plastic'], c: 1 },
    { q: 'Where do polar bears live?', a: ['Desert','Arctic','Jungle','Ocean'], c: 1 },
    { q: 'What sound does a duck make?', a: ['Moo','Quack','Bark','Roar'], c: 1 },
  ];

  const buildSet = () => [...ALL_QUESTIONS].sort(() => Math.random() - 0.5).slice(0, 10);
  const [questions, setQuestions] = React.useState(buildSet);
  const [idx, setIdx]         = React.useState(0);
  const [score, setScore]     = React.useState(0);
  useReportScore(score);
  const [chosen, setChosen]   = React.useState(null);

  const q = questions[idx];

  const replay = () => {
    setQuestions(buildSet());
    setIdx(0); setScore(0); setChosen(null);
  };

  const answer = (i) => {
    if (chosen !== null) return;
    setChosen(i);
    if (i === q.c) setScore(s => s + 1);
    setTimeout(() => {
      if (idx + 1 >= questions.length) setIdx(questions.length);
      else { setIdx(idx + 1); setChosen(null); }
    }, 1300);
  };

  if (idx >= questions.length) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 8 ? '🏆' : score >= 5 ? '🌟' : '📚'}</div>
      <h2>You scored {score} / {questions.length}</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={replay}>Play again</button>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Q {idx+1}/{questions.length}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <div style={{ background: 'var(--bg)', border: 'var(--border-thick)',
        borderRadius: 24, padding: 'clamp(20px, 4vw, 36px)', marginBottom: 18 }}>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 'clamp(20px, 3.5vw, 28px)', textAlign: 'center', lineHeight: 1.3 }}>{q.q}</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {q.a.map((opt, i) => {
          const colors = ['var(--c-sun)','var(--c-sky)','var(--c-grass)','var(--c-grape)'];
          let bg = colors[i];
          if (chosen !== null) {
            if (i === q.c) bg = 'oklch(0.75 0.15 145)';
            else if (i === chosen) bg = 'oklch(0.72 0.17 25)';
            else bg = 'var(--bg-warm)';
          }
          return (
            <button key={i} onClick={() => answer(i)} style={{
              padding: '18px 14px', fontSize: 'clamp(15px, 2.5vw, 18px)',
              fontFamily: 'var(--font-body)', fontWeight: 800,
              background: bg, border: 'var(--border-thick)', borderRadius: 18,
              boxShadow: chosen !== null ? 'none' : '4px 4px 0 var(--ink)',
              cursor: chosen !== null ? 'default' : 'pointer',
              color: chosen === i && i !== q.c ? 'white' : 'var(--ink)',
              textAlign: 'left', lineHeight: 1.3, minHeight: 64,
            }}>{opt}</button>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// FIND THE PAIR — odd one out / find matching shape
// ============================================================
function FindThePairGame() {
  const [round, setRound] = React.useState(1);
  const [score, setScore] = React.useState(0);
  useReportScore(score);
  const [items, setItems] = React.useState([]);
  const [target, setTarget] = React.useState(null);
  const [chosen, setChosen] = React.useState(null);
  const ROUNDS = 10;

  const SHAPES = ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🦄'];

  const setup = () => {
    const pool = [...SHAPES].sort(() => Math.random() - 0.5);
    const tgt = pool[0];
    const others = pool.slice(1, 6);
    const all = [...others, tgt, tgt].sort(() => Math.random() - 0.5);
    setItems(all);
    setTarget(tgt);
    setChosen(null);
  };

  React.useEffect(() => { setup(); }, []);

  const tap = (i) => {
    if (chosen !== null) return;
    setChosen(i);
    const correctIdxs = items.map((it, idx) => it === target ? idx : -1).filter(x => x >= 0);
    const correct = correctIdxs.includes(i);
    if (correct) setScore(s => s + 1);
    setTimeout(() => {
      if (round >= ROUNDS) setRound(ROUNDS + 1);
      else { setRound(r => r + 1); setup(); }
    }, 1100);
  };

  if (round > ROUNDS) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 8 ? '🏆' : '🎈'}</div>
      <h2>You found {score} / {ROUNDS} pairs!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={() => { setScore(0); setRound(1); setup(); }}>Play again</button>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Round {round}/{ROUNDS}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <p style={{ fontSize: 18, textAlign: 'center', fontFamily: 'var(--font-display)',
        fontWeight: 800, marginBottom: 14 }}>
        Find the two that match: <span style={{ fontSize: 32 }}>{target}</span>
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, maxWidth: 520, margin: '0 auto' }}>
        {items.map((it, i) => {
          const isCorrect = it === target;
          let bg = 'white';
          if (chosen !== null) {
            if (isCorrect) bg = 'oklch(0.85 0.14 145)';
            else if (i === chosen) bg = 'oklch(0.85 0.14 25)';
          }
          return (
            <button key={i} onClick={() => tap(i)} style={{
              aspectRatio: 1, fontSize: 'clamp(36px, 8vw, 54px)',
              background: bg, border: 'var(--border)', borderRadius: 16,
              boxShadow: chosen !== null ? 'none' : '3px 3px 0 var(--ink)',
              cursor: chosen !== null ? 'default' : 'pointer',
            }}>{it}</button>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// SUPER MEMORY — like Memory Zoo but bigger (6 pairs → 8 pairs)
// ============================================================
function SuperMemoryGame() {
  const SYMBOLS = ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯'];
  const buildDeck = () => {
    const picks = SYMBOLS.slice(0, 10);
    return [...picks, ...picks]
      .sort(() => Math.random() - 0.5)
      .map((s, i) => ({ s, i, flipped: false, matched: false }));
  };
  const [deck, setDeck] = React.useState(buildDeck);
  const [selected, setSelected] = React.useState([]);
  const [moves, setMoves] = React.useState(0);
  const [won, setWon] = React.useState(false);

  // Auto-save move count when solved (fewer moves is better — see games.jsx).
  useReportScore(won ? moves : 0);

  const flip = (idx) => {
    if (selected.length >= 2 || deck[idx].flipped || deck[idx].matched) return;
    const next = deck.map((c, i) => i === idx ? { ...c, flipped: true } : c);
    const newSel = [...selected, idx];
    setDeck(next); setSelected(newSel);
    if (newSel.length === 2) {
      setMoves(m => m + 1);
      const [a, b] = newSel;
      if (next[a].s === next[b].s) {
        setTimeout(() => {
          setDeck(d => {
            const upd = d.map((c, i) => (i === a || i === b) ? { ...c, matched: true } : c);
            if (upd.every(c => c.matched)) setWon(true);
            return upd;
          });
          setSelected([]);
        }, 400);
      } else {
        setTimeout(() => {
          setDeck(d => d.map((c, i) => (i === a || i === b) ? { ...c, flipped: false } : c));
          setSelected([]);
        }, 800);
      }
    }
  };

  const reset = () => { setDeck(buildDeck()); setSelected([]); setMoves(0); setWon(false); };

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Moves: {moves}</div>
        <div className="pill-stat">Matched: {deck.filter(c => c.matched).length / 2}/10</div>
        <button className="btn btn-yellow" style={{ marginLeft: 'auto', padding: '8px 14px', fontSize: 13 }}
          onClick={reset}>Shuffle</button>
      </div>
      <div className="super-mem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, maxWidth: 600, margin: '0 auto' }}>
        {deck.map((c, i) => (
          <div key={i} onClick={() => flip(i)}
            style={{
              aspectRatio: 1,
              border: 'var(--border)', borderRadius: 14,
              background: c.matched ? 'oklch(0.85 0.14 145)' : c.flipped ? 'white' : 'var(--c-grape)',
              opacity: c.matched ? 0.55 : 1,
              cursor: c.matched ? 'default' : 'pointer',
              display: 'grid', placeItems: 'center',
              fontSize: 'clamp(18px, 5vw, 38px)', userSelect: 'none',
              color: !c.flipped && !c.matched ? 'white' : 'var(--ink)',
              fontFamily: 'var(--font-display)', fontWeight: 900,
            }}>
            {c.flipped || c.matched ? c.s : '?'}
          </div>
        ))}
      </div>
      {won && (
        <div style={{ textAlign: 'center', marginTop: 20 }}>
          <h2 style={{ color: 'oklch(0.5 0.16 145)' }}>You did it! 🏆</h2>
          <p>Solved in {moves} moves.</p>
          <button className="btn btn-primary" style={{ marginTop: 12 }} onClick={reset}>Play again</button>
        </div>
      )}
    </div>
  );
}

// ============================================================
// WORD BUILDER — drag/click letters into slots
// ============================================================
function WordBuilderGame() {
  const WORDS = ['CAT','DOG','SUN','BEE','FROG','FISH','BIRD','STAR','MOON','TREE','BOOK','BALL'];
  const [round, setRound] = React.useState(1);
  const [score, setScore] = React.useState(0);
  useReportScore(score);
  const [word, setWord]   = React.useState('');
  const [pool, setPool]   = React.useState([]);
  const [filled, setFilled] = React.useState([]);
  const [done, setDone]   = React.useState(false);
  const ROUNDS = 10;

  const setup = () => {
    const w = WORDS[Math.floor(Math.random() * WORDS.length)];
    const extras = ['XQZ'.split('')].flat();
    const letters = [...w.split(''), ...extras.slice(0, 2)].sort(() => Math.random() - 0.5);
    setWord(w);
    setPool(letters.map((l, i) => ({ l, id: i, used: false })));
    setFilled(Array(w.length).fill(null));
    setDone(false);
  };

  React.useEffect(() => { setup(); }, []);

  const place = (poolIdx) => {
    const p = pool[poolIdx];
    if (p.used) return;
    const slot = filled.findIndex(s => s === null);
    if (slot < 0) return;
    const newFilled = [...filled]; newFilled[slot] = p;
    setFilled(newFilled);
    setPool(pool.map((x, i) => i === poolIdx ? { ...x, used: true } : x));
    if (newFilled.every(s => s !== null)) {
      const built = newFilled.map(s => s.l).join('');
      setTimeout(() => {
        if (built === word) {
          setScore(s => s + 1);
        }
        setDone(true);
        setTimeout(() => {
          if (round >= ROUNDS) setRound(ROUNDS + 1);
          else { setRound(r => r + 1); setup(); }
        }, 1200);
      }, 200);
    }
  };

  const removeSlot = (slotIdx) => {
    if (done) return;
    const p = filled[slotIdx]; if (!p) return;
    const newFilled = [...filled]; newFilled[slotIdx] = null;
    setFilled(newFilled);
    setPool(pool.map(x => x.id === p.id ? { ...x, used: false } : x));
  };

  if (round > ROUNDS) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 6 ? '🏆' : '📖'}</div>
      <h2>You spelled {score} / {ROUNDS} words!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={() => { setScore(0); setRound(1); setup(); }}>Play again</button>
    </div>
  );

  const built = filled.map(s => s ? s.l : '').join('');
  const correct = done && built === word;
  const wrong = done && built !== word;

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Round {round}/{ROUNDS}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <p style={{ fontSize: 18, textAlign: 'center', fontFamily: 'var(--font-display)', marginBottom: 12 }}>
        Spell the word: <strong style={{ fontSize: 22 }}>{word}</strong>
      </p>
      {/* Slots */}
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 28, flexWrap: 'wrap' }}>
        {filled.map((s, i) => (
          <button key={i} onClick={() => removeSlot(i)} style={{
            width: 'clamp(48px, 10vw, 70px)', height: 'clamp(60px, 12vw, 84px)',
            border: 'var(--border-thick)', borderRadius: 14,
            background: correct ? 'oklch(0.85 0.14 145)' : wrong ? 'oklch(0.85 0.14 25)' : s ? 'white' : 'var(--bg-warm)',
            fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px, 6vw, 40px)',
            cursor: s ? 'pointer' : 'default',
          }}>{s?.l || ''}</button>
        ))}
      </div>
      {/* Pool */}
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
        {pool.map((p, i) => (
          <button key={p.id} onClick={() => place(i)} disabled={p.used} style={{
            width: 'clamp(44px, 9vw, 60px)', height: 'clamp(52px, 11vw, 72px)',
            border: 'var(--border)', borderRadius: 12,
            background: p.used ? 'var(--bg-warm)' : 'var(--c-sun)',
            opacity: p.used ? 0.3 : 1,
            fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(24px, 5vw, 34px)',
            boxShadow: p.used ? 'none' : '3px 3px 0 var(--ink)',
            cursor: p.used ? 'default' : 'pointer',
          }}>{p.l}</button>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// LETTER HOP — tap letters in alphabetical order
// ============================================================
function LetterHopGame() {
  const [target, setTarget] = React.useState('A');
  const [pads, setPads]     = React.useState([]);
  const [score, setScore]   = React.useState(0);
  useReportScore(score);
  const [done, setDone]     = React.useState(false);

  const setup = (start) => {
    const t = start;
    const others = 'BCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').filter(l => l !== t);
    const wrongs = others.sort(() => Math.random() - 0.5).slice(0, 5);
    setPads([t, ...wrongs].sort(() => Math.random() - 0.5));
  };

  React.useEffect(() => { setup('A'); }, []);

  const tap = (l) => {
    if (l === target) {
      if (target === 'Z') { setScore(s => s + 1); setDone(true); return; }
      const nextLetter = String.fromCharCode(target.charCodeAt(0) + 1);
      setScore(s => s + 1);
      setTarget(nextLetter);
      setup(nextLetter);
    } else {
      // shake but no penalty
    }
  };

  if (done) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>🐸🏆</div>
      <h2>You hopped from A to Z!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={() => { setScore(0); setTarget('A'); setDone(false); setup('A'); }}>Play again</button>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' }}>
        <div className="pill-stat">Letters: {score}/26</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Find: {target}</div>
        <div style={{ flexBasis: '100%', height: 8, background: 'var(--bg-warm)',
          border: '2px solid var(--ink)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${(score/26)*100}%`,
            background: 'var(--c-grass)', transition: 'width .3s' }}></div>
        </div>
      </div>
      <div style={{ background: 'oklch(0.80 0.10 230)', padding: 24,
        border: 'var(--border-thick)', borderRadius: 24, minHeight: 320 }}>
        <p style={{ textAlign: 'center', color: 'white', fontWeight: 800, marginBottom: 18 }}>
          🐸 Hop to the letter <strong>{target}</strong>!
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {pads.map((l, i) => (
            <button key={l} onClick={() => tap(l)} style={{
              padding: '24px 0', fontSize: 'clamp(28px,6vw,40px)',
              fontFamily: 'var(--font-display)', fontWeight: 900,
              background: 'oklch(0.68 0.15 145)', color: 'white',
              border: 'var(--border-thick)', borderRadius: '50%',
              boxShadow: '4px 4px 0 var(--ink)', cursor: 'pointer',
              aspectRatio: 1.4,
            }}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// RAINBOW TAP — tap colours in rainbow order
// ============================================================
function RainbowTapGame() {
  const RAINBOW = [
    { name: 'Red',    color: '#E63946' },
    { name: 'Orange', color: '#F77F00' },
    { name: 'Yellow', color: '#F5C842' },
    { name: 'Green',  color: '#5DBF72' },
    { name: 'Blue',   color: '#4A90E2' },
    { name: 'Purple', color: '#9B6FD4' },
  ];
  const [step, setStep]   = React.useState(0);
  const [bubbles, setBubbles] = React.useState([]);
  const [score, setScore] = React.useState(0);
  useReportScore(score);
  const [streak, setStreak] = React.useState(0);
  const [time, setTime]   = React.useState(60);
  const [running, setRunning] = React.useState(false);

  const start = () => {
    setStep(0); setScore(0); setStreak(0); setTime(60); setRunning(true); setBubbles([]);
  };

  React.useEffect(() => {
    if (!running) return;
    const t = setInterval(() => setTime(s => {
      if (s <= 1) { setRunning(false); return 0; }
      return s - 1;
    }), 1000);
    return () => clearInterval(t);
  }, [running]);

  React.useEffect(() => {
    if (!running) return;
    const spawn = setInterval(() => {
      setBubbles(b => {
        if (b.length > 8) return b;
        const r = RAINBOW[Math.floor(Math.random() * RAINBOW.length)];
        return [...b, {
          id: Math.random(), color: r.color, name: r.name,
          x: 10 + Math.random() * 80, y: 10 + Math.random() * 80,
          size: 60 + Math.random() * 30,
        }];
      });
    }, 700);
    return () => clearInterval(spawn);
  }, [running]);

  const tap = (b) => {
    setBubbles(bs => bs.filter(x => x.id !== b.id));
    if (b.name === RAINBOW[step].name) {
      setScore(s => s + 1);
      setStreak(s => s + 1);
      setStep(s => (s + 1) % RAINBOW.length);
    } else {
      setStreak(0);
    }
  };

  if (!running && time === 0) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>🌈</div>
      <h2>You popped {score} bubbles!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }} onClick={start}>Play again</button>
    </div>
  );

  if (!running) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>🌈</div>
      <h2>Rainbow Tap</h2>
      <p style={{ color: 'var(--ink-soft)', maxWidth: 360, margin: '12px auto 24px' }}>
        Tap bubbles in rainbow order: red, orange, yellow, green, blue, purple. Repeat! 60 seconds.
      </p>
      <button className="btn btn-primary btn-lg" onClick={start}>Start</button>
    </div>
  );

  const target = RAINBOW[step];

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
        <div className="pill-stat">Score: {score}</div>
        <div className="pill-stat">Time: {time}s</div>
        {streak >= 3 && <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>🔥 {streak}</div>}
        <div className="pill-stat" style={{ background: target.color, color: 'white', marginLeft: 'auto' }}>
          Next: {target.name}
        </div>
      </div>
      <div style={{ position: 'relative', width: '100%', height: 440,
        background: '#1B1840', border: 'var(--border-thick)', borderRadius: 20, overflow: 'hidden' }}>
        {bubbles.map(b => (
          <button key={b.id} onClick={() => tap(b)} style={{
            position: 'absolute', left: `${b.x}%`, top: `${b.y}%`,
            width: b.size, height: b.size, borderRadius: '50%',
            background: `radial-gradient(circle at 35% 35%, white 5%, ${b.color} 70%)`,
            border: '3px solid white', cursor: 'pointer',
            transform: 'translate(-50%, -50%)',
            boxShadow: '0 4px 0 rgba(0,0,0,.3)',
          }}></button>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SPACE DODGE — steer rocket through asteroids
// ============================================================
function SpaceDodgeGame() {
  const [running, setRunning] = React.useState(false);
  const [pos, setPos]         = React.useState(50);
  const [astroids, setAst]    = React.useState([]);
  const [score, setScore]     = React.useState(0);
  useReportScore(Math.floor(score / 6));
  const [over, setOver]       = React.useState(false);
  const stageRef = React.useRef(null);
  const idRef = React.useRef(0);

  const start = () => { setScore(0); setAst([]); setOver(false); setRunning(true); setPos(50); };

  React.useEffect(() => {
    if (!running) return;
    const spawn = setInterval(() => {
      setAst(a => [...a, { id: ++idRef.current, x: Math.random() * 92 + 4, y: -8, speed: 0.4 + Math.random() * 0.4 }]);
    }, 700);
    return () => clearInterval(spawn);
  }, [running]);

  React.useEffect(() => {
    if (!running) return;
    let raf;
    const tick = () => {
      setAst(prev => {
        const stage = stageRef.current;
        if (!stage) return prev;
        const w = stage.clientWidth, h = stage.clientHeight;
        const playerX = (pos / 100) * w;
        const playerY = h - 60;
        let died = false;
        const next = [];
        for (const a of prev) {
          const ny = a.y + a.speed;
          const ax = (a.x / 100) * w, ay = (ny / 100) * h;
          const dx = ax - playerX, dy = ay - playerY;
          if (Math.sqrt(dx*dx + dy*dy) < 36) died = true;
          if (ny > 105) continue;
          next.push({ ...a, y: ny });
        }
        if (died) { setRunning(false); setOver(true); }
        return next;
      });
      setScore(s => s + 1);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [running, pos]);

  const onMove = (e) => {
    if (e.cancelable) e.preventDefault();
    const stage = stageRef.current;
    if (!stage) return;
    const rect = stage.getBoundingClientRect();
    const cx = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    setPos(Math.max(5, Math.min(95, (cx / rect.width) * 100)));
  };

  React.useEffect(() => {
    const k = (e) => {
      if (!running) return;
      if (e.key === 'ArrowLeft') setPos(x => Math.max(5, x - 5));
      if (e.key === 'ArrowRight') setPos(x => Math.min(95, x + 5));
    };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [running]);

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
        <div className="pill-stat">Score: {Math.floor(score / 6)}</div>
      </div>
      <div ref={stageRef} onMouseMove={onMove} onTouchMove={onMove}
        style={{ position: 'relative', width: '100%', height: 460,
          background: 'linear-gradient(180deg, #050118, #1a0a3e)',
          border: 'var(--border)', borderRadius: 20, overflow: 'hidden',
          touchAction: 'none', userSelect: 'none', cursor: running ? 'none' : 'default' }}>
        {/* stars */}
        {[...Array(30)].map((_, i) => (
          <div key={i} style={{ position: 'absolute',
            left: `${(i * 37) % 100}%`, top: `${(i * 53) % 100}%`,
            width: 2, height: 2, background: 'white', opacity: 0.6 }}></div>
        ))}
        {astroids.map(a => (
          <div key={a.id} style={{
            position: 'absolute', left: `${a.x}%`, top: `${a.y}%`,
            width: 44, height: 44, borderRadius: '50%',
            background: 'radial-gradient(circle at 30% 30%, #888, #444)',
            border: '2px solid white', transform: 'translate(-50%, -50%)',
          }}></div>
        ))}
        {/* rocket */}
        {running && (
          <div style={{ position: 'absolute', bottom: 20, left: `${pos}%`,
            transform: 'translateX(-50%)', fontSize: 48, lineHeight: 1,
            filter: 'drop-shadow(0 0 6px var(--c-sun))' }}>🚀</div>
        )}
        {!running && !over && (
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)',
            display: 'grid', placeItems: 'center', color: 'white', textAlign: 'center', padding: 20 }}>
            <div>
              <h2 style={{ color: 'white' }}>Space Dodge</h2>
              <p style={{ marginTop: 8, opacity: .9 }}>Move your mouse, finger, or arrow keys to dodge asteroids!</p>
              <button className="btn btn-yellow btn-lg" style={{ marginTop: 18 }} onClick={start}>Launch! 🚀</button>
            </div>
          </div>
        )}
        {over && (
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)',
            display: 'grid', placeItems: 'center', color: 'white', textAlign: 'center', padding: 20 }}>
            <div>
              <div style={{ fontSize: 60 }}>💥</div>
              <h2 style={{ color: 'white' }}>Crashed!</h2>
              <p>You survived {Math.floor(score / 6)} seconds.</p>
              <button className="btn btn-yellow btn-lg" style={{ marginTop: 14 }} onClick={start}>Try again</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// TIMES TABLE — multiplication practice
// ============================================================
function TimesTableGame() {
  const [round, setRound]   = React.useState(1);
  const [score, setScore]   = React.useState(0);
  useReportScore(score);
  const [q, setQ]           = React.useState(null);
  const [choices, setCh]    = React.useState([]);
  const [chosen, setChosen] = React.useState(null);
  const ROUNDS = 10;

  const next = () => {
    const a = 2 + Math.floor(Math.random() * 9);
    const b = 2 + Math.floor(Math.random() * 9);
    const ans = a * b;
    const wrongs = new Set();
    while (wrongs.size < 3) {
      const off = (Math.floor(Math.random() * 6) + 1) * (Math.random() < 0.5 ? 1 : -1);
      if (ans + off > 0 && ans + off !== ans) wrongs.add(ans + off);
    }
    setQ({ a, b, ans });
    setCh([...wrongs, ans].sort(() => Math.random() - 0.5));
    setChosen(null);
  };

  React.useEffect(() => { next(); }, []);

  const answer = (v) => {
    if (chosen !== null) return;
    setChosen(v);
    if (v === q.ans) setScore(s => s + 1);
    setTimeout(() => {
      if (round >= ROUNDS) setRound(ROUNDS + 1);
      else { setRound(r => r + 1); next(); }
    }, 1100);
  };

  if (round > ROUNDS) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 8 ? '🏆' : '🧮'}</div>
      <h2>You got {score} / {ROUNDS} right!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={() => { setScore(0); setRound(1); next(); }}>Play again</button>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Round {round}/{ROUNDS}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <div style={{ background: 'var(--bg)', border: 'var(--border-thick)',
        borderRadius: 24, padding: 'clamp(24px, 5vw, 48px)', textAlign: 'center', marginBottom: 18 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'clamp(48px, 10vw, 80px)', lineHeight: 1 }}>
          {q?.a} × {q?.b} = ?
        </div>
        {/* Visual dot grid */}
        <div style={{ display: 'inline-grid', gridTemplateColumns: `repeat(${q?.b || 1}, 14px)`, gap: 4, marginTop: 18 }}>
          {[...Array((q?.a || 0) * (q?.b || 0))].map((_, i) => (
            <div key={i} style={{ width: 14, height: 14, borderRadius: '50%',
              background: 'var(--c-coral)', border: '2px solid var(--ink)' }}></div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {choices.map((v, i) => {
          const colors = ['var(--c-sun)','var(--c-sky)','var(--c-grass)','var(--c-grape)'];
          let bg = colors[i];
          if (chosen !== null) {
            if (v === q.ans) bg = 'oklch(0.75 0.15 145)';
            else if (v === chosen) bg = 'oklch(0.72 0.17 25)';
            else bg = 'var(--bg-warm)';
          }
          return (
            <button key={v} onClick={() => answer(v)} style={{
              padding: 'clamp(16px,4vw,28px)', fontSize: 'clamp(28px,6vw,42px)',
              fontFamily: 'var(--font-display)', fontWeight: 900,
              background: bg, border: 'var(--border-thick)', borderRadius: 18,
              boxShadow: chosen !== null ? 'none' : '4px 4px 0 var(--ink)',
              cursor: chosen !== null ? 'default' : 'pointer',
            }}>{v}</button>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// ANIMAL FACTS — true / false trivia
// ============================================================
function AnimalFactsGame() {
  const FACTS = [
    { f: 'Elephants can jump.', a: false, e: 'Elephants are too heavy to leave the ground!' },
    { f: 'Dolphins sleep with one eye open.', a: true, e: 'They rest one half of their brain at a time.' },
    { f: 'A group of flamingos is called a flamboyance.', a: true, e: 'Pretty fancy, right?' },
    { f: 'Sharks have bones.', a: false, e: 'Their skeletons are made of cartilage.' },
    { f: 'Octopuses have three hearts.', a: true, e: 'And blue blood!' },
    { f: 'A bee can fly backwards.', a: true, e: 'Bees are amazing pilots.' },
    { f: 'Butterflies taste with their feet.', a: true, e: 'Sensors on their legs taste plants.' },
    { f: 'Penguins can fly.', a: false, e: 'They swim like champions but can\'t fly.' },
    { f: 'Cows have best friends.', a: true, e: 'They get stressed when separated!' },
    { f: 'Tigers are afraid of water.', a: false, e: 'Tigers love to swim!' },
    { f: 'A snail can sleep for 3 years.', a: true, e: 'They hibernate in dry weather.' },
    { f: 'Giraffes have blue tongues.', a: true, e: 'Up to 50 cm long, too!' },
  ];
  const buildList = () => [...FACTS].sort(() => Math.random() - 0.5).slice(0, 10);
  const [list, setList]   = React.useState(buildList);
  const [idx, setIdx]     = React.useState(0);
  const [score, setScore] = React.useState(0);
  useReportScore(score);
  const [chosen, setCh]   = React.useState(null);

  const f = list[idx];

  const replay = () => {
    setList(buildList());
    setIdx(0); setScore(0); setCh(null);
  };

  const answer = (v) => {
    if (chosen !== null) return;
    setCh(v);
    if (v === f.a) setScore(s => s + 1);
    setTimeout(() => {
      if (idx + 1 >= list.length) setIdx(list.length);
      else { setIdx(idx + 1); setCh(null); }
    }, 1700);
  };

  if (idx >= list.length) return (
    <div style={{ textAlign: 'center', padding: 40 }}>
      <div style={{ fontSize: 72 }}>{score >= 8 ? '🏆' : '🦁'}</div>
      <h2>You got {score} / {list.length} right!</h2>
      <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }}
        onClick={replay}>Play again</button>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div className="pill-stat">Q {idx+1}/{list.length}</div>
        <div className="pill-stat" style={{ background: 'var(--c-sun)' }}>Score: {score}</div>
      </div>
      <div style={{ background: chosen === null ? 'var(--bg)' : (chosen === f.a ? 'oklch(0.92 0.08 145)' : 'oklch(0.92 0.08 25)'),
        border: 'var(--border-thick)', borderRadius: 24, padding: 'clamp(24px, 5vw, 40px)',
        textAlign: 'center', marginBottom: 18, transition: 'background .3s', minHeight: 200 }}>
        <div style={{ fontSize: 56, marginBottom: 14 }}>🦒</div>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'clamp(20px, 3.5vw, 28px)', lineHeight: 1.3 }}>{f.f}</p>
        {chosen !== null && (
          <p style={{ marginTop: 14, fontWeight: 700, fontSize: 16,
            color: chosen === f.a ? 'oklch(0.4 0.16 145)' : 'oklch(0.4 0.16 25)' }}>
            {chosen === f.a ? '✓ Correct! ' : '✗ Wrong! '}{f.e}
          </p>
        )}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <button onClick={() => answer(true)} disabled={chosen !== null} style={{
          padding: '20px', fontSize: 22, fontFamily: 'var(--font-display)', fontWeight: 900,
          background: 'var(--c-grass)', border: 'var(--border-thick)', borderRadius: 18,
          boxShadow: chosen !== null ? 'none' : '4px 4px 0 var(--ink)',
          cursor: chosen !== null ? 'default' : 'pointer', opacity: chosen !== null && chosen !== true ? 0.4 : 1,
        }}>👍 TRUE</button>
        <button onClick={() => answer(false)} disabled={chosen !== null} style={{
          padding: '20px', fontSize: 22, fontFamily: 'var(--font-display)', fontWeight: 900,
          background: 'var(--c-coral)', color: 'white', border: 'var(--border-thick)', borderRadius: 18,
          boxShadow: chosen !== null ? 'none' : '4px 4px 0 var(--ink)',
          cursor: chosen !== null ? 'default' : 'pointer', opacity: chosen !== null && chosen !== false ? 0.4 : 1,
        }}>👎 FALSE</button>
      </div>
    </div>
  );
}

// ============================================================
// SHAPE JIGSAW / PICTURE PUZZLE — shared sliding puzzle
// ============================================================

// Kid-friendly scene used for Picture Puzzle — drawn as inline SVG so it slices cleanly.
const PUZZLE_PICTURE_SVG = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'>
  <rect width='400' height='320' fill='%2387CEEB'/>
  <rect y='320' width='400' height='80' fill='%237CC576'/>
  <circle cx='60' cy='60' r='34' fill='%23FFD93D' stroke='%231B1840' stroke-width='3'/>
  <ellipse cx='305' cy='80' rx='42' ry='18' fill='white' stroke='%231B1840' stroke-width='2'/>
  <ellipse cx='325' cy='70' rx='22' ry='12' fill='white' stroke='%231B1840' stroke-width='2'/>
  <ellipse cx='200' cy='160' rx='80' ry='95' fill='%23E63946' stroke='%231B1840' stroke-width='4'/>
  <path d='M 200 65 Q 245 160 200 255' stroke='%23FFD93D' stroke-width='8' fill='none'/>
  <path d='M 200 65 Q 155 160 200 255' stroke='%23FFD93D' stroke-width='8' fill='none'/>
  <line x1='160' y1='240' x2='180' y2='278' stroke='%231B1840' stroke-width='3'/>
  <line x1='240' y1='240' x2='220' y2='278' stroke='%231B1840' stroke-width='3'/>
  <rect x='172' y='276' width='56' height='32' rx='4' fill='%238B4513' stroke='%231B1840' stroke-width='3'/>
  <ellipse cx='90' cy='335' rx='65' ry='16' fill='%236BA663'/>
  <ellipse cx='320' cy='340' rx='55' ry='13' fill='%236BA663'/>
  <circle cx='110' cy='358' r='7' fill='%23FF69B4' stroke='%231B1840' stroke-width='1.5'/>
  <circle cx='110' cy='358' r='2.5' fill='%23FFD93D'/>
  <circle cx='290' cy='370' r='7' fill='%23FFB6C1' stroke='%231B1840' stroke-width='1.5'/>
  <circle cx='290' cy='370' r='2.5' fill='%23FFD93D'/>
</svg>`.replace(/\s+/g, ' ');
const PUZZLE_PICTURE_URL = `url("data:image/svg+xml;utf8,${PUZZLE_PICTURE_SVG}")`;

function SlidingPuzzleGame({ size = 3, picture = false }) {
  const N = size * size;
  const buildSolved = () => [...Array(N - 1).keys()].map(x => x + 1).concat([0]);
  const [tiles, setTiles] = React.useState(buildSolved);
  const [moves, setMoves] = React.useState(0);
  const [started, setStarted] = React.useState(false);

  const won = started && tiles.every((t, i) => t === (i === N - 1 ? 0 : i + 1));
  // Report the move count once the puzzle is solved (lower-is-better metric)
  useReportScore(won ? moves : 0);

  const shuffle = () => {
    let arr = buildSolved();
    // do many valid moves to ensure solvable
    for (let i = 0; i < 200; i++) {
      const empty = arr.indexOf(0);
      const er = Math.floor(empty / size), ec = empty % size;
      const opts = [];
      if (er > 0) opts.push(empty - size);
      if (er < size - 1) opts.push(empty + size);
      if (ec > 0) opts.push(empty - 1);
      if (ec < size - 1) opts.push(empty + 1);
      const swap = opts[Math.floor(Math.random() * opts.length)];
      [arr[empty], arr[swap]] = [arr[swap], arr[empty]];
    }
    setTiles(arr); setMoves(0); setStarted(true);
  };

  const move = (i) => {
    const empty = tiles.indexOf(0);
    const er = Math.floor(empty / size), ec = empty % size;
    const ir = Math.floor(i / size), ic = i % size;
    if ((er === ir && Math.abs(ec - ic) === 1) || (ec === ic && Math.abs(er - ir) === 1)) {
      const next = [...tiles];
      [next[empty], next[i]] = [next[i], next[empty]];
      setTiles(next); setMoves(m => m + 1);
    }
  };

  const COLORS = ['var(--c-sun)','var(--c-coral)','var(--c-sky)','var(--c-grass)','var(--c-grape)','#F08080','#2EC4B6','#FF9F1C'];

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
        <div className="pill-stat">Moves: {moves}</div>
        {picture && !started && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-soft)' }}>
            <span>Preview:</span>
            <div style={{
              width: 56, height: 56, borderRadius: 8,
              border: '2px solid var(--ink)',
              backgroundImage: PUZZLE_PICTURE_URL,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}></div>
          </div>
        )}
        <button className="btn btn-yellow" style={{ marginLeft: 'auto', padding: '8px 14px', fontSize: 13 }}
          onClick={shuffle}>{started ? 'Shuffle again' : 'Start puzzle'}</button>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: `repeat(${size}, 1fr)`,
        gap: 4, maxWidth: 460, margin: '0 auto',
        background: 'var(--ink)', padding: 4, borderRadius: 18,
        border: 'var(--border-thick)', boxShadow: 'var(--shadow-lg)',
      }}>
        {tiles.map((t, i) => {
          // For picture mode, t (1..N-1) corresponds to the target slice:
          // tile #t belongs in position (t-1) in the solved grid.
          const targetIdx = t - 1;
          const col = targetIdx % size;
          const row = Math.floor(targetIdx / size);
          const isEmpty = t === 0;

          const tileStyle = {
            aspectRatio: 1,
            border: isEmpty ? 'none' : '2px solid var(--ink)',
            borderRadius: 8,
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(20px, 4vw, 36px)',
            cursor: isEmpty || !started ? 'default' : 'pointer',
            color: 'var(--ink)',
            userSelect: 'none',
            overflow: 'hidden',
          };

          if (picture && !isEmpty) {
            // Background-image slice: render the correct portion of the picture for this tile number
            tileStyle.backgroundImage = PUZZLE_PICTURE_URL;
            // background-size > 100% so percentage position scales linearly between tiles
            tileStyle.backgroundSize = `${size * 100}% ${size * 100}%`;
            tileStyle.backgroundPosition = `${(col / Math.max(1, size - 1)) * 100}% ${(row / Math.max(1, size - 1)) * 100}%`;
          } else {
            tileStyle.background = isEmpty ? 'transparent' : COLORS[(t - 1) % COLORS.length];
          }

          return (
            <div key={i} onClick={() => started && move(i)} style={tileStyle}>
              {isEmpty ? '' : (picture ? '' : t)}
            </div>
          );
        })}
      </div>
      {won && (
        <div style={{ textAlign: 'center', marginTop: 20 }}>
          <h2 style={{ color: 'oklch(0.45 0.16 145)' }}>🏆 Solved in {moves} moves!</h2>
          <button className="btn btn-primary" style={{ marginTop: 12 }} onClick={shuffle}>Shuffle again</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  CountGardenGame, QuizQuestGame, FindThePairGame, SuperMemoryGame,
  WordBuilderGame, LetterHopGame, RainbowTapGame, SpaceDodgeGame,
  TimesTableGame, AnimalFactsGame, SlidingPuzzleGame,
});