/* ============================================================================
   ui-theme.css — نظام التصميم «أعماق المغارة» v2.0 (إعادة تصميم 2026-08-29)
   ----------------------------------------------------------------------------
   «إعدادات العرض» المركزية لكل قوائم وواجهات فارس المغارة. كل الشاشات
   (القائمة/المتجر/الصدارة/الإيقاف/الإعدادات/النهاية/القصة/الترقيات/الإنجازات/
   المعسكر) تقرأ ألوانها وأحجامها من هنا — عدّل رقماً واحداً فيتغير في كل مكان.

   الهوية: كهفٌ عربيّ فخم — أعماق بنفسجية داكنة، ذهبٌ متوهج للاختيار والقيمة،
   سماوي سحري للمعلومات، وجمرٌ ناري لأزرار الفعل الرئيسية.

   ⚠️ لا تغيّر أسماء --hud-band-top / --hud-band-bottom: main.js يقرؤهما
   لحساب حزام الساحة حول الـHUD.
   ============================================================================ */
:root {
  /* ── القاعدة الداكنة (أعماق الكهف) ── */
  --c-bg: #070310;              /* خلفية اللعبة — أحلك درجة */
  --c-panel: #170e2a;           /* خلفية اللوحات المسطحة */
  --c-panel2: #251739;          /* خلفية البطاقات/الرقاقات */
  --c-line: #443064;            /* حدود اللوحات */
  --c-line2: #2b1e46;           /* حدود خافتة/فواصل */
  --c-ink: #f5f1fc;             /* النص الأساسي */
  --c-mut: #a495c7;             /* نص ثانوي */

  /* ── ألوان الهوية ── */
  --c-gold: #ffcf5c;            /* الذهب: الاختيار، القيمة، الأساطير */
  --c-gold-deep: #e8a53a;       /* ذهب أعمق للتدرجات */
  --c-amber: #ffb54d;           /* العناوين */
  --c-ember: #ff7a1f;           /* الجمر: أزرار الفعل الرئيسية */
  --c-cyan: #59e8ff;            /* السحر السماوي: معلومات، تركيز */
  --c-cyan-soft: #7fdcff;       /* سماوي هادئ: تسميات الأقسام */
  --c-green: #3ef26e;           /* الذهب/الموارد داخل الجولة */
  --c-red: #ff5e6c;             /* خطر / Tier 4 */
  --c-purple: #b36bff;          /* Tier 3 */
  --c-blue: #4da6ff;            /* Tier 2 */
  --c-steel: #9aa2ad;           /* Tier 1 */

  /* ── تدرجات جاهزة ── */
  --grad-ember: linear-gradient(180deg, #ffb347 0%, #ff8a2a 42%, #f2600f 100%);
  --grad-slate: linear-gradient(180deg, #4c3a70 0%, #332355 55%, #281a45 100%);
  --grad-panel: radial-gradient(120% 55% at 50% 0%, rgba(89,232,255,.05), transparent 55%),
                linear-gradient(168deg, #1d1134 0%, #150b26 55%, #190e2c 100%);
  --grad-chip: linear-gradient(180deg, #2c2046, #221739);
  --grad-card: linear-gradient(170deg, #2b1d47 0%, #201434 60%, #251639 100%);

  /* ── توهجات وظلال ── */
  --glow-gold: 0 0 16px rgba(255, 207, 92, .32);
  --glow-cyan: 0 0 14px rgba(89, 232, 255, .30);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-btn: 0 4px 0 #8f3208, 0 10px 22px rgba(0, 0, 0, .5);
  --shadow-btn-alt: 0 4px 0 #171128, 0 10px 22px rgba(0, 0, 0, .5);

  /* ── الخطوط (أحجام) ── */
  --fs-title: clamp(30px, 6vmin, 42px);     /* عنوان الشاشة الكبير */
  --fs-h2: clamp(22px, 4vmin, 30px);        /* عناوين اللوحات */
  --fs-body: 14px;                           /* نص عام */
  --fs-small: 12.5px;                        /* نص ثانوي */
  --fs-tiny: 11px;                           /* تسميات دقيقة */
  --fs-btn: 18px;                            /* أزرار رئيسية */
  --fs-btn-small: 14px;                      /* أزرار صغيرة */

  /* ── الأبعاد والمسافات ── */
  --pad-panel: clamp(12px, 2.2vmin, 22px);  /* حشوة اللوحات */
  --gap: 8px;                                /* فجوة عامة */
  --gap-s: 5px;                              /* فجوة مضغوطة */
  --radius: 18px;                            /* تدوير اللوحات */
  --radius-s: 11px;                          /* تدوير العناصر الصغيرة */
  --radius-btn: 14px;                        /* تدوير الأزرار */
  --panel-w: 640px;                          /* عرض اللوحات القياسي */
  --panel-w-wide: 860px;                     /* اللوحات العريضة (متجر على حاسوب) */
  --slot: 56px;                              /* خانة سلاح/غرض */
  --tap: 44px;                               /* الحد الأدنى لعنصر لمس */

  /* ── جدول الصدارة ── */
  --board-fs: 13.5px;                        /* خط صفوف الجدول */
  --board-pad: 6px 8px;                      /* حشوة الخلايا */

  /* ── حزام الـHUD حول الساحة: main.js يقرأ هذين — الأسماء والقيم محفوظة ── */
  --hud-band-top: 96px;                      /* شريط علوي: صحة/موجة/إيقاف */
  --hud-band-bottom: 78px;                   /* شريط سفلي: زر السوبر */
}

/* ── الجوال الضيق: نصوص وأزرار أضغط (تبقى ≥ لمس مريح) ── */
@media (max-width: 760px) {
  :root {
    --fs-body: 12.5px;
    --fs-small: 11.5px;
    --fs-tiny: 10px;
    --fs-btn: 16px;
    --fs-btn-small: 12.5px;
    --pad-panel: 10px;
    --gap: 6px;
    --radius: 14px;
    --radius-btn: 12px;
    --slot: 46px;
    --board-fs: 12px;
    --board-pad: 4px 6px;
  }
}

/* ── شاشات قصيرة جداً (جوال بالعرض): حزام أنحف كي لا يأكل الساحة ── */
@media (max-height: 520px) {
  :root {
    --hud-band-top: 58px;
    --hud-band-bottom: 52px;
  }
}