/* ==========================================================================
   Modern light skin — loaded AFTER the original stylesheets.
   Pure presentation: no markup, ids, scripts or game logic are touched.
   Palette: teal (brand) + amber (accent) on soft cool-grey.
   ========================================================================== */
/* Cairo is loaded NON-blocking from the layout <head> (see game/form/default/popup.phtml); the fallback stack below shows instantly. */

/* ==== Game font ====
   1) "Arabic Typesetting" (Microsoft) is used when it is installed on the visitor's device. It is a small face, so it is scaled up.
   2) Otherwise "Amiri" (SIL OFL, hosted on this site, see fonts/Amiri-LICENSE.txt) is used: a traditional Naskh face very close to it. */
@font-face{ font-family:"ATS"; font-weight:400; font-style:normal; src:local("Arabic Typesetting"), local("ArabicTypesetting"); size-adjust:132%; }
@font-face{ font-family:"ATS"; font-weight:700; font-style:normal; src:local("Arabic Typesetting Bold"), local("Arabic Typesetting"), local("ArabicTypesetting"); size-adjust:132%; }
@font-face{ font-family:"Amiri"; font-style:normal; font-weight:400; font-display:swap; size-adjust:110%; src:url(fonts/amiri-arabic-400-normal.woff2) format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face{ font-family:"Amiri"; font-style:normal; font-weight:400; font-display:swap; size-adjust:110%; src:url(fonts/amiri-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Amiri"; font-style:normal; font-weight:700; font-display:swap; size-adjust:110%; src:url(fonts/amiri-arabic-700-normal.woff2) format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face{ font-family:"Amiri"; font-style:normal; font-weight:700; font-display:swap; size-adjust:110%; src:url(fonts/amiri-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --bg:#f2f5f9; --card:#ffffff; --ink:#1d2a3a; --mut:#6a7686; --line:#e2e8f0; --line2:#cbd5e1;
  --brand:#0f766e; --brand-d:#0b5a54; --brand-l:#e6f5f3; --accent:#f59e0b; --accent-d:#b45309; --accent-l:#fff4dc;
  --bad:#e11d48; --ok:#16a34a; --r:16px; --r-s:10px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.07);
  --font:"ATS","Amiri","Segoe UI",Tahoma,"Noto Sans Arabic","Droid Arabic Kufi",Arial,sans-serif;
}

/* ---------- base ---------- */
html body, body.v35, body.v3{
  background:var(--bg) !important; color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.6;
}
html body *{ font-family:var(--font); }
html body a{ color:var(--brand); text-decoration:none; transition:color .15s, background-color .15s, box-shadow .15s, transform .15s; }
html body a:hover{ color:var(--accent-d); text-decoration:none; }
h1,h2,h3,h4,h5{ font-family:var(--font); color:var(--ink); }
html body h1{ font-size:24px; font-weight:800; margin:0 0 14px; line-height:1.3; }
html body h4, html body h5{ font-size:15px; font-weight:700; margin:14px 0 8px; }
hr{ border:0; border-top:1px solid var(--line); }
::selection{ background:var(--brand); color:#fff; }

/* ---------- remove the old sky / grass / stone chrome ---------- */
div.wrapper{ background:none !important; }
div#dynamic_header{ display:none !important; height:0 !important; }
div#header{
  background:#fff !important; min-width:1000px;
  border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(16,24,40,.06);
  margin-bottom:68px;
}
div#side_navi, div#side_info{ background-image:none !important; }
div#footer{ background:transparent !important; border-top:1px solid var(--line); }

/* ---------- top bar: the ORIGINAL round icons, on a clean white bar ---------- */
div#header{ height:72px !important; padding-top:22px; }
div#mtop p_show#plus{
  white-space:nowrap; margin-right:24px !important;
  background:var(--accent-l); border-radius:12px; color:var(--ink); font-size:12px; line-height:1.55;
  box-shadow:0 0 0 6px var(--accent-l), 0 0 0 7px #fde1a8;
}
div#mtop p_show#plus *{ font-size:12px !important; }

/* ---------- resources strip ---------- */
div#res{
  position:absolute !important; left:0 !important; right:0 !important; top:108px !important; width:100% !important; height:auto !important;
  text-align:center; z-index:3;
}
div#res div#resWrap{ display:inline-block; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 18px 3px; box-shadow:var(--sh); }
div#res table{ margin:0 auto; }
div#res table td{ font-size:12.5px; font-weight:700; color:var(--ink); padding:0 2px; }
div#res .html5-progress-bar progress{ height:5px; }

/* ---------- news ticker ---------- */
html body .box_news{ background:#fff !important; border:1px solid var(--line); border-radius:999px !important; box-shadow:var(--sh); height:34px !important; color:var(--ink); }
html body .box_news td{ background:transparent !important; line-height:30px; padding:0 14px; }
html body .latestNews{ background:linear-gradient(180deg,#fbbf24,var(--accent)) !important; color:#3b2400 !important; border-radius:999px !important; width:64px !important; height:34px !important; line-height:32px !important; font-weight:800; box-shadow:0 4px 10px rgba(245,158,11,.35); margin-top:5px; }

/* ---------- 3 columns ---------- */
div#mid{ width:1070px !important; margin-left:auto; margin-right:auto; float:none !important; }
div#content{
  width:632px !important; box-sizing:border-box; padding:18px 18px 22px !important; min-height:520px;
  background-color:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh); margin:0 8px;
}
div#side_navi{ width:150px !important; }
div#side_navi p{ margin:0 !important; padding:0 !important; }
div#side_navi p:has(> a:not(:empty)){
  margin:0 0 14px !important; padding:6px !important; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
}
div#side_navi p a{ padding:7px 12px !important; border-radius:var(--r-s); color:var(--ink); font-weight:600; font-size:13.5px; }
div#side_navi p a:hover{ background:var(--brand-l); color:var(--brand-d); }
div#side_info{ width:270px; padding-right:0 !important; }
div#side_info div.news{
  width:auto !important; margin:0 0 14px !important; padding:10px 12px !important; background:var(--card);
  border:1px solid var(--line) !important; border-radius:var(--r); box-shadow:var(--sh); font-size:13px;
}
div#side_info h5{ margin:6px 10px 6px 0 !important; }
div#side_info h5 img{ display:none; }
div#side_info table{ background:transparent; }
div#side_info a{ font-weight:600; }

/* ---------- content components ---------- */
div#content p{ line-height:1.75; }
div#content b, div#content strong{ font-weight:700; }
div#content table{ border-collapse:separate !important; border-spacing:0 !important; border:1px solid var(--line) !important; border-radius:12px; overflow:hidden; background:#fff; }
div#content table table{ border-radius:0; }
div#content table thead td, div#content table thead th, div#content table th{
  background:#f1f5f9 !important; background-image:none !important; color:#334155 !important; font-weight:700; padding:9px 10px !important;
  border:0 !important; border-bottom:1px solid var(--line) !important;
}
div#content table td{ background:#fff; background-image:none; padding:8px 10px; border:0 !important; border-bottom:1px solid #eef2f7 !important; color:var(--ink); }
div#content table tr:last-child td{ border-bottom:0 !important; }
div#content table tbody tr:hover td{ background:#f8fafc; }
div#content table tr.hover:hover td{ background:var(--brand-l); }
div#content table.tableNone, div#content table.tableNone td, div#content table.tableNone th{ border:0 !important; background:transparent !important; }
div#content table.tableNone{ border-radius:0; }
div#content table.rate_details, div#content table#res_details{ width:100%; }
div#content .tooltip{ color:var(--mut); font-size:12.5px; }
div#content .none, div#content span.none{ color:var(--mut); }

/* tabs */
div#textmenu{ font-size:0; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:5px; background:#f1f5f9; border-radius:16px; width:fit-content; max-width:100%; }
div#textmenu a, div#textmenu span{ font-size:13px; padding:6px 14px; border-radius:999px; color:var(--mut); font-weight:600; font-size:13px; background:transparent; }
div#textmenu a:hover{ color:var(--brand-d); background:#fff; }
div#textmenu a.selected{ background:#fff; color:var(--brand-d); box-shadow:0 1px 3px rgba(16,24,40,.12); font-weight:800; }

/* forms */
html body input.text, html body input.name, html body input.ra, html body select.dropdown, html body select, html body textarea,
html body input[type="text"], html body input[type="password"], html body input[type="email"], html body input[type="number"]{
  border:1px solid var(--line2) !important; border-radius:var(--r-s); padding:7px 10px !important; background:#fff; color:var(--ink);
  font:inherit; font-size:13.5px; outline:0; transition:border-color .15s, box-shadow .15s;
}
html body input.text:focus, html body select:focus, html body textarea:focus, html body input[type="text"]:focus, html body input[type="password"]:focus{
  border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(15,118,110,.15);
}
html body button, html body input[type="submit"], html body input[type="button"]{
  background:linear-gradient(180deg,#14998f,var(--brand)); color:#fff; border:0; border-radius:var(--r-s); padding:8px 18px; font:700 13.5px var(--font); cursor:pointer;
  box-shadow:0 2px 0 var(--brand-d), 0 6px 14px rgba(15,118,110,.25); transition:transform .1s, box-shadow .1s;
}
html body button:hover, html body input[type="submit"]:hover{ transform:translateY(-1px); }
html body button:active, html body input[type="submit"]:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--brand-d); }
html body button.gold, html body button.green{ background:linear-gradient(180deg,#fbbf24,var(--accent)); color:#3b2400; box-shadow:0 2px 0 var(--accent-d), 0 6px 14px rgba(245,158,11,.28); }
/* image buttons carry their label inside the picture: keep, just soften */
html body input.dynamic_img, html body img.dynamic_img{ border-radius:8px; }
html body input.dynamic_img:hover{ filter:brightness(1.06); }

/* progress */
progress{ accent-color:var(--brand); }

/* messages / reports / stats lists */
div#content table#overview, div#content table#player, div#content table.row_table_data{ width:100%; }
div#content td.al a, div#content td.pla a, div#content td.vil a{ font-weight:600; }

/* build / info boxes */
div#content div#build{ background:transparent; }
div#content p.build_desc{ color:var(--mut); }
div#content span.level{ color:var(--accent-d); font-weight:700; }

/* ---------- footer ---------- */
div#footer div#mfoot{ color:var(--mut); font-size:12.5px; }
div#footer a{ color:var(--mut); }

/* ---------- public layout (login / register / pages without game chrome) ---------- */
div#side_navi a#logo{ display:block; }
div.login, div.signup{ background:transparent; }


/* ---------- pass 2: header strip, time box, left column ---------- */
div#res div#resWrap{ width:auto !important; margin:0 auto !important; position:static !important; float:none !important; left:auto !important; right:auto !important; }
div#ltime{ top:146px !important; left:0 !important; right:0 !important; width:100% !important; text-align:center; font-size:11px; color:var(--mut); pointer-events:none; }
div#ltimeWrap{ width:auto !important; margin:0 auto !important; position:static !important; }
div#ltime a, div#ltime font{ color:var(--mut) !important; }

div#side_info table{
  width:100% !important; margin:0 0 14px !important; background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--r);
  box-shadow:var(--sh); border-collapse:separate !important; border-spacing:0 !important; overflow:hidden;
}
div#side_info table thead td, div#side_info table thead th{ background:#f1f5f9 !important; background-image:none !important; padding:8px 12px !important; border:0 !important; font-weight:700; color:#334155; }
div#side_info table td{ background:transparent !important; padding:6px 12px !important; border:0 !important; color:var(--ink); font-size:13px; line-height:1.9; }
div#side_info table td a{ color:var(--brand); }
div#side_info table td.dot{ width:auto; }
div#side_info a img[src*="fil/"]{ border-radius:14px; box-shadow:var(--sh); display:block; max-width:100%; height:auto; }
div#side_info br{ line-height:.4; }
div#side_info .news .error{ color:var(--accent-d); font-weight:700; }

/* ---------- pass 3: details ---------- */
div#side_info div.news .html5-progress-bar{ margin-top:6px !important; padding:0 !important; }
div#side_info div.news br + br{ display:none; }
div#side_info div.news > span{ line-height:1.7; }
div#content table#production td, div#content table#production th{ white-space:nowrap; padding:5px 8px !important; }
div#content table#production img{ vertical-align:middle; }

/* ---------- public pages: info boxes ---------- */
div#side_info img[src^="dist/"]{ display:none !important; }
div#side_info .box{
  display:block !important; width:auto !important; min-width:0 !important; min-height:0 !important; margin:0 0 14px; padding:8px 14px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
}
div#side_info .box:before, div#side_info .box .content .boxHeader:after{ display:none !important; }
div#side_info .box .content{ padding:0 !important; }
div#side_info .box .content .boxHeader h5{ height:auto; margin:6px 0 !important; color:var(--accent-d); font-weight:800; }
div#side_info .box .boxBody{ line-height:1.8; font-size:13px; }


/* ---------- pass 4: admin menus, map box, table spacing ---------- */
/* a menu with many links (admin panel) becomes a grid of tiles
   (inline-block + font-size:0 so the literal "|" separators take no room) */
div#textmenu:has(> a[href*="sitecp.php"]){
  display:block; font-size:0; background:transparent; padding:0; width:auto; border-radius:0; margin:0 -4px 16px;
}
div#textmenu:has(> a[href*="sitecp.php"]) a{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:top; text-align:center; box-sizing:border-box;
  width:calc(33.333% - 8px); min-height:48px; margin:4px; padding:8px 10px; line-height:1.35;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; font-size:13px; font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
div#textmenu:has(> a[href*="sitecp.php"]) a:hover{ background:var(--brand-l); border-color:rgba(15,118,110,.45); color:var(--brand-d); transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,118,110,.14); }
div#textmenu:has(> a[href*="sitecp.php"]) a.selected{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 14px rgba(15,118,110,.25); }
div#textmenu:has(> a[href*="sitecp.php"]) a[href*="logout"], div#textmenu:has(> a[href*="sitecp.php"]) a[href*="log="]{ color:var(--bad); }

/* map: compact details box that no longer sits on the tiles */
div#content table#map_infobox{ top:-26px !important; left:0 !important; width:150px !important; margin:0 !important; }
div#content table#map_infobox th, div#content table#map_infobox td{ padding:3px 9px !important; font-size:12px; line-height:1.4; }

/* a little air around data tables */
div#content table.row_table_data, div#content table#overview, div#content table#player, div#content table.rate_details,
div#content table#build_value, div#content table#search_navi{ margin:6px 0 16px; }


/* ---------- pass 5: statistics tabs, special pages ---------- */
/* blank placeholder links in tab bars (e.g. statistics t=13 / t=15) take no room */
div#textmenu a:empty, div#textmenu a[href$="t=13"], div#textmenu a[href$="t=15"]{ display:none !important; }
div#textmenu{ gap:4px; }
div#textmenu a, div#textmenu span{ padding:5px 12px; }

/* pages that bring their own typeface/layout inside <main> (big village, tatar cave, ...) */
html body main, html body main *{ font-family:"alahed", var(--font); line-height:1.45; }
main #box-sec a#btn{ color:#7ff3ff; font-weight:700; text-shadow:0 0 12px rgba(0,255,255,.55); }
main #box-sec a#btn:hover{ color:#fff; }

/* the little filter-icon rows of statistics / alliance tables were pinned with absolute offsets that only
   fit a one-line tab bar: let them flow inside the table header instead */
div.statistics div#submenu, div.alliance div#submenu{ position:static !important; float:left; margin:0 0 0 4px; }
div.statistics div#submenu2{ position:static !important; float:right; margin:0 4px 0 0; }
div.statistics div#submenu img, div.alliance div#submenu img, div.statistics div#submenu2 img{ margin-top:-2px; margin-bottom:-2px; }
/* big village card: grow with the text instead of letting the price / buy button spill out
   (no !important: the page's own script still sets an inline height after the click) */
main #box-sec{ height:auto; padding-bottom:34px; }
main #box-sec p{ margin:.6em 0; }