*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body,#app{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:#fce7f3;touch-action:manipulation;overscroll-behavior:none;color:#422006}#app{display:flex;flex-direction:column;position:relative;width:100%;height:100%}.title{font-size:clamp(38px,8vw,80px);font-weight:900;text-align:center;color:#fff;text-shadow:4px 4px 0 #be185d,8px 8px 0 rgba(0,0,0,.15);line-height:1;letter-spacing:1.5px}.big-button{font-size:clamp(28px,5vw,44px);font-weight:900;padding:24px 56px;border:none;border-radius:36px;background:linear-gradient(180deg,#fb923c,#ea580c);color:#fff;box-shadow:0 8px #9a3412,0 14px 28px #00000059;cursor:pointer;transition:transform .08s,box-shadow .08s;min-width:240px;min-height:96px;letter-spacing:2px;text-shadow:2px 2px 0 rgba(0,0,0,.3)}.big-button:active{transform:translateY(4px);box-shadow:0 4px #9a3412}.back-btn{background:#fff;border:none;border-radius:50%;width:72px;height:72px;font-size:36px;font-weight:800;color:#92400e;box-shadow:0 4px #d97706,0 6px 14px #0000004d;cursor:pointer;position:absolute;top:16px;left:16px;z-index:30;display:flex;align-items:center;justify-content:center}.back-btn:active{transform:translateY(2px);box-shadow:0 2px #d97706}.start-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px;background:linear-gradient(180deg,#fef3c7,#fed7aa,#fda4af 70%,#f0abfc);position:relative;overflow:hidden}.start-animales{display:flex;gap:clamp(10px,3vw,34px);font-size:clamp(54px,12vw,104px);filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));line-height:1}.start-animales>span:nth-child(1){animation:bobble 2.4s ease-in-out infinite}.start-animales>span:nth-child(2){animation:bobble 2.4s ease-in-out infinite -.5s}.start-animales>span:nth-child(3){animation:bobble 2.4s ease-in-out infinite -1.1s}.start-floor{position:absolute;bottom:-10vh;width:140%;height:30vh;background:radial-gradient(ellipse at center top,#4ade80,#15803d 70%);border-radius:50% 50% 0 0;z-index:0}.start-screen>*{position:relative;z-index:1}.start-sol{position:absolute!important;top:5%;left:7%;font-size:clamp(60px,12vw,110px);line-height:1;animation:floatY 5s ease-in-out infinite;filter:drop-shadow(0 6px 18px rgba(245,158,11,.5));z-index:0!important}.start-nube{position:absolute!important;font-size:clamp(40px,8vw,72px);line-height:1;opacity:.95;z-index:0!important}.start-nube.n1{top:9%;animation:floatX 28s linear infinite}.start-nube.n2{top:22%;animation:floatX 36s linear infinite -14s}.puerta-zoo{position:relative;width:min(76vw,480px);height:min(32vh,270px);border:clamp(10px,2vw,16px) solid #b45309;border-bottom:none;border-radius:999px 999px 0 0;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#ffffff59,#fff0 75%);box-shadow:0 10px 26px #7c2d1259,inset 0 0 0 4px #ffffff4d}.puerta-zoo .globo{position:absolute;font-size:clamp(38px,7vw,64px);line-height:1;animation:floatY 3.4s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}.globo.g1{left:-.55em;top:-.4em}.globo.g2{right:-.55em;top:-.25em;animation-delay:-1.6s}.zoo-screen{width:100%;height:100%;position:relative;overflow:hidden;display:grid;grid-template-rows:28vh 1fr;transition:filter 1s}.zoo-screen.noche{filter:brightness(.55) saturate(.85) hue-rotate(-15deg)}.cielo{position:relative;background:linear-gradient(180deg,#7dd3fc,#bae6fd 60%,#e0f2fe);overflow:hidden;border-bottom:4px solid rgba(0,0,0,.06)}.zoo-screen.noche .cielo{background:linear-gradient(180deg,#1e1b4b,#312e81 60%,#4338ca)}.sol-luna{position:absolute;top:12%;right:12%;font-size:clamp(60px,13vw,110px);cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));animation:floatY 4s ease-in-out infinite;z-index:4}.sol-luna:active{transform:scale(1.15)}.nube{position:absolute;font-size:clamp(50px,10vw,90px);cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));z-index:3}.nube.nube-1{top:8%;left:8%;animation:floatX 14s linear infinite}.nube.nube-2{top:30%;left:35%;animation:floatX 18s linear infinite -7s}.nube:active{transform:scale(1.15)}.lluvia-gota{position:absolute;font-size:22px;pointer-events:none;animation:caer 1.4s ease-in forwards;z-index:2}@keyframes caer{0%{transform:translateY(0);opacity:0}10%{opacity:1}to{transform:translateY(70vh);opacity:0}}.habitats{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);height:100%;position:relative}@media (orientation: portrait){.habitats{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}}.habitat{position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6%;overflow:hidden;border:2px dashed rgba(255,255,255,.35);transition:filter .2s}.habitat:active{filter:brightness(1.05)}.coleccion-chip{position:absolute;top:16px;right:16px;background:#fff;border-radius:999px;padding:10px 18px;font-weight:900;font-size:clamp(16px,3vw,22px);color:#92400e;box-shadow:0 4px 12px #00000040;display:flex;align-items:center;gap:8px;z-index:20}.coleccion-chip .estrellas{display:inline-flex;gap:2px}.coleccion-chip .estrella{font-size:22px;filter:grayscale(1) opacity(.35);transition:filter .4s,transform .4s}.coleccion-chip .estrella.on{filter:none;animation:pop .6s ease}.coleccion-chip.muchas{padding:8px 14px}.coleccion-chip.muchas .estrella{font-size:15px}.escenario{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.sombra{position:absolute;bottom:3.5%;left:50%;transform:translate(-50%);width:36%;height:7%;background:radial-gradient(ellipse at center,rgba(0,0,0,.22) 0%,transparent 70%);z-index:3;pointer-events:none}.silueta-wrap{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;animation:silueteaPulse 2s ease-in-out infinite}.silueta{font-size:clamp(50px,10vw,110px);opacity:.25;filter:grayscale(1) blur(1px);line-height:1}.silueta-hint{font-size:32px;opacity:.7;animation:bobble 1.2s ease-in-out infinite}@keyframes silueteaPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05);opacity:.95}}.animal{position:relative;font-size:clamp(56px,11vw,130px);line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));animation:bobble 2.6s ease-in-out infinite;cursor:pointer;user-select:none;z-index:4}.accesorio{position:absolute;top:-.32em;left:50%;transform:translate(-50%) rotate(-8deg);font-size:.45em;line-height:1;pointer-events:none;animation:pop .5s ease}.cria{position:absolute;bottom:5%;right:7%;font-size:clamp(28px,5vw,56px);line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:bobble 1.8s ease-in-out infinite;cursor:pointer;z-index:5}.cria.acaba-llegar{animation:llegar .9s cubic-bezier(.34,1.56,.64,1),bobble 1.8s ease-in-out .9s infinite}.decoracion{position:absolute;font-size:clamp(20px,4vw,40px);line-height:1;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:pop .5s ease;z-index:2}.hab-btn{position:absolute;top:10px;width:48px;height:48px;border:none;border-radius:50%;background:#ffffffd9;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px #00000040;cursor:pointer;z-index:8;transition:transform .1s}.hab-btn:active{transform:scale(1.18)}.hab-btn.mic{left:10px}.hab-btn.hat{right:10px}.hab-btn.mic.grabando{background:#ef4444;animation:micPulse .7s ease-in-out infinite}@keyframes micPulse{0%,to{transform:scale(1);box-shadow:0 3px 8px #00000040}50%{transform:scale(1.25);box-shadow:0 0 0 10px #ef44444d}}.animal.acaba-llegar{animation:llegar .9s cubic-bezier(.34,1.56,.64,1)}@keyframes llegar{0%{transform:translateY(-50vh) scale(.3);opacity:0}60%{transform:translateY(10px) scale(1.15);opacity:1}to{transform:translateY(0) scale(1)}}.animal.anim-salto{animation:salto .7s cubic-bezier(.34,1.56,.64,1)}@keyframes salto{0%{transform:translateY(0)}40%{transform:translateY(-60px) rotate(-8deg)}70%{transform:translateY(0) rotate(4deg)}to{transform:translateY(0)}}.animal.anim-rugir{animation:rugir .8s ease;transform-origin:center bottom}@keyframes rugir{0%{transform:scale(1)}25%{transform:scale(1.3,.8)}50%{transform:scale(.9,1.2)}75%{transform:scale(1.15,.95)}to{transform:scale(1)}}.animal.anim-bostezo{animation:bostezo 1.2s ease}@keyframes bostezo{0%,to{transform:scale(1)}20%,80%{transform:scale(1.05) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}}.cuidar-screen{width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.cuidar-stage{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cuidar-animal{font-size:clamp(180px,35vw,360px);line-height:1;filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));transition:filter .4s,transform .4s;position:relative}.cuidar-animal:after{content:"";position:absolute;bottom:-.06em;left:50%;transform:translate(-50%);width:60%;height:.09em;background:radial-gradient(ellipse at center,rgba(0,0,0,.2) 0%,transparent 70%);z-index:-1}.cuidar-animal.feliz{animation:salto .7s cubic-bezier(.34,1.56,.64,1)}.cuidar-mancha{position:absolute;font-size:36px;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:opacity .3s,transform .3s}.cuidar-mancha.gone{opacity:0;transform:scale(2)}.cuidar-util{position:absolute;font-size:clamp(60px,12vw,110px);cursor:grab;touch-action:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));z-index:10;transition:transform .15s}.cuidar-util:active{cursor:grabbing}.cuidar-util.placed{animation:placed .7s cubic-bezier(.34,1.56,.64,1);cursor:default;pointer-events:none;z-index:5}@keyframes placed{0%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}.tap-hint{position:absolute;bottom:8%;left:50%;transform:translate(-50%);display:flex;gap:12px}.tap-hint .dot{width:20px;height:20px;border-radius:50%;background:#ffffff8c;border:3px solid #92400e;transition:background .3s}.tap-hint .dot.on{background:#22c55e;border-color:#15803d;animation:pop .4s ease}.celebra-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;background:radial-gradient(ellipse at center,#fce7f3,#f9a8d4,#a21caf);overflow:hidden;position:relative}.celebra-animal{font-size:clamp(180px,40vw,360px);filter:drop-shadow(0 12px 32px rgba(124,45,18,.5));animation:llegar 1s cubic-bezier(.34,1.56,.64,1),bobble 2.2s ease-in-out 1s infinite;position:relative;z-index:2}.celebra-arcoiris{position:absolute;top:6%;left:50%;transform:translate(-50%);font-size:clamp(160px,38vw,340px);line-height:1;opacity:.85;z-index:1;pointer-events:none;animation:pop 1.2s ease}.confeti{position:absolute;top:-8%;font-size:clamp(22px,4vw,38px);line-height:1;z-index:3;pointer-events:none;animation:confetiCae 3s linear forwards}@keyframes confetiCae{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(115vh) rotate(360deg);opacity:.7}}.spark{position:absolute;font-size:clamp(28px,5vw,48px);animation:sparkFly 3s ease-in-out infinite;opacity:0;pointer-events:none}@keyframes sparkFly{0%{opacity:0;transform:scale(.5) rotate(0)}20%{opacity:1;transform:scale(1.2) rotate(180deg)}40%{opacity:1;transform:scale(1) rotate(360deg)}to{opacity:0;transform:scale(.4) rotate(540deg)}}.musica-btn{position:absolute;top:16px;left:16px;z-index:30;width:56px;height:56px;border:none;border-radius:50%;background:#ffffffeb;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #00000040;cursor:pointer;transition:transform .1s,filter .2s,opacity .2s}.musica-btn:active{transform:scale(1.12)}.musica-btn.off{filter:grayscale(1);opacity:.55}.pajaro{position:absolute;font-size:26px;line-height:1;z-index:3;pointer-events:none;animation:pajaroVuela 9s linear forwards}@keyframes pajaroVuela{0%{transform:translate(-12vw)}to{transform:translate(112vw)}}.fugaz{position:absolute;font-size:30px;line-height:1;z-index:3;pointer-events:none;animation:fugazCae 1.6s ease-in forwards}@keyframes fugazCae{0%{transform:translate(0);opacity:0}15%{opacity:1}to{transform:translate(-45vw,30vh);opacity:0}}.estrellita{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;pointer-events:none}.zoo-screen.noche .estrellita{animation:twinkle 2.6s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.15}50%{opacity:.95}}.unicornio-volador{position:absolute;top:35%;font-size:clamp(50px,9vw,90px);cursor:pointer;filter:drop-shadow(0 6px 14px rgba(192,38,211,.5));animation:floatX 22s linear infinite,floatY 3s ease-in-out infinite;z-index:5;line-height:1}.unicornio-volador:active{transform:scale(1.2)}.particula{position:absolute;font-size:28px;pointer-events:none;z-index:15;animation:particulaSube 1s ease-out forwards;line-height:1}@keyframes particulaSube{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.2)}to{transform:translateY(-70px) scale(1);opacity:0}}.necesidad{position:absolute;top:8%;left:50%;transform:translate(-50%);background:#fff;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:34px;cursor:pointer;box-shadow:0 4px 12px #0000004d;animation:bobble 1.2s ease-in-out infinite;z-index:12}.necesidad:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);border:9px solid transparent;border-top-color:#fff}.necesidad.feliz{animation:pop .6s ease}.mantita{position:absolute;bottom:3%;left:50%;transform:translate(-50%);width:46%;height:24%;background:repeating-linear-gradient(45deg,#f472b6 0 10px,#fb7185 10px 20px,#fbbf24 20px 30px);border-radius:16px 16px 8px 8px;border:3px solid rgba(255,255,255,.7);box-shadow:0 4px 10px #00000040;z-index:6;pointer-events:none;animation:mantitaSube .5s ease-out}@keyframes mantitaSube{0%{transform:translate(-50%) translateY(40px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.zzz{position:absolute;top:10%;right:16%;font-size:28px;line-height:1;z-index:7;pointer-events:none;opacity:.9;animation:bobble 1.6s ease-in-out infinite}.animal.esp-sacudida{animation:espSacudida 1.2s ease}@keyframes espSacudida{0%,to{transform:rotate(0)}15%{transform:rotate(-14deg) scale(1.1)}30%{transform:rotate(12deg) scale(1.12)}45%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}75%{transform:rotate(-5deg)}}.animal.esp-ducha{animation:espDucha 1.4s ease}@keyframes espDucha{0%,to{transform:translateY(0)}25%{transform:translateY(-12px) rotate(-6deg)}50%{transform:translateY(0) rotate(5deg)}75%{transform:translateY(-8px) rotate(-4deg)}}.animal.esp-patinar{animation:espPatinar 1.7s ease-in-out}@keyframes espPatinar{0%{transform:translate(0)}25%{transform:translate(-90%) rotate(-10deg)}65%{transform:translate(85%) rotate(10deg)}to{transform:translate(0)}}.animal.esp-girar{animation:espGirar 1.6s ease-in-out}@keyframes espGirar{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animal.esp-rodar{animation:espRodar 1.4s ease}@keyframes espRodar{0%,to{transform:rotate(0) translateY(0)}20%{transform:rotate(-22deg) translateY(6px)}40%{transform:rotate(20deg) translateY(8px)}60%{transform:rotate(-16deg) translateY(5px)}80%{transform:rotate(12deg)}}.animal.esp-volar{animation:espVolar 1.8s ease-in-out}@keyframes espVolar{0%{transform:translate(0)}25%{transform:translate(-50%,-60%) rotate(-12deg)}50%{transform:translateY(-90%)}75%{transform:translate(50%,-50%) rotate(12deg)}to{transform:translate(0)}}.animal.esp-esconderse{animation:espEsconderse 1.5s ease;transform-origin:center bottom}@keyframes espEsconderse{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(55%) scaleY(.25)}55%{transform:translateY(55%) scaleY(.25)}80%{transform:translateY(-14%) scaleY(1.1)}to{transform:translateY(0) scaleY(1)}}@keyframes bobble{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes floatX{0%{transform:translate(-30vw)}to{transform:translate(120vw)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}