/* C016 — restore C011's chunky arcade personality without changing game layout or routes. */
:root {
	--ink: #101725;
	--cyan: #12f4ff;
	--green: #35f49a;
	--yellow: #ffd928;
	--orange: #ff8a20;
	--purple: #9b7cff;
	--pink: #ff58b7;
	--arcade-font: "Arial Black", "Trebuchet MS", Arial, sans-serif;
}

body { font-family: "Trebuchet MS", Arial, sans-serif; }

button { font-family: var(--arcade-font); }

/* Shared physical arcade button: bright face, black edge, hard lower lip. */
.menuButton,
.backButton,
.confirmButton {
	min-height: 52px;
	color: var(--ink);
	font-family: var(--arcade-font);
	font-weight: 900;
	letter-spacing: .15px;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	border: 3px solid #0b1018;
	border-radius: 14px;
	box-shadow: 0 5px 0 #0b1018, 0 10px 18px rgba(0,0,0,.28), 0 0 0 3px rgba(18,244,255,.15);
	transition: transform .1s ease, filter .1s ease, box-shadow .1s ease;
}
.menuButton:hover,
.backButton:hover,
.confirmButton:hover {
	filter: saturate(1.12) brightness(1.05);
	transform: translateY(-2px) scale(1.015);
	box-shadow: 0 7px 0 #0b1018, 0 13px 22px rgba(0,0,0,.3), 0 0 0 4px rgba(18,244,255,.3);
}
.menuButton:active,
.backButton:active,
.confirmButton:active {
	filter: brightness(.98);
	transform: translateY(4px) scale(.99);
	box-shadow: 0 1px 0 #0b1018, 0 4px 8px rgba(0,0,0,.24), 0 0 0 3px rgba(18,244,255,.18);
}
.menuButton::after,
.backButton::after,
.confirmButton::after {
	height: 38%;
	background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}
.btn-orange { background: linear-gradient(180deg, #ffb72f 0%, #ff8b1f 58%, #ff6518 100%); }
.btn-purple { background: linear-gradient(180deg, #c9a4ff 0%, #987bff 58%, #7567f3 100%); }
.btn-yellow { background: linear-gradient(180deg, #fff070 0%, #ffd728 58%, #ffb816 100%); }
.btn-green  { background: linear-gradient(180deg, #82ffc0 0%, #35e98f 58%, #12c975 100%); }
.btn-blue   { background: linear-gradient(180deg, #90efff 0%, #48b9ff 58%, #6575ef 100%); }
.btn-red    { background: linear-gradient(180deg, #ff9b9b 0%, #ff596d 58%, #ed3158 100%); }

/* Loading: title in the sky, not in a sterile white card. */
#loadingScreen {
	background: linear-gradient(180deg, #e8f8ff 0%, #9cdcf2 55%, #76c5e5 100%);
}
#loadingScreen .loadingUI { width: 92%; }
#loadingScreen .title {
	font-family: var(--arcade-font);
	font-size: clamp(45px, 12vw, 67px);
	font-style: italic;
	letter-spacing: -2px;
	color: var(--cyan);
	-webkit-text-stroke: 3px #101725;
	text-shadow: 0 5px 0 #101725, 0 10px 15px rgba(0,0,0,.35), 0 0 18px rgba(18,244,255,.9);
	animation: c016TitleFloat 2.2s ease-in-out infinite;
}
#loadingSubtitle {
	padding: 6px 12px;
	color: #111827;
	font-family: var(--arcade-font);
	font-size: 13px;
	background: rgba(255,255,255,.74);
	border: 2px solid #111827;
	border-radius: 999px;
	box-shadow: 0 3px 0 #111827;
}
.progressWrap {
	width: min(420px, 88%);
	height: 16px;
	border: 3px solid #0b1018;
	border-radius: 999px;
	box-shadow: 0 4px 0 #0b1018, 0 0 15px rgba(18,244,255,.65);
}
.progressBar { background: linear-gradient(90deg, #ff6a24, #ffd927 42%, #35f49a 72%, #12f4ff); }

/* Main menu: C011's big title and saturated full-face controls. */
#mainMenu {
	justify-content: flex-start;
	padding: 54px 24px 24px;
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(18,244,255,.03));
}
#titleImage {
	width: min(440px, 98%);
	max-width: 98%;
	margin: 8px auto 23px;
	filter: drop-shadow(0 4px 0 #111827) drop-shadow(0 9px 8px rgba(0,0,0,.44)) drop-shadow(0 0 7px #12f4ff);
	animation: c016TitleFloat 2.8s ease-in-out infinite;
}
#mainMenu > div:has(#sfxToggle) { margin: 0 0 12px !important; }
#sfxToggle {
	min-height: 39px;
	padding: 7px 15px !important;
	font-size: 13px;
	border-radius: 999px;
	box-shadow: 0 4px 0 #0b1018, 0 7px 12px rgba(0,0,0,.25), 0 0 13px rgba(53,244,154,.7);
}
#mainMenu > .menuButton {
	width: min(292px, 84%);
	min-height: 58px;
	margin: 7px 0;
	padding: 12px 14px;
	font-size: 18px;
	text-transform: uppercase;
	animation: c016ButtonGlow 3.1s ease-in-out infinite;
}
#mainMenu > .menuButton:nth-of-type(2) { animation-delay: -.6s; }
#mainMenu > .menuButton:nth-of-type(3) { animation-delay: -1.2s; }
#mainMenu > .menuButton:nth-of-type(4) { animation-delay: -1.8s; }
#versionNumber {
	top: auto;
	left: 12px;
	bottom: 10px;
	color: rgba(11,16,24,.62);
	font: 700 10px/1 "Trebuchet MS", Arial, sans-serif;
	text-shadow: 0 1px rgba(255,255,255,.7);
}

@keyframes c016TitleFloat {
	0%, 100% { transform: translateY(0) rotate(-.35deg) scale(1); }
	50% { transform: translateY(-6px) rotate(.35deg) scale(1.015); }
}
@keyframes c016ButtonGlow {
	0%, 100% { filter: saturate(1); }
	50% { filter: saturate(1.13) brightness(1.04); }
}

/* Instructions: playful bands, still scannable. */
#instructionsScreen {
	background: linear-gradient(180deg, rgba(234,249,255,.97), rgba(135,216,242,.97));
	animation: none;
	padding: 28px 20px 22px;
}
#instructionsScreen h2,
#levelSelectScreen h2,
#gameOverScreen h2,
#leaderboardScreen .lb-header h2,
#submitScoreOverlay h2 {
	font-family: var(--arcade-font);
	font-style: italic;
	letter-spacing: -.5px;
}
#instructionsScreen h2,
#levelSelectScreen h2 {
	font-size: 39px;
	color: var(--cyan);
	-webkit-text-stroke: 2px #111827;
	text-shadow: 0 4px 0 #111827, 0 0 14px rgba(18,244,255,.7);
}
#instructionsScreen .bullets {
	width: 94%;
	display: grid;
	gap: 7px;
	line-height: 1.25;
	list-style: none;
	counter-reset: howto;
}
#instructionsScreen .bullets li {
	counter-increment: howto;
	position: relative;
	margin: 0;
	padding: 9px 10px 9px 42px;
	background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,250,255,.9));
	border: 2px solid #111827;
	border-radius: 12px;
	box-shadow: 0 3px 0 #111827;
	font-size: 13px;
	text-align: left;
}
#instructionsScreen .bullets li::before {
	content: counter(howto);
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 25px;
	height: 25px;
	display: grid;
	place-items: center;
	background: var(--yellow);
	border: 2px solid #111827;
	border-radius: 50%;
	font: 900 12px/1 var(--arcade-font);
}
#instructionsScreen .bullets li:nth-child(4n+2)::before { background: var(--purple); }
#instructionsScreen .bullets li:nth-child(4n+3)::before { background: var(--green); }
#instructionsScreen .bullets li:nth-child(4n+4)::before { background: var(--orange); }
#backFromInstructions { margin-top: 16px; background: linear-gradient(180deg,#fff,#d9f7ff); }

/* Level Select: altitude palette climbs from daylight into neon night. */
#levelSelectScreen {
	background: linear-gradient(180deg, rgba(231,248,255,.98), rgba(101,178,224,.98));
	padding-top: 24px;
}
#levelSelectHeaderNote {
	padding: 6px 11px;
	background: rgba(255,255,255,.72);
	border: 2px solid #111827;
	border-radius: 999px;
	font-weight: 800;
}
.levelsWrap { gap: 12px; }
.levelButton {
	min-height: 54px;
	padding: 10px 6px;
	color: #111827;
	font: 900 15px/1 var(--arcade-font);
	background: linear-gradient(180deg, #f7fdff, #8edcff);
	border: 3px solid #111827;
	border-radius: 13px;
	box-shadow: 0 5px 0 #111827, 0 9px 14px rgba(0,0,0,.23);
	transition: transform .1s ease, filter .1s ease;
}
.levelButton:hover { filter: brightness(1.08) saturate(1.15); transform: translateY(-2px); }
.levelButton:active { transform: translateY(4px); box-shadow: 0 1px 0 #111827; }
.levelButton[data-level="4"], .levelButton[data-level="5"] { background: linear-gradient(180deg,#ffe9a2,#ffad6b); }
.levelButton[data-level="6"], .levelButton[data-level="7"] { background: linear-gradient(180deg,#d5dcec,#8493b0); }
.levelButton[data-level="8"] { background: linear-gradient(180deg,#ffd37d,#ff8197); }
.levelButton[data-level="9"] { color:#fff; text-shadow:0 2px #351953; background:linear-gradient(180deg,#ff79ae,#8e5cc9); }
.levelButton[data-level="10"] { color:#fff; text-shadow:0 2px #111827; background:linear-gradient(180deg,#35eaff,#6559de 58%,#ff4aac); }
.levelButton[data-level="11"] { color:#fff; text-shadow:0 0 8px #12f4ff; background:linear-gradient(180deg,#263c68,#101b3d 60%,#040713); box-shadow:0 5px 0 #111827,0 0 16px #12f4ff; }
#completedSceneButton { color:#111827; background:linear-gradient(100deg,#ff6f91,#ffe45b,#4de6a8,#45c5ff,#b77aff); box-shadow:0 5px 0 #111827,0 0 17px rgba(255,88,183,.75); }
.stickyFooter { background:linear-gradient(180deg,rgba(131,206,239,.25),rgba(231,248,255,.98) 32%); }
#backFromLevelSelect { background:linear-gradient(180deg,#fff,#d9f7ff); }

/* Interrupt cards: compact C003 structure, arcade attitude. */
.interstitialOverlay { backdrop-filter: blur(3px) saturate(.8); }
.interstitialCard {
	position: relative;
	border: 4px solid #0b1018;
	border-radius: 22px;
	box-shadow: 0 9px 0 #0b1018, 0 22px 38px rgba(0,0,0,.46), inset 0 0 0 3px rgba(255,255,255,.62), 0 0 21px var(--card-glow, rgba(255,255,255,.35));
}
.interstitialCard::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	top: 11px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}
.interstitialCard h2 {
	font-family: var(--arcade-font);
	font-size: clamp(32px, 8vw, 44px);
	font-style: italic;
	letter-spacing: -1px;
	color: var(--card-title, #111827);
	-webkit-text-stroke: 1px #0b1018;
	text-shadow: 0 3px 0 rgba(255,255,255,.74), 0 6px 0 rgba(11,16,24,.18);
}
.interstitialIcon {
	min-width: 61px;
	min-height: 44px;
	display: grid;
	place-items: center;
	padding: 5px 10px;
	background: rgba(255,255,255,.78);
	border: 3px solid #0b1018;
	border-radius: 999px;
	box-shadow: 0 4px 0 #0b1018;
}
.interstitialEyebrow {
	padding: 5px 10px;
	color: #fff;
	background: #111827;
	border-radius: 999px;
	opacity: 1;
	box-shadow: 0 0 10px var(--card-glow, transparent);
}
.interstitialRules p {
	background: rgba(255,255,255,.74);
	border: 2px solid #0b1018;
	box-shadow: 0 3px 0 rgba(11,16,24,.9);
}
.interstitialRules strong { font-family: var(--arcade-font); }
.interstitialCard .menuButton { min-height: 51px; }
.interstitial-success { --card-glow:rgba(53,244,154,.85); --card-title:#087245; background:rgba(5,74,45,.63); }
.interstitial-success .interstitialCard { background:linear-gradient(180deg,#abffd1,#42e793); }
.interstitial-gold { --card-glow:rgba(255,217,40,.9); --card-title:#9c3d00; background:rgba(112,57,0,.62); }
.interstitial-gold .interstitialCard { background:linear-gradient(180deg,#fff58f,#ffb62e 72%,#ff8124); }
.interstitial-danger { --card-glow:rgba(255,65,100,.9); --card-title:#9d1635; background:rgba(93,9,30,.68); }
.interstitial-danger .interstitialCard { background:linear-gradient(180deg,#ffc1cb,#ff617c); }
.interstitial-storm { --card-glow:rgba(18,244,255,.85); --card-title:#14377c; background:rgba(5,11,38,.78); }
.interstitial-storm .interstitialCard { background:linear-gradient(160deg,#b7f5ff,#6886e7 62%,#b75bdb); }
.interstitial-boss { --card-glow:rgba(255,83,58,.9); --card-title:#8c1535; background:rgba(40,3,17,.78); }
.interstitial-boss .interstitialCard { background:linear-gradient(160deg,#ffe36a,#ff784f 58%,#d53b76); }

/* Pause, game over, confirmations and score panels stay in the same arcade world. */
#pauseOverlay,
#confirmOverlay { background:rgba(4,7,19,.84); }
#pauseOverlay > span:first-child {
	font-family:var(--arcade-font);
	font-style:italic;
	color:var(--cyan);
	-webkit-text-stroke:2px #111827;
	text-shadow:0 4px 0 #111827,0 0 18px var(--cyan);
}
#pauseOverlay .menuButton,
#confirmOverlay .confirmButton { background:linear-gradient(180deg,#fff,#b7eaff); }
#gameOverScreen { background:radial-gradient(circle at 50% 25%,#4a1831,#140812 72%); }
#gameOverScreen h2 { color:#ff5f72; -webkit-text-stroke:2px #111827; text-shadow:0 4px 0 #111827,0 0 18px #ff3f71; }
#gameOverScreen .menuButton { background:linear-gradient(180deg,#ffdf76,#ff8a43); }
#submitScoreOverlay { background:rgba(4,7,19,.82) !important; }
#submitScoreOverlay .submit-panel { background:linear-gradient(180deg,#eafaff,#9ae4f8); border:4px solid #111827; box-shadow:0 8px 0 #111827,0 0 22px var(--cyan); }

/* Leaderboard: bright arcade scoreboard, not a white admin table. */
#leaderboardScreen { background:linear-gradient(180deg,rgba(8,17,45,.97),rgba(37,19,67,.97)) !important; }
#leaderboardScreen .lb-wrap {
	background:linear-gradient(180deg,#fff2a8,#ffc56d 58%,#ff8f8f) !important;
	border:4px solid #0b1018;
	box-shadow:0 8px 0 #0b1018,0 0 26px rgba(255,217,40,.75) !important;
}
#leaderboardScreen .lb-header h2 {
	padding-right:0;
	font-size:36px;
	color:#12f4ff;
	-webkit-text-stroke:2px #111827;
	text-shadow:0 4px 0 #111827,0 0 14px #12f4ff;
}
#leaderboardScreen .lb-modes { gap:8px; }
#leaderboardScreen .lb-modes .menuButton {
	width:auto;
	min-width:0;
	min-height:48px;
	margin:4px 0;
	padding:8px 10px;
	font-size:12px;
	background:linear-gradient(180deg,#fff,#8ddcff);
}
#leaderboardScreen .lb-table-scroll { border:3px solid #111827; border-radius:11px; background:rgba(255,255,255,.55); }
#leaderboardTable th,
#leaderboardTable td { font-family:"Trebuchet MS",Arial,sans-serif; font-size:14px; }
#leaderboardBackBtn { background:linear-gradient(180deg,#82ffc0,#35e98f); }

/* Final party controls remain nighttime neon. */
#partyMenuButton { background:linear-gradient(180deg,#fff,#73f7ff); box-shadow:0 4px 0 #000,0 0 18px var(--cyan); }
#partyMenuPanel { border:3px solid var(--yellow); box-shadow:0 0 0 3px #fff inset,0 0 20px var(--cyan),0 0 35px var(--pink),0 18px 36px rgba(0,0,0,.45); }
#partyMenuPanel h2 { font-family:var(--arcade-font); font-style:italic; }
#partyMenuPanel .menuButton:nth-of-type(1) { background:linear-gradient(180deg,#82ffc0,#35e98f); }
#partyMenuPanel .menuButton:nth-of-type(2) { background:linear-gradient(180deg,#fff070,#ffd728); }
#partyMenuPanel .menuButton:nth-of-type(3) { background:linear-gradient(180deg,#c9a4ff,#987bff); }
#partyMenuPanel .menuButton:nth-of-type(4) { background:linear-gradient(180deg,#90efff,#48b9ff); }

@media (max-height: 700px) {
	#mainMenu { padding-top: 30px; }
	#titleImage { width:min(390px,90%); margin-bottom:12px; }
	#mainMenu > .menuButton { min-height:52px; margin:5px 0; }
}

@media (prefers-reduced-motion: reduce) {
	#titleImage,
	#loadingScreen .title,
	#mainMenu > .menuButton { animation:none !important; }
}

/* C017 — these four screens are now places in the Sky High world, not decorated forms. */

/* Loading: original title art surrounded by a rising flock of red balloons. */
#loadingScreen {
	padding: 20px;
	background: transparent;
}
#loadingScreen .loadingUI {
	width: min(420px, 91%);
	padding: 22px 22px 20px;
	background: rgba(232,248,255,.82);
	border: 4px solid #0b1018;
	border-radius: 26px 18px 28px 20px;
	box-shadow: 0 8px 0 #0b1018, inset 0 0 0 3px rgba(255,255,255,.85), 0 18px 38px rgba(0,0,0,.3), 0 0 26px rgba(18,244,255,.62);
	transform: rotate(-.55deg);
}
.loadingKicker {
	margin-bottom: 7px;
	padding: 5px 12px;
	color: #fff;
	font: 900 11px/1 var(--arcade-font);
	letter-spacing: 1.7px;
	background: #101725;
	border-radius: 999px;
	box-shadow: 0 0 12px rgba(18,244,255,.72);
}
#loadingTitleImage {
	display: block;
	width: min(390px, 100%);
	height: auto;
	margin: 2px auto 14px;
	filter: drop-shadow(0 4px 0 #101725) drop-shadow(0 9px 7px rgba(0,0,0,.35)) drop-shadow(0 0 7px #12f4ff);
	animation: c017LoadingTitle 2.1s ease-in-out infinite;
}
@keyframes c017LoadingTitle {
	0%,100% { transform: translateY(0) rotate(-.4deg); }
	50% { transform: translateY(-5px) rotate(.4deg); }
}
#loadingSubtitle {
	margin: 0 0 13px;
	padding: 6px 13px;
	color: #101725;
	font: 900 12px/1 var(--arcade-font);
	background: #fff;
	border: 2px solid #101725;
	border-radius: 999px;
	box-shadow: 0 3px 0 #101725;
}
#loadingScreen .progressWrap {
	width: min(340px, 86%);
	height: 14px;
	overflow: visible;
	background: rgba(255,255,255,.9);
	border: 3px solid #101725;
	box-shadow: 0 4px 0 #101725, 0 0 15px rgba(18,244,255,.55);
}
#loadingScreen .progressBar {
	position: relative;
	min-width: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg,#ff6a24,#ffd927 38%,#35f49a 68%,#12f4ff);
}
#loadingScreen .progressBar::after {
	content: "";
	position: absolute;
	right: -12px;
	top: -16px;
	width: 20px;
	height: 29px;
	background: url('../assets/images/player/balloon.png') center/contain no-repeat;
	filter: drop-shadow(0 2px 1px rgba(0,0,0,.45));
}
.loadingHint {
	margin-top: 14px;
	color: rgba(16,23,37,.7);
	font: 800 11px/1 var(--arcade-font);
	letter-spacing: .35px;
}

/* Main attract screen: familiar title/buttons, now staged rather than stacked. */
#mainMenu {
	justify-content: flex-start;
	padding: 42px 24px 24px;
}
#titleImage {
	width: min(430px, 98%);
	margin: 4px auto 7px;
}
.menuTagline {
	margin: 0 auto 3px;
	padding: 5px 12px;
	color: #fff;
	font: 900 11px/1 var(--arcade-font);
	letter-spacing: 1.15px;
	background: #101725;
	border: 2px solid #fff;
	border-radius: 999px;
	box-shadow: 0 3px 0 #101725, 0 0 14px rgba(18,244,255,.72);
}
#mainMenu > div:has(#sfxToggle) {
	margin: 8px 0 7px !important;
}
#sfxToggle {
	min-height: 34px;
	padding: 6px 13px !important;
}
#mainMenu > .menuButton {
	--shift: 0px;
	--tilt: 0deg;
	width: min(305px, 86%);
	min-height: 60px;
	margin: 7px 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 13px;
	padding: 9px 20px 9px 17px;
	font-size: 18px;
	transform: translateX(var(--shift)) rotate(var(--tilt));
}
#mainMenu > .menuButton:hover {
	transform: translateX(var(--shift)) translateY(-2px) rotate(var(--tilt)) scale(1.015);
}
#mainMenu > .menuButton:active {
	transform: translateX(var(--shift)) translateY(4px) rotate(var(--tilt)) scale(.99);
}
#startGameButton { --shift: -14px; --tilt: -.7deg; }
#instructionsButton { --shift: 13px; --tilt: .55deg; }
#levelSelectButton { --shift: -8px; --tilt: -.35deg; }
#leaderboardButton { --shift: 10px; --tilt: .65deg; }
#mainMenu > .menuButton img {
	width: 34px;
	height: 38px;
	object-fit: contain;
	filter: drop-shadow(0 2px 1px rgba(0,0,0,.35));
}
#instructionsButton img { width: 42px; height: 31px; }
#levelSelectButton img { width: 40px; height: 34px; }
.scoreStar {
	width: 34px;
	display: inline-grid;
	place-items: center;
	color: #ff8a20;
	font-size: 31px;
	line-height: 1;
	-webkit-text-stroke: 2px #101725;
	filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.menuCallout {
	position: absolute;
	left: 50%;
	bottom: 31px;
	transform: translateX(-50%) rotate(-1deg);
	padding: 7px 13px;
	white-space: nowrap;
	color: #101725;
	font: 900 11px/1 var(--arcade-font);
	letter-spacing: .8px;
	background: rgba(255,255,255,.8);
	border: 2px solid #101725;
	box-shadow: 0 3px 0 #101725;
}

/* Instructions: four visual lessons instead of eight documentation rows. */
#instructionsScreen {
	justify-content: flex-start;
	overflow: hidden;
	padding: 25px 20px 17px;
	background: linear-gradient(180deg,rgba(225,247,255,.91),rgba(113,201,234,.88));
}
.guideKicker {
	padding: 5px 12px;
	color: #fff;
	font: 900 10px/1 var(--arcade-font);
	letter-spacing: 1.45px;
	background: #101725;
	border-radius: 999px;
	box-shadow: 0 0 14px rgba(18,244,255,.7);
}
#instructionsScreen h2 {
	margin: 8px 0 12px;
	font-size: 34px;
	line-height: 1;
}
.flightGuide {
	width: min(430px, 100%);
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 11px;
}
.flightLesson {
	position: relative;
	min-height: 218px;
	padding: 11px 12px 12px;
	overflow: hidden;
	color: #101725;
	background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(226,246,255,.97));
	border: 3px solid #101725;
	border-radius: 19px 13px 20px 14px;
	box-shadow: 0 6px 0 #101725, inset 0 0 0 2px rgba(255,255,255,.9), 0 11px 19px rgba(0,0,0,.2);
	text-align: left;
}
.flightLesson:nth-child(2),
.flightLesson:nth-child(3) { border-radius: 13px 20px 14px 19px; }
.lessonArt {
	position: relative;
	height: 72px;
	display: grid;
	place-items: center;
	margin-bottom: 5px;
	border-radius: 12px;
	background: linear-gradient(180deg,#e9f7ff,#8ed8f0);
	border: 2px solid rgba(16,23,37,.65);
	overflow: hidden;
}
.lessonArt img { position: relative; z-index: 2; width: 36px; max-height: 60px; object-fit: contain; }
.lessonArt .guideKite { width: 74px; max-height: 54px; transform: rotate(-8deg); }
.flightLesson h3 {
	margin: 0 0 5px;
	color: #101725;
	font: 900 20px/1 var(--arcade-font);
	letter-spacing: 0;
	text-transform: uppercase;
	text-shadow: 0 2px 0 #fff;
}
.flightLesson p { font-size: 12.5px; line-height: 1.26; }
.lessonSteer { background: linear-gradient(180deg,#d6fbff,#78daf2); }
.lessonCollect { background: linear-gradient(180deg,#fff4a7,#ffbb49); }
.lessonFire { background: linear-gradient(180deg,#e6d8ff,#a98cff); }
.lessonSurvive { background: linear-gradient(180deg,#dce3f0,#8998b4); }
.moveTrail {
	position: absolute;
	width: 112px;
	height: 42px;
	border: 3px dashed rgba(16,23,37,.46);
	border-color: rgba(16,23,37,.46) transparent transparent transparent;
	border-radius: 50%;
	transform: rotate(-12deg);
}
.pickupsArt { grid-template-columns: 1fr 1fr; padding: 0 34px; }
.guideCoin {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: #854400;
	font: 900 12px/1 var(--arcade-font);
	background: radial-gradient(circle at 35% 30%,#fff59c,#ffd329 52%,#f29100);
	border: 3px solid #9b5900;
	border-radius: 50%;
	box-shadow: 0 3px 0 #6f3c00;
}
.guideHeart {
	color: #ff3453;
	font-size: 57px;
	line-height: 1;
	-webkit-text-stroke: 2px #8b0d28;
	filter: drop-shadow(0 3px 0 #8b0d28);
}
.guideShot {
	position: absolute;
	right: 34px;
	top: 31px;
	width: 22px;
	height: 6px;
	background: #ffec3d;
	border: 2px solid #101725;
	border-radius: 999px;
	box-shadow: 22px 0 0 -2px rgba(255,92,52,.62);
}
.stormLines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(102deg,transparent 0 14px,rgba(60,91,151,.31) 15px 18px,transparent 19px 29px);
}
#instructionsScreen #backFromInstructions {
	min-height: 52px;
	margin-top: 14px;
	background: linear-gradient(180deg,#fff,#9deaff);
}

/* Level Select: the same fast access, now arranged as the game's climb. */
#levelSelectScreen {
	padding: 16px 18px 12px;
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 13%,rgba(255,255,255,.9) 0 1px,transparent 2px),
		radial-gradient(circle at 77% 18%,rgba(255,255,255,.8) 0 1.2px,transparent 2px),
		linear-gradient(180deg,rgba(4,7,19,.96) 0%,rgba(31,42,86,.94) 24%,rgba(220,103,127,.92) 51%,rgba(255,190,99,.91) 67%,rgba(130,210,239,.92) 100%);
	background-size: 41px 37px,59px 53px,auto;
}
#levelSelectScreen h2 {
	margin: 0 0 4px;
	font-size: 34px;
	line-height: 1;
	color: #12f4ff;
}
#levelSelectHeaderNote {
	margin: 0 0 5px;
	padding: 5px 11px;
	color: #101725;
	font: 800 11px/1 var(--arcade-font);
	background: rgba(255,255,255,.86);
	border: 2px solid #101725;
	box-shadow: 0 3px 0 #101725;
}
#levelSelectScreen .flightPath {
	position: relative;
	flex: 1 1 auto;
	width: min(420px, 100%);
	height: auto;
	min-height: 0;
	margin: 2px auto 5px;
	display: block;
}
.flightPathLine {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.flightPathLine path {
	fill: none;
	stroke: rgba(255,255,255,.78);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 4 14;
	filter: drop-shadow(0 3px 0 rgba(16,23,37,.72)) drop-shadow(0 0 7px rgba(18,244,255,.6));
}
#levelSelectScreen .levelButton {
	position: absolute;
	left: 50%;
	top: 0;
	width: 112px;
	min-height: 43px;
	padding: 5px 5px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	transform: translateX(-50%);
	font-size: 13px;
	line-height: 1;
	z-index: 2;
}
#levelSelectScreen .levelButton:hover { transform: translateX(-50%) translateY(-2px) scale(1.06); }
#levelSelectScreen .levelButton:active { transform: translateX(-50%) translateY(3px) scale(.99); }
.levelButton span { font: 900 13px/1 var(--arcade-font); }
.levelButton small { font: 900 8px/1 var(--arcade-font); letter-spacing: .35px; text-transform: uppercase; opacity: .76; }
#levelSelectScreen .levelButton[data-level="1"] { left:21.4%; top:88%; }
#levelSelectScreen .levelButton[data-level="2"] { left:50%; top:80%; }
#levelSelectScreen .levelButton[data-level="3"] { left:78.6%; top:72%; }
#levelSelectScreen .levelButton[data-level="4"] { left:50%; top:64%; }
#levelSelectScreen .levelButton[data-level="5"] { left:21.4%; top:56%; }
#levelSelectScreen .levelButton[data-level="6"] { left:50%; top:48%; }
#levelSelectScreen .levelButton[data-level="7"] { left:78.6%; top:40%; }
#levelSelectScreen .levelButton[data-level="8"] { left:50%; top:32%; }
#levelSelectScreen .levelButton[data-level="9"] { left:21.4%; top:24%; }
#levelSelectScreen .levelButton[data-level="10"] { left:50%; top:16%; }
#levelSelectScreen .levelButton[data-level="11"] { left:78.6%; top:8%; }
#levelSelectScreen #completedSceneButton { left:50%; top:0; }
.routeCloud {
	position: absolute;
	z-index: 1;
	width: 58px;
	height: 21px;
	background: rgba(255,255,255,.5);
	border-radius: 999px;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}
.routeCloud::before,
.routeCloud::after {
	content: "";
	position: absolute;
	bottom: 3px;
	background: inherit;
	border-radius: 50%;
}
.routeCloud::before { left: 8px; width: 25px; height: 25px; }
.routeCloud::after { right: 7px; width: 31px; height: 31px; }
.routeCloudOne { left: 4%; top: 43%; transform: scale(.9); }
.routeCloudTwo { right: 2%; top: 68%; transform: scale(1.15); }
#levelSelectScreen .stickyFooter {
	position: static;
	flex: 0 0 auto;
	width: 100%;
	padding: 5px 0 1px;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
}
#levelSelectScreen #backFromLevelSelect {
	min-height: 48px;
	margin: 0;
	background: linear-gradient(180deg,#fff,#9deaff);
}

@media (max-height: 700px) {
	#mainMenu { padding-top: 24px; }
	#titleImage { width: min(360px,88%); }
	.menuTagline { font-size: 9px; }
	#mainMenu > .menuButton { min-height: 51px; margin: 5px 0; }
	.flightLesson { min-height: 184px; }
	.lessonArt { height: 54px; }
	.flightLesson p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	#loadingTitleImage { animation: none !important; }
}

/* C018 — gameplay-speed balloon flight and a properly elevated green title. */
.highTitle {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
	animation: c018HighFloat 2.35s ease-in-out infinite;
}
.highTitle::before {
	content: "";
	position: absolute;
	inset: 6% 3% 2%;
	z-index: -2;
	border-radius: 50%;
	background:
		repeating-radial-gradient(ellipse at center, rgba(116,255,55,.22) 0 7px, rgba(0,255,120,.04) 8px 15px, transparent 16px 24px),
		radial-gradient(ellipse at center, rgba(79,255,44,.52), rgba(20,255,151,.16) 48%, transparent 72%);
	filter: blur(12px);
	animation: c018AuraBreathe 3.4s ease-in-out infinite;
}
.highTitle > img {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.loadingHighTitle {
	width: min(390px, 100%);
	margin: 0 auto 14px;
}
.menuHighTitle {
	width: min(430px, 98%);
	margin: 2px auto 8px;
}
#loadingTitleImage,
#titleImage {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: none;
	margin: 0;
	filter:
		hue-rotate(300deg)
		saturate(2.7)
		contrast(1.12)
		brightness(1.08)
		drop-shadow(0 4px 0 #0b1018)
		drop-shadow(0 10px 8px rgba(0,0,0,.48))
		drop-shadow(0 0 7px #9cff2f)
		drop-shadow(0 0 15px rgba(44,255,112,.9));
	animation: c018TitleWarp 3.1s ease-in-out infinite;
}
.highTitleGhost {
	position: relative;
	z-index: 1;
	opacity: .36;
	mix-blend-mode: screen;
}
.highTitleGhostA {
	filter: hue-rotate(278deg) saturate(3.1) brightness(1.15) blur(.45px) drop-shadow(0 0 9px #c6ff2e);
	animation: c018GhostA 2.7s ease-in-out infinite;
}
.highTitleGhostB {
	filter: hue-rotate(322deg) saturate(2.8) brightness(1.08) blur(.55px) drop-shadow(0 0 10px #18ff93);
	animation: c018GhostB 3.3s ease-in-out infinite;
}
@keyframes c018HighFloat {
	0%,100% { transform: translateY(0) rotate(-.45deg); }
	37% { transform: translateY(-9px) rotate(.65deg); }
	70% { transform: translateY(-4px) rotate(-.15deg); }
}
@keyframes c018TitleWarp {
	0%,100% { transform: skewX(-1deg) scale(1,1); }
	30% { transform: skewX(1.4deg) scale(1.025,.985); }
	62% { transform: skewX(-.3deg) scale(.992,1.025); }
}
@keyframes c018GhostA {
	0%,100% { transform: translate(-5px,2px) skewX(-1.8deg) scale(1.008); }
	50% { transform: translate(3px,-2px) skewX(1.2deg) scale(1.026,.99); }
}
@keyframes c018GhostB {
	0%,100% { transform: translate(5px,-1px) skewX(1.5deg) scale(.998,1.012); }
	50% { transform: translate(-3px,3px) skewX(-1deg) scale(1.018); }
}
@keyframes c018AuraBreathe {
	0%,100% { opacity: .72; transform: scale(.94,.82) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.08,1.02) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
	.highTitle,
	.highTitle::before,
	#loadingTitleImage,
	#titleImage,
	.highTitleGhost { animation: none !important; }
	.highTitleGhostA { transform: translate(-4px,2px); }
	.highTitleGhostB { transform: translate(4px,-1px); }
}

/* C019 — title readability is immediate even while the 16-bit source PNG decodes. */
.highTitle {
	aspect-ratio: 2908 / 694;
}
.highTitleFallback {
	grid-area: 1 / 1;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #39ff25;
	font: italic 900 clamp(43px, 11vw, 61px)/.86 var(--arcade-font);
	letter-spacing: -3px;
	white-space: nowrap;
	-webkit-text-stroke: 3px #0b1018;
	text-shadow: 0 5px 0 #0b1018, 0 9px 8px rgba(0,0,0,.4), 0 0 9px #9cff2f, 0 0 18px rgba(44,255,112,.9);
	opacity: 1;
	transition: opacity .08s linear;
}
.highTitle > .highTitleCore,
.highTitle > .highTitleGhost {
	opacity: 0;
}
.highTitle.titleArtReady > .highTitleCore {
	opacity: 1;
	transition: opacity .08s linear;
}
.highTitle.titleArtReady > .highTitleGhost {
	opacity: .36;
	transition: opacity .08s linear;
}
.highTitle.titleArtReady > .highTitleFallback {
	opacity: 0;
}