[html]<div id="character-card-form" style="padding:15px;background:var(--quote);border:1px solid var(--bord);border-radius:var(--br-rad);font-family:var(--main-font);color:var(--text);">
  <h3>Создание карточки персонажа</h3>

  <label>Имя на английском:<br>
    <input type="text" data-field="engName" placeholder="John Doe" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Ссылка на аватар:<br>
    <input type="url" data-field="avatarUrl" placeholder="https://..." style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Раса:<br>
    <select data-field="race" style="width:100%;padding:6px;margin:4px 0;">
      <option value="">— выберите —</option>
      <option value="вампир">вампир</option>
      <option value="гару">гару</option>
      <option value="маг">маг</option>
      <option value="подменыш">подменыш</option>
      <option value="демон">демон</option>
      <option value="гуль">гуль</option>
    </select>
  </label><br>

  <label>Происхождение:<br>
    <input type="text" data-field="origin" placeholder="Тремер, 8 поколение" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Принадлежность:<br>
    <input type="text" data-field="affiliation" placeholder="Камарилья" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Твинки (Формат: Имя|Ссылка, Имя2|Ссылка2):<br>
    <textarea data-field="twinks" rows="2" placeholder="Кровавый Джек|https://..., Тень|https://..." style="width:100%;padding:6px;margin:4px 0;"></textarea>
  </label><br>

  <label>ФИО на русском:<br>
    <input type="text" data-field="rusName" placeholder="Иван Петров" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Возраст | С момента обращения:<br>
    <input type="text" data-field="ageInfo" placeholder="28 | 5 лет" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Прозвища:<br>
    <input type="text" data-field="nicknames" placeholder="Тень, Кровавый Джек" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>О персонаже:<br>
    <textarea data-field="about" rows="2" placeholder="Бывший солдат..." style="width:100%;padding:6px;margin:4px 0;"></textarea>
  </label><br>

  <label>Способности:<br>
    <input type="text" data-field="abilities" placeholder="Могущество [3], Стремительность [2]" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Достоинства:<br>
    <input type="text" data-field="merits" placeholder="Железная воля [3]" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Недостатки:<br>
    <input type="text" data-field="flaws" placeholder="Кошмары [1]" style="width:100%;padding:6px;margin:4px 0;">
  </label><br>

  <label>Ачивки:<br>
    <textarea data-field="achievements" rows="2" placeholder="* Участник битвы за Сиэтл" style="width:100%;padding:6px;margin:4px 0;"></textarea>
  </label><br>

  <label>Подарки:<br>
    <textarea data-field="gifts" rows="2" placeholder="* Кровавый амулет от Горацио" style="width:100%;padding:6px;margin:4px 0;"></textarea>
  </label><br>

  <button type="button" class="copy-card-btn" style="
    margin-top:12px;
    padding:10px 20px;
    background:#4a6fa5;
    color:white;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-weight:bold;
    transition: background 0.2s, transform 0.1s;
  ">Скопировать карточку</button>
</div>

<script>
document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('copy-card-btn')) return;

  // Эффект нажатия
  const btn = e.target;
  btn.style.transform = 'scale(0.98)';
  btn.style.opacity = '0.9';
  setTimeout(() => {
    btn.style.transform = '';
    btn.style.opacity = '';
  }, 150);

  // Сбор данных
  const getValue = (field) => {
    const el = document.querySelector(`[data-field="${field}"]`);
    return el ? el.value.trim() : '';
  };

  const data = {
    engName: getValue('engName') || 'ВПИШИТЕ_ИМЯ_НА_АНГЛИЙСКОМ',
    avatarUrl: getValue('avatarUrl') || 'ССЫЛКУ_НА_КАРТИНКУ_ПЕРСОНАЖА',
    race: getValue('race') || 'ВПИШИТЕ_вампир/гару/маг/подменыш/демон/гуль',
    origin: getValue('origin') || 'ВПИШИТЕ_Клан, поколение/Клан домитора/Род/Дом/Покровительство',
    affiliation: getValue('affiliation') || 'ВПИШИТЕ_Камарилья/Племя/Дом/Фракция',
    twinks: getValue('twinks'),
    rusName: getValue('rusName') || 'ФИО_на_русском',
    ageInfo: getValue('ageInfo') || 'РЕАЛЬНЫЙ_ВОЗРАСТ | С_МОМЕНТА_ОБРАЩЕНИЯ',
    nicknames: getValue('nicknames') || 'ВПИШИТЕ_СЮДА_ПРОЗВИЩА',
    about: getValue('about') || 'НАПИШИТЕ КРАТКОЕ И ВАЖНОЕ О ПЕРСОНАЖЕ, МОЖНО ДОБАВИТЬ <a href="ССЫЛКУ">на пару</a>',
    abilities: getValue('abilities') || 'ПЕРЕЧИСЛИТЕ_ДИСЦИПЛИНЫ_С_ТОЧКАМИ/ДАРЫ',
    merits: getValue('merits') || 'ВПИШИТЕ',
    flaws: getValue('flaws') || 'ВПИШИТЕ',
    achievements: getValue('achievements') || '*ЗДЕСЬ БУДУТ ВАШИ НАГРАДЫ*',
    gifts: getValue('gifts') || '*ЗДЕСЬ БУДУТ ВАШИ ПОДАРКИ*'
  };

  // Обработка твинков
  let twinksHtml = '<a href="ССЫЛКА_НА_ТВИНКА">Имя Персонажа</a>, <a href="ССЫЛКА_НА_ТВИНКА">Имя Персонажа</a>.';
  if (data.twinks) {
    const pairs = data.twinks.split(',');
    const links = pairs.map(pair => {
      const [name, url] = pair.trim().split('|').map(s => s.trim());
      if (name && url) {
        return `<a href="${url}">${name}</a>`;
      }
      return '';
    }).filter(Boolean);
    if (links.length > 0) twinksHtml = links.join(', ') + '.';
  }

  const template = `<div class='character'>
<info>

<div class="blood-info">
<div class="av-name">
<name>${data.engName}</name>
<av><img src="${data.avatarUrl}"></av>
</div>

<div class="pers-info">
<race><b>Раса:</b> ${data.race}</race>
<city><b>Происхождение:</b> ${data.origin}</city>
<money><b>Принадлежность:</b> ${data.affiliation}</money>
</div>

<div class="blood-twinks">
<span>твинки:</span>
<twn>
${twinksHtml}
</twn>
</div>
</div>

<div class="blood-act">

<!--НАЧАЛО ВКЛАДОК-->

<!-- Скрытые радиокнопки для переключения вкладок -->
        <input type="radio" name="tabs" id="tab1" class="tab-input" checked>
        <input type="radio" name="tabs" id="tab2" class="tab-input">
       
        <!-- Заголовки вкладок -->
        <div class="tabs-header">
            <label for="tab1" class="tab">Информация</label>
            <label for="tab2" class="tab">Награды</label>
        </div>
       
        <!-- Содержимое вкладок -->
        <div class="tab-content tab-content-1">

<!--ПЕРВАЯ ВКЛАДКА-->

<div class="lsnames"><div class="age-name">${data.rusName} <age>${data.ageInfo}</age></div>
<name>${data.nicknames}</name></div>

<div class="about-pers"><span>О персонаже</span>
<text>${data.about}</text>
</div>

<div class="dop-char"><span>Дополнительно</span>
<div class="others-char">
<char><b>Способности:</b> ${data.abilities}</char>
<char><b>Достоинства:</b> ${data.merits}</char>
<char><b>Недостатки:</b> ${data.flaws}</char>
</div>
</div>

<!--КОНЕЦ ПЕРВАЯ ВКЛАДКА-->
        </div>
       
        <div class="tab-content tab-content-2">
<!--ВТОРАЯ ВКЛАДКА-->

<div class="gifts-char">
<!--АЧИВКИ-->

<div class="pers-el"><span>Ачивки</span>
<text>
${data.achievements}
</text>
</div>

<!--АЧИВКИ КОНЕЦ-->

<!--ПОДАРКИ-->

<div class="pers-el"><span>Подарки</span>
<text>${data.gifts}
</text>
</div>

<!--ПОДАРКИ КОНЕЦ-->
</div>

</div>

<!--КОНЕЦ ВТОРАЯ ВКЛАДКА-->

    </div>

<!--КОНЕЦ ВКЛАДОК-->

</div>

</info>
</div>`;

  const finalCode = `

${template}

`;

  // === ТОЛЬКО НАДЁЖНЫЙ МЕТОД (как в вашем примере с фонами) ===
  const textToCopy = finalCode;
  const ta = document.createElement('textarea');
  ta.value = textToCopy;
  ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;';
  document.body.appendChild(ta);
  ta.select();
  try {
    const success = document.execCommand('copy');
    document.body.removeChild(ta);
    if (success) {
      showNotification('Шаблон скопирован, вставьте в пост');
    } else {
      prompt('Скопируйте карточку:', textToCopy);
    }
  } catch (e) {
    document.body.removeChild(ta);
    prompt('Скопируйте карточку:', textToCopy);
  }

  function showNotification(msg) {
    const n = document.createElement('div');
    n.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(46, 160, 67, 0.95);
      color: white;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 13px;
      font-family: var(--main-font);
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.3s;
      border: 1px solid rgba(0,0,0,0.2);
      pointer-events: none;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    `;
    n.textContent = msg;
    document.body.appendChild(n);
    n.style.opacity = '1';
    setTimeout(() => {
      n.style.opacity = '0';
      setTimeout(() => n.remove(), 300);
    }, 2500);
  }
});

// Hover-эффект для кнопки
const style = document.createElement('style');
style.textContent = `
  .copy-card-btn:hover {
    background: #3a5a80;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
`;
document.head.appendChild(style);
</script>[/html]

в

новое

[html]<style>
.chest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 644px;
  margin: 20px auto;
  padding: 20px;
  justify-items: center;
}

.chest-item {
  position: relative;
  width: 160px;
  height: 149px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.chest-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.chest-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 5px;
  font-family: 'Philosopher', sans-serif;
  text-align: center;
}

.chest-item:hover .chest-overlay {
  opacity: 1;
}

.chest-number {
  font-size: 24px;
  margin-bottom: 5px;
  color: #fc6014;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.chest-status {
  font-size: 14px;
  color: #c89f6e;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin-bottom: 8px;
}

.chest-button {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Philosopher', sans-serif;
  font-size: 12px;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.chest-button:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
  transform: scale(1.05);
}

/* Модальное окно */
.copy-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.copy-modal-content {
  background: linear-gradient(135deg, #2c1a1a 0%, #1a1a2e 100%);
  padding: 25px;
  border-radius: 10px;
  border: 2px solid #8B0000;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.copy-modal h3 {
  color: #ff6b6b;
  margin-bottom: 15px;
  font-family: 'Philosopher', sans-serif;
  font-size: 18px;
}

.copy-text {
  background: rgba(30, 30, 30, 0.8);
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #444;
  font-family: 'Philosopher', sans-serif;
  font-size: 14px;
  color: #e0e0e0;
  margin: 12px 0;
  word-break: break-all;
  cursor: text;
}

.modal-btn {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Philosopher', sans-serif;
  font-size: 13px;
  margin: 4px;
  transition: all 0.3s ease;
}

.modal-btn:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
}

.modal-btn.secondary {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

/* Статусы */
.chest-taken .chest-overlay {
  background: rgba(117, 117, 117, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.chest-taken .chest-status {
  color: #ff6b6b;
}

.chest-taken .chest-button {
  background: #757575;
  cursor: not-allowed;
}
</style>

<div class="chest-grid">
  <!-- Шкатулка 1 -->
  <div class="chest-item" onclick="showCopyModal(1)">
    <img src="https://imgur.com/k9j6OSa.png" alt="Шкатулка 1" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№1</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 2 -->
  <div class="chest-item" onclick="showCopyModal(2)">
    <img src="https://imgur.com/VpmxUuF.png" alt="Шкатулка 2" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№2</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 3 -->
  <div class="chest-item" onclick="showCopyModal(3)">
    <img src="https://imgur.com/Iz42CEx.png" alt="Шкатулка 3" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№3</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 4 -->
  <div class="chest-item" onclick="showCopyModal(4)">
    <img src="https://imgur.com/harNHvk.png" alt="Шкатулка 4" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№4</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 5 -->
  <div class="chest-item" onclick="showCopyModal(5)">
    <img src="https://imgur.com/u26Q8nc.png" alt="Шкатулка 5" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№5</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 6 -->
  <div class="chest-item" onclick="showCopyModal(6)">
    <img src="https://imgur.com/EvF7kw4.png" alt="Шкатулка 6" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№6</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 7 -->
  <div class="chest-item" onclick="showCopyModal(7)">
    <img src="https://imgur.com/PxLrGh0.png" alt="Шкатулка 7" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№7</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 8 -->
  <div class="chest-item" onclick="showCopyModal(8)">
    <img src="https://imgur.com/JGrQ3t3.png" alt="Шкатулка 8" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№8</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 9 -->
  <div class="chest-item" onclick="showCopyModal(9)">
    <img src="https://imgur.com/erhu5Mx.png" alt="Шкатулка 9" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№9</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 10 -->
  <div class="chest-item" onclick="showCopyModal(10)">
    <img src="https://imgur.com/O4bzAoJ.png" alt="Шкатулка 10" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№10</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 11 -->
  <div class="chest-item" onclick="showCopyModal(11)">
    <img src="https://imgur.com/xZZL3B7.png" alt="Шкатулка 11" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№11</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 12 -->
  <div class="chest-item" onclick="showCopyModal(12)">
    <img src="https://imgur.com/KylUtiY.png" alt="Шкатулка 12" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№12</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 13 -->
  <div class="chest-item" onclick="showCopyModal(13)">
    <img src="https://imgur.com/lsmFp0s.png" alt="Шкатулка 13" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№13</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 14 -->
  <div class="chest-item" onclick="showCopyModal(14)">
    <img src="https://imgur.com/TtrymQN.png" alt="Шкатулка 14" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№14</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 15 -->
  <div class="chest-item" onclick="showCopyModal(15)">
    <img src="https://imgur.com/63lI4kP.png" alt="Шкатулка 15" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№15</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 16 -->
  <div class="chest-item" onclick="showCopyModal(16)">
    <img src="https://imgur.com/6ccKWoP.png" alt="Шкатулка 16" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№16</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>
</div>

<!-- Модальное окно -->
<div id="copyModal" class="copy-modal">
  <div class="copy-modal-content">
    <h3>🎭 Выбор шкатулки</h3>
    <p>Скопируйте этот текст и отправьте в комментариях:</p>
    <div id="copyText" class="copy-text" onclick="this.select()">«Участвую! Беру шкатулку номер 1.»</div>
    <div>
      <button class="modal-btn" onclick="copyToClipboard()">📋 Скопировать текст</button>
      <button class="modal-btn secondary" onclick="closeCopyModal()">Закрыть</button>
    </div>
    <p style="margin-top: 15px; font-size: 12px; opacity: 0.7;">Нажмите на текст чтобы выделить, затем Ctrl+C</p>
  </div>
</div>

<!-- Инструкция -->
<div style="text-align: center; margin: 20px 0; padding: 15px; background: rgb(163 121 73 / 19%); border-radius: 8px;">
  <strong>📝 Как участвовать:</strong>
  <p>1. Наведите на шкатулку чтобы увидеть номер, статус и кнопку<br>
  2. Нажмите на шкатулку чтобы открыть окно с текстом<br>
  3. Скопируйте текст и отправьте в комментариях<br>
  4. Ждите сообщения от ведущего в ЛС с вашим предметом!</p>
</div>

<script>
let currentChestNumber = 0;

function showCopyModal(chestNumber) {
  currentChestNumber = chestNumber;
  const text = `«Участвую! Беру шкатулку номер ${chestNumber}.»`;
 
  document.getElementById('copyText').textContent = text;
  document.getElementById('copyModal').style.display = 'flex';
}

function closeCopyModal() {
  document.getElementById('copyModal').style.display = 'none';
}

function copyToClipboard() {
  const textElement = document.getElementById('copyText');
  const text = textElement.textContent;
 
  // Автоматически выделяем текст
  const range = document.createRange();
  range.selectNodeContents(textElement);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
 
  // Пробуем скопировать
  try {
    navigator.clipboard.writeText(text).then(() => {
      alert('✅ Текст скопирован! Теперь вставьте его в комментарий.');
      closeCopyModal();
    }).catch(err => {
      // Fallback
      document.execCommand('copy');
      alert('✅ Текст скопирован! Теперь вставьте его в комментарий.');
      closeCopyModal();
    });
  } catch (err) {
    alert('❌ Не удалось скопировать автоматически. Выделите текст вручную и нажмите Ctrl+C');
  }
}

// Закрытие по клику вне окна
document.getElementById('copyModal').addEventListener('click', function(e) {
  if (e.target === this) {
    closeCopyModal();
  }
});

// Функция для пометки шкатулки как занятой
function markChestAsTaken(chestNumber) {
  const chest = document.querySelectorAll('.chest-item')[chestNumber - 1];
  const status = chest.querySelector('.chest-status');
  const button = chest.querySelector('.chest-button');
 
  chest.classList.add('chest-taken');
  status.textContent = 'Занята';
  button.textContent = 'Занято';
  chest.onclick = null;
}
</script>[/html]

[html]<style>
.chest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 644px;
  margin: 20px auto;
  padding: 20px;
  justify-items: center;
}

.chest-item {
  position: relative;
  width: 160px;
  height: 149px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.chest-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.chest-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 5px;
  font-family: 'Philosopher', sans-serif;
  text-align: center;
}

.chest-item:hover .chest-overlay {
  opacity: 1;
}

.chest-number {
  font-size: 24px;
  margin-bottom: 5px;
  color: #fc6014;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.chest-status {
  font-size: 14px;
  color: #c89f6e;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin-bottom: 8px;
}

.chest-button {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Philosopher', sans-serif;
  font-size: 12px;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.chest-button:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
  transform: scale(1.05);
}

/* Статусы */
.chest-taken .chest-overlay {
  background: rgba(117, 117, 117, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.chest-taken .chest-status {
  color: #ff6b6b;
}

.chest-taken .chest-button {
  background: #757575;
  cursor: not-allowed;
}

/* Уведомление об успешном копировании */
.copy-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2c1a1a 0%, #1a1a2e 100%);
  color: #ff6b6b;
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid #8B0000;
  font-family: 'Philosopher', sans-serif;
  font-size: 14px;
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
</style>

<div class="chest-grid">
  <!-- Шкатулка 1 -->
  <div class="chest-item" data-chest="1">
    <img src="https://imgur.com/k9j6OSa.png" alt="Шкатулка 1" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№1</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 2 -->
  <div class="chest-item" data-chest="2">
    <img src="https://imgur.com/VpmxUuF.png" alt="Шкатулка 2" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№2</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 3 -->
  <div class="chest-item" data-chest="3">
    <img src="https://imgur.com/Iz42CEx.png" alt="Шкатулка 3" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№3</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 4 -->
  <div class="chest-item" data-chest="4">
    <img src="https://imgur.com/harNHvk.png" alt="Шкатулка 4" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№4</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 5 -->
  <div class="chest-item" data-chest="5">
    <img src="https://imgur.com/u26Q8nc.png" alt="Шкатулка 5" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№5</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 6 -->
  <div class="chest-item" data-chest="6">
    <img src="https://imgur.com/EvF7kw4.png" alt="Шкатулка 6" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№6</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 7 -->
  <div class="chest-item" data-chest="7">
    <img src="https://imgur.com/PxLrGh0.png" alt="Шкатулка 7" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№7</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 8 -->
  <div class="chest-item" data-chest="8">
    <img src="https://imgur.com/JGrQ3t3.png" alt="Шкатулка 8" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№8</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 9 -->
  <div class="chest-item" data-chest="9">
    <img src="https://imgur.com/erhu5Mx.png" alt="Шкатулка 9" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№9</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 10 -->
  <div class="chest-item" data-chest="10">
    <img src="https://imgur.com/O4bzAoJ.png" alt="Шкатулка 10" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№10</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 11 -->
  <div class="chest-item" data-chest="11">
    <img src="https://imgur.com/xZZL3B7.png" alt="Шкатулка 11" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№11</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 12 -->
  <div class="chest-item" data-chest="12">
    <img src="https://imgur.com/KylUtiY.png" alt="Шкатулка 12" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№12</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 13 -->
  <div class="chest-item" data-chest="13">
    <img src="https://imgur.com/lsmFp0s.png" alt="Шкатулка 13" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№13</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 14 -->
  <div class="chest-item" data-chest="14">
    <img src="https://imgur.com/TtrymQN.png" alt="Шкатулка 14" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№14</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 15 -->
  <div class="chest-item" data-chest="15">
    <img src="https://imgur.com/63lI4kP.png" alt="Шкатулка 15" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№15</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>

  <!-- Шкатулка 16 -->
  <div class="chest-item" data-chest="16">
    <img src="https://imgur.com/6ccKWoP.png" alt="Шкатулка 16" class="chest-image">
    <div class="chest-overlay">
      <div class="chest-number">№16</div>
      <div class="chest-status">Свободна</div>
      <button class="chest-button">Выбрать</button>
    </div>
  </div>
</div>

<!-- Уведомление об успешном копировании -->
<div id="copyNotification" class="copy-notification">
  ✅ Текст скопирован! Теперь вставьте его в комментарий.
</div>

<!-- Инструкция -->
<div style="text-align: center; margin: 20px 0; padding: 15px; background: rgb(163 121 73 / 19%); border-radius: 8px;">
  <strong>📝 Как участвовать:</strong>
  <p>1. Наведите на шкатулку чтобы увидеть номер, статус и кнопку<br>
  2. Нажмите на кнопку "Выбрать" чтобы скопировать текст<br>
  3. Вставьте скопированный текст в комментариях<br>
  4. Ждите сообщения от ведущего в ЛС с вашим предметом!</p>
</div>

<script>
// Функция для получения занятых шкатулок из sessionStorage
function getTakenChests() {
  const takenChests = sessionStorage.getItem('takenChests');
  return takenChests ? JSON.parse(takenChests) : [];
}

// Функция для сохранения занятых шкатулок в sessionStorage
function saveTakenChests(takenChests) {
  sessionStorage.setItem('takenChests', JSON.stringify(takenChests));
}

// Функция для показа уведомления
function showNotification() {
  const notification = document.getElementById('copyNotification');
  notification.style.opacity = '1';
 
  setTimeout(() => {
    notification.style.opacity = '0';
  }, 3000);
}

// Функция для копирования текста в буфер обмена
async function copyChestText(chestNumber) {
  const text = `«Участвую! Беру шкатулку номер ${chestNumber}.»`;
 
  try {
    await navigator.clipboard.writeText(text);
    showNotification();
    markChestAsTaken(chestNumber);
  } catch (err) {
    // Fallback для старых браузеров
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
   
    try {
      const successful = document.execCommand('copy');
      if (successful) {
        showNotification();
        markChestAsTaken(chestNumber);
      } else {
        alert('❌ Не удалось скопировать текст. Попробуйте еще раз.');
      }
    } catch (fallbackErr) {
      alert('❌ Не удалось скопировать текст. Выделите и скопируйте вручную.');
    }
   
    document.body.removeChild(textArea);
  }
}

// Функция для пометки шкатулки как занятой
function markChestAsTaken(chestNumber) {
  const chest = document.querySelector(`.chest-item[data-chest="${chestNumber}"]`);
  if (chest) {
    const status = chest.querySelector('.chest-status');
    const button = chest.querySelector('.chest-button');
   
    chest.classList.add('chest-taken');
    status.textContent = 'Занята';
    button.textContent = 'Занято';
    button.disabled = true;
   
    // Сохраняем в sessionStorage
    const takenChests = getTakenChests();
    if (!takenChests.includes(chestNumber)) {
      takenChests.push(chestNumber);
      saveTakenChests(takenChests);
    }
  }
}

// Функция для инициализации состояния шкатулок при загрузке страницы
function initializeChests() {
  const takenChests = getTakenChests();
  takenChests.forEach(chestNumber => {
    const chest = document.querySelector(`.chest-item[data-chest="${chestNumber}"]`);
    if (chest) {
      const status = chest.querySelector('.chest-status');
      const button = chest.querySelector('.chest-button');
     
      chest.classList.add('chest-taken');
      status.textContent = 'Занята';
      button.textContent = 'Занято';
      button.disabled = true;
    }
  });
}

// Добавляем обработчики событий для всех кнопок
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('chest-button')) {
    const chestItem = e.target.closest('.chest-item');
    const chestNumber = chestItem.getAttribute('data-chest');
   
    // Проверяем, не занята ли уже шкатулка
    if (!chestItem.classList.contains('chest-taken')) {
      copyChestText(chestNumber);
    }
  }
});

// Инициализируем состояние при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
  initializeChests();
});
</script>[/html]

«Участвую! Беру шкатулку номер 1.»

сообщение