/* ============================================================
   משחקי המערה · עולם 6 (במספור של הילד) · 🆕 19.10.2026
   גבישי ההד (echo-crystals) · קוראים סיפור קצר (story-read)
   🔴 המילים תמיד כהות על משטח בהיר, כמו בכל הקורס
   ============================================================ */

/* ---------- גבישי ההד ---------- */
.ec-scene {
  position: relative; width: min(100%, 600px); aspect-ratio: 16 / 8; margin: 4px 0 8px; overflow: hidden;
  border-radius: 22px; box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px rgba(25, 211, 197, .3);
  background: url(../assets/img/cave/cave.jpg) 50% 50% / cover no-repeat, var(--graphite-2);
  display: grid; place-items: center;
}
.ec-scene::after { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 22, .35); transition: background 1.2s; pointer-events: none; }
.ec-scene.is-lit::after { background: rgba(25, 211, 197, .08); }
/* הגבישים הקטנים לאורך קירות המערה: כבויים, ונדלקים אחד אחד */
.ec-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ec-gem {
  position: absolute; width: 9%; height: auto; opacity: .3; filter: grayscale(.8) brightness(.6);
  transition: opacity .5s, filter .5s, transform .5s;
  left: calc(4% + var(--i) * 15.5%); bottom: calc(6% + (var(--i) * 37 % 3) * 9%);
}
.ec-gem:nth-child(even) { bottom: auto; top: calc(6% + (var(--i) * 13 % 2) * 8%); transform: rotate(180deg); }
.ec-gem.is-on { opacity: 1; filter: drop-shadow(0 0 12px var(--teal-glow)) drop-shadow(0 0 22px rgba(255, 62, 165, .45)); }
/* הגביש הגדול במרכז, ועליו המילה */
.ec-crystal { position: absolute; z-index: 2; left: 50%; top: 4%; height: 92%; aspect-ratio: 600 / 644; transform: translateX(-50%); }
.ec-crystal img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(25, 211, 197, .45)); transition: filter .4s; }
.ec-crystal.is-echo img { filter: drop-shadow(0 0 22px var(--teal)) drop-shadow(0 0 40px rgba(255, 62, 165, .55)); }
.ec-word {
  position: absolute; left: 20%; right: 20%; top: 44%; height: 22%;
  display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 12px;
  background: rgba(240, 252, 255, .88); color: var(--ink); box-shadow: 0 0 0 2px rgba(25, 211, 197, .6);
  font-family: 'Andika', 'Trebuchet MS', sans-serif; font-size: clamp(22px, 5vw, 36px); font-weight: 700;
}
.ec-word .is-pair { color: #0f8f86; }
/* גלי ההד יוצאים מהגביש */
.ec-rings { position: absolute; inset: 0; pointer-events: none; }
.ec-rings i { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; margin: -30% 0 0 -30%; border-radius: 50%;
  border: 3px solid var(--teal); opacity: 0; }
.ec-crystal.is-echo .ec-rings i { animation: ec-ring 1.5s ease-out both; }
.ec-crystal.is-echo .ec-rings i:nth-child(2) { animation-delay: .52s; }
.ec-crystal.is-echo .ec-rings i:nth-child(3) { animation-delay: 1.04s; }
@keyframes ec-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.ec-pics { gap: 14px; margin-top: 4px; }
.ec-pics .pic-btn .art { width: 96px; height: 96px; }

/* ---------- קוראים סיפור קצר ---------- */
.sr-page {
  width: min(100%, 560px); padding: 18px 24px; margin: 6px 0 10px; border-radius: 20px; text-align: left;
  background: linear-gradient(180deg, #fffaf0, #f3ead8); color: var(--ink);
  box-shadow: 0 0 0 3px #7a5236, 0 0 0 6px rgba(25, 211, 197, .35), var(--shadow);
}
.sr-line { margin: 4px 0; padding: 2px 8px; border-radius: 10px; font-family: 'Andika', 'Trebuchet MS', sans-serif;
  font-size: clamp(24px, 4.6vw, 34px); font-weight: 700; line-height: 1.35; transition: background .25s; }
.sr-line.is-lit { background: rgba(25, 211, 197, .28); }
.sr-done { margin: 4px 0 6px; }
.sr-q { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sr-ask { font-weight: 700; font-size: 1.15rem; color: var(--text); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ec-crystal.is-echo .ec-rings i { animation: none; }
}
@media (max-width: 600px) {
  .ec-crystal { height: 96%; top: 2%; }
  .ec-word { left: 12%; right: 12%; }
  .ec-pics { gap: 8px; }
  .ec-pics .pic-btn .art { width: 80px; height: 80px; }
  .sr-page { padding: 12px 14px; }
  .sr-line { font-size: 21px; margin: 2px 0; }
  .sr-q .pic-options { gap: 8px; flex-wrap: nowrap; }
  .sr-q .pic-btn .art { width: 80px; height: 80px; }
}