/* The public site: a slim top bar over the random GeoPattern background, and the
   one-page home (hero, two cards, studio, footer). Loaded after Bootswatch Darkly
   and custom.min.css by templates/layout.html. */

:root {
	--site-panel: rgba(17, 19, 25, 0.88);
	--site-panel-border: rgba(255, 255, 255, 0.09);
	--site-muted: #aab0bb;
	--site-brand: #bb2121;
	--site-brand-hover: #dd2121;
	--site-steam-top: #2a475e;
	--site-steam-bottom: #1b2838;
	--site-steam-glow: #66c0f4;
	--site-frame-border: rgba(255, 255, 255, 0.18);
}

/* The background layer is fixed; everything else sits above it, in a frame at most
   1500px wide with a thin line down each side. Past 1500px the background shows on
   both sides of it. */
.site-page {
	position: relative;
	z-index: 1;
	max-width: 1500px;
	min-height: 100vh;
	margin: 0 auto;
	border-left: 1px solid var(--site-frame-border);
	border-right: 1px solid var(--site-frame-border);
}

/* --- top bar ------------------------------------------------------------------ */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(10, 11, 15, 0.9);
	border-bottom: 1px solid var(--site-panel-border);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.site-nav .navbar-brand {
	font-family: 'ModalHeaderFont', sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: var(--site-brand);
}

.site-nav .navbar-brand:hover,
.site-nav .navbar-brand:focus {
	color: var(--site-brand-hover);
}

.site-nav .nav-link {
	color: #dfe2e8;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
	color: #fff;
}

/* Admin link: only staff see it. */
.site-nav .nav-link.staff-link {
	color: var(--site-brand);
}

.site-nav .nav-link.staff-link:hover,
.site-nav .nav-link.staff-link:focus {
	color: var(--site-brand-hover);
}

.site-nav .nav-item + .nav-item-cta {
	margin-left: 8px;
}

@media (max-width: 767.98px) {
	.site-nav .nav-item + .nav-item-cta {
		margin: 8px 0 10px;
	}
}

/* --- buttons ------------------------------------------------------------------ */

.btn-steam {
	color: #fff;
	background: linear-gradient(135deg, var(--site-steam-top), var(--site-steam-bottom));
	border: 1px solid rgba(102, 192, 244, 0.35);
}

.btn-steam:hover,
.btn-steam:focus {
	color: #fff;
	border-color: var(--site-steam-glow);
	box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.25);
}

.btn-quiet {
	color: #e6e8ec;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--site-panel-border);
}

.btn-quiet:hover,
.btn-quiet:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

/* Inline SVG icons (templates/icon_steam.html): the icon font has no font files here. */
.btn .icon {
	width: 1.05em;
	height: 1.05em;
	margin-right: 7px;
	vertical-align: -0.15em;
}

/* --- hero --------------------------------------------------------------------- */

.site-hero {
	position: relative;
	height: clamp(300px, 60vh, 660px);
	overflow: hidden;
	background: #0b0c10;
	border-bottom: 1px solid var(--site-panel-border);
}

.site-hero .carousel,
.site-hero .carousel-inner,
.site-hero .carousel-item {
	height: 100%;
}

.site-hero .hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-hero .hero-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(8, 9, 12, 0.94) 0%, rgba(8, 9, 12, 0.45) 42%, rgba(8, 9, 12, 0) 72%);
}

.site-hero .hero-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 16px 30px;
	text-align: center;
}

/* A faint dark plate behind the title and subtitle, so they read over bright screenshots. */
.site-hero .hero-heading {
	display: inline-block;
	max-width: 100%;
	padding: 12px 30px 16px;
	background: rgba(0, 0, 0, 0.32);
	border-radius: 14px;
}

@media (max-width: 575.98px) {
	.site-hero .hero-heading {
		padding: 10px 16px 12px;
	}
}

.site-hero .hero-title {
	margin: 0;
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
	overflow-wrap: anywhere;
}

.site-hero .hero-subtitle {
	margin-top: 8px;
	color: var(--site-muted);
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.site-hero .hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.site-hero .carousel-control-prev,
.site-hero .carousel-control-next {
	z-index: 3;
	width: 8%;
}

.site-hero .carousel-indicators {
	z-index: 3;
	margin-bottom: 6px;
}

/* --- cards -------------------------------------------------------------------- */

/* The cards are flat. The outermost card of each row runs out to the frame's edge (a
   pseudo-element carries its background on) and has no padding on that side, so its
   content lines up with the top bar's, which sits in the same .container. Stacked cards
   run out both ways. clip stops the 100vw pseudo-elements from scrolling sideways. */
.site-main {
	padding-top: 28px;
	overflow-x: hidden;
	overflow-x: clip;
}

/* Keep a jumped-to card clear of the sticky top bar. */
#about,
#community,
#studio {
	scroll-margin-top: 84px;
}

/* Each card is a column, so its buttons sit on its bottom edge and line up across the
   row however long each card's text is. */
.site-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px;
	background: var(--site-panel);
	border: 1px solid var(--site-panel-border);
}

.site-panel::before,
.site-panel::after {
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 100vw;
	background: var(--site-panel);
	border-top: 1px solid var(--site-panel-border);
	border-bottom: 1px solid var(--site-panel-border);
}

.site-panel::before {
	right: 100%;
}

.site-panel::after {
	left: 100%;
}

/* The two cards sit side by side from lg, the studio blocks two by two from md. */
@media (min-width: 992px) {
	.site-cards > :first-child .site-panel {
		padding-left: 0;
		border-left: 0;
	}

	.site-cards > :first-child .site-panel::before {
		content: '';
	}

	.site-cards > :last-child .site-panel {
		padding-right: 0;
		border-right: 0;
	}

	.site-cards > :last-child .site-panel::after {
		content: '';
	}
}

@media (max-width: 991.98px) {
	.site-cards .site-panel {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-right: 0;
	}

	.site-cards .site-panel::before,
	.site-cards .site-panel::after {
		content: '';
	}
}

@media (min-width: 768px) {
	.site-studio > :nth-child(odd) .site-panel {
		padding-left: 0;
		border-left: 0;
	}

	.site-studio > :nth-child(odd) .site-panel::before {
		content: '';
	}

	.site-studio > :nth-child(even) .site-panel {
		padding-right: 0;
		border-right: 0;
	}

	.site-studio > :nth-child(even) .site-panel::after {
		content: '';
	}
}

@media (max-width: 767.98px) {
	.site-studio .site-panel {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-right: 0;
	}

	.site-studio .site-panel::before,
	.site-studio .site-panel::after {
		content: '';
	}
}

.site-panel h2 {
	margin-bottom: 12px;
	font-size: 1.25rem;
	color: #fff;
}

.site-panel p {
	color: var(--site-muted);
}

.site-panel > :last-child {
	margin-bottom: 0;
}

.site-panel .panel-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
}

/* Platforms, named, as a caption over the About card's Steam button. */
.site-panel .platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-bottom: 18px;
	color: var(--site-muted);
	font-size: 0.85rem;
}

.site-panel .platforms .icon {
	width: 15px;
	height: 15px;
	margin-right: 5px;
	vertical-align: -0.2em;
}

.site-invite {
	margin-bottom: 20px;
	padding: 14px 18px;
	background: rgba(42, 71, 94, 0.9);
	border: 1px solid rgba(102, 192, 244, 0.35);
	border-radius: 10px;
	color: #fff;
}

.site-invite code {
	padding: 2px 8px;
	font-size: 1.05rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 4px;
}

.site-studio {
	margin-top: 24px;
}

.site-studio .site-panel {
	color: var(--site-muted);
}

.site-studio a {
	color: #dfe2e8;
}

/* --- popups (login, account) ---------------------------------------------------- */

/* Flat like the cards, and solid: the hero's white title shows through any see-through. */
.site-modal .modal-content {
	color: var(--site-muted);
	background: rgb(17, 19, 25);
	border: 1px solid var(--site-panel-border);
	border-radius: 0;
}

.site-modal .btn-close {
	opacity: 0.75;
}

.site-modal .btn-close:hover,
.site-modal .btn-close:focus {
	opacity: 1;
}

.site-modal .modal-header {
	padding: 22px 22px 12px;
	border-bottom: 0;
}

.site-modal .modal-title {
	margin: 0;
	font-size: 1.25rem;
	color: #fff;
}

.site-modal .modal-body {
	padding: 0 22px;
}

.site-modal .modal-body h3 {
	margin: 18px 0 8px;
	font-size: 1rem;
	color: #fff;
}

.site-modal .modal-footer {
	gap: 8px;
	padding: 8px 22px 22px;
	border-top: 0;
}

.site-modal .modal-footer > * {
	margin: 0;
}

.site-modal strong {
	color: #fff;
}

.site-modal .form-label {
	margin-bottom: 6px;
}

.site-modal .form-control {
	margin-bottom: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--site-panel-border);
	border-radius: 0;
}

.site-modal .form-control:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--site-steam-glow);
	box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.25);
}

.site-modal .site-modal-messages p {
	margin-bottom: 12px;
}

/* The email line and its button side by side, wrapping on a phone. */
.site-modal .site-modal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.site-modal .site-modal-row p {
	flex: 1 1 220px;
	margin: 0;
}

.site-modal .site-modal-copy {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.site-modal .site-modal-copy .form-control {
	margin: 0;
}

.site-modal .site-modal-stats {
	margin-bottom: 0;
	font-size: 0.9rem;
}

/* --- footer ------------------------------------------------------------------- */

.site-footer {
	margin-top: 40px;
	padding: 26px 16px;
	text-align: center;
	color: var(--site-muted);
	font-size: 0.85rem;
	background: rgba(8, 9, 12, 0.92);
	border-top: 1px solid var(--site-panel-border);
}

.site-footer a {
	color: #dfe2e8;
}

.site-footer .legal {
	margin: 8px auto 0;
	max-width: 760px;
	font-size: 0.75rem;
	opacity: 0.8;
}

@media (max-width: 575.98px) {
	.site-panel {
		padding: 18px;
	}
}