@font-face{font-family:Pixel;src:url('./assets/press-start-2p.ttf') format('truetype');font-display:swap}
@font-face{font-family:Meadow;src:url('./assets/vt323.ttf') format('truetype');font-display:swap}
:root{--pine:#172f2d;--ink:#302738;--cream:#fff0cb;--gold:#eebf76;--mint:#b7d4a4;--pixel:Pixel,monospace;--body:Meadow,monospace;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--pine);color:var(--cream);font-family:var(--body);font-size:22px;overflow:hidden}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffde85;outline-offset:5px}button:disabled{cursor:default}
button,svg{touch-action:manipulation}button svg{pointer-events:none}button:active{translate:0 2px}
[hidden]{display:none!important}
.app{height:100dvh;min-height:560px;display:flex;flex-direction:column;padding:0 26px;max-width:1920px;margin:auto}
.topbar{height:89px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 6px}
.brand{color:var(--cream);display:flex;align-items:center;gap:17px;text-decoration:none;font-family:var(--pixel);font-size:17px;letter-spacing:-.4px;white-space:nowrap}
.brand-sub{font-family:var(--body);display:block;margin-top:10px;color:#a6b8a0;font-size:15px;letter-spacing:2.15px}
.brand-egg{display:block;width:24px;height:30px;background:#fff0ce;clip-path:polygon(32% 0,68% 0,68% 10%,82% 10%,82% 25%,92% 25%,92% 42%,100% 42%,100% 79%,88% 79%,88% 91%,72% 91%,72% 100%,28% 100%,28% 91%,12% 91%,12% 79%,0 79%,0 42%,8% 42%,8% 25%,18% 25%,18% 10%,32% 10%);box-shadow:inset -8px -7px #d9a465;position:relative}
.brand-egg:after{content:'';position:absolute;width:4px;height:4px;left:7px;top:13px;background:#c69060;box-shadow:7px 7px #c69060}
.chapter{font:9px var(--pixel);letter-spacing:1.6px;color:#c8d6b3;text-align:center;padding-right:30px}
.chapter-dot{display:inline-block;background:var(--gold);width:5px;height:5px;vertical-align:2px;margin-right:8px}
.chapter-name{display:block;font:20px var(--body);letter-spacing:.6px;color:#90a89b;margin-top:8px}
.controls{display:flex;gap:9px}.icon-button{border:1px solid #5c6c55;background:#243d34;width:38px;height:38px;color:var(--cream);font:19px var(--pixel);display:grid;place-items:center;box-shadow:inset 0 -3px #112923;transition:background .15s}
.icon-button:hover{background:#395343}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter}.icon-button[aria-pressed=true]{color:#8ca497}
.game-frame{position:relative;isolation:isolate;flex:1;min-height:0;border:3px solid #d4b078;outline:3px solid #101e23;box-shadow:0 0 0 5px #4a5545,0 10px 30px #071a2160;overflow:hidden;background:#536743}
.scene{position:absolute;inset:0;overflow:hidden;z-index:0}.artboard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;aspect-ratio:1.5;transform-origin:center}
.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;image-rendering:pixelated;pointer-events:none}.chick-landscape{opacity:0;transition:opacity .95s steps(12,end)}
.game-frame.revealed .chick-landscape{opacity:1}.scene-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#5b2c2522,transparent 40%,transparent 73%,#112e3499)}
.scene-heading{position:absolute;top:6.3%;left:10%;right:10%;text-align:center;z-index:3;pointer-events:none;color:#34283c;text-shadow:2px 0 #ffe9bc,-2px 0 #ffe9bc,0 2px #ffe9bc,0 -2px #ffe9bc;transition:opacity .35s}
.eyebrow{font:9px/1.8 var(--pixel);letter-spacing:1.5px;margin:0 0 19px}.scene-heading .eyebrow{color:#665147}.scene-heading .eyebrow span{color:#866d47;padding:0 10px}
h1{font:clamp(18px,2.3vw,31px)/1.6 var(--pixel);letter-spacing:-1.4px;margin:0}.scene-heading>p:last-child{font-size:25px;margin:9px 0;color:#4b3b3d}
.corner-mark{position:absolute;z-index:5;width:13px;height:13px;border:3px solid #fff0b9;pointer-events:none}.top-left{left:5px;top:5px;border-right:0;border-bottom:0}.top-right{right:5px;top:5px;border-left:0;border-bottom:0}.bottom-left{left:5px;bottom:5px;border-right:0;border-top:0}.bottom-right{right:5px;bottom:5px;border-left:0;border-top:0}
.progress-panel{position:absolute;left:25px;top:26px;width:160px;z-index:4;padding:11px 12px 12px;background:#17372edf;border:1px solid #b6bc8580;box-shadow:3px 3px #25332c40}
.progress-label{display:flex;align-items:center;justify-content:space-between;font:14px var(--body);color:#ddd9ab;gap:10px}.progress-label>b{color:white}.progress-label span:last-child{white-space:nowrap}.progress-label b{font-weight:400;color:#fff2c5}
.progress-track{display:flex;gap:3px;margin-top:9px}.progress-pip{height:8px;flex:1;background:#4b6252;border-top:2px solid #0f3029}.progress-pip.filled{background:#ffda85;border-color:#fff0b9;box-shadow:0 0 7px #ffd58230}
.words{position:absolute;inset:0;z-index:6;pointer-events:none}.word{position:absolute;transform:translate(-50%,-50%);padding:9px 19px 10px;min-width:112px;text-align:center;background:#fff1cd;color:#574036;box-shadow:0 -3px #fff1cd,0 3px #b18a55,-3px 0 #fff1cd,3px 0 #fff1cd,0 6px #41332d,-6px 0 #41332d,6px 0 #41332d,0 -6px #41332d,5px 9px 0 #223a3940;border:0;font:38px/.95 var(--body);letter-spacing:2px;pointer-events:auto;transition:opacity .18s,filter .18s;animation:word-arrive .24s steps(4,end) both;white-space:nowrap}
.word:before{content:'';position:absolute;width:5px;height:5px;background:#cfb888;top:5px;left:4px;box-shadow:0 23px #cfb888}.word:after{content:'';position:absolute;width:8px;height:8px;bottom:-10px;left:calc(50% - 4px);background:#b18a55;border:solid #41332d;border-width:0 3px 3px 0;rotate:45deg}
.word:hover{filter:brightness(1.07)}.word.active{background:#fff9dc;box-shadow:0 -3px #fff9dc,0 3px #daa75c,-3px 0 #fff9dc,3px 0 #fff9dc,0 6px #493931,-6px 0 #493931,6px 0 #493931,0 -6px #493931,0 0 0 9px #fadd8b55,0 0 28px #ffdf85b0}.word.dimmed{opacity:.68;filter:saturate(.7)}.word .typed{color:#21867c}.word .next-letter{background:#edc58355;box-shadow:0 2px #b78041}.word.mistake{animation:word-error .24s steps(4,end);background:#ffe2ca}.word.mistake .next-letter{color:#a34839;background:#e99c8960}.word.completed{animation:word-finish .48s steps(7,end) forwards;pointer-events:none;color:#177966;background:#fff5c7}
.cracks{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;image-rendering:pixelated;filter:drop-shadow(3px 1px #fff0c3)}.crack-branch{opacity:0;stroke:#684532;stroke-width:5;stroke-linejoin:miter;stroke-linecap:square;shape-rendering:crispEdges}.crack-branch.visible{opacity:1;animation:crack-in .3s steps(3,end)}.game-frame.hatching .cracks{animation:shell-shiver .16s steps(2,end) infinite}.game-frame.revealed .cracks{opacity:0;transition:opacity .3s}
.nest-glow{position:absolute;left:48.4%;top:62.7%;width:29%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff2ae88,transparent 65%);opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:3}.nest-glow.flash{animation:warm-glow .7s ease-out}.game-frame.hatching .nest-glow{animation:hatching-glow 1.5s ease-in-out infinite}
.egg-callout{position:absolute;left:48.4%;top:73.5%;transform:translateX(-50%);color:#fff3c9;font:18px var(--body);letter-spacing:1px;text-shadow:2px 2px #244334;opacity:.9;transition:opacity .4s}.game-frame.started .egg-callout{opacity:0}
.typing-dock{position:absolute;z-index:7;bottom:28px;left:20%;right:20%;text-align:center;pointer-events:none;transition:opacity .35s}.typing-hint{font:22px var(--body);letter-spacing:.5px;color:#fff4d3;text-shadow:2px 2px #203d34;display:flex;justify-content:center;align-items:center;gap:10px}.keycap{font:12px var(--pixel);display:inline-grid;place-items:center;width:24px;height:23px;background:#fbefcb;color:#3c5141;border-bottom:3px solid #c4b284;text-shadow:none;box-shadow:2px 2px #16342e}.typing-dock>p{font:17px var(--body);letter-spacing:.3px;color:#e1e5c4;margin:9px 0 0;text-shadow:1px 2px #17382f}
.mobile-entry{display:none;pointer-events:auto;font-size:0}.mobile-entry input{border:1px solid #fff0cb99;padding:9px;width:215px;background:#123c31d9;color:#fff0cb;font:22px var(--body);text-align:center;border-radius:0}
.particles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.particle{position:absolute;width:5px;height:5px;background:var(--particle-color,#fff0a0);box-shadow:0 0 8px #fff0a055;animation:particle-fly var(--duration,1000ms) steps(12,end) forwards}.particle.spark{clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);width:17px;height:17px}
.hatch-message{position:absolute;z-index:8;top:16%;left:10%;right:10%;text-align:center;color:var(--ink);text-shadow:2px 2px #fff3c2}.hatch-message h2{font:clamp(14px,1.6vw,24px)/1.8 var(--pixel)}.hatch-star{font-size:44px;display:block;animation:twinkle .8s steps(2,end) infinite;color:#fff4cd;filter:drop-shadow(2px 2px #7a593e)}
.success-panel{position:absolute;z-index:9;top:6.5%;left:50%;width:440px;max-width:90%;transform:translateX(-50%);text-align:center;color:#3d3540;text-shadow:1px 0 #ffebc5,-1px 0 #ffebc5,0 1px #ffebc5,0 -1px #ffebc5;animation:panel-arrive .5s ease-out both}.success-panel .eyebrow{margin-bottom:16px;color:#786443}.success-panel h2{font:22px/1.6 var(--pixel);letter-spacing:-1px;margin:0}.success-panel>p:not(.eyebrow){margin:10px 0 13px;font-size:23px}.results{display:flex;justify-content:center;gap:19px;font-size:18px;margin:12px 0 21px;color:#615244}.results span+span{border-left:1px solid #92765580;padding-left:19px}.results b{color:#284f44;font-weight:400}.pixel-button{background:#204f44;color:#fff1c6;border:2px solid #142e2b;padding:14px 21px 16px;font:11px/1.7 var(--pixel);text-shadow:none;box-shadow:inset 0 2px #739076,inset 0 -4px #14392f,3px 3px #c4976450;transition:background .15s}.pixel-button:hover{background:#376b56}.pixel-button span{margin-left:14px}.next-chapter{display:block;color:#716043;font-size:17px;margin-top:14px}.game-frame.hatching .scene-heading,.game-frame.hatching .typing-dock,.game-frame.revealed .scene-heading,.game-frame.revealed .typing-dock{opacity:0;pointer-events:none}
.footer{display:flex;justify-content:space-between;align-items:center;height:49px;flex-shrink:0;gap:20px;color:#94a792;font-size:16px;letter-spacing:.4px;padding:0 4px}.footer>span:first-child{color:#bec9a7}.footer>span:nth-child(2){font-size:13px;letter-spacing:1.5px}.footer>span:last-child{font-size:13px;letter-spacing:1.2px}.footer>span:last-child span{padding:0 8px;color:#d4b478}.small-spark{width:5px;height:5px;display:inline-block;background:#d6b97e;margin-right:10px;vertical-align:2px}
dialog{width:480px;max-width:calc(100% - 40px);color:#453b3d;background:#fff0cd;border:3px solid #b08c59;box-shadow:0 0 0 5px #342d38,10px 10px #122c3277;padding:34px;line-height:1.3;max-height:calc(100dvh - 55px);overflow:auto}dialog::backdrop{background:#132f38b3;backdrop-filter:blur(3px)}dialog h2{font:17px/1.8 var(--pixel);margin:0 0 25px}dialog .eyebrow{font-size:8px;color:#7b714f}dialog p{font-size:23px}dialog strong{font-weight:400;color:#117b69}dialog kbd{font:17px var(--body);background:#e1d4b3;padding:2px 5px}.dialog-close{position:absolute;right:10px;top:7px;border:0;background:none;color:#715a45;font-size:30px}.help-note{padding:12px 13px;background:#e5e3bb;color:#4b6646;font-size:22px;margin:20px 0}dialog .pixel-button{width:100%;font-size:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes word-arrive{from{opacity:0}to{opacity:1}}@keyframes word-finish{to{opacity:0;translate:0 -25px;scale:1.1}}@keyframes word-error{25%{translate:-4px 0}75%{translate:4px 0}}@keyframes crack-in{from{opacity:0}to{opacity:1}}@keyframes warm-glow{0%{opacity:.9;scale:.8}100%{opacity:0;scale:1.2}}@keyframes hatching-glow{50%{opacity:1;scale:1.2}}@keyframes shell-shiver{0%{translate:-2px 0}50%{translate:2px 0}}@keyframes particle-fly{0%{opacity:1;translate:0 0}80%{opacity:1}100%{opacity:0;translate:var(--dx,20px) var(--dy,-70px);rotate:90deg}}@keyframes panel-arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes twinkle{50%{opacity:.5;scale:.85}}
@media(min-width:1600px){.scene-heading{top:8%}.word{font-size:44px;padding:12px 24px}.progress-panel{width:184px}}
@media(max-width:1000px){.topbar{height:78px}.brand{font-size:14px;gap:12px}.brand-sub{font-size:13px;letter-spacing:1.3px}.chapter{padding:0;font-size:8px;letter-spacing:.8px}.chapter-name{font-size:18px}.app{padding:0 18px}.progress-panel{top:18px;left:18px;width:132px;padding:9px}.progress-label{font-size:12px;gap:5px}.scene-heading{top:13%}.scene-heading .eyebrow{font-size:8px;letter-spacing:.5px;margin-bottom:12px}.scene-heading>p:last-child{font-size:22px}.footer>span:nth-child(2){display:none}.success-panel{top:12%;width:400px}.success-panel h2{font-size:20px}}
@media(max-width:640px){body{overflow:auto}.app{min-height:650px;padding:0 10px}.topbar{height:76px;gap:10px;padding:0 3px}.brand{font-size:12px;gap:9px}.brand-sub{font-size:11px;letter-spacing:1px;margin-top:9px}.brand-egg{width:18px;height:25px}.chapter{display:none}.controls{gap:5px}.icon-button{width:31px;height:33px;font-size:15px}.icon-button svg{width:17px;height:17px}.game-frame{border-width:2px}.scene-heading{top:13%;left:4%;right:4%}.scene-heading .eyebrow{font-size:6px;letter-spacing:.3px}.scene-heading .eyebrow span{padding:0 3px}h1{font-size:16px;letter-spacing:-.8px}.scene-heading>p:last-child{font-size:20px}.progress-panel{top:15px;left:16px;width:134px;padding:7px 9px}.progress-label{font-size:12px}.progress-track{margin-top:5px}.progress-pip{height:6px}.typing-dock{bottom:22px;left:2%;right:2%}.typing-hint{font-size:20px}.typing-dock>p{font-size:16px;margin:7px 0}.mobile-entry{display:block;margin-top:11px}.footer{height:40px;font-size:13px}.footer>span:last-child{font-size:11px;letter-spacing:.5px}.footer>span:last-child span{padding:0 3px}.word{font-size:32px;min-width:86px;padding:8px 14px;letter-spacing:1px}.word:before{box-shadow:0 17px #cfb888}.egg-callout{display:none}.success-panel{top:13%;max-width:95%}.success-panel .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:11px}.success-panel h2{font-size:17px}.success-panel>p:not(.eyebrow){font-size:20px}.results{font-size:16px;gap:12px;margin:10px 0 15px}.results span+span{padding-left:12px}.pixel-button{font-size:9px;padding:12px 13px}.next-chapter{font-size:16px}.hatch-message{top:19%;left:4%;right:4%}.hatch-message h2{font-size:13px}dialog{padding:27px 24px}dialog p{font-size:21px}dialog h2{font-size:14px}.help-note{font-size:20px}}
@media(max-height:720px) and (min-width:641px){.app{min-height:500px}.topbar{height:66px}.footer{height:36px}.scene-heading{top:6%;}.scene-heading .eyebrow{font-size:7px;margin-bottom:10px}h1{font-size:23px}.scene-heading>p:last-child{font-size:22px;margin-top:6px}.progress-panel{top:20px;left:20px}.typing-dock{bottom:17px}.success-panel{top:6%}.success-panel h2{font-size:19px}.success-panel .eyebrow{font-size:7px;margin-bottom:9px}.success-panel>p:not(.eyebrow){font-size:20px;margin:7px 0}.results{margin:9px 0 13px}.next-chapter{font-size:16px;margin-top:8px}.pixel-button{padding:11px 16px;font-size:10px}}
@media(pointer:coarse){.mobile-entry{display:block;margin-top:11px}.typing-dock{bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.particle{display:none}}

/* Chapter 1: a connected story across the meadow. */
.artboard{transition:transform .8s ease-in-out}.scene-heading>p:last-child{max-width:630px;line-height:1.2;margin:10px auto 0;font-size:23px}.scene-heading h1{font-size:clamp(16px,2vw,27px)}
.game-frame.story-mode .scene-heading,.game-frame.story-mode .typing-dock{opacity:0;pointer-events:none}.game-frame[data-stage]:not([data-stage=egg]) .cracks,.game-frame[data-stage]:not([data-stage=egg]) .nest-glow{display:none}
.game-frame[data-stage]:not([data-stage=egg]) .success-panel{width:500px;padding:22px 28px;background:#fff0d5ed;border:3px solid #866948;box-shadow:0 0 0 3px #f6d79c,5px 7px #283d3255;text-shadow:none;top:7%}
.success-panel>p:not(.eyebrow){line-height:1.18}.success-panel h2{font-size:20px}.success-panel .next-chapter{line-height:1.3;font-size:16px}.success-panel .pixel-button{max-width:100%;margin-top:6px;font-size:10px}.success-panel .results{margin-bottom:9px}
#feedback{max-width:630px;min-height:20px;line-height:1.2;margin-left:auto;margin-right:auto}.typing-dock{left:10%;right:10%}.typing-hint{font-size:21px}.typing-dock>p{font-size:20px;color:#fff2cf}.scene-shade{background:linear-gradient(180deg,#3d282018,transparent 36%,transparent 69%,#112e34cb)}
.journey{list-style:none;display:flex;align-items:center;gap:19px;padding:0;margin:0;color:#80988a;font-size:16px;letter-spacing:.3px}.journey li{position:relative;display:flex;align-items:center;white-space:nowrap}.journey button{display:flex;align-items:center;gap:6px;min-height:32px;padding:6px 2px;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;touch-action:manipulation}.journey button:hover{color:#fff1c6;background:#f4cd8e0d}.journey button:focus-visible{outline:2px solid #f4cd8e;outline-offset:2px;background:#f4cd8e15}.journey button:active{transform:translateY(1px)}.journey button:before{content:'';display:block;width:6px;height:6px;border:1px solid #678174}.journey li.current{color:#fff1c6}.journey li.current button:before{background:#f4cd8e;border-color:#ffe1a3;box-shadow:0 0 0 3px #e9c68220}.journey li.done{color:#b6d2a7}.journey li.done button:before{background:#b6d2a7;border-color:#b6d2a7}.footer{height:55px}.footer>span:last-child{white-space:nowrap;font-size:12px}.footer>span:first-child{font-size:15px}
.pip{position:absolute;z-index:4;aspect-ratio:1;transform:translate(-50%,-83.6%);transition:left .8s ease-in-out,top .8s ease-in-out;pointer-events:none;--growth:1;--action-duration:850ms}.pip-visual{position:absolute;inset:0;transform-origin:50% 83.6%;scale:var(--growth)}.pip-visual img,.pip-reflection{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;user-select:none}.pip-standing{animation:pip-breathe 2.4s steps(4,end) infinite;transform-origin:50% 84%}.pip-wings{opacity:0}.pip-shadow{position:absolute;top:82.3%;left:31%;width:43%;height:5%;background:#283b3159;border-radius:50%;filter:blur(1px)}.pip.facing-left .pip-visual img{scale:-1 1}.pip-reflection{display:none;top:67.2%;transform:scaleY(-1);opacity:.19;mask-image:linear-gradient(transparent 23%,#000 80%);filter:sepia(.5) hue-rotate(115deg)}.at-water .pip-reflection{display:block}.at-water .pip-shadow{opacity:0}.pip-petal{display:none;position:absolute;width:7%;height:4%;background:#f5a2c3;box-shadow:3px 2px #a85c83;top:19%;left:48%;rotate:-25deg}.has-petal .pip-petal{display:block}.pip.fluffy .pip-visual{scale:1.19}
.action-look{animation:pip-look var(--action-duration) ease-in-out}.action-hop{animation:pip-hop var(--action-duration) cubic-bezier(.3,.05,.5,1)}.action-tumble{animation:pip-tumble var(--action-duration) ease-in-out}.action-peck,.action-sip{animation:pip-peck var(--action-duration) ease-in-out}.action-wash{animation:pip-wash var(--action-duration) ease-in-out}.action-splash{animation:pip-splash var(--action-duration) steps(6,end)}.action-flight{animation:pip-flight var(--action-duration) ease-in-out}.action-flap{animation:pip-hop-small var(--action-duration) ease-in-out}.action-flap .pip-wings,.action-flight .pip-wings,.action-splash .pip-wings,.action-wash .pip-wings{animation:flap-frame .13s steps(1,end) infinite}.action-flap .pip-standing,.action-flight .pip-standing,.action-splash .pip-standing,.action-wash .pip-standing{animation:flap-frame .13s steps(1,end) infinite reverse}
.world-details{position:absolute;inset:0;z-index:3;pointer-events:none}.water-ripple{position:absolute;width:90px;height:24px;transform:translate(-50%,-50%);border:3px solid #d6fff3;border-radius:50%;box-shadow:0 2px #6fbabe;animation:ripple-out 1.3s ease-out forwards}.beetle{position:absolute;width:12px;height:9px;background:#423b58;border:2px solid #222f36;box-shadow:-3px 1px #24483d,3px 1px #24483d,0 3px #24483d;animation:beetle-walk 3s steps(12,end) forwards}.distant-bird{position:absolute;left:72%;top:20%;font:60px var(--body);color:#484054;z-index:2;animation:bird-soar 14s linear infinite;pointer-events:none}
.game-frame[data-stage=perch] .scene-heading{left:auto;right:4%;top:auto;bottom:24%;width:40%;text-align:right}.game-frame[data-stage=perch] .scene-heading .eyebrow{font-size:7px;letter-spacing:.8px}.game-frame[data-stage=perch] .scene-heading h1{font-size:22px;line-height:1.5}.game-frame[data-stage=perch] .scene-heading>p:last-child{font-size:21px;max-width:380px;margin-right:0}.game-frame[data-stage=perch] .success-panel{left:auto;right:4%;top:auto;bottom:21%;transform:none;width:430px;max-width:46%;padding:21px 23px}.game-frame[data-stage=perch] .success-panel h2{font-size:17px;line-height:1.65}.game-frame[data-stage=perch] .success-panel>p:not(.eyebrow){font-size:22px}.game-frame[data-stage=perch] .success-panel .eyebrow{font-size:7px;margin-bottom:11px}.game-frame[data-stage=perch] .results{font-size:16px;gap:10px}.game-frame[data-stage=perch] .results span+span{padding-left:10px}.game-frame.chapter-finished .scene-shade{background:linear-gradient(180deg,transparent 40%,#17373444)}
.scene-arrive .scene{animation:scene-arrive .65s ease-out}.game-frame[data-stage=egg] .artboard{transition:none}.game-frame[data-stage=egg] .success-panel{max-width:580px;width:70%}.game-frame[data-stage=egg] .success-panel>p:not(.eyebrow){max-width:480px;margin:12px auto}.game-frame[data-stage=egg] .success-panel .eyebrow{margin-bottom:12px}
@keyframes pip-breathe{50%{transform:scaleY(1.016)}}@keyframes pip-look{35%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}@keyframes pip-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-55px)}}@keyframes pip-hop-small{40%,75%{transform:translateY(-10px)}}@keyframes pip-tumble{0%{transform:translateY(0) rotate(0)}38%{transform:translateY(-35px) rotate(22deg)}75%{transform:translateY(0) rotate(65deg)}100%{transform:translateY(0) rotate(0)}}@keyframes pip-peck{0%,50%,100%{transform:rotate(0)}32%,80%{transform:translateY(8px) rotate(20deg)}}@keyframes pip-wash{25%{transform:translateY(15px) rotate(-8deg)}60%{transform:translateY(10px) rotate(8deg)}}@keyframes pip-splash{15%,55%{transform:translateY(-15px) rotate(-9deg)}35%,75%{transform:translateY(0) rotate(9deg)}}@keyframes pip-flight{0%,100%{transform:translateY(0)}30%{transform:translateY(-90px)}50%{transform:translateY(-80px)}78%{transform:translateY(7px) scaleY(.89)}}@keyframes flap-frame{0%,49%{opacity:0}50%,100%{opacity:1}}@keyframes ripple-out{to{scale:2.6;opacity:0}}@keyframes beetle-walk{to{translate:90px -23px;opacity:.1}}@keyframes bird-soar{0%{translate:-110px 4px}50%{translate:60px -15px}100%{translate:210px -3px}}@keyframes scene-arrive{from{opacity:.25}to{opacity:1}}
@media(max-width:1100px){.footer>span:first-child{display:none}.journey{gap:16px}.scene-heading>p:last-child{font-size:21px}.game-frame[data-stage=perch] .scene-heading{right:3%;width:40%;bottom:27%}.game-frame[data-stage=perch] .scene-heading h1{font-size:18px}.game-frame[data-stage=perch] .success-panel{right:3%;padding:17px;bottom:18%}}
@media(max-width:640px){.scene-heading{top:14%}.scene-heading h1{font-size:15px;letter-spacing:-.9px}.scene-heading>p:last-child{font-size:20px;max-width:330px;line-height:1.13}.scene-heading .eyebrow{margin-bottom:10px}.typing-dock{left:5%;right:5%;bottom:20px}.typing-dock>p{font-size:19px;line-height:1.13}.typing-hint{font-size:18px}.mobile-entry{margin-top:9px}.footer{height:46px}.footer>span:last-child{display:none}.journey{width:100%;justify-content:space-around;gap:5px;font-size:14px;letter-spacing:0}.journey button{gap:4px;min-height:40px;padding:6px 0}.journey button:before{width:5px;height:5px}.success-panel h2{font-size:16px}.game-frame[data-stage]:not([data-stage=egg]) .success-panel{width:90%;max-width:90%;top:13%;padding:18px 20px}.success-panel>p:not(.eyebrow){font-size:20px}.success-panel .pixel-button{font-size:9px;padding:11px 13px}.success-panel .eyebrow{font-size:7px}.success-panel .next-chapter{font-size:15px}.game-frame[data-stage=egg] .success-panel{width:90%;max-width:90%}.game-frame[data-stage=perch] .scene-heading{left:5%;right:5%;width:auto;bottom:30%;top:auto;text-align:center}.game-frame[data-stage=perch] .scene-heading>p:last-child{margin-right:auto;font-size:20px}.game-frame[data-stage=perch] .scene-heading h1{font-size:16px}.game-frame[data-stage=perch] .success-panel{left:5%;right:5%;bottom:14%;top:auto!important;max-width:90%;width:90%;padding:18px!important}.game-frame[data-stage=perch] .success-panel h2{font-size:15px}.game-frame[data-stage=perch] .success-panel>p:not(.eyebrow){font-size:20px}.game-frame[data-stage=perch] .results{font-size:15px}.progress-panel{width:143px}.chapter-name{max-width:250px}dialog{max-height:calc(100dvh - 55px);overflow:auto}}
@media(max-height:720px) and (min-width:641px){.scene-heading{top:5%}.scene-heading>p:last-child{font-size:21px;max-width:600px}.game-frame[data-stage]:not([data-stage=egg]) .success-panel{top:5%;padding:18px 24px}.success-panel>p:not(.eyebrow){font-size:21px}.success-panel h2{font-size:18px}.success-panel .eyebrow{margin-bottom:9px;font-size:8px}.game-frame[data-stage=perch] .success-panel{top:auto;bottom:14%;padding:17px 21px}.typing-dock{bottom:14px}.footer{height:44px}}
@media(prefers-reduced-motion:reduce){.artboard,.pip{transition:none!important}.pip-standing,.distant-bird{animation:none!important}.action-flap .pip-wings,.action-flight .pip-wings{opacity:1}.action-flap .pip-standing,.action-flight .pip-standing{opacity:0}}
.game-frame[data-stage]:not([data-stage=egg]) .chick-landscape{display:none}
/* Keep the ending below the perch, with a final view of the whole meadow. */
#game[data-stage=perch] #success-panel{top:auto;bottom:15%;left:auto;right:4%;width:430px;max-width:46%;height:auto;padding:21px 23px}
#game.chapter-finished #success-panel{left:3%;right:auto;bottom:7%;width:395px;max-width:43%}
.scene:before{content:'';position:absolute;inset:0;background:center/cover url('./assets/climbing-tree.png');filter:blur(8px) brightness(.4);opacity:0;transition:opacity 1.2s}
.chapter-finished .scene:before{opacity:1}.chapter-finished .artboard{transition:width 1.2s ease,height 1.2s ease,transform 1.2s ease}.chapter-finished .pip{transition:width 1.2s ease}.distant-bird{width:36px;height:15px}
@media(max-width:640px){#game[data-stage=perch] #success-panel,#game.chapter-finished #success-panel{left:5%;right:5%;bottom:12%;top:auto;width:90%;max-width:90%;padding:18px}#game.chapter-finished #success-panel{bottom:5%}.chapter-finished .scene:before{filter:blur(8px) brightness(.3)}}

/* Pip's second chapter: the branches give way to open sky. */
.pip-adult{opacity:0;transition:opacity .65s ease}
.pip.fledgling{transform:translate(-54%,-91.6%)}
.pip.fledgling .pip-visual{transform-origin:54% 91.6%}
.pip.fledgling .pip-shadow{top:90%;left:39%;width:34%}
.pip.flying{transform:translate(-50%,-50%)}
.pip.flying .pip-shadow,.pip.flying .pip-standing{display:none}
.pip.flying .pip-visual{transform-origin:50% 50%}
.pip.flying .pip-wings{opacity:1;animation:air-drift 3s ease-in-out infinite;transition:opacity .65s}
.pip.adult .pip-wings{opacity:0;animation:none}
.pip.adult .pip-adult{opacity:1;animation:air-drift 3.5s ease-in-out infinite}
.pip.into-sunset .pip-visual{scale:.25;opacity:.8;transition:scale 1.5s ease-in-out,opacity 1.5s}
.pip.young-hawk:not(.flying) .pip-standing{filter:saturate(.91)}
.action-run{animation:pip-run var(--action-duration) steps(8,end)}
.action-balance{animation:pip-balance var(--action-duration) ease-in-out}
.action-catch{animation:pip-peck var(--action-duration) ease-in-out}
.action-grow{animation:pip-grow var(--action-duration) ease-in-out}
.action-leap{animation:brave-leap var(--action-duration) ease-in-out}
.action-fall{animation:first-fall var(--action-duration) ease-out}
.action-wingbeat{animation:wingbeat var(--action-duration) ease-in-out}
.action-lift,.action-transform{animation:catch-wind var(--action-duration) ease-out}
.action-bank{animation:flight-bank var(--action-duration) ease-in-out}
.action-swoop{animation:flight-swoop var(--action-duration) ease-in-out}
.action-weave{animation:flight-weave var(--action-duration) ease-in-out}
.action-soar,.action-glide{animation:flight-glide var(--action-duration) ease-in-out}
.lunch-bug{width:16px;height:12px;background:#cf8d40;box-shadow:-3px 1px #24483d,3px 1px #24483d,0 3px #24483d;animation:bug-wiggle 1.1s steps(3,end) infinite}
.scene:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#fff3dc;transition:opacity .4s}
.through-cloud .scene:after{opacity:.72}
.scene:before{background-image:var(--ending-art,url('./assets/climbing-tree.png'))}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading{left:auto;right:4%;top:auto;bottom:22%;width:42%;text-align:right}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading h1{font-size:22px;line-height:1.5}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading .eyebrow{font-size:7px;letter-spacing:.7px;margin-bottom:12px}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading>p:last-child{font-size:21px;max-width:480px;margin-right:0;line-height:1.18}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .progress-panel{width:200px}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel{top:auto;bottom:9%;left:4%;right:auto;transform:none;width:455px;max-width:45%;padding:23px}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel h2{font-size:18px}
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']).chapter-finished #success-panel{bottom:7%}
#game.chapter-finished #continue-stage:not([hidden]) + #play-again{display:block;margin:14px auto 0;padding:4px;background:none;border:0;box-shadow:none;color:#506852;font-size:9px;text-decoration:underline;text-underline-offset:5px}
#chapters-dialog{width:590px;max-height:calc(100dvh - 48px);overflow:auto}
#chapters-dialog h2{font-size:17px;margin-bottom:10px}
.chapter-invitation{margin:0 0 22px;color:#766547;font-size:22px}
.chapter-card{display:flex;align-items:center;gap:15px;width:100%;padding:20px 16px;text-align:left;background:#f2e4ba;color:#354f3e;border:2px solid #b49b67;box-shadow:inset 0 3px #fff1ce,3px 3px #41352f22;margin:12px 0}
.chapter-card:hover{background:#e4e9bb;border-color:#5a7858}
.chapter-card:disabled{opacity:.5}
.chapter-card-number{font:20px var(--pixel);color:#a88955}
.chapter-card>span:nth-child(2){flex:1}
.chapter-card strong{display:block;font:10px/1.8 var(--pixel);color:#304d3d}
.chapter-card small{display:block;font:19px/1.1 var(--body);margin:7px 0;color:#72674e}
.chapter-card em{font:16px var(--body);font-style:normal;color:#7c714f}
#chapter-load-status{font-size:20px;min-height:24px;margin:15px 0 0;color:#395f4d}
@keyframes pip-run{20%,60%{transform:translateY(-8px) rotate(3deg)}40%,80%{transform:translateY(0) rotate(-3deg)}}
@keyframes pip-balance{25%{transform:rotate(-9deg)}60%{transform:rotate(8deg)}85%{transform:rotate(-3deg)}}
@keyframes pip-grow{50%{filter:brightness(1.3);transform:translateY(-7px)}}
@keyframes brave-leap{35%{transform:translateY(-60px) rotate(-15deg)}75%{transform:rotate(20deg)}}
@keyframes first-fall{0%{transform:rotate(22deg)}45%{transform:rotate(-13deg) scaleY(.86)}80%{transform:rotate(7deg)}}
@keyframes wingbeat{25%,65%{transform:translateY(-10px) scaleY(.84) rotate(-3deg)}45%,90%{transform:scaleY(1.02)}}
@keyframes catch-wind{30%{transform:rotate(-14deg) scaleY(.87)}65%{transform:translateY(-20px) rotate(-6deg)}}
@keyframes flight-bank{40%{transform:rotate(-28deg) scaleY(.82)}}
@keyframes flight-swoop{35%{transform:rotate(24deg)}75%{transform:rotate(-12deg)}}
@keyframes flight-weave{30%{transform:rotate(-23deg) translateY(-25px)}70%{transform:rotate(20deg) translateY(15px)}}
@keyframes flight-glide{50%{transform:translateY(-12px) rotate(-5deg)}}
@keyframes air-drift{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes bug-wiggle{50%{translate:7px -2px}}
@media(max-width:1000px){#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading{width:44%;right:3%}#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading h1{font-size:18px}#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .progress-panel{width:170px}}
@media(max-width:640px){
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading{left:5%;right:5%;width:auto;bottom:27%;text-align:center}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading h1{font-size:16px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading .eyebrow{font-size:6px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading>p:last-child{font-size:20px;margin-right:auto;line-height:1.1}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .progress-panel{width:155px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel,#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']).chapter-finished #success-panel{left:5%;right:5%;width:90%;max-width:90%;bottom:6%;top:auto;padding:18px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel h2{font-size:16px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4'])
  .chapter-card{padding:14px 11px;gap:11px}.chapter-card-number{font-size:16px}.chapter-card strong{font-size:9px}.chapter-card small{font-size:18px}
  #chapters-dialog{padding:28px 21px}#chapters-dialog h2{font-size:14px}
  .journey{font-size:13px;gap:4px}
}
@media(max-width:380px){.brand{font-size:10px}.brand-sub{font-size:9px;letter-spacing:.8px}.brand-egg{width:15px;height:22px}.controls{gap:4px}.icon-button{width:28px;height:31px}.topbar{gap:7px}.journey{font-size:12px}}
@media(prefers-reduced-motion:reduce){.pip.flying .pip-wings,.pip.adult .pip-adult,.lunch-bug{animation:none!important}.pip.into-sunset .pip-visual{transition:none}}
/* Once typing begins, the story continues in the footer and leaves Pip's flight unobstructed. */
#game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']).started .scene-heading{opacity:0}

/* Pebble's Antarctic adventure. The scenery stays visible around the typing cards. */
#game[data-chapter='3']{background:#30516c}
#game[data-chapter='3'] .scene-shade{background:linear-gradient(180deg,#30446218,transparent 45%,transparent 70%,#102f58c9)}
#game[data-chapter='3'] .progress-panel{background:#193a55ec;border-color:#b7d6d4a0}
#game[data-chapter='3'] .scene-heading{color:#29394d;text-shadow:2px 0 #fff2d6,-2px 0 #fff2d6,0 2px #fff2d6,0 -2px #fff2d6}
#game[data-chapter='3'] .nest-glow{left:41.35%;top:55%;width:21%;display:block}
#game[data-chapter='3'] .egg-callout{left:41.35%;top:64%;color:#304b70;text-shadow:1px 1px #fff2d6}
.polar-egg{position:absolute;z-index:3;left:41.35%;top:59.5%;width:14%;aspect-ratio:1;transform:translate(-50%,-87%);pointer-events:none}
.polar-egg>img{width:100%;height:100%;image-rendering:pixelated}
.polar-egg>svg{position:absolute;left:25%;top:13%;width:50%;height:71%;filter:drop-shadow(2px 1px #fff8de)}
.polar-egg .crack-branch{stroke:#506079;stroke-width:2.5}
.hatching .polar-egg{animation:shell-shiver .15s steps(2,end) infinite}
.pip.penguin{transform:translate(-54%,-92%)}
.pip.penguin .pip-visual{transform-origin:54% 92%}
.pip.penguin-grown{transform:translate(-54%,-96%)}
.pip.penguin-grown .pip-visual{transform-origin:54% 96%}
.pip.penguin .pip-shadow{top:88%;left:32%;width:39%;background:#2a395e42}
.pip.penguin .pip-adult{opacity:0}
.pip.penguin-grown .pip-standing{opacity:0;animation:none}
.pip.penguin-grown .pip-adult{opacity:1;animation:pip-breathe 2.4s steps(4,end) infinite}
.pip.penguin.swimming,.pip.penguin.sliding{transform:translate(-50%,-50%)}
.pip.penguin.swimming .pip-visual,.pip.penguin.sliding .pip-visual{transform-origin:center}
.pip.penguin.swimming .pip-standing,.pip.penguin.swimming .pip-adult,.pip.penguin.sliding .pip-standing,.pip.penguin.sliding .pip-adult{opacity:0;animation:none}
.pip.penguin.swimming .pip-wings,.pip.penguin.sliding .pip-wings{opacity:1;animation:penguin-drift 3s ease-in-out infinite}
.pip.penguin.swimming .pip-shadow{display:none}
.pip.penguin.sliding .pip-shadow{top:64%;left:24%;width:57%}
.polar-fish,.polar-seal,.penguin-friend{position:absolute;image-rendering:pixelated;pointer-events:none}
.polar-fish{left:66%;top:63%;width:9%;transition:translate .8s,rotate .8s}
.polar-fish.caught{translate:-22px -65px;rotate:-22deg}
.polar-seal{left:57%;top:23%;width:29%;opacity:.8;transition:translate 1s,opacity .9s;filter:drop-shadow(0 6px 6px #0d526f30)}
.polar-seal.passing{translate:-85px 12px}
.polar-seal.passed{translate:-230px -40px;opacity:.12}
.penguin-friend{transform:translate(-54%,-96%) scaleX(var(--friend-flip));transform-origin:50% 90%}
.friends-cheer .penguin-friend{animation:friend-wave 1.6s ease-in-out infinite}
.friends-cheer .penguin-friend:nth-child(2n){animation-delay:.45s}
.action-waddle{animation:penguin-waddle var(--action-duration) steps(6,end)}
.action-snow-slide,.action-ice-slide,.action-push{animation:penguin-slide var(--action-duration) ease-in-out}
.action-dip,.action-fish-catch,.action-gulp{animation:pip-peck var(--action-duration) ease-in-out}
.action-molt{animation:pip-grow var(--action-duration) ease-in-out}
.action-breathe{animation:pip-balance var(--action-duration) ease-in-out}
.action-dive{animation:penguin-dive var(--action-duration) ease-in-out}
.action-paddle,.action-swim,.action-current{animation:penguin-paddle var(--action-duration) ease-in-out}
.action-turn,.action-duck{animation:flight-swoop var(--action-duration) ease-in-out}
.action-surface{animation:catch-wind var(--action-duration) ease-in-out}
.action-friends{animation:pip-hop-small var(--action-duration) ease-in-out}
.world-journey{position:absolute;z-index:20;inset:0;background:radial-gradient(ellipse at 50% 42%,#294977,#121f3b 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;overflow:hidden;color:#fff0d0}
.world-journey:before{content:'';position:absolute;width:3px;height:3px;left:18%;top:20%;background:#fff3c9;box-shadow:230px -30px #f2b880,-70px 210px #d8e5ff,550px 140px #f2b880,480px -45px #fff3c9,780px 60px #d8e5ff,130px 390px #d8e5ff}
.world-journey .eyebrow{font-size:8px;position:relative;z-index:2}
.globe-window{width:min(260px,36vh);aspect-ratio:1;position:relative;margin:10px 0 18px}
.journey-globe{width:100%;height:100%;filter:drop-shadow(0 0 25px #7ad3da55);transform-origin:48% 88%}
.journey-zoom .journey-globe{animation:world-to-ice 4.2s ease-in-out both}
.world-journey h2{font:clamp(13px,2vw,21px)/1.6 var(--pixel);position:relative;z-index:2;margin:5px 0}
.world-journey>p:not(.eyebrow){font-size:23px;max-width:330px;position:relative;z-index:2}
.world-journey .pixel-button{position:relative;z-index:2;font-size:9px}
#game[data-phase=journey] .scene-heading,#game[data-phase=journey] .typing-dock{visibility:hidden}
@keyframes world-to-ice{0%{scale:.65;rotate:-12deg;opacity:0}25%,66%{scale:1;rotate:0deg;opacity:1}100%{scale:5;translate:0 30%;opacity:0}}
@keyframes penguin-waddle{20%,60%{transform:rotate(-8deg) translateY(-7px)}40%,80%{transform:rotate(8deg)}}
@keyframes penguin-slide{25%{transform:rotate(8deg)}75%{transform:rotate(14deg) translateY(7px)}}
@keyframes penguin-dive{40%{transform:rotate(40deg)}80%{transform:rotate(12deg)}}
@keyframes penguin-paddle{25%,65%{transform:translateY(-9px) rotate(-4deg)}45%,85%{transform:translateY(3px) rotate(3deg)}}
@keyframes penguin-drift{50%{transform:translateY(-5px)}}
@keyframes friend-wave{50%{translate:0 -8px}}
@media(max-width:640px){.world-journey>p:not(.eyebrow){font-size:21px}.world-journey .eyebrow{font-size:6px}.globe-window{width:190px}#game[data-chapter='3'] .scene-heading{bottom:29%}}
@media(prefers-reduced-motion:reduce){.penguin-friend,.journey-globe,.pip.penguin .pip-adult,.pip.penguin .pip-wings{animation:none!important}.polar-seal,.polar-fish{transition:none}}
#game[data-chapter='3'][data-stage='snow-egg'] #success-panel{left:auto;right:4%}
.action-snow-slide{animation:chick-belly-slide var(--action-duration) ease-in-out}
@keyframes chick-belly-slide{25%{transform:rotate(48deg) translateY(7px)}65%{transform:rotate(64deg) translateY(7px)}100%{transform:rotate(0)}}
@media(max-width:640px){#game[data-chapter='3'][data-stage='snow-egg'] #success-panel{left:5%;right:5%}}
@media(max-height:500px) and (min-width:641px){
  .app{min-height:100dvh}.topbar{height:52px}.footer{height:32px}.brand{font-size:12px}.brand-sub{margin-top:6px;font-size:10px}.brand-egg{width:18px;height:24px}.chapter-name{font-size:16px;margin-top:5px}.controls .icon-button{width:30px;height:30px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading{bottom:28%;width:43%}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading h1{font-size:14px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading>p:last-child{font-size:17px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) .scene-heading .eyebrow{font-size:6px;margin-bottom:7px}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel{padding:12px 16px;bottom:6%;width:390px;max-width:49%}
  #game:is([data-chapter='2'],[data-chapter='3'],[data-chapter='4']) #success-panel h2{font-size:13px}.success-panel>p:not(.eyebrow){font-size:17px}.success-panel .pixel-button{padding:8px 10px;font-size:8px}.success-panel .next-chapter{font-size:13px;margin-top:7px}
  .typing-dock{bottom:10px}.typing-dock>p{font-size:17px}.typing-hint{font-size:18px}.word{font-size:32px;min-width:90px;padding:8px 14px}.progress-panel{top:14px;left:14px;padding:7px 9px}
  .mobile-entry{margin-top:4px}.mobile-entry input{padding:4px;font-size:18px;width:175px}.globe-window{width:100px;margin:4px}.world-journey>p:not(.eyebrow){font-size:19px;margin:7px}.world-journey .eyebrow{margin:0}
}
@media(max-width:640px){
  #game[data-chapter='3'].story-mode:not(.chapter-finished):not([data-stage='ice-current']) .artboard{top:28%!important}
  #game[data-chapter='3'].story-mode .scene:before{opacity:1;filter:blur(8px) brightness(.45)}
}

/* Rio discovers a rainforest full of color, fruit, and friends. */
#game[data-chapter='4'] .nest-glow{left:28.5%;top:48%;width:21%;display:block}
#game[data-chapter='4'] .polar-egg{left:28.5%;top:53.5%;width:13%}
#game[data-chapter='4'] .egg-callout{left:28.5%;top:59.5%}
#game[data-chapter='4'][data-stage='jungle-egg'] #success-panel{left:auto;right:4%}
#game[data-chapter='4'] .progress-panel{background:#263f31eb;border-color:#d5cf8799}
.pip.toucan{transform:translate(-54%,-92.6%)}
.pip.toucan .pip-visual{transform-origin:54% 92.6%}
.pip.toucan .pip-shadow{top:89%;left:31%;width:37%}
.pip.toucan-grown{transform:translate(-52.5%,-94.9%)}
.pip.toucan-grown .pip-visual{transform-origin:52.5% 94.9%}
.pip.toucan-grown .pip-standing{opacity:0;animation:none}
.pip.toucan-grown .pip-adult{opacity:1;animation:pip-breathe 2.4s steps(4,end) infinite}
.pip.toucan-flying{transform:translate(-50%,-50%)}
.pip.toucan-flying .pip-visual{transform-origin:center}
.pip.toucan-flying .pip-standing,.pip.toucan-flying .pip-adult{opacity:0;animation:none}
.pip.toucan-flying .pip-shadow{display:none}
.pip.toucan-flying .pip-wings{opacity:1;animation:air-drift 3s ease-in-out infinite}
.jungle-berry{position:absolute;width:6.8%;transform:translate(-50%,-50%);image-rendering:pixelated;transition:translate .8s ease-in-out,rotate .8s,scale .8s}
.berry-plucked{translate:35px 40px;rotate:-20deg}
.berry-high{translate:0 calc(-1 * var(--berry-rise,175px));rotate:160deg}
.berry-caught{translate:25px 5px;scale:.8;rotate:20deg}
.berry-again{animation:berry-arc 1.4s ease-in-out both}
.reunion-berry{left:85%;top:49%;width:5.8%}
.berry-shared{translate:115px 25px;rotate:35deg}
.toucan-friend{position:absolute;image-rendering:pixelated;transform:translate(-52.5%,-94.9%) scaleX(var(--friend-flip));transform-origin:52.5% 94.9%}
.jungle-singing .toucan-friend{animation:friend-wave 1.6s ease-in-out infinite}
.jungle-singing .toucan-friend:nth-child(2n){animation-delay:.4s}
.jungle-call{position:absolute;font:45px var(--body);color:#ffec99;text-shadow:3px 3px #37513d;animation:jungle-note 1.4s ease-out forwards}
.action-reach{animation:toucan-reach var(--action-duration) ease-in-out}
.action-pluck,.action-taste,.action-berry-catch{animation:pip-peck var(--action-duration) ease-in-out}
.action-toucan-grow{animation:pip-grow var(--action-duration) ease-in-out}
.action-toss,.action-again{animation:toucan-toss var(--action-duration) ease-in-out}
.action-toucan-leap{animation:brave-leap var(--action-duration) ease-in-out}
.action-toucan-flap{animation:wingbeat var(--action-duration) ease-in-out}
.action-toucan-glide,.action-rainbow{animation:flight-glide var(--action-duration) ease-in-out}
.action-land{animation:toucan-land var(--action-duration) ease-in-out}
.action-listen,.action-answer{animation:pip-look var(--action-duration) ease-in-out}
.action-call,.action-chorus{animation:toucan-call var(--action-duration) ease-in-out}
.action-share{animation:pip-peck var(--action-duration) ease-in-out}
.through-rainbow .scene:after{opacity:.38;background:linear-gradient(115deg,transparent 18%,#ffb48955 28%,#ffe68b77 36%,#b9e7ad66 44%,#8cddf266 52%,#c9bcf555 60%,transparent 70%)}
.jungle-journey .journey-globe{transform-origin:44% 61%}
@keyframes berry-arc{0%,100%{translate:25px 5px;rotate:20deg}50%{translate:calc(-12px * var(--art-scale,1)) calc(-1 * var(--berry-rise,175px));rotate:220deg}}
@keyframes toucan-reach{45%{transform:translateY(-20px) rotate(-8deg)}}
@keyframes toucan-toss{28%{transform:rotate(-14deg)}65%{transform:rotate(5deg)}}
@keyframes toucan-land{35%{transform:rotate(8deg)}75%{transform:translateY(5px) scaleY(.92)}}
@keyframes toucan-call{25%,65%{transform:rotate(-7deg) translateY(-7px)}45%,85%{transform:rotate(2deg)}}
@keyframes jungle-note{from{opacity:1;translate:0 0}to{opacity:0;translate:35px -70px}}
@media(max-width:640px){
  #game[data-chapter='4'][data-stage='jungle-egg'] #success-panel{left:5%;right:5%}
  #game[data-chapter='4'].story-mode:not(.chapter-finished) .artboard{top:28%!important}
  #game[data-chapter='4'].story-mode .scene:before{opacity:1;filter:blur(8px) brightness(.45)}
  #game[data-chapter='4'] .scene-heading{bottom:29%}
}
@media(prefers-reduced-motion:reduce){.jungle-berry{transition:none}.jungle-call{display:none}.pip.toucan .pip-adult,.pip.toucan .pip-wings,.toucan-friend{animation:none!important}}

.toucan-friend{opacity:0;translate:10px -20px;transition:opacity .7s,translate .7s}
.friends-arrived .toucan-friend{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.toucan-friend{transition:none}}

/* Arrow navigation settles immediately, even when an earlier action is moving. */
.word-seek .scene,.word-seek .scene:before,.word-seek .scene:after,.word-seek .pip,.word-seek .pip-visual,.word-seek .artboard,.word-seek .chick-landscape,.word-seek .world-details *,.word-seek .scene-heading,.word-seek .typing-dock,.word-seek .success-panel,.word-seek .word{transition:none!important;animation:none!important}

.word-seek .pip-visual>*{transition:none!important}

/* The story lives beside the bird, without stopping the next word. */
.game-frame .scene-heading{display:none}
.bird-speech{position:absolute;z-index:6;width:max-content;max-width:min(245px,calc(100% - 32px));padding:12px 15px 14px;background:#fff1cf;color:#44333b;border:3px solid #66503f;box-shadow:0 0 0 2px #ffe2a2,4px 5px #1d363755;font:24px/1.05 var(--body);text-align:center;pointer-events:none;image-rendering:pixelated}
.bird-speech:after{content:'';position:absolute;top:calc(100% - 3px);left:var(--tail-x,22px);width:13px;height:13px;background:#fff1cf;border-right:3px solid #66503f;border-bottom:3px solid #66503f;transform:rotate(45deg)}
.pip.eating{transition:left .45s ease-out,top .45s ease-out}
.pip.eating .pip-standing{animation:none}
.pip.eating .pip-petal{display:none}
@media(max-width:640px){.bird-speech{max-width:210px;padding:10px 12px 12px;font-size:22px}}

.game-frame.hatching .typing-dock,.game-frame.revealed:not(.story-mode) .typing-dock{opacity:1}

/* A short page turn makes the birds' growing-up moments feel earned. */
.time-interlude{position:absolute;inset:0;z-index:12;display:grid;place-items:center;pointer-events:none;text-align:center;color:#fff0cd;background:linear-gradient(145deg,#1d3538f7,#263d35f7);box-shadow:inset 0 0 0 9px #f6d99b24,inset 0 0 0 12px #142c2c88}
.time-interlude>div{padding:30px 16px}
.time-interlude p{font:clamp(16px,2.4vw,29px)/1.9 var(--pixel);letter-spacing:-.5px;margin:18px 0}
.time-spark{display:block;color:#efc77f;font-size:34px;margin-bottom:30px}
.time-interlude .time-then{font:30px/1.4 var(--body);letter-spacing:2px;color:#d6dcb7}
.time-passing .time-interlude{animation:time-card-arrive .25s ease-out both}
@keyframes time-card-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.time-passing .time-interlude,.time-passing .time-then{animation:none}}