/*
 * Travikas mobile — comms.css
 * Owner: Comms: messages, reports, report viewer and profile preview modals, alliance pages (chat/forum), profiles.
 *
 * 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.
 *
 * Pages: berichte.php (#content.reports), nachrichten.php (.messages),
 * spieler.php (.player), allianz.php (.alliance / .forum),
 * statistiken.php (.statistics), and the global chat dock (Templates/globalchat.tpl).
 * The report viewer / profile preview modals keep their mobile rules in
 * css/report_viewer_modal.css and css/profile_preview_modal.css (those load
 * later in <body>).
 */

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

	/* ---------------------------------------------------------------- */
	/* Shared: fluid tables, Travian tabs, sideways scrollers            */
	/* ---------------------------------------------------------------- */

	div#content.reports,
	div#content.messages,
	div#content.player,
	div#content.alliance,
	div#content.forum,
	div#content.statistics {
		box-sizing: border-box;
		max-width: 100%;
		overflow-wrap: break-word;
	}

	div#content.reports h1,
	div#content.messages h1,
	div#content.player h1,
	div#content.alliance h1,
	div#content.forum h1,
	div#content.statistics h1 {
		word-break: break-word;
	}

	div#content.reports table,
	div#content.messages table,
	div#content.player table,
	div#content.alliance table,
	div#content.forum table,
	div#content.statistics table {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Wide data tables live in .mobile-scroll-x: they keep their columns and pan sideways. */
	div#content .mobile-scroll-x {
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	div#content .mobile-scroll-x > table {
		max-width: none;
		min-width: 100%;
		width: auto;
	}

	div#content div.mobile-scroll-x > table td,
	div#content div.mobile-scroll-x > table th {
		white-space: nowrap;
	}

	/* Travian tabs (#textmenu): bordered tabs, selected one in the green highlight. */
	div#content.reports div#textmenu,
	div#content.messages div#textmenu,
	div#content.player div#textmenu,
	div#content.alliance div#textmenu,
	div#content.forum div#textmenu,
	div#content.statistics div#textmenu {
		align-items: stretch;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		gap: 6px;
		margin: 10px 0 14px;
		max-width: 100%;
		white-space: normal;
	}

	div#content.reports div#textmenu a,
	div#content.messages div#textmenu a,
	div#content.player div#textmenu a,
	div#content.alliance div#textmenu a,
	div#content.forum div#textmenu a,
	div#content.statistics div#textmenu a {
		align-items: center;
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		color: #252525;
		display: inline-flex;
		flex: 1 1 auto;
		font: bold 13px/1.2 Verdana, Tahoma, Arial, sans-serif;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
		padding: 8px 10px;
		text-align: center;
		text-decoration: none;
	}

	div#content.reports div#textmenu a.selected,
	div#content.messages div#textmenu a.selected,
	div#content.player div#textmenu a.selected,
	div#content.alliance div#textmenu a.selected,
	div#content.forum div#textmenu a.selected,
	div#content.statistics div#textmenu a.selected {
		background: #e8f5dc;
		border-color: #71a832;
		box-shadow: inset 0 -3px 0 #71d000;
		color: #3c6e00;
	}

	/* Travian gradient buttons in these pages: comfortable to tap. */
	div#content.reports button,
	div#content.messages button.trav_buttons,
	div#content.player button,
	div#content.alliance button,
	div#content.forum button,
	div#content.statistics button {
		min-height: 44px;
		min-width: 44px;
	}

	div#content.reports input,
	div#content.reports select,
	div#content.reports textarea,
	div#content.messages input,
	div#content.messages select,
	div#content.messages textarea,
	div#content.player input,
	div#content.player select,
	div#content.player textarea,
	div#content.alliance input,
	div#content.alliance select,
	div#content.alliance textarea,
	div#content.forum input,
	div#content.forum select,
	div#content.forum textarea,
	div#content.statistics input,
	div#content.statistics select,
	div#content.statistics textarea {
		box-sizing: border-box;
		font-size: 16px;
		max-width: 100%;
	}

	/* ---------------------------------------------------------------- */
	/* Reports list (berichte.php, Notice/all.tpl)                       */
	/* ---------------------------------------------------------------- */

	div#content.reports {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

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

	div#content.reports .report-filters a.report-filter-icon {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 40px;
	}

	div#content.reports .report-filters select {
		min-height: 44px;
	}

	/* One tappable row per report: icon + subject (wraps), date under it. */
	div#content.reports table#overview,
	div#content.messages table#overview {
		border-collapse: separate;
		table-layout: auto;
		width: 100% !important;
	}

	div#content.reports table#overview thead th.sent,
	div#content.messages table#overview thead th.sent,
	div#content.messages table#overview thead th:nth-child(2):not(.sent) {
		display: none;
	}

	div#content.reports table#overview thead th,
	div#content.messages table#overview thead th {
		text-align: left;
	}

	div#content.reports table#overview tbody tr,
	div#content.messages table#overview tbody tr {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
	}

	div#content.reports table#overview tbody td,
	div#content.messages table#overview tbody td {
		box-sizing: border-box;
		display: block;
		min-width: 0;
		text-align: left;
	}

	div#content.reports table#overview tbody td.none,
	div#content.messages table#overview tbody td.none {
		grid-column: 1 / -1;
		text-align: center;
	}

	div#content.reports table#overview td.sel,
	div#content.messages table#overview td.sel {
		align-items: center;
		display: flex;
		grid-column: 1;
		grid-row: 1 / span 3;
		justify-content: center;
		padding: 0;
	}

	div#content.reports table#overview td.sel input.check,
	div#content.messages table#overview td.sel input.check,
	div#content.reports table#overview tfoot input.check,
	div#content.messages table#overview tfoot input.check {
		height: 22px;
		margin: 0;
		width: 22px;
	}

	div#content.reports table#overview td.sub {
		grid-column: 2;
		padding: 0 6px;
	}

	div#content.reports table#overview td.sub > img {
		float: left;
		margin: 14px 6px 0 0;
	}

	div#content.reports table#overview td.sub > div {
		line-height: 1.35;
		min-height: 44px;
	}

	div#content.reports table#overview td.sub > div > a,
	div#content.messages table#overview td.top > a {
		display: inline-block;
		font-weight: bold;
		min-height: 44px;
		min-width: 44px;
		padding: 12px 0 4px;
	}

	div#content.reports table#overview td.dat,
	div#content.messages table#overview td.dat {
		border-top: 0;
		color: #777;
		font-size: 12px;
		grid-column: 2;
		padding: 0 6px 8px;
	}

	div#content.reports table#overview tfoot tr,
	div#content.messages table#overview tfoot tr {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

	div#content.reports table#overview tfoot th,
	div#content.messages table#overview tfoot th {
		align-items: center;
		border: 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		min-height: 52px;
		padding: 4px 6px;
	}

	div#content.reports table#overview tfoot th:first-child,
	div#content.messages table#overview tfoot th:first-child {
		flex: 0 0 44px;
		justify-content: center;
		padding: 0;
	}

	div#content.reports table#overview tfoot th.buttons,
	div#content.messages table#overview tfoot th.buttons {
		flex: 1 1 auto;
	}

	div#content.reports table#overview tfoot th.navi,
	div#content.messages table#overview tfoot th.navi {
		flex: 0 0 auto;
		font-size: 18px;
		margin-left: auto;
	}

	div#content.reports table#overview tfoot th.navi a,
	div#content.messages table#overview tfoot th.navi a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	/* delete / archive / back sprite buttons: centre them in a 44px box. */
	div#content.reports table#overview tfoot input.dynamic_img {
		box-sizing: content-box;
		padding: 10px 4px;
	}

	div#content.messages table#overview tfoot button.trav_buttons {
		padding: 0 14px;
	}

	/* ---------------------------------------------------------------- */
	/* Report view (Notice/1,3,8,10,15,22.tpl)                           */
	/* ---------------------------------------------------------------- */

	div#content.reports table#report_surround {
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.reports table#report_surround thead th:first-child,
	div#content.reports table#report_surround thead td.sent {
		width: 76px;
	}

	div#content.reports table#report_surround thead th,
	div#content.reports table#report_surround thead td {
		overflow-wrap: anywhere;
	}

	/* td.report_content.mobile-scroll-x: the unit grids pan sideways inside it. */
	div#content.reports table#report_surround td.report_content,
	#report-viewer-modal-body td.report_content {
		box-sizing: border-box;
		display: block;
		max-width: 100%;
		overflow-x: auto;
		padding: 12px 4px 0;
		-webkit-overflow-scrolling: touch;
	}

	td.report_content > table {
		width: 100% !important;
	}

	td.report_content table tbody.units td {
		min-width: 22px;
		padding: 3px 1px;
	}

	td.report_content table tbody.units td img.unit {
		display: block;
		margin: 0 auto;
	}

	/* Sticky label column (Attacker/Defender, Troops, Casualties ...). */
	td.report_content table td.role,
	td.report_content table tbody th,
	td.report_content table tbody.units tr > td:first-child {
		background-color: #f8f8f8;
		left: 0;
		position: sticky;
		z-index: 1;
	}

	td.report_content table tbody th {
		white-space: nowrap;
		width: auto;
	}

	td.report_content table tbody.goods td {
		white-space: normal;
	}

	td.report_content table tbody.goods div.res,
	td.report_content table tbody.goods div.carry {
		float: none;
		margin: 2px 0;
	}

	div#content.reports .report-warsim-action button,
	div#content.reports .report-share-fallback button {
		min-height: 44px;
	}

	div#content.reports .report-share-fallback input[type="text"] {
		width: 100% !important;
	}

	/* ---------------------------------------------------------------- */
	/* Messages (Message/*.tpl)                                          */
	/* ---------------------------------------------------------------- */

	div#content.messages {
		padding-left: 8px;
		padding-right: 8px;
	}

	div#content.messages table#overview td.top {
		grid-column: 2;
		padding: 0 6px;
	}

	div#content.messages table#overview td.send {
		border-top: 0;
		font-size: 12px;
		grid-column: 2;
		padding: 0 6px 2px;
	}

	div#content.messages table#overview td.send a {
		display: inline-block;
		padding: 4px 0;
	}

	/* The 440px letter paper becomes a plain bordered panel. */
	div.messages div.msg_head,
	div.messages div.msg_foot {
		display: none;
	}

	div.messages div.msg_content {
		background: #fff;
		border: 1px solid #c0c0c0;
		box-sizing: border-box;
		padding: 10px;
		width: 100%;
	}

	div.messages div.msg_content div.line,
	div.messages div.msg_content img#label {
		display: none;
	}

	div.messages div.msg_content div#heading {
		float: none;
		padding: 0;
	}

	div.messages div.msg_content div#heading * {
		height: auto;
	}

	div.messages #write_content div#heading input,
	div.messages #write_content textarea,
	div.messages #write_content textarea#message {
		background: #fff;
		border: 1px solid #b4b4b4;
		border-radius: 3px;
		box-sizing: border-box;
		display: block;
		font: 16px/1.4 Verdana, Tahoma, Arial, sans-serif;
		margin: 0 0 8px;
		min-height: 44px;
		padding: 8px;
		width: 100%;
	}

	div.messages #write_content textarea,
	div.messages #write_content textarea#message {
		height: 220px;
		margin-left: 0;
	}

	div.messages #write_content div#heading br {
		display: none;
	}

	div.messages #write_content a#adbook {
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		float: none;
		height: 44px;
		margin: 0 0 8px;
		position: relative;
		width: 56px;
	}

	div.messages #write_content a#adbook img {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	div.messages div#message_container {
		max-width: 100%;
	}

	div.messages div#message_toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	div.messages div#message_toolbar > a {
		align-items: center;
		background: #f7f7f7;
		border: 1px solid #ccc;
		border-radius: 3px;
		box-sizing: border-box;
		display: inline-flex;
		height: 40px;
		justify-content: center;
		width: 40px;
	}

	div.messages div#message_toolbar div.bbButton {
		float: none;
		margin: 0;
	}

	div.messages div#message_toolbarWindows {
		flex-basis: 100%;
		max-width: 100%;
	}

	div.messages div#message_toolbarWindows > div {
		max-width: 100%;
	}

	div.messages div#message_toolbarWindows a {
		display: inline-block;
		padding: 6px;
	}

	div.messages div.message,
	div.messages div#message_preview {
		box-sizing: border-box;
		margin-left: 0;
		max-width: 100%;
		min-height: 0;
		overflow-wrap: anywhere;
		width: 100%;
	}

	div.messages div.message img {
		max-width: 100%;
	}

	div.messages div.msg_content p.btn {
		margin: 12px 0 0;
	}

	div.messages div.msg_content p.btn button {
		min-height: 44px;
		min-width: 120px;
	}

	/* Read view: sender + subject, then the date, then the text. */
	div.messages div#read_content div#heading div {
		font-size: 14px;
		line-height: 1.4;
		width: auto;
	}

	div.messages div#read_content div#heading div:first-child a {
		display: inline-block;
		font-weight: bold;
		padding: 6px 0;
	}

	div.messages div#read_content div#time {
		color: #777;
		float: none;
		margin: 4px 0 10px;
		padding: 0;
	}

	div.messages div#read_content div#time div {
		display: inline;
		height: auto;
		margin-right: 6px;
	}

	div.messages div#read_content div.message {
		border-top: 1px solid #ddd;
		font-size: 14px;
		line-height: 1.5;
		padding: 10px 0 12px;
	}

	/* Address book: a fixed sheet over the form, closed with the 44px X. */
	div.messages div#adressbook {
		background: #fff;
		border: 1px solid #b4b4b4;
		bottom: auto;
		box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
		box-sizing: border-box;
		height: auto;
		left: 8px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		padding: 12px 12px 16px;
		position: fixed;
		right: 8px;
		top: max(16px, env(safe-area-inset-top));
		width: auto;
		z-index: 10002;
	}

	div.messages div#adressbook.hide {
		display: none;
	}

	div.messages div#adressbook h2 {
		margin: 4px 52px 10px 0;
		text-align: left;
	}

	div.messages div#adressbook > a:last-child {
		align-items: center;
		display: flex;
		height: 44px;
		justify-content: center;
		position: absolute;
		right: 4px;
		top: 4px;
		width: 44px;
	}

	div.messages div#adressbook img#close {
		left: auto;
		position: static;
	}

	div.messages table#friendlist {
		width: 100%;
	}

	div.messages table#friendlist tr {
		display: flex;
		flex-wrap: wrap;
	}

	div.messages table#friendlist td {
		box-sizing: border-box;
		display: block;
	}

	div.messages table#friendlist td.pla {
		flex: 1 1 calc(100% - 80px);
		min-width: 0;
	}

	div.messages table#friendlist td.pla input.text {
		font-size: 16px;
		width: 100%;
	}

	div.messages table#friendlist td.pla a {
		display: inline-block;
		padding: 10px 0;
	}

	div.messages table#friendlist td.end,
	div.messages table#friendlist td.on {
		flex: 0 0 36px;
		text-align: center;
	}

	div.messages table#friendlist td:empty:not(.end):not(.on) {
		display: none;
	}

	div.messages div#block {
		height: auto;
		width: 100%;
	}

	div.messages div#block textarea#notice {
		box-sizing: border-box;
		font-size: 16px;
		height: 300px;
		width: 100%;
	}

	/* ---------------------------------------------------------------- */
	/* Profile (spieler.php, Profile/*.tpl) and alliance profile          */
	/* ---------------------------------------------------------------- */

	div.player,
	div.alliance {
		box-sizing: border-box;
	}

	/* Details / Description side by side -> stacked. */
	div.player table#profile,
	div.alliance table#profile {
		width: 100% !important;
	}

	div.player table#profile > thead,
	div.player table#profile > tbody,
	div.player table#profile > thead > tr,
	div.player table#profile > tbody > tr,
	div.player table#profile > thead > tr > th,
	div.player table#profile > thead > tr > td,
	div.player table#profile > tbody > tr > td,
	div.alliance table#profile > thead,
	div.alliance table#profile > tbody,
	div.alliance table#profile > thead > tr,
	div.alliance table#profile > tbody > tr,
	div.alliance table#profile > thead > tr > th,
	div.alliance table#profile > thead > tr > td,
	div.alliance table#profile > tbody > tr > td {
		box-sizing: border-box;
		display: block;
		height: auto;
		width: 100% !important;
	}

	div.player table#profile > thead > tr > td,
	div.alliance table#profile > thead > tr > td,
	div.player table#profile > tbody > tr > td.empty,
	div.alliance table#profile > tbody > tr > td.empty {
		display: none;
	}

	div.player table#profile td.details table,
	div.alliance table#profile td.details table {
		width: 100%;
	}

	div.player table#profile td.details table th,
	div.alliance table#profile td.details table th {
		width: 40%;
	}

	div.player table#profile td.details table td,
	div.alliance table#profile td.details table td {
		overflow-wrap: anywhere;
	}

	div.player table#profile td.details table td a,
	div.alliance table#profile td.details table td a {
		display: inline-block;
		padding: 6px 0;
	}

	div.player table#profile td.desc1,
	div.alliance table#profile td.desc1 {
		border-top: 1px solid #c0c0c0;
		overflow-wrap: anywhere;
		padding: 8px;
	}

	div.player table#profile img,
	div.alliance table#profile img {
		max-width: 100%;
	}

	/* Edit profile / alliance description: one column. */
	div.player table#edit,
	div.alliance table#edit {
		width: 100% !important;
	}

	div.player table#edit > thead > tr,
	div.player table#edit > tbody > tr,
	div.alliance table#edit > thead > tr,
	div.alliance table#edit > tbody > tr {
		display: flex;
		flex-wrap: wrap;
	}

	div.player table#edit > thead > tr > *,
	div.player table#edit > tbody > tr > *,
	div.alliance table#edit > thead > tr > *,
	div.alliance table#edit > tbody > tr > * {
		box-sizing: border-box;
		display: block;
		flex: 1 1 100%;
		text-align: left;
		width: auto;
	}

	div.player table#edit > tbody > tr > th,
	div.alliance table#edit > tbody > tr > th {
		border-bottom: 0;
		padding-bottom: 0;
	}

	div.player table#edit > thead > tr > td,
	div.player table#edit td.empty,
	div.alliance table#edit > thead > tr > td,
	div.alliance table#edit td.empty {
		display: none;
	}

	div.player table#edit input.text,
	div.alliance table#edit input.text {
		min-height: 40px;
		width: 100%;
	}

	div.player table#edit td.birth {
		align-items: center;
		display: flex;
		gap: 6px;
	}

	div.player table#edit td.birth input.day,
	div.player table#edit td.birth input.year,
	div.player table#edit td.birth select.dropdown {
		float: none;
		margin: 0;
		min-height: 40px;
	}

	div.player table#edit td.birth input.day {
		width: 3.2em;
	}

	div.player table#edit td.birth input.year {
		width: 4.8em;
	}

	div.player table#edit td.birth select.dropdown {
		width: 5.5em;
	}

	div.player table#edit td.gend label {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-right: 14px;
	}

	div.player table#edit td.desc1,
	div.player table#edit td.desc2,
	div.alliance table#edit td.desc1,
	div.alliance table#edit td.desc2 {
		padding: 6px;
	}

	div.player table#edit td.desc1 textarea,
	div.player table#edit td.desc2 textarea,
	div.alliance table#edit td.desc1 textarea,
	div.alliance table#edit td.desc2 textarea {
		box-sizing: border-box;
		font-size: 16px;
		height: 180px;
		text-align: left;
		width: 100%;
	}

	div.player table.tbg,
	div.alliance table.tbg {
		width: 100%;
	}

	/* Preferences / account / sitters / vacation / graphic pack: label above field. */
	div.player table.account,
	div.player table.set,
	div.player table#links,
	div.player table#gpack,
	div.player table#download,
	div.player table#support_mh {
		width: 100% !important;
	}

	div.player table#links {
		table-layout: fixed;
	}

	div.player table#links thead tr:last-child td:first-child,
	div.player table#links tbody td:first-child {
		width: 32px;
	}

	div.player table#links thead tr:last-child td:nth-child(2),
	div.player table#links td.nr {
		width: 3.4em;
	}

	div.player table#links td input.text {
		box-sizing: border-box;
		min-width: 0;
		width: 100%;
	}

	div.player table.account tbody tr,
	div.player table.set tbody tr {
		display: flex;
		flex-wrap: wrap;
	}

	div.player table.account tbody tr > *,
	div.player table.set tbody tr > * {
		box-sizing: border-box;
		display: block;
		flex: 1 1 auto;
		text-align: left;
		width: auto;
	}

	div.player table.account tbody th,
	div.player table.set tbody th {
		flex-basis: 100%;
		white-space: normal;
	}

	div.player table.account input.text,
	div.player table.account input[type="text"],
	div.player table.account input[type="password"],
	div.player table#links input.text {
		min-height: 40px;
		width: 100%;
	}

	div.player table.account td a,
	div.player table.set label {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	div.player p.btn,
	div.alliance p.btn,
	div.forum p.btn {
		text-align: center;
	}

	div.player p.btn input.dynamic_img,
	div.alliance p.btn input.dynamic_img,
	div.forum p.btn input.dynamic_img {
		box-sizing: content-box;
		padding: 10px 6px;
	}

	div.player table#villages td.aligned_coords,
	div.alliance table#member td {
		white-space: nowrap;
	}

	/* ---------------------------------------------------------------- */
	/* Alliance (allianz.php, Alliance/*.tpl)                            */
	/* ---------------------------------------------------------------- */

	div.alliance table.small_option,
	div.alliance table.dipl,
	div.alliance table.infos,
	div.alliance table#events,
	div.alliance table#options,
	div.alliance table#quit,
	div.alliance table#invite,
	div.alliance table#invitations {
		width: 100% !important;
	}

	div.alliance table.small_option td,
	div.alliance table.small_option th,
	div.alliance table#events td,
	div.alliance table.dipl td {
		overflow-wrap: anywhere;
		white-space: normal;
	}

	div.alliance table#options td label,
	div.alliance table#options td input.radio {
		min-height: 24px;
	}

	div.alliance table#options td {
		padding: 8px 6px;
	}

	/* Alliance chat (Alliance/chat.tpl). */
	div.alliance #chatContainer,
	div.alliance div[id$="ChatContainer"] {
		box-sizing: border-box;
		max-width: 100%;
		width: 100% !important;
	}

	/* ---------------------------------------------------------------- */
	/* Alliance forum (allianz.php?s=2, Alliance/Forum/*.tpl)            */
	/* ---------------------------------------------------------------- */

	div.forum table#public,
	div.forum table#posts,
	div.forum table#new_forum,
	div.forum table#new_topic,
	div.forum table#new_post,
	div.forum table#edit_post,
	div.forum table#edit_topic,
	div.forum table#edit_forum,
	div.forum table#ally_list,
	div.forum table#user_list,
	div.forum table.forum,
	div.forum table#topics {
		table-layout: auto;
		width: 100% !important;
	}

	div.forum table td,
	div.forum table th {
		overflow-wrap: anywhere;
	}

	div.forum table td a {
		display: inline-block;
		padding: 4px 0;
	}

	div.forum table#public td.tit a,
	div.forum table td.tit a {
		font-weight: bold;
		padding: 10px 0 6px;
	}

	/* Posts: author column on top of the post. */
	div.forum table#posts > tbody > tr,
	div.forum table#posts > thead > tr {
		display: flex;
		flex-wrap: wrap;
	}

	div.forum table#posts > tbody > tr > td,
	div.forum table#posts > tbody > tr > th,
	div.forum table#posts > thead > tr > th,
	div.forum table#posts > thead > tr > td {
		box-sizing: border-box;
		display: block;
		flex: 1 1 100%;
		width: auto !important;
	}

	div.forum table#posts td.pinfo {
		border-bottom: 0;
		text-align: left;
	}

	div.forum table#posts td.pcontent {
		font-size: 14px;
		line-height: 1.5;
	}

	div.forum table#posts td.pcontent img {
		max-width: 100%;
	}

	div.forum textarea,
	div.forum input.text {
		box-sizing: border-box;
		width: 100% !important;
	}

	div.forum textarea {
		min-height: 180px;
	}

	div.forum div#message_toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	div.forum div#message_toolbar > a {
		align-items: center;
		display: inline-flex;
		height: 40px;
		justify-content: center;
		width: 40px;
	}

	/* ---------------------------------------------------------------- */
	/* Statistics (statistiken.php, Ranking/*.tpl)                       */
	/* ---------------------------------------------------------------- */

	div#content.statistics table#search_navi {
		width: 100% !important;
	}

	div#content.statistics table#search_navi tr {
		display: flex;
		flex-wrap: wrap;
	}

	div#content.statistics table#search_navi td {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 6px;
		padding: 6px 4px;
	}

	div#content.statistics table#search_navi input.text,
	div#content.statistics table#search_navi input[type="text"] {
		min-height: 44px;
		width: 9em;
	}

	div#content.statistics table#search_navi input.dynamic_img,
	div#content.statistics table#search_navi button {
		box-sizing: content-box;
		min-height: 20px;
		padding: 12px 6px;
	}

	div#content.statistics table#search_navi td.navi,
	div#content.statistics table#search_navi td:last-child {
		font-size: 18px;
		justify-content: flex-end;
	}

	div#content.statistics table#search_navi a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	div#content.statistics table.top10,
	div#content.statistics table.world {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100% !important;
	}

	div#content.statistics table td.pla a,
	div#content.statistics table td.al a {
		display: inline-block;
		padding: 6px 0;
	}

	/* ---------------------------------------------------------------- */
	/* Global chat dock (Templates/globalchat.tpl)                       */
	/* Collapsed: a "Chat" tab at the bottom right, clear of #res at the */
	/* top. Open: a panel along the bottom edge, above the home bar.     */
	/* ---------------------------------------------------------------- */

	body:has(#chat-dock) {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}

	div#chat-dock {
		bottom: 0;
		box-sizing: border-box;
		left: auto;
		margin: 0;
		max-width: 100vw;
		padding: 0 max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
		pointer-events: none;
		position: fixed;
		right: 0;
		width: auto;
		/* Above the header / resource bar (1000/999), below the drawer backdrop (2900). */
		z-index: 2800;
	}

	div#chat-dock > * {
		pointer-events: auto;
	}

	div#chat-dock button.chat-dock-toggle {
		align-items: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #777;
		border-radius: 4px 4px 3px 3px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
		color: #333;
		cursor: pointer;
		display: flex;
		font: bold 13px/1 Verdana, Tahoma, Arial, sans-serif;
		gap: 6px;
		margin-left: auto;
		min-height: 44px;
		min-width: 88px;
		padding: 8px 14px;
	}

	div#chat-dock button.chat-dock-toggle:focus-visible {
		outline: 2px solid #71d000;
		outline-offset: 2px;
	}

	div#chat-dock.chat-dock-open button.chat-dock-toggle {
		background: #e8f5dc;
		border-color: #71a832;
		box-shadow: inset 0 -3px 0 #71d000;
	}

	div#chat-dock > h5 {
		display: none;
	}

	div#chat-dock > div.news {
		display: none;
	}

	div#chat-dock.chat-dock-open {
		left: 0;
	}

	div#chat-dock.chat-dock-open > div.news {
		background: #fff;
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .25);
		box-sizing: border-box;
		display: block;
		margin: 0 0 6px;
		max-height: min(60vh, 420px);
		max-width: 100%;
		overflow: auto;
		padding: 8px;
	}

	div#chat-dock.chat-dock-open {
		display: flex;
		flex-direction: column-reverse;
	}

	div#chat-dock .rvian-chat .list,
	div#chat-dock #globalChatContainer,
	div#chat-dock #allyChatContainer {
		height: min(36vh, 260px) !important;
	}

	div#chat-dock .rvian-chat .tab,
	div#chat-dock .chat-tab {
		min-height: 36px;
	}

	div#chat-dock input.text,
	div#chat-dock input[type="text"] {
		box-sizing: border-box;
		font-size: 16px;
		min-height: 40px;
	}

	div#chat-dock input[type="submit"],
	div#chat-dock button[type="submit"] {
		font-size: 14px;
		min-height: 40px;
	}

	/* Keep the drawers above the closed dock. */
	body.mobile-drawer-active div#chat-dock:not(.chat-dock-open) {
		visibility: hidden;
	}
}