@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

:root {
	--ma-ink: #1a2418;
	--ma-forest: #2d4a32;
	--ma-forest-deep: #1e3224;
	--ma-moss: #3f6b45;
	--ma-gold: #b8892d;
	--ma-gold-soft: #d4a84b;
	--ma-cream: #f7f3ea;
	--ma-surface: rgba(255, 252, 246, 0.94);
	--ma-line: rgba(45, 74, 50, 0.18);
	--ma-danger: #a33b2b;
	--ma-focus: #2f6f3e;
	--ma-radius: 14px;
	--ma-shadow: 0 18px 40px rgba(20, 32, 18, 0.18);
	--ma-font: "Vazirmatn", "Tahoma", sans-serif;
}

/* Site font: Vazirmatn on document text only — do NOT use body * (breaks Travian UI metrics/sprites) */
html,
body {
	font-family: var(--ma-font);
}

/* Auth / public form chrome */
body.login,
body.signup,
body.activate,
body.logout,
body.support,
body.login *,
body.signup *,
body.activate *,
body.logout *,
body.support * {
	font-family: var(--ma-font) !important;
}

body.login .outerLoginBox,
body.signup #content.signup,
body.activate #content,
body.logout #content,
body.support #content.support {
	background: var(--ma-surface) !important;
	border: 1px solid var(--ma-line) !important;
	border-radius: var(--ma-radius) !important;
	box-shadow: var(--ma-shadow);
	padding: 28px 28px 22px !important;
	box-sizing: border-box;
}

body.login .outerLoginBox {
	width: 620px;
	max-width: 100%;
	padding: 22px 18px 18px !important;
}

body.login .outerLoginBox h2,
body.signup #content.signup h1.titleInHeader,
body.signup #content.signup h4.round {
	font-family: var(--ma-font);
	color: var(--ma-forest-deep);
	letter-spacing: 0;
	margin-bottom: 18px;
}

body.login .innerLoginBox {
	background: transparent !important;
	background-image: none !important;
	width: 100% !important;
	max-width: 580px;
	min-height: 235px !important;
	height: auto !important;
	padding: 8px 4px !important;
	box-sizing: border-box;
	position: relative;
	display: flex !important;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	/* Keep soldier on the visual left even on RTL pages */
	direction: ltr;
}

body.login .login-soldier-art {
	flex: 0 0 200px;
	width: 200px;
	height: 235px;
	background: url("login/bgLogin-rtl.png") left top / 551px 235px no-repeat;
	pointer-events: none;
}

body.login .innerLoginBox > form {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 4px;
	direction: rtl;
}

body.login table.loginTable {
	width: 100% !important;
	max-width: 340px;
	margin-left: 0;
	margin-right: 0;
}

body.login table.loginTable {
	width: 100% !important;
	max-width: 340px;
	margin-left: 0;
	margin-right: 0;
}

body.login .greenbox,
body.login .greenbox-top,
body.login .greenbox-content,
body.login .greenbox-bottom {
	background: transparent !important;
	background-image: none !important;
	width: auto !important;
	float: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
}

body.login .passwordForgotten {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ma-line);
}

body.login table.loginTable,
body.login table.pwForgottenTable,
body.signup table#sign_input {
	border-collapse: separate;
	border-spacing: 0 12px;
}

body.login table.pwForgottenTable,
body.signup table#sign_input {
	width: 100% !important;
}

body.login table.loginTable td,
body.login table.pwForgottenTable th,
body.login table.pwForgottenTable td,
body.signup table#sign_input th,
body.signup table#sign_input td {
	vertical-align: middle;
	padding: 0 8px !important;
	background: transparent !important;
	border: 0 !important;
	font-family: var(--ma-font);
	color: var(--ma-ink);
	font-size: 14px;
}

body.login table.loginTable td:first-child,
body.signup table#sign_input th {
	width: 32%;
	font-weight: 600;
	color: var(--ma-forest);
	white-space: nowrap;
}

body.login input.text,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.signup input.text,
body.signup input[type="text"],
body.signup input[type="password"],
body.activate input.text,
body.logout input.text,
#content.login input.text,
#content.signup input.text {
	width: 100% !important;
	max-width: 320px;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--ma-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--ma-ink) !important;
	font-family: var(--ma-font) !important;
	font-size: 15px !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

body.login input.text:focus,
body.signup input.text:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.signup input[type="text"]:focus,
body.signup input[type="password"]:focus {
	outline: none !important;
	border-color: var(--ma-focus) !important;
	box-shadow: 0 0 0 3px rgba(47, 111, 62, 0.18) !important;
}

body.login .error,
body.login .error.RTL,
body.signup .error,
body.signup span.error,
div.outerLoginBox table.loginTable div.error,
div.outerLoginBox table.pwForgottenTable div.error {
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.45 !important;
	color: var(--ma-danger) !important;
	font-size: 12px !important;
	font-weight: 500;
	margin: 8px 0 4px !important;
	padding: 0 !important;
	display: block;
	clear: both;
	white-space: normal;
}

body.login table.loginTable td {
	position: relative;
	vertical-align: top !important;
	padding-bottom: 4px !important;
}

body.login table.loginTable tr.account td,
body.login table.loginTable tr.pass td,
body.login table.loginTable tr.captcha td {
	padding-bottom: 10px !important;
}

body.login .error:empty,
body.login .error.RTL:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
}

body.login .math-captcha-question {
	font-family: var(--ma-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--ma-forest-deep) !important;
	background: linear-gradient(180deg, #fff, #f1ebe0) !important;
	border: 1px solid var(--ma-line) !important;
	border-radius: 10px !important;
	padding: 10px 16px !important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}

/* Modern primary buttons on auth pages */
body.login button,
body.signup button,
body.activate button,
body.logout button,
body.login #s1,
body.signup #btn_signup {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: pointer;
	font-family: var(--ma-font) !important;
}

body.login button .button-container,
body.signup button .button-container,
body.login #s1 .button-container,
body.signup #btn_signup .button-container {
	background: none !important;
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.login button .button-position,
body.signup button .button-position,
body.login button .btl,
body.login button .btr,
body.login button .btc,
body.login button .bml,
body.login button .bmr,
body.login button .bmc,
body.login button .bbl,
body.login button .bbr,
body.login button .bbc,
body.signup button .btl,
body.signup button .btr,
body.signup button .btc,
body.signup button .bml,
body.signup button .bmr,
body.signup button .bmc,
body.signup button .bbl,
body.signup button .bbr,
body.signup button .bbc {
	display: none !important;
	background: none !important;
}

body.login button .button-contents,
body.signup button .button-contents,
body.login #s1 .button-contents,
body.signup #btn_signup .button-contents {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	height: 46px;
	padding: 0 22px !important;
	border-radius: 11px !important;
	background: linear-gradient(180deg, var(--ma-moss), var(--ma-forest-deep)) !important;
	color: #fff !important;
	font-family: var(--ma-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	box-shadow: 0 8px 18px rgba(30, 50, 36, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

body.login button:hover .button-contents,
body.signup button:hover .button-contents {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(30, 50, 36, 0.34), inset 0 1px 0 rgba(255,255,255,0.2);
}

body.login button:active .button-contents,
body.signup button:active .button-contents {
	transform: translateY(1px);
	filter: brightness(0.96);
}

body.login .showPWForgottenLink,
body.login .passwordForgottenLink a {
	font-family: var(--ma-font);
	color: var(--ma-forest) !important;
	font-weight: 600;
	text-decoration: none;
}

body.login .showPWForgottenLink:hover {
	color: var(--ma-gold) !important;
}

body.login #side_navi ul li,
body.signup #side_navi ul li {
	font-family: var(--ma-font);
}

body.login #footer .copyright,
body.signup #footer .copyright,
#footer .copyright {
	font-family: var(--ma-font);
	color: var(--ma-forest);
	font-size: 12px;
}

body.login .brand-mark,
body.signup .brand-mark {
	font-family: var(--ma-font);
	font-weight: 700;
	color: var(--ma-gold);
	font-size: 13px;
	margin-bottom: 8px;
	display: block;
}

/* Soften tribe selectors on register */
body.signup .tribeSelect {
	display: grid;
	gap: 10px;
}

body.signup .tribeSelect .tribe {
	border: 1px solid var(--ma-line);
	border-radius: 12px;
	padding: 12px;
	background: #fff;
}

/* Support / contact form — same forest/gold auth look */
body.support #content.support,
body.support .supportForm,
body.support .supportDescription {
	font-family: var(--ma-font);
}

body.support #content.support {
	background: var(--ma-surface) !important;
	border: 1px solid var(--ma-line) !important;
	border-radius: var(--ma-radius) !important;
	box-shadow: var(--ma-shadow);
	padding: 28px 28px 22px !important;
	box-sizing: border-box;
}

body.support #content.support h1.titleInHeader {
	font-family: var(--ma-font);
	color: var(--ma-forest-deep);
	margin-bottom: 12px;
}

body.support .supportDescription {
	color: var(--ma-forest);
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 20px;
}

body.support .supportForm {
	max-width: 520px;
}

body.support table.form_table {
	width: 100% !important;
	border-collapse: separate;
	border-spacing: 0 12px;
	margin-bottom: 4px;
}

body.support table.form_table td {
	vertical-align: middle;
	padding: 0 8px !important;
	background: transparent !important;
	border: 0 !important;
	font-family: var(--ma-font);
	color: var(--ma-ink);
	font-size: 14px;
}

body.support .form_table_label,
body.support .form_label {
	font-weight: 600;
	color: var(--ma-forest) !important;
	white-space: nowrap;
}

body.support input[type="text"],
body.support input:not([type]),
body.support select,
body.support textarea {
	width: 100% !important;
	max-width: 360px;
	min-height: 44px;
	padding: 10px 14px !important;
	border: 1px solid var(--ma-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--ma-ink) !important;
	font-family: var(--ma-font) !important;
	font-size: 15px !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

body.support textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

body.support input:focus,
body.support select:focus,
body.support textarea:focus {
	outline: none !important;
	border-color: var(--ma-focus) !important;
	box-shadow: 0 0 0 3px rgba(47, 111, 62, 0.18) !important;
}

body.support .error,
body.support span.error,
body.support p.error {
	color: var(--ma-danger) !important;
	font-size: 12px !important;
	font-weight: 500;
	margin-top: 6px;
	display: block;
}

body.support button,
body.support #submit {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: pointer;
	font-family: var(--ma-font) !important;
}

body.support button .button-container,
body.support #submit .button-container {
	background: none !important;
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.support button .button-position,
body.support button .btl,
body.support button .btr,
body.support button .btc,
body.support button .bml,
body.support button .bmr,
body.support button .bmc,
body.support button .bbl,
body.support button .bbr,
body.support button .bbc {
	display: none !important;
	background: none !important;
}

body.support button .button-contents,
body.support #submit .button-contents {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	height: 46px;
	padding: 0 22px !important;
	border-radius: 11px !important;
	background: linear-gradient(180deg, var(--ma-moss), var(--ma-forest-deep)) !important;
	color: #fff !important;
	font-family: var(--ma-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	box-shadow: 0 8px 18px rgba(30, 50, 36, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

body.support button:hover .button-contents {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(30, 50, 36, 0.34), inset 0 1px 0 rgba(255,255,255,0.2);
}

body.support button:active .button-contents {
	transform: translateY(1px);
	filter: brightness(0.96);
}

body.support .brand-mark,
body.login #side_navi ul li,
body.signup #side_navi ul li,
body.support #side_navi ul li {
	font-family: var(--ma-font);
}

body.support .brand-mark {
	font-family: var(--ma-font);
	font-weight: 700;
	color: var(--ma-gold);
	font-size: 13px;
	margin-bottom: 8px;
	display: block;
}

@media screen and (max-width: 768px) {
	body.login .outerLoginBox,
	body.signup #content.signup,
	body.support #content.support {
		padding: 20px 16px !important;
		margin: 0 8px;
	}

	body.login .innerLoginBox {
		flex-direction: column;
		align-items: center;
		width: 100% !important;
		min-height: 0 !important;
		padding: 8px !important;
	}

	body.login .login-soldier-art {
		flex: 0 0 auto;
		width: 100%;
		max-width: 280px;
		height: 160px;
		background-size: cover;
		background-position: left center;
	}

	body.login table.loginTable,
	body.signup table#sign_input,
	body.support table.form_table,
	body.login table.loginTable tbody,
	body.login table.loginTable tr,
	body.login table.loginTable td,
	body.signup table#sign_input tbody,
	body.signup table#sign_input tr,
	body.signup table#sign_input th,
	body.signup table#sign_input td,
	body.support table.form_table tbody,
	body.support table.form_table tr,
	body.support table.form_table td {
		display: block !important;
		width: 100% !important;
	}

	body.login table.loginTable td:first-child,
	body.signup table#sign_input th,
	body.support .form_table_label {
		margin-bottom: 6px;
		font-size: 13px;
	}

	body.login input.text,
	body.signup input.text,
	body.support input,
	body.support textarea,
	body.support select {
		max-width: 100% !important;
	}

	body.login button .button-contents,
	body.signup button .button-contents,
	body.support button .button-contents {
		width: 100%;
		min-width: 0;
	}
}