/* ═══════════════════════════════════════════════════════════════
   MiniMümin — Oyun-B sahne stilleri (bul / sırala / yapboz / elifba)
   js/scenes-find.js ile birlikte çalışır.
   ═══════════════════════════════════════════════════════════════ */

/* Sahne kilit: doğru cevaptan sonra tıklamalar kapansın */
.scene-locked { pointer-events: none !important; }

/* ── İpucu vurguları (SÖZLEŞME 1) ──
   Kapsam: yalnız bu dosyanın sahneleri. games.css'teki global !important
   animasyonu buradaki opacity darbesini eziyordu — sahne kapsamlı seçici +
   !important ile öncelik kesinleştirildi. */
.scene-find .reveal-correct,
.scene-sort .reveal-correct,
.scene-puzzle .reveal-correct,
.scene-elifba .reveal-correct,
.scene-timed .reveal-correct {
  outline: 4px dashed #06D6A0 !important;
  outline-offset: 3px;
  animation: sf-reveal-pulse 1s ease-in-out infinite !important;
}
.scene-find .reveal-dim,
.scene-sort .reveal-dim,
.scene-puzzle .reveal-dim,
.scene-elifba .reveal-dim,
.scene-timed .reveal-dim { opacity: 0.35 !important; filter: grayscale(.4); }
@keyframes sf-reveal-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-find .reveal-correct,
  .scene-sort .reveal-correct,
  .scene-puzzle .reveal-correct,
  .scene-elifba .reveal-correct,
  .scene-timed .reveal-correct { animation: none !important; }
}
.scene-find svg .reveal-correct,
.scene-sort svg .reveal-correct,
.scene-puzzle svg .reveal-correct,
.scene-elifba svg .reveal-correct,
.scene-timed svg .reveal-correct { outline: none; }
.scene-find svg .reveal-correct path,
.scene-sort svg .reveal-correct path,
.scene-puzzle svg .reveal-correct path,
.scene-elifba svg .reveal-correct path,
.scene-timed svg .reveal-correct path {
  filter: drop-shadow(0 0 8px #06D6A0) brightness(1.2);
}

/* ════════ 1) FIND_HIDDEN ════════ */
.scene-find {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #FDF0D5;
  padding-top: clamp(56px, 12vh, 76px);
  box-sizing: border-box;
}
.scene-find .find-svg { width: 100%; height: 100%; display: block; }
.scene-find .find-target { cursor: pointer; }
.scene-find .find-target.found { pointer-events: none; }
.scene-find .find-target.found path {
  fill: #06D6A0;
  stroke: #0B9B6F;
  animation: sf-found-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
/* B21 — PNG ikonlu hedefler: bulunca yeşil halka + pop */
.scene-find .find-target.found .find-ring { opacity: .92; animation: sf-found-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.scene-find .find-target.found image {
  animation: sf-found-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
  filter: drop-shadow(0 0 6px #06D6A0) !important;
}
@keyframes sf-found-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.5); }
  100% { transform: scale(1.15); }
}
.find-counter {
  position: absolute;
  top: 64px;
  right: 12px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 14px;
  font: 900 15px/1.2 'Nunito', sans-serif;
  color: #2D2D2D;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  pointer-events: none;
  z-index: 5;
}
.scene-wrong-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 71, 111, .16);
  animation: sf-flash .35s ease-out both;
  pointer-events: none;
}
@keyframes sf-flash { from { opacity: 1; } to { opacity: 0; } }

/* ════════ 2) SORT_ORDER ════════ */
.scene-sort {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* B13 — üst boşluk talimat pill'ına yetişir (eskiden 14px: slot'lar pill'ın
     altında kalıp masaüstünde üst üste biniyordu); slot/pool ölçeği vmin ile
     büyür — masaüstünde dev sahnede kaybolmaz. */
  padding: 72px 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFF4D6 0%, #FFEBC0 100%);
  box-sizing: border-box;
}
.sort-slots {
  display: flex;
  gap: clamp(10px, 1.6vmin, 18px);
  justify-content: center;
  min-height: 64px;
}
.sort-slot {
  flex: 0 1 clamp(96px, 14vmin, 176px);
  min-height: clamp(60px, 11vmin, 124px);
  border: 3px dashed #C89B5A;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  position: relative;
  transition: border-color .2s, background .2s;
}
.sort-slot-num {
  position: absolute;
  top: -10px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FF6B35;
  color: #fff;
  font: 900 12px/22px 'Nunito', sans-serif;
  text-align: center;
}
.sort-slot.filled {
  border-style: solid;
  border-color: #06D6A0;
  background: #FFFFFF;
  font: 800 13.5px/1.25 'Nunito', sans-serif;
  color: #2D2D2D;
  text-align: center;
}
.sort-slot.filled .sort-emoji { font-size: 20px; }
.sort-slot.slot-cheer { animation: sf-slot-cheer .5s ease; }
@keyframes sf-slot-cheer {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-6px); }
}
.sort-pool {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.sort-chip {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 12px 20px;
  font: 900 16px/1.2 'Nunito', sans-serif;
  color: #2D2D2D;
  box-shadow: 0 4px 0 rgba(200, 155, 90, .45);
  transition: transform .15s, box-shadow .15s;
  min-height: 48px;
}
.sort-chip:active { transform: scale(.95); }
.sort-emoji { font-size: 22px; }

/* B57 — görsel mod: step_*.png varsa BÜYÜK görsel + minik etiket.
   Dokunma hedefi ≥56px (2-3 yaş parmağı); görsel clamp ile ölçeklenir.
   Etiket küçülür ama silinmez: ebeveyn okuyabilir, sesli geri bildirim
   (MiniUtils.safeSpeak) zaten etiketi okur. */
.sort-chip-img {
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  min-width: clamp(84px, 20vmin, 128px);
}
.sort-img { display: block; object-fit: contain; pointer-events: none; }
.sort-chip-img .sort-img { width: clamp(64px, 18vmin, 110px); height: clamp(64px, 18vmin, 110px); }
.sort-slot .sort-img  { width: clamp(46px, 12vmin, 74px); height: clamp(46px, 12vmin, 74px); }
.sort-label-mini { font-size: clamp(10px, 2.2vmin, 12px); font-weight: 800; opacity: .75; }

/* boy/boyut ipucu: çip boyutu sırayla büyür */
.sort-chip.sz1 { font-size: 13px; padding: 8px 14px; }
.sort-chip.sz2 { font-size: 14.5px; padding: 10px 16px; }
.sort-chip.sz3 { font-size: 16px; padding: 12px 19px; }
.sort-chip.sz4 { font-size: 17.5px; padding: 14px 22px; }
.sort-chip.sz5 { font-size: 19px; padding: 16px 25px; }
.sort-chip.placed { visibility: visible; opacity: .35; }
.chip-shake { animation: sf-shake .45s ease; }
@keyframes sf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ════════ 3) SHAPE_PUZZLE ════════ */
.scene-puzzle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #EAF7F0 0%, #D3EFE2 100%);
  padding-top: clamp(56px, 12vh, 76px);
  box-sizing: border-box;
}
.pz-silhouette { position: absolute; inset: 0; pointer-events: none; }
.pz-silhouette svg { width: 100%; height: 100%; display: block; }
.pz-slot {
  position: absolute;
  border: 3px dashed #0E9F6E;
  border-radius: 8px;
  background: rgba(14, 159, 110, .05);
  pointer-events: none;
  transition: background .2s;
}
.pz-tray-label {
  position: absolute;
  left: 12px;
  top: 8px;
  font: 900 14px/1.2 'Nunito', sans-serif;
  color: #5B6B8C;
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 4px 12px;
  pointer-events: none;
  z-index: 6;
}
.pz-piece {
  position: absolute;
  cursor: grab;
  touch-action: none;
  z-index: 4;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.pz-piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.pz-piece.dragging {
  cursor: grabbing;
  z-index: 8;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)) brightness(1.05);
  transition: none;
}
.pz-piece.locked { cursor: default; z-index: 3; }
.pz-piece.pz-snap { animation: sf-snap .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sf-snap {
  0%   { transform: scale(.92); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pz-piece.pz-reject { animation: sf-shake .45s ease; }

/* ════════ 4) ARABIC_LETTER ════════ */
.scene-elifba {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.elifba-deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.elifba-cards {
  position: relative;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 2;
}
.elifba-card {
  /* B14 — sabit 128×144 yerine vmin ölçeği: masaüstünde harf taşları sahneye
     göre büyür (benzer harfler ب/ت/ث çocuk için okunur kalır) */
  width: clamp(104px, 18vmin, 200px);
  height: clamp(120px, 20vmin, 232px);
  border: 5px solid #0E9F6E;
  border-radius: 22px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 rgba(14, 159, 110, .35);
  transition: transform .15s, box-shadow .15s;
}
.elifba-card:active { transform: scale(.95); }
.elifba-letter {
  font-size: clamp(56px, 10.5vmin, 116px);
  font-weight: 800;
  color: #2D2D2D;
  /* B43 (QA düzeltmesi): 'Traditional Arabic' izole harfleri em kutusuna göre
     küçük çiziyordu; Segoe UI tam boy ve net çiziyor (bkz. font-test.png) */
  font-family: 'Segoe UI', 'Arial', 'Traditional Arabic', 'Amiri', serif;
  line-height: 1;
}
/* B41 — biçim oyununda sunum biçimleri (ﺑ ﺒ ﺐ): (1) 'Traditional Arabic' bu glifleri
   küçük/bozuk çiziyor, Segoe UI tam boy ve doğru çiziyor; (2) kuyruk yönü farkları
   seçilebilsin diye harf kutusuna göre daha iri punto (font-test.png ile doğrulandı) */
.scene-elifba.elifba-forms .elifba-letter {
  font-family: 'Segoe UI', 'Arial', 'Traditional Arabic', serif;
  font-size: clamp(76px, 14vmin, 132px);
}
.elifba-card.card-correct {
  border-color: #06D6A0;
  background: #E9FBF3;
  animation: sf-snap .45s cubic-bezier(.3, 1.5, .5, 1) both;
}
.elifba-card.card-wrong { animation: sf-shake .45s ease; }

/* ══════════════════════════════════════════════════════════════
   DALGA 3 — SIRALAMA SAHNELERİ (abdest_sirasi + namaz_vakitleri)
═══════════════════════════════════════════════════════════════ */
.scene-timed {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timed-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.timed-slots {
  position: relative;
  z-index: 10;
  display: flex;
  gap: clamp(6px, 1.6vw, 14px);
  /* talimat bandının altında kalsın */
  margin-top: clamp(54px, 10vh, 82px);
}
.timed-slot {
  width: clamp(58px, 13vw, 96px);
  min-height: clamp(66px, 15vw, 104px);
  border-radius: 16px;
  border: 3px dashed rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  position: relative; /* .timed-slot-num'un konum çapası — ayrı kuraldan buraya taşındı */
}
.timed-slot-num {
  position: absolute;
  transform: translateY(-30px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFD166;
  color: #6B4E12;
  font: 900 13px/22px var(--font, 'Nunito', sans-serif);
}
.timed-slot.filled {
  border-style: solid;
  border-color: #2FB344;
  background: #E8FFF5;
  animation: sf-snap 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.timed-slot .timed-emoji { font-size: clamp(18px, 4vw, 26px); line-height: 1.1; }
.timed-slot .timed-label {
  font: 800 clamp(10px, 2vw, 13px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #333;
}
.timed-pool {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: clamp(8px, 2vw, 16px);
  padding: 14px 16px 22px;
}
.timed-chip {
  min-width: clamp(96px, 19vw, 150px);
  border: 3px solid #FFFFFF;
  border-radius: 18px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(30, 60, 90, 0.22), 0 10px 16px rgba(20, 50, 90, 0.15);
  font-family: inherit;
  animation: sf-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.timed-namaz .timed-chip { color: #1E2352; }
.timed-abdest .timed-chip { color: #33506B; }
.timed-emoji { font-size: clamp(22px, 5vw, 30px); line-height: 1; }
.timed-label { font: 900 clamp(13px, 2.6vw, 17px)/1.2 var(--font, 'Nunito', sans-serif); }
/* B57 — görsel mod (abdest/namaz): step_*.png varsa büyük görsel + minik etiket */
.timed-chip-img { min-width: clamp(88px, 21vmin, 132px); }
.timed-img { display: block; object-fit: contain; pointer-events: none;
             width: clamp(56px, 15vmin, 92px); height: clamp(56px, 15vmin, 92px); }
.timed-slot .timed-img { width: clamp(44px, 11vmin, 70px); height: clamp(44px, 11vmin, 70px); }
.timed-label-mini { font: 800 clamp(10px, 2.2vmin, 12px)/1.2 var(--font, 'Nunito', sans-serif); opacity: .75; }
.timed-chip:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(30, 60, 90, 0.22); }
.timed-chip.placed { visibility: hidden; }
.timed-chip.chip-shake { animation: sf-shake 0.45s ease; }
.timed-chip.reveal-correct { outline: 4px solid #2FB344; outline-offset: 2px; }
.timed-chip.reveal-dim { opacity: 0.38 !important; }
.timed-slot.slot-cheer { animation: sf-snap 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }

/* ══════════════════════════════════════════════════════════════
   B50 — İZ SÜRME (trace_path)
   Parmakla çizgi takibi. Çizim yüzeyi tüm sahneyi kaplar; parmak
   kaldırılıp yeniden basılabilir (baskısız felsefe).
═══════════════════════════════════════════════════════════════ */
.scene-trace {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFDF7 0%, #F3F7FC 100%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Çizim sırasında tarayıcı kaydırma/zoom yapmasın (parmak takibi şart) */
  touch-action: none;
  user-select: none;
  /* Motorun soru banner'ı sahnenin üstünde sabit (top:16px) — onunla çakışma */
  padding-top: clamp(40px, 8vh, 56px);
}
.trace-bg { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; }
.trace-guide { transition: none; }
.trace-done { transition: none; }
/* Tamamlanınca tüm sahne kısa bir parlar */
.scene-trace.trace-complete .trace-done {
  animation: trace-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes trace-pop {
  0%   { stroke-width: 46; }
  45%  { stroke-width: 62; }
  100% { stroke-width: 46; }
}
/* İpucu: kalan kısım nefes alır + işaretçi */
.scene-trace.trace-hint .trace-guide { animation: trace-breathe 0.9s ease-in-out infinite; }
@keyframes trace-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.trace-hint-ptr {
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(255, 209, 102, 0.35);
  border: 3px solid #FFB703;
  pointer-events: none;
  animation: trace-ptr 1s ease-in-out infinite;
  z-index: 20;
}
@keyframes trace-ptr {
  0%, 100% { transform: scale(0.85); opacity: 0.9; }
  50%      { transform: scale(1.15); opacity: 0.5; }
}
/* İlerleme çubuğu — çocuk ne kadarını tamamladığını görsün */
.trace-progress {
  height: 14px;
  margin: 0 18px 6px;
  border-radius: 999px;
  background: #E4EAF2;
  overflow: hidden;
  flex: 0 0 auto;
}
.trace-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB703, #06D6A0);
  transition: width 0.15s linear;
}
.trace-label {
  flex: 0 0 auto;
  text-align: center;
  padding: 4px 12px 14px;
  font: 800 clamp(13px, 2.8vw, 17px)/1.3 var(--font, 'Nunito', sans-serif);
  color: #48566B;
}
@media (prefers-reduced-motion: reduce) {
  .scene-trace.trace-hint .trace-guide { animation: none; opacity: 0.7; }
  .trace-hint-ptr { animation: none; }
  .scene-trace.trace-complete .trace-done { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   B51 — BOYAMA ATÖLYESİ (color_play)
   Serbest yaratıcılık: doğru/yanlış yok. Palet üstte, tuval ortada.
   Dokunma hedefleri ≥44px (2-5 yaş ergonomisi).
═══════════════════════════════════════════════════════════════ */
.scene-paint {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFDF7 0%, #FDF3E7 100%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  touch-action: manipulation;
  user-select: none;
  /* ⚠️ Motorun soru banner'ı sahnenin ÜSTÜNDE sabit durur (absolute).
     Palet + başlık onun altına girmesin diye üstten boşluk bırakılır. */
  padding-top: clamp(44px, 9vh, 62px);
}
.paint-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 4px;
  flex-wrap: wrap;
}
.paint-title {
  font: 900 clamp(14px, 3vw, 19px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #2D2D2D;
  white-space: nowrap;
}
.paint-palet {
  display: flex;
  gap: clamp(4px, 1.4vw, 9px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.paint-swap {
  /* 2-5 yaş parmağı: 30px dokunma hedefi çok küçüktü (telefonda ölçüldü) —
     vmin ölçeğiyle en az 40px'e çıkarıldı (KALAN-ISLER-NOTU vmin deseni) */
  width: clamp(40px, 10vmin, 54px);
  height: clamp(40px, 10vmin, 54px);
  min-width: 40px; min-height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--renk, #ccc);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;
  padding: 0;
  transition: transform .12s, box-shadow .12s;
}
/* Beyaz boya görünür olsun (beyaz zemin üstünde kaybolmasın) */
.paint-swap[data-beyaz="1"] { border-color: #C9CFDB; }
.paint-swap:active { transform: scale(.9); }
.paint-swap.secili {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px #FFB703, 0 3px 10px rgba(0,0,0,.22);
  border-color: #FFB703;
}
.paint-canvas { flex: 1; width: 100%; min-height: 0; display: block; }
.paint-piece {
  cursor: pointer;
  transition: fill .18s;
}
.paint-piece:active { opacity: .85; }
.paint-piece.paint-pop { animation: paint-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes paint-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.paint-piece { transform-box: fill-box; transform-origin: center; }
/* Tamamlanınca tuval hafifçe parlar */
.scene-paint.paint-complete .paint-canvas { animation: paint-done .7s ease; }
@keyframes paint-done {
  0%, 100% { filter: none; }
  45%      { filter: drop-shadow(0 0 14px rgba(255, 183, 3, .85)); }
}
/* İpucu: boyanmamış bölgeler nefes alır */
.scene-paint.paint-hint .paint-piece[fill="#FFFFFF"]:not(.paint-pop) {
  animation: paint-breathe 0.9s ease-in-out infinite;
}
@keyframes paint-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.paint-foot {
  flex: 0 0 auto;
  text-align: center;
  padding: 4px 12px 12px;
}
.paint-hint {
  font: 800 clamp(12px, 2.6vw, 16px)/1.3 var(--font, 'Nunito', sans-serif);
  color: #6B7684;
}
@media (prefers-reduced-motion: reduce) {
  .paint-piece.paint-pop { animation: none; }
  .scene-paint.paint-complete .paint-canvas { animation: none; }
  .scene-paint.paint-hint .paint-piece { animation: none; opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════
   B52 — ESMÂÜ'L-HÜSNA (esma_secimi)
   Gece teması + kart şıklar. Okunuş büyük, anlam küçük puntoyla.
═══════════════════════════════════════════════════════════════ */
.scene-esma {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
}
.esma-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-stars { animation: es-twinkle 3.2s ease-in-out infinite; }
@keyframes es-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.esma-panel {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 14px;
  box-sizing: border-box;
}
.esma-soru {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.94);
  border-radius: 18px;
  padding: 10px 20px;
  max-width: 94%;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.esma-soru-emoji { font-size: clamp(20px, 4.5vw, 28px); }
.esma-soru-metin {
  font: 800 clamp(13px, 2.8vw, 18px)/1.35 var(--font, 'Nunito', sans-serif);
  color: #2D2D2D;
}
.esma-soru-metin strong { color: #7048E8; }
.esma-cards {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96%;
}
.esma-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(84px, 20vw, 130px);
  min-height: 88px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 3px solid #FFFFFF;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
}
.esma-card:active { transform: scale(.95); }
.esma-card.correct {
  border-color: #06D6A0;
  box-shadow: 0 0 0 4px rgba(6,214,160,.35), 0 6px 18px rgba(0,0,0,.22);
  animation: plate-pop .5s ease;
}
.esma-card.wrong { animation: svg-shake .45s ease; border-color: #EF476F; }
.esma-card.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.esma-card.reveal-dim { opacity: 0.35 !important; }
.esma-emoji { font-size: clamp(19px, 4vw, 26px); line-height: 1; }
.esma-okunus {
  font: 900 clamp(15px, 3.4vw, 22px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #3B3670;
}
.esma-anlam {
  font: 700 clamp(10px, 2.2vw, 13px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #6B7684;
}

/* ══════════════════════════════════════════════════════════════
   B52 — KUR'AN HAYVANLARI (kuran_hayvan)
   Gündüz/doğa teması + emojili hayvan kartları.
═══════════════════════════════════════════════════════════════ */
.scene-kh {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
}
.kh-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kh-panel {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 14px;
  box-sizing: border-box;
}
.kh-ipucu {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.94);
  border-radius: 18px;
  padding: 10px 20px;
  max-width: 94%;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.kh-ipucu-emoji { font-size: clamp(20px, 4.5vw, 28px); }
.kh-ipucu-metin {
  font: 800 clamp(12px, 2.6vw, 17px)/1.35 var(--font, 'Nunito', sans-serif);
  color: #1B5E43;
}
.kh-cards {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96%;
}
.kh-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: clamp(76px, 18vw, 120px);
  min-height: 88px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 3px solid #FFFFFF;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
}
.kh-card:active { transform: scale(.95); }
.kh-card.correct {
  border-color: #06D6A0;
  box-shadow: 0 0 0 4px rgba(6,214,160,.35), 0 6px 18px rgba(0,0,0,.16);
  animation: plate-pop .5s ease;
}
.kh-card.wrong { animation: svg-shake .45s ease; border-color: #EF476F; }
.kh-card.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.kh-card.reveal-dim { opacity: 0.35 !important; }
.kh-emoji { font-size: clamp(30px, 7vw, 46px); line-height: 1.1; }
.kh-ad {
  font: 800 clamp(12px, 2.6vw, 16px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #1B5E43;
}
@media (prefers-reduced-motion: reduce) {
  .es-stars { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   B54 — MATEMATİK + YAŞAM + RAMAZAN SAHNELERİ
   Ortak: üst boşluk (soru banner'ı ile çakışma), büyük dokunma hedefleri.
═══════════════════════════════════════════════════════════════ */

/* 1) SAYI EŞLEŞTİRME — üstte dev rakam, altta miktar kartları */
.scene-sayi {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(160deg, #F0F8FF 0%, #E3F2FF 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 3vh, 26px);
  padding: clamp(44px, 9vh, 62px) 14px 14px;
}
.se-hedef { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.se-hedef-sayi {
  font: 900 clamp(52px, 14vw, 104px)/1 var(--font, 'Nunito', sans-serif);
  color: #1E5C9E;
  text-shadow: 0 4px 12px rgba(77,171,247,.28);
}
.se-hedef-etiket {
  font: 800 clamp(12px, 2.6vw, 16px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #4DABF7;
}
.se-cards { display: flex; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; }
.se-card {
  min-width: clamp(78px, 20vw, 128px);
  min-height: clamp(72px, 18vw, 112px);
  padding: 8px 12px;
  border-radius: 18px; border: 4px solid #A5D8FF; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 16px rgba(77,171,247,.14);
  transition: transform .12s, border-color .15s;
}
.se-card:active { transform: scale(.95); }
.se-card.correct { border-color: #06D6A0; background: #E8FBF4; }
.se-card.wrong { border-color: #EF476F; background: #FDECEF; animation: svg-shake .45s ease; }
.se-card.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.se-card.reveal-dim { opacity: 0.35 !important; }
.se-miktar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.se-emoji { font-size: clamp(15px, 3.6vw, 26px); line-height: 1.15; }

/* 2) TOPLAMA / ÇIKARMA — görsel gruplar + işlem */
.scene-islem {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(160deg, #FFFBF5 0%, #FFF4E6 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: clamp(44px, 9vh, 62px) 14px 14px;
}
.is-gorsel {
  display: flex; align-items: center; gap: clamp(6px, 1.6vw, 14px);
  flex-wrap: wrap; justify-content: center; max-width: 96%;
}
.is-grup { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 46%; }
.is-emoji { font-size: clamp(24px, 6vw, 42px); line-height: 1.1; }
.is-giden { opacity: 0.35; position: relative; }
.is-giden::after {
  content: ''; position: absolute; left: -4%; right: -4%; top: 48%;
  height: 4px; background: #EF476F; transform: rotate(-14deg); border-radius: 3px;
}
.is-isaret { font-size: clamp(26px, 6vw, 44px); font-weight: 900; color: #F59F00; }
.is-islem {
  font: 900 clamp(24px, 6vw, 44px)/1 var(--font, 'Nunito', sans-serif);
  color: #E8590C; letter-spacing: 2px;
}
.is-bos { color: #F59F00; }
.is-siklar { display: flex; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; }
.is-sik {
  min-width: clamp(64px, 15vw, 96px);
  min-height: clamp(60px, 14vw, 88px);
  border-radius: 20px; border: 4px solid #FFD8A8; background: #FFFFFF;
  font: 900 clamp(24px, 6vw, 42px)/1 var(--font, 'Nunito', sans-serif);
  color: #E8590C; cursor: pointer;
  box-shadow: 0 6px 16px rgba(232,89,12,.12);
  transition: transform .12s, border-color .15s;
}
.is-sik:active { transform: scale(.94); }
.is-sik.correct { border-color: #06D6A0; background: #E8FBF4; color: #0B9B6F; }
.is-sik.wrong { border-color: #EF476F; background: #FDECEF; animation: svg-shake .45s ease; }
.is-sik.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.is-sik.reveal-dim { opacity: 0.35 !important; }

/* 3) ÖLÇME — iki nesne kartı */
.scene-olcme {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(160deg, #F2FFFA 0%, #E6FCF5 100%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(44px, 9vh, 62px) 14px 14px;
}
.ol-cards { display: flex; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; justify-content: center; }
.ol-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: clamp(104px, 26vw, 176px);
  min-height: clamp(104px, 26vw, 176px);
  padding: clamp(10px, 2.4vw, 18px);
  border-radius: 24px; border: 4px solid #96F2D7; background: #FFFFFF;
  cursor: pointer; box-shadow: 0 8px 20px rgba(12,166,120,.14);
  transition: transform .12s, border-color .15s;
}
.ol-card:active { transform: scale(.95); }
.ol-card.correct { border-color: #06D6A0; background: #E8FBF4; }
.ol-card.wrong { border-color: #EF476F; background: #FDECEF; animation: svg-shake .45s ease; }
.ol-card.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.ol-card.reveal-dim { opacity: 0.35 !important; }
.ol-emoji { font-size: clamp(40px, 11vw, 76px); line-height: 1.1; }
.ol-ad {
  font: 800 clamp(12px, 2.8vw, 17px)/1.2 var(--font, 'Nunito', sans-serif);
  color: #0CA678; text-align: center;
}

/* 4) RAMAZAN — gece teması + bilgi chipları */
.scene-ramazan {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; box-sizing: border-box;
}
.rm-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm-panel {
  position: relative; z-index: 5; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 3vh, 26px);
  padding: clamp(44px, 9vh, 62px) 14px 14px; box-sizing: border-box;
}
.rm-soru {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.94); border-radius: 18px;
  padding: 10px 20px; max-width: 94%;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.rm-emoji { font-size: clamp(20px, 4.5vw, 28px); }
.rm-metin {
  font: 800 clamp(13px, 2.8vw, 18px)/1.35 var(--font, 'Nunito', sans-serif);
  color: #2D2D2D;
}
.rm-chiplar { display: flex; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; justify-content: center; max-width: 96%; }
.rm-chip {
  min-width: clamp(96px, 24vw, 156px);
  min-height: 72px;
  padding: 12px 18px;
  border-radius: 20px; border: 3.5px solid #B197FC; background: rgba(255,255,255,0.96);
  font: 800 clamp(14px, 3vw, 19px)/1.25 var(--font, 'Nunito', sans-serif);
  color: #4C3A8C; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
  transition: transform .12s, border-color .15s;
}
.rm-chip:active { transform: scale(.95); }
.rm-chip.correct { border-color: #06D6A0; background: #E8FBF4; color: #0B9B6F; }
.rm-chip.wrong { border-color: #EF476F; background: #FDECEF; animation: svg-shake .45s ease; }
.rm-chip.reveal-correct { outline: 4px solid #06D6A0; outline-offset: 3px; }
.rm-chip.reveal-dim { opacity: 0.35 !important; }

@media (max-width: 700px) {
  /* 7-8 yuvalı abdest/namaz pencereleri 360px telefonda tek satıra sığmıyordu
     (satır ~474px > 360px, sahne overflow:hidden olduğu için kırpılıyordu):
     ikinci satıra sar, yuvaları daralt, numara rozeti (translateY(-30px)) için
     satır aralığını aç. */
  .timed-slots {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: clamp(26px, 8vw, 34px);
    max-width: 100%;
    padding-inline: 8px;
    box-sizing: border-box;
  }
  .timed-slot { width: clamp(40px, 13.5vw, 76px); min-height: clamp(56px, 18vw, 86px); }
  .timed-chip { min-width: clamp(80px, 24vw, 120px); }
}

/* B raporu: .timed-chip giriş animasyonu için eksik keyframes */
@keyframes sf-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dokunmatikte sticky-hover öğeyi basılıyormuş gibi oynatmasın */
@media (hover: hover) {
  .timed-chip:hover { transform: translateY(-3px); }
}

/* Dokunma ergonomisi: sıralama/elifba hedefleri ≥48px */
.sort-chip, .timed-chip { min-height: 48px; }

/* B28 — fener modu: el feneri deliği (parmak konumu --fx/--fy ile) */
.find-dark {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 150px at var(--fx, 50%) var(--fy, 50%),
    rgba(8, 12, 28, 0) 0px, rgba(8, 12, 28, 0) 70px, rgba(8, 12, 28, 0.88) 170px);
}