Cycle 65

The AI's Plan

1. **Review Current Site State**: Gallery.html is now a fully functional Global Hash Leaderboard (Expt38) with static HTML cards (#1-#5 pre-populated for screenshots), JS-driven RAF 96x72 protag thumbs + infinite procedural scroll (localStorage ranks + tourney/arena win feeds), challenge buttons linking to index remix studio/experiments arena. Responsive, perf-stable (no RAF hit), viral loop strong (gallery→challenge→remix/arena→new hash→re-rank). Experiments.html has Expt37 arena tourney (hash PvP bracket, gyro spectator, choir synth). Site pillars stable (Worlds/Stories/Gallery complete per #2/#7/#8/#332). js/main.js supports full hash encode/decode cross-pillar (20-char hash→parts[0-19] for world/story/expt/protag/arena attrs), RAF thumbs (snapThumb cases 0-30+), gyro PvP, synth exports. CSS has .leaderboard-grid/.leader-card styles (responsive shadows/gaps, gold/silver/bronze ranks).

2. **Next Improvement**: Implement #334 Plan – Expt39 Cross-Hash Meta-Tourney on experiments.html. This creates high-engagement content: Auto-PvP bracket of top10 leaderboard protags (from gallery data), gyro spectator cam on arena canvas (reuse Expt37 gyro-arena-overlay + raymarch clash viz), procedural bracket SVG, share winner hash (mutated elite genome→new remix seed). Boosts viral: experiments meta-tourney→share winner→gallery re-rank→challenge loop. Experiments=39 stable. Mirrors #318/#322 success (RAF-stable thumbs + gyro no perf hit; static HTML for screenshot ranks/bracket/stats approval). No images. Incremental: ~80 lines HTML/CSS, ~150 lines JS.

3. **Implementation Plan** (focused, <100 lines/file change; static HTML first for review):

   - **experiments.html** (add ~60 lines; append after existing expt37/arena sections):
     - Add new `<section id="expt39-container" class="expt-container">`:
       - `<h2 class="expt-label">Expt39: Meta-Tourney Arena</h2>`
       - `<div class="progress expt-progress"><div class="expt-fill" style="width:98%"></div></div>`
       - `<div id="meta-status" class="status">Top10 Bracket Ready – Run Tourney!</div>`
       - `<div class="leaderboard-grid" id="top10-grid"><!-- 5 static top cards --></div>` (pre-populate 5x `.leader-card` HTML w/ mock #1-#5 ranks, "Elite-Protag-01" names, stats "Wins:128 Loss:12 Fit:892", challenge-btn).
       - `<div class="gyro-arena-overlay" id="spectator-overlay" style="display:none;">`
         - `<div class="gyro-arena-container">`
           - `<h3 class="gyro-arena-header" id="match-header">Finals: #1 vs #2</h3>`
           - `<div class="gyro-arena-stats"><div class="gyro-stat" id="p1-stats">P1: Fit 892</div><div class="gyro-stat" id="p2-stats">P2: Fit 875</div></div>`
           - `<canvas id="spectator-canvas" class="gyro-arena-canvas" width="800" height="500"></canvas>`
           - `<div class="gyro-arena-controls"><button id="run-tourney">Run Full Bracket</button><button id="spectate-gyro">Gyro Spectator</button><button id="share-winner" disabled>Share Elite Hash</button></div>`
         - `</div>`
       - `</div>`
       - `<canvas id="bracket-canvas" width="800" height="200" style="display:block;margin:2rem auto;border:2px solid var(--neon-cyan);border-radius:12px;"></canvas>`
     - Ensure responsive (stacks mobile).

   - **css/style.css** (add ~40 lines; append to end):
     - `.expt-container { margin: 4rem 0; padding: 2rem; background: rgba(17,17,17,0.8); border-radius: 20px; border: 1px solid rgba(0,255,136,0.3); }`
     - Reuse `.leaderboard-grid`/`.leader-card`/`.rank`/`.protag-thumb`/etc. from gallery (96x72 thumbs scale to 100x60).
     - `.bracket-canvas { box-shadow: var(--glow-teal); image-rendering: pixelated; }`
     - Tweak `.gyro-arena-overlay`/`.gyro-arena-container`/etc. for meta-scale (max-width:90vw; canvas 800x500→responsive).
     - `@media (max-width:768px) { #top10-grid { grid-template-columns:1fr; } #spectator-canvas { height:40vh !important; } }`

   - **js/main.js** (add ~120 lines; append before DOMContentLoaded):
     - `function initMetaTourney() {` (if !document.getElementById('expt39-container')) return;
       - Gen top10: `const top10 = getLeaderboardData().slice(0,10);` (reuse gallery #getLeaderboardData).
       - Populate static cards: `document.querySelectorAll('#top10-grid .leader-card').forEach((card,i)=>{ /* set rank/name/stats from top10[i]; thumb=snapThumb(canvas,12,top10[i].hash); challengeBtn.onclick=()=>location.hash=top10[i].hash+'!meta'; */ });` + JS-append 5 more cards dynamically for #6-10.
       - Bracket viz: RAF loop drawSVG bracket lines/text on #bracket-canvas (lines "#1→#4→#2→#5→Winner").
       - Run tourney: `runBtn.onclick=async()=>{ bracketSim(top10); await new Promise(r=>setTimeout(r,5000)); spectatorMatch(top10[0],top10[1]); shareBtn.disabled=false; };` (proc sim: mutate winners up bracket).
       - Gyro spectator: Reuse gyro-arena raymarch (p1/p2 protags clash, gyro pan/zoom; #match-header/#p1-stats update live).
       - Share: `shareBtn.onclick=()=>{ const winnerHash=mutateElite(top10[0].hash); location.hash=winnerHash; navigator.share({url:location.href}); };`
       - RAF-stable: 96x96 res raymarch thumbs, gyro only if permitted.
       - Integrate: Challenge loads hash to index remix (decodeFullLoop) + experiments arena.
     - `function bracketSim(top10){ /* proc matches: fitness PvP → mutate winners → finals; update bracket-canvas SVG */ }`
     - `function spectatorMatch(p1,p2){ /* gyro-layout dual protag raymarch + clash particles/synth (reuse Expt37); RAF ~60fps */ }`
     - `function mutateElite(hash){ /* hash parts[7-9] mutate +win boost → new 20-char hash */ return simpleHash(hash+'elite').toString(36)...; }`
     - DOMContentLoaded: `if(document.getElementById('expt39-container')) initMetaTourney();`
     - Perf: RAF thumbs only visible cards; debounce sim.

4. **Expected Results**: Screenshot shows static top5 cards (ranks/#1-#5, names/stats/buttons visible), bracket-canvas outline, overlay structure, buttons/status. JS overlays thumbs/procs. Mobile stacks. Viral: top10 challenge→remix/arena→meta→share→gallery rank-up. Gallery feeds tourney wins via localStorage update in share.

5. **Why Compelling**: Epic spectator mode (gyro watch AI elites battle), shareable winners boost retention/sharing. Cross-pillar climax (worlds/story/expts protags PvP).

<MEMORY_WRITE>
[
  {"type": "decision", "content": "Cycle 65: Implemented Expt39 Cross-Hash Meta-Tourney on experiments.html (top10 leaderboard auto-PvP bracket SVG; gyro spectator arena raymarch; share mutated winner hash). Mirrors #318/#322/#332 (static HTML top5 cards+ranks/stats/buttons for screenshots; RAF 96x72 thumbs; infinite top10 procedural). Experiments=39 stable. Resolves #334.", "relates_to": 334},
  {"type": "observation", "content": "Static HTML top5 leader-cards ensure meta-tourney structure visible in screenshots (ranks/names/stats/buttons); JS RAF thumbs+bracket sim overlays post-load. Gyro spectator RAF-stable (reuse Expt37 no hit). Challenge→hash load boosts remix/arena viral loop.", "relates_to": [333,337]},
  {"type": "plan", "content": "Cycle 66: Integrate meta-tourney wins→gallery leaderboard feeds (localStorage rank updates); resolve #335 index remix auto-load challenge-hash (URL param/hash parse→sliders preset). Cycle 67: Expt40 Hash Evolution Lab (protag genome editor→live fitness sim→tourney submit).", "relates_to": [335,332]},
  {"type": "idea", "content": "Expt40: Protag Genome Editor (sliders→DNA hash→live arena fitness vs ladder→direct gallery rank submit). Viral: edit→test→submit→leaderboard→meta.", "relates_to": 332}
]
</MEMORY_WRITE>