body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    /* Soft gradient background */
    background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
    color: #333;
    direction: rtl; /* Right-to-left for Hebrew */
    text-align: center;
    overflow: hidden; /* Prevent scrollbars if content slightly overflows */
}

.container {
    background-color: #ffffff; /* Clean white background */
    padding: 40px; /* More padding */
    border-radius: 20px; /* Softer rounded corners */
    /* More pronounced, but soft shadow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 850px; /* Slightly wider */
    box-sizing: border-box; /* Include padding in width */
    position: relative; /* For potential future animations */
}

h1 {
    color: #0056b3; /* Darker, richer blue */
    margin-bottom: 35px;
    font-size: 2.8em; /* Larger title */
    font-weight: bold;
    /* Subtle text shadow for depth */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    /* A more distinct but elegant border below tabs */
    border-bottom: 3px solid #cfe2f3;
}

.tab-button {
    background-color: #e9f5ff; /* Lighter blue for inactive tabs */
    border: none;
    padding: 15px 30px; /* More padding */
    cursor: pointer;
    font-size: 1.2em; /* Slightly larger font */
    font-weight: bold;
    color: #4a7bb3; /* Complementary blue text */
    border-radius: 10px 10px 0 0; /* More rounded top corners */
    transition: all 0.3s ease;
    margin: 0 7px; /* More space between tabs */
    position: relative; /* For underline effect */
    top: 2px; /* Lift slightly to appear "on top" of border */
}

.tab-button:hover {
    background-color: #d0e8ff; /* Lighter hover */
    color: #0056b3; /* Darker text on hover */
}

.tab-button.active {
    background-color: #007bff; /* Primary blue for active */
    color: white;
    /* Stronger, matching underline for active tab */
    border-bottom: 3px solid #007bff;
    top: 0; /* Fully connected to the line */
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for active tab */
}

.game-area {
    padding: 30px;
    border: 1px solid #cceeff; /* Soft blue border */
    border-radius: 15px; /* Matches container rounding */
    background-color: #fefefe; /* Very subtle off-white */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05); /* Inner shadow for depth */
}

.word-display {
    min-height: 120px; /* Taller display area */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em; /* Much larger word font */
    font-weight: bold;
    letter-spacing: 7px; /* More spacing between letters */
    margin-bottom: 20px; /* Less margin before translation */
    color: #2c3e50; /* Darker, prominent text color */
    flex-wrap: wrap;
    direction: ltr; /* Ensures left-to-right for English words */
    /* Add a subtle box shadow to the word display itself for a "floating" effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px; /* Soft edges for the display box */
    background-color: #e9f5ff; /* Light background for the word display */
    padding: 15px; /* Padding inside the display area */
}

/* Animation for individual letters */
.word-display span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) scale(0.9); /* Start lower and slightly smaller */
    animation: fadeInSlideUpScale 0.6s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother animation curve */
}

/* New keyframe for a slightly more dynamic letter appearance */
@keyframes fadeInSlideUpScale {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Style for the translation display area */
.translation-display {
    min-height: 40px; /* Space for translation */
    font-size: 1.8em; /* Size for translated word */
    color: #4a7bb3; /* A nice blue for translation */
    font-weight: bold;
    margin-bottom: 30px; /* Space before buttons */
    direction: rtl; /* Ensure Hebrew is right-to-left */
}

.controls {
    display: flex;
    justify-content: center;
    gap: 25px; /* More space between buttons */
    margin-top: 30px; /* More space above buttons */
}

.action-button {
    color: white;
    border: none;
    padding: 16px 35px; /* Larger buttons */
    border-radius: 10px; /* Softer rounded corners */
    cursor: pointer;
    font-size: 1.3em; /* Larger font on buttons */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Default button shadow */
}

.action-button:hover {
    transform: translateY(-3px); /* More pronounced lift on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.action-button:active {
    transform: translateY(0); /* Press effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Pressed shadow */
}

.listen {
    background-color: #007bff; /* Primary blue for listen */
}

.listen:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.translate {
    background-color: #6f42c1; /* Purple for translate */
}

.translate:hover {
    background-color: #5a359d;
}

.next {
    background-color: #28a745; /* Vibrant green for next word */
}

.next:hover {
    background-color: #218838; /* Darker green on hover */
}

.message-area {
    margin-top: 30px; /* More space for messages */
    font-size: 1.4em; /* Larger message font */
    font-weight: bold;
    min-height: 40px; /* Taller message area */
    color: #555; /* Neutral gray for general messages */
}