@charset "UTF-8";
:root { --main-green: #14ff56; --main-purple: #8a77ef; --main-darkPurple: #6c5bc5; --main-white: #f6f6f6; --main-deskText: 28px; }

body { background: #1c2248; margin: 0; padding: 0; }

.footer, .fixed-footer-box { display: none; }

main .container { padding: 0 15px; margin: 0 auto; }

@media (min-width: 576px) { main .container { max-width: 540px; } }
@media (min-width: 720px) { main .container { max-width: 700px; } }
@media (min-width: 992px) { main .container { max-width: 700px; } }
@media (min-width: 1200px) { main .container { max-width: 700px; } }
.out-of-header { color: #fff; font-family: "Nunito", sans-serif; overflow-x: hidden; padding: 65px 0 0; position: relative; }

main * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
main ul { margin: 0; padding: 0; }
main ul li { list-style-type: disc; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; }
main ul li::before { content: none; }
main h1 { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FFF; font-size: 22px; font-style: italic; font-weight: 800; line-height: 130%; text-transform: uppercase; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
main h2 { font-size: 22px; font-style: normal; font-weight: 800; }
main p { font-size: 14px; font-style: normal; font-weight: 800; }
main section { display: none; padding-bottom: 120px; }
main section.active { display: block; }
main .landing-btn { background: var(--main-green); border-radius: 14px; -webkit-box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.75) inset, 0 6px 0 0 #11892E; box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.75) inset, 0 6px 0 0 #11892E; color: #075E1C; display: block; font-size: 16px; font-style: normal; font-weight: 900; line-height: 125%; letter-spacing: 1px; margin: 0 auto; padding: 14px 0; text-decoration: none; text-transform: uppercase; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; width: 270px; }
main .landing-btn:hover { border: 2px solid #FFF; -webkit-box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.75) inset, 0 6px 0 0 #11892E, 0 0 15px 5px #00FF48; box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.75) inset, 0 6px 0 0 #11892E, 0 0 15px 5px #00FF48; color: #fff; }
main .landing-btn:active { background: #009C2C; border: none; border-radius: 14px; -webkit-box-shadow: 0 3px 0 0 #008225 inset; box-shadow: 0 3px 0 0 #008225 inset; color: #075E1C; }
main .list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; margin: 17px auto 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
main .list p { font-size: 14px; font-style: normal; font-weight: 400; }
main .welcome { position: relative; text-align: center; }
main .welcome .container { position: relative; }
main .welcome::before { background: url(../img/bg.svg) no-repeat; background-size: cover; content: ''; height: 100%; left: 50%; min-width: 1440px; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; width: 100%; z-index: 0; }
main .visual { margin: 10px 0 13px; }
main .info-wrapper { border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.35); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin: 48px auto 32px; padding: 8px; text-align: left; width: 268px; }
main .info-item { display: grid; padding: 8px 8px 8px 30px; position: relative; gap: 4px; }
main .info-item::before { content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
main .info-item.prize::before { background: url(../img/raiting-star.png) no-repeat; background-size: contain; height: 24px; width: 24px; }
main .info-item.deadline::before { background: url(../img/timer.png) no-repeat; background-size: contain; height: 26px; width: 22px; }
main .info-title { font-size: 8px; font-style: normal; font-weight: 400; grid-template-columns: auto; letter-spacing: 0.24px; line-height: 120%; text-transform: uppercase; }
main .info-value, main .info-value .timer__body { font-size: 12px; font-style: normal; font-weight: 800; grid-template-columns: auto; line-height: 120%; }
main .terms-img { margin: 5% auto 0; max-width: 500px; width: 75%; }
main .terms .swiper-wrapper { padding: 0 0 2.5em; }
main .terms .swiper-slide { display: grid; }
main .terms .swiper-slide:not(:last-child) .terms-img { -webkit-animation: swing 7s infinite alternate; animation: swing 7s infinite alternate; -webkit-transform-origin: bottom; transform-origin: bottom; }
main .terms .swiper-text { font-size: 14px; font-style: normal; font-weight: 800; line-height: normal; min-height: 95px; padding-left: 59px; }
main .terms .swiper-pagination-bullet { background: #fff; height: 9px; opacity: 0.5; width: 9px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
main .terms .swiper-pagination-bullet-active { border-radius: 21.377px; opacity: 0.8; width: 27px; }
main .blockNum { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 12px; }
main .blockNum .num { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #335; border: 4px solid var(--main-darkPurple); border-radius: 50%; -webkit-box-shadow: 0px 4px 0 var(--main-darkPurple); box-shadow: 0px 4px 0 var(--main-darkPurple); display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 40px; font-style: normal; font-weight: 800; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 100%; min-height: 65px; min-width: 65px; padding: 2px; position: relative; text-align: center; z-index: 1; }
main .blockNum p:nth-child(2) { background: var(--main-darkPurple); border-radius: 0 10px 10px 0; -webkit-clip-path: polygon(0 0, 100% 0%, 95% 110%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 95% 110%, 0% 100%); font-size: 23px; font-style: normal; font-weight: 800; line-height: 100%; margin-left: -6px; padding: 7px; position: relative; width: 100%; z-index: 0; }
main .refresh-block { position: relative; }
main .refresh-btn { background: url(../img/refresh.svg) no-repeat; background-size: contain; border: none; cursor: pointer; height: 32px; position: absolute; outline: none; right: 1em; top: -3em; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; width: 30px; z-index: 1; }
main .refresh-btn.loading { -webkit-animation: spin .35s linear; animation: spin .35s linear; }
main .currentUser::before { background: #0B0B2F; border-radius: 0 0 20px 20px; height: 15.5em; content: ''; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; }
main .currentUser-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 .5em; position: relative; }
main .currentUser-block::before { background: url(../img/profile/main-bg.svg) no-repeat; background-size: contain; content: ''; height: 100%; left: 50%; max-width: 700px; position: absolute; top: -10%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; z-index: 0; }
main .currentUser .user-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -2em; }
main .currentUser .user-name { font-size: 15px; font-style: normal; font-weight: 900; line-height: normal; }
main .currentUser .user-name span { font-size: 13px; }
main .currentUser .user-avatar { display: grid; justify-items: center; position: relative; text-align: center; }
main .currentUser .user-avatar-img { border-radius: 50%; border: 4px solid var(--main-green); background: #FFF; -webkit-box-shadow: 0 9.551px 0 0 #11892E; box-shadow: 0 9.551px 0 0 #11892E; display: block; height: 78px; position: relative; width: 78px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; z-index: 1; }
main .currentUser .user-place { color: #FFF; -webkit-text-stroke-width: 0.64px; -webkit-text-stroke-color: var(--main-purple); font-family: Nunito; font-size: 15px; font-style: normal; font-weight: 900; line-height: normal; }
main .currentUser .user-place-label { font-size: 8px; font-style: normal; font-weight: 500; line-height: normal; }
main .currentUser .stat-block { display: grid; gap: 2vh; height: -webkit-max-content; height: -moz-max-content; height: max-content; position: relative; }
main .currentUser .stat-block__item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; }
main .currentUser .stat-block__item img { height: 20px; }
main .currentUser .stat-block p { font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
main .currentUser .stat-block span { color: #EDEDED; font-size: 20px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: -1.2px; }
main .currentUser .place-badge { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 122px; border: 3px solid var(--main-green); background: #335; -webkit-box-shadow: 0 6px 0 0 #11892E; box-shadow: 0 6px 0 0 #11892E; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; gap: 6px; margin: -10% auto 0; padding: 0 6px; position: relative; z-index: 2; }
main .section-items { display: grid; gap: 54px; justify-items: center; text-align: center; }
main .section-items img { width: clamp(138px, 38vw, 276px); }
main .profile { padding: 60px 0 0; }
main .winnings { margin: 45px 0; }
main .winnings h3 { font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; }
main .winnings-blocks { display: grid; gap: 12px; }
main .winnings-block { background: #335; border: 2px solid var(--main-purple); border-radius: 12px; -webkit-box-shadow: 0 2px 0 0 var(--main-purple); box-shadow: 0 2px 0 0 var(--main-purple); min-height: 80px; }
main .winnings-block__item { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: flex; height: 68px; padding: 10px 13px; }
main .winnings-head { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--main-purple); border-radius: 8px 8px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 8px; position: relative; }
main .winnings-head::before { -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25) inset; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25) inset; border-radius: 8px; content: ""; height: 18px; left: 0; position: absolute; top: 0; right: 0; }
main .winnings-head__item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 7px; }
main .winnings-prize { color: #EDEDED; font-size: 20px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: -1.2px; }
main .tasks-head { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
main .tasks-timer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; }
main .tasks-timer p { font-size: 6px; font-style: normal; font-weight: 500; line-height: normal; }
main .tasks-timer p:nth-child(2) { color: #71E576; font-size: 8px; }
main .tasks-timer__img { position: relative; }
main .tasks-timer__img img { width: 16px; }
main .tasks-timer__img::after { background: conic-gradient(#43A047 0deg 130deg, transparent 130deg); content: ''; border-radius: 50%; position: absolute; right: 2px; top: 7px; width: 80%; height: 60%; }
main .tasks-timer.lessTime p:nth-child(2) { color: #FF4949; }
main .tasks-timer.lessTime .tasks-timer__img::after { background: conic-gradient(#FF4949 0deg 130deg, transparent 130deg); }
main .task { background: var(--main-darkPurple); border: 2px solid var(--main-purple); border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 138px; margin: 22px 0 8px; padding: 18px 4px 12px; position: relative; max-width: 118px; }
main .task::before { background: #503E9A; border-radius: 0 8px; -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.25) inset; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.25) inset; content: ''; position: absolute; height: 18px; width: 36px; right: 0; top: 0; }
main .task::after { background: url(../img/profile/plusStar.png) no-repeat; background-size: contain; position: absolute; content: ''; height: 13px; width: 20px; right: 6%; top: 1.8%; }
main .task p { font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; }
main .task p span { color: #FECC00; font-weight: 700; }
main .task .landing-btn { border: 1px solid #11892E; border-radius: 8px; -webkit-box-shadow: 0 1px 0 0 #11892E, 2px 4px 0 0 #4F3F98, 0 4px 0 0 rgba(255, 255, 255, 0.35) inset; box-shadow: 0 1px 0 0 #11892E, 2px 4px 0 0 #4F3F98, 0 4px 0 0 rgba(255, 255, 255, 0.35) inset; font-size: 8px; font-style: normal; font-weight: 900; line-height: 250%; text-transform: uppercase; padding: 4px 20px; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
main .lotopass { margin: 40px 0 0; position: relative; padding: 0 0 120px; }
main .lotopass .container { position: relative; z-index: 1; }
main .lotopass::before { background: url(../img/profile/bgd-lotopass.svg) no-repeat; background-size: cover; bottom: .5em; content: ''; min-height: 500px; height: 100%; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; z-index: 1; }
main .lotopass-header { text-align: center; }
main .lotopass-blocks { position: relative; margin: 30px 0; padding: 10px 0; }
main .next-prize { border-radius: 16px; border: 3px solid var(--main-darkPurple); background: #F6F6F6; -webkit-box-shadow: 0 6px 0 0 var(--main-darkPurple); box-shadow: 0 6px 0 0 var(--main-darkPurple); color: #424242; font-weight: 400; display: grid; gap: 3px; grid-template-columns: 65% 45%; margin: 20px auto 30px; min-height: 96px; padding: 8.5px 8px 9.5px; width: 75.2%; }
main .next-prize__img { max-width: 82px; }
main .next-prize p { font-size: 12px; font-style: normal; line-height: normal; }
main .next-prize p:first-child { font-weight: 400; }
main .next-prize__text { -ms-flex-line-pack: justify; align-content: space-between; display: grid; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
main .next-prize__label { width: 95%; font-weight: 800; }
main .next-prize__label span { font-weight: 400; }
main .progress { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; height: 14px; overflow: visible; position: relative; margin-top: 7px; }
main .progress .star { height: 8px; left: .5em; position: absolute; width: 8px; }
main .progress-block { background: #fff; border-radius: 28px; border: 2px solid var(--main-darkPurple); height: 14px; position: relative; width: 105px; z-index: 1; }
main .progress-fill { background: var(--main-green); border-radius: 28px; position: absolute; height: 11px; }
main .progress-text { color: #423B68; font-size: 10.4px; font-style: normal; font-weight: 800; line-height: normal; margin-top: -2px; position: relative; text-align: center; }
main .progress-img { background: var(--main-darkPurple); height: 100%; margin: 0 -.2em 0 -.4em; width: 20px; position: relative; z-index: 0; }
main .progress-img img { left: 65%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 6px; }
main .progress-next { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--main-green); border: 2px solid var(--main-darkPurple); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 22px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 22px; }
main .progress-next__num { color: #423B68; font-size: 12px; font-style: normal; font-weight: 800; line-height: 100%; }
main .progressBar { background: rgba(49, 64, 167, 0.4); border: 2px solid var(--main-darkPurple); border-radius: 22px; height: 8px; left: .8em; right: 0; position: absolute; top: 5%; width: auto; z-index: 1; }
main .progressBar-active { background: var(--main-green); position: absolute; top: 0; left: 0; height: 100%; border-radius: 22px; z-index: 1; -webkit-transition: width 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); transition: width 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
main .progressBar-white { position: absolute; top: 0; left: 0; height: 100%; background: #fff; border-radius: 0 22px 22px 0; z-index: 1; width: 0; pointer-events: none; }
main .progressBar::before { background: url(../img/profile/rocket.svg) no-repeat; background-size: contain; content: ''; height: 28px; left: -0.8em; position: absolute; width: 52px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; }
main .progressBar::after { background: url(../img/profile/finish.svg) no-repeat; background-size: contain; content: ''; height: 28px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 49px; z-index: 2; }
main .star { background: url(../img/profile/star-2x.png) no-repeat; background-size: contain; color: #423B68; font-size: 8px; font-style: normal; font-weight: 700; height: 20px; line-height: normal; position: relative; text-align: center; width: 20px; z-index: 2; }
main .star-block { display: -webkit-box; display: -ms-flexbox; display: flex; }
main .star::after { content: attr(data-level); position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
main .capsule-wrapper { position: relative; width: 100%; overflow: hidden; }
main .capsule-blocks { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2em; overflow-x: auto; padding: 3px 40px 0 60px; position: relative; scrollbar-width: none; -ms-overflow-style: none; z-index: 2; }
main .capsule-blocks::-webkit-scrollbar { display: none; }
main .capsule-block { display: grid; justify-items: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
main .capsule-block img { margin-top: 1em; width: 110px; }
main .capsule-block p { color: #FFF; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: -0.32px; line-height: 120%; margin-top: -3px; text-align: center; }
main .place-block { margin-left: 2em; display: grid; justify-items: center; }
main .place-block img { height: 68px; width: 64px; }
main .place-block p { background: var(--main-darkPurple); border: 2px solid #8A77EF; border-radius: 8px; -webkit-box-shadow: 0 2px 0 0 #8A77EF; box-shadow: 0 2px 0 0 #8A77EF; color: var(--main-green); font-size: 14px; font-style: normal; font-weight: 800; height: 34px; line-height: normal; margin-top: -1.5em; padding: 6px 14px 5px; position: relative; }
main .place-block p::before { -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25) inset; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25) inset; border-radius: 8px; content: ""; height: 18px; left: 0; position: absolute; top: 0; right: 0; }
main .order { background: url(../img/profile/order.svg) no-repeat; background-size: contain; color: #423B68; font-size: 8px; font-style: normal; font-weight: 700; height: 29px; line-height: normal; position: relative; text-align: center; width: 19px; z-index: 2; }
main .order::after { content: attr(data-level); left: 50%; position: absolute; top: 30%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
main .small-text { font-size: 8px; font-style: normal; font-weight: 400; line-height: normal; opacity: 0.5; margin: 0 0 16px; }
main .raiting { padding-top: 60px; }
main .raiting .before { background: #0B0B2F; border-radius: 0 0 20px 20px; height: 28em; content: ''; left: 50%; position: absolute; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; }
main .raiting .swiper-wrapper { padding-bottom: 2.5em; }
main .raiting .swiper-pagination-bullet { background: #fff; height: 9px; opacity: 0.5; width: 9px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
main .raiting .swiper-pagination-bullet-active { border-radius: 21.377px; opacity: 0.8; width: 27px; }
main .raiting .topOther { display: grid; gap: 16px; }
main .raiting .topThree { display: grid; gap: 32px; padding: 1em 0 40px; }
main .raiting .topThree .inner { background: var(--main-green); }
main .raiting .topThree .inner::before { -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25) inset; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25) inset; border-radius: 8px; content: ""; height: 18px; left: 0; position: absolute; top: 0; right: 0; }
main .raiting .topThree .inner::after { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: url(../img/topThree.svg) no-repeat; background-size: contain; color: var(--main-green); display: -webkit-box; display: -ms-flexbox; display: flex; height: 15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: .9em; font-size: 8px; font-style: normal; font-weight: 800; line-height: normal; position: absolute; padding: .3em 0 0; text-transform: uppercase; top: -2em; width: 88px; }
main .raiting .topThree .inner:nth-child(1)::after { content: "2 000 000 ₸"; }
main .raiting .topThree .inner:nth-child(2)::after { content: "1 500 000 ₸"; }
main .raiting .topThree .inner:nth-child(3)::after { content: "1 000 000 ₸"; }
main .raiting .topThree .inner .label { color: var(--main-white); }
main .raiting .topThree .inner .nick, main .raiting .topThree .inner .score { color: var(--main-green); }
main .raiting .topThree .inner .inner-wrapper { background: var(--main-darkPurple); }
main .raiting .topThree .inner .inner-wrapper img { border: 2.5px solid #44d668; -webkit-box-shadow: 0 2.821px 0 0 #11892e; box-shadow: 0 2.821px 0 0 #11892e; }
main .raiting .inner { background: var(--main-purple); -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; border: 3px solid var(--main-purple); border-radius: 12px; position: relative; }
main .raiting .inner-wrapper { background: var(--main-white); border-radius: 12px 8px 8px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; padding: 12px 24px 12px 10px; width: 100%; }
main .raiting .placeBefore { width: 46px; text-align: center; }
main .raiting .placeBefore .place { color: transparent; display: grid; font-size: 26px; font-style: normal; font-weight: 800; line-height: 100%; }
main .raiting .placeBefore .place span { color: var(--main-white); grid-area: 1 / 1; paint-order: stroke; text-shadow: 0 2px 0 var(--main-darkPurple); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--main-darkPurple); z-index: 1; }
main .raiting .placeBefore .place::before, main .raiting .placeBefore .place::after { color: transparent; content: attr(data-text); grid-area: 1 / 1; z-index: 0; }
main .raiting .placeBefore .place::before { text-shadow: 0 2px 0 var(--main-darkPurple); }
main .raiting .placeBefore .place::after { text-shadow: -1.5px 0 0 var(--main-darkPurple), 1.5px 0 0 var(--main-darkPurple), 0 -1.5px 0 var(--main-darkPurple), 0 1.5px 0 var(--main-darkPurple), -1.5px -1.5px 0 var(--main-darkPurple), 1.5px -1.5px 0 var(--main-darkPurple), -1.5px 1.5px 0 var(--main-darkPurple), 1.5px 1.5px 0 var(--main-darkPurple); }
main .raiting .winner-avatar { margin-right: 10px; position: relative; }
main .raiting .winner-avatar img { border: 2.5px solid var(--main-purple); border-radius: 50%; -webkit-box-shadow: 0 3.077px 0 0 var(--main-darkPurple); box-shadow: 0 3.077px 0 0 var(--main-darkPurple); height: 44px; width: 44px; -o-object-fit: cover; object-fit: cover; }
main .raiting .winner-avatar.recent-active::after { background: #FF0004; border: 1.5px solid #fff; border-radius: 50%; bottom: 0; content: ''; height: 13px; position: absolute; right: 0; width: 13px; }
main .raiting .nick-wrapper, main .raiting .score-wrapper { color: #424242; display: grid; gap: 4px; }
main .raiting .nick-wrapper .label, main .raiting .score-wrapper .label { font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; opacity: 0.5; }
main .raiting .nick-wrapper .nick, main .raiting .nick-wrapper .score, main .raiting .score-wrapper .nick, main .raiting .score-wrapper .score { font-size: 17px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
main .raiting .nick { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; width: 120px; }
main .raiting .score { position: relative; }
main .raiting .score::after { background: url(../img/raiting-star.png) no-repeat; background-size: contain; content: ""; height: 14px; position: absolute; top: 47%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -1.1em; width: 14px; }
main .accordion { margin: 0 0 10px 0; padding: 0px; position: relative; }
main .accordion__text { border-radius: 8px; background: var(--main-darkPurple); border: 1px solid var(--main-purple); color: #fff; cursor: pointer; font-size: 14px; font-style: normal; font-weight: 700; line-height: 110%; margin: 0; padding: 15px 60px 15px 15px; position: relative; text-transform: uppercase; z-index: 2; }
main .accordion__text::after { background: url(../img/accordeon-after.svg) no-repeat; background-size: contain; content: ""; height: 34px; position: absolute; right: 15px; top: 50%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 34px; }
main .accordion__text-opened::after { -webkit-transform: translateY(-50%) rotateX(180deg); transform: translateY(-50%) rotateX(180deg); }
main .accordion__body { background: var(--main-white); border: 1px solid var(--main-purple); border-radius: 0 0 8px 8px; color: #424242; display: none; padding: 30px 15px 15px; -webkit-transform: translateY(-15px); transform: translateY(-15px); z-index: 1; }
main .accordion__body p { font-weight: 400; }
main .accordion__body * { font-size: 14px; font-style: normal; line-height: 130%; }
main .main-menu { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-position: center center; bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 61px; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; gap: 20px; left: 50%; max-width: 700px; position: fixed; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; z-index: 2; }
main .main-menu::before { background: url(../img/menu/menu-bg.svg) no-repeat; background-size: contain; bottom: -105%; content: ''; max-width: 720px; min-height: 140px; height: 37vw; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; z-index: 0; }
main .main-menu .menu-btn { -ms-flex-line-pack: center; align-content: center; color: #B4C3FB; display: grid; gap: 4px; height: 47px; justify-items: center; text-decoration: none; position: relative; min-width: 6px; }
main .main-menu .menu-btn img { height: 30px; width: 38px; }
main .main-menu .menu-btn p { color: #B4C3FB; font-size: 8px; font-style: normal; font-weight: 400; line-height: 110%; text-transform: uppercase; }
main .main-menu .menu-btn.active p { color: #FFF; font-weight: 600; }
main .main-menu .menu-btn.active::after { background: #FECC00; border-radius: 22px; bottom: -.3em; content: ''; height: 4px; position: absolute; width: 100%; }
main .main-menu .menu-btn.active:nth-child(3)::after { bottom: .2em; width: 50%; }
main .main-menu .to-profile { background-position: center center; background-size: contain; height: 61px; margin: -10% -1em 0; width: 98px; }

@media (max-width: 719px) { .header { background: transparent; }
  .header__mobile-button path { stroke: #fff; }
  .header__main-link { color: #fff; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
  .header__announ-icon { -webkit-filter: brightness(10); filter: brightness(10); }
  .header__announ-button { background: transparent !important; }
  .header__lang-switch { color: #fff; }
  .out-of-header { margin-top: -50px; } }
@media (min-width: 520px) { main .main-menu::before { background-size: cover; bottom: -4em; } }
@media (min-width: 720px) { .out-of-header { padding: 130px 0 0; }
  main h1 { font-size: 44px; }
  main h2 { font-size: 44px; }
  main p { font-size: var(--main-deskText); }
  main section { padding-bottom: 300px; }
  main .landing-btn { border-radius: 23px; font-size: var(--main-deskText); padding: 23px 0; width: 460px; }
  main .list { margin: 35px auto 0; gap: 10px; }
  main .list img { height: 32px; width: 32px; }
  main .list p { font-size: 22px; }
  main .refresh-btn { height: 64px; top: -6em; width: 64px; }
  main .visual { width: 440px; }
  main .info-wrapper { margin: 130px auto 78px; padding: 15px; width: 460px; }
  main .info-title { font-size: 14px; }
  main .info-value, main .info-value .timer__body { font-size: 22px; }
  main .info-item { gap: 6px; padding-left: 48px; }
  main .info-item.prize::before { height: 40px; width: 40px; }
  main .info-item.deadline::before { height: 40px; width: 35px; }
  main .terms .swiper-text { font-size: 26px; padding-left: 115px; }
  main .blockNum { margin: 0 0 32px; }
  main .blockNum .num { border: 0.1em solid var(--main-darkPurple); font-size: 80px; min-width: 100px; }
  main .blockNum p:nth-child(2) { font-size: 44px; margin-left: -15px; padding: 14px 14px 14px 26px; }
  main .currentUser { min-height: 235px; }
  main .currentUser::before { height: 26em; border-radius: 0 0 4em 4em; }
  main .currentUser .user-header { top: -4em; }
  main .currentUser-block { padding: 0 2em; }
  main .currentUser .stat-block p { font-size: 22px; }
  main .currentUser .stat-block span { font-size: 40px; }
  main .currentUser .stat-block__item { gap: 20px; }
  main .currentUser .stat-block__item img { height: 38px; }
  main .currentUser .user-name { font-size: var(--main-deskText); }
  main .currentUser .user-name span { font-size: 26px; }
  main .currentUser .user-avatar-img { border: 7.5px solid var(--main-green); height: 150px; width: 150px; }
  main .currentUser .user-place { font-size: var(--main-deskText); }
  main .currentUser .user-place-label { font-size: 16px; }
  main .currentUser .place-badge { gap: 12px; }
  main .lotopass { padding: 0 0 11em; }
  main .lotopass::before { bottom: -0em; }
  main .winnings h3 { font-size: var(--main-deskText); }
  main .winnings-head { border-radius: 24px 24px 0 0; padding: 16px; }
  main .winnings-head__item { gap: 14px; }
  main .winnings-head__item img { width: 50px; }
  main .winnings-head::before { border-radius: 24px; height: 26px; width: 98%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  main .winnings-prize { font-size: 40px; }
  main .winnings-blocks { gap: 24px; }
  main .winnings-block { border: 4px solid var(--main-purple); border-radius: 24px; }
  main .winnings-block__item { height: 128px; padding: 16px 24px; }
  main .winnings-block__item img { height: 96px; width: 96px; }
  main .task { border: 4px solid var(--main-purple); border-radius: 16px; margin: 44px 0 16px; padding: 36px 8px 24px; max-width: 236px; height: 276px; }
  main .task p { font-size: 24px; }
  main .task .landing-btn { border-radius: 16px; font-size: 16px; padding: 8px 45px; }
  main .task::before { border-radius: 0 16px; height: 36px; width: 72px; }
  main .task::after { height: 26px; width: 39px; }
  main .tasks-timer { gap: 8px; }
  main .tasks-timer__img img { height: 37px; width: 32px; }
  main .tasks-timer__img::after { right: 5px; top: 8px; }
  main .tasks-timer p { font-size: 12px; }
  main .tasks-timer p:nth-child(2) { font-size: 16px; }
  main .small-text { font-size: 16px; }
  main .next-prize { border: 6px solid var(--main-darkPurple); border-radius: 32px; padding: 16px; margin: 40px auto 60px; }
  main .next-prize p { font-size: 24px; }
  main .next-prize__img { max-width: 164px; }
  main .progress { height: 28px; }
  main .progress-block { border: 4px solid var(--main-darkPurple); height: 28px; width: 200px; }
  main .progress-fill { height: 20px; }
  main .progress-text { font-size: 20.8px; }
  main .progress-img { margin: 0 -.4em 0 -.8em; width: 40px; }
  main .progress-img img { width: 12px; }
  main .progress-next { height: 44px; width: 44px; }
  main .progress-next__num { font-size: 24px; }
  main .progress .star { height: 16px; width: 16px; }
  main .progressBar { border-radius: 0 0 40px 40px; height: 22px; top: 6%; }
  main .progressBar::before { height: 56px; width: 104px; }
  main .progressBar::after { height: 56px; width: 98px; }
  main .capsule-blocks { padding: 6px 40px; }
  main .capsule-block { min-width: 180px; }
  main .capsule-block img { width: 180px; }
  main .capsule-block p { font-size: 18px; }
  main .star { font-size: 16px; height: 40px; width: 40px; }
  main .place-block img { height: 128px; width: 124px; }
  main .order { font-size: 16px; height: 58px; width: 38px; }
  main .order::after { left: 45%; }
  main .raiting .before { border-radius: 0 0 4em 4em; height: 47.6em; }
  main .raiting .placeBefore { width: 93px; }
  main .raiting .placeBefore .place { font-size: 52px; }
  main .raiting .topThree { gap: 40px; padding-top: 1.6em; }
  main .raiting .topThree .inner::before { border-radius: 28px; -webkit-box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.25) inset; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.25) inset; height: 28px; }
  main .raiting .topThree .inner::after { font-size: 16px; height: 31px; width: 177px; }
  main .raiting .topThree .inner .inner-wrapper img { border: 4.5px solid #44d668; }
  main .raiting .inner { border: 6px solid var(--main-purple); border-radius: 24px; }
  main .raiting .inner-wrapper { border-radius: 16px; padding: 24px; }
  main .raiting .winner-avatar { margin: 0; }
  main .raiting .winner-avatar img { border: 4.5px solid var(--main-purple); height: 88px; width: 88px; }
  main .raiting .winner-avatar.recent-active::after { border: 3px solid #fff; height: 26px; width: 26px; }
  main .raiting .nick-wrapper, main .raiting .score-wrapper { gap: 8px; }
  main .raiting .nick-wrapper .nick, main .raiting .nick-wrapper .score, main .raiting .score-wrapper .nick, main .raiting .score-wrapper .score { font-size: 34px; }
  main .raiting .nick-wrapper .score, main .raiting .score-wrapper .score { padding-right: 26px; }
  main .raiting .nick-wrapper .label, main .raiting .score-wrapper .label { font-size: 24px; }
  main .raiting .nick { width: 240px; }
  main .raiting .score::after { height: 20px; right: 0; width: 20px; }
  main .accordion { margin: 0 0 10px 0; }
  main .accordion__text { font-size: var(--main-deskText); padding: 30px 60px 30px 30px; }
  main .accordion__text::after { height: 68px; width: 68px; }
  main .accordion__body { padding: 45px 30px 30px; }
  main .accordion__body * { font-size: var(--main-deskText); }
  main .main-menu { bottom: 45px; }
  main .main-menu::before { height: 21vw; bottom: -2em; }
  main .main-menu .menu-btn img { height: 60px; width: 60px; }
  main .main-menu .menu-btn p { font-size: 16px; }
  main .main-menu .menu-btn.active::after { bottom: -1.5em; }
  main .main-menu .menu-btn.active:nth-child(3)::after { bottom: -1.1em; width: 80%; } }
@media (min-width: 1000px) { main .main-menu::before { height: 16vw; } }
@media (min-width: 1200px) { main .main-menu::before { background-size: contain; bottom: -3.5em; height: 190px; } }
@-webkit-keyframes swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } }
@keyframes swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }