/* أنماط مخصصة للتصميم الكرتوني المبهج للأطفال */

:root {
  --color-yellow: #FFD166;
  --color-blue: #4D96FF;
  --color-green: #6BCB77;
  --color-pink: #FF6B6B;
  --color-cream: #FFFDF0;
}

body {
  background-color: var(--color-cream);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* غيوم متحركة ناعمة في الخلفية */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.02));
}

.cloud::after,
.cloud::before {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud-1 {
  width: 140px;
  height: 45px;
  top: 15%;
  right: -50px;
  animation: floatCloud1 35s linear infinite;
}
.cloud-1::after { width: 50px; height: 50px; top: -25px; left: 25px; }
.cloud-1::before { width: 40px; height: 40px; top: -15px; left: 70px; }

.cloud-2 {
  width: 180px;
  height: 55px;
  top: 45%;
  right: -100px;
  animation: floatCloud2 45s linear infinite 5s;
}
.cloud-2::after { width: 65px; height: 65px; top: -35px; left: 35px; }
.cloud-2::before { width: 50px; height: 50px; top: -20px; left: 95px; }

.cloud-3 {
  width: 110px;
  height: 38px;
  top: 75%;
  right: -60px;
  animation: floatCloud1 40s linear infinite 12s;
}
.cloud-3::after { width: 40px; height: 40px; top: -20px; left: 20px; }
.cloud-3::before { width: 30px; height: 30px; top: -12px; left: 55px; }

@keyframes floatCloud1 {
  0% { transform: translateX(100px); }
  100% { transform: translateX(-110vw); }
}

@keyframes floatCloud2 {
  0% { transform: translateX(120px); }
  100% { transform: translateX(-120vw); }
}

/* بالونات تسبح ببطء في الخلفية */
.floating-balloon {
  position: absolute;
  font-size: 28px;
  opacity: 0.25;
  animation: floatUpSlow 18s ease-in-out infinite alternate;
}
.balloon-bg-1 { bottom: 10%; left: 8%; animation-delay: 0s; }
.balloon-bg-2 { bottom: 25%; right: 10%; animation-delay: 4s; }

@keyframes floatUpSlow {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-70px) rotate(8deg); }
}

/* كتل الحروف الخشبية الملونة (Wooden Toy Blocks) */
.letter-block {
  border-radius: 1.25rem;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), 0 10px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  user-select: none;
}
.letter-block:hover {
  transform: translateY(-4px) scale(1.02);
}
.letter-block:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* بالونات لعبة الفرقعة */
.balloon-item {
  position: absolute;
  user-select: none;
  cursor: pointer;
  transition: transform 0.1s ease;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.12));
}
.balloon-item:active {
  transform: scale(0.9);
}

/* نقاط الإرشاد في لعبة التتبع */
.trace-point {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: white;
  background: #3B82F6;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
  z-index: 15;
  transition: all 0.2s ease;
}
.trace-point.active {
  background: #10B981;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.8);
  transform: scale(1.25);
  animation: pulsePoint 1s infinite alternate;
}
.trace-point.completed {
  background: #F59E0B;
  box-shadow: none;
  transform: scale(0.85);
  opacity: 0.6;
}

@keyframes pulsePoint {
  0% { transform: scale(1.1); }
  100% { transform: scale(1.35); }
}

/* حركة تذبذب الهدهد عند التحدث */
.mascot-speaking {
  animation: mascotTalk 0.4s ease-in-out infinite alternate;
}
@keyframes mascotTalk {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(3deg); }
}

/* حركة التهنئة وظهور العناصر */
@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-fade-in {
  animation: fadeInScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* بطاقات المطابقة */
.match-card {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}
.match-card:hover {
  transform: translateY(-3px);
}
.match-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}