/*
 * Die Stämme LAN — mobile support
 *
 * This file is loaded last and contains ALL @media rules of the
 * project (ARCHITECTURE.md, section 6). Whoever needs a rule for
 * narrow devices reports the class names to area C; the rule goes
 * here, not into the area's own file.
 *
 * Breakpoints:
 *   <= 900px  tablet  — main menu becomes a hamburger menu,
 *                       resource bar stays sticky at the top
 *   <= 600px  phone   — wide tables reflow into card form,
 *                       controls get bigger
 *
 * The hamburger menu works WITHOUT JavaScript: a hidden
 * <input type="checkbox" id="navtoggle"> precedes the <label> and
 * <ul class="menu">; it is toggled via the sibling selector.
 */

/* ================================================================== */
/* Up to 900px — tablet                                                */
/* ================================================================== */
@media (max-width: 900px) {

	/* -- Hamburger menu ------------------------------------------ */
	.nav-burger {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #f3e6c8;
		font-weight: bold;
		text-shadow: 0 1px 0 #000;
		padding: 6px 10px;
		min-height: var(--touch);
	}

	.nav-burger .bars,
	.nav-burger .bars::before,
	.nav-burger .bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: #f3e6c8;
		content: "";
		position: relative;
	}

	.nav-burger .bars::before { top: -6px; }
	.nav-burger .bars::after { top: 4px; }

	.nav-burger .bars > span { display: none; }

	/* The ribbon shape does not help in a vertical list */
	ul.menu > li > a {
		clip-path: none;
		margin: 0;
	}
	ul.menu > li::before { display: none; }

	ul.menu > li.rank { margin: 0; }
	ul.menu > li.rank > a { flex-direction: row; gap: 6px; }

	/* The menu starts closed and opens via the checkbox. */
	.topbar > ul.menu {
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		border-top: 1px solid var(--edge-dark);
	}

	.nav-toggle:checked ~ ul.menu {
		display: flex;
	}

	/* The button indicates that the menu is open. */
	.nav-toggle:checked ~ .nav-burger {
		background: var(--lit);
	}

	/* Make keyboard operation visible */
	.nav-toggle:focus-visible ~ .nav-burger {
		outline: 2px solid var(--brown);
		outline-offset: -2px;
	}

	ul.menu > li {
		border-right: 0;
		border-top: 1px solid rgba(153,119,51,.35);
		white-space: normal;
	}

	ul.menu > li:first-child {
		border-top: 0;
	}

	ul.menu > li > a {
		padding: 10px 12px;
		min-height: var(--touch);
		display: flex;
		align-items: center;
	}

	/*
	 * Submenus do not fold out but sit indented underneath —
	 * there is no mouse hover on a phone.
	 */
	ul.menu > li > ul {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		background: rgba(255,255,255,.35);
		min-width: 0;
	}

	ul.menu > li > ul > li > a {
		padding: 8px 12px 8px 30px;
		min-height: var(--touch);
		display: flex;
		align-items: center;
		font-weight: normal;
	}

	/* -- Resource bar stays visible ------------------------------ */
	.header {
		/* Stacked boxes: the bar is the page again, not
		   max-content (layout.css) */
		width: auto;
		min-width: 0;
		left: 0;
		transform: none;
		flex-wrap: wrap;
		position: sticky;
		top: 0;
		z-index: 40;
	}

	/* -- Quick bar ----------------------------------------------- */
	.quickbar {
		gap: 2px 10px;
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.quickbar a {
		min-height: var(--touch);
	}

	/* -- Village overview ---------------------------------------- */
	.village-view {
		grid-template-columns: repeat(4, 1fr);
	}

	/* -- Content stacked vertically ------------------------------ */
	.cols > * {
		flex: 1 1 100%;
	}
}

/* ================================================================== */
/* Up to 600px — phone                                                 */
/* ================================================================== */
@media (max-width: 600px) {
	/* Column widths written into the markup are desktop widths;
	 * on a phone the browser lays the tables out itself */
	table.vis th[width],
	table.vis td[width] {
		width: auto !important;
	}

	/* Wide data tables scroll inside their box, in smaller type so
	 * more of them fits */
	.scroll-x table.vis {
		font-size: 11px;
	}

	/* Rally point: the target line stacks, the buttons fill the
	 * width */
	.place-target,
	.place-target > tbody,
	.place-target > tbody > tr,
	.place-target > tbody > tr > th,
	.place-target > tbody > tr > td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.place-target select {
		width: 100%;
		margin: 4px 0;
	}

	.place-target input[type=submit] {
		display: block;
		width: 100%;
		margin: 4px 0;
		box-sizing: border-box;
	}

	/* Tribe page: the tabs wrap */
	.ally-tabs,
	.ally-tabs > tbody,
	.ally-tabs > tbody > tr {
		display: block;
	}

	.ally-tabs > tbody > tr > td {
		display: inline-block;
		width: auto !important;
	}

	/* Troop manager: one cell per unit, wrapping */
	.am-cells > tbody > tr {
		display: flex;
		flex-wrap: wrap;
	}

	.am-cells > tbody > tr > td,
	.am-cells > tbody > tr > th {
		display: block;
		box-sizing: border-box;
	}

	.am-cells > tbody > tr > th {
		width: 100%;
	}

	.am-cells input.small {
		width: 48px;
	}

	/* Mail: the fields fill the width */
	.mail-compose input[type=text],
	.mail-compose textarea {
		width: 100%;
		box-sizing: border-box;
	}

	/* Forms in table cells wrap instead of widening the cell */
	table.vis td form {
		display: inline;
	}

	/* Mass command: one card per village, the unit fields wrap
	 * with their icons, no table to scroll */
	.place-multi,
	.place-multi > tbody,
	.place-multi > tbody > tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.place-multi > tbody > tr.pm-head {
		display: none;
	}

	.place-multi > tbody > tr {
		border-bottom: 1px solid #d2c09a;
		padding: 4px 0;
	}

	.place-multi > tbody > tr > td {
		display: inline-block;
		vertical-align: top;
		border: 0;
		width: auto;
	}

	.place-multi td.pm-info::before {
		content: attr(data-label) ": ";
		color: #7a6a4a;
	}

	.place-multi td.pm-unit {
		width: 60px;
		text-align: center;
		padding: 2px;
	}

	.place-multi .pm-ico {
		display: block;
	}

	/* Columns a phone can do without */
	.ph-hide {
		display: none !important;
	}

	/* Smithy: the unit groups under each other */
	.smith-groups,
	.smith-groups > tbody,
	.smith-groups > tbody > tr,
	.smith-groups > tbody > tr > td,
	.smith-groups > tbody > tr > th {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Their heading row would stand alone at the top */
	.smith-groups > tbody > tr:first-child {
		display: none;
	}

	/* Request page: narrow fields, the maximum below */
	.req-row input[type=text] {
		width: 44px;
	}

	.req-row td a[data-res] {
		display: block;
	}

	/* Recruit fields of scrolled tables: narrower */
	.scroll-x table.vis input.small {
		width: 44px;
	}

	/* The "(max)" link of a recruit field below the field */
	.scroll-x table.vis a.rmax {
		display: block;
		min-height: 0;
		line-height: 1.4;
	}

	/* Unit rows of scrolled tables: smaller icons */
	.scroll-x table.vis img.icon {
		width: 16px;
		height: 16px;
	}

	/* Small form tables stack their cells */
	.stack-phone,
	.stack-phone > tbody,
	.stack-phone > tbody > tr,
	.stack-phone > tbody > tr > th,
	.stack-phone > tbody > tr > td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Tighter cells in tables that had to scroll */
	.scroll-x table.vis td,
	.scroll-x table.vis th {
		padding: 2px 2px;
	}

	/* Ranking: a short share bar */
	.win-cell .win-bar {
		width: 40px;
	}

	.stat-table td {
		white-space: normal;
	}

	/* The mid-size building pictures of the main building list sit
	 * in line with the name here; floated they would push the name
	 * under the picture in the narrow first column. */
	img.bld-mid {
		float: none;
		vertical-align: middle;
		margin: 0 4px 0 0;
	}

	.wrap {
		margin: 4px auto;
		padding: 0 4px;
	}

	.content {
		padding: 6px;
	}

	h1 { font-size: 14pt; }
	h2 { font-size: 12pt; }

	/* -- Village bar: two lines, village box above the resource box - */
	.header {
		flex-wrap: wrap;
		gap: 3px;
		padding: 3px 4px;
	}

	.header .village-select,
	.header .res {
		flex: 1 1 100%;
		box-sizing: border-box;
		padding: 1px 4px;
	}

	.header .village-select {
		flex-wrap: wrap;
		row-gap: 0;
	}

	/*
	 * The village switch gets 8pt in layout.css; that is more
	 * specific than the general rule further below and must be
	 * overridden explicitly here, otherwise iOS zooms on tap.
	 */
	.header .vswitch-wrap {
		flex: 1 1 100%;
		width: auto;
		height: auto;
		margin: 2px 0 0;
		background: none;
		border: 0;
	}
	.header .vswitch-arrow {
		display: none;
	}
	.header .vswitch {
		position: static;
		opacity: 1;
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
		min-height: var(--touch);
		font-size: 16px;
		color: #603000;
		background: #fff;
		border: 1px solid #cdb98e;
	}

	/*
	 * The resource line may wrap: with long numbers the coin and
	 * attack counters slip onto a line of their own instead of
	 * running past the box. The items stretch to fill each line.
	 */
	.header .res {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0 2px;
	}

	.header .res .res-item,
	.header .res .counters {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Separators only waste space on a phone */
	.header .res .sep {
		display: none;
	}

	.header .res .res-item {
		padding: 1px 2px;
		gap: 3px;
	}

	.header .res .val {
		min-width: 0;
	}

	/*
	 * Resource icons, village arrows and the info icon are only
	 * 11–18px in size. The hit area is enlarged to 40x40 via an
	 * ::after without making the bar any wider — otherwise the
	 * resource line would no longer fit at 390px.
	 */
	.res-item > a,
	.header .vnav,
	.header .vinfo {
		position: relative;
		min-height: var(--touch);
	}

	.header .vinfo {
		width: 13px;
		height: 13px;
		min-height: 13px;
		margin: 0 8px;
	}

	.res-item > a::after,
	.header .vnav::after,
	.header .vinfo::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--touch);
		height: var(--touch);
		transform: translate(-50%, -50%);
	}

	/*
	 * The village name is a text link of only 17px height. It gets
	 * the same invisible hit area, across the full text width.
	 */
	.header .vname {
		position: relative;
		display: inline-block;
		min-height: var(--touch);
		line-height: var(--touch);
	}

	.header .vname::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		min-width: var(--touch);
		height: var(--touch);
		transform: translate(-50%, -50%);
	}

	/*
	 * Only the icons remain in the quick bar; the label sits in
	 * <span class="lbl">.
	 */
	.quickbar a .lbl {
		display: none;
	}

	.quickbar a {
		min-width: var(--touch);
		min-height: var(--touch);
		justify-content: center;
		padding: 2px 6px;
	}

	/* -- Village overview ---------------------------------------- */
	.village-view {
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		padding: 5px;
	}

	/* -- Controls big enough for a finger ------------------------ */
	input[type=submit],
	input[type=button],
	input[type=reset],
	button {
		min-height: var(--touch);
		min-width: var(--touch);
		font-size: 16px;
		padding: 6px 14px;
	}

	/*
	 * 16px font size, otherwise iOS zooms the whole page when
	 * tapping into an input field.
	 */
	input[type=text],
	input[type=password],
	input[type=number],
	input[type=search],
	input[type=email],
	select,
	textarea {
		font-size: 16px;
		min-height: var(--touch);
		padding: 4px 6px;
	}

	/* The notes text box keeps its multi-line height. */
	textarea {
		min-height: 90px;
	}

	input.small {
		width: 70px;
	}

	input[type=checkbox],
	input[type=radio] {
		width: 20px;
		height: 20px;
	}

	/*
	 * Bring link targets in tables and in the pager up to the full
	 * hit area. The height grows, the width does not — wide tables
	 * sit inside a .scroll-x anyway and therefore do not shift the
	 * page.
	 */
	table.vis td a,
	table.vis th a,
	.pager a,
	.pager b,
	.tabs a {
		display: inline-block;
		min-height: var(--touch);
		line-height: 38px;
	}

	/* A link consisting only of an icon also needs the full hit
	 * area horizontally. */
	table.vis td a:has(> img:only-child),
	table.vis th a:has(> img:only-child) {
		min-width: var(--touch);
		text-align: center;
	}

	.tabs a,
	.tabs span {
		min-height: var(--touch);
		line-height: 32px;
		padding: 3px 12px;
	}

	/* ---------------------------------------------------------- */
	/* Wide tables in card form                                    */
	/*                                                             */
	/* Convention (binding for all templates):                     */
	/*                                                             */
	/*   <table class="vis resp full">                             */
	/*     <thead><tr><th>Dorf</th><th>Punkte</th></tr></thead>    */
	/*     <tbody>                                                 */
	/*       <tr>                                                  */
	/*         <td data-label="Dorf">Bonn</td>                     */
	/*         <td data-label="Punkte">26</td>                     */
	/*       </tr>                                                 */
	/*     </tbody>                                                */
	/*   </table>                                                  */
	/*                                                             */
	/* - The header row MUST be inside <thead>, otherwise it       */
	/*   remains on the phone as a meaningless card row.           */
	/* - Every <td> carries data-label with exactly the text of    */
	/*   its column heading.                                       */
	/* - Cells without data-label (checkboxes, buttons) get no     */
	/*   label prepended.                                          */
	/* - Tables WITHOUT the class "resp" stay tables and are       */
	/*   wrapped in <div class="scroll-x"> by game.js.             */
	/* ---------------------------------------------------------- */
	table.vis.resp,
	table.vis.resp > tbody,
	table.vis.resp > tbody > tr,
	table.vis.resp > tbody > tr > td {
		display: block;
		width: 100%;
	}

	table.vis.resp > thead {
		display: none;
	}

	/*
	 * Safety net: if the header row of a resp table is not inside
	 * <thead>, it lands in the automatically created <tbody> and
	 * would remain as a meaningless card row. A row consisting
	 * only of <th> is therefore hidden there as well.
	 * This does NOT replace the <thead> in the template — it only
	 * keeps a forgotten conversion from looking broken right away.
	 */
	table.vis.resp > tbody > tr:has(> th) {
		display: none;
	}

	/* For browsers without :has(), at least hide the cells. */
	table.vis.resp > tbody > tr > th {
		display: none;
	}

	table.vis.resp {
		border: 0;
		background: none;
		border-spacing: 0;
	}

	table.vis.resp > tbody > tr {
		border: 1px solid var(--border);
		background: var(--paper2);
		margin-bottom: 6px;
		padding: 2px 0;
	}

	table.vis.resp > tbody > tr > td {
		border: 0;
		border-bottom: 1px dotted var(--border);
		padding: 5px 8px;
		text-align: left;
		min-height: 30px;
	}

	table.vis.resp > tbody > tr > td:last-child {
		border-bottom: 0;
	}

	/* Prepend the label from data-label */
	table.vis.resp > tbody > tr > td[data-label]::before {
		content: attr(data-label) ":";
		display: inline-block;
		min-width: 40%;
		padding-right: 6px;
		font-weight: bold;
		color: var(--dark);
	}

	table.vis.resp > tbody > tr > td[data-label=""]::before {
		content: none;
	}

	/* A highlighted row keeps its colour */
	table.vis.resp > tbody > tr.lit {
		background: var(--lit);
	}

	table.vis.resp > tbody > tr.row_a { background: var(--row); }
	table.vis.resp > tbody > tr.row_b { background: var(--paper3); }

	table.vis.resp > tbody > tr > td,
	table.vis.resp > tbody > tr.lit > td,
	table.vis.resp > tbody > tr.row_a > td,
	table.vis.resp > tbody > tr.row_b > td {
		background: none;
	}
}

/* ================================================================== */
/* Map (area B)                                                        */
/*                                                                     */
/* According to ARCHITECTURE.md the map's @media rules belong here as  */
/* well. The class names come from public/css/map.css:                 */
/* .map-page .map-main .map-side .map-view .map-tools .map-nav         */
/* .map-mini .map-mini-box .map-legend .map-tip                        */
/* ================================================================== */
@media (max-width: 900px) {
	/* Minimap and legend slide below the map */
	.map-side {
		flex: 1 1 100%;
	}

	/* The viewport must never widen the page */
	.map-view {
		max-width: 100%;
	}

	/* Finger-friendly corner arrows and mini map arrows */
	.map-corner {
		width: 28px;
		height: 28px;
	}
	.map-nav {
		grid-template-columns: 28px auto 28px;
		grid-template-rows: 28px auto 28px;
	}
}

@media (max-width: 600px) {
	/* Tooltip no wider than the screen */
	.map-tip {
		max-width: 80vw;
	}
}

/* Village overview: scene scales down, side boxes drop below it */
@media (max-width: 900px) {
	.overview-cols { flex-direction: column; }
	.scene-wrap { width: 100%; }
	.overview-side { width: 100%; }
	.wrap { width: auto; margin: 4px 4px 12px; }
	.top_background { display: none; }
}

/* Narrow screens: stack the mode column above the content and lay the
 * modes out as a horizontal strip of tabs. */
@media (max-width: 600px) {
	table.cols,
	table.cols > tbody,
	table.cols > tbody > tr,
	table.cols > tbody > tr > td {
		display: block;
		width: auto;
	}
	table.vis.side-menu,
	table.vis.side-menu > tbody {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 6px;
	}
	table.vis.side-menu > tbody > tr { display: contents; }
	table.vis.side-menu td {
		display: block;
		width: auto;
		white-space: nowrap;
	}
	td.mail-body { height: auto; min-height: 100px; }
}