/**
 * Home screen — mobile / tablet only
 * Devices: Android (~360–412), iPhone 12 Pro (390), iPhone XR (414), iPad Pro (1024)
 * Desktop styles are untouched (rules apply only inside these media queries).
 */

@import url("mobile-typography.css");

/* Shared: phones + tablets up to iPad Pro portrait */
@media screen and (max-width: 1024px) {
	html,
	body {
		height: 100%;
		min-height: 100%;
		background: transparent;
	}

	body {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
		text-align: center;
		overflow-x: hidden;
		/* no white gap below video / content */
		background-color: #000;
	}

	/* Full-bleed background video — covers entire viewport */
	video#bgvid {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 100% !important;
		min-height: 100% !important;
		object-fit: cover !important;
		-webkit-transform: none !important;
		transform: none !important;
		z-index: -100 !important;
	}

	/* Logo / header stays at top */
	.row {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center;
	}

	.row > [class*="col-"] {
		float: none !important;
		display: block;
		width: 100% !important;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding-left: 15px;
		padding-right: 15px;
	}

	.row img.img-responsive,
	.row img {
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.logo_text_bla {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Login / Register Now / System Requirements — horizontal + vertical center */
	.container {
		float: none !important;
		display: block !important;
		width: 90% !important;
		max-width: 480px !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		-webkit-transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		text-align: center !important;
		box-sizing: border-box;
		z-index: 2;
	}

	.container ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	.container ul a {
		display: block;
		text-align: center;
		float: none !important;
		width: 100%;
	}

	.container ul li {
		text-align: center;
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Pause control near bottom so it doesn’t overlap the centered box */
	body > center,
	.btn_click_p,
	.btn_click_p2 {
		position: relative;
		z-index: 2;
	}

	body > br {
		display: none;
	}

	.btn_click_p,
	.btn_click_p2 {
		display: inline-block;
		margin: 0 auto;
	}

	/* Keep Pause below the centered action box */
	body > center:last-of-type {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 28px;
		margin: 0;
		text-align: center;
	}
}

/* Phones: Android, iPhone 12 Pro, iPhone XR */
@media screen and (max-width: 428px) {
	.container {
		width: 92% !important;
		max-width: 440px !important;
		padding: 24px !important;
		margin: 0 !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		-webkit-transform: translate(-50%, -50%) !important;
	}

	.container ul li {
		padding: 14px 18px;
		font-size: 18px;
	}

	body > center:last-of-type {
		bottom: 20px;
	}
}

/* iPhone XR-specific width band */
@media screen and (min-width: 400px) and (max-width: 428px) {
	.container {
		max-width: 460px !important;
	}
}

/* iPhone 12 Pro band */
@media screen and (min-width: 375px) and (max-width: 399px) {
	.container {
		max-width: 440px !important;
	}
}

/* Narrow Android */
@media screen and (max-width: 374px) {
	.container {
		width: 94% !important;
		max-width: 360px !important;
		padding: 20px !important;
	}
}

/* iPad Pro (and similar tablets) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.container {
		width: 70% !important;
		max-width: 560px !important;
		margin: 0 !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		-webkit-transform: translate(-50%, -50%) !important;
	}

	.container ul li {
		padding: 16px 22px;
		font-size: 20px;
	}

	body > center:last-of-type {
		bottom: 40px;
	}
}

/* KMR TEEN home markup — .home-menu-box / .home-pause-wrap */
@media screen and (max-width: 1024px) {
	body.home-page {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-x: hidden;
		background-color: #000;
	}

	body.home-page .home-page-inner {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
		z-index: 1;
	}

	body.home-page .home-header {
		position: relative !important;
		top: auto;
		z-index: 2;
	}

	body.home-page .container.home-menu-box,
	body.home-page .home-menu-box {
		float: none !important;
		display: block !important;
		width: 90% !important;
		max-width: 480px !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		-webkit-transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		text-align: center !important;
		box-sizing: border-box;
		z-index: 2;
	}

	body.home-page .home-pause-wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 28px;
		margin: 0;
		text-align: center;
		z-index: 2;
	}
}

@media screen and (max-width: 428px) {
	body.home-page .container.home-menu-box,
	body.home-page .home-menu-box {
		width: 92% !important;
		max-width: 440px !important;
	}

	body.home-page .home-pause-wrap {
		bottom: 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	body.home-page .container.home-menu-box,
	body.home-page .home-menu-box {
		width: 70% !important;
		max-width: 560px !important;
	}

	body.home-page .home-pause-wrap {
		bottom: 40px;
	}
}