я провалилась тк не поняла, что край поля тоже ловушка... ОЧ КРУТО!

Ежонок, ты молодец!!

Невеличка, почти готово! Сейчас скину, скажешь как оно

Птичка, классная анкета!!

Птичка, с принятием!

Птичка, добро пожаловать на ролевую!

Ежонок, добро пожаловать на ролевую!

Ежонок, не против, если Птичка присоединиться к нам на поляне?

что за пупс в подписи!

Ежонок, оставлять!

оставь!!! я тоже уже вайбкожу игру ахахахах
такого наверн ни на одном форуме нет)) впору прям игровую тему где то создать со складом наших игр и авторством конкретных людей)

потестируем еще одну игрульку?? это бета версия, навайбкоженная человеком, который впервые чет вайбкодил........

[html]
<style>
#herb-forum{
  --bg:#101d19;
  --panel:#20372b;
  --panel-2:#2b4736;
  --cream:#f8ebcf;
  --mint:#a6d99a;
  --gold:#e9c77e;
  --line:#5d7454;
}
#herb-forum *{box-sizing:border-box}
#herb-forum{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f8ebcf;
 
 
 
 
 
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--cream);
 
}
#herb-forum .game{
  width:min(100%,640px);
  background:linear-gradient(180deg,#22382d 0%,#17271f 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(13px,3vw,24px);
  box-shadow:0 24px 80px #0007;
}
#herb-forum header{text-align:center}
#herb-forum h1{
  font-family:Georgia,serif;
  margin:0;
  font-size:clamp(29px,6vw,39px);
  font-weight:500;
  color:#f6dfab;
  letter-spacing:.02em;
}
#herb-forum header p{
  margin:7px 0 16px;
  color:#b3cbb4;
  font-size:14px;
}
#herb-forum .stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:14px;
}
#herb-forum .stat{
  background:linear-gradient(180deg,#314f3d,#294436);
  border:1px solid #49634c;
  border-radius:13px;
  padding:9px;
  text-align:center;
}
#herb-forum .stat small{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:#bad2bd;
}
#herb-forum .stat b{font-size:24px;color:#fff0c7}
#herb-forum .goal{text-align:center;margin:0 0 12px;color:#cbdabc;font-size:13px}
#herb-forum .board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
  background:
    linear-gradient(180deg,#38553f,#314c38);
  border:7px solid #395741;
  border-radius:20px;
  padding:2px;
  touch-action:pan-y;
  user-select:none;
}
#herb-forum .tile{
  aspect-ratio:1;
  border:1px solid #ffffff18;
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#5c785b,#3a5841);
  box-shadow:inset 0 1px #ffffff25, 0 2px 6px #00000025;
  transition:transform .12s, background .12s, box-shadow .12s;
}
#herb-forum .tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 35%, var(--tileTint, #94b594), transparent 62%);
  opacity:.28;
  pointer-events:none;
}
#herb-forum .tile::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:9px;
  border:1px solid #ffffff10;
  pointer-events:none;
}
#herb-forum .tile:hover{transform:translateY(-1px)}
#herb-forum .tile:focus-visible{outline:3px solid #fff2bc;outline-offset:-3px}
#herb-forum .tile.selected{
  background:linear-gradient(145deg,#8e7a46,#72613d);
  outline:3px solid #f9d48d;
  z-index:1;
  transform:scale(1.065);
  box-shadow:0 0 0 3px #f9d48d22, 0 8px 18px #0006;
}
#herb-forum .tile.hint{animation:hint 1s infinite}
#herb-forum .herb-wrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:84%;
  height:84%;
  filter:drop-shadow(0 3px 2px #0004);
}
#herb-forum .herb-icon{
  width:100%;
  height:100%;
  display:block;
}
#herb-forum .tile.bad{animation:shake .22s}
#herb-forum button{font:inherit}
#herb-forum .bar{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px}
#herb-forum .action{
  border:1px solid #648366;
  background:linear-gradient(180deg,#3c6549,#31563f);
  color:#f7eed5;
  border-radius:12px;
  padding:10px 15px;
  cursor:pointer;
  font-weight:650;
}
#herb-forum .action:hover{background:linear-gradient(180deg,#467853,#386746)}
#herb-forum .legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  justify-content:center;
  margin-top:17px;
}
#herb-forum .legend .legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#ceddcc;
  background:#243b2f;
  border:1px solid #3f5d48;
  border-radius:12px;
  padding:7px 9px;
}
#herb-forum .legend .legend-item svg{width:30px;height:30px;flex:0 0 30px;filter:drop-shadow(0 2px 1px #0003)}
#herb-forum .info{text-align:center;min-height:38px;margin:13px 0 0;color:#f4d992;font-size:14px}
#herb-forum .overlay{position:fixed;inset:0;background:#07110ccc;display:none;place-items:center;padding:20px;z-index:10}
#herb-forum .overlay.show{display:grid}
#herb-forum .modal{
  max-width:370px;
  width:100%;
  background:#254231;
  border:1px solid #94a77a;
  border-radius:20px;
  padding:24px;
  text-align:center;
  box-shadow:0 15px 80px #000a;
}
#herb-forum .modal h2{font-family:Georgia,serif;font-size:28px;color:#f4da9e;margin:0 0 10px}
#herb-forum .modal p{line-height:1.5;color:#dfebd8}
#herb-forum .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes  hint{50%{box-shadow:0 0 0 4px #f8df93}}
@keyframes  shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:520px){#herb-forum .legend{grid-template-columns:1fr 1fr}}
@media (max-width:420px){#herb-forum .game{padding:11px}
#herb-forum .board{gap:3px;border-width:5px}
#herb-forum .tile{border-radius:9px}
#herb-forum .legend{grid-template-columns:1fr}}
#herb-forum .goals{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 12px}
#herb-forum .goal-chip{display:flex;align-items:center;gap:7px;background:#263f31;border:1px solid #557353;border-radius:13px;padding:5px 11px;font-size:13px}
#herb-forum .goal-chip svg{width:29px;height:29px;filter:drop-shadow(0 2px 2px #0005)}
#herb-forum .goal-chip.done{border-color:#e8d392;background:#435537}
#herb-forum .tile{will-change:transform}
#herb-forum .tile.striped:after{border:3px dashed #f9ecad;inset:4px;box-shadow:0 0 7px #eed28d}
#herb-forum .tile.burst:after{border:3px solid #fac883;inset:6px;border-radius:50%;box-shadow:0 0 12px #f8bc60}
#herb-forum .tile.bomb{background:radial-gradient(circle,#8460a1,#374a55)}
#herb-forum .special-mark{position:absolute;right:0;bottom:0;background:#203326ed;color:#fff2bb;font-size:12px;line-height:17px;width:18px;height:18px;border-radius:8px 0 5px 0;z-index:3;text-align:center;font-weight:800}
#herb-forum .bomb-core{width:74%;height:74%;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#f5c85b,#f18c80,#aa86f0,#72c1aa,#f5c85b);border:3px solid #f8e6a9;box-shadow:0 0 16px #ffdf70a0,inset 0 0 0 5px #322a40;position:relative}
#herb-forum .bomb-core:after{content:"✦";font-size:clamp(15px,3.4vw,27px);color:#fff4ca;text-shadow:0 0 8px white}
#herb-forum .tile.disappear{animation:vanish .27s ease-in forwards}
#herb-forum .tile.spawn{animation:spawn .33s cubic-bezier(.2,.7,.2,1) both}
@keyframes  vanish{to{opacity:0;transform:scale(.18) rotate(20deg);filter:brightness(2)}}
@keyframes  spawn{from{opacity:0;transform:translateY(-40px) scale(.72)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){#herb-forum .tile, #herb-forum .tile.disappear, #herb-forum .tile.spawn{animation-duration:.01ms!important;transition:none!important}}
#herb-forum{width:100%;max-width:640px;margin:12px auto;color:#f8ebcf;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#herb-forum,#herb-forum *{box-sizing:border-box}#herb-forum .game{width:100%;}#herb-forum .forum-toggle{width:100%;padding:13px 15px;background:#274333;color:#f2dfaf;border:1px solid #6b8558;border-radius:14px;cursor:pointer;text-align:left;font-weight:700}#herb-forum .forum-content[hidden]{display:none!important}#herb-forum .forum-content{padding-top:9px}#herb-forum .tile{padding:0}#herb-forum .board{width:100%}#herb-forum .tile svg{display:block}
</style>
<div id="herb-forum">
<button class="forum-toggle" type="button" id="herb-toggle" aria-expanded="false">✦ Травяная поляна · Открыть игру ▾</button>
<div class="forum-content" id="herb-content" hidden>
<svg width="0" height="0" aria-hidden="true" focusable="false" class="sr-only"> height="0" aria-hidden="true" focusable="false" class="sr-only">
  <defs>
    <linearGradient id="leafGreen" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#8fd26b"/>
      <stop offset="1" stop-color="#3f8b40"/>
    </linearGradient>
    <linearGradient id="leafDark" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#75bb55"/>
      <stop offset="1" stop-color="#2f6f35"/>
    </linearGradient>
    <linearGradient id="stem" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#89c96f"/>
      <stop offset="1" stop-color="#44753f"/>
    </linearGradient>
    <linearGradient id="purpleBloom" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#d8b8ff"/>
      <stop offset="1" stop-color="#8f61d9"/>
    </linearGradient>
    <linearGradient id="poppyRed" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#ff8f7e"/>
      <stop offset="1" stop-color="#d5362d"/>
    </linearGradient>
    <radialGradient id="goldCenter" cx="50%" cy="50%" r="60%">
      <stop offset="0" stop-color="#ffe894"/>
      <stop offset="1" stop-color="#d7a83d"/>
    </radialGradient>
    <linearGradient id="berryBlue" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#8bc7ff"/>
      <stop offset="1" stop-color="#4569bb"/>
    </linearGradient>
    <linearGradient id="lavenderPurple" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#d7c1ff"/>
      <stop offset="1" stop-color="#7a59d1"/>
    </linearGradient>
    <linearGradient id="marigoldOrange" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#ffd16a"/>
      <stop offset="1" stop-color="#ef7d24"/>
    </linearGradient>

    <symbol id="herb-catmint" viewBox="0 0 64 64">
      <path d="M32 54C30 40 31 25 32 10" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 29C22 26 18 22 16 16C24 15 29 18 33 26" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M33 33C42 30 47 24 49 18C40 19 36 23 31 31" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M31 42C22 41 17 44 14 49C23 51 28 49 33 44" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M34 45C42 43 47 46 50 52C42 53 38 51 32 47" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <g stroke="#7d51c5" stroke-width="1">
        <ellipse cx="34" cy="14" rx="4.5" ry="5.2" fill="url(#purpleBloom)"/>
        <ellipse cx="29" cy="18" rx="4.2" ry="4.8" fill="url(#purpleBloom)"/>
        <ellipse cx="36.5" cy="20" rx="4" ry="4.6" fill="url(#purpleBloom)"/>
        <ellipse cx="31.5" cy="24" rx="3.8" ry="4.4" fill="url(#purpleBloom)"/>
      </g>
    </symbol>

    <symbol id="herb-poppy" viewBox="0 0 64 64">
      <path d="M32 53C32 41 32 30 31 16" fill="none" stroke="url(#stem)" stroke-width="3.2" stroke-linecap="round"/>
      <path d="M28 26C22 27 18 31 18 37C24 37 28 35 31 31" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M35 29C41 29 46 32 48 38C41 38 37 36 32 32" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g stroke="#b2231d" stroke-width="1.2">
        <path d="M32 13C25 7 18 12 19 21C24 21 28 19 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C39 7 46 12 45 21C40 21 36 19 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C24 15 22 24 27 29C30 25 31 21 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C40 15 42 24 37 29C34 25 33 21 32 16" fill="url(#poppyRed)"/>
      </g>
      <circle cx="32" cy="16" r="5.2" fill="#342a2a"/>
      <circle cx="32" cy="16" r="2" fill="#f2d96a"/>
    </symbol>

    <symbol id="herb-camomile" viewBox="0 0 64 64">
      <path d="M31 53C31 42 31 27 32 14" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 33C24 31 20 27 18 22C24 21 28 24 32 30" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M33 39C40 37 45 40 48 46C41 47 37 45 31 40" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="#fffdf6" stroke="#e2dfd2" stroke-width="0.9">
        <ellipse cx="32" cy="12" rx="4" ry="11"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(30 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(60 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(90 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(120 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(150 32 12)"/>
      </g>
      <circle cx="32" cy="12" r="7" fill="url(#goldCenter)" stroke="#cc9830" stroke-width="1"/>
    </symbol>

    <symbol id="herb-juniper" viewBox="0 0 64 64">
      <path d="M16 45C28 36 39 27 50 14" fill="none" stroke="#59854c" stroke-width="3" stroke-linecap="round"/>
      <g stroke="#4d7a46" stroke-width="2" stroke-linecap="round">
        <path d="M20 41L14 31"/>
        <path d="M24 37L15 25"/>
        <path d="M29 33L20 21"/>
        <path d="M35 28L26 16"/>
        <path d="M26 39L15 40"/>
        <path d="M33 33L22 34"/>
        <path d="M40 27L29 27"/>
        <path d="M46 21L36 20"/>
      </g>
      <g>
        <circle cx="24" cy="44" r="6.3" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="34" cy="36" r="6" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="43" cy="27" r="5.5" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="22" cy="43" r="1.2" fill="#d8efff" opacity=".8"/>
        <circle cx="32" cy="35" r="1.1" fill="#d8efff" opacity=".8"/>
        <circle cx="41.5" cy="26" r="1" fill="#d8efff" opacity=".8"/>
      </g>
    </symbol>

    <symbol id="herb-sorrel" viewBox="0 0 64 64">
      <path d="M32 53C31 39 31 27 32 14" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M32 17C22 17 15 22 12 33C21 34 28 30 32 21" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M32 17C42 17 49 22 52 33C43 34 36 30 32 21" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M30 34C23 34 18 39 16 47C23 48 28 45 31 38" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M34 34C41 34 46 39 48 47C41 48 36 45 33 38" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.3"/>
    </symbol>

    <symbol id="herb-marigold" viewBox="0 0 64 64">
      <path d="M31 53C31 44 31 31 31 16" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 31C24 29 20 25 18 20C24 20 28 22 31 28" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M31 39C38 37 43 40 46 46C39 47 35 45 31 40" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="url(#marigoldOrange)" stroke="#d56a18" stroke-width="0.9">
        <ellipse cx="32" cy="14" rx="4.3" ry="11"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(22.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(45 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(67.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(90 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(112.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(135 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(157.5 32 14)"/>
      </g>
      <circle cx="32" cy="14" r="6" fill="#f5a11c" stroke="#cf7414" stroke-width="1"/>
    </symbol>

    <symbol id="herb-lavender" viewBox="0 0 64 64">
      <path d="M32 54C31 41 32 27 32 12" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 38C24 36 20 32 18 27C24 26 28 29 31 35" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M33 43C39 41 44 43 48 49C41 50 37 48 32 44" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="url(#lavenderPurple)" stroke="#704bbb" stroke-width=".9">
        <ellipse cx="32" cy="13" rx="4.2" ry="5.4"/>
        <ellipse cx="28.7" cy="18" rx="3.8" ry="5.1"/>
        <ellipse cx="35.3" cy="18" rx="3.8" ry="5.1"/>
        <ellipse cx="29.5" cy="23.2" rx="3.7" ry="4.8"/>
        <ellipse cx="34.5" cy="23.2" rx="3.7" ry="4.8"/>
        <ellipse cx="32" cy="28" rx="3.6" ry="4.6"/>
      </g>
    </symbol>
  </defs>
</svg>
<main class="game">
  <header>
    <h1>✦ Травяная поляна ✦</h1>
    <p>Собери запасы для палатки целителя</p>
  </header>

  <div class="stats">
    <div class="stat"><small>Очки</small><b id="score">0</b></div>
    <div class="stat"><small>Ходы</small><b id="moves">25</b></div>
    <div class="stat"><small>Рекорд</small><b id="best">0</b></div>
  </div>

  <p class="goal">За 25 ходов собери травы для целителя</p><div class="goals" id="goals" aria-label="Задания по сбору трав"></div>
  <div class="board" id="board" role="group" aria-label="Поле три в ряд, восемь на восемь"></div>

  <div class="bar">
    <button class="action" id="hint">✦ Подсказка</button>
    <button class="action" id="restart">↻ Новая игра</button>
  </div>

  <p class="info" id="info" aria-live="polite">Меняй местами соседние травы, чтобы собрать 3 и больше в ряд.</p>
  <div class="legend" id="legend"></div>
</main>
<div class="overlay" id="overlay">
  <div class="modal">
    <h2 id="endTitle"></h2>
    <p id="endText"></p>
    <button class="action" id="again">Сыграть ещё</button>
  </div>
</div>

</div>
</div>
<script>
(function(){const button=document.getElementById('herb-toggle'),content=document.getElementById('herb-content');if(!button||button.dataset.bound)return;button.dataset.bound='1';button.addEventListener('click',()=>{const open=content.hidden;content.hidden=!open;button.setAttribute('aria-expanded',String(open));button.textContent=open?'✦ Травяная поляна · Свернуть игру ▴':'✦ Травяная поляна · Открыть игру ▾';})})();
</script>
<script>
(()=>{
'use strict';
if(!document.getElementById('herb-forum'))return;
const N=8,MAX_MOVES=25;
const herbs=[
{name:'Кошачья мята',id:'catmint',tint:'#93d071'},
{name:'Мак',id:'poppy',tint:'#db685f'},
{name:'Ромашка',id:'camomile',tint:'#f0dd95'},
{name:'Можжевельник',id:'juniper',tint:'#6ea8d9'},
{name:'Щавель',id:'sorrel',tint:'#7fc16a'},
{name:'Календула',id:'marigold',tint:'#efad4d'}
];
const el=id=>document.getElementById(id),boardEl=el('board');
const pause=ms=>new Promise(r=>setTimeout(r,ms));
const idx=(r,c)=>r*N+c,row=i=>Math.floor(i/N),col=i=>i%N;
const adjacent=(a,b)=>Math.abs(row(a)-row(b))+Math.abs(col(a)-col(b))===1;
const random=()=>Math.floor(Math.random()*herbs.length);
let nextId=0,board=[],score=0,moves=MAX_MOVES,selected=null,busy=false,ended=false;
let hintTimer=null,session=0,goals=[];
let best=0;try{best=Number(localStorage.getItem('herbMatchBest')||0)}catch{}
const piece=(type,special=null)=>({id:++nextId,type,special});
const symbol=h=>`<svg viewBox="0 0 64 64" aria-hidden="true"><use href="#herb-${h.id}"></use></svg>`;
el('legend').innerHTML=herbs.map(h=>`<div class="legend-item">${symbol(h)}<span>${h.name}</span></div>`).join('');
function say(t){el('info').textContent=t}
function update(){
el('score').textContent=score;el('moves').textContent=moves;el('best').textContent=best;
el('goals').innerHTML=goals.map(g=>`<div class="goal-chip ${g.left===0?'done':''}">${symbol(herbs[g.type])}<span>${herbs[g.type].name}: <b>${g.left===0?'✓':g.left}</b></span></div>`).join('');
}
function scan(b){
const groups=[];const get=i=>b[i]?.type;
for(let r=0;r<N;r++){let c=0;while(c<N){let e=c+1;while(e<N&&get(idx(r,c))!=null&&get(idx(r,e))===get(idx(r,c)))e++;if(get(idx(r,c))!=null&&e-c>=3)groups.push({line:Array.from({length:e-c},(_,k)=>idx(r,c+k)),dir:'row'});c=e}}
for(let c=0;c<N;c++){let r=0;while(r<N){let e=r+1;while(e<N&&get(idx(r,c))!=null&&get(idx(e,c))===get(idx(r,c)))e++;if(get(idx(r,c))!=null&&e-r>=3)groups.push({line:Array.from({length:e-r},(_,k)=>idx(r+k,c)),dir:'col'});r=e}}
// 2x2 squares produce an exploding herb even if they do not form a line.
const squares=[];for(let r=0;r<N-1;r++)for(let c=0;c<N-1;c++){const sq=[idx(r,c),idx(r+1,c),idx(r,c+1),idx(r+1,c+1)];if(get(sq[0])!=null&&sq.every(i=>get(i)===get(sq[0])))squares.push(sq)}
return {groups,squares};
}
function canMove(a,b){
if(board[a]?.special==='bomb'||board[b]?.special==='bomb')return true;
[board[a],board[b]]=[board[b],board[a]];
const s=scan(board);const ok=s.groups.length>0||s.squares.length>0;
[board[a],board[b]]=[board[b],board[a]];
return ok;
}
function validMoves(){
const result=[];for(let i=0;i<N*N;i++)for(const j of [i+1,i+N])if(j<N*N&&adjacent(i,j)&&canMove(i,j))result.push([i,j]);
return result;
}
function fresh(){
for(let attempt=0;attempt<200;attempt++){
board=Array(N*N).fill(null);
for(let i=0;i<board.length;i++){
const choices=herbs.map((_,k)=>k).filter(t=>!(col(i)>=2&&board[i-1]?.type===t&&board[i-2]?.type===t)&&!(row(i)>=2&&board[i-N]?.type===t&&board[i-2*N]?.type===t)&&!(row(i)>=1&&col(i)>=1&&board[i-1]?.type===t&&board[i-N]?.type===t&&board[i-N-1]?.type===t));
board[i]=piece(choices[Math.floor(Math.random()*choices.length)]);
}
if(validMoves().length)return;
}
}
function draw({animate=true}={}){
const previous=new Map();
if(animate)for(const node of boardEl.children)previous.set(Number(node.dataset.id),node.getBoundingClientRect());
const fragment=document.createDocumentFragment();
board.forEach((p,i)=>{
const node=document.createElement('button');node.type='button';node.className='tile'+(selected===i?' selected':'')+(p?.special?' '+p.special:'');
node.dataset.i=i;node.dataset.id=p?.id||0;
node.setAttribute('aria-label',`Ряд ${row(i)+1}, столбец ${col(i)+1}: ${p?(p.special?p.special+' ':'')+(p.special==='bomb'?'Цветная бомба':herbs[p.type].name):'пусто'}`);
if(p){
node.style.setProperty('--tileTint',p.type==null?'#a98be4':herbs[p.type].tint);
node.innerHTML=p.special==='bomb'?'<span class="bomb-core" aria-hidden="true"></span>':`<span class="herb-wrap" aria-hidden="true">${symbol(herbs[p.type])}</span>${p.special?'<span class="special-mark" aria-hidden="true">'+(p.special==='striped'?'↔':'✦')+'</span>':''}`;
}
fragment.append(node);
});
boardEl.replaceChildren(fragment);
if(!animate)return;
for(const node of boardEl.children){
const p=previous.get(Number(node.dataset.id));
if(p&&Number(node.dataset.id)>0){
const now=node.getBoundingClientRect(),dx=p.left-now.left,dy=p.top-now.top;
if(Math.abs(dx)+Math.abs(dy)>1)node.animate([{transform:`translate(${dx}px,${dy}px)`,zIndex:4},{transform:'translate(0,0)',zIndex:1}],{duration:300,easing:'cubic-bezier(.22,.8,.24,1)'});
}else if(Number(node.dataset.id)>0){node.classList.add('spawn');node.addEventListener('animationend',()=>node.classList.remove('spawn'),{once:true})}
}
}
function swap(a,b){[board[a],board[b]]=[board[b],board[a]]}
function addScore(amount){score+=amount;if(score>best){best=score;try{localStorage.setItem('herbMatchBest',String(best))}catch{}}}
function refill(){
for(let c=0;c<N;c++){let target=N-1;for(let r=N-1;r>=0;r--)if(board[idx(r,c)]!==null){board[idx(target,c)]=board[idx(r,c)];if(target!==r)board[idx(r,c)]=null;target--}
while(target>=0)board[idx(target--,c)]=piece(random());
}
}
function chosenSpecial(s,anchor){
// Priorities: five-line color bomb, 4-line stripe, 2x2 burst.
const options=[];
for(const g of s.groups)if(g.line.length>=5)options.push({indices:g.line,special:'bomb',power:30});
for(const g of s.groups)if(g.line.length===4)options.push({indices:g.line,special:'striped',power:20});
for(const sq of s.squares)options.push({indices:sq,special:'burst',power:10});
options.sort((a,b)=>b.power-a.power);
if(!options.length)return null;
const o=options[0];
const position=o.indices.includes(anchor)?anchor:o.indices[Math.floor(o.indices.length/2)];
return {...o,position};
}
function effectIndices(i,p,remove){
if(p.special==='striped'){
  for(let c=0;c<N;c++)remove.add(idx(row(i),c));
  for(let r=0;r<N;r++)remove.add(idx(r,col(i)));
}else if(p.special==='burst'){
  for(let r=Math.max(0,row(i)-1);r<=Math.min(N-1,row(i)+1);r++)for(let c=Math.max(0,col(i)-1);c<=Math.min(N-1,col(i)+1);c++)remove.add(idx(r,c));
}
}
async function resolve(anchor=-1,forced=null,run=session){
let chain=0;
while(run===session){
  const s=scan(board);
  if(!s.groups.length&&!s.squares.length&&!forced?.size)break;
  chain++;
  const remove=new Set(forced||[]);
  forced=null;
  for(const g of s.groups)g.line.forEach(i=>remove.add(i));
  for(const sq of s.squares)sq.forEach(i=>remove.add(i));
  const make=chosenSpecial(s,anchor);
  const protectedIndex=make?.position;
  // A newly created special piece is kept in the board.
  if(make&&board[protectedIndex]){
   board[protectedIndex]={...board[protectedIndex],special:make.special,type:make.special==='bomb'?null:board[protectedIndex].type};
   remove.delete(protectedIndex);
  }
  const activated=new Set();
  let expand=true;
  while(expand){
   expand=false;
   for(const i of [...remove]){
    const p=board[i];
    if(!p||!p.special||p.special==='bomb'||activated.has(p.id))continue;
    activated.add(p.id);const count=remove.size;effectIndices(i,p,remove);
    if(remove.size>count)expand=true;
   }
  }
  const gathered=new Map();
  for(const i of remove)if(board[i]?.type!=null)gathered.set(board[i].type,(gathered.get(board[i].type)||0)+1);
  for(const g of goals)g.left=Math.max(0,g.left-(gathered.get(g.type)||0));
  addScore(remove.size*60*chain+(make?150:0));
  say(make?`Создан бонус: ${make.special==='bomb'?'цветная бомба':make.special==='striped'?'полосатая трава':'взрывная трава'}!`:chain>1?`Каскад ×${chain}! Собрано ${remove.size} трав.`:`Собрано ${remove.size} трав!`);
  update();draw();
  await pause(160);if(run!==session)return;
  for(const i of remove){const node=boardEl.children[i];if(node)node.classList.add('disappear')}
  await pause(250);if(run!==session)return;
  for(const i of remove)board[i]=null;
  refill();draw();await pause(330);
  anchor=-1;
}
}
async function activateBomb(a,b,run){
const first=board[a],second=board[b],remove=new Set([a,b]);
if(first.special==='bomb'&&second.special==='bomb'){
  for(let i=0;i<N*N;i++)remove.add(i);
}else{
  const other=first.special==='bomb'?second:first;
  if(other.type!=null)for(let i=0;i<N*N;i++)if(board[i]?.type===other.type)remove.add(i);
}
// Bomb interactions with other specials also trigger their abilities.
const expanded=new Set();
for(const i of [...remove])if(board[i]?.special&&board[i].special!=='bomb'&&!expanded.has(i)){expanded.add(i);effectIndices(i,board[i],remove)}
await resolve(-1,remove,run);
}
function finish(){
ended=true;const won=goals.every(g=>g.left===0);
el('endTitle').textContent=won?'Все травы собраны!':'Запасы закончились';
el('endText').textContent=won?`Целитель получил все травы! Результат: ${score} очков.`:`Набрано ${score} очков. Не хватило: ${goals.filter(g=>g.left).map(g=>herbs[g.type].name+' ×'+g.left).join(', ')}.`;
el('overlay').classList.add('show');
}
async function play(a,b){
if(busy||ended||!adjacent(a,b))return;
busy=true;selected=null;const run=session;
const specialBomb=board[a]?.special==='bomb'||board[b]?.special==='bomb';
swap(a,b);draw();await pause(300);
if(run!==session)return;
const s=scan(board);
if(!specialBomb&&!s.groups.length&&!s.squares.length){
  swap(a,b);draw();say('Нужно собрать ряд из 3 трав или квадрат 2×2.');busy=false;return;
}
moves--;update();
if(specialBomb)await activateBomb(a,b,run);else await resolve(b,null,run);
if(run!==session)return;
if(goals.every(g=>g.left===0)||moves<=0){finish();busy=false;return}
if(!validMoves().length){say('Ходов нет — перемешиваем поляну.');await pause(300);if(run!==session)return;shuffle()}
busy=false;
}
function shuffle(){
const pieces=board.slice();
for(let t=0;t<300;t++){
  for(let i=pieces.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[pieces[i],pieces[j]]=[pieces[j],pieces[i]]}
  board=pieces.slice();const s=scan(board);if(!s.groups.length&&!s.squares.length&&validMoves().length){draw();return}
}
fresh();draw();
}
function choose(i){
if(busy||ended)return;
if(selected===null){selected=i;draw({animate:false});return}
if(selected===i){selected=null;draw({animate:false});return}
const a=selected;
if(adjacent(a,i))play(a,i);else{selected=i;draw({animate:false})}
}
let suppressClick=false,start=null;
boardEl.addEventListener('click',e=>{if(suppressClick){suppressClick=false;return}const node=e.target.closest('.tile');if(node)choose(Number(node.dataset.i))});
boardEl.addEventListener('pointerdown',e=>{const node=e.target.closest('.tile');if(node)start={i:Number(node.dataset.i),x:e.clientX,y:e.clientY}});
boardEl.addEventListener('pointerup',e=>{
if(!start||busy||ended)return;
const dx=e.clientX-start.x,dy=e.clientY-start.y;
if(Math.max(Math.abs(dx),Math.abs(dy))>22){
  const r=row(start.i)+(Math.abs(dy)>Math.abs(dx)?Math.sign(dy):0);
  const c=col(start.i)+(Math.abs(dx)>=Math.abs(dy)?Math.sign(dx):0);
  if(r>=0&&r<N&&c>=0&&c<N){suppressClick=true;play(start.i,idx(r,c))}
}
start=null;
});
boardEl.addEventListener('pointercancel',()=>start=null);
el('hint').addEventListener('click',()=>{
if(busy||ended)return;
const list=validMoves();if(!list.length)return;
const pair=list[Math.floor(Math.random()*list.length)];
boardEl.querySelectorAll('.hint').forEach(n=>n.classList.remove('hint'));
pair.forEach(i=>boardEl.children[i].classList.add('hint'));
say('Перемести одну подсвеченную траву на место другой.');
clearTimeout(hintTimer);hintTimer=setTimeout(()=>boardEl.querySelectorAll('.hint').forEach(n=>n.classList.remove('hint')),2200);
});
function reset(){
session++;clearTimeout(hintTimer);score=0;moves=MAX_MOVES;selected=null;busy=false;ended=false;
el('overlay').classList.remove('show');
const chosen=herbs.map((_,i)=>i).sort(()=>Math.random()-.5).slice(0,3);
goals=chosen.map((type,i)=>({type,left:[12,10,8][i]}));
fresh();draw({animate:false});update();
say('3 в ряд — сбор. 4 в ряд — полосатая трава. Квадрат 2×2 — взрыв. 5 в ряд — цветная бомба.');
}
el('restart').addEventListener('click',reset);
el('again').addEventListener('click',reset);
reset();
})();
</script>
[/html]

UPD: другая версия, должна быть с прогрессирующей сложностью

[html]
<style>
#herb-forum{
  --bg:#101d19;
  --panel:#20372b;
  --panel-2:#2b4736;
  --cream:#f8ebcf;
  --mint:#a6d99a;
  --gold:#e9c77e;
  --line:#5d7454;
}
#herb-forum *{box-sizing:border-box}
#herb-forum{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f8ebcf;
 
 
 
 
 
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--cream);
 
}
#herb-forum .game{
  width:min(100%,640px);
  background:linear-gradient(180deg,#22382d 0%,#17271f 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(13px,3vw,24px);
  box-shadow:0 24px 80px #0007;
}
#herb-forum header{text-align:center}
#herb-forum h1{
  font-family:Georgia,serif;
  margin:0;
  font-size:clamp(29px,6vw,39px);
  font-weight:500;
  color:#f6dfab;
  letter-spacing:.02em;
}
#herb-forum header p{
  margin:7px 0 16px;
  color:#b3cbb4;
  font-size:14px;
}
#herb-forum .stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:14px;
}
#herb-forum .stat{
  background:linear-gradient(180deg,#314f3d,#294436);
  border:1px solid #49634c;
  border-radius:13px;
  padding:9px;
  text-align:center;
}
#herb-forum .stat small{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:#bad2bd;
}
#herb-forum .stat b{font-size:24px;color:#fff0c7}
#herb-forum .goal{text-align:center;margin:0 0 12px;color:#cbdabc;font-size:13px}
#herb-forum .board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
  background:
    linear-gradient(180deg,#38553f,#314c38);
  border:7px solid #395741;
  border-radius:20px;
  padding:2px;
  touch-action:pan-y;
  user-select:none;
}
#herb-forum .tile{
  aspect-ratio:1;
  border:1px solid #ffffff18;
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#5c785b,#3a5841);
  box-shadow:inset 0 1px #ffffff25, 0 2px 6px #00000025;
  transition:transform .12s, background .12s, box-shadow .12s;
}
#herb-forum .tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 35%, var(--tileTint, #94b594), transparent 62%);
  opacity:.28;
  pointer-events:none;
}
#herb-forum .tile::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:9px;
  border:1px solid #ffffff10;
  pointer-events:none;
}
#herb-forum .tile:hover{transform:translateY(-1px)}
#herb-forum .tile:focus-visible{outline:3px solid #fff2bc;outline-offset:-3px}
#herb-forum .tile.selected{
  background:linear-gradient(145deg,#8e7a46,#72613d);
  outline:3px solid #f9d48d;
  z-index:1;
  transform:scale(1.065);
  box-shadow:0 0 0 3px #f9d48d22, 0 8px 18px #0006;
}
#herb-forum .tile.hint{animation:hint 1s infinite}
#herb-forum .herb-wrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  filter:drop-shadow(0 3px 2px #0004);
}
#herb-forum .herb-icon{
  width:100%;
  height:100%;
  display:block;
}
#herb-forum .tile.bad{animation:shake .22s}
#herb-forum button{font:inherit}
#herb-forum .bar{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px}
#herb-forum .action{
  border:1px solid #648366;
  background:linear-gradient(180deg,#3c6549,#31563f);
  color:#f7eed5;
  border-radius:12px;
  padding:10px 15px;
  cursor:pointer;
  font-weight:650;
}
#herb-forum .action:hover{background:linear-gradient(180deg,#467853,#386746)}
#herb-forum .legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  justify-content:center;
  margin-top:17px;
}
#herb-forum .legend .legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#ceddcc;
  background:#243b2f;
  border:1px solid #3f5d48;
  border-radius:12px;
  padding:7px 9px;
}
#herb-forum .legend .legend-item svg{width:30px;height:30px;flex:0 0 30px;filter:drop-shadow(0 2px 1px #0003)}
#herb-forum .info{text-align:center;min-height:38px;margin:13px 0 0;color:#f4d992;font-size:14px}
#herb-forum .overlay{position:fixed;inset:0;background:#07110ccc;display:none;place-items:center;padding:20px;z-index:10}
#herb-forum .overlay.show{display:grid}
#herb-forum .modal{
  max-width:370px;
  width:100%;
  background:#254231;
  border:1px solid #94a77a;
  border-radius:20px;
  padding:24px;
  text-align:center;
  box-shadow:0 15px 80px #000a;
}
#herb-forum .modal h2{font-family:Georgia,serif;font-size:28px;color:#f4da9e;margin:0 0 10px}
#herb-forum .modal p{line-height:1.5;color:#dfebd8}
#herb-forum .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes  hint{50%{box-shadow:0 0 0 4px #f8df93}}
@keyframes  shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:520px){#herb-forum .legend{grid-template-columns:1fr 1fr}}
@media (max-width:420px){#herb-forum .game{padding:11px}
#herb-forum .board{gap:3px;border-width:5px}
#herb-forum .tile{border-radius:9px}
#herb-forum .legend{grid-template-columns:1fr}}
#herb-forum .goals{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 12px}
#herb-forum .goal-chip{display:flex;align-items:center;gap:7px;background:#263f31;border:1px solid #557353;border-radius:13px;padding:5px 11px;font-size:13px}
#herb-forum .goal-chip svg{width:29px;height:29px;filter:drop-shadow(0 2px 2px #0005)}
#herb-forum .goal-chip.done{border-color:#e8d392;background:#435537}
#herb-forum .tile{will-change:transform}
#herb-forum .tile.striped:after{border:3px dashed #f9ecad;inset:4px;box-shadow:0 0 7px #eed28d}
#herb-forum .tile.burst:after{border:3px solid #fac883;inset:6px;border-radius:50%;box-shadow:0 0 12px #f8bc60}
#herb-forum .tile.bomb{background:radial-gradient(circle,#8460a1,#374a55)}
#herb-forum .special-mark{position:absolute;right:0;bottom:0;background:#203326ed;color:#fff2bb;font-size:12px;line-height:17px;width:18px;height:18px;border-radius:8px 0 5px 0;z-index:3;text-align:center;font-weight:800}
#herb-forum .bomb-core{width:74%;height:74%;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#f5c85b,#f18c80,#aa86f0,#72c1aa,#f5c85b);border:3px solid #f8e6a9;box-shadow:0 0 16px #ffdf70a0,inset 0 0 0 5px #322a40;position:relative}
#herb-forum .bomb-core:after{content:"✦";font-size:clamp(15px,3.4vw,27px);color:#fff4ca;text-shadow:0 0 8px white}
#herb-forum .tile.disappear{animation:vanish .27s ease-in forwards}
#herb-forum .tile.spawn{animation:spawn .33s cubic-bezier(.2,.7,.2,1) both}
@keyframes  vanish{to{opacity:0;transform:scale(.18) rotate(20deg);filter:brightness(2)}}
@keyframes  spawn{from{opacity:0;transform:translateY(-40px) scale(.72)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){#herb-forum .tile, #herb-forum .tile.disappear, #herb-forum .tile.spawn{animation-duration:.01ms!important;transition:none!important}}
#herb-forum{width:100%;max-width:640px;margin:12px auto;color:#f8ebcf;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#herb-forum,#herb-forum *{box-sizing:border-box}#herb-forum .game{width:100%;}#herb-forum .forum-toggle{width:100%;padding:13px 15px;background:#274333;color:#f2dfaf;border:1px solid #6b8558;border-radius:14px;cursor:pointer;text-align:left;font-weight:700}#herb-forum .forum-content[hidden]{display:none!important}#herb-forum .forum-content{padding-top:9px}#herb-forum .tile{padding:0}#herb-forum .board{width:100%}#herb-forum .tile svg{display:block}

#herb-forum .level-line{text-align:center;font-size:14px;color:#f4d99b;margin:1px 0 12px}
#herb-forum .level-line strong{font-size:18px;color:#fff3d0}
#herb-forum .tile .herb-wrap{width:100%;height:100%;transform:scale(1.13);transform-origin:center}
#herb-forum .tile .herb-icon{width:100%;height:100%}
#herb-forum .tile .special-mark{transform:scale(.82);transform-origin:bottom right}
</style>
<div id="herb-forum">
<button class="forum-toggle" type="button" id="herb-toggle" aria-expanded="false">✦ Травяная поляна · Открыть игру ▾</button>
<div class="forum-content" id="herb-content" hidden>
<svg width="0" height="0" aria-hidden="true" focusable="false" class="sr-only"> height="0" aria-hidden="true" focusable="false" class="sr-only">
  <defs>
    <linearGradient id="leafGreen" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#8fd26b"/>
      <stop offset="1" stop-color="#3f8b40"/>
    </linearGradient>
    <linearGradient id="leafDark" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#75bb55"/>
      <stop offset="1" stop-color="#2f6f35"/>
    </linearGradient>
    <linearGradient id="stem" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#89c96f"/>
      <stop offset="1" stop-color="#44753f"/>
    </linearGradient>
    <linearGradient id="purpleBloom" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#d8b8ff"/>
      <stop offset="1" stop-color="#8f61d9"/>
    </linearGradient>
    <linearGradient id="poppyRed" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#ff8f7e"/>
      <stop offset="1" stop-color="#d5362d"/>
    </linearGradient>
    <radialGradient id="goldCenter" cx="50%" cy="50%" r="60%">
      <stop offset="0" stop-color="#ffe894"/>
      <stop offset="1" stop-color="#d7a83d"/>
    </radialGradient>
    <linearGradient id="berryBlue" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#8bc7ff"/>
      <stop offset="1" stop-color="#4569bb"/>
    </linearGradient>
    <linearGradient id="lavenderPurple" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#d7c1ff"/>
      <stop offset="1" stop-color="#7a59d1"/>
    </linearGradient>
    <linearGradient id="marigoldOrange" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#ffd16a"/>
      <stop offset="1" stop-color="#ef7d24"/>
    </linearGradient>

    <symbol id="herb-catmint" viewBox="0 0 64 64">
      <path d="M32 54C30 40 31 25 32 10" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 29C22 26 18 22 16 16C24 15 29 18 33 26" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M33 33C42 30 47 24 49 18C40 19 36 23 31 31" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M31 42C22 41 17 44 14 49C23 51 28 49 33 44" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <path d="M34 45C42 43 47 46 50 52C42 53 38 51 32 47" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.4" stroke-linejoin="round"/>
      <g stroke="#7d51c5" stroke-width="1">
        <ellipse cx="34" cy="14" rx="4.5" ry="5.2" fill="url(#purpleBloom)"/>
        <ellipse cx="29" cy="18" rx="4.2" ry="4.8" fill="url(#purpleBloom)"/>
        <ellipse cx="36.5" cy="20" rx="4" ry="4.6" fill="url(#purpleBloom)"/>
        <ellipse cx="31.5" cy="24" rx="3.8" ry="4.4" fill="url(#purpleBloom)"/>
      </g>
    </symbol>

    <symbol id="herb-poppy" viewBox="0 0 64 64">
      <path d="M32 53C32 41 32 30 31 16" fill="none" stroke="url(#stem)" stroke-width="3.2" stroke-linecap="round"/>
      <path d="M28 26C22 27 18 31 18 37C24 37 28 35 31 31" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M35 29C41 29 46 32 48 38C41 38 37 36 32 32" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g stroke="#b2231d" stroke-width="1.2">
        <path d="M32 13C25 7 18 12 19 21C24 21 28 19 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C39 7 46 12 45 21C40 21 36 19 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C24 15 22 24 27 29C30 25 31 21 32 16" fill="url(#poppyRed)"/>
        <path d="M32 13C40 15 42 24 37 29C34 25 33 21 32 16" fill="url(#poppyRed)"/>
      </g>
      <circle cx="32" cy="16" r="5.2" fill="#342a2a"/>
      <circle cx="32" cy="16" r="2" fill="#f2d96a"/>
    </symbol>

    <symbol id="herb-camomile" viewBox="0 0 64 64">
      <path d="M31 53C31 42 31 27 32 14" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 33C24 31 20 27 18 22C24 21 28 24 32 30" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M33 39C40 37 45 40 48 46C41 47 37 45 31 40" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="#fffdf6" stroke="#e2dfd2" stroke-width="0.9">
        <ellipse cx="32" cy="12" rx="4" ry="11"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(30 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(60 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(90 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(120 32 12)"/>
        <ellipse cx="32" cy="12" rx="4" ry="11" transform="rotate(150 32 12)"/>
      </g>
      <circle cx="32" cy="12" r="7" fill="url(#goldCenter)" stroke="#cc9830" stroke-width="1"/>
    </symbol>

    <symbol id="herb-juniper" viewBox="0 0 64 64">
      <path d="M16 45C28 36 39 27 50 14" fill="none" stroke="#59854c" stroke-width="3" stroke-linecap="round"/>
      <g stroke="#4d7a46" stroke-width="2" stroke-linecap="round">
        <path d="M20 41L14 31"/>
        <path d="M24 37L15 25"/>
        <path d="M29 33L20 21"/>
        <path d="M35 28L26 16"/>
        <path d="M26 39L15 40"/>
        <path d="M33 33L22 34"/>
        <path d="M40 27L29 27"/>
        <path d="M46 21L36 20"/>
      </g>
      <g>
        <circle cx="24" cy="44" r="6.3" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="34" cy="36" r="6" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="43" cy="27" r="5.5" fill="url(#berryBlue)" stroke="#385796" stroke-width="1.1"/>
        <circle cx="22" cy="43" r="1.2" fill="#d8efff" opacity=".8"/>
        <circle cx="32" cy="35" r="1.1" fill="#d8efff" opacity=".8"/>
        <circle cx="41.5" cy="26" r="1" fill="#d8efff" opacity=".8"/>
      </g>
    </symbol>

    <symbol id="herb-sorrel" viewBox="0 0 64 64">
      <path d="M32 53C31 39 31 27 32 14" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M32 17C22 17 15 22 12 33C21 34 28 30 32 21" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M32 17C42 17 49 22 52 33C43 34 36 30 32 21" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M30 34C23 34 18 39 16 47C23 48 28 45 31 38" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.3"/>
      <path d="M34 34C41 34 46 39 48 47C41 48 36 45 33 38" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.3"/>
    </symbol>

    <symbol id="herb-marigold" viewBox="0 0 64 64">
      <path d="M31 53C31 44 31 31 31 16" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 31C24 29 20 25 18 20C24 20 28 22 31 28" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M31 39C38 37 43 40 46 46C39 47 35 45 31 40" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="url(#marigoldOrange)" stroke="#d56a18" stroke-width="0.9">
        <ellipse cx="32" cy="14" rx="4.3" ry="11"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(22.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(45 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(67.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(90 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(112.5 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(135 32 14)"/>
        <ellipse cx="32" cy="14" rx="4.3" ry="11" transform="rotate(157.5 32 14)"/>
      </g>
      <circle cx="32" cy="14" r="6" fill="#f5a11c" stroke="#cf7414" stroke-width="1"/>
    </symbol>

    <symbol id="herb-lavender" viewBox="0 0 64 64">
      <path d="M32 54C31 41 32 27 32 12" fill="none" stroke="url(#stem)" stroke-width="3" stroke-linecap="round"/>
      <path d="M31 38C24 36 20 32 18 27C24 26 28 29 31 35" fill="url(#leafGreen)" stroke="#2d6e33" stroke-width="1.2"/>
      <path d="M33 43C39 41 44 43 48 49C41 50 37 48 32 44" fill="url(#leafDark)" stroke="#2d6e33" stroke-width="1.2"/>
      <g fill="url(#lavenderPurple)" stroke="#704bbb" stroke-width=".9">
        <ellipse cx="32" cy="13" rx="4.2" ry="5.4"/>
        <ellipse cx="28.7" cy="18" rx="3.8" ry="5.1"/>
        <ellipse cx="35.3" cy="18" rx="3.8" ry="5.1"/>
        <ellipse cx="29.5" cy="23.2" rx="3.7" ry="4.8"/>
        <ellipse cx="34.5" cy="23.2" rx="3.7" ry="4.8"/>
        <ellipse cx="32" cy="28" rx="3.6" ry="4.6"/>
      </g>
    </symbol>
  </defs>
</svg>
<main class="game">
  <header>
    <h1>✦ Травяная поляна ✦</h1>
    <p>Собери запасы для палатки целителя</p>
  </header>

  <p class="level-line">Уровень <strong id="level">1</strong> · <span id="levelNote">Знакомство с поляной</span></p>
  <div class="stats">
    <div class="stat"><small>Очки</small><b id="score">0</b></div>
    <div class="stat"><small>Ходы</small><b id="moves">25</b></div>
    <div class="stat"><small>Рекорд</small><b id="best">0</b></div>
  </div>

  <p class="goal">Собери травы за отведённые ходы</p><div class="goals" id="goals" aria-label="Задания по сбору трав"></div>
  <div class="board" id="board" role="group" aria-label="Поле три в ряд, восемь на восемь"></div>

  <div class="bar">
    <button class="action" id="hint">✦ Подсказка</button>
    <button class="action" id="restart">↻ Новая игра</button>
  </div>

  <p class="info" id="info" aria-live="polite">Меняй местами соседние травы, чтобы собрать 3 и больше в ряд.</p>
  <div class="legend" id="legend"></div>
</main>
<div class="overlay" id="overlay">
  <div class="modal">
    <h2 id="endTitle"></h2>
    <p id="endText"></p>
    <button class="action" id="again">Сыграть ещё</button>
  </div>
</div>

</div>
</div>
<script>
(function(){const button=document.getElementById('herb-toggle'),content=document.getElementById('herb-content');if(!button||button.dataset.bound)return;button.dataset.bound='1';button.addEventListener('click',()=>{const open=content.hidden;content.hidden=!open;button.setAttribute('aria-expanded',String(open));button.textContent=open?'✦ Травяная поляна · Свернуть игру ▴':'✦ Травяная поляна · Открыть игру ▾';})})();
</script>
<script>
(()=>{
'use strict';
if(!document.getElementById('herb-forum'))return;
const N=8;
const herbs=[
{name:'Кошачья мята',id:'catmint',tint:'#93d071'},
{name:'Мак',id:'poppy',tint:'#db685f'},
{name:'Ромашка',id:'camomile',tint:'#f0dd95'},
{name:'Можжевельник',id:'juniper',tint:'#6ea8d9'},
{name:'Щавель',id:'sorrel',tint:'#7fc16a'},
{name:'Календула',id:'marigold',tint:'#efad4d'}
];
const el=id=>document.getElementById(id),boardEl=el('board');
const pause=ms=>new Promise(r=>setTimeout(r,ms));
const idx=(r,c)=>r*N+c,row=i=>Math.floor(i/N),col=i=>i%N;
const adjacent=(a,b)=>Math.abs(row(a)-row(b))+Math.abs(col(a)-col(b))===1;
const random=()=>Math.floor(Math.random()*herbs.length);
let nextId=0,board=[],score=0,moves=26,selected=null,busy=false,ended=false;
let hintTimer=null,session=0,goals=[],level=1,lastWin=false;
try{level=Math.max(1,Math.min(500,Number(localStorage.getItem('herbMatchLevel')||1)))}catch{}
function levelSettings(l){
// Modest ramp: 26 to 20 moves, no further move reductions.
const moves=Math.max(20,26-Math.floor((l-1)/3));
// Targets do grow, but remain bounded in relation to moves. Rotating objectives
// avoids requiring large amounts of a rare color in a single game.
const ramp=Math.min(6,Math.floor((l-1)/2));
const quantities=[7+ramp,6+ramp,5+ramp];
const cap=Math.floor(moves*.60);
return {moves,quantities:quantities.map(n=>Math.min(n,cap)),label:l<4?'Лесная опушка':l<9?'Глубокий лес':l<16?'Сложный сбор':'Мастер целительства'};
}
let best=0;try{best=Number(localStorage.getItem('herbMatchBest')||0)}catch{}
const piece=(type,special=null)=>({id:++nextId,type,special});
const symbol=h=>`<svg viewBox="5 3 54 54" aria-hidden="true"><use href="#herb-${h.id}"></use></svg>`;
el('legend').innerHTML=herbs.map(h=>`<div class="legend-item">${symbol(h)}<span>${h.name}</span></div>`).join('');
function say(t){el('info').textContent=t}
function update(){
el('score').textContent=score;el('moves').textContent=moves;el('best').textContent=best;el('level').textContent=level;el('levelNote').textContent=levelSettings(level).label;
el('goals').innerHTML=goals.map(g=>`<div class="goal-chip ${g.left===0?'done':''}">${symbol(herbs[g.type])}<span>${herbs[g.type].name}: <b>${g.left===0?'✓':g.left}</b></span></div>`).join('');
}
function scan(b){
const groups=[];const get=i=>b[i]?.type;
for(let r=0;r<N;r++){let c=0;while(c<N){let e=c+1;while(e<N&&get(idx(r,c))!=null&&get(idx(r,e))===get(idx(r,c)))e++;if(get(idx(r,c))!=null&&e-c>=3)groups.push({line:Array.from({length:e-c},(_,k)=>idx(r,c+k)),dir:'row'});c=e}}
for(let c=0;c<N;c++){let r=0;while(r<N){let e=r+1;while(e<N&&get(idx(r,c))!=null&&get(idx(e,c))===get(idx(r,c)))e++;if(get(idx(r,c))!=null&&e-r>=3)groups.push({line:Array.from({length:e-r},(_,k)=>idx(r+k,c)),dir:'col'});r=e}}
// 2x2 squares produce an exploding herb even if they do not form a line.
const squares=[];for(let r=0;r<N-1;r++)for(let c=0;c<N-1;c++){const sq=[idx(r,c),idx(r+1,c),idx(r,c+1),idx(r+1,c+1)];if(get(sq[0])!=null&&sq.every(i=>get(i)===get(sq[0])))squares.push(sq)}
return {groups,squares};
}
function canMove(a,b){
if(board[a]?.special==='bomb'||board[b]?.special==='bomb')return true;
[board[a],board[b]]=[board[b],board[a]];
const s=scan(board);const ok=s.groups.length>0||s.squares.length>0;
[board[a],board[b]]=[board[b],board[a]];
return ok;
}
function validMoves(){
const result=[];for(let i=0;i<N*N;i++)for(const j of [i+1,i+N])if(j<N*N&&adjacent(i,j)&&canMove(i,j))result.push([i,j]);
return result;
}
function fresh(){
for(let attempt=0;attempt<200;attempt++){
board=Array(N*N).fill(null);
for(let i=0;i<board.length;i++){
const choices=herbs.map((_,k)=>k).filter(t=>!(col(i)>=2&&board[i-1]?.type===t&&board[i-2]?.type===t)&&!(row(i)>=2&&board[i-N]?.type===t&&board[i-2*N]?.type===t)&&!(row(i)>=1&&col(i)>=1&&board[i-1]?.type===t&&board[i-N]?.type===t&&board[i-N-1]?.type===t));
board[i]=piece(choices[Math.floor(Math.random()*choices.length)]);
}
if(validMoves().length)return;
}
}
function draw({animate=true}={}){
const previous=new Map();
if(animate)for(const node of boardEl.children)previous.set(Number(node.dataset.id),node.getBoundingClientRect());
const fragment=document.createDocumentFragment();
board.forEach((p,i)=>{
const node=document.createElement('button');node.type='button';node.className='tile'+(selected===i?' selected':'')+(p?.special?' '+p.special:'');
node.dataset.i=i;node.dataset.id=p?.id||0;
node.setAttribute('aria-label',`Ряд ${row(i)+1}, столбец ${col(i)+1}: ${p?(p.special?p.special+' ':'')+(p.special==='bomb'?'Цветная бомба':herbs[p.type].name):'пусто'}`);
if(p){
node.style.setProperty('--tileTint',p.type==null?'#a98be4':herbs[p.type].tint);
node.innerHTML=p.special==='bomb'?'<span class="bomb-core" aria-hidden="true"></span>':`<span class="herb-wrap" aria-hidden="true">${symbol(herbs[p.type])}</span>${p.special?'<span class="special-mark" aria-hidden="true">'+(p.special==='striped'?'↔':'✦')+'</span>':''}`;
}
fragment.append(node);
});
boardEl.replaceChildren(fragment);
if(!animate)return;
for(const node of boardEl.children){
const p=previous.get(Number(node.dataset.id));
if(p&&Number(node.dataset.id)>0){
const now=node.getBoundingClientRect(),dx=p.left-now.left,dy=p.top-now.top;
if(Math.abs(dx)+Math.abs(dy)>1)node.animate([{transform:`translate(${dx}px,${dy}px)`,zIndex:4},{transform:'translate(0,0)',zIndex:1}],{duration:300,easing:'cubic-bezier(.22,.8,.24,1)'});
}else if(Number(node.dataset.id)>0){node.classList.add('spawn');node.addEventListener('animationend',()=>node.classList.remove('spawn'),{once:true})}
}
}
function swap(a,b){[board[a],board[b]]=[board[b],board[a]]}
function addScore(amount){score+=amount;if(score>best){best=score;try{localStorage.setItem('herbMatchBest',String(best))}catch{}}}
function refill(){
for(let c=0;c<N;c++){let target=N-1;for(let r=N-1;r>=0;r--)if(board[idx(r,c)]!==null){board[idx(target,c)]=board[idx(r,c)];if(target!==r)board[idx(r,c)]=null;target--}
while(target>=0)board[idx(target--,c)]=piece(random());
}
}
function chosenSpecial(s,anchor){
// Priorities: five-line color bomb, 4-line stripe, 2x2 burst.
const options=[];
for(const g of s.groups)if(g.line.length>=5)options.push({indices:g.line,special:'bomb',power:30});
for(const g of s.groups)if(g.line.length===4)options.push({indices:g.line,special:'striped',power:20});
for(const sq of s.squares)options.push({indices:sq,special:'burst',power:10});
options.sort((a,b)=>b.power-a.power);
if(!options.length)return null;
const o=options[0];
const position=o.indices.includes(anchor)?anchor:o.indices[Math.floor(o.indices.length/2)];
return {...o,position};
}
function effectIndices(i,p,remove){
if(p.special==='striped'){
  for(let c=0;c<N;c++)remove.add(idx(row(i),c));
  for(let r=0;r<N;r++)remove.add(idx(r,col(i)));
}else if(p.special==='burst'){
  for(let r=Math.max(0,row(i)-1);r<=Math.min(N-1,row(i)+1);r++)for(let c=Math.max(0,col(i)-1);c<=Math.min(N-1,col(i)+1);c++)remove.add(idx(r,c));
}
}
async function resolve(anchor=-1,forced=null,run=session){
let chain=0;
while(run===session){
  const s=scan(board);
  if(!s.groups.length&&!s.squares.length&&!forced?.size)break;
  chain++;
  const remove=new Set(forced||[]);
  forced=null;
  for(const g of s.groups)g.line.forEach(i=>remove.add(i));
  for(const sq of s.squares)sq.forEach(i=>remove.add(i));
  const make=chosenSpecial(s,anchor);
  const protectedIndex=make?.position;
  // A newly created special piece is kept in the board.
  if(make&&board[protectedIndex]){
   board[protectedIndex]={...board[protectedIndex],special:make.special,type:make.special==='bomb'?null:board[protectedIndex].type};
   remove.delete(protectedIndex);
  }
  const activated=new Set();
  let expand=true;
  while(expand){
   expand=false;
   for(const i of [...remove]){
    const p=board[i];
    if(!p||!p.special||p.special==='bomb'||activated.has(p.id))continue;
    activated.add(p.id);const count=remove.size;effectIndices(i,p,remove);
    if(remove.size>count)expand=true;
   }
  }
  const gathered=new Map();
  for(const i of remove)if(board[i]?.type!=null)gathered.set(board[i].type,(gathered.get(board[i].type)||0)+1);
  for(const g of goals)g.left=Math.max(0,g.left-(gathered.get(g.type)||0));
  addScore(remove.size*60*chain+(make?150:0));
  say(make?`Создан бонус: ${make.special==='bomb'?'цветная бомба':make.special==='striped'?'полосатая трава':'взрывная трава'}!`:chain>1?`Каскад ×${chain}! Собрано ${remove.size} трав.`:`Собрано ${remove.size} трав!`);
  update();draw();
  await pause(160);if(run!==session)return;
  for(const i of remove){const node=boardEl.children[i];if(node)node.classList.add('disappear')}
  await pause(250);if(run!==session)return;
  for(const i of remove)board[i]=null;
  refill();draw();await pause(330);
  anchor=-1;
}
}
async function activateBomb(a,b,run){
const first=board[a],second=board[b],remove=new Set([a,b]);
if(first.special==='bomb'&&second.special==='bomb'){
  for(let i=0;i<N*N;i++)remove.add(i);
}else{
  const other=first.special==='bomb'?second:first;
  if(other.type!=null)for(let i=0;i<N*N;i++)if(board[i]?.type===other.type)remove.add(i);
}
// Bomb interactions with other specials also trigger their abilities.
const expanded=new Set();
for(const i of [...remove])if(board[i]?.special&&board[i].special!=='bomb'&&!expanded.has(i)){expanded.add(i);effectIndices(i,board[i],remove)}
await resolve(-1,remove,run);
}
function finish(){
ended=true;const won=goals.every(g=>g.left===0);lastWin=won;
el('endTitle').textContent=won?`Уровень ${level} пройден!`:`Уровень ${level}: не хватило трав`;
el('endText').textContent=won?`Целитель получил все травы! Результат: ${score} очков. Следующий уровень будет немного сложнее.`:`Набрано ${score} очков. Осталось собрать: ${goals.filter(g=>g.left).map(g=>herbs[g.type].name+' ×'+g.left).join(', ')}. Попробуй ещё раз: каждый уровень можно пройти без покупок.`;
el('again').textContent=won?'Следующий уровень':'Повторить уровень';
el('overlay').classList.add('show');
}
async function play(a,b){
if(busy||ended||!adjacent(a,b))return;
busy=true;selected=null;const run=session;
const specialBomb=board[a]?.special==='bomb'||board[b]?.special==='bomb';
swap(a,b);draw();await pause(300);
if(run!==session)return;
const s=scan(board);
if(!specialBomb&&!s.groups.length&&!s.squares.length){
  swap(a,b);draw();say('Нужно собрать ряд из 3 трав или квадрат 2×2.');busy=false;return;
}
moves--;update();
if(specialBomb)await activateBomb(a,b,run);else await resolve(b,null,run);
if(run!==session)return;
if(goals.every(g=>g.left===0)||moves<=0){finish();busy=false;return}
if(!validMoves().length){say('Ходов нет — перемешиваем поляну.');await pause(300);if(run!==session)return;shuffle()}
busy=false;
}
function shuffle(){
const pieces=board.slice();
for(let t=0;t<300;t++){
  for(let i=pieces.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[pieces[i],pieces[j]]=[pieces[j],pieces[i]]}
  board=pieces.slice();const s=scan(board);if(!s.groups.length&&!s.squares.length&&validMoves().length){draw();return}
}
fresh();draw();
}
function choose(i){
if(busy||ended)return;
if(selected===null){selected=i;draw({animate:false});return}
if(selected===i){selected=null;draw({animate:false});return}
const a=selected;
if(adjacent(a,i))play(a,i);else{selected=i;draw({animate:false})}
}
let suppressClick=false,start=null;
boardEl.addEventListener('click',e=>{if(suppressClick){suppressClick=false;return}const node=e.target.closest('.tile');if(node)choose(Number(node.dataset.i))});
boardEl.addEventListener('pointerdown',e=>{const node=e.target.closest('.tile');if(node)start={i:Number(node.dataset.i),x:e.clientX,y:e.clientY}});
boardEl.addEventListener('pointerup',e=>{
if(!start||busy||ended)return;
const dx=e.clientX-start.x,dy=e.clientY-start.y;
if(Math.max(Math.abs(dx),Math.abs(dy))>22){
  const r=row(start.i)+(Math.abs(dy)>Math.abs(dx)?Math.sign(dy):0);
  const c=col(start.i)+(Math.abs(dx)>=Math.abs(dy)?Math.sign(dx):0);
  if(r>=0&&r<N&&c>=0&&c<N){suppressClick=true;play(start.i,idx(r,c))}
}
start=null;
});
boardEl.addEventListener('pointercancel',()=>start=null);
el('hint').addEventListener('click',()=>{
if(busy||ended)return;
const list=validMoves();if(!list.length)return;
const pair=list[Math.floor(Math.random()*list.length)];
boardEl.querySelectorAll('.hint').forEach(n=>n.classList.remove('hint'));
pair.forEach(i=>boardEl.children[i].classList.add('hint'));
say('Перемести одну подсвеченную траву на место другой.');
clearTimeout(hintTimer);hintTimer=setTimeout(()=>boardEl.querySelectorAll('.hint').forEach(n=>n.classList.remove('hint')),2200);
});
function reset(){
session++;clearTimeout(hintTimer);score=0;moves=levelSettings(level).moves;selected=null;busy=false;ended=false;lastWin=false;
el('overlay').classList.remove('show');
const chosen=herbs.map((_,i)=>i).sort(()=>Math.random()-.5).slice(0,3);
const settings=levelSettings(level);
goals=chosen.map((type,i)=>({type,left:settings.quantities[i]}));
fresh();draw({animate:false});update();
say('4 в ряд — полосатая, квадрат 2×2 — взрывная, 5 в ряд — цветная бомба.');
}
el('restart').addEventListener('click',reset);
el('again').addEventListener('click',()=>{
if(lastWin){level++;try{localStorage.setItem('herbMatchLevel',String(level))}catch{}}
reset();
});
reset();
})();
</script>
[/html]

после обновления страницы прогресс сохраняется!! но как будто не очень сложно все еще, он каждые 3 уровня усложняет, уменьшая количество ходов. надо балансить это дело и наверное делать меньше экран, чтоб помещался хд пишите фидбэк, я и мой нейросетевой друг поправим это дело

Зайцезвёзд, круто играется!!