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

:root {
  --night: #080f0c;
  --surface: #101e17;
  --crown: #f2c14e;
  --correct: #12e07e;
  --wrong: #ff5a4e;
  --text: #edf4ef;
  --text-muted: #98b0a3;
  --text-faint: #5a7265;
  --on-accent: #0b140f;

  --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;
}

* {
  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: rgba(8, 15, 12, 0.86);
  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(--crown);
  background: var(--crown-wash);
}

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

.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;
}

/* الزر الأساسي أخضر لا ذهبي — تطبيقاً لقاعدة الهوية */
.btn-primary {
  background: var(--correct);
  color: var(--on-accent);
}

.btn-primary:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

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

.btn-ghost:hover {
  background: var(--fill);
  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(--correct);
}

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);
}

.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(--correct);
  border-color: var(--correct);
  color: var(--on-accent);
}
.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(--bg);
  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(--crown);
  border-color: var(--crown);
  color: var(--on-accent);
  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; flex-direction: row-reverse; }
.ev-body { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.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; }
.ev-assist { font-size: 11.5px; color: var(--text-faint); }
.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; }
}