/* Zählwiese – drei frei wählbare Tier-Belohnungen, vollständig gezeichnete Bedienelemente */
.animal-result-page{position:relative}
.animal-care-stage{
  position:relative!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:center!important;
  width:100%;height:clamp(170px,26dvh,242px);min-height:165px!important;
  margin:1px auto 0!important;padding:0 4px!important;overflow:visible!important;
  isolation:isolate;
}
.animal-care-stage .result-animals{
 display:flex!important;flex-wrap:wrap!important;align-content:center!important;justify-content:center!important;
 align-items:center!important;gap:0!important;position:relative;z-index:1;
 min-height:145px!important;width:100%;max-height:100%!important;
 overflow:visible!important;padding:3px!important;margin:0 auto!important;
}
.animal-care-stage .result-animals .animal-card{
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:clamp(53px,14.6vw,81px)!important;height:clamp(63px,16.8vw,92px)!important;
 margin:-4px -4px!important;
 overflow:visible!important;transform-origin:center 93%;
 animation:none;
}
.animal-care-stage .result-animals .animal-card img{
 width:100%!important;height:100%!important;object-fit:contain!important;
 filter:drop-shadow(1px 3px 1px #58714c42)!important;
}
.care-choice-area{width:100%;max-width:400px;display:flex;flex-direction:column;
 align-items:center;gap:3px;margin:auto auto 0!important;padding:3px 0 max(5px,env(safe-area-inset-bottom,0px))}
.care-choice-area .interaction-title{
 margin:2px auto 3px;line-height:1.2;font-size:clamp(17px,4.7vw,21px);
 color:#336b4d;text-shadow:1px 1px #fff3ca;
}
.care-options{display:flex;align-items:center;justify-content:space-between;
 width:min(100%,368px);gap:clamp(5px,2vw,18px);margin:0 auto;padding:0 2px 4px}
.care-option{
 -webkit-appearance:none;appearance:none;display:grid;place-items:center;position:relative;
 flex:0 1 auto;width:clamp(86px,28vw,112px);height:clamp(86px,28vw,112px);
 min-width:76px;aspect-ratio:1;border:0!important;border-radius:50%!important;
 background:url('/mode-animals-round.svg') center/100% 100% no-repeat!important;
 box-shadow:none!important;cursor:pointer;touch-action:manipulation;
 transition:transform .2s cubic-bezier(.2,.9,.3,1);filter:drop-shadow(2px 4px 2px #8a8a594a);
}
.care-option:nth-child(2){background-image:url('/mode-hands-round.svg')!important}
.care-option:nth-child(3){background-image:url('/mode-animals-round.svg')!important}
.care-option img{display:block;width:77%;height:77%;object-fit:contain;pointer-events:none}
.care-pet-btn img{width:79%;height:79%}
.care-option:active{transform:scale(.91) translateY(3px);filter:drop-shadow(1px 2px 0 #8a8a594a)}
.care-option:focus-visible{outline:4px solid #315a92!important;outline-offset:2px}
.animal-care-stage .animals-celebrating .animal-card{
 animation:joyful-pet-bounce .84s cubic-bezier(.34,.01,.48,1) calc(var(--animal-index)*70ms) 5 both!important;
}
.animal-care-stage .animals-celebrating .animal-card:nth-child(2n){
 animation-name:joyful-pet-wiggle!important;
}
@keyframes joyful-pet-bounce{
 0%{transform:translateY(0) rotate(-3deg) scale(1)}
 24%{transform:translateY(-13px) rotate(7deg) scale(1.05)}
 54%{transform:translateY(1px) rotate(-5deg) scale(.98)}
 80%{transform:translateY(-8px) rotate(4deg) scale(1.02)}
 100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes joyful-pet-wiggle{
 0%{transform:translateY(0) rotate(-5deg)}
 26%{transform:translateY(-9px) rotate(11deg) scale(1.04)}
 50%{transform:translateY(1px) rotate(-12deg)}
 75%{transform:translateY(-7px) rotate(8deg) scale(1.04)}
 100%{transform:translateY(0) rotate(0deg)}
}
.care-action-stage{
 position:absolute;z-index:3;left:50%;top:46%;
 width:clamp(65px,18vw,91px);height:clamp(65px,18vw,91px);
 pointer-events:none;transform:translate(-50%,5%) scale(1);
}
.care-action-stage > img{display:block;width:100%;height:100%;object-fit:contain;
 filter:drop-shadow(1px 5px 2px #5b6b4a66)}
.care-action-stage.care-feed > img{animation:feed-the-animals 3.7s cubic-bezier(.27,.8,.32,1) both}
.care-action-stage.care-water > img{animation:water-the-animals 3.8s ease-in-out both}
.care-action-stage.care-pet > img{animation:pet-the-animals 3.9s ease-in-out both}
@keyframes feed-the-animals{
 0%{opacity:0;transform:translate(0,95px) scale(.5) rotate(-10deg)}
 20%{opacity:1;transform:translate(0,20px) scale(1.12) rotate(8deg)}
 38%{transform:translate(0,5px) scale(1) rotate(-6deg)}
 52%,77%{transform:translate(0,18px) scale(1) rotate(0deg);opacity:1}
 100%{transform:translate(0,28px) scale(.8);opacity:0}
}
@keyframes water-the-animals{
 0%{opacity:0;transform:translate(45px,98px) rotate(-20deg) scale(.6)}
 21%{opacity:1;transform:translate(36px,13px) rotate(-32deg) scale(1.08)}
 40%,64%{transform:translate(26px,12px) rotate(-67deg) scale(1)}
 82%{opacity:1;transform:translate(30px,22px) rotate(-24deg)}
 100%{opacity:0;transform:translate(52px,83px) rotate(4deg) scale(.6)}
}
@keyframes pet-the-animals{
 0%{opacity:0;transform:translate(95px,60px) rotate(25deg) scale(.5)}
 16%{opacity:1;transform:translate(36px,13px) rotate(-18deg) scale(1)}
 30%{transform:translate(4px,-6px) rotate(12deg)}
 43%{transform:translate(-16px,3px) rotate(-12deg)}
 56%{transform:translate(12px,-8px) rotate(11deg)}
 70%{transform:translate(-11px,4px) rotate(-10deg)}
 87%{opacity:1;transform:translate(25px,12px) rotate(5deg)}
 100%{opacity:0;transform:translate(95px,59px) rotate(15deg)}
}
/* Animated hand-drawn sparks, hearts for petting, water droplets or food pieces. */
.care-magic{position:absolute;inset:0;pointer-events:none}
.care-magic span{
 position:absolute;left:46%;top:30%;
 width:12px;height:12px;display:block;border-radius:4px;
 --sx:calc((var(--spark) - 3)*19px);
 --sy:calc((var(--spark) - 3)*-12px);
 animation:care-sparkle-out 1.85s cubic-bezier(.12,.5,.27,1) calc(.6s + var(--spark)*70ms) 2 both;
 background:#e5b87b;border:1.2px solid #ab845b;box-shadow:0 0 0 1px #fff5cf54;
}
.care-feed .care-magic span{border-radius:54% 30% 55% 43%;background:#c4a56a}
.care-water .care-magic span{border-radius:75% 5% 65% 55%;background:#8ed2ec;border-color:#559eb8;transform:rotate(35deg)}
.care-pet .care-magic span{border:none;background:#f2a3b4;border-radius:4px;transform:rotate(-45deg)}
.care-pet .care-magic span:before,.care-pet .care-magic span:after{
 content:'';position:absolute;width:12px;height:12px;background:#f2a3b4;border-radius:50%;
}
.care-pet .care-magic span:before{top:-6px;left:0}
.care-pet .care-magic span:after{top:0;left:6px}
@keyframes care-sparkle-out{
 0%{opacity:0;translate:0 20px;scale:.3}
 25%{opacity:1;translate:calc(var(--sx)*.55) calc(var(--sy)*.55);scale:1}
 80%{opacity:1;translate:var(--sx) var(--sy);scale:.8}
 100%{opacity:0;translate:calc(var(--sx)*1.2) calc(var(--sy)*1.4);scale:.25}
}
.care-reaction{margin:5px auto;min-height:50px;color:#4a7051;font-weight:800;font-size:18px;text-shadow:1px 1px #fff3cd;line-height:1.25}
.animal-result-page .confetti{pointer-events:none}
@media(max-height:740px) and (orientation:portrait){
 .animal-care-stage{height:clamp(126px,22dvh,165px)!important;min-height:126px!important}
 .animal-care-stage .result-animals{min-height:110px!important}
 .animal-care-stage .result-animals .animal-card{width:clamp(43px,13vw,63px)!important;height:clamp(53px,15vw,76px)!important;margin:-7px -4px!important}
 .care-choice-area{padding-bottom:max(2px,env(safe-area-inset-bottom,0px))}
 .care-choice-area .interaction-title{font-size:17px}
 .care-option{width:clamp(73px,26vw,95px);height:clamp(73px,26vw,95px);min-width:70px}
 .care-reaction{font-size:15px;min-height:33px}
}
@media(max-width:340px){
 .care-options{gap:4px!important}
 .care-option{width:clamp(70px,26vw,91px);height:clamp(70px,26vw,91px)}
}
@media(prefers-reduced-motion:reduce){
 .animal-care-stage .animals-celebrating .animal-card,
 .care-action-stage > img,.care-magic span{animation:none!important}
 .care-action-stage > img{opacity:1;transform:none}
 .care-magic span{opacity:0}
}

/* Final fit: visible animal expressions at every count and clean names on small phones */
.animal-care-stage .result-animals .animal-card{
 width:min(var(--pet-size,74px),26.6vw)!important;
 height:min(calc(var(--pet-size,74px)*1.1),28.8vw)!important;
 margin:-4px -3px!important;
}
@media(max-height:740px) and (orientation:portrait){
 .animal-care-stage .result-animals .animal-card{
   width:min(var(--pet-size,72px),22.2vw)!important;
   height:min(calc(var(--pet-size,72px)*1.10),25vw)!important;
   margin:-5px -3px!important;
 }
}
@media(max-width:360px) and (orientation:portrait){
 .intro-content .intro-scene{height:clamp(142px,25dvh,180px)!important}
 .intro-content .friends-name-row{margin:10px auto 3px!important;font-size:clamp(15px,4.4vw,18px)!important}
 .intro-content .welcome-subtitle{margin:4px auto 4px!important}
 .mode-choices{margin-top:1px!important}
 .intro-content .welcome-footer{margin-top:1px!important}
}