/*
  Puffle Companion — component-only CSS.
  No panel/shop/timer UI styles.
*/

.pc-companion{
  --pc-pet-color:#a95acb;
  position:relative;
  width:100%;
}

.pc-stage{
  position:relative;
  min-height:330px;
  overflow:hidden;
  user-select:none;
  isolation:isolate;
}

.pc-front-shadow{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:31px;
  width:215px;
  height:30px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#000;
  opacity:.16;
  transition:opacity 180ms ease;
}

.pc-front-pet{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  width:min(100%,310px);
  overflow:visible;
  transform:translateX(-50%);
  transform-origin:50% 88%;
  animation:pcFrontBreathe 2.8s ease-in-out infinite;
  touch-action:none;
  cursor:grab;
}
.pc-front-pet:active{cursor:grabbing}

#pcFrontBody,
#pcFrontPupils,
#pcFrontOpenMouth,
#pcFrontTongue,
#pcFrontSmile{
  transform-box:fill-box;
  transform-origin:center;
}

.pc-work-scene{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.98);
  transition:opacity 180ms ease,transform 320ms ease,visibility 0s linear 320ms;
}
.pc-companion.is-working .pc-work-scene{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity 220ms ease 70ms,transform 360ms ease 70ms,visibility 0s;
}
.pc-companion.is-working .pc-front-pet,
.pc-companion.is-working .pc-front-shadow{
  opacity:0;
  pointer-events:none;
}

.pc-work-svg{
  position:absolute;
  inset:7px 0 0 0;
  width:100%;
  height:100%;
  overflow:visible;
}

#pcWorkPetContent{
  transform-box:fill-box;
  transform-origin:center;
  cursor:grab;
  touch-action:none;
}
#pcWorkPetContent:active{cursor:grabbing}

.pc-companion.is-working #pcWorkPetContent{
  animation:pcWorkBreathe 2.9s ease-in-out infinite;
}

.monitor-screen-glass{animation:pcScreenGlassShift 2.8s ease-in-out infinite}
.monitor-glow-main{animation:pcScreenWhitePulse 2.8s ease-in-out infinite}
.monitor-glow-blue{animation:pcScreenBluePulse 2.8s ease-in-out infinite}

#pcWorkPetContent.pc-work-blink #pcWorkMainPupil,
#pcWorkPetContent.pc-work-blink #pcWorkMainHighlight,
#pcWorkPetContent.pc-work-blink #pcWorkFarPupil,
#pcWorkPetContent.pc-work-blink #pcWorkFarHighlight{opacity:0}

#pcWorkPetContent.pc-work-blink #pcWorkMainClosedEye,
#pcWorkPetContent.pc-work-blink #pcWorkFarClosedEye{opacity:1}

/* Eye accessories replace the original eyes instead of floating over them. */
.pc-companion.has-eye-accessory #pcFrontEyes,
.pc-companion.has-eye-accessory #pcWorkFarEye,
.pc-companion.has-eye-accessory #pcWorkFarPupil,
.pc-companion.has-eye-accessory #pcWorkFarHighlight,
.pc-companion.has-eye-accessory #pcWorkMainEye,
.pc-companion.has-eye-accessory #pcWorkMainPupil,
.pc-companion.has-eye-accessory #pcWorkMainHighlight,
.pc-companion.has-eye-accessory #pcWorkMainClosedEye,
.pc-companion.has-eye-accessory #pcWorkFarClosedEye{
  opacity:0 !important;
}

.pc-key-stroke{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.38));
}
.pc-companion.is-working .pc-key-stroke{animation:pcKeyboardStroke 1.05s ease-in-out infinite}
.pc-companion.is-working .pc-key-stroke:nth-child(3),
.pc-companion.is-working .pc-key-stroke:nth-child(4){animation-delay:-.525s}

.pc-food{
  position:absolute;
  z-index:20;
  font-size:36px;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.28));
}
.pc-sparkles{
  position:absolute;
  inset:0;
  z-index:21;
  pointer-events:none;
}
.pc-spark{
  position:absolute;
  left:50%;
  top:44%;
  font-size:18px;
  animation:pcSparkle 780ms ease-out forwards;
}
.pc-spark-heart{color:#ef4444}

/* Front expressions/interactions */
.pc-front-pet.pc-jump{animation:pcJump .72s cubic-bezier(.22,.75,.25,1) both}
.pc-front-pet.pc-celebrate-jump{animation:pcCelebrationJump .86s cubic-bezier(.22,.78,.25,1) both}
.pc-front-pet.pc-turn-out{animation:pcTurnOut .78s cubic-bezier(.2,.72,.2,1) both}
.pc-front-pet.pc-return-in{animation:pcFrontReturnIn .62s cubic-bezier(.2,.76,.25,1) both}

.pc-front-pet.pc-eating #pcFrontOpenMouth{animation:pcMouthOpen .95s ease-in-out both}
.pc-front-pet.pc-eating #pcFrontTongue{animation:pcTongue .95s ease-in-out both}
.pc-front-pet.pc-eating #pcFrontSmile{animation:pcSmileHide .95s ease-in-out both}

.pc-front-pet.pc-blink #pcFrontPupils{opacity:0}
.pc-front-pet.pc-blink #pcFrontEyelids{opacity:1}

.pc-front-pet.pc-petting{
  animation:none;
  transform:
    translateX(-50%)
    translateY(var(--pc-pet-lift,0))
    rotate(var(--pc-pet-tilt,0))
    scale(1.02);
}
.pc-front-pet.pc-petting #pcFrontPupils{opacity:0}
.pc-front-pet.pc-petting #pcFrontEyelids{opacity:1}
.pc-front-pet.pc-petting #pcFrontSmile{
  transform:translateY(-7px) scale(1.17);
}

/* Work expressions/interactions */
#pcWorkMainPupil,#pcWorkMainHighlight,#pcWorkFarPupil,#pcWorkFarHighlight,
#pcWorkMainClosedEye,#pcWorkFarClosedEye,#pcWorkSmile,#pcWorkSmileTick{
  transform-box:fill-box;
  transform-origin:center;
}

#pcWorkPetContent.pc-work-petting{
  animation:none!important;
  transform:
    translateY(var(--pc-work-pet-lift,0px))
    rotate(var(--pc-work-pet-tilt,0deg))
    scale(1.018);
}
#pcWorkPetContent.pc-work-petting #pcWorkMainPupil,
#pcWorkPetContent.pc-work-petting #pcWorkMainHighlight,
#pcWorkPetContent.pc-work-petting #pcWorkFarPupil,
#pcWorkPetContent.pc-work-petting #pcWorkFarHighlight{opacity:0}

#pcWorkPetContent.pc-work-petting #pcWorkMainClosedEye,
#pcWorkPetContent.pc-work-petting #pcWorkFarClosedEye{opacity:1}

#pcWorkPetContent.pc-work-petting #pcWorkSmile{
  transform:translateY(10px) scale(1.08);
  stroke-width:10;
}

.pet-companion--work-nod .pc-companion.is-working #pcWorkPetContent,
.pet-companion--work-nod .pc-companion.is-working #pcWorkSkinLayer,
.pet-companion--work-nod .pc-companion.is-working #pcWorkAccessoryLayer{
  animation:pcWorkNod 3.2s ease-in-out infinite;
}

.pet-companion--work-nod .pc-companion.is-working #pcWorkMainPupil,
.pet-companion--work-nod .pc-companion.is-working #pcWorkMainHighlight,
.pet-companion--work-nod .pc-companion.is-working #pcWorkFarPupil,
.pet-companion--work-nod .pc-companion.is-working #pcWorkFarHighlight{
  opacity:0;
}

.pet-companion--work-nod .pc-companion.is-working #pcWorkMainClosedEye,
.pet-companion--work-nod .pc-companion.is-working #pcWorkFarClosedEye{
  opacity:1;
}

.pet-companion--work-read .pc-companion.is-working #pcWorkMainPupil,
.pet-companion--work-read .pc-companion.is-working #pcWorkMainHighlight,
.pet-companion--work-read .pc-companion.is-working #pcWorkFarPupil,
.pet-companion--work-read .pc-companion.is-working #pcWorkFarHighlight{
  animation:pcWorkReadingEyes 2.7s ease-in-out infinite;
}

.pc-companion.is-working.is-celebrating #pcWorkSmile{
  opacity:1!important;
  stroke-width:15;
  transform:translateY(-3px) scale(1.3);
}

.pc-companion.is-working.is-celebrating #pcWorkSmileTick{
  stroke-width:14;
  transform:translate(-4px,-3px) scale(1.15);
}

.pc-companion.is-working #pcWorkPetContent.pc-celebrate-jump,
.pc-companion.is-working #pcWorkSkinLayer.pc-celebrate-jump,
.pc-companion.is-working #pcWorkAccessoryLayer.pc-celebrate-jump{
  animation:pcWorkCelebrationJump .86s cubic-bezier(.22,.78,.25,1) both!important;
}

.pc-work-svg.pc-work-eating #pcWorkPetContent{
  animation:pcWorkEat .72s ease-in-out both!important;
}

/* Side-skin layer is intentionally separate from puffle bbox. */
#pcWorkSkinLayer,
#pcWorkAccessoryLayer{
  transform-box:view-box;
  transform-origin:520px 560px;
  pointer-events:none;
}
.pc-companion.is-working #pcWorkSkinLayer,
.pc-companion.is-working #pcWorkAccessoryLayer{
  animation:pcWorkBreathe 2.9s ease-in-out infinite;
}
.pc-work-svg.pc-work-eating #pcWorkSkinLayer,
.pc-work-svg.pc-work-eating #pcWorkAccessoryLayer{
  animation:pcWorkEat .72s ease-in-out both!important;
}
#pcWorkSkinLayer.pc-work-petting,
#pcWorkAccessoryLayer.pc-work-petting{
  animation:none!important;
  transform:
    translateY(var(--pc-work-pet-lift,0px))
    rotate(var(--pc-work-pet-tilt,0deg))
    scale(1.018);
}

/* Work -> front return */
.pc-companion.is-returning .pc-work-scene{
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transform:none;
  transition:none;
  animation:pcWorkSceneReturnFade .72s ease-in-out both;
}
.pc-companion.is-returning #pcWorkPetContent,
.pc-companion.is-returning #pcWorkSkinLayer,
.pc-companion.is-returning #pcWorkAccessoryLayer{
  animation:pcWorkPetReturn .68s cubic-bezier(.22,.72,.25,1) both!important;
}
.pc-companion.is-returning #pcKeyboardPerspective,
.pc-companion.is-returning #pcMonitorGroup{
  animation:pcDeskReturnFade .58s ease-out both;
}

/* Gold: intentionally hidden in front view. */
.pc-work-gold-stacks{
  position:absolute;
  z-index:2;
  pointer-events:none;
  left:-7%;
  bottom:5%;
  width:48%;
  height:55%;
  opacity:0;
  visibility:hidden;
}
.pc-companion.is-working .pc-work-gold-stacks{
  opacity:1;
  visibility:visible;
}

.pc-gold-pile{
  position:absolute;
  width:78px;
  height:48px;
  transform-origin:50% 100%;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.18));
}
.pc-gold-pile .pc-coin{
  position:absolute;
  left:50%;
  width:66px;
  height:auto;
  transform:translateX(-50%);
  user-select:none;
  -webkit-user-drag:none;
}
.pc-gold-pile .pc-coin:nth-child(1){bottom:0}
.pc-gold-pile .pc-coin:nth-child(2){bottom:7px}
.pc-gold-pile .pc-coin:nth-child(3){bottom:14px}
.pc-gold-pile .pc-coin:nth-child(4){bottom:21px}

/* 13 compact stacks: 5 + 4 + 3 + 1 */
.pc-work-gold-stacks .pc-gold-pile:nth-child(1){left:0%;bottom:0%;transform:scale(.69) rotate(-3deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(2){left:12%;bottom:1%;transform:scale(.72) rotate(2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(3){left:24%;bottom:0%;transform:scale(.70) rotate(-2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(4){left:36%;bottom:2%;transform:scale(.71) rotate(3deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(5){left:48%;bottom:0%;transform:scale(.68) rotate(-2deg)}

.pc-work-gold-stacks .pc-gold-pile:nth-child(6){left:6%;bottom:17%;transform:scale(.64) rotate(2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(7){left:18%;bottom:18%;transform:scale(.66) rotate(-3deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(8){left:30%;bottom:17%;transform:scale(.63) rotate(2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(9){left:42%;bottom:18%;transform:scale(.65) rotate(-2deg)}

.pc-work-gold-stacks .pc-gold-pile:nth-child(10){left:12%;bottom:33%;transform:scale(.59) rotate(-2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(11){left:24%;bottom:34%;transform:scale(.61) rotate(2deg)}
.pc-work-gold-stacks .pc-gold-pile:nth-child(12){left:36%;bottom:33%;transform:scale(.58) rotate(-3deg)}

.pc-work-gold-stacks .pc-gold-pile:nth-child(13){left:24%;bottom:48%;transform:scale(.54) rotate(1deg)}

.pc-gold-pile.pc-appear{animation:pcGoldPileIn .28s cubic-bezier(.22,.8,.3,1) both}
.pc-gold-pile.pc-disappear{animation:pcGoldPileOut .22s ease-in both}

/* Keyframes */
@keyframes pcFrontBreathe{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-5px) scale(1.012,.993)}
}
@keyframes pcWorkBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-11px) scale(1.012,.99)}
}
@keyframes pcWorkNod{
  0%,18%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  36%{transform:translateY(5px) rotate(1.8deg) scale(1.015,.985)}
  54%{transform:translateY(13px) rotate(3.8deg) scale(1.025,.97)}
  72%{transform:translateY(4px) rotate(1.2deg) scale(1.01,.99)}
}
@keyframes pcWorkReadingEyes{
  0%,16%,100%{transform:translateY(-7px)}
  42%,58%{transform:translateY(8px)}
  78%{transform:translateY(1px)}
}
@keyframes pcScreenGlassShift{
  0%,100%{fill:#88d4ff}
  38%{fill:#c2a7ff}
  72%{fill:#82e5cf}
}
@keyframes pcScreenWhitePulse{0%,100%{opacity:.95}38%{opacity:.42}72%{opacity:.78}}
@keyframes pcScreenBluePulse{0%,100%{opacity:.18}38%{opacity:.86}72%{opacity:.35}}
@keyframes pcKeyboardStroke{
  0%,50%,100%{opacity:0}
  12%,36%{opacity:1}
}

@keyframes pcJump{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  16%{transform:translateX(-50%) translateY(9px) scale(1.09,.87)}
  47%{transform:translateX(-50%) translateY(-52px) scale(.95,1.09)}
  72%{transform:translateX(-50%) translateY(0) scale(1.06,.93)}
  100%{transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes pcCelebrationJump{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  16%{transform:translateX(-50%) translateY(10px) scale(1.1,.86)}
  52%{transform:translateX(-50%) translateY(-68px) scale(.94,1.1)}
  76%{transform:translateX(-50%) translateY(4px) scale(1.06,.93)}
}
@keyframes pcWorkCelebrationJump{
  0%,100%{transform:translateY(0) scale(1)}
  16%{transform:translateY(12px) scale(1.08,.88)}
  52%{transform:translateY(-76px) scale(.94,1.09)}
  76%{transform:translateY(5px) scale(1.05,.94)}
}
@keyframes pcTurnOut{
  0%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
  20%{transform:translateX(-50%) translateY(9px) scale(1.08,.88)}
  55%{transform:translateX(-50%) translateY(-38px) scale(.95,1.06)}
  82%{transform:translateX(calc(-50% - 18px)) translateY(-18px) scaleX(.12);opacity:.8}
  100%{transform:translateX(calc(-50% - 25px)) translateY(3px) scaleX(.03);opacity:0}
}
@keyframes pcFrontReturnIn{
  0%{opacity:0;transform:translateX(calc(-50% + 18px)) translateY(-12px) scale(.10,1)}
  44%{opacity:1;transform:translateX(-50%) translateY(-28px) scale(.94,1.06)}
  72%{transform:translateX(-50%) translateY(5px) scale(1.06,.93)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@keyframes pcMouthOpen{
  0%,8%,75%,100%{opacity:0;transform:scale(1,.2)}
  20%,58%{opacity:1;transform:scale(1.05,2.7)}
}
@keyframes pcTongue{
  0%,30%,65%,100%{opacity:0}
  40%,55%{opacity:1;transform:translateY(9px)}
}
@keyframes pcSmileHide{
  0%,10%,72%,100%{opacity:1}
  20%,62%{opacity:0}
}
@keyframes pcWorkEat{
  0%,100%{transform:translateY(0) scale(1)}
  30%{transform:translateY(4px) scale(1.025,.97)}
  58%{transform:translateY(-5px) scale(.985,1.02)}
}
@keyframes pcWorkSceneReturnFade{
  0%,28%{opacity:1}
  100%{opacity:0}
}
@keyframes pcDeskReturnFade{
  0%{opacity:1}
  100%{opacity:.08}
}
@keyframes pcWorkPetReturn{
  0%{transform:translateY(0) scale(1)}
  20%{transform:translateY(7px) scale(1.06,.9)}
  55%{transform:translateY(-26px) scale(.94,1.06)}
  100%{transform:translate(-18px,-9px) scale(.12,1);opacity:0}
}
@keyframes pcSparkle{
  from{opacity:1;transform:translate(-50%,-50%) rotate(var(--pc-r)) translateY(0) scale(.6)}
  to{opacity:0;transform:translate(-50%,-50%) rotate(var(--pc-r)) translateY(-68px) scale(1.15)}
}
@keyframes pcGoldPileIn{
  from{opacity:0;translate:0 8px;scale:.8}
  to{opacity:1;translate:0 0;scale:1}
}
@keyframes pcGoldPileOut{
  from{opacity:1;translate:0 0;scale:1}
  to{opacity:0;translate:0 6px;scale:.78}
}