/*
 * Phone and tablet layout for rop2.ro.
 * Every rule sits inside a max-width: 991.98px media query, so screens 992px and wider
 * (the current desktop design) never see any of it.
 */

@media (max-width: 991.98px) {
	/* Phones ignore or zoom a "fixed" cover background, so it scrolls with the page,
	   centred on the characters, with the image's own bottom colour below it */
	body {
		background-attachment: scroll;
		background-position: center top;
		background-size: 1200px auto;
		background-color: #120c18;
	}

	/* Top bar: login links, language and social icons centred, wrapping to two rows on phones */
	.topbar > .container {
		justify-content: center;
	}
	.topbar .navbar-text {
		padding: 6px 10px;
	}

	/* Main menu: the hamburger button sits on the right, clear of the characters, and the menu opens as a grid */
	.container > .navbar-expand-lg {
		justify-content: flex-end;
		margin-bottom: 0 !important;
	}
	.navbar-dark .navbar-toggler {
		margin: 8px 0;
		background: rgba(19, 16, 37, 0.75);
		border-color: rgba(218, 186, 76, 0.4);
	}
	/* The stock icon's SVG has an unescaped '#' in its data URI, so phones drew an empty box */
	.navbar-dark .navbar-toggler-icon {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23daba4c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	}
	.navbar-collapse .navbar-nav.w-50 {
		width: 100% !important;
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 0;
	}
	.navbar-collapse .navbar-nav > li.w-25 {
		width: 25% !important;
	}
	.navbar-collapse .navbar-brand {
		display: none;
	}
	.navbar-collapse.show,
	.navbar-collapse.collapsing {
		background: rgba(19, 16, 37, 0.95);
		border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	}

	/* Logo: full width, scaled down to fit */
	.container > .row.mb-6 {
		margin-bottom: 0 !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}
	.container > .row.mb-6 > .col-5 {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
	}
	.container > .row.mb-6 img {
		max-width: 85%;
		height: auto;
	}

	/* Columns stacked: page content first, then the two sidebars */
	.wrapper {
		margin-top: 1.5rem !important;
	}
	.wrapper > .sidebar,
	.wrapper > .content {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.wrapper > .content {
		order: -1;
		border-left: 1px solid #0f0f0f;
	}
	/* The dark strip on the content's left edge is the shadow of the desktop sidebar; stacked, it only hid the first letters */
	.wrapper > .content:before {
		display: none;
	}

	/* Slider keeps the picture's proportions (625x318) instead of a fixed 318px strip,
	   so the caption drawn in the picture is never cut at the edges */
	#carousel-first .carousel-inner .carousel-item {
		height: 51vw;
		background-size: cover !important;
		background-position: center !important;
	}
	@supports (aspect-ratio: 1) {
		#carousel-first .carousel-inner .carousel-item {
			height: auto;
			aspect-ratio: 625 / 318;
		}
	}

	/* Download / Itemshop / Forum buttons centred and never wider than the screen */
	.sidebar .btn-hover {
		display: block;
		text-align: center;
	}
	.sidebar .btn-hover img {
		max-width: 100%;
		height: auto;
	}

	/* Login box: the two links under the form span the box instead of a fixed 315px */
	.lost,
	.create-acc {
		width: auto;
		margin-right: -20px;
	}
	.side-petal-left:before {
		display: none;
	}

	/* Tables in the page (cashout, characters, rankings) get tighter cells, and if one is still
	   wider than the screen it scrolls sideways inside the page instead of widening the whole site */
	.wrapper > .content > .container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.content .table th,
	.content .table td {
		padding: 0.5rem 0.4rem;
	}

	/* Register / login forms: label above its field, so the 304px reCAPTCHA box fits on a phone */
	.content form .table tr,
	.content form .table td {
		display: block;
		width: 100%;
	}
	.content form .table td:first-child {
		padding-bottom: 0.25rem;
	}

	/* The fixed 250x250 Discord box would cover a big part of a phone screen */
	.discord-widget {
		display: none;
	}

	/* Footer links centred, without the 50px gaps meant for desktop */
	footer .col-12.text-right {
		text-align: center !important;
	}
	footer .list-inline {
		margin-top: 30px !important;
	}
	footer .list-inline-item {
		margin: 0 10px 10px;
	}
	.footer-link {
		margin-right: 0;
	}
	footer center {
		display: block;
		padding: 0 10px 20px;
	}
}

/* Tablets: content on top, the two sidebars side by side under it */
@media (min-width: 768px) and (max-width: 991.98px) {
	.wrapper > .sidebar {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Phones: menu in two columns so the labels fit */
@media (max-width: 575.98px) {
	.navbar-collapse .navbar-nav > li.w-25 {
		width: 50% !important;
	}
}

/* Narrow phones (360-399px): Google's reCAPTCHA box is a fixed 304px, so it is scaled down like the one in the sidebar */
@media (max-width: 399.98px) {
	.content .g-recaptcha {
		width: 268px;
		height: 69px;
		transform: scale(0.88);
		transform-origin: 0 0;
	}
}