kollaps.html

<meta charset="utf-8" />
<title>Kollaps — Wave Function Collapse Plotter</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
  :root {
    --grund:      #E6E3EC;
    --feld:      #F2F0F6;
    --panel-sunk: #DCD8E6;
    --linie:       #C5C0D4;
    --tinte:        #1E1B33;
    --leise:      #5F5A73;
    --pen-a:      #4338A8;
    --pen-b:      #C25A3C;
    --merk:      #4338A8;

    --c-ground:   #EFEDF3;
    --c-line:     #1E1B33;
    --c-pen-a:    #4338A8;
    --c-pen-b:    #C25A3C;
    --c-water:    #DCD9E8;
    --c-land:     #9C93D4;

    --schatten: 0 1px 0 rgba(30,27,51,.06), 0 12px 28px -18px rgba(30,27,51,.55);

    --f-anzeige: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --f-text: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --f-fest: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --grund:      #15131F;
      --feld:      #1D1A2B;
      --panel-sunk: #100E19;
      --linie:       #2E2A40;
      --tinte:        #DEDAEA;
      --leise:      #8B84A3;
      --pen-a:      #9186EE;
      --pen-b:      #E58B6B;
      --merk:      #9186EE;

      --c-ground:   #12101B;
      --c-line:     #DEDAEA;
      --c-pen-a:    #9186EE;
      --c-pen-b:    #E58B6B;
      --c-water:    #1A1828;
      --c-land:     #4A3F86;

      --schatten: 0 1px 0 rgba(255,255,255,.03), 0 14px 34px -20px #000;
    }
  }

  :root[data-theme="dark"] {
    --grund:      #15131F;
    --feld:      #1D1A2B;
    --panel-sunk: #100E19;
    --linie:       #2E2A40;
    --tinte:        #DEDAEA;
    --leise:      #8B84A3;
    --pen-a:      #9186EE;
    --pen-b:      #E58B6B;
    --merk:      #9186EE;

    --c-ground:   #12101B;
    --c-line:     #DEDAEA;
    --c-pen-a:    #9186EE;
    --c-pen-b:    #E58B6B;
    --c-water:    #1A1828;
    --c-land:     #4A3F86;

    --schatten: 0 1px 0 rgba(255,255,255,.03), 0 14px 34px -20px #000;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--f-text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 1180px; margin: 0 auto;
    padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 32px) 64px;
    display: flex; flex-direction: column; gap: 28px;
  }

  .masthead { display: flex; flex-direction: column; gap: 10px; }
  .marke { font-family:var(--f-fest); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--leise); display:flex; gap:12px; align-items:center; margin:0; }
  .marke::after { content:""; flex:1; height:1px; background:var(--linie); }
  

  h1 {
    font-family: var(--f-anzeige); font-weight: 400;
    font-size: clamp(24px,4.2vw,40px); line-height: 1.02;
    letter-spacing: -.015em; margin: 0; text-wrap: balance;
  }
  h1 em { font-style: italic; color: var(--pen-a); }
  .standfirst { color: var(--leise); font-size: 16px; margin: 0; }

  .bench {
    display: grid; grid-template-columns: minmax(0, 1fr) 296px;
    gap: 24px; align-items: start;
  }
  @media (max-width: 900px) { .bench { grid-template-columns: minmax(0, 1fr); } }

  .plate {
    background: var(--feld); border: 1px solid var(--linie); border-radius: 3px;
    box-shadow: var(--schatten); padding: 12px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
  }
  .plate-canvas {
    background: var(--c-ground); border: 1px solid var(--linie);
    display: flex; justify-content: center; overflow-x: auto;
  }
  canvas#grid { display: block; max-width: 100%; height: auto; cursor: crosshair; }

  .scope {
    background: var(--c-ground); border: 1px solid var(--linie);
    position: relative; overflow: hidden; margin: 0;
  }
  canvas#search { display: block; width: 100%; height: 62px; }
  .scope figcaption {
    position: absolute; top: 6px; left: 8px;
    font-family: var(--f-fest); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--leise); pointer-events: none;
  }

  .readout {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 1px; background: var(--linie); border: 1px solid var(--linie);
  }
  .stat { background: var(--feld); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
  .stat dt {
    font-family: var(--f-fest); font-size: 9px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--leise); margin: 0;
  }
  .stat dd { margin: 0; font-family: var(--f-fest); font-size: 16px; font-variant-numeric: tabular-nums; }
  .stat dd.warn { color: var(--pen-b); }

  .rail {
    display: flex; flex-direction: column; gap: 18px;
    background: var(--feld); border: 1px solid var(--linie); border-radius: 3px;
    box-shadow: var(--schatten); padding: 16px;
  }
  .group { display: flex; flex-direction: column; gap: 9px; }
  .group > h2 {
    font-family: var(--f-fest); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--leise); margin: 0;
    padding-bottom: 7px; border-bottom: 1px solid var(--linie); font-weight: 500;
  }
  .group[hidden] { display: none; }

  .btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

  button, select, input[type="text"] {
    font-family: var(--f-fest); font-size: 12px; color: var(--tinte);
    background: var(--grund); border: 1px solid var(--linie); border-radius: 2px;
    padding: 7px 10px; cursor: pointer; letter-spacing: .04em;
  }
  button:hover, select:hover { border-color: var(--pen-a); }
  button:active { background: var(--panel-sunk); }
  button.primary { background: var(--pen-a); border-color: var(--pen-a); color: var(--feld); flex: 1 1 96px; }
  button.primary:hover { filter: brightness(1.08); }
  select, input[type="text"] { width: 100%; cursor: default; }
  input[type="text"] { cursor: text; }

  :focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }

  label.field {
    display: flex; flex-direction: column; gap: 5px;
    font-family: var(--f-fest); font-size: 10px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--leise);
  }
  label.field span { color: var(--tinte); font-variant-numeric: tabular-nums; }
  input[type="range"] { width: 100%; accent-color: var(--pen-a); cursor: pointer; }
  label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
  input[type="checkbox"] { accent-color: var(--pen-a); cursor: pointer; }

  .footbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--linie);
  }
  .toolbar-label {
    font-family: var(--f-fest); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--leise);
  }
  .footbar button { margin-left: auto; }

  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
  .tile {
    background: var(--c-ground); border: 1px solid var(--linie); padding: 4px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .tile canvas { display: block; width: 100%; height: auto; }
  .tile span {
    font-family: var(--f-fest); font-size: 9px; color: var(--leise);
    letter-spacing: .04em; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums;
  }

  /* the paint grid for the overlapping model */
  canvas#bitmap {
    display: block; width: 100%; height: auto; image-rendering: pixelated;
    border: 1px solid var(--linie); background: var(--c-ground); cursor: crosshair;
  }
  .swatches { display: flex; gap: 5px; }
  .swatch {
    width: 26px; height: 26px; border: 1px solid var(--linie); border-radius: 2px;
    padding: 0; cursor: pointer;
  }
  .swatch[aria-pressed="true"] { outline: 2px solid var(--merk); outline-offset: 1px; }

  .notes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px; border-top: 1px solid var(--linie); padding-top: 24px;
  }
  .notes section { display: flex; flex-direction: column; gap: 7px; }
  .notes h3 { font-family: var(--f-anzeige); font-weight: 400; font-size: 20px; margin: 0; }
  .notes p { margin: 0; max-width: 62ch; color: var(--leise); font-size: 14px; }
  .notes b { color: var(--tinte); font-weight: 600; }
  code {
    font-family: var(--f-fest); font-size: .88em; background: var(--panel-sunk);
    padding: 1px 4px; border-radius: 2px; color: var(--tinte);
  }

  .colophon {
    font-family: var(--f-fest); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--leise);
    border-top: 1px solid var(--linie); padding-top: 16px;
  }
  .colophon a { color: var(--pen-a); text-decoration: none; }
  .colophon a:hover { text-decoration: underline; }

  /* PFLEGE: breite-schirme */
  @media (min-width: 1500px) { .wrap { max-width: 1360px; } }
  @media (min-width: 1800px) { .wrap { max-width: 1560px; } }
  @media (min-width: 2200px) { .wrap { max-width: 1800px; } }

  /* PFLEGE: schmalschirm */
  @media (max-width: 700px) {
    table { display: block; max-width: 100%; overflow-x: auto; }
    select, input[type=text], input[type=number], input[type=search] { max-width: 100%; }
  }

  /* PFLEGE: klickflaechen */
  button, select { min-height: 34px; }
  input[type=range] { height: 26px; }
  .marke button { order: 2; margin-left: 12px; }
</style>

<div class="wrap">

  <header class="masthead">
    <p class="marke">Blatt 01 · Kachelplotter <button id="b-thema">Ansicht</button></p>
    <h1>Kollaps: Ordnung aus <em>Superposition</em></h1>
    <p class="standfirst">
      Jede Zelle beginnt als Überlagerung aller möglichen Kacheln. Der Solver beobachtet die
      unsicherste Zelle, würfelt eine Kachel und schiebt die Konsequenz durch das Raster.
      Führt ein Weg in die Sackgasse, rollt er die letzte Entscheidung zurück und probiert die
      nächste. Was man hier sieht, ist nicht das Ergebnis — es ist die Suche selbst.
    </p>
  </header>

  <div class="bench">

    <div class="plate">
      <div class="plate-canvas">
        <canvas id="grid" width="900" height="600" aria-label="Kachelraster des Solvers"></canvas>
      </div>
      <figure class="scope">
        <canvas id="search" width="900" height="62" aria-label="Suchtiefe über die Zeit"></canvas>
        <figcaption>Suchtiefe — jeder Einbruch ist ein Rücksprung</figcaption>
      </figure>
      <dl class="readout">
        <div class="stat"><dt>Beobachtungen</dt><dd id="r-steps">0</dd></div>
        <div class="stat"><dt>Kollabiert</dt><dd id="r-done">0 %</dd></div>
        <div class="stat"><dt>Min. Entropie</dt><dd id="r-ent">—</dd></div>
        <div class="stat"><dt>Sackgassen</dt><dd id="r-dead">0</dd></div>
        <div class="stat"><dt>Rücksprünge</dt><dd id="r-back">0</dd></div>
        <div class="stat"><dt>Neustarts</dt><dd id="r-restart">0</dd></div>
        <div class="stat"><dt>Muster</dt><dd id="r-pat">16</dd></div>
        <div class="stat"><dt>Seed</dt><dd id="r-seed">—</dd></div>
        <div class="stat"><dt>Prüfung</dt><dd id="r-pruef">—</dd></div>
      </dl>
      <div class="footbar">
        <span class="toolbar-label">Ausgabe</span>
        <button id="b-png">PNG speichern</button>
      </div>
    </div>

    <aside class="rail">

      <div class="group">
        <h2>Lauf</h2>
        <div class="btn-row">
          <button id="b-play" class="primary">Start</button>
          <button id="b-step">Schritt</button>
        </div>
        <div class="btn-row">
          <button id="b-solve">Sofort lösen</button>
          <button id="b-new">Neuer Seed</button>
        </div>
        <label class="field">
          Tempo <span id="l-speed">6 / Bild</span>
          <input type="range" id="i-speed" min="1" max="60" value="6" />
        </label>
      </div>

      <div class="group">
        <h2>Modell</h2>
        <label class="field">
          Quelle
          <select id="i-set">
            <option value="circuit">Kacheln — Schaltkreis</option>
            <option value="coast">Kacheln — Küste</option>
            <option value="truchet">Kacheln — Truchet</option>
            <option value="overlap">Gelernt aus Bitmap</option>
          </select>
        </label>
        <label class="field">
          Raster
          <select id="i-size">
            <option value="24,16">24 × 16 — grob</option>
            <option value="36,24" selected>36 × 24 — mittel</option>
            <option value="50,34">50 × 34 — fein</option>
          </select>
        </label>
        <label class="field">
          Seed
          <input type="text" id="i-seed" inputmode="numeric" value="1337" />
        </label>
        <label class="check" id="w-border">
          <input type="checkbox" id="i-border" checked />
          Rand geschlossen
        </label>
        <label class="check">
          <input type="checkbox" id="i-backtrack" checked />
          Rücksprung statt Neustart
        </label>
      </div>

      <div class="group" id="g-bitmap" hidden>
        <h2>Vorlage zeichnen</h2>
        <canvas id="bitmap" width="16" height="16" aria-label="Eingabe-Bitmap, 16 mal 16"></canvas>
        <div class="swatches" id="swatches"></div>
        <label class="field">
          Beispiel
          <select id="i-bmp">
            <option value="hoehle" selected>Höhle</option>
            <option value="raeume">Räume</option>
            <option value="stadt">Stadt</option>
            <option value="geflecht">Geflecht — periodisch</option>
          </select>
        </label>
        <label class="field">
          Musterfenster
          <select id="i-n">
            <option value="2">2 × 2 — locker</option>
            <option value="3" selected>3 × 3 — treu</option>
          </select>
        </label>
        <label class="check">
          <input type="checkbox" id="i-sym" />
          Drehungen und Spiegelungen
        </label>
        <div class="btn-row">
          <button id="b-learn" class="primary" style="flex:1">Muster lernen</button>
        </div>
      </div>

      <div class="group" id="g-tiles">
        <h2 id="tiles-head">Kacheln</h2>
        <div class="tiles" id="tiles"></div>
      </div>

    </aside>
  </div>

  <div class="notes">
    <section>
      <h3>Beobachten</h3>
      <p>
        Der Solver wählt immer die Zelle mit der <b>niedrigsten Shannon-Entropie</b> — die, bei der
        am wenigsten zu verlieren ist. Gewichte fließen ein: eine Zelle mit zwei gleichwahrscheinlichen
        Optionen ist unsicherer als eine mit drei, von denen eine dominiert.
      </p>
    </section>
    <section>
      <h3>Zurückrollen</h3>
      <p>
        Jede Streichung landet auf einem <b>Trail</b>, jede Entscheidung setzt darin eine Marke.
        Bei einem Widerspruch werden alle Streichungen bis zur letzten Marke zurückgenommen, die
        damals gewählte Option verboten und der Nachbarzweig probiert — kein Neustart, nur ein
        Schritt zurück. Die Kurve über den Zahlen zeigt die Tiefe: jeder Einbruch ist ein Rücksprung.
      </p>
    </section>
    <section>
      <h3>Muster statt Kacheln</h3>
      <p>
        Die Kachelsätze sind von Hand geschnitzt: vier Sockel je Kachel. Das <b>Overlapping-Modell</b>
        braucht das nicht — es liest alle N×N-Ausschnitte aus einem gezeichneten Bitmap, zählt ihre
        Häufigkeit und leitet die Nachbarschaftsregeln daraus ab, dass sich überlappende Ausschnitte
        im gemeinsamen Bereich decken müssen. Male links, drücke <b>Muster lernen</b>.
      </p>
    </section>
    <section>
      <h3>Eingreifen</h3>
      <p>
        Ein <b>Klick ins Raster</b> kollabiert diese Zelle auf eine ihrer erlaubten Optionen —
        die Welle läuft von dort weiter, und die Entscheidung ist rücksprungfähig wie jede andere.
        <code>Leertaste</code> Start/Stopp, <code>S</code> Schritt, <code>N</code> neuer Seed.
      </p>
    </section>
  </div>

  <p class="colophon"><a href="index.html">← Alle Blätter</a> · Blatt 01 · Wave Function Collapse mit chronologischem Backtracking · Kachelmodell und Overlapping-Modell auf demselben Solver</p>
</div>

<script>
/* PFLEGE: schaerfe */
(function () {
  "use strict";
  const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
  if (dpr <= 1.01) return;
  const wb = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "width");
  const hb = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "height");
  const roh = HTMLCanvasElement.prototype.getContext;
  HTMLCanvasElement.prototype.getContext = function (art, ...rest) {
    const g = roh.call(this, art, ...rest);
    if (art !== "2d" || this.__scharf) return g;
    this.__scharf = true;
    let lw = wb.get.call(this), lh = hb.get.call(this);
    const anlegen = () => {
      wb.set.call(this, Math.round(lw * dpr));
      hb.set.call(this, Math.round(lh * dpr));
      roh.call(this, "2d").setTransform(dpr, 0, 0, dpr, 0, 0);   // Größe setzen löscht den Zustand
    };
    Object.defineProperty(this, "width",  { get: () => lw, set: (v) => { lw = v; anlegen(); }, configurable: true });
    Object.defineProperty(this, "height", { get: () => lh, set: (v) => { lh = v; anlegen(); }, configurable: true });
    anlegen();
    return g;
  };
})();
</script>
<script>
(() => {
  "use strict";

  /* ============================ PRNG ============================ */
  function mulberry32(a) {
    return function () {
      a |= 0; a = (a + 0x6D2B79F5) | 0;
      let t = Math.imul(a ^ (a >>> 15), 1 | a);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }

  /* ======================= palette from CSS ===================== */
  const P = {};
  function readPalette() {
    const cs = getComputedStyle(document.documentElement);
    for (const k of ["ground", "line", "pen-a", "pen-b", "water", "land"])
      P[k] = cs.getPropertyValue("--c-" + k).trim();
    P.rule = cs.getPropertyValue("--linie").trim();
    P.muted = cs.getPropertyValue("--leise").trim();
  }
  function rgbOf(hex) {
    let h = hex.trim().replace("#", "");
    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
  }

  /* ==================== hand-cut tile prototypes ================ */
  // socket strings are read clockwise per edge (N: W→E, E: N→S, S: E→W, W: S→N)
  // two tiles fit iff a === reverse(b)
  const rev = (s) => s.split("").reverse().join("");
  function stroke(ctx, s, w) { ctx.lineWidth = s * w; ctx.lineCap = "round"; ctx.lineJoin = "round"; }
  function coastLine(c, s, path) {
    c.strokeStyle = P.line; c.globalAlpha = .3;
    c.lineWidth = Math.max(1, s * .035);
    c.beginPath(); path(); c.stroke();
    c.globalAlpha = 1;
  }

  const SETS = {
    circuit: {
      empty: "0",
      protos: [
        { name: "leer",   sockets: ["0","0","0","0"], rot: 1, weight: 1.3, draw: (c, s) => {
            c.fillStyle = P["pen-a"]; c.globalAlpha = .13;
            c.beginPath(); c.arc(s / 2, s / 2, s * .045, 0, 7); c.fill(); c.globalAlpha = 1;
        }},
        { name: "gerade", sockets: ["1","0","1","0"], rot: 2, weight: 1.5, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .12);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s); c.stroke();
        }},
        { name: "bogen",  sockets: ["1","1","0","0"], rot: 4, weight: 1.1, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .12);
            c.beginPath(); c.moveTo(s / 2, 0);
            c.quadraticCurveTo(s / 2, s / 2, s, s / 2); c.stroke();
        }},
        { name: "abzweig", sockets: ["1","1","1","0"], rot: 4, weight: .5, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .12);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s);
            c.moveTo(s / 2, s / 2); c.lineTo(s, s / 2); c.stroke();
            c.fillStyle = P["pen-a"];
            c.beginPath(); c.arc(s / 2, s / 2, s * .075, 0, 7); c.fill();
        }},
        { name: "kreuz",  sockets: ["1","1","1","1"], rot: 1, weight: .22, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .12);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s);
            c.moveTo(0, s / 2); c.lineTo(s, s / 2); c.stroke();
        }},
        { name: "kontakt", sockets: ["1","0","0","0"], rot: 4, weight: .55, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .12);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s * .56); c.stroke();
            c.fillStyle = P["pen-b"];
            c.beginPath(); c.arc(s / 2, s * .63, s * .15, 0, 7); c.fill();
        }}
      ]
    },

    coast: {
      empty: "w",
      protos: [
        { name: "see",  sockets: ["w","w","w","w"], rot: 1, weight: 3.0, draw: (c, s) => {
            c.fillStyle = P.water; c.fillRect(0, 0, s, s);
        }},
        { name: "land", sockets: ["l","l","l","l"], rot: 1, weight: 3.0, draw: (c, s) => {
            c.fillStyle = P.land; c.fillRect(0, 0, s, s);
        }},
        { name: "küste", sockets: ["l","lw","w","wl"], rot: 4, weight: 1.1, draw: (c, s) => {
            c.fillStyle = P.water; c.fillRect(0, 0, s, s);
            c.fillStyle = P.land;  c.fillRect(0, 0, s, s / 2);
            coastLine(c, s, () => { c.moveTo(0, s / 2); c.lineTo(s, s / 2); });
        }},
        { name: "kap",  sockets: ["lw","w","w","wl"], rot: 4, weight: .55, draw: (c, s) => {
            c.fillStyle = P.water; c.fillRect(0, 0, s, s);
            c.fillStyle = P.land;
            c.beginPath(); c.moveTo(0, 0); c.lineTo(s / 2, 0);
            c.arc(0, 0, s / 2, 0, Math.PI / 2); c.closePath(); c.fill();
            coastLine(c, s, () => { c.arc(0, 0, s / 2, 0, Math.PI / 2); });
        }},
        { name: "bucht", sockets: ["l","lw","wl","l"], rot: 4, weight: .55, draw: (c, s) => {
            c.fillStyle = P.land; c.fillRect(0, 0, s, s);
            c.fillStyle = P.water;
            c.beginPath(); c.moveTo(s, s / 2);
            c.arc(s, s, s / 2, -Math.PI / 2, -Math.PI, true);
            c.lineTo(s, s); c.closePath(); c.fill();
            coastLine(c, s, () => { c.arc(s, s, s / 2, -Math.PI / 2, -Math.PI, true); });
        }}
      ]
    },

    truchet: {
      empty: "0",
      protos: [
        { name: "leer",    sockets: ["0","0","0","0"], rot: 1, weight: .9, draw: () => {} },
        { name: "bogen a", sockets: ["1","1","1","1"], rot: 1, weight: 1.4, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .15);
            c.beginPath(); c.arc(0, 0, s / 2, 0, Math.PI / 2); c.stroke();
            c.beginPath(); c.arc(s, s, s / 2, Math.PI, Math.PI * 1.5); c.stroke();
        }},
        { name: "bogen b", sockets: ["1","1","1","1"], rot: 1, weight: 1.4, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .15);
            c.beginPath(); c.arc(s, 0, s / 2, Math.PI / 2, Math.PI); c.stroke();
            c.beginPath(); c.arc(0, s, s / 2, -Math.PI / 2, 0); c.stroke();
        }},
        { name: "band",    sockets: ["1","0","1","0"], rot: 2, weight: .7, draw: (c, s) => {
            c.strokeStyle = P["pen-b"]; stroke(c, s, .15);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s); c.stroke();
        }},
        // without a terminator the all-"1" arcs could never border a blank cell
        { name: "punkt",   sockets: ["1","0","0","0"], rot: 4, weight: .3, draw: (c, s) => {
            c.strokeStyle = P["pen-a"]; stroke(c, s, .15);
            c.beginPath(); c.moveTo(s / 2, 0); c.lineTo(s / 2, s * .5); c.stroke();
            c.fillStyle = P["pen-b"];
            c.beginPath(); c.arc(s / 2, s * .5, s * .12, 0, 7); c.fill();
        }}
      ]
    }
  };

  /* ======================== the shared model ==================== */
  // Both models compile down to the same thing: N options with weights, plus
  // prop[dir][option] = bitset of options allowed on that side.
  const DIRS = [[0,-1],[1,0],[0,1],[-1,0]];   // N E S W — index doubles as socket index

  const M = {
    kind: "tiled",
    n: 0, words: 0,
    weights: null,
    prop: null,            // prop[d] : Uint32Array(n * words)
    tiles: null,           // tiled: expanded tile list
    colours: null,         // overlap: Uint8Array(n*3), colour of each pattern's own cell
    empty: "0",
    wrap: false
  };

  const bitGet = (a, base, p) => (a[base + (p >> 5)] >>> (p & 31)) & 1;
  const bitClr = (a, base, p) => { a[base + (p >> 5)] &= ~(1 << (p & 31)); };
  const bitSet = (a, base, p) => { a[base + (p >> 5)] |= (1 << (p & 31)); };

  function popcount(x) {
    x = x - ((x >> 1) & 0x55555555);
    x = (x & 0x33333333) + ((x >> 2) & 0x33333333);
    x = (x + (x >> 4)) & 0x0F0F0F0F;
    return (x * 0x01010101) >> 24;
  }

  function buildTiledModel(setKey) {
    const set = SETS[setKey];
    const tiles = [];
    for (const p of set.protos) {
      for (let r = 0; r < p.rot; r++) {
        const sk = r ? p.sockets.slice(-r).concat(p.sockets.slice(0, -r)) : p.sockets.slice();
        tiles.push({ proto: p, rot: r, sockets: sk, weight: p.weight });
      }
    }
    const n = tiles.length, words = (n + 31) >> 5;
    const prop = [0, 1, 2, 3].map(() => new Uint32Array(n * words));
    for (let d = 0; d < 4; d++) {
      const od = (d + 2) % 4;
      for (let a = 0; a < n; a++)
        for (let b = 0; b < n; b++)
          if (tiles[a].sockets[d] === rev(tiles[b].sockets[od])) bitSet(prop[d], a * words, b);
    }
    M.kind = "tiled"; M.n = n; M.words = words; M.prop = prop; M.tiles = tiles;
    M.weights = Float64Array.from(tiles, (t) => t.weight);
    M.empty = set.empty; M.colours = null; M.wrap = false;
  }

  /* ------------------- overlapping model -------------------- */
  const BM = 16;                       // input bitmap is 16 × 16
  const bitmap = new Uint8Array(BM * BM);
  const PAL_KEYS = ["ground", "pen-a", "pen-b", "line", "water"];

  const byFormula = (f) => () => {
    for (let y = 0; y < BM; y++) for (let x = 0; x < BM; x++) bitmap[y * BM + x] = f(x, y);
  };

  // A strictly periodic input pins the whole output after one observation — instructive,
  // but it shows nothing. The irregular examples are grown from a fixed seed instead.
  const BITMAPS = {
    hoehle: () => {
      const rnd = mulberry32(9);
      let g = new Uint8Array(BM * BM);
      for (let i = 0; i < g.length; i++) g[i] = rnd() < 0.46 ? 1 : 0;
      for (let round = 0; round < 4; round++) {
        const h = new Uint8Array(BM * BM);
        for (let y = 0; y < BM; y++) for (let x = 0; x < BM; x++) {
          let n = 0;
          for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
            if (!dx && !dy) continue;
            n += g[((y + dy + BM) % BM) * BM + ((x + dx + BM) % BM)];
          }
          h[y * BM + x] = n >= 5 ? 1 : (n <= 2 ? 0 : g[y * BM + x]);
        }
        g = h;
      }
      for (let y = 0; y < BM; y++) for (let x = 0; x < BM; x++) {
        const i = y * BM + x;
        if (!g[i]) { bitmap[i] = 0; continue; }
        let edge = false;
        for (let d = 0; d < 4; d++)
          if (!g[((y + DIRS[d][1] + BM) % BM) * BM + ((x + DIRS[d][0] + BM) % BM)]) edge = true;
        bitmap[i] = edge ? 2 : 1;
      }
    },
    raeume: () => {
      const rnd = mulberry32(5);
      bitmap.fill(0);
      for (let k = 0; k < 7; k++) {
        const w = 3 + ((rnd() * 4) | 0), h = 3 + ((rnd() * 4) | 0);
        const x0 = (rnd() * BM) | 0, y0 = (rnd() * BM) | 0;
        for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
          const i = ((y0 + y) % BM) * BM + ((x0 + x) % BM);
          const rand = x === 0 || y === 0 || x === w - 1 || y === h - 1;
          bitmap[i] = rand ? 2 : 1;
        }
      }
    },
    stadt:    byFormula((x, y) => (x % 6 === 0 || y % 6 === 0) ? 0 : (((x % 6) === 3 && (y % 6) === 3) ? 2 : 1)),
    geflecht: byFormula((x, y) => (((x >> 1) + (y >> 1)) % 2 === 0) ? 1 : ((x + y) % 4 === 0 ? 2 : 0))
  };

  function fillBitmap(name) { BITMAPS[name](); }

  function patternAt(x, y, N) {
    const out = new Uint8Array(N * N);
    for (let j = 0; j < N; j++)
      for (let i = 0; i < N; i++)
        out[j * N + i] = bitmap[((y + j) % BM) * BM + ((x + i) % BM)];
    return out;
  }
  const rot90 = (p, N) => { const o = new Uint8Array(N * N);
    for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) o[x * N + (N - 1 - y)] = p[y * N + x];
    return o; };
  const mirror = (p, N) => { const o = new Uint8Array(N * N);
    for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) o[y * N + (N - 1 - x)] = p[y * N + x];
    return o; };

  // two patterns may sit at offset (dx,dy) iff their overlap agrees everywhere
  function agrees(a, b, dx, dy, N) {
    const x0 = dx < 0 ? 0 : dx, x1 = dx < 0 ? dx + N : N;
    const y0 = dy < 0 ? 0 : dy, y1 = dy < 0 ? dy + N : N;
    for (let y = y0; y < y1; y++)
      for (let x = x0; x < x1; x++)
        if (a[y * N + x] !== b[(y - dy) * N + (x - dx)]) return false;
    return true;
  }

  function buildOverlapModel(N, symmetry) {
    const seen = new Map();
    const pats = [];
    for (let y = 0; y < BM; y++) {
      for (let x = 0; x < BM; x++) {
        let p = patternAt(x, y, N);
        const variants = [];
        if (symmetry) {
          let q = p;
          for (let k = 0; k < 4; k++) { variants.push(q, mirror(q, N)); q = rot90(q, N); }
        } else variants.push(p);
        for (const v of variants) {
          const key = v.join("");
          const hit = seen.get(key);
          if (hit === undefined) { seen.set(key, pats.length); pats.push({ cells: v, count: 1 }); }
          else pats[hit].count++;
        }
      }
    }

    const n = pats.length, words = (n + 31) >> 5;
    const prop = [0, 1, 2, 3].map(() => new Uint32Array(n * words));
    for (let d = 0; d < 4; d++) {
      const dx = DIRS[d][0], dy = DIRS[d][1];
      for (let a = 0; a < n; a++)
        for (let b = 0; b < n; b++)
          if (agrees(pats[a].cells, pats[b].cells, dx, dy, N)) bitSet(prop[d], a * words, b);
    }

    M.kind = "overlap"; M.n = n; M.words = words; M.prop = prop; M.tiles = null;
    M.weights = Float64Array.from(pats, (p) => p.count);
    M.firstIdx = Uint8Array.from(pats, (p) => p.cells[0]);
    M.colours = new Uint8Array(n * 3);
    M.wrap = true;
    recolour();
  }

  let meanColour = "#888";

  // colours follow the theme; the learned patterns do not, so a theme switch
  // must not throw away a running generation
  function recolour() {
    if (M.kind !== "overlap") return;
    let r = 0, g = 0, b = 0, tot = 0;
    for (let i = 0; i < M.n; i++) {
      const rgb = rgbOf(P[PAL_KEYS[M.firstIdx[i]]] || P.ground);
      M.colours[i * 3] = rgb[0]; M.colours[i * 3 + 1] = rgb[1]; M.colours[i * 3 + 2] = rgb[2];
      const wt = M.weights[i];
      r += rgb[0] * wt; g += rgb[1] * wt; b += rgb[2] * wt; tot += wt;
    }
    meanColour = "rgb(" + (r / tot | 0) + "," + (g / tot | 0) + "," + (b / tot | 0) + ")";
  }

  /* ============================ solver ========================== */
  const S = {
    w: 36, h: 24, cell: 24,
    setKey: "circuit",
    border: true, backtracking: true,
    seed: 1337, rnd: null,
    steps: 0, deadends: 0, backtracks: 0, restarts: 0, sinceProgress: 0,
    running: false, finished: false, dead: false
  };
  const BACK_LIMIT = 400;   // beyond this the branch is hopeless; cheaper to start over

  let wave = null;                  // Uint32Array(cells * words)
  let trail = [];                   // packed cell*n + option, one entry per cleared bit
  let decisions = [];               // { mark, cell, chosen }

  // Per-cell tallies, carried along instead of recomputed. Deriving entropy from the
  // bits each time costs cells × options per observation, which the overlapping model
  // (hundreds of patterns) cannot pay.
  let cnt = null;                   // options still open
  let sw = null;                    // Σ weight
  let swl = null;                   // Σ weight·log weight
  let wlog = null;                  // per-option weight·log weight
  let fullMask = null;
  const depthTrace = new Int32Array(900);
  let depthHead = 0, depthCount = 0;
  const flashes = [];

  const cellCount = () => S.w * S.h;

  const optionsIn = (i) => cnt[i];

  function drop(i, p) {
    cnt[i]--; sw[i] -= M.weights[p]; swl[i] -= wlog[p];
    trail.push(i * M.n + p);
  }

  function ban(i, p) {
    const base = i * M.words;
    if (!bitGet(wave, base, p)) return true;
    bitClr(wave, base, p);
    drop(i, p);
    return cnt[i] > 0;
  }

  function undoTo(mark) {
    while (trail.length > mark) {
      const packed = trail.pop();
      const i = (packed / M.n) | 0, p = packed % M.n;
      bitSet(wave, i * M.words, p);
      cnt[i]++; sw[i] += M.weights[p]; swl[i] += wlog[p];
    }
  }

  const allow = () => new Uint32Array(M.words);
  let allowBuf = null;

  function propagate(stack) {
    while (stack.length) {
      const i = stack.pop();
      const bi = i * M.words;
      const x = i % S.w, y = (i / S.w) | 0;
      for (let d = 0; d < 4; d++) {
        let nx = x + DIRS[d][0], ny = y + DIRS[d][1];
        if (M.wrap) { nx = (nx + S.w) % S.w; ny = (ny + S.h) % S.h; }
        else if (nx < 0 || ny < 0 || nx >= S.w || ny >= S.h) continue;
        const j = ny * S.w + nx, bj = j * M.words;

        allowBuf.fill(0);
        const pd = M.prop[d];
        let seen = 0, saturated = false;
        for (let w = 0; w < M.words && !saturated; w++) {
          let bits = wave[bi + w];
          while (bits) {
            const low = bits & -bits;
            const p = (w << 5) + (31 - Math.clz32(low));
            const po = p * M.words;
            for (let k = 0; k < M.words; k++) allowBuf[k] |= pd[po + k];
            bits ^= low;
            // once the union already permits everything, further options cannot widen it
            if ((++seen & 7) === 0) {
              saturated = true;
              for (let k = 0; k < M.words; k++) if (allowBuf[k] !== fullMask[k]) { saturated = false; break; }
              if (saturated) break;
            }
          }
        }
        if (saturated) continue;

        let changed = false;
        for (let w = 0; w < M.words; w++) {
          const before = wave[bj + w];
          // >>> 0: "&" yields a SIGNED int32, so a word with bit 31 set never compares
          // equal to the unsigned value read back from the array — the cell would be
          // re-queued forever. Only bites from 32 options upwards.
          const after = (before & allowBuf[w]) >>> 0;
          if (after === before) continue;
          changed = true;
          let gone = (before & ~after) >>> 0;
          while (gone) {
            const low = gone & -gone;
            drop(j, (w << 5) + (31 - Math.clz32(low)));
            gone ^= low;
          }
          wave[bj + w] = after;
        }
        if (cnt[j] === 0) return false;
        if (changed) stack.push(j);
      }
    }
    return true;
  }

  const entropyOf = (i) => Math.log(sw[i]) - swl[i] / sw[i];

  function pickCell() {
    let best = -1, bestE = Infinity;
    const cells = cellCount();
    for (let i = 0; i < cells; i++) {
      if (cnt[i] <= 1) continue;
      const e = entropyOf(i) + S.rnd() * 1e-4;
      if (e < bestE) { bestE = e; best = i; }
    }
    return best;
  }

  function chooseIn(i) {
    const base = i * M.words;
    let total = 0;
    for (let w = 0; w < M.words; w++) {
      let bits = wave[base + w];
      while (bits) { const low = bits & -bits; total += M.weights[(w << 5) + (31 - Math.clz32(low))]; bits ^= low; }
    }
    let r = S.rnd() * total, chosen = -1;
    for (let w = 0; w < M.words && chosen < 0; w++) {
      let bits = wave[base + w];
      while (bits) {
        const low = bits & -bits;
        const p = (w << 5) + (31 - Math.clz32(low));
        r -= M.weights[p];
        if (r <= 0) { chosen = p; break; }
        bits ^= low;
      }
    }
    if (chosen < 0) for (let p = M.n - 1; p >= 0; p--) if (bitGet(wave, base, p)) { chosen = p; break; }
    return chosen;
  }

  // collapse cell i to option p, recording a decision that can be rolled back
  function decide(i, p) {
    decisions.push({ mark: trail.length, cell: i, chosen: p });
    const base = i * M.words;
    for (let q = 0; q < M.n; q++) if (q !== p && bitGet(wave, base, q)) { bitClr(wave, base, q); drop(i, q); }
    flashes.push({ i: i, t0: performance.now() });
    return propagate([i]);
  }

  // chronological backtracking: undo to the last decision, forbid what it chose, try the sibling
  function backtrack() {
    while (decisions.length) {
      const d = decisions.pop();
      undoTo(d.mark);
      S.backtracks++;
      if (!ban(d.cell, d.chosen)) continue;      // that cell has nothing left — go further back
      if (propagate([d.cell])) return true;
    }
    return false;
  }

  // Prüft das fertige Raster gegen die Regeln selbst, statt dem Solver zu glauben:
  // jedes benachbarte Paar muss laut Kompatibilitätstabelle zusammenpassen. Findet
  // Fehler in Ausbreitung und Rücksprung, die man dem Bild nicht ansieht.
  function pruefe() {
    const cells = cellCount();
    let offen = 0, verletzt = 0, geprueft = 0;
    const wahl = new Int32Array(cells).fill(-1);
    for (let i = 0; i < cells; i++) {
      if (cnt[i] !== 1) { offen++; continue; }
      for (let p = 0; p < M.n; p++) if (bitGet(wave, i * M.words, p)) { wahl[i] = p; break; }
    }
    for (let i = 0; i < cells; i++) {
      if (wahl[i] < 0) continue;
      const x = i % S.w, y = (i / S.w) | 0;
      for (let d = 0; d < 4; d++) {
        let nx = x + DIRS[d][0], ny = y + DIRS[d][1];
        if (M.wrap) { nx = (nx + S.w) % S.w; ny = (ny + S.h) % S.h; }
        else if (nx < 0 || ny < 0 || nx >= S.w || ny >= S.h) continue;
        const j = ny * S.w + nx;
        if (wahl[j] < 0) continue;
        geprueft++;
        if (!bitGet(M.prop[d], wahl[i] * M.words, wahl[j])) verletzt++;
      }
    }
    return { offen, verletzt, geprueft };
  }

  function step(atCell) {
    if (S.finished || S.dead) return false;
    const i = atCell !== undefined ? atCell : pickCell();
    if (i < 0) { S.finished = true; S.running = false; syncPlay(); return false; }
    const p = chooseIn(i);
    S.steps++;
    const ok = decide(i, p);
    if (ok) S.sinceProgress = 0;
    else {
      S.sinceProgress++;
      S.deadends++;
      const giveUp = !S.backtracking || S.sinceProgress > BACK_LIMIT;
      if (giveUp || !backtrack()) {
        S.restarts++;
        const wasRunning = S.running;
        reset(false);
        S.running = wasRunning; syncPlay();
      }
    }
    depthTrace[depthHead] = decisions.length;
    depthHead = (depthHead + 1) % depthTrace.length;
    if (depthCount < depthTrace.length) depthCount++;
    return true;
  }

  function applyBorder() {
    if (M.kind !== "tiled" || !S.border) return true;
    const empty = M.empty, stack = [];
    for (let y = 0; y < S.h; y++) {
      for (let x = 0; x < S.w; x++) {
        const i = y * S.w + x;
        let touched = false;
        for (let d = 0; d < 4; d++) {
          const nx = x + DIRS[d][0], ny = y + DIRS[d][1];
          if (nx >= 0 && nx < S.w && ny >= 0 && ny < S.h) continue;
          for (let p = 0; p < M.n; p++) {
            const sk = M.tiles[p].sockets[d];
            if (!sk.split("").every((ch) => ch === empty)) {
              if (bitGet(wave, i * M.words, p)) { if (!ban(i, p)) return false; touched = true; }
            }
          }
        }
        if (touched) stack.push(i);
      }
    }
    return propagate(stack);
  }

  function reset(keepSeed) {
    if (!keepSeed) S.seed = (S.seed + 1) >>> 0;
    S.rnd = mulberry32(S.seed);
    const cells = cellCount();
    wave = new Uint32Array(cells * M.words);
    allowBuf = allow();
    wlog = Float64Array.from(M.weights, (w) => w * Math.log(w));
    fullMask = new Uint32Array(M.words);
    for (let p = 0; p < M.n; p++) bitSet(fullMask, 0, p);
    let sw0 = 0, swl0 = 0;
    for (let p = 0; p < M.n; p++) { sw0 += M.weights[p]; swl0 += wlog[p]; }
    cnt = new Int32Array(cells).fill(M.n);
    sw = new Float64Array(cells).fill(sw0);
    swl = new Float64Array(cells).fill(swl0);
    for (let i = 0; i < cells; i++) wave.set(fullMask, i * M.words);
    trail = []; decisions = []; flashes.length = 0;
    depthTrace.fill(0); depthHead = 0; depthCount = 0;
    S.steps = 0; S.sinceProgress = 0; S.finished = false; S.dead = false;
    applyBorder();
    document.getElementById("i-seed").value = String(S.seed);
    render(); drawSearch(); readout();
  }

  /* ============================ render =========================== */
  const cv = document.getElementById("grid");
  const ctx = cv.getContext("2d");
  const sc = document.getElementById("search");
  const sctx = sc.getContext("2d");
  let cache = [], dpr = 1;

  function buildCache() {
    if (M.kind !== "tiled") { cache = []; return; }
    const s = S.cell * dpr;
    cache = M.tiles.map((t) => {
      const c = document.createElement("canvas");
      c.width = c.height = Math.max(1, Math.round(s));
      const g = c.getContext("2d");
      g.translate(c.width / 2, c.height / 2);
      g.rotate(t.rot * Math.PI / 2);
      g.translate(-c.width / 2, -c.height / 2);
      t.proto.draw(g, c.width);
      return c;
    });
  }

  function resize() {
    dpr = Math.min(2, window.devicePixelRatio || 1);
    cv.width = Math.round(S.w * S.cell * dpr);
    cv.height = Math.round(S.h * S.cell * dpr);
    cv.style.width = (S.w * S.cell) + "px";
    cv.style.height = (S.h * S.cell) + "px";
    buildCache();
  }

  function render() {
    const s = S.cell * dpr;
    ctx.fillStyle = P.ground;
    ctx.fillRect(0, 0, cv.width, cv.height);

    const cells = cellCount();
    for (let i = 0; i < cells; i++) {
      const base = i * M.words;
      const x = (i % S.w) * s, y = ((i / S.w) | 0) * s;
      const n = optionsIn(i);

      if (n === 0) { ctx.fillStyle = P["pen-b"]; ctx.globalAlpha = .5; ctx.fillRect(x, y, s, s); ctx.globalAlpha = 1; continue; }

      if (M.kind === "overlap") {
        if (n === M.n) { ctx.fillStyle = meanColour; ctx.fillRect(x, y, s + 1, s + 1); continue; }
        // a cell still in superposition shows the weighted mean of what it could still be
        let r = 0, g = 0, b = 0, wsum = 0;
        for (let w = 0; w < M.words; w++) {
          let bits = wave[base + w];
          while (bits) {
            const low = bits & -bits;
            const p = (w << 5) + (31 - Math.clz32(low));
            const wt = M.weights[p];
            r += M.colours[p * 3] * wt; g += M.colours[p * 3 + 1] * wt; b += M.colours[p * 3 + 2] * wt;
            wsum += wt; bits ^= low;
          }
        }
        ctx.fillStyle = "rgb(" + (r / wsum | 0) + "," + (g / wsum | 0) + "," + (b / wsum | 0) + ")";
        ctx.fillRect(x, y, s + 1, s + 1);
        continue;
      }

      if (n === 1) {
        for (let p = 0; p < M.n; p++) if (bitGet(wave, base, p)) { ctx.drawImage(cache[p], x, y); break; }
      } else if (n <= 5) {
        ctx.globalAlpha = .14;
        for (let p = 0; p < M.n; p++) if (bitGet(wave, base, p)) ctx.drawImage(cache[p], x, y);
        ctx.globalAlpha = 1;
      } else {
        ctx.fillStyle = P["pen-a"];
        ctx.globalAlpha = .025 + .07 * (1 - n / M.n);
        ctx.fillRect(x + 1, y + 1, s - 2, s - 2);
        ctx.globalAlpha = 1;
      }
    }

    const now = performance.now();
    if (!reduceMotion) {
      ctx.lineWidth = Math.max(1, dpr);
      for (let k = flashes.length - 1; k >= 0; k--) {
        const f = flashes[k], age = (now - f.t0) / 420;
        if (age >= 1) { flashes.splice(k, 1); continue; }
        ctx.globalAlpha = (1 - age) * .85;
        ctx.strokeStyle = P["pen-b"];
        const x = (f.i % S.w) * s, y = ((f.i / S.w) | 0) * s;
        ctx.strokeRect(x + .5, y + .5, s - 1, s - 1);
      }
      ctx.globalAlpha = 1;
    } else flashes.length = 0;
  }

  function drawSearch() {
    const w = sc.width, h = sc.height;
    sctx.fillStyle = P.ground;
    sctx.fillRect(0, 0, w, h);
    sctx.strokeStyle = P.rule; sctx.lineWidth = 1;
    sctx.beginPath(); sctx.moveTo(0, h - .5); sctx.lineTo(w, h - .5); sctx.stroke();
    if (depthCount < 2) return;

    // stretch however many observations exist across the full width, so a short run
    // is not drawn as a long flat stretch of empty buffer
    const len = depthTrace.length;
    const start = depthCount < len ? 0 : depthHead;
    let max = 1;
    for (let k = 0; k < depthCount; k++) { const v = depthTrace[(start + k) % len]; if (v > max) max = v; }
    sctx.strokeStyle = P["pen-a"]; sctx.lineWidth = 1.3;
    sctx.beginPath();
    for (let k = 0; k < depthCount; k++) {
      const v = depthTrace[(start + k) % len];
      const x = k * (w / (depthCount - 1));
      const y = h - 3 - (v / max) * (h - 8);
      if (k === 0) sctx.moveTo(x, y); else sctx.lineTo(x, y);
    }
    sctx.stroke();
  }

  /* =========================== readouts ========================== */
  const $ = (id) => document.getElementById(id);

  function readout() {
    let collapsed = 0, minE = Infinity;
    const cells = cellCount();
    for (let i = 0; i < cells; i++) {
      const n = optionsIn(i);
      if (n === 1) collapsed++;
      else if (n > 1) { const e = entropyOf(i); if (e < minE) minE = e; }
    }
    $("r-steps").textContent = String(S.steps);
    $("r-done").textContent = Math.round(100 * collapsed / cells) + " %";
    $("r-ent").textContent = minE === Infinity ? "—" : minE.toFixed(3);
    const dd = $("r-dead");
    dd.textContent = String(S.deadends);
    dd.classList.toggle("warn", S.deadends > 0);
    $("r-back").textContent = String(S.backtracks);
    const rs = $("r-restart");
    rs.textContent = String(S.restarts);
    rs.classList.toggle("warn", S.restarts > 0);
    $("r-pat").textContent = String(M.n);
    $("r-seed").textContent = String(S.seed);
    const pr = pruefe();
    const pe = $("r-pruef");
    if (pr.verletzt) { pe.textContent = pr.verletzt + " Verstöße"; pe.className = "warn"; }
    else if (pr.offen) { pe.textContent = "läuft"; pe.className = ""; }
    else { pe.textContent = "widerspruchsfrei"; pe.className = ""; }
  }

  function syncPlay() {
    $("b-play").textContent = S.dead ? "Erschöpft"
      : S.running ? "Pause" : (S.finished ? "Fertig" : "Start");
  }

  /* ======================== tile legend ========================== */
  function renderLegend() {
    const host = $("tiles");
    host.textContent = "";
    if (M.kind !== "tiled") return;
    const set = SETS[S.setKey];
    $("tiles-head").textContent = "Kacheln · " + M.n + " mit Rotation";
    for (const p of set.protos) {
      const wrapEl = document.createElement("div");
      wrapEl.className = "tile";
      const c = document.createElement("canvas");
      c.width = c.height = 48;
      const g = c.getContext("2d");
      g.fillStyle = P.ground; g.fillRect(0, 0, 48, 48);
      p.draw(g, 48);
      const lab = document.createElement("span");
      lab.textContent = p.name + " ×" + p.rot;
      wrapEl.append(c, lab);
      host.append(wrapEl);
    }
  }

  /* ====================== bitmap paint grid ====================== */
  const bmCv = $("bitmap");
  const bmCtx = bmCv.getContext("2d");
  let paintColour = 1;

  function drawBitmap() {
    for (let y = 0; y < BM; y++)
      for (let x = 0; x < BM; x++) {
        bmCtx.fillStyle = P[PAL_KEYS[bitmap[y * BM + x]]];
        bmCtx.fillRect(x, y, 1, 1);
      }
  }

  function buildSwatches() {
    const host = $("swatches");
    host.textContent = "";
    PAL_KEYS.forEach((k, idx) => {
      const b = document.createElement("button");
      b.className = "swatch";
      b.style.background = P[k];
      b.setAttribute("aria-pressed", String(idx === paintColour));
      b.setAttribute("aria-label", "Farbe " + (idx + 1));
      b.addEventListener("click", () => {
        paintColour = idx;
        [...host.children].forEach((c, j) => c.setAttribute("aria-pressed", String(j === idx)));
      });
      host.append(b);
    });
  }

  let bmPainting = false;
  function bmPaint(e) {
    const r = bmCv.getBoundingClientRect();
    const x = Math.floor((e.clientX - r.left) / r.width * BM);
    const y = Math.floor((e.clientY - r.top) / r.height * BM);
    if (x < 0 || y < 0 || x >= BM || y >= BM) return;
    bitmap[y * BM + x] = paintColour;
    drawBitmap();
  }
  bmCv.addEventListener("pointerdown", (e) => { bmPainting = true; bmCv.setPointerCapture(e.pointerId); bmPaint(e); });
  bmCv.addEventListener("pointermove", (e) => { if (bmPainting) bmPaint(e); });
  bmCv.addEventListener("pointerup", () => { bmPainting = false; });
  bmCv.addEventListener("pointercancel", () => { bmPainting = false; });

  /* ========================== main loop ========================== */
  let speed = 6;
  const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;

  function frame() {
    if (S.running) {
      for (let k = 0; k < speed && S.running; k++) if (!step()) break;
      readout(); drawSearch();
    }
    if (S.running || flashes.length) render();
    requestAnimationFrame(frame);
  }

  function solveAll() {
    S.running = false;
    let guard = 500000;
    while (!S.finished && !S.dead && guard-- > 0) if (!step()) break;
    flashes.length = 0;
    render(); drawSearch(); readout(); syncPlay();
  }

  /* ========================== rebuild ============================ */
  function rebuild(keepSeed) {
    const overlap = S.setKey === "overlap";
    $("g-bitmap").hidden = !overlap;
    $("g-tiles").hidden = overlap;
    $("w-border").style.display = overlap ? "none" : "";
    if (overlap) buildOverlapModel(+$("i-n").value, $("i-sym").checked);
    else buildTiledModel(S.setKey);
    resize();
    renderLegend();
    reset(keepSeed);
    syncPlay();
  }

  /* ========================== controls =========================== */
  $("b-play").addEventListener("click", () => {
    if (S.finished || S.dead) reset(false);
    S.running = !S.running; syncPlay();
  });
  $("b-step").addEventListener("click", () => { S.running = false; step(); render(); drawSearch(); readout(); syncPlay(); });
  $("b-solve").addEventListener("click", solveAll);
  $("b-new").addEventListener("click", () => { reset(false); S.running = true; syncPlay(); });

  $("i-speed").addEventListener("input", (e) => {
    speed = +e.target.value; $("l-speed").textContent = speed + " / Bild";
  });

  $("i-set").addEventListener("change", (e) => { S.setKey = e.target.value; rebuild(true); });

  $("i-size").addEventListener("change", (e) => {
    const [w, h] = e.target.value.split(",").map(Number);
    S.w = w; S.h = h;
    S.cell = w >= 50 ? 17 : (w >= 36 ? 24 : 36);
    rebuild(true);
  });

  $("i-seed").addEventListener("change", (e) => {
    const v = parseInt(e.target.value, 10);
    S.seed = Number.isFinite(v) ? (v >>> 0) : 1337;
    reset(true);
  });

  $("i-border").addEventListener("change", (e) => { S.border = e.target.checked; reset(true); });
  $("i-backtrack").addEventListener("change", (e) => { S.backtracking = e.target.checked; });

  $("i-bmp").addEventListener("change", (e) => { fillBitmap(e.target.value); drawBitmap(); });
  $("b-learn").addEventListener("click", () => { rebuild(true); });

  cv.addEventListener("click", (e) => {
    const r = cv.getBoundingClientRect();
    const x = Math.floor((e.clientX - r.left) / r.width * S.w);
    const y = Math.floor((e.clientY - r.top) / r.height * S.h);
    if (x < 0 || y < 0 || x >= S.w || y >= S.h) return;
    const i = y * S.w + x;
    if (optionsIn(i) <= 1) return;
    step(i);
    render(); drawSearch(); readout();
  });

  $("b-png").addEventListener("click", () => {
    const a = document.createElement("a");
    a.download = "kollaps-" + S.setKey + "-" + S.seed + ".png";
    a.href = cv.toDataURL("image/png");
    a.click();
  });

  addEventListener("keydown", (e) => {
    if (e.target.matches("input, select, textarea")) return;
    if (e.code === "Space") { e.preventDefault(); $("b-play").click(); }
    else if (e.key === "s" || e.key === "S") $("b-step").click();
    else if (e.key === "n" || e.key === "N") $("b-new").click();
  });

  /* ===================== theme reactivity ======================== */
  function refreshTheme() {
    readPalette();
    buildCache();
    renderLegend();
    buildSwatches();
    drawBitmap();
    recolour();
    render(); drawSearch();
  }
  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", refreshTheme);
  new MutationObserver(refreshTheme).observe(document.documentElement, {
    attributes: true, attributeFilter: ["data-theme"]
  });

  /* ============================ boot ============================= */
  readPalette();
  fillBitmap("hoehle");
  buildSwatches();
  drawBitmap();
  rebuild(true);
  S.running = !reduceMotion;
  syncPlay();
  requestAnimationFrame(frame);

  /* PFLEGE: ansicht — dieselbe Bedienung wie in den übrigen Blättern: erst die
     Systemvorgabe, ein Druck stellt bewusst um. Gezeichnet wird danach neu,
     weil Farben aus dem Stilblatt im Bild nicht von selbst nachziehen. */
  (function () {
    const knopf = document.getElementById("b-thema");
    if (!knopf) return;
    knopf.addEventListener("click", () => {
      const jetzt = document.documentElement.getAttribute("data-theme");
      const dunkel = matchMedia("(prefers-color-scheme: dark)").matches;
      document.documentElement.setAttribute("data-theme",
        jetzt ? (jetzt === "dark" ? "light" : "dark") : (dunkel ? "light" : "dark"));
      const male = [];
      if (typeof refreshTheme === "function") male.push(refreshTheme);
      if (typeof neuFarben === "function") male.push(neuFarben);
      if (typeof zeichnen === "function") male.push(zeichnen);
      if (typeof zeichne === "function") male.push(zeichne);
      if (typeof draw === "function") male.push(draw);
      if (typeof render === "function") male.push(render);
      if (typeof lauf === "function") male.push(lauf);
      if (typeof neu === "function") male.push(neu);
      for (const f of male) { try { f(); } catch (e) { void e; } }
    });
  })();

})();
</script>