:root {
	--design-width: 1920;
	--ink: #f8e6ab;
	--header: rgba(22, 67, 54, 0.94);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 320px;
	background: #e8eddf;
	font-family: Arial, "Helvetica Neue", sans-serif;
	overflow-x: hidden;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

img {
	display: block;
	max-width: 100%;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: clamp(48px, 4.792vw, 92px);
	background: rgb(29 58 46 / 60%);
	box-shadow: 0 2px 8px rgba(8, 33, 26, 0.16);
}

.header-inner {
	position: relative;
	width: min(100%, 1920px);
	height: 100%;
	margin: 0 auto;
}

.brand {
	position: absolute;
	top: 0;
	left: 2.1%;
	width: 11.2%;
	height: 100%;
}

.brand img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.main-nav {
	position: absolute;
	top: 0;
	left: 25.4%;
	display: flex;
	height: 100%;
	gap: clamp(25px, 6.8vw, 132px);
	align-items: center;
}

.main-nav a {
	color: var(--ink);
	font-size: clamp(12px, 1.48vw, 28px);
	font-weight: 800;
	text-decoration: none;
	text-shadow: 0 2px 2px rgba(31, 50, 28, 0.7);
	white-space: nowrap;
	transition: color 180ms ease, transform 180ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
	color: #fff7cf;
	transform: translateY(-2px);
}

.social-links {
	position: absolute;
	top: 10%;
	right: 2.2%;
	display: flex;
	gap: clamp(6px, 0.75vw, 14px);
	height: 80%;
}

.social-links a {
	display: block;
	height: 100%;
	aspect-ratio: 1;
	transition: transform 180ms ease;
}

.social-links a:hover,
.social-links a:focus-visible {
	transform: translateY(-3px) scale(1.04);
}

.social-links img {
	width: 100%;
	height: 100%;
}

.menu-toggle {
	display: none;
}

.page-stage {
	width: min(100%, 1920px);
	margin: 0 auto;
	background: #e8eddf;
	box-shadow: 0 0 40px rgba(27, 69, 57, 0.12);
}

.section {
	position: relative;
	width: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.hero {
	aspect-ratio: 1920 / 1376;
	background-image: url("../images/base_1.jpg");
}

.rewards {
	aspect-ratio: 1920 / 1169;
	background-image: url("../images/base_2.jpg");
}

.heroes {
	aspect-ratio: 1920 / 1494;
	background-image: url("../images/base_3.jpg");
}

.features {
	aspect-ratio: 1920 / 1912;
	background-image: url("../images/base_4.jpg");
}

.footer {
	z-index: 4;
	aspect-ratio: 1920 / 443;
	background-image: url("../images/base_5.jpg");
}

.download-group {
	position: absolute;
	top: 74%;
	left: 27.4%;
	width: 49.3%;
	height: 23%;
}

.image-button {
	position: absolute;
	width: 31%;
	animation: button-breathe 2.2s ease-in-out infinite;
}

.apk-button {
	top: 50%;
	left: 0;
}

.ios-button {
	top: 20%;
	left: 34.5%;
	animation-delay: 150ms;
}

.google-button {
	top: 50%;
	left: 34.5%;
	animation-delay: 300ms;
}

.recharge-button {
	position: absolute;
	top: -5%;
	left: 69%;
	width: 27%;
	animation: button-breathe 2.2s 450ms ease-in-out infinite;
}

.image-button img,
.recharge-button img {
	width: 100%;
}

@keyframes button-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

.reward-art {
	position: absolute;
	top: 8%;
	left: 50%;
	width: 62.2%;
	transform: translateX(-50%);
}

.reward-actions {
	position: fixed;
	top: 50%;
	right: clamp(8px, 2.2vw, 42px);
	z-index: 90;
	width: clamp(116px, 12.4vw, 238px);
	aspect-ratio: 357 / 621;
	background: url("../images/fuchuang.png") center / 100% 100% no-repeat;
	transform: translateY(-50%);
}

.reward-actions a {
	position: absolute;
	left: 21%;
	display: block;
	width: 58%;
	transition: transform 160ms ease, filter 160ms ease;
}

.reward-actions a:nth-child(1) { top: 23%; }
.reward-actions a:nth-child(2) { top: 35%; }
.reward-actions a:nth-child(3) { top: 47%; }
.reward-actions a:nth-child(4) { top: 59%; }

.reward-actions a:hover,
.reward-actions a:focus-visible {
	transform: translateX(-6px);
	filter: brightness(1.07);
}

.reward-actions img {
	width: 100%;
}

.hero-slider {
	position: absolute;
	top: 20.6%;
	left: 8.9%;
	width: 82.2%;
	height: 78%;
}

.hero-slides {
	position: relative;
	width: 100%;
	height: 72.4%;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: slide-reveal 360ms ease both;
}

.hero-slide[hidden] {
	display: none;
}

@keyframes slide-reveal {
	from { opacity: 0; transform: translateX(2%); }
	to { opacity: 1; transform: translateX(0); }
}

.hero-thumbs {
	position: absolute;
	left: 17.4%;
	bottom: 2.4%;
	display: flex;
	width: 65.2%;
	align-items: center;
	justify-content: center;
}

.hero-thumbs button {
	width: 20%;
	padding: 2%;
	border: 0;
	background: transparent;
	cursor: pointer;
	filter: grayscale(1);
	opacity: 0.82;
	transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.hero-thumbs button:hover,
.hero-thumbs button.active {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-5%) scale(1.04);
}

.hero-thumbs img {
	width: 100%;
}

.slider-arrow,
.feature-arrow {
	position: absolute;
	z-index: 4;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform 180ms ease, filter 180ms ease;
}

.slider-arrow:hover,
.slider-arrow:focus-visible,
.feature-arrow:hover,
.feature-arrow:focus-visible {
	filter: brightness(1.18);
	transform: scale(1.12);
}

.slider-arrow {
	bottom: 8.2%;
	width: 3.55%;
}

.hero-prev { left: 12.4%; }
.hero-next { right: 12.4%; }

.feature-slider {
	position: absolute;
	top: 15.4%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 72%;
	overflow: hidden;
}

.feature-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 84%;
}

.feature-slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40.5%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	filter: brightness(0.77) saturate(0.82);
	transform: translate(-50%, -50%) scale(0.9);
	transition: transform 420ms ease, filter 420ms ease, opacity 420ms ease;
}

.feature-slide:nth-child(1) {
	left: 38%;
}

.feature-slide:nth-child(2) {
	z-index: 2;
	filter: none;
	transform: translate(-50%, -50%) scale(1);
}

.feature-slide:nth-child(3) {
	left: 62%;
}

.feature-arrow {
	top: 39%;
	width: 10.6%;
}

.feature-prev { left: 9.5%; }
.feature-next { right: 9.5%; }

.feature-dots {
	position: absolute;
	bottom: 2.3%;
	left: 50%;
	display: flex;
	gap: clamp(6px, 2.2vw, 42px);
	transform: translateX(-50%);
}

.feature-dots button {
	width: clamp(18px, 3.5vw, 67px);
	aspect-ratio: 67 / 90;
	padding: 0;
	border: 0;
	background: url("../images/dengl.png") center / contain no-repeat;
	cursor: pointer;
}

.feature-dots button.active {
	background-image: url("../images/dengh.png");
}

.feature-decoration {
	position: absolute;
	bottom: -8%;
	left: -5%;
	z-index: 3;
	width: 44.5%;
	pointer-events: none;
}

.footer-links {
	position: absolute;
	top: 75%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.3vw, 25px);
	transform: translateX(-50%);
	white-space: nowrap;
}

.footer-links a {
	color: #b8e6d9;
	font-size: clamp(9px, 1.25vw, 24px);
	font-weight: 700;
	text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: #fff;
}

.footer-links span {
	width: 2px;
	height: clamp(13px, 1.7vw, 33px);
	background: #b8e6d9;
}

@media (max-width: 720px) {
	.site-header {
		height: 50px;
		background-size: auto 100%;
	}

	.header-inner {
		background: rgb(29 58 46 / 60%);
	}

	.brand {
		left: 12px;
		width: 108px;
	}

	.social-links {
		right: 52px;
		height: 34px;
		top: 8px;
	}

	.menu-toggle {
		position: absolute;
		top: 8px;
		right: 10px;
		display: flex;
		width: 34px;
		height: 34px;
		padding: 8px 6px;
		border: 0;
		background: transparent;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
	}

	.menu-toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background: #f8e6ab;
	}

	.main-nav {
		top: 50px;
		left: 0;
		display: none;
		width: 100%;
		height: auto;
		padding: 14px 18px;
		background: rgb(29 58 46 / 60%);
		gap: 0;
		justify-content: space-around;
		box-shadow: 0 5px 10px rgba(8, 33, 26, 0.18);
	}

	.main-nav.open {
		display: flex;
	}

	.main-nav a {
		font-size: 11px;
	}

	.reward-actions {
		width: 108px;
		right: 4px;
	}

	.hero-thumbs button:hover,
	.hero-thumbs button.active {
		transform: translateY(-3%) scale(1.04);
	}

	.footer-links {
		gap: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.image-button,
	.recharge-button { animation: none; }
	.hero-slide { animation: none; }
	* { transition-duration: 0.01ms !important; }
}