/*
 * Travikas mobile — public.css
 * Owner: Public pages: index.php landing, login.php, anmelden.php, lobby.php, activate.php, password.php.
 *
 * Loaded by Templates/mobile_assets.tpl after the gpack CSS.
 * Put rules only inside @media screen and (max-width: 1023px) (or narrower);
 * desktop (>= 1024px) must stay unchanged.
 *
 * Two scopes:
 *  - body.rvian-public: login, anmelden, lobby, activate, password (game
 *    shell, logged out or waiting for the world). These pages have no drawer
 *    buttons, so the side menu becomes a tab bar instead of a hidden drawer.
 *  - body.indexPage: the index.php landing page (gpack/travian/main*.css;
 *    index.php links this file directly, after main_en.css).
 */

@media screen and (max-width: 1023px) {

	/* ------------------------------------------------------------------ */
	/* Public game-shell pages                                            */
	/* ------------------------------------------------------------------ */

	body.rvian-public {
		-webkit-text-size-adjust: 100%;
		background: #fff;
		overflow-x: hidden;
	}

	body.rvian-public div.wrapper,
	body.rvian-public div#header,
	body.rvian-public div#mid,
	body.rvian-public div#footer {
		min-width: 0;
	}

	body.rvian-public div.wrapper {
		background: linear-gradient(#ececec, #fff 70px);
	}

	body.rvian-public div#dynamic_header {
		background-image: none;
		height: 0 !important;
	}

	body.rvian-public div#header {
		background: linear-gradient(#fdfdfd, #e9e9e9);
		border-bottom: 1px solid #c0c0c0;
		height: 8px;
		padding-top: env(safe-area-inset-top);
		width: 100%;
	}

	body.rvian-public div#mid {
		box-sizing: border-box;
		float: none;
		margin: 0;
		padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
		width: 100%;
	}

	/* Logged-out side menu (Templates/menu.tpl) -> Travian tab bar. */
	body.rvian-public div#side_navi {
		background: transparent !important;
		bottom: auto;
		box-shadow: none;
		float: none;
		height: auto !important;
		left: auto;
		margin: 0 !important;
		min-height: 0;
		overflow: visible;
		padding: 10px 12px 0;
		position: static;
		top: auto;
		transition: none;
		width: auto;
		/* Undo the logged-in drawer (shell.css): no off-screen slide, no panel chrome. */
		border: 0;
		overflow-x: visible;
		overflow-y: visible;
		transform: none;
		visibility: visible;
		z-index: auto;
	}

	body.rvian-public div#side_navi a#logo {
		display: none;
	}

	body.rvian-public div#side_navi p {
		border-bottom: 2px solid #71d000;
		display: flex;
		gap: 4px;
		margin: 0;
		padding: 0;
	}

	body.rvian-public div#side_navi p a {
		align-items: center;
		background: linear-gradient(#fdfdfd, #dcdcdc);
		border: 1px solid #c0c0c0;
		border-bottom: 0;
		border-radius: 5px 5px 0 0;
		box-sizing: border-box;
		color: #333;
		display: flex;
		flex: 1 1 0;
		font: bold 13px/1.2 Verdana, Tahoma, Arial, sans-serif;
		justify-content: center;
		min-height: 44px;
		min-width: 0;
		overflow-wrap: anywhere;
		padding: 0 4px;
		text-align: center;
		text-decoration: none;
	}

	body.rvian-public div#side_navi p a:hover,
	body.rvian-public div#side_navi p a:active {
		color: #71a832;
	}

	body.rvian-public-login div#side_navi p a[href="login.php"],
	body.rvian-public-signup div#side_navi p a[href="anmelden.php"] {
		background: linear-gradient(#ffffff, #f0fbe0);
		border-color: #71d000;
		color: #71a832;
	}

	@media screen and (max-width: 360px) {
		body.rvian-public div#side_navi p {
			flex-wrap: wrap;
		}

		body.rvian-public div#side_navi p a {
			border-bottom: 1px solid #c0c0c0;
			border-radius: 5px;
			flex: 1 1 calc(50% - 2px);
		}

		body.rvian-public div#side_navi p {
			border-bottom: 0;
			padding-bottom: 6px;
		}
	}

	body.rvian-public div#side_info.outgame {
		display: none !important;
	}

	body.rvian-public div#content.login,
	body.rvian-public div#content.signup,
	body.rvian-public div#content.activate,
	body.rvian-public div#content.lobby {
		box-sizing: border-box;
		float: none;
		margin: 0;
		min-height: 0;
		overflow: visible;
		padding: 12px 12px 24px;
		width: 100%;
	}

	/* activate.tpl nests a second #content.signup inside #content.activate. */
	body.rvian-public div#content.activate div#content.signup {
		padding: 0;
	}

	body.rvian-public div#content p,
	body.rvian-public div#content li {
		font-size: 14px;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	/* 468x60 headline images: scale to the screen. */
	body.rvian-public div#content h1 {
		margin: 0 0 8px;
		text-align: center;
	}

	body.rvian-public div#content h1 img {
		aspect-ratio: 468 / 60;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;
		max-width: 100%;
	}

	body.rvian-public div#content h5 {
		margin: 8px 0;
	}

	/* Login / registration / password forms: one column, full-width fields. */
	body.rvian-public table#login_form,
	body.rvian-public table#sign_input {
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		box-sizing: border-box;
		display: block;
		margin: 0 0 16px;
		padding: 4px 12px 8px;
		width: 100%;
	}

	body.rvian-public table#login_form tbody,
	body.rvian-public table#login_form tr,
	body.rvian-public table#sign_input tbody,
	body.rvian-public table#sign_input tr {
		display: block;
	}

	body.rvian-public table#login_form tr,
	body.rvian-public table#sign_input tr {
		padding: 8px 0 0;
	}

	body.rvian-public table#login_form th,
	body.rvian-public table#login_form td,
	body.rvian-public table#sign_input th,
	body.rvian-public table#sign_input td {
		display: block;
		padding: 0 !important;
		text-align: left;
		width: auto;
	}

	body.rvian-public table#login_form th,
	body.rvian-public table#sign_input th {
		color: #333;
		font: bold 14px/1.4 Verdana, Tahoma, Arial, sans-serif;
		margin-bottom: 4px;
	}

	/* Radios, checkboxes and image buttons too: iOS zooms on any field under 16px. */
	body.rvian-public div#content input,
	body.rvian-public div#content select,
	body.rvian-public div#content textarea {
		font-size: 16px;
	}

	body.rvian-public div#content input.text {
		background: #fff;
		border: 1px solid #a6ac9f;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 16px;
		height: 44px;
		max-width: 100%;
		padding: 0 10px;
		width: 100%;
	}

	body.rvian-public div#content input.text:focus {
		border-color: #71d000;
		box-shadow: 0 0 0 2px rgba(113, 208, 0, .25);
		outline: 0;
	}

	body.rvian-public div#content span.error {
		color: #dd0000;
		display: block;
		font-size: 13px;
		line-height: 1.4;
		overflow-wrap: anywhere;
		white-space: normal;
	}

	body.rvian-public div#content p.error_box,
	body.rvian-public div#content ul.important {
		background: #fff5f5;
		border: 1px solid #e5b5b5;
		border-radius: 4px;
		box-sizing: border-box;
		overflow-wrap: anywhere;
		padding: 8px 10px;
	}

	body.rvian-public div#content ul.important:not(:has(li)) {
		display: none;
	}

	body.rvian-public div#content p.error_box a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}

	/* Travian gradient buttons, 48px tall. */
	body.rvian-public div#content p.btn {
		margin: 16px 0;
		text-align: center;
	}

	body.rvian-public div#content button.trav_buttons {
		box-sizing: border-box;
		display: block;
		font: bold 16px/1 Verdana, Tahoma, Arial, sans-serif;
		margin: 0 auto;
		max-width: 320px;
		min-height: 48px;
		padding: 0 24px;
		width: 100%;
	}

	/* Registration: tribe and start-quadrant choices as tappable cards. */
	body.rvian-public table#sign_select {
		background: transparent;
		border: 0;
		box-sizing: border-box;
		display: grid;
		gap: 8px;
		grid-template-columns: 1fr 1fr;
		margin: 0 0 16px;
		width: 100%;
	}

	body.rvian-public table#sign_select tbody,
	body.rvian-public table#sign_select tr {
		display: contents;
	}

	body.rvian-public table#sign_select th,
	body.rvian-public table#sign_select td {
		display: block;
		padding: 0 !important;
		width: auto !important;
	}

	body.rvian-public table#sign_select th:first-child {
		grid-column: 1 / -1;
		order: 0;
		padding-top: 4px !important;
	}

	body.rvian-public table#sign_select td:first-child {
		grid-column: 1 / -1;
		order: 1;
	}

	body.rvian-public table#sign_select th + th {
		grid-column: 1 / -1;
		order: 2;
		padding-top: 8px !important;
	}

	body.rvian-public table#sign_select td + td {
		order: 3;
	}

	body.rvian-public table#sign_select td.pos1 {
		grid-column: 1 / -1;
	}

	body.rvian-public table#sign_select td.pos2 {
		display: none;
	}

	body.rvian-public table#sign_select label {
		align-items: center;
		background: linear-gradient(#fdfdfd, #e6e6e6);
		border: 1px solid #c0c0c0;
		border-radius: 5px;
		box-sizing: border-box;
		color: #333;
		cursor: pointer;
		display: flex;
		font: bold 15px/1.3 Verdana, Tahoma, Arial, sans-serif;
		gap: 8px;
		min-height: 52px;
		padding: 6px 12px;
		width: 100%;
	}

	body.rvian-public table#sign_select label:has(input:checked) {
		background: linear-gradient(#ffffff, #eaf8d6);
		border-color: #71d000;
		box-shadow: inset 0 0 0 1px #71d000;
	}

	body.rvian-public table#sign_select input.radio,
	body.rvian-public div#content label.rules_check input.check {
		accent-color: #71a832;
		flex: 0 0 auto;
		height: 22px;
		margin: 0;
		width: 22px;
	}

	body.rvian-public div#content label.rules_check {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: 10px;
		min-height: 44px;
	}

	body.rvian-public div#content label.rules_check input.check {
		float: none;
		position: static;
	}

	/* activate.php / password.php */
	body.rvian-public div#content div#activation {
		float: none;
		width: auto;
	}

	/* Lobby: facts and registered players stack into cards. */
	body.rvian-public div#content.lobby .lobby_box {
		box-sizing: border-box;
		margin: 0 0 16px;
		padding: 20px 12px;
	}

	body.rvian-public div#content.lobby .lobby_links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
	}

	body.rvian-public div#content.lobby .lobby_links a,
	body.rvian-public div#content.lobby a#lobby_enter {
		align-items: center;
		box-sizing: border-box;
		display: inline-flex;
		justify-content: center;
		margin: 0;
		min-height: 44px;
	}

	body.rvian-public div#content.lobby .lobby_facts {
		box-sizing: border-box;
		max-width: none;
	}

	body.rvian-public div#content.lobby .lobby_facts span {
		font-size: 14px;
	}

	body.rvian-public div#content.lobby #registered_players input {
		font-size: 16px;
		min-height: 44px;
	}

	/* Footer */
	body.rvian-public div.footer-stopper {
		margin-bottom: 0;
	}

	body.rvian-public div#footer {
		box-sizing: border-box;
		height: auto;
		margin-top: 0;
		padding-bottom: env(safe-area-inset-bottom);
		position: static;
		width: 100%;
	}

	body.rvian-public div#footer div#mfoot {
		background-position: center 12px;
		box-sizing: border-box;
		height: auto;
		padding: 52px 12px 12px;
		text-align: center;
		width: 100%;
	}

	body.rvian-public div#footer div#mfoot div.copyright {
		text-align: center;
	}

	/* ------------------------------------------------------------------ */
	/* Registered players list (index + lobby): one card per player.      */
	/* ------------------------------------------------------------------ */

	#registered_players table,
	#content.lobby #registered_players table {
		background: transparent;
		border-spacing: 0;
		display: block;
	}

	#registered_players table thead {
		display: none;
	}

	#registered_players table tbody,
	#registered_players table tfoot {
		display: block;
	}

	#registered_players table tbody tr,
	#registered_players table tfoot tr {
		align-items: center;
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		margin: 0 0 6px;
		padding: 8px 10px;
	}

	#registered_players table tbody td,
	#registered_players table tfoot td,
	#content.lobby #registered_players table tbody td,
	#content.lobby #registered_players table tfoot td.quad_stats {
		background: transparent;
		display: block;
		font-size: 14px;
		padding: 0;
	}

	#registered_players table tbody td.pla {
		flex: 1 1 100%;
		font-weight: bold;
	}

	#registered_players table tbody td[data-label]::before {
		color: #787878;
		content: attr(data-label) ": ";
		font-weight: normal;
	}

	#registered_players table tfoot tr {
		background: #f3f3f3;
		justify-content: center;
	}

	#registered_players .invite_more input {
		box-sizing: border-box;
		font-size: 16px;
		min-height: 44px;
		width: 100%;
	}

	/* ------------------------------------------------------------------ */
	/* index.php landing page                                             */
	/* ------------------------------------------------------------------ */

	body.indexPage {
		-webkit-text-size-adjust: 100%;
		background-size: 3px 300px;
		/* clip, not hidden: html,body{height:100%} would make body the scroller. */
		overflow-x: clip;
	}

	body.indexPage .wrapper {
		min-width: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	body.indexPage #country_select {
		display: none;
	}

	/* Hero: crop the 3840x389 artwork around the logo and the signpost. */
	body.indexPage #header {
		background-position: calc(50% + 70px) top;
		background-size: auto 230px;
		height: 230px;
		overflow: hidden;
		position: relative;
	}

	body.indexPage #navigation {
		box-sizing: border-box;
		height: auto;
		left: auto;
		margin: 0;
		padding: 8px 8px 0;
		position: relative;
		top: auto;
		width: auto;
	}

	body.indexPage #navigation a.home {
		height: 120px;
		left: 0;
		top: -238px;
		width: 100%;
	}

	body.indexPage #navigation table.menu {
		border-bottom: 2px solid #71d000;
		border-spacing: 0;
		display: block;
		position: static;
		width: auto;
	}

	body.indexPage #navigation table.menu tbody {
		display: block;
	}

	body.indexPage #navigation table.menu tr {
		display: flex;
		gap: 4px;
	}

	body.indexPage #navigation .menu td {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
	}

	body.indexPage #navigation .menu a,
	body.indexPage #navigation .menu a:hover,
	body.indexPage #navigation .menu a:active {
		align-items: center;
		background: linear-gradient(#fdfdfd, #dcdcdc);
		border: 1px solid #c0c0c0;
		border-bottom: 0;
		border-radius: 5px 5px 0 0;
		box-sizing: border-box;
		display: flex;
		font: bold 14px/1.2 Verdana, Tahoma, Arial, sans-serif;
		justify-content: center;
		min-height: 44px;
		padding: 0 4px;
		text-align: center;
	}

	body.indexPage #navigation .menu a span,
	body.indexPage #navigation .menu a:hover span,
	body.indexPage #navigation .menu a:active span {
		background: transparent;
		padding: 0;
	}

	body.indexPage #navigation .menu a.mark {
		background: linear-gradient(#ffffff, #f0fbe0);
		border-color: #71d000;
	}

	/* Signpost text: overlay the painted sign at its cropped position. */
	body.indexPage #register_now {
		left: 50%;
		margin-left: -19px;
		top: 164px;
		transform: scale(.59);
		transform-origin: 0 0;
	}

	body.indexPage #register_now a {
		min-height: 30px;
	}

	body.indexPage #t4play {
		display: none;
	}

	body.indexPage #content {
		padding: 12px 8px 24px;
	}

	body.indexPage #content .grit {
		width: auto;
	}

	body.indexPage .grit .infobox,
	body.indexPage .grit .secondarybox {
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
		box-sizing: border-box;
		float: none;
		margin: 0 0 12px;
		min-height: 0;
		overflow: hidden;
		width: auto;
	}

	body.indexPage .grit .infobox {
		padding: 16px 0 12px;
	}

	body.indexPage .grit .infobox div {
		padding-left: 14px;
		padding-right: 14px;
	}

	body.indexPage #server_start_notice p.invite_line input {
		font-size: 16px;
		min-height: 44px;
	}

	body.indexPage #content p a {
		display: inline-block;
		min-height: 24px;
	}

	body.indexPage #player_counter {
		height: 98px;
		left: 0;
		margin: 10px 0;
		width: auto;
	}

	body.indexPage #player_counter table {
		left: 125px;
		right: 14px;
		width: auto;
	}

	body.indexPage #server_statistics {
		left: 0;
		width: auto;
	}

	body.indexPage #server_statistics table {
		box-sizing: border-box;
		padding-left: 0;
	}

	body.indexPage #server_statistics table th,
	body.indexPage #server_statistics table td {
		font-size: 13px;
	}

	body.indexPage #about_the_game ul {
		margin-left: 18px;
	}

	/* Screenshots strip: swipe sideways instead of the arrow carousel. */
	body.indexPage .grit #screenshots {
		background: #4c4c4c linear-gradient(#5c5c5c, #3e3e3e);
		height: auto;
		padding-bottom: 12px;
		width: auto;
	}

	body.indexPage #screenshots h2 {
		padding: 12px 14px 8px;
	}

	body.indexPage #screenshots .navi {
		display: none;
	}

	body.indexPage #screenshots_preview {
		height: 81px;
		margin: 0 14px;
		overflow-x: auto;
		overflow-y: hidden;
		position: relative;
		width: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.indexPage #screenshot_list {
		left: 0 !important;
		position: absolute;
	}

	body.indexPage #screenshot_list li {
		margin-right: 6px;
	}

	body.indexPage #registered_players {
		padding: 14px;
	}

	body.indexPage #registered_players .invite_more {
		padding-left: 0;
	}

	body.indexPage #newsbox {
		background: none;
		padding-bottom: 8px;
	}

	body.indexPage #newsbox h2 {
		background: linear-gradient(#f7f7f7, #e3e3e3);
		border-bottom: 1px solid #d0d0d0;
		border-top: 1px solid #d0d0d0;
		height: auto;
		padding: 8px 14px;
	}

	body.indexPage #newsbox .news {
		background: none;
		box-sizing: border-box;
		padding: 8px 14px 0;
		width: auto;
	}

	body.indexPage #newsbox .news p,
	body.indexPage #newsbox .news_pager {
		overflow-wrap: anywhere;
		padding-right: 0;
	}

	body.indexPage #newsbox .news_pager a,
	body.indexPage #newsbox .news_pager span {
		display: inline-block;
		line-height: 44px;
		min-width: 44px;
		text-align: center;
	}

	body.indexPage #footer {
		background-size: auto 90px;
		height: auto;
		padding: 12px 8px;
		position: static;
	}

	body.indexPage #footer .container {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: auto;
	}

	body.indexPage #footer .logo,
	body.indexPage #footer .menu,
	body.indexPage #footer .copyright {
		position: static;
	}

	body.indexPage #footer ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	body.indexPage #footer ul.menu li.copyright {
		flex-basis: 100%;
		text-align: center;
	}

	body.indexPage #footer ul.menu a {
		display: inline-block;
		font-size: 13px;
		line-height: 44px;
		padding: 0 6px;
	}

	/* "Choose a world" and screenshot overlays fit the screen. */
	body.indexPage .overlay_content,
	body.indexPage #login_layer .overlay_content,
	body.indexPage #signup_layer .overlay_content,
	body.indexPage #iframe_layer .overlay_content,
	body.indexPage #screenshot_layer .overlay_content {
		background-size: 100% 100%;
		box-sizing: border-box;
		left: 8px;
		margin: 0;
		max-width: 460px;
		right: 8px;
		top: 70px;
		width: auto;
	}

	body.indexPage #login_layer .overlay_content,
	body.indexPage #signup_layer .overlay_content {
		margin: 0 auto;
	}

	body.indexPage #login_layer h2,
	body.indexPage #signup_layer h2 {
		background: linear-gradient(#ffffff, #eeeeee);
		padding: 16px 56px 12px 16px;
	}

	body.indexPage ul.world_list {
		padding: 8px;
	}

	body.indexPage .world_list li.w_big {
		background-position: left center;
		background-size: cover;
		border-radius: 4px;
		float: none;
		height: 64px;
		margin: 0;
		width: auto;
	}

	body.indexPage .world_list .w_big img {
		height: 64px;
		width: 100%;
	}

	body.indexPage .world_list .label_players,
	body.indexPage .world_list .label_online {
		left: auto;
		right: 64px;
	}

	body.indexPage #screenshot_layer #screen_view {
		height: auto;
		max-width: 100%;
	}

	body.indexPage #screenshot_layer #screen_desc {
		padding: 0 16px;
	}
}