/* ============================================================
   homepage.css
   يوضع في: gpack/travian_default/homepage.css
   يُحمَّل بعد main.css و main_en.css (آخر ملف بالصفحة)
   هدفه: إعادة تصميم الصفحة الرئيسية (index.php) فقط،
   بدون حذف أو تعديل أي سطر من main.css الأصلي،
   حتى لا تتأثر باقي صفحات الموقع (تسجيل الدخول، اختيار
   السيرفر، الأخبار، القواعد...الخ).
   ============================================================ */

/* main.css القديم يحط min-width:845px على .wrapper وده يكسر عرض
   الجوال، فنلغيه هنا فقط بصفحة الرئيسية */
/* main_en.css القديم يحط padding-top:367px على #content (لتصميم هيدر ثابت
   قديم) وهذا كان يسبب فراغ كبير + خلفية خضراء تحت الهيدر بالجوال، نصفّره هنا */
body.indexPage #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 50;
}

/* صندوق اختيار العلم/المنطقة القديم مو موجود بالتصميم الجديد، نخفيه */
body.indexPage #country_select {
  display: none !important;
}

body.indexPage .wrapper {
  min-width: 0 !important;
  text-align: inherit !important;
}
body.indexPage {
  direction: rtl !important;
  text-align: right !important;
  background: #fff url(img/main-bg.jpg) repeat-x top !important;
  font-family: Tahoma, Arial, sans-serif !important;
}

/* ===== صورة الهيدر (.Main) ===== */
body.indexPage #header.Main {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 29px auto 0 !important;
  width: 100% !important;
  height: 359px !important;
  overflow: visible !important;
  z-index: auto !important;
  background: url(img/header.jpg) center top no-repeat !important;
  background-size: cover !important;
}
body.indexPage #header.Main h1,
body.indexPage #header.Main .sr-only { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ===== شريط التنقل العائم (.Bar) ===== */
body.indexPage #navigation.Bar {
  position: relative !important;
  left: auto !important;
  margin: 0 auto !important;
  top: -370px !important;
  width: fit-content !important;
  height: auto !important;
  z-index: 5 !important;
  border-radius: 18px;
  padding: 10px 18px;
  border: 1px solid silver;
  background-image: linear-gradient(to bottom, #fdfdfd, #e5e5e5, #fdfdfd);
  display: flex;
  justify-content: space-evenly;
  align-items: baseline;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body.indexPage #navigation.Bar a {
  position: static !important;
  cursor: pointer;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-shadow: 1px 1px 1px #fff;
}
body.indexPage #navigation.Bar a:hover { border: 1px solid #ddd; background: #fff; }
body.indexPage #navigation.Bar a:first-child,
body.indexPage #navigation.Bar a:last-child { color: #a20327 !important; }

/* إخفاء أي عنصر تسجيل قديم لو بقي أثر منه بصفحات مخبأة بالكاش */
body.indexPage #register_now { display: none !important; }

/* ===== بطاقة الترحيب (.Body) ===== */
body.indexPage #content .Body {
  width: 90%;
  max-width: 550px;
  margin: 0 auto 30px auto !important;
  position: relative !important;
  top: -70px !important;
  left: auto !important;
  background: linear-gradient(147deg, #ecebe6, #fff, #fff);
  border-radius: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  padding: 14px 18px 18px;
  text-align: center !important;
  box-shadow: 20px -5px 19px -22px #000, -20px -5px 19px -22px #000;
}
body.indexPage .HHF { font-size: 1.61em; color: #69c521; margin: 0 0 8px; font-weight: bold; }
body.indexPage .HDF { line-height: 1.8; font-size: 14px; color: #222; }
body.indexPage .center { margin-top: 12px; }
body.indexPage .button-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #71d000;
  background-image: linear-gradient(to bottom,#cffd74,#84d02a);
  color: #6faf24;
  text-shadow: 0 0 3px #fff;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 8px 22px;
  cursor: pointer;
}
body.indexPage .button-sign:hover { filter: brightness(1.05); }

/* ===== فاصل الأقسام (.news / .rad) ===== */
body.indexPage .news {
  max-width: 100% !important;
  text-align: center;
  display: flex !important;
  justify-content: center;
  margin: 18px 0 10px;
  float: none !important;
}
body.indexPage .rad { width: auto; text-align: center; color: #333; font-size: 16px; margin: 0; }
body.indexPage .rad::after,
body.indexPage .rad::before {
  content: "";
  display: inline-block;
  height: .5em;
  vertical-align: bottom;
  width: 60px;
  border-top: 1px dashed #999;
}
body.indexPage .rad::before { margin-left: 10px; }
body.indexPage .rad::after { margin-right: 10px; }

/* ===== عمودي: النقاط + الإحصائيات ===== */
body.indexPage .info-cols { display: flex; padding: 0 6px; }
body.indexPage .HDS { width: 60%; text-align: right; font-size: 13.5px; line-height: 2; }
body.indexPage .HDS ul { list-style: none; margin: 0; padding: 0; }
body.indexPage .HDT { width: 40%; text-align: right; font-size: 13.5px; line-height: 2; }

/* ===== صور من داخل اللعبة (.HDL) ===== */
body.indexPage ul.HDL {
  width: 100% !important;
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
body.indexPage ul.HDL li { display: block !important; float: none !important; }
body.indexPage .HIm {
  width: 130px;
  height: 88px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 3px;
  cursor: pointer;
}

body.indexPage .newsbox { text-align: right; font-size: 13px; }

/* ===== الفوتر الجديد (footer2) — لا يمس #footer القديم ===== */
body.indexPage #footer2 {
  margin-top: 20px;
  background: #f1f1f1;
  border-top: 1px solid silver;
  box-shadow: 0 -0.5px 7px 0 #b9b9b9;
  padding: 30px 40px;
}
body.indexPage .Grid__Container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  max-width: 800px;
  margin: 0 auto;
}
body.indexPage .Column { display: flex; flex-direction: column; font-size: 14px; align-items: center; }
body.indexPage .Column__Header { opacity: .8; text-transform: uppercase; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
body.indexPage .Column__Link { padding: 5px 0; }
body.indexPage .Column__Link a { color: #333; text-decoration: none; }
body.indexPage .Column__Link a:hover { text-decoration: underline; }

/* ============================================================
   الجوال
   ============================================================ */
@media (max-width: 600px) {
  body.indexPage #header.Main { height: 200px !important; margin: 20px auto 0 !important; }
  body.indexPage #navigation.Bar {
    top: -206px !important;
    max-width: 92%;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 6px 8px;
    font-size: 11.5px;
  }
  body.indexPage #navigation.Bar a { padding: 3px 4px; white-space: nowrap; }
  body.indexPage #content .Body { top: -64px !important; width: 94%; padding: 12px 14px 16px; }
  body.indexPage .HHF { font-size: 1.25em; }
  body.indexPage .HDF { font-size: 13px; line-height: 1.7; }
  body.indexPage .button-sign { font-size: 1rem; padding: 7px 18px; }
  body.indexPage .rad { font-size: 14px; }
  body.indexPage .rad::after, body.indexPage .rad::before { width: 30px; }
  body.indexPage .info-cols { gap: 6px; padding: 0; }
  body.indexPage .HDS, body.indexPage .HDT { font-size: 12px; line-height: 1.9; }
  body.indexPage ul.HDL {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 4px;
  }
  body.indexPage ul.HDL li { flex: 0 0 auto; }
  body.indexPage .HIm { width: 92px; height: 63px; aspect-ratio: auto; }
  body.indexPage #footer2 { padding: 24px 16px; }
  body.indexPage .Grid__Container { gap: 10px; max-width: 340px; font-size: 13px; }
}