/*
 * Mobile layout for The Kingdoms of Chaos.
 * The original design is a fixed 750px page; on small screens these rules
 * let it shrink to the screen width. Desktop is not affected.
 */

/* the game menus open on tap too (see javascript/mobile-menu.js) */
.game-buttons li.open > .absolute {
	display: block;
}

/* the outcome of an attack (scripts/Attack.class.inc.php), of training
   (scripts/Military.class.inc.php) or of a spell (scripts/Magic.class.inc.php),
   at the top of the page */
.attack-result, .military-result, .magic-result {
	max-width: 640px;
	margin: 12px auto 16px auto;
	scroll-margin-top: 12px;
}

.attack-refused, .military-refused, .military-ok, .magic-refused, .magic-ok {
	border: 2px solid #b03a2e;
	border-radius: 6px;
	background-color: rgba(120, 20, 10, 0.25);
	padding: 12px 16px;
	font-weight: bold;
	text-align: center;
}

.military-ok, .magic-ok {
	border-color: #3d8b40;
	background-color: rgba(30, 110, 40, 0.22);
}

.military-ok + .military-ok, .military-ok + .military-refused,
.military-refused + .military-ok, .military-refused + .military-refused {
	margin-top: 8px;
}

@media (max-width: 820px) {
	html {
		-webkit-text-size-adjust: 100%;
	}

	.page-container {
		width: auto;
		margin: 0;
		border-width: 0;
	}

	.content {
		width: auto;
		margin: 20px 8px;
		/* wide game tables scroll sideways inside the page instead of breaking it */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		text-align: left;
	}

	.content p {
		text-align: left;
	}

	.content img,
	.logo img {
		max-width: 100%;
		height: auto;
	}

	/* the game pages are built from tables with fixed widths (600-900px):
	   make them fit the screen instead of scrolling sideways */
	.content table {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	.content td,
	.content th {
		overflow-wrap: anywhere;
	}

	/* labels ("Kingdom Name") wrap between words, not inside them */
	.content td > b {
		overflow-wrap: normal;
	}

	/* many-column tables (military, explore, buildings): a bit denser */
	.content .buildingsTable td,
	.content .buildingsTable th {
		font-size: 11px;
		padding: 2px;
	}

	.content .buildingsTable td input[type=text],
	.content .buildingsTable td input:not([type]) {
		width: 4em;
	}

	/* inputs with size="30" would keep their column wide (and squeeze the
	   label next to it): give them a small fixed width instead */
	.content td input[type=text],
	.content td input[type=password],
	.content td input:not([type]) {
		width: 7em;
		max-width: 100%;
		box-sizing: border-box;
	}

	.content td select,
	.content textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* side-by-side layouts -> one under the other:
	   buildings page (two buildings per row) and magic page (form | spell info) */
	.content form[name=Build] > table[cols='3'] > tbody > tr > td,
	.content table[cols='2'] > tbody > tr > td {
		display: block;
	}

	.content td[nowrap] {
		white-space: normal;
	}

	.content textarea {
		width: 100%;
	}

	/* public pages */
	.logo {
		width: auto;
		height: auto;
		margin: 10px 8px 0 8px;
		text-align: center;
	}

	.buttons {
		float: none;
		left: 0;
		margin: 10px 8px 0 8px;
		font-size: 16px;
	}

	.buttons ul,
	.game-buttons ul {
		left: 0;
		height: auto;
		margin: 0;
		padding: 4px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.buttons li,
	.game-buttons li {
		float: none;
	}

	.buttons a,
	.game-buttons-link {
		float: none;
		display: inline-block;
		margin: 4px 10px;
	}

	/* game header */
	.game-header {
		height: auto;
		margin: 0 8px 15px 8px;
	}

	.cornerpic {
		display: none;
	}

	.header-data {
		float: none;
		width: auto;
		height: auto;
	}

	.province-info-header {
		height: auto;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.province-info-header .networth,
	.province-info-header .peasants,
	.province-info-header .food,
	.province-info-header .metal,
	.province-info-header .gold {
		float: none;
		width: 97px;
	}

	.time-tick {
		height: auto;
		overflow: hidden;
	}

	.left-time,
	.right-tick {
		float: none;
		display: block;
		text-align: center;
	}

	.game-buttons {
		left: 0;
		width: auto;
		margin: 0 8px;
		font-size: 16px;
		z-index: 10;
	}

	/* dropdowns: a full-width list under the menu bar. The desktop rules stack
	   the lines with fixed heights and negative margins, which breaks with
	   bigger text, so the lines go back to normal flow here. */
	.game-buttons ul {
		position: relative;
	}

	.game-buttons li {
		position: static;
	}

	.game-buttons .absolute {
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		margin-top: 4px;
		z-index: 20;
		font-size: 15px;
		background-color: #17130e;
		border: 1px solid #FFFFCC;
		border-radius: 8px;
		overflow: hidden;
	}

	.game-buttons li.open > .absolute,
	.game-buttons li:hover > .absolute {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.ddmenu-line {
		margin: 0;
		height: auto;
		border-width: 0 0 1px 0;
		border-color: #4a4433;
	}

	.ddmenu-line-link {
		float: none;
		width: auto;
		margin: 0;
	}

	.ddmenu-line-link a {
		display: block;
		padding: 10px 12px;
	}

	.ddmenu-line-shortcut {
		display: none;
	}

	/* 16px stops iOS from zooming in on focus */
	input,
	select,
	textarea {
		font-size: 16px;
		max-width: 100%;
	}
}

/* the Attack page: what you send, the land and when the army is home (scripts/Attack.class.inc.php) */
.attack-summary {
	margin: 10px 0 4px 0;
	padding: 10px 14px;
	border: 1px solid #8a7a4a;
	border-radius: 6px;
	background-color: rgba(23, 19, 14, 0.85);
	text-align: left;
	line-height: 1.5;
}

.attack-summary .attack-bad {
	color: #ff8a6a;
	font-weight: bold;
}

.attack-legend {
	margin: 4px 0 0 0;
	font-size: 0.85em;
	opacity: 0.8;
	text-align: left;
}