[html]<!-- включено по умолчанию -->
<div id="nota-lottery" class="nota-lottery" data-used="5, 7, 9, 11, 12, 13, 21 "></div>
<script>
(() => {
  const ROOT_ID = 'nota-lottery';
  const root = document.getElementById(ROOT_ID);
  if (!root) return;

  // ==== �� Настройки (меняй под себя) ====
  const TICKET_COUNT = 24;     // общее количество билетов
  const COLUMNS = 6;          // количество колонок в ряду
  const GRID_WIDTH = '700px';  // ЖЁСТКАЯ ширина сетки (пример: '900px', '100%', 'min(100%, 920px)')

  // Полные URL изображений (можно указывать с любых хостингов)
  const variantImages = [
    'https://upforme.ru/uploads/001c/93/00/3/342074.png',
    'https://upforme.ru/uploads/001c/93/00/3/342074.png',
    'https://upforme.ru/uploads/001c/93/00/3/342074.png',
    'https://upforme.ru/uploads/001c/93/00/3/342074.png',
    'https://upforme.ru/uploads/001c/93/00/3/342074.png'
  ];
  const usedImage = 'https://upforme.ru/uploads/001c/93/00/3/342074.png';

  const T = { gridCls:'nl-grid', ticketCls:'nl-ticket', numCls:'nl-num', usedCls:'used' };

  // ==== Стили ====
  (function injectStyles(){
    if (document.getElementById('nl-core-styles')) return;
    const css = `
      #${ROOT_ID}.{grid}{
        display:grid;
        grid-template-columns:repeat(${COLUMNS},minmax(0,1fr));
        gap:8px;
        width:100%;
        max-width:${GRID_WIDTH};
      }
      #${ROOT_ID} .${T.ticketCls}{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
      }
      #${ROOT_ID} .${T.ticketCls} img{
        width:100%;
        height:auto;
        display:block;
        user-select:none;
        -webkit-user-drag:none;
        opacity:0.9;
      }
      #${ROOT_ID} .${T.numCls}{
        display:block;
        font-size:12px;
        line-height:1;
        text-align:center;
      }
      #${ROOT_ID} .${T.ticketCls}.${T.usedCls} img{
        filter:grayscale(100%);
        opacity:.5;
      }
    `.replace('{grid}', T.gridCls);
    const st = document.createElement('style');
    st.id = 'nl-core-styles';
    st.textContent = css;
    document.head.appendChild(st);
  })();

  // ==== Утилиты ====
  const parseUsed = (str) => new Set(
    (str||'').split(/[,s]+/).map(s=>s.trim()).filter(Boolean)
      .map(x=>parseInt(x,10)).filter(n=>Number.isInteger(n)&&n>=1&&n<=TICKET_COUNT)
  );
  const serializeUsed = (set) => Array.from(set).sort((a,b)=>a-b).join(', ');

  // Детерминированный выбор варианта по номеру
  const pickVariantIndex = (n) => {
    const len = Math.max(variantImages.length, 1);
    let x = (n * 9301 + 49297) % 233280;
    return x % len;
  };

  // ==== Построение ====
  root.classList.add(T.gridCls);
  const build = () => {
    root.innerHTML = '';
    const usedSet = parseUsed(root.getAttribute('data-used')||'');
    const frag = document.createDocumentFragment();
    for (let i = 1; i <= TICKET_COUNT; i++){
      const wrap = document.createElement('div');
      wrap.className = T.ticketCls;
      wrap.dataset.id = String(i);

      const img = document.createElement('img');
      if (usedSet.has(i)){
        img.src = usedImage;
        wrap.classList.add(T.usedCls);
      } else {
        img.src = variantImages[pickVariantIndex(i)];
      }
      img.alt = `#${i}`;

      const num = document.createElement('span');
      num.className = T.numCls;
      num.textContent = `#${i}`;

      wrap.appendChild(img);
      wrap.appendChild(num);
      frag.appendChild(wrap);
    }
    root.appendChild(frag);
  };
  build();

  // ==== API ====
  const API = {
    getUsed: ()=>Array.from(parseUsed(root.getAttribute('data-used')||'')).sort((a,b)=>a-b),
    setUsed: (val)=>{
      let set;
      if (val instanceof Set) set=val;
      else if (Array.isArray(val)) set=new Set(val.map(n=>parseInt(n,10)));
      else set=parseUsed(String(val||''));

      root.setAttribute('data-used', serializeUsed(set));
      root.querySelectorAll('.'+T.ticketCls).forEach(div=>{
        const id=parseInt(div.dataset.id,10);
        const img=div.querySelector('img');
        if(!img) return;
        if(set.has(id)){ div.classList.add(T.usedCls); img.src = usedImage; }
        else{ div.classList.remove(T.usedCls); img.src = variantImages[pickVariantIndex(id)]; }
      });
      return set;
    },
    toggle:(id)=>{
      const set=new Set(API.getUsed());
      id=parseInt(id,10);
      if(!Number.isInteger(id)||id<1||id>TICKET_COUNT) return set;
      if(set.has(id)) set.delete(id); else set.add(id);
      return API.setUsed(set);
    },
    serialize:()=>serializeUsed(new Set(API.getUsed()))
  };
  window.NL = API;
})();
</script>[/html]