/* Shared phone/tablet fixes for the interstitial pages
   (login, new, friends, index, releases, save-editor).
   These pages use a fixed 555px box centred with a translate(-50%,-50%),
   which overflows a 375px phone screen and cannot be scrolled back into
   view. Override the inline positioning with !important and let the box
   shrink to the viewport. */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overscroll-behavior-y: contain;
	-webkit-tap-highlight-color: transparent;
}

/* Anchor taps register immediately (no 300ms delay) on touch screens. */
a,
button,
input,
select,
textarea,
label {
	touch-action: manipulation;
}

img {
	max-width: 100%;
	height: auto;
}

/* Nothing on these pages should be wider than the screen. */
.uiBoxWhite,
.uiInterstitial,
.uiInterstitialLarge,
.uiHeader,
.uiInterstitialBar {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	/* Defeat the inline `position:absolute; top:50%; left:50%; transform:
	   translate(-50%,-50%)` so the page scrolls normally on a phone. */
	body {
		position: static !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		width: auto !important;
		min-height: 100% !important;
		height: auto !important;
	}

	.uiInterstitialLarge {
		width: 100% !important;
	}

	.uiHeaderTitle,
	.uiHeaderTop,
	.uiHeader {
		white-space: normal;
		word-break: break-word;
	}

	/* Stack the header logo/title instead of letting them collide. */
	.uiHeaderTitle img {
		max-height: 16px;
		width: auto;
	}

	/* Buttons go full-width so they are easy to hit with a thumb. */
	.uiButton {
		display: block !important;
		width: 100% !important;
		margin: 6px 0 !important;
		padding: 9px 10px !important;
		text-align: center;
		box-sizing: border-box;
	}

	.uiButtonText {
		display: inline-block !important;
		float: none !important;
	}

	.uiInterstitialBar .rfloat,
	.uiInterstitialBar .lfloat {
		float: none !important;
		display: block !important;
	}

	.uiInterstitialBar {
		padding: 10px !important;
	}

	/* Account switcher on login/friends: one row per save, not a cramped
	   horizontal list. */
	.dropdown-menu li,
	.uiList li {
		display: block;
		width: 100%;
	}

	select,
	input[type="text"],
	input[type="password"],
	textarea {
		max-width: 100%;
		width: 100%;
		font-size: 16px; /* stops iOS Safari zooming on focus */
	}

	/* Wide data tables (save editor, friends list) scroll instead of
	   blowing the layout out. */
	.tablewrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 400px) {
	body {
		padding: 8px !important;
	}

	.uiHeaderBottomBorder h2 {
		font-size: 15px;
	}
}