[html]
<div class="fm-first-message">
  <div class="fm-first-message-card">
    <div class="fm-first-message-category"></div>
    <div class="fm-first-message-topic">бинго</div>

    <div class="fm-first-message-text">
За каждой ролевой историей скрываются десятки маленьких моментов: смешных, неловких, трогательных и до боли знакомых каждому игроку.</br></br>

Мы собрали самые узнаваемые ситуации, которые хотя бы раз случались почти с каждым из нас. Посмотрите на карточки, вспомните свои игровые приключения и отметьте всё, что уже успело произойти с вами за годы в ролевом мире.</br></br>

А после обязательно поделитесь результатом — нам очень интересно узнать, сколько клеток удалось закрыть именно вам.</br></br>

🎁 Небольшой бонус в виде форумной валюты получат все участники, а главным призом, как всегда, станут приятные воспоминания и возможность посмеяться вместе над тем, через что проходил почти каждый ролевик.</br></br></br>

P.S. Не спешите скачивать картинку и открывать её в редакторах. 😉 Ниже мы подготовили готовый код бинго — просто скопируйте его в своё сообщение, сохраните и отмечайте клетки прямо на форуме по мере необходимости. Так и удобнее, и результатом будет проще поделиться с остальными.
    </div>
  </div>
</div>
[/html]
[html]<style>
.bingo-box {
  position: relative;
  width: 780px;
  max-width: 100%;
  margin: 0 auto;
}

.bingo-box img {
  width: 100%;
  display: block;
}

.bingo-grid {
  position: absolute;
  left: 3.8%;
  top: 24.8%;
  width: 92.4%;
  height: 72.5%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.bingo-grid input {
  display: none;
}

.bingo-grid label {
  cursor: pointer;
  position: relative;
}

.bingo-grid input:checked + label::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  font-weight: bold;
  color: #1f579d;
  text-shadow: 0 0 8px white, 0 0 14px white;
}
</style>

<div class="bingo-box">
  <img src="https://forumstatic.ru/files/001c/b9/1e/47546.png">

  <div class="bingo-grid">
    <input type="checkbox" id="b1"><label for="b1"></label>
    <input type="checkbox" id="b2"><label for="b2"></label>
    <input type="checkbox" id="b3"><label for="b3"></label>
    <input type="checkbox" id="b4"><label for="b4"></label>
    <input type="checkbox" id="b5"><label for="b5"></label>

    <input type="checkbox" id="b6"><label for="b6"></label>
    <input type="checkbox" id="b7"><label for="b7"></label>
    <input type="checkbox" id="b8"><label for="b8"></label>
    <input type="checkbox" id="b9"><label for="b9"></label>
    <input type="checkbox" id="b10"><label for="b10"></label>

    <input type="checkbox" id="b11"><label for="b11"></label>
    <input type="checkbox" id="b12"><label for="b12"></label>
    <input type="checkbox" id="b13"><label for="b13"></label>
    <input type="checkbox" id="b14"><label for="b14"></label>
    <input type="checkbox" id="b15"><label for="b15"></label>

    <input type="checkbox" id="b16"><label for="b16"></label>
    <input type="checkbox" id="b17"><label for="b17"></label>
    <input type="checkbox" id="b18"><label for="b18"></label>
    <input type="checkbox" id="b19"><label for="b19"></label>
    <input type="checkbox" id="b20"><label for="b20"></label>

    <input type="checkbox" id="b21"><label for="b21"></label>
    <input type="checkbox" id="b22"><label for="b22"></label>
    <input type="checkbox" id="b23"><label for="b23"></label>
    <input type="checkbox" id="b24"><label for="b24"></label>
    <input type="checkbox" id="b25"><label for="b25"></label>
  </div>
</div>
<script>
document.querySelectorAll('.bingo-grid input').forEach((box, index) => {
  const key = 'bingo-cell-' + index;

  box.checked = localStorage.getItem(key) === 'true';

  box.addEventListener('change', () => {
    localStorage.setItem(key, box.checked);
  });
});
</script>[/html]

[html]<style>
.bingo-box {
  position: relative;
  width: 780px;
  max-width: 100%;
  margin: 0 auto;
}

.bingo-box img {
  width: 100%;
  display: block;
}

.bingo-grid {
  position: absolute;
  left: 3.8%;
  top: 24.8%;
  width: 92.4%;
  height: 72.5%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.bingo-grid input {
  display: none;
}

.bingo-grid label {
  cursor: pointer;
  position: relative;
}

.bingo-grid input:checked + label::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  font-weight: bold;
  color: #1f579d;
  text-shadow: 0 0 8px white, 0 0 14px white;
}
</style>

<div class="bingo-box">
  <img src="https://forumstatic.ru/files/001c/b9/1e/47546.png">

  <div class="bingo-grid">
    <input type="checkbox" id="b1"><label for="b1"></label>
    <input type="checkbox" id="b2"><label for="b2"></label>
    <input type="checkbox" id="b3"><label for="b3"></label>
    <input type="checkbox" id="b4"><label for="b4"></label>
    <input type="checkbox" id="b5"><label for="b5"></label>

    <input type="checkbox" id="b6"><label for="b6"></label>
    <input type="checkbox" id="b7"><label for="b7"></label>
    <input type="checkbox" id="b8"><label for="b8"></label>
    <input type="checkbox" id="b9"><label for="b9"></label>
    <input type="checkbox" id="b10"><label for="b10"></label>

    <input type="checkbox" id="b11"><label for="b11"></label>
    <input type="checkbox" id="b12"><label for="b12"></label>
    <input type="checkbox" id="b13"><label for="b13"></label>
    <input type="checkbox" id="b14"><label for="b14"></label>
    <input type="checkbox" id="b15"><label for="b15"></label>

    <input type="checkbox" id="b16"><label for="b16"></label>
    <input type="checkbox" id="b17"><label for="b17"></label>
    <input type="checkbox" id="b18"><label for="b18"></label>
    <input type="checkbox" id="b19"><label for="b19"></label>
    <input type="checkbox" id="b20"><label for="b20"></label>

    <input type="checkbox" id="b21"><label for="b21"></label>
    <input type="checkbox" id="b22"><label for="b22"></label>
    <input type="checkbox" id="b23"><label for="b23"></label>
    <input type="checkbox" id="b24"><label for="b24"></label>
    <input type="checkbox" id="b25"><label for="b25"></label>
  </div>
</div>
<script>
document.querySelectorAll('.bingo-grid input').forEach((box, index) => {
  const key = 'bingo-cell-' + index;

  box.checked = localStorage.getItem(key) === 'true';

  box.addEventListener('change', () => {
    localStorage.setItem(key, box.checked);
  });
});
</script>[/html]