/* ============================================================================
   style.css
   ============================================================================
   ملف تنسيق واحد بيتستخدم في كل صفحات الموقع. مقسّم بتعليقات لأقسام واضحة
   عشان تقدر تدور بسرعة على الحتة اللي عايز تعدلها.
   ============================================================================ */

/* -------- إعدادات عامة -------- */
* {
  box-sizing: border-box; /* يخلي الـ padding والـ border يتحسبوا جوه العرض المحدد مش زيادة عليه */
  margin: 0;
  padding: 0;
}

html, body {
  /* شبكة أمان: أي حاجة تعدّي عرض الشاشة بالغلط (زر منسي، جدول عريض...)
     متبقاش تعمل "سكرول أفقي" يودّي كل الصفحة تتزحلق جنب وتبين فاضية
     من الطرف التاني — بدل كده بتتقص بس، وده أحسن بكثير على الموبايل */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  background: linear-gradient(160deg, #1b1410 0%, #2b1f16 60%, #1b1410 100%);
  color: #f0e6d2; /* لون نص بيج فاتح يناسب ثيم اللعبة */
  min-height: 100vh;
  direction: ltr; /* اللعبة كلها إنجليزي للاعيبة من برا — من الشمال لليمين (كانت rtl وده كان بيقلب علامات الترقيم) */
  /* -------- شكل ماوس مخصص يليق باللعبة (جوهرة ذهبية صغيرة) بدل السهم
     العادي. الـ "2 2" في الآخر بتحدد "نقطة اللمس" الفعلية من الصورة
     (زاويتها العلوية اليسرى تقريبًا)، وauto بعدها fallback لو المتصفح
     مادعمش الصورة لأي سبب -------- */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><polygon points='3,3 14,3 27,12 14,27 3,12' fill='%23e8c477' stroke='%233a2c1c' stroke-width='2' stroke-linejoin='round'/><polygon points='3,3 14,3 9,12' fill='%23fff3d0' opacity='0.8'/></svg>") 3 3, auto;
}

/* -------- صناديق عامة (Cards) -------- */
.card {
  background: rgba(40, 30, 20, 0.85);
  border: 1px solid #6b4f2a;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* -------- صفحة تسجيل الدخول / إنشاء الحساب -------- */
/* -------- فيديو خلفية صفحة تسجيل الدخول: ثابت وراء كل حاجة، بيغطي
   الشاشة كلها بدون ما يتشوه (object-fit: cover)، وطبقة تعتيم بسيطة
   فوقه (::after بتاعة auth-page) عشان فورم تسجيل الدخول يفضل واضح
   وسهل القراءة فوقه -------- */
.auth-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  position: relative;
}

.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 4, 0.55);
  z-index: -1;
}

.auth-box {
  width: 100%;
  max-width: 380px;
}

.auth-box h1 {
  text-align: center;
  margin-bottom: 6px;
  color: #e8c477; /* لون ذهبي */
  font-size: 28px;
}

.auth-box p.subtitle {
  text-align: center;
  color: #b9a689;
  margin-bottom: 20px;
  font-size: 13px;
}

.tabs {
  display: flex;
  margin-bottom: 18px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #6b4f2a;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: #2b1f16;
  color: #b9a689;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.tab-btn.active {
  background: #6b4f2a;
  color: #fff;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #cdbb9c;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: #16100b;
  color: #f0e6d2;
  font-size: 14px;
}

.btn {
  display: inline-block;
  width: 100%;
  padding: 11px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(180deg, #e8c477, #c79c4a);
  color: #241a10;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn:hover {
  opacity: 0.88;
}

.btn.secondary {
  background: #3a2c1c;
  color: #f0e6d2;
  border: 1px solid #6b4f2a;
}

.btn.danger {
  background: #7a2e2e;
  color: #fff;
}

.btn-sm {
  width: auto;
  padding: 6px 12px;
  font-size: 12px;
}

/* -------- بناء جايزة/باقة (RewardBuilder) — بديل عن كتابة JSON يدوي -------- */
.reward-builder {
  background: #241a10;
  border: 1px solid #6b4f2a;
  border-radius: 8px;
  padding: 10px;
  margin: 6px 0;
}
.reward-builder-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.reward-builder-number {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.reward-builder-number input {
  width: 70px;
}
.reward-picker-section {
  margin-top: 8px;
}
.reward-picker-title {
  font-size: 12px;
  color: #cdbb9c;
  margin-bottom: 4px;
}
.reward-picker-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.reward-picker-row select {
  flex: 1 1 auto;
}
.reward-picker-row input {
  width: 90px;
}

/* -------- بادج "غير مقروء" (زرار Messages + تابات صفحة الرسايل) -------- */
.nav-btn-wrap {
  position: relative;
  display: inline-block;
}
.msg-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d94b4b;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  border: 2px solid #16100b;
}
.msg-badge.hidden {
  display: none;
}
.category-tab-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  margin-inline-start: 4px;
  border-radius: 8px;
  background: #d94b4b;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}

.error-box {
  background: rgba(122, 46, 46, 0.35);
  border: 1px solid #a34747;
  color: #ffd4d4;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none; /* بيتظهر بالجافاسكريبت لما يبقى فيه رسالة خطأ */
}

.error-box.visible {
  display: block;
}

/* -------- شريط علوي مشترك (فيه اسم اللاعب وأزرار logout / castle) -------- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid #6b4f2a;
  /* ثابت فوق دايمًا حتى لو الصفحة اتعملها Scroll — عشان الزراير (رسايل/
     طلبات/قلعة...) تفضل في إيدك من غير ما تحتاج ترجع لفوق كل مرة */
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(4px);
}

.top-bar .brand {
  font-weight: bold;
  color: #e8c477;
  font-size: 16px;
}

/* شارة صغيرة بتبان جمب اسم اللاعب فالشريط العلوي، بترسم شعاره (البنر)
   بألوانه وتقسيمته المختارة (شوف applyTopBarBanner فـ api.js) */
.top-bar-banner-badge {
  display: inline-block;
  width: 20px;
  height: 24px;
  margin: 0 6px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.top-bar .actions {
  display: flex;
  gap: 10px;
}

.top-bar .actions .btn {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
}

/* -------- الموبايل: الشريط العلوي كان فيه اسم + شريط موارد + 6-7 زرار
   كلهم في صف واحد من غير التفاف (flex-wrap)، فكانوا بيعدّوا عرض شاشة
   الموبايل بكتير ويودّوا الصفحة كلها "تتمدد" برة الشاشة (سكرول أفقي)
   بدل ما تتلف عادي. الحل: نخلي العناصر تلف على أكتر من سطر وتصغر شوية -------- */
@media (max-width: 768px) {
  .top-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .top-bar .brand {
    width: 100%;
    text-align: center;
    font-size: 14px;
  }
  .top-bar .resource-bar,
  .top-bar .actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  .top-bar .actions .btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  .resource-pill {
    font-size: 12px;
  }
}

/* -------- صفحة النظرة العامة (Overview) -------- */
.overview-wrap {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}

.overview-wrap h2 {
  color: #e8c477;
  margin-bottom: 4px;
}

.overview-wrap .level-badge {
  display: inline-block;
  background: #6b4f2a;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  margin-right: 8px;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.resource-card {
  text-align: center;
  padding: 18px 10px;
}

.resource-card .icon {
  font-size: 30px;
  margin-bottom: 6px;
}

.resource-card .value {
  font-size: 22px;
  font-weight: bold;
  color: #e8c477;
}

.resource-card .label {
  font-size: 12px;
  color: #cdbb9c;
  margin-top: 4px;
}

.resource-card .rate-label {
  font-size: 11px;
  color: #7fbf7f;
  margin-top: 2px;
  min-height: 14px; /* يحافظ على مكان ثابت حتى لو النص فاضي (مفيش إنتاج) */
}

.xp-bar-wrap {
  margin-top: 22px;
}

.xp-bar-bg {
  background: #16100b;
  border: 1px solid #6b4f2a;
  border-radius: 20px;
  height: 16px;
  overflow: hidden;
}

.xp-bar-fill {
  background: linear-gradient(90deg, #7bd4e0, #4aa8c7);
  height: 100%;
  transition: width 0.3s;
}

.hint-text {
  margin-top: 18px;
  font-size: 13px;
  color: #b9a689;
  line-height: 1.7;
}

/* -------- صفحة القلعة (Canvas) -------- */
.castle-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.castle-canvas-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  /* نفس لون تعبئة الأرضية الافتراضي في castle.js (#794014) عشان مفيش
     "فلاش" لوني واضح للحظة قبل ما الـcanvas يخلص أول رسمة له */
  background: #794014;
}

#castleCanvas {
  display: block;
  width: 100%;
  height: 100%;
  /* من غير cursor خاص هنا عمدًا: الماوس المخصص بتاع اللعبة (شوف قاعدة
     body { cursor: ... } فوق) يفضل ظاهر جوه الساحة كمان بدل شكل "الكف"
     الافتراضي، زي ما طلب اللاعب بالظبط */
  background: #794014;
  /* touch-action: none يمنع المتصفح من عمل "سكرول/زوم صفحة" لما اللاعب
     يلمس الساحة على الموبايل، عشان اللمسة توصل بالكامل لجافاسكريبت
     (تحريك الكاميرا / سحب مبنى) بدل ما تتاكل في تمرير الصفحة */
  touch-action: none;
}

.castle-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.castle-controls .row {
  display: flex;
  gap: 6px;
}

.round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #6b4f2a;
  background: rgba(40, 30, 20, 0.9);
  color: #f0e6d2;
  font-size: 18px;
  cursor: pointer;
}

.round-btn:hover {
  background: rgba(107, 79, 42, 0.9);
}

/* زر البناء وزر التجنيد */
/* -------- أزرار الدروج الجانبية الثلاثة (تجنيد/أدوات/خريطة/ترتيب —
   مهام/رسايل/بناء — إعدادات/خروج): 3 دوائر صغيرة تحت يمين الساحة، كل
   واحدة بتفتح/تقفل درج صغير جنبها بدل ما كل الأزرار تكون ظاهرة برة
   طول الوقت -------- */
.side-menu-toggles {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 11;
}
.side-menu-toggle {
  width: 50px;
  height: 50px;
  font-size: 22px;
}
.side-drawer {
  position: absolute;
  bottom: 16px;
  right: 78px;
  background: rgba(20, 14, 8, 0.92);
  border: 1px solid #6b4f2a;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 190px;
  z-index: 11;
}
.side-drawer.hidden {
  display: none;
}
.side-drawer .nav-btn-wrap {
  position: relative;
  display: block;
}
.side-drawer .nav-btn-wrap .btn {
  width: 100%;
}

/* -------- كارت الإعدادات: خانات الفورم متساوية العرض زي أي فورم تاني --------- */
.settings-toggle-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#build-menu-btn {
  padding: 12px 24px; font-size: 18px; font-weight: bold;
  color: white; border: none; border-radius: 25px; cursor: pointer;
  background: #e67e22; width: 100%;
}

/* شريط المباني */
#build-drawer {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
  width: 80%; max-width: 600px; height: 160px; background: rgba(0, 0, 0, 0.85);
  border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 10;
}
.build-tabs { display: flex; gap: 6px; }
.build-tab-btn {
  flex: 1; padding: 6px; border-radius: 8px; border: 1px solid #6b4f2a;
  background: rgba(255,255,255,0.06); color: #cdbb9c; font-size: 12px; cursor: pointer;
}
.build-tab-btn.active { background: #e67e22; color: white; border-color: #e67e22; }

.cards-container { display: flex; gap: 12px; overflow-x: auto; width: 100%; align-items: center; flex: 1; }

/* كرت المبنى */
.building-card {
  position: relative; min-width: 100px; background: #2c3e50; border-radius: 8px;
  padding: 8px; color: white; font-size: 11px; text-align: center; cursor: grab; user-select: none;
}
.building-card img { width: 45px; height: 45px; object-fit: contain; }
/* تضويّ الكارت لما اللاعب يجيله من زرار "🧭 Guide" في صفحة الطلبات */
.building-card.guide-highlight {
  animation: guide-pulse 1s ease-in-out 3;
  box-shadow: 0 0 0 3px #e8c477;
}
@keyframes guide-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.info-btn {
  position: absolute; top: 3px; right: 3px; background: #f1c40f; color: black;
  width: 16px; height: 16px; border-radius: 50%; font-weight: bold; cursor: pointer;
}

/* نافذة الشرح */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 100; }
.modal-content { background: #ac4f4f; padding: 20px; border-radius: 10px; width: 300px; max-width: 90vw; text-align: center; position: relative; }
/* 📜 أي نافذة أطول من الشاشة (زي الإعدادات) بتتسكرول من جوه */
.modal .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-sizing: border-box; }
#settings-modal .modal-content > .close-btn { position: sticky; top: 0; float: right; z-index: 2; }
.hidden { display: none !important; }

/* -------- كارت مركزي بيفتح صفحة كاملة (طلبات/رسايل) جوه iframe بدل ما
   يودّي اللاعب لصفحة منفصلة. الخلفية (card-modal-box) قابلة للتخصيص لكل
   نوع كارت لوحده عن طريق .card-modal-<type> — مثال:
   .card-modal-quests .card-modal-box { background-image: url(/js/your-image.png); background-size: cover; } -------- */
.card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
.card-modal-box {
  background: #6b3f2a;
  border-radius: 14px;
  width: min(920px, 94vw);
  height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.card-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.35);
  color: #f0e6d2;
}
.card-modal-title {
  font-weight: bold;
  font-size: 16px;
}
.card-modal-attack .card-modal-box {
  width: min(1100px, 98vw);
  height: min(900px, 96vh);
}
.card-modal-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: transparent;
}
/* الصفحة اللي شغالة جوه الكارت (iframe) بتشيل شريطها العلوي بنفسها،
   عشان مايبقاش فيه شريطين فوق بعض */
body.embedded-card .top-bar {
  display: none;
}
/* 🎨 كروت التصميم الجديد (التحالف / المهام / البروفايل / المتجر / القيادة ...):
   الكارت الجديد بيظهر لوحده — من غير الكارت القديم وراه (الإطار البني والعنوان والخلفية) */
.card-modal-chromeless .card-modal-box {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
}
.card-modal-chromeless .card-modal-header {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.card-modal-chromeless .card-modal-title {
  display: none;
}
.card-modal-chromeless .card-modal-header .close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #d9493c, #8e1f16);
  border: 2px solid #f5d56b;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
html.skinned-card,
html.skinned-card body.skinned-card {
  background: transparent !important;
  background-image: none !important;
}
.card-modal-chromeless .card-modal-box,
.card-modal-chromeless .card-modal-iframe {
  border: none !important;
  outline: none !important;
}
.card-modal-ownclose .card-modal-header {
  display: none;
}

/* -------- صفحة الداشبورد (أدمن) -------- */
.dashboard-wrap {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px 40px;
}

.dashboard-wrap h2 {
  color: #e8c477;
  margin-bottom: 16px;
}

table.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* على الموبايل، لو جدول (خصوصًا جدول الأدمن اللي فيه أعمدة كتير) مش
   لاقي مساحة كفاية، بيبقى فيه سكرول أفقي جوه الجدول نفسه بس (لف/مرر
   بإصبعك)، مش الصفحة كلها بتتزحلق زي المشكلة الأصلية */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.users-table th,
.users-table td {
  padding: 10px;
  text-align: right;
  border-bottom: 1px solid #3a2c1c;
}

.users-table th {
  color: #e8c477;
  background: rgba(0, 0, 0, 0.25);
}

/* -------- قايمة الترتيب على السيرفر (Leaderboard): صف/كارت لكل لاعب
   بدل جدول عادي، واسم اللاعب جوه "مربع" (pill) بخط سميك وواضح -------- */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #3a2c1c;
  border-radius: 10px;
  padding: 8px 12px;
}

.leaderboard-row.top-rank {
  background: rgba(232, 196, 119, 0.12);
  border-color: #e8c477;
}

.leaderboard-rank {
  width: 40px;
  flex-shrink: 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #e8c477;
}

.leaderboard-name-box {
  flex: 1;
  text-align: right;
  background: rgba(232, 196, 119, 0.1);
  border: 1px solid #6b4f2a;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f0e6d2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.leaderboard-name-box:hover {
  background: rgba(232, 196, 119, 0.22);
  border-color: #e8c477;
}

.leaderboard-power {
  flex-shrink: 0;
  min-width: 90px;
  text-align: left;
  font-weight: bold;
  color: #cdbb9c;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.badge.admin {
  background: #4a6b2e;
  color: #fff;
}

.badge.banned {
  background: #7a2e2e;
  color: #fff;
}

.badge.active {
  background: #2e4a5a;
  color: #fff;
}

.ban-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ban-controls input,
.ban-controls select {
  padding: 5px 6px;
  border-radius: 4px;
  border: 1px solid #6b4f2a;
  background: #16100b;
  color: #f0e6d2;
  font-size: 12px;
}

.ban-controls input {
  width: 60px;
}

.loading-text,
.empty-text {
  color: #b9a689;
  font-size: 13px;
  padding: 20px 0;
}

/* ============================================================================
   الإضافات دي خاصة بنظام المباني الجديد (شريط الموارد، لوحة النقل/الهدم،
   ورسالة الـtoast). اتضافت في نفس أسلوب باقي الملف عشان تبان جزء طبيعي منه.
   ============================================================================ */

/* -------- شريط الموارد أعلى صفحة الساحة -------- */
.resource-bar {
  display: flex;
  gap: 10px;
}

.resource-pill {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6b4f2a;
  color: #f0e6d2;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.resource-pill:hover {
  background: rgba(0, 0, 0, 0.55);
}

/* -------- لوحة "نقل / هدم" اللي بتظهر بعد اختيار مبنى -------- */
.building-action-panel {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 14, 8, 0.95);
  border: 1px solid #6b4f2a;
  border-radius: 10px;
  padding: 14px 18px;
  z-index: 60;
  text-align: center;
  min-width: 220px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.building-action-title {
  color: #e8c477;
  font-weight: bold;
  margin-bottom: 10px;
}

.building-action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.building-action-buttons .btn {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
}

/* -------- رسالة عابرة (toast) لعرض نجاح/فشل عمليات المباني -------- */
.toast-message {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #241a10;
  color: #f0e6d2;
  border: 1px solid #6b4f2a;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.toast-message.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-message.error {
  border-color: #a34747;
  background: rgba(122, 46, 46, 0.9);
}

.toast-message.success {
  border-color: #4caf50;
  background: rgba(46, 92, 46, 0.9);
}

/* ============================================================================
   لوحة التحكم الديناميكية بالمبنى (ترقية/تخطي/تجنيد/نقل/هدم) ونافذة التجنيد
   ============================================================================ */

.building-action-body {
  margin-bottom: 10px;
}

.building-action-timer {
  color: #e8c477;
  font-size: 13px;
  margin-bottom: 6px;
}

.building-action-locked {
  color: #cdbb9c;
  font-size: 12px;
  margin-bottom: 6px;
}

.building-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* -------- نافذة التجنيد -------- */
.recruit-modal-content {
  width: 92vw;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: right;
}

.training-slots-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.training-slot-card {
  border: 1px solid #6b4f2a;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.25);
}
.training-slot-card.busy {
  border-color: #e8c477;
}
.training-slot-card.locked {
  opacity: 0.75;
}
.training-slot-title {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 11px;
}
.training-slot-timer {
  color: #4caf50;
}
.training-slot-empty-label {
  color: #7a6a52;
}
.training-slot-card .btn-sm {
  width: 100%;
  font-size: 10px;
  padding: 4px;
}

.troop-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
  text-align: left;
}
.troop-type-desc {
  font-size: 11px;
  color: #cdbb9c;
}
.troop-type-cost {
  font-size: 11px;
  color: #e8c477;
  margin-top: 2px;
}
.troop-type-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.troop-qty-input {
  width: 55px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: rgba(0, 0, 0, 0.3);
  color: #f0e6d2;
  text-align: center;
}
.training-slots-full-hint {
  color: #e0a5a5;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}

/* ============================================================================
   إضافات الجولة دي: تابات العساكر، صور العساكر، نافذة الجيش
   ============================================================================ */

.troop-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 8px;
}
.troop-tab-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #6b4f2a;
  background: rgba(255, 255, 255, 0.06);
  color: #cdbb9c;
  font-size: 13px;
  cursor: pointer;
}
.troop-tab-btn.active {
  background: #8e44ad;
  color: white;
  border-color: #8e44ad;
}

.training-slot-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
}

.troop-type-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.army-types-list .troop-type-row {
  align-items: center;
}

.troop-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
}

/* ============================================================================
   صفحة الخريطة العالمية
   ============================================================================ */

.world-wrap {
  position: relative;
  /* بقت flex: 1 جوه .castle-wrap (فليكس-كولوم بارتفاع 100vh) بدل رقم ثابت
     (كان 60px) — كده بتاخد "الباقي" من المساحة أيًا كان ارتفاع top-bar
     الفعلي (اللي بيكبر على الموبايل لما الأزرار تلف على أكتر من سطر) */
  flex: 1;
  overflow: hidden;
}

.world-search-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px;
  border-radius: 10px;
  /* عشان الشريط ميعدّيش عرض الشاشة على الموبايل (كانت مربوطة بعرض
     ثابت للـinput بس، فكانت بتخرج برة حدود الشاشات الضيقة) */
  max-width: calc(100vw - 24px);
}
.world-search-bar input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: rgba(0, 0, 0, 0.4);
  color: #f0e6d2;
  min-width: 140px;
  flex: 1;
}
.world-toggle-levels {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f0e6d2;
  font-size: 13px;
  white-space: nowrap;
  padding: 0 4px;
}

.world-canvas-area {
  position: relative;
  width: 100%;
  height: 100%;
}
#worldCanvas {
  display: block;
  width: 100%;
  height: 100%;
  /* من غير cursor خاص هنا عمدًا، عشان ماوس اللعبة المخصص يفضل ظاهر
     (شوف قاعدة body { cursor: ... }) بدل شكل "الكف" الافتراضي */
  touch-action: none; /* يمنع سكرول/زوم الصفحة أثناء سحب الخريطة باللمس */
}

.world-home-arrow {
  position: absolute;
  z-index: 15;
  width: 54px;
  height: 54px;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
}
/* الحلقة اللي بتلف: فيها سن صغير بيشاور على القلعة */
.world-home-arrow .wha-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform 0.12s linear;
}
.world-home-arrow .wha-tip {
  position: absolute;
  right: -9px;
  top: 50%;
  margin-top: -9px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid #f3c95a;
}
/* الشارة نفسها ثابتة ومابتتقلبش */
.world-home-arrow .wha-badge {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: radial-gradient(circle at 35% 30%, #6b4a22, #2a1a0a);
  border: 2px solid #f3c95a;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}
.world-home-arrow .wha-dist {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 2px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: #ffe9b0;
  background: rgba(20, 12, 4, 0.85);
  border: 1px solid rgba(243, 201, 90, 0.6);
  border-radius: 8px;
  padding: 1px 6px;
}
.world-home-arrow:active .wha-badge { transform: scale(0.94); }

.send-resources-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}
.send-resources-form label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.send-resources-form select,
.send-resources-form input {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: rgba(0, 0, 0, 0.3);
  color: #f0e6d2;
}

/* ============================================================================
   صفحة الرسايل
   ============================================================================ */

.messages-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 24px;
  padding: 14px;
}
.messages-compose input,
.messages-compose textarea {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: rgba(0, 0, 0, 0.3);
  color: #f0e6d2;
  font-family: inherit;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.message-card {
  padding: 12px 14px;
  text-align: right;
  cursor: pointer;
}
.message-card:hover {
  border-color: #e8c477;
}
.message-card.unread {
  border-color: #e8c477;
}
.message-card.unread .message-subject::before {
  content: "● ";
  color: #d94b4b;
}
.message-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #cdbb9c;
  margin-bottom: 4px;
}
.message-subject {
  font-weight: bold;
  color: #e8c477;
  margin-bottom: 6px;
}
.message-body {
  font-size: 13px;
  line-height: 1.6;
}

/* -------- كارت تفاصيل رسالة (يفتح في نص الشاشة) -------- */
.message-detail-content {
  width: min(520px, 92vw);
  text-align: right;
}
.message-detail-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.message-detail-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #3a2c1c;
  border: 2px solid #6b4f2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.message-detail-body-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.message-detail-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #cdbb9c;
  margin-bottom: 6px;
}

/* ============================================================================
   صفحة الهجوم
   ============================================================================ */

.attack-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.attack-section {
  padding: 12px;
}
.attack-wave {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 0;
}
.attack-wave-title {
  font-size: 12px;
  color: #e8c477;
  margin-bottom: 6px;
}
.attack-troop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.attack-troop-row input {
  width: 60px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #6b4f2a;
  background: rgba(0, 0, 0, 0.3);
  color: #f0e6d2;
  text-align: center;
}

/* ============================================================================
   المتجر الثابت
   ============================================================================ */
.shop-my-resources {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 13px;
  color: #e8c477;
}
.troop-type-total {
  font-size: 11px;
  color: #7fbf7f;
  margin-top: 2px;
}
.attack-wave-subtitle {
  font-size: 10px;
  color: #cdbb9c;
  margin: 6px 0 3px;
  text-transform: uppercase;
}
.locked-tool-row {
  opacity: 0.6;
}

/* ============================================================================
   تابات وصندوق العروض في صفحة الرسائل
   ============================================================================ */
.messages-bulk-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.messages-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.offer-box {
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #e8c477;
  border-radius: 8px;
  font-size: 12px;
}
.offer-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin: 6px 0 8px;
}
.offer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(232, 196, 119, 0.12);
  border: 1px solid rgba(232, 196, 119, 0.45);
  border-radius: 8px;
  text-align: center;
  min-width: 0;
}
.offer-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.offer-item-emoji {
  font-size: 30px;
  line-height: 44px;
  height: 44px;
}
.offer-item b {
  font-size: 13px;
}
.offer-item small {
  font-size: 10px;
  opacity: 0.85;
  overflow-wrap: anywhere;
}
.message-actions {
  margin-top: 8px;
  text-align: left;
}

/* ============================================================================
   نافذة تهنئة صعود اللفل
   ============================================================================ */
.level-up-content {
  text-align: center;
}
.level-up-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}
.level-up-ruby {
  color: #e8c477;
  font-weight: bold;
  font-size: 16px;
  margin: 8px 0 14px;
}

/* ============================================================================
   كارت تعديل الشعار (Banner Editor)
   ============================================================================ */
.banner-editor-card {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.banner-big-preview {
  width: 160px;
  height: 100px;
  margin: 0 auto 10px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.banner-pattern-row,
.banner-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.banner-pattern-btn.active {
  outline: 2px solid #e8c477;
  outline-offset: 1px;
}
.banner-color-swatch-btn {
  width: 46px;
  height: 34px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.banner-color-swatch-btn.active {
  outline: 2px solid #e8c477;
  outline-offset: 1px;
}
.banner-palette-popup {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}
.banner-palette-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  justify-items: center;
}
.banner-palette-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.banner-palette-swatch:hover {
  transform: scale(1.15);
}
@media (max-width: 480px) {
  .banner-palette-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ============================================================================
   تبويبات لوحة الأدمن (سلايدات): كل قسم بقى ظاهر/مخفي بدل صفحة سكرول طويلة
   ============================================================================ */
.admin-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 0;
  position: sticky;
  top: 56px;
  z-index: 50;
  background: rgba(20, 15, 10, 0.9);
  backdrop-filter: blur(4px);
}
.admin-tab-btn {
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #6b4f2a;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.06);
  color: #cdbb9c;
  font-size: 13px;
  cursor: pointer;
}
.admin-tab-btn.active {
  background: #8e44ad;
  color: white;
  border-color: #8e44ad;
}
.admin-tab-panel.hidden {
  display: none;
}

/* -------- سجل نشاط الأدمن -------- */
.admin-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.admin-activity-row {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.admin-activity-row .admin-activity-time {
  opacity: 0.65;
  white-space: nowrap;
  font-size: 12px;
}

/* -------- عمود "متصل الآن" فجدول الحسابات -------- */
.online-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #666;
  margin-left: 5px;
}
.online-dot.online {
  background: #2ecc71;
  box-shadow: 0 0 5px #2ecc71;
}

/* -------- شبكة اختيار صورة المتجر المؤقت (10 خيارات) -------- */
.temp-shop-image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.temp-shop-image-option {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05) center/cover no-repeat;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #cdbb9c;
}
.temp-shop-image-option.active {
  border-color: #e8c477;
  box-shadow: 0 0 6px rgba(232, 196, 119, 0.7);
}
.temp-shop-product-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 5px;
  font-size: 13px;
}

/* -------- عرض المتجر المؤقت جوه ساحة اللاعب، جمب الجدار -------- */
.yard-temp-shop {
  position: absolute;
  z-index: 15;
  cursor: pointer;
  width: 72px;
  height: 72px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.yard-temp-shop:hover {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) brightness(1.15);
}

/* بادج على زراير القوائم الجانبية (🎖️ 📜 ⚙️): بيجمع أي بادج جوه القائمة */
.side-menu-toggles .toggle-wrap { display: block; }
.side-menu-toggles .toggle-wrap .msg-badge { top: -4px; right: -4px; }

/* -------- كارت شرح المبنى (! / Info) -------- */
#info-modal.bi-modal .modal-content { width: min(460px, 94vw); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg,#3d2812,#24170a); border: 1.5px solid #b8862b; color: #f6e9c8; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#info-modal.bi-modal h2 { color: #f3c95a; margin: 4px 0 6px; }
#info-modal.bi-modal #modal-desc { font-size: 13.5px; line-height: 1.5; opacity: .92; margin: 0 0 10px; }
.bi-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bi-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #b8862b; background: #5a3a17; color: #ffe7a8; font-size: 18px; cursor: pointer; }
.bi-arrow:disabled { opacity: .3; cursor: default; }
.bi-level { font-size: 15px; }
.bi-tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
.bi-tag.now { background: #f3c95a; color: #2a1a08; }
.bi-tag.done { background: #2f6b2a; color: #dff5d8; }
.bi-img { height: 190px; display: flex; align-items: center; justify-content: center; margin: 8px 0 4px; background: radial-gradient(ellipse at 50% 70%, rgba(243,201,90,.18), transparent 70%); }
.bi-img img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.bi-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.bi-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(243,201,90,.3); cursor: pointer; }
.bi-dots span.on { background: #f3c95a; }
.bi-table { width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: left; }
.bi-table td { padding: 6px 6px; border-top: 1px solid rgba(184,134,43,.25); }
.bi-table td:last-child { text-align: right; font-weight: 600; }
.bi-up { color: #8fe07a; font-weight: 600; }
.bi-locked { color: #ff9b7a; }

/* -------- كارت "الإيفنتات اتفتحت" (لفل 10) -------- */
.events-intro-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; animation: eiFade .3s ease; }
.events-intro-card { width: min(440px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg,#4a2f0c,#24170a); border: 2px solid #f3c95a; border-radius: 16px; padding: 18px; color: #f6e9c8; text-align: center; box-shadow: 0 0 40px rgba(243,201,90,.35); direction: ltr; }
.events-intro-card h2 { color: #f3c95a; margin: 4px 0; font-size: 24px; }
.ei-burst { font-size: 44px; animation: eiPop .6s ease; }
.ei-sub { font-size: 14px; margin: 4px 0 12px; }
.ei-event { text-align: left; background: rgba(0,0,0,.28); border: 1px solid rgba(243,201,90,.4); border-radius: 12px; padding: 12px; }
.ei-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ei-head img { width: 58px; height: 58px; object-fit: contain; }
.ei-time { font-size: 12.5px; color: #ffe7a8; }
.ei-event ul { margin: 6px 0; padding-left: 4px; list-style: none; font-size: 13.5px; line-height: 1.7; }
.ei-tip { font-size: 12px; opacity: .85; margin: 6px 0 0; }
.ei-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.ei-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ei-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,201,90,.3); }
.ei-dots i.on { background: #f3c95a; width: 20px; border-radius: 99px; }
.ei-skip { display: block; margin: 10px auto 0; background: none; border: 0; color: #cdb68a; font-size: 13px; text-decoration: underline; cursor: pointer; width: auto; }
.events-intro-card .ei-event ul { text-align: left; }
@keyframes eiFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes eiPop { 0% { transform: scale(.3) } 70% { transform: scale(1.2) } 100% { transform: scale(1) } }

/* العسكري المطلوب في مهمة التجنيد (زرار 🧭 Guide) */
.troop-type-row.guide-highlight { box-shadow: 0 0 0 3px #e8c477; border-radius: 10px; animation: guide-pulse 1s ease-in-out 3; }

/* -------- 👑 تحدي الملك -------- */
.kc-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 14px; animation: eiFade .3s ease; }
.kc-wrap { position: relative; width: min(640px, 100%); max-height: 94vh; overflow-y: auto; }
.kc-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #b8862b; background: rgba(0,0,0,.5); color: #ffe7a8; cursor: pointer; font-size: 16px; }
.kc-card { display: flex; align-items: flex-end; gap: 6px; background: radial-gradient(ellipse at 20% 100%, rgba(243,201,90,.22), transparent 60%), linear-gradient(160deg, #4a2f0c, #1f1307); border: 2px solid #f3c95a; border-radius: 18px; padding: 16px 16px 16px 0; color: #f6e9c8; box-shadow: 0 0 40px rgba(243,201,90,.3); overflow: hidden; text-align: left; direction: ltr; }
.kc-card.kc-done { box-shadow: 0 0 50px rgba(143,224,122,.45); border-color: #8fe07a; }
.kc-king { width: 38%; max-width: 230px; align-self: flex-end; margin-bottom: -16px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.kc-body { flex: 1; min-width: 0; padding-left: 4px; }
.kc-kicker { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #e8c477; }
.kc-body h2 { margin: 4px 0 6px; font-size: 24px; color: #f3c95a; line-height: 1.15; }
.kc-timer { display: inline-block; font-size: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(243,201,90,.5); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
.kc-speech { font-style: italic; font-size: 14px; line-height: 1.5; margin: 6px 0 10px; }
.kc-sign { font-style: normal; font-size: 12px; color: #e8c477; }
.kc-bar { height: 10px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; }
.kc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #b8862b, #f3c95a); }
.kc-level { font-size: 13px; margin: 4px 0 10px; }
.kc-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kc-reward { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.28); border: 1px solid rgba(243,201,90,.35); border-radius: 10px; padding: 6px 8px; font-size: 13px; font-weight: 600; }
.kc-reward span { font-size: 16px; }
.kc-actions { margin-top: 12px; }
.kc-btn { width: 100%; padding: 11px; border: none; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; background: linear-gradient(180deg, #f3c95a, #b8862b); color: #2a1a08; }
.kc-btn:disabled { opacity: .6; }
@media (max-width: 480px) {
  .kc-card { flex-direction: column; align-items: stretch; padding: 12px; }
  .kc-king { width: 46%; margin: 0 auto -6px; }
  .kc-body h2 { font-size: 20px; }
}

/* -------- 💬 شات التحالف على جنب الشاشة (كمبيوتر بس) -------- */
.acd { position: fixed; left: 16px; bottom: 132px; width: 300px; z-index: 20; background: rgba(20, 14, 8, .92); border: 1px solid #6b4f2a; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); color: #f6e9c8; font-size: 13px; direction: ltr; text-align: left; }
.acd-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-weight: 700; color: #f3c95a; user-select: none; }
.acd-head > span:first-child { flex: 1; }
.acd-badge { background: #d94b4b; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 18px; min-width: 18px; text-align: center; }
.acd-badge.hidden { display: none; }
.acd-open { background: none; border: 1px solid #6b4f2a; border-radius: 8px; color: inherit; cursor: pointer; padding: 1px 6px; }
.acd-caret { transition: transform .2s; }
.acd:not(.open) .acd-caret { transform: rotate(180deg); }
.acd:not(.open) .acd-body { display: none; }
.acd-list { height: 220px; overflow-y: auto; padding: 4px 10px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(107,79,42,.6); }
.acd-empty { opacity: .7; margin: auto; }
.acd-msg { background: rgba(255,255,255,.05); border-radius: 8px; padding: 5px 8px; word-wrap: break-word; }
.acd-msg.me { background: rgba(243,201,90,.12); }
.acd-msg b { color: #e8c477; margin-right: 6px; }
.acd-time { font-size: 10.5px; opacity: .6; }
.acd-send { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(107,79,42,.6); }
.acd-send input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid #6b4f2a; border-radius: 8px; color: #f6e9c8; padding: 6px 8px; }
.acd-send button { background: linear-gradient(180deg,#f3c95a,#b8862b); border: none; border-radius: 8px; padding: 0 12px; cursor: pointer; color: #2a1a08; font-weight: 800; }
@media (max-width: 1023px), (pointer: coarse) { .acd { display: none; } }
/* شات الجنب: تابات تحالف / سيرفر */
.acd { width: 320px; }
.acd-head { gap: 6px; cursor: default; padding: 6px 8px; }
.acd-tabs { flex: 1; display: flex; gap: 4px; }
.acd-tab { position: relative; flex: 1; background: rgba(0,0,0,.3); border: 1px solid #6b4f2a; border-radius: 8px; color: #cdb68a; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 6px; cursor: pointer; }
.acd-tab.on { color: #2a1a08; background: linear-gradient(180deg,#f3c95a,#b8862b); border-color: #f3c95a; }
.acd-tab .acd-badge { position: absolute; top: -7px; right: -5px; }
.acd-caret { background: none; border: 1px solid #6b4f2a; border-radius: 8px; color: #f3c95a; cursor: pointer; padding: 1px 7px; }
.acd-tag { color: #8fd3ff; font-weight: 700; margin-right: 3px; font-size: 11.5px; }
.acd-lv { font-size: 10.5px; opacity: .6; margin-right: 6px; }

/* ===== R14: رسايل النظام في الشات + الألقاب + أزرار الإبلاغ ===== */
.acd-msg { position: relative; }
.acd-msg.sys { background: linear-gradient(90deg, rgba(243,201,90,.18), rgba(243,201,90,.06)); border: 1px solid rgba(243,201,90,.35); color: #f7e2a8; font-weight: 600; }
.acd-msg.sys .acd-time { display: block; text-align: right; }
.acd-title { font-size: 10px; font-weight: 800; color: #1a1206; background: linear-gradient(135deg, #f3c95a, #e0a53a); border-radius: 999px; padding: 1px 7px; margin-right: 6px; white-space: nowrap; }
.acd-tools { position: absolute; top: 3px; right: 4px; display: none; gap: 2px; }
.acd-msg:hover .acd-tools, .acd-msg:focus-within .acd-tools { display: inline-flex; }
@media (hover: none) { .acd-tools { display: inline-flex; opacity: .55; } }
.acd-tools button { background: rgba(0,0,0,.35); border: 0; color: #fff; border-radius: 6px; font-size: 11px; line-height: 1; padding: 3px 5px; cursor: pointer; }
.acd-tools button:disabled { opacity: .35; cursor: default; }

/* ===== R14: الشريط العلوي على التابلت والموبايل بالعرض (كان بيتزنق ويتكسر لسطور) ===== */
@media (max-width: 1180px) {
  .top-bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .top-bar .resource-bar, .top-bar .actions { flex-wrap: wrap; gap: 6px; }
  .resource-pill, .top-bar .actions .btn { white-space: nowrap; }
  .top-bar .actions .btn { padding: 6px 10px; font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .top-bar { padding: 4px 8px; gap: 4px 8px; flex-wrap: nowrap; justify-content: flex-start; }
  .top-bar .brand { display: none; }
  .top-bar .resource-bar { flex: 1 1 auto; min-width: 0; }
  .top-bar .resource-bar, .top-bar .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; justify-content: flex-start; }
  .top-bar .resource-bar::-webkit-scrollbar, .top-bar .actions::-webkit-scrollbar { display: none; }
  .top-bar .actions { flex: 0 1 auto; min-width: 0; }
  .resource-pill { padding: 3px 8px; font-size: 11.5px; flex: 0 0 auto; }
  .top-bar .actions .btn { padding: 4px 8px; font-size: 11.5px; flex: 0 0 auto; }
  .top-bar .actions .nav-btn-wrap { flex: 0 0 auto; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .top-bar { padding: 6px 8px; gap: 5px; }
  .top-bar .brand { font-size: 13px; }
  .top-bar .resource-bar { gap: 4px; }
  .resource-pill { padding: 4px 8px; font-size: 11.5px; }
  .top-bar .actions .btn { padding: 5px 9px; font-size: 11.5px; }
}

/* ===== R15: 🗿 التماثيل في شريط البناء ===== */
.statue-note { flex: 0 0 auto; min-width: 170px; max-width: 200px; display: flex; flex-direction: column; justify-content: center; gap: 3px; background: linear-gradient(180deg, rgba(243,201,90,.22), rgba(243,201,90,.06)); border: 1.5px solid #f3c95a; border-radius: 12px; padding: 10px; color: #f6e9c8; cursor: pointer; text-align: center; }
.statue-note b { color: #ffe08a; font-size: 14px; }
.statue-note span { font-weight: 800; }
.statue-note small { font-size: 11px; opacity: .85; line-height: 1.35; }
.building-card.statue-card .deco-po { color: #9fe28a; font-weight: 800; font-size: 12px; }
.building-card.statue-card.trophy { border-color: #f3c95a; box-shadow: 0 0 14px rgba(243,201,90,.45); background: linear-gradient(180deg, rgba(120,80,20,.9), rgba(50,30,8,.9)); }
.building-card.statue-card.disabled { opacity: .6; filter: saturate(.7); cursor: default; }
.building-card .deco-owned { position: absolute; top: 4px; left: 6px; background: #3f8f2a; color: #fff; font-weight: 900; font-size: 12px; border-radius: 999px; padding: 1px 7px; }
@media (max-width: 600px) {
  .statue-note { min-width: 118px; max-width: 130px; padding: 6px; }
  .statue-note b { font-size: 12px; }
  .statue-note span { font-size: 12px; }
  .statue-note small { display: none; }
}
.building-card.statue-card { font-size: 10.5px; line-height: 1.25; padding: 6px 6px 4px; min-width: 128px; }
.building-card.statue-card img { width: 44px; height: 36px; }
.building-card.statue-card b { font-size: 11px; }

/* ---- كارت التجنيد: صورة + علامة ! فوق، والشريط تحت العسكري ---- */
.troop-type-row.tt-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.troop-type-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.troop-type-info { min-width: 0; flex: 1 1 auto; }
.troop-type-pic { position: relative; flex: 0 0 auto; cursor: pointer; }
.troop-info-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #f3c95a; color: #2a1a08;
  font-weight: 900; font-size: 12px; line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.tt-stack .troop-type-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-width: 0; flex-shrink: 1; }
.troop-type-actions .ns-wrap { min-width: 0; }
.troop-type-actions .ns-wrap { flex: 1 1 200px; }
.troop-type-actions .troop-recruit-btn { flex: 0 0 auto; margin-left: auto; }
.troop-type-cost { word-break: break-word; }
.recruit-modal-content, .modal-content { box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
/* أي صف فيه شريط أرقام: الشريط ينزل سطر لوحده بدل ما يخرج برا الكارت */
.troop-type-row { flex-wrap: wrap; }
.troop-type-row .troop-type-info { flex: 1 1 150px; min-width: 0; }
.troop-type-row > .ns-wrap, .troop-type-actions:has(.ns-wrap) { flex: 1 1 100%; flex-wrap: wrap; }
.troop-type-actions:has(.ns-wrap) .ns-wrap { flex: 1 1 200px; }

/* درج البحث في الخريطة */
.world-search-bar { transition: transform .28s ease, opacity .28s ease; }
.world-wrap.search-hidden .world-search-bar { transform: translate(-50%, calc(-100% - 20px)); opacity: 0; pointer-events: none; }
.world-search-toggle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 21; width: 44px; height: 20px; padding: 0;
  border: 1px solid #6b4f2a; border-top: 0; border-radius: 0 0 10px 10px; background: rgba(36,23,10,.9); color: #f3c95a; font-size: 11px; cursor: pointer; }
.world-wrap:not(.search-hidden) .world-search-bar { top: 22px; }

/* كروت التخطي (الأصغر شمال → 24 ساعة يمين) */
.ts-cards { display: flex; flex-direction: row; direction: ltr; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; align-items: flex-end; }
.ts-card { flex: 0 0 auto; width: 74px; border-radius: 12px; border: 1px solid rgba(243,201,90,.45); background: rgba(0,0,0,.3);
  text-align: center; padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ts-card.big { width: 92px; border-color: #f3c95a; background: rgba(243,201,90,.12); }
.ts-card .ts-time { font-size: 18px; font-weight: 800; color: #f3c95a; }
.ts-card.big .ts-time { font-size: 22px; }
.ts-card .ts-have { font-size: 12px; color: #cdbb9c; }
.ts-free { text-align: center; padding: 8px; }
/* إرسال الموارد: 3 خانات */
.send-resources-form .sr-row { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-weight: 700; }
.send-resources-form button { display: block; width: 100%; margin-top: 6px; }

/* 🏗️ مربع البناء الحالي (فوق على اليمين، بيتسحب لجوه بالسهم) */
.build-queue-box { position: absolute; top: 10px; right: 0; z-index: 30; display: flex; align-items: flex-start; transition: transform .3s ease; max-width: 240px; }
.build-queue-box.collapsed { transform: translateX(calc(100% - 26px)); }
.build-queue-box .bq-toggle { width: 26px; min-height: 44px; border: 1px solid #c9a24a; border-right: 0; border-radius: 8px 0 0 8px; background: rgba(40, 26, 10, .92); color: #f3c95a; cursor: pointer; font-size: 13px; padding: 0; }
.build-queue-box .bq-body { background: rgba(30, 20, 8, .9); border: 1px solid #c9a24a; border-right: 0; border-radius: 0 0 0 8px; padding: 6px; min-width: 170px; color: #f5e6c4; font-size: 12px; }
.build-queue-box .bq-title { font-weight: 700; color: #f3c95a; margin-bottom: 4px; }
.build-queue-box .bq-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 74, .35); border-radius: 6px; color: inherit; padding: 4px 6px; margin-top: 4px; cursor: pointer; text-align: left; font-size: 12px; }
.build-queue-box .bq-row:hover { background: rgba(243, 201, 90, .18); }
.build-queue-box .bq-empty { opacity: .8; }

/* 🟢 المتصلين في التحالف */
.acd-online { padding: 4px 10px 0; font-size: 12px; } .acd-online.hidden, .acd-online-list.hidden { display: none; }
.acd-online button { background: rgba(60,170,60,.15); border: 1px solid rgba(90,200,90,.5); color: #b9f5b9; border-radius: 99px; padding: 2px 10px; cursor: pointer; font-size: 12px; }
.acd-online-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 2px; max-height: 90px; overflow-y: auto; }
.acd-on { background: rgba(0,0,0,.3); border: 1px solid rgba(107,79,42,.8); border-radius: 99px; padding: 1px 8px; color: #f3e6c8; } .acd-on small { color: #cdb68a; }

/* 🛡️ محرر الشعار: معاينة العلم + الدرع + شبكة الرموز */
.banner-previews { display: flex; justify-content: center; align-items: flex-end; gap: 24px; margin-bottom: 8px; }
.banner-previews > div { text-align: center; }
.banner-previews small { display: block; color: #cdb68a; font-size: 11px; margin-top: 2px; }
.banner-previews .banner-big-preview { width: 170px; height: 117px; border: 0; box-shadow: none; background-size: contain; background-repeat: no-repeat; margin: 0 auto; }
.banner-shield-preview { width: 84px; height: 101px; background-size: contain; background-repeat: no-repeat; margin: 0 auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.banner-emblem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-bottom: 8px; }
.banner-emblem-btn { height: 46px; border-radius: 10px; border: 1.5px solid rgba(243,201,90,.35); background: rgba(0,0,0,.35); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; color: #e8c477; font-size: 12px; }
.banner-emblem-btn.active { border-color: #f3c95a; background: rgba(243,201,90,.2); box-shadow: 0 0 0 2px rgba(243,201,90,.35); }
.banner-emblem-btn svg { width: 34px; height: 34px; }
.profile-shield { width: 64px; height: 77px; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }

/* 🌐 ترجمة رسايل الشات */
.acd-tr { display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none; color: #8fc3ff; font-size: 11px; cursor: pointer; text-decoration: underline; }
.acd-tr:disabled { opacity: .5; }
.acd-trd { margin-top: 3px; padding: 4px 8px; border-left: 3px solid #8fc3ff; background: rgba(143,195,255,.1); border-radius: 6px; color: #e6f1ff; font-size: 13px; unicode-bidi: plaintext; }

/* 🏝️ إطار اسم سادة الجزر في الشات */
.acd-frame { padding: 0 6px; border-radius: 7px; border: 1.5px solid #3fc6d8; background: linear-gradient(90deg, rgba(63,198,216,.25), rgba(63,198,216,.08)); box-shadow: 0 0 6px rgba(63,198,216,.55); }
.acd-frame-isles-gold { border-color: #f3c95a; background: linear-gradient(90deg, rgba(243,201,90,.35), rgba(63,198,216,.15)); box-shadow: 0 0 8px rgba(243,201,90,.7); animation: acdGlow 2.4s ease-in-out infinite; }
@keyframes acdGlow { 50% { box-shadow: 0 0 14px rgba(243,201,90,.95); } }

/* 🎁 زرار عرض البداية (للاعيبة الجداد) */
.starter-offer-btn { position: fixed; left: 12px; top: 170px; z-index: 60; width: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 14px; border: 2px solid #7ff0a8; background: linear-gradient(180deg, #2f9e5b, #14522e); color: #fff; cursor: pointer; box-shadow: 0 0 14px rgba(90,220,140,.6); animation: starterPulse 2s ease-in-out infinite; }
.starter-offer-btn span { font-size: 24px; line-height: 1; }
.starter-offer-btn b { font-size: 11px; }
.starter-offer-btn small { font-size: 10.5px; opacity: .9; }
@keyframes starterPulse { 50% { transform: scale(1.06); } }

/* 🎨 أيقونات الموارد */
.res-ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }

/* 📖 زرار كتاب المهام (رابع زرار تحت يمين) */
.btn.discord-btn { background: linear-gradient(180deg, #6773f2, #4752c4); border-color: #9aa3ff; color: #fff; }
.round-btn.support-btn { background: linear-gradient(180deg, #2f5f8f, #16304d); border-color: #8cc4ff; box-shadow: 0 0 10px rgba(120,180,255,.45); }
.round-btn.quest-book-btn { background: linear-gradient(180deg, #7a4a1e, #3d250e); border-color: #f3c95a; box-shadow: 0 0 10px rgba(243,201,90,.45); }

/* 🧭 الحركة العامة */
.world-moves-btn { position: absolute; left: 12px; bottom: 18px; z-index: 16; width: auto; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 2px solid #f3c95a; background: linear-gradient(180deg, #5a3a17, #2a1a0a); color: #ffe9b0; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.world-moves-btn b { background: #f3c95a; color: #2a1a08; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.world-moves-btn b.danger, .world-moves-btn.has-danger b { background: #e0453a; color: #fff; }
.world-moves-btn.has-danger { animation: mvPulse 1.4s ease-in-out infinite; border-color: #ff7a6a; }
@keyframes mvPulse { 50% { box-shadow: 0 0 16px rgba(255,90,70,.85); } }
.mv-content { max-width: 560px; width: calc(100vw - 24px); max-height: 86vh; overflow-y: auto; text-align: left; direction: ltr; }
.mv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; }
.mv-tabs button { width: auto; padding: 7px 4px; border-radius: 10px; border: 1px solid #6b4f2a; background: rgba(0,0,0,.3); color: #f6e9c8; font-size: 12px; cursor: pointer; }
.mv-tabs button.on { background: #f3c95a; color: #2a1a08; font-weight: 800; }
.mv-card { background: rgba(0,0,0,.28); border: 1px solid #6b4f2a; border-left-width: 4px; border-radius: 12px; padding: 9px 10px; margin-bottom: 8px; }
.mv-card.mv-mine { border-left-color: #f3c95a; }
.mv-card.mv-incoming { border-left-color: #e0453a; background: rgba(120,20,10,.25); }
.mv-card.mv-alliance { border-left-color: #4fa3e0; }
.mv-top { display: flex; gap: 9px; align-items: center; }
.mv-ic { font-size: 24px; }
.mv-main { flex: 1; min-width: 0; }
.mv-kind { font-size: 11px; color: #cdb68a; text-transform: uppercase; letter-spacing: .5px; }
.mv-title { font-weight: 800; color: #ffe9b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-sub { font-size: 12px; color: #d9c7a0; }
.mv-eta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.mv-eta b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.mv-eta small { font-size: 12px; color: #d9c7a0; }
.mv-bar { height: 5px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; margin: 7px 0 6px; }
.mv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8862b, #f3c95a); }
.mv-incoming .mv-bar i { background: linear-gradient(90deg, #a02a20, #ff6a5a); }
.mv-detail { background: rgba(0,0,0,.25); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; font-size: 12.5px; }
.mv-side { margin-bottom: 5px; }
.mv-side em { display: inline-block; font-style: normal; background: rgba(243,201,90,.12); border: 1px solid rgba(243,201,90,.3); border-radius: 7px; padding: 1px 6px; margin: 2px 3px 0 0; }
.mv-side em.tool { background: rgba(120,170,255,.12); border-color: rgba(120,170,255,.35); }
.mv-wave span { color: #cdb68a; margin-right: 4px; }
/* 📊 إجمالي كل جانب في الهجمة (عساكر + أدوات بالصور) */
.mv-tot .mv-sum { color: #f3c95a; font-weight: 700; font-size: 12.5px; margin: 2px 0 4px; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-chip { display: flex; flex-direction: column; align-items: center; width: 64px; padding: 4px 2px; border-radius: 9px; background: rgba(243,201,90,.12); border: 1px solid rgba(243,201,90,.35); text-align: center; }
.mv-chip.tool { background: rgba(120,170,255,.12); border-color: rgba(120,170,255,.4); }
.mv-chip img { width: 38px; height: 38px; object-fit: contain; }
.mv-chip b { font-size: 13px; color: #fff; }
.mv-chip small { font-size: 9.5px; color: #cdb68a; line-height: 1.1; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-actions .btn { width: auto; }
/* 🧭 الحركة العامة: سطر واحد لكل حركة مع مسار متحرك (أزرق طالع / أحمر جاي / دهبي تحالف) */
.mv-card { padding: 7px 9px; margin-bottom: 6px; }
.mv-card.mv-dir-out { border-left-color: #3fa9ff; background: linear-gradient(90deg, rgba(63,169,255,.10), rgba(0,0,0,.28) 60%); }
.mv-card.mv-dir-in { border-left-color: #ff4a3d; background: linear-gradient(90deg, rgba(255,74,61,.14), rgba(0,0,0,.28) 60%); }
.mv-card.mv-dir-ally { border-left-color: #f3c95a; }
.mv-row { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mv-end { width: 58px; flex: none; text-align: center; min-width: 0; }
.mv-end .mv-ic { display: block; font-size: 24px; line-height: 1.1; }
.mv-end small { display: block; font-size: 10.5px; color: #d9c7a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-route { flex: 1; min-width: 36px; height: 26px; }
.mv-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 10; animation: mvDash 1s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes mvDash { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .mv-path { animation: none; } }
.mv-stat { flex: none; min-width: 58px; text-align: center; }
.mv-stat small { display: block; font-size: 10.5px; color: #cdb68a; white-space: nowrap; }
.mv-stat b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-card .mv-sub { font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-card .mv-bar { margin: 5px 0 2px; height: 4px; }
.mv-dir-out .mv-bar i { background: linear-gradient(90deg, #1f6fb8, #3fa9ff); }
.mv-card.open .mv-detail { margin-top: 6px; }
@media (max-width: 420px) { .mv-end { width: 46px; } .mv-stat { min-width: 48px; } .mv-stat b { font-size: 13px; } .mv-tabs button { font-size: 11px; padding: 6px 2px; } }

/* 🛠️ كارت تفاصيل الأداة */
.ti-modal { z-index: 10060; }
.ti-card { max-width: 400px; width: calc(100vw - 30px); text-align: left; direction: ltr; position: relative; background: linear-gradient(180deg, #4a3014, #24170a) !important; border: 2px solid #f3c95a; border-radius: 16px; padding: 16px; color: #f6e9c8; }
.ti-card .close-btn { position: absolute; right: 12px; top: 8px; font-size: 24px; cursor: pointer; color: #f3c95a; }
.ti-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.ti-head { display: flex; gap: 12px; align-items: center; }
.ti-head img { width: 64px; height: 64px; object-fit: contain; background: rgba(0,0,0,.3); border: 1px solid rgba(243,201,90,.4); border-radius: 12px; padding: 4px; }
.ti-head h3 { margin: 2px 0; color: #f3c95a; }
.ti-kind { font-size: 11px; color: #cdb68a; text-transform: uppercase; letter-spacing: .5px; }
.ti-where { font-size: 12.5px; color: #ffe6a8; }
.ti-what { font-size: 14px; line-height: 1.5; margin: 10px 0 6px; }
.ti-desc { font-size: 12.5px; color: #cdb68a; margin: 0 0 8px; }
.ti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.ti-grid div { background: rgba(0,0,0,.28); border: 1px solid rgba(243,201,90,.25); border-radius: 10px; padding: 7px; text-align: center; }
.ti-grid b { display: block; color: #f3c95a; font-size: 14px; }
.ti-grid span { font-size: 11px; color: #d9c7a0; }
.ti-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 5px; margin-left: 4px; border-radius: 8px; border: 1px solid rgba(243,201,90,.5); background: rgba(0,0,0,.35); font-size: 13px; cursor: pointer; vertical-align: middle; }

.tool-have { display: inline-block; margin-left: 4px; color: #ffe6a8; font-weight: 700; white-space: nowrap; }
.owned-tools-d { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: #cdb68a; }
.owned-tools-d .ot { background: rgba(243,201,90,.12); border: 1px solid rgba(243,201,90,.3); border-radius: 99px; padding: 1px 8px; color: #fff3d6; cursor: pointer; }

/* -------- لوحة الأدمن: مربعات تحكم صغيرة جنب بعض -------- */
.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.admin-quick-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border: 1.5px solid #6b4f2a;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
}
.admin-quick-tile .hint-text { font-size: 11.5px; margin: 0; line-height: 1.35; }
.admin-quick-tile input { width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px; }
.admin-quick-tile .btn { margin-top: auto; align-self: flex-start; width: auto; padding: 6px 12px; font-size: 13px; }
.admin-quick-tile #maintCard, .admin-quick-tile b { font-size: 13px; }
.admin-tabs-row { gap: 4px; padding: 8px 12px 0; }
.admin-tab-btn { padding: 6px 10px; font-size: 12px; }

/* ⭕ أزرار الخريطة دايرة حوالين القلعة + فقاعة معلومات صغيرة فوقها */
#world-player-panel.ring-mode { bottom: auto; transform: none; min-width: 0; width: max-content; max-width: min(280px, calc(100vw - 12px)); padding: 8px 12px; font-size: 12.5px; animation: plPop 0.16s ease-out; }
#world-player-panel.ring-mode .building-action-title { margin-bottom: 4px; font-size: 13.5px; }
#world-player-panel.ring-mode .building-action-buttons { display: none !important; }
.world-ring { position: fixed; inset: 0; pointer-events: none; z-index: 61; }
.wr-btn { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; border: 2px solid #f3c95a; background: radial-gradient(circle at 35% 30%, #6d4a22, #2a1a0b 75%); box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(0,0,0,0.35); color: #fff; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; animation: wrPop 0.22s ease-out both; }
.wr-btn .wr-ic { font-size: 22px; line-height: 1; }
.wr-btn small { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; background: rgba(0,0,0,0.72); color: #f3e3bf; padding: 1px 6px; border-radius: 8px; pointer-events: none; }
.wr-btn.danger { border-color: #ff6a55; background: radial-gradient(circle at 35% 30%, #a3352a, #3d0d08 75%); }
.wr-btn:hover:not([disabled]) { filter: brightness(1.2); transform: translate(-50%, -50%) scale(1.08); }
.wr-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
@keyframes wrPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 600px) { .wr-btn { width: 44px; height: 44px; } .wr-btn .wr-ic { font-size: 20px; } .wr-btn small { font-size: 9px; } }

/* 🛡️ إطار اللاعب فوق على الشمال (hud-frame.js) — الأماكن نسبة من الصورة نفسها */
.fe-hud { position: fixed; left: 8px; z-index: 40; cursor: pointer; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); color: #fff; font-family: inherit; transition: transform 0.15s; }
.fe-hud:hover { transform: scale(1.03); }
.fe-hud img { display: block; width: 100%; height: auto; pointer-events: none; }
.fe-hud > div { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 0 #000, 0 0 4px rgba(0,0,0,0.9); }
.fe-hud-full { width: 184px; font-size: 12.5px; }
.fe-hud-mini { width: 132px; font-size: 9.5px; }
.fe-hud .fh-lv { flex-direction: column; color: #ffe9a8; }
.fe-hud .fh-lv small { font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; color: #f7d77a; }
.fe-hud .fh-lv b { font-size: 1.75em; font-weight: 900; color: #fff6dc; -webkit-text-stroke: 0.5px #5a3a10; }
.fe-hud .fh-name { font-weight: 900; color: #ffe2a0; font-size: 1.05em; padding: 0 4px; text-overflow: ellipsis; }
.fe-hud .fh-xp { background: #0d1a22; border-radius: 0 999px 999px 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.7); }
.fe-hud .fh-xp i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #7dff6a, #22b52c 55%, #158a1e); border-radius: 0 999px 999px 0; transition: width 0.5s; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25); }
.fe-hud .fh-xp span { position: relative; font-size: 0.78em; font-weight: 800; color: #fff; }
.fe-hud .fh-pow-l, .fe-hud .fh-glo-l { font-weight: 800; color: #f3e3bf; font-size: 0.92em; }
.fe-hud .fh-pow, .fe-hud .fh-glo { font-weight: 900; font-size: 1.12em; color: #fff; }
.fe-hud .fh-ruby, .fe-hud .fh-gold { font-weight: 900; font-size: 1.02em; color: #fff; justify-content: flex-start; }
.fe-hud-full .fh-lv { left: 64%; top: 2.2%; width: 27%; height: 17%; }
.fe-hud-full .fh-name { left: 15%; top: 21.6%; width: 72%; height: 7.6%; }
.fe-hud-full .fh-xp { left: 25.4%; top: 33.6%; width: 61%; height: 6.2%; }
.fe-hud-full .fh-pow-l { left: 40%; top: 44.8%; width: 37%; height: 4.6%; }
.fe-hud-full .fh-pow { left: 41.5%; top: 50.4%; width: 34%; height: 5%; }
.fe-hud-full .fh-glo-l { left: 40%; top: 60.8%; width: 50%; height: 4.6%; }
.fe-hud-full .fh-glo { left: 42.6%; top: 67.3%; width: 30.5%; height: 4.8%; }
.fe-hud-full .fh-ruby { left: 25%; top: 76.4%; width: 24%; height: 10.8%; }
.fe-hud-full .fh-gold { left: 69.5%; top: 76.4%; width: 22.5%; height: 10.8%; }
.fe-hud-mini .fh-lv { left: 62%; top: 3%; width: 28%; height: 27%; }
.fe-hud-mini .fh-lv b { font-size: 1.6em; }
.fe-hud-mini .fh-name { left: 16%; top: 31.8%; width: 70%; height: 10.4%; }
.fe-hud-mini .fh-xp { left: 30%; top: 51.6%; width: 53%; height: 9.4%; }
.fe-hud-mini .fh-ruby { left: 31%; top: 67.8%; width: 18.5%; height: 12.4%; }
.fe-hud-mini .fh-gold { left: 68.4%; top: 67.8%; width: 22%; height: 12.4%; }

/* 🎁 كروت العروض (offer-popups.js): عرض الأدمن + عرض الشحن كل نص ساعة */
.op-overlay { position: fixed; inset: 0; z-index: 2147481000; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(6,4,2,0.7); animation: opFade 0.2s ease-out; }
.op-card { position: relative; width: min(370px, 100%); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; padding: 16px 14px 14px; border-radius: 20px; text-align: center; color: #f6e9c8; background: radial-gradient(circle at 50% 0%, rgba(243,201,90,0.28), transparent 60%), linear-gradient(180deg, #3d2812, #1c1208); border: 2px solid #f3c95a; box-shadow: 0 24px 60px rgba(0,0,0,0.75), inset 0 0 30px rgba(243,201,90,0.12); animation: opPop 0.35s cubic-bezier(.2,1.3,.5,1); }
.op-card.op-shop { border-color: #6fc3ff; background: radial-gradient(circle at 50% 0%, rgba(90,170,255,0.3), transparent 60%), linear-gradient(180deg, #1d2a44, #0e1424); }
.op-x { position: absolute; z-index: 3; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.35); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.op-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1a08; background: linear-gradient(180deg, #ffe08a, #e0a93a); border-radius: 99px; padding: 3px 12px; }
.op-title { margin: 10px 26px 4px; font-size: 19px; color: #ffe2a0; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }
.op-sub { margin: 0 0 8px; font-size: 13px; opacity: 0.9; line-height: 1.45; max-height: 90px; overflow-y: auto; }
.op-head { flex: none; }
.op-box { flex: 1 1 auto; min-height: 110px; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 8px 0 10px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,0.32); border: 1.5px solid rgba(243,201,90,0.45); box-shadow: inset 0 2px 8px rgba(0,0,0,0.5); }
.op-shop .op-box { border-color: rgba(111,195,255,0.5); }
.op-foot { flex: none; }
.op-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.op-sub { max-height: 64px !important; }
.op-timer { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 99px; background: #2a0e00; color: #ffb02e; font-weight: 900; font-size: 16px; border: 1.5px solid #ff8a3c; }
.op-card.op-flash { border-color: #ff8a3c; background: radial-gradient(circle at 50% 0%, rgba(255,120,40,0.45), transparent 60%), linear-gradient(180deg, #4a1d08, #1c0a03); }
.op-flash .op-kicker { background: linear-gradient(180deg, #ffd24a, #ff6a1f); }
.op-flash .op-box { border-color: rgba(255,138,60,0.55); }
.op-items li.op-pack { gap: 8px; }
.op-pack .op-pk { flex: 1; display: flex; flex-direction: column; }
.op-pack .op-pk s { font-size: 11.5px; opacity: 0.6; }
.op-pack .op-pk b { font-size: 15px; color: #ffe08a; }
.op-pack .op-mini { flex: none; padding: 6px 10px; border-radius: 10px; border: 1.5px solid #9fd8ff; background: linear-gradient(180deg, #4fb0ff, #1d6fd8); color: #fff; font-weight: 800; cursor: pointer; white-space: nowrap; }
.op-pack .op-mini[disabled] { opacity: 0.6; }
.fe-flash-chip { position: fixed; left: 8px; z-index: 41; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1.5px solid #ffd24a; background: linear-gradient(90deg, #ff5a1f, #ff9a2e); color: #fff; font-weight: 900; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(255,90,31,0.55); animation: flashPulse2 1.3s infinite; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
@keyframes flashPulse2 { 50% { box-shadow: 0 0 18px rgba(255,170,60,0.95); } }
.op-items li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(243,201,90,0.2); }
.op-items li > span { width: 30px; text-align: center; font-size: 22px; }
.op-items li > img { width: 30px; height: 30px; object-fit: contain; }
.op-items li b { flex: 1; font-size: 13.5px; color: #f6e0a4; }
.op-items li em { font-style: normal; font-weight: 900; color: #fff; font-size: 14px; }
.op-items li.op-more { justify-content: center; opacity: 0.8; font-size: 12.5px; }
.op-price { margin: 2px 0 6px; font-size: 14px; color: #ffb9a8; }
.op-price i { font-style: normal; font-weight: 900; color: #7dff8a; margin-left: 4px; }
.op-buy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 2px solid #9fd8ff; cursor: pointer; color: #fff; background: linear-gradient(180deg, #4fb0ff, #1d6fd8 55%, #1552a8); box-shadow: 0 6px 0 #0c3a78, 0 10px 22px rgba(30,110,220,0.45); text-shadow: 0 1px 0 rgba(0,0,0,0.4); transition: transform 0.1s, filter 0.15s; }
.op-buy span { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; }
.op-buy b { font-size: 15px; font-weight: 800; background: rgba(0,0,0,0.25); border-radius: 99px; padding: 2px 12px; }
.op-buy:hover { filter: brightness(1.1); }
.op-buy:active { transform: translateY(3px); box-shadow: 0 3px 0 #0c3a78; }
.op-buy[disabled] { opacity: 0.6; }
.op-link { margin-top: 10px; background: none; border: none; color: #cfe6ff; text-decoration: underline; cursor: pointer; font-size: 13px; }
.op-note { margin-top: 8px; font-size: 11.5px; opacity: 0.75; }
@keyframes opPop { from { opacity: 0; transform: scale(0.8) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes opFade { from { opacity: 0; } to { opacity: 1; } }

/* ▼ الخانات العلوية اتنقلت لكارت بينزل بسهم (hud-frame.js) */
body.fe-hud-on .top-bar { display: none !important; }
.fe-res-strip { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 72; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: center; max-width: calc(100vw - 16px); }
.fe-res-strip .resource-pill { white-space: nowrap; }
.fe-res-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; border: 1.5px solid #f3c95a; background: linear-gradient(180deg, #5a3d1a, #2c1c0a); color: #f6e0a4; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.5); white-space: nowrap; }
.fe-res-toggle .fe-arrow { display: inline-block; transition: transform 0.2s; font-size: 11px; }
.fe-res-toggle.open .fe-arrow { transform: rotate(180deg); }
.fe-res-toggle:hover { filter: brightness(1.15); }
.fe-res-drop { position: fixed; left: 50%; transform: translateX(-50%); z-index: 71; width: max-content; max-width: min(520px, calc(100vw - 16px)); max-height: calc(100dvh - 90px); overflow-y: auto; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; background: rgba(28,18,7,0.95); border: 1px solid #6b4f2a; box-shadow: 0 10px 24px rgba(0,0,0,0.6); animation: frdDown 0.18s ease-out; display: flex; flex-direction: column; gap: 6px; }
@keyframes frdDown { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fe-res-drop .resource-bar { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 5px !important; overflow: visible !important; margin: 0 !important; }
.fe-res-drop .frd-actions { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(107,79,42,0.6); }
.fe-res-drop .frd-actions .btn { width: auto; padding: 5px 12px; font-size: 12.5px; }

/* 🔥 صورة عرض روبي ×3 */
.op-hero { position: relative; flex: none; margin: -16px -14px 8px; height: 150px; overflow: hidden; border-radius: 18px 18px 0 0; }
.op-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.op-hero .op-rays { animation: opSpin 18s linear infinite; transform-origin: 0 0; }
@keyframes opSpin { to { transform: rotate(360deg); } }
.op-hero .op-spark { animation: opTw 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes opTw { 0%, 100% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1); } }
.op-hero-txt { position: absolute; left: 0; right: 0; top: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; pointer-events: none; }
.op-hero-txt small { font-size: 15px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fff3c4; text-shadow: 0 2px 0 #5a0b12, 0 0 8px rgba(0,0,0,0.6); }
.op-hero-txt b { font-size: 58px; font-weight: 900; color: #ffe066; background: linear-gradient(180deg, #fffbe0, #ffd23a 45%, #ff9a00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #6b1a00; filter: drop-shadow(0 4px 0 #4a0a00) drop-shadow(0 0 12px rgba(255,200,60,0.7)); animation: opBeat 1.2s ease-in-out infinite; }
.op-hero-txt em { font-style: normal; font-size: 16px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 2px 0 #5a0b12; margin-top: 2px; }
@keyframes opBeat { 50% { transform: scale(1.07); } }
.op-flash .op-title { font-size: 22px; margin-top: 4px; }
.op-pack .op-gem { width: 34px; height: 36px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }

/* الشريط العلوي اختفى والسهم عايم فوق: الحاجات اللي كانت لازقة فوق تنزل تحته */
body.fe-hud-on .world-search-toggle { top: 44px; }
body.fe-hud-on .world-wrap:not(.search-hidden) .world-search-bar { top: 66px; }
body.fe-hud-on .build-queue-box { top: 48px; }

/* 📍 إحداثيات الخريطة فوق على اليمين */
.world-coords { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); right: 8px; z-index: 72; display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 99px; background: rgba(28,18,7,0.9); border: 1.5px solid #f3c95a; box-shadow: 0 3px 8px rgba(0,0,0,0.5); color: #f3c95a; font-weight: 800; font-size: 12px; }
.world-coords label { display: flex; align-items: center; gap: 3px; }
.world-coords input { width: 44px; padding: 3px 4px; border-radius: 8px; border: 1px solid #6b4f2a; background: rgba(0,0,0,0.45); color: #fff; font-weight: 800; font-size: 12.5px; text-align: center; -moz-appearance: textfield; }
.world-coords input::-webkit-outer-spin-button, .world-coords input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.world-coords button { width: 26px; height: 26px; border-radius: 50%; border: none; background: linear-gradient(180deg, #f3c95a, #b8862b); color: #2a1a08; font-weight: 900; cursor: pointer; padding: 0; }
.world-coords.sel { border-color: #7fd4ff; }
@media (max-width: 600px) { .world-coords { top: calc(44px + env(safe-area-inset-top, 0px)); right: 6px; } .world-coords input { width: 38px; } }
/* 📱 the X/Y box sits at the top right on phones: the search panel starts below it instead of under it */
@media (max-width: 600px) {
  .world-wrap:not(.search-hidden) .world-search-bar,
  body.fe-hud-on .world-wrap:not(.search-hidden) .world-search-bar { top: calc(84px + env(safe-area-inset-top, 0px)); }
}

/* 👆 بناء بدوستين: شريط تحت فيه اسم المبنى + تأكيد/إلغاء */
.tap-place-bar { position: fixed; left: 50%; top: calc(48px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); padding: 8px 10px; border-radius: 16px; background: rgba(28,18,7,0.95); border: 1.5px solid #f3c95a; box-shadow: 0 8px 22px rgba(0,0,0,0.6); color: #f6e9c8; font-size: 13px; animation: frdDown 0.2s ease-out; }
.tap-place-bar .tp-txt b { color: #ffe08a; }
.tap-place-bar .btn { width: auto; padding: 7px 14px; font-size: 13px; }
.tap-place-bar .tp-ok { background: linear-gradient(180deg, #5adc8c, #23884a); border-color: #9ff0bf; color: #fff; }
/* 📱 ضغطة مطوّلة على صورة مبنى/كارت متفتحش قايمة "حفظ الصورة / نسخ" */
#build-drawer img, .building-card img, #castleCanvas, #worldCanvas, .castle-canvas-area img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.building-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ============================================================================
   💳 كروت العروض بتصميم "العروض" الفرعوني (ليل لازوردي + دهبي + خراطيش)
   ============================================================================ */
.op-card { --night:#0f2252; --night-deep:#081437; --gold:#d6a233; --gold-l:#f3d37a; --gold-d:#8a6212; --sand:#f6e7bb; --turq:#2a9d8f; --carn:#c0412b;
  border-radius: 6px !important; border: 3px solid var(--gold) !important; padding: 0 0 20px !important; color: var(--sand) !important; font-family: Cairo, system-ui, sans-serif;
  background: radial-gradient(circle at 50% 0%, #1d3a82 0%, var(--night) 45%, var(--night-deep) 100%) !important;
  box-shadow: 0 0 0 3px var(--night-deep), 0 0 0 5px var(--gold-d), 0 26px 55px rgba(0,0,0,.65) !important; animation: opOpen .55s cubic-bezier(.2,.9,.3,1.2) both !important; }
@keyframes opOpen { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
.op-card.op-wide { width: min(720px, 100%); }
.op-card.op-flash { background: radial-gradient(circle at 50% 0%, #7a2a0c 0%, #3a1405 50%, #1c0a03 100%) !important; }
.op-frieze { flex: none; height: 12px; border-bottom: 2px solid var(--gold); background: repeating-linear-gradient(90deg, var(--turq) 0 14px, var(--gold) 14px 20px, var(--carn) 20px 34px, var(--gold) 34px 40px, #1c3d8f 40px 54px, var(--gold) 54px 60px); }
.op-frieze.bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-bottom: 0; border-top: 2px solid var(--gold); }
.op-card .op-x { top: 22px !important; right: 10px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 2px solid var(--gold-l) !important; color: #fff !important; font: 700 17px/1 Cairo, sans-serif !important; background: radial-gradient(circle at 35% 30%, #e84a35, #b3261a 75%) !important; box-shadow: 0 0 0 2px var(--night-deep), 0 3px 8px rgba(0,0,0,.5); display: grid; place-items: center; padding: 0; }
.op-sun { flex: none; display: block; width: min(62%, 230px); margin: 12px auto 0; }
.op-card .op-kicker { display: table; margin: 2px auto 0; padding: 2px 16px; font-weight: 800; font-size: 13px; letter-spacing: 0; text-transform: none; color: #3a2606; background: linear-gradient(180deg, var(--gold-l), var(--gold)); border: 2px solid var(--gold-d); border-radius: 999px; }
.op-card .op-title { margin: 8px 16px 2px !important; font-size: 26px !important; line-height: 1.2; color: var(--gold-l) !important; text-shadow: 0 2px 0 #000a !important; font-weight: 800; }
.op-card .op-sub { margin: 0 14px 10px !important; font-size: 14px; color: #cdd6f0; }
.op-card .op-box { margin: 0 16px !important; padding: 10px !important; background: rgba(4,10,30,.55) !important; border: 2px solid var(--gold-d) !important; border-radius: 6px !important; box-shadow: inset 0 0 0 2px rgba(214,162,51,.18); }
.op-card .op-items { gap: 7px; }
.op-card .op-items li { padding: 5px 12px 5px 6px !important; background: linear-gradient(180deg, #15306e, #0e214f) !important; border: 1.5px solid rgba(214,162,51,.55) !important; border-radius: 999px !important; opacity: 0; animation: opSlide .4s ease-out forwards; }
@keyframes opSlide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.op-card .op-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-style: normal; overflow: hidden; background: radial-gradient(circle at 35% 30%, #284fb0, var(--night-deep)); border: 2px solid var(--gold); }
.op-card .op-ico img { width: 100%; height: 100%; object-fit: contain; }
.op-card .op-items li b { color: var(--sand) !important; font-size: 15px !important; }
.op-card .op-items li em { color: var(--gold-l) !important; font-size: 17px !important; font-weight: 800 !important; }
.op-card .op-foot { padding: 0 16px; }
.op-card .op-price { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 10px !important; }
.op-card .op-price s { font-weight: 700; font-size: 17px; color: #b9c3e0; text-decoration-color: var(--carn); text-decoration-thickness: 2px; }
.op-seal { display: grid !important; place-items: center; width: 56px; height: 56px; transform: rotate(-8deg); color: #fff !important; font-style: normal; font-weight: 800 !important; font-size: 17px; margin: 0 !important; background: radial-gradient(circle at 35% 30%, #e0583e, var(--carn) 70%); border: 3px solid var(--gold-l); border-radius: 50%; box-shadow: 0 0 0 2px var(--gold-d), 0 4px 8px rgba(0,0,0,.5); }
.op-seal.sm { position: absolute; top: 6px; left: 6px; width: 42px; height: 42px; font-size: 13px; border-width: 2px; }
.op-card .op-buy { position: relative; overflow: hidden; margin-top: 6px; padding: 9px 12px 10px !important; border-radius: 6px !important; color: #3a2606 !important; border: 2px solid var(--gold-d) !important; background: linear-gradient(180deg, var(--gold-l), var(--gold) 60%, #b98622) !important; box-shadow: 0 0 0 2px var(--night-deep), 0 5px 0 var(--gold-d), 0 10px 16px rgba(0,0,0,.5) !important; }
.op-card .op-buy span { font-size: 22px !important; font-weight: 800; }
.op-card .op-buy b { display: table; margin: 4px auto 0; padding: 1px 22px !important; font-size: 18px !important; color: var(--gold-l) !important; background: var(--night-deep) !important; border-radius: 999px; border: 1.5px solid var(--gold-d); }
.op-card .op-buy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: opShine 1s ease-in-out .9s 1 both; }
@keyframes opShine { to { left: 130%; } }
.op-card .op-link { display: block; margin: 10px auto 0; padding: 8px 16px; background: none !important; border: 0 !important; cursor: pointer; color: var(--gold-l) !important; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.op-card .op-note { color: #cdd6f0; }
.op-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 16px 0; padding-right: 46px; }
.op-ghead .op-title { margin: 0 !important; text-align: left; flex: 1; }
.op-back { min-height: 38px; padding: 4px 14px; cursor: pointer; font-weight: 700; font-size: 14px; background: var(--night-deep); border: 2px solid var(--gold-d); border-radius: 999px; color: var(--gold-l); }
.op-chips { display: flex; gap: 8px; margin: 12px 16px 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; flex: none; }
.op-chips::-webkit-scrollbar { display: none; }
.op-chip { flex: none; min-height: 38px; padding: 4px 16px; cursor: pointer; font-weight: 700; font-size: 14px; background: rgba(4,10,30,.55); border: 2px solid var(--gold-d); border-radius: 999px; color: var(--sand); }
.op-chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: #3a2606; }
.op-gridwrap { flex: 1 1 auto; margin: 0 16px; padding: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: min(56vh, 500px); background: rgba(4,10,30,.55); border: 2px solid var(--gold-d); border-radius: 6px; }
.op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.op-oc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 8px 10px; cursor: pointer; text-align: center; color: var(--sand); font-family: inherit; background: linear-gradient(180deg, #183578, #0e214f); border: 2px solid rgba(214,162,51,.6); border-radius: 8px; box-shadow: 0 3px 0 var(--gold-d); opacity: 0; animation: opSlide .4s ease-out forwards; }
.op-oc:hover { border-color: var(--gold-l); transform: translateY(-2px); }
.op-oc[hidden] { display: none; }
.op-cico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: radial-gradient(circle at 35% 30%, #284fb0, var(--night-deep)); border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--night-deep), 0 0 14px rgba(243,211,122,.25); }
.op-cname { font-weight: 800; font-size: 16px; color: var(--gold-l); margin-top: 4px; line-height: 1.25; }
.op-cmeta { font-size: 12.5px; color: #b9c3e0; }
.op-cprice { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.op-cprice s { font-size: 12.5px; color: #9aa7cc; text-decoration-color: var(--carn); }
.op-cprice b { font-size: 16px; font-weight: 800; color: #3a2606; background: linear-gradient(180deg, var(--gold-l), var(--gold)); padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--gold-d); }
@media (prefers-reduced-motion: reduce) { .op-card, .op-card .op-items li, .op-oc, .op-card .op-buy::after { animation: none !important; opacity: 1; } }

/* 🔀 أثناء نقل مبنى في الساحة: إخفاء كل الواجهة ما عدا الساحة نفسها والتوست */
body.bld-moving > *:not(.castle-wrap):not(#toast-message):not(script):not(style),
body.bld-moving .castle-wrap > *:not(.castle-canvas-area),
body.bld-moving .castle-canvas-area > *:not(canvas) { visibility: hidden !important; pointer-events: none !important; }

/* 🏆 جوايز الترتيب كمربعات (الإيفنتات) */
.fe-rboxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 4px}
.fe-rbox{background:linear-gradient(180deg,#3a2a12,#21170a);border:2px solid #c9a24a;border-radius:12px;padding:8px 6px;text-align:center;color:#f7e6b5;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:inset 0 0 0 1px rgba(255,220,140,.15)}
.fe-rbox.fe-rbox-me{border-color:#ffd94a;box-shadow:0 0 12px rgba(255,210,70,.55)}
.fe-rbox .t{font-weight:800;font-size:13px;color:#ffd96a;letter-spacing:.3px}
.fe-rbox .pic{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);border-radius:10px}
.fe-rbox .pic img{max-width:60px;max-height:60px;object-fit:contain}
.fe-rbox .pic .em{font-size:36px}
.fe-rbox .l{font-size:11.5px;line-height:1.3}
.fe-rbox-note{font-size:11px;opacity:.75;text-align:center;margin-bottom:6px}