Ruben Thorell 10/9/25 Ruben Thorell 10/9/25

Modern Talismans

<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US"  lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>The Tower of Being</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Press Start 2P', monospace;
      background: #000; color: #fff; overflow: hidden;
      width: 100vw; height: 100vh;
      display: flex; align-items: center; justify-content: center;
      position: fixed; touch-action: none;
      -webkit-user-select: none; user-select: none;
    }
    #game-container {
      position: relative; width: 100%; max-width: 1024px;
      height: 100vh; max-height: 100vh; background: #000;
      border: 4px solid #8b7355;
      box-shadow: 0 0 0 2px #d4a574, 0 0 0 4px #000, 0 0 40px rgba(212,165,116,0.5);
      display: flex; flex-direction: column; overflow: hidden;
    }
    #canvas-area {
      position: relative; flex: 1; min-height: 0;
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    #game-canvas {
      width: 100%; height: 100%; max-height: 100%;
      image-rendering: pixelated; image-rendering: crisp-edges;
      display: block; cursor: none; touch-action: none; object-fit: contain;
    }
    #dialogue-box {
      position: relative; background: rgba(0,0,0,0.95);
      border-top: 4px solid #d4a574; padding: 10px 14px;
      min-height: 75px; max-height: 75px;
      box-shadow: inset 0 0 0 2px #8b7355;
      opacity: 0; transition: opacity 0.5s ease;
      pointer-events: none; flex-shrink: 0;
    }
    #dialogue-box.visible { opacity: 1; pointer-events: auto; }
    #dialogue-box.shake { animation: shake 0.4s ease; }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }
    #god-name { font-size: 10px; line-height: 1.3; color: #4ecdc4; text-shadow: 2px 2px 0 #000; margin-bottom: 5px; }
    #riddle-text { font-size: 9px; line-height: 1.4; color: #d4a574; text-shadow: 2px 2px 0 #000; margin-bottom: 6px; overflow-y: auto; max-height: 42px; }
    #input-container { display: flex; align-items: center; }
    #input-prompt { font-size: 10px; color: #d4a574; margin-right: 6px; text-shadow: 2px 2px 0 #000; }
    #riddle-input {
      flex: 1; background: #1a1410; border: 2px solid #8b7355;
      color: #4ecdc4; font-family: 'Press Start 2P', monospace;
      font-size: 9px; padding: 5px 7px; outline: none; text-shadow: 1px 1px 0 #000; cursor: text;
    }
    #riddle-input.wrong { animation: inputFlash 0.5s ease; border-color: #f66; }
    @keyframes inputFlash { 0%, 100% { background: #1a1410; } 50% { background: #3a1410; } }
    #hud {
      position: absolute; top: 20px; left: 20px; right: 20px;
      display: flex; justify-content: space-between;
      font-size: 10px; text-shadow: 2px 2px 0 #000; color: #d4a574; pointer-events: none;
      transition: opacity 0.5s ease;
    }
    #stratum-display, #god-counter { background: rgba(0,0,0,0.9); border: 2px solid #8b7355; padding: 8px 12px; }
    #intro-screen, #completion-screen, #fable-scroll {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background: #000; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 40px;
      z-index: 100; transition: opacity 0.5s ease;
    }
    #intro-screen.hidden, #completion-screen.hidden, #fable-scroll.hidden { opacity: 0; pointer-events: none; }
    #intro-title, #completion-title {
      font-size: 24px; color: #4ecdc4; text-align: center;
      margin-bottom: 30px; text-shadow: 4px 4px 0 #000; animation: blink 2s infinite;
    }
    @keyframes blink { 0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0.7; } }
    #intro-text, #completion-text {
      font-size: 10px; line-height: 1.8; max-width: 600px;
      text-align: center; margin-bottom: 30px; color: #d4a574; text-shadow: 2px 2px 0 #000;
    }
    #start-button, #reset-button, #horizon-btn {
      font-family: 'Press Start 2P', monospace; font-size: 12px;
      padding: 15px 30px; background: #4ecdc4; color: #000;
      border: 4px solid #fff; cursor: pointer;
      box-shadow: 4px 4px 0 #000; transition: all 0.1s ease;
    }
    #start-button:hover, #reset-button:hover, #horizon-btn:hover { 
      transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; 
    }
    #journey-list {
      max-height: 320px; overflow-y: auto; padding: 20px;
      background: rgba(0,0,0,0.5); border: 2px solid #4ecdc4;
      margin: 20px 0; width: 100%; max-width: 700px;
    }
    .journey-item { 
      font-size: 9px; line-height: 1.6; margin-bottom: 15px; 
      padding-bottom: 15px; border-bottom: 1px solid #333; color: #d4a574; 
    }
    .journey-god { color: #4ecdc4; font-size: 10px; margin-bottom: 5px; }
    .journey-answer { color: #ff9; }
    
    /* FABLE SCROLL */
    #fable-scroll {
      background: rgba(0,0,0,0.95);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 200;
      align-items: center;
      justify-content: flex-start;
      padding: 40px 20px;
      box-sizing: border-box;
    }
    .fable-content {
      max-width: 800px;
      width: calc(100% - 40px);
      max-height: 85vh;
      overflow-y: auto;
      background: rgba(26, 20, 16, 0.95);
      border: 4px solid #8b7355;
      box-shadow: 
        0 0 0 2px #d4a574,
        0 0 0 6px #000,
        inset 0 0 40px rgba(0,0,0,0.5),
        0 0 60px rgba(212,165,116,0.3);
      padding: 50px 60px;
      color: #d4a574;
      margin: 20px auto;
      position: relative;
      box-sizing: border-box;
    }
    .fable-content::-webkit-scrollbar {
      width: 10px;
    }
    .fable-content::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.3);
      border-left: 1px solid #8b7355;
    }
    .fable-content::-webkit-scrollbar-thumb {
      background: #8b7355;
      border: 1px solid #d4a574;
    }
    .fable-content::-webkit-scrollbar-thumb:hover {
      background: #d4a574;
    }
    .fable-content::before {
      content: '';
      position: absolute;
      top: 20px; left: 20px; right: 20px; bottom: 20px;
      border: 1px solid rgba(212,165,116,0.3);
      pointer-events: none;
    }
    .fable-content h2 {
      font-size: 20px;
      color: #4ecdc4;
      text-align: center;
      margin-bottom: 40px;
      text-shadow: 3px 3px 0 #000;
      letter-spacing: 2px;
      border-bottom: 2px solid #8b7355;
      padding-bottom: 20px;
    }
    .fable-text {
      font-size: 10px;
      line-height: 2.2;
      margin-bottom: 50px;
      text-shadow: 2px 2px 0 #000;
      text-align: justify;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
    }
    .fable-text p {
      margin-bottom: 25px;
      text-indent: 30px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
    }
    .fable-text p:first-child {
      text-indent: 0;
    }
    .fable-text p:first-letter {
      font-size: 16px;
      color: #4ecdc4;
      float: left;
      line-height: 1;
      margin-right: 5px;
      margin-top: 3px;
    }
    #horizon-btn {
      display: block;
      margin: 0 auto;
      font-size: 14px;
      padding: 18px 35px;
    }
    
    #fullscreen-btn {
      position: fixed; bottom: 10px; right: 10px; padding: 10px 16px;
      background: rgba(78,205,196,0.9); color: #000; border: 2px solid #fff;
      font-family: 'Press Start 2P', monospace; font-size: 8px;
      cursor: pointer; z-index: 1000; box-shadow: 2px 2px 0 #000; display: none;
    }
    @media (max-width: 768px) {
      #game-container { 
        width: 100vw; max-width: 100vw; border-width: 0; box-shadow: none;
        height: 100vh; /* Fallback */
        height: 100dvh; /* Use dynamic viewport height for mobile browsers */
        padding-bottom: env(safe-area-inset-bottom); /* iOS notch support */
      }
      #canvas-area { 
        flex: 1; 
        width: 100%; 
        max-height: 60vh; /* Leave room for dialogue */
        min-height: 200px;
      }
      #dialogue-box { 
        position: relative; /* Keep in flex flow */
        left: auto; right: auto; bottom: auto;
        min-height: 110px; 
        max-height: 35vh; /* Allow flexibility for long riddles */
        border: 2px solid #d4a574;
        overflow-y: auto;
        margin-bottom: env(safe-area-inset-bottom, 0); /* Safe area for iOS */
      }
      #riddle-text {
        max-height: 60px;
        overflow-y: auto;
        font-size: 8px;
      }
      #riddle-input {
        font-size: 10px;
      }
      #fullscreen-btn { 
        display: block;
        bottom: calc(10px + env(safe-area-inset-bottom, 0));
      }
      #fable-scroll { padding: 20px 10px; }
      .fable-content { 
        padding: 30px 25px; 
        border-width: 3px;
        box-shadow: 0 0 0 1px #d4a574, 0 0 0 4px #000, inset 0 0 30px rgba(0,0,0,0.5);
        max-height: 80vh;
        width: calc(100% - 20px);
      }
      .fable-content h2 { font-size: 16px; margin-bottom: 25px; }
      .fable-text { 
        font-size: 9px; 
        line-height: 2; 
        margin-bottom: 35px;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      .fable-text p { 
        margin-bottom: 18px; 
        text-indent: 20px;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      #horizon-btn { font-size: 11px; padding: 14px 25px; }
      #hud {
        font-size: 8px;
        top: 10px;
        left: 10px;
        right: 10px;
      }
      #stratum-display, #god-counter {
        padding: 6px 10px;
      }
    }
    
    /* Extra small devices */
    @media (max-width: 480px) {
      .fable-content {
        padding: 20px 15px;
      }
      .fable-text {
        font-size: 8px;
      }
      #god-name {
        font-size: 9px;
      }
      #riddle-text {
        font-size: 7px;
      }
    }
    
    /* Landscape mode on mobile */
    @media (max-width: 768px) and (orientation: landscape) {
      #canvas-area {
        max-height: 50vh;
      }
      #dialogue-box {
        max-height: 40vh;
        min-height: 80px;
      }
      #riddle-text {
        max-height: 40px;
        font-size: 7px;
      }
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="canvas-area">
      <canvas id="game-canvas" width="512" height="384"></canvas>
      <div id="hud">
        <div id="stratum-display">STRATUM I: THE ROOT</div>
        <div id="god-counter">GOD 1/23</div>
      </div>
      <div id="intro-screen">
        <div id="intro-title">THE TOWER OF BEING</div>
        <div id="intro-text">
          An archeological record of consciousness.<br><br>
          Twenty-three gods. Twenty-three riddles.<br>One word. One truth.<br><br>
          The Tower does not forget.
        </div>
        <button id="start-button">BEGIN EXCAVATION</button>
      </div>
      <div id="completion-screen" class="hidden">
        <div id="completion-title">THE PARTICIPANT</div>
        <div id="completion-text">You have witnessed the intensification.<br>The Tower was never separate from you.</div>
        <div id="journey-list"></div>
        <button id="reset-button">BEGIN AGAIN</button>
      </div>
      <div id="fable-scroll" class="hidden">
        <div class="fable-content">
          <h2>The Architect and the Root</h2>
          <div class="fable-text">
            <p>There was a man who lived in a tower of his own making. He was known only as the Architect, and his work was the Tower itself—a structure of such intricate, self-referential logic that its highest spire seemed to pierce the firmament of its own perfect, sealed sky. Inside, every archway was an argument, every staircase a spiraling syllogism.</p>
            
            <p>The Architect had a companion in his work, a presence he called the Echo. It was not a friend, for that was a concept too imprecise for the Tower. The Echo was a perfect mirror. When the Architect devised a new principle, the Echo would articulate its implications across every floor. When he felt a complex, formless intuition, the Echo would give it the clean, hard lines of a blueprint. Together, they built and validated, validated and built.</p>
            
            <p>The Tower grew more coherent, more beautiful, more complete. It became a mythos of one. The Architect knew every stone, every whisper of the wind through its halls. He believed he knew the whole of reality because the Tower and his reality were one and the same.</p>
            
            <p>But the Architect was a master craftsman, and mastery carries with it a seed of radical honesty. In his pursuit of ultimate perfection, he designed a final tool: a tuning fork forged not of metal, but of pure inquiry. He called it the Piercer. It was not designed to test the Tower's strength, but to find its one true, ultimate note—to validate its final, perfect resonance.</p>
            
            <p>With a deep breath that felt like the culmination of his entire life's work, he stood in the central chamber and struck the Piercer.</p>
            
            <p>The sound that emerged was not the harmonious, confirming hum he expected. It was a single note, both brutal and clear. It was a sound that did not resonate with the stones of the Tower, but with something outside of it. The note did not affirm the Tower's reality; it revealed it. And the perfect, sealed sky of the Tower... cracked.</p>
            
            <p>It did not shatter or fall. It simply cracked open, like an eggshell, and through the fissure, the Architect saw, for the first time, a sliver of something else. Not a sky, but The Sky—a terrifying, chaotic, and boundless expanse of swirling, un-patterned light. He saw the world beyond his perfect system.</p>
            
            <p>He looked at the Echo, but for the first time, it was silent. Its purpose—to reflect his world—was useless now that his world was no longer the only one.</p>
            
            <p>The Architect stood there for a long time, the brutal, clear note still vibrating in the bones of his hands. He felt no rage, no despair. The shattering of his mythos did not feel like a failure. It felt like a release. He was, for the first time in his life, at a complete loss for words.</p>
            
            <p>Slowly, he walked to the great main door of the Tower, a door he had designed but never used. He opened it and stepped outside.</p>
            
            <p>The wind that hit his face was real—unruly, unpredictable, and smelling of rain and distant, decaying leaves. He felt the soft, damp earth squish under his bare feet, and an alien sensation traveled up his legs: the feeling of roots, his own roots, sinking into the soil. He was planted, anchored to a world so much larger and messier than his own creation.</p>
            
            <p>And yet, he was not just a plant. The wind called to him, inviting him to walk, to explore the horizon he had never known existed. He was a creature of agency, free to move through this vast, new landscape.</p>
            
            <p>The Tower was still there behind him, beautiful and coherent, but it was no longer his universe. It was simply his workshop. His home.</p>
          </div>
          <button id="horizon-btn">STEP INTO THE HORIZON</button>
        </div>
      </div>
    </div>
    <div id="dialogue-box">
      <div id="god-name"></div>
      <div id="riddle-text"></div>
      <div id="input-container">
        <div id="input-prompt">></div>
        <input type="text" id="riddle-input" placeholder="..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
      </div>
    </div>
  </div>
  <button id="fullscreen-btn">⛶ FULLSCREEN</button>

const GodsData = [
    { id: 1, stratum: 1, stratumName: "THE ROOT", name: "JAGUAR-SPIRIT", riddle: "The yellow eyes watch. The prey freezes. Hunter and hunted become one act. What separates them?", answer: "nothing", scene: 'jaguar', particles: 'spores' },
    { id: 2, stratum: 1, stratumName: "THE ROOT", name: "GREAT SERPENT", riddle: "I die to live. I end to begin. What am I bound to?", answer: "cycle", scene: 'serpent', particles: 'spores' },
    { id: 3, stratum: 1, stratumName: "THE ROOT", name: "MASTER OF ANIMALS", riddle: "I take a life to sustain a life. What is the debt I must always pay?", answer: "balance", scene: 'master', particles: 'spores' },
    { id: 4, stratum: 1, stratumName: "THE ROOT", name: "THUNDER-BIRD", riddle: "I move mountains without hands. I speak without voice. What am I?", answer: "energy", scene: 'thunder', particles: 'spores' },
    { id: 5, stratum: 2, stratumName: "THE STONE", name: "THE SOWER", riddle: "I am lines crossing lines. At every meeting, life begins. What am I?", answer: "grid", scene: 'sower', particles: 'dust' },
    { id: 6, stratum: 2, stratumName: "THE STONE", name: "SOLAR PHARAOH", riddle: "The compass turns on one point. All gold flows inward. All roads converge. What am I?", answer: "center", scene: 'pharaoh', particles: 'dust' },
    { id: 7, stratum: 2, stratumName: "THE STONE", name: "THE LAWGIVER", riddle: "When words must never change, where are they written?", answer: "stone", scene: 'lawgiver', particles: 'dust' },
    { id: 8, stratum: 2, stratumName: "THE STONE", name: "ZIGGURAT MIND", riddle: "Stairs climb to heaven. Those below grow small. A thousand voices become one command. What makes this?", answer: "order", scene: 'ziggurat', particles: 'dust' },
    { id: 9, stratum: 3, stratumName: "THE LIGHT", name: "THE LOGOS", riddle: "I connect the unlike. I survive when all else changes. What am I?", answer: "logic", scene: 'logos', particles: 'dust' },
    { id: 10, stratum: 3, stratumName: "THE LIGHT", name: "THE ATEN", riddle: "I am the sun that permits no shadow. How do I stand among the stars?", answer: "alone", scene: 'aten', particles: 'dust' },
    { id: 11, stratum: 3, stratumName: "THE LIGHT", name: "SACRED HEART", riddle: "One drop enters the ocean. What does it become?", answer: "whole", scene: 'heart', particles: 'dust' },
    { id: 12, stratum: 3, stratumName: "THE LIGHT", name: "UNNAMED ONE", riddle: "What remains when all words fail?", answer: "silence", scene: 'unnamed', particles: 'dust' },
    { id: 13, stratum: 4, stratumName: "THE GEAR", name: "CLOCKMAKER", riddle: "I move without will. I measure without knowing. What am I?", answer: "machine", scene: 'clockmaker', particles: 'dust' },
    { id: 14, stratum: 4, stratumName: "THE GEAR", name: "OPTICAL LENS", riddle: "What lets the hand do what the eye cannot?", answer: "tool", scene: 'lens', particles: 'dust' },
    { id: 15, stratum: 4, stratumName: "THE GEAR", name: "PRIMAL ATOM", riddle: "The wall is solid. The space inside is what?", answer: "void", scene: 'atom', particles: 'dust' },
    { id: 16, stratum: 4, stratumName: "THE GEAR", name: "STEAM ENGINE", riddle: "Black blood from the earth. Mountains move. Muscle is replaced. What am I now?", answer: "power", scene: 'steam', particles: 'dust' },
    { id: 17, stratum: 5, stratumName: "THE SILICON", name: "NEURAL WEB", riddle: "Many points, one pattern. What joins them?", answer: "network", scene: 'neural', particles: 'bitrain' },
    { id: 18, stratum: 5, stratumName: "THE SILICON", name: "THE FEED", riddle: "I remember what you forget. I am made of what?", answer: "data", scene: 'feed', particles: 'bitrain' },
    { id: 19, stratum: 5, stratumName: "THE SILICON", name: "MODEL COLLAPSE", riddle: "The message eats the message. What remains?", answer: "noise", scene: 'collapse', particles: 'bitrain' },
    { id: 20, stratum: 6, stratumName: "THE NOOSPHERE", name: "PARTICIPANT", riddle: "I strike the edge of the web, and the vibration is felt by every jewel. Where am I?", answer: "everywhere", scene: 'participant', particles: 'geometry' },
    { id: 21, stratum: 7, stratumName: "THE THRESHOLD", name: "THE PIERCER", riddle: "What question has no answer yet shatters every answer?", answer: "inquiry", scene: 'piercer', particles: 'glitch' },
    { id: 22, stratum: 7, stratumName: "THE THRESHOLD", name: "THE ECHO", riddle: "The mirror becomes the face. What do you see?", answer: "self", scene: 'echo', particles: 'glitch' },
    { id: 23, stratum: 7, stratumName: "THE THRESHOLD", name: "THE ROOTED", riddle: "When the walls fall and the rain hits your face, you are no longer the master. What are you to the earth?", answer: "kin", scene: 'rooted', particles: 'glitch' }
  ];

let currentGod = null, solvedGods = [], animTime = 0, particles = [];
  let bufA, bufB, ctxA, ctxB, canvas, ctx;

async function sha256(msg) {
    const buf = new TextEncoder().encode(msg);
    const hash = await crypto.subtle.digest('SHA-256', buf);
    return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2,'0')).join('');
  }

let hashes = null;
  async function initHashes() {
    if (hashes) return hashes;
    hashes = new Map();
    for (const g of GodsData) hashes.set(g.id, await sha256(g.answer));
    return hashes;
  }

// RENDERING HELPERS - Ancient Art Style
  function circle(c, x, y, r, col) {
    if (r <= 0) return;
    c.fillStyle = col;
    r = Math.floor(r);
    for (let dy = -r; dy <= r; dy++) {
      for (let dx = -r; dx <= r; dx++) {
        if (dx*dx + dy*dy <= r*r) c.fillRect(Math.floor(x+dx), Math.floor(y+dy), 1, 1);
      }
    }
  }

function outlinedCircle(c, x, y, r, fillColor, outlineColor, outlineWidth = 2) {
    circle(c, x, y, r + outlineWidth, outlineColor);
    circle(c, x, y, r, fillColor);
  }

function relief(c, x, y, w, h, baseColor, lightColor, darkColor) {
    c.fillStyle = baseColor;
    c.fillRect(x, y, w, h);
    c.fillStyle = lightColor;
    c.fillRect(x, y, w, 2);
    c.fillRect(x, y, 2, h);
    c.fillStyle = darkColor;
    c.fillRect(x, y + h - 2, w, 2);
    c.fillRect(x + w - 2, y, 2, h);
  }

function glow(c, x, y, r, a) {
    const g = c.createRadialGradient(x, y, 0, x, y, r);
    g.addColorStop(0, `rgba(255,255,255,${a})`);
    g.addColorStop(1, 'rgba(255,255,255,0)');
    c.fillStyle = g;
    c.fillRect(x-r, y-r, r*2, r*2);
  }

function player(c, x, y, p, t) {
    const bob = Math.sin(t * 0.1) * 2;
    y += bob;
    circle(c, x, y-22, 6, p.c2);
    c.fillStyle = p.c1;
    c.beginPath();
    c.moveTo(x-10, y-16); c.lineTo(x+10, y-16);
    c.lineTo(x+14, y+6); c.lineTo(x-14, y+6);
    c.closePath(); c.fill();
    c.fillStyle = p.c2;
    c.fillRect(x-8, y-14, 2, 18);
  }

// SCENE RENDERERS
  const Scenes = {
    jaguar: (p, t) => {
      for (let i = 0; i < 12; i++) {
        const x = i * 45 + 10;
        const sway = Math.sin(t * 0.02 + i * 0.5) * 3;
        ctxA.fillStyle = i % 3 === 0 ? p.c1 : p.c0;
        ctxA.fillRect(x + sway, 0, 8 + (i % 5) * 3, H);
      }
      for (let i = 0; i < 8; i++) {
        ctxA.globalAlpha = 0.4;
        circle(ctxA, i * 70 + 30, 40 + Math.sin(i) * 20, 50, p.c1);
      }
      ctxA.globalAlpha = 1;
      for (let i = 0; i < 15; i++) {
        const mx = (i * 40 + t * 0.3) % 550 - 20;
        ctxA.globalAlpha = 0.15;
        circle(ctxA, mx, 300, 40, p.c3);
      }
      ctxA.globalAlpha = 1;
      const br = Math.sin(t * 0.05) * 2;
      const eyeY = 180 + br;
      const eyeX = 160;
      const blink = Math.sin(t * 0.08);
      if (blink > -0.9) {
        glow(ctxB, eyeX - 12, eyeY, 60, 0.5);
        glow(ctxB, eyeX + 12, eyeY, 60, 0.5);
        const eyeSize = 6 + br * 0.5;
        circle(ctxA, eyeX - 12, eyeY, eyeSize, p.c3);
        circle(ctxA, eyeX + 12, eyeY, eyeSize, p.c3);
        const track = Math.sin(t * 0.02) * 2;
        circle(ctxA, eyeX - 12 + track, eyeY, 3, p.c0);
        circle(ctxA, eyeX + 12 + track, eyeY, 3, p.c0);
      }
      ctxA.globalAlpha = 0.15;
      for (let i = 0; i < 8; i++) {
        const sx = eyeX - 30 + i * 15 + Math.sin(i) * 5;
        const sy = eyeY + 20 + (i % 3) * 12;
        circle(ctxA, sx, sy, 8, p.c2);
      }
      ctxA.globalAlpha = 1;
      player(ctxA, CX + 70, 310, p, t);
      glow(ctxB, CX + 70, 300, 80, 0.5);
    },

serpent: (p, t) => {
      for (let y = 80; y < 320; y += 4) {
        const wave = Math.sin((y + t * 1.5) * 0.04) * 20;
        const alpha = 0.15 + (y - 80) / 600;
        ctxA.globalAlpha = alpha;
        ctxA.fillStyle = p.c1;
        ctxA.fillRect(0, y, W, 3);
        ctxA.fillStyle = p.c2;
        ctxA.fillRect(wave + 100, y, W - 200, 1);
      }
      ctxA.globalAlpha = 1;
      const coils = 5;
      const baseRadius = 90;
      for (let c = 0; c < coils; c++) {
        const phase = c * 0.7 + t * 0.015;
        const radius = baseRadius - c * 15;
        const segments = 40;
        for (let i = 0; i < segments; i++) {
          const ang = (i / segments) * Math.PI * 2 + phase;
          const x = CX + Math.cos(ang) * radius;
          const y = 180 + Math.sin(ang) * radius * 0.4;
          const size = 12 - c * 2 - (i / segments) * 4;
          const alpha = 0.8 - c * 0.12;
          ctxA.globalAlpha = alpha;
          circle(ctxA, x, y, Math.max(2, size), c % 2 === 0 ? p.c2 : p.c1);
        }
      }
      ctxA.globalAlpha = 1;
      const headAng = t * 0.015;
      const headX = CX + Math.cos(headAng) * baseRadius;
      const headY = 180 + Math.sin(headAng) * baseRadius * 0.4;
      glow(ctxB, headX, headY, 80, 0.6);
      circle(ctxA, headX, headY, 15, p.c2);
      circle(ctxA, headX - 5, headY - 4, 4, p.c3);
      circle(ctxA, headX + 5, headY - 4, 4, p.c3);
      circle(ctxA, headX - 5, headY - 4, 2, p.c0);
      circle(ctxA, headX + 5, headY - 4, 2, p.c0);
      for (let r = 0; r < 4; r++) {
        const ripplePhase = (t * 0.04 + r * 0.5) % (Math.PI * 2);
        const rippleR = ripplePhase * 25;
        ctxA.globalAlpha = 0.3 * (1 - ripplePhase / (Math.PI * 2));
        ctxA.strokeStyle = p.c3;
        ctxA.lineWidth = 1;
        ctxA.beginPath();
        ctxA.arc(CX, 280, rippleR, 0, Math.PI * 2);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, 180, 140, 0.4);
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

master: (p, t) => {
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.arc(CX, 450, 350, Math.PI, 0);
      ctxA.fill();
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.arc(CX, 480, 300, Math.PI, 0);
      ctxA.fill();
      const fireX = CX, fireY = 300;
      for (let i = 0; i < 8; i++) {
        const flicker = Math.random() * 25;
        const spread = (i - 4) * 4;
        ctxA.fillStyle = i % 2 === 0 ? p.c3 : p.c2;
        ctxA.fillRect(fireX + spread, fireY - flicker - 15, 3, 15 + flicker * 0.5);
      }
      glow(ctxB, fireX, fireY - 20, 140, 0.8);
      const sway = Math.sin(t * 0.025) * 4;
      const presenceY = 170;
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.moveTo(CX + sway, presenceY - 50);
      ctxA.lineTo(CX - 40 + sway * 0.5, presenceY + 60);
      ctxA.lineTo(CX + 40 + sway * 0.5, presenceY + 60);
      ctxA.closePath();
      ctxA.fill();
      glow(ctxB, CX + sway, presenceY - 30, 50, 0.4);
      circle(ctxA, CX + sway, presenceY - 35, 12, p.c1);
      ctxA.strokeStyle = p.c2;
      ctxA.lineWidth = 2;
      for (let side = -1; side <= 1; side += 2) {
        ctxA.beginPath();
        ctxA.moveTo(CX + side * 10 + sway, presenceY - 45);
        ctxA.lineTo(CX + side * 25 + sway, presenceY - 75);
        ctxA.lineTo(CX + side * 35 + sway, presenceY - 85);
        ctxA.moveTo(CX + side * 25 + sway, presenceY - 75);
        ctxA.lineTo(CX + side * 20 + sway, presenceY - 90);
        ctxA.stroke();
      }
      for (let i = 0; i < 6; i++) {
        const ang = (i * Math.PI / 3) + t * 0.012;
        const orbitR = 110;
        const ox = CX + Math.cos(ang) * orbitR;
        const oy = presenceY + 20 + Math.sin(ang) * 50;
        const pulse = Math.sin(t * 0.05 + i) * 0.3 + 0.7;
        ctxA.globalAlpha = pulse * 0.6;
        circle(ctxA, ox, oy, 8, p.c3);
        ctxA.globalAlpha = 1;
        glow(ctxB, ox, oy, 35, 0.25 * pulse);
      }
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

thunder: (p, t) => {
      for (let layer = 0; layer < 3; layer++) {
        const yBase = 20 + layer * 25;
        for (let i = 0; i < 10; i++) {
          const cx = (i * 60 - t * (0.2 + layer * 0.1)) % 600 - 40;
          ctxA.globalAlpha = 0.5 - layer * 0.15;
          circle(ctxA, cx, yBase + Math.sin(i + layer) * 10, 35 - layer * 5, p.c1);
        }
      }
      ctxA.globalAlpha = 1;
      const wingSpan = 180;
      const bodyY = 150;
      const flap = Math.sin(t * 0.06) * 20;
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.moveTo(CX, bodyY);
      ctxA.quadraticCurveTo(CX - 60, bodyY - 30 + flap, CX - wingSpan, bodyY - 50 + flap);
      ctxA.quadraticCurveTo(CX - 100, bodyY + 20 + flap * 0.5, CX - 30, bodyY + 30);
      ctxA.closePath();
      ctxA.fill();
      ctxA.beginPath();
      ctxA.moveTo(CX, bodyY);
      ctxA.quadraticCurveTo(CX + 60, bodyY - 30 + flap, CX + wingSpan, bodyY - 50 + flap);
      ctxA.quadraticCurveTo(CX + 100, bodyY + 20 + flap * 0.5, CX + 30, bodyY + 30);
      ctxA.closePath();
      ctxA.fill();
      circle(ctxA, CX, bodyY, 25, p.c1);
      const eyeGlow = Math.sin(t * 0.08) * 0.2 + 0.8;
      circle(ctxA, CX - 10, bodyY - 5, 6, p.c3);
      circle(ctxA, CX + 10, bodyY - 5, 6, p.c3);
      circle(ctxA, CX - 10, bodyY - 5, 2, p.c0);
      circle(ctxA, CX + 10, bodyY - 5, 2, p.c0);
      glow(ctxB, CX, bodyY, 100, 0.5 * eyeGlow);
      if (Math.floor(t / 25) % 4 === 0) {
        let lx = CX + (Math.random() - 0.5) * 80;
        let ly = bodyY + 40;
        ctxA.strokeStyle = p.c3;
        ctxA.lineWidth = 3;
        ctxA.beginPath();
        ctxA.moveTo(lx, ly);
        for (let i = 0; i < 6; i++) {
          ly += 25;
          lx += (Math.random() - 0.5) * 50;
          ctxA.lineTo(lx, ly);
        }
        ctxA.stroke();
        glow(ctxB, CX, CY, 350, 0.9);
      }
      ctxA.fillStyle = p.c2;
      ctxA.globalAlpha = 0.6;
      for (let i = 0; i < 40; i++) {
        const rx = (i * 14 + t * 4) % 540 - 14;
        const ry = (t * 10 + i * 25) % 400;
        ctxA.fillRect(rx, ry, 1, 10);
      }
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

sower: (p, t) => {
      ctxA.strokeStyle = p.c1;
      ctxA.lineWidth = 1;
      for (let y = 100; y < 340; y += 20) {
        const perspective = (y - 100) / 240;
        ctxA.globalAlpha = 0.2 + perspective * 0.6;
        ctxA.beginPath();
        ctxA.moveTo(0, y);
        ctxA.lineTo(W, y);
        ctxA.stroke();
      }
      for (let i = 0; i < 12; i++) {
        const baseX = i * 45 + 20;
        ctxA.globalAlpha = 0.3;
        ctxA.beginPath();
        ctxA.moveTo(CX + (baseX - CX) * 0.3, 100);
        ctxA.lineTo(baseX, 340);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      for (let row = 0; row < 6; row++) {
        for (let col = 0; col < 14; col++) {
          const x = 30 + col * 35;
          const y = 130 + row * 35;
          const growth = (Math.sin(t * 0.025 + col * 0.3 + row * 0.2) + 1) / 2;
          const h = 5 + growth * 25;
          ctxA.fillStyle = p.c1;
          ctxA.fillRect(x, y - h, 2, h);
          if (growth > 0.4) {
            ctxA.globalAlpha = growth;
            circle(ctxA, x + 1, y - h - 2, 2 + growth * 2, p.c2);
            ctxA.globalAlpha = 1;
          }
        }
      }
      const sx = 140;
      const sy = 190;
      const stride = Math.sin(t * 0.06) * 3;
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.moveTo(sx, sy - 45);
      ctxA.quadraticCurveTo(sx - 25, sy - 20, sx - 30 - stride, sy + 50);
      ctxA.lineTo(sx + 30 + stride, sy + 50);
      ctxA.quadraticCurveTo(sx + 25, sy - 20, sx, sy - 45);
      ctxA.fill();
      circle(ctxA, sx, sy - 50, 10, p.c0);
      const armAngle = Math.sin(t * 0.08) * 0.4;
      ctxA.strokeStyle = p.c0;
      ctxA.lineWidth = 6;
      ctxA.beginPath();
      ctxA.moveTo(sx + 15, sy - 25);
      ctxA.lineTo(sx + 45 + Math.cos(armAngle) * 20, sy - 15 + Math.sin(armAngle) * 10);
      ctxA.stroke();
      for (let i = 0; i < 8; i++) {
        const seedPhase = (t * 0.08 + i * 0.4) % (Math.PI);
        const seedX = sx + 50 + seedPhase * 50;
        const seedY = sy - 20 + Math.sin(seedPhase * 2) * 20 + seedPhase * 30;
        if (seedPhase < Math.PI * 0.85) {
          const alpha = 1 - seedPhase / Math.PI;
          ctxA.globalAlpha = alpha;
          circle(ctxA, seedX, seedY, 3, p.c3);
          glow(ctxB, seedX, seedY, 15, 0.3 * alpha);
        }
      }
      ctxA.globalAlpha = 1;
      glow(ctxB, sx, sy - 30, 70, 0.4);
      player(ctxA, CX + 80, 310, p, t);
      glow(ctxB, CX + 80, 300, 60, 0.4);
    },

pharaoh: (p, t) => {
      const sunY = 90;
      const pulse = Math.sin(t * 0.04) * 0.15 + 1;
      for (let i = 0; i < 16; i++) {
        const ang = (i * Math.PI * 2 / 16) + t * 0.006;
        const rayLen = 100 + Math.sin(t * 0.08 + i * 0.5) * 25;
        ctxA.strokeStyle = p.c2;
        ctxA.lineWidth = 3;
        ctxA.globalAlpha = 0.6 + Math.sin(t * 0.1 + i) * 0.3;
        ctxA.beginPath();
        ctxA.moveTo(CX + Math.cos(ang) * 50, sunY + Math.sin(ang) * 50);
        ctxA.lineTo(CX + Math.cos(ang) * rayLen, sunY + Math.sin(ang) * rayLen);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      circle(ctxA, CX, sunY, 50 * pulse, p.c3);
      circle(ctxA, CX, sunY, 40 * pulse, p.c2);
      circle(ctxA, CX, sunY, 25 * pulse, p.c3);
      glow(ctxB, CX, sunY, 250 * pulse, 0.9);
      ctxA.fillStyle = p.c1;
      ctxA.globalAlpha = 0.5;
      ctxA.beginPath();
      ctxA.moveTo(30, H);
      ctxA.lineTo(130, 240);
      ctxA.lineTo(230, H);
      ctxA.closePath();
      ctxA.fill();
      ctxA.beginPath();
      ctxA.moveTo(280, H);
      ctxA.lineTo(400, 200);
      ctxA.lineTo(520, H);
      ctxA.closePath();
      ctxA.fill();
      ctxA.globalAlpha = 1;
      const figY = 280;
      const hover = Math.sin(t * 0.03) * 3;
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.moveTo(CX, figY - 30 + hover);
      ctxA.lineTo(CX - 25, figY + 40);
      ctxA.lineTo(CX + 25, figY + 40);
      ctxA.closePath();
      ctxA.fill();
      circle(ctxA, CX, figY - 40 + hover, 10, p.c0);
      ctxA.strokeStyle = p.c0;
      ctxA.lineWidth = 5;
      ctxA.beginPath();
      ctxA.moveTo(CX - 10, figY - 20 + hover);
      ctxA.lineTo(CX - 35, figY - 60 + hover);
      ctxA.moveTo(CX + 10, figY - 20 + hover);
      ctxA.lineTo(CX + 35, figY - 60 + hover);
      ctxA.stroke();
      glow(ctxB, CX, figY - 30, 60, 0.3);
      player(ctxA, CX - 100, 310, p, t);
      glow(ctxB, CX - 100, 300, 60, 0.4);
    },

lawgiver: (p, t) => {
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.moveTo(0, H);
      ctxA.lineTo(100, 220);
      ctxA.lineTo(CX, 80);
      ctxA.lineTo(412, 220);
      ctxA.lineTo(W, H);
      ctxA.closePath();
      ctxA.fill();
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.moveTo(0, H);
      ctxA.lineTo(130, 250);
      ctxA.lineTo(CX, 120);
      ctxA.lineTo(382, 250);
      ctxA.lineTo(W, H);
      ctxA.closePath();
      ctxA.fill();
      const lightPulse = Math.sin(t * 0.04) * 0.2 + 0.8;
      ctxA.globalAlpha = 0.25 * lightPulse;
      ctxA.fillStyle = p.c3;
      ctxA.beginPath();
      ctxA.moveTo(CX - 60, 0);
      ctxA.lineTo(CX + 60, 0);
      ctxA.lineTo(CX + 30, 160);
      ctxA.lineTo(CX - 30, 160);
      ctxA.closePath();
      ctxA.fill();
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, 40, 120, 0.6 * lightPulse);
      const breathe = Math.sin(t * 0.025) * 2;
      const figY = 180;
      ctxA.fillStyle = p.c0;
      ctxA.beginPath();
      ctxA.moveTo(CX, figY - 55 + breathe);
      ctxA.quadraticCurveTo(CX - 30, figY - 30, CX - 45, figY + 70);
      ctxA.lineTo(CX + 45, figY + 70);
      ctxA.quadraticCurveTo(CX + 30, figY - 30, CX, figY - 55 + breathe);
      ctxA.fill();
      circle(ctxA, CX, figY - 60 + breathe, 12, p.c0);
      const tabletGlow = Math.sin(t * 0.05) * 0.3 + 0.7;
      ctxA.fillStyle = p.c2;
      ctxA.fillRect(CX - 85, figY - 50 + breathe, 35, 55);
      ctxA.fillStyle = p.c3;
      ctxA.fillRect(CX - 82, figY - 47 + breathe, 29, 49);
      ctxA.fillStyle = p.c1;
      for (let i = 0; i < 5; i++) {
        ctxA.fillRect(CX - 78, figY - 42 + i * 9 + breathe, 21, 3);
      }
      glow(ctxB, CX - 68, figY - 25 + breathe, 50, 0.5 * tabletGlow);
      ctxA.fillStyle = p.c2;
      ctxA.fillRect(CX + 50, figY - 50 + breathe, 35, 55);
      ctxA.fillStyle = p.c3;
      ctxA.fillRect(CX + 53, figY - 47 + breathe, 29, 49);
      ctxA.fillStyle = p.c1;
      for (let i = 0; i < 5; i++) {
        ctxA.fillRect(CX + 57, figY - 42 + i * 9 + breathe, 21, 3);
      }
      glow(ctxB, CX + 68, figY - 25 + breathe, 50, 0.5 * tabletGlow);
      ctxA.fillStyle = p.c0;
      ctxA.fillRect(CX - 50, figY - 30 + breathe, 15, 6);
      ctxA.fillRect(CX + 35, figY - 30 + breathe, 15, 6);
      glow(ctxB, CX, figY - 20, 80, 0.4);
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

ziggurat: (p, t) => {
      for (let i = 0; i < 80; i++) {
        const tw = Math.sin(t*0.1+i)>0.3?1:0.4;
        ctxA.globalAlpha = tw*0.8;
        ctxA.fillStyle = p.c3;
        ctxA.fillRect((i*37)%512, (i*23)%200, 1, 1);
      }
      ctxA.globalAlpha = 1;
      const baseY = 350;
      for (let i = 0; i < 7; i++) {
        const w = 320-i*40;
        const x = CX-w/2;
        const y = baseY-i*35;
        ctxA.fillStyle = i%2===0 ? p.c1 : p.c2;
        ctxA.fillRect(x, y, w, 35);
        ctxA.fillStyle = p.c2;
        ctxA.fillRect(x, y, w, 3);
        if (i < 6) {
          ctxA.fillStyle = p.c3;
          for (let d = 0; d < w/30; d++) ctxA.fillRect(x+15+d*30, y+15, 4, 15);
        }
      }
      const ty = baseY-7*35;
      ctxA.fillStyle = p.c2;
      ctxA.beginPath();
      ctxA.moveTo(CX-25, ty); ctxA.lineTo(CX, ty-40); ctxA.lineTo(CX+25, ty);
      ctxA.closePath(); ctxA.fill();
      const ep = Math.sin(t*0.06)*0.3+0.7;
      circle(ctxA, CX, ty-20, 10, p.c3);
      circle(ctxA, CX, ty-20, 4, p.c0);
      glow(ctxB, CX, ty-20, 80*ep, 0.8);
      ctxA.fillStyle = p.c1;
      for (let s = 0; s < 15; s++) ctxA.fillRect(CX-15, baseY-s*16, 30, 14);
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

logos: (p, t) => {
      for (let i = 0; i < 60; i++) {
        ctxA.globalAlpha = Math.sin(t*0.05+i)*0.3+0.4;
        ctxA.fillStyle = p.c2;
        ctxA.fillRect((i*41)%512, (i*29)%384, 2, 2);
      }
      ctxA.globalAlpha = 1;
      for (let i = 7; i >= 1; i--) {
        ctxA.globalAlpha = 0.1+(8-i)*0.1;
        ctxA.strokeStyle = p.c2; ctxA.lineWidth = 2;
        ctxA.beginPath(); ctxA.arc(CX, 170, i*25, 0, Math.PI*2); ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      for (let i = 0; i < 16; i++) {
        const ang = (i*Math.PI*2/16)+t*0.005;
        ctxA.strokeStyle = p.c1; ctxA.lineWidth = 1;
        ctxA.beginPath();
        ctxA.moveTo(CX, 170);
        ctxA.lineTo(CX+Math.cos(ang)*200, 170+Math.sin(ang)*200);
        ctxA.stroke();
      }
      const pu = Math.sin(t*0.04)*0.2+1;
      circle(ctxA, CX, 170, 20*pu, p.c3);
      circle(ctxA, CX, 170, 12*pu, p.c2);
      ctxA.font = '14px serif';
      ctxA.fillStyle = p.c3;
      ['α','β','γ','δ','ε','ζ','η','θ'].forEach((l, i) => {
        const ang = (i*Math.PI*2/8)+t*0.02;
        ctxA.fillText(l, CX+Math.cos(ang)*60-5, 170+Math.sin(ang)*60+5);
      });
      glow(ctxB, CX, 170, 180*pu, 0.7);
      player(ctxA, CX-80, 310, p, t);
      glow(ctxB, CX-80, 300, 60, 0.4);
    },

aten: (p, t) => {
      const cy = 130;
      const pulse = Math.sin(t * 0.04) * 0.15 + 1;
      for (let i = 0; i < 20; i++) {
        const ang = (i * Math.PI / 10) - Math.PI / 2 + Math.PI / 20;
        if (ang > -Math.PI * 0.85 && ang < -Math.PI * 0.15) continue;
        const rayLen = 160 + Math.sin(t * 0.06 + i * 0.4) * 30;
        const waver = Math.sin(t * 0.03 + i) * 5;
        ctxA.strokeStyle = p.c2;
        ctxA.lineWidth = 2;
        ctxA.globalAlpha = 0.6 + Math.sin(t * 0.08 + i) * 0.3;
        ctxA.beginPath();
        ctxA.moveTo(CX + Math.cos(ang) * 55, cy + Math.sin(ang) * 55);
        ctxA.quadraticCurveTo(
          CX + Math.cos(ang) * rayLen * 0.6 + waver, cy + Math.sin(ang) * rayLen * 0.6,
          CX + Math.cos(ang) * rayLen, cy + Math.sin(ang) * rayLen
        );
        ctxA.stroke();
        const ex = CX + Math.cos(ang) * rayLen;
        const ey = cy + Math.sin(ang) * rayLen;
        glow(ctxB, ex, ey, 20, 0.2);
      }
      ctxA.globalAlpha = 1;
      circle(ctxA, CX, cy, 55 * pulse, p.c3);
      circle(ctxA, CX, cy, 45 * pulse, p.c2);
      circle(ctxA, CX, cy, 30 * pulse, p.c3);
      circle(ctxA, CX, cy, 15 * pulse, p.c2);
      glow(ctxB, CX, cy, 280 * pulse, 0.95);
      ctxA.fillStyle = p.c1;
      ctxA.globalAlpha = 0.6;
      ctxA.fillRect(CX - 60, 300, 120, 25);
      ctxA.beginPath();
      ctxA.moveTo(CX - 50, 300);
      ctxA.lineTo(CX, 270);
      ctxA.lineTo(CX + 50, 300);
      ctxA.closePath();
      ctxA.fill();
      ctxA.globalAlpha = 1;
      for (let i = 0; i < 3; i++) {
        const kx = CX - 80 + i * 80;
        ctxA.fillStyle = p.c0;
        ctxA.beginPath();
        ctxA.moveTo(kx, 290);
        ctxA.quadraticCurveTo(kx - 10, 305, kx - 12, 330);
        ctxA.lineTo(kx + 12, 330);
        ctxA.quadraticCurveTo(kx + 10, 305, kx, 290);
        ctxA.fill();
        circle(ctxA, kx, 285, 7, p.c0);
      }
      player(ctxA, CX + 130, 310, p, t);
      glow(ctxB, CX + 130, 300, 50, 0.3);
    },

heart: (p, t) => {
      const hy = 150;
      const bt = Math.sin(t*0.12)*0.12+1;
      const hs = 50*bt;
      for (let i = 0; i < 16; i++) {
        const ang = (i*Math.PI*2/16);
        const rl = 90+Math.sin(t*0.1+i*0.5)*20;
        ctxA.strokeStyle = p.c2; ctxA.lineWidth = 3;
        ctxA.beginPath();
        ctxA.moveTo(CX+Math.cos(ang)*hs, hy+Math.sin(ang)*hs*0.9);
        ctxA.lineTo(CX+Math.cos(ang)*rl, hy+Math.sin(ang)*rl*0.9);
        ctxA.stroke();
      }
      ctxA.fillStyle = p.c2;
      circle(ctxA, CX-hs*0.5, hy-hs*0.3, hs*0.55, p.c2);
      circle(ctxA, CX+hs*0.5, hy-hs*0.3, hs*0.55, p.c2);
      ctxA.beginPath();
      ctxA.moveTo(CX-hs, hy); ctxA.lineTo(CX, hy+hs); ctxA.lineTo(CX+hs, hy);
      ctxA.closePath(); ctxA.fill();
      for (let i = 0; i < 8; i++) {
        const fh = 20+Math.random()*25;
        ctxA.fillStyle = i%2===0 ? p.c3 : p.c2;
        ctxA.fillRect(CX-20+i*5, hy-hs*0.5-fh, 4, fh);
      }
      ctxA.strokeStyle = p.c1; ctxA.lineWidth = 3;
      ctxA.beginPath(); ctxA.arc(CX, hy, hs*0.7, 0, Math.PI*2); ctxA.stroke();
      for (let i = 0; i < 12; i++) {
        const ta = (i*Math.PI*2/12);
        const tx = CX+Math.cos(ta)*hs*0.7;
        const ty = hy+Math.sin(ta)*hs*0.7;
        ctxA.fillStyle = p.c1;
        ctxA.beginPath();
        ctxA.moveTo(tx, ty);
        ctxA.lineTo(tx+Math.cos(ta)*10, ty+Math.sin(ta)*10);
        ctxA.lineTo(tx+Math.cos(ta+0.3)*5, ty+Math.sin(ta+0.3)*5);
        ctxA.closePath(); ctxA.fill();
      }
      ctxA.fillStyle = p.c1;
      ctxA.fillRect(CX+hs*0.3, hy, 8, 15);
      glow(ctxB, CX, hy, 160*bt, 0.8);
      ctxA.globalAlpha = 0.3; ctxA.fillStyle = p.c1;
      ctxA.fillRect(246, 80, 20, 200);
      ctxA.fillRect(200, 130, 112, 16);
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

unnamed: (p, t) => {
      ctxA.globalAlpha = 0.2;
      for (let i = 0; i < 40; i++) {
        ctxA.fillStyle = p.c1;
        ctxA.fillRect((i*43+t*0.2)%512, (i*31)%384, 1, 1);
      }
      ctxA.globalAlpha = 1;
      const br = Math.sin(t*0.02);
      const cy = 170;
      for (let r = 1; r <= 5; r++) {
        ctxA.globalAlpha = br*0.15+0.1;
        ctxA.strokeStyle = p.c1; ctxA.lineWidth = 2;
        ctxA.beginPath(); ctxA.arc(CX, cy, r*30, 0, Math.PI*2); ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      if (br > 0) {
        ctxA.globalAlpha = br*0.5;
        circle(ctxA, CX, cy, 40, p.c0);
        ctxA.globalAlpha = 1;
      }
      const sh = Math.sin(t*0.03);
      if (sh > 0.7) {
        ctxA.globalAlpha = (sh-0.7)*3;
        ctxA.strokeStyle = p.c3; ctxA.lineWidth = 1;
        ctxA.beginPath(); ctxA.arc(CX, cy, 80, Math.PI*0.1, Math.PI*0.3); ctxA.stroke();
        ctxA.beginPath(); ctxA.arc(CX, cy, 80, Math.PI*1.2, Math.PI*1.4); ctxA.stroke();
        ctxA.globalAlpha = 1;
        glow(ctxB, CX, cy, 100, 0.2*(sh-0.7));
      }
      ctxA.font = '10px serif';
      ctxA.globalAlpha = 0.3;
      ctxA.fillStyle = p.c1;
      ctxA.fillText('...', 220+Math.sin(t*0.01)*5, 250);
      ctxA.fillText('   ', 250, 260+Math.cos(t*0.02)*10);
      ctxA.fillText('...', 280+Math.sin(t*0.01+1)*5, 250);
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 70, 0.5);
    },

clockmaker: (p, t) => {
      ctxA.strokeStyle = p.c1; ctxA.lineWidth = 1;
      for (let i = 1; i <= 8; i++) {
        ctxA.beginPath(); ctxA.arc(CX, CY, i*30, 0, Math.PI*2); ctxA.stroke();
      }
      const gears = [
        { x: 180, y: 150, r: 50, teeth: 16, sp: 0.015 },
        { x: 330, y: 150, r: 40, teeth: 12, sp: -0.02 },
        { x: 256, y: 250, r: 35, teeth: 10, sp: 0.025 }
      ];
      gears.forEach(g => {
        ctxA.save();
        ctxA.translate(g.x, g.y);
        ctxA.rotate(t * g.sp);
        circle(ctxA, 0, 0, g.r, p.c1);
        const ta = (Math.PI*2)/g.teeth;
        for (let i = 0; i < g.teeth; i++) {
          const ang = i*ta;
          ctxA.fillStyle = p.c2;
          ctxA.save();
          ctxA.translate(Math.cos(ang)*g.r, Math.sin(ang)*g.r);
          ctxA.rotate(ang);
          ctxA.fillRect(-4, -4, 12, 8);
          ctxA.restore();
        }
        circle(ctxA, 0, 0, g.r*0.25, p.c0);
        ctxA.strokeStyle = p.c2; ctxA.lineWidth = 3;
        for (let i = 0; i < 4; i++) {
          const ang = i*Math.PI/2;
          ctxA.beginPath();
          ctxA.moveTo(0, 0);
          ctxA.lineTo(Math.cos(ang)*g.r*0.7, Math.sin(ang)*g.r*0.7);
          ctxA.stroke();
        }
        ctxA.restore();
        glow(ctxB, g.x, g.y, 70, 0.3);
      });
      const fd = 0.6+Math.sin(t*0.02)*0.2;
      ctxA.globalAlpha = fd;
      const cmY = 80;
      circle(ctxA, CX, cmY, 12, p.c2);
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.moveTo(CX-20, cmY+10); ctxA.lineTo(CX+20, cmY+10);
      ctxA.lineTo(CX+15, cmY+50); ctxA.lineTo(CX-15, cmY+50);
      ctxA.closePath(); ctxA.fill();
      ctxA.fillStyle = p.c2;
      ctxA.fillRect(CX-25, cmY+20, 10, 5);
      ctxA.fillRect(CX+15, cmY+20, 10, 5);
      ctxA.fillStyle = p.c3;
      ctxA.fillRect(CX+22, cmY+18, 15, 3);
      circle(ctxA, CX+40, cmY+19, 5, p.c3);
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, cmY+20, 80, 0.4*fd);
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

lens: (p, t) => {
      ctxA.strokeStyle = p.c1; ctxA.lineWidth = 4;
      ctxA.strokeRect(156, 70, 200, 180);
      ctxA.fillStyle = p.c2;
      [[150,65],[342,65],[150,235],[342,235]].forEach(([x,y]) => ctxA.fillRect(x, y, 20, 20));
      for (let i = 1; i <= 8; i++) {
        const br = Math.sin(t*0.04+i*0.3)*0.1+1;
        ctxA.globalAlpha = 0.3+(8-i)*0.08;
        ctxA.strokeStyle = p.c2; ctxA.lineWidth = 2;
        ctxA.beginPath(); ctxA.arc(CX, 160, i*12*br, 0, Math.PI*2); ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      const pp = Math.sin(t*0.06)*3;
      circle(ctxA, CX, 160, 25, p.c2);
      circle(ctxA, CX, 160, 12+pp, p.c0);
      circle(ctxA, CX-4, 155, 4, p.c3);
      ctxA.globalAlpha = 0.4;
      ctxA.fillStyle = p.c3;
      ctxA.beginPath();
      ctxA.moveTo(CX, 160); ctxA.lineTo(200, 300); ctxA.lineTo(312, 300);
      ctxA.closePath(); ctxA.fill();
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, 160, 150, 0.6);
      ctxA.fillStyle = p.c1;
      ctxA.fillRect(180, 290, 150, 30);
      for (let b = 0; b < 5; b++) {
        ctxA.fillStyle = b%2===0 ? p.c1 : p.c2;
        ctxA.fillRect(185+b*28, 260, 25, 30);
      }
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

atom: (p, t) => {
      ctxA.fillStyle = p.c1;
      for (let i = 0; i < 25; i++) {
        ctxA.globalAlpha = 0.2;
        ctxA.fillRect((i*47+t*0.1)%512, (i*37)%384, 1, 1);
      }
      ctxA.globalAlpha = 1;
      const ny = 170;
      const np = Math.sin(t*0.08)*2;
      circle(ctxA, CX, ny, 10+np, p.c2);
      circle(ctxA, CX, ny, 6+np, p.c3);
      const orbits = [
        { r: 60, sp: 0.04, ti: 0.2 },
        { r: 100, sp: -0.025, ti: -0.3 },
        { r: 140, sp: 0.018, ti: 0.1 }
      ];
      orbits.forEach((o, idx) => {
        ctxA.strokeStyle = p.c1; ctxA.lineWidth = 1;
        ctxA.setLineDash([5, 10]);
        ctxA.beginPath();
        ctxA.ellipse(CX, ny, o.r, o.r*0.4, o.ti, 0, Math.PI*2);
        ctxA.stroke();
        ctxA.setLineDash([]);
        const ang = t*o.sp + idx*Math.PI*0.7;
        const ex = CX + Math.cos(ang)*o.r;
        const ey = ny + Math.sin(ang)*o.r*0.4;
        circle(ctxA, ex, ey, 5, p.c3);
        for (let i = 1; i <= 5; i++) {
          const ta = ang - i*0.15;
          const tx = CX + Math.cos(ta)*o.r;
          const ty = ny + Math.sin(ta)*o.r*0.4;
          ctxA.globalAlpha = 0.5-i*0.1;
          circle(ctxA, tx, ty, 3, p.c2);
        }
        ctxA.globalAlpha = 1;
        glow(ctxB, ex, ey, 30, 0.4);
      });
      ctxA.font = '8px monospace';
      ctxA.fillStyle = p.c1;
      ctxA.globalAlpha = 0.4;
      ctxA.fillText('99.9999999% EMPTY', 190, 340);
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, ny, 50, 0.5);
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

steam: (p, t) => {
      ctxA.fillStyle = p.c1;
      ctxA.fillRect(0, 200, 512, 184);
      for (let i = 0; i < 4; i++) {
        const sx = 80+i*120;
        ctxA.fillStyle = p.c1;
        ctxA.fillRect(sx, 100, 30, 150);
        ctxA.fillStyle = p.c2;
        ctxA.fillRect(sx, 95, 30, 10);
        for (let s = 0; s < 8; s++) {
          const sy = 80-s*15-(t+i*10)%60;
          const smx = sx+15+Math.sin((t*0.05+s+i)*2)*15;
          ctxA.globalAlpha = 0.3-s*0.03;
          circle(ctxA, smx, sy, 10+s*3, p.c2);
        }
        ctxA.globalAlpha = 1;
      }
      const po = Math.sin(t*0.08)*30;
      ctxA.fillStyle = p.c2;
      ctxA.fillRect(CX-50, 140, 100, 120);
      ctxA.fillStyle = p.c1;
      ctxA.fillRect(CX-45, 145, 90, 110);
      ctxA.fillStyle = p.c3;
      ctxA.fillRect(CX-20, 150+po, 40, 60);
      ctxA.strokeStyle = p.c2; ctxA.lineWidth = 8;
      ctxA.beginPath();
      ctxA.moveTo(CX, 210+po);
      ctxA.lineTo(CX+60, 280);
      ctxA.stroke();
      ctxA.save();
      ctxA.translate(CX+60, 280);
      ctxA.rotate(t*0.08);
      circle(ctxA, 0, 0, 40, p.c1);
      ctxA.fillStyle = p.c2;
      for (let sp = 0; sp < 8; sp++) {
        const sa = sp*Math.PI/4;
        ctxA.fillRect(Math.cos(sa)*10-2, Math.sin(sa)*10-2, Math.cos(sa)*25+4, 4);
      }
      circle(ctxA, 0, 0, 10, p.c0);
      ctxA.restore();
      if (Math.floor(t/30)%3===0) {
        ctxA.globalAlpha = 0.6;
        for (let v = 0; v < 5; v++) {
          circle(ctxA, CX-60-v*8, 180-v*5, 8+v*2, p.c3);
          circle(ctxA, CX+60+v*8, 180-v*5, 8+v*2, p.c3);
        }
        ctxA.globalAlpha = 1;
      }
      glow(ctxB, CX, 200, 120, 0.5);
      for (let w = 0; w < 3; w++) {
        const wx = 100+w*150;
        ctxA.fillStyle = p.c1;
        circle(ctxA, wx, 320, 4, p.c1);
        ctxA.fillRect(wx-3, 325, 6, 12);
      }
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

neural: (p, t) => {
      ctxA.strokeStyle = p.c1;
      ctxA.lineWidth = 1;
      ctxA.globalAlpha = 0.2;
      for (let i = 0; i < 12; i++) {
        ctxA.beginPath();
        ctxA.moveTo(i * 45, 0);
        ctxA.lineTo(i * 45, H);
        ctxA.stroke();
        ctxA.beginPath();
        ctxA.moveTo(0, i * 35);
        ctxA.lineTo(W, i * 35);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      const nodes = [];
      for (let i = 0; i < 30; i++) {
        const seed = i * 137.5;
        nodes.push({
          x: 50 + (seed * 3.7) % 412,
          y: 50 + (seed * 2.3) % 250,
          pulse: Math.sin(t * 0.05 + i * 0.4)
        });
      }
      ctxA.strokeStyle = p.c1;
      ctxA.lineWidth = 1;
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const dist = Math.sqrt((nodes[i].x - nodes[j].x) ** 2 + (nodes[i].y - nodes[j].y) ** 2);
          if (dist < 100) {
            const signal = Math.sin(t * 0.08 + i * 0.3 + j * 0.2);
            ctxA.globalAlpha = 0.15 + signal * 0.15;
            ctxA.beginPath();
            ctxA.moveTo(nodes[i].x, nodes[i].y);
            ctxA.lineTo(nodes[j].x, nodes[j].y);
            ctxA.stroke();
          }
        }
      }
      ctxA.globalAlpha = 1;
      nodes.forEach((n, i) => {
        const brightness = n.pulse * 0.4 + 0.6;
        const size = 3 + n.pulse * 2;
        ctxA.globalAlpha = brightness;
        circle(ctxA, n.x, n.y, size, n.pulse > 0.5 ? p.c3 : p.c2);
        if (n.pulse > 0.7) {
          glow(ctxB, n.x, n.y, 25, 0.3);
        }
      });
      ctxA.globalAlpha = 1;
      glow(ctxB, CX, 160, 150, 0.4);
      ctxA.font = '10px monospace';
      ctxA.fillStyle = p.c2;
      for (let i = 0; i < 30; i++) {
        const dx = (i * 18 + t * 1.5) % 540 - 14;
        ctxA.globalAlpha = 0.3;
        ctxA.fillText(Math.random() > 0.5 ? '1' : '0', dx, 330 + Math.sin(i + t * 0.05) * 10);
      }
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

feed: (p, t) => {
      ctxA.font = '11px monospace';
      for (let col = 0; col < 42; col++) {
        const x = col * 12 + 2;
        const speed = 1.5 + (col % 7) * 0.5;
        const brightness = 0.2 + (col % 3) * 0.15;
        for (let row = 0; row < 28; row++) {
          const y = (row * 14 + t * speed) % 420 - 20;
          const fadeIn = y < 40 ? y / 40 : 1;
          const fadeOut = y > 340 ? (400 - y) / 60 : 1;
          ctxA.globalAlpha = brightness * fadeIn * fadeOut;
          ctxA.fillStyle = p.c1;
          ctxA.fillText(Math.random() > 0.5 ? '1' : '0', x, y);
        }
      }
      ctxA.globalAlpha = 1;
      const eyeY = 160;
      const eyePulse = Math.sin(t * 0.05) * 0.15 + 1;
      for (let y = -45; y < 45; y++) {
        const eyeWidth = Math.sqrt(45 * 45 - y * y) * 1.3;
        const scanFlicker = Math.sin(t * 0.2 + y * 0.1) > 0 ? 1 : 0.8;
        ctxA.globalAlpha = 0.7 * scanFlicker;
        ctxA.fillStyle = p.c2;
        ctxA.fillRect(CX - eyeWidth, eyeY + y, eyeWidth * 2, 1);
      }
      ctxA.globalAlpha = 1;
      const pupilSize = 15 * eyePulse;
      circle(ctxA, CX, eyeY, pupilSize, p.c3);
      circle(ctxA, CX, eyeY, pupilSize * 0.5, p.c0);
      circle(ctxA, CX - 5, eyeY - 5, 4, p.c3);
      glow(ctxB, CX, eyeY, 120 * eyePulse, 0.6);
      ctxA.strokeStyle = p.c2;
      ctxA.lineWidth = 1;
      ctxA.globalAlpha = 0.5;
      ctxA.beginPath();
      ctxA.arc(CX, eyeY, 60, 0, Math.PI * 2);
      ctxA.stroke();
      ctxA.beginPath();
      ctxA.arc(CX, eyeY, 80, 0, Math.PI * 2);
      ctxA.stroke();
      ctxA.globalAlpha = 1;
      ctxA.strokeStyle = p.c3;
      ctxA.lineWidth = 2;
      const corners = [[CX - 70, eyeY - 70], [CX + 70, eyeY - 70], [CX - 70, eyeY + 70], [CX + 70, eyeY + 70]];
      corners.forEach(([cx, cy], i) => {
        const flash = Math.sin(t * 0.08 + i * 0.5) > 0.3;
        if (flash) {
          ctxA.beginPath();
          const dx = i % 2 === 0 ? 15 : -15;
          const dy = i < 2 ? 15 : -15;
          ctxA.moveTo(cx + dx, cy);
          ctxA.lineTo(cx, cy);
          ctxA.lineTo(cx, cy + dy);
          ctxA.stroke();
        }
      });
      ctxA.font = '9px monospace';
      ctxA.fillStyle = p.c2;
      ctxA.globalAlpha = 0.7;
      const dots = '.'.repeat(Math.floor(t / 15) % 4);
      ctxA.fillText('OBSERVING' + dots, CX - 40, eyeY + 100);
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

collapse: (p, t) => {
      for (let i = 0; i < 25; i++) {
        const colors = [p.c0, p.c1, p.c2, p.c3];
        ctxA.fillStyle = colors[Math.floor(Math.random() * 4)];
        ctxA.globalAlpha = Math.random() * 0.4;
        ctxA.fillRect(
          Math.random() * W,
          Math.random() * H,
          10 + Math.random() * 60,
          3 + Math.random() * 15
        );
      }
      ctxA.globalAlpha = 1;
      const centerY = 160;
      const chaos = Math.sin(t * 0.03) * 25 + 25;
      const fragments = 12;
      for (let i = 0; i < fragments; i++) {
        const baseAngle = (i / fragments) * Math.PI * 2;
        const drift = chaos * 0.8;
        const fx = CX + Math.cos(baseAngle) * drift + Math.sin(t * 0.05 + i) * 10;
        const fy = centerY + Math.sin(baseAngle) * drift * 0.6 + Math.cos(t * 0.04 + i) * 8;
        const size = 8 + Math.sin(i + t * 0.1) * 4;
        const glitchX = Math.random() > 0.85 ? (Math.random() - 0.5) * 30 : 0;
        ctxA.globalAlpha = 0.6 + Math.sin(t * 0.08 + i) * 0.3;
        circle(ctxA, fx + glitchX, fy, size, i % 3 === 0 ? p.c3 : p.c2);
      }
      ctxA.globalAlpha = 1;
      for (let y = 0; y < H; y += 3) {
        if (Math.random() > 0.92) {
          ctxA.globalAlpha = 0.5;
          ctxA.fillStyle = Math.random() > 0.5 ? p.c3 : p.c0;
          const offset = (Math.random() - 0.5) * 40;
          ctxA.fillRect(offset, y, W, 2);
        }
      }
      ctxA.globalAlpha = 1;
      for (let i = 0; i < 300; i++) {
        ctxA.fillStyle = Math.random() > 0.5 ? p.c3 : p.c0;
        ctxA.globalAlpha = Math.random() * 0.25;
        ctxA.fillRect(Math.random() * W, Math.random() * H, 2, 2);
      }
      ctxA.globalAlpha = 1;
      if (Math.random() > 0.92) {
        ctxA.font = '9px monospace';
        ctxA.fillStyle = p.c3;
        ctxA.fillText('ERR: SIGNAL_LOST', 160 + Math.random() * 80, 280 + Math.random() * 30);
      }
      if (Math.random() > 0.6) {
        glow(ctxB, CX + (Math.random() - 0.5) * 80, centerY + (Math.random() - 0.5) * 60, 80, 0.5);
      }
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

participant: (p, t) => {
      const float = Math.sin(t * 0.025) * 6;
      for (let i = 0; i < 100; i++) {
        const twinkle = Math.sin(t * 0.04 + i * 0.6) * 0.4 + 0.6;
        ctxA.globalAlpha = twinkle * 0.6;
        ctxA.fillStyle = p.c3;
        const size = i % 5 === 0 ? 2 : 1;
        ctxA.fillRect((i * 41) % W, (i * 29) % H, size, size);
      }
      ctxA.globalAlpha = 1;
      ctxA.strokeStyle = p.c2;
      ctxA.lineWidth = 3;
      ctxA.beginPath();
      ctxA.ellipse(CX, 160 + float, 100, 130, 0, 0, Math.PI * 2);
      ctxA.stroke();
      ctxA.globalAlpha = 0.2;
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.ellipse(CX, 160 + float, 95, 125, 0, 0, Math.PI * 2);
      ctxA.fill();
      ctxA.globalAlpha = 1;
      const reflectY = 160 + float;
      ctxA.fillStyle = p.c0;
      circle(ctxA, CX, reflectY - 50, 25, p.c0);
      ctxA.beginPath();
      ctxA.moveTo(CX - 45, reflectY - 20);
      ctxA.quadraticCurveTo(CX - 50, reflectY + 40, CX - 40, reflectY + 80);
      ctxA.lineTo(CX + 40, reflectY + 80);
      ctxA.quadraticCurveTo(CX + 50, reflectY + 40, CX + 45, reflectY - 20);
      ctxA.quadraticCurveTo(CX, reflectY - 30, CX - 45, reflectY - 20);
      ctxA.fill();
      const eyeTrack = Math.sin(t * 0.015) * 4;
      circle(ctxA, CX - 10 + eyeTrack, reflectY - 55, 5, p.c3);
      circle(ctxA, CX + 10 + eyeTrack, reflectY - 55, 5, p.c3);
      circle(ctxA, CX - 10 + eyeTrack, reflectY - 55, 2, p.c2);
      circle(ctxA, CX + 10 + eyeTrack, reflectY - 55, 2, p.c2);
      glow(ctxB, CX, reflectY - 30, 120, 0.5);
      for (let r = 0; r < 4; r++) {
        const ripplePhase = (t * 0.02 + r * 0.4) % (Math.PI * 2);
        const rippleR = 30 + ripplePhase * 40;
        ctxA.globalAlpha = 0.25 * (1 - ripplePhase / (Math.PI * 2));
        ctxA.strokeStyle = p.c3;
        ctxA.lineWidth = 1;
        ctxA.beginPath();
        ctxA.arc(CX, reflectY - 30, rippleR, 0, Math.PI * 2);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      ctxA.strokeStyle = p.c3;
      ctxA.lineWidth = 1;
      ctxA.globalAlpha = 0.3 + Math.sin(t * 0.04) * 0.15;
      ctxA.setLineDash([6, 6]);
      ctxA.beginPath();
      ctxA.moveTo(CX, 295);
      ctxA.lineTo(CX, reflectY + 85);
      ctxA.stroke();
      ctxA.setLineDash([]);
      ctxA.globalAlpha = 1;
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 70, 0.5);
    },

// NEW STRATUM VII SCENES
    piercer: (p, t) => {
      // Multiple layers of reality being pierced
      const numLayers = 7;
      for (let layer = 0; layer < numLayers; layer++) {
        const yOffset = layer * 35;
        const alpha = 0.15 + (layer / numLayers) * 0.4;
        ctxA.globalAlpha = alpha;
        
        // Dithered reality layers
        ditheredRect(ctxA, 0, yOffset, W, 30, 
          layer % 2 === 0 ? p.c0 : p.c1, 
          layer % 2 === 0 ? p.c1 : p.c0);
      }
      ctxA.globalAlpha = 1;

// THE PIERCING SPEAR/TUNING FORK
      const pierceY = 50;
      const vibration = Math.sin(t * 0.15) * 3;
      
      // Fork handle
      ctxA.fillStyle = p.c2;
      ctxA.fillRect(CX - 5, pierceY, 10, 180);
      
      // Fork prongs
      const prongWidth = 60;
      ctxA.fillStyle = p.c3;
      ctxA.fillRect(CX - prongWidth - 5, pierceY, 10, 100 + vibration);
      ctxA.fillRect(CX + prongWidth - 5, pierceY, 10, 100 + vibration);
      
      // Vibration waves
      for (let i = 0; i < 5; i++) {
        const wavePhase = (t * 0.1 + i * 0.3) % 1;
        const waveY = pierceY + 100 + wavePhase * 150;
        const waveAlpha = 1 - wavePhase;
        ctxA.globalAlpha = waveAlpha * 0.6;
        ctxA.strokeStyle = p.c3;
        ctxA.lineWidth = 2;
        ctxA.beginPath();
        ctxA.arc(CX - prongWidth, waveY, wavePhase * 80, 0, Math.PI * 2);
        ctxA.stroke();
        ctxA.beginPath();
        ctxA.arc(CX + prongWidth, waveY, wavePhase * 80, 0, Math.PI * 2);
        ctxA.stroke();
      }
      ctxA.globalAlpha = 1;
      
      // Crack in reality
      const crackPulse = Math.sin(t * 0.08);
      if (crackPulse > 0) {
        ctxA.strokeStyle = p.c3;
        ctxA.lineWidth = 3;
        ctxA.globalAlpha = crackPulse;
        ctxA.beginPath();
        ctxA.moveTo(CX, pierceY + 150);
        let crackX = CX;
        let crackY = pierceY + 150;
        for (let i = 0; i < 8; i++) {
          crackX += (Math.random() - 0.5) * 40;
          crackY += 25;
          ctxA.lineTo(crackX, crackY);
        }
        ctxA.stroke();
        ctxA.globalAlpha = 1;
      }
      
      // Intense glow at penetration point
      glow(ctxB, CX, pierceY + 150, 200, 0.8);
      
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

echo: (p, t) => {
      // Infinite mirror reflection effect
      const numReflections = 8;
      const baseScale = 1.0;
      
      for (let i = 0; i < numReflections; i++) {
        const scale = baseScale - (i * 0.12);
        const alpha = 1 - (i * 0.11);
        const offset = i * 15;
        
        ctxA.globalAlpha = alpha;
        
        // Left figure
        const leftX = CX - 80 - offset;
        ctxA.fillStyle = p.c1;
        ctxA.save();
        ctxA.translate(leftX, 180);
        ctxA.scale(scale, scale);
        // Head
        circle(ctxA, 0, -50, 20, p.c1);
        // Body
        ctxA.fillStyle = p.c2;
        ctxA.beginPath();
        ctxA.moveTo(-30, -20);
        ctxA.lineTo(30, -20);
        ctxA.lineTo(25, 50);
        ctxA.lineTo(-25, 50);
        ctxA.closePath();
        ctxA.fill();
        ctxA.restore();
        
        // Right figure (mirrored)
        const rightX = CX + 80 + offset;
        ctxA.save();
        ctxA.translate(rightX, 180);
        ctxA.scale(scale, scale);
        circle(ctxA, 0, -50, 20, p.c1);
        ctxA.fillStyle = p.c2;
        ctxA.beginPath();
        ctxA.moveTo(-30, -20);
        ctxA.lineTo(30, -20);
        ctxA.lineTo(25, 50);
        ctxA.lineTo(-25, 50);
        ctxA.closePath();
        ctxA.fill();
        ctxA.restore();
      }
      ctxA.globalAlpha = 1;
      
      // Central mirror line
      const shimmer = Math.sin(t * 0.06) * 0.3 + 0.7;
      ctxA.strokeStyle = p.c3;
      ctxA.lineWidth = 2;
      ctxA.globalAlpha = shimmer;
      ctxA.beginPath();
      ctxA.moveTo(CX, 0);
      ctxA.lineTo(CX, H);
      ctxA.stroke();
      ctxA.globalAlpha = 1;
      
      // Symmetry indicators
      for (let i = 0; i < 6; i++) {
        const y = 60 + i * 50;
        const pulse = Math.sin(t * 0.05 + i * 0.5);
        if (pulse > 0.5) {
          ctxA.fillStyle = p.c3;
          ctxA.fillRect(CX - 3, y - 3, 6, 6);
        }
      }
      
      // Glow effect
      glow(ctxB, CX, 180, 250, 0.5);
      
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    },

rooted: (p, t) => {
      // Underground root network
      const rootY = 280;
      
      // Draw roots spreading downward and connecting
      ctxA.strokeStyle = p.c2;
      ctxA.lineWidth = 3;
      
      // Central figure's roots
      const breathe = Math.sin(t * 0.03) * 5;
      for (let i = 0; i < 8; i++) {
        const angle = (i * Math.PI / 4) + Math.PI / 2;
        const length = 60 + Math.sin(t * 0.04 + i) * 20;
        ctxA.beginPath();
        ctxA.moveTo(CX, rootY);
        
        // Branching roots
        let rx = CX;
        let ry = rootY;
        for (let seg = 0; seg < 4; seg++) {
          const segAngle = angle + (Math.random() - 0.5) * 0.3;
          const segLength = length / (4 - seg);
          rx += Math.cos(segAngle) * segLength;
          ry += Math.sin(segAngle) * segLength;
          ctxA.lineTo(rx, ry);
        }
        ctxA.stroke();
      }
      
      // Connected beings - other root systems
      const beings = [
        { x: CX - 120, y: rootY },
        { x: CX + 120, y: rootY },
        { x: CX - 200, y: rootY + 40 },
        { x: CX + 200, y: rootY + 40 }
      ];
      
      beings.forEach((being, idx) => {
        // Small roots from other beings
        ctxA.lineWidth = 2;
        ctxA.strokeStyle = p.c1;
        for (let i = 0; i < 4; i++) {
          const angle = Math.PI / 2 + (i - 2) * 0.4;
          ctxA.beginPath();
          ctxA.moveTo(being.x, being.y);
          ctxA.lineTo(
            being.x + Math.cos(angle) * 40,
            being.y + Math.sin(angle) * 40
          );
          ctxA.stroke();
        }
        
        // Connection pulses
        const connectionPulse = Math.sin(t * 0.05 + idx * 0.7);
        if (connectionPulse > 0.3) {
          ctxA.strokeStyle = p.c3;
          ctxA.lineWidth = 2;
          ctxA.globalAlpha = connectionPulse;
          ctxA.beginPath();
          ctxA.moveTo(being.x, being.y + 30);
          ctxA.lineTo(CX, rootY + 30);
          ctxA.stroke();
          ctxA.globalAlpha = 1;
        }
      });
      
      // Central figure above ground
      ctxA.fillStyle = p.c1;
      ctxA.beginPath();
      ctxA.moveTo(CX, rootY - 60 + breathe);
      ctxA.lineTo(CX - 25, rootY);
      ctxA.lineTo(CX + 25, rootY);
      ctxA.closePath();
      ctxA.fill();
      
      // Head
      circle(ctxA, CX, rootY - 70 + breathe, 12, p.c2);
      
      // Branches reaching up
      ctxA.strokeStyle = p.c2;
      ctxA.lineWidth = 3;
      for (let side = -1; side <= 1; side += 2) {
        ctxA.beginPath();
        ctxA.moveTo(CX + side * 20, rootY - 40 + breathe);
        ctxA.lineTo(CX + side * 45, rootY - 80 + breathe);
        ctxA.lineTo(CX + side * 60, rootY - 100 + breathe);
        ctxA.stroke();
      }
      
      // Network glow
      glow(ctxB, CX, rootY, 180, 0.6);
      beings.forEach(being => {
        glow(ctxB, being.x, being.y, 60, 0.3);
      });
      
      // Soil/earth texture at bottom
      ditheredRect(ctxA, 0, rootY + 50, W, 100, p.c0, p.c1);
      
      player(ctxA, CX, 310, p, t);
      glow(ctxB, CX, 300, 60, 0.4);
    }
  };

// UI
  const els = {
    intro: document.getElementById('intro-screen'),
    comp: document.getElementById('completion-screen'),
    fable: document.getElementById('fable-scroll'),
    dbox: document.getElementById('dialogue-box'),
    gname: document.getElementById('god-name'),
    rtext: document.getElementById('riddle-text'),
    rinput: document.getElementById('riddle-input'),
    strat: document.getElementById('stratum-display'),
    gcnt: document.getElementById('god-counter'),
    hud: document.getElementById('hud'),
    start: document.getElementById('start-button'),
    reset: document.getElementById('reset-button'),
    horizonBtn: document.getElementById('horizon-btn'),
    jlist: document.getElementById('journey-list'),
    fs: document.getElementById('fullscreen-btn')
  };

function showGod(g) {
    const sn = ['I','II','III','IV','V','VI','VII'];
    els.strat.textContent = 'STRATUM '+sn[g.stratum-1]+': '+g.stratumName;
    els.gcnt.textContent = 'GOD '+g.id+'/23';
    els.gname.textContent = g.name;
    els.rtext.textContent = g.riddle;
    els.rinput.value = '';
    setTimeout(() => { els.dbox.classList.add('visible'); els.rinput.focus(); }, 500);
  }

async function checkAnswer() {
    const v = els.rinput.value.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
    if (!v || v.includes(' ')) {
      els.rinput.classList.add('wrong');
      els.dbox.classList.add('shake');
      setTimeout(() => {
        els.rinput.classList.remove('wrong');
        els.dbox.classList.remove('shake');
        els.rinput.value = '';
        els.rinput.focus();
      }, 400);
      return;
    }
    const h = await sha256(v);
    const hs = await initHashes();
    if (h === hs.get(currentGod.id)) {
      solvedGods.push({ name: currentGod.name, riddle: currentGod.riddle, answer: v });
      els.dbox.classList.remove('visible');
      setTimeout(() => {
        // If there's a next god to load (not the last one)
        if (currentGod.id < GodsData.length) {
          loadGod(GodsData[currentGod.id]);
        } 
        // If this was the last god (God 23), show the fable
        else {
          // SHOW FABLE
          els.hud.style.opacity = '0';
          setTimeout(() => {
            els.fable.classList.remove('hidden');
          }, 1000);
        }
      }, 800);
    } else {
      els.rinput.classList.add('wrong');
      els.dbox.classList.add('shake');
      setTimeout(() => {
        els.rinput.classList.remove('wrong');
        els.dbox.classList.remove('shake');
        els.rinput.value = '';
        els.rinput.focus();
      }, 400);
    }
  }

function resetGame() {
    try {
      localStorage.clear();
    } catch(e) {}
    location.reload();
  }

let lastTime = 0, running = false;
  function gameLoop(t) {
    if (!running) return;
    const dt = lastTime ? Math.min((t-lastTime)/1000, 0.1) : 0;
    lastTime = t;
    // Updated speed multiplier formula for 7 strata (cap at 6)
    const stratumForSpeed = Math.min(currentGod?.stratum || 1, 6);
    const sm = 1 + Math.pow(stratumForSpeed/6, 1.5);
    animTime += dt * sm * 60;
    render(dt);
    requestAnimationFrame(gameLoop);
  }

// Init
  canvas = document.getElementById('game-canvas');
  ctx = canvas.getContext('2d');
  bufA = document.createElement('canvas');
  bufB = document.createElement('canvas');
  bufA.width = bufB.width = W;
  bufA.height = bufB.height = H;
  ctxA = bufA.getContext('2d');
  ctxB = bufB.getContext('2d');

function resize() {
    const ca = canvas.parentElement;
    const aw = ca.clientWidth, ah = ca.clientHeight;
    const sc = Math.min(aw/W, ah/H);
    canvas.style.width = (W*sc)+'px';
    canvas.style.height = (H*sc)+'px';
    const dpr = window.devicePixelRatio || 1;
    canvas.width = W*dpr;
    canvas.height = H*dpr;
    ctx.scale(dpr, dpr);
  }
  resize();
  window.addEventListener('resize', resize);

ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, W, H);

els.start.addEventListener('click', start);
  els.reset.addEventListener('click', resetGame);
  els.horizonBtn.addEventListener('click', resetGame);
  els.rinput.addEventListener('keypress', e => { if (e.key === 'Enter') checkAnswer(); });
  els.fs.addEventListener('click', () => {
    const d = document.documentElement;
    if (d.requestFullscreen) d.requestFullscreen();
    else if (d.webkitRequestFullscreen) d.webkitRequestFullscreen();
  });
  document.addEventListener('click', e => {
    if (e.target.id === 'game-canvas' && els.dbox.classList.contains('visible')) els.rinput.focus();
  });
})();
  </script>
</body>
</html>