{{ extends 'otree/WaitPage.html' }}

{% block style %}
    <style>
        .progress {
            display: none;
        }
    </style>
{% endblock %}

{{ block content }}

<!-- Calc status card -->
<div class="card wait-card">
  <div class="card__header">
    <h4>Waiting for Others</h4>
    <div class="card__subtitle">This usually takes just a moment.</div>
  </div>
  <div class="card__body">
    <div class="wait-row">
      <div class="spinner" aria-hidden="true"></div>
      <div class="wait-text">
        <div id="tip-line" class="tip-line">Soon…</div>
        <div class="muted">This page will advance automatically when everyone is ready.</div>
      </div>
    </div>
  </div>
</div>

<!-- ===== Tabbed Mini-Games (optional, purely local) ===== -->
<div class="card fun-card">
  <div class="card__header">
    <h4>While you wait (optional)</h4>
    <div class="card__subtitle">Pick a mini-game below. Nothing is saved; this won’t affect the study.</div>
  </div>

  <div class="card__body">
    <!-- Tabs -->
    <div class="tabs" role="tablist" aria-label="Mini-games">
      <button type="button" class="tab active" data-tab="game-tap" role="tab" aria-selected="true">1→10 Tap</button>
      <button type="button" class="tab" data-tab="game-react" role="tab" aria-selected="false">Reaction Light</button>
      <button type="button" class="tab" data-tab="game-memory" role="tab" aria-selected="false">Memory Grid</button>
      <button type="button" class="tab" data-tab="game-mines" role="tab" aria-selected="false">Minesweeper</button>
      <button type="button" class="tab" data-tab="game-snake" role="tab" aria-selected="false">Snake</button>
      <button type="button" class="tab" data-tab="game-doodle" role="tab" aria-selected="false">Doodle Pad</button>
    </div>

    <!-- Panels -->
    <div class="panels">
      <!-- 1) Tap 1→10 -->
      <section id="game-tap" class="panel active" role="tabpanel">
        <div class="grid">
          <div id="tap-grid" class="tap-grid" aria-label="Tap numbers in order"></div>
          <div class="side">
            <div><strong>Next number:</strong> <span id="next-num">1</span></div>
            <div><strong>Time:</strong> <span id="tap-timer">0.00s</span></div>
            <button id="tap-restart" type="button" class="btn">Restart</button>
          </div>
        </div>
        <div class="muted small">Tap numbers 1 through 10 in order as fast as you can.</div>
      </section>

      <!-- 2) Reaction Light -->
      <section id="game-react" class="panel" role="tabpanel">
        <div class="react-wrap">
          <div id="react-pad" class="react-pad" role="button" tabindex="0" aria-label="Reaction area">
            <span id="react-text">Click when it turns green</span>
          </div>
          <div class="react-meta">
            <div><strong>Your time:</strong> <span id="react-time">–</span></div>
            <button id="react-restart" type="button" class="btn">Try again</button>
          </div>
        </div>
        <div class="muted small">Wait for the pad to turn green, then click as quickly as you can.</div>
      </section>

      <!-- 3) Memory Grid (Simon-style) -->
      <section id="game-memory" class="panel" role="tabpanel">
        <div class="mem-top">
          <button id="mem-start" type="button" class="btn">Start round</button>
          <div><strong>Level:</strong> <span id="mem-level">0</span></div>
          <div><strong>Status:</strong> <span id="mem-status" class="muted">Click “Start round”</span></div>
        </div>
        <div id="mem-grid" class="mem-grid" aria-label="Repeat the highlighted sequence"></div>
        <div class="muted small">Watch the sequence light up, then click the same squares in order.</div>
      </section>

      <!-- 4) Minesweeper (simple) -->
      <section id="game-mines" class="panel" role="tabpanel">
        <div class="mines-top">
          <div><strong>Mines:</strong> <span id="mines-left">–</span></div>
          <button id="mines-restart" type="button" class="btn">New board</button>
          <div id="mines-status" class="muted small" style="margin-left:auto;"></div>
          <label class="muted small"><input id="mines-flag-toggle" type="checkbox"> Flag mode (right-click also flags)</label>
        </div>
        <div id="mines-grid" class="mines-grid" aria-label="Reveal cells, avoid mines"></div>
        <div class="muted small">Left click: reveal • Right click or Flag mode: place/remove flag • Clear all non-mine cells to win.</div>
      </section>

      <!-- 5) Snake -->
      <section id="game-snake" class="panel" role="tabpanel">
        <div class="snake-top">
          <div><strong>Score:</strong> <span id="snake-score">0</span></div>
          <button id="snake-restart" type="button" class="btn">Restart</button>
          <div class="muted small" style="margin-left:auto;">Use <strong>WASD</strong> / <strong>↑↓←→</strong> to move</div>
        </div>
        <div class="snake-wrap">
          <canvas id="snake-canvas" width="360" height="240" aria-label="Snake"></canvas>
        </div>
      </section>

      <!-- 6) Doodle Pad -->
      <section id="game-doodle" class="panel" role="tabpanel">
        <div class="doodle-top">
          <label class="muted small">Color:
            <input id="doodle-color" type="color" value="#1e3a8a" />
          </label>
          <label class="muted small">Size:
            <input id="doodle-size" type="range" min="2" max="16" value="4" />
          </label>
          <button id="doodle-clear" type="button" class="btn" style="margin-left:auto;">Clear</button>
        </div>
        <div class="doodle-wrap">
          <canvas id="doodle-canvas" width="540" height="280" aria-label="Doodle canvas"></canvas>
        </div>
        <div class="muted small">Draw freely. This is just for fun; nothing is saved.</div>
      </section>
    </div>
  </div>
</div>

<style>
  /* Card shell (matches your existing style) */
  .card{ max-width:900px; margin:16px auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06); }
  .card__header{ padding:14px 18px 10px 18px; border-bottom:1px solid #f0f2f5; background:#fafafa; border-radius:10px 10px 0 0; }
  .card__header h4{ margin:0; font-weight:600; font-size:18px; }
  .card__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }
  .muted{ color:#6b7280; }
  .small{ font-size:12px; }

  /* Calc card specifics */
  .wait-row{ display:flex; align-items:center; gap:14px; }
  .spinner{ width:28px; height:28px; border-radius:50%; border:3px solid #e5e7eb; border-top-color:#1e5bff; animation: spin 0.9s linear infinite; }
  @keyframes spin{ to { transform: rotate(360deg); } }
  .tip-line{ font-weight:600; color:#111827; margin-bottom:2px; }

  /* Shared btn (soft-primary) */
  .btn{
    border-radius:8px; padding:8px 14px; font-weight:600;
    border:1px solid #dbe2f3; background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%);
    color:#1e3a8a; box-shadow:0 4px 10px rgba(30,91,255,.08); cursor:pointer;
    transition: box-shadow .15s ease, background .15s ease, transform .04s ease;
  }
  .btn:hover{ background:linear-gradient(180deg,#eaf0ff 0%,#dee7ff 100%); }
  .btn:active{ transform: translateY(1px); }

  /* Tabs */
  .tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .tab{
    padding:8px 12px; border-radius:8px; border:1px solid #e5e7eb;
    background:#f8fafc; cursor:pointer; font-weight:600; font-size:14px;
  }
  .tab.active{ background:#eef3ff; border-color:#dbe2f3; color:#1e3a8a; }
  .panel{ display:none; }
  .panel.active{ display:block; }

  /* Layout helpers for Tap game panel */
  .grid{ display:grid; grid-template-columns: 1fr 220px; gap:16px; align-items:start; }
  .side{ border:1px solid #eef2f7; border-radius:10px; background:#fbfcfe; padding:12px; display:grid; gap:8px; }

  /* (1) Tap 1→10 */
  .tap-grid{
    display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:8px;
    background:#f9fbff; border:1px solid #eef2f7; border-radius:12px; padding:12px;
  }
  .tap-cell{
    display:flex; align-items:center; justify-content:center;
    padding:12px 0; border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; font-weight:700; color:#1f2937; cursor:pointer; user-select:none;
  }
  .tap-cell:active{ transform: translateY(1px); }
  .tap-cell.done{ color:#9ca3af; background:#f3f6ff; border-color:#e2e8f0; cursor:default; }

  /* (2) Reaction Light */
  .react-wrap{ display:grid; gap:12px; }
  .react-pad{
    height:140px; border-radius:12px; border:1px solid #e5e7eb;
    display:flex; align-items:center; justify-content:center;
    background:#fff7ed; /* warmup orange */
    font-weight:700; color:#7c2d12; user-select:none;
  }
  .react-pad.ready{ background:#ecfeff; color:#155e75; }
  .react-pad.go{ background:#eaffea; color:#14532d; }
  .react-meta{ display:flex; gap:12px; align-items:center; }

  /* (3) Memory grid */
  .mem-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .mem-grid{
    display:grid; grid-template-columns:repeat(4, 56px); gap:10px;
    width:max-content; background:#f9fbff; border:1px solid #eef2f7; border-radius:12px; padding:12px;
  }
  .mem-cell{
    width:56px; height:56px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  }
  .mem-cell.flash{ background:#dbeafe; border-color:#bfdbfe; }

  /* (4) Minesweeper */
  .mines-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .mines-grid{
    --size: 26px;
    display:grid; grid-template-columns: repeat(10, var(--size)); gap:6px;
    width:max-content; background:#f9fbff; border:1px solid #eef2f7; border-radius:12px; padding:12px;
  }
  .mine-cell{
    width:var(--size); height:var(--size); border-radius:6px;
    border:1px solid #e5e7eb; background:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#1f2937; user-select:none;
  }
  .mine-cell.revealed{ background:#f3f6ff; color:#1f2937; border-color:#e2e8f0; cursor:default; }
  .mine-cell.flag::after{ content:"⚑"; color:#ef4444; font-size:14px; }
  .mine-cell.boom{ background:#fee2e2; border-color:#fecaca; }
  .mine-num-1{ color:#2563eb; }
  .mine-num-2{ color:#16a34a; }
  .mine-num-3{ color:#dc2626; }
  .mine-num-4{ color:#7c3aed; }
  .mine-num-5{ color:#b45309; }
  .mine-num-6{ color:#0d9488; }
  .mine-num-7{ color:#111827; }
  .mine-num-8{ color:#6b7280; }

  /* (5) Snake */
  .snake-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .snake-wrap{
    border:1px solid #eef2f7; border-radius:12px; background:#fbfcfe;
    padding:12px; display:flex; justify-content:center;
  }
  #snake-canvas{ display:block; background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; image-rendering: pixelated; }

  /* (6) Doodle */
  .doodle-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .doodle-wrap{
    border:1px solid #eef2f7; border-radius:12px; background:#fbfcfe;
    padding:12px; display:flex; justify-content:center;
  }
  #doodle-canvas{ display:block; background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; touch-action:none; }

  @media (max-width: 680px){
    .grid{ grid-template-columns:1fr; }
    #snake-canvas{ width:100%; height:auto; }
    #doodle-canvas{ width:100%; height:auto; }
  }
</style>

<script>
  // ---- Guard: ensure all buttons that aren't Next are not accidental submits
  document.addEventListener('click', function (e) {
    const el = e.target.closest('button');
    if (!el) return;
    if (!el.getAttribute('type')) {
      el.setAttribute('type', 'button');
    }
  }, { capture: true });

  // ---- Rotating tips (purely cosmetic) ----
  (function(){
    const tips = [
      "Waiting for others…",
      "Enjoy the break…",
      "Almost there…"
    ];
    const el = document.getElementById('tip-line');
    let i = 0;
    setInterval(() => {
      i = (i + 1) % tips.length;
      if (el) el.textContent = tips[i];
    }, 4000);
  })();

  // ---------- Tabs ----------
  (function(){
    const tabs = document.querySelectorAll('.tab');
    const panels = document.querySelectorAll('.panel');
    tabs.forEach(btn=>{
      btn.addEventListener('click', ()=>{
        tabs.forEach(b=>{ b.classList.remove('active'); b.setAttribute('aria-selected','false'); });
        panels.forEach(p=>p.classList.remove('active'));
        btn.classList.add('active'); btn.setAttribute('aria-selected','true');
        document.getElementById(btn.dataset.tab).classList.add('active');
      });
    });
  })();

  // ---------- Game 1: Tap 1→10 ----------
  (function(){
    const N = 10;
    const grid = document.getElementById('tap-grid');
    const nextEl = document.getElementById('next-num');
    const timerEl = document.getElementById('tap-timer');
    const restartBtn = document.getElementById('tap-restart');

    let next = 1, startedAt = null, animId = null;

    function shuffle(a){ for(let i=a.length-1;i>0;i--){const j=(Math.random()*(i+1))|0; [a[i],a[j]]=[a[j],a[i]];} return a; }
    function render(){
      if(!grid) return;
      grid.innerHTML = "";
      const nums = shuffle(Array.from({length:N},(_,i)=>i+1));
      nums.forEach(n=>{
        const cell = document.createElement('button');
        cell.type='button'; cell.className='tap-cell'; cell.textContent=n;
        cell.addEventListener('click', ()=>{
          if(n!==next || cell.classList.contains('done')) return;
          if(next===1){ startedAt=performance.now(); animId=requestAnimationFrame(tick); }
          cell.classList.add('done'); next++; nextEl.textContent=(next<=N?next:"✓");
          if(next>N){ if(animId) cancelAnimationFrame(animId); tick(true); }
        });
        grid.appendChild(cell);
      });
    }
    function tick(final=false){
      if(!startedAt){ if(timerEl) timerEl.textContent="0.00s"; return; }
      const t=(performance.now()-startedAt)/1000; if(timerEl) timerEl.textContent=t.toFixed(2)+"s";
      if(!final) animId=requestAnimationFrame(tick);
    }
    function reset(){ next=1; startedAt=null; if(nextEl) nextEl.textContent="1"; if(timerEl) timerEl.textContent="0.00s"; if(animId) cancelAnimationFrame(animId); render(); }
    if(restartBtn) restartBtn.addEventListener('click', reset);
    render();
  })();

  // ---------- Game 2: Reaction Light ----------
  (function(){
    const pad = document.getElementById('react-pad');
    const timeEl = document.getElementById('react-time');
    const restart = document.getElementById('react-restart');
    if(!pad) return;

    const waits = [700, 1100, 1500, 1900, 2300];
    let state='idle', startAt=0, to=null;

    function arm(){
      state='arming';
      pad.className='react-pad ready';
      pad.querySelector('#react-text').textContent = 'Get ready…';
      const wait = waits[(Math.random()*waits.length)|0];
      to = setTimeout(()=>{
        state='go';
        pad.className='react-pad go';
        pad.querySelector('#react-text').textContent = 'GO!';
        startAt = performance.now();
      }, wait);
    }
    function reset(){
      if(to) clearTimeout(to);
      state='idle'; startAt=0; if(timeEl) timeEl.textContent='–';
      pad.className='react-pad';
      pad.querySelector('#react-text').textContent = 'Click when it turns green';
      arm();
    }
    pad.addEventListener('click', ()=>{
      if(state==='go'){
        const ms = performance.now()-startAt;
        if(timeEl) timeEl.textContent = ms.toFixed(0) + ' ms';
        state='done';
        pad.querySelector('#react-text').textContent = 'Nice! Click “Try again”';
      }else if(state==='arming'){
        if(timeEl) timeEl.textContent = 'Too soon!';
        if(to) clearTimeout(to);
        setTimeout(reset, 800);
      }
    });
    if(restart) restart.addEventListener('click', reset);
    reset();
  })();

  // ---------- Game 3: Memory Grid ----------
  (function(){
    const grid = document.getElementById('mem-grid');
    const startBtn = document.getElementById('mem-start');
    const levelEl = document.getElementById('mem-level');
    const statusEl = document.getElementById('mem-status');
    if(!grid) return;

    const SIZE = 16; // 4x4
    let seq = [];
    let pos = 0;
    let flashing = false;

    function build(){
      grid.innerHTML='';
      for(let i=0;i<SIZE;i++){
        const d = document.createElement('button');
        d.type='button'; d.className='mem-cell'; d.dataset.idx=i;
        d.addEventListener('click', ()=> onClick(i, d));
        grid.appendChild(d);
      }
    }

    function randCell(){ return Math.floor(Math.random()*SIZE); }

    async function flashCell(idx){
      const el = grid.querySelector(`.mem-cell[data-idx="${idx}"]`);
      if(!el) return;
      el.classList.add('flash');
      await new Promise(r=>setTimeout(r, 350));
      el.classList.remove('flash');
      await new Promise(r=>setTimeout(r, 120));
    }

    async function playSeq(){
      flashing = true;
      statusEl.textContent = 'Watch the sequence…';
      for(const n of seq){ await flashCell(n); }
      flashing = false;
      statusEl.textContent = 'Your turn!';
    }

    function startRound(){
      if(flashing) return;
      seq.push(randCell());
      if(levelEl) levelEl.textContent = String(seq.length);
      pos = 0;
      playSeq();
    }

    function fail(){
      statusEl.textContent = 'Oops! Try again.';
      seq = []; pos = 0; if(levelEl) levelEl.textContent = '0';
    }

    function onClick(idx, el){
      if(flashing || seq.length===0) return;
      el.classList.add('flash'); setTimeout(()=>el.classList.remove('flash'), 150);
      if(idx !== seq[pos]){ fail(); return; }
      pos++;
      if(pos === seq.length){
        statusEl.textContent = 'Great! Starting next round…';
        setTimeout(startRound, 600);
      }
    }

    if(startBtn) startBtn.addEventListener('click', ()=>{
      if(flashing) return;
      if(seq.length===0){ statusEl.textContent = 'Starting…'; }
      startRound();
    });

    build();
  })();

  // ---------- Game 4: Minesweeper (alerts removed, non-blocking status) ----------
  (function(){
    const gridEl = document.getElementById('mines-grid');
    const leftEl = document.getElementById('mines-left');
    const restartBtn = document.getElementById('mines-restart');
    const flagToggle = document.getElementById('mines-flag-toggle');
    const statusEl = document.getElementById('mines-status');
    if(!gridEl) return;

    const W = 10, H = 10, MINES = 12;
    let cells = [];
    let revealed = 0;
    let gameOver = false;

    function idx(x,y){ return y*W + x; }

    function neighbors(x,y){
      const ns=[];
      for(let dy=-1; dy<=1; dy++){
        for(let dx=-1; dx<=1; dx++){
          if(dx===0 && dy===0) continue;
          const nx=x+dx, ny=y+dy;
          if(nx>=0 && nx<W && ny>=0 && ny<H) ns.push([nx,ny]);
        }
      }
      return ns;
    }

    function placeMines(safeX, safeY){
      let placed=0;
      while(placed<MINES){
        const x=(Math.random()*W)|0, y=(Math.random()*H)|0;
        if((x===safeX && y===safeY) || cells[idx(x,y)].mine) continue;
        cells[idx(x,y)].mine = true; placed++;
      }
      for(let y=0;y<H;y++){
        for(let x=0;x<W;x++){
          const c = cells[idx(x,y)];
          if(c.mine) continue;
          c.n = neighbors(x,y).reduce((acc,[nx,ny])=> acc + (cells[idx(nx,ny)].mine?1:0), 0);
        }
      }
    }

    function renderBoard(){
      gridEl.innerHTML='';
      cells.forEach((c,i)=>{
        const b = document.createElement('button');
        b.type='button';
        b.className='mine-cell';
        b.dataset.i=i;
        b.oncontextmenu = (e)=>{ e.preventDefault(); toggleFlag(i); };
        b.addEventListener('click', ()=> clickCell(i));
        gridEl.appendChild(b);
      });
      updateLeft();
    }

    function updateLeft(){
      const left = MINES - cells.filter(c=>c.flag).length;
      if(leftEl) leftEl.textContent = left;
    }

    function flood(x,y){
      const q=[[x,y]];
      while(q.length){
        const [cx,cy]=q.pop();
        const c=cells[idx(cx,cy)];
        if(c.revealed || c.flag) continue;
        c.revealed = true; revealed++;
        paintCell(cx,cy);
        if(c.n===0){
          neighbors(cx,cy).forEach(([nx,ny])=>{
            const nc = cells[idx(nx,ny)];
            if(!nc.revealed && !nc.mine) q.push([nx,ny]);
          });
        }
      }
    }

    function paintCell(x,y){
      const i=idx(x,y);
      const c=cells[i];
      const el = gridEl.querySelector(`.mine-cell[data-i="${i}"]`);
      if(!el) return;
      el.classList.toggle('revealed', c.revealed);
      el.classList.toggle('flag', c.flag && !c.revealed);
      if(c.revealed){
        if(c.mine){
          el.classList.add('boom');
          el.textContent = '💣';
        }else if(c.n>0){
          el.textContent = c.n;
          el.classList.add('mine-num-'+c.n);
        }else{
          el.textContent = '';
        }
      }else{
        el.textContent = '';
      }
    }

    function revealAllMines(){
      for(let y=0;y<H;y++) for(let x=0;x<W;x++){
        const c=cells[idx(x,y)];
        if(c.mine){
          c.revealed=true;
          paintCell(x,y);
        }
      }
    }

    function checkWin(){
      const totalSafe = W*H - MINES;
      if(revealed >= totalSafe && !gameOver){
        gameOver = true;
        if (statusEl) statusEl.textContent = 'Cleared! 🎉';
      }
    }

    function clickCell(i){
      if(gameOver) return;
      const x = i % W, y = (i/W)|0;
      const c = cells[i];
      if(cells.every(cc=>!cc.initPlaced)){
        cells.forEach(cc=> cc.initPlaced=true);
        placeMines(x,y);
      }
      if(c.flag || c.revealed) return;
      if(flagToggle && flagToggle.checked){ toggleFlag(i); return; }

      c.revealed=true; revealed++; paintCell(x,y);
      if(c.mine){
        gameOver = true;
        revealAllMines();
        if (statusEl) statusEl.textContent = 'Boom! 💥';
        return;
      }
      if(c.n===0) flood(x,y);
      checkWin();
    }

    function toggleFlag(i){
      if(gameOver) return;
      const c=cells[i];
      if(c.revealed) return;
      c.flag = !c.flag;
      const x = i % W, y = (i/W)|0;
      paintCell(x,y);
      updateLeft();
    }

    function reset(){
      gameOver=false; revealed=0;
      if (statusEl) statusEl.textContent = '';
      cells = Array.from({length:W*H}, ()=>({mine:false, n:0, revealed:false, flag:false, initPlaced:false}));
      renderBoard();
    }

    if(restartBtn) restartBtn.addEventListener('click', reset);
    if(flagToggle) flagToggle.addEventListener('change', ()=>{ /* just UI */ });
    reset();
  })();

  // ---------- Game 5: Snake ----------
  (function(){
    const canvas = document.getElementById('snake-canvas');
    const scoreEl = document.getElementById('snake-score');
    const restartBtn = document.getElementById('snake-restart');
    if(!canvas) return;
    const ctx = canvas.getContext('2d');

    const COLS = 24, ROWS = 16;
    const cellW = canvas.width / COLS;
    const cellH = canvas.height / ROWS;

    let snake, dir, nextDir, food, score, alive, loopId;

    function randCell(){
      return { x: (Math.random()*COLS)|0, y: (Math.random()*ROWS)|0 };
    }

    function placeFood(){
      let f;
      do { f = randCell(); }
      while (snake.some(s => s.x===f.x && s.y===f.y));
      food = f;
    }

    function reset(){
      snake = [{x:12,y:8},{x:11,y:8},{x:10,y:8}];
      dir = {x:1,y:0}; nextDir = {x:1,y:0};
      score = 0; alive = true;
      if(scoreEl) scoreEl.textContent = '0';
      placeFood();
      if(loopId) clearInterval(loopId);
      loopId = setInterval(step, 120);
      draw();
    }

    function step(){
      if(!alive) return;
      dir = nextDir;
      const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };

      // walls end the game
      if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {
        alive = false;
        draw();
        return;
      }

      // self collision
      if (snake.some(p => p.x === head.x && p.y === head.y)) {
        alive = false;
        draw();
        return;
      }

      snake.unshift(head);

      if (head.x === food.x && head.y === food.y) {
        score += 1;
        if (scoreEl) scoreEl.textContent = String(score);
        placeFood();
      } else {
        snake.pop();
      }

      draw();
    }

    function draw(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0,0,canvas.width,canvas.height);

      ctx.fillStyle = '#ef4444';
      ctx.fillRect(food.x*cellW, food.y*cellH, cellW, cellH);

      ctx.fillStyle = alive ? '#1e3a8a' : '#9ca3af';
      snake.forEach(p=>{
        ctx.fillRect(p.x*cellW, p.y*cellH, cellW, cellH);
      });

      if(!alive){
        ctx.fillStyle = '#ef4444';
        ctx.font = 'bold 16px system-ui, -apple-system, Segoe UI, Roboto, Arial';
        ctx.fillText('Game over — press Restart', 10, 22);
      }
    }

    function setDir(nx,ny){
      if(nx === -dir.x && ny === -dir.y) return;
      nextDir = {x:nx,y:ny};
    }

    window.addEventListener('keydown', (e)=>{
      if(e.code==='ArrowUp' || e.key==='w' || e.key==='W') setDir(0,-1);
      else if(e.code==='ArrowDown' || e.key==='s' || e.key==='S') setDir(0,1);
      else if(e.code==='ArrowLeft' || e.key==='a' || e.key==='A') setDir(-1,0);
      else if(e.code==='ArrowRight' || e.key==='d' || e.key==='D') setDir(1,0);
    });

    canvas.addEventListener('click', (e)=>{
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left - canvas.width/2;
      const y = e.clientY - rect.top - canvas.height/2;
      if(Math.abs(x) > Math.abs(y)) setDir(x>0?1:-1,0); else setDir(0,y>0?1:-1);
    });

    if(restartBtn) restartBtn.addEventListener('click', reset);
    reset();
  })();

  // ---------- Game 6: Doodle Pad ----------
  (function(){
    const canvas = document.getElementById('doodle-canvas');
    const colorEl = document.getElementById('doodle-color');
    const sizeEl = document.getElementById('doodle-size');
    const clearBtn = document.getElementById('doodle-clear');
    if(!canvas) return;
    const ctx = canvas.getContext('2d');

    let drawing = false, lastX = 0, lastY = 0;

    function posFromEvent(e){
      const rect = canvas.getBoundingClientRect();
      if(e.touches && e.touches[0]){
        return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
      }
      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
    }

    function start(e){
      drawing = true;
      const p = posFromEvent(e);
      lastX = p.x; lastY = p.y;
    }
    function move(e){
      if(!drawing) return;
      const p = posFromEvent(e);
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.strokeStyle = colorEl ? colorEl.value : '#1e3a8a';
      ctx.lineWidth = sizeEl ? Number(sizeEl.value) : 4;
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(p.x, p.y);
      ctx.stroke();
      lastX = p.x; lastY = p.y;
      e.preventDefault();
    }
    function end(){ drawing = false; }

    canvas.addEventListener('mousedown', start);
    canvas.addEventListener('mousemove', move);
    window.addEventListener('mouseup', end);

    canvas.addEventListener('touchstart', start, {passive:false});
    canvas.addEventListener('touchmove', move, {passive:false});
    window.addEventListener('touchend', end);

    if(clearBtn) clearBtn.addEventListener('click', ()=>{
      ctx.clearRect(0,0,canvas.width,canvas.height);
    });
  })();
</script>

{{ endblock }}