/* ------------------------------------------------------------------------ */

* {
	padding: 0;
	margin: 0;
	border: 0;
}

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

:focus,
:active {
	outline: none;
}

a:focus,
a:active {
	outline: none;
}

nav,
footer,
header,
aside {
	display: block;
}

html,
body {
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
	font-family: inherit;
}

input::-ms-clear {
	display: none;
}

button {
	cursor: pointer;
	background-color: transparent;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

a,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------- */

:root {
	--font-family: "Formular", sans-serif;
	--second-family: "Poppins", sans-serif;
}

body {
	font-family: var(--font-family);
	font-weight: 700;
	overflow-x: hidden;
	line-height: normal;
	
	background: #1e284d;
}

.wrapper {
	position: relative;
	max-width: 430px;
	background: #0d101b;
	margin: 0 auto;
	height: 100%;

	display: flex;
	flex-direction: column;
}

.main {
	padding: 0px 0px 50px 0px;
	/* overflow: hidden; */
	position: relative;
	background: #0d101b;
	flex: 1 1 100%;
}

.container {
	max-width: 430px;
	margin: 0 auto;
	padding: 0 20px;
}

.btn-main {
	display: inline-block;
	border-radius: 12px;
	padding: 10px 18px;

	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
}

.title {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
}

.swiper-scrollbar-drag {
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	transform: rotate(90deg);
	border-radius: 0;
}

.dropdown-content--visible {
	opacity: 1 !important;
	transform: translateY(0px) !important;
	pointer-events: all !important;
}

/* -----------------------header------------------- */

.header {
	padding: 13px 0;
	margin: 0px 0px 10px 0px;
	background-color: #161c2f;
}

.header-shop {
	margin: 0;
}

.header-referral-program {
	margin: 0px 0px 20px 0px;
}

.header__container {}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__left {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* —-----------------header-login----------------— */

.header__right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header__balance {
	display: flex;
	align-items: center;
	gap: 1px;
}

.header__balance-value {
	padding: 9px 12px;

	display: flex;
	align-items: center;
	gap: 6px;

	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px 0 0 12px;
}

.header__balance-value-img {
	max-width: 18px;
}

.header__balance-value-text {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
}

.header__balance-btn {
	border-radius: 0 12px 12px 0;
	padding: 8px;
	background: rgba(255, 255, 255, 0.1);

	display: flex;
	align-items: center;
	justify-content: center;
}

.header__balance-btn-body {
	padding: 4px;
	border-radius: 4px;
	background: rgba(1, 214, 118, 0.2);

	display: flex;
	align-items: center;
	justify-content: center;
}

.header__balance-btn-img {}

.header__profile-link {}

.header__profile-link-img {
	max-width: 40px;
}

/* -------------------live-tape--------------------- */

.live-tape {
	margin: 0px 0px 11px 0px;
	overflow: hidden;
}

.live-tape__container {
	max-width: 430px;
	margin: 0 auto;
	padding: 0 10px;
}

.live-tape__slider {}

.live-tape__slider-line {}

.live-tape__slide {
	padding: 6px 8px 6px;
	background: #262b40;
	border-radius: 8px;

	display: flex;
	align-items: center;
	gap: 6px;

	width: unset;
}

.live-tape__slide-img {
	max-width: 26px;
	max-height: 26px;
	object-fit: cover;
	width: 100%;
	border-radius: 3px;
}

.live-tape__slide-desc {}

.live-tape__slide-text {
	font-weight: 400;
	font-size: 8px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: rgba(209, 219, 255, 0.3);
}

.live-tape__slide-name {
	font-weight: 700;
	font-size: 10px;
	letter-spacing: -0.03em;
	color: #fff;
}

.live-tape__slide-value {
	padding: 5px 4px;
	background: rgb(255, 111, 7, 0.1);
	border-radius: 6px;

	display: flex;
	align-items: center;
	gap: 5px;
}

.live-tape__slide-icon {
	max-width: 14px;
	max-height: 14px;
	width: 100%;
}

.live-tape__slide-value-price {
	font-weight: 700;
	font-size: 11px;
	color: #ff6f07;
}

/* -------------------------banner------------------- */

.banner {
	margin: 0px 0px 22px 0px;
	overflow: hidden;
}

.banner__container {}

.banner__slider {
	position: relative;
}

.banner__slider-line {}

.banner__slide {
	position: relative;
	z-index: 1;
	padding: 29px 20px;
}

.banner__slide:nth-child(1) {
	background: #5d607a;
}

.banner__slide:nth-child(2) {
	background: radial-gradient(55.29% 188% at 24.37% 50%, rgb(51, 60, 88) 0%, rgb(30, 37, 60) 100%);
}

.banner__slide:nth-child(3) {
	background: radial-gradient(55.29% 188% at 24.37% 50%, rgb(51, 60, 88) 0%, rgb(30, 37, 60) 100%);
}

.banner__slide-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.banner__slide-text {
	min-height: 142px;
	max-width: 212px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
	gap: 15px;
}

.banner__slide-head {}

.banner__slide-title {

	font-weight: 900;
	font-size: 22px;
	line-height: 110%;
	letter-spacing: -0.03em;
	color: #fff;

	margin: 0px 0px 10px 0px;
}

.banner__slide-subtitle {
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.8);
}

.banner__slide-btn {
	display: inline-block;
}

.banner__slider-pagination {
	position: absolute;
	bottom: 13px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 100%;
	height: 7px;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.swiper-pagination-bullet {
	opacity: 0.3;
	background-color: #fff;
	margin: 0 !important;

	width: 5px;
	height: 5px;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	width: 7px;
	height: 7px;
}

/* ----------------------------------- */

.rec-tasks {
	margin: 0px 0px 20px 0px;
	overflow: hidden;
}

.rec-tasks__container {}

.rec-tasks__head {
	margin: 0px 0px 20px 0px;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 5px;
}

.rec-tasks__left {
	display: flex;
	align-items: center;
	gap: 13px;
	max-width: 170px;
}

.rec-tasks__icon {}

.rec-tasks__title {

	max-width: 150px;
	width: 100%;
}

.rec-tasks__right {
	display: flex;
	align-items: center;
	gap: 5px;
}

.rec-tasks__btn {
	border-radius: 12px;
	padding: 12px 18px;
	background: #161c2f;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: all .1s ease;
}

.rec-tasks__btn--active {
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
}

.rec-tasks__btn-prev {}

.rec-tasks__btn-arrow {
	transition: all .1s ease;
	opacity: 0.7;
}

.rec-tasks__btn--active.rec-tasks__btn-arrow {
	opacity: 1;
}

.rec-tasks__btn-next {}

.rec-tasks__link {
	display: inline-block;

	border-radius: 12px;
	padding: 10.5px 18px;
	background: #161c2f;

	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

.rec-tasks__slider {}

.rec-tasks__slider-line {}

.rec-tasks__slide {
	background: #161c2f;
	border-radius: 12px;
	padding: 4px;
	width: unset;

	display: flex;
	flex-direction: column;
	gap: 10px;

	text-align: center;
}

.rec-tasks__slide-img {
	max-height: 115px;
	border-radius: 10px;
}

.rec-tasks__slide-text {}

.rec-tasks__slide-name {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	margin: 0px 0px 6px 0px;
}

.rec-tasks__slide-sub {
	font-weight: 400;
	font-size: 10px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #939bbf;
}

.rec-tasks__slide-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	background: #222940;
	border-radius: 10px;
}

.rec-tasks__slide-bottom-left {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0px 0px 0px 5px;
}

.rec-tasks__slide-icon {
	max-width: 14px;
}

.rec-tasks__slide-value {
	font-weight: 700;
	font-size: 10px;
	color: #fff;
}

.rec-tasks__slide-bottom-right {}

.rec-tasks__slide-link {
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 10px;
	padding: 6px 12px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.rec-tasks__slide-link-arrow {}

/* --------------all-tasks------------------ */

.page__all-tasks {
	padding: 18px 0;
	margin: 0px 0px 30px 0px;
	background: rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.all-tasks__container {}

.all-tasks__inner {}

.all-tasks__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0px 0px 20px 0px;
}

.all-tasks__left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.all-tasks__title {}

.all-tasks__right {
	display: flex;
	align-items: center;
	gap: 5px;
}

.all-tasks__btn-prev {}

.all-tasks__btn-next {}

.all-tasks__slider {}

.all-tasks__slider-line {}

.all-tasks__slide {
	width: unset;
	min-height: 150px;

	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: start;
	padding: 5px 4px;

	position: relative;

	border-radius: 12px;
}

.all-tasks__slide-orange {
	background: linear-gradient(0deg, #ff6f07 -60%, #161c2f 95.73%);
}

.all-tasks__slide-blue {
	background: linear-gradient(0deg, #31bcff -60%, #161c2f 95.73%);
}

.all-tasks__slide-head {
	position: absolute;
	top: 5px;
	left: 5px;

	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px;

	background: rgba(255, 111, 7, 0.1);
	border-radius: 9px;
}

.all-tasks__slide-head-icon {}

.all-tasks__slide-head-text {
	font-weight: 500;
	font-size: 8px;
	color: #ff6f07;
}

.all-tasks__slide-pos {
	position: absolute;
	top: 37px;
	left: 50%;
	transform: translateX(-50%);
}

.all-tasks__slide-orange .all-tasks__slide-pos {
	top: 49px;
}

.all-tasks__slide .rec-tasks__slide-bottom {
	background-color: rgba(255, 255, 255, 0.1);

	width: 115px;
}

/* ---------------footre----------- */

.footer {
	max-width: 430px;

	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s ease;
	width: 100%;

	z-index: 2;

	transition: all .3s ease;

	display: flex;
	justify-content: end;
	flex-direction: column;

	overflow: hidden;
}


.footer::after {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	pointer-events: none;

	opacity: 0;
	background-color: #000000a4;

}

.footer--visible-bg {
	height: 100dvh;
}

.footer--visible-bg.footer::after {
	opacity: 1;
	z-index: -1;
}


.footer__btn {
	width: 100%;
	height: 30px;
	background: #14192a;
	position: relative;
	/* margin: 0px 0px 23px 0px; */
}

.footer__btn::after {
	content: '';

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 2px;

	background: #4a4f75;
	border-radius: 10px;
}

.footer__container {
	max-width: 430px;
	width: 100%;
	margin: 0 auto;
	padding: 0 23px;

	max-height: 0px;
	overflow: hidden;
	transition: all .3s ease;

	background-color: #0E111D;
}

.footer--visible {}

.footer__inner {
	padding: 23px 0 29px 0;
}

.footer__top {
	display: flex;
	align-items: center;
	gap: 14px;

	margin: 0px 0px 30px 0px;
}

.footer__top-link {}

.footer__img {}

.footer__text {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.04em;
	color: rgba(128, 141, 188, 0.8);
}

.footer__columns {
	max-width: 312px;
	width: 100%;

	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
}

.footer__column {}

.footer__column:nth-child(2) {
	max-width: 113px;
	width: 100%;
}

.footer__column-title {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.04em;
	color: #fff;

	margin: 0px 0px 20px 0px;
}

.footer__column-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.footer__column-item {}

.footer__column-item-link {
	display: flex;
	align-items: center;
	gap: 4px;
}

.footer__column-item-icon {}

.footer__column-item-text {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.04em;
	color: rgba(128, 141, 188, 0.8);
}

/* --------------burger-menu--------------- */

.burger-menu {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100dvh;
	z-index: 2;

	max-width: 430px;
	overflow: hidden;
	transition: all .2s ease;
	pointer-events: none;
}

.burger-menu--visible {
	backdrop-filter: blur(20px);
	pointer-events: all;
}

.burger-menu__window {
	height: 100%;
	max-width: 250px;
	overflow: auto;

	padding: 62px 20px 30px 20px;

	background: rgba(25, 32, 56);
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);

	display: flex;
	flex-direction: column;
	gap: 238px;
	transform: translateX(-100%);
	transition: all .4s ease;
}

.burger-menu--visible .burger-menu__window {
	transform: translateX(0%);
}

.burger-menu__top {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.burger-menu-logo {}

.burger-menu__logo-img {}

.burger-menu__column {}

.burger-menu__column-name {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #5c647e;

	margin: 0px 0px 25px 0px;
}

.burger-menu__column-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.burger-menu__column-item {}

.burger-menu__column-item-link {
	display: flex;
	align-items: center;
	gap: 6px;
}

.burger-menu__column-item-img {}

.burger-menu__column-item-link--active .burger-menu__column-item-img path {
	fill: #ff6f07;
}

.burger-menu__column-item-link-bottom--active .burger-menu__column-item-img path {
	stroke: #ff6f07;
}

.burger-menu__column-text {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #939bbf;
}

.burger-menu__column-item-link--active .burger-menu__column-text {
	color: #ff6f07;
}

.burger-menu__column-item-link-bottom--active .burger-menu__column-text {
	color: #ff6f07;
}

.burger-menu__bottom {}

.burger-menu__bottom-btn {
	position: relative;
	overflow: hidden;
	z-index: 1;
	width: 100%;
	padding: 8px 15px;
	border: 1px solid rgba(229, 238, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
	background: rgba(96, 135, 213, 0.15);

	margin: 0px 0px 20px 0px;
}

.burger-menu__bottom-btn-pos {
	position: absolute;
	bottom: 0;
	left: -3px;
	z-index: -1;
}

.burger-menu__bottom-btn-pos-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.burger-menu__bottom-btn-text {
	text-align: start;

	max-width: 133px;
	margin: 0 0 0 auto;
}

.burger-menu__bottom-btn-name {
	font-weight: 700;
	font-size: 14px;
	line-height: 164%;
	color: #fff;
}

.burger-menu__bottom-btn-sub {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.35);
}

.burger-menu__lang {}

.burger-menu__lang-text {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #5c647e;

	margin: 0px 0px 14px 0px;
}

.burger-menu__lang-dropdown {
	position: relative;
}

.burger-menu__lang-active {
	display: flex;
	align-items: center;
	gap: 8px;
}

.burger-menu__lang-active-img {}

.burger-menu__lang-active-text {
	font-weight: 700;
	font-size: 14px;
	line-height: 164%;
	color: #a4abc1;
}

.burger-menu__lang-active-arrow {
	transition: all .3s ease;
}

.burger-menu__lang-active--active .burger-menu__lang-active-arrow {
	transform: rotate(180deg);
}


.burger-menu__lang-dropdown-content {
	position: absolute;
	top: -110px;
	left: 0;
	width: 100%;
	z-index: 2;

	padding: 16px 10px 10px;

	background-image: url("../img/burger/bg-lang.svg");
	background-size: cover;

	border-radius: 15px;
	overflow: hidden;


	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: all .3s ease;
}

.burger-menu__lang-dropdown-content--visible {
	opacity: 1;
	transform: translateY(0px);
	pointer-events: all;
}

.burger-menu__lang-dropdown-body {
	padding: 0px 0px 10px 0px;
}

.burger-menu__lang-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 8px 6px;
}

.burger-menu__lang-dropdown-item-img {}

.burger-menu__lang-dropdown-item-text {
	font-weight: 500;
	font-size: 14px;
	line-height: 164%;
	letter-spacing: -0.03em;
	color: #bdbbe2;
}

.burger-menu__lang-dropdown-item--active {
	background: rgba(64, 75, 108, 0.6);
	border-radius: 8px;
}



.burger-menu__window::-webkit-scrollbar {
	width: 3px;
}

.burger-menu__window::-webkit-scrollbar-track {
	background-color: transparent;
}

.burger-menu__window::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(131, 126, 126, 0.3);
}

/* ----------------statistics--------------- */

.statistics {
	padding: 18px 10px 10px 10px;
	background: #161c2f;
	border-radius: 12px;
}

.statistics-title {
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 15px 0px;
	display: flex;
	align-items: center;
	gap: 8px;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #939bbf;
}

.statistics-title-img {}

.statistics__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.statistics__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.statistics__item-img {
	width: 45px;
	height: 45px;
	background: rgba(255, 111, 7, 0.15);
	border-radius: 8px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.statistics__item-image {}

.statistics__item-content {}

.statistics__item-text {
	font-weight: 400;
	font-size: 10px;
	letter-spacing: -0.03em;
	color: #939bbf;
	margin: 0px 0px 2px 0px;
}

.statistics__item-value {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
}



/* ----------------modal-case----------- */

.modal-case {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: transparent;

	max-width: 430px;

	padding: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: all .4s ease;
	background-color: #000000a4;
}

.modal-case--visible {
	opacity: 1;
	pointer-events: all;
	z-index: 5;
	transition: all .3s ease;
}


.modal-case__window {
	padding: 25px 20px;
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: #161c2f;
	border-radius: 20px;
	height: 100%;
	max-height: 460px;
	overflow: auto;

	position: relative;
	z-index: 6;
}

.modal-case-cancel {
	position: absolute;
	top: 28px;
	right: 28px;
	z-index: 12;
}

.modal-case-cancel-img {}

.modal-case__top {
	padding: 0px 20px;
	position: relative;
	z-index: 10;
}

.modal-case__title {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	margin: 0px 0px 10px 0px;
}

.modal-case__subtitle {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: rgba(244, 246, 255, 0.8);

	margin: 0px 0px 20px 0px;
}

.modal-case__subtitle-sp {
	color: #ff6f07;
}

.modal-case__lane {
	position: relative;
	max-width: 340px;
	margin: 0 auto;
	overflow: hidden;
	padding: 10px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	z-index: 10;
}

.modal-case__lane-body {
	position: relative;
}

.modal-case__lane-body::after {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	z-index: 1;

	background: linear-gradient(270deg, #161c2f00, #161c2f);
}

.modal-case__lane-body::before {
	content: '';

	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 100%;
	z-index: 1;

	background: linear-gradient(-270deg, #161c2f00, #161c2f);
}

.modal-case-pointer {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.modal-case__list {
	/* position: relative; */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	transition: 2s cubic-bezier(.21, .53, .29, .99);
	transform: translateX(-42px);
}

.modal-case__item {}

.modal-case__promocode {
	padding: 9px 9px 9px 16px;
	margin: 0px 0px 15px 0px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 12px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.modal-case__promocode-left {
	display: flex;
	align-items: center;
	gap: 11px;
}

.modal-case__promocode-icon {}

.modal-case__promocode-input {
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.03em;
	line-height: 140%;
	color: #fff;
	background-color: transparent;
	max-width: 130px;
	width: 100%;
}

.modal-case__promocode-input::placeholder {
	color: rgba(173, 206, 255, 0.3);
}

.modal-case__promocode-btn {
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 8px;
	padding: 9px 13px;

	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;
}

.modal-case__desc {
	display: flex;
	align-items: start;
	gap: 7px;

	padding: 0px 0px 10px 0px;
	margin: 0px 0px 15px 0px;

	border-bottom: 1px solid #bdbbe225;
}

.modal-case__dersc-icon {}

.modal-case__text {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #888da3;
}

.modal-case__list-prizes {}

.modal-case__list-prizes-title {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #fff;

	margin: 0px 0px 15px 0px;
}

.modal-case__list-prizes-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex-wrap: wrap;
}

.modal-case__list-prizes-item {}

.modal-case__list-prizes-item-img {}

.modal-case__hide {
	transition: all .3s ease;
}

.modal-case__hide--hide {
	opacity: 0;
	display: none;
}

.modal-case__winnings {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	opacity: 0;
	pointer-events: none;
	transition: all .3s ease;
}

.modal-case__winnings--visible {
	pointer-events: all;
	opacity: 1;
}

.modal-case__winnings-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.modal-case__winnings-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	height: 100%;
}

.modal-case__winnings-icno {
	max-width: 85px;
}

.modal-case__winnings-title {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #ff8540;
	margin: 12px 0px 0px 0px;
}

.modal-case__winnings-value {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;
	margin: 0px 0px 27px 0px;
}

.modal-case__subtitle-sp {}

.modal-case__winnings-btn {
	border-radius: 8px;
	padding: 14px 15px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	margin: 0px 0px 37px 0px;
}


/* -----------------modal-login------------- */

.moda-login {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	max-width: 430px;
	z-index: -1;

	padding: 20px;

	transition: all .3s ease;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	background-color: #000000a4;
}

.moda-login--visible {
	z-index: 5;
	opacity: 1;
	pointer-events: all;
}

.moda-login__window {
	padding: 25px 20px;
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: #161c2f;
	border-radius: 20px;

	max-width: 380px;
	margin: 0 auto;
	max-height: 455px;
	height: 100%;
	overflow: auto;

	position: relative;
}

.moda-login__cancel {
	position: absolute;
	top: 28px;
	right: 28px;
}

.moda-login__cancel-icon {}

.moda-login__body {}

.moda-login__title {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	margin: 0px 0px 10px 0px;

	padding: 0 40px;
}

.moda-login__subtitle {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: rgba(147, 155, 191, 0.8);

	margin: 0px auto 15px auto;
	max-width: 246px;
}

.moda-login__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;

	max-width: 340px;
	overflow: hidden;

	position: relative;

	margin: 0px 0px 25px 0px;
}

.moda-login__list::after {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 100%;
	z-index: 1;

	background: linear-gradient(270deg, #161c2f00, #161c2f);
}

.moda-login__list::before {
	content: '';

	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	z-index: 1;

	background: linear-gradient(-270deg, #161c2f00, #161c2f);
}

.moda-login__item {}

.moda-login__item-img {
	max-width: 60px;
}

.moda-login__text {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #939bbf;

	position: relative;

	max-width: 340px;
	margin: 0 auto 15px auto;
	overflow: hidden;
}

.moda-login__text::before {
	content: '';

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 110px;
	height: 1px;

	background: linear-gradient(270deg, #bdbbe2 0%, #bdbbe28a 100%);
	opacity: 0.2;
}

.moda-login__text::after {
	content: '';

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 110px;
	height: 1px;

	background: linear-gradient(270deg, #bdbbe2 0%, #bdbbe28a 100%);
	opacity: 0.2;
}

.moda-login__link {
	display: flex;
	flex-direction: column;
	gap: 5px;

	margin: 0px 0px 14px 0px;
}

.moda-login__link-item {
	padding: 16.5px 20px;
	display: flex;
	align-items: center;
	gap: 11px;
	border-radius: 12px;
}

.moda-login__link-item-google {
	background: rgba(245, 109, 112, 0.15);
}

.moda-login__link-item-vk {
	background: rgba(96, 135, 213, 0.15);
}

.moda-login__link-item-tg {
	background: rgba(101, 179, 215, 0.15);
}

.moda-login__link-item-icon {}

.moda-login__link-item-text {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.03em;
}

.moda-login__link-item-google .moda-login__link-item-text {
	color: #f56d70;
}

.moda-login__link-item-vk .moda-login__link-item-text {
	color: #6087d5;
}

.moda-login__link-item-tg .moda-login__link-item-text {
	color: #65b3d7;
}

.moda-login__check {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.moda-login__check+label {
	display: flex;
	align-items: start;
	user-select: none;
}

.moda-login__check+label::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	flex-grow: 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	background: rgba(181, 215, 255, 0.1);
	margin-right: 6px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70% 70%;
}

.moda-login__check:checked+label::before {
	background-color: #ff6f07;
	background-image: url("../img/shop/game-slider/check.svg");
}

.moda-login__label-check {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: rgba(147, 155, 191, 0.8);
}

.moda-login__label-check-link {
	color: #ff6f07;
}

/* -----------------modal-game-------------- */

.modal-game {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #000000a4;
	padding: 20px;
	z-index: 2;

	max-width: 430px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: all .3s ease;
}

.modal-game--visible {
	opacity: 1;
	pointer-events: all;
}

.modal-game__window {
	max-width: 380px;
	margin: 0 auto;

	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: #161c2f;
	border-radius: 20px;

	height: 100%;
	max-height: 740px;
	overflow: auto;

	padding: 20px 26px;
}

.modal-game__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin: 0px 0px 20px 0px;
}

.modal-game__title-text {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-game__btn-cancel {}

.modal-game__btn-cancel-img {}

.modal-game__head {
	display: flex;
	align-items: center;
	gap: 15px;

	margin: 0px 0px 15px 0px;
}

.modal-game__head-img {
	max-width: 100px;
}

.modal-game__head-content {}

.modal-game__head-value {
	display: flex;
	align-items: center;
	gap: 6px;

	margin: 0px 0px 10px 0px;

	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-game__head-value-icon {
	max-width: 22px;
}

.modal-game__head-text {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: rgba(147, 155, 191, 0.8);

	margin: 0px 0px 4px 0px;
}

.modal-game__head-list {
	display: flex;
	align-items: center;
	gap: 2px;

	margin: 0px 0px 20px 0px;
}

.modal-game__instruction {
	margin: 0px 0px 20px 0px;
}

.modal-game__instruction-title {
	margin: 0px 0px 10px 0px;

	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-game__instruction-subtitle {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #838ba7;
}

.modal-game-rules {}

.modal-game-rules__title {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;

	margin: 0px 0px 10px 0px;
}

.modal-game-rules__list {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 15px;

	padding: 15px 13px;
	background: rgba(51, 60, 89, 0.49);
	border-radius: 10px;

	margin: 0px 0px 20px 0px;
}

.modal-game-rules__item {
	max-width: 80px;
	width: 100%;
}

.modal-game-rules__item-img {
	margin: 0px 0px 6px 0px;
}

.modal-game-rules__item-text {
	font-weight: 500;
	font-size: 10px;
	letter-spacing: -0.03em;
	color: #abb5d8;
}

.modal-game__awards {
	margin: 0px 0px 25px 0px;
}

.modal-game__awards-titl {
	margin: 0px 0px 15px 0px;

	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-game__awards-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.modal-game__awards-item {
	padding: 6px 9px 6px 6px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	background: rgba(51, 60, 89, 0.49);
	border-radius: 10px;
}

.modal-game__awards-left {
	display: flex;
	align-items: center;
	gap: 6px;
}

.modal-game__awards-step {
	width: 26px;
	height: 26px;

	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-game__awards-step-number {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;
}

.modal-game__awards-text {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #838ba7;
}

.modal-game__awards-right {
	padding: 4px 5px;

	background: #ff6e0733;
	border-radius: 6px;

	display: flex;
	align-items: center;
	gap: 5px;
}

.modal-game__awards-icon {
	max-width: 14px;
}

.modal-game__awards-value {
	font-weight: 700;
	font-size: 11px;
	color: #ff6f07;
}

.modal-game__btn {
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 12px;

	padding: 16.5px;
	width: 100%;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
	text-align: center;
}

/* -----------------modal-how-it-work------------------ */

.modal-how-it-work {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #000000a4;
	padding: 20px;
	z-index: 1;

	max-width: 430px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.modal-how-it-work--visible {
	z-index: 2;
	opacity: 1;
	pointer-events: all;
}

.modal-how-it-work__window {
	max-width: 380px;
	margin: 0 auto;

	padding: 30px 20px 20px 20px;
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: #161c2f;
	border-radius: 20px;

	max-height: 440px;
	height: 100%;
	overflow: auto;

	position: relative;
}

.modal-how-it-work__cancel {
	position: absolute;
	top: 31px;
	right: 31px;
}

.modal-how-it-work__cancel-img {}

.modal-how-it-work__title {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	margin: 0px 0px 20px 0px;

	padding: 0 20px;
}

.modal-how-it-work__top {
	position: relative;
	z-index: 1;
	overflow: hidden;

	padding: 20px;
	margin: 0px 0px 12px 0px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	background: radial-gradient(55.29% 188% at 24.37% 50%, rgb(51, 60, 88) 0%, rgb(30, 37, 60) 100%);
}

.modal-how-it-work__top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.modal-how-it-work__top-desc {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-how-it-work__top-desc-text {}

.modal-how-it-main {
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	background: radial-gradient(52.94% 85.71% at 49.03% 50%, rgb(51, 60, 88) 0%, rgb(30, 37, 60) 100%);
	overflow: hidden;

	position: relative;
	padding: 0px 20px 15px 20px;
}

.modal-how-it-work__main-bg {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.modal-how-it-work__main-desc {
	padding: 93px 0px 0px 0px;
}

.modal-how-it-work__main-title {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0px 0px 10px 0px;

	max-width: 150px;
}

.modal-how-it-work__main-subtitle {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	color: #939bbf;
}

/* ------------------modal-promo-------------------- */

.modal-promo {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #000000a4;
	padding: 20px;
	z-index: 1;

	max-width: 430px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.modal-promo--visible {
	z-index: 2;
	opacity: 1;
	pointer-events: all;
}

.modal-promo__window {
	max-width: 380px;
	width: 100%;
	margin: 0 auto;

	overflow: auto;
	max-height: 355px;
	height: 100%;

	padding: 25px 20px 20px 20px;
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: #161c2f;
	border-radius: 20px;

	position: relative;
}

.modal-promo__btn-cancel {
	position: absolute;
	top: 28px;
	right: 28px;
}

.modal-promo__btn-cancel-img {}

.modal-promo__title {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;

	padding: 0 30px;
	margin: 0px 0px 10px 0px;
}

.modal-promo__subtitle {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: -0.03em;
	text-align: center;
	color: rgba(147, 155, 191, 0.8);

	max-width: 252px;
	margin: 0px auto 15px auto;
}

.modal-promo__links {
	display: flex;
	flex-direction: column;
	gap: 5px;

	margin: 0px 0px 10px 0px;
}

.modal-promo__item {
	padding: 10px 10px 10px 16px;
	background: #293045;
	border-radius: 10px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.modal-promo__link {}

.modal-promo__item-left {
	display: flex;
	align-items: center;
	gap: 5px;
}

.modal-promo__item-left-text {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-promo__item-right {}

.modal-promo__item-right-link {
	padding: 10px 15px;
	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 6px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.modal-promo__item-right-link-arrow {}

.modal-promo__code {
	padding: 17px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 10px;

	display: flex;
	align-items: center;
	gap: 11px;

	margin: 0px 0px 10px 0px;
}

.modal-promo__code-icon {}

.modal-promo__code-inp {
	background-color: transparent;

	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
}

.modal-promo__code-inp::placeholder {
	color: rgba(173, 206, 255, 0.3);
}

.modal-promo__btn {
	padding: 16.5px;
	width: 100%;

	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 12px;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #fff;
	text-align: center;
}

/* ---------------------modal-instruction---------------------- */

.modal-instruction {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #000000a4;
	padding: 20px;
	z-index: 2;

	max-width: 430px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.modal-instruction--visible {
	z-index: 5;
	opacity: 1;
	pointer-events: all;
}

.modal-instruction__window {
	max-width: 365px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: auto;
	position: relative;
}

.modal-instruction__card {
	padding: 15px 20px 20px;

	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
	background: rgba(47, 57, 87, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;

	position: relative;
	z-index: 1;

	overflow: hidden;

	opacity: 0;
	transition: all .3s ease;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
}

.modal-instruction__card::after {
	content: '';

	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	backdrop-filter: blur(30px);
}

.modal-instruction__card--active {
	opacity: 1;
}

.modal-instruction__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.modal-instruction__title {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin: 0px 0px 7px 0px;
}

.modal-instruction__text {
	font-weight: 700;
	font-size: 18px;
	line-height: 128%;
	letter-spacing: -0.03em;
	color: #ff6f07;
}

.modal-instruction__steps {
	font-weight: 700;
	font-size: 12px;
	color: #01d676;

	padding: 7px 13px;
	background: rgba(1, 214, 118, 0.15);
	border-radius: 8px;
}

.modal-instruction__subtitle {
	max-width: 265px;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.03em;
	color: #e7eaf6;

	margin: 0px 0px 21px 0px;
}

.modal-instruction__btn {
	padding: 7px 13px;

	font-weight: 700;
	font-size: 12px;
	color: #fff;

	box-shadow: 0 1px 20px 0 rgba(255, 111, 7, 0.15);
	background: #ff6f07;
	border-radius: 8px;

	display: flex;
	align-items: center;
	gap: 4px;
}

.modal-instruction-img-icon {
	display: block;
	margin: 0px 0px 30px 0px;
}

.modal-instruction__pos-img {
	position: absolute;
	bottom: 0;
	right: 0;
}