:root {
	--bg: #10291f;
	--leaf: #43d17a;
	--gold: #fbbf24;
	--danger: #ef4444;
	--ink: #f8fff8;
	--muted: #bdd8c4;
	--panel: rgba(7, 22, 17, 0.76);
	--stone: rgba(255, 255, 255, 0.1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: 'Inter', 'Segoe UI', sans-serif;
	color: var(--ink);
	background: radial-gradient(circle at 20% 10%, rgba(67, 209, 122, 0.22), transparent 30%),
		radial-gradient(circle at 82% 75%, rgba(251, 191, 36, 0.2), transparent 28%),
		linear-gradient(135deg, #0a1612 0%, #173b2c 55%, #08110e 100%);
}

button,
a {
	font: inherit;
}

.app-shell {
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp(1rem, 3vw, 2rem);
}

.toolbar,
.monster-card,
.problem-card,
.bottom-actions {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-radius: 1.4rem;
	padding: 1rem 1.2rem;
}

.eyebrow,
.label {
	margin: 0;
	color: var(--gold);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

h1,
h2,
p {
	margin: 0;
}

h1,
h2 {
	font-family: 'Cinzel', Georgia, serif;
}

h1 {
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1;
}

h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
}

.toolbar-actions,
.stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.bottom-actions {
	justify-content: center;
	margin: 1rem auto 0;
	border-radius: 1.2rem;
	padding: 1rem;
}

button,
#goBack {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	padding: 0.66rem 1rem;
	background: linear-gradient(135deg, #16a34a, #166534);
	color: #f8fff8;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 22px rgba(22, 101, 52, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

button:hover,
button:focus-visible,
#goBack:hover,
#goBack:focus-visible {
	outline: none;
	transform: translateY(-2px);
	border-color: rgba(251, 191, 36, 0.75);
}

.quest-board {
	display: grid;
	grid-template-columns: minmax(260px, 0.78fr) minmax(320px, 1.22fr);
	gap: 1rem;
	margin-top: 1rem;
}

.monster-card,
.problem-card {
	border-radius: 1.5rem;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.monster-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	text-align: center;
	min-height: 440px;
}

.monster-icon {
	font-size: clamp(5rem, 18vw, 9rem);
	filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.34));
}

.health-shell {
	width: min(320px, 100%);
	height: 20px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.34);
}

.health-fill {
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--danger), var(--gold));
	transition: width 260ms ease;
}

#questStatus,
.hint-text {
	color: var(--muted);
}

.stats-row {
	margin-bottom: 1.3rem;
}

.stats-row span {
	border-radius: 999px;
	padding: 0.55rem 0.8rem;
	background: var(--stone);
	font-weight: 800;
}

.problem-text {
	display: grid;
	justify-content: center;
	margin: 0.35rem auto 1rem;
	width: fit-content;
	font-size: clamp(3.3rem, 13vw, 7rem);
	font-weight: 900;
	line-height: .95;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: #fff7d6;
}

.problem-line {
	display: grid;
	grid-template-columns: 0.8em minmax(1.6em, auto);
	align-items: baseline;
}

.problem-line:first-child {
	grid-template-columns: minmax(1.6em, auto);
}

.problem-line:first-child .problem-number {
	grid-column: 1;
}

.problem-operator {
	color: var(--gold);
	text-align: left;
}

.problem-divider {
	height: .08em;
	margin-top: .05em;
	border-radius: 999px;
	background: var(--gold);
}

.answers-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, 1fr));
	gap: 0.8rem;
	margin-bottom: 1rem;
}

.treasure-room {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
	margin-top: 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.4rem;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(67, 209, 122, 0.16)), var(--panel);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
}

.treasure-chest {
	position: relative;
	width: clamp(4rem, 12vw, 5.5rem);
	height: clamp(3.8rem, 11vw, 5rem);
	margin: 0.35rem 0;
	border-radius: 0.9rem 0.9rem 1.15rem 1.15rem;
	background: linear-gradient(180deg, #c26d1a 0%, #8a4512 100%);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.16), 0 18px 30px rgba(180, 83, 9, 0.28);
	overflow: visible;
}

.treasure-chest::before,
.treasure-chest::after {
	content: '';
	position: absolute;
	background: linear-gradient(180deg, #ffe08a 0%, #fbbf24 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.treasure-chest::before {
	top: 0.7rem;
	bottom: 0.55rem;
	left: 50%;
	width: 0.5rem;
	transform: translateX(-50%);
	border-radius: 999px;
}

.treasure-chest::after {
	left: 0;
	right: 0;
	top: 1.35rem;
	height: 0.38rem;
}

.treasure-chest-lid {
	position: absolute;
	left: -0.2rem;
	right: -0.2rem;
	top: -0.85rem;
	height: 1.7rem;
	border-radius: 1.1rem 1.1rem 0.7rem 0.7rem;
	background: linear-gradient(180deg, #e18b2b 0%, #9c5015 100%);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 8px 14px rgba(0, 0, 0, 0.18);
	transform-origin: 18% 100%;
	transition: transform 480ms ease, box-shadow 480ms ease;
}

.treasure-chest-lid::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0.68rem;
	height: 0.34rem;
	background: linear-gradient(180deg, #ffe08a 0%, #fbbf24 100%);
}

.treasure-chest-lock {
	position: absolute;
	left: 50%;
	bottom: 0.45rem;
	width: 0.95rem;
	height: 1.05rem;
	transform: translateX(-50%);
	border-radius: 0.28rem;
	background: linear-gradient(180deg, #fff4bf 0%, #fbbf24 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.treasure-chest-lock::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -0.58rem;
	width: 0.62rem;
	height: 0.68rem;
	transform: translateX(-50%);
	border: 0.18rem solid #fbbf24;
	border-bottom: 0;
	border-radius: 0.45rem 0.45rem 0 0;
}

.treasure-gems {
	position: absolute;
	left: 0.55rem;
	right: 0.55rem;
	bottom: 0.95rem;
	height: 1.4rem;
	opacity: 0;
	transform: translateY(0.5rem) scale(0.85);
	transition: opacity 280ms ease 140ms, transform 380ms ease 140ms;
	pointer-events: none;
}

.treasure-gem {
	position: absolute;
	bottom: 0;
	width: 1rem;
	height: 1rem;
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.treasure-gem-a {
	left: 0.15rem;
	background: linear-gradient(180deg, #7dd3fc 0%, #2563eb 100%);
	transform: rotate(-10deg);
}

.treasure-gem-b {
	left: 50%;
	width: 1.15rem;
	height: 1.15rem;
	background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
	transform: translateX(-50%);
}

.treasure-gem-c {
	right: 0.15rem;
	background: linear-gradient(180deg, #f9a8d4 0%, #db2777 100%);
	transform: rotate(10deg);
}

.treasure-room.is-open .treasure-chest-lid {
	transform: translate(-0.12rem, -0.18rem) rotate(-32deg);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 14px 20px rgba(0, 0, 0, 0.22);
}

.treasure-room.is-open .treasure-gems {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.treasure-room.is-open .treasure-chest-lock {
	opacity: 0.7;
}

.treasure-copy {
	margin-top: 0.35rem;
	color: var(--muted);
}

.treasure-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	grid-column: 1 / -1;
}

.treasure-stats span {
	border-radius: 999px;
	padding: 0.55rem 0.8rem;
	background: rgba(255, 255, 255, 0.12);
	font-weight: 800;
}

.answer-button {
	min-height: 96px;
	border-radius: 1.2rem;
	background: linear-gradient(135deg, #f8fff8, #c7f9d4);
	color: #0b2217;
	font-size: clamp(1.8rem, 8vw, 3.2rem);
	box-shadow: 0 12px 0 #125b33;
}

.answer-button:active {
	transform: translateY(8px);
	box-shadow: 0 4px 0 #125b33;
}

.answer-button.correct {
	background: linear-gradient(135deg, #bbf7d0, #22c55e);
}

.answer-button.wrong {
	background: linear-gradient(135deg, #fecaca, #ef4444);
}

#confettiLayer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

.treasure {
	position: absolute;
	top: -8vh;
	width: 14px;
	height: 22px;
	border-radius: 999px;
	animation: treasure-fall var(--duration, 1600ms) linear forwards;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@keyframes treasure-fall {
	0% { opacity: 0; transform: translate3d(var(--x, 0), -8vh, 0) rotate(0deg); }
	10% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--x, 0), 112vh, 0) rotate(var(--spin, 540deg)); }
}

@media (max-width: 780px) {
	.app-shell {
		padding: 0.8rem;
	}

	.bottom-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.quest-board {
		grid-template-columns: 1fr;
	}

	.treasure-room {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.monster-card {
		min-height: auto;
	}
}
@media (max-width: 560px) {
	.app-shell { padding: .5rem; }
	.toolbar { padding: .55rem .7rem; border-radius: 1.1rem; }
	.eyebrow { display: none; }
	h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
	.quest-board { gap: .5rem; margin-top: .5rem; }
	.problem-card { order: 1; }
	.monster-card { order: 2; gap: .35rem; padding: .6rem; }
	.monster-icon { font-size: 3rem; }
	.monster-card, .problem-card { border-radius: 1rem; padding: .65rem; }
	.stats-row { gap: .4rem; margin-bottom: .65rem; }
	.stats-row span { padding: .38rem .55rem; }
	.problem-text { margin: .2rem auto .6rem; font-size: clamp(2.5rem, 16vw, 4.2rem); }
	.answers-grid { gap: .5rem; margin-bottom: .6rem; }
	.answer-button { min-height: 68px; border-radius: .9rem; }
	.treasure-room { padding: .8rem; border-radius: 1rem; }
	.treasure-stats { justify-content: center; }
}