/* core-bundle.css — دمج ميكانيكيّ لثمانية ملفّات، بنفس ترتيب الـcascade الأصلي حرفياً.
   المصدر يبقى كل ملفّ على حدة تحت public/styles/ (لم يُحذَف، مستخدَم في maintenance.html/offline.html
   بمجموعة فرعية مختلفة) — لتحديث أيّ قسم عدّل ملفّه الأصليّ ثم أعد توليد هذا الملفّ بنفس السكربت.
   وُلِّد: 2026-07-30 — SEO/perf audit (تقليل 8 طلبات CSS حاجبة إلى طلب واحد). */

/* ───── fonts.css ───── */
/* ═══════════════════════════════════════════
   fonts.css — Local Fonts (Tajawal + Geist)
   محلّي — لا اعتماد على Google Fonts
   يُحمَّل أوّلاً لضمان توفّر الخطوط قبل CSS
   ═══════════════════════════════════════════ */

/* ── Tajawal — Arabic subset ───────────────────── */

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/tajawal-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ── Tajawal — Latin subset ────────────────────── */

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/tajawal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Geist — Variable Weight (Latin + Latin-Ext) ── */
/* ملفّ واحد يغطّي كل الأوزان (variable font)       */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───── tokens.css ───── */
/* ═══════════════════════════════════════════
   tokens.css — Design Tokens (CSS Variables)
   المصدر: DESIGN_REFERENCE.html — لا تعدّل يدوياً
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── خلفيات (وضع داكن — الافتراضي في CSS) ── */
  --bg-base:     #050810;
  --bg-0:        #07101f;
  --bg-1:        #0b1628;
  --bg-2:        #0f1d33;
  --bg-3:        #142640;
  --bg-raised:   rgba(11, 22, 40, 0.6);
  --bg-raised-2: rgba(15, 29, 51, 0.7);

  /* ── خطوط ── */
  --line-1:      rgba(148, 184, 230, 0.06);
  --line-2:      rgba(148, 184, 230, 0.12);
  --line-3:      rgba(148, 184, 230, 0.22);
  --line-accent: rgba(56, 189, 248, 0.3);

  /* ── نصوص ── */
  --text-0: #f3f7fc;
  --text-1: #d9e5f3;
  --text-2: #9fb5cf;
  --text-3: #6a8099;
  --text-4: #3e5673;

  /* ── لون مميز ── */
  --accent:    #38bdf8;
  --accent-2:  #3b82f6;
  --accent-bg:   rgba(56, 189, 248, 0.08);
  --accent-bg-2: rgba(56, 189, 248, 0.16);

  /* ── حالات ── */
  --danger:     #ef4444;
  --danger-bg:  rgba(239, 68, 68, 0.10);
  --success:    #10b981;
  --success-bg: rgba(16, 185, 129, 0.10);
  --warning:    #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.10);

  /* ── الشعار — ثابت في كلا الوضعين ── */
  --logo-bg: #0a1628;

  /* ── خطوط ── */
  --font-mono:  'Tajawal', 'Geist', system-ui, sans-serif;
  --font-sans:  'Geist', 'Tajawal', system-ui, sans-serif;
  --font-ar:    'Tajawal', 'Geist', system-ui, sans-serif;
  --font-serif: 'Tajawal', 'Geist', system-ui, sans-serif;

  /* ── spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── radii ── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 100px;

  /* ── transitions ── */
  --t-fast:   0.15s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.3s ease;

  /* ── layout ── */
  --container-max: 1280px;
  --container-px:  40px;

  /* ── surfaces (cards, panels, inputs) ── */
  --surface-1: var(--bg-1);   /* بطاقات مرتفعة عن الصفحة */
  --surface-2: var(--bg-2);   /* طبقة ثانية داخل السطح */

  /* ── aliases: background ── */
  --bg-primary:   var(--bg-0);
  --bg-secondary: var(--bg-1);
  --bg-tertiary:  var(--bg-2);
  --bg-card:      var(--bg-1);

  /* ── aliases: text ── */
  --text-primary:   var(--text-0);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);

  /* ── aliases: color ── */
  --blue-primary: var(--accent-2);
  --blue-accent:  var(--accent);

  /* ── aliases: border ── */
  --border:         var(--line-2);
  --border-primary: var(--line-2);
  --border-secondary: var(--line-1);

  /* ── aliases: spacing ── */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-7: 28px;
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);

  /* ── aliases: radius ── */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-full);

  /* ── aliases: transitions ── */
  --transition-quick:    var(--t-fast);
  --transition-standard: var(--t-base);
  --transition-slow:     var(--t-slow);

  /* ── aliases: fonts ── */
  --font-primary: var(--font-ar);
  --font-display: var(--font-serif);

  /* ── typography scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
}

/* ─── الوضع الفاتح (light) ─── */
[data-theme="light"] {
  --bg-base:     #fafbfd;
  --bg-0:        #ffffff;
  --bg-1:        #f4f7fb;
  --bg-2:        #edf2f9;
  --bg-3:        #e4ecf5;
  --bg-raised:   rgba(255, 255, 255, 0.7);
  --bg-raised-2: rgba(244, 247, 251, 0.8);

  --line-1:      rgba(11, 22, 40, 0.05);
  --line-2:      rgba(11, 22, 40, 0.1);
  --line-3:      rgba(11, 22, 40, 0.18);
  --line-accent: rgba(37, 99, 235, 0.25);

  --text-0: #05111f;
  --text-1: #0f2545;
  --text-2: #3d5a80;
  --text-3: #526e8f;   /* was #6b85a6 (3.80:1 ❌AA) → 5.27:1 ✅AA */
  --text-4: #a3b7ce;   /* placeholder only — WCAG exempt */

  --accent:    #016aab;   /* was #0284c7 (4.10:1 ❌AA) → 5.75:1 ✅AA */
  --accent-2:  #2563eb;
  --accent-bg:   rgba(37, 99, 235, 0.05);
  --accent-bg-2: rgba(37, 99, 235, 0.11);

  /* ── حالات (light overrides) ── */
  --danger:     #dc2626;   /* 4.83:1 ✅AA */
  --danger-bg:  rgba(220, 38, 38, 0.08);
  --success:    #047857;   /* was #059669 (3.77:1 ❌AA) → 5.48:1 ✅AA */
  --success-bg: rgba(4, 120, 87, 0.08);
  --warning:    #b45309;   /* was #d97706 (3.19:1 ❌AA) → 5.02:1 ✅AA */
  --warning-bg: rgba(180, 83, 9, 0.08);

  /* --logo-bg لا يتغير — دائماً #0a1628 */

  /* ── surfaces — override للوضع الفاتح ── */
  --surface-1: #ffffff;          /* بطاقات بيضاء نظيفة في الوضع الفاتح */
  --surface-2: var(--bg-1);      /* = #f4f7fb في الوضع الفاتح */
}

/* ─── Language Toggle System ─── */
/* Arabic default: hide ALL English elements unconditionally */
.en-text  { display: none !important; }
.en-block { display: none !important; }
.en       { display: none !important; }

/* Arabic mode: show Arabic — respect natural display type for block elements */
.ar-text  { display: inline !important; }
.ar-block { display: block !important; }

/* Block-level elements with ar-text should render as block not inline */
p.ar-text, div.ar-text, li.ar-text, ul.ar-text, ol.ar-text,
h1.ar-text, h2.ar-text, h3.ar-text, h4.ar-text, h5.ar-text, h6.ar-text,
section.ar-text, article.ar-text, header.ar-text, footer.ar-text { display: block !important; }

/* English mode overrides — must come after the defaults */
[data-lang="en"] .ar-text  { display: none !important; }
[data-lang="en"] .ar-block { display: none !important; }
[data-lang="en"] .en-text  { display: inline !important; }
[data-lang="en"] .en-block { display: block !important; }
[data-lang="en"] .en       { display: inline !important; }
/* English block-level elements restore block display */
[data-lang="en"] p.en-text, [data-lang="en"] div.en-text,
[data-lang="en"] li.en-text, [data-lang="en"] ul.en-text, [data-lang="en"] ol.en-text,
[data-lang="en"] h1.en-text, [data-lang="en"] h2.en-text, [data-lang="en"] h3.en-text,
[data-lang="en"] h4.en-text, [data-lang="en"] h5.en-text, [data-lang="en"] h6.en-text { display: block !important; }
[data-lang="en"] [class*="ar-only"] { display: none !important; }

/* Direction & font switch in English mode */
[data-lang="en"] { direction: ltr; }
[data-lang="en"] body { font-family: var(--font-sans); }

/* Lang toggle button in navbar */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--line-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
  min-width: 38px;
  text-align: center;
}
.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* backwards compat handled above */

/* ── Universal a11y (tokens.css is loaded by ALL pages — static + worker) ──
   Static pages don't load mobile-first.css, so focus-visible + reduced-motion
   live here to guarantee coverage everywhere (CLAUDE §6.7). ── */
*:focus-visible {
  outline: 3px solid var(--accent, #38bdf8);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── base.css ───── */
/* ═══════════════════════════════════════════
   base.css — Reset + Typography + Layout Base
   ═══════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ar);
  background: var(--bg-base);
  color: var(--text-1);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-weight: 400;
  transition: background var(--t-slow), color var(--t-slow);
  overflow-x: hidden;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ── Layout ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.wrap { position: relative; z-index: 1; }

/* ── Ambient Background ── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.10) 0%, transparent 50%);
  filter: blur(100px);
}
.ambient::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -25%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.07) 0%, transparent 60%);
  filter: blur(120px);
}
[data-theme="light"] .ambient::before {
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.06) 0%, transparent 50%);
}
[data-theme="light"] .ambient::after {
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
}

/* ── Grid Overlay ── */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  opacity: 0.5;
}

/* ── Sections ── */
.section { padding: 120px 0; position: relative; }

/* .section-eyebrow — حُذف: letter-spacing على العربي يكسر اتصال الحروف */
.section-title {
  font-family: var(--font-ar);
  font-size: 56px;
  font-weight: 500;
  color: var(--text-0);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 20px;
  max-width: 720px;
}
.section-title-serif {
  font-family: var(--font-ar);
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.section-desc {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 600px;
  font-weight: 400;
}
.section-header {
  margin-bottom: 72px;
  text-align: center;
}
.section-header .section-title { margin-inline: auto; }
.section-header .section-desc  { margin-inline: auto; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .section-title { font-size: 44px; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }
  .section-title { font-size: 36px; letter-spacing: -1.5px; }
}
@media (max-width: 480px) {
  .section-title { font-size: 28px; }
}

/* ── Skip-to-content link — a11y WCAG 2.4.1 ── */
.skip-to-main {
  position: fixed;
  top: -100%;
  inset-inline-start: 16px;
  z-index: 99999;
  background: var(--accent, #38bdf8);
  color: #04121f;
  font-family: var(--font-ar, system-ui);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .2s ease;
  box-shadow: 0 4px 16px rgba(56,189,248,.35);
}
.skip-to-main:focus {
  top: 0;
  outline: 3px solid #04121f;
  outline-offset: 2px;
}

/* ───── components.css ───── */
/* ═══════════════════════════════════════════
   components.css — Buttons + Cards + Forms + Modals
   ═══════════════════════════════════════════ */

/* ── Buttons ── */
.btn-primary {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-full);
  border: none;
  background: var(--text-0);
  color: var(--bg-0);
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all var(--t-fast);
  letter-spacing: -0.01em;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
}
.btn-secondary:hover { background: var(--bg-2); border-color: var(--line-3); }
[data-theme=dark] .btn-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
[data-theme=dark] .btn-secondary:hover { background: rgba(255,255,255,.1); }

.btn-ghost {
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all var(--t-fast);
}
.btn-ghost:hover { background: var(--bg-raised); border-color: var(--text-3); }

.btn-cta {
  height: 36px;
  padding: 0 16px 0 18px;
  border-radius: var(--r-full);
  border: none;
  background: var(--text-0);
  color: var(--bg-0);
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity var(--t-fast), transform var(--t-fast);
  letter-spacing: -0.01em;
}
.btn-cta:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-cta-arrow {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: var(--bg-0);
  color: var(--text-0);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
}

/* ── Theme Toggle ── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--t-fast);
  font-family: var(--font-sans);
}
.theme-toggle:hover { border-color: var(--line-3); color: var(--text-0); }

/* ── Badge / Tag ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-bg-2);
  border: 1px solid var(--line-accent);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}
.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* ── Card Base ── */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  transition: all var(--t-base);
}
.card:hover { border-color: var(--line-accent); }

/* ── KBD ── */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--bg-raised-2);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}

/* ── Form Controls ── */
.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.form-input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--bg-raised);
  color: var(--text-0);
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition: border-color var(--t-fast);
  direction: rtl;
  width: 100%;
}
.form-input:focus { border-color: var(--line-accent); }
.form-input::placeholder { color: var(--text-4); }

.form-error {
  font-size: 12px;
  color: #f87171;
  font-family: var(--font-ar);
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

[data-theme="light"] .modal-overlay {
  background: rgba(244, 247, 251, 0.8);
}

.modal {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 44px 40px;
  max-width: 480px;
  width: 100%;
  position: relative;
  transform: translateY(16px);
  transition: transform var(--t-base);
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-title {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-0);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.modal-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 32px;
}
.modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--t-fast);
}
.modal-close:hover { border-color: var(--line-3); color: var(--text-0); }

/* ── Auth Form ── */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .btn-primary { width: 100%; justify-content: center; margin-top: 8px; }
.auth-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--line-2);
}
.auth-divider::before { right: 0; }
.auth-divider::after { left: 0; }
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}
.auth-switch-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.auth-switch-link:hover { text-decoration: underline; }

/* ── Alert ── */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: var(--font-ar);
  border: 1px solid;
}
.alert-error {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.25);
  color: #f87171;
}
.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

/* ── Spinner ── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pulse Animation ── */
@keyframes float-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.08); }
}

/* ══════════════════════════════════════
   Categories Grid — الصفحة الرئيسية
   ══════════════════════════════════════ */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 900px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-1);
  background: var(--bg-1);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cat-color, var(--accent));
  opacity: 0.04;
  transition: opacity 0.18s;
}
.cat-card:hover {
  border-color: var(--cat-color, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.cat-card:hover::before { opacity: 0.08; }
.cat-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}
.cat-name {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.cat-name-en {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* skeleton */
.cat-skeleton, .game-card-skeleton {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  min-height: 110px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.game-card-skeleton { min-height: 180px; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* small dot accent on game cards */
.game-card-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  flex-wrap: wrap;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-family: var(--font-ar);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; cursor: default; }
.page-btn:disabled, .page-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 40px;
  color: var(--text-4);
  font-size: var(--text-sm);
}
.page-info {
  font-size: var(--text-xs);
  color: var(--text-4);
  text-align: center;
  padding-bottom: var(--sp-4);
}
.page-prev, .page-next {
  gap: var(--sp-1);
  padding: 0 var(--sp-4);
}
@media (max-width: 480px) {
  .page-prev .page-label,
  .page-next .page-label { display: none; }
}

/* ───── navbar.css ───── */
/* ═══════════════════════════════════════════
   navbar.css — النافبار + بلوك الشعار navy
   قاعدة: الشعار دائماً في .nav-logo بخلفية var(--logo-bg) = #0a1628
   ═══════════════════════════════════════════ */

.nav-outer {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
  background: transparent;
}

.nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px 0 24px;
  background: rgba(7, 16, 31, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
}
[data-theme="light"] .nav-inner {
  background: rgba(255, 255, 255, 0.75);
}

/* ── شمال النافبار (RTL: اليمين) ── */
.nav-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

/* ══ بلوك الشعار navy — القاعدة الصارمة ══
   الشعار يُعرض دائماً هنا بخلفية #0a1628
   في الوضعين الفاتح والداكن بلا استثناء    */
.nav-logo {
  background: var(--logo-bg);   /* #0a1628 — ثابت */
  border-radius: 40px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow:
    0 0 20px rgba(56, 189, 248, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo img {
  height: 42px;
  width: auto;
  display: block;
}

/* ── روابط النافبار ── */
.nav-links {
  display: flex;
  gap: 4px;
}

.nav-link {
  position: relative;
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  text-decoration: none;
  font-family: var(--font-ar);
  white-space: nowrap;
}
.nav-link:hover { color: var(--text-0); background: var(--line-1); }
.nav-link.active { color: var(--text-0); }

/* ── يسار النافبار (RTL: اليسار) ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-signin {
  font-size: 13px;
  color: var(--text-2);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  font-weight: 400;
  font-family: var(--font-ar);
  border: none;
  background: none;
}
.nav-signin:hover { color: var(--text-0); background: var(--line-1); }

/* ── Mobile: إخفاء روابط ── */
.nav-mobile-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--t-fast);
}
.nav-mobile-toggle:hover { border-color: var(--line-3); color: var(--text-0); }

.nav-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 16px;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.nav-mobile-menu.open { display: flex; }

.nav-mobile-link {
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  font-family: var(--font-ar);
}
.nav-mobile-link:hover { color: var(--text-0); background: var(--line-1); }

.nav-mobile-divider {
  height: 1px;
  background: var(--line-2);
  margin: 8px 0;
}

.nav-mobile-close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
  font-family: inherit;
}
.nav-mobile-close:hover { color: var(--text-0); background: var(--line-1); }

@media (max-width: 768px) {
  .nav-links, .nav-signin, .btn-cta { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-outer { position: relative; }
  .nav { position: relative; }
  .nav-inner { height: 52px; padding: 0 8px 0 16px; }
}

/* ══════════════════════════════════════════════════
   النافبار الموحد — .navbar
   يُستخدم في كل الصفحات الفرعية + SSR (worker.js)
   نفس المظهر البصري لـ .nav-outer في الصفحة الرئيسية
   ══════════════════════════════════════════════════ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px var(--container-px);
  background: transparent;
}

.navbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px 0 24px;
  background: rgba(7, 16, 31, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
}
[data-theme="light"] .navbar-inner {
  background: rgba(255, 255, 255, 0.75);
}

/* ══ بلوك الشعار navy — القاعدة الصارمة ══ */
.navbar-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* بلوك navy يُحيط الشعار — ثابت في الوضعين */
.logo-block {
  background: var(--logo-bg);
  border-radius: 36px;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 42px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow:
    0 0 20px rgba(56, 189, 248, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.logo-block img {
  height: 42px;
  width: auto;
  display: block;
}

/* نسخة صغيرة للفوتر */
.logo-block--sm {
  background: var(--logo-bg);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid rgba(56, 189, 248, 0.15);
}
.logo-block--sm img {
  height: 34px;
  width: auto;
  display: block;
}

/* ── الجانب الأيمن من النافبار ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── أزرار Auth في النافبار ── */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── زر الهمبرغر (موبايل فقط) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all var(--t-fast);
}
.nav-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: all var(--t-fast);
}
.nav-hamburger:hover { border-color: var(--line-3); }
.nav-hamburger:hover span { background: var(--text-0); }

/* أزرار صغيرة للـ navbar */
.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--r-full);
  font-family: var(--font-ar);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
  text-decoration: none;
  cursor: pointer;
}
.btn.btn-ghost.btn-sm {
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
}
.btn.btn-ghost.btn-sm:hover { background: var(--line-1); color: var(--text-0); border-color: var(--line-3); }
.btn.btn-primary.btn-sm {
  border: none;
  background: var(--text-0);
  color: var(--bg-0);
}
.btn.btn-primary.btn-sm:hover { opacity: 0.9; }

/* Theme toggle (sub-pages يستخدمون .theme-toggle أيضاً) */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  font-family: inherit;
}
.theme-toggle:hover { border-color: var(--line-3); color: var(--text-0); }

/* اسم المستخدم في النافبار — قصّ آمن للأسماء الطويلة */
.nav-username {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* صف زرّي المظهر/اللغة داخل قائمة الجوال */
.nav-mobile-toggles {
  display: flex;
  gap: 8px;
  margin: 4px 0 8px;
}
.nav-mobile-tgl {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface-1, transparent);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.nav-mobile-tgl:hover { border-color: var(--line-3); color: var(--text-0); }

@media (max-width: 768px) {
  /* padding منطقي يحافظ على safe-area بدل padding فيزيائي */
  .navbar { padding-block: 10px; padding-inline: 20px; }
  .navbar-inner { height: 52px; padding-inline-start: 16px; padding-inline-end: 8px; }
  /* إخفاء العناصر التي تزدحم على الجوال — متاحة في قائمة الجوال والفوتر.
     محدّد واسع يغطّي كل بُنى النافبار (navbar-inner + nav-outer للصفحة الرئيسية). */
  .navbar-inner .nav-links,
  .navbar-inner .nav-auth { display: none; }
  .lang-toggle,
  .theme-toggle { display: none !important; }
  .nav-hamburger { display: flex; }
}

/* ───── footer.css ───── */
/* ═══════════════════════════════════════════
   footer.css — الفوتر + الشعار في بلوك navy + السلوقن
   ═══════════════════════════════════════════ */

.footer {
  background: var(--bg-0);
  border-top: 1px solid var(--line-2);
  padding: 0 0 32px;
  position: relative;
}

/* ── قسم الشعار الكبير في الفوتر ── */
.footer-hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--line-2);
}

/* ══ بلوك الشعار navy في الفوتر ══ */
.footer-hero-logo {
  display: inline-flex;
  background: var(--logo-bg);   /* #0a1628 — ثابت */
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 48px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow:
    0 0 80px rgba(56, 189, 248, 0.18),
    0 0 120px rgba(59, 130, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
}
.footer-hero-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), transparent);
  z-index: 2;
}
.footer-hero-logo img {
  height: 168px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── السلوقن الكبير ── */
.footer-slogan {
  font-family: var(--font-ar);
  font-size: 96px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--text-0);
  margin-bottom: 0;
}
.footer-slogan em {
  font-family: var(--font-ar);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -3px;
}
.footer-slogan-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 4px 18px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--accent);
}

/* ── منطقة الروابط ── */
.footer-main {
  padding: 72px 0 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 56px;
  border-bottom: 1px solid var(--line-2);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-px);
}

/* ══ شعار العلامة في الفوتر الأسفل (صغير) ══ */
.footer-brand-logo {
  display: inline-flex;
  background: var(--logo-bg);   /* #0a1628 — ثابت */
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.1);
  height: 56px;
}
.footer-brand-logo img { height: 56px; width: auto; display: block; }

/* ── السلوقن الصغير تحت الشعار ── */
.footer-tagline {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 300px;
  margin-bottom: 8px;
}

.footer-sub-slogan {
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--font-ar);
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
}
.footer-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
.footer-status-text {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0;
}

.footer-col-title {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0;
  font-weight: 600;
  margin-bottom: 20px;
}

/* نص توصيف الشركة */
.footer-attribution {
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text-4);
  text-align: center;
  line-height: 1.8;
  width: 100%;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line-1);
}
.footer-attribution a {
  color: var(--text-3);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
}
.footer-attribution a:hover { color: var(--accent); }
.footer-col-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-list li { font-size: 14px; color: var(--text-2); cursor: pointer; transition: color var(--t-fast); }
.footer-col-list li a { color: inherit; text-decoration: none; }
.footer-col-list li:hover { color: var(--text-0); }

/* ── الشريط السفلي ── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--container-px) 0;
  max-width: var(--container-max);
  margin: 0 auto;
}
.footer-left { display: flex; align-items: center; gap: 24px; }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.5px;
}
.footer-region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: border-color var(--t-fast);
  background: none;
  font-family: var(--font-ar);
}
.footer-region:hover { border-color: var(--line-3); }





/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer-slogan { font-size: 72px; }
}
@media (max-width: 768px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; padding-inline: 20px; }
  .footer-slogan { font-size: 48px; letter-spacing: -2px; }
  .footer-hero-logo img { height: 64px; }
  .footer-hero-logo { padding: 24px 36px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; padding-inline: 20px; }
}
@media (max-width: 480px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-slogan { font-size: 36px; letter-spacing: -1.5px; }
}

/* ══════════════════════════════════════════════════
   الفوتر الموحد للصفحات الفرعية — .footer-inner
   يُستخدم في about, faq, privacy, terms, SSR pages
   ══════════════════════════════════════════════════ */

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 36px var(--container-px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* السلوقن الصغير في الفوتر الموحد — override للنسخة الكبيرة */
.footer-inner .footer-slogan {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-3);
  line-height: 1.5;
  font-family: var(--font-ar);
}
.footer-inner .footer-slogan em {
  font-family: var(--font-ar);
  font-style: normal;
  color: var(--accent);
}
.footer-inner .footer-slogan-dot { display: none; }

/* روابط الفوتر الموحد */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}
.footer-links a {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--t-fast);
  font-family: var(--font-ar);
  padding: 4px 0;
}
.footer-links a:hover { color: var(--text-1); }

/* حق النشر في الفوتر الموحد */
.footer-inner .footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.5px;
  width: 100%;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--line-1);
  margin-top: 4px;
}

/* زر اللغة في الفوتر */
.footer-lang-toggle {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
  min-width: 38px;
  text-align: center;
}
.footer-lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* زر مشاركة الموقع في الفوتر */
.footer-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-3);
  width: 30px;
  height: 26px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
  position: relative;
}
.footer-share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56, 189, 248, 0.06);
}
.footer-share-btn svg { display: block; }

/* tooltip "تم النسخ" */
.footer-share-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  background: var(--text-0);
  color: var(--bg-0);
  font-family: var(--font-ar);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.footer-share-btn.copied::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 20px;
  }
  .footer-links { gap: 4px 12px; }
}

/* ══════════════════════════════════════════════════
   UNIFIED FOOTER (zhf-*) — معيار زيّنها الموحَّد (5 مناطق + Gift CTA + سطر قانوني 3 أسطر)
   ══════════════════════════════════════════════════ */
.zhf-gift {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  background: var(--logo-bg); color: #e8eef6;
  padding: 16px var(--container-px); text-align: center; font-size: 14px; font-family: var(--font-ar);
}
.zhf-gift-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #04121f;
  text-decoration: none; font-weight: 800; font-size: 13px; padding: 8px 18px; border-radius: 99px;
}
.zhf-gift-btn:hover { filter: brightness(1.08); }

.zhf { background: var(--bg-0); border-top: 1px solid var(--line-2); padding: 0 0 28px; }
.zhf-grid {
  max-width: var(--container-max); margin: 0 auto; padding: 48px var(--container-px) 32px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.zhf-zone { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zhf-h { font-family: var(--font-ar); font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0 0 6px; }
.zhf-zone a { font-size: 13.5px; color: var(--text-3); text-decoration: none; transition: color var(--t-fast); font-family: var(--font-ar); }
.zhf-zone a:hover { color: var(--accent); }
.zhf-brand .logo-block--sm { background: var(--logo-bg); border-radius: 12px; padding: 6px 10px; display: inline-flex; }
.zhf-desc { font-size: 13px; color: var(--text-3); line-height: 1.7; margin: 14px 0 0; max-width: 320px; font-family: var(--font-ar); }
.zhf-slogan { font-size: 13px; color: var(--text-4); font-family: var(--font-ar); margin: 6px 0 0; }

/* قسم النشرة البريدية — صف مستقل كامل العرض تحت الـ grid */
.zhf-newsletter {
  max-width: var(--container-max); margin: 0 auto;
  padding: 28px var(--container-px) 28px;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.zhf-news-h { text-align: center; }
.zhf-news-d { font-size: 12.5px; color: var(--text-4); line-height: 1.6; margin: 0 0 6px; font-family: var(--font-ar); text-align: center; }
.zhf-news-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; }
.zhf-news-form input, .zhf-news-form select {
  background: var(--bg-raised); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; color: var(--text-1); font-family: inherit; width: 100%;
}
.zhf-news-row { display: flex; gap: 8px; direction: ltr; }
.zhf-news-row select { flex: 0 0 auto; width: auto; max-width: 124px; }
.zhf-news-row input { flex: 1 1 auto; }
.zhf-news-form button {
  background: var(--accent); color: #04121f; border: none; border-radius: 10px; padding: 10px;
  font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; transition: filter var(--t-fast);
}
.zhf-news-form button:hover { filter: brightness(1.08); }
.zhf-news-form button:disabled { opacity: .6; cursor: default; }
.zhf-news-msg { font-size: 12px; min-height: 16px; font-family: var(--font-ar); }
.zhf-news-msg.ok { color: #22c55e; }
.zhf-news-msg.err { color: #ef4444; }

.zhf-actions {
  max-width: var(--container-max); margin: 0 auto; padding: 20px var(--container-px) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
}
.zhf-act {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text-2);
  border: 1px solid var(--line-2); padding: 9px 18px; border-radius: 99px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none; transition: all var(--t-fast); position: relative;
}
.zhf-act:hover { border-color: var(--accent); color: var(--accent); }
.zhf-share-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text-0); color: var(--bg-0); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap; display: none; }

/* روابط التواصل الاجتماعي */
.zhf-social { max-width: var(--container-max); margin: 0 auto; padding: 18px var(--container-px) 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
.zhf-soc-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-3); border: 1px solid var(--line-2); transition: all var(--t-fast); text-decoration: none; }
.zhf-soc-link:hover { color: var(--accent); border-color: var(--accent); background: rgba(56,189,248,.07); }

/* موافقة PDPL — سطر مستقل فوق زر الاشتراك */
.zhf-news-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; cursor: pointer; text-align: start; width: 100%; }
.zhf-news-consent input[type=checkbox] { margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.zhf-news-consent a { color: var(--accent); text-decoration: underline; }
.zhf-news-consent a:hover { opacity: .8; }

/* السطر القانوني — 3 أسطر مستقلّة */
.zhf-legal { max-width: 760px; margin: 0 auto; padding: 22px var(--container-px) 0; text-align: center; font-family: var(--font-ar); }
.zhf-legal p { margin: 0 0 6px; line-height: 1.7; }
.zhf-legal-1 { font-size: 13px; color: var(--text-2); font-weight: 600; }
.zhf-legal-2 { font-size: 11.5px; color: var(--text-4); }
.zhf-legal-3 { font-size: 11px; color: var(--text-4); }

/* External link arrow — SVG واحد يُقلب تلقائياً في RTL */
.ext-arrow { display: inline-block; vertical-align: middle; margin-inline-start: 3px; transition: transform var(--t-fast); }
[dir="rtl"] .ext-arrow { transform: scaleX(-1); }
a:hover .ext-arrow { opacity: .75; }

/* رابط إعدادات الكوكيز في الفوتر */
.zhf-legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.zhf-legal a:hover { opacity: .8; }
.zhf-legal-cookie { font-size: 11px; color: var(--text-4); margin-top: 4px; }

@media (max-width: 1024px) { .zhf-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 680px)  { .zhf-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px 20px 28px; } .zhf-brand { grid-column: 1 / -1; } }
@media (max-width: 420px)  { .zhf-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px)  { .zhf-newsletter { padding: 22px 20px; } }

/* ───── mobile-first.css ───── */
/* ═══════════════════════════════════════════════════════════════
   mobile-first.css — Universal mobile fixes ONLY
   No aggressive global overrides — page-specific styling stays untouched
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. iOS auto-zoom on input focus (critical fix) ── */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input, select, textarea {
  font-size: 16px;  /* Must be ≥16px to prevent iOS zoom on focus */
}

/* ── 2. Tap highlight & smooth touch ── */
* { -webkit-tap-highlight-color: transparent; }
button, a, input[type="checkbox"], input[type="radio"], label, [role="button"] {
  touch-action: manipulation; /* eliminates 300ms tap delay */
}

/* ── 3. Smooth scrolling on iOS ── */
body { -webkit-overflow-scrolling: touch; }

/* ── 4. Safe-area for notched iPhones ── */
@supports(padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── 5. Better focus visibility for accessibility ── */
*:focus { outline: none; }
*:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 5b. Respect reduced-motion preference (a11y — CLAUDE §6.7) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 6. Prevent autocomplete background on iOS ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised, #fff) inset !important;
  -webkit-text-fill-color: var(--text-0, #0f172a) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── 7. Hide hover effects on touch devices ── */
@media (hover: none) {
  *:hover { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAY PAGE & SETUP PAGE specific (only these pages)
   Scoped via #gp (play page) and .ps-page (setup page) IDs/classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Play page: confirm dialog (critical fix) ── */
#gco {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  margin: 0 !important;
}
#gco.hidden { display: none !important; }
#gco-inner {
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  direction: rtl;
}

/* ── Play page (#gp): no text selection in game UI ── */
#gp { -webkit-user-select: none; user-select: none; }
#gp input, #gp textarea { -webkit-user-select: text; user-select: text; }

/* ── Setup page (.ps-page) mobile tweaks ── */
@media (max-width: 480px) {
  .ps-page .ps-rounds-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .ps-page .ps-round-card {
    min-height: 50px;
    font-size: 16px;
    font-weight: 800;
  }
  .ps-page .ps-player-chip {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
  }
  .ps-page .ps-timer-preset {
    min-height: 56px;
    font-size: 15px;
    padding: 11px 8px;
  }
  /* Setup page: prevent input zoom */
  .ps-page input, .ps-page select, .ps-page textarea {
    font-size: 16px !important;
  }
}

/* ── PWA standalone mode ── */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

/* ───── seasonal.css ───── */
/* seasonal.css v1 — S10
   كل ديكور موسمي يُطبَّق بـclass على <body> */

/* ── رمضان ────────────────────────────────── */
body.season-ramadan .navbar::after {
  content: '🌙';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  pointer-events: none;
}
body.season-ramadan .hero {
  background: linear-gradient(135deg, #0a2e1a 0%, #0a1628 100%);
}
body.season-ramadan .footer {
  border-top: 2px solid #16a34a;
}

/* ── عيد الفطر / الأضحى ────────────────── */
body.season-eid-fitr .section-title em,
body.season-eid-adha .section-title em {
  color: #38bdf8;
}

/* ── اليوم الوطني ─────────────────────── */
body.season-national .navbar {
  border-bottom: 3px solid #15803d;
}
body.season-national .footer {
  border-top: 3px solid #15803d;
}

/* ── يوم التأسيس ──────────────────────── */
body.season-founding .navbar {
  border-bottom: 2px solid #92400e;
}

/* ── ديكورات موسمية عامة ─────────────── */
body[class*="season-"] .game-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
body[class*="season-"] .game-card:hover {
  transform: translateY(-4px);
}

/* ── بانر الخصم الموسمي ─────────────── */
.seasonal-discount-banner {
  background: linear-gradient(90deg, #0a1628, #1e3a5f);
  color: #fff;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(56,189,248,.3);
}
.seasonal-discount-banner a {
  color: #38bdf8;
  text-decoration: none;
  margin-right: 8px;
}