/* موقع "ملك التوقعات" العام.
 *
 * نفس رموز الهوية المستعملة في التطبيق (mobile/lib/brand.dart)
 * ولوحة التحكم (admin/src/theme.css) — لون واحد وخط واحد وقواعد
 * واحدة في المنتج كله. زائر الموقع ثم مستخدم التطبيق يجب أن يشعر
 * أنه في المكان نفسه.
 *
 * قواعد الاستعمال الثلاث كما في ملف الهوية:
 *  1. الذهبي للتاج والنقاط والرتب فقط — لا للأزرار ولا كخلفية واسعة.
 *  2. الأخضر للصح والتأكيد فقط، ولا يتشارك مع الذهبي في بطاقة واحدة.
 *  3. لا لون ثالث داخل العلامة: الحفر بلون السطح الذي تجلس عليه.
 */

:root {
  /* أسود/أبيض حيادي — نفس انتقال الهوية في التطبيق (2026-08-31):
   * الخلفية سوداء بلا درجة خضراء، والزر الأساسي أبيض بنص أسود.
   * الذهبي والأخضر بقيا رمزين دلاليين لا لوني واجهة. */
  --night: #0a0a0a;
  --surface: #161616;
  --crown: #f2c14e;
  --correct: #12e07e;
  --wrong: #ff5a4e;
  --text: #f5f5f5;
  --text-muted: #a1a1a1;
  --text-faint: #6b6b6b;
  --on-accent: #0a0a0a;

  /* الزر الأساسي: أبيض على الثيم الداكن، أسود على الفاتح —
   * أعلى تباين ممكن بلا صراخ لوني. */
  --btn: #ffffff;
  --btn-hover: #e6e6e6;
  --on-btn: #0a0a0a;
  --topbar: rgba(10, 10, 10, 0.86);
  --focus-ring: rgba(255, 255, 255, 0.14);

  --fill: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --crown-wash: rgba(242, 193, 78, 0.13);
  --crown-line: rgba(242, 193, 78, 0.3);

  --font-display: 'Readex Pro', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  --wrap: 1080px;
}

/* ═══════════════ الثيم الفاتح ═══════════════
 *
 * قواعد الهوية الثلاث تبقى كما هي — الذهبي للرتب، والأخضر للصح،
 * ولا لون ثالث في العلامة. المتغيّر وحده القيم لا القواعد.
 *
 * لكن لونين لا يُنقلان كما هما: الأخضر #12e07e والذهبي #f2c14e
 * صُمّما ليلمعا على خلفية ليلية، وعلى الأبيض يفقدان التباين فيصير
 * الرقم المهم أضعف ما في الصفحة. لهما هنا نسختان أغمق للنص، بينما
 * تبقى النسخة الأصلية للتعبئة (زر، شريحة نشطة) حيث النص فوقها داكن.
 *
 * والخلفية ليست بيضاء نقية: #f6f8f7 يخفّض وهج الشاشة ويجعل حواف
 * البطاقات البيضاء مرئية بلا حدود ثقيلة.
 */
:root[data-theme="light"] {
  --night: #f7f7f7;
  --surface: #ffffff;
  --crown: #9a6f14;
  --correct: #0a8f4d;
  --wrong: #c8352a;
  --text: #111111;
  --text-muted: #555555;
  --text-faint: #8a8a8a;
  --on-accent: #ffffff;

  --btn: #111111;
  --btn-hover: #2b2b2b;
  --on-btn: #ffffff;
  --topbar: rgba(247, 247, 247, 0.86);
  --focus-ring: rgba(17, 17, 17, 0.12);

  --fill: rgba(17, 17, 17, 0.04);
  --border: rgba(17, 17, 17, 0.11);
  --crown-wash: rgba(242, 193, 78, 0.18);
  --crown-line: rgba(154, 111, 20, 0.28);
}

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

html {
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* الأرقام جدولية حيثما ظهرت في سياق مقارنة */
.num {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
}

a {
  color: var(--correct);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

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

/* ============================ الترويسة ============================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--topbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.brand:hover {
  text-decoration: none;
}

.topnav {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

.topnav a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
}

.topnav a:hover {
  color: var(--text);
  background: var(--fill);
  text-decoration: none;
}

/* التبويب النشط أبيض على تعبئة رمادية — تمييز حالة لا رتبة،
 * فالذهبي محجوز للملكية. */
.topnav a.active {
  color: var(--text);
  background: var(--fill);
}

/* ============================ الواجهة ============================ */

.hero {
  padding: 76px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* توهّج ذهبي خافت خلف العلامة. مسموح لأنه ليس خلفية مصمتة واسعة
 * بل إضاءة تحت الشعار مباشرة — نفس ما يفعله ملف الهوية. */
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(242, 193, 78, 0.16), transparent);
  pointer-events: none;
}

.hero-badge {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 27px;
  background: var(--surface);
  border: 1px solid var(--crown-line);
  display: grid;
  place-items: center;
  position: relative;
}

.hero h1 {
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -0.01em;
}

.hero .tagline {
  color: var(--crown);
  font-family: var(--font-display);
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  margin-top: 10px;
}

.hero .lede {
  color: var(--text-muted);
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 16px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

/* الزر الأساسي أبيض بنص أسود — أعلى تباين على الثيم الأسود.
 * الأخضر بقي دلالياً (توقع صحيح/تأكيد) والذهبي للملكية. */
.btn-primary {
  background: var(--btn);
  color: var(--on-btn);
}

.btn-primary:hover {
  background: var(--btn-hover);
  text-decoration: none;
}

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--fill);
  border-color: var(--text-faint);
  text-decoration: none;
}

/* ============================ الأقسام ============================ */

section {
  padding: 56px 0;
}

.section-label {
  color: var(--crown);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(22px, 4vw, 30px);
  margin-bottom: 8px;
}

.section-sub {
  color: var(--text-muted);
  max-width: 620px;
  margin-bottom: 30px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}

.card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.card p {
  color: var(--text-muted);
  font-size: 14.5px;
}

.card .kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--correct);
  background: rgba(18, 224, 126, 0.13);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 11px;
}

/* سلّم الرتب — الذهبي هنا في محله: الرتب هي ما تحجزه الهوية له */
.ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}

.rank {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
}

.rank.king {
  border-color: var(--crown-line);
  background: linear-gradient(180deg, var(--crown-wash), var(--surface) 70%);
}

.rank .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--crown);
}

.rank .range {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rank .perk {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 7px;
}

/* ============================ صفحات المحتوى ============================ */

.page {
  padding: 46px 0 20px;
}

.page h1 {
  font-size: clamp(26px, 5vw, 36px);
}

.page .updated {
  color: var(--text-faint);
  font-size: 13px;
  margin-top: 8px;
}

/* المحتوى الآتي من لوحة التحكم. مساحته محدودة بـ 46rem لأن السطر
 * الطويل يتعب العين — والقاعدة أوضح في العربية حيث لا حروف كبيرة
 * تساعد على تتبّع بداية السطر التالي. */
.prose {
  max-width: 46rem;
  margin-top: 26px;
  font-size: 16px;
}

.prose h2 {
  font-size: 21px;
  margin: 32px 0 10px;
}

.prose h3 {
  font-size: 17px;
  margin: 24px 0 8px;
  color: var(--crown);
}

.prose p {
  margin-bottom: 15px;
  color: var(--text-muted);
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-inline-start: 22px;
  color: var(--text-muted);
}

.prose li {
  margin-bottom: 7px;
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

.prose a {
  text-decoration: underline;
}

/* ============================ اتصل بنا ============================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
  margin-top: 26px;
}

.field {
  margin-bottom: 13px;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--night);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
}

input:focus,
textarea:focus {
  /* التركيز حالة تفاعل عادية: حد بلون النص وهالة خفيفة —
   * الألوان الدلالية محجوزة لمعانيها. */
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

button.btn {
  cursor: pointer;
  font-size: 14.5px;
}

.note {
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 18px;
}

.note.ok {
  background: rgba(18, 224, 126, 0.12);
  color: var(--correct);
}

.note.bad {
  background: rgba(255, 90, 78, 0.12);
  color: var(--wrong);
}

/* تحذير: العملية نجحت وجزء منها لم يُطبَّق. لونه لون التاج لا
   لون الخطأ — الأحمر يقول "أعد المحاولة" وليس ثمة ما يُعاد. */
.note.warn {
  background: var(--crown-wash);
  color: var(--crown);
}

.contact-side .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.contact-side .row:last-child {
  border-bottom: none;
}

.contact-side .row .k {
  color: var(--text-faint);
  font-size: 13px;
  min-width: 74px;
}

/* ============================ التذييل ============================ */

.footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 38px 0 46px;
}

.footer-top {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.footer .about {
  max-width: 330px;
}

.footer .about p {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 10px;
}

.foot-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.foot-col h4 {
  font-size: 12.5px;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 10px;
}

.foot-col a,
.foot-col span {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  padding: 3px 0;
}

.foot-col a:hover {
  color: var(--text);
  text-decoration: none;
}

.social {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.social a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--fill);
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.social a:hover {
  background: var(--crown-wash);
  color: var(--crown);
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 13px;
}

/* ============================ الشاشات الضيقة ============================ */

@media (max-width: 760px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .topbar .wrap {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .topnav {
    margin-inline-start: 0;
    justify-content: center;
  }
  .hero {
    padding: 48px 0 40px;
  }
  section {
    padding: 42px 0;
  }
}

/* صفحات الحساب (استعادة كلمة المرور).
   عمود ضيق في الوسط: نموذج من حقلين أو ثلاثة لا يحتمل عرض الصفحة
   كاملاً — الحقل الممتد على 1200 بكسل يصعب ملؤه ويبدو خطأً. */
.auth-wrap {
  max-width: 460px;
  margin-inline: auto;
  padding-block: 40px 70px;
}
.auth-wrap h1 { font-size: 1.5rem; }
.auth-wrap h3 { font-size: 1.05rem; margin-bottom: 14px; }

/* صفوف "حسابي": نفس شكل صفوف اتصل بنا، لكن القيمة في الطرف
   المقابل لا ملاصقة للتسمية — عمود القيم المحاذى يُقرأ بنظرة
   واحدة، والملاصق يجعل "البريدali@test.com" كلمة واحدة. */
.auth-wrap .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.auth-wrap .row:last-child { border-bottom: none; }
.auth-wrap .row .k { color: var(--text-faint); font-size: 13px; }

/* زر الحذف: محدَّد لا مصمت.
   الأحمر المصمت يجذب العين ويُضغط بالخطأ، وهذا الفعل بلا تراجع.
   الحدّ يقول "خطر" لمن يقرأ، ولا ينادي من يمر. */
.btn-danger {
  background: transparent;
  color: var(--wrong);
  border-color: var(--wrong);
}
.auth-wrap .card { padding: 26px 24px; }
.auth-wrap .btn { width: 100%; justify-content: center; }

/* ═══════════════ المباريات ═══════════════ */

/* شريط الأيام: تمرير أفقي على الجوال بدل التفافه لسطرين.
   سبعة أيام لا تتسع في 375 بكسل، والالتفاف يكسر إحساس "الشريط". */
.daystrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 26px;
  scrollbar-width: none;
}
.daystrip::-webkit-scrollbar { display: none; }

.daystrip .day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 76px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.daystrip .day:hover { border-color: var(--text-faint); }
.daystrip .day.active {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--on-btn);
}
.daystrip .dw { font-size: 11.5px; opacity: .7; }
.daystrip .dl { font-size: 13.5px; font-weight: 600; }
.daystrip .dc { font-size: 11px; opacity: .6; }

/* مجموعة الدوري */
.lg { margin-bottom: 20px; }
.lg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 10px;
}
.lg-head h2 { font-size: 1rem; margin: 0; }
.lg-head img { border-radius: 4px; object-fit: contain; }
.lg-count {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--text-faint);
}
.lg-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* صف المباراة: ثلاثة أعمدة، الأوسط ثابت العرض.
   العرض الثابت يجعل كل النتائج على عمود واحد مهما طالت أسماء
   الفرق — بلا ذلك تتراقص النتيجة يميناً ويساراً بين الصفوف. */
.fx {
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}
.fx:last-child { border-bottom: none; }

.fx-side {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
/* الضيف معكوس فيلتصق شعاره بالوسط — الشعاران متقابلان حول
   النتيجة كما في شاشات النتائج المعروفة. */
.fx-away { flex-direction: row-reverse; }

.fx-name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
}
.fx-logo-fallback {
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 600;
}

.fx-center { text-align: center; }
.fx-score, .fx-time {
  font-family: var(--font-num, inherit);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* الأخضر للنتيجة الجارية وحدها: لو صُبغ كل رقم لفقد اللون معناه،
   وهو هنا يعني "يُلعب الآن". */
.fx-score.live { color: var(--correct); }
.fx-min {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.fx[data-status="live"] .fx-min { color: var(--correct); }

@media (max-width: 560px) {
  .fx { grid-template-columns: 1fr 68px 1fr; padding: 12px 10px; gap: 6px; }
  .fx-name { font-size: 13px; }
  .fx-logo { width: 26px; height: 26px; }
}

/* شريط المباريات في الرئيسية */
.strip-sec .lg-body { margin-top: 4px; }
.strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
@media (max-width: 560px) {
  .strip-head { flex-direction: column; align-items: stretch; }
  .strip-head .btn { text-align: center; justify-content: center; }
}

/* ═══════════════ الشرائح والجدول ═══════════════ */

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips .chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.chips .chip:hover { color: var(--text); border-color: var(--text-faint); }
/* الشريحة النشطة بيضاء لا ذهبية: هي أداة تصفية لا رتبة،
 * والذهبي محجوز للملكية. */
.chips .chip.active {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--on-btn);
  font-weight: 600;
}

/* رابط "الترتيب" في ترويسة الدوري */
.lg-link {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lg-link:hover { color: var(--correct); border-bottom-color: currentColor; }
.lg-head .lg-count { margin-inline-start: 12px; }

/* الجدول: يمرَّر أفقياً على الجوال بدل أن يُقلّص الأعمدة حتى
   تصير الأرقام غير مقروءة. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl th {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-faint);
  text-align: start;
  white-space: nowrap;
}
.tbl .c { text-align: center; }
.tbl .num { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.tbl .rank { color: var(--text-faint); width: 34px; }
.tbl .pts { font-weight: 700; color: var(--crown); }
.tbl .team { display: flex; align-items: center; gap: 9px; min-width: 170px; }
.tbl tbody tr:hover { background: rgba(255,255,255,.02); }

/* الفورمة: دوائر لا حروف. "WWDLW" يقرؤها من يعرف الاصطلاح وحده. */
.form { white-space: nowrap; }
.form .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-inline-start: 3px;
}
.form .dot.w { background: var(--correct); }
.form .dot.l { background: var(--wrong); }
.form .dot.d { background: var(--text-faint); }

/* ═══════════════ صفحة المباراة ═══════════════ */

.back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.back:hover { color: var(--correct); }

/* صف المباراة صار رابطاً: نعيد له شكل الصف لا شكل الرابط. */
a.fx { text-decoration: none; color: inherit; }
a.fx:hover { background: rgba(255,255,255,.025); }

/* ترويسة المباراة */
.mh { padding: 22px 20px; }
.mh-league {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.mh-round { color: var(--text-faint); }
.mh-round::before { content: '·'; margin-inline-end: 8px; }
.mh-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.mh-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
}
.mh-side .fx-logo { width: 52px; height: 52px; }
.mh-center .fx-score, .mh-center .fx-time { font-size: 30px; }
.mh-when {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}

.sec { margin-top: 16px; padding: 20px; }
.sec h2 { font-size: 1rem; margin-bottom: 16px; }

/* الأحداث: عمودان حول خط زمني.
   جانب كل حدث يقول أي فريق سجّله بلا كلمة واحدة. */
.evs { display: flex; flex-direction: column; gap: 2px; }
.ev {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ev:last-child { border-bottom: none; }
.ev-away { grid-template-columns: 46px 1fr; direction: ltr; text-align: left; }
.ev-away .ev-body { direction: rtl; align-items: flex-end; }

/* عمود لا صف: الاسم سطراً والصناعة تحته.
   كان صفاً بـ flex-wrap، فاسم طويل مع صناعة يلتفّ حرفياً في منتصف
   الاسم ("S. Mou / rino") — والالتفاف مع row-reverse في جهة الضيف
   يقلب ترتيب الأجزاء أيضاً. */
.ev-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ev-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ev-away .ev-line { flex-direction: row-reverse; }
.ev-icon { font-size: 14px; line-height: 1; }
.ev-icon.goal { color: var(--correct); }
.ev-icon.own, .ev-icon.miss, .ev-icon.red { color: var(--wrong); }
.ev-icon.yellow { color: var(--crown); }
.ev-icon.subst { color: var(--text-faint); }
.ev-name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-assist {
  font-size: 11.5px;
  color: var(--text-faint);
  /* بلا قصّ يلتف "صناعة A. Freeman" على سطرين فيصير الصف ضعف
     ارتفاع جاره، وقائمة الأحداث تبدو غير منتظمة. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ev-min { color: var(--text-faint); font-size: 12.5px; text-align: center; }

/* الإحصاءات: رقمان وشريط نسبة */
.stat { margin-bottom: 15px; }
.stat:last-child { margin-bottom: 0; }
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.stat-label { color: var(--text-muted); font-size: 12.5px; }
.stat-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--wrong);
  overflow: hidden;
  opacity: .75;
}
.stat-bar span { display: block; height: 100%; background: var(--correct); }

/* التشكيلتان */
.lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lineup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.lineup-head .num { color: var(--crown); font-size: 12.5px; }
.lineup-list { list-style: none; margin: 0; padding: 0; }
.lineup-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 13px;
}
.lineup-list .sh {
  flex: 0 0 22px;
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: center;
}
.lineup-list .sn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-list .sp { color: var(--text-faint); font-size: 10.5px; }
.lineup-coach {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* ═══════════════ الهدافون ═══════════════ */

.scorers { display: flex; flex-direction: column; gap: 10px; }
.sc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
}
.sc-rank {
  flex: 0 0 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
/* أول ثلاثة بالذهبي — نفس قاعدة الهوية: الذهبي للرتب والصدارة. */
.sc:nth-child(-n+3) .sc-rank { color: var(--crown); font-weight: 700; }
.sc-photo { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sc-main { flex: 1; min-width: 0; }
.sc-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.sc-nums { flex: 0 0 auto; text-align: center; min-width: 46px; }
.sc-goals { font-size: 19px; font-weight: 700; color: var(--crown); }
.sc-nums .num { font-size: 15px; }
.sc-cap { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }

@media (max-width: 560px) {
  .lineups { grid-template-columns: 1fr; }
  .mh-side .fx-logo { width: 42px; height: 42px; }
  .mh-center .fx-score, .mh-center .fx-time { font-size: 24px; }
  .sc-sub { display: none; }  /* الأهداف وحدها تكفي على الجوال */
  .sc-photo { display: none; }
}

/* ═══════════════ ترويسة بثلاثة أقسام ═══════════════ */

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topnav { margin-inline-start: auto; }

.topauth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.auth-link {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.auth-link:hover { color: var(--text); }

/* زر مصغّر للترويسة: نفس الزر بحجم لا يطغى على الشريط. */
.btn-sm {
  padding: 8px 16px;
  font-size: 13.5px;
  border-radius: 11px;
}

/* على الجوال: الأزرار تحت الشعار والقائمة تمرَّر أفقياً.
   إخفاء الدخول والتسجيل على الشاشة الصغيرة يخفي أهم فعلين. */
@media (max-width: 760px) {
  .topbar .wrap {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .topnav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topauth { margin-inline-start: auto; }
}

/* ═══════════════ تخطيط صفحة المباريات ═══════════════ */

/* ترويسة الصفحة: عنوان بحجم عنوان لا بحجم لافتة.
   كان يستعمل .section-title (حجم قسم تسويقي) فأخذ ثلث الشاشة
   قبل أن يرى القارئ مباراة واحدة. */
.page-head { margin-bottom: 18px; }
.page-head h1 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 4px;
}
.page-head p {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0;
}

/* عمودان: المباريات هي المحتوى، والجانب مكمّل.
   340 بكسل تكفي لجدول مصغّر ولا تزاحم أسماء الفرق في العمود
   الرئيسي. */
/* stretch لا start: العمودان يتساويان ارتفاعاً.
   كان الترتيب (عشرة صفوف) يتجاوز كتلة مباريات فيها ثلاث مباريات
   بأضعاف، فيبقى تحت المباريات فراغ طويل والصفحة تبدو مكسورة. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: stretch;
}
.col-main { min-width: 0; }

/* الجانب لا يفرض ارتفاعاً على الصف.
 *
 * المطلوب أن يتقيّد الترتيب بارتفاع كتلة المباريات لا العكس. لكن
 * صف الشبكة يأخذ ارتفاع أطول عنصر فيه، والترتيب (عشرة صفوف) أطول
 * دائماً من ثلاث مباريات — فيتمدد الصف ويبقى تحت المباريات فراغ.
 *
 * الحل: الجانب حاوية بارتفاع صفر (relative)، والبطاقة داخله
 * مطلقة تملأه. فلا يرى الصف للجانب ارتفاعاً، ويصير ارتفاعه ارتفاع
 * المباريات، والبطاقة تتبعه ويُمرَّر ما زاد.
 *
 * وحد أدنى 240 بكسل: دوري بمباراة واحدة كان سيعطي بطاقة ترتيب
 * بارتفاع صفّين — قائمة لا تُقرأ.
 */
.side {
  position: relative;
  min-height: 240px;
}
.side > .side-card {
  position: absolute;
  inset: 0;
}

/* البطاقة تملأ ارتفاع الكتلة، والقائمة وحدها تُمرَّر حين تفيض.
   الترويسة والمفتاح يبقيان ثابتين: "الكل" و"لعب/نقاط" لا يجوز أن
   يختفيا مع التمرير — الأول مخرج والثاني مفتاح قراءة الأرقام. */
.side-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.side-card .mini {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.side-card .mini::-webkit-scrollbar { width: 4px; }
.side-card .mini::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.side-head h3 { font-size: 0.95rem; margin: 0; }
.side-head a {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.side-head a:hover { color: var(--correct); }

/* الصفوف المصغّرة */
.mini { list-style: none; margin: 0; padding: 0; }
.mini li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mini li:last-child { border-bottom: none; }
.mini .fx-logo { width: 20px; height: 20px; border-radius: 4px; }
.mini-rank {
  flex: 0 0 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
}
.mini li:nth-child(-n+3) .mini-rank { color: var(--crown); font-weight: 700; }
.mini-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-pl {
  flex: 0 0 22px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
}
.mini-pts {
  flex: 0 0 26px;
  text-align: center;
  font-weight: 700;
  color: var(--crown);
  font-size: 13px;
}
.mini-legend {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-faint);
}
.mini-legend span:first-child { margin-inline-end: 2px; }

/* ── بطاقات الأيام: مضغوطة ── */
.daystrip { gap: 6px; margin-bottom: 20px; }
.daystrip .day {
  min-width: 58px;
  padding: 7px 9px;
  border-radius: 11px;
  gap: 1px;
}
.daystrip .dw { font-size: 10px; }
.daystrip .dl { font-size: 12px; }
.daystrip .dc { font-size: 10px; }

/* ── الشرائح: أصغر قليلاً لتتسع الثماني ── */
.chips { gap: 6px; margin-bottom: 14px; }
.chips .chip { padding: 6px 13px; font-size: 12.5px; }

@media (max-width: 980px) {
  /* الجانب ينزل تحت المباريات: عمود 340 بكسل بجانب عمود ضيق
     يخنق الاثنين. وحين ينزل يظهر الجدول كاملاً بلا تمرير داخلي —
     التمرير داخل عنصر يُمرَّر بدوره مزعج على الجوال. */
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* على الجوال يعود الجانب عنصراً عادياً بارتفاعه الطبيعي: التمرير
     داخل عنصر يُمرَّر بدوره مزعج، والمساحة الرأسية غير مكلفة هناك. */
  .side { position: static; min-height: 0; }
  .side > .side-card { position: static; }
  .side-card .mini { overflow-y: visible; }
}

/* مبدّل الثيم */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-faint); }

/* في الوضع الفاتح: شعارات الأندية مصممة لخلفيات فاتحة أصلاً،
   لكن حدّاً خفيفاً يفصل الشعار الأبيض عن البطاقة البيضاء. */
:root[data-theme="light"] .fx-logo,
:root[data-theme="light"] .sc-photo {
  background: #fff;
}

/* الشريط الحيّ للإحصاءات: النصف الثاني أفتح في الوضع الفاتح
   وإلا بدا الأحمر عدوانياً على أبيض. */
:root[data-theme="light"] .stat-bar { opacity: .9; }

/* تفاصيل المباراة: الملعب والحكم والشوط الأول */
.mh-soon {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--crown-wash);
  border: 1px solid var(--crown-line);
  color: var(--crown);
  font-size: 11.5px;
}
.mh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mh-facts div { text-align: center; }
.mh-facts dt {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.mh-facts dd {
  font-size: 13.5px;
  margin: 0;
  overflow-wrap: anywhere;
}

/* ═══════════════ الملعب والمواجهات ═══════════════ */

.mh-pens {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.mh-pens b { color: var(--crown); margin-inline-start: 4px; }

.lu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.lu-head .num { color: var(--crown); font-size: 12.5px; }

/* الملعب: خطوط عشب وخط منتصف.
   التدرّج يعطي إحساس العشب المقصوص بلا صورة تُحمَّل. */
.pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(18, 224, 126, 0.05) 0 26px,
      transparent 26px 52px
    ),
    var(--fill);
  min-height: 260px;
}
/* خط المنتصف: علامة الملعب الوحيدة التي تستحق الرسم — البقية
   (دوائر ومناطق جزاء) زينة تزاحم أسماء اللاعبين. */
.pitch::after {
  content: '';
  position: absolute;
  inset-inline: 8px;
  top: 50%;
  border-top: 1px dashed var(--border);
}

.prow {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.pp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.pp-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
}
.pp-name {
  font-size: 10.5px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bench { margin-top: 10px; }
.bench summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 0;
}
.bench summary:hover { color: var(--text); }
.bench .lineup-list { margin-top: 6px; }

/* المواجهات السابقة */
.h2hs { display: flex; flex-direction: column; }
.h2h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-size: 13.5px;
}
.h2h:last-child { border-bottom: none; }
.h2h:hover { background: var(--fill); }
.h2h .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.h2h .dot.w { background: var(--correct); }
.h2h .dot.l { background: var(--wrong); }
.h2h .dot.d { background: var(--text-faint); }
.h2h-date { flex: 0 0 74px; font-size: 11.5px; color: var(--text-faint); }
.h2h-teams { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-teams b { color: var(--crown); margin: 0 6px; }

/* ═══════════════ التوقّع ═══════════════ */

/* شارة الصف: صغيرة في الطرف، لا تزاحم النتيجة. */
.fx-pred {
  position: absolute;
  inset-inline-start: 10px;
  top: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--crown-wash);
  border: 1px solid var(--crown-line);
  color: var(--crown);
}
.fx-pred b { font-weight: 700; }
.fx-pred-empty {
  background: transparent;
  border-color: var(--border);
  color: var(--text-faint);
}
.fx { position: relative; }

/* بطاقة التوقّع */
.pf-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}
.pf-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  max-width: 150px;
}
.pf-team > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pf-team input {
  width: 68px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pf-team input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* أسهم input[number] تزاحم رقماً من خانتين وتُضغط بالخطأ. */
.pf-team input::-webkit-outer-spin-button,
.pf-team input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-team input { -moz-appearance: textfield; }

.pf-x { color: var(--text-faint); padding-bottom: 18px; }
.pf .btn { width: 100%; justify-content: center; }
.pf-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
}
.pf-locked {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 6px 0;
}
.pf-locked b { color: var(--crown); }

/* ═══════════════ من سيفوز؟ ═══════════════ */

.pq {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.pq-sub {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.picks {
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  gap: 8px;
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pick span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick:hover { border-color: var(--text-faint); }
/* المختار بالأخضر: قاعدة الهوية — الأخضر للصح والتأكيد.
   والذهبي محجوز للنقاط والرتب، فلا يُستعمل هنا. */
.pick.on {
  border-color: var(--correct);
  background: rgba(18, 224, 126, 0.1);
}
.pick .fx-logo { width: 32px; height: 32px; }
.pick-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 15px;
}

/* دعوة التسجيل */
.pj { text-align: center; padding: 6px 0 2px; }
.pj-q { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.pj-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.pj-or { color: var(--text-faint); font-size: 12px; }
.pj-lede {
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.9;
  max-width: 420px;
  margin: 0 auto 18px;
}
.pj-lede b { color: var(--crown); }
.pj-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pj-cta .btn { min-width: 140px; justify-content: center; }
/* زرّا المزوّدين عرضهما 100% في صفحات الدخول حيث يقف كلٌّ وحده،
   وهنا يقفان في صفّ مع زرّي التسجيل — فيعودان بعرض محتواهما. */
.pj-cta .btn-google, .pj-cta .btn-apple { width: auto; }

@media (max-width: 560px) {
  .picks { grid-template-columns: 1fr 62px 1fr; gap: 6px; }
  .pick { padding: 11px 6px; font-size: 12px; }
  .pick .fx-logo, .pick-x { width: 28px; height: 28px; }
  .pj-cta .btn { flex: 1; min-width: 0; }
}

/* ═══════════════ الدخول بجوجل ═══════════════ */

/* أبيض على كل الثيمات: علامة جوجل لها إرشادات صارمة، وزر يتلوّن
   بألوان موقعنا يفقد التعرّف الفوري الذي هو سبب وجوده. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  color: #1f1f1f;
  border-color: #dadce0;
}
.btn-google:hover { background: #f4f4f4; }

/* زرّ آبل: أسود بنصّ أبيض في الثيمين معاً.
   إرشادات آبل تحدّد شكل الزر ولا تتركه للموقع، ولهذا لونه مكتوب
   صراحةً لا مأخوذاً من متغيّرات الثيم — الثيم الفاتح لو غيّره
   لصار زراً لا تعترف به آبل. ويليه زرّ جوجل الأبيض فيفترقان
   بالنظرة وحدها. */
.btn-apple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #000;
  color: #fff;
  border-color: #000;
}
.btn-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }
/* الشعار يعلو خطّ الأساس قليلاً — رسمُه ثقله في أعلاه فيبدو
   هابطاً حين يُحاذى وسطياً بحتاً بجانب نصّ عربي. */
.a-mark { flex: none; margin-bottom: 2px; }

/* زرّان متتاليان فوق الفاصل: مسافة بينهما وإلا التصقا كزرّ واحد. */
.btn-google + .btn-apple { margin-top: 10px; }
.g-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4285f4;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* فاصل "أو" */
.sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 12px;
}
.sep::before, .sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ═══════════════ حسابي: إحصاءات وسجل ═══════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.st {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 8px;
  text-align: center;
}
.st b {
  font-size: 22px;
  font-weight: 700;
  color: var(--crown);
  font-variant-numeric: tabular-nums;
}
.st span { font-size: 11.5px; color: var(--text-faint); }

/* توزيع النتائج */
.dist { display: flex; flex-direction: column; gap: 9px; }
.dist-row {
  display: grid;
  grid-template-columns: 92px 1fr 28px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.dist-label { color: var(--text-muted); }
.dist-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--fill);
  overflow: hidden;
}
.dist-bar i { display: block; height: 100%; background: var(--correct); }
.dist-n { text-align: center; color: var(--text-faint); }

/* السجل */
.hx-head, .hx {
  display: grid;
  grid-template-columns: 1fr 52px 52px 42px;
  align-items: center;
  gap: 8px;
}
.hx-head {
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.hx-head span:not(:first-child) { text-align: center; }
.hx {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.hx:last-child { border-bottom: none; }
.hx:hover { background: var(--fill); }
/* النقطة داخل عمود المباراة لا عموداً خاصاً: عمود لثمانية بكسلات
   يسرق عرضاً تحتاجه أسماء الفرق. */
.hx-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hx .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.hx .dot.w { background: var(--correct); }
.hx .dot.l { background: var(--wrong); }
.hx .dot.p { background: var(--text-faint); }
.hx-mine, .hx-real { text-align: center; font-size: 12.5px; }
.hx-real { color: var(--text-muted); }
.hx-pts { text-align: center; font-weight: 700; color: var(--crown); font-size: 12.5px; }

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hx-head, .hx { grid-template-columns: 1fr 46px 46px 34px; gap: 5px; }
  .dist-row { grid-template-columns: 80px 1fr 24px; }
}

/* ═══════════════ أزرار النتيجة ═══════════════ */

.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.step {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.step:hover { color: var(--text); border-color: var(--text-faint); }
.step:active { transform: scale(.94); }

/* ═══════════════ حسابي ═══════════════ */

.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.acc-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.acc-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--crown-wash);
  border: 1px solid var(--crown-line);
  color: var(--crown);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.acc-head h1 { font-size: 1.15rem; margin: 0 0 2px; }
.acc-mail { font-size: 12px; color: var(--text-faint); }
.acc-rank {
  flex: 0 0 auto;
  text-align: center;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--border);
}
.acc-rank b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--crown);
  line-height: 1.1;
}
.acc-rank span { font-size: 10.5px; color: var(--text-faint); }

/* أقسام بعناوين: الصفحة صارت طويلة، وعناوينها هي ما يجعلها
   قابلة للمسح بالعين بدل قراءتها من أولها. */
.acc-sec { margin-top: 24px; }
.acc-sec > h2 {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.acc-sec .stats-grid { margin-top: 0; }

/* منطقة الخطر: حدّ أحمر خافت يفصلها عمّا فوقها بلا صراخ. */
.danger { border-color: rgba(255, 90, 78, 0.28); }
.danger h3 { color: var(--wrong); }

@media (max-width: 560px) {
  .acc-head { flex-direction: column; align-items: stretch; text-align: center; }
  .acc-id { flex-direction: column; }
  .acc-rank {
    padding-inline-start: 0;
    border-inline-start: none;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
}

/* ═══════════════ تبويبات المباراة ═══════════════ */

/* hidden لا display:none في CSS: الخادم يرسلها مخفية بسمة hidden
   ويكشفها السكربت. لو أخفيناها بـ CSS لبقيت مخفية لمن يعطّل
   JavaScript بينما الأقسام تحتها ظاهرة — شريط فارغ بلا سبب. */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 16px 0 14px;
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on {
  color: var(--text);
  border-bottom-color: var(--crown);
  font-weight: 600;
}
/* التبويب المفتوح هو أول بطاقة تحت الشريط — نلغي هامشها العلوي
   كي لا تنفصل عنه. */
.tabs + .sec { margin-top: 0; }

/* ═══════════════ العدّاد ═══════════════ */

.mh-cd {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  /* عرض ثابت للأرقام يمنع تراقص العدّاد مع كل ثانية. */
  letter-spacing: .5px;
}
.mh-cd.done { font-size: 20px; color: var(--correct); }
.mh-at {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ═══════════════ أزرار "من سيفوز؟" بيضاوية ═══════════════ */

.picks {
  display: flex;
  gap: 8px;
}
.pick {
  flex: 1 1 0;
  flex-direction: row;
  gap: 8px;
  padding: 12px 10px;
  /* بيضاوي كامل: شكل الاختيار المعروف، ويميّزها عن البطاقات
     المربّعة حولها فتُقرأ كأزرار لا كمحتوى. */
  border-radius: 999px;
  font-size: 13.5px;
}
.pick .fx-logo { width: 24px; height: 24px; }
.pick-x { width: 24px; height: 24px; font-size: 13px; }
/* "تعادل" لا يحمل شعاراً فلا يحتاج عرض فريق. */
.picks .pick:nth-child(2) { flex: 0 0 auto; padding-inline: 20px; }

@media (max-width: 560px) {
  .mh-cd { font-size: 24px; }
  .pick { padding: 10px 8px; font-size: 12.5px; gap: 6px; }
  .pick .fx-logo, .pick-x { width: 20px; height: 20px; }
  .picks .pick:nth-child(2) { padding-inline: 14px; }
}

/* ═══════════════ التوقّع داخل بطاقة المباراة ═══════════════ */

.mh-predict {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
/* البطاقة صارت تحمل معلومة وفعلاً معاً؛ الفاصل وحده لا يكفي
   لتمييزهما، فنضيف خلفية خفيفة للفعل. */
.mh-predict {
  margin-inline: -20px;
  margin-bottom: -22px;
  padding: 18px 20px 20px;
  background: var(--fill);
  border-radius: 0 0 16px 16px;
}
.mh-predict .pq:first-child { margin-bottom: 12px; }
.mh-predict .note { margin-bottom: 14px; }
/* الملاحظة والزر لا يحتاجان عرض البطاقة كاملاً على الشاشة الواسعة. */
.mh-predict .pf, .mh-predict .pj {
  max-width: 520px;
  margin-inline: auto;
}


/* ═══════════════ صفوف التوقّع ═══════════════ */

.trs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* صف واحد لكل فريق: الاسم مرة واحدة، والمربّع بجانبه.
   كان الاسم يتكرر مرتين — في زر "من سيفوز؟" وفوق مربّع النتيجة —
   ويأخذ القسمان ارتفاع الشاشة تقريباً. */
.tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.tr-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tr-team .fx-logo { width: 28px; height: 28px; }
.tr-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr .stepper { flex: 0 0 auto; }
.tr .stepper input {
  width: 56px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  padding: 7px 4px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tr .stepper input:focus { outline: none; border-color: var(--correct); }
.tr .stepper input::-webkit-outer-spin-button,
.tr .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr .stepper input { -moz-appearance: textfield; }

/* الاتجاه المشتقّ: سطر واحد يقول ما تعنيه الأرقام.
   يبقى محجوزاً بارتفاعه فارغاً كي لا يقفز الزر تحته حين يظهر. */
.tr-pick {
  min-height: 20px;
  margin: 12px 0 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--correct);
}

@media (max-width: 560px) {
  .tr { padding: 9px 11px; gap: 8px; }
  .tr-name { font-size: 13.5px; }
  .tr .stepper input { width: 48px; font-size: 17px; }
}


/* ═══════════════ المربّع تحت اسم الفريق ═══════════════ */

.mh-side .stepper { margin-top: 10px; }
.mh-side .stepper input {
  width: 54px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mh-side .stepper input:focus { outline: none; border-color: var(--correct); }
.mh-side .stepper input::-webkit-outer-spin-button,
.mh-side .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mh-side .stepper input { -moz-appearance: textfield; }

/* كتلة التوقّع صارت الزر والرسائل فقط — الأرقام صعدت للترويسة. */
.mh-predict .btn { width: 100%; justify-content: center; }

@media (max-width: 560px) {
  .mh-side .stepper { gap: 4px; margin-top: 8px; }
  .mh-side .stepper input { width: 42px; font-size: 17px; }
  .mh-side .step { width: 26px; height: 26px; font-size: 15px; }
}

/* ═══════════════ جدول النقاط وأداة المضاعِف ═══════════════ */

/* الجدول وصفٌ لا زينة: يُقرأ مرة واحدة ثم يصير معروفاً، فيأخذ
   خطاً صغيراً وحدوداً باهتة ولا ينافس الأرقام في البطاقة. */
.ptbl {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--fill);
}
.ptbl-h {
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ptbl-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.ptbl-r + .ptbl-r { border-top: 1px solid var(--border); }
.ptbl-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.ptbl-l small { font-size: 11px; font-weight: 400; color: var(--text-faint); }
.ptbl-r > b { font-size: 17px; color: var(--crown); flex: none; }
/* صفّ المضاعِف يُقرأ كسقفٍ أعلى، فيأخذ لون الأداة لا لون الجدول. */
.ptbl-x { background: var(--crown-wash); }
.ptbl-x .ptbl-l b { color: var(--crown); }

/* الأداة: مربّع اختيار بمساحة ضغط كاملة الصفّ — الهدف إصبع لا فأرة. */
.mx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--crown-line);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mx input { width: 18px; height: 18px; accent-color: var(--crown); flex: none; cursor: pointer; }
.mx-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-body b { font-size: 13.5px; }
.mx-body b .num { color: var(--crown); }
.mx-body small { font-size: 11.5px; color: var(--text-faint); }
.mx-body small b { color: var(--crown); font-size: inherit; }
.mx:hover { background: var(--crown-wash); }
/* المؤشَّر يُضاء: قرار اتُّخذ، والبطاقة تقوله بلا قراءة. */
.mx-on { background: var(--crown-wash); border-color: var(--crown); }
/* المُنفَد يبقى ظاهراً معطّلاً — إخفاؤه يخفي وجود الأداة أصلاً. */
.mx-off { opacity: .55; cursor: default; border-color: var(--border); }
.mx-off:hover { background: none; }
.mx-off input { cursor: default; }

/* علامة المضاعَفة في السجل: بلا هذه يقرأ اللاعب رقماً مضاعفاً
   ولا يعرف من أين جاء. */
.hx-x {
  display: inline-block;
  margin-inline-end: 4px;
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--crown-wash);
  color: var(--crown);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

@media (max-width: 560px) {
  .ptbl-l { font-size: 12.5px; }
  .ptbl-r > b { font-size: 15px; }
  .mx { padding: 9px 10px; }
}

/* ═══════════════ التهيئة: أهلاً ═══════════════ */

.wl-head { text-align: center; margin: 8px 0 22px; }
.wl-head h1 { font-size: 26px; margin-bottom: 8px; }
.wl-head p { color: var(--text-muted); font-size: 14.5px; }

.wl-card { padding: 18px 16px; }
.wl-league + .wl-league { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.wl-league h2 {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 700;
}

/* شبكة تتكيّف بلا نقاط توقّف: أضيق عرض للخلية 96 بكسل، والمتصفح
   يقرّر كم تتّسع الصفوف. دوري بـ 18 نادياً ودوري بـ 20 يُعرضان
   بالقاعدة نفسها. */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* كل نادٍ زرّ إرسال مستقل — لا مربّع اختيار ثم زرّ "تأكيد".
   ضغطة واحدة تختار وترسل: الخطوة التي لا وجود لها لا تُنسى ولا
   تُخطئ، ونيّةُ الضغط على شعار ناديك لا تحتاج تأكيداً. */
.wl-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--fill);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.wl-team:hover { border-color: var(--crown); background: var(--crown-wash); }
.wl-team:disabled { opacity: .45; cursor: default; }
.wl-team:disabled:hover { border-color: var(--line); background: transparent; }
.wl-team:active { transform: scale(.97); }
.wl-team .fx-logo { width: 38px; height: 38px; }
.wl-team span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.wl-skip { text-align: center; margin: 18px 0 8px; }
.wl-skip a { color: var(--text-faint); font-size: 13px; }
.wl-skip a:hover { color: var(--text-muted); }

/* لافتة أول توقّع: لون التاج لا الأخضر — الأخضر عندنا يعني "تمّ"،
   وهذه تقول "ابدأ". */
.note.first {
  background: var(--crown-wash);
  color: var(--text);
  border: 1px solid var(--crown-line);
  font-size: 13.5px;
  line-height: 1.6;
}
.note.first b { display: block; color: var(--crown); margin-bottom: 2px; }

@media (max-width: 560px) {
  .wl-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .wl-team { padding: 10px 4px; font-size: 11px; }
  .wl-team .fx-logo { width: 32px; height: 32px; }
  .wl-head h1 { font-size: 22px; }
}

/* ═══════════════ التهيئة: الخطوات والدوريات والبطل ═══════════════ */

.wl-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 18px;
  list-style: none;
  font-size: 12px;
  color: var(--text-faint);
}
.wl-steps li { display: flex; align-items: center; gap: 6px; }
.wl-steps li + li::before { content: '·'; margin-inline-end: 6px; }
.wl-steps .num {
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
}
.wl-steps .now { color: var(--crown); }
.wl-steps .now .num { border-color: var(--crown); background: var(--crown-wash); }
.wl-steps .done { color: var(--correct); }
.wl-steps .done .num { border-color: var(--correct); }

/* الدوريات: صفّ كامل لكل واحد — ستة عناصر لا تحتاج شبكة، والصفّ
   يعطي هدف ضغط عريضاً يصيبه الإبهام بلا تصويب. */
.wl-lgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wl-lg {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--fill);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.wl-lg:hover { border-color: var(--crown-line); }
.wl-lg input { width: 18px; height: 18px; accent-color: var(--crown); flex: none; cursor: pointer; }
.wl-lg img { flex: none; }
.wl-lg:has(input:checked) { border-color: var(--crown); background: var(--crown-wash); }
.wl-card > .btn { width: 100%; justify-content: center; }

/* بطاقة رهان البطل */
.ch { margin-bottom: 14px; padding: 16px 15px; }
.ch-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ch-head h2 { font-size: 15px; flex: 1; min-width: 0; }
.ch-val {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--crown-wash);
  color: var(--crown);
  font-size: 12px;
  font-weight: 700;
}
.ch-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.ch-note b { color: var(--crown); }
/* شبكة أضيق من شبكة التهيئة: البطاقة داخل صفحة فيها بطاقات أخرى،
   وشعارٌ بحجم شعار خطوة "فريقك" يجعلها تبتلع الصفحة. */
.ch-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.ch-grid .wl-team { padding: 9px 4px; font-size: 11px; }
.ch-grid .fx-logo { width: 30px; height: 30px; }
/* المختار: إطار التاج وعلامة — اللون وحده لا يكفي لمن لا يميّزه. */
.wl-team.picked { border-color: var(--crown); background: var(--crown-wash); }
.wl-team.picked::after {
  content: '🏆';
  position: absolute;
  top: 3px; inset-inline-end: 4px;
  font-size: 10px;
}
.wl-team { position: relative; }

@media (max-width: 560px) {
  .wl-steps { font-size: 11px; }
  .ch-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}
.acc-lede { font-size: 12.5px; color: var(--text-faint); margin: -4px 0 12px; }

/* ═══════════════ ملوك الدوري ═══════════════ */

.lb-sec { margin: 26px 0; }
.lb-sec h2 { font-size: 17px; margin-bottom: 4px; }
.lb { padding: 6px 4px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
}
.lb-row + .lb-row { border-top: 1px solid var(--border); }
.lb-rank {
  width: 22px;
  flex: none;
  text-align: center;
  font-weight: 700;
  color: var(--text-faint);
  font-size: 13px;
}
/* الثلاثة الأوائل بلون التاج — بلا ميداليات: ثلاثة رموز متقاربة
   في صفٍّ صغير تُقرأ زخرفةً لا ترتيباً. */
.lb-row.top .lb-rank { color: var(--crown); }
.lb .fx-logo { width: 24px; height: 24px; flex: none; }
.lb-none { display: block; border-radius: 50%; background: var(--fill); }
.lb-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-n { flex: none; font-size: 11.5px; color: var(--text-faint); }
.lb-pts { flex: none; font-size: 15px; color: var(--crown); min-width: 46px; text-align: end; }

.ch-teaser { border-color: var(--crown-line); }

/* صفّ الزائر نفسه: مميّز بلا صراخ — إطار التاج يكفي ليجده بنظرة
   في قائمة طويلة، والخلفية الممتلئة تجعله يبدو مُختاراً لا مُشاراً. */
.lb-row.mine { background: var(--crown-wash); }
.lb-row.mine .lb-name { color: var(--crown); }
.lb-me { margin-top: 10px; border-color: var(--crown-line); }

/* ═══════════════ منصّة العرش ═══════════════ */

/* ثلاثة أعمدة متساوية والأوسط أعلى: هكذا تُقرأ منصّة التتويج بلا
   قراءة أرقامها. align-items:end يُنزل الجميع إلى خط واحد فيبدو
   الفارق ارتفاعاً لا إزاحة. */
.pod {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
}
.pod-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
  min-width: 0;
}
.pod-slot.p1 { padding-top: 20px; border-color: var(--crown); background: var(--crown-wash); }
.pod-slot.mine { border-color: var(--correct); }
.pod-rank { font-size: 13px; font-weight: 700; color: var(--text-faint); line-height: 1; }
.pod-slot.p1 .pod-rank { font-size: 18px; }
.pod-name {
  font-size: 12.5px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-pts { font-size: 19px; color: var(--crown); line-height: 1.1; }
.pod-slot.p1 .pod-pts { font-size: 23px; }
.pod-acc { font-size: 10.5px; color: var(--text-faint); }

/* الدقّة في الصفّ: قبل عدّاد التوقّعات، فيُقرآن معاً كجملة
   واحدة — "أصاب 72% من 41 توقّعاً". */
.lb-acc { flex: none; font-size: 11.5px; color: var(--text-muted); min-width: 34px; text-align: end; }

/* روابط العبور بين العرش وجدول الأندية */
.lb-sec h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lb-more, .lb-cross a { font-size: 12px; font-weight: 600; color: var(--crown); }
.lb-cross { margin: 10px 0 14px; }
a.acc-rank { text-decoration: none; transition: border-color .15s; }
a.acc-rank:hover { border-color: var(--crown); }

@media (max-width: 560px) {
  .pod { gap: 5px; }
  .pod-slot { padding: 11px 4px 10px; }
  .pod-name { font-size: 11px; }
  .pod-pts { font-size: 16px; }
  .pod-slot.p1 .pod-pts { font-size: 19px; }
  /* الدقّة أول ما يُضحّى به على الضيّق: النقاط والاسم هما الرسالة. */
  .lb-acc { display: none; }
}

/* ═══════════════ تبويبات "حسابي" ═══════════════ */

/* روابط لا أزرار: كل تبويب عنوان قابل للحفظ والمشاركة، ويعمل
   لمن يعطّل JavaScript. */
.acc-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--fill);
}
.acc-tab {
  flex: 1;
  padding: 9px 8px;
  border-radius: 9px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.acc-tab:hover { color: var(--text); }
.acc-tab.on { background: var(--crown); color: var(--on-accent); }

/* الفريق المفضّل في الترويسة: هويةٌ ثانية بعد الاسم والبريد. */
.acc-team {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.acc-team .fx-logo { width: 20px; height: 20px; }

@media (max-width: 560px) {
  .acc-tab { font-size: 12.5px; padding: 8px 4px; }
}

/* ═══════════════ توقّع الجولة ═══════════════ */

.rd { padding: 4px 4px 0; }
/* صفٌّ واحد لكل مباراة: الغرض المقارنة والسرعة، وتسع بطاقات
   كاملة تجعل الصفحة أطول من تسع صفحات منفصلة فتُلغي المكسب. */
.rd-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 34px;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
}
.rd-row + .rd-row { border-top: 1px solid var(--border); }
.rd-row.has { background: rgba(255, 255, 255, 0.02); }

.rd-side {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.rd-h { justify-content: flex-end; }
.rd-a { justify-content: flex-start; }
.rd-side:hover .rd-name { color: var(--crown); }
.rd-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-side .fx-logo { width: 24px; height: 24px; flex: none; }

.rd-in {
  width: 40px;
  padding: 6px 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--night);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.rd-in:focus { outline: none; border-color: var(--correct); }
.rd-in::-webkit-outer-spin-button,
.rd-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-in { -moz-appearance: textfield; }
/* المربّعان والفاصل في سطر، والوقت تحتهما */
.rd-mid { display: grid; grid-template-columns: auto auto auto; gap: 4px; align-items: center; }
.rd-x { color: var(--text-faint); font-size: 12px; }
/* nowrap ومساحة أدنى: في العرض المقفل لا مربّعات في الوسط،
   فينكمش العمود حتى ينكسر "6:55 م" سطرين — الساعة سطر والحرف
   سطر تحته. */
.rd-time {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
}
.rd-mid { min-width: 58px; }
.rd-locked { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--text-muted); }

/* المضاعِف مربّع صغير في آخر الصفّ: الأداة نادرة، فحضورها
   الدائم بحجم كامل يزاحم ما يُستعمل في كل صفّ. */
.rd-x2 {
  /* position: relative شرطٌ لا زينة: المربّع بداخله مطويٌّ
     بـ absolute، وبلا مرجع تموضع هنا يتموضع على الصفحة نفسها
     فيتمدّد إلى عرضها كاملاً — فاضت الصفحة أفقياً بـ 326 بكسل
     على شاشة عريضة، وشُطر العنوان. لا يظهر في HTML ولا في السجل. */
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}
/* يملأ الأب لا يختفي: يبقى قابلاً للتركيز بلوحة المفاتيح
   ويُرسَل مع النموذج، ومساحة ضغطه هي المربّع كله. */
.rd-x2 input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rd-x2:hover { border-color: var(--crown-line); color: var(--text-muted); }
.rd-x2.on { border-color: var(--crown); background: var(--crown-wash); color: var(--crown); }
.rd-x2-off { border: none; cursor: default; color: var(--crown); }

.rd-foot { padding: 14px 10px 16px; border-top: 1px solid var(--border); }
.rd-foot .btn { width: 100%; justify-content: center; }
.rd-nav { display: flex; justify-content: space-between; margin: 12px 0 14px; }
.rd-nav a { font-size: 13px; font-weight: 600; color: var(--crown); }

@media (max-width: 560px) {
  .rd-row { grid-template-columns: 1fr auto 1fr 28px; gap: 5px; padding: 9px 6px; }
  .rd-name { font-size: 11.5px; }
  .rd-side .fx-logo { width: 20px; height: 20px; }
  .rd-in { width: 34px; font-size: 15px; }
  .rd-x2 { height: 26px; font-size: 10px; }
}
.mh-back { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ═══════════════ المجالس ═══════════════ */

.gp-list { padding: 4px; }
.gp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: var(--text);
}
.gp-row + .gp-row { border-top: 1px solid var(--border); }
.gp-row:hover { background: var(--fill); }
.gp-av {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--crown-wash);
  color: var(--crown);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.gp-av-lg { width: 56px; height: 56px; font-size: 24px; margin: 0 auto; }
.gp-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gp-body b { font-size: 14.5px; }
.gp-body small { font-size: 11.5px; color: var(--text-faint); }
.gp-code {
  flex: none;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--fill);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* نموذجٌ في سطر: حقل وزر. الرمز ست خانات والاسم قصير، فسطران
   لشيء يُكتب في ثوانٍ تبديدٌ للمساحة. */
.gp-form { display: flex; gap: 8px; align-items: stretch; }
.gp-form .field { flex: 1; }
.gp-form .btn { flex: none; }
.gp-code-in { letter-spacing: 3px; font-weight: 700; text-align: center; }

.gp-invite { text-align: center; }
.gp-link {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--night);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
}
.gp-link:focus { outline: none; border-color: var(--crown); color: var(--text); }
.gp-code-big {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--crown);
}
.gp-own {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--crown-wash);
  color: var(--crown);
  font-size: 9.5px;
  font-weight: 700;
  vertical-align: 2px;
}

@media (max-width: 560px) {
  .gp-code-big { font-size: 24px; letter-spacing: 4px; }
  .gp-form { flex-direction: column; }
  .gp-form .btn { width: 100%; justify-content: center; }
}

/* ═══════════════ الأوسمة ═══════════════ */

.bg-head {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
/* المطفأ يبقى مقروءاً لا شبحاً: opacity منخفضة جداً تجعل الشرط
   غير مقروء، والشرط هو نصف قيمة الوسام — الهدف يُطلب حين يُفهم. */
.bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--fill);
  text-align: center;
}
.bg-mark { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .5; }
.bg b { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.bg small { font-size: 10px; line-height: 1.45; color: var(--text-faint); }
.bg.on { border-color: var(--crown-line); background: var(--crown-wash); }
.bg.on .bg-mark { filter: none; opacity: 1; }
.bg.on b { color: var(--crown); }
.bg.on small { color: var(--text-muted); }

/* الاسم صار رابطاً: يبقى بلون النصّ حتى لا يصير كل صفٍّ أزرق،
   ويُضيء عند المرور فيُعرف أنه يُضغط. */
a.lb-name, a.pod-name { text-decoration: none; color: inherit; display: block; }
a.lb-name:hover, a.pod-name:hover { color: var(--crown); }

@media (max-width: 560px) {
  .bg-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .bg { padding: 10px 5px; }
  .bg small { font-size: 9.5px; }
}
.stats-grid.stats-2 { grid-template-columns: repeat(2, 1fr); }