:root {
	--honey: #ffc326;
	--honey-dark: #d88908;
	--honey-light: #fff0a8;
	--cream: #fff8df;
	--cream-deep: #ffe8a8;
	--brown: #3d2412;
	--brown-soft: #6b4425;
	--green: #70bf2a;
	--green-dark: #3d8b1f;
	--blue: #36b7ed;
	--purple: #8059d6;
	--panel-border: #f6d77e;
	--shadow: 0 16px 0 rgba(107, 68, 37, 0.16), 0 24px 42px rgba(67, 40, 15, 0.18);
	--inner-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.58), inset 0 -8px 0 rgba(107, 68, 37, 0.08);
	--font-main: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	font-family: var(--font-main);
	color: var(--brown);
	background:
		linear-gradient(180deg, #27b7ef 0%, #9de8ff 48%, #88d333 49%, #63b922 78%, #7a471f 78%, #6a3b1b 100%);
}

body::before,
body::after {
	position: fixed;
	right: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
}

body::before {
	bottom: 76px;
	height: 150px;
	background:
		radial-gradient(circle at 10% 70%, #7442c8 0 10px, #442170 11px 14px, transparent 15px),
		radial-gradient(circle at 16% 64%, #ffffff 0 13px, #ffd642 14px 20px, transparent 21px),
		radial-gradient(circle at 24% 72%, #ffd642 0 13px, #ffad1e 14px 20px, transparent 21px),
		radial-gradient(circle at 88% 68%, #ffd642 0 12px, #ffad1e 13px 18px, transparent 19px),
		linear-gradient(135deg, transparent 0 46%, rgba(55, 122, 20, 0.42) 47% 55%, transparent 56%);
}

body::after {
	bottom: 0;
	height: 76px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, rgba(255, 255, 255, 0.07) 32%, transparent 52%),
		repeating-linear-gradient(0deg, rgba(57, 28, 9, 0.28) 0 2px, transparent 2px 34px),
		linear-gradient(180deg, #865025, #663817);
	box-shadow: 0 -5px 0 rgba(61, 36, 18, 0.35);
}

button,
input,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
	outline: 4px solid #1f1a7a;
	outline-offset: 4px;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10;
	padding: 10px 14px;
	border: 3px solid var(--brown);
	border-radius: 10px;
	background: #fffefa;
	color: var(--brown);
	font-weight: 900;
	transform: translateY(-160%);
}

.skip-link:focus {
	transform: translateY(0);
}

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

.scene {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.cloud {
	position: absolute;
	width: 130px;
	height: 42px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 6px 8px rgba(55, 155, 200, 0.14));
}

.cloud::before,
.cloud::after {
	position: absolute;
	bottom: 10px;
	border-radius: 50%;
	background: inherit;
	content: "";
}

.cloud::before {
	left: 16px;
	width: 58px;
	height: 58px;
}

.cloud::after {
	right: 14px;
	width: 72px;
	height: 72px;
}

.cloud--one {
	top: 18%;
	left: -20px;
}

.cloud--two {
	top: 38%;
	right: -36px;
	transform: scale(0.75);
}

.tree {
	position: absolute;
	top: -30px;
	right: -16px;
	width: min(38vw, 430px);
	height: 240px;
}

.tree__branch {
	position: absolute;
	top: 26px;
	right: 0;
	width: 330px;
	height: 68px;
	border-radius: 0 0 0 60px;
	background: linear-gradient(180deg, #8d5426, #5f3517);
	transform: rotate(20deg);
	box-shadow: inset 0 -9px 0 rgba(61, 36, 18, 0.25);
}

.tree__leaf {
	position: absolute;
	border-radius: 56% 44% 56% 44%;
	background: linear-gradient(135deg, #a9e33b, #4fa51d);
	box-shadow: inset -6px -7px 0 rgba(55, 122, 20, 0.2);
}

.tree__leaf--one {
	top: -15px;
	right: 130px;
	width: 160px;
	height: 78px;
}

.tree__leaf--two {
	top: 42px;
	right: 250px;
	width: 130px;
	height: 64px;
	transform: rotate(-18deg);
}

.tree__leaf--three {
	top: -4px;
	right: 12px;
	width: 180px;
	height: 88px;
	transform: rotate(12deg);
}

.hanging-hive {
	position: absolute;
	top: 106px;
	right: clamp(34px, 11vw, 170px);
	width: 128px;
	height: 132px;
	border-radius: 54% 54% 42% 42%;
	background:
		repeating-linear-gradient(180deg, transparent 0 21px, rgba(153, 90, 10, 0.2) 22px 26px),
		linear-gradient(180deg, #ffd962, #f0a510);
	box-shadow: inset -10px -10px 0 rgba(183, 105, 7, 0.18), 0 14px 24px rgba(61, 36, 18, 0.18);
}

.hanging-hive__ring {
	position: absolute;
	top: -12px;
	left: 34px;
	width: 60px;
	height: 28px;
	border-radius: 50%;
	background: #ffca2e;
}

.hanging-hive__hole {
	position: absolute;
	right: 26px;
	bottom: 30px;
	width: 44px;
	height: 55px;
	border-radius: 50%;
	background: #3a1e0c;
}

.bee-fly {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #ffd529;
	box-shadow: inset -8px -4px 0 #d58e04;
}

.bee-fly span {
	width: 52%;
	height: 100%;
	border-right: 11px solid #3b250d;
	border-left: 11px solid #3b250d;
}

.bee-fly::before,
.bee-fly::after {
	position: absolute;
	top: 16%;
	width: 42%;
	height: 44%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	content: "";
}

.bee-fly::before {
	left: -24%;
}

.bee-fly::after {
	right: -24%;
}

.bee-fly--large {
	top: 94px;
	left: 15%;
	width: 98px;
	height: 78px;
	transform: rotate(-18deg);
}

.bee-fly--small {
	top: 210px;
	right: 26%;
	width: 36px;
	height: 28px;
	transform: rotate(15deg);
}

.app-shell {
	position: relative;
	z-index: 1;
	width: min(1480px, calc(100% - 56px));
	margin: 0 auto;
	padding: 28px 0 98px;
}

.app-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 20px;
	align-items: start;
	min-height: 250px;
}

.honey-score,
.panel,
.bottom-nav {
	border: 4px solid rgba(255, 240, 168, 0.95);
	box-shadow: var(--shadow);
}

.menu-button {
	display: grid;
	grid-template-columns: 32px 1fr;
	grid-template-rows: repeat(3, 7px);
	align-items: center;
	column-gap: 12px;
	row-gap: 3px;
	width: 142px;
	min-height: 74px;
	padding: 12px 16px;
	border-radius: 34px;
	background: linear-gradient(180deg, #ffea63, #ffb51c);
	color: var(--brown);
	font-size: 1.35rem;
	font-weight: 900;
}

.menu-button span {
	display: block;
	grid-column: 1;
	width: 28px;
	height: 5px;
	border-radius: 999px;
	background: var(--brown);
}

.menu-button span + span {
	margin-top: 0;
}

.menu-button strong {
	grid-column: 2;
	grid-row: 1 / 4;
	margin-left: 4px;
}

.brand {
	display: flex;
	justify-content: center;
	gap: 14px;
	text-align: center;
}

.brand__bee {
	align-self: center;
	margin-top: 6px;
	font-size: clamp(4.8rem, 8vw, 7.5rem);
	filter: drop-shadow(0 8px 0 rgba(61, 36, 18, 0.18));
}

.brand h1 {
	margin: 0;
	font-size: clamp(4rem, 8vw, 7.2rem);
	line-height: 0.9;
	color: #ffd52f;
	text-shadow:
		5px 0 var(--brown),
		-5px 0 var(--brown),
		0 5px var(--brown),
		0 -5px var(--brown),
		6px 8px 0 rgba(61, 36, 18, 0.3);
}

.brand h1 span {
	color: #fffdf5;
}

.brand p {
	margin: 18px 0 0;
	font-size: clamp(1.3rem, 2.2vw, 2rem);
	font-weight: 900;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.32);
}

.honey-score {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 92px;
	padding: 12px 18px;
	border-radius: 24px;
	background: linear-gradient(180deg, #fff9d8, #ffe7a1);
}

.honey-score__icon {
	font-size: 2.5rem;
}

.honey-score span {
	display: block;
	font-size: 1.2rem;
	font-weight: 900;
}

.honey-score strong {
	font-size: 1.55rem;
}

.game-board {
	display: grid;
	grid-template-columns: minmax(260px, 400px) minmax(420px, 1fr) minmax(280px, 400px);
	gap: 20px;
	align-items: start;
	margin-top: -22px;
}

.panel {
	border-radius: 24px;
	background:
		radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.85), transparent 22%),
		linear-gradient(180deg, rgba(255, 253, 238, 0.96), rgba(255, 248, 223, 0.96));
}

.subject-panel,
.hive-panel {
	padding: 22px 18px;
}

.grade-picker {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
	padding: 14px;
	border: 2px solid #dfb860;
	border-radius: 16px;
	background: rgba(255, 240, 189, 0.78);
	box-shadow: inset 0 -5px 0 rgba(107, 68, 37, 0.08);
}

.grade-picker span {
	font-size: 0.86rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

.grade-picker select {
	width: 100%;
	min-height: 48px;
	padding: 8px 12px;
	border: 2px solid #d88908;
	border-radius: 12px;
	background: #fffefa;
	color: var(--brown);
	font: inherit;
	font-size: 1.2rem;
	font-weight: 900;
}

.subject-panel h2,
.hive-panel h2 {
	margin: 0 0 18px;
	text-align: center;
	font-size: clamp(1.6rem, 2.4vw, 2.05rem);
}

.subject-list {
	display: grid;
	gap: 16px;
}

.subject-card {
	--subject-top: #8ccf34;
	--subject-bottom: #4f9f22;
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 28px;
	gap: 12px;
	align-items: center;
	min-height: 112px;
	padding: 14px;
	border: 3px solid rgba(61, 36, 18, 0.16);
	border-radius: 16px;
	color: #fff;
	text-align: left;
	text-shadow: 0 2px 0 rgba(61, 36, 18, 0.32);
	box-shadow: var(--inner-shadow), 0 5px 0 rgba(61, 36, 18, 0.24);
	background: linear-gradient(180deg, var(--subject-top), var(--subject-bottom));
	position: relative;
}

.subject-card--kindergarten {
	--subject-top: #ffcf4a;
	--subject-bottom: #d98b12;
}

.subject-card--science {
	--subject-top: #5fcf67;
	--subject-bottom: #238b4b;
}

.subject-card--math {
	--subject-top: #40b8f0;
	--subject-bottom: #1177ba;
}

.subject-card--english {
	--subject-top: #a77ae8;
	--subject-bottom: #6940b8;
}

.subject-card--science-biology {
	--subject-top: #64c86a;
	--subject-bottom: #2d8751;
}

.subject-card--science-chemistry {
	--subject-top: #2fc6b7;
	--subject-bottom: #087f83;
}

.subject-card--science-earth-and-space-science {
	--subject-top: #6273d9;
	--subject-bottom: #304aa5;
}

.subject-card--science-environmental-science {
	--subject-top: #75bf3a;
	--subject-bottom: #3d8428;
}

.subject-card--science-physics {
	--subject-top: #29a9d8;
	--subject-bottom: #146c9e;
}

.subject-card--math-calculus-and-vectors,
.subject-card--math-functions,
.subject-card--math-functions-and-applications {
	--subject-top: #3fa6e8;
	--subject-bottom: #165fae;
}

.subject-card--math-data-management {
	--subject-top: #38c4d8;
	--subject-bottom: #087c9e;
}

.subject-card--math-foundations,
.subject-card--math-general {
	--subject-top: #58b8f0;
	--subject-bottom: #2579bc;
}

.subject-card--english-studies-in-literature,
.subject-card--english-canadian-literature {
	--subject-top: #b581dc;
	--subject-bottom: #7a3fa7;
}

.subject-card--english-media-studies {
	--subject-top: #df6fa4;
	--subject-bottom: #a73672;
}

.subject-card--english-presentation-and-speaking-skills {
	--subject-top: #d87954;
	--subject-bottom: #a2462e;
}

.subject-card--english-writer-s-craft {
	--subject-top: #c96bbd;
	--subject-bottom: #8d3f90;
}

.subject-card--english-business-and-technological-communication {
	--subject-top: #8d8bdc;
	--subject-bottom: #5050a4;
}

.subject-card--belonging-and-contributing {
	--subject-top: #ffb74d;
	--subject-bottom: #d16c1e;
}

.subject-card--self-regulation-and-well-being {
	--subject-top: #6ec6a0;
	--subject-bottom: #258567;
}

.subject-card--demonstrating-literacy-and-math-behaviours {
	--subject-top: #6faee8;
	--subject-bottom: #356fbd;
}

.subject-card--problem-solving-and-innovating {
	--subject-top: #e7a24f;
	--subject-bottom: #b76520;
}

.subject-card.is-active {
	border-color: #fff7b8;
	outline: 5px solid var(--honey);
	box-shadow: var(--inner-shadow), 0 8px 0 rgba(61, 36, 18, 0.32), 0 0 0 8px rgba(255, 195, 38, 0.26);
	transform: translateY(-2px);
}

.subject-card__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.75);
	color: var(--brown);
	font-size: 2.5rem;
	text-shadow: none;
}

.subject-card__text {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.subject-card strong {
	font-size: clamp(1.45rem, 2.1vw, 2rem);
	line-height: 1.05;
}

.subject-card small {
	width: fit-content;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	color: var(--brown);
	font-size: 0.78rem;
	font-weight: 900;
	text-shadow: none;
}

.subject-card:not(.is-active) small {
	background: rgba(61, 36, 18, 0.18);
	color: rgba(255, 255, 255, 0.9);
}

.subject-card__arrow {
	font-size: 3rem;
	line-height: 1;
}

.practice-panel {
	position: relative;
	min-height: 490px;
	padding: 58px 24px 24px;
}

.tier-ribbon {
	position: absolute;
	top: -32px;
	left: 50%;
	width: min(420px, 78%);
	padding: 14px 18px;
	border: 3px solid #f4a907;
	border-radius: 16px 16px 9px 9px;
	background: linear-gradient(180deg, #ffe25c, #ffb318);
	box-shadow: 0 7px 0 rgba(157, 88, 5, 0.22);
	font-size: clamp(1.25rem, 2vw, 1.85rem);
	font-weight: 900;
	text-align: center;
	transform: translateX(-50%) rotate(-2deg);
}

.practice-panel__inner {
	display: grid;
	justify-items: center;
}

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

.page {
	display: none;
}

.page.is-active {
	display: block;
}

.mode-tabs,
.tier-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: min(100%, 580px);
	margin-bottom: 14px;
}

.mode-tab,
.tier-tabs button {
	min-height: 44px;
	padding: 8px 16px;
	border: 2px solid #d8aa43;
	border-radius: 999px;
	background: #fff2bc;
	color: var(--brown);
	font-weight: 900;
	box-shadow: inset 0 -4px 0 rgba(107, 68, 37, 0.12);
}

.mode-tab.is-active,
.tier-tabs button.is-active {
	background: linear-gradient(180deg, #ffe25c, #ffb318);
	border-color: #f4a907;
}

.practice-kicker {
	margin: 8px 0 8px;
	font-size: 1.45rem;
	font-weight: 900;
}

.word-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
}

.word-row h2 {
	max-width: min(100%, 720px);
	margin: 0;
	overflow-wrap: anywhere;
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	line-height: 1.05;
	text-align: center;
}

.letter-game,
.missing-game {
	width: min(100%, 600px);
	margin-top: 10px;
	text-align: center;
}

.letter-game p,
.missing-game p {
	margin: 0 0 16px;
	font-size: 1.2rem;
	font-weight: 900;
}

.answer-slots,
.letter-bank {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	min-height: 70px;
	padding: 12px;
	border: 3px dashed rgba(216, 170, 67, 0.8);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.5);
}

.letter-bank {
	margin-top: 14px;
	border-style: solid;
}

.letter-tile {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 52px;
	padding: 0 12px;
	border: 2px solid #d88908;
	border-radius: 14px;
	background: linear-gradient(180deg, #fff5b9, #ffc326);
	color: var(--brown);
	font-size: 1.45rem;
	font-weight: 900;
	text-transform: uppercase;
	box-shadow: 0 5px 0 rgba(107, 68, 37, 0.22);
}

.letter-tile--space {
	min-width: 82px;
	font-size: 0.9rem;
	text-transform: none;
}

.missing-word {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 900;
}

.missing-word span {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 58px;
	padding: 0 8px;
	border-bottom: 5px solid rgba(61, 36, 18, 0.25);
}

.missing-word .missing-blank {
	color: var(--honey-dark);
	border-bottom-color: var(--honey-dark);
}

.missing-word .missing-blank.is-filled {
	color: var(--green-dark);
	background: rgba(255, 240, 168, 0.55);
	border-radius: 10px 10px 0 0;
}

.missing-word .missing-space {
	min-width: 18px;
	border-bottom: 0;
	color: rgba(61, 36, 18, 0.45);
}

.sound-button {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	flex: 0 0 auto;
	border: 3px solid #f59f00;
	border-radius: 50%;
	background: linear-gradient(180deg, #ffe25c, #ffb318);
	box-shadow: 0 6px 0 #b96f04, var(--inner-shadow);
	font-size: 2.25rem;
}

.spell-form {
	display: grid;
	gap: 24px;
	width: min(100%, 580px);
	margin-top: 26px;
}

.spell-form input {
	width: 100%;
	min-height: 80px;
	padding: 16px 20px;
	border: 3px solid #d9b860;
	border-radius: 16px;
	background: #fffefa;
	color: var(--brown);
	font-size: clamp(1.35rem, 3vw, 2rem);
	font-weight: 800;
	outline: none;
}

.spell-form input:focus {
	border-color: var(--honey-dark);
	box-shadow: 0 0 0 5px rgba(255, 195, 38, 0.28);
}

.spell-form input.is-correct {
	border-color: #3d9e22;
	background: #f1ffe8;
	box-shadow: 0 0 0 5px rgba(85, 183, 37, 0.22);
}

.spell-form input.is-incorrect {
	border-color: #c93f22;
	background: #fff0ea;
	box-shadow: 0 0 0 5px rgba(201, 63, 34, 0.24);
	animation: answer-shake 180ms ease-in-out 2;
}

.form-actions {
	display: grid;
	grid-template-columns: 1fr 1.35fr 1fr;
	gap: 14px;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 66px;
	border: 3px solid rgba(61, 36, 18, 0.14);
	border-radius: 18px;
	color: var(--brown);
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	font-weight: 900;
	box-shadow: var(--inner-shadow), 0 6px 0 rgba(61, 36, 18, 0.22);
}

.button--hint,
.button--skip {
	background: linear-gradient(180deg, #ffe778, #ffb51e);
}

.button--check {
	background: linear-gradient(180deg, #9ee24a, #55b725);
	color: #fff;
	text-shadow: 0 2px 0 rgba(61, 36, 18, 0.28);
}

.button--check span {
	font-size: 2rem;
}

.feedback-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(100%, 430px);
	min-height: 100px;
	margin-top: 24px;
	padding: 18px 22px 18px 96px;
	border: 3px solid rgba(217, 184, 96, 0.68);
	border-radius: 30px 30px 30px 10px;
	background: rgba(255, 255, 255, 0.86);
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	font-weight: 900;
}

.feedback-card__bee {
	position: absolute;
	left: -24px;
	bottom: -20px;
	font-size: 5.4rem;
	filter: drop-shadow(0 8px 0 rgba(61, 36, 18, 0.14));
	transform-origin: 50% 70%;
}

.feedback-card p {
	margin: 0;
}

.feedback-card.is-correct {
	color: #247713;
	border-color: #55b725;
	background: linear-gradient(180deg, #f4ffe9, #dcffc8);
	box-shadow: 0 0 0 6px rgba(85, 183, 37, 0.16), 0 8px 0 rgba(36, 119, 19, 0.12);
}

.feedback-card.is-correct .feedback-card__bee {
	animation: bee-figure-eight 1300ms ease-in-out 2;
}

.feedback-card.is-incorrect {
	color: #9a321d;
	border-color: #c93f22;
	background: linear-gradient(180deg, #fff5ed, #ffd8ca);
	box-shadow: 0 0 0 6px rgba(201, 63, 34, 0.18), 0 8px 0 rgba(154, 50, 29, 0.14);
	animation: feedback-pop 220ms ease-out;
}

.feedback-card.is-incorrect .feedback-card__bee {
	animation: bee-nope 360ms ease-in-out 2;
}

.feedback-card.is-correct::after,
.feedback-card.is-incorrect::after {
	position: absolute;
	top: -17px;
	right: 18px;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 900;
	text-shadow: none;
}

.feedback-card.is-correct::after {
	background: #3d9e22;
	content: "Correct";
}

.feedback-card.is-incorrect::after {
	background: #c93f22;
	content: "Try again";
}

@keyframes answer-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	33% {
		transform: translateX(-6px);
	}

	66% {
		transform: translateX(6px);
	}
}

@keyframes feedback-pop {
	0% {
		transform: scale(0.98);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes bee-figure-eight {
	0%,
	100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	12.5% {
		transform: translate(18px, -18px) rotate(12deg) scale(1.04);
	}

	25% {
		transform: translate(38px, 0) rotate(0deg) scale(1.06);
	}

	37.5% {
		transform: translate(18px, 18px) rotate(-12deg) scale(1.04);
	}

	50% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	62.5% {
		transform: translate(-18px, -18px) rotate(-12deg) scale(1.04);
	}

	75% {
		transform: translate(-38px, 0) rotate(0deg) scale(1.06);
	}

	87.5% {
		transform: translate(-18px, 18px) rotate(12deg) scale(1.04);
	}
}

@keyframes bee-nope {
	0%,
	100% {
		transform: translateX(0) rotate(0deg);
	}

	20% {
		transform: translateX(-13px) rotate(-9deg);
	}

	40% {
		transform: translateX(13px) rotate(9deg);
	}

	60% {
		transform: translateX(-9px) rotate(-6deg);
	}

	80% {
		transform: translateX(9px) rotate(6deg);
	}
}

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

.honeycomb {
	--cell-size: clamp(44px, 5.4vw, 58px);
	position: relative;
	width: min(100%, calc(var(--cell-size) * 4.12));
	height: calc(var(--hive-height, 4.78) * var(--cell-size));
	margin: 0 auto 26px;
	padding: 8px 0 4px;
}

.cell {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--cell-size);
	height: calc(var(--cell-size) * 1.08);
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
	background: rgba(255, 251, 226, 0.75);
	box-shadow: inset 0 0 0 4px #cba34a;
	transform: translate(calc(var(--hive-x, 0) * var(--cell-size)), calc(var(--hive-y, 0) * var(--cell-size)));
}

.cell--filled {
	background:
		radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.86) 0 8px, transparent 9px),
		linear-gradient(135deg, #ffd632, #ffaf05);
	box-shadow: inset 0 0 0 4px #ffb100, inset -7px -7px 0 rgba(177, 105, 4, 0.16);
}

.tier-progress {
	padding: 18px 0 14px;
	border-top: 2px solid rgba(217, 184, 96, 0.55);
	border-bottom: 2px solid rgba(217, 184, 96, 0.55);
}

.tier-progress div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 1.12rem;
}

progress {
	width: 100%;
	height: 28px;
	overflow: hidden;
	border: 2px solid #d4ad56;
	border-radius: 999px;
	background: #fff1bf;
}

progress::-webkit-progress-bar {
	background: #fff1bf;
}

progress::-webkit-progress-value {
	border-radius: 999px;
	background: linear-gradient(90deg, #ffd833, #ffb30e);
}

progress::-moz-progress-bar {
	border-radius: 999px;
	background: linear-gradient(90deg, #ffd833, #ffb30e);
}

.missed-button {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 18px;
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 74px;
	margin-top: 18px;
	padding: 14px;
	border: 2px solid #dfb860;
	border-radius: 14px;
	background: #fff0bd;
	color: var(--brown);
	font-size: 1rem;
	font-weight: 900;
	text-align: left;
}

.missed-button span {
	font-size: 1.8rem;
}

.missed-button b {
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--honey);
}

.page-panel {
	width: min(980px, 100%);
	margin: -18px auto 0;
	padding: clamp(20px, 4vw, 34px);
}

.page-panel h2 {
	margin: 0 0 22px;
	text-align: center;
	font-size: clamp(2rem, 4vw, 3.2rem);
}

.page-panel h3 {
	margin: 26px 0 12px;
	font-size: 1.45rem;
}

.dashboard-grid,
.achievement-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.stat-card,
.achievement-card {
	padding: 18px;
	border: 2px solid #dfb860;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 -5px 0 rgba(107, 68, 37, 0.08);
}

.stat-card span,
.achievement-card small {
	display: block;
	color: var(--brown-soft);
	font-weight: 900;
}

.stat-card strong {
	display: block;
	margin-top: 8px;
	font-size: 2.5rem;
}

.review-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 66px;
	padding: 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.46);
}

.review-list p {
	margin: 0;
	font-weight: 900;
}

.review-pill {
	padding: 10px 14px;
	border: 2px solid #d88908;
	border-radius: 999px;
	background: #fff0bd;
	color: var(--brown);
	font-weight: 900;
}

.achievement-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.achievement-card {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
	opacity: 0.58;
}

.achievement-card span {
	font-size: 2.6rem;
}

.achievement-card.is-earned {
	background: linear-gradient(180deg, #fff8df, #ffe28a);
	opacity: 1;
}

.settings-copy {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 900;
	text-align: center;
}

.app-footer {
	margin: 28px auto 0;
	padding: 14px 18px;
	border: 2px solid rgba(255, 240, 168, 0.68);
	border-radius: 16px;
	background: rgba(255, 248, 223, 0.82);
	color: var(--brown);
	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1.45;
	text-align: center;
	box-shadow: 0 8px 0 rgba(107, 68, 37, 0.12);
}

.app-footer p {
	margin: 0;
}

.app-footer a {
	color: #5c2db4;
	font-weight: 900;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.bottom-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: center;
	height: 76px;
	padding: 8px min(7vw, 120px);
	border-width: 0;
	border-radius: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 20%, rgba(255, 255, 255, 0.07) 36%, transparent 60%),
		linear-gradient(180deg, #855025, #683917);
	box-shadow: 0 -5px 0 rgba(61, 36, 18, 0.35);
}

.bottom-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #fff8df;
	font-size: clamp(0.95rem, 1.8vw, 1.35rem);
	font-weight: 900;
	text-decoration: none;
	text-shadow: 0 2px 0 rgba(61, 36, 18, 0.75);
}

.bottom-nav button.is-active {
	color: #ffdf34;
}

.bottom-nav span {
	font-size: 2rem;
}

@media (max-width: 1180px) {
	.app-header {
		grid-template-columns: 1fr 220px;
		min-height: 230px;
	}

	.honey-score {
		justify-self: end;
	}

	.game-board {
		grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
	}

	.hive-panel {
		grid-column: 1 / -1;
	}

	.honeycomb {
		--cell-size: clamp(42px, 5vw, 56px);
	}
}

@media (max-width: 840px) {
	body {
		background:
			linear-gradient(180deg, #27b7ef 0%, #9de8ff 34%, #88d333 35%, #63b922 83%, #7a471f 83%, #6a3b1b 100%);
	}

	.tree,
	.hanging-hive,
	.bee-fly--small {
		display: none;
	}

	.app-shell {
		width: min(100% - 24px, 680px);
		padding-top: 18px;
	}

	.app-header,
	.game-board {
		grid-template-columns: 1fr;
	}

	.app-header {
		gap: 16px;
		min-height: 0;
	}

	.brand {
		order: -1;
	}

	.brand__bee {
		display: none;
	}

	.brand p {
		margin-top: 12px;
	}

	.honey-score {
		grid-column: auto;
		justify-self: stretch;
		margin-top: 0;
		min-height: 74px;
	}

	.game-board {
		margin-top: 16px;
	}

	.practice-panel {
		min-height: 0;
	}

	.hive-panel {
		grid-column: auto;
	}

	.honeycomb {
		--cell-size: clamp(40px, 12vw, 56px);
	}

	.dashboard-grid,
	.achievement-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.app-shell {
		width: min(100% - 16px, 520px);
		padding-bottom: 92px;
	}

	.brand h1 {
		font-size: 3.35rem;
		text-shadow:
			3px 0 var(--brown),
			-3px 0 var(--brown),
			0 3px var(--brown),
			0 -3px var(--brown),
			4px 5px 0 rgba(61, 36, 18, 0.28);
	}

	.brand p {
		font-size: 1.05rem;
	}

	.subject-card {
		grid-template-columns: 58px minmax(0, 1fr) 22px;
		min-height: 86px;
		padding: 10px;
	}

	.subject-card__icon {
		width: 54px;
		height: 54px;
		font-size: 2rem;
	}

	.subject-card strong {
		font-size: 1.32rem;
	}

	.practice-panel {
		padding: 48px 14px 18px;
	}

	.tier-ribbon {
		top: -24px;
		width: 86%;
		font-size: 1.05rem;
	}

	.word-row {
		flex-direction: column;
		gap: 12px;
	}

	.sound-button {
		width: 66px;
		height: 66px;
		font-size: 1.8rem;
	}

	.form-actions {
		grid-template-columns: 1fr;
	}

	.feedback-card {
		padding-left: 20px;
		border-radius: 22px;
	}

	.feedback-card__bee {
		display: none;
	}

	.bottom-nav {
		gap: 4px;
		padding: 6px 4px;
	}

	.bottom-nav button {
		flex-direction: column;
		gap: 2px;
		font-size: 0.76rem;
	}

	.bottom-nav span {
		font-size: 1.45rem;
	}
}