:root{color-scheme:light;font-family:Segoe UI,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;overflow-x:hidden}.app{position:relative;min-height:100vh;background:linear-gradient(180deg,#0c1445,#1a2980 20%,#26d0ce 50%,#a8e063 70%,#56ab2f,#2d5016);overflow:hidden}.sky{position:absolute;top:0;right:0;bottom:0;left:0;height:55%;overflow:hidden;z-index:0}.sun{position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#fff7cc 30%,#ffd700 70%,transparent 100%);top:8%;right:12%;box-shadow:0 0 60px 20px #ffd70066;animation:sunGlow 4s ease-in-out infinite}@keyframes sunGlow{0%,to{box-shadow:0 0 60px 20px #ffd70066;transform:scale(1)}50%{box-shadow:0 0 80px 30px #ffd70099;transform:scale(1.05)}}.moon{position:absolute;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8e8e8,#c9c9c9,#a0a0a0);top:6%;left:10%;box-shadow:0 0 30px 10px #c8c8ff33;opacity:.7}.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.cloud{position:absolute;background:#fff;border-radius:50%;opacity:.8}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{width:100px;height:36px;top:12%;left:25%;animation:cloudDrift 25s linear infinite}.cloud-1:before{width:50px;height:50px;top:-25px;left:15px}.cloud-1:after{width:65px;height:40px;top:-18px;left:40px}.cloud-2{width:130px;height:40px;top:18%;left:55%;animation:cloudDrift 30s linear infinite;animation-delay:-10s}.cloud-2:before{width:60px;height:55px;top:-28px;left:20px}.cloud-2:after{width:75px;height:45px;top:-20px;left:50px}.cloud-3{width:80px;height:30px;top:8%;left:75%;animation:cloudDrift 20s linear infinite;animation-delay:-5s}.cloud-3:before{width:40px;height:40px;top:-20px;left:10px}.cloud-3:after{width:50px;height:35px;top:-15px;left:30px}@keyframes cloudDrift{0%{transform:translate(0)}50%{transform:translate(80px)}to{transform:translate(0)}}.mountains-bg{position:absolute;top:15%;left:0;right:0;height:40%;z-index:1;opacity:.6}.mountains-bg svg{width:100%;height:100%}.park-scene{position:relative;width:100%;height:55vh;margin-top:20vh;z-index:2}.ground{position:absolute;left:-5%;right:-5%;border-radius:50%}.ground-far{bottom:0;height:200px;background:linear-gradient(135deg,#4a7c3f,#3d6b35,#4a7c3f);z-index:0}.ground-mid{bottom:-30px;height:180px;background:linear-gradient(135deg,#5a9c4a,#4d8a3f,#5a9c4a);z-index:1}.ground-near{bottom:-60px;height:180px;background:linear-gradient(135deg,#6ab856,#5aa648,#6ab856);z-index:2}.lake{position:absolute;width:28%;height:22%;bottom:15%;left:36%;background:radial-gradient(ellipse,#2196f3,#1976d2 40%,#0d47a1);border-radius:50%;z-index:5;overflow:hidden;box-shadow:0 4px 20px #2196f366}.lake-shimmer{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 45%,transparent 60%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.lily-pad{position:absolute;width:22px;height:14px;background:#2e7d32;border-radius:50%;opacity:.8}.lily-1{bottom:30%;left:20%;animation:lilyFloat 4s ease-in-out infinite}.lily-2{bottom:50%;left:55%;animation:lilyFloat 5s ease-in-out infinite 1s}.lily-3{bottom:20%;left:70%;animation:lilyFloat 4.5s ease-in-out infinite .5s}@keyframes lilyFloat{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(3px,-2px) rotate(2deg)}50%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(1px,3px) rotate(1deg)}}.tree{position:absolute;z-index:4}.tree-trunk{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:12px;background:linear-gradient(90deg,#5d4037,#795548,#5d4037);border-radius:2px}.tree-crown{position:absolute;bottom:30px;left:50%;transform:translate(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#66bb6a,#388e3c,#2e7d32);box-shadow:inset -8px -8px 15px #0003}.tree-1{left:8%;bottom:30%}.tree-1 .tree-trunk{height:50px}.tree-1 .tree-crown{width:65px;height:60px}.tree-2{left:18%;bottom:25%}.tree-2 .tree-trunk{height:40px}.tree-2 .tree-crown{width:50px;height:48px}.tree-3{left:30%;bottom:22%}.tree-3 .tree-trunk{height:55px}.tree-3 .tree-crown{width:70px;height:65px}.tree-4{right:12%;bottom:28%}.tree-4 .tree-trunk{height:45px}.tree-4 .tree-crown{width:55px;height:52px}.tree-5{right:25%;bottom:20%}.tree-5 .tree-trunk{height:60px}.tree-5 .tree-crown{width:75px;height:70px}.bamboo-cluster{position:absolute;right:5%;bottom:25%;z-index:5}.bamboo-stalk{position:absolute;bottom:0;width:8px;background:linear-gradient(90deg,#4caf50,#66bb6a,#4caf50);border-radius:4px}.b1{left:0;height:90px;animation:bambooSway 4s ease-in-out infinite}.b2{left:14px;height:110px;animation:bambooSway 5s ease-in-out infinite .5s}.b3{left:28px;height:80px;animation:bambooSway 4.5s ease-in-out infinite 1s}.bamboo-stalk:before{content:"";position:absolute;top:20%;left:-4px;width:16px;height:3px;background:#388e3c;border-radius:2px}.bamboo-stalk:after{content:"";position:absolute;top:55%;left:-4px;width:16px;height:3px;background:#388e3c;border-radius:2px}@keyframes bambooSway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.flower{position:absolute;font-size:1.2rem;z-index:6;animation:flowerBob 3s ease-in-out infinite}.f1{left:22%;bottom:28%;animation-delay:0s}.f2{left:35%;bottom:26%;animation-delay:.5s}.f3{left:42%;bottom:30%;animation-delay:1s}.f4{left:55%;bottom:24%;animation-delay:1.5s}.f5{left:62%;bottom:27%;animation-delay:.8s}.f6{left:75%;bottom:29%;animation-delay:1.2s}@keyframes flowerBob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}.rock{position:absolute;border-radius:40% 50% 45% 55%;z-index:5}.r1{width:35px;height:22px;background:linear-gradient(135deg,#78909c,#90a4ae,#78909c);left:15%;bottom:18%}.r2{width:25px;height:18px;background:linear-gradient(135deg,#8d6e63,#a1887f,#8d6e63);right:20%;bottom:15%}.r3{width:40px;height:25px;background:linear-gradient(135deg,#78909c,#b0bec5,#78909c);left:50%;bottom:12%}.snow-patch{position:absolute;background:radial-gradient(ellipse,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 70%,transparent 100%);border-radius:50%;z-index:5}.sp1{width:60px;height:25px;left:5%;bottom:45%}.sp2{width:45px;height:20px;left:12%;bottom:40%}.fence{position:absolute;bottom:10%;left:10%;right:10%;height:3px;background:#8d6e63;z-index:5;box-shadow:0 -12px #8d6e63,0 -24px #8d6e63}.fence:before{content:"";position:absolute;left:0;top:-28px;width:100%;height:3px;background:#a1887f}.animal{position:absolute;z-index:10;cursor:pointer;animation:animalBounce 2s ease-in-out infinite;transition:transform .2s}.animal:hover{transform:scale(1.4);z-index:20}.animal-emoji{font-size:2rem;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@keyframes animalBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.animal-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:6px 12px;border-radius:8px;font-size:.75rem;white-space:nowrap;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tooltipIn .2s ease-out}@keyframes tooltipIn{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.animal-tooltip strong{font-size:.85rem}.animal-tooltip span{opacity:.7;font-size:.7rem}.firefly{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffeb3b;box-shadow:0 0 8px 4px #ffeb3b99;z-index:8;animation:fireflyDrift ease-in-out infinite}@keyframes fireflyDrift{0%{opacity:0;transform:translate(0)}25%{opacity:1;transform:translate(15px,-10px)}50%{opacity:.6;transform:translate(-10px,-20px)}75%{opacity:1;transform:translate(5px,-5px)}to{opacity:0;transform:translate(0)}}.header{position:absolute;top:2vh;left:50%;transform:translate(-50%);text-align:center;z-index:20;pointer-events:none}.title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;background:linear-gradient(135deg,#fff,gold,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));letter-spacing:-.02em;white-space:nowrap}.title-icon{-webkit-text-fill-color:initial;margin:0 .3em}.subtitle{color:#ffffffd9;font-size:clamp(.8rem,1.5vw,1rem);margin-top:.3em;text-shadow:0 1px 4px rgba(0,0,0,.4);font-weight:500}.habitat-nav{position:absolute;top:12vh;left:50%;transform:translate(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:90vw;z-index:20;padding:8px;background:#00000040;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;border:1px solid rgba(255,255,255,.1)}.habitat-card{display:flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:#ffffff14;color:#fff;cursor:pointer;transition:all .25s;font-family:inherit;font-size:.8rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.habitat-card:hover{background:#ffffff2e;transform:translateY(-2px);box-shadow:0 4px 15px #0003}.habitat-card.active{background:#ffffff40;border-color:#fff6;box-shadow:0 0 20px #ffffff26}.habitat-icon{font-size:1.2rem}.habitat-info{display:flex;flex-direction:column;text-align:left}.habitat-name{font-weight:600;font-size:.75rem}.habitat-desc{font-size:.65rem;opacity:.6}.habitat-count{background:#ffffff26;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;min-width:24px;text-align:center}.info-panel{position:absolute;bottom:2vh;left:50%;transform:translate(-50%);display:flex;gap:24px;padding:12px 28px;background:#0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;border:1px solid rgba(255,255,255,.1);z-index:20}.stat{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:1.4rem;font-weight:800;color:gold}.stat-label{font-size:.65rem;color:#fff9;text-transform:uppercase;letter-spacing:.08em}@media(max-width:768px){.habitat-nav{top:auto;bottom:8vh;gap:4px;padding:6px}.habitat-card{padding:4px 8px;font-size:.7rem}.habitat-info .habitat-desc{display:none}.info-panel{bottom:auto;top:8vh;gap:16px;padding:8px 20px}.animal-emoji{font-size:1.5rem}}