/* ═══════════════ Career Game — نظام التصميم المشترك ═══════════════ */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* لوحة الألوان — روح FC: داكن هادئ بدون ضجيج */
  --bg:        #14141b;
  --bg-raise:  #1b1b24;
  --line:      #2a2a35;
  --txt:       #eceff4;
  --dim:       #8b8f9c;
  --dimmer:    #5c5f6b;
  --accent:    #3ecf6a;   /* أخضر التقدم */
  --gold:      #e8c33e;
  --danger:    #e5484d;
}

html, body { height:100%; }
body {
  font-family:"Segoe UI", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
}

/* ═══════════════ انتقال سلس بين الصفحات (نمط FC) ═══════════════ */
/* المتصفح يمزج الصفحتين؛ الشريط العلوي والخلفية متطابقان فيظهران ثابتين */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:vt-out .2s ease both; }
::view-transition-new(root) { animation:vt-in  .24s ease both; }
@keyframes vt-out { to   { opacity:0; } }
@keyframes vt-in  { from { opacity:0; } }
.topbar   { view-transition-name:topbar; }
.bg-scene { view-transition-name:bgscene; }

/* ═══════════════ الشريط العلوي ═══════════════ */
.topbar {
  display:flex;
  align-items:center;
  gap:26px;
  padding:14px 28px 0;
  user-select:none;
  direction:ltr;      /* تخطيط فيزيائي مثل FC: اللوغو يسار والنادي يمين حتى بالعربي */
}

/* الشعار + اسم الصفحة الحالية (رابط للرئيسية) */
.brand { display:flex; align-items:center; gap:14px; flex-shrink:0; text-decoration:none; color:inherit; }
.brand .logo {
  width:46px; height:46px; border-radius:50%;
  border:2.5px solid var(--txt);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; letter-spacing:.5px;
  font-style:italic;
}
/* شعار اللعبة (لوحة التكتيكات) — علامة شفافة بلا إطار */
.brand .logo-img {
  width:46px; height:46px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.brand .page {
  text-align:center;
}
.brand .page .hintkey { margin-bottom:2px; }
.brand .page .name { font-size:17px; font-weight:700; }

/* الفاصل العمودي بين الشعار والتبويبات (تفصيلة FC) */
.brand-sep {
  width:1px;
  height:34px;
  background:linear-gradient(to bottom, transparent, #3a3b47 30%, #3a3b47 70%, transparent);
  flex-shrink:0;
  margin:0 2px;
}
.topbar.v2 .brand-sep { display:none; }   /* بنسخة الكبسولة الفصل بصري أصلاً */

/* التبويبات */
.navtabs {
  display:flex;
  align-items:flex-end;
  gap:4px;
  flex:1;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.navtabs::-webkit-scrollbar { display:none; }

.navtabs .hintkey { align-self:center; margin:0 6px; flex-shrink:0; }

.hintkey {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:16px; padding:0 5px;
  background:#33343f; color:#b8bac4;
  font-size:9.5px; font-weight:800;
  border-radius:4px;
  letter-spacing:.3px;
}

.tab {
  appearance:none; background:none; border:none;
  font-family:inherit;
  color:var(--dim);
  font-size:13.5px;
  font-weight:600;
  padding:10px 14px 12px;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  transition:color .18s;
  text-decoration:none;
  display:inline-block;
}
.tab:hover { color:var(--txt); }
.tab.active { color:var(--txt); font-weight:800; }
.tab.active::after {
  content:'';
  position:absolute;
  right:14px; left:14px; bottom:4px;
  height:2.5px; border-radius:2px;
  background:var(--txt);
}
.tab .badge {
  position:absolute; top:4px; left:2px;
  min-width:15px; height:15px; padding:0 4px;
  background:var(--danger); color:#fff;
  font-size:9px; font-weight:800;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}

/* شارة النادي */
.clubchip {
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
  padding:6px 4px;
}
.clubchip img.crest { height:34px; }
.clubchip .info { display:flex; flex-direction:column; gap:4px; }
.clubchip .row1 { display:flex; align-items:center; gap:8px; }
.clubchip .cname { font-size:13.5px; font-weight:700; }
.clubchip .lvl { display:flex; align-items:center; gap:6px; }
.clubchip .xp {
  width:120px; height:5px;
  background:#2c2d38; border-radius:3px; overflow:hidden;
}
.clubchip .xp i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.clubchip .star { color:var(--gold); font-size:12px; }

/* خط فاصل خفيف أسفل الشريط */
.topbar-rule {
  margin:2px 28px 0;
  height:1px;
  background:linear-gradient(to left, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

/* ═══════════════ عام ═══════════════ */
.page-body { padding:28px; }

@media (max-width:760px) {
  .topbar { flex-wrap:wrap; gap:10px; padding:10px 14px 0; }
  .brand { order:1; }
  .clubchip { order:2; margin-right:auto; }
  .clubchip .xp { width:80px; }
  .navtabs { order:3; width:100%; }
  .topbar-rule { margin:2px 14px 0; }
  .page-body { padding:16px; }
}

/* ═══════════════ النسخة 2 — كبسولة عائمة ═══════════════ */
.topbar.v2 { gap:18px; }
.topbar.v2 .brand .logo {
  border-radius:14px;
  background:linear-gradient(140deg,#252531,#17171f);
  border:1px solid var(--line);
  font-style:normal;
}
.topbar.v2 .navtabs {
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 10px;
  gap:2px;
  align-items:center;
  flex:0 1 auto;
  margin-inline:auto;
  box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.topbar.v2 .tab { padding:8px 16px; border-radius:999px; transition:background .18s, color .18s; }
.topbar.v2 .tab.active { background:var(--txt); color:#15151c; font-weight:800; }
.topbar.v2 .tab.active::after { display:none; }
.topbar.v2 .tab:hover:not(.active) { background:#242430; color:var(--txt); }
.topbar.v2 .tab .badge { top:1px; left:3px; }
.topbar.v2 .hintkey { background:#26262f; }
.topbar.v2 .clubchip {
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:14px;
  padding:7px 14px;
}

/* ═══════════════ خلفية FC (تجريبية) ═══════════════ */
.bg-scene {
  position:fixed; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .45s;
}
.bg-scene.show { opacity:1; }
/* تعتيم فوق الصورة حتى تبقى الواجهة مقروءة — أغمق بالأسفل مثل FC */
.bg-scene::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,20,27,.5), rgba(20,20,27,.78) 70%, rgba(20,20,27,.9));
}



/* ═══════════════ قوالب الهيكل (بانتظار التصميم) ═══════════════ */
.ghost {
  border:1.5px dashed #34353f;
  border-radius:10px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  color:var(--dimmer);
  font-size:11px; font-weight:700;
  font-family:Consolas, monospace;
  direction:ltr;
  background:rgba(255,255,255,.015);
  min-height:40px;
}
.ghost .sub { position:absolute; bottom:6px; font-size:9px; color:#4a4c58; }


/* ═══════════════ إظهار الكونتينرات ═══════════════ */
.containers-toggle {
  position:fixed; bottom:62px; left:16px; z-index:60;   /* فوق شريط الفوتر */
  background:var(--bg-raise); border:1px solid var(--line);
  color:var(--dim);
  font-family:inherit; font-size:11.5px; font-weight:700;
  padding:8px 16px; border-radius:999px; cursor:pointer;
}
.containers-toggle.on { background:#ff6200; border-color:#ff6200; color:#fff; }
.cn-mark { outline:1.5px dashed rgba(255,98,0,.75); outline-offset:2px; }
.cn-rel { position:relative; }   /* فقط للعناصر غير المتموضعة أصلاً */
.cn-chip {
  position:absolute; top:-11px; left:-2px; z-index:70;
  background:#ff6200; color:#fff;
  font-family:Consolas, monospace; font-size:9.5px; font-weight:700;
  padding:2px 8px; border:none; border-radius:6px;
  cursor:pointer; direction:ltr;
}
.cn-chip:active { transform:scale(.94); }
.cn-chip.ok { background:#1a9c4b; }

/* شارة nav-tabs داخل شريط متمرر — تُعرض داخله بدل القص */
.navtabs .cn-chip { top:4px; left:6px; }
.stage-rule .cn-chip { top:4px; }   /* تحت الخط حتى لا تغطي نص التاريخ فوقه */
.home-footer .cn-chip, #task-list .cn-chip { top:-13px; }

/* ═══════════════ مسرح الرئيسية — إحداثيات المخطط الحرفية ═══════════════ */
/* المسرح بعرض الشاشة الكامل — نسب المخطط مقاسة على الشاشة كاملة */
.page-body.stage-host { padding:0; }
/* كل كونتينر بموقعه المقاس من التشريح (نِسَب من مساحة الشاشة تحت الشريط العلوي) */
.home-stage {
  position:relative;
  height:calc(100vh - 88px);
  min-height:580px;
  direction:ltr;
}
.abs { position:absolute; }

/* date-header: صندوق مضغوط بموقعه الأصلي (31.9% ، 18.5% عرضاً) */
.date-header {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}
.dh-date { direction:rtl; white-space:nowrap; font-size:clamp(20px, 2.3vw, 32px); font-weight:800; letter-spacing:.4px; line-height:1.15; }
.dh-date .dh-cal { direction:ltr; display:inline-block; letter-spacing:2.5px; }
.dh-matchday { margin-top:7px; color:var(--danger); font-size:13px; font-weight:700; }

/* الخط الفاصل تحت التاريخ — يمتد على عمود المحتوى مثل الأصل */
.stage-rule {
  height:1px;
  background:linear-gradient(to right, var(--line) 0%, var(--line) 82%, transparent);
}

/* league-row: شعار البطولة الأبيض + الاسم العريض + توقيت المباراة */
.league-row { display:flex; align-items:center; gap:12px; }
.league-row .lr-logo {
  height:100%; max-height:38px;
  object-fit:contain;
  filter:brightness(0) invert(1);   /* أحادي أبيض مثل FC */
  opacity:.95;
  flex-shrink:0;
}
.league-row .lr-name {
  font-size:clamp(12px, 1.15vw, 17px);
  font-weight:800; letter-spacing:.5px;
  white-space:nowrap;
}
.league-row .lr-when {
  font-size:12.5px; font-weight:700;
  color:var(--dim);
  margin-left:2px;
}

/* match-card: شعارا المباراة القادمة + الأسماء ومراكز الترتيب */
.match-card { display:flex; align-items:center; gap:20px; }
.match-card .mc-crest {
  height:88%; max-height:68px;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.match-card .mc-sep {
  width:1px; align-self:stretch; margin:5px 0;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.22) 25%, rgba(255,255,255,.22) 75%, transparent);
  flex-shrink:0;
}
.match-card .mc-names {
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-width:0; margin-left:4px;
}
.match-card .mc-line {
  font-size:clamp(15px, 1.55vw, 22px);
  font-weight:800; letter-spacing:.5px;
  white-space:nowrap; line-height:1.2;
}
.match-card .mc-rank {
  color:var(--dim); font-weight:400;
  margin-left:12px;
}

/* actions: أزرار كبسولية بأسلوب FC */
.actions { display:flex; align-items:center; gap:14px; }
.action-btn {
  appearance:none; font-family:inherit;
  background:rgba(255,255,255,.035);
  border:1px solid #4a4c58;
  color:var(--txt);
  font-size:13.5px; font-weight:700;
  padding:0 26px;
  height:72%; min-height:36px; max-height:42px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.action-btn:hover, .action-btn:focus-visible, .action-btn.focused {
  background:var(--txt); color:#15151c; border-color:var(--txt);
  outline:none;
}
.action-btn:active { transform:scale(.97); }

/* task-list: قائمة مهام تفاعلية — أيقونة يمين + نص (RTL)، تتمرر عمودياً عند الزيادة */
.task-list { display:flex; flex-direction:column; }
.task-scroll {
  flex:1; min-height:0;
  overflow-y:auto;
  direction:rtl;               /* شريط التمرير على اليسار مثل FC */
  padding:2px 2px 2px 10px;
}
.task-scroll::-webkit-scrollbar { width:4px; }
.task-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.09); border-radius:3px; }
.task-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.75); border-radius:3px; }
/* عدّاد «N من المهام» — أسفل بوضع الراحة، ترويسة عند التمرير */
.task-count {
  direction:rtl;
  color:var(--dim);
  font-size:12.5px; font-weight:700;
  padding:7px 14px 5px;
  display:none;
  flex-shrink:0;
}
.task-count.show { display:block; }
.task-count.top { padding:2px 14px 8px; }
.task-row {
  direction:rtl;
  display:flex; align-items:center; gap:14px;
  padding:6px 14px;
  min-height:52px; flex-shrink:0;
  border-radius:10px;
  cursor:pointer;
  transition:background .13s;
}
.task-row:hover { background:rgba(255,255,255,.045); }
.task-row + .task-row { border-top:1px solid #2c2d38; }
.task-row.selected {
  outline:1px solid rgba(255,255,255,.5); outline-offset:-1px;
  background:rgba(8,8,12,.5);
  border-radius:10px;
}
.task-row .tr-icon {
  height:68%; max-height:44px; width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.92;
  flex-shrink:0;
}
.task-row .tr-svg { filter:none; opacity:.88; }
.task-row .tr-label { font-size:14px; font-weight:700; line-height:1.35; }
.task-row .tr-photo {
  height:80%; max-height:52px; aspect-ratio:1;
  border-radius:50%;
  object-fit:cover; object-position:top;
  background:#2a2b35;
  flex-shrink:0;
}
.task-row .tr-amb {
  width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#fff;
  font-size:14px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* footer-controls: تلميحات أزرار التحكم — نص + شارة على يمينه */
.footer-controls { display:flex; align-items:center; gap:15px; }
.fc-hint { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.fc-label { font-size:11.5px; font-weight:700; color:#c9ccd6; white-space:nowrap; }
.fc-badge {
  width:21px; height:21px; border-radius:50%;
  background:#4e505c; color:#191921;
  font-size:10.5px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.fc-ring::after {
  content:''; width:8px; height:8px;
  border:2.5px solid #191921; border-radius:50%;
}
.fc-stick { position:relative; }
.fc-stick::before, .fc-stick::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent;
}
.fc-stick::before { top:-8px; border-bottom:5px solid #8b8f9c; }
.fc-stick::after { bottom:-8px; border-top:5px solid #8b8f9c; }
.fc-menu { border-radius:9px; width:19px; font-size:13px; }

/* news-card: كرت الأخبار — غرافيك مواجهة بألوان الفريقين + ترويسة المصدر + نص وتفاعلات */
.news-card {
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column;
  isolation:isolate;
}
.nc-art { position:absolute; inset:0; z-index:-2; opacity:.9; }
.nc-shade {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,10,16,.55), rgba(10,10,16,.15) 30%, rgba(10,10,16,.2) 55%, rgba(12,12,18,.88) 82%);
}
.nc-new {
  position:absolute; top:0; right:14px;
  background:#8b5cf6; color:#fff;
  font-size:12px; font-weight:800;
  padding:8px 22px 7px;
  border-radius:0 0 10px 10px;
}
.nc-head {
  display:flex; align-items:center; gap:11px;
  padding:16px 18px 0;
}
.nc-srclogo {
  width:38px; height:38px; border-radius:6px;
  background:#d31b1b; color:#fff;
  font-size:9.5px; font-weight:900; letter-spacing:.4px;
  display:flex; align-items:center; justify-content:center;
}
.nc-srcname { font-size:15px; font-weight:800; letter-spacing:.3px; }
.nc-date { font-size:11px; color:#c3c6cf; margin-top:2px; direction:rtl; text-align:left; }
.nc-duel {
  display:flex; align-items:flex-start; justify-content:center; gap:34px;
  margin-top:6%;
}
.nc-team { display:flex; flex-direction:column; align-items:center; gap:11px; }
.nc-team img { height:clamp(56px, 8vw, 96px); filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.nc-code { font-size:20px; font-weight:800; letter-spacing:1px; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.nc-vs { align-self:center; color:rgba(255,255,255,.55); font-size:11px; margin-top:6%; }
.nc-score {
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin-top:3%;
  font-size:clamp(40px, 4.8vw, 62px); font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.nc-score i { width:1.5px; height:.75em; background:rgba(255,255,255,.4); }
.nc-body { margin-top:auto; padding:0 18px 14px; }
.nc-text {
  direction:rtl;
  text-align:center;
  font-size:13px; font-weight:600; line-height:1.65;
  color:#e9ebf1;
}
.nc-meta {
  display:flex; align-items:center; gap:16px;
  margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; font-weight:700;
}
.nc-stat { display:flex; align-items:center; gap:6px; direction:ltr; }
.nc-stat svg { width:17px; height:17px; }
.nc-comments {
  margin-left:auto;
  display:flex; align-items:center; gap:7px;
  direction:rtl; color:#e9ebf1;
}
.nc-comments svg { width:16px; height:16px; opacity:.85; }

/* news-pagination: أسهم + شارة R + نقاط الأخبار */
.news-pagination { display:flex; align-items:center; justify-content:center; gap:9px; }
.np-arrow {
  width:0; height:0; cursor:pointer;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  opacity:.85;
}
.np-prev { border-right:7px solid #b9bcc7; }
.np-next { border-left:7px solid #b9bcc7; }
.np-r { width:26px; height:26px; font-size:12px; cursor:default; }
.np-dots { display:flex; align-items:center; gap:12px; margin-left:10px; }
.np-dot {
  width:9px; height:9px; border-radius:50%;
  background:#8b8f9c; cursor:pointer;
  transition:background .15s, transform .15s;
}
.np-dot.active { background:#f14b47; transform:scale(1.45); }

/* footer-status: شعار EA + FC HUB + مؤشرات الحالة */
.footer-status { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.fs-ea {
  width:26px; height:26px; border-radius:50%;
  background:#f2f3f6; color:#14141b;
  font-size:11px; font-weight:900; font-style:italic;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.fs-sep { width:1px; height:20px; background:#3a3b47; }
.fs-cam { width:27px; height:20px; }
.fs-hub { font-size:13.5px; font-weight:800; letter-spacing:.5px; white-space:nowrap; }
.fs-r2 {
  background:#585a66; color:#191921;
  font-size:10.5px; font-weight:900;
  padding:4px 7px 3px;
  border-radius:9px 9px 5px 5px;
}
.fs-spk { width:19px; height:19px; }
.fs-num { font-size:13.5px; font-weight:800; color:#c9ccd6; }
.fs-green { color:#35d16f; }
.fs-ppl { width:22px; height:18px; }

/* ═══════════════ يد التحكم ═══════════════ */
/* وميض الشارة المرسومة عند ضغط زرها الحقيقي */
.pad-flash {
  box-shadow:0 0 0 3px rgba(62,207,106,.65);
  filter:brightness(1.65);
}
/* إشعار اتصال/انفصال اليد */
.pad-toast {
  position:fixed; top:14px; left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:var(--bg-raise);
  border:1px solid var(--accent);
  color:var(--txt);
  font-size:13px; font-weight:700;
  padding:9px 22px;
  border-radius:999px;
  opacity:0; transition:opacity .3s, transform .3s;
  z-index:100; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.pad-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* الهاتف: المسرح يتحول لتدفق عمودي بنفس الترتيب */
@media (max-width:900px) {
  .page-body.stage-host { padding:0 16px; }
  .home-stage { height:auto; padding:8px 0 16px; }
  .home-stage > .abs {
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:48px;
    margin:10px 0;
  }
  .home-stage > .stage-rule { min-height:1px; margin:4px 0; }
}