:root {
	--ink: #2a100c;
	--red: #8f2f20;
	--deep-red: #521811;
	--gold: #e7b950;
	--pale-gold: #ffe8a5;
	--paper: #f5dfac;
	--jade: #5e8d72;
	--chapter-bg: url("chapter-art/chapter-1-morning-market.png");
	--stage-width: min(100vw, 480px, calc(100svh * 0.62));
	font-family: "STKaiti", "KaiTi", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	color: #fff3c5;
	background: #120705;
}

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

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	overscroll-behavior-x: none;
	background:
		linear-gradient(rgba(20, 6, 4, 0.78), rgba(20, 6, 4, 0.82)),
		url("palace_background.png") center / cover fixed;
	touch-action: manipulation;
}

.ios-back-gesture-guard {
	display: none;
}

html.ios-touch-device #snack-app.is-playing > .ios-back-gesture-guard {
	display: block;
	position: fixed;
	z-index: 2147483000;
	left: 0;
	top: 0;
	bottom: 0;
	width: max(24px, env(safe-area-inset-left));
	touch-action: none;
	overscroll-behavior: none;
	background: transparent;
}

button {
	font: inherit;
}

button:focus-visible {
	outline: 3px solid #fff1a6;
	outline-offset: 3px;
}

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

#snack-app {
	position: relative;
	width: var(--stage-width);
	height: 100svh;
	min-height: 560px;
	margin: 0 auto;
	overflow: hidden;
	touch-action: none;
	isolation: isolate;
	background:
		linear-gradient(180deg, rgba(25, 7, 5, 0.12), rgba(34, 9, 6, 0.7)),
		var(--chapter-bg) center / cover no-repeat;
	box-shadow: 0 0 70px #000, inset 0 0 80px rgba(24, 5, 3, 0.38);
}

#snack-app::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(25, 5, 3, 0.48), transparent 17%, transparent 83%, rgba(25, 5, 3, 0.48)),
		linear-gradient(180deg, rgba(45, 12, 8, 0.06), rgba(35, 9, 6, 0.6));
	pointer-events: none;
}

.screen {
	position: absolute;
	inset: 0;
	padding:
		max(12px, env(safe-area-inset-top))
		14px
		max(12px, env(safe-area-inset-bottom));
}

.ambient-lantern {
	position: absolute;
	z-index: 0;
	top: 8%;
	width: 52px;
	height: 70px;
	border: 3px solid #672217;
	border-radius: 12px;
	background: radial-gradient(circle, #fff2a5, #e99734 48%, rgba(144, 44, 20, 0.86));
	box-shadow: 0 0 28px rgba(255, 177, 69, 0.58);
	opacity: 0.72;
	animation: lantern-sway 3.6s ease-in-out infinite;
	pointer-events: none;
}

.ambient-lantern::before,
.ambient-lantern::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	background: #b45f28;
	transform: translateX(-50%);
}

.ambient-lantern::before {
	bottom: 100%;
	height: 70px;
}

.ambient-lantern::after {
	top: 100%;
	height: 28px;
}

.lantern-left { left: -19px; }
.lantern-right { right: -19px; animation-delay: -1.8s; }

.loading-screen {
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background:
		radial-gradient(circle at center, rgba(169, 69, 30, 0.42), transparent 42%),
		linear-gradient(160deg, #32100d, #6f2418 55%, #250b08);
	transition: opacity 0.35s ease;
}

.loading-screen.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.loading-seal {
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border: 5px double var(--gold);
	border-radius: 50%;
	color: var(--pale-gold);
	background: #7f281c;
	box-shadow: 0 0 0 9px rgba(231, 185, 80, 0.15), 0 13px 30px rgba(0, 0, 0, 0.35);
	font-size: 52px;
	font-weight: 900;
	animation: seal-pulse 1.2s ease-in-out infinite;
}

.loading-screen h1 {
	margin: 18px 0 0;
	color: #ffe69b;
	font-size: clamp(34px, 10vw, 52px);
	letter-spacing: 0.12em;
	text-shadow: 0 4px 0 #681c14, 0 8px 20px rgba(0, 0, 0, 0.52);
}

.loading-screen p {
	margin: 0;
	color: #efc875;
	font-size: 16px;
	letter-spacing: 0.22em;
}

.loading-snacks {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 78px;
	margin-top: 14px;
}

.loading-snacks img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.45));
	animation: snack-bounce 1.1s ease-in-out infinite;
}

.loading-snacks img:nth-child(2) { animation-delay: -0.36s; }
.loading-snacks img:nth-child(3) { animation-delay: -0.72s; }

.start-screen {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(180deg, rgba(34, 8, 5, 0.08), rgba(37, 10, 7, 0.46) 58%, rgba(27, 7, 5, 0.92));
}

.start-hero {
	width: 100%;
	padding-top: clamp(22px, 6vh, 58px);
	text-align: center;
}

.hero-kicker {
	color: #f5d784;
	font-size: clamp(13px, 3.5vw, 17px);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-shadow: 0 2px 4px #37100c;
}

.title-plaque {
	position: relative;
	width: 94%;
	margin: 16px auto 0;
	padding: 20px 24px 16px;
	border: 5px double #efc76b;
	border-radius: 22px 22px 30px 30px;
	background:
		linear-gradient(180deg, rgba(180, 64, 36, 0.96), rgba(103, 28, 20, 0.98)),
		repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 226, 137, 0.08) 18px 20px);
	box-shadow:
		0 0 0 4px rgba(76, 18, 13, 0.92),
		0 14px 25px rgba(22, 4, 3, 0.48),
		inset 0 0 22px rgba(255, 200, 91, 0.18);
}

.title-plaque::before,
.title-plaque::after {
	content: "◆";
	position: absolute;
	top: 50%;
	color: #f6d076;
	font-size: 18px;
	transform: translateY(-50%);
}

.title-plaque::before { left: 10px; }
.title-plaque::after { right: 10px; }

.title-plaque h1 {
	margin: 0;
	color: #ffe5a0;
	font-size: clamp(38px, 11vw, 60px);
	line-height: 1;
	letter-spacing: 0.08em;
	text-shadow: 0 3px 0 #50130e, 0 0 12px rgba(255, 210, 105, 0.3);
}

.title-plaque p {
	margin: 10px 0 0;
	color: #efc96e;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.38em;
}

.snack-display {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(12px, 4vw, 24px);
	height: clamp(105px, 16vh, 145px);
	margin-top: 4px;
}

.snack-display img {
	width: clamp(72px, 21vw, 104px);
	height: clamp(72px, 21vw, 104px);
	object-fit: contain;
	filter: drop-shadow(0 8px 5px rgba(25, 5, 3, 0.58));
	animation: snack-float 2.6s ease-in-out infinite;
}

.snack-display img:nth-child(2) {
	width: clamp(92px, 26vw, 126px);
	height: clamp(92px, 26vw, 126px);
	animation-delay: -0.8s;
}

.snack-display img:nth-child(3) { animation-delay: -1.5s; }

.start-copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 92%;
	padding: 11px 16px;
	border-top: 1px solid rgba(239, 198, 103, 0.55);
	border-bottom: 1px solid rgba(239, 198, 103, 0.55);
	text-align: center;
	text-shadow: 0 2px 4px #250806;
}

.start-copy strong {
	color: #ffe4a0;
	font-size: clamp(15px, 4vw, 19px);
}

.start-copy span {
	color: #dcbf81;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(11px, 3vw, 14px);
}

.best-record {
	margin: 12px 0 10px;
	color: #e8c779;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 14px;
}

.best-record strong {
	color: #fff0a9;
	font-size: 20px;
}

.start-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 88%;
	margin-top: auto;
	padding-bottom: clamp(3px, 2vh, 18px);
}

.ancient-button {
	position: relative;
	min-height: 44px;
	border: 2px solid #e9bd58;
	border-radius: 999px;
	color: #ffe8a9;
	background: linear-gradient(180deg, #a83b26, #6d1d16);
	box-shadow: 0 4px 0 #3c0e0a, inset 0 0 12px rgba(255, 214, 116, 0.17);
	font-weight: 900;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.ancient-button::before,
.ancient-button::after {
	content: "·";
	position: absolute;
	top: 50%;
	color: #f3cf74;
	transform: translateY(-52%);
}

.ancient-button::before { left: 13px; }
.ancient-button::after { right: 13px; }

.ancient-button:active {
	transform: translateY(3px) scale(0.98);
	box-shadow: 0 1px 0 #3c0e0a, inset 0 0 16px rgba(255, 214, 116, 0.24);
	filter: brightness(1.08);
}

.primary-button {
	width: min(100%, 330px);
	min-height: 58px;
	font-size: clamp(20px, 5.5vw, 27px);
}

.level-select-button {
	width: min(100%, 330px);
	min-height: 40px;
	font-size: clamp(13px, 3.5vw, 16px);
	background: linear-gradient(180deg, #87412a, #5c2418);
}

.secondary-actions,
.modal-secondary-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: min(100%, 330px);
}

.small-button {
	width: 100%;
	font-size: clamp(13px, 3.6vw, 16px);
}

.text-button {
	border: 0;
	color: #dfc17c;
	background: transparent;
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: rgba(223, 193, 124, 0.45);
	text-underline-offset: 5px;
	cursor: pointer;
}

.text-button:active { color: #fff0b2; }

.game-screen {
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(34, 8, 5, 0.5), rgba(31, 8, 5, 0.72));
}

.game-header {
	flex: none;
	padding-top: 1px;
}

.round-title {
	margin-bottom: 6px;
	color: #ffe5a0;
	font-size: clamp(18px, 5vw, 25px);
	font-weight: 900;
	letter-spacing: 0.18em;
	text-align: center;
	text-shadow: 0 3px 0 #57170f;
}

.score-ribbon {
	display: grid;
	grid-template-columns: 1fr 1.16fr 1fr;
	overflow: hidden;
	border: 2px solid var(--gold);
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(99, 27, 20, 0.98), rgba(53, 14, 11, 0.98));
	box-shadow: 0 5px 13px rgba(19, 3, 2, 0.43), inset 0 0 15px rgba(255, 210, 104, 0.09);
}

.score-ribbon > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 6px 4px 7px;
}

.score-ribbon > div + div { border-left: 1px solid rgba(232, 184, 80, 0.36); }

.score-ribbon span {
	color: #ddb970;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(10px, 2.7vw, 12px);
	font-weight: 800;
}

.score-ribbon strong {
	color: #ffe79e;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(20px, 5.6vw, 28px);
	line-height: 1.05;
	text-shadow: 0 2px 0 #4a100c;
}

.level-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	margin: 5px 6px 0;
	color: #f6d887;
	font: 800 clamp(10px, 2.6vw, 12px)/1 "Microsoft YaHei", sans-serif;
}

.level-progress-track {
	height: 10px;
	overflow: hidden;
	border: 1px solid #d99a37;
	border-radius: 999px;
	background: rgba(35, 7, 5, .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, #bc3825, #f0a63c 72%, #ffe58c);
	box-shadow: 0 0 8px rgba(255, 198, 73, .72);
	transition: width .22s ease;
}

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

.time-stat strong.is-urgent {
	color: #ff8b67;
	animation: urgent-pulse 0.7s ease-in-out infinite;
}

.time-stat strong.is-bonus {
	color: #bff2a8;
	animation: time-bonus-pop 0.7s cubic-bezier(0.18, 0.78, 0.24, 1.16);
	text-shadow: 0 2px 0 #315f31, 0 0 13px rgba(176, 255, 143, 0.72);
}

.board-area {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 6px 0 2px;
}

.board-heading {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 9px;
	width: 94%;
	margin-bottom: 5px;
	color: #f4d27d;
	font-size: clamp(12px, 3.2vw, 15px);
	letter-spacing: 0.18em;
}

.board-heading span {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(239, 199, 102, 0.75));
}

.board-heading span:last-child { transform: scaleX(-1); }

#board-shell {
	position: relative;
	width: min(100%, calc((100svh - 210px) * 0.875));
	max-width: 450px;
	padding: clamp(7px, 1.8vw, 10px);
	border: 4px double #e3b552;
	border-radius: 22px;
	background:
		linear-gradient(rgba(63, 17, 12, 0.92), rgba(38, 10, 8, 0.96)),
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 222, 133, 0.05) 12px 14px);
	box-shadow:
		0 9px 22px rgba(17, 3, 2, 0.52),
		inset 0 0 22px rgba(255, 204, 92, 0.12),
		0 0 0 3px rgba(68, 17, 12, 0.7);
}

#board {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(8, 1fr);
	gap: clamp(2px, 0.65vw, 4px);
	width: 100%;
	aspect-ratio: 7 / 8;
	touch-action: none;
}

#gesture-trail {
	position: absolute;
	z-index: 6;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s ease;
}

#gesture-trail.is-visible {
	opacity: 1;
}

#gesture-trail.is-releasing {
	opacity: 0;
	transition-duration: 0.2s;
}

#gesture-trail-shadow,
#gesture-trail-path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#gesture-trail-shadow {
	stroke: rgba(49, 10, 7, 0.8);
	stroke-width: 10;
}

#gesture-trail-path {
	stroke: #ffe184;
	stroke-width: 4;
	stroke-dasharray: 8 7;
	filter: url("#gesture-glow");
	marker-end: url("#gesture-arrow");
	animation: gesture-dash 0.48s linear infinite;
}

#gesture-arrow path {
	fill: #fff0a8;
	stroke: #8d321f;
	stroke-width: 0.8;
}

#gesture-start-dot {
	fill: #a83d27;
	stroke: #ffe391;
	stroke-width: 3;
	filter: url("#gesture-glow");
}

#gesture-end-dot {
	fill: rgba(255, 224, 124, 0.35);
	stroke: #fff0aa;
	stroke-width: 3;
	filter: url("#gesture-glow");
	animation: gesture-end-pulse 0.72s ease-in-out infinite;
}

.snack-tile {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
	padding: 2px;
	border: 1px solid rgba(247, 207, 112, 0.33);
	border-radius: 24%;
	background:
		radial-gradient(circle at 45% 35%, rgba(255, 244, 192, 0.18), transparent 38%),
		linear-gradient(145deg, rgba(150, 62, 35, 0.6), rgba(65, 18, 14, 0.78));
	box-shadow: inset 0 0 7px rgba(255, 218, 128, 0.09), 0 2px 3px rgba(12, 2, 1, 0.34);
	cursor: pointer;
	touch-action: none;
	transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.snack-tile img {
	width: 94%;
	height: 94%;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 3px 2px rgba(22, 4, 3, 0.58));
	user-select: none;
	-webkit-user-drag: none;
}

.snack-tile.is-selected {
	z-index: 2;
	border-color: #fff0a9;
	background: radial-gradient(circle, rgba(255, 221, 112, 0.42), rgba(129, 44, 25, 0.88));
	box-shadow: 0 0 0 2px #e8b647, 0 0 15px #ffd66f, inset 0 0 9px rgba(255, 245, 192, 0.35);
	transform: scale(1.08);
}

.snack-tile.is-hinted {
	z-index: 2;
	animation: hint-glow 0.7s ease-in-out infinite;
}

.snack-tile.is-removing {
	animation: remove-snack 0.28s ease-in forwards;
}

.snack-tile.is-swapping {
	z-index: 3;
	animation: swap-snack 0.23s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
	box-shadow:
		0 0 0 2px rgba(255, 226, 133, 0.72),
		0 7px 13px rgba(18, 3, 2, 0.48),
		inset 0 0 10px rgba(255, 235, 173, 0.25);
}

.snack-tile.is-swapping-front {
	z-index: 4;
}

.snack-tile.is-dropping {
	animation: settle-drop var(--drop-duration, 300ms) cubic-bezier(0.18, 0.78, 0.24, 1.12) both;
}

.snack-tile.is-new {
	animation: drop-snack 0.25s cubic-bezier(0.2, 0.8, 0.25, 1.18);
}

#board.is-invalid {
	animation: invalid-shake 0.28s ease;
}

#combo-popup {
	position: absolute;
	z-index: 8;
	left: 50%;
	top: 19%;
	width: max-content;
	padding: 5px 11px;
	border: 1px solid #ffd875;
	border-radius: 999px;
	color: #fff0ae;
	background: rgba(116, 32, 20, 0.94);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 207, 102, 0.2);
	font-size: clamp(15px, 4.4vw, 21px);
	font-weight: 900;
	letter-spacing: 0.04em;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.72);
}

#combo-popup.is-visible {
	animation: combo-pop 0.72s ease forwards;
}

#game-tip {
	min-height: 18px;
	margin: 7px 0 0;
	color: #dfc482;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(10px, 2.8vw, 13px);
	text-align: center;
}

.game-actions {
	display: grid;
	flex: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	padding: 4px 2px 0;
}

.game-screen > .snacks-powerups {
	position: absolute;
	left: 50%;
	bottom: calc(max(12px, env(safe-area-inset-bottom)) + 58px);
	width: max-content;
	max-width: calc(100% - 24px);
	justify-content: center;
	margin: 0;
	transform: translateX(-50%);
}

.snacks-powerups .imperial-powerup-button {
	min-width: 128px;
}

@media (max-height: 760px) {
	.game-screen > .snacks-powerups { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }
	.snacks-powerups .imperial-powerup-button { min-width: 108px; }
	#board-shell { width: min(100%, calc((100svh - 346px) * 0.875)); }
}

.game-button {
	min-height: 44px;
	font-size: clamp(13px, 3.6vw, 17px);
}

.game-button::before { left: 7px; }
.game-button::after { right: 7px; }

.game-button.exit-button {
	background: linear-gradient(180deg, #9d3325, #6f1f17);
}

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

.modal-panel {
	position: relative;
	width: 100%;
	max-height: calc(100svh - 36px);
	overflow: auto;
	padding: 24px 18px 20px;
	border: 4px double #e5b955;
	border-radius: 24px;
	color: #4b1a12;
	background:
		linear-gradient(rgba(255, 238, 190, 0.95), rgba(239, 203, 131, 0.98)),
		repeating-linear-gradient(0deg, transparent 0 18px, rgba(104, 40, 22, 0.05) 18px 19px);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.58), inset 0 0 25px rgba(122, 47, 24, 0.11);
	text-align: center;
}

.modal-panel::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid rgba(132, 54, 29, 0.3);
	border-radius: 17px;
	pointer-events: none;
}

.modal-panel h2 {
	position: relative;
	margin: 0 0 15px;
	color: #7f281d;
	font-size: clamp(28px, 8vw, 39px);
	letter-spacing: 0.12em;
}

.level-panel {
	display: flex;
	flex-direction: column;
	width: min(100%, 420px);
	max-width: 420px;
	max-height: min(86svh, 760px);
	padding: 28px 16px 18px;
}

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

.level-chapter-label {
	margin: 0 0 13px;
	color: #8b3b25;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

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

.level-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 61px;
	padding: 5px 2px;
	border: 2px solid #c68135;
	border-radius: 13px;
	color: #ffe7a2;
	background: linear-gradient(180deg, #9a3925, #642016);
	box-shadow: 0 3px 0 #43120d, inset 0 0 9px rgba(255, 217, 116, 0.14);
	cursor: pointer;
}

.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: 700;
	white-space: nowrap;
}

.level-button.is-selected {
	border-color: #fff1a7;
	background: linear-gradient(180deg, #c24b2d, #80271b);
	box-shadow: 0 0 0 2px #d99f3d, 0 0 15px rgba(255, 195, 76, 0.7), inset 0 0 10px rgba(255, 234, 159, 0.25);
	transform: translateY(-1px);
}

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

.level-button {
	position: relative;
}

.level-button:disabled {
	border-color: #9b7c5a;
	color: #8b7764;
	background: linear-gradient(180deg, #66564b, #433a34);
	box-shadow: 0 2px 0 #312923;
	cursor: not-allowed;
	filter: grayscale(0.65);
}

.level-panel > .small-button {
	flex: none;
	width: min(100%, 220px);
	min-height: 42px;
	margin: 0 auto;
}

.panel-ornament {
	position: absolute;
	top: 10px;
	left: 50%;
	color: #b66b31;
	font-size: 12px;
	transform: translateX(-50%);
}

.tutorial-demo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 78px;
	margin-bottom: 13px;
	border: 2px solid #9b3a25;
	border-radius: 17px;
	background: linear-gradient(145deg, #6f2118, #9b3824);
}

.tutorial-demo img {
	width: clamp(44px, 13vw, 61px);
	height: clamp(44px, 13vw, 61px);
	object-fit: contain;
	filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.38));
}

.tutorial-demo span {
	color: #ffe49a;
	font-family: sans-serif;
	font-size: 27px;
	font-weight: 900;
}

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

.tutorial-steps li {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border-radius: 13px;
	background: rgba(255, 247, 214, 0.68);
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(12px, 3.5vw, 15px);
	font-weight: 700;
	line-height: 1.45;
}

.tutorial-steps b {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #ffe6a2;
	background: #9d3423;
}

.modal-main-button {
	margin-top: 16px;
}

.compact-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(100%, 390px);
	max-width: 390px;
	padding: 34px 24px 26px;
}

.compact-panel p {
	margin: -5px 0 18px;
	color: #7e5033;
	font-family: "Microsoft YaHei", sans-serif;
}

.pause-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: min(100%, 310px);
	margin: 0 auto;
}

.pause-actions .ancient-button {
	width: 100%;
	min-height: 48px;
	margin: 0;
}

.pause-actions .primary-button {
	min-height: 56px;
}

.pause-actions .small-button {
	font-size: clamp(15px, 4vw, 18px);
}

.audio-settings-panel {
	gap: 14px;
}

.audio-setting-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 14px;
	width: 100%;
	color: #6f281d;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 15px;
	font-weight: 800;
	text-align: left;
}

.audio-setting-row output {
	color: #922e20;
	font-variant-numeric: tabular-nums;
}

.audio-setting-row input {
	grid-column: 1 / -1;
	width: 100%;
	accent-color: #a93424;
}

.audio-settings-panel.is-muted .audio-setting-row {
	opacity: .42;
}

.audio-settings-panel.is-muted input {
	pointer-events: none;
	filter: grayscale(1);
}

.audio-settings-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
}

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

.result-label {
	margin: 5px 0 0;
	color: #91603b;
	font-family: "Microsoft YaHei", sans-serif;
	font-weight: 800;
	letter-spacing: 0.18em;
}

#result-score {
	display: block;
	margin: 2px 0 8px;
	color: #922e20;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: clamp(54px, 16vw, 78px);
	line-height: 1;
	text-shadow: 0 3px 0 rgba(126, 52, 25, 0.2);
}

#result-record,
#result-comment {
	margin: 7px 0;
	color: #754328;
	font-family: "Microsoft YaHei", sans-serif;
	font-weight: 700;
}

.result-panel .text-button {
	margin-top: 16px;
	color: #7e422a;
}

.result-panel .text-button + .text-button {
	margin-top: 6px;
}

@keyframes lantern-sway {
	0%, 100% { transform: rotate(-2deg); }
	50% { transform: rotate(2deg); }
}

@keyframes seal-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(231, 185, 80, 0.12), 0 13px 30px rgba(0, 0, 0, 0.35); }
	50% { transform: scale(1.04); box-shadow: 0 0 0 15px rgba(231, 185, 80, 0.04), 0 15px 35px rgba(0, 0, 0, 0.45); }
}

@keyframes snack-bounce {
	0%, 100% { transform: translateY(3px) rotate(-4deg); }
	50% { transform: translateY(-10px) rotate(4deg); }
}

@keyframes snack-float {
	0%, 100% { transform: translateY(4px) rotate(-2deg); }
	50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes urgent-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

@keyframes time-bonus-pop {
	0% { transform: scale(1); }
	28% { transform: scale(1.26); }
	62% { transform: scale(0.96); }
	100% { transform: scale(1); }
}

@keyframes hint-glow {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px #e7b950, 0 0 8px #ffd96c; }
	50% { transform: scale(1.1); box-shadow: 0 0 0 3px #fff0a9, 0 0 20px #ffd96c; }
}

@keyframes remove-snack {
	0% { opacity: 1; transform: scale(1) rotate(0); }
	60% { opacity: 1; transform: scale(1.18) rotate(8deg); filter: brightness(1.45); }
	100% { opacity: 0; transform: scale(0.2) rotate(-18deg); }
}

@keyframes swap-snack {
	0% {
		transform: translate(0, 0) scale(1);
		filter: brightness(1);
	}
	48% {
		transform: translate(var(--swap-half-x), var(--swap-half-y)) scale(1.12);
		filter: brightness(1.22);
	}
	100% {
		transform: translate(var(--swap-x), var(--swap-y)) scale(1);
		filter: brightness(1.06);
	}
}

@keyframes settle-drop {
	0% {
		opacity: 0.68;
		transform: translateY(calc(var(--drop-rows) * -108%)) scale(0.92);
		filter: brightness(1.18);
	}
	72% {
		opacity: 1;
		transform: translateY(3%) scale(1.035);
		filter: brightness(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: brightness(1);
	}
}

@keyframes drop-snack {
	0% { opacity: 0; transform: translateY(-55%) scale(0.75); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes invalid-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-7px); }
	50% { transform: translateX(6px); }
	75% { transform: translateX(-3px); }
}

@keyframes combo-pop {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
	22% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.08); }
	72% { opacity: 0.8; transform: translate(-50%, -57%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -72%) scale(0.92); }
}

@keyframes gesture-dash {
	to { stroke-dashoffset: -15; }
}

@keyframes gesture-end-pulse {
	0%, 100% { r: 7; opacity: 0.78; }
	50% { r: 10; opacity: 1; }
}

@media (max-height: 680px) {
	.start-hero { padding-top: 8px; }
	.snack-display { height: 86px; }
	.snack-display img { width: 70px; height: 70px; }
	.snack-display img:nth-child(2) { width: 88px; height: 88px; }
	.start-copy { padding: 7px 12px; }
	.best-record { margin: 7px 0; }
	.start-actions { gap: 7px; }
	.primary-button { min-height: 50px; }
	.round-title { margin-bottom: 3px; }
	.score-ribbon > div { padding: 3px; }
	.board-heading { margin-bottom: 3px; }
	#game-tip { margin-top: 4px; }
}

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