*{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(20px,5vw,60px);font-size:clamp(80px,18vw,160px);filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}.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}.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(3,1fr);height:100%;position:relative}.habitat{position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12%;overflow:hidden;border-right:4px dashed rgba(255,255,255,.4);transition:filter .2s}.habitat:last-child{border-right:none}.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}.silueta-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;animation:silueteaPulse 2s ease-in-out infinite}.silueta{font-size:clamp(90px,18vw,170px);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{font-size:clamp(100px,20vw,200px);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}.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;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.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}.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)}}@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)}}