Roblox Galaxy by freeplay

/* 1.1.7
- Disabled game cards style on large tiles, as it was broken.
*/


/* ==UserStyle==
@name           ROBLOX GALAXY
@version        1.1.7
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/roblox/roblox-galaxy.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues


@var color bgColor "Background Color" #0a0a20
@var text customBG "Background Image: (link in quotes)" '""'
@var range customBGblur "Background Image: Blur" [0, 0, 30, 5, "px"]
@var range customBGopacity "Background Image: Opacity" [0.2, .1, 1, .1]
@var text boop "𝘿𝙞𝙨𝙖𝙗𝙡𝙞𝙣𝙜 𝙩𝙝𝙚 𝙤𝙥𝙩𝙞𝙤𝙣𝙨 𝙗𝙚𝙡𝙤𝙬 𝙘𝙖𝙣 𝙝𝙚𝙡𝙥 𝙬𝙞𝙩𝙝 𝙥𝙚𝙧𝙛𝙤𝙧𝙢𝙖𝙣𝙘𝙚" '"Okay!"'
@var checkbox cards "Full card hover animation" 1
@var checkbox blur  "Blur Effects" 1
@var text donate "Donate" `"https://www.buymeacoffee.com/Freeplay"`
==/UserStyle== */

@-moz-document regexp(".+roblox.com\\/(?!.*develop).*") {

	@keyframes fadeIn {
		from { transform: scale(.98); opacity: 0; }
		to { transform: none; opacity: 1; }
	}
	@keyframes slideUpIn {
		from { transform: translateY(5px); opacity: .2; }
		to { transform: none; opacity: 1; }
	}
	@keyframes slideRightIn {
		from { transform: translateX(-20px); opacity: 0; }
		to { transform: none; opacity: 1; }
	}
	@keyframes scaleIn {
		from { transform: scale(1.2); filter: opacity(0) }
		to { transform: none; filter: opacity(1); }
	}
	
	html {
		scrollbar-color: rgba(100,100,100,0.5) transparent;
	}
	* {
		transition: border .05s, background-color .2s, color .2s, opacity .2s;
	}
	noBlurColor = rgba(#190f18, .9);
	noBlurColor = rgba(darken(desaturate(bgColor, 20%), 20%), .9);
	
	
	#rbx-body {
		--bg: bgColor;

		&::before {
			content: "";
			position: fixed;
			inset: -20vw;
			// z-index: -1;
			background-size: cover;
			opacity: .15;
			transition: transform 1s;
			transform: scale(2);
			pointer-events: none;
			z-index: -1;
			background-image: url("https://tr.rbxcdn.com/8ef4e11f2ab05d6f7e91db29387bc050/420/420/Decal/Png");
		}
		&:hover:before {
			transform: scale(1);
		}
		&:not([data-internal-page-name="GameDetail"]):not(.light-theme)::after {
			content: "";
			position: fixed;
			inset: 0;
			background-size: cover;
			transition: transform 1s;
			transform: scale(1.03);
			pointer-events: none;
			z-index: -2;
			background-image: url(customBG);
			filter: blur(customBGblur);
			opacity: customBGopacity;
		}
		&:hover:after {
			transform: scale(1);
		}
		footer {
			background: none;
			z-index: 5;
			position: relative;
			.copyright-container {
				border: 0;
				padding-top: 0;
				display: flex;
				align-items: center;
				p {
					text-align: right;
					color: white !important;
				}
			}
			a {
				color: white !important;
			}
		}
	}
	
	#rbx-body.dark-theme {
		margin-bottom: 0;
		transition: background-color .2s;
		background-color: var(--bg) !important;
		
		.section-content:not(.remove-panel), .stack-row {
			background-color: rgba(0,0,0,0.2) !important;
			animation: slideUpIn 1s;
		}
		.btn-control-sm {
			background-color: rgba(0,0,0,0.4) !important;
			border-color: rgba(255,255,255,.2) !important;
			border: 0;
			padding: 16px !important;
		}
		.thumbnail-2d-container, .section-content-off, .nav-tabs, .nav-tabs > li a {
			background: none !important;
		}
		
		
		h2 {
			font-weight: 300 !important;
		}
		h3 {
			font-weight: 400;
			font-size: 1em;
			opacity: .8;
		}
		.container-header, .game-home-page-carousel-title {
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			// align-items: center;
			margin-bottom: 12px !important;
			margin-top: 10px;
			text-transform: uppercase;
			transition: opacity .2s;
			animation: fadeIn 1s;
			font-size: .9em;
			position: relative;
			z-index: 2;
			& > .ng-scope {
				display: contents;
			}
			h3, a:first-child {
				flex-grow: 1;
				padding-bottom: 0 !important;
				font-size: 1em;
				font-weight: 500 !important;
			}
			a, span {
				font-weight: 500 !important;
				align-self: center;
				font-size: .9em;
				&::after {
					margin-top: -1px;
				}
			}
			// &::before {
			// 	content: ""
			// 	display: flex;
			// 	width: 0px;
			// 	border-top: 1px solid currentcolor;
			// 	margin: auto 0;
			// 	opacity: 0;
			// 	transition: width .3s, margin .2s, opacity .2s;
			// }
			// a:focus &::before, a:hover &::before {
			// 	width: 10px;
			// 	border-top: 1px solid currentcolor;
			// 	margin: auto 10px;
			// 	opacity: 1;
			// }
		}
	}

    &::-webkit-scrollbar {
        // opacity: 0;
        // transition: opacity .2s;
        // background: none;
        // background: none;
        width: 12px;
        padding: 4px;
        opacity: 0;
    }
    &::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 100px;
        transition: background-color .2s;
    }
    :hover::-webkit-scrollbar {
        width: 12px;
        opacity: 1;
    }
    :hover::-webkit-scrollbar-thumb {
        background-color: rgba(100,100,100,0.2);
    }
	
	#wrap, .nav-container {
		display: flex;
		flex-wrap: wrap;
		overflow: visible;
		max-width: 100%;
		#container-main {
			max-width: 100%;
			width: 10px;
			flex-grow: 1;
		}
		#games-carousel-page {
			// padding: 0 20px;
		}
	}
	
	#navigation-container {
		background: none !important;
		position: sticky;
		z-index: 6;
		left: 0;
		#skip-to-main-content:not(:focus) {
			transform translateY(-300%)
		}
		#header {
			background: none;
			border: 0;
			margin: 18px 18px;
			/ [data-internal-page-name="Create"] & {
				filter: invert(1)
				bgColor = white !important
				img {
					filter invert(1)
				}
			}
			
			& > .container-fluid {
				display: flex;
			}
			
			#header-menu-icon {
				outline: none !important;
			}
			
			.rbx-navbar-header, .navbar-left, .navbar-right {
				// margin-right: auto !important;
				float: unset !important;
			}
			
			.rbx-navbar-header::before, .navbar-right::before {
				content: "";
				display: flex;
				position: absolute;
				// background: black;
				box-shadow: 0 40px 100px var(--bg);
				opacity: .7;
				z-index: -1;
				bottom: calc(100% + 20px);
				/ [data-internal-page-name="Create"] & {
					filter: brightness(0)
				}
			}
			.navbar-right::before {
				box-shadow: 0 80px 100px #33173a !important;
				box-shadow: 0 80px 100px desaturate(lighten(bgColor, 8), 35%) !important;
			}
			
			.rbx-navbar-header {
				margin-right: auto;
				min-width: 90px;
				display: flex;
				flex-wrap: nowrap;
				position: relative;
				&::before {
					right: -60px;
					left: -120px;
					top: -300px;
					
				}
			}
			
			.rbx-navbar, #navbar-search-input {
				background: rgba(0,0,0,0.4);
				border-radius: 8px;
				height: 40px;
				padding: 0 4px;
				align-items: center;
				border: 0;
				if blur {
					backdrop-filter: blur(10px);
				} else {
					background-color: noBlurColor;
				}
				
				margin: 0;
				
				/ [data-internal-page-name="Create"] & {
					filter saturate(0)
				}
				
			}
			
			.rbx-navbar {
				width: auto !important;
				flex-shrink: 100;
				overflow: auto hidden;
				scrollbar-width: none;
				li {
					text-align unset !important
					// display: contents;
					a {
						font-weight: 400 !important;
						font-size: .95em;
						opacity: .9;
						padding: 4px 14px;
						white-space: nowrap;
					}
					
					position: relative;
					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: 0;
						top: 12px;
						bottom: 12px;
						border-left: 1px solid rgba(100,100,100,0.2);
					}
					&:hover {
						background: rgba(100,100,100,0.2);
						border-radius: 8px;
						border: 0;
					}
				}
			}
			
			.navbar-left {
				float: unset !important;
			}
			
			.navbar-search {
				background: none !important;
				margin: 0 18px;
				width: 12px;
				transition: width .2s, margin .4s;
				// overflow: hidden;
				#navbar-search-input {
					padding-left: 40px;
					font-size: .9em;
					max-width: 100%;
					cursor: pointer;
				}
				.input-addon-btn {
					height: 40px !important;
					width: 45px !important;
					display: flex;
					justify-content: center;
					pointer-events: none;
				}
				#navbar-search-clear-btn {
					margin: 6.5px;
					margin-right: -25px;
					opacity: 0;
					pointer-events: none;
					transition: margin .2s, opacity .1s;
				}
				&:focus-within {
					width: 350px;
					margin: 0 25px;
					#navbar-search-input {
						cursor: text;
					}
					#navbar-search-btn {
						pointer-events: all;
					}
					#navbar-search-clear-btn {
						margin-right: 6.5px;
						opacity: 1;
						pointer-events: all;
					}
				}
			}
			#right-navigation-header {
				display: contents;
			}
			.navbar-right {
				// backdrop-filter: blur(10px);
				border-radius: 100px;
				margin-left: auto;
				float: unset !important;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				height: 40px;
				position: relative;
				&::before {
					right: -160px;
					left: -60px;
					top: -200px;

				}
				li > span > span, #nav-ns-icon {
					display: flex;
					align-items: center;
				}
				.age-bracket-label {
					padding: 0;
				}
				.age-bracket-label .age-bracket-label-username {
					display: none;
				}
			}
			
			
		}
		
		#left-navigation-container {
			display: contents;
		}
		#navigation {
			display: block !important;
			position: sticky;
			top: 0px;
			left: 0px;
			visibility: visible !important;
			max-height: 100vh;
			height: 100vh;
			overflow: hidden scroll;
			scrollbar-color: transparent transparent;
			/ [data-internal-page-name="Create"] & {
				filter: invert(1)
				--bg: white
				--noBlurColor: rgba(10,10,10, 1) !important;
				img {
					filter invert(1)
				}
			}
			&:hover, &:focus-within {
				scrollbar-color: rgba(0,0,0,0.2) transparent;
			}
			box-shadow: none;
			background-color: rgba(0,0,0,0.2);
			if not blur {
				background-color: noBlurColor;
			}
			
			transition: width .3s cubic-bezier(0.55, 0.1, 0, 1), margin .5s, opacity .2s, padding .7s, scroll !important;
			// padding-left: 5px;
			box-sizing: border-box !important;
			opacity: 0;
			margin-left: -20px;
			margin-bottom: -400px !important;
			padding-top: 65px !important;
			
			
			.rbx-scrollbar {
				width: 100% !important;
			}
			.simplebar-content-wrapper {
				overflow: visible !important;
			}
			li {
				transition: all .5s !important;
				width: 100% !important;
			}
			&.nav-show {
				margin-left: 0px;
				width: 190px;
				padding-left: 6px;
				opacity: 1;
				if blur {
					backdrop-filter: blur(40px);
				}
				
			}
			.rbx-divider {
				display: none;
			}
			.rbx-scrollbar {
				height: auto !important;
				overflow: visible !important;
			}
			.simplebar-content-wrapper {
				overflow: visible !important;
			}
			.simplebar-track {
				display: none;
			}
			.left-col-list {
				width: 100%;
			}
			li {
				margin: 0;
			}
			.left-col-list .text-nav, ul a {
				padding: 5px 0;
				margin: 0 !important;
				& > div > span {
					transform: scale(.75);
					opacity: .8;
				}
				& > span:not(.avatar), & > .font-header-2 {
					margin-left: 7px;
					font-weight: 300 !important;
					font-size: .96em !important;
					opacity: .8;
				}
				& > .font-header-2 {
					font-weight: 500 !important;
				}
				&:hover {
					& > .font-header-2, span {
						opacity: 1;
					}
				}
				&#upgrade-now-button {
					margin: 1em .5em !important;
				}
			}
			.rbx-nav-sponsor {
				overflow: hidden;
				padding-bottom: 20px;
				img {
					border-radius: 8px;
				}
			}
		}
	}
	@media only screen and (min-width: 1688px) {
		#navigation {
			width: 220px !important;
			padding-top: 70px !important;
			margin: 0 !important;
			// margin-right: -100px !important;
			opacity: 1 !important;
			padding-left: 10px !important;
			backdrop-filter: blur(20px);
		}
	}
	// Fixes for create page
	#navContent {
		margin-left: auto;
		margin-right: auto;
		margin-top: 80px;
		width 100%
	}
	#BodyWrapper, #Body, #MyCreationsTab {
		background: none !important;
	}
	.alert-system-feedback .alert.alert {
		top: -100vh
	}
	
	
@media only screen and (min-width: 992px) {

	#container-main {
		flex-grow: 1;
		width: 0px;
		animation: fadeIn 1s;
		padding-bottom: 100px;
		position: sticky;
		bottom: 0;
	}
	.content {
		position: relative;
		padding: 0 40px;
		margin-left: auto !important;
		margin-right: auto !important;
		// margin: 0 40px;
		box-sizing: content-box;
		margin-top: 60px;
		// width: 0;
		flex-grow: 1;
		// min-width: calc(100% !important;
		// max-width: 1200px;
		background: none !important;
		scrollbar-width: none;
		display: grid;
		grid-template-columns: 1fr auto auto;
		// justify-content: center;
		justify-content: flex-end;
		& > div:not([id*="Skyscraper-"]) {
			width: 100%;
			grid-column: 1;
		}
		&::before {
			content: unset;
		}
		#Leaderboard-Abp {
			grid-row: 1;
			grid-column: 1 / span 2;
			margin-top: -30px !important;
			margin-bottom: 10px;
			// padding-top: 0 !important;
			// margin-bottom: 40px;
			& ~ [class*="-container"] {
				grid-row: 2;
			}
		}
		#Skyscraper-Abp-Right, #Skyscraper-Abp-Left {
			border-radius: 8px;
			margin: 0 !important;
			margin-left: 30px !important;
			margin-top: 40px !important;
			margin-right: -20px !important;
			transform: scale(.9);
			overflow: hidden;
			background: rgba(0,0,0,0.2);
			grid-column: 2;
		}
		#Skyscraper-Abp-Left {
			grid-row: 2;
			z-index: 2;
			&:empty {
				height: auto !important;
				max-width: 0 !important;
				min-height: unset;
				display: block !important;
				margin: 0 !important;
			}
		}
		#Skyscraper-Abp-Right {
			grid-row: 3;
			position: sticky;
			top: 60px;
		}
		#HomeContainer, .page-content {
			// float: left;
			grid-row: 2 / span 3;
			margin: auto;
		}
		#group-container {
			// grid-row: 1 / span 2;
		}
		#ItemPurchaseAjaxData {
			position: absolute;
		}
		
		
		#home-header {
			display: none;
		}
		
		
	}
	
	#HomeContainer {
		width: 100%;
		max-width: 1080px;
		// padding: 0 20px;
	}
	
	
}
	.content {
		background: none !important;
		padding: 0 40px;
	}
	.alert-container {
		width: max-content;
		margin: auto;
		max-width: 100%;
	}
	.alert-container .alert-info {
		background: rgba(200,50,50,0.5);
		margin: 60px 40px;
		margin-bottom: -40px !important;
		color: inherit;
		opacity: .9;
		padding: 15px;
		border-radius: 8px;
		backdrop-filter: blur(10px);
		
	}
	
	.alert-system-feedback .alert {
		top: -60px;
	}
	
	
	
	/* Games Page */
	#rbx-body[data-internal-page-name="GameDetail"] {
		overflow-x: hidden;
		.game-main-content {
			background: none !important;
			display flex
			flex-wrap wrap
			justify-content space-between
			gap 20px
			&::before, &::after {
				content unset !important
			}
		}
		#game-details-carousel-container {
			border-radius: 8px;
			background-color: rgba(0,0,0,0.4);
			overflow: visible !important;
			margin 0 auto
			img, iframe {
				border-radius: 8px;
			}
			.shimmer {
				opacity: .2;
				background-color: transparent !important;
			}
			// Use inactive slides as background
			.thumbnail-2d-container:not(.carousel-item-active) {
				&:last-child, &:nth-last-child(2) {
					opacity: 1 !important;
					pointer-events: none;
					// z-index: 9999;
					position: absolute;
					left: -1500px;
					top: -160px;
					right: -2020px;
					bottom: -400px;
					
					img {
						// background-position: ;
						// position: fixed;
						// mask: linear-gradient(black, rgba(0,0,0,0.5), rgba(0,0,0,0), transparent);
						// mask: -webkit-radial-gradient(circle closest-side top, #010101, #DE30F100, transparent);
						// mask: -moz-radial-gradient(circle closest-side top, #010101, #DE30F100, transparent);
						mask: radial-gradient(at 50% 0%, black, rgba(0,0,0,0.1), transparent, transparent) !important;
                        -webkit-mask: radial-gradient(at 50% 0%, black, rgba(0,0,0,0.1), transparent, transparent) !important;

						inset: 0;
						// background: radial-gradient(at 50% 0%, black, white) !important;
						opacity: .8 !important;
						// opacity: 0 !important
						// object-fit: contain;
						// object-position: 1200px 1200px;
						object-fit: cover;
						filter: blur(4px);
						transform: scale(1.01) translateY(0%) rotate(-.2deg);
						visibility: visible !important;
						z-index: 100;
						transition: transform 1s !important;
					}
				}
			}
		}
		.game-calls-to-action {
			background-color: rgba(0,0,0,0.4) !important;
			border-radius: 8px;
			padding: 25px !important;
			width: 300px;
			max-height: 360px;
			height auto !important
			flex-grow 1 !important
			// display: flex;
			flex-direction: column;
			justify-content: space-between;
			// align-items center
			// backdrop-filter: blur(10px);
			
			.game-title-container {
				display: flex;
				flex-direction: column;
				height 0
				flex-grow 1
				h2 {
					padding: 0 !important;
					font-weight: 700 !important;
				}
				.game-creator {
					order: -1;
					span, a {
						font-weight: 300 !important;
					}
					
				}
			}
			.game-buttons-container {
				// position: relative;
				top: unset;
				width: unset !important;
				padding: 0;
				.favorite-follow-vote-share {
					padding-top: 20px;
				}
				.social-media-share {
					display: none;
				}
			}
			
			
		}
		.content {
			display: grid;
			grid-template-columns: calc(100% - 240px) 200px;
			// grid-template-columns: calc(100% - 525px) 475px;
			grid-column-gap: 40px;
			* {
				grid-column: 1;
			}
			#game-detail-page {
				display: contents;
			}
			#Leaderboard-Abp {
				grid-row: 6 !important;
				margin: 0 !important;
				// grid-column: 1 / span 2;
			}
			.game-main-content {
				grid-column: 1 / span 2;
				grid-row: 2;
			}
			#Skyscraper-Abp-Right {
				position: static;
				grid-row: 5 / span 10;
				grid-column: 2;
				height: max-content;
				margin: 0 !important;
				width: 200px;
				transform: unset !important;
				max-width: unset !important;
				margin-top: 3em !important;
				padding: 20px;
				iframe {
					border-radius: inherit !important;
				}
			}
			.text {
				color: white;
			}
			.rbx-tabs-horizontal {
				display: contents;
				#horizontal-tabs {
					grid-column: 2;
					display: flex;
					flex-direction: column;
					grid-row: 3;
					background: none !important;
					li {
						width: 100%;
						margin-bottom: .5em;
						background: none !important;
						a {
							background-color: rgba(0,0,0,0.3) !important;
							border-radius: 8px;
							box-shadow: none !important;
							
							span {
								font-weight: 400 !important;
								opacity: .9;
							}
							&::before {
								content: unset !important;
							}
						}
						&.active a {
							background: linear-gradient(25deg, #396bde90, #313c9f90) !important;
							span {
								font-weight: 900 !important;
								opacity: 1 !important;
							}
						}
					}
				}
				.tab-content {
					display: contents;
				}
				#store, #game-instances {
					grid-row: 3;
				}
				.container-header {
					grid-row: 3;
					height: max-content;
					h3 {
						color: white !important;
						opacity: 1 !important;
						font-size: 1.2em;
						text-transform: capitalize;
					}

				}
				#about.active {
					display: contents;
					& > * {
						grid-column: 1;
					}
					.section-content, .section {
						&::before, &::after {
							content: unset !important;
						}
					}
					.game-about-container {
						display: contents;
						.container-header {
							display: none;
						}
						&::before {
							content: unset !important;
						}
						
						& > * {
							grid-column: 1;
						}
						& > .section-content {
							display: contents;
							.game-description {
								margin-top: 5px;
								grid-row: 3 / span 3;
								&:first-line {
									font-size: 1.2em;
									// font-weight: 700;
									line-height: 2em;
								}
							}
							& > * {
								grid-column: 1;
							}
							.game-stats-container {
								grid-row: 4;
								background-color: rgba(0,0,0,0.4);
								border-radius: 8px;
								border: 0 !important;
								padding: 20px;
							}
							.game-stat-footer {
								grid-row: 5;
							}
							.game-stats-container, .game-stat-footer {
								grid-column: 2;
								display: flex;
								flex-direction: column;
								li {
									width: 100%;
									display: flex;
									flex-direction: row;
									justify-content: space-between;
								}
							}
						}
					}
				}
			}
		}
		.hlist {
			flex-wrap: wrap;
			justify-content: flex-start;
		}
	}
	

	/* Avatar Images */
	.avatar-container {
		// margin-top: 16px !important;
		.avatar-card-link, .avatar-card-image, .thumbnail-2d-container, img {
			background: none !important;
			border-radius: 24px;
		}
		.avatar-card-link {
			background-color: rgba(0,0,0,0.2) !important;
		}
	}

	/* GAMES */
	#games-carousel-page {
		margin: 0 -40px;
		margin-left: -270px;
		padding: 0 40px;
		padding-left: 270px;
		width: calc(100% + 310px);
	}
	.game-carousel {
		height: auto;
		min-height: 235px;
		max-height: 235px;
		margin-bottom: 0;
		margin: 0 -8px;
		overflow: visible;
		display: flex;
		justify-content: space-between;
	}
	.games-list-container {
		margin: 0;
		flex-shrink: 1;
		justify-content: center;
		position: relative;
		
		&::before {
			content: "";
			background: rgba(100,100,100,0.1);
			background: linear-gradient(to bottom, rgba(50,50,120, .2), transparent);
			position: absolute;
			inset: -8px -12px;
			bottom: 0px;
			// right: 50%;
			opacity: 0;
			border-radius: 8px;
			z-index: -1;
			transition: opacity .2s, inset .3s;
		}
		&:hover:before, &:focus-within:before {
			opacity: 1;
			inset: -12px -16px;
			bottom: 0px;
		}
	}
	.horizontal-scroll-window {
		overflow: visible;
		max-width: 100%;
		
	}
	.scroller {
		z-index: 2;
		// width: 50px !important;
		// height: 50px !important;
		border-radius: 100px !important;
		justify-content: center;
		// margin-top: 100px;
	}
	.horizontal-scroller {
		margin: 0 !important;
	}
	.horizontally-scrollable {
		min-height: unset !important;
		height: auto !important;
		
		& ~ .scroller {
			margin-top: -5px;
			height: 210px !important;
			// width: 35px;
			padding: 0 15px;
			width: max-content !important;
			max-width: unset !important;
			z-index: 10;
			background-color: var(--bg) !important;
			transition: padding .2s, opacity .2s, margin .4s;
			
			.arrow {
				width: 0px;
				display: flex;
				justify-content: center;
				right: unset !important;
				left: unset !important;
				
				span {
					left: unset !important;
					right: unset !important;
				}
			}
			
			&:not(.disabled):hover, &:not(.disabled):focus {
				padding: 0 25px;
				background-color: noBlurColor !important;
			}
			&.prev {
				margin-left: -10px;
				border-radius: 0 24px 24px 0 !important;
			}
			&.next {
				margin-right: -70px;
				border-radius: 24px 0 0 24px !important;
			}
			&.disabled {
				opacity: 0;
				&.prev {
					margin-left: -30px;
				}
				&.next {
					margin-right: -90px;
				}
			}
			.spacer {
				display: none;
			}
		}
	}
	
	
	/* Cards */
	.game-cards:not(.group-list), .multi-row {
		overflow: visible !important;
		justify-content: center;
		display: flex;
		margin: 0 -13px;
		for row in (1..50) {
			.game-card:nth-child({row}) {
				animation: slideUpIn .7s .02s * row
			}
		}
		&.multi-row {
			flex-wrap: wrap;
			justify-content: flex-start;
		}
		
	}
	.game-tile {
		width: auto !important;
		padding: 0 !important;
	}
	.game-card-container:not([href*="roblox.com/groups/"]):not(.featured-grid-item-container):not(.featured-game-container) {
		if cards {
			perspective: 100px;
		}
		
		outline: none !important;
		position: relative;
		height: 220px !important;
		margin: 0 8px !important;
		padding-right: 0 !important;
		width: 150px !important;
		margin-bottom: 24px !important;
		--height: 200px;
		height: var(--height) !important;
		
		.game-card-link {
			box-shadow: 0 4px 4px rgba(0,0,0,0.2);
			display: flex !important;
			flex-direction: column;
			position: relative !important;
			width: 150px;
			margin: 0;
			height: var(--height);
			min-height: var(--height);
			transition: transform .5s, width .2s, height .2s, min-height .2s, margin .2s, margin-top .5s !important;
			background: rgba(0,0,0,0.2);
			overflow: hidden;
			border-radius: 6px;
			max-height: unset !important;
			
			.game-card-thumb-container,
			.game-card-thumb-container img, 
			.game-card-thumb-container, .game-card-thumb {
				object-fit: cover !important;
				transition: height .3s, width .2s !important;
				background-color: transparent !important;
				overflow: visible;
				max-height: unset;
				border-radius: 6px !important;
				padding: 0;
				height: calc(var(--height) - 90px);
				box-shadow: none;
				max-height: unset !important;
				transition: max-height .5s, width .3s, height .5s, margin .3s !important;
				&::before {
					content: unset !important;
				}
				img {
					height: var(--height) !important;
					object-fit: cover;
					animation: scaleIn 2s;
					border-radius: 6px;
				}
			}
			
			.game-card-avatar-slots {
				position: relative !important;
			}
			
			
		}
		.game-card-name,
		.game-card-info {
			padding: 0 8px !important;
			z-index: 5 !important;
			color: white !important;
			&.game-card-name {
				// margin-top: 0;
				font-weight: 800 !important;
				font-size: .9em;
				margin-top: -40px;
				padding-top: 50px !important;
				min-height: 90px !important;
				text-shadow: 0 0 9px black, 0 0 50px black;
				transition: margin .2s, padding .2s, font-weight .2s, font-size .2s, max-height .2s, min-height .2s !important;
			}
		} 
		.game-card-info, 
		.game-card-avatar-slots {
			position: absolute !important;
			padding-bottom: 8px !important;
			border-radius: 6px;
			z-index: 1 !important;
			white-space: nowrap;
			* {
				color: white !important;
			}
			.info-avatar {
				position: relative;
			}
			&::after {
				content: ""
				position: absolute;
				bottom: -6px;
				left: 0;
				right: 0;
				top: -150px;
				background: linear-gradient( transparent, rgba(0,0,0,.8) );
				z-index: -99999;
				transition: opacity .3s !important;
				border-radius: 6px !important;
			}
		}
		
		
		&:hover, &:focus, &:focus-within {
			z-index: 1 !important;
			.game-card-link {
				// transform: scale(1.1) translate3d(0,-5px,0) rotateX(1deg);
				if cards {
					transform: translate3d(0,-10px,0) rotateX(1deg);
				}
				
				box-shadow: 0 8px 24px rgba(0,0,0,0.6);
				margin: 0 -12px !important;
				margin-top: -8px !important;
				height: 255px !important;
				min-height: 255px !important;
				width: 174px;
				if blur {
					backdrop-filter: blur(10px);
				} else {
					background-color: noBlurColor;
				}
				
				.game-card-thumb-container,
				.game-card-thumb-container img, 
				.game-card-thumb-container, .game-card-thumb {
					height: 174px !important;
					width: 174px !important;
					margin-bottom: 5px;
				}
				.game-card-name {
					text-shadow: none !important;
					max-height: 35px !important;
					min-height: 35px !important;
					font-size: .8em;
					margin-top: 3px !important;
					padding-top: 0 !important;
				}
				.game-card-thumb-container {
					max-height: 174px;
				}
				.game-card-info::after, .game-card-avatar-slots::after {
					opacity: 0;
				}
				.game-card-avatar-slots {
					margin-bottom: -10px !important;
				}
				.game-card-info:not(.game-card-friend-info) {
					padding-bottom: 4px !important;
				}
			}
		}
		&:active {
			.game-card-link {
				if cards {
					transform: translate3d(0,-12px,0) scale(.95) !important;
				} else {
					transform: scale(.98) !important;
				}
				
				margin-top: 0;
				transition: transform .1s !important;
			}
		}
	}

	/*** STORE ***/
	[data-internal-page-name="Catalog"] {
		.hlist {
			// display: flex;
			// flex-wrap: wrap;
			// li {
			// 	flex-grow: 1;
			// }
			
			li {
				height: auto !important;
				a {
					width: 100% !important;
					margin: 0 !important;
					max-width: unset !important;
					thumbnail-2d {
						float: unset !important;
					}
					.item-card-thumb-container {
						height: auto !important;
						width: 100% !important;
						background: rgba(0,0,0,0.2) !important;
						.thumbnail-2d-container {
							height: auto !important;
							width: 100% !important;
							background: none !important;
						}
						img {
							height: auto !important;
						}
					}
				}
			}
			
		}
	}
	
	/*** OTHER PAGES ***/
	.premium-landing-page {
		width: 100% !important;
		border-radius: 60px;
		box-shadow: 0 12px 24px rgba(0,0,0,0.3);
		background: none !important;
		margin-top: 10vh !important;
		overflow: hidden;
		#subscription-container-base > div {
			background-color: transparent;
		}
	}
	
	/** POPUPS **/
	.anchor-show-desktop, .anchor-hide {
		z-index: 300 !important;
		opacity: 0;
		top: 50px !important;
		transition: top .2s, opacity .2s !important;
		&.anchor-show-desktop {
			top: 70px !important;
			opacity: 1;
			transform: none;
		}
		& > .layer {
			background: rgba(0,0,0,0.5);
			border-radius: 8px;
			padding-inline: 20px;
			backdrop-filter: blur(10px);
		}
	}
	.popover {
		background: rgba(0,0,0,0.5) !important;
		backdrop-filter: blur(10px) !important;
		box-shadow: 0 14px 30px rgba(0,0,0,.7) !important;
		transform: scale(.98) translateY(-10px);
		filter: opacity(.9);
		transition: transform .5s, filter .2s, opacity .5s;
		&:hover {
			transform:  translateY(-10px);
			filter: none;
		}
		&:active {
			transform: scale(.99) translateY(-10px);
			transition: transform .1s, filter .2s, opacity .5s !important;
		}
		.dropdown-menu {
			background: none !important;
		}
	}
	
	// Join Game
	@keyframes spinning {
		0% { transform: rotateZ(0); }
		90% { transform: rotateZ(360deg); }
		100% { transform: rotateZ(360deg); }
	}
	#simplemodal-overlay {
		backdrop-filter: blur(10px);
		animation: scaleIn .5s;
	}
	[class="modal-confirmation noImage protocolhandler-starting-modal simplemodal-data"] {
		animation: scaleIn 1s ease;
		.modal-content {
			background: none !important;
			border: 0 !important;
			box-shadow: none !important;
			
			.icon-logo-r-95 {
				animation: spinning 1.4s ease infinite;
				margin-bottom: 10px;
			}
			.spinner {
				display: none;
				
			}
			
		}
	}
	
	
	
	#rbx-body.light-theme:not([data-internal-page-name="Login"]) {
		&::after {
			content: "Please switch to Dark Mode in Roblox's settings, then re-enable the style.";
			position: fixed;
			inset: 0;
			z-index: 999999;
			backdrop-filter: blur(100px);
			display: flex;
			justify-content: center;
			align-items: center;
			color: white !important;
			font-weight: 600;
			font-size: 2vw;
		}
	}
	
	
}