<!----------------- хтмл в постах с допуском по группам  --------------->

<!-- HTML в постах -->
<script type="text/javascript" src="http://forumstatic.ru/files/0018/25/96/94151.js"></script>
<script type="text/javascript">
HTMLinPost.groups = [1,2,3,4,5,6,7,8]; // Группы, допущенные к вставке HTML в посты
HTMLinPost.noAccess = []; // Пользователи с запретом вставки HTML в посты
HTMLinPost.parseHTMLinPosts()
</script>

[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]

[html]<style>
/* Красивый фон для всех аудиоплееров */
audio {
    background: #dcdcd2 !important;
    border: 2px solid #b8b8b0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px 0 !important;
    padding: 2px !important;
}

audio::-webkit-media-controls-panel,
.mejs-container .mejs-controls {
    background: #dcdcd2 !important;
}

audio::-webkit-media-controls-timeline {
    background: #c4c4bc !important;
}
</style>[/html]

[html]

<div style="background:#dcdcd2; padding:12px; border-radius:12px; display:inline-block; max-width:520px; border:2px solid #b8b8b0;">
    <audio controls src="https://videotourl.com/audio/1778759825174-453b8e9a-ea04-4186-9163-df77790254c5.ogg" preload="none" style="width:100%; min-width:380px;">
        Загруженное mp3
    </audio>
</div>

[/html]