<!-- Zerkalius Просмотр GIF — v0.020. Покадровый просмотрщик и склейка GIF: открыть один или несколько GIF (кнопкой или бросив
     на страницу), листать по кадру и через 2 / 4 / 8, играть с любой скоростью, отметить участок «с — по» и положить в склейку;
     участки — из разных GIF, в любом порядке; склейку посмотреть и скачать одним GIF. Всё в самой странице, без библиотек:
     свой разбор GIF (LZW, палитры, прозрачность, способы смены кадра, чересстрочность) и своя сборка (тот же LZW, что в Code).
     v0.001: заведена 2026-09-29 по слову пользователя («нужен GIF-просмотрщик нормальный, чтобы покадрово, через кадр 2, 4, и
             разные участки выбирать, склеивать»). Цветов на один GIF — до 256 (у GIF из Zerkalius их 4–8).
     v0.002: «масштабировать колёсиком, клик — выбор определённого набора GIF и его раскладки, так же с размерами ромбов и
             треугольников». Колесо — масштаб к курсору, мышью — двигать; галка у GIF — в набор; набор играет разом, кадр в
             кадр, раскладкой: в ряд, столбиком, сеткой, △ треугольником (ряды 1, 2, 3 …), ◇ ромбом (1, 2 … n … 2, 1); у
             треугольника и ромба — размер в рядах, клетки заполняются GIF набора по кругу; раскладку — в GIF и PNG.
     v0.003: по снимку «склейка кадр 13 / 64 · Zerkalius-romby-… #49 · 250 мс» — «тут текст прыгает, название файла надо в сторонку»: счётчик
             и имя файла — два поля постоянной ширины; имя (в склейке оно меняется от кадра к кадру) — в своём, бледнее, длинное — с многоточием,
             целиком — в подсказке. Ползунок кадров больше не дёргается.
     v0.004: «пауза по щелчку»: щелчок по картинке (без протяжки — протяжка по-прежнему двигает вид) — пауза / играть, как пробел.
     v0.005: «у GIF общая сцена — надо строчную прокрутку вверх-вниз, туда-сюда, на огромных скоростях; задавать шаг прыжков
             размерами ромбов или треугольников». Сцена (GIF или раскладка) крутится по кругу, как барабан строк: ↓ ↑ или ↕
             туда-сюда с размахом; прыжок — 1 … 512 строк, строка — сколько-то px; скорость — до 5000 прыжков в секунду.
     v0.006: «надо постолбцовую ещё свёртку, нарезку», «если не ромбовую…» — ось прокрутки: по строкам, по столбцам, по
             диагоналям ↘ ↙ (вдоль рёбер ромбов); нарезка — полосы шириной в прыжок поперёк движения: целиком, встречно
             (соседние в разные стороны), лесенкой (каждая следующая — на прыжок больше).
     v0.007: разбор GIF «Аниматрица шаг1 проходы 526–781»: ромбы то растут, то сбрасываются, а соседние кадры мигают (чётные
             вдвое плотнее) — «да (поле кадра, только нечётные), и потом надо разобрать весь гиф, поделить на ромбы различной
             длины и сортировать по чёт / нечёт, и ещё как, и просто по порядку». Поле «кадр №»; кадры: все / нечётные /
             чётные. «◇ Разобрать» — в каждом кадре доля пустых ромбов (чёрных дыр внутри картинки), по ней GIF делится на
             участки отдельно по нечётным и чётным кадрам: ромб — пока дыры растут, сброс — новый ромб, между ними — шум;
             участки — в склейку. Склейку можно сортировать: по порядку, нечёт / чёт вперёд, по длине, по крупности ромбов,
             наоборот, вперемешку. Под ползунком — полоска-график дыр по кадрам (нечётные — жёлтым, чётные — голубым),
             щелчок по ней — к кадру.
     v0.008: по снимку столба ромбов — «как по сетке ромбов разрезать и потом их проиграть по порядку своих размеров в
             группу». «◇ Резать»: кадр режется по сетке ромбов от вершины треугольника (вершина и наклон ищутся сами), ромбы
             одного размера — группой: на своих местах с зазором, в строку или сеткой. Размер — 8 … 512 строк или «все»:
             весь фильм ромбами 16, потом 32, 64 … (или от крупных к мелким). Нарезку — в GIF. Чётность кадров теперь — по
             номеру кадра в GIF, а не по месту в ленте (в склейке и нарезке они разные).
     v0.009: по снимку «◇ 64 × 0» — «пустые картинки»: размер ромба умножался на «строку … px» прокрутки, а там стояло 64 —
             ромб 64 × 64 = 4096 px в кадр не влезал. Размер ромба теперь — px кадра, от прокрутки не зависит. «В строку»
             переносится по ширине кадра (была лента до 8192 px, в окне мельчало до ×0.1).
     v0.010: «каждый ромб своим маленьким фильмом — но сохранить прямо тут отдельной кнопкой, если нужно будет, а так всё в
             редакторе». Раскладка «по одному ромбу»: лента — весь фильм ромба 1, потом ромба 2 … (ряд за рядом, слева
             направо), размеры — по выбору (все — от мелких к крупным); ◇◀ ▶◇ и PageUp / PageDown — соседний ромб на том же
             кадре; двойной щелчок по ромбу в группе — он один. «💾 ромб» — фильм этого ромба одним GIF (мелкий — крупнее,
             до 256 px). Ромбы режутся раз на размер, группы собираются из них; полоска-график считается раз на ленту.
     v0.011: «в просмотрщике можно менять форму 1 и 0? сейчас там квадраты, хотелось бы по умолчанию ромбы». Форма клеток:
             ◆ ромбы (по умолчанию; у шахматной сетки треугольника соседи по диагонали смыкаются рёбрами), ◇ ромбы в клетке,
             ● круги, ▪ квадраты (как в GIF). Кнопка «0» — нули внутри картинки тусклыми клетками той же формы. Видно от
             увеличения ×2; сцена рисуется в m раз крупнее (3 … 12). PNG — с формой, GIF-файлы — исходными пикселями.
     v0.012: по снимку «5000 / с … сдвиг 543 столб.» — «тут дёргается при изменении текста, и скорость ещё больше надо». Скорость и
             сдвиг — поля постоянной ширины, цифры одной ширины; скорость — до 1 000 000 прыжков в секунду (ползунок 0 … 1000,
             по умолчанию те же ~30 / с); сдвиг сворачивается по W·H, а не сбрасывается в ноль.
     v0.013: по снимку — «почему-то каждый 2-й кадр с наложением ромбов на пол-размера», и «в основном холсте (Треугольника) норм».
             В чётных кадрах GIF 526–781 заполнена и вторая шахматка (промежутки между клетками), и ромбы «вплотную» налезали.
             По умолчанию теперь ◆ ромбы, вписанные в клетку, как на холсте Треугольника; «◆ ромбы вплотную» — отдельно: шахматка
             берётся от вершины (в нарезке ромбы встают, не сбивая её), точки вне шахматки — узлами.
     v0.014: «добавь возможность показа сетки, по умолчанию отключи, и настройки цвета её — это граница, обводка тонкой линией всех
             ромбов-квадратов». Кнопка ▦ (выключена) и цвет рядом: у ромбов и кругов — кольцо снаружи каждой клетки, под клетками
             (у мелкого ромба обводка по краю съедала его целиком), у квадратов — общая линия по верху и левому краю, поверх.
             Клетки сетки — светлые и нули на шахматке; у квадратов — все точки внутри картинки.
     v0.015: «в кнопках отдели сетку-фоновую от этой новой» — новое зовётся «обводка клеток»: кнопка ▢ (была ▦), подсказки.
     v0.016: «при включённой кнопке (◇ Резать) — сверху на холсте меню всех размеров сразу, ромбы от 2, 4 … до 512 (наибольший —
             по размеру самого GIF); при нажатии — внизу кадр за кадром в строку, а на холсте в центре одна; при игре внизу выделять
             текущий». Полоска размеров поверх холста; щелчок — «по одному»: в центре ромб, внизу лента его кадров, текущий подсвечен,
             щелчок — к кадру. Лента «по одному» — фильм ОДНОГО ромба (у ромба 2 их 130 тыс., все подряд — 33 млн мест);
             ◇◀ ▶◇ — соседний; без 🔁 в конце фильма — следующий ромб, с 🔁 — этот же по кругу.
     v0.017: по снимку ромба 128 — «как так накладывается?»: стояли «ромбы вплотную» — браузер при F5 вернул прежний выбор по значению
             «rh», а оно с v0.013 значит «вплотную». Форме клеток — autocomplete="off": после обновления всегда ◆ ромбы в клетке.
     v0.018: «каждый второй ромб всё равно так же». Чётные проходы GIF 526–781 — тот же узор дважды со сдвигом на клетку (обе шахматки
             заняты): так нарисован сам GIF. Переключатель «шахматка»: вершины (по умолчанию) / вторая / обе — гасит клетки другой
             чётности на холсте, в ленте кадров и в PNG; с одной шахматкой и «вплотную» — чистая ромбовая сетка.
     v0.019: по снимку «🔍 Крупно» Треугольника — «неправильно режет ромбы, смотри как в Треугольнике все норм». Ромб был
             полуоткрытым: брал верхние два ребра, а нижние и нижнюю вершину отдавал соседям — s строк вместо s + 1, низ срезан.
             Теперь ромб замкнутый, как в Треугольнике: строки 0 … s, все четыре ребра свои, соседи делят общее ребро; нижний ряд
             ромбов — только если нижняя вершина в кадре (у 1025 × 530 ромбов 64 — 105, как в «Сводке»).
     v0.020: по снимкам ромба 4 — «квадраты и ромбы вплотную — тут нужно только ромбы, почему вместе с квадратами? Вот так надо, как в
             Треугольнике». Всё вокруг ромба в его рамке заливалось серой щелью раскладки, а щели у форм клеток рисуются квадратами
             поверх — вокруг ромба стояли серые квадраты и обрезали крайние ромбы. Теперь вокруг ромбов чёрный фон (и в ленте, и в GIF
             нарезки), квадратами он не рисуется; сцене дано поле в клетку — ромбы на вершинах не режет край холста. -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zerkalius Просмотр GIF — v0.020</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  body { margin: 0; background: #0b0c10; color: #d7e1eb; font: 13px/1.35 'Roboto Mono', Consolas, monospace; user-select: none; }
  h1 { margin: 0; font-size: 16px; color: #ffcc00; font-weight: bold; }
  .wrap { display: grid; grid-template-columns: 240px 1fr 280px; gap: 8px; height: 100vh; padding: 8px; }
  .panel { background: #15171e; border: 1px solid #2c303a; border-radius: 5px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  .item { padding: 5px 6px; border: 1px solid #2c303a; border-radius: 4px; background: #1c1f28; cursor: pointer; font-size: 11px; }
  .item.on { border-color: #ffcc00; background: #2a2412; }
  .item.insel { box-shadow: inset 3px 0 0 #22d3ee; }
  .item b { color: #ffcc00; font-weight: normal; }
  .item .sub { color: #8a94a6; }
  .item .row { display: flex; gap: 4px; align-items: center; }
  .item .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .item input[type=checkbox] { margin: 0; accent-color: #22d3ee; cursor: pointer; }
  button, select, input[type=number] { font: inherit; font-size: 12px; background: #202430; color: #d7e1eb; border: 1px solid #3a3f4c; border-radius: 3px; padding: 3px 7px; }
  button { cursor: pointer; }
  button:hover { border-color: #ffcc00; }
  button.big { font-size: 15px; padding: 3px 10px; }
  button.on { background: #2a2412; border-color: #ffcc00; color: #ffcc00; }
  button.mini { padding: 0 5px; font-size: 11px; }
  input[type=number] { width: 64px; }
  .stage { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; position: relative; }
  /* v0.016: при ◇ Резать — размеры ромба поверх холста; при «по одному» — лента кадров ромба под холстом */
  #rSizeBar { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 5; display: none; gap: 3px; padding: 4px; background: rgba(11,12,16,0.85); border: 1px solid #2c303a; border-radius: 4px; }
  #rSizeBar button { padding: 2px 8px; font-size: 12px; min-width: 34px; font-variant-numeric: tabular-nums; }
  #rStrip { display: none; gap: 4px; overflow-x: auto; overflow-y: hidden; flex: none; height: 84px; padding: 4px; background: #07080b; border: 1px solid #2c303a; border-radius: 4px; align-items: flex-start; }
  #rStrip .rth { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; padding: 2px; border: 1px solid transparent; border-radius: 3px; }
  #rStrip .rth.now { border-color: #ffcc00; background: #2a2412; }
  #rStrip canvas { display: block; image-rendering: pixelated; background: #10121a; }
  #rStrip span { font-size: 9px; color: #8a94a6; font-variant-numeric: tabular-nums; }
  #rStrip .rth.now span { color: #ffcc00; }
  /* v0.002: картинка по центру, а если крупнее окна — прокрутка (margin:auto вместо центровки флексом — иначе левый край уходит) */
  .view { flex: 1; min-height: 0; background: #000; border: 1px solid #2c303a; border-radius: 5px; overflow: auto; display: flex; position: relative; cursor: grab; }
  .view.pan { cursor: grabbing; }
  .view.drop { outline: 2px dashed #22d3ee; outline-offset: -6px; }
  #cv { image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: auto; flex: none; }
  .bar { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
  .bar .sp { flex: 1; }
  #pos { flex: 1; min-width: 120px; accent-color: #ffcc00; }
  /* v0.003, «текст прыгает — название файла в сторонку»: счётчик и имя — постоянной ширины, ползунок не дёргается */
  .num { color: #ffcc00; flex: 0 0 auto; width: 30ch; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .numName { color: #8a94a6; flex: 0 0 auto; width: 38ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab { color: #22d3ee; }
  .tot { color: #8a94a6; font-size: 11px; }
  .lbl { color: #8a94a6; font-size: 11px; }
  .sel { color: #22d3ee; }
  input[type=file] { display: none; }
  /* v0.007: полоска-график дыр по кадрам */
  #graph { width: 100%; height: 34px; display: none; background: #07080b; border: 1px solid #2c303a; border-radius: 3px; cursor: pointer; }
  @media (max-width: 900px) { .wrap { grid-template-columns: 1fr; height: auto; } .view { height: 60vh; } }
</style>
</head>
<body>
<div class="wrap">
  <div class="panel">
    <h1 id="appTitle">Просмотр GIF <span style="color:#8a94a6; font-size:11px;">v0.020</span></h1>
    <div class="bar">
      <button id="openBtn" title="Открыть один или несколько GIF (их можно и просто бросить на страницу)">📂 Открыть GIF</button>
      <input type="file" id="file" accept="image/gif,.gif" multiple>
    </div>
    <div class="lbl">Открытые <span class="sel" title="Галка у GIF — в набор">· ☑ — в набор</span></div>
    <div class="list" id="gifs"></div>
    <div class="lbl sel">Набор</div>
    <div class="bar">
      <select id="laySel" title="Как показывать набор (галки у GIF): один — только выбранный GIF; остальные — все GIF набора разом, кадр в кадр">
        <option value="one" selected>▭ один GIF</option>
        <option value="row">⇢ в ряд</option>
        <option value="col">⇣ столбиком</option>
        <option value="grid">▦ сеткой</option>
        <option value="tri">△ треугольником</option>
        <option value="rhomb">◇ ромбом</option>
      </select>
      <input type="number" id="laySize" min="0" max="16" step="1" value="0" title="Размер треугольника или ромба — рядов (0 — сколько надо, чтобы поместился весь набор); клетки заполняются GIF набора по кругу" style="width:52px;">
    </div>
    <div class="bar">
      <button id="selAllBtn" class="mini" title="Все открытые — в набор">☑ все</button>
      <button id="selNoneBtn" class="mini" title="Снять набор">☐ никого</button>
      <button id="layGifBtn" class="mini" title="Скачать раскладку набора одним GIF — все кадры с выбранным шагом">💾 раскладку GIF</button>
    </div>
    <!-- v0.008: нарезка кадра по сетке ромбов -->
    <div class="lbl sel">◇ Нарезка по ромбам</div>
    <div class="bar">
      <button id="rcutBtn" title="Резать кадр по сетке ромбов от вершины треугольника — вкл / выкл (GIF или склейка; с раскладкой набора — нет)">◇ Резать</button>
      <select id="rcutSize" title="Размер ромба — строк (px) кадра. «Все» — группы ромбов одного размера играют по очереди: весь фильм ромбами одного размера, потом следующего">
        <option value="up" selected>все: мелкие → крупные</option>
        <option value="down">все: крупные → мелкие</option>
        <option value="2">ромб 2</option>
        <option value="4">ромб 4</option>
        <option value="8">ромб 8</option>
        <option value="16">ромб 16</option>
        <option value="32">ромб 32</option>
        <option value="64">ромб 64</option>
        <option value="128">ромб 128</option>
        <option value="256">ромб 256</option>
        <option value="512">ромб 512</option>
      </select>
    </div>
    <div class="bar">
      <select id="rcutLay" title="Как разложить группу ромбов: на своих местах, раздвинутые зазором; в строку по порядку (ряд за рядом, слева направо); сеткой; по одному — каждый ромб своим фильмом, по очереди (двойной щелчок по ромбу в группе — он один)">
        <option value="place" selected>на местах</option>
        <option value="line">в строку</option>
        <option value="grid">сеткой</option>
        <option value="one">по одному ромбу</option>
      </select>
      <input type="number" id="rcutGap" min="0" max="64" step="1" value="4" title="Зазор между ромбами, px" style="width:46px;"><span class="lbl">px</span>
      <button id="rcutGifBtn" class="mini" title="Скачать нарезку одним GIF — всю ленту, с шагом и чётностью">💾 GIF</button>
    </div>
    <div class="bar">
      <button id="rPrevBtn" class="mini" title="По одному: предыдущий ромб, тот же кадр (PageUp)">◇◀</button>
      <button id="rNextBtn" class="mini" title="По одному: следующий ромб, тот же кадр (PageDown)">▶◇</button>
      <button id="rOneGifBtn" class="mini" title="Сохранить фильм этого ромба одним GIF (с шагом и чётностью; мелкий ромб — крупнее, до 256 px)">💾 ромб</button>
    </div>
  </div>

  <div class="stage">
    <div id="rSizeBar" title="Размер ромба: щелчок — в центре один ромб этого размера, внизу — его кадры подряд"></div>
    <div class="view" id="view" title="Колесо — масштаб к курсору, тянуть мышью — двигать; сюда можно бросить GIF"><canvas id="cv" width="1" height="1"></canvas></div>
    <div id="rStrip" title="Кадры этого ромба подряд: щелчок — к кадру; при игре текущий подсвечен"></div>
    <div class="bar">
      <button class="big" id="firstBtn" title="К первому кадру (Home)">⏮</button>
      <button class="big" id="prevBtn" title="Назад на шаг (←; Shift+← — на один кадр)">◀</button>
      <button class="big" id="playBtn" title="Играть / пауза (пробел)">▶</button>
      <button class="big" id="nextBtn" title="Вперёд на шаг (→; Shift+→ — на один кадр)">▶▶</button>
      <button class="big" id="lastBtn" title="К последнему кадру (End)">⏭</button>
      <select id="stepSel" title="Шаг: листать и играть через сколько кадров">
        <option value="1">каждый кадр</option>
        <option value="2">через 2</option>
        <option value="4">через 4</option>
        <option value="8">через 8</option>
        <option value="16">через 16</option>
      </select>
      <select id="parSel" title="Какие кадры: все, только нечётные (1, 3, 5 …) или только чётные (2, 4, 6 …) — листать, играть и класть в склейку">
        <option value="all" selected>все кадры</option>
        <option value="odd">нечётные</option>
        <option value="even">чётные</option>
      </select>
      <span class="lbl">мс</span><input type="number" id="msInp" min="10" max="5000" step="10" value="100" title="Сколько миллисекунд держать кадр при игре">
      <button id="revBtn" title="Играть назад">⇆</button>
      <button id="loopBtn" class="on" title="По кругу: дошёл до конца — снова с начала">🔁</button>
      <select id="zoomSel" title="Масштаб картинки (или колесом над ней)">
        <option value="fit" selected>вписать</option>
        <option value="1">×1</option><option value="2">×2</option><option value="3">×3</option><option value="4">×4</option><option value="6">×6</option><option value="8">×8</option>
        <option value="custom" disabled>×?</option>
      </select>
      <select id="cellShape" autocomplete="off" title="Форма клеток на экране: ромбы — каждый вписан в свою клетку, как на холсте Треугольника; ромбы вплотную — соседи по диагонали смыкаются рёбрами (точки вне шахматки — узлами); круги — в своей клетке; квадраты — как в самом GIF. Видно при увеличении; в GIF-файлы идут исходные пиксели">
        <option value="rhi" selected>◆ ромбы</option>
        <option value="rh">◆ ромбы вплотную</option>
        <option value="ci">● круги</option>
        <option value="sq">▪ квадраты</option>
      </select>
      <select id="latSel" autocomplete="off" title="Какие клетки показывать. В чётных кадрах GIF 526–781 узор нарисован дважды со сдвигом на клетку — заняты обе шахматки, и ромбы налезают друг на друга. Шахматка вершины — клетки той чётности (x + y), что вершина треугольника; вторая — остальные">
        <option value="a" selected>◇ шахматка вершины</option>
        <option value="b">◆ вторая шахматка</option>
        <option value="both">▦ обе шахматки</option>
      </select>
      <button id="zeroBtn" class="on" title="Нули внутри картинки — тусклыми клетками той же формы">0</button>
      <button id="gridBtn" title="Обводка клеток — тонкая линия вокруг каждой клетки: ромба, квадрата, круга (видно при увеличении)">▢</button>
      <input type="color" id="gridColor" value="#56627a" title="Цвет обводки клеток" style="width:28px; height:24px; padding:1px; background:#202430; border:1px solid #3a3f4c; border-radius:3px; cursor:pointer;">
      <button id="pngBtn" title="Скачать то, что на экране (кадр или раскладку), картинкой PNG — с формой клеток">🖼 PNG</button>
    </div>
    <div class="bar">
      <input type="range" id="pos" min="0" max="0" value="0" title="Кадр">
      <input type="number" id="frInp" min="1" max="1" step="1" value="1" title="Кадр № — набрать и Enter (или стрелками поля)">
      <span class="num" id="num">—</span>
      <span class="numName" id="numName"></span>
    </div>
    <canvas id="graph" height="34" title="Доля пустых ромбов по кадрам: нечётные — жёлтым, чётные — голубым; щелчок — к кадру"></canvas>
    <div class="bar">
      <button id="aBtn" title="Начало участка — этот кадр ( [ )">[ с</button>
      <button id="bBtn" title="Конец участка — этот кадр ( ] )">по ]</button>
      <span class="ab" id="abTxt">участок: —</span>
      <span class="sp"></span>
      <button id="addBtn" title="Положить участок в склейку — с выбранным шагом (Enter)">➕ В склейку</button>
    </div>
    <!-- v0.005: строчная прокрутка сцены по кругу -->
    <div class="bar">
      <button id="scrBtn" title="Прокрутка сцены по кругу — вкл / выкл (кадры при этом играют и листаются как обычно)">⇅ Прокрутка</button>
      <select id="scrAxis" title="Ось прокрутки: по строкам, по столбцам или по диагонали — вдоль рёбер ромбов">
        <option value="rows" selected>≡ по строкам</option>
        <option value="cols">‖ по столбцам</option>
        <option value="diagR">↘ по диагонали</option>
        <option value="diagL">↙ по диагонали</option>
      </select>
      <select id="scrDir" title="Куда крутить: вперёд (вниз / вправо / по диагонали вниз), назад или туда-сюда">
        <option value="down" selected>→ вперёд</option>
        <option value="up">← назад</option>
        <option value="both">⇄ туда-сюда</option>
      </select>
      <select id="scrCut" title="Нарезка: полосы шириной в прыжок, поперёк движения">
        <option value="all" selected>целиком</option>
        <option value="counter">полосы встречно</option>
        <option value="stairs">полосы лесенкой</option>
      </select>
      <select id="scrStep" title="Прыжок — сколько строк: размером ромба или треугольника">
        <option value="1">прыжок 1 строка</option>
        <option value="2">2 строки</option>
        <option value="4">4 строки</option>
        <option value="8" selected>8 — ромб / △ 8</option>
        <option value="16">16 — ромб / △ 16</option>
        <option value="32">32 — ромб / △ 32</option>
        <option value="64">64 — ромб / △ 64</option>
        <option value="128">128 — ромб / △ 128</option>
        <option value="256">256 — ромб / △ 256</option>
        <option value="512">512 — ромб / △ 512</option>
      </select>
      <span class="lbl">строка</span><input type="number" id="scrPx" min="1" max="32" step="1" value="1" title="Сколько пикселей GIF в одной строке текста (у GIF из Code клетка бывает 2–4 px)" style="width:46px;"><span class="lbl">px</span>
      <span class="lbl">размах</span><input type="number" id="scrAmp" min="1" max="4096" step="1" value="8" title="Туда-сюда: сколько прыжков в одну сторону, потом обратно" style="width:56px;">
      <input type="range" id="scrSpeed" min="0" max="1000" value="246" title="Скорость: прыжков в секунду, от 1 до 1 000 000 (вправо — быстрее)" style="width:140px; accent-color:#22d3ee;">
      <span class="lbl" id="scrSpeedVal" style="display:inline-block; width:15ch; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;">—</span>
      <button id="scrUpBtn" class="mini" title="Прыжок вверх вручную (↑)">▲</button>
      <button id="scrDnBtn" class="mini" title="Прыжок вниз вручную (↓)">▼</button>
      <button id="scrZeroBtn" class="mini" title="Сдвиг — в ноль">0</button>
      <span class="sel" id="scrVal" style="display:inline-block; width:20ch; white-space:nowrap; font-variant-numeric:tabular-nums;">сдвиг 0</span>
    </div>
  </div>

  <div class="panel">
    <!-- v0.007: разбор на ромбы -->
    <div class="lbl">◇ Разбор на ромбы</div>
    <div class="bar">
      <button id="rombBtn" title="Разобрать выбранный GIF: в каждом кадре — доля пустых ромбов; GIF делится на участки отдельно по нечётным и чётным кадрам (ромб — пока ромбы растут, сброс — новый ромб, между ними — шум) и участки кладутся в склейку">◇ Разобрать</button>
      <input type="number" id="rombHole" min="3" max="99" step="2" value="15" title="Дыра — от скольких px в поперечнике чёрное место считается ромбом" style="width:46px;"><span class="lbl">px</span>
    </div>
    <div class="bar">
      <select id="rombWhat" title="Какие участки класть в склейку">
        <option value="romb" selected>только ромбы</option>
        <option value="all">весь GIF: ромбы и шум</option>
        <option value="noise">только шум</option>
      </select>
      <select id="rombPar" title="Участки из нечётных кадров, из чётных или из тех и других">
        <option value="both" selected>чёт и нечёт</option>
        <option value="odd">нечётные</option>
        <option value="even">чётные</option>
      </select>
    </div>
    <div class="lbl">Склейка</div>
    <div class="list" id="segs"></div>
    <div class="tot" id="segTot">пусто</div>
    <div class="bar">
      <select id="sortSel" title="Переставить участки склейки">
        <option value="" selected>⇅ сортировать…</option>
        <option value="order">по порядку</option>
        <option value="odd">нечётные, потом чётные</option>
        <option value="even">чётные, потом нечётные</option>
        <option value="long">длинные вперёд</option>
        <option value="short">короткие вперёд</option>
        <option value="big">крупные ромбы вперёд</option>
        <option value="small">мелкие ромбы вперёд</option>
        <option value="kind">ромбы, потом шум</option>
        <option value="rev">наоборот</option>
        <option value="mix">вперемешку</option>
      </select>
    </div>
    <div class="bar">
      <button id="showMontBtn" title="Смотреть склейку в просмотре (ещё раз — вернуться к GIF)">▶ Смотреть склейку</button>
    </div>
    <div class="bar">
      <span class="lbl">мс на кадр</span><input type="number" id="outMs" min="20" max="5000" step="10" value="100" title="Задержка кадра в скачанном GIF (склейка и раскладка)">
      <button id="saveBtn" title="Собрать склейку одним GIF и скачать">💾 Скачать GIF</button>
    </div>
    <div class="bar">
      <button id="clearBtn" title="Убрать все участки из склейки">🧹 Очистить</button>
    </div>
  </div>
</div>

<script>
/* ---------- разбор GIF ---------- */
let GIF_ID = 0;   // v0.005: у каждого открытого GIF свой номер — для кэша картинки сцены
function lzwDecode(minSize, data, n) {
  const out = new Uint8Array(n), clear = 1 << minSize, eoi = clear + 1;
  const prefix = new Int16Array(4096), suffix = new Uint8Array(4096), first = new Uint8Array(4096), stack = new Uint8Array(4097);
  for (let i = 0; i < clear; i++) { prefix[i] = -1; suffix[i] = i; first[i] = i; }
  let size = minSize + 1, mask = (1 << size) - 1, next = eoi + 1, prev = -1, cur = 0, bits = 0, dp = 0, op = 0;
  while (op < n) {
    while (bits < size) { if (dp >= data.length) return out; cur |= data[dp++] << bits; bits += 8; }
    const code = cur & mask; cur >>>= size; bits -= size;
    if (code === clear) { size = minSize + 1; mask = (1 << size) - 1; next = eoi + 1; prev = -1; continue; }
    if (code === eoi) break;
    if (prev === -1) { out[op++] = suffix[code]; prev = code; continue; }
    let c = code, sp = 0;
    if (code >= next) { stack[sp++] = first[prev]; c = prev; }
    while (c >= clear) { stack[sp++] = suffix[c]; c = prefix[c]; }
    stack[sp++] = suffix[c];
    while (sp > 0 && op < n) out[op++] = stack[--sp];
    if (next < 4096) { prefix[next] = prev; suffix[next] = suffix[c]; first[next] = first[prev]; next++; if (next > mask && size < 12) { size++; mask = (1 << size) - 1; } }
    prev = code;
  }
  return out;
}
function deinterlace(idx, w, h) {
  const out = new Uint8Array(w * h); let r = 0;
  for (const [s0, st] of [[0, 8], [4, 8], [2, 4], [1, 2]]) for (let y = s0; y < h; y += st) { out.set(idx.subarray(r * w, r * w + w), y * w); r++; }
  return out;
}
// кадры — готовые картинки: номера цветов общей таблицы этого GIF (0 — фон, чёрный), по пикселю
function parseGif(buf, name) {
  const b = new Uint8Array(buf); let p = 0;
  const u8 = () => b[p++], u16 = () => { const v = b[p] | (b[p + 1] << 8); p += 2; return v; };
  if (String.fromCharCode(b[0], b[1], b[2], b[3]) !== 'GIF8') throw new Error('это не GIF');
  p = 6; const W = u16(), H = u16(), fl = u8(); u8(); u8();
  let gct = null; if (fl & 0x80) { const n = 2 << (fl & 7); gct = b.subarray(p, p + n * 3); p += n * 3; }
  const cols = [[0, 0, 0]], key = new Map([[0, 0]]);
  const canvas = new Uint8Array(W * H), frames = [], delays = [];
  let gce = { delay: 10, disp: 0, tr: -1 };
  while (p < b.length) {
    const t = u8();
    if (t === 0x21) {
      const lab = u8();
      if (lab === 0xF9) { u8(); const f = u8(), d = u16(), ti = u8(); u8(); gce = { delay: d, disp: (f >> 2) & 7, tr: (f & 1) ? ti : -1 }; }
      else { let n; while ((n = u8())) p += n; }
    } else if (t === 0x2C) {
      const x = u16(), y = u16(), w = u16(), h = u16(), f = u8();
      let pal = gct; if (f & 0x80) { const n = 2 << (f & 7); pal = b.subarray(p, p + n * 3); p += n * 3; }
      const minSize = u8(), chunks = []; let tot = 0, n;
      while ((n = u8())) { chunks.push(b.subarray(p, p + n)); tot += n; p += n; }
      const data = new Uint8Array(tot); let o = 0; for (const c of chunks) { data.set(c, o); o += c.length; }
      let idx = lzwDecode(minSize, data, w * h); if (f & 0x40) idx = deinterlace(idx, w, h);
      const map = new Int16Array(256).fill(-1);
      const saved = gce.disp === 3 ? canvas.slice() : null;
      for (let yy = 0; yy < h; yy++) {
        const Y = y + yy; if (Y >= H) break;
        for (let xx = 0; xx < w; xx++) {
          const X = x + xx; if (X >= W) break;
          const pi = idx[yy * w + xx]; if (pi === gce.tr) continue;
          let m = map[pi];
          if (m < 0) {
            const r = pal ? pal[pi * 3] : 0, g = pal ? pal[pi * 3 + 1] : 0, bl = pal ? pal[pi * 3 + 2] : 0, k = (r << 16) | (g << 8) | bl;
            m = key.get(k);
            if (m === undefined) { if (cols.length >= 256) throw new Error('больше 256 цветов — такой GIF не поддерживается'); m = cols.length; cols.push([r, g, bl]); key.set(k, m); }
            map[pi] = m;
          }
          canvas[Y * W + X] = m;
        }
      }
      frames.push(canvas.slice()); delays.push(gce.delay * 10 || 100);
      if (gce.disp === 2) { for (let yy = 0; yy < h; yy++) canvas.fill(0, (y + yy) * W + x, (y + yy) * W + Math.min(W, x + w)); }
      else if (gce.disp === 3 && saved) canvas.set(saved);
      gce = { delay: 10, disp: 0, tr: -1 };
    } else break;
  }
  if (!frames.length) throw new Error('в GIF нет кадров');
  return { id: ++GIF_ID, name, W, H, cols, frames, delays };
}

/* ---------- сборка GIF (тот же LZW, что в Code) ---------- */
function lzwEncode(ix, minSize, tab) {
  const clear = 1 << minSize, eoi = clear + 1, bytes = [];
  tab.fill(-1);
  let size = minSize + 1, next = eoi + 1, cur = 0, bits = 0;
  const emit = c => { cur |= c << bits; bits += size; while (bits >= 8) { bytes.push(cur & 255); cur >>>= 8; bits -= 8; } };
  emit(clear);
  let pre = ix[0];
  for (let i = 1; i < ix.length; i++) {
    const k = ix[i], key = (pre << 8) | k, code = tab[key];
    if (code !== -1) { pre = code; continue; }
    emit(pre);
    if (next === 4096) { emit(clear); tab.fill(-1); next = eoi + 1; size = minSize + 1; }
    else { if (next >= (1 << size)) size++; tab[key] = next++; }
    pre = k;
  }
  emit(pre); emit(eoi);
  if (bits > 0) bytes.push(cur & 255);
  return bytes;
}
function encodeGif(frames, w, h, palette, delayCs) {
  const parts = [], head = [];
  const w16 = (a, v) => a.push(v & 255, (v >> 8) & 255), str = (a, t) => { for (let i = 0; i < t.length; i++) a.push(t.charCodeAt(i)); };
  const bits = Math.max(2, Math.ceil(Math.log2(Math.max(2, palette.length)))), nCol = 1 << bits;
  str(head, 'GIF89a'); w16(head, w); w16(head, h);
  head.push(0x80 | ((bits - 1) << 4) | (bits - 1), 0, 0);
  for (let i = 0; i < nCol; i++) { const c = palette[i] || [0, 0, 0]; head.push(c[0], c[1], c[2]); }
  head.push(0x21, 0xFF, 0x0B); str(head, 'NETSCAPE2.0'); head.push(0x03, 0x01, 0, 0, 0);
  parts.push(Uint8Array.from(head));
  const tab = new Int32Array(1 << 20);
  for (const fr of frames) {
    const a = [0x21, 0xF9, 0x04, 0x04]; w16(a, delayCs); a.push(0, 0, 0x2C); w16(a, 0); w16(a, 0); w16(a, w); w16(a, h); a.push(0, bits);
    const data = lzwEncode(fr, bits, tab);
    for (let i = 0; i < data.length; i += 255) { const n = Math.min(255, data.length - i); a.push(n); for (let k = 0; k < n; k++) a.push(data[i + k]); }
    a.push(0);
    parts.push(Uint8Array.from(a));
  }
  parts.push(Uint8Array.of(0x3B));
  return new Blob(parts, { type: 'image/gif' });
}
function download(blob, name) { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 3000); }

/* ---------- состояние ---------- */
const $ = id => document.getElementById(id);
const S = { gifs: [], cur: -1, mont: false, segs: [], i: 0, a: null, b: null, playing: false, rev: false, timer: 0, zoom: 'fit', sel: new Set(), zeros: true,
  shift: 0, scr: false, scrDir: 1, scrN: 0, scrAcc: 0, scrLast: 0, scrRaf: 0, offKey: '' };   // v0.005: shift — сдвиг сцены в px (по кругу)
const GAP = 4, GAP_COL = [16, 18, 24];   // v0.002: между клетками раскладки — тёмная щель
// v0.020: вокруг ромбов нарезки — не щель, а фон: на вид чёрный (0, 0, 1), для форм клеток — граница куска, но квадратами поверх не рисуется
const RPAD = 1, OUT_COL = [0, 0, 1], OUT32 = ((255 << 24) | (OUT_COL[2] << 16) | (OUT_COL[1] << 8) | OUT_COL[0]) >>> 0;
const layout = () => $('laySel').value;
const setList = () => S.gifs.map((_, k) => k).filter(k => S.sel.has(k));
const layOn = () => !S.mont && layout() !== 'one' && setList().length > 0;
// последовательность: кадры открытого GIF, склейки — пары [номер GIF, номер кадра]; раскладка — номера кадров 0 … самый длинный
function seq() {   // v0.008: с нарезкой по ромбам — [GIF, кадр, размер ромба]; «все» — весь фильм по каждому размеру подряд
  const base = seqBase(); if (!rcutOn() || !base.length) return base;
  const out = [], L = rcutSizes(base);
  if ($('rcutLay').value === 'one') {
    /* v0.010: по одному — [GIF, кадр, размер, ромб]. v0.016: лента — фильм ОДНОГО ромба (S.rs, S.rq), а не всех подряд: у ромба 2
       их 130 тыс. — «ромбы × кадры» вышло бы 33 млн мест. Соседний — ◇◀ ▶◇; без 🔁 в конце фильма открывается следующий */
    if (!L.includes(S.rs)) { S.rs = L[0]; S.rq = 0; }
    for (const r of base) if ((S.rq || 0) < tileCount(S.gifs[r[0]], S.rs)) out.push([r[0], r[1], S.rs, S.rq || 0]);
    return out;
  }
  for (const s of L) for (const r of base) out.push([r[0], r[1], s]);
  return out;
}
function seqBase() {
  if (S.mont) { const out = []; for (const sg of S.segs) for (let f = sg.a; sg.a <= sg.b ? f <= sg.b : f >= sg.b; f += (sg.a <= sg.b ? sg.st : -sg.st)) out.push([sg.g, f]); return out; }
  if (layOn()) { const n = Math.max(...setList().map(k => S.gifs[k].frames.length)); return Array.from({ length: n }, (_, f) => [-1, f]); }
  const g = S.gifs[S.cur]; if (!g) return [];
  return g.frames.map((_, f) => [S.cur, f]);
}
let SEQ = [];
function refresh() { SEQ = seq(); S.gvals = null; S.i = Math.max(0, Math.min(S.i, SEQ.length - 1)); $('pos').max = Math.max(0, SEQ.length - 1); draw(); lists(); }

/* ---------- раскладка набора (v0.002) ----------
   Клетка — самый большой GIF набора; GIF в клетке по центру. Клетки заполняются GIF набора по порядку и по кругу.
   △ — ряды 1, 2, 3 … R, каждый ряд по центру; ◇ — ряды 1, 2 … m … 2, 1. Размер (рядов) 0 — наименьший, куда влезает набор. */
function geom() {
  const L = setList(), n = L.length, cw = Math.max(...L.map(k => S.gifs[k].W)), ch = Math.max(...L.map(k => S.gifs[k].H));
  const mode = layout(), sz = parseInt($('laySize').value, 10) || 0;
  let rows = [];   // число клеток в каждом ряду
  if (mode === 'row') rows = [n];
  else if (mode === 'col') rows = Array(n).fill(1);
  else if (mode === 'grid') { const c = Math.ceil(Math.sqrt(n)); for (let left = n; left > 0; left -= c) rows.push(Math.min(c, left)); }
  else if (mode === 'tri') { let R = sz; if (!R) { R = 1; while (R * (R + 1) / 2 < n) R++; } for (let r = 1; r <= R; r++) rows.push(r); }
  else if (mode === 'rhomb') { let m = sz; if (!m) { m = 1; while (m * m < n) m++; } for (let r = 1; r <= m; r++) rows.push(r); for (let r = m - 1; r >= 1; r--) rows.push(r); }
  const maxRow = Math.max(...rows), W = maxRow * cw + (maxRow - 1) * GAP, H = rows.length * ch + (rows.length - 1) * GAP;
  const cells = []; let q = 0;
  rows.forEach((cnt, r) => {
    const rw = cnt * cw + (cnt - 1) * GAP, x0 = Math.floor((W - rw) / 2), y = r * (ch + GAP);
    for (let c = 0; c < cnt; c++) { const g = L[q % n]; q++; const G = S.gifs[g]; cells.push({ g: g, x: x0 + c * (cw + GAP) + Math.floor((cw - G.W) / 2), y: y + Math.floor((ch - G.H) / 2), cx: x0 + c * (cw + GAP), cy: y, cw: cw, ch: ch }); }
  });
  return { W, H, cells };
}

/* ---------- нарезка по ромбам (v0.008) ----------
   Треугольник GIF: вершина (cx, t), по строке вниз край уходит на k px вбок. Сетка ромбов размера s (строк) — от вершины,
   вдоль рёбер: u = (x − cx) / k + (y − t), v = (y − t) − (x − cx) / k; ромб (i, j) — где u в [i·s, (i + 1)·s], v в [j·s, (j + 1)·s] (v0.019: замкнутый, как в Треугольнике).
   Его верх — (cx + (i − j)·k·s/2, t + (i + j)·s/2), высота s + 1 строк, ширина k·s + 1; ряд ромбов r = i + j — r + 1 штук. Берутся только
   целые ромбы. Вершину и наклон ищем по кадру: цвет клеток — самый частый не чёрный (так подпись «проход … · кадр …» другим
   цветом не мешает), вершина — первая строка с ним, наклон — наибольший полуразмах строки на её глубину. */
const rcutOn = () => !!S.rcut && !layOn();
function rgeoOf(g) {
  if (g.rgeo) return g.rgeo;
  const W = g.W, H = g.H, fr = g.frames[0], cnt = new Uint32Array(g.cols.length);
  for (let p = 0; p < fr.length; p++) cnt[fr[p]]++;
  let c = 1; for (let q = 2; q < cnt.length; q++) if (cnt[q] > cnt[c]) c = q;
  let t = -1, cx = (W - 1) / 2, k = 1;
  for (let y = 0; y < H; y++) {
    let x0 = -1, x1 = -1; const o = y * W;
    for (let x = 0; x < W; x++) if (fr[o + x] === c) { if (x0 < 0) x0 = x; x1 = x; }
    if (x0 < 0) continue;
    if (t < 0) { t = y; cx = (x0 + x1) / 2; continue; }
    if (y - t >= 8) k = Math.max(cx - x0, x1 - cx) / (y - t);   // последняя, самая глубокая строка — точнее всего
  }
  if (t < 0) t = 0;
  const kr = Math.round(k * 4) / 4; if (kr > 0 && Math.abs(kr - k) / kr < 0.03) k = kr;   // почти ровный наклон — ровный
  return (g.rgeo = { t: t, cx: cx, k: Math.max(0.25, k) });
}
const rFits = (g, s) => s <= g.H - 1 - rgeoOf(g).t;   // v0.009: размер ромба — в px кадра, от «строки» прокрутки не зависит; v0.019: s + 1 строк
function rcutSizes(base) {
  const v = $('rcutSize').value, g = S.gifs[base[0][0]];
  if (v !== 'up' && v !== 'down') return [parseInt(v, 10) || 64];
  const L = [16, 32, 64, 128, 256, 512].filter(s => !g || rFits(g, s));
  return v === 'up' ? L : L.reverse();
}
// v0.010: ромбы размера s режутся один раз: у каждого — откуда (пиксель кадра) и где в своей рамке tw × th (loc)
const tileCount = (g, s) => { const R = Math.floor((g.H - 1 - rgeoOf(g).t - s) / (s / 2)); return R < 0 ? 0 : (R + 1) * (R + 2) / 2; };
function tilesOf(g, s) {
  g.rtiles = g.rtiles || new Map(); if (g.rtiles.has(s)) return g.rtiles.get(s);
  const G = rgeoOf(g), W = g.W, H = g.H, hs = s / 2, k = G.k, tw = Math.ceil(s * k) + 1, th = s + 1, e = 1e-6;
  const R = Math.floor((H - 1 - G.t - s) / hs), T = [];
  for (let r = 0; r <= R; r++) for (let i = 0; i <= r; i++) {
    const j = r - i, bx = Math.floor(G.cx + (i - j) * hs * k - hs * k), by = G.t + r * hs, src = [], loc = [];
    for (let yy = 0; yy < th; yy++) {
      const y = by + yy; if (y < 0 || y >= H) continue;
      for (let xx = 0; xx < tw; xx++) {
        const x = bx + xx; if (x < 0 || x >= W) continue;
        const dx = (x - G.cx) / k, dy = y - G.t;
        const u = dx + dy, v = dy - dx;   // v0.019: ромб замкнутый, как в Треугольнике — все четыре ребра и обе вершины свои, соседи делят ребро
        if (u < i * s - e || u > (i + 1) * s + e || v < j * s - e || v > (j + 1) * s + e) continue;
        src.push(y * W + x); loc.push(yy * tw + xx);
      }
    }
    T.push({ i: i, j: j, r: r, bx: bx, by: by, src: Int32Array.from(src), loc: Int32Array.from(loc) });
  }
  const out = { tw: tw, th: th, T: T }; g.rtiles.set(s, out); return out;
}
// карта группы: откуда (пиксель кадра) и куда (пиксель сцены) — для размера, раскладки и зазора; кадр потом кладётся за один проход
function rmap(g, s) {
  const lay = $('rcutLay').value, gap = Math.max(0, parseInt($('rcutGap').value, 10) || 0), key = s + '|' + lay + '|' + gap;
  g.rmaps = g.rmaps || new Map(); if (g.rmaps.has(key)) return g.rmaps.get(key);
  if (g.rmaps.size > 12) g.rmaps.clear();
  const TT = tilesOf(g, s), T = TT.T, tw = TT.tw, th = TT.th;
  if (!T.length) { const M0 = { W: 1, H: 1, n: 0, pos: [], src: new Int32Array(0), dst: new Int32Array(0) }; g.rmaps.set(key, M0); return M0; }
  let pos;   // места ромбов в сцене
  if (lay === 'place') pos = T.map(q => ({ X: q.bx + (q.i - q.j) * gap, Y: q.by + (q.i + q.j) * gap }));
  else {
    const cols = lay === 'grid' ? Math.max(1, Math.ceil(Math.sqrt(T.length * th / tw))) : Math.max(1, Math.floor((g.W + gap) / (tw + gap)));   // v0.009: строка переносится по ширине кадра
    pos = T.map((_, n) => ({ X: (n % cols) * (tw + gap), Y: Math.floor(n / cols) * (th + gap) }));
  }
  // v0.013: ромб встаёт так, чтобы шахматка клеток не сбивалась (x + y — той же чётности, что в кадре)
  pos.forEach((P, n) => { if ((P.X + P.Y - T[n].bx - T[n].by) & 1) P.X += 1; });
  let mx = Infinity, my = Infinity, SW = 0, SH = 0;
  for (const P of pos) { mx = Math.min(mx, P.X); my = Math.min(my, P.Y); }
  for (const P of pos) { P.X -= mx; P.Y -= my; SW = Math.max(SW, P.X + tw); SH = Math.max(SH, P.Y + th); }
  let len = 0; for (const q of T) len += q.src.length;
  const src = new Int32Array(len), dst = new Int32Array(len); let o = 0;
  T.forEach((q, n) => { const P = pos[n]; for (let p = 0; p < q.src.length; p++) { const ly = (q.loc[p] / tw) | 0, lx = q.loc[p] - ly * tw; src[o] = q.src[p]; dst[o++] = (P.Y + ly) * SW + P.X + lx; } });
  const M = { W: SW, H: SH, n: T.length, pos: pos, src: src, dst: dst, par: (((latParOf(g) - mx - my) % 2) + 2) % 2 };
  g.rmaps.set(key, M); return M;
}
// v0.013: чётность шахматки клеток (x + y) — по вершине треугольника; у кадра она одна и та же
const latParOf = g => { const G = rgeoOf(g); return ((Math.round(G.cx) + G.t) % 2 + 2) % 2; };
// что кладётся на сцену для этого места ленты: группа или один ромб
function sceneMap(ref) {
  const g = S.gifs[ref[0]];
  if (ref[3] === undefined) return rmap(g, ref[2]);
  const TT = tilesOf(g, ref[2]), q = TT.T[ref[3]];
  return q ? { W: TT.tw, H: TT.th, n: 1, src: q.src, dst: q.loc, tile: q, of: TT.T.length, par: (((latParOf(g) - q.bx - q.by) % 2) + 2) % 2 } : { W: 1, H: 1, n: 0, src: new Int32Array(0), dst: new Int32Array(0) };
}
function rcutRefresh(keep) {   // пересобрать ленту и встать на тот же кадр (и тот же ромб, если он есть)
  const ref = keep || SEQ[S.i];
  if (ref && ref[3] !== undefined) { S.rs = ref[2]; S.rq = ref[3]; }   // v0.016: ромб ленты «по одному»
  refresh();
  if (!ref) return;
  let k = SEQ.findIndex(r => r[0] === ref[0] && r[1] === ref[1] && r[2] === ref[2] && r[3] === ref[3]);
  if (k < 0) k = SEQ.findIndex(r => r[0] === ref[0] && r[1] === ref[1] && (!ref[2] || r[2] === ref[2]));
  if (k < 0) k = SEQ.findIndex(r => r[0] === ref[0] && r[1] === ref[1]);
  if (k >= 0) { S.i = k; draw(); }
}
$('rcutBtn').addEventListener('click', () => { S.rcut = !S.rcut; $('rcutBtn').classList.toggle('on', S.rcut); rcutRefresh(); });
$('rcutSize').addEventListener('change', () => { S.rq = 0; if (S.rcut) rcutRefresh(); });
$('rcutLay').addEventListener('change', () => {
  const ref = SEQ[S.i]; if (ref && ref[2] && ref[3] === undefined) { S.rs = ref[2]; S.rq = 0; }   // из группы — по одному: тот же размер, первый ромб
  if (S.rcut) rcutRefresh();
});
$('rcutGap').addEventListener('input', () => { if (S.rcut) draw(); });
// по одному: к соседнему ромбу — на тот же кадр
const blk = r => r ? r[0] + '|' + r[2] + '|' + r[3] : '';
function rJump(d) {   // v0.016: следующий / прошлый ромб; за последним — следующий размер (у «всех»), за всеми — снова первый
  const ref = SEQ[S.i]; if (!ref || ref[3] === undefined) return;
  const L = rcutSizes(seqBase()), g = S.gifs[ref[0]];
  let s = ref[2], q = ref[3] + d, si = L.indexOf(s);
  if (q >= tileCount(g, s)) { si = (si + 1) % L.length; s = L[si]; q = 0; }
  else if (q < 0) { si = (si - 1 + L.length) % L.length; s = L[si]; q = Math.max(0, tileCount(g, s) - 1); }
  rcutRefresh([ref[0], ref[1], s, q]);
}
/* v0.016: «при включённой кнопке — сверху на холсте меню всех размеров сразу, ромбы от 2, 4 … до 512 (наибольший — по размеру
   самого GIF); при нажатии — внизу кадр за кадром в строку, а на холсте в центре одна; при игре внизу выделять текущий» */
const rOne = () => rcutOn() && $('rcutLay').value === 'one';
const RS = { barKey: '', stripKey: '', cur: -1, job: 0 };
function rSizeBar() {
  const bar = $('rSizeBar'), ref = SEQ[S.i], g = ref && ref[0] >= 0 ? S.gifs[ref[0]] : null;
  if (!rcutOn() || !g) { bar.style.display = 'none'; RS.barKey = ''; return; }
  bar.style.display = 'flex';
  const on = rOne() ? ref[2] : 0, key = g.id + '|' + on;
  if (key === RS.barKey) return;
  RS.barKey = key; bar.innerHTML = '';
  for (let s = 2; rFits(g, s); s *= 2) {
    const b = document.createElement('button'); b.textContent = s; b.title = 'Ромб ' + s + ' — ' + tileCount(g, s) + ' шт.: в центре — один, внизу — его кадры';
    if (s === on) b.classList.add('on');
    b.addEventListener('click', () => {
      const sel = $('rcutSize'); if (![...sel.options].some(o => o.value === String(s))) sel.add(new Option('ромб ' + s, String(s)));
      sel.value = String(s); $('rcutLay').value = 'one';
      const r = SEQ[S.i]; rcutRefresh([r[0], r[1], s, 0]);
    });
    bar.appendChild(b);
  }
}
function rStrip() {
  const box = $('rStrip'), ref = SEQ[S.i];
  if (!rOne() || !ref || ref[3] === undefined) { if (box.style.display !== 'none') { box.style.display = 'none'; box.innerHTML = ''; } RS.stripKey = ''; return; }
  box.style.display = 'flex';
  const g = S.gifs[ref[0]], w = parWant(), key = [g.id, ref[2], ref[3], SEQ.length, w, SEQ[0][1], $('latSel').value].join('|');
  if (key !== RS.stripKey) {   // новый ромб — лента заново; картинки рисуются кусками, чтобы не подвесить страницу
    RS.stripKey = key; RS.cur = -1; box.innerHTML = '';
    const M = sceneMap(ref), TH = 56, big = M.H > TH, sc = TH / M.H, cw = Math.max(1, Math.round(M.W * sc)), lut = lutOf(g);
    const items = []; SEQ.forEach((r, i) => { if (w === undefined || r[1] % 2 === w) items.push(i); });
    const tmp = big ? document.createElement('canvas') : null; if (tmp) { tmp.width = M.W; tmp.height = M.H; }
    const els = items.map(i => {
      const d = document.createElement('div'); d.className = 'rth'; d.dataset.i = i;
      const c = document.createElement('canvas'); c.width = big ? cw : M.W; c.height = big ? TH : M.H; c.style.width = cw + 'px'; c.style.height = TH + 'px';
      const sp = document.createElement('span'); sp.textContent = '#' + (SEQ[i][1] + 1);
      d.appendChild(c); d.appendChild(sp); d.addEventListener('click', () => go(i, 1)); box.appendChild(d); return c;
    });
    const job = ++RS.job, BK0 = 255 << 24;
    const lv = $('latSel').value, lk = lv === 'both' || M.par === undefined ? -1 : (lv === 'a' ? M.par : 1 - M.par);   // v0.018
    let k = 0;
    const chunk = () => {
      if (job !== RS.job) return;
      const t0 = performance.now();
      while (k < items.length && performance.now() - t0 < 25) {
        const fr = g.frames[SEQ[items[k]][1]], img = new ImageData(M.W, M.H), d32 = new Uint32Array(img.data.buffer);
        d32.fill(BK0);   // v0.020: вокруг ромба — чёрный, как в Треугольнике
        for (let p = 0; p < M.src.length; p++) {   // v0.018: и в ленте — только выбранная шахматка
          const dd = M.dst[p];
          if (lk >= 0) { const yy = (dd / M.W) | 0; if (((dd - yy * M.W + yy) & 1) !== lk) { d32[dd] = BK0; continue; } }
          d32[dd] = lut[fr[M.src[p]]];
        }
        if (big) { tmp.getContext('2d').putImageData(img, 0, 0); const x = els[k].getContext('2d'); x.imageSmoothingEnabled = true; x.drawImage(tmp, 0, 0, cw, TH); }
        else els[k].getContext('2d').putImageData(img, 0, 0);
        k++;
      }
      if (k < items.length) setTimeout(chunk, 0);
    };
    chunk();
  }
  if (RS.cur !== S.i) {   // текущий кадр — подсветить и держать на виду
    RS.cur = S.i;
    const old = box.querySelector('.rth.now'); if (old) old.classList.remove('now');
    const el = box.querySelector('.rth[data-i="' + S.i + '"]');
    if (el) { el.classList.add('now'); const L = el.offsetLeft - box.offsetLeft, R = L + el.offsetWidth; if (L < box.scrollLeft || R > box.scrollLeft + box.clientWidth) box.scrollLeft = L - (box.clientWidth - el.offsetWidth) / 2; }
  }
}
$('rPrevBtn').addEventListener('click', () => rJump(-1));
$('rNextBtn').addEventListener('click', () => rJump(1));
// двойной щелчок по ромбу в группе — он один, по одному, тот же кадр
$('view').addEventListener('dblclick', e => {   // (сам view объявлен ниже — здесь через $)
  const ref = SEQ[S.i]; if (!ref || !ref[2] || ref[3] !== undefined) return;
  const g = S.gifs[ref[0]], M = rmap(g, ref[2]), TT = tilesOf(g, ref[2]), r = cv.getBoundingClientRect();
  const sx = Math.floor((e.clientX - r.left) / r.width * off.width) - RPAD, sy = Math.floor((e.clientY - r.top) / r.height * off.height) - RPAD;
  for (let q = 0; q < M.pos.length; q++) {
    const lx = sx - M.pos[q].X, ly = sy - M.pos[q].Y;
    if (lx < 0 || ly < 0 || lx >= TT.tw || ly >= TT.th || !TT.T[q].loc.includes(ly * TT.tw + lx)) continue;
    $('rcutLay').value = 'one'; rcutRefresh([ref[0], ref[1], ref[2], q]); return;
  }
});
// нарезка — одним GIF: кадры с шагом и чётностью; группы разного размера — по центру общего поля
function rcutGif(refs, name) {
  const used = [...new Set(refs.map(r => r[0]))], U = unify(used);   // v0.020: вокруг ромбов — чёрный
  if (!U) { alert('Вместе больше 256 цветов — одним GIF не собрать'); return; }
  const maps = refs.map(sceneMap);
  const W0 = Math.max(...maps.map(M => M.W)), H0 = Math.max(...maps.map(M => M.H)), sc = Math.max(1, Math.floor(256 / Math.max(W0, H0)));   // мелкий ромб — крупнее, до 256 px
  const OW = W0 * sc, OH = H0 * sc;
  if (refs.length * OW * OH > 4e8) { alert('Слишком большой GIF — возьмите шаг больше или один размер ромба'); return; }
  const frames = refs.map((r, n) => {
    const M = maps[n], fr = S.gifs[r[0]].frames[r[1]], mp = U.maps[r[0]], out = new Uint8Array(OW * OH).fill(U.ex);
    const ox = Math.floor((W0 - M.W) / 2) * sc, oy = Math.floor((H0 - M.H) / 2) * sc;
    for (let p = 0; p < M.src.length; p++) {
      const d = M.dst[p], y = (d / M.W) | 0, x = d - y * M.W, c = mp[fr[M.src[p]]];
      for (let a = 0; a < sc; a++) { const o = (oy + y * sc + a) * OW + ox + x * sc; for (let b = 0; b < sc; b++) out[o + b] = c; }
    }
    return out;
  });
  const cs = Math.max(2, Math.round((parseInt($('outMs').value, 10) || 100) / 10));
  download(encodeGif(frames, OW, OH, U.pal, cs), name + '-' + frames.length + '-kadrov.gif');
}
const rThin = refs => { const w = parWant(), st = w === undefined ? step() : Math.max(1, stepEff() >> 1); return refs.filter(r => w === undefined || r[1] % 2 === w).filter((_, n) => n % st === 0); };
$('rcutGifBtn').addEventListener('click', () => {
  if (!rcutOn() || !SEQ.length) { alert('Включите ◇ Резать'); return; }
  const sz = $('rcutSize').value;
  rcutGif(rThin(SEQ), 'Zerkalius-romby-narezka-' + (sz === 'up' || sz === 'down' ? 'vse-' + sz : sz) + ($('rcutLay').value === 'one' ? '-po-odnomu' : ''));
});
// v0.010: сохранить фильм одного ромба — только по кнопке
$('rOneGifBtn').addEventListener('click', () => {
  const ref = SEQ[S.i]; if (!ref || ref[3] === undefined) { alert('Выберите «по одному ромбу» или дважды щёлкните ромб в группе'); return; }
  const b = blk(ref), q = tilesOf(S.gifs[ref[0]], ref[2]).T[ref[3]];
  rcutGif(rThin(SEQ.filter(r => blk(r) === b)), 'Zerkalius-romb-' + ref[2] + '-n' + (ref[3] + 1) + '-ryad' + (q.r + 1));
});

/* ---------- показ ---------- */
const cv = $('cv'), ctx = cv.getContext('2d'), off = document.createElement('canvas'), octx = off.getContext('2d');
const lutOf = g => g.lut || (g.lut = Uint32Array.from(g.cols.map(c => (255 << 24) | (c[2] << 16) | (c[1] << 8) | c[0])));
function draw() {
  const ref = SEQ[S.i];
  if (!ref) { $('num').textContent = '—'; cv.width = 1; cv.height = 1; S.offKey = ''; return; }
  let W, H, label, nameTxt = '', par;   // v0.003: nameTxt — имя файла (набор) — в своё поле, в стороне от счётчика; v0.013: par — чётность шахматки
  // v0.005: картинка сцены строится заново, только когда сменился кадр или набор; прокрутка лишь сдвигает её при выводе
  const gid = k => S.gifs[k] ? S.gifs[k].id : 0;
  const key = JSON.stringify([ref[0] === -1 ? -1 : gid(ref[0]), ref[1], ref[2] || 0, ref[3] === undefined ? -1 : ref[3], S.mont, layOn() ? [layout(), $('laySize').value, setList().map(gid)] : 0,
    ref[2] ? [$('rcutLay').value, $('rcutGap').value] : 0, shapeNow(), !!S.zeros, !!S.grid, S.grid ? $('gridColor').value : 0, $('latSel').value]);
  if (key === S.offKey) { blit(); return; }
  S.offKey = key;
  if (ref[2]) {   // v0.008: ромбы одного размера — группой; v0.010: или один ромб
    const g = S.gifs[ref[0]], M = sceneMap(ref), fr = g.frames[ref[1]], lut = lutOf(g); W = M.W + 2 * RPAD; H = M.H + 2 * RPAD; par = M.par;   // v0.020: поле в клетку — ромбы на краях не режутся рамкой
    if (off.width !== W || off.height !== H) { off.width = W; off.height = H; }
    const img = octx.createImageData(W, H), d32 = new Uint32Array(img.data.buffer);
    d32.fill(OUT32);   // v0.020: было серой щелью — у форм клеток она ложилась квадратами вокруг ромба и обрезала крайние
    const src = M.src, dst = M.dst; for (let p = 0; p < src.length; p++) { const y = (dst[p] / M.W) | 0; d32[(y + RPAD) * W + dst[p] - y * M.W + RPAD] = lut[fr[src[p]]]; }
    octx.putImageData(img, 0, 0);
    label = (S.mont ? 'склейка ' : '') + 'кадр ' + (S.i + 1) + ' / ' + SEQ.length + ' · ' + g.delays[ref[1]] + ' мс';
    nameTxt = (M.tile ? '◇ ' + ref[2] + ' · ромб ' + (ref[3] + 1) + ' / ' + M.of + ' · ряд ' + (M.tile.r + 1) : '◇ ' + ref[2] + ' × ' + M.n)
      + ' · #' + (ref[1] + 1) + (S.mont ? ' · ' + g.name.replace(/\.gif$/i, '') : '');
  } else if (ref[0] === -1) {
    const G = geom(); W = G.W; H = G.H;
    if (off.width !== W || off.height !== H) { off.width = W; off.height = H; }
    const img = octx.createImageData(W, H), d32 = new Uint32Array(img.data.buffer);
    d32.fill((255 << 24) | (GAP_COL[2] << 16) | (GAP_COL[1] << 8) | GAP_COL[0]);
    for (const c of G.cells) {
      const g = S.gifs[c.g], lut = lutOf(g), fr = g.frames[ref[1] % g.frames.length], bl = lut[0];
      for (let y = 0; y < c.ch; y++) d32.fill(bl, (c.cy + y) * W + c.cx, (c.cy + y) * W + c.cx + c.cw);
      for (let y = 0; y < g.H; y++) { const o = (c.y + y) * W + c.x, s = y * g.W; for (let x = 0; x < g.W; x++) d32[o + x] = lut[fr[s + x]]; }
    }
    octx.putImageData(img, 0, 0);
    label = 'кадр ' + (S.i + 1) + ' / ' + SEQ.length; nameTxt = 'набор ' + setList().length + ' GIF · ' + G.cells.length + ' клеток';
  } else {
    const g = S.gifs[ref[0]], fr = g.frames[ref[1]]; W = g.W; H = g.H; par = latParOf(g);
    if (off.width !== W || off.height !== H) { off.width = W; off.height = H; }
    const img = octx.createImageData(W, H), d32 = new Uint32Array(img.data.buffer), lut = lutOf(g);
    for (let k = 0; k < fr.length; k++) d32[k] = lut[fr[k]];
    octx.putImageData(img, 0, 0);
    label = (S.mont ? 'склейка ' : '') + 'кадр ' + (S.i + 1) + ' / ' + SEQ.length + ' · ' + g.delays[ref[1]] + ' мс';
    nameTxt = S.mont ? g.name.replace(/\.gif$/i, '') + ' #' + (ref[1] + 1) : '';
  }
  S.label = label; S.nameTxt = nameTxt;
  // v0.018: одна шахматка — клетки другой чётности гасятся (чёрным); щели раскладки не трогаются
  if (par !== undefined && $('latSel').value !== 'both') {
    const keep = $('latSel').value === 'a' ? par : 1 - par, im = octx.getImageData(0, 0, W, H), d = new Uint32Array(im.data.buffer);
    const BK = ((255 << 24) >>> 0), GP = ((255 << 24) | (GAP_COL[2] << 16) | (GAP_COL[1] << 8) | GAP_COL[0]) >>> 0;
    for (let y = 0; y < H; y++) for (let x = ((keep + 1 + y) & 1), o = y * W; x < W; x += 2) { const c = d[o + x]; if (c !== GP && c !== OUT32) d[o + x] = BK; }
    octx.putImageData(im, 0, 0);
  }
  if (useShp()) { buildShapes(new Uint32Array(octx.getImageData(0, 0, W, H).data.buffer), W, H, par); S.shapeKey = key; }   // v0.011
  blit();
}
/* ---------- форма клеток (v0.011) ----------
   Сцена перерисовывается в m раз крупнее (m — от 3 до 12, чтобы вышло не больше ~12 млн точек), каждая клетка — штампом формы:
   ◆ ромб радиусом m вокруг центра клетки (у шахматной сетки треугольника соседи по диагонали смыкаются рёбрами),
   ◇ ромб и ● круг — вписанные в свою клетку. Нули — чёрные клетки внутри картинки: в строке между первой и последней светлой
   (по кускам между щелями раскладки), той же чётности x + y, что первая светлая, — тусклым штампом. Щели раскладки — квадратами,
   поверх, чтобы ромбы на краях резались по рамке. Прокрутка и масштаб берут эту картинку вместо исходной. */
const offS = document.createElement('canvas'), osctx = offS.getContext('2d');
const U32 = (r, g, b) => ((255 << 24) | (b << 16) | (g << 8) | r) >>> 0;
const BLK = U32(0, 0, 0), GAPC = U32(GAP_COL[0], GAP_COL[1], GAP_COL[2]), ZEROC = U32(30, 34, 44);
const shapeNow = () => $('cellShape').value;
const shapeM = (W, H) => Math.max(3, Math.min(12, Math.floor(Math.sqrt(12e6 / (W * H)))));
const STAMPS = {};
const inShape = (shape, m, ox, oy) => {   // точка (ox, oy) от левого верха клетки — внутри формы?
  const px = ox + 0.5 - m / 2, py = oy + 0.5 - m / 2;
  return shape === 'rh' ? Math.abs(px) + Math.abs(py) <= m - 0.75
    : shape === 'rhi' ? Math.abs(px) + Math.abs(py) <= Math.max(0.5, m / 2 - 0.25)
    : shape === 'sq' ? Math.abs(px) < m / 2 && Math.abs(py) < m / 2
    : px * px + py * py <= Math.pow(Math.max(0.5, m / 2 - 0.3), 2);
};
function stampOf(shape, m) {   // штамп строками: [dy, x0, x1) от левого верха клетки
  const key = shape + m; if (STAMPS[key]) return STAMPS[key];
  const out = [];
  for (let oy = -m; oy < 2 * m; oy++) {
    let a = null, b = null;
    for (let ox = -m; ox < 2 * m; ox++) if (inShape(shape, m, ox, oy)) { if (a === null) a = ox; b = ox + 1; }
    if (a !== null) out.push(oy, a, b);
  }
  return (STAMPS[key] = Int16Array.from(out));
}
// v0.014: обводка формы — точки [dy, dx] кольцом СНАРУЖИ неё (сосед сверху, снизу, слева или справа — внутри): мелкий ромб
// (m = 4 — в нём всего несколько точек) обводка по краю съедала целиком. Кольцо рисуется под клетками — форма остаётся целой,
// у ромбов вплотную ложится в щель между соседями. У квадрата — верх и левый край внутри (соседи делят линию), поверх
function edgeOf(shape, m) {
  const key = 'e' + shape + m; if (STAMPS[key]) return STAMPS[key];
  const out = [];
  if (shape === 'sq') { for (let k = 0; k < m; k++) out.push(0, k); for (let k = 1; k < m; k++) out.push(k, 0); }
  else for (let oy = -m - 1; oy < 2 * m + 1; oy++) for (let ox = -m - 1; ox < 2 * m + 1; ox++) {
    if (inShape(shape, m, ox, oy)) continue;
    if (inShape(shape, m, ox - 1, oy) || inShape(shape, m, ox + 1, oy) || inShape(shape, m, ox, oy - 1) || inShape(shape, m, ox, oy + 1)) out.push(oy, ox);
  }
  return (STAMPS[key] = Int16Array.from(out));
}
let SB = null, SID = null, SOUT = null, SCELL = null;
function buildShapes(d32, W, H, lat) {
  // цвета — в маленькие номера (0 фон, 1 щель, 2 ноль, 3 сетка, 4… цвета): 32-битные цвета в горячем цикле медленные
  // v0.013: lat — чётность шахматки (x + y) клеток. У ◆ ромбов вплотную точки вне шахматки (в чётных кадрах GIF 526–781 их столько же,
  // сколько на ней: заполнены промежутки) — не полным ромбом, он налезал на соседей на полразмера, а узлом в месте, где сходятся четыре
  const m = shapeM(W, H), OW = W * m, OH = H * m, sh = shapeNow(), st = stampOf(sh, m), stN = stampOf('rhi', m), n = W * H;
  const node = sh === 'rh' && lat !== undefined, grid = !!S.grid, eg = edgeOf(sh, m), egN = edgeOf('rhi', m);
  if (!SID || SID.length !== n) SID = new Uint8Array(n); else SID.fill(0);   // буферы — одни на все кадры
  if (!SOUT || SOUT.length !== OW * OH) SOUT = new Uint8Array(OW * OH); else SOUT.fill(0);
  if (grid) { if (!SCELL || SCELL.length !== n) SCELL = new Uint8Array(n); else SCELL.fill(0); }
  const id = SID, out = SOUT, cell = SCELL, pal = [BLK, GAPC, ZEROC, gridCol()], cmap = new Map();
  let last = -1, lastId = 0;
  for (let p = 0; p < n; p++) {
    const c = d32[p];
    if (c === BLK) continue;
    if (c === GAPC || c === OUT32) { id[p] = 1; continue; }
    if (c !== last) { last = c; lastId = cmap.get(c); if (lastId === undefined) { lastId = pal.length < 256 ? pal.length : 4; if (pal.length < 256) { cmap.set(c, lastId); pal.push(c); } } }
    id[p] = lastId;
  }
  // нули (и клетки сетки): чёрные внутри картинки — в строке между первой и последней светлой куска, на шахматке
  if (S.zeros || grid) for (let y = 0; y < H; y++) {
    const o = y * W; let x = 0;
    while (x < W) {
      while (x < W && id[o + x] === 1) x++;
      const a = x; while (x < W && id[o + x] !== 1) x++;
      let f = -1, l = -1; for (let q = a; q < x; q++) if (id[o + q] > 3) { if (f < 0) f = q; l = q; }
      if (f < 0) continue;
      const par = lat !== undefined ? lat : (f + y) & 1;
      for (let q = f; q <= l; q++) if (id[o + q] === 0) {
        if (((q + y) & 1) === par) id[o + q] = 2;
        else if (grid && sh === 'sq') cell[o + q] = 1;   // у квадратов сетка — по всем клеткам, и между шахматкой
      }
    }
  }
  // v0.014: сетка — тонкая обводка каждой клетки (светлые, нули, у квадратов — и между шахматкой); у квадратов — поверх клеток, у остальных — под ними
  const gridPass = () => {
    for (let y = 0; y < H; y++) {
      const o = y * W;
      for (let x = 0; x < W; x++) {
        const v = id[o + x]; if (!(v === 2 || v >= 4 || cell[o + x])) continue;
        const e = node && v >= 4 && ((x + y) & 1) !== lat ? egN : eg, bx = x * m, by = y * m;
        for (let k = 0; k < e.length; k += 2) { const Y = by + e[k], X = bx + e[k + 1]; if (Y >= 0 && Y < OH && X >= 0 && X < OW) out[Y * OW + X] = 3; }
      }
    }
  };
  if (grid && sh !== 'sq') gridPass();
  // проходы: 2 — нули, 3 — светлые на шахматке (или все, если шахматки нет), 4 — светлые вне её — узлами, поверх
  for (const pass of node ? [2, 3, 4] : [2, 3]) {
    if (pass === 2 && !S.zeros) continue;
    for (let y = 0; y < H; y++) {
      const o = y * W, s = pass === 4 ? stN : st;
      for (let x = 0; x < W; x++) {
        const v = id[o + x];
        if (pass === 2 ? v !== 2 : v < 4) continue;
        if (node && pass > 2 && (((x + y) & 1) === lat) !== (pass === 3)) continue;
        const bx = x * m, by = y * m;
        for (let k = 0; k < s.length; k += 3) {
          const Y = by + s[k]; if (Y < 0 || Y >= OH) continue;
          const r = Y * OW, x0 = Math.max(0, bx + s[k + 1]), x1 = Math.min(OW, bx + s[k + 2]);
          for (let X = x0; X < x1; X++) out[r + X] = v;
        }
      }
    }
  }
  if (grid && sh === 'sq') gridPass();
  for (let y = 0; y < H; y++) { const o = y * W; for (let x = 0; x < W; x++) if (id[o + x] === 1 && d32[o + x] !== OUT32) for (let b = 0; b < m; b++) out.fill(1, (y * m + b) * OW + x * m, (y * m + b) * OW + x * m + m); }
  if (offS.width !== OW || offS.height !== OH) { offS.width = OW; offS.height = OH; SB = null; }
  if (!SB) SB = osctx.createImageData(OW, OH);
  const o32 = new Uint32Array(SB.data.buffer), P = Uint32Array.from(pal);
  for (let i = 0; i < out.length; i++) o32[i] = P[out[i]];
  osctx.putImageData(SB, 0, 0); S.shapeM = m;
}
const gridCol = () => { const h = ($('gridColor').value || '#56627a').replace('#', ''); return U32(parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)); };
const useShp = () => shapeNow() !== 'sq' || !!S.grid;   // v0.014: у квадратов крупная картинка нужна только ради сетки
$('gridBtn').addEventListener('click', () => { S.grid = !S.grid; $('gridBtn').classList.toggle('on', S.grid); S.offKey = ''; draw(); });
$('gridColor').addEventListener('input', () => { if (S.grid) { S.offKey = ''; draw(); } });
$('cellShape').addEventListener('change', () => { S.offKey = ''; draw(); });
$('latSel').addEventListener('change', () => { S.offKey = ''; draw(); });   // v0.018
$('zeroBtn').addEventListener('click', () => { S.zeros = !S.zeros; $('zeroBtn').classList.toggle('on', S.zeros); S.offKey = ''; draw(); });
// v0.005: вывод на экран — масштаб и сдвиг по кругу (строка shift источника — вверху экрана)
function blit() {
  const W = off.width, H = off.height;
  const z = zoomNow(W, H), CW = Math.max(1, Math.round(W * z)), CH = Math.max(1, Math.round(H * z));
  if (cv.width !== CW || cv.height !== CH) { cv.width = CW; cv.height = CH; }
  // v0.011: с формой клеток источник — крупная картинка offS (в mm раз), при уменьшении — сглаживать, иначе рябит
  const shp = useShp() && S.shapeKey === S.offKey && offS.width === W * (S.shapeM || 1) && CW / W >= 2, SRC = shp ? offS : off, mm = shp ? S.shapeM : 1;
  ctx.imageSmoothingEnabled = shp && CW / W < mm;
  /* v0.006: ось и нарезка. Точка экрана (x, y) показывает точку сцены (x + sx, y + sy) по кругу; у полосы k свой сдвиг —
     сдвиг × множитель (целиком 1, встречно ±1, лесенкой k + 1) × направление оси. Полосы режутся поперёк движения:
     по столбцам — горизонтальными лентами, иначе — вертикальными. Каждая полоса — до четырёх кусков сцены. */
  const ax = $('scrAxis').value, cut = $('scrCut').value;
  const u = { rows: [0, 1], cols: [1, 0], diagR: [1, 1], diagL: [-1, 1] }[ax] || [0, 1];
  const md = (v, m) => ((v % m) + m) % m, kx = CW / W, ky = CH / H;
  const split = (a, len, sh, M) => { const s0 = md(a + sh, M), l1 = Math.min(len, M - s0); return l1 >= len ? [[a, s0, len]] : [[a, s0, l1], [a + l1, 0, len - l1]]; };
  const piece = (rx, ry, rw, rh, sx, sy) => {
    for (const [dx, sx0, lw] of split(rx, rw, sx, W)) for (const [dy, sy0, lh] of split(ry, rh, sy, H)) {
      const X0 = Math.round(dx * kx), X1 = Math.round((dx + lw) * kx), Y0 = Math.round(dy * ky), Y1 = Math.round((dy + lh) * ky);
      if (X1 > X0 && Y1 > Y0) ctx.drawImage(SRC, sx0 * mm, sy0 * mm, lw * mm, lh * mm, X0, Y0, X1 - X0, Y1 - Y0);
    }
  };
  const band = Math.max(1, jumpPx()), acrossX = ax !== 'cols', L = acrossX ? W : H;
  const n = cut === 'all' ? 1 : Math.max(1, Math.ceil(L / band));
  for (let k = 0; k < n; k++) {
    const f = cut === 'all' ? 1 : cut === 'counter' ? (k % 2 ? -1 : 1) : k + 1;
    const sx = Math.round(S.shift * f * u[0]), sy = Math.round(S.shift * f * u[1]);
    if (n === 1) piece(0, 0, W, H, sx, sy);
    else if (acrossX) piece(k * band, 0, Math.min(band, W - k * band), H, sx, sy);
    else piece(0, k * band, W, Math.min(band, H - k * band), sx, sy);
  }
  $('pos').value = S.i;
  { const fi = $('frInp'); fi.max = SEQ.length; if (document.activeElement !== fi) fi.value = S.i + 1; }   // v0.007
  drawGraph(); rSizeBar(); rStrip();   // v0.016
  $('num').textContent = (S.label || '') + (S.zoom === 'fit' ? '' : ' · ×' + (+z.toFixed(2)));
  { const nm = $('numName'), nt = S.nameTxt || ''; if (nm && nm.textContent !== nt) { nm.textContent = nt; nm.title = nt; } }
  const px = Math.max(1, parseInt($('scrPx').value, 10) || 1), LL = ax === 'cols' ? W : H;
  $('scrVal').textContent = 'сдвиг ' + Math.round(md(-S.shift, LL) / px) + (ax === 'cols' ? ' столб.' : ' стр.');
}
function fitZoom(W, H) { const box = $('view').getBoundingClientRect(); return Math.max(0.05, Math.min((box.width - 12) / W, (box.height - 12) / H)); }
function zoomNow(W, H) { return S.zoom === 'fit' ? fitZoom(W, H) : S.zoom; }
/* v0.007: кадры — все, нечётные (1, 3, 5 … — номер с нуля чётный) или чётные; неподходящий кадр пропускается в сторону движения */
const parWant = () => ({ odd: 0, even: 1 }[$('parSel').value]);
function go(i, dir) {
  if (!SEQ.length) return;
  const n = SEQ.length, loop = $('loopBtn').classList.contains('on'), w = parWant();
  const fit = v => loop ? ((v % n) + n) % n : Math.max(0, Math.min(n - 1, v));
  i = fit(i);
  if (w !== undefined && SEQ[i][1] % 2 !== w) {   // v0.008: чётность — по номеру кадра в GIF (в склейке и нарезке он не равен месту)
    const d = dir || (i < S.i ? -1 : 1), ok = j => SEQ[j][1] % 2 === w;
    let f = -1;
    for (const dd of [d, -d]) {
      let j = i;
      for (let q = 0; q < n && f < 0; q++) { j += dd; if (loop) j = ((j % n) + n) % n; else if (j < 0 || j >= n) break; if (ok(j)) f = j; }
      if (f >= 0) break;
    }
    if (f >= 0) i = f;
  }
  S.i = i; draw();
}
const step = () => parseInt($('stepSel').value, 10) || 1;
const stepEff = () => { const s = step(); return parWant() !== undefined && s % 2 ? s * 2 : s; };   // v0.007: при чёт / нечёт шаг — чётный

/* ---------- масштаб колесом и перетаскивание (v0.002) ---------- */
const view = $('view');
view.addEventListener('wheel', e => {
  if (!SEQ.length) return;
  e.preventDefault();
  const W = off.width, H = off.height, z0 = zoomNow(W, H), z1 = Math.max(0.05, Math.min(64, z0 * (e.deltaY < 0 ? 1.2 : 1 / 1.2)));
  const r = cv.getBoundingClientRect(), fx = (e.clientX - r.left) / r.width, fy = (e.clientY - r.top) / r.height;   // точка под курсором — доля картинки
  S.zoom = z1; $('zoomSel').value = [1, 2, 3, 4, 6, 8].includes(+z1.toFixed(3)) ? String(+z1.toFixed(3)) : 'custom';
  draw();
  const r2 = cv.getBoundingClientRect();
  view.scrollLeft += (r2.left + fx * r2.width) - e.clientX; view.scrollTop += (r2.top + fy * r2.height) - e.clientY;
}, { passive: false });
let pan = null;
view.addEventListener('mousedown', e => { if (e.button !== 0) return; pan = { x: e.clientX, y: e.clientY, l: view.scrollLeft, t: view.scrollTop }; view.classList.add('pan'); });
window.addEventListener('mousemove', e => { if (!pan) return; view.scrollLeft = pan.l - (e.clientX - pan.x); view.scrollTop = pan.t - (e.clientY - pan.y); });
window.addEventListener('mouseup', e => {   // v0.004: щелчок без протяжки — пауза / играть (протяжка, как прежде, двигает вид)
  if (pan && Math.abs(e.clientX - pan.x) + Math.abs(e.clientY - pan.y) < 5 && SEQ.length) play(!S.playing);
  pan = null; view.classList.remove('pan');
});

/* ---------- строчная прокрутка (v0.005) ----------
   Сдвиг сцены по кругу, прыжками: прыжок = строк × px на строку. ↓ — картинка едет вниз, ↑ — вверх, ↕ — туда-сюда: размах
   прыжков в одну сторону, потом обратно. Скорость — прыжков в секунду по степени (1 … 5000); на больших скоростях за один кадр
   экрана делается сразу много прыжков, картинка выводится раз за кадр. */
const SCR_MAX = 1e6;   // v0.012: было 5000 — «скорость ещё больше надо»; ползунок 0 … 1000 — мельче шаг на больших скоростях
const scrSpeed = () => Math.round(Math.pow(SCR_MAX, (parseInt($('scrSpeed').value, 10) || 0) / 1000));
const jumpPx = () => (parseInt($('scrStep').value, 10) || 1) * Math.max(1, parseInt($('scrPx').value, 10) || 1);
function jump(n) {   // n прыжков; + — картинка вниз
  if (!n || !off.height) return;
  S.shift -= n * jumpPx();   // v0.006: без свёртки по модулю — у полос свой множитель, каждая сворачивается сама
  // v0.012: сворачивать по W·H: у полосы сдвиг × целый множитель, по x он берётся по модулю W, по y — H, картинка та же
  { const P = Math.max(1, off.width * off.height); if (Math.abs(S.shift) > P * 1024) S.shift %= P; }
}
function scrTick(t) {
  if (!S.scr) return;
  const dt = S.scrLast ? Math.min(0.25, (t - S.scrLast) / 1000) : 0; S.scrLast = t;
  S.scrAcc += dt * scrSpeed();
  let n = Math.floor(S.scrAcc); S.scrAcc -= n;
  if (n > 0) {
    const dir = $('scrDir').value;
    if (dir === 'both') {
      const amp = Math.max(1, parseInt($('scrAmp').value, 10) || 1);
      let moved = 0;
      while (n > 0) { const k = Math.min(n, amp - S.scrN); moved += k * S.scrDir; S.scrN += k; n -= k; if (S.scrN >= amp) { S.scrN = 0; S.scrDir = -S.scrDir; } }
      jump(moved);
    } else jump(dir === 'up' ? -n : n);
    if (SEQ.length) blit();
  }
  S.scrRaf = requestAnimationFrame(scrTick);
}
function scrOn(on) {
  S.scr = on; cancelAnimationFrame(S.scrRaf); S.scrLast = 0; S.scrAcc = 0;
  $('scrBtn').classList.toggle('on', on);
  if (on) S.scrRaf = requestAnimationFrame(scrTick);
}
const showSpeed = () => { $('scrSpeedVal').textContent = scrSpeed().toLocaleString('ru-RU') + ' / с'; };
showSpeed();
$('scrSpeed').addEventListener('input', showSpeed);
$('scrBtn').addEventListener('click', () => scrOn(!S.scr));
$('scrDir').addEventListener('change', () => { S.scrN = 0; S.scrDir = 1; });
$('scrAxis').addEventListener('change', () => { S.shift = 0; S.scrN = 0; S.scrDir = 1; if (SEQ.length) blit(); });   // v0.006
$('scrCut').addEventListener('change', () => { if (SEQ.length) blit(); });
$('scrUpBtn').addEventListener('click', () => { jump(-1); if (SEQ.length) blit(); });
$('scrDnBtn').addEventListener('click', () => { jump(1); if (SEQ.length) blit(); });
$('scrZeroBtn').addEventListener('click', () => { S.shift = 0; S.scrN = 0; S.scrDir = 1; if (SEQ.length) blit(); });
$('scrPx').addEventListener('input', () => { if (SEQ.length) blit(); });

/* ---------- разбор на ромбы (v0.007) ----------
   Дыра — чёрное место не меньше «px» в поперечнике: точка, у которой в квадрате px × px вокруг нет ни одной светлой.
   Считается только внутри картинки — в каждой строке от первой светлой точки до последней, чтобы фон вокруг треугольника
   не шёл в счёт. Доля дыр по кадрам — g.holes. Участки режутся отдельно по нечётным и чётным кадрам (соседние мигают):
   ромб — пока дыры есть и не падают (упали ниже DROP от прежнего — сброс, новый ромб), без дыр — шум; ромб в один кадр — шум. */
const HOLE_MIN = 0.0005, DROP = 0.9;
function holeFrac(fr, W, H, r, B) {
  const hz = B.hz, cnt = B.cnt; cnt.fill(0);
  for (let y = 0; y < H; y++) {   // по строке: есть ли светлая в [x − r, x + r]
    const o = y * W; let c = 0;
    for (let x = 0; x < Math.min(r, W); x++) if (fr[o + x]) c++;
    for (let x = 0; x < W; x++) {
      if (x + r < W && fr[o + x + r]) c++;
      if (x - r - 1 >= 0 && fr[o + x - r - 1]) c--;
      hz[o + x] = c > 0 ? 1 : 0;
    }
  }
  for (let y = 0; y < Math.min(r, H); y++) { const o = y * W; for (let x = 0; x < W; x++) cnt[x] += hz[o + x]; }
  let holes = 0, area = 0;
  for (let y = 0; y < H; y++) {   // по столбцу: то же в [y − r, y + r], и сразу счёт в пределах строки картинки
    if (y + r < H) { const o = (y + r) * W; for (let x = 0; x < W; x++) cnt[x] += hz[o + x]; }
    if (y - r - 1 >= 0) { const o = (y - r - 1) * W; for (let x = 0; x < W; x++) cnt[x] -= hz[o + x]; }
    const o = y * W; let x0 = 0, x1 = W - 1;
    while (x0 < W && !fr[o + x0]) x0++;
    if (x0 >= W) continue;
    while (!fr[o + x1]) x1--;
    area += x1 - x0 + 1;
    for (let x = x0; x <= x1; x++) if (!cnt[x]) holes++;
  }
  return area ? holes / area : 0;
}
function analyze(g, px, done) {
  if (g.holes && g.holesPx === px) { done(); return; }
  const n = g.frames.length, out = new Float32Array(n), r = Math.max(1, px >> 1), btn = $('rombBtn'), txt = btn.textContent;
  const B = { hz: new Uint8Array(g.W * g.H), cnt: new Int32Array(g.W) };
  let k = 0;
  const chunk = () => {
    const t0 = performance.now();
    while (k < n && performance.now() - t0 < 40) { out[k] = holeFrac(g.frames[k], g.W, g.H, r, B); k++; }
    if (k < n) { btn.textContent = '◇ ' + Math.round(k / n * 100) + '%'; setTimeout(chunk, 0); return; }
    btn.textContent = txt; g.holes = out; g.holesPx = px; done();
  };
  chunk();
}
function pieces(g, gi) {
  const h = g.holes, n = h.length, out = [];
  for (const p of [0, 1]) {
    const list = []; let cur = null;
    for (let f = p; f < n; f += 2) {
      const kind = h[f] > HOLE_MIN ? 'romb' : 'noise';
      if (!cur || cur.kind !== kind || (kind === 'romb' && h[f] < h[cur.b] * DROP)) { cur = { kind: kind, a: f, b: f }; list.push(cur); }
      else cur.b = f;
    }
    const merged = [];
    for (const q of list) {
      if (q.kind === 'romb' && q.a === q.b) q.kind = 'noise';
      const last = merged[merged.length - 1];
      if (last && last.kind === 'noise' && q.kind === 'noise') last.b = q.b; else merged.push(q);
    }
    for (const q of merged) { let pk = 0; for (let f = q.a; f <= q.b; f += 2) pk = Math.max(pk, h[f]); out.push({ g: gi, a: q.a, b: q.b, st: 2, kind: q.kind, peak: pk }); }
  }
  return out.sort((x, y) => x.a - y.a);
}
$('rombBtn').addEventListener('click', () => {
  if (S.busy) return;
  const g = S.gifs[S.cur]; if (!g) { alert('Сначала откройте GIF'); return; }
  const px = Math.max(3, parseInt($('rombHole').value, 10) || 15);
  S.busy = true;
  analyze(g, px, () => {
    S.busy = false;
    const gi = S.gifs.indexOf(g); if (gi < 0) return;
    const what = $('rombWhat').value, par = $('rombPar').value;
    S.segs.push(...pieces(g, gi).filter(q => (what === 'all' || q.kind === what) && (par === 'both' || (par === 'odd') === (q.a % 2 === 0))));
    S.offKey = ''; refresh();
  });
});
// сортировка склейки; у участков, положенных руками, длина и крупность считаются так же (крупность — если GIF разобран)
const segLen = s => Math.floor(Math.abs(s.b - s.a) / s.st) + 1;
function segPeak(s) {
  if (s.peak !== undefined) return s.peak;
  const h = S.gifs[s.g] && S.gifs[s.g].holes; if (!h) return 0;
  let pk = 0; for (let f = s.a; s.a <= s.b ? f <= s.b : f >= s.b; f += (s.a <= s.b ? s.st : -s.st)) pk = Math.max(pk, h[f]);
  return pk;
}
const segPar = s => s.st % 2 ? 1 : (s.a % 2 ? 2 : 0);   // 0 — нечётные кадры, 2 — чётные, 1 — вперемешку
$('sortSel').addEventListener('change', () => {
  const m = $('sortSel').value; $('sortSel').value = '';
  if (!m || S.segs.length < 2) return;
  const ord = (x, y) => x.g - y.g || Math.min(x.a, x.b) - Math.min(y.a, y.b);
  const kindR = s => s.kind === 'romb' ? 0 : s.kind === 'noise' ? 2 : 1;
  const L = S.segs;
  if (m === 'order') L.sort(ord);
  else if (m === 'odd') L.sort((x, y) => segPar(x) - segPar(y) || ord(x, y));
  else if (m === 'even') L.sort((x, y) => segPar(y) - segPar(x) || ord(x, y));
  else if (m === 'long') L.sort((x, y) => segLen(y) - segLen(x) || ord(x, y));
  else if (m === 'short') L.sort((x, y) => segLen(x) - segLen(y) || ord(x, y));
  else if (m === 'big') L.sort((x, y) => segPeak(y) - segPeak(x) || ord(x, y));
  else if (m === 'small') L.sort((x, y) => segPeak(x) - segPeak(y) || ord(x, y));
  else if (m === 'kind') L.sort((x, y) => kindR(x) - kindR(y) || ord(x, y));
  else if (m === 'rev') L.reverse();
  else if (m === 'mix') for (let i = L.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [L[i], L[j]] = [L[j], L[i]]; }
  if (S.mont) S.i = 0;
  refresh();
});
// полоска-график: доля дыр по кадрам того, что сейчас смотрится (GIF или склейка); нечётные — жёлтым, чётные — голубым
const gcv = $('graph'), gctx = gcv.getContext('2d');
function drawGraph() {
  // v0.010: значения считаются раз на ленту (S.gvals сбрасывает refresh); лента длиннее полоски — по столбику px наибольшее
  if (!S.gvals) { const v = new Float32Array(SEQ.length); SEQ.forEach((r, i) => { v[i] = r[0] >= 0 && S.gifs[r[0]] && S.gifs[r[0]].holes ? S.gifs[r[0]].holes[r[1]] : -1; }); S.gvals = v; }
  const vals = S.gvals;
  let mx = -1; for (let i = 0; i < vals.length; i++) if (vals[i] > mx) mx = vals[i];
  gcv.style.display = mx >= 0 ? 'block' : 'none'; if (mx < 0) return;
  mx = Math.max(mx, 1e-6);
  const Wd = Math.max(1, gcv.clientWidth | 0), Hd = gcv.height; if (gcv.width !== Wd) gcv.width = Wd;
  gctx.clearRect(0, 0, Wd, Hd);
  const n = vals.length, bw = Wd / n, gap = bw > 3 ? 1 : 0;
  if (n <= Wd) for (let i = 0; i < n; i++) {
    const v = vals[i]; if (v < 0) continue;
    const h = Math.max(1, Math.round(v / mx * (Hd - 3)));
    gctx.fillStyle = SEQ[i][1] % 2 ? '#22d3ee' : '#ffcc00';
    gctx.fillRect(i * bw, Hd - h, Math.max(1, bw - gap), h);
  } else for (let x = 0; x < Wd; x++) {
    const i0 = Math.floor(x / bw), i1 = Math.min(n, Math.floor((x + 1) / bw)); let v = -1, k = i0;
    for (let i = i0; i < i1; i++) if (vals[i] > v) { v = vals[i]; k = i; }
    if (v < 0) continue;
    const h = Math.max(1, Math.round(v / mx * (Hd - 3)));
    gctx.fillStyle = SEQ[k][1] % 2 ? '#22d3ee' : '#ffcc00';
    gctx.fillRect(x, Hd - h, 1, h);
  }
  gctx.fillStyle = '#ffffff'; gctx.fillRect(Math.floor((S.i + 0.5) * bw), 0, 1, Hd);
}
let gDrag = false;
const gPick = e => { const r = gcv.getBoundingClientRect(); if (!SEQ.length || !r.width) return; go(Math.max(0, Math.min(SEQ.length - 1, Math.floor((e.clientX - r.left) / r.width * SEQ.length))), 1); };
gcv.addEventListener('mousedown', e => { gDrag = true; gPick(e); });
window.addEventListener('mousemove', e => { if (gDrag) gPick(e); });
window.addEventListener('mouseup', () => { gDrag = false; });

/* ---------- игра ---------- */
function play(on) {
  S.playing = on; clearTimeout(S.timer); $('playBtn').textContent = on ? '⏸' : '▶';
  if (!on) return;
  const tick = () => {
    if (!S.playing) return;
    const n = SEQ.length, nx = S.i + (S.rev ? -stepEff() : stepEff()), loop = $('loopBtn').classList.contains('on');
    if (!loop && (nx < 0 || nx >= n) && rOne()) {   // v0.016: по одному без 🔁 — фильм кончился, дальше следующий ромб
      rJump(S.rev ? -1 : 1); go(S.rev ? SEQ.length - 1 : 0, S.rev ? -1 : 1);
      S.timer = setTimeout(tick, Math.max(10, parseInt($('msInp').value, 10) || 100)); return;
    }
    if (!loop && (nx < 0 || nx >= n)) { play(false); return; }
    go(nx, S.rev ? -1 : 1);
    S.timer = setTimeout(tick, Math.max(10, parseInt($('msInp').value, 10) || 100));
  };
  S.timer = setTimeout(tick, Math.max(10, parseInt($('msInp').value, 10) || 100));
}

/* ---------- списки ---------- */
function lists() {
  const gl = $('gifs'); gl.innerHTML = '';
  S.gifs.forEach((g, k) => {
    const d = document.createElement('div'); d.className = 'item' + (!S.mont && !layOn() && k === S.cur ? ' on' : '') + (S.sel.has(k) ? ' insel' : '');
    d.innerHTML = '<div class="row"><input type="checkbox" title="В набор"><span class="grow"><b></b></span><button class="mini" title="Закрыть">✕</button></div><div class="sub"></div>';
    d.querySelector('b').textContent = g.name;
    d.querySelector('.sub').textContent = g.frames.length + ' кадров · ' + g.W + '×' + g.H + ' · ' + g.cols.length + ' цв.';
    const ck = d.querySelector('input'); ck.checked = S.sel.has(k);
    ck.addEventListener('click', e => e.stopPropagation());
    ck.addEventListener('change', () => { if (ck.checked) S.sel.add(k); else S.sel.delete(k); refresh(); });
    d.addEventListener('click', () => { S.mont = false; S.cur = k; S.i = 0; S.a = S.b = null; if (layout() !== 'one') $('laySel').value = 'one'; $('msInp').value = g.delays[0]; abTxt(); refresh(); });
    d.querySelector('button').addEventListener('click', e => {
      e.stopPropagation();
      S.segs = S.segs.filter(s => s.g !== k).map(s => ({ ...s, g: s.g > k ? s.g - 1 : s.g }));
      S.sel = new Set([...S.sel].filter(x => x !== k).map(x => x > k ? x - 1 : x));
      S.gifs.splice(k, 1); if (S.cur >= S.gifs.length) S.cur = S.gifs.length - 1; if (!S.segs.length) S.mont = false; refresh();
    });
    gl.appendChild(d);
  });
  const sl = $('segs'); sl.innerHTML = ''; let tot = 0;
  S.segs.forEach((sg, k) => {
    const n = Math.floor(Math.abs(sg.b - sg.a) / sg.st) + 1; tot += n;
    const d = document.createElement('div'); d.className = 'item';
    d.innerHTML = '<div class="row"><span class="grow"><b></b></span><button class="mini" title="Выше">↑</button><button class="mini" title="Ниже">↓</button><button class="mini" title="Убрать">✕</button></div><div class="sub"></div>';
    d.querySelector('b').textContent = (k + 1) + '. ' + S.gifs[sg.g].name;
    d.querySelector('.sub').textContent = 'кадры ' + (sg.a + 1) + ' → ' + (sg.b + 1) + (sg.st > 1 ? ', через ' + sg.st : '') + ' · ' + n + ' шт.'
      + (sg.kind ? ' · ' + (sg.kind === 'romb' ? '◇ ромб, дыр до ' + (sg.peak * 100).toFixed(1) + '%' : 'шум') + ' · ' + (sg.a % 2 ? 'чёт' : 'нечёт') : '');   // v0.007
    if (sg.kind) d.style.boxShadow = 'inset 3px 0 0 ' + (sg.kind === 'romb' ? '#ffcc00' : '#3a3f4c');
    const [up, dn, x] = d.querySelectorAll('button');
    up.addEventListener('click', () => { if (k > 0) { [S.segs[k - 1], S.segs[k]] = [S.segs[k], S.segs[k - 1]]; refresh(); } });
    dn.addEventListener('click', () => { if (k < S.segs.length - 1) { [S.segs[k + 1], S.segs[k]] = [S.segs[k], S.segs[k + 1]]; refresh(); } });
    x.addEventListener('click', () => { S.segs.splice(k, 1); if (!S.segs.length) S.mont = false; refresh(); });
    sl.appendChild(d);
  });
  $('segTot').textContent = S.segs.length ? S.segs.length + ' участков · ' + tot + ' кадров' : 'пусто';
  $('showMontBtn').classList.toggle('on', S.mont);
  $('showMontBtn').textContent = S.mont ? '⏏ Вернуться к GIF' : '▶ Смотреть склейку';
}
function abTxt() {
  const t = S.a === null && S.b === null ? '—' : (S.a !== null ? S.a + 1 : '?') + ' → ' + (S.b !== null ? S.b + 1 : '?');
  $('abTxt').textContent = 'участок: ' + t;
}

/* ---------- открыть ---------- */
async function openFiles(files) {
  for (const f of files) {
    if (!/\.gif$/i.test(f.name) && f.type !== 'image/gif') continue;
    try {
      const g = parseGif(await f.arrayBuffer(), f.name);
      S.gifs.push(g); S.cur = S.gifs.length - 1; S.mont = false; S.i = 0; S.a = S.b = null; $('msInp').value = g.delays[0];
    } catch (e) { alert(f.name + ': ' + e.message); }
  }
  abTxt(); refresh();
}
$('openBtn').addEventListener('click', () => $('file').click());
$('file').addEventListener('change', e => { openFiles(Array.from(e.target.files)); e.target.value = ''; });
window.addEventListener('dragover', e => { e.preventDefault(); view.classList.add('drop'); });
window.addEventListener('dragleave', e => { if (!e.relatedTarget) view.classList.remove('drop'); });
window.addEventListener('drop', e => { e.preventDefault(); view.classList.remove('drop'); openFiles(Array.from(e.dataTransfer.files)); });

/* ---------- кнопки ---------- */
$('firstBtn').addEventListener('click', () => go(0, 1));
$('lastBtn').addEventListener('click', () => go(SEQ.length - 1, -1));
$('prevBtn').addEventListener('click', () => go(S.i - stepEff(), -1));
$('nextBtn').addEventListener('click', () => go(S.i + stepEff(), 1));
$('parSel').addEventListener('change', () => go(S.i, 1));
$('frInp').addEventListener('input', () => { const v = parseInt($('frInp').value, 10); if (v >= 1) go(v - 1, 1); });
$('playBtn').addEventListener('click', () => play(!S.playing));
$('revBtn').addEventListener('click', () => { S.rev = !S.rev; $('revBtn').classList.toggle('on', S.rev); });
$('loopBtn').addEventListener('click', () => $('loopBtn').classList.toggle('on'));
$('zoomSel').addEventListener('change', () => { const v = $('zoomSel').value; S.zoom = v === 'fit' ? 'fit' : parseFloat(v); draw(); });
window.addEventListener('resize', draw);
$('pos').addEventListener('input', () => go(parseInt($('pos').value, 10) || 0, 1));
$('aBtn').addEventListener('click', () => setAB('a'));
$('bBtn').addEventListener('click', () => setAB('b'));
function setAB(w) { if (!SEQ.length || S.mont || layOn()) return; S[w] = SEQ[S.i][1]; abTxt(); }
$('addBtn').addEventListener('click', addSeg);
function addSeg() {
  if (S.mont || layOn() || S.cur < 0) return;
  const n = S.gifs[S.cur].frames.length;
  const w = parWant(), a = S.a !== null ? S.a : (w || 0);
  let b = S.b !== null ? S.b : n - 1;
  if (w !== undefined && (b - a) % 2) b += a <= b ? -1 : 1;   // v0.007: конец — той же чётности, что начало
  S.segs.push({ g: S.cur, a: a, b: b, st: stepEff() });
  S.a = S.b = null; abTxt(); lists();
}
$('showMontBtn').addEventListener('click', () => { if (!S.segs.length && !S.mont) return; S.mont = !S.mont; S.i = 0; refresh(); });
$('clearBtn').addEventListener('click', () => { S.segs = []; S.mont = false; refresh(); });
$('laySel').addEventListener('change', () => { S.i = 0; refresh(); });
$('laySize').addEventListener('input', () => draw());
$('selAllBtn').addEventListener('click', () => { S.sel = new Set(S.gifs.map((_, k) => k)); if (layout() === 'one') $('laySel').value = 'grid'; refresh(); });
$('selNoneBtn').addEventListener('click', () => { S.sel.clear(); refresh(); });
$('pngBtn').addEventListener('click', () => {
  const ref = SEQ[S.i]; if (!ref) return;
  const nm = ref[0] === -1 ? 'Zerkalius-raskladka-' + layout() + '-kadr-' + (ref[1] + 1) : S.gifs[ref[0]].name.replace(/\.gif$/i, '') + '-kadr-' + (ref[1] + 1);
  (useShp() && S.shapeKey === S.offKey ? offS : off).toBlob(bl => download(bl, nm + '.png'));   // v0.011: с формой клеток
});

// общая палитра для нескольких GIF: фон (чёрный) — 0; щель раскладки — свой цвет
function unify(used, extra) {
  const pal = [[0, 0, 0]], key = new Map([[0, 0]]), maps = {};
  const idx = c => { const kk = (c[0] << 16) | (c[1] << 8) | c[2]; let m = key.get(kk); if (m === undefined) { m = pal.length; pal.push(c); key.set(kk, m); } return m; };
  for (const k of used) maps[k] = Uint8Array.from(S.gifs[k].cols.map(c => Math.min(255, idx(c))));
  const ex = extra ? idx(extra) : 0;
  return pal.length > 256 ? null : { pal, maps, ex };
}
$('saveBtn').addEventListener('click', () => {
  if (!S.segs.length) return;
  const refs = []; for (const sg of S.segs) for (let f = sg.a; sg.a <= sg.b ? f <= sg.b : f >= sg.b; f += (sg.a <= sg.b ? sg.st : -sg.st)) refs.push([sg.g, f]);
  const used = [...new Set(refs.map(r => r[0]))];
  const OW = Math.max(...used.map(k => S.gifs[k].W)), OH = Math.max(...used.map(k => S.gifs[k].H));
  const U = unify(used); if (!U) { alert('Вместе больше 256 цветов — склейку одним GIF не собрать'); return; }
  const frames = refs.map(([k, f]) => {
    const g = S.gifs[k], src = g.frames[f], mp = U.maps[k], out = new Uint8Array(OW * OH);
    const ox = Math.floor((OW - g.W) / 2), oy = Math.floor((OH - g.H) / 2);
    for (let y = 0; y < g.H; y++) { const b = (oy + y) * OW + ox; for (let x = 0; x < g.W; x++) out[b + x] = mp[src[y * g.W + x]]; }
    return out;
  });
  const cs = Math.max(2, Math.round((parseInt($('outMs').value, 10) || 100) / 10));
  download(encodeGif(frames, OW, OH, U.pal, cs), 'Zerkalius-skleyka-' + frames.length + '-kadrov.gif');
});
// v0.002: раскладка набора — одним GIF, все кадры с выбранным шагом
$('layGifBtn').addEventListener('click', () => {
  if (!layOn()) { alert('Отметьте GIF галками и выберите раскладку'); return; }
  const G = geom(), used = setList(), U = unify(used, GAP_COL);
  if (!U) { alert('Вместе больше 256 цветов — раскладку одним GIF не собрать'); return; }
  const n = Math.max(...used.map(k => S.gifs[k].frames.length)), st = step(), frames = [];
  if ((Math.ceil(n / st)) * G.W * G.H > 4e8) { alert('Слишком большая раскладка для одного GIF — возьмите шаг больше или меньше клеток'); return; }
  for (let f = 0; f < n; f += st) {
    const out = new Uint8Array(G.W * G.H).fill(U.ex);
    for (const c of G.cells) {
      const g = S.gifs[c.g], mp = U.maps[c.g], src = g.frames[f % g.frames.length];
      for (let y = 0; y < c.ch; y++) out.fill(mp[0], (c.cy + y) * G.W + c.cx, (c.cy + y) * G.W + c.cx + c.cw);
      for (let y = 0; y < g.H; y++) { const o = (c.y + y) * G.W + c.x, s = y * g.W; for (let x = 0; x < g.W; x++) out[o + x] = mp[src[s + x]]; }
    }
    frames.push(out);
  }
  const cs = Math.max(2, Math.round((parseInt($('outMs').value, 10) || 100) / 10));
  download(encodeGif(frames, G.W, G.H, U.pal, cs), 'Zerkalius-raskladka-' + layout() + '-' + used.length + 'gif-' + frames.length + '-kadrov.gif');
});

/* ---------- клавиши ---------- */
document.addEventListener('keydown', e => {
  if (e.target.tagName === 'INPUT' && e.target.type === 'number') return;
  const k = e.key;
  if (k === 'ArrowLeft') { go(S.i - (e.shiftKey ? 1 : stepEff()), -1); e.preventDefault(); }
  else if (k === 'ArrowRight') { go(S.i + (e.shiftKey ? 1 : stepEff()), 1); e.preventDefault(); }
  else if (k === ' ') { play(!S.playing); e.preventDefault(); }
  else if (k === 'PageUp') { rJump(-1); e.preventDefault(); }   // v0.010: по одному — соседний ромб
  else if (k === 'PageDown') { rJump(1); e.preventDefault(); }
  else if (k === 'Home') go(0, 1);
  else if (k === 'End') go(SEQ.length - 1, -1);
  else if (k === '[') setAB('a');
  else if (k === ']') setAB('b');
  else if (k === 'Enter') addSeg();
  else if (k === '0') { S.zoom = 'fit'; $('zoomSel').value = 'fit'; draw(); }
  else if (k === 'ArrowUp') { jump(-1); if (SEQ.length) blit(); e.preventDefault(); }   // v0.005: прыжок прокрутки
  else if (k === 'ArrowDown') { jump(1); if (SEQ.length) blit(); e.preventDefault(); }
});
refresh();
</script>
<script src="../_js/hub-link.js"></script>
<script src="../_js/slider-arrows.js"></script>
</body>
</html>