/* ============================================================
   بوابة الإتقان الرياضي - الهوية البصرية
   ============================================================ */

:root {
  --sky: #38bdf8;
  --mint: #34d399;
  --orange: #fb923c;
  --purple: #a78bfa;
  --pink: #f472b6;
  --deep: #1e3a8a;
  --cream: #fff7ed;
}

* { font-family: 'Tajawal', 'Cairo', sans-serif; }

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 50%, #fef3c7 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* شريط علوي */
.brand-gradient {
  background: linear-gradient(120deg, #0ea5e9, #10b981, #8b5cf6);
  background-size: 200% 200%;
  animation: shift 8s ease infinite;
}
@keyframes shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* بطاقات الأقسام */
.section-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.section-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25);
}

/* خريطة الرحلة */
.journey-step {
  transition: transform 0.3s;
}
.journey-step:hover { transform: scale(1.15); }

.journey-line {
  background: repeating-linear-gradient(90deg, #fbbf24 0 12px, transparent 12px 24px);
  height: 4px;
}

/* أزرار */
.btn-pop {
  transition: all 0.2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.btn-pop:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.btn-pop:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

/* نجوم متحركة للخلفية */
.floating { animation: floaty 3s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* شارات */
.medal { animation: pulse-slow 2.5s infinite; }
@keyframes pulse-slow {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* شريط تقدم */
.progress-bar {
  transition: width 0.8s ease;
}

/* نافذة منبثقة */
.modal-backdrop {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(4px);
}
.modal-content { animation: popin 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popin {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* اهتزاز عند الخطأ */
.shake { animation: shake 0.4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* احتفال */
.celebrate { animation: celebrate 0.6s; }
@keyframes celebrate {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.2) rotate(-5deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* بطاقات اللعب */
.game-tile {
  transition: all 0.25s;
  cursor: pointer;
}
.game-tile:hover { transform: translateY(-6px) rotate(-1deg); }

/* شريط تمرير مخصص */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* حالة المهارة */
.skill-mastered { border-right: 6px solid #22c55e; }
.skill-learning { border-right: 6px solid #eab308; }
.skill-missing  { border-right: 6px solid #ef4444; }

/* رقم كبير */
.big-num {
  font-weight: 900;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

/* تأثير الدرع الوطني */
.saudi-badge {
  background: linear-gradient(135deg, #006c35, #00844a);
}

/* واقع معزز - كاميرا وهمية */
.ar-scene {
  background: radial-gradient(circle at center, #1e293b, #0f172a);
}

.confetti {
  position: fixed;
  width: 10px; height: 10px;
  pointer-events: none;
  z-index: 9999;
}