/*
 * Travikas mobile — village.css
 * Owner: Village: dorf1 (fields), dorf2 (village centre image map), dorf3 (overview tables).
 *
 * 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.
 */

/* Touch fallback lists (field.tpl, dorf2.tpl) exist in the markup but are
   phone/tablet only. */
.mobile-village-list {
	display: none;
}

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

	/* --- Village maps: scale to the screen ------------------------------ */
	/* `zoom` scales layout and the <area> hit regions together, so the image
	   map hotspots stay on the drawn fields/buildings. Steps are sized for
	   (screen width - 16px #content padding). */

	div.village1 div#village_map {
		zoom: 1.25;
	}

	div.village2 h1 {
		left: auto;
		margin: 0 0 6px;
		position: relative;
		word-break: break-word;
	}

	div.village2 div#village_map {
		margin: 0 auto;
		touch-action: manipulation;
		zoom: 1;
	}

	/* Level toggle: below the map, with a 44px tap area around the 18x17 sprite. */
	div.village2 img#lswitch {
		background-clip: content-box;
		background-origin: content-box;
		box-sizing: content-box;
		display: block;
		left: auto;
		margin: 0 0 0 auto;
		padding: 14px 13px 13px;
		position: relative;
		top: auto;
	}

	@media (max-width: 555px) {
		div.village2 div#village_map { zoom: 0.88; }
	}

	@media (max-width: 499px) {
		div.village2 div#village_map { zoom: 0.78; }
	}

	@media (max-width: 439px) {
		div.village2 div#village_map { zoom: 0.73; }
	}

	@media (max-width: 411px) {
		div.village1 div#village_map { zoom: 1.15; }
		div.village2 div#village_map { zoom: 0.69; }
	}

	@media (max-width: 392px) {
		div.village2 div#village_map { zoom: 0.66; }
	}

	@media (max-width: 374px) {
		div.village1 div#village_map { zoom: 1.12; }
		div.village2 div#village_map { zoom: 0.63; }
	}

	@media (max-width: 359px) {
		div.village1 div#village_map { zoom: 1.08; }
		div.village2 div#village_map { zoom: 0.6; }
	}

	@media (max-width: 339px) {
		div.village1 div#village_map { zoom: 1; }
		div.village2 div#village_map { zoom: 0.56; }
	}

	/* Engines without `zoom`: the gpack falls back to transform for village1;
	   keep both maps inside the screen the same way. */
	@supports not (zoom: 1) {
		div.village1 div#village_map {
			margin-bottom: 20px;
			transform: none;
		}

		div.village2 div#village_map {
			margin-bottom: calc(448px * (min(1, (100vw - 16px) / 540px) - 1));
			transform: scale(min(1, calc((100vw - 16px) / 540px)));
			transform-origin: top left;
		}
	}

	/* --- Fallback lists: every field / building slot as a 44px row ------ */
	details.mobile-village-list {
		box-sizing: border-box;
		clear: both;
		display: block;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		margin: 8px 0 16px;
		width: 100%;
	}

	details.mobile-village-list > summary {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		color: #000;
		cursor: pointer;
		display: flex;
		font-size: 14px;
		font-weight: bold;
		list-style: none;
		min-height: 44px;
		padding: 10px 12px;
	}

	details.mobile-village-list > summary::-webkit-details-marker {
		display: none;
	}

	details.mobile-village-list > summary::after {
		color: #71a832;
		content: "\25B8";
		margin-left: auto;
	}

	details.mobile-village-list[open] > summary {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	details.mobile-village-list[open] > summary::after {
		content: "\25BE";
	}

	details.mobile-village-list table {
		background: #c0c0c0;
		border-collapse: separate;
		box-sizing: border-box;
		margin: 0;
		width: 100%;
	}

	details.mobile-village-list td {
		background: #fff;
		padding: 0;
	}

	details.mobile-village-list tr:nth-child(2n) td {
		background: #f3f3f3;
	}

	details.mobile-village-list tr.active td {
		background: #e8f5dc;
	}

	details.mobile-village-list td a {
		align-items: center;
		box-sizing: border-box;
		color: #252525;
		display: flex;
		font-size: 14px;
		gap: 8px;
		min-height: 44px;
		padding: 8px 12px;
		text-decoration: none;
	}

	details.mobile-village-list td a:hover,
	details.mobile-village-list td a:focus,
	details.mobile-village-list td a:active {
		background: #e8f5dc;
		outline: none;
	}

	details.mobile-village-list td a img {
		flex: 0 0 auto;
	}

	details.mobile-village-list .name {
		flex: 1 1 auto;
		min-width: 0;
	}

	details.mobile-village-list tr.built .name {
		font-weight: bold;
	}

	details.mobile-village-list tr.empty .name {
		color: #777;
	}

	details.mobile-village-list .name .none {
		font-weight: normal;
	}

	details.mobile-village-list .lvl {
		color: #71a832;
		flex: 0 0 auto;
		font-weight: bold;
		white-space: nowrap;
	}

	details.mobile-village-list tr.empty .lvl {
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		color: #252525;
		padding: 4px 10px;
	}

	/* --- Construction queue (dorf1 + dorf2) ----------------------------- */
	div.village1 table#building_contract,
	div.village2 table#building_contract {
		box-sizing: border-box;
		clear: both;
		margin: 12px 0;
		max-width: 100%;
		width: 100%;
	}

	table#building_contract thead th {
		font-size: 14px;
		line-height: 44px;
		padding: 0 4px 0 10px;
		position: relative;
		text-align: left;
	}

	/* Finish all orders for gold. */
	table#building_contract thead th a {
		align-items: center;
		display: inline-flex;
		float: right;
		height: 44px;
		justify-content: center;
		width: 44px;
	}

	/* Two columns: 44px cancel button | name, timer and finish time stacked. */
	table#building_contract tbody tr {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
	}

	table#building_contract tbody td {
		box-sizing: border-box;
		display: block;
		font-size: 13px;
		grid-column: 2;
		padding: 2px 8px;
		text-align: left;
	}

	table#building_contract tbody td:nth-child(2) {
		font-weight: bold;
		padding-top: 6px;
	}

	table#building_contract tbody td:last-child {
		color: #666;
		padding-bottom: 6px;
	}

	table#building_contract tbody td.ico,
	div.village2 table#building_contract tbody td.ico {
		align-items: center;
		display: flex;
		grid-column: 1;
		grid-row: 1 / span 3;
		justify-content: center;
		padding: 0;
		width: auto;
	}

	table#building_contract td.ico a {
		flex: 0 0 44px;
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		height: 44px;
		justify-content: center;
		width: 44px;
	}

	table#building_contract td.ico a:active {
		background: #e8f5dc;
		border-color: #71a832;
	}

	table#building_contract tbody td span[id^="timer"] {
		font-weight: bold;
	}

	table#building_contract label {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		min-height: 44px;
	}

	table#building_contract label input[type="checkbox"] {
		height: 24px;
		width: 24px;
	}

	/* --- Movements, troops (dorf1) ------------------------------------- */
	div.village1 table#movements,
	div.village1 table#troops {
		font-size: 13px;
	}

	div.village1 table#movements td.typ a,
	div.village1 table#troops td.ico a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	div.village1 table#movements td {
		vertical-align: middle;
	}

	div.village1 table#movements div.mov,
	div.village1 table#movements div.dur_r {
		float: none;
		text-align: left;
	}

	div.village1 table#movements div.dur_r span {
		font-weight: bold;
	}

	/* Production stays in #mobile-production (resource bar); the gpack
	   mobile block already hides div.village1 table#production. */

	/* --- dorf3 overview ------------------------------------------------- */
	div.village3 {
		box-sizing: border-box;
	}

	div.village3 div#textmenu {
		align-items: stretch;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		gap: 6px;
		margin: 6px 0 14px;
		white-space: normal;
	}

	div.village3 div#textmenu a,
	div.village3 div#textmenu span {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		color: #252525;
		display: inline-flex;
		flex: 1 1 auto;
		font-size: 13px;
		justify-content: center;
		line-height: 1.2;
		min-height: 44px;
		padding: 8px 10px;
		text-align: center;
		text-decoration: none;
	}

	div.village3 div#textmenu span {
		color: #999;
	}

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

	div.mobile-scroll-x.mobile-dorf3 {
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
		max-width: 100%;
		overflow-x: auto;
		width: 100%;
	}

	div.mobile-dorf3 > table {
		margin: 0;
		min-width: 100%;
		width: auto;
	}

	div.mobile-dorf3 > table td,
	div.mobile-dorf3 > table th {
		font-size: 12px;
		white-space: nowrap;
	}

	div.mobile-dorf3 > table thead tr:first-child th {
		text-align: left;
	}

	/* Village name column stays visible while the table scrolls. */
	div.mobile-dorf3 > table thead tr:not(:first-child) > :first-child,
	div.mobile-dorf3 > table tbody td:first-child {
		background-color: #fff;
		box-shadow: 1px 0 0 #c0c0c0;
		left: 0;
		position: sticky;
		z-index: 1;
	}

	div.mobile-dorf3 > table thead tr:not(:first-child) > :first-child {
		background-color: #f3f3f3;
	}

	div.mobile-dorf3 > table tbody tr.hl td:first-child {
		background-color: #e8f5dc;
	}

	div.mobile-dorf3 > table tbody td.vil a {
		display: inline-block;
		line-height: 32px;
		max-width: 40vw;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	/* --- Quest / tutorial dialog --------------------------------------- */
	/* unx.js renders it into div#ce as div.popup3.quest (430px + 20px). */
	div#ce div.popup3.quest {
		left: 50%;
		margin-left: -225px;
		position: fixed;
		top: max(8px, env(safe-area-inset-top));
	}

	div#ce div.popup3.quest img.popup4 {
		height: 44px;
		width: 44px;
	}

	/* Scale the 450x487 dialog to the screen (bands like the village maps). */
	@media (max-width: 465px), (max-height: 500px) {
		div#ce div.popup3.quest {
			left: 0;
			margin-left: 0;
			zoom: 0.9;
		}
	}

	@media (max-height: 500px) {
		div#ce div.popup3.quest {
			left: 8px;
			margin-left: 0;
			top: 0;
			zoom: 0.78;
		}
	}

	@media (max-width: 411px) {
		div#ce div.popup3.quest { zoom: 0.86; }
	}

	@media (max-width: 392px) {
		div#ce div.popup3.quest { zoom: 0.82; }
	}

	@media (max-width: 374px) {
		div#ce div.popup3.quest { zoom: 0.78; }
	}

	@media (max-width: 359px) {
		div#ce div.popup3.quest { zoom: 0.7; }
	}
}