/* ============================================
   CAPYBARA GO! - Character Sprites & Animations
   ============================================ */

/* Base Character Container */
.character {
    position: relative;
    width: 120px;
    height: 100px;
}

/* ============================================
   CAPYBARA (Player Character)
   ============================================ */

.capybara {
    position: relative;
}

/* Body */
.capybara::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 60px;
    background: var(--color-capybara-body);
    border-radius: 45px 45px 30px 30px;
    bottom: 20px;
    left: 15px;
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1);
}

/* Head */
.capybara::after {
    content: '';
    position: absolute;
    width: 55px;
    height: 45px;
    background: var(--color-capybara-body);
    border-radius: 50% 50% 40% 40%;
    bottom: 50px;
    left: 60px;
    box-shadow: inset -5px -5px 15px rgba(0,0,0,0.1);
}

/* Face features - using pseudo elements on wrapper */
.capybara .face {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Eyes */
.capybara .eye {
    position: absolute;
    width: 8px;
    height: 10px;
    background: #2d1810;
    border-radius: 50%;
    bottom: 65px;
    animation: blink 4s infinite;
}

.capybara .eye.left {
    left: 72px;
}

.capybara .eye.right {
    left: 88px;
}

.capybara .eye::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}

/* Nose */
.capybara .nose {
    position: absolute;
    width: 18px;
    height: 12px;
    background: var(--color-capybara-nose);
    border-radius: 50%;
    bottom: 55px;
    left: 95px;
}

/* Ears */
.capybara .ear {
    position: absolute;
    width: 15px;
    height: 12px;
    background: var(--color-capybara-body);
    border-radius: 50% 50% 0 0;
    bottom: 88px;
}

.capybara .ear.left {
    left: 65px;
    transform: rotate(-15deg);
}

.capybara .ear.right {
    left: 85px;
    transform: rotate(15deg);
}

/* Legs */
.capybara .legs {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 80px;
}

.capybara .leg {
    position: absolute;
    width: 18px;
    height: 25px;
    background: var(--color-capybara-dark);
    border-radius: 8px 8px 10px 10px;
    bottom: 0;
}

.capybara .leg:nth-child(1) { left: 5px; }
.capybara .leg:nth-child(2) { left: 25px; }
.capybara .leg:nth-child(3) { left: 45px; }
.capybara .leg:nth-child(4) { left: 65px; }

/* Idle Animation */
.capybara.idle {
    animation: capybaraIdle 2s ease-in-out infinite;
}

@keyframes capybaraIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes blink {
    0%, 45%, 55%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Attack Animation */
.capybara.attacking {
    animation: capybaraAttack 0.5s ease-out;
}

@keyframes capybaraAttack {
    0% { transform: translateX(0); }
    30% { transform: translateX(50px) rotate(5deg); }
    60% { transform: translateX(30px); }
    100% { transform: translateX(0); }
}

/* Hurt Animation */
.capybara.hurt {
    animation: capybaraHurt 0.4s ease-out;
}

@keyframes capybaraHurt {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(-10px); filter: brightness(1.5); }
    50% { transform: translateX(10px); filter: brightness(0.8); }
    75% { transform: translateX(-5px); filter: brightness(1.2); }
}

/* Victory Animation */
.capybara.victory {
    animation: capybaraVictory 1s ease-in-out infinite;
}

@keyframes capybaraVictory {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-15px) rotate(-5deg); }
    75% { transform: translateY(-15px) rotate(5deg); }
}

/* ============================================
   ENEMY CHARACTERS
   ============================================ */

.enemy {
    position: relative;
}

/* Slime Enemy */
.enemy.slime::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 50px;
    background: linear-gradient(180deg, #7bed9f 0%, #2ed573 100%);
    border-radius: 50% 50% 45% 45%;
    bottom: 10px;
    left: 25px;
    animation: slimeBounce 1s ease-in-out infinite;
}

.enemy.slime::after {
    content: '👀';
    position: absolute;
    font-size: 20px;
    bottom: 35px;
    left: 45px;
    animation: slimeBounce 1s ease-in-out infinite;
}

@keyframes slimeBounce {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.9) scaleX(1.1); }
}

/* Wolf Enemy */
.enemy.wolf::before {
    content: '🐺';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Goblin Enemy */
.enemy.goblin::before {
    content: '👺';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Ghost Enemy */
.enemy.ghost::before {
    content: '👻';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
    animation: ghostFloat 2s ease-in-out infinite;
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(-15px); opacity: 1; }
}

/* Dragon Enemy */
.enemy.dragon::before {
    content: '🐉';
    font-size: 70px;
    position: absolute;
    bottom: 5px;
    left: 25px;
}

/* Skeleton Enemy */
.enemy.skeleton::before {
    content: '💀';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Mushroom Enemy */
.enemy.mushroom::before {
    content: '🍄';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Spider Enemy */
.enemy.spider::before {
    content: '🕷️';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Bat Enemy */
.enemy.bat::before {
    content: '🦇';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
    animation: batFlap 0.5s ease-in-out infinite;
}

@keyframes batFlap {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.9); }
}

/* Bee Enemy */
.enemy.bee::before {
    content: '🐝';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
    animation: beeBuzz 0.3s ease-in-out infinite;
}

@keyframes beeBuzz {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Golem Enemy */
.enemy.golem::before {
    content: '🗿';
    font-size: 70px;
    position: absolute;
    bottom: 5px;
    left: 25px;
}

/* Scorpion Enemy */
.enemy.scorpion::before {
    content: '🦂';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Mummy Enemy */
.enemy.mummy::before {
    content: '🧟';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Sand Worm Enemy */
.enemy.sandworm::before {
    content: '🐛';
    font-size: 60px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

/* Wyvern Enemy */
.enemy.wyvern::before {
    content: '🐲';
    font-size: 70px;
    position: absolute;
    bottom: 5px;
    left: 25px;
}

/* Gargoyle Enemy */
.enemy.gargoyle::before {
    content: '🗿';
    font-size: 70px;
    position: absolute;
    bottom: 5px;
    left: 25px;
}

/* Guardian Boss */
.enemy.guardian::before {
    content: '🌳';
    font-size: 80px;
    position: absolute;
    bottom: 0;
    left: 20px;
}

/* Pharaoh Boss */
.enemy.pharaoh::before {
    content: '🏺';
    font-size: 80px;
    position: absolute;
    bottom: 0;
    left: 20px;
}

/* Boss enemies */
.enemy.boss::after {
    content: '👑';
    position: absolute;
    font-size: 24px;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: crownBob 1s ease-in-out infinite;
}

@keyframes crownBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Elite enemy glow */
.enemy.elite {
    filter: drop-shadow(0 0 10px var(--color-purple));
}

/* Enemy attack animation */
.enemy.attacking {
    animation: enemyAttack 0.5s ease-out;
}

@keyframes enemyAttack {
    0% { transform: translateX(0); }
    30% { transform: translateX(-50px) rotate(-5deg); }
    60% { transform: translateX(-30px); }
    100% { transform: translateX(0); }
}

/* Enemy hurt animation */
.enemy.hurt {
    animation: enemyHurt 0.4s ease-out;
}

@keyframes enemyHurt {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(2) hue-rotate(30deg); }
}

/* Enemy death animation */
.enemy.dying {
    animation: enemyDeath 0.8s ease-out forwards;
}

@keyframes enemyDeath {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(0); opacity: 0; }
}

/* ============================================
   COMPANION CHARACTERS
   ============================================ */

.companion {
    width: 50px;
    height: 50px;
    position: relative;
    animation: companionBob 2s ease-in-out infinite;
}

@keyframes companionBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.companion.owl::before { content: '🦉'; font-size: 40px; }
.companion.cat::before { content: '🐱'; font-size: 40px; }
.companion.fox::before { content: '🦊'; font-size: 40px; }
.companion.rabbit::before { content: '🐰'; font-size: 40px; }
.companion.turtle::before { content: '🐢'; font-size: 40px; }
.companion.bird::before { content: '🐦'; font-size: 40px; }
.companion.squirrel::before { content: '🐿️'; font-size: 40px; }
.companion.hedgehog::before { content: '🦔'; font-size: 40px; }

/* ============================================
   TITLE SCREEN CAPYBARA
   ============================================ */

.title-capybara {
    width: 150px;
    height: 120px;
    margin: 0 auto var(--space-lg);
    position: relative;
    animation: titleCapybaraFloat 3s ease-in-out infinite;
}

.title-capybara::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 80px;
    background: var(--color-capybara-body);
    border-radius: 60px 60px 40px 40px;
    bottom: 20px;
    left: 15px;
    box-shadow: inset -15px -15px 30px rgba(0,0,0,0.1);
}

.title-capybara::after {
    content: '😊';
    position: absolute;
    font-size: 40px;
    bottom: 55px;
    left: 85px;
}

@keyframes titleCapybaraFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

/* ============================================
   RESTING CAPYBARA
   ============================================ */

.resting-capybara {
    width: 100px;
    height: 60px;
    position: relative;
    margin-left: 30px;
}

.resting-capybara::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 45px;
    background: var(--color-capybara-body);
    border-radius: 45px 45px 25px 25px;
    bottom: 5px;
    left: 5px;
}

.resting-capybara::after {
    content: '😴';
    position: absolute;
    font-size: 24px;
    bottom: 30px;
    left: 65px;
    animation: sleepBob 2s ease-in-out infinite;
}

@keyframes sleepBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Zzz animation */
.resting-capybara .zzz {
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 20px;
    animation: zzzFloat 2s ease-in-out infinite;
}

@keyframes zzzFloat {
    0% { opacity: 0; transform: translateY(10px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* ============================================
   VICTORY CAPYBARA
   ============================================ */

.victory-capybara {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--space-lg);
    font-size: 100px;
    animation: victoryDance 0.5s ease-in-out infinite;
}

.victory-capybara::before {
    content: '🎉';
    position: absolute;
    animation: confettiLeft 1s ease-in-out infinite;
}

.victory-capybara::after {
    content: '🦫';
}

@keyframes victoryDance {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.1); }
}

@keyframes confettiLeft {
    0%, 100% { transform: translateX(-30px) rotate(0deg); }
    50% { transform: translateX(-40px) rotate(15deg); }
}

/* ============================================
   EQUIPPED CAPYBARA (Inventory)
   ============================================ */

.equipped-capybara {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-md);
    position: relative;
}

.equipped-capybara::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 55px;
    background: var(--color-capybara-body);
    border-radius: 40px 40px 25px 25px;
    bottom: 15px;
    left: 10px;
}

.equipped-capybara::after {
    content: '😄';
    position: absolute;
    font-size: 30px;
    bottom: 40px;
    left: 55px;
}

/* Equipment display on character */
.equipped-capybara .equip-weapon {
    position: absolute;
    font-size: 24px;
    bottom: 30px;
    left: -5px;
    transform: rotate(-45deg);
}

.equipped-capybara .equip-armor {
    position: absolute;
    font-size: 20px;
    bottom: 25px;
    left: 35px;
}

.equipped-capybara .equip-helmet {
    position: absolute;
    font-size: 18px;
    top: 5px;
    left: 55px;
}