/* Log Container Styling */
.log {
    position: absolute;
    top: calc(100% + 20px); /* Position the log below the game container */
    left: 20px; /* Align the log to the left edge */
    width: 576px; /* Adjusted to match the width of the game box */
    max-height: 150px; /* Set a maximum height to allow scrolling */
    overflow-y: auto; /* Enable vertical scroll when log exceeds max-height */
    background-color: #111b2e; /* Dark navy background */
    color: #fff; /* White text */
    padding: 10px; /* Add padding for better readability */
    box-sizing: border-box; /* Ensure padding is included in width and height */
}

.username {
    color: #add8e6 !important; /* Light blue color */
    font-weight: bold !important; /* Bold font */
}

.enemy-name {
    color: red !important;      
    font-weight: bold !important;
}

/* Individual log message styling */
.log > .log-message {
    opacity: 1; /* Full opacity for all messages */
    animation: slideDown 2s ease forwards; /* New animation for sliding effect */
}

/* Keyframes for fade-in and slide-down */
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px); /* Start slightly above */
    }
    100% {
        opacity: 1;
    }
}

/* Smooth slide-down effect for all other messages */
.log > .log-message + .log-message {
    animation: pushDown 2s ease forwards; /* Smooth transition for older messages */
}

@keyframes pushDown {
    0% {
        transform: translateY(0); /* Original position */
        margin-bottom: 0; /* Remove margin during movement */
    }
    100% {
        transform: translateY(10px); /* Minimal slide-down to match the spacing */
        margin-bottom: 10px; /* Restore margin only at final position */
    }
}

/* Opacity gradient for older log messages */
.log > .log-message:first-child {
    opacity: 1; /* Newest message has 100% opacity */
}

.log > .log-message:nth-child(2) {
    opacity: 0.8; /* Second newest message */
}

.log > .log-message:nth-child(3) {
    opacity: 0.6; /* Third newest message */
}

.log > .log-message:nth-child(4) {
    opacity: 0.4; /* Fourth newest message */
}

.log > .log-message:nth-child(5) {
    opacity: 0.2; /* Fifth newest message */
}

.log > .log-message:nth-child(n+6) {
    opacity: 0.2; /* All messages after the fifth have the same opacity as the fifth */
}

html.phone-optimised #logContainer,
body.phone-optimised #logContainer,
html.phone-optimised #log,
body.phone-optimised #log {
    display: none !important;
}