#monster-visual {
    width: auto;
    height: auto;
    margin: 0;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Common Monster Shadow */
#monster-visual::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 15px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
    border-radius: 50%;
}

.monster-body {
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
}

/* Goblin - Small humanoid */
.monster-body.goblin {
    width: 80px;
    height: 100px;
    background: linear-gradient(135deg, #6b8e23, #556b2f); /* Olive Green */
    border-radius: 40px 40px 25px 25px;
    margin: 0 auto;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
    position: relative;
}

/* Goblin Ears */
.monster-body.goblin::before,
.monster-body.goblin::after {
    content: '';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 12px;
    background: inherit;
    border-radius: 50% 50% 0 50%;
    z-index: -1;
}
.monster-body.goblin::before { left: -15px; transform: rotate(-20deg); }
.monster-body.goblin::after { right: -15px; transform: rotate(20deg) scaleX(-1); }

/* Wolf - Quadruped */
.monster-body.wolf {
    width: 120px;
    height: 60px;
    background: linear-gradient(135deg, #795548, #3e2723);
    border-radius: 30px 60px 30px 30px;
    margin-top: 40px;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3);
}

/* Wolf Tail */
.monster-body.wolf::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 10px;
    width: 25px;
    height: 15px;
    background: inherit;
    border-radius: 50% 0 0 50%;
    transform: rotate(20deg);
    transform-origin: right center;
    animation: tailWag 1s ease-in-out infinite alternate;
}
@keyframes tailWag { from { transform: rotate(10deg); } to { transform: rotate(30deg); } }

/* Spider - Multi-legged */
.monster-body.spider {
    width: 90px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #4a148c, #000);
    border-radius: 50%;
    margin: 40px auto 0;
    position: relative;
    z-index: 5;
}

/* Spider Legs - Using box-shadow for multiple legs */
.monster-body.spider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 80px;
    background: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        -35px -20px 0 -38px #000, 35px -20px 0 -38px #000,
        -40px 0px 0 -38px #000, 40px 0px 0 -38px #000,
        -35px 20px 0 -38px #000, 35px 20px 0 -38px #000;
    z-index: -1;
}
/* Replaces old simple legs */
.monster-body.spider::after { display: none; }


/* Orc - Large humanoid */
.monster-body.orc {
    width: 100px;
    height: 120px;
    background: linear-gradient(135deg, #228b22, #006400);
    border-radius: 50px 50px 30px 30px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Orc Axe */
.monster-body.orc::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -20px;
    width: 10px;
    height: 60px;
    background: #5d4037;
    transform: rotate(20deg);
}
.monster-body.orc::after {
    content: '';
    position: absolute;
    top: 30px;
    left: -35px;
    width: 40px;
    height: 30px;
    background: radial-gradient(circle at 100% 50%, #7f8c8d, #2c3e50);
    border-radius: 50% 0 0 50%;
    transform: rotate(20deg);
}

/* Minotaur - Bull-like */
.monster-body.minotaur {
    width: 110px;
    height: 130px;
    background: linear-gradient(135deg, #8b0000, #5f0000);
    border-radius: 55px 55px 35px 35px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    position: relative;
}

/* Minotaur Nose Ring */
.monster-body.minotaur::after {
    content: ''; /* Overriding the old horns */
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border: 3px solid #ffd700;
    border-radius: 50%;
}

/* Minotaur Horns - defined separately to avoid conflict with Nose Ring */
.monster-body.minotaur .monster-feature {
    position: absolute;
    width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;
}
.monster-body.minotaur .monster-feature::before,
.monster-body.minotaur .monster-feature::after {
    content: '';
    position: absolute;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 25px solid #f0f0f0; /* White/Bone horns */
}
.monster-body.minotaur .monster-feature::before { left: 15px; transform: rotate(-20deg); }
.monster-body.minotaur .monster-feature::after { right: 15px; transform: rotate(20deg); }

/* Ogre - Massive humanoid */
.monster-body.ogre {
    width: 120px;
    height: 140px;
    background: linear-gradient(135deg, #2f4f2f, #1c3a1c);
    border-radius: 60px 60px 40px 40px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Ogre Club */
.monster-body.ogre::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -25px;
    width: 20px;
    height: 80px;
    background: linear-gradient(to right, #5d4037, #3e2723);
    border-radius: 10px 10px 4px 4px;
    transform: rotate(-15deg);
    border: 2px solid #271c19;
}

/* Bat - Flying creature */
.monster-body.bat {
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, #2f2f2f, #1a1a1a);
    border-radius: 35px 35px 20px 20px;
    margin: 50px auto 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Slime - Blob */
.monster-body.slime {
    width: 100px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%, #76ff03, #33691e);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    margin: 30px auto 0;
    box-shadow: inset -5px -5px 15px rgba(0,0,0,0.3);
    opacity: 0.9;
    animation: slimeWobble 3s ease-in-out infinite;
}

@keyframes slimeWobble {
    0%, 100% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: scale(1); }
    50% { border-radius: 40% 40% 60% 60% / 50% 50% 50% 50%; transform: scale(1.1, 0.9); }
}

/* Skeleton - Thin humanoid */
.monster-body.skeleton {
    width: 70px;
    height: 110px;
    background: repeating-linear-gradient(
        180deg,
        #f5f5f5,
        #f5f5f5 10px,
        #e0e0e0 10px,
        #e0e0e0 14px
    ); /* Ribcage effect */
    border-radius: 35px 35px 25px 25px;
    margin: 0 auto;
    border: 2px solid #ccc;
}

/* Ghost - Ethereal */
.monster-body.ghost {
    width: 60px;
    height: 90px;
    background: linear-gradient(to bottom, rgba(200, 255, 255, 0.8), rgba(200, 255, 255, 0));
    border-radius: 30px 30px 0 0;
    margin: 10px auto 0;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    filter: blur(1px);
    animation: ghostFloat 2s ease-in-out infinite alternate;
}
/* Ghostly Trails */
.monster-body.ghost::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 10px; right: 10px; height: 30px;
    background: inherit;
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.5;
    animation: ghostTrail 2s infinite linear;
}
@keyframes ghostTrail {
    0% { transform: translateY(0) scale(1); opacity: 0.5; }
    100% { transform: translateY(20px) scale(0.5); opacity: 0; }
}

.monster-body.ghost .monster-eyes { top: 25px; opacity: 0.8; }
.monster-body.ghost .monster-eye { background: #fff; box-shadow: 0 0 5px #00ffff; }
.monster-body.ghost .monster-mouth { display: none; }

@keyframes ghostFloat {
    from { transform: translateY(0); opacity: 0.7; }
    to { transform: translateY(-10px); opacity: 0.9; }
}

/* Golem - Rock Construct */
.monster-body.golem {
    width: 130px;
    height: 110px;
    background: #757575;
    border-radius: 10px;
    margin: 20px auto 0;
    box-shadow: inset 5px 5px 10px rgba(255,255,255,0.1), inset -5px -5px 10px rgba(0,0,0,0.5);
    position: relative;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%),
        linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
/* Golem Head */
.monster-body.golem::before {
    content: '';
    position: absolute;
    top: -25px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 30px;
    background: #757575;
    border-radius: 5px;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.1);
}
.monster-body.golem .monster-eyes { top: -15px; z-index: 5; gap: 15px; }
.monster-body.golem .monster-eye { background: #ff5252; width: 6px; height: 6px; border-radius: 0; }
.monster-body.golem .monster-mouth { display: none; }

/* Elemental - Fire Spirit */
.monster-body.elemental {
    width: 80px;
    height: 100px;
    background: radial-gradient(circle at 50% 80%, #ffeb3b 10%, #ff9800 40%, #ff5722 80%, transparent 100%);
    border-radius: 50% 50% 20% 20%;
    margin: 10px auto 0;
    box-shadow: 0 -10px 20px #ff5722;
    filter: brightness(1.2);
    animation: fireFlicker 0.1s infinite alternate;
}
/* Fire Core */
.monster-body.elemental::after {
    content: '';
    position: absolute;
    top: 40%; left: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff5722;
    animation: corePulse 0.5s infinite alternate;
}
@keyframes corePulse { from { opacity: 0.8; scale: 1; } to { opacity: 1; scale: 1.2; } }

/* Fire Particles simulation via border shapes */
.monster-body.elemental::before {
    content: '';
    position: absolute;
    top: -20px; left: 10px;
    width: 60px; height: 60px;
    background: transparent;
    box-shadow: 0 -10px 10px #ff9800;
    border-radius: 50%;
    animation: flameRise 1s infinite linear;
}
.monster-body.elemental .monster-eyes { top: 30px; }
.monster-body.elemental .monster-eye { background: #fff; box-shadow: 0 0 5px #fff; }
.monster-body.elemental .monster-mouth { bottom: 25px; width: 20px; background: #bf360c; }

@keyframes fireFlicker {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.02); filter: brightness(1.2); }
}
@keyframes flameRise {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-30px) scale(0.5); opacity: 0; }
}

/* Dragon - Serpentine */
.monster-body.dragon {
    width: 140px;
    height: 90px;
    background: linear-gradient(135deg, #b71c1c, #d50000);
    border-radius: 40px 60px 40px 40px;
    margin: 20px auto 0;
    box-shadow: inset -5px -5px 15px rgba(0,0,0,0.4);
    position: relative;
}

/* Dragon Wings */
.monster-body.dragon::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 40px;
    width: 80px;
    height: 50px;
    background: linear-gradient(to right, #7f0000, transparent);
    border-radius: 0 100% 0 100%;
    transform: rotate(-20deg);
    z-index: -1;
    animation: wingFlap 2s ease-in-out infinite alternate;
    transform-origin: bottom left;
}

@keyframes wingFlap { from { transform: rotate(-20deg) scaleY(1); } to { transform: rotate(-10deg) scaleY(1.1); } }

.monster-eyes {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.goblin .monster-eyes { top: 25px; gap: 12px; }
.wolf .monster-eyes { top: 15px; gap: 20px; }
.spider .monster-eyes { top: 10px; gap: 8px; }
.orc .monster-eyes { top: 30px; gap: 18px; }
.minotaur .monster-eyes { top: 35px; gap: 20px; }
.ogre .monster-eyes { top: 40px; gap: 22px; }
.bat .monster-eyes { top: 8px; gap: 10px; }
.slime .monster-eyes { top: 20px; gap: 15px; }
.skeleton .monster-eyes { top: 20px; gap: 10px; }
.dragon .monster-eyes { top: 25px; gap: 25px; }

.monster-eye {
    width: 8px;
    height: 8px;
    background: #ffff00;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px rgba(255,255,0,0.8), 0 0 12px rgba(255,255,0,0.4);
    animation: eyeGlow 1.5s ease-in-out infinite;
}

.spider .monster-eye {
    width: 6px;
    height: 6px;
    background: #8a2be2;
    box-shadow: 0 0 8px rgba(138,43,226,0.8);
}

.skeleton .monster-eye {
    background: #00ff00;
    box-shadow: 0 0 8px rgba(0,255,0,0.8);
}

.dragon .monster-eye {
    width: 12px;
    height: 12px;
    background: #ffd700;
    box-shadow: 0 0 10px rgba(255,215,0,0.9);
}

@keyframes eyeGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes blink {
    0%, 95%, 100% {
        transform: scaleY(1);
    }
    97% {
        transform: scaleY(0.1);
    }
}

.monster-mouth {
    width: 40px;
    height: 15px;
    background-color: #555;
    border-radius: 0 0 20px 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.goblin .monster-mouth { bottom: 20px; }
.wolf .monster-mouth { bottom: 10px; }
.spider .monster-mouth { bottom: 8px; width: 20px; height: 8px; }
.orc .monster-mouth { bottom: 25px; }
.minotaur .monster-mouth { bottom: 30px; }
.ogre .monster-mouth { bottom: 35px; }
.bat .monster-mouth { bottom: 5px; width: 15px; height: 8px; }
.slime .monster-mouth { bottom: 15px; }
.skeleton .monster-mouth { bottom: 25px; }
.dragon .monster-mouth { bottom: 20px; }

/* Monster-specific features */
.monster-body.wolf::before {
    content: '';
    width: 30px;
    height: 20px;
    background: linear-gradient(135deg, #8b4513, #654321);
    border-radius: 15px 15px 5px 5px;
    position: absolute;
    top: -15px;
    left: 70px;
}

.monster-body.minotaur::before,
.monster-body.minotaur::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid #5f0000;
    position: absolute;
    top: -15px;
}

.monster-body.minotaur::before {
    left: 20px;
    transform: rotate(-15deg);
}

.monster-body.minotaur::after {
    right: 20px;
    transform: rotate(15deg);
}

.monster-body.dragon::before {
    content: '';
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #8b0000, #ff4500);
    border-radius: 20px 5px 5px 20px;
    position: absolute;
    right: -35px;
    top: 25px;
}

/* Walking Animation */
.walking .monster-body {
    animation: monsterWalk 0.5s ease-in-out infinite;
}

@keyframes monsterWalk {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-8px) rotate(-2deg); }
    50% { transform: translateY(0) rotate(0); }
    75% { transform: translateY(-8px) rotate(2deg); }
}

/* Flying Override (Bat, Dragon) */
.walking .monster-body.bat,
.walking .monster-body.dragon {
    animation: monsterFly 0.5s ease-in-out infinite alternate !important;
}

@keyframes monsterFly {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-15px) scale(1.05); }
}

/* Spider Skitter Override */
.walking .monster-body.spider {
    animation: spiderSkitter 0.2s linear infinite !important;
}

@keyframes spiderSkitter {
    0% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-2px) rotate(-3deg); }
    50% { transform: translateX(0) rotate(0); }
    75% { transform: translateX(2px) rotate(3deg); }
    100% { transform: translateX(0) rotate(0); }
}

.monster-attack {
    animation: monsterAttackAnimation 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes monsterAttackAnimation {
    0% { transform: translateX(0) scale(1); }
    20% { transform: translateX(15px) scale(0.95, 1.05) rotate(5deg); } /* Anticipation */
    50% { transform: translateX(-60px) scale(1.1, 0.9) rotate(-10deg); } /* Impact */
    100% { transform: translateX(0) scale(1); }
}

.monster-enraged {
    animation: monsterEnragedAnimation 0.6s ease-in-out infinite;
}

@keyframes monsterEnragedAnimation {
    0%, 100% { filter: brightness(1) hue-rotate(0deg); }
    50% { filter: brightness(1.5) hue-rotate(15deg); transform: scale(1.05); }
}

.monster-critical {
    animation: monsterCriticalAnimation 0.8s ease-in-out;
}

@keyframes monsterCriticalAnimation {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2) rotateZ(-10deg); filter: brightness(1.8) hue-rotate(30deg); }
    100% { transform: scale(1); filter: brightness(1); }
}
/* Monster Tier Styles */
.monster-tier-2 .monster-body {
    transform: scale(1.1);
    background-color: #d4e4f7; /* Soft blue tint */
}

.monster-tier-3 .monster-body {
    transform: scale(1.2);
    background-color: #d4f7d4; /* Soft green tint */
}

.monster-tier-4 .monster-body {
    transform: scale(1.3);
    background-color: #e8d4f7; /* Soft purple tint */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

/* Elite Monster Glow */
.monster-body.elite {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); /* Gold Glow */
    border: 2px solid rgba(255, 215, 0, 0.8);
}

.monster-body.elite.vampiric {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* Red Glow */
    border-color: #ff0000;
}

.monster-body.elite.swift {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); /* Cyan Glow */
    border-color: #00ffff;
}

.monster-body.elite.armored {
    box-shadow: 0 0 15px rgba(100, 100, 100, 0.6); /* Grey Glow */
    border-color: #a0a0a0;
}

/* BOSS STYLES */
#monster-visual.boss {
    transform: scale(1.5) !important;
    z-index: 20;
}

#monster-visual.boss .monster-body {
    filter: drop-shadow(0 0 15px #ff0000);
    animation: bossPulse 2s ease-in-out infinite alternate;
}

@keyframes bossPulse {
    from { filter: drop-shadow(0 0 10px #ff0000) brightness(1); }
    to { filter: drop-shadow(0 0 25px #ff0000) brightness(1.2); }
}

#monster-visual.boss .monster-eye {
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #ff0000;
}