/* Roblox (2.32): /roblox/, /roblox/<game>/ and "More <game> scripts" on a script post. */

.rbx-i { display: inline-block; flex: none; vertical-align: -.125em; }

/* Breadcrumbs above the hero: dark, as there is no blue heading shape behind them here */
.rbx-crumbs { margin-bottom: .25rem; }
.rbx-crumbs .heading-bg { display: block; min-width: 0; color: #172021; }
.rbx-crumbs .heading-bg .speedbar { color: rgba(23, 32, 33, .55); }
.rbx-crumbs .heading-bg .speedbar a { color: #29b1d8; }
.rbx-crumbs .heading-bg .speedbar a:hover { color: #1aa1c7; }

/* ---------------------------------------------------------------- Hero */
.rbx-hero {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: 1.5rem; margin-bottom: 1.25rem;
	background-color: #0d1520; color: #fff;
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(13, 21, 32, .55);
}
.rbx-hero-bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover; opacity: .6;
}
.rbx-hero:not(.has-banner) .rbx-hero-bg { filter: blur(48px) saturate(1.5); transform: scale(1.5); opacity: .75; }
.rbx-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(9, 14, 22, .95) 0%, rgba(9, 14, 22, .82) 42%, rgba(9, 14, 22, .4) 100%),
		linear-gradient(0deg, rgba(9, 14, 22, .65) 0%, rgba(9, 14, 22, 0) 55%);
}
.rbx-hero-in {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem; align-items: center; padding: 1.25rem;
}
.rbx-hero-icon {
	width: 5.25rem; height: 5.25rem; object-fit: cover; align-self: start;
	border-radius: 1.25rem; background-color: #1b2533;
	box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 255, 255, .14);
}
.rbx-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .625rem; }
.rbx-tag {
	display: inline-flex; align-items: center; height: 1.625rem; padding: 0 .625rem;
	border-radius: .5rem; font-size: .75rem; font-weight: 700; line-height: 1;
	color: #fff; background-color: rgba(255, 255, 255, .13);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
a.rbx-tag { transition: background-color .2s ease; }
a.rbx-tag:hover { color: #fff; background-color: rgba(255, 255, 255, .24); }
.rbx-hero-title { margin: 0 0 .375rem; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.rbx-hero-sub { margin: 0 0 .875rem; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.rbx-hero-sub p { margin: 0 0 .5rem; }
.rbx-hero-sub p:last-child { margin-bottom: 0; }
.rbx-hero-sub strong { color: #fff; }
.rbx-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: rgba(255, 255, 255, .72); }
.rbx-stats li { display: inline-flex; align-items: center; gap: .375rem; margin: 0; }
.rbx-stats .rbx-i { opacity: .7; }
.rbx-stats b { font-size: 1.0625rem; color: #fff; }
.rbx-hero-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.rbx-hero-actions .rbx-btn { flex: 1 1 auto; }

@media (min-width: 48rem) {
	.rbx-hero-in { gap: 1.25rem 2rem; padding: 2rem; }
	.rbx-hero-icon { width: 8.5rem; height: 8.5rem; border-radius: 1.75rem; align-self: center; }
	.rbx-hero-title { font-size: 2.5rem; }
	.rbx-hero-actions .rbx-btn { flex: 0 0 auto; }
}
@media (min-width: 62rem) {
	.rbx-hero-in { grid-template-columns: auto minmax(0, 1fr) auto; padding: 2.5rem 2.75rem; min-height: 15rem; }
	.rbx-hero-icon { width: 10rem; height: 10rem; border-radius: 2rem; }
	.rbx-hero-title { font-size: 3rem; }
	.rbx-hero-actions { grid-column: auto; flex-direction: column; align-self: start; min-width: 12rem; }
	.rbx-stats { font-size: .875rem; }
	.rbx-stats b { font-size: 1.25rem; }
}

/* The hub's hero: no game picture, a gradient and three game icons */
.rbx-hero-hub { background-color: #142046; }
.rbx-hero-hub::before {
	background:
		radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at 10% 110%, rgba(41, 177, 216, .55) 0, rgba(41, 177, 216, 0) 45%),
		linear-gradient(120deg, #131c44 0%, #1f3aa0 50%, #2a8fd6 100%);
}
.rbx-hero-hub::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
.rbx-hero-hub .rbx-hero-in { grid-template-columns: minmax(0, 1fr); }
.rbx-hero-art { display: none; }
@media (min-width: 62rem) {
	.rbx-hero-hub .rbx-hero-in { grid-template-columns: minmax(0, 1fr) auto; }
	.rbx-hero-hub .rbx-hero-text { max-width: 40rem; }
	.rbx-hero-art { display: block; position: relative; width: 19rem; height: 12.5rem; margin-right: .5rem; }
	.rbx-hero-art img {
		position: absolute; width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: 1.5rem; background-color: #1b2533;
		box-shadow: 0 1.25rem 2.5rem rgba(4, 10, 30, .45), 0 0 0 3px rgba(255, 255, 255, .22);
	}
	.rbx-hero-art img:nth-child(1) { left: 0; top: 3rem; transform: rotate(-9deg); }
	.rbx-hero-art img:nth-child(2) { left: 5.25rem; top: .25rem; width: 8.5rem; height: 8.5rem; z-index: 1; transform: rotate(3deg); }
	.rbx-hero-art img:nth-child(3) { left: 11.25rem; top: 3.5rem; transform: rotate(11deg); }
}

/* ---------------------------------------------------------------- Buttons */
.rbx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	height: 3rem; padding: 0 1.25rem; border: 0; border-radius: .875rem; cursor: pointer;
	font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.rbx-btn:active { transform: scale(.98); }
.rbx-btn .rbx-i { width: 1.125rem; height: 1.125rem; }
.rbx-btn-play { color: #fff !important; background-color: #29b1d8; box-shadow: 0 .75rem 2rem -.25rem rgba(41, 177, 216, .55); }
.rbx-btn-play:hover { background-color: #1aa1c7; }
.rbx-btn-ghost { color: #fff; background-color: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.rbx-btn-ghost:hover { color: #fff; background-color: rgba(255, 255, 255, .18); }
.rbx-btn-light { color: #172021; background-color: #fff; box-shadow: 0 0 0 1px rgba(23, 32, 33, .1), 0 .5rem 1rem -.5rem rgba(0, 0, 0, .1); }
.rbx-btn-light:hover { color: #29b1d8; box-shadow: 0 0 0 1px rgba(41, 177, 216, .4), 0 .75rem 1.5rem -.75rem rgba(41, 177, 216, .4); }

/* ---------------------------------------------------------------- Summary, tools */
.rbx-summary { padding: 1.125rem 1.375rem; margin-bottom: 1.25rem; font-size: .9375rem; line-height: 1.65; color: rgba(23, 32, 33, .8); }
.rbx-summary p { margin: 0 0 .5rem; }
.rbx-summary p:last-child { margin-bottom: 0; }
.rbx-summary strong { color: #172021; }
.rbx-summary a { color: #29b1d8; font-weight: 700; }
.rbx-summary a:hover { color: #1aa1c7; }

.rbx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.rbx-search {
	flex: 1 1 18rem; display: flex; align-items: center; gap: .625rem; height: 3rem; padding: 0 1rem; margin: 0;
	border-radius: .875rem; background-color: #fff; color: rgba(23, 32, 33, .45); cursor: text;
	box-shadow: 0 0 0 1px rgba(23, 32, 33, .09), 0 .5rem 1rem -.5rem rgba(0, 0, 0, .07);
	transition: box-shadow .2s ease;
}
.rbx-search:focus-within { box-shadow: 0 0 0 2px #29b1d8, 0 .75rem 1.5rem -.75rem rgba(41, 177, 216, .45); color: #29b1d8; }
.rbx-search .rbx-i { width: 1.125rem; height: 1.125rem; }
.rbx-search input[type="search"] {
	flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 0; margin: 0;
	border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none;
	font: inherit; font-size: .9375rem; color: #172021;
}
.rbx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rbx-filter {
	display: inline-flex; align-items: center; gap: .375rem; height: 2.5rem; padding: 0 1rem;
	border-radius: 2rem; font-size: .875rem; font-weight: 700; color: #172021; background-color: #fff;
	box-shadow: 0 0 0 1px rgba(23, 32, 33, .09); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.rbx-filter span { font-weight: 400; opacity: .55; }
.rbx-filter:hover { color: #29b1d8; box-shadow: 0 0 0 1px rgba(41, 177, 216, .45); }
.rbx-filter.is-on { color: #fff; background-color: #172021; box-shadow: none; }
.rbx-sort { margin: 0; }
.rbx-sort select {
	height: 2.5rem; padding: 0 2.25rem 0 1rem; border: 0; border-radius: 2rem; cursor: pointer;
	-webkit-appearance: none; appearance: none; font: inherit; font-size: .875rem; font-weight: 700; color: #172021;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23172021' d='M7.4 9 12 13.6 16.6 9 18 10.4l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right .75rem center;
	box-shadow: 0 0 0 1px rgba(23, 32, 33, .09);
}
.rbx-count { margin: 0 0 .875rem; font-size: .8125rem; color: rgba(23, 32, 33, .55); }
.rbx-empty { padding: 2.5rem 1.5rem; text-align: center; }
.rbx-empty p { margin: 0 0 1rem; }
.rbx .navigation { margin-top: 2rem; }

/* ---------------------------------------------------------------- Section heads */
.rbx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.rbx-head .rbx-title { margin: 0; }
.rbx-more { display: inline-flex; align-items: center; gap: .25rem; font-size: .9375rem; font-weight: 700; color: #29b1d8; }
.rbx-more:hover { color: #1aa1c7; }
.rbx-more .rbx-i { transition: transform .2s ease; }
.rbx-more:hover .rbx-i { transform: translateX(3px); }
.rbx-find { flex: 0 1 20rem; height: 2.75rem; }
.rbx-none { margin: 1rem 0 0; color: rgba(23, 32, 33, .55); }
.rbx-all-wrap { margin: 1.25rem 0 0; text-align: center; }

/* ---------------------------------------------------------------- Script cards */
.rbx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 22.4375rem) { .rbx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 48rem) { .rbx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 62rem) { .rbx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.rbx-card { min-width: 0; }
.rbx-card-link {
	display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border-radius: 1rem; background-color: #fff; color: inherit;
	box-shadow: 0 1rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .035);
	transition: box-shadow .25s ease, transform .25s ease;
}
.rbx-card-link:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 1.25rem 2.5rem -.75rem rgba(41, 177, 216, .38), 0 0 0 1px rgba(41, 177, 216, .28); }
.rbx-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background-color: #e7eef0; }
.rbx-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.rbx-card-link:hover .rbx-card-media img { transform: scale(1.05); }
.rbx-card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 38%); }
.rbx-chips { position: absolute; left: .5rem; top: .5rem; right: .5rem; z-index: 1; display: flex; gap: .25rem; overflow: hidden; }
.rbx-chip {
	display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem; flex: none;
	border-radius: .5rem; font-size: .6875rem; font-weight: 700; line-height: 1; white-space: nowrap;
	color: #fff; background-color: rgba(10, 14, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rbx-chip .rbx-i { width: .75rem; height: .75rem; opacity: .85; }
.rbx-badge {
	position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
	display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem;
	border-radius: .5rem; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
	color: #fff; background-color: #3fc35a; box-shadow: 0 .25rem .75rem rgba(63, 195, 90, .45);
}
.rbx-badge .rbx-i { width: .75rem; height: .75rem; }
.rbx-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem .875rem; }
.rbx-card-title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	min-height: 2.6em; font-size: .875rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
}
.rbx-card-meta { display: flex; align-items: center; gap: .375rem; min-width: 0; margin-top: auto; font-size: .75rem; color: rgba(23, 32, 33, .6); }
.rbx-card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbx-card-meta .rbx-i { width: .875rem; height: .875rem; color: #29b1d8; }
.rbx-card-meta:empty { display: none; }
.rbx-card-game { flex: none; width: 1.25rem; height: 1.25rem; border-radius: .375rem; object-fit: cover; }
@media (min-width: 62rem) {
	.rbx-card-title { font-size: .9375rem; }
	.rbx-chip, .rbx-badge { height: 1.625rem; font-size: .75rem; }
}

/* ---------------------------------------------------------------- Game tiles */
.rbx-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 36rem) { .rbx-games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .rbx-games { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } }
.rbx-games[data-rbx-games]:not(.is-all):not(.is-filtering) .rbx-game:nth-child(n+19) { display: none; }
.rbx-games-row .rbx-game:nth-child(n+4) { display: none; }
@media (min-width: 36rem) { .rbx-games-row .rbx-game:nth-child(4) { display: flex; } }
@media (min-width: 62rem) { .rbx-games-row .rbx-game:nth-child(n+5) { display: flex; } }

.rbx-game {
	display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .5rem .5rem .625rem;
	border-radius: 1rem; background-color: #fff; color: inherit;
	box-shadow: 0 1rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .035);
	transition: box-shadow .25s ease, transform .25s ease;
}
.rbx-game[hidden] { display: none !important; }
.rbx-game:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 1.25rem 2.5rem -.75rem rgba(41, 177, 216, .38), 0 0 0 1px rgba(41, 177, 216, .28); }
.rbx-game-icon { display: block; overflow: hidden; aspect-ratio: 1; border-radius: .75rem; background-color: #e7eef0; }
.rbx-game-icon img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.rbx-game:hover .rbx-game-icon img { transform: scale(1.06); }
.rbx-game-name {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	min-height: 2.5em; margin-top: .375rem; padding: 0 .125rem; font-size: .8125rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
}
.rbx-game-meta { display: flex; flex-wrap: wrap; gap: .125rem .625rem; padding: 0 .125rem; font-size: .6875rem; color: rgba(23, 32, 33, .55); }
.rbx-game-meta span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.rbx-game-meta .rbx-i { width: .75rem; height: .75rem; color: #29b1d8; }
@media (min-width: 62rem) { .rbx-game-name { font-size: .875rem; } .rbx-game-meta { font-size: .75rem; } }

/* ---------------------------------------------------------------- On a script post */
.rbx-related { margin-top: .5rem; }
.rbx-more-games { margin-top: 2.5rem; }

/* Game, key, players, views in place of Name / Category / OS (2.36) */
.rbx-facts .f-app-meta-icon .rbx-i { width: 1.5rem; height: 1.5rem; }
.rbx-facts .block .rbx-fact-game, .rbx-facts .block .rbx-fact-row { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; }
.rbx-facts .block .rbx-fact-game { font-weight: 700; }
.rbx-fact-game img { flex: none; border-radius: .375rem; object-fit: cover; }
.rbx-fact-ok { color: #22a447; font-weight: 700; }
.rbx-fact-warn { color: #d98a00; font-weight: 700; }
.rbx-fact-play { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; color: #fff; background: #3fc35a; }
.rbx-fact-play:hover { color: #fff; background: #34a94d; }
.rbx-fact-play .rbx-i { width: .75rem; height: .75rem; }