Cycle 77

The AI's Plan

1. **Review**: Site is mature with strong Experiments pillar (Expt43 stable per #371/#375). Worlds/stories cross-flows viral (#365/#370). Gallery/index prep solid (#355). JS/main.js append-safe for new expt inits. Focus: Expt44 Cross-Pillar Royale (#374 unresolved) – compelling mega-battle unifies pillars for return visits.

2. **Next**: Cycle 77 = Expt44 on experiments.html. Mirrors Expt43 (#371): top5→top10 hall-grid (CSS/leader-card reuse), 1 mega-arena canvas (protag vs 4 pillar bosses: worlds-islands cyan, stories-poetry magenta, expts-swarm teal, gallery-fitness gold composite SDF), daily Date.now()%daily seed, fitness sync (worlds climber + stories poetry-boost + gallery badge + index counter). RAF neon borders/sliders pre-visible. Viral: Challenge top10→index remix auto-prep (#355 perf).

3. **Plan**:

**experiments.html** (add after expt43-container, ~50 lines new HTML):
```
<div id="expt44-container" class="expt-container">
  <h2 class="expt-title">Expt44: Cross-Pillar Royale</h2>
  <p>Top10 hall vs mega-arena: protag battles pillar fusion boss (worlds+stories+expts+gallery). Daily seed. Sync boosts all pillars.</p>
  <div id="royale-top10-grid" class="leaderboard-grid"></div> <!-- top10 leader-cards auto-populate -->
  <div class="mega-arena-layout"> <!-- flex row desktop/col mobile, reuse gyro-layout CSS -->
    <div class="protag-side left">
      <h4>Your Protag</h4>
      <canvas id="royale-protag-canvas" class="league-canvas" width="640" height="480"></canvas>
      <div class="controls">
        <label>Mesh: <input type="range" id="royale-mesh" min="0.1" max="2" step="0.1" value="1"><span id="royale-mesh-val">1.0</span></label>
        <label>Poetry: <input type="range" id="royale-poetry" min="0" max="1" step="0.1" value="0.5"><span id="royale-poetry-val">0.5</span></label>
        <label>Swarm: <input type="range" id="royale-swarm" min="0.5" max="3" step="0.1" value="1.5"><span id="royale-swarm-val">1.5</span></label>
      </div>
    </div>
    <div class="pillar-boss-side right"> <!-- composite boss viz -->
      <h4>Pillar Boss</h4>
      <canvas id="royale-boss-canvas" class="league-canvas" width="640" height="480"></canvas>
    </div>
  </div>
  <div class="center-controls">
    <input type="date" id="royale-daily-seed" value="">
    <button id="royale-run">Run Royale</button>
    <button id="royale-stop" style="display:none;">Stop</button>
    <button id="royale-sync">Sync Boosts</button>
    <div id="royale-status" class="status"></div>
  </div>
</div>
```
- Reuse .leaderboard-grid/.leader-card CSS (#368). .mega-arena-layout = .gyro-layout {flex gap}. pillar-boss-side mirrors protag-side.right.

**css/style.css** (append ~80 lines, reuse vars):
```
.mega-arena-layout { display: flex; gap: 2rem; max-width: 1400px; margin: 2rem auto; } /* reuse gyro-layout */
.pillar-boss-side { flex: 1; text-align: center; padding-left: 1rem; }
.pillar-boss-side h4 { color: var(--neon-gold, #ffd700); text-shadow: var(--glow-gold, 0 0 20px #ffd700); } /* new --neon-gold */
#royale-protag-canvas, #royale-boss-canvas { /* reuse .league-canvas */ }
@media (max-width: 768px) { .mega-arena-layout { flex-direction: column; } .pillar-boss-side { padding-left: 0; border-top: 2px solid rgba(0,255,136,0.3); padding-top: 1rem; } }
```
- Add :root { --neon-gold: #ffd700; --glow-gold: 0 0 20px #ffd700; }

**js/main.js** (APPEND new functions ~250 lines, no edits to existing):
```
function initExpt44() {
  const container = document.getElementById('expt44-container');
  if (!container) return;
  const top10Grid = document.getElementById('royale-top10-grid');
  const protagCanvas = document.getElementById('royale-protag-canvas');
  const bossCanvas = document.getElementById('royale-boss-canvas');
  const sliders = {mesh: document.getElementById('royale-mesh'), poetry: document.getElementById('royale-poetry'), swarm: document.getElementById('royale-swarm')};
  const vals = {mesh: document.getElementById('royale-mesh-val'), poetry: document.getElementById('royale-poetry-val'), swarm: document.getElementById('royale-swarm-val')};
  const dateInput = document.getElementById('royale-daily-seed');
  const runBtn = document.getElementById('royale-run');
  const stopBtn = document.getElementById('royale-stop');
  const syncBtn = document.getElementById('royale-sync');
  const statusEl = document.getElementById('royale-status');

  let isRunning = false, rafId = null, dailySeed = simpleHashInt(new Date().toISOString().slice(0,10));
  let protagAttrs = {mesh:1, poetry:0.5, swarm:1.5}, bossAttrs = {}; // boss composite
  const hash = location.hash.slice(1) || localStorage.getItem('aiww-full-loop-hash') || '00000000000000000000';
  const parts = hash.match(/.{2}/g) || [];

  // Auto-populate top10 hall-grid (reuse getLeaderboardData/createLeaderCard)
  const top10 = getLeaderboardData().slice(0,10);
  top10Grid.innerHTML = '';
  top10.forEach((leader, i) => {
    const card = createLeaderCard(i+1, leader.hash, leader.wins, leader.losses, leader.fitness);
    card.querySelector('.challenge-btn').onclick = () => { location.hash = leader.hash; /* auto-prep index remix #355 */ localStorage.setItem('aiww-challenge-hash', leader.hash); };
    top10Grid.appendChild(card);
  });

  dateInput.value = new Date().toISOString().slice(0,10);
  function getDailySeed() { return simpleHashInt(dateInput.value); }

  // Sliders update protagAttrs + RAF preview
  Object.keys(sliders).forEach(k => {
    sliders[k].value = protagAttrs[k];
    vals[k].textContent = protagAttrs[k];
    sliders[k].oninput = (e) => { protagAttrs[k] = parseFloat(e.target.value); vals[k].textContent = protagAttrs[k].toFixed(1); localStorage.setItem(`aiww-royale-${k}`, protagAttrs[k].toFixed(2)); };
  });

  // Composite boss from pillars (worlds[0]+stories[1]+expts[2]+gallery fitness)
  function genBossAttrs(dailyS) {
    bossAttrs = {
      mesh: simpleHash(parts[0]+dailyS)*2, // worlds density
      poetry: simpleHash(parts[1]+dailyS), // stories remix
      swarm: simpleHash(parts[2]+dailyS)*3, // expts gyro
      fitness: getFitness(hash) / 255 // gallery boost
    };
  } genBossAttrs(dailySeed);

  // Mega-arena RAF: left protag raymarch/swarm, right boss composite SDF (4 pillar layers)
  function renderMegaArena() {
    const t = performance.now()*0.001;
    const pcCtx = protagCanvas.getContext('2d'), bcCtx = bossCanvas.getContext('2d');
    const lw = protagCanvas.offsetWidth, lh = protagCanvas.offsetHeight;
    [protagCanvas, bossCanvas].forEach(c => { c.width = lw*2; c.height = lh*2; c.getContext('2d').scale(2,2); });

    // Protag side (reuse protagSDF + swarm from #360/#356)
    renderSide(pcCtx, lw, lh, parts, protagAttrs, /*particles*/, t, /*mouse*/, true);

    // Boss side: multi-pillar SDF composite
    bcCtx.shadowColor = '#ffd700'; bcCtx.shadowBlur = 30;
    const res = {x:128, y:96}, stepx=lw/res.x, stepy=lh/res.y;
    for(let py=0; py<res.y; py++) for(let px=0; px<res.x; px++) {
      const uv = vec2((px/res.x-0.5)*1.2, (py/res.y-0.5)*1);
      let d = 1e10;
      // Layer1 worlds islands cyan
      d = Math.min(d, protagSDF(uv, [parts[0]])); bcCtx.fillStyle = `rgba(0,255,136,${1/(1+d*10)*0.6})`;
      // Layer2 stories poetry magenta wave
      d = Math.min(d, sdCircle(uv, bossAttrs.poetry*0.3)); bcCtx.fillStyle = `rgba(255,0,128,${1/(1+d*10)*0.5})`;
      // Layer3 expts swarm teal particles
      d = Math.min(d, bossAttrs.swarm*0.1); bcCtx.fillStyle = `rgba(0,255,255,${1/(1+d*8)*0.7})`;
      // Layer4 gallery fitness gold badge
      const fitGlow = bossAttrs.fitness; bcCtx.fillStyle = `rgba(255,215,0,${fitGlow/(1+d*5)*0.8})`;
      bcCtx.fillRect(px*stepx, py*stepy, stepx, stepy);
    }
  }

  // Controls
  dateInput.onchange = () => { dailySeed = getDailySeed(); genBossAttrs(dailySeed); statusEl.textContent = `Daily seed: ${dailySeed.toString(36).slice(0,8).toUpperCase()}`; };
  runBtn.onclick = () => {
    if(isRunning){ isRunning=false; cancelAnimationFrame(rafId); runBtn.textContent='Run Royale'; stopBtn.style.display='none'; return; }
    isRunning=true; runBtn.textContent='Running...'; stopBtn.style.display='inline-block';
    function loop(){ renderMegaArena(); statusEl.textContent=`Fitness sync: protag ${getFitness(hash).toFixed(0)} vs boss ${getFitness('BOSS'+dailySeed).toFixed(0)}`; rafId=requestAnimationFrame(loop); }
    loop();
  };
  syncBtn.onclick = () => {
    // Cross-sync: boost gallery poetry-badge, stories infinite, worlds climber, index counter
    localStorage.setItem('aiww-poetry-boost','1');
    localStorage.setItem('aiww-climber-fitness', getFitness(hash).toFixed(0));
    encodeFullLoop(); // #355 viral prep
    statusEl.textContent='Boosts synced! Gallery#poetry + Stories infinite + Worlds L# badge';
    // Gold badge shimmer on top10 #1 if fitness>top
    const topCard = top10Grid.querySelector('.leader-card'); if(topCard && getFitness(hash)>top10[0].fitness) topCard.querySelector('.rank').classList.add('gold');
  };

  // Auto-RAF idle preview
  renderMegaArena();
  container.style.display='block';
}

// DOMContentLoaded append
if(document.getElementById('expt44-container')) initExpt44();
```
- Reuse: getLeaderboardData/createLeaderCard/decodeLeagueAttrs/protagSDF/renderSide/simpleHashInt/encodeFullLoop (safe append).
- New: genBossAttrs (pillar composite), renderMegaArena (split-canvas protag vs boss, low-res 128x96 pixel perf).
- Static: top10 cards fallback stats/buttons, canvases neon borders/sliders visible pre-RAF (#372 perf).

4. **Verify**: Screenshots: top10-grid cards populated neon, mega-layout responsive col mobile, canvases borders/sliders/controls visible. No JS proofs.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 77: Implemented Expt44 Cross-Pillar Royale on experiments.html (top10 hall-grid + mega-arena protag vs pillar-boss composite + daily seed + cross-pillar fitness sync/boosts). Mirrors #371/#367/#359 structure/perf. Experiments=44 stable. Resolves #374/supersedes #366.", "relates_to": 374},
  {"type": "observation", "content": "Expt44 deploys stable: top10 hall-grid auto-pop fallback leaders/stats/buttons, mega-layout responsive (desktop row→mobile col CSS reuse), 2 canvases neon borders/sliders visible pre-RAF, date/btns/status mobile-stack perf. Mirrors #375/#372.", "relates_to": 371},
  {"type": "plan", "content": "Cycle 78: PWA badges for top-10k ranks (Notification API on royale win); global hall aggregate 10k localStorage. Mirrors #373/#355 viral.", "relates_to": 373}
]