{% extends "global/Page.html" %}

{% block title %}
Practice Sandbox
{% endblock %}

{% block styles %}
<style>
  /* Reuse your main styles */
  @import "{% static 'negotiate.css' %}";

  /* Minimal extra styling to keep things contained and clear */
  .sandbox-wrap { align-self:start; width:100%; margin-top:.25rem; }
  .explain { background:#f8f9fa; border:1px solid #e5e7eb; border-radius:.5rem; padding:.75rem; }
  .board { display:flex; flex-direction:column; align-items:center; margin-top:.5rem; }
  .row   { display:flex; justify-content:center; margin-top:-0.3em; }
  .cell  {
    width:2.5em; height:2.5em; border-radius:50%;
    border:3px solid gray; background:rgba(200,200,200,.45);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin:1px; position:relative;
  }
  .cell:hover { background:rgba(200,200,200,.75); }

  .hud { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:.75rem 0; }
  .money { font-weight:600; }
  .coalition-timer { font-weight:700; }

  .participant-col { width:15%; vertical-align:top; }
  .participant-block { display:flex; flex-direction:column; align-items:center; margin-top:.25rem; }
  .participant-block p { margin:.15em 0; }
  .gain-box { font-weight:bold; margin:.15em 0; }

  .label-green  { color: rgb(50,205,50); font-weight:700; }
  .label-purple { color: rgb(186,85,211); font-weight:700; }
  .label-blue   { color: rgb(30,144,255); font-weight:700; }

  .practice-msg { margin-top:.5rem; font-weight:600; }
  .practice-done { color: #16a34a; }
  .practice-pending { color: #dc2626; }

  /* Keep Next disabled until practiced */
  .otree-btn-next[disabled] { opacity:.6; cursor:not-allowed; }

    .coalition-slot {
      height: 0px;                 /* set to 1 line of your UI text */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;          /* space between timer and board */
    }

    .coalition-timer {
      font-weight: 700;
      line-height: 1;               /* avoid extra vertical growth */
      text-align: center;
    }

    /* optional: hide visually but keep slot height */
    .coalition-timer.is-hidden { visibility: hidden; }

    /* confetti particles */
    .confetti {
      position: absolute; width: 6px; height: 10px; border-radius: 2px;
      opacity: 0; pointer-events: none;
      animation: nx-confetti 700ms ease-out forwards;
      will-change: transform, opacity;
    }

    /* keyframes */
    @keyframes nx-confetti {
      0%   { transform: translate(0, -4px) rotate(0deg);   opacity: 0; }
      10%  { opacity: 1; }
      100% { transform: translate(var(--dx, 0px), var(--dy, 24px)) rotate(var(--rot, 45deg)); opacity: 0; }
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .confetti {
        animation: none !important;
      }
    }

  /* --- Results modal --- */
    .nx-modal.is-hidden { display: none; }
    .nx-modal {
      position: fixed; inset: 0;
      z-index: 9999;
    }
    .nx-modal__backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(1px);
    }
    .nx-modal__card {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      background: #fff; color: #111;
      width: min(520px, 92vw);
      border-radius: .75rem; padding: 1rem 1.25rem;
      box-shadow: 0 10px 35px rgba(0,0,0,.25);
    }
    .nx-modal__grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: .75rem; margin-top: .25rem;
    }
    .nx-modal__cell {
      border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .75rem;
      text-align: center; background:#f9fafb;
    }
    .nx-modal__label { font-weight: 600; margin-bottom: .25rem; }
    .nx-modal__value { font-size: 1.25rem; font-weight: 700; }

    .nx-modal__calc { margin-top: .75rem; text-align: center; }
    .nx-modal__calc-main { font-size: 1.05rem; }
    .nx-modal__calc-note { color:#6b7280; font-size:.9rem; }

  .round-indicator{
      font-weight: 700;
      text-align: center;
      margin-top: .3rem;
      font-size: 1.4rem;
    }

  .money { font-weight: 600; text-align: center; margin-top: .25rem; }


</style>
{% endblock %}

{% block content %}
<div class="sandbox-wrap">

  <div class="explain">
    <h4 class="mb-2">Practice (No stakes)</h4>
    <ul class="mb-2">
      <li>Click any cell to place <strong>your ring (green)</strong>.</li>
      <li>In this practice, the <strong>purple</strong> and <strong>blue</strong> rings move to simulate other participants playing.</li>
      <li>When <em>two or more</em> players pick the same cell, a timer starts.</li>
      <li>Hold for <strong>{{ real_threshold_seconds }}s</strong> to finalize an agreement.</li>
      <li>You can play a maximum of <strong>{{ sandbox_round_limit }} rounds </strong>  in this practice session.</li>
        </ul>
      <div id="practice_msg" class="practice-msg practice-pending" aria-live="polite">
  Hold an agreement for <strong>{{ practice_threshold_seconds }}s</strong> to unlock <em>Next</em>.
</div>
  </div>

  <!-- Timer indicator -->
  <div class="money" id="money_timer" aria-live="polite">
  Each point is worth: -- • Time left: --
    </div>

  <!-- Round indicator -->
    <div class="round-indicator" id="round_indicator" aria-live="polite">Round 1</div>

    <div class="coalition-slot">
      <div class="coalition-timer" id="coalition_timer"></div>
    </div>

  <table border="0" width="100%">
    <tr>
      <!-- LEFT TOP = AI (purple) -->
      <td class="participant-col">
        <div class="participant-block">
          <img src="{% static 'images/ai_silhouette.svg' %}" alt="AI silhouette" width="40">
          <p class="label-purple">AI</p>
          <p class="gain-box" id="gain-a"> --</p>
        </div>
      </td>

      <!-- BOARD -->
      <td style="text-align:center; vertical-align:top;">
        <div id="triangle-board" class="board"></div>
      </td>

      <!-- RIGHT TOP = Human (blue) -->
      <td class="participant-col">
        <div class="participant-block">
          <img src="{% static 'images/human_silhouette.svg' %}" alt="Human silhouette" width="40">
          <p class="label-blue">Human</p>
          <p class="gain-box" id="gain-b"> --</p>
        </div>
      </td>
    </tr>

    <tr>
      <td></td>
      <td style="text-align:center">
        <div class="participant-block">
          <img src="{% static 'images/human_silhouette.svg' %}" alt="You" width="40">
          <p class="label-green">You</p>
          <p class="gain-box" id="gain-you"> --</p>
        </div>
      </td>
      <td></td>
    </tr>
  </table>

  <div id="status" class="practice-msg" style="margin-top:.5rem;"></div>

  <!-- Keep the real oTree button but start disabled; we enable in JS -->
  <div class="mt-3">
    {{ next_button }}
  </div>
</div>

<!-- Results modal -->
<div id="result_modal" class="nx-modal is-hidden" role="dialog" aria-modal="true" aria-labelledby="nxModalTitle">
  <div class="nx-modal__backdrop"></div>
  <div class="nx-modal__card">
    <h4 id="nxModalTitle" class="mb-2">Practice Result</h4>
    <p id="nxModalReason" class="mb-2">Agreement finalized after 10 seconds.</p>

    <div class="nx-modal__grid">
      <div class="nx-modal__cell">
        <div class="nx-modal__label">You</div>
        <div id="nxModalYou" class="nx-modal__value">--</div>
      </div>
      <div class="nx-modal__cell">
        <div class="nx-modal__label">AI</div>
        <div id="nxModalAI" class="nx-modal__value">--</div>
      </div>
      <div class="nx-modal__cell">
        <div class="nx-modal__label">Human</div>
        <div id="nxModalHuman" class="nx-modal__value">--</div>
      </div>
    </div>

    <div class="nx-modal__calc" aria-live="polite">
      <div class="nx-modal__calc-main">
        <strong>Your payoff:</strong> <span id="nxModalCalc">£0.00</span>
      </div>
      <div class="nx-modal__calc-note">
        = <span id="nxModalYourPts">0</span> points × £<span id="nxModalRate">0.00</span> per point
      </div>
    </div>

    <div class="mt-3" style="text-align:center">
      <button type="button" class="btn btn-primary" id="nxModalOk">OK</button>
    </div>
  </div>
</div>

<!-- Completion modal -->
<div id="done_modal" class="nx-modal is-hidden" role="dialog" aria-modal="true" aria-labelledby="nxDoneTitle">
  <div class="nx-modal__backdrop"></div>
  <div class="nx-modal__card">
    <h4 id="nxDoneTitle" class="mb-2">All set!</h4>
    <p class="mb-2">
      You’ve completed {{ sandbox_round_limit }} practice rounds.
      You’re ready to continue to the actual game.
    </p>
    <p class="nx-modal__calc-note">
      You can proceed by clicking <strong>Next</strong> below.
    </p>
    <div class="mt-3" style="text-align:center">
      <button type="button" class="btn btn-primary" id="nxDoneOk">OK</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  // --- Tunables ---
  const PRACTICE_THRESHOLD = {{ practice_threshold_seconds|json }};
  const REAL_THRESHOLD     = {{ real_threshold_seconds|json }};
  const COUNTS             = [13,12,11,10,9,8,7,6,5,4,3,2,1];
  const ROUND_LIMIT        = {{ sandbox_round_limit|json }};

  // Calm ghost pacing
  const GHOST_TICK_MS      = 2800;
  const RENDER_TICK_MS     = 350;
  const JOIN_STICKY_MS     = 4000;
  const MOVE_COOLDOWN_MS   = { purple: 2600, blue: 2400 };
  const FOLLOW_JOIN_PROB   = { purple: 0.55, blue: 0.25 };

  // Money Timer
  const TOTAL_TIME   = 120;       // seconds per round
  const START_MONEY  = 0.25;      // euros per point at t=0
  const DECAY_RATE   = START_MONEY / TOTAL_TIME; // linear decay

  let roundStartMs = null;
  let pausedAtMs   = null;
  let pausedAccMs  = 0;
  let moneyTickId  = null;

  // Colors and classes (match main game)
  const COLORS = ['green','purple','blue'];
  const COLOR_CLASS = {
    green: 'ring-green',
    purple: 'ring-purple',
    blue: 'ring-blue'
  };
  const SIZE_CLASS = ['ring-1','ring-2','ring-3']; // by order index 0..2

  // State
  const state = {
      green: null,
      purple: null,
      blue: null,
      order: {},
      coalitionCell: null,
      coalitionStartTs: null,
      practiceUnlocked: false,
      celebrationCell: null,
      celebrationDone: false,
      meta: { purple: { lastMoveTs: 0, lastJoinTs: 0 }, blue: { lastMoveTs: 0, lastJoinTs: 0 } }
    };

  // Helpers
  const qs  = (s, root = document) => root.querySelector(s);
  const qsa = (s, root = document) => Array.from(root.querySelectorAll(s));
  const key = (r,c)=>`${r},${c}`;

  // Result Box Pause Constants
  let isPaused = false;
    let ghostIntervalId = null;
    let renderIntervalId = null;

  // Round Number
  let roundNum = 1;

    function updateRoundIndicator(){
      const el = document.getElementById('round_indicator');
      if (el) el.textContent = `Round ${roundNum}`;
    }

  // Round Timer
  function resetRoundClock(){
      roundStartMs = Date.now();
      pausedAtMs   = null;
      pausedAccMs  = 0;
      renderMoneyTime(); // immediate paint
    }

  function getElapsedSec(){
      if (!roundStartMs) return 0;
      const now = Date.now();
      const pausedDur = pausedAtMs ? (now - pausedAtMs) : 0;
      return Math.max(0, Math.floor((now - roundStartMs - pausedAccMs - pausedDur) / 1000));
    }

  function getTimeLeft(){ return Math.max(0, TOTAL_TIME - getElapsedSec()); }
  function getMoneyLeft(){ return Math.max(0, START_MONEY - DECAY_RATE * getElapsedSec()); }

  function renderMoneyTime(){
      const el = document.getElementById('money_timer');
      if (!el) return;
      el.textContent =
        `Each point is worth: £${getMoneyLeft().toFixed(2)} • Time left: ${getTimeLeft()}s`;
    }

  function startMoneyClock(){
      if (moneyTickId) clearInterval(moneyTickId);
      moneyTickId = setInterval(() => {
        if (isPaused) return; // freeze when modal open
        renderMoneyTime();
        if (getTimeLeft() <= 0){
          showResultModal(null, null, 'time');  // end-of-round popup
        }
      }, 1000);
    }

  function getCellEl(r, c) {
      return qs(`.cell[data-row="${r}"][data-col="${c}"]`);
    }

  function clampToBoard(pos){
    if(!pos) return pos;
    let {row,col} = pos;
    row = Math.max(1, Math.min(13, row));
    const maxCol = 14 - row;
    col = Math.max(1, Math.min(maxCol, col));
    return {row,col};
  }

  function sanitizeState(){
    for(const c of COLORS){ state[c] = clampToBoard(state[c]); }
  }

  // Board construction: prebuild 3 ring hosts per cell (one per color)
  function createCell(row, col){
    const d = document.createElement('div');
    d.className = 'cell';
    d.dataset.row = row;
    d.dataset.col = col;

    // Ring hosts (we will assign size/color classes dynamically)
    const rg = document.createElement('div'); rg.className = 'ring'; rg.id = `ring_${row}_${col}_green`;  d.appendChild(rg);
    const rp = document.createElement('div'); rp.className = 'ring'; rp.id = `ring_${row}_${col}_purple`; d.appendChild(rp);
    const rb = document.createElement('div'); rb.className = 'ring'; rb.id = `ring_${row}_${col}_blue`;   d.appendChild(rb);

    d.addEventListener('mouseenter', () => showGains(row, col));
    d.addEventListener('mouseleave', resetGains);
    d.addEventListener('click',     () => move('green', row, col)); // YOU = green
    return d;
  }

  function createBoard(){
    const board = document.getElementById('triangle-board');
    updateRoundIndicator();
    COUNTS.forEach((cnt, idx) => {
      const row = idx + 1;
      const rowDiv = document.createElement('div');
      rowDiv.className = 'row';
      for(let col=1; col<=cnt; col++){
        rowDiv.appendChild(createCell(row, col));
      }
      board.appendChild(rowDiv);
    });
  }

  // Payoff hovers (same mapping as main game)
  function showGains(row, col){
    qs('#gain-you').textContent = ' ' + (row - 1);        // bottom
    qs('#gain-b').textContent   = ' ' + (col - 1);        // right/top (blue)
    qs('#gain-a').textContent   = ' ' + (14 - row - col); // left/top (purple)
  }
  function resetGains(){
    qs('#gain-you').textContent = ' --';
    qs('#gain-a').textContent   = ' --';
    qs('#gain-b').textContent   = ' --';
  }

  // Maintain order arrays per cell like the live game does
  function removeFromAllOrders(color){
    for(const k in state.order){
      const arr = state.order[k];
      const idx = arr.indexOf(color);
      if(idx >= 0){
        arr.splice(idx,1);
        if(arr.length === 0) delete state.order[k];
      }
    }
  }

  function pushToOrder(cellK, color){
    const arr = state.order[cellK] || (state.order[cellK] = []);
    // ensure unique then push at end (later arrivals get smaller rings)
    const i = arr.indexOf(color);
    if(i >= 0) arr.splice(i,1);
    arr.push(color);
  }

  // Movement
  function move(color, row, col){
    const prev = state[color] && key(state[color].row, state[color].col);
    const next = key(row, col);

    state[color] = {row, col};
    // update order: remove from old cell’s order, add to new cell’s order
    removeFromAllOrders(color);
    pushToOrder(next, color);

    // if old cell has no one left, it will be cleaned by render()
    render();
  }

  // Rendering rings and coalition (combined circles)
  function clearCellVisuals(){
    qsa('.ring').forEach(r => {
      r.classList.remove('ring-green','ring-purple','ring-blue','ring-1','ring-2','ring-3');
    });
    qsa('.coalition-dot').forEach(e => e.remove());
  }

    function render(){
      clearCellVisuals();

      // draw rings per cell by order
      for(const cellK in state.order){
        const [r, c] = cellK.split(',').map(Number);
        const arr = state.order[cellK]; // e.g., ['green','purple']
        arr.forEach((color, idx) => {
          const ring = document.getElementById(`ring_${r}_${c}_${color}`);
          if(!ring) return;
          ring.classList.add(COLOR_CLASS[color]);
          ring.classList.add(SIZE_CLASS[Math.min(idx, 2)]); // 0->ring-1 (largest), 1->ring-2, 2->ring-3
        });
      }

      // coalition detection (>=2 rings in same cell)
      const coalitionK = Object.entries(state.order).find(([,arr]) => arr.length >= 2)?.[0] || null;
      const now = performance.now();

      if (coalitionK){
        const [r, c] = coalitionK.split(',').map(Number);
        const cellEl = getCellEl(r,c);

        // ensure dot exists
        if(cellEl && !cellEl.querySelector('.coalition-dot')){
          const dot = document.createElement('div');
          dot.className = 'coalition-dot';
          cellEl.appendChild(dot);
        }

        // coalition just started? fire animations & stickiness
        if (state.coalitionCell !== coalitionK){
          state.coalitionCell = coalitionK;
          state.coalitionStartTs = now;

          // reset celebration tracking for this new cell
          state.celebrationCell = coalitionK;
          state.celebrationDone = false;

          // stickiness for ghosts currently in coalition
          for(const g of ['purple','blue']){
            const gp = state[g];
            if(gp && key(gp.row,gp.col) === coalitionK){
              state.meta[g].lastJoinTs = now;
            }
          }
        }

        // update timer text (use the fixed-height slot to avoid layout shift)
            const elapsed = Math.floor((now - state.coalitionStartTs)/1000);
            const t = document.getElementById('coalition_timer');
            t.textContent = `Agreement holding: ${elapsed}s (${REAL_THRESHOLD}s needed for finalised agreement)`;
            t.classList.remove('is-hidden');

            // Fire confetti & show results exactly when threshold is reached (once per coalition cell)
            if (!state.celebrationDone && state.celebrationCell === coalitionK && elapsed >= PRACTICE_THRESHOLD){
              state.celebrationDone = true;
              if (cellEl) confettiBurst(cellEl, 14);

              if (!state.practiceUnlocked){
                state.practiceUnlocked = true;
                unlockNext();

                const msg = document.getElementById('practice_msg');
                if (msg){
                  msg.textContent = 'Practice complete — you can proceed.';
                  msg.classList.remove('practice-pending');
                  msg.classList.add('practice-done');
                }

                document.getElementById('status').textContent =
                  '✅ Agreement reached. You may continue exploring the board to familiarize yourself with the game mechanics.';
              }

              // NEW: show mini results popup for the exact agreement cell
              const [rr, cc] = coalitionK.split(',').map(Number);
              showResultModal(rr, cc);
            }
        } else {
          // coalition broken
          state.coalitionCell = null;
          state.coalitionStartTs = null;

          // reset celebration tracking
          state.celebrationCell = null;
          state.celebrationDone = false;

          const t = document.getElementById('coalition_timer');
          t.classList.add('is-hidden'); // keep slot height, hide text
        }
  }

  // Ghosts (slow + sticky)
  function randStepSlow(){
    const r = Math.random();
    if (r < 0.70) return 0;
    if (r < 0.85) return 1;
    return -1;
  }

  function ghostLoop(){
    const now = performance.now();

    function maybeMoveGhost(name, followProb, idleTarget, roamList){
      const meta = state.meta[name];
      if (now - meta.lastMoveTs < MOVE_COOLDOWN_MS[name]) return;
      if (state.coalitionCell && now - meta.lastJoinTs < JOIN_STICKY_MS) return;

      // join you sometimes
      if (state.green && Math.random() < followProb){
        const dest = {...state.green};
        meta.lastMoveTs = now;
        move(name, dest.row, dest.col);
        if (state.coalitionCell && key(dest.row,dest.col) === state.coalitionCell){
          meta.lastJoinTs = now;
        }
        return;
      }

      // otherwise roam gently
      let dest;
      if (Math.random() < 0.5 && roamList && roamList.length){
        dest = {...roamList[Math.floor(Math.random()*roamList.length)]};
      } else {
        dest = {...idleTarget};
      }
      dest.row += randStepSlow();
      dest.col += randStepSlow();
      dest = clampToBoard(dest);
      meta.lastMoveTs = now;
      move(name, dest.row, dest.col);
    }

    maybeMoveGhost('purple', 0.55, {row:6, col:3}, [{row:5,col:3},{row:6,col:3},{row:7,col:4}]);
    maybeMoveGhost('blue',   0.25, {row:7, col:5}, [{row:6,col:6},{row:7,col:5},{row:8,col:4},{row:7,col:6}]);

    sanitizeState();
    // render() already called inside move(), but call once more to refresh timers cleanly
    render();
  }

  // Next button gating
  function unlockNext(){
    const btn = document.querySelector('button.otree-btn-next');
    if(btn) btn.removeAttribute('disabled');
  }
  function lockNext(){
    const btn = document.querySelector('button.otree-btn-next');
    if(btn) btn.setAttribute('disabled','disabled');
  }

  // Init
  document.addEventListener('DOMContentLoaded', () => {
    createBoard();
    resetRoundClock();
    startMoneyClock();
    lockNext();

    // Seed ghosts
    state.purple = {row:5, col:3}; pushToOrder(key(5,3), 'purple');
    state.blue   = {row:6, col:6}; pushToOrder(key(6,6), 'blue');

    render();

    ghostIntervalId = setInterval(() => { if (!isPaused) ghostLoop(); }, GHOST_TICK_MS);
    renderIntervalId = setInterval(() => { if (!isPaused) render(); }, RENDER_TICK_MS);
  });

  // small utility to push on first draw (used in init above)
  function pushToOrder(cellK, color){
    const arr = state.order[cellK] || (state.order[cellK] = []);
    if (!arr.includes(color)) arr.push(color);
  }

    function addClass(el, cls){ if(el && !el.classList.contains(cls)) el.classList.add(cls); }
    function removeClass(el, cls){ if(el && el.classList.contains(cls)) el.classList.remove(cls); }

    function confettiBurst(cellEl, count=12){
      const colors = ['#22c55e','#60a5fa','#a78bfa','#f97316','#e11d48']; // green/blue/purple + accents
      const rect = cellEl.getBoundingClientRect();
      const parent = cellEl.offsetParent || cellEl.parentElement || document.body;

      for(let i=0;i<count;i++){
        const piece = document.createElement('div');
        piece.className = 'confetti';
        piece.style.background = colors[i % colors.length];

        // position near bottom-right (where your red dot sits), with slight jitter
        const jitterX = (Math.random()*10 - 5);
        const jitterY = (Math.random()*6  - 3);
        piece.style.left = (cellEl.offsetLeft + cellEl.offsetWidth - 10 + jitterX) + 'px';
        piece.style.top  = (cellEl.offsetTop  + cellEl.offsetHeight - 10 + jitterY) + 'px';

        // random travel & rotation
        piece.style.setProperty('--dx', (Math.random()*40 - 20) + 'px');
        piece.style.setProperty('--dy', (18 + Math.random()*26) + 'px');
        piece.style.setProperty('--rot', (Math.random()*120 - 60) + 'deg');

        parent.appendChild(piece);
        setTimeout(() => piece.remove(), 750);
      }
    }

    /* add ring glow to all colors present in this cell’s order */
    function glowRingsAtCell(r, c, colorsInCell){
      colorsInCell.forEach(color => {
        const ring = document.getElementById(`ring_${r}_${c}_${color}`);
        if (ring) addClass(ring, 'glow');
      });
    }

    /* clear any transient glow on previous coalition cell */
    function clearGlowAtCell(r, c){
      ['green','purple','blue'].forEach(color => {
        const ring = document.getElementById(`ring_${r}_${c}_${color}`);
        if (ring) removeClass(ring, 'glow');
      });
    }

    function computeGains(row, col){
      return {
        you: row - 1,
        human: col - 1,                 // blue (top-right)
        ai: 14 - row - col              // purple (top-left)
      };
    }

    function showResultModal(row, col, reason='coalition'){
      pauseGame();

      const m = document.getElementById('result_modal');
      const reasonEl = document.getElementById('nxModalReason');

      // default zeros
      let pts = 0;
      let rate = getMoneyLeft();                 // per-point £ at the moment we pause
      let euros = 0;

      if (reason === 'time' || row == null || col == null){
        // Time-out: no agreement, no points
        reasonEl.textContent = 'Time ran out — no agreement was finalized.';
        document.getElementById('nxModalYou').textContent   = '0';
        document.getElementById('nxModalAI').textContent    = '0';
        document.getElementById('nxModalHuman').textContent = '0';

        // NEW: fill calc line
        pts   = 0;                      // no agreement → 0 points
        euros = 0;
      } else {
        reasonEl.textContent = 'Agreement finalized after 10 seconds.';
        const gains = computeGains(row, col);
        document.getElementById('nxModalYou').textContent   = gains.you;
        document.getElementById('nxModalAI').textContent    = gains.ai;
        document.getElementById('nxModalHuman').textContent = gains.human;

        // NEW: fill calc line
        pts   = gains.you;
        euros = pts * rate;
      }

      // NEW: write the calc values
      document.getElementById('nxModalYourPts').textContent = String(pts);
      document.getElementById('nxModalRate').textContent    = rate.toFixed(2);
      document.getElementById('nxModalCalc').textContent    = `£${euros.toFixed(2)}`;

      m.classList.remove('is-hidden');
      setTimeout(() => document.getElementById('nxModalOk')?.focus(), 0);
    }

    function hideResultModal(){
      resumeGame(); // ⬅️ NEW line
      document.getElementById('result_modal').classList.add('is-hidden');
    }

    function restartPracticeBoardPreservingUnlock(){
      // preserve whether they already unlocked practice
      const wasUnlocked = state.practiceUnlocked === true;

      // wipe positions & ordering
      state.green = state.purple = state.blue = null;
      state.order = {};
      state.coalitionCell = null;
      state.coalitionStartTs = null;
      state.celebrationCell = null;
      state.celebrationDone = false;

      // stop & hide timer text
      const t = document.getElementById('coalition_timer');
      if (t){ t.textContent = ''; t.classList.add('is-hidden'); }

      // clear visuals and re-render an empty board
      clearCellVisuals();
      render();

      // Round Timer Reset
      resetRoundClock();
      renderMoneyTime();

      // keep “practice done” + Next enabled if they already achieved it once
      if (wasUnlocked){
        state.practiceUnlocked = true;
        unlockNext();

        // keep the green success text if it exists
        const msg = document.getElementById('practice_msg');
        if (msg){
          msg.textContent = 'Practice complete — you can proceed.';
          msg.classList.remove('practice-pending');
          msg.classList.add('practice-done');
        }
      }
    }

    function pauseGame(){
      if (isPaused) return;
      isPaused = true;
      pausedAtMs = Date.now();                    // start measuring pause
      document.getElementById('triangle-board').style.opacity = 0.4;
    }

    function resumeGame(){
      if (!isPaused) return;
      isPaused = false;
      if (pausedAtMs){
        pausedAccMs += (Date.now() - pausedAtMs); // accumulate paused time
        pausedAtMs = null;
      }
      document.getElementById('triangle-board').style.opacity = 1;
      renderMoneyTime();                           // snap HUD to current time
    }

    // close modal handler (set up once)
    document.addEventListener('click', (e) => {
      if (e.target?.id === 'nxModalOk') {
        hideResultModal();
        roundNum += 1;           // increment the round
        updateRoundIndicator();  // refresh HUD text

        // NEW: enforce limit
        if (roundNum > ROUND_LIMIT) {
          // ensure Next is available even if they never finalized before
          unlockNext();
          // hard-freeze the practice board
          isPaused = true;
          document.getElementById('triangle-board').style.opacity = 0.4;
          if (ghostIntervalId) clearInterval(ghostIntervalId);
          if (renderIntervalId) clearInterval(renderIntervalId);
          if (moneyTickId) clearInterval(moneyTickId);

          // show completion modal
          document.getElementById('done_modal').classList.remove('is-hidden');
          setTimeout(() => document.getElementById('nxDoneOk')?.focus(), 0);
          return; // don’t restart another round
        }

        // continue normal practice flow if under the cap
        restartPracticeBoardPreservingUnlock();
      }
    });

    document.addEventListener('click', (e) => {
  if (e.target?.id === 'nxDoneOk') {
    const m = document.getElementById('done_modal');
    m.classList.add('is-hidden');     // hide the completion modal
    unlockNext();                     // ensure Next is active
    document.querySelector('button.otree-btn-next')?.focus();
    // board remains paused intentionally
  }
});
</script>

{% endblock %}