/* =====================================================================
   MT2Shadow — additions on top of the classic theme (theme.css)
   Components: header user bar, language switch, forms, tables, alerts,
   item shop, admin panel, lightbox, and right-to-left (Arabic) support.
   ===================================================================== */

:root {
	--ink: #160400;
	--brown: #4a1e00;
	--wine: #7b1300;
	--wine-2: #8d0404;
	--gold: #f2e69f;
	--gold-2: #dfbf8b;
	--sand: #e8d7ae;
	--line: #b28a45;
	--ok: #2e6b12;
	--bad: #a10d0d;
}

body { font-family: Tahoma, "Segoe UI", Arial, Helvetica, sans-serif; }
body.lang-ar { font-size: 12px; line-height: 18px; }
body.lang-ar .content h2, body.lang-ar .box h2 { font-size: 15px; }
body.lang-ar .box p, body.lang-ar .inner-content p, body.lang-ar .about-inner-content p,
body.lang-ar .inner-content ul { font-size: 12px; line-height: 19px; }
body.lang-ar .main-nav li a, body.lang-ar .modul-box h3 { font-size: 13px; }
body.lang-ar .btn { font-size: 11px; }

a { color: var(--wine-2); }
button { font-family: inherit; }
.inline { display: inline; }
b.offset, .offset { color: var(--wine-2); }

/* ------------------------------------------------------------------ header */
.logo { background: none; left: 330px; width: 270px; height: 70px; z-index: 4; }  /* the logo itself is painted into header-bg.jpg */
.langbar {
	position: absolute; right: 150px; top: 8px; z-index: 5;
	background: rgba(20, 5, 0, .65); border: 1px solid #8a6a2e; border-radius: 3px;
	padding: 2px 8px; font-size: 12px; direction: ltr;
}
.langbar a { color: var(--gold-2); text-decoration: none; }
.langbar a.on, .langbar a:hover { color: #fff; }
.langbar span { color: #8a6a2e; margin: 0 4px; }

#regBtn a#toReg { text-align: center; padding: 0 20px 0 90px; width: 423px; font-family: Tahoma, Arial, sans-serif; }
body.lang-ar #regBtn a#toReg { font-size: 24px; }
#regSteps a span { margin: 0 12px; }
#regSteps { direction: inherit; }

.header-user {
	margin: 132px auto 0; width: 520px; height: 78px; box-sizing: border-box;
	background: url(../img/header-box.png) no-repeat 0 0, linear-gradient(#5b0906, #2c0402);
	border: 1px solid #a9812f; border-radius: 4px; padding: 6px 14px;
	box-shadow: 0 0 0 1px #2a0400, 0 4px 12px rgba(0, 0, 0, .6);
	color: var(--gold); text-align: center;
}
.hu-welcome { font-size: 15px; font-weight: bold; text-shadow: 1px 1px 2px #000; }
.hu-balance { font-size: 12px; margin: 2px 0 5px; }
.hu-balance b { color: #fff; }
.hu-balance .sep { color: #a9812f; margin: 0 8px; }
.hu-links { display: flex; justify-content: center; gap: 6px; }
.hbtn {
	display: inline-block; min-width: 90px; padding: 3px 10px; font-size: 12px; font-weight: bold;
	color: var(--gold); text-decoration: none; cursor: pointer;
	background: linear-gradient(#8e1b0c, #4b0703); border: 1px solid #c79a45; border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 230, 160, .25);
}
.hbtn:hover { color: #fff; background: linear-gradient(#b0240f, #5d0904); }

/* ------------------------------------------------------------- sidebars */
.btn-center { margin: 6px auto 0 !important; }
.col-1 .btn, .col-3 .btn { margin-left: auto; margin-right: auto; }
button.btn { border: 0; cursor: pointer; font-family: inherit; }
.userbox { padding: 4px 12px 10px; text-align: center; color: var(--brown); }
.userbox p { margin: 6px 0; }
.status-list { margin: 8px 10px 14px 14px; padding: 0; list-style: none; color: var(--brown); }
.status-list li { padding: 3px 0; border-bottom: 1px dotted #c6a978; }
.status-list b { float: right; }
.st-on { color: var(--ok); font-weight: bold; }
.st-off { color: var(--bad); font-weight: bold; }
.form-score ul li { position: relative; }
.form-score ul li small { color: #7c5a2a; }
.rs-flag { position: absolute; right: 8px; top: 3px; }
.rs-flag img { display: inline; }
.form-login .btn-login { font-family: inherit; }

/* ------------------------------------------------------------- content */
.col-2 .content .inner-content { margin-right: 14px; }
.inner-content h3 { margin-top: 12px; }
.btn-row .btn, .rank-switch .btn, .inner-content p > .btn, .news-list > .btn, .buy-box .btn { display: inline-block; vertical-align: middle; margin: 4px 4px 0 0; }
.rank-switch { margin: 6px 0 10px; }
.rank-switch .btn.on { background-image: url(../img/button-bg-3.gif); color: #fff; }
.flag { display: inline-block; vertical-align: middle; }
.trenner { margin: 14px auto; }
.muted-text { color: #7c5a2a; }

/* alerts */
.alert { margin: 8px 12px 10px 0; padding: 8px 12px; border-radius: 3px; border: 1px solid; font-size: 12px; font-weight: bold; }
.col-2 > .alert { margin: 0 4px 10px 0; }
.alert-success { background: #e4efc8; border-color: #7c9b3a; color: #2d4a07; }
.alert-error { background: #f6d4c4; border-color: #b0422a; color: #7a1305; }
.alert-info { background: #f3e6c2; border-color: #b28a45; color: #5a3100; }

/* news */
.news-item { padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px dotted #b28a45; }
.news-item h3 { margin: 4px 0 2px; padding: 0; font-size: 14px; }
.news-item h3 a { color: var(--wine); text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline; }
.news-meta { color: #86602b; font-size: 11px; margin-bottom: 6px; }
.news-meta .pin { color: var(--wine-2); font-weight: bold; }
.news-body { font-size: 12px; line-height: 19px; padding-bottom: 12px; }
.pager { margin: 10px 0; }
.pager a, .pager span { display: inline-block; min-width: 20px; padding: 2px 6px; margin: 0 2px 4px 0; text-align: center; border: 1px solid #b28a45; background: #efdfb6; color: var(--brown); text-decoration: none; }
.pager span.on { background: var(--wine); color: var(--gold); border-color: var(--wine); }

/* video */
.video .video-bg iframe { display: block; border: 1px solid #eae0c6; }

/* forms */
.mt-form { margin: 10px 0 6px; }
.mt-form .row { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mt-form label { width: 150px; color: var(--brown); font-weight: bold; }
.mt-form label.inl { width: auto; }
.mt-form .row.check label, .mt-form .row.submit { width: auto; margin-inline-start: 158px; font-weight: normal; }
.mt-form .row.check label + label { margin-inline-start: 12px; }
.mt-form input[type=text], .mt-form input:not([type]), .mt-form input[type=email], .mt-form input[type=password],
.mt-form input[type=search], .mt-form select, .mt-form textarea, .shop-search input, .shop-search select, .cat-table input:not([type=checkbox]) {
	width: 230px; box-sizing: border-box; padding: 5px 7px; font: 12px Tahoma, Arial, sans-serif; color: var(--ink);
	background: #fbf3dc; border: 1px solid #a88449; border-radius: 2px; box-shadow: inset 1px 1px 2px rgba(80, 40, 0, .2);
}
.mt-form textarea { width: 300px; resize: vertical; }
.mt-form.wide label { width: 120px; }
.mt-form.wide .row.check label, .mt-form.wide .row.submit { margin-inline-start: 128px; }
.mt-form.wide input:not([type=checkbox]):not([type=hidden]), .mt-form.wide textarea { width: 320px; }
.mt-form.wide input.short, .mt-form input.short { width: 90px !important; }
.mt-form input.tiny, .cat-table input.tiny, .mt-form.wide input.tiny { width: 50px !important; }
.mt-form select { width: auto; }
.mt-form input:focus, .mt-form textarea:focus, .mt-form select:focus, .shop-search input:focus { outline: 2px solid #c9942f; outline-offset: 0; }
.mt-form small { flex-basis: 100%; margin-inline-start: 158px; color: #7c5a2a; font-size: 11px; }
.mt-form.wide small { margin-inline-start: 128px; }
.mt-form .btn-big, button.btn-big, a.btn-big {
	background: url(../img/btn-big.jpg) no-repeat 0 0; border: 0; color: var(--gold-2); cursor: pointer; display: inline-block;
	font: bold 15px Tahoma, Arial, sans-serif; height: 38px; width: 287px; text-align: center; text-decoration: none;
	line-height: 36px; text-shadow: -1px -1px #000; margin: 0;
}
.mt-form .btn-big:hover, button.btn-big:hover, a.btn-big:hover { background-position: 0 -38px; color: #fff; }
.form-foot { margin: 0 0 8px; }
.icon-preview { width: 32px; height: 32px; display: inline-block; vertical-align: middle; border: 1px solid #b28a45; background: #2a1003; }
.link-btn { background: none; border: 0; padding: 0; color: var(--wine-2); cursor: pointer; text-decoration: underline; font-size: 11px; }
.link-btn.danger { color: var(--bad); font-weight: bold; }
.del-form { margin-top: 12px; text-align: end; }
.spoiler { filter: blur(4px); transition: filter .2s; cursor: help; }
.spoiler:hover, .spoiler:focus { filter: none; }

/* tables */
.data-table, .kv-table, .req-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 12px; }
.data-table th, .req-table th {
	background: linear-gradient(#7b1300, #540b00); color: var(--gold); padding: 6px 5px; font-weight: bold; text-align: center;
	border: 1px solid #3c0800;
}
.data-table td, .req-table td { padding: 5px; border: 1px solid #d2b983; text-align: center; color: var(--ink); }
.data-table tbody tr:nth-child(odd) td, .req-table tbody tr:nth-child(odd) td { background: rgba(255, 245, 215, .55); }
.data-table tbody tr:nth-child(even) td, .req-table tbody tr:nth-child(even) td { background: rgba(214, 186, 128, .28); }
.data-table tbody tr:hover td { background: rgba(255, 226, 150, .7); }
.data-table td.nm { font-weight: bold; text-align: start; }
.data-table td.nm a { color: var(--wine); }
.data-table tr.top1 td:first-child { color: #b8860b; font-weight: bold; font-size: 14px; }
.data-table tr.top2 td:first-child { color: #7d7d7d; font-weight: bold; font-size: 13px; }
.data-table tr.top3 td:first-child { color: #9c5a1c; font-weight: bold; font-size: 13px; }
.data-table tr.muted td { opacity: .55; }
.data-table.small { font-size: 11px; }
.data-table .actions { white-space: nowrap; }
.data-table .actions a { font-size: 11px; margin: 0 4px; }
.mini-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.kv-table th { width: 150px; text-align: start; color: var(--brown); padding: 6px; border-bottom: 1px dotted #b28a45; }
.kv-table td { padding: 6px; border-bottom: 1px dotted #b28a45; }
.req-table td:first-child { font-weight: bold; text-align: start; }
.cat-table input:not([type=checkbox]) { width: 120px; padding: 3px 5px; }

/* download */
.dl-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.dl-btn {
	display: block; width: 174px; height: 63px; background: url(../img/download-client.jpg) no-repeat 0 0;
	color: #fff4c8; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 15px;
}
.dl-btn span { display: flex; align-items: center; height: 63px; padding: 0 8px 0 62px; text-shadow: 1px 1px 2px #000; direction: inherit; }
.dl-btn:hover { background-position: 0 -63px; }
.dl-note { margin-top: 8px; color: #5a3100; }
.download-inner-content h3 { color: var(--wine); font-size: 14px; margin: 10px 0 6px; }
.download-inner-content { padding: 0 12px 0 0; }

/* empires map: clickable areas */
.empirebox { display: none; }
.empirebox-1 { display: block; }

/* ------------------------------------------------------------- admin */
.admin-nav { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav a { display: block; padding: 4px 10px; background: #3b0602; color: var(--gold); text-decoration: none; font-weight: bold; font-size: 11px; border-radius: 3px; border: 1px solid #a5793a; }
.admin-nav a.on, .admin-nav a:hover { background: #c69a3b; color: #2a0e00; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.stat { background: rgba(255, 248, 225, .8); border: 1px solid #cfb27a; border-radius: 4px; padding: 8px; text-align: center; }
.stat span { display: block; font-size: 11px; color: #7c5a2a; }
.stat b { display: block; font-size: 18px; color: var(--wine); margin-top: 3px; }
.stat small { color: #7c5a2a; }

/* ------------------------------------------------------------- lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 90vw; max-height: 86vh; border: 3px solid #a9812f; box-shadow: 0 0 30px #000; display: block; }
.lightbox button { position: absolute; background: rgba(60, 10, 0, .8); color: var(--gold); border: 1px solid #a9812f; font-size: 32px; line-height: 1; width: 48px; height: 48px; cursor: pointer; border-radius: 3px; }
.lightbox button:hover { background: #7b1300; color: #fff; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.lb-next { right: 20px; top: 50%; margin-top: -24px; }

/* ------------------------------------------------------------- footer */
.footer-spacer { display: block; height: 106px; }
#footer ul li.nosep { background: none; }

/* ================================================================
   Right-to-left (Arabic)
   The classic page frame uses fixed pixel widths, so the frame itself
   stays left-to-right; only text blocks switch to right-to-left.
   ================================================================ */
[dir=rtl] body { direction: ltr; }
[dir=rtl] .inner-content, [dir=rtl] .box .body, [dir=rtl] .content h2, [dir=rtl] .box h2,
[dir=rtl] .about-inner-content h4, [dir=rtl] .about-inner-content p, [dir=rtl] .characterclasses h4, [dir=rtl] .characterclasses p,
[dir=rtl] .firststeps-inner-content h4, [dir=rtl] .firststeps-inner-content p, [dir=rtl] .empirebox h4, [dir=rtl] .empirebox p,
[dir=rtl] .gallery-inner-content h4, [dir=rtl] .download-inner-content h3, [dir=rtl] .download-inner-content p, [dir=rtl] .dl-buttons,
[dir=rtl] .req-table, [dir=rtl] .main-nav, [dir=rtl] .modul-box h3, [dir=rtl] .userbox, [dir=rtl] .status-list, [dir=rtl] .form-score,
[dir=rtl] .shopbar, [dir=rtl] .col-2 > .alert, [dir=rtl] #regBtn, [dir=rtl] .header-user, [dir=rtl] #footer ul,
[dir=rtl] .tabs-nav li a, [dir=rtl] .firststeps-inner-content .btn { direction: rtl; }
[dir=rtl] .box p, [dir=rtl] .inner-content p, [dir=rtl] .inner-content ul, [dir=rtl] .about-inner-content p { text-align: right; }
[dir=rtl] .content h2, [dir=rtl] .box h2 { position: relative; z-index: 0; background: none; padding: 7px 33px 7px 10px; text-align: right; }
[dir=rtl] .content h2::before, [dir=rtl] .box h2::before {
	content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(-1);
	background: url(../img/heading-3.jpg) no-repeat 0 0;
}
[dir=rtl] .box h2::before { background-image: url(../img/heading-1.jpg); }
[dir=rtl] .box-right h2::before { background-image: url(../img/heading-2.jpg); }
[dir=rtl] .box { float: right; margin: 0 11px 0 0; }
[dir=rtl] .box-right { float: left; margin: 0 0 0 14px; }
[dir=rtl] .col-2 .content .inner-content { margin: 4px 14px 0 5px; }
[dir=rtl] .inner-content ul li { background-position: right 1px; padding: 0 20px 13px 0; }
[dir=rtl] .form-login label { display: block; width: 129px; text-align: right; direction: rtl; }
[dir=rtl] .form-login .agbok { direction: rtl; }
[dir=rtl] .form-login .agbok, [dir=rtl] .form-login .password { text-align: center; }
[dir=rtl] .form-score ul li { padding: 2px 9px 2px 0; }
[dir=rtl] .rs-flag { right: auto; left: 10px; }
[dir=rtl] .status-list { margin: 8px 14px 14px 10px; }
[dir=rtl] .status-list b { float: left; }
[dir=rtl] .alert { margin: 8px 0 10px 12px; }
[dir=rtl] .col-2 > .alert { margin: 0 0 10px 4px; }
[dir=rtl] .btn-row .btn, [dir=rtl] .rank-switch .btn, [dir=rtl] .inner-content p > .btn, [dir=rtl] .news-list > .btn, [dir=rtl] .buy-box .btn { margin: 4px 0 0 4px; }
[dir=rtl] .about-inner-content p, [dir=rtl] .characterclasses p, [dir=rtl] .firststeps-inner-content p, [dir=rtl] .empirebox p { text-align: right; }
[dir=rtl] .download-inner-content { padding: 0 0 0 12px; }
[dir=rtl] .dl-btn span { padding: 0 8px 0 62px; }
[dir=rtl] #regSteps a { unicode-bidi: plaintext; }
[dir=rtl] .kv-table th { text-align: right; }
[dir=rtl] #footer ul li { background-position: 100% 7px; padding: 0 13px 0 5px; }
[dir=rtl] #footer ul li.first, [dir=rtl] #footer ul li.nosep { background: none; }
[dir=rtl] .lb-prev { left: auto; right: 20px; }
[dir=rtl] .lb-next { right: auto; left: 20px; }

/* lists that are not bullet lists */
.inner-content ul.admin-nav li, [dir=rtl] .inner-content ul.admin-nav li { background: none; padding: 0; }