/*
 * Travikas mobile — world.css
 * Owner: World: map (karte.php), statistics, map tile/hover tooltips.
 *
 * 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.
 */

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

	/* World map (Templates/Map/mapview.tpl) ----------------------------- */

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

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

	/* The 552x375 map stage scrolls inside its own viewport; the page does not. */
	div#content.map div#map {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px;
		height: auto;
		margin: 0;
		max-width: 100%;
		padding: 0 8px;
		top: 0;
		width: 100%;
		zoom: 1;
		transform: none;
	}

	div#content.map div.mobile-map-viewport {
		background: #f3f3f3;
		border: 1px solid #c0c0c0;
		border-radius: 3px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
		box-sizing: border-box;
		flex: 1 1 100%;
		height: 352px;
		max-width: 554px;
		overflow: auto;
		overscroll-behavior: contain;
		position: relative;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}

	div#content.map div.mobile-map-stage {
		height: 360px;
		position: relative;
		top: -8px;
		width: 552px;
	}

	/* The large map is a 1000px desktop popup; the mobile map already pans. */
	div#content.map div#map a#map_makelarge {
		display: none;
	}

	/* Arrow pad: Travian gradient buttons with green sprite-like arrows. */
	div#content.map div#mobile_map_pad[hidden] {
		display: grid;
	}

	div#content.map div#mobile_map_pad {
		flex: 0 0 auto;
		gap: 4px;
		grid-template-areas:
			".    n    ."
			"w    home e"
			".    s    .";
		grid-template-columns: repeat(3, 48px);
		grid-template-rows: repeat(3, 48px);
	}

	div#mobile_map_pad a {
		align-items: center;
		background: linear-gradient(#fff, #e3e3e3);
		border: 1px solid #a5a5a5;
		border-radius: 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
		box-sizing: border-box;
		display: flex;
		height: 48px;
		justify-content: center;
		position: relative;
		text-decoration: none;
		width: 48px;
		-webkit-tap-highlight-color: rgba(113, 208, 0, .25);
	}

	div#mobile_map_pad a:active,
	div#mobile_map_pad a:focus {
		background: linear-gradient(#f0fae6, #d5efbd);
		border-color: #71a832;
		outline: none;
	}

	div#mobile_map_pad a span {
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	div#mobile_map_pad a::before {
		border: 9px solid transparent;
		content: "";
		height: 0;
		width: 0;
	}

	div#mobile_map_pad a.pad-n { grid-area: n; }
	div#mobile_map_pad a.pad-e { grid-area: e; }
	div#mobile_map_pad a.pad-s { grid-area: s; }
	div#mobile_map_pad a.pad-w { grid-area: w; }
	div#mobile_map_pad a.pad-home { grid-area: home; }

	div#mobile_map_pad a.pad-n::before { border-bottom: 13px solid #71a832; border-top-width: 0; }
	div#mobile_map_pad a.pad-s::before { border-top: 13px solid #71a832; border-bottom-width: 0; }
	div#mobile_map_pad a.pad-e::before { border-left: 13px solid #71a832; border-right-width: 0; }
	div#mobile_map_pad a.pad-w::before { border-right: 13px solid #71a832; border-left-width: 0; }

	div#mobile_map_pad a.pad-home::before {
		background: #71d000;
		border: 2px solid #4f8a17;
		border-radius: 50%;
		box-sizing: border-box;
		height: 14px;
		width: 14px;
	}

	/* Coordinates form */
	div#content.map div#map div#map_coords {
		bottom: auto;
		flex: 1 1 160px;
		height: auto;
		left: auto;
		line-height: 1.3;
		position: relative;
		width: auto;
	}

	div#content.map div#map div#map_coords form {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 6px 8px;
	}

	div#content.map div#map div#map_coords form br {
		display: none;
	}

	div#content.map div#map div#map_coords span,
	div#content.map div#map div#map_coords input {
		float: none;
		margin: 0;
	}

	div#content.map div#map div#map_coords span {
		font-weight: bold;
	}

	div#content.map div#map div#map_coords input.text {
		border: 1px solid #a5a5a5;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 16px;
		height: 44px;
		padding: 0 6px;
		text-align: center;
		width: 64px;
	}

	/* 44px tap area; the 20px gpack sprite slice stays clipped to the content box. */
	div#content.map div#map div#map_coords input#btn_ok {
		background-clip: content-box;
		background-origin: content-box;
		box-sizing: border-box;
		font-size: 16px;
		height: 44px;
		padding: 12px 8px;
		width: 63px;
	}

	div#content.map div#map div#map_coords a {
		align-items: center;
		display: flex;
		flex-basis: 100%;
		gap: 6px;
		min-height: 44px;
	}

	/* Tile info (filled by hover on desktop, by the first tap on phones) */
	div#content.map div#map table#map_infobox {
		box-sizing: border-box;
		flex: 1 1 100%;
		margin: 0;
		max-width: 554px;
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
	}

	div#content.map div#map table#map_infobox th,
	div#content.map div#map table#map_infobox td {
		font-size: 13px;
		padding: 6px 8px;
	}

	div#content.map div#map table#map_infobox tbody th {
		width: 38%;
	}

	div#content.map div#map table#map_infobox tr.mobile-map-tile-link.is-active {
		display: table-row;
	}

	div#content.map div#map table#map_infobox tr.mobile-map-tile-link td {
		padding: 6px;
	}

	div#content.map div#map table#map_infobox a#map_infobox_link {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		font-weight: bold;
		min-height: 44px;
		padding: 8px 12px;
	}

	/* Tablet and landscape phones: controls sit beside the map. */
	@media (min-width: 640px) {
		div#content.map div#map {
			display: grid;
			grid-template-columns: minmax(0, 554px) minmax(170px, 1fr);
			grid-template-rows: auto auto 1fr;
		}

		div#content.map div.mobile-map-viewport {
			grid-column: 1;
			grid-row: 1 / span 3;
			height: min(352px, calc(100vh - 120px));
			min-height: 220px;
		}

		div#content.map div#mobile_map_pad[hidden] {
			grid-column: 2;
			grid-row: 1;
		}

		div#content.map div#map div#map_coords {
			grid-column: 2;
			grid-row: 2;
		}

		div#content.map div#map table#map_infobox {
			grid-column: 2;
			grid-row: 3;
		}
	}

	/* Tile detail (Templates/Map/vilview.tpl) --------------------------- */

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

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

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

	div#content.map table#options {
		box-sizing: border-box;
		clear: both;
		margin: 12px 0 0;
		width: 100%;
	}

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

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

	div#content.map table#options tbody td {
		box-sizing: border-box;
		padding: 0;
	}

	/* Each option is one 48px row: a link, or greyed text when unavailable. */
	div#content.map table#options tbody td > a,
	div#content.map table#options tbody td.none:not(:has(> a)) {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		line-height: 1.3;
		margin: 4px 0;
		min-height: 48px;
		padding: 12px;
	}

	div#content.map table#options tbody td > a {
		font-weight: bold;
		text-decoration: none;
	}

	div#content.map table#options tbody td.none:not(:has(> a)) {
		color: #777;
	}

	div#content.map table#options tbody td.none:has(> a) {
		background: none;
		border: 0;
		margin: 0;
		min-height: 0;
		padding: 0;
	}

	div#content.map table#options tbody td.none > span {
		display: block;
		padding: 4px 0;
	}

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

	/* Oasis farm list form (Templates/Map/oasis_farmlist.tpl) */
	div#content.map table#oasisFarm {
		box-sizing: border-box;
		margin: 12px 0 0;
		max-width: 100%;
		width: 100%;
	}

	div#content.map table#oasisFarm p > a {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		font-weight: bold;
		min-height: 44px;
		padding: 8px 12px;
	}

	div#content.map table#oasisFarm label {
		display: block;
		font-weight: bold;
		margin-bottom: 4px;
	}

	div#content.map table#oasisFarm select,
	div#content.map table#oasisFarm input#farmName {
		box-sizing: border-box;
		font-size: 16px;
		max-width: 100%;
		min-height: 44px;
		width: 100%;
	}

	div#content.map table#oasisFarm input.text {
		font-size: 16px;
		min-height: 36px;
		width: 52px;
	}

	div#content.map table#oasisFarm button.trav_buttons {
		min-height: 44px;
		min-width: 120px;
	}

	/* Attack-time calculator (Svelte overlay) --------------------------- */
	/* Collapsed toggle in the page flow after the footer: never over the map pad or a submit button. */
	body div.attack-time,
	body .attack-time[class] {
		box-sizing: border-box;
		left: auto !important;
		margin: 12px auto calc(12px + env(safe-area-inset-bottom));
		max-width: calc(100vw - 16px);
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: min(100%, 320px) !important;
		z-index: 1;
	}

	body .attack-time[class] .toggle[class] {
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #a5a5a5;
		border-radius: 4px;
		font: bold 13px Verdana, Arial, sans-serif;
		min-height: 44px;
		padding: 10px 14px;
		width: 100%;
	}

	body .attack-time[class] .panel[class] {
		max-height: none;
	}

	body .attack-time[class] .panel button,
	body .attack-time[class] .header-actions button {
		min-height: 36px;
	}

	body .attack-time[class] .field input {
		font-size: 16px;
	}

	/* Attack alerts: toasts sit at the bottom, clear of the header controls and notches. */
	body .rvian-attacks[class],
	body div#attack-notifications-wrapper {
		bottom: calc(10px + env(safe-area-inset-bottom)) !important;
		left: calc(8px + env(safe-area-inset-left)) !important;
		right: calc(8px + env(safe-area-inset-right)) !important;
		top: auto !important;
		align-items: stretch;
	}

	/* Keep the chat dock's "Chat" tab (comms.css) tappable under the toasts. */
	body:has(#chat-dock) .rvian-attacks[class],
	body:has(#chat-dock) div#attack-notifications-wrapper {
		bottom: calc(60px + env(safe-area-inset-bottom)) !important;
	}

	body .rvian-attacks[class] .toast[class],
	body div#attack-notifications-wrapper > div {
		box-sizing: border-box;
		max-width: none !important;
		min-width: 0 !important;
		width: 100%;
	}

	body .rvian-attacks[class] .close[class],
	body div#attack-notifications-wrapper button {
		height: 44px !important;
		right: 0 !important;
		top: 0 !important;
		width: 44px !important;
	}

	body .rvian-attacks[class] .head[class] {
		padding-right: 48px;
		min-height: 36px;
	}

	/* Combat simulator (warsim.php) ------------------------------------- */

	div#content.warsim {
		box-sizing: border-box;
		max-width: 100%;
	}

	div#content.warsim table#attacker,
	div#content.warsim table#defender {
		box-sizing: border-box;
		float: none;
		margin: 0 0 12px;
		width: 100%;
	}

	div#content.warsim table.fill_in td,
	div#content.warsim table.fill_in th {
		padding: 4px;
	}

	div#content.warsim table.fill_in input.text,
	div#content.warsim table.fill_in input[type="text"] {
		box-sizing: border-box;
		font-size: 16px;
		min-height: 36px;
		max-width: 100%;
		width: 64px;
	}

	div#content.warsim table#select {
		box-sizing: border-box;
		width: 100%;
	}

	div#content.warsim table#select tbody td {
		vertical-align: top;
	}

	div#content.warsim table#select label {
		align-items: center;
		display: flex;
		gap: 6px;
		min-height: 44px;
	}

	div#content.warsim table#select br {
		display: none;
	}

	div#content.warsim table#select input.radio,
	div#content.warsim table#select input.check {
		font-size: 16px;
		height: 20px;
		margin: 0;
		width: 20px;
	}

	div#content.warsim p.btn button {
		min-height: 44px;
		min-width: 120px;
	}

	/* Two input columns become one on narrow phones. */
	@media (max-width: 479px) {
		div#content.warsim table#select thead {
			display: none;
		}

		div#content.warsim table#select,
		div#content.warsim table#select tbody,
		div#content.warsim table#select tr,
		div#content.warsim table#select tbody td {
			box-sizing: border-box;
			display: block;
			width: 100%;
		}

		div#content.warsim table#select tbody td {
			border-bottom: 1px solid #c0c0c0;
			display: grid;
			gap: 0 8px;
			grid-template-columns: 1fr 1fr;
			padding: 6px 8px;
		}

		div#content.warsim table#select tbody td::before {
			color: #333;
			font-weight: bold;
			grid-column: 1 / -1;
			padding: 4px 0;
		}

		div#content.warsim table#select tbody td:nth-child(1)::before { content: "Attacker"; }
		div#content.warsim table#select tbody td:nth-child(2)::before { content: "Defender"; }
		div#content.warsim table#select tbody td:nth-child(3)::before { content: "Type of attack"; }
	}

	/* Crop finder (crop_finder.php) ------------------------------------- */

	div#content div.cropfinder-pics img {
		height: auto;
		max-width: 46%;
	}

	div#content table.cropfinder-form {
		box-sizing: border-box;
		width: 100%;
	}

	div#content table.cropfinder-form,
	div#content table.cropfinder-form tbody,
	div#content table.cropfinder-form tr,
	div#content table.cropfinder-form td {
		display: block;
		width: auto;
	}

	div#content table.cropfinder-form td {
		padding: 4px 0;
	}

	div#content table.cropfinder-form td:first-child {
		font-weight: bold;
		padding-top: 10px;
	}

	div#content table.cropfinder-form label {
		align-items: center;
		display: inline-flex;
		gap: 6px;
		min-height: 44px;
		margin-right: 12px;
	}

	div#content table.cropfinder-form input.radio {
		font-size: 16px;
		height: 20px;
		margin: 0;
		width: 20px;
	}

	div#content table.cropfinder-form select,
	div#content table.cropfinder-form input[type="text"] {
		box-sizing: border-box;
		font-size: 16px;
		min-height: 44px;
	}

	div#content table.cropfinder-form input[type="text"] {
		width: 72px;
	}

	div#content table.cropfinder-form button.trav_buttons {
		min-height: 44px;
		min-width: 120px;
	}

	/* Travian Plus / gold shop (Templates/Plus/*) ----------------------- */

	div#content.plus div#textmenu {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		font-size: 0;
		margin: 8px 0 14px;
	}

	div#content.plus div#textmenu a {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-flex;
		font-size: 14px;
		justify-content: center;
		min-height: 44px;
		padding: 8px 16px;
	}

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

	/* Every feature row becomes a card: description on top, duration and cost, then the button. */
	div#content.plus table.plusFunctions {
		background: transparent;
		border: 0;
		box-sizing: border-box;
		display: block;
		margin: 0 0 16px;
		width: 100%;
	}

	div#content.plus table.plusFunctions thead,
	div#content.plus table.plusFunctions tbody {
		display: block;
	}

	div#content.plus table.plusFunctions thead tr:not(:first-child) {
		display: none;
	}

	div#content.plus table.plusFunctions thead tr:first-child,
	div#content.plus table.plusFunctions thead th {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	div#content.plus table.plusFunctions thead th {
		font-size: 15px;
		padding: 8px 10px;
	}

	div#content.plus table.plusFunctions tbody tr {
		display: none;
	}

	div#content.plus table.plusFunctions tbody tr:has(> td.cost) {
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
		box-sizing: border-box;
		display: grid;
		gap: 4px 10px;
		grid-template-areas:
			"desc desc man"
			"dur  cost cost"
			"act  act  act";
		grid-template-columns: auto 1fr 44px;
		margin: 8px 0 0;
		padding: 10px;
	}

	div#content.plus table.plusFunctions tbody td {
		background: transparent;
		border: 0;
		padding: 0;
		text-align: left;
		width: auto;
	}

	div#content.plus table.plusFunctions td.desc { grid-area: desc; font-size: 13px; }
	div#content.plus table.plusFunctions td.dur { grid-area: dur; color: #555; }
	div#content.plus table.plusFunctions td.cost { grid-area: cost; font-weight: bold; text-align: right; }
	div#content.plus table.plusFunctions tr > td:last-child { grid-area: act; }

	div#content.plus table.plusFunctions td.man {
		grid-area: man;
	}

	div#content.plus table.plusFunctions td.man a {
		align-items: center;
		display: flex;
		height: 44px;
		justify-content: center;
		width: 44px;
	}

	div#content.plus table.plusFunctions tr > td:last-child a,
	div#content.plus table.plusFunctions tr > td:last-child span.none {
		align-items: center;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		justify-content: center;
		min-height: 44px;
		padding: 8px 12px;
		width: 100%;
	}

	div#content.plus table.plusFunctions tr > td:last-child a {
		background: linear-gradient(#fff, #e0f2cc);
		border: 1px solid #71a832;
		font-weight: bold;
		text-decoration: none;
	}

	div#content.plus table.plusFunctions tr > td:last-child a:active,
	div#content.plus table.plusFunctions tr > td:last-child a:focus {
		background: #d5efbd;
		outline: none;
	}

	div#content.plus table.plusFunctions tr > td:last-child span.none {
		background: #f3f3f3;
		border: 1px solid #d0d0d0;
		color: #777;
	}

	/* Available features: the link inside span.none is the button. */
	div#content.plus table.plusFunctions tr > td:last-child span.none:has(a) {
		background: none;
		border: 0;
		display: block;
		min-height: 0;
		padding: 0;
	}

	div#content.plus table:not(.plusFunctions) {
		box-sizing: border-box;
		max-width: 100%;
	}

	div#content.plus img {
		height: auto;
		max-width: 100%;
	}

	/* In-game manual popup (unx.js Popup(): #ce > div.popup3 > iframe) -- */

	div#ce:has(> div.popup3:not(.quest) iframe#Frame),
	div#ce:has(> #manual_over) {
		z-index: 4000;
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame) {
		background: #fff;
		bottom: 0;
		box-sizing: border-box;
		display: block;
		height: auto;
		left: 0;
		margin: 0;
		padding: calc(52px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
		position: fixed;
		right: 0;
		top: 0;
		width: auto;
		z-index: 4000;
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame)::before {
		background: linear-gradient(#fff, #e6e6e6);
		border-bottom: 1px solid #b4b4b4;
		box-sizing: border-box;
		color: #333;
		content: "Manual";
		font: bold 16px/52px Verdana, Tahoma, Arial, sans-serif;
		height: calc(52px + env(safe-area-inset-top));
		left: 0;
		padding: env(safe-area-inset-top) 64px 0 calc(12px + env(safe-area-inset-left));
		position: absolute;
		right: 0;
		top: 0;
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame) > div#drag {
		display: none;
	}

	/* An iframe does not stretch between top/bottom, so size it from the fixed box. */
	div#ce div.popup3:not(.quest):has(iframe#Frame) iframe#Frame {
		border: 0;
		display: block;
		height: calc(100% - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		left: env(safe-area-inset-left);
		position: absolute;
		top: calc(52px + env(safe-area-inset-top)) !important;
		width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame) > a {
		align-items: center;
		background: linear-gradient(#fff, #e3e3e3);
		border: 1px solid #a5a5a5;
		border-radius: 4px;
		box-sizing: border-box;
		color: #333;
		display: flex;
		height: 44px;
		justify-content: center;
		position: absolute;
		right: calc(4px + env(safe-area-inset-right));
		top: calc(4px + env(safe-area-inset-top));
		text-decoration: none;
		width: 44px;
		z-index: 2;
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame) > a::before {
		content: "\00d7";
		font: bold 26px/1 Verdana, Arial, sans-serif;
	}

	div#ce div.popup3:not(.quest):has(iframe#Frame) > a img.popup4 {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
}