:root{
  --crema:#F7F0E4; --terracota:#C97B4A; --terra-sombra:#A85F30; --verde:#7FA37A;
  --tinta:#3D2E22; --gris:#8A7A6B; --blanco:#fff;
  --rosa:#F2A48A; --azul:#9FB3C8; --amarillo:#F4C95D;
  --seguro-arriba:env(safe-area-inset-top,0px); --seguro-abajo:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--crema);color:var(--tinta);font-family:Nunito,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
h1,h2,.nombre,.btn-grande,.intro-txt{font-family:"Baloo 2",Nunito,sans-serif}
#app{height:100dvh;max-width:520px;margin:0 auto;position:relative}
.pantalla{position:absolute;inset:0;display:flex;flex-direction:column}
[hidden]{display:none!important}

/* ---------- Intro ---------- */
#intro{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#fff8ee 0,var(--crema) 60%,#efdcc4 100%)}
.intro-caja{text-align:center;padding:24px;width:100%}
.intro-logo{width:200px;max-width:60%;mix-blend-mode:multiply;border-radius:24px}
.intro-txt{font-size:1.6rem;font-weight:800;margin:14px 0}
.intro-pet{width:150px;animation:aparece .8s cubic-bezier(.2,1.6,.4,1) both, respira 3s ease-in-out .8s infinite}
#nombre{font:800 1.6rem Nunito;text-align:center;padding:14px;border-radius:18px;border:3px solid var(--terracota);width:80%;max-width:300px;color:var(--tinta);background:#fff;user-select:text;-webkit-user-select:text}
.regalo{position:relative;width:170px;height:170px;margin:20px auto;cursor:pointer;animation:tiembla 1.6s ease-in-out infinite}
.regalo-caja{position:absolute;bottom:0;left:15px;width:140px;height:110px;border-radius:16px;background:linear-gradient(#e38f62,var(--terracota));box-shadow:0 8px 0 var(--terra-sombra)}
.regalo-tapa{position:absolute;top:28px;left:5px;width:160px;height:40px;border-radius:12px;background:linear-gradient(#f0a57a,#d98a5c);box-shadow:0 6px 0 var(--terra-sombra);z-index:2;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.regalo-mono{position:absolute;left:73px;top:28px;width:24px;height:142px;background:var(--amarillo);z-index:3;border-radius:6px}
.regalo.abierto{animation:none}
.regalo.abierto .regalo-tapa{transform:translate(40px,-120px) rotate(40deg)}
.regalo.abierto .regalo-mono{opacity:0;transition:opacity .2s}

/* ---------- Barra ---------- */
.barra{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--seguro-arriba)) 12px 6px}
.nombre{display:flex;flex-direction:column;line-height:1;font-size:1.35rem;font-weight:800;min-width:72px}
.nombre small{font:800 .8rem Nunito;color:var(--gris);margin-top:3px}
.medidores{flex:1;display:flex;justify-content:space-around}
.medidor{position:relative;width:52px;height:52px}
.medidor svg{position:absolute;inset:0;transform:rotate(-90deg)}
.medidor .ico{position:absolute;inset:0;display:grid;place-items:center;font-size:1.45rem}
.medidor.bajo{animation:late 1s ease-in-out infinite}
.btn-icono{border:0;background:#fff;border-radius:50%;width:40px;height:40px;font-size:1.2rem;box-shadow:0 4px 0 #0001}

/* ---------- Lugares ---------- */
.lugares{display:flex;gap:6px;padding:4px 10px 8px;overflow-x:auto;scrollbar-width:none}
.lugares::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:0;border-radius:999px;padding:8px 13px;font:800 .95rem Nunito;background:#fff;color:var(--tinta);box-shadow:0 4px 0 #0000001a;transition:transform .15s}
.chip.activo{background:var(--terracota);color:#fff;box-shadow:0 4px 0 var(--terra-sombra)}
.chip:active{transform:translateY(3px);box-shadow:none}

/* ---------- Escenario ---------- */
.escenario{position:relative;flex:1;margin:0 10px;border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 4px #ffffff80,0 10px 30px #3d2e2222}
.fondo{position:absolute;inset:0;transition:opacity .5s}
.fondo svg{width:100%;height:100%;display:block}
#particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.pet-zona{position:absolute;left:50%;bottom:9%;width:46%;max-width:210px;transform:translateX(-50%);z-index:3;transition:left 1.4s ease-in-out}
.pet{position:relative;transform-origin:50% 100%;animation:respira 3.2s ease-in-out infinite;cursor:pointer}
.pet img{width:100%;display:block;filter:drop-shadow(0 6px 6px #0002);transition:filter .6s, transform .3s}
.sombra{position:absolute;left:12%;right:12%;bottom:-4%;height:9%;border-radius:50%;background:radial-gradient(#0003,#0000 70%)}
.pet.voltea img{transform:scaleX(-1)}
.pet.triste img{filter:drop-shadow(0 6px 6px #0002) saturate(.6) brightness(.93)}
.pet.sucio img{filter:drop-shadow(0 6px 6px #0002) sepia(.35) saturate(.8)}
.pet.dormido{animation:respiraLento 4.5s ease-in-out infinite}
.pet.dormido img{transform:rotate(-8deg) translateY(6%)}
.pet.brinca{animation:brinca .55s cubic-bezier(.3,1.6,.5,1)}
.pet.aplasta{animation:aplasta .35s ease-out}
.pet.baila{animation:baila .5s ease-in-out infinite}
.pet.camina{animation:camina .4s ease-in-out infinite}
.pet.abrazo{animation:abrazo .9s ease-in-out 2}
.pet.come{animation:come .35s ease-in-out infinite}
.pet.no{animation:no .45s ease-in-out}
.ropa,.mugre,.prop{position:absolute;inset:0;pointer-events:none}
.ropa span{position:absolute;font-size:3.2rem;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px #0002);animation:pop .5s cubic-bezier(.2,1.8,.4,1) both}
.mugre i{position:absolute;width:12%;aspect-ratio:1.3;border-radius:50%;background:radial-gradient(#6b4b2ad0,#6b4b2a60 60%,#0000 72%)}
.mugre .mosca{position:absolute;font-size:1.2rem;animation:mosca 2.4s linear infinite}
.prop span{position:absolute;left:62%;top:52%;font-size:3rem;transform:translate(-50%,-50%);transition:transform .4s;filter:drop-shadow(0 3px 2px #0002)}
.globo{position:absolute;left:68%;top:-6%;background:#fff;padding:7px 12px;border-radius:16px;font:800 1rem Nunito;white-space:nowrap;box-shadow:0 4px 0 #0000001a;animation:pop .35s cubic-bezier(.2,1.8,.4,1) both;z-index:4}
.globo::after{content:"";position:absolute;left:12px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.tina{position:absolute;left:50%;bottom:4%;width:64%;max-width:280px;height:17%;transform:translateX(-50%);z-index:4;border-radius:0 0 46% 46%/0 0 70% 70%;background:linear-gradient(#ffffff,#dbe8f3);box-shadow:inset 0 -8px 0 #b9cde0,0 6px 0 #0000001a;animation:subeTina .5s cubic-bezier(.2,1.5,.4,1) both}
.tina::before{content:"";position:absolute;left:-4%;right:-4%;top:-10%;height:28%;border-radius:999px;background:radial-gradient(circle at 20% 50%,#fff 0 22%,#0000 23%),radial-gradient(circle at 45% 40%,#fff 0 26%,#0000 27%),radial-gradient(circle at 72% 55%,#fff 0 22%,#0000 23%),#eaf4fb}
.noche{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,#1b255055,#0b103099);opacity:0;transition:opacity 1.2s;z-index:2}
.noche.on{opacity:1}

/* ---------- Bandeja y acciones ---------- */
.bandeja{display:flex;gap:8px;overflow-x:auto;padding:10px 12px 4px;scrollbar-width:none;animation:subeBandeja .3s cubic-bezier(.2,1.5,.4,1) both}
.bandeja::-webkit-scrollbar{display:none}
.item{flex:0 0 auto;width:64px;height:64px;border-radius:20px;border:0;background:#fff;font-size:2rem;box-shadow:0 5px 0 #0000001a;position:relative}
.item:active{transform:translateY(3px);box-shadow:none}
.item.candado{filter:grayscale(1);opacity:.65}
.item.candado::after{content:"🔒";position:absolute;right:-4px;top:-6px;font-size:1rem;filter:none}
.item small{position:absolute;left:0;right:0;bottom:-2px;font:800 .6rem Nunito;color:var(--gris)}
.acciones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 12px calc(12px + var(--seguro-abajo))}
.accion{border:0;border-radius:22px;padding:8px 0 6px;background:#fff;box-shadow:0 6px 0 #0000001f;display:flex;flex-direction:column;align-items:center;gap:2px;font:800 .8rem Nunito;color:var(--tinta);transition:transform .1s}
.accion .ico{font-size:1.9rem;line-height:1.1}
.accion:active{transform:translateY(4px);box-shadow:0 2px 0 #0000001f}
.accion.activa{background:var(--terracota);color:#fff;box-shadow:0 6px 0 var(--terra-sombra)}
.accion:disabled{opacity:.5}

/* ---------- Diálogo ---------- */
dialog{border:0;border-radius:24px;padding:20px;width:min(92vw,400px);background:var(--crema);color:var(--tinta);box-shadow:0 20px 60px #0004}
dialog::backdrop{background:#3d2e2266;backdrop-filter:blur(3px)}
dialog h2{margin:0 0 10px}
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-weight:800}
.fila input{width:26px;height:26px;accent-color:var(--terracota)}
.btn{display:block;width:100%;margin:8px 0;padding:12px;border:0;border-radius:16px;background:#fff;font:800 1rem Nunito;color:var(--tinta);box-shadow:0 4px 0 #0000001a}
.btn.peligro{color:#b4462b}
.nota{font-size:.85rem;color:var(--gris)}
.btn-grande{display:block;margin:14px auto 0;padding:14px 34px;border:0;border-radius:20px;background:var(--terracota);color:#fff;font-size:1.4rem;font-weight:800;box-shadow:0 7px 0 var(--terra-sombra)}
.btn-grande:active{transform:translateY(5px);box-shadow:0 2px 0 var(--terra-sombra)}

/* ---------- Animaciones ---------- */
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes respiraLento{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}
@keyframes brinca{0%{transform:scale(1)}25%{transform:scale(1.12,.86)}55%{transform:translateY(-22%) scale(.94,1.08)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:scale(1)}}
@keyframes aplasta{0%{transform:scale(1)}40%{transform:scale(1.15,.82)}100%{transform:scale(1)}}
@keyframes baila{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8%)}}
@keyframes camina{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-4%)}}
@keyframes abrazo{0%,100%{transform:scale(1)}50%{transform:scale(1.12,.9)}}
@keyframes come{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.95)}}
@keyframes no{0%,100%{transform:translateX(0)}25%{transform:translateX(-6%)}75%{transform:translateX(6%)}}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(0)}100%{transform:translate(-50%,-50%) scale(1)}}
.globo{transform-origin:10% 100%}
@keyframes aparece{0%{transform:scale(0) rotate(-20deg);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes tiembla{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-6deg)}85%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes mosca{0%{transform:translate(0,0)}25%{transform:translate(30px,-14px)}50%{transform:translate(8px,-30px)}75%{transform:translate(-22px,-10px)}100%{transform:translate(0,0)}}
@keyframes subeTina{0%{transform:translate(-50%,120%)}100%{transform:translate(-50%,0)}}
@keyframes subeBandeja{0%{transform:translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes nube{0%{transform:translateX(-30%)}100%{transform:translateX(130%)}}
@keyframes mece{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes columpio{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes pato{0%,100%{transform:translateX(0)}50%{transform:translateX(60px)}}
@keyframes titila{0%,100%{opacity:.25}50%{opacity:1}}
.anim-nube{animation:nube 38s linear infinite}
.anim-nube.lenta{animation-duration:55s;animation-delay:-20s}
.anim-mece{transform-box:fill-box;transform-origin:50% 100%;animation:mece 4s ease-in-out infinite}
.anim-columpio{transform-box:fill-box;transform-origin:50% 0;animation:columpio 2.6s ease-in-out infinite}
.anim-pato{animation:pato 9s ease-in-out infinite}
.anim-titila{animation:titila 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}