/* Pixel Art Battle Animations */

.battle-arena {
    position: relative;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 4px solid #87DB1C;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px;
    box-sizing: border-box;
}

/* Character Positioning */
.hero-character {
    width: 64px;
    height: 64px;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.challenge-monster {
    width: 80px;
    height: 72px;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Idle Animations */
@keyframes heroIdle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-2px); }
}

@keyframes monsterIdle {
    0%, 100% { transform: translateY(0px) scaleX(1); }
    50% { transform: translateY(-3px) scaleX(1.02); }
}

.hero-character.idle {
    animation: heroIdle 2s ease-in-out infinite;
}

.challenge-monster.idle {
    animation: monsterIdle 3s ease-in-out infinite;
}

/* Attack Animations */
@keyframes heroAttack {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(20px) rotate(-10deg) scale(1.1); }
    50% { transform: translateX(40px) rotate(-15deg) scale(1.15); }
    75% { transform: translateX(20px) rotate(-5deg) scale(1.05); }
    100% { transform: translateX(0) rotate(0deg); }
}

@keyframes monsterAttack {
    0% { transform: translateX(0) scaleX(1); }
    25% { transform: translateX(-15px) scaleX(1.1) scaleY(0.9); }
    50% { transform: translateX(-30px) scaleX(1.2) scaleY(0.8); }
    75% { transform: translateX(-15px) scaleX(1.1) scaleY(0.9); }
    100% { transform: translateX(0) scaleX(1); }
}

.hero-character.attacking {
    animation: heroAttack 0.8s ease-out;
}

.challenge-monster.attacking {
    animation: monsterAttack 1s ease-out;
}

/* Damage/Hit Animations */
@keyframes takeDamage {
    0%, 100% { transform: translateX(0) scaleX(1); filter: brightness(1); }
    25% { transform: translateX(-8px) scaleX(0.95); filter: brightness(1.5) hue-rotate(0deg); }
    50% { transform: translateX(8px) scaleX(0.95); filter: brightness(2) hue-rotate(180deg); }
    75% { transform: translateX(-4px) scaleX(0.98); filter: brightness(1.5) hue-rotate(0deg); }
}

.hero-character.taking-damage,
.challenge-monster.taking-damage {
    animation: takeDamage 0.5s ease-in-out;
}

/* Victory/Defeat Animations */
@keyframes victory {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(-20px) scale(1.1) rotate(5deg); }
    50% { transform: translateY(-30px) scale(1.15) rotate(-5deg); }
    75% { transform: translateY(-20px) scale(1.1) rotate(5deg); }
    100% { transform: translateY(0) scale(1.05) rotate(0deg); }
}

@keyframes defeat {
    0% { transform: translateY(0) rotate(0deg) scaleY(1); opacity: 1; }
    50% { transform: translateY(10px) rotate(-90deg) scaleY(0.8); opacity: 0.7; }
    100% { transform: translateY(20px) rotate(-90deg) scaleY(0.6); opacity: 0.3; }
}

.hero-character.victorious {
    animation: victory 1.5s ease-in-out infinite;
}

.challenge-monster.defeated {
    animation: defeat 2s ease-out forwards;
}

/* Battle Effects */
.battle-effect {
    position: absolute;
    pointer-events: none;
    z-index: 20;
}

.impact-effect {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, #FFD700 0%, #FF6B6B 50%, transparent 100%);
    border-radius: 50%;
    opacity: 0;
}

@keyframes impactFlash {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2); }
}

.impact-effect.active {
    animation: impactFlash 0.3s ease-out;
}

/* Health Bars */
.health-bar-container {
    position: absolute;
    top: 20px;
    width: 120px;
    height: 16px;
    background: #2C3E50;
    border: 2px solid #87DB1C;
    border-radius: 4px;
}

.health-bar-container.hero {
    left: 20px;
}

.health-bar-container.monster {
    right: 20px;
}

.health-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #87DB1C 0%, #6BAD11 100%);
    transition: width 0.5s ease-out;
    border-radius: 2px;
}

.health-bar.damaged {
    background: linear-gradient(90deg, #FF6B6B 0%, #FF4444 100%);
}

.health-bar.critical {
    background: linear-gradient(90deg, #FF0000 0%, #CC0000 100%);
    animation: pulse 0.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

/* Screen Shake Effect */
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) translateY(2px); }
    50% { transform: translateX(4px) translateY(-2px); }
    75% { transform: translateX(-2px) translateY(4px); }
}

.battle-arena.screen-shake {
    animation: screenShake 0.3s ease-in-out;
}

/* Contact-specific battle text */
.battle-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #87DB1C;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #87DB1C;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
}

.battle-message.show {
    opacity: 1;
    animation: messageSlide 3s ease-in-out forwards;
}

@keyframes messageSlide {
    0% { opacity: 0; transform: translate(-50%, -100%); }
    20% { opacity: 1; transform: translate(-50%, -50%); }
    80% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, 0%); }
}

/* Contact Character Styles */
.contact-character-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-hero {
    position: relative;
    z-index: 10;
    animation: heroIdle 2s ease-in-out infinite;
}

/* Speech Bubble Styles */
.speech-bubble {
    position: absolute;
    background: #ffffff;
    color: #333;
    padding: 12px 16px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid #87DB1C;
    z-index: 25;
    opacity: 1;
    animation: speechBubbleFloat 3s ease-in-out infinite;
    max-width: 150px;
    text-align: center;
    line-height: 1.3;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.contact-bubble {
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.contact-bubble::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #ffffff;
    border-bottom: none;
}

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

.speech-bubble.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Pixel Portraits for Team Members */
.pixel-portrait {
    width: 120px;
    height: 120px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
    animation: heroIdle 3s ease-in-out infinite;
}

.profile-circle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-circle .profile-badge {
    position: absolute;
    bottom: -10px;
    background: linear-gradient(135deg, #87DB1C 0%, #6BAD11 100%);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(135, 219, 28, 0.4);
}

/* Quest Metrics Pixel Icons */
.metric-pixel-icon {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.metric-card:hover .metric-pixel-icon {
    transform: scale(1.15) translateY(-3px);
    filter: drop-shadow(3px 3px 10px rgba(135, 219, 28, 0.6));
    animation: heroIdle 2s ease-in-out infinite;
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

/* Feature Cards Pixel Icons */
.feature-pixel-icon {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.feature-icon-pixel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-pixel::after {
    content: none !important;
}

.feature-card:hover .feature-pixel-icon {
    transform: scale(1.2) rotate(-5deg);
    filter: drop-shadow(3px 3px 8px rgba(255, 255, 255, 0.3));
    animation: heroIdle 2s ease-in-out infinite;
}

/* Process Journey Pixel Icons */
.process-pixel-icon {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.process-step:hover .process-pixel-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(3px 3px 8px rgba(135, 219, 28, 0.5));
    animation: heroIdle 2s ease-in-out infinite;
}

.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* Pixel Icons for Principles */
.pixel-icon {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.principle-card:hover .pixel-icon {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(3px 3px 8px rgba(135, 219, 28, 0.4));
    animation: heroIdle 2s ease-in-out infinite;
}

.principle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(135, 219, 28, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(135, 219, 28, 0.2);
}

.principle-card:hover .principle-icon {
    background: rgba(135, 219, 28, 0.2);
    border-color: rgba(135, 219, 28, 0.4);
}

/* Guild Members Styles */
.guild-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin: 40px 0;
    padding: 40px 0;
}

.guild-member {
    text-align: center;
    padding: 20px;
    background: rgba(135, 219, 28, 0.05);
    border-radius: 12px;
    border: 2px solid rgba(135, 219, 28, 0.2);
    transition: all 0.3s ease;
}

.guild-member:hover {
    transform: translateY(-5px);
    background: rgba(135, 219, 28, 0.1);
    border-color: rgba(135, 219, 28, 0.4);
    box-shadow: 0 10px 30px rgba(135, 219, 28, 0.2);
}

.guild-member-avatar {
    margin: 0 auto 20px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    padding: 8px;
}

.guild-member-avatar img {
    width: 64px;
    height: 64px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
    animation: heroIdle 3s ease-in-out infinite;
}

.guild-member h3 {
    color: #87DB1C;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.guild-member p {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .battle-arena {
        height: 250px;
        padding: 15px;
    }

    .hero-character {
        width: 48px;
        height: 48px;
    }

    .challenge-monster {
        width: 60px;
        height: 54px;
    }

    .health-bar-container {
        width: 80px;
        height: 12px;
    }

    .battle-message {
        font-size: 12px;
        padding: 8px 16px;
    }

    .contact-hero svg {
        width: 96px;
        height: 96px;
    }

    .speech-bubble {
        font-size: 10px;
        padding: 8px 12px;
        max-width: 120px;
    }

    .contact-bubble {
        top: -35px;
    }

    .guild-members-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        margin: 30px 0;
        padding: 30px 0;
    }

    .guild-member {
        padding: 15px;
    }

    .guild-member-avatar {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
    }

    .guild-member-avatar img {
        width: 48px;
        height: 48px;
    }

    .guild-member h3 {
        font-size: 1rem;
    }

    .guild-member p {
        font-size: 0.8rem;
    }

    .pixel-portrait {
        width: 80px;
        height: 80px;
    }

    .profile-circle .profile-badge {
        font-size: 0.7rem;
        padding: 3px 10px;
    }

    .pixel-icon {
        width: 36px;
        height: 36px;
    }

    .principle-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
    }

    .process-pixel-icon {
        width: 36px;
        height: 36px;
    }

    .step-icon {
        min-height: 50px;
    }

    .feature-pixel-icon {
        width: 30px;
        height: 30px;
    }

    .metric-pixel-icon {
        width: 30px;
        height: 30px;
    }
}