/* ============================================================
   DeepZix — Design Tokens
   ============================================================ */
:root {
  --bg: #070B0A;
  --surface: #0F1613;
  --surface-2: #161F1B;
  --border: #223029;
  --text: #EAF3EE;
  --text-dim: #8FA79D;
  --green: #1FE586;
  --green-soft: rgba(31, 229, 134, 0.14);
  --green-dark: #0E8F52;
  --red: #FF5470;
  --gold: #FFC857;

  --font-display: 'Chakra Petch', 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* ── مقاييس مسافات سائلة (Fluid Spacing) ────────────────────────
     تُستعمل بدل أرقام px ثابتة مكرّرة فـ padding/margin العامة
     (Header، .app-outlet، .section، Hero...) — كتكبر/تصغر تلقائياً
     مع عرض الشاشة (320px → 1920px) بلا الحاجة لعدة @media منفصلة
     لكل نقطة توقف. القيم الدنيا/القصوى مدروسة يدوياً (مش تخمين)
     باش تبقى مريحة فـ 320px وما تكبرش بزاف فالشاشات الواسعة جداً. */
  --space-2xs: clamp(4px, 0.4vw + 3px, 6px);
  --space-xs: clamp(6px, 0.6vw + 4px, 10px);
  --space-sm: clamp(10px, 1vw + 7px, 14px);
  --space-md: clamp(14px, 1.6vw + 10px, 20px);
  --space-lg: clamp(20px, 2.6vw + 14px, 32px);
  --space-xl: clamp(28px, 4vw + 18px, 48px);
  /* حشو أفقي عام للحاويات (Header، محتوى الصفحة) */
  --container-pad-x: clamp(12px, 3vw, 20px);
}

[data-theme="light"] {
  --bg: #F5F8F6;
  --surface: #FFFFFF;
  --surface-2: #EEF3F0;
  --border: #DCE6E0;
  --text: #0B1512;
  --text-dim: #57685F;
  --green-soft: rgba(14, 143, 82, 0.1);
  --shadow-sm: 0 2px 10px rgba(20, 40, 30, 0.06);
  --shadow: 0 10px 30px rgba(20, 40, 30, 0.12);
  --shadow-lg: 0 16px 40px rgba(20, 40, 30, 0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* شبكة أمان عامة: يمنع أي عنصر (نص طويل مترجم، أيقونة، إلخ) من
   إحداث تمرير أفقي غير مرغوب فيه على أي حجم شاشة، مع الحفاظ على
   overflow-x المحلي (auto) داخل الجداول/الشرائط التي تحتاجه فعلاً. */
html {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
  overflow-x: hidden;
  width: 100%;
}

/* المستخدمين اللي فضّلو تقليل الحركة (Reduce Motion) فإعدادات
   الجهاز — كنحيّدو كل الحركات/الانتقالات الزايدة احتراماً لهاد
   الاختيار (وصول أفضل، Accessibility). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* نصوص العناوين والفقرات قد تطول في بعض اللغات (فرنسية/برتغالية/
   إسبانية) مقارنة بالعربية أو الإنجليزية؛ نمنع فيضان الكلمات
   الطويلة خارج حاويتها في كل مكان. */
h1, h2, h3, p, span, a, button, label {
  overflow-wrap: break-word;
  word-break: break-word;
}

::selection { background: var(--green); color: #04150C; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(10px, 1.6vw, 12px) var(--container-pad-x);
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-inline-end: auto;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--green), var(--green-dark));
  color: #04150C;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.brand-mark.small { width: 26px; height: 26px; font-size: 0.7rem; }

.brand-name em { color: var(--green); font-style: normal; }

.main-nav {
  display: none;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.main-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.main-nav a.active,
.main-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.icon-btn {
  width: clamp(30px, 5vw, 36px);
  height: clamp(30px, 5vw, 36px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:hover { background: var(--green-soft); transform: translateY(-1px); }

.lang-select {
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.lang-select option {
  background: var(--surface);
  color: var(--text);
}
.lang-select:hover { background: var(--green-soft); }
.lang-select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.telegram-btn { color: #29A9EA; }

.age-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  color: var(--gold);
}

/* شارة +18 بلون أحمر — تُستعمل بجانب أيقونتَي اللغة والوضع الليلي/
   النهاري فالهاتف، لتنبيه أوضح بصرياً. */
.age-badge-red {
  border-color: var(--red);
  color: var(--red);
}

/* أيقونة تغيير اللغة المضغوطة — تظهر فقط فالهاتف (انظر الأسفل)،
   حيت الشاشات الكبيرة عندها الـ select الكامل أصلاً. */
.lang-toggle-mobile {
  display: none;
  font-size: 1rem;
}

.nav-toggle { display: grid; }

/* عناصر إضافية (تيليغرام + شارة 18+) تُعاد استعمالها داخل قائمة
   الهاتف بدل الهيدر الرئيسي، حتى لا يزدحم صف واحد على الشاشات
   الصغيرة. مخفية بشكل افتراضي، وتظهر فقط تحت 900px (انظر الأسفل). */
.nav-extra {
  display: none;
}

@media (min-width: 900px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }

  /* ============================================================
     تحسين الهيدر على الكمبيوتر (بطلب صريح): ارتفاع أقل، خط أصغر
     بـ ~13% لعناصر القائمة، مسافات أضيق، شعار أصغر مع محاذاة دقيقة.
     زر "الحساب" كيبقى بنفس صف باقي عناصر القائمة (main-nav واحد
     دائماً flex-row هنا) — تصغير الخط/الحشو/الفراغات كافي باش
     يتفادى أي طفح يخلي عنصر يهبط لسطر جديد. ============================================================ */
  .header-inner { padding-block: 8px; gap: 10px; }

  .brand { gap: 6px; font-size: 1.02rem; line-height: 1; }
  .brand-mark { width: 27px; height: 27px; border-radius: 7px; font-size: 0.7rem; }

  .main-nav { gap: 2px; }
  .main-nav a { padding: 6px 9px; font-size: 0.8rem; }

  .header-actions { gap: 6px; }
  .icon-btn { width: 30px; height: 30px; font-size: 0.85rem; }
  .lang-select { height: 30px; padding: 0 7px; font-size: 0.76rem; }
  .age-badge { padding: 5px 7px; font-size: 0.68rem; }
}

/* شاشات لوحية أفقية/أجهزة سطح مكتب صغيرة (900–1099px): بعض عناوين
   القائمة تطول أكثر في الفرنسية/البرتغالية/الإسبانية عن العربية.
   نقلّص الحشو والخط أكثر هنا (فوق التصغير العام أعلاه) حتى يبقى كل
   شيء في صف واحد بلا الحاجة لتمرير أفقي، مع flex-wrap كخط دفاع أخير.
   FIX ترتيب: هاد البلوك خاصو يجي بعد البلوك العام @media(900px) فـ
   المصدر، وإلا كانت قواعده تبقى مغلوبة (Cascade كيفضّل الأخير عند
   نفس درجة التحديد). */
@media (min-width: 900px) and (max-width: 1099px) {
  .main-nav a { padding: 6px 7px; font-size: 0.74rem; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 5px; }
}

@media (max-width: 899px) {
  /* إعادة تصميم صف الأيقونات على الهاتف (بطلب صريح) — بلا أي تعديل
     فـ HTML/JS: الترتيب البصري بواسطة "order" فقط، عناصر DOM ماشي
     متبدلة. النتيجة: 🔍 بحث ثم 📨 تيليجرام مباشرة بجانبه، بعدها
     🏳️ اللغة، 🌙 الوضع، 18+ ، وفـ الآخر ☰ القائمة. */
  .header-inner { gap: 10px; }
  .brand { gap: 6px; }

  .header-actions {
    gap: 6px;
  }
  .header-actions .lang-select {
    display: none;
  }
  /* تيليجرام: كان مخفياً هنا وموجود غير جوه قائمة الهمبرغر — دابا
     كيبان بشكل دائم فالصف العلوي، بجانب زر البحث مباشرة. */
  /* أخفِ البحث وتيليغرام من الهيدر فالهاتف */
.header-actions .search-toggle,
.header-actions .telegram-btn {
    display: none;
}

/* اللغة + الوضع الليلي + 18+ + القائمة */
.header-actions .lang-toggle-mobile {
    display: grid;
    order: 1;
}

.header-actions .theme-toggle {
    order: 2;
}

.header-actions .age-badge {
    order: 3;
}

.header-actions .nav-toggle {
    order: 4;
}
  /* أيقونة اللغة المضغوطة تبقى ظاهرة هنا (الشاشات الكبيرة عندها
     الـ select الكامل بدلاً منها). */
  .header-actions .lang-toggle-mobile {
    display: grid;
  }

  /* نفس الحجم والمحاذاة لكل الأيقونات الدائرية. */
  .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 0.86rem;
  }
  /* شارة 18+ مو دائرية بطبيعتها، بس كنوحدو ارتفاعها ومحاذاتها
     العمودية مع باقي الأيقونات باش الصف يبان متوازن. */
  .age-badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
  }

  .main-nav {
    position: fixed;
    inset-inline: 0;
    top: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 8px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    box-shadow: var(--shadow);
  }
  .main-nav a { padding: 13px 12px; }

  /* تيليجرام بان دابا بشكل دائم فالصف العلوي (فوق) — تكراره جوه
     قائمة الهمبرغر ماعادش ضروري. */
.nav-extra{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    margin-top:10px;
    border-top:1px solid var(--border);
}

.nav-extra-btn{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    text-decoration:none;
    padding:10px;
    border-radius:10px;
    background:var(--surface-2);
    border:1px solid var(--border);
    cursor:pointer;
}
}

/* هاتف صغير جداً (320-359px): تقليص إضافي للمسافات والأيقونات
   لضمان عدم التصاق العناصر ببعضها. */
@media (max-width: 359px) {
  .brand-name { display: none; }
  .header-actions { gap: 4px; }
  .icon-btn { width: 29px; height: 29px; font-size: 0.8rem; }
  .age-badge { padding: 0 6px; font-size: 0.64rem; height: 29px; }

  .match-card .match-row { gap: 6px; }
  .match-card .team { font-size: 0.82rem; gap: 5px; }
  .match-card .match-score { font-size: 1.02rem; min-width: 50px; gap: 4px; }
  .match-card .live-time-badge,
  .match-card .match-time { font-size: 0.58rem; padding: 2px 7px; }
}

/* ============================================================
   Layout / Sections
   ============================================================ */
.app-outlet {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-md) var(--container-pad-x);
  min-height: 60vh;
  transition: opacity .15s ease;
}
.app-outlet.fade-out { opacity: 0.4; }

.section { margin: var(--space-xl) 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.section-head h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.see-all { color: var(--green); font-size: 0.85rem; }

.form-badges { display: flex; gap: 4px; }
.form-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #04150C;
}
.form-dot.form-win { background: var(--green); }
.form-dot.form-draw { background: var(--gold); color: #2A1B00; }
.form-dot.form-loss { background: var(--red); color: #fff; }
.form-dot.form-na { background: var(--surface-2); color: var(--text-dim); }

.player-stat-list { display: flex; flex-direction: column; gap: 8px; }
.player-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: border-color .15s ease;
}
.player-stat-row:hover { border-color: var(--green); }
.player-stat-rank {
  width: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}
.player-stat-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.player-stat-photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 700;
}
.player-stat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-stat-name { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-stat-team { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--text-dim); }
.player-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.page-head { margin: 20px 0 18px; }
.page-head h1 { font-family: var(--font-display); font-size: clamp(1.25rem, 4vw, 1.6rem); margin: 0 0 6px; }
.page-head p { color: var(--text-dim); margin: 0; font-size: 0.92rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--green);
  background: var(--green-soft);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 15% 20%, var(--green-soft), transparent 45%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  padding: var(--space-xl) var(--space-lg);
  margin-top: 16px;
}
/* خطوط ملعب مبسّطة (رسم تجريدي، بلا صورة حقيقية) — تفصيلة هوية
   بصرية خفيفة جداً (opacity منخفض)، ماشي زخرفة صارخة. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%231FE586' stroke-width='1.5'%3E%3Cline x1='260' y1='0' x2='260' y2='300'/%3E%3Ccircle cx='260' cy='150' r='55'/%3E%3Ccircle cx='260' cy='150' r='2.5' fill='%231FE586' stroke='none'/%3E%3Cpath d='M400 88 A62 62 0 0 1 400 212'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: min(55%, 380px) auto;
  opacity: 0.16;
}
[data-theme="light"] .hero::after { opacity: 0.1; }
/* Hero مضغوط (مستعمل فـ home.js): أقصر ارتفاعاً، حشو أقل، حتى
   تبان المباريات مباشرة تحته بلا تمرير كبير. */
.hero-compact { padding: var(--space-lg) var(--space-lg); }
.hero-compact .hero-content { max-width: 640px; }
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.25;
  margin: 0 0 8px;
}
.hero p { color: var(--text-dim); max-width: 60ch; margin: 0 0 16px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-block;
  border: 1px solid transparent;
}
.btn-primary { background: var(--green); color: #04150C; }
.btn-primary:hover { background: #33f299; }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }

/* ============================================================
   Grids & Cards
   ============================================================ */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
/* FIX (فيضان أفقي/Overflow): أي عنصر Grid عندو "min-width: auto"
   ضمنياً، يعني كيرفض يتقلص تحت حجم محتواه (اسم فريق طويل، شعار...)
   حتى لو العمود كتاعو "1fr". هادشي كان كيخلي الصفحة كاملة تكبر فـ
   العرض وتفيض برا الشاشة (فـ RTL كيبان النص المقطوع فالحافة
   اليسرى)، و"…" ديال اسم الفريق الطويل ما كانش كيخدم أصلاً لأن
   العمود ما كانش محدود العرض حتى يحتاج يقص. الحل: minmax(0, 1fr)
   فكل الشبكات + min-width: 0 على العناصر ديالها. */
.grid > * { min-width: 0; }
/* توزيع تلقائي بدل عدد أعمدة ثابت مربوط بعرض الشاشة: auto-fit +
   minmax() كيحسب بعدد الأعمدة حسب المساحة الحقيقية المتوفرة للـ
   Grid نفسها (مهم بزاف دابا: بطاقات المباريات صايبة جوه عمود
   أضيق فالتخطيط الجديد بثلاث أعمدة على الكمبيوتر — عرض الشاشة
   الكامل ماعادش كافي وحدو لتحديد العدد المناسب). */
@supports (width: min(300px, 100%)) {
  .grid-matches { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .grid-predictions, .grid-ai, .grid-betting { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
}
@supports not (width: min(300px, 100%)) {
  /* احتياط لمتصفحات قديمة جداً ما تدعمش min()/auto-fit بشكل موثوق —
     نفس السلوك القديم بعدد أعمدة ثابت حسب عرض الشاشة العام. */
  @media (min-width: 640px) { .grid-matches, .grid-predictions, .grid-ai, .grid-betting { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .grid-matches, .grid-predictions, .grid-ai, .grid-betting { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1400px) { .grid-predictions, .grid-ai, .grid-betting { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}

.match-card, .prediction-card, .betting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.match-card:hover, .prediction-card:hover, .betting-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
}

.match-card.is-live { border-color: var(--red); }

/* تحسين #5 (بطاقات المباريات، بطلب صريح): اسم البطولة دابا badge
   حقيقي (شعار + اسم داخل كبسولة)، ماشي نص عادي فقط — والشعارات
   والنتيجة كبروا شوية زيادة. */
.match-league-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 100px;
  padding: 4px 10px 4px 4px;
  margin-bottom: 12px;
}
[dir="rtl"] .match-league-badge { padding: 4px 4px 4px 10px; }
.match-league-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }
.match-league-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-dot {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
}

.match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* FIX: min-width:0 ضروري باش flex item (.team) يقدر يتقلص تحت
   الحجم الطبيعي ديال النص (min-content) — بلاه، أسماء الفرق
   الطويلة (بحال "Morocco"، "France"...) كانت كتكسر حرف-حرف
   بسطور متعددة (بسبب قاعدة word-break: break-word العامة فوق
   فـ الملف مطبقة على كل <span>، مع flex item ما كيتقلصش عادي). */
.team { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; flex: 1; min-width: 0; }
.team-logo { width: clamp(28px, 4vw, 32px); height: clamp(28px, 4vw, 32px); object-fit: contain; transition: transform .18s ease; flex-shrink: 0; }
.match-card:hover .team-logo { transform: scale(1.08); }
/* اسم الفريق: سطر واحد ثابت دائماً — أي اسم طويل كيتقص بـ "…"
   بدل ما يكسر التصميم أو يهبط لعدة أسطر. */
.team-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* النتيجة هي العنصر الرئيسي فوسط البطاقة، وحالة المباراة (🔴 مباشر
   41' / ⏸ استراحة / ✅ انتهت / وقت الانطلاق) كتبان كسطر مستقل
   تحتها مباشرة — بعيدة تماماً عن اسم الفريق جنبها. هاد التخطيط
   (column) مفعّل بحال واحد على الهاتف والكمبيوتر؛ الفروقات بين
   الحجمين (خط أكبر، عرض أوسع...) كاينة فـ @media(min-width:900px). */
.match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 60px;
  flex-shrink: 0;
}
.score-value { line-height: 1; white-space: nowrap; }

/* حالة المباراة كـ Badge ملوّن (كبسولة) أسفل النتيجة — على كل
   الأحجام. الألوان: 🔴 مباشر = أحمر خفيف، ✅ انتهت = أخضر خفيف،
   ⏸ استراحة = ذهبي خفيف، ⏳ لم تبدأ = رمادي محايد. */
.match-card .live-time-badge,
.match-card .match-time {
  margin-top: 0;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.64rem;
  white-space: nowrap;
  max-width: 100%;
}
.match-card .live-time-badge {
  background: color-mix(in srgb, var(--red) 14%, transparent);
}
.match-card .live-time-badge.live-time-finished {
  background: var(--green-soft);
}
.match-card .live-time-badge.live-time-paused {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}
.match-card .match-time {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
}

/* توقع سريع جوه الكارت (اختياري — يبان غير كي يكون متوفر، شوف
   home.js: matchPredictionFor()) */
.match-quick-pred {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.76rem;
  color: var(--text-dim);
  text-align: center;
}
.match-quick-pred strong { color: var(--green); }
.match-quick-pred span { font-family: var(--font-mono); color: var(--text-dim); }

/* ============================================================
   بطاقة المباراة — نسخة الكمبيوتر فقط (Desktop، 900px فما فوق)
   ============================================================
   حسب الطلب: 3 بطاقات فالصف، بطاقة أكبر وPadding أوسع، النتيجة
   كبيرة فالمنتصف، وحالة المباراة (مباشر/انتهت/لم تبدأ) كـ Badge
   ملوّن أسفل النتيجة مباشرة. نسخة الهاتف (أقل من 900px) ماتلمستش
   بتاتاً — كل القواعد هنا محصورة داخل هاد الـ media query. */
@media (min-width: 900px) {
  .match-card {
    padding: 14px 14px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, transform .25s ease, box-shadow .25s ease;
  }
  .match-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
  }

  .match-card .match-row { gap: 10px; }
  .match-card .team { gap: 8px; font-size: 0.9rem; }
  /* تحديث بطلب صريح لاحق: تكبير الشعارات والنتيجة فنسخة الكمبيوتر
     (كانت 30px/1.25rem) — القرار السابق "ماتلمستش نسخة الهاتف" باقي
     محترم (هاد التعديلات كلها داخل @media(900px) فقط). */
  .match-card .team-logo { width: 34px; height: 34px; }

  /* النتيجة فالمنتصف: خط أكبر وعمود أوسع شوية فنسخة الكمبيوتر
     (عمود التخطيط + الألوان معرّفين مسبقاً فـ القواعد المشتركة فوق). */
  .match-card .match-score { min-width: 80px; }
  .match-card .score-value { font-size: 1.5rem; }
  .match-card .live-time-badge,
  .match-card .match-time { font-size: 0.66rem; }
}

/* Prediction card */
.prediction-card { position: relative; overflow: hidden; }
.prediction-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  opacity: 0;
  transition: opacity .18s ease;
}
.prediction-card:hover::before { opacity: 1; }
.prediction-teams { font-weight: 700; margin-bottom: 12px; font-size: 0.98rem; letter-spacing: -0.01em; }
.vs { color: var(--text-dim); font-weight: 400; font-size: 0.8rem; margin: 0 4px; }

.gauge { margin: 10px 0; }
.gauge-track {
  height: 8px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
}
.gauge-fill { height: 100%; border-radius: 100px; background: var(--green); transition: width .4s ease; }
.gauge-mid .gauge-fill { background: var(--gold); }
.gauge-low .gauge-fill { background: var(--red); }
.gauge-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 4px;
  font-family: var(--font-mono);
}

.prediction-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.stat {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
  transition: border-color .15s ease;
}
.prediction-card:hover .stat { border-color: var(--border); }
.stat span { display: block; font-size: 0.62rem; color: var(--text-dim); margin-bottom: 3px; }
.stat strong { font-family: var(--font-mono); font-size: 0.85rem; }

.prediction-winner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.prediction-winner-badge {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}


/* AI card signature */
.ai-card { border-color: var(--green-dark); background: linear-gradient(180deg, var(--surface), var(--green-soft)); }
.ai-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--green);
  color: #04150C;
  padding: 3px 8px;
  border-radius: 100px;
}
.ai-insight { font-size: 0.82rem; color: var(--text-dim); margin: 10px 0 0; }
.ai-head { text-align: center; }
.ai-head .eyebrow { display: inline-block; }

/* ============================================================
   Betting Sites — بطاقات فاخرة لأفضل مواقع المراهنات
   ============================================================ */
.betting-head { text-align: center; }
.betting-subtitle {
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 auto;
  font-size: 0.92rem;
}

.betting-card {
  position: relative;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.betting-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green));
  opacity: 0;
  transition: opacity .18s ease;
}
.betting-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.betting-card:hover::before { opacity: 1; }

.betting-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.betting-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 6px;
}
.betting-logo-placeholder {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  border: 1px solid var(--border);
}
.betting-rating {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  background: var(--green-soft);
  color: var(--green);
  border-radius: 100px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.betting-rating small { font-size: 0.65rem; font-weight: 500; color: var(--text-dim); }

.betting-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
}
.betting-bonus {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0;
}
.betting-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.betting-visit {
  text-align: center;
  margin-top: 4px;
}
.betting-page-disclaimer {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
  max-width: 70ch;
  margin: 28px auto 10px;
  line-height: 1.6;
}

/* ============================================================
   Table (Standings)
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.standings-table { min-width: 480px; }
.standings-table th, .standings-table td {
  padding: 10px 12px;
  text-align: center;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.standings-table th { color: var(--text-dim); font-size: 0.72rem; font-weight: 600; }
.standings-table tr:last-child td { border-bottom: none; }
.team-cell { display: flex; align-items: center; gap: 8px; text-align: start; }
.team-logo-sm { width: 18px; height: 18px; object-fit: contain; }

.zone-ucl { box-shadow: inset 3px 0 0 var(--green); }
.zone-uel { box-shadow: inset 3px 0 0 var(--gold); }
.zone-drop { box-shadow: inset 3px 0 0 var(--red); }

/* ============================================================
   Full Standings Table (صفحة الترتيب) — أعمدة كاملة، شعارات أكبر،
   أعمدة أولى ثابتة (sticky) أثناء التمرير الأفقي فالهاتف، مثل
   تطبيقات الرياضة الكبيرة (Flashscore / Sofascore).
   ملاحظة: هاد الأنماط معزولة بكلاس ".standings-table-full" باش ما
   تأثرش على جدول الترتيب المصغّر فـ الصفحة الرئيسية (home.js)، اللي
   باقي كيستعمل ".standings-table" العادية بلا تغيير.
   ============================================================ */
.standings-table-full { min-width: 640px; border-collapse: separate; border-spacing: 0; }

.standings-table-full thead th {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.standings-table-full tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.standings-table-full tbody tr:hover { background: var(--green-soft); }

.standings-table-full td, .standings-table-full th {
  padding: 10px 8px;
}

.standings-table-full th.th-rank,
.standings-table-full td.rank-cell {
  width: 34px;
  font-weight: 700;
  color: var(--text-dim);
}

.standings-table-full th.th-team,
.standings-table-full td.team-cell {
  min-width: 168px;
  text-align: start;
  gap: 10px;
}

/* ── أعمدة ثابتة (Sticky) أثناء التمرير الأفقي فالشاشات الصغيرة ── */
.standings-table-full th.th-rank,
.standings-table-full td.rank-cell,
.standings-table-full th.th-team,
.standings-table-full td.team-cell {
  position: sticky;
  background: var(--surface);
  z-index: 2;
}
.standings-table-full th.th-rank,
.standings-table-full td.rank-cell { inset-inline-start: 0; }
.standings-table-full th.th-team,
.standings-table-full td.team-cell {
  inset-inline-start: 34px;
  box-shadow: 2px 0 0 var(--border);
}
.standings-table-full thead th.th-rank,
.standings-table-full thead th.th-team { z-index: 3; }
.standings-table-full tbody tr:nth-child(even) td.rank-cell,
.standings-table-full tbody tr:nth-child(even) td.team-cell {
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.standings-table-full tbody tr:hover td.rank-cell,
.standings-table-full tbody tr:hover td.team-cell { background: var(--green-soft); }

.team-logo-standings { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }
.team-name-cell {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 500;
}
@media (min-width: 640px) { .team-name-cell { max-width: 220px; } }

.standings-table-full .gd-cell { font-family: var(--font-mono); }
.gd-pos { color: var(--green); font-weight: 600; }
.gd-neg { color: var(--red); font-weight: 600; }

.points-cell strong { color: var(--green); font-size: 0.92rem; }

/* ── هاتف (أقل من 600px): نفس الجدول ونفس المعلومات بالضبط كيما
   الحاسوب — بلا إخفاء أي عمود — لكن بتصميم مضغوط جداً (حشو وخط
   صغيرين وأعمدة بعرض نسبي محسوب) حتى تدخل كل الأعمدة العشرة فعرض
   الشاشة بلا أي تمرير أفقي، تماماً متل تطبيقات الرياضة العالمية
   (Sofascore / Flashscore / ESPN). */
@media (max-width: 599px) {
  .standings-table-full {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
  }
  .table-wrap:has(.standings-table-full) { overflow-x: hidden; }

  .standings-table-full th.th-rank,
  .standings-table-full td.rank-cell,
  .standings-table-full th.th-team,
  .standings-table-full td.team-cell {
    position: static;
    box-shadow: none;
  }

  /* عرض نسبي ثابت لكل عمود — الفريق ياخذ أكبر حصة، والأعمدة
     الإحصائية تتقاسم الباقي بالتساوي. مجموع النسب = 100%. */
  .standings-table-full th.th-rank,
  .standings-table-full td.rank-cell { width: 8%; }
  .standings-table-full th.th-team,
  .standings-table-full td.team-cell { width: 27%; }
  .standings-table-full th.col-secondary,
  .standings-table-full td.col-secondary,
  .standings-table-full th.th-gd,
  .standings-table-full td.gd-cell,
  .standings-table-full th.th-points,
  .standings-table-full td.points-cell { width: 8.5%; }

  .standings-table-full td, .standings-table-full th {
    padding: 6px 2px;
    font-size: 0.64rem;
  }
  .standings-table-full thead th {
    white-space: normal;
    line-height: 1.15;
    font-size: 0.6rem;
  }

  .team-name-cell { max-width: none; font-size: 0.68rem; }
  .team-logo-standings { width: 18px; height: 18px; }
  .team-cell { gap: 5px; }

  .points-cell strong { font-size: 0.72rem; }

  /* خانة الترتيب: خلفية ملوّنة كاملة حسب المنطقة (كأس أوروبا/الهبوط)
     بدل الخط الجانبي الرفيع — أوضح على شاشة صغيرة، بلا الاعتماد على
     أي عمود ثابت (sticky). */
  .standings-table-full td.rank-cell {
    font-weight: 700;
    text-align: center;
  }
  .standings-table-full tr.zone-ucl td.rank-cell { background: var(--green); color: #04150C; }
  .standings-table-full tr.zone-uel td.rank-cell { background: var(--gold); color: #2A1B00; }
  .standings-table-full tr.zone-drop td.rank-cell { background: var(--red); color: #2A0008; }
  .standings-table-full tr.zone-ucl,
  .standings-table-full tr.zone-uel,
  .standings-table-full tr.zone-drop { box-shadow: none; }
}

/* هاتف صغير جداً (أقل من 360px): خط وحشو أضيق شوية باش يبقى كل
   شيء مقروء بلا التصاق. */
@media (max-width: 359px) {
  .standings-table-full td, .standings-table-full th { padding: 5px 1px; font-size: 0.6rem; }
  .standings-table-full thead th { font-size: 0.56rem; }
  .team-name-cell { font-size: 0.64rem; }
  .team-logo-standings { width: 16px; height: 16px; }
}

.legend { display: flex; gap: 16px; align-items: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 10px; flex-wrap: wrap; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-inline-end: 4px; }
.legend-dot.zone-ucl { background: var(--green); box-shadow: none; }
.legend-dot.zone-uel { background: var(--gold); box-shadow: none; }
.legend-dot.zone-drop { background: var(--red); box-shadow: none; }

/* ============================================================
   Home Layout — تخطيط 3 أعمدة على الكمبيوتر (بطلب صريح):
   البطولات | المباريات | أفضل التوقعات + إعلان
   ============================================================
   Mobile-first حقيقي: بلا أي @media، .home-layout غير حاوية Flex
   عمودية عادية (كل عمود كيتبع الآخر بترتيبه فـ الـ HTML، بحال قبل
   بالضبط). التخطيط بـ 3 أعمدة كيتفعّل غير من 1024px، وهو تحسين
   إضافي بصري بحت — الترتيب المنطقي/القرائي ما كيتبدلش فالهاتف. */
.home-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.home-col { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
/* الأقسام جوه أعمدة home-layout كتستعمل gap ديال الحاوية بدل margin
   ديالها العادية (اللي غادي تكرر نفس المسافة مرتين). */
.home-col > .section { margin: 0; }

@media (min-width: 1024px) {
  .home-layout {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(250px, 310px);
    align-items: start;
    gap: var(--space-lg);
  }
}

/* عمود "البطولات"/"التوقعات" الجانبي: شبكة عمودية بطاقة فكل سطر
   (بدل 2-6 أعمدة أفقية كيما فـ الصفحة الرئيسية العادية) — العمود
   نفسه ضيق (190-310px)، فبطاقات أفقية متعددة ماغادش تبان مزيان فيه. */
@media (min-width: 1024px) {
  .popular-leagues-grid-vertical,
  .grid-predictions-vertical {
    grid-template-columns: 1fr !important;
  }
  .popular-leagues-grid-vertical .popular-league-card {
    flex-direction: row;
    text-align: start;
    padding: 10px 12px;
  }
}

/* ============================================================
   Popular Leagues (الصفحة الرئيسية) — شبكة شرائح أنيقة بشعارات
   ============================================================ */
.popular-leagues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .popular-leagues-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .popular-leagues-grid { grid-template-columns: repeat(6, 1fr); } }

.popular-league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.popular-league-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.popular-league-logo { width: clamp(32px, 6vw, 42px); height: clamp(32px, 6vw, 42px); object-fit: contain; }
.popular-league-name { font-size: 0.78rem; font-weight: 600; line-height: 1.3; }

/* ── Container Query (تحسين تدريجي) ──────────────────────────────
   الكارت كيصير "query container" لنفسه (container-type: inline-size)
   — يعني كيتصرف حسب المساحة الحقيقية اللي وصلاتو (بعد ما القسّمها
   Grid على عدد الأعمدة)، ماشي حسب عرض الشاشة العام فقط. الفرق
   عمليّاً: بطاقة داخل شبكة بعمودين على تابلت (300px+ للكارت) كتبقى
   بحجمها العادي، بينما نفس البطاقة داخل شبكة ب6 أعمدة على نفس
   التابلت (كارت أصغر بزاف) كتتقلص تلقائياً — Media Query وحدها ما
   تقدرش تفرّق بين هاد الحالتين لأن عرض الشاشة نفسه فكلتا الحالتين.
   @supports كضمان تدرّج: المتصفحات القديمة كتبقى تخدم بالحجم العادي
   (clamp فوق ديما كافي)، بلا كسر أي حاجة. */
@supports (container-type: inline-size) {
  .popular-league-card { container-type: inline-size; }
  @container (max-width: 92px) {
    .popular-league-logo { width: 26px; height: 26px; }
    .popular-league-name { font-size: 0.68rem; }
  }
}

/* ============================================================
   لمسات عامة: مسافات، ظلال وحركات انتقالية أكثر احترافية
   ============================================================ */
/* .section margin موحّدة أعلى الملف (var(--space-xl)) — القيمة
   السائلة كافية لكل حجم شاشة، بلا حاجة لتكرارها هنا. */
.hero { box-shadow: var(--shadow); }
.match-card, .prediction-card, .betting-card, .popular-league-card,
.league-match-card, .recent-card, .ai-card, .account-section {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .match-card, [data-theme="light"] .prediction-card,
[data-theme="light"] .betting-card, [data-theme="light"] .popular-league-card,
[data-theme="light"] .league-match-card, [data-theme="light"] .recent-card,
[data-theme="light"] .ai-card, [data-theme="light"] .account-section {
  box-shadow: 0 2px 10px rgba(20, 40, 30, 0.06);
}
.match-card:hover, .league-match-card:hover, .recent-card:hover,
.prediction-card:hover, .betting-card:hover, .popular-league-card:hover, .ai-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.btn:active { transform: scale(0.97); }
.tab { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.see-all { transition: opacity .15s ease; }
.see-all:hover { opacity: 0.75; }

/* ── دخول تدريجي خفيف للبطاقات عند ظهورها (Skeleton → محتوى حقيقي)
   — إحساس أكثر حيوية بلا مبالغة، ومحيّد بالكامل لمن يفضّل تقليل
   الحركة (prefers-reduced-motion، شوف الأعلى). ───────────────── */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.grid > .match-card, .grid > .prediction-card, .grid > .betting-card,
.grid > .league-match-card, .popular-leagues-grid > .popular-league-card,
.player-stat-list > .player-stat-row {
  animation: cardFadeIn .35s ease both;
}
.grid > *:nth-child(2), .popular-leagues-grid > *:nth-child(2), .player-stat-list > *:nth-child(2) { animation-delay: .03s; }
.grid > *:nth-child(3), .popular-leagues-grid > *:nth-child(3), .player-stat-list > *:nth-child(3) { animation-delay: .06s; }
.grid > *:nth-child(4), .popular-leagues-grid > *:nth-child(4), .player-stat-list > *:nth-child(4) { animation-delay: .09s; }
.grid > *:nth-child(5), .popular-leagues-grid > *:nth-child(5), .player-stat-list > *:nth-child(5) { animation-delay: .12s; }
.grid > *:nth-child(6), .popular-leagues-grid > *:nth-child(6), .player-stat-list > *:nth-child(6) { animation-delay: .15s; }
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
  scroll-snap-align: start;
}
.tab:hover { color: var(--text); border-color: var(--green); }
.tab.active { background: var(--green); color: #04150C; border-color: var(--green); font-weight: 600; }
.tab.active:hover { color: #04150C; }
.league-logo {
  width: 24px;
  height: 24px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── تصفح "كل الدوريات العالمية" — قائمة موسّعة (Accordion) ──────
   قارة ← دولة ← دوريات، كلشي بادي وقابل للتوسيع (بطلب المستخدم). */
.leagues-browser {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.leagues-browser > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.leagues-browser > summary::-webkit-details-marker { display: none; }
.leagues-browser[open] > summary { border-bottom: 1px solid var(--border); }
.accordion-body { padding: 8px; max-height: 460px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

details.continent-acc {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--surface);
  overflow: hidden;
}
details.continent-acc > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.continent-acc > summary::-webkit-details-marker { display: none; }
details.continent-acc > summary::after {
  content: "+";
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 1rem;
}
details.continent-acc[open] > summary::after { content: "−"; }
details.continent-acc[open] > summary { border-bottom: 1px solid var(--border); }
.countries-list { padding: 6px 8px 6px 10px; }

details.country-acc {
  border-inline-start: 2px solid var(--border);
  margin: 2px 0;
}
details.country-acc > summary {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.country-acc[open] > summary { color: var(--text); }
details.country-acc > summary::-webkit-details-marker { display: none; }
.country-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.leagues-list { padding: 2px 6px 8px 20px; display: flex; flex-direction: column; gap: 3px; }

.league-acc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: start;
  width: 100%;
}
.league-acc-item:hover { background: var(--surface-2); }
.league-acc-item.active { background: var(--green-soft); color: var(--green); font-weight: 600; }
.league-logo-xs { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

.acc-loading { padding: 10px; font-size: 0.78rem; color: var(--text-dim); }

.league-current-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.league-logo-lg {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
}

.league-view-pane { margin-top: 4px; }
.standings-group { margin-bottom: 18px; }
.group-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  margin: 0 0 8px;
  color: var(--text-dim);
}

/* ============================================================
   Account page
   ============================================================ */
.account-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.account-section h2 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 10px; }
.muted { color: var(--text-dim); font-size: 0.85rem; }
.fav-list { margin: 0; padding-inline-start: 18px; }
.fav-list li { margin-bottom: 6px; line-height: 1.6; }
.fav-list li:last-child { margin-bottom: 0; }

/* ── تنويه بارز (مثلاً "لا نضمن نتائج المباريات") داخل صفحات ثابتة
   (من نحن/إخلاء المسؤولية) — حدود ذهبية بدل الحدود العادية، بلا
   الحاجة لأي كلاس أو مكوّن جديد غير هاد الـ variant الخفيف. ────── */
.account-section-notice {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--surface), rgba(255, 200, 87, 0.06));
}
.account-section-notice h2 { color: var(--gold); }

.switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
.switch-row input { width: 20px; height: 20px; accent-color: var(--green); }

.select-input {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
}

/* ============================================================
   Loader / Empty / Skeleton
   ============================================================ */
.loader { display: flex; gap: 6px; justify-content: center; padding: 60px 0; }
.loader-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  animation: bounce 1s infinite ease-in-out;
}
.loader-dot:nth-child(2) { animation-delay: .15s; }
.loader-dot:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

.empty-state { text-align: center; padding: 30px 10px; color: var(--text-dim); grid-column: 1/-1; }

.skeleton-card {
  height: 130px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── skeleton-card-detailed: خطوط داخلية بحال بطاقة حقيقية (اسم
   فريق، نتيجة، وقت)، بدل مربع فارغ بحال قبل — إحساس أوضح إنه
   محتوى قادم، وليس مجرد "تحميل عام". ─────────────────────────── */
.skeleton-card-detailed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}
.skel-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .skel-line { background: rgba(10, 30, 20, 0.06); }
.skel-line-sm { width: 35%; }
.skel-line-md { width: 60%; }
.skel-line-lg { width: 85%; height: 16px; }

.skeleton-strip { height: 92px; min-width: 230px; flex-shrink: 0; }
.skeleton-row { height: 56px; margin-bottom: 8px; }
.skeleton-row:last-child { margin-bottom: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  background: var(--surface);
}
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 28px 16px; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; margin-bottom: 14px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 16px;
}
.footer-links a {
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: color .15s ease;
}
.footer-links a:hover { color: var(--green); }
.footer-badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.footer-badges .telegram-btn { width: auto; height: auto; border-radius: 100px; padding: 8px 14px; display: flex; gap: 6px; align-items: center; }
.footer-disclaimer { font-size: 0.78rem; color: var(--text-dim); max-width: 60ch; margin: 0 auto 10px; }
.footer-copy { font-size: 0.72rem; color: var(--text-dim); margin: 0; }

/* ============================================================
   League Details — رابط "صفحة الدوري" فوق جدول الترتيب
   ============================================================ */
.league-current-head { flex-wrap: wrap; }
.league-details-link {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}
.league-details-link:hover { text-decoration: underline; }

.match-league-link { color: inherit; text-decoration: none; }
.match-league-link:hover { color: var(--green); }

/* ============================================================
   League Details — رأس صفحة تفاصيل الدوري
   ============================================================ */
.league-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 25%, var(--green-soft), transparent 50%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  padding: 22px 22px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.league-hero-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.league-logo-hero {
  width: clamp(84px, 10vw, 96px);
  height: clamp(84px, 10vw, 96px);
  object-fit: contain;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  flex-shrink: 0;
  padding: 6px;
}
.league-hero-skeleton { width: 100%; height: 96px; }
.league-hero-text { flex: 1; min-width: 160px; }
.league-hero-text h1 { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.7rem); margin: 0; }
.league-hero-country { color: var(--text-dim); font-size: 0.9rem; margin: 4px 0 0; }
.league-hero-link { flex-shrink: 0; }

.team-logo-placeholder {
  background: var(--surface-2);
  border-radius: 50%;
}

/* ============================================================
   League Details — قسم "آخر 5 مباريات" (Cards صغيرة أنيقة)
   ============================================================ */
.recent-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.recent-strip .empty-state { min-width: 100%; }
@media (min-width: 900px) {
  .recent-strip { display: grid; grid-template-columns: repeat(5, 1fr); overflow-x: visible; }
}

.recent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 230px;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: border-color .15s ease, transform .15s ease;
}
.recent-card:hover { border-color: var(--green); transform: translateY(-2px); }
@media (min-width: 900px) { .recent-card { min-width: 0; } }

.recent-date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
}
.recent-row { display: flex; flex-direction: column; gap: 8px; }
.recent-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  min-width: 0;
}
.recent-team-away { flex-direction: row-reverse; text-align: start; }
/* FIX: نفس مشكل match-card — نضمنو سطر واحد + "…" بدل تكسر الاسم. */
.recent-team-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-logo-md { width: clamp(24px, 5vw, 28px); height: clamp(24px, 5vw, 28px); object-fit: contain; flex-shrink: 0; }
.recent-score {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  font-size: 0.95rem;
  padding: 4px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

.result-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.result-win { background: var(--green-soft); color: var(--green); }
.result-loss { background: rgba(255, 84, 112, 0.14); color: var(--red); }
.result-draw { background: var(--surface-2); color: var(--text-dim); }

/* ============================================================
   League Details — كارد مباراة كبير (اليوم / القادمة / السابقة)
   شعارات مكبّرة عن match-card العادية
   ============================================================ */
.league-match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .15s ease, transform .15s ease;
}
.league-match-card:hover { border-color: var(--green); transform: translateY(-2px); }
.league-match-card.is-live { border-color: var(--red); }

.league-match-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.league-match-date { font-family: var(--font-mono); }

.match-status-pill {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-mono);
}
.status-finished { background: var(--surface-2); color: var(--text-dim); }
.status-scheduled { background: var(--green-soft); color: var(--green); }

.league-match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.league-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.team-logo-lg { width: clamp(36px, 7vw, 44px); height: clamp(36px, 7vw, 44px); object-fit: contain; flex-shrink: 0; }
/* FIX: نفس مشكل match-card — سطر واحد + "…" عوض تكسر الاسم لعدة أسطر. */
.league-team-name {
  display: block;
  max-width: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
}

/* روابط "الكاردات" اللي بقات محولة لـ <a> (match-card, league-match-card,
   recent-card) خاصها ترجع تبان بحال div عادي، بلا تنسيق الروابط
   الافتراضي (تحته خط، لون أزرق...). */
a.match-card, a.league-match-card, a.recent-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   Match Details — رأس صفحة تفاصيل المباراة
   ============================================================ */
.match-header-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, var(--green-soft), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  padding: 20px 12px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.match-header-league {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-bottom: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* الفريقان + النتيجة فـ 3 أعمدة (فريق | نتيجة | فريق) بواسطة Grid
   بدل Flex+wrap: كيضمن أن الفريقين يبقاو دائماً فنفس المستوى
   الأفقي، بنفس حجم الشعار ونفس محاذاة الاسم، حتى فالشاشات الضيقة
   جداً (بلا خطر "فك" الصف وتحويل فريق لسطر تحت الآخر). */
.match-header-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 6px;
}
.match-header-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.match-header-team strong {
  display: block;
  max-width: 100%;
  font-size: clamp(0.72rem, 3.2vw, 0.92rem);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-logo-hero {
  width: clamp(44px, 13vw, 64px);
  height: clamp(44px, 13vw, 64px);
  object-fit: contain;
}
.match-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 0 4px;
}
.match-header-score {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 7vw, 2rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.match-header-status {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 8px;
}
.match-header-status.is-live { color: var(--red); font-weight: 700; }
/* شارة "🔴 مباشر 42'" كـ كبسولة ملوّنة أسفل النتيجة مباشرة — نفس
   لغة التصميم ديال بطاقات المباريات، بمقاس أكبر شوية يناسب الرأس. */
.match-header-status .live-time-badge {
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.match-header-status .live-time-badge:not(.live-time-finished):not(.live-time-paused) {
  background: color-mix(in srgb, var(--red) 14%, transparent);
}
.match-header-status .live-time-badge.live-time-finished { background: var(--green-soft); }
.match-header-status .live-time-badge.live-time-paused { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.match-header-venue {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* هاتف ضيق جداً (أقل من 360px): مسافات وحشو أصغر باش الرأس يبقى
   متوازن ومريح بلا ازدحام. */
@media (max-width: 359px) {
  .match-header-card { padding: 16px 8px; }
  .match-header-teams { gap: 2px; }
  .match-header-team { gap: 6px; }
  .match-header-center { min-width: 58px; padding: 0 2px; }
  .match-header-score { font-size: 1.2rem; }
}

/* ============================================================
   Match Details — الأهداف والبطاقات (Timeline بسيط)
   ============================================================ */
.events-list { display: flex; flex-direction: column; gap: 10px; }
.event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.event-minute {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  min-width: 38px;
  text-align: center;
  flex-shrink: 0;
}
.event-icon { font-size: 1.1rem; flex-shrink: 0; }
.event-body { flex: 1; font-size: 0.85rem; }
.event-type-label { color: var(--text-dim); font-size: 0.75rem; margin-inline-start: 4px; }
.event-sub { color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; }
.event-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.team-logo-xs { width: 16px; height: 16px; object-fit: contain; }

/* ============================================================
   Match Details — إحصائيات المباراة (Bars مقارنة)
   ============================================================ */
.stats-block { display: flex; flex-direction: column; gap: 14px; }
.stat-row { display: flex; align-items: center; gap: 10px; }
.stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 34px;
  text-align: center;
  flex-shrink: 0;
}
.stat-bar-wrap { flex: 1; }
.stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 5px;
  text-align: center;
}
.stat-bar {
  display: flex;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-2);
}
.stat-bar-home { background: var(--green); }
.stat-bar-away { background: var(--gold); }

/* ============================================================
   Match Details — التشكيلات (Lineups)
   ============================================================ */
.lineups-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .lineups-grid { grid-template-columns: repeat(2, 1fr); } }

.lineup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.lineup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lineup-formation {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.lineup-coach { font-size: 0.78rem; color: var(--text-dim); margin: 4px 0 12px; }
.lineup-subtitle {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 12px 0 6px;
}
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.player-list li:last-child { border-bottom: none; }
.player-number {
  font-family: var(--font-mono);
  color: var(--text-dim);
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.player-name { flex: 1; }
.player-pos {
  font-size: 0.66rem;
  color: var(--text-dim);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* ============================================================
   Match Details — الغيابات والإصابات
   ============================================================ */
.injuries-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.injuries-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.injury-player { font-weight: 600; }
.injury-team { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.75rem; }
.injury-reason {
  font-size: 0.72rem;
  color: var(--red);
  background: rgba(255, 84, 112, 0.14);
  padding: 2px 8px;
  border-radius: 100px;
}

/* ============================================================
   البحث العام (Overlay) — دوري/فريق/لاعب
   ============================================================ */
.search-lock-scroll { overflow: hidden; }

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 6, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }

.search-panel {
  width: 100%;
  max-width: 560px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform .2s ease;
}
.search-overlay.is-open .search-panel { transform: translateY(0); }

.search-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-icon { font-size: 1rem; flex-shrink: 0; opacity: 0.7; }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.search-input::placeholder { color: var(--text-dim); }
.search-close { width: 32px; height: 32px; flex-shrink: 0; }

.search-results {
  overflow-y: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}
.search-hint { text-align: center; color: var(--text-dim); font-size: 0.85rem; padding: 24px 10px; margin: 0; }
.search-hint-error { color: var(--red); }

/* رسالة "الحد الأقصى 15 كلمة" — تبان تحت خانة البحث مباشرة، صغيرة
   وبلا مبالغة، وتختفي وحدها بعد لحظات (شوف showWordLimitMessage
   فـ js/components/search.js). */
.search-limit-msg {
  margin: 0;
  padding: 4px 16px 0;
  font-size: 0.72rem;
  color: var(--gold);
  text-align: center;
}
.search-loading { display: flex; gap: 6px; justify-content: center; padding: 30px 0; }

.search-result-section { margin-bottom: 10px; }
.search-result-section h4 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 8px 6px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background-color .12s ease;
}
a.search-result-item:hover { background: var(--green-soft); }
.search-result-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.search-result-logo-round { border-radius: 50%; }
.search-result-logo-placeholder {
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.search-result-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.search-result-info strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-info span { font-size: 0.72rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-toggle { font-size: 0.95rem; }

@media (max-width: 480px) {
  .search-overlay { padding: 0; align-items: stretch; }
  .search-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; }
}

/* ============================================================
   نافذة التحقق من العمر (Age Verification Gate)
   ============================================================ */
.agegate-lock-scroll { overflow: hidden; }

.agegate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 6, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
}

.agegate-panel {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
  text-align: center;
  animation: cardFadeIn .3s ease both;
}

.agegate-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green);
  color: #04150C;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  box-shadow: 0 0 0 6px var(--green-soft);
}

.agegate-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 14px;
}

.agegate-text {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
.agegate-text-strong { color: var(--text); font-weight: 600; }

.agegate-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.agegate-actions-stack { flex-direction: column; }
.agegate-actions-stack .btn { width: 100%; }
.agegate-agree { order: 1; }
.agegate-decline { order: 2; }

.agegate-blocked .agegate-title { color: var(--red); }

/* ============================================================
   شارة حالة المباراة اللحظية (Live Time Badge) — دقيقة حقيقية
   بدل الرمز الخام (1H/2H)، مع نبض خفيف للنقطة الحمراء فقط.
   ============================================================ */
.live-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
  color: var(--red);
}
.live-time-badge-sm { font-size: 0.68rem; }
.live-time-badge-lg { font-size: 0.95rem; margin-top: 4px; }

.live-dot-pulse {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.live-time-paused { color: var(--gold); }
.live-time-finished { color: var(--green); }

/* ============================================================
   صفحة "مقارنة الفرق" (Compare Teams) — الصفحة الأهم فالموقع
   ============================================================ */
.compare-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .compare-pickers { grid-template-columns: 1fr; }
}
.compare-vs {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  padding: 0 6px;
}
.compare-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}
.compare-picker-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.compare-picker-input-wrap { position: relative; }
.compare-picker-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 0.88rem;
}
.compare-picker-input:focus { outline: none; border-color: var(--green); }
.compare-picker-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 260px;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.compare-picker-result {
  width: 100%;
  display: flex;
  cursor: pointer;
}
.compare-picker-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.compare-picker-selected strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-picker-browse {
  width: 100%;
  margin-top: 10px;
  font-size: 0.78rem;
  padding: 8px 10px;
}

.compare-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .compare-heads { grid-template-columns: 1fr; }
}
.compare-team-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.compare-team-rank {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--green);
}

.compare-stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare-stat-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
}
.compare-stat-values strong { font-family: var(--font-mono); }
.compare-stat-values strong:first-child { text-align: start; }
.compare-stat-values strong:last-child { text-align: end; }
.compare-stat-label {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.72rem;
}
.compare-stat-track {
  display: flex;
  height: 6px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-2);
  margin-top: 6px;
}
.compare-stat-fill { height: 100%; }
.compare-stat-fill-a { background: var(--green); }
.compare-stat-fill-b { background: var(--gold); }

.compare-stats-note {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 10px;
}

/* ── جدول "توقعات المباراة" (Match Predictions) ──────────────── */
.prediction-market-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.prediction-market-wide { margin-bottom: 14px; }
.prediction-market-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.prediction-market-head span { font-size: 1.05rem; }

.prediction-markets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .prediction-markets-grid { grid-template-columns: 1fr 1fr; }
}

.prediction-market-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--green);
}
.prediction-market-value small { font-size: 0.7rem; font-weight: 500; color: var(--text-dim); margin-inline-start: 4px; }
.prediction-market-confidence {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.gauge-track-xs { height: 5px; }
.prediction-market-na { opacity: 0.6; }
.prediction-market-na-text { font-size: 0.72rem; color: var(--text-dim); margin: 0; }

/* توقع الفائز (1/X/2) */
.compare-outcome-values {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.compare-outcome-values strong { display: block; font-family: var(--font-mono); font-size: 1rem; }
.compare-outcome-values span { color: var(--text-dim); font-size: 0.68rem; }
.compare-outcome-track {
  display: flex;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-2);
}
.compare-outcome-fill { height: 100%; }
.compare-outcome-fill-a { background: var(--green); }
.compare-outcome-fill-draw { background: var(--gold); }
.compare-outcome-fill-b { background: var(--red); }

/* فرصة مزدوجة (1X / X2 / 12) */
.compare-double-chance {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  text-align: center;
}
.compare-double-chance > div {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 4px;
}
.compare-double-chance strong { display: block; font-family: var(--font-mono); font-size: 1.05rem; color: var(--green); }
.compare-double-chance span { font-size: 0.68rem; color: var(--text-dim); }

/* ── مساحات الإعلانات (Ad Slots) ─────────────────────────────────
   فارغة بلا محتوى = مخفية بالكامل (:empty)، بلا أي أثر على
   التصميم أو الأداء. كي يتعمّر الـ div بكود إعلان حقيقي، كيبان
   تلقائياً بإطار خفيف يميّزو عن باقي المحتوى. */
.ad-slot:empty { display: none; }
.ad-slot:not(:empty) {
  margin: 20px 0;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.grid .ad-slot:not(:empty) { grid-column: 1 / -1; }

/* ============================================================
   محرك التوقعات (Prediction Engine) — قسم "توقع الذكاء الاصطناعي"
   فصفحة تفاصيل المباراة (js/engine/render.js)
   ============================================================ */
.ai-predict-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ai-predict-cta .muted { max-width: 56ch; margin: 0; }

.ai-reasoning-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-top: 14px;
}
.ai-reasoning-title { font-family: var(--font-display); font-size: 0.95rem; margin: 0 0 10px; }
.ai-reasoning-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.ai-reasoning-list li { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
.ai-reasoning-disclaimer {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  line-height: 1.6;
}

/* بادج "جودة البيانات" (dataQuality) — أعلى نتيجة التوقع مباشرة */
.data-quality-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.data-quality-icon { font-size: 1.1rem; }
.data-quality-text { display: flex; flex-direction: column; gap: 2px; }
.data-quality-text strong { font-size: 0.82rem; }
.data-quality-text span { font-size: 0.7rem; color: var(--text-dim); }
.data-quality-high { border-inline-start: 3px solid var(--green); }
.data-quality-mid { border-inline-start: 3px solid var(--gold); }
.data-quality-low { border-inline-start: 3px solid var(--red); }

/* ============================================================
   متصفح الفرق الهرمي (Team Browser) — js/components/team-browser.js
   نفس بنية .search-overlay/.search-panel (overlay واحد قابل لإعادة
   الاستعمال)، لكن بـ classes خاصة بيه (browser-*) باش ما يتصادمش
   مع البحث العام. البطاقات (.browser-card) نفس عائلة .popular-league-card
   الموجودة فالصفحة الرئيسية — تصميم موحّد فكل مستويات التصفح
   (قارة/دولة/بطولة/فريق) بحال ما طلب المستخدم.
   ============================================================ */
.browser-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 6, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.browser-overlay.is-open { opacity: 1; pointer-events: auto; }

.browser-panel {
  width: 100%;
  max-width: 680px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform .2s ease;
}
.browser-overlay.is-open .browser-panel { transform: translateY(0); }

.browser-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.browser-back {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: 1rem;
}
.browser-close { width: 32px; height: 32px; flex-shrink: 0; }

.browser-breadcrumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.browser-breadcrumb::-webkit-scrollbar { display: none; }
.browser-crumb {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background-color .12s ease, color .12s ease;
}
.browser-crumb:hover { background: var(--surface-2); color: var(--text); }
.browser-crumb-current { color: var(--green); font-weight: 600; }
.browser-crumb-sep { color: var(--text-dim); opacity: 0.5; font-size: 0.75rem; flex-shrink: 0; }

.browser-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.browser-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}
.browser-search-input::placeholder { color: var(--text-dim); }

.browser-body {
  overflow-y: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}
.browser-empty { text-align: center; color: var(--text-dim); font-size: 0.85rem; padding: 30px 10px; margin: 0; }

/* شبكة البطاقات — نفس منطق popular-leagues-grid (2 عمود فالهاتف،
   يزيد فالشاشات الكبيرة)، مع انتقال fade-in خفيف عند كل تغيير مستوى. */
.browser-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .browser-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .browser-cards-grid { grid-template-columns: repeat(4, 1fr); } }

.browser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px 14px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  animation: cardFadeIn .3s ease both;
}
[data-theme="light"] .browser-card { box-shadow: 0 2px 10px rgba(20, 40, 30, 0.06); }
.browser-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.browser-card-media { display: flex; align-items: center; justify-content: center; height: 42px; }
.browser-card-logo { width: clamp(34px, 6vw, 42px); height: clamp(34px, 6vw, 42px); object-fit: contain; }
.browser-card-emoji { font-size: 1.6rem; line-height: 1; }
.browser-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.browser-card-sub { font-size: 0.68rem; color: var(--text-dim); }
.browser-card-arrow {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  color: var(--text-dim);
  font-size: 0.9rem;
  opacity: 0.6;
}
[dir="rtl"] .browser-card-arrow { transform: scaleX(-1); }

/* ── Container Query (نفس مبدأ .popular-league-card فوق) — الكارت
   كيتكيف حسب مساحتو الحقيقية داخل الشبكة (2/3/4 أعمدة)، ماشي حسب
   عرض الشاشة فقط. */
@supports (container-type: inline-size) {
  .browser-card { container-type: inline-size; }
  @container (max-width: 92px) {
    .browser-card-logo, .browser-card-media { width: 26px; height: 26px; }
    .browser-card-name { font-size: 0.68rem; }
    .browser-card-arrow { display: none; }
  }
}

.browser-card-skeleton {
  height: 96px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

[data-theme="dark"] .lang-select option {
  background: #161F1B;
  color: #EAF3EE;
}

[data-theme="light"] .lang-select option {
  background: #FFFFFF;
  color: #111111;
}