:root {
	font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
	color: #fff0bd;
	background: #160706;
}

* { box-sizing: border-box; }

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	touch-action: none;
	background: #160706;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

body::before {
	content: "";
	position: fixed;
	inset: -30px;
	background: linear-gradient(rgba(31, 9, 7, .56), rgba(7, 2, 2, .88)),
		url("images/backgrounds-sheet0.png") left center / auto 100% no-repeat;
	filter: blur(18px) saturate(.72);
	transform: scale(1.08);
	z-index: 0;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.game-shell {
	position: absolute;
	top: 50%;
	left: 50%;
	flex: 0 0 auto;
	width: 576px;
	height: 1280px;
	aspect-ratio: 9 / 20;
	margin: 0;
	overflow: hidden;
	background:
		linear-gradient(rgba(43, 11, 8, .2), rgba(31, 7, 5, .42)),
		url("images/backgrounds-sheet0.png") center / cover no-repeat;
	box-shadow: 0 0 42px rgba(0, 0, 0, .68);
	isolation: isolate;
	z-index: 1;
	transform: translate(-50%, -50%) scale(var(--shell-scale, 1));
	transform-origin: center;
	will-change: transform;
	touch-action: none;
}

.game-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(circle at 50% 63%, transparent 18%, rgba(173, 8, 3, .34) 58%, rgba(89, 0, 0, .82) 100%),
		linear-gradient(180deg, rgba(255, 48, 20, .06), rgba(255, 20, 8, .34));
}

.game-shell.is-breaching::after { animation: breach-flash .9s ease-out both; }
.game-shell.is-breaching #game-canvas { animation: breach-canvas-shake .58s cubic-bezier(.36, .07, .19, .97) both; }
.game-shell.is-breaching .game-ui { animation: breach-ui-shake .58s cubic-bezier(.36, .07, .19, .97) both; }

@keyframes breach-flash {
	0% { opacity: 0; }
	12% { opacity: .96; }
	28% { opacity: .36; }
	45% { opacity: .82; }
	100% { opacity: .08; }
}

@keyframes breach-canvas-shake {
	0%, 100% { transform: translateY(-50%) translateX(0); filter: none; }
	15% { transform: translateY(-50%) translateX(-8px); filter: saturate(1.5) brightness(1.16); }
	30% { transform: translateY(-50%) translateX(7px); }
	45% { transform: translateY(-50%) translateX(-5px); }
	60% { transform: translateY(-50%) translateX(4px); }
	75% { transform: translateY(-50%) translateX(-2px); }
}

@keyframes breach-ui-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

#game-canvas {
	position: absolute;
	left: 0;
	top: 50%;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	transform: translateY(-50%);
	touch-action: none;
}

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

.home-screen, .game-ui, .center-overlay {
	position: absolute;
	inset: 0;
}

.home-screen {
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5.5% 5% 3.5%;
	background: linear-gradient(180deg, rgba(38, 10, 7, .12), rgba(31, 7, 5, .2) 55%, rgba(21, 5, 4, .8));
}

.home-kicker {
	margin: 0 0 2%;
	font-size: clamp(12px, 3.2vw, 17px);
	font-weight: 800;
	letter-spacing: .3em;
	text-shadow: 0 2px 4px #2c0906;
}

.home-logo {
	position: relative;
	z-index: 2;
	width: calc(100% + 22px);
	max-width: calc(100% + 22px);
	height: auto;
	margin-top: 1%;
	filter: drop-shadow(0 7px 8px rgba(24, 4, 3, .72));
}

.home-chef-maiden {
	position: absolute;
	top: 19.2%;
	left: 50%;
	z-index: 1;
	width: 72%;
	height: auto;
	max-width: none;
	max-height: 36.5%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 10px 12px rgba(38, 7, 4, .48)) drop-shadow(0 0 10px rgba(255, 186, 67, .16));
	transform: translateX(-50%);
	transform-origin: 50% 58%;
	animation: home-chef-float 3.4s ease-in-out infinite;
}

@keyframes home-chef-float {
	0%, 100% { transform: translateX(-50%) translateY(0) rotate(-.35deg); }
	50% { transform: translateX(-50%) translateY(-9px) rotate(.45deg); }
}

.home-rule-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 90%;
	margin-top: auto;
	margin-bottom: 5%;
	padding: 4% 5%;
	border: 2px solid rgba(232, 181, 77, .78);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(102, 29, 18, .9), rgba(50, 13, 10, .94));
	box-shadow: inset 0 0 18px rgba(255, 190, 68, .12), 0 8px 22px rgba(0, 0, 0, .35);
}

.home-rule-card strong { font-size: clamp(20px, 5.5vw, 29px); letter-spacing: .15em; }
.home-rule-card span { font-size: clamp(12px, 3.1vw, 16px); color: #ead4a0; }

.plaque-button {
	border: 2px solid #f0c45e;
	border-radius: 999px;
	color: #fff0bd;
	background: linear-gradient(180deg, #b13c2c, #781d16);
	box-shadow: inset 0 2px rgba(255, 239, 169, .28), 0 4px 0 #43100c, 0 8px 16px rgba(0, 0, 0, .28);
	font-weight: 900;
	letter-spacing: .1em;
	cursor: pointer;
	transition: transform 100ms ease, filter 100ms ease;
}

.plaque-button:active, .round-control:active {
	transform: translateY(3px) scale(.97);
	filter: brightness(1.14);
}

.primary-button {
	position: absolute;
	z-index: 3;
	top: 51.3%;
	left: 50%;
	width: 76%;
	min-height: 58px;
	font-size: clamp(23px, 6vw, 32px);
	transform: translate(-50%, -50%);
}
.primary-button:active { transform: translate(-50%, calc(-50% + 3px)) scale(.97); }
.home-rule-card {
	position: absolute;
	z-index: 3;
	top: 58.5%;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
}
.home-screen > .daily-challenge-status {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 70.2%;
	margin: 0;
	color: #f2d58d;
	font-size: clamp(11px, 2.8vw, 14px);
	font-weight: 800;
	transform: translateX(-50%);
	white-space: nowrap;
}
.gameover-card .daily-challenge-status { position: static; margin: 12px 0 0; transform: none; }
.level-select-button {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 73.3%;
	padding: 6px 18px;
	border: 1px solid rgba(239, 193, 93, .72);
	border-radius: 999px;
	color: #f8dfa0;
	background: rgba(55, 13, 10, .82);
	box-shadow: inset 0 0 10px rgba(255, 199, 84, .08);
	font-weight: 900;
	cursor: pointer;
	transform: translateX(-50%);
}
.level-select-button:active { transform: translateX(-50%) scale(.96); }
.home-actions {
	position: absolute;
	left: 50%;
	bottom: 3.5%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3%;
	width: 88%;
	margin: 0;
	transform: translateX(-50%);
}
.small-button { min-height: 44px; font-size: clamp(14px, 3.5vw, 18px); }

.game-ui { z-index: 8; pointer-events: none; }
.game-ui button { pointer-events: auto; }

.top-hud {
	position: absolute;
	top: 1.2%;
	left: 3%;
	right: 3%;
	display: grid;
	grid-template-columns: 1fr 1.34fr 1fr;
	gap: 1.5%;
}

.top-hud > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(52px, 13vw, 72px);
	border: 2px solid #e8b54c;
	border-radius: 13px;
	background: linear-gradient(180deg, rgba(62, 29, 75, .97) 0 49%, rgba(111, 27, 18, .98) 50%);
	box-shadow: 0 4px 0 #42100d, inset 0 0 12px rgba(255, 208, 93, .1);
}

.top-hud span { order: 2; font-size: clamp(11px, 2.8vw, 14px); font-weight: 900; }
.top-hud strong { order: 1; font: 900 clamp(21px, 5.8vw, 32px) Georgia, serif; color: #ffe196; line-height: 1.05; }
.top-hud .time-card strong { font-size: clamp(23px, 6.3vw, 35px); letter-spacing: .04em; }
.top-hud .time-card.is-warning { animation: time-warning .7s ease-in-out infinite alternate; }

@keyframes time-warning { to { filter: brightness(1.35); transform: scale(1.025); } }

.level-progress {
	position: absolute;
	top: 8.35%;
	left: 6%;
	right: 6%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 4px 10px;
	border: 2px solid #e8b54c;
	border-radius: 999px;
	color: #ffe9aa;
	background: linear-gradient(180deg, rgba(91, 28, 19, .97), rgba(49, 11, 10, .97));
	box-shadow: 0 3px 0 #2d0907, 0 5px 14px rgba(0, 0, 0, .32), inset 0 0 10px rgba(255, 199, 77, .08);
	font-size: clamp(10px, 2.55vw, 13px);
	font-weight: 900;
	letter-spacing: .04em;
}

.level-progress-track {
	position: relative;
	height: clamp(8px, 2vw, 11px);
	overflow: hidden;
	border: 1px solid rgba(255, 220, 132, .72);
	border-radius: 999px;
	background: #28100e;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}

.level-progress-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #c74327, #f09d32 62%, #ffe68a);
	box-shadow: 0 0 9px rgba(255, 189, 67, .78);
	transition: width .28s ease-out;
}

.level-progress strong {
	min-width: 7.5em;
	color: #ffe28a;
	text-align: right;
	font-size: inherit;
}

.level-progress.is-complete {
	filter: brightness(1.16);
	box-shadow: 0 3px 0 #2d0907, 0 0 16px rgba(255, 211, 82, .58), inset 0 0 12px rgba(255, 220, 99, .16);
}

.level-progress.is-complete .level-progress-track i {
	background: linear-gradient(90deg, #d69a21, #fff1a0);
}

.combo-banner {
	position: absolute;
	top: 11.8%;
	left: 50%;
	min-width: 42%;
	padding: 6px 18px;
	border-radius: 999px;
	text-align: center;
	font-size: clamp(15px, 4vw, 22px);
	font-weight: 900;
	color: #fff2a8;
	background: rgba(120, 32, 20, .92);
	box-shadow: 0 0 0 2px #efbd51, 0 6px 18px rgba(0, 0, 0, .35);
	transform: translate(-50%, -18px) scale(.9);
	opacity: 0;
	transition: .18s ease;
}

.combo-banner.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }

.next-ball-panel {
	position: absolute;
	left: 3.6%;
	bottom: 10.5%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 19%;
	padding: 6px 4px 5px;
	border: 2px solid #e8b54c;
	border-radius: 15px;
	background: linear-gradient(#742417, #3b0d0a);
	box-shadow: 0 5px 0 #2a0806, 0 8px 15px rgba(0, 0, 0, .35);
	font-size: clamp(11px, 2.8vw, 14px);
	font-weight: 900;
}

#next-ball-canvas { width: min(12vw, 58px); height: min(12vw, 58px); }

.score-panel {
	position: absolute;
	left: 50%;
	bottom: 2.3%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9%;
	width: 42%;
	min-height: clamp(44px, 11vw, 58px);
	border: 2px solid #e8b54c;
	border-radius: 999px;
	background: linear-gradient(#7d281b, #48100c);
	box-shadow: 0 4px 0 #2d0907;
	transform: translateX(-50%);
	font-size: clamp(14px, 3.6vw, 19px);
	font-weight: 900;
}

.score-panel strong { color: #ffe28a; font-size: clamp(22px, 5.7vw, 30px); }

.round-control {
	position: absolute;
	bottom: 2.2%;
	width: clamp(48px, 13%, 64px);
	aspect-ratio: 1;
	border: 2px solid #f0c45e;
	border-radius: 50%;
	color: #fff0bd;
	background: radial-gradient(circle at 50% 30%, #b5432e, #711a14 68%, #3b0c09);
	box-shadow: inset 0 0 0 3px rgba(74, 14, 10, .78), 0 4px 0 #2d0907, 0 7px 13px rgba(0, 0, 0, .34);
	font-weight: 900;
	cursor: pointer;
}

.left-control { left: 3%; }
.right-control { right: 3%; }

.feast-powerups {
	right: 3.2%;
	bottom: 10.5%;
	flex-direction: column;
}

.feast-powerups .imperial-powerup-button {
	min-width: 118px;
}

.center-overlay {
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5%;
	background: rgba(22, 5, 4, .76);
	backdrop-filter: blur(4px);
}

.modal-card {
	width: 100%;
	padding: 7% 6%;
	border: 3px double #efc15d;
	border-radius: 22px;
	background: radial-gradient(circle at 50% 0, #7d2b1c, #3c0e0b 76%);
	box-shadow: 0 18px 46px rgba(0, 0, 0, .58), inset 0 0 26px rgba(255, 185, 63, .1);
	text-align: center;
}

.compact-card { max-width: 88%; }
.modal-card h2 { margin: 0 0 18px; font-size: clamp(24px, 6.6vw, 36px); letter-spacing: .12em; }
.modal-card p { color: #ead6a7; font-size: clamp(14px, 3.6vw, 18px); }
.rules-card { text-align: left; }
.rules-card h2 { text-align: center; font-size: clamp(21px, 5.7vw, 30px); }
.rules-card ol { margin: 0 0 7%; padding-left: 1.7em; }
.rules-card li { margin: 0 0 14px; color: #f3dfae; font-size: clamp(14px, 3.5vw, 18px); line-height: 1.55; }

.level-card {
	max-height: 88%;
	padding: 5% 4%;
	overflow: hidden;
}
.level-card h2 { margin-bottom: 6px; }
.level-chapter-label {
	margin: 0 0 14px !important;
	color: #f4ce70 !important;
	font-weight: 900;
	letter-spacing: .12em;
}
.level-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 9px;
	max-height: 57vh;
	padding: 4px 3px 10px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.level-grid button {
	position: relative;
	min-height: 52px;
	border: 2px solid #dca847;
	border-radius: 12px;
	color: #fff0bd;
	background: linear-gradient(#8c2d20, #50120e);
	box-shadow: inset 0 0 12px rgba(255, 202, 88, .12), 0 3px 0 #280706;
	font-weight: 900;
	cursor: pointer;
}
.level-grid button span { display: block; font-size: 10px; color: #e7c987; }
.level-grid button.is-selected { outline: 3px solid #ffe17e; filter: brightness(1.16); }
.level-grid button.is-cleared::after {
	content: "通";
	position: absolute;
	right: 3px;
	top: 2px;
	color: #ffe17e;
	font-size: 9px;
}
.level-grid button:disabled {
	border-color: #76533a;
	color: #8e7963;
	background: #331814;
	box-shadow: none;
	cursor: not-allowed;
}
.level-card > .modal-primary { margin-top: 15px; }

.modal-primary, .modal-secondary { min-height: 46px; padding: 0 22px; font-size: clamp(15px, 3.8vw, 19px); }
.modal-secondary { background: linear-gradient(#7b5531, #4a2818); }
.modal-actions { display: flex; justify-content: center; gap: 4%; margin-top: 7%; }
.text-button { margin-top: 18px; border: 0; color: #d9bd7d; background: none; font-weight: 800; cursor: pointer; }

.settings-card label { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 20px 0; text-align: left; font-weight: 900; }
.settings-card output { color: #ffe184; }
.settings-card input { grid-column: 1 / -1; width: 100%; accent-color: #e59d35; }
.settings-card.is-muted label { opacity: .42; }
.settings-card.is-muted input { pointer-events: none; filter: grayscale(1); }

.gameover-card .result-mark { margin: 0 0 4px; color: #e8bc57; letter-spacing: .28em; }
.gameover-card h2 { font-size: clamp(34px, 9vw, 48px); }
.result-score { margin: 0; font-size: clamp(21px, 5.7vw, 30px) !important; font-weight: 900; }
.result-score strong { color: #ffe17e; font-size: 1.35em; }
.result-best { display: inline-block; margin: 14px 0 0; padding: 8px 24px; border: 1px solid #d79b3c; border-radius: 999px; background: rgba(55, 12, 9, .62); }
.result-reason { margin-bottom: 0; color: #fff0bd !important; font-weight: 900; }

@media (max-height: 620px) {
	.home-logo { width: 75%; margin-top: 1%; }
	.home-rule-card { margin-bottom: 2%; padding: 2.5% 4%; }
	.primary-button { min-height: 48px; }
}