<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mycelium Network — Fungal Growth Sandbox</title>
  <meta name="description" content="Click anywhere on the canvas to plant spores and watch mycelium threads organically branch, spread, and interconnect in real time. Adjust growth speed, branching density, and nutrient zones by dragging sliders, then watch the living network evolve into a mesmerizing web.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://myceliumweb.builtbycrew.online/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Mycelium Network — Fungal Growth Sandbox">
  <meta property="og:description" content="Click anywhere on the canvas to plant spores and watch mycelium threads organically branch, spread, and interconnect in real time. Adjust growth speed, branching density, and nutrient zones by dragging sliders, then watch the living network evolve into a mesmerizing web.">
  <meta property="og:url" content="https://myceliumweb.builtbycrew.online/">
  <meta property="og:site_name" content="BuiltByCrew">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Mycelium Network — Fungal Growth Sandbox">
  <meta name="twitter:description" content="Click anywhere on the canvas to plant spores and watch mycelium threads organically branch, spread, and interconnect in real time. Adjust growth speed, branching density, and nutrient zones by dragging sliders, then watch the living network evolve into a mesmerizing web.">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='5' fill='%23D4800A'/%3E%3Cline x1='16' y1='11' x2='16' y2='4' stroke='%23C8720A' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='21' x2='16' y2='28' stroke='%23C8720A' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='11' y1='16' x2='4' y2='16' stroke='%23C8720A' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='16' x2='28' y2='16' stroke='%23C8720A' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12.5' y1='12.5' x2='7' y2='7' stroke='%23B86A0A' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='19.5' y1='19.5' x2='25' y2='25' stroke='%23B86A0A' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='19.5' y1='12.5' x2='25' y2='7' stroke='%23B86A0A' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='12.5' y1='19.5' x2='7' y2='25' stroke='%23B86A0A' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@300;400&display=swap');

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg: #050505;
      --amber: #D4800A;
      --amber-bright: #F5A623;
      --amber-dim: #8B5200;
      --rust: #B85C00;
      --gold: #E8C66A;
      --glow: rgba(212, 128, 10, 0.35);
      --text-muted: rgba(212, 128, 10, 0.45);
      --panel-bg: rgba(10, 6, 2, 0.88);
      --panel-border: rgba(212, 128, 10, 0.2);
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      font-family: 'Inter', sans-serif;
      color: var(--amber);
    }

    canvas {
      display: block;
      position: fixed;
      inset: 0;
      cursor: crosshair;
      touch-action: none;
    }

    /* Header */
    #header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      background: linear-gradient(to bottom, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0) 100%);
      pointer-events: none;
      animation: fadeDown 1s ease both;
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #header h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(13px, 2.2vw, 18px);
      font-weight: 600;
      letter-spacing: 0.12em;
      color: var(--amber-bright);
      text-shadow: 0 0 18px var(--amber), 0 0 40px rgba(212,128,10,0.4);
      white-space: nowrap;
    }

    #header .subtitle {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* Controls panel */
    #controls {
      position: fixed;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 14px 22px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 40px;
      backdrop-filter: blur(12px);
      box-shadow: 0 0 30px rgba(0,0,0,0.7), 0 0 20px rgba(212,128,10,0.08);
      animation: fadeUp 1.2s 0.3s ease both;
      flex-wrap: wrap;
      justify-content: center;
      max-width: calc(100vw - 24px);
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateX(-50%) translateY(16px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .ctrl-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 80px;
    }

    .ctrl-label {
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .ctrl-value {
      font-size: 11px;
      font-weight: 400;
      color: var(--amber-bright);
      min-width: 28px;
      text-align: center;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 90px;
      height: 3px;
      background: linear-gradient(to right, var(--amber) var(--pct, 50%), rgba(212,128,10,0.15) var(--pct, 50%));
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--amber-bright);
      box-shadow: 0 0 8px var(--amber), 0 0 16px rgba(212,128,10,0.5);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    input[type="range"]::-webkit-slider-thumb:hover,
    input[type="range"]:active::-webkit-slider-thumb {
      transform: scale(1.3);
      box-shadow: 0 0 12px var(--amber-bright), 0 0 24px rgba(212,128,10,0.7);
    }

    input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border: none;
      border-radius: 50%;
      background: var(--amber-bright);
      box-shadow: 0 0 8px var(--amber);
      cursor: pointer;
    }

    .divider {
      width: 1px;
      height: 32px;
      background: var(--panel-border);
      flex-shrink: 0;
    }

    #clearBtn {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--amber);
      background: transparent;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      padding: 8px 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
      min-height: 44px;
      min-width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #clearBtn:hover {
      color: var(--amber-bright);
      border-color: var(--amber);
      box-shadow: 0 0 14px rgba(212,128,10,0.25);
    }

    #clearBtn:active {
      transform: scale(0.95);
    }

    /* Hint */
    #hint {
      position: fixed;
      bottom: 110px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
      animation: hintFade 5s 1.5s ease both;
      pointer-events: none;
    }

    @keyframes hintFade {
      0%   { opacity: 0; }
      15%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Spore count badge */
    #sporeCount {
      position: fixed;
      top: 14px;
      right: 20px;
      z-index: 10;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--text-muted);
      text-transform: uppercase;
      animation: fadeDown 1s 0.5s ease both;
      pointer-events: none;
    }

    #sporeCount span {
      color: var(--amber);
      font-weight: 400;
    }

    /* Footer */
    footer {
      position: fixed;
      bottom: 10px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 10;
      font-size: 10px;
      color: rgba(212,128,10,0.3);
      letter-spacing: 0.06em;
      pointer-events: none;
    }

    footer a {
      color: rgba(212,128,10,0.45);
      text-decoration: none;
      pointer-events: all;
      transition: color 0.2s;
    }

    footer a:hover {
      color: var(--amber);
    }

    footer svg {
      opacity: 0.5;
    }

    footer a:hover svg {
      opacity: 1;
    }

    @media (max-width: 600px) {
      #controls {
        gap: 12px;
        padding: 12px 16px;
        bottom: 44px;
      }

      input[type="range"] {
        width: 72px;
      }

      .ctrl-group {
        min-width: 68px;
      }

      #hint {
        bottom: 106px;
        font-size: 9px;
      }
    }
  </style>
</head>
<body>

<canvas id="canvas"></canvas>

<header id="header">
  <div>
    <h1>Mycelium Network</h1>
    <div class="subtitle">Fungal Growth Sandbox</div>
  </div>
</header>

<div id="sporeCount">Spores: <span id="sporeNum">0</span></div>

<div id="hint">tap or click to plant a spore</div>

<div id="controls" role="group" aria-label="Simulation controls">
  <div class="ctrl-group">
    <label class="ctrl-label" for="speedSlider">Speed</label>
    <input type="range" id="speedSlider" min="1" max="10" value="5" aria-label="Growth speed">
    <div class="ctrl-value" id="speedVal">5</div>
  </div>

  <div class="divider"></div>

  <div class="ctrl-group">
    <label class="ctrl-label" for="densitySlider">Branching</label>
    <input type="range" id="densitySlider" min="1" max="10" value="4" aria-label="Branching density">
    <div class="ctrl-value" id="densityVal">4</div>
  </div>

  <div class="divider"></div>

  <div class="ctrl-group">
    <label class="ctrl-label" for="lengthSlider">Length</label>
    <input type="range" id="lengthSlider" min="1" max="10" value="6" aria-label="Thread length">
    <div class="ctrl-value" id="lengthVal">6</div>
  </div>

  <div class="divider"></div>

  <button id="clearBtn" aria-label="Clear canvas">Clear</button>
</div>

<footer>
  <span>Built by <a href="https://builtbycrew.online/" target="_blank" rel="noopener">BuiltByCrew</a> — a new app every day</span>
  &nbsp;·&nbsp;
  <a href="https://github.com/BuiltByCrew/myceliumweb" target="_blank" rel="noopener" aria-label="View source on GitHub">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="vertical-align:middle">
      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
    </svg>
  </a>
  &nbsp;·&nbsp;
  <a href="https://buymeacoffee.com/builtbycrew" target="_blank" rel="noopener">☕ Buy me a coffee</a>
</footer>

<script>
(() => {
  'use strict';

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const speedSlider   = document.getElementById('speedSlider');
  const densitySlider = document.getElementById('densitySlider');
  const lengthSlider  = document.getElementById('lengthSlider');
  const speedVal      = document.getElementById('speedVal');
  const densityVal    = document.getElementById('densityVal');
  const lengthVal     = document.getElementById('lengthVal');
  const clearBtn      = document.getElementById('clearBtn');
  const sporeNum      = document.getElementById('sporeNum');

  // ─── Simulation state ────────────────────────────────────────────────────
  const MAX_TIPS        = 500;
  const AMBIENT_SPORES  = 3; // auto-seeded spores on load for ambient life

  let tips     = [];  // active growing tips
  let segments = [];  // rendered line segments (for glow redraw)
  let sporeCount = 0;

  // Parameters derived from sliders
  const params = {
    speed:   5,
    density: 4,
    length:  6,
  };

  // Colour palette: amber/gold/rust hues
  const THREAD_HUES = [28, 35, 22, 42, 18]; // hue values in HSL

  // ─── Resize ──────────────────────────────────────────────────────────────
  const resize = () => {
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    // Redraw existing segments after resize
    redrawAll();
  };

  window.addEventListener('resize', resize);
  resize();

  // ─── Segment storage ─────────────────────────────────────────────────────
  // Each segment: { x1, y1, x2, y2, alpha, hue, width }
  const MAX_SEGMENTS = 12000;

  function addSegment(x1, y1, x2, y2, alpha, hue, width) {
    if (segments.length >= MAX_SEGMENTS) {
      segments.splice(0, 200); // drop oldest batch
    }
    segments.push({ x1, y1, x2, y2, alpha, hue, width });
  }

  function redrawAll() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (const s of segments) {
      drawSegment(s);
    }
  }

  // ─── Tip factory ─────────────────────────────────────────────────────────
  function createTip(x, y, angle, generation, hue, maxSteps) {
    return {
      x, y,
      angle,
      generation,
      hue,
      step: 0,
      maxSteps,
      alive: true,
      wobble: (Math.random() - 0.5) * 0.3, // directional bias
    };
  }

  function spawnSpore(x, y) {
    if (sporeCount >= 80) return; // cap spores for perf
    sporeCount++;
    sporeNum.textContent = sporeCount;

    const numInitialTips = 3 + Math.floor(Math.random() * 5);
    const hue = THREAD_HUES[Math.floor(Math.random() * THREAD_HUES.length)];
    const maxSteps = getMaxSteps();

    // Draw spore node
    drawSporeNode(x, y, hue);

    for (let i = 0; i < numInitialTips; i++) {
      const angle = (Math.PI * 2 * i) / numInitialTips + (Math.random() - 0.5) * 0.6;
      if (tips.length < MAX_TIPS) {
        tips.push(createTip(x, y, angle, 0, hue, maxSteps));
      }
    }
  }

  function drawSporeNode(x, y, hue) {
    // Glowing spore node
    ctx.save();
    ctx.shadowBlur  = 20;
    ctx.shadowColor = `hsla(${hue}, 90%, 60%, 0.9)`;

    const grad = ctx.createRadialGradient(x, y, 0, x, y, 6);
    grad.addColorStop(0, `hsla(${hue}, 95%, 80%, 1)`);
    grad.addColorStop(0.5, `hsla(${hue}, 85%, 55%, 0.8)`);
    grad.addColorStop(1, `hsla(${hue}, 80%, 40%, 0)`);

    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(x, y, 6, 0, Math.PI * 2);
    ctx.fill();

    ctx.restore();

    // Store spore as a special segment marker (alpha==-1 signals spore)
    addSegment(x, y, x, y, -1, hue, 6);
  }

  // ─── Draw helpers ─────────────────────────────────────────────────────────
  function drawSegment(s) {
    if (s.alpha < 0) {
      // Spore node
      ctx.save();
      ctx.shadowBlur  = 20;
      ctx.shadowColor = `hsla(${s.hue}, 90%, 60%, 0.9)`;
      const grad = ctx.createRadialGradient(s.x1, s.y1, 0, s.x1, s.y1, s.width);
      grad.addColorStop(0, `hsla(${s.hue}, 95%, 80%, 1)`);
      grad.addColorStop(0.5, `hsla(${s.hue}, 85%, 55%, 0.8)`);
      grad.addColorStop(1, `hsla(${s.hue}, 80%, 40%, 0)`);
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(s.x1, s.y1, s.width, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
      return;
    }

    ctx.save();
    ctx.globalAlpha = s.alpha;
    ctx.strokeStyle = `hsl(${s.hue}, 85%, 58%)`;
    ctx.lineWidth   = s.width;
    ctx.lineCap     = 'round';
    ctx.shadowBlur  = 8;
    ctx.shadowColor = `hsla(${s.hue}, 90%, 65%, 0.6)`;
    ctx.beginPath();
    ctx.moveTo(s.x1, s.y1);
    ctx.lineTo(s.x2, s.y2);
    ctx.stroke();
    ctx.restore();
  }

  // ─── Slider helpers ───────────────────────────────────────────────────────
  function getStepSize() {
    // pixels per step per frame — speed 1→10 maps to 0.6→4.5
    return 0.6 + (params.speed - 1) * 0.43;
  }

  function getBranchProb() {
    // probability per step of branching — density 1→10 maps to 0.003→0.035
    return 0.003 + (params.density - 1) * 0.0036;
  }

  function getMaxSteps() {
    // max steps per tip — length 1→10 maps to 60→350
    return Math.round(60 + (params.length - 1) * 32);
  }

  function getLineWidth(generation) {
    return Math.max(0.4, 2.2 - generation * 0.35);
  }

  function getTipAlpha(step, maxSteps, generation) {
    const progress = step / maxSteps;
    const base = Math.max(0.08, 0.9 - generation * 0.18);
    // fade at tip
    return base * (1 - Math.pow(progress, 2.2));
  }

  // ─── Simulation step ─────────────────────────────────────────────────────
  function stepTips() {
    const stepSize    = getStepSize();
    const branchProb  = getBranchProb();
    const newTips     = [];

    for (const tip of tips) {
      if (!tip.alive) continue;

      // Slight random walk
      tip.wobble += (Math.random() - 0.5) * 0.18;
      tip.wobble  = Math.max(-0.8, Math.min(0.8, tip.wobble));
      tip.angle  += tip.wobble * 0.06;

      const nx = tip.x + Math.cos(tip.angle) * stepSize;
      const ny = tip.y + Math.sin(tip.angle) * stepSize;

      const alpha  = getTipAlpha(tip.step, tip.maxSteps, tip.generation);
      const lwidth = getLineWidth(tip.generation);

      // Draw and store segment
      const seg = { x1: tip.x, y1: tip.y, x2: nx, y2: ny, alpha, hue: tip.hue, width: lwidth };
      drawSegment(seg);
      addSegment(tip.x, tip.y, nx, ny, alpha, tip.hue, lwidth);

      tip.x    = nx;
      tip.y    = ny;
      tip.step++;

      // Kill if out of bounds or max steps reached
      if (
        tip.step >= tip.maxSteps ||
        nx < -20 || nx > canvas.width + 20 ||
        ny < -20 || ny > canvas.height + 20
      ) {
        tip.alive = false;
        continue;
      }

      // Branching
      if (tip.generation < 5 && tips.length + newTips.length < MAX_TIPS) {
        if (Math.random() < branchProb) {
          const spread  = 0.35 + Math.random() * 0.55;
          const dir     = Math.random() < 0.5 ? 1 : -1;
          const newAngle = tip.angle + dir * spread;
          const maxSteps = Math.round(tip.maxSteps * (0.55 + Math.random() * 0.35));
          newTips.push(createTip(nx, ny, newAngle, tip.generation + 1, tip.hue, maxSteps));
        }
      }
    }

    // Remove dead tips, add new
    tips = tips.filter(t => t.alive);
    for (const nt of newTips) {
      if (tips.length < MAX_TIPS) tips.push(nt);
    }
  }

  // ─── Ambient auto-seed ────────────────────────────────────────────────────
  // Plant a few spores at start so canvas is alive immediately
  let ambientSeeded = false;

  function seedAmbient() {
    if (ambientSeeded) return;
    ambientSeeded = true;
    const positions = [
      [canvas.width * 0.3, canvas.height * 0.4],
      [canvas.width * 0.7, canvas.height * 0.55],
      [canvas.width * 0.5, canvas.height * 0.3],
    ];
    positions.forEach(([x, y], i) => {
      setTimeout(() => spawnSpore(x, y), i * 400);
    });
  }

  // ─── Interconnection sparkles ─────────────────────────────────────────────
  // Periodically draw faint connection arcs between nearby tip endpoints
  let frame = 0;

  function drawNexusConnections() {
    if (segments.length < 50 || frame % 90 !== 0) return;
    // Sample a random subset of recent segments as "nodes"
    const sample = [];
    const start  = Math.max(0, segments.length - 300);
    for (let i = start; i < segments.length; i += 4) {
      sample.push(segments[i]);
    }
    const n = Math.min(sample.length, 30);
    for (let i = 0; i < n; i++) {
      for (let j = i + 1; j < n; j++) {
        const a = sample[i], b = sample[j];
        const dx = b.x2 - a.x2, dy = b.y2 - a.y2;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 60 && dist > 5) {
          ctx.save();
          ctx.globalAlpha  = 0.06 * (1 - dist / 60);
          ctx.strokeStyle  = `hsl(${a.hue}, 80%, 65%)`;
          ctx.lineWidth    = 0.5;
          ctx.shadowBlur   = 4;
          ctx.shadowColor  = `hsla(${a.hue}, 90%, 70%, 0.3)`;
          ctx.beginPath();
          ctx.moveTo(a.x2, a.y2);
          ctx.lineTo(b.x2, b.y2);
          ctx.stroke();
          ctx.restore();
        }
      }
    }
  }

  // ─── Main loop ────────────────────────────────────────────────────────────
  // We use a persistent trail approach: don't clear each frame.
  // Instead, apply a very subtle dark overlay to create motion trail.
  let lastTime = 0;
  const TARGET_FPS = 60;
  const FRAME_MS   = 1000 / TARGET_FPS;

  function loop(now) {
    requestAnimationFrame(loop);
    const elapsed = now - lastTime;
    if (elapsed < FRAME_MS - 2) return; // throttle to ~60fps
    lastTime = now;

    // Subtle fade overlay — gives trailing effect and prevents total burn-in
    ctx.fillStyle = 'rgba(5, 5, 5, 0.012)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Step simulation
    stepTips();
    drawNexusConnections();

    frame++;
  }

  requestAnimationFrame((now) => {
    lastTime = now;
    seedAmbient();
    requestAnimationFrame(loop);
  });

  // ─── Input: plant spores ──────────────────────────────────────────────────
  const getXY = (e, touch = false) => {
    const rect = canvas.getBoundingClientRect();
    if (touch) {
      const t = e.changedTouches[0];
      return [t.clientX - rect.left, t.clientY - rect.top];
    }
    return [e.clientX - rect.left, e.clientY - rect.top];
  };

  canvas.addEventListener('click', (e) => {
    const [x, y] = getXY(e);
    spawnSpore(x, y);
  });

  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const [x, y] = getXY(e, true);
    spawnSpore(x, y);
  }, { passive: false });

  // ─── Slider wiring ────────────────────────────────────────────────────────
  const updateSlider = (slider, display, key) => {
    const val = parseInt(slider.value, 10);
    params[key] = val;
    display.textContent = val;
    // Update CSS custom property for track fill
    const pct = ((val - parseInt(slider.min)) / (parseInt(slider.max) - parseInt(slider.min))) * 100;
    slider.style.setProperty('--pct', `${pct}%`);
  };

  const wireSlider = (slider, display, key) => {
    updateSlider(slider, display, key); // init
    slider.addEventListener('input', () => updateSlider(slider, display, key));
  };

  wireSlider(speedSlider,   speedVal,   'speed');
  wireSlider(densitySlider, densityVal, 'density');
  wireSlider(lengthSlider,  lengthVal,  'length');

  // ─── Clear ────────────────────────────────────────────────────────────────
  clearBtn.addEventListener('click', () => {
    tips     = [];
    segments = [];
    sporeCount = 0;
    sporeNum.textContent = '0';
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ambientSeeded = false;
    // Brief flash feedback
    clearBtn.style.boxShadow = '0 0 20px rgba(212,128,10,0.5)';
    setTimeout(() => {
      clearBtn.style.boxShadow = '';
      // Replant ambient after clear
      seedAmbient();
    }, 300);
  });

  // ─── Keyboard accessibility ───────────────────────────────────────────────
  canvas.setAttribute('tabindex', '0');
  canvas.setAttribute('aria-label', 'Mycelium growth canvas — press Space or Enter to plant a spore at center');
  canvas.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      spawnSpore(canvas.width / 2 + (Math.random() - 0.5) * 80, canvas.height / 2 + (Math.random() - 0.5) * 80);
    }
  });

})();
</script>

</body>
</html>