@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');
:root{font-family:Heebo,Arial,sans-serif;color:#19336a;background:#faf6e9;font-synthesis:none;--ink:#19336a;--paper:#fffaf0;--teal:#6fbeb4;--pink:#e889ac;--gold:#f3bc45}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:2px solid var(--ink);background:#fffaf0;border-radius:8px 12px 7px 10px;padding:9px 16px;box-shadow:2px 3px 0 #19336a;transition:transform .15s,background .15s}button:hover{background:#fce4a3}button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}button:focus-visible,a:focus-visible{outline:3px solid #df8a24;outline-offset:4px}button:disabled{cursor:default}
#app{height:100dvh;min-height:340px;position:relative;overflow:hidden;background-color:#faf6e9;background-image:linear-gradient(#6897b925 1px,transparent 1px),linear-gradient(90deg,#6897b925 1px,transparent 1px),url('assets/notebook-coast.png');background-size:24px 24px,24px 24px,100% 100%;background-position:0 0,0 0,center bottom;background-repeat:repeat,repeat,no-repeat}
.binding{position:absolute;inset:0 auto 0 0;width:30px;border-right:1px solid #7293bd4d;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,#8f86755c 0 5px,#fdf8ed 6px 8px,transparent 9px) 3px 6px/22px 53px repeat-y}
header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:14px max(4%,env(safe-area-inset-left));padding-left:max(52px,5%);position:relative;z-index:5;direction:ltr;gap:18px}
.brand{font-family:'Segoe Print','Comic Sans MS',cursive;font-size:35px;line-height:1;letter-spacing:-2px;text-decoration:none;color:var(--ink);font-weight:900;position:relative;transform:rotate(-4deg);white-space:nowrap;text-shadow:.8px .8px 0 #19336a}
.brand:after{content:'';position:absolute;left:0;right:3px;bottom:-7px;height:5px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(-2deg)}.brand b{color:var(--gold);-webkit-text-stroke:1.7px var(--ink);font-size:1.32em}.brand span{font:600 10px Heebo,Arial;display:block;letter-spacing:1.3px;direction:rtl;text-shadow:none;margin-top:7px}.level-info{text-align:center;direction:rtl;align-self:flex-start;padding-top:7px}.level-info span{display:block;font-size:11px;color:#52658b}.level-info strong{font-size:19px;font-weight:800}nav{display:flex;gap:9px;direction:rtl}nav button{padding:7px 12px;font-weight:700;background:#fffaf0e8;min-width:40px}nav button:nth-child(2){transform:rotate(3deg)}nav button:nth-child(3){transform:rotate(-3deg)}
#status{position:absolute;left:19%;top:117px;transform:translateX(-50%);max-width:29%;z-index:4;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:5px 10px;background:#fffaf0bd;border-radius:5px;white-space:nowrap;color:#536685}#statusText{overflow:hidden;text-overflow:ellipsis}.dot{width:6px;height:6px;border-radius:50%;background:#3c8d7a;flex-shrink:0}.danger .dot{background:#c6555c;animation:pulse .6s infinite}#status.danger{color:#a33b48;background:#ffede9dc}
#scene{position:absolute;inset:159px 0 116px;direction:ltr;isolation:isolate}.stars{position:absolute;right:8%;top:-35px;font-family:'Segoe Print',cursive;font-size:35px;color:#efb942;-webkit-text-stroke:1px var(--ink);transform:rotate(13deg);pointer-events:none}.stars:after{content:'✧';position:absolute;left:-38px;top:70px;font-size:20px}.hill,.moon,.ground{display:none}
#beam{position:absolute;width:62%;height:19px;left:19%;top:32%;border:3px solid var(--ink);border-radius:35% 12% 35% 12%;background:repeating-linear-gradient(26deg,#ffffff38 0 1px,transparent 1px 3px),#78bdb4;box-shadow:0 2px 0 #19336a50;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:2}
#beam:before,#beam:after{content:'';position:absolute;top:-10px;width:30px;height:30px;border:3px solid var(--ink);border-radius:50%;background:repeating-linear-gradient(45deg,#ffffff45 0 1px,transparent 1px 3px),#eeb552;box-shadow:inset 0 0 0 4px #76b6af,inset 0 0 0 6px var(--ink)}#beam:before{left:-14px}#beam:after{right:-14px}.hinge{position:absolute;top:-6px;left:calc(50% - 15px);width:30px;height:30px;border:3px solid var(--ink);border-radius:50%;background:#efbd64;box-shadow:inset 0 0 0 4px #71b4ad;z-index:4}
.stand{position:absolute;left:calc(50% - 92px);top:32%;bottom:1%;width:184px;z-index:1;pointer-events:none}.stand>svg{width:100%;height:100%;overflow:visible}.stand>div{display:none}
#mother{position:absolute;bottom:10px;left:calc(50% - 67px);width:134px;height:134px;transform-origin:50% 80%;will-change:transform;z-index:3}.mother-art{display:block;width:100%;height:100%;transform-origin:50% 95%;animation:breathe 3.6s ease-in-out infinite}.sketch-sprite{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}#mother[data-mood='panic'] .mother-art{animation:panic-flutter .14s ease-in-out infinite alternate}#mother[data-mood='recover'] .mother-art{animation:preen .42s ease-in-out 3}#mother[data-mood='panic']:after{content:'!';position:absolute;left:88%;top:-3px;font:900 36px 'Segoe Print',cursive;transform:rotate(18deg);color:var(--ink)}
.pan-wrap{position:absolute;top:calc(32% + 5px);width:29%;height:62%;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:3}#leftWrap{left:4.5%}#rightWrap{right:4.5%}.ropes{position:absolute;inset:0 2% 25%;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 100L50 0L99 100M3 100L50.8 1L98 98' fill='none' stroke='%2319336a' stroke-width='.75'/%3E%3C/svg%3E") center/100% 100% no-repeat}.pan{position:absolute;bottom:23%;width:100%;height:42px;pointer-events:none}.pan>svg{width:100%;height:100%;overflow:visible}.items{position:absolute;bottom:calc(23% + 35px);left:0;width:100%;min-height:95px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;padding:0;z-index:3;border-radius:12px;transition:background .2s;overflow:visible}.items.drop-target{background:#f4d26b55;outline:3px dashed #d3902a;box-shadow:0 0 22px #ffe080}.pile-row{display:flex;justify-content:center;align-items:flex-end;flex-shrink:0;gap:2px;width:max-content;max-width:none;position:relative}
.token{width:clamp(36px,4.6vw,65px);height:clamp(49px,6.3vw,88px);position:relative;padding:0;border:0;background:none!important;box-shadow:none!important;touch-action:none;user-select:none;cursor:grab;flex-shrink:0;filter:none;border-radius:9px;transition:transform .15s}.token:hover{transform:translateY(-3px) rotate(-3deg)}.token:active{cursor:grabbing}.token svg{width:100%;height:100%;pointer-events:none}.chick-art{display:block;width:100%;height:100%;transform-origin:50% 95%}.chick-art>.sprite-flight{display:none}.items .token[data-type='1']:nth-child(3n) .chick-art{transform:rotate(4deg)}.items .token[data-type='0'],.items .token.fraction-egg{width:clamp(57.8px,7.82vw,110.5px);height:clamp(74.8px,9.69vw,136px)}
.items .token[data-type='2']{height:clamp(83px,9vw,127px);overflow:visible;transform-origin:50% 100%;animation:balloon-tug 2.6s ease-in-out infinite}.items .token[data-type='2']>svg{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:401/376;z-index:1}.items .token[data-type='2']:before{content:'';position:absolute;top:37%;bottom:calc(-1 * var(--tether-extension,0px));left:calc(50% - 1px);width:1.5px;background:var(--ink)}.items .token[data-type='2']:after{content:'';position:absolute;bottom:calc(-1 * var(--tether-extension,0px));left:calc(50% - 4px);width:8px;height:4px;border:1.5px solid var(--ink);border-radius:50%}
.items .token.negative-egg{height:calc(clamp(74.8px,9.69vw,136px) + 24px);overflow:visible}.negative-egg .egg-art{position:absolute;top:0;left:0;width:100%;height:calc(100% - 24px);z-index:1}.egg-tether{position:absolute;left:calc(50% - 1px);top:calc(100% - 28px);bottom:calc(-1 * var(--tether-extension,0px));width:1.5px;background:var(--ink);pointer-events:none}.egg-tether:after{content:'';position:absolute;bottom:0;left:-4px;width:8px;height:3px;border:1px solid var(--ink);border-radius:50%}
.side-control{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);z-index:6}.math-button{background:#f5cf75;padding:5px 20px;font-size:16px;font-weight:800;white-space:nowrap;transform:rotate(-2deg)}.roller{display:flex;gap:6px;background:#fffaf0;padding:8px;border:2px solid var(--ink);border-radius:10px 5px 12px 6px;max-width:min(290px,34vw);overflow:auto;direction:ltr;box-shadow:3px 4px 0 #19336a35}.roller button{padding:6px 9px;white-space:nowrap;box-shadow:1px 2px 0 var(--ink)}.roller button:disabled{opacity:.25;cursor:not-allowed}
footer{position:absolute;bottom:0;left:0;right:0;height:104px;direction:ltr;z-index:3;pointer-events:none}.reserve{display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto}.reserve>span{font-size:10px;font-weight:700;color:#536685;direction:rtl}.reserve>div{display:flex;justify-content:center;min-height:30px}.reserve .token{width:39px;height:52px;margin:0 1px}.reserve .token:disabled{opacity:.7}#chickReserve{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:250px;min-height:70px}#chickStock{padding:0 14px 6px;position:relative;min-width:150px}#chickStock:after{content:'';position:absolute;left:0;right:0;bottom:0;height:14px;z-index:-1;border:2px solid var(--ink);border-radius:3px 6px 4px 2px;background:repeating-linear-gradient(2deg,#e8ba78 0 2px,#dfab6255 2px 4px);box-shadow:2px 3px 0 #19336a35}#chickStock:empty{min-height:18px}
#balloonReserve{position:fixed;left:50%;top:91px;transform:translateX(-50%);width:250px;min-height:68px;flex-direction:column-reverse}#balloonStock .token{width:42px;height:43px;margin:0 2px;animation:float-balloon 3s ease-in-out infinite}#balloonStock .token:nth-child(2n){animation-delay:-1.5s}#balloonStock{padding-bottom:12px}#balloonStock .token:after{content:'';position:absolute;left:50%;top:96%;height:11px;width:1px;background:var(--ink)}
.footer-center{position:absolute;left:max(5%,45px);bottom:24px;pointer-events:auto}.footer-center button{width:44px;height:40px;padding:0;font-size:29px;background:#fffaf0d9;transform:rotate(-5deg)}.footer-center>span,.footer-center>small,#hint{display:none}#eggStock{position:absolute;left:calc(100% + 10px);bottom:7px;display:flex;opacity:.6}#eggStock .token{width:22px;height:30px;margin:0 -2px}
.drag-ghost{position:fixed!important;pointer-events:none!important;z-index:100!important;width:76px!important;height:96px!important;transform:translate(-50%,-50%) rotate(-7deg)!important;filter:drop-shadow(3px 6px 2px #19336a33)!important}.drag-ghost .chick-art{position:relative;animation:bossy-drag .18s ease-in-out infinite alternate}.drag-ghost .chick-art>.sprite-chick{position:absolute;inset:0;animation:flap-down .2s steps(1) infinite}.drag-ghost .chick-art>.sprite-flight{display:block;position:absolute;inset:0;animation:flap-up .2s steps(1) infinite}.drag-ghost.negative-egg .egg-art{height:100%}.drag-ghost .egg-tether{display:none}.fly{position:fixed;pointer-events:none;z-index:20;transition:transform .45s,opacity .45s}.feedback{font-family:'Segoe Print',Georgia,serif;font-size:29px;font-weight:900;color:#bc426b;direction:ltr;pointer-events:none}.feedback.positive{color:#207c6e}.feedback.anchored{position:fixed;z-index:55;transform:translateX(-50%);text-shadow:1px 1px 0 #fffaf0,-1px -1px 0 #fffaf0,0 0 6px #fffaf0;animation:anchored-float 1s ease-out forwards}.confetti{position:absolute;width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,62% 34%,100% 38%,71% 62%,80% 100%,50% 77%,19% 100%,29% 62%,0 38%,38% 34%);animation:confetti 1.7s ease-out forwards;z-index:20;pointer-events:none}.shell-shard{position:fixed;pointer-events:none;z-index:25;animation:shell-fall 1s ease-in forwards}.shell-shard svg{width:100%;height:100%}.hatching{animation:hatch .13s infinite}.hatched{animation:chick-hop .65s cubic-bezier(.2,.8,.3,1) both}
dialog{color:var(--ink);background-color:#fffaf0;background-image:linear-gradient(#6897b91c 1px,transparent 1px),linear-gradient(90deg,#6897b91c 1px,transparent 1px);background-size:23px 23px;border:3px solid var(--ink);border-radius:13px 7px 17px 9px;padding:28px;width:min(600px,90vw);max-height:86dvh;text-align:center;box-shadow:6px 8px 0 #19336a4a,0 22px 70px #19336a26;overflow:auto}dialog::backdrop{background:#19336a50;backdrop-filter:blur(3px)}dialog h2{font-size:29px;margin:8px 0;font-weight:900}dialog p{font-size:14px;color:#52658b;line-height:1.8}dialog .eyebrow{font-size:12px;font-weight:700;color:#8c6121;letter-spacing:1px}dialog .primary{background:#f5cf75;font-weight:800;padding:11px 23px;margin:10px 5px}dialog .close{position:absolute;left:16px;top:14px;padding:2px 10px;box-shadow:none;border:0;background:none;font-size:25px}dialog .answer{font:bold italic 46px Georgia;color:var(--ink);direction:ltr;padding:14px;text-decoration:underline;text-decoration-color:#e9bd55;text-underline-offset:9px}dialog .level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}dialog .level-grid button{text-align:right;padding:12px;font-size:12px;background:#fffaf0}dialog .level-grid small{display:block;color:#59708d;font-size:10px}dialog .level-grid .current{background:#f8d77d}dialog .setting{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px dashed #19336a66;text-align:right}dialog select{background:#fffaf0;color:var(--ink);border:2px solid var(--ink);padding:7px;border-radius:6px;font:inherit}.welcome-art{width:122px;height:122px;margin:7px auto}.welcome-copy{margin:7px 0 2px!important;font-size:12px!important}#rotateHint{display:none}
#gestureGuide{position:fixed;inset:0;z-index:40;pointer-events:none;transition:opacity .18s}#gestureGuide>svg{width:100%;height:100%;overflow:visible}.guide-dim{fill:#19336a;opacity:.3}#sourceRing{fill:none;stroke:#fff3ba;stroke-width:3;filter:drop-shadow(0 0 5px #bd7b26);stroke-dasharray:5 4;animation:ring-turn 2s linear infinite}#guidePath{stroke:#fff2b7;fill:none;stroke-width:3;stroke-dasharray:7 7;filter:drop-shadow(1px 1px 1px #19336a)}#gestureDot{fill:#fffaf0;stroke:var(--ink);stroke-width:2;filter:drop-shadow(0 2px 3px #19336a55)}#gestureCore{fill:#eab84e}.token.highlight,.math-button.highlight,.roller button.highlight{animation:button-glow .8s ease-in-out infinite alternate!important;filter:drop-shadow(0 0 10px #ffc94c)!important}.math-button.highlight,.roller button.highlight{outline:3px solid #e8a42a;outline-offset:4px}
@keyframes breathe{50%{transform:scale(1.018,.99)}}@keyframes panic-flutter{to{transform:scale(1.03,.96) rotate(3deg)}}@keyframes preen{50%{transform:rotate(-3deg) scale(1.025,1)}}@keyframes bossy-drag{to{transform:rotate(7deg) translateY(-3px)}}@keyframes flap-up{0%,100%{opacity:1}50%{opacity:0}}@keyframes flap-down{0%,100%{opacity:0}50%{opacity:1}}@keyframes float-balloon{50%{transform:translateY(-4px) rotate(3deg)}}@keyframes balloon-tug{50%{transform:rotate(2deg)}}@keyframes pulse{50%{opacity:.4}}@keyframes button-glow{to{filter:drop-shadow(0 0 20px #ffcc5e)}}@keyframes ring-turn{to{stroke-dashoffset:-36}}@keyframes anchored-float{0%{opacity:1;transform:translate(-50%,0) scale(.8)}20%{transform:translate(-50%,-7px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50px) scale(.95)}}@keyframes shell-fall{to{transform:translate(var(--drift),180px) rotate(var(--spin));opacity:0}}@keyframes chick-hop{0%{opacity:0;transform:translateY(10px) scale(.25)}50%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes hatch{50%{transform:rotate(5deg)}}@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(500deg);opacity:0}}
@media(max-height:600px) and (orientation:landscape){
 #app{background-size:20px 20px,20px 20px,100% 100%}.binding{width:23px;background-size:20px 40px}header{height:55px;padding:6px max(4%,env(safe-area-inset-right));padding-left:max(38px,env(safe-area-inset-left));gap:8px}.brand{font-size:24px}.brand span{font-size:8px;margin-top:2px}.brand:after{bottom:-4px;height:3px}.level-info{padding-top:0}.level-info span{font-size:9px}.level-info strong{font-size:14px}nav{gap:7px}nav button{padding:4px 10px;font-size:13px;min-height:34px;min-width:35px}
 #status{top:69px;left:18%;font-size:10px;max-width:27%;padding:3px 6px}#scene{inset:112px 0 76px}#beam{height:13px;border-width:2px}#beam:before,#beam:after{width:23px;height:23px;top:-7px;border-width:2px}#beam:before{left:-11px}#beam:after{right:-11px}.hinge{width:24px;height:24px;top:-6px;left:calc(50% - 12px);border-width:2px}.stand{width:118px;left:calc(50% - 59px)}#mother{width:81px;height:81px;left:calc(50% - 40.5px);bottom:7px}#mother[data-mood='panic']:after{font-size:25px}.stars{top:-25px;font-size:26px}.pan{height:27px}.items{bottom:calc(23% + 23px);min-height:80px}.token{width:40px;height:54px}.items .token[data-type='0'],.items .token.fraction-egg{width:64.6px;height:81.6px}.items .token.negative-egg{height:101.6px}.negative-egg .egg-art{height:calc(100% - 20px)}.items .token[data-type='2']{height:75px;width:43px}.side-control{bottom:-18px}.math-button{padding:3px 15px;font-size:13px}.roller{padding:5px;gap:5px}.roller button{padding:3px 7px;font-size:13px;min-height:30px}
 footer{height:72px}#chickReserve{bottom:6px;min-height:55px;width:200px}.reserve>span{font-size:9px}.reserve .token{width:30px;height:40px}#chickStock{padding:0 10px 5px;min-width:130px}#chickStock:after{height:12px}#eggStock .token{width:17px;height:24px}#eggStock{left:calc(100% + 5px);bottom:4px}#balloonReserve{top:51px;min-height:48px;width:210px}#balloonStock .token{width:32px;height:31px}#balloonStock{padding-bottom:7px}#balloonStock .token:after{height:7px}.footer-center{bottom:13px;left:max(4%,35px)}.footer-center button{width:39px;height:35px;font-size:25px}.welcome-art{width:85px;height:85px;margin:0 auto}dialog{padding:18px 25px}dialog h2{font-size:24px;margin:4px 0}dialog .eyebrow{font-size:10px}dialog p{font-size:12px;margin:8px 0}dialog .level-grid{margin-top:12px;gap:9px}dialog .level-grid button{padding:7px 10px}dialog .primary{padding:8px 20px;margin:8px 5px}dialog .answer{padding:5px;font-size:37px}
}
@media(orientation:portrait){header{height:95px;padding:15px 5% 15px 38px}.brand{font-size:24px}.brand span{font-size:8px}.level-info{display:none}nav{gap:6px}nav button{padding:7px 9px;font-size:12px}#scene{inset:192px 0 165px}#app{background-size:22px 22px,22px 22px,auto 80%}.pan-wrap{width:39%}#leftWrap{left:2%}#rightWrap{right:2%}#beam{width:58%;left:21%}.token{width:36px;height:49px}.items .token[data-type='0'],.items .token.fraction-egg{width:61.2px;height:78.2px}.items .token.negative-egg{height:98.2px}.items .token[data-type='2']{width:37px;height:70px}.negative-egg .egg-art{height:calc(100% - 20px)}#mother{width:97px;height:97px;left:calc(50% - 48.5px)}.stand{width:95px;left:calc(50% - 47.5px)}#balloonReserve{top:111px;width:230px}#status{top:173px;left:50%;max-width:85%;font-size:10px}.pan{height:28px}.items{bottom:calc(23% + 24px)}.math-button{padding:4px 13px;font-size:13px}.roller{max-width:40vw}#rotateHint{display:block;position:absolute;bottom:118px;left:0;width:100%;text-align:center;font-size:11px;font-weight:600;color:#52658b}#chickReserve{width:190px}.reserve .token{width:30px;height:42px}.footer-center{left:30px}.binding{width:22px}.stars{display:none}dialog .level-grid{grid-template-columns:repeat(2,1fr)}dialog{padding:25px 18px}}
.ropes{bottom:calc(23% + 35px)}
@media(max-height:600px) and (orientation:landscape){.ropes{bottom:calc(23% + 23px)}}
@media(orientation:portrait){.ropes{bottom:calc(23% + 24px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.drag-ghost .sprite-flight{opacity:1!important}.drag-ghost .sprite-chick{opacity:0!important}}