@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&display=swap');
:root{font-family:"Mitr",system-ui,sans-serif;color:#17385a;--cream:#fffaf0;--yellow:#ffc62f;--blue:#238be8}*{box-sizing:border-box}html,body,#app,.screen{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/bird-forest-bg.png') center/cover no-repeat}.hidden{display:none!important}.intro{display:grid;place-items:center;padding:24px}.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(#36bde055,#fff0)}.intro-card{z-index:1;width:min(620px,92vw);padding:clamp(28px,5vw,54px);text-align:center;background:#fffdf2ed;border:5px solid #fff;border-radius:42px;box-shadow:0 15px 0 #1674a8,0 24px 55px #16496b55}.mascot{font-size:clamp(72px,11vw,130px);filter:drop-shadow(0 8px 3px #16496b44);animation:bob 2.3s ease-in-out infinite}.eyebrow{color:#e15b3d;font-weight:600;margin:5px}.intro h1{font-size:clamp(40px,7vw,76px);line-height:1.05;margin:5px 0 16px;color:#1569aa;text-shadow:0 4px #fff}.intro p{font-size:clamp(17px,2.3vw,25px)}.primary{border:0;border-radius:22px;padding:15px 46px;background:linear-gradient(#ffd844,#ffad19);color:#654000;font-size:25px;font-weight:700;box-shadow:0 7px 0 #d67a0b}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #d67a0b}.game{background-color:#7bd9ef}.hud{position:absolute;z-index:20;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;height:70px;padding:8px 14px;display:grid;grid-template-columns:1fr minmax(220px,1.2fr) 1fr;align-items:center;gap:18px;background:#ffffffed;border:3px solid #fff;border-radius:25px;box-shadow:0 6px 0 #2381b2}.brand{font-weight:700;font-size:clamp(16px,1.6vw,24px);white-space:nowrap}.progress-wrap{text-align:center}.progress-wrap strong{font-size:18px}.progress{height:10px;margin-top:5px;border-radius:9px;background:#d6e8ec;overflow:hidden}.progress i{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,#ff52a0,#ffd12e);transition:.4s}.stats{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:20px;white-space:nowrap}.stats button{width:43px;height:43px;border:2px solid #c8e3eb;border-radius:14px;background:white;font-size:20px;box-shadow:0 3px #8cb5c3}.mission{position:absolute;z-index:15;top:96px;left:50%;transform:translateX(-50%);min-width:min(520px,88vw);padding:9px 28px 12px;text-align:center;background:#fffdf1f2;border:4px solid #fff;border-radius:28px;box-shadow:0 6px 0 #f1a91f}.mission p{display:inline;margin:0 14px;font-size:clamp(18px,2vw,28px);font-weight:600}.mission strong{display:inline-block;color:#ed4d45;font-size:clamp(40px,4vw,59px);line-height:1}.mission span{display:inline-block;padding:7px 14px;border-radius:18px;background:#dff7ed;color:#16765d;font-weight:600}.bird-field{position:absolute;z-index:5;inset:190px 3% 105px}.bird{position:absolute;width:clamp(86px,8.2vw,145px);height:clamp(70px,7vw,120px);border:0;background:transparent;transform:translate(-50%,-50%);animation:fly var(--speed) ease-in-out var(--delay) infinite alternate;filter:drop-shadow(0 7px 4px #17425a48)}.bird-body{position:absolute;inset:19% 12% 7% 20%;border-radius:58% 52% 48% 50%;background:linear-gradient(145deg,var(--light),var(--color) 58%,var(--dark));border:3px solid #ffffffbb}.bird-head{position:absolute;width:43%;aspect-ratio:1;right:5%;top:0;border-radius:50%;background:var(--color);border:3px solid #ffffffaa}.eye{position:absolute;width:26%;aspect-ratio:1;right:16%;top:19%;border-radius:50%;background:#fff;border:3px solid #17385a}.beak{position:absolute;right:-26%;top:43%;width:34%;height:23%;background:#ffc62f;clip-path:polygon(0 0,100% 50%,0 100%)}.wing{position:absolute;z-index:2;width:48%;height:54%;left:28%;top:27%;border-radius:60% 40% 55% 45%;background:var(--accent);transform-origin:90% 70%;animation:flap .65s ease-in-out infinite alternate}.tail{position:absolute;left:5%;top:46%;width:26%;height:30%;background:var(--accent);clip-path:polygon(100% 45%,0 0,22% 48%,0 100%)}.number{position:absolute;z-index:4;left:43%;top:52%;transform:translate(-50%,-50%);min-width:43px;padding:1px 5px;border-radius:13px;background:#fff;color:#17385a;font-weight:700;font-size:clamp(22px,2.6vw,39px);line-height:1.1;box-shadow:0 3px 0 #17385a33}.bird:hover,.bird:focus-visible{filter:drop-shadow(0 0 13px #fff) drop-shadow(0 8px 4px #17425a55);outline:none}.bird.correct{animation:found .7s ease-in forwards}.bird.wrong{animation:shake .4s}.nest{position:absolute;z-index:10;bottom:12px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;padding:6px 19px;background:#fffbe9dd;border:3px solid #fff;border-radius:22px;box-shadow:0 5px 0 #af712f}.nest>span{font-size:44px;grid-row:1/3}.nest small{font-weight:500}.nest b{color:#f4aa16;letter-spacing:3px}.toast{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;padding:13px 30px;border-radius:30px;background:#fff;color:#16995e;font-size:32px;font-weight:700;pointer-events:none}.toast.show{animation:toast .7s}.modal{position:fixed;z-index:99;inset:0;display:grid;place-items:center;padding:20px;background:#0b456c99;backdrop-filter:blur(7px)}.modal-card{text-align:center;width:min(560px,92vw);padding:35px;background:#fffdf0;border:5px solid #fff;border-radius:38px;box-shadow:0 13px 0 #1e82b4}.modal-card>div{font-size:80px}.modal-card h2{font-size:clamp(36px,6vw,66px);margin:0;color:#1670b0}.modal-card p{font-size:21px}.modal-card .primary{font-size:21px}@keyframes fly{to{translate:var(--dx) var(--dy);rotate:var(--rot)}}@keyframes flap{to{transform:rotate(-28deg) scaleY(.72)}}@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes found{60%{transform:translate(-50%,-70%) scale(1.35)}100%{transform:translate(-50%,260%) scale(.25);opacity:0}}@keyframes shake{25%{margin-left:-14px}50%{margin-left:14px}75%{margin-left:-8px}}@keyframes toast{20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:760px){.hud{height:62px;grid-template-columns:1fr 1fr}.brand span{display:none}.progress-wrap{order:3;position:absolute;left:24%;right:24%;top:8px}.progress-wrap strong{font-size:14px}.stats{gap:5px}.stats button{width:36px;height:36px}.stats{font-size:16px}.mission{top:84px;padding:8px 12px}.mission p{font-size:16px;margin:0 6px}.mission strong{font-size:38px}.mission span{font-size:12px}.bird-field{inset:168px 1% 88px}.bird{width:88px;height:73px}.number{font-size:21px;min-width:34px}.nest small{display:none}.nest{grid-template-columns:auto auto}.nest>span{grid-row:auto;font-size:35px}.intro-card{border-radius:28px}}
@media(max-height:650px){.mission{top:82px}.bird-field{inset:162px 2% 78px}.nest{bottom:5px;padding:2px 15px}.nest>span{font-size:32px}.hud{height:58px}.bird{max-width:105px;max-height:86px}}

/* Keep the starter card inside 16:9 and other short displays. */
.intro{padding:clamp(10px,2vh,24px)}
.intro-card{max-height:calc(100dvh - 28px);padding:clamp(16px,3.5vh,42px);border-radius:clamp(25px,4vh,42px);box-shadow:0 10px 0 #1674a8,0 20px 45px #16496b55}
.mascot{font-size:clamp(54px,13vh,108px);line-height:1}
.intro h1{font-size:clamp(34px,7vh,65px);margin:4px 0 9px}
.intro p{font-size:clamp(15px,2.6vh,22px);margin:9px 0 17px}
.intro .eyebrow{margin:3px}
.intro .primary{padding:clamp(9px,1.8vh,14px) 44px;font-size:clamp(19px,3vh,24px)}
.progress i{width:0}
.mission{min-width:min(590px,90vw);padding:7px 22px 9px}
.mission small{display:block;color:#517087;font-weight:600;line-height:1.2}
@media(max-height:560px){.intro-card{padding:10px 26px}.mascot{font-size:48px}.intro h1{font-size:32px}.intro p{margin:4px 0 10px;font-size:14px}.intro .eyebrow{font-size:13px}.intro .primary{padding:7px 34px;font-size:17px}.mission small{display:none}}

/* JS updates this from the mission card's actual lower edge. */
.bird-field{left:3%;right:3%;top:var(--flight-top,275px)!important;bottom:105px;height:auto;overflow:visible}