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

body {
    font-family: 'Poppins', sans-serif; /* Use Poppins */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Subtle gradient background */
    margin: 0;
    padding-top: 50px; /* Add padding to push container down slightly */
}

.game-container {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    padding: 35px 40px;
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer shadow */
    text-align: center;
    width: 90%;
    max-width: 700px; /* Slightly wider */
    border: 1px solid #e0e0e0; /* Subtle border */
}

h2#english-sentence {
    margin-bottom: 25px;
    color: #2c3e50; /* Darker blue-grey */
    font-weight: 500;
    font-size: 1.4rem;
    backdrop-filter: blur(5px); /* Frosted glass effect */
}

.drop-area,
.word-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Use gap for spacing */
    min-height: 60px;
    padding: 15px;
    margin: 25px 0;
    border: 2px dashed #bdc3c7; /* Lighter grey dash */
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.word-bank {
    border-style: solid;
    border-color: #dce4ec;
    background-color: #f8f9fa;
}

.drop-area {
    background-color: #ffffff;
}

.drop-area:empty::before {
    content: "Build your sentence here...";
    color: #95a5a6;
    font-style: italic;
}

.word-tile {
    background-color: #ffffff;
    color: #34495e; /* Darker text */
    padding: 10px 18px;
    margin: 0; /* Remove margin as gap is used */
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    border: 1px solid #d1d8de;
    transition: all 0.2s ease-in-out;
    font-weight: 400;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.word-tile:hover {
    background-color: #eaf0f6;
    border-color: #a8b8c8;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.07);
}

.word-tile.highlight-clue {
    background-color: #fff9c4; /* Yellow highlight for clue */
    border-color: #fbc02d;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.controls {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex; /* Use flex for button alignment */
    justify-content: center; /* Center buttons */
    gap: 15px; /* Space between buttons */
}

button {
    background: linear-gradient(145deg, #007bff, #0056b3); /* Gradient background */
    color: white;
    border: none;
    padding: 12px 25px;
    margin: 0; /* Remove margin */
    border-radius: 8px; /* More rounded */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px;
}

button:hover {
    background: linear-gradient(145deg, #0069d9, #004085);
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.4);
    transform: translateY(-1px);
}

button:active {
    background: linear-gradient(145deg, #0056b3, #00376e);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    transform: translateY(0px);
}

/* Specific button styles */
#check-answer {
    background: linear-gradient(145deg, #28a745, #1e7e34); /* Green */
    box-shadow: 0 3px 6px rgba(40, 167, 69, 0.3);
}
#check-answer:hover {
    background: linear-gradient(145deg, #218838, #155724);
    box-shadow: 0 5px 10px rgba(40, 167, 69, 0.4);
}
#check-answer:active {
    background: linear-gradient(145deg, #1e7e34, #10411c);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

#restart {
    background: linear-gradient(145deg, #dc3545, #a71d2a); /* Red */
    box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3);
}
#restart:hover {
    background: linear-gradient(145deg, #c82333, #8a1823);
    box-shadow: 0 5px 10px rgba(220, 53, 69, 0.4);
}
#restart:active {
    background: linear-gradient(145deg, #a71d2a, #6e1018);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

#clue {
    background: linear-gradient(145deg, #ffc107, #cc9a06); /* Yellow/Orange */
    box-shadow: 0 3px 6px rgba(255, 193, 7, 0.3);
}
#clue:hover {
    background: linear-gradient(145deg, #e0a800, #b38600);
    box-shadow: 0 5px 10px rgba(255, 193, 7, 0.4);
}
#clue:active {
    background: linear-gradient(145deg, #cc9a06, #806100);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

.feedback-area {
    margin-top: 20px;
    min-height: 30px;
    font-weight: 500; /* Slightly bolder */
    font-size: 1.1rem;
    padding: 10px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.feedback-area.show {
    opacity: 1;
}

.feedback-correct {
    color: #155724;
    background-color: #d4edda; /* Light green background */
    border: 1px solid #c3e6cb;
}

.feedback-incorrect {
    color: #721c24;
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb;
}

/* Updated status-bar styles */
.status-bar {
    /* Remove fixed positioning and related styles */
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* background-color: rgba(255, 255, 255, 0.85); */
    /* box-shadow: 0 -2px 5px rgba(0,0,0,0.05); */
    /* backdrop-filter: blur(5px); */

    /* Add styles for placement within game-container */
    margin-top: 30px; /* Space above the status bar */
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0; /* Add a top border separator */
    background-color: #f8f9fa; /* Light background consistent with word bank */
    border-bottom-left-radius: 12px; /* Match container rounding */
    border-bottom-right-radius: 12px; /* Match container rounding */
    display: flex;
    justify-content: center; /* Center content */
    font-size: 0.95rem;
    color: #495057;
}

.counter,
.score {
    position: static; /* Keep this */
    font-weight: 500;
}

/* Updated counter style */
.counter {
    text-align: center;
    color: #6c757d; /* Grey color */
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Updated score display style */
.score {
    width: 100%;
    text-align: center; /* Center the score text */
    font-weight: 500;
}

.score span { /* Style the individual stat spans */
    margin: 0 10px; /* Add spacing between stats */
    font-weight: 600; /* Make numbers slightly bolder */
}

#score-correct {
    color: #28a745; /* Green for correct */
}

#score-incorrect {
    color: #dc3545; /* Red for incorrect */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding-top: 30px;
    }
    .game-container {
        width: 95%;
        padding: 25px 20px;
    }
    button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .word-tile {
        padding: 8px 15px;
        font-size: 0.95rem;
    }
    h2#english-sentence {
        font-size: 1.2rem;
    }
    .status-bar {
        /* No longer fixed, so remove padding adjustments here if any */
        padding: 10px 15px; /* Adjust padding */
        font-size: 0.9rem;
        margin-top: 25px; /* Adjust margin */
    }
    /* Ensure counter is also responsive */
    .counter {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .controls {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px;
        align-items: stretch; /* Make buttons full width */
    }
    button {
        width: 100%;
    }
    .status-bar {
        /* No longer fixed, so remove font-size adjustments here if any */
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    /* Adjust score spans for smaller screens */
    .score span {
        margin: 0 5px;
    }
    .word-tile {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}