html,
body {
  -webkit-overflow-scrolling: touch;
  overflow:auto;
  height:100vh;
  width:100vw;
  
}
html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  scroll-behavior: smooth;
  overflow:hidden;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}
img {
	pointer-events: auto;
	-webkit-user-drag: none;
	user-drag: none;
	draggable: false;
}


body {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	background: #121382;
	font-family: "GT Walsheim Pro", Arial, sans-serif;
	font-feature-settings: "liga" off, "clig" off;

}
.screen {
	position: relative;
	width: 580px;
	min-height: 950px;
	background: url("../images/bg.jpg") top right no-repeat;
	background-size: auto 100%;
	overflow-x:hidden;

  margin:0 auto;

}
.item {
	position: absolute;
	width: 1px;
	height: 1px;
	cursor: pointer;
}
.item img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/*pointer-events: none;*/
}
.hud {
	position: relative;
	margin-top: 10px;
	text-align: center;
	color: white;
	font-family: sans-serif;
	z-index: 11;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.points {
	padding: 30.809px 41.079px;

	align-items: center;
	border-radius: 51.349px;
	background: #de1e81;
	font-size: 27.386px;
	font-style: normal;
	font-weight: 400;
	line-height: 30.809px; /* 112.5% */
	letter-spacing: 0.822px;
}
.score {
	font-size: 27.386px;
	font-style: normal;
	font-weight: 900;
	line-height: 30.809px; /* 112.5% */
	letter-spacing: 0.822px;
	text-transform: uppercase;
}
.time {
	margin-top: 11px;
	color: #121382;

	text-align: center;

	font-size: 36px;
	font-style: normal;
	font-weight: 900;
	line-height: 40px;
}

.hero-img {
	text-align: center;
	padding-top: 100px;
}
.hero-bg-img {
	margin-bottom: -35px;
	z-index: 1;
	position: relative;
	width: 488.648px;
}
.hero-main {
	color: #121382;

	text-align: center;
	font-size: 128.96px;
	font-style: normal;
	font-weight: 900;
	line-height: 76.053px; /* 58.974% */
	text-transform: uppercase;
	position: relative;
}
.hero-main span {
	font-size: 99.2px;
	font-style: normal;
	font-weight: 900;
	line-height: 76.053px;
	text-transform: uppercase;
}
.hero-subtitle {
	color: #121382;
	text-align: center;
	margin-top: 131px;
	font-size: 36px;
	font-style: normal;
	font-weight: 900;
	line-height: 40px; /* 111.111% */
}
.hero-description {
	color: #121382;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 35px; /* 153.846% */
	margin: 18px 18px 46px 61px;
	position: relative;
}

.btn {
	padding: 24px 36px;
	border-radius: 40px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 3px;
	text-align: center;
	text-decoration: none;
	word-wrap: break-word;
	display: inline-block;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border: none;
	background: #de1e81;
	color: white;
	text-transform: uppercase;
	outline: 4px transparent solid;
	outline-offset: -4px;
	line-height: 140%;
	margin: 0 auto;
}

.decor-img {
	position: absolute;
}
.decor-img0 {
	left: 35px;
	bottom: -143px;
	width: 158px;
	height: 154.078px;
}
.decor-img2 {
	right: 57px;
	bottom: -100px;
	width: 147.459px;

	transform: rotate(-42.789deg);
}
.decor-img3 {
	width: 185.387px;
	height: 204.839px;
	transform: rotate(51.211deg);
	left: 30px;
	top: -2px;
}

.decor-img5 {
	width: 140.52px;

	transform: rotate(155.291deg);
	left: 3px;
	bottom: -109px;
}

.hud-title {
	color: #121382;
	text-align: center;
	margin-top: 45px;
	margin-bottom: 24px;
	font-size: 36px;
	font-style: normal;
	font-weight: 900;
	line-height: 40px; /* 111.111% */
}
.finish-info {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0px 40px;
}
.finish-rank {
	color: #121382;

	text-align: center;
	margin: 12px;
	font-size: 70px;
	font-style: normal;
	font-weight: 900;
	line-height: 76.053px; /* 108.648% */
	text-transform: uppercase;
}

input[type="text"] {
	width: 100%;
	height: 72px;
	border-radius: 50px;
	border: none;
	padding: 0 24px;
	font-size: 18px;
	font-family: inherit;
	color: #121382;
	background: white;

	text-align: center;

	font-size: 27.386px;
	font-style: normal;
	font-weight: 900;
	line-height: 30.809px; /* 112.5% */
	letter-spacing: 0.822px;
	text-transform: uppercase;
	outline: none;
	margin-bottom: 18px;
}
input[type="text"]::placeholder {
	color: #121382;
}
.btn:focus,.btn:active {
	outline: none!important;
	background: transparent;
	outline: none;
  	box-shadow: none;
}
.top-btn,
.back-btn {
	outline: 4px #121382 solid;

	color: #121382;
	background: transparent;
	margin-top: 18px;
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
	line-height: 14px; /* 100% */
	letter-spacing: 2px;
	width: 100%;
}
.back-btn{
	width:auto!important;
}
.top-btn::after,
.back-btn::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M8.4043 0.931641L14.7499 7.27729L8.4043 13.6229" stroke="%23121382" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.7499 7.27734L1.25 7.27734" stroke="%23121382" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
		no-repeat center/contain;
}

.invite-btn {
	outline: 4px #fff90e solid;

	color: #fff90e;
	background: transparent;
	margin-top: 18px;
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
	line-height: 14px; /* 100% */
	letter-spacing: 2px;
	width: 100%;
}
.invite-btn::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M8.4043 0.931641L14.7499 7.27729L8.4043 13.6229" stroke="%23FFF90E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.7499 7.27734L1.25 7.27734" stroke="%23FFF90E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
		no-repeat center/contain;
}
.finish-invite {
	margin-top: 129px;
	color: #fff;

	text-align: center;

	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
}
.rank-item {
	display: flex;
	padding: 20px 41.079px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 200px;
	border-bottom: 1px solid #121382;
	width: 100%;
	color: #121382;
}

.rank-list {
	margin: 0 40px;
	width: calc(100% -80px);
}
.rank-score {
	text-align: right;
	font-size: 27.386px;
	font-style: normal;
	font-weight: 900;
	line-height: 30.809px; /* 112.5% */
	letter-spacing: 0.822px;
	text-transform: uppercase;
}
.rank-name {
	font-size: 27.386px;
	font-style: normal;
	font-weight: 400;
	line-height: 30.809px; /* 112.5% */
	letter-spacing: 0.822px;
	text-transform: uppercase;
}
#game,
#finish,
#leaderboard,
.start-btn.btn {
	display: none;
}