/* ============================================================
   ملوك التتار - main.css
   يوضع في: gpack/travian_default/main.css
   تصميم الصفحة الرئيسية فقط (index.php) — مطابق لتصميم قاهر التتار
   ============================================================ */

* { box-sizing: border-box; }
html { zoom: 100%; }

body.indexPage {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: #fff url(img/main-bg.jpg) repeat-x top;
  color: #222;
  direction: rtl;
}

.wrapper { width: 100%; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ===== صورة الهيدر (.Main) ===== */
#header.Main {
  width: 100%;
  height: 359px;
  margin-top: 29px;
  background: url(img/header.jpg) center top no-repeat;
  background-size: cover;
  position: relative;
}

/* ===== شريط التنقل العائم (.Bar) ===== */
#navigation.Bar {
  position: relative;
  top: -370px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 10px 18px;
  border: 1px solid silver;
  background-image: linear-gradient(to bottom, #fdfdfd, #e5e5e5, #fdfdfd);
  width: fit-content;
  display: flex;
  justify-content: space-evenly;
  align-items: baseline;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 5;
}
#navigation.Bar a {
  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;
}
#navigation.Bar a:hover { border: 1px solid #ddd; background: #fff; }
#navigation.Bar a:first-child,
#navigation.Bar a:last-child { color: #a20327; }

/* ===== بطاقة الترحيب (.Body) ===== */
#content .Body {
  width: 90%;
  max-width: 550px;
  margin: 0 auto 30px auto;
  position: relative;
  top: -70px;
  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;
  box-shadow: 20px -5px 19px -22px #000, -20px -5px 19px -22px #000;
}
.HHF { font-size: 1.61em; color: #69c521; margin: 0 0 8px; font-weight: bold; }
.HDF { line-height: 1.8; font-size: 14px; color: #222; }
.center { margin-top: 12px; }
.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;
}
.button-sign:hover { filter: brightness(1.05); }

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

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

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

/* ===== قسم الأخبار داخل البطاقة ===== */
.newsbox { text-align: right; font-size: 13px; }

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

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