v3: шарады и загадки

index.html

@@ -78,6 +78,22 @@ header{position:sticky;top:0;z-index:50;background:rgba(255,249,240,.92);backdro
 .season-head .ic{font-size:30px}
 .season-head .cnt{font-size:13px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-left:2px}
 
+/* Riddles section */
+.riddles{padding:56px 0;background:linear-gradient(160deg,var(--accent2-soft),var(--bg));border-top:1px solid var(--line)}
+.riddles h2{font-size:32px;font-weight:800;margin-bottom:6px}
+.riddles .sub{color:var(--muted);margin-bottom:10px}
+.grp-h{font-size:22px;font-weight:800;margin:34px 0 16px;display:flex;align-items:center;gap:10px}
+.grp-h .tag{font-size:13px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
+.r-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:.15s;user-select:none}
+.r-card:hover{border-color:#e0d6c2;transform:translateY(-2px)}
+.r-card .q{font-size:17px;line-height:1.5;display:flex;gap:10px}
+.r-card .q .em{font-size:26px;line-height:1;flex:none}
+.r-card .ans{display:none;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:9px 12px}
+.r-card.open .ans{display:block}
+.r-card .ans-lbl{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;opacity:.8}
+.r-card .hint{font-size:13px;color:var(--muted)}
+.r-card.open .hint{display:none}
+
 /* Big company section */
 .bigco{background:linear-gradient(160deg,var(--accent2-soft),var(--bg));margin-top:24px;padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .bigco h2{font-size:34px;font-weight:800;margin-bottom:8px}
@@ -134,9 +150,10 @@ footer .heart{color:var(--accent)}
       <span class="badge">🐱🐱 2 кошки</span>
     </div>
     <div class="hero-cta">
-      <a class="btn" href="#catalog">Открыть каталог</a>
+      <a class="btn" href="#catalog">Каталог</a>
-      <a class="btn ghost" href="#seasons">По сезонам →</a>
+      <a class="btn ghost" href="#seasons">По сезонам</a>
-      <a class="btn ghost" href="#big">Праздники →</a>
+      <a class="btn ghost" href="#riddles">Загадки</a>
+      <a class="btn ghost" href="#big">Праздники</a>
     </div>
   </div>
 </section>
@@ -182,6 +199,19 @@ footer .heart{color:var(--accent)}
   </div>
 </section>
 
+<section class="riddles" id="riddles">
+  <div class="wrap">
+    <h2>🤔 Шарады и загадки</h2>
+    <p class="sub">Угадывайте всей семьёй. Нажми на карточку — откроется ответ.</p>
+
+    <div class="grp-h">🔍 Загадки <span class="tag">для всех возрастов</span></div>
+    <div class="grid" id="riddleGrid"></div>
+
+    <div class="grp-h">🔤 Шарады <span class="tag">сложи слово из частей</span></div>
+    <div class="grid" id="charadeGrid"></div>
+  </div>
+</section>
+
 <section class="bigco" id="big">
   <div class="wrap">
     <h2>🎂 Для большой компании</h2>
@@ -375,6 +405,48 @@ function renderBySeason(){
   wrap.innerHTML=html;
 }
 
+const RIDDLES=[
+  {e:'🐱',q:'Мягкие лапки, а в лапках — царапки. Любит молоко.',a:'Кошка'},
+  {e:'🐶',q:'С хозяином дружит, дом сторожит, хвостом виляет.',a:'Собака'},
+  {e:'🐮',q:'Хвост кисточкой, рога, жуёт траву и даёт молоко.',a:'Корова'},
+  {e:'🐎',q:'Грива есть, быстро скачет, везёт поклажу.',a:'Лошадь'},
+  {e:'🐭',q:'Маленькая, серая, от кошки прячется, любит сыр.',a:'Мышка'},
+  {e:'🐰',q:'Длинные уши, короткий хвост, прыгает по полю.',a:'Заяц'},
+  {e:'🐻',q:'Зимой спит в берлоге, летом по малину ходит.',a:'Медведь'},
+  {e:'🦔',q:'Вместо шубки — иголки, носит грибы на спине.',a:'Ёжик'},
+  {e:'⚽',q:'Круглый да прыгучий, его пинают ногой.',a:'Мяч'},
+  {e:'☂️',q:'В дождь его раскрывают, в солнце — прячут.',a:'Зонт'},
+  {e:'⏰',q:'Без рук, без ног, а стучит и будит по утрам.',a:'Часы'},
+  {e:'☀️',q:'Светит и греет, но рукой не тронешь.',a:'Солнце'},
+  {e:'🌧️',q:'С неба капает, в лужи собирается.',a:'Дождь'},
+  {e:'🌈',q:'Семицветная дуга появляется после дождя.',a:'Радуга'},
+  {e:'❄️',q:'Белый да пушистый, зимой с неба падает.',a:'Снег'},
+  {e:'🕳️',q:'Чем больше из неё берёшь, тем больше она становится.',a:'Яма'},
+  {e:'📛',q:'Что твоё, но другие пользуются этим чаще, чем ты?',a:'Имя'},
+  {e:'⏳',q:'Что идёт, но не двигается с места?',a:'Время'},
+  {e:'📚',q:'Что можно приготовить, но нельзя съесть?',a:'Уроки'},
+  {e:'🧺',q:'Что становится мокрым, пока сушит?',a:'Полотенце'}
+];
+const CHARADES=[
+  {e:'⛵',q:'Первое — ПАР (от кипящей воды), второе — УС (у кота на мордочке).',a:'ПАРУС'},
+  {e:'🦡',q:'Первое — БАР (заведение), второе — СУК (ветка дерева).',a:'БАРСУК'},
+  {e:'🍂',q:'Первое — ЛИСТ (на дереве), второе — ПАД (от слова «падать»).',a:'ЛИСТОПАД'},
+  {e:'✈️',q:'Первое — САМ (самостоятельно), второе — ЛЁТ (от слова «полёт»).',a:'САМОЛЁТ'},
+  {e:'🚂',q:'Первое — ПАР, второе — ВОЗ (от слова «возить»).',a:'ПАРОВОЗ'},
+  {e:'🚢',q:'Первое — ЛЁД, второе — КОЛ (от слова «колоть»).',a:'ЛЕДОКОЛ'}
+];
+function riddleCard(r){
+  return `<div class="r-card" onclick="this.classList.toggle('open')">
+    <div class="q"><span class="em">${r.e}</span><span>${r.q}</span></div>
+    <div class="ans"><div class="ans-lbl">Ответ</div>${r.a}</div>
+    <div class="hint">👆 Нажми, чтобы увидеть ответ</div>
+  </div>`;
+}
+function renderRiddles(){
+  document.getElementById('riddleGrid').innerHTML=RIDDLES.map(riddleCard).join('');
+  document.getElementById('charadeGrid').innerHTML=CHARADES.map(riddleCard).join('');
+}
+
 /* Surprise modal */
 const modal=document.getElementById('modal');
 const modalCard=document.getElementById('modalCard');
@@ -410,6 +482,7 @@ document.getElementById('reset').onclick=()=>{state.cat='all';state.season='all'
 renderChips();
 renderGrid();
 renderBySeason();
+renderRiddles();
 renderBig();
 </script>
 </body>