:root {
	/*--ems: 1em;*/
	--px: calc(var(--construct-scale) * 1px);

	--pxNeg: calc(var(--construct-scale) * -1px);

	--pxO: calc(var(--construct-scale) * 0.8px);
	--pxONeg: calc(var(--pxO) * -1);

	--ems: calc(var(--construct-scale) * 20px);
	--ems_0_1: calc(var(--ems) * 0.1);
	--ems_0_2: calc(var(--ems) * 0.2);
	--ems_0_3: calc(var(--ems) * 0.3);
	--ems_0_4: calc(var(--ems) * 0.4);
	--ems_0_5: calc(var(--ems) * 0.5);
	--ems_0_6: calc(var(--ems) * 0.6);
	--ems_0_7: calc(var(--ems) * 0.7);
	--ems_0_8: calc(var(--ems) * 0.8);
	--ems_0_9: calc(var(--ems) * 0.9);
	--ems_1: var(--ems);
}

/* Try removing issue on mobile devices with text selection */

* {
	-webkit-tap-highlight-color: transparent;
}

*:focus {
	outline: none;
}

canvas {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	outline: none;
}

canvas:focus {
	outline: none;
}

html,
body {
	margin: 0;
	padding: 0;
	touch-action: manipulation;
}

html {
	font-family: "NotoSans";
	font-size: calc(var(--px) * 6);
	/*pointer-events: none;*/
}

label {
	pointer-events: none;
}

.pointerLabel label {
	pointer-events: auto;
}

@font-face {
	font-family: "LilitaOne";
	src: url("Fonts/LilitaOne.ttf") format("truetype"); /* Add formats as needed */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "NotoSans";
	src: url("Fonts/NotoSans.ttf") format("truetype"); /* Add formats as needed */
	font-weight: normal;
	font-style: normal;
}

/* Prevent cjk breaking */
.noBreak {
	white-space: nowrap;
	word-break: keep-all;
}

.gameWorld {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
}

/*
.textOutline {
	-webkit-text-stroke: var(--px) black;
}*/

/* prettier-ignore */
.textOutline {
	text-shadow: 
    var(--pxONeg) var(--pxONeg) var(--pxO) black, 
    var(--pxO) var(--pxONeg) var(--pxO) black, 
    var(--pxONeg) var(--pxO) var(--pxO) black,
    var(--pxO) var(--pxO) var(--pxO) black;
}

.separator_html {
	height: calc(var(--px) * 0.3);
	background-color: #ccc;
	margin: calc(var(--px) * 1) 0;
	width: 100%;
	padding-left: 0;
}

.text_center {
	text-align: center;
}

.transformEase {
	transition: transform 0.1s ease;
}

.pointburst {
	position: absolute;
	font-family: "LilitaOne", sans-serif;
	font-size: calc(var(--px) * 10);
	color: yellow;
	font-weight: bold;
	opacity: 1;
	text-align: center; /* Horizontally center the text */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.inventory_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-content: start;
	overflow-y: auto;
	width: fit-content;
	height: fit-content;
	/*background-color: #ffffff2b;*/
}

.simplebar {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
	width: fit-content;
	height: fit-content;
}

.simplebar::-webkit-scrollbar {
	width: calc(var(--px) * 6);
}

.simplebar::-webkit-scrollbar-track {
	background: transparent;
}

.simplebar::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: calc(var(--px) * 3);
	transition: background-color 0.2s linear, opacity 0.2s linear;
	opacity: 0;
}

.simplebar:hover::-webkit-scrollbar-thumb {
	opacity: 1;
}

.simplebar::-webkit-scrollbar-thumb:active {
	background-color: rgba(0, 0, 0, 0.7);
}

.simplebar_white {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
	width: fit-content;
	height: fit-content;
}

.simplebar_white::-webkit-scrollbar {
	width: calc(var(--px) * 6);
}

.simplebar_white::-webkit-scrollbar-track {
	background: transparent;
}

.simplebar_white::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: calc(var(--px) * 3);
	transition: background-color 0.2s linear, opacity 0.2s linear;
	opacity: 0;
}

.simplebar_white:hover::-webkit-scrollbar-thumb {
	opacity: 1;
}

.simplebar_white::-webkit-scrollbar-thumb:active {
	background-color: rgba(255, 255, 255, 0.7);
}

.relative {
	position: relative;
}

.vertical {
	display: flex;
	flex-direction: column;
}

.horizontal {
	display: flex;
	flex-direction: row;
}

.inset0 {
	inset: 0;
}

.absolute {
	position: absolute;
}

/* Layout Classes */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Flexbox Classes */
.hidden {
	display: none;
}

.flex {
	display: flex;
}

.inlineFlex {
	display: inline-flex;
}

.flex_1 {
	flex: 1 1 0%;
}

.flexGrow {
	flex-grow: 1;
}

.row {
	flex-direction: row;
}

.col {
	flex-direction: column;
}

.wrap {
	flex-wrap: wrap;
}

.nowrap {
	flex-wrap: nowrap;
}

.pointer_none {
	pointer-events: none;
}

.pointer_auto {
	pointer-events: auto;
}

.justify_start {
	justify-content: flex-start;
}

.justify_center {
	justify-content: center;
}

.justify_end {
	justify-content: flex-end;
}

.justify_between {
	justify-content: space-between;
}

.items_start {
	align-items: flex-start;
}

.items_center {
	align-items: center;
}

.items_end {
	align-items: flex-end;
}

.self_start {
	align-self: flex-start;
}

.self_center {
	align-self: center;
}

.self_end {
	align-self: flex-end;
}

/* Wrap and overflow */

.flex_wrap {
	flex-wrap: wrap;
}

.flex_nowrap {
	flex-wrap: nowrap;
}

.flex_wrap_reverse {
	flex-wrap: wrap-reverse;
}

.overflow_auto {
	overflow: auto; /* Scrollbars will appear if content overflows */
}

.overflow_x_auto {
	overflow-x: auto;
}

.overflow_y_auto {
	overflow-y: auto;
}

.overflow_hidden {
	overflow: hidden;
}

.overflow_x_hidden {
	overflow-x: hidden;
}

.overflow_y_hidden {
	overflow-y: hidden;
}

/* Utility classes for sizing */

.s100 {
	width: 100%;
	height: 100%;
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.min-h-screen {
	min-height: 100vh;
}

.w50 {
	width: 50%;
}

.w33 {
	width: 33.333%;
}

.w66 {
	width: 66.667%;
}

.w25 {
	width: 25%;
}

.w75 {
	width: 75%;
}

/*bg*/

.bg_black {
	background-color: #000;
}

.bg_white {
	background-color: #fff;
}

.bg_gray {
	background-color: #b3b3b3;
}

/*Margin and Padding Classes*/

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.my_0 {
	margin-top: 0;
	margin-bottom: 0;
}

.my_1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.my_2 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.my_4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.my_8 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* Grid Classes */
.grid {
	display: grid;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-rows-1 {
	grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
	grid-template-rows: repeat(3, minmax(0, 1fr));
}

.gap_0 {
	gap: 0;
}

.gap_1 {
	gap: var(--ems_1);
}

.gap_2 {
	gap: calc(var(--ems) * 2);
}

.gap_4 {
	gap: 1rem;
}

.gap_8 {
	gap: 2rem;
}