/* Infinity RO responsive compatibility layer.
 * Loaded after the legacy desktop theme. It also removes the hard-coded
 * 1,500-3,000px legacy page heights which created empty scroll areas.
 */

html,
body {
	max-width: 100%;
}

img,
iframe,
video,
canvas {
	max-width: 100%;
}

/* Compact the shared legacy inner-page shell on every screen size. Home and
 * modern full-page views do not use this bg2 table pattern, so their custom
 * hero layouts remain untouched. */
body.bg2 {
	--infinity-legacy-hero-height: clamp(350px, 28vw, 430px);
}

body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"],
body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"],
body.bg2 > table.cc-page-table {
	height: auto !important;
}

body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:first-child > td,
body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:first-child > td,
body.bg2 > table.cc-page-table > tbody > tr:first-child > td {
	height: var(--infinity-legacy-hero-height) !important;
}

body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:nth-child(2) > td,
body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:nth-child(2) > td,
body.bg2 > table.cc-page-table > tbody > tr:nth-child(2) > td {
	height: auto !important;
	padding-bottom: 36px;
}

@media (max-width: 1170px) {
	body.bg2 {
		--infinity-legacy-hero-height: clamp(260px, 58vw, 420px);
	}

	html,
	body {
		width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden;
	}

	html {
		height: auto !important;
		min-height: 100% !important;
		overflow-y: auto !important;
	}

	body {
		height: auto !important;
		min-height: 100vh !important;
		overflow-y: visible !important;
	}

	body.bg1 {
		background-size: auto max(100vh, 760px);
		background-position: center top;
	}

	body.bg2 {
		background-size: max(100vw, 420px) auto;
		background-position: center top;
	}

	.navbar_menu,
	.navbar_menu .navbar_menu_bg {
		width: 100%;
		max-width: 100vw;
	}

	.navbar_menu .navbar_menu_bg {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.navbar_menu .navbar_menu_bg::-webkit-scrollbar {
		display: none;
	}

	.navbar_menu .container,
	.navbar_menu .row,
	.navbar_menu nav {
		width: max-content !important;
		min-width: 100%;
		max-width: none;
		margin: 0 !important;
		padding: 0 !important;
	}

	.navbar_menu ul,
	.navbar_menu nav > ul {
		display: flex;
		width: max-content !important;
		min-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap;
	}

	.navbar_menu nav > ul > li {
		flex: 0 0 auto;
	}

	.navbar_menu nav a {
		min-height: 56px;
		box-sizing: border-box;
		padding: 8px 16px;
	}

	body > table[width="1200"],
	body > table[width="1201"],
	#Table_01 {
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		table-layout: fixed;
	}

	body > table[width="1200"] > tbody > tr > td,
	body > table[width="1201"] > tbody > tr > td,
	#Table_01 > tbody > tr > td {
		width: auto !important;
		max-width: 100vw !important;
	}

	body > table img,
	#Table_01 img {
		max-width: 100%;
		height: auto;
	}

	body.bg2 > table > tbody > tr:first-child > td {
		height: clamp(260px, 58vw, 420px) !important;
	}

	body.bg2 > table > tbody > tr:first-child img[src*="logo"] {
		width: min(560px, 86vw) !important;
		height: auto !important;
	}

	body.bg2 > table > tbody > tr:nth-child(2) > td {
		height: auto !important;
		padding: 0 12px 32px;
	}

	body.bg2 .row {
		margin-right: 0;
		margin-left: 0;
	}

	body.bg2 .well,
	body.bg2 .breadcrumb {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.bg2 .well {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.page_footer,
	.page_main_footer,
	.footer_container {
		width: 100% !important;
		max-width: 100vw;
	}
}

@media (max-width: 767px) {
	.navbar_menu .navbar_menu_bg,
	.navbar_menu .navbar_container {
		height: 52px;
	}

	.navbar_menu nav a {
		min-height: 52px;
		padding: 7px 13px;
		font-size: 12px;
	}

	.navbar_menu nav span {
		font-size: 9px;
	}

	.main-header {
		font-size: clamp(24px, 8vw, 34px);
		line-height: 1.15;
	}

	.modal-lg,
	.show-reloadbox {
		width: calc(100vw - 24px) !important;
		max-width: 100% !important;
	}

	.table-responsive,
	body.bg2 .well .table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#Table_01 .infinity-home-hero {
		height: auto !important;
		min-height: min(690px, 100svh);
		padding: 64px 12px 28px;
		box-sizing: border-box;
	}

	#Table_01 .infinity-home-hero > p:nth-child(-n + 2) {
		display: none;
	}

	#Table_01 .infinity-home-hero img[src*="logo"] {
		width: min(560px, 92vw) !important;
		height: auto !important;
	}

	.infinity-hero-actions {
		width: min(100%, 520px);
		flex-direction: column;
		gap: 10px;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.infinity-hero-actions > a,
	.infinity-hero-play,
	.infinity-hero-register {
		width: 100%;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	#Table_01 .infinity-stones-section {
		height: auto !important;
		padding: 8px 0 20px;
		overflow: hidden;
	}

	#Table_01 .infinity-stones {
		width: 100% !important;
		height: auto !important;
		justify-content: flex-start;
		gap: 4px;
		padding: 4px 14px 16px;
		box-sizing: border-box;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	#Table_01 .infinity-stone-card {
		flex: 0 0 164px;
		width: 164px;
		margin-top: 0 !important;
		scroll-snap-align: center;
	}

	#Table_01 .infinity-home-features,
	#Table_01 .infinity-home-features > table,
	#Table_01 .infinity-home-features > table > tbody {
		display: block;
		width: 100% !important;
		height: auto !important;
		background: none !important;
	}

	#Table_01 .infinity-home-features tr {
		display: contents;
	}

	#Table_01 .infinity-home-features td {
		display: block;
		width: 100% !important;
		height: auto !important;
		padding: 6px 14px;
		box-sizing: border-box;
		text-align: center;
	}

	#Table_01 .infinity-home-features td:empty {
		display: none;
	}

	#Table_01 .infinity-home-features iframe {
		display: block;
		width: 100% !important;
		height: min(63vw, 360px) !important;
		border-radius: 16px;
	}

	#Table_01 .infinity-home-features .topmenu {
		width: min(100%, 445px) !important;
	}

	#Table_01 .infinity-home-separator {
		display: none;
	}

	#Table_01 .infinity-home-news,
	#Table_01 .infinity-home-news > table,
	#Table_01 .infinity-home-news > table > tbody,
	#Table_01 .infinity-home-news tr {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	#Table_01 .infinity-home-news td {
		display: none;
	}

	#Table_01 .infinity-home-news td:nth-child(2) {
		display: block;
		width: 100% !important;
		height: auto !important;
		padding: 12px !important;
		box-sizing: border-box;
	}

	#Table_01 .infinity-latest-update {
		width: 100%;
		margin: 0 auto 24px;
	}

	#Table_01 .infinity-home-ranking,
	#Table_01 .infinity-home-ranking > table,
	#Table_01 .infinity-home-ranking > table > tbody,
	#Table_01 .infinity-home-ranking tr {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	#Table_01 .infinity-home-ranking td {
		display: block;
		width: 100% !important;
		height: auto !important;
		padding: 6px 12px;
		box-sizing: border-box;
	}

	#Table_01 .infinity-home-ranking td:empty {
		display: none;
	}

	#Table_01 .infinity-home-ranking iframe {
		width: 100% !important;
		height: 390px !important;
	}
}

@media (orientation: landscape) and (max-height: 540px) {
	body.bg2:not(.member-page):not(.infinity-wallet-page) {
		--infinity-legacy-hero-height: 170px;
	}

	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:first-child > td,
	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:first-child > td,
	body.bg2 > table.cc-page-table > tbody > tr:first-child > td {
		padding-top: 54px;
		box-sizing: border-box;
	}

	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:first-child > td > p,
	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:first-child > td > p,
	body.bg2 > table.cc-page-table > tbody > tr:first-child > td > p {
		margin: 0;
	}

	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:first-child > td > p:nth-child(-n + 2),
	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:first-child > td > p:nth-child(-n + 2),
	body.bg2 > table.cc-page-table > tbody > tr:first-child > td > p:first-child {
		display: none;
	}

	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1200"] > tbody > tr:first-child img[src*="logo"],
	body.bg2:not(.member-page):not(.infinity-wallet-page) > table[width="1201"] > tbody > tr:first-child img[src*="logo"],
	body.bg2 > table.cc-page-table > tbody > tr:first-child img[src*="logo"] {
		width: min(300px, 46vw) !important;
	}

	.infinity-mobile-cta {
		display: none !important;
	}

	#Table_01 .infinity-home-hero {
		min-height: 520px;
	}
}