/*
 * Travikas mobile — shell.css
 * Owner: Shell: header, #mtop nav, drawers (Menu/Info), resource bar, side panels, safe areas, landscape.
 *
 * 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.
 *
 * Layout (top to bottom, all fixed):
 *   staging banner (--rvian-banner-height, set by Templates/staging_banner.tpl)
 *   div#header: drawer toggles, server clock, #mtop icons (--mobile-header-height)
 *   div#res: production, stock, gold (--mobile-resource-height)
 * .wrapper reserves the banner + header; the gpack pads #content by the
 * resource bar height. Other area stylesheets may read these variables.
 *
 * Sizes per layout:
 *   601-1023px (tablets, large phones): one header row, one resource row.
 *   <= 600px (phones, portrait): toggles + clock row above the icon row,
 *     stock in a 3-column grid.
 *   landscape phones (height <= 500px): one compact row each, so at least
 *     55% of the screen height stays for the page.
 */

@media screen and (max-width: 1023px) {
	:root {
		--mobile-safe-top: env(safe-area-inset-top, 0px);
		--mobile-safe-right: env(safe-area-inset-right, 0px);
		--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
		--mobile-safe-left: env(safe-area-inset-left, 0px);
		--mobile-chrome-top: calc(var(--mobile-safe-top) + var(--rvian-banner-height, 0px));
		--mobile-header-height: 60px;
		--mobile-resource-height: 48px;
		--mobile-icon-size: 52px;
		--mobile-toggle-width: 70px;
		--mobile-clock-width: 78px;
		--mobile-green: #71d000;
		--mobile-green-dark: #71a832;
		--mobile-green-light: #e8f5dc;
	}

	.wrapper {
		background-image: none !important;
		box-sizing: border-box;
		padding-top: calc(var(--mobile-chrome-top) + var(--mobile-header-height) + 1px);
	}

	body.mobile-drawer-active {
		overflow: hidden;
		overscroll-behavior: none;
	}

	html:has(body.mobile-drawer-active) {
		overflow: hidden;
	}

	/* Staging / local dev banner ------------------------------------------ */
	#rvian-staging-banner {
		box-sizing: content-box;
		height: var(--rvian-banner-height, 28px);
		overflow: hidden;
		padding: var(--mobile-safe-top) calc(var(--mobile-safe-right) + 8px) 0 calc(var(--mobile-safe-left) + 8px);
		text-overflow: ellipsis;
		white-space: nowrap;
		z-index: 1002 !important;
	}

	/* Header ---------------------------------------------------------------- */
	div#header,
	body.mod1 div#header,
	body.mod2 div#header,
	body.mod3 div#header {
		background: linear-gradient(#fdfdfd, #ececec 60%, #e1e1e1);
		border-bottom: 1px solid #c4c4c4;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
		box-sizing: content-box;
		height: var(--mobile-header-height);
		left: 0;
		min-width: 0;
		padding-top: var(--mobile-chrome-top);
		position: fixed;
		right: 0;
		top: 0;
		width: auto;
		z-index: 1000;
	}

	div#mtop,
	body.mod1 div#mtop,
	body.mod2 div#mtop,
	body.mod3 div#mtop {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		gap: 6px;
		height: var(--mobile-header-height);
		justify-content: center;
		left: 0;
		margin: 0;
		overflow: visible;
		padding: 0 calc(var(--mobile-safe-right) + var(--mobile-toggle-width) + var(--mobile-clock-width) + 20px) 0 calc(var(--mobile-safe-left) + var(--mobile-toggle-width) + 14px);
		position: absolute;
		right: 0;
		top: var(--mobile-chrome-top);
		width: auto;
		z-index: 2;
	}

	div#mtop a#plus,
	div#mtop > img.day,
	div#mtop > img.night,
	div#mtop > div.clear {
		display: none;
	}

	/* Village / centre / map / statistics: the gpack sprite circles, scaled. */
	div#mtop a#n1,
	div#mtop a#n2,
	div#mtop a#n3,
	div#mtop a#n4 {
		flex: 0 0 var(--mobile-icon-size);
		height: var(--mobile-icon-size);
		margin: 0;
		width: var(--mobile-icon-size);
	}

	div#mtop a#n1 img,
	div#mtop a#n2 img,
	div#mtop a#n3 img,
	div#mtop a#n4 img {
		background-position: center calc(var(--mobile-icon-size) * -.3);
		background-size: var(--mobile-icon-size) auto;
		border-radius: 50%;
		display: block;
		height: var(--mobile-icon-size);
		width: var(--mobile-icon-size);
	}

	div#mtop a#n1:hover img,
	div#mtop a#n2:hover img,
	div#mtop a#n3:hover img,
	div#mtop a#n4:hover img,
	div#mtop a#n1:focus img,
	div#mtop a#n2:focus img,
	div#mtop a#n3:focus img,
	div#mtop a#n4:focus img {
		background-position: center calc(var(--mobile-icon-size) * -1.7286);
	}

	/* Reports | messages: the split m1-m4 circle (i1-i4 state classes). Each
	   half is its own >= 44px link reaching past the circle, with a badge. */
	div#mtop div#n5 {
		--n5-half: max(44px, calc(var(--mobile-icon-size) / 2));
		background-position: center calc(var(--mobile-icon-size) * -.3);
		background-repeat: no-repeat;
		background-size: var(--mobile-icon-size) auto;
		border-radius: 50%;
		box-sizing: border-box;
		flex: 0 0 var(--mobile-icon-size);
		height: var(--mobile-icon-size);
		margin: 0 calc(var(--n5-half) - var(--mobile-icon-size) / 2);
		position: relative;
		width: var(--mobile-icon-size);
	}

	div#mtop div#n5 a {
		display: block;
		float: none;
		height: 100%;
		position: absolute;
		top: 0;
		width: var(--n5-half);
	}

	div#mtop div#n5 a.n5-reports {
		right: 50%;
	}

	div#mtop div#n5 a.n5-messages {
		left: 50%;
	}

	div#mtop div#n5 a img {
		display: block;
		height: 100%;
		width: 100%;
	}

	div#mtop div#n5 a:focus {
		outline: 2px solid var(--mobile-green);
		outline-offset: -2px;
	}

	div#mtop div#n5 .mobile-unread-badge {
		background: linear-gradient(#8ee21c, var(--mobile-green-dark));
		border: 2px solid #fff;
		border-radius: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
		box-sizing: border-box;
		color: #fff;
		display: block;
		font: bold 11px/16px Verdana, Tahoma, Arial, sans-serif;
		height: 20px;
		min-width: 20px;
		padding: 0 4px;
		pointer-events: none;
		position: absolute;
		text-align: center;
		text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
		top: 0;
	}

	div#mtop div#n5 a.n5-reports .mobile-unread-badge {
		left: 0;
	}

	div#mtop div#n5 a.n5-messages .mobile-unread-badge {
		right: 0;
	}

	/* Menu / Info toggles + server clock ---------------------------------- */
	div#mobile-drawer-controls {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		gap: 6px;
		height: var(--mobile-header-height);
		left: 0;
		padding: 0 calc(var(--mobile-safe-right) + 6px) 0 calc(var(--mobile-safe-left) + 6px);
		pointer-events: none;
		position: fixed;
		right: 0;
		top: var(--mobile-chrome-top);
		z-index: 3100;
	}

	body.mobile-drawer-active div#mobile-drawer-controls {
		z-index: 1001;
	}

	div#mobile-drawer-controls button {
		align-items: center;
		background: linear-gradient(#fff, #f1f1f1 45%, #d8d8d8);
		border: 1px solid #9c9c9c;
		border-radius: 4px;
		box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .2);
		box-sizing: border-box;
		color: #333;
		cursor: pointer;
		display: inline-flex;
		flex: 0 0 auto;
		font: bold 11px/1 Verdana, Tahoma, Arial, sans-serif;
		gap: 6px;
		height: 44px;
		justify-content: center;
		margin: 0;
		min-width: var(--mobile-toggle-width);
		padding: 0 8px;
		pointer-events: auto;
		text-shadow: 0 1px 0 #fff;
		touch-action: manipulation;
	}

	div#mobile-drawer-controls button:active,
	div#mobile-drawer-controls button[aria-expanded="true"] {
		background: linear-gradient(#f3fbea, var(--mobile-green-light) 45%, #c6e5a3);
		border-color: var(--mobile-green-dark);
		color: #2d5a0b;
	}

	div#mobile-drawer-controls button:focus-visible {
		outline: 2px solid var(--mobile-green);
		outline-offset: 2px;
	}

	div#mobile-drawer-controls button[hidden] {
		display: none;
	}

	div#mobile-drawer-controls #mobile-info-toggle {
		margin-left: auto;
		order: 3;
	}

	div#mobile-drawer-controls .mobile-toggle-icon {
		display: block;
		flex: 0 0 auto;
		height: 14px;
		width: 16px;
	}

	/* Menu: three bars. */
	#mobile-nav-toggle .mobile-toggle-icon {
		background: linear-gradient(#555 0 2px, transparent 2px 6px, #555 6px 8px, transparent 8px 12px, #555 12px 14px);
		border-radius: 1px;
	}

	/* Info: village list (green dot + lines). */
	#mobile-info-toggle .mobile-toggle-icon {
		background:
			radial-gradient(circle at 2.5px 2.5px, var(--mobile-green-dark) 2.4px, transparent 2.6px) 0 0 / 16px 6px repeat-y,
			linear-gradient(#555 0 2px, transparent 2px 6px) 7px 1.5px / 9px 6px repeat-y;
	}

	div#mobile-drawer-controls #mobile-server-clock {
		align-items: flex-end;
		color: #333;
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		font: bold 13px/1.1 Verdana, Tahoma, Arial, sans-serif;
		order: 2;
		pointer-events: auto;
		text-align: right;
		width: var(--mobile-clock-width);
	}

	#mobile-server-clock .mobile-clock-label {
		color: #777;
		font-size: 9px;
		font-weight: normal;
		text-transform: uppercase;
	}

	#mobile-server-clock #mobile-tp {
		font-variant-numeric: tabular-nums;
	}

	/* Drawers --------------------------------------------------------------- */
	div#mobile-drawer-backdrop {
		background: rgba(0, 0, 0, .4);
		bottom: 0;
		display: block;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 2900;
	}

	div#mobile-drawer-backdrop[hidden] {
		display: none;
	}

	div#side_navi,
	div#side_info,
	body.mod1 div#side_info,
	body.mod2 div#side_info,
	body.mod3 div#side_info {
		background: #fff !important;
		bottom: 0;
		box-sizing: border-box;
		height: auto !important;
		margin: 0 !important;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: fixed;
		top: 0;
		transition: transform .2s ease, visibility 0s linear .2s;
		visibility: hidden;
		z-index: 3000;
		-webkit-overflow-scrolling: touch;
	}

	div#side_navi.mobile-drawer-open,
	div#side_info.mobile-drawer-open {
		transform: none;
		transition: transform .2s ease, visibility 0s;
		visibility: visible;
	}

	div#side_navi {
		border-right: 1px solid #b4b4b4;
		box-shadow: 3px 0 14px rgba(0, 0, 0, .24);
		left: 0;
		padding: 0 0 calc(var(--mobile-safe-bottom) + 20px) var(--mobile-safe-left);
		transform: translateX(calc(-100% - 20px));
		width: min(86vw, calc(290px + var(--mobile-safe-left)));
	}

	div#side_info,
	body.mod1 div#side_info,
	body.mod2 div#side_info,
	body.mod3 div#side_info {
		border-left: 1px solid #b4b4b4;
		box-shadow: -3px 0 14px rgba(0, 0, 0, .24);
		padding: 0 calc(var(--mobile-safe-right) + 12px) calc(var(--mobile-safe-bottom) + 20px) 12px;
		right: 0;
		transform: translateX(calc(100% + 20px));
		width: min(86vw, calc(340px + var(--mobile-safe-right)));
	}

	/* Travian panel header: artwork strip, title, close button. */
	div#side_navi .mobile-drawer-head,
	div#side_info .mobile-drawer-head {
		align-items: center;
		background: #e1e1e1 url(../../gpack/travian_default/images/artwork1-ltr.jpg) center 30% / cover no-repeat;
		border-bottom: 2px solid var(--mobile-green);
		box-sizing: content-box;
		display: flex;
		height: 52px;
		justify-content: space-between;
		padding: var(--mobile-safe-top) 6px 0 12px;
		position: sticky;
		top: 0;
		z-index: 2;
	}

	div#side_info .mobile-drawer-head {
		margin: 0 calc(-12px - var(--mobile-safe-right)) 10px -12px;
		padding-right: calc(var(--mobile-safe-right) + 6px);
	}

	div#side_navi .mobile-drawer-head {
		margin: 0 0 6px calc(-1 * var(--mobile-safe-left));
		padding-left: calc(var(--mobile-safe-left) + 12px);
	}

	.mobile-drawer-head .mobile-drawer-title {
		background: rgba(255, 255, 255, .88);
		border: 1px solid rgba(0, 0, 0, .15);
		border-radius: 3px;
		color: #333;
		font: bold 14px/1 Verdana, Tahoma, Arial, sans-serif;
		padding: 7px 10px;
	}

	.mobile-drawer-head .mobile-drawer-close {
		background: linear-gradient(#fff, #f1f1f1 45%, #d8d8d8);
		border: 1px solid #9c9c9c;
		border-radius: 4px;
		box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .25);
		color: #333;
		cursor: pointer;
		font: bold 24px/1 Verdana, Tahoma, Arial, sans-serif;
		height: 44px;
		padding: 0 0 3px;
		width: 44px;
	}

	.mobile-drawer-head .mobile-drawer-close:focus-visible {
		outline: 2px solid var(--mobile-green);
		outline-offset: 1px;
	}

	/* Menu drawer: full-width Travian list rows. */
	div#side_navi p {
		border-bottom: 1px solid #d5d5d5;
		margin: 0 0 8px;
		padding: 0;
	}

	div#side_navi p br {
		display: none;
	}

	div#side_navi p a {
		align-items: center;
		background: none;
		border-top: 1px solid #eee;
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		line-height: 1.2;
		min-height: 44px;
		padding: 8px 16px;
		width: 100%;
	}

	div#side_navi p a:first-child {
		border-top: 0;
	}

	div#side_navi p a:hover,
	div#side_navi p a:focus,
	div#side_navi p a:active {
		background: var(--mobile-green-light);
		box-shadow: inset 4px 0 0 var(--mobile-green);
		/* lang/en/compact.css sizes `div#side_navi a:hover` to the 113x20 desktop
		   sprite; touch triggers :hover before the click, so the row would shrink
		   under the finger and the click would land on the <p>. */
		height: auto;
		outline: none;
		width: 100%;
	}

	div#side_navi p input[type="text"] {
		border: 1px solid #b4b4b4;
		border-radius: 3px;
		box-sizing: border-box;
		display: block;
		font-size: 16px !important;
		height: 40px;
		margin: 2px 16px 10px;
		max-width: calc(100% - 32px);
		padding: 0 8px;
		width: calc(100% - 32px) !important;
	}

	div#side_navi > p:last-of-type,
	div#side_navi .ally-members,
	div#side_navi table {
		box-sizing: border-box;
		max-width: 100%;
	}

	div#side_navi .ally-members {
		padding: 0 16px 8px;
	}

	div#side_navi .ally-members a {
		align-items: center;
		display: flex;
		min-height: 44px;
	}

	div#side_navi > p > div,
	div#side_navi table {
		padding: 0 16px;
	}

	/* Info drawer: village list ------------------------------------------- */
	div#side_info table#vlist {
		box-sizing: border-box;
		font-size: 14px;
		width: 100%;
	}

	div#side_info table#vlist thead,
	div#side_info table#vlist tbody {
		display: block;
		width: 100%;
	}

	div#side_info table#vlist thead td {
		font-size: 16px;
		padding: 8px 0;
	}

	div#side_info table#vlist tbody tr.village-res-labels {
		display: none;
	}

	div#side_info table#vlist tbody tr:not(.village-res-labels) {
		border-bottom: 1px solid #ddd;
		border-radius: 3px;
		display: grid;
		grid-template-columns: 22px minmax(0, 1fr);
		min-height: 44px;
		padding: 6px 0 8px;
	}

	div#side_info table#vlist tbody tr:not(.village-res-labels) > td {
		box-sizing: border-box;
		padding: 0;
	}

	/* Current village: Travian green. */
	div#side_info table#vlist tbody tr:has(> td.dot.hl) {
		background: var(--mobile-green-light);
		box-shadow: inset 4px 0 0 var(--mobile-green);
	}

	div#side_info table#vlist td.dot {
		color: #bbb;
		font-size: 18px;
		grid-column: 1;
		grid-row: 1 / span 2;
		padding-top: 10px;
		text-align: center;
	}

	div#side_info table#vlist td.dot.hl {
		color: var(--mobile-green);
	}

	div#side_info table#vlist td.link {
		grid-column: 2;
		grid-row: 1;
	}

	div#side_info table#vlist td.link a {
		align-items: center;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		min-height: 44px;
		padding: 4px 0;
	}

	div#side_info table#vlist tr:has(> td.dot.hl) td.link a {
		color: #2d5a0b;
	}

	div#side_info table#vlist td.aligned_coords {
		display: flex;
		flex-wrap: wrap;
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
		padding-left: 4px;
		position: static;
		width: auto;
	}

	div#side_info table#vlist td.aligned_coords > div {
		font-size: 13px;
	}

	div#side_info table#vlist td.aligned_coords .village-movements {
		align-items: center;
		display: flex;
		flex-basis: 100%;
		flex-wrap: wrap;
		gap: 6px;
		margin: 6px 0 0;
		position: static;
		white-space: normal;
	}

	div#side_info table#vlist .village-shortcuts {
		gap: 6px;
		margin: 0;
	}

	div#side_info table#vlist .village-shortcuts a {
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #bbb;
		border-radius: 4px;
		height: 44px;
		padding: 7px;
		width: 44px;
	}

	div#side_info table#vlist .village-storage {
		gap: 6px;
		margin: 0;
	}

	div#side_info table#vlist .village-store {
		gap: 5px;
	}

	div#side_info table#vlist .village-res {
		height: 28px;
		width: 28px;
	}

	div#side_info table#vlist .village-res > .village-donut {
		height: 24px;
		width: 24px;
	}

	div#side_info table#vlist .village-builds {
		gap: 2px;
		margin: 0;
	}

	div#side_info table#vlist .village-build img.bau {
		height: 22px;
		width: 22px;
	}

	div#side_info table#vlist a.village-attack {
		align-items: center;
		background: #fafafa;
		border: 1px solid #ddd;
		border-radius: 4px;
		display: inline-flex;
		font-size: 13px;
		min-height: 44px;
		padding: 5px 8px;
	}

	div#side_info table#vlist .village-chart-tip {
		font-size: 13px;
		max-width: calc(100vw - 80px);
		white-space: normal;
	}

	/* Other side panels (quest, chat, news, links) must fit the drawer. */
	div#side_info > *,
	div#side_info div.news {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		max-width: 100% !important;
	}

	div#side_info table {
		max-width: 100%;
	}

	/* Resource bar ---------------------------------------------------------- */
	div#res,
	body.mod1 div#res,
	body.mod2 div#res,
	body.mod3 div#res {
		background: linear-gradient(#fff, #f4f4f4);
		border-bottom: 1px solid #c4c4c4;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
		box-sizing: border-box;
		height: var(--mobile-resource-height);
		left: 0;
		min-height: 0;
		min-width: 0;
		overflow: hidden;
		padding: 0 calc(var(--mobile-safe-right) + 4px) 0 calc(var(--mobile-safe-left) + 4px);
		position: fixed;
		right: 0;
		top: calc(var(--mobile-chrome-top) + var(--mobile-header-height) + 1px);
		width: auto;
		z-index: 999;
	}

	div#res.res-eta-open {
		height: auto;
		overflow: visible;
	}

	div#resWrap {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		left: 0;
		margin: 0;
		padding: 0;
		position: static;
		width: 100%;
	}

	#mobile-production {
		align-items: center;
		box-sizing: border-box;
		color: #555;
		display: flex;
		font: 11px/20px Verdana, Tahoma, Arial, sans-serif;
		gap: 10px;
		grid-column: 1;
		grid-row: 1;
		height: 20px;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
	}

	#mobile-production .mobile-production-label {
		display: none;
	}

	#mobile-production .mobile-production-item {
		align-items: center;
		display: inline-flex;
		flex: 0 1 auto;
		gap: 2px;
		min-width: 0;
	}

	#mobile-production img {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	#mobile-production .res-negative,
	div#res td.res-negative {
		color: #c00;
		font-weight: bold;
	}

	#resWrap .res-gold {
		align-items: center;
		display: flex;
		font-size: 11px;
		grid-column: 2;
		grid-row: 1;
		height: 20px;
		left: auto !important;
		line-height: 20px;
		padding-left: 6px;
		position: static !important;
		top: auto !important;
	}

	/* Hide the letter-by-letter "Gold" label: the coin icon says it. */
	#resWrap .res-gold > span,
	#resWrap .res-gold font > span {
		display: none;
	}

	#resWrap .res-gold img {
		margin-right: 2px;
	}

	div#res table,
	div#res table tbody {
		box-sizing: border-box;
		display: block;
		margin: 0;
		width: 100%;
	}

	div#res table {
		cursor: pointer;
		grid-column: 1 / -1;
		grid-row: 2;
		-webkit-tap-highlight-color: rgba(113, 208, 0, .2);
	}

	div#res table:focus-visible {
		outline: 2px solid var(--mobile-green);
		outline-offset: -2px;
	}

	/* Stock: icon + amount/capacity pairs, then the ETA hint. */
	div#res table tr {
		align-items: start;
		column-gap: 3px;
		display: grid;
		grid-template-columns: repeat(5, 18px minmax(0, 1fr)) auto;
	}

	div#res table td {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		font: 11px/1.2 Verdana, Tahoma, Arial, sans-serif;
		height: 26px;
		min-width: 0;
		padding: 0;
		white-space: nowrap;
	}

	div#res table td:nth-child(2n) {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		overflow: hidden;
	}

	div#res table td:nth-child(2n) > span:not(.res-eta) {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	div#res table td img {
		margin: 0 !important;
	}

	div#res table tr::after {
		align-self: center;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #b4b4b4;
		border-radius: 3px;
		color: #555;
		content: "\23F1\00A0\25BE";
		font: bold 10px/18px Verdana, Tahoma, Arial, sans-serif;
		padding: 0 4px;
		white-space: nowrap;
	}

	div#res.res-eta-open table tr::after {
		background: linear-gradient(#f3fbea, #c6e5a3);
		border-color: var(--mobile-green-dark);
		content: "\23F1\00A0\25B4";
	}

	#resWrap .res-eta {
		display: none !important;
	}

	div#res.res-eta-open #resWrap .res-eta {
		color: #555;
		display: block !important;
		font-size: 10px;
		line-height: 12px;
	}

	div#res.res-eta-open table td {
		height: auto;
		min-height: 26px;
		padding-bottom: 3px;
	}

	/* Desktop clock / page timing are replaced by #mobile-server-clock. */
	div#ltime,
	div#stime {
		display: none;
	}

	/* Footer ---------------------------------------------------------------- */
	div#footer {
		box-sizing: border-box;
		height: auto;
		margin-top: 20px;
		min-width: 0;
		position: static;
		width: 100%;
	}

	div#footer div#mfoot {
		background-image: none !important;
		box-sizing: border-box;
		height: auto;
		padding: 12px calc(var(--mobile-safe-right) + 12px) calc(var(--mobile-safe-bottom) + 16px) calc(var(--mobile-safe-left) + 12px);
		width: 100%;
	}

	div#footer div#mfoot div.copyright {
		text-align: center;
	}

	/* Footer switch to the classic (desktop) layout; Templates/footer.tpl. */
	div#footer #rvian-layout-switch {
		display: block;
		margin-top: 10px;
		text-align: center;
	}

	/* Same look as the Menu/Info drawer toggles. */
	div#footer #rvian-layout-switch a {
		align-items: center;
		background: linear-gradient(#fff, #f1f1f1 45%, #d8d8d8);
		border: 1px solid #9c9c9c;
		border-radius: 4px;
		box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .2);
		box-sizing: border-box;
		color: #333;
		display: inline-flex;
		font: bold 11px/1 Verdana, Tahoma, Arial, sans-serif;
		height: 44px;
		justify-content: center;
		padding: 0 16px;
		text-decoration: none;
		text-shadow: 0 1px 0 #fff;
		touch-action: manipulation;
	}

	div#footer #rvian-layout-switch a:active {
		background: linear-gradient(#f3fbea, var(--mobile-green-light) 45%, #c6e5a3);
		border-color: var(--mobile-green-dark);
		color: #2d5a0b;
	}

	div#footer #rvian-layout-switch a:focus-visible {
		outline: 2px solid var(--mobile-green);
		outline-offset: 2px;
	}

	.footer-stopper {
		display: none;
	}
}

/* Phones (portrait): toggles + clock row above the icon row. ------------- */
@media screen and (max-width: 600px) {
	:root {
		--mobile-header-height: 108px;
		--mobile-resource-height: 74px;
		--mobile-icon-size: 48px;
	}

	div#mtop,
	body.mod1 div#mtop,
	body.mod2 div#mtop,
	body.mod3 div#mtop {
		gap: clamp(2px, calc((100vw - 300px) / 6), 14px);
		height: 56px;
		padding: 0 calc(var(--mobile-safe-right) + 6px) 0 calc(var(--mobile-safe-left) + 6px);
		top: calc(var(--mobile-chrome-top) + 52px);
	}

	div#mobile-drawer-controls {
		height: 52px;
	}

	div#mobile-drawer-controls #mobile-server-clock {
		align-items: center;
		margin: 0 auto;
		text-align: center;
	}

	div#mobile-drawer-controls #mobile-info-toggle {
		margin-left: 0;
	}

	/* Stock in three columns; the ETA hint takes the free slot. */
	div#res table tr {
		grid-template-columns: repeat(3, 18px minmax(0, 1fr));
	}

	div#res table tr::after {
		grid-column: span 2;
		justify-self: end;
	}

	#mobile-production {
		gap: 6px;
		justify-content: space-between;
	}
}

@media screen and (max-width: 340px) {
	div#res table td,
	#mobile-production,
	#resWrap .res-gold {
		font-size: 10px;
		letter-spacing: -.2px;
	}
}

/* Landscape phones: one compact row each so the page keeps the screen. --- */
@media screen and (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
	:root {
		--mobile-header-height: 48px;
		--mobile-resource-height: 48px;
		--mobile-icon-size: 44px;
		--mobile-toggle-width: 66px;
	}

	#rvian-staging-banner {
		font-size: 11px !important;
		line-height: 18px !important;
	}

	div#mtop,
	body.mod1 div#mtop,
	body.mod2 div#mtop,
	body.mod3 div#mtop {
		gap: 6px;
		height: var(--mobile-header-height);
		padding: 0 calc(var(--mobile-safe-right) + var(--mobile-toggle-width) + var(--mobile-clock-width) + 20px) 0 calc(var(--mobile-safe-left) + var(--mobile-toggle-width) + 14px);
		top: var(--mobile-chrome-top);
	}

	div#mobile-drawer-controls {
		height: var(--mobile-header-height);
	}

	div#mobile-drawer-controls #mobile-server-clock {
		align-items: flex-end;
		margin: 0;
		text-align: right;
	}

	div#mobile-drawer-controls #mobile-info-toggle {
		margin-left: auto;
	}

	div#res table tr {
		grid-template-columns: repeat(5, 18px minmax(0, 1fr)) auto;
	}

	div#res table tr::after {
		grid-column: auto;
	}

	div#res table td {
		height: 26px;
	}

	#mobile-production {
		gap: 14px;
		justify-content: flex-start;
	}
}