/*
 * Travikas mobile — layout.css
 * Base mobile layout (content column, village and world maps, forms). Moved out of
 * the gpack modules/new_layout_ltr.css so classic view (cookie rv_layout=classic),
 * which skips Templates/mobile_assets.tpl, never gets it.
 */

/* The original game shell is intentionally kept for larger screens.
   Header, drawers, resource bar and footer live in css/mobile/shell.css. */
@media screen and (max-width: 1023px) {
	body {
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%;
	}

	div#dynamic_header {
		height: 0 !important;
		background-image: none;
	}

	div#mid {
		box-sizing: border-box;
		float: none;
		margin: 0;
		min-width: 0;
		width: 100%;
	}

	div#content,
	body.mod1 div#content,
	body.mod2 div#content,
	body.mod3 div#content {
		box-sizing: border-box;
		float: none;
		min-height: 0;
		overflow-x: auto;
		padding: calc(var(--mobile-resource-height, 62px) + 12px) 8px 20px;
		width: 100% !important;
	}

	div.village1 {
		padding: calc(var(--mobile-resource-height, 62px) + 12px) 8px 20px;
	}

	div.village1 h1 {
		font-size: 20px;
		left: 0;
		min-height: 29px;
		word-break: break-word;
	}

	div.village1 div#village_map {
		float: none;
		margin: 0 auto 20px;
		max-width: none;
		touch-action: manipulation;
		zoom: 1.15;
	}

	@supports not (zoom: 1) {
		div.village1 div#village_map {
			margin-bottom: 55px;
			transform: scale(1.15);
			transform-origin: top center;
		}
	}

	/* Keep the world map easy to pan and give each tile a larger touch target. */
	div.map {
		box-sizing: border-box;
		padding: 16px 0 20px;
		width: 100%;
	}

	div.map h1 {
		font-size: 20px;
		margin: 0 0 12px;
		padding: 0 8px;
	}

	div.map div#map {
		margin: 0 auto 24px;
		zoom: 1.12;
	}

	@supports not (zoom: 1) {
		div.map div#map {
			margin-bottom: 66px;
			transform: scale(1.12);
			transform-origin: top center;
		}
	}

	div.map img#detailed_map {
		display: block;
		float: none;
		left: auto;
		margin: 0 auto 16px;
		max-width: 100%;
		position: static;
	}

	div.map div#map_details {
		float: none;
		margin: 0;
		width: 100%;
	}

	div.map div#map_details table {
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	}

	div.map table#options {
		margin: 0;
		width: 100%;
	}

	div.map table#options tbody td {
		box-sizing: border-box;
		min-height: 44px;
		padding: 0;
	}

	div.map table#options thead th {
		font-size: 16px;
		padding: 10px 12px;
		text-align: left;
	}

	div.map table#options tbody tr {
		background: transparent;
	}

	div.map table#options tbody td.none,
	div.map table#options tbody td > a {
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		font-size: 14px;
		line-height: 1.3;
		margin: 4px 0;
		min-height: 48px;
		padding: 12px;
	}

	div.map table#options tbody td.none {
		color: #666;
	}

	div.map table#options tbody td > a {
		align-items: center;
		display: flex;
		font-weight: bold;
		text-decoration: none;
	}

	div.map table#options tbody td > a:hover,
	div.map table#options tbody td > a:focus {
		background: #e8f5dc;
		border-color: #71a832;
		outline: none;
	}

	/* The attack-time calculator is a desktop overlay; keep it below the map on phones. */
	body .attack-time,
	div.attack-time {
		box-sizing: border-box;
		left: auto !important;
		margin: 12px auto 0;
		max-width: 280px;
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: min(100%, 280px) !important;
	}

	.attack-time .toggle {
		font-size: 13px;
		min-height: 44px;
		padding: 10px 12px;
	}

	/* Rally point tabs and raid actions should be usable without precision tapping. */
	div#content.build div#build {
		box-sizing: border-box;
		padding: 16px 0 20px;
		width: 100%;
	}

	div#build div#textmenu {
		align-items: stretch;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		gap: 8px;
		margin: 12px 0 18px;
		white-space: normal;
	}

	div#build div#textmenu a {
		align-items: center;
		background: #fff;
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-flex;
		font-size: 14px;
		justify-content: center;
		line-height: 1.2;
		min-height: 44px;
		padding: 10px 12px;
		text-align: center;
	}

	div#build div#textmenu a.selected {
		background: #e8f5dc;
		border-color: #71a832;
		font-weight: bold;
	}

	div#build a.arrow,
	div#build a.build,
	div#build button.trav_buttons,
	div#build input[type="submit"],
	div#build input[type="button"] {
		box-sizing: border-box;
		font-size: 14px;
		min-height: 44px;
		padding: 10px 14px;
	}

	div.village1 div#map_details {
		float: none;
		margin: 0;
		width: 100%;
	}

	div.village1 div#map_details > br {
		display: none;
	}

	div.village1 div#map_details table,
	div.village1 table#building_contract {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}

	div.village1 table#production {
		display: none;
	}

	div.village1 table#movements td,
	div.village1 table#troops td {
		padding-bottom: 5px;
		padding-top: 5px;
	}

	/* Give native controls a comfortable touch target without changing actions. */
	div#content button,
	div#content input[type="submit"],
	div#content input[type="button"],
	div#content select,
	div#content input.text,
	div#content textarea {
		min-height: 40px;
	}

	/* Prevent iOS from zooming the page when a small desktop-sized field gets focus. */
	div#content input[type="date"],
	div#content input[type="datetime-local"],
	div#content input[type="email"],
	div#content input[type="number"],
	div#content input[type="password"],
	div#content input[type="search"],
	div#content input[type="tel"],
	div#content input[type="text"],
	div#content select,
	div#content textarea {
		box-sizing: border-box;
		font-size: 16px;
		max-width: 100%;
	}

	div#content label {
		white-space: normal;
	}

	div#content a,
	div#content button,
	div#content input,
	div#content select,
	div#content textarea {
		touch-action: manipulation;
	}
}