@media only screen and (min-width: 320px) and (max-width: 599px) {
	.bet__button {
		margin-top: 15px;
		top: 130px;
		width: 100%;
	}
	.header__logo img {
		width: 100px;
	}
	.confetti {
		width: 100%;
	}
	.confetti-piece:nth-child(1) {
		height: 50vh;
	}
	.confetti-piece {
		position: absolute;
		width: 50px;
		height: 10px;
	}
	.confetti-piece:nth-child(4n) {
		height: 50vh;
	}
	.confetti-piece:nth-child(3n) {
		width: 50px;
		height: 30px;
	}
	.red-line {
		width: 300px;
		height: 160px;
		position: absolute;
	}
	.popup__button {
		width: 85%;
	}
	.popup__title { 
		top: 10px;
		font-size: 20px;
	}
	.graphic {
		width: auto;
		height: 299px;
	}
	.block_animate {
		display: none;
	}
	.animated-circle {
		width: 72px;
	}
	.progress__wrap {
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
		width: 100%;
	}
	h1 {
		font-size: 14px;
	}
	.progress-container { 
		width: 126px;
	}
	.progress-bar {
		width: 126px;
	}
	.image-container, .image-container-go {
		bottom: -12%;
	}
	.image-container img, .image-container {
		width: 55px;
		height: 27px;
	}
	.red {
		width: 300px;
		height: 160px;
		position: relative;
	}
	#newBlock {
		width: 100%;
		height: 180px;
		position: relative;
		top: 0;
		left: 0;
		margin-top: 50px;
	}
	.chart {
		bottom: 17%;
		left: 14px;
		overflow: hidden;
	}
	.block {
		animation: chart 11.4s linear forwards;
	}
	.image-container-go {
		left: 0!important;
		animation: movePlane 6s linear forwards;
	}
	@keyframes movePlane {
		0% {
			transform: translate(20, 0) rotate(0deg);
			bottom: 27px;
		}
		21% {
			transform: translate(-15, 0) rotate(-10deg);
			bottom: 3px;
		}
		42% {
			transform: translate(-12, 0) rotate(-12deg);
			bottom: -13px;
		}
		71% {
			transform: translate(-18, 0) rotate(-18deg);
			bottom: -14px;
		}
		89% {
			transform: translate(10, 0) rotate(-18deg);
			bottom: 6px;
		}
		100% {
			transform: translate(295px, -158px) rotate(-25deg);
			bottom: 32px;
		}
	}
	.popup__currency {
		font-size: 23px;
		top: 60px;
		line-height: 1.2;
		width: 350px;
	}
	.avialor-logo {
		left: 3%;
		width: 86px;
	}
	.progress {
		margin-top: 50px;
		top: inherit;
	}
	.progress, .graphic { 
		width: 100%;
		height: 180px;
	}
	.wrapper {
		max-width: 90%;
		justify-content: flex-start;
	}
	.progress__wrap {
		top: 25%;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
	}
	.timer {
		font-size: 32px;
		left: 35%;
		top: 0;
		transform: translate(-50%, 50%);
		width: auto;
	}
	.wrapper {
		position: relative;
	}
	.bet {
		padding: 20px 0px;
		width: 100%;
		top: 12%;
		background: inherit;
	}
	.bet__wrapper, .bet__topper {
		width: 100%;
		position: relative;
		z-index: 5;
	}
	.bet__num {
		width: 24%;
	}
	.num__box:nth-of-type(5n),
	.num__box:nth-of-type(6n),
	.num__box:nth-of-type(7n) {
		display: none;
	}
	.popup__img {
		width: 350px;
	}
	.popup__girl {
		width: 214px;
	}
	.girl-mob {
		display: block;
		position: absolute;
		width: 280px;
		right: -5%;
		bottom: 0;
		z-index: 1;
	}
	.coins-mob {
		display: block;
		position: absolute;
		bottom: 70%;
		width: 230px;
		left: 5%;
	}
	.main-image {
	    top: 40%;
	    left: -500px;
	    width: 1000px;
	    z-index: -1;
	}
	#mega-win {
	    display: none; /* Начальное состояние - не отображается */
	    position: fixed; /* Используем fixed для позиционирования относительно вьюпорта */
	    top: 50%; /* Центрирование по вертикали */
	    left: 50%; /* Центрирование по горизонтали */
	    transform: translate(-50%, -50%); /* Начальное центрирование */
	    width: 320px; /* Задаем ширину */
	    height: auto; /* Высота будет зависеть от содержимого */
	    z-index: 1000; /* Убедитесь, что блок будет поверх других элементов */
	    animation: scaleUpAndPulse 1.5s forwards; /* Анимация выполняется один раз за 4.5 секунды */
	}
	.mega-win__title {
		font-size: 45px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.wrapper {
    	max-width: 90%;
    	justify-content: flex-start;
	}
	.header {
    	width: 90%;
    	padding: 35px 0px 45px;
	}
	.progress, .graphic { 
		width: 553px;
		height: 299px;
	}
	.wrapper {
		width: auto;
		justify-content: flex-start;
	}
	.progress {
		top: 107px;
	}
	.progress__wrap {
		top: 25%;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
	}
	.confetti {
		width: 100%;
	}
	.confetti-piece:nth-child(1) {
		height: 50vh;
	}
	.confetti-piece {
		position: absolute;
		width: 50px;
		height: 10px;
	}
	.confetti-piece:nth-child(4n) {
		height: 50vh;
	}
	.container__flex_center {
		flex-wrap: nowrap;
	}
	.girl {
    	width: 300px;
	}
	.block_animate {
		width: 80%;
	}
	.coins {
    	width: 230px;
	}
	.bet__num {
		width: inherit;
	}
	.bet__wrapper {
		width: 270px;
	}
	.main-image {
	    position: absolute;
	    z-index: 1;
	    bottom: -49%;
	    left: -76%;
	    width: 150%;
	    z-index: -1;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.wrapper {
    	max-width: 90%;
    	justify-content: flex-start;
	}
	.header {
    	width: 90%;
    	padding: 35px 0px 45px;
	}
	.progress {
		top: 107px;
	}
	.main-image {
	    position: absolute;
	    z-index: 1;
	    bottom: -49%;
	    left: -76%;
	    width: 150%;
	    z-index: -1;
	}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.header {
		width: 90%;
		padding: 35px 0px 45px;
	}
}
@media only screen and (min-width: 320px) and (max-width: 420px) {
	.bet__lower {
    	gap: 1px;
	}
}
@media only screen and (min-width: 1440px) and (max-width: 1920px) {
	.graphic, .progress { 
		width: 854px;
		height: 380px;
	}
	.wrapper {
    	width: 950px;
	}
	#newBlock { 
    	height: 354px;
    	left: 10px;
	}
	.image-container {
	 	bottom: 11%;
	}
	@keyframes movePlane {
      0% {
        transform: translate(50, 0) rotate(0deg);
        bottom: 15px;
      }
      20% {
        transform: translate(-30, 0) rotate(-10deg);
        bottom: -24px;
      }
      40% {
        transform: translate(-40, 0) rotate(-10deg);
        bottom: -52px;
      }
      60% {
        transform: translate(-85, 0) rotate(-13deg);
        bottom: -62px;
      }
      83% {
        transform: translate(-100, 0) rotate(-15deg);
        bottom: -49px;
      }
      97% {
        transform: translate(-100, 0) rotate(-15deg);
        bottom: -14px;
      }
      100% {
        transform: translate(535px, -260px) rotate(-20deg);
        bottom: 4px;
      }
    }

    @keyframes chart {
      to {
        width: 562px;
      }
    }
	/*.red, .red-line {
    	width: 650px;
    	height: 350px;
	}*/

}