@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body, h1, h2, h3, p {
    font-family: 'Poppins', sans-serif;
    background: #E3E6DA;
    color: #2C2C2C;
    text-align: center;
    padding: 1em;
}

/* Stats Bar */
#stats-bar, #footer {
    background: #C5D1C6;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-left: 15px;
}

/* ✅ Ensure Cards Fit 4 in a Row on Small Screens */
.card-container, .enemy-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* ✅ Adjust Card Size for Small Screens */
.card {
    width: 160px;
    height: 180px;
    background: #D2B48C; /* Light brown */
    border: 2px solid #8B5A2B; /* Dark brown */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
    padding: 15px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}




/* ✅ Wave-Turn Label Inside Current Wave Box */
#current-wave-label {
    background: transparent; /* Ensure it blends into the box */
    padding: 10px 0;
}


/* Individual Function Card Styling */
.function-card {
    background: #FDF6C1; /* Lighter yellow background for distinctiveness */
    border: 3px solid #C8934D; /* Darker golden border */
    text-align: center;
    border-radius: 8px; /* Rounded edges */
    transition: transform 0.25s ease, background 0.25s ease;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); /* Add a nice shadow effect */
}

/* Function Card Hover Effect */
.function-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    background: #FFF8C9; /* Brighter yellow highlight */
    box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.25); /* Enhance shadow on hover */
}

/* Enemy Cards */
.enemy-card {
    background: #FFD9D9; /* Light red when alive (threat) */
    border: 2px solid #A52A2A; /* Dark red border */
}

/* Red for Threat Enemies */
.threat-card {
    background: #FF4C4C; /* Strong red */
    border: 2px solid #8B0000;
}

/* Green for Neutralized Enemies */
.neutralized-card {
    background: #4CAF50; /* Green */
    border: 2px solid #2E7D32;
}

/* ✅ Ensure Enemies Display in One Row */
.enemy-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
}

/* Container Style for All Function Cards */
#player-hand {
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    flex-wrap: wrap;            /* Allow wrapping of cards */
    gap: 10px;                  /* Spacing between cards */
    margin: 15px;

    /* Match stats bar style */
    background: #C5D1C6;        /* Light green background */
    padding: 15px;         /* Even top and bottom padding (15px default) */
    border-radius: 8px;         /* Rounded corners */
    font-size: 18px;            /* Consistent font size */
    font-weight: bold;          /* Consistent bold text */
    color: #2C2C2C;             /* Consistent text color */

    /* Add subtle box shadow */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

#player-hand h2 {
    background: transparent; /* Removes unwanted light green background */
    text-align: center;
    width: 100%;
    padding: 10px 0;
}

#current-wave-container {
    background: #C5D1C6; /* Same light green as player-hand */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Even padding */
    margin-top: 15px; /* Space from other elements */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow */
    text-align: center;
}

#current-wave-container h2 {
        background: transparent; /* Removes unwanted light green background */
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }

/* ✅ Wave Box (For Grouping Past Waves) */
.wave-box {
    background: #D0E2D0; /* Slightly different green */
    border: 2px solid #5A7A58; /* Dark green */
    border-radius: 10px;
    padding: 12px;
    margin-top: 15px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
}

/* ✅ Wave Box Title (Big, Clear Title for Each Wave) */
.wave-box-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: #2C2C2C;
}

/* ✅ Turn Box (For Individual Turns, Blends like "Your Functions") */
.turn-box::before {
    content: attr(data-label); /* Uses data-label attribute dynamically */
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
    color: #2C2C2C;
}

/* Large HP Display */
.enemy-hp {
    font-size: 40px;
    font-weight: bold;
    color: #043927;
}

/* Smooth Fade-In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.small-footer {
    font-size: 14px;
    text-align: center;
    color: #555;
    padding: 10px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    width: 100%;
}