/* ============================================================
   responsive.css - أنماط الاستجابة للشاشات المختلفة
   ============================================================ */

/* ============================================================
   شاشات الجوال (أصغر من 768px)
   ============================================================ */
@media (max-width: 767px) {

  /* إخفاء الشريط الجانبي على الجوال */
  .game-sidebar { display: none; }

  /* صفحة اللعب كاملة العرض */
  .game-layout {
    padding: 10px;
    gap: 10px;
  }

  .game-main {
    gap: 10px;
    width: 100%;
  }

  /* اختيار الوضع صغير على الجوال */
  .mode-btn {
    padding: 8px 5px;
  }

  .mode-best { display: none; } /* إخفاء "أعلى نتيجة" من زر الوضع على الجوال لتوفير المساحة */

  /* لوحة النقاط */
  .score-card { padding: 8px 6px; }
  .score-value { font-size: 1.2rem; }
  .score-label { font-size: .65rem; }

  /* إخفاء شريط XP على الجوال إذا كانت الشاشة ضيقة جداً */
  .level-bar-wrap .level-title { display: none; }

  /* أزرار التحكم المرئية - إظهارها دائماً على الجوال */
  .mobile-controls { display: flex; }

  /* أزرار الإجراءات */
  .game-actions {
    gap: 8px;
  }

  .game-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* إعلان الرأس صغير على الجوال */
  .ad-header .ad-inner { padding: 8px; }
  .ad-header .ad-icon  { font-size: 1rem; }
  .ad-header .ad-label { font-size: .75rem; }
  .ad-header .ad-sub   { display: none; }

  /* قسم XP في الملف الشخصي */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* الجداول صغيرة */
  .scores-table { font-size: .82rem; }
  .scores-table th, .scores-table td { padding: 8px 8px; }

  /* بطاقة المستخدم */
  .profile-card { flex-direction: column; text-align: center; }

  /* الصفحة الرئيسية */
  .hero { padding: 30px 16px 24px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-card { padding: 16px 12px; }
  .feature-icon { font-size: 1.8rem; }

  .steps { grid-template-columns: 1fr; gap: 10px; }

  /* خلفية المودال */
  .modal-box { padding: 24px 18px; }
}

/* ============================================================
   شاشات جداً صغيرة (أصغر من 360px)
   ============================================================ */
@media (max-width: 360px) {
  .game-actions .btn { font-size: 12px; padding: 8px 10px; }
  .score-value { font-size: 1.1rem; }
  .ctrl-btn { width: 48px; height: 48px; font-size: 1.2rem; }
  .features-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   شاشات الكمبيوتر (768px وأكبر)
   ============================================================ */
@media (min-width: 768px) {

  /* إخفاء أزرار التحكم المرئية على الكمبيوتر */
  .mobile-controls { display: none !important; }

  /* إظهار الشريط الجانبي */
  .game-sidebar { display: flex; }

  /* حجم اللوحة أكبر */
  #game-board {
    max-width: 420px;
  }

  /* الإعلان الجانبي يشغل المساحة */
  .ad-sidebar .ad-inner {
    min-height: 200px;
  }

  /* توسيع الجدول */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   شاشات كبيرة جداً (1200px+)
   ============================================================ */
@media (min-width: 1200px) {
  .game-sidebar { width: 240px; }
}

/* ============================================================
   أنماط الطباعة (Landscape على الجوال)
   ============================================================ */
@media (max-height: 600px) and (orientation: landscape) {
  .game-header { padding: 6px 12px; }
  .game-title-logo { font-size: 1.2rem; }
  .game-layout { padding: 6px 10px; }
  .score-panel { max-width: 320px; }

  /* اللوحة بحجم أصغر قليلاً */
  #game-board { max-width: 260px !important; }
}