/*
 * The Kingdoms of Chaos: the new look ("fantasy", see includes/theme.php).
 * Every rule is under body.ui-fantasy, so without that class (UI_THEME=classic
 * or a player who chose "Old look") the game looks exactly as before.
 * Same spirit as the old design: the stone background, the black hall,
 * gold, the old pictures; with bigger, readable text and room on phones.
 */

body.ui-fantasy {
	--tk-gold: #d9b55a;
	--tk-gold-light: #f3dc9a;
	--tk-gold-dark: #7a6331;
	--tk-ink: #efe3c4;
	--tk-muted: #c2b186;
	--tk-hall: #0d0a07;
	--tk-panel: #17110b;
	--tk-panel-2: #1f160d;
	--tk-line: #4a3b1e;
	--tk-good: #a9d88a;
	--tk-bad: #f29b7f;
	--tk-title: 'Cinzel', 'Trajan Pro', Georgia, serif;
	--tk-text: 'Crimson Pro', Georgia, 'Times New Roman', serif;

	font-family: var(--tk-text);
	font-size: 17px;
	color: var(--tk-ink);
	background: #1e1913 url(../images/background.jpg) repeat-x;
}

/* ---- the hall ---------------------------------------------------------- */

.ui-fantasy .page-container {
	width: auto;
	max-width: 980px;
	margin: 18px auto;
	background: linear-gradient(180deg, #120d08 0%, var(--tk-hall) 240px);
	border: 1px solid var(--tk-gold-dark);
	border-radius: 4px;
	box-shadow: 0 0 0 4px var(--tk-hall), 0 0 0 5px #3a2e17, 0 12px 40px rgba(0, 0, 0, 0.75);
}

.ui-fantasy .content {
	width: auto;
	margin: 26px 34px 34px 34px;
	color: var(--tk-ink);
	font-family: var(--tk-text);
	font-size: 17px;
	line-height: 1.55;
	text-align: left;
}

.ui-fantasy .content p {
	font-size: 17px;
	text-align: left;
}

.ui-fantasy td,
.ui-fantasy .bread,
.ui-fantasy .content font {
	font-family: var(--tk-text);
}

.ui-fantasy td,
.ui-fantasy .bread {
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .content a {
	color: var(--tk-gold-light);
	text-decoration-color: rgba(243, 220, 154, 0.45);
	text-underline-offset: 2px;
}

.ui-fantasy .content a:hover {
	color: #fff2c6;
}

.ui-fantasy h1,
.ui-fantasy h2,
.ui-fantasy h3,
.ui-fantasy h4 {
	font-family: var(--tk-title);
	font-weight: 700;
	color: var(--tk-gold);
	letter-spacing: 0.5px;
	line-height: 1.25;
}

.ui-fantasy .content h1 { font-size: 28px; }
.ui-fantasy .content h2 { font-size: 22px; }

.ui-fantasy hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tk-gold-dark), transparent);
}

/* ---- header: picture of the page, resources, time ------------------------ */

.ui-fantasy .game-header {
	height: auto;
	margin: 0;
	padding: 16px 22px 12px 22px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ui-fantasy .cornerpic {
	float: none;
	flex: 0 0 150px;
	width: 150px;
	height: 138px;
	border: 1px solid var(--tk-gold-dark);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 0 3px var(--tk-hall), 0 0 0 4px #3a2e17;
}

.ui-fantasy .cornerpic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ui-fantasy .header-data {
	float: none;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-width: 0;
}

.ui-fantasy .province-info-header {
	height: auto;
	margin: 0 0 10px 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.ui-fantasy .province-info-header > div {
	float: none;
	width: auto !important;
	height: 66px;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--tk-gold-dark);
	border-radius: 6px;
	background-size: cover;
	background-position: center;
}

/* the old status bar pictures stay, darkened so the numbers can be read */
.ui-fantasy .province-info-header > div::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 7, 4, 0.25), rgba(10, 7, 4, 0.88));
}

.ui-fantasy .province-info-header .text {
	position: relative;
	margin: 0;
	padding: 9px 4px 0 4px;
	font-family: var(--tk-title);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tk-gold);
	line-height: 1.25;
	white-space: nowrap;
}

.ui-fantasy .province-info-header .text span {
	font-family: var(--tk-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tk-ink);
	font-variant-numeric: tabular-nums;
}

.ui-fantasy .time-tick {
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 16px;
	font-size: 15px;
	color: var(--tk-muted);
}

.ui-fantasy .left-time,
.ui-fantasy .right-tick {
	float: none;
}

.ui-fantasy #next-tick {
	color: var(--tk-ink);
	font-variant-numeric: tabular-nums;
}

.ui-fantasy .protection-left {
	flex-basis: 100%;
	font-size: 14px;
}

/* ---- the menu ---------------------------------------------------------- */

.ui-fantasy .game-buttons {
	position: relative;
	left: 0;
	width: auto;
	margin: 0;
	z-index: 20;
	font-size: 15px;
	text-align: center;
	background: linear-gradient(180deg, #21170d, #0f0b07);
	border-top: 1px solid var(--tk-gold-dark);
	border-bottom: 1px solid var(--tk-gold-dark);
	box-shadow: 0 1px 0 #000, 0 -1px 0 #000;
}

.ui-fantasy .game-buttons ul {
	position: static;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.ui-fantasy .game-buttons li {
	float: none;
	position: relative;
}

.ui-fantasy .game-buttons-link {
	float: none;
	display: block;
	margin: 0;
	padding: 11px 18px;
	font-family: var(--tk-title);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--tk-gold);
}

.ui-fantasy .game-buttons li:hover > .game-buttons-link,
.ui-fantasy .game-buttons li.open > .game-buttons-link {
	color: var(--tk-gold-light);
	background: rgba(217, 181, 90, 0.1);
}

.ui-fantasy .tk-icon,
.ui-fantasy .tk-short {
	display: none;
}

.ui-fantasy .game-buttons .absolute {
	left: 0;
	top: 100%;
	width: 210px;
	padding: 6px 0;
	font-size: 16px;
	text-align: left;
	background: #120d08;
	border: 1px solid var(--tk-gold-dark);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

.ui-fantasy .ddmenu-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	height: auto;
	margin: 0;
	padding: 0 14px;
	background: transparent;
	border: 0;
}

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

.ui-fantasy .ddmenu-line-link a {
	display: block;
	padding: 6px 0;
	color: var(--tk-ink);
	font-family: var(--tk-text);
}

.ui-fantasy .ddmenu-line-link a:hover {
	color: var(--tk-gold-light);
	text-decoration: none;
}

.ui-fantasy .ddmenu-line-shortcut {
	float: none;
	width: auto;
	margin: 0;
	font-size: 11px;
	color: var(--tk-muted);
}

/* preferences: sub menu, a row of tabs */
.ui-fantasy .game-sub-buttons {
	float: none;
	left: 0;
	margin: 0 0 16px 0;
	text-align: center;
}

.ui-fantasy .game-sub-buttons ul {
	left: 0;
	height: auto;
	margin: 0;
	padding: 0 0 6px 0;
	border-bottom: 1px solid var(--tk-line);
}

.ui-fantasy .game-sub-buttons li {
	float: none;
	display: inline-block;
}

.ui-fantasy .game-sub-buttons a {
	float: none;
	font-family: var(--tk-title);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--tk-gold);
	text-decoration: none;
}

/* ---- tables -------------------------------------------------------------- */

/* the old tables draw their lines with cellspacing over a light background */
.ui-fantasy .buildingsTable {
	background-color: var(--tk-line);
	font-family: var(--tk-text);
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .buildings {
	background-color: var(--tk-panel);
	font-family: var(--tk-text);
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .rep1 {
	background-color: #22150c;
	font-family: var(--tk-text);
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .rep2 {
	background-color: #1b170c;
	font-family: var(--tk-text);
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .rep1,
.ui-fantasy .rep2,
.ui-fantasy .buildings {
	padding: 4px 8px;
}

.ui-fantasy .rep3,
.ui-fantasy .rep4,
.ui-fantasy tr.subtitle td {
	background: linear-gradient(180deg, #2c1f10, #1a1209);
	font-family: var(--tk-title);
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--tk-gold);
	padding: 6px;
}

/* old tables with a light border="1" */
.ui-fantasy .content table[border="1"] {
	border-color: var(--tk-gold-dark);
	border-collapse: collapse;
}

.ui-fantasy .content table[border="1"] td {
	border: 1px solid var(--tk-line);
}

/* ---- the forums: parchment (light) cells keep dark ink ------------------- */

.ui-fantasy td[bgcolor="#DAD3B7" i],
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td,
.ui-fantasy td[bgcolor="#DDDDDD" i],
.ui-fantasy tr[bgcolor="#DDDDDD" i] > td {
	color: #2a1d0f;
	background-color: #e3dabd;
}

.ui-fantasy td[bgcolor="#DAD3B7" i] a,
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td a,
.ui-fantasy td[bgcolor="#DDDDDD" i] a,
.ui-fantasy tr[bgcolor="#DDDDDD" i] > td a {
	color: #6b2a12;
}

/* links on parchment, also when the mouse is over them */
.ui-fantasy .content td[bgcolor="#DAD3B7" i] a:hover,
.ui-fantasy .content tr[bgcolor="#DAD3B7" i] > td a:hover,
.ui-fantasy .content td[bgcolor="#DDDDDD" i] a:hover,
.ui-fantasy .content tr[bgcolor="#DDDDDD" i] > td a:hover {
	color: #9a3412;
	text-decoration: underline;
}

/* (the pages are in quirks mode: tables inside do not inherit the colour) */
.ui-fantasy td[bgcolor="#DAD3B7" i] font,
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td font,
.ui-fantasy td[bgcolor="#DAD3B7" i] table,
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td table,
.ui-fantasy td[bgcolor="#DAD3B7" i] td,
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td td,
.ui-fantasy td[bgcolor="#DDDDDD" i] td {
	color: #2a1d0f;
	background-color: transparent;
}

.ui-fantasy td[bgcolor="#DAD3B7" i] textarea,
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td textarea,
.ui-fantasy td[bgcolor="#DAD3B7" i] input[type=text],
.ui-fantasy tr[bgcolor="#DAD3B7" i] > td input[type=text] {
	color: #2a1d0f;
	background-color: #f6f0dc;
	border-color: #a08a55;
}

/* ---- forms and buttons --------------------------------------------------- */

.ui-fantasy input[type=submit],
.ui-fantasy input[type=button],
.ui-fantasy input[type=reset],
.ui-fantasy button {
	font-family: var(--tk-title);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: #1b130a;
	background: linear-gradient(180deg, #f0d27c, #b8902f);
	border: 1px solid #6e5520;
	border-radius: 6px;
	padding: 6px 14px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.ui-fantasy input[type=submit]:hover,
.ui-fantasy input[type=button]:hover,
.ui-fantasy button:hover {
	background: linear-gradient(180deg, #f7e09a, #c9a03c);
}

.ui-fantasy input[type=text],
.ui-fantasy input[type=password],
.ui-fantasy input[type=number],
.ui-fantasy input[type=textfield],
.ui-fantasy input:not([type]),
.ui-fantasy select,
.ui-fantasy textarea {
	font-family: var(--tk-text);
	font-size: 16px;
	font-weight: 400;
	color: var(--tk-ink);
	background-color: #0b0805;
	border: 1px solid var(--tk-gold-dark);
	border-radius: 5px;
	padding: 4px 8px;
}

.ui-fantasy input:focus,
.ui-fantasy select:focus,
.ui-fantasy textarea:focus {
	outline: 2px solid rgba(217, 181, 90, 0.5);
	outline-offset: 1px;
}

/* ---- the council's tips and missions (css/onboarding.css) --------------- */

.ui-fantasy .onboarding-tip,
.ui-fantasy .onboarding-missions,
.ui-fantasy .advisor-box {
	max-width: 720px;
	background: linear-gradient(180deg, var(--tk-panel-2), var(--tk-panel));
	border-color: var(--tk-gold-dark);
	font-size: 16px;
	color: var(--tk-ink);
}

.ui-fantasy .onboarding-tip {
	font-size: 16px;
}

.ui-fantasy .onboarding-title {
	font-family: var(--tk-title);
	font-size: 17px;
	color: var(--tk-gold);
}

.ui-fantasy .onboarding-intro,
.ui-fantasy .onboarding-mission,
.ui-fantasy .advisor-box li,
.ui-fantasy .advisor-none {
	font-size: 16px;
}

.ui-fantasy .onboarding-reward,
.ui-fantasy .onboarding-later,
.ui-fantasy .onboarding-count,
.ui-fantasy .content .onboarding-tip-actions a {
	font-size: 14px;
}

.ui-fantasy .content a.onboarding-claim {
	font-family: var(--tk-title);
	font-weight: 700;
	font-size: 13px;
	color: #1b130a;
	background: linear-gradient(180deg, #f0d27c, #b8902f);
	border-color: #6e5520;
}

/* preferences: the look of the game */
.ui-fantasy .theme-choice {
	border: 1px solid var(--tk-gold-dark);
	border-radius: 8px;
	padding: 10px 14px;
	background: var(--tk-panel);
}

/* ---- public pages (index, login, register: headernew.php) ---------------- */

.ui-fantasy .logo {
	width: auto;
	height: auto;
	text-align: center;
	margin: 10px auto 0 auto;
}

.ui-fantasy .logo img {
	max-width: 100%;
	height: auto;
}

.ui-fantasy .buttons {
	float: none;
	left: 0;
	margin: 6px 0 0 0;
	background: linear-gradient(180deg, #21170d, #0f0b07);
	border-top: 1px solid var(--tk-gold-dark);
	border-bottom: 1px solid var(--tk-gold-dark);
}

.ui-fantasy .buttons ul {
	position: static;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.ui-fantasy .buttons li {
	float: none;
}

.ui-fantasy .buttons a {
	float: none;
	display: block;
	margin: 0;
	padding: 11px 14px;
	font-family: var(--tk-title);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--tk-gold);
	text-decoration: none;
}

.ui-fantasy .buttons a:hover {
	color: var(--tk-gold-light);
	background: rgba(217, 181, 90, 0.1);
}

/* buildings on a wide screen: two buildings a row fit in the page (the
   tables say nowrap: smaller boxes and padding), and when the page is too
   narrow for two the row breaks into one under the other */
@media (min-width: 821px) {
	.ui-fantasy form[name=Build] > table[cols='3'],
	.ui-fantasy form[name=Build] > table[cols='3'] > tbody {
		display: block;
	}

	.ui-fantasy form[name=Build] > table[cols='3'] > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 10px;
	}

	.ui-fantasy form[name=Build] > table[cols='3'] > tbody > tr > td:nth-child(2):not(:last-child) {
		display: none;
	}

	.ui-fantasy form[name=Build] table.buildingsTable td {
		padding: 3px 6px;
		font-size: 15px;
	}

	.ui-fantasy form[name=Build] table.buildingsTable input[type=text] {
		width: 5.4em;
		padding: 3px 5px;
		font-size: 14px;
		text-align: right;
	}

	.ui-fantasy form[name=Build] table.buildingsTable input[data-gold] {
		width: 3.5em;
	}
}

/* ======================================================================== */
/* phones and small tablets                                                  */
/* ======================================================================== */

@media (max-width: 820px) {
	body.ui-fantasy {
		font-size: 16px;
		/* room for the menu bar at the bottom */
		padding-bottom: calc(66px + env(safe-area-inset-bottom));
	}

	.ui-fantasy .page-container {
		margin: 0;
		border-width: 0 0 1px 0;
		border-radius: 0;
		box-shadow: none;
	}

	.ui-fantasy .content {
		margin: 16px 12px 24px 12px;
		font-size: 16px;
	}

	.ui-fantasy .content p {
		font-size: 16px;
	}

	.ui-fantasy .content h1 { font-size: 23px; }
	.ui-fantasy .content h2 { font-size: 19px; }

	/* header */
	.ui-fantasy .game-header {
		padding: 10px 10px 8px 10px;
		margin: 0;
	}

	.ui-fantasy .cornerpic {
		display: none;
	}

	/* three chips, then two wider ones */
	.ui-fantasy .province-info-header {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 6px;
		margin: 0 0 8px 0;
	}

	.ui-fantasy .province-info-header > div {
		grid-column: span 2;
	}

	.ui-fantasy .province-info-header > .metal,
	.ui-fantasy .province-info-header > .gold {
		grid-column: span 3;
	}

	.ui-fantasy .province-info-header > div {
		height: 54px;
	}

	.ui-fantasy .province-info-header .text {
		padding-top: 7px;
		font-size: 10px;
	}

	.ui-fantasy .province-info-header .text span {
		font-size: 16px;
	}

	.ui-fantasy .time-tick {
		justify-content: center;
		text-align: center;
		font-size: 14px;
	}

	.ui-fantasy .left-time,
	.ui-fantasy .right-tick {
		display: inline;
	}

	.ui-fantasy .protection-left {
		text-align: center;
	}

	/* the menu: a bar at the bottom of the screen */
	.ui-fantasy .game-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		z-index: 50;
		padding-bottom: env(safe-area-inset-bottom);
		border-bottom: 0;
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.6);
	}

	.ui-fantasy .game-buttons ul {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		padding: 0;
	}

	.ui-fantasy .game-buttons li {
		position: static;
	}

	.ui-fantasy .game-buttons-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 58px;
		margin: 0;
		padding: 4px 2px;
		font-size: 11px;
		letter-spacing: 0.5px;
		text-transform: none;
	}

	.ui-fantasy .tk-icon {
		display: block;
		width: 22px;
		height: 22px;
	}

	.ui-fantasy .tk-long {
		display: none;
	}

	.ui-fantasy .tk-short {
		display: inline;
	}

	/* a menu opens as a panel above the bar */
	.ui-fantasy .game-buttons .absolute {
		position: fixed;
		left: 8px;
		right: 8px;
		top: auto;
		bottom: calc(66px + env(safe-area-inset-bottom));
		width: auto;
		margin: 0;
		padding: 6px;
		max-height: 60vh;
		overflow-y: auto;
		border: 1px solid var(--tk-gold-dark);
		border-radius: 12px;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
	}

	.ui-fantasy .game-buttons li:hover > .absolute {
		display: none;
	}

	.ui-fantasy .game-buttons li.open > .absolute {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px;
	}

	.ui-fantasy .ddmenu-line {
		padding: 0;
		border: 0;
	}

	.ui-fantasy .ddmenu-line-link {
		width: 100%;
	}

	.ui-fantasy .ddmenu-line-link a {
		padding: 12px 10px;
		border-radius: 8px;
		font-size: 16px;
	}

	.ui-fantasy .ddmenu-line-link a:active {
		background: rgba(217, 181, 90, 0.15);
	}

	/* tables -> cards (javascript/theme.js) */
	.ui-fantasy .content table.tk-stack,
	.ui-fantasy .content table.tk-stack > tbody,
	.ui-fantasy .content table.tk-stack > tbody > tr,
	.ui-fantasy .content table.tk-stack > tbody > tr > td,
	.ui-fantasy .content table.tk-stack > tbody > tr > th {
		display: block;
		width: auto !important;
	}

	.ui-fantasy .content table.tk-stack {
		background: transparent;
		border: 0;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr.tk-stack-head {
		display: none;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr.tk-card {
		margin: 0 0 12px 0;
		padding: 10px 14px 12px 14px;
		background: linear-gradient(180deg, var(--tk-panel-2), var(--tk-panel));
		border: 1px solid var(--tk-gold-dark);
		border-radius: 10px;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr.tk-stack-wide {
		margin: 0 0 12px 0;
		text-align: center;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr.tk-stack-caption {
		margin: 0 0 10px 0;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr.tk-stack-caption > td {
		padding: 8px 10px;
		text-align: center;
		color: var(--tk-gold) !important;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr > td {
		padding: 3px 0;
		color: var(--tk-ink) !important;
		background: transparent !important;
		border: 0;
		text-align: left !important;
		font-size: 16px;
		overflow-wrap: normal;
		word-break: normal;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr > td a {
		color: var(--tk-gold-light) !important;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr > td.tk-card-title {
		padding: 0 0 4px 0;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--tk-line);
		font-family: var(--tk-title);
		font-weight: 700;
		font-size: 16px;
		color: var(--tk-gold);
	}

	.ui-fantasy .content table.tk-stack > tbody > tr > td[data-label]::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 42%;
		margin-right: 8px;
		vertical-align: top;
		font-size: 14px;
		color: var(--tk-muted);
	}

	.ui-fantasy .content table.tk-stack .tk-value {
		display: inline-block;
		max-width: calc(58% - 8px);
		vertical-align: top;
	}

	.ui-fantasy .content table.tk-stack > tbody > tr > td.tk-card-empty {
		display: none;
	}

	/* buttons and number fields in cards: big enough for a finger */
	.ui-fantasy .content table.tk-stack input[type=submit],
	.ui-fantasy .content table.tk-stack input[type=button] {
		width: 100%;
		min-height: 44px;
		margin-top: 6px;
		font-size: 14px;
	}

	.ui-fantasy .content table.tk-stack input[type=text],
	.ui-fantasy .content table.tk-stack input:not([type]) {
		width: 8em;
		min-height: 40px;
	}

	.ui-fantasy .content input[type=submit],
	.ui-fantasy .content input[type=button] {
		min-height: 40px;
	}

	/* buildings: one card per building */
	.ui-fantasy form[name=Build] table.buildingsTable,
	.ui-fantasy form[name=Build] table.buildingsTable > tbody {
		display: block;
	}

	.ui-fantasy form[name=Build] table.buildingsTable {
		padding: 10px 12px;
		background: linear-gradient(180deg, var(--tk-panel-2), var(--tk-panel));
		border: 1px solid var(--tk-gold-dark);
		border-radius: 10px;
	}

	.ui-fantasy form[name=Build] table.buildingsTable > tbody > tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 4px 12px;
		align-items: center;
	}

	.ui-fantasy form[name=Build] table.buildingsTable > tbody > tr + tr {
		margin-top: 6px;
	}

	.ui-fantasy form[name=Build] table.buildingsTable td {
		display: block;
		padding: 2px 0;
		background: transparent;
		font-size: 15px;
		white-space: normal;
	}

	.ui-fantasy form[name=Build] table.buildingsTable tr:first-child td:first-child a {
		font-family: var(--tk-title);
		font-weight: 700;
		font-size: 16px;
		color: var(--tk-gold);
		text-decoration: none;
	}

	.ui-fantasy form[name=Build] table.buildingsTable input {
		width: 100%;
		min-height: 40px;
		box-sizing: border-box;
	}

	/* "label | field" pairs (javascript/theme.js): one pair per line */
	.ui-fantasy .content table.tk-pairs,
	.ui-fantasy .content table.tk-pairs > tbody {
		display: block;
		border: 0;
	}

	.ui-fantasy .content table.tk-pairs > tbody > tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 9em;
		gap: 4px 10px;
		align-items: center;
		margin-bottom: 10px;
	}

	.ui-fantasy .content table.tk-pairs td {
		display: block;
		padding: 0;
		background: transparent;
		border: 0;
		font-size: 15px;
		overflow-wrap: normal;
	}

	.ui-fantasy .content table.tk-pairs input {
		width: 100%;
		box-sizing: border-box;
	}

	/* one-row forms (javascript/theme.js) */
	.ui-fantasy .content table.tk-row,
	.ui-fantasy .content table.tk-row > tbody {
		display: block;
		width: auto !important;
	}

	.ui-fantasy .content table.tk-row > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
	}

	.ui-fantasy .content table.tk-row td {
		display: block;
		padding: 0;
		overflow-wrap: normal;
		white-space: normal;
	}

	/* the news: the narrow "Date" label keeps its word on one line */
	.ui-fantasy .content td.rep4 {
		width: 1% !important;
		white-space: nowrap;
	}

	/* a row of links (javascript/theme.js) */
	.ui-fantasy .content table.tk-links,
	.ui-fantasy .content table.tk-links > tbody {
		display: block;
		width: auto !important;
	}

	.ui-fantasy .content table.tk-links > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.ui-fantasy .content table.tk-links td {
		display: block;
		width: auto !important;
		padding: 0;
	}

	.ui-fantasy .content table.tk-links td a {
		display: block;
		padding: 8px 12px;
		border: 1px solid var(--tk-gold-dark);
		border-radius: 16px;
		white-space: nowrap;
	}

	/* day by day grids scroll sideways in their own box */
	.ui-fantasy .content .tk-scroll {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ui-fantasy .content .tk-scroll > table {
		width: auto !important;
		max-width: none;
	}

	.ui-fantasy .content .tk-scroll td,
	.ui-fantasy .content .tk-scroll th {
		overflow-wrap: normal;
		white-space: nowrap;
		font-size: 14px;
		padding: 3px 6px;
	}

	/* forums: the column with the names of the writers */
	.ui-fantasy .content td.FBL,
	.ui-fantasy .content td.FL {
		min-width: 6em;
		overflow-wrap: normal;
		font-size: 14px;
	}

	/* layout rows with tables side by side (javascript/theme.js) */
	.ui-fantasy .content tr.tk-split > td {
		display: block;
		width: auto !important;
	}

	/* thievery: the picture under the text, the form one field under the other */
	.ui-fantasy .content table.thievery-page {
		background-size: 100% auto !important;
		background-position: center bottom !important;
	}

	.ui-fantasy .content table.thievery-page,
	.ui-fantasy .content table.thievery-page > tbody,
	.ui-fantasy .content table.thievery-page > tbody > tr,
	.ui-fantasy .content table.thievery-page > tbody > tr > td {
		display: block;
		width: auto !important;
	}

	.ui-fantasy .content table.thievery-page img[src*="space.gif"] {
		display: none;
	}

	.ui-fantasy .content table.thievery-page > tbody > tr > td > table[width] {
		width: auto !important;
	}

	.ui-fantasy .content table.thievery-form {
		width: 100%;
		margin: 0 auto 120px auto;
		background: rgba(14, 10, 6, 0.85);
		border: 1px solid var(--tk-gold-dark);
		border-radius: 10px;
	}

	.ui-fantasy .content table.thievery-form td {
		padding: 6px 8px;
	}

	.ui-fantasy .content table.thievery-form td:first-child {
		text-align: left;
		white-space: nowrap;
	}

	/* the column on the left of some pages (council, explore, attack):
	   above the page instead of beside it */
	.ui-fantasy .content > div[style*="float:left"][style*="128px"] {
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 0 12px 0;
		text-align: center;
	}

	.ui-fantasy .content > div[style*="float:left"][style*="128px"] img {
		max-height: 180px;
		width: auto;
	}

	/* big pictures of the pages: smaller on a phone */
	.ui-fantasy .content img[width],
	.ui-fantasy .content img {
		max-width: 100%;
		height: auto;
	}
}

/* the councilor's report on the Council page (includes/advisor.php): a frame that stands out */
.ui-fantasy .advisor-box {
	border-color: var(--tk-gold);
}