@font-face{font-family:Club;src:local('Trebuchet MS');font-display:swap}
:root{color-scheme:dark;--ink:#082f31;--cream:#fff3d2;--gold:#efc775;--muted:#a7c2b5;font-family:Club,'Trebuchet MS',system-ui,sans-serif;color:var(--cream);background:var(--ink)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a7edff;outline-offset:4px}button{color:inherit}button[hidden],[hidden]{display:none!important}#game{width:100%;height:100vh;height:100dvh;display:grid;grid-template-columns:55% 45%;overflow:hidden}.habitat{position:relative;overflow:hidden;background:#315343 url('./assets/forest.webp') center/cover}#scene{width:100%;height:100%;display:block}.habitat:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#001e2115,transparent 20%,transparent 65%,#011b1fce)}.shelf{position:absolute;z-index:2;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:30px;background:#082c315c;backdrop-filter:blur(10px);font-size:12px;font-weight:bold;border:1px solid #fff3d220}.shelf span{font-size:22px}.identity{position:absolute;z-index:2;bottom:max(34px,env(safe-area-inset-bottom));left:max(38px,env(safe-area-inset-left));right:20px;pointer-events:none}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2.2px;color:var(--gold)}.identity h1{font-size:clamp(25px,3.6vw,54px);line-height:1.05;margin:10px 0 12px;letter-spacing:-1.4px;text-shadow:0 2px 14px #06282a66;overflow-wrap:anywhere}.identity h1.long-name{font-size:clamp(22px,3vw,44px)}.identity-bottom{display:flex;align-items:center;gap:12px;font-size:12px;color:#d5e4cf}.identity-dot{color:var(--gold)}#stage{color:var(--cream);font-weight:bold;letter-spacing:1px}.math-side{position:relative;display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at 10% 0%,#28564d66,transparent 50%),radial-gradient(ellipse at 95% 100%,#14544955,transparent 40%),#082e30;border-left:1px solid #d2b16c88;box-shadow:-12px 0 35px #001b2633;padding:0 max(28px,env(safe-area-inset-right)) 0 28px}.math-side:before{content:'';position:absolute;inset:8px;pointer-events:none;border:1px solid #cda85318;border-radius:10px}header{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}.wordmark{display:flex;align-items:center;gap:9px;font-size:clamp(15px,1.5vw,22px);font-weight:900;letter-spacing:-.5px;color:var(--gold);white-space:nowrap}.wordmark b{color:var(--cream)}.brand-leaf{font-size:28px}nav{display:flex;gap:5px}.icon-button{display:inline-grid;place-items:center;width:44px;height:44px;padding:11px;background:#ffffff06;border:1px solid #dec38232;border-radius:50%;flex-shrink:0}.icon-button:hover{background:#fff3d217}.icon-button svg{height:20px;width:20px;fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round}.math-content{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:center;padding:16px 8px;max-width:650px;width:100%;margin:0 auto}.question-heading{text-align:center}.question-heading h2{font-size:clamp(23px,3vw,42px);line-height:1.18;letter-spacing:-1px;margin:12px 0 14px}.question-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#b2c6b4}#hatchIntro{text-align:center}#hatchIntro p{color:#c3d5c7;font-size:14px;line-height:1.6;margin:10px 0 30px}.primary{border:1px solid #f6dc9a;border-radius:14px;background:linear-gradient(155deg,#ffe3a1,#eec175);color:#173e38;padding:17px 20px;min-height:52px;font-weight:900;box-shadow:0 5px 0 #866b3b,0 14px 30px #0002;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;font-size:16px}.primary:hover{filter:brightness(1.06)}.primary:active{transform:translateY(2px);box-shadow:0 3px 0 #866b3b}.primary:disabled{opacity:.6}#playContent{position:relative}.equation{display:flex;justify-content:center;align-items:baseline;gap:clamp(6px,1.3vw,21px);font-size:clamp(40px,6.7vw,106px);font-weight:900;line-height:1.15;letter-spacing:-4px;margin:10px -10px 28px;font-variant-numeric:tabular-nums;text-shadow:0 4px 0 #0002}.equation .operator{font-size:.72em;color:#eadfbb}.equation.large-sum{font-size:clamp(36px,5.3vw,84px);letter-spacing:-3px}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.answer{position:relative;min-height:clamp(66px,12.5vh,118px);border:2px solid #d8b875;border-radius:20px;color:#0b3536;background:radial-gradient(ellipse at 20% 0%,#fff9e6,transparent 70%),linear-gradient(145deg,#f5e8c7,#ead4a6);box-shadow:inset 0 2px 0 #fffceacc,inset 0 -4px 0 #c4a36e55,0 5px 0 #8e7447,0 12px 25px #00171a44;font-size:clamp(32px,4.5vw,70px);font-weight:900;line-height:1;transition:transform .16s,filter .16s,background .16s}.answer:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px)}.answer:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #8e7447}.answer.correct{background:linear-gradient(145deg,#e0efae,#a8d38a);border-color:#effbc5}.answer.retry{animation:gentle-nudge .35s ease;filter:saturate(.55)}.answer.tried{opacity:.53}.answer .answer-tick{position:absolute;right:12px;top:9px;font-size:20px;color:#467c41}.feedback{min-height:20px;text-align:center;margin:21px 0 0;font-size:12px;color:#c5d8c8;line-height:1.4}.feedback.success{color:#f8d782}#hint{color:#f5dfaa;text-align:center;font-size:12px;margin:7px 0 0;line-height:1.5}.evolution-progress{text-align:center;margin-top:28px}.eggs{display:flex;justify-content:center;align-items:center;gap:16px;min-height:39px}.egg-pip{display:inline-block;width:25px;height:32px;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(circle at 35% 25%,#c6c8ad,#899985 65%,#68786b);box-shadow:inset -3px -4px 7px #132e3444,0 3px 5px #0003;opacity:.4;transform:rotate(8deg);position:relative;transition:background .3s,opacity .3s,transform .3s}.egg-pip.earned{opacity:1;background:radial-gradient(circle at 32% 25%,#fff0af,#efbc56 65%,#b27c2d);box-shadow:inset -3px -4px 7px #a6673344,0 0 19px #f1c56733;transform:rotate(-7deg)}.egg-pip:after{content:'';position:absolute;top:7px;left:8px;width:3px;height:4px;border-radius:50%;background:#67543444;box-shadow:7px 5px #67543433,3px 13px #67543433}.evolution-progress p{font-size:16px;font-weight:bold;margin:12px 0 4px}.evolution-progress>span{font-size:11px;color:#a9c1b2}footer{position:relative;display:flex;justify-content:space-between;gap:8px;min-height:42px;align-items:center;font-size:9px;color:#90aa9b;padding-bottom:env(safe-area-inset-bottom)}.club-signature{font-style:italic}#saveStatus{font-size:8px}#discovery{position:absolute;z-index:3;top:20%;width:100%;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;text-shadow:0 2px 15px #062d30}#discovery.show{opacity:1;transform:translateY(0)}#discovery span{display:block;font-size:10px;letter-spacing:3px;color:#ffe2a2}#discovery strong{display:block;font-size:clamp(20px,3.3vw,48px);margin-top:6px}#loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#082f31d9;text-align:center;font-size:14px;padding:20px}#retryArt{padding:12px 25px;border:1px solid var(--gold);border-radius:20px;background:#234e43}.loading-orbit{width:42px;height:42px;border:2px solid #efd49933;border-top-color:var(--gold);border-radius:50%;animation:spin 1.2s linear infinite}.loading-orbit.failed{animation:none;border-color:#efd49966}
dialog{position:fixed;inset:0 0 0 55%;margin:0;width:45%;height:100%;max-height:100%;max-width:none;border:0;border-left:1px solid #e5c48355;background:radial-gradient(ellipse at 0 0,#1c524b,#082f31 70%);color:var(--cream);padding:max(30px,env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 30px;overflow:auto}dialog::backdrop{background:#001d261f}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-top h2{font-size:clamp(23px,3vw,38px);margin:10px 0}.dialog-copy{color:#b9cebd;font-size:13px;line-height:1.6;margin:18px 0 28px}.setting{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cbe3cd22;padding:22px 0;font-size:14px}.setting input{width:24px;height:24px;accent-color:#e4bf74}.shelf-link{display:inline-flex;align-items:center;min-height:44px;margin:20px 0;font-size:13px;color:var(--gold)}.save-explanation{font-size:11px;line-height:1.6;color:#9db9a7}#collectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.specimen{padding:8px 6px 12px;border:1px solid #d3c18c33;border-radius:14px;background:#ffffff06;color:var(--cream);min-width:0}.specimen img{width:100%;height:100px;object-fit:contain;display:block;filter:drop-shadow(0 6px 4px #0003)}.specimen span{display:block;font-size:11px;overflow-wrap:anywhere}.specimen small{display:block;font-size:9px;color:var(--gold);margin:7px 0}.specimen.locked{color:#91aa9c}.specimen.locked .mystery{height:100px;display:grid;place-items:center;font-size:32px;color:#acc2ad44}.specimen.selected{border-color:var(--gold);background:#d7bc7b15}.collection-return{margin:20px 0 5px;position:sticky;bottom:0;font-size:13px}.rotate{display:none}.no-script{position:fixed;inset:0;z-index:50;padding:40px;background:#082f31}.no-script a{text-decoration:underline}@keyframes spin{to{transform:rotate(360deg)}}@keyframes gentle-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.start-over{margin-top:18px;padding-top:16px;border-top:1px solid #cbe3cd22}.start-over-button{min-height:44px;padding:0;background:none;border:0;font-size:13px;color:#c9dccd;text-decoration:underline;text-underline-offset:4px}#startOverConfirm p{font-size:13px;line-height:1.6;color:#f5dfaa;margin:4px 0 14px}.start-over-actions{display:flex;flex-wrap:wrap;gap:10px}.start-over-actions button{min-height:44px;padding:0 18px;border-radius:12px;font-size:13px;font-weight:bold}.start-over-yes{background:#7d3b2b;border:1px solid #e9a283;color:var(--cream)}.start-over-no{background:#ffffff0d;border:1px solid #dec38255;color:var(--cream)}
@media(max-width:1100px){.math-side{padding-left:20px;padding-right:max(20px,env(safe-area-inset-right))}.wordmark{font-size:15px;gap:5px}.wordmark b{display:block;font-size:12px;letter-spacing:1px}.brand-leaf{font-size:24px}.math-content{padding-left:2px;padding-right:2px}.identity{left:26px}.answers{gap:13px}}
@media(max-height:540px) and (orientation:landscape){.math-side{padding:0 max(18px,env(safe-area-inset-right)) 0 18px}header{min-height:58px}.wordmark{font-size:14px}.wordmark b{font-size:11px}.icon-button{width:44px;height:44px;padding:12px}.math-content{padding:0 0 4px;justify-content:center}.question-heading .eyebrow{display:none}.question-heading h2{font-size:22px;margin:3px 0 4px}.equation{font-size:clamp(37px,6.8vw,63px);line-height:1;margin:7px 0 12px;letter-spacing:-2px;gap:10px}.equation.large-sum{font-size:clamp(32px,5.4vw,51px);letter-spacing:-2px}.answer{min-height:59px;height:clamp(55px,16vh,74px);border-radius:13px;font-size:36px}.answers{gap:12px}.feedback{margin-top:11px;font-size:10px;min-height:14px}.evolution-progress{margin-top:11px}.eggs{gap:12px;min-height:24px}.egg-pip{width:18px;height:24px}.egg-pip:after{left:5px;top:5px;box-shadow:5px 6px #67543433}.evolution-progress p{font-size:12px;margin:6px 0 2px}.evolution-progress>span{font-size:9px}footer{min-height:24px;font-size:8px}#saveStatus{font-size:7px}.identity{bottom:max(19px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left))}.identity h1{font-size:32px;margin:6px 0 7px;letter-spacing:-.8px}.identity h1.long-name{font-size:25px}.identity .eyebrow{font-size:8px}.identity-bottom{font-size:9px;gap:8px}.shelf{top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));font-size:10px;min-height:36px}.shelf span{font-size:18px}#hatchIntro p{font-size:12px;margin:10px 0 18px}.primary{min-height:48px;font-size:14px;padding:13px 16px}dialog{padding:18px max(20px,env(safe-area-inset-right)) 18px 20px}.dialog-top h2{font-size:24px;margin:5px 0}.dialog-copy{font-size:11px;margin:12px 0 16px}.setting{padding:13px 0;font-size:12px}.shelf-link{margin:7px 0}.save-explanation{font-size:9px;margin-top:0}#hint{font-size:10px;margin-top:3px}.specimen img,.specimen.locked .mystery{height:76px}}
@media(max-height:350px) and (orientation:landscape){header{min-height:48px}.question-heading h2{font-size:19px;margin:0}.equation{font-size:40px;margin:5px 0 10px}.equation.large-sum{font-size:35px}.answer{height:50px;min-height:50px;font-size:31px}.answers{gap:10px}.evolution-progress{margin-top:7px}.feedback{margin-top:9px;font-size:9px}.egg-pip{width:14px;height:18px}.eggs{min-height:18px}.evolution-progress>span{display:none}.evolution-progress p{font-size:11px;margin:4px 0 0}footer{min-height:20px}.club-signature{display:none}.identity h1{font-size:27px}.identity .eyebrow{display:none}.wordmark{font-size:12px}.wordmark b{font-size:10px}}
@media(orientation:portrait) and (max-width:900px){.rotate{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:linear-gradient(#062d31bb,#062d31f5),url('./assets/forest.webp') center/cover}.rotate-icon{font-size:64px;color:var(--gold)}.rotate h2{font-size:29px;max-width:300px}.rotate p{line-height:1.8;color:#c8dbc9}.rotate a{font-size:13px;margin-top:35px;color:var(--gold)}}
@media(min-height:351px) and (max-height:540px) and (orientation:landscape){header{min-height:50px}.equation{font-size:47px}.equation.large-sum{font-size:42px}.answer{height:clamp(54px,14.5vh,66px);min-height:54px}.evolution-progress{margin-top:8px}.feedback{margin-top:9px;min-height:12px}.eggs{min-height:22px}.egg-pip{height:22px}}
/* Constrain grid children so intrinsic canvas sizing cannot grow a short phone viewport. */
#game{grid-template-rows:minmax(0,1fr)}.habitat,.math-side{min-height:0;min-width:0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.modes{display:flex;gap:6px;justify-content:center;margin:0 0 22px}.mode-choice{flex:1;min-height:44px;padding:6px 8px;border:1px solid #dec38255;border-radius:12px;background:#ffffff08;font-size:13px;font-weight:bold;color:var(--cream);white-space:nowrap}.mode-choice[aria-pressed=true]{background:linear-gradient(155deg,#ffe3a1,#eec175);border-color:#f6dc9a;color:#173e38}.mode-setting{gap:12px}.mode-setting .modes{margin:0;flex:0 1 auto}.mode-setting .mode-choice{flex:0 1 auto;font-size:11px;padding:6px 9px}
@media(max-height:540px) and (orientation:landscape){.modes{margin-bottom:12px}.mode-choice{min-height:40px;font-size:11px}.mode-setting .mode-choice{font-size:10px;padding:4px 7px}}