/* =====================================================
 * Dark Mode (RTL) — overrides applied when body.darkMode
 * ===================================================== */

/* ---- Toggle button (header) ---- */
div#header #darkModeToggle.dm-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  position: absolute;
  top: 34px;
  right: 275px;
  z-index: 5;
  box-shadow: 0 3px 9px rgb(52, 51, 49);
}
#darkModeToggle .dm-icon-container {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#darkModeToggle .dm-icon-sun,
#darkModeToggle .dm-icon-moon {
  width: 16px;
  height: 16px;
}
#darkModeToggle.day-mode {
  background: linear-gradient(160deg, #e9c47f 0%, #fcedc9 100%);
}
#darkModeToggle.day-mode .dm-icon-sun  { color: #1c1c1e; }
#darkModeToggle.day-mode .dm-icon-moon { display: none; }
#darkModeToggle.night-mode {
  background: linear-gradient(160deg, #1c2639 0%, #77afe1 100%);
}
#darkModeToggle.night-mode .dm-icon-moon { color: #ffffff; }
#darkModeToggle.night-mode .dm-icon-sun  { display: none; }
#darkModeToggle:active { transform: scale(0.92); }

/* ---- Sky / Sides Color Override ---- */
html.darkMode body.buildingsV1.perspectiveResources,
html.darkMode body.buildingsV3.perspectiveBuildings,
html.darkMode body.buildingsV3.perspectiveResources {
  background-color: #1c2625;
  background-image: linear-gradient(180deg, #1a2327 240px, #1d2625 250px), linear-gradient(180deg, #1d2625 240px, #1d2625 250px);
}
html.darkMode body.buildingsV1.perspectiveResources:before,
html.darkMode body.buildingsV1.perspectiveResources:after {
  background-image: linear-gradient(180deg, #1a2327 240px, #1d2625 250px), linear-gradient(180deg, #1d2625 240px, #1d2625 250px);
}

/* ---- Backgrounds (V1 — perspectiveResources) ---- */
html.darkMode body.buildingsV1.perspectiveResources div#background {
  background-image: url('../../img_rtl/layout/Night/bgResources.webp');
}
html.darkMode body.buildingsV1.perspectiveBuildings div#background {
  background-image: url('../../img_rtl/layout/Night/bgBuildings.webp');
  background-position: calc(50% + -9px) calc(0% + -30px);
}

/* ---- Resource Fields f1..f13 (V1) ---- */
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f1  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField1.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f2  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField2.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f3  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField3.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f4  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField4.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f5  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField5.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f6  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField6.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f7  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField7.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f8  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField8.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f9  { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField9.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f10 { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField10.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f11 { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField11.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f12 { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField12.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.f13 { background-image: url('../../img_rtl/g/Night/rtl_night_resourceField13.png'); }

/* ---- Tribe Center (V1) ---- */
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.roman::after    { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_1.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.teuton::after   { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_2.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.gaul::after     { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_3.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.egyptian::after { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid6.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.hun::after      { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid7.png'); }
html.darkMode body.buildingsV1.perspectiveResources div.village1 #village_map.spartan::after  { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid8.png'); }

/* ---- Tribe Center (V3 — vid1..vid9) ---- */
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid1:after { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_1.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid2:after { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_2.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid3:after { background-image: url('../../img_rtl/g/center/Night/rtl_night_tribe_3.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid6:after { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid6.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid7:after { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid7.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid8:after { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid8.png'); }
html.darkMode body.buildingsV3.perspectiveResources div.village1 #village_map.vid9:after { background-image: url('../../img_rtl/g/center/Night/villageCenter_vid9.png'); }

/* ---- Backgrounds (V3 — perspectiveBuildings) ---- */
html.darkMode body.buildingsV3.perspectiveBuildings div#background {
  background-image: url('../../img_rtl/layout/Night/bgBuildings.webp');
  background-position: calc(50% + -9px) calc(0% + -30px);
}
html.darkMode body.buildingsV3.perspectiveResources div#background {
  background-image: url('../../img_rtl/layout/Night/bgResources.webp');
}

/* ---- V2 / Default perspectiveBuildings — strip day backgrounds, apply night gradient ---- */
html.darkMode body.perspectiveBuildings,
html.darkMode body.perspectiveBuildings.rtl {
  background-color: #1c2625;
  background-image: linear-gradient(180deg, #1a2327 240px, #1d2625 250px), linear-gradient(180deg, #1d2625 240px, #1d2625 250px);
}
html.darkMode body.perspectiveBuildings::before,
html.darkMode body.perspectiveBuildings::after,
html.darkMode body.buildingsV1.perspectiveBuildings::before,
html.darkMode body.buildingsV1.perspectiveBuildings::after,
html.darkMode body.buildingsV1.perspectiveBuildings div#background::before {
  background-image: none !important;
}

/* ---- Sidebar Box border-image tinted for dark mode ---- */
html.darkMode body:not(.ie10) .sidebar .sidebarBox .sidebarBoxInnerBox::after {
  filter: sepia(0%) hue-rotate(33deg) brightness(74%) contrast(177%) saturate(25%);
}