/* ════════════════════════════════════════════════════════════════
   MiniMümin — Games CSS v4.0 (LogicLike 1:1 Görsel Uyumlu)
   ════════════════════════════════════════════════════════════════ */

/* ── LogicLike Tablet Konteyneri & Oyun Görünümü ── */
#screen-game {
  background: linear-gradient(145deg, #D4E4F7 0%, #C4D7ED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.logiclike-viewport {
  width: 100%;
  height: 100%;
  max-width: 900px;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logiclike-tablet {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 36px;
  box-shadow: 0 20px 48px rgba(32, 64, 100, 0.18), 0 0 0 10px rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Sol Üst: Yuvarlak '✕' Kapatma Butonu ── */
.btn-logic-close {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform 0.15s, background 0.15s;
}
.btn-logic-close:active {
  transform: scale(0.9);
  background: #F0F4F8;
}

/* ── Üst Talimat Başlığı ── */
.logic-instruction-pill {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  padding: 8px 26px;
  border-radius: 50px;
  font-size: clamp(13px, 3.2vw, 17px);
  font-weight: 800;
  color: #2D3748;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
  z-index: 90;
  pointer-events: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── LogicLike İlerleme Noktaları ── */
.logic-progress-dots {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 90;
  pointer-events: none;
}
.logic-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logic-dot.current {
  background: #FFFFFF;
  box-shadow: 0 0 0 3px #5B53D6, inset 0 0 0 2px rgba(0, 0, 0, 0.05);
  transform: scale(1.25);
}
.logic-dot.done-correct { background: #2FB344; }
.logic-dot.done-failed  { background: #F2A33C; }

/* ── Sahne Alanı ── */
.logic-stage-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ── İpucu (Reveal) Sistemi ── */
.reveal-correct {
  animation: reveal-pulse 0.85s ease-in-out infinite !important;
  z-index: 30;
}
svg .reveal-correct,
svg g.reveal-correct {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes reveal-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.09); }
}
/* B2 — .kitchen-character translate(-50%,-50%) ile konumlanır; paylaşılan
   reveal-pulse'ın scale'i o transformu ezip ipucu sırasında karakteri
   merkezden taşırdı (char-jump/char-wobble'daki çözümün aynısı: translate
   keyframe'e dahil). !important, .reveal-correct'ın !important shorthand'ını
   daha yüksek özgüllükle yener. */
.kitchen-character.reveal-correct {
  animation-name: reveal-pulse-centered !important;
}
@keyframes reveal-pulse-centered {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}
.reveal-dim { opacity: 0.38 !important; }

/* ── B49 — YUMUŞAK İPUCU (ilk yanlışta) ──
   Tam ipuçtan (reveal) farkı: CEVABI VERMEZ. Yanlış denenen öğe soluklaşır,
   doğru öğe hafifçe nabız atar ama DİĞERLERİ SOLUKLAŞMAZ — çocuk yönü sezer,
   cevabı bulmak zorunda kalır. Hafıza kartlarında kullanılmaz. */
.soft-wrong {
  opacity: 0.45 !important;
  transition: opacity .3s;
}
@keyframes soft-nudge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.soft-nudge {
  animation: soft-nudge-pulse 0.35s ease-in-out 2;
}
/* Konumlanmış öğelerde scale merkezden kaydırmasın */
.kitchen-character.soft-nudge,
.cupcake-hero.soft-nudge {
  animation-name: reveal-pulse-centered;
  animation-duration: 0.35s;
  animation-iteration-count: 2;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-correct, .soft-nudge { animation: none !important; }
  .soft-nudge { outline: 3px solid #FFD166; outline-offset: 2px; }
}

/* ── Sol Alt: 3D Mor Hoparlör Butonu ── */
.btn-logic-speaker {
  position: absolute;
  bottom: 16px;
  left: 18px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 6px 20px rgba(91, 83, 214, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-logic-speaker:active {
  transform: scale(0.9);
}
.speaker-3d-svg {
  width: 44px;
  height: 44px;
}
.btn-logic-speaker.speaking {
  animation: speaker-bounce 0.55s infinite ease-in-out;
}
.btn-logic-speaker.speaking .wave-1 {
  animation: wave-pulse 0.7s infinite alternate ease-in-out;
}
.btn-logic-speaker.speaking .wave-2 {
  animation: wave-pulse 0.7s 0.2s infinite alternate ease-in-out;
}

@keyframes speaker-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12) rotate(-5deg); }
}
@keyframes wave-pulse {
  0% { opacity: 0.2; transform: translateX(-2px); }
  100% { opacity: 1; transform: translateX(3px); }
}

/* ════════════════════════════════════════════════════════════════
   1. SAHNE: MUTFAK MASASI & KARAKTERLER
════════════════════════════════════════════════════════════════ */
.scene-kitchen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.kitchen-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.kitchen-characters {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.kitchen-character {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12));
}
@media (hover: hover) {
  .kitchen-character:hover {
    transform: translate(-50%, -55%) scale(1.1);
  }
}
.kitchen-character:active {
  transform: translate(-50%, -46%) scale(0.94);
}
.fruit-svg {
  width: clamp(80px, 16vw, 118px);
  height: clamp(100px, 20vw, 142px);
  display: block;
}
.celebrate-jump {
  animation: char-jump 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
.wobble-wrong {
  animation: char-wobble 0.45s ease forwards !important;
}
/* B49 — konumlanmış öğeler (translate ile ortalananlar) için merkez koruyan
   varyant: char-jump/char-wobble translate(-50%,-50%) varsayar; bu öğelerde
   transform farklı olduğundan öğe yerinden kayardı. */
@keyframes char-jump-plain {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22) translateY(-8%); }
  75%  { transform: scale(0.96) translateY(2%); }
  100% { transform: scale(1.1); }
}
.celebrate-jump-centered {
  animation: char-jump-plain 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes char-jump {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -85%) scale(1.22); }
  75% { transform: translate(-50%, -45%) scale(0.96); }
  100% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes char-wobble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-58%, -50%) rotate(-8deg); }
  75% { transform: translate(-42%, -50%) rotate(8deg); }
}

/* ════════════════════════════════════════════════════════════════
   2. SAHNE: İZOMETRİK 3D LEGO KULESİ
════════════════════════════════════════════════════════════════ */
.scene-lego {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.parquet-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lego-tower-container {
  width: clamp(260px, 50vw, 360px);
  height: clamp(220px, 45vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  margin-bottom: 50px;
}
.lego-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.16));
}
.lego-wood-tray {
  position: absolute;
  bottom: 20px;
  background: #C48756;
  border-radius: 28px;
  padding: 8px 24px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 14px;
  z-index: 20;
  border: 3.5px solid #A86E3E;
}
.lego-num-btn {
  width: clamp(54px, 12vw, 68px);
  height: clamp(48px, 11vw, 60px);
  background: #FFFFFF;
  border-radius: 18px;
  border: none;
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 900;
  color: #2D3748;
  box-shadow: 0 6px 0 #D4D4D8, 0 8px 14px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.lego-num-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #D4D4D8;
}
.lego-num-btn.correct {
  background: #E8FFF5 !important;
  color: #0A7D55 !important; /* ZOR-003: #06D6A0 yazı açık zeminde ~1.8:1 idi */
  box-shadow: 0 6px 0 #06D6A0 !important;
}
.lego-num-btn.wrong {
  background: #FFF0F3 !important;
  color: #EF476F !important;
  box-shadow: 0 6px 0 #EF476F !important;
  animation: wrong-shake 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   3. SAHNE: İZOMETRİK 2x2 RENKLİ DOLAP
════════════════════════════════════════════════════════════════ */
.scene-cubby {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cubby-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.drawer-clickable { cursor: pointer; }
.drawer-clickable:hover .slot-dash {
  opacity: 1;
  stroke-width: 5;
}
.drawer-shake {
  animation: svg-shake 0.45s ease !important;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes svg-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.monkey-float {
  animation: svg-float 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes svg-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Maymun sürükleme tutamacı ── */
#cubby-monkey-g { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: grab; }
#cubby-monkey-g.lifted { transition: none; }
#cubby-monkey-g.lifted .monkey-float { animation: none; }
.monkey-drag-handle {
  position: absolute;
  z-index: 40;
  cursor: grab;
  touch-action: none;
}
.monkey-drag-handle.dragging { cursor: grabbing; }
.pop-in-monkey {
  animation: pop-in-cubic 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pop-in-cubic {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   4. SAHNE: ORMAN GÖLGE BULMA
════════════════════════════════════════════════════════════════ */
.scene-jungle {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 42px 20px 22px;
}
.jungle-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jungle-svg {
  width: 100%;
  height: 100%;
}
.center-monkey-wrap {
  width: clamp(130px, 24vw, 185px);
  height: clamp(145px, 26vw, 195px);
  z-index: 10;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18));
}
.monkey-standing-svg {
  width: 100%;
  height: 100%;
}
/* AI-PNG gölge poz görselleri (GameArt köprüsü): silüet = tamamen karart */
.shadow-animal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.shadow-animal-img.silhouette {
  filter: brightness(0) saturate(0);
}
.shadow-cards-row {
  display: flex;
  gap: clamp(12px, 3vw, 24px);
  z-index: 20;
}
.shadow-card-btn {
  width: clamp(75px, 16vw, 105px);
  height: clamp(75px, 16vw, 105px);
  background: #FFFFFF;
  border: 4px solid #38B000;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 0 #2B8A00, 0 12px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
  padding: 8px;
}
.shadow-card-btn:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #2B8A00;
}
.shadow-card-btn.correct {
  background: #E8FFF5 !important;
  border-color: #06D6A0 !important;
  box-shadow: 0 8px 0 #04A67B !important;
}
.shadow-card-btn.wrong {
  background: #FFF0F3 !important;
  border-color: #EF476F !important;
  box-shadow: 0 8px 0 #C92A2A !important;
  animation: wrong-shake 0.4s ease;
}
/* B40 — gölge varyantları: su yansıması (dikey ters görüntü) ve eğik gölge */
.shadow-animal-img.reflection, .monkey-standing-svg.reflection {
  transform: scaleY(-1);
}
.shadow-animal-img.tilted, .monkey-standing-svg.tilted {
  transform: rotate(-14deg);
}
.mode-reflection .shadow-card-btn {
  position: relative;
  background: linear-gradient(180deg, #E1F2FF 0%, #F3FAFF 62%, #FFFFFF 100%);
  border-color: #74B9E7;
  box-shadow: 0 8px 0 #4E98CE, 0 12px 22px rgba(0, 0, 0, 0.15);
}
.mode-reflection .shadow-card-btn:active {
  box-shadow: 0 3px 0 #4E98CE;
}
.mode-reflection .shadow-card-btn::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 14%;
  right: 14%;
  height: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg,
    rgba(86, 156, 214, 0.55) 0 10px, rgba(86, 156, 214, 0) 10px 18px);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   5. SAHNE: VOXEL ÖRÜNTÜ
════════════════════════════════════════════════════════════════ */
.scene-voxel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 48px 20px 24px;
}
.voxel-terrain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.voxel-svg {
  width: 100%;
  height: 100%;
}
.voxel-sequence-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  z-index: 10;
  margin-top: 12px;
}
.voxel-animal-box {
  width: clamp(56px, 14vmin, 132px);
  height: clamp(56px, 14vmin, 132px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
}
.voxel-slot-placeholder {
  width: clamp(56px, 14vmin, 132px);
  height: clamp(56px, 14vmin, 132px);
  border: 3.5px dashed #2B8A00;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
}
.voxel-slot-placeholder .q-mark {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  color: #2B8A00;
  animation: float 2s infinite ease-in-out;
}
.voxel-cube-svg {
  width: 100%;
  height: 100%;
}
.voxel-options-row {
  display: flex;
  gap: 22px;
  z-index: 20;
}
.voxel-opt-card {
  width: clamp(72px, 15vmin, 140px);
  height: clamp(72px, 15vmin, 140px);
  background: rgba(0, 0, 0, 0.35);
  border: 4.5px solid #FFFFFF;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s, border-color 0.2s;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voxel-opt-card:active {
  transform: scale(0.9);
}
.voxel-opt-card.correct {
  border-color: #06D6A0 !important;
  background: rgba(6, 214, 160, 0.3) !important;
}
.voxel-opt-card.wrong {
  border-color: #EF476F !important;
  animation: wrong-shake 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   6. SAHNE: NEON ŞEKİLLER
════════════════════════════════════════════════════════════════ */
.scene-neon {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 55px 20px 30px;
}
.neon-brick-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.neon-center-display {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neon-halo-wrap {
  width: clamp(120px, 24vw, 170px);
  height: clamp(120px, 24vw, 170px);
  border-radius: 30px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: neon-glow 2s ease-in-out infinite;
}
@keyframes neon-glow {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.25); }
}
.neon-options-tray {
  display: flex;
  gap: clamp(14px, 3vw, 26px);
  z-index: 20;
}
.neon-btn-card {
  width: clamp(70px, 15vmin, 140px);
  height: clamp(70px, 15vmin, 140px);
  background: #2C2856;
  border: 3px solid #4A4480;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, border-color 0.2s;
}
.neon-btn-card:active { transform: scale(0.9); }
.neon-btn-card.correct {
  border-color: #06D6A0 !important;
  background: rgba(6, 214, 160, 0.25) !important;
}
/* B21 — AI neon PNG'leri: siyah zemin zemine karışsın, parlama korunsun */
.neon-shape-img {
  mix-blend-mode: screen;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.neon-btn-card.wrong {
  border-color: #EF476F !important;
  animation: wrong-shake 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   7. SAHNE: DONDURMA PAYLAŞIMI
════════════════════════════════════════════════════════════════ */
.scene-icecream {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 42px 20px 18px;
}
.icecream-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.girls-container {
  display: flex;
  gap: clamp(60px, 16vw, 150px);
  z-index: 10;
  align-items: flex-end;
}
.girl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.speech-balloon {
  position: relative;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 8px 18px;
  font-size: clamp(20px, 4.5vw, 28px);
  font-weight: 900;
  color: #2D3748;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  animation: float 2.6s ease-in-out infinite;
}
.speech-balloon::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #FFFFFF;
  border-bottom: 0;
}
.speech-balloon.target-balloon {
  color: #5B53D6;
  min-width: 52px;
  text-align: center;
}
.girl-avatar {
  width: clamp(80px, 15vw, 108px);
  height: auto;
}
.girl-svg { width: 100%; height: auto; display: block; }
.cone-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin-top: 4px;
}
.scoop {
  width: clamp(28px, 5.5vw, 38px);
  height: clamp(28px, 5.5vw, 38px);
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: -6px;
  z-index: 2;
}
.scoop:first-child { margin-top: 0; }
.waffle-cone {
  width: 0;
  height: 0;
  border-left: clamp(17px, 3.5vw, 24px) solid transparent;
  border-right: clamp(17px, 3.5vw, 24px) solid transparent;
  border-top: clamp(34px, 7vw, 48px) solid #E3A85C;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}
.icecream-tray {
  display: flex;
  gap: 16px;
  background: #B0793F;
  border: 3.5px solid #8F5E2C;
  border-radius: 24px;
  padding: 8px 18px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.ice-btn {
  width: clamp(50px, 11vw, 64px);
  height: clamp(46px, 10vw, 56px);
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 900;
  color: #2D3748;
  box-shadow: 0 5px 0 #D4D4D8;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.ice-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #D4D4D8;
}
.ice-btn.correct {
  background: #E8FFF5 !important;
  color: #0A7D55 !important;
  box-shadow: 0 5px 0 #06D6A0 !important;
}
.ice-btn.wrong {
  background: #FFF0F3 !important;
  color: #EF476F !important;
  box-shadow: 0 5px 0 #EF476F !important;
  animation: wrong-shake 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   8. SAHNE: CUPCAKE VE MASA
════════════════════════════════════════════════════════════════ */
.scene-cupcake {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cupcake-bg-svg,
.cupcake-plates-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cupcake-plates-svg { z-index: 10; }
.plate-group { transition: opacity 0.3s; }
.plate-group:hover { filter: brightness(1.06); }
.plate-correct { animation: plate-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: center; }
.plate-wrong   { animation: svg-shake 0.45s ease; transform-box: fill-box; transform-origin: center; }
@keyframes plate-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.cupcake-hero {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 19%;
  transform: translate(-50%, -50%);
  z-index: 20;
  transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
  pointer-events: none;
}
.cupcake-hero.pos-left   { left: 32%; }
.cupcake-hero.pos-center { left: 50%; }
.cupcake-hero.pos-right  { left: 68%; }
.cupcake-hero.go-left  { left: 29.5%; }
.cupcake-hero.go-right { left: 70.5%; }
.cupcake-svg {
  width: 100%;
  height: auto;
  display: block;
  animation: float 2.4s ease-in-out infinite;
}
.cupcake-hero.cupcake-happy .cupcake-svg { animation: cupcake-jump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cupcake-jump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════
   9. SAHNE: DÖRT DOST HAYVAN
════════════════════════════════════════════════════════════════ */
.scene-four-animals {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.room-floor-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.animals-standing-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 4vw, 44px);
  padding-bottom: clamp(30px, 7vw, 60px);
}
.standing-pet {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12));
}
@media (hover: hover) {
  .standing-pet:hover { transform: translateY(-8px) scale(1.06); }
}
.standing-pet:active { transform: scale(0.94); }
.pet-svg {
  width: clamp(85px, 17vw, 125px);
  height: auto;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   10. SAHNE: NESNE SAYMA (araba, balon, pizza)
════════════════════════════════════════════════════════════════ */
.scene-count {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 40px 20px 20px;
}
.count-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Nesneler sahne ortasında, türüne göre dikey konum */
.count-objects-row {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 28px);
  z-index: 10;
  max-width: 85%;
}
.type-car .count-objects-row { top: 62%; }
.type-balloon .count-objects-row { top: 40%; }

/* ════════════════════════════════════════════════════════════════
   B46 — KARŞILAŞTIRMA MODU (ikinci mekanik)
   İki grup yan yana; grupların kendisi seçenek. Sayma sorusunda sahne aynı,
   yalnız sunum değişir. Dokunma hedefi ≥48px (2-8 yaş ergonomisi).
════════════════════════════════════════════════════════════════ */
.count-compare, .lego-compare {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 92%;
  z-index: 10;
  /* İki grup YAN YANA — eksikken alt alta diziliyordu */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 32px);
}
.count-group, .lego-group {
  border-radius: 20px;
  padding: clamp(6px, 1.6vw, 14px);
  transition: transform .18s, background .18s, box-shadow .18s;
  /* Dar taban + esnek büyüme: iki grup ekrana sığar, eşit paylaşır */
  flex: 1 1 0;
  min-width: 0;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  min-height: 48px;
  overflow: hidden;
}
.count-group:active, .lego-group:active { transform: scale(.97); }
.count-group.correct, .lego-group.correct {
  background: rgba(6, 214, 160, .18);
  box-shadow: 0 0 0 4px #06D6A0 inset;
  animation: plate-pop .5s ease;
}
.count-group.wrong, .lego-group.wrong {
  background: rgba(239, 71, 111, .14);
  animation: svg-shake .45s ease;
}
/* Rozet: grubun kaç öğe içerdiğini SAYI olarak gösterir — sayma desteği.
   Sayma sorusunda bu rozet YOKTUR (cevabı ele verirdi). */
.count-group-badge, .lego-group-badge {
  font-size: clamp(18px, 4.5vw, 30px);
  font-weight: 800;
  color: #fff;
  background: rgba(45, 45, 45, .55);
  border-radius: 999px;
  padding: 2px 16px;
  min-width: 48px;
  text-align: center;
}
/* Karşılaştırma modunda içerik satırı mutlak konumunu kaybeder (grup içinde akar) */
.count-group .count-objects-row {
  position: static;
  transform: none;
  max-width: 100%;
  gap: clamp(4px, 1.6vw, 14px);
}
.count-group .count-object {
  width: clamp(30px, 8vw, 62px);
  height: clamp(30px, 8vw, 62px);
  /* PNG <img> yüklenmezse de yer tutsun: height:auto 0x0'a düşürüyordu */
  flex: 0 0 auto;
  /* ⚠️ Giriş animasyonu IPTAL: sayma sahnesindeki `pop-in-cubic ... backwards`
     animasyonu, gecikmeli (animation-delay) kartlarda başlangıç karesinde
     (opacity:0 + scale(0)) takılı kalıyordu — nesneler hiç görünmüyordu.
     Karşılaştırma gruplarında grup zaten kendi geçişini yapar. */
  animation: none;
  opacity: 1;
  transform: none;
}
.count-group .count-object > img,
.count-group .count-object > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lego-group .lego-tower-container {
  position: static;
  transform: none;
  /* İki kule yan yana sığsın: kule ölçeği grup genişliğine bağlanır */
  width: 100%;
  max-width: clamp(90px, 26vw, 170px);
  height: auto;
}
.lego-group .lego-tower-container svg { width: 100%; height: auto; display: block; }
.count-pizza-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: clamp(190px, 36vw, 260px);
  height: clamp(190px, 36vw, 260px);
  z-index: 10;
}
.count-object {
  width: clamp(64px, 13vw, 100px);
  height: auto;
  animation: pop-in-cubic 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.count-object-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
}
.pizza-big-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}
.count-tray {
  display: flex;
  gap: 16px;
  background: #B0793F;
  border: 3.5px solid #8F5E2C;
  border-radius: 24px;
  padding: 8px 18px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.count-num-btn {
  width: clamp(50px, 11vw, 64px);
  height: clamp(46px, 10vw, 56px);
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 900;
  color: #2D3748;
  box-shadow: 0 5px 0 #D4D4D8;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.count-num-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #D4D4D8;
}
.count-num-btn.correct {
  background: #E8FFF5 !important;
  color: #0A7D55 !important;
  box-shadow: 0 5px 0 #06D6A0 !important;
}
.count-num-btn.wrong {
  background: #FFF0F3 !important;
  color: #EF476F !important;
  box-shadow: 0 5px 0 #EF476F !important;
  animation: wrong-shake 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   ORTAK
════════════════════════════════════════════════════════════════ */
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-9px) rotate(1.5deg); }
}

/* Küçük ekranlarda noktaları talimatın üstüne taşı */
@media (max-width: 700px) {
  .logic-instruction-pill { top: 12px; max-width: 60%; font-size: 12px; padding: 7px 18px; }
  .logic-progress-dots { top: 56px; gap: 7px; }
  .logic-dot { width: 11px; height: 11px; }
}

/* ORTA-003 — telefon (≤480px): tablet çerçevesi incelir, kontrol butonları küçülür
   ama dokunma hedefi 48px altına inmez (2-8 yaş ergonomisi, WCAG 2.5.5) */
@media (max-width: 480px) {
  .logiclike-tablet { box-shadow: 0 10px 28px rgba(32, 64, 100, 0.15), 0 0 0 5px rgba(255, 255, 255, 0.7); }
  .btn-logic-close { width: 48px; height: 48px; }
  .btn-logic-speaker { width: 48px; height: 48px; }
  /* talimat pill'ı büyüyen kapatma butonuyla çakışmasın (360px'te sol kenar) */
  .logic-instruction-pill { max-width: 62%; font-size: 11.5px; padding: 6px 14px; }
  .kitchen-character { min-width: 52px; }
  .lego-num-btn  { width: clamp(48px, 14vw, 60px); height: clamp(44px, 13vw, 54px); }
  .count-num-btn { width: clamp(44px, 13vw, 56px); height: clamp(44px, 12vw, 52px); }
}

/* ══════════════════════════════════════════════════════════════
   1.2.5 — ETKİLEŞİM ANİMASYONLARI (hover / active / doğru cevap parlaması)
   glm-emir-listesi SORUN 1.2 Adım 1.2.5
   ⚠️ [data-is-correct] JENERİK SEÇİCİ KULLANMA:
   • .kitchen-character konumunu translate(-50%,-50%) ile alır — jenerik
     transform onu ezmış, dokununca karakter yeri değiştiriyordu.
   • SVG <g> öğelerinde (find-target, drawer, plate-group) CSS transform
     SVG orijinine göre ölçekler → öğe sahne dışına fırlıyordu.
   Bu yüzden hover/active yalnızca transform-konumlu OLMAYAN buton
   sınıflarına uygulanır.
═══════════════════════════════════════════════════════════════ */
.lego-num-btn, .count-num-btn, .voxel-opt-card, .neon-btn-card {
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.lego-num-btn:hover, .count-num-btn:hover, .voxel-opt-card:hover, .neon-btn-card:hover {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.1);
}
.lego-num-btn:active, .count-num-btn:active, .voxel-opt-card:active, .neon-btn-card:active {
  transform: scale(0.95);
}

/* Doğru cevap parlama efekti */
@keyframes correctGlow {
  0%   { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.6); }
  50%  { box-shadow: 0 0 20px 10px rgba(46, 213, 115, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}
.answer-correct { animation: correctGlow 0.8s ease; }

/* Gölge silüetlerine hafif parlama (1.2.2 — koyu mor-lacivert silüet kenarı) */
.shadow-card-btn svg, .shadow-card-btn img {
  filter: drop-shadow(0 0 5px rgba(122, 111, 224, 0.45));
}

/* Dokunma ergonomisi: oyun içi seçenekler ≥48px */
.voxel-opt-card, .neon-btn-card, .shadow-card-btn { min-height: 48px; }

/* B26 — karışık sepet: emoji ürünler */
.count-emoji {
  font-size: clamp(38px, 8vw, 64px);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.count-mixed-row { flex-wrap: wrap; justify-content: center; max-width: 92%; }