/* ============ CUIDE DO PIPOO - estilos ============ */
.pet-sec .game-bg{background:linear-gradient(180deg,#FF8DB8 0%,#FFB4D2 40%,#FFE9A8 100%)}
.pet-sec{overflow:clip}
.pet-card{max-width:760px;margin:0 auto;background:rgba(255,255,255,.96);border-radius:34px;padding:14px;border:6px solid #fff;box-shadow:0 12px 0 rgba(0,0,0,.12),0 30px 50px rgba(120,20,80,.25)}
.emo{font-size:2.5rem;line-height:1;display:block}

/* painel de necessidades */
.pet-top{display:grid;gap:8px;margin-bottom:10px}
.vitals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vital{display:grid;justify-items:center;gap:3px;background:var(--cream);border:3px solid #FFE0A0;border-radius:16px;padding:4px 6px 6px}
.vital span{font-size:1.35rem;line-height:1}
.vital i{display:block;width:100%;height:10px;border-radius:99px;background:#EADCF5;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
.vital i b{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#58D6A5,#2FBF8A);transition:width .5s,background .4s}
.vital.mid i b{background:linear-gradient(90deg,#FFD34D,#FFA400)}
.vital.low i b{background:linear-gradient(90deg,#FF6A6A,#E8344E)}
.vital.low{animation:vitalLow .8s ease-in-out infinite alternate;border-color:#FF9A9A}
@keyframes vitalLow{to{transform:scale(1.06)}}
.wallet{display:flex;gap:8px;align-items:center}
.coin{font-family:var(--f-d);font-size:1.2rem;background:linear-gradient(#FFE27A,#FFC82E);color:var(--wine);padding:.15em .8em;border-radius:999px;box-shadow:0 4px 0 #C98A00;white-space:nowrap}
.coin b{font-weight:400}
.lvl{flex:1;display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:1rem;color:var(--pink-d);min-width:0}
.lvl span{white-space:nowrap}.lvl span b{font-weight:400}
.lvl i{display:block;flex:1;height:12px;border-radius:99px;background:#F7D5E4;overflow:hidden}
.lvl i b{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF8DBA,#F0488C);border-radius:99px;transition:width .5s}
.pet-top .snd{width:46px;height:42px;flex:none}

/* palco */
.pet-stage{position:relative;height:clamp(420px,62svh,560px);border-radius:24px;overflow:hidden;border:4px solid #fff;isolation:isolate;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.room-bg{position:absolute;inset:0;z-index:0;transition:background .4s}
.room-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:var(--floor,#E8B46E);box-shadow:inset 0 8px 0 rgba(255,255,255,.35)}
.room-kitchen .room-bg{--floor:repeating-conic-gradient(#fff 0 25%,#FFD0DF 0 50%) 0 0/48px 48px;background:linear-gradient(180deg,#FFF3C4,#FFE08A)}
.room-bath .room-bg{--floor:#D5ECFF;background:repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.7) 46px 49px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.7) 46px 49px),#A9DCFF}
.room-play .room-bg{--floor:linear-gradient(#8FD66A,#5EBE4B);background:radial-gradient(circle at 20% 30%,#fff 0 3px,transparent 4px) 0 0/60px 60px,linear-gradient(180deg,#8ED6FF,#FFD3E4)}
.room-bed .room-bg{--floor:#8A5A33;background:radial-gradient(circle,rgba(255,255,255,.6) 0 2px,transparent 3px) 0 0/44px 44px,linear-gradient(180deg,#5B3CC4,#8A6BE8)}
.room-closet .room-bg{--floor:#9A6230;background:repeating-linear-gradient(90deg,#D9A66B 0 38px,#CF9A5C 38px 40px)}
.room-clinic .room-bg{--floor:#E8F7F1;background:linear-gradient(180deg,#E2F9F0,#C7EFE0)}
.room-props i{position:absolute;font-style:normal;line-height:1;z-index:1;opacity:.95;filter:drop-shadow(0 3px 3px rgba(60,20,90,.25));pointer-events:none}
.room-props{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Pipoo */
.pet{position:absolute;left:50%;bottom:116px;height:56%;aspect-ratio:580/599;translate:-50% 0;z-index:3;cursor:pointer;touch-action:manipulation}
.room-closet .pet{bottom:172px;height:46%}
.room-bath .pet{bottom:58px;height:64%}
.room-bed .pet{bottom:40px;height:64%}
.pet-inner{position:relative;width:100%;height:100%;transform-origin:50% 100%;animation:petIdle 3.2s ease-in-out infinite;filter:drop-shadow(0 12px 8px rgba(40,10,70,.3))}
.pet-inner img{display:block;width:100%;height:100%;pointer-events:none}
.ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pet-shadow{position:absolute;left:12%;right:12%;bottom:-6px;height:16px;background:rgba(40,10,70,.25);border-radius:50%;filter:blur(6px);z-index:-1}
@keyframes petIdle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-8px) scale(1.015,.985)}}
.pet-inner.is-happy{animation-duration:2.2s}
.pet-inner.is-sleep{animation:petSleep 4s ease-in-out infinite}
@keyframes petSleep{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.pet-inner.is-sleep::after{content:"💤";position:absolute;right:-4%;top:2%;font-size:2.3rem;animation:zz 2.4s ease-in infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,12px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(20px,-40px) scale(1.2)}}
.pet-inner.is-hungry{animation:petHungry .7s ease-in-out infinite}
@keyframes petHungry{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
.pet-inner.is-sad,.pet-inner.is-dirty{animation:none;transform:scaleY(.97);filter:drop-shadow(0 12px 8px rgba(40,10,70,.3)) brightness(.93) saturate(.85)}
.pet-inner.is-sick{filter:drop-shadow(0 12px 8px rgba(40,10,70,.3)) hue-rotate(62deg) saturate(.8) brightness(.97);animation:petSick 1.6s ease-in-out infinite}
@keyframes petSick{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(2px)}}
.pet-inner.want{transform:scale(1.07)}
.pet-inner.chomp{animation:chomp .5s ease-in-out 2}
@keyframes chomp{0%,100%{transform:scale(1,1)}40%{transform:scale(1.07,.93)}70%{transform:scale(.96,1.06)}}
.pet-inner.jump{animation:jumpP .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes jumpP{0%{transform:translateY(0)}35%{transform:translateY(-60px) rotate(-4deg)}70%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
.pet-inner.no{animation:noP .5s}
@keyframes noP{20%{transform:translateX(-14px) rotate(-3deg)}40%{transform:translateX(14px) rotate(3deg)}60%{transform:translateX(-9px)}80%{transform:translateX(9px)}}
.pet-inner.dancing{animation:dancePet .6s ease-in-out infinite}
@keyframes dancePet{0%,100%{transform:rotate(-7deg) translateY(0)}25%{transform:rotate(0) translateY(-22px) scale(1.04)}50%{transform:rotate(7deg) translateY(0)}75%{transform:rotate(0) translateY(-22px) scale(1.04)}}
.tear{animation:tearDrop 1.6s ease-in infinite;transform-box:fill-box}
.tear.t2{animation-delay:.5s}
@keyframes tearDrop{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
.foam{animation:foamIn .25s var(--pop);transform-box:fill-box;transform-origin:center}
@keyframes foamIn{from{transform:scale(0)}}

/* balão de pensamento e fala */
.thought{position:absolute;left:calc(50% + 12%);top:11%;z-index:8;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:2rem;box-shadow:0 5px 0 rgba(0,0,0,.14),0 10px 18px rgba(0,0,0,.2);opacity:0;transform:scale(.3);transition:.35s var(--pop);pointer-events:none}
.thought.show{opacity:1;transform:none;animation:thoughtB 1.8s ease-in-out infinite .4s}
.thought::before,.thought::after{content:"";position:absolute;background:#fff;border-radius:50%;box-shadow:0 3px 0 rgba(0,0,0,.1)}
.thought::before{width:14px;height:14px;left:-6px;bottom:-4px}
.thought::after{width:8px;height:8px;left:-16px;bottom:-14px}
@keyframes thoughtB{50%{transform:translateY(-6px)}}
.pet-speech{position:absolute;left:50%;top:60px;translate:-50% 0;z-index:8;max-width:84%;width:max-content;background:#fff;color:var(--ink);font-weight:600;padding:.55em 1em;border-radius:18px;box-shadow:0 5px 0 rgba(0,0,0,.14),0 12px 22px rgba(0,0,0,.2);opacity:0;transition:opacity .3s;text-align:center;font-size:.95rem;line-height:1.25;pointer-events:none}
.pet-speech.pop{animation:speech .45s var(--pop)}
.stage-hint{position:absolute;left:50%;bottom:auto;top:10px;translate:-50% 0;z-index:7;max-width:92%;background:rgba(58,29,82,.78);color:#fff;font-weight:600;font-size:.82rem;padding:.35em .9em;border-radius:999px;text-align:center;opacity:0;transition:opacity .5s;pointer-events:none}
.stage-hint.show{opacity:1}
.pet-stage .banner{z-index:12}

/* banho, luz e noite */
.tub{position:absolute;left:50%;bottom:0;translate:-50% 0;width:min(88%,430px);height:21%;z-index:5;background:linear-gradient(#fff,#DCEEFF);border:5px solid #B7D8F2;border-bottom:0;border-radius:70px 70px 0 0;box-shadow:inset 0 10px 0 rgba(255,255,255,.8),0 -6px 14px rgba(40,10,70,.18)}
.tub::before{content:"";position:absolute;left:8%;right:8%;top:10px;height:14px;border-radius:99px;background:rgba(120,190,255,.45)}
.shower,.lamp{position:absolute;right:10px;top:10px;z-index:9;width:60px;height:60px;border-radius:50%;background:#fff;font-size:2rem;display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .2s var(--pop)}
.shower:hover,.lamp:hover{transform:scale(1.1) rotate(-6deg)}
.shower.pulse{animation:pulseS .6s infinite alternate;background:#FFF3B0}
@keyframes pulseS{to{transform:scale(1.18)}}
.pet-stage.rinsing::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(103deg,transparent 0 16px,rgba(150,210,255,.75) 16px 19px);animation:rainS .35s linear infinite}
@keyframes rainS{to{background-position:0 60px}}
.shower[hidden],.lamp[hidden],.tub[hidden]{display:none}
.night{position:absolute;inset:0;z-index:6;background:rgba(18,8,56,.66);opacity:0;pointer-events:none;transition:opacity .9s}
.night.on{opacity:1}
.wake{position:absolute;left:50%;top:10px;translate:-50% 0;z-index:13;font-family:var(--f-d);font-size:1rem;background:linear-gradient(#FFD34D,#FFA400);color:var(--wine);padding:.45em 1.1em;border-radius:999px;box-shadow:0 4px 0 #C98A00}
.wake[hidden]{display:none}
.sponge{position:absolute;z-index:11;font-size:3.2rem;translate:-50% -50%;rotate:-18deg;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.sponge[hidden]{display:none}
.bub{position:absolute;z-index:8;border-radius:50%;border:2px solid rgba(255,255,255,.95);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.98),rgba(190,230,255,.45) 55%,rgba(120,190,255,.5));cursor:pointer;touch-action:manipulation;padding:0}

/* prateleira */
.shelf{position:absolute;left:8px;right:8px;bottom:8px;z-index:9;background:rgba(255,255,255,.95);border-radius:20px;padding:6px 6px 8px;box-shadow:0 5px 0 rgba(0,0,0,.14),0 12px 22px rgba(0,0,0,.18)}
.shelf[hidden]{display:none}
.shelf-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:6px;align-items:center}
.arrow{width:34px;height:52px;border-radius:14px;background:linear-gradient(#FFD34D,#FFA400);color:var(--wine);font-family:var(--f-d);font-size:1.8rem;line-height:1;box-shadow:0 4px 0 #C98A00;padding-bottom:4px}
.arrow:disabled{opacity:.35;box-shadow:none}
.shelf-items{position:relative;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:6px;min-width:0}
.sitem{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;background:var(--cream);border:3px solid #FFE0A0;border-radius:16px;padding:5px 2px 4px;min-width:0;touch-action:none;transition:transform .15s var(--pop),border-color .2s}
.sitem:not(.drag){touch-action:manipulation}
.sitem:hover{transform:translateY(-3px);border-color:var(--pink)}
.sitem.worn{border-color:var(--mint);background:#F0FFF8}
.sitem.shake{animation:noP .5s}
.sic{display:block;width:100%;pointer-events:none}
.sic svg{display:block;width:100%;max-width:54px;height:44px;margin:0 auto}
.sic .emo{font-size:2rem;height:44px;display:grid;place-items:center}
.snm{font-size:.68rem;font-weight:700;color:var(--ink);line-height:1.1;text-align:center;pointer-events:none;overflow-wrap:normal}
.price,.tag{font-style:normal;font-size:.66rem;font-weight:700;border-radius:999px;padding:0 6px;pointer-events:none}
.price{background:#FFE27A;color:var(--wine)}
.tag{background:#E0F3FF;color:#1B5FA8}.tag.on{background:var(--mint);color:#fff}
.pg{position:absolute;right:2px;bottom:-17px;font-size:.66rem;font-weight:700;background:rgba(58,29,82,.75);color:#fff;border-radius:999px;padding:0 7px}
.cat-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:6px}
.cat-tabs[hidden]{display:none}
.cat{display:grid;justify-items:center;font-family:var(--f-d);font-size:.72rem;line-height:1.1;padding:3px 1px;border-radius:12px;background:var(--cream);color:var(--ink-s)}
.cat span{font-size:1.2rem}
.cat.on{background:linear-gradient(#FF8DBA,#F0488C);color:#fff;box-shadow:0 3px 0 #B72A66}
.ghost{position:fixed;left:0;top:0;width:68px;height:68px;z-index:500;pointer-events:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));will-change:transform}
.ghost svg{width:100%;height:100%}
.ghost .emo{font-size:3rem}

/* mini jogo */
.mini{position:absolute;inset:0;z-index:20;background:linear-gradient(#8ED6FF,#CDEBFF 62%,#A9E08A);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:10px;gap:6px}
.mini[hidden]{display:none}
.mini-hud{display:flex;justify-content:space-between;font-family:var(--f-d);font-size:1.3rem;color:var(--ink)}
.mini-hud span{background:#fff;border-radius:999px;padding:.05em .8em;box-shadow:0 4px 0 rgba(0,0,0,.12)}
#mLives{color:#E8344E}
.mini-field{position:relative;overflow:hidden;touch-action:none;cursor:ew-resize;border-radius:16px}
.ball{position:absolute;left:0;top:0;width:40px;height:40px;will-change:transform;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.ball svg{display:block;width:100%;height:100%}
.mini-pipoo{position:absolute;left:0;bottom:0;height:auto;will-change:transform;pointer-events:none;filter:drop-shadow(0 6px 5px rgba(0,0,0,.3))}
.mini-tip{text-align:center;font-weight:600;font-size:.9rem;color:var(--ink)}
.mini-tip[hidden]{display:none}
.mini-end{position:absolute;inset:0;z-index:3;background:rgba(58,29,82,.55);display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:16px}
.mini-end[hidden]{display:none}
.mini-end h3{font-size:1.8rem;color:#fff;text-shadow:0 3px 0 rgba(58,29,82,.5)}
.mini-end p{color:#fff;font-weight:600;max-width:20em}

/* navegação entre salas */
.rooms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.room-btn{display:grid;justify-items:center;gap:0;padding:6px 1px 5px;border-radius:16px;background:var(--cream);border:3px solid #FFE0A0;font-family:var(--f-d);font-size:.76rem;color:var(--ink-s);line-height:1.1;transition:transform .2s var(--pop)}
.room-btn span{font-size:1.7rem;line-height:1.15}
.room-btn:hover{transform:translateY(-3px)}
.room-btn.on{background:linear-gradient(#FF8DBA,#F0488C);color:#fff;border-color:#B72A66;box-shadow:0 4px 0 #B72A66;transform:translateY(-2px)}
.save-note{text-align:center;color:#fff;font-weight:600;margin-top:16px;text-shadow:0 2px 6px rgba(120,20,80,.5);font-size:.95rem}
.page-pet .game-cta{margin-top:40px}

@media (max-width:700px){
  .pet-card{padding:8px;border-width:4px;border-radius:26px}
  .pet-stage{height:clamp(410px,60svh,520px);border-radius:20px}
  .vitals{gap:5px}
  .vital{padding:3px 4px 5px;border-width:2px}
  .vital span{font-size:1.15rem}
  .pet{bottom:104px;height:52%}
  .room-closet .pet{bottom:158px;height:42%}
  .room-bath .pet{bottom:50px;height:58%}
  .room-bed .pet{bottom:36px;height:58%}
  .thought{width:52px;height:52px;font-size:1.6rem}
  .sic svg{height:38px}.sic .emo{font-size:1.7rem;height:38px}
  .snm{font-size:.58rem}
  .arrow{width:28px;height:46px;font-size:1.5rem}
  .shelf-row{grid-template-columns:28px minmax(0,1fr) 28px;gap:4px}
  .room-btn{font-size:.66rem;border-width:2px;border-radius:13px}
  .room-btn span{font-size:1.45rem}
  .rooms{gap:4px}
  .shower,.lamp{width:50px;height:50px;font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  .pet-inner,.pet-inner.is-hungry,.pet-inner.is-sick{animation:none}
  .thought.show,.vital.low{animation:none}
}