<!--HTML-->
    <style>
        .chests-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
        }

        .chest-item {
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .chest-item:hover {
            transform: scale(1.05);
        }

        .chest-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #8B4513;
        }

        .chest-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(139, 0, 0, 0.8);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 8px;
            font-family: 'Times New Roman', serif;
        }

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

        .chest-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .chest-status {
            font-size: 14px;
            text-transform: uppercase;
        }

        .taken {
            border-color: #dc143c;
        }

        .taken .chest-overlay {
            background: rgba(220, 20, 60, 0.8);
        }
    </style>
    <!-- Остальной контент поста -->
    
    <div class="chests-container" id="chestsContainer">
        <!-- Шкатулки будут сгенерированы через JavaScript -->
    </div>

    <!-- Остальной контент поста -->

    <script>
        // Массив состояний шкатулок (true = занята, false = свободна)
        const chestStates = Array(13).fill(false);

        function createChests() {
            const container = document.getElementById('chestsContainer');
            
            chestStates.forEach((isTaken, index) => {
                const chestNumber = index + 1;
                
                const chestItem = document.createElement('div');
                chestItem.className = `chest-item ${isTaken ? 'taken' : ''}`;
                chestItem.innerHTML = `
                    <img src="путь/к/вашей/картинке/шкатулка${chestNumber}.jpg" 
                         alt="Шкатулка ${chestNumber}" 
                         class="chest-image"
                         onerror="this.src='https://via.placeholder.com/150x150/8B4513/FFFFFF?text=Шкатулка+${chestNumber}'">
                    <div class="chest-overlay">
                        <div class="chest-number">${chestNumber}</div>
                        <div class="chest-status">${isTaken ? 'ЗАБРАЛИ' : 'СВОБОДНА'}</div>
                    </div>
                `;
                
                // Обработчик клика для выбора шкатулки
                chestItem.addEventListener('click', function() {
                    if (!isTaken) {
                        selectChest(chestNumber);
                    }
                });
                
                container.appendChild(chestItem);
            });
        }

        function selectChest(chestNumber) {
            if (confirm(`Вы уверены, что хотите выбрать шкатулку номер ${chestNumber}?`)) {
                // Здесь можно добавить логику отправки выбора на сервер
                markChestAsTaken(chestNumber);
                
                // Показываем сообщение для копирования
                const message = `Участвую! Беру шкатулку номер ${chestNumber}.`;
                prompt('Скопируйте это сообщение для участия:', message);
            }
        }

        function markChestAsTaken(chestNumber) {
            const chestIndex = chestNumber - 1;
            chestStates[chestIndex] = true;
            
            // Обновляем отображение
            const chestItems = document.querySelectorAll('.chest-item');
            const targetChest = chestItems[chestIndex];
            
            targetChest.classList.add('taken');
            targetChest.querySelector('.chest-status').textContent = 'ЗАБРАЛИ';
            
            // Делаем шкатулку некликабельной
            targetChest.style.cursor = 'not-allowed';
            targetChest.style.opacity = '0.7';
        }

        // Инициализация при загрузке страницы
        document.addEventListener('DOMContentLoaded', createChests);

        // Функция для ручного управления состоянием шкатулок (для администратора)
        function updateChestStatus(chestNumber, isTaken) {
            const chestIndex = chestNumber - 1;
            if (chestIndex >= 0 && chestIndex < chestStates.length) {
                chestStates[chestIndex] = isTaken;
                
                const chestItems = document.querySelectorAll('.chest-item');
                const targetChest = chestItems[chestIndex];
                
                if (isTaken) {
                    targetChest.classList.add('taken');
                    targetChest.querySelector('.chest-status').textContent = 'ЗАБРАЛИ';
                    targetChest.style.cursor = 'not-allowed';
                    targetChest.style.opacity = '0.7';
                } else {
                    targetChest.classList.remove('taken');
                    targetChest.querySelector('.chest-status').textContent = 'СВОБОДНА';
                    targetChest.style.cursor = 'pointer';
                    targetChest.style.opacity = '1';
                }
            }
        }
    </script>

<!--HTML--><style>
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

/* Основные стили */
.contest-container {
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Philosopher', sans-serif;
  color: #e0e0e0;
}

.header-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.atmospheric-post {
  background: linear-gradient(135deg, #2c1a1a 0%, #1a1a2e 100%);
  padding: 30px;
  border-radius: 10px;
  margin: 20px 0;
  border-left: 4px solid #8B0000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
}

/* Стили для раскрывающихся блоков */
.spoiler {
  margin: 25px 0;
}

.spoiler-header {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spoiler-header:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
  transform: translateY(-2px);
}

.spoiler-content {
  background: rgba(40, 40, 40, 0.9);
  padding: 0;
  border-radius: 0 0 8px 8px;
  margin-top: 2px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.spoiler-content.open {
  max-height: 2000px;
  padding: 25px;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

/* Стили для шкатулок */
.chest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 20px 0;
}

.chest-block {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.chest-block:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.4);
}

.chest-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.chest-block:hover .chest-image {
  transform: scale(1.1);
}

.chest-info {
  text-align: center;
  margin-top: 10px;
  font-family: 'Philosopher', sans-serif;
}

.chest-number {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 4px;
}

.chest-status {
  font-size: 16px;
  font-weight: bold;
  color: #2E8B57;
  text-transform: uppercase;
}

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

/* Фон для запасных вариантов */
.chest-1 { background: #8B4513; }
.chest-2 { background: #A0522D; }
.chest-3 { background: #CD853F; }
.chest-4 { background: #8B4513; }
.chest-5 { background: #A0522D; }
.chest-6 { background: #CD853F; }
.chest-7 { background: #8B4513; }
.chest-8 { background: #A0522D; }
.chest-9 { background: #CD853F; }
.chest-10 { background: #8B4513; }
.chest-11 { background: #A0522D; }
.chest-12 { background: #CD853F; }
.chest-13 { background: #8B4513; }
</style>

<div class="contest-container">

<!-- Атмосферная картинка -->
<img src="https://via.placeholder.com/1000x300/2c1a1a/ffffff?text=Хэллуинская+Церковь+Кошмаров" 
     alt="Хэллуинская церковь" 
     class="header-image">

<!-- Атмосферный пост -->
<div class="atmospheric-post">
  <p>Ты открываешь глаза.</p>
  
  <p>Тишина. Только ветер завывает в разбитых витражах, касаясь лица, принося с собой запах сырой земли, костра и чего-то ещё — сладковато-железного, древнего.<br>
  Ты лежишь на холодных каменных плитах… и лишь спустя миг понимаешь — это не просто плиты. Это могилы.</p>
  
  <p>Мир вокруг растворён в темноте, но глаза постепенно привыкают к мраку.<br>
  Перед тобой вырастает силуэт церкви — мёртвой, застывшей, будто сама она выдохлась от времени.<br>
  И вдруг, где-то за остриями шпилей, вспыхивает крошечный огонёк. Он дрожит, зовёт, манит — словно обещает тепло и ответы.</p>
  
  <p>Ты делаешь шаг. И каждый следующий звучит громче, чем хотелось бы, будто кто-то незримый слушает и считает твои шаги.</p>
  
  <p>Из глубины церкви доносится смех — тихий, детский, как звон колокольчиков.<br>
  Он отзывается эхом в груди, смешивая леденящий страх и странное, пожирающее любопытство.</p>
  
  <p>Ты входишь внутрь.<br>
  Под обвалившимся куполом — статуя ангела. Каменные крылья укутаны паутиной забвения, а по мраморным щекам текут алые следы — не краска, не ржавчина… что-то живое, пульсирующее.<br>
  У ног ангела, на пьедестале из костей и времени, стоят они — шкатулки.</p>
  
  <p style="text-align: center; font-style: italic; color: #ff6b6b;">
    Твой кошмар только начинается...
  </p>
</div>

<!-- Правила под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    📜 Тёмные Законы Ритуала (Правила)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <h3>Правила «Шкатулки Кошмаров»</h3>
    <p>Перед вами — тринадцать шкатулок. Каждая хранит внутри не просто предмет, а зародыш кошмара. Ваша задача — выпустить его на волю.</p>
    
    <ol>
      <li><strong>Выбор:</strong> Чтобы участвовать, напишите в этой теме комментарий: <code>«Участвую! Беру шкатулку номер [X]»</code>, где X — число от 1 до 13.</li>
      <li><strong>Откровение:</strong> После записи я найду вас в <strong>ЛС</strong> и открою предмет, скрывающийся в вашей шкатулке.</li>
      <li><strong>Воплощение:</strong> Напишите рассказ ужаса <strong>от 1500 до 5000 знаков</strong>, где этот предмет играет ключевую роль.</li>
      <li><strong>Жертва:</strong> Готовые работы присылайте мне в <strong>ЛС до 7 ноября, 23:59 (МСК)</strong>.</li>
      <li><strong>Суд:</strong> Все рассказы будут вывешены для анонимного голосования и отгадывания авторов.</li>
    </ol>
    
    <h4>Награды для избранных:</h4>
    <ul>
      <li>🏆 <strong>Властелин Кошмаров</strong> (1 место) — уникальный титул + главная награда</li>
      <li>👻 <strong>Песнь Теней</strong> (2 место) — почетный титул + подачки из тьмы</li>
      <li>🎭 <strong>Шепот из Шкатулки</strong> (3 место) — титул + малая жертва</li>
      <li>🔮 <strong>Провидец Тьмы</strong> — титул для лучшего угадывателя авторов</li>
    </ul>
  </div>
</div>

<!-- Шкатулки под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    🎁 Выбрать Шкатулку Кошмара (13 доступно)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <div style="text-align: center; margin-bottom: 20px;">
      <p><em>Выбери свою судьбу. Но помни: обратной дороги нет.</em></p>
    </div>
    
    <div class="chest-grid">
      <!-- Шкатулка 1 -->
      <div class="chest-block" onclick="selectChest(1)">
        <img src="ВАША_КАРТИНКА_1" alt="Шкатулка 1" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №01</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Шкатулки 2-13 -->
      <div class="chest-block" onclick="selectChest(2)">
        <img src="ВАША_КАРТИНКА_2" alt="Шкатулка 2" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №02</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Остальные шкатулки 3-13 по аналогии -->
      <div class="chest-block" onclick="selectChest(3)">
        <img src="ВАША_КАРТИНКА_3" alt="Шкатулка 3" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №03</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Добавьте остальные 10 шкатулок по тому же шаблону -->
      
    </div>
    
    <div style="text-align: center; margin-top: 20px; font-style: italic;">
      <p>Церковь замерла в ожидании. Сделай свой выбор. Прикоснись к своему кошмару.</p>
    </div>
  </div>
</div>

</div>

<script>
function toggleSpoiler(button) {
  const content = button.nextElementSibling;
  const arrow = button.querySelector('.arrow');
  
  content.classList.toggle('open');
  arrow.classList.toggle('open');
}

function selectChest(number) {
  const message = `Участвую! Беру шкатулку номер ${number}.`;
  prompt('Скопируйте это сообщение для участия:', message);
}

// Автоматически открываем первый спойлер при загрузке
document.addEventListener('DOMContentLoaded', function() {
  const firstSpoiler = document.querySelector('.spoiler-header');
  if (firstSpoiler) {
    toggleSpoiler(firstSpoiler);
  }
});
</script>

<!--HTML--><style>
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

/* Основные стили */
.contest-container {
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Philosopher', sans-serif;
  color: #e0e0e0;
}

.header-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.atmospheric-post {
  background: linear-gradient(135deg, #2c1a1a 0%, #1a1a2e 100%);
  padding: 30px;
  border-radius: 10px;
  margin: 20px 0;
  border-left: 4px solid #8B0000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
}

/* Стили для раскрывающихся блоков */
.spoiler {
  margin: 25px 0;
}

.spoiler-header {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spoiler-header:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
  transform: translateY(-2px);
}

.spoiler-content {
  background: rgba(40, 40, 40, 0.9);
  padding: 0;
  border-radius: 0 0 8px 8px;
  margin-top: 2px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.spoiler-content.open {
  max-height: 2000px;
  padding: 25px;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

/* Стили для шкатулок */
.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="contest-container">

<!-- Атмосферная картинка -->
<img src="https://via.placeholder.com/1000x300/2c1a1a/ffffff?text=Хэллуинская+Церковь+Кошмаров" 
     alt="Хэллуинская церковь" 
     class="header-image">

<!-- Атмосферный пост -->
<div class="atmospheric-post">
  <p>Ты открываешь глаза.</p>
  
  <p>Тишина. Только ветер завывает в разбитых витражах, касаясь лица, принося с собой запах сырой земли, костра и чего-то ещё — сладковато-железного, древнего.<br>
  Ты лежишь на холодных каменных плитах… и лишь спустя миг понимаешь — это не просто плиты. Это могилы.</p>
  
  <p>Мир вокруг растворён в темноте, но глаза постепенно привыкают к мраку.<br>
  Перед тобой вырастает силуэт церкви — мёртвой, застывшей, будто сама она выдохлась от времени.<br>
  И вдруг, где-то за остриями шпилей, вспыхивает крошечный огонёк. Он дрожит, зовёт, манит — словно обещает тепло и ответы.</p>
  
  <p>Ты делаешь шаг. И каждый следующий звучит громче, чем хотелось бы, будто кто-то незримый слушает и считает твои шаги.</p>
  
  <p>Из глубины церкви доносится смех — тихий, детский, как звон колокольчиков.<br>
  Он отзывается эхом в груди, смешивая леденящий страх и странное, пожирающее любопытство.</p>
  
  <p>Ты входишь внутрь.<br>
  Под обвалившимся куполом — статуя ангела. Каменные крылья укутаны паутиной забвения, а по мраморным щекам текут алые следы — не краска, не ржавчина… что-то живое, пульсирующее.<br>
  У ног ангела, на пьедестале из костей и времени, стоят они — шкатулки.</p>
  
  <p style="text-align: center; font-style: italic; color: #ff6b6b;">
    Твой кошмар только начинается...
  </p>
</div>

<!-- Правила под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    📜 Тёмные Законы Ритуала (Правила)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <h3>Правила «Шкатулки Кошмаров»</h3>
    <p>Перед вами — шестнадцать шкатулок. Каждая хранит внутри не просто предмет, а зародыш кошмара. Ваша задача — выпустить его на волю.</p>
    
    <ol>
      <li><strong>Выбор:</strong> Чтобы участвовать, напишите в этой теме комментарий: <code>«Участвую! Беру шкатулку номер [X]»</code>, где X — число от 1 до 16.</li>
      <li><strong>Откровение:</strong> После записи я найду вас в <strong>ЛС</strong> и открою предмет, скрывающийся в вашей шкатулке.</li>
      <li><strong>Воплощение:</strong> Напишите рассказ ужаса <strong>от 1500 до 5000 знаков</strong>, где этот предмет играет ключевую роль.</li>
      <li><strong>Жертва:</strong> Готовые работы присылайте мне в <strong>ЛС до 7 ноября, 23:59 (МСК)</strong>.</li>
      <li><strong>Суд:</strong> Все рассказы будут вывешены для анонимного голосования и отгадывания авторов.</li>
    </ol>
    
    <h4>Награды для избранных:</h4>
    <ul>
      <li>🏆 <strong>Властелин Кошмаров</strong> (1 место) — уникальный титул + главная награда</li>
      <li>👻 <strong>Песнь Теней</strong> (2 место) — почетный титул + подачки из тьмы</li>
      <li>🎭 <strong>Шепот из Шкатулки</strong> (3 место) — титул + малая жертва</li>
      <li>🔮 <strong>Провидец Тьмы</strong> — титул для лучшего угадывателя авторов</li>
    </ul>
  </div>
</div>

<!-- Шкатулки под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    🎁 Выбрать Шкатулку Кошмара (16 доступно)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <div style="text-align: center; margin-bottom: 20px;">
      <p><em>Выбери свою судьбу. Но помни: обратной дороги нет.</em></p>
    </div>
    
    <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/wXqnEH8.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 style="text-align: center; margin-top: 20px; font-style: italic;">
      <p>Церковь замерла в ожидании. Сделай свой выбор. Прикоснись к своему кошмару.</p>
    </div>
  </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>
function toggleSpoiler(button) {
  const content = button.nextElementSibling;
  const arrow = button.querySelector('.arrow');
  
  content.classList.toggle('open');
  arrow.classList.toggle('open');
}

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;
}

// Автоматически открываем первый спойлер при загрузке
document.addEventListener('DOMContentLoaded', function() {
  const firstSpoiler = document.querySelector('.spoiler-header');
  if (firstSpoiler) {
    toggleSpoiler(firstSpoiler);
  }
});
</script>