*{box-sizing:border-box}

html,body{height:100%;margin:0;overflow:hidden}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background:#8ed3f7;
  -webkit-user-select:none;user-select:none;
}

/* ---------------- escenario ---------------- */
#habitat{position:fixed;inset:0;overflow:hidden}

.sky{position:absolute;inset:0;transition:opacity 3s ease}
.sky-day{background:linear-gradient(#7ec9f5 0%,#bfe6fb 42%,#a8dc86 58%,#7cc357 100%)}
.sky-sunset{background:linear-gradient(#4b3f8f 0%,#f2874f 45%,#f7c56a 62%,#8cc469 100%);opacity:0}
.sky-night{background:linear-gradient(#101a3d 0%,#243566 45%,#2f5138 70%,#28472e 100%);opacity:0}

#habitat[data-phase="sunset"] .sky-sunset{opacity:1}
#habitat[data-phase="night"] .sky-sunset{opacity:.35}
#habitat[data-phase="night"] .sky-night{opacity:1}
#habitat[data-phase="dawn"] .sky-sunset{opacity:.6}

.stars{position:absolute;inset:0 0 45% 0;pointer-events:none}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transition:opacity 2.5s ease;box-shadow:0 0 6px #fff}
#habitat[data-phase="night"] .star{opacity:.9;animation:twinkle 3s ease-in-out infinite}

.sun{
  position:absolute;top:8%;left:12%;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6c4,#ffd93b);
  box-shadow:0 0 60px 22px rgba(255,222,90,.55);
  transition:opacity 2.5s ease,transform 3s ease;
}
.moon{
  position:absolute;top:10%;right:14%;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fdfdf4,#cfd6ea);
  box-shadow:0 0 40px 12px rgba(220,228,255,.45);
  opacity:0;transition:opacity 2.5s ease;
}
#habitat[data-phase="night"] .sun{opacity:0;transform:translateY(60px)}
#habitat[data-phase="sunset"] .sun{background:radial-gradient(circle at 35% 35%,#ffe9b0,#ff9d3b)}
#habitat[data-phase="night"] .moon,#habitat[data-phase="dawn"] .moon{opacity:1}

.cloud{
  position:absolute;background:#fff;border-radius:60px;opacity:.9;
  box-shadow:34px 12px 0 -6px #fff,-34px 14px 0 -8px #fff,0 -16px 0 -6px #fff;
  animation:drift linear infinite;
}
.c1{width:96px;height:38px;top:14%;left:-140px;animation-duration:52s}
.c2{width:70px;height:28px;top:26%;left:-160px;animation-duration:74s;animation-delay:-22s;opacity:.75}
.c3{width:110px;height:42px;top:7%;left:-180px;animation-duration:96s;animation-delay:-48s;opacity:.8}
#habitat[data-phase="night"] .cloud{opacity:.22}

.hills{
  position:absolute;left:-6%;right:-6%;bottom:36%;height:26%;
  background:
    radial-gradient(60% 100% at 18% 100%,#8fd06a 60%,transparent 61%),
    radial-gradient(55% 90% at 55% 100%,#7cc45c 60%,transparent 61%),
    radial-gradient(50% 100% at 88% 100%,#8fd06a 60%,transparent 61%);
}
.ground{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(#86cc62,#5fae46 60%,#4f9c3c);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.22);
}
.ground::after{
  content:"";position:absolute;inset:0;opacity:.25;
  background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(255,255,255,.5) 22px 24px);
}

/* ---------------- decoro ---------------- */
.tree{position:absolute;left:6%;bottom:30%;width:130px;height:210px}
.trunk{position:absolute;left:52px;bottom:0;width:26px;height:110px;background:linear-gradient(90deg,#8b5a33,#a9713f);border-radius:8px}
.leaf{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7ed06a,#3f9440);box-shadow:inset -6px -8px 0 rgba(0,0,0,.08)}
.l1{width:110px;height:100px;left:10px;top:0}
.l2{width:92px;height:86px;left:-14px;top:44px}
.l3{width:96px;height:88px;left:52px;top:36px}

.house{position:absolute;right:7%;bottom:30%;width:190px;height:150px}
.walls{position:absolute;left:12px;bottom:0;width:166px;height:100px;background:linear-gradient(#e8b47c,#d59a60);border-radius:8px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)}
.roof{position:absolute;top:6px;left:-6px;width:0;height:0;border-left:101px solid transparent;border-right:101px solid transparent;border-bottom:64px solid #c9573f;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.door{position:absolute;left:60px;bottom:0;width:56px;height:66px;background:#7c4a2e;border-radius:28px 28px 0 0;box-shadow:inset 0 0 0 5px #a46a3f}
.window{position:absolute;left:24px;bottom:52px;width:30px;height:30px;border-radius:6px;background:#bfe6fb;box-shadow:inset 0 0 0 4px #a46a3f}

.bed{
  position:absolute;right:16%;bottom:14%;width:118px;height:56px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#ffd9e6,#f291b8);
  box-shadow:0 6px 0 rgba(0,0,0,.12),inset 0 0 0 6px rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.bed::before{content:"";position:absolute;left:8px;top:-14px;width:44px;height:30px;border-radius:14px;background:#fff0f5;box-shadow:inset 0 -4px 0 rgba(0,0,0,.06)}

.bowl{position:absolute;left:24%;bottom:11%;width:78px;height:34px;border-radius:0 0 40px 40px;background:linear-gradient(#f26a5a,#c93f32);box-shadow:0 5px 0 rgba(0,0,0,.14)}
.bowl::before{content:"";position:absolute;top:-7px;left:0;right:0;height:16px;border-radius:50%;background:#ff8b7d}
.bowl i{position:absolute;top:-3px;left:12px;right:12%;height:9px;border-radius:50%;background:#8a5a33;opacity:0;transition:opacity .35s}
.bowl.full i{opacity:1}

.flowers{position:absolute;inset:auto 0 2% 0;height:26%;pointer-events:none}
.flower{position:absolute;font-size:16px;filter:saturate(1.1)}

.ball{
  position:absolute;width:34px;height:34px;border-radius:50%;z-index:6;
  background:conic-gradient(#ff6b6b 0 25%,#ffd93b 0 50%,#4dc9ff 0 75%,#9b6bff 0);
  box-shadow:inset -4px -5px 0 rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.2);
  transform:translate(-50%,-50%);
}
.hidden{display:none!important}

/* ---------------- mascota ---------------- */
.pet{
  position:absolute;left:0;top:0;width:132px;height:92px;z-index:8;
  transform:translate3d(0,0,0);cursor:pointer;outline:none;
}
.pet .shadow{
  position:absolute;left:50%;bottom:2px;width:86px;height:16px;
  transform:translateX(-50%);border-radius:50%;
  background:rgba(20,40,20,.28);filter:blur(4px);
}
.flip{position:absolute;inset:0;transition:transform .25s ease}
.pet-svg{display:block;animation:bob .55s ease-in-out infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}

.face,.body{fill:#f6a356}
.belly{fill:#ffe8cf}
.stripe{fill:none;stroke:#e07f2e;stroke-width:5;stroke-linecap:round;opacity:.85}
.ear{fill:#f6a356;stroke:#e07f2e;stroke-width:2}
.ear-in{fill:#ffc9c0;stroke:none}
.eye-open{fill:#2c2c34}
.glint{fill:#fff}
.eye-shut{fill:none;stroke:#2c2c34;stroke-width:2.6;stroke-linecap:round;opacity:0}
.nose{fill:#e9637a}
.mouth{fill:none;stroke:#8a5a3b;stroke-width:2;stroke-linecap:round}
.whisker{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;opacity:.9}
.leg{fill:#f09546}
.leg.alt{fill:#f6a356}
.tail{transform-box:fill-box;transform-origin:100% 100%;animation:wag 1.4s ease-in-out infinite}
.legs .leg{transform-box:fill-box;transform-origin:50% 0;animation:step .5s ease-in-out infinite}
.legs .leg.alt{animation-delay:-.25s}
.head{transform-box:fill-box;transform-origin:50% 80%}

.eye-shut{transition:opacity .3s}
.eye-open,.glint{transition:opacity .3s}

.pet.is-idle .pet-svg{animation-duration:1.3s}
.pet.is-idle .legs .leg,.pet.is-pet .legs .leg{animation-play-state:paused}
.pet.is-run .pet-svg{animation-duration:.3s}
.pet.is-run .legs .leg{animation-duration:.26s}
.pet.is-run .tail{animation-duration:.5s}
.pet.is-sleep .pet-svg,.pet.is-eat .pet-svg{animation:none}
.pet.is-sleep .legs .leg,.pet.is-eat .legs .leg{animation-play-state:paused}
.pet.is-sleep .tail{animation-duration:2.6s}
.pet.is-eat .head{animation:eatHead .42s ease-in-out infinite}

.pet.is-sleep .eye-open,.pet.is-sleep .glint{opacity:0}
.pet.is-sleep .eye-shut{opacity:1}

.bubble{
  position:absolute;left:50%;top:-42px;transform:translate(-50%,6px);
  max-width:190px;padding:7px 12px;border-radius:14px;
  background:#fff;color:#3b3b46;font-size:13px;line-height:1.3;font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.18);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;white-space:nowrap;z-index:9;
}
.bubble::after{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:#fff;border-bottom:0;
}
.bubble.show{opacity:1;transform:translate(-50%,0)}

.zzz{
  position:absolute;right:-4px;top:-16px;font-size:24px;opacity:0;
  transition:opacity .3s;pointer-events:none;
  animation:floatZ 2s ease-in-out infinite;
}
.pet.is-sleep .zzz{opacity:1}

.fx{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.spark{
  position:absolute;font-size:18px;transform:translate(-50%,-50%);
  animation:rise 1.15s ease-out forwards;
}

/* ---------------- panel ---------------- */
.panel{
  position:absolute;top:16px;left:16px;width:264px;z-index:30;
  padding:14px 14px 12px;border-radius:20px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(20,40,70,.22);
  border:1px solid rgba(255,255,255,.85);
}
.panel-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.avatar{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:24px;background:linear-gradient(135deg,#ffd93b,#ff9d3b);
  box-shadow:0 4px 10px rgba(255,157,59,.4);
}
.panel h1{margin:0;font-size:19px;color:#2b2b3a}
.panel-head p{margin:2px 0 0;font-size:12px;color:#5d6474}

.stat{margin-bottom:9px}
.stat label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#4a5162;margin-bottom:4px}
.stat b{color:#2b2b3a}
.bar{height:10px;border-radius:99px;background:rgba(30,40,70,.12);overflow:hidden}
.bar i{display:block;height:100%;width:70%;border-radius:99px;transition:width .5s ease,background .5s}
#bar-hunger{background:linear-gradient(90deg,#ffb03a,#ff7a45)}
#bar-joy{background:linear-gradient(90deg,#ff7bb2,#ff4f81)}
#bar-energy{background:linear-gradient(90deg,#9be15d,#4cc96f)}
.bar.low i{animation:pulse 1s ease-in-out infinite;filter:saturate(1.4)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.actions button{
  border:0;padding:10px 6px;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:#33333f;
  background:linear-gradient(#ffffff,#eef1f7);
  box-shadow:0 3px 0 rgba(30,40,70,.16);
  transition:transform .12s ease,box-shadow .12s ease,filter .2s;
}
.actions button:hover{filter:brightness(1.04)}
.actions button:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.actions button:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}
.actions button.on{background:linear-gradient(#ffe07a,#ffcb3d)}

.log{list-style:none;margin:12px 0 0;padding:8px 8px 4px;height:86px;overflow:hidden;
  border-radius:12px;background:rgba(30,40,70,.07);font-size:11.5px;color:#4a5162}
.log li{margin-bottom:5px;line-height:1.35;animation:slideIn .3s ease}
.log li b{color:#2b2b3a}

.hint{margin:10px 0 0;font-size:10.5px;color:#77809a;text-align:center}

/* ---------------- animaciones ---------------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes step{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}}
@keyframes wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}
@keyframes eatHead{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(6deg)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 320px))}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  25%{opacity:1}100%{opacity:0;transform:translate(-50%,-170px) scale(1.25)}}
@keyframes floatZ{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:760px){
  .panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;padding:10px 12px}
  .panel-head{margin-bottom:8px}
  .log,.hint{display:none}
  .stat{display:inline-block;width:32%;margin:0 1% 6px 0;vertical-align:top}
  .actions{grid-template-columns:repeat(4,1fr);margin-top:8px}
  .actions button{font-size:11.5px;padding:9px 2px}
  .house{transform:scale(.75);transform-origin:bottom right}
  .tree{transform:scale(.8);transform-origin:bottom left}
}