[html]<style>
  .forum-table-container {
    background-image: url(https://upforme.ru/uploads/0019/49/95/2/114311.jpg);  /* Фон подложки */
    color: #2e2d2d;
    padding: 20px;
  text-align: center;
    border-radius: 10px;
    font-family: American Typewriter , sans-serif;
  }
  .forum-table-header {
    text-align: center;
    font-family: American Typewriter , serif;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .forum-table-columns {
    display: flex;
text-align: center;
    border-radius: 10px;
    gap: 15px;
  }
  .forum-table-column {
    flex: 1;
  text-align: center !important;
    background-color: #dddddd;
    color: #2e2d2d;
    border-radius: 10px;
    padding: 15px;
  }
  .forum-table-column h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-transform: uppercase;
    margin-top: 0;
  }
  .forum-table-column hr {
    border: none;
text-align: center;
    height: 1px;
    background-color: #2e2d2d;
    margin: 10px 0;
  }
  .forum-table-column ul {
    list-style-type: none;
    padding: 0;
text-align: center;
    margin: 0;
  }
  .forum-table-column li {
    margin-bottom: 10px;
  text-align: center;
  }
  .forum-table-footer {
    background-color: #dddddd;
    color: #2e2d2d;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    font-weight: bold;
  }
  .forum-table-footer .highlight {
    font-weight: bold;
  text-align: center;
  }
</style>

<div class="forum-table-container">
 
<div class="forum-table-column">
      <h1>MEMO</h1>
      <hr>
      <ul>
        <li>Написала простенький скрипт для игры в поиск совпадений. Ищем пары, тренируем мозг в перерывах между постами.</li>

      </ul>
    </div>

</div>
[/html]

[html]<!-- === MEMO 8×6 (48 карточек), серый, American Typewriter, хороший рандом === -->
<style>
.memo{
  --tile:96px; --gap:12px; --radius:14px; --cols:8;      /* кол-во колонок и размер ячейки */
  --front:#1d1d1f; --back:#2a2a2c; --accent:#9aa0a6;
  --ok:#9b9b9b; --text:#e6e6e6; --muted:#b5b5b5; --blank:#242426;
  font-family:"American Typewriter","Georgia","Times New Roman",serif;
  max-width:950px; margin:16px auto; padding:14px;
  background:linear-gradient(180deg,#151516,#1c1c1e);
  border-radius:20px; box-shadow:10 10px 28px rgba(0,0,0,.45); color:var(--text)
}
.memo h3{margin:0 0 .5rem;font-size:20px}
.memo .memo__controls{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.memo .memo__btn{appearance:none;border:1px solid #3a3a3c;background:#171718;color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer;font-size:13px}
.memo .memo__btn:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(154,160,166,.15) inset}
.memo .memo__status{font-size:13px;color:var(--muted)}
.memo .grid{display:grid;grid-template-columns:repeat(var(--cols),var(--tile));gap:var(--gap);justify-content:center}

@media (max-width:880px){.memo{--tile:86px}}
@media (max-width:760px){.memo{--cols:7;--tile:78px}}
@media (max-width:620px){.memo{--cols:6;--tile:70px}}
@media (max-width:520px){.memo{--cols:5;--tile:64px}}

.memo input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.memo .memo-card{width:var(--tile);height:var(--tile);border-radius:var(--radius);position:relative;perspective:900px}
.memo .memo-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius);
  transition:transform .5s,box-shadow .2s;backface-visibility:hidden;user-select:none}
.memo .memo-front{background:var(--front);border:1px solid #2c2c2e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.memo .memo-back{background:var(--back);border:1px dashed rgba(255,255,255,.12);transform:rotateY(180deg);
  font-size:28px; letter-spacing:.6px}
.memo input:checked + label .memo-front{transform:rotateY(180deg)}
.memo input:checked + label .memo-back{transform:rotateY(360deg)}
.memo label{display:block;width:100%;height:100%;cursor:pointer;outline:none}
.memo label:focus-visible .memo-front{box-shadow:0 0 0 3px rgba(154,160,166,.35)}
.memo label:hover .memo-front{box-shadow:0 0 0 2px rgba(154,160,166,.18) inset}

/* Цифры/иконки на обороте из data-symbol */
.memo label .memo-back::before{content:attr(data-symbol); transform:translateY(-1px)}

/* Зафиксированная пара */
.memo label[data-locked]{pointer-events:none}
.memo label[data-locked] .memo-back{
  box-shadow:0 0 0 2px rgba(155,155,155,.35) inset, 0 6px 14px rgba(0,0,0,.25);
  border-color:rgba(200,200,200,.4)
}
</style>

<div class="memo" id="memo48">
  <form>
    <h3>MEMO — найди пары</h3>
    <div class="memo__controls">
      <small>Открывай по две карточки</small>
      <div class="memo__status">Найдено: <b class="memo__found">0</b> / 24</div>
      <button class="memo__btn" type="reset">СБРОС</button>
    </div>

    <div class="grid" id="memo-grid"></div>
  </form>
</div>

<script>
(() => {
  const root = document.getElementById('memo48');
  if (!root) return;

  const grid = root.querySelector('#memo-grid');
  const form = root.querySelector('form');
  const foundEl = root.querySelector('.memo__found');
  const TOTAL = 24;                       // число пар
  const symbols = Array.from({length: TOTAL}, (_,i) => String(i+1).padStart(2,'0'));

  let opened = [];
  let lock = false;
  let found = 0;

  // криптографически стойкий (при наличии) Фишер–Йетс
  function rndInt(max){
    if (window.crypto && crypto.getRandomValues){
      const buf = new Uint32Array(1);
      crypto.getRandomValues(buf);
      return buf[0] % max;
    }
    return Math.floor(Math.random() * max);
  }
  function shuffle(arr){
    for (let m = arr.length; m; ){
      const i = rndInt(m--);
      [arr[m], arr[i]] = [arr[i], arr[m]];
    }
    return arr;
  }

  function buildDeck(){
    grid.innerHTML = '';
    const deck = shuffle(symbols.concat(symbols)); // дублируем и мешаем

    deck.forEach((sym, idx) => {
      const card  = document.createElement('div');  card.className = 'memo-card';
      const input = document.createElement('input'); input.type='checkbox'; input.id = `mc${idx}`;
      const label = document.createElement('label'); label.setAttribute('for', input.id);
      const front = document.createElement('span');  front.className = 'memo-face memo-front';
      const back  = document.createElement('span');  back.className  = 'memo-face memo-back'; back.dataset.symbol = sym;
      label.append(front, back); card.append(input, label); grid.append(card);
    });

    // сброс внутренних состояний
    opened = [];
    lock = false;
    found = 0;
    foundEl.textContent = '0';
  }

  function getSymbol(input){
    return input.nextElementSibling.querySelector('.memo-back').dataset.symbol;
  }
  function lockPair(a,b){
    a.nextElementSibling.dataset.locked = '1';
    b.nextElementSibling.dataset.locked = '1';
  }

  root.addEventListener('change', (e) => {
    const input = e.target;
    if (input.tagName !== 'INPUT') return;

    if (input.nextElementSibling.dataset.locked){ input.checked = true; return; }
    if (lock && input.checked){ input.checked = false; return; }

    if (input.checked){
      opened.push(input);
      if (opened.length === 2){
        lock = true;
        const [a,b] = opened;
        const sa = getSymbol(a), sb = getSymbol(b);
        if (sa === sb){
          lockPair(a,b);
          found++;
          foundEl.textContent = String(found);
          opened = [];
          lock = false;
        } else {
          const toClose = opened.slice();
          opened = [];
          setTimeout(() => {
            toClose.forEach(inp => inp.checked = false);
            lock = false;
          }, 700);
        }
      }
    } else {
      opened = opened.filter(x => x !== input);
    }
  });

  form.addEventListener('reset', () => {
    setTimeout(buildDeck, 0); // при сбросе — новая случайная раскладка
  });

  buildDeck(); // старт
})();
</script>[/html]

[hideprofile]