﻿.dinosaur-container {
    position: fixed;
    right: 26px;
    bottom: 18px;
    width: 210px;
    height: 170px;
    z-index: 18;
    opacity: 0.9;
    pointer-events: none;
}

.dinosaur { position: relative; width: 100%; height: 100%; animation: dinoFloat 3s ease-in-out infinite; }
.dino-body { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 100px; background: #4CAF50; border-radius: 50px 50px 25px 25px; box-shadow: inset -8px -8px 25px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.16); }
.dino-head { position: absolute; top: -30px; left: 65%; width: 80px; height: 65px; background: #4CAF50; border-radius: 50% 40px 15px 15px; transform: rotate(15deg); box-shadow: inset -5px -5px 15px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.16); }
.dino-eye { position: absolute; top: 15px; left: 25px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.3); }
.dino-eye::after { content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background: #000; border-radius: 50%; animation: blink 4s infinite; }
.fire-breath { position: absolute; top: 30px; left: 70px; width: 100px; height: 30px; transform: rotate(15deg); transform-origin: left center; }
.fire-core { position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, #ff4d4d, #ff9933, transparent); border-radius: 0 30px 30px 0; filter: blur(3px); animation: breathFire 1s infinite; opacity: 0.8; }
.fire-particles { position: absolute; width: 100%; height: 100%; }
.fire-particle { position: absolute; width: 6px; height: 6px; background: #ff9933; border-radius: 50%; filter: blur(2px); animation: particleFly 0.6s infinite; }
.dino-scales { position: absolute; inset: 0; }
.scale { position: absolute; width: 15px; height: 15px; background: #388E3C; border-radius: 50%; box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.3); }
.dino-tail { position: absolute; bottom: 35px; left: 0; width: 70px; height: 35px; background: #4CAF50; border-radius: 20px 0 0 20px; transform-origin: right center; animation: tailWag 2s infinite; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.16); }
.dino-legs { position: absolute; bottom: -25px; width: 100%; height: 30px; }
.leg { position: absolute; width: 25px; height: 40px; background: #4CAF50; border-radius: 8px; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.16); }
.leg-front { left: 100px; animation: legMove 1s infinite alternate; }
.leg-back { left: 35px; animation: legMove 1s infinite alternate-reverse; }
@keyframes dinoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes breathFire { 0% { transform: scaleX(0.8); opacity: 0.6; } 50% { transform: scaleX(1); opacity: 0.8; } 100% { transform: scaleX(0.8); opacity: 0.6; } }
@keyframes particleFly { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(50px, -10px); opacity: 0; } }
@keyframes blink { 0%, 48%, 52%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
@keyframes tailWag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes legMove { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
.fire-particle:nth-child(1) { top: 20%; animation-delay: 0s; }
.fire-particle:nth-child(2) { top: 40%; animation-delay: 0.1s; }
.fire-particle:nth-child(3) { top: 60%; animation-delay: 0.2s; }
.fire-particle:nth-child(4) { top: 80%; animation-delay: 0.3s; }
.scale:nth-child(1) { top: 20%; left: 30%; }
.scale:nth-child(2) { top: 40%; left: 40%; }
.scale:nth-child(3) { top: 60%; left: 35%; }
.scale:nth-child(4) { top: 30%; left: 45%; }
.scale:nth-child(5) { top: 50%; left: 50%; }
