.game-screen--cade .game-body { display: flex; min-height: calc(100vh - 112px); flex-direction: column; }
.landscape-progress { flex: 0 0 auto; margin: 2px 0 7px; }
.animal-clue { position: absolute; z-index: 12; top: 29px; left: 50%; transform: translateX(-50%); }
.animal-listen { position: relative; display: grid; width: 76px; height: 76px; place-items: center; border: 5px solid #fff; border-radius: 50%; background: #6550c8; color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 6px 0 #3e2d89, 0 10px 22px rgba(56,42,116,.28); }
.animal-listen i { position: absolute; inset: -8px; border: 3px solid rgba(101,80,200,.36); border-radius: 50%; opacity: 0; }
.animal-listen.playing i { animation: sound-wave 1.1s ease-out; }
.animal-listen.playing i:last-child { animation-delay: .25s; }
.animal-landscape { position: relative; flex: 1; min-height: 565px; overflow: hidden; border: 7px solid #fff; border-radius: 34px; background-color: #bde9ff; background-position: center; background-size: cover; box-shadow: 0 12px 30px rgba(39,54,105,.18); }
.animal-hotspot { position: absolute; width: 31%; height: 23%; transform: translate(-50%,-50%); border: 0; border-radius: 45%; background: transparent; cursor: pointer; }
.animal-hotspot span { position: absolute; top: 50%; left: 50%; display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50%; background: #69d48a; color: #fff; font-size: 2rem; opacity: 0; transform: translate(-50%,-50%) scale(.2); box-shadow: 0 5px 15px rgba(27,82,49,.3); }
.animal-hotspot.correct span { opacity: 1; animation: animal-correct .8s ease both; }
.animal-hotspot.correct { outline: 7px solid rgba(255,232,75,.85); outline-offset: -8px; }
.animal-hotspot.wrong { animation: shake .35s ease; }
.animal-hotspot.hint { animation: animal-hint .85s ease-in-out infinite alternate; outline: 7px solid rgba(255,237,83,.72); outline-offset: -8px; }
@keyframes sound-wave { 0% { opacity: .8; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes animal-correct { 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(-8deg); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes animal-hint { to { box-shadow: 0 0 0 8px rgba(255,236,69,.32); } }
@media (max-height: 760px) { .animal-landscape { min-height: 500px; } .animal-listen { width: 66px; height: 66px; } }
@media (min-width: 650px) { .animal-landscape { min-height: 820px; max-width: 560px; width: 100%; margin: 0 auto; } }