/* Combat Visual Effects */

/* Screen Shake */
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shake-effect {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}

/* Hit Flash */
@keyframes flash-red {
    0% {
        filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1);
    }

    50% {
        filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5);
    }

    /* Red tint */
    100% {
        filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1);
    }
}

.flash-hit {
    animation: flash-red 0.3s ease-out;
}

/* Dead Enemy Grayscale */
.enemy-dead {
    filter: grayscale(100%);
    transition: filter 0.5s ease-out;
}

/* Fled Enemy Blueish Tint */
.enemy-fled {
    filter: sepia(1) saturate(3) hue-rotate(180deg) brightness(0.8);
    transition: filter 0.5s ease-out;
}

/* Floating Damage Numbers */
@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.3);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(1.5);
    }
}

.floating-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

.floating-text {
    position: absolute;
    font-weight: bold;
    font-size: 2.5rem;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    animation: float-up 2.5s ease-out forwards;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
}

.floating-text.damage-player {
    color: #ff4444;
}

.floating-text.damage-enemy {
    color: #ff4444;
}

.floating-text.damage-player-dealt {
    color: #ffffff;
}

.floating-text.heal {
    color: #44ff44;
}

/* Intent Bubble */
.intent-bubble {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 5px 15px;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
    0% {
        transform: translateX(-50%) scale(0);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

.intent-icon {
    font-size: 1.2em;
}

.intent-desc {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Intent Types */
.intent-attack {
    border-color: #ff4444;
}

.intent-defend {
    border-color: #4488ff;
}

.intent-special {
    border-color: #ffaa00;
}

/* Container relative positioning for absolute children */
.combat-enemy-display-inline {
    position: relative;
}

.combat-enemy-image-large {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.combat-enemy-image-large img {
    max-width: 100%;
    height: auto;
    display: block;
}

.combat-view {
    position: relative;
    /* For screen shake scope if applied here */
}

/* Combat Container */
.combat-container {
    position: relative;
    width: 100%;
}

/* Combat Content Wrapper - Groups enemy display, turn indicator, and combat log */
.combat-content-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Turn Indicator - Match Enemy Image Width */
.combat-turn-indicator-inline {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Combat Log Styles */
.combat-log-wrapper {
    width: 100%;
}

.combat-log-title {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #aaa;
    text-align: left;
}

.combat-log-inline {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.log-entries {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Custom scrollbar for combat log */
.log-entries::-webkit-scrollbar {
    width: 8px;
}

.log-entries::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.log-entries::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.log-entries::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.log-entry {
    font-size: 0.9em;
    padding: 6px 8px;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border-left: 3px solid transparent;
    transition: background 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.log-entry:hover {
    background: rgba(0, 0, 0, 0.35);
}

.log-time {
    color: #888;
    font-size: 0.85em;
    font-family: monospace;
    flex-shrink: 0;
    white-space: nowrap;
}

.log-message {
    flex: 1;
    word-wrap: break-word;
}

.player-log {
    color: #aaddff;
    border-left-color: #4488ff;
}

.enemy-log {
    color: #ffaaaa;
    border-left-color: #ff4444;
}