/* الدليل السريع — شكل ترفيان الكلاسيكي (يعتمد على compact.css الأصلي)، مع تعديلات بسيطة عشان يتناسب مع كل الشاشات */
body.manual { margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important;
  overflow-y: auto !important; overflow-x: hidden !important; background: #fff !important; -webkit-text-size-adjust: 100%; }
html.mnl-page body.manual { background: #e9e9e9 !important; }

/* الإطار الكلاسيكي (نفس نافذة الدليل الرمادية في ترفيان) */
.mnc { position: relative; padding: 12px 16px 14px; line-height: 1.55; }
.mnc:after { content: ""; display: block; clear: both; }
html.mnl-page .mnc { max-width: 560px; margin: 0 auto 30px; background: #fdfefc; border: 1px solid #a8a8a8;
  box-shadow: inset 0 0 0 6px #ededed, inset 0 0 0 7px #bdbdbd, 0 2px 10px rgba(0, 0, 0, .15); padding: 20px 22px 18px; }
.mnc-top { display: none; }
html.mnl-page .mnc-top { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto; padding: 14px 4px 8px; }
html.mnl-page .mnc-top b { font-size: 15px; color: #555; }
html.mnl-page .mnc-top a { font-size: 13px; }

.mnc h1 { margin: 0 0 10px !important; line-height: 1.3; }
.mnc h1 img.point, .mnc h1 img.unit { vertical-align: middle; margin-left: 2px; }
.mnc p { margin: 10px 0; }
.mnc-note { color: #808080; font-size: 13px; }
.mnc-intro { color: #555; }

/* صور القوات والمباني في نظرة عامة (كانت ثابتة بمكان واحد؛ الحين بجنب القائمة) */
.mnc-pics { float: left; width: 140px; margin: 0 14px 8px 0; }
body.manual .mnc-pics img.troops, body.manual .mnc-pics img.buildings { position: static !important; display: block; margin: 0 0 4px; }
.mnc-tree { margin: 0; padding: 0 18px 0 0; }
.mnc-tree > li { margin: 0 0 10px; list-style: disc; }
.mnc-tree > li > ul { margin: 4px 0 0; padding: 0 18px 0 0; }
.mnc-tree > li > ul > li { list-style: circle; }
.mnc-units, .mnc-list { margin: 6px 0 0; padding: 0 20px 0 0; }
.mnc-units li { list-style: none; margin: 0 0 4px; }
.mnc-units li img.unit { vertical-align: middle; margin-left: 4px; }
.mnc-list li { margin: 0 0 4px; }

/* صفحة الوحدة: نفس جداول ترفيان */
body.manual table#troop_info { width: 100% !important; margin: 6px 0 14px !important; }
body.manual table#troop_info td.big { font-size: 11px; }
.mnc-unit { overflow: hidden; }
body.manual img#big_unit { position: static !important; float: left; width: 150px !important; height: 120px !important; object-fit: contain; margin: 0 10px 8px 0; background: none !important; }
body.manual table#troop_details { width: auto !important; min-width: 58%; }
body.manual table#troop_details th { text-align: right; white-space: nowrap; padding: 2px 6px !important; }
body.manual table#troop_details td { padding: 2px 6px !important; }
body.manual div#t_desc { margin-top: 8px !important; clear: both; }
body.manual div#prereqs { margin-top: 10px !important; }

/* صفحة المبنى */
body.manual img.building { float: left; margin: 0 0 10px 14px !important; }
.mnc-cost img, .mnc-req img { vertical-align: middle; }

/* المميزات */
.mnc-fimg { float: left; width: 130px; height: auto; margin: 0 0 8px 12px; }
.mnc-shot { display: block; width: 100%; max-height: 200px; object-fit: cover; border: 1px solid #c0c0c0; margin: 8px 0 12px; }
body.manual table.mnc-kv { width: 100% !important; margin: 10px 0 !important; clear: both; }
body.manual table.mnc-kv tbody th { width: 30%; text-align: right; padding: 4px 6px !important; white-space: nowrap; }
body.manual table.mnc-kv tbody td { padding: 4px 6px !important; }

/* أسهم التنقل الخضراء (السابق | نظرة عامة | التالي) */
.mnc-nav { clear: both; text-align: center; padding-top: 14px; }
body.manual .mnc-nav img.navi { position: static !important; display: inline-block; }

/* محتوى بلاس والأوسمة القديم */
body.manual table#examples { width: 100% !important; margin-right: 0 !important; }

@media (max-width: 480px) {
  .mnc { padding: 10px 12px 12px; }
  html.mnl-page .mnc { margin: 0 8px 20px; padding: 16px 14px; }
  html.mnl-page .mnc-top { padding: 10px 12px 6px; }
  .mnc h1 { font-size: 20px; }
  .mnc-pics { width: 96px; margin-right: 8px; }
  body.manual .mnc-pics img.troops, body.manual .mnc-pics img.buildings { width: 96px; height: 61px; background-size: 96px 61px; }
  body.manual img#big_unit { float: none; display: block; margin: 0 auto 8px; }
  body.manual table#troop_details { width: 100% !important; }
  body.manual table#troop_info th, body.manual table#troop_info td { font-size: 11px; }
  body.manual img.building { width: 60px; height: 80px; background-size: 60px 80px; }
  .mnc-fimg { width: 96px; }
  body.manual table.mnc-kv tbody th { white-space: normal; width: 34%; }
}
.mnc-c { white-space: nowrap; display: inline-block; }

/* الجوال: الدليل مختصر وما يطوّل (القوائم بعمودين، والصور صغيرة فوق) */
@media (max-width: 480px) {
  .mnc { padding: 8px 10px 10px; font-size: 13px; line-height: 1.45; }
  .mnc h1 { font-size: 18px !important; margin-bottom: 6px !important; }
  .mnc p { margin: 6px 0; }
  .mnc-pics { float: none; width: auto; display: flex; gap: 8px; justify-content: center; margin: 4px 0 8px; }
  body.manual .mnc-pics img.troops, body.manual .mnc-pics img.buildings { width: 110px; height: 70px; background-size: 110px 70px; margin: 0; }
  .mnc-tree { padding: 0; }
  .mnc-tree > li { list-style: none; margin: 0 0 6px; padding: 6px 8px; border: 1px solid #e3e3e3; background: #fafafa; }
  .mnc-tree > li > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 0 14px 0 0; margin-top: 2px; }
  .mnc-units { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 0; }
  .mnc-units li { margin: 0; font-size: 12.5px; }
  .mnc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
  #t_desc ul.mnc-list { display: block; }
  .mnc-note { font-size: 12px; margin: 4px 0 0; }
  .mnc-nav { padding-top: 8px; }
  .mnc-shot { max-height: 140px; }
  body.manual img#big_unit { width: 120px !important; height: 96px !important; }
}