:root {
	--gold: #f5cc67;
	--gold-light: #fff0ad;
	--red: #9f3021;
	--red-dark: #4a140e;
	--ink: #32130d;
	--paper: #fff0bd;
	--teal: #1f6672;
	--courier-road-image: url("assets/campaign-v1/chapter-1-kitchen-road.png");
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #170806;
}

body {
	display: grid;
	place-items: center;
	color: var(--gold-light);
	font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
	touch-action: none;
	user-select: none;
	background:
		linear-gradient(90deg, rgba(9, 3, 2, 0.9), transparent 30%, transparent 70%, rgba(9, 3, 2, 0.9)),
		url("palace_background.png") center / cover no-repeat;
}

button {
	font: inherit;
	cursor: pointer;
}

.is-hidden {
	display: none !important;
}

#courier-app {
	position: relative;
	width: min(100vw, 480px);
	height: 100vh;
	height: 100dvh;
	min-width: 300px;
	max-width: 480px;
	max-height: none;
	overflow: hidden;
	isolation: isolate;
	background: #521a11;
	box-shadow: 0 0 0 2px #bb7d35, 0 0 55px rgba(0, 0, 0, 0.85);
}

#courier-app::after {
	content: "";
	position: absolute;
	z-index: 80;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 36px rgba(31, 6, 3, 0.62);
}

.screen {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.loading-screen {
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 38%, rgba(211, 78, 43, 0.38), transparent 38%),
		linear-gradient(#7e281b, #38110c);
	transition: opacity 0.32s ease, transform 0.32s ease;
}

.loading-screen.is-leaving {
	opacity: 0;
	transform: scale(1.04);
}

.loading-seal {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border: 6px double var(--gold);
	border-radius: 50%;
	color: var(--gold-light);
	background: var(--red);
	box-shadow: 0 8px 0 rgba(50, 9, 5, 0.34);
	font-size: 42px;
	font-weight: 900;
	animation: seal-pulse 1.2s ease-in-out infinite;
}

.loading-screen h1 {
	margin: 24px 0 4px;
	font-size: clamp(28px, 8vw, 40px);
	letter-spacing: 4px;
	text-shadow: 0 3px 0 #4b130d;
}

.loading-screen p {
	margin: 0;
	color: #f2cb7c;
	font-size: 15px;
	letter-spacing: 3px;
}

.loading-dots {
	display: flex;
	gap: 9px;
	margin-top: 28px;
}

.loading-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
	animation: loading-dot 0.9s ease-in-out infinite;
}

.loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-dots i:nth-child(3) { animation-delay: 0.3s; }

.start-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: max(22px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom));
	background: var(--courier-road-image) center / cover no-repeat;
}

.start-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(45, 8, 5, 0.15), rgba(38, 8, 4, 0.05) 35%, rgba(34, 7, 4, 0.88) 78%, #250906),
		linear-gradient(90deg, rgba(39, 8, 5, 0.38), transparent 27%, transparent 73%, rgba(39, 8, 5, 0.38));
}

.start-title {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 13px 10px 12px;
	border: 4px double var(--gold);
	border-radius: 18px;
	text-align: center;
	background: linear-gradient(#b63c29, #772116);
	box-shadow: 0 7px 0 rgba(73, 17, 10, 0.72), inset 0 0 0 3px rgba(255, 227, 139, 0.12);
}

.start-title span {
	font-size: 13px;
	letter-spacing: 5px;
}

.start-title h1 {
	margin: 2px 0 0;
	font-size: clamp(31px, 9vw, 44px);
	line-height: 1.2;
	letter-spacing: 2px;
	text-shadow: 0 3px 0 #49130c;
}

.start-title p {
	margin: 3px 0 0;
	color: #f5cf7b;
	font-size: 13px;
	letter-spacing: 3px;
}

.start-hero {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	width: 100%;
	min-height: 320px;
}

.hero-runner {
	position: absolute;
	left: 50%;
	bottom: 1%;
	width: min(30%, 132px);
	aspect-ratio: 633 / 1308;
	transform: translateX(-50%);
	background: url("assets/qstyle-v3/courier-run-v3.png") center bottom / contain no-repeat;
	filter: drop-shadow(0 13px 8px rgba(35, 7, 3, 0.6));
	animation: hero-run 0.58s ease-in-out infinite;
}

.hero-dust {
	position: absolute;
	bottom: 8%;
	width: 72px;
	height: 30px;
	border-radius: 50%;
	border-top: 5px solid rgba(255, 236, 170, 0.6);
	filter: blur(1px);
	animation: dust-out 1.1s ease-out infinite;
}

.dust-one { left: 18%; }
.dust-two { right: 16%; animation-delay: 0.45s; }

.mission-card {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 12px 16px 10px;
	border: 2px solid #d99c49;
	border-radius: 14px;
	text-align: center;
	background: rgba(65, 16, 10, 0.91);
	box-shadow: 0 5px 16px rgba(31, 6, 3, 0.45);
}

.mission-card strong {
	display: block;
	font-size: 19px;
	letter-spacing: 2px;
}

.mission-card span {
	display: block;
	margin-top: 4px;
	color: #f0cb83;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 12px;
}

.best-record {
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid rgba(245, 204, 103, 0.36);
	font-size: 15px;
}

.best-record b {
	color: #fff0a9;
	font-family: Georgia, serif;
	font-size: 20px;
}

.start-actions {
	position: relative;
	z-index: 3;
	display: grid;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
}

.start-utility {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.utility-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 43px;
	border: 2px solid #d7a44e;
	border-radius: 999px;
	color: var(--gold-light);
	background: linear-gradient(#704031, #481c16);
	box-shadow: inset 0 0 0 2px rgba(255, 222, 132, 0.1), 0 3px 0 #2e0c08;
	font-weight: 900;
	letter-spacing: 2px;
}

.utility-button b {
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 17px;
}

.utility-button:active {
	transform: translateY(2px) scale(0.98);
}

.exit-utility {
	background: linear-gradient(#913124, #621a14);
}

.ancient-button,
.control-button {
	position: relative;
	min-height: 52px;
	border: 2px solid var(--gold);
	border-radius: 999px;
	color: var(--gold-light);
	background: linear-gradient(#b53b29, #841f17);
	box-shadow: inset 0 0 0 3px rgba(255, 221, 126, 0.12), 0 4px 0 #49110c;
	font-weight: 900;
	letter-spacing: 3px;
	transition: transform 0.12s ease, filter 0.12s ease;
}

.ancient-button:active,
.control-button:active {
	transform: translateY(3px) scale(0.98);
	filter: brightness(1.14);
	box-shadow: inset 0 0 0 3px rgba(255, 221, 126, 0.15), 0 1px 0 #49110c;
}

.primary-button {
	font-size: 22px;
}

.secondary-button {
	min-height: 44px;
	border-color: #d7a44e;
	background: linear-gradient(#7b2a20, #571912);
	font-size: 16px;
}

.level-select-button {
	min-height: 43px;
	border-color: #d8a44b;
	background: linear-gradient(#82432d, #552118);
	font-size: 15px;
}

.text-button {
	min-height: 30px;
	border: 0;
	color: #f0ca78;
	background: none;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.game-screen {
	display: flex;
	flex-direction: column;
	padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
	background: #43140d;
}

.game-header {
	position: relative;
	z-index: 20;
	flex: 0 0 auto;
}

.mini-title {
	height: 32px;
	text-align: center;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 4px;
	text-shadow: 0 2px 0 #54150d;
}

.hud-plaque {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	overflow: hidden;
	height: 62px;
	border: 3px double var(--gold);
	border-radius: 14px;
	background: linear-gradient(#7d2117, #47100c);
	box-shadow: 0 5px 0 rgba(49, 8, 5, 0.6);
}

.hud-plaque div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid rgba(239, 190, 79, 0.45);
}

.hud-plaque div:last-child { border: 0; }
.hud-plaque span { color: #efc571; font-size: 11px; }
.hud-plaque strong { font-family: Georgia, "Microsoft YaHei", sans-serif; font-size: 27px; line-height: 1; }
.hud-plaque .is-urgent { color: #ff7b55; animation: urgent 0.55s ease-in-out infinite alternate; }

.level-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	margin: 7px 8px 0;
	color: #f8dc91;
	font: 800 11px/1 "Microsoft YaHei", sans-serif;
}

.level-progress-track {
	height: 10px;
	overflow: hidden;
	border: 1px solid #e1a542;
	border-radius: 999px;
	background: rgba(48, 9, 6, .82);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
}

.level-progress-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #b83724, #ef9d38 72%, #ffe388);
	box-shadow: 0 0 8px rgba(255, 189, 66, .74);
	transition: width .2s ease;
}

.level-progress.is-complete .level-progress-track i {
	background: linear-gradient(90deg, #5d9f56, #c0df70, #fff0a1);
}

#courier-track {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 7px;
	overflow: hidden;
	border: 3px solid #d49339;
	border-radius: 17px;
	background: #caa66c;
	box-shadow: inset 0 0 18px rgba(54, 16, 8, 0.55), 0 5px 0 #55170e;
	touch-action: none;
}

#road-reel {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
}

#gate-reel {
	position: absolute;
	z-index: 18;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.road-segment {
	position: absolute;
	inset: 0 0 auto;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	will-change: transform;
}

.road-kitchen,
.road-pantry,
.road-lantern { background-image: var(--courier-road-image); }

.seam-gate {
	position: absolute;
	left: -9%;
	top: 0;
	width: 118%;
	height: 31%;
	transform: translateY(-47%);
	background: url("assets/campaign-v1/gate-topdown.png") center / contain no-repeat;
	filter: drop-shadow(0 9px 7px rgba(42, 10, 5, 0.5));
	opacity: 1;
	transition: opacity 0.24s ease, filter 0.24s ease;
	will-change: top, opacity;
	pointer-events: none;
}

.seam-gate.is-player-passing {
	opacity: 0.38;
	filter: drop-shadow(0 5px 4px rgba(42, 10, 5, 0.24));
}
.road-vignette {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(51, 12, 7, 0.28), transparent 16%, transparent 78%, rgba(44, 9, 5, 0.42)),
		linear-gradient(90deg, rgba(44, 9, 5, 0.24), transparent 18%, transparent 82%, rgba(44, 9, 5, 0.24));
}

.lane-guide {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 1px;
	background: repeating-linear-gradient(to bottom, transparent 0 24px, rgba(255, 242, 188, 0.34) 25px 34px);
	opacity: 0.65;
}

.guide-left { left: 43%; }
.guide-right { left: 57%; }

.speed-streak {
	position: absolute;
	z-index: 3;
	top: -80px;
	width: 3px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(transparent, rgba(255, 246, 197, 0.8));
	opacity: 0;
}

.is-running .speed-streak {
	animation: streak-drop 1.35s linear infinite;
}

.streak-one { left: 17%; animation-delay: -0.1s !important; }
.streak-two { left: 58%; animation-delay: -0.65s !important; }
.streak-three { left: 84%; animation-delay: -1.05s !important; }

.courier-player {
	position: absolute;
	z-index: 12;
	width: 92px;
	height: 142px;
	transform: translate(-50%, -50%);
	transition: left 0.22s cubic-bezier(0.2, 0.86, 0.24, 1.15);
	pointer-events: auto;
	touch-action: none;
	cursor: pointer;
}

.player-sprite {
	position: absolute;
	z-index: 3;
	inset: 0;
	background: url("assets/qstyle-v3/courier-run-v3.png") center bottom / contain no-repeat;
	filter: drop-shadow(0 8px 4px rgba(47, 12, 6, 0.48));
	transform-origin: 50% 90%;
	animation: runner-bob 0.34s ease-in-out infinite alternate;
}

.runner-shadow {
	position: absolute;
	z-index: 1;
	left: 18px;
	right: 18px;
	bottom: 4px;
	height: 18px;
	border-radius: 50%;
	background: rgba(38, 15, 9, 0.46);
	filter: blur(4px);
	animation: shadow-pulse 0.34s ease-in-out infinite alternate;
}

.player-aura {
	position: absolute;
	z-index: 0;
	inset: 14px 3px 0;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(255, 231, 145, 0.25), transparent 67%);
}

.courier-player.is-dodging-left .player-sprite { animation: dodge-left 0.34s ease; }
.courier-player.is-dodging-right .player-sprite { animation: dodge-right 0.34s ease; }
.courier-player.is-hit { animation: player-hit 0.55s ease; }
.courier-player.is-invulnerable { opacity: 0.64; }

.courier-player.is-shielded::before {
	content: "";
	position: absolute;
	z-index: 4;
	inset: -18px -34px -12px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(255, 236, 145, .38), rgba(255, 190, 46, .14) 52%, transparent 72%);
	box-shadow: 0 0 24px rgba(255, 197, 52, .72), inset 0 0 22px rgba(255, 225, 112, .32);
	animation: courier-bell-aura .86s ease-in-out infinite alternate;
	pointer-events: none;
}

.courier-player.is-shielded::after,
.courier-player.is-shield-burst::after {
	content: "";
	position: absolute;
	z-index: 5;
	inset: -25px -48px -20px;
	background: url("shared/powerups-v1/courier-guardian-bell.png") center / contain no-repeat;
	filter:
		sepia(.82) saturate(2.65) hue-rotate(346deg) brightness(1.22)
		drop-shadow(0 0 7px rgba(255, 237, 151, .96))
		drop-shadow(0 0 18px rgba(255, 174, 24, .88));
	opacity: .62;
	mix-blend-mode: screen;
	pointer-events: none;
}

.courier-player.is-shielded::after {
	animation: courier-bell-shield-pulse .86s ease-in-out infinite alternate;
}

.courier-player.is-shield-burst::after {
	animation: courier-bell-shield-burst .42s ease-out both;
}

@keyframes courier-bell-aura {
	to { transform: scale(1.08); opacity: .68; }
}

@keyframes courier-bell-shield-pulse {
	from { transform: scale(.96); opacity: .48; }
	to { transform: scale(1.06); opacity: .72; }
}

@keyframes courier-bell-shield-burst {
	0% { transform: scale(.94); opacity: .74; }
	55% { transform: scale(1.2); opacity: .94; filter: brightness(1.8) drop-shadow(0 0 24px #ffd557); }
	100% { transform: scale(1.42); opacity: 0; }
}

.courier-powerups {
	top: 11px;
	right: 9px;
	flex-direction: column;
}

.courier-powerups .imperial-powerup-button {
	min-width: 118px;
	background: linear-gradient(180deg, rgba(112, 40, 28, .93), rgba(49, 18, 13, .95));
}

.road-object {
	position: absolute;
	z-index: 10;
	transform: translate(-50%, -50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 8px 4px rgba(44, 10, 5, 0.5));
	will-change: top;
}

.obstacle-object.barrier {
	width: 70px;
	height: 70px;
	background-image: url("assets/qstyle-v3/barrier-v3.png");
}

.obstacle-object.crate {
	width: 58px;
	height: 58px;
	background-image: url("assets/qstyle-v3/crate-v3.png");
}

.obstacle-object.lantern {
	width: 68px;
	height: 62px;
	background-image: url("assets/qstyle-v3/lantern-v3.png");
}

.obstacle-object.steamer {
	width: 66px;
	height: 66px;
	background-image: url("assets/campaign-v2/stage-02-steamer.png");
	filter: drop-shadow(0 7px 4px rgba(44, 10, 5, 0.48)) drop-shadow(0 0 2px rgba(255, 205, 92, 0.62));
}

.obstacle-object.burner {
	width: 72px;
	height: 68px;
	background-image: url("assets/campaign-v1/obstacle-bronze-burner.png");
	filter: drop-shadow(0 8px 5px rgba(44, 10, 5, 0.56)) drop-shadow(0 0 5px rgba(255, 160, 48, 0.72));
}

.reward-object {
	width: 50px;
	height: 56px;
	animation: reward-float 0.6s ease-in-out infinite alternate;
}

.reward-object.score-reward {
	background-image: url("assets/qstyle-v3/reward-bun-v3.png");
	filter: drop-shadow(0 0 8px #ffe787) drop-shadow(0 7px 3px rgba(44, 10, 5, 0.45));
}

.reward-object.time-reward {
	width: 52px;
	height: 52px;
	background-image: url("assets/qstyle-v3/time-token-v1.png");
	filter: drop-shadow(0 0 9px #67f0dc) drop-shadow(0 0 5px #ffe47c) drop-shadow(0 7px 3px rgba(44, 10, 5, 0.45));
	animation-duration: .48s;
}

#courier-feedback {
	position: absolute;
	z-index: 24;
	left: 50%;
	top: 45%;
	min-width: min(72%, 270px);
	padding: 12px 22px;
	border: 3px solid #ffd76d;
	border-radius: 999px;
	text-align: center;
	color: #fff1aa;
	background: rgba(119, 29, 18, 0.5);
	box-shadow: inset 0 2px 0 rgba(255, 243, 180, .42), 0 0 18px rgba(255, 190, 59, .72), 0 7px 18px rgba(36, 7, 4, 0.62);
	font-size: clamp(21px, 5.5vw, 27px);
	font-weight: 900;
	letter-spacing: .04em;
	text-shadow: 0 2px 0 #5b170f, 0 0 8px rgba(255, 237, 163, .75);
	opacity: 0;
	transform: translate(-50%, -20%);
	pointer-events: none;
}

#courier-feedback.is-visible {
	animation: feedback-rise var(--courier-feedback-duration, 1.25s) ease forwards;
}

#courier-feedback.is-score {
	color: #fff1aa;
	background: linear-gradient(180deg, rgba(151, 50, 23, .5), rgba(91, 22, 13, .5));
}

#courier-feedback.is-time {
	color: #effff5;
	border-color: #8ff3d8;
	background: linear-gradient(180deg, rgba(24, 123, 112, .5), rgba(18, 68, 68, .5));
	box-shadow: inset 0 2px 0 rgba(222, 255, 244, .45), 0 0 21px rgba(80, 239, 210, .82), 0 7px 18px rgba(10, 35, 31, .62);
	text-shadow: 0 2px 0 #123d39, 0 0 9px rgba(215, 255, 238, .9);
}

#courier-feedback.is-bad {
	color: #fff;
	background: rgba(146, 30, 20, 0.5);
}

.game-tip {
	flex: 0 0 auto;
	margin: 7px 0 5px;
	text-align: center;
	color: #f2cf84;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 11px;
}

.game-controls {
	position: relative;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr 0.82fr 1fr;
	gap: 8px;
	flex: 0 0 59px;
}

.control-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 55px;
}

.control-button b {
	font-family: Georgia, sans-serif;
	font-size: 36px;
	line-height: 0.7;
}

.control-button span {
	font-size: 16px;
	letter-spacing: 1px;
}

.pause-button {
	background: linear-gradient(#754432, #49231b);
}

.pause-button b {
	font-size: 18px;
}

.modal-mask {
	position: absolute;
	z-index: 60;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 18px;
	background: rgba(23, 5, 3, 0.73);
	backdrop-filter: blur(4px);
}

.modal-panel {
	position: relative;
	width: 100%;
	max-width: 410px;
	max-height: 94%;
	overflow: auto;
	padding: 28px 20px 20px;
	border: 6px double #b87531;
	border-radius: 20px;
	color: var(--ink);
	text-align: center;
	background:
		linear-gradient(rgba(255, 246, 204, 0.94), rgba(247, 216, 145, 0.96)),
		repeating-linear-gradient(0deg, transparent 0 5px, rgba(121, 67, 31, 0.06) 6px);
	box-shadow: 0 14px 36px rgba(28, 5, 3, 0.72), inset 0 0 0 2px #fff1bd;
	animation: panel-in 0.24s ease both;
}

.compact-panel {
	max-width: 380px;
}

.panel-mark {
	position: absolute;
	top: 9px;
	left: 0;
	right: 0;
	color: #a43726;
	font-size: 12px;
}

.modal-panel h2 {
	margin: 0 0 14px;
	color: #8f291e;
	font-size: 31px;
	letter-spacing: 5px;
}

.level-panel {
	display: flex;
	flex-direction: column;
	max-width: 420px;
	max-height: min(88dvh, 760px);
	padding: 27px 16px 18px;
}

.level-panel h2 {
	margin-bottom: 4px;
}

.level-chapter-label {
	margin: 0 0 13px !important;
	color: #8a3b26;
	font-size: 14px !important;
	letter-spacing: 2px;
}

.level-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	min-height: 0;
	margin-bottom: 14px;
	overflow: auto;
	padding: 3px;
}

.level-button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 61px;
	padding: 5px 2px;
	border: 2px solid #c27e34;
	border-radius: 13px;
	color: #ffe7a1;
	background: linear-gradient(#9b3826, #611d15);
	box-shadow: 0 3px 0 #42100c, inset 0 0 9px rgba(255, 217, 116, 0.14);
}

.level-button strong {
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 21px;
	line-height: 1;
}

.level-button span {
	margin-top: 5px;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
}

.level-button.is-selected {
	border-color: #fff0a2;
	background: linear-gradient(#c34b2f, #7c261b);
	box-shadow: 0 0 0 2px #d9a03e, 0 0 14px rgba(255, 193, 70, 0.68);
	transform: translateY(-1px);
}

.level-button.is-cleared::after {
	content: "已通关";
	position: absolute;
	top: 3px;
	right: 3px;
	padding: 1px 3px;
	border-radius: 5px;
	color: #fff3be;
	background: #557a59;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 7px;
}

.level-button:disabled {
	border-color: #9e8061;
	color: #8d7a68;
	background: linear-gradient(#67594e, #433a34);
	box-shadow: 0 2px 0 #312923;
	cursor: not-allowed;
	filter: grayscale(0.7);
}

.level-close-button {
	flex: none;
	width: min(100%, 230px);
	margin: 0 auto;
}

.modal-panel p {
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.tutorial-scene {
	height: 132px;
	margin-bottom: 11px;
	padding: 8px;
	border-radius: 14px;
	background: #6b291c;
}

.tutorial-road {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
	background: url("assets/qstyle-v3/courtyard-road-v3.png") center / cover;
}

.tutorial-runner {
	position: absolute;
	left: 50%;
	bottom: -14px;
	width: 67px;
	height: 108px;
	transform: translateX(-50%);
	background: url("assets/qstyle-v3/courier-run-v3.png") center bottom / contain no-repeat;
	animation: tutorial-dodge 1.5s ease-in-out infinite;
}

.tutorial-obstacle {
	position: absolute;
	left: 50%;
	top: -8px;
	width: 76px;
	height: 75px;
	transform: translateX(-50%);
	background: url("assets/qstyle-v3/barrier-v3.png") center / contain no-repeat;
	animation: tutorial-obstacle 1.5s linear infinite;
}

.tutorial-road i {
	position: absolute;
	bottom: 33px;
	color: #fff0a7;
	font: 900 38px/1 Georgia, sans-serif;
	font-style: normal;
	text-shadow: 0 2px 3px #4b140c;
}

.arrow-left { left: 19%; }
.arrow-right { right: 19%; }

.tutorial-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.tutorial-list li {
	display: grid;
	grid-template-columns: 31px 1fr;
	align-items: center;
	gap: 8px;
	padding: 8px 9px;
	border-radius: 12px;
	background: rgba(255, 250, 220, 0.72);
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(12px, 3.4vw, 15px);
	font-weight: 700;
	line-height: 1.42;
}

.tutorial-list b {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	color: #ffe5a0;
	background: #a13223;
}

.modal-main-button {
	width: 100%;
	margin-top: 15px;
}

.modal-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}

.audio-link {
	margin-top: 11px;
	border: 0;
	color: #8c3324;
	background: none;
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.settings-panel h2 {
	margin-bottom: 20px;
}

.volume-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 7px 12px;
	margin-bottom: 18px;
	text-align: left;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 15px;
	font-weight: 900;
}

.volume-row b {
	color: #9e3425;
}

.volume-row input {
	grid-column: 1 / -1;
	width: 100%;
	height: 22px;
	margin: 0;
	accent-color: #b33b28;
	cursor: pointer;
}

.volume-row input:disabled {
	filter: grayscale(1);
	opacity: 0.42;
	cursor: not-allowed;
}

.settings-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.settings-actions .secondary-button {
	min-height: 48px;
}

.settings-panel.is-muted .volume-row {
	color: #8f8172;
}

.settings-panel.is-muted #mute-all-button {
	color: #fff2a8;
	background: linear-gradient(#486b53, #294735);
}

.result-label {
	color: #7c3e29;
	font-size: 15px;
}

.result-score {
	display: block;
	margin: -3px 0 4px;
	color: #9c2d20;
	font: 900 62px/1 Georgia, serif;
	text-shadow: 0 2px 0 #f9d981;
}

.reward-flash::before {
	content: "";
	position: absolute;
	z-index: 55;
	inset: 0;
	pointer-events: none;
	animation: reward-screen 0.26s ease;
}

.impact-shake {
	animation: app-shake 0.48s ease;
}

@keyframes seal-pulse {
	50% { transform: scale(1.08) rotate(-3deg); filter: brightness(1.12); }
}

@keyframes loading-dot {
	50% { transform: translateY(-8px); opacity: 0.5; }
}

@keyframes hero-run {
	50% { transform: translateX(-50%) translateY(-6px) rotate(1deg); }
}

@keyframes dust-out {
	from { opacity: 0.7; transform: scale(0.4); }
	to { opacity: 0; transform: translateY(12px) scale(1.3); }
}

@keyframes streak-drop {
	0% { transform: translateY(-40px); opacity: 0; }
	25% { opacity: 0.75; }
	100% { transform: translateY(780px); opacity: 0; }
}

@keyframes runner-bob {
	from { transform: translateY(0) rotate(-1deg); }
	to { transform: translateY(-4px) rotate(1deg); }
}

@keyframes shadow-pulse {
	to { transform: scale(0.86); opacity: 0.65; }
}

@keyframes dodge-left {
	50% { transform: rotate(-12deg) translateY(-4px); }
}

@keyframes dodge-right {
	50% { transform: rotate(12deg) translateY(-4px); }
}

@keyframes player-hit {
	0%, 100% { transform: translate(-50%, -50%); }
	25% { transform: translate(-56%, -50%) rotate(-5deg); filter: saturate(1.8); }
	50% { transform: translate(-44%, -50%) rotate(5deg); filter: saturate(1.8); }
	75% { transform: translate(-53%, -50%) rotate(-3deg); }
}

@keyframes reward-float {
	to { transform: translate(-50%, -56%) scale(1.05); }
}

@keyframes feedback-rise {
	0% { opacity: 0; transform: translate(-50%, 28%) scale(.72); }
	10% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
	18%, 72% { opacity: 1; transform: translate(-50%, -8%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -92%) scale(.94); }
}

@keyframes panel-in {
	from { opacity: 0; transform: translateY(18px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes urgent {
	to { transform: scale(1.09); }
}

@keyframes tutorial-dodge {
	0%, 28% { left: 50%; }
	52%, 76% { left: 24%; }
	100% { left: 50%; }
}

@keyframes tutorial-obstacle {
	from { top: -70px; }
	to { top: 120px; }
}

@keyframes reward-screen {
	from { background: rgba(255, 229, 116, 0.55); }
	to { background: transparent; }
}

@keyframes app-shake {
	0%, 100% { transform: translate(0); }
	20% { transform: translate(-5px, 2px); }
	40% { transform: translate(5px, -2px); }
	60% { transform: translate(-3px, 1px); }
	80% { transform: translate(3px, -1px); }
}

@media (max-height: 760px) {
	.start-screen { padding-top: 10px; }
	.start-title { padding: 8px; }
	.start-title h1 { font-size: 30px; }
	.start-hero { min-height: 250px; }
	.hero-runner { width: min(28%, 120px); }
	.mission-card { padding: 8px 12px; }
	.mission-card strong { font-size: 16px; }
	.ancient-button { min-height: 44px; }
	.primary-button { font-size: 19px; }
	.game-controls { flex-basis: 52px; }
	.control-button { min-height: 48px; }
}

@media (min-width: 700px) {
	body::before {
		content: "御膳房 · 宫廷急送";
		position: fixed;
		left: 4vw;
		top: 50%;
		color: rgba(244, 202, 105, 0.5);
		font-size: 18px;
		letter-spacing: 8px;
		writing-mode: vertical-rl;
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}