MediaWiki:Common.css: Difference between revisions

Latest revision as of 10:44, 8 October 2024

	/* CSS placed here will be applied to all skins */

	/* FONTS */

	@font-face { 
		font-family: "Crikey Squat";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/Crikey%20Squats%20Regular.ttf") format("truetype");
	}
	@font-face { 
		font-family: "Rockwell";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/rockwell.ttf") format("truetype");
	}
	@font-face { 
		font-family: "Popit";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/Popit.TTF") format("truetype");
	}
	@font-face { 
		font-family: "ForkAwesome";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/forkawesome.ttf") format("truetype");
	}
	@font-face { 
		font-family: "Omnes SemiBold";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/Omnes%20SemiBold.ttf") format("truetype");
	}
	@font-face { 
		font-family: "Omnes Regular";
		font-style: "normal";
		src: url("https://wiki.imagisphere.me/resources/assets/fonts/Omnes%20Regular.ttf") format("truetype");
	}
	@font-face { 
		font-family: "Omnes Black";
		font-style: "normal";
 		src: url("https://wiki.imagisphere.me/resources/assets/fonts/omnesbla.ttf") format("truetype");
	}
	h1 { font-family: "Rockwell" !important }

	/* HIDDEN TALK PAGES */
	/* Main Page */
	body.page-Main_Page li#ca-talk,
	/* MediaWiki Namespace */
	body.ns-8 li#ca-talk,
	/* Help Namespace */
	body.ns-12 li#ca-talk,
	/* Category Namespace */
	body.ns-14 li#ca-talk,
	/* News Namespace */
	body.ns-3008 li#ca-talk { display:none!important; }

	/* SIDEBAR */
	div#p-Play a::before,
	div#p-Create a::before,
	div#p-Share a::before,
	div#p-Community a::before,
	nav#p-Play a::before,
	nav#p-Create a::before,
	nav#p-Share a::before,
	nav#p-Community a::before {
		display:inline-block;
		text-decoration: none;
		padding-right: .3em;
		font-family: "ForkAwesome";
	}
	li#n-Discord a::before {
		content: "\f2ef";
	}
	li#n-Twitter a::before {
		content: "\f099";
	}
	li#n-YouTube a::before {
		content: "\f16a";
	}

	.mw-indicators {
		margin-top: 32px;
	}

	/* MOBILE DESIGN */

	.mobile-hidden, .mobile-hidden-row { display: none; visibility: hidden; }
	.desktop-hidden, .desktop-hidden-row { display: block; visibility: visible; }
	@media screen and (max-width:1400px), screen and (max-height:500px) {
		.mobile-hidden-row { display: block; visibility: visible; }
		.desktop-hidden-row { display: none; visibility: hidden; }
	}
	@media screen and (max-width:1080px), screen and (max-height:500px) {
		.mobile-hidden { display: block; visibility: visible; }
		.desktop-hidden { display: none; visibility: hidden; }
	}

	/*
	* Code to (hopefully) make it so downscaled images don't look like complete garbage
	*/
	* {
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-crisp-edges;
		image-rendering: crisp-edges;
		image-rendering: crisp-edges;
		-ms-interpolation-mode:crisp-edges;
	}



	/* BOX DISPLAYS START HERE */

	/* WIKITABLE/PRETTYTABLE */
	table.wikitable, table.prettytable {
		margin: 1em 1em 1em 0;
		border: 1px #aaa solid;
		border-collapse: collapse;
	}
	.wikitable th, .wikitable td, .prettytable th, .prettytable td {
		border: 1px #aaa solid;
		padding:0.1em;
	}



	/* NAVBOX */
	table.navbox {
		border-radius: 0.2em;
		border: 2px solid #888;
	}
	.navbox th {
		background: #888;
		color: #000;
	}
	.navboxhead {
		background: #888 !important;
	}



	/* BREAKOUT BOX */
	.breakout {
		float: right;
		border: 2px solid #888;
		background: #fff;
		padding: 0;
		border-radius: 0.2em;
		font-size: 85%;
	}
	.breakout tr:nth-child(odd) {
		background-color: #ececec;
	}
	.breakoutreleases {
		background: #fff;
	}
	.breakoutreleases tr:nth-child(odd) {
		background-color: #ececec;
	}
	.breakouttitle {
		text-align: center;
		font-size: 110%;
		background: #888;
		border-top: 2px dashed #888;
		border-bottom: 2px dashed #888;
	}



	/* MESSAGE BOX */
	.msgbox {
		margin: 0em 2em 1em 3em;
		border: 2px solid #888;
		background: #ddd;
		color: #000; 
		border-radius: 0.2em;
		padding: 0;
		border-spacing: 0;
	}
	.msgbox td {
		vertical-align: middle;
		padding:0.5em 1em 0.5em 0em;
		width: 100%;
	}
	.msgbox .msgboximg {
		vertical-align: middle;
		width: 0%;
		padding: 0.5em 1em 0.5em 1em;
	}



	/* MESSAGE BUBBLES */
	.message-bubble {
		filter: drop-shadow(2px 2px 8px #444);
	}
	.message-bubble-round {
		-webkit-border-image-source: url("https://wiki.imagisphere.me/images/7/7e/Page_Border_Bubble_Round.png");
		-webkit-border-image-slice: 128 fill;
		-webkit-border-image-width: 50px 50px;
		-webkit-border-image-repeat: round round;
		-webkit-border-image-outset: 0px 0px;

		border-image-source: url("https://wiki.imagisphere.me/images/7/7e/Page_Border_Bubble_Round.png");
		border-image-slice: 128 fill;
		border-image-width: 50px 50px;
		border-image-repeat: round round;
		border-image-outset: 0px 0px;
	}
	.message-bubble-cloud {
		-webkit-border-image-source: url("https://wiki.imagisphere.me/images/3/3b/Page_Border_Bubble_Cloud.png");
		-webkit-border-image-slice: 128 fill;
		-webkit-border-image-width: 50px 50px;
		-webkit-border-image-repeat: round round;
		-webkit-border-image-outset: 0px 0px;

		border-image-source: url("https://wiki.imagisphere.me/images/3/3b/Page_Border_Bubble_Cloud.png");
		border-image-slice: 128 fill;
		border-image-width: 50px 50px;
		border-image-repeat: round round;
		border-image-outset: 0px 0px;
	}
	.message-bubble-spike {
		-webkit-border-image-source: url("https://wiki.imagisphere.me/images/5/57/Page_Border_Bubble_Spike.png");
		-webkit-border-image-slice: 128 fill;
		-webkit-border-image-width: 50px 50px;
		-webkit-border-image-repeat: round round;
		-webkit-border-image-outset: 0px 0px;

		border-image-source: url("https://wiki.imagisphere.me/images/5/57/Page_Border_Bubble_Spike.png");
		border-image-slice: 128 fill;
		border-image-width: 50px 50px;
		border-image-repeat: round round;
		border-image-outset: 0px 0px;
	}
	.message-bubble-title {
		position: absolute;

		-webkit-border-image-source: url("https://wiki.imagisphere.me/images/7/7e/Page_Border_Bubble_Round.png");
		-webkit-border-image-slice: 128 fill;
		-webkit-border-image-width: 50px 50px;
		-webkit-border-image-repeat: round round;
		-webkit-border-image-outset: 8px 16px;

		border-image-source: url("https://wiki.imagisphere.me/images/7/7e/Page_Border_Bubble_Round.png");
		border-image-slice: 128 fill;
		border-image-width: 50px 50px;
		border-image-repeat: round round;
		border-image-outset: 8px 16px;

		filter: drop-shadow(2px 2px 2px #0008);
		margin-left: 8px;
		margin-top: -2px;
	}



	/* NEWS FILL */
	.news-fill-top {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/8/85/Page_News_Fill_Top_Mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/8/85/Page_News_Fill_Top_Mask.png");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-origin: padding-box;
		-webkit-mask-repeat: repeat no-repeat;
		mask-repeat: repeat no-repeat;
	
		-webkit-mask-size: 500px;
		mask-size: 500px;
		mask-mode: alpha;
	}
	.news-fill-edge-left {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/6/6f/Page_News_Fill_Mask_Middle_Repeat.png");
		mask-image: url("https://wiki.imagisphere.me/images/6/6f/Page_News_Fill_Mask_Middle_Repeat.png");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-origin: padding-box;
		-webkit-mask-repeat: no-repeat repeat;
		mask-repeat: no-repeat repeat;

		-webkit-mask-size: 500px;
		mask-size: 500px;
		mask-mode: alpha;
		mask-size: 100px 100px;
		mask-position-x: -5px;
	}
	.news-fill-edge-right {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/6/6f/Page_News_Fill_Mask_Middle_Repeat.png");
		mask-image: url("https://wiki.imagisphere.me/images/6/6f/Page_News_Fill_Mask_Middle_Repeat.png");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-origin: padding-box;
		-webkit-mask-repeat: no-repeat repeat;
		mask-repeat: no-repeat repeat;

		-webkit-mask-size: 500px;
		mask-size: 500px;
		mask-mode: alpha;
		mask-size: 100px 100px;
		mask-position-x: -5px;
	}
	.news-fill-background-squares {
		background-image: url("https://wiki.imagisphere.me/images/b/ba/Page_News_Fill_Background_Squares.png");
		background-size: 460px;
		background-clip: border-box;
	}
	.news-fill-background-triangles {
		background-image: url("https://wiki.imagisphere.me/images/0/09/Page_News_Fill_Background_Triangles.png");
		background-size: 200px;
		background-clip: border-box;
	}
	.news-fill-bottom {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/e/ed/Page_News_Fill_Bottom_Mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/e/ed/Page_News_Fill_Bottom_Mask.png");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-origin: padding-box;
		-webkit-mask-repeat: repeat no-repeat;
		mask-repeat: repeat no-repeat;
	
		-webkit-mask-size: 500px;
		mask-size: 500px;
		mask-mode: alpha;
	}
	/* BOX DISPLAYS ABOVE HERE */





	/* TEXT FORMATTING */
	.text-red, .news-quote {
		font-style: normal;
		color: #e61467;
	}
	.text-yellow {
		font-style: normal;
		color: #ffe300;
	}
	.news-quote a, .news-quote a:visited { color: #e61467; }

	ul { list-style-image: none; }



	/* IMAGE FORMATTING */

	.drop-shadow { filter: drop-shadow(3px 5px 5px #000d); }

	.image-rotate-90 { transform: rotate(90deg); }
	.image-rotate-180 { transform: rotate(180deg); }
	.image-rotate-270 { transform: rotate(270deg); }
	.image-mirror-x { transform: scale(-1,1); }
	.image-mirror-y { transform: scale(1,-1); }

	.image-black { filter: contrast(0%) brightness(0%); }
	.image-white { filter: contrast(0%) brightness(200%); }
	.image-red{ filter: contrast(0%) saturate(100) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(0deg) saturate(100); }
	.image-yellow{ filter: contrast(0%) brightness(0%) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(10deg) saturate(100); }
	.image-green{ filter: contrast(0%) saturate(100) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(30deg) saturate(100); }
	.image-cyan{ filter: contrast(0%) saturate(100) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(130deg) saturate(100); }
	.image-blue{ filter: contrast(0%) saturate(100) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(190deg) saturate(100); }
	.image-magenta{ filter: contrast(0%) saturate(100) invert(1) brightness(55%) sepia(100%) contrast(100%) hue-rotate(220deg) saturate(100); }

	.key-blue{ filter: brightness(0) saturate(100%) invert(21%) sepia(99%) saturate(3151%) hue-rotate(238deg) brightness(98%) contrast(111%); }
	.key-purple{ filter: brightness(0) saturate(100%) invert(34%) sepia(69%) saturate(2838%) hue-rotate(254deg) brightness(97%) contrast(113%); }
	.key-pink{ filter: brightness(0) saturate(100%) invert(63%) sepia(62%) saturate(6931%) hue-rotate(299deg) brightness(99%) contrast(104%); }
	.key-red{ filter: brightness(0) saturate(100%) invert(33%) sepia(86%) saturate(1817%) hue-rotate(336deg) brightness(99%) contrast(105%); }
	.key-yellow{ filter: brightness(0) saturate(100%) invert(96%) sepia(41%) saturate(3711%) hue-rotate(322deg) brightness(105%) contrast(101%); }
	.key-lime{ filter: brightness(0) saturate(100%) invert(90%) sepia(83%) saturate(564%) hue-rotate(24deg) brightness(101%) contrast(101%); }
	.key-green{ filter: brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(435%) hue-rotate(61deg) brightness(103%) contrast(101%); }
	.key-cyan{ filter: brightness(0) saturate(100%) invert(78%) sepia(86%) saturate(379%) hue-rotate(83deg) brightness(102%) contrast(101%); }



	/* IMAGE CAROUSEL */
	.imagecarousel {
		position: relative;
		display: inline-block;
	}
	.imagecarousel-text {
		font-family: "Omnes SemiBold";
	}





	/* LEVEL BADGE AND POLAROID OVERLAYS START HERE */

	/* GENERAL LEVEL BADGE OVERLAY */
	.levelbadge {
		position: relative;
		display: inline-block;
	}
	.levelbadge-underlay{
		position: absolute;
		pointer-events: none;
		z-index: 1;
	}
	.levelbadge-mask {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 2;
	}
	.levelbadge-overlay{
		position: relative;
		pointer-events: none;
		z-index: 3;
	}
	.levelbadge-mask-small1 {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 2;
        transform-origin: 50% 54%; 
        scale: 70%;
	}
	.levelbadge-overlay-small1{
		position: relative;
		pointer-events: none;
		z-index: 3;
        transform-origin: 50% 54%; 
        scale: 70%;
	}
	.levelbadge-mask-small2 {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 2;
        transform-origin: 50% 100%; 
        scale: 75%;
	}
	.levelbadge-overlay-small2{
		position: relative;
		pointer-events: none;
		z-index: 3;
        transform-origin: 50% 100%; 
        scale: 75%;
	}
	.levelbadge-mask-small3 {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 2;
        transform-origin: 50% 52%; 
        scale: 62%;
	}
	.levelbadge-overlay-small3{
		position: relative;
		pointer-events: none;
		z-index: 3;
        transform-origin: 50% 52%; 
        scale: 62%;
	}



	/* GENERAL POLAROID OVERLAY */
	.polaroid-underlay{
		position: absolute;
		contain: paint;
        isolation: isolate;
        transform: rotate(-1deg); 
        transform-origin: 50% 25%; 
        scale: 70%;
		z-index: 1;
	}
	.polaroid-overlay{
		position: relative;
		pointer-events: none;
		z-index: 2;
	}



	/* ADVENTURE BADGE OVERLAY */
	.adventurebadge-mask {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/f/f7/Adventure_Mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/f/f7/Adventure_Mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 2;
	}
	.adventurebadge-overlay{
		position: relative;
        mix-blend-mode: overlay;
		pointer-events: none;
		z-index: 3;
	}



	/* PSP BADGE OVERLAY */
	.pspbadge-overlay {
		--color: inherit;
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/5/56/PSPBadge_OverlayMask.png");
		mask-image: url("https://wiki.imagisphere.me/images/5/56/PSPBadge_OverlayMask.png");
		position: relative;
		-webkit-mask-size: contain;
		mask-size: contain;
        object-fit: cover;
		z-index: 3;
		pointer-events: none;
		background: var(--color);
		background-blend-mode: multiply;
	}



	/* VITA THEME OVERLAY */
	.vitabadge-mask{
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		-webkit-mask-size: 85%;
		mask-size: 85%;
		-webkit-mask-position: 2.5% 108.5%;
		mask-position: 2.5% 108.5%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		position:relative;
		scale: 118%;
		transform-origin: 2.5% 108.5%;
		z-index: 2;
	}



	/* SABA BADGE OVERLAY */
	.sababadge-mask {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/a/a7/Badge_mask.png");
		-webkit-mask-size: 97.5%;
		mask-size: 97.5%;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		position: absolute;
		mix-blend-mode: overlay;
		z-index: 1;
		scale: 83.5%;
		transform-origin: 52% 46%;
	}
	.sababadge-bordercolor {
		--color: inherit;
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/4/44/SABABadge_Border_Mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/4/44/SABABadge_Border_Mask.png");
		-webkit-mask-size: contain;
		mask-size: contain;
		position: relative;
		pointer-events: none;
		z-index: 1;
		background: var(--color);
		mix-blend-mode: hard-light;
	}
	.sababadge-detail {
		position: absolute;
		pointer-events: none;
		z-index: 3;
		mix-blend-mode: soft-light; 
	}
	.sababadge-zip{
		position: absolute;
		pointer-events: none;
		z-index: 2;
	}
	/* LEVEL BADGE AND POLAROID OVERLAYS END HERE */





	/* SPECIAL IMAGE DISPLAYS START HERE */

	/* HOVER IMAGE*/
	.hoverimage {
        position: relative;
        object-fit: contain;
        display: inline-block;
        transform-origin: 50% 50%; 
        scale: 80%;
        transition: scale 0.3s;
	}
	.hoverimage:hover {
        transform-origin: 50% 50%; 
        scale: 100%;
	}



	/* PRIZE BUBBLE */
	.prizebubble {
		position: relative;
		display: inline-block;
	}
	.prizebubble-underlay{
		position: relative;
		pointer-events: none;
		z-index: 1;
	}
	.prizebubble-mask {
		-webkit-mask-image: url("https://wiki.imagisphere.me/images/4/42/Bubble_Mask.png");
		mask-image: url("https://wiki.imagisphere.me/images/4/42/Bubble_Mask.png");
		position: absolute;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-origin: padding-box;
		mask-origin: padding-box;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		object-fit: contain;
		vertical-align: middle;
		horizontal-align: middle;
        width: 100%;
        height: 100%;
		display: inline-block;
		background:rgba(255, 255, 255, 0);
		z-index: 2;
	}
	.prizebubble-mask-after {
		position: relative;
        object-fit: cover;
		box-sizing: border-box;
		vertical-align: middle;
		horizontal-align: middle;
		background:rgba(255, 255, 255, 0);
	}
	.prizebubble-overlay{
		position: relative;
		pointer-events: none;
		vertical-align: middle;
		horizontal-align: middle;
		z-index: 3;
	}
	.collectabubble-overlay{
		position: absolute;
		z-index: 3;
		pointer-events: none;
	}



	/* PRIZE LISTS */
	.prizelist-text {
        font-family: "Omnes SemiBold";
        font-size: 30px;
        vertical-align: text-bottom;
		position: relative;
		display: inline-block;
	}
	.prizelist-image {
		pointer-events: none;
		filter: drop-shadow(2px 2px 1px rgba(0.0,0.0,0.0,0.7));
	}
	.prizelist-line, .prizelist-line-dm {
		pointer-events: none;
		background-image: url("https://wiki.imagisphere.me/images/b/b5/Drawn_Line_Dotted.png");
		background-size: 150px;
		background-clip: content-box;
		background-repeat: repeat no-repeat;
		filter: contrast(0%) brightness(0%);
	}



	/* PRIZE LIST ITEM BUBBLE */
	.itembubble {
		position: relative;
        object-fit: contain;
		display: inline-block;
	}
	.itembubble-underlay{
		position: absolute;
		pointer-events: none;
		z-index: 1;
        filter: contrast(0%) brightness(0%);
	}
	.itembubble-text{
		position: absolute;
        font-family: "Omnes SemiBold";
        font-size: 12px;
        padding-top: 92%;
        text-align: center;
        line-height: 85%;
        transform-origin: 50% 50%; 
        object-fit: fill;
        width: 128px; 
        height: 32px;
		z-index: 2;
	}
	.itembubble-overlay{
		position: relative;
		z-index: 2;
        object-fit: contain;
        transform-origin: 50% 50%; 
        scale: 70%;
        transition: scale 0.3s, filter 0.3s;
        width: 128px; 
        height: 128px;
        filter: drop-shadow(5px 5px 0px rgba(0.5,0.5,0.5,0.5));
	}
	.itembubble-overlay:hover {
        transform-origin: 50% 50%; 
        scale: 90%;
        filter: drop-shadow(3px 3px 0px rgba(0.5,0.5,0.5,0.5));
	}



	/* LEVEL LIST BADGE SELECTION */
	.levelbadgeselection{
		position: relative;
        object-fit: contain;
		display: inline-block;
	}
	.levelbadgeselection-overlay{
		position: relative;
		z-index: 2;
        margin-left: auto;
        margin-right: auto;
        object-fit: scale-down;
        transform-origin: 50% 50%; 
        scale: 80%;
        transition: scale 0.3s, filter 0.3s;
        width: 128px; 
        height: 128px;
	}
	.levelbadgeselection-overlay:hover {
        transform-origin: 50% 50%; 
        scale: 90%;
	}



	/* PIN RIBBONS */
	.pin-mainimage {
		z-index:1;
	}
	.pin-ribbon-underlay {
		position: absolute;
		pointer-events: none;
		transform: translate(-50%, -5%);
		z-index: -1;
	}
	.pin-ribbon-overlay {
		position:absolute;
		pointer-events: none;
		transform: translate(-50%, -5%);
		z-index:2;
	}



	/* LBPK MINIMAP */
	.minimap-underlay {
		opacity: 25%;
		position: absolute;
		pointer-events: none;
		z-index: 0;
	}
	.minimap {
		position: relative;
		z-index: 1;
	}



	/* PLAY CREATE SHARE SCORES */
	.pcs-score {
		position: relative;
		object-fit: contain;
		display: inline-block;
		width: 128px;
		height: 128px;
	}
	.pcs-score-overlay {
		position: absolute;
		z-index: 1;
		object-fit: contain;
		transform-origin: 50% 50%;
		scale: 92%;
		display: inline-block;
		animation-name: pcs-spin;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-play-state: paused;
	}
	.pcs-score-overlay:hover {
		animation-name: pcs-spin;
		animation-play-state: running;
	}
	.pcs-score-underlay {
		position: absolute;
		pointer-events: none;
		z-index: 0;
	}
	.pcs-score-value {
		z-index: 2;
		position: relative;
		display: block;
		rotate: -10deg;
	}
	@-moz-keyframes pcs-spin {
		from { -moz-transform: rotate(0deg); }
		to { -moz-transform: rotate(360deg); }
	}
	@-webkit-keyframes pcs-spin {
		from { -webkit-transform: rotate(0deg); }
		to { -webkit-transform: rotate(360deg); }
	}
	@keyframes pcs-spin {
		from {transform:rotate(0deg);}
		to {transform:rotate(360deg);}
	}