/* Base Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background: #596972 !important; /* Light, neutral background */
    color: #B5B9B2 !important; /* Soft, brownish tone for text */
    line-height: 1.6;
}

/* Header Styling */
h1 {
    color: #73706D; /* Neutral, muted color */
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #73706D;
}

p {
    text-align: center;
    color: #4B3C2D; /* Matching soft brown for paragraph text */
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* Button Styling */
button {
    background-color: #736F6B; /* Neutral, minimalistic button color */
    color: #FFFFFF; /* White text for contrast */
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #565350; /* Darker shade on hover */
}

/* Chat Box Styling */
#chat-container {
    display: flex;
    width: 120%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #F0ECE8; /* Light, warm background for chat area */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#chat-box {
    flex-grow: 1;
    padding: 10px;
    height: 500px;
    overflow-y: scroll;
    background-color: #B5B9B2; /* Slightly darker chat background */
    margin-right: 20px;
    border-radius: 8px;
}

.message {
    margin: 5px 0;
    padding: 8px;
    border-radius: 5px;
    background-color: #A6A39F; /* Muted color for messages */
    color: #3E3A37; /* Darker text for contrast */
}

/* Input and Button Layout (Restored Layout) */
.input-group {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

#message-input, #answer-input {
    flex: 1; /* Allows the input to grow */
    padding: 10px;
    border: 1px solid #A6A39F;
    border-radius: 8px;
    background-color: #4A4848 !important;
    color: #4B3C2D;
}

#send-button, #check-answer {
    width: auto;
    padding: 10px 15px;
    margin-left: 5px;
    background-color: #565350; /* Button color */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 10px #D5C6A1, 0 0 20px #D5C6A1, 0 0 30px #D5C6A1; /* Initial Lucent Yellow glow */
    animation: glow 1.5s ease-in-out infinite alternate;
}

/* Glowing Effect */
@keyframes glow {
    from {
        box-shadow: 0 0 10px #D5C6A1, 0 0 20px #D5C6A1, 0 0 30px #D5C6A1; /* Lucent Yellow */
    }
    to {
        box-shadow: 0 0 20px #D5C6A1, 0 0 30px #D5C6A1, 0 0 40px #D5C6A1;
    }
}

/* Riddle Styling */
#riddle-container h4 {
    color: #B5B9B2; /* Neutral shade for riddle title */
    font-size: 1.5em;
}

#riddle-text {
    font-size: 20px;
    color: #B5B9B2; /* Minimalist, neutral tone */
    font-weight: bold;
}

/* User List Styling */
#users-list {
    padding: 10px;
    background-color: #D7D0C7;
    border-radius: 8px;
    color: #B5B9B2;
}