/* Morceguinhos: céu de noite, lua enorme com rostinho, árvore com galho comprido, morcegos voando. */
.play-morcegos .toy-scene{background:#2b2450}
.morcegos-stars{position:absolute;inset:0;pointer-events:none}
.morcegos-stars i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff6c8;box-shadow:0 0 6px #fff6c8;animation:morcegos-twinkle 2.2s ease-in-out infinite alternate}
.morcegos-moon{position:absolute;left:50%;top:6%;width:62cqw;max-width:36cqh;aspect-ratio:1;translate:-50% 0;border:0;padding:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fffbe6,#ffe9a8 55%,#f5d27a);box-shadow:0 0 50px 14px #ffe9a855,0 0 140px 40px #ffe9a822;touch-action:none;-webkit-tap-highlight-color:transparent;animation:morcegos-glow 4s ease-in-out infinite alternate}
.morcegos-face{display:block;width:100%;height:100%}
.morcegos-eye-r{transform-origin:61px 44px;transition:transform .15s}
.morcegos-mouth{transition:d .2s}
.morcegos-moon.wink .morcegos-eye-r{transform:scaleY(.15)}
.morcegos-moon.wink .morcegos-mouth{d:path("M38 58q12 14 24 0")}
.morcegos-hills{position:absolute;left:-10%;right:-10%;bottom:0;height:22%;background:radial-gradient(ellipse 45% 70% at 25% 100%,#2f2a55 98%,transparent),radial-gradient(ellipse 50% 80% at 80% 100%,#262148 98%,transparent),linear-gradient(transparent 60%,#221d40 60%)}
.morcegos-trunk{position:absolute;left:-4%;bottom:0;width:15%;top:34%;background:linear-gradient(90deg,#4a2f22,#6b4430 60%,#5b3b2b);border-radius:40% 30% 0 0/8% 6% 0 0}
.morcegos-branch{position:absolute;left:4%;right:0;top:calc(var(--y) - 5.5cqh);height:8cqh;pointer-events:none}
.morcegos-branch-a{--y:40%}
.morcegos-branch-b{--y:62%;right:6%}
.morcegos-branch svg{display:block;width:100%;height:100%}
.morcegos-count{position:absolute;left:0;right:0;top:72%;height:28%;z-index:8;pointer-events:none}
.morcegos-flock{position:absolute;inset:0;z-index:5}
.morcegos-bat{position:absolute;left:0;top:0;aspect-ratio:1;border:0;padding:0;background:transparent;touch-action:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.morcegos-bat::before{content:"";position:absolute;inset:-14%}
.morcegos-spin,.morcegos-body{position:absolute;inset:0;display:block}
.morcegos-body{transition:rotate .35s,scale .35s;transform-origin:50% 50%}
.morcegos-body .art-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;animation:morcegos-flap .26s ease-in-out infinite alternate;filter:drop-shadow(0 4px 6px #0006)}
.morcegos-bat.hang .morcegos-body{rotate:180deg}
.morcegos-bat.hang .art-img{animation:morcegos-snooze 2.6s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes morcegos-twinkle{from{opacity:.3}to{opacity:1}}
@keyframes morcegos-glow{from{box-shadow:0 0 50px 14px #ffe9a855,0 0 140px 40px #ffe9a822}to{box-shadow:0 0 60px 20px #ffe9a877,0 0 160px 50px #ffe9a833}}
@keyframes morcegos-flap{from{scale:1 1}to{scale:.82 1.06}}
@keyframes morcegos-snooze{from{rotate:-5deg}to{rotate:5deg}}
@container (orientation:landscape){
  .morcegos-moon{width:auto;height:70%;max-width:none;top:5%}
  .morcegos-trunk{width:6%;left:-1%;top:44%}
  .morcegos-branch-a{--y:50%}
  .morcegos-branch-b{display:none}
  .morcegos-count{top:60%;height:40%}
}