/* General Styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Times New Roman", Times, serif; /* A classic serif font for a medieval look */
    background-color: #f4f1e1; /* A parchment-like background color */
    color: #3e2723; /* Dark brown color for text */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    text-align: right;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    border: 5px solid #5d4037;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    background-color: #5d4037;
    color: #f4f1e1;
}
/* Header Styles */
.header {
    width: 100%;
    text-align: center;
    background-color: #f4f1e1;
    color: #3e2723;
    padding: 20px 0;
}

.header h1, .header h2 {
    margin: 0;
    padding: 5px 0;
    color: #3e2723;
    font-family: 'Georgia', serif; /* Elegant serif font for a medieval theme */
}

/* Sword (Enemy) Container Styles */
#sword_container {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url('parchment_texture.jpg'); /* A parchment texture background */
    border: 5px solid #5d4037; /* Border to frame the enemy area */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    margin-top: 20px;
}

#sword_image {
    max-width: 100%;
    max-height: 100%;
    width: 250px;
    height: 250px;
    object-fit: contain;
    animation: sword_animation 4s infinite; /* Consistent animation naming */
}

@keyframes sword_animation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Effect Animation */
/* Effect Animation */
.effect {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 0, 0, 0.7); /* Red for visibility */
    border-radius: 50%;
    pointer-events: none;
    animation: effect_animation 1s forwards; /* Animation duration set to 1s */
}

@keyframes effect_animation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(50px); /* Moves 50px downwards to simulate a drop */
        opacity: 0;
    }
}
/* Damage Number Styles */
.damage-number {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    color: red;
    animation: damage_animation 1s ease-out forwards; /* Animation with 1s duration */
    pointer-events: none; /* Prevents interference with clicks */
}
#damage-container {
    position: relative; /* Ensures the damage numbers are positioned relative to the container */
}
@keyframes damage_animation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px); /* Moves the number upwards */
        opacity: 0; /* Fades out */
    }
}
/* Stats Styles */
.stats {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
    margin-top: 20px;
    width: 80%; /* Ensures it doesn't span the entire width of the page */
    max-width: 500px; /* Sets a maximum width */
    text-align: center; /* Centers the text inside */ /* Light color for text to ensure readability */
    font-family: 'Georgia', serif; /* Consistent font for medieval theme */
    font-size: 18px;
}

/* Enemy Info Styles */
#enemy_info { 
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
    margin-top: 20px;
    width: 80%; /* Ensures it doesn't span the entire width of the page */
    max-width: 500px; /* Sets a maximum width */
    text-align: center; /* Centers the text inside */ /* Light color for text to ensure readability */
    font-family: 'Georgia', serif; /* Consistent font for medieval theme */
    font-size: 18px; /* Slightly larger font for readability */
}

/* Specific styles for individual stat items */
.stats p, #enemy_info p {
    margin: 10px 0; /* Adds space between each line of stats */
}

/* Shop Panel Styles */
.shop-panel {
    position: fixed;
    left: -300px; /* Initially hidden off-screen */
    top: 0;
    height: 100%;
    width: 300px; /* Wider for a more luxurious feel */
    background-color: #5d4037; /* Dark brown background to match the medieval theme */
    box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: left 0.3s ease; /* Smooth transition for opening/closing */
    color: #f4f1e1; /* Light text color for contrast */
}

/* When active, slide the panel into view */
.shop-panel.open {
    left: 0;
}

.shop-panel h2 {
    font-size: 22px; /* Slightly larger font size for readability */
    text-align: center;
    margin-bottom: 20px;
    color: #f4f1e1; /* Light text color for contrast */
    font-family: 'Georgia', serif; /* Consistent with the medieval theme */
}

/* Shop Item Styles */
.shop_item {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
    margin-top: 20px;
    width: 80%; /* Ensures it doesn't span the entire width of the page */
    max-width: 500px; /* Sets a maximum width */
    text-align: center; /* Centers the text inside */
    color: #5d4037; /* Light color for text to ensure readability */
    font-family: 'Georgia', serif; /* Consistent font for medieval theme */
    font-size: 18px;/* Smooth transitions */
}

/* Hover effect for shop items */
.shop_item:hover {
    background-color: #7c5b3a; /* Darker brown on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); /* Deeper shadow on hover */
}

/* Shop Item Text */
.shop_item p {
    margin: 0 0 10px;
    color: #f4f1e1; /* Light color for text */
    font-size: 16px; /* Adjusted font size for better readability */
}

/* Shop Item Button */
.shop_item button {
    padding: 10px;
    background-color: #4e342e; /* Dark button background */
    border: none;
    border-radius: 5px;
    color: #f4f1e1;
    font-size: 16px; /* Larger font size for buttons */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

/* Hover effect for shop buttons */
.shop_item button:hover {
    background-color: #d32f2f; /* A red hover effect for buttons */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Close Shop Button Styles */
#closeShop {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #3e2723; /* Darker button for closing the shop */
    border: none;
    border-radius: 5px;
    color: #f4f1e1;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

/* Hover effect for close shop button */
#closeShop:hover {
    background-color: #d32f2f; /* Red hover effect */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

#openShop {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
    margin-top: 20px;
    width: 80%; /* Ensures it doesn't span the entire width of the page */
    max-width: 500px; /* Sets a maximum width */
    text-align: center; /* Centers the text inside */ /* Light color for text to ensure readability */
    font-family: 'Georgia', serif; /* Consistent font for medieval theme */
    font-size: 18px;
    background-color: #3e2723; 
    color: #f4f1e1;
}