:root {
	--sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top));
	--saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom));
	--sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left));
	--sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right));

    --normal-font-color: #CCCCCC;

	--font-size-small: 10px;
	--font-size-normal: 16px;
	--font-size-larger: 24px;
	--font-size-header: 32px;
}

@font-face {
	font-family: '04b_03';
	src: url('/assets/fonts/04b_03.ttf');
	font-weight: normal;
	font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;

    font-family: '04b_03', sans-serif;
	font-size: var(--font-size-normal);
    color: var(--normal-font-color);
	overflow: hidden;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: url('assets/reticle.png') 30 30, crosshair;
    image-rendering: pixelated;
}

#sh-hud {
	position: absolute;
	left: var(--sail);
	right: var(--sair);
	top: var(--sait);
	bottom: var(--saib);
	pointer-events: none;
}

#sh-hud * {
	pointer-events: all;
}

/*.notouch, canvas {*/
* {
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: none;
}

.nopointers, .nopointers * {
	pointer-events: none !important;
}

.yestouch, .yestouch * {
	touch-action: manipulation;
	-webkit-touch-callout: inherit;
	-webkit-user-select: inherit;
	-khtml-user-select: inherit;
	-moz-user-select: inherit;
	-ms-user-select: inherit;
	user-select: text;
	outline: inherit;
}

:root {
	--orange-color: #df7126;
	--beige-color: #e6e4d1;
	--dark-beige-color: #8f8d7c;
	--blue-color: #d5e8f6;

	--font-size-small: 10px;
	--font-size-normal: 16px;
	--font-size-larger: 24px;
	--font-size-header: 32px;
}

.sh-hidden {
	display: none !important;
}


.sh-button , .sh-button-large {
	font-family: '04b_03', sans-serif;
	color: #ffffff;
	background-color: #555;	
}

.sh-button:hover, .sh-button-large:hover {
	background-color: #666;
}

.sh-button {
	font-size: var(--font-size-normal);
	padding: 10px 20px;
}

.sh-button-large {
	font-size: var(--font-size-larger);
	padding: 12px 24px;
}



/******************************
 * joystick
 ******************************/

/*div.nipple {
}*/

div.nipple div.back {
	background: #878b8d !important;
}

div.nipple div.front {
	background: #878b8d !important;
}

#mazey-mobile-leftjoystick-area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 33%;
}

#mazey-mobile-rightjoystick-area {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 33%;
}

/*** fake joystick ***/
.mazey-mobile-fakejoystick {
	position: absolute;
	bottom: 16px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	opacity: 0.25;
	pointer-events: none;
}

.mazey-mobile-fakejoystick div.front {
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	transform: translate(-50%, 50%);
	background: #878b8d;
	opacity: 0.5;
	border-radius: 50%;
}
.mazey-mobile-fakejoystick div.back {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #878b8d;
	opacity: 0.5;
	border-radius: 50%;
}

#mazey-mobile-fakejoystick-left {
	left: 16px;
}

#mazey-mobile-fakejoystick-right {
	right: 16px;
}

/******************************
 * sh-modal 
 ******************************/
 .sh-modal {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
}

.sh-modal .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
}

.sh-modal .panel-compact {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	box-sizing: border-box;
	padding: 12px;
}

.sh-modal .panel-fullscreen {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 64px;
	bottom: 64px;
	box-sizing: border-box;
	/*display: none;*/
	padding: 12px;
	text-align: center;
}

.sh-modal .panel-fullscreen,  .sh-modal .panel-compact{
	/*border-image-source: url('/assets/img/panel.png');
	border-image-repeat: round;
	border-image-slice: 4 fill;*/
	border-width: 4px;
	border-style: solid;
    background-color: #000D;
}

.sh-modal .header {
	text-align: left;
	padding-bottom: 8px;
	font-size: var(--font-size-header);
}

#sh-waiting-for-players-private-room {
	padding-top: 16px;
}

#sh-loadingscene {
	position: absolute;
	left: var(--sail);
	right: var(--sair);
	top: var(--sait);
	bottom: var(--saib);
}

#sh-loadingscene .contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 12px;
	

}

#sh-loadingscene-header {
	font-size: var(--font-size-header);
	letter-spacing: 8px;

}

#sh-loadingscene-progressbar {
	margin-top: 20px;
	margin-bottom: 30px;
	width: 100px;
	height: 20px;
	border: 2px solid #FFF;
	background-color: #FFF;
	position: relative;
}

#sh-loadingscene-progressbar-bar {
	height: 100%;
	background-color: #0F0;
	position: absolute;
	top: 0;
	left: 0;
}

#sh-loadingscene-progressbar-text {
	width: 100%;
	height: 100%;
	color: #FFF;
	font-size: 16px;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	line-height: 20px;
}

#sh-loadingscene-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#sh-loadingscene hr {
	width: 100px;
}