@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900;1000&display=swap');
[hidden]{display:none!important}:root{font-family:Nunito,'Segoe UI',sans-serif;color:#17343d;background:#8ddfcd}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 16%,#ffe576 0 5%,transparent 5.2%),radial-gradient(circle at 94% 83%,#ff99a9 0 6%,transparent 6.2%),linear-gradient(145deg,#8ee4cf,#72cbbf 52%,#75aeea)}button{font:inherit}.app{min-height:calc(100dvh - 66px);padding:14px clamp(10px,3.5vw,42px) 24px}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:#173f42;border:2px solid #ffffff70;border-radius:19px;padding:10px 18px;box-shadow:0 7px #15335445}.topbar>div:first-child{display:flex;flex-direction:column}.topbar span{color:#7af0c8;font-size:.62rem;letter-spacing:1.8px;font-weight:1000}.topbar strong{font-size:1.08rem}.score{padding:7px 12px;border:1px solid #ffffff55;border-radius:99px;background:#ffffff17;font-size:.78rem;font-weight:1000}
.start-screen{width:min(1180px,100%);height:calc(100dvh - 130px);margin:auto;padding:12px 24px 4px;display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:auto minmax(0,1fr);align-items:center;gap:13px 20px}.heading{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:24px}.heading>div{display:flex;flex-direction:column}.heading>div>span{color:#17685d;font-size:.67rem;letter-spacing:1.8px;font-weight:1000}.heading h1{max-width:700px;margin:3px 0 0;font-size:clamp(2.2rem,4.2vw,3.9rem);line-height:.93;letter-spacing:-2.4px}.heading h1 em{color:#d34d65;font-style:normal}.heading p{max-width:440px;margin:0;color:#274d58;text-align:right;font-size:.84rem;font-weight:900;line-height:1.4}.hero{position:relative;align-self:stretch;min-height:0;padding:8px;border:4px solid #fff;border-radius:27px;background:#ffffffc7;box-shadow:0 10px #27326830;overflow:hidden}.hero>img{width:100%;height:calc(100% - 61px);min-height:285px;object-fit:cover;border-radius:18px}.badge{position:absolute;z-index:2;left:18px;top:18px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:3px solid #fff;border-radius:17px;background:#173f42;color:#fff;box-shadow:0 5px #10243d55}.badge span{font-size:2.6rem}.badge b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#ffe052;color:#173f42;font-size:.76rem}.caption{height:61px;display:flex;flex-direction:column;justify-content:center;padding:5px 9px}.caption strong{font-size:1.02rem}.caption span{color:#526880;font-size:.67rem;font-weight:900}.levels{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:18px;background:#ffffffe8;border:4px solid #fff;border-radius:27px;box-shadow:0 10px #27326830}.level-title{display:flex;flex-direction:column;margin-bottom:10px}.level-title span{color:#17705f;font-size:.59rem;letter-spacing:1.6px;font-weight:1000}.level-title strong{font-size:1.3rem}.level-grid{display:grid;gap:9px}.level{min-height:92px;display:grid;grid-template-columns:62px 1fr 24px;align-items:center;gap:9px;padding:10px 13px;border:3px solid #fff;border-radius:18px;color:#17343d;text-align:left;box-shadow:0 5px #2435552e;cursor:pointer;transition:.17s}.level:hover{transform:translateY(-4px)}.level>span{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#ffffffb5;font-size:2.65rem}.level>div{display:flex;flex-direction:column}.level strong{font-size:1.15rem}.level small{font-size:.68rem;font-weight:900}.level>b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#173f42;color:#fff}.easy{background:#bff2d8}.medium{background:#ffe28e}.hard{background:#ffb5c8}.skills{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:12px}.skills span{padding:5px 7px;border-radius:99px;background:#e9f4f1;font-size:.58rem;font-weight:1000}
.game-screen{width:min(1180px,100%);margin:8px auto}.game-top{height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff}.game-top>button{justify-self:start;padding:7px 12px;border:1px solid #ffffff70;border-radius:99px;background:#173f42dd;color:#fff;font-weight:900;cursor:pointer}.game-top>div:nth-child(2){display:flex;gap:8px;align-items:center}.game-top>div:nth-child(2) span{padding:4px 9px;border-radius:99px;background:#ffffff2d;font-size:.72rem;font-weight:900}#hearts{justify-self:end;color:#ff356d;font-size:1.3rem;letter-spacing:2px}.workspace{display:grid;grid-template-columns:1.08fr .92fr;gap:14px}.habitat-card,.code-card{padding:14px;background:#fffffff2;border:4px solid #fff;border-radius:25px;box-shadow:0 9px #27336b35}.code-card{display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-heading>div{display:flex;flex-direction:column}.panel-heading>div span{color:#17705f;font-size:.58rem;letter-spacing:1.5px;font-weight:1000}.panel-heading strong{font-size:1rem}.panel-heading>span{padding:5px 8px;border-radius:9px;background:#fff0af;color:#755300;font-size:.65rem;font-weight:1000}
.stage{position:relative;height:350px;margin-top:9px;overflow:hidden;border:4px solid #dceae4;border-radius:22px;background:linear-gradient(#b6eeff 0 45%,#8bd07d 45%)}.stage:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#ffffffc9 0 8%,transparent 8.4%)}.habitat{position:absolute;z-index:2;width:28%;min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #fff;border-radius:20px;text-align:center;box-shadow:0 7px #18333d30;transition:.25s}.habitat>span{font-size:3rem}.habitat b{font-size:.78rem}.habitat small{font-size:.55rem;font-weight:900}.bird{left:4%;top:6%;background:#d3f2a7}.water{right:4%;top:6%;background:#bcecff}.land{right:7%;bottom:5%;background:#ffe1a8}.habitat.active{transform:scale(1.07);box-shadow:0 0 0 6px #fff,0 0 28px #4cf39c}.habitat.wrong{animation:shake .18s 4;box-shadow:0 0 0 6px #ff5478}.hub{position:absolute;z-index:3;left:40%;top:42%;width:20%;aspect-ratio:1;display:grid;place-items:center;border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#234f57,#102c34);color:#fff;box-shadow:0 8px #142e343f}.hub span{font-size:2.4rem}.hub b{font-size:.52rem}.animal-token{position:absolute;z-index:5;left:46%;top:47%;width:8%;aspect-ratio:1;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:#fff;box-shadow:0 6px #18333d40;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.animal-token span{font-size:2.6rem}.animal-token.pop{transform:scale(1.25)}.animal-token.to-bird{transform:translate(-310%,-205%) scale(.85)}.animal-token.to-water{transform:translate(310%,-205%) scale(.85)}.animal-token.to-land{transform:translate(310%,205%) scale(.85)}.route{position:absolute;z-index:1;left:50%;top:53%;width:32%;height:5px;border-radius:9px;background:#ffffff70;transform-origin:left}.route-bird{transform:rotate(211deg)}.route-water{transform:rotate(-32deg)}.route-land{transform:rotate(34deg)}.route.active{background:#6dffe0;box-shadow:0 0 12px #0ff}.animal-deck{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.animal-deck>div{position:relative;min-width:0;padding:6px 5px;border:2px solid #dfeae5;border-radius:12px;background:#f4faf7;text-align:center}.animal-deck span{display:block;font-size:1.7rem}.animal-deck b{display:block;font-size:.62rem}.animal-deck small{display:block;overflow:hidden;color:#64777a;font-size:.48rem;white-space:nowrap;text-overflow:ellipsis}.animal-deck em{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#31565d;color:#fff;font-size:.5rem;font-style:normal}.animal-deck>div.current{border-color:#ffc72d;background:#fff4bd;transform:translateY(-3px)}.animal-deck>div.saved{border-color:#27bf76;background:#c9f4dc}.animal-deck>div.saved:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;background:#167f5abe;color:#fff;font-size:1.7rem;font-weight:1000}
.animal-info{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:9px;padding:8px;border-radius:16px;background:linear-gradient(120deg,#e6fff5,#e8f5ff)}.portrait{display:grid;place-items:center;width:72px;height:72px;border:3px solid #fff;border-radius:18px;background:#fff;font-size:3.5rem}.animal-info>div:last-child{display:flex;flex-direction:column}.animal-info span{color:#17705f;font-size:.52rem;letter-spacing:1.2px;font-weight:1000}.animal-info strong{font-size:.88rem}.traits{display:flex;gap:4px;flex-wrap:wrap}.traits span{padding:3px 6px;border-radius:99px;background:#fff;color:#3b5c64;font-size:.5rem;letter-spacing:0}.code-heading{margin-top:9px}.program{min-height:116px;max-height:145px;overflow:auto;display:flex;align-content:flex-start;flex-wrap:wrap;gap:6px;margin:9px 0;padding:8px;border:2px dashed #7d9c99;border-radius:14px;background:#eef7f4}.program p{margin:auto;font-size:.75rem;font-weight:900}.program-step{width:100%;min-height:34px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:6px;padding:4px 7px;border:2px solid #fff;border-radius:10px;background:#fff;box-shadow:0 3px #bdcec8;font-size:.62rem;font-weight:1000;cursor:pointer}.program-step>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#173f42;color:#fff}.program-step em{padding:3px 5px;border-radius:6px;background:#d9f5e9;color:#116244;font-style:normal;font-size:.52rem}.program-step.active{color:#fff;background:#258579}.program-step.error{background:#ffd3dc;border-color:#ef4168}.palette{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.palette button{min-height:51px;display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:4px;padding:5px 6px;border:2px solid #d6e5df;border-radius:12px;background:#fff;box-shadow:0 4px #bdcec8;font-size:.58rem;font-weight:1000;text-align:left;cursor:pointer}.palette button>span{font-size:1.25rem}.palette button div{display:flex;flex-direction:column}.palette button small{color:#168064;font-size:.43rem}.palette button em{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#173f42;color:#fff;font-style:normal}.edit-row{display:flex;justify-content:space-between;margin-top:7px}.edit-row button{border:0;background:transparent;font-size:.68rem;font-weight:1000}.run{margin-top:6px;padding:10px;border:0;border-radius:12px;background:linear-gradient(100deg,#ff7d59,#ef3f7a);color:#fff;font-weight:1000;box-shadow:0 5px #b92750}.feedback{min-height:40px;margin-top:8px;padding:7px;border-radius:11px;background:#fff0ad;text-align:center;font-size:.65rem;font-weight:900}.feedback.good{color:#11653f;background:#c7f1d9}.feedback.bad{color:#8b1838;background:#ffd2dd}button:disabled{opacity:.47}.result{width:min(650px,100%);margin:55px auto;padding:38px 22px;text-align:center;background:#fffffff2;border:4px solid #fff;border-radius:30px}.result>div{font-size:4.5rem}.result>span{color:#17705f;font-size:.67rem;letter-spacing:2px;font-weight:1000}.result h1{margin:7px;font-size:3rem}.result button{padding:11px 17px;border:0;border-radius:12px;background:#173f42;color:#fff;font-weight:1000}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}body:has(#start-screen:not([hidden])){overflow:hidden}
@media(max-width:760px){body:has(#start-screen:not([hidden])){overflow:auto}.app{padding:8px}.topbar{height:54px;padding:7px 11px}.topbar strong{font-size:.84rem}.start-screen{grid-template-columns:1fr;grid-template-rows:auto 179px auto;height:auto;gap:7px;padding:7px 4px}.heading{grid-column:1;align-items:center;gap:7px}.heading h1{font-size:1.48rem;letter-spacing:-1px}.heading p{max-width:48%;font-size:.54rem;line-height:1.2}.hero{height:179px;padding:5px;border-radius:17px}.hero>img{height:140px;min-height:140px;border-radius:12px}.badge{left:9px;top:9px;padding:3px 5px}.badge span{font-size:1.65rem}.badge b{width:22px;height:22px}.caption{height:31px;padding:2px 5px}.caption strong{font-size:.61rem}.caption span{font-size:.42rem}.levels{padding:7px;border-width:3px}.level-title{margin-bottom:5px;align-items:center}.level-title strong{font-size:.8rem}.level-grid{grid-template-columns:repeat(3,1fr);gap:5px}.level{min-height:84px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:4px 2px;text-align:center}.level>span{width:42px;height:42px;font-size:1.9rem}.level strong{font-size:.72rem}.level small{font-size:.46rem}.level>b,.skills{display:none}.game-screen{margin-top:3px}.game-top{height:32px}.game-top>button{padding:4px 7px;font-size:.62rem}.workspace{grid-template-columns:1fr;gap:6px}.habitat-card,.code-card{padding:7px;border-width:3px}.panel-heading strong{font-size:.72rem}.stage{height:170px;margin-top:5px}.habitat{min-height:58px;border-radius:12px}.habitat>span{font-size:1.6rem}.habitat b{font-size:.48rem}.habitat small{font-size:.36rem}.hub span{font-size:1.15rem}.hub b{font-size:.31rem}.animal-token span{font-size:1.45rem}.animal-token.to-bird{transform:translate(-310%,-190%)}.animal-token.to-water{transform:translate(310%,-190%)}.animal-token.to-land{transform:translate(310%,190%)}.animal-deck{margin-top:4px}.animal-deck>div{padding:3px}.animal-deck span{font-size:1.05rem}.animal-deck b{font-size:.43rem}.animal-deck small{display:none}.animal-info{grid-template-columns:52px 1fr;padding:4px}.portrait{width:49px;height:49px;font-size:2.35rem}.animal-info strong{font-size:.68rem}.code-heading{margin-top:4px}.program{min-height:36px;max-height:72px;margin:4px 0;padding:4px}.program-step{min-height:25px;font-size:.47rem}.palette{grid-template-columns:repeat(3,1fr);gap:4px}.palette button{min-height:39px;display:flex;flex-direction:column;justify-content:center;padding:2px;text-align:center;font-size:.43rem}.palette button>span{font-size:.8rem}.palette button small,.palette button em{display:none}.edit-row{margin-top:2px}.run{margin-top:2px;padding:7px}.feedback{min-height:29px;margin-top:4px;padding:4px;font-size:.52rem}.result{margin-top:25px}}
@media(max-width:380px){.start-screen{grid-template-rows:auto 156px auto}.hero{height:156px}.hero>img{height:119px;min-height:119px}.level{min-height:76px}.stage{height:145px}.animal-deck{display:none}.program{max-height:60px}}