:root {
  --purple: #6c4cff;
  --deep-purple: #4327b8;
  --pink: #ff4ba8;
  --red: #ff4057;
  --blue: #25a7ff;
  --yellow: #ffd42a;
  --green: #20cf83;
  --ink: #292052;
  --cream: #fff9e9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.8) 0 3%, transparent 3.2%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.65) 0 4%, transparent 4.2%),
    linear-gradient(135deg, #b9f4ff 0%, #c9c0ff 47%, #ffb9e1 100%);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  user-select: none;
}

button { font: inherit; }
button:focus-visible { outline: 5px solid white; box-shadow: 0 0 0 9px var(--ink); }

.sky-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cloud {
  position: absolute;
  color: rgba(255,255,255,.78);
  font-size: clamp(7rem, 16vw, 13rem);
  filter: drop-shadow(0 8px 0 rgba(103,76,190,.08));
  animation: drift 11s ease-in-out infinite alternate;
}
.cloud-one { left: -3vw; top: 5vh; }
.cloud-two { right: -4vw; bottom: 2vh; animation-delay: -5s; }
.sparkle { position: absolute; color: #fff; font-size: 3rem; animation: twinkle 1.4s infinite alternate; }
.sparkle-one { left: 8%; bottom: 18%; }
.sparkle-two { right: 9%; top: 14%; color: var(--yellow); animation-delay: -.7s; }

.course-shell {
  position: relative;
  width: min(1180px, calc(100% - 28px));
  min-height: min(760px, calc(100vh - 28px));
  margin: 14px auto;
  border: 5px solid rgba(255,255,255,.85);
  border-radius: 40px;
  background: rgba(255,255,255,.30);
  box-shadow: 0 25px 70px rgba(68,39,148,.24), inset 0 0 35px rgba(255,255,255,.65);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.topbar {
  position: relative;
  z-index: 20;
  height: 76px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.82);
  border-bottom: 4px solid rgba(108,76,255,.12);
}

.sound-button, .timer {
  min-width: 52px;
  height: 48px;
  border: 0;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: var(--purple);
  color: white;
  font-size: 1.35rem;
  box-shadow: 0 6px 0 var(--deep-purple);
}
.sound-button { cursor: pointer; }
.sound-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--deep-purple); }
.timer { min-width: 80px; background: white; color: var(--deep-purple); border: 3px solid #dcd4ff; box-shadow: none; font-size: 1rem; }

.progress-wrap { flex: 1; display: flex; gap: 12px; align-items: center; font-weight: 900; }
.progress-track { flex: 1; height: 18px; border-radius: 20px; background: #e3ddff; overflow: hidden; box-shadow: inset 0 2px 4px rgba(67,39,184,.15); }
.progress-fill { width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--yellow)); transition: width .55s cubic-bezier(.2,.9,.25,1.25); }

.screen {
  display: none;
  min-height: calc(min(760px, calc(100vh - 28px)) - 76px);
  padding: clamp(22px, 4vw, 50px);
  text-align: center;
}
.screen.active { display: flex; flex-direction: column; align-items: center; animation: screenIn .48s cubic-bezier(.2,.8,.25,1.2); }

.hero-card, .finish-card {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: auto;
  padding: clamp(20px, 4vw, 44px);
  border-radius: 42px;
  background: var(--cream);
  border: 7px solid white;
  box-shadow: 0 17px 0 rgba(82,51,173,.2), 0 25px 50px rgba(64,33,131,.2);
}

.mascot-wrap { position: relative; width: 170px; margin: -76px auto 0; }
.mascot { position: relative; font-size: 7rem; filter: drop-shadow(0 10px 0 rgba(89,50,160,.16)); animation: bounce 1.6s ease-in-out infinite; }
.speech-bubble {
  position: absolute;
  right: -118px;
  top: 8px;
  padding: 10px 19px;
  border-radius: 22px 22px 22px 4px;
  background: white;
  color: var(--pink);
  font-size: 1.35rem;
  font-weight: 900;
  transform: rotate(5deg);
  box-shadow: 0 7px 0 #ffd4e9;
}

.eyebrow { color: var(--pink); letter-spacing: .1em; font-weight: 900; margin: 5px 0; }
h1, h2 { font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; margin: 5px 0; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7vw, 5rem); color: var(--purple); text-shadow: 4px 5px 0 #ddd4ff; }
h2 { font-size: clamp(2rem, 5vw, 3.65rem); color: var(--deep-purple); }
.big-prompt { font-size: clamp(1rem, 2.4vw, 1.35rem); }

.primary-button, .next-button {
  border: 0;
  border-radius: 22px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--pink), #ff705d);
  color: white;
  cursor: pointer;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  letter-spacing: .03em;
  box-shadow: 0 8px 0 #c82c77, 0 13px 25px rgba(255,75,168,.32);
  transition: transform .15s, filter .15s;
}
.primary-button:hover, .next-button:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.04); }
.primary-button:active, .next-button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 3px 0 #c82c77; }
.teacher-note { margin-bottom: -24px; color: #756a94; font-size: .88rem; }

.screen-heading { margin-bottom: 22px; }
.screen-heading p { margin: 7px 0; font-size: 1.1rem; }
.level-pill { display: inline-block; padding: 7px 16px; border-radius: 999px; color: white; background: var(--purple); font-size: .8rem; letter-spacing: .09em; box-shadow: 0 5px 0 var(--deep-purple); }
.level-pill.pink { background: var(--pink); box-shadow-color: #c62b78; }
.level-pill.green { background: var(--green); box-shadow-color: #119860; }
.level-pill.orange { background: #ff8d2e; box-shadow-color: #c95c13; }
.level-pill.tree-pill { background: #38b85a; box-shadow-color: #1b7837; }

.launch-scene {
  position: absolute;
  inset: -10px 0 auto;
  height: 130px;
  pointer-events: none;
  overflow: hidden;
}
.planet { position: absolute; left: 7%; top: 10px; font-size: 3.4rem; animation: planetSpin 4s linear infinite; }
.hero-rocket { position: absolute; right: 9%; top: 42px; font-size: 3.7rem; transform: rotate(-42deg); animation: rocketLaunch 2.2s ease-in-out infinite; }
.smoke { position: absolute; right: 2%; top: 84px; color: white; opacity: .8; animation: smokePuff 1.1s ease-out infinite; }

.colour-grid { width: min(900px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 28px); margin: auto 0; }
.colour-card {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 7px solid white;
  border-radius: 36px;
  color: white;
  cursor: pointer;
  box-shadow: 0 14px 0 rgba(44,31,89,.18), 0 20px 35px rgba(57,39,112,.15);
  transition: transform .2s;
}
.colour-card:hover { transform: translateY(-8px) rotate(-2deg); }
.colour-card:nth-child(2):hover { transform: translateY(-8px) rotate(2deg); }
.colour-card.learned::after { content: "✓"; position: absolute; right: 13px; top: 11px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: white; color: var(--green); font-size: 1.7rem; }
.red-card { background: linear-gradient(145deg, #ff6677, #ed2944); }
.blue-card { background: linear-gradient(145deg, #50c7ff, #167ae8); }
.yellow-card { background: linear-gradient(145deg, #ffe663, #ffb812); color: #704c00; }
.paint-splat { display: block; font-size: clamp(4.7rem, 10vw, 7.6rem); line-height: 1.25; text-shadow: 0 8px 0 rgba(0,0,0,.1); }
.colour-card strong { display: block; font-family: "Arial Rounded MT Bold", sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); }
.colour-card small { opacity: .85; }
.colour-card.pop { animation: cardPop .48s; }

.task-status { min-height: 32px; margin: 19px 0 10px; padding: 7px 18px; border-radius: 99px; background: rgba(255,255,255,.75); font-weight: 900; }
.next-button { padding: 10px 28px; background: var(--purple); box-shadow: 0 7px 0 var(--deep-purple); }
.next-button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.3); }

.drag-game { width: min(950px, 100%); margin: auto 0; }
.stars-bank { min-height: 112px; padding: 5px; display: flex; align-items: center; justify-content: center; gap: 38px; }
.drag-star {
  width: 92px; height: 92px; border: 5px solid white; border-radius: 30px; cursor: grab; color: white; font-size: 3.7rem; line-height: 1; box-shadow: 0 10px 0 rgba(57,40,106,.2), 0 15px 25px rgba(40,30,90,.2);
  touch-action: none;
}
.drag-star:active { cursor: grabbing; transform: scale(1.12) rotate(10deg); }
.red-star { background: var(--red); }
.blue-star { background: var(--blue); }
.yellow-star { background: var(--yellow); color: #9b7000; }
.drag-star.selected { outline: 7px solid white; transform: scale(1.15); animation: pulse .8s infinite alternate; }
.drag-star.matched { visibility: hidden; }

.monsters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
.monster {
  position: relative;
  min-height: 210px;
  border: 7px solid white;
  border-radius: 45% 45% 28% 28%;
  cursor: pointer;
  color: white;
  box-shadow: 0 12px 0 rgba(57,40,106,.2);
  transition: transform .2s;
}
.monster::before, .monster::after { content: ""; position: absolute; top: -17px; width: 45px; height: 55px; border-radius: 60% 10%; background: inherit; z-index: -1; }
.monster::before { left: 28px; transform: rotate(-24deg); }
.monster::after { right: 28px; transform: rotate(24deg) scaleX(-1); }
.red-monster { background: var(--red); }
.blue-monster { background: var(--blue); }
.yellow-monster { background: var(--yellow); color: #624a00; }
.monster-eyes { display: block; margin-top: 40px; font-size: 1.5rem; word-spacing: 35px; color: white; text-shadow: 0 0 0 #222; }
.yellow-monster .monster-eyes { color: #4f3a00; }
.monster-mouth { display: block; font-size: 4rem; line-height: .7; transform: rotate(180deg); }
.monster strong { display: block; margin-top: 20px; font-size: 1.15rem; }
.monster.drag-over { transform: scale(1.08); filter: brightness(1.12); }
.monster.fed { animation: monsterEat .75s; }

.listen-prompt { border: 0; border-radius: 999px; padding: 10px 18px; background: white; color: var(--purple); cursor: pointer; box-shadow: 0 5px 0 #d6ccff; }
.animal-stage { width: min(900px, 100%); margin: auto 0; }
.question-bubble { display: inline-block; position: relative; padding: 13px 30px; border-radius: 28px; background: white; color: var(--pink); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 900; box-shadow: 0 8px 0 #ffd2e7; }
.animal-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 34px; }
.animal-card {
  min-height: 260px; padding: 14px; border: 7px solid white; border-radius: 38px; background: linear-gradient(145deg, #fff7d9, #ffe0f3); cursor: pointer; color: var(--ink); box-shadow: 0 14px 0 rgba(65,43,130,.18); transition: transform .18s;
}
.animal-card:hover { transform: scale(1.04) rotate(-2deg); }
.animal-card span { display: block; font-size: clamp(5rem, 11vw, 8rem); filter: drop-shadow(0 8px 0 rgba(71,48,114,.12)); }
.animal-card strong { font-family: "Arial Rounded MT Bold", sans-serif; font-size: 1.7rem; }
.animal-card.correct { background: #caffd9; border-color: var(--green); animation: correctBounce .6s; }
.animal-card.wrong { animation: shake .38s; background: #ffd4dc; }
.quiz-dots { display: flex; gap: 10px; margin: 22px 0 0; }
.quiz-dots i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.8); }
.quiz-dots i.current { width: 38px; border-radius: 9px; background: var(--pink); }
.quiz-dots i.done { background: var(--green); }

.archery-screen { background: linear-gradient(180deg, rgba(102,220,255,.2), rgba(117,214,106,.25)); }
.archery-arena { width: min(980px, 100%); min-height: 445px; margin: auto 0; position: relative; padding-bottom: 135px; }
.first-person-bow {
  position: absolute; z-index: 12; left: 50%; bottom: -30px; width: 210px; height: 190px; transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px rgba(38,24,70,.25)); pointer-events: none;
}
.first-person-bow.aim { animation: bowDraw .38s ease-out; }
.bow-limb {
  position: absolute; left: 20px; top: 0; width: 170px; height: 170px; border: 12px solid #9b572b; border-left-color: transparent;
  border-radius: 50%; transform: rotate(180deg); box-shadow: inset -5px 0 0 #d9944f, 5px 0 0 #63351d;
}
.bow-string {
  position: absolute; left: 24px; top: 13px; width: 3px; height: 145px; background: #fff8d8; transform-origin: center;
  box-shadow: 0 0 4px rgba(45,26,73,.8);
}
.bow-string::before, .bow-string::after {
  content: ""; position: absolute; left: 0; width: 3px; height: 77px; background: #fff8d8; transform-origin: left bottom;
}
.bow-string::before { top: -3px; transform: rotate(-18deg); }
.bow-string::after { bottom: -3px; transform: rotate(18deg); transform-origin: left top; }
.bow-grip { position: absolute; left: 92px; top: 72px; width: 27px; height: 72px; border-radius: 12px; background: linear-gradient(90deg,#4c2716,#9a5730,#4c2716); transform: rotate(2deg); }
.bow-hand { position: absolute; z-index: 3; left: 74px; top: 113px; font-size: 3.2rem; transform: rotate(-8deg); }
.flying-arrow {
  position: absolute; z-index: 20; left: 91px; top: 64px; width: 52px; opacity: 1; color: #442512; font-size: 3rem; line-height: 1;
  transform-origin: 12px 50%; text-shadow: 0 2px 0 #fff1b7;
}
.flying-arrow.shoot { animation: arrowToTarget .62s cubic-bezier(.12,.72,.25,1) forwards; }
.targets { margin-top: 12px; position: relative; z-index: 2; }
.target { position: relative; min-height: 250px; background: radial-gradient(circle, white 0 20%, #ff4b5c 21% 37%, white 38% 53%, #3a9fff 54% 70%, white 71%); }
.target span, .target strong { position: relative; z-index: 2; }
.target i { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.28); font-size: 12rem; font-style: normal; }
.target.hit { animation: targetHit .7s; }

.race-board { width: min(900px, 100%); margin: auto; position: relative; }
.race-score { display: flex; justify-content: space-between; margin: 0 10px 12px; font-size: 1.15rem; color: var(--deep-purple); }
.race-score span { padding: 8px 18px; border-radius: 18px; background: white; box-shadow: 0 5px 0 #ddd4ff; }
.track { padding: 12px 18px; border-radius: 28px; background: #d77a38; border: 7px solid white; box-shadow: 0 12px 0 rgba(67,39,184,.18); }
.lane { height: 85px; position: relative; border-bottom: 4px dashed rgba(255,255,255,.7); }
.lane:last-child { border-bottom: 0; }
.lane i { position: absolute; right: 8px; top: 12px; font-size: 2.8rem; font-style: normal; }
.runner { position: absolute; left: 0; top: 9px; z-index: 2; font-size: 3.7rem; transition: left .65s cubic-bezier(.2,.9,.2,1.15); filter: drop-shadow(0 5px 0 rgba(0,0,0,.12)); }
.runner.fox-running { animation: foxRun .32s ease-in-out infinite alternate; }
.race-countdown {
  position: absolute; inset: 30px 0 auto; margin: auto; z-index: 8; width: 145px; height: 145px; border-radius: 50%;
  display: grid; place-items: center; background: var(--purple); border: 8px solid white; color: white; font-size: 5rem; box-shadow: 0 12px 0 var(--deep-purple);
}
.race-countdown.go { animation: countGo .7s forwards; }
.race-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.race-choices button { border: 6px solid white; border-radius: 24px; padding: 18px 10px; color: white; cursor: pointer; font-size: 1.4rem; box-shadow: 0 8px 0 rgba(48,35,93,.2); transition: transform .15s; }
.race-choices button:hover:not(:disabled) { transform: translateY(-5px) scale(1.03); }
.race-red { background: var(--red); }
.race-blue { background: var(--blue); }
.race-yellow { background: var(--yellow); color: #6c4b00 !important; }

.knowledge-tree { width: min(760px, 100%); height: 410px; margin: auto 0 4px; position: relative; }
.tree-mission {
  border: 5px solid white; border-radius: 22px; padding: 11px 25px; background: var(--purple); color: white; cursor: pointer;
  box-shadow: 0 7px 0 var(--deep-purple); font-size: 1.15rem; animation: missionPulse 1s ease-in-out infinite alternate;
}
.tree-crown {
  width: 580px; max-width: 90%; height: 310px; margin: 0 auto; position: relative; z-index: 2; border-radius: 50% 48% 45% 52%;
  background: radial-gradient(circle at 45% 38%, #7be862, #29a84c 66%, #147638);
  border: 8px solid white; box-shadow: 0 15px 0 rgba(24,104,50,.2), inset 0 -18px 0 rgba(12,91,38,.17);
  animation: treeBreathe 2.6s ease-in-out infinite alternate;
}
.tree-trunk { position: absolute; z-index: 1; width: 110px; height: 140px; left: calc(50% - 55px); bottom: 5px; padding-top: 92px; background: #a55c2b; border: 6px solid white; border-radius: 15px 15px 30px 30px; color: white; font-size: .85rem; }
.tree-ground { position: absolute; bottom: 0; left: 10%; width: 80%; height: 48px; border-radius: 50%; background: #3acb67; border: 6px solid white; }
.word-fruit {
  position: absolute; z-index: 3; min-width: 95px; min-height: 62px; padding: 9px; border: 5px solid white; border-radius: 50%; background: #604987; color: white; cursor: pointer; font-size: .92rem;
  box-shadow: 0 7px 0 rgba(36,25,72,.25); animation: fruitGlow 1s ease-in-out infinite alternate; transition: transform .2s, filter .2s;
}
.word-fruit:hover { transform: scale(1.12); }
.word-fruit.wrong-pick { animation: shake .38s; background: var(--pink); }
.word-fruit.lit { background: var(--yellow); color: #5d4300; filter: drop-shadow(0 0 14px #fff17b); animation: litFruit 1s infinite alternate; }
.fruit-red { left: 14%; top: 19%; }
.fruit-blue { left: 42%; top: 8%; animation-delay: -.3s; }
.fruit-yellow { right: 12%; top: 22%; animation-delay: -.6s; }
.fruit-cat { left: 19%; bottom: 17%; animation-delay: -.5s; }
.fruit-dog { left: 43%; bottom: 8%; animation-delay: -.8s; }
.fruit-duck { right: 11%; bottom: 19%; animation-delay: -.2s; }

#screen-finish { background: radial-gradient(circle, rgba(255,243,138,.8), transparent 60%); }
.finish-card { margin: auto; padding-top: 28px; }
.trophy { font-size: 6rem; animation: trophy 1.3s infinite alternate; }
.score-ring { width: 135px; height: 135px; margin: 14px auto; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--yellow), #ff8f3f); color: white; border: 7px solid white; box-shadow: 0 9px 0 #e08724; }
.score-ring strong { font-size: 2.8rem; line-height: 1; }
.score-ring span { font-size: .9rem; }
.review-line { display: inline-block; margin: 5px 7px 18px; padding: 8px 15px; border-radius: 999px; background: #eee8ff; color: var(--deep-purple); font-weight: 900; }
.replay-button { display: block; margin: 20px auto 0; border: 0; background: transparent; color: var(--purple); cursor: pointer; text-decoration: underline; }
.submit-note { min-height: 20px; margin-bottom: 0; color: #756a94; font-size: .85rem; }

.feedback-pop {
  position: fixed; z-index: 100; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(0);
  padding: 16px 34px; border: 6px solid white; border-radius: 28px; background: var(--green); color: white; font-family: "Arial Rounded MT Bold", sans-serif; font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; text-shadow: 0 4px 0 rgba(0,0,0,.13); box-shadow: 0 16px 0 rgba(42,27,93,.2);
  pointer-events: none;
}
.feedback-pop.show { animation: feedback .8s; }
.feedback-pop.try { background: var(--pink); }
.confetti span { position: absolute; top: -20px; z-index: 5; font-size: 1.4rem; animation: fall linear forwards; }

@keyframes screenIn { from { opacity: 0; transform: scale(.94) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bounce { 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes drift { to { transform: translate(35px, 10px); } }
@keyframes twinkle { to { transform: scale(1.45) rotate(15deg); opacity: .55; } }
@keyframes cardPop { 45% { transform: scale(1.12) rotate(3deg); } }
@keyframes pulse { to { filter: brightness(1.2); } }
@keyframes monsterEat { 25% { transform: scale(1.14); } 45% { transform: scale(.92); } 70% { transform: scale(1.08); } }
@keyframes correctBounce { 45% { transform: scale(1.13) rotate(3deg); } }
@keyframes shake { 25% { transform: translateX(-13px) rotate(-3deg); } 50% { transform: translateX(13px) rotate(3deg); } 75% { transform: translateX(-8px); } }
@keyframes trophy { to { transform: rotate(7deg) scale(1.08); } }
@keyframes feedback { 0% { transform: translate(-50%, -50%) scale(0); } 25%, 70% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(0); } }
@keyframes fall { to { transform: translateY(105vh) rotate(650deg); } }
@keyframes planetSpin { to { transform: rotate(360deg); } }
@keyframes rocketLaunch { 50% { transform: translate(-25px,-20px) rotate(-42deg) scale(1.08); } }
@keyframes smokePuff { to { transform: translate(24px,18px) scale(1.35); opacity: 0; } }
@keyframes bowDraw { 50% { transform: translateX(-50%) scale(1.08) translateY(10px); } }
@keyframes arrowToTarget {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--arrow-angle)); }
  82% { opacity: 1; transform: translate(var(--arrow-x), var(--arrow-y)) rotate(var(--arrow-angle)) scale(.82); }
  100% { opacity: 0; transform: translate(var(--arrow-x), var(--arrow-y)) rotate(var(--arrow-angle)) scale(.72); }
}
@keyframes targetHit { 30% { transform: rotate(-7deg) scale(1.1); } 60% { transform: rotate(7deg) scale(.96); } }
@keyframes countGo { 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes treeBreathe { to { transform: scale(1.025); filter: saturate(1.12); } }
@keyframes fruitGlow { to { box-shadow: 0 7px 0 rgba(36,25,72,.25), 0 0 18px rgba(255,255,255,.9); transform: translateY(-3px); } }
@keyframes litFruit { to { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 22px #fff7a8); } }
@keyframes foxRun { to { transform: translateY(-8px) rotate(4deg); } }
@keyframes missionPulse { to { transform: scale(1.04); box-shadow: 0 7px 0 var(--deep-purple), 0 0 22px rgba(255,255,255,.9); } }

@media (max-width: 680px) {
  .course-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .screen { min-height: calc(100vh - 68px); padding: 18px 14px; }
  .topbar { height: 68px; padding: 10px 12px; }
  .colour-grid, .animal-options { gap: 8px; }
  .colour-card, .animal-card { min-height: 190px; border-width: 4px; border-radius: 25px; }
  .colour-card small { display: none; }
  .animal-card span { font-size: 4.5rem; }
  .archery-arena { min-height: 390px; padding-bottom: 105px; }
  .first-person-bow { bottom: -48px; transform: translateX(-50%) scale(.78); }
  .target { min-height: 180px; }
  .race-choices { gap: 8px; }
  .knowledge-tree { height: 380px; }
  .word-fruit { min-width: 78px; font-size: .75rem; }
  .monsters { gap: 8px; }
  .monster { min-height: 175px; border-width: 4px; }
  .monster-eyes { word-spacing: 12px; }
  .speech-bubble { right: -75px; font-size: 1rem; }
}

@media (max-height: 670px) and (min-width: 681px) {
  .course-shell { min-height: calc(100vh - 16px); margin: 8px auto; }
  .screen { min-height: calc(100vh - 92px); padding: 14px 30px; }
  .screen-heading { margin-bottom: 8px; }
  .colour-card, .animal-card { min-height: 190px; }
  .paint-splat { font-size: 4rem; }
  .monster { min-height: 155px; }
  .monster-eyes { margin-top: 22px; }
}

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