/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* width */
::-webkit-scrollbar {
  width: min(max(2.5vw, 10px), 1em);
}

/* Track */
::-webkit-scrollbar-track {
  background: #e5e5e5;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #919191;
  border-radius: 5px;
}


html
{
	scrollbar-width: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	overscroll-behavior: none;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

b, h3
{
	font-weight: 600;
}

@property --body-bg-rot {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotatebg {
  0% {
    --body-bg-rot: 0deg;
  }
  100% {
    --body-bg-rot: 360deg;
  }
}

body {
	--bg-angle: 145deg;
	font-family: 'Poppins', sans-serif;
	margin: 0px;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	scrollbar-width: none;
	background: url(graphics/tg_background.png), linear-gradient(calc(var(--body-bg-rot) + var(--bg-angle)), #d581cd, #dab444, #66c5cc);
	background-size: 420px, max(2200px, 100vw) max(2300px, 100vh);
	background-repeat: repeat, no-repeat;
	-webkit-font-smoothing: antialiased;
    width: max(2200px, 100vw);
    height: max(2300px, 100vh);
	overscroll-behavior: none;
	position: relative;
	background-blend-mode: overlay, normal;
	animation: rotatebg 60s linear infinite;
	color: #272727;
	&.scrollblock
	{
		overflow: hidden;
	}
	&.zoomed
	{
		overflow: hidden;
		background-size: 420px, 100% 100%;
		width: 100%;
		height: 100%;
	}
	&.banned
	{
		pointer-events: none;
	}
}

body::-webkit-scrollbar {
    width: 0px;
	height: 0px;
}

.clip_all
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.app_loading
{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background: radial-gradient(#295957, #214543);
    background-size: 100% 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	touch-action: none;
	transition: 0.5s;
	transition-behavior: allow-discrete;
	& > img
	{
		max-width: 95%;
		transition: opacity 0.5s;
		opacity: 0;
		&.loaded
		{
			opacity: 1;
		}
	}
	& > span
	{
		font-size: 2em;
		font-weight: 800;
		color: white;
		text-shadow: 0px 4px 6px #0000009c;
		margin-top: 1em;
		opacity: 1;
		transition: opacity 0.5s;
		max-width: 95vw;
		@starting-style
		{
			opacity: 0;
		}
	}
	&.done
	{
		filter: blur(16px);
		opacity: 0;
		display: none;
	}
}

.header_gradient
{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) + 4px + 2.55em);
    background:linear-gradient(
				to bottom,
				hsla(0, 0%, 0%, 0.78) 0%,
				hsla(0, 0%, 0%, 0.77) 8.1%,
				hsla(0, 0%, 0%, 0.742) 15.5%,
				hsla(0, 0%, 0%, 0.699) 22.5%,
				hsla(0, 0%, 0%, 0.643) 29%,
				hsla(0, 0%, 0%, 0.578) 35.3%,
				hsla(0, 0%, 0%, 0.505) 41.2%,
				hsla(0, 0%, 0%, 0.429) 47.1%,
				hsla(0, 0%, 0%, 0.351) 52.9%,
				hsla(0, 0%, 0%, 0.275) 58.8%,
				hsla(0, 0%, 0%, 0.202) 64.7%,
				hsla(0, 0%, 0%, 0.137) 71%,
				hsla(0, 0%, 0%, 0.081) 77.5%,
				hsla(0, 0%, 0%, 0.038) 84.5%,
				hsla(0, 0%, 0%, 0.01) 91.9%,
				hsla(0, 0%, 0%, 0) 100%
			  );
    z-index: 1;
	pointer-events: none;
}

/* CANVAS */

.stickercanvas {
	--canvas-zoom: 1;
	margin-left: 100px;
	margin-top: 150px;
	margin-right: 100px;
	margin-bottom: 150px;
	border: 0px;
	display: inline-block;
	width: 2000px;
	aspect-ratio: 1;
	outline: 5px solid #ffffff;
	box-shadow: 0px 6px 8px #00000091;
	border-radius: 10px;
	background-size: 100% 100%;
	background-color: white;
	position:relative;
	z-index: 0;
	&.zoom{
		top: 0;
		left: 0;
		margin: auto;
		margin-left: 50vw;
		margin-top: 50vh;
		--w: min(90vw, 95vh - var(--tg-safe-area-inset-top)*2 - var(--tg-content-safe-area-inset-top)*2 - 6em);
		--ratio: tan(atan2(var(--w), 2000px));
		transform: scale(var(--ratio)) translateY(-50%) translateX(-50%);
		transform-origin: top left;
		border-radius: calc(10px / var(--ratio));
        outline-width: calc(5px / var(--ratio));
        box-shadow: 0px calc(6px / var(--ratio)) calc(8px / var(--ratio)) #00000091;
	}
}

/* CURRENCY BAR */

.currency_bar {
	position: fixed;
	box-sizing: border-box;
	top:  calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) + 4px);
	background-color: white;
	box-shadow: 0px 4px 6px #00000070;
	padding-right: 0.1em;
	vertical-align: middle;
	z-index: 1;
	text-align: right;
	display: flex;
	align-items: center;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease-out, transform 0.3s;
	&.pixels
	{
		right: 4px;
	}
	&.coins
	{
		left: 4px;
	}
	&.increase
	{
		transform: scale(1.2) rotate(5deg);
		background: #aaffaa;
	}
}


.currency_bar.pixels.available::after
{
	position: absolute;
    content: '!';
    top: 1px;
    right: 2.2em;
    white-space: nowrap;
    background-color: #ff4646;
    font-size: 0.7em;
    font-family: 'Inter';
    font-weight: 700;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    box-shadow: 0px 2px 4px #00000055;
    transition: none;
    border: 2px solid #4b4b4b;
}

.currency_bar .curr_amt img
{
	height: 1.7em;
}

.currency_bar .curr_amt {
	font-size: 1.5em;
	font-family: 'Inter';
    font-weight: 600;
    line-height: 1.7em;
}

.currency_bar .icon1 {
    margin-right: 0.5em;
    margin-left: 0.5em;
}

.currency_bar img.icon2
{
	height: 2em;
    border-radius: 7px;
    border: 2px solid #4b4b4b;
	margin-left: 0.2em;
	.pixels > &
	{
		background: #91ff99;
	}
	.coins > &
	{
		background: #96c1fb;
	}
}

#loading_sticker
{
    position: absolute;
    background: #000000bf;
    padding: 0.1em;
    border-radius: 100%;
    z-index: 2;
    left: 0;
    top: 0;
	transform: translate(-50%, -50%);
	transition: opacity 1s linear;
	pointer-events: none;
}


/* MENU */

.menu {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  width: 100%;
  background-color: white;
  height: calc(100dvh - 7em - var(--tg-safe-area-inset-top) - var(--tg-content-safe-area-inset-top));
  vertical-align: middle;
  z-index: 100;
  top: 100%;
  visibility: hidden;
  transition: top 0.2s linear, visibility 0.2s linear;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  border: 1px solid #a2a2a2;
  will-change: top;
  display: flex;
  flex-direction: column;
}

.menu.open
{
  top: calc(3em + var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
  visibility: visible;
}


.menu_contents{
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
	&:not(#menu_create_sticker){
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

.menu_contents.flexbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  align-content: flex-start;
}

.menu_contents.flexbox.fcol
{
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.menu_contents.mw
{
	max-width: 30em;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}
/* BOTTOM BAR */


.bottom_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  align-items: flex-start;
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
  -webkit-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
  z-index: 101;
  border: 1px solid #a2a2a2;
  box-sizing: border-box;
  height: calc(3em + 16px);
  & .btn
  {
		position: relative;
		height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
		&::after
		{
			font-weight: 500;
            color: #5b5b5b;
		}
		& img
		{
			width: 30px;
		}
		&.selected
		{
			background: linear-gradient(to top, var(--color), color-mix(in srgb, var(--color) 10%, transparent 90%) 10%);
		}
  }
}

#b_btn_market
{
	--color: #caff2ea3;
	&::after
	{
		content: 'market';
	}
}
#b_btn_shop
{
	--color: #fff42ea3;
	opacity: 0.5;
	&::after
	{
		content: 'shop';
	}
}
#b_btn_stickers
{
	--color: #2ef0ffa3;
	&::after
	{
		content: 'stickers';
	}
}
#b_btn_inventory
{
	--color: #6fef9fa3;
	&::after
	{
		content: 'inventory';
	}
}

.bottom_bar .button {
	cursor: pointer;
	width: calc(100vw - 2em);
	margin: 8px;
	height: 2em;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	color: #000000b3;
	font-size: 1.5em;
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	box-sizing: border-box;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: none;
	background: #6ef5ff;
	box-shadow: 0px 2px 4px #00000055;
	max-width: max(50vh, 20em);
	white-space:nowrap;
	&.close
	{
		background: #ffe55d;
	}
}

.bottom_bar .button:focus {
    outline: none;
}

.bottom_bar .button.cancel
{
	background: #f7f7f7;
	color: #474747;
	width: calc(50vw - 1em);
}

.bottom_bar .button.cancel.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

.bottom_bar .button.confirm
{
	background: #73ff86;
	width: calc(50vw - 1em);
	position: relative;
}

.bottom_bar .button.confirm.loading
{
	color: transparent !important;
	pointer-events: none;
}

.bottom_bar .button.confirm.loading::after
{
	content: '';
	background-image: url('graphics/button_load.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

#price_preview
{
	position: fixed;
    bottom: calc(2em + 10px);
    left: 50%;
	background: white;
	box-shadow: 0px 4px 6px #00000070;
	vertical-align: middle;
    z-index: 1;
    text-align: right;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
	padding-right: 0.5em;
    padding-left: 0.5em;
	pointer-events: none;
	transform: translate(-50%, calc(-50% - 1em));
	display: none;
	&.active
	{
		display: flex;
	}
	& > .s
	{
		width: 0.1em;
		height: 30px;
		background: #e2e2e2;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
}


#price_preview > div:has(> img)
{
	position: relative;
	& > div
	{
		width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-25%, -25%);
		background-size: 100%;
        border: 2px solid #4b4b4b;
	}
}

#price_preview .a
{
	background-image: url('graphics/add_icon.svg');
	background-color: #c1ffc1;
}

#price_preview .m
{
	background-image: url('graphics/minus_icon.svg');
	background-color: #ffc5c5;
}


#price_preview span {
	font-size: 1.5em;
    font-family: 'Inter';
    font-weight: 600;
    line-height: 1.7em;
	white-space: nowrap;
}

#price_preview img {
	margin-right: 0.5em;
}

/* STICKERS */

.sticker_pick_div {
  border-radius: 10px;
  padding: 5px;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
  float:left;
  margin: 2px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-size: 100% 100%;
  box-shadow: 0px 4px 4px #00000055, 0px 0px 4px #00000055;
}

.sticker_pick_div.preview
{
	float: none;
	margin: auto;
}

.sticker_pick_div.add {
	background: #6f6f6f;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	color: #ededed;
	font-size: 1.4em;
	font-family: 'Inter';
	font-weight: 700;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}


.sticker_pick_div.extra
{
    --darkc: #445835;
    background: linear-gradient(45DEG, #f6ff9c, #a4ff9c);
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-shadow: -1px -1px 0 var(--darkc), 0 -1px 0 var(--darkc), 1px -1px 0 var(--darkc), 1px 0 0 var(--darkc), 1px 1px 0 var(--darkc), 0 1px 0 var(--darkc), -1px 1px 0 var(--darkc), -1px 0 0 var(--darkc), 0px 2px 0em var(--darkc), 2px 3px 1px #184b8269;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: white;
}

.sticker_pick_div.extra > img
{
	width: 50%;
}


.sticker_pick_div.add
{
	& > img
	{
		width: 70%;
		filter: brightness(5) drop-shadow(0px 2px 2px #00000055);
	}
	& > span
	{
		filter: drop-shadow(0px 2px 2px #00000055);
		font-weight: 900;
		color: #d3d3d3;
	}
}

.sticker_pick_div.checker {
	
	  background-image: /* tint image */
					/*linear-gradient(to right, rgba(0, 192, 192, 0.75), rgba(50, 120, 192, 0.75)),*/
					linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                    /* checkered effect */
                    linear-gradient(to right, black 50%, white 50%),
                    linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 2em 2em;
	
}

.shape_sticker
{
	position: absolute;
	background-color: white;
	font-weight: 600;
	display: inline-block;
	padding-top: 0.1em;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

.shape_sticker:not(#se_shape)
{
	top: 0;
	right: 0;
	border-bottom-left-radius: 0.5em;
}

#se_shape.shape_sticker
{
	bottom: 0;
	left: 0;
	border-top-right-radius: 0.5em;
	font-size: 1.1em;
}

.price_sticker{
	position: absolute;
	right: 0;
	background-color: white;
	padding-top: 0.15em;
	padding-left: 0.275em;
	padding-right: 0.275em;
	padding-bottom: 0.1em;
	font-family: 'Inter';
	font-weight: 600;
	display: inline-block;
	font-size: 1.4em;
}

.price_sticker:not(#se_cost)
{
	bottom: 0;
	border-top-left-radius: 0.5em;
}
#se_cost.price_sticker
{
	top: 0;
	border-bottom-left-radius: 0.5em;
}

.price_sticker.no_funds{
	color: #c00000;
	background: #ffeded;
}

.price_sticker img,
.icon_pixel {
	width: 1.2em;
	vertical-align: middle;
	transform: translateY(-1px);
}

.icon_stars
{
	vertical-align: baseline;
	transform: translateY(2px);
}


.edit_btn
{
	border-radius: 50%;
	background: #e0ff9a;
	position: absolute;
	top: 2px;
	left: 2px;
	border: 2px solid #4b4b4b;
	box-shadow: 0px 2px 4px #00000055;
	cursor: pointer;
	&.delete
	{
		background: #ff7e7e;
		float: right;
		top: 8px;
		left: auto;
		right: 8px;
	}
	&.edit
	{
		top: 8px;
		left: 8px;
	}
	
	& img
	{
		width: 40px;
		height: 40px;
	}
}



.sticker_thumb3d {
  width:100%;
  height:100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 50%;
  image-rendering: pixelated;
  transform-style: preserve-3d;
}


.sticker_thumb3d.glare {
  animation: sticker_3d_rotate 5s infinite, sticker_3d_glare 5s infinite;
  animation-timing-function: ease-in-out;
  filter: brightness(0) invert(1)
}

.sticker_thumb3d.sticker {
  animation: sticker_3d_rotate 5s infinite, sticker_3d_fade 5s infinite;
  animation-timing-function: ease-in-out;
  -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 10%,rgba(0,0,0,1)20%, rgba(0,0,0,1)80%, rgba(0,0,0,0.8) 90%);
  -webkit-mask-size: 300% 300%;
}


@keyframes sticker_3d_rotate {

  0% { transform: translateY(-50%) perspective(400px) rotate3d(1,-1,1,15deg);}
  50% { transform: translateY(-50%) perspective(400px) rotate3d(-1,1,-1,15deg);}
  100% { transform: translateY(-50%) perspective(400px) rotate3d(1,-1,1,15deg);}
}

@keyframes sticker_3d_fade {

  0% {
  -webkit-mask-position: left;}
  50% {
  -webkit-mask-position: right;}
  100% {
  -webkit-mask-position: left;}
}

@keyframes sticker_3d_glare {

  0% {filter: brightness(0) invert(1)}
  50% {filter: brightness(0) invert(0)};
  100% {filter: brightness(0) invert(1)}
}




/* CREATE STICKER */

.create_sticker .canvas_background {
  vertical-align: bottom;
  padding: 0;
  background-image: /* tint image */
                    linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                    /* checkered effect */
                    linear-gradient(to right, black 50%, white 50%),
                    linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 2em 2em;
  overflow: hidden;
  aspect-ratio: 1;
  max-height: min(50dvh, calc(100dvh - 25em));
  min-height: 7em;
  max-width: 100%;
  position: relative;
  margin: auto;
  touch-action: none;
  margin-bottom: 1em;
  box-shadow: 0px 4px 4px #00000055;
}


.create_sticker canvas
{
	border: 0.3em solid #a1f569dd;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	image-rendering: pixelated;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
	border-radius: 5px;
	height: var(--se_rs_percent_h);
	width: var(--se_rs_percent_w);
}
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .create_sticker canvas{
  backdrop-filter: blur( 2.0px );
  -webkit-backdrop-filter: blur( 2.0px );
}
}


#se_zoom_toggle
{
	position: relative;
    margin: 2px;
    background-color: #b7b7b7;
    font-weight: 600;
    border-radius: 32px;
    border: 1px solid black;
    box-shadow: 0 2px 0 black, 3px 3px 0 #184b8269;
    cursor: pointer;
    width: 60px;
    height: 32px;
    transition: 0.3s;
    padding: 0;
}

@keyframes se_zoom_tooltip_1 {
  0% { opacity: 0; transform: translate(100%, -200%);}
  20%, 70% { opacity: 1; transform: translate(100%, -50%);}
  100% { opacity: 0; transform: translate(100%, -50%);}
}

@keyframes se_zoom_tooltip_2 {
  0% { opacity: 0; transform: translate(100%, -200%);}
  20%, 70% { opacity: 1; transform: translate(100%, -50%);}
  100% { opacity: 0; transform: translate(100%, -50%);}
}

#se_zoom_toggle::before
{
    content: 'Actual size';
    background: #f1f1f1c4;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translate(100%, -50%);
    white-space: nowrap;
    padding: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 5px;
    pointer-events: none;
    line-height: 0.8em;
    border: 1px solid black;
	width: 11ch;
	animation: se_zoom_tooltip_1 2s;
	animation-fill-mode: forwards;
}

#se_zoom_toggle::after
{
    content: '';
    background: white;
    position: absolute;
    left: 4px;
    top: 3px;
    border-radius: 100%;
    width: 26px;
    height: 26px;
    transition: 0.3s;
    box-shadow: 4px 0 2px #00000029;
    transform: translateX(26px);
}

#se_zoom_toggle.zoomed::after
{
	transform: none;
}

#se_zoom_toggle.zoomed
{
	background-color: #9dff1c;
}

#se_zoom_toggle.zoomed::before
{
	content: 'Zoomed';
	background: #9dff1cc4;
	animation: se_zoom_tooltip_2 2s;
	animation-fill-mode: forwards;
}

#se_zoom_toggle img
{
    position: absolute;
    top:  4px;
	opacity: 0.7;
}

#se_zoom_toggle img:nth-of-type(1)
{
	right: 4px;
}

#se_zoom_toggle img:nth-of-type(2)
{
	left: 4px;
}

.se_elastic > canvas, .se_elastic > div.se_rs_icon
{
	transition: 0.2s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}

.se_linear > canvas, .se_linear > div.se_rs_icon
{
	transition: 0.2s linear;
}

.se_rs_icon.r
{
	transform: translate(-50%, -50%) rotate(90deg);
}

.se_rs_icon
{
	content: "";
	background: white;
	width: 2em;
	height: 2em;
	position: absolute;
	background-image: url("graphics/se_drag.svg");
	background-size: 100% 100%;
	border-radius: 50%;
	outline: 2px solid #5f6368;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
	pointer-events: auto;
	transform: translate(-50%, -50%);
	&.pressed
	{
		width: 15px;
		height: 15px;
	}
}

@property --se_rs_percent_w {
  syntax: "<percentage> | <length>";
  inherits: true;
  initial-value: 80%;
}
@property --se_rs_percent_h {
  syntax: "<percentage> | <length>";
  inherits: true;
  initial-value: 80%;
}

#se_rs_top
{
	left: 50%;
	top: calc((100% - var(--se_rs_percent_h)) / 2 - 0.15em);
}

#se_rs_right
{
	left: calc((100% + var(--se_rs_percent_w)) / 2 + 0.15em);
	top: 50%;
}

#se_rs_bottom
{
	left: 50%;
	top: calc((100% + var(--se_rs_percent_h)) / 2 + 0.15em);
}

#se_rs_left
{
	left: calc((100% - var(--se_rs_percent_w)) / 2 - 0.15em);
	top: 50%;
}

#se_tools
{
	justify-content: center;
	align-items: center;
	flex-direction: row;
	align-items: center;
}

.se_buttons
{
	display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
	padding-top: 1em;
	width: min(50em, 100%);
}

.create_sticker .btn
{
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	margin-left: 0.75em;
	margin-right: 0.75em;
	margin-bottom: 2.5em;
    box-shadow: 0px 2px 4px #00000055;
	position: relative;
	&::after
	{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, calc(100% + 5px));
	}
	&.image
	{
		background: #ffd583;
		&::after
		{
		  content: 'Image';
		}
	}
	&.description
	{
		background: #dae2ff;
		.bad_link > &
		{
			box-shadow: 0 2px 4px #ff8282;
            background: #ff8282;
		}
		&::after
		{
		  content: 'Description';
		}
	}
	&.save
	{
		background: #aaff99;
		&::after
		{
		  content: 'Save';
		}
	}
	& img
	{
		width: 100%;
		height: 100%;
	}
	&.back
	{
		background: #e0e0e0;
		width: 80%;
		margin-bottom: 4px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2em;
		font-weight: 700;
		color: #000000c4;
	}

}

.create_sticker .range_container
{
	width: min(50em, 100%);
	position: relative;
	margin: auto;
	& > img
	{
		width: 24px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		&:nth-of-type(1)
		{
			left: 3px;
		}
		&:nth-of-type(2)
		{
			right: 3px;
		}
	}
}

.create_sticker .scalerange
{
  -webkit-appearance: none;
  height: 1em;
  border-radius: 5px;  
  background: #ffc266;
  outline: none;
  border: 1px solid black;
  box-shadow: inset 0 0 2px black;
  filter: drop-shadow(3px 3px 0 #184b8269);
  margin: 0.7em;
  position: relative;
  width: calc(100% - 60px);
}

.create_sticker .scalerange:disabled
{
	opacity: 0.4;
}

.create_sticker .scalerange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 2em;
  border-radius: 5px; 
  background: #5F6368;
  cursor: pointer;
	border: 1px solid black;
	box-shadow: inset 0 0 2px black;

	
}

#se_size_slider
{
	background: #7acaff;
}

#cs_link_header
{
	text-align: center;
}

.cs_textinput
{	
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	border: none;
	border-radius: 5px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #e7ecff;
	word-wrap: break-word;
	resize: none;
	box-shadow: inset 0px 2px 4px #00000055;
}

.cs_textinput.invalid
{
	border: 1px solid #ff0000;
	background: #ffe7e7;
	box-shadow: inset 0 0 4px #ff0000, inset 0px 2px 4px #00000055;
}

.cs_tip
{
	background-color: #f3f5ff;
	border-radius: 5px;
	color: #3e3f43;
	width: 90%;
	margin-top: 2px;
}

#cs_upload_input
{
	display: none;
}


/* POPUP WINDOW */

.popup_blur
{
	background: rgba( 20, 20, 20, 0 );
	width: 100%;
	height: 100%;
	z-index: 2000;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	transition: 0.2s linear;
	padding-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
    box-sizing: border-box;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	display: none;
	transition-behavior: allow-discrete;
	touch-action: none;
	&.open
	{
		backdrop-filter: blur( 6.0px );
		-webkit-backdrop-filter: blur( 6.0px );
		background: rgba( 20, 20, 20, 0.75 );
		display: flex;
		@starting-style
		{
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			background: rgba( 20, 20, 20, 0 );
		}
	}
}


.popup_background
{
	background: white;
	margin: auto;
	border-radius: 20px;
	border: 1px solid black;
	box-shadow: 0px 4px 6px #00000070;
	width: min(95vw, 30em);
	overflow: hidden;
	transform: translateY(-100vh);
	visibility: hidden;
	transition: transform 0.2s linear,
				visibility 0.2s linear;
	will-change: transform;
}

.popup_blur.open .popup_background
{
	transform: translateY(0);
	visibility: visible;
	@starting-style
	{
		transform: translateY(-100vh);
	}
}



.popup_title, .menu_title {
	font-family: 'Inter', sans-serif;
	font-size: 2em;
	font-weight: 900;
	color: var(--title-color);
	letter-spacing: 2px;
	width: 100%;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--title-color) 20%, #fff 80%) 0px, color-mix(in srgb, var(--title-color) 20%, #fff 80%), 20px, color-mix(in srgb, var(--title-color) 40%, #fff 60%) 0px, color-mix(in srgb, var(--title-color) 40%, #fff 60%) 40px);
	-webkit-text-stroke: 5px color-mix(in srgb, var(--title-color) 30%, #000 70%);
	paint-order: stroke fill;
	filter: drop-shadow(0px 1px 2px #00000055);
    z-index: 1;
}



.popup_contents
{
	padding: 1em;
	max-height: calc(88% - 2em);
	box-sizing: border-box;
}

.popup_contents.flex
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.p_btns_area
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	padding: 1em;
	column-gap: 2em;
	row-gap: 1em;
	flex-wrap: wrap;
}
 
.p_btn
{
	font-family: 'Inter', sans-serif;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	border-radius: 10px;
	height: 2em;
	font-size: 1.5em;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0px 2px 4px #00000055;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	color: #000000bf;
}

.p_btn .star
{
	height: 1em;
    transform: translateY(-2px);
    margin-right: 0.3ch;
}

.p_btn.loading
{
	color: transparent !important;
}

.p_btn.loading::after
{
	content: '';
	background-image: url('graphics/button_load.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.p_btn:focus
{
	outline: none;
}

.p_btn.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

.p_btn.gray
{
	background: #f7f7f7;
    color: #474747;
}

.p_btn.green
{
	background: #73ff86;
}

.p_btn.red
{
	background: #ff7e7e;
}

.p_btn.ltyellow
{
	background: #feff90;
}

.p_btn.blue
{
	background: #90ffff;
}

.p_btn.dkorange
{
	background: #f4be6c;
}

.p_btn.ad
{
	outline: 2px solid black;
	box-shadow: box-shadow: 0px 2px 4px 2px #00000055;
	&::before
	{
		content: '';
		background-image: url(graphics/ad_btn_icon.svg);
		background-color: black;
		background-position: center;
		background-size: 30px 30px;
		background-repeat: no-repeat;
		position: absolute;
		width: 29px;
		height: 29px;
		border-radius: 50%;
		left: 0;
		top: 0;
		transform: translate(-40%, -40%);
		box-shadow: 0px 2px 4px #00000055;
	}

	
}

/* STICKER MOVE */

.sticker_move_div
{
	position: absolute;
	touch-action: none;
	-webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
	pointer-events: none;
	will-change: transform, left, top;
	z-index: 2;
	transform: translate(-50%, -50%);
    transform-origin: top left;
}

.sticker_move_img
{
	pointer-events: auto;
	clip-path: polygon(
    var(--v1-x) var(--v1-y),
    var(--v2-x) var(--v2-y),
    var(--v3-x) var(--v3-y),
    var(--v4-x) var(--v4-y));
}

.sticker_move_div.ghost .sticker_move_img
{
	pointer-events: none;
}


#sticker_move_rot
{
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: min(50vw, 50vh, 200px);
	aspect-ratio: 1;
	background: transparent;
	border-radius: 50%;
	border: 0.2em solid white;
	box-shadow: 0px 2px 4px #000000a1, inset 0px 2px 4px #000000a1;
	pointer-events: all;
	
	.zoom &
	{
        transform: translate(-50%, -50%) scale(calc(1 / var(--ratio)));
        transform-origin: center;
	}
}

.sticker_move_div.ghost #sticker_move_rot
{
	display: none;
}

.rot_icon
{
	content: "";
	background: white;
	width: 2em;
	height: 2em;
	position: absolute;
	background-image: url("graphics/sticker_rotate.svg");
	background-size: 100% 100%;
	border-radius: 50%;
	border: 2px solid #5f6368;
    pointer-events: auto;
    box-shadow: 0px 2px 4px #00000078;
}
.rot_icon:nth-of-type(1)
{
	transform: translate(-50%, -50%);
	top: 0;
	left: 50%;
}

.rot_icon:nth-of-type(2)
{
	transform: translate(50%, -50%);
	top: 50%;
	right: 0;
}

.rot_icon:nth-of-type(3)
{
	transform: translate(-50%, 50%);
	bottom: 0;
	left: 50%;
}

.rot_icon:nth-of-type(4)
{
	transform: translate(-50%, -50%);
	top: 50%;
	left: 0;
}

.click_text
{
	font-weight: 600;
	border-radius: 5px;
	margin-bottom: 10px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #e7ecff;
	word-wrap: break-word;
	padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
	user-select: text;
}

.report_sticker
{
	float:left;
	margin-left: -0.5em;
	color: #5F6368;
	cursor: pointer;
	user-select: none;
	font-size: 0.8em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.report_sticker img
{
	vertical-align: bottom;
}


#popup_3 textarea
{
	font-weight: 500;
	border: none;
	border-radius: 5px;
	margin-bottom: 10px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #ffdede;
	resize: none;
	box-shadow: inset 0px 2px 4px #00000055;
}

.click_link
{
	margin-bottom: 10px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #f3f5ff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-radius: 5px;
	font-size: 0.8em;
}

#click_desc
{
	max-height: 30vh;
	overflow: auto;
	text-align: left;
	min-height: min(4lh, 30vh);
}

/* PIXELS STORE */

.free_pixels
{
	background: repeating-linear-gradient(45deg, #ffee8c 0px, #ffee8c 20px, #fcff9f 0px, #fcff9f 40px);
    width: 95%;
    box-sizing: border-box;
	border-radius: 20px;
    position: relative;
    display: grid;
    justify-items: stretch;
    align-items: center;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
	max-width: 30em;
	box-shadow: 0px 2px 4px #00000055;
}

.free_pixels .circles
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin-bottom: calc(1.2em + 4px);
}

.free_pixels .circle
{
    background: white;
    border-radius: 10px;
    font-size: calc(min(50px, calc(48vw / 4)) / 2);
    font-weight: 600;
    font-family: 'Inter';
    line-height: 150%;
    align-content: center;
	position: relative;
	transition: background 0.5s, border 0.5s, color 0.5s;
	display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
    gap: 0.2em;
	box-shadow: inset 0px 2px 4px #00000055;
	&::after
	{
        position: absolute;
        bottom: 0;
        left: 50%;
        font-size: 0.5em;
        white-space: nowrap;
        transform: translate(-50%, calc(100% + 2px));
		line-height: 150%;
	}
	&.today
	{
		background: #91ff99;
		border-color: #007409;
		color: #1d4022;
	}
	img
	{
		height: 1.2em;
	}
}

.free_pixels .circles div:nth-of-type(1)::after{content: 'Day 1';}
.free_pixels .circles div:nth-of-type(2)::after{content: 'Day 2';}
.free_pixels .circles div:nth-of-type(3)::after{content: 'Day 3';}
.free_pixels .circles div:nth-of-type(4)::after{content: 'Day 4';}

.free_pixels .txt
{
	display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
	text-shadow: 0 0 10px #fffed5, 0 0 10px #fffed5;
	font-weight: bold;
    font-family: 'Inter';
    margin: auto;
    width: 75%;
	& img
	{
		height: 1.1em;
		vertical-align: text-top;
		filter: drop-shadow(0 0 10px #fffed5) drop-shadow(0 0 10px #fffed5);
	}
}

#claim_free_pixels_btn.d
{
	background: #72ff8573;
	pointer-events: none;
	& > span
	{
		display: none;
	}
}

#claim_free_pixels_btn:not(.d) > div
{
	display: none;
}

#rewarded_ad_btn
{
	min-width: 8ch;
	&.d
	{
		background: #90ffff52;
		pointer-events: none;
		& > span
		{
			display: none;
		}
	}
	img
	{
		transform: translateY(3px);
	}
	&>div
	{
		white-space: nowrap;
	}
	&:not(.d) > div
	{
		display: none;
	}
}

#free_pixels_wait
{
	white-space: nowrap;
	img
	{
		transform: translateY(3px);
	}
}

.section
{
	font-weight: bold;
	font-family: 'Inter';
	&:not(:first-of-type)
	{
		margin-top: 1em;
	}
}

.store_item
{
	display: flex;
	flex-direction: row;
	background: linear-gradient(45deg, #cffaff 0%, #cffaff 40%, #fffddb 60%, #fffddb 100%);
	border-radius: 20px;
	width: 95%;
	box-shadow: 0px 2px 4px #00000055;
	justify-content: space-between;
    align-items: center;
	padding: 0.5em;
	margin-bottom: 5px;
	max-width: 30em;
	position: relative;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}

.store_item .pricetag
{
	align-items: center;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	gap: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
	white-space: nowrap;
	span
	{
		font-weight: 600;
		font-size: 1.5em;
	}
}

.store_item .info
{
	font-weight: bold;
    color: #002e59;
    font-size: 80%;
    margin-left: 5px;
    margin-right: 5px;
}

div:has(> .store_pack_icon)
{
	position: relative;
	&::after
	{
		content: "i";
        position: absolute;
        top: 0;
        right: 0;
        width: 14px;
        height: 14px;
        font-weight: 600;
        border: 2px solid black;
        border-radius: 50%;
        line-height: 15px;
        opacity: 60%;
        font-size: 80%;
	}
}

.store_pack_icon
{
    width: 100px;
    filter: drop-shadow(-3px 4px 2px #00000070);
    transform: rotate(-15deg);
	pointer-events: all;
	margin-right: -10px;
    margin-left: -10px;
	cursor: pointer;
}

.progress_reward
{
	margin-top: 1em;
    display: flex;
	
	& > div:nth-of-type(1)
	{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		
		& > div:nth-of-type(1)
		{
			margin-left: auto;
			font-weight: bold;
			& > img
			{
				height: 1.2em;
				transform: translateY(20%);
			}
		}
		& > div:nth-of-type(2)
		{
			height: 20px;
			border-radius: 10px;
            background: linear-gradient(90deg, #7ed3ff 0%, #7ed3ff var(--progress), #468498 var(--progress), #468498);
            width: 100%;
            overflow: hidden;
            border: 2px solid black;
			box-shadow: 0px 2px 4px #00000055;
		}
	}
}

#popup_0 a
{
	background: #fff5af;
    color: #000000cc;
    font-weight: 500;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
	text-decoration: none;
	box-shadow: 0px 2px 4px #00000055;
}

#menu_sticker_coins
{
	.c
	{
		font-size: 1.5em;
		font-family: 'Inter';
		font-weight: 600;
		line-height: 1.7em;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0px 2px 4px #00000055;
		vertical-align: middle;
		text-align: right;
		display: inline flex;
		align-items: center;
		border-radius: 10px;
		padding-right: 0.5em;
		img
		{
			margin-right: 0.5em;
			margin-left: 0.5em;
		}
	}
	div:not(.c)
	{
		margin-top: 1em;
	}
	& > div:not(:last-of-type)
	{
		margin-left: 1em;
		margin-right: 1em;
	}
	span
		{
			font-size: 1.5em;
			font-family: 'Inter';
			font-weight: 600;
			line-height: 1.7em;
		}
	hr
	{
		border: 2px solid #8fbfff;
		margin-top: 1em;
		box-shadow: 0px 2px 4px #00000055;
	}
}

#inventory_grid, #inventory_overflow_grid
{
	display: grid;
    grid-template-columns: repeat(auto-fill, 110px);
    grid-auto-rows: 110px;
    justify-content: center;
	padding: 5px;
}

#inventory_overflow
{
	background: repeating-linear-gradient(45deg,
		 color-mix(in srgb, #ff3030 20%, #fff 80%) 0px,
		 color-mix(in srgb, #ff3030 20%, #fff 80%), 20px,
		 color-mix(in srgb, #ff3030 40%, #fff 60%) 0px,
		 color-mix(in srgb, #ff3030 40%, #fff 60%) 40px);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1lh;
    margin-bottom: 5px;
    box-shadow: 0px 4px 4px #00000055;
    border: 1px solid #ff8d8d;
	& .titlebar
	{
		font-weight: 700;
	}
}

.inventory_item
{
	border-radius: 10px;
	width: 100px;
	height: 100px;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	box-shadow: 0px 4px 4px #00000055, inset 0px 0px 4px #00000073;
	box-sizing: border-box;
	background: radial-gradient(var(--rarity-color), color-mix(in srgb, var(--rarity-color) 50%, black));
	&.empty
	{
		background: #ececec;
	}
	&.swap
	{
		&::after
		{
			content: 'SWAP ITEMS';
            font-family: 'Inter';
            font-size: 150%;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
            -webkit-text-stroke: 5px #00000085;
            paint-order: stroke fill;
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000045;
            backdrop-filter: blur(2px);
            border-radius: 10px;
            overflow: hidden;
		}
	}
	&.extra
	{
		background: linear-gradient(45DEG, #f6ff9c, #a4ff9c);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		& > span
		{
			text-wrap-mode: nowrap;
			font-weight: 600;
			font-size: 90%;
			color: #000000c9;
		}
		& > img
		{
			width: auto;
			height: auto;
			filter: none;
		}
	}
}

.inventory_item img {
    width: 100%;
    height: 100%;
	filter: drop-shadow(0px 4px 2px #00000055);
}



#item_info_container
{
	overflow-y: auto;
}

#item_info_img_container
{
	background: radial-gradient(var(--rarity-color), color-mix(in srgb, var(--rarity-color) 50%, black));
    border-radius: 10px;
    box-shadow: 0px 4px 4px #00000055;
    width: min-content;
    height: min-content;
    display: inline-block;
	position: relative;
	overflow: hidden;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 1em;
}

#item_info_img
{
    filter: drop-shadow(0px 4px 2px #00000055);
	max-height: min(40dvh, 90vw);
}

div:has(> #item_info_rarity)
{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-0, -0) rotate(45deg);
    text-wrap-mode: nowrap;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    filter: drop-shadow(0px 4px 2px #00000055);
    min-width: 5em;
    justify-content: center;
}

#item_info_rarity
{
    font-weight: bold;
    font-family: 'Inter';
	&::before
	{
        content: "";
        background: var(--rarity-color);
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20em;
        height: 1lh;
        transform: translate(-50%, -50%);
        z-index: -1;
	}
}

#item_info_name
{
	font-size: 1.3em;
    padding: 5px;
    font-family: 'Inter';
    font-weight: 800;
    color: #000000c9;
    background: var(--rarity-color);
}

#item_info_desc
{
    font-size: 0.9em;
    padding: 5px;
	font-family: 'Inter';
}

#item_info_extra
{
	&.percentages
	{
		& .items
		{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 2px solid #00000082;
			& .percent
			{
				font-family: 'inter';
				font-weight: 800;
				padding-left: 0.5em;
				min-width: 4em;
                text-align: left;
				background: linear-gradient(to right, hsla(var(--hue),100%,50%,0.6), transparent);
			}
			& .item
			{
                border-radius: 10px;
                padding-left: 0.5em;
                padding-right: 0.5em;
                margin: 5px;
                margin-top: 2px;
                box-shadow: 0px 2px 3px #00000055;
                font-weight: 600;
                color: #000000c9;
			}
			&:last-of-type
			{
				border-bottom: none;
			}
		}
		& > div:first-of-type
			{
				font-family: 'Inter';
				font-weight: 700;
				font-size: 150%;
				line-height: 150%;
				margin-top: 0.5em;
				& > span
				{
					font-size: 50%;
					vertical-align: middle;
				}
			}
	}
}


@property --new-item-bg-rot {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotatenewitembg {
  0% {
    --new-item-bg-rot: 0deg;
  }
  100% {
    --new-item-bg-rot: 360deg;
  }
}


#new_item_bg
{
	background: radial-gradient(transparent, #00000026), repeating-conic-gradient(from var(--new-item-bg-rot), color-mix(in srgb, var(--rarity-color) 40%, #fff 60%) 0 9deg, var(--rarity-color) 9deg 18deg);
    display: none;
	flex-direction: column;
	gap: 10px;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 100%;
    height: 100%;
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
	box-sizing: border-box;
	animation: rotatenewitembg 60s linear infinite;
	
	& > div:nth-of-type(1)
	{
		font-size: 300%;
		font-weight: 900;
		-webkit-text-stroke: 10px black;
		paint-order: stroke fill;
		color: white;
		filter: drop-shadow(0px 4px 2px #00000055);
	}
	&.open
	{
		display: flex;
	}
	& > img
	{
		filter: drop-shadow(0px 4px 2px #00000055);
		height: 300px;
	}
}

#new_item_rarity
{
	background: var(--rarity-color);
    border-radius: 10px;
    font-family: 'Inter';
    font-weight: 700;
    padding: 0.2em;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 150%;
    box-shadow: 0px 2px 4px #00000055;
    border: 2px solid black;
}

#new_item_num
{
	font-size: 2em;
    font-weight: 700;
    -webkit-text-stroke: 5px black;
    paint-order: stroke fill;
    color: white;
    position: absolute;
    left: 10px;
    top: 5px;
    font-family: 'Inter';
    filter: drop-shadow(0px 4px 2px #00000055);
}

.new_item_text
{
	background: #0000008a;
    border-radius: 10px;
    color: white;
    padding: 1em;
    backdrop-filter: blur(4px);
    box-shadow: 0px 2px 4px #00000055;
	max-width: 80%;
	margin-bottom: 0.5lh;

	& > div
	{
		font-family: 'Inter';
	}

	& > div:nth-of-type(1)
	{
		font-weight: 700;
		font-size: 1.2em;
		margin-bottom: 0.5lh;
	}
}


#new_item_bg.show > :is(div:nth-of-type(1), #new_item_rarity)
{
	animation: new_item_anim1 0.2s ease-out forwards;
}
#new_item_bg.show > :is(#new_item_img, .new_item_text)
{
	animation: new_item_anim2 0.2s ease-out forwards;
}

@keyframes new_item_anim1 {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: none;
  }
}
@keyframes new_item_anim2 {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: none;
  }
}